body, html {
    height: initial;
    font-family: var(--font_normal);
}
body {
    height: 100%;
    overflow: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
    body.modal-open {
        overflow-y: hidden;
    }
    img {
        -ms-interpolation-mode: bicubic;
    }
.tooltip-footer button.btn.btn-primary:focus {
    background-color: #0275d8;
}
.position-relative {
    position: relative;
}
/* Typography */
body .container-fluid.body-content {
    min-height: 100vh;
}
.ff-light {
    font-family: var(--font_light);
}

.ff-reg {
    font-family: var(--font_normal);
}

.ff-b {
    font-family: var(--font_bold);
}
a, label, ul, li,
button, input, optgroup, h1, h2, h3, h4, h5, h6,
body, div, table, input, select, textarea {
    font-family: var(--font_normal);
    font-weight: 400;
}

.list-style-none{
    list-style:none;
}

.w60{
    width: 60%;
}

.w40{
    width: 40%;
}

.f12 {
    font-size: 12px;
}
.f14 {
font-size:14px;
}

.f16 {
    font-size: 16px;
}

.f18 {
    font-size: 18px;
}
.f20{
    font-size:20px;
}

.lh-40{
    line-height:40px;
}
.lh-36 {
    line-height: 36px;
}
.lh-34{
    line-height:34px;
}

/* common padding  */
.padding-0 {
    padding: 0;
}

.padding-5 {
    padding: 5px;
}

.padding-10 {
    padding: 10px;
}

.padding-14 {
    padding: 14px;
}

.padding-15 {
    padding: 15px;
}

.padding-20 {
    padding: 20px;
}

.padding-28 {
    padding: 28px;
}

.padding-30 {
    padding: 30px;
}

.padding-35 {
    padding: 35px;
}

.padding-top-0 {
    padding-top: 0px;
}

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

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

.padding-top-14 {
    padding-top: 14px;
}

.padding-top-15 {
    padding-top: 15px;
}

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

.padding-top-25 {
    padding-top: 25px;
}

.padding-top-22 {
    padding-top: 22px;
}
.padding-top-30 {
    padding-top: 30px;
}

.padding-top-35 {
    padding-top: 35px;
}

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

.padding-top-50 {
    padding-top: 50px;
}

.padding-top-60 {
    padding-top: 60px;
}

.padding-top-70 {
    padding-top: 70px;
}

.padding-left-0 {
    padding-left: 0;
}

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

.padding-left-7 {
    padding-left: 7px;
}
.padding-left-10 {
    padding-left: 10px;
}

.padding-left-14 {
    padding-left: 10px;
}

.padding-left-15 {
    padding-left: 15px;
}

.padding-left-20 {
    padding-left: 20px;
}

.padding-left-25 {
    padding-left: 25px;
}

.padding-left-28 {
    padding-left: 28px;
}

.padding-left-30 {
    padding-left: 30px;
}

.padding-left-34 {
    padding-left: 34px;
}
.padding-left-35 {
    padding-left: 35px;
}

.padding-left-40 {
    padding-left: 40px;
}

.padding-left-45 {
    padding-left: 45px;
}

.padding-left-48 {
    padding-left: 48px;
}

.padding-left-50 {
    padding-left: 50px;
}

.padding-left-58 {
    padding-left: 58px;
}

.padding-left-60 {
    padding-left: 60px;
}

.padding-left-70 {
    padding-left: 70px;
}

.padding-left-72 {
    padding-left: 72px;
}

.padding-left-75 {
    padding-left: 75px;
}

.padding-left-80 {
    padding-left: 80px;
}

.padding-right-0 {
    padding-right: 0;
}

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

.padding-right-15 {
    padding-right: 15px;
}

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

.padding-right-30 {
    padding-right: 30px;
}

.padding-right-35 {
    padding-right: 35px;
}

.padding-right-40 {
    padding-right: 40px;
}

.padding-right-50 {
    padding-right: 50px;
}

.padding-right-60 {
    padding-right: 60px;
}

.padding-bottom-0 {
    padding-bottom: 0;
}

.padding-bottom-5 {
    padding-bottom: 5px;
}

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

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

.padding-bottom-14 {
    padding-bottom: 14px;
}

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

.padding-bottom-28 {
    padding-bottom: 28px;
}

.padding-bottom-30 {
    padding-bottom: 30px;
}

.padding-bottom-40 {
    padding-bottom: 40px;
}
.valign-middle {
vertical-align:middle;
}
.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

/*common margin*/
.margin-0 {
    margin: 0px;
}

.margin-10 {
    margin: 10px;
}

.margin-15 {
    margin: 15px;
}

.margin-20 {
    margin: 20px;
}

.margin-30 {
    margin: 30px;
}

.margin-35 {
    margin: 35px;
}

.margin-40 {
    margin: 40px;
}


.margin-top-5 {
    margin-top: 5px;
}

.margin-top-8 {
    margin-top: 8px;
}

.margin-top-10 {
    margin-top: 10px;
}

.margin-top-12 {
    margin-top: 12px;
}

.margin-top-14 {
    margin-top: 14px;
}

.margin-top-15 {
    margin-top: 15px;
}

.margin-top-20 {
    margin-top: 20px;
}

.margin-top-28 {
    margin-top: 28px;
}

.margin-top-30 {
    margin-top: 30px;
}

.margin-top-35 {
    margin-top: 35px;
}

.margin-top-40 {
    margin-top: 40px;
}

.margin-top-50 {
    margin-top: 50px;
}

.margin-top-60 {
    margin-top: 60px;
}

.margin-top-65 {
    margin-top: 65px;
}

.margin-top-120 {
    margin-top: 120px;
}

.margin-top-2 {
    margin-top: 2px;
}

.margin-bottom-0 {
    margin-bottom: 0;
}

.margin-bottom-5 {
    margin-bottom: 5px;
}

.margin-bottom-2 {
    margin-bottom: 2px;
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.margin-bottom-15 {
    margin-bottom: 15px;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.margin-bottom-30 {
    margin-bottom: 30px;
}

.margin-bottom-40 {
    margin-bottom: 40px;
}

.margin-bottom-50 {
    margin-bottom: 50px;
}

.margin-bottom-60 {
    margin-bottom: 60px;
}

.margin-bottom-70 {
    margin-bottom: 70px;
}

.margin-left-10 {
    margin-left: 10px;
}
.margin-left-16 {
    margin-left: 16px;
}
.margin-left-20 {
    margin-left: 20px;
}

.margin-left-24 {
    margin-left: 24px;
}

.margin-left-28 {
    margin-left: 20px;
}

.margin-left-30 {
    margin-left: 30px;
}

.margin-left-35 {
    margin-left: 35px;
}

.margin-left-40 {
    margin-left: 40px;
}

.margin-left-50 {
    margin-left: 50px;
}

.margin-left-60 {
    margin-left: 60px;
}

.margin-left-70 {
    margin-left: 70px;
}

.margin-right-0 {
    margin-right: 0px;
}

.margin-right-10 {
    margin-right: 10px;
}

.margin-right-20 {
    margin-right: 20px;
}

.margin-right-30 {
    margin-right: 30px;
}

.margin-right-35 {
    margin-right: 35px;
}

.margin-right-40 {
    margin-right: 40px;
}

.margin-right-50 {
    margin-right: 50px;
}

.margin-right-60 {
    margin-right: 60px;
}

align-center {
    text-align: center
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.txt-align-rignt {
    text-align: right;
}

.txt-align-left {
    text-align: left;
}

.txt-align-center {
    text-align: center;
}

.inline-block-disp {
    display: inline-block;
}

.block-disp {
    display: block;
}

.none{
    display:none;
}

.cursor-pointer {
    cursor: pointer;
}
a.dropdown-item:not([href]):not([tabindex]),
.dropdown-item {
    color: #666;
}
.dropdown-header {
    color:#000;
}

.text-clr-green, .text-clr-green:hover {
    color: var(--action_clr);
}

.footer-bottom {
    color: white;
    font-size: 12px;
    bottom: 0;
    left:0px;
    margin:0px;
    min-width: 100%;
    position: absolute;
}

.container-fluid.body-content {
    padding-bottom: 66px;
}
.top-banner-background {
    /*background-image: -webkit-gradient(linear,left top, right top,color-stop(0, rgba(61,57,147,1)),color-stop(50%, rgba(164,56,149,1)),to(rgba(237,24,99,1)));
    background-image: -o-linear-gradient(left,rgba(61,57,147,1) 0,rgba(164,56,149,1) 50%,rgba(237,24,99,1) 100%);
    background-image: linear-gradient(90deg,rgba(61,57,147,1) 0,rgba(164,56,149,1) 50%,rgba(237,24,99,1) 100%);*/
    background: var(--action_clr);
}

.bg-gray {
    background-color: #f7f7f7;
}

.bg-color {
    background-color: #f8f8f8;
}
.top-banner-height {
    position: relative;
    z-index: 2;
}

.breadcrumb {
    background: none;
    color: #FFFFFF;
    padding: 15px 1rem .75em 0px;
}

.breadcrumb-item > a, .breadcrumb-item.active {
    color: #FFFFFF;
    text-decoration: none;
    background-color: transparent;
    font-family: var(--font_light);
    font-size: 24px;
    cursor:default;
}

.breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    padding: 0 25px;
    content: url(/consumer/images/Billing/ic_right-arrow-white.png);
}

.advertisement {
    font-size: 50px;
    color: #FFFFFF;
    text-align: right;
    font-family: var(--font_light);
    position: relative;
    top: 30px;
    padding-right: 50px;
}

.top-banner-menu {
    font-size: 17px;
    line-height: 52px;
    color: rgb(201,43,67);
}


.banner-navigation {
    position: absolute;
    bottom: 0;
    background-color: #FFFFFF;
    width: 97%;
}

.horizontal-divider {
    border-bottom: 1px solid #e5e5e5;
}

.no-border {
    border: none;
}

.no-border-bottom {
    border-bottom: none;
}

.drop select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url('/consumer/images/ic_downarrow.png') no-repeat;
    background-position: 99% 60%;
    text-indent: 1.00px;
    text-overflow: "";
}

    .content-banner-navigation {
        position: relative;
        margin-top: 20px;
        background-color: #FFFFFF;
        width: 100%;
        /*border-bottom: 1px solid #e2e2e2;*/
    }
        .content-banner-navigation .nav.nav-tabs li:first-child:after {
            content: '';
            position: absolute;
            display:block;
            left: 0px;
            top:100%;
            width: 100%;
            border-bottom: 1px solid #e2e2e2;
        }
        
        .nav-tabs {
            border: none;
        }

    .nav.nav-tabs {
        padding-left: 35px;
    }

        .nav.nav-tabs > li {
            padding-right: 35px;
            display: flex;
            align-items: center;
        }

            .nav.nav-tabs > li > a {
                padding-left: 0px;
                padding-right: 0px;
            }

    @media (min-width: 992px) {
        .navTab-link {
            padding-right: .5rem;
            padding-left: .5rem;
        }
    }

    .navTab-link {
        display: block;
        padding: 20px 0;
    }

    .status-item > a {
        font-size: 18px;
        color: #444;
        font-family: var(--font_normal);
        text-decoration: none;
        border-bottom: 1px solid transparent;
    }

    .status-item.active > a {
        font-size: 18px;
        color: var(--color-purple) !important;
        font-family: var(--font_normal);
        text-decoration: none;
        border-bottom: 1px solid;
    }

    .status-item-single {
        font-size: 18px;
        line-height:18px;
        color: var(--color-purple);
        font-family: var(--font_normal);
        text-decoration: none;
        cursor: default;
    }
.text-pink {
    color: var(--color-purple);
}
.accordin-header-color-white {
        background-color: #ffffff;
    }

    .accordin-content-color {
        background-color: #FBFBFB;
    }

    .card-header-bg-none {
        background: none;
        border: none;
    }
.card-header {
        cursor: pointer;
    }
    /* accordian*/
    /*Save button in billing summary*/
    .save-btn {
        color: #FFFFFF;
        background-color: #4a3c92;
        font-family: var(--font_normal);
        font-size: 18px;
        padding: 5px;
        border-radius: 5px;
        text-align: center;
    }

    .cancel-btn {
        color: #666666;
        font-family: var(--font_normal);
        font-size: 18px;
    }

    a, a:active, a:hover, a:visited {
        text-decoration: none !important;
        outline-width: 0px !important;
    }

    .line-horizontal-border-btm {
        border-bottom: 1px solid #cccccc;
    }

    .line-horizontal-border-top {
        border-bottom: 1px solid #cccccc;
    }

    .control-label:after {
        padding-left: 5px;
        content: "*";
        color: red;
        font-size: 16px;
    }

    .tooltip {
        z-index: 1 !important;
    }
    .statusindicator .card-header {
        border-left: 15px solid var(--color-purple);
    }

    .statusindicator.collapsed .card-header {
        border-left: 15px solid transparent !important;
    }
.gokinetic-page .statusindicator.collapsed .card-header {
    border-left: 15px solid transparent !important;
}
.gokinetic-page .statusindicator .card-header {
    border-color: var(--action_clr) !important;
}

button[disabled], button[disabled]:focus {
    background-color: #cecece !important;
    cursor: not-allowed !important;
    border-color: #cecece !important;
}

    .col-md-4.advertisement {
        display: none;
    }

    .w-88 {
        width: 88%;
    }

    .text-initial {
        text-indent: initial;
    }

    .bankacc-space {
        padding: 5px 0;
    }

    .list-group {
        -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
        z-index: 5 !important;
    }

        .list-group .list-group-item {
            background-color: #fff !important;
            z-index: 5 !important;
            text-align: left;
        }

    .innerContent {
        padding: 0 15px;
    }

    .tooltip .tooltiptext {
        margin-top: 10px;
        border: 0px;
        box-sizing: border-box;
        -webkit-box-shadow: 0px 0px 30px 0px rgba(230,230,230,1);
        -moz-box-shadow: 0px 0px 30px 0px rgba(230,230,230,1);
        box-shadow: 0px 0px 30px 0px rgba(230,230,230,1);
    }

        .tooltip .tooltiptext:after {
            position: absolute;
            top: -6px;
            content: '';
            display: block;
            left: 4px;
            width: 0;
            height: 0;
            border-style: solid;
            z-index: 6;
            border-width: 0 10px 10px 10px;
            border-color: transparent transparent #fff transparent;
        }

        .tooltip .tooltiptext:before {
            position: absolute;
            top: -7px;
            content: '';
            display: block;
            left: 2px;
            width: 0;
            height: 0;
            border-style: solid;
            z-index: 5;
            border-width: 0 12px 12px 12px;
            border-color: transparent transparent #c5c5c5 transparent;
        }
    /*--selectpicker--*/
    .bootstrap-select > .dropdown-toggle:focus,
    .bootstrap-select > .dropdown-toggle {
        height: 100%;
        background: transparent;
        border: 0px !important;
        box-shadow: none !important;
        border-bottom: 1px solid #cecece !important;
        outline: none !important;
        line-height: initial;
        padding-left: 0px;
        font-family: var(--font_light);
        box-shadow: none !important;
        color: #666;
        outline: none !important;
        border-radius: 0px !important;
    }

    .bootstrap-select .dropdown-menu li:hover a.dropdown-item, .bootstrap-select.btn-group .dropdown-menu li a.dropdown-item,
    .bootstrap-select .dropdown-menu a.dropdown-item, .bootstrap-select.btn-group .dropdown-menu a.dropdown-item:hover, .bootstrap-select.btn-group .dropdown-menu a.dropdown-item:focus {
        font-size: 16px !important;
        font-weight: 400 !important;
        font-family: var(--font_light);
        outline: none !important;
        display: block !important;
        color: #666;
        padding: 5px 10px !important;
    }

    .bootstrap-select .dropdown-toggle .filter-option:after {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 20px;
        right: 0px;
        content: '';
        margin-top: 0px;
        vertical-align: middle;
        width: 20px;
        display: inline-block;
        background: url(/consumer/images/Dashboard/down_arrow.png) center center no-repeat;
    }

    .bootstrap-select.show .dropdown-toggle .filter-option:after {
        transform: translateY(-50%) rotate(180deg);
    }

    .bootstrap-select .dropdown-menu a.dropdown-item span.dropdown-item-inner {
        display: block;
        outline: none !important;
        box-shadow: none !important;
    }

.dropdown-menu.show[role="combobox"] {
    width: 100%;
    background: #fff;

}
    /*--selectpicker_end--*/
    /*--modal-style--*/
    .bootbox .modal-content {
        padding: 28px;
        padding-top: 40px;
        border-radius: 0px;
        position: relative;
    }

        .bootbox .modal-content .modal-header {
            display: block;
            padding-top: 0px;
            text-align: center;
            border: 0px;
        }

            .bootbox .modal-content .modal-header .modal-title {
                font-size: 32px;
                color: #333;
                line-height: 40px;
            }

        .bootbox .modal-content .close {
            display: block;
            height: 20px;
            width: 20px;
            position: absolute;
            top: 10px;
            outline: none !important;
            border: 0px;
            box-shadow: none !important;
            font-size: 0px;
            right: 10px;
            background: url(/consumer/images/close-ico.png) center center no-repeat;
            background-size: 17px;
        }

        .bootbox .modal-content .modal-body .close {
            top: 17px;
        }

        .bootbox .modal-content .modal-body {
            padding: 0px;
            position: static;
        }

            .bootbox .modal-content .modal-body .modal-desc,
            .bootbox .modal-content .modal-body .bootbox-body {
                font-size: 16px;
                line-height: 22px;
                font-weight: 400;
                text-align: center;
                color: #666;
            }

        .bootbox .modal-content .modal-footer {
            padding-bottom: 0px;
            border-top: 0px;
            display: block;
            text-align: center;
        }

        .btn_submit,
        .bootbox .modal-content .btn-primary {
            min-width: 120px;
            padding-left: 20px !important;
            padding-right: 20px !important;
            height: 48px;
            box-sizing: border-box;
            border-radius: 12px;
            outline: none !important;
            border: 2px solid var(--action_clr);
            background-color: var(--action_clr);
            font-size: 18px;
            font-family: var(--font_bold) !important;
            font-weight: bold;
            color: white;
        }
            .btn_submit:hover,
            .bootbox .modal-content .btn-primary:hover {
                border-color: var(--action_hvr_clr);
                background-color: var(--action_hvr_clr);
            }

            .btn_submit:focus,
            .bootbox .modal-content .btn-primary:focus {
                border-color: var(--color_black);
            }

            .btn_submit[disabled],
            .bootbox .modal-content .btn-primary[disabled],
            .btn_submit[disabled]:focus,
            .bootbox .modal-content .btn-primary[disabled]:focus {
                border-color: var(--action_disabled_clr);
            }

            .bootbox .modal-content .btn-primary.btn-close {
                min-width: 120px;
                height: 48px;
                padding-left: 20px !important;
                padding-right: 20px !important;
                outline: none !important;
                border-radius: 12px;
                border: 2px solid var(--action_disabled_clr);
                font-size: 18px;
                font-family: var(--font_bold) !important;
                font-weight: bold;
                color: var(--color_black) !important;
            }

                .bootbox .modal-content .btn-primary.btn-close:hover {
                    border: 2px solid var(--action_disabled_clr);
                    background: var(--clr-creamywhite);
                    color: var(--color_black);
                }

                .bootbox .modal-content .btn-primary.btn-close:focus {
                    border: 2px solid var(--color_black);
                    color: var(--color_black);
                }
                /**billing support-card**/
            .billsupport-tile {
                border: 2px solid var(--action_clr);
                background: var(--action_clr);
                border-radius: 6px;
                max-width: 400px;
                margin: 0px auto;
                overflow: hidden;
            }

            .billsupport-title {
                color: #fff;
                font-size: 22px;
                padding: 6px 28px;
            }

            .billsupport-card {
                padding: 28px 28px 0px;
                background: #fff;
                border-radius: 6px;
            }

@media screen and (min-width: 1500px) {
    .btn_submit,
    .btn_cancel,
    .bootbox .modal-content .btn-primary.btn-close,
    .bootbox .modal-content .btn-primary {
        height: 64px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        font-size: 24px;
    }
}

    .bootbox .modal-content .btn-primary.btn-email, .bootbox .modal-content .btn-primary.btn-print {
        background: transparent !important;
        color: #fff;
        padding-right: 0px;
        padding-left: 0px;
        border: 0px solid;
        margin-left: 14px;
    }


    .bootbox .modal-content .btn-primary.btn-email:before {
        background: url(/consumer/images/Billing/Email1.png) center center no-repeat;
        background-size: 18px;
        left: 14px;
    }

    .bootbox .modal-content .btn-primary.btn-print:before {
        background: url(/consumer/images/Billing/Print1.png) center center no-repeat;
        background-size: 18px;
        left: 14px;
    }

    .bill-summ-content-bg {
        background: #f7f7f7;
    }

    .invoice_nfound {
        padding: 30px 0px 20px;
        text-align: center;
        color: #666;
        font-size: 16px;
    }

    .bootstrap-select.btn-group {
        border-bottom: 1px solid #c1c1c1;
    }

    /*--modalstyle-end--*/
    /*--responsive.css--*/
   @media screen and (max-width: 1300px) {
.billing_paymentpage .bill-pay-due-other-amt {
            width: 75% !important;
            left: 36px;
        }

        .billing_paymentpage .bill-pay-past-due-title {
            font-size: 12px !important;
        }
    }

    @media screen and (min-width: 1300px) {
        .billing_paymentpage .bill-pay-due-other-amt {
            width: 65% !important;
            left: 40px;
        }

        .date-calendar span.date {
            font-size: 42px !important;
            line-height: 50px !important;
        }
    }

    @media screen and (min-width: 1400px) {
        .media-lg-28 {
            padding-left: 18px;
        }

        .innerContent {
            padding: 0px 28px;
        }

        .currentBillAcc .collapsedDivs .collapsedDivsBlock {
            margin: 0 -28px;
        }

        .media-sm-paddingx {
            padding: 0px 8px !important;
        }

        .bill-pay-past-due-val,
        .payment-due-container .dollar-sign,
        .payment-due-container {
            font-size: 26px !important;
            color: #333 !important;
            font-family: var(--font_light) !important;
        }

            .payment-due-container .payment-due-checkmark {
                top: 14px;
            }


                .payment-due-container .payment-due-checkmark:after {
                    left: 4px !important;
                }

        #payment_due .payment-due-container .payment-due-checkmark:after {
            top: 1px !important;
        }

        .container-fluid.body-content {
            padding-bottom: 79px;
        }
    }

    
     a:focus {
        outline: 0px;
    }


    .text-danger {
        font-family: var(--font_normal) !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
        margin-top: 3px !important;
    }
    button {
        cursor: pointer;
    }

    .modal {
        text-align: center;
    }

    @media screen and (min-width: 768px) {
        .modal:before {
            display: inline-block;
            vertical-align: middle;
            content: " ";
            height: 100%;
        }
    }

    .modal-dialog {
        display: inline-block;
        text-align: left;
        vertical-align: middle;
        -webkit-box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.3);
        box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.3);
    }

    .AutoPayPopUp .billpaymentmodelwidth {
        width: 600px;
        max-width: 600px;
    }

        .AutoPayPopUp .billpaymentmodelwidth .modal-footer {
            margin: 0px;
        }

    .AutoPayCancelPopUp .modal-content .modal-footer {
        padding-top: 22px;
    }

    .billpaymentmodelwidth .modal-desc, .billpaymentmodelwidth .modal-title {
        text-align: center !important;
    }

    .suspendAutoPayDiv .tooltip .tooltiptext:before {
        right: 2px;
        left: auto;
    }

    .suspendAutoPayDiv .tooltip .tooltiptext:after {
        right: 4px;
        left: auto;
    }
