/* Define o container principal */
.container3 {
    display: flex;
    height: 500px;
    width: 100%; /* Assume 100% da largura disponível */
    box-sizing: border-box;
}

/* Estilo geral para os gráficos */
.tab {
    background-color: #f0f0f0;
    box-sizing: border-box;
}

/* Gráfico 1: Ocupa 33% da largura e toda a altura disponível */
#grafico1 {
    width: 33%;
    height: 100%;
}

/* Container para os gráficos 2 e 3 */
.grafico2-3-container {
    width: 33%;
    display: flex;
    flex-direction: column;
    height: 100%; /* Garante alinhamento em altura com os demais gráficos */
}

/* Gráfico 2: Altura fixa de 300px */
#grafico2 {
    height: 300px;
    flex-shrink: 0;
}

/* Gráfico 3: Ocupa o restante do espaço vertical */
#grafico3 {
    flex: 1;
}

/* Gráfico 4: Ocupa o restante da largura e 100% da altura */
#grafico4 {
    flex: 1;
    height: 100%;
}