@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@100;400&display=swap');

body {
    font-family: "Inter", serif;
    font-size: 14px;
    color: #4B5563;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    line-height: normal;
    background: #F8FAFC;
}

ul, li {
    list-style: none;
    padding: 0;
    margin: 0;
}

* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: var(--hover-color);
}

    a:hover {
        color: var(--hover-color);
    }

:root {
    --primary-color: #4B5563;
    --secondary-color: #374151;
    --hover-color: #0891B2;
    --link-color: #0891B2;
    --dark-color: #0A0A0A;
    --content-color: #64748B;
    --content-color-light: #6B7280;
    --h1-dark-color: #274552;
    --h1-color: #274552;
    --h2-color: #274552;
    --h3-color: #0A0A0A;
    --h1-size: 24px;
    --h2-size: 24px;
    --font-10: 10px;
    --font-12: 12px;
    --font-14: 14px;
    --font-16: 16px;
    --font-18: 18px;
    --font-20: 20px;
    --font-22: 22px;
    --font-24: 24px;
    --font-26: 26px;
    --font-28: 28px;
    --font-30: 30px;
    --font-family-inter: "Inter", serif;
    --primary-button: #2D788D;
    --primary-button-hover: #5793a3;
    --secondary-button: #2A5260;
    --secondary-button-hover: #2d7487;
    --color-white: #fff;
    --color-black: #fff;
    --select-hover: #101724;
    --gray-background: #F9F9F9;
    --accrdion-border: #CBD5E1;
    --blue-light-background: #F0FAFB;
    --dark-blue: #1E3A5F;
    --form-label-color: #111928;
    --checkbox-color: #171717;
    --gree-dark-text: #274552;
    --green-dark-bg: #2B6273;
    --light-gray-bg: #f9fafb;
    --error-msg-color: red;
    --error-msg-size: 13px;
}

.font-weight-500 {
    font-weight: 500;
}

.font-weight-600 {
    font-weight: 600;
}

.container {
    max-width: 1368px;
    padding-left: 15px;
    padding-right: 15px;
}


