@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-Regular.ttf") format('truetype'); }
@font-face { font-family: "Roboto Bold"; src: url("../fonts/Roboto-Bold.ttf") format('truetype'); }
@font-face { font-family: "Roboto Bold Italic"; src: url("../fonts/Roboto-BoldItalic.ttf") format('truetype'); }
@font-face { font-family: "Wuerth Bold"; src: url("../fonts/WuerthBold.ttf") format('truetype'); }
@font-face { font-family: "Wuerth ExtraBoldCond"; src: url("../fonts/WuerthExtraBoldCond.ttf") format('truetype'); }

body {
    --amarelo: rgb(255, 175, 1);
    --verde: rgb(0, 100, 40);
    overflow-x: hidden;
}

body.inicial {
    background-image: url(../bg.png);
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: bottom center;
}
@media (max-width: 800px) { 
    body.inicial {
        background-image: none;
        background-color: rgb(0,70,0);
    }
}
@media (max-width: 1280px) { 
    body.inicial {
        background-image: url(../bg-1280.png);
    }
}
@media (max-width: 1024px) { 
    body.inicial {
        background-image: url(../bg-1024.png);
    }
}

section {
    max-width: 1024px;
    width: 100%;
    margin: 0px auto;
}
body.inicial section {
    max-width: 800px;    
}

.image, i {
    display: inline-block; 
    background-repeat: no-repeat; 
    background-size: contain; 
    background-position: left top;
    position: relative;
}

body div.status {
    --largura-status: 260px; position: absolute;
    width: var(--largura-status); text-align: right;
}

body.inicial .logo {
    width: 473px; height: 384px;
    background-image: url(../logo.png);
    background-position: center;
    width: 100%;
    max-height: 30vh;
    margin-top: 5vh;
}

body.principal .logo {
    width: 473px;
    height: 210px;
    background-image: url(../logo.png);
    background-position: center;
    width: 100%;
    margin-top: 26px;
    position: absolute;
    cursor: pointer;
}
@media (max-width: 800px) {
    body.principal .logo { display: none; }
}

body.inicial .confete {
    width: 1307px; height: 710px;
    background-image: url(../confete.png);
    background-position: center;
    width: 100%;
    max-height: 50vh;
    margin-top: 0;
    position: absolute;
}
@media (max-width: 800px) { 
    body.inicial .confete {
        display: none;
    }
}

.inicial div {
    text-align: center;
    width: 100%;
}

.inicial .titulo {
    font-family: "Wuerth ExtraBoldCond";
    font-size: 32px;
    color: rgb(255, 224, 0);
}
.inicial .subtitulo {
    font-family: "Wuerth Bold";
    font-size: 24px;
    color: white;
}

.inicial .login-area {
    border-radius: 20px;
    width: 40%;
    margin: 10px auto;
    background-color: rgba(200, 200, 200, 0.8);
    padding: 20px;
    font-family: "Roboto Bold";    
    text-align: left;
    font-size: 11px;
}
.inicial .login-area-mini { 
    padding: 10px;
    display: flex;
    position: relative;
    z-index: 1000;
    width: calc(40% + 20px);
    padding-bottom: 20px; 
    margin-bottom: 30px;
}
.inicial .login-area { padding-top: 30px; padding-bottom: 30px; }
.inicial .login-area-mini { padding-top: 40px; }
@media (max-width: 800px) {
    .inicial .login-area { width: calc(100% - 40px); }
}
.inicial .copyright { padding: 10px; text-align: center; }
.inicial .copyright a { text-decoration: none; color: black; }
.inicial .copyright a:hover { text-decoration: underline; }
.inicial .copyright a:visited { color: black; }

.inicial .login-area div.label {
    font-size: 14px;
    text-align: left;
    margin: 0px 10px;
    margin-top: 10px;
}
.inicial .login-area div.status { left: calc(50% + 160px - var(--largura-status)); }
@media (max-width: 800px) { .inicial .login-area div.status {  left: calc(90% - var(--largura-status)); } }

.inicial .login-area input {
    font-family: "Roboto Bold"; 
    font-size: 14px;
    padding: 10px 20px;
    width: 100%;
    border-radius: 10px;
    border: none;
    margin-bottom: 5px;    
}
.inicial .login-area-mini input { width: calc(40%); margin: 0px; margin-right: 5px; }
.inicial .login-area input[type=password] { margin-bottom: 30px; }
.inicial .login-area-mini input[type=password] { margin-bottom: 0px; }
.inicial .login-area-mini input:last-of-type() { margin-right: 0px; }

