/*--------------------------------------------------------------
THEME CONFIGURATION
---------------------------------------------------------------
Purpose : Defines theme settings for font family,
           font size, colors, rounded corners.
Updated : April 2025
Author  : Electricity Ratings
--------------------------------------------------------------*/

:root {
	--white: #ffffff;
	--black: #000000;
    --orange: #FF8200;
    --orange-btn: #F7941D;
    --yellow:#ffc107;
    --gray-lighter:#eaeaea;
    --gray-light:#d4d7e5;
    --gray: #9397ad;
    --grayevil: #666;
    --si-btn-color: #565973;
    --si-gray-600: #9397ad;
    --cyanpale: #C9E9FB;
    --erllcblue50: #8797C6;
    --erllcblue: #0F2F8D;
    --si-blue: #00AEEF;
    --blue-dark: #008cc0;
    --cyan:#6ccafb;
    --cyan-pale-light:#D9EFF9;
    --cyan-pale: #abe4fa;
    --cyan-light: #f7fdff;
    --si-link-color: #00AEEF;
    --cyan-very-pale: #dbf2fb;
    --cyanultrapale: #F0F6FA;
    --lighter-cyanultrapale: #f6fbff;
    --grid-background: #dbf2fb;
    --light-green: #edffe7;
    --green: #6CC551;
    --mutedblueback: #044E77;
    --blue-very-dark:#003245;
    --si-gray-900: #0b0f19;
    --update-color: var(--gray);
    --star-color: var(--yellow);
    --star-none-color: var(--gray);
    --secondary-btn-hover-background-color: var(--cyan);
    --badge-color: var(--white);
    --badge-background-color: var(--cyan-pale);
    --badge-green-color: var(--white);
    --badge-green-background-color: var(--green);
    --primary-btn-color: var(--white);
    --primary-btn-border-color: var(--orange-btn);
    --primary-btn-background-color: var(--orange-btn);
    --plan-price-font: var(--big-display-font);
    --plan-card-details-font-color: var(--si-gray-600);
    --plan-card-background: var(--white);
    --plan-head-color: var(--gray);
    --plan-name-color: var(--blue-very-dark);
    --plan-card-view-details-border-color: var(--gray-light);
    --plan-card-view-details-hover-color: var(--gray-light);
    --plan-row-background-odd: var(--cyan-light);
    --zipbox-background: var(--cyan);
    --filter-zip-icon-color: var(--cyan-pale);
    --filter-label-color: var(--cyan-very-pale);
    --filter-check-positive-color: var(--green);
    --filter-utility-text-color: var(--blue-very-dark);
    --modal-head-font-color: var(--blue-dark);
    --modal-head-background: var(--cyan-pale);
    --unfold-details-border-color: var(--cyan);
    --modal-footer-background: var(--cyan-pale);
    --modal-close-hover-background: var(--blue-very-dark);
    --modal-close-hover-text-color: var(--white);
    --unfold-details-border-color: var(--cyan);
    --unfold-table-head-even: var(--cyan);
    --unfold-table-head-even-text: var(--white);
    --unfold-table-head-even: var(--cyan);
    --unfold-link: var(--cyan);
    --unfold-content-background: var(--cyan-very-pale);
    --modal-btn-border-radius: var(--primary-btn-border-radius);
    --big-display-font: "Barlow Condensed", sans-serif;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bigimpactfont: 'Bebas Neue';
    --bs-body-font-family: var(--bs-font-sans-serif);
    --si-btn-font-family: var(--bs-font-sans-serif);
    --plan-price-font: var(--bigimpactfont);
    --plan-price-font: var(--big-display-font);

    --fontbase-lg: 18px;
    --fontbase: 16px;
    --fontbase-sm-14: 14px;
    --fontbase-sm-12: 12px;
    --fontbase-sm-10: 10px;
	--plan-price-size: 80px;
    --fontbase-sm-head: 1.2rem;
    --si-btn-font-size: 0.875rem;
	--plan-card-details-font: 80%;
	--plan-term-bill-size: 32px;
	--font-weight-600: 600;
    --grid-border-radius: 5px;
    --unfold-card-radius: 5px;
    --lotus-card-radius-sm: .375rem;
    --primary-btn-border-radius: .375rem;
    --primary-btn-border-radius: .375rem;
    --si-btn-border-radius: 0.375rem;
    --filter-label-border-radius: 3px;
    --filter-zip-input-border-radius: 3px;
}

/* FONT FAMILY
--------------------------------------------------------------*/
.superwidget-container {
    font-family: var(--bs-body-font-family);
}
    .superwidget-container .plan-row .plan-name h4{
        font-family:  var(--big-display-font);
    }
        .superwidget-container .card-row-simple .card-body strong.h3 {
            font-family: var(--big-display-font);
        }
    .superwidget-container .plan-row-inner-container.plan-row-details-container .plan-pricing strong,
    .superwidget-container .featured-plan .plan-name h3 {
        font-family: var(--plan-price-font);
    }
    .superwidget-container .btn {
        font-family: var(--si-btn-font-family);
    }
    .superwidget-container  .plan-row .plan-badge{
        font-family:  var(--big-display-font);
    }
    .superwidget-container  .card-row-simple .plan-save-percentage{
    }
        .superwidget-container  .plan-row .plan-save-percentage strong{
            font-family: var(--plan-price-font);
        }

