/*-------------------------------------------*\
   Styles specific for "Password Reset" form

   Table of contents:
    
    - Body
    - Header
    - Icons
    - Password toggle
    - Validation requirements table
    - Password reset form
    - Colors
\*-------------------------------------------*/

/*-------------------------------------------*\
    Body
\*-------------------------------------------*/

html, body, .site-page {
    min-height: 100vh; 
}

.site-page {
    background-size: cover !important;
}

/*-------------------------------------------*\
    Header
\*-------------------------------------------*/

/* On screens that are 440px or less, shrink the logo 
in order to avoid overlapping with the Sign-In button */
@media screen and (max-width: 440px) {
    .logo.nav-logo {
        width: 100%;
        background-size: 100% auto;
    }
}

/* Header "back to sign in" button */
.btn-outline-secondary#return-button, .btn-outline-secondary#return-button.disabled, .btn-outline-secondary#return-button:disabled {
    color: var(--header-color) !important;
    border-color: var(--header-color) !important;
    fill: var(--header-color) !important;
}

#return-icon, #return-icon i {
    color: var(--header-color) !important;
}

/*-------------------------------------------*\
    Password toggle
\*-------------------------------------------*/

.toggle-password-icon {
    width: 17px;
    height: 17px;
    position: absolute;
    opacity: .35;
    right: 0;
    top: calc(50% - 10px);
    margin-right: 13px;
    z-index: 1;
    cursor: pointer;
}

.toggle-password-icon.icon-utils-hide {
    opacity: .55;
}

.form__group.dirty.invalid .toggle-password-icon,
.form__group.dirty.invalid .toggle-password-icon {
    top: calc(50% - 21px);  
}

/*-------------------------------------------*\
    Validation requirements table
\*-------------------------------------------*/

#validation-markers li.validation-passed,
#validation-markers li.validation-passed i:before,
#validation-markers li.validation-passed i:before {
    color: #8bc34a;
}

#validation-markers li.validation-failed,
#validation-markers li.validation-failed i:before,
#validation-markers li.validation-failed i:before {
    color: #ff5722;
}


/*-------------------------------------------*\
    Password reset form
\*-------------------------------------------*/

.password-reset-error-message {
    display: none;
    position: relative;
    top: -4px;
}


/**
 * Error messages inside form groups
 */

.form__group:not(.dirty) .error-message, .form__group.dirty.valid .error-message { 
    display: none;
}

.form__group.dirty.invalid .error-message { 
    display: block;
}


/**
 * Top, left and right borders of a "valid" input inside of a "dirty" form group
 */

.form__group.dirty.valid input {
    border-bottom-color: #8bc34a;
    border-left-color: #8bc34a;
    border-right-color: #8bc34a;
    color: #8bc34a;
}

/**
 * Part of the top border of the input of a dirty, valid but non-active form 
 * group. It's visible only when the field has been edited, then emptied, but
 * it is now considered "dirty" and have a valid/invalid color. So this is a
 * top field border where normally the label would sit, but once the field 
 * gets empty, the label goes down as a placeholder and it's former place has 
 * a default grey border, which this style recolors.
 */

.form__group.dirty.valid:not(.form__group--active) .form__control {
    border-top-color: #8bc34a;
}

/**
 * Text of a label of a valid "dirty" form group
 */

.form__group.dirty.valid .form__label {
    color: #8bc34a;
}

/**
 * Top border of a label of a valid "dirty" form group
 */

.form__group.dirty.valid .form__label:before,
.form__group.dirty.valid .form__label:after {
    border-top-color: #8bc34a;
}

/**
 * Top, left and right borders of an "invalid" input inside of a "dirty" form group
 */

.form__group.dirty.invalid input {
    border-bottom-color: #ff5722;
    border-left-color: #ff5722;
    border-right-color: #ff5722;
    color: #ff5722;
}

/**
 * Part of the border of an empty input of a "dirty", 
 * invalid and non-active form group.
 */

.form__group.dirty.invalid:not(.form__group--active) .form__control {
    border-top-color: #ff5722;
}

/**
 * Text of a label of an invalid "dirty" form group
 */

.form__group.dirty.invalid .form__label {
    color: #ff5722;
}

/**
 * Top border of a label of an invalid "dirty" form group
 */

.form__group.dirty.invalid .form__label:before,
.form__group.dirty.invalid .form__label:after {
    border-top-color: #ff5722;
}