vc-create-dashboard 3.0.83 → 3.0.84

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

@@ -0,0 +1,1579 @@
+@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 !important;
+
+          .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 0.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, 0.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 0.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: 0.25rem;
+          border: 1px solid #dbdbdb;
+          background: #ffffff;
+          outline: none;
+          padding: 0.1875rem 0.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: 0.6875rem;
+          font-weight: 400;
+          line-height: 1rem;
+          margin-bottom: 0.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: -0.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: 0.5rem;
+            }
+          }
+        }
+
+        .date-select {
+          position: relative;
+          width: calc(50% - 0.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: 0.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;
+      }
+    }
+  }
+}
+
+::ng-deep .cdk-overlay-pane {
+  top: 0 !important;
+  bottom: 0 !important;
+  right: 0 !important;
+  left: 0 !important;
+  align-items: center;
+  justify-content: center;
+
+  .dp-popup {
+    z-index: 999;
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+    width: 100vw;
+    height: 100vh;
+    background: transparent !important;
+    border: none !important;
+    box-shadow: unset !important;
+
+    dp-day-calendar {
+      width: 412px !important;
+      box-shadow: 0 0 20px #161b2f26;
+      background-color: #fff;
+      border-radius: 4px;
+      -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;
+    }
+
+    dp-day-calendar,
+    dp-month-calendar {
+      width: 100%;
+      pointer-events: auto;
+
+      button {
+        background: transparent;
+        border: none;
+        outline: none;
+
+        &.dp-current-location-btn,
+        &.dp-calendar-nav-left,
+        &.dp-calendar-nav-right {
+          width: 40px;
+          height: 40px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border-radius: 50%;
+          font-size: 14px;
+
+          &:hover {
+            background-color: #f3f3f3;
+          }
+        }
+
+        &.dp-current-location-btn {
+          display: none;
+
+          &:before {
+            content: "";
+            height: 10px;
+            width: 10px;
+            border-radius: 50%;
+            background: #000000;
+            display: inline-flex;
+          }
+        }
+      }
+
+      .dp-weekdays,
+      .dp-calendar-week {
+        display: flex;
+        justify-content: space-around;
+
+        .dp-calendar-weekday {
+          width: 52px;
+          border-left: none;
+          border-bottom-color: #fff;
+          color: #747576;
+          font-size: 11px;
+          font-weight: 600;
+          text-transform: uppercase;
+        }
+
+        button {
+          width: 40px;
+          height: 40px;
+          border-radius: 50%;
+          display: inline-flex;
+          justify-content: center;
+          align-items: center;
+
+          &:hover {
+            background-color: #f3f3f3;
+          }
+
+          &.dp-selected {
+            background: #1e5dd3;
+          }
+
+          &.dp-current-day {
+            border: 1px solid rgba(0, 0, 0, 0.38);
+            color: #1e5dd3;
+            background-color: #ffffff;
+          }
+        }
+      }
+
+      .dp-day-calendar-container {
+        padding: 20px;
+        border-radius: 2px;
+      }
+
+      .dp-calendar-nav-container {
+        display: flex;
+        margin: 0 0 20px;
+        border: none;
+
+        .dp-nav-header {
+          button {
+            color: #000;
+            font-size: 17px;
+            font-weight: 500;
+            margin: 0 0 0 12px;
+            padding: 0;
+          }
+        }
+      }
+
+      .dp-nav-btns-container {
+        width: 80px;
+        display: flex;
+
+        .dp-calendar-nav-container-left,
+        .dp-calendar-nav-container-right {
+          button {
+            margin: 0 !important;
+          }
+        }
+      }
+
+      .dp-calendar-wrapper {
+        border: none;
+      }
+    }
+  }
+}
+
+
+// New Program List
+.left-side {
+  color: #707070;
+}
+
+.right-side {
+  button {
+    border-radius: 2px;
+    height: 24px;
+    background: #1e5dd3 !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    color: #ffffff !important;
+    text-transform: uppercase;
+    font-size: 11px;
+    font-weight: 500;
+    border: none !important;
+    padding: 0 8px;
+    margin: 0 0 0 8px;
+
+   
+
+    i {
+      margin-left: 8px;
+      font-size: 11px;
+    }
+
+    &:disabled {
+      background: #f1f1f1 !important;
+      color: #747576 !important;
+      opacity: 1;
+    }
+
+    &.cancelBtn {
+      background: transparent !important;
+      color: #eb2424 !important;
+    }
+  }
+}
+
+.selected-count-box {
+  background: #1e5dd3;
+  border-radius: 1.25rem;
+  border: none;
+  min-width: 1.5rem;
+  height: 1rem;
+  margin: 0 0 0 0.5rem;
+  padding: 0 0.25rem;
+  position: relative;
+}
+
+.selected-text {
+  color: #707070;
+  font-size: 11px;
+  font-weight: 500;
+  position: fixed;
+  padding-left: 2.5rem;
+}
+
+::ng-deep .vc-divider {
+  border-top: 0.5px solid #dbdbdb;
+  width: 100%;
+}
+
+
+::ng-deep .vc-cf-container {
+  border-bottom: 1px solid #E3E3E9;
+
+  &:first-of-type,
+  &:only-child {
+    border-top: 1px solid #E3E3E9;
+  }
+
+  .cf-name {
+    width: 9.25rem;
+  }
+  
+  .cf-value {
+    width: calc(100% - 9.75rem);
+
+    input {
+      height: 24px !important;
+      border: 1px solid #CDCED6 !important;
+      padding: 0 .5rem !important;
+      color: #565A6F !important;
+      font-size: 11px !important;
+
+      &::placeholder {
+        color: #A9AAB6 !important;
+      }
+
+      &:hover {
+        border-color: #343952 !important;
+      }
+
+      &:focus {
+        outline: none;
+        border-color: #1E5DD3;
+        box-shadow: 0 0 5px #1E5DD31A;
+      }
+    }
+  }
+}
+
+.head-label {
+  background: #565a6f;
+  border-radius: 0.125rem;
+  height: 1rem;
+  position: relative;
+
+  &::before {
+    background: #e3e3e9;
+    content: "";
+    position: absolute;
+    top: 7px;
+    left: -40px;
+    width: 500px;
+    height: 1px;
+    z-index: -1;
+  }
+}
+