/*
|--------------------------------------------------------------------------
| GS VISION PERFORMANCE
| SIMULADOR MMN PUBLICO
|--------------------------------------------------------------------------
*/

.gs-public-sim-shell{
    width:min(1400px,calc(100% - 40px));
    margin:0 auto;
}

.gs-public-sim-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:20px 0;
    border-bottom:1px solid #1d3343;
}

.gs-public-sim-brand{
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
    text-decoration:none;
}

.gs-public-sim-brand span{
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:38px;
    border-radius:8px;
    background:#2bdd9f;
    color:#061e17;
    font-weight:900;
}

.gs-public-sim-header nav{
    display:flex;
    align-items:center;
    gap:22px;
}

.gs-public-sim-header nav a{
    color:#d7e2e8;
    text-decoration:none;
}

.gs-public-sim-header nav a.active{
    color:#2bdd9f;
}

.gs-public-sim-hero{
    padding:50px 0 28px;
}

.gs-public-sim-hero h1{
    margin:5px 0 10px;
    font-size:38px;
}

.gs-public-sim-hero p{
    max-width:820px;
    margin:0;
    color:#7895aa;
    line-height:1.55;
}


/* ==========================================================
   GRID
   ========================================================== */

.gs-public-mmn{
    display:grid;
    grid-template-columns:320px minmax(0,1fr);
    gap:14px;
    margin-top:10px;
}

.gs-public-mmn-config{
    align-self:start;
    padding:18px;
    border:1px solid #1d3445;
    border-radius:13px;
    background:#0b1924;
}

.gs-public-mmn-config h2{
    margin:5px 0 18px;
}

.gs-public-mmn-config label{
    display:block;
    margin:14px 0 6px;
    color:#7895ab;
    font-size:9px;
    font-weight:800;
}


/* ==========================================================
   CAMPOS
   ========================================================== */

.gs-public-mmn-field,
.gs-public-mmn-pct{
    display:flex;
    align-items:center;
    overflow:hidden;
    border:1px solid #243f51;
    border-radius:8px;
    background:#07131d;
}

.gs-public-mmn-field input,
.gs-public-mmn-pct input{
    flex:1;
    min-width:0;
    border:0 !important;
    background:transparent !important;
}

.gs-public-mmn-field span,
.gs-public-mmn-pct span{
    padding:0 9px;
    color:#6f8ca3;
    font-size:9px;
    font-weight:900;
}

.gs-public-mmn-config select{
    width:100%;
}


/* ==========================================================
   PRESETS
   ========================================================== */

.gs-public-mmn-presets{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:5px;
    margin-top:6px;
}

.gs-public-mmn-presets button{
    padding:7px;
    border:1px solid #244054;
    border-radius:7px;
    background:#0a1823;
    color:#89a3b6;
    cursor:pointer;
}

.gs-public-mmn-presets button:hover{
    border-color:#2c765b;
    color:#2bdd9f;
}


/* ==========================================================
   PERCENTUAIS
   ========================================================== */

.gs-public-mmn-divider{
    height:1px;
    margin:20px 0;
    background:#1c3344;
}

.gs-public-mmn-pcts{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:5px;
}

.gs-public-mmn-pcts label{
    margin-top:0;
}

.gs-public-mmn-total,
.gs-public-mmn-factor{
    display:flex;
    flex-direction:column;
    gap:5px;
    margin-top:12px;
    padding:11px;
    border:1px solid #27533f;
    border-radius:8px;
    background:rgba(24,87,64,.13);
}

.gs-public-mmn-total span,
.gs-public-mmn-factor span{
    color:#69879f;
    font-size:7px;
    font-weight:900;
}

.gs-public-mmn-total strong,
.gs-public-mmn-factor strong{
    color:#2bdd9f;
    font-size:18px;
}

.gs-public-mmn-factor small{
    color:#6d879b;
    font-size:8px;
}

.gs-public-mmn-total strong.invalid{
    color:#ff6276;
}


/* ==========================================================
   KPIS
   ========================================================== */

.gs-public-mmn-results{
    min-width:0;
}

.gs-public-mmn-kpis{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-bottom:10px;
}

