.multiselect {
  .multiselect__tags {
    background-color: $white-100;
    min-height: 36px;
    // max-height: 36px;
    font-weight: 500;
    width: 100%;
    border-radius: 4px;
    border: 1px solid $color-border-dark;
    padding: 6px 30px 8px 15px;
    font-size: 1rem;
    border-radius: 4px;

    &:hover {
      border-color: $ac-primary;
    }

    .multiselect__placeholder {
      margin: 0;
      padding: 0;
      // padding-top: 2px !important;
      font-weight: 500;
      font-size: 1rem;
    }

    .multiselect__tags-wrap {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }

    .multiselect__tag {
      background-color: $ac-primary;
      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: $white-100;
      margin-bottom: 0;
      margin: 0 !important;
      padding-left: 0;
      left: 0px;
      // top: 2px;
      font-size: 1rem !important;
      font-weight: 500;
      color: $color-heading;
      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: 1rem;
        display: flex;
        align-items: center;

        img {
          width: 30px;
        }

        p {
          font-size: 1rem;
          color: $color-heading;
        }

        p:not(.location) {
          font-weight: 500;
        }

        a {
          display: block;
          font-weight: 400;
          margin-top: -12px;
          margin-bottom: -12px;
          padding-top: 12px;
          padding-bottom: 12px;
          width: 100%;
        }

        &:hover {
          background-color: $secondary-light-gray;
          color: $ac-secondary;
        }

        &.multiselect__option--highlight {
          background-color: transparent;
          color: $ac-secondary;

          &:hover {
            background-color: $primary-light-gray;
          }

          &:after {
            background-color: $secondary-light-gray;
            color: $ac-secondary;
          }
        }
      }
    }
  }
}

.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: 1rem !important;
      color: $primary-10 !important;

      &:after {
        position: inherit !important;
        content: "" !important;
        background-color: transparent;
      }
    }
  }
}

.multiselect__input {
  &::placeholder {
    color: $color-text;
    font-weight: 400;
    line-height: 1.6;
    font-size: 1rem;
  }
}

.multiselect__tags > span {
  font-size: 1rem;
  line-height: 1;
  color: $color-heading;
}

.multi-select-wrapper {
  position: relative;
  z-index: 0;

  .multiselect--disabled {
    opacity: unset;
    background: transparent !important;
  }

  &.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: transparent;
      }
    }
  }
  &:not(.is-small) {
    .multiselect__tags {
      .multiselect__single {
        top: 4px;
      }
    }
  }
  &.is-small {
    label {
      font-size: 1rem;
      top: 6px;

      &.show-label {
        font-size: 12px;
        top: -9px;
        font-weight: 500;
        color: $gray-40;
      }
    }

    .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: 32px !important;
      z-index: 50;
    }

    .multiselect .multiselect__tags {
      min-height: 32px !important;
      padding: 4px 30px 4px 15px;
      font-size: 1rem;

      .multiselect__single {
        font-size: 12px;
      }

      .multiselect__placeholder {
        padding: 5px 0 0;
        font-size: 1rem;
        font-weight: 500;
      }
    }

    .multiselect__input,
    .multiselect__single {
      font-size: 1rem !important;
      font-weight: 500;
      line-height: 1.5;
      // padding-bottom: 4px;
      display: flex;
      align-items: center;

      &::placeholder {
        font-weight: 500;
        line-height: 1.6;
        font-size: 1rem;
      }
    }
  }

  &.is-extra-small {
    label {
      font-size: 1rem;
      top: 6px;
      font-weight: 500;

      &.show-label {
        font-size: 12px;
        top: -9px;
        font-weight: 500;
      }
    }

    .button.is-information {
      width: 32px;
      height: 32px;
    }

    .multiselect__select {
      height: 100%;
      &::before {
        top: 73%;
      }
    }

    .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 15px;
      font-size: 1rem;
      display: flex;
      align-items: center;

      .multiselect__single {
        font-size: 12px;
        top: 1px !important;
      }

      .multiselect__placeholder {
        padding: 5px 0 0;
        font-size: 1rem;
        font-weight: 500;
      }
    }

    .multiselect__input,
    .multiselect__single {
      font-size: 1rem !important;
      font-weight: 500;
      line-height: 1.5;
      // padding-bottom: 4px;
      display: flex;
      align-items: center;

      &::placeholder {
        font-weight: 500;
        line-height: 1.6;
        font-size: 1rem;
      }
    }
  }

  &.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: 1rem;
    left: 15px;
    top: 8px;
    cursor: text;
    color: $color-heading;
    position: absolute;
    z-index: 99;
    transition: 0.1s ease-in-out;

    .is-required {
      img {
        position: absolute;
        top: 7px;
        padding-left: 3px;
      }
    }

    &.show-label {
      top: -10px;
      left: 10px;
      padding: 0 5px;
      font-size: 12px;
      color: $gray-40;
      font-weight: 500;

      &::after {
        background-color: $white-100;
      }
    }

    &:after {
      position: absolute;
      content: "";
      left: 0;
      top: 50%;
      background-color: $white-100;
      width: 100%;
      height: 4px;
      margin-top: -1px;
      z-index: -1;
    }

    &.is-required {
      &:after {
        width: calc(100% + 10px);
      }
    }
  }
}

