.chart-container { display: flex; flex-direction: column; align-items: center; cursor: default; margin-top: 10px; overflow-y: visible; .graph{ overflow: visible; } .graph-title{ align-items: center; font-size: larger; display: flex; flex-direction: row; margin-top: -10px; margin-bottom: -10px; } .asHistogram-checkBox { // display: flex; // flex-direction: row; align-items: left; align-self: left; align-content: left; justify-content: flex-end; float: left; left: 0; position: relative; margin-bottom: -35px; } .selected-data{ align-items: center; text-align: center; display: flex; flex-direction: row; margin: 10px; margin-top: -25px; 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; } } .tableBox { display: flex; flex-direction: column; } .table-container{ overflow: scroll; margin: 5px; margin-left: 25px; margin-right: 10px; margin-bottom: 0; } .selectAll-buttons { display: flex; flex-direction: row; justify-content: flex-end; margin-top: 5px; margin-right: 10px; float: right; }