/*--------------------------------------------------------------
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: #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;
    --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
--------------------------------------------------------------*/
body {
    font-family: var(--bs-body-font-family);
}
    .plan-row .plan-name h4{
        font-family:  var(--big-display-font);
    }
        .card-row-simple .card-body strong.h3 {
            font-family: var(--big-display-font);
        }
    .plan-row-inner-container.plan-row-details-container .plan-pricing strong {
        font-family: var(--plan-price-font);
    }
    .btn {
        font-family: var(--si-btn-font-family);
    }
    .plan-row .plan-badge{
        font-family:  var(--big-display-font);
    }
    .card-row-simple .plan-save-percentage{
    }
        .plan-row .plan-save-percentage strong{
            font-family: var(--plan-price-font);
        }

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

    .card-row-simple .card-body strong.h3 {
        font-size: 30px;
    }
    .plan-row-inner-container .plan-pricing em {
        font-size: var(--fontbase-sm-10);
    }
    .plan-row-inner-container.plan-row-details-container .plan-pricing strong {
        font-size: 35px;
    }
    .plan-row .plan-save-percentage{
    }
        .plan-row .plan-save-percentage strong{
            font-size: var(--bs-body-font-size);
        }
    .content-tab-wrapper-superwidget .tab {
		font-size: 16px;
	}
    /* button */
    .plan-row .plan-action .btn {
        font-size: var(--fontbase-sm-12);
    }
}
@media (max-width: 360px){
    .card-row-simple .card-body strong.h3 {
        font-size: 45px;
    }
    .plan-row-inner-container.plan-row-details-container .plan-pricing strong {
        font-size: 35px;
    }
    /* filter */
    .m-dd li.filter-sort-item label {
        font-size: var(--fontbase-sm-14);
    }
    label.filter-label-top, li.filter-sort-item label{
        font-size: var(--fontbase-sm-12);
    }
    .content-tab-wrapper-superwidget .tab {
		font-size: 14px;
	}
}
/* ELEMENTS & COLORS
--------------------------------------------------------------*/
.si-blue{
    color: #00AEEF;
}
.bg-badge-light-green{
    background-color: var(--light-green);
}
/* button */
.btn.primary-btn {
    background-color: var(--orange);
    color: var(--black);
    border-color: var(--orange);
}
    .btn.primary-btn:hover {
        background-color: transparent;
        color: var(--black);
        border-color: var(--black); 
    }

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

}

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

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

/* plan card & plan row */

.plan-row .plan-item {
    border-top-color: var(--cyan);
}
	.grid-container .plan-item.plan-even {
		background-color: var(--plan-row-background-even);
	}
	.grid-container .plan-item.plan-odd {
		background-color: var(--plan-row-background-odd);
	}
.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);
        }
        .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);
        }
        .plandetails-container ul li::before,
        .plandetails-container ul li a::before {
            color: var(--unfold-link);
        }
    .plandetails-container .plan-credits-fees em {
        color: var(--unfold-details-em);
    }
    .plandetails-container table.table.table-striped tr th {
        background: var(--unfold-table-head-even);
        color: var(--black);
    }
        .plan-odd .plandetails-container table.table.table-striped tr td {
            border-bottom-color: var(--unfold-table-row-border-odd);
        }
        .plan-even .plandetails-container table.table.table-striped tr td {
            border-bottom-color: var(--unfold-table-row-border-even);
        }
        .card-row-simple .card-body .company-rating i::before,
        .plan-row-inner-container .plan-rating .stars-container i::before {
            color: var(--star-color);
        }
        .card-row-simple .card-body .company-rating i.half-star::before,
        .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;
        }
        .card-row-simple .card-body .company-rating i.no-star::before,
        .plan-row-inner-container .plan-rating .stars-container i.no-star::before {
            color: var(--star-none-color);
        }
		.plan-name {
			color: var(--plan-name-color);
		}
		.plan-row-inner-container .plan-term .h3,
		.plan-row-inner-container .plan-bill .h3{
			color:var(--black);
		}
        .plan-row-inner-container .plan-name-features h3.h4 {
            color: var(--black);
        }
        .plan-row-inner-container .plan-name-features .plan-description ul li {
            color: var(--black);
        }
            .plan-row-inner-container .plan-pricing em,
            .plan-row-inner-container .plan-pricing h6 {
                color: var(--black);
            }
        .plan-row-inner-container .plan-pricing strong {
            color: var(--erllcblue);
        }
        .card-row-simple .plan-save-percentage{
            color: var(--si-gray-900);
            background-color: var(--light-green);
        }
            .plan-row .plan-save-percentage strong{
                color: var(--bs-success-text)
            }
/* city tab wrapper */
.content-tab-wrapper-superwidget {
}
	.content-tab-wrapper-superwidget .tab {
		color: var(--grayevil);
	}

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

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

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

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

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

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

 /* ROUNDED CORNERS
--------------------------------------------------------------*/
.card-row-simple .plan-topper{
    border-radius: var(--filter-zip-input-border-radius) var(--filter-zip-input-border-radius) 0 0;
}
.plandetails-modal-content label.modal-close {
    border-radius: 100vw;
}
.recommended-plan-card{
    border-radius: 6px 0 0 0;
}
/* city tab wrapper
-----------------------------------------------*/
.content-tab-wrapper-superwidget {
}
	.content-tab-wrapper-superwidget .tab {
		border-radius: 5px 5px 0 0;
	}
/* filter */

li.filter-sort-item.filter-zipcode .btn.zip-icon {
    border-radius: 100vw;
}
li.filter-sort-item .usage-selector-container .usage-selector .selector-btn {
    border: 2px solid var(--erllcblue);
    border-radius: 100vh;
}
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) {
        .grid-head-filter-sort {
            border-radius: 5px 5px 0 0;
        }
    }
@media (max-width: 768px) {
    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);
    }
    .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);
    }
}