/* GERAIS */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: BalooTamma;
  src: url(../fonts/BalooTamma.ttf);
}

@font-face {
  font-family: Sarala;
  src: url(../fonts/Sarala.ttf);
}

@font-face {
  font-family: Digital7mono;
  src: url(../fonts/Digital7mono.ttf);
}

@font-face {
  font-family: GT-Pressura;
  src: url(../fonts/GT-Pressura-Mono-Regular.otf);
}

body {
  background-color: #e8e8e8;
  font-family: "PT Sans", sans-serif;
}

.navbar-padding {
  height: 66px;
}

main {
  min-height: calc(100vh - 50px);
}

@media (min-width: 576px) {
  main {
    min-height: calc(100vh - 69px);
  }
}

@media (min-width: 992px) {
  .navbar-padding {
    height: 58px;
  }
}

.container {
  max-width: 1250px;
}

.box-titulo h1 {
  color: #444444;
  font-size: 1.8em;
}

#subtitulo {
  font-size: 1.5em;
}

.underline {
  padding-bottom: 5px;
  border-bottom: 3px solid #2c5f26;
}

.underline-fino {
  padding-bottom: 5px;
  border-bottom: 1px solid #2c5f26;
}

.form-control.no-edit {
  pointer-events: none;
  background-color: #e8e8e8;
}

.texto-justificado {
  text-align: justify;
}

/* LOGIN */

#box-formulario-login {
  max-width: 340px;
}

.inputbox {
  position: relative;
  width: 100%;
  height: 50px;
  margin-bottom: 30px;
}

.inputbox input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border: 1px solid #858587;
  outline: none;
  background: #f6f6f6;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 1em;
}

.inputbox span {
  position: absolute;
  top: 12px;
  left: 20px;
  font-size: 1em;
  transition: 0.5s;
  font-family: "PT Sans", sans-serif;
  color: #606060;
  user-select: none;
}

.inputbox input:focus ~ span,
.inputbox input:valid ~ span {
  transform: translateX(-13px) translateY(-35px);
  font-size: 0.8em;
}

.inputbox input:focus {
  border: 2px solid #305393;
}

.form-div input {
  height: 40px;
  border: 1px solid #858587;
  outline: none;
  background: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 1em;
}

.form-div select {
  height: 40px;
  border: 1px solid #858587;
  outline: none;
  background: #fff;
  padding: 0 20px;
  border-radius: 20px;
  font-size: 1em;
}

.form-div label {
  font-size: 1em;
  margin-bottom: 5px;
}

.form-div .input-file {
  padding: 6px 12px;
}

button.btn-submit {
  cursor: pointer;
  width: 150px;
  height: 50px;
  background-image: linear-gradient(to top, #d8d9db 0%, #fff 80%, #fdfdfd 100%);
  border-radius: 20px;
  border: 1px solid #858587;
  transition: all 0.2s ease;
  color: #2c5f26;
  font-size: 1.2em;
  font-weight: bold;
  text-shadow: 0 1px #fff;
}

button.btn-submit:hover {
  box-shadow: 0 4px 3px 1px #fcfcfc, 0 6px 8px #d6d7d9, 0 -4px 4px #cecfd1,
    0 -6px 4px #fefefe, inset 0 0 3px 3px #cecfd1;
}

button.btn-submit:active {
  box-shadow: 0 4px 3px 1px #fcfcfc, 0 6px 8px #d6d7d9, 0 -4px 4px #cecfd1,
    0 -6px 4px #fefefe, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;
}

button.btn-submit:focus {
  box-shadow: 0 4px 3px 1px #fcfcfc, 0 6px 8px #d6d7d9, 0 -4px 4px #cecfd1,
    0 -6px 4px #fefefe, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;
}

/* NAVBAR */

@media (min-width: 992px) {
  .navbar-brand.abs {
    position: absolute;
    width: auto;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
}

.navbar {
  font-size: 1.1em;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
}

#navbar-logotipo {
  max-height: 40px;
  width: auto;
}

#nav-date {
  font-size: 0.9rem;
  color: #444444;
  flex: 1;
  text-align: center;
  user-select: none;
}

#digital-clock {
  font-family: GT-Pressura;
  font-size: 1.3rem;
  color: #444444;
  flex: 1;
  text-align: center;
  user-select: none;
}

.nav-item {
  padding-right: 20px;
}

.nav-item.nav-item-last {
  padding-right: 0;
}

.nav-link {
  color: #000;
}

.nav-link:hover {
  color: #2c5f26;
}

#item-nome-user {
  color: #305393;
}

@media all and (min-width: 992px) {
  .navbar .nav-item .dropdown-menu {
    display: none;
  }

  .navbar .nav-item:hover .dropdown-menu {
    display: block;
  }

  .navbar .nav-item .dropdown-menu {
    margin-top: 0;
  }
}

.navbar-toggler {
  font-size: 1rem;
}

/* FOOTER */

#copyright {
  background-color: #2c5f26;
  padding: 8px 0;
  margin-top: 5px;
  box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.35);
}

#copyright p {
  color: #fff;
  margin: 0;
  font-size: 0.7em;
}

@media (min-width: 576px) {
  #copyright p {
    font-size: 0.9em;
  }
}

/* CRIAR CONCORRENTE */

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
  margin: 5px;
}

.toggle-switch .toggle-input {
  display: none;
}

.toggle-switch .toggle-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 24px;
  background-color: #f44336;
  border-radius: 34px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.toggle-switch .toggle-label::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  background-color: #fff;
  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s;
}

.toggle-switch .toggle-input:checked + .toggle-label {
  background-color: #3db641;
}

.toggle-switch .toggle-input:checked + .toggle-label::before {
  transform: translateX(16px);
}

#box-formulario-criar-concorrente p {
  margin: 0;
}

/* DADOS PESSOAIS */

#foto-meus-dados {
  max-width: 125px;
  border-radius: 50%;
  border-style: solid;
  border-width: 5px;
}

.border-acdba5 {
  border-color: #acdba5 !important;
}

.border-b2d2fc {
  border-color: #b2d2fc !important;
}

.border-fd9f9f {
  border-color: #fd9f9f !important;
}

.border-ffe96e {
  border-color: #ffe96e !important;
}

.border-eeabff {
  border-color: #eeabff !important;
}

/* REGULAMENTO */

#box-regulamento h2,
#box-quem-somos h2,
#box-historico-site h2 {
  color: #305393;
  border-bottom: 1px solid #305393;
  padding-bottom: 5px;
  padding-left: 10px;
  margin-bottom: 15px;
  font-size: 1.3em;
}

/* TÍTULOS */

#box-titulos {
  max-width: 800px;
}

#tabela-titulos {
  --bs-table-bg: transparent;
}

#tabela-titulos tr {
  border-color: #aaa;
}

#tabela-titulos img {
  max-width: 30px;
  max-height: auto;
  margin-right: 15px;
}

#tabela-titulos p {
  margin-bottom: 0;
}

#tabela-titulos td img,
#tabela-titulos td p {
  display: block;
  margin: 0 auto;
}

#ver-lista-link {
  text-decoration: none;
  color: #2c5f26;
}

/* CONCORRENTES */

#tabela-concorrentes {
  --bs-table-bg: transparent;
}

#tabela-concorrentes tr {
  border-color: #aaa;
}

#tabela-concorrentes img {
  max-width: 50px;
  max-height: auto;
  border-radius: 50%;
}

img.border-red {
  border: 3px solid #c80000;
}

.icon-concorrentes {
  font-size: 1.2em;
  color: #2c5f26;
}

.perfil-concorrente-btn {
  background-color: transparent;
  border: none;
}

#box-concorrentes .linha-destacada-acdba5 {
  background-color: #acdba5;
}

#box-concorrentes .linha-destacada-b2d2fc {
  background-color: #b2d2fc;
}

#box-concorrentes .linha-destacada-fd9f9f {
  background-color: #fd9f9f;
}

#box-concorrentes .linha-destacada-ffe96e {
  background-color: #ffe96e;
}

#box-concorrentes .linha-destacada-eeabff {
  background-color: #eeabff;
}

/* GERIR JORNADAS */

#gerir-jornadas-area {
  max-width: 600px;
}

button.btn-jornada {
  cursor: pointer;
  width: 70px;
  height: 70px;
  background-image: linear-gradient(to top, #d8d9db 0%, #fff 80%, #fdfdfd 100%);
  border-radius: 20px;
  border: 1px solid #858587;
  transition: all 0.2s ease;
  color: #2c5f26;
  font-size: 1.2em;
  font-weight: bold;
  text-shadow: 0 1px #fff;
  margin-bottom: 30px;
  position: relative;
}

button.btn-jornada i {
  font-size: 24px;
  color: #2c5f26;
  position: absolute;
  bottom: -5px;
  right: -5px;
  background-color: #e8e8e8;
  border-radius: 50%;
}

#check-jornada {
  font-size: 24px;
  color: #2c5f26;
  border-radius: 50%;
  padding-right: 5px;
}

#numero-palpites-jornada {
  font-size: 24px;
  color: #d4204a;
  border-radius: 50%;
  padding-right: 5px;
}

button.btn-jornada:hover {
  box-shadow: 0 4px 3px 1px #fcfcfc, 0 6px 8px #d6d7d9, 0 -4px 4px #cecfd1,
    0 -6px 4px #fefefe, inset 0 0 3px 3px #cecfd1;
}

button.btn-jornada:active {
  box-shadow: 0 4px 3px 1px #fcfcfc, 0 6px 8px #d6d7d9, 0 -4px 4px #cecfd1,
    0 -6px 4px #fefefe, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;
}

button.btn-jornada:focus {
  box-shadow: 0 4px 3px 1px #fcfcfc, 0 6px 8px #d6d7d9, 0 -4px 4px #cecfd1,
    0 -6px 4px #fefefe, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;
}

#jornada-container img {
  max-height: 40px;
  width: 40px;
}

.icon-grande {
  font-size: 2em;
}

