* {
    padding: 0;
    margin: 0;
}

body {
    background: white;
    overflow: hidden; /* Evita barras de rolagem */
    margin: 0; /* Remover margens do corpo da página */
}

#myCanvas {
    position: absolute;
    top: -90px; /* Coloca o canvas no topo */
    left: 0; /* Alinha o canvas à esquerda */
    width: 100%; /* Ocupa toda a largura do viewport */
    height: 160%; /* Ocupa toda a altura do viewport */
    border: 3px solid white;
}

.game-board {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.game-board img {
    width: 98px;
    height: 98px;
    z-index: 10;
}

.vendedor {
    position: absolute;
    bottom: -2px;
}

/* Posicione o Mario sobre o canvas */
.vendedor {
    width: 100px;
    height: 120px; /*Altura antiga height: 117px;*/
    position: absolute;
    top: 117px; /* Ajuste conforme necessário */

    z-index: 10;
}

.triste {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 135px; /* Ajuste conforme necessário */

    z-index: 10;
    display: none;
}

/* .dance{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 117px;

    z-index: 10;
    display: none;
} */

/* .dance3{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 117px;

    z-index: 10;
    display: none;
}

.dance4{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 117px;

    z-index: 10;
    display: none;
} */

.moving {
    transition: left 6s ease; /* Defina a duração e o tipo de transição aqui */
}

/* ----------------------------------------------------------------- */

.jump {
    animation: jump 500ms ease;
}

.morreu3, .morreu5, .morreu7 {
    /* animation: dead 500ms ease-out; */
    display: none;
}

@keyframes jump {
    0% {
        transform: translate(0, 0); /* Começa sem movimento */
    }

    20% {
        transform: translate(30%, -200px); /* Move para cima e para frente */
    }

    40% {
        transform: translate(50%, -250px); /* Continua o movimento para cima e para frente */
    }

    60% {
        transform: translate(70%, -200px); /* Continua o movimento para cima e para frente */
    }

    80% {
        transform: translate(90%, -105px); /* Movimento para baixo (ainda mais lento) */
    }

    100% {
        transform: translate(100%, 0); /* Volta para a posição original */
    }
}

@keyframes dead {
}

/* ----------------------------------------------------------------- */

.table-no-rounded-corners th,
.table-no-rounded-corners td {
    border-radius: 0;
}

.table {
    font-family: 'Poppins', sans-serif;
}

.table-responsive {
    height: 260px; /* Defina a altura desejada */
    overflow-x: auto; /* Adicione um scroll horizontal se necessário */
    scrollbar-width: thin; /* Torna a largura do scroll mais fina */
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

/* Para navegadores WebKit (como Chrome e Safari) */
.table-responsive::-webkit-scrollbar {
    width: 6px; /* Defina a largura desejada para o scroll */
}
  
.table-responsive::-webkit-scrollbar-track {
    background: transparent; /* Cor de fundo do track do scroll */
}
  
.table-responsive::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3); /* Cor do thumb do scroll */
    border-radius: 10px; /* Borda do thumb do scroll */
}

.table tbody td {
    padding-top: 5px; /* Defina o valor desejado para o preenchimento superior */
    padding-bottom: 5px; /* Defina o valor desejado para o preenchimento inferior */
    cursor: pointer;
}

/* Tamanho da fonte para o cabeçalho da tabela */
.table thead th {
    font-size: 13.2px; /* Defina o tamanho da fonte desejado */
}
  
/* Tamanho da fonte para o corpo da tabela */
.table tbody td {
    font-size: 12.4px; /* Defina o tamanho da fonte desejado */
}

/* Estilos da linha de fundo alterada */
.linha-alterada {
    background-color: rgb(243, 243, 193); /* Cor de fundo desejada */
}

/* ----------------------------------------------------------------- */

.linha-alterada {
    background-color: yellow; /* Define a cor de fundo para sinalizar a alteração */
}

#overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(250, 248, 248, 0.8); /* Cor de fundo semi-transparente mais próxima de #eee */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #000;
}

.sk-chase {
    width: 40px;
    height: 40px;
    position: relative;
    animation: sk-chase 2.5s infinite linear both;
}
  
.sk-chase-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0; 
    animation: sk-chase-dot 2.0s infinite ease-in-out both; 
}

.sk-chase-dot:before {
    content: '';
    display: block;
    width: 25%;
    height: 25%;
    background-color: #727070;
    border-radius: 100%;
    animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
}
  
.sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }
  
@keyframes sk-chase {
    100% { transform: rotate(360deg); } 
}
  
@keyframes sk-chase-dot {
    80%, 100% { transform: rotate(360deg); } 
}
  
@keyframes sk-chase-dot-before {
    50% {
      transform: scale(0.4); 
    } 100%, 0% {
      transform: scale(1.0); 
    } 
}

/* ----------------------------------------------------------------- */
/* --------------------------Media querys-------------------------- */





/* TV de 60 polegadas Full HD */
@media (max-width: 3840px) and (max-height: 2160px) {
    .vendedor {
        top: 315px; /* Ajuste para dispositivos de 60 polegadas ou maiores */
    }
    
    .triste {
        top: 160px; /* Ajuste para dispositivos de 60 polegadas ou maiores */
    }

    .table-responsive {
        height: 530px; /* Defina a altura desejada */
    }
}

/* Media query para telas de 11 e 14 polegadas */
@media (max-width: 1366px) and (max-height: 768px) {
    .vendedor {
        top: 117px; /* Ajuste para telas de 11 e 14 polegadas */
    }
}

/* Media query para telas de 15 polegadas */
@media (max-width: 1920px) and (max-height: 1080px) {
    /* Estilos específicos para telas de 15 polegadas */
}

/* ----------------------------------------------------------------- */