@charset "UTF-8";

.js-form {
    position: relative;
}

.js-form_input {
    border: 1px solid #DCE2E6 !important;
}

.js-form_input--error {
    border-color: #EB5757 !important;
}

input[type="text"].js-form_input--error,
input[type="email"].js-form_input--error,
input[type="number"].js-form_input--error,
input[type="password"].js-form_input--error,
input[type="url"].js-form_input--error,
input[type="tel"].js-form_input--error {
    background: url(../img/formValidation-js/icon_error.svg) no-repeat scroll right 15px center !important;
}

.js-form_input--success {
    border-color: #27AE60 !important;
}

input[type="text"].js-form_input--success,
input[type="email"].js-form_input--success,
input[type="number"].js-form_input--success,
input[type="password"].js-form_input--success,
input[type="url"].js-form_input--success,
input[type="tel"].js-form_input--success {
    background: url(../img/formValidation-js/icon_success.svg) no-repeat scroll right 15px center !important;
}

textarea.js-form_input--success {
    background: url(../img/formValidation-js/icon_success.svg) no-repeat scroll right 15px center !important;
}

.js-form__popup {
    width: auto;
    max-width: 200px;
    font-size: 12px;
    line-height: 14px;
    color: #fff;
    background-color: #EB5757;
    padding: 4px 5px;

    position: absolute;
    right: initial;
    left: 0;
    top: 0;
    opacity: 0;
    z-index: 50;
}

.js-form--checkbox input[type="checkbox"]+span {
    border: 1px solid #172949 !important;
}

.js-form--checkbox input[type="checkbox"].js-form_input--success:checked+span {
    border-color: #27AE60 !important;
    background: #27AE60 url(../img/formValidation-js/icon_success-w.svg) no-repeat scroll center center !important;
}

.js-form--checkbox input[type="checkbox"].js-form_input--error+span {
    border-color: #EB5757 !important;
}

.js-form--checkbox input[type="checkbox"].invalid:not(.js-form_input--error)+span {
    opacity: 0.35;
}

label.js-form--radio.js-form_input--error {
    border-color: #EB5757 !important;
}

label.js-form--radio.js-form_input--success {
    border-color: #27AE60 !important;
}

label.js-form--radio.js-form_input--success span {
    border-color: #27AE60 !important;
    background: #27AE60 url(../img/formValidation-js/icon_success-w.svg) no-repeat scroll center center !important;
}

label.js-form--radio>.js-form_input--success {
    background: transparent !important;
}