:root {

    --corBase: rgb(0,120,180);
    --corBasec: rgb(0,140,200);
    --corBasecc: rgb(80,200,250);
    --corBasee: rgb(0, 90, 150);
    --corBaseee: rgb(0, 80, 120);

    --corComp: rgb(255,210,0);
    --corCompc: rgb(255, 220, 0);
    --corCompe: rgb(220,160,0);

    --dourado: rgb(200,160,50);
    --douradoe: rgb(150,125,35);

    --azul: rgb(0,120,180);
    --azulc: rgb(0,160,220);

    --ciano: rgb(0, 175, 240);
    --cianoc: rgb(0, 200, 250);
    --cianocc: rgb(180,225,255);

    --verde: rgb(0,150,90);
    --verdec: rgb(0,190,80);

    --vermelho: rgb(200,0,0);
    --vermelhoc: rgb(240,0,0);

    --roxo: rgb(100,100,175);
    --roxoc: rgb(140,140,210);

    --cinza253: rgb(253,253,253);
    --cinza250: rgb(250,250,250);
    --cinza245: rgb(245,245,245);
    --cinza240: rgb(240,240,240);
    --cinza235: rgb(235, 235,235);
    --cinza230: rgb(230,230,230);
    --cinza220: rgb(220,220,220);
    --cinza200: rgb(200,200,200);
    --cinza160: rgb(160,160,160);
    --cinza128: rgb(128,128,128);
    --cinza100: rgb(100,100,100);
    --cinza80: rgb(80,80,80);
}

*{
    margin: 0;
    padding: 0;  
    box-sizing: border-box;
    line-height: 120%;
    color: var(--cinza100);    
    scroll-behavior: smooth;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
}

html{
    height: 100%;    
}

body{
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background-color: var(--cinza245);
}

/* Nativos */

h1, h1 a, h1 span, h2, h2 a, h2 span, h3, h3 a, h3 span, h4, h4 a, h4 span, h5, h5 a, h5 span, h6, h6 a, h6 span, b, strong{
    font-weight: 700;
}

h1, h1 a{
    font-size: 3.2rem;
}

h2, h2 a{
    font-size: 2.8rem;
}

h3, h3 a{
    font-size: 2.4rem;
}

h4, h4 a{
    font-size: 2rem;
}

h5, h5 a{
    font-size: 1.6rem;
}

h6, h6 a{
    font-size: 1.4rem;
}

p, a, li, label, button, input, select, textarea, table *{
    font-size: 1.2rem;
}

.fonte100{
    font-size: 1.1rem;
}

img{
    display: block;
    user-select: none;
}

ul{
    list-style-type: none;
}

/* Links e botões */

a, a span{
    text-decoration: none;
    color: var(--corBase);
    transition: color 0.5s ease;
}

button{
    background-color: transparent;
    border: none;
    color: var(--corBase);
    cursor: pointer;
}

