#loginButton {
    position: relative;
    z-index: 1;
}

#loginButton:disabled {
    opacity: 0.85;
}

#loginButton .spinner-border,
#loginButton .button-text {
    position: relative;
    z-index: 2;
}

.was-validated #loginButton,
.was-validated #loginButton:disabled {
    background-color: var(--dd-primary) !important;
    border-color: var(--dd-primary) !important;
}

#loginButton:hover,
#loginButton:focus,
#loginButton:active,
#loginButton:focus-visible {
    background-color: var(--dd-primary-hover) !important;
    border-color: var(--dd-primary-hover) !important;
    color: white !important;
    outline: none !important;
}

#loginButton:active {
    background-color: var(--dd-primary-active) !important;
    border-color: var(--dd-primary-active) !important;
}

#loginButton,
#loginButton * {
    transition: none !important;
}

.valid-feedback,
.invalid-feedback {
    position: relative;
    z-index: 0;
    margin-bottom: 0.25rem;
}

#loginForm.submitting .valid-feedback,
#loginForm.submitting .invalid-feedback {
    display: none !important;
}

#loginForm.submitting .form-control.is-valid,
#loginForm.submitting .form-control.is-invalid,
#loginForm.submitting .form-select.is-valid,
#loginForm.submitting .form-select.is-invalid {
    border-color: var(--dd-outline) !important;
    background-image: none !important;
}

#loginButton .spinner-border {
    color: white;
    border-color: currentColor;
    border-right-color: transparent;
}