/* =========================================================
   EXTRANET GA - LOGIN PREMIUM V1
   ========================================================= */

#loginView.login-wrap {
    position: fixed;
    inset: 0;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;

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

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(37, 112, 255, .24),
            transparent 34%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(0, 210, 160, .13),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #05070a 0%,
            #0a0e13 48%,
            #050608 100%
        );
}


/* LUZ EM MOVIMENTO */

#loginView.login-wrap::before {
    content: "";
    position: absolute;

    width: 620px;
    height: 620px;

    left: -250px;
    top: -250px;

    border-radius: 50%;

    background:
        conic-gradient(
            from 0deg,
            rgba(41, 124, 255, .34),
            rgba(0, 210, 170, .08),
            rgba(100, 70, 255, .18),
            rgba(41, 124, 255, .34)
        );

    filter: blur(85px);

    animation:
        gaLoginLightMove
        16s
        ease-in-out
        infinite alternate;

    pointer-events: none;
}


/* GRADE DE FUNDO */

#loginView.login-wrap::after {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.022) 1px,
            transparent 1px
        );

    background-size:
        52px 52px;

    animation:
        gaLoginGridMove
        25s
        linear
        infinite;

    pointer-events: none;
}


@keyframes gaLoginLightMove {

    from {
        transform:
            translate3d(0,0,0)
            rotate(0deg);
    }

    to {
        transform:
            translate3d(
                calc(100vw - 280px),
                calc(100vh - 320px),
                0
            )
            rotate(150deg);
    }
}


@keyframes gaLoginGridMove {

    from {
        background-position:
            0 0,
            0 0;
    }

    to {
        background-position:
            104px 104px,
            104px 104px;
    }
}


/* CARD */

#loginView .login-card {
    position: relative;
    z-index: 10;

    width:
        min(
            calc(100vw - 40px),
            430px
        );

    padding:
        42px 40px 38px;

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

    border-radius: 26px;

    background:
        rgba(13,17,22,.80);

    backdrop-filter:
        blur(24px);

    -webkit-backdrop-filter:
        blur(24px);

    box-shadow:
        0 35px 90px
        rgba(0,0,0,.50);

    text-align: center;
}


/* LOGO LOGIN */

#loginView .brand.ga-login-logo-box {
    width: 200px;
    min-height: 105px;

    margin:
        0 auto
        24px;

    padding:
        14px 18px;

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

    border-radius: 18px;

    background:
        rgba(255,255,255,.97);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.22);
}


.ga-login-logo {
    display: block;

    width: 100%;
    max-height: 92px;

    object-fit: contain;
}


#loginView .login-card h1 {
    margin: 0 0 7px;

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

    letter-spacing: -.035em;
}


#loginView .login-card > p {
    margin:
        0 0 28px;

    color:
        rgba(214,225,235,.58);
}


#loginView #loginForm {
    display: grid;
    gap: 12px;
}


#loginView #loginForm input {
    width: 100%;
    min-height: 52px;

    padding:
        0 16px;

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

    border-radius: 13px;

    background:
        rgba(255,255,255,.055);

    color: #fff;

    outline: none;

    transition:
        .2s ease;
}


#loginView #loginForm input:focus {
    border-color:
        rgba(59, 138, 255, .72);

    background:
        rgba(255,255,255,.075);

    box-shadow:
        0 0 0 4px
        rgba(59,138,255,.10);
}


#loginView #loginForm button {
    min-height: 52px;

    margin-top: 4px;

    border: 0;
    border-radius: 13px;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform .18s ease,
        filter .18s ease;
}


#loginView #loginForm button:hover {
    transform:
        translateY(-1px);

    filter:
        brightness(1.08);
}


/* =========================================================
   LOGO DO MENU LATERAL
   ========================================================= */

.ga-system-logo-box {
    width: 135px !important;
    min-height: 70px !important;

    padding:
        9px 11px !important;

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

    border-radius: 14px;

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

    overflow: hidden;
}


.ga-system-logo {
    display: block;

    width: 100%;
    max-height: 60px;

    object-fit: contain;
}


@media (max-width: 600px) {

    #loginView .login-card {
        padding:
            30px 22px;
    }

    #loginView .brand.ga-login-logo-box {
        width: 175px;
    }
}


@media (prefers-reduced-motion: reduce) {

    #loginView.login-wrap::before,
    #loginView.login-wrap::after {
        animation: none;
    }
}

/* GA_LOGO_WHITE_START */

/* =========================================================
   LOGO GA BRANCA
   Mantem o PNG original preto intacto.
   A conversao para branco acontece apenas visualmente no CSS.
   ========================================================= */


/* LOGIN - RETIRAR QUADRO BRANCO */

#loginView .brand.ga-login-logo-box {

    width: 230px !important;

    min-height: auto !important;

    margin:
        0 auto
        28px !important;

    padding: 0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    border:
        none !important;

    border-radius:
        0 !important;

    overflow:
        visible !important;
}


/* LOGIN - LOGO PRETA VIRA BRANCA */

#loginView .ga-login-logo {

    width: 100% !important;

    max-height: 105px !important;

    object-fit:
        contain !important;

    filter:
        brightness(0)
        invert(1) !important;

    opacity: .96;

    transition:
        transform .25s ease,
        opacity .25s ease;
}


#loginView .ga-login-logo:hover {

    transform:
        scale(1.025);

    opacity: 1;
}


/* =========================================================
   MENU LATERAL
   ========================================================= */

.ga-system-logo-box {

    width: 145px !important;

    min-height: auto !important;

    padding:
        4px 8px !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    border:
        none !important;

    border-radius:
        0 !important;

    overflow:
        visible !important;
}


.ga-system-logo {

    width: 100% !important;

    max-height: 68px !important;

    object-fit:
        contain !important;

    filter:
        brightness(0)
        invert(1) !important;

    opacity: .92;
}


/* MOBILE */

@media (max-width: 600px) {

    #loginView .brand.ga-login-logo-box {

        width:
            195px !important;
    }

}


/* GA_LOGO_WHITE_END */