/*
|--------------------------------------------------------------------------
| MULTIVERSO GEEK - LOGIN GAMIFICADO
|--------------------------------------------------------------------------
*/

:root {

    --login-red: #ef1735;

    --login-red-dark: #730010;

    --login-red-deep: #350008;

    --login-cyan: #00e7f2;

    --login-cyan-soft: #57f6ff;

    --login-black: #020406;

    --login-black-soft: #070b0e;

    --login-panel: rgba(7, 11, 14, .94);

    --login-panel-soft: rgba(11, 17, 21, .88);

    --login-text: #ffffff;

    --login-muted: rgba(255, 255, 255, .56);

    --login-border: rgba(0, 231, 242, .18);

    --login-border-red: rgba(239, 23, 53, .28);

    --login-shadow:
        0 30px 90px
        rgba(0, 0, 0, .70);

}


/*
|--------------------------------------------------------------------------
| RESET
|--------------------------------------------------------------------------
*/

* {

    box-sizing:
        border-box;

}


html,
body {

    min-height:
        100%;

}


/*
|--------------------------------------------------------------------------
| BODY
|--------------------------------------------------------------------------
*/

body.login-page {

    min-height:
        100vh;

    margin:
        0;

    overflow-x:
        hidden;

    color:
        var(--login-text);

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(239, 23, 53, .14),
            transparent 28%
        ),

        radial-gradient(
            circle at 90% 85%,
            rgba(0, 231, 242, .08),
            transparent 30%
        ),

        #020406;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

}


/*
|--------------------------------------------------------------------------
| ESTRUTURA
|--------------------------------------------------------------------------
*/

.login-shell {

    position:
        relative;

    display:
        grid;

    min-height:
        100vh;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(430px, .92fr);

    background:
        #020406;

}


/*
|--------------------------------------------------------------------------
| LADO ESQUERDO
|--------------------------------------------------------------------------
*/

.login-showcase {

    position:
        relative;

    display:
        flex;

    overflow:
        hidden;

    align-items:
        center;

    padding:
        72px;

    color:
        #ffffff;

    background:

        linear-gradient(
            90deg,
            rgba(2, 4, 6, .42),
            rgba(2, 4, 6, .72)
        ),

        radial-gradient(
            circle at 20% 30%,
            rgba(185, 0, 25, .22),
            transparent 28%
        ),

        radial-gradient(
            circle at 82% 66%,
            rgba(0, 231, 242, .10),
            transparent 28%
        ),

        #020406
        url("../images/multiverso-jujutsu.jpg")
        center
        / cover
        no-repeat;

}


/*
|--------------------------------------------------------------------------
| ESCURECIMENTO
|--------------------------------------------------------------------------
*/

.login-showcase::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

    pointer-events:
        none;

    background:

        linear-gradient(
            90deg,
            rgba(0, 0, 0, .10),
            rgba(0, 0, 0, .22) 45%,
            rgba(2, 4, 6, .90)
        ),

        linear-gradient(
            180deg,
            rgba(0, 0, 0, .20),
            transparent 40%,
            rgba(0, 0, 0, .65)
        );

}


/*
|--------------------------------------------------------------------------
| LINHAS DE ENERGIA
|--------------------------------------------------------------------------
*/

.login-showcase::after {

    content:
        "";

    position:
        absolute;

    inset:
        -30%;

    z-index:
        0;

    pointer-events:
        none;

    opacity:
        .28;

    background:

        repeating-linear-gradient(
            115deg,
            transparent 0,
            transparent 60px,
            rgba(239, 23, 53, .06) 62px,
            rgba(239, 23, 53, .15) 63px,
            transparent 66px
        );

    animation:
        loginEnergia 16s linear infinite;

}


/*
|--------------------------------------------------------------------------
| CONTEÚDO ESQUERDO
|--------------------------------------------------------------------------
*/

.login-showcase-content {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    max-width:
        680px;

    margin:
        auto;

}


/*
|--------------------------------------------------------------------------
| TAG SUPERIOR
|--------------------------------------------------------------------------
*/

.login-tag {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        9px
        14px;

    border:
        1px solid
        rgba(0, 231, 242, .28);

    border-radius:
        999px;

    color:
        var(--login-cyan-soft);

    background:
        rgba(0, 10, 14, .60);

    backdrop-filter:
        blur(10px);

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

    box-shadow:
        inset 0 0 18px
        rgba(0, 231, 242, .025);

    font-size:
        .72rem;

    font-weight:
        800;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

}


