.form-field {
    position: relative;
}
.form-field input, .form-field textarea {
    width: 100%;
    padding: 16px;
    border: 1px solid var(--grey--grey80, #D7D7D7);
    border-radius: 8px;
    font-size: 16px;
    background: var(--white--white100, #FFF);
    color: var(--black--black10, #222324);
    outline: none;
    box-sizing: border-box;
    resize: vertical;
    transition: border-color 0.2s;
}
.form-field input:focus, .form-field textarea:focus {
    border-color: var(--azure--azure40, #005FF9);
}
.input-holder {
    position: relative;
}
.input-holder--password {
    position: relative;
}
.input-holder--password .input {
    padding-right: 44px !important;
}
.input-holder--password .password-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    color: var(--grey--grey60, #ABABAB);
    z-index: 2;
    transition: opacity 0.15s;
}
.eye-on {
    display: none;
}
.eye-off {
    display: flex;
    align-items: center;
}
.form-field.has-error .input-holder:after {
    content: "\f06a";
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    font-family: "FontAwesome";
    font-size: 18px;
    color: rgba(179, 38, 30, 1);
    pointer-events: none;
}
.form-field.has-error .input-holder .input {
    border-color: var(--red--red50, #DC362E);
}
.help-block {
    display: none;
    margin-top: 4px;
}
.has-error .help-block, .has-error .control-label,
.has-error .radio, .has-error .checkbox,
.has-error .radio-inline, .has-error .checkbox-inline,
.has-error.radio label, .has-error.checkbox label,
.has-error.radio-inline label, .has-error.checkbox-inline label {
    display: block;
    color: var(--red--red50, #DC362E);
    transition: max-height .2s ease;
}
/* в состоянии ошибки прячем кнопку — видна иконка ::after */
.form-field.has-error .input-holder--password .password-toggle {
    opacity: 0;
    pointer-events: none;
}
/* при ховере — прячем ::after, показываем кнопку */
.form-field.has-error .input-holder--password:hover::after {
    display: none;
}
.form-field.has-error .input-holder--password:hover .password-toggle {
    opacity: 1;
    pointer-events: auto;
}
.has-success .help-block, .has-success .control-label,
.has-success .radio, .has-success .checkbox,
.has-success .radio-inline, .has-success .checkbox-inline,
.has-success.radio label, .has-success.checkbox label,
.has-success.radio-inline label, .has-success.checkbox-inline label {
    color: inherit;
}