.chartContainer {
    width: 100%;
    display: flex;
    gap: 5px;
    flex-direction: column;
    background-color: var(--gray);
    border-radius: var(--borderRadius);
    overflow: hidden;
    box-shadow: 0 0 4px 0 var(--black);
    padding: 5px;
}

.chartText {
    font-size: clamp(8px, 2dvw, 12px);
    text-align: center;
}

.chartBody {
    display: flex;
    align-items: stretch;
    width: 100%;
    /* max-width: 100%; */
    height: calc(clamp(12px, 3dvw, 36px) * 11);
}

.chartLegend {
    flex: 0 0 3%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.chartValues {
    display: flex;
    flex: 1 1 0;
    align-items: flex-start;
    justify-content: flex-end;
}

.chartRight {
    flex: 1 1 97%;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chartValuesArea {
    flex: 1 1 auto;
    height: auto;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    padding: 0 5px;
    border: var(--borderHeightS) var(--borderStyle) var(--black);
    background: repeating-linear-gradient(to top, transparent, transparent calc(clamp(12px, 3dvw, 36px) - var(--borderHeightS)), var(--black) var(--borderHeightS), var(--black) clamp(12px, 3dvw, 36px));
}

.chartBars {
    flex: 1 1 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.chartBars > .chartBarMargin > .chartText {
    display: none;
}

.chartBars:hover > .chartBarMargin > .chartText {
    display: block;
}

.chartBar {
    width: 100%;
    background-color: var(--primaryColor);
    transition: background-color var(--durationS) var(--course);
    cursor: pointer;
}

.chartBar:hover {
    background-color: var(--secondaryColor);
    transition: background-color var(--durationS) var(--course);
}

.chartBarMargin {
    width: 100%;
}

.chartTimesRow {
    flex: 0 0 auto;
    height: auto;
    display: flex;
    padding: 2px 5px 0;
    gap: 5px;
}

.chartTimes {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (prefers-color-scheme: dark) {
    .chartContainer {
        background-color: var(--grayD);
    }

    .chartValuesArea {
        border-color: var(--blackD);
        background: repeating-linear-gradient(to top, transparent, transparent calc(clamp(12px, 3dvw, 36px) - var(--borderHeightS)), var(--blackD) var(--borderHeightS), var(--blackD) clamp(12px, 3dvw, 36px));
    }

    .chartBar {
        background-color: var(--primaryColorD);
    }

    .chartBar:hover {
        background-color: var(--secondaryColorD);
    }
}