/*------------------------------------*\
    
    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 {
    border-radius: 20px;
    background: #fff;
    padding: 13px 20px !important;
    border: 1px solid #DBDBDB;
    font-size: 15px;
    min-height: 50px;
    text-align: left;
}

.choices__list--single {
    padding: 0;
}

.is-open .choices__inner {
    border-radius: 20px 20px 0 0 ;
    border-color: #5FEAE6;
}

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

.choices[data-type*="select-one"]::after {
    content: '\e903';
    font-family: 'icomoon';
    position: absolute;
    margin-top: 0;
    top: 50%;
    right: 15px;
    font-weight: normal;
    font-size: 16px;
    color: #29AAA6;
    width: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 35px;
    background-color: #DFFBFA;
    border-radius: 50px;
    border: none;
    transform: translate(0, -50%);
}

.is-flipped .choices__list--dropdown {
    top: 100%;
    bottom: auto;
}

.choices__list--dropdown {
    background-color: #ffffff;
    border: 1px solid #5FEAE6;
    border-radius: 0 0 20px 20px;
    text-align: left;
    padding: 12px;
    box-shadow: 0 15px 20px rgba(0,0,0,0.08);
    z-index: 10;
}

.is-open .choices__list--dropdown {
    border-color: #5FEAE6;
}

.is-focused .choices__inner,
.is-open .choices__inner {
    border-color: #5FEAE6;
}

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

.choices__list--dropdown .choices__item {
    padding: 14px 18px;
    font-size: 15px;
    border-radius: 20px;
}

.choices__list--dropdown .choices__item:hover {
    background-color: #DFFBFA;
    color: #29AAA6;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: #DFFBFA;
    color: #29AAA6;
}

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

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

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

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