html {
    --multiselect-dropdown-block-right-offset: 1%;
    --multiselect-dropdown-block-width: 40px;
    --multiselect-border-radius: 4px;
}

.multiselect {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    min-height: auto;
    border: 1px solid#E7E9F2;
    border-radius: var(--multiselect-border-radius);
    background-color: var(--background-color, #E7E9F2);
}

.multiselect:hover {
    border: 1px solid #7E7F8A;
}

.multiselect .multiselect__clear,
.multiselect .multiselect__select::before {
    opacity: 0.4;

}

.multiselect:active {
    border: 1px solid #c7c9db
}

.multiselect__input {
    margin-bottom: 0;
}

.filter-multiselect .multiselect__input {
    line-height: 1.6 !important;
}

.multiselect__tags {
    align-items: center;
    display: flex;
    width: 100%;
    margin-right: 16px;
    padding: 0;
    min-height: var(--min-tags-height);
    padding-left: 14px;
    border: none;
    border-radius: var(--multiselect-border-radius) !important;
    background-color: transparent;
    padding-right: calc(var(--multiselect-dropdown-block-width) + var(--multiselect-dropdown-block-right-offset));
}

.multiselect__tags-wrap {
    display: none;
}

.multiselect--active .multiselect__placeholder {
    display: block;
}

.multiselect__placeholder {
    font-weight: 600;
    text-transform: uppercase;
    color: #7E7F8A;
    margin-bottom: 0;
    padding-top: 0;
}

.multiselect__gray-background .multiselect__tags {
    background: #E7E9F2 !important;
}

.multiselect__thin-placeholder .multiselect__placeholder {
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: 0.005em;
    text-transform: unset;
}

.multiselect__tags,
.multiselect--disabled {
    border-radius: var(--multiselect-border-radius);
}

.multiselect--disabled .multiselect__tags {
    background: #E7E9F2;
    color: #7E7E8E;
}

.multiselect--disabled
.multiselect__current,
.multiselect--disabled
.multiselect__select {
    background-color: unset;
}

.multiselect__select {
    height: 100%;
    width: var(--multiselect-dropdown-block-width);
    transform-origin: center;
    right: 2px; /*var(--multiselect-dropdown-block-right-offset);*/
    transform: rotate(180deg);
}
.multiselect--disabled .multiselect__select:before {
    opacity: 0;
}
.multiselect--active {
    z-index: auto; /* fix bug in library: z-index on multiselect--auto (input area) instead of dropdown */
}

.multiselect--active .multiselect__select {
    transform: rotate(0);
}

.multiselect--active .multiselect__select::before,
.multiselect--active .multiselect__clear{
    opacity: 1;
}

.multiselect__select::before {
    margin: auto;
    position: absolute;
    border: none;
    content: '';
    inset: 0;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.79289 0.292893C7.18342 -0.0976311 7.81658 -0.0976311 8.20711 0.292893L14.2071 6.29289C14.5976 6.68342 14.5976 7.31658 14.2071 7.70711C13.8166 8.09763 13.1834 8.09763 12.7929 7.70711L7.5 2.41421L2.20711 7.70711C1.81658 8.09763 1.18342 8.09763 0.792893 7.70711C0.402369 7.31658 0.402369 6.68342 0.792893 6.29289L6.79289 0.292893Z' fill='%2330313A'/%3E%3C/svg%3E%0A");
    background-position: center;
}

.multiselect__single {
    background-color: transparent;
    margin-bottom: 0;
    padding-left: 0;
}

.base-multiselect:has(.base-multiselect-label) .multiselect__single {
    margin-top: 19px;
}

.multiselect-fix-wrapper-height .multiselect__content-wrapper{
    /*min-height: fit-content;*/ /* fixed bug in MAC/IOS with scrolling a multiselect__content-wrapper which should have max-height: XXXpx */
}

.multiselect:not(.multiselect--above) .multiselect__content-wrapper {
    top: calc(100% + 9px);
    margin-bottom: auto;
}

.multiselect__content-wrapper {
    margin-bottom: 9px;
    width: fit-content;
    min-width: 100%;
    overflow-x: hidden;
    border-radius: var(--multiselect-border-radius);
    border: none;
    z-index: 99;
    overflow-y: auto;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.08), 0 0 4px 0 rgba(0, 0, 0, 0.04);
}