.botao,
.botaoComp,
.botaoVazado,
.botaoVerde,
.botaoVermelho,
.botaoRoxo{
    width: auto;
    padding: 0.5rem 0.8rem;
    border-radius: 0.4rem;
    color: white;
    background-color: var(--corBase);
    transition: color 0.5s, background 0.5s, border 0.5s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.botao img,
.botaoComp img,
.botaoVazado img,
.botaoVerde img,
.botaoVermelho img,
.botaoRoxo img{
    height: 1.2rem;
    margin-right: 0.3rem;
}

.botao:hover, .botao:focus{
    color: white;
    background-color: var(--corBasec);
}

.botaoComp{
    background-color: var(--corCompe);
}

.botaoComp:hover, .botaoComp:focus{
    color: white;
    background-color: var(--corComp);
}

.botaoVazado{
    background-color: transparent;
    border: 2px solid white;
}

.botaoVazado:hover, .botaoVazado:focus{
    color: var(--corComp);
    border: 2px solid var(--corComp);
}

.botaoVerde{
    background-color: var(--verde);
}

.botaoVerde:hover, .botaoVerde:focus{
    color: white;
    background-color: var(--verdec);
}

.botaoVermelho{
    background-color: var(--vermelho);
}

.botaoVermelho:hover, .botaoVermelho:focus{
    color: white;
    background-color: var(--vermelhoc);
}

.botaoRoxo{
    background-color: var(--roxo);
}

.botaoRoxo:hover, .botaoRoxo:focus{
    color: white;
    background-color: var(--roxoc);
}

.fileiraBotoes{
    display: flex;
    gap: 0.5rem;
}

.fileiraBotoesEnd{
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 2rem;
}

/* Tabelas */

.containerTabela{
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 2rem 0;
}

.ranking{
    width: 80%;
    margin: 0 auto;
    border-collapse: collapse;
    border-spacing: 0;
}

.ranking th{
    text-align: left;
    font-weight: 700;
    padding: 1rem 0;
}

.ranking tr td{
    border-top: 2px solid var(--cinza220);
    padding: 1rem 0;
    margin: 0;
}

.ranking tr:nth-child(even){
    background-color: white;  
}

.ranking .pos{
    width: 8ch;
    text-align: center;
}

.movCima{
    color: var(--verde) !important;
}

.movBaixo{
    color: var(--vermelho) !important;
}

.movCima span, .movBaixo span{
    display: inline-block;
    transform-origin: center;
    font-size: 120%;
}

.movCima span{
    transform: rotateZ(90deg) translateX(0.15rem);
    color: var(--verde);
}

.movBaixo span{
    transform: rotateZ(-90deg) translateX(-0.15rem);
    color: var(--vermelho);
    margin-right: 0.3rem;
}

.ranking .entradaJogador{
    display: flex;
    align-items: center;
    height: 100%;
}

.ranking .pts{
    width: 8ch;
    text-align: center;
}

.ranking tr td:first-child, .ranking tr td:nth-child(2), .ranking tr td:last-child{
    text-align: center;
    color: var(--corBase);
    font-size: 1.1rem;
}

.rankGeral{
    background-color: white;
    width: 80%;
    margin: 0 auto;
    border-collapse: collapse;
}

.rankGeral th, .rankGeral td{
    padding: 0.8rem 1rem;
    border: 1px solid var(--cinza230);
}

.rankGeral th{
    background-color: var(--dourado);
    color: white;
    border: 1px solid white;
}

.rankGeral .entradaJogador{
    display: flex;
    align-items: center;    
}

.rankGeral .entradaJogador span{
    text-align: left;
}

.rankGeral .pos, .rankGeral .pts, .rankGeral .mov{
    width: 4rem;
}

.rankGeral .jog{
    text-align: left;
}

.rankGeral tr td:first-child, .rankGeral tr td:nth-child(2), .rankGeral tr td:nth-child(4){
    text-align: center;
    color: var(--corBase);
}

.rankGeral tr td:nth-child(3){
    transition: background 0.5s;
}

.rankGeral tr td:nth-child(3):hover{
    background-color: var(--cinza240);
}

.rankGeral tr td:first-child{
    font-weight: 700;
}

.rankGeral tr td:nth-child(4){
    color: var(--douradoe);
}

.tabelaResultadoJogo{
    width: 100%;
    background-color: white;
    padding: 1rem;
    border: 1px solid var(--cinza220);
    border-radius: 10px;
    margin-top: 1.5rem;
    display: grid;
    grid-template-areas: "jogs sets" "rec rec";
    grid-template-columns: 1fr auto;
}

.pJogos .tabelaResultadoJogo{
    margin: 0;
}

.tabelaResultadoJogo .divJogadores, .tabelaResultadoJogo .divSets{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto 1fr 1fr;  
}

.tabelaResultadoJogo .divJogadores{
    grid-area: jogs;       
}

.tabelaResultadoJogo .divSets{
    grid-area: sets;
}

.tabelaResultadoJogo .divSets.esconderSets{
    display: none;
}

.tabelaResultadoJogo .divJogadores a, .tabelaResultadoJogo .divJogadores p{
    display: inline-flex;
    align-items: center;    
}

.tabelaResultadoJogo .divJogadores .jog1, .tabelaResultadoJogo .divJogadores .jog2{
    border-bottom: 1px solid var(--cinza220);
    padding: 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.tabelaResultadoJogo .divSets .sets{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--cinza220);
}

.tabelaResultadoJogo .divSets input{
    background-color: var(--cinza245);
    padding: 0.8rem 0.6rem;
    text-align: center;
}

.tabelaResultadoJogo .divSets input::placeholder{
    color: var(--cinza200);
}

.tabelaResultadoJogo .divRecursos{
    grid-area: rec;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.tabelaResultadoJogo .divRecursos label{
    color: var(--cinza100);
    margin: 0;
}

.tabelaResultadoJogo .divRecursos select{
    background-color: var(--cinza245);
    width: auto;
    padding: 0.8rem 0.6rem;
}

.tabelaControle{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.tabelaControle tr td, .tabelaControle tr th{
    border-bottom: 2px solid var(--cinza220);
    padding: 1.4rem 1rem;
    text-align: left;
} 

.tabelaControle tr th{
    color: white;
    border: none;
    padding: 1rem;
}

.tabelaControle tbody tr{
    background-color: white;
}

.tabelaControle tbody tr:nth-of-type(2n){
    background-color: var(--cinza235);
}

.tabelaControle .corCat{
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.tabelaControle .grupoBotoes{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tabelaControle .fotoCircular{
    margin: 0;
}

.tabelaControle .colunaAcoes{
   width: 1rem;
}

/*Formulários*/

::placeholder {
    color: var(--cinza128);
    opacity: 1;
}

input, select, textarea{
    width: 100%;
    padding: 0.8rem;
    border-radius: 5px;
    border: 1px solid var(--cinza220);  
    color: var(--cinza128);
    outline-color: transparent;
    background-color: white;
    transition: color 0.5s ease, border 0.5s ease;
}

select{
    cursor: pointer;
}

.selectPainel{
    width: auto;
    background-color: var(--cinza245);
    padding: 0.7rem 1.2rem;
}

textarea{ 
    height:10rem;
    resize: none;
}

input:focus, select:focus, textarea:focus{
    outline:none;
    border: 1px solid var(--corBasec);
    color: var(--corBase);
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

input[type="search"]::-ms-clear {
    display: none;
    height: 0;
    width : 0;
}

input[type="search"]::-ms-reveal {
    display: none;
    height: 0;
    width : 0;
}

label{
    display: block;
    margin: 2rem 0 0.5rem 0;
    color: var(--corBasee);
}

.formContato{
    background-color: var(--cinza250);
}

.formContato .textoVermelho{
    margin: 1.5rem 0 2rem 0;
}

.formRodape, .fileiraBotoes{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.fileiraBotoesCentro{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.filtroCat{
    margin: 2rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filtroCat label{
    display: block;
    color: var(--corBase);
    margin: 0;
}

.filtroCat select{
    display: block;
    width: 10rem;
    border: 1px solid var(--cinza220);
    border-radius: 5px;
    outline: none;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    transition: border 0.5s;
    margin-left: 0.5rem;
    background-color: white;
}

.filtroCat select:focus{
    border: 1px solid var(--corBasec);
}

.filtroCat .botao{
    margin-left: 1rem;
}

.secaoRadios{
    margin: 2rem 0;
}

.secaoRadios .opcaoRadio{
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 1rem;
}

.secaoRadios .opcaoRadio input{
    width: auto;    
}

.secaoRadios .opcaoRadio input:checked, .secaoRadios .opcaoRadio input:checked ~ label{
    color: var(--corBase);
}

.secaoRadios .opcaoRadio label{
    margin: 0;
    color: var(--cinza100);
}

.alertaCampos{
    color: var(--vermelho);
    margin: 2rem 0;
}

.dicaSenha, .dicaP{
    color: var(--corBase);
    margin-top: 1rem;
}

.areaDestaque, .areaDestaqueDesativada{
    padding: 2rem;
    background-color: var(--cinza240);
    border: 1px solid var(--corBase);
    border-radius: 5px;
}

.areaDestaqueDesativada{
    border: 1px solid var(--vermelho);
}

.areaDestaque label, .areaDestaqueDesativada label{
    margin: 0 0 1rem 0;
}

.areaDestaque label h5{
    color: var(--corBase);
}

.areaDestaqueDesativada label h5{
    color: var(--vermelho);
}

.areaDestaque select, .areaDestaque select:focus{
    color: var(--corBase);
    border: 1px solid var(--corBase);
}

.areaDestaqueDesativada select, .areaDestaqueDesativada select:focus{
    color: var(--vermelho);
    border: 1px solid var(--vermelho);
}

.areaDestaque p, .areaDestaqueDesativada p{
    margin-top: 1rem;
}

.areaDestaque .p1, .areaDestaqueDesativada .p2{
    display: none;
}

/* Modal compartilhamento */

.modalCompartilhamento{
    position: fixed;
    z-index: 2;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,90,150,0.8);
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.modalCompartilhamento .frame{
    width: 48rem;
    background-color: var(--cinza253);
    padding: 3rem;
    border-radius: 10px;
}

.modalCompartilhamento h3, .modalCompartilhamento .botoesModal{
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modalCompartilhamento h3 img{
    height: 2rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.modalCompartilhamento .frame > p{
    margin: 1rem 0;
}

.modalCompartilhamento .campoLink{
    width: 100%;
    margin-bottom: 1rem;
    padding: 1rem;
    color: var(--ciano);
}

.modalCompartilhamento .campoLink:focus{
    border-color: var(--cianoc);
}

.modalCompartilhamento .rodape{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modalCompartilhamento .mensagem{
    width:100%;
    margin-right: 1rem;
    color: var(--azul);
}

#botaoCopiarLink{
    display: flex;
    align-items: center;
    background-color: var(--ciano);
    transition: background 0.5s ease;
}

#botaoCopiarLink:hover{
    background-color: var(--cianoc);
}

#botaoCopiarLink img{
    height: 1.2rem;
    margin-right: 0.3rem;
}

#botaoCopiarLink span{
    color: white;
}

#botaoFecharModal{
    margin-right: 0;
    background-color: var(--verde);
    transition: background 0.5s ease;
}

#botaoFecharModal:hover{
    background-color: var(--verdec);
}

/* Banners */

.bannerMenor{
    width: 100%;
    height: 22vw;
    position: relative;
    background-color: var(--corCompe);
    overflow: hidden;
}

.bannerMenor .imgAlt{
    display: none;
}

.bannerMenor::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 40%;
    left: 0;
    bottom: 0;
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.4));
}

.bannerMenor::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 80%;
    left: 0;
    top: 0;
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0));
}

