/* html: 

<div class="single-select">
    <div class="select scroll">
        <div class="select-label button-text-1 bold flex-row" onclick="selectClicked(this)">
            <span  id='label'>Select: All</span>
            <img class="carrot"/>
        </div>
        <div class="select-options button-text-1 regular">
            <div class="select-option flex-row underline">
                <img class="search" />
                <input name="search-bar"
                    autocomplete="off"
                    type="text"
                    onkeyup="selectKeyUp(this)"
                    class="search-bar"
                    placeholder="Search options...">
            </div>
            <div class="select-option button-text-1 bold blue100 underline flex-row left" onclick="clear(this)">
                <span class="clickable">Clear</span>
            </div>
            <div class="select-option button-text-1 bold blue100 underline flex-row left" onclick="optionClicked(this)">
                <img class="checkbox" />
                <span class="clickable">Option 1</span>
            </div>
            <div class="select-option button-text-1 bold blue100 underline flex-row left" ionclick="optionClicked(this)">
                <img class="checkbox" />
                <span class="clickable">Option 2</span>
            </div>
            <div class="select-option button-text-1 bold blue100 underline flex-row left" onclick="optionClicked(this)">
                <img class="checkbox" />
                <span class="clickable">Option 3</span>
            </div>
        </div>
    </div>
</div> 

javascript: 

function selectClicked(elem) {
    elem.parentElement.children[1].children[0].children[1].value = '';
    elem.parentElement.classList.toggle('select-opened');
}

function selectKeyUp(elem) {
    clearTimeout(timer);
    timer = setTimeout(selectSearch(elem, true), 5000);
}

function selectSearch(elem) {
    const searchStr = elem.value;

    const keywords = searchStr.split(/[\s\[\^\$\.\|\?\*\+\(\)\\]+/)
        .filter(word => word).map(word => word.toLowerCase());
    
    if (!keywords.length) {
        clearSelectSearch(elem);
        return;
    }
    const regex = keywords.join(".*");
    
    Array.from(elem.parentElement.parentElement.children).slice(2).map(child => {
        if (child.getAttribute('value').toLowerCase().match(regex)) {
            child.style['display'] = 'block';
        } else {
            child.style['display'] = 'none';
        }
    });
}

function clear(elem) {
    Array.from(elem.parentElement.children).slice(2).map(child => {
        child.children[0].classList.remove('checked');
    })
}

function filterClicked(elem) {
    const checked = !elem.children[0].classList.contains('checked');
    if (checked) {
        elem.children[0].classList.add('checked');
    } else {
        elem.children[0].classList.remove('checked');
    }
}
*/

/*-------------------------------------------------------------------------*/
/* SELECT                                                                  */
/*-------------------------------------------------------------------------*/

.select {
    align-items: left;
    background: none;
    box-sizing: border-box;
    padding: 4px;
    position: relative;
    transition: 0.2s;
    width: 100%;
    max-width: 100%;
    border: 1px solid black;
}

.select-options {
    box-sizing: border-box;
    display: none;
    overflow-y: auto;
    position: absolute;
    width: max-content;
    width: 100%;
    max-height: 312px;
    z-index:8;

    left: 49%;
    transform: translate(-49%, 0);
    top: 24px;

    background: #FFFFFF;
    box-shadow: 0px 8px 25px rgba(33, 39, 91, 0.25);
}

.select-opened icon.carrot {
    transform: rotate(-180deg);
}

.select-option .search-bar {
    margin-left: 0px;
}

.select-option .search-bar::placeholder {
    font-family: Inter;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;

    letter-spacing: 0.07px;
}

.select-option .search-bar:-moz-placeholder,
.select-option .search-bar::-moz-placeholder {
    font-family: Inter;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;

    letter-spacing: 0.07px;
    
}

.select icon.search {
    height: 11px;
    width: 11px;
}

.width-container .select-options {
    width: calc(100% + 2px);
}

/* .width-content .select-options {
    width: max-content;
}

.select-options.dropdown {
    width: max-content;
    position: absolute;
    top: -4px;
    left: -40px;
    border-bottom: none;
}

.right .select-options.calendar {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
}

.dropdown .select-option:hover {
    color: #474D81;
    cursor: pointer;
}

.select-opened:not(.dropdown) {
    background: #21275B;
    transition: 0.2s;
}

.select-opened.dropdown {
    background: none !important;
    border: none !important;
    transition: 0.2s;
}

.select-label {
    cursor: pointer;
}

.select-opened .select-label {
    color: #FFFFFF;
    transition: 0.2s;
}

.select-label span {
    padding-right: 8px;
}

.select-label span#views-btn-msg {
    padding-left: 8px;
    cursor:pointer;
}

.select.active{
    background-color: #21275B; 
}

/* .active .select-label{
    color: #FFFFFF;
} */

.select-opened .select-options {
    display: block;
    transition: 0.2s;
}

/* .dropdown-opened .select-options {
    display: block;
} */


.select-option {
    background: var(--white);
    box-sizing: border-box;
    padding: 8px;
    transition: 0.2s;
    cursor: pointer;
}

/*
.select-option:first-child {
    padding: 18px 16px;
}

.hairline + .select-option {
    padding-top: 22px;
}

.select-option:last-child {
    padding-bottom: 27px;
}

.select-option.hover:not(.active):hover {
    color: #474D81;
    cursor: pointer;
}

singleselect .select-option {
    padding: 10px 16px;
}

singleselect .select-option:first-child:not(.search) {
    padding: 10px 16px;
    padding-top: 16px;
}

singleselect .select-option:last-child {
    padding: 10px 16px;
    padding-bottom: 16px;
}

.dropdown .select-option {
    padding: 10px 16px !important;
}

.select-option#calendar-max,
.select-option#calendar-min {
    padding-top: 6px;
}

.select-option.underline {
    border-bottom: 1px solid #EEEFFD;
}

.select-option.active{
    color: var(--white);
    background-color: var(--black60);
}

.select-autocomplete {
    background: #FCFCFF;
    border-bottom: 1px solid #e4e4e4;
    border-left: none;
    border-right: none;
    border-top: none;
    box-sizing: border-box;
    font-size: 16px;
    outline: none;
    width: 100%;
}

.select-option.body-text-1 {
    line-height: 16px;
}

.select-option icon:first-child  {
    padding-right: 8px;
}

input.search-bar:focus {
    outline: none;
} */

.select-option icon:first-child.search  {
    padding-left: 3px;
    padding-right: 8px;
}