#charts { margin: 0; padding: 20px; background-color: var(--secondary-2-100); }
#highcharts-container { max-width: 800px; height: 550px; margin: 0 auto; }
.responsive-break { display: block; height: 0; }
@media (max-width: 450px) {
  .responsive-break { display: inline; padding: 0 2px; }
  .x-label-container { white-space: nowrap }
}

#highcharts-container .highcharts-xaxis-labels span {
    /*font-size: clamp(12px, 1.5vw, 18px) !important;*/
    font-size: 18px !important;
    text-overflow: clip !important; 
    white-space: normal !important;
    overflow: visible !important;
    width: auto !important;
} 

.charts-custom__chart h3 {
	font-weight: 700;
  	text-align: center;
}
@media (max-width: 767px) {
  #highcharts-container .highcharts-xaxis-labels span {
    font-size: 16px !important;
  }
}
@media (max-width: 360px) {
  #highcharts-container .highcharts-xaxis-labels span {
    font-size: 12px !important;
  }
}