/*------------------------------------*\
    
    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: 0;
    border: 0;
    width: 100%;
    min-height: 46px;
    padding: 12px 18px 14px;
    border: 0;
    outline: none;
    background-color: #FFF;
    box-shadow: inset 0 -4px #BABABA;
    color: #5A5A5A;
    transition: box-shadow 0.3s ease-in-out;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    font-weight: 400;
}

.choices[data-type*='select-one'] .choices__inner {
    padding: 8px 18px 10px;
}

.choices[data-type*='select-one'] .choices__inner {
    padding: 8px 18px 10px;
}

.form__select,
.widget_categories form {
    position: relative;
}

.choices__list--dropdown {
    -webkit-transform: translateY(1px);
            transform: translateY(1px);
}

.choices__list--dropdown .choices__list,
.choices__input {
    font-family: 'Montserrat', sans-serif;
}

.choices__input {
    font-size: 16px;
}

.choices__inner:before,
.widget_categories form:before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(45deg);
            transform: translateY(-50%) rotate(45deg);
    right: 15px;
    border: 2px solid #4A4A4A;
    border-top: 0;
    border-left: 0;
}

.choices:after {
    display: none;
}

.choices__inner {
    background-color: #F7F7F7;
    box-shadow: inset 0 -4px #E5E5E5;
    color: #5A5A5A;
}

.choices__list--dropdown {
    -webkit-transform: translateY(1px);
            transform: translateY(1px);
}

.choices__list--dropdown .choices__list,
.choices__input {
    font-family: 'Montserrat', sans-serif;
}