.login-tag i,
.login-tag svg {

    color:
        var(--login-red);

}


/*
|--------------------------------------------------------------------------
| TÍTULO
|--------------------------------------------------------------------------
*/

.login-showcase h1 {

    max-width:
        650px;

    margin:
        28px
        0
        0;

    color:
        #ffffff;

    font-size:
        clamp(
            2.5rem,
            5vw,
            4.8rem
        );

    font-weight:
        900;

    letter-spacing:
        -.055em;

    line-height:
        .98;

    text-shadow:
        0 8px 35px
        rgba(0, 0, 0, .55);

}


/*
|--------------------------------------------------------------------------
| DESCRIÇÃO
|--------------------------------------------------------------------------
*/

.login-showcase-content > p {

    max-width:
        590px;

    margin:
        25px
        0
        0;

    color:
        rgba(255, 255, 255, .68);

    font-size:
        .98rem;

    line-height:
        1.8;

}


/*
|--------------------------------------------------------------------------
| BENEFÍCIOS / MISSÕES
|--------------------------------------------------------------------------
*/

.login-benefits {

    display:
        grid;

    margin-top:
        42px;

    gap:
        12px;

}


.login-benefits > div {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    max-width:
        470px;

    padding:
        12px
        15px;

    overflow:
        hidden;

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

    border-left:
        2px solid
        rgba(239, 23, 53, .55);

    border-radius:
        12px;

    background:
        linear-gradient(
            90deg,
            rgba(4, 8, 11, .72),
            rgba(4, 8, 11, .38)
        );

    backdrop-filter:
        blur(10px);

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

    transition:
        .25s ease;

}


.login-benefits > div:hover {

    border-color:
        rgba(0, 231, 242, .25);

    border-left-color:
        var(--login-red);

    background:
        rgba(7, 13, 17, .82);

    transform:
        translateX(4px);

}


.login-benefits > div > i,
.login-benefits > div > svg {

    flex:
        0 0 auto;

}


.login-benefits > div > i {

    display:
        inline-flex;

    width:
        44px;

    height:
        44px;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(0, 231, 242, .20);

    border-radius:
        12px;

    color:
        var(--login-cyan-soft);

    background:
        rgba(0, 231, 242, .06);

}


.login-benefits span,
.login-benefits strong,
.login-benefits small {

    display:
        block;

}


.login-benefits strong {

    color:
        #ffffff;

    font-size:
        .88rem;

    font-weight:
        800;

}


.login-benefits small {

    margin-top:
        3px;

    color:
        rgba(255, 255, 255, .52);

    font-size:
        .76rem;

}


/*
|--------------------------------------------------------------------------
| ÁREA DIREITA
|--------------------------------------------------------------------------
*/

.login-access {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    overflow:
        hidden;

    padding:
        40px
        30px;

    background:

        radial-gradient(
            circle at 80% 15%,
            rgba(239, 23, 53, .10),
            transparent 30%
        ),

        radial-gradient(
            circle at 20% 90%,
            rgba(0, 231, 242, .055),
            transparent 32%
        ),

        linear-gradient(
            145deg,
            #05080b,
            #020406
        );

}


/*
|--------------------------------------------------------------------------
| DETALHE VERMELHO DIREITA
|--------------------------------------------------------------------------
*/

.login-access::before {

    content:
        "";

    position:
        absolute;

    top:
        -180px;

    right:
        -180px;

    width:
        380px;

    height:
        380px;

    border:
        1px solid
        rgba(239, 23, 53, .09);

    border-radius:
        50%;

    box-shadow:
        0 0 90px
        rgba(239, 23, 53, .05);

    pointer-events:
        none;

}


/*
|--------------------------------------------------------------------------
| CARD DE LOGIN
|--------------------------------------------------------------------------
*/

.login-card {

    position:
        relative;

    width:
        100%;

    max-width:
        480px;

    overflow:
        hidden;

    padding:
        38px;

    border:
        1px solid
        rgba(0, 231, 242, .16);

    border-radius:
        22px;

    background:

        linear-gradient(
            145deg,
            rgba(10, 15, 19, .96),
            rgba(4, 8, 11, .97)
        );

    box-shadow:
        var(--login-shadow);

    backdrop-filter:
        blur(20px);

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

}


/*
|--------------------------------------------------------------------------
| LINHA SUPERIOR DO CARD
|--------------------------------------------------------------------------
*/

