select{
    @apply font-base py-0;
  }
  .form-group .control-label {
      @apply !font-base
  }
.react-select__control {
    @apply w-full h-default px-4 pl-1 text-base text-dark !rounded-none outline-none border-2 border-solid border-borderColors hover:border-primary focus:border-primary font-base;
}
.react-select__indicators .react-select__indicator-separator{
    @apply w-0
}
.react-select__menu {
    @apply text-left mt-0 shadow-lg !important;
}
.react-select__menu-list {
    @apply py-0 !important;
}
.form-group p.helper-text{
    @apply block w-full m-0 py-1 text-sm text-disabled
}
.form-group.error .control-label{
    @apply text-danger
}
.error .input-group .form-control{
    @apply  border-danger
}
.error .error-text{
    @apply block w-full m-0 py-1 text-sm text-danger
}
.error .react-select__control{
    @apply  border-danger !important;
}
.form-default  .react-select__control{
    @apply h-[49px] text-base !important;
}
.form-small .react-select__control{
    @apply h-small text-sm !important;
}
.form-medium .react-select__control{
    @apply h-medium text-lg !important;
}
.form-large .react-select__control{
    @apply h-large text-xl !important;
}
.form-default .control-label{
    @apply text-base
}
.form-small .control-label{
    @apply text-sm
}
.form-medium .control-label{
    @apply text-lg
}
.form-large .control-label{
    @apply text-xl
}

.css-26l3qy-menu{
    @apply !mt-2 !font-base;
}
.css-1rhbuit-multiValue{
    @apply px-2;
}
.css-9gakcf-option{
    @apply !bg-secondary !text-white flex items-center;
}
.react-select__option label{
    @apply !pb-0 flex items-center;
}
.react-select__option--is-selected label{
    @apply !text-white;
}

.css-yt9ioa-option:active{
    @apply !bg-secondary;
}
.react-select__menu input[type="checkbox"] + label:active{
    @apply !text-white;
}
.css-1rhbuit-multiValue{
    @apply !bg-secondary !text-white;
}
.css-12jo7m5{
    @apply !text-white;
}
.css-1n7v3ny-option{
    @apply !bg-secondary !text-white;
}
.css-1n7v3ny-option label{
    @apply !text-white;
}
.css-1pahdxg-control{
    @apply !border !border-primary !shadow-none;
}
/* Rounded default */
.rounded-default .react-select__control, .rounded-default .css-1rhbuit-multiValue{
    @apply !rounded-none
  }


  /* Rounded small */
  .rounded-small .react-select__control, .rounded-small .css-1rhbuit-multiValue{
    @apply !rounded-sm
  }

  /* Rounded medium */
  .rounded-medium .react-select__control, .rounded-medium .css-1rhbuit-multiValue{
    @apply !rounded-md
  }

  /* Rounded full */
  .rounded-large .react-select__control, .rounded-large .css-1rhbuit-multiValue{
    @apply !rounded-full
  }
  .css-xb97g8:hover{
      @apply !text-white cursor-pointer !bg-transparent;
  }



  /* custom checkbox */

  .react-select__menu input[type="checkbox"]:checked + label::after {
    content: '';
    position: absolute;
    width: 1.2ex;
    height: 0.4ex;
    background: rgba(0, 0, 0, 0);
    top:8px;
    left: 4px;
    @apply border-2 border-solid border-secondary;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
 }

 .react-select__menu input[type="checkbox"] {
    line-height: 2.1ex;
 }

 .react-select__menu input[type="radio"],
 .react-select__menu input[type="checkbox"] {
     position: absolute;
     left: -999em;
 }

 .react-select__menu input[type="checkbox"] + label {
     position: relative;
     overflow: hidden;
     cursor: pointer;
 }

 .react-select__menu input[type="checkbox"] + label::before {
    content: "";
    display: inline-block;
    vertical-align: -25%;
    height: 2ex;
    width: 2ex;
    background-color: white;
    border: 1px solid rgb(166, 166, 166);
    border-radius: 4px;
    margin-right: 0.5em;
 }