@media (max-width: 768px) {
    .superwidget-container  .plan-save-percentage strong,
    .superwidget-container  .plan-row .plan-save-percentage strong{
        font-family: 'Open Sans', sans-serif;
    }
}
/* featured plan */
@media (min-width: 767px) {
		.superwidget-container .featured-plan .plan-type em::before,
		.superwidget-container .featured-plan .plan-cancellation-fee em::before{
			font-family: var(--widget-icon-font);
		}	
}
/* FONT SIZE
--------------------------------------------------------------*/
.superwidget-container  .plandetails-container .plan-details-section h6{
    font-size: var(--fontbase-sm-head);
}
.superwidget-container  .card-row-simple .plan-topper {
    font-size: var(--fontbase);
}
    .superwidget-container .plan-row-inner-container .plan-name-features h3.h4 {
        font-size: 80%;
    }
    .superwidget-container .card-row-simple .card-body strong.h3 {
        font-size: var(--plan-price-size);
    }
    .superwidget-container .plan-row-inner-container .plan-pricing em,
    .superwidget-container .plan-row-inner-container .plan-pricing h6 {
        font-size: var(--fontbase-sm-12);
    }
        .superwidget-container .plan-row-inner-container .plan-pricing em {
            font-size: var(--fontbase-sm-12);
        }
        .superwidget-container .plan-row-inner-container.plan-row-details-container .plan-pricing strong {
            /*font-size: 200%;*/
        }
        .superwidget-container .card-row-simple .card-body .plan-pricing em {
        font-size: 80%;
    }
    .superwidget-container .card-row-simple .card-body .plan-pricing sup {
        font-size: 60%;
    }
    .superwidget-container .card-row-simple .price-term-bill-mrc ul {
        font-size: var(--plan-card-details-font);
    }
    .superwidget-container .plan-row .plan-save-percentage{
    }
        .superwidget-container .plan-row .plan-save-percentage strong{
            font-size: var(--plan-term-bill-size);
        }
/* city tab wrapper */
.content-tab-wrapper-superwidget {
}
.superwidget-container .content-tab-wrapper-superwidget .tab {
		font-size: var(--fontbase-sm-head);
	}
/* filter */
.superwidget-container li.filter-sort-item.filter-zipcode input[type=text] {
    font-size: var(--fontbase);
}
.superwidget-container .zip-widget-container #zipSearch .input-group label,
.superwidget-container .zip-widget-container #zipSearch .input-group input,
.superwidget-container .zip-widget-container #zipSearch .input-group button.btn {
    font-size: var(--fontbase-lg);
}
.superwidget-container li.filter-sort-item .filter-sort-list .filter-group.container a {
    font-size: var(--fontbase-sm-12);
}
.superwidget-container li.filter-sort-item .filter-sort-list ul#filterMarketList label em,
.superwidget-container li.filter-sort-item .filter-sort-list label.gas-market em,
.superwidget-container li.filter-sort-item .filter-sort-list label.electricity-market em {
    font-size: var(--fontbase-sm-10);
}
.superwidget-container li.filter-sort-item .usage-selector-container .kwh-usage {
    font-size: var(--fontbase-lg);
}
.superwidget-container label.filter-label-top,
.superwidget-container li.filter-sort-item label {
    font-size: var(--fontbase-sm-14);
}
/* button */
.superwidget-container .btn {
    font-size: var(--si-btn-font-size);
}
    .superwidget-container .btn.primary-btn {
        font-size: 1rem;    
    }