.redirectHome {
    display:inline-flex;
    align-items:center;
}
.redirectHome::before {
    display: inline;
    padding-right: 7px;
    content: '\e803';
    font-family: 'Kineticons';
}

    .campainText > div {
        font-family: var(--font_normal);
        margin-bottom: 10px;
        color: #666;
    }

        .campainText > div > a {
            color: #4a3c91;
        }

    @media (min-width: 1000px) {
        #createUserDiv .add-contact-input {
            min-width: 250px;
        }
    }

    @media (min-width: 1100px) {
        #createUserDiv .add-contact-input {
            min-width: 275px;
        }
    }

    @media (min-width: 1400px) {
        #createUserDiv .add-contact-input {
            min-width: 300px;
        }
    }

    @media (min-width: 1500px) {
        #createUserDiv .add-contact-input {
            min-width: 325px;
        }
    }

    @media (min-width: 1600px) {
        #createUserDiv .add-contact-input {
            min-width: 350px;
        }
    }

    @media (min-width: 1700px) {
        #createUserDiv .add-contact-input {
            min-width: 375px;
        }
    }

    @media (min-width: 1800px) {
        #createUserDiv .add-contact-input {
            min-width: 400px;
        }
    }

    @media (min-width: 1900px) {
        #createUserDiv .add-contact-input {
            min-width: 425px;
        }
    }

    @media (min-width: 1150px) {
        .userManager .searchUserBtn {
            margin-left: auto;
            margin-right: 30px;
        }

        .userManager .searchInput {
            width: 33%;
        }

        .userManager #searchInput {
            width: 100%;
        }
    }

    @media (max-width: 1399px) {
        .userManager .searchInput {
            width: 36%;
        }
    }

    @media (min-width: 1400px) {
        .userManager .searchUserBtn {
            margin: 0;
        }

        .userManager .searchInput {
            width: auto;
        }
    }
