/*------------------------------------*\
    
    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 {
    color: var(--color-default);
    font-size: 16px;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
}

.choices__inner {
    background-color: var(--color-white);
    color: var(--color-default);
    border: 1px solid #ddd;
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
    padding: 14px 32px 14px 10px;
    width: 100%;
    outline: none;
    -webkit-transition: background-color .3s eas-in-out;
    -o-transition: background-color .3s eas-in-out;
    transition: background-color .3s eas-in-out;
}

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

.choices__list--single {
    display: inline-block;
    width: 100%;
    padding: 14px 0;
}

.choices[data-type*="select-one"] .choices__inner {
    padding-bottom: 0;
    padding-top: 0;
}

.choices[data-type*="select-one"]::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    background-color: transparent;
    width: 32px;
    height: calc(100% - 2px);
    border: 1px solid #ddd;
}

.choices[data-type*="select-one"]::after {
    border-color: var(--color-blue) transparent transparent transparent;
}

.choices[data-type*="select-one"].is-open::after {
    border-color: transparent transparent var(--color-blue) transparent;
}

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

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

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

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

.choices__list--dropdown {
    border: 1px solid #ddd;
    border-radius: 0;
}

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

.choices__list--dropdown .choices__item {
    position: relative;
    padding: 14px 10px;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-default);
    font-family: 'Open Sans', sans-serif;
    border-bottom: 1px solid #ddd;
}