.login-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        14%;

    width:
        72%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--login-cyan),
            transparent
        );

    box-shadow:
        0 0 15px
        rgba(0, 231, 242, .50);

}


/*
|--------------------------------------------------------------------------
| BRILHO VERMELHO DO CARD
|--------------------------------------------------------------------------
*/

.login-card::after {

    content:
        "";

    position:
        absolute;

    top:
        -90px;

    right:
        -90px;

    width:
        190px;

    height:
        190px;

    border-radius:
        50%;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle,
            rgba(239, 23, 53, .12),
            transparent 68%
        );

}


/*
|--------------------------------------------------------------------------
| MARCA
|--------------------------------------------------------------------------
*/

.login-brand {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

}


.login-brand-icon {

    display:
        inline-flex;

    width:
        50px;

    height:
        50px;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(239, 23, 53, .48);

    border-radius:
        14px;

    color:
        #ffffff;

    background:
        linear-gradient(
            145deg,
            var(--login-red),
            var(--login-red-dark)
        );

    box-shadow:
        0 0 25px
        rgba(239, 23, 53, .24);

}


.login-brand small,
.login-brand strong {

    display:
        block;

}


.login-brand small {

    color:
        var(--login-muted);

    font-size:
        .66rem;

    font-weight:
        700;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;

}


.login-brand strong {

    margin-top:
        4px;

    color:
        #ffffff;

    font-size:
        .88rem;

    letter-spacing:
        .04em;

}


/*
|--------------------------------------------------------------------------
| CABEÇALHO LOGIN
|--------------------------------------------------------------------------
*/

.login-heading {

    position:
        relative;

    z-index:
        2;

    margin-top:
        34px;

}


.login-heading > span {

    color:
        var(--login-red);

    font-size:
        .69rem;

    font-weight:
        900;

    letter-spacing:
        .14em;

    text-transform:
        uppercase;

}


.login-heading h2 {

    margin:
        8px
        0
        0;

    color:
        #ffffff;

    font-size:
        1.9rem;

    font-weight:
        900;

    letter-spacing:
        -.035em;

}


.login-heading p {

    margin:
        9px
        0
        0;

    color:
        var(--login-muted);

    font-size:
        .85rem;

    line-height:
        1.55;

}


/*
|--------------------------------------------------------------------------
| FORMULÁRIO
|--------------------------------------------------------------------------
*/

.login-form {

    position:
        relative;

    z-index:
        2;

    margin-top:
        28px;

}


.login-field + .login-field {

    margin-top:
        18px;

}


.login-field label {

    margin-bottom:
        8px;

    color:
        rgba(255, 255, 255, .72);

    font-size:
        .75rem;

    font-weight:
        800;

    letter-spacing:
        .03em;

}


/*
|--------------------------------------------------------------------------
| LINHA SENHA
|--------------------------------------------------------------------------
*/

.login-label-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

}


.login-label-row a {

    color:
        var(--login-cyan-soft);

    font-size:
        .72rem;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        .2s ease;

}


.login-label-row a:hover {

    color:
        #ffffff;

}


/*
|--------------------------------------------------------------------------
| INPUT
|--------------------------------------------------------------------------
*/

.login-input {

    position:
        relative;

}


.login-input > i {

    position:
        absolute;

    top:
        50%;

    left:
        16px;

    z-index:
        2;

    color:
        rgba(0, 231, 242, .62);

    transform:
        translateY(-50%);

}


.login-input > svg {

    position:
        absolute;

    top:
        50%;

    left:
        16px;

    z-index:
        2;

    color:
        rgba(0, 231, 242, .62);

    transform:
        translateY(-50%);

}


.login-input .form-control {

    min-height:
        54px;

    padding:
        12px
        48px;

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

    border-radius:
        12px;

    color:
        #ffffff;

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

    box-shadow:
        inset 0 0 18px
        rgba(0, 0, 0, .20);

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

}


.login-input .form-control::placeholder {

    color:
        rgba(255, 255, 255, .28);

}


.login-input .form-control:focus {

    color:
        #ffffff;

    border-color:
        rgba(0, 231, 242, .55);

    background:
        rgba(0, 231, 242, .035);

    box-shadow:
        0 0 0 3px
        rgba(0, 231, 242, .07),
        0 0 20px
        rgba(0, 231, 242, .05);

    outline:
        none;

}


/*
|--------------------------------------------------------------------------
| AUTOFILL
|--------------------------------------------------------------------------
*/