.inicial .login-area input::placeholder {
    font-family: "Roboto Bold"; 
    font-size: 14px;
    color: #aaa;
}

.inicial .login-area .esqueci-senha {
    text-align: left;
    width: 50%;
    text-decoration: underline;
    position: absolute;
    margin-top: 40px;
    left: 40%;
}
.inicial .login-area .button-enviar {
    border-radius: 10px;
    font-size: 14px;
    font-family: "Roboto Bold";
    text-align: center;
    width: calc(100px);
    background-color: var(--verde);
    color: var(--amarelo);
    padding: 10px;
    position: absolute;
    margin-top: -20px;
    margin-left: 200px;
    cursor: pointer;
}
@media (max-width: 800px) { .inicial .login-area .button-enviar { margin-left: calc(100% - 174px); } }
.inicial .login-area-mini .button-enviar { position: inherit; margin: 0px; width: calc(20%); }
.inicial .login-area .button-enviar:hover {
    text-decoration: underline;    
}
.inicial .login-area-mini .button-enviar:hover { border: none; margin: 0px; }

.inicial .login-area .esqueci-senha span {
    cursor: pointer;
}

.inicial .login-area .checkbox-area {
    width: 100%;
    padding: 20px 0px 0px;
    text-align: left;
}

.inicial .login-area .checkbox-area input {
    display: inline-block;
    width: fit-content;
    position: relative;
    top: 2px;
}

.inicial .login-area .checkbox-area a,
.inicial .login-area .checkbox-area a:hover,
.inicial .login-area .checkbox-area a:visited {
    color: black
}

.inicial .login-area .titulo {
    font-size: 20px;
    text-shadow: 1px 1px black;
    text-align: left;
    position: absolute;
    margin-top: -20px;
    width: 50%;
}
.inicial .login-area-mini .titulo {
    margin-top: -30px;
    margin-left: 10px;
}

.card-1 { background-image: url(../card-1.png); }
.card-2 { background-image: url(../card-2.png); }
.card-3 { background-image: url(../card-3.png); }
.card-4 { background-image: url(../card-4.png); }
.card-5 { background-image: url(../card-5.png); }
.card-1:hover { background-image: url(../card-1-on.png); }
.card-2:hover { background-image: url(../card-2-on.png); }
.card-3:hover { background-image: url(../card-3-on.png); }
.card-4:hover { background-image: url(../card-4-on.png); }
.card-5:hover { background-image: url(../card-5-on.png); }
.card-1.on { background-image: url(../card-1-on.png); }
.card-2.on { background-image: url(../card-2-on.png); }
.card-3.on { background-image: url(../card-3-on.png); }
.card-4.on { background-image: url(../card-4-on.png); }
.card-5.on { background-image: url(../card-5-on.png); }

.caixa-figurinhas {
    width: 578px; height: 274px;
    background-image: url(../caixa-figurinhas.png);
}

.caixa-sucesso {
    width: 508px; height: 215px;
    background-image: url(../caixa-sucesso.png);
}

body.principal {
    margin: 0px; padding: 0px;
}

body.principal {
    --altura-barra-branca: 110px;   
    --altura-barra-superior: 250px;
}

body.principal .barra {
    width: 1920px;
    height: var(--altura-barra-superior);
    background-image: url(../barra-l.png);
    max-width: 100%;
    position: absolute;
    background-size: cover;
    background-position: bottom center;
}
@media (max-width: 800px) { 
    body.principal .barra {
        width: 100%;
        margin: 0px;
        background-image: none;
        background-color: var(--amarelo);
        height: calc(var(--altura-barra-branca) + 50px);
    }
}

body.principal .barra-sup { 
    width: 100%;
    height: var(--altura-barra-branca);
    background-color: white;
    position: absolute;
}

body.principal .logo-wurth {    
    --rate-logo-wurth: 0.75;
    --altura-logo-wurth: calc(56px * var(--rate-logo-wurth));
    width: calc(248px * var(--rate-logo-wurth)); height: var(--altura-logo-wurth);
    margin-top: calc((var(--altura-barra-branca) - var(--altura-logo-wurth)) / 2);
    background-image: url(../logo-wurth.png);
    position: absolute;
    cursor: pointer;
}
@media (max-width: 800px) { body.principal .logo-wurth { width: 40%; margin-left: 10px; margin-top: 60px; }  }