@media (max-width: 1300px) {
    .userManager .searchUserBtn {
        margin-left:0px;
    }
}
    input[type="button"]:focus {
        outline: none;
    }

    .wrapword {
        white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
        white-space: -webkit-pre-wrap; /*Chrome & Safari */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        white-space: pre-wrap; /* css-3 */
        word-wrap: break-word; /* Internet Explorer 5.5+ */
        word-break: break-all;
        white-space: normal;
    }

button.editUserDetails::before {
    content: '\e832';
    color: var(--secondary_clr);
}

    button.editUserDetails, button.deleteUserDetails {
        background: none;
        border: none;
    }

        button.deleteUserDetails::before {
            content: url("/consumer/images/Billing/ic_delete.png");
            cursor: pointer;
        }

    .k-pager-info {
        display: none;
    }

    .loading-backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1040;
        background-color: white;
    }

        .loading-backdrop.fade {
            opacity: 0;
        }

    #LoadingPanel > .loading-backdrop.fade.in {
        opacity: 0.7 !important;
        background-color: white;
    }

    .k-pager-wrap > .k-link > .k-icon {
        cursor: pointer !important;
    }
    .k-pager-wrap > .k-link.k-state-disabled > .k-icon {
        cursor: default !important;
    }

    .k-pager-wrap > .k-link, .k-grid .k-pager-numbers {
        float: none !important;
    }

    .k-pager-wrap > .k-link {
        margin: 0 10px !important;
    }

    .kendoGrid .k-pager-wrap {
        text-align: center
    }

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        .bill-pay-due-other-amt {
            padding-bottom: 10px !important;
        }
    }

    .mCustomScrollbar {
        -ms-touch-action: none;
        touch-action: none;
    }

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

    .mCustomScrollBox {
        position: relative;
        overflow: hidden;
        height: 100%;
        max-width: 100%;
        outline: none;
        direction: ltr;
    }

    .mCSB_container {
        overflow: hidden;
        /*width: 195px;*/
        height: auto;
    }

    .mCSB_inside > .mCSB_container {
        margin-right: 0px;
    }

    .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
        margin-right: 0;
    }

    .mCS-dir-rtl > .mCSB_inside > .mCSB_container {
        margin-right: 0;
        margin-left: 30px;
    }

        .mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
            margin-left: 0;
        }

    .mCSB_scrollTools {
        position: absolute;
        width: 10px;
        height: auto;
        left: auto;
        top: 0;
        right: 0;
        bottom: 0;
    }

    .mCSB_outside + .mCSB_scrollTools {
        right: -26px;
    }

    .mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
        right: auto;
        left: 0;
    }

    .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
        left: -26px;
    }

    .mCSB_scrollTools .mCSB_draggerContainer {
        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 {
        cursor: pointer;
        width: 100%;
        height: 30px;
        z-index: 1;
    }

        .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
            position: relative;
            width: 3px;
            height: 100%;
            margin: 0 auto;
            text-align: center;
        }

    .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
        width: 12px;
    }

    .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
        width: 8px;
    }

    .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown {
        display: block;
        position: absolute;
        height: 20px;
        width: 100%;
        overflow: hidden;
        margin: 0 auto;
        cursor: pointer;
    }

    .mCSB_scrollTools .mCSB_buttonDown {
        bottom: 0;
    }

    .mCSB_scrollTools .mCSB_draggerRail {
        background-color: none;
    }

    .mCSB_scrollTools .mCSB_dragger {
        right: 2px;
    }

        .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
            background-color: #000;
            width: 7px;
            opacity: 0.5;
            border-radius: 7px;
        }


    .btn.focus, .btn:focus {
        box-shadow: none;
    }