.login-input input:-webkit-autofill,
.login-input input:-webkit-autofill:hover,
.login-input input:-webkit-autofill:focus {

    -webkit-text-fill-color:
        #ffffff;

    -webkit-box-shadow:
        0 0 0 1000px
        #0a0f13
        inset;

    transition:
        background-color 9999s ease-in-out 0s;

}


/*
|--------------------------------------------------------------------------
| MOSTRAR SENHA
|--------------------------------------------------------------------------
*/

.password-toggle {

    position:
        absolute;

    top:
        50%;

    right:
        7px;

    z-index:
        3;

    display:
        inline-flex;

    width:
        39px;

    height:
        39px;

    align-items:
        center;

    justify-content:
        center;

    border:
        0;

    border-radius:
        9px;

    color:
        rgba(255, 255, 255, .42);

    background:
        transparent;

    transform:
        translateY(-50%);

    transition:
        .2s ease;

}


.password-toggle:hover {

    color:
        var(--login-cyan-soft);

    background:
        rgba(0, 231, 242, .07);

}


/*
|--------------------------------------------------------------------------
| BOTÕES
|--------------------------------------------------------------------------
*/

.login-primary-button,
.login-secondary-button {

    position:
        relative;

    overflow:
        hidden;

    display:
        inline-flex;

    width:
        100%;

    min-height:
        52px;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    border-radius:
        12px;

    font-size:
        .82rem;

    font-weight:
        900;

    letter-spacing:
        .04em;

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

}


/*
|--------------------------------------------------------------------------
| ENTRAR
|--------------------------------------------------------------------------
*/

.login-primary-button {

    margin-top:
        25px;

    border:
        1px solid
        rgba(239, 23, 53, .60);

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #d70c29,
            #790010
        );

    box-shadow:
        0 12px 30px
        rgba(239, 23, 53, .20);

}


.login-primary-button::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        -120%;

    width:
        70%;

    height:
        100%;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .18),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left .6s ease;

}


.login-primary-button:hover::before {

    left:
        140%;

}


.login-primary-button:hover {

    color:
        #ffffff;

    border-color:
        var(--login-red);

    background:
        linear-gradient(
            135deg,
            #ef1735,
            #900014
        );

    box-shadow:
        0 15px 35px
        rgba(239, 23, 53, .30);

    transform:
        translateY(-2px);

}


.login-primary-button:active {

    transform:
        translateY(0)
        scale(.985);

}


/*
|--------------------------------------------------------------------------
| DIVISOR
|--------------------------------------------------------------------------
*/

.login-divider {

    position:
        relative;

    margin:
        22px
        0;

    color:
        rgba(255, 255, 255, .25);

    font-size:
        .68rem;

    text-align:
        center;

}


.login-divider::before {

    content:
        "";

    position:
        absolute;

    top:
        50%;

    right:
        0;

    left:
        0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0, 231, 242, .18),
            transparent
        );

}


.login-divider span {

    position:
        relative;

    padding:
        0
        13px;

    background:
        #070b0e;

}


/*
|--------------------------------------------------------------------------
| NOVO PARTICIPANTE
|--------------------------------------------------------------------------
*/

.login-secondary-button {

    border:
        1px solid
        rgba(0, 231, 242, .20);

    color:
        var(--login-cyan-soft);

    background:
        rgba(0, 231, 242, .045);

}


.login-secondary-button:hover {

    color:
        #ffffff;

    border-color:
        rgba(0, 231, 242, .48);

    background:
        rgba(0, 231, 242, .09);

    box-shadow:
        0 0 24px
        rgba(0, 231, 242, .07);

    transform:
        translateY(-1px);

}


/*
|--------------------------------------------------------------------------
| SEGURANÇA
|--------------------------------------------------------------------------
*/

.login-security {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-top:
        23px;

    padding:
        12px
        13px;

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

    border-radius:
        10px;

    color:
        rgba(255, 255, 255, .42);

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

    font-size:
        .68rem;

}


.login-security i,
.login-security svg {

    color:
        var(--login-cyan);

}


/*
|--------------------------------------------------------------------------
| RODAPÉ
|--------------------------------------------------------------------------
*/

.login-footer {

    margin:
        19px
        0
        0;

    color:
        rgba(255, 255, 255, .30);

    font-size:
        .67rem;

    letter-spacing:
        .05em;

}


/*
|--------------------------------------------------------------------------
| MODAL
|--------------------------------------------------------------------------
*/

