:root{
  --bg-color: #ffffff;
  --text-color: #1a1a1a;
  --primary-color: #2a2185;
  --chart-bg: rgba(11, 9, 194, 0.05);
  --chart-text: #858fe7;
}
.dark {
  --bg-color: #1a1a1a;
  --text-color: #f1f1f1;
  --primary-color: #818cf8; 
  --chart-bg: rgba(11, 9, 194, 0.05);
   --chart-text: #818cf8;
}
.chart-section {
  width: 100%;  
  /* max-width: 80%; */
  background: var(--chart-bg);
  border: 1px solid var(--card-border);
  border-radius: 1rem;
  padding: 2rem;
  margin-top: 2rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 2rem;
}
.chart-section h2 {
  margin-bottom: 1rem;
}
canvas{
  /* max-width: 98%; */
  width: 100%;
  height: 100%;
}
.total-usage{
  margin-bottom: 1rem;
}