canvas.chart-doughnut {
   max-width: 100%;
  margin:auto auto 10px auto;
    min-width: 150px !important;
    min-height: 150px !important;
    
}

.data-wrapper{
  display:flex;
  align-items:center;
}

.data-wrapper > div {
  width:30%;
  padding: 2%;
}

canvas.chart-pie{
  max-width:  182px;
  margin:var(--wp--preset--spacing--medium) auto;
      width: 182px !important;
    height: 182px !important;
}
canvas.chart-bar{
  margin-top:var(--wp--preset--spacing--medium);
}

/*HTML Legend plugin*/

.pie-legend-number:after{content:"%"}


.legend-right {display:flex;align-items: center; gap:var(--wp--preset--spacing--large);justify-content: space-between; }
.legend-right canvas.chart-pie{margin:auto 0;}
.legend-right .chart-legend{width:100%;}
.legend-right .chart-legend div{display:flex; flex-direction: column; gap:10px; align-items: center;}
.legend-right .chart-legend div div{display:flex;justify-content: space-between; width: 100%;  flex-direction: row!important;align-items: center;}
.legend-right .chart-legend div div div {display:flex;justify-content: space-between; width: 100%;  flex-direction: row-reverse!important;align-items: center;}
.legend-right .chart-legend > div > div > div:first-of-type{aspect-ratio: 1/1;}


.legend-bottom #pie-legend div { text-align: center; margin-top:20px;}
.legend-bottom  .pie-legend-number {display:block; font-size: var(--wp--preset--font-size--heading-4);  font-family:var(--wp--preset--font-family--martina-plantijn);font-weight: 700; text-align: center;}
.legend-bottom .chart-legend > div > div > div:first-of-type {width: var(--wp--preset--font-size--heading-3)!important; height: var(--wp--preset--font-size--heading-3)!important; margin: 0 30px;}
.legend-bottom .chart-legend {margin-top: var(--wp--preset--spacing--medium)}



@media only screen and (min-width: 900px) {
  
  canvas.chart-bar{
  max-height: 800px!important;
  min-height: 400px!important;
}
  
}@media only screen and (max-width: 900px) {

  canvas.chart-doughnut {

    max-width: 160px !important;
    max-height: 160px !important;

}
  
  canvas.chart-bar{
    min-height: 400px!important;
    width:100%;
    height:auto;  
  }
  .legend-right{
    flex-direction: column;
  }

  canvas.chart-pie{
  max-width:  auto;
  margin:var(--wp--preset--spacing--medium) auto;
      width: auto !important;
    height: auto !important;
  }
  
  
}

.wp-block-heading + .legend-right{
  margin-top:var(--wp--preset--spacing--medium)
}