body {
    margin: 1em;
}

.total {
    margin-bottom: 1em;
    font-size: 2em;
    font-weight: bold;
    text-align: center;
}

.chart {
    max-height: 50vh;
}

.chart canvas {
    max-width: 100%;
    max-height: 100%;
}

.chart-containers {
    display: flex;
    flex-direction: column;
}

.chart-containers .container {
    flex-grow: 1;

    display: flex;
    flex-direction: column;
}

.chart-containers .container table {
    margin-top: 1em;
}

.chart-containers .container table tr {
    background-color: var(--row-background);
}

.chart-containers .container table tr:nth-child(2n) {
    background-color: var(--row-background-alternate);
}

.chart-containers .container table tr td {
    padding: .25em .5em;
}

.chart-containers .container h1 {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1em;
}

.chart-containers .container:not(:last-child) {
    border-bottom: 2px solid var(--text);
}