@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;
    --hover-color-new: #EF5B4E;
    
}

.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: 10px 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 0px 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;
        font-size:13px;
        letter-spacing: -0.15px;
    }

.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);
        flex-wrap: wrap;
    }

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

.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;
}
.af-fixed-rate {
    color: var(--primary-color);
    padding-bottom: 15px;
    background: url(../images/fixed-rate.svg) no-repeat;
    padding-left: 25px;
}

   /* .af-fixed-rate span {
        float: right;
    }*/
.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% */
}



.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
}

#common_div {
    margin-bottom:20px;
}

@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)";
}
.short-description {
    color: #164E63;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 142.857% */
    position: relative;
}


.sparkle-loader-wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    margin: auto;
    background: rgba(241, 245, 249, 0.95);
    z-index: 999999
}

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

.sparkle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sparkle-animation-wrapper {
    transform: scale(6.75);
}

.sparkle-svg-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
}

.sparkle-overlay {
    width: 28px;
    height: 25px;
    overflow: visible;
}

.sparkle-dot,
.sparkle-swoosh {
    animation: sparkle 1.0s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes sparkle {
    /* Fades and scales the sparkle paths */
}

.fetching-text {
    margin-top: 5.5rem;
    font-weight: 500;
    color: #2d788d;
    animation: pulse-text 1.5s ease-in-out infinite;
    font-size: 1.09375rem; /* 17.5px */
}

@media (min-width: 768px) {
    .fetching-text {
        font-size: 1.25rem; /* 20px */
    }
}

@keyframes pulse-text {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

.sparkle-container {
    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;
}

.sparkle-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;
    -webkit-transform: scale(6.75);
    -moz-transform: scale(6.75);
    -ms-transform: scale(6.75);
    -o-transform: scale(6.75);
    transform: scale(6.75);
}

.sparkle-svg-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 50px;
    height: 50px;
}
.redirection-title {
    color: #111827;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.09px;
    padding-left: 45px;
    position: relative;
    display: flex;
    align-items: center;
}

.redirection-icon {
    border-radius: 6px;
    background: #0B76B7;
    width: 34px;
    height: 34px;
    text-align: center;
    margin-right: 10px;
    position: absolute;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.redirection-title label {
    margin-bottom: 0px;
}

.thankyou-title-header {
    padding-bottom: 40px;
}

    .thankyou-title-header .thankyou-sub-title {
        padding-bottom: 20px;
    }
.redirection-title {
    font-size: 16px;
}

}

@media (max-width:767px) {
    .redirection-title {
        text-align: center;
        display: flex;
        justify-content: center;
        max-width: 360px;
        margin: auto;
    }

        .redirection-title label {
            text-align: left;
        }
}

@media (max-width:439px) {
    .home-services-house {
        width: 300px;
        text-align: right;
    }

    .home-services-todolist {
        left: 0;
        margin-left: 0;
    }
}
/************End Concierge thank you banner******/
.sparkle-dot,
.sparkle-swoosh {
    -webkit-animation: sparkle 1s ease-in-out infinite;
    -moz-animation: sparkle 1s ease-in-out infinite;
    -o-animation: sparkle 1s ease-in-out infinite;
    animation: sparkle 1s ease-in-out infinite;
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
}

@-webkit-keyframes sparkle {
    0%, 100% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 0;
    }

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

