body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;

}

h2 {
    text-align: center;
    color: #333;
}

.tables-container {
    display: flex;
    flex-direction: row; /* Altera para linha (lado a lado) */
    gap: 20px; /* Espaço entre as tabelas */
    align-items: flex-start; /* Alinha as tabelas à esquerda */
}
.calendario-container {
    flex: 2; /* Ocupa mais espaço */
}

.classificacao-container {
    flex: 1; /* Ocupa menos espaço */
}
/* Estilo para ambas as tabelas */
.calendario-table,
.classificacao-table {
    width: 100%;
    border-collapse: collapse; /* Remove espaços entre as células */
    margin-bottom: 20px;
    table-layout: auto; /* Ajusta automaticamente a largura das colunas */
}


/* Estilo para as células das tabelas */
.calendario-table th,
.calendario-table td,
.classificacao-table th,
.classificacao-table td {
    padding: 8px 12px; /* Espaçamento interno das células */
    border: 1px solid #ccc; /* Borda das células */
    white-space: nowrap; /* Impede quebra de texto */
    text-align: center; /* Centraliza o conteúdo */
}
/* Estilo para o cabeçalho das tabelas */
.calendario-table th,
.classificacao-table th {

    font-weight: bold; /* Texto em negrito */
}
/* Estilo para linhas alternadas */
.calendario-table tr:nth-child(even),
.classificacao-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* Estilo para o parágrafo do campeão */
.classificacao-container p {
    font-size: 18px;
    font-weight: bold;
    color: #2c3e50;
    margin-top: 10px;
}
.classificacao-table th {
    font-weight: bold;
    text-align: center;
    vertical-align: middle; /* Alinha o conteúdo verticalmente */
}
.bandeira {
    width: 30px; /* Tamanho reduzido */
    height: auto; /* Mantém a proporção */
    margin-left: 10px; /* Espaçamento entre o texto e as bandeiras */
    vertical-align: middle; /* Alinha verticalmente com o texto */
}
/* Estilo para o título das fases */
.fase-title {
    text-align: center; /* Centraliza o título */
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin: 20px 0 10px 0; /* Espaçamento acima e abaixo */
}

/* Estilo para a linha do cabeçalho principal */
.header-row {
    background-color: #555; /* Cinza escuro */
    color: #fff; /* Texto branco */
}

/* Estilo para a linha do subcabeçalho */
.subheader-row {
    background-color: #888; /* Cinza mais claro */
    color: #fff; /* Texto branco */
}