/* PALPITES */

#box-joker {
  border: 1px solid #2c5f26;
  border-radius: 20px;
}

#checkbox-joker {
  transform: scale(2);
}

.dia-hora-palpite {
  font-size: 0.8em;
}

.fa-youtube {
  color: #c80000;
}

.form-div input.destaque,
.form-div p.destaque {
  font-size: 1.2em;
  font-weight: bold;
}

button.btn-comprido {
  cursor: pointer;
  width: auto;
  padding: 0 30px;
  height: 50px;
  background-image: linear-gradient(to top, #d8d9db 0%, #fff 80%, #fdfdfd 100%);
  border-radius: 20px;
  border: 1px solid #858587;
  transition: all 0.2s ease;
  color: #2c5f26;
  font-size: 1.2em;
  font-weight: bold;
  text-shadow: 0 1px #fff;
}

button.btn-comprido:hover {
  box-shadow: 0 4px 3px 1px #fcfcfc, 0 6px 8px #d6d7d9, 0 -4px 4px #cecfd1,
    0 -6px 4px #fefefe, inset 0 0 3px 3px #cecfd1;
}

button.btn-comprido:active {
  box-shadow: 0 4px 3px 1px #fcfcfc, 0 6px 8px #d6d7d9, 0 -4px 4px #cecfd1,
    0 -6px 4px #fefefe, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;
}

button.btn-comprido:focus {
  box-shadow: 0 4px 3px 1px #fcfcfc, 0 6px 8px #d6d7d9, 0 -4px 4px #cecfd1,
    0 -6px 4px #fefefe, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;
}

#pontos_ganhos_jogo1:hover,
#pontos_ganhos_jogo2:hover,
#pontos_ganhos_jogo3:hover,
#pontos_ganhos_jogo4:hover,
#pontos_ganhos_jogo5:hover,
#pontos_ganhos_jogo6:hover,
#pontos_ganhos_jogo7:hover,
#pontos_ganhos_jogo8:hover,
#pontos_ganhos_jogo9:hover,
#pontos_ganhos_jogo10:hover,
#pontos_ganhos_jogo11:hover,
#pontos_ganhos_jogo12:hover,
#pontos_ganhos_jogo13:hover,
#pontos_ganhos_jogo14:hover,
#pontos_ganhos_jogo15:hover {
  color: #2c5f26;
}

.fa-circle-info {
  color: #305393;
}

.balao-legenda {
  /* layout */
  position: relative;
  max-width: 100%;

  /* looks */
  background-color: #fff;
  padding: 1em 1em;
  font-size: 0.9em;
  box-shadow: 0px 0.125rem 0.5rem rgba(0, 0, 0, 0.3);
  border-radius: 20px;

  display: none;
}

.balao-legenda::before {
  /* layout */
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  bottom: 100%;
  right: 40px;
  /* offset should move with padding of parent */
  border: 0.75rem solid transparent;
  border-top: none;

  /* looks */
  border-bottom-color: #fff;
  filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));
}

.balao-legenda p,
.balao-legenda ul {
  margin: 0;
}

/* LISTA DE PALPITES */

.foto-concorrente {
  max-width: 35px;
  max-height: auto;
  border-radius: 50%;
}

.joker-apostado {
  color: #c80000;
}

.em-cheio {
  color: #c80000;
}

.coluna-pontos {
  display: flex;
  justify-content: center;
  align-items: center;
}

.caixinha-redonda {
  border: 1px solid #2c5f26;
  border-radius: 20px;
  padding: 10px 20px;
}

.caixinha-redonda a {
  text-decoration: none;
  color: #000;
  cursor: pointer;
}

#box-palpite .letra-pequena {
  font-size: 0.7em;
}

#box-palpite .nome-concorrente,
#box-palpite .joker-apostado {
  font-size: 0.8em;
}

@media (min-width: 576px) {
  #box-palpite .letra-pequena {
    font-size: 0.8em;
  }

  #box-palpite .nome-concorrente,
  #box-palpite .joker-apostado {
    font-size: 1em;
  }
}

.letra-azul {
  background-color: #ffe600;
  padding: 5px;
  border: 1px solid #2c5f26;
}

/* CLASSIFICAÇÃO */

table {
  border-collapse: collapse;
  width: 100%;
  background-color: #fff;
}

th,
td {
  border: 1px solid #ddd;
  padding: 5px;
  font-size: 0.8em;
}

th {
  background-color: #bbb !important;
}

#classificacao-container .linha-destacada-acdba5 {
  background-color: #acdba5;
}

#classificacao-container .linha-destacada-b2d2fc {
  background-color: #b2d2fc;
}

#classificacao-container .linha-destacada-fd9f9f {
  background-color: #fd9f9f;
}

#classificacao-container .linha-destacada-ffe96e {
  background-color: #ffe96e;
}

#classificacao-container .linha-destacada-eeabff {
  background-color: #eeabff;
}

.fa-arrow-up {
  color: #3d8036;
}

.fa-arrow-down {
  color: #c80000;
}

.fa-equals {
  color: #cfa20d;
}

tr:hover {
  background-color: #eee;
}

.joker-dot {
  font-size: 6px;
  color: #000;
}

@media (min-width: 576px) {
  th,
  td {
    font-size: 1em;
  }

  .joker-dot {
    font-size: 10px;
    color: #000;
  }
}

/* SETTINGS */

#box-valor-premios img {
  height: 30px;
  width: auto;
}

.apostas-iniciais-settings img {
  max-height: 40px;
  width: 40px;
}

/* APOSTAS INICIAIS */

#data-hora-apostas-iniciais {
  font-size: 1.1em;
  color: #305393;
  margin-bottom: 10px !important;
}

#box-apostas-iniciais img {
  max-height: 40px;
  width: 40px;
}

#select_clube_campeao {
  cursor: pointer;
}

#melhor_marcador {
  width: 100%;
}

.melhor_marcador_input {
  width: 100%;
}

.no-edit {
  pointer-events: none;
  background-color: #e8e8e8 !important;
}

/* LISTA DE APOSTAS INICIAIS */

.emblema-pequeno {
  max-width: 35px;
  max-height: auto;
}

#lista-apostas-iniciais-container .linha-destacada-acdba5 {
  background-color: #acdba5;
}

#lista-apostas-iniciais-container .linha-destacada-b2d2fc {
  background-color: #b2d2fc;
}

#lista-apostas-iniciais-container .linha-destacada-fd9f9f {
  background-color: #fd9f9f;
}

#lista-apostas-iniciais-container .linha-destacada-ffe96e {
  background-color: #ffe96e;
}

#lista-apostas-iniciais-container .linha-destacada-eeabff {
  background-color: #eeabff;
}

.link-melhor-marcador {
  text-decoration: none;
  color: #000;
}

/* PERFIL DO CONCORRENTE */

#foto-perfil-concorrente {
  max-width: 125px;
  border-radius: 50%;
}

#perfil-pontos {
  font-size: 1.3em;
  color: #305393;
}

#perfil-palpites-em-cheio {
  font-size: 1.3em;
  color: #305393;
}

#perfil-palpites-em-cheio:hover {
  color: #2c5f26;
}

#media-por-jornada {
  font-size: 1em;
  color: #000;
}

#box-mensagem-perfil h2,
#box-acessos-perfil h2,
#box-historico-perfil h2 {
  color: #305393;
  border-bottom: 1px solid #305393;
  padding-bottom: 5px;
  padding-left: 10px;
  margin-bottom: 15px;
  font-size: 1.2em;
}

.form-div textarea {
  width: 100%;
  border: 1px solid #858587;
  outline: none;
  background: #fff;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 1em;
  resize: none;
}

.link-perfil-concorrente {
  background-color: transparent;
  border: none;
  color: #000000;
  text-decoration: none;
}

#criar-concorrente-btn {
  font-size: 2.5em;
  color: #2c5f26;
}

.balao-palpites-em-cheio {
  /* layout */
  position: relative;
  max-width: 100%;

  /* looks */
  margin-top: 15px;
  background-color: #fff;
  padding: 1em;
  font-size: 0.9em;
  box-shadow: 0px 0.125rem 0.5rem rgba(0, 0, 0, 0.3);
  border-radius: 20px;

  display: none;
}

.balao-palpites-em-cheio::before {
  /* layout */
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  /* offset should move with padding of parent */
  border: 0.75rem solid transparent;
  border-top: none;

  /* looks */
  border-bottom-color: #fff;
  filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));
}

#tabela-palpites-em-cheio {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  border: none;
}

#tabela-palpites-em-cheio th,
#tabela-palpites-em-cheio td {
  padding: 7px 0;
  border: none;
  font-size: 1em;
}

#tabela-palpites-em-cheio tr {
  display: flex;
  align-items: center;
}

#tabela-palpites-em-cheio tr:hover {
  background-color: transparent !important;
}

#tabela-palpites-em-cheio .resultado {
  flex: 0 0 60px;
  text-align: center;
}

#tabela-palpites-em-cheio .emblema_pequenino {
  flex: 0 0 35px;
  text-align: center;
}

#tabela-palpites-em-cheio .jogosEmCheio_emblema_clube {
  max-width: 25px;
  max-height: 25px;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media screen and (max-width: 576px) {
  #tabela-palpites-em-cheio .resultado {
    flex: 0 0 50px;
  }

  #tabela-palpites-em-cheio .jogosEmCheio_emblema_clube {
    max-width: 25px;
    max-height: 25px;
  }
}

#tabela-palpites-em-cheio td {
  flex: 1;
}

#ranking-participacoes {
  font-size: 1em;
}

#tabela-historico-epocas {
  background-color: transparent;
}

#tabela-historico-epocas td {
  border: none;
  border-bottom: 1px dotted #999;
  background-color: transparent;
}

#tabela-historico-epocas tr:last-child td {
  border-bottom: none;
}

/* DASHBOARD USER */

#logotipo-box {
  max-width: 1250px;
  position: relative;
}