.gs-public-mmn-kpis > div{
    min-width:0;
    padding:14px;
    border:1px solid #1d3445;
    border-radius:10px;
    background:#0a1722;
}

.gs-public-mmn-kpis span{
    display:block;
    margin-bottom:6px;
    color:#68869e;
    font-size:7px;
    font-weight:900;
}

.gs-public-mmn-kpis strong{
    display:block;
    color:#edf4f7;
    font-size:18px;
}

.gs-public-mmn-kpis small{
    display:block;
    margin-top:4px;
    color:#617c91;
    font-size:7px;
}

.gs-public-mmn-highlight{
    border-color:#287a58 !important;
    background:
        linear-gradient(
            145deg,
            rgba(25,102,74,.44),
            #0a1820
        ) !important;
}

.gs-public-mmn-highlight strong{
    color:#2bdd9f !important;
}


/* ==========================================================
   TABELA
   ========================================================== */

.gs-public-mmn-table-wrap{
    overflow:auto;
    border:1px solid #1c3345;
    border-radius:11px;
}

.gs-public-mmn-table{
    width:100%;
    min-width:900px;
    border-collapse:collapse;
    background:#08141e;
}

.gs-public-mmn-table th,
.gs-public-mmn-table td{
    padding:10px;
    border-bottom:1px solid #192e3d;
    text-align:right;
}

.gs-public-mmn-table th:first-child,
.gs-public-mmn-table td:first-child{
    text-align:left;
}

.gs-public-mmn-table th{
    color:#69869e;
    font-size:7px;
    font-weight:900;
}

.gs-public-mmn-table td{
    color:#c7d4dc;
    font-size:9px;
}

.gs-public-mmn-table tfoot td{
    color:#f1f6f8;
    font-weight:900;
    background:#0e1c28;
}


/* ==========================================================
   BARRAS
   ========================================================== */

.gs-public-mmn-growth{
    margin-top:10px;
    padding:14px;
    border:1px solid #1c3345;
    border-radius:11px;
    background:#09151f;
}

.gs-public-mmn-growth h2{
    margin:5px 0 14px;
}

.gs-public-mmn-bar{
    display:grid;
    grid-template-columns:35px 1fr 100px;
    gap:8px;
    align-items:center;
    margin-bottom:8px;
}

.gs-public-mmn-bar span{
    color:#718fa7;
    font-size:8px;
    font-weight:900;
}

.gs-public-mmn-bar > div{
    height:8px;
    overflow:hidden;
    border-radius:99px;
    background:#122633;
}

.gs-public-mmn-bar i{
    display:block;
    height:100%;
    border-radius:99px;
    background:
        linear-gradient(
            90deg,
            #168a65,
            #2bdd9f
        );
}

.gs-public-mmn-bar strong{
    color:#dce7ed;
    font-size:9px;
    text-align:right;
}


/* ==========================================================
   DISCLAIMER / FOOTER
   ========================================================== */

.gs-public-mmn-disclaimer{
    margin:18px 0;
    padding:14px;
    border:1px solid #5a4c20;
    border-radius:10px;
    background:rgba(96,76,20,.12);
}

.gs-public-mmn-disclaimer strong{
    color:#e2c35e;
}

.gs-public-mmn-disclaimer p{
    margin:5px 0 0;
    color:#8a959e;
    font-size:9px;
    line-height:1.5;
}

.gs-public-sim-footer{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:25px 0 35px;
    border-top:1px solid #1c3344;
    color:#66849b;
    font-size:9px;
}


/* ==========================================================
   CTA DA HOME
   ========================================================== */

.gs-public-mmn-cta{
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-top:24px;
}

.gs-public-mmn-cta h2{
    margin:4px 0 6px;
}


/* ==========================================================
   RESPONSIVO
   ========================================================== */

@media(max-width:1000px){

    .gs-public-mmn{
        grid-template-columns:1fr;
    }

}