.congratsMsg {
    font-size: 32px;
    color: #7eb822;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom:10px;
}

    .congratsMsg::before {
        width: 80px;
        height: 110px;
        display: inline-flex;
        position: relative;
        content: '';
        background-repeat: no-repeat;
        background-size: 80px 80px;
        background-image: url(/consumer/images/common/congratsImg.svg);
    }

    .errorMsg {
        font-size: 32px;
        color: #FF0000;
        display: block;
    }

        .errorMsg::before {
            width: 100%;
            height: 114px;
            display: inline-block;
            content: '';
            background-repeat: no-repeat;
            background-size: 80px 80px;
            background-position:center;
            background-image: url(/consumer/images/common/errorImg.svg);
        }
.successMsg {
    font-size: 32px;
    display: block;
}

    .successMsg::before {
        width: 100%;
        height: 114px;
        display: inline-block;
        content: '';
        background-repeat: no-repeat;
        background-size: 80px 80px;
        background-position: center;
        background-image: url(/consumer/images/gig/check.png);
    }

.backToEmpPortal {
    position: relative;
    width: 100%;
    z-index: 10;
    display: flex;
    color: white;
    background-color: var(--color_error);
    line-height: 36px;
    padding: 0px 8px;
    box-sizing: border-box;
    justify-content: space-between
}
    .backToEmpPortal.demouserportal {
        justify-content:center;
    }

    .backToEmpPortal a {
        color: white;
    }

   

    .lh-16 {
        line-height: 16px;
    }

    .k-grid-content {
        overflow-y: auto !important;
    }

    .k-grid-header {
        padding-right: 0px !important;
    }

        .k-filter-row th, .k-grid-header th.k-header {
            white-space: inherit !important;
            text-overflow: inherit !important;
        }

        .k-grid-header th.k-header {
            vertical-align: middle !important;
        }

    #PaymentHistoryTable .k-grid-header-wrap {
        position: static !important;
    }