#avisos-box {
  border: 2px solid #2c5f26;
  padding: 10px 20px;
  border-radius: 20px;
  text-align: center;
  background-color: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

#jogos-do-dia-box {
  border: 2px solid #305393;
  padding: 10px 20px;
  border-radius: 20px;
  text-align: center;
  background-color: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

#jogos-do-dia-titulo i {
  color: #305393;
  padding-right: 5px;
}

#tabela-jogos-do-dia {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  border: none;
}

#tabela-jogos-do-dia th,
#tabela-jogos-do-dia td {
  padding: 5px 0;
  border: none;
  font-size: 1em;
}

#tabela-jogos-do-dia tr {
  display: flex;
  align-items: center;
}

#tabela-jogos-do-dia tr:hover {
  background-color: transparent !important;
}

#tabela-jogos-do-dia .hora {
  flex: 0 0 60px;
  text-align: center;
}

#tabela-jogos-do-dia .emblema_pequenino {
  flex: 0 0 35px;
  text-align: center;
}

#tabela-jogos-do-dia .jogosDoDia_emblema_clube {
  max-width: 25px;
  max-height: 25px;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media screen and (max-width: 576px) {
  #tabela-jogos-do-dia .hora {
    flex: 0 0 50px;
  }

  #tabela-jogos-do-dia .jogosDoDia_emblema_clube {
    max-width: 25px;
    max-height: 25px;
  }
}

#tabela-jogos-do-dia td {
  flex: 1;
}

#aniversariantes-box {
  border: 2px solid #c49705;
  padding: 10px 20px;
  border-radius: 20px;
  text-align: center;
  background-color: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

#mensagensporler-container a {
  color: #000;
  text-decoration: none;
}

#mensagensporler-box {
  border: 2px solid #9a1ff9;
  padding: 10px 20px;
  border-radius: 20px;
  text-align: center;
  background-color: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

#palpitesporregistar-container a {
  color: #000;
  text-decoration: none;
}

#palpitesporregistar-box {
  border: 2px solid #f44336;
  padding: 10px 20px;
  border-radius: 20px;
  text-align: center;
  background-color: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

#palpitesporregistar-box i {
  color: #305393;
  padding-right: 5px;
}

#mensagensporler-box i {
  padding-right: 5px;
}

#avisos-box i {
  color: #305393;
  padding-right: 5px;
}

#aniversariantes-box i {
  color: #305393;
  padding-right: 5px;
}

#logotipo-dashboard {
  width: 150px;
  transition: 0.3s;
  padding-top: 10px;
}

#logotipo-dashboard:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  border-radius: 20px;
}

#gestao-logotipo {
  width: 200px;
}

#area-avisos {
  font-size: 0.9em;
  text-align: justify;
}

@media (min-width: 576px) {
  #logotipo-dashboard {
    width: 250px;
  }

  #area-avisos {
    font-size: 1em;
  }
}

button.btn-dashboard {
  cursor: pointer;
  width: 90px;
  padding: 20px;
  height: 90px;
  background-image: linear-gradient(to top, #d8d9db 0%, #fff 80%, #fdfdfd 100%);
  border-radius: 20px;
  border: 1px solid #858587;
  transition: all 0.2s ease;
  color: #2c5f26;
  font-size: 1.2em;
  font-weight: bold;
  text-shadow: 0 1px #fff;
}

button.btn-dashboard:hover {
  box-shadow: 0 4px 3px 1px #fcfcfc, 0 6px 8px #d6d7d9, 0 -4px 4px #cecfd1,
    0 -6px 4px #fefefe, inset 0 0 3px 3px #cecfd1;
}

button.btn-dashboard:active {
  box-shadow: 0 4px 3px 1px #fcfcfc, 0 6px 8px #d6d7d9, 0 -4px 4px #cecfd1,
    0 -6px 4px #fefefe, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;
}

button.btn-dashboard:focus {
  box-shadow: 0 4px 3px 1px #fcfcfc, 0 6px 8px #d6d7d9, 0 -4px 4px #cecfd1,
    0 -6px 4px #fefefe, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;
}

@media (min-width: 576px) {
  button.btn-dashboard {
    cursor: pointer;
    width: 110px;
    padding: 25px;
    height: 110px;
    background-image: linear-gradient(
      to top,
      #d8d9db 0%,
      #fff 80%,
      #fdfdfd 100%
    );
    border-radius: 20px;
    border: 1px solid #858587;
    transition: all 0.2s ease;
    color: #2c5f26;
    font-size: 1.2em;
    font-weight: bold;
    text-shadow: 0 1px #fff;
  }
}

.icon-button-dashboard {
  width: 100%;
}

#area-total-palpites-registados {
  font-size: 1.2em;
  color: #305393;
}

/* MENSAGENS */

#foto-concorrente-msg {
  width: auto;
  max-height: 40px;
  border-radius: 50%;
}

#concorrente-msg-select {
  cursor: pointer;
}

#detalhes-mensagem-container h2 {
  color: #305393;
  border-bottom: 1px solid #305393;
  padding-bottom: 5px;
  padding-left: 10px;
  margin-bottom: 5px;
  font-size: 1.2em;
}

#detalhes-mensagem-container p,
#div-remetente {
  padding-left: 10px;
}

#delete-msg-button {
  color: rgb(155, 0, 0);
}

button.btn-msg {
  cursor: pointer;
  width: 150px;
  height: 50px;
  background-image: linear-gradient(to top, #d8d9db 0%, #fff 80%, #fdfdfd 100%);
  border-radius: 20px;
  border: 1px solid #858587;
  transition: all 0.2s ease;
  color: #2c5f26;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 0 1px #fff;
}

button.btn-msg:hover {
  box-shadow: 0 4px 3px 1px #fcfcfc, 0 6px 8px #d6d7d9, 0 -4px 4px #cecfd1,
    0 -6px 4px #fefefe, inset 0 0 3px 3px #cecfd1;
}

button.btn-msg:active {
  box-shadow: 0 4px 3px 1px #fcfcfc, 0 6px 8px #d6d7d9, 0 -4px 4px #cecfd1,
    0 -6px 4px #fefefe, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;
}

button.btn-msg:focus {
  box-shadow: 0 4px 3px 1px #fcfcfc, 0 6px 8px #d6d7d9, 0 -4px 4px #cecfd1,
    0 -6px 4px #fefefe, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;
}

#detalhes-mensagem-container i {
  padding-right: 5px;
}

.fa-solid.fa-check {
  color: #3db641;
}

.badge.rounded-pill {
  font-weight: normal;
  margin-right: 5px;
}

/* LOGS */

#tabela-logs-body td {
  font-size: 0.8em;
}

/* EDITAR MELHOR MARCADOR */

#nome-concorrente {
  font-size: 1.2em;
  font-weight: bold;
}

/* MODAL */

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modalBtn {
  margin: 10px;
  padding: 10px;
}

@media (min-width: 576px) {
  .modal-content {
    width: 40%;
  }
}

@media (min-width: 920px) {
  .modal-content {
    width: 30%;
  }
}

@media (min-width: 1100px) {
  .modal-content {
    width: 20%;
  }
}

#btnSim,
#btnNao {
  border-radius: 20px;
}

/* NOTÍCIAS */

#noticias-container a {
  text-decoration: none;
}

#noticia-container a {
  text-decoration: underline;
}

#noticias-container .card h5 {
  font-size: 1.2em;
}

@media (min-width: 576px) {
  #noticias-container .card h5 {
    font-size: 1em;
  }
}

#noticias-container .card {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  border-radius: 0;
  background-color: #fff;
}

#noticias-container .card {
  transition: 0.3s;
}

#noticias-container .card:hover {
  transform: scale(1.1);
  cursor: pointer;
}

#noticias-container .card-link {
  text-decoration: none;
  color: inherit;
}

.texto-noticia {
  text-align: justify;
}

/* PREFERÊNCIAS */

#cor1 {
  background-color: #acdba5 !important;
}

#cor2 {
  background-color: #b2d2fc !important;
}

#cor3 {
  background-color: #fd9f9f !important;
}

#cor4 {
  background-color: #ffe96e !important;
}

#cor5 {
  background-color: #eeabff !important;
}

/* LIGA PORTUGAL */

.liga-portugal-logo-clube {
  width: 20px;
  height: 20px;
  display: inline-block;
}

.liga-portugal-nome-clube,
.liga-portugal-nome-jogador {
  display: inline-block;
}

#data-atualizacao-tabela {
  font-size: 1em;
}

.radio-input input {
  display: none;
}

.radio-input {
  --container_width: 250px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background-color: #fff;
  color: #000;
  width: var(--container_width);
  overflow: hidden;
  border: 1px solid rgba(53, 52, 52, 0.226);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.radio-input label {
  width: 100%;
  padding: 8px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.selection-liga-portugal {
  display: none;
  position: absolute;
  height: 100%;
  width: calc(var(--container_width) / 2);
  z-index: 0;
  left: 0;
  top: 0;
  transition: 0.15s ease;
}

.radio-input label:has(input:checked) {
  color: #fff;
  background-color: #2c5f26;
}

.radio-input label:has(input:checked) ~ .selection-liga-portugal {
  background-color: #2c5f26;
  display: inline-block;
}

.radio-input label:nth-child(1):has(input:checked) ~ .selection-liga-portugal {
  transform: translateX(calc(var(--container_width) * 0 / 2));
}

.radio-input label:nth-child(2):has(input:checked) ~ .selection-liga-portugal {
  transform: translateX(calc(var(--container_width) * 1 / 2));
}

#melhores-marcadores-container,
#liga-portugal-container {
  display: none;
  /* Ambos ocultos inicialmente */
}

.activa {
  display: block !important;
  /* Mostrar apenas a div ativa */
}

/* JOGO DA MEMÓRIA */

#box-jogo-da-memoria {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}

.wrapper {
  height: 500px;
  width: 500px;
  background-color: transparent;
  border-radius: 10px;
  padding: 5px;
}

.cartoes,
.cartao,
.view {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cartoes {
  height: 100%;
  width: 100%;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  justify-content: space-between;
}

.cartoes .cartao {
  cursor: pointer;
  position: relative;
  perspective: 800px;
  transform-style: preserve-3d;
  height: calc(100% / 6 - 10px);
  width: calc(100% / 6 - 10px);
}

.cartao.shake {
  animation: shake 0.35s ease-in-out;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-13px);
  }

  40% {
    transform: translateX(13px);
  }

  60% {
    transform: translateX(-8px);
  }

  80% {
    transform: translateX(8px);
  }
}

