/*********************/
/* confirmation page */
/*********************/
form {
    margin-top: 1.5rem;
    max-width: 24rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.invalid {
    background-color: var(--md-sys-color-error);
    color: var(--md-sys-color-on-error);
    border-color: red;
}
.invalid-pass::after {
    content: " - Password does not meet requirements";
    font-weight: bold;
}
.invalid-pass2::after {
    content: " - Passwords must match";
    font-weight: bold;
}

#loading {
    display: none;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100vw;
    height: 100%;
    text-align: center;
    /*background-color: rgba(192, 192, 192, 0.8);*/
    background-color: color-mix(in srgb, var(--md-sys-color-surface-dim), transparent 10%);
    background-image: url("https://www.kvcc.edu/acss/img/loading.svg");
    background-size: 6rem;
    background-repeat: no-repeat;
    background-position: center;
}
#loading > span {
    position: relative;
    top: -4rem;
}


/****************/
/* success page */
/****************/

.success-main {
    text-align: center
}
.success-main a > svg {
    height: 6rem;

    & {
        --svg-logo-text-pri: var(--md-sys-color-on-surface);
        --svg-logo-text-alt: #007fb0;
    }
    @media (prefers-color-scheme: dark) {
        --svg-logo-text-alt: var(--md-sys-color-primary);
    }
}