/*------------------------------------*\
    
    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 {
    z-index: 2;
}

.choices__inner {
    width: 100%;
    height: 51px;
    border-radius: 4px;
    background: var(--white);
    border-radius: 4px;
    border: 1px solid var(--border-color);
    font-size: 16px;
    font-weight: 400;
    padding: 12px 45px 8px 15px !important;
    color: var(--black);
    transition: all ease 0.3s;
}

.choices[data-type*='select-one']:after {
    content: '\e902';
    font-family: 'rmfx-icon';
    border: none;
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 0;
    pointer-events: none;
    width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--paragraph-text-color);
    border-left: 1px solid var(--border-color);
}

.choices__list--single {
    padding: 0;
}

.choices[data-type*='select-one'].is-open:after {
    content: "\e923";
    border-color: unset;
    border-left: 1px solid var(--border-color);
    margin-top: 0;
}

.half-text-half-form--homepage .choices[data-type*='select-one']:after {
    border-left: unset;
}

.choices.is-open {
    border: none;
}

.choices.is-open .choices__inner,
.choices.is-focused .choices__inner {
    border: 1px solid var(--secondary-color);
    border-left: 4px solid var(--secondary-color);
    padding: 12px 45px 8px 11px !important;
}

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

.choices__list--dropdown .choices__item {
    position: relative;
    padding: 10px 19px;
    font-size: 16px;
    color: var(--black);
}

.choices__list--dropdown {
    border: none;
}

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

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

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

.choices__list--dropdown {
    box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.09);
    margin-top: 0;
}