@media (min-width:992px){
    .superwidget-container label.filter-label-top,
    .superwidget-container li.filter-sort-item label {
        font-size: var(--fontbase);
    }
}
@media (min-width:768px){
    .superwidget-container .plan-row-inner-container .plan-name-features h3.h4 {font-size: 100%;}
    .superwidget-container .grid-container .plan-row-inner-container.plan-row-details-container .plan-pricing strong,
    .superwidget-container .superwidget-container .featured-plan .plan-row-details-container .plan-name h3 {
        font-size: var(--plan-term-bill-size);
    }
    .superwidget-container .grid-container .plan-row-inner-container.plan-row-details-container .plan-pricing.plan-price strong {
        font-size: var(--plan-price-size);      
    }
}
@media (max-width: 1200px) {
    .superwidget-container .m-dd li.filter-sort-item label{
        font-size: var(--fontbase);
    }
}
@media (max-width: 768px) {
    .superwidget-container .card-row-simple .plan-topper{
        background-color: var(--cyan-pale);
    }

    .superwidget-container .card-row-simple .card-body strong.h3 {
        font-size: 30px;
    }

    
    .superwidget-container .plan-row-inner-container .plan-pricing em {
        font-size: var(--fontbase-sm-10);
    }
    .superwidget-container .plan-row-inner-container.plan-row-details-container .plan-pricing strong {
        font-size: 18px !important;
    }
    .plan-row .plan-save-percentage{
    }
    .superwidget-container .plan-row .plan-save-percentage strong{
            font-size: var(--bs-body-font-size);
        }
    .superwidget-container .plan-row-inner-container.plan-row-details-container .plan-price .h3 {
		font-size: 30px !important;
	}
    .superwidget-container .content-tab-wrapper-superwidget .tab {
		font-size: 16px;
	}
    /* button */
    .superwidget-container .plan-row .plan-action .btn {
        font-size: var(--fontbase-sm-12);
    }
}
@media (max-width: 320px){
    .superwidget-container .card-row-simple .card-body strong.h3 {
        font-size: 45px;
    }
    .superwidget-container .plan-row-inner-container.plan-row-details-container .plan-pricing strong {
        font-size: 18px;
    }
    /* filter */
    .superwidget-container .m-dd li.filter-sort-item label {
        font-size: var(--fontbase-sm-14);
    }
    .superwidget-container label.filter-label-top, li.filter-sort-item label{
        font-size: var(--fontbase-sm-12);
    }
    .superwidget-container .content-tab-wrapper-superwidget .tab {
		font-size: 14px;
	}
}
/* featured plan */
@media (max-width: 768px) {
		.superwidget-container .featured-plan .plan-row-inner-container .plan-name-features {
		}
			.superwidget-container .featured-plan .plan-name h3 {
				font-size: var(--fontbase-lg);
			}
			.superwidget-container .featured-plan .plan-name-features .plan-description ul li {
				font-size: var(--fontbase-sm-14);
			}

}
/* featured provider */
.superwidget-container .featured-provider .flag {
    font-size: 2rem;
}
.superwidget-container .featured-provider .plan-save-percentage {
	font-size: var(--fontbase-sm-12);
}
@media (max-width: 768px) {
	.superwidget-container .featured-provider .flag {
		font-size: 30px;
	}
	.superwidget-container .featured-provider .plan-action .btn {
        font-size: var(--fontbase-sm-12);
    }
	.superwidget-container .featured-provider .h6{
		font-size: 14px;
	}
}

/* ELEMENTS & COLORS
--------------------------------------------------------------*/
.si-blue{
    color: var(--si-blue);
}
.bg-cyan-pale-light{
    background-color: var(--cyan-pale-light);
}
.bg-gray-light{
    background-color: var(--gray-light);
}
/* button */
.superwidget-container .btn.primary-btn {
    background-color: var(--orange);
    color: var(--black);
    border-color: var(--orange);
}
.superwidget-container .btn.primary-btn:hover {
        background-color: transparent;
        color: var(--black);
        border-color: var(--black); 
    }
    .superwidget-container .btn.secondary-btn {
    background-color: var(--gray-light);
}
    .superwidget-container .btn.secondary-btn:hover {
        background-color: transparent;
        color: var(--black);
        border-color: var(--black); 
    }

.superwidget-container .btn.cyan-btn-hollow {
    color: var(--secondary-btn-color);
    border-color: var(--secondary-btn-border-color);
    background-color: var(--secondary-btn-background-color);
}
    .superwidget-container .btn.cyan-btn-hollow:hover {
        color: var(--secondary-btn-hover-color);
        border-color: var(--secondary-btn-hover-border-color);
        background-color: var(--secondary-btn-hover-background-color);  
    }
    .superwidget-container .planCall a.btn {
    color: var(--orange);
    border-color: var(--orange);
}
/* only if there is no .primary-btn button */
.superwidget-container .plan-action:has(.planCall):not(:has(.primary-btn)) .planCall a {
    background-color: var(--orange);
    color: var(--black);
    border: var(--si-btn-border-width) solid var(--orange);
}
.superwidget-container .plan-action:has(.planCall):not(:has(.primary-btn)) .planCall a:hover {
        background-color: transparent;
        color: var(--black);
        border-color: var(--black);
    }
.superwidget-container .btn.blue-btn-hollow:hover{
    border-color: transparent;
    color: var(--si-gray-900);
    background-color:transparent;
}
/* link */
.superwidget-container .plan-row .plan-details-link{
    background-color: var(--cyanpale);
    border-color: var(--cyanpale);
    color: var(--erllcblue);
}
.superwidget-container .plan-row .plan-details-link:hover{
        background-color: transparent;
        border-color: var(--cyanpale);
    }
    .superwidget-container .plan-document a {
    color: var(--blue-dark);
}
	
