.energy-period-dialog{width:min(540px,calc(100vw - 24px))}
.energy-period-dialog .hint{font-size:12px;margin:8px 0}
.energy-period-dialog .ze-calendar-top h2{margin-bottom:12px}
.energy-period-dialog .ze-calendar-months button{padding:10px 3px}
.energy-period-dialog .ze-calendar-year{margin-bottom:8px}
.energy-period-dialog .ze-calendar-footer{position:sticky;bottom:-24px;background:white;padding-bottom:8px}
.energy-period-modes,.energy-period-quarters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.energy-period-modes button[aria-pressed=true],.energy-period-quarters button[aria-pressed=true]{background:#087653;color:white}
.energy-period-dialog button[aria-pressed=true]:hover:not(:disabled){background:#065c41;color:white}
.energy-period-dates{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.energy-period-dates label{display:grid;gap:8px;font-weight:600}.energy-period-dates input{width:100%}
.energy-period-summary{padding:14px 18px;border:1px solid #c6ded3;background:#edf6f1;border-radius:14px;margin:12px 0 18px;display:flex;gap:12px 28px;flex-wrap:wrap;align-items:center}
.energy-period-summary p{margin:0}.energy-period-summary [data-period-label]{flex-basis:100%;font-weight:600}
#energyPeriodOpen{max-width:440px;white-space:normal;text-align:left}
@media(max-width:480px){.energy-period-dates{grid-template-columns:1fr}.energy-period-quarters{display:grid;grid-template-columns:1fr 1fr}}