/* Content-sized custom charts on desktop and phone. Saved layout stays editable. */
.resizable-container.energy-auto-size,
.energy-auto-chart,
.energy-auto-chart .energy-auto-size {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
.energy-auto-chart .chart-container {
  height: auto !important;
  overflow: visible !important;
}
.energy-auto-chart .chart-container > :not(.energy-trend-layer) {
  display: none !important;
}
.energy-trend-layer svg { display: block; width: 100%; height: auto; }
.energy-trend-layer { color: #263746; color-scheme: light; }
.energy-trend-layer p { margin-bottom: 8px; }

/* Applied by energy-responsive.js only to the two annual dashboards. */
.energy-mobile-layout .dashboard-content,
.energy-mobile-layout .dashboard-grid,
.energy-mobile-layout .grid-content {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
.energy-mobile-layout .dashboard-grid .grid-row {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
}
.energy-mobile-layout .dashboard-grid .grid-row > div,
.energy-mobile-layout .dashboard-grid .resizable-container,
.energy-mobile-layout .dashboard-grid .grid-column {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  box-sizing: border-box;
}
.energy-mobile-layout .dashboard-grid .dashboard-component-chart-holder {
  margin-bottom: 14px;
}
.energy-mobile-layout .energy-trend-layer { padding: 8px 2px !important; }
.energy-mobile-layout .energy-trend-layer svg { min-width: 640px; }
.energy-mobile-layout .energy-trend-layer { overflow-x: auto; }
.energy-mobile-layout [data-test="slice-header"] {
  align-items: center !important;
  min-height: 28px !important;
  margin-bottom: 12px !important;
  font-size: 15px !important;
  line-height: 24px !important;
}
.energy-mobile-layout [data-test="slice-header"] .header-title,
.energy-mobile-layout [data-test="slice-header"] .header-title > div,
.energy-mobile-layout [data-test="slice-header"] .editable-title,
.energy-mobile-layout [data-test="slice-header"] .header-title a {
  display: block !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  -webkit-line-clamp: 1 !important;
  line-height: 24px !important;
  max-height: 24px !important;
}
.energy-mobile-layout [data-test="slice-header"] .header-controls {
  flex-shrink: 0;
}
.energy-mobile-layout .dt-select-page-size {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-size: 12px;
  line-height: 24px;
}
.energy-mobile-layout .chart-container table {
  font-size: 13px;
  line-height: 1.35;
}