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

    .graph{
        overflow: visible;
    }
    .graph-title{
        align-items: center;
        font-size: larger;
        display: flex;
        flex-direction: row;
        margin-top: -10px;
        margin-bottom: -10px;
    }
    .selected-data{
        align-items: center;
        text-align: center;
        display: flex;
        flex-direction: row;
        margin: 10px;
        margin-top: 0px;
        margin-bottom: -5px;
    }
    .slice {
        &.hover {
            stroke: black;
            stroke-width: 2px;
        }
    }
    
    .histogram-bar{
        outline: thin solid black;
        &.hover{
            outline: 3px solid black;
            outline-offset: -3px;
        }
    }

    .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;
    }
}
.table-container{
    overflow: scroll;
    margin: 10px;
}