#BuriedDropLookupTable .k-grid-header-wrap {
    position: static !important;
}

    .statusToolTip.tooltip {
        top: 30% !important;
        position: absolute !important;
    }

        .statusToolTip.tooltip img {
            top: 0px !important;
        }

        .statusToolTip.tooltip .tooltiptext {
            box-shadow: none;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
        }



    @media (min-width: 1769px) {
        .statusToolTip.tooltip {
            top: 24% !important;
        }
    }

    .no-records-top {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .w100 {
        width: 100%;
    }

    .dropdown-menu.inner {
        max-height: 250px !important;
    }

    .pad-tb15 {
        padding: 15px 0px !important;
    }

    .pad-tb20 {
        padding: 20px 0px !important;
    }

    .pad-tb30 {
        padding: 30px 0px !important;
    }

    /*to remove x icon input IE*/
    input::-ms-clear {
        display: none;
    }

    .norecords {
        font-size: 16px;
        color: #292b2c;
        text-align: center;
        font-family: var(--font_light);
        padding: 0;
        /*height: 82px;*/
        line-height: 34px;
    }

    @media screen and (min-width: 1400px) {
        .norecords.noRecBg {
            margin: 0px -28px !important;
            padding: 28px 0 !important;
        }
    }

    .cursor-not-allowed {
        cursor: not-allowed !important;
    }

    .padding-50 {
        padding: 50px;
    }

    @media screen and (max-width: 1200px) {
        .kendoGrid .k-grid-header th.k-header, .k-grid td {
            padding: 10px !important;
            font-size: 14px;
        }

        .statusToolTip.tooltip {
            top: 28% !important;
        }

        .k-filter-row > th:first-child, .k-grid tbody td:first-child, .k-grid tfoot td:first-child, .k-grid-header th.k-header:first-child {
            width: 14%;
        }



        .k-filter-row > th:nth-child(2), .k-grid tbody td:nth-child(2), .k-grid tfoot td:nth-child(2), .k-grid-header th.k-header:nth-child(2),
        .k-filter-row > th:nth-child(3), .k-grid tbody td:nth-child(3), .k-grid tfoot td:nth-child(3), .k-grid-header th.k-header:nth-child(3),
        .k-filter-row > th:nth-child(6), .k-grid tbody td:nth-child(6), .k-grid tfoot td:nth-child(6), .k-grid-header th.k-header:nth-child(6) {
            width: 12%;
        }

        .k-filter-row > th:nth-child(7), .k-grid tbody td:nth-child(7), .k-grid tfoot td:nth-child(7), .k-grid-header th.k-header:nth-child(7) {
            width: 5%;
        }

        .k-filter-row > th:nth-child(8), .k-grid tbody td:nth-child(8), .k-grid tfoot td:nth-child(8), .k-grid-header th.k-header:nth-child(8),
        .k-filter-row > th:nth-child(9), .k-grid tbody td:nth-child(9), .k-grid tfoot td:nth-child(9), .k-grid-header th.k-header:nth-child(9) {
            width: 10%;
        }

        .k-filter-row > th:nth-child(5), .k-grid tbody td:nth-child(5),
        .k-grid tfoot td:nth-child(5), .k-grid-header th.k-header:nth-child(5) {
            width: 8%;
        }

        .k-filter-row > th:nth-child(4), .k-grid tbody td:nth-child(4), .k-grid tfoot td:nth-child(4), .k-grid-header th.k-header:nth-child(4) {
            width: 9%;
        }

        #divPaymentHistoryTable.paymenthist-table .k-grid-header th.k-header,
        #divPaymentHistoryTable.paymenthist-table .k-filter-row > th, #divPaymentHistoryTable.paymenthist-table .k-grid tbody td {
            width: auto !important;
        }
        #divBuriedDropLookupTable.paymenthist-table .k-grid-header th.k-header,
        #divBuriedDropLookupTable.paymenthist-table .k-filter-row > th, #divBuriedDropLookupTable.paymenthist-table .k-grid tbody td {
            width: auto !important;
        }
    }

    @media screen and (min-width: 1200px) {
        .kendoGrid .k-grid-header th.k-header, .k-grid td {
            padding: 15px !important;
        }
    }




.kendoGrid .k-grid-header {
    position: relative;
}

    .k-grid td {
        white-space: -moz-pre-wrap !important;
        white-space: -webkit-pre-wrap;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        white-space: pre-wrap;
        word-wrap: break-word;
        word-break: break-all;
        white-space: normal;
    }

    /*@media only screen and (max-width: 1024px){
    .k-webkit .k-grid .k-pager-numbers .k-current-page{
        display:none !important;
    }

    .k-webkit .k-pager-numbers li:not(.k-current-page){
        display:block !important;
    }

    .k-widget.k-grid .k-pager-nav + .k-pager-numbers{
        position:static !important;
    }

    .k-webkit .k-pager-numbers .k-state-selected{
        text-align: center !important;
    }

    .k-webkit .k-grid .k-pager-numbers, .k-webkit .k-pager-numbers{
        transform: none !important;
    }

}*/


    .alertImage, .infoiconimage {
        display: inline-block;
        width: 120px;
        height: 120px;
        text-align: center;
        background-repeat: no-repeat;
        background-size: 120px 120px;
        background-image: url(/consumer/images/common/warning.svg);
        margin: 15px;
    }
.infoiconimage {
    background-image: url(/consumer/assets/images/alert/infoIcon.png);
}

.alertText {
    color: #333;
    font-size: 32px;
    text-align: center;
    line-height: 44px;
    margin-bottom: 30px;
    font-family: var(--font_light);
}

    .btn-neg, .btn-pos {
        background-color: transparent;
        color: white;
        min-width: 100px;
        min-height: 44px;
        font-size: 17px;
        margin: 0 !important;
        margin-left: 14px !important;
        border-radius: 4px;
        border: 1px solid transparent;
        padding: .5rem 1rem;
        color: #000;
    }

    .btn-pos {
        background-color: #4a3c92;
        color: #fff;
    }



@media (min-width: 576px) {

    .DeleteAlertPopUp.bootbox.modal .modal-dialog, #billpay_myModal .modal-dialog, .NewModalPopUp.bootbox.modal .modal-dialog {
            max-width: 570px;
            margin: 30px auto;
            width: 570px;
        }
    .sessionTimeOutModal.bootbox.modal .modal-dialog {
        max-width: 600px;
        margin: 30px auto;
        width: 600px;
    }
    }

    .DeleteAlertPopUp.bootbox .modal-content {
        padding: 40px 56px;
    }

        .DeleteAlertPopUp.bootbox .modal-content .close {
            height: 20px;
            width: 20px;
            background-size: 20px;
            opacity: .8;
        }