/* Genéricos */

.centralizarDiv{
    padding: 2.5rem 5%;
}

.centralizarZero{
    padding: 2.5rem 0;
}

.camposFlex{
    display: flex;
    gap: 0.5rem;
}

.divFlex{
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.linkRetorno{
    display: inline-block;
    margin-bottom: 2rem;
}

.componentesFlex{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 1rem;
}

.componentesFlex > *{
    flex: 0 0 32%;
}

.largura100{
    width: 100%;
}

.altura100{
    height: 100%;
}

.titulo{
    text-align: center;
    color: var(--corBase);
}

.titulol{
    color: var(--corBase);
}

.tituloDourado, .subtitulo{
    text-align: center;
    color: var(--dourado);
}

.complementoTitulo{
    text-align: center;
    margin-top: 0.5rem;
}

.complementoTitulol{
    margin-top: 0.5rem;
}

.linhaFinal{
    text-align: center;
    margin-top: 2rem;
}

.fotoCircular{
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.fotoCircular img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0; 
}

.textoEsquerda{
    text-align: left;
}

.textoDireita{
    text-align: right;
}

.textoCentro{
    text-align: center;
}

/* Cores de texto e fundo */

.textoVerde{
    color: var(--verde);
}

.fundoVerde{
    background-color: var(--verde);
}

.textoVermelho{
    color: var(--vermelho);
}


.fundoVermelho{
    background-color: var(--vermelho);
}

.pErro{
    color: var(--vermelho);
    margin: 1rem 0 1.5rem 0;
}

.pDica{
    color: var(--corBase);
    margin: 1rem 0 1.5rem 0;
}

.pAlerta{
    text-align: center;
    border: 1px solid var(--vermelho);
    padding: 1rem;
    margin: 1rem auto;
    background-color: white;
    width: 60rem;
    max-width: 100%;
}

.textoBase{
    color: var(--corBase);
}

.fundoBase{
    background-color: var(--corBase);
}

.textoComp{
    color: var(--corCompe);
}

.fundoComp{
    background-color: var(--corCompe);
}

.fundoRoxo{
    background-color: var(--roxo);
}

/* Página Login */

.paginaLogin .linkSenha{
    display: inline-block;
    margin-top: 0.8rem;
}

.paginaLogin .textoErroLogin{ 
    margin: 1.5rem 0;
}

/* Página retorno mensagem e inexistente */

.paginaRetorno{
    width: 80%;
    margin: 5rem auto 2rem auto;
}

.paginaRetorno img{
    display: block;
    width: 8rem;
    margin: 0 auto 1rem auto;
}

.paginaRetorno h1, .paginaRetorno p, .paginaRetorno a{
    display: block;
    text-align: center;
}

.paginaRetorno p{
    margin: 0.5rem 0 1.5rem 0;
}

/* Header */

header{
    position: absolute;
    width: 100%;    
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5%;
    z-index: 3;
}

.headerFundo{
    height: 6rem;
    background-color: var(--corBasee);
}

#pagAtual{
    color: var(--corComp);
}

header .logo{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    transition: transform 0.5s;
}

header .logo:hover{
    transform: translateY(-0.2rem);
}

header .logo img{
    height: 60%;
    margin-right: 0.5rem;
}

header .logo h6{
    color: white;
    line-height: 100%;   
}

header .direita{
    display: flex;
    align-items: center;
    height: 100%;
}

header .botaoLogin{
    margin-left: 1rem;    
    transition: background 0.5s;   
}

header .botaoLogin:hover{
    background-color: var(--corComp);
    color: black; 
}

header .botaoPerfil{ 
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    overflow: auto;
    margin-left: 1rem;
    transition: transform 0.5s;
}

header .botaoPerfil:hover{
    transform: translateY(-0.2rem);
}

header .botaoPerfil img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

header nav{
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

header .topoMenu{
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 2.5rem 1.5rem 1.5rem 1.5rem;
}

header .topoMenu h4{
    color: var(--corCompe);
}

header .rodapeMenu{
    border-top: 1px solid var(--cinza220);
    margin: 1rem 1.5rem 0 1.5rem; 
    padding-top: 1rem;
    display: none; 
}

header .rodapeMenu p{
    color: var(--cinza160);
    font-size: 1rem;
}

header .rodapeMenu a{
    font-size: 1rem;
}

header .rodapeMenu a:hover{
    color: var(--corBasec);
}

header .itemMenu, header .itemSubmenu{
    color: white;
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    position: relative;
    transition: color 0.5s, background 0.5s, padding 0.5s;
}

header .itemSubmenu{
    height: auto;
    padding: 0.5rem 0;
}

header .itemMenu svg, header .itemSubmenu svg{
    height: 1.3rem;
    margin-right: 0.5rem;
}

header .itemMenu svg{
    display: none;
}

header .itemMenu svg *, header .itemSubmenu svg *{
    fill:none;
    stroke: var(--cinza100);
    stroke-width: 5px;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition: stroke 0.5s;
}

header .itemSubmenu svg *{
    stroke: white;
}

header .itemMenu:hover svg *, header .itemSubmenu:hover svg *{
    stroke: var(--corCompe);
}

header .itemMenu:hover, header .itemSubmenu:hover{
    color: var(--corComp);
}

header .areaSubmenu{
    position: relative;
    height: 100%;
}

header .submenu{
    display: none;
    height: 0;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 4.5rem;
    transition: height 0.5s, opacity 1s;
    overflow: hidden;
    z-index: 4;
}

header .areaSubmenu:hover .submenu{
    height: 11rem;
    opacity: 1;
}

header .botaoMenu{
    height: 28%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

header .botaoMenu > div{
    width: 1.8rem;
    height: 2px;
    background-color: white;
    border-radius: 1rem;
    transition: background 0.5s;
}

header .botaoMenu:hover > div{
    background-color: var(--corComp);
}

header .botaoFecharMenu b{
    color: var(--corBase);
}

/* Footer */

footer{
    background-color: var(--cinza80);
    margin-top: auto;
}

.footerLogo{
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    width: 15rem;
}

.footerLogo img{
    height: 3rem;
    margin-right: 0.3rem;
}

footer p, footer a, .footerLogo .nome{    
    color: var(--cinza200);
    transition: color 0.5s ease;
}

.footerLogo .nome{
    line-height: 100%;
}

footer nav{
    padding: 1rem 0 0 0;
    border-top: 1px solid var(--cinza128);
    border-bottom: 1px solid var(--cinza128);
}

footer nav a{
    display: inline-block;
    margin: 0 0.5rem 1rem 0;
}

footer a:hover, .footerLogo:hover .nome{
    color: var(--corCompc);
}

footer .creditosFooter{
    padding: 1rem 0;
}

/* Index */

.banner{
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5%;
    overflow: hidden;
    width: 100%;
    height: 100vh;
}

.banner::before, .banner::after{
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 40vh;    
    background-blend-mode: multiply;
    z-index: -1;
}

.banner::before{
    top: 0;
    background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0));
}