body.principal .login-area {
    margin-top: 10px;
    height: calc(var(--altura-barra-branca) - 10px);
    display: inline-block;
    width: 35%;
    margin-left: 65%;
    font-family: "Roboto Bold"; 
    color: black;
    position: relative;
}
@media (max-width: 800px) { body.principal .login-area { width: 50%; margin-left: 50%; } }

body.principal .login-area .ola-voce-area {
    font-size: 12px;
    width: 58%;    
    display: inline-block;
}
body.principal .login-area .ola-voce-area form { position: absolute; }
@media (max-width: 800px) { body.principal .login-area .ola-voce-area { width: 100%; } }

body.principal .login-area .ola-voce-area .foto {
    border: 1px solid rgb(234, 33, 46);        
    border-radius: 50%;
    background-color: rgb(0, 0, 0);
    width: 30px; height: 30px;
    display: inline-block; 
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;   
  }
body.principal .login-area .ola-voce-area .foto .image-uploader { border: none; height: 30px; min-height: 30px; cursor: pointer; }
body.principal .login-area .ola-voce-area .foto .image-uploader .upload-text { display: none; }
@media (max-width: 800px) { body.principal .login-area .ola-voce-area .foto { position: relative; left: 7%; } }

body.principal .login-area .ola-voce-area .texto {
    display: inline-block;
    position: relative;
    top: 2px;
    left: 40px;
    white-space: nowrap;
    overflow: hidden;
}
@media (max-width: 800px) { 
    body.principal .login-area .ola-voce-area .texto {    
    top: 5px;    
    position: absolute;    
    text-align: right;
    width: calc(75% + 5px);
    left: 30px;
} }

body.principal .login-area .ola-voce-area .nao-e-voce {
    font-size: 9px;
}

body.principal .login-area .ola-voce-area .nao-e-voce a,
body.principal .login-area .ola-voce-area .nao-e-voce a:hover,
body.principal .login-area .ola-voce-area .nao-e-voce a:visited {
    color: black;
}

body.principal .login-area .sair {
    width: 40%;
    font-size: 12px;    
    display: inline-block;
    position: relative;
    top: -11px;
    text-align: right;
    cursor: pointer;
}
body.principal .login-area .sair:hover { text-decoration: underline; }
@media (max-width: 800px) { body.principal .login-area .sair { display: none; } }

body.principal .login-area .sair i {
    width: 14.5px; height: 14.5px;
    background-image: url(../icone-sair.png);
    margin-left: 5px;
    position: relative;
    top: 3px;
}

body.principal .cards-area {    
    --altura-desta: calc(var(--altura-barra-superior) - var(--altura-barra-branca));   
    --rate-card: 0.75;
    --altura-card: calc(101px * var(--rate-card));
    --largura-card: calc(72px * var(--rate-card));
    height: var(--altura-desta);
    padding: calc((var(--altura-desta) - var(--altura-card)) / 2) 0px 0px;    
    --correcao: 16px;
    --recuo-desta: calc(35% - (5 * var(--largura-card)) - var(--correcao));    
    margin-left: calc(65% + var(--recuo-desta));
    width: calc(35% + 2px - var(--recuo-desta));
    cursor: pointer;
}
body.principal .cards-area .card { width: var(--largura-card); height: var(--altura-card);  }
@media (max-width: 800px) { body.principal .cards-area {
    margin-left: auto;
    margin-right: auto;
    --rate-card: 0.625;
    margin-bottom: 0px;
    padding-bottom: 0px;
    --altura-desta: var(--alt);
    width: 100%;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
}}

section.interna .painel {
    display: inline-block;
    font-family: "Roboto";
    font-size: 12px;
    vertical-align: top;
    margin: 0px 0px 20px;
    width: 100%;
}
@media (max-width: 800px) { section.interna .painel { width: calc(100% - 20px); margin: 0px 10px 20px; } }

section.interna .painel div {
    width: calc(100% - 20px);
    padding: 4px 10px;
}
section.interna .painel div.texto { padding-bottom: 20px; }
section.interna .painel div.texto p { 
    font-size: 14px;
    font-family: "Roboto Bold";
    color: var(--verde);
    line-height: 8px;
}
section.interna .painel div.texto p span {
    color: var(--amarelo);
    text-transform: uppercase;
}

