:root {
    --border-color: #9F9F9F;
    --valid-color: #267423;
    --input-background-error: #FFF9F9;
    --input-background-valid: #F3FDF3;
    --input-background-disabled: #EFEFEF;
}

/* Text input */
label.input-label {
    font: var(--semibold-font);
    color: var(--regular-color);
    text-align: left;
    letter-spacing: 0;
}
input.form-input {
    display: block;
    position: relative;
    width: 100%;
    font: var(--regular-font);
    box-sizing: border-box;
    line-height: 38px;
    height: 56px;
    border: 1px solid var(--border-color);
    background: var(--white-color);
    color: var(--secondary-text-color);
    padding: 8px 48px 8px 16px;
    -webkit-border-radius: 0;
    border-radius: 0;
    transition: all .2s;
    letter-spacing: 0;
    outline: none;
}
input.form-input:hover {
    border-width: 2px;
}
input.form-input:focus {
    border-color: var(--secondary-text-color);
    border-width: 2px;
}
input.form-input.has-value {
    border-color: var(--secondary-text-color);
    color: var(--regular-color);
}

input.form-input.error,
input.form-input.error:focus,
input.form-input.error:hover {
    color: var(--regular-color);
    background-color: var(--input-background-error);
    border: 2px solid var(--exception-color);
}

input.form-input.valid,
input.form-input.valid:focus,
input.form-input.valid:hover {
    color: var(--regular-color);
    background-color: var(--input-background-valid);
    border: 2px solid var(--valid-color);
}

input.form-input:disabled,
input.form-input[disabled] {
    color: var(--regular-color);
    background-color: var(--input-background-disabled);
    border-color: var(--secondary-text-color);
    cursor: default;
    pointer-events: none;
    opacity: 0.4;
}

/* Show/hide password button */
#password-icon-eye,
#confirm-password-icon-eye {
    position: absolute;
    float: right;
    height: 24px;
    width: 24px;
    bottom: 16px;
    right: 16px;
    cursor: pointer;
    z-index: 2;
    background: transparent;
    border: 0;
    padding: 0;
    appearance: none;
}
#password-icon-eye:focus,
#confirm-password-icon-eye:focus {
    outline: none;
}
#password-icon-eye:focus-visible,
#confirm-password-icon-eye:focus-visible {
    outline: 2px solid var(--regular-color);
}

.icon-eye:before {
    content: url('../../assets/shared/icon_eye.svg');
}
.icon-eye-slash:before {
    content: url('../../assets/shared/icon_eye_crossed.svg');
}

input[id=Password].form-input.valid ~ div > button.icon-eye:before,
input[id=ConfirmPassword].form-input.valid ~ div > button.icon-eye:before {
    content: url('../../assets/shared/icon_eye_success.svg');
}
input[id=Password].form-input.valid ~ div > button.icon-eye-slash:before,
input[id=ConfirmPassword].form-input.valid ~ div > button.icon-eye-slash:before {
    content: url('../../assets/shared/icon_eye_success_crossed.svg');
}

input[id=Password].form-input.error ~ div > button.icon-eye:before,
input[id=ConfirmPassword].form-input.error ~ div > button.icon-eye:before {
    content: url('../../assets/shared/icon_eye_warning.svg');
}
input[id=Password].form-input.error ~ div > button.icon-eye-slash:before,
input[id=ConfirmPassword].form-input.error ~ div > button.icon-eye-slash:before {
    content: url('../../assets/shared/icon_eye_warning_crossed.svg');
}

/* Submit button */
.btn-submit {
    font: var(--primary-font);
    color: var(--white-color);
    background-color: var(--link-text-color);
    padding: 8px 32px;
    text-align: center;
    width: 100%;
    outline: none;
    text-decoration: none;
    border: 0;
    letter-spacing: 0;
    cursor: pointer;
    box-shadow: 0 8px 0 -4px var(--link-active-color);
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
}
.btn-submit:hover {
    box-shadow: 0 6px 0 -4px var(--link-active-color);
    transform: translate(0, 2px);
    -webkit-transform: translate(0, 2px);
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
}
.btn-submit:active,
.btn-submit:focus {
    outline: none;
}
.btn-submit:active,
.btn-submit:focus-visible {
    box-shadow: 0 0 transparent;
    transform: translate(0, 4px);
    -webkit-transform: translate(0, 4px);
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
}
.btn-submit:focus-visible {
    outline: 2px solid var(--regular-color);
}