.cartoes .cartao .view {
  width: 100%;
  height: 100%;
  user-select: none;
  pointer-events: none;
  position: absolute;
  background-color: #fff;
  border-radius: 7px;
  backface-visibility: hidden;
  transition: transform 0.25s linear;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.cartao .front-view span {
  color: #858587;
  font-size: 2em;
}

.cartao .back-view {
  transform: rotateY(-180deg);
}

.cartao .back-view img {
  max-width: 40px;
}

.cartao.flip .front-view {
  transform: rotateY(180deg);
}

.cartao.flip .back-view {
  transform: rotateY(0);
}

.details {
  width: 100%;
  margin-top: 15px;
  padding: 0;
  border-radius: 7px;
  background: #fff;
  display: flex;
  height: calc(100% / 4 - 50px);
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

.details p {
  font-size: 1em;
  margin: 0;
  padding: 0 20px;
}

.details p b {
  font-weight: bold;
}

#restart-memory-game-btn {
  cursor: pointer;
  padding: 0 20px;
  margin: 0 20px 0 0;
  width: auto;
  height: 40px;
  background-image: linear-gradient(to top, #d8d9db 0%, #fff 80%, #fdfdfd 100%);
  border-radius: 20px;
  border: 1px solid #858587;
  transition: all 0.2s ease;
  color: #2c5f26;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 0 1px #fff;
}

#podium-memory-game-btn {
  cursor: pointer;
  padding: 0 10px;
  margin: 0;
  width: auto;
  height: 40px;
  background-image: linear-gradient(to top, #d8d9db 0%, #fff 80%, #fdfdfd 100%);
  border-radius: 20px;
  border: 1px solid #858587;
  transition: all 0.2s ease;
  color: #2c5f26;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 0 1px #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width: 576px) {
  .wrapper {
    height: 350px;
    width: 350px;
    background-color: transparent;
    border-radius: 10px;
    padding: 5px;
  }

  .cartoes .cartao {
    cursor: pointer;
    position: relative;
    perspective: 800px;
    transform-style: preserve-3d;
    height: calc(100% / 6 - 5px);
    width: calc(100% / 6 - 5px);
  }

  .cartao .back-view img {
    max-width: 35px;
  }

  .details {
    height: calc(100% / 4 - 10px);
  }
}

/* MODAL DE JOGO TERMINADO */

/* Estilos gerais do modal */
.modal-memory-game {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Conteúdo do modal */
.modal-memory-game-content {
  background: white;
  padding: 25px;
  border-radius: 8px;
  width: 70%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.4s ease-in-out;
  /* Efeito de fade-in */
}

/* Animação para o fade-in do modal */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Botão "Ver Pódio" no modal */
#memory-game-ver-podio-btn {
  cursor: pointer;
  padding: 0 20px;
  margin: 0;
  width: auto;
  height: 40px;
  background-image: linear-gradient(to top, #d8d9db 0%, #fff 80%, #fdfdfd 100%);
  border-radius: 20px;
  border: 1px solid #858587;
  transition: all 0.2s ease;
  color: #2c5f26;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 0 1px #fff;
}

#memory-game-back-btn {
  cursor: pointer;
  padding: 0 20px;
  margin: 0;
  width: auto;
  height: 40px;
  background-image: linear-gradient(to top, #d8d9db 0%, #fff 80%, #fdfdfd 100%);
  border-radius: 20px;
  border: 1px solid #858587;
  transition: all 0.2s ease;
  color: #2c5f26;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 0 1px #fff;
}

#memory-game-tempos-back-btn {
  cursor: pointer;
  padding: 0 15px;
  margin: 0;
  width: 150px;
  height: 50px;
  background-image: linear-gradient(to top, #d8d9db 0%, #fff 80%, #fdfdfd 100%);
  border-radius: 20px;
  border: 1px solid #858587;
  transition: all 0.2s ease;
  color: #2c5f26;
  font-size: 1.2em;
  font-weight: bold;
  text-shadow: 0 1px #fff;
}

#box-memory-game-times-table .linha-destacada-acdba5 {
  background-color: #acdba5;
}

#box-memory-game-times-table .linha-destacada-b2d2fc {
  background-color: #b2d2fc;
}

#box-memory-game-times-table .linha-destacada-fd9f9f {
  background-color: #fd9f9f;
}

#box-memory-game-times-table .linha-destacada-ffe96e {
  background-color: #ffe96e;
}

#box-memory-game-times-table .linha-destacada-eeabff {
  background-color: #eeabff;
}

.foto-concorrente-memory-game-times {
  width: auto;
  max-height: 25px;
  border-radius: 50%;
}

/* SUDOKU */

#box-sudoku {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  user-select: none;
}

.wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.grid {
  display: grid;
  grid-template-columns: repeat(9, auto);
  grid-template-rows: repeat(9, auto);
  gap: 3px;
}

.cell {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 40px;
  border-radius: 5px;
  background-color: #fff;
  color: #222222;
  font-size: 1.5em;
  cursor: pointer;
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
  font-family: Sarala;
}

.cell.filled {
  background-color: #f3f3f3;
}

.cell.highlighted {
  background-color: #fff3e5;
}

.cell.highlighted-finished-game {
  background-color: #caecbe;
}

.cell.selected {
  background-color: #ffdbb3;
}

.cell.error {
  background-color: #ff8c8c;
  color: #ffffff;
}

.numbers {
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 5px;
  margin-top: 20px;
  font-family: Sarala;
}

.cell:nth-child(3),
.cell:nth-child(6) {
  margin-right: 5px;
}

.cell:nth-child(19),
.cell:nth-child(46) {
  margin-bottom: 5px;
}

.number,
.remove {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  border-radius: 5px;
  background-color: #fff;
  font-size: 2em;
  font-weight: bold;
  color: #222222;
  cursor: pointer;
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
}

.details-sudoku {
  width: 100%;
  margin-top: 20px;
  padding: 10px 20px;
  border-radius: 7px;
  background: #fff;
  display: flex;
  height: 50px;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

.remove {
  background-color: #ffefef;
  color: #750800;
}

.shake {
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0% {
    transform: scale(1.2);
  }

  25% {
    transform: scale(1.2) rotate(30deg);
  }

  50% {
    transform: scale(1.2) rotate(-30deg);
  }
}

.zoom {
  animation: zoom 0.5s ease-in-out;
}

@keyframes zoom {
  0% {
    transform: scale(1.2);
  }
}

@media screen and (max-width: 576px) {
  .cell {
    font-size: 1.1em;
    max-height: 33px;
    max-width: 33px;
  }

  .number,
  .remove {
    font-size: 1.2em;
    height: 35px;
  }

  .grid {
    gap: 2px;
  }

  .cell:nth-child(3),
  .cell:nth-child(6) {
    margin-right: 3px;
  }

  .cell:nth-child(19),
  .cell:nth-child(46) {
    margin-bottom: 3px;
  }
}

button.btn-comprido.sudoku-nivel {
  width: 150px;
}

button#sudoku-btn-melhores-tempos {
  height: 70px;
}

#vidas-sudoku {
  width: auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.life-up {
  color: #750800;
  font-size: 1.2em;
}

.life-down {
  color: #606060;
  font-size: 1.2em;
}

.modal-sudoku-game-win {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-sudoku-game-win-content {
  background: white;
  padding: 25px;
  border-radius: 8px;
  width: 70%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.4s ease-in-out;
  /* Efeito de fade-in */
}

#modal-sudoku-game-ver-podio-btn {
  cursor: pointer;
  padding: 0 20px;
  margin: 0;
  width: auto;
  height: 40px;
  background-image: linear-gradient(to top, #d8d9db 0%, #fff 80%, #fdfdfd 100%);
  border-radius: 20px;
  border: 1px solid #858587;
  transition: all 0.2s ease;
  color: #2c5f26;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 0 1px #fff;
}

#modal-sudoku-game-new-game-btn {
  cursor: pointer;
  padding: 0 20px;
  margin: 0;
  width: auto;
  height: 40px;
  background-image: linear-gradient(to top, #d8d9db 0%, #fff 80%, #fdfdfd 100%);
  border-radius: 20px;
  border: 1px solid #858587;
  transition: all 0.2s ease;
  color: #2c5f26;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 0 1px #fff;
}

.modal-sudoku-game-lose {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-sudoku-game-lose-content {
  background: white;
  padding: 25px;
  border-radius: 8px;
  width: 70%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.4s ease-in-out;
  /* Efeito de fade-in */
}

.radio-input-sudoku-tabela input {
  display: none;
}

.radio-input-sudoku-tabela {
  --container_width: 300px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background-color: #fff;
  color: #000;
  width: var(--container_width);
  overflow: hidden;
  border: 1px solid rgba(53, 52, 52, 0.226);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.radio-input-sudoku-tabela label {
  width: 100%;
  padding: 8px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.selection-sudoku {
  display: none;
  position: absolute;
  height: 100%;
  width: calc(var(--container_width) / 3);
  z-index: 0;
  left: 0;
  top: 0;
  transition: 0.15s ease;
}

.radio-input-sudoku-tabela label:has(input:checked) {
  color: #fff;
}

.radio-input-sudoku-tabela label:has(input:checked) ~ .selection-sudoku {
  background-color: #2c5f26;
  display: inline-block;
}

.radio-input-sudoku-tabela
  label:nth-child(1):has(input:checked)
  ~ .selection-sudoku {
  transform: translateX(calc(var(--container_width) * 0 / 3));
}

.radio-input-sudoku-tabela
  label:nth-child(2):has(input:checked)
  ~ .selection-sudoku {
  transform: translateX(calc(var(--container_width) * 1 / 3));
}

.radio-input-sudoku-tabela
  label:nth-child(3):has(input:checked)
  ~ .selection-sudoku {
  transform: translateX(calc(var(--container_width) * 2 / 3));
}

#box-sudoku-game-times-table-facil,
#box-sudoku-game-times-table-medio,
#box-sudoku-game-times-table-dificil {
  display: none;
  /* Ocultos inicialmente */
}

.activa {
  display: block !important;
  /* Mostrar apenas a div ativa */
}

.number.disabled {
  opacity: 0.3;
  /* Visualmente desativado */
  pointer-events: none;
  /* Desativa eventos do mouse */
}

#box-sudoku-game-times-table-facil .linha-destacada-acdba5,
#box-sudoku-game-times-table-medio .linha-destacada-acdba5,
#box-sudoku-game-times-table-dificil .linha-destacada-acdba5 {
  background-color: #acdba5;
}

#box-sudoku-game-times-table-facil .linha-destacada-b2d2fc,
#box-sudoku-game-times-table-medio .linha-destacada-b2d2fc,
#box-sudoku-game-times-table-dificil .linha-destacada-b2d2fc {
  background-color: #b2d2fc;
}

#box-sudoku-game-times-table-facil .linha-destacada-fd9f9f,
#box-sudoku-game-times-table-medio .linha-destacada-fd9f9f,
#box-sudoku-game-times-table-dificil .linha-destacada-fd9f9f {
  background-color: #fd9f9f;
}