section.interna .painel-1-3 { width: calc((100% / 3) - 24px); margin-right: 20px; }
section.interna .painel-2-3 { width: calc((100% * (2 / 3)) - 24px); margin-left: 20px; }
section.interna .painel-2-7 { width: calc((100% * (2 / 7)) - 24px); margin-right: 20px; }
section.interna .painel-5-7 { width: calc((100% * (5 / 7)) - 24px); margin-left: 20px; }
section.interna .painel-fechado { 
    border-radius: 10px;
    border: 1px solid var(--amarelo);
    padding-bottom: 20px;
   
}
section.interna .painel-fechado .scrollable { width: 100%; padding: 0px; margin: 0px; overflow-x: scroll; }
section.interna .painel-fechado .scrollable::-webkit-scrollbar { width: 10px; height: 10px; background-color: white; border: none; }
section.interna .painel-fechado .scrollable::-webkit-scrollbar-thumb { background-color: var(--amarelo); border-radius: 10px; }
section.interna .painel-fechado .scrollable .scrollable-in {
    width: 2000px;
}
@media (max-width: 800px) {
    section.interna .painel-fechado .scrollable { overflow-x: scroll; }
    section.interna .painel-1-3,
    section.interna .painel-2-3,
    section.interna .painel-2-7,
    section.interna .painel-5-7 {
        width: calc(100% - 20px);
        margin-left: 10px; margin-right: 10px;
    }
    section.interna .painel-fechado .scrollable .scrollable-in {
        width: 800%;
    }
}

section.interna .painel .titulo,
section.interna .painel .botao {
    background-color: var(--amarelo);
    color: var(--verde);
    border-radius: 10px;
    font-size: 14px;
    font-family: "Roboto Bold";    
    text-align: center;
    width: calc(100% - 40px);
    padding: 10px 20px;
}
section.interna.extrato .painel .titulo { padding-bottom: 0px; }
section.interna .painel .linha {
    font-size: 14px;
    font-family: "Roboto Bold";    
    text-align: center;
    margin: 0px 10px 0px;
    width: calc(100% - 40px);
    border-bottom: 1px solid var(--amarelo);
    padding-top: 5px;
}
section.interna .painel .linha:last-of-type { border-bottom: none; }
section.interna .painel .botao { background-color: var(--verde); color: var(--amarelo); cursor: pointer; }
section.interna .painel .botao-pequeno {     
    width: calc(100% / 3);
    font-size: 10px;
    font-family: "Roboto";
    position: relative;
    top: -10px; 
    cursor: pointer;
}
section.interna .painel .botao-salvar { 
    width: calc(100% / 10); 
    position: inherit; 
    margin-left: calc((100% * (9 / 10)) - 42px); 
    font-family: "Roboto Bold";
    font-size: 12px;
    cursor: pointer;    
}
section.interna .painel .botao,
section.interna .painel .botao-pequeno,
section.interna .painel .botao-salvar
{ margin-bottom: 4px; }
section.interna .painel .botao:hover,
section.interna .painel .botao-pequeno:hover,
section.interna .painel .botao-salvar:hover 
{ border: 2px solid var(--amarelo); left: -2px; position: relative; text-decoration: underline; margin-bottom: 0px; }
section.interna .painel .botao-pequeno:hover { top: -12px; }
section.interna .painel .botao-salvar:hover { top: -2px; }
@media (max-width: 800px) {
    section.interna .painel .botao-salvar {
        width: 100px;
        margin-left: calc(100% - 150px);
        margin-top: -15px;
    }
    .click-palpitar {
        margin-top: 20px;
    }
}
section.interna .painel .titulo .observacao {
    position: absolute;
    left: calc(50% - 542px);
    margin-top: -6px;
    font-size: 12px;
    width: 200px;
}
section.interna .painel .titulo .trave-button {
    position: absolute;
    width: 100px;
    font-size: 12px;
    border-radius: 10px;
    background: var(--verde);
    color: var(--amarelo);
    padding: 10px;
    left: calc(50% + 512px - 120px);
    margin-top: -9px;
    cursor: pointer;
}
section.interna .painel .titulo .trave-button:hover { text-decoration: underline; }
@media (max-width: 800px) {
    section.interna .painel .titulo.titulo-palpites {
        height: 50px;
    }
    section.interna .painel .titulo .observacao {        
        left: -14px;
        margin-top: 29px;        
        width: 200px;
    }
    section.interna .painel .titulo .trave-button {        
        width: 90px;
        font-size: 10px;        
        padding: 10px 5px;
        left: calc(100vw - 120px);        
        margin-top: 24px;
    }
}