.login-modal {

    overflow:
        hidden;

    border:
        1px solid
        rgba(0, 231, 242, .18);

    border-radius:
        18px;

    color:
        #ffffff;

    background:
        linear-gradient(
            145deg,
            #0a0f13,
            #040709
        );

    box-shadow:
        0 30px 100px
        rgba(0, 0, 0, .85);

}


/*
|--------------------------------------------------------------------------
| HEADER MODAL
|--------------------------------------------------------------------------
*/

.login-modal .modal-header {

    align-items:
        flex-start;

    padding:
        22px
        24px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, .07);

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

}


.login-modal .modal-header small {

    color:
        var(--login-red);

    font-size:
        .66rem;

    font-weight:
        900;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

}


.login-modal .modal-title {

    margin-top:
        4px;

    color:
        #ffffff;

    font-weight:
        900;

}


/*
|--------------------------------------------------------------------------
| FECHAR MODAL
|--------------------------------------------------------------------------
*/

.login-modal .btn-close {

    opacity:
        .65;

    filter:
        invert(1)
        grayscale(1);

}


.login-modal .btn-close:hover {

    opacity:
        1;

}


/*
|--------------------------------------------------------------------------
| BODY MODAL
|--------------------------------------------------------------------------
*/

.login-modal .modal-body {

    padding:
        24px;

}


.login-modal .form-label {

    color:
        rgba(255, 255, 255, .72);

    font-size:
        .75rem;

    font-weight:
        800;

}


/*
|--------------------------------------------------------------------------
| INPUTS MODAL
|--------------------------------------------------------------------------
*/

.login-modal .form-control,
.login-modal .form-select {

    min-height:
        48px;

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

    border-radius:
        10px;

    color:
        #ffffff;

    background-color:
        rgba(255, 255, 255, .035);

    box-shadow:
        none;

}


.login-modal .form-control::placeholder {

    color:
        rgba(255, 255, 255, .28);

}


.login-modal .form-control:focus,
.login-modal .form-select:focus {

    color:
        #ffffff;

    border-color:
        rgba(0, 231, 242, .48);

    background-color:
        rgba(0, 231, 242, .03);

    box-shadow:
        0 0 0 3px
        rgba(0, 231, 242, .06);

}


/*
|--------------------------------------------------------------------------
| SELECT MODAL
|--------------------------------------------------------------------------
*/

.login-modal .form-select {

    color-scheme:
        dark;

}


.login-modal .form-select option {

    color:
        #ffffff;

    background:
        #080d10;

}


/*
|--------------------------------------------------------------------------
| TEXTO AUXILIAR
|--------------------------------------------------------------------------
*/

.login-modal .form-text {

    color:
        rgba(255, 255, 255, .36);

}


/*
|--------------------------------------------------------------------------
| INFORMAÇÃO MODAL
|--------------------------------------------------------------------------
*/

.login-modal-info {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        20px;

    padding:
        12px
        13px;

    border:
        1px solid
        rgba(0, 231, 242, .15);

    border-radius:
        10px;

    color:
        rgba(255, 255, 255, .68);

    background:
        rgba(0, 231, 242, .045);

    font-size:
        .72rem;

}


.login-modal-info i,
.login-modal-info svg {

    color:
        var(--login-cyan);

}


/*
|--------------------------------------------------------------------------
| AVISO PARTICIPANTE ATIVAÇÕES
|--------------------------------------------------------------------------
*/

.login-modal
#avisoParticipanteAtivacao {

    border:
        1px solid
        rgba(0, 231, 242, .20);

    color:
        rgba(255, 255, 255, .78);

    background:
        rgba(0, 231, 242, .06);

}


.login-modal
#avisoParticipanteAtivacao strong {

    color:
        var(--login-cyan-soft);

}


/*
|--------------------------------------------------------------------------
| FOOTER MODAL
|--------------------------------------------------------------------------
*/

.login-modal .modal-footer {

    padding:
        16px
        24px
        22px;

    border-top:
        1px solid
        rgba(255, 255, 255, .07);

}


/*
|--------------------------------------------------------------------------
| BOTÕES MODAL
|--------------------------------------------------------------------------
*/

.login-modal .btn {

    min-height:
        43px;

    border-radius:
        10px;

    font-size:
        .76rem;

    font-weight:
        850;

}


/*
|--------------------------------------------------------------------------
| CANCELAR
|--------------------------------------------------------------------------
*/