.secondary-btn {
position:relative;
padding:0px 20px;
}
    .DeleteAlertPopUp .deleteText {
        margin-bottom: 40px;
        font-family: var(--font_light);
        font-size: 20px;
        line-height: 28px;
        color: #333;
    }
    #billpay_myModal .modal-body {
        padding: 0px 56px;
    }

    .modal-close-ico {
        width: 20px;
        height: 20px;
        opacity: .8;
        position: relative;
        top: -5px;
        right: -15px;
    }

    @media screen and (max-width: 1200px) {
        #mydesksupportbutton img {
            height: 82px;
            width: 82px;
        }
    }
    /* New Modal Popup */

    .NewModalPopUp .modal-content {
        padding: 0px 0px 36px !important;
        border: 1px solid #ccc !important;
    }

        .NewModalPopUp .modal-content .modal-header {
            display: block;
            text-align: left;
            border-top: 0px;
            padding: 8px 20px 8px 0px;
            background: #f5f5f5;
            border-bottom: 1px solid #ccc;
        }

            .NewModalPopUp .modal-content .modal-header .modal-title {
                font-size: 20px;
                color: #333;
                line-height: 30px;
                font-family: var(--font_normal);
                padding-left: 24px;
            }

        .NewModalPopUp .modal-content .close {
            top: 13px;
            right:20px;
        }

        .NewModalPopUp .modal-content .modal-body .bootbox-body {
            padding: 20px 56px 0;
        }


.NewModalPopUp.DeleteAlertPopUp .modal-footer {
    border-top: none;
    text-align: center;
    justify-content: center;
    max-width: 100%;
    display: flex;
    flex-direction: row-reverse;
}

    .lgDeleteText {
        font-family: var(--font_light);
        font-size: 20px;
        line-height: 28px;
        color: #333;
    }

    /* New Modal Popup End */
    @media (max-width: 1200px) {
        #idAdministrate {
            padding: 0;
            padding-left: 35px;
        }
    }
    /* pagination below 1024px  */

    @media only screen and (max-width: 1024px) {
        .k-webkit .k-pager-numbers .k-state-selected, .k-webkit .k-pager-numbers .k-link {
            padding: 0px !important;
            text-align: center !important;
        }

        .k-webkit .k-pager-numbers li:not(.k-current-page) {
            display: block !important;
        }

        .k-webkit .k-grid .k-pager-numbers .k-current-page {
            display: none !important;
        }

        .k-webkit .k-widget.k-grid .k-pager-nav + .k-pager-numbers {
            position: relative !important;
        }

        .k-webkit .k-grid .k-pager-numbers, .k-webkit .k-pager-numbers {
            -ms-transform: none !important;
            transform: none !important;
            -webkit-transform: none !important;
        }

        .k-webkit .k-grid .k-pager-numbers {
            left: 0 !important;
            display: inline-flex !important;
            -webkit-box-orient: horizontal !important;
            -webkit-box-direction: normal !important;
            -webkit-flex-direction: inherit !important;
            -ms-flex-direction: inherit !important;
            flex-direction: inherit !important;
        }

        .k-webkit .k-pager-wrap .k-pager-nav {
            display: inline !important;
        }
    }

    .k-icon.k-i-arrow-end-right:before {
        content: "\e804";
    }

    .k-icon.k-i-arrow-60-right:before {
        content: "\e803";
    }

    .k-icon.k-i-arrow-60-left:before {
        content: "\e802";
    }

    .k-icon.k-i-arrow-end-left:before {
        content: "\e801";
    }


    .flexContainer {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Registration Page style */

    .ping-container {
        width: 480px;
        height: auto;
        min-height: 0;
        border: 1px solid #cecece;
        position: relative;
        margin: 0 auto;
        padding: 16px 0 0px;
        background: url(/consumer/images/common/kinetic-waves-bg.svg) #fff center top no-repeat;
        background-size: 1920px 1080px;
        background-position-y: 95px;
        box-sizing: border-box;
        min-width: 280px;
    }

    .ping-header img {
        height: 68px;
        min-height: 0;
        margin: 0 auto;
        background-size: contain;
    }

.ping-body-container {
    box-sizing: border-box;
    min-height: 100px;
    text-align: center;
    width: 100%;
    padding: 20px 20px 16px 30px;
    margin: 0 auto;
    overflow: hidden;
    /*background-image: linear-gradient(90deg, #4a3c91 0%, #d02a3e 100%);*/
    /*background-image: -webkit-gradient(linear,left top, right top,color-stop(0, rgba(61,57,147,1)),color-stop(50%, rgba(164,56,149,1)),to(rgba(237,24,99,1)));
    background-image: -o-linear-gradient(left,rgba(61,57,147,1) 0,rgba(164,56,149,1) 50%,rgba(237,24,99,1) 100%);
    background-image: linear-gradient(90deg,rgba(61,57,147,1) 0,rgba(164,56,149,1) 50%,rgba(237,24,99,1) 100%);*/
    background:#24a76a;
    margin-top: 84px;
}

    .ping-input-label {
        color: #fff;
        text-align: left;
        font-size: 14px;
        line-height: 16px;
        margin-bottom: 10px;
    }

    .ping-input-container {
        width: 100%;
        margin-bottom: 20px;
        text-align: left;
    }

        .ping-input-container input {
            background: white !important;
            border: 1px solid #fff !important;
            border-bottom: 1px solid #fff !important;
            width: 100%;
            height: 44px;
            line-height: 44px;
            color: #00002d;
        }

            .ping-input-container input:active, .ping-input-container input:focus {
                outline: none;
            }

    .ping-buttons .ping-button:before {
        display: inline-block;
        content: '\e803';
        font-size: 18px;
        line-height: 40px;
        height: 40px;
        font-family: 'Kineticons';
        padding-right: 7px;
    }

    .ping-buttons .ping-button {
        width: 140px;
        height: 44px;
        line-height: 44px;
        border: none;
        border-radius: 4px;
        background-color: #00002d;
        color: #fff;
    }

        .ping-buttons .ping-button:focus, .ping-buttons .ping-button:active {
            outline: none;
            border: none;
        }

    .ping-input-link {
        margin-top: 20px;
        color: #fff;
        font-size: 13px;
        line-height: 24px;
    }

    a.signIn-link, a.signIn-link:focus, a.signIn-link:active, a.signIn-link:hover {
        color: #9ddae7;
    }

    .mb-44 {
        margin-bottom: 44px;
    }

    .rel {
        position: relative;
    }

    .padding-bottom-44 {
        padding-bottom: 44px;
    }

    input[type="radio"]:checked + .customradio-label {
        background: url(/consumer/images/Billing/ic_select.png) left center no-repeat;
        background-size: 20px;
    }

    input[type="radio"] + .customradio-label {
        font-size: 16px;
        font-weight: 400;
        color: #333;
        padding-left: 27px;
        background: url(/consumer/images/Billing/ic_unselect.png) left center no-repeat;
        background-size: 20px;
    }

    #paymentMethodEdit .modal-dialog {
        width: 540px;
    }

    #paymentMethodEdit.bootbox .modal-content {
        padding: 0px;
    }

        #paymentMethodEdit.bootbox .modal-content .modal-header {
            padding-left: 28px;
            font-size: 16px;
            text-align: left;
            padding-bottom: 0px;
            border-bottom: 1px solid #ddd;
        }

            #paymentMethodEdit.bootbox .modal-content .modal-header .modal-title {
                line-height: 45px;
                font-size: 24px;
            }

        #paymentMethodEdit.bootbox .modal-content .modal-body {
            padding: 28px;
        }

    #paymentMethodEdit .modal-body table td {
        font-size: 16px;
        color: #333;
    }

    #paymentMethodEdit .modal-body table tr td:first-child {
        padding: 10px 0px;
        width: 45%;
    }

    #paymentMethodEdit .modal-body input {
        font-size: 16px;
        color: #666666;
        border: none;
        border-bottom: 1px solid #c1c1c1;
        background: transparent;
        padding-bottom: 3px;
    }

        #paymentMethodEdit .modal-body input[disabled] {
            color: #999;
            cursor: not-allowed;
        }

    @media (min-width: 576px) {
        #paymentMethodEdit .modal-dialog {
            max-width: 600px;
            margin: 30px auto;
        }
    }

    #paymentMethodEdit .modal-dialog {
        width: 600px;
    }

    #paymentMethodEdit .spanSlash {
        display: inline-block;
        vertical-align: bottom;
        width: 21px;
        text-align: center;
    }

    #paymentMethodEdit .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
        width: 100%;
    }

    #paymentMethodEdit .expDate .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
        width: 134px;
    }

    .w50 {
        width: 50%;
    }

    .secondaryLink, .secondaryLink:hover,
    .secondaryLink:active, .secondaryLink:focus {
        color: #7eb822;
    }

    .w33 {
        width: 33%;
    }

    .ping-input-label.t-label {
        text-align: right;
        margin-right: 20px;
        margin-bottom: 16px;
    }

    .d-table-row {
        display: table-row;
    }

    /* UserManager Page CSS */

    .userManager .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
        width: 150px;
        max-width: calc(100% - 20px);
    }

