@charset "UTF-8";

body.loaded {
    background: conic-gradient(
        /* from 0turn at 50% 0, */ var(--new-main-bg) 60deg,
        var(--new-main-color) 120deg,
        var(--new-main-btn) 180deg,
        var(--new-main-color) 240deg,
        var(--new-main-bg) 300deg
    );
}

.pwdlogin,
.login-types-ct {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    display: flex;
    flex-direction: column;
    transition: max-height 1s ease, opacity 0.5s ease;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
}

.pwdlogin.active,
.login-types-ct.active {
    max-height: 600px;
    opacity: 1;
    transition-delay: opacity 400ms;
}

.pwdlogin {
    padding: 0 5px;
}

.login-types-ct .row {
    display: flex;
    gap: 40px;
    padding: 5px;
}

.login-types-ct .login-type {
    flex: 1;
}

.login-types-ct a {
    justify-content: flex-end;
}

.auth {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    place-items: center;
}

.auth-container {
    width: 450px;
    height: fit-content;
}

.auth-container .card {
    background-color: var(--new-main-bg);
    box-shadow: none;
}

.auth-container .auth-header {
    text-align: center;
    border-bottom: 1px solid var(--new-card-header-divider);
}

.auth-container .auth-title {
    display: flex;
    justify-content: center;
    gap: 5px;
    color: var(--new-main-text-color); /* #97A4B1; */
    padding: 20px;
    line-height: 30px;
    font-size: 40px;
    font-weight: 200;
    letter-spacing: -2px;
    font-variant: small-caps;
    margin: 0;
    height: auto;
}

.auth-title .logo {
    height: 3.5rem;
}

.auth-title .login-logo-text {
    display: flex;
    align-items: center;
    text-wrap: nowrap;
}

.auth-container .auth-content {
    padding: 30px 25px;
}

.auth-content #loginform {
    display: grid;
}

.btn {
    font-variant: small-caps;
}

.btn.type1,
.btn.type2,
.btn.type3,
.btn.type4,
.btn.type5,
.btn.type6,
.btn.white,
.btn.green {
    margin: 20px 0px;
    padding: 20px 0px;
}

.login-controls-ct {
    display: flex;
    justify-content: space-between;
    font-variant: small-caps;
}

.login-types-ct a,
.login-controls-ct a {
    color: var(--new-placeholder);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    font-variant: small-caps;
}

.forgot-error-ct {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

#forgot-btn {
    flex: 1;
    line-height: 2rem;
    cursor: pointer;
    color: var(--new-placeholder);
}

#errormsg {
    flex: 2;
    color: var(--new-placeholder);
    background-color: var(--new-error-color);
    padding: 5px;
    border-radius: 5px;
}

#errormsg:empty {
    padding: 0;
}

/***************************
*	MEDIA QUERIES
****************************/

@media (max-width: 767px) {
    .auth-container {
        width: 100%;
        -webkit-transform: inherit;
        transform: inherit;
        margin: 0;
    }

    .auth-container .auth-content {
        padding: 30px 25px;
    }

    .login-types-ct .row {
        gap: 10px;
    }

    .btn.type1,
    .btn.type2,
    .btn.type3,
    .btn.type4,
    .btn.type5,
    .btn.type6,
    .btn.white,
    .btn.green {
        margin: 20px 5px;
        padding: 20px 5px;
    }
}