.banner::after{   
    bottom: 0;
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
}

.banner h6{
    color: white;
}

.banner h1{
    color: var(--corCompc);
    margin: 1rem 0 2rem 0;
}

.banner video, .banner .primeiroFrame, .banner .fundoBackup{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;    
    z-index: -2;
    object-fit: cover;
    overflow: hidden;
}

.banner .primeiroFrame{   
    z-index: -3;
}

.banner .fundoBackup{
    background-color: var(--corBaseee);
    z-index: -4;
}

.banner, .banner::before, .banner video{
    min-height: 45rem;
}

.banner .linkSvg{
    display: inline-block;    
    width: 2rem;
    position: absolute;
    bottom: 6rem;
}

.banner .linkSvg svg *{
    fill:none;
    stroke: white;
    stroke-width:20;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-miterlimit:10;
    opacity: 0;
    animation: animaseta 4s ease infinite;
}

@keyframes animaseta{

    0%, 100%{
        opacity: 0;
    }

    50%{
        opacity: 1;
    }
}

.banner .linkSvg svg polyline:nth-child(2){
    animation-delay: 200ms;
}

.banner .linkSvg svg polyline:last-child{
    animation-delay: 400ms;
}

.indexJogos{
    background-color: var(--cinza235);
}

.indexJogos .containerJogos{
    width: 100%;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    position: relative;    
}

.indexJogos .listaJogos, .indexJogos .programacaoJogos{
    width: 100%;
    flex-shrink: 0;
    top: 0;
    left: 0;
    transition: transform 0.4s;
}

.indexJogos .programacaoJogos{
    position: absolute;
    transform: translateX(110%);
}

.indexJogos .jogo{
    display: grid;
    grid-template-columns: 8% 92%;   
    grid-template-areas:    "h2h jogador1"
                            "h2h jogador2"
                            "cat dataLocal";
    background-color: white;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    padding: 0.8rem;
}

.indexJogos .h2h{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--corBase);
    color: white;
    writing-mode:vertical-lr;
    padding: 0 0.3rem;
    grid-area: h2h;
}

.indexJogos .jogador1, .indexJogos .jogador2{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    border-bottom: 2px solid var(--cinza220);
}

.indexJogos .jogador1{
    grid-area: jogador1;
}

.indexJogos .jogador2{
    grid-area: jogador2;
}

.check{
    color: var(--verde);
    font-weight: 700;
    margin-left: 0.3rem;    
}

