/*------------------------------------*\
    
    WebFX Choices.js Customizations - Global styling for select box/text inputs using Choices.js

    Add custom Choices.js select input styling to this file if it should be applied to all Choices.js select inputs on the site
    Otherwise, put your styles in individual block stylesheets

\*------------------------------------*/

.choices__inner {
    vertical-align: middle;
    background-color: transparent;
    padding: 7px 34px 7px 15px !important;
    border: 1px solid var(--white);
    border-radius: var(--border-radius);
    font-size: 14px;
    min-height: 40px;
    overflow: hidden;
    font-weight: 400;
    color: var(--white);
}

.choices[data-type*='select-one']:after {
    content: '';
    height: 0;
    width: 0;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    border-width: 7px;
    position: absolute;
    right: 14px;
    top: 50%;
    margin-top: -2.5px;
    pointer-events: none;
}

.choices[data-type*='select-one'].is-open:after {
    margin-top: -10px;
    border-color: transparent transparent #fff transparent;
}

.choices__list--dropdown input {
    display: none !important;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted:after {
    display: none !important;
}

.choices__list--dropdown .choices__item {
    font-size: 14px;
    padding: 10px 17px;
}

.choices__list--dropdown .choices__item--selectable {
    padding-right: 17px;
}

.choices__list--single {
    padding: 0;
}

.is-open .choices__inner {
    border-radius: var(--border-radius);
    border-color: var(--white);
}

.is-focused .choices__inner, .is-open .choices__inner {
    border-color: var(--white);
}

.choices__list--dropdown {
    background-color: var(--white);
    border: 1px solid var(--white);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}


@media(min-width: 768px) {
    .choices__inner {
        padding: 10px 34px 7px 16px !important;
        font-size: 16px;
        min-height: 47px;
    }

}

@media(min-width: 1200px) {
    .choices[data-type*='select-one']:after {
        right: 22px;
    }
}