#box-sudoku-game-times-table-facil .linha-destacada-ffe96e,
#box-sudoku-game-times-table-medio .linha-destacada-ffe96e,
#box-sudoku-game-times-table-dificil .linha-destacada-ffe96e {
  background-color: #ffe96e;
}

#box-sudoku-game-times-table-facil .linha-destacada-eeabff,
#box-sudoku-game-times-table-medio .linha-destacada-eeabff,
#box-sudoku-game-times-table-dificil .linha-destacada-eeabff {
  background-color: #eeabff;
}

/* METEOROLOGIA */

#meteo-body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.meteo-card {
  position: relative;
  width: 100%;
  height: 95px;
  background-color: #fff;
  border-radius: 16px;
  padding: 20px;
  color: #444444;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
  font-family: "Poppins", sans-serif;
}

.search-box {
  position: relative;
  width: 100%;
  height: 55px;
  background-color: transparent;
  display: flex;
  align-items: center;
}

#my-location-button {
  position: absolute;
  left: 15px;
  font-size: 28px;
  color: #444444;
  z-index: 1;
  border: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
}

#save-location-button {
  position: absolute;
  left: 14px;
  bottom: -35px;
  font-size: 28px;
  color: rgb(44, 80, 80);
  z-index: 1;
  border: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
  /* visibility: hidden; */
}

.search-box input {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #e8e8e8;
  border: 1px solid #858587;
  outline: none;
  border-radius: 10px;
  font-size: 22px;
  color: #444444;
  font-weight: 500;
  text-transform: uppercase;
  padding: 0 48px 0 42px;
  text-align: center;
}

.search-box input::placeholder {
  color: #606060;
  text-align: center;
}

#search-box-button {
  position: absolute;
  right: 0;
  width: 40px;
  height: 100%;
  background-color: transparent;
  border: none;
  outline: none;
  font-size: 28px;
  color: #606060;
  padding: 0 40px 0 5px;
  cursor: pointer;
}

.weather-box {
  text-align: center;
  margin: 20px 0 20px 0;
}

.weather-box,
.weather-details,
.not-found,
.next-5-prevision,
#save-location-button {
  overflow: hidden;
  visibility: hidden;
}

.weather-box.active,
.weather-details.active,
.not-found.active,
.next-5-prevision.active,
#save-location-button.active {
  visibility: visible;
}

.weather-box img {
  width: 60%;
}

.weather-box .temperature {
  position: relative;
  font-size: 64px;
  line-height: 1;
  font-weight: 700;
  margin: 0 0 0 -30px;
  color: rgb(44, 80, 80);
}

.weather-box .temperature span {
  position: absolute;
  font-size: 24px;
  margin-left: 4px;
}

.weather-box .description {
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  text-transform: capitalize;
}

.weather-details {
  width: 100%;
  display: flex;
  padding-bottom: 20px;
}

.weather-details .humidity,
.weather-details .wind {
  display: flex;
  align-items: center;
  width: 50%;
}

.weather-details .humidity {
  padding-left: 20px;
  justify-content: flex-start;
}

.weather-details .wind {
  padding-right: 20px;
  justify-content: flex-end;
}

.weather-details .humidity i {
  font-size: 45px;
  margin-right: 10px;
  color: rgb(44, 80, 80);
}

.weather-details .wind i {
  font-size: 45px;
  margin-left: 10px;
  color: rgb(44, 80, 80);
}

.weather-details span {
  display: inline-block;
  font-size: 22px;
  font-weight: 500;
}

.weather-details .humidity p {
  font-size: 14px;
  font-weight: 500;
}

.weather-details .wind p {
  font-size: 14px;
  font-weight: 500;
  text-align: end;
}

.not-found {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  margin-top: 110px;
}

.not-found img {
  width: 65%;
}

.not-found p {
  font-size: 22px;
  font-weight: 500;
  margin-top: 30px;
}

.city-hide {
  display: none;
}

.next-5-prevision {
  padding-top: 20px;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
}

.next-prevision-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  /* Para posicionar o separador corretamente */
  margin: 0 10px;
  /* Espaço lateral entre as caixas */
}

.separator {
  position: absolute;
  top: 0;
  right: -10px;
  /* Ajuste conforme necessário */
  width: 1px;
  /* Largura do separador */
  height: 100%;
  /* Altura do separador */
  background-color: #ddd;
  /* Cor do separador */
  display: none;
  /* Oculta o separador na última previsão */
}

.next-prevision-box:not(:last-child) .separator {
  display: block;
  /* Mostra o separador para todas, exceto a última */
}

.next-prevision-img img {
  width: 50px;
  height: auto;
}

.next-prevision-hour {
  margin: 0;
  font-size: 0.9em;
}

.next-prevision-temperature {
  font-size: 1em;
  margin: 0;
}

@media screen and (max-width: 576px) {
  .meteo-card {
    position: relative;
    width: 100%;
    height: 85px;

    font-family: "Poppins", sans-serif;
  }

  .weather-box img {
    width: 40%;
  }

  .weather-box .temperature {
    font-size: 45px;
  }

  .weather-details .humidity {
    padding-left: 5px;
  }

  .weather-details .wind {
    padding-right: 5px;
  }

  .weather-details .humidity i {
    font-size: 30px;
  }

  .weather-details .wind i {
    font-size: 30px;
  }

  .weather-details span {
    font-size: 20px;
    font-weight: 500;
  }

  .search-box {
    height: 45px;
  }

  #my-location-button {
    font-size: 22px;
  }

  .search-box input {
    font-size: 18px;
  }

  #search-box-button {
    font-size: 22px;
  }

  .next-prevision-img img {
    width: 40px;
  }

  .next-prevision-hour {
    font-size: 0.8em;
  }

  #save-location-button {
    left: 14px;
    bottom: -35px;
    font-size: 24px;
    /* visibility: hidden; */
  }
}

/* MINI-BATALHAS */

#tabela-mini-batalhas tbody tr {
  height: 60px;
}

.icon-editar-nome-mini-batalha {
  color: #2c5f26;
  font-size: 0.8em;
}

.letra-normal {
  font-size: 1em;
}

.cursor-pointer {
  cursor: pointer;
}

/* TÁTICA ALINHADA */

#field-tatica-alinhada {
  border-radius: 7px;
  background-color: #fff;
  width: 100%;
  position: relative;
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
}

.my-tile {
  position: absolute;
  background-color: #e8e8e8;
  color: #222222;
  text-align: center;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
  font-family: Sarala;
  border: 1px solid #c8c8c8;
}

#detalhes-tatica-alinhada {
  width: 100%;
  margin-top: 20px;
  padding: 30px 20px;
  border-radius: 7px;
  background: #fff;
  display: flex;
  height: 50px;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

#jogadas-tatica-alinhada {
  width: auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

#container-tatica-alinhada {
  max-width: 350px;
  margin: 0 auto;
  padding: 20px 0;
}

#box-tatica-alinhada {
  margin-bottom: 20px;
}

button.btn-comprido.tatica-alinhada-nivel {
  width: 150px;
}

button#tatica-alinhada-btn-melhores-tempos {
  height: 70px;
}