.userManager #searchInput {
    padding-top: 12px;
    padding-bottom: 10px;
    color: #666;
    line-height: initial;
    font-family: unset;
    width: 100%;
}

    .userManager .action .dropdown-menu {
        left: 58%;
        right: auto;
        top: 15px;
    }

    .userManager .editUser {
        padding: 0px;
    }

    .userManager .receipnt-cancel {
        box-shadow: none !important;
        background: none !important;
        outline: none !important;
        border: none !important;
        font-family: var(--font_normal);
    }

    .userManager .accepance-container-checkmark {
        top: 5px;
    }

#idEditCollapseAll::before, #idCollapseAll::before {
    content: '\e868';
    font-family: 'Kineticons';
    margin-right: 7px;
}
#idEditCollapseAll, #idCollapseAll, #idEditExpandAll, #idExpandAll {
    position: relative;
    color: var(--secondary_clr);
    cursor: pointer;
    margin-right: 20px;
}
    .userManager .k-in.k-state-hover, .k-in.k-state-selected, .k-in.k-state-focused {
        background: none;
        color: inherit;
        box-shadow: none;
    }


.userManager .k-checkbox-label:before {
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 20px;
    border-color: #aaa;
    background: transparent;
    border-radius:4px;
}

    .userManager .k-checkbox:checked + .k-checkbox-label:before {
        font-family: Kineticons;
        content: "\e82B";
        color: white;
        font-size: 14px;
        background-color: #4a3c92;
        border: 0px;
    }

    .userManager .k-in {
        cursor: default !important;
        padding-left: 14px !important;
        color: #666 !important;
    }

    .userManager .k-checkbox:indeterminate + .k-checkbox-label:after {
        width: 14px;
        height: 14px;
        left: 11px;
        top: 11px;
    }

    .userManager .k-checkbox:indeterminate + .k-checkbox-label:after {
        background-color: #4a3c92;
        background-image: none;
        border: 0;
    }


    .kendoGrid.userManagerGrid .k-pager-wrap {
        background-color: #E5E5E6;
    }

    .kendoGrid.userManagerGrid .k-pager-numbers .k-state-selected {
        color: #333;
    }

    .kendoGrid.userManagerGrid .k-link:link, .kendoGrid.userManagerGrid .k-link:link:hover,
    .kendoGrid.userManagerGrid .k-link:link:visited, .kendoGrid.userManagerGrid .k-link:link:active,
    .kendoGrid.userManagerGrid .k-link:link:focus {
        color: #7eb822;
    }

.createUser > label,
#createTabs .nav.nav-tabs > li > a, #createTabs .nav.nav-tabs > li > a:focus,
#createTabs .nav.nav-tabs > li > a:hover, .content-banner-navigation > a > label {
    color: var(--secondary_clr);
}

    /* UserManager Page CSS End */



    /* Breadcrum Account Number CSS */
    .breadcrumb-item.accountNumLi {
        position: relative;
        top: 4px;
    }

    .accountNumLi .bootstrap-select.btn-group {
        border-bottom: 1px solid #fff;
        margin-top: -4px;
    }

        .accountNumLi .bootstrap-select.btn-group > .dropdown-toggle {
            color: #fff;
        }

        .accountNumLi .bootstrap-select.btn-group .dropdown-toggle .filter-option {
            font-size: 20px;
            font-family: var(--font_light);
            line-height: 20px;
        }

        .accountNumLi .bootstrap-select.btn-group .dropdown-toggle .caret {
            background: none;
        }

            .accountNumLi .bootstrap-select.btn-group .dropdown-toggle .caret::before {
                content: '\e806';
                font-family: Kineticons;
                font-size: 18px;
                color: #fff;
                line-height: 24px;
            }
    /* Breadcrum Account Number CSS */

    .bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
    .bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
    .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:active {
        color: #666;
    }

    .Customtooltip {
        cursor: pointer;
    }

    .popover {
        -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
        border: 0px;
        z-index: 1070;
        border-radius: 6px;
    }

    .popover-header {
        background: #fff;
        font-size: 15px;
        font-family: var(--font_bold);
        color: #666;
        border-bottom: 0px;
        padding-top: 15px;
        padding-bottom: 0px;
        width: 100%;
    }

    .popover.bs-tether-element-attached-top::before, .popover.popover-bottom::before {
        top: -10px;
        border-bottom-color: #d8d8d8;
    }

    .popover.bs-tether-element-attached-top::after, .popover.popover-bottom::after {
        border-bottom-color: #fff;
        top: -9px;
    }

    .popover-body {
        background: #fff;
        color: #333;
        font-size: 100%;
        padding: .5rem 14px;
        padding-bottom: 12px;
        text-align: left;
    }

    .popover .list-group {
        box-shadow: none !important;
        border: 0px;
        margin: 0px -14px;
    }

        .popover .list-group .list-group-item {
            padding: 4px 12px;
            border: 0px;
            margin-bottom: 0px;
            border-bottom: 1px solid #e8e8e8;
        }

            .popover .list-group .list-group-item:last-child {
                border-bottom: 0px;
                padding-bottom: 0px;
            }

    .bootstrap-select .dropdown-toggle .filter-option-inner-inner {
        line-height: 20px;
    }
    /**common button fix**/
    .lh-initial {
        line-height: initial;
    }

    .inline-flex-parent {
        display: inline-flex !important;
        justify-content: center;
        align-items: center;
        flex-flow: row;
    }

    .inline-flex-parent-align {
        display: inline-flex !important;
        justify-content: center;
        flex-flow: row;
    }

        .inline-flex-parent-align .inline-flex-child {
            display: inline-flex !important;
            flex-direction: row;
            align-items: center;
        }

    .inline-flex-parent img {
        margin-right: 8px;
    }

    .left-auto {
        left: auto !important;
    }

    .inline-flex-parent .inline-flex-child {
        display: inline-flex !important;
        flex-direction: row;
        align-items: center;
    }

    #cardpaymentoption.show.d-dropup > .dropdown-menu {
        top: auto;
        bottom: 100%;
    }

    #cardpaymentoption.show.d-dropdown > .dropdown-menu {
        top: 100%;
        bottom: auto;
    }

    @media (max-width: 1100px) {
        #cardpaymentoption.show > .dropdown-menu {
            left: -130px;
            width: calc(100% + 130px) !important;
        }
    }

    .userManager #treeview > ul.k-group > li > ul.k-group > li > div > .k-in,
    .userManager #treeview > ul.k-group > li > div > .k-in {
        color: #282829 !important;
    }

    .banner-list-group > li.list-group-listy {
        padding: 0px;
        background: transparent !important;
        border: 0px;
        list-style-type: circle;
        list-style-position: inside;
    }

    /**Auto Pay Pending Message**/
