:root {
    --primary: #2f6df6;
    --primary-light: #4c8cff;
    --bg-dark: #030b1a;
    --glass: rgba(8, 25, 56, .72);
    --border: rgba(255, 255, 255, .12);
    --text: #ffffff;
    --muted: #b7c4dc;
    --asset-login-background: url('../login-bg.jpg');
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, Segoe UI, sans-serif;
    color: var(--text);
    background: url(../emerytas-bg.png) center center / cover no-repeat;
    background-size: cover;
    background-position: bottom;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(59, 130, 246, .15), transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(0, 195, 255, .12), transparent 35%);
    pointer-events: none;
}

nav {
    background: transparent;
    border: none;
}

main.container {
    max-width: 1400px;
}

.login-wrapper {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px;
}

.login-card {

    width: 100%;
    max-width: 460px;

    background: rgb(212 204 186 / 35%);
    backdrop-filter: blur(22px);

    border: 1px solid var(--border);

    border-radius: 28px;

    padding: 30px;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .45),
        0 0 80px rgba(47, 109, 246, .12);
}

.logo {
    text-align: center;
    margin-bottom: 15px;
}

.logo img {
    width: min(310px, 80%);
    height: auto;
}

.product {
    text-align: center;
    margin-bottom: 15px;
}

.product h2 {
    margin: 0;
    font-size: clamp(2rem,
            4vw,
            2.8rem);

    letter-spacing: 10px;
    font-weight: 300;
}

.product p {
    margin-top: 0px;
    color: #4a4534;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: .75rem;
    margin-bottom: 0;
}

label {
    color: white;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#loginForm {
    margin-bottom: 9px;
}

#loginForm>label {
    color: #212476;
}

#loginForm>input {
    margin: 10px;
    width: 390px;
}

input,
select {

    width: 390px;

    height: 54px;

    padding: 0 10px;

    margin-top: 0;
    margin-bottom: 0;

    background:
        rgba(255,
            255,
            255,
            .04) !important;

    border:
        1px solid rgba(255,
            255,
            255,
            .10) !important;

    color: #24333e !important;

    border-radius: 8px !important;
    font-size: .70rem;
    padding: 10px !important;
    height: auto !important;
}

input::placeholder {
    color: #94a3b8;
}

.remember {
    margin: 5px 0;
}

.remember label {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 13px;

    color: #212476;
}

.signin-btn {
    width: 390px;
    height: 56px;
    border: none;
    border-radius: 8px;
    font-weight: 600;

    /*background:
    linear-gradient(
        90deg,
        #2563eb,
        #3b82f6
    );*/
    background: linear-gradient(0deg, #7d5b26, #c29855, #cdae7c);
}

.sso-btn {
    width: 390px;
    height: 56px;
    margin-top: 14px;
    font-size: .7rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .12);
    color: #212476;
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    padding-top: 14px;
    text-align: center;
}

.signin-btn,
.sso-btn {

    width: 100%;
    height: 40px;
    font-size: 15px;
    font-weight: 400;
    transition: .25s;
    line-height: .7rem;
    margin-top: 10px;
}

.signin-btn:hover {
    transform: translateY(-2px);
}

.sso-btn:hover {
    background:
        rgba(255,
            255,
            255,
            .05);
}

.separator {
    text-align: center;
    color: #212476;
    margin: 5px 0;
    font-size: 0.7rem;
}

.security-note {
    text-align: center;
    margin-top: 10px;
    color: #e4e4e4;
    font-size: .7rem;
    font-weight: 400;
    line-height: auto;
}

.security-note strong {
    display: block;
    color: #212476;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.environment {

    display: inline-block;

    margin-bottom: 24px;

    padding: 6px 12px;

    border-radius: 999px;

    background:
        rgba(37,
            99,
            235,
            .15);

    color: #8bb8ff;

    font-size: .75rem;

    letter-spacing: 2px;
}

.slogenBasicText {
    color: #ffffff;
}

.slogenText {
    color: #2563eb;
}

.alert-error {
    color: #ffffff;
    font-size: 0.7rem;
    text-align: center;

}



@media (max-width:768px) {

    body {
        overflow: auto;
    }

    .login-wrapper {
        padding: 20px;
    }

    .login-card {

        max-width: 100%;

        padding: 32px 24px;

        border-radius: 20px;
    }

    .product h2 {

        letter-spacing: 5px;

        font-size: 2rem;
    }

    .security-note {

        font-size: .85rem;
    }
}

/* Responsive enterprise login refinements. */
main.container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.login-wrapper {
    width: 100%;
    min-height: 100svh;
    padding: clamp(20px, 5vw, 56px);
}

.login-card {
    width: min(100%, 480px);
    padding: clamp(28px, 5vw, 42px);
    background: rgb(212 204 186 / 35%) var(--asset-login-background) center / cover no-repeat;
}

#loginForm>label {
    display: block;
    margin: 0 0 7px;
}

#loginForm>input,
#loginForm input,
.signin-btn,
.sso-btn {
    width: 100%;
    max-width: 100%;
    background-color: #f9f7ed4a !important;
}

#loginForm>input {
    min-height: 50px;
    margin: 0 0 16px;
    padding: 13px 14px !important;
    font-size: 14px;
    background-color: #f9f7edbd !important;
}

#loginForm>input:focus {
    border-color: #ac9c6d !important;
    box-shadow: 0 0 0 4px #c6b9945e;
    outline: 0;
}

.remember {
    margin: 0 0 12px;
}

.remember label {
    min-height: 28px;
    text-transform: none;
}

.signin-btn,
.sso-btn {
    min-height: 50px;
    height: 50px;
    border-radius: 10px;
}

.sso-btn {
    padding-top: 16px;
}

.security-note {
    margin-top: 18px;
    line-height: 1.55;
}

@media (max-width: 640px) {
    body {
        background-position: 58% center;
    }

    .login-wrapper {
        align-items: flex-start;
        padding: 18px 14px;
    }

    .login-card {
        margin: auto 0;
        padding: 28px 20px;
        border-radius: 20px;
    }

    .logo {
        margin-bottom: 18px;
    }

    .logo img {
        width: min(340px, 72vw);
    }

    .product {
        margin-bottom: 22px;
    }

    .product p {
        font-size: 15px;
        letter-spacing: 1.5px;
        line-height: 1.55;
    }

    .security-note {
        font-size: 13px;
    }
}

@media (max-width: 360px) {
    .login-wrapper {
        padding: 12px;
    }

    .login-card {
        padding: 24px 16px;
    }

    #loginForm>input {
        min-height: 48px;
        margin-bottom: 13px;
    }
}