@media(max-width:700px){

    .gs-public-mmn-kpis{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

@media(max-width:520px){

    .gs-public-sim-header,
    .gs-public-mmn-cta{
        align-items:flex-start;
        flex-direction:column;
    }

    .gs-public-mmn-kpis,
    .gs-public-mmn-pcts{
        grid-template-columns:1fr;
    }

}


/* ==========================================================
   FASE 2.21D3 - 10 NIVEIS
   ========================================================== */

.gs-public-mmn-pcts{
    grid-template-columns:
        repeat(
            5,
            minmax(0,1fr)
        )
        !important;

    gap:6px !important;
}


/*
|--------------------------------------------------------------------------
| Em desktop:
| N1 N2 N3 N4 N5
| N6 N7 N8 N9 N10
|--------------------------------------------------------------------------
*/

@media(max-width:1150px){

    .gs-public-mmn-pcts{
        grid-template-columns:
            repeat(
                5,
                minmax(0,1fr)
            )
            !important;
    }

}


@media(max-width:700px){

    .gs-public-mmn-pcts{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            )
            !important;
    }

}


@media(max-width:420px){

    .gs-public-mmn-pcts{
        grid-template-columns:
            1fr
            !important;
    }

}



/* ==========================================================
   FASE 2.21D4 - PERCENTUAIS VISIVEIS
   ========================================================== */

/*
|--------------------------------------------------------------------------
| 2 CAMPOS POR LINHA
|--------------------------------------------------------------------------
*/

.gs-public-mmn-pcts{
    display:grid !important;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        )
        !important;

    gap:
        10px 8px
        !important;
}


/*
|--------------------------------------------------------------------------
| CADA BLOCO
|--------------------------------------------------------------------------
*/

.gs-public-mmn-pcts > div{
    min-width:0;
}


.gs-public-mmn-pcts label{
    display:block;

    margin:
        0 0 5px
        !important;

    color:#7693aa;

    font-size:9px;

    font-weight:900;
}


/*
|--------------------------------------------------------------------------
| CAMPO MAIOR
|--------------------------------------------------------------------------
*/

.gs-public-mmn-pct{
    display:flex !important;

    align-items:center;

    width:100%;

    min-width:0;

    height:42px;

    box-sizing:border-box;

    overflow:hidden;

    border:
        1px solid #29485d;

    border-radius:9px;

    background:#07131d;
}


/*
|--------------------------------------------------------------------------
| NUMERO
|--------------------------------------------------------------------------
*/

.gs-public-mmn-pct input{
    display:block !important;

    flex:
        1 1 auto
        !important;

    width:
        calc(100% - 34px)
        !important;

    min-width:0 !important;

    height:40px;

    padding:
        0 4px 0 11px
        !important;

    border:0 !important;

    outline:0 !important;

    background:
        transparent
        !important;

    color:
        #f1f6f8
        !important;

    font-size:
        13px
        !important;

    font-weight:
        900
        !important;

    line-height:
        40px;

    opacity:
        1
        !important;

    -webkit-text-fill-color:
        #f1f6f8
        !important;
}


/*
|--------------------------------------------------------------------------
| SUFIXO %
|--------------------------------------------------------------------------
*/

.gs-public-mmn-pct > span{
    display:flex;

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

    flex:
        0 0 32px;

    width:32px;

    height:40px;

    padding:0 !important;

    color:
        #78a4c1
        !important;

    font-size:
        11px
        !important;

    font-weight:
        900;
}


/*
|--------------------------------------------------------------------------
| REMOVE SETINHAS DO TYPE NUMBER
|--------------------------------------------------------------------------
*/

.gs-public-mmn-pct
input[type="number"]::-webkit-inner-spin-button,
.gs-public-mmn-pct
input[type="number"]::-webkit-outer-spin-button{
    margin:0;

    -webkit-appearance:none;
}


.gs-public-mmn-pct
input[type="number"]{
    -moz-appearance:textfield;
}


/*
|--------------------------------------------------------------------------
| FOCO
|--------------------------------------------------------------------------
*/

.gs-public-mmn-pct:focus-within{
    border-color:#2bdd9f;

    box-shadow:
        0 0 0 1px
        rgba(43,221,159,.18);
}


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

@media(max-width:430px){

    .gs-public-mmn-pcts{
        grid-template-columns:
            1fr
            !important;
    }

}