.chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: default;

    .tooltip {
        // make the height width bigger
        width: fit-content;
        height: fit-content;
    }

    .hoverHighlight-selected,
    .selected {
        // change the color of the circle element to be red
        fill: transparent;
        outline: red solid 2px;
        border-radius: 100%;
        position: absolute;
        transform-box: fill-box;
        transform-origin: center;
    }
    .hoverHighlight {
        fill: transparent;
        outline: black solid 1px;
        border-radius: 100%;
    }
    .hoverHighlight-selected {
        fill: transparent;
        scale: 1;
        outline: black solid 1px;
        border-radius: 100%;
    }
    .datapoint {
        fill: black;
    }
    .brushed {
        // change the color of the circle element to be red
        fill: red;
    }
}