section.chart {
    margin-top: 2rem;
    width: 100%;
  
   .chart-wrap{
      display: flex;
      flex-direction: column;
      height: auto;
      justify-content: center;
      margin: auto;
      max-width: 500px;
      position: relative;
      width: 100%;
  
      .chart-tooltip {
        margin-left: 15px;
        position: absolute;
        z-index: 10;
  
        .chart-tooltip-wrap {
          background-color: #181818;
          border-radius: 10px;
          box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
          display: block;
          padding: 0.875rem;
  
          p {
            color: #fff;
            font-size: 0.875rem;
            line-height: 1.75;
            margin: 0;
          }
        }
      }
  
      svg {
        margin: auto;
  
        .text {
          fill: #fff;
          font-size: 0.875rem;
          text-anchor: middle;
        }
      }
  
      .legend {
        display: flex;
        justify-content: center !important;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: flex-start;
        margin: 2rem auto;
        width: 100%;
  
        .legend-group {
          align-items: center;
          display: flex;
          flex-basis: 100px;
          flex-direction: row;
          gap: 8px;
          justify-content: flex-start;
  
          .legend-box {
            height: 20px;
            margin: 0;
            width: 20px;
          }
  
          .legend-label {
            margin: 0;
          }
        }
      }
    }
  }
  
  p.legend-label {
    font-size: 11px;
    font-weight: 500;
  }