.modal-slide-game-win {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-slide-game-win-content {
  background: white;
  padding: 25px;
  border-radius: 8px;
  width: 70%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.4s ease-in-out;
  /* Efeito de fade-in */
}

#modal-slide-game-ver-podio-btn {
  cursor: pointer;
  padding: 0 20px;
  margin: 0;
  width: auto;
  height: 40px;
  background-image: linear-gradient(to top, #d8d9db 0%, #fff 80%, #fdfdfd 100%);
  border-radius: 20px;
  border: 1px solid #858587;
  transition: all 0.2s ease;
  color: #2c5f26;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 0 1px #fff;
}

#modal-slide-game-new-game-btn {
  cursor: pointer;
  padding: 0 20px;
  margin: 0;
  width: auto;
  height: 40px;
  background-image: linear-gradient(to top, #d8d9db 0%, #fff 80%, #fdfdfd 100%);
  border-radius: 20px;
  border: 1px solid #858587;
  transition: all 0.2s ease;
  color: #2c5f26;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 0 1px #fff;
}

.radio-input-tatica-alinhada-tabela input {
  display: none;
}

.radio-input-tatica-alinhada-tabela {
  --container_width: 300px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background-color: #fff;
  color: #000;
  width: var(--container_width);
  overflow: hidden;
  border: 1px solid rgba(53, 52, 52, 0.226);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.radio-input-tatica-alinhada-tabela label {
  width: 100%;
  padding: 8px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.selection-tatica-alinhada {
  display: none;
  position: absolute;
  height: 100%;
  width: calc(var(--container_width) / 3);
  z-index: 0;
  left: 0;
  top: 0;
  transition: 0.15s ease;
}

.radio-input-tatica-alinhada-tabela label:has(input:checked) {
  color: #fff;
}

.radio-input-tatica-alinhada-tabela
  label:has(input:checked)
  ~ .selection-tatica-alinhada {
  background-color: #2c5f26;
  display: inline-block;
}

.radio-input-tatica-alinhada-tabela
  label:nth-child(1):has(input:checked)
  ~ .selection-tatica-alinhada {
  transform: translateX(calc(var(--container_width) * 0 / 3));
}

.radio-input-tatica-alinhada-tabela
  label:nth-child(2):has(input:checked)
  ~ .selection-tatica-alinhada {
  transform: translateX(calc(var(--container_width) * 1 / 3));
}

.radio-input-tatica-alinhada-tabela
  label:nth-child(3):has(input:checked)
  ~ .selection-tatica-alinhada {
  transform: translateX(calc(var(--container_width) * 2 / 3));
}

#box-tatica-alinhada-game-times-table-3x3,
#box-tatica-alinhada-game-times-table-4x4,
#box-tatica-alinhada-game-times-table-5x5 {
  display: none;
  /* Ocultos inicialmente */
}

#box-tatica-alinhada-game-times-table-3x3 .linha-destacada-acdba5,
#box-tatica-alinhada-game-times-table-4x4 .linha-destacada-acdba5,
#box-tatica-alinhada-game-times-table-5x5 .linha-destacada-acdba5 {
  background-color: #acdba5;
}

#box-tatica-alinhada-game-times-table-3x3 .linha-destacada-b2d2fc,
#box-tatica-alinhada-game-times-table-4x4 .linha-destacada-b2d2fc,
#box-tatica-alinhada-game-times-table-5x5 .linha-destacada-b2d2fc {
  background-color: #b2d2fc;
}

#box-tatica-alinhada-game-times-table-3x3 .linha-destacada-fd9f9f,
#box-tatica-alinhada-game-times-table-4x4 .linha-destacada-fd9f9f,
#box-tatica-alinhada-game-times-table-5x5 .linha-destacada-fd9f9f {
  background-color: #fd9f9f;
}

#box-tatica-alinhada-game-times-table-3x3 .linha-destacada-ffe96e,
#box-tatica-alinhada-game-times-table-4x4 .linha-destacada-ffe96e,
#box-tatica-alinhada-game-times-table-5x5 .linha-destacada-ffe96e {
  background-color: #ffe96e;
}

#box-tatica-alinhada-game-times-table-3x3 .linha-destacada-eeabff,
#box-tatica-alinhada-game-times-table-4x4 .linha-destacada-eeabff,
#box-tatica-alinhada-game-times-table-5x5 .linha-destacada-eeabff {
  background-color: #eeabff;
}

/* VENCEDORES DA JORNADA */

#tabela-vencedores-jornada th,
#tabela-vencedores-jornada td {
  font-size: 1em;
}

/* QUIZ GAME */

.quiz_box {
  width: 100%;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);
}

.quiz_box header {
  position: relative;
  z-index: 99;
  height: 70px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 5px 5px 0 0;
  box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.1);
}

.quiz_box header .title {
  font-size: 1.2em;
  font-weight: bold;
  user-select: none;
}

.quiz_box header .timer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100px;
  height: 40px;
  background-color: #f3f3f3;
  border: 1px solid #bbb;
  border-radius: 8px;
  padding: 0 10px;
}

.quiz_box header .timer .time_text {
  user-select: none;
}

.quiz_box header .timer .timer_sec {
  font-weight: bold;
  user-select: none;
}

.quiz_box header .time_line {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 3px;
  background-color: #007bff;
}

.quiz_box section {
  padding: 25px 20px 35px 20px;
  background-color: #fff;
}

.quiz_box section .que_text {
  font-size: 1.2em;
  font-weight: bold;
  text-align: start;
  line-height: 1.3;
}

.quiz_box section .option_list {
  padding: 20px 0 10px 0;
  display: block;
}

section .option_list .option {
  background-color: aliceblue;
  border: 1px solid #84c5fe;
  border-radius: 5px;
  padding: 8px 15px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.3s ease;
}

section .option_list .option:hover {
  color: #004085;
  background-color: #cce5ff;
  border-color: #b8daff;
}

.option_list .option:last-child {
  margin-bottom: 0px;
}

.option_list .option .icon {
  height: 24px;
  width: 24px;
  border: 2px solid transparent;
  border-radius: 50%;
  text-align: center;
  font-size: 0.8em;
  line-height: 22px;
  pointer-events: none;
}

.option_list .option .icon.tick {
  color: #23903c;
  border-color: #23903c;
  background-color: #d4edda;
}

.option_list .option .icon.cross {
  color: #a42834;
  border-color: #a42834;
  background-color: #f8d7da;
}

.option_list .option.correct {
  color: #155724 !important;
  border-color: #c3e6cb !important;
  background-color: #d4edda !important;
}

.option_list .option.incorrect {
  color: #721c24 !important;
  border-color: #f5c6cb !important;
  background-color: #f8d7da !important;
}

.option_list .option.disabled {
  pointer-events: none;
}

.quiz_box footer {
  position: relative;
  z-index: 99;
  height: 70px;
  width: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0px -3px 5px 1px rgba(0, 0, 0, 0.1);
}

.quiz_box footer .total_que span {
  display: flex;
  user-select: none;
}

footer .total_que span p {
  font-weight: bold;
  padding: 0 5px;
  margin: 0;
}

.total_que span p:first-child {
  padding-left: 0px;
}

footer .next_btn {
  cursor: pointer;
  padding: 0 20px;
  width: auto;
  height: 40px;
  background-image: linear-gradient(to top, #d8d9db 0%, #fff 80%, #fdfdfd 100%);
  border-radius: 20px;
  border: 1px solid #858587;
  transition: all 0.2s ease;
  color: #2c5f26;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 0 1px #fff;
}

.quiz_regras_titulo {
  font-weight: bold;
  font-size: 1.2em;
}

.quiz_regras ol {
  padding-left: 20px;
  margin: 0;
  line-height: 1.2;
}

.quiz_regras ol li {
  padding-left: 5px;
  padding-bottom: 10px;
}

.quiz_regras ol li:last-child {
  padding-bottom: 0;
}

.quiz_regras ol li::marker {
  font-weight: bold;
  color: #2c5f26;
}

span#tempo_15_segundos {
  font-weight: bold;
  color: #305393;
}

.inputs-quiz {
  padding: 0;
}

.modal-quiz-game-win {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-quiz-game-win-content {
  background: white;
  padding: 25px;
  border-radius: 8px;
  width: 70%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.4s ease-in-out;
  /* Efeito de fade-in */
}

@media screen and (max-width: 576px) {
  .modal-quiz-game-win-content {
    width: 80%;
    max-width: 400px;
  }
}

#modal-quiz-game-ver-podio-btn {
  cursor: pointer;
  padding: 0 20px;
  margin: 0;
  width: auto;
  height: 40px;
  background-image: linear-gradient(to top, #d8d9db 0%, #fff 80%, #fdfdfd 100%);
  border-radius: 20px;
  border: 1px solid #858587;
  transition: all 0.2s ease;
  color: #2c5f26;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 0 1px #fff;
}

#modal-quiz-game-new-game-btn {
  cursor: pointer;
  padding: 0 20px;
  margin: 0;
  width: auto;
  height: 40px;
  background-image: linear-gradient(to top, #d8d9db 0%, #fff 80%, #fdfdfd 100%);
  border-radius: 20px;
  border: 1px solid #858587;
  transition: all 0.2s ease;
  color: #2c5f26;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 0 1px #fff;
}

#box-quiz-game-points-table .linha-destacada-acdba5 {
  background-color: #acdba5;
}

#box-quiz-game-points-table .linha-destacada-b2d2fc {
  background-color: #b2d2fc;
}

#box-quiz-game-points-table .linha-destacada-fd9f9f {
  background-color: #fd9f9f;
}

#box-quiz-game-points-table .linha-destacada-ffe96e {
  background-color: #ffe96e;
}

#box-quiz-game-points-table .linha-destacada-eeabff {
  background-color: #eeabff;
}

.foto-concorrente-quiz-game-points {
  width: auto;
  max-height: 25px;
  border-radius: 50%;
}

#quiz-game-points-back-btn {
  cursor: pointer;
  padding: 0 15px;
  margin: 0;
  width: 150px;
  height: 50px;
  background-image: linear-gradient(to top, #d8d9db 0%, #fff 80%, #fdfdfd 100%);
  border-radius: 20px;
  border: 1px solid #858587;
  transition: all 0.2s ease;
  color: #2c5f26;
  font-size: 1.2em;
  font-weight: bold;
  text-shadow: 0 1px #fff;
}

.letra-bold-azul {
  font-weight: bold;
  color: #004085;
  font-size: 1.1em;
}

#tabela-quiz-lista-perguntas tbody tr {
  height: 60px;
}

#quiz-img-tema-titulo {
  width: 40px;
}

#quiz-texto-tema-titulo {
  font-weight: bold;
  font-size: 1.2em;
}

#quiz-criar-pergunta-btn {
  height: 40px;
  font-size: 2.2em;
  color: #2c5f26;
}

