/* VARIAVEIS */

:root {
   
    --espaco-0: 0.25em;
    --espaco-1: 0.5em;
    --espaco-2: 1em;
    --espaco-3: 1.5em;
    --espaco-4: 2.2em;
    --espaco-5: 3em;

    --fonte-0: 0.5em;
    --fonte-1: 0.75em;
    --fonte-2: 1em;
    --fonte-3: 1.2em;
    --fonte-4: 1.6em;
    --fonte-5: 2.25em;

    --lh-0: 0;
    --lh-1: 1.25em;
    --lh-2: 1.5em;

    --fw-0: 200;
    --fw-1: 400;
    --fw-2: 600;
    --fw-3: 700;
    --fw-4: 800;

    --tr-0: 0.2s;
    --tr-1: 0.4s;

    --font-f: 'Ralleway', sans-serif; 
    --font-f: 'Work Sans', sans-serif; 
    --font-f: 'Rawline', sans-serif; 

    
    --font-f2: "Slabo 27px Serif", serif;
    --font-f2: "Faustina", serif;
    --font-f2: "Domine", serif;
}

/* GERAL */

* {      
    font-family: var(--font-f); 
    text-decoration: none;
    box-sizing: border-box;  
}

p, a {
    font-family: var(--font-f); 
    letter-spacing: 0.05em;
    line-height: var(--lh-1);
    text-decoration: none;
}

h1, h2, h3 {
    font-family: var(--font-f2); 
    letter-spacing: 0.05em;
    font-weight : 600;
}

h1 {
    font-size: var(--fonte-6);
}

h2 {
    font-size: var(--fonte-5);
}

h3 {
    font-size: var(--fonte-4);
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: var(--cor-n0);
}

/* RESPONSIVO */

.menor-mob {
    width: 60vw;
}

.margem-nav{
    margin-top: 10vh;
}

.center {
    display: flex;
    justify-content:center;
    align-content:center;
}

.resp {  
    flex-direction: row;    
    flex-flow: wrap;
}

/* ELEMENTOS */


textarea {
    resize: none;
}



table {
    
    border-collapse: collapse;
    width: 100%;

    tr:nth-child(odd) td {
        background: var(--cor-n0); /* Cinza claro */
    }

    th {
        background: var(--cor-p2);
        font-size: var(--fonte-1);
        padding: var(--espaco-1);
    }

    td {
        background: var(--cor-w);
        font-size: var(--fonte-2);
        padding: var(--espaco-1);
        text-align: center;
    }
}

form {
    display:block;
    width: 100%;
    max-width: 750px;

    .divInput {
        display: flex;
        width: 100%;
        justify-content: space-between;

        input {
            width: 90%;
            padding: var(--espaco-0);
        }
    }    
}

button, .button {
    padding: var(--espaco-1); 
    padding-right: var(--espaco-2); 
    padding-left: var(--espaco-2); 
    border-radius: var(--espaco-5); 
    font-size: var(--fonte-2); 
    background: var(--cor-p1);
    color: var(--cor-n0);
    font-family: var(--font-f);
    border: 0;
    font-weight: var(--fw-1);
    cursor: pointer;
    font-size: var(--fonte-2);

    &:disabled {
        cursor: auto;
    }
}

.button {
    cursor: auto;
}

.btMenor{
    padding: var(--espaco-0); 
    padding-right: var(--espaco-1); 
    padding-left: var(--espaco-1); 
}

li {
    padding: var(--espaco-1);
}

footer {
    min-height: 20vh;
    background: var(--cor-n2);
    margin-top: var(--espaco-5);
    img {
        /*filter: invert(100%); /* Inverte 100% das cores */
        max-width: 40px;
    }
}

/*hr {
    margin-top: var(--espaco-5);
    margin-bottom: var(--espaco-5);
}*/

/* CUSTOM */



#dificuldade {
    height : 10px;
    width : 10px;
}

