/*------------------------------------*\
    
    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 {
    display: block;
    width: 100%;
    height: 59px;
    border: none;
    background: var(--white);
    box-shadow: 0px 4px 20px 10px rgba(23, 37, 73, 0.03);
    border-radius: 50px !important;
    padding: 22px 60px 17px 24px !important;
    line-height: 1em;
    font-size: 18px;
    font-weight: 700;
    color: var(--dark-blue);
    position: relative;
    z-index: 2;
}

.choices__list--single {
    padding: 0;
}

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

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

.choices__list--dropdown .choices__item {
    position: relative;
    padding: 12px 28px !important;
    font-size: 18px;
    border-bottom: 1px solid var(--light-blue);
}

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

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

.choices.is-open .choices__inner {
    background: var(--light-blue);
}

.choices__list--dropdown {
    border: none;
    padding: 35px 0 0;
    margin-top: -35px;
    border-radius: 10px !important;
    box-shadow: 0px 4px 20px 10px rgba(23, 37, 73, 0.03);
}

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

.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: rgba(57, 86, 163, 0.25);
}

.is-flipped .choices__list--dropdown {
    padding: 0 0 35px;
    margin-top: 0;
    margin-bottom: -35px;
}

.form-col .choices__inner {
    box-shadow: 0px 4px 20px 10px rgba(57, 86, 163, 0.15);
}

.choices {
    overflow: unset;
}

.form-col .choices__inner {
    height: 55px;
    padding: 20px 60px 15px 24px !important;
}

.form-col .is-open .choices__inner {
    box-shadow: none;
}