@media (max-width:980px){
    .superwidget-container .card-row-simple .card-body{
        background-color: var(--cyanultrapale) !important;
    }
    .superwidget-container .m-alternating-background{
        background-color: var(--cyanultrapale);
    }
    .superwidget-container .m-alternating-background .card-body{
            background-color: var(--white) !important;
        }

}

/* badge */ 
.superwidget-container .badge {
    color: var(--badge-color);
    background-color: var(--badge-background-color);
}
.superwidget-container .badge.badge-green {
        color: var(--badge-green-color);
        background-color: var(--badge-green-background-color);
    }
/* zip box */
.superwidget-container .zip-widget-container #zipSearch {
    background-color:var(--zipbox-background);
}
    .superwidget-container .zip-widget-container #zipSearch .input-group label {
        color: var(--zipbox-color);
    }   
/* zip modal */
.superwidget-container .zip-modal .modal-content .market-button-list li {
    color: var(--white);
    background-color: var(--erllcblue);
}
    .superwidget-container .zip-modal .modal-content .market-button-list li:hover {
        color: var(--erllcblue);
        background-color: transparent;
    }
    .superwidget-container .zip-modal .modal-shade {
        background-color: rgba(0, 0, 0, .25);
    }

.superwidget-container .zip-modal{}
    .superwidget-container .zip-modal .btn {
		background-color: var(--erllcblue) ;
		color: var(--white);
		border-color: var(--erllcblue);
	}
	.superwidget-container .zip-modal .btn:hover {
		background-color: transparent;
		color:var(--erllcblue);
		border-color: var(--erllcblue);
	}
/* grid container */
.superwidget-container .grid-outer-container {
    background-color: var(--grid-background);
}
.superwidget-container .plan-row {
        background-color: var(--white);
    }
    .superwidget-container .more-plans .btn.cyan-btn-hollow {
        border-color:var(--erllcblue);
        color:var(--erllcblue);
    }
    .superwidget-container .rates-date {
        color: var(--update-color);
    }

/* plan card & plan row */

.superwidget-container .plan-row .plan-item {
    border-top-color: var(--cyan);
}
.superwidget-container .grid-container .plan-item.plan-even {
		background-color: var(--plan-row-background-even);
	}
	.superwidget-container .grid-container .plan-item.plan-odd {
		background-color: var(--plan-row-background-odd);
	}
    .superwidget-container .plandetails-unfold-content {
    background-color: var(--unfold-content-background);
}
    .plan-odd .plandetails-unfold-content {
        background-color: var(--unfold-content-background);
    }
        .plandetails-container .plan-details-section {
            border-bottom: 1px solid var(--unfold-details-border-color);
        }
        .superwidget-container .card-row-simple .price-term-bill-mrc ul li strong,
			.card-row-simple .price-term-bill-mrc ul li strong span,
			.card-row-simple .price-term-bill-mrc ul li span
        {
            color: var(--si-gray-900);
        }
        .superwidget-container .plandetails-container ul li::before,
        .superwidget-container .plandetails-container ul li a::before {
            color: var(--unfold-link);
        }
    .superwidget-container .plandetails-container .plan-credits-fees em {
        color: var(--unfold-details-em);
    }
    .superwidget-container .plandetails-container table.table.table-striped tr th {
        background: var(--unfold-table-head-even);
        color: var(--black);
    }
        .superwidget-container .plan-odd .plandetails-container table.table.table-striped tr td {
            border-bottom-color: var(--unfold-table-row-border-odd);
        }
        .superwidget-container .plan-even .plandetails-container table.table.table-striped tr td {
            border-bottom-color: var(--unfold-table-row-border-even);
        }
        .superwidget-container .card-row-simple .card-body .company-rating i::before,
        .superwidget-container .plan-row-inner-container .plan-rating .stars-container i::before {
            color: var(--star-color);
        }
        .superwidget-container .card-row-simple .card-body .company-rating i.half-star::before,
        .superwidget-container .plan-row-inner-container .plan-rating .stars-container i.half-star::before {
            background: linear-gradient(to left, var(--star-none-color) 50%, var(--star-color) 50%);
            -webkit-text-fill-color: transparent;
        }
        .superwidget-container .card-row-simple .card-body .company-rating i.no-star::before,
        .superwidget-container .plan-row-inner-container .plan-rating .stars-container i.no-star::before {
            color: var(--star-none-color);
        }
		.superwidget-container .plan-name {
			color: var(--plan-name-color);
		}
		.superwidget-container .plan-row-inner-container .plan-term .h3,
		.superwidget-container .plan-row-inner-container .plan-bill .h3,
        .superwidget-container .superwidget-container .featured-plan .plan-row-inner-container .plan-type .h3,
        .superwidget-container .superwidget-container .featured-plan .plan-row-inner-container .plan-cancellation-fee .h3,
        .superwidget-container .superwidget-container .featured-plan .plan-row-inner-container .plan-name .h3{
			color:var(--black);
		}
        .superwidget-container .plan-row-inner-container .plan-name-features h3.h4 {
            color: var(--black);
        }
        .superwidget-container .plan-row-inner-container .plan-name-features .plan-description ul li {
            color: var(--black);
        }
            .superwidget-container .plan-row-inner-container .plan-pricing em,
            .superwidget-container .plan-row-inner-container .plan-pricing h6 {
                color: var(--black);
            }
            .superwidget-container .plan-row-inner-container .plan-pricing strong {
            color: var(--erllcblue);
        }
        .superwidget-container .card-row-simple .plan-save-percentage{
            color: var(--si-gray-900);
            background-color: var(--light-green);
        }
            .superwidget-container .plan-row .plan-save-percentage strong{
                color: var(--bs-success-text)
            }