li {
  .multiselect__option {
    font-size: 1rem;
    color: $color-heading;

    &:has(input[type="checkbox"]) {
      label {
        left: 24px;
      }
    }
  }
}

.multiselect__option--selected {
  label {
    right: 30px;
  }
}

.multi-select-wrapper.is-small {
  .multiselect .multiselect__tags {
    .multiselect__input,
    .multiselect__single {
      top: 2px !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;
      }
    }
  }
  .multiselect__tags {
    .multiselect__single {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      line-clamp: 1;
      -webkit-line-clamp: 1;
      box-orient: vertical;
      -webkit-box-orient: vertical;
      top: 1.5px;
    }
  }

  // clear
  &.has-clear-button {
    &.has-refresh-button {
      .multiselect__select {
        z-index: 99;
        right: 30px;
      }

      .button {
        &.is-clear {
          right: 60px;
        }
      }
    }

    &.has-info-button {
      &.has-refresh-button {
        .multiselect__select {
          z-index: 99;
          right: 60px;
        }

        .button {
          &.is-clear {
            right: 90px;
          }
        }
      }

      .multiselect__select {
        z-index: 99;
        right: 30px;
      }

      .button {
        &.is-clear {
          right: 60px;
        }
      }
    }

    .multiselect__select {
      z-index: 99;
      right: 0px;
    }
    .multiselect__tags {
      padding: 3px 100px 4px 15px !important;
    }
    .button {
      &.is-clear {
        right: 30px;
        height: 100%;
      }
    }
  }

  // clear

  .button {
    &.is-information,
    &.is-refresh,
    &.is-clear {
      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;
      }
    }
  }
}
.multiselect__content-wrapper {
  box-shadow:
    0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
    0 0px 0 1px rgba(10, 10, 10, 0.02);
}
// Customize option group select
.multiselect__content {
  .multiselect__element {
    &:first-child {
      .multiselect__option--group {
        &.multiselect__option--disabled {
          border-top: none !important;
          margin-top: 0 !important;
          padding-top: 12px !important;
        }
      }
    }
  }
}

.option-group {
  .multiselect__option--disabled {
    background: transparent !important;
    color: $color-heading !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    border-top: 1px solid $color-border-light;
    min-height: 24px !important;
    padding-top: 16px !important;
    margin-top: 4px !important;
  }

  .multiselect__option:not(.multiselect__option--disabled) {
    padding-left: 32px !important;
    &:hover {
      background-color: #f1f1f1 !important;
    }

    &.multiselect__option--selected {
      padding-left: 32px !important;
    }
  }

  .multiselect__option--selected {
    font-weight: 500 !important;
    color: $ac-primary !important;
    background-color: $primary-light-gray !important;
    &:hover {
      background-color: $primary-light-gray !important;
      color: $ac-primary !important;
    }

    &:before {
      position: absolute;
      left: 16px;
      top: 50%;
      margin-top: -8px;
      content: "\f00c";
      font-family: "Fontawesome";
      display: inline-block;
      vertical-align: top;
      line-height: 1;
      width: 16px;
      height: 16px;
      margin-right: 0.3em;
      color: $ac-primary;
    }
  }
}

// Customize option group select

@-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 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) {
}