section.interna .painel .titulo div,
section.interna .painel .linha div
{ display: inline-block; --ajuste-col: 3px; --ajuste-primeira: 100px; padding: 0px; }
section.interna .painel.painel-extrato .linha div { margin-top: 10px; }
section.interna .painel.painel-extrato .linha > div { padding-bottom: 20px; border-bottom: 1px solid var(--amarelo); }
section.interna .painel .titulo div.col-1,
section.interna .painel .linha div.col-1
{ width: calc((100% / 5) + var(--ajuste-primeira) - var(--ajuste-col)); }
section.interna .painel .titulo div.col-2,
section.interna .painel .linha div.col-2
{ width: calc((100% / 5) - var(--ajuste-col)); }
section.interna .painel .titulo div.col-3,
section.interna .painel .linha div.col-3
{ width: calc((100% / 5) - var(--ajuste-primeira) - var(--ajuste-col)); }
section.interna .painel .titulo div.col-4,
section.interna .painel div.col-4
{ width: calc((100% / 4) - var(--ajuste-col)); }
section.interna .painel div.pessoa {
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    height: 39px;
    position: relative;
    top: 10px;
}
section.interna .painel div.pessoa:hover { text-decoration: underline; }
section.interna .painel.painel-extrato .titulo div.col-1,
section.interna .painel.painel-extrato .linha div.col-1.placar {
    --padding-interno: 20px;
    width: calc((100% / 4) + var(--ajuste-primeira) - var(--ajuste-col) - (2 * var(--padding-interno)));
    margin: 10px 0px 0px;    
    border: none;
    padding: 0px var(--padding-interno);
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--amarelo);
}
section.interna .painel.painel-extrato .titulo div.col-2,
section.interna .painel.painel-extrato .linha div.col-2 {
    width: calc((100% / 4) - (2 * var(--ajuste-col)) - (var(--ajuste-primeira) / 3));
    margin-left: -4px;
}
section.interna .painel.painel-extrato .linha div.col-1.placar .data {
    color: var(--verde);
    background-color: white;
    border: none;
    margin-bottom: -20px;
}

@media (max-width: 800px) {
    section.interna .painel .titulo-ranking {
        height: 35px;
    }
    section.interna .painel .titulo div,
    section.interna .painel .linha div {
        --ajuste-col: 22px; --ajuste-primeira: 120px;        
    }
    section.interna .painel .linha div {
        font-size: 12px;
        line-height: 2em;
    }
    section.interna .painel .titulo div {
        margin-top: 7px;
    }
    section.interna .painel .titulo div.col-1 {
        position: relative;
        top: -10px;
    }
    section.interna .painel .titulo div.col-3 {
        position: relative;
        left: 4px;
        top: 10px;
    }
    section.interna .painel .titulo div.col-2,
    section.interna .painel .titulo div.col-3,
    section.interna .painel .titulo div.col-4 {
        transform: rotate(-70deg);
        font-size: 10px;
    }
    section.interna .painel.painel-extrato .titulo div.col-1,
    section.interna .painel.painel-extrato .linha div.col-1.placar {
        width: calc(100% - (2 * var(--padding-interno)));
        border-bottom: none;
        padding-bottom: 5px;
    }
    section.interna .painel.painel-extrato .titulo div.col-2,
    section.interna .painel.painel-extrato .linha div.col-2 { 
        width: calc(100% / 3);
    }
    section.interna.extrato .painel .titulo div.col-2 {
        transform: none;
        font-size: 12px;
        margin-top: 0px;
        margin-bottom: 10px;
    }
}

section.interna div.placar {
    border: 1px solid var(--verde);        
    width: calc(50% - 70px);
    margin: 40px 40px 0px;
    display: inline-block;            
}
section.interna div.placar:nth-of-type(2n) { margin-right: 5px; }
section.interna div.placar:nth-of-type(2n + 1) { margin-left: 5px; }
@media (max-width: 800px) {
    section.interna div.placar:nth-of-type(2n),
    section.interna div.placar:nth-of-type(2n + 1) {
        width: calc(100% - 56px);
        margin: 40px 12px 0px;
    }    
}
  
section.interna .placar .data {
    border: 1px solid var(--verde);    
    width: 50%;
    background-color: var(--verde);
    color: white;
    position: relative;
    padding: 0px;
    text-align: center;    
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin: -27px auto 0px;
}

