@appscode/design-system 1.1.0-alpha.8 → 1.1.0-beta.10

package/components/_ac-multi-select.scss

@@ -1,751 +1,780 @@
-.multiselect {
-  // margin-top: 3px;
-  &.cluster-select {
-    .multiselect__tags {
-      border: 1px solid $ac-gray-lightest;
-      background-color: $table-header;
-
-      .multiselect__input {
-        background-color: $table-header;
-      }
-    }
-  }
-
-  .multiselect__tags {
-    background-color: $ac-white;
-    min-height: 45px;
-    font-weight: 500;
-    width: 100%;
-    border-radius: 4px;
-    border: 1px solid $ac-label-text;
-    padding: 6px 30px 8px 20px;
-    font-size: $font-size-small;
-
-    .multiselect__placeholder {
-      margin: 0;
-      padding: 0;
-      padding-top: 2px !important;
-      font-weight: 400;
-      font-size: $font-size-small;
-    }
-
-    .multiselect__tags-wrap {
-      display: flex;
-      align-items: center;
-    }
-
-    .multiselect__tag {
-      background-color: $dark-bg-light;
-      margin-top: 4px;
-      margin-bottom: 0;
-
-      .multiselect__tag-icon {
-        font-size: 12px;
-
-        &::after {
-          color: $ac-white;
-        }
-
-        &:hover {
-          background-color: hsla(
-            var(--hsl-hue),
-            var(--hsl-saturation),
-            calc(var(--hsl-lightness) - 9%),
-            1
-          );
-        }
-      }
-    }
-
-    .multiselect__input,
-    .multiselect__single {
-      background-color: $ac-white;
-      margin-bottom: 0;
-      margin: 0 !important;
-      padding-left: 0;
-      left: 0px;
-      top: 2px;
-      font-size: $font-size-small !important;
-      font-weight: 500;
-      color: $ac-color-text;
-      line-height: 1.5;
-    }
-
-    .multiselect__single {
-      margin-top: 3px;
-      margin-bottom: 0;
-    }
-  }
-
-  .multiselect__content {
-    .multiselect__element {
-      .multiselect__option {
-        padding: 10px 15px;
-        min-height: 32px;
-        font-size: $font-size-small;
-        p {
-          font-size: 13px;
-          color: $ac-color-text;
-        }
-        a {
-          display: block;
-          font-weight: 400;
-          margin-top: -12px;
-          margin-bottom: -12px;
-          padding-top: 12px;
-          padding-bottom: 12px;
-        }
-
-        &:hover {
-          background-color: hsla(
-            var(--hsl-hue),
-            var(--hsl-saturation),
-            var(--hsl-lightness),
-            0.2
-          );
-          color: $ac-primary;
-        }
-
-        &.multiselect__option--highlight {
-          background-color: hsla(
-            var(--hsl-hue),
-            var(--hsl-saturation),
-            var(--hsl-lightness),
-            0.2
-          );
-          color: $ac-primary;
-
-          &:after {
-            background-color: hsla(
-              var(--hsl-hue),
-              var(--hsl-saturation),
-              var(--hsl-lightness),
-              0.2
-            );
-            color: $ac-primary;
-          }
-        }
-      }
-    }
-  }
-}
-
-.multi-select-wrapper {
-  &.is-last-child-bold {
-    .multiselect {
-      .multiselect__content {
-        .multiselect__element {
-          &:nth-last-child(-n + 3) {
-            .multiselect__option {
-              font-weight: 500;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.multiselect__element {
-  span {
-    label {
-      padding-left: 15px !important;
-      font-size: $font-size-small !important;
-      color: $ac-color-text !important;
-
-      &:after {
-        position: inherit !important;
-        content: "" !important;
-        background-color: transparent;
-      }
-    }
-  }
-}
-
-.multiselect__input {
-  &::placeholder {
-    color: $ac-color-value;
-    font-weight: 400;
-    line-height: 1.6;
-    font-size: $font-size-small;
-  }
-}
-
-.multiselect__tags > span {
-  font-size: $font-size-small;
-  line-height: 1.6;
-  color: $ac-color-text;
-}
-
-.multi-select-wrapper {
-  position: relative;
-  z-index: 0;
-
-  .multiselect--disabled {
-    opacity: unset;
-  }
-
-  &.is-disable {
-    opacity: 0.5;
-    cursor: not-allowed;
-
-    input,
-    .button.is-information,
-    .eye i.fa {
-      cursor: not-allowed;
-    }
-  }
-
-  .multiselect__input {
-    border: none !important;
-  }
-
-  &.has-bg-color {
-    label.show-label {
-      &:after {
-        background-color: $ac-bg;
-      }
-    }
-  }
-
-  &.is-small {
-    label {
-      font-size: $font-size-small;
-      top: 8px;
-
-      &.show-label {
-        font-size: $font-size-extra-small;
-        top: -9px;
-        font-weight: 500;
-        color: $ac-black;
-      }
-    }
-
-    .button.is-information {
-      width: 36px;
-      height: 36px;
-    }
-
-    .multiselect__select {
-      height: 100%;
-    }
-
-    .multiselect__tags {
-      .multiselect__tag {
-        padding: 5px 20px 4px 10px;
-        font-size: $font-size-extra-small;
-      }
-    }
-
-    .multiselect {
-      min-height: auto;
-    }
-
-    .multiselect--active {
-      height: 36px !important;
-      z-index: 50;
-    }
-
-    .multiselect .multiselect__tags {
-      min-height: 36px !important;
-      padding: 4px 30px 4px 20px;
-      font-size: $font-size-small;
-
-      .multiselect__single {
-        font-size: 12px;
-      }
-
-      .multiselect__placeholder {
-        padding: 5px 0 0;
-        font-size: $font-size-small;
-        font-weight: 500;
-      }
-    }
-
-    .multiselect__input,
-    .multiselect__single {
-      font-size: $font-size-small !important;
-      font-weight: 500;
-      line-height: 1.5;
-      padding-bottom: 4px;
-
-      &::placeholder {
-        font-weight: 500;
-        line-height: 1.6;
-        font-size: $font-size-small;
-      }
-    }
-  }
-
-  &.is-extra-small {
-    label {
-      font-size: $font-size-small;
-      top: 8px;
-
-      &.show-label {
-        font-size: $font-size-extra-small;
-        top: -9px;
-      }
-    }
-
-    .button.is-information {
-      width: 32px;
-      height: 32px;
-    }
-
-    .multiselect__select {
-      height: 100%;
-    }
-
-    .multiselect__tags {
-      .multiselect__tag {
-        padding: 5px 20px 4px 10px;
-        font-size: $font-size-extra-small;
-      }
-    }
-
-    .multiselect {
-      min-height: auto;
-    }
-
-    .multiselect--active {
-      height: 32px !important;
-      z-index: 50;
-    }
-
-    .multiselect .multiselect__tags {
-      min-height: 32px !important;
-      padding: 3px 30px 4px 20px;
-      font-size: $font-size-small;
-      display: flex;
-      align-items: center;
-      .multiselect__single {
-        font-size: 12px;
-      }
-
-      .multiselect__placeholder {
-        padding: 5px 0 0;
-        font-size: $font-size-small;
-        font-weight: 500;
-      }
-    }
-
-    .multiselect__input,
-    .multiselect__single {
-      font-size: $font-size-small !important;
-      font-weight: 500;
-      line-height: 1.5;
-      padding-bottom: 4px;
-
-      &::placeholder {
-        font-weight: 500;
-        line-height: 1.6;
-        font-size: $font-size-small;
-      }
-    }
-  }
-
-  &.is-danger {
-    input,
-    .ac-card,
-    textarea {
-      border: 1px solid $ac-danger;
-    }
-
-    p {
-      color: $ac-danger;
-    }
-  }
-
-  &.is-loading {
-    input,
-    .ac-card,
-    textarea {
-      border: 1px solid $ac-info;
-      opacity: 0.5;
-    }
-
-    p {
-      color: $ac-info;
-      opacity: 0.5;
-    }
-  }
-
-  .is-error {
-    font-size: 12px;
-    line-height: 22px;
-    color: $ac-red;
-    text-align: left;
-
-    i.fa {
-      padding-right: 10px;
-    }
-  }
-
-  .multiselect__select {
-    height: calc(100% - 2px);
-    border-radius: 0 4px 4px 0;
-    background-color: transparent !important;
-  }
-
-  label {
-    font-size: 16px;
-    left: 20px;
-    top: 11px;
-    cursor: text;
-    color: $ac-label-text;
-    position: absolute;
-    z-index: 99;
-    transition: 0.3s ease-in-out;
-
-    .is-required {
-      img {
-        position: absolute;
-        top: 7px;
-        padding-left: 3px;
-      }
-    }
-
-    &.show-label {
-      top: -10px;
-      left: 15px;
-      padding: 0 5px;
-      font-size: $font-size-small;
-      color: $ac-black;
-
-      &::after {
-        background-color: $ac-white;
-      }
-    }
-
-    &:after {
-      position: absolute;
-      content: "";
-      left: 0;
-      top: 50%;
-      background-color: $ac-white;
-      width: 100%;
-      height: 2px;
-      margin-top: -1px;
-      z-index: -1;
-    }
-
-    &.is-required {
-      &:after {
-        width: calc(100% + 10px);
-      }
-    }
-  }
-}
-li {
-  .multiselect__option {
-    font-size: 13px;
-    color: $ac-color-text;
-  }
-}
-.multiselect__option--selected {
-  label {
-    right: 30px;
-  }
-}
-.multi-select-wrapper.is-small {
-  .multiselect .multiselect__tags {
-    .multiselect__input,
-    .multiselect__single {
-      top: 3.5px !important;
-    }
-  }
-  .multiselect .multiselect__tags .multiselect__placeholder {
-    padding-top: 3.5px !important;
-  }
-}
-// has info button start
-.multi-select-wrapper {
-  &.has-info-button {
-    .multiselect__select {
-      z-index: 99;
-      right: 30px;
-    }
-    &.has-refresh-button {
-      .multiselect__select {
-        z-index: 99;
-        right: 60px;
-      }
-      .button {
-        &.is-refresh {
-          right: 30px;
-        }
-      }
-    }
-    .button {
-      &.is-information {
-        right: 0;
-      }
-    }
-  }
-  &.has-refresh-button {
-    .multiselect__select {
-      z-index: 99;
-      right: 30px;
-    }
-    .button {
-      &.is-refresh {
-        right: 0;
-      }
-    }
-  }
-
-  .button {
-    &.is-information,
-    &.is-refresh {
-      background-color: transparent;
-      border: none;
-      position: absolute;
-      height: 36px;
-      width: 36px;
-      z-index: 90;
-      margin-top: 0;
-
-      &:focus {
-        outline: none;
-        box-shadow: none;
-        background-color: #e4e8ef;
-        transform: scale(0.8);
-      }
-    }
-    &.is-refresh.spin {
-      i {
-        animation: spin 1s linear infinite;
-      }
-    }
-  }
-}
-
-@-moz-keyframes spin {
-  from {
-    -moz-transform: rotate(0deg);
-  }
-  to {
-    -moz-transform: rotate(360deg);
-  }
-}
-@-webkit-keyframes spin {
-  from {
-    -webkit-transform: rotate(0deg);
-  }
-  to {
-    -webkit-transform: rotate(360deg);
-  }
-}
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-// has info button end
-
-// dark theme start
-.is-dark-theme {
-  .multiselect__content-wrapper {
-    background: var(--dark-bg-light);
-    border: 1px solid $ac-white-light;
-
-    // scroll
-    &::-webkit-scrollbar {
-      border-radius: 50px;
-      width: 3px;
-    }
-
-    &::-moz-scrollbar {
-      border-radius: 50px;
-      width: 3px;
-    }
-
-    &::-ms-scrollbar {
-      border-radius: 50px;
-      width: 3px;
-    }
-
-    &::-webkit-scrollbar:hover {
-      width: 7px;
-    }
-
-    &::-moz-scrollbar:hover {
-      width: 7px;
-    }
-
-    &::-ms-scrollbar:hover {
-      width: 7px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: $dark-bg-light;
-      border-radius: 50px;
-      height: 2px !important;
-    }
-
-    &::-moz-scrollbar-thumb {
-      background-color: $dark-bg-light;
-      border-radius: 50px;
-      height: 2px !important;
-    }
-
-    &::-ms-scrollbar-thumb {
-      background-color: $dark-bg-light;
-      border-radius: 50px;
-      height: 2px !important;
-    }
-
-    &::-webkit-scrollbar-thumb:hover {
-      background-color: $dark-bg-light;
-    }
-
-    &::-moz-scrollbar-thumb:hover {
-      background-color: $dark-bg-light;
-    }
-
-    &::-ms-scrollbar-thumb:hover {
-      background-color: $dark-bg-light;
-    }
-
-    &:hover::-webkit-scrollbar-corner {
-      height: 40px;
-    }
-
-    &:hover::-moz-scrollbar-corner {
-      height: 40px;
-    }
-
-    &:hover::-ms-scrollbar-corner {
-      height: 40px;
-    }
-
-    // scroll
-
-    .multiselect__option--selected {
-      background: var(--dark-bg);
-      color: var(--ac-white-text);
-    }
-  }
-
-  .multi-select-wrapper {
-    background: var(--dark-bg-light);
-
-    .multiselect__content-wrapper {
-      background-color: var(--dark-bg-light);
-      background: var(--dark-bg-light);
-
-      // scroll
-      &::-webkit-scrollbar {
-        border-radius: 50px;
-        width: 3px;
-      }
-
-      &::-moz-scrollbar {
-        border-radius: 50px;
-        width: 3px;
-      }
-
-      &::-ms-scrollbar {
-        border-radius: 50px;
-        width: 3px;
-      }
-
-      &::-webkit-scrollbar:hover {
-        width: 7px;
-      }
-
-      &::-moz-scrollbar:hover {
-        width: 7px;
-      }
-
-      &::-ms-scrollbar:hover {
-        width: 7px;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background-color: $dark-bg-light;
-        border-radius: 50px;
-        height: 2px !important;
-      }
-
-      &::-moz-scrollbar-thumb {
-        background-color: $dark-bg-light;
-        border-radius: 50px;
-        height: 2px !important;
-      }
-
-      &::-ms-scrollbar-thumb {
-        background-color: $dark-bg-light;
-        border-radius: 50px;
-        height: 2px !important;
-      }
-
-      &::-webkit-scrollbar-thumb:hover {
-        background-color: $dark-bg-light;
-      }
-
-      &::-moz-scrollbar-thumb:hover {
-        background-color: $dark-bg-light;
-      }
-
-      &::-ms-scrollbar-thumb:hover {
-        background-color: $dark-bg-light;
-      }
-
-      &:hover::-webkit-scrollbar-corner {
-        height: 40px;
-      }
-
-      &:hover::-moz-scrollbar-corner {
-        height: 40px;
-      }
-
-      &:hover::-ms-scrollbar-corner {
-        height: 40px;
-      }
-
-      // scroll
-
-      .multiselect__content .multiselect__element .multiselect__option {
-        color: var(--ac-white-text);
-      }
-
-      .multiselect__option--group {
-        color: var(--ac-white-text);
-        background-color: var(--dark-bg-light);
-      }
-
-      .multiselect__option--selected {
-        color: var(--ac-white-text);
-        background-color: var(--dark-bg-light);
-      }
-    }
-  }
-}
-// dark theme end
-/****************************************
-Responsive Classes
-*****************************************/
-// Extra small devices (portrait phones, less than 576px)
-@media (max-width: 575.98px) {
-}
-
-// Small devices (landscape phones, 576px and up)
-@media (min-width: 576px) and (max-width: 767.98px) {
-}
-
-// Medium devices (tablets, 768px and up)
-@media (min-width: 768px) and (max-width: 991.98px) {
-}
-
-// Large devices (desktops, 992px and up)
-@media (min-width: 992px) and (max-width: 1199.98px) {
-}
-
-// Extra large devices (large desktops, 1200px and up)
-@media (min-width: 1200px) {
-}
+// .multiselect {
+//   margin-top: 3px;
+//   // display: flex;
+//   // align-items: center;
+//   max-width: 350px;
+//   // &.cluster-select {
+//   //   .multiselect__tags {
+//   //     border: 1px solid $primary-90;
+//   //     background-color: $table-header;
+
+//   //     .multiselect__input {
+//   //       background-color: $table-header;
+//   //     }
+//   //   }
+//   // }
+
+//   .multiselect__tags {
+//     background-color: #e2f0fb;
+//     min-height: 36px;
+//     // max-height: 36px;
+//     font-weight: 500;
+//     width: 100%;
+//     border-radius: 4px;
+//     border: 1px solid $primary-90;
+//     padding: 6px 30px 8px 20px;
+//     font-size: 13px;
+//     border-radius: 20px;
+
+//     .multiselect__placeholder {
+//       margin: 0;
+//       padding: 0;
+//       // padding-top: 2px !important;
+//       font-weight: 500;
+//       font-size: 13px;
+//     }
+
+//     .multiselect__tags-wrap {
+//       display: flex;
+//       align-items: center;
+//     }
+
+//     .multiselect__tag {
+//       background-color: $dark-bg-light;
+//       margin-top: 4px;
+//       margin-bottom: 0;
+
+//       .multiselect__tag-icon {
+//         font-size: 12px;
+
+//         &::after {
+//           color: $white-100;
+//         }
+
+//         &:hover {
+//           background-color: hsla(var(--hsl-hue),
+//               var(--hsl-saturation),
+//               calc(var(--hsl-lightness) - 9%),
+//               1);
+//         }
+//       }
+//     }
+
+//     .multiselect__input,
+//     .multiselect__single {
+//       background-color: #e2f0fb;
+//       margin-bottom: 0;
+//       margin: 0 !important;
+//       padding-left: 0;
+//       left: 0px;
+//       // top: 2px;
+//       font-size: 13px !important;
+//       font-weight: 500;
+//       color: $primary-10;
+//       line-height: 1.5;
+//     }
+
+//     .multiselect__single {
+//       margin-top: 3px;
+//       margin-bottom: 0;
+//     }
+//   }
+
+//   .multiselect__select {
+//     height: 36px;
+//   }
+
+//   .multiselect__content {
+//     .multiselect__element {
+//       .multiselect__option {
+//         padding: 4px 16px;
+//         min-height: 32px;
+//         font-size: 13px;
+
+//         img {
+//           width: 30px;
+//         }
+
+//         p {
+//           font-size: 13px;
+//           color: $primary-10;
+//         }
+
+//         p:not(.location) {
+//           font-weight: 500;
+//         }
+
+//         a {
+//           display: block;
+//           font-weight: 400;
+//           margin-top: -12px;
+//           margin-bottom: -12px;
+//           padding-top: 12px;
+//           padding-bottom: 12px;
+//         }
+
+//         &:hover {
+//           background-color: hsla(var(--hsl-hue),
+//               var(--hsl-saturation),
+//               var(--hsl-lightness),
+//               0.2);
+//           color: $primary;
+//         }
+
+//         &.multiselect__option--highlight {
+//           background-color: hsla(var(--hsl-hue),
+//               var(--hsl-saturation),
+//               var(--hsl-lightness),
+//               0.2);
+//           color: $primary;
+
+//           &:after {
+//             background-color: hsla(var(--hsl-hue),
+//                 var(--hsl-saturation),
+//                 var(--hsl-lightness),
+//                 0.2);
+//             color: $primary;
+//           }
+//         }
+//       }
+//     }
+//   }
+// }
+
+// .multi-select-wrapper {
+//   &.is-last-child-bold {
+//     .multiselect {
+//       .multiselect__content {
+//         .multiselect__element {
+//           &:nth-last-child(-n + 3) {
+//             .multiselect__option {
+//               font-weight: 500;
+//             }
+//           }
+//         }
+//       }
+//     }
+//   }
+// }
+
+// .multiselect__element {
+//   span {
+//     label {
+//       padding-left: 15px !important;
+//       font-size: 13px !important;
+//       color: $primary-10 !important;
+
+//       &:after {
+//         position: inherit !important;
+//         content: "" !important;
+//         background-color: transparent;
+//       }
+//     }
+//   }
+// }
+
+// .multiselect__input {
+//   &::placeholder {
+//     color: $primary-20;
+//     font-weight: 400;
+//     line-height: 1.6;
+//     font-size: 13px;
+//   }
+// }
+
+// .multiselect__tags>span {
+//   font-size: 13px;
+//   line-height: 1.6;
+//   color: $primary-10;
+// }
+
+// .multi-select-wrapper {
+//   position: relative;
+//   z-index: 0;
+
+//   .multiselect--disabled {
+//     opacity: unset;
+//   }
+
+//   &.is-disable {
+//     opacity: 0.5;
+//     cursor: not-allowed;
+
+//     input,
+//     .button.is-information,
+//     .eye i.fa {
+//       cursor: not-allowed;
+//     }
+//   }
+
+//   .multiselect__input {
+//     border: none !important;
+//   }
+
+//   &.has-bg-color {
+//     label.show-label {
+//       &:after {
+//         background-color: $ac-bg;
+//       }
+//     }
+//   }
+
+//   &.is-small {
+//     label {
+//       font-size: 13px;
+//       top: 8px;
+
+//       &.show-label {
+//         font-size: 12px;
+//         top: -9px;
+//         font-weight: 500;
+//         color: $ac-black;
+//       }
+//     }
+
+//     .button.is-information {
+//       width: 36px;
+//       height: 36px;
+//     }
+
+//     .multiselect__select {
+//       height: 100%;
+//     }
+
+//     .multiselect__tags {
+//       .multiselect__tag {
+//         padding: 5px 20px 4px 10px;
+//         font-size: 12px;
+//       }
+//     }
+
+//     .multiselect {
+//       min-height: auto;
+//     }
+
+//     .multiselect--active {
+//       height: 36px !important;
+//       z-index: 50;
+//     }
+
+//     .multiselect .multiselect__tags {
+//       min-height: 36px !important;
+//       padding: 4px 30px 4px 20px;
+//       font-size: 13px;
+
+//       .multiselect__single {
+//         font-size: 12px;
+//       }
+
+//       .multiselect__placeholder {
+//         padding: 5px 0 0;
+//         font-size: 13px;
+//         font-weight: 500;
+//       }
+//     }
+
+//     .multiselect__input,
+//     .multiselect__single {
+//       font-size: 13px !important;
+//       font-weight: 500;
+//       line-height: 1.5;
+//       padding-bottom: 4px;
+
+//       &::placeholder {
+//         font-weight: 500;
+//         line-height: 1.6;
+//         font-size: 13px;
+//       }
+//     }
+//   }
+
+//   &.is-extra-small {
+//     label {
+//       font-size: 13px;
+//       top: 8px;
+
+//       &.show-label {
+//         font-size: 12px;
+//         top: -9px;
+//       }
+//     }
+
+//     .button.is-information {
+//       width: 32px;
+//       height: 32px;
+//     }
+
+//     .multiselect__select {
+//       height: 100%;
+//     }
+
+//     .multiselect__tags {
+//       .multiselect__tag {
+//         padding: 5px 20px 4px 10px;
+//         font-size: 12px;
+//       }
+//     }
+
+//     .multiselect {
+//       min-height: auto;
+//     }
+
+//     .multiselect--active {
+//       height: 32px !important;
+//       z-index: 50;
+//     }
+
+//     .multiselect .multiselect__tags {
+//       min-height: 32px !important;
+//       padding: 3px 30px 4px 20px;
+//       font-size: 13px;
+//       display: flex;
+//       align-items: center;
+
+//       .multiselect__single {
+//         font-size: 12px;
+//       }
+
+//       .multiselect__placeholder {
+//         padding: 5px 0 0;
+//         font-size: 13px;
+//         font-weight: 500;
+//       }
+//     }
+
+//     .multiselect__input,
+//     .multiselect__single {
+//       font-size: 13px !important;
+//       font-weight: 500;
+//       line-height: 1.5;
+//       padding-bottom: 4px;
+
+//       &::placeholder {
+//         font-weight: 500;
+//         line-height: 1.6;
+//         font-size: 13px;
+//       }
+//     }
+//   }
+
+//   &.is-danger {
+
+//     input,
+//     .ac-card,
+//     textarea {
+//       border: 1px solid $danger;
+//     }
+
+//     p {
+//       color: $danger;
+//     }
+//   }
+
+//   &.is-loading {
+
+//     input,
+//     .ac-card,
+//     textarea {
+//       border: 1px solid $info;
+//       opacity: 0.5;
+//     }
+
+//     p {
+//       color: $info;
+//       opacity: 0.5;
+//     }
+//   }
+
+//   .is-danger {
+//     font-size: 12px;
+//     line-height: 22px;
+//     color: $danger;
+//     text-align: left;
+
+//     i.fa {
+//       padding-right: 10px;
+//     }
+//   }
+
+//   .multiselect__select {
+//     height: calc(100% - 2px);
+//     border-radius: 0 4px 4px 0;
+//     background-color: transparent !important;
+//   }
+
+//   label {
+//     font-size: 16px;
+//     left: 20px;
+//     top: 11px;
+//     cursor: text;
+//     color: $ac-label-text;
+//     position: absolute;
+//     z-index: 99;
+//     transition: 0.3s ease-in-out;
+
+//     .is-required {
+//       img {
+//         position: absolute;
+//         top: 7px;
+//         padding-left: 3px;
+//       }
+//     }
+
+//     &.show-label {
+//       top: -10px;
+//       left: 15px;
+//       padding: 0 5px;
+//       font-size: 13px;
+//       color: $ac-black;
+
+//       &::after {
+//         background-color: $white-100;
+//       }
+//     }
+
+//     &:after {
+//       position: absolute;
+//       content: "";
+//       left: 0;
+//       top: 50%;
+//       background-color: $white-100;
+//       width: 100%;
+//       height: 2px;
+//       margin-top: -1px;
+//       z-index: -1;
+//     }
+
+//     &.is-required {
+//       &:after {
+//         width: calc(100% + 10px);
+//       }
+//     }
+//   }
+// }
+
+// li {
+//   .multiselect__option {
+//     font-size: 13px;
+//     color: $primary-10;
+//   }
+// }
+
+// .multiselect__option--selected {
+//   label {
+//     right: 30px;
+//   }
+// }
+
+// .multi-select-wrapper.is-small {
+//   .multiselect .multiselect__tags {
+
+//     .multiselect__input,
+//     .multiselect__single {
+//       top: 3.5px !important;
+//     }
+//   }
+
+//   .multiselect .multiselect__tags .multiselect__placeholder {
+//     padding-top: 3.5px !important;
+//   }
+// }
+
+// // has info button start
+// .multi-select-wrapper {
+//   &.has-info-button {
+//     .multiselect__select {
+//       z-index: 99;
+//       right: 30px;
+//     }
+
+//     &.has-refresh-button {
+//       .multiselect__select {
+//         z-index: 99;
+//         right: 60px;
+//       }
+
+//       .button {
+//         &.is-refresh {
+//           right: 30px;
+//         }
+//       }
+//     }
+
+//     .button {
+//       &.is-information {
+//         right: 0;
+//       }
+//     }
+//   }
+
+//   &.has-refresh-button {
+//     .multiselect__select {
+//       z-index: 99;
+//       right: 30px;
+//     }
+
+//     .button {
+//       &.is-refresh {
+//         right: 0;
+//       }
+//     }
+//   }
+
+//   .button {
+
+//     &.is-information,
+//     &.is-refresh {
+//       background-color: transparent;
+//       border: none;
+//       position: absolute;
+//       height: 36px;
+//       width: 36px;
+//       z-index: 90;
+//       margin-top: 0;
+
+//       &:focus {
+//         outline: none;
+//         box-shadow: none;
+//         background-color: #e4e8ef;
+//         transform: scale(0.8);
+//       }
+//     }
+
+//     &.is-refresh.spin {
+//       i {
+//         animation: spin 1s linear infinite;
+//       }
+//     }
+//   }
+// }
+
+// @-moz-keyframes spin {
+//   from {
+//     -moz-transform: rotate(0deg);
+//   }
+
+//   to {
+//     -moz-transform: rotate(360deg);
+//   }
+// }
+
+// @-webkit-keyframes spin {
+//   from {
+//     -webkit-transform: rotate(0deg);
+//   }
+
+//   to {
+//     -webkit-transform: rotate(360deg);
+//   }
+// }
+
+// @keyframes spin {
+//   from {
+//     transform: rotate(0deg);
+//   }
+
+//   to {
+//     transform: rotate(360deg);
+//   }
+// }
+
+// // has info button end
+
+// // dark theme start
+// .is-dark-theme {
+//   .multiselect__content-wrapper {
+//     background: var(--dark-bg-light);
+//     border: 1px solid $primary-90;
+
+//     // scroll
+//     &::-webkit-scrollbar {
+//       border-radius: 50px;
+//       width: 3px;
+//     }
+
+//     &::-moz-scrollbar {
+//       border-radius: 50px;
+//       width: 3px;
+//     }
+
+//     &::-ms-scrollbar {
+//       border-radius: 50px;
+//       width: 3px;
+//     }
+
+//     &::-webkit-scrollbar:hover {
+//       width: 7px;
+//     }
+
+//     &::-moz-scrollbar:hover {
+//       width: 7px;
+//     }
+
+//     &::-ms-scrollbar:hover {
+//       width: 7px;
+//     }
+
+//     &::-webkit-scrollbar-thumb {
+//       background-color: $dark-bg-light;
+//       border-radius: 50px;
+//       height: 2px !important;
+//     }
+
+//     &::-moz-scrollbar-thumb {
+//       background-color: $dark-bg-light;
+//       border-radius: 50px;
+//       height: 2px !important;
+//     }
+
+//     &::-ms-scrollbar-thumb {
+//       background-color: $dark-bg-light;
+//       border-radius: 50px;
+//       height: 2px !important;
+//     }
+
+//     &::-webkit-scrollbar-thumb:hover {
+//       background-color: $dark-bg-light;
+//     }
+
+//     &::-moz-scrollbar-thumb:hover {
+//       background-color: $dark-bg-light;
+//     }
+
+//     &::-ms-scrollbar-thumb:hover {
+//       background-color: $dark-bg-light;
+//     }
+
+//     &:hover::-webkit-scrollbar-corner {
+//       height: 40px;
+//     }
+
+//     &:hover::-moz-scrollbar-corner {
+//       height: 40px;
+//     }
+
+//     &:hover::-ms-scrollbar-corner {
+//       height: 40px;
+//     }
+
+//     // scroll
+
+//     .multiselect__option--selected {
+//       background: var(--dark-bg);
+//       color: var(--ac-white-text);
+//     }
+//   }
+
+//   .multi-select-wrapper {
+//     background: var(--dark-bg-light);
+
+//     .multiselect__content-wrapper {
+//       background-color: var(--dark-bg-light);
+//       background: var(--dark-bg-light);
+
+//       // scroll
+//       &::-webkit-scrollbar {
+//         border-radius: 50px;
+//         width: 3px;
+//       }
+
+//       &::-moz-scrollbar {
+//         border-radius: 50px;
+//         width: 3px;
+//       }
+
+//       &::-ms-scrollbar {
+//         border-radius: 50px;
+//         width: 3px;
+//       }
+
+//       &::-webkit-scrollbar:hover {
+//         width: 7px;
+//       }
+
+//       &::-moz-scrollbar:hover {
+//         width: 7px;
+//       }
+
+//       &::-ms-scrollbar:hover {
+//         width: 7px;
+//       }
+
+//       &::-webkit-scrollbar-thumb {
+//         background-color: $dark-bg-light;
+//         border-radius: 50px;
+//         height: 2px !important;
+//       }
+
+//       &::-moz-scrollbar-thumb {
+//         background-color: $dark-bg-light;
+//         border-radius: 50px;
+//         height: 2px !important;
+//       }
+
+//       &::-ms-scrollbar-thumb {
+//         background-color: $dark-bg-light;
+//         border-radius: 50px;
+//         height: 2px !important;
+//       }
+
+//       &::-webkit-scrollbar-thumb:hover {
+//         background-color: $dark-bg-light;
+//       }
+
+//       &::-moz-scrollbar-thumb:hover {
+//         background-color: $dark-bg-light;
+//       }
+
+//       &::-ms-scrollbar-thumb:hover {
+//         background-color: $dark-bg-light;
+//       }
+
+//       &:hover::-webkit-scrollbar-corner {
+//         height: 40px;
+//       }
+
+//       &:hover::-moz-scrollbar-corner {
+//         height: 40px;
+//       }
+
+//       &:hover::-ms-scrollbar-corner {
+//         height: 40px;
+//       }
+
+//       // scroll
+
+//       .multiselect__content .multiselect__element .multiselect__option {
+//         color: var(--ac-white-text);
+//       }
+
+//       .multiselect__option--group {
+//         color: var(--ac-white-text);
+//         background-color: var(--dark-bg-light);
+//       }
+
+//       .multiselect__option--selected {
+//         color: var(--ac-white-text);
+//         background-color: var(--dark-bg-light);
+//       }
+//     }
+//   }
+// }
+
+// // dark theme end
+// /****************************************
+// Responsive Classes
+// *****************************************/
+// // Extra small devices (portrait phones, less than 576px)
+// @media (max-width: 575.98px) {}
+
+// // Small devices (landscape phones, 576px and up)
+// @media (min-width: 576px) and (max-width: 767.98px) {}
+
+// // Medium devices (tablets, 768px and up)
+// @media (min-width: 768px) and (max-width: 991.98px) {}
+
+// // Large devices (desktops, 992px and up)
+// @media (min-width: 992px) and (max-width: 1199.98px) {}
+
+// // Extra large devices (large desktops, 1200px and up)
+// @media (min-width: 1200px) {}