/* city tab wrapper */
.content-tab-wrapper-superwidget {
}
    .superwidget-container .content-tab-wrapper-superwidget .tab {
		color: var(--grayevil);
	}

	.superwidget-container .content-tab-wrapper-superwidget .tab::before {
		border: 2px solid var(--grayevil);
	}

	.superwidget-container .content-tab-wrapper-superwidget .tab.active {
		background-color: var(--cyanultrapale);
		color: var(--black);
	}

	.superwidget-container .content-tab-wrapper-superwidget .tab.active::before {
		background-color: var(--si-link-color);
		border-color: var(--si-link-color);
	}

	.superwidget-container .content-tab-wrapper-superwidget .tab-ct-content {
		background: var(--cyanultrapale);
	}

@media (max-width:768px){
    .superwidget-container .plan-row-inner-container .plan-view-details .btn-container label.btn {
        background-color: transparent;
        border-color: transparent;
    }
    .superwidget-container .card-row-simple .plan-save-percentage{
    }
    .superwidget-container .plan-row .plan-save-percentage{
        color: var(--si-gray-900);
        background-color: var(--light-green);
    }
    .superwidget-container .plan-row .plan-save-percentage strong{
            color: var(--black) !important;
        }
    .superwidget-container .content-tab-wrapper-superwidget .tab.active,
    .superwidget-container .content-tab-wrapper-superwidget .tab-ct-content {
		background-color: var(--cyanultrapale);
	}
}
/* recommended plans layout */
.superwidget-container .card-row-simple .plan-card {
    background-color: transparent;
}
    .superwidget-container .card-row-simple .plan-topper {
        color: var(--erllcblue);
    }
    .superwidget-container .card-row-simple .card-body {
        background-color: var(--plan-card-background);
    }
    .superwidget-container .card-row-simple .card-body strong.h3 {
        color: var(--erllcblue);
    }
    .superwidget-container .card-row-simple .card-body .plan-pricing em {
        color: var(--plan-head-color);
    }
    .superwidget-container .card-row-simple .card-body .plan-name h3 {
        color: var(--black);
    }
    .superwidget-container .card-row-simple .price-term-bill-mrc ul {
        color: var(--plan-card-view-details-font-color);
    }
    .superwidget-container .plan-details-action label.btn {
        color: var(--plan-card-view-details-font-color);
    }
    .superwidget-container .plan-details-action label.btn:hover {
        background-color:var(--plan-card-view-details-hover-color);
    }
@media (max-width: 768px) {
    .superwidget-container .card-row-simple .plan-details-action label.btn {
       /* border: 2px solid var(--plan-card-view-details-border-color);*/
        color: var(--plan-card-view-details-font-color);
    }
    /*.plan-details-action {
        border-top: 1px solid var(--plan-card-view-details-border-color);
    }*/
        .superwidget-container .plan-details-action label.btn::before {
            color:var(--plan-card-details-font-color);
        }
    .superwidget-container .card-row-simple .card-body .plan-pricing em {
        color: var(--black);
    }
    /* change layout on mobile*/
    .superwidget-container .card-row-simple .plan-topper {
        border-top: 1px solid var(--gray-light);
        border-left: 1px solid var(--gray-light);
        border-right: 1px solid var(--gray-light);
    }
    .superwidget-container .card-row-simple .card-body{
        border-left: 1px solid var(--gray-light);
        border-right: 1px solid var(--gray-light);
        border-bottom: 1px solid var(--gray-light);
    }
    .superwidget-container .card-row-simple .card-body .plan-pricing,
    .superwidget-container .plan-row-inner-container .plan-price {
        border-left: 1px solid var(--gray-light);
    }
    .superwidget-container .card-row-simple .plan-static-content .price-term-bill-mrc{
        padding-bottom: 20px;
        border-bottom: 1px solid var(--gray-light);
    }
    .superwidget-container .card-row-simple .plan-static-content .price-term-bill-mrc{
        border-bottom: 1px solid var(--gray-light);
    }
        .superwidget-container .card-row-simple .plan-static-content .price-term-bill-mrc .card-plan-description{
            border-top: 1px solid var(--gray-light);
        }
        .superwidget-container .grid-container .plan-row-inner-container.plan-row-details-container .plan-bill ul li,
		.superwidget-container .grid-container .plan-row-inner-container.plan-row-details-container .plan-term ul li{
			color: var(--black);
		}
    .superwidget-container .plan-row .plan-action .planCall{
        color: var(--si-gray-900);
    }

}
.superwidget-container input.modal-plan-check:checked + .plan-card + .plandetails-modal .plandetails-modal-back {
    background-color: var(--modal-background);
}
.superwidget-container .plandetails-modal-content .modal-plan-head {
    background-color: var(--modal-head-background);
}
    .superwidget-container .plandetails-modal-content .modal-plan-head h5.h3 {
        color: var(--modal-head-font-color);
    }
    .superwidget-container .plandetails-modal-content .card-body {
        background-color: var(--modal-content-background);
    }
    .superwidget-container .plandetails-modal-content a:hover {
        color: var(--modal-link-hover-color);
    }