.indexJogos .fotoNome, .indexJogos .sets{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.indexJogos .sets p{
    padding: 0 0.5rem;
}

.indexJogos .pInfoJogos{
    margin: 2rem 0;
}

.indexJogos .categoria{
    grid-area: cat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.jrecurso{
    margin-left: 0.5rem;
    color: var(--vermelho);
}

.indexJogos .dataLocal{  
    grid-area: dataLocal;   
    display: flex;
    align-items: flex-start;
    padding: 0.8rem;
}

.indexJogos .dataLocal img{
    height: 1rem;
    margin-right: 0.5rem;
    position: relative;
    top: 0.3rem;
}

.indexJogos .programacaoJogos .dia{
    margin: 3rem 0 0 0;
}

.indexJogos .programacaoJogos .dia:first-child{
    margin-top: 0;
}

.indexJogos .programacaoJogos h5{
    color: var(--corBase);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.indexJogos .programacaoJogos h5 img{
    height: 1.3rem;
    margin-right: 0.5rem;
}

.indexJogos .jogoPrevisto{
    display: flex;
    background-color: white;
    padding: 0.8rem;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

.indexJogos .jogoPrevisto .horario{
    background-color: var(--corBaseee);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.7rem;
    border-radius: 5px;
}

.indexJogos .jogoPrevisto .horario p{
    color: white;
}

.indexJogos .jogoPrevisto .horario img{
    width: 1.5rem;
    aspect-ratio: 1 / 1;
    margin-bottom: 0.5rem;
}

.indexJogos .jogoPrevisto .jogadores{
    width: 100%;
    padding: 0.7rem;
}

.indexJogos .jogoPrevisto .jogador{
    display: flex;
    align-items: center;
    margin-bottom: 0.8rem;
}

.indexJogos .jogoPrevisto .linhaBaixo{
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cinza200);
}

.indexRanking{
    background-color: var(--cinza245);
}

.indexChamada{
    display: flex;
    align-items: center; 
    justify-content: center;
    gap: 2.5rem;   
    background-image: url("/img/banners/tracos30.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--cinza240);
    background-attachment: fixed;
}

.indexChamada img{
    width: 28rem;
}

.indexChamada .ladoDireito p{
    margin: 1rem 0;
}

.indexChamada .ladoDireito .botao{
    display: inline-flex;    
}

.indexQuadras{
    text-align: center;
    padding: 6rem 5%;
    background-image: url(../img/banners/quadra.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-color: var(--corBaseee);
}

.indexQuadras h1{
    color: rgb(160, 230, 255);
}

.indexQuadras > p{
    color: white;
    margin: 0.5rem 0 1rem 0;
}

.indexQuadras .botaoVazado{
    display: inline-block;
}

.indexParceiros{
    background-color: var(--cinza245);
}

.indexParceiros .logos{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    margin-top: 1rem;
}

.indexParceiros .logo{
    width: 16%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 20px;
    opacity: 1;
    transition: background 0.5s ease, transform 0.5s ease, box-shadow 0.5s ease, opacity 2s ease;
}

.indexParceiros .logo:hover{
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    background-color: white;
    transform: scale(105%);
}

.indexParceiros .logo > img{
    width: 60%;
    height: 60%;
    object-fit: contain;
}

/* Página Quem somos */

.pagBio .quemSomos h1, .pagBio .regulamentoGeral h1{
    margin-bottom: 1.5rem;
}

.pagBio .quemSomos p{
    text-align: center;
    line-height: 160%;
}

.pagBio ol{
    list-style-type:decimal;
    margin: 1.5rem 0 1.5rem 2rem;
}

.pagBio ol li{
    line-height: 160%;
    margin-bottom: 1rem;
}

.pagBio .regulamentoGeral{
    background-color: var(--cinza240);
}

/* Página Jogadores */

.areaJogadores{
    background-color: var(--cinza245);
}

.pesquisaJogador{
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 2rem 0;    
}

.pesquisaJogador .campoPesquisa{
    display: flex;
    justify-content: center;
    width: 50rem;
    max-width: 100%;
}

.pesquisaJogador input[type=search]{
    width: 100%;
    border: 1px solid var(--cinza220);
    border-right: none;
    border-radius: 5px 0 0 5px;
    transition: color 0.5s, border 0.5s;    
} 

.pesquisaJogador input[type=search]:focus{
    color: var(--corBasee);
    border: 1px solid var(--corBasec);
    border-right: none;
}

.pesquisaJogador .lupa{
    width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border: 1px solid var(--cinza220);
    border-left: none;
    border-radius: 0 5px 5px 0;
    transition: background 0.5s, border 0.5s;
    cursor: default;
}

.pesquisaJogador input[type=search]:focus ~ .lupa{
    border: 1px solid var(--corBasec);
    border-left: none;
}

.pesquisaJogador .lupa svg{
    width: 50%;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
}

.pesquisaJogador .lupa .iconeLupa *{
    fill: none;
    stroke: var(--cinza200);    
    stroke-width: 10px;
    stroke-linecap:round;
    transition: stroke 0.5s;
}

.pesquisaJogador .lupa .iconeX{
    display: none;
}

.pesquisaJogador .lupa .iconeX *{
    fill: none;
    stroke: var(--corBase);    
    stroke-width: 10px;
    stroke-linecap:round;
    transition: stroke 0.5s;
}

.pesquisaJogador .filtroCat{
    margin: 0;
}

.pesquisaJogador .filtroCat select{
    height: 100%;
}

.mensagemResultado{
    text-align: center;
    margin-bottom: 2rem;
    color: var(--vermelho);
    display: none;
}

.areaJogadores .jogador{
    background-color: white;
    display: flex;
    align-items: center;
    padding: 1.5rem;
    border: 1px solid var(--cinza235);
    border-radius: 10px;
    transition: transform 0.5s, box-shadow 0.5s, border 0.5s;
}

.areaJogadores .jogador:hover{
    border: 1px solid var(--corBasecc);
    box-shadow: 0 5px 5px rgba(0,0,0,0.1);
}

.areaJogadores .fotoCircular{
    width: 5rem;
    height: 5rem;
    margin-right: 0.8rem;
}

.areaJogadores .jogador .ladoDados{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.areaJogadores .nome h5{
    color: var(--corBase);
}

.areaJogadores .apelido{
    margin: 0.2rem 0 0.4rem 0;
    color: var(--cinza128);
    display: inline-block;
}

.areaJogadores .rank{
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--douradoe);
}

.areaJogadores .rank img{
    height: 1.1rem;
}

/* Página locais */

.pagLocais .local{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4rem 5%;
}

.pagLocais .local:first-child{
    padding-top: 0;
}

.pagLocais .localInvertido{
    flex-direction: row-reverse;
    background-color: var(--cinza240);
}

.pagLocais .fotoLocal{
    width: 50%;
    flex-shrink: 0;
    margin: 0 2rem 0 0;
}

.pagLocais .localInvertido .fotoLocal{
    margin: 0 0 0 2rem;
}

.pagLocais .dadosLocal{
    width: 50%;
}

.pagLocais .tagPublica{
    display: inline-block;
    margin-bottom: 0.5rem;
    padding: 0.3rem 0.5rem;
    background-color: var(--corBase);
    color: white;
    border-radius: 5px;
}

.pagLocais .nome{
    color: var(--corCompe);
    margin-bottom: 0.5rem;
}

.pagLocais .endereco{
    display: block;
}

.pagLocais .detalhamento{
    margin-top: 1rem;
}

.pagLocais .relHorarios{
    margin: 1rem 0;
}

.pagLocais .relHorarios h6{
    color: var(--corBaseee);
}

.pagLocais .horarios{
    display: flex;
    flex-wrap: wrap;    
    gap: 0.7rem;
    margin-top: 0.5rem;
}

.pagLocais .horarios .dia{
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--corBaseee);
    border-radius: 5px;
    color: var(--corBaseee);
    font-size: 0.9rem;
}

.pagLocais .fileiraBotoes{
    margin-top: 1rem;
    justify-content: flex-start;    
}

.pagRank,
.pagResetSenha{
    background-color: var(--cinza245);
}

.pagRank .complementoTitulo{
    margin-bottom: 2rem;
}

.pagResetSenha .msgRetorno{
    margin-top: 1.5rem;
}

.pagResetSenha .dica{
    text-align: center;
    margin-top: 1.5rem;
    color: var(--corBasec);
}

.pagJogador .topoJogador{
    background-image: url("/img/banners/tracos30.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--cinza235);
    background-attachment: fixed;
}

.pagJogador .topoJogador .divFlex{
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagJogador .fotoJogador{    
    width: 14rem;
    height: 14rem;
    border-radius: 50%;
    margin-right: 1rem;
}

.pagJogador .topoJogador h1{
    color: var(--corBasee);
}

.pagJogador .classificacoes{
    display: flex;
    align-items: center;
    margin: 0;
    gap: 1.5rem; 
}

.pagJogador .classificacao{
    display: flex;
    align-items: center;
    gap: 0.5rem;    
}

.pagJogador .topoJogador h2{
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.pagJogador .posicao{
    color: var(--dourado);
}

.pagJogador .cat{
    background-color: var(--dourado);
    font-size: 1rem;
    font-weight: 500;
    padding: 0.2rem 0.3rem;
    color: white;
    border-radius: 5px;
    position: relative;
    top: 0.2rem;
}

.pagJogador .maisDados{
    background-color: var(--cinza250);
}

.pagJogador .maisDados h4{
    text-align: center;
    color: var(--corBase);
}

.pagJogador .maisDados table{
    width: 50rem;
    max-width: 100%;
    margin: 1.5rem auto 0 auto;
    border-collapse: collapse;
    border-spacing: 0;
}

.pagJogador .maisDados table tr td{
    border-bottom: 1px solid var(--cinza220);
    padding: 1rem 0;
}

.pagJogador .maisDados table tr td:first-child{
    text-align: right;
    padding-right: 0.3rem;
    color: var(--corBaseee);    
}

.pagJogador .maisDados table tr td:last-child{
    padding-left: 0.3rem;
}

.pagJogador .contatosJogador{
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.pagJogador .contatosJogador a{
    display: inline-block;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
}

.pagJogador .contatosJogador a img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.secaoCompartilhar{
    text-align: center;
    background-color: var(--cinza240);
    padding: 2rem 5%;
}

.secaoCompartilhar a{
    display: inline-block;
    margin: 0.4rem 0 0.8rem 0;
    word-break: break-all;
}

.secaoCompartilhar .botao{
    display: flex;
    align-items: center;
    margin: 0 auto;
    font-size: 1rem;
}

.secaoCompartilhar .botao img{
    width: 1rem;
    margin-right: 0.3rem;
}

.pagJogador .secaoJogos{
    background-color: var(--cinza250);
}

.pagJogador .secaoJogos h2{
    color: var(--corBase);
    text-align: center;
}

.pagJogador .tabelaJogos{
    width: 100%;
    background-color: white;
    border-collapse: collapse;
}

.pagJogador .tabelaJogos *{
    text-align: left;
}

.pagJogador .tabelaJogos thead th{
    background-color: var(--corBasee);
    border-bottom: 2px solid var(--cinza200);
    padding: 0.5rem;
    color: white;
}

.pagJogador .tabelaJogos tbody td{
    padding: 0.5rem;
}

.pagJogador .tabelaJogos tbody tr{
    background-color: white;
    border-bottom: 2px solid var(--cinza220);
}

.pagJogador .tabelaJogos tbody tr:nth-child(even){
    background-color: var(--cinza240);
}

.pagJogador .tabelaJogos .colunaCor{
    width: 1rem;
}

.pagJogador .resumoJogos{ 
    width: 100%;
}

.pagJogador .resumoJogos .resJogos, .pagJogador .resumoJogos .resSets{
    display: grid;
    grid-template-columns: 25ch 25ch 25ch;
    align-items: center;
    border-bottom: 1px solid var(--cinza220);
    gap: 1rem;
}

.pagJogador .resumoJogos h5{
    padding: 0.5rem;
    color: var(--corBaseee);
}

.pagJogador .resumoJogos p{    
    padding: 0.5rem;
}


/* Página Criar Perfil */

.pagCriarPerfil{
    background-color: var(--cinza245);
}

.alterarFotoJogador{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 2rem 0;
}

.alterarFotoJogador input[type=file]{
    display: none;
}

.alterarFotoJogador .circuloFoto{
    border-radius: 50%;
    overflow: hidden;
    width: 11rem;
    height: 11rem;
    border: 2px solid var(--cinza250);
    transition: border 0.5s;
    cursor: pointer;
    margin: 0;
}

.alterarFotoJogador .circuloFoto:hover{
    border: 2px solid var(--corBasecc);
}

.alterarFotoJogador .circuloFoto img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.alterarFotoJogador .botao{
    margin: 0;
}

#estadoNasc, #estadoMora{
    width: auto;
}

/* Painel de Controle */

.navPainel{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin: 2rem 0;
}

.navPainel .itemMenu{
    width: 20rem;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    padding: 1.5rem;  
    transition: transform 1s;
}

.navPainel .itemMenu:hover{
    transform: translateY(-0.4rem);
}

.navPainel .itemMenu h5{
    display: block;
    text-align: center;
    color: var(--corBase);
    transition: color 0.5s;
}

.navPainel .itemMenu svg{
    display: block;
    margin: 0 auto 1rem auto;
    height: 3.5rem;    
}

.navPainel .itemMenu svg *{
    fill:none;
    stroke: var(--corCompe);
    stroke-width: 3px;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition: stroke 0.5s;
}

.navPainel .itemMenu:hover svg *{
    stroke: var(--corComp);
}

.navPainel .itemMenu:hover h5{
    color: var(--corBasec);
}

/* Painel */

.aVoltar{
    display: inline-block;
    margin-bottom: 1.5rem;
}


/* Painel - Página Categorias */

.pCategorias h1{
    color: var(--verde);
}

/* Painel - Página Temporadas */

.pTemporadas h1{
    color: var(--corCompe);
}

/* Painel - Página Rodadas */

.pRodadas h1{
    color: var(--roxo);
}

/* Painel - Página Jogadores */


.pJogadores .campoPesquisa{
    width: 100%;
}

/* Painel Jogos */

.pJogos .filtroCat{
    margin: 1.5rem 0 0 0;
}

.pJogos > .centralizarDiv{
    padding-bottom: 0;
}

.pJogos .fraseFetch{
    margin: 1.5rem 0;
    text-align: center;
}

.pJogos form{
    padding: 2.5rem 5%; 
    background-image: linear-gradient(var(--cinza245) 80%, var(--cinza235));
}

.pJogos .containerJogos{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

.pJogos .fileiraBotoesEnd{
    margin-top: 1rem; 
}

.pJogos .dataHoraLocal label{
    margin: 0;
}

.pJogos .dataHoraLocal input, .pJogos .dataHoraLocal select{
    margin: 0.5rem 0 1rem 0;
}

.moduloCrop{
    width: 100%;
    position: fixed;
    height: 100%;
    inset: 0;
    overflow: auto;
    background-color: rgba(0,0,0,0.8);
    z-index: 6;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 0;
}

.moduloCrop .modulo{
    width: 50rem;
    max-width: 90%;
    padding: 2rem;
    background-color: var(--cinza250);
    border-radius: 5px;
}

.moduloCrop .topo{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.moduloCrop .containerImagem{
    margin: 1rem 0;
    padding: 1rem 0;
    border-top: 1px solid var(--cinza235);
    border-bottom: 1px solid var(--cinza235);
    width: 100%;
}

.moduloCrop .containerImagem img{
    width: 100%;
}

.moduloCrop .rodape{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.moduloMensagem{
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 8;
    transform: translateX(0);
    opacity: 1;
    transition: opacity 0.5s;
}

.moduloMensagem .divMensagem{
    width: 50rem;
    max-width: 90%;
    background-color: var(--cinza250);
    padding: 3rem;
    border-radius: 5px;
}

.moduloMensagem .divMensagem img{
    width: 5.5rem;
    margin: 0 auto;
}

.moduloMensagem .divMensagem h2{
    text-align: center;
    margin: 0.5rem 0 0 0;
}

.moduloMensagem .divMensagem p{
    text-align: center;
    margin: 0.7rem 0 1.5rem 0;
}

.moduloMensagem .divMensagem .fileiraBotao{
    display: flex;
    align-items: center;
    justify-content: center;
}


@media screen and (max-width: 1200px){

    /* Ranking */

    .ranking, .rankGeral{
        width: 100%;
    }    

    /* Modal Compartilhamento */   

    .modalCompartilhamento .frame{
        width: 90%;
        padding: 2.5rem;
    }

    /* Página retorno mensagem e inexistente */

    .paginaRetorno{
        margin: 2rem auto;
    }    

    .paginaRetorno img{
        width: 6.5rem;
    }
    
    /* Index */

    .componentesFlex > *{
        flex: 0 0 48%;
    }

    .indexParceiros .logo{
        width: 25%;
        border-radius: 10px;
    }

    /* Página jogadores */

    .areaJogadores .fotoCircular{
        width: 4.5rem;
        height: 4.5rem;
        margin-right: 0.5rem;
    }  


    /* Painel de Controle */    

    .navPainel .itemMenu{
        width: 45%; 
    }    
 
}

@media screen and (max-width: 950px){

    /* Nativos */

    h1, h1 a{
        font-size: 3rem;
    }
    
    h2, h2 a{
        font-size: 2.6rem;
    }
    
    h3, h3 a{
        font-size: 2.2rem;
    }
    
    h4, h4 a{
        font-size: 1.8rem;
    }
    
    h5, h5 a{
        font-size: 1.4rem;
    }
    
    h6, h6 a{
        font-size: 1.2rem;
    }
    
    p, a, li, label, button, input, select, textarea, table *{
        font-size: 1.1rem;
    }
    
    .fonte100{
        font-size: 1rem;
    }

    /* Banners */

    .bannerMenor{
        height: 53.5vw;        
    }    
    
    .bannerMenor .imgAlt{
        display: block;
    }

    .bannerMenor .imgPrincipal{
        display: none;
    }

    /* Genéricos */

    .centralizarDiv{
        padding: 2rem 5%;
    }

    .centralizarZero{
        padding: 2rem 0;
    }

    .linkRetorno{
        margin-bottom: 1.5rem;
    }

    .componentesFlex > *{
        flex: 0 0 100%;
    }

    /* Tabelas */ 

    .tabelaControle .corCat{
        width: 1.5rem;
        height: 1.5rem;
    }

    .pagJogador .tabelaJogos thead{
        display: none;
    }

    .pagJogador .tabelaJogos tbody tr{
        border: 1px solid var(--cinza220);
        padding: 1rem 1rem 1rem 2rem;;
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;  
        position: relative;      
    }

    .pagJogador .tabelaJogos tbody td::before{
        content: attr(data-celula);
        color: var(--cinza100);
        font-weight: 700;
    }

    .pagJogador .tabelaJogos tbody tr td:first-child{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 1rem;
    }

    .pagJogador .tabelaJogos tbody td{
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0;
    }

    .pagJogador .resumoJogos .resJogos, .pagJogador .resumoJogos .resSets{
        grid-template-columns: 1fr;     
        border-bottom: 1px solid var(--cinza220);
        gap: 0.8rem;
        padding: 1rem 0;
    }

    .pagJogador .resumoJogos h5, .pagJogador .resumoJogos p{
        padding: 0;
    }

    .pagJogador .resumoJogos .aproveitamento{
        padding: 1rem 0;
    }    

    /* Página retorno mensagem e inexistente */    

    .paginaRetorno img{
        width: 5rem;
    } 

    /* Header e Footer */
    
    header{
        height: 5rem;
    } 

    .headerFundo{
        height: 5rem;
    }

    header .botaoMenu, header .topoMenu{ 
        display: flex;
    }

    header .rodapeMenu, header .itemMenu svg, header .itemSubmenu svg{
        display: block;
    }

    header nav{
        position: fixed;
        top: 0;
        right: -100%;
        bottom: 0;
        width: 100%;
        background-color: var(--cinza250);
        display: block;
        overflow-y: auto;
        transition: right 0.5s;
        padding: 10%;
        z-index: 2;
    }

    header .itemMenu, header .itemSubmenu, #pagAtual{
        color: var(--cinza100);
        height: auto;
        padding: 1rem 1.5rem;
    } 
    
    header .itemSubmenu{
        padding: 1rem 3rem;        
    }

    header .itemSubmenu svg *{
        stroke: var(--cinza100);
    }

    header .itemMenu:hover, header .itemSubmenu:hover, #pagAtual:hover{ 
        color: var(--corBase);   
        padding: 1rem 1.5rem 1rem 2.5rem;
        background-color: white;
    }

    header .itemSubmenu:hover{     
        padding: 1rem 3rem 1rem 4rem;     
    }

    header .itemMenu::before, header .itemSubmenu::before{
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 0;
        background-color: var(--corComp);
        transition: width 0.5s;
    }

    header .itemMenu:hover::before, header .itemSubmenu:hover::before{
        width: 1rem;
    }

    header .submenu{
        display: block;
    }

    header .submenu, header .areaSubmenu, header .areaSubmenu:hover .submenu{  
        height: auto;
        opacity: 1;
        position: static;
    }    

    header .botaoLogin{
        margin-left: 1rem; 
    }

    .footerLogo{
        width: 12rem;
    }
    
    .footerLogo img{
        height: 2.4rem;
    }

    /* Index */   

    .indexJogos .programacaoJogos .dia{
        margin: 2rem 0 0 0;
    }  
    
    .indexParceiros .logo{
        width: 32%;
    }

    .indexParceiros .logo img{
        width: 65%;
        height: 65%;
    }

    .indexChamada{
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .indexChamada img{
        width: 40%;
    } 
    
    .indexChamada .ladoDireito h1, .indexChamada .ladoDireito p{
       text-align: center;
    }

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

    
    /* Página Locais */ 
    
    .pagLocais .local, .pagLocais .localInvertido{
        flex-direction: column;
        padding: 3rem 5%;
    }   

    .pagLocais .fotoLocal, .pagLocais .localInvertido .fotoLocal{
        width: 100%;
        flex-shrink: 0;
        margin: 0 0 1rem 0;
    }
    
    .pagLocais .dadosLocal{
        width: 100%;
    }

    /* Página jogador */

    .pagJogador .topoJogador .divFlex{
        flex-direction: column;
    }

    .pagJogador .fotoJogador{    
        width: 12rem;
        height: 12rem;
        margin: 0 0 0.5rem 0;
    }  

    .pagJogador .topoJogador h1, .pagJogador .topoJogador h5{
        text-align: center;
    }
    
    .pagJogador .classificacoes{
        justify-content: center;   
    }

    .pagJogador .maisDados table tr td{
        padding: 0.8rem 0;
    }

    .pagJogador .contatosJogador a{
        width: 1.8rem;
        height: 1.8rem;    
    }

    /* Módulo mensagem */

    .moduloMensagem .divMensagem img{
        width: 5rem;  
    }
    
    .moduloMensagem .divMensagem h1{
        margin: 0.2rem 0 0 0;
    }
    

    /* Painel - Página perfil */    

    .alterarFotoJogador .circuloFoto{
        width: 10rem;
        height: 10rem;
    }
}

@media screen and (max-width: 650px){ 
    
    /* Nativos */

    h1, h1 a{
        font-size: 2.8rem;
    }
    
    h2, h2 a{
        font-size: 2.4rem;
    }
    
    h3, h3 a{
        font-size: 2rem;
    }
    
    h4, h4 a{
        font-size: 1.6rem;
    }
    
    h5, h5 a{
        font-size: 1.3rem;
    }
    
    h6, h6 a{
        font-size: 1.1rem;
    }
    
    p, a, li, label, button, input, select, textarea, table *{
        font-size: 1rem;
    }

    label{
        margin: 1.5rem 0 0.5rem 0;
    }
    
    .fonte100{
        font-size: 0.9rem;
    }   

    /* Modal Compartilhamento */

    .modalCompartilhamento .frame{
        padding: 2rem;
    } 

    .modalCompartilhamento h3 img{
        margin-right: 0.4rem;
        height: 1.6rem;
    }

    .modalCompartilhamento .rodape{
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
    }

    .modalCompartilhamento .mensagem{
        margin: 0 0 0.5rem 0;
        text-align: right;
    }

    /* Genéricos */  
    
    .camposFlex{
        flex-direction: column;
        gap: 1rem;
    }

    .pJogos .camposFlex{
        gap: 0;
    }

    .fotoCircular{
        width: 2.5rem;
        height: 2.5rem;
    }

    .linhaFinal{
        margin-top: 1.5rem;
    }   

    /* Tabelas */

    .rankGeral th, .rankGeral td{
        padding: 0.5rem;
    }
    
    .tabelaControle thead{
        display: none;
    }

    .tabelaControle tr{
        display: grid;
        gap: 1rem;
        padding: 1rem;
        border: 1px solid var(--cinza220);
    }

    .tabelaControle tr td{
        display: flex; 
        align-items: center;       
        gap: 0.5rem;
        border: none;
        padding: 0;
    }

    .tabelaControle tr td::before{
        content: attr(data-celula) ":";
        font-weight: 700;
        color: var(--cinza100);
    }

    .tabelaResultadoJogo{   
        border-radius: 5px;
        grid-template-columns: 1fr; 
        grid-template-areas: "jogs" "sets" "rec";
    }

    .tabelaResultadoJogo .divJogadores .jog1, .tabelaResultadoJogo .divJogadores .jog2{
        border: none;
        padding: 0;
    }

    .tabelaResultadoJogo .divJogadores, .tabelaResultadoJogo .divSets{
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .tabelaResultadoJogo .divSets .sets{  
        gap: 0.5rem;
        padding: 0;
        border: none;
    }   

    .tabelaResultadoJogo .divRecursos{
        flex-direction: column;
        align-items: flex-start;
        margin: 0;
    }

    /* Formulários */

    .formRodape{
        display: flex;
        flex-direction: column;
        align-items: flex-end;        
        margin-top: 1.5rem;
    }  
    
    .filtroCat{
        margin: 1.5rem 0;
    }    

    .filtroCat select{      
        width: 100%;
    }
    .fileiraBotoesEnd{
        margin-top: 1.5rem;
    }

    /* Página retorno mensagem e inexistente */    
    

    .paginaRetorno img{
        width: 4rem;
    }

    /* Header e Footer */

    header .logo img{
        height: 60%;
    }

    header .botaoPerfil{
        width: 2.5rem;
        height: 2.5rem;
    }

    .footerLogo{
        width: 12rem;
    }

    .footerLogo img .simbolo{
        height: 2.3rem;
        margin-right: 0.2rem;
    }    
    
    /* Index */

    .banner{ 
        padding: 0 5%;    
    }

    .indexJogos .jogoPrevisto .horario{  
        padding: 0.5rem;    
    }

    .indexParceiros .logo{
        width: 48%;
    }

    .indexParceiros .logo img{
        width: 70%;
        height: 70%;
    }

    .indexChamada img{
        width: 15rem;
    } 

    /* Página Jogadores */

    .pesquisaJogador{
        flex-direction: column;
        margin: 2rem 0;    
    }

    .pesquisaJogador input[type=search]{
        padding: 0.6rem 0.8rem;
    } 

    .pesquisaJogador .lupa{
        width: 2.3rem;
    }

    /* Página jogador */

    .pagJogador .fotoJogador{    
        width: 10rem;
        height: 10rem;
    }

    .pagJogador .maisDados table tr td{
        padding: 0.6rem 0;
    }

    .pagJogador .contatosJogador a{
        width: 1.6rem;
        height: 1.6rem;    
    }    

    /* Módulo mensagem */

    .moduloMensagem .divMensagem{
        padding: 2rem;
    }

    .moduloMensagem .divMensagem img{
        width: 4.7rem;  
    }   


    /* Página Ranking */

    .pagRank .complementoTitulo{
        margin-bottom: 1.5rem;
    }

    /* Painel de Controle */

    .navPainel{
        gap: 1rem;
        margin: 1.5rem 0;
    }
    
    .navPainel .itemMenu{     
        box-shadow: 0 3px 5px rgba(0,0,0,0.1);      
    }

    .navPainel .itemMenu svg{
        margin: 0 auto 0.7rem auto;
        height: 3.2rem;    
    }
    
    .formPerfil label{
        word-break: break-all;
    }

    .formPerfil .divFlex{
        flex-direction: column;
    }

    .formPerfil .divFlex > p, #estadoNasc, #estadoMora{
        width: 100%;
        word-break: break-all;
    }
   
}

@media screen and (max-width: 400px){

    /* Nativos */

    h1, h1 a{
        font-size: 2.4rem;
    }
    
    h2, h2 a{
        font-size: 2rem;
    }
    
    h3, h3 a{
        font-size: 1.6rem;
    }
    
    h4, h4 a{
        font-size: 1.4rem;
    }
    
    h5, h5 a{
        font-size: 1.2rem;
    }    

    /* Formulários */ 

    .filtroCat{ 
        flex-direction: column;
    }
    
    .filtroCat select{      
        width: 100%;     
        margin: 0.5rem 0 0 0;
    }
    
    .filtroCat .botao{
        margin: 1rem 0 0 0;
    }

    /* Tabelas */

    .tabelaControle tr{
        gap: 1rem;
    }

    .tabelaControle tr td{
        flex-direction: column;  
        align-items: flex-start;       
        gap: 0.3rem;
    }


    /* Rankings */

    .rankGeral th, .rankGeral td{
        padding: 0.3rem;
    }

    /* Modal Compartilhamento */

    .modalCompartilhamento .frame{
        padding: 1.5rem;
    } 

    .modalCompartilhamento h3 img{
        margin-right: 0.3rem;
        height: 1.4rem;
    }

    /* Genéricos */

    .centralizarDiv{
        padding: 1.5rem 5%;
    }

    .centralizarZero{
        padding: 1.5rem 0;
    }

    /* Página retorno mensagem e inexistente */

    .paginaRetorno{
        margin: 1.5rem auto;
    }

    .paginaRetorno img{
        width: 3.5rem;
    }
    
    /* Header */

    header{
        height: 4rem;
    }  
    
    .headerFundo{
        height: 4rem;
    }

    header .botaoLogin{
        margin-left: 0.8rem;
    }

    header .botaoMenu{
        height: 30%;
    }

    /* Header */

    .indexParceiros .logo{
        width: 50%;
    }

    /* Index */

    .indexChamada{
        gap: 0.5rem;
    }

    .indexChamada img{
        width: 10rem;
    } 

    /* Página jogadores */

    .areaJogadores .fotoCircular{
        width: 3.5rem;
        height: 3.5rem;
    }

    .pesquisaJogador{
        gap: 1rem;    
    } 

    /* Página jogador */

    .pagJogador .fotoJogador{    
        width: 8rem;
        height: 8rem;
    }

    .pagJogador .maisDados table tr td{  
        padding: 0.5rem 0;
    }

    /* Módulo mensagem */   

    .moduloMensagem .divMensagem img{
        width: 4.5rem;  
    } 

    /* Painel de Controle */

    .navPainel .itemMenu{
        border-radius: 5px;
        padding: 1.2rem;
        width: 46%;  
    }   

    .navPainel .itemMenu svg{
        margin: 0 auto 0.5rem auto;
        height: 3rem;    
    }

    /* Painel - Jogo Rodada */

    #palavraResultado{
        word-break: break-all;
    }

}

@media screen and (max-width: 350px){
        

    /* Formulários */ 

    .indexJogos .fotoCircular, .ranking .fotoCircular, .rankGeral .fotoCircular, .painelJogoRodada .fotoCircular{
        display: none;  
    }

    .indexJogos .check{    
        height: 0.5rem;     
    }

    /* Tabelas */

    .tabelaResultadoJogo .divSets input, .tabelaResultadoJogo .divRecursos select{
        padding: 0.6rem 0.4rem;    
    }

    /* Modal Compartilhamento */

    .modalCompartilhamento h3 img{
        display: none;
    }

    /* Index */

    .indexParceiros .logo{
        width: 80%;
        aspect-ratio: auto;
        padding: 1rem 0;
    }

    .indexParceiros .logo img{
        width: 80%;
        height: 80%;
    }
    
    /* Painel de Controle */

    .navPainel .itemMenu{        
        width: 100%;  
    }
   
    /* Painel - Página perfil */

    .alterarFotoJogador .circuloFoto{
        width: 9rem;
        height: 9rem;
    }


}