:root {

--first-color:  blue;
--second-color: pink;
--third-color:  pink;
--fourth-color: green;
--fifth-color:  turquoise;
--sixth-color:  blue;
--seventh-color: darkblue;
--eighth-color:  purple;
--ninth-color:  pink;
--tenth-color:  brown;


}



.chart_root {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .chart-container {
    position: relative;
    text-align: center;
  }
  
  .chart-title {
    position: absolute;
    width: 100%;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
  
  #doughnut-chart {
    /*max-width: 100%; 
    max-height: 600px; */
  }
  
  .chart-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    list-style-type: none;
    margin-top: 20px;
  }
  
  .chart-legend li {
    margin: 10px;
    padding: 10px;
    font-size: 0.8em;
  }
  
  .chart-footer {
    margin-top: 10px;
    font-size: 0.9em;
  }