.superwidget-container .modal-order-footer {
    background-color: var(--modal-footer-background);
}
    .superwidget-container .plandetails-modal-content label.modal-close:hover {
        background-color: var(--modal-close-hover-background);
    }
    .superwidget-container .plandetails-modal-content label.modal-close::before {
        color: var(--modal-close-text-color);
    }
    .superwidget-container .plandetails-modal-content label.modal-close:hover::before {
        color: var(--modal-close-hover-text-color);
    }
/* recommended plan cards */
.superwidget-container .recommended-plan-card{
    background-color: var(--si-blue);
    color: var(--white);
}   
/* sponsored and recommeded */
.superwidget-container .plan-row .plan-badge__text {
    color: var(--white);
}
    .superwidget-container .plan-row .sponsored{
        background-color: var(--erllcblue50);
        color: var(--white) !important;
    }
    .superwidget-container .plan-row .recommended{
        background-color: var(--cyanpale);
        color: var(--erllcblue);
    }
     .superwidget-container .plan-row .recommended .plan-badge__text { 
            color: var(--erllcblue);
        }
/* filter */
.superwidget-container .grid-head-filter-sort {
    background-color: var(--erllcblue);
}
    .superwidget-container ul.grid-head-filter {
        background-color: var(--erllcblue);
    }
    .superwidget-container label.filter-label-top,
        li.filter-sort-item label {
            color:var(--white);
        }
        .superwidget-container label.filter-label-top,
        .superwidget-container li.filter-sort-item label.filter-label {
                border:1px solid var(--filter-label-color);
            }
            .superwidget-container label.filter-label-top:hover,
            .superwidget-container li.filter-sort-item label.filter-label:hover {
                background-color: var(--filter-label-color);
                color:var(--filter-label-color-alt);
            }
            .superwidget-container li.filter-sort-item.filter-item-disabled label.filter-label:hover {
                background-color: transparent;
                color: var(--filter-label-color);
            }
            .superwidget-container li.filter-sort-item .filter-sort-list {
                background-color: var(--filter-label-color);
            }
            .superwidget-container li.filter-sort-item .filter-sort-list label {
                    color: var(--erllcblue);
                }
                .superwidget-container li.filter-sort-item .filter-sort-list label:hover {
                        background-color: var(--filter-label-hover);
                    }
                    .superwidget-container li.filter-sort-item .filter-sort-list label::before {
                        color: var(--filter-check-negative-color);
                    }
                    .superwidget-container li.filter-sort-item .filter-sort-list input:checked + label::before {
                        color: var(--filter-check-positive-color);
                    }
                    .superwidget-container li.filter-sort-item .filter-sort-list .filter-group.container {
                        color: var(--filter-label-color-alt);
                    }
                    .superwidget-container li.filter-sort-item .filter-sort-list ul#filterMarketList label em,
                    .superwidget-container li.filter-sort-item .filter-sort-list label.gas-market em,
                    .superwidget-container li.filter-sort-item .filter-sort-list label.electricity-market em {
                        color:var(--filter-utility-text-color);
                    }
            .superwidget-container li.filter-sort-item input:checked + label.filter-label {
                background-color: var(--filter-label-color);
                color: var(--erllcblue);
            }
                .superwidget-container li.filter-sort-item.filter-item-disabled input:checked + label {
                    background-color: transparent;
                    color: var(--filter-label-color);
                }
            .superwidget-container li.filter-sort-item.filter-zipcode::after {
                color: var(--filter-zip-icon-color);
            }
            .superwidget-container li.filter-sort-item.filter-zipcode input[type=text] {
                color: var(--black);
                background: var(--white);
            }
            .superwidget-container li.filter-sort-item.filter-zipcode .btn.zip-icon {
                color: var(--primary-btn-color);
                border-color: var(--primary-btn-border-color);
                background-color: var(--primary-btn-background-color);
            }
                .superwidget-container li.filter-sort-item.filter-zipcode .btn.zip-icon::after {
                    color: var(--primary-btn-color);
                }
            .superwidget-container li.filter-sort-item .usage-selector-container .kwh-usage {
                color: var(--erllcblue);
            }
                .superwidget-container li.filter-sort-item .usage-selector-container .usage-selector .selector-btn {
                    background-color: transparent;
                    color: var(--erllcblue);
                }
                .superwidget-container li.filter-sort-item .usage-selector-container .usage-selector .selector-btn:hover {
                    background-color: var(--filter-usage-btn-color);
                    color: var(--erllcblue);
                }
