/*------------------------------------*\
    
    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

\*------------------------------------*/

.filter__choices {
    position: relative;
}

.choices__inner,
.filter__choices select {
    vertical-align: middle;
    background-color: #ffffff;
    padding: 11px 34px 11px 17px !important;
    border: 1px solid #D0D0D0;
    border-radius: 0;
    font-size: 16px;
    line-height: 1.4em;
    min-height: 48px;
    overflow: hidden;
    font-weight: 400;
    color: var(--dark-gray);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.choices[data-type*='select-one']:after {
    content: '';
    height: 0;
    width: 0;
    border-style: solid;
    border-color: #FFAA01 transparent transparent transparent;
    border-width: 7px;
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -2.5px;
    pointer-events: none;
}

.choices[data-type*='select-one'].is-open:after {
    margin-top: -10px;
    border-color: transparent transparent #FFAA01 transparent;
}

.choices__list--dropdown .choices__item,
.filter__choices select option {
    font-size: 16px;
    font-weight: 400;
    padding: 10px 17px;
    word-break: break-word;
}

.choices__item,
.choices__item.choices__placeholder {
    color: var(--dark-gray);
    opacity: 0.7;
}

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

.choices__list--single {
    padding: 0;
}