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

    .graph{
        overflow: visible;
    }
    .slice {
        &.hover {
            stroke: black;
        }
    }
    
    .histogram-bar{
        outline: thin solid black;
        fill: #69b3a2;
        &.hover{
            fill: grey;
        }
    }

    .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;
    }
}