@media (min-width:576px){
    .superwidget-container label.filter-label-top {}
    .superwidget-container input:checked + label.filter-label-top {
        background-color: var(--filter-label-color);
        color: var(--filter-label-color-alt);
    }
    .superwidget-container .plan-details-action {
        border-top: 1px solid var(--plan-card-view-details-border-color);
    }
}
@media (min-width:1200px){
    .superwidget-container input:checked + label.filter-label-top + ul.grid-head-filter,
    ul.grid-head-filter {
        background-color: transparent; 
    }
}
/* responsive */
@media (max-width: 1200px) {
    .superwidget-container .m-dd li.filter-sort-item label{
        color:var(--white);
    }
    .superwidget-container li.filter-sort-item .filter-sort-list ul label {
        color:var(--black);
    }
}
@media (max-width: 768px) {
    .superwidget-container .grid-outer-container {
        background-color: transparent;
    }
    .superwidget-container plan-row .plan-details-link{
        color: var(--black);
    }
    .superwidget-container .plan-row .sponsored{
        
    }
    .superwidget-container .plan-row .plan-badge__text{
            
        } 
    /* filter */
    .superwidget-container .grid-head-filter-sort{
		background-color: transparent;
	}
    .superwidget-container label.filter-label-top, li.filter-sort-item label{
			color: var(--black);
		}
		.superwidget-container label.filter-label-top, .superwidget-container li.filter-sort-item label.filter-label {
			background-color: var(--filter-label-color);
			color: var(--black);
		}
		.superwidget-container li.filter-sort-item.filter-zipcode input[type=text] {
			border-color: var(--black);
            box-shadow: inset 0 0 10px var(--gray-lighter);
		}
		.superwidget-container i.filter-sort-item.filter-zipcode input::placeholder {
			color: var(--black);
		}
		.superwidget-container input:checked + label.filter-label-top + ul.grid-head-filter,
		.superwidget-container ul.grid-head-filter{
			background-color: var(--filter-label-color);
		}
}
@media (max-width: 360px){
    .superwidget-container .plan-row .plan-details-link {
        --si-btn-bg: transparent;
        /*background-color: transparent;*/
        color: var(--plan-card-view-details-font-color);
    }
        .superwidget-container .plan-row-inner-container .plan-view-details .btn-container label.btn::after{
            color: var(--plan-card-view-details-font-color);
        }
}
/* featured plan 
-----------------------------------------------*/
.superwidget-container .featured-plan{
 	background-color: var(--white);
}
		.superwidget-container .featured-plan .btn-info {
			background-color: transparent;
			border-color: transparent;
		}
		.superwidget-container .featured-plan .plan-details-link:hover {
			color:var(--black);
		}
		.superwidget-container .featured-plan .btn.blue-btn-hollow:hover {
			border-color: transparent;
			color: var(--black);
			background-color: transparent;
		}
	
@media (min-width: 767px) {
	.superwidget-container .featured-plan{
		background-color: var(--grid-background);
	}
	.bg-featured-plan-mutedblueback{}
		.bg-featured-plan-mutedblueback .superwidget-container .featured-plan{
			background-color: var(--mutedblueback);
		}
			
}
@media (max-width: 768px) {
		.superwidget-container .featured-plan .plan-row-inner-container .plan-name-features {
			border-top: 1px solid var(--gray-light);
		}
		.superwidget-container .featured-plan .plan-provider {
			background-color: var(--unfold-content-background);
		}
		.superwidget-container .featured-plan .plan-rating {
			background-color: var(--unfold-content-background);
		}	

}
/* featured provider */
section.bg-gray-lighter:has(.container div .grid-outer-container div.featured-provider){
	background-color:var(--gray-lighter);
}
.grid-outer-container:has(div.featured-provider){
	background-color: transparent;
}
.superwidget-container .featured-provider .flag {
	background-color: transparent;
	color: var(--erllcblue);
}
.superwidget-container .featured-provider .btn.secondary-btn{
	background: transparent;
}
.superwidget-container .featured-provider blockquote {
	background-color: transparent;
}
	.superwidget-container .featured-provider .provider-blockquote{
		border-top:1px solid var(--plan-card-view-details-border-color);
	}
 /* ROUNDED CORNERS
--------------------------------------------------------------*/
.superwidget-container .card-row-simple .plan-topper{
    border-radius: var(--filter-zip-input-border-radius) var(--filter-zip-input-border-radius) 0 0;
}
.superwidget-container .plandetails-modal-content label.modal-close {
    border-radius: 100vw;
}
.superwidget-container .recommended-plan-card{
    border-radius: 6px 0 0 0;
}
/* city tab wrapper */
.superwidget-container .content-tab-wrapper-superwidget {
}
.superwidget-container .content-tab-wrapper-superwidget .tab {
		border-radius: 5px 5px 0 0;
	}
