body{margin:20px}body,h4{font-family:Helvetica Neue,Arial,sans-serif}h4{text-align:center;z-index:1;font-size:larger}.outer-container{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;gap:2%}.chart-container{position:relative;width:890px;height:600px;border-radius:5px;z-index:1}.chart-container h3{margin-bottom:0;margin-top:10px;padding:0;z-index:1;font-family:Helvetica Neue,Arial,sans-serif}.chart{display:block;width:100%;height:100%;z-index:1}.tooltip{position:absolute;background-color:rgba(0,0,0,.7);color:#fff;padding:10px;border-radius:5px;pointer-events:none;opacity:0;z-index:1000;max-width:250px;word-wrap:break-word;white-space:normal;overflow-wrap:break-word}.legend-tooltip{font-size:14px}circle{cursor:pointer}.legend{position:absolute;top:10px;left:10px;width:175;background-color:hsla(0,0%,100%,.8);padding:5px;border:1px solid #ddd;border-radius:5px;display:flex;flex-direction:column;gap:1px;z-index:4}.legend-item{display:flex;align-items:flex-start;gap:0}.legend-item rect{width:12px;height:12px}.legend-item text{font-size:10px}.legend-item:hover{background-color:#f0f0f0}.legend-item.selected{background-color:#d3d3d3}.details-box{flex:1;min-width:250px;height:600;padding:10px;background-color:#f9f9f9;overflow-y:auto;border-radius:5px;z-index:2}.details-box h2{font-size:16px;margin-bottom:10px;z-index:2}.details-content{font-size:12px;line-height:1.5;z-index:2}