:root {
    --title-height: 75px;  
    --button-height: 70px;  
    --map-height: 320px;  

    --chart-1-width: 210px;
    --chart-2-width: 210px;
}

body {
    font-family: Helvetica, Arial, sans-serif;
    
    display: grid;
    grid-template-areas:
        "title                  title                       filters    "
        "question-group-buttons question-group-buttons      question-group-buttons"
        "map                    map                         tab-content"
        "chart-1                chart-2                     tab-content";
    grid-template-columns: var(--chart-1-width) var(--chart-2-width) 1fr;
    grid-template-rows: var(--title-height) var(--button-height) var(--map-height) 1fr;
    gap: 10px 20px;
    margin: 3px;
    min-height: 100vh; 
    width: 100%;

    padding-left: 15px;
    padding-right: 10px;
    
    background-color: #e9eef3
}


#title {
    grid-area: title;  
    font-size: 28px;
    font-weight: 700; 
    padding-top: 10px;
    padding-left: 5px;
}

#upload {
    grid-area: upload;
}

#buttons {
    grid-area: buttons;
}

#question-group-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    grid-area: question-group-buttons;
}

#map {
    grid-area: map;
}

#filters {
    grid-area: filters;
}

#chart-1 {
    grid-area: chart-1;   
}

#output-buttons {
    grid-area: output-buttons;
}

#chart-2 {
    grid-area: chart-2;
}

#tab-content {
    grid-area: tab-content;    
    background-color: white;
}


.dc-chart .row text {
  fill: black !important;
}