/* TECHHOUSE CENTRAL - LOGIN FINAL */

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    width: 100%;
    min-height: 100%;
    background: #01050a;
}

/* FUNDO */
html body #loginView {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100vh !important;

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

    padding: 18px !important;
    overflow-y: auto !important;

    background:
        radial-gradient(
            ellipse at 50% 45%,
            rgba(0, 105, 190, .12) 0,
            rgba(0, 35, 70, .06) 32%,
            transparent 62%
        ),
        linear-gradient(
            125deg,
            transparent 0 14%,
            rgba(0, 115, 255, .025) 14.2% 14.7%,
            transparent 14.9% 85%,
            rgba(0, 115, 255, .025) 85.2% 85.7%,
            transparent 86%
        ),
        #01050a !important;
}

html body #loginView::before,
html body #loginView::after {
    content: none !important;
    display: none !important;
}

/* CARD VERTICAL */
html body #loginView .th-login-glass {
    position: relative !important;
    inset: auto !important;
    transform: none !important;

    display: block !important;

    width: min(500px, 94vw) !important;
    max-width: 500px !important;
    height: auto !important;
    min-height: 0 !important;

    margin: auto !important;
    padding: 26px 34px 18px !important;

    background:
        linear-gradient(
            145deg,
            rgba(7, 24, 43, .98),
            rgba(1, 12, 25, .99)
        ) !important;

    border: 1px solid rgba(52, 174, 255, .90) !important;
    border-radius: 25px !important;

    box-shadow:
        0 25px 70px rgba(0,0,0,.72),
        0 0 28px rgba(0,119,255,.16),
        inset 0 0 32px rgba(0,98,190,.08),
        inset 0 1px 0 rgba(255,255,255,.10) !important;

    overflow: hidden !important;
}

/* brilho superior do card */
html body #loginView .th-login-glass::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 12% !important;
    width: 76% !important;
    height: 1px !important;

    background: linear-gradient(
        90deg,
        transparent,
        #4ec3ff,
        transparent
    ) !important;

    box-shadow: 0 0 14px #168fff !important;
}

/* CABEÇALHO */
html body #loginView .th-login-brand,
html body #loginView .brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

html body #loginView .th-login-logo {
    display: block !important;
    position: static !important;

    width: min(300px, 72vw) !important;
    max-width: 300px !important;
    height: auto !important;
    max-height: 145px !important;

    object-fit: contain !important;
    margin: 0 auto 4px !important;
}

html body #loginView .th-central-name {
    display: block !important;
    position: static !important;

    color: #fff !important;
    text-align: center !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .22em !important;

    margin: 2px 0 16px !important;
}

/* DIVISOR */
html body #loginView .th-login-divider {
    display: block !important;
    position: static !important;

    width: 74% !important;
    height: 1px !important;

    margin: 0 auto 17px !important;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(65,170,255,.42),
        transparent
    ) !important;

    border: 0 !important;
}

/* CONTEÚDO */
html body #loginView .th-login-content {
    display: block !important;
    position: static !important;

    background: none !important;
    border: 0 !important;
    box-shadow: none !important;

    padding: 0 !important;
    margin: 0 !important;
}

html body #loginView .th-welcome-kicker {
    display: none !important;
}

html body #loginView .th-login-content h1 {
    display: block !important;
    position: static !important;

    margin: 0 0 2px !important;

    color: #fff !important;
    text-align: center !important;

    font-size: 31px !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    letter-spacing: -.02em !important;
}

html body #loginView .th-login-subtitle {
    display: block !important;
    position: static !important;

    margin: 0 0 17px !important;

    color: #a9c0d4 !important;
    text-align: center !important;

    font-size: 13px !important;
}

/* FORMULÁRIO */
html body #loginView #loginForm {
    display: block !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;

    width: 100% !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}

html body #loginView .th-field {
    display: block !important;
    position: static !important;

    margin: 0 0 11px !important;
    padding: 0 !important;
}

html body #loginView .th-field label {
    display: none !important;
}

/* CAMPOS */
html body #loginView .th-input-shell {
    display: flex !important;
    align-items: center !important;

    position: relative !important;

    width: 100% !important;
    height: 48px !important;

    margin: 0 !important;
    padding: 0 14px !important;

    border: 1px solid rgba(69, 179, 255, .72) !important;
    border-radius: 9px !important;

    background:
        linear-gradient(
            180deg,
            rgba(8,25,42,.96),
            rgba(1,13,26,.98)
        ) !important;

    box-shadow:
        inset 0 0 16px rgba(0,0,0,.24),
        0 0 0 rgba(0,0,0,0) !important;
}

html body #loginView .th-input-shell:focus-within {
    border-color: #4fc5ff !important;

    box-shadow:
        0 0 0 2px rgba(35,169,255,.12),
        0 0 16px rgba(0,140,255,.16) !important;
}

html body #loginView .th-input-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 26px !important;
    flex: 0 0 26px !important;

    color: #50c6ff !important;
    font-size: 14px !important;

    margin-right: 9px !important;
}

