.multi-select-container {
    display: inline-block;
    position: relative;
    max-width: 300px;
    width: 100%;
    background-color: #F5F5F5;
}

.multi-select-menu {
    position: absolute;
    left: 0;
    top: 100%;
    margin: 0;
    z-index: 1;
    width: 100% !important;
    background: #fff;
    box-shadow: 0px 4px 24px 0px #00000014;
    max-height: 250px !important;
    overflow-y: scroll;
    display: none;
}

.multi-select-menuitem {
    display: block;
    padding: 15px 24px 15px 50px;
    border-top: 1px solid rgba(66, 66, 66, .12);
    color: rgba(66, 66, 66, .5);
    cursor: pointer;
    position: relative;
    transition: all .3s ease-in-out;
}

.multi-select-menuitem::before {
    content: '';
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 1px solid rgba(217, 217, 217, 1);
    border-radius: 2px;
    background-color: transparent;
    transition: all .3s ease-in-out;
}

.multi-select-menuitem::after {
    content: '';
    position: absolute;
    background-image: url("data:image/svg+xml,%3Csvg width='9' height='8' viewBox='0 0 9 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 4L3 7L8 0.5' stroke='white' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    width: 9px;
    height: 8px;
    top: 50%;
    transform: translateY(-50%);
    left: 27px;
    transition: opacity .3s ease-in-out;
    opacity: 0;
}

.multi-select-menuitem:has(input:checked)::before {
    background-color: var(--color-red);
    border-color: transparent;
}

.multi-select-menuitem:has(input:checked)::after {
    opacity: 1;
}


.multi-select-legend {
    font-size: 0.875em;
    font-weight: bold;
    padding-left: 10px;
}

.multi-select-legend + .multi-select-menuitem {
    padding-top: 0.25rem;
}

.multi-select-menuitem + .multi-select-menuitem {
    /*padding-top: 0;*/
}

.multi-select-presets {
    border-bottom: 1px solid #ddd;
}

.multi-select-menuitem input {
    position: absolute;
    opacity: 0;
}

.multi-select-button {
    width: 100%;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 15px 40px 15px 24px;
    height: 50px;
    color: rgba(66, 66, 66, .7);
}

.multi-select-button:after {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='15' height='8' viewBox='0 0 15 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7.5 6L14 1' stroke='%23424242' stroke-width='2'/%3E%3C/svg%3E%0A");
    width: 15px;
    height: 8px;
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
}

.multi-select-container--open .multi-select-menu {
    display: block;
}

.multi-select-container--open .multi-select-button:after {
    border-width: 0 0.4em 0.4em 0.4em;
    border-color: transparent transparent #999 transparent;
}

.multi-select-container--positioned .multi-select-menu {
    /* Avoid border/padding on menu messing with JavaScript width calculation */
    box-sizing: border-box;
}

.multi-select-container--positioned .multi-select-menu label {
    /* Allow labels to line wrap when menu is artificially narrowed */
    white-space: normal;
}

@media (hover: hover) {
    .multi-select-menuitem:hover {
        background-color: #F5F5F5;
        color: rgba(66, 66, 66, .9);
    }

    .multi-select-menuitem:hover::before {
        border-color: rgba(66, 66, 66, .9);
    }
}