@-moz-keyframes sparkle {
    0%, 100% {
        -moz-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 0;
    }

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

@-o-keyframes sparkle {
    0%, 100% {
        -o-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 0;
    }

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

@keyframes sparkle {
    0%, 100% {
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -o-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 0;
    }

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

.fetching-textz {
    margin-top: 2.5rem;
    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.09375rem;
}

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

@-webkit-keyframes pulse-text {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

@-moz-keyframes pulse-text {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

@-o-keyframes pulse-text {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

@keyframes pulse-text {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

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

/************Confirm identity modal CSS****************/
.confirm-identity-modal {
    max-width: 480px;
}

.confirm-identity-modal .modal-title {
    color:#0F172A;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
    margin-top:-10px;

}
.confirm-identity-modal p{
    color: #0A0D13;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;

}
.otp-code-section {
    padding-top: 15px;
    color: #343A40;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    padding-bottom:10px;
}
.otp-textbox-section {
    display:flex;
    gap:10px;
    margin-bottom:5px;
}
.otp-error {
    color:#DC355D;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
}
.otp-textbox-section input {
    display: flex;
    width: 44px;
    height: 44px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid #C4C7C7;
    text-align: center;
    font-size: 14px;
    color: #191C1D;
    transition-duration: 0.2s;
    outline: 3px solid #fff;
}
    .otp-textbox-section input:focus {
        outline: 3px solid #FEE4E2;
        border: 1px #EF5B4E solid;
        transition-duration: 0.2s;
    }
.confirm-identity-modal .button-group {
    padding-top: 15px;
}
.otp-continue-btn {
    height: 40px;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 6px;
    background: #EF5B4E;
    color:#fff;
    min-width:184px;
}
    .otp-continue-btn:hover {
        background:#db5549;
        color: #fff;
    }
    .msg-resend {
        color: #0A0D13;
        font-size: 16px;
        font-weight: 400;
        line-height: 22px;
        padding-top: 20px;
    }
.msg-resend a{
    text-decoration:underline
}
.plans-logo-more a.av-more-details{

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


@media (max-width: 991px) {
    .confirm-identity-modal.confirm-otp-section {
        margin: auto;
        max-width: 400px;
    }

    .confirm-otp-section .modal-title {
        font-size: 30px;
        padding-bottom: 20px;
        margin-bottom: 0px;
    }
}

@media (max-width:767px) {
    .offers-message, .offers-title {
        padding-left: 10px;
        padding-right: 10px;  
    }
    .confirm-identity-modal {
        min-height: -webkit-fill-available;
    }
    .confirm-identity-modal .modal-title {
        margin-top: 8px;
        margin-bottom:35px;
    }
    .otp-continue-btn {
        min-width:100%;
    }
    .confirm-identity-modal {
        min-height: auto;
    }
.confirm-identity-modal .button-group {
    padding-bottom:25px;
}
.confirm-identity-modal p strong {
    display:block
}
}

@media (max-width:450px) {
    .otp-textbox-section {
        justify-content: space-between;
    }
}
/*******End confirm identity modal CSS****************/
/************Concierge thank you banner************/
.home-services-section {
    border-top: 0px !important;
    position: relative;
    display: flex;
    justify-content: space-between;
    padding-right: 5px !important;
    padding-bottom: 2px !important;
}

.home-services-left {
    width: 73%;
    padding-bottom: 25px;
}

.home-services-right {
    width: 26%;
    border-radius: 9px;
    position: relative;
    background: linear-gradient(140deg, rgba(248, 250, 252, 0.00) 67.16%, #38A1B6 98.01%, rgba(46, 76, 110, 0.00) 99.68%);
}

    .home-services-right:after {
        background: url(../images/home-servics-bg-right.svg);
        width: 209px;
        height: 71px;
        position: absolute;
        right: 15px;
        bottom: 345px;
        content: "";
    }

.home-services-house {
    position: absolute;
    bottom: 45px;
    right: 15px;
    width: 240px;
    z-index: 2;
}

    .home-services-house img {
        max-width: 100%;
    }

.home-services-todolist {
    position: absolute;
    position: absolute;
    right: 25px;
    bottom: 201px;
}

.home-services-section h2 {
    color: #101214;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    max-width: 75%;
}

.home-services-section .small-description {
    color: #4B5563;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    max-width: 75%;
}

.home-services-box {
    border-radius: 6px;
    border: 1px solid #B8E3E9;
    background: linear-gradient(0deg, #DAEDF1 -9%, #FFF 5.19%);
    box-shadow: 0 4px 12px 0 rgba(13, 10, 44, 0.06);
    padding: 25px 20px;
    min-height: 310px;
}

.home-services-item {
    padding-bottom: 25px;
    max-width: 90%;
}

    .home-services-item h4 {
        color: #274552;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        background: url(../images/services-star.svg) no-repeat left 1px;
        margin: 0px;
        padding-left: 25px;
    }

    .home-services-item p {
        color: #274552;
        font-size: 12px;
        font-weight: 500;
        line-height: 20px;
        margin: 0px;
        padding: 0px;
        padding-left: 25px;
    }

.services-button-group {
    padding-top: 10px;
    color: #274552;
    font-size: 14px;
    padding-left: 25px;
}

    .services-button-group span {
        padding: 0px 5px
    }

    .services-button-group a {
        font-size: 14px;
        font-weight: 600;
        color: #274552;
    }

.home-services-btn {
    font-weight: 500 !important;
    color: #fff !important;
}

.home-services-call-info {
    display: inline-block;
}

@media (max-width:1080px) {
    .home-services-house {
        width: 180px;
    }
}

@media (max-width:991px) {
    .home-services-section {
        padding-right: 25px !important;
    }

    .home-services-left {
        width: 100%;
    }

    .home-services-right {
        width: 100%;
        background: none;
        padding-bottom: 25px;
    }

    .home-services-section {
        flex-direction: column;
    }

    .home-services-right:after {
        display: none;
    }

    .home-services-house {
        position: relative;
        width: 330px;
        bottom: unset;
        right: unset;
        margin: auto;
        text-align: right;
    }

    .home-services-todolist {
        position: absolute;
        position: absolute;
        right: unset;
        bottom: unset;
        left: 50%;
        margin-left: -180px;
        top: 23px;
        z-index: 5;
    }

    .home-services-section h2, .home-services-section .small-description, .home-services-item {
        max-width: 100%;
    }

    .home-services-call-info {
        display: block;
        width: 100%;
        text-align: center;
        padding-top: 10px;
    }

    .home-services-btn {
        display: block;
        width: 100%;
        text-align: center;
    }

    .services-button-group {
        padding-right: 25px;
    }
}

@media (max-width:439px) {
    .home-services-house {
        width: 300px;
        text-align: right;
    }

    .home-services-todolist {
        left: 0;
        margin-left: 0;
    }
}
/************End Concierge thank you banner******


/***********Mega footer css***************/
.footer-mega-menu { width: 80%;}
.menu-mega-menu-footer-container .menu {  display: flex;}
.menu-mega-menu-footer-container .menu > .menu-item { width: 100%;    }
.menu-mega-menu-footer-container .menu > .menu-item > h3 { color: #FFF; font-size: 22px;font-weight: 600; line-height: 28px; padding-bottom: 5px;    }
.menu-mega-menu-footer-container .sub-menu .menu-item {padding-bottom: 5px;}
.menu-mega-menu-footer-container .sub-menu .menu-item a {  color: #D1D5DB;  font-size: 14px;font-weight: 400;line-height: 24px; text-decoration: none; }
.menu-mega-menu-footer-container .sub-menu .menu-item a:hover { text-decoration: underline;color: #2A7D8C; }
.footer-links-section {display: flex;}
.footer-links-section .footer-links-column {   width: 20%    }
.footer-links-section .footer-links-column h3 { letter-spacing: -0.55px; font-size: 22px;}
.footer-links-section .footer-links-column .menu li a {font-size: 14px !important; font-weight: 400;  }
.footer-links-section .address-row, .footer-links-section .address-row p, .footer-links-section .address-row a { font-size: 14px !important;    }
.newsletter-section {
    border-top: 1px solid #46596D;
    border-bottom: 1px solid #46596D;
    padding: 25px 0px 30px 0px;
    margin-bottom: 30px;
}
.newsletter-section .subscribe-social {
        max-width: 700px;
    }

.newsletter-section .footer-subscribe {
        display: flex;
        align-items: flex-start;
    }

.subscribe-lable {
    color: #FFF;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 33px;
    letter-spacing: -0.55px;
    padding-right: 24px;
    white-space: nowrap;
    position: relative;
    top: 5px;
}

.footer-subscribe .wpcf7-not-valid-tip {
    position: absolute;
    top: 35px;
}

.wpcf7 form.invalid .wpcf7-response-output {
    border-color: transparent;
}

.wpcf7 form .wpcf7-response-output {
    position: absolute;
    top: 22px;
}

#mega-menu-wrap-home-mega-menu #mega-menu-home-mega-menu > li.mega-menu-item.mega-current-menu-item a.mega-menu-link {
    color: #2E7D8E;
    font-weight: 600 !important;
}

.footer-form #err_emailsubscribe {
    background: #fff;
    border-radius: 5px;
    padding: 6px 10px;
    margin-top: 3px !important;
}

#err_emailsubscribe:empty {
    display: none;
}



@media (min-width:768px) {
    .footer-mega-menu ul.sub-menu {
        display: block !important;
    }
}

@media (max-width:991px) {
    .footer-links-section .footer-links-column {
        margin-bottom: 20px;
    }

    .subscribe-lable {
        font-size: 18px;
    }

    .newsletter-section .subscribe-social {
        max-width: 575px;
    }

    .menu-mega-menu-footer-container .menu {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

     .menu-mega-menu-footer-container .menu > .menu-item {
            margin-bottom: 18px;
        }
}

@media (min-width:768px) {
    .footer-menu-block {
        display: block !important;
        height: auto !important;
    }
}

@media (max-width:767px) {
    .footer-mega-menu {
        width: 100%;
    }

    .subscribe-lable {
        padding-bottom: 15px;
    }

    .footer-links-section {
        grid-template-columns: inherit;
        flex-direction: column;
    }

    .menu-mega-menu-footer-container .menu {
        display: grid;
        grid-template-columns: 1fr;
    }

    .newsletter-section .footer-subscribe {
        flex-direction: column;
    }

    .newsletter-section .subscribe-social {
        max-width: 400px;
        float: none;
        margin: auto;
    }

    .newsletter-section .footer-subscribe .footer-form {
        position: relative;
    }

    .newsletter-section .footer-social-links ul {
        justify-content: center;
    }

    .newsletter-section {
        padding: 15px 0px;
        margin-bottom: 10px;
    }

    .footer-copyright-section .footer-copyright-left {
        text-align: center;
        padding-bottom: 10px;
    }

    .footer-copyright-section .footer-last-links {
        text-align: center;
    }

    .footer-links-section .footer-links-column {
        margin-bottom: 0px;
    }

        .footer-links-section .footer-links-column .footer-menu-block {
            display: none;
            padding-left: 8px;
            padding-top: 10px;
        }

        .footer-links-section .footer-links-column h3 {
            font-size: 18px;
            padding-bottom: 0px;
            margin-bottom: 0px;
        }

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

    .footer-links-section .footer-links-column h3 {
        position: relative;
    }

        .footer-links-section .footer-links-column h3.show-hide-link:after {
            background: url(../images/button-down-arrow-white.svg) no-repeat;
            width: 17px;
            height: 17px;
            position: absolute;
            content: "";
            right: 0px;
            display: block;
            margin: auto;
            top: 0px;
            bottom: 0px;
            opacity: 0.5;
        }

        .footer-links-section .footer-links-column h3.show-hide-link.active:after {
            transform: rotate(180deg);
        }

    .footer-address-link h3:after {
        display: none;
    }

    .footer-address {
        padding-left: 8px;
        padding-top: 10px;
    }

    .footer-mega-menu ul.sub-menu {
        display: none;
        padding-left: 5px;
        padding-top: 5px;
    }

    .footer-mega-menu {
        width: 100%;
    }

    .footer-links-section {
        flex-direction: column;
    }

    .menu-mega-menu-footer-container .menu {
        display: flex;
        flex-direction: column;
    }

    .footer-links-section .footer-links-column {
        width: 100%;
    }

    .menu-mega-menu-footer-container .menu > .menu-item > a {
        width: 100%;
        display: block;
    }

    .menu-mega-menu-footer-container .menu > .menu-item > h3 {
        position: relative;
        font-style: normal;
        font-weight: 600;
        line-height: 28px;
        font-size: 18px !important;
        width: 100%;
        display: block;
        margin-bottom: 0px;
    }

        .menu-mega-menu-footer-container .menu > .menu-item > h3:after {
            background: url(../images/button-down-arrow-white.svg) no-repeat;
            width: 17px;
            height: 17px;
            position: absolute;
            content: "";
            right: 0px;
            display: block;
            margin: auto;
            top: 0px;
            bottom: 0px;
            opacity: 0.5;
        }

        .menu-mega-menu-footer-container .menu > .menu-item > h3.active:after {
            transform: rotate(180deg);
        }

    .menu-mega-menu-footer-container .sub-menu .menu-item {
        padding-bottom: 8px;
    }
}

/*******************End mega footer css********************/




/******Start Compare plans*********/
.compare-plans-wrapper {
    border-radius: 6px;
    border: 1px solid #E2E8F0;
    background: #fff;
    border-radius: 0;
    padding: 25px 0 10px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0px;
    z-index: 99;
    left: 0px;
    width: 100%;
    background: linear-gradient(180deg, #FFF 85.04%, #E6F2F4 100%);
    box-shadow: 0 8px 35px 0 rgba(0, 0, 0, 0.16);
}

.compare-plans-container {
    max-width: 685px;
    margin: auto;
}

    .compare-plans-container h4 {
        color: #274552;
        font-size: 20px;
        font-weight: 600;
        line-height: 8px;
        letter-spacing: -0.5px;
    }

.compare-product-list {
    display: flex;
    gap: 24px;
    padding-top: 15px;
}

.compare-plans-frame {
    border-radius: 8px;
    border: 0;
    display: flex;
    width: 175px;
    height: 135px;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
}

.compare-plans-frame-dotted {
    border: 1px #94A3B8 dashed;
    border-radius: 8px;
    display: flex;
    width: 175px;
    height: 135px;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
}


.comapre-product {
    border-radius: 8px;
    border: 1px solid #94A3B8;
    background: #FFF;
    box-shadow: 0 1px 3px 0 rgba(166, 175, 195, 0.40);
    padding: 25px 0px 8px 0px;
    text-align: center;
    width: 175px;
    height: 135px;
    position: absolute;
    left: 0px;
    top: 0px;
    box-shadow: 0 34px 26px 0 rgba(13, 10, 44, 0.05), 0 2px 2px 0 rgba(13, 10, 44, 0.08);
}

.remove-product {
    background: url(../images/close-icon.svg) no-repeat;
    position: absolute;
    right: 8px;
    top: 6px;
    width: 16px;
    height: 16px;
    font-size: 0px;
}

.compare-product-img {
    height: 35px;
}

    .compare-product-img img {
        width: auto;
        height: 30px;
    }

.compare-product-name {
    color: #6B7280;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 10px;
    letter-spacing: -0.5px;
    padding-bottom: 12px;
    padding-top: 10px;
}

.compare-product-price {
    color: #2A5260;
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -0.4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .compare-product-price span {
        color: #6B7280;
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
        padding-left: 6px;
    }

.compare-plans-button {
    width: 100px;
    align-items: center;
    justify-content: center;
    height: 142px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.clear-all-btn {
    width: 100%;
    border-radius: 6px;
    border: 1px solid #E5E7EB;
    background: #FFF;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    color: #2D788D;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
}

.compare-btn {
    padding: 10px 16px;
    width: 100%;
    font-size: 14px;
}

/****Table css****/

.compare-plans-modal {
    max-width: 1032px;
}

.compare-plans-table td {
    border: 1px #ddd solid;
    border-collapse: collapse;
    padding: 20px 10px;
    text-align: center;
    color: #274552;
    font-size: 16px;
    font-weight: 500;
}

.compare-plans-table tr td:first-child {
    background: #EDF6F8;
    text-align: left;
    color: #101214;
}

.compare-plans-table tr:nth-child(odd) {
    background: #FCFDFD;
}

.feature-list {
    display: flex;
    justify-content: center;
    font-size: 15px;
    margin-bottom: 10px;
}

    .feature-list span {
    }

        .feature-list span i {
            margin-right: 3px;
            width: 21px;
            height: 21px;
            display: inline-block;
            background-size: 21px;
            background-position: center;
            position: relative;
            top: 5px;
        }

.bill-credits-icon {
    background: url(../images/bill-credits-icon.svg) no-repeat
}

.choose-plan-compare {
}

.choose-plan-compare {
    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: 400;
    text-align: center;
    min-width: 162px;
    margin: auto;
    padding: 14px 16px;
    color: #fff;
    transition-duration: 0.3s;
    display: table;
    border: 0px;
    font-size: 14px;
}

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

.compare-plans-table .more-details-button {
    font-weight: 400;
    text-align: center;
    min-width: 162px;
    margin: auto;
    padding: 14px 16px;
    color: #2D788D;
    transition-duration: 0.3s;
    border: 0px;
    border-radius: 6px;
    border: 1px solid #E5E7EB;
    background: #FFF;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    font-size: 16px;
    display: inline-block;
}

    .compare-plans-table .more-details-button:hover {
        background: #f8f9f9;
        color: #2D788D;
        transition-duration: 0.3s;
        text-decoration: none;
    }

.need-help-section {
    border-radius: 8px;
    border: 1px solid var(--slate-200, #E2E8F0);
    background: #FCFDFD;
    display: flex;
    max-width: 833px;
    padding: 15px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-top: 15px;
}

    .need-help-section h5 {
        color: #0A0A0A;
        font-size: 18px;
        font-weight: 600;
    }

    .need-help-section p {
        color: #0A0A0A;
        font-size: 16px;
        font-weight: 400;
        text-align: center;
    }

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

.needhelp-link-mobile {
    display: none;
}

.av-plans-heading {
    justify-content: space-between;
}

.compare-checkbox {
    color: #164E63;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .compare-checkbox label {
        margin-bottom: 0px;
        padding-left: 5px;
    }

.choose-plan-link {
    display: block;
    color: #2D788D;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-top: 5px;
}


@media (max-width:991px) {

    .compare-plans-table td {
        font-size: 12px;
        padding: 12px 10px;
        width: 230px;
    }

    .compare-plans-table tr td:first-child {
        width: 125px;
    }

        .compare-plans-table tr td:first-child:before {
            box-shadow: 0 0 3px 1px rgba(0, 0, 0, .08);
            right: 2px;
            top: 0;
            content: "";
            height: 100%;
            position: absolute;
        }

    .feature-list {
        font-size: 12px;
    }

    .compare-plans-scroll {
        overflow-x: scroll;
        border-left: 1px #ddd solid;
        border-right: 1px #ddd solid;
    }

    .compare-plans-table-inner {
        width: 790px;
    }

    .compare-plans-table tr td:first-child {
        position: sticky;
        left: -1px;
        top: 0px;
        z-index: 5;
    }

    .need-help-section {
        display: none;
    }

    .needhelp-link-mobile {
        display: inline-block;
        background: url(../images/call-icon.svg) no-repeat 0px 2px;
        color: #2D788D;
        font-size: 12px;
        font-weight: 500;
        padding-left: 20px;
        padding-top: 1px;
        padding-bottom: 2px;
    }
}

@media (max-width:767px) {

    .compare-product-img img {
        height: 20px;
    }

    .compare-product-price {
        line-height: 23px;
    }

    .compare-product-list {
        flex-wrap: wrap;
        padding: 10px 5px;
        gap: 5px;
        align-items: center;
        justify-content: center;
    }

    .compare-plans-button {
        flex-direction: row;
        width: 230px;
        height: 60px;
    }

    .compare-plans-container h4 {
        text-align: center;
    }

    .compare-plans-frame, .compare-plans-frame-dotted {
        width: 115px;
        height: 110px;
    }

    .comapre-product {
        height: 110px;
        width: 100%;
        padding-top: 20px;
    }

    .compare-product-img {
        height: 15px;
    }

    .compare-product-price span {
        padding-left: 0px;
    }

    .compare-plans-wrapper {
        padding-bottom: 0px;
    }

    .compare-product-name {
        font-size: 12px;
        padding-top: 15px;
    }

    .compare-product-price {
        font-size: 20px;
    }

        .compare-product-price span {
            font-size: 8px;
        }

    .table-scroll-wrapper .table-container {
        border-left: 1px #ddd solid;
    }

    .compare-plans-table tr td:first-child {
        border-left: 0px;
    }
}

@media (max-width:400px) {
    .compare-plans-frame, .compare-plans-frame-dotted {
        width: 100px;
    }
}

/***********compare table scroll mobile ***********/
.table-scroll-wrapper {
    position: relative;
    display: flex;
    width: 100%;
    margin: 0 auto;
}

.table-container {
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}

    .table-container::-webkit-scrollbar {
        display: none; /* WebKit */
    }

.compare-plans-table {
    min-width: 600px;
    width: max-content;
    border-collapse: collapse;
}

.compare-plans-modal .scroll-arrow {
    background: #5aa0b3;
    color: white;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 3;
    flex-shrink: 0;
    text-decoration: none;
    top: 53%;
    outline: 0px;
    border: 0px;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
}

    .compare-plans-modal .scroll-arrow:hover {
        background: #5aa0b3;
    }

    .compare-plans-modal .scroll-arrow:disabled {
        background: #bbbbbb;
        cursor: not-allowed;
    }

.compare-plans-modal .scroll-left {
    position: absolute;
    left: -10px;
    z-index: 10;
}

.compare-plans-modal .scroll-right {
    position: absolute;
    right: -10px;
    z-index: 10;
}

.compare-plans-modal .scroll-left svg {
    transform: scale(0.7);
    position: relative;
    left: -2px;
}

.compare-plans-modal .scroll-right svg {
    transform: scale(0.7);
    right: 1px;
    position: relative;
}

.compare-plans-modal button.choose-plan-compare {
    padding: 10px 10px;
    min-width: 130px;
    font-size: 14px;
}

.compare-plans-table .more-details-button {
    min-width: 130px;
    padding: 9px 10px;
    font-size: 14px;
}

/* Hide arrows on desktop if desired */
@media (min-width: 767px) {
    .compare-plans-modal .scroll-arrow {
        display: none;
    }

    .table-container {
        overflow-x: visible;
    }

    .compare-plans-table {
        min-width: unset;
        width: 100%;
        border-collapse: collapse;
    }
}



/******End Compare plans*********/
.payment-form-wrapper .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;
}
.payment-form-wrapper .card-header {
    padding: 0px;
    border-radius: 0px;
    border: 0px;
}
.payment-form-wrapper .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;
}
.payment-form-wrapper .card-body {
    padding: 25px 25px;
    border-top: 1px solid var(--accrdion-border);
}

.payment-submit-button {
    background: #34808D;
    border: 0px;
    text-align: center;
    padding: 12px 25px;
    width: 100%;
    line-height: normal;
    color: #fff;
    height: auto;
    margin: 0px;
    border-radius: 6px;
    font-size: 1.1em;
}

    .payment-submit-button:hover {
        background: #2a6671;
    }

.swal2-actions .swal2-styled {
    background: #2d788d;
    border: 0px;
    font-size: 14px;
    font-weight: 500;
    outline: none;
}

    .swal2-actions .swal2-styled:hover {
        background: #5793a3;
        border: 0px;
        outline: none;
    }

/******Start Compare plans*********/
.compare-plans-wrapper {
    border-radius: 6px;
    border: 1px solid #E2E8F0;
    background: #fff;
    border-radius: 0;
    padding: 25px 0 10px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0px;
    z-index: 99;
    left: 0px;
    width: 100%;
    background: linear-gradient(180deg, #FFF 85.04%, #E6F2F4 100%);
    box-shadow: 0 8px 35px 0 rgba(0, 0, 0, 0.16);
}

.compare-plans-container {
    max-width: 685px;
    margin: auto;
}

    .compare-plans-container h4 {
        color: #274552;
        font-size: 20px;
        font-weight: 600;
        line-height: 8px;
        letter-spacing: -0.5px;
    }

.compare-product-list {
    display: flex;
    gap: 24px;
    padding-top: 15px;
}

.compare-plans-frame {
    border-radius: 8px;
    border: 0;
    display: flex;
    width: 175px;
    height: 135px;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
}

.compare-plans-frame-dotted {
    border: 1px #94A3B8 dashed;
    border-radius: 8px;
    display: flex;
    width: 175px;
    height: 135px;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
}


.comapre-product {
    border-radius: 8px;
    border: 1px solid #94A3B8;
    background: #FFF;
    box-shadow: 0 1px 3px 0 rgba(166, 175, 195, 0.40);
    padding: 25px 0px 8px 0px;
    text-align: center;
    width: 175px;
    height: 135px;
    position: absolute;
    left: 0px;
    top: 0px;
    box-shadow: 0 34px 26px 0 rgba(13, 10, 44, 0.05), 0 2px 2px 0 rgba(13, 10, 44, 0.08);
}

.remove-product {
    background: url(../images/close-icon.svg) no-repeat;
    position: absolute;
    right: 8px;
    top: 6px;
    width: 16px;
    height: 16px;
    font-size: 0px;
}

.compare-product-img {
    height: 35px;
}

    .compare-product-img img {
        width: auto;
        height: 30px;
    }

.compare-product-name {
    color: #6B7280;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 10px;
    letter-spacing: -0.5px;
    padding-bottom: 12px;
    padding-top: 10px;
}

.compare-product-price {
    color: #2A5260;
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    letter-spacing: -0.4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .compare-product-price span {
        color: #6B7280;
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
        padding-left: 6px;
    }

.compare-plans-button {
    width: 100px;
    align-items: center;
    justify-content: center;
    height: 142px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.clear-all-btn {
    width: 100%;
    border-radius: 6px;
    border: 1px solid #E5E7EB;
    background: #FFF;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    color: #2D788D;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
}

.compare-btn {
    padding: 10px 16px;
    width: 100%;
    font-size: 14px;
}

/****Table css****/

.compare-plans-modal {
    max-width: 1032px;
}

.compare-plans-table td {
    border: 1px #ddd solid;
    border-collapse: collapse;
    padding: 20px 10px;
    text-align: center;
    color: #274552;
    font-size: 16px;
    font-weight: 500;
}

.compare-plans-table tr td:first-child {
    background: #EDF6F8;
    text-align: left;
    color: #101214;
}

.compare-plans-table tr:nth-child(odd) {
    background: #FCFDFD;
}

.feature-list {
    display: flex;
    justify-content: center;
    font-size: 15px;
    margin-bottom: 10px;
}

    .feature-list span {
    }

        .feature-list span i {
            margin-right: 3px;
            width: 21px;
            height: 21px;
            display: inline-block;
            background-size: 21px;
            background-position: center;
            position: relative;
            top: 5px;
        }

.bill-credits-icon {
    background: url(../images/bill-credits-icon.svg) no-repeat
}

.choose-plan-compare {
}

.choose-plan-compare {
    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: 400;
    text-align: center;
    min-width: 162px;
    margin: auto;
    padding: 14px 16px;
    color: #fff;
    transition-duration: 0.3s;
    display: table;
    border: 0px;
    font-size: 14px;
}

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

.compare-plans-table .more-details-button {
    font-weight: 400;
    text-align: center;
    min-width: 162px;
    margin: auto;
    padding: 14px 16px;
    color: #2D788D;
    transition-duration: 0.3s;
    border: 0px;
    border-radius: 6px;
    border: 1px solid #E5E7EB;
    background: #FFF;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    font-size: 16px;
    display: inline-block;
}

    .compare-plans-table .more-details-button:hover {
        background: #f8f9f9;
        color: #2D788D;
        transition-duration: 0.3s;
        text-decoration: none;
    }

.need-help-section {
    border-radius: 8px;
    border: 1px solid var(--slate-200, #E2E8F0);
    background: #FCFDFD;
    display: flex;
    max-width: 833px;
    padding: 15px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-top: 15px;
}

    .need-help-section h5 {
        color: #0A0A0A;
        font-size: 18px;
        font-weight: 600;
    }

    .need-help-section p {
        color: #0A0A0A;
        font-size: 16px;
        font-weight: 400;
        text-align: center;
    }

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

.needhelp-link-mobile {
    display: none;
}

.av-plans-heading {
    justify-content: space-between;
}

.compare-checkbox {
    color: #164E63;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .compare-checkbox label {
        margin-bottom: 0px;
        padding-left: 5px;
    }

.choose-plan-link {
    display: block;
    color: #2D788D;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-top: 5px;
}


@media (max-width:991px) {

    .compare-plans-table td {
        font-size: 12px;
        padding: 12px 10px;
        width: 230px;
    }

    .compare-plans-table tr td:first-child {
        width: 125px;
    }

        .compare-plans-table tr td:first-child:before {
            box-shadow: 0 0 3px 1px rgba(0, 0, 0, .08);
            right: 2px;
            top: 0;
            content: "";
            height: 100%;
            position: absolute;
        }

    .feature-list {
        font-size: 12px;
    }

    .compare-plans-scroll {
        overflow-x: scroll;
        border-left: 1px #ddd solid;
        border-right: 1px #ddd solid;
    }

    .compare-plans-table-inner {
        width: 790px;
    }

    .compare-plans-table tr td:first-child {
        position: sticky;
        left: -1px;
        top: 0px;
        z-index: 5;
    }

    .need-help-section {
        display: none;
    }

    .needhelp-link-mobile {
        display: inline-block;
        background: url(../images/call-icon.svg) no-repeat 0px 2px;
        color: #2D788D;
        font-size: 12px;
        font-weight: 500;
        padding-left: 20px;
        padding-top: 1px;
        padding-bottom: 2px;
    }
}

@media (max-width:767px) {

    .compare-product-img img {
        height: 20px;
    }

    .compare-product-price {
        line-height: 23px;
    }

    .compare-product-list {
        flex-wrap: wrap;
        padding: 10px 5px;
        gap: 5px;
        align-items: center;
        justify-content: center;
    }

    .compare-plans-button {
        flex-direction: row;
        width: 230px;
        height: 60px;
    }

    .compare-plans-container h4 {
        text-align: center;
    }

    .compare-plans-frame, .compare-plans-frame-dotted {
        width: 115px;
        height: 110px;
    }

    .comapre-product {
        height: 110px;
        width: 100%;
        padding-top: 20px;
    }

    .compare-product-img {
        height: 15px;
    }

    .compare-product-price span {
        padding-left: 0px;
    }

    .compare-plans-wrapper {
        padding-bottom: 0px;
    }

    .compare-product-name {
        font-size: 12px;
        padding-top: 15px;
    }

    .compare-product-price {
        font-size: 20px;
    }

        .compare-product-price span {
            font-size: 8px;
        }

    .table-scroll-wrapper .table-container {
        border-left: 1px #ddd solid;
    }

    .compare-plans-table tr td:first-child {
        border-left: 0px;
    }
}

@media (max-width:400px) {
    .compare-plans-frame, .compare-plans-frame-dotted {
        width: 100px;
    }
}

/***********compare table scroll mobile ***********/
.table-scroll-wrapper {
    position: relative;
    display: flex;
    width: 100%;
    margin: 0 auto;
}

.table-container {
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}

    .table-container::-webkit-scrollbar {
        display: none; /* WebKit */
    }

.compare-plans-table {
    min-width: 600px;
    width: max-content;
    border-collapse: collapse;
}

.compare-plans-modal .scroll-arrow {
    background: #5aa0b3;
    color: white;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 3;
    flex-shrink: 0;
    text-decoration: none;
    top: 53%;
    outline: 0px;
    border: 0px;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.5);
}

    .compare-plans-modal .scroll-arrow:hover {
        background: #5aa0b3;
    }

    .compare-plans-modal .scroll-arrow:disabled {
        background: #bbbbbb;
        cursor: not-allowed;
    }

.compare-plans-modal .scroll-left {
    position: absolute;
    left: -10px;
    z-index: 10;
}

.compare-plans-modal .scroll-right {
    position: absolute;
    right: -10px;
    z-index: 10;
}

.compare-plans-modal .scroll-left svg {
    transform: scale(0.7);
    position: relative;
    left: -2px;
}

.compare-plans-modal .scroll-right svg {
    transform: scale(0.7);
    right: 1px;
    position: relative;
}

.compare-plans-modal button.choose-plan-compare {
    padding: 10px 10px;
    min-width: 130px;
    font-size: 14px;
}

.compare-plans-table .more-details-button {
    min-width: 130px;
    padding: 9px 10px;
    font-size: 14px;
}

/* Hide arrows on desktop if desired */
@media (min-width: 767px) {
    .compare-plans-modal .scroll-arrow {
        display: none;
    }

    .table-container {
        overflow-x: visible;
    }

    .compare-plans-table {
        min-width: unset;
        width: 100%;
        border-collapse: collapse;
    }
}
/******End Compare plans*********/

/*******New filter design *******/
:root {
    --primary-color-new: #164E63;
    --hover-color-new: #EF5B4E;
}
.av-plans-details {
    padding: 20px 20px;
    
}
header {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.new-theme-design .rec-plans-section {
    background: transparent;
    padding-bottom:0px;
    padding-top:20px;
}
.new-theme-design .all-available-plans-section {
    padding-top: 20px;
}
.new-theme-design .rec-plans-filter {
    margin-bottom: 15px;
}
.featured-plans-inner {
    padding: 30px 30px;
    border-radius: 24px;
    background: #EBF4F5;
}
.new-theme-design .content-section {
    padding-top: 0px;
}

.middle-frame {
    border-radius: 24px;
    background: #EBF4F5;
    padding: 24px;
}
    .middle-frame .showing-number {
        color: #274552;
        font-size:15px;
    }
    .middle-frame .filter-button {
        color: #0A0A0A;
        font-size:12px;
    }
    .middle-frame .section-content p {
        min-height: inherit;
        margin-bottom: 0px;
        padding-bottom:0px;
    }
.filter-details {
    padding: 20px 15px 20px 15px;
    display: flex;
    gap: 6px;
    align-items: center;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    position: relative;
    padding-left: 75px;
    flex-wrap: wrap;
}

.filters-detail-title {
    color:#274552;
    font-weight: 500;
    line-height: 24px; 
    padding-right:15px;
    position:absolute; 
    left:15px;
    top:23px;
}
.select-filter {
    display: inline;
    border-radius: 4px;
    border: 1px solid var(--Solar-Product-500, #EF5B4E);
    background: var(--Solar-Product-500, #EF5B4E);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    padding: 4px 8px;
    font-size: 12px;
    color: #fff;
    font-weight:400;
    position:relative;
    padding-right:24px;
    margin-right:3px;
}
.select-filter strong {
    font-weight:400;
    }
.filter-cancel {
    color: #fff;
    font-weight: 300;
    font-size: 20px;
    margin-left: 4px;
    line-height: normal;
    top: -1px;
    display: inline-block;
    position: absolute;
    right: 6px;
}
.filter-cancel:hover {
    color:#fff;
    text-decoration:none;
    opacity:0.8;
    }
.clear-all-filter {
    border: 0px;
    color: #2D788D;
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    margin-left:10px;
    outline:none;

}
    .clear-all-filter:focus, .clear-all-filter:active {
        outline:none;
    }

.plans-more-info {
    padding-right: 0px;
    padding-left: 30px;
}
.av-plans-feature {
    padding-left:0px;
}
.av-choose-plan-btn {
    min-width:140px;
}

.all-plans-list-wrapper {
    display: flex;
    gap: 17px;
    justify-content: space-between;
    padding-bottom:15px;
}
.filter-sidebar {
    display: flex;
    width: 240px;
    height: 100%;
    padding: 17px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    flex-shrink: 0;
    border-radius: 12px;
    border: 1px solid var(--slate-200, #E2E8F0);
    background: #FFF;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10);
  /*  position: sticky;
    top: 130px;*/
}
.filter-group {
    border-bottom: 1px #E2E8F0 solid;
    padding-bottom:10px;
    width:100%;
}
.filter-title {
    color: #274552; 
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    padding:10px 0px;
    position:relative;
    cursor:pointer;
}
.filter-content {
    padding-top: 10px;
    max-height: 180px;
    overflow-y: auto;
   
}
.plans-filter-section {
    width:100%;
}
.custom-scrollbar {
    padding-right: 6px;
}
/* Force scrollbar to always display */
.custom-scrollbar .mCSB_scrollTools {
    width: 4px;
    opacity: 1 !important;
    visibility: visible !important;
}

    .custom-scrollbar .mCSB_scrollTools .mCSB_draggerRail {
        background-color: #FCACA5;
        width: 4px;
    }

    .custom-scrollbar .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
        background-color: #FCACA5 !important;
        width: 4px;
        border-radius: 10px;
    }

    .custom-scrollbar .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
        background-color: #ef9992 !important;
    }

    .custom-scrollbar .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {
        background-color: #ef9992 !important;
    }

    .custom-scrollbar .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {
        background-color: #ef9992 !important;
    }
.filter-title:after {
    background: url(../images/down-arrow-balck.svg) no-repeat center right;
    width: 17px;
    height: 16px;
    border: 0px;
    position: absolute;
    top: 0;
    bottom: 0px;
    right: 0px;
    margin: auto;
    content: "";
    filter: brightness(0.5);
    background-size: 15px;
    transform: rotate(360deg);
}
.filter-group.active .filter-content {
    display: block;
}
.usages-filter {
    border-radius: 6px;
    border: 1px solid #CBD5E1;
    background: #FFF;
    padding:4px 5px;
    text-align:left;
}
.usages-filter ul {
    width: 100%;
}
/**********Three Rates plans css************/
.three-rates-section {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-bottom: 30px;
    padding-top: 14px;
}

.rate-type-option {
    padding: 0px 12px;
    position: relative;
}

    .rate-type-option:first-child:before {
        display: none;
    }

    .rate-type-option:before {
        background: #D7DDE1;
        height: 27px;
        width: 1px;
        content: "";
        left: 0px;
        position: absolute;
        margin: auto;
        top: 0px;
        bottom: 0px;
    }

.three-group-price {
    color: #758890;
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
}

.three-group-plan-type {
    color: #758890;
    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
    padding-top: 1px;
}

.rate-type-option.active .three-group-price {
    color: #2D788D;
    font-size: 24px;
    font-weight: 600;
    position: relative;
    bottom: 1px;
}

.rate-type-option.active .three-group-plan-type {
    color: #2D788D;
    font-size: 11px;
    font-weight: 500;
    padding-top: 3px;
}

.rec-plan-bill-estimate span {
    color: #2D788D;
    font-weight: 700;
}

@media only screen and (max-width: 767px) {
    .rate-type-option {
        padding: 0px 8px;
    }

        .rate-type-option.active .three-group-price {
            font-size: 20px;
        }
}

/**********End Three Rates plans css************/
	



.paymetric_theme {
    height: 480px;
    width: 100% !important;
    border: 0px;
}
    .usages-filter ul li {
        display: block;
        vertical-align: middle;
        padding: 0px 2px;
        font-size:14px;
        width:100%;
    }


.usages-filter input[type="radio"] {
    opacity: 0;
    float: left;
    width: 0;
}

    .usages-filter label {
        color: var(--primary-color-new);
        font-size: 14px;
        font-weight: 500;
        padding: 8px 10px;
        border-radius: 4px;
        background: #FFF;
        width: 100%;
        margin: 0px;
        cursor: pointer;
    }

.usages-filter input[type="radio"]:checked + label {
    background-color: #FFF3EE !important;
    color: #DB3627 !important;
    font-weight: 600 !important;
}


.required-msg {
    font-size: 0.9em;
    color: #666;
    font-style: italic;
    display: block;
    padding-bottom: 10px;
}

#vbbv2_autopay {
    padding-left: 20px;
}
.phone_num_nowrap {
    white-space: nowrap
}
.common-filter {
    list-style: none;
    margin: 0;
    background: #fff;
}

    .common-filter li {
        margin-bottom: 5px;
        display: flex;
        position: relative;
        padding-left: 22px;
    }

        .common-filter li:last-child {
            margin-bottom: 0;
        }

.filter-checkbox {
    appearance: none;
    width: 14px;
    height: 14px;
    border: 1px solid #E5E7EB;
    border-radius: 2px;
    cursor: pointer;
    position: absolute;
    vertical-align: middle;
    left:0px;
    top:2px;
}

    .filter-checkbox:checked {
        background-color: #DB3627;
        border-color: #DB3627;
    }

        .filter-checkbox:checked::after {
            content: '';
            position: absolute;
            left: 4px;
            top: 0px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 2.5px 2.5px 0;
            transform: rotate(45deg);
        }

.filter-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-color-new);
    width: 100%;
}
.filter-checkbox:checked + .filter-label {
    color: #DB3627;
}
.filter-text {
    flex: 1;
}

.filter-count {
    color: var(--primary-color-new);
}
.star-filter-icon {
    background: url(../images/star-filter.svg) no-repeat;
    width:16px;
    height:16px;
    margin-right:4px;
    display:inline-block;

}
.middle-frame .rec-plans-filter {
    display:none;
}
.select-filter .star-filter-icon {
    filter: sepia(1);
    margin: 0px 0px 0px 4px;
    width: 12px;
    height: 12px;
    background-size: 12px;
    position: relative;
    top: 2px;
}
/*********Bootstrap 5.2 css changes********/
.form-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}
.form-group {
    margin-bottom: 1rem;
}
.form-row > .col, .form-row > [class*=col-] {
    padding-right: 5px;
    padding-left: 5px;
}
.stepform .card-body {
    border-top:0px;
}
.datepicker .input-group-text {
    height: 38px;
    border-radius: 0px .375rem .375rem 0px;
}
.stepform .card-header h5 {
    text-decoration:none;
}

.form-check-inline .form-check-input {
    position: static;
    margin-top: 0;
    margin-right: .3125rem;
    margin-left: 0;
}
.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}
.modal-header .close {
    border: 0px;
    background: transparent;
}
label {
    display: inline-block;
    margin-bottom: .5rem;
}
.text-right {
    text-align:right;
}
.pagination .page-item.active .page-link {
    color:#fff;
}
.pagination li.page-item.disabled a.page-link {
    color:#ccc;
}
#usagesselectoption-mobile {
    display:none;
 }
.common-filter li.hidden-filter-item {
    display: none;
}

.scroll-place.custom-scrollbar {
    /* height: 220px;
    overflow-y: auto;*/
}

.view-more-btn {
    border: 0px;
    background: none;
    text-decoration: underline;
    font-weight: 600;
    padding-top: 10px;
    color: #0891b2;
}
.filter-content .mCustomScrollBox {
    margin-bottom:10px;
}
/*********End Bootstrap 5.2 css changes********/
/*******End filter design *******/
/******End Compare plans*********/

/****Start Post-Submit Exception Offer CSS****/
.offers-modal .modal-dialog {
    max-width: 1440px;
}

.offers-close {
    position: absolute;
    right: 50px;
    top: 30px;
    border: 0px;
    background: transparent;
    color: #2B6273;
    font-size: 14px;
    font-weight: 400;
    opacity: 0.6;
}

    .offers-close:hover {
        opacity: 1;
    }

.offers-modal .modal-dialog .modal-content {
    padding: 60px 115px;
    background: #F0FAFB;
    border-radius: 0px;
    border: 0px;
}

.offering-img img {
    border-radius: 15px;
    max-width: 100%;
}

.offers-message {
    color: #2D788D;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    padding-bottom: 20px;
}

.offers-title {
    color: #0A0A0A;
    font-size: 38.1px;
    font-weight: 400;
    line-height: 54px;
    letter-spacing: -0.952px;
}

.offers-plan-list-wrapper {
    padding-top: 15px;
}

.offers-column-group {
    display: flex;
    width: 100%;
    gap: 45px;
    align-items: center;
}

.offers-content-column {
    width: 50%;
}

.offers-column-right {
    width: 50%;
}



.offers-plan-item {
    padding: 24px;
    align-items: center;
    text-align: center;
    border: 2px #EF5B4E solid;
    border-radius: 12px;
    background: radial-gradient(508.9% 75.48% at 50% 27.64%, #FFF 91.07%, #FEE4E2 100%);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
    width: 100%;
}

    .offers-plan-item:hover {
    }

.offers-company-logo {
    display: flex;
    text-align: center;
    justify-content: center;
    padding-bottom: 20px;
}

    .offers-company-logo img {
        width: auto !important
    }

.offers-plans-title {
    color: #274552;
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: -0.4px;
    padding-bottom: 10px;
}

.offers-plans-price {
    color: #274552;
    font-size: 30px;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: -0.75px;
    padding-bottom: 5px;
}

.offers-plans-kwh {
    color: #758890;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    padding-bottom: 5px;
}

.offers-plans-terms {
    color: #495355;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    padding-bottom: 15px;
}

.offers-signup-btn {
    border-radius: 6px;
    background: #EF5B4E;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    color: #FFF;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    padding: 8px 20px;
    min-width: 165px;
    display: inline-block;
}

    .offers-signup-btn:hover {
        color: #FFF;
        text-decoration: none;
        background: #db5448;
    }

.offers-document-list {
    padding-top: 20px;
    text-align: left;
}

    .offers-document-list li {
        margin-bottom: 10px;
        position: relative;
        padding-left: 30px;
        padding-top: 3px;
        color: #2D788D;
        font-size: 14px;
    }

        .offers-document-list li:last-child {
            margin-bottom: 0px;
        }

        .offers-document-list li:after {
            position: absolute;
            left: 0px;
            top: 0px;
            content: "";
            width: 24px;
            height: 24px;
            border-radius: 5px;
            background: #F0FAFB url(../images/file-offers.svg) no-repeat center;
        }

        .offers-document-list li a {
            color: #2D788D;
            font-size: 14px;
        }

.paynow-button {
    text-align: center;
    min-width: unset;
    padding: 10px 20px;
}

.offers-paynow-section {
    position: relative;
}

    .offers-paynow-section .offers-plan-item {
        width: 264px;
        border-color: #E2E8F0;
        background: #fff;
        position: absolute;
        left: 50%;
        bottom: -20px;
    }

        .offers-paynow-section .offers-plan-item .offers-plans-extra-info {
            display: none;
        }

.offers-plans-extra-info p {
    color: #2C353F;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
}

.offers-loader {
    position: absolute;
    left: 0px;
    margin: auto;
    width: 320px;
    right: 0px;
    top: 0px;
    bottom: 0px;
}

.offers-modal .modal-dialog .modal-content {
    min-height: 650px;
}

.offers-loader .sparkle-loader-wrapper {
    text-align: center;
    padding: 40px 0;
    position: relative;
    background: transparent;
}
.confirm-otp-section {
    
}
    .confirm-otp-section .modal-title {
        text-align: center;
        color: #0A0A0A;
        font-size: 38px;
        font-weight: 400;
        padding-bottom: 25px;
    }

    .confirm-otp-section .modal-body {
        padding: 24px;
        align-items: center;
        text-align: left;
        border: 2px #EF5B4E solid;
        border-radius: 12px;
        background: radial-gradient(508.9% 75.48% at 50% 27.64%, #FFF 91.07%, #FEE4E2 100%);
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
        width: 100%;
    }
.available-plans-item .av-plans-details .row .plans-column3 .col-sm-6 {
    padding-right:10px;
}
.custom-selectbox {
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
    border: 1px solid #ced4da;
    border-radius: .375rem;
    height: 40px;
}

    .custom-selectbox .selectbox {
        width: 100%;
        border: 0px;
        border-radius: .375rem;
        padding: 3px 5px;
        height: 38px;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
    }

        .custom-selectbox .selectbox:focus {
            color: #212529;
            background-color: #fff;
            border-color: #86b7fe;
            outline: 0;
            box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
        }

/****End Post-Submit Exception Offer 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: 20px;
    
}

    .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;
    }
    /****Footer css End***************/

/*******Filter new design css*******/

/*************************************************/
/***************Responsive css*********************/
/*************************************************/

@media only screen and (min-device-width : 770px) and (max-device-width : 1200px) {
    .rec-phone, .plans-more-details .rec-more-details {
        font-size: 13px;
        padding: 7px 11px 7px 35px;
    }

    .av-plans-kwh-price, .av-plans-price {
        font-size: 18px;
    }

    .all-available-plan-list-row .av-plans-details .row .plans-column1 {
        width: 25%;
    }

    .all-available-plan-list-row .av-plans-details .row .plans-column2 {
        width: 75%;
        padding-bottom: 10px;
        padding-right:5px;
    }

    .all-available-plan-list-row .av-plans-details .row .plans-column3 {
        width: 100%;
        clear: both;
        border-radius: 8px;
        background: #f9fafb;
        padding: 10px 25px 8px 25px
    }

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

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

        .plans-column3 .av-plans-button-group ul {
            display: flex;
            align-items: center;
        }

            .plans-column3 .av-plans-button-group ul li {
                padding-bottom: 0px;
                padding: 0px 5px;
            }

    .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 10px 8px 10px;
        justify-content: center;
        align-items: center;
        display: flex;
    }

    .plans-more-info {
        border-radius: 8px;
        background: #f9fafb;
        padding: 20px 15px 10px 40px;
        min-height: 130px;
    }

    .av-choose-plan-btn {
        padding: 8px 10px;
    }

    .av-plans-feature {
        min-height: inherit;
    }

    .all-available-plan-list-row .av-plans-details .row .plans-column2 .col-sm-4 {
        padding-left: 5px;
        padding-right: 5px;
    }

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

    .footer-mega-menu {
        width: 70%;
    }

    .footer-links-section .footer-links-column {
        width: 30%;
    }

    .footer-contact-info, .footer-contact-info a {
        font-size: 16px;
    }

    .recommended-plans-content {
        padding: 25px 15px;
    }
    .av-plans-button-group ul {
        justify-content: end;
    }
    .av-plans-phone {
        font-size:14px;
    }
}


@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******************/

@media (max-width:1024px) {
    .middle-frame .rec-plans-filter {margin-bottom:0px;    }
    .select-filter {
        display: inline-block;
        margin: 3px 5px 3px 0px;
    }
    .filter-sidebar {
        display: none;
    }
    .filter-details {
        display:none!important;
    }
    .filter-footer {
        justify-content: space-between;
        display: flex;
    }
    .filter-footer button{
        width:48%;
    }
    .middle-frame {
        border-radius: 0;
        background: transparent;
        padding: unset;
    }
    .new-mobile-filter .filter-sidebar {
        display: block;
        width: 100%;
        position: relative;
        top: 0px;
        box-shadow: none;
        border: 0px;
        padding: 0;
    }
  .new-mobile-filter .modal-body {
    padding: 0px;
}
    .middle-frame .rec-plans-filter {
        display: block;
    }
        .middle-frame .rec-plans-filter .av-plans-filter-inner .filter-buttons-mobile {
            display:flex;
        }
    .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;
        }

        .plans-filter-section {
            width: 100%;
        }
.mobile-filter-popup.new-mobile-filter .modal-body {
    padding-bottom: 70px;
}
    .new-mobile-filter .button {
        background: var(--hover-color-new);
    }

    .new-mobile-filter .button-light {
        border: 1px solid var(--slate-200, #E2E8F0);
        background: #FFF;
        color: var(--hover-color-new);
    }
        .new-mobile-filter .button-light path {
            stroke: var(--hover-color-new);
        }

    .new-mobile-filter .modal-header .close {
        top: 7px;
    }
    .av-plans-feature li:last-child {
        padding-bottom:6px;
        margin-bottom:0px;
        min-height:inherit
    }
    .av-plans-feature {
        min-height:auto;
    }
   

}

@media (max-width:767px) {
    .form-row > .col, .form-row > [class*=col-] {
        width: 100%;
    }
    .featured-plans-inner {
        padding: 0;
        border-radius: 0px;
        background: transparent;
    }
    .new-theme-design .rec-plans-section:before, .new-theme-design .rec-plans-section:after {
        background: none;
    }
    .header {
        background: #ECF4F7;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    }
    .new-theme-design .av-plans-heading h3 {
        font-size: 18px;
    }

}


@media screen and (max-width: 1400px) {
    .offers-modal .modal-dialog .modal-content {
        padding: 50px;
    }

    .offers-modal .modal-dialog {
        max-width: 1200px;
    }
}

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

    .offers-modal .modal-dialog {
        max-width: 1080px;
    }
}

@media screen and (max-width: 1100px) {
    .offers-modal .modal-dialog .modal-content {
        padding: 50px 20px;
    }

    .offers-title {
        font-size: 25px;
        line-height: normal;
    }
}
@media (max-width:991px) {
    .footer-top h2 {
        font-size: 24px;
    }

    .offers-column-right {
        display: none;
    }

    .offers-content-column {
        width: 100%;
        max-width: 100%;
        flex: unset;
    }

    .offers-modal .modal-dialog {
        margin: 0px;
        height: 100%;
    }

        .offers-modal .modal-dialog .modal-content {
            height: 100%;
        }

    .offers-close {
        left: 0px;
        right: 0px;
        top: 20px;
        width: 98px;
        margin: auto;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
    }

        .offers-close svg {
            width: 13px;
        }

    .offers-message {
        text-align: center
    }

    .offers-title {
        text-align: center;
        line-height: 32px;
    }

    .offers-modal .modal-body {
        padding: 15px;
    }

    .offers-modal .modal-dialog .modal-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    .offers-paynow-section .offers-plan-item {
        width: unset;
        position: relative;
        left: unset;
        bottom: unset;
        max-width: 500px;
        margin: auto;
        border-color: #000;
    }

        .offers-plans-extra-info, .offers-paynow-section .offers-plan-item .offers-document-list {
            display: none;
        }

        .offers-paynow-section .offers-plan-item .offers-plans-extra-info {
            display: block;
            border-top: 1px solid #E5E7EB;
            padding-top: 20px;
            margin-top: -5px;
        }

    .offers-paynow-section .offers-title {
        margin-bottom: 25px;
    }
    .otp-textbox-section input {
        width:40px;
        height:40px;
    }
}

    @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*********/
    .tdsp_group {
        display: flex;
        justify-content: center;
        gap: 15px;
    }

    .black-bg {
        background: #000;
    }

@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 20px;
        }

        .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: 14px;
        }

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

        .filter-section-desktop {
            padding: 10px 0px;
        }



        .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) {
        .av-plans-filter-inner .custom-selectbox {
            padding-right: 2px;
            padding-left: 2px;
            min-width: 100px;
        }

        .av-plans-filter-inner .zipcode-dropdown .dropdown button.dropdown-toggle {
            padding-right: 8px;
            padding-left: 10px;
        }
    }


    @media only screen and (max-width: 768px) {
        .plans-logo-more a.av-more-details {
            display:none;
        }
        .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 15px;
        }

        .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 {
            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-right: -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***************************/
        

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

            .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: 10px;
            padding-left:10px;
        }

        .available-plans-item .av-plans-details .row .plans-column3 {
            padding-right: 10px;
            padding-left:10px;
        }
            .available-plans-item .av-plans-details .row .plans-column3 .col-sm-6 {
                padding-right: 10px;
                padding-left: 10px;
            }
        .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;
        }

        .footer .container {
            padding-left: 0px;
            padding-right: 0px;
        }

        .subscribe-lable {
            width: 100%;
            text-align: center;
        }

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

        .footer-copyright-section .footer-copyright-left {
            color: #D1D5DB;
        }

        .footer-copyright-section .footer-last-links {
            padding: 0px 10px;
        }
    }
    /******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;
                }
    }

  

    #mob_lastdigits {
        color: #000;
        font-weight: bold;
        font-size: 17px;
    }

    .barcode-frame {
        border-radius: 8px;
        border: 1px solid #E2E8F0;
        background: rgba(237, 246, 248, 0.46);
        text-align: center;
        padding: 25px;
        margin-bottom: 15px;
    }

    .identity-verification-content {
        max-width: 460px;
    }

        .identity-verification-content .modal-header .modal-title {
            font-size: 18px;
            color: #0F172A;
        }

        .identity-verification-content p {
            font-size: 16px;
            color: #0A0D13;
            line-height: 22px;
        }

            .identity-verification-content p a {
                text-decoration: underline;
            }

        .identity-verification-content .modal-footer {
            text-align: center;
            border: 0px;
            justify-content: center;
        }

    .skip-btn {
        width: 80px;
        color: #0F172A;
        font-size: 14px;
        border-radius: 6px;
        border: 1px solid #E2E8F0;
        background: #FFF;
        padding: 10px 15px
    }

        .skip-btn:hover, .skip-btn:active, .skip-btn:focus {
            background: #f1f1f1 !important;
            color: #0F172A !important;
            border-color: #ced4db !important
        }

    .identity-verification-content .button-orange {
        width: 184px;
        border: 0px;
        font-size: 14px;
        padding: 10px 15px;
        border-radius: 6px;
    }

        .identity-verification-content .button-orange:focus, .identity-verification-content .button-orange:active, .identity-verification-content .button-orange:hover {
            background: #e15448 !important
        }

    @media only screen and (max-width: 768px) {
        .identity-verification-content {
            height: calc(100% - 1rem);
        }

            .identity-verification-content .modal-content {
                height: 100%;
            }

        .barcode-frame {
            display: none;
        }

    .identity-verification-content .modal-content .modal-header {
        padding-top: 30px;
    }

    .offers-plan-list-wrapper {
        margin-left: -15px;
        margin-right: -15px;
    }

    .offers-message {
        padding-bottom: 10px;
    }

    .offers-plan-list-wrapper .owl-theme .owl-dots .owl-dot.active span {
        width: 24px;
        height: 12px;
        background: #2D788D;
    }

    .offers-plan-list-wrapper .owl-theme .owl-dots .owl-dot span {
        width: 12px;
        height: 12px;
    }

    .offers-plan-list-wrapper .owl-theme .owl-dots {
        margin-top: 20px !important;
    }

    .paynow-button {
        min-width: 165px;
    }

    .offers-plans-extra-info p {
        text-align: center;
        font-size: 16px;
        line-height: 24px;
    }

        .select-filter {
            border-radius: 4px;
            padding: 4px 6px;
            font-size: 12px;
            padding-right: 24px;
            display: inline-block;
            margin-bottom: 3px;
            margin-right: 3px;
        }

        .identity-verification-content .modal-content .modal-header {
            padding-top: 30px;
        }
        .filter-details {
            display:none!important;
        }
        #usagesselectoption-mobile {
            display: block;
            border: 1px solid #D9F0F4;
            padding-right: 10px;
            border-radius: 6px;
        }
        #usages-select-box-mobile {
            background: transparent;
           border:0px;
            color: #2d788d;
           
            font-size: 14px;
            min-width: 100px;
            text-align: left;
            padding: 7px 0px 7px 6px;
            height: 37px;
        }
        .select-filter {
            margin-right:2px;
        }

    .offers-paynow-section .offers-plan-item .offers-plans-extra-info {
        padding-top: 10px;
    }

    .offers-title {
        font-size: 24px;
    }

    .offers-modal .modal-body {
        padding-top: 10px;
    }
        .more-details-button {
            padding-top: 5px;
            padding-bottom: 5px;
        }
}

@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;
        margin-right:3px; 
    }
}