vc-create-dashboard 2.9.7 → 2.9.8

package/src/lib/create-dashboard-container/create-dashboard.component.less

@@ -1,1277 +0,0 @@
-@import url('https://cdn.v-comply.com/design-system/css/mixin/mixin.css');
-@import url('https://cdn.v-comply.com/design-system/css/color/color.css');
-@import url('https://cdn.v-comply.com/design-system/css/icons/icons.css');
-@import url('https://cdn.v-comply.com/design-system/css/display/display.css');
-@import url('https://cdn.v-comply.com/design-system/css/dialog/dialog.css');
-@import url('https://cdn.v-comply.com/design-system/css/button/button.css');
-@import url('https://cdn.v-comply.com/design-system/css/text/text.css');
-@import url('https://cdn.v-comply.com/design-system/css/margin/margin.css');
-@import url('https://cdn.v-comply.com/design-system/css/margin/margin-top.css');
-@import url('https://cdn.v-comply.com/design-system/css/margin/margin-right.css');
-@import url('https://cdn.v-comply.com/design-system/css/margin/margin-bottom.css');
-@import url('https://cdn.v-comply.com/design-system/css/margin/margin-left.css');
-@import url('https://cdn.v-comply.com/design-system/css/padding/padding.css');
-@import url('https://cdn.v-comply.com/design-system/css/padding/padding-top.css');
-@import url('https://cdn.v-comply.com/design-system/css/padding/padding-right.css');
-@import url('https://cdn.v-comply.com/design-system/css/padding/padding-bottom.css');
-@import url('https://cdn.v-comply.com/design-system/css/padding/padding-left.css');
-@import url('https://cdn.v-comply.com/design-system/css/alignment/alignment.css');
-@import url('https://cdn.v-comply.com/design-system/css/width/width.css');
-@import url('https://cdn.v-comply.com/design-system/css/animate/animation.css');
-@import url('https://cdn.v-comply.com/design-system/css/animate/animate-slide-right.css');
-// @import url('https://cdn.v-comply.com/design-system/css/forms/forms.css');
-
-::ng-deep .create-dashboard {
-    &-container {
-        width     : 100vw;
-        background: #161B2FCC;
-
-        .vx-dialog-container {
-            background-color: #FFFFFF;
-            border          : none;
-            position        : relative;
-    
-            &.tablet-width {
-                @media screen and (max-width:1280px){
-                    width: 28px;
-    
-                    .form-group {
-                        .vx-dialog-body-container {
-                            overflow: hidden;
-                        }
-                    }
-                }
-            }
-    
-            button.close-dialog {
-                display        : flex;
-                position       : absolute;
-                top            : 8px;
-                right          : 8px;
-                height         : 32px;
-                width          : 32px;
-                font-size      : 16px;
-                color          : #161B2F;
-                cursor         : pointer;
-                background     : transparent;
-                border         : none;
-                border-radius  : 2px;
-                z-index        : 2;
-                align-items    : center;
-                justify-content: center;
-    
-                &:hover {
-                    background: #F1F1F1;
-                }
-    
-                &:disabled {
-                    pointer-events: none;
-                    filter        : grayscale(1);
-                    opacity       : 0.3;
-                }
-    
-                &.hide {
-                    @media screen and (max-width:1280px){
-                        display: none;
-                    }
-                }
-            }
-        }
-    }
-
-    .more-option {
-        width       : calc(100% - 500px);
-        border-right: 1px solid #F1F1F1;
-        float       : left;
-
-        @media screen and (max-width:1280px){
-            width: calc(100vw - 28px);
-
-            app-user-list {
-                .user-list {
-                    right: 28px;
-                }
-            }
-
-            app-responsibility-center {
-                .responsibility-center {
-                    right: 28px;
-                }
-            }
-
-            app-categories {
-                .category-list {
-                    right: 28px;
-                }
-            }
-
-            app-risk-categories {
-                .risk-category-list {
-                    right: 28px;
-                }
-            }
-
-            app-frequency {
-                .create-frequency {
-                    right: 28px;
-                }
-            }
-        }
-    }
-}
-
-::ng-deep .form-group {
-    position: relative;
-
-    .vx-dialog-body-container {
-        padding         : 36px 28px 0 40px !important;
-        height          : calc(100vh - 50px);
-        overflow        : auto;
-        margin-left     : -22px;
-        background-color: transparent;
-        position        : relative;
-        border-radius   : 0 0 0 30px;
-        background      : transparent;
-
-        &.hidden-scroll {
-            @-moz-document url-prefix() { 
-                overflow: hidden;
-            }
-        }
-
-        .form-group-row {
-            display: flex;
-
-            .image {
-                width          : 36px;
-                min-width      : 36px;
-                height         : 36px;
-                margin-left    : -36px;
-                margin-right   : 20px;
-                margin-top     : 28px;
-                display        : flex;
-                align-items    : center;
-                justify-content: center;
-
-                img {
-                    width: 100%;
-                }
-
-                .checkIcon {
-                    width            : 32px;
-                    height           : 32px;
-                    background       : #ffffff;
-                    border-radius    : 50%;
-                    stroke-width     : 4;
-                    stroke           : #34aa44;
-                    stroke-miterlimit: 10;
-                    box-shadow       : inset 0px 0px 0px #34aa44;
-                    animation        : fillCheck 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
-                    margin-top       : 0;
-                }
-
-                .checkIcon__circle {
-                    stroke-dasharray : 166;
-                    stroke-dashoffset: 166;
-                    stroke-width     : 2;
-                    stroke-miterlimit: 10;
-                    stroke           : #34aa44;
-                    fill             : none;
-                    animation        : strokeCheck 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
-                }
-
-                .checkIcon__check {
-                    transform-origin : 50% 50%;
-                    stroke-dasharray : 48;
-                    stroke-dashoffset: 48;
-                    animation        : strokeCheck 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
-                }
-            }
-
-            .form {
-                width: 100%;
-
-                .vx-form-group {
-                    position: relative;
-                    input {
-                        height: 40px;
-                        border-radius: 4px;
-                        border: 1px solid #dbdbdb;
-                        outline: none;
-                        transition: all .2s ease-in-out;
-
-                        &::placeholder {
-                            color: #747576;
-                        }
-                        &+marx-editor, &+vcomply-editor {
-                            margin-top: 8px;
-                            display   : block;
-                        }
-
-                        &:hover {
-                            border-color: #1e5dd3;
-                            box-shadow: 0 0 5px #1e5dd345;
-                        }
-                        &:focus{
-                            border-color: #1e5dd3;
-                            box-shadow: 0 0 5px rgba(30,93,211,.27);
-                        }
-                    }
-
-                    .selectbox {
-                        &:after {
-                            border-left: none;
-                            border-bottom: 1px solid #707070;
-                            border-right: 1px solid #707070;
-                            border-top: none;
-                            content: "";
-                            display: inline-block;
-                            right: 15px;
-                            position: absolute;
-                            top: calc(50% + 8px);
-                            width: 5px;
-                            height: 5px;
-                            transform: rotate(45deg);
-                            // content     : "";
-                            // border-top  : 4px solid #707070;
-                            // border-right: 4px solid transparent;
-                            // border-left : 4px solid transparent;
-                            // position    : absolute;
-                            // right       : 16px;
-                            // top         : calc(50% - 2px);
-                        }
-
-                        &:hover {
-                            .custom-input {
-                                border-color: #1e5dd3;
-                                box-shadow  : 0 0 5px #1e5dd345;
-                            }
-                        }
-                    }
-
-                    .selected {
-                        height: 40px;
-                        border-radius: 4px;
-                        border: 1px solid #f1f1f1;
-                        background: #fbfbfb;
-                        outline: none;
-                        position: relative;
-                        transition: all .2s ease-in-out;
-                        .edit{
-                            border: 1px solid #F1F1F1;
-                            border-radius: 2px;
-                            background: #FFFFFF;
-                            outline: none;
-                            cursor: pointer;
-                            height: 24px;
-                        }
-                        
-                        .left {
-                            width  : auto;
-                            display: flex;
-                          
-                            &.frequency-left{
-                                text-overflow: ellipsis;
-                                white-space: nowrap;
-                                overflow: hidden;
-                                display: block;
-                                width: calc(100% - 70px);
-                            }
-                        }
-
-                        .chip-container {
-                            width: auto;
-
-                            .chip {
-                                border-radius: 2px;
-                                box-shadow: 0px 0px 3px #1E5DD31A;
-                                height: 24px;
-                                white-space: nowrap;
-                                overflow: hidden;
-                                text-overflow: ellipsis;
-                                line-height: 24px;
-
-                                i{
-                                    cursor: pointer;
-                                }
-
-                                .value {
-                                    max-width    : 100px;
-                                    display      : block;
-                                    text-overflow: ellipsis;
-                                    white-space  : nowrap;
-                                    overflow     : hidden;
-                                }
-                            }
-                            span.chip + span.chip {
-                                margin-left: 4px;
-                            }
-                        }
-                        .count{
-                            border-radius: 2px;
-                            height: 24px;
-                            padding: 2px 8px;
-                            border: 1px solid #1E5DD3;
-                            cursor: pointer;
-                            outline: none;
-                        }
-
-                        .user-group-chip-container {
-                            display: flex;
-                            width: calc(100% - 60px);
-                            align-items: center;
-
-                            .chip-inner {
-                                background: #fff;
-                                border-radius: 2px;
-                                box-shadow: 0 2px 4px #1e5dd31a;
-                                line-height: 24px;
-                                padding: 0 4px 0 8px;
-                                display: flex;
-                                align-items: center;
-
-                                .chip {
-                                    background: transparent;
-                                    border-radius: 0;
-                                    box-shadow: none;
-                                    height: auto;
-                                    line-height: unset;
-                                    padding: 0;
-                                    color: #747576;
-                                    max-width: 300px;
-                                }
-
-                                button {
-                                    &.count {
-                                        background: #1e5dd3;
-                                        border-radius: 2px;
-                                        border-radius: 20px;
-                                        color: #fff;
-                                        height: 16px;
-                                        padding: 0 6px;
-                                        border: none;
-                                        font-size: 9px;
-                                        line-height: 16px;
-                                        margin-left: 4px;
-                                        min-width: 20px;
-
-                                        &.user {
-                                            background: #34aa44;
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    }
-
-                    .vx-input-group {
-                        display : flex;
-                        position: relative;
-
-                        input {
-                            &::placeholder {
-                                color: #747576;
-                            }
-                        }
-
-                        span.counter {
-                            background   : transparent;
-                            color        : #161B2F;
-                            font-size    : 9px;
-                            font-weight  : 500;
-                            position     : absolute;
-                            top          : 0px;
-                            right        : 0px;
-                            border-radius: 3px;
-                            height       : 16px;
-                            text-align   : center;
-                            line-height  : 16px;
-                            padding      : 0 2px;
-                        }
-
-                        marx-editor, vcomply-editor {
-                            width: 100%;
-                            .editor-container {
-                                .editable-block {
-                                    &.bottom {
-                                        &:before {
-                                            opacity: 1;
-                                        }
-                                    }
-                                }
-                            }
-                        }
-
-                        &.vx-input-group {
-                            margin-top: 8px;
-                        }
-                    }
-                }
-
-                marx-editor,
-                vcomply-editor {
-                    display: block;
-
-                    .editor-container {
-                        border-radius: 4px;
-                        border-color : #DBDBDB;
-
-                        &:focus-within,
-                        &:hover {
-                            border-color: #1e5dd3;
-
-                            .editor-tools {
-                                border-top-color: #1e5dd3 !important;
-                                transition      : none;
-                            }
-                        }
-
-                        .editable-block {
-                            min-height : 60px;
-                            padding    : 11px 15px;
-                            line-height: 20px;
-                            font-size  : 13px;
-                            color      : #747576;
-                            font-weight: 400;
-                            transition : all 0.2s ease-in-out;
-                            width      : 100%;
-                            max-height : 90px;
-
-                            &:before {
-                                @media not all and (min-resolution: 0.001dpcm) {
-                                    @supports (-webkit-appearance: none) {
-                                        opacity: 0.72;
-                                    }
-                                }
-                            }
-                        }
-
-                        .editor-tools {
-                            border-color : #DBDBDB;
-                            border-radius: 0 0 2px 2px;
-                            transition   : none;
-
-                            app-editor-menu {
-                                .editor-menu {
-                                    .col {
-                                        button {
-                                            height : 22px !important;
-                                            width  : 22px !important;
-                                            padding: 0 5px;
-
-                                            svg {
-                                                height: 22px;
-                                                width : 12px;
-                                            }
-
-                                            &.submit {
-                                                width          : 80px !important;
-                                                line-height    : 22px;
-                                                justify-content: center;
-                                            }
-                                        }
-
-                                        .popover {
-                                            &.small {
-                                                ul.option-list {
-                                                    li {
-                                                        button {
-                                                            width : 100% !important;
-                                                            height: auto !important;
-                                                        }
-                                                    }
-                                                }
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-
-                .custom-input {
-                    height       : 2.5rem;
-                    border-radius: .25rem;
-                    border       : 1px solid #DBDBDB;
-                    background   : #FFFFFF;
-                    outline      : none;
-                    padding      : .1875rem .75rem;
-                    line-height  : 1.25rem;
-                    font-size    : 13px;
-                    color        : #747576;
-                    font-weight  : 400;
-                    transition   : all 0.2s ease-in-out;
-                    width        : 100%;
-                    cursor       : pointer;
-
-                    &:empty:not(:focus):before {
-                        content       : attr(aria-placeholder);
-                        line-height   : 16px;
-                        font-size     : 12px;
-                        width         : 94%;
-                        display       : block;
-                        pointer-events: none;
-                    }
-
-                    &.error {
-                        border: 1px solid #d93b41;
-                    }
-                }
-
-                label.vx-control-panel {
-                    i {
-                        font-size  : 12px;
-                        color      : #1E5DD3;
-                        margin-left: 7px;
-                        cursor     : pointer;
-                    }
-                }
-
-                .vx-control-panel-sub-label {
-                    color         : #747576;
-                    font-size     : .6875rem;
-                    font-weight   : 400;
-                    line-height   : 1rem;
-                    margin-bottom : .5rem;
-                    display       : block;
-                    text-transform: none;
-                    width         : 100%;
-                    margin-top    : 0;
-
-                    span.required {
-                        color: #EB2424;
-                    }
-                }
-
-                label.vx-control-panel+.vx-control-panel-sub-label {
-                    margin-top: -.5rem;
-                }
-
-                .radio-group {
-                    app-cs-radio {
-                        margin-top: 4px;
-                        display   : block;
-                        width     : 100%;
-
-                        label.radio-item {
-                            width   : 100%;
-                            position: relative;
-
-                            span {
-                                &.radio {
-                                    position: absolute;
-                                    top     : 17px;
-                                    left    : 12px;
-                                }
-
-                                &.value {
-                                    font-size      : 11px;
-                                    text-transform : uppercase;
-                                    border         : 1px solid #DBDBDB;
-                                    border-radius  : 4px;
-                                    padding        : 8px 8px 8px 36px;
-                                    width          : 100%;
-                                    display        : flex;
-                                    justify-content: space-between;
-                                    margin         : 0;
-                                    max-width      : 100%;
-                                    font-weight    : 500;
-                                    color          : #707070;
-
-                                    i {
-                                        font-size: 12px;
-                                        color    : #1E5DD3;
-                                    }
-                                }
-                            }
-
-                            svg {
-                                position: absolute;
-                                top     : 17px;
-                                left    : 12px;
-                            }
-
-                            input:checked~span.value {
-                                background  : #EEFCF0;
-                                border-color: #34AA44;
-                            }
-                        }
-
-                        &+app-cs-radio {
-                            margin-top: .5rem;
-                        }
-                    }
-                }
-
-                .date-select {
-                    position: relative;
-                    width   : calc(50% - .25rem);
-                    overflow: hidden;
-                    height: 40px;
-
-                    input {
-                        padding-left: 36px !important;
-                        padding: 8px 12px;
-                        line-height: 20px;
-                        font-size: 13px;
-                        color: #747576;
-                        font-weight: 400;
-                        width: 100%;
-                        cursor: pointer;
-
-                        &::placeholder {
-                            color: #747576;
-                        }
-                    }
-
-                    i {
-                        display        : flex;
-                        justify-content: center;
-                        align-items    : center;
-                        height         : 39px;
-                        width          : 14px;
-                        position       : absolute;
-                        left           : 12px;
-                        top            : 0;
-                        color          : #BCBCBC;
-                        font-size      : 14px;
-                        pointer-events : none;
-                        z-index        : 1;
-                    }
-
-                    &.disabled {
-                        pointer-events: none;
-                        filter        : grayscale(1);
-                        opacity       : 1;
-
-                        input {
-                            background: #f1f1f1;
-                        }
-                    }
-                }
-
-                label.vx-control-panel {
-                    span.sub-label {
-                        color         : #747576;
-                        font-size     : .6875rem;
-                        font-weight   : 400;
-                        line-height   : 1rem;
-                        text-transform: none;
-                        width         : 100%;
-                    }
-                }
-            }
-
-            &.disabled {
-                pointer-events: none;
-                filter        : grayscale(1);
-                opacity       : 0.3;
-            }
-
-            &.active {
-                pointer-events: none;
-                filter        : grayscale(0);
-                opacity       : 1;
-
-                .image {
-                    filter: grayscale(0);
-
-                    &:before {
-                        display: none;
-                    }
-                }
-
-                .form {
-                    opacity: 1;
-                    filter : grayscale(0);
-
-                    .custom-input,
-                    input[type=text] {
-                        border-color: #1e5dd3;
-                        box-shadow  : 0 0 5px #1e5dd345;
-                    }
-                }
-
-                .selectBoxEnable {
-                    border-color: #1e5dd3;
-                    box-shadow: 0 3px 6px #1e5dd31a;
-                    pointer-events: none;
-                }
-            }
-        }
-
-        &:after {
-            content       : "";
-            width         : 100%;
-            display       : block;
-            height        : 30px;
-            position      : sticky;
-            right         : 0;
-            bottom        : 0px;
-            left          : 0;
-            z-index       : 6;
-            background    : -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 22%, rgba(255, 255, 255, 1) 100%);
-            background    : -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 22%, rgba(255, 255, 255, 1) 100%);
-            background    : linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 22%, rgba(255, 255, 255, 1) 100%);
-            filter        : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
-            // margin-left: -40px;
-        }
-
-    }
-
-    .button-block {
-        position: relative;
-        z-index : 2;
-
-        button {
-            font-size: 13px !important;
-            letter-spacing: 1.3px !important;
-            height     : 50px;
-            line-height: 48px !important;
-
-            &:disabled {
-                background: #f1f1f1 !important;
-                border-color: #f1f1f1 !important;
-                color: #747576 !important;
-                opacity: 1 !important;
-                filter: unset !important;
-            }
-        }
-    }
-
-    &.disabled {
-        pointer-events: none;
-        z-index       : 2;
-
-        .image {
-            position: relative;
-            filter  : grayscale(1);
-
-            &::before {
-                content   : "";
-                position  : absolute;
-                top       : 0;
-                right     : 0;
-                bottom    : 0;
-                left      : 0;
-                background: #FFFFFF;
-                opacity   : 0.7;
-            }
-        }
-
-        .form {
-            opacity: 0.3;
-            filter : grayscale(1);
-        }
-    }
-}
-
-@keyframes strokeCheck {
-    100% {
-        stroke-dashoffset: 0;
-    }
-}
-
-@keyframes fillCheck {
-    100% {
-        box-shadow: inset 0px 0px 0px 2px #34aa44;
-    }
-}
-
-.action-list {
-    width: 220px;
-
-    ul {
-        padding          : 0;
-        margin           : 0;
-        -webkit-animation: scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
-        animation        : scale-up-center 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
-        background       : #ffffff;
-        box-shadow       : 0px 3px 6px #1c5bd140;
-        border-radius    : 4px;
-        max-height       : 220px;
-        overflow         : auto;
-
-        &.action-item {
-            display: block;
-
-            li {
-                list-style     : none;
-                border         : none;
-                border-bottom  : 1px solid #f1f1f1;
-                display        : block;
-                width          : 100%;
-                padding        : 0;
-                background     : transparent;
-                border-radius  : 0;
-                margin         : 0;
-                height         : auto;
-                justify-content: flex-start;
-                box-shadow     : none;
-
-                button {
-                    color          : #6e717e;
-                    text-align     : left;
-                    text-decoration: none;
-                    cursor         : pointer;
-                    background     : transparent;
-                    font-size      : 12px;
-                    text-transform : capitalize;
-                    display        : flex;
-                    width          : 100%;
-                    padding        : 7.5px 11px;
-                    border         : none;
-
-                    i {
-                        font-size   : 17px;
-                        margin-right: 10px;
-                        color       : #1c5bd1;
-                    }
-
-                    &:hover {
-                        background: #f3f3f3;
-                    }
-                }
-
-                .avatar-card {
-                    display    : flex;
-                    align-items: center;
-                    width      : 100%;
-                    padding    : 7.5px;
-
-                    &.within-con {
-                        display: block;
-                    }
-
-                    .avatar {
-                        height         : 24px;
-                        width          : 24px !important;
-                        overflow       : hidden;
-                        background     : #4681ef;
-                        color          : #ffffff;
-                        font-size      : 10px;
-                        display        : inline-flex;
-                        margin-right   : 5px;
-                        border-radius  : 50%;
-                        align-items    : center;
-                        justify-content: center;
-                        text-transform : uppercase;
-
-                        img {
-                            width: 100%;
-                        }
-
-                        &+span.value {
-                            width: calc(100% - 29px);
-                        }
-                    }
-
-                    span {
-                        &.value {
-                            width             : 100%;
-                            color             : #6e717e;
-                            text-decoration   : none;
-                            // cursor         : pointer;
-                            background        : transparent;
-                            font-size         : 12px;
-                            text-transform    : capitalize;
-                            display           : block;
-                            font-weight       : 400;
-                            text-align-last   : left;
-                            white-space       : nowrap;
-                            overflow          : hidden;
-                            text-overflow     : ellipsis;
-                            line-height       : 20px;
-
-                            i {
-                                font-size   : 8px;
-                                color       : #1c5bd1;
-                                cursor      : pointer;
-                                margin-right: 4px;
-
-                                &.cross-icon {
-                                    color: #747576;
-                                }
-                            }
-                        }
-                    }
-
-                    &.no-image {
-                        display: block;
-
-                        span.value {
-                            width  : 100%;
-                            display: block;
-                        }
-                    }
-                }
-
-                .chip-item {
-                    color      : #1e5dd3;
-                    padding    : 10px;
-                    display    : flex;
-                    align-items: center;
-
-                    i {
-                        margin-right: 7px;
-                        font-size   : 10px;
-                        cursor      : pointer;
-                        display     : inline-flex;
-                    }
-
-                    span {
-                        display      : block;
-                        width        : auto;
-                        max-width    : calc(100% - 17px);
-                        font-size    : 12px;
-                        font-weight  : 500;
-                        white-space  : nowrap;
-                        overflow     : hidden;
-                        text-overflow: ellipsis;
-
-                        &.chip-block {
-                            display: block;
-                            width  : 100%;
-                        }
-
-                        &.id {
-                            font-size: 9px;
-                        }
-                    }
-                }
-
-                .within {
-                    display        : flex;
-                    align-items    : center;
-                    justify-content: flex-start;
-
-                    .block {
-                        background    : #f1f1f1;
-                        border-radius : 2px;
-                        padding       : 0 2px;
-                        line-height   : 14px;
-                        font-size     : 9px;
-                        font-weight   : 500;
-                        color         : #042e7d;
-                        margin-right  : 6px;
-                        display       : block;
-                        text-transform: uppercase;
-                    }
-
-                    .data {
-                        width        : 100%;
-                        display      : block;
-                        overflow     : hidden;
-                        text-overflow: ellipsis;
-                        white-space  : nowrap;
-                        color        : #747576;
-                        font-size    : 11px;
-                        font-weight  : 400;
-                        line-height  : 17px;
-                    }
-                }
-
-                &:first-child {
-                    animation: action-list-open 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
-                }
-
-                &:nth-child(2) {
-                    animation: action-list-open 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
-                }
-
-                &:nth-child(3) {
-                    animation: action-list-open 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
-                }
-
-                &:nth-child(4) {
-                    animation: action-list-open 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
-                }
-
-                &:nth-child(5) {
-                    animation: action-list-open 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
-                }
-
-                &:nth-child(6) {
-                    animation: action-list-open 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
-                }
-
-                &:nth-child(7) {
-                    animation: action-list-open 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
-                }
-
-                &:nth-child(8) {
-                    animation: action-list-open 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
-                }
-
-                &:nth-child(9) {
-                    animation: action-list-open 1.05s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
-                }
-
-                &:nth-child(10) {
-                    animation: action-list-open 1.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
-                }
-            }
-        }
-    }
-}
-
-.global-confirmation-alert {
-    display   : block;
-    position  : absolute;
-    z-index   : 9;
-    right     : 0;
-    bottom    : 0;
-    left      : 0;
-    background: #d93b41;
-
-    &-top {
-        display        : flex;
-        align-items    : center;
-        justify-content: flex-start;
-        padding        : 20px 20px 12px;
-    }
-
-    span.icon-block {
-        height         : 36px;
-        width          : 36px;
-        border-radius  : 50%;
-        background     : #FFFFFF;
-        border         : 1px solid #DCDCDC;
-        display        : flex;
-        justify-content: center;
-        align-items    : center;
-        margin-right   : 16px;
-
-        i {
-            color    : #d93b41;
-            font-size: 12px;
-        }
-
-    }
-
-    p.text {
-        color      : #FFFFFF;
-        font-size  : 14px;
-        font-weight: 300;
-        margin     : 0;
-        width      : calc(100% - 52px);
-    }
-
-    &-bottom {
-        display        : flex;
-        align-items    : center;
-        // justify-content: space-between;
-        padding        : 0 12px 12px 72px;
-        background     : #d93b41;
-
-        .button-group {
-            display: flex;
-        }
-
-        p.message {
-            font-size  : 14px;
-            font-weight: 500;
-            margin     : 0;
-            line-height: 20px;
-            color      : #FFFFFF;
-        }
-    }
-
-    button {
-        height         : 24px;
-        width          : 64px;
-        border         : 1px solid #000;
-        border-radius  : 2px;
-        display        : flex;
-        align-items    : center;
-        justify-content: center;
-        line-height    : 22px;
-        cursor         : pointer;
-        font-size      : 11px;
-        text-transform : uppercase;
-        font-weight    : 500;
-        padding        : 0;
-
-        &+button {
-            margin-left: 4px;
-        }
-
-        &.fill {
-            background  : #ffffff;
-            color       : #1e5dd3;
-            border-color: #ffffff;
-        }
-
-        &.outline {
-            background  : transparent;
-            color       : #ffffff;
-            border-color: #ffffff;
-        }
-    }
-}
-
-// Editor
-::ng-deep marx-modal,
-::ng-deep vcomply-modal {
-    .popup-modal-background {
-        background-color: #161B2FCC !important;
-    }
-}
-
-// New CSS Start ----------------
-::ng-deep input.textField {
-    background: #fff;
-    border-radius: 0.25rem;
-    border: 1px solid #dbdbdb;
-    font-size: 13px;
-    color: #747576;
-    padding: 8px 12px;
-    position: relative;
-    height: 2.5rem;
-    width: 100%;
-    transition: all 0.2s ease-in-out;
-  
-    &::placeholder {
-      font-size: 13px;
-      color: #747576;
-    }
-  
-    &:hover,
-    &:focus {
-      outline: none;
-      border-color: #1e5dd3;
-      box-shadow: 0 3px 6px #1e5dd31a;
-    }
-}
-
-::ng-deep .selectBoxEnable {
-  background: #fff;
-  border-radius: 0.25rem;
-  border: 1px solid #dbdbdb;
-  cursor: pointer;
-  height: 2.5rem;
-  position: relative;
-  transition: all 0.2s ease-in-out;
-
-  &:after {
-    border-bottom-style: solid;
-    border-bottom-width: 1px;
-    border-right-style: solid;
-    border-right-width: 1px;
-    border-color: #747576;
-    content: "";
-    display: inline-block;
-    right: 12px;
-    position: absolute;
-    top: calc(50% - 4px);
-    width: 5px;
-    height: 5px;
-    transform: rotate(45deg);
-  }
-
-  &:hover,
-  &:focus {
-    border-color: #1e5dd3;
-    box-shadow: 0 3px 6px #1e5dd31a;
-  }
-
-  &.disabled {
-    background: #f1f1f1;
-    pointer-events: none;
-    opacity: 1;
-  }
-
-  &.error {
-      border-color: #EB2424;
-  }
-}
-
-::ng-deep .selectBoxSuccess {
-  background: #f8f8f8;
-  border-radius: 0.25rem;
-  border: 1px solid #f1f1f1;
-  min-height: 2.5rem;
-  position: relative;
-
-  .selectBoxText {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    width: 22rem;
-  }
-
-  button {
-    background: transparent;
-    border-radius: 0;
-    border: none;
-
-    &.deleteBtn {
-      color: #d93b41;
-    }
-  }
-
-  .level-left {
-    border-right: 1px solid #f1f1f1;
-    height: 2.375rem;
-    width: 5rem;
-
-    .level-name {
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-      width: 4.5rem;
-    }
-  }
-}
-
-::ng-deep .chipContainer {
-  background: #fff;
-  border-radius: 0.125rem;
-  box-shadow: 0 0 2px #1e5dd340;
-  height: 1.5rem;
-
-  .cross {
-    cursor: pointer;
-    min-width: 16px;
-    width: 16px;
-    height: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: transparent;
-    border-radius: 2px;
-    margin-left: -4px;
-
-    &:hover {
-      background: #f1f1f1;
-    }
-  }
-
-  .chipName {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    max-width: 6rem;
-
-    &.no-width {
-      max-width: unset;
-    }
-  }
-
-  button {
-    &.countBtn {
-      background: #1e5dd3;
-      border-radius: 1.25rem;
-      border: none;
-      min-width: 1.5rem;
-      height: 1rem;
-      margin: 0 0 0 0.5rem;
-      padding: 0 0.25rem;
-
-      &.greenBg {
-        background: #34aa44;
-      }
-    }
-  }
-}