/*----------Header css-----------*/
.header {
    padding: 10px 0px;
    background: #eef6f8;
    width: 100%;
    z-index: 99;
    position: fixed;
    top: 0px;
    left: 0px;
}
body {
    padding-top:60px; 
}
.header.sticky {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.call-link {
    background: url(../images/call-icon.svg) no-repeat 0px 2px;
    color: var(--link-color);
    font-size: 16px;
    font-weight: 500;
    padding-left: 22px;
}

    .call-link:hover {
        color: var(--link-color);
        text-decoration: underline;
    }
/*----------End Header css-----------*/

span.multiselect-native-select select {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px -1px -1px -3px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    left: 50%;
    top: 30px;
}

.rec-plans-section {
    position: relative;
    padding: 35px 0px 25px 0px;
    overflow: hidden;
    background: linear-gradient(180deg, #EEF7F9 0%, #D9EDF0 100%);
    min-height: 740px;
}

    .rec-plans-section .container {
        position: relative;
        z-index: 2;
    }

    .rec-plans-section:before {
        background: url(../images/banner-dotted.png) no-repeat;
        width: 289px;
        height: 289px;
        position: absolute;
        right: 50px;
        bottom: -25px;
        z-index: 1;
        content: "";
        opacity: 0.8;
    }

    .rec-plans-section:after {
        background: url(../images/banner-dotted.png) no-repeat;
        width: 289px;
        height: 289px;
        position: absolute;
        left: 50px;
        bottom: -25px;
        z-index: 1;
        content: "";
        opacity: 0.8;
    }

.rec-plans-filter {
    padding: 0;
    max-width: 480px;
    margin: auto;
    border-radius: 8px;
    border: 1px solid rgba(45, 120, 141, 0.20);
    background: #EEF7F9;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    
}

.rec-plans-filter-inner {
    padding: 8px 15px;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.rec-plans-section .kwh-filter label {
    color: rgba(45, 120, 141, 0.70);
    font-weight: 500;
    border-radius: 0;
    border-bottom: 2px solid transparent;
}

.rec-plans-section .kwh-filter input:checked + label {
    background: transparent;
    border-radius: 0;
    border-bottom: 2px solid var(--primary-button);
    color: var(--primary-button);
}

.rec-plans-section .kwh-filter label:hover {
    background-color: transparent;
    color: var(--primary-button);
}

.rec-plans-section .zipcode-dropdown .dropdown button.dropdown-toggle {
    background-color: transparent;
    color: var(--primary-button);
    border-radius: 6px;
    border: 1px solid #D9F0F4;
    background: #EEF7F9;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}

    .rec-plans-section .zipcode-dropdown .dropdown button.dropdown-toggle:hover {
        background-color: #ddf2f5;
    }

    .rec-plans-section .zipcode-dropdown .dropdown button.dropdown-toggle:after {
        background: url(../images/down-arrow-green.svg) no-repeat -5px 2px;
    }

.rec-plans-section .zipcode-dropdown .dropdown button.dropdown-toggle {
    background: url(../images/map-icon-green.svg) no-repeat 3px 10px;
}

.rec-plans-section .zipcode-dropdown .dropdown-menu {
    background: #d9f0f4;
    width: 300px;
    padding: 35px 35px;
    left: -85px !important;
}

    .rec-plans-section .zipcode-dropdown .dropdown-menu ul {
        display: flex;
    }

        .rec-plans-section .zipcode-dropdown .dropdown-menu ul li {
            padding-bottom: 0;
        }

            .rec-plans-section .zipcode-dropdown .dropdown-menu ul li:first-child {
                padding-right: 10px;
            }

.rec-plans-section .zipcode-textbox {
    color: var(--dark-color);
    border-color: var(--dark-color);
}

.rec-plans-section .zipcode-submit {
    background: #778284;
    border-color: #778284;
}

.rec-plans-section .zipcode-textbox {
    background: url(../images/map-icon-green.svg) no-repeat 5px center
}

.content-section {
    text-align: center;
    padding: 25px 0px 20px 0px;
}

    .content-section h1 {
        color: var(--h1-color);
        font-size: var(--h1-size);
        font-weight: 700;
    }

    .content-section p {
        font-size: var(--font-18);
        font-weight: 500;
        color: var(--secondary-color);
    }

        .content-section p a {
            color: var(--secondary-color);
        }

            .content-section p a:hover {
                text-decoration: underline;
            }

.recommended-plans {
    border-radius: 12px;
    border: 1px solid #F3F4F6;
    background: #FFF;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px -1px rgba(0, 0, 0, 0.10);
    transition-duration: 0.2s;
}

    .recommended-plans:hover {
        box-shadow: 0 8px 20px 0px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
        transition-duration: 0.2s;
    }

.rec-plan-title {
    border-bottom: 1px solid #F3F4F6;
    background: var(--primary-button);
    padding: 7px 5px;
    text-align: center;
    color: var(--color-white);
    font-size: var(--font-14);
    border-radius: 12px 12px 0px 0px;
    min-height:31px;
}

.recommended-plans-content {
    padding: 25px;
}

.rec-plan-name {
    color: var(--gree-dark-text);
    font-size: var(--font-16);
    text-align: center;
    font-weight: 500;
    padding-bottom: 0px;
}

.rec-plan-price {
    color: var(--gree-dark-text);
    font-size: 36px;
    text-align: center;
    font-weight: 700;
    padding-bottom: 15px;
}

.rec-plan-type {
    color: var(--gree-dark-text);
    font-size: var(--font-14);
    text-align: center;
    padding-bottom: 10px;
}

.rec-plan-bill-estimate, .rec-plan-term {
    color: var(--gree-dark-text);
    text-align: center;
    font-size: var(--font-14);
    font-weight: 500;
    padding-bottom: 10px;
}

.rec-choose-plan-button {
    border-radius: 6px;
    background: var(--primary-button);
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -4px rgba(0, 0, 0, 0.10);
    font-weight: 500;
    text-align: center;
    min-width: 250px;
    margin: auto;
    padding: 13.5px 16px 14.5px 16px;
    color: #fff;
    display: table;
}

    .rec-choose-plan-button:hover {
        background: var(--primary-button-hover);
    }

.rec-green-energy {
    color: var(--primary-color);
    padding-bottom: 15px;
    background: url(../images/energy-icon.svg) no-repeat;
    padding-left: 25px;
}

    .rec-green-energy span {
        float: right;
    }

.rec-weeknights {
    color: var(--primary-color);
    padding-bottom: 15px;
    background: url(../images/usage-icon.svg) no-repeat;
    padding-left: 25px;
}

    .rec-weeknights span {
        float: right;
    }

.rec-more-details {
    background: url(../images/more-icon.svg) no-repeat;
    padding-left: 20px;
}

    .rec-more-details:hover, .rec-phone:hover {
        text-decoration: underline;
    }

.rec-phone {
    background: url(../images/call-icon.svg) no-repeat;
    padding-left: 20px;
}

.plan-logo-rating {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height:70px;
    padding:15px 0px;
}

.rec-plan-logo {
    text-align: center;
    padding:0px 0px 0px 0px;
}

    .rec-plan-logo img {
        max-width: 150px;
        height: auto;
        width: auto !important;
        margin: auto;
    }

.plans-more-details {
    display: flex;
    padding: 0px 0px 0px 0px;
    justify-content: space-between;
    border-top: 1px #f3f3f3 solid;
    padding-top: 15px;
    margin-top:15px;
}

.owl-theme .owl-dots .owl-dot span {
    background: #aeafb1;
}

.owl-theme .owl-dots .owl-dot.active span {
    background: #171717;
}

.rec-plans-slider .owl-stage-outer {
    padding-bottom: 20px;
}

/********** Rating css **********/
.rating-listview {
    margin: auto;
    display: table;
    padding-bottom: 5px;
}

.rating-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rating-number {
    padding-left: 5px;
}

.rating {
    border: none;
    float: left;
    position: relative;
    background: url(../images/star.svg) repeat-x;
    width: 89px;
    height: 15px;
    position: relative;
}

.rating-active {
    position: absolute;
    left: 0px;
    background: url(../images/star-active.svg) repeat-x;
    height: 17px;
}

.rating .star1 {
    width: 20%;
}
.rating .star1-1 {
    width: 22%;
}
.rating .star1-2 {
    width: 24%;
}
.rating .star1-3 {
    width: 26%;
}
.rating .star1-4 {
    width: 28%;
}

.rating .star1-5 {
    width: 32%;
}
.rating .star1-6 {
    width: 34%;
}
.rating .star1-7 {
    width: 36%;
}
.rating .star1-8 {
    width: 38%;
}
.rating .star1-9 {
    width: 39%;
}

.rating .star2 {
    width: 40%;
}
.rating .star2-1 {
    width: 42%;
}
.rating .star2-2 {
    width: 44%;
}
.rating .star2-3 {
    width: 46%;
}
.rating .star2-4 {
    width: 48%;
}
.rating .star2-5 {
    width: 50%;
}
.rating .star2-6 {
    width: 52%;
}
.rating .star2-7 {
    width: 54%;
}
.rating .star2-8 {
    width: 56%;
}
.rating .star2-9 {
    width: 58%;
}

.rating .star3 {
    width: 60%;
}
.rating .star3-1 {
    width: 62%;
}
.rating .star3-2 {
    width: 64%;
}
.rating .star3-3 {
    width: 66%;
}
.rating .star3-4 {
    width: 68%;
}

.rating .star3-5 {
    width: 73%;
}
.rating .star3-6 {
    width: 75%;
}
.rating .star3-7 {
    width: 77%;
}
.rating .star3-8 {
    width: 78%;
}
.rating .star3-9 {
    width: 79%;
}

.rating .star4 {
    width: 80%;
}
.rating .star4-1 {
    width: 87%;
}
.rating .star4-2 {
    width: 89%;
}
.rating .star4-3 {
    width: 90%;
}
.rating .star4-4 {
    width: 92%;
}
.rating .star4-5 {
    width: 93%;
}
.rating .star4-6 {
    width: 94%;
}
.rating .star4-7 {
    width: 95%;
}
.rating .star4-8 {
    width: 96%;
}
.rating .star4-9 {
    width: 98%;
}

.rating .star5 {
    width: 100%;
}




/**********************All Available Plans*********************/
.all-available-plans-section {
    padding: 40px 0px;
}

    .all-available-plans-section .rec-plans-filter-inner {
        padding: 20px 15px;
    }

.section-content {
    padding-bottom: 20px;
}

    .section-content h2 {
        color: var(--h2-color);
        font-size: 24px;
        font-weight: 700;
        line-height: 32px;
    }

    .section-content p {
        color: var(--primary-color);
        font-size: var(--font-14);
        font-weight: 400;
        line-height: 20px;
        min-height: 36px;
        margin-bottom: 0px;
        padding-bottom: 1rem;
    }

.av-plans-filter-wrapper {
    background: #fff;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
    border-radius:8px;
    margin-bottom: 40px;
    position: sticky;
    top: 60px;
    z-index: 10;
}

    .av-plans-filter-wrapper .rec-plans-filter {
        max-width: 100%;
        background: var(--green-dark-bg);
        height:78px;
    }

        .av-plans-filter-wrapper .rec-plans-filter .rec-plans-filter-inner {
            display: flex;
            justify-content: center;
        }

.filter-result {
    padding: 15px 20px;
}

.showing-number {
    color: var(--content-color-light);
    font-size: var(--font-14);
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
}

.filter-button {
    border-radius: 6px;
    border: 1px solid #E5E5E5;
    background: #FFF;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    color: var(--dark-color);
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px; /* 133.333% */
    margin-left: 3px;
}

    .filter-button:hover, .filter-button:focus, .filter-button:active {
        background: #e8e8e8;
        border-color: #cecece;
        color: #000;
    }

.available-plans-item {
    border-radius: 12px;
    border: 1px solid #F3F4F6;
    background: #FFF;
    margin-bottom: 25px;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px -1px rgba(0, 0, 0, 0.10);
    transition-duration: 0.2s;
}

    .available-plans-item:hover {
        box-shadow: 0 8px 20px 0px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
        transition-duration: 0.2s;
        border-color: #dbeafe;
    }

        .available-plans-item:hover .av-plans-heading {
            background: #f7faff;
        }

            .available-plans-item:hover .av-plans-heading h3 {
                color: #0e7490;
            }

.av-plans-heading {
    display: flex;
    padding: 22px 25px 20px 25px;
    align-items: flex-start;
    background: rgba(249, 250, 251, 0.50);
    border-radius: 12px 12px 0px 0px;
}

    .av-plans-heading h3 {
        color: var(--h3-color);
        font-size: 24px;
        font-weight: 600;
        letter-spacing: -0.4px;
        margin-bottom: 0;
    }

.av-plans-details {
    padding: 25px;
}

.plans-logo-more {
  
    padding: 0px 5px;
    text-align: center;
}

.av-plans-logo {
    padding-bottom: 8px;
}

    .av-plans-logo img {
        width: 125px;
        height: auto;
    }

.chariot-energy {
    font-size: var(--font-14);
    color: var(--content-color-light);
    padding-bottom: 20px;
}

.plans-more-info {
    position: relative;
    padding: 10px 15px 15px 40px;
    border-radius: 6px;
    min-height: 110px;
}

    .plans-more-info:hover {
        background: var(--light-gray-bg);
    }

.av-plans-small-title {
    position: relative;
    padding-left: 0px;
    color: #164E63;
    font-size: var(--font-14);
    padding-bottom: 5px;
    padding-left: 25px;
    margin-left: -25px;
}

.av-plans-typr {
    font-size: var(--font-14);
    color: var(--content-color-light);
    padding-bottom: 5px;
}

.av-plans-price {
    font-size: var(--font-18);
    color: var(--dark-color);
}

.av-plans-kwh-price {
    font-size: var(--font-18);
    color: var(--dark-color);
    letter-spacing: -0.4px;
}

.tag-icon {
    background: url(../images/tag-icon.svg) no-repeat;
    background-size: 20px;
}

.term-icon {
    background: url(../images/calander-icon.svg) no-repeat;
    background-size: 20px;
}

.dollar-icon {
    background: url(../images/switch-camera.svg) no-repeat; 
    background-size: 20px;
    line-height: 19px;
}

.av-plans-feature {
    padding: 10px 15px 15px 15px;
    border-radius: 6px;
    min-height: 110px;
}

    .av-plans-feature:hover {
        background: var(--light-gray-bg);
    }

    .av-plans-feature li {
        padding-bottom: 15px;
        padding-left: 30px;
        padding-top:3px;
    }

.renewable-icon {
    background: url(../images/energy-icon.svg) no-repeat;
    background-size: 20px;
}

.free-night-icon {
    background: url(../images/usage-icon.svg) no-repeat;
    background-size: 20px;
}

.deposit-icon {
    background: url(../images/deposit-icon.svg) no-repeat;
    background-size: 20px;
}

.av-plans-button-group li:first-child {
    padding-bottom: 15px;
}

.av-choose-plan-btn {
    border-radius: 6px;
    background: var(--primary-button);
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -4px rgba(0, 0, 0, 0.10);
    font-weight: 500;
    text-align: center;
    min-width: 162px;
    margin: auto;
    padding: 13px 16px 14px 16px;
    color: #fff;
    transition-duration: 0.3s;
    display: table;
}

    .av-choose-plan-btn:hover, .rec-choose-plan-button:hover {
        background: var(--primary-button-hover);
        color: #fff;
        transition-duration: 0.3s;
        text-decoration: none;
    }

.av-plans-phone {
    font-size: 16px;
    color: #4B5563;
    margin: auto;
    display: table;
}

    .av-plans-phone img {
        margin-right: 5px;
    }

    .av-plans-phone:hover {
        color: var(--hover-color);
        text-decoration: underline;
    }

/***********************Footer CSS*************/
.footer {
    background: #242435;
    padding: 135px 0px;
    color: #fff;
}

.footer-links h3 {
    border-bottom: 3px #EF5B4E solid;
    font-size: 24px;
    font-weight: 600;
    padding-bottom: 10px;
    display: inline-block;
}

    .footer-links h3.cities-title {
        min-width: 220px;
    }

.footer-links ul {
    margin-top: 5px;
}

    .footer-links ul li {
        padding-bottom: 10px;
    }

        .footer-links ul li a {
            font-size: 18px;
            font-weight: 600;
            color: #fff;
            transition-duration: 0.3s;
        }

            .footer-links ul li a:hover {
                color: var(--hover-color);
                transition-duration: 0.3s;
            }

.cities-footer-links {
    display: flex;
}

    .cities-footer-links ul:first-child {
        width: 50%;
    }

    .cities-footer-links ul {
        width: 25%;
    }

.newsletter-form {
    padding-top: 20px;
    display: flex;
}

    .newsletter-form .newsletter-textbox {
        border-radius: 6px 0px 0px 6px;
        border: 1px solid #DEE2E6;
        background: #fff;
        font-size: 18px;
        color: #343A40;
        padding: 12px 10px;
        width: 75%;
    }

.newsletter-submit {
    background: #EF5B4E url(../images/arrow-icon.svg) no-repeat 90% center;
    border-radius: 0px 6px 6px 0px;
    font-size: 18px;
    color: #fff;
    padding: 0px 40px 0px 15px;
    border: 0px;
    transition-duration: 0.2s;
}

    .newsletter-submit:hover {
        background-color: #d04d41;
        transition-duration: 0.2s;
    }

.footer-bottom {
    padding-top: 40px;
    font-family: "Barlow", serif;
}

.footer-bottom-links li {
    display: inline-block;
    vertical-align: top;
    padding-right: 50px;
    font-size: 12px;
    line-height: 20px;
}

    .footer-bottom-links li a {
        font-size: 12px;
        text-decoration: underline;
        color: #fff;
    }

        .footer-bottom-links li a:hover {
            color: var(--hover-color);
        }

.socialmedia {
    float: right;
}

    .socialmedia li {
        display: inline-block;
        padding-left: 15px;
    }

        .socialmedia li a {
            color: #000;
            background: #EF5B4E;
            width: 40px;
            height: 40px;
            border-radius: 100%;
            display: block;
            text-align: center;
            line-height: 40px;
            transition-duration: 0.3s;
            font-size: 17px;
        }

            .socialmedia li a:hover {
                color: #fff;
                transition-duration: 0.3s;
                background: #ca4b40;
            }

                .socialmedia li a:hover svg path {
                    color: #fff;
                    fill: #fff;
                }

/************Filter section css--****************/
.kwh-filter {
    width: fit-content;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: no-wrap;
}

    .kwh-filter input {
        display: none;
    }

    .kwh-filter label {
        font-family:var(--font-family-inter);
        padding: 9px 15px;
        cursor: pointer;
        font-size: 14px;
        color: #9CA3AF;
        margin: 0px 2px;
        transition: all 0.2s;
    }

        .kwh-filter label:last-of-type {
            border-right: 0;
        }

        .kwh-filter label:hover {
            background: #1F2937;
            color: #fff;
            border-radius: 6px;
        }

    .kwh-filter input:checked + label {
        background: #1F2937;
        color: #fff;
        border-radius: 6px;
    }

.zipcode-dropdown {
    padding-right: 20px;
}

    .zipcode-dropdown .dropdown button.dropdown-toggle {
        border: 1px var(--secondary-button) solid;
        background: var(--secondary-button) url(../images/map-icon.svg) no-repeat 15px center;
        color: #fff;
        border-radius: 6px;
        box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
        font-size: 14px;
        font-weight: normal;
        padding: 7px 15px 7px 35px;
        font-family: var(--font-family-inter);
    }

        .zipcode-dropdown .dropdown button.dropdown-toggle:hover {
            background-color: var(--secondary-button-hover);
            border-color: var(--secondary-button-hover);
        }

        .zipcode-dropdown .dropdown button.dropdown-toggle:after {
            background: url(../images/down-arrow.svg) no-repeat;
            width: 14px;
            height: 11px;
            border: 0px;
            vertical-align: 2.1px;
        }

    .zipcode-dropdown .dropdown-menu {
        padding: 15px;
        border-radius: 6px;
        background: #242435;
        border: 0px;
        width: 200px;
        padding-bottom: 25px;
        box-shadow: 0px 8px 35px 0px rgba(0, 0, 0, 0.16);
    }

        .zipcode-dropdown .dropdown-menu li {
            padding-bottom: 16px;
        }

.zipcode-textbox {
    border-radius: 6px;
    border: 1px solid #CBD5E1;
    color: #fff;
    font-size: var(--font-14);
    font-weight: 500;
    width: 100%;
    background: transparent url(../images/map-icon.svg) no-repeat 15px center;
    padding: 10px 15px 10px 35px;
}

.zipcode-submit {
    border-radius: 6px;
    border: 1px solid #334155;
    background: #0F172A;
    color: #fff;
    font-size: var(--font-14);
    font-weight: 500;
    width: 100%;
    padding: 10px 15px 10px 15px;
}

    .zipcode-submit:hover {
        background: #000;
    }

.custom-selectbox .form-multi-select-option.form-multi-select-option-with-checkbox.form-multi-selected:before {
    background: url(../images/check-icon.svg) no-repeat center;
    width: 24px;
    right: 5px;
}
.av-plans-listing-wrper {
    min-height:600px;
}
.av-plans-filter-inner .zipcode-dropdown {
    padding-right: 5px;
}

.av-plans-filter-inner .custom-selectbox {
    padding-right: 5px;
    padding-left: 5px;
    min-width:115px;
    
}

.custom-selectbox .btn-group .multiselect {
    border: 1px var(--secondary-button) solid;
    background: var(--secondary-button);
    color: #fff;
    border-radius: 6px;
    font-size: 14px;
    min-width: 110px;
    text-align: left;
    padding: 7px 30px 7px 10px;
    height:37px;
}

    .custom-selectbox .btn-group .multiselect:hover {
        background: var(--secondary-button-hover);
        border-color: var(--secondary-button-hover);
    }

.custom-selectbox .dropdown-toggle::after {
    background: url(../images/down-arrow.svg) no-repeat;
    width: 17px;
    height: 16px;
    border: 0px;
    position: absolute;
    top: 10px;
    right: 10px;
}

.custom-selectbox .multiselect-container li label {
    padding-left: 10px !important;
    width: 100%;
    border-radius: 5px;
    padding: 10px 5px;
}

    .custom-selectbox .multiselect-container li label:hover {
        background: var(--select-hover);
    }

.custom-selectbox .multiselect-container {
    border-radius: 6px;
    background: #242435;
    padding: 15px;
    width: 280px;
    box-shadow: 0px 8px 35px 0px rgba(0, 0, 0, 0.16);
}

    .custom-selectbox .multiselect-container li {
        padding-bottom: 0px;
    }

        .custom-selectbox .multiselect-container li a {
            color: #fff;
            font-size: 14px;
            display: block;
            position: relative;
            width: 100%;
        }

            .custom-selectbox .multiselect-container li a:hover {
                color: #fff;
            }

.multiselect-container input[type="checkbox"], .multiselect-container input[type="radio"] {
    display: grid;
    place-content: center;
    position: absolute;
    right: 10px;
    appearance: none;
}

    .multiselect-container input[type="checkbox"]::before, .multiselect-container input[type="radio"]::before {
        content: "";
        width: 24px;
        height: 17px;
    }

    .multiselect-container input[type="checkbox"]:checked::before, .multiselect-container input[type="radio"]:checked::before {
        background: url(../images/check-icon.svg) no-repeat center;
        width: 24px;
        right: 5px;
    }


/***************/
.custom-selectbox-light .multiselect-native-select {
    width: 100%;
}

.custom-selectbox-light .btn-group {
    width: 100%;
}

.custom-selectbox-light input[type="radio"]:checked::before {
    background: url(../images/check-icon-dark.svg) no-repeat center;
    background-size: 18px;
    width: 24px;
    right: 5px;
}

.custom-selectbox-light .btn-group .multiselect {
    background: #fff;
    color: #000;
    border-radius: 6px;
    font-size: 1rem;
    min-width: 120px;
    text-align: left;
    padding: 7px 30px 7px 10px;
    border: 1px solid #ced4da;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
}

    .custom-selectbox-light .btn-group .multiselect:hover {
        background: #fff;
    }

.custom-selectbox-light .dropdown-toggle::after {
    background: url(../images/down-arrow-balck.svg) no-repeat;
    width: 17px;
    height: 16px;
    border: 0px;
    position: absolute;
    top: 16px;
    right: 10px;
}

.custom-selectbox-light .multiselect-container li label {
    padding-left: 10px !important;
    width: 100%;
    border-radius: 5px;
    padding: 10px 5px;
}

    .custom-selectbox-light .multiselect-container li label:hover {
        background: #f5f5f5;
    }

.custom-selectbox-light .multiselect-container {
    border-radius: 6px;
    background: #fff;
    padding: 5px;
    width: 100%;
    box-shadow: 0px 8px 35px 0px rgba(0, 0, 0, 0.16);
}

    .custom-selectbox-light .multiselect-container li {
        padding-bottom: 2px;
    }

        .custom-selectbox-light .multiselect-container li a {
            color: #fff;
            font-size: 14px;
            display: block;
            position: relative;
            width: 100%;
        }

            .custom-selectbox-light .multiselect-container li a:hover {
                color: #fff;
            }

        .custom-selectbox-light .multiselect-container li.active label {
            background: #f5f5f5;
        }




.usage-filter-mobile {
    display: none;
}

.filter-section-desktop {
    display: flex;

}

/************End Filter section css--****************/

/*************Modal css****************************/
.modal-content {
    padding: 20px 10px 10px 10px;
}

    .modal-content .modal-header {
        border-bottom: 0px;
        padding-bottom: 0;
        align-items: normal;
        flex-direction:column;
    }

.modal-header .modal-title {
    font-size: 22px;
    color: #0F172A;
    font-weight: 600;
}

.modal-subtitle {
    font-size: 14px;
    padding-top: 0px;
    font-weight: 400;
    opacity: 0.8;
    padding-top:4px;
    line-height:20px;
}

.nav-tabs.custom-tab {
    background: #F1F5F9;
    padding: 5px 5px 6px 5px;
    border: 0px;
    border-radius: 6px;
    justify-content: space-between;
    display: flex;
}

.custom-tab .nav-item {
    width: 33.333%;
}

    .custom-tab .nav-item .nav-link {
        width: 100%;
        color: #334155;
        font-size: 14px;
        font-weight: 500;
        border: 0px;
    }

        .custom-tab .nav-item .nav-link.active {
            border-radius: 3px;
            background: #fff;
            border: 0px;
            color: #0F172A;
        }

.custom-tab-content {
    padding: 20px 0px 0px 0px;
}

.content-block {
    padding-bottom: 20px;
}

    .content-block h4 {
        font-size: var(--font-18);
        font-weight: 600;
        color: var(--h2-color);
        margin-bottom: 10px;
    }

    .content-block p {
        color: var(--content-color);
        font-size: var(--font-14);
        font-style: normal;
        font-weight: 400;
        line-height: 21px; /* 142.857% */
    }

        .content-block p a {
            color: var(--content-color);
        }

            .content-block p a:hover {
                color: var(--link-color);
            }

.listing {
    color: var(--content-color);
    list-style: disc;
}

    .listing li {
        padding-bottom: 10px;
        font-size: var(--font-14);
        position: relative;
        padding-left: 15px;
    }

        .listing li:after {
            background: #64748B;
            width: 4px;
            height: 4px;
            border-radius: 100%;
            position: absolute;
            left: 0px;
            content: "";
            top: 6px;
        }

.price-breakdown {
    background: #F8FAFC;
    padding: 6px;
    border-radius: 5px;
}

    .price-breakdown li {
        display: flex;
        justify-content: space-between;
        padding: 5px;
        color: var(--content-color);
    }

        .price-breakdown li:first-child {
            padding-bottom: 15px;
        }

        .price-breakdown li span {
            width: 50%;
            text-align: left;
        }

.pricing-table {
    border: 1px #E2E8F0 solid;
    border-collapse: collapse;
}

    .pricing-table td, .pricing-table th {
        border: 1px #E2E8F0 solid;
        padding: 8px 16px;
        color: #0F172A;
        font-size: var(--font-16);
        background: #fff;
    }

    .pricing-table tr:hover td {
        background: #F8FAFC;
    }

.priceing-note {
    color: var(--content-color);
    font-size: var(--font-16);
    padding: 10px 0px 0px 0px;
}

.document-list {
    padding-top: 5px;
}

    .document-list li {
        padding-bottom: 20px;
    }

        .document-list li a {
            color: #38A1B6;
            font-size: var(--font-14);
            background: url(../images/file-icon.svg) no-repeat;
            padding-left: 25px;
            padding-bottom: 3px;
            padding-top: 1px;
        }

.modal-header .close {
    margin: 0;
    padding: 0;
    height: 44px;
    width:28px;
    position: absolute;
    top: 15px;
    right: 20px;
    
}


/*************No plas found****************/
.no-plans-found {
    text-align: center;
    padding: 35px 35px 58px 35px;
    border-radius: 12px;
    border: 2px dashed #E5E5E5;
    background: #FFF;
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px -1px rgba(0, 0, 0, 0.10);
}

    .no-plans-found h3 {
        color: var(--h3-color);
        font-size: var(--font-20);
        font-weight: 600;
        padding-top: 16px;
        margin-bottom: 15px;
    }

    .no-plans-found p {
        max-width: 410px;
        color: var(--content-color-light);
        font-size: var(--font-16);
        line-height: 24px;
        margin: auto;
        margin-bottom: 30px;
    }

.no-plans-icon {
    border-radius: 9999px;
    background: #F3F4F6;
    text-align: center;
    margin: auto;
    display: table;
    width: 64px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.button {
    background: var(--primary-button);
    color: var(--color-white);
    font-size: var(--font-16);
    padding: 9px 16px;
    border-radius: 6px;
    border: 0px;
}

    .button:hover {
        background: var(--primary-button-hover);
        color: var(--color-white);
        text-decoration: none;
    }

    .button:disabled,
    .button[disabled] {
        opacity: 0.5;
    }

.reset-filter {
    font-size: var(--font-14);
    background: var(--secondary-button);
    margin-left:5px;
    height:37px;
}

    .reset-filter:hover {
        background: var(--secondary-button-hover);
    }




/***********************Service Enrollment ********************/

.inner-page {
    padding: 50px 0px 25px 0px;
}

.container-small {
    max-width: 1260px;
}

.inner-main-title {
    font-size: 1.25rem;
    color: var(--h1-dark-color);
    font-weight: 700;
    padding-bottom: 0;
    margin-bottom: 50px;
}

.custom-accordion .card-header {
    padding: 0px;
    border: 0px;
}

.custom-accordion {
    border-radius: 6px;
    border: 1px solid var(--accrdion-border);
    box-shadow: 0px 4px 12px 0px rgba(13, 10, 44, 0.06);
    margin-bottom: 15px;
}

    .custom-accordion .card-header h5 {
        background: var(--gray-background);
        padding: 18px 25px;
        margin: 0px;
        width: 100%;
        text-align: left;
        cursor: pointer;
        font-size: var(--font-18);
        color: var(--dark-blue);
        font-weight: 600;
        border-radius: 9px 9px 0px 0px;
        position: relative;
    }

        .custom-accordion .card-header h5:after {
            background: url(../images/up-arrow.svg) no-repeat;
            width: 20px;
            height: 12px;
            position: absolute;
            right: 30px;
            content: "";
            top: 0px;
            bottom: 0px;
            margin: auto;
            transition-duration: 0.2s;
        }

        .custom-accordion .card-header h5.collapsed {
            border-radius: 9px;
        }

            .custom-accordion .card-header h5.collapsed:after {
                transform: rotate(180deg);
                transition-duration: 0.2s;
            }

    .custom-accordion .card-body {
        padding: 25px 25px;
    }

.selected-plan-right {
    display: flex;
    justify-content: space-between;
    padding-bottom: 15px;
    align-items:center;
}

.plans-details-info-logo {
    width: 35%;
}

    .plans-details-info-logo img {
        width: 104px;
        height: auto;
    }

.plans-details-info h6 {
    color: var(--dark-color);
    font-size: var(--font-16);
    font-weight: 500;
    padding-bottom: 0px; 
    width: 65%;
    margin-bottom:0px;
}

.selected-plan-right > h6 span:first-child {
    font-size: 18px
}
.selected-plan-right > h6 {
    line-height: 27px;
}


.helps-icons {
    color: var(--link-color);
    width: 18px;
    display: inline-block;
}

.edit-link {
    font-weight: 500;
    color: var(--link-color);
    text-decoration: underline;
    font-size: var(--font-14);
    margin-top: 10px;
    display: inline-block;
}

.plans-details-extra-info {
    padding: 0px 0px 5px 0px;
}

    .plans-details-extra-info li {
        padding-bottom: 15px;
        font-size: var(--font-14);
        color: var(--dark-color);
    }

        .plans-details-extra-info li strong {
            font-weight: 400;
        }

        .plans-details-extra-info li.charged-info {
            font-size: var(--font-12);
            color: #637381;
            line-height: 20px;
            font-style: italic;
        }

.plans-document-list {
    padding-top: 5px;
}

    .plans-document-list li {
        padding-bottom: 12px;
        position: relative;
        padding-left: 30px;
    }

        .plans-document-list li:after {
            background: url(../images/file-new-icon.svg) no-repeat center;
            display: flex;
            width: 24px;
            height: 24px;
            padding: 2px;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            position: absolute;
            left: 0px;
            content: "";
            top: 0px;
        }

        .plans-document-list li a {
            color: #38A1B6;
            font-size: var(--font-16);
            text-decoration: none;
        }

            .plans-document-list li a:hover {
                text-decoration: underline;
            }

.needhelp-listing li {
    position: relative;
    padding-left: 0px;
    padding-bottom: 0px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: var(--font-16);
}

    .needhelp-listing li:last-child {
        margin-bottom: 0px;
    }
/*
.helps-icons{
	width: 70px;
	height: 70px;
	border-radius: 5px;
	background: var(--blue-light-background);
	position: absolute;
	left: 0px;
	display: flex;
    align-items: center;
    justify-content: center;
}*/
.need-help-ititle {
    font-size: var(--font-16);
    color: var(--primary-color);
    font-weight: 600;
    padding-bottom: 12px;
}

.help-links {
    position: relative;
}


/******************Step form*************/
.stepform .card-header {
    padding: 0px;
    border: 0px;
}

.stepform .card {
    border-radius: 6px !important;
    box-shadow: 0px 4px 12px 0px rgba(13, 10, 44, 0.06);
    margin-bottom: 15px;
    border-bottom: 1px solid var(--accrdion-border) !important;
    overflow: unset;
    padding-bottom: 1px;
}

.stepform .card-header h5 {
    background: var(--gray-background);
    padding: 18px 50px 18px 25px;
    margin: 0px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: var(--font-18);
    color: var(--dark-blue);
    font-weight: 600;
    border-radius: 9px 9px 0px 0px;
    position: relative;
}

    .stepform .card-header h5:hover {
        text-decoration: none;
    }

    .stepform .card-header h5:after {
        background: url(../images/up-arrow.svg) no-repeat;
        width: 20px;
        height: 12px;
        position: absolute;
        right: 30px;
        content: "";
        top: 0px;
        bottom: 0px;
        margin: auto;
        transition-duration: 0.2s;
    }

    .stepform .card-header h5.collapsed {
        border-radius: 9px;
    }

        .stepform .card-header h5.collapsed:after {
            transform: rotate(180deg);
            transition-duration: 0.2s;
        }

.stepform .card-body {
    padding: 25px 25px;
    border-top: 1px solid var(--accrdion-border);
}

.stepform .collapse.show {
    border-top: 1px solid var(--accrdion-border);
}

.form-footer {
    padding-top: 20px;
}

.form-group label {
    margin-bottom: 4px;
    color: var(--form-label-color);
    font-size: var(--font-14);
    font-weight: 500;
}

.w100 {
    width: 100%;
}

.form-check .form-check-label {
    color: var(--content-color-light);
    font-size: var(--font-14);
    line-height: 21px;
}

.radio-buttons {
    padding-top: 5px;
}

    .radio-buttons .form-check-label {
        font-size: 16px;
        color: var(--form-label-color);
    }

.label-message {
    padding-top: 8px;
    font-size: var(--font-12);
}

/****************Check box css************************/
.checkbox-item {
    padding-left: 25px;
    position: relative;
}

    .checkbox-item .form-check-label {
        color: var(--content-color-light);
        line-height: 20px;
    }

.form-check-label input:where([type="checkbox"], .radio-button-item input[type="radio"]) {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    vertical-align: top;
    margin: calc(0.75em - 11px) 0.25rem 0 0;
    border: 1px solid #333;
    border-radius: 3px;
    background: #fff no-repeat center center;
    position: absolute;
    left: 0;
    top: 3px;
}

.radio-button-item input[type="radio"] {
    border-radius: 50%;
}
/*
.form-check-label input:where([type="checkbox"], [type="radio"]):where(:active:not(:disabled), :focus) {
  border-color: #696;
  outline: none;
}*/

.form-check-label input:where([type="checkbox"], .radio-button-item[type="radio"]):disabled {
    background: #eee;
}

.form-check-label input[type="checkbox"]:checked {
    background: #000 url('../images/check-icon.svg') no-repeat center;
    background-size: 14px;
}

.radio-button-item input[type="radio"]:checked {
    border-radius: 100px;
    background: #000000;
    border: 2px #ffffff solid;
    outline: 2px #000 solid;
}

.radio-button-item .form-check-label {
    display: flex;
    align-items: center;
}

.radio-button-item .form-check-input {
    margin-right: 10px;
}

.textbox-relative {
    position: relative;
}

.textbox-icon {
    position: absolute;
    right: 10px;
    top: 10px;
    opacity: 0.5;
}

.form-control {
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
}

/*************************************************************/
.common-pera {
    padding-bottom: 20px;
    line-height: 21px;
}

.verification-tab .nav-tabs.custom-tab {
    background: #f0f0f0;
}

.verification-tab .custom-tab .nav-item {
    width: 50%
}

    .verification-tab .custom-tab .nav-item .nav-link.active {
        outline: none;
    }

.plans-logo-more .rating-section {
    align-items: center;
    justify-content: center;
    padding: 10px 0px 16px 0px;
}


/************************Choose plan popup***************************/
.choose-plan-popup {
    max-width: 425px;
}

.close span {
    font-weight: normal;
}

.choose-plan-popup .modal-content {
    padding: 10px;
    border: 0px;
    border-radius: 10px;
}

.choose-plan-popup .modal-title {
    color: var(--h2-color);
    font-size: 20px;
}

.large-button {
    width: 100%;
    padding: 14px 16px;
}

.choose-plan-popup-content form .form-group:last-child {
    margin-bottom: 0;
}

.house-apartment-buttons {
    display: flex;
}

    .house-apartment-buttons .radio-button-item {
        border: 0px #ddd solid;
        border-radius: 0px;
        text-align: center;
        padding: 18px 15px;
        width: 50%;
        display: block;
        position: relative;
    }

.more-details-button {
    border-radius: 6px;
    border: 1px solid #E5E7EB;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    padding: 8px 15px 8px 15px;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-top: 14px;
    font-weight: 500;
}

.choose-plan-popup .radio-button-item .form-check-input {
    border: 2px #ddd solid;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    outline: none;
    background: transparent;
    cursor: pointer;
}

.choose-plan-popup .radio-button-item input[type="radio"]:checked {
    border: 2px solid var(--primary-button);
    border-radius: 10px;
    outline: none;
    background: rgba(40, 120,141, 0.1);
}

.choose-plan-popup .house-lable {
    font-weight: 500;
}

.modal-backdrop.show {
    opacity: 1;
    background: rgba(0,0,0,.8);
}


/****************Thank you page css********************/
.thankyou-wrapper {
    max-width: 736px;
    margin: auto;
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
}

.thankyou-info {
    text-align: center;
    max-width: 500px;
    margin: auto;
    padding-bottom: 15px;
}

    .thankyou-info h1 {
        font-size: 1.875rem;
        font-weight: 600;
        color: var(--dark-blue);
        margin-bottom: 20px;
    }

    .thankyou-info p {
        font-size: var(--font-16);
        line-height: 26px;
    }

.succes-icon {
    text-align: center;
    padding-bottom: 25px;
    padding-top: 5px;
}

    .succes-icon svg {
        color: #22c55e;
    }

.thankyou-details-listing {
    background: var(--light-gray-bg);
    padding: 1.5rem;
    border-radius: 10px;
}

    .thankyou-details-listing h2 {
        text-align: center;
        font-size: var(--font-18);
        color: var(--dark-blue);
        margin-bottom: 15px;
    }

    .thankyou-details-listing ul {
        padding-left: 20px;
    }

    .thankyou-details-listing li {
        font-size: var(--font-16);
        list-style: disc;
        padding: 0px 0px 10px 0px;
    }

.thankyou-button {
    text-align: center;
    padding: 50px 0px 5px 0px;
}

.feedback-textarea {
    min-height: 75px;
}

.count-characters {
    padding-top: 5px;
    color: var(--content-color-light);
    font-size: var(--font-12);
    text-align: right;
}

.feedback-rating-section {
    text-align: center;
    padding-bottom: 15px;
    padding-top: 20px;
}

    .feedback-rating-section h3 {
        color: var(--content-color-light);
        font-size: var(--font-18);
        font-weight: normal;
    }

.feedback-alert {
    color: #1e40af;
    background: #dbeafe;
    border: #93c5fd 1px solid;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
    line-height: 18px;
}

.feedback-popup .modal-header .modal-title {
    color: var(--dark-blue);
}

.feedback-popup .modal-dialog {
    max-width: 940px;
}

.starrating > input {
    display: none;
}
/* Remove radio buttons */
.starrating > label:before {
    content: "\f006"; /* Star */
    margin: 4px;
    font-size: 32px;
    font-family: FontAwesome;
    display: inline-block;
}

.starrating > label {
    color: #d1d5db;
    font-size: 0;
    cursor: pointer; /* Start color when not clicked */
}

.starrating > input:checked ~ label {
    color: #ffca08;
}
    /* Set yellow color when star checked */
    .starrating > input:checked ~ label:before {
        content: "\f005";
    }

.starrating > input:hover ~ label {
    color: #ffca08;
}
    /* Set yellow color when star hover */
    .starrating > input:hover ~ label:before {
        content: "\f005"; /* Star */
    }

.order-info-list {
    padding-bottom: 15px;
    padding-top: 10px;
}

.order-label {
    font-size: var(--font-16);
    font-weight: 500;
    padding-bottom: 10px;
    color: #111827;
}
.autocomplete-itemsdisplay div {
	padding: 8px 10px;
	border-bottom: 1px #ddd solid;
    cursor:pointer;
}
.autocomplete-itemsdisplay div:hover {
    background: rgba(40, 120,141, 0.1);
}

.order-label-value {
    font-size: var(--font-16);
    font-weight: 400;
    color: var(--primary-color);
}
.autocomplete-itemsdisplay {
	border: 1px #ddd solid;
	height: 150px;
	overflow-y: auto;
	position: relative;
	top: -15px;
}

.what-to-expect {
    font-size: var(--font-16);
    color: var(--primary-color);
    font-weight: 400;
    line-height: 24px;
}

.thankyou-title {
    font-size: var(--font-30);
    font-weight: 600;
    color: var(--dark-color);
    padding-bottom: 24px;
    margin: 0;
}

.thankyou-sub-title {
    font-size: var(--font-20);
    font-weight: 600;
    color: var(--content-color-light);
    padding-bottom: 48px;
}

.thankyoupage .stepform .card-header h5 {
    font-size: var(--font-24);
    font-weight: 600;
    color: var(--dark-color);
}

.thankyoupage .custom-accordion .card-header h5 {
    color: var(--dark-color);
}


/****************End Thank you page css********************/



/**********loader CSS***********/
.loader-wrapper {
    background: rgba(255, 255, 255, 0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 500;
    display:none;
}

.lds-default {
    /* change color here */
    color: #2d788d
}

    .lds-default,
    .lds-default div {
        box-sizing: border-box;
    }

.lds-default {
    display: inline-block;
    width: 80px;
    height: 80px;
    margin: auto;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

    .lds-default div {
        position: absolute;
        width: 6.4px;
        height: 6.4px;
        background: currentColor;
        border-radius: 50%;
        animation: lds-default 1.2s linear infinite;
    }

        .lds-default div:nth-child(1) {
            animation-delay: 0s;
            top: 36.8px;
            left: 66.24px;
        }

        .lds-default div:nth-child(2) {
            animation-delay: -0.1s;
            top: 22.08px;
            left: 62.29579px;
        }

        .lds-default div:nth-child(3) {
            animation-delay: -0.2s;
            top: 11.30421px;
            left: 51.52px;
        }

        .lds-default div:nth-child(4) {
            animation-delay: -0.3s;
            top: 7.36px;
            left: 36.8px;
        }

        .lds-default div:nth-child(5) {
            animation-delay: -0.4s;
            top: 11.30421px;
            left: 22.08px;
        }

        .lds-default div:nth-child(6) {
            animation-delay: -0.5s;
            top: 22.08px;
            left: 11.30421px;
        }

        .lds-default div:nth-child(7) {
            animation-delay: -0.6s;
            top: 36.8px;
            left: 7.36px;
        }

        .lds-default div:nth-child(8) {
            animation-delay: -0.7s;
            top: 51.52px;
            left: 11.30421px;
        }

        .lds-default div:nth-child(9) {
            animation-delay: -0.8s;
            top: 62.29579px;
            left: 22.08px;
        }

        .lds-default div:nth-child(10) {
            animation-delay: -0.9s;
            top: 66.24px;
            left: 36.8px;
        }

        .lds-default div:nth-child(11) {
            animation-delay: -1s;
            top: 62.29579px;
            left: 51.52px;
        }

        .lds-default div:nth-child(12) {
            animation-delay: -1.1s;
            top: 51.52px;
            left: 62.29579px;
        }

@keyframes lds-default {
    0%, 20%, 80%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }
}
/**********loader CSS***********/


.error_message {
    color: var(--error-msg-color);
    font-size: var(--error-msg-size);
    padding-top: 4px;
    padding-bottom: 5px;
}

.singal-item-selectbox .multiselect-container li:first-child {
    display: none !important;
}

.av-plans-filter-inner .zipcode-dropdown .dropdown button.dropdown-toggle {
    background-image: none;
    padding-left: 12px;
}
/***********************************************/
/***************Pagination css*******************/
.pagination-wrapper {
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
}

    .pagination-wrapper .pagination {
        font-size: var(--font-16);
    }

.pagination .page-link {
    color: var(--primary-button);
}

.pagination .page-item.active .page-link {
    background: var(--primary-button);
    border-color: var(--primary-button);
}
.button-light {
    border: 1px solid var(--slate-200, #E2E8F0);
    background: #FFF;
    color: var(--primary-button);
}

.mobile-filter-inner {
    background: #fff;
    padding: 15px;
    border-radius: 5px;
}

.filter-section-row {
    border-bottom: 1px #E2E8F0 solid;
    padding: 25px 0px;
}

    .filter-section-row h5 {
        font-size: var(--font-16);
        color: var(--dark-color);
        font-weight: 500;
    }

.mobile-filter-content p {
    color: var(--content-color);
    font-weight: 400;
    line-height: 24px;
}

.filter-button-group ul {
    width: 100%;
    text-align: center;
}

    .filter-button-group ul li {
        display: inline-block;
        vertical-align: middle;
        padding:0px 2px;
    }

.filter-button {
    color: #164E63;
    font-size: var(--font-14);
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid var(--slate-300, #CBD5E1);
    background: #FFF;
}

.filter-button-group input[type="radio"], .filter-button-group input[type="checkbox"] {
    opacity: 0;
    float:left;
    width: 0;
}

.filter-button-group label {
    color: #164E63;
    font-size: var(--font-14);
    font-weight: 500;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--slate-300, #CBD5E1);
    background: #FFF;
}

.filter-button-group input[type="checkbox"]:checked + label, .filter-button-group input[type="radio"]:checked + label {
    background-color: #E9F3F6;
    border-color: #2D788D;
}
/***********listing*********************/
.filter-button-group-listing {
    border-radius: 6px;
    border: 1px solid var(--slate-300, #CBD5E1);
    background: var(--white, #FFF);
    padding: 6px;
    height: 230px;
    overflow-y: auto;
}

    .filter-button-group-listing ul {
        width: 100%;
        text-align: left;
    }

        .filter-button-group-listing ul li {
            width: 100%;
            position: relative;
            padding-bottom: 6px;
        }

            .filter-button-group-listing ul li: last-child; {
                padding-bottom: 0px;
            }

    .filter-button-group-listing input[type="checkbox"] {
        opacity: 0;
        width: 0;
        position: absolute;
    }

    .filter-button-group-listing label {
        color: #164E63;
        font-size: var(--font-14);
        font-weight: 500;
        padding: 10px 16px;
        border-radius: 6px;
        background: #FFF;
        width: 100%;
        margin-bottom: 0;
    }

    .filter-button-group-listing input[type="checkbox"]:checked + label {
        background: #F8FAFC;
        background-size: 15px;
        border-color: #2D788D;
        position: relative;
    }

        .filter-button-group-listing input[type="checkbox"]:checked + label:after {
            background: url(../images/check-icon-dark.svg) no-repeat right;
            background-size: 18px;
            content: "";
            position: absolute;
            right: 15px;
            width: 18px;
            height: 15px;
        }
/**************Extra CSS***********/
.av-plans-filter-wrapper .filter-result .row.justify-content-between {
    align-items: center;
}
.available-plans-item .av-plans-details .row .plans-column2 {
  
    padding-right: 0;
}
.available-plans-item .av-plans-details .row .plans-column3 {
    padding-right: 0;
}
/*************************************/
.call-button {
    display: none;
}

.hide-desktop {
    display: none;
}

.feature-mobile-item {
    display: none;
}
.mb-25 {
    margin-bottom:25px;
}

.deposit-list {
    padding-left:19px;
    margin-bottom:15px;
}
.deposit-list li{
    list-style: disc;
    margin-bottom: 5px;
}

.terms-service-modal {
    max-width: 565px;
    line-height: 21px;
}
.terms-poup-modal {
    text-align:center;
    padding-top:10px;
}
    .terms-poup-modal .btn-outline-secondary {
        border-radius: 6px;
        border: 1px solid var(--slate-200, #E2E8F0);
        background: #FFF;
        color: #0F172A;
        font-size: 14px;
        font-weight: 500;
        line-height: 24px; 
    }


/*******CSS for Payment Method page*******/
.payment-method-popup .modal-header {
    padding-top: 10px;
}

.button-orange {
    background: #EF5B4E;
}

    .button-orange:hover {
        background: #d04d41
    }

.account-no {
    text-align: center;
    color: #64748B;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px; /* 150% */
    padding-bottom: 30px;
    padding-top: 15px;
}

.payment-method-popup .modal-footer {
    justify-content: left;
    padding: 15px 0px 0px 0px;
    margin-top: 5px;
}

.payment-method2 {
    padding-top: 20px;
}

.max-width-475 {
    max-width: 475px;
}


.thumbsup-icon {
    background: url(../images/thumbsup-icon.svg) no-repeat;
    background-size: 20px;
}
.thumbsup-icon-feature {
    background: url(../images/thumbsup-icon.svg) no-repeat;
    background-size: 20px;
    padding-left: 25px;
    padding-top: 0px;
    padding-bottom: 15px;
}
.thumbsup-icon-feature span {
    float:right;
    }
.payment-type-list {
    display: flex;
    margin-bottom: 15px;
}
.payment-type-list li{
    margin-right:10px;
}
.recaptcha-message {
    /* border: 1px #ddd solid; */
    padding: 9px 51px 10px 13px;
    border-radius: 5px;
    /* max-width: 165px; */
    display: inline;
    color: red;
    position: relative;
}
    .recaptcha-message a {
        background: #5793a3;
        border-radius: 3px;
        height: 40px;
        /* display: block; */
        position: absolute;
        top: 0px;
        right: 0px;
        line-height: 40px;
    }
/**Additional features icons*/
.af-green-energy {
    color: var(--primary-color);
    background: url(../images/green-energy.svg) no-repeat;
  
}

   /* .af-green-energy span {
        float: right;
    }*/

.af-satisfaction {
    color: var(--primary-color);
   
    background: url(../images/satisfaction.svg) no-repeat;
   
}

   /* .af-satisfaction span {
        float: right;
    }*/

.af-low-early-termination {
    color: var(--primary-color);
    
    background: url(../images/low-early-termination.svg) no-repeat;
   
}

   /* .af-low-early-termination span {
        float: right;
    }*/

.af-no-deposit {
    color: var(--primary-color);
   
    background: url(../images/no-deposit.svg) no-repeat;
   
}

   /* .af-no-deposit span {
        float: right;
    }*/

.af-free-usage {
    color: var(--primary-color);
   
    background: url(../images/free-usage.svg) no-repeat;
   
}

    /*.af-free-usage span {
        float: right;
    }*/

.af-bill-credits {
    color: var(--primary-color);
   
    background: url(../images/bill-credits.svg) no-repeat;
   
}

   /* .af-bill-credits span {
        float: right;
    }*/

.af-solar-buyback {
    color: var(--primary-color);
      background: url(../images/solar-buyback.svg) no-repeat;
   
}

   /* .af-solar-buyback span {
        float: right;
    }*/

.af-ev-charging {
    color: var(--primary-color);
       background: url(../images/ev-charging.svg) no-repeat;
    
}

.features-icon-list div span {
    float:right;
}
.features-icon-list div {
    padding-left: 30px;
    padding-top: 3px;
    padding-bottom:15px;
}

.large-btn {
    font-size: 20px;
    padding: 14px 35px;
}

.alert-message {
    border-radius: 8px;
    border: 1px solid #e3e3e3;
    padding: 16px;
    color: #78350F;
    font-size: 16px;
    font-weight: 600;
    line-height: 27px;
    background: #FFFDEE url(../images/alert-triangle.svg) no-repeat 16px 17px;
    padding-left: 50px;
}
    .alert-message p {
        margin-bottom:0px;
    }
    .alert-message a {
        color: #78350F;
        text-decoration: underline;
    }
/****************Maintenance popup css******************/
.maintenance-banner-content .modal-content {
    background: #FEF3F3;
    text-align: center;
    max-width: 425px;
}

.maintenance-banner-content .close span {
    font-weight: 300;
}

.maintenance-title {
    text-align: center;
    color: #BC1C21;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    padding: 0px 20px;
    margin-bottom: 0px;
}

.maintenance-banner {
    text-align: center;
    color: #BC1C21;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px; /* 175% */
}

@media only screen and (max-width: 767px) {
    .maintenance-banner-content {
        display: block;
    }

        .maintenance-banner-content .modal-content {
            max-width: 100%;
        }

        .maintenance-banner-content .modal-header .close {
            right: 15px;
        }
}
/****************End Maintenance popup css******************/

.tdsp_group {
    display: flex;
    justify-content: center;
    gap: 15px;
}
.selected-label {
    font-weight:600;
}


.filter-button-group-listing {
    border-radius: 6px;
    border: 1px solid var(--slate-300, #CBD5E1);
    background: var(--white, #FFF);
    padding: 6px;
    height: 230px;
    max-height: 230px;
    overflow-y: auto; /* Start with auto */
    -webkit-overflow-scrolling: touch;
}

/* When jQuery adds has-scrollbar class */
.filter-button-group-listing.has-scrollbar {
    overflow-y: scroll !important;
}

/* Webkit scrollbar styling */
.filter-button-group-listing::-webkit-scrollbar {
    width: 4px;
    display: block;
}

.filter-button-group-listing::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.filter-button-group-listing::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 3px;
    min-height: 15px;
}

    .filter-button-group-listing::-webkit-scrollbar-thumb:hover {
        background: #64748b;
    }
/****************Plans loader css***************************/
.plans-loader-wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    margin: auto;
    background: rgba(241, 245, 249, 1);
    z-index: 999; 
    
}

.loader-wrapper-inner {
    width: 320px;
    margin: auto;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    height: 180px;
}

.animation-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1rem;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    -webkit-transition: -webkit-transform.3s ease-in-out;
    -moz-transition: -moz-transform.3s ease-in-out;
    -o-transition: -o-transform.3s ease-in-out;
    transition: -webkit-transform.3s ease-in-out;
    transition: -moz-transform.3s ease-in-out;
    transition: -o-transform.3s ease-in-out;
    transition: transform.3s ease-in-out
}

@media(min-width:768px) {
    .animation-wrapper {
        -webkit-transform: scale(1.75);
        -moz-transform: scale(1.75);
        -ms-transform: scale(1.75);
        -o-transform: scale(1.75);
        transform: scale(1.75);
        gap: 1.25rem;
        margin-top: 3rem;
        margin-bottom: 3rem
    }
}

.fetching-text {
    font-weight: 500;
    color: #2d788d;
    -webkit-animation: pulse-text 1.5s ease-in-out infinite;
    -moz-animation: pulse-text 1.5s ease-in-out infinite;
    -o-animation: pulse-text 1.5s ease-in-out infinite;
    animation: pulse-text 1.5s ease-in-out infinite;
    font-size: 1.5rem
}

@media(min-width:768px) {
    .fetching-text {
        font-size: 2.25rem
    }
}

@-webkit-keyframes pulse-text {

    0%, 100% {
        opacity: 1
    }

    50% {
        opacity: .6
    }
}

@-moz-keyframes pulse-text {

    0%, 100% {
        opacity: 1
    }

    50% {
        opacity: .6
    }
}

@-o-keyframes pulse-text {

    0%, 100% {
        opacity: 1
    }

    50% {
        opacity: .6
    }
}

@keyframes pulse-text {

    0%, 100% {
        opacity: 1
    }

    50% {
        opacity: .6
    }
}

.loader-con {
    position: relative;
    width: 300px;
    height: 150px;
    /*overflow: hidden*/
}
.change_plan_cust {
    color: #2D788D;
    position: absolute;
    left: 150px;
    top: 22px;
    text-decoration: underline;
    cursor: pointer
}

.pfile {
    position: absolute;
    bottom: 25px;
    width: 50px;
    height: 60px;
    background: -webkit-linear-gradient(top, #eff8fa 0%, #fff 100%);
    background: -moz-linear-gradient(top, #eff8fa 0%, #fff 100%);
    background: -o-linear-gradient(top, #eff8fa 0%, #fff 100%);
    background: linear-gradient(180deg, #eff8fa 0%, #fff 100%);
    border: 1px solid#d0e8ef;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    -ms-transform-origin: center;
    -o-transform-origin: center;
    transform-origin: center;
    -webkit-animation: flyRight 3s ease-in-out infinite;
    -moz-animation: flyRight 3s ease-in-out infinite;
    -o-animation: flyRight 3s ease-in-out infinite;
    animation: flyRight 3s ease-in-out infinite;
    opacity: 0;
    -webkit-animation-delay: -webkit-calc(var(--i)*.6s);
    -moz-animation-delay: -moz-calc(var(--i)*.6s);
    -o-animation-delay: calc(var(--i)*.6s);
    animation-delay: -webkit-calc(var(--i)*.6s);
    animation-delay: -moz-calc(var(--i)*.6s);
    animation-delay: calc(var(--i)*.6s);
    padding: 6px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px;
    -webkit-box-shadow: 0 4px 12px rgba(45, 120, 141, .1);
    -moz-box-shadow: 0 4px 12px rgba(45, 120, 141, .1);
    box-shadow: 0 4px 12px rgba(45, 120, 141, .1)
}

.pfile-header {
    width: 20px;
    height: 8px;
    background-color: #a8cdd8;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px
}

.pfile-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 3px;
    width: 100%
}

.pfile-line {
    width: 100%;
    height: 4px;
    background-color: #d0e8ef;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px
}

    .pfile-line:nth-child(2) {
        width: 75%
    }

.pfile-line-highlight {
    width: 50%;
    height: 8px;
    margin: 2px 0;
    background-color: #2d788d;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px
}

@-webkit-keyframes flyRight {
    0% {
        left: -25%;
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }

    50% {
        left: 45%;
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 1
    }

    100% {
        left: 105%;
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

@-moz-keyframes flyRight {
    0% {
        left: -25%;
        -moz-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }

    50% {
        left: 45%;
        -moz-transform: scale(2);
        transform: scale(2);
        opacity: 1
    }

    100% {
        left: 105%;
        -moz-transform: scale(1);
        transform: scale(.8);
        opacity: 0
    }
}

@-o-keyframes flyRight {
    0% {
        left: -25%;
        -o-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }

    50% {
        left: 45%;
        -o-transform: scale(2);
        transform: scale(2);
        opacity: 1
    }

    100% {
        left: 105%;
        -o-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}

@keyframes flyRight {
    0% {
        left: -25%;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }

    50% {
        left: 45%;
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
        -o-transform: scale(2);
        transform: scale(2);
        opacity: 1
    }

    100% {
        left: 105%;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        opacity: 0
    }
}
/****************End Plans loader css***************************/


/**************Custom scroll css*************/
.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
    margin-right: 0;
}
/* non-visible scrollbar */
 
.mCS-dir-rtl > .mCSB_inside > .mCSB_container { /* RTL direction/left-side scrollbar */
    margin-right: 0;
    margin-left: 30px;
}

    .mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
        margin-left: 0;
    }
/* RTL direction/left-side scrollbar */

.mCSB_scrollTools { /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */
    position: absolute;
    width: 16px;
    height: auto;
    left: auto;
    top: 0;
    right: -5px; 
    bottom: 0;
}

.mCSB_outside + .mCSB_scrollTools {
    right: -26px;
}
/* scrollbar position: outside */

.mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools,
.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools { /* RTL direction/left-side scrollbar */
    right: auto;
    left: 0;
}

.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
    left: -26px;
}
/* RTL direction/left-side scrollbar (scrollbar position: outside) */

.mCSB_scrollTools .mCSB_draggerContainer { /* contains the draggable element and dragger rail markup */
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: auto;
}

.mCSB_scrollTools a + .mCSB_draggerContainer {
    margin: 20px 0;
}

.mCSB_scrollTools .mCSB_draggerRail {
    width: 2px;
    height: 100%;
    margin: 0 auto;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
}

.mCSB_scrollTools .mCSB_dragger { /* the draggable element */
    cursor: pointer;
    width: 100%;
    height: 30px; /* minimum dragger height */
    z-index: 1;
}

    .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { /* the dragger element */
        position: relative;
        width: 4px;
        height: 100%;
        margin: 0 auto;
        -webkit-border-radius: 16px;
        -moz-border-radius: 16px;
        border-radius: 16px;
        text-align: center;
    }

.mCustomScrollbar {
    -ms-touch-action: pinch-zoom;
    touch-action: pinch-zoom; /* direct pointer events to js */
}

    .mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action {
        -ms-touch-action: auto;
        touch-action: auto;
    }

.mCustomScrollBox { /* contains plugin's markup */
    position: relative;
    overflow: hidden;
    height: 100%;
    max-width: 100%;
    outline: none;
    direction: ltr;
}

.mCSB_container { /* contains the original content */
    overflow: hidden;
    width: auto;
    height: auto;
}


.mCSB_scrollTools .mCSB_draggerRail {
    background-color: transparent;
    filter: "alpha(opacity=40)";
    -ms-filter: "alpha(opacity=40)";
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: #000;
    background-color: rgba(0,0,0,0.4);
    filter: "alpha(opacity=75)";
    -ms-filter: "alpha(opacity=75)";
}

}

.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
    background-color: #000;
    background-color: rgba(0,0,0,0.4);
    filter: "alpha(opacity=85)";
    -ms-filter: "alpha(opacity=85)";
}

.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
    background-color: #000;
    background-color: rgba(0,0,0,0.4);
    filter: "alpha(opacity=90)";
    -ms-filter: "alpha(opacity=90)";
}


/*************End Custom scroll css*****************/

/* .af-ev-charging span {
        float: right;
    }*/
/*************************************************/
/***************Responsive css*********************/
/*************************************************/
/**************Footer css*********/
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap');

:root {
    --font-family-inter: "Inter", serif;
}

.address-row {
    padding-bottom: 6px;
    font-size: 16px;
    font-weight: 400;
    color: #D1D5DB;
}
    .address-row a {
        color: #D1D5DB;
    }
    .address-row a:hover {
        color: #0891b2;
        text-decoration:none;
    }
.footer {
    padding: 80px 0 40px 0;
    background: #263140; 
    color: #fff;
    text-align: left;
    position: relative;
    z-index: 2;
    font-family: var(--font-family-inter);
}

    .footer .container {
        max-width: 1368px;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
        z-index: 3;
    }

  

.footer-middle {
    padding-bottom: 40px;
}

    .footer-middle .row {
        display: flex;
    }

        .footer-middle .row .col-sm-6 {
            width: 50%;
        }

.footer-social-links {
    text-align: left;
    padding-top: 10px;
}

.footer-link-wrapper {
    display: flex;
    width: 100%;
}

.footer-links-column {
    width: 50%;
}

    .footer-links-column h3 {
        color: #FFF;
        font-family: var(--font-family-inter);
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: 28px;
        padding-bottom: 10px;
    }

    .footer-links-column .menu {
        padding-left: 0px;
    }

        .footer-links-column .menu li {
            padding-bottom: 5px;
        }

            .footer-links-column .menu li a {
                font-family: var(--font-family-inter);
                color: #D1D5DB;
                font-family: Inter;
                font-size: 16px !important;
                font-style: normal;
                font-weight: 400;
                line-height: 24px;
                text-decoration: none;
            }

                .footer-links-column .menu li a:hover {
                    text-decoration: underline;
                    color: #2A7D8C;
                }

.zipcode-form {
    display: flex;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    max-width: 600px;
}

    .zipcode-form input[type="text"].usessid {
        width: 70%;
        background: #fff url(../images/location-icon.svg) no-repeat 15px center;
        height: 56px;
        font-size: 14px;
        color: #737373;
        font-family: var(--font-family-inter);
        padding-left: 45px;
        border-radius: 6px;
    }

    .zipcode-form .sub-btn {
        width: 183px;
        border-radius: 0px 6px 6px 0px;
        height: 56px;
        font-family: var(--font-family-inter);
        background: #EF5B4E url(../images/search-button-icon.svg) no-repeat 24px center;
        padding: 10px 0px;
        font-size: 14px;
        padding: 10px 10px 10px 25px;
        border: 0px;
    }

        .zipcode-form .sub-btn:before {
            display: none;
        }

.subscribe-social {
    max-width: 550px;
    float: right
}

.footer-subscribe {
    width: 100%;
    position: relative;
}

    .footer-subscribe .footer-form {
        padding-right: 118px;
    }

    .footer-subscribe .wpcf7-form-control {
        width: 100%;
        padding: 5px 10px;
        color: #fff;
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        background: transparent;
        border: 1px #fff solid;
        color: #fff;
        border-radius:8px;
        height: 40px;
    }

    .footer-subscribe .wpcf7-submit {
        width: 110px;
        height: 40px;
        border-radius: 6px;
        background: #2A7D8C !important;
        color: #fff;
        box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px -1px rgba(0, 0, 0, 0.10);
        font-size: 14px;
        line-height: normal;
        border: 0px !important;
        vertical-align: middle;
        position: absolute;
        right: 0px;
        top: 0px;
    }

        .footer-subscribe .wpcf7-submit:hover {
            background: #216672 !important;
        }

.footer-social-links ul {
    display: flex;
    align-items: center;
}

    .footer-social-links ul li a {
        color: #9CA3AF;
        font-size: 20px;
        margin-right: 5px;
    }

        .footer-social-links ul li a:hover {
            color: #2A7D8C;
        }

.footer-copyright-section {
    display: flex;
    justify-content: space-between;
    padding-top: 40px;
    border-top: 1px solid #46596D;
}

.footer-copyright-left {
    width: 30%;
}

    .footer-copyright-left p {
        color: #D1D5DB;
        font-family: var(--font-family-inter);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; /* 142.857% */
    }

.footer-last-links {
    width: 70%;
    color: #D1D5DB;
    font-family: var(--font-family-inter);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    text-align: right;
}

    .footer-last-links a {
        color: #D1D5DB;
        font-family: var(--font-family-inter);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px; /* 142.857% */
        margin-left: 20px;
        text-decoration: none;
    }

        .footer-last-links a:hover {
            text-decoration: underline;
            color: #2A7D8C;
        }

.footer p:empty {
    display: none;
}


.footer-social-links ul li {
    padding-right:10px;
}
.twitter-icon svg {
    fill: #8da3af;
    height: 20px;
    position: relative;
    top: -2px;
}

.twitter-icon:hover svg {
    fill: #2A7D8C;
    height: 20px;
}
.footer-address {
    line-height: 24px;
    font-size: 16px;
    font-weight: 400;
    color: #D1D5DB;
    font-size:16px;
}

@media (max-width:991px) {
    .footer-top h2 {
        font-size: 24px;
    }
}

@media (max-width:767px) {
    .footer-link-wrapper {
        flex-direction: column;
    }

    .footer-links-column {
        width: 100%;
        padding-bottom: 25px;
    }

    .footer-top {
        flex-direction: column;
        padding-bottom: 60px;
    }

        .footer-top h2 {
            padding-right: 0;
            font-size: 24px !important;
            font-weight: 600;
            font-family: var(--font-family-inter);
            text-align: left;
            padding-bottom: 25px;
            width: 100%;
        }

    .footer-copyright-section {
        flex-direction: column;
        align-items: center;
        clear: both;
    }

    .subscribe-social {
        float: left;
    }

    .footer-copyright-left {
        width: 100%;
        text-align: center;
    }

    .footer-last-links {
        width: 100%;
        text-align: left;
    }

    .zipcode-form-footer .zipcode-form .sub-btn {
        width: 60px;
        background-position: center;
        font-size: 0;
    }

    .footer-social-links ul {
        justify-content: left;
        padding-top: 5px;
    }

    .zipcode-form-footer {
        width: 100%;
        border: 0px;
    }


    .footer-middle .row .col-sm-6 {
        width: 100%
    }

    .subscribe-social {
        padding-top: 10px;
    }

    .footer-copyright-left {
        text-align: left;
        font-size: 14px;
    }

    .footer-last-links a {
        margin-left: 0px;
        margin-right: 15px;
        font-size: 14px;
        line-height: 35px;
    }

    .footer:before {
        width: 142px;
        height: 125px;
        background-size: 200px;
    }

    .footer:after {
        width: 139px;
        height: 160px;
        top: 113px;
        background-size: 200px;
    }

    .zipcode-form-footer .zipcode-form {
        width: 100%;
    }
}
.rating-features-group {
    min-height: 140px;
}

/**************End Footer css*********/
.black-bg {
    background:#000;
}


/*************************************************/
/***************Responsive css*********************/
/*************************************************/
@media only screen and (max-width:1100px) {
    .av-plans-details .plans-column1 {
        width: 100%;
        padding-bottom: 20px;
    }

    .av-plans-details .plans-column2 {
        width: 100%;
        padding-bottom: 20px;
    }

    .av-plans-details .plans-column3 {
        width: 100%;
    }
}

@media only screen and (max-width:1400px) {
    .rec-plans-section:before {
        display: none;
    }

    .rec-plans-section:after {
        display: none;
    }
    .stepform .card-header h5:after {
        right: 15px;
    }
    .custom-accordion .card-header h5:after {
        right:15px;
    }
}


@media only screen and (max-width:991px) {
    .selected-plan-right {
        flex-direction: column;
        text-align: left;
        align-items: baseline;
    }

}

    @media (min-width:768px) and (max-width:1025px) {
        .reset-filter {
            min-width: 140px;
        }

        .av-choose-plan-btn {
            min-width: 120px;
        }

        .av-plans-details {
            padding: 15px;
        }

        .plans-more-info {
            padding-right: 0px;
            padding-left: 30px;
        }

        .plans-column3 .row .col-sm-6 {
            padding-left: 0px;
        }

        .av-plans-feature {
            padding-right: 0px;
            padding-right: 0px;
        }

        .av-plans-logo img {
            width: 100px;
        }

        .av-plans-small-title, .av-plans-phone, .av-plans-feature, .rec-more-details {
            font-size: 12px;
        }

        .av-plans-details .plans-column2 {
            padding-left: 0px;
        }

        .filter-section-desktop {
            overflow-x: auto;
            overflow-y: inherit;
            padding: 10px 0px;
        }

        .all-available-plans-section .rec-plans-filter-inner {
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .inner-page {
            padding-top: 40px;
        }

        .inner-main-title {
            margin-bottom: 30px;
        }

        .custom-accordion .card-body {
            padding: 15px;
        }

        .custom-accordion .card-header h5 {
            padding-left: 15px;
            padding-right: 15px;
        }

        .plans-details-info h6, .plans-details-info-logo {
            width: 50%;
        }
    }
    /****End Tablet Media******/
@media only screen and (max-width: 820px) {

}


    @media only screen and (max-width: 769px) {
        .hide-mobile {
            display: none;
        }

        .usage-filter-mobile {
            display: block;
        }

            .usage-filter-mobile.custom-selectbox .form-multi-select {
                width: 140px;
            }

        .zipcode-dropdown {
            padding-right: 10px;
        }

        .filter-section-desktop {
            display: none;
        }

        .filter-result {
            padding: 15px 15px;
        }

        .showing-number {
            font-size: var(--font-12);
        }

        .content-section p {
            font-size: var(--font-14);
        }

        .hide-desktop {
            display: block;
        }

        .plans-column3 .row .col-sm-6 {
            width: 100%;
        }

        .av-plans-button-group {
            margin: auto;
            display: table;
            width: 300px;
        }

        .av-choose-plan-btn {
            max-width: 200px;
            min-width: 100%;
            display: block;
            padding: 10px 5px;
        }

        .plans-more-info {
            border-radius: 8px;
            background: var(--light-gray-bg);
            padding: 12px 5px;
            min-height: 100px;
            text-align: center;
        }

        .av-plans-small-title {
            background: none;
            padding-left: 0;
            margin-left: 0;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: -0.4px;
        }

        .av-plans-typr {
            font-size: var(--font-14);
            font-weight: 400;
        }

        .av-plans-price {
            color: #4B5563;
        }

        .av-plans-button-group {
            padding-top: 16px;
        }

        .av-plans-phone {
            border-radius: 6px;
            border: 1px solid #E5E7EB;
            background: #FFF;
            box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
            padding: 8px 15px 8px 15px;
            justify-content: center;
            align-items: center;
            display: flex;
        }

        .av-plans-feature {
            border-radius: 8px;
            background: var(--light-gray-bg);
            padding: 15px;
            text-align: left;
        }

        .modal-content {
            padding: 0px;
        }

        .pricing-table td, .pricing-table th, .priceing-note {
            font-size: var(--font-14);
        }

        .socialmedia {
            float: right;
            margin: auto;
            float: none;
            display: table;
            padding-top: 25px;
        }

        .footer {
            padding: 50px 10px;
        }

        .footer-links {
            margin-bottom: 25px;
        }

            .footer-links ul li a {
                font-size: 16px;
            }

        .footer-bottom-links li {
            display: block;
            padding-bottom: 10px;
            padding-right: 0px;
        }

        .rec-plans-section .rec-plans-filter {
            width: 280px;
        }

        .rec-plans-section .custom-selectbox .btn-group .multiselect {
            background: transparent;
            border: 1px solid #D9F0F4;
            color: var(--primary-button);
        }

        .rec-plans-section .custom-selectbox .dropdown-toggle:after {
            background: url(../images/down-arrow-green.svg) no-repeat;
            top: 12px;
            width: 21px;
        }

        .rec-plans-section .custom-selectbox .btn-group .multiselect:hover {
        }

        .rec-plans-section .usage-filter-mobile.custom-selectbox .multiselect-container {
            padding: 10px;
            width: 164px;
        }

        .rec-plans-section:after {
            height: 448px;
        }

        .all-available-plans-section {
            padding: 25px 0px 40px 0px;
        }

        .section-content p {
            margin-bottom: 0;
        }

        .section-content h2 {
            font-size: var(--font-20);
            margin-bottom: 0;
        }

        .section-content p {
            color: var(--content-color-light);
        }

        body {
            background: linear-gradient(0deg, #F1F5F9 0%, #F1F5F9 100%), linear-gradient(0deg, #FFF 0%, #FFF 100%), #FFF;
        }

        .av-plans-heading {
            background: transparent;
            padding: 25px 20px 10px 20px;
        }

        .plans-logo-more {
            display: flex;
            justify-content: space-between;
        }

            .plans-logo-more .rec-more-details {
                display: none;
            }

            .plans-logo-more .rating-listview {
                display: unset;
                margin: unset;
            }

        .av-plans-kwh-price, .av-plans-price, .av-plans-price {
            color: var(--dark-color);
            font-weight: 500;
            font-size: var(--font-20);
            padding-top: 5px;
        }

        .av-plans-feature li {
            padding-bottom: 15px;
            color: var(--dark-color);
            padding-left: 30px;
            min-height:20px;
        }

           

        .feedback-popup .modal-header .modal-title {
            text-align: center;
            width: 100%;
            padding-top: 20px;
        }

        .av-plans-details > .row {
            flex-direction: column;
        }

        .av-plans-details .col-sm-2, .av-plans-details .col-sm-6, .av-plans-details .col-sm-4 {
            max-width: 100%;
        }

            .av-plans-details .col-sm-4 .row {
                flex-direction: column;
            }

                .av-plans-details .col-sm-4 .row .col-sm-6 {
                    max-width: 100%;
                }

        .inner-page {
            padding-top: 30px;
        }

        .inner-main-title {
            margin-bottom: 30px;
        }

        .header {
            padding: 1rem 0px;
        }

        .logo img {
            width: 110px;
        }



        .rec-choose-plan-button {
            max-width: 100%;
            display: block;
            min-width: 100%;
        }

        .plans-more-details .rec-phone {
            display: none;
        }

        .plans-more-details {
            justify-content: center;
            align-items: center;
        }

        .rec-plan-name {
            font-size: 18px;
            font-weight: 600;
            min-height: 43px;
            padding-bottom: 0px;
            display: flex;
            align-items: center;
            justify-content: center;
        }



        .call-button {
            border-radius: 6px;
            border: 1px solid #E5E5E5;
            background: #FFF;
            box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
            color: var(--link-color);
            font-weight: 500;
            padding: 10px 10px;
            text-align: center;
            margin-top: 5px;
            display: flex !important;
            justify-content: center;
        }

            .call-button img {
                width: 18px !important;
                height: 18px;
                margin-right: 3px;
            }

        .av-plans-button-group {
            width: 100%;
        }

        .av-plans-details {
            padding: 20px;
        }

        .plans-column2 .row {
            display: flex;
            margin-left: -4px !important;
            margin-left: -4px !important;
        }

            .plans-column2 .row .col-sm-4 {
                width: 33.333%;
                padding-left: 4px;
                padding-right: 4px;
            }

        .usage-filter-mobile.custom-selectbox .multiselect-container {
            width: 190px;
        }

        .rating {
            width: 19px;
        }

        .rating-active {
            width: 100% !important;
        }

        .recommended-plans-content {
            padding: 20px 15px;
        }

        .rec-plan-logo img {
            height: auto;
            width: 90px !important;
        }

        .rating-number {
            font-weight: 500;
        }

        .rating-number {
            font-weight: 500;
        }

        .rec-more-details {
            font-size: var(--font-16);
        }

        .custom-tab .nav-item .nav-link {
            padding: 6px 6px;
        }

        .radio-buttons .form-check-inline:first-child {
            margin-bottom: 1rem;
        }


        /******************Mobile filter css***************************/
        .filter-buttons-mobile {
            display: flex;
            gap: 5px;
        }

        .mobile-filter-button {
            color: #fff;
            display: block;
            border-radius: 6px;
            box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
            font-size: var(--font-14);
            font-weight: normal;
            padding: 7px 17px 7px 17px;
            font-family: var(--font-family-inter);
            border: 0;
            background: var(--secondary-button);
        }

        .button-dark {
            color: #fff;
            display: block;
            border-radius: 6px;
            box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
            font-size: var(--font-14);
            font-weight: normal;
            padding: 7px 17px 7px 17px;
            font-family: var(--font-family-inter);
            border: 0;
            background: var(--secondary-button);
        }

            .button-dark:focus {
                outline: 2px #111 solid;
                !important;
            }

        .mobile-filter-popup {
            margin: 0px;
            position: relative;
            padding-top: 58px;
        }

            .mobile-filter-popup .modal-content {
                border-radius: 0px;
                border: 0;
            }

            .mobile-filter-popup .modal-header {
                background: var(--white, #FFF);
                box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
                padding-bottom: 10px;
                position: fixed;
                top: 0px;
                left: 0px;
                z-index: 10;
                width: 100%;
                border-radius: 0;
            }

            .mobile-filter-popup .modal-body {
                background: #F1F5F9;
                position: relative;
                padding-bottom: 85px;
            }

        .filter-footer {
            background: #fff;
            padding: 15px;
            position: fixed;
            left: 0px;
            width: 100%;
            bottom: 0px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, 0.08);
            z-index:10;
        }

            .filter-footer .button {
                width: 50%;
            }


        /******************End mobile filter css***********************/

        /***************Thank you***********************/
        .thankyou-title {
            text-align: center;
            font-size: var(--font-24);
            padding-bottom: 15px;
        }

        .thankyou-sub-title {
            text-align: center;
            font-size: var(--font-16);
            padding-bottom: 20px;
        }

        .thankyoupage .stepform .card-header h5 {
            font-size: var(--font-20);
        }

        /**********Extra css for mobile***********/
        .available-plans-item .av-plans-details .row .plans-column2 {
            padding-right: 15px;
        }

        .available-plans-item .av-plans-details .row .plans-column3 {
            padding-right: 15px;
        }

        .house-apartment-buttons .radio-button-item svg {
            width: 22px;
            margin-bottom: 0px !important;
        }

        .house-apartment-buttons .radio-button-item {
            height: 80px;
            padding: 15px;
        }

       /* .choose-plan-popup .modal-title, .modal-subtitle {
            text-align: center;
        }*/

        .av-plans-filter-wrapper {
            top: 56px;
        }
    }
    /******End 768******/

    @media only screen and (max-width:767px) {

        .rec-plans-wrapper {
            overflow: hidden;
            margin-right: -15px;
            margin-left: -15px;
        }

        .rec-plans-slider {
            margin-right: -90px;
            margin-left: -90px;
        }

            .rec-plans-slider .owl-item {
                opacity: 0.7;
            }

                .rec-plans-slider .owl-item.active.center {
                    opacity: 1;
                }
    }

    @media only screen and (max-width:640px) {
        .custom-tab .nav-item .nav-link {
            font-size: 12px;
            padding-left: 2px !important;
            padding-right: 2px !important;
        }

        .rec-plans-section {
            background: none;
            position: relative;
        }

            .rec-plans-section:after {
                position: absolute;
                background: linear-gradient(180deg, #EEF7F9 0%, #D9EDF0 100%);
                content: "";
                left: 0px;
                top: 0px;
                width: 100%;
                height: 60%;
                display: block
            }

            .rec-plans-section:before {
                background: url(../images/banner-dotted.png) no-repeat center bottom;
                width: 100%;
                height: 289px;
                position: absolute;
                right: 0;
                left: 0px;
                bottom: 0;
                z-index: 1;
                content: "";
                opacity: 0.8;
                display: block;
            }

        .filter-result .row.justify-content-between {
            flex-direction: row;
            display: flex;
        }

            .filter-result .row.justify-content-between .col-sm-6 {
                width: 50%;
            }

        .filter-button {
            font-size: 12px;
            padding: 5px 6px;
            color: var(--dark-color);
            margin: 0px;
        }

        .plans-logo-more {
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .rec-plans-section .zipcode-dropdown .dropdown-menu {
            width: 250px;
            padding: 15px 20px;
            left: -17px !important;
        }

        .more-details-button.link_more_details svg {
            width: 18px;
        }

        
    }