#podium-quiz-game-btn {
  cursor: pointer;
  padding: 0 10px;
  margin: 0;
  width: auto;
  height: 40px;
  background-image: linear-gradient(to top, #d8d9db 0%, #fff 80%, #fdfdfd 100%);
  border-radius: 20px;
  border: 1px solid #858587;
  transition: all 0.2s ease;
  color: #2c5f26;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 0 1px #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

#quiz-game-back-btn {
  cursor: pointer;
  padding: 0 20px;
  margin: 0;
  width: auto;
  height: 40px;
  background-image: linear-gradient(to top, #d8d9db 0%, #fff 80%, #fdfdfd 100%);
  border-radius: 20px;
  border: 1px solid #858587;
  transition: all 0.2s ease;
  color: #2c5f26;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 0 1px #fff;
}

/* LOADING LOGOTIPO */

#page-content {
  display: none;
}

/* Estilo para o loader */
#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0);
  /* Fundo semitransparente */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  visibility: visible;
}

/* Logotipo com a animação de zoom in e zoom out */
#loading-logo {
  width: 120px;
  /* Tamanho inicial do logotipo */
  height: auto;
  /* Manter a proporção do logotipo */
  animation: zoom 2s infinite;
  /* Animação de zoom com 2 segundos de duração */
  filter: drop-shadow(0px 0px 10px #bababa);
}

/* Definir a animação de zoom in e zoom out */
@keyframes zoom {
  0% {
    transform: scale(1);
    /* Tamanho original */
  }

  50% {
    transform: scale(1.3);
    /* Zoom in (aumenta o tamanho para 120%) */
  }

  100% {
    transform: scale(1);
    /* Retorna ao tamanho original */
  }
}

/* CLUBES POR ÉPOCA */

.emblema-tabela {
  width: 35px;
  height: 35px;
  display: inline-block;
}

/* ESCOLHER ÉPOCA */

.escolha-epoca-label {
  font-size: 1em;
}

@media screen and (max-width: 576px) {
  .escolha-epoca-label {
    font-size: 1.2em;
  }
}

.micro-logotipo {
  max-width: 50px;
}

.radio-epoca {
  font-size: 1.2em;
  cursor: pointer;
}

#tabela-escolha-epoca {
  background-color: transparent;
}

#tabela-escolha-epoca td {
  border: none;
  border-bottom: 1px solid #999;
  background-color: transparent;
}

#tabela-escolha-epoca tr:last-child td {
  border-bottom: none;
}

/* LISTA LOGOTIPOS */

.btn-logotipos {
  cursor: pointer;
  width: auto;
  height: auto;
  padding: 0;
  border: 1px solid #858587;
  transition: all 0.2s ease;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
}

/* GESTÃO DE CLUBES/PAÍSES */

.radio-input-clubes-paises-tabela input {
  display: none;
}

.radio-input-clubes-paises-tabela {
  --container_width: 300px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background-color: #fff;
  color: #000;
  width: var(--container_width);
  overflow: hidden;
  border: 1px solid rgba(53, 52, 52, 0.226);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.radio-input-clubes-paises-tabela label {
  width: 100%;
  padding: 8px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.selection-clubes-paises {
  display: none;
  position: absolute;
  height: 100%;
  width: calc(var(--container_width) / 2);
  z-index: 0;
  left: 0;
  top: 0;
  transition: 0.15s ease;
}

.radio-input-clubes-paises-tabela label:has(input:checked) {
  color: #fff;
}

.radio-input-clubes-paises-tabela
  label:has(input:checked)
  ~ .selection-clubes-paises {
  background-color: #2c5f26;
  display: inline-block;
}

.radio-input-clubes-paises-tabela
  label:nth-child(1):has(input:checked)
  ~ .selection-clubes-paises {
  transform: translateX(calc(var(--container_width) * 0 / 2));
}

.radio-input-clubes-paises-tabela
  label:nth-child(2):has(input:checked)
  ~ .selection-clubes-paises {
  transform: translateX(calc(var(--container_width) * 1 / 2));
}

#box-lista-clubes,
#box-lista-paises {
  display: none;
  /* Ocultos inicialmente */
}

/* EDITAR CLUBE/PAÍS */

#foto-editar-clube-pais {
  max-width: 125px;
}

.btn-back-pequeno {
  cursor: pointer;
  padding: 0 20px;
  margin: 0;
  width: auto;
  height: 40px;
  background-image: linear-gradient(to top, #d8d9db 0%, #fff 80%, #fdfdfd 100%);
  border-radius: 20px;
  border: 1px solid #858587;
  transition: all 0.2s ease;
  color: #2c5f26;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 0 1px #fff;
  text-decoration: none;
}

/* VENCEDORES DA ÉPOCA */

#tabela-vencedores-inverno,
#tabela-vencedores-1lugar,
#tabela-vencedores-2lugar,
#tabela-vencedores-3lugar {
  --bs-table-bg: transparent;
}

#tabela-vencedores-inverno tr,
#tabela-vencedores-1lugar tr,
#tabela-vencedores-2lugar tr,
#tabela-vencedores-3lugar tr {
  border-color: #aaa;
}

#tabela-vencedores-inverno td,
#tabela-vencedores-1lugar td,
#tabela-vencedores-2lugar td,
#tabela-vencedores-3lugar td {
  font-weight: normal !important;
}

.label-normal {
  font-weight: normal !important;
}

#tabela-vencedores-inverno img,
#tabela-vencedores-1lugar img,
#tabela-vencedores-2lugar img,
#tabela-vencedores-3lugar img {
  max-width: 50px;
  max-height: auto;
  border-radius: 50%;
}

/* EUROBINGO DOS POBRES */

#eurobingo-logotipo-dashboard {
  width: 200px;
  transition: 0.3s;
  padding-top: 10px;
}

#eurobingo-logotipo-dashboard:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  border-radius: 20px;
}

@media (min-width: 576px) {
  #eurobingo-logotipo-dashboard {
    width: 300px;
  }
}

#eurobingo-copyright {
  background-color: #182d4d;
  padding: 8px 0;
  margin-top: 5px;
  box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.35);
}

#eurobingo-copyright p {
  color: #fff;
  margin: 0;
  font-size: 0.7em;
}

@media (min-width: 576px) {
  #eurobingo-copyright p {
    font-size: 0.9em;
  }
}

/* ESCOLHER ÉPOCA */

.escolha-concurso-label,
.escolha-concurso-nome {
  font-size: 1em;
  cursor: pointer;
}

.escolha-concurso-nome {
  font-weight: bold;
}

@media screen and (max-width: 576px) {
  .escolha-concurso-label,
  .escolha-concurso-nome {
    font-size: 1.2em;
  }
}

.radio-concurso {
  font-size: 1em;
  cursor: pointer;
}

#tabela-escolha-concurso {
  background-color: transparent;
}

#tabela-escolha-concurso td {
  border: none;
  border-bottom: 1px solid #999;
  background-color: transparent;
}

#tabela-escolha-concurso tr:last-child td {
  border-bottom: none;
}

#box-formulario-criar-boletim h2,
#box-formulario-editar-boletim h2,
#box-formulario-registar-sorteio h2 {
  color: #305393;
  border-bottom: 1px solid #305393;
  padding-bottom: 5px;
  padding-left: 10px;
  margin-bottom: 15px;
  font-size: 1.2em;
}

.numeros-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 10px;
  max-width: auto;
  margin: 0 auto;
  justify-items: center;
}

.numero {
  width: 35px;
  height: 35px;
  border: 2px solid #005c9d;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: transparent;
  color: #000;
  transition: all 0.2s ease-in-out;
  font-size: 1em;
  font-family: Sarala;
}

.numero.selected {
  background-color: #005c9d;
  color: white;
  border-color: #005c9d;
  font-family: Sarala;
}

.numeroGrandeFixo {
  width: 40px;
  height: 40px;
  border: 2px solid #005c9d;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: transparent;
  color: #000;
  transition: all 0.2s ease-in-out;
  font-size: 1em;
  font-family: Sarala;
}

.numeroGrandeFixo.selected {
  background-color: #005c9d;
  color: white;
  border-color: #005c9d;
  font-family: Sarala;
}

.estrelas-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 10px;
  max-width: auto;
  margin: 0 auto;
  justify-items: center;
}

.estrela {
  width: 35px;
  height: 35px;
  border: 2px solid #2c5f26;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: transparent;
  color: #000;
  transition: all 0.2s ease-in-out;
  font-size: 1em;
  font-family: Sarala;
}

.estrela.selected {
  background-color: #2c5f26;
  color: white;
  border-color: #2c5f26;
  font-family: Sarala;
}

.estrelaGrandeFixa {
  width: 40px;
  height: 40px;
  border: 2px solid #2c5f26;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: transparent;
  color: #000;
  transition: all 0.2s ease-in-out;
  font-size: 1em;
  font-family: Sarala;
}

.estrelaGrandeFixa.selected {
  background-color: #2c5f26;
  color: white;
  border-color: #2c5f26;
  font-family: Sarala;
}

@media screen and (max-width: 576px) {
  .numeros-grid {
    grid-template-columns: repeat(5, 1fr);
    max-width: 250px;
  }

  .estrelas-grid {
    grid-template-columns: repeat(5, 1fr);
    max-width: 250px;
  }
}

.numeros-ecra-grande {
  display: table-cell;
}

.numeros-ecra-pequeno {
  display: none;
}

@media screen and (max-width: 720px) {
  .numeros-ecra-grande {
    display: none;
  }

  .numeros-ecra-pequeno {
    display: table-cell;
  }
}

#tabela-vencedores-1premio,
#tabela-vencedores-2premio,
#tabela-vencedores-carro-vassoura {
  --bs-table-bg: transparent;
}

#tabela-vencedores-1premio tr,
#tabela-vencedores-2premio tr,
#tabela-vencedores-carro-vassoura tr {
  border-color: #aaa;
}

#tabela-vencedores-1premio td,
#tabela-vencedores-2premio td,
#tabela-vencedores-carro-vassoura td {
  font-weight: normal !important;
}

.sorteio-dia {
  font-weight: bold;
}