/* filter */

.superwidget-container li.filter-sort-item.filter-zipcode .btn.zip-icon {
    border-radius: 100vw;
}
.superwidget-container li.filter-sort-item .usage-selector-container .usage-selector .selector-btn {
    border: 2px solid var(--erllcblue);
    border-radius: 100vh;
}
.superwidget-container li.filter-sort-item .filter-sort-list {
    border-radius: var(--filter-zip-input-border-radius) 0 var(--filter-zip-input-border-radius) var(--filter-zip-input-border-radius);
}
@media (max-width: 1200px) {
    .superwidget-container .grid-head-filter-sort {
            border-radius: 5px 5px 0 0;
        }
    }
@media (max-width: 768px) {
    .superwidget-container li.filter-sort-item .filter-sort-list {
        border-radius: var(--filter-zip-input-border-radius) 0 var(--filter-zip-input-border-radius) var(--filter-zip-input-border-radius);
    }
    .superwidget-container .commodity-options li.filter-sort-item .filter-sort-list {
        border-radius: 0 var(--filter-zip-input-border-radius) var(--filter-zip-input-border-radius) var(--filter-zip-input-border-radius);
    }
}
/* featured plan */
.superwidget-container .superwidget-container .featured-plan{
	border-radius: var(--grid-border-radius);
}	

/* IMAGE BACKGROUND & ICONS
--------------------------------------------------------------*/

/* featured provider */
section:has(.container div .grid-outer-container div.featured-provider){
	background-size: 100%;
	background-position: bottom right;
	background-repeat: no-repeat;
}
    section.bg-e-g:has(.container div .grid-outer-container div.featured-provider){
        background-image: url(/images/designer/bg-el-gas.jpg);
    }
    section.bg-e:has(.container div .grid-outer-container div.featured-provider){
        background-image: url(/images/designer/bg-el.jpg);
    }
    section.bg-g:has(.container div .grid-outer-container div.featured-provider){
        background-image: url(/images/designer/bg-gas.jpg);
    }
@media (max-width: 768px) {
    section.bg-e-g:has(.container div .grid-outer-container div.featured-provider),
    section.bg-e:has(.container div .grid-outer-container div.featured-provider),
    section.bg-g:has(.container div .grid-outer-container div.featured-provider){
        background-image: none;
        background-color:var(--cyan-pale-light);
        padding-top:0;
        padding-bottom: 0;
        border-bottom: 1px solid var(--white);
    }
    section.bg-e-g .grid-outer-container:has(div.featured-provider),
    section.bg-e .grid-outer-container:has(div.featured-provider),
    section.bg-g .grid-outer-container:has(div.featured-provider){
        padding-top:0;
    }
    section:has(.container div .grid-outer-container div.featured-provider) .featured-provider-info{
        background-color: #fff;
        background-size: 250%;
        background-position: bottom right;
        background-repeat: no-repeat;
    }
        section.bg-e-g:has(.container div .grid-outer-container div.featured-provider) .featured-provider-info,
        section.bg-e:has(.container div .grid-outer-container div.featured-provider) .featured-provider-info,
        section.bg-g:has(.container div .grid-outer-container div.featured-provider) .featured-provider-info{
            padding-top: 50px;
            padding-bottom: 100px;
        }
            section.bg-e-g:has(.container div .grid-outer-container div.featured-provider) .featured-provider-info{
                background-image: url(/images/designer/bg-el-gas.jpg);
            }
            section.bg-e:has(.container div .grid-outer-container div.featured-provider) .featured-provider-info{
                background-image: url(/images/designer/bg-el.jpg);
            }
            section.bg-g:has(.container div .grid-outer-container div.featured-provider) .featured-provider-info{
                background-image: url(/images/designer/bg-gas.jpg);
            }
}

.superwidget-container .featured-provider blockquote::before,
.superwidget-container .featured-provider blockquote::after {
	content:"";
	display: block;
	position:absolute;
	width: 60px;
	height:50px;
	background-image: url("/images/icons/quote-start.svg");
	background-size: contain;
	background-repeat: no-repeat;
	z-index: -1;
}
.superwidget-container .featured-provider blockquote::before{
	background-image: url("/images/icons/quote-start.svg");
	top: 0;
	left: -10px;
}
.superwidget-container .featured-provider blockquote::after {
	background-image: url("/images/icons/quote-end.svg");
	background-size: contain;
	background-repeat: no-repeat;
	bottom: 0;
	right: 0;
}
@media (max-width: 768px) {
    .superwidget-container .featured-provider blockquote::before, .superwidget-container .featured-provider blockquote::after {
        width: 40px;
        height: 50px;
    }
}