vc-create-dashboard 2.9.5 → 2.9.7

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

@@ -0,0 +1,1277 @@
+@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;
+      }
+    }
+  }
+}