/* Styles for the static sign-in pages (AccountLayout), replacing behaviour site.min.css expected jquery to drive. */

/* cross-fade between the sign-in pages (including form posts) instead of flashing a blank page. browsers without
   cross-document view transitions ignore this. every AccountLayout page opts in, which both pages need to. */
@view-transition {
    navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}

/* float the label above inputs that have a value (site.min.css did this with a "valid" class set by jquery).
   the inputs have placeholder=" " so :placeholder-shown means "empty"; this also covers browser autofill. */
.loginWrapper .row .loginContainer form .input-group input:not(:placeholder-shown) ~ label {
    transform: translate(0, -100%);
    opacity: 1;
    cursor: default;
    pointer-events: none;
}

.caps-lock-warning {
    margin: 0.4rem 0 0 1.6rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: #b00020;
}

/* an always present live region that account.js fills in while caps lock is on. it must stay rendered
   (not display: none) for screen readers to announce it, so it only collapses its margin while empty. */
.caps-lock-warning:empty {
    margin: 0;
}

/* "remember me" warning, previously toggled by alert.js */
.checkbox:has(input:checked) + .sharedPC {
    max-height: 40px;
}

.field-validation-message {
    padding-top: 5px;
}

.refreshBtn {
    color: #00788f !important;
}

.signout-frame {
    display: none;
}