html body #loginView .th-input-shell input {
    display: block !important;
    position: static !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

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

    color: #fff !important;
    font-size: 14px !important;
}

html body #loginView .th-input-shell input::placeholder {
    color: #8ca3b8 !important;
    opacity: 1 !important;
}

/* BOTÃO */
html body #loginView .th-enter-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    position: static !important;

    width: 100% !important;
    height: 49px !important;

    margin: 9px 0 0 !important;
    padding: 0 18px !important;

    border: 1px solid #56c9ff !important;
    border-radius: 9px !important;

    background:
        linear-gradient(
            180deg,
            #159eff 0%,
            #0672e8 100%
        ) !important;

    box-shadow:
        0 0 20px rgba(0,132,255,.32),
        inset 0 1px 0 rgba(255,255,255,.32) !important;

    color: #fff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: .03em !important;

    cursor: pointer !important;
}

html body #loginView .th-enter-button:hover {
    filter: brightness(1.08) !important;
    box-shadow:
        0 0 27px rgba(0,153,255,.45),
        inset 0 1px 0 rgba(255,255,255,.38) !important;
}

/* NÃO MOSTRAR 2FA NA PRIMEIRA TELA */
html body #loginView .th-auth-badge,
html body #loginView .th-login-security-note,
html body #loginView #thSecurityButton {
    display: none !important;
}

/* RODAPÉ */
html body #loginView .th-login-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 7px !important;

    position: static !important;

    margin: 17px 0 0 !important;
    padding: 13px 0 0 !important;

    border-top: 1px solid rgba(70,164,225,.25) !important;

    color: #8199ac !important;
    text-align: center !important;
    font-size: 10px !important;
}

html body #loginView .th-login-footer a {
    color: #21c1ff !important;
    text-decoration: none !important;
    font-weight: 700 !important;
}

/* 2FA - SOMENTE DEPOIS DO LOGIN */
#thLogin2FA {
    align-items: center !important;
    justify-content: center !important;

    padding: 18px !important;

    background:
        radial-gradient(
            ellipse at 50% 45%,
            rgba(0,105,190,.13),
            transparent 55%
        ),
        rgba(1,5,10,.96) !important;
}

#thLogin2FA .th-login2fa-card {
    width: min(440px, 94vw) !important;
    max-width: 440px !important;

    padding: 30px 28px 24px !important;

    border: 1px solid rgba(52,174,255,.85) !important;
    border-radius: 22px !important;

    background:
        linear-gradient(
            145deg,
            rgba(7,24,43,.99),
            rgba(1,12,25,.99)
        ) !important;

    box-shadow:
        0 25px 70px rgba(0,0,0,.72),
        0 0 28px rgba(0,119,255,.18) !important;
}

#thLogin2FA .th-login2fa-card h2 {
    color: #fff !important;
}

#thLogin2FA .th-login2fa-card p {
    color: #a9c0d4 !important;
}

/* MOBILE */
@media (max-width: 600px) {

    html body #loginView {
        padding: 12px !important;
        align-items: center !important;
    }

    html body #loginView .th-login-glass {
        width: min(94vw, 430px) !important;
        padding: 22px 20px 16px !important;
        border-radius: 21px !important;
    }

    html body #loginView .th-login-logo {
        width: min(260px, 72vw) !important;
        max-height: 115px !important;
    }

    html body #loginView .th-central-name {
        font-size: 12px !important;
        letter-spacing: .16em !important;
        margin-bottom: 13px !important;
    }

    html body #loginView .th-login-divider {
        margin-bottom: 14px !important;
    }

    html body #loginView .th-login-content h1 {
        font-size: 27px !important;
    }

    html body #loginView .th-login-subtitle {
        margin-bottom: 14px !important;
    }

    html body #loginView .th-input-shell {
        height: 47px !important;
    }

    html body #loginView .th-enter-button {
        height: 48px !important;
    }

    html body #loginView .th-login-footer {
        flex-direction: column !important;
        gap: 3px !important;
    }

    html body #loginView .th-footer-separator {
        display: none !important;
    }
}

/* TELAS BAIXAS */
@media (max-height: 700px) and (min-width: 601px) {

    html body #loginView {
        align-items: flex-start !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    html body #loginView .th-login-glass {
        padding-top: 18px !important;
        padding-bottom: 13px !important;
    }

    html body #loginView .th-login-logo {
        max-height: 78px !important;
    }

    html body #loginView .th-central-name {
        margin-bottom: 10px !important;
    }

    html body #loginView .th-login-divider {
        margin-bottom: 11px !important;
    }

    html body #loginView .th-login-content h1 {
        font-size: 27px !important;
    }

    html body #loginView .th-login-subtitle {
        margin-bottom: 11px !important;
    }

    html body #loginView .th-input-shell {
        height: 44px !important;
    }

    html body #loginView .th-enter-button {
        height: 45px !important;
    }

    html body #loginView .th-login-footer {
        margin-top: 12px !important;
        padding-top: 9px !important;
    }
}