body {
    background-color: #212425;
    color: #fff;
}

header {
    z-index: 9999;
    position: fixed;
    top: -1px;
    width: 100%;
}

footer {
    z-index: 9999;
    position: fixed;
    bottom: 0;
    font-size: 11px;
    left: 50%
}

header {
    background-color: #323637;
}

#logo {
    width: 200px;
}

:root {
    --bs-primary: #02df00 !important;
    --bs-primary-rgb: 2, 223, 0;
}

.btn-primary {
    --bs-btn-bg: #02df00;
    --bs-btn-border-color: #02df00;
    --bs-btn-hover-bg: #02df00;
    --bs-btn-hover-border-color: #02df00;
    --bs-btn-active-bg: #02df00;
    --bs-btn-active-border-color: #02df00;
    --bs-btn-disabled-bg: #02df00;
    --bs-btn-disabled-border-color: #02df00;
}

.btn-outline-primary {
    --bs-btn-color: #02df00;
    --bs-btn-border-color: #02df00;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #02df00;
    --bs-btn-hover-border-color: #02df00;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #02df00;
    --bs-btn-active-border-color: #02df00;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #02df00;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #02df00;
    --bs-gradient: none;
}

.tarja-horizontal-container {
    overflow: hidden;
    width: 100%;
}
  
.tarja-horizontal {
    white-space: nowrap;
    position: relative;
    width: fit-content;
    animation: scroll-horizontal 180s linear infinite; /* Definindo a animação */
}
  
.tarja-horizontal span {
    display: inline-block;
    font-size: 14px;
}
  
@keyframes scroll-horizontal {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

.icone-pix {
    height: 32px;
    width: 32px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48"> <path fill="#4db6ac" d="M11.9,12h-0.68l8.04-8.04c2.62-2.61,6.86-2.61,9.48,0L36.78,12H36.1c-1.6,0-3.11,0.62-4.24,1.76	l-6.8,6.77c-0.59,0.59-1.53,0.59-2.12,0l-6.8-6.77C15.01,12.62,13.5,12,11.9,12z"></path><path fill="#4db6ac" d="M36.1,36h0.68l-8.04,8.04c-2.62,2.61-6.86,2.61-9.48,0L11.22,36h0.68c1.6,0,3.11-0.62,4.24-1.76	l6.8-6.77c0.59-0.59,1.53-0.59,2.12,0l6.8,6.77C32.99,35.38,34.5,36,36.1,36z"></path><path fill="#4db6ac" d="M44.04,28.74L38.78,34H36.1c-1.07,0-2.07-0.42-2.83-1.17l-6.8-6.78c-1.36-1.36-3.58-1.36-4.94,0	l-6.8,6.78C13.97,33.58,12.97,34,11.9,34H9.22l-5.26-5.26c-2.61-2.62-2.61-6.86,0-9.48L9.22,14h2.68c1.07,0,2.07,0.42,2.83,1.17	l6.8,6.78c0.68,0.68,1.58,1.02,2.47,1.02s1.79-0.34,2.47-1.02l6.8-6.78C34.03,14.42,35.03,14,36.1,14h2.68l5.26,5.26	C46.65,21.88,46.65,26.12,44.04,28.74z"></path> </svg>');
}

i.icone{
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: cover;
}

.text-valor{
    color: #1bc711 !important
}


@media (min-width: 768px) {
    .container {
        width: 45% !important;
    }

    h1 {
        font-size: calc(1.325rem + .9vw)!important;
    }
}

@media (min-width: 1400px) {
    .container {
        width: 30% !important;
    }
}

@media (max-width: 1000px) {
    .w-ssm-50 {
        width: 50% !important;
    }
}


.accordion-item {
    background-color: #13263c;
    border: 1px solid #fff;
}

.accordion-button:not(.collapsed) {
    color: #009ef7 !important;
}

.jogo-link {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: black; /* Cor inicial do texto */
  }

  /* Estilize o texto do hover */
  .jogo-link::before {
    width: 150px;
    text-align: center;
    content: "Jogue agora";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #02df00; /* Cor de fundo azul */
    color: white; /* Cor do texto branco */
    padding: 10px;
    border-radius: 5px;
    opacity: 0; /* Torna o texto invisível inicialmente */
    transition: opacity 0.3s ease-in-out;
    z-index: 1;
  }

  /* Defina o efeito de hover */
  .jogo-link:hover::before {
    opacity: 1; /* Torna o texto visível ao passar o mouse */
  }

  /* Defina o fundo desfocado */
  .jogo-link:hover {
    backdrop-filter: blur(4px); /* Aplica o efeito de desfoque no fundo */
  }

  .jogo-link img {
    transition: filter 0.3s ease-in-out;
  }

  .jogo-link:hover img {
    filter: blur(4px); /* Aplica o efeito de desfoque na imagem */
  }

  .progress {
    height: 1.5rem !important;
    position: relative;
  }
  
  .progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
    font-weight: bold;
    font-size: 14px;
  }

  .timer-box {
    display: inline-block;
    background-color: #0588bc;
    color: #fff;
    padding: 10px;
    margin: 0 5px;
    border-radius: 2rem;
}

.timer-separator {
    color: #0588bc;
    font-weight: bold;
    display: inline-block;
    margin: 0 5px;
}

.timer-value {
  margin-bottom: 0;
  padding-bottom: 0;
  color: #fff;
}

.progress-width {
  width: 90%;
}

.progress-width-outros {
  width: 88%;
}

@media (max-width: 1400px) {
  .progress-width {
    width: 94%;
  }

  .progress-width-outros {
    width: 100%;
  }
  #jogos .jogo-link img {
    width:100% !important;
  }
}

.imagem-com-sombra {
    border-radius: 50%; /* Torna a imagem redonda */
    overflow: hidden; /* Oculta qualquer parte da imagem que ultrapasse o limite do contêiner */
    box-shadow: 0 0 10px rgba(0, 0, 0, 1); /* Adiciona uma sombra */
    /* Outras propriedades de estilo da imagem (largura, altura, etc.) podem ser adicionadas aqui */
  }