* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family:
        Vazirmatn,
        system-ui,
        -apple-system,
        sans-serif;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(99, 102, 241, .15),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(249, 115, 22, .10),
            transparent 30%
        ),
        #f4f7fc;

    color: #101a31;
}

.login-shell {
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 24px;
}

.login-card {
    width: min(
        920px,
        100%
    );

    min-height: 540px;

    display: grid;

    grid-template-columns:
        .88fr 1.12fr;

    direction: ltr;

    overflow: hidden;

    background: #fff;

    border:
        1px solid
        rgba(25, 42, 75, .08);

    border-radius: 28px;

    box-shadow:
        0 30px 80px
        rgba(20, 35, 70, .13);
}

.login-brand-wrap {
    direction: rtl;

    padding: 55px 45px;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    text-align: center;

    color: white;

    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(100, 116, 255, .28),
            transparent 38%
        ),
        linear-gradient(
            155deg,
            #101d3a,
            #091326
        );
}

.login-mark {
    width: 92px;
    height: 92px;

    display: grid;
    place-items: center;

    margin-bottom: 30px;

    border-radius: 25px;

    font-size: 44px;
    font-weight: 900;

    background:
        linear-gradient(
            145deg,
            #7666ff,
            #5945ea
        );

    box-shadow:
        0 20px 45px
        rgba(83, 70, 220, .38);
}

.login-brand {
    direction: ltr;

    font-size: 31px;
    font-weight: 900;

    letter-spacing: -.8px;
}

.login-brand span {
    color: #ff7b29;
}

.login-subtitle {
    margin-top: 8px;

    font-size: 12px;

    text-transform: uppercase;
    letter-spacing: 2px;

    color:
        rgba(255, 255, 255, .48);
}

.login-divider {
    display: none;
}

.login-content {
    direction: rtl;

    padding: 60px 64px;

    display: flex;
    flex-direction: column;

    justify-content: center;
}

.login-kicker {
    margin-bottom: 8px;

    font-size: 12px;
    font-weight: 800;

    color: #6557e8;
}

.login-content h1 {
    margin:
        0 0 10px;

    font-size: 35px;

    letter-spacing: -1px;
}

.login-description {
    margin:
        0 0 28px;

    color: #7b8498;

    line-height: 1.9;

    font-size: 14px;
}

.login-content form {
    display: grid;
    gap: 18px;
}

.login-content label {
    display: grid;
    gap: 8px;

    font-size: 13px;
    font-weight: 700;

    color: #2f3a51;
}

.login-content input {
    width: 100%;

    height: 52px;

    padding:
        0 16px;

    border:
        1px solid
        #dde3ee;

    border-radius: 14px;

    outline: none;

    background: #fafbfe;

    color: #141e35;

    font:
        inherit;

    direction: ltr;
    text-align: left;

    transition:
        border .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.login-content input:focus {
    background: #fff;

    border-color: #7467ed;

    box-shadow:
        0 0 0 4px
        rgba(116, 103, 237, .10);
}

.login-button {
    min-height: 54px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-top: 5px;

    border: 0;
    border-radius: 15px;

    cursor: pointer;

    background:
        linear-gradient(
            135deg,
            #6657ed,
            #5948df
        );

    color: white;

    font:
        inherit;

    font-size: 15px;
    font-weight: 800;

    text-decoration: none;

    box-shadow:
        0 14px 30px
        rgba(89, 72, 223, .24);
}

.login-button span {
    font-size: 21px;
}

.login-button:active {
    transform:
        translateY(1px);
}

.login-security {
    margin-top: 22px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    color: #8d96a8;

    font-size: 11px;
}

.security-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #2ec47a;

    box-shadow:
        0 0 0 4px
        rgba(46, 196, 122, .12);
}

.login-alert {
    margin-bottom: 20px;

    padding:
        12px 15px;

    border-radius: 12px;

    font-size: 12px;
    font-weight: 700;
}

.login-alert.error {
    color: #b53a43;

    background: #fff1f2;

    border:
        1px solid
        #ffd4d8;
}

.login-alert.success {
    color: #137044;

    background: #ecfdf3;

    border:
        1px solid
        #b7efd0;
}

.login-footer {
    margin-top: 18px;

    font-size: 10px;

    letter-spacing: 1.4px;

    color: #9aa3b4;
}

.session-success-card {
    direction: rtl;

    min-height: auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 55px;

    text-align: center;
}

.success-check {
    width: 72px;
    height: 72px;

    display: grid;
    place-items: center;

    margin-bottom: 16px;

    border-radius: 50%;

    background: #dcfce7;

    color: #16a34a;

    font-size: 36px;
    font-weight: 900;
}

.session-meta {
    margin:
        2px 0 25px;

    color: #8992a3;

    direction: ltr;
}

.session-meta span {
    padding:
        0 8px;
}

.link-button {
    width: min(
        300px,
        100%
    );
}

.phase-note {
    margin-top: 20px;

    color: #929bad;

    font-size: 11px;
}


@media (
    max-width: 720px
) {

    .login-shell {
        padding: 15px;
    }

    .login-card {
        display: block;

        min-height: 0;

        border-radius: 24px;
    }

    .login-brand-wrap {
        padding:
            30px 20px 27px;
    }

    .login-mark {
        width: 64px;
        height: 64px;

        margin-bottom: 18px;

        border-radius: 19px;

        font-size: 31px;
    }

    .login-brand {
        font-size: 25px;
    }

    .login-content {
        padding:
            32px 24px 30px;
    }

    .login-content h1 {
        font-size: 29px;
    }

    .login-description {
        margin-bottom: 23px;
    }

    .session-success-card {
        padding:
            42px 24px;
    }

}

/* NETBLOCKS LOGIN LOGO V2 */

.login-mark.login-mark-logo {
    width: 135px;
    height: 135px;
    padding: 0;
    margin-bottom: 24px;

    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0;
}

.login-mark-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 720px) {
    .login-mark.login-mark-logo {
        width: 92px;
        height: 92px;
        margin-bottom: 16px;
    }
}


/* ========================================================
   NETBLOCKS GOLD LOGIN BUTTON V1
   ======================================================== */

.login-button {
    background:
        linear-gradient(
            135deg,
            #172744,
            #0a162b
        ) !important;

    border:
        1px solid
        rgba(219, 172, 72, .62) !important;

    color: #ffffff !important;

    box-shadow:
        0 14px 32px
        rgba(4, 15, 34, .24),
        0 0 0 1px
        rgba(219, 172, 72, .05),
        inset 0 1px 0
        rgba(255, 255, 255, .06) !important;

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}

.login-button:hover {
    background:
        linear-gradient(
            135deg,
            #1d3154,
            #0d1c36
        ) !important;

    border-color:
        rgba(236, 190, 92, .95) !important;

    box-shadow:
        0 18px 38px
        rgba(4, 15, 34, .30),
        0 0 20px
        rgba(215, 166, 63, .10),
        inset 0 1px 0
        rgba(255, 255, 255, .08) !important;

    transform:
        translateY(-1px);
}

.login-button:active {
    transform:
        translateY(1px);

    box-shadow:
        0 8px 18px
        rgba(4, 15, 34, .22) !important;
}

.login-button span {
    color: #dcb04f;
}

/* FINAL LOGIN BRAND POLISH */

.login-kicker {
    color: #c99c45 !important;
}