.hidden { display: none; }

.login-auth .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(128, 128, 128, 0.25);
}

#login-register {
    background: transparent;
}

#start-button, #next-button, #verify-button, #start-over-button,
#login-button, #register-button, #register-button-disabled,
#real-time-registration-button, #start-button-top {
    margin: 1rem 0;
    width: 100%;
    max-width: 200px;
}

#start-button,
#start-button-top,
#welcome-signin-open {
    width: auto;
    max-width: none;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    white-space: nowrap;
}

#register-button-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.exceeded-limit {
    font-size: var(--text-body, var(--f4, 0.875rem));
    color: var(--danger, #dc3545);
    padding: 1rem;
}

#send-new-verification {
    margin: 0.625rem 0;
}

#login-register.slide {
    animation: login-slide-in 0.5s forwards;
    -webkit-animation: login-slide-in 0.5s forwards;
}

@keyframes login-slide-in {
    100% { transform: translateX(-1%); }
}

@-webkit-keyframes login-slide-in {
    100% { -webkit-transform: translateX(-1%); }
}

.login-auth .no-button {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.login-auth #verification-instructions img,
.login-auth #registration-instructions img,
.login-auth #landing-page img {
    max-width: 100%;
    height: auto;
}

.login-auth h5 {
    color: var(--text-primary, var(--body-text, var(--txtcolor12)));
    font-size: var(--text-h3, var(--f3, 1.125rem));
}