:root {
    --newport-dark-blue: #2860b4;
    --newport-dark-blue-text: #03014c;
    --newport-primary: #5381f8;
}

@font-face {
    font-family: Open-Sans;
    src: url(../fonts/Open_Sans/OpenSans-VariableFont.ttf) format("truetype");
}

#auth-main {
    background: var(--newport-dark-blue) !important;
    font-family: Open-Sans, sans-serif !important;
}

#auth-left-card {
    background: white;
    border-radius: 12px;
}

#auth #auth-left-container #auth-left .auth-title {
    font-size: 32px;
    color: var(--newport-dark-blue-text);
}

#auth {
    height: 100vh;
    overflow-x: hidden;
}

#auth #auth-right {
    height: 100%;
    background: url(../img/auth_bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#auth #auth-left {
    padding: 5rem;
}

#auth #auth-left .auth-title {
    font-size: 4rem;
    margin-bottom: 1rem;
}

#auth #auth-left .auth-subtitle {
    font-size: 1rem;
    line-height: 1;
    color: #a8aebb;
}

#auth #auth-left .auth-logo {
    margin-top: 4rem;
    margin-bottom: 3rem;
}

#auth #auth-left .auth-logo img {
    height: 3rem;
}

#auth form label {
    font-size: 16px !important;
}

#auth form input {
    font-size: 16px !important;
}

#auth form button {
    height: 65px;
    font-size: 16px;
}

#auth #login-button {
    background: var(--newport-primary);
    border: none;
}
#auth #forgot-password-button {
    color: var(--newport-primary);
}

@media screen and (max-width: 1399.9px) {
    #auth #auth-left {
        padding: 3rem;
    }
}

@media screen and (max-width: 767px) {
    #auth #auth-left {
        padding: 5rem;
    }
}

@media screen and (max-width: 576px) {
    #auth #auth-left {
        padding: 5rem 2rem;
    }
}

html[data-bs-theme="dark"] #auth-right {
    background: url(./png/4853433.png), linear-gradient(90deg, #2d499d, #3f5491);
}