.numero.sorteio {
  width: 40px;
  height: 40px;
  border: 2px solid #005c9d;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #005c9d;
  color: white;
  transition: all 0.2s ease-in-out;
  font-size: 1em;
  font-family: Sarala;
}

.estrela.sorteio {
  width: 40px;
  height: 40px;
  border: 1px solid #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #ffe600;
  color: #000;
  font-weight: bold;
  transition: all 0.2s ease-in-out;
  font-size: 1em;
  font-family: Sarala;
}

#eurobingo-tabela-concorrente {
  font-weight: bold;
}

@media screen and (min-width: 1200px) {
  #data-sorteio {
    font-size: 1.3em;
    font-family: GT-Pressura;
  }

  #eurobingo-tabela-concorrente {
    font-size: 1em;
  }

  .linha-dots {
    border-bottom: 4px dotted #bbb;
    height: 0em; /* alinha verticalmente com o texto */
    margin-top: 0.25em;
    content: "";
  }
}

@media screen and (max-width: 767px) {
  .numero,
  .estrela,
  .numero.selected,
  .estrela.selected,
  .numero.sorteio,
  .estrela.sorteio {
    width: 28px;
    height: 28px;
    font-size: 0.9em;
  }

  .sorteio-dia {
    font-size: 0.9em;
  }
}

.boletim-quantos-faltam {
  width: 35px;
  height: 35px;
  border: 2px solid #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #000;
  transition: all 0.2s ease-in-out;
  font-size: 1em;
  font-family: Sarala;
}

.boletim-quantos-faltam-1 {
  width: 35px;
  height: 35px;
  border: 2px solid #3d8036;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e0ffe0;
  color: #000;
  transition: all 0.2s ease-in-out;
  font-size: 1em;
  font-family: Sarala;
}

.boletim-quantos-faltam-vencedor {
  width: 35px;
  height: 35px;
  border: 2px solid #c49705;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffe600;
  color: #000;
  transition: all 0.2s ease-in-out;
  font-size: 1.2em;
  font-family: Sarala;
}

.boletim-texto-quantos-faltam {
  color: #606060;
  font-size: 1em;
  font-weight: normal;
}

.boletim-texto-quantos-faltam-1 {
  color: #3d8036;
  font-size: 1em;
  font-weight: bold;
}

.boletim-texto-quantos-faltam-vencedor {
  color: #000;
  font-size: 1em;
  font-weight: bold;
  border: 1px solid #000;
  padding: 1px 10px;
  border-radius: 10px;
  background-color: gold;
}

#logotipo-eurobingo-box {
  max-width: 1250px;
  position: relative;
}

button.btn-atalho-eurobingo {
  cursor: pointer;
  width: 40px;
  padding: 0px;
  height: 40px;
  background-image: linear-gradient(to top, #d8d9db 0%, #fff 80%, #fdfdfd 100%);
  border-radius: 10px;
  border: 1px solid #858587;
  transition: all 0.2s ease;
  color: #2c5f26;
  font-size: 1.2em;
  font-weight: bold;
  text-shadow: 0 1px #fff;
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 1000;
}

button.btn-atalho-eurobingo:hover {
  box-shadow: 0 4px 3px 1px #fcfcfc, 0 6px 8px #d6d7d9, 0 -4px 4px #cecfd1,
    0 -6px 4px #fefefe, inset 0 0 3px 3px #cecfd1;
}

button.btn-atalho-eurobingo:active {
  box-shadow: 0 4px 3px 1px #fcfcfc, 0 6px 8px #d6d7d9, 0 -4px 4px #cecfd1,
    0 -6px 4px #fefefe, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;
}

button.btn-atalho-eurobingo:focus {
  box-shadow: 0 4px 3px 1px #fcfcfc, 0 6px 8px #d6d7d9, 0 -4px 4px #cecfd1,
    0 -6px 4px #fefefe, inset 0 0 5px 3px #999, inset 0 0 30px #aaa;
}

.btn-atalho-eurobingo img {
  width: 20px;
  height: 20px;
}

@media screen and (min-width: 576px) {
  button.btn-atalho-eurobingo {
    width: 60px;
    height: 60px;
    border-radius: 15px;
  }

  .btn-atalho-eurobingo img {
    width: 30px;
    height: 30px;
  }
}

/* Estilo dos cards do Ponto de Situação */
.card-vencedor {
  border-left: 6px solid gold;
  background: linear-gradient(135deg, #fffbe0, #fff3b0);
}

.card-segundo-premio,
.card-falta-1 {
  border-left: 6px solid #5cb85c;
  background: linear-gradient(135deg, #f3fff3, #e0ffe0);
}

.card-carro-vassoura {
  border-left: 6px solid #ff8c8c;
  background: linear-gradient(135deg, #fff0f0, #ffe5e5);
}

.card-normal {
  border-left: 6px solid #ccc;
  background: #ffffff;
}

.card-title,
.card-premio {
  font-weight: bold;
  font-size: 1em;
}

.card-total-concorrentes {
  color: #6c757d;
  font-size: 0.8em;
}

.lista-concorrentes {
  list-style: disc;
  text-align: left;
  padding-left: 1.5rem;
  margin-bottom: 0;
}

.lista-concorrentes li {
  margin: 0;
  font-size: 1em;
}

.lista-premiados {
  font-weight: normal !important;
}

#eurobingo-banco-montante-total {
  font-size: 1.8em;
  font-weight: bold;
  color: #004085;
  font-family: GT-Pressura;
}

#eurobingo-banco-novo-registo-btn {
  height: 40px;
  font-size: 2.2em;
  color: #2c5f26;
}

.radio-input-debito-credito input {
  display: none;
}

.radio-input-debito-credito {
  --container_width: 300px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background-color: #fff;
  color: #000;
  width: var(--container_width);
  overflow: hidden;
  border: 1px solid rgba(53, 52, 52, 0.226);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.radio-input-debito-credito label {
  width: 100%;
  padding: 8px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.selection-debito-credito {
  display: none;
  position: absolute;
  height: 100%;
  width: calc(var(--container_width) / 2);
  z-index: 0;
  left: 0;
  top: 0;
  transition: 0.15s ease;
}

.radio-input-debito-credito label:has(input:checked) {
  color: #fff;
}

.radio-input-debito-credito
  label:has(input:checked)
  ~ .selection-debito-credito {
  background-color: #2c5f26;
  display: inline-block;
}

.radio-input-debito-credito
  label:nth-child(1):has(input:checked)
  ~ .selection-debito-credito {
  transform: translateX(calc(var(--container_width) * 0 / 2));
}

.radio-input-debito-credito
  label:nth-child(2):has(input:checked)
  ~ .selection-debito-credito {
  transform: translateX(calc(var(--container_width) * 1 / 2));
}

#box-debito-form,
#box-credito-form {
  display: none;
  /* Ocultos inicialmente */
}

#eurobingo-banco-saldos-container h2 {
  color: #305393;
  border-bottom: 1px solid #305393;
  padding-bottom: 5px;
  padding-left: 10px;
  margin-bottom: 15px;
  font-size: 1.3em;
}

.eurobingo-lista-saldos {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.linha-saldo {
  display: flex;
  align-items: center;
}

.linha-saldo .nome {
  white-space: nowrap;
  margin-right: 10px;
}

.linha-saldo .valor {
  white-space: nowrap;
  margin-left: 10px;
}

.linha-saldo .pontos {
  flex-grow: 1;
  border-bottom: 2px dotted #858587;
  margin-top: 10px;
}

#checkbox_concursos {
  transform: scale(1.2);
}

#tabela-detalhes-balanco {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  border: none;
  background-color: transparent;
}

#tabela-detalhes-balanco th,
#tabela-detalhes-balanco td {
  padding: 10px 5px;
  border: none;
  border-bottom: 1px dotted #999;
  background-color: transparent;
  font-size: 0.8em;
}

#tabela-detalhes-balanco tr:last-child td {
  border-bottom: none;
}

#tabela-detalhes-balanco tr:hover {
  background-color: transparent !important;
}

#tabela-detalhes-balanco td {
  flex: 1;
}

#logotipo-eurobingo-box a {
  color: #000;
  text-decoration: none;
  font-size: 24px;
}

@media screen and (min-width: 576px) {
  #tabela-detalhes-balanco td {
    font-size: 1em;
  }
}

#box-sorteios h2 {
  color: #305393;
  border-bottom: 1px solid #305393;
  padding-bottom: 5px;
  margin-bottom: 15px;
  font-size: 1.3em;
}

#ultimo-sorteio-box {
  border: 2px solid #2c5f26;
  padding: 10px 20px;
  border-radius: 20px;
  text-align: center;
  background-color: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.nome-concorrente-vermelho {
    color: red;
    font-weight: bold !important;
}

/* FAZ HOJE ANOS QUE... */

#criar-novo-artigo-btn {
  height: 40px;
  font-size: 2.2em;
  color: #2c5f26;
}

#registar-novo-artigo-back-btn {
  cursor: pointer;
  padding: 0 20px;
  margin: 0;
  width: auto;
  height: 40px;
  background-image: linear-gradient(to top, #d8d9db 0%, #fff 80%, #fdfdfd 100%);
  border-radius: 20px;
  border: 1px solid #858587;
  transition: all 0.2s ease;
  color: #2c5f26;
  font-size: 1em;
  font-weight: bold;
  text-shadow: 0 1px #fff;
}

#artigos-container a {
  text-decoration: none;
}

#artigos-container .card h5 {
  font-size: 1.2em;
  margin-bottom: 0;
}

@media (min-width: 576px) {
  #artigos-container .card h5 {
    font-size: 1em;
  }
}

#artigos-container .card {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);
  border-radius: 0;
  background-color: #fff;
}

#artigos-container .card {
  transition: 0.3s;
}

#artigos-container .card:hover {
  transform: scale(1.1);
  cursor: pointer;
}

#artigos-container .card-link {
  text-decoration: none;
  color: inherit;
}