/* residential--understanding-your-bill.css */

/* FROM FREEFORM 1 */
.modal-container .cmp-tabs__tablist{width:100%;justify-content:center;margin:-2em auto -14px auto !important}
.modal-container .cmp-tabs__tabpanel{border-top:none !important;margin-top:1em}
.modal-container{margin:auto !important}
@media(max-width:768px){.modal-container .cmp-tabs__tabpanel{margin-top:-2em}
.modal-container .cmp-tabs__tablist{border-bottom:2px solid #e8e8e8;right:0}
.cmp-tabs__tabpanel{margin-top:0}
.im5-width-100\%{min-width:700px;left:0;top:2em}
.modal-header{position:fixed;top:0;z-index:2;right:0}
.modal-container{margin:0;padding:0}
.active-container .background{background-color:#fff}
.generalmodal .freeform.section{justify-content:normal}
.modal-container .cmp-tabs__tablist{position:fixed;top:20px;z-index:3;background:#fff}
.modal-container .freeform.section{padding:0}
.modal-container .column-control>.bootstrap-container>.row .section, .modal-container .column-control>.bootstrap-container>.row{padding-left:0;padding-right:0}
.nav-fixed-bottom{position:fixed;bottom:0;z-index:7;width:100%;background:linear-gradient(0deg, #f2f2f2 0%, rgba(255,255,255,0) 100%) !important;padding:0 1em 2em 1em}
.nav-fixed-bottom p{display:block;text-align:center}
.nav-fixed-bottom a{color:#000;font-weight:400;font-size:1.286rem;padding:0.5em 1em;display:inline-block;background-color:#fff;transition-duration:0.5s;width:250px}
.nav-fixed-bottom a:hover{background-color:#fff;transition-duration:0.5s;box-shadow:0 2px 6px 0 rgba(0,0,0,0.4), 0 10px 20px -5px #000}
.nav-fixed-bottom a{box-shadow:0 2px 6px 0 rgba(0,0,0,0.08), 0 10px 20px -5px #000}
}
@media(min-width:768px){.nav-fixed-bottom{display:none}
}
.how-it-works h2.content-card__title{font-size:7rem !important;font-weight:800 !important;line-height:100%;margin-bottom:10px !important}
@media(max-width:768px){.how-it-works h2.content-card__title{font-size:3rem !important}
.how-it-works .image.section .cmp-image{width:80%;min-width:200px;max-width:300px;margin:0 auto}
}

/* FROM FREEFORM 3 */
@media(max-width:992px){.interactive-image{display:block;padding:0}
.interactive-image-wrapper{min-width:800px;margin:0 4em}
}
.interactive-image .interactive-container{overflow-y:auto}

/* FROM FREEFORM 5 */
.graph-capacity th{border-top:1px solid !important;bottom:1px !important}
.graph-capacity table:not(.socotable):not(.dynamictable):not(.find-a-contractor__table) td, .graph-capacity table:not(.socotable):not(.dynamictable):not(.find-a-contractor__table) th{border:none}
.graph-capacity .charts-css.area tbody, .graph-capacity .charts-css.column tbody, .graph-capacity .charts-css.line tbody{aspect-ratio:auto;height:100%;color:#000}
.graph-capacity .charts-css{--color-1: var(--blue);--color-2: var(--orange);--data-axes-color:rgba(255, 255, 255, .2);--primary-axis-color:transparent}
.graph-capacity tr:not(:first-of-type){margin-left:0px !important}
.graph-capacity tr:not(:last-of-type){margin-right:0px !important}
.graph-capacity tr td{-webkit-margin-start:10px !important;-webkit-margin-end:10px !important;margin-inline-end:10px !important;margin-inline-start:10px !important}
.graph-capacity tr td:nth-of-type(2n){margin-left:-50% !important;opacity:0.85}
.graph-capacity .charts-css.area, .graph-capacity .charts-css.column, .charts-css.line{--labels-size:2rem}
@media(min-width:992px){.freeform-bottom .freeform{position:absolute;bottom:0}
}
@media(max-width:768px){.graph-capacity .charts-css.area tbody, .graph-capacity .charts-css.column tbody, .graph-capacity .charts-css.line tbody{aspect-ratio:var(--aspect-ratio, 16 / 9) !important}
}

/* FROM FREEFORM 6 */
@media(max-width:460px){.graph-capacity2 p.value-1, .graph-capacity2 p.value-2, .graph-capacity2 p.value-1 span, .graph-capacity2 p.value-2 span{font-size:1rem !important}
.graph-capacity2 p.value-1 span, .graph-capacity2 p.value-2 span{margin-bottom:0 !important}
.graph-capacity2 p.value-1{right:-70px !important}
.graph-capacity2 p.value-1:before{width:30px !important;margin-left:-40px !important}
.graph-capacity2 p.value-1:after{margin-left:-100px !important}
.graph-capacity2 p.value-2{right:auto !important;height:105px !important;width:max-content !important}
.graph-capacity2 p.value-2:before{height:30px !important}
.graph-capacity2 p.value-2:after{right:18.5px !important}
}
.graph-capacity2 p.value-1:before{content:"";width:50px;height:2px;background:#000;margin-left:-60px;display:inline-block;position:absolute;margin-right:5px;z-index:1;transform:translateY(-50%);top:50%}
.graph-capacity2 p.value-1:after{content:"●";margin-left:-130px;position:absolute;z-index:1;font-size:2rem;transform:translateY(-50%);top:50%}
.graph-capacity2 p.value-2:before{content:"";width:2px;height:25px;background:#000;bottom:25px;position:absolute;z-index:1;font-size:2rem;left:50%;right:50%}
.graph-capacity2 p.value-2:after{content:"●";bottom:5px;position:absolute;z-index:1;font-size:2rem;right:22px}
.graph-capacity2 .rate-price{font-weight:400;line-height:normal}
.graph-capacity2 td{margin:auto 7px 0 !important}
.graph-capacity2 tr:not(:last-of-type){border-right:1px dashed rgba(0,0,0,0.3)}
.graph-capacity2 th{border-top:1px solid !important;bottom:1px !important;padding-top:10px !important;display:block !important}
.graph-capacity2 table:not(.socotable):not(.dynamictable):not(.find-a-contractor__table) td, .graph-capacity2 table:not(.socotable):not(.dynamictable):not(.find-a-contractor__table) th{border:none}
.graph-capacity2 .charts-css.area tbody, .graph-capacity2 .charts-css.column tbody, .graph-capacity2 .charts-css.line tbody{aspect-ratio:auto;height:100%;color:#000}
.graph-capacity2 .charts-css{--color-1: transparent;--color-2: #e4953d;--color-3: transparent;--color-4: var(--blue);--data-axes-color:rgba(255, 255, 255, .2)}
.graph-capacity2 tr td:nth-of-type(2n){margin-left:-5px !important}
.graph-capacity2 .charts-css.area, .graph-capacity2 .charts-css.column, .charts-css.line{--labels-size:2rem}
@media(min-width:992px){.freeform-bottom .freeform{position:absolute;bottom:0}
}
@media(max-width:768px){.graph-capacity2 .charts-css.area tbody, .graph-capacity2 .charts-css.column tbody, .graph-capacity2 .charts-css.line tbody{aspect-ratio:var(--aspect-ratio, 16 / 9) !important}
}

/* FROM FREEFORM 7 */
.tou-container p{margin:0;font-size:1rem}
.tou-col{margin:0;display:inline-grid;width:calc(25% - 7px);padding-bottom:10px}
.tou-col:not(:last-of-type){border-right:1px dashed var(--gray-d);padding-right:8px;margin-right:5px}
.tou-col p{margin:0;text-align:center}
.tou-off{width:100%;height:3em;margin:0;background:var(--gray)}
.tou-on{width:100%;height:3em;margin:0;background:#e4953d;color:#fff}
.tou-super{width:100%;height:3em;margin:0;background:var(--blue);color:#fff}
.tou-on p, .tou-super p{text-align:center;font-size:1.286rem;position:relative;top:50%;transform:translateY(-50%)}
@media(max-width:450px){.tou-container p{font-size:0.85rem;letter-spacing:-0.25px}
.tou-on p, .tou-super p{font-size:1.143rem}
.tou-col:not(:last-of-type){border-right:1px dashed var(--gray-d);padding-right:3px;margin-right:0px}
p.tou-on-legend, p.tou-super-legend{font-size:1.743rem !important}
p.tou-on-legend span, p.tou-super-legend span{font-size:1rem !important;margin-top:2px;display:block}
}
.tou-legend{margin-top:2em}
p.tou-on-legend, p.tou-super-legend{font-size:2rem;font-weight:300;letter-spacing:-0.25px}
p.tou-on-legend span, p.tou-super-legend span{font-size:1.143rem;font-weight:300}
p.tou-on-legend:before{content:' ';display:inline-block;width:1.5em;height:1.5em;margin-right:10px;background:#e4953d;vertical-align:middle}
p.tou-super-legend:before{content:' ';display:inline-block;width:1.5em;height:1.5em;margin-right:10px;background:var(--blue);vertical-align:middle}