/* =========================================================
   Cencraft Support
   Staff Login
   ========================================================= */

:root {
    --cc-bg: #070b12;
    --cc-panel: #0d1520;
    --cc-border: rgba(255, 255, 255, 0.08);
    --cc-text: #f4f8fb;
    --cc-muted: #8fa1b5;
    --cc-cyan: #45d3ff;
    --cc-cyan-bright: #70e0ff;
}

html,
body#loginBody {
    min-height: 100%;
}

body#loginBody {
    margin: 0;

    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(69, 211, 255, 0.13),
            transparent 34%
        ),
        #070b12 !important;

    color: var(--cc-text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}

#brickwall {
    display: none !important;
}

#loginBox {
    background: rgba(13, 21, 32, 0.96) !important;

    border: 1px solid var(--cc-border) !important;
    border-radius: 16px !important;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.38),
        0 0 60px rgba(69, 211, 255, 0.035) !important;
}

#blur,
#background {
    display: none !important;
}

#logo {
    padding-top: 20px;
}

#logo img {
    max-width: 260px;
    max-height: 90px;
}

#login-message {
    color: var(--cc-text) !important;
    text-align: center;
}

.banner,
.banner small {
    color: var(--cc-muted) !important;
    text-align: center;
}

.external-auth {
    padding: 10px 25px 20px;
    text-align: center;
}

.external-auth a {
    display: flex !important;

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

    width: 100%;
    min-height: 48px;

    padding: 0 18px !important;

    box-sizing: border-box;

    background: linear-gradient(
        135deg,
        var(--cc-cyan),
        var(--cc-cyan-bright)
    ) !important;

    border: 0 !important;
    border-radius: 9px !important;

    color: #061017 !important;

    font-size: 15px !important;
    font-weight: 750 !important;

    text-decoration: none !important;

    box-shadow:
        0 8px 25px rgba(69, 211, 255, 0.16);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.external-auth a:hover {
    transform: translateY(-1px);

    box-shadow:
        0 12px 30px rgba(69, 211, 255, 0.24);
}

#company {
    border-top: 1px solid var(--cc-border) !important;
    color: var(--cc-muted) !important;
}

#company .content {
    color: var(--cc-muted) !important;
}

#poweredBy {
    opacity: 0.45;
}

#poweredBy,
#poweredBy a {
    color: var(--cc-muted) !important;
}

@media (max-width: 600px) {

    #loginBox {
        width: calc(100% - 28px) !important;
        margin-left: 14px !important;
        margin-right: 14px !important;

        box-sizing: border-box;
    }

    .external-auth {
        padding-left: 18px;
        padding-right: 18px;
    }
}