:root {
    --white: #fff;
    /* --divider: rgba(211, 211, 211, 0.589); */
    --divider: rgba(240, 240, 240, 0.99);
    --body: #f5f7f8;
}

ul {
    list-style: none;
}

.chart-body {
    /* background: var(--body); */
    background: white;
    font-size: 16px;
    font-family: sans-serif;
    /* height: 100px; */
    height: auto;
    width: 1250px;
    /* width: auto; */
    margin-bottom: 20px;
    overflow-x: auto;
    overflow-y: auto;
}

.chart-body .chart-wrapper {
    padding: 0 10px;
    margin: 0 auto;
}


/* CHART-HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.chart-body .chart-wrapper .chart-header {
    position: relative;
    display: flex;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 1rem;
}

.chart-body .chart-wrapper .chart-header li {
    flex: 1;
    /* width: 1250px; */
    width: 100%;
    text-align: center;
}


/* CHART-VALUES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.chart-body .chart-wrapper .chart-values {
    position: relative;
    display: flex;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 0.7rem;
}

.chart-body .chart-wrapper .chart-values li {
    flex: 1;
    min-width: 10px;
    text-align: center;
}

.chart-body .chart-wrapper .chart-values li:not(:last-child) {
    position: relative;
}

.chart-body .chart-wrapper .chart-values li:not(:last-child)::before {
    content: '';
    position: absolute;
    right: 0;
    height: 400px;
    /* height: auto; */
    border: 0.2px solid var(--divider);
}


/* CHART-BARS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.chart-body .chart-wrapper .chart-bars li {
    position: relative;
    color: var(--white);
    margin-bottom: 15px;
    font-size: 1vw;
    padding-left: 10px;
    height: 1.2vw;
    opacity: 0;
    transition: all 0.65s linear 0.2s;
}

@media screen and (max-width: 600px) {
    .chart-body .chart-wrapper .chart-bars li {
        padding: 10px;
    }
}