* {
    box-sizing: border-box;
}

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

body {
    min-height: 100vh;
    color: #e7e7e7;
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(40,65,58,.15),
            transparent 36%
        ),
        linear-gradient(
            rgba(3,8,8,.76),
            rgba(3,8,8,.76)
        ),
        repeating-linear-gradient(
            117deg,
            #101615 0,
            #101615 3px,
            #0b1110 3px,
            #0b1110 8px,
            #131817 8px,
            #131817 12px
        );

    background-attachment: fixed;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;

    background:
        linear-gradient(
            120deg,
            transparent 0 22%,
            rgba(0,0,0,.18) 22.1% 22.4%,
            transparent 22.5% 100%
        ),
        linear-gradient(
            58deg,
            transparent 0 68%,
            rgba(0,0,0,.17) 68.1% 68.4%,
            transparent 68.5% 100%
        );

    opacity: .8;
}

.page {
    width: min(1300px, calc(100% - 32px));
    margin: 8px auto 40px;
}

.topbar {
    min-height: 64px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 24px;

    border: 1px solid #24302d;
    border-radius: 14px;

    background:
        rgba(12,17,16,.94);

    box-shadow:
        0 8px 24px rgba(0,0,0,.28);
}

.brand {
    display: none;
}

.toplinks {
    margin-left: auto;

    display: flex;
    align-items: center;
    gap: 23px;

    font-size: 16px;
}

.toplinks a {
    color: #58a18d;
    text-decoration: none;

    transition:
        color .2s ease,
        text-shadow .2s ease;
}

.toplinks a:hover {
    color: #77c0aa;
    text-shadow:
        0 0 8px rgba(82,160,137,.4);
}

.content {
    margin-top: 8px;
}

.login-card {
    overflow: hidden;

    border: 1px solid #26322f;
    border-radius: 6px;

    background:
        rgba(8,12,12,.91);

    box-shadow:
        0 9px 30px rgba(0,0,0,.25);
}

.card-header {
    height: 54px;

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

    border-bottom:
        1px solid #25312e;

    background:
        rgba(13,18,17,.97);

    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
}

.card-body {
    padding:
        18px 16px 30px;
}

label {
    display: block;
    margin:
        1px 0 10px;

    color: #ffffff;
    font-size: 16px;
}

.input-row {
    width: 100%;
    height: 47px;

    display: flex;
    align-items: stretch;

    margin-bottom: 18px;

    border:
        1px solid #56605e;
    border-radius: 7px;

    overflow: hidden;

    background:
        rgba(18,19,19,.97);
}

.input-icon,
.eye {
    width: 42px;

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

    flex: 0 0 42px;

    border: 0;

    background:
        rgba(31,42,40,.96);

    color: #ffffff;
    font-size: 18px;
}

.input-icon {
    border-right:
        1px solid #43514e;
}

.eye {
    cursor: pointer;

    border-left:
        1px solid #43514e;
}

.input-row input {
    min-width: 0;
    flex: 1;

    padding:
        0 12px;

    border: 0;
    outline: 0;

    color: #e4e4e4;

    background:
        rgba(17,18,18,.98);

    font-size: 16px;
}

.input-row input::placeholder {
    color: #818989;
}

.input-row:focus-within {
    border-color: #6f9b8f;

    box-shadow:
        0 0 0 1px
        rgba(79,145,126,.15);
}

.captcha-wrap {
    display: flex;
    justify-content: center;

    margin:
        16px 0 22px;
}

.captcha-demo {
    width: 300px;
    height: 66px;

    display: flex;
    align-items: center;

    padding:
        8px 10px;

    border:
        1px solid #c9c9c9;

    background:
        #2b2b2b;

    color:
        #eeeeee;

    font-size:
        13px;
}

.captcha-check {
    width: 25px;
    height: 25px;

    flex: 0 0 25px;

    margin-right: 8px;

    border:
        2px solid #aeb3b5;
    border-radius: 2px;

    background:
        #262626;
}

.captcha-text {
    flex: 1;
}

.captcha-logo {
    width: 83px;

    display: flex;
    flex-direction: column;
    align-items: center;

    font-size:
        8px;
    line-height:
        1.1;
}

.captcha-logo strong {
    color:
        #f6821f;
    font-size:
        22px;
    line-height:
        18px;
}

.captcha-logo span {
    font-size:
        9px;
    font-weight:
        bold;
    letter-spacing:
        .7px;
}

.captcha-logo small {
    margin-top:
        3px;

    color:
        #ddd;

    font-size:
        7px;
}

.login-submit {
    text-align: center;
}

.login-submit button {
    min-height: 38px;

    padding:
        7px 14px;

    border:
        1px solid #3b6858;
    border-radius:
        6px;

    color:
        #efefef;

    background:
        #101514;

    font-size:
        16px;

    cursor:
        pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.login-submit button:hover {
    background:
        #16231f;

    border-color:
        #58927e;

    color:
        #ffffff;
}

@media (max-width: 720px) {

    .page {
        width:
            calc(100% - 16px);
    }

    .topbar {
        min-height:
            auto;

        padding:
            15px;
    }

    .toplinks {
        width:
            100%;

        justify-content:
            center;
        flex-wrap:
            wrap;

        gap:
            12px 18px;

        font-size:
            14px;
    }

    .card-body {
        padding:
            16px 10px 25px;
    }
}

/* ZCORE_AUTH_EXTRA_V1 */

.auth-large .card-body {
    padding-top: 30px;
}

.notice-warning {
    width: 100%;

    margin:
        0 0 18px;

    padding:
        18px 15px;

    border:
        1px solid #e9ab00;

    border-radius:
        7px;

    color:
        #111;

    background:
        linear-gradient(
            180deg,
            #ffc107,
            #e9ad00
        );

    font-size:
        16px;
}

.password-meta {
    margin:
        -12px 0 18px;

    color:
        #eeeeee;

    font-size:
        14px;
}

.password-status {
    display:
        inline-block;

    margin-left:
        6px;

    padding:
        2px 8px;

    border-radius:
        4px;

    color:
        #dddddd;

    background:
        #484848;

    font-size:
        12px;

    font-weight:
        700;
}

.password-status.ok {
    color:
        #ffffff;

    background:
        #20a442;
}

.email-help {
    margin-top:
        -12px;

    margin-bottom:
        44px;

    color:
        #eeeeee;

    font-size:
        14px;
}

.checks {
    margin:
        0 0 14px;

    padding-left:
        10px;
}

.check-line {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin:
        0 0 18px;

    color:
        #eeeeee;

    cursor:
        pointer;
}

.check-line input {
    width:
        16px;

    height:
        16px;

    accent-color:
        #538f7c;
}

.check-line a,
.recover-resend a {
    color:
        #ffffff;

    text-decoration:
        underline;
}

.check-line a:hover,
.recover-resend a:hover {
    color:
        #64ab96;
}

.recover-body {
    padding-top:
        18px;

    padding-bottom:
        24px;
}

.recover-input {
    margin-bottom:
        8px;
}

.recover-input input {
    padding-left:
        12px;
}

.recover-resend {
    margin-top:
        12px;

    text-align:
        center;

    color:
        #ffffff;

    font-size:
        14px;
}

/* /ZCORE_AUTH_EXTRA_V1 */