.hourly-view { margin: 20px 24px; min-width: 0; }
.hourly-view .module-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; text-align: left; }
.hourly-view h1 { margin: 4px 0; color: #102b4e; font-size: 26px; }
.hourly-view header > span, .hourly-snapshot-meta, .hourly-basis { color: #64768c; font-size: 12px; line-height: 1.6; }
.hourly-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px 14px; margin-top: 20px; padding-bottom: 14px; border-bottom: 1px solid #dce5ef; }
.hourly-toolbar label { display: grid; gap: 5px; color: #64768c; font-size: 12px; min-width: 0; }
.hourly-toolbar input, .hourly-toolbar select { min-height: 34px; min-width: 140px; max-width: 100%; border: 1px solid #cfd9e6; border-radius: 4px; padding: 4px 9px; color: #203654; background: #fff; font: inherit; }
.hourly-toolbar .hourly-download { margin-left: auto; width: 36px; min-height: 34px; }
.hourly-snapshot-meta { padding-top: 12px; }
.hourly-basis { margin: 5px 0 12px; }
.hourly-table { width: 2820px; min-width: 2820px; table-layout: fixed; }
.hourly-table th, .hourly-table td { width: 100px; text-align: right; }
.hourly-table th:first-child, .hourly-table td:first-child { position: sticky; left: 0; z-index: 2; width: 120px; text-align: left; background: #fff; box-shadow: 1px 0 #dce5ef; }
.hourly-table thead th:first-child { background: #f7f9fc; z-index: 3; }
.hourly-table th:nth-child(2), .hourly-table td:nth-child(2) { position: sticky; left: 120px; z-index: 2; background: #fff; box-shadow: 1px 0 #dce5ef; }
.hourly-table thead th:nth-child(2) { background: #f7f9fc; z-index: 3; }
.hourly-table th small { display: block; font-weight: 400; color: #718198; font-size: 11px; }
.hourly-unavailable { color: #7b899b; font-size: 11px; }
.hourly-error { color: #a63c32; font-size: 12px; }
@media (max-width: 720px) {
  .hourly-view { margin: 16px 12px; }
  .hourly-view .module-heading { flex-wrap: wrap; align-items: start; justify-content: flex-start; }
  .hourly-toolbar label { flex: 1 1 140px; }
  .hourly-toolbar input, .hourly-toolbar select { min-width: 0; width: 100%; }
}