section.interna .placar .pais,
section.interna .placar .x {
    width: calc(50% - 33px);
    font-family: "Roboto Bold";
    font-size: 16px;
    color: var(--verde);
    text-align: center;
    padding: 0px;
    display: inline-block;
    margin: 0px 10px 4px;
}
section.interna .placar .x { width: 20px; }
section.interna .placar .pais:nth-of-type(4n) { margin-left: 0px; text-align: left; }
section.interna .placar .pais:nth-of-type(4n + 2) { margin-right: 0px; text-align: right; }
section.interna .painel-extrato .placar .data {
    width: 100%;
    border-radius: 0px;
    border: none;
}
section.interna .painel-extrato .placar .pais {
    width: calc(50% - 34px);
}

section.interna .painel .linha div i {
    border: 1px solid rgb(234, 33, 46);        
    border-radius: 50%;
    width: 27px; height: 27px;
    display: inline-block;
    background-color: black;    
    position: relative;
    top: 10px;
    margin-right: 5px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
section.interna .placar .pais i {    
    border-radius: 50%;
    width: 30px; height: 30px;
    display: inline-block;
    background-color: black;    
    position: relative;
    top: 9px;
}
section.interna .placar .pais:nth-of-type(4n) i { margin-right: 10px; }
section.interna .placar .pais:nth-of-type(4n + 2) i { margin-left: 10px; }
section.interna .painel-extrato .placar .pais:nth-of-type(4n + 2) i { margin-right: 0px; }

i.icone { 
    width: 25px;
    height: 25px;
    position: absolute;
    margin-left: -31px;
    margin-top: -4px;
    background-position: center right;
}
i.icone-bola { background-image: url(../icone-bola.png); }
i.icone-palpites-finais { background-image: url(../icone-palpites-finais.png); }
i.icone-proximos-jogos { background-image: url(../icone-proximos-jogos.png); }
i.icone-trofeu { background-image: url(../icone-trofeu.png); }
i.icone-partida { background-image: url(../icone-partida.png); }

section.interna div.caixa-texto {
    width: calc((100% / 4) - 23px);
    display: inline-block;
    font-family: "Roboto Bold";
    font-size: 14px;
    padding: 0px 10px;
}
@media (max-width: 800px) {
    section.interna div.caixa-texto {                
        padding: 0px;
        width: calc(100% - 20px);
        margin: 20px 10px;
    }    
}
section.interna div.caixa-texto div.botao-salvar {
    width: calc(100% - 30px);
    margin-left: 0px;
}

section.interna div.caixa-texto .titulo-caixa {
    position: absolute;
    color: var(--verde);
    margin-top: -30px;
    width: 20%;
    padding: 0px 0px 0px 20px;
}
@media (max-width: 800px) {
    section.interna div.caixa-texto .titulo-caixa {                    
        width: 50%;
        padding: 0px;
        margin-left: 10px;
        margin-top: -20px;
    }    
}

section.interna div.caixa-texto select {
    border: 1px solid var(--amarelo);
    border-radius: 10px;
    padding: 10px;    
    width: 100%;
    font-family: "Roboto Bold";
    font-size: 14px;
}

section.interna div.palpite-grupo,
section.interna div.palpite {
    display: inline-block;
    font-family: "Roboto Bold";
    font-size: 14px;
    color: var(--verde);
    width: calc((100% / 8) - 23px);
    text-align: center;    
}
section.interna div.palpite-grupo {
    padding-bottom: 0px;
}
@media (max-width: 800px) {
    section.interna div.palpite-grupo,
    section.interna div.palpite {        
        width: calc((100% / 8) - 25px);        
        padding: 10px 0px;
    }
}

section.interna div.palpite input {
    border: 1px solid var(--verde);
    width: 25px;
    padding: 5px 0px;
    text-align: center;
    font-family: "Roboto Bold";
    font-size: 14px;
    color: var(--verde);
}
section.interna div.palpite input.passed {
    background-color: var(--verde);
    color: white;        
}
section.interna div.palpite input.passed.ganhou {
    border-top: 3px solid lightgreen;
    padding: 3px 0px 5px;
}
section.interna div.palpite input.passed.ganhoutudo {
    border: 1px solid lightgreen;
    border-top: 3px solid lightgreen;
    border-bottom: 3px solid lightgreen;    
    padding: 3px 0px 3px;
}
section.interna div.palpite input.passed.perdeu {
    border-top: 3px solid red;
    padding: 3px 0px 5px;
}

section.interna div.palpite .data {
    display: inline-block;
    position: relative;
    width: 100%;    
    font-size: 12px;
    padding: 0px;
}

section.interna div.palpite .pais {
    display: inline-block;
    width: calc(50% - 51px);
    padding: 0px 10px;
}
section.interna div.palpite .pais i {        
    width: 27px; height: 27px;
    position: relative;
    top: 8px;
}
section.interna div.palpite .pais:nth-of-type(2n + 1) { text-align: left;}
section.interna div.palpite .pais:nth-of-type(2n) { text-align: right;}
section.interna div.palpite .pais:nth-of-type(2n + 1) i { left: -10px; }
section.interna div.palpite .pais:nth-of-type(2n) i { left: 10px; }

.icone-pais-ale { background-image: url(../icone-pais-ale.png); }
.icone-pais-ara { background-image: url(../icone-pais-ara.png); }
.icone-pais-arg { background-image: url(../icone-pais-arg.png); }
.icone-pais-aus { background-image: url(../icone-pais-aus.png); }
.icone-pais-bel { background-image: url(../icone-pais-bel.png); }
.icone-pais-bra { background-image: url(../icone-pais-bra.png); }
.icone-pais-cam { background-image: url(../icone-pais-cam.png); }
.icone-pais-can { background-image: url(../icone-pais-can.png); }
.icone-pais-cat { background-image: url(../icone-pais-cat.png); }
.icone-pais-cor { background-image: url(../icone-pais-cor.png); }
.icone-pais-crc { background-image: url(../icone-pais-crc.png); }
.icone-pais-cro { background-image: url(../icone-pais-cro.png); }
.icone-pais-din { background-image: url(../icone-pais-din.png); }
.icone-pais-equ { background-image: url(../icone-pais-equ.png); }
.icone-pais-esp { background-image: url(../icone-pais-esp.png); }
.icone-pais-eua { background-image: url(../icone-pais-eua.png); }
.icone-pais-fra { background-image: url(../icone-pais-fra.png); }
.icone-pais-gan { background-image: url(../icone-pais-gan.png); }
.icone-pais-hol { background-image: url(../icone-pais-hol.png); }
.icone-pais-ing { background-image: url(../icone-pais-ing.png); }
.icone-pais-ira { background-image: url(../icone-pais-ira.png); }
.icone-pais-jap { background-image: url(../icone-pais-jap.png); }
.icone-pais-mex { background-image: url(../icone-pais-mex.png); }
.icone-pais-mar { background-image: url(../icone-pais-mar.png); }
.icone-pais-gal { background-image: url(../icone-pais-gal.png); }
.icone-pais-pol { background-image: url(../icone-pais-pol.png); }
.icone-pais-por { background-image: url(../icone-pais-por.png); }
.icone-pais-ser { background-image: url(../icone-pais-ser.png); }
.icone-pais-sen { background-image: url(../icone-pais-sen.png); }
.icone-pais-sui { background-image: url(../icone-pais-sui.png); }
.icone-pais-tun { background-image: url(../icone-pais-tun.png); }
.icone-pais-uru { background-image: url(../icone-pais-uru.png); }

section.painel-edicao { margin: 20px auto 0px; }
@media (max-width: 800px) { section.painel-edicao { margin: 20px 10px 0px; width: calc(100% - 20px); } }

.cabecalho .neutral-zone { position: absolute; font-size: 14px; width: 100%; }

.cabecalho .neutral-zone .status { top: 10px; left: -5px; width: 100%; }
@media (max-width: 800px) {
    .cabecalho .neutral-zone { margin-top: 50px; } 
    .cabecalho .neutral-zone .status {
        top: 3px;    
        font-size: 12px;
    }
}

.cabecalho .neutral-links {
    display: inline-block;
    position: absolute;
    top: 40px;
    left: -5px;
    text-align: center;
    width: 100%;
    text-align: right;
}

.cabecalho .neutral-links a {
    display: inline-flex;
    color: black;
    margin-left: 20px;
    text-decoration: none;
}
.cabecalho .neutral-links a:visited { color: black; }
.cabecalho .neutral-links a:hover { text-decoration: underline; }
@media (max-width: 800px) { 
    .cabecalho .neutral-links { top: 0px; }
    .cabecalho .neutral-links a { font-size: 11px; margin-bottom: 6px; } 
}


body.overlay { height: 100vh; overflow: hidden; }

div.overlay {
    display: block;
    position: absolute;
    width: 100%; height: 100vh;
    top: 0px; left: 0px;
    background-color: rgba(100, 100, 100, 0.8);
    z-index: 2000;
}

div.message-ok {
    --msg-width: 400px; --msg-height: 200px; --this-padding: 10px; --this-ratio: 0.75;
    position:initial; display:block;
    width: var(--msg-width); height: var(--msg-height);
    --msg-margin-top: calc(50vh - (var(--msg-height) / 2));
    --msg-margin-left: calc(50% - (var(--msg-width) / 2));
    margin: var(--msg-margin-top) 0px 0px var(--msg-margin-left);
    background-color: var(--verde);
    border-radius: 10px;
    border: 2px solid var(--amarelo);
}

div.message-ok div.fechar,
div.card-message div.fechar {
    --this-size: 25px;
    background-image: url(../icone-fechar.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: var(--this-size); height: var(--this-size);
    position: absolute;    
    top: calc(var(--msg-margin-top) + var(--this-padding));
    left: calc(var(--msg-margin-left) + var(--msg-width) - var(--this-size) - var(--this-padding));
    cursor: pointer;
    z-index: 4000;
}

div.message-ok div.image {    
    width: calc(132px * var(--this-ratio));
    height: calc(151px * var(--this-ratio));
    background-image: url(../icone-comem.png);
    margin-top: calc((var(--msg-height) - (151px * var(--this-ratio))) / 2);
    margin-left: 20px;
}

div.message-ok div.texto {
    font-family: "Roboto Bold";
    font-size: 22px;
    position: absolute;
    display: inline-block;
    color: var(--amarelo);
    top: calc(var(--msg-margin-top) + var(--this-padding));
    --this-left: calc(var(--msg-margin-left) + (var(--this-padding) * 4) + (132px * var(--this-ratio)));
    left: var(--this-left);
    width: calc(var(--msg-margin-left) + var(--msg-width) - var(--this-left) - (var(--this-padding) * 2));
    height: calc(var(--msg-height) - (var(--this-padding) * 2));
    vertical-align: middle;
    padding: 2em 0px;
    line-height: 1.5em;
}

div.message-ok div.texto span {
    color: white;
    font-family: "Roboto Bold Italic";
    padding: auto;
}
@media (max-width: 800px) {
    div.message-ok { --msg-width: calc(100% - 20px); --msg-margin-left: 10px; }
    div.message-ok div.texto { font-size: 16px; }
}

.card-message {
    --card-message-width: 300px;
    width: var(--card-message-width);
    height: calc((var(--card-message-width) / 2));
    border-radius: 10px;
    border: 1px solid var(--amarelo);
    background-color: var(--verde);
    font-size: 12px;
    position: absolute;
    top: 230px;
    left: calc(50% + 512px - 40px - var(--card-message-width));
    padding: 20px;
}


.card-message .titulo-card-message {
    font-family: "Roboto Bold";    
    color: var(--amarelo);
    
}

.card-message .texto-card-message {
    font-family: "Roboto";
    color: white;    
    line-height: 1.4em;
}

div.card-message div.fechar {    
    top: 10px;
    left: calc(var(--card-message-width));
}
@media (max-width: 800px) {
    .card-message {
        left: 10px;
        --card-message-width: calc(100% - 60px);
    }
    div.card-message div.fechar {
        left: calc(var(--card-message-width) + 20px);
    }
}

div.meuspontos {
    position: absolute;
    font-size: 10px;
    text-align: center;
    width: 100px;
    top: -10px;
    margin-left: 170px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: var(--amarelo);
    padding: 5px;
    color: var(--verde);
}
@media (max-width: 800px) {
    div.meuspontos {
        margin-left: 0px;
        left: calc(-100% + 10px);
    }
}

div.meuspontos span {
    font-size: 14px;
    color: black;
}

section.interna div.painel.painel-extrato div.linha div.col-2.numpartida {
    position: absolute;
    border: none;
    width: 50px;
    z-index: 100;
    background: var(--amarelo);
    font-size: 18px;
    display: inline-block;
    vertical-align: middle;
    padding: 10px 0px 40px;
    height: 0px;
    margin: 0px;
    margin-top: 31px;
    left: calc(50% - 512px + 32px);
}
@media (max-width: 800px) {
    section.interna div.painel.painel-extrato div.linha div.col-2.numpartida {
        display: none;
    }
}