@font-face {
    font-family: myriad;
    src: url(https://vidrosfloripaglass.com.br/venda2/fonts/myriadPro-Bold.otf);
}
body{
    margin: 0;
    padding: 0;
    font-family: myriad;
    background-image: url("../img/fundo.jpg");
    background-size: 100%;
}

:root {
    --transition: all 0.20s ease;
    --azul-forte: #07295f;
    --azul-fraco: #326195;
    --amarelo: yellow;
    --verde:#18ff00;
    --branco:#fff;
    --cinza-label: #848484;
    --cinza-value: #5b5b5b;
}
.principal{
    width: 100%;
    height: 100vh;
    display: flex;
}@font-face {
    font-family: myriad;
    src: url(../fonts/myriadPro-Bold.otf);
}
.row{
    flex-direction: row;
    width: 100%;
}
.coluna-esquerda{
    width: 24%;
    height: 100%;
}
.coluna-centro{
    width: 42%;
    height: 100%;
}
.coluna-direita{
    width: 34%;
    height: 100%;
}
.coluna-esquerda .informacoes{
    width: 92%;
    margin: 0.5vw 4%;
    float: left;
}
.coluna-esquerda .informacoes .box{
    width: 48%;
    margin: 0 1%;
    margin-top: 1vw;
    float: left;
    position: relative;
    height: 6vw;
}

.coluna-esquerda .informacoes .box .label{
    width: 80%;
    margin: auto;
    background: var(--azul-forte);
    color: var(--amarelo);
    border-radius: 0.5vw;
    text-align: center;
    position: absolute;
    font-size: 1.5vw;
    top: 0;
    left: 10%;
    z-index: 2;
    height: 2.5vw;
    line-height: 2.5vw;
    box-shadow: 0vw 0.4vw 0.8vw rgb(0 0 0 / 50%);
}
.coluna-esquerda .informacoes .box .value{
    width: 100%;
    height: 5vw;
    padding-top: 2vw;
    color: var(--branco);
    background: var(--azul-fraco);
    text-align: center;
    position: absolute;
    font-size: 2.2vw;
    top: 1vw;
    left: 0;
    border-radius: 0.5vw;
    box-sizing: border-box;
    z-index: 1;
}

.coluna-esquerda .premios{
    float: left;
    width: 100%;
    
}

.coluna-esquerda .premios .box{
    position: relative;
    margin:0;
    height: 10vw;
    
    background-repeat: no-repeat;
    background-size: 100%;
}
.coluna-esquerda .premios .premio-desativo{
    background-image: url('../img/premio.png')!important;
}
.coluna-esquerda .premios .premio-ativo{
    background-image: url('../img/premio-ativo.png')!important;
}

.coluna-esquerda .premios .acumulado-desativo{
    background-image: url('../img/premio-acumulado.png')!important;
}
.coluna-esquerda .premios .acumulado-ativo{
    background-image: url('../img/premio-acumulado-ativo.png')!important;
}
.coluna-esquerda .premios .box .bg {
    width: 100%;
}

.coluna-esquerda .premios .box .star {
    width: 10vw;
    position: absolute;
    right: -5vw;
    top: 1vw;
}

.coluna-esquerda .premios .box .star img{
    width: 100%;
}
.coluna-esquerda .premios .box .acumulado-numero{
    Width: 4vw;
    color: #fff;
    position: absolute;
    right: -1.8vw;
    top: 4.5vw;
    font-size: 3vw;
    transform: rotate(16deg); 
}
.coluna-esquerda .premios .box .label{
    width: 100%;
    text-align: center;
    font-size: 2vw;
    position: absolute;
    top: 1vw;
}
.coluna-esquerda .premios .box .value{
    width: 100%;
    text-align: center;
    font-size: 3vw;
    position: absolute;
    top: 4vw;
}

.coluna-esquerda .premios .premio-ativo .label{
   color: var(--amarelo);
}
.coluna-esquerda .premios .premio-ativo .value{
    color: var(--branco);
}
.coluna-esquerda .premios .acumulado-ativo .value{
    color: var(--branco);
}

.coluna-esquerda .premios .premio-desativo .label{
    color: var(--cinza-label);
    opacity: 0.3;
}
 .coluna-esquerda .premios .premio-desativo .value{
     color: var(--cinza-value);
     opacity: 0.3;
}
 .coluna-esquerda .premios .acumulado-desativo .value{
    color: var(--cinza-value);
    opacity: 0.3;
}
.coluna-centro .bolas-sorteadas{
    width: 100%;
    height: 31vw;
    margin-bottom: 0.5vw;
    position: relative;
}

.coluna-centro .bolas-sorteadas .bola-principal{
    position: absolute;
    height: 20vw;
    width: 20vw;
    border: 1vw solid var(--branco);
    border-radius: 100%;
    top: 2vw;
    left: 5vw;
}

.coluna-centro .bolas-sorteadas img {
    width: 94%;
    margin: 3%;
}

.coluna-centro .bolas-sorteadas .bola-principal img{
width: 98%;
margin: 1%;
}
.coluna-centro .bolas-sorteadas .bola-1{
    position: absolute;
    height: 11vw;
    width: 11vw;
    border: 0.2vw solid var(--branco);
    border-radius: 100%;
    top: 1vw;
    right: 3vw;
}

.coluna-centro .bolas-sorteadas .bola-2{
    position: absolute;
    height: 9vw;
    width: 9vw;
    border: 0.2vw solid var(--branco);
    border-radius: 100%;
    top: 13vw;
    right: 4vw;
}

.coluna-centro .bolas-sorteadas .bola-3{
    position: absolute;
    height: 7vw;
    width: 7vw;
    border: 0.2vw solid var(--branco);
    border-radius: 100%;
    top: 21vw;
    right: 11vw;
}

.coluna-centro .bolas-sorteadas .bola-ordem{
    position: absolute;
    height: 4vw;
    width: 12vw;
    bottom: 1vw;
    left: 10vw;
    display: flex;
}
.coluna-centro .bolas-sorteadas .bola-ordem .label{
    width: 60%;
    height: 2.4vw;
    margin-top: 0.7vw;
    background:var(--azul-forte);
    font-size: 1.5vw;
    text-align: center;
    padding-top: 0.5vw;
    box-sizing: border-box;
    color: var(--branco);
    border-radius: 0.5vw 0 0 0.5vw;
}
.coluna-centro .bolas-sorteadas .bola-ordem .value{
    width: 40%;
    height: 4vw;
    border-radius: 0.5vw;
    border: 0.2vw solid var(--azul-fraco);
    background:var(--azul-forte);
    text-align: center;
    font-size: 3.2vw;
    box-sizing: border-box;
    color: var(--amarelo);
}
.coluna-centro .painel-numeros{
    width: 99%;
    background:var(--azul-forte);
    border-radius: 0.5vw;
    padding:0.2vw;
    box-sizing: border-box;
    float: left;
    COLOR:#2d2d2d;
   
}

.coluna-centro .painel-numeros .numero{
    width: 9.8%;
    background:#000;
    font-size: 2vw;
    border-radius: 0.5vw;
    height: 2.3vw;
    text-align: center;
    margin: 0.1vw 0.1%;
    float: left;
    padding-top: 0.2vw;
    box-sizing: border-box;
}

.coluna-centro .painel-numeros .sorteado{
    color: var(--verde);
}

.coluna-centro .painel-numeros .ultimo{
    color: var(--branco);
    background: red;
}


.coluna-direita {
    padding:0.3vw;
    box-sizing: border-box;
}
.coluna-direita .lista-melhores-cartelas{
    width: 100%;
    height: 31vw;
    margin-bottom: 0.2vw;
    background:var(--azul-fraco);
    font-size: 1.2vw;
    border-radius: 0.5vw;
    overflow: hidden;
}

.coluna-direita .lista-melhores-cartelas .topo{
    background:var(--azul-forte);
    display: flex;
    height: 2vw;
    color: var(--amarelo);
}

.coluna-direita .lista-melhores-cartelas .topo .cupom{
    text-align: center;
    padding-top: 0.4vw;
    width: 20%;
}

.coluna-direita .lista-melhores-cartelas .topo .doador{
    text-align: center;
    padding-top: 0.4vw;
    width: 40%;
}

.coluna-direita .lista-melhores-cartelas .topo .faltam{
    text-align: center;
    padding-top: 0.4vw;
    width: 40%;
}

.coluna-direita .lista-melhores-cartelas .linha{
    display: flex;
    height: 2vw;
    padding:0.2vw;
}

.coluna-direita .lista-melhores-cartelas .corpo .bg-branco{
    background:var(--branco);
    border-radius: 0.5vw;
    height: 2vw;
    line-height: 2.2vw;
}
.coluna-direita .lista-melhores-cartelas .corpo .cupom{
    text-align: center;
    padding: 0.1vw;
    width: 20%;
    color: red;
}

.coluna-direita .lista-melhores-cartelas .corpo .doador{
    text-align: center;
    padding: 0.1vw;
    width: 40%;
    color: var(--azul-forte);
}

.coluna-direita .lista-melhores-cartelas .corpo .faltam{
    padding: 0.1vw;
    width: 40%;
}

.coluna-direita .lista-melhores-cartelas .corpo .faltam span{
    width: 18.4%;
    float: left;
    background:var(--azul-forte);
    color: var(--amarelo);
    border-radius: 0.5vw;
    margin: 0.1vw;
    height: 1.8vw;
    text-align: center;
    line-height: 2vw;
}
.coluna-direita .lista-melhores-cartelas .corpo .faltam .nulo{
    background:#d3d3d3;
}
.coluna-direita .bilhete-melhores-cartelas{
    width: 100%;
    height: 22.9vw;
    margin-bottom: 0.5vw;
}

.coluna-direita .bilhete-melhores-cartelas .cartela{
background: #ffd798;
width: 49%;
height: 11.2vw;
border-radius: 0.5vw;
float: right;
margin-bottom: 0.5vw;
padding:0.2vw;
box-sizing: border-box;
}

.coluna-direita .bilhete-melhores-cartelas div:nth-child(odd){
    float: left;
}

.coluna-direita .bilhete-melhores-cartelas .cartela .numero{
    width: 18.7%;
    background: var(--branco);
    height: 2.2vw;
    border-radius: 0.5vw;
    font-size: 1.6vw;
    text-align: center;
    line-height: 2.3vw;
    float: left;
    margin: 0.1vw;
}

.coluna-direita .bilhete-melhores-cartelas .cartela .doador{
width: 100%;
font-size: 1.5vw;
text-align: center;
line-height: 2vw;
color: var(--amarelo);
background:var(--azul-forte);
border-radius: 0.5vw;
height: 1.6vw;
margin-bottom: 0.2vw;
}
.coluna-direita .bilhete-melhores-cartelas .cartela .cupom{
width: 100%;
font-size: 1.5vw;
text-align: center;
line-height: 2vw;
color: var(--amarelo);
background:var(--azul-forte);
border-radius: 0.5vw;
height: 1.6vw;
margin-top: 0.2vw;;
}
.coluna-direita .bilhete-melhores-cartelas .cartela .sorteado{
    background: var(--azul-fraco);
    color: var(--branco);
}