#divPrinc {
    min-height: 62vh;
}

#msg {
    background: var(--cor-w);
    border-radius: var(--espaco-0); 
    max-width: 15%;
    min-width: 150px;
    padding: var(--espaco-1);  
    min-width: 250px;

    div {
        width: 90%;
    }
    
    .erro {
        border-left: var(--espaco-1) solid var(--cor-err-h);
    }

    .acerto {
        border-left: var(--espaco-1) solid var(--cor-act-h);
    }

    .alerta {
        border-left: var(--espaco-1) solid var(--cor-alert-h);
    }

    i {        
        right: 5%;  
        cursor: pointer; 
    }
}



.barraHistograma {    
    background: var(--cor-p1); 
}

.rotuloH {
    writing-mode: sideways-lr;
}

#load {
    background-color: var(--cor-n0);
    position: fixed;
    display: block;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#carregando{
    animation: is-rotating 1s infinite;
    border: 5px solid var(--cor-n1);
    border-top: 5px solid var(--cor-p2);
    border-radius: 50%;
    letter-spacing:2px 
}

@keyframes is-rotating {
    to{transform: rotate(1turn)}
} 

.tam1 {
    width: var(--espaco-3);
    height: var(--espaco-3);
}

.tam2 {
    width: var(--espaco-4);
    height: var(--espaco-4);
}

#formLogin, #formUser {
    margin-top: var(--espaco-5);
}


.cards {
    display: grid;
    grid-template-columns: repeat(4, 23.5%);
    gap: 2%;
    i{
        font-size: var(--fonte-5);
    }
    .cardInt{
        margin-left: var(--espaco-3);
    }
    
    .sombra {
        padding: var(--espaco-3);
    }
}

#tableMaior {
    width: 90%;
}
            
#tableIni, #tableFim {
    width:20%;
    z-index: 200;

    table tr {
        height:80px;
    }       
}

#tableMeio{
    width:60%;
    z-index: 100;
    overflow-X: auto;
    
    table {

        th, td {
            min-width: 100px;
        }

        tr {
            height:80px;
        }
    }
}
            
#tableMenor {
    display: flex;
}



#boxMsg {
    position: fixed;
    right: 0;
    top: 0;
    justify-items: end;
    padding: var(--espaco-1);
    z-index: 9999;
}

#questao {
    margin-bottom: var(--espaco-5);
    background: var(--cor-w);
    p {
        line-height: var(--lh-2);
    }
}

/*#pagamento {
    width: var(--espaco-3);
    height: var(--espaco-3);
    line-height: 0;
}*/


/* AJUSTES */

.fullW {
    width: 100%;
}

.fullH {
    height: 100vh;
}

.sombra {
    box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.1);  
}

.sombraR {
    box-shadow: 2px 0px 4px 0 rgba(0, 0, 0, 0.1);  
}

.sombraL {
    box-shadow: -2px 0px 4px 0 rgba(0, 0, 0, 0.1);  
}

.bCorTransp {
    background: transparent;
}

.hidden {
    display: none;
}

.block {
    display: block;
}

.border0 {
    border: 0;
}

.overflowXS {
    overflow-x: auto;
}

.overflowYS {
    overflow-y: auto;
}

.overflowH {
    overflow: hidden;
}

.overflowA {
    overflow: auto;
}

.ff1 {
    font-family: var(--font-f);
}

.ff2 {
    font-family: var(--font-f2);
}

.lh0 {
    line-height: 0;
}

.fM {
    text-transform: uppercase;
}

.pointer {
    cursor: pointer;
}

.txC {
    text-align: center;
}

.riscar {
    text-decoration: line-through;
}

iframe {
    height:0;
    width:0;
    display:none;
    visibility:hidden;
}

.multiply {
    mix-blend-mode: multiply; 
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}


.left{
    left:0;
    top: 60px;

}

.right{
    right:0;
    top: 60px;

}