:root {
  /* export the Elementor accent color into our own var */
  --chart-fees-color: #F9A664;
  --chart-costs-color: #f97a64;
}

.chart-container {
  position: relative;
  width: 100%;
  height: 400px;       /* fixed height so Chart.js doesn’t keep resizing */
}


.chart-container canvas {
  width: 100% !important;   /* override inline styles */
  height: 100% !important;
  display: block;           /* remove any inline-block quirks */
}

#feesCostsChart {
  display: block;      /* removes any inline-block baseline nudge */
  width: 100% !important;
  height: 100% !important;
  margin: 1rem auto;
  background: var(--e-global-color-background, transparent);
}


.participation-chart-container {
  width: 100%;              /* fluid width */
  height: 210px;            /* locked height */
  position: relative;
}

/* Canvas should always fill the container */
.participation-chart-container canvas {
  width: 100% !important;   /* Chart.js sets inline styles, so !important */
  height: 100% !important;
  display: block;
}

.dp-stake-dist-container {
  position: relative;
  width: 100%;       /* fill whatever column/elementor widget you’re in */
  height: 210px !important;     /* fixed height you choose */
}

.dp-stake-dist-container canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
}


#stake-dist-container {
  width: 100%;
  height: 300px;       /* ← your desired fixed height */
  position: relative;
}

/* force the canvas to exactly fill that box */
#stake-dist-container canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}