/*------------------------------------*\
    
    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[data-type*="select-one"] .choices__input { 
    display: none;
}

.choices__inner {
    background: #fff;
    border: none;
    padding: 9.5px 39px 9.5px 33px !important;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.6);
}

.choices {
    box-shadow: 0 0 10px rgba(0,0,0,0.10);
}

.choices[data-type*="select-one"]::after {
    border-width: 7px;
    right: 40px;
}

.choices[data-type*="select-one"].is-open::after {
    margin-top: -10.5px;
}

.choices__list--dropdown .choices__item {
    position: relative;
    padding: 8px 16px;
    font-size: 16px;
}

.choices__list--single {
    padding: 4px 16px 4px 0;
}

@media(min-width: 768px) {
    .choices__inner {
        padding: 9.5px 32px 9.5px 26px !important;
    }

    .choices[data-type*="select-one"]::after {
        right: 32px;
    }
}

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

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

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