/* .chart-wrap {
    display: grid;
    align-items: center;
    justify-items: center;
    grid-template-columns: 35px 1fr;
    grid-template-rows: 1fr 35px;
    grid-template-areas: "data-axis chart"
        ". primary-axis";
    margin: 3rem 0 1rem;
}

.chart-wrap > table {
    grid-area: chart;
}
.chart-wrap > .primary-axis {
    grid-area: primary-axis;
}
.chart-wrap > .data-axis {
    grid-area: data-axis;
    writing-mode: tb-rl;
    transform: rotateZ(180deg);
}

.charts-css th[scope="row"] {
    font-size: .75rem;
}

.charts-css.column tbody tr th {
    top: 102%;
}

.charts-css.show-heading caption {
    margin: 0 auto 1rem;
}

.charts-css.area.show-labels, .charts-css.column.show-labels, .charts-css.line.show-labels {
    --labels-size: 4rem;
}

.charts-css.column:not(.reverse) tbody tr {
    margin-block-end: 0px;
}

.charts-css {
    --primary-axis-color: #3c4b71;
    --primary-axis-width: 4.5rem;
    color: #fff;
}

.charts-css caption {
    color: #1b2836;
}

.charts-css.column:not(.reverse-datasets):not(.stacked) tbody tr {
    max-width: 25%;
} */

.chart-wrap {
    display: grid;
    align-items: center;
    justify-items: center;
    grid-template-columns: 35px 1fr;
    grid-template-rows: 1fr 40px;
    grid-template-areas: "data-axis chart"
        ". primary-axis";
    margin: 3rem 0 1rem;
    background: #f8f8f8;
    padding: .5rem;
    grid-gap: 0px;
}

.chart-wrap > table {
    grid-area: chart;
}


.chart-wrap > .primary-axis {
    grid-area: primary-axis;
}
.chart-wrap > .data-axis {
    grid-area: data-axis;
    writing-mode: tb-rl;
    transform: rotateZ(180deg);
}

.charts-css.area.show-labels.reverse.reverse-labels tbody tr th, .charts-css.area.show-labels:not(.reverse):not(.reverse-labels) tbody tr th, .charts-css.column.show-labels.reverse.reverse-labels tbody tr th, .charts-css.column.show-labels:not(.reverse):not(.reverse-labels) tbody tr th, .charts-css.line.show-labels.reverse.reverse-labels tbody tr th, .charts-css.line.show-labels:not(.reverse):not(.reverse-labels) tbody tr th {
    -webkit-box-pack: var(--labels-align-block,flex-start);
    -ms-flex-pack: var(--labels-align-block,flex-start);
    justify-content: var(--labels-align-block,flex-start);
    font-size: .75rem;
}

.charts-css.show-heading caption {
    margin: 0 auto 1rem;
}

.charts-css.area, .charts-css.column, .charts-css.line {
    --labels-size: 5rem;
}

.charts-css.area.reverse:not(.reverse-data) tbody tr td .data, .charts-css.area:not(.reverse):not(.reverse-data) tbody tr td .data, .charts-css.line.reverse:not(.reverse-data) tbody tr td .data, .charts-css.line:not(.reverse):not(.reverse-data) tbody tr td .data {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}


.charts-css.show-labels .data {
    font-size: .75rem;
    line-height: .75rem;
    position: absolute;
    bottom: 5%;
}

@media screen and (max-width: 1080px) {
    #graph_reports {
        display: block;
        max-width: 700px;
        margin: auto;
    }
}