.login-modal .btn-light {

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

    color:
        rgba(255, 255, 255, .66);

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

}


.login-modal .btn-light:hover {

    color:
        #ffffff;

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

}


/*
|--------------------------------------------------------------------------
| SALVAR PARTICIPANTE
|--------------------------------------------------------------------------
*/

.login-modal .btn-success {

    border:
        1px solid
        rgba(239, 23, 53, .55);

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #d70c29,
            #790010
        );

    box-shadow:
        0 8px 22px
        rgba(239, 23, 53, .15);

}


.login-modal .btn-success:hover {

    border-color:
        var(--login-red);

    background:
        linear-gradient(
            135deg,
            #ef1735,
            #900014
        );

}


/*
|--------------------------------------------------------------------------
| BACKDROP DO MODAL
|--------------------------------------------------------------------------
*/

.modal-backdrop.show {

    opacity:
        .82;

}


/*
|--------------------------------------------------------------------------
| ANIMAÇÃO DE ENERGIA
|--------------------------------------------------------------------------
*/

@keyframes loginEnergia {

    0% {

        transform:
            translate3d(
                -2%,
                -2%,
                0
            );

    }

    50% {

        transform:
            translate3d(
                2%,
                2%,
                0
            );

    }

    100% {

        transform:
            translate3d(
                -2%,
                -2%,
                0
            );

    }

}


/*
|--------------------------------------------------------------------------
| TABLET / MOBILE
|--------------------------------------------------------------------------
*/

@media (
    max-width: 900px
) {

    .login-shell {

        display:
            block;

        min-height:
            100vh;

        background:
            #020406;

    }


    .login-showcase {

        min-height:
            auto;

        padding:
            42px
            28px
            92px;

        background-position:
            center 35%;

    }


    .login-showcase::before {

        background:
            linear-gradient(
                180deg,
                rgba(2, 4, 6, .20),
                rgba(2, 4, 6, .72)
            );

    }


    .login-benefits {

        display:
            none;

    }


    .login-access {

        margin-top:
            -55px;

        padding:
            0
            20px
            34px;

        overflow:
            visible;

        background:
            transparent;

    }


    .login-card {

        max-width:
            560px;

    }

}


/*
|--------------------------------------------------------------------------
| CELULAR
|--------------------------------------------------------------------------
*/

@media (
    max-width: 575.98px
) {

    body.login-page {

        background:
            #020406;

    }


    .login-showcase {

        padding:
            30px
            20px
            74px;

        background-position:
            center;

    }


    .login-tag {

        padding:
            7px
            11px;

        font-size:
            .62rem;

        letter-spacing:
            .08em;

    }


    .login-showcase h1 {

        margin-top:
            20px;

        font-size:
            2.05rem;

        line-height:
            1.04;

    }


    .login-showcase-content > p {

        margin-top:
            17px;

        color:
            rgba(255, 255, 255, .62);

        font-size:
            .84rem;

        line-height:
            1.65;

    }


    .login-access {

        margin-top:
            -42px;

        padding:
            0
            12px
            24px;

    }


    .login-card {

        padding:
            26px
            20px;

        border-radius:
            18px;

    }


    .login-brand-icon {

        width:
            45px;

        height:
            45px;

        border-radius:
            12px;

    }


    .login-heading {

        margin-top:
            27px;

    }


    .login-heading h2 {

        font-size:
            1.65rem;

    }


    .login-heading p {

        font-size:
            .80rem;

    }


    .login-input .form-control {

        min-height:
            52px;

    }


    .login-primary-button,
    .login-secondary-button {

        min-height:
            50px;

    }


    /*
    |--------------------------------------------------------------------------
    | MODAL MOBILE
    |--------------------------------------------------------------------------
    */

    .login-modal {

        border-radius:
            16px;

    }


    .login-modal .modal-header {

        padding:
            19px
            19px;

    }


    .login-modal .modal-body {

        padding:
            20px
            19px;

    }


    .login-modal .modal-footer {

        flex-direction:
            column-reverse;

        padding:
            15px
            19px
            19px;

    }


    .login-modal .modal-footer .btn {

        width:
            100%;

    }

}


/*
|--------------------------------------------------------------------------
| REDUZIR ANIMAÇÕES
|--------------------------------------------------------------------------
*/

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

    .login-showcase::after {

        animation:
            none !important;

    }


    .login-primary-button,
    .login-secondary-button,
    .login-benefits > div {

        transition:
            none !important;

    }

}