/* Reset default styles for charts */
#top_y_div, #donutchart, #donutchart2022 {
  width: 100%;
  max-width: 100%; /* Ensure it does not exceed the container */
  height: auto; /* Maintain aspect ratio */
}

/* Ensure the parent containers are responsive */
.row-fluid, .widget-box {
  width: 100%;
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Default styles for charts (Desktop) */
@media only screen and (min-width: 1200px) {
  #top_y_div {
    height: 300px; /* Adjust as needed */
  }
  #donutchart, #donutchart2022 {
    height: 300px; /* Adjust as needed */
  }
}

/* Adjustments for tablets and smaller screens */
@media only screen and (max-width: 1200px) {
  #top_y_div {
    height: 250px; /* Adjust as needed */
  }
  #donutchart, #donutchart2022 {
    height: 250px; /* Adjust as needed */
  }
}

/* Adjustments for mobile devices */
@media only screen and (max-width: 768px) {
  #top_y_div {
    height: 200px; /* Adjust as needed */
  }
  #donutchart, #donutchart2022 {
    height: 200px; /* Adjust as needed */
  }
}

@media only screen and (max-width: 480px) {
  #top_y_div {
    height: 150px; /* Adjust as needed */
  }
  #donutchart, #donutchart2022 {
    height: 150px;
  }
}