#login-page {
    background: url('../images/loginBack.png') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}

#login-page .card:nth-child(1) {
    background: transparent !important;
    overflow: hidden;
    position: relative;
}

#login-page .card:nth-child(1)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--Gray-Not-White);
    opacity: 0.75;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: inherit;
    z-index: 1;
}

#login-page .card .card-body {
    position: relative;
    z-index: 1;
    background-color: transparent;
}

.dark-page #login-page .card::before {
    background: var(--Gray-Night);
}


#login-page div.card-body div.info-div::before,
#signup-page div.card-body div.info-div::before {
    content: "";
    position: absolute;
    top: -11px;
    left: -15px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    z-index: -1;
    background-color: var(--Secondary-Yellow-400);
}

.dark-page #login-page div.card-body div.info-div::before,
.dark-page #signup-page div.card-body div.info-div::before {
    content: "";
    position: absolute;
    top: -11px;
    left: -15px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    z-index: -1;
    background-color: var(--Secondary-Yellow-500);
}

.card-body .welcome-text {
    font-size: 24px;
    line-height: 32.74px;
    color: var(--Gray-Night);
}

.dark-page .card-body .welcome-text {
    color: var(--Gray-Not-White);
}

#login-page #loginForm,
#signup-page #signUpForm {
    background: var(--Light-Gradient);
    border: 1px solid var(--Light-Gradient);
    color: var(--Gray-Not-White);
    width: fit-content;
}

.dark-page #login-page #loginForm,
.dark-page #signup-page #signUpForm {
    background: var(--Dark-Gradient);
    border: 1px solid var(--Light-Gradient);
    color: var(--Gray-Not-White);
    width: fit-content;
}

#login-page .card-body .account-info,
#signup-page .card-body .account-info {
    color: var(--Gray-Gray-700);
}

.dark-page #login-page .card-body .account-info,
.dark-page #signup-page .card-body .account-info {
    color: var(--Gray-Gray-400);
}

#signup-page .login-image {
    background-image: url('../img/login/login-image-light.png');
    width: 344px;
    height: 352px;
    background-repeat: no-repeat;
    background-size: cover;
    left: 0;
}

.dark-page #login-page .login-image,
.dark-page #signup-page .login-image {
    background-image: url('../img/login/login-image-dark.png');
    width: 344px;
    height: 352px;
    background-repeat: no-repeat;
    background-size: cover;
    left: 0;
}

#login-page input {
    background: #F3F3F7 !important;
}

.dark-page #login-page input {
    background: var(--Gray-Night) !important;
}

/* MFA hint should remain red in both light and dark modes */
#login-page .mfa-hint {
    color: #ff002f !important;
}

.dark-page #login-page .mfa-hint {
    color: #ff002f !important;
}