.feeds_widget {
    max-height: 330px;   /* set desired height */
    overflow-y: auto;    /* add vertical scroll if content overflows */
    padding-right: 5px;  /* avoid hiding scrollbar */
}

.feeds_widget li .feeds-body .title {
    font-size: 14px; /* Adjust the font size as needed */
}
/* ==============================
   1. KPI GRID LAYOUTS
   ============================== */
.kpi-grid {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.grid-3x2 { grid-template-columns: repeat(3, 1fr); }
.grid-2x2 { grid-template-columns: repeat(2, 1fr); }
.grid-1x2 { grid-template-columns: 1fr; }

.water-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* ==============================
   3. METRIC BOXES (Water/Dashboard)
   ============================== */
.metric-box {
  padding: 14px;
  border-radius: 12px;
  color: #fff;
  text-align: center;
  font-weight: 500;
  font-size: 0.9rem;
  background: #f5f5f5; /* fallback */
  border: 1px solid #e5e5e5;
  transition: transform 0.2s;
}

.card1 {
    background: #fff;
    transition: .5s;
    border: 0;
    margin-bottom: 0px;
    border-radius: .55rem;
    position: relative;
    width: 100%;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}

.card1 .body1 {
    color: #444;
    font-weight: 400;
    padding: 0px;
}

.metric-box:hover {
  transform: translateY(-3px);
}

/* ==============================
   4. SPECIAL / EXTRA TALL CARDS
   ============================== */
.extra-tall {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  font-size: 1rem;
  text-align: center;
}

/* ==============================
   5. GRADIENT BACKGROUNDS
   ============================== */
/* Energy */
.bg-grid     { background: linear-gradient(135deg,#fff3e0,#ffe0b2); }
.bg-solar    { background: linear-gradient(135deg,#fff3e0,#ffe0b2); }
.bg-wind     { background: linear-gradient(135deg,#fff3e0,#ffe0b2); }
.bg-diesel   { background: linear-gradient(135deg,#fff3e0,#ffe0b2); }
.bg-genset   { background: linear-gradient(135deg,#fff3e0,#ffe0b2); }
.bg-cut      { background: linear-gradient(135deg,#fff3e0,#ffe0b2); }
.bg-wind-ene { background: linear-gradient(135deg,#fff3e0,#ffe0b2); }
.bg-ghg      { background: linear-gradient(135deg,#fff3e0,#dd8c14); }
.bg-co2      { background: linear-gradient(135deg,#fff3e0,#dd8c14); } 

/* Weather */
.bg-rain     { background: linear-gradient(135deg,#e8f5e9,#c8e6c9); }
.bg-tempmin  { background: linear-gradient(135deg,#e8f5e9,#c8e6c9); }
.bg-tempmax  { background: linear-gradient(135deg,#e8f5e9,#c8e6c9); }
.bg-humidity { background: linear-gradient(135deg,#e8f5e9,#c8e6c9); }
.bg-wind     { background: linear-gradient(135deg,#e8f5e9,#c8e6c9); }

/* Water */
.bg-water1   { background: linear-gradient(135deg,#e3f2fd,#bbdefb); }
.bg-water2   { background: linear-gradient(135deg,#e3f2fd,#bbdefb); }
.bg-water3   { background: linear-gradient(135deg,#e3f2fd,#bbdefb); }
.bg-water4   { background: linear-gradient(135deg,#e3f2fd,#bbdefb); }
.bg-water5   { background: linear-gradient(135deg,#e3f2fd,#bbdefb); }
.bg-water6   { background: linear-gradient(135deg,#e3f2fd,#bbdefb); }

/* Demand */
.bg-demand   { background: linear-gradient(135deg,#ede7f6,#d1c4e9); }

/* Other / Waste */
.bg-other1   { background: linear-gradient(135deg,#fffde7,#fff9c4); }
.bg-other2   { background: linear-gradient(135deg,#fbe9e7,#ffccbc); }
.bg-other3   { background: linear-gradient(135deg,#fbe9e7,#ffccbc); }
.bg-other4   { background: linear-gradient(135deg,#fbe9e7,#ffccbc); }

/* ==============================
   6. MEDIA QUERIES (LARGER SCREENS)
   ============================== */
@media (min-width: 1040px) {
  .kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    align-items: stretch; /* ensures equal height */
    grid-auto-rows: 1fr; /* make rows equal height */
  }

  .kpi-card {
    height: 100%; 
  }
}

.energy-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.energy2-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 12px;
}

.demand-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.waste-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}