body {
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #242424e3;
    margin: 0;
    padding: 0;
  }

  .titulo {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 0 auto;
    color: white;
  }


.table-container {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  border-collapse: collapse;
  width: 98%; /* Use 100% da largura do contêiner */
  border: 1px solid #000;
  margin-top: 20px;
  margin: 20px auto; /* Centralize a tabela horizontalmente */
  background-color: #fff;
  text-align: center;
  max-height: 85vh;
  overflow-y: scroll;
  text-align: center;
}


  /* Estilo da tabela com bordas pretas finas */


  /* Estilo para as células das cabeçalhos de coluna */
  /* Estilo para o cabeçalho da tabela */
  .table th {
    padding: 10px 0px;
    background-color: #d6d6d6;
    font-weight: bold;
    border: 1px solid #000;
    position: sticky;
    text-align: center;
    top: 0;
    margin: 0;
    background-color: #d6d6d6;
    z-index: 1; /* Para garantir que o cabeçalho fique acima do conteúdo rolável */
}

/* Estilo para a borda superior do cabeçalho da tabela no modo sticky */
.table thead {
  top: 0;
  background-color: #d6d6d6;
  border-top: 2px solid #000; /* Adicione uma borda superior fixa */
  z-index: 2; /* Certifique-se de que a borda superior fique acima das células de dados */
}

/* Estilo para os demais cabeçalhos com :hover */
.table th:hover {
  background-color: #b6b6b6;
  cursor: pointer;
}


  /* Estilo para as células das células de dados */
  .table td {
    padding: 8px;
    text-align: center;
    font-size: 16px;
    border: 1px solid #000; /* Define a cor da borda para preto */
    vertical-align: middle; /* Centralize verticalmente os itens */
  }

  /* Aumentar a largura das colunas "Atualização" e "Cidade Atual" */
    .table th[data-sort="atual"] {
      min-width: 120px; /* Defina a largura mínima desejada em pixels */
    }

    .table th[data-sort="citySelect"] {
      min-width: 150px; /* Defina a largura mínima desejada em pixels */
    }


  /* Estilo para as células das células de dados com timer */
  .table td[data-sort="timer"] {
    text-align: center;
    border: 1px solid #000;
    /* Define a cor da borda para preto */
  }


  /* Estilo para botões semelhantes ao Bootstrap */
  button {
    padding: 3px 8px;
    /* Reduzindo o padding para diminuir o tamanho */
    font-size: 14px;
    /* Reduzindo o tamanho da fonte */
    border: none;
    border-radius: 4px;
    background-color: #484949;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  button:hover {
    background-color: #a5a5a5;
  }