@media (min-width: 768px) {
    .multiselect__content-wrapper {
        width: 100%;
    }
}
.multiselect__content-wrapper .multiselect__content li span.multiselect__option {
    white-space: break-spaces;
}
.multiselect__content-wrapper::-webkit-scrollbar-button{
    display: none;
}

.multiselect__option {
    line-height: 17px;
    font-weight: 600;
    font-size: 14px;
    padding: 16px;
}

.multiselect__option--highlight,
.multiselect__option--highlight::after,
.multiselect__option--selected,
.multiselect__option--selected.multiselect__option--highlight {
    background-color: #E7E9F2;
    color: #FF3333;
}

.multiselect__element[aria-selected="false"] .multiselect__option--highlight {
    background: transparent;
    color: rgb(53, 73, 94);
}
.multiselect__option--selected::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.00892 10.3246L3.78625 13.1019C4.16131 13.4769 4.66992 13.6875 5.20025 13.6875C5.73058 13.6875 6.2392 13.4769 6.61425 13.1019L15.1916 4.52458C15.313 4.39885 15.3802 4.23045 15.3787 4.05565C15.3772 3.88085 15.3071 3.71364 15.1835 3.59004C15.0599 3.46643 14.8927 3.39632 14.7179 3.3948C14.5431 3.39328 14.3747 3.46048 14.2489 3.58192L5.67159 12.1593C5.54657 12.2842 5.37703 12.3544 5.20025 12.3544C5.02348 12.3544 4.85394 12.2842 4.72892 12.1593L1.95159 9.38192C1.82585 9.26048 1.65745 9.19328 1.48265 9.1948C1.30785 9.19632 1.14064 9.26643 1.01704 9.39004C0.893434 9.51364 0.823321 9.68085 0.821803 9.85565C0.820284 10.0304 0.88748 10.1988 1.00892 10.3246Z' fill='%23FF3333'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    right: 32px;
    background-position: right;
}

.multiselect[tabindex='-1'] input {
    background-color: transparent;
    min-height: auto;
    transition: transform 0.15s ease-in;
}

.multiselect-no-icon-in-search .multiselect__tags:before {
    background-image: none !important;
}

.multiselect-no-icon-in-search .multiselect--active[tabindex="-1"] input {
    transform: translateX(0px);
    padding-left: 0!important;
}

.multiselect--active[tabindex="-1"] input {
    transform: translateX(20px);
}

.multiselect[tabindex='-1'] input::placeholder {
    color: #7E7E8E;
}

.multiselect--active[tabindex='-1'] .multiselect__select {
    z-index: 1;
}

.multiselect--active[tabindex='-1'] > .multiselect__tags::before {
    background-color: #E7E9F2;
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    inset: 0;;
    border-radius: var(--multiselect-border-radius);
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5065 20.0095C12.8143 20.0125 15.0516 19.2141 16.8361 17.7506L22.8046 23.7181C23.202 24.1019 23.8354 24.0909 24.2192 23.6934C24.5936 23.3058 24.5936 22.6912 24.2192 22.3034L18.2517 16.335C21.7475 12.0564 21.1128 5.75391 16.8341 2.25815C12.5555 -1.2376 6.25303 -0.602932 2.75727 3.67573C-0.738489 7.9544 -0.103818 14.2568 4.17485 17.7526C5.96191 19.2127 8.19878 20.01 10.5065 20.0095Z' fill='%232E2E3B'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position-x: 10px;
    background-position-y: center;

}

.multiselect[tabindex="-1"] input::placeholder {
    font-weight: 600;
    text-transform: uppercase;
    color: #30313A;
    margin-bottom: 0;
    padding-top: 0px;
    font-size: 14px;
}

.multiselect-error-detected .multiselect__placeholder {
    color: red
}

.multiselect[tabindex="-1"] {
    cursor: pointer;
}

.multiselect__clear {
    position: absolute;
    top: 44%;
    right: 40px;
    z-index: 50;

    @media (min-width: 769px) {
        top: 40%;
    }
}

/* Thin scroll*/
.multiselect__content-wrapper::-webkit-scrollbar-thumb {
    border-left: 1px solid rgba(128,128,128,0.3);
    border-right:1px solid rgba(128,128,128,0.3);
}

.multiselect__content-wrapper::-webkit-scrollbar-button {
    background-color: transparent;
    width: 0;
    height: 0;
}
.multiselect__content-wrapper::-webkit-scrollbar {
    width: 3px !important;
    background-color: #F5F5F5 !important;
}