body {
  background-image: image-set(
    url('/img/solar_bg.webp') type("image/webp"),
    url('/img/solar_bg.png') type("image/png")
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.bg{background: rgba(255,255,255,0.85)}
.solar-page{--sp-radius:1rem;overflow:hidden}
.solar-page h1{letter-spacing:.2px}
.solar-page .regions-list a{display:inline-block;padding:.375rem .75rem;border:1px solid var(--bs-primary);border-radius:2rem;text-decoration:none;background-color:#fff;color:var(--bs-primary);font-weight:500}
.solar-page .regions-list a:hover{background-color:var(--bs-primary);color:#fff}
.solar-page .regions-list a.red{border-color:#dc3545;color:#dc3545}
.solar-page .regions-list a.red:hover{background-color:#dc3545;color:#fff}
.solar-page .regions-list a.green{border-color:#28a745;color:#28a745}
.solar-page .regions-list a.green:hover{background-color:#28a745;color:#fff}
.solar-page p.lead{font-size:1.05rem}
.solar-page .card{border-radius:var(--sp-radius)}
.solar-page .card-body>div[id^="graph-"]{min-height:330px}

.solar-page .cta-form .form-control{padding:.9rem 1rem;border-radius:.75rem}
.solar-page .cta-form .btn{border-radius:.75rem}
.solar-page .table-responsive{border-radius:var(--sp-radius)}
.solar-page table thead th{white-space:nowrap;font-weight:600}
.solar-page table td,.solar-page table th{vertical-align:middle}
.solar-page .table.table-striped>thead>tr>*{background-color:rgba(255,255,255,.8)!important}
.solar-page .table.table-striped>tbody>tr:nth-of-type(odd)>*{background-color:rgba(255,255,255,.8)!important}
.solar-page .table.table-striped>tbody>tr:nth-of-type(even)>*{background-color:rgba(248,249,250,.8)!important}
.pulsating{animation:pulse 1.5s 5}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(220,53,69,.8)}70%{box-shadow:0 0 0 20px rgba(220,53,69,0)}100%{box-shadow:0 0 0 0 rgba(220,53,69,0)}}

.faq-qa{--faq-pl:1rem;--faq-bar:0;margin:0;padding:0;opacity:0.8}
.faq-qa dt{position:relative;margin:0;padding:1rem;border:1px solid var(--bs-border-color);border-bottom:0;border-radius:.75rem .75rem 0 0;background-color:var(--bs-light);font-weight:600}
.faq-qa dt::before{display:none}
.faq-qa dt+dd{position:relative;margin:0 0 1rem 0;padding:1rem;border:1px solid var(--bs-border-color);border-top:0;border-radius:0 0 .75rem .75rem;background-color:var(--bs-body-bg)}
.faq-qa dt+dd::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--bs-border-color)}
@media (prefers-color-scheme:dark){
    .faq-qa dt{background-color:rgba(255,255,255,.05)}
}

.bi{color:red}
.js-plotly-plot{user-select:none;-webkit-user-select:none;-ms-user-select:none}
.dual,.daily{height:420px}
.heatmap{height:540px}
.tooltip{--bs-tooltip-max-width:300px}
.tooltip-inner{text-align:justify}
#map{width:100%;height:700px}
.modal-dialog{max-width:360px}
.youtube{width:360px;height:203px}
.form-control,.form-select{border:1px solid #ccc !important}

@media (max-width:767.98px){
    .dual,.daily{height:210px}
    .heatmap{height:270px}
    .plot-wrap{width:200%;overflow:hidden}
    .plot-wrap .js-plotly-plot{transform:scale(.5);transform-origin:top left}
    .geo-dialog{max-width:100%;margin:var(--bs-modal-margin)}
}

@media (min-width:992px){
    .modal-dialog{max-width:800px}
    .youtube{width:800px;height:450px}
    .solar-page p.lead{font-size:1.125rem}
    .solar-page .card-body>div[id^="graph-"]{min-height:360px}
    .cta-form{width:50%;margin-left:auto;margin-right:auto}
}
@media (prefers-color-scheme:dark){
    .solar-page .regions-list a{border-color:var(--bs-primary);color:var(--bs-primary)}
    .solar-page .cta-form{background:linear-gradient(180deg,rgba(13,110,253,.12),rgba(13,110,253,.06))}
}

/* round slider */
.azimuth-container{display:inline-block;user-select:none;touch-action:none}.azimuth-svg{width:100%;height:100%}.azimuth-circle{fill:none;stroke-width:2;filter:drop-shadow(0 0 3px #ccc)}.azimuth-line{stroke-width:3;stroke-linecap:round;transition:all .05s linear}.azimuth-handle{stroke:#fff;stroke-width:2;cursor:grab;filter:drop-shadow(0 0 3px #0003)}.azimuth-handle:active{cursor:grabbing;opacity:.8}.azimuth-text{font-size:20px;font-weight:700;fill:#000}.azimuth-dir{font-size:12px;fill:#555}