/*------------------------------------*\
    
    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 {
    width: 100%;
    display: block;
    height: 50px;
    background-color: var(--light);
    color: var(--heading-text-color);
    border: none;
    border: 2px solid var(--light);
    font-size: 15px;
    border-radius: var(--button-border-radius);
    font-family: var(--font-fam-primary);
    padding: 12px 39px 12px 15px !important;
    font-weight: 400;
    transition: all ease 0.1s;
}

.choices__list--single {
    padding: 0;
}

.bg-light .choices__inner {
    background: var(--white);
    border: 2px solid var(--white);
}

.bg-medium .choices__inner {
    background: var(--dark);
    border: 2px solid var(--dark);
    color: var(--white);
}

.bg-dark .choices__inner {
    background: var(--medium);
    border: 2px solid var(--medium);
    color: var(--white);
}

.choices {
    z-index: 2;
}

.choices[data-type*='select-one']:after {
    content: "\e904";
    font-family: 'rmfx-icon' !important;
    border: none;
    top: 50%;
    transform: translate(0, -50%);
    right: 15px;
    font-size: 15px;
    color: var(--secondary-color);
    z-index: 3;
    width: auto;
    height: auto;
    margin: 0;
}

.choices[data-type*='select-one'].is-open:after {
    margin-top: 0;
    border: none;
    content: "\e907";
}

.bg-dark .choices[data-type*='select-one'].is-open:after,
.bg-dark .choices[data-type*='select-one'].is-focused:after {
    border-right: 1px solid var(--dark);
}

.bg-medium .choices[data-type*='select-one'].is-open:after,
.bg-medium .choices[data-type*='select-one'].is-focused:after {
    border-right: none;
}

.choices[data-type*='select-one']:before {
    content: "";
    position: absolute;
    right: 34px;
    width: 2px;
    height: 26px;
    background: var(--light-accent-color);
    top: 50%;
    transform: translate(0, -50%);
}

.is-open .choices__inner {
    border-radius: 30px 30px 0 0;
}

.is-focused .choices__inner,
.is-open .choices__inner {
    border: none;
    border: 2px solid var(--secondary-color);
}

.bg-dark .is-focused .choices__inner,
.bg-medium .is-focused .choices__inner {
    border: 2px solid var(--secondary-color);
}


.choices[data-type*='select-one'] .choices__input {
    display: none;
}

.choices__list--dropdown .choices__item--selectable:after {
    display: none;
}

.choices__list--dropdown .choices__item {
    position: relative;
    padding: 13px 15px !important;
    font-size: 15px;
    color: var(--primary-text-color);
    font-weight: 400;
}

.bg-medium .choices__list--dropdown .choices__item,
.bg-dark .choices__list--dropdown .choices__item {
    background: var(--medium);
    color: var(--white);
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--secondary-color) !important;
}

.is-flipped.is-open .choices__inner {
    border-radius: 0 0 30px 30px;
}

.choices__item--choice:first-child {
    display: none;
}

.choices__list--dropdown {
    border: 2px solid var(--secondary-color);
    box-shadow: 0 5px 15px rgba(38, 58, 73, 0.15);
    margin-top: -2px;
}

.is-open .choices__list--dropdown {
    border-color: var(--secondary-color);
    border-radius: 0 0 30px 30px;
}

.is-flipped.is-open .choices__list--dropdown {
    border-color: var(--secondary-color);
    border-radius: 30px 30px 0 0;
}

.bg-dark .choices__list--dropdown,
.bg-medium .choices__list--dropdown {
    box-shadow: 0 5px 15px rgba(12, 21, 28, 0.15);
}

.bg-medium .choices[data-type*='select-one']:before {
    background: var(--medium);
}

.bg-dark .choices[data-type*='select-one']:before {
    background: var(--dark);
}


@media(min-width: 768px) {
    .choices__inner {
        height: 55px;
        font-size: 16px;
        padding: 14px 61px 14px 20px !important;
    }

    .choices[data-type*='select-one']:after {
        right: 20px;
        font-size: 20px;
    }

    .choices[data-type*='select-one']:before {
        right: 50px;
        height: 31px;
    }
    
    .choices__list--dropdown .choices__item {
        padding: 13px 20px !important;
        font-size: 16px;
    }
}

@media(min-width: 1200px) {
    .choices__inner {
        height: 59px;
        font-size: 18px;
        padding: 14px 61px 14px 20px !important;
    }

    .choices__list--dropdown .choices__item {
        font-size: 18px;
    }
}