/* ##### LABEL ##### */
.form-field label:not(.error) {
    display: block;
    line-height: normal;
    padding-left: 5px;
    margin-bottom: 20px;
}
.form-field.small label:not(.error) {font-size: 14px;}

.form-field .char-count {float: right; font-size: 12px; margin: 5px 0 0 5px; color: #959595;}

/* ##### INPUT ##### */
.form-field input, .form-field textarea, select {
    height: 50px;
    background: #fff;
    border: 2px solid var(--color-primary);
    display: block;
    padding: 0 30px;
    width: 100%;
    color: var(--color-default);
    font-weight: 400;
    border-radius:40px;
    font-size: 16px;
}
.form-field.small input,
.form-field input.small {
    height: 45px;
    font-size: 14px;
}
.form-field.big,
.form-field input.big {
    height: 70px;
    font-size: 16px;
}

.form-field input[type=number] {
    padding-right: 0;
}

.form-field input[type=file] {
    font-size: 13px;
    background-color: transparent !important;
    border: none;
    padding: 0;
    height: auto;
    box-shadow: none !important;
}

.form-field input[type=color] {
    padding: 0;
}

/* ##### INPUT V-NO-ARROW ##### */
input.v-no-arrow::-webkit-outer-spin-button,
input.v-no-arrow::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input.v-no-arrow[type=number] {-moz-appearance:textfield;}/* Firefox */

.form-field textarea {
    height: 150px;
    padding: 5px 15px;
    max-width: 100%;
}

select option[disabled] {display: none;}

.form-field input:not([disabled]):focus, .form-field textarea:not([disabled]):focus {
    /*background-color: #feffef;*/
    border-color: var(--color-green);
    box-shadow: 0 0 2px rgba(88, 89, 91, .1);
    outline: 0
}

.form-field input.required:not(.no-ico), .form-field textarea.required:not(.no-ico), .form-field select.required,
.form-field input[required]:not(.no-ico), .form-field textarea[required]:not(.no-ico), .form-field select[required] {
    background: url(../img/req-ico.png) no-repeat calc(100% - 5px) 5px #fff;
}

/* ##### CHECKBOX ##### */
.form-field.checkbox input[type=checkbox],
.form-field.checkbox input[type=radio] {
    opacity: 0; position: absolute; width: 1px; height: 1px; left: 5px; top: 3px;
}

.form-field.checkbox {
    padding: 0 0 0 30px;
    position: relative;
}

.form-field.checkbox label:not(.error) {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin: 0;
    padding: 0;
    line-height: inherit;
}
.form-field.checkbox.small label:not(.error) {font-size: 14px;}

.form-field.checkbox label:not(.error):before {
    content: '';
    position: absolute;
    left: -25px;
    top: 2px;
    width: 17px;
    height: 17px;
    border: 1px solid var(--color-default);
    background: #fff;
}
.form-field.checkbox.small label:not(.error):before {width: 14px; height: 14px;}


.form-field.checkbox label:not(.error):hover:before {
    border-color: var(--color-primary);
}

/* checked mark aspect */
/* checked mark aspect */
.form-field.checkbox input[type="checkbox"] + label:after,
.form-field.checkbox input[type="radio"] + label:after {
    content: '\f00c';
    position: absolute;
    top: 2px;
    left: -25px;
    font-family: "Font Awesome 6 Pro";
    font-weight: 700;
    color: var(--color-default);
    width: 17px;
    height: 17px;
    font-size: 0;
    line-height: 17px;
    text-align: center;
}
.form-field.checkbox:not(.non-anim) input[type="checkbox"] + label:after,
.form-field.checkbox:not(.non-anim) input[type="radio"] + label:after {
    transition: font-size 0.2s ease-in-out;
}
.form-field.checkbox.small input[type="checkbox"] + label:after,
.form-field.checkbox.small input[type="radio"] + label:after {
    width: 14px; height: 14px; line-height: 14px;
}

.form-field.checkbox input[type="checkbox"]:checked + label:after,
.form-field.checkbox input[type="radio"]:checked + label:after {
    font-size: 21px;
}
.form-field.checkbox.small input[type="checkbox"]:checked + label:after,
.form-field.checkbox.small input[type="radio"]:checked + label:after {
    font-size: 17px;
}

.form-field.checkbox input[type="checkbox"].error + label {
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}
.form-field.checkbox input[type="checkbox"][disabled] + label,
.form-field.checkbox input[type="checkbox"][readonly] + label {opacity: 0.8; cursor: not-allowed;}

/* ##### RADIO ##### */
.form-field.radio input[type="radio"] {opacity: 0; position: absolute; width: 1px; height: 1px; left: 5px; top: 3px;}

.form-field.radio {
    padding: 0 0 0 30px;
    position: relative;
}

.form-field.radio label:not(.error) {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin: 0;
    padding: 0;
    line-height: inherit;
}
.form-field.radio.small label:not(.error) {font-size: 14px;}

.form-field.radio label:not(.error):before {
    content: '';
    position: absolute;
    left: -25px;
    top: 2px;
    width: 17px;
    height: 17px;
    border: 1px solid #BEBEBE;
    border-radius: 50%;
}
.form-field.radio.small label:not(.error):before {width: 14px; height: 14px;}

.form-field.radio input[type="radio"]:checked + label:before {border-color: #88888e;}

/* checked mark aspect changes */
.form-field.radio input[type="radio"]:checked + label:after {
    content: '';
    position: absolute;
    top: 6px;
    left: -21px;
    background: var(--color-default);
    width: 9px;
    height: 9px;
    border-radius: 50%;
}
.form-field.radio.small input[type="radio"]:checked + label:after {width: 6px; height: 6px;}

.form-field.radio input[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    transform: scale(0);
}
.form-field.radio input[type="radio"]:checked + label:after {
    opacity: 1;
    transform: scale(1);
}

.form-field.radio input[type="radio"].error + label {
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

/* ##### VALIDATE ERROR ##### */
input.error:not([disabled]), textarea.error:not([disabled]), select.error {border-color: var(--color-red); !important; box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);}

label.error {color: var(--color-red);
    font-size: 14px;
    font-weight: normal;
    margin: 2px 0 0 22px;
}

.hidden-submit {
    left: -10000px;
    opacity: 0;
    position: absolute;
    top: -10000px;
}

input[readonly="readonly"], input[readonly], input[disabled="disabled"], input[disabled], textarea[readonly="readonly"], textarea[readonly], textarea[disabled="disabled"], textarea[disabled], select[readonly="readonly"], select[readonly], select[disabled="disabled"], select[disabled] {
    background-color: #F6F6F6 !important;
    color: #989593 !important;
    border-color: #bcbec0 !important;
}

::-webkit-input-placeholder {color: #939a96;}
:-moz-placeholder {color: #939a96;}
::-moz-placeholder {color: #939a96;}
:-ms-input-placeholder {color: #939a96;}






@media all and (max-width: 991px) {
    /*.form-field input.big {font-size:16px; padding-left:15px; padding-right: 15px;}*/
    input, input.v-xl {font-size:16px !important; height: 40px !important; min-height: 40px !important; padding:10px;}
}