.billingflex-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    padding: 7px;
    border: 1px solid #dfc789;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 7px;
    background-color: #f9e8bb;
}
.accountsummary_page .billingflex-row {
    transform: translateY(15px);
}

    .billingflex-row.justify-left {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        padding: 7px 16px;
        margin: -14px;
    }
    .billingflex-row.justify-center {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .billingflex-row .norecords {
        font-size: 14px !important;
        color: #333 !important;
        text-align: left;
        line-height: 18px;
    }

        .billingflex-row .norecords .amountBold {
            color: #333 !important;
            font-family: var(--font_bold) !important;
        }

        .br-right1px {
            box-sizing: border-box;
            border-right: 1px solid #d0d0d0;
        }

.warning-payment {
    color: #fe3535;
    display: inline-flex;
    font-size: 16px;
    align-items: center;
}

.icon-warning:before {
    margin-right: 7px;
    content: '\e80E';
    font-family: 'Kineticons';
    font-size:20px;
}
/**New Progressbar***/
.newProgressbar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 10px;
    align-items: flex-end;
}
.progressbar {
    max-width: 80%;
    margin-top: 40px;
    border-radius: 15px;
    height: 21px;
    margin-bottom: 15px;
    min-width: 125px;
    border: 1px solid #d0d0d0;
    flex-grow:1;
    position: relative;
}
    .progressbar .progressfull-desc {
        position: absolute;
        font-size: 0.9vw;
        width: 100%;
        min-width:165px;
        text-align: center;
    }

    .progressbar .progresstext {
        color: #7f2b5d;
        min-width: 100px;
        text-align: center;
        position: absolute;
        font-size: 12px;
        bottom: 100%;
        margin-bottom: 16px;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .progressbar .triangle-left.text-left-align .progresstext {
        -webkit-transform: translateX(-5%);
        -ms-transform: translateX(-5%);
        transform: translateX(-5%);
        text-align: left;
    }

    .progressbar .triangle-left {
        width: 0;
        height: 0;
        bottom: 100%;
        position: absolute;
        left: 0%;
        -webkit-transition: all 1s linear;
        -o-transition: all 1s linear;
        transition: all 1s linear;
        margin-bottom: 2px;
        border-style: solid;
        border-width: 13px 9px 0 9px;
        border-color: #fff transparent transparent transparent;
        margin-left: -9px;
    }

        .progressbar .triangle-left:after {
            content: '';
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 10px 7px 0 7px;
            border-color: #7f2b5d transparent transparent transparent;
            position: absolute;
            bottom: 2px;
            left: -7px;
        }

    .progressbar .bottomprogressbar,
    .progressbar .topProgressbar {
        height: 10px;
        background: #fff;
        overflow: hidden;
        border-radius: 15px 15px 0px 0px;
    }

    .progressbar .bottomprogressbar {
        margin-top: 1px;
        border-radius: 0px 0px 15px 15px;
    }

    .progressbar .topfillprogressbar {
        height: 100%;
        width: 60%;
        background: #fff;
        border-radius: 15px 0px 0px 0px;
        background: -webkit-gradient(linear, left top, right top, from(#22d4d1), to(#2ca99e));
        background: -o-linear-gradient(left, #22d4d1 0%, #2ca99e 100%);
        background: linear-gradient(to right, #22d4d1 0%, #2ca99e 100%);
        -webkit-transition: all 1s linear;
        -o-transition: all 1s linear;
        transition: all 1s linear;
    }

    .progressbar .fillbottomprogressbar {
        width: 100%;
        height: 100%;
        border-radius: 0px 0px 15px 5px;
        background: -webkit-gradient(linear, left top, right top, from(#68cc98), to(#54be44));
        background: -o-linear-gradient(left, #68cc98 0%, #54be44 100%);
        background: linear-gradient(to right, #68cc98 0%, #54be44 100%);
    }
.progresss-detailbtn, .progresss-detailbtn:hover, .progresss-detailbtn:focus {
    line-height: 1;
    font-size: 12px;
    width: initial;
    height: 30px;
    padding: 9px 10px;
    display: inline-flex;
    margin-left:14px;
    align-items: center;
    border: none;
    border-radius: 4px;
    background-color: #4a3c91;
    color: #ffffff;
    margin-bottom: 10px;
}
.progresss-detailbtn{
    font-size:12px;

}
.clr_danger {
    color: var(--color_error) !important;
}
.text-underline, .text-underline:hover {
    text-decoration: underline !important;
}
.menunavitem.disabled .mega-menu-title
{
    color:#ccc;
}
.menunavitem.disabled {
    pointer-events: none;
    cursor: default;
}
.menunavitem.disabled:after {
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    display: block;
    z-index: 1;
    pointer-events: none;
    cursor: default;
}
.popover.menupopover-right {
margin-left:-30px;
}

/**Menu icon alignment**/
.flex-columnmenu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
    .flex-columnmenu .mega-menu-title {
    width:100%;
    }

    .flex-columnmenu span.megamenu-icon {
        height: 55px;
        width: 55px;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

        .flex-columnmenu span.megamenu-icon.large-icon {
      
            width: 100px;
        }

        .flex-columnmenu span.megamenu-icon img {
            max-height: 100%;
            max-width: 100%;
        }
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .flex-columnmenu span.megamenu-icon img {
        width:100%;
        display:block;
    }
}

header #livechat-button {
    z-index:1;
}

.warning-bg, .bg-yellow {
    background: #f7ac08;
}
.text-darken, .text-darken:hover {
    color: #333;
}
.lh-20 {
    line-height:20px;
}
.brdr-box {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
@media only screen and (min-width: 1200px) and (max-width: 1500px) {
    .clear-left-1500 {
        display: block;
    }
}
.billing-nonauthorpage {
    height: 426px;
    background: var(--clr-creamywhite);
    display: flex;
    align-items: center;
}
    .billing-nonauthorpage > .w100 {
    width:100%;
    }

.img-fluid.allspeed_img {
    display:block;
    max-width:65%;
    margin:0px auto;
}
@media only screen and (max-width: 1400px) {
    .img-fluid.allspeed_img {
        max-width: 75%;
    }
}
    @media only screen and (max-width: 1200px) {
        .img-fluid.allspeed_img {
            max-width: 85%;
        }
    }

.h-divider {
    border-right: 1px solid lightgray;
}

.billing-summ-acc-enroll-text {
    font-size: 16px !important;
    line-height: 24px;
}
.suspendAutoPayDiv:hover {
    position: relative;
    z-index: 1060;
}

.suspendAutoPayDiv .tooltip .tooltiptext {
    margin-top: 2px;
}

span.deleteCard::after {
    content: '\e82D';
    font-size: 18px;
    font-family: 'Kineticons';
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 15px;
    color: var(--color_error);
    cursor: pointer;
}

span.editCard::after {
    content: '\e832';
    font-family: 'Kineticons';
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
    cursor: pointer;
    right: 40px;
    font-size: 16px;
    top: 2px;
}

.paymentCard span.deleteCard::after {
    top: auto;
    bottom: auto;
    right: 20px;
}

.paymentCard span.editCard::after {
    top: auto;
    bottom: auto;
    right: 53px;
    line-height: 28px;
}

#internalBankSection span.deleteCard::after, #internalBankSection span.editCard::after {
    top: 40%;
}
.gopaperlessmodal .modal-dialog {
    min-width: 680px;
}
.bootbox.modal.bootBoxAlertPopUp.show:after {
    background:rgba(255, 255, 255, 0.7) !important;
}