.pageFlow, .sc_heading {
    float: left;
    width: 100%
}

.tooltip-img table {
    border-color: #ddd;
    width: 400px;
    margin: 0;
}

.tooltip-img {
    padding: 8px;
}

.pricingDataCard .sc_card h2 {
    cursor: auto;
}

.tooltip-img table thead th {
    background-color: #9ead35;
    color: #1a1a1a !important;
    font-size: 13px;
    line-height: 1.5;
    text-transform: none;
    font-weight: 600 !important;
    text-align: center;
    padding: 12px 12px;
}

.tooltip-img table tbody tr {
    background-color: #f5f5f5;
}

.tooltip-img tr td {
    text-align: center;
    padding: 12px;
    font-size: 13px;
}

.tooltip-img table tbody tr.highlight {
    background-color: #cbcbcb;
}

    .tooltip-img table tbody tr.highlight td {
        font-weight: 600;
    }

.tooltip-img {
    position: absolute;
    left: 100%; /* Adjust the position to the right of the select box */
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 5px;
    z-index: 99;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    top: 50%;
    transform: translateY(-50%);
}

    .tooltip-img img {
        max-width: 360px; /* Adjust image size */
    }

.circuitBreaker {
    margin-top: 5px;
}

.pageFlow, .rangeSlider, .sc_heading {
    width: 100%
}

.savingcarea {
    padding: 25px 0 50px 0;
}

.vehiclesDetailsBox label br {
    height: 0px;
}

.card_sub_heading {
    font-weight: 600;
    line-height: 20px;
    margin-bottom: 15px;
    font-size: 14px;
}

.sc_card h2, .sc_heading {
    font-weight: 600;
    color: #1A1A1A;
}

.radio-box {
    position: relative;
    margin-top: 10px;
}

.sc_card {
    background-color: #fff;
    padding: 20px 15px;
    border-radius: 5px;
    margin-top: 20px;
}

.pageFlow a.active, .pageFlow a:hover {
    color: #215ed9
}

.pageFlow {
    display: flex;
    align-items: center;
    margin: 10px 0 10px;
}

.sc_heading {
    font-size: 32px;
    margin-top: 15px;
    font-family: 'Linotype-TradeGothicLTPro-Light' !important;
}

.car-sec, .data_div, .filter-items, .filterNote {
    font-size: 14px;
}

.sc_card h2 {
    font-size: 20px;
    line-height: 28px;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    margin-bottom: 0px;
}

.sc_card button.accordianBtn {
    font-size: 15px;
    font-weight: 600;
    line-height: 28px;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    width: 100%;
    border: 0;
    background: #fff;
    padding: 0;
    color: #1a1a1a !important;
}

    .sc_card button.accordianBtn span {
        display: flex;
        align-items: center;
        font-size: 15px;
        margin-right: 0;
    }

.card-head button[aria-expanded=true] .tooltip .material-icons {
    font-size: 16px;
    transform: none !important;
}

.card-head button[aria-expanded=false] .tooltip .material-icons {
    font-size: 16px;
}

.card-head button[aria-expanded=true] .material-icons, .sc_card h2.rotate i {
    transform: rotate(180deg);
}

.sc_card button i {
    transform: rotate(0);
    transition: .5s;
}

#vechilDetails {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.sc_card h2 i {
    transform: rotate(0);
    transition: .5s
}

.card-head h2[aria-expanded=true] .material-icons, .sc_card h2.rotate i {
    transform: rotate(180deg)
}

.sc_card .accordion .card {
    border: 0
}

    .sc_card .accordion .card .card-body {
        padding: 30px 0 0;
    }

.data_div {
    display: flex;
    align-items: center;
    width: 100%;
}

.note_icon {
    margin-right: 10px
}

.car-sec {
    margin-top: 0px;
}

.filter-items {
    margin: 30px 0
}

.filterNote {
    background: #f5f5f5;
    padding: 20px;
    line-height: 24px;
    display: flex
}

h2.graph_heading {
    cursor: default;
    display: flex;
    margin-bottom: 50px;
    justify-content: center;
    text-align: center
}

.savingcarea input[type=radio]:checked, .savingcarea input[type=radio]:not(:checked) {
    display: none
}

    .savingcarea input[type=radio]:checked + label, .savingcarea input[type=radio]:not(:checked) + label {
        position: relative;
        padding-left: 38px;
        cursor: pointer;
        line-height: 20px;
        display: inline-block;
        color: #1A1A1A;
        margin-bottom: 20px;
        height: 28px;
        display: flex;
        align-items: center;
        font-weight: 600;
        text-transform: capitalize;
    }

        .savingcarea input[type=radio]:checked + label:before, .savingcarea input[type=radio]:not(:checked) + label:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 28px;
            height: 28px;
            border: 3px solid #3a4d13;
            border-radius: 100%;
            background: #fff
        }

        .savingcarea input[type=radio]:checked + label:after, .savingcarea input[type=radio]:not(:checked) + label:after {
            content: '';
            width: 15px;
            height: 15px;
            background: #3a4d13;
            position: absolute;
            top: 6.5px;
            left: 6.5px;
            border-radius: 100%;
            -webkit-transition: .2s;
            transition: .2s
        }

        .savingcarea input[type=radio]:not(:checked) + label:after {
            opacity: 0;
            -webkit-transform: scale(0);
            transform: scale(0)
        }

        .savingcarea input[type=radio]:checked + label:after {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1)
        }

.range-container {
    position: relative;
    margin-bottom: 20px
}

.custom-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    outline: 0;
    margin: 0
}

    .custom-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #CFDF00;
        cursor: pointer
    }

    .custom-slider::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border: none;
        border-radius: 50%;
        background-color: #3498db;
        cursor: pointer
    }

    .custom-slider:focus {
        outline: 0 !important;
        box-shadow: none !important
    }

#savingClac .highcharts-column-series text, #emissionCalc .highcharts-column-series text {
    text-decoration: none !important;
}

.sc_heading + p {
    color: #666666;
}

#vechilHeading h2 {
    cursor: default;
}

.note-content {
    font-size: 14px;
    background-color: #EFF0F4;
    padding: 15px;
    border-radius: 10px;
    font-weight: 600;
}

.finalCalculatorView .note-content p {
    font-size: 14px;
    line-height: 24px;
}



.mt-0 {
    margin-top: 0;
}

.sc_card h2 span {
    display: flex;
    align-items: center;
    font-size: 15px;
}

    .sc_card h2 span svg {
        margin-right: 10px;
        width: 20px;
    }

.sc_card h2 span {
    margin-right: 0;
}

.highligtedText {
    font-size: 28px;
    margin-left: 5px;
}

#yearlySaving, #yearlySavingEmission {
    margin-right: 3px;
    font-size: 24px;
    margin-left: 2px;
}

.ml-0 {
    margin-left: 0;
}

.detailTxt strong {
    display: block;
    margin-bottom: 5px;
}

.deatil-ico {
    margin-right: 8px;
}

.detailTxt span {
    font-weight: 400;
}

.detailTxt p {
    font-size: 16px;
    line-height: 28px;
}
/*new css*/
.select-menu {
    max-width: 330px;
    margin: 0px auto;
    border-radius: 10px;
}

    .select-menu .select-btn {
        display: flex;
        height: 80px;
        background: #fff;
        padding: 0px 0 0px 0px;
        font-size: 18px;
        font-weight: 400;
        border-radius: 20px;
        align-items: center;
        cursor: pointer;
        justify-content: space-between;
        border-top-left-radius: 20px;
        border: 1px solid #ddd;
    }

    .select-menu .options {
        position: absolute;
        width: 100%;
        padding: 0;
        margin-top: 5px;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        animation-name: fadeInDown;
        -webkit-animation-name: fadeInDown;
        animation-duration: 0.35s;
        animation-fill-mode: both;
        -webkit-animation-duration: 0.35s;
        -webkit-animation-fill-mode: both;
        display: none;
    }

        .select-menu .options .option {
            display: flex;
            height: auto;
            border-radius: 0;
            align-items: center;
            background: #fff;
            gap: 8px;
            margin: 0;
            border-bottom: 1px solid #ddd;
            overflow: hidden;
            padding: 10px;
            cursor: pointer;
        }

            .select-menu .options .option:hover {
                background: #f2f2f2;
            }

            .select-menu .options .option i {
                font-size: 25px;
                margin-right: 12px;
            }

            .select-menu .options .option .option-text {
                font-size: 18px;
                color: #333;
                width: 74%;
                padding-left: 5px;
            }

.select-btn i {
    font-size: 25px;
    transition: 0.3s;
}

.select-menu.active .select-btn i {
    transform: rotate(-180deg);
}

.select-menu.active .options {
    display: block;
    opacity: 0;
    z-index: 999;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
    animation-duration: 0.4s;
    animation-fill-mode: both;
    -webkit-animation-duration: 0.4s;
    -webkit-animation-fill-mode: both;
    overflow-x: hidden;
}

@keyframes fadeInUp {
    from {
        transform: translate3d(0, 30px, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

@keyframes fadeInDown {
    from {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }

    to {
        transform: translate3d(0, 20px, 0);
        opacity: 0;
    }
}


.optionImg {
    background-color: #ebebeb;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 19px;
    border-bottom-left-radius: 19px;
    width: 25%;
    overflow: hidden;
}

.select-menu .options .option .optionImg {
    border-radius: 0;
}

span.optionImg img {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.option-text {
    display: flex;
    flex-direction: column;
    width: 75%;
    padding-left: 10px;
}

.carName {
    font-weight: 600;
    text-align: left;
}

.carModel {
    font-size: 14px;
    font-weight: 500;
}

span.sBtn-text {
    font-weight: 600;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    width: 75%;
    padding-left: 10px;
}

.select-menu .options .option .optionImg {
    width: 26%;
}

.selectCard {
    padding: 20px;
    background-color: #ebebeb;
    border-radius: 10px;
    display: flex;
}

    .selectCard h5 {
        margin: 2px 0 10px 0;
        font-weight: 600;
        font-size: 16px;
    }

.slectCardCont {
    padding-left: 10px;
}

.selctVehiclesRight {
    padding: 20px 10px 0 10px;
}

.graphDataBox .highligtedText {
    font-size: 24px;
}






.savingType .btn-group-toggle .btn.active {
    color: #0F39B8;
    border-bottom-color: #0F39B8;
}

.savingType .btn-group-toggle .btn {
    border-bottom: 1px solid #CCCCCC;
    font-size: 14px;
    padding: 8px 24px;
    font-weight: 600;
    border-radius: 0;
}

.savingType {
    margin-bottom: 0px;
    display: flex;
    justify-content: center;
}

.tabBox {
    display: flex;
    justify-content: space-between;
}

.active-tab {
    display: block;
}

.inactive-tab {
    display: none;
}


.summaryBox .durationTabBox .btn-group-toggle .btn.active {
    background: #E5E5E5;
}

.summaryBox .durationTabBox .btn-group-toggle .btn {
    border: 1px solid #CCCCCC;
    font-size: 14px;
    padding: 8px 24px;
}


.vehiclesDetailsBox {
    margin-top: 20px;
    display: flex;
    gap: 5px 15px;
    font-size: 14px;
}

    .vehiclesDetailsBox label {
        font-weight: 600;
        margin-bottom: 5px;
    }


.commanInputBoxMUI label.commanMatarialLabel {
    display: inline-flex;
    margin: 0;
    font-size: 11px;
    font-weight: normal;
    color: #333333;
    position: relative;
    top: 9px;
    left: 5px;
    background: #fff;
    padding: 0px 5px;
    z-index: 99;
    align-items: center;
}

.commonInputbx {
    border: 1px solid #E6E6E6 !important;
    border-radius: 4px;
    padding: 7px 10px !important;
    min-height: 48px;
    color: #000;
    box-shadow: initial !important;
}

.chargingTimesBox {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.daysItem {
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 10px;
    min-width: 45px;
    text-align: center;
    cursor: pointer;
    background-color: #66666605;
    font-weight: 600;
    color: #000 !important;
}

    .daysItem.active {
        background-color: #E5E5E5;
        );
        border-color: #cfdf00;
    }


.select-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
    font-size: 14px;
    color: #1A1A1A;
}

.select-dropdown__button {
    padding: 10px 35px 10px 15px;
    background-color: #fff;
    border: 1px solid #cecece;
    border-radius: 3px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    color: #1A1A1A;
}

    .select-dropdown__button::focus {
        outline: none;
    }

    .select-dropdown__button .zmdi-chevron-down {
        position: absolute;
        right: 10px;
        top: 12px;
    }

.select-dropdown__list {
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    max-height: 300px;
    overflow: auto;
    margin: 0;
    padding: 0;
    list-style-type: none;
    opacity: 0;
    pointer-events: none;
    transform-origin: top left;
    transform: scale(1, 0);
    transition: all ease-in-out 0.3s;
    z-index: 999;
    border: 1px solid #ddd;
    border-top: 0;
}

    .select-dropdown__list.active {
        opacity: 1;
        pointer-events: auto;
        transform: scale(1, 1);
    }

    .select-dropdown__list li:hover {
        background-color: #e9e9e9;
    }

.select-dropdown__list-item {
    display: block;
    list-style-type: none;
    padding: 10px 15px;
    background: #fff;
    border-top: 1px solid #e6e6e6;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
    transition: all ease-in-out 0.3s;
}

.timeBox {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
}

.startTime {
    width: 48%;
}

.endTime {
    width: 48%;
    display: none;
}

.select-dropdown i {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}


div#ratePlansAccordain .card-body {
    padding-top: 0;
}




.mainTime {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    position: relative;
}

.timeUnitText {
    font-size: 8px;
    margin-top: -3px;
}

.progress-container {
    width: 100%;
    height: 80px;
    overflow: hidden;
    display: flex;
    padding: 4px 12px;
}

.on-peak {
    background-color: #d53e27; /* On-peak color */
}

.super-off-peak {
    background-color: #566e1c; /* Super Off-peak color */
    overflow: visible;
    position: relative;
}

.off-peak {
    background-color: #ffd945; /* Off-peak color */
}

.ulo-on-peak {
    background: #8e1a60;
}

.ulo-ultra-low-overnight {
    background: #018fbe;
}



.peakItemBox {
    text-align: center;
}

.peakTimeDetails, .priceDetails {
    margin: -8px 0;
    text-align: left;
    display: flex;
    justify-content: space-between;
    margin-left: -5px;
}

.peak-segment {
    margin-bottom: 32px;
    position: relative;
}

.peakItemBox {
    position: absolute;
    font-size: 10px;
    bottom: -25px;
    width: 100%;
}

.peakBar {
    margin-bottom: 0px;
    position: relative;
}


.ratePlansList h5 {
    font-size: 14px;
    font-weight: 600;
}


#ratePlansCont h2 {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0px;
    margin-top: 24px;
}

.fuelMixGraph {
    margin-bottom: 50px;
}

.editItem {
    position: absolute;
    right: 0;
}

    .editItem i {
        font-size: 16px;
        cursor: pointer;
    }


.displayNone {
    display: none;
}

.detailsItem input {
    width: 100%;
    padding: 6px;
    box-shadow: none !important;
    outline: none !important;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.car-sec .themeButton {
    padding: 6px 8px;
    font-size: 13px;
}

.saveEditL1, .saveEditL2 {
    text-align: right;
    margin-top: 15px;
}





/*new design css*/


.flexBox {
    display: flex;
    gap: 10px 40px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.slectYourEvCar, .slectYourGasolineCar {
    width: 50%;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid #ddd;
    flex-grow: 1;
}

.slectYourGasolineCar {
    width: 50%;
    height: auto;
}

.select-menu {
    max-width: 100%;
    position: relative;
}

.btnBox {
    text-align: right;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 20px;
    flex-wrap: wrap;
}

button, input, select {
    outline: none !important;
    box-shadow: none !important;
}

.themeButton {
    background: #CFDF00 !important;
    color: #3A4D13 !important;
    font-weight: 600;
    padding: 8px 24px;
    border-radius: 4px !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}







.chargingTimeDiv {
    display: flex;
    align-items: center;
    gap: 35px;
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: 20px;
}


.newUserFlow .flexBox h2 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0;
}

.chargingTimeDiv h5 {
    margin-bottom: 0px;
    margin-top: 0 !important;
}

.newUserFlow .chargingDaysContainer h5 {
    margin-bottom: 20px;
}

.pricingBoxDiv {
    width: 100%;
    display: flex;
    gap: 0 40px;
    padding: 0px 0px 20px 0;
    flex-wrap: wrap;
    justify-content: space-between;
}

.chargingDaysContainer {
    width: 30%;
}

.chargingTimeContainer {
    width: 67%;
}

.slectYourEvCar h5, .slectYourGasolineCar h5 {
    margin-bottom: 15px !important;
}

.newUserFlow .touPlansBoxRight {
    position: relative;
    width: 48%;
}

.newUserFlow .touPlansBoxLeft {
    flex-direction: column;
    width: 45%;
    display: flex;
    align-items: center;
    padding-top: 23px;
}

.pricingBoxDiv .touPlansBoxRight h2 {
    margin-bottom: 10px !important;
    line-height: 1.4;
    margin-top: 24px;
}




.StepperCard {
    padding: 20px 0px 0px 0px;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 auto 0px auto;
    border-radius: 10px;
}

.selctCarsCard {
    display: flex;
    gap: 16px;
    margin-top: 30px !important;
    align-items: flex-start;
}


.stepper-container {
    width: 100%;
}

.progress-bar {
    background: #e0e0e0;
    border-radius: 8px;
    height: 8px;
    margin-bottom: 20px;
    position: relative;
}

.progress {
    background: #cfdf00;
    height: 100%;
    width: 0;
    border-radius: 8px;
    position: absolute;
    top: 0;
    left: 0;
    transition: width 0.3s ease;
}

.stepper {
}

.step {
    display: none;
}

    .step.active {
        display: block;
    }

.stepper-container .btnBox button {
    margin: 10px 5px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #cfdf00;
    cursor: pointer;
    font-weight: 600;
    color: #1a1a1a !important;
}

button:disabled {
    background-color: #cfdf00;
    cursor: not-allowed !important;
}

button.prev-btn {
    background-color: #ecedee !important;
}

.step-title h5 {
    font-size: 16px !important;
    margin-bottom: 20px !important;
    margin-top: 0;
}

.chargingDataCard {
    margin-top: 30px;
}

.emmissionGraphItem h2.graph_heading {
    display: flex;
    font-size: 18px;
}

h2.graph_heading strong span {
    font-family: 'Linotype-TradeGothicLTPro-Bold' !important;
    font-size: 22px;
    margin-right: 0;
}

div#ChargerCont .vehiclesDetailsBox {
    flex-direction: column;
}

.chargingTimeItem {
    font-style: italic;
}

.borderTop {
    border-top: 1px solid #ddd;
    padding-top: 25px;
}

.chargingTimeItem p {
    font-size: 14px !important;
}

h2.graph_heading strong {
    font-family: 'Linotype-TradeGothicLTPro-Bold' !important;
    font-size: 22px;
    display: flex;
    margin: 0px 5px;
}

.subText {
    text-align: center;
    display: flex;
    justify-content: center;
    font-size: 14px !important;
    font-weight: 500;
}


.search-bar .input-group {
    border: 1px solid #ddd;
    margin: 10px 30px 10px 10px;
    border-radius: 30px;
    width: 95%;
    display: flex;
    align-items: center;
}

.input-group-icon {
    padding: 10px 8px 10px 8px;
}

.search-bar .input-group input {
    border: 0;
    outline: none !important;
    box-shadow: none !important;
    padding-left: 8px;
    padding-right: 0;
    border-left: 1px solid #ddd;
}

.input-group-icon.clear-icon {
    width: 40px;
}

.scrollable-options {
    overflow-y: auto;
    max-height: 265px;
}

    .scrollable-options ul li:first-child {
        margin-top: 0 !important;
    }




.savingType .nav-tabs li a.active {
    font-weight: bold !important;
    border: 0;
    border-bottom: 3px solid #878800;
}



.savingType .nav-tabs li a {
    color: #666;
    padding: 10px 10px;
    text-decoration: none;
    font-weight: 500;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
}

    .savingType .nav-tabs li a.active {
        color: #878800;
    }

div#L1vsL2Cont .roiFlexTtem {
    margin-bottom: 10px;
    gap: 10px;
}

    div#L1vsL2Cont .roiFlexTtem .card_sub_heading {
        margin-bottom: 0;
    }

    div#L1vsL2Cont .roiFlexTtem .form-group.commanInputBoxMUI {
        width: 48.5%;
    }

#L1vsL2Cont .durationTabBox .btn-group-toggle .btn.active, #L1vsL2Cont .savingType .btn-group-toggle .btn.active {
    background: #DBDBDB;
    color: #1a1a1a !important;
}

#L1vsL2Cont .durationTabBox .btn-group-toggle .btn, #L1vsL2Cont .savingType .btn-group-toggle .btn {
    border: 1px solid #CCCCCC;
    font-size: 14px;
    padding: 8px 24px;
    background: transparent;
    color: #1a1a1a !important;
}

#L1vsL2Cont.durationTabBox, #L1vsL2Cont .savingType {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start;
    width: 50%;
}

#L1vsL2Cont .tabBox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#L1vsL2Cont .savingType .btn-group-toggle .btn {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    font-weight: 500;
}

    #L1vsL2Cont .savingType .btn-group-toggle .btn + .btn {
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

.durationUnit, .highligtedText, .durationUnit2 {
    font-size: 22px !important;
}

#yearlySavingCost, #yearlySavingTime {
    font-size: 24px !important;
    margin-left: 7px;
}


.roiFlexCOntainer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.roiFlexTtem {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.btnFlex {
    display: flex;
    justify-content: right;
}


.step .selectCard {
    padding: 8px 15px 8px 15px;
    display: inline-flex;
    align-items: center;
}

    .step .selectCard p {
        font-size: 12px;
        line-height: 18px;
    }

.custom-tooltip {
    font-size: 12px;
    position: absolute;
    padding: 10px;
    z-index: 100;
    top: 50%;
    width: 200px;
    left: 16px;
    transform: translateY(-47%);
    background-color: #f5f5f5;
    box-shadow: 0 0 4px 1px #ddd;
    border: 1px solid #ddd;
}

.data_div {
    position: relative; /* To position the tooltip correctly */
}


    .data_div .tooltip {
        margin-top: -20px;
        margin-left: 10px;
    }

        .data_div .tooltip i {
            font-size: 16px;
            cursor: context-menu;
        }


/*css just to the example*/
.component--example {
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.card-head h2[aria-expanded=true] .tooltip .material-icons {
    font-size: 16px;
    transform: none !important;
}

.tooltip {
    opacity: 1;
    margin-left: 3px;
    margin-bottom: 0 !important;
    margin-top: 0px;
    position: relative;
}

.commanInputBoxMUI label.commanMatarialLabel i {
    font-size: 13px;
    margin-top: 0px !important;
}

.commanInputBoxMUI label.commanMatarialLabel .tooltip {
    margin-top: -9px;
    margin-left: 4px;
}

.roiFlexTtem .form-group {
    width: 100%;
}

div#roiGraphFuel {
    margin-top: 10px;
}


div#L1vsL2Cont .roiFlexTtem {
    width: 100%;
}

.roiFlexCOntainer h5 {
    width: 100%;
    font-weight: 600;
    font-size: 16px;
    margin: 0;
}

#CostCont .roiFlexTtem .form-group {
    width: 48.5%;
    margin-top: -12px;
}

.newUserFlow .touPlansBoxLeft .form-group.commanInputBoxMUI {
    width: 100%;
    margin-top: -18px;
}

.form-group {
    margin-bottom: 16px;
}

.ratePlansList {
    width: 100%;
}

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

.roiFlexCOntainer .data_div .card_sub_heading {
    font-size: 14px;
    margin-bottom: 0;
}

.roiFlexCOntainer .data_div .tooltip {
    margin-top: -4px;
}

.commanMatarialLabel .card_sub_heading {
    display: inline-flex;
    margin: 0;
    font-size: 11px;
    font-weight: normal;
    color: #333333;
    position: relative;
    top: 0;
    left: 0;
    background: #fff;
    padding: 0px;
    z-index: 99;
    align-items: center;
}

.custom-tooltip a {
    /*color: #1A1A1A;
    text-decoration: underline;*/
    /*text-transform: capitalize;*/
}

.commanInputBoxMUI label.commanMatarialLabel .tooltip .custom-tooltip {
    left: 14px;
}

.commanInputBoxMUI label.commanMatarialLabel .tooltip:hover .custom-tooltip {
    display: inline-block;
}

.chargingPatterHeading {
    font-size: 14px;
    font-weight: 600;
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.commanSelectBoxMUI label.commanMatarialLabel {
    margin: 0;
    font-size: 11px;
    font-weight: normal;
    color: #333333;
    position: relative;
    top: 9px;
    left: 5px;
    background: #fff;
    padding: 0px 5px;
    z-index: 9;
}


.commanSelectBoxMUI .form-control {
    min-height: 56px;
}

.ratePlanBarDetails {
    display: flex;
    padding: 15px 15px;
    position: relative;
    background-color: #eff0f4;
    border-radius: 10px;
    margin-top: 15px;
    float: left;
    width: 100%;
    gap: 15px;
    flex-direction: column;
}

.peaktItem {
    display: flex;
    align-items: center;
    font-size: 14px;
    flex-wrap: wrap;
}

.peakItemColor {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-right: 6px;
}

.newUserFlow .ratePlanBarDetails {
    width: auto;
}

.weekdaysPattern {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 40px;
}

.weekdendPattern {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 40px;
}

.stepper h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 10px 0 10px 0;
    display: flex;
    align-items: center;
}

.slectCardCont p {
    margin-bottom: 0;
}

.input-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

    .input-wrapper .unit {
        position: absolute;
        right: 10px; /* Adjust this value according to padding */
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        color: #555;
    }

.calculateKm {
    text-align: right;
    margin-top: 15px;
}

    .calculateKm button {
        padding: 10px 22px;
        font-size: 15px;
    }

.stepper-container .btnBox button {
}

.stepper .note-content span {
    text-align: left;
}

.elecPrice {
    font-size: 14px;
    padding-left: 5px;
}

.peakItemText {
    font-weight: 600;
}

.btnBox .note-content {
    width: 86%;
    margin-bottom: 0;
}

.btnBox .btn-items {
    width: 30%;
}

#step-3 .btnBox .btn-items {
    width: 26%;
    display: flex;
}

.font_600 {
    font-weight: 600 !important;
}

div#ratePlansCont .note-content .detailTxt {
    line-height: 24px;
}

div#ratePlansCont .note-content {
    margin-top: 20px !important;
    display: block;
    float: left;
    font-size: 14px;
    line-height: 24px !important;
    width: 100%;
}

.step-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-weight: 600;
}

.note-content a {
    /*  color: #969E31;*/
    /* font-weight: 600; */
    /* text-decoration: underline; */
}

#chargerGuideAccordain2 {
    margin-top: 0;
}

select.commonselectbx.form-control {
    appearance: none;
    background: url('/Portal/images/drop-down-arrow.png');
    background-repeat: no-repeat;
    background-position: 97% center;
    background-size: 10px 10px;
}

div#step-3 .btnBox {
    margin-top: 30px !important;
    justify-content: space-between;
}

    div#step-3 .btnBox button + button {
        margin-right: 0;
    }

div#step-2 .btnBox {
    justify-content: right
}

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

figure.highcharts-figure.highcharts-figure-circle {
    display: flex;
    align-items: center;
}


.card_heading_subtext {
    margin-top: 10px;
    margin-bottom: 30px;
    font-size: 16px;
    line-height: 28px;
}

div#ChargerCont .card-body {
    padding-top: 15px;
}

.sc_card h2 .custom-tooltip {
    display: inline-block;
}

.custom-tooltip a {
    width: 100%;
}

.stepper h3 .tooltip {
    margin-top: 1px;
    margin-left: 5px;
    display: flex;
    align-items: center;
}

    .stepper h3 .tooltip i {
        font-size: 16px;
    }

.finalCalculatorView .tabBox {
    width: 100%;
    background-color: #fff;
    padding: 10px 0;
}

    .finalCalculatorView .tabBox .nav-tabs {
        display: flex !important;
        justify-content: space-between !important;
        width: 100%;
        border-bottom: 1px solid #E5E5E5;
        padding: 0px 0;
    }

.savingType {
    width: 100%;
}

.sc_card.graphCard {
    margin-top: 0;
    padding-top: 5px;
}

.finalCalculatorView .tabBox .nav-tabs li {
    width: 33.33%;
    text-align: center;
}

div#timeGraph .highcharts-figure {
    display: flex;
    flex-wrap: wrap;
}

    div#timeGraph .highcharts-figure #timeLevel2Graph {
        width: 40%;
    }

    div#timeGraph .highcharts-figure #timeLevel1Graph {
        width: 60%;
        display: flex;
        justify-content: center;
        text-align: center;
    }


div#EmissionsCont .highcharts-figure #emissionEVGraph {
    width: 40%;
}

div#EmissionsCont .highcharts-figure #emissionGasGraph {
    width: 60%;
    display: flex;
    justify-content: center;
    text-align: center;
}


.emission-cloud-gasoline {
    background: url('/Portal/images/grey-cloud.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 250px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #fff;
    font-weight: 600;
}

.emission-cloud-ev {
    background: url('/Portal/images/green-cloud.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 150px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    font-weight: 600;
}

.emissionCloudGraph {
    display: flex;
    align-items: center;
    gap: 40px;
    justify-content: center;
    margin: 30px 0;
}

.ev-pointer {
    display: flex;
    align-items: center;
}

.cloud-pointers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    margin-bottom: 40px;
    font-size: 14px;
}

    .cloud-pointers .gasoline-pointer {
        position: relative;
        display: flex;
        align-items: center;
    }

        .cloud-pointers .gasoline-pointer .pointerCircle {
            width: 12px;
            height: 12px;
            background: #54575a;
            display: inline-block;
            border-radius: 100%;
            margin-right: 5px;
            position: relative;
            top: 0;
        }

    .cloud-pointers .ev-pointer .pointerCircle {
        width: 12px;
        height: 12px;
        background: #a8b400;
        display: inline-block;
        border-radius: 100%;
        margin-right: 5px;
        position: relative;
        top: 0;
    }

.chargingPatterHeading .tooltip i {
    font-size: 16px;
    margin-top: 0;
}

.chargingPatterHeading .tooltip {
    margin-top: 0px;
    display: flex;
    margin-left: 5px;
}

.dollarInput.input-wrapper .unit {
    right: unset;
    left: 10px;
    padding-left: 0;
    color: #1A1A1A;
}



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

input#txtchargelevel2Installcost {
}

.dollarInput.input-wrapper input {
    padding-left: 20px !important;
}

span#level2TimetoCharge, #level1TimetoCharge {
    margin-right: 4px;
}

div#step-2 .btnBox .btn-items {
    width: 50%;
}

#step-3 .btnBox .btn-items button {
    width: 100%;
}

div#step-1 .btnBox .note-content {
    width: 80%;
}

div#step-1 .btnBox button {
    text-wrap: auto;
}

.accordion span {
    line-height: 1.4;
}

/*new css*/

.showOnEvSelct .note-content {
    margin-bottom: 0;
}

.calculateKm p {
    font-size: 15px;
    margin-bottom: 0;
}

.calculateKm {
    text-align: center;
    margin-top: 15px;
    position: fixed;
    left: 50%;
    bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: auto;
    background-color: #fff;
    z-index: 999;
    justify-content: flex-end;
    padding: 16px 16px;
    gap: 20px;
    border: 1px solid #ddd;
    border-radius: 40px;
    transform: translateX(-50%);
    box-shadow: 1px 1px 6px 1px #ddd;
}

select.commonselectbx.form-control {
    padding-right: 28px;
}

div#ChargerCont select.commonselectbx.form-control {
    width: 100%;
}

div#ChargerCont .detailsItem {
    width: 100%;
}

.WeekdayPeakBar img, .WeekendPeakBar img {
    height: 100px;
    margin: 10px 0;
    width: 100%;
}

.WeekdayPeakBar, .WeekendPeakBar {
    display: flex;
    justify-content: flex-start;
}



#ratePlansCont .WeekdayPeakBar img, #ratePlansCont
.WeekendPeakBar img {
    margin: 0;
}

.detailTxt {
    line-height: 24px;
    font-weight: 500;
    text-align: left;
}

.noteHeading {
    font-weight: 600 !important;
    font-size: 14px;
}

.gasolinegraphNote {
    font-size: 12px;
    line-height: 19px;
    margin-bottom: 10px;
}

.evgraphNote {
    font-size: 12px;
    line-height: 19px;
}

.note-content span {
    font-weight: 500;
}

.clear-icon i {
    cursor: pointer;
}

/*.emmissionGraphItem .note-content a {
    text-transform: capitalize;
}*/

.no-record {
    text-align: center;
    width: 100%;
    display: flex !important;
    justify-content: center;
    padding: 10px;
    font-size: 16px;
}

.savingcarea .tooltip {
    z-index: 99;
    position: relative;
}

div#step-3 .note-content span {
    margin-right: 3px;
}

div#step-3 .note-content {
    width: 70%;
    display: inline-flex;
}

.showOnEvSelct .startTime {
    width: 100%;
}

.commonInputbx::placeholder {
    color: #0000002b;
}

.card-head h2[aria-expanded=false] .tooltip .material-icons {
    font-size: 16px;
}

.marginTopZero {
    margin-top: 0;
}

.slectYourGasolineCar .optionImg {
    /* background-color: #ededed75; */
    border-right: 1px solid #ddd !important;
}

h2.graph_heading.FuelGraphTextHeading {
    flex-wrap: wrap;
}

span.FuelGraphText1, span.FuelGraphText2 {
    width: 100%;
    justify-content: center;
    font-size: 18px !important;
}

#chargerGuideAccordain, #chargerGuideAccordain2, #chargerGuideAccordain3, #chargerGuideAccordain4 {
    margin-top: 20px;
}

#chargerGuideHeading3 h2, #chargerGuideHeading4 h2 {
    padding: 12px 20px;
    margin: 0;
    line-height: 1.1px;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    width: 100%;
}

#chargerGuideHeading3 button.accordianBtnNew, #chargerGuideHeading4 button.accordianBtnNew {
    padding: 12px 20px;
    margin: 0;
    line-height: 1.1px;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    width: 100%;
    background: #fff;
    border: 0;
    font-weight: 600;
    color: #1A1A1A;
    font-size: 15px;
    border-radius: 4px;
    text-align: left;
}



.erp_card.rightContent .card-head h2 {
    padding: 12px 20px;
    margin: 0;
    line-height: 1.1px;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}




.erp_card.rightContent .card-head button {
    padding: 12px 20px;
    margin: 0;
    line-height: 1.1px;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background: #fff;
    border: 0;
    width: 100%;
    border-radius: 4px;
    color: #1a1a1a !important;
}

div#chargerGuideContent4 {
    border-top: 1px solid #ddd;
}

span.headBox, .head-txt {
    font-weight: 600;
    color: #1a1a1a !important;
}

.erp_card.rightContent {
    width: 100%;
}

#chargerGuideAccordain .card, #chargerGuideAccordain2 .card, #chargerGuideAccordain3 .card, #ste1DisclamerAccordain .card, #chargerGuideAccordain4 .card {
    border: 1px solid #ddd;
    border-radius: 5px;
}

#chargerGuideAccordain .level-items, #chargerGuideAccordain2 .level-items, #chargerGuideAccordain3 .level-items, #ste1DisclamerAccordain .level-items, #chargerGuideAccordain4 .level-items {
    padding: 15px 20px;
}

div#chargerGuideContent, div#chargerGuideContent2, div#chargerGuideContent3, #step1DisclamerContent {
    border-top: 1px solid #ddd;
    font-size: 14px;
    line-height: 24px;
}

    div#chargerGuideContent3 p, div#chargerGuideContent4 p {
        font-size: 14px;
        line-height: 24px;
    }

div#step-1 .btnBox {
    justify-content: flex-end;
    margin-bottom: 15px;
}

span#lblSavingEmission {
    margin-right: 4px !important;
}


#btnFinalCalculation {
    position: relative;
    z-index: 1;
}

    #btnFinalCalculation:before {
        content: '';
        position: absolute;
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: -1px;
        border-radius: 10px;
        background: rgb(168 180 0 / 82%); /* Glow color */
        filter: blur(1px);
        opacity: 0.7;
        z-index: -1;
        animation: pulse-glow 1.5s infinite alternate;
    }

@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 8px rgb(193 205 25 / 79%), 0 0 8px rgb(173 185 0 / 75%), 0 0 8px rgb(193 205 25 / 87%);
        opacity: 1;
    }

    100% {
        box-shadow: 0 0 8px rgb(168 180 0), 0 0 8px #a8b400, 0 0 8px #CDDC39;
        opacity: 0.4;
    }
}

.roiFlexCOntainer .commonInputbx {
    border: 1px solid #3a4d13 !important;
}

.optionImg img {
    width: 80%;
}

div#costGraph h2.graph_heading {
    flex-direction: column;
}

.sc_card .chargerCostGraphTxt1, .sc_card .chargerCostGraphTxt2 {
    font-size: 20px;
}

span#emissionPercentage {
    margin-left: 5px;
}

#lblSavingEmissionTree {
    margin-right: 3px;
}

.emissionNoteText1 {
    margin-top: 10px;
    display: block;
}

.showOnFuelROICalculate, .showOnChargerROICalculate {
    margin-bottom: 30px;
}

.finalCalculatorView .note-content {
    display: flex;
}

.custom-tooltip {
    font-size: 12px !important;
}

.sc_card button.accordianBtn span.custom-tooltip {
    display: none;
}

.sc_card button.accordianBtn:focus {
    box-shadow: none !important;
}


.sc_card button.accordianBtn:focus-visible {
    box-shadow: 0 0 0 .11rem rgba(0,0,0,.9) !important
}

.costText1, .costText2 {
    font-size: 18px !important;
}

div#timeGraph h2.graph_heading, .emmissionGraphItem h2.graph_heading {
    margin-bottom: 10px !important;
}

.touPlansBoxLeft .detailTxt {
    font-size: 16px;
    line-height: 28px;
}

#chargerGuideAccordain2 {
    margin-top: 0;
}


footer.FooterMain.theme-color.spaceBottom {
    margin-bottom: 70px;
}

.tooltip .material-icons {
    color: #1a1a1a !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: unset !important;
}

.commanMatarialLabel .tooltip .material-icons {
    font-size: 13px !important;
}

.currentStepItem:focus {
    outline: auto;
}

#timeGraph h2.graph_heading {
    flex-direction: column;
    justify-content: center;
}


.showOnGasolineSelct {
    display: none;
}

.showOnEvSelct {
    display: none;
}

.custom-tooltip {
    display: none;
}

.sc_card .tooltip a:hover .custom-tooltip {
    display: inline-block;
}

#tabcalculateKm {
    display: none;
}

#ResetCalculator {
    display: none;
}

#tooltip {
    display: none;
}

.relativePostion {
    position: relative;
}

#tooltipBox2 {
    display: none;
}

.showOnFuelROICalculate, .showOnChargerROICalculate {
    display: none;
}

#costGraph {
    display: none;
}


/*responsive css*/
@media screen and (max-width: 991px) {
    .tooltip-img {
        top: 0;
        right: 0;
        left: unset;
        transform: translateY(-105%);
        width: 100%;
    }

        .tooltip-img table {
            width: 100%;
        }

    div#finalCalculatorView {
        margin-top: 30px;
    }
}


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

    #step-3 .btn-items {
        width: 100% !important;
        justify-content: flex-end;
    }


    span .optionImg img {
        width: 40px;
    }

    .slectYourEvCar, .slectYourGasolineCar {
        width: 100%;
    }

    .selctCarsCard {
        flex-wrap: wrap;
    }

    .btnBox {
        flex-wrap: wrap;
        justify-content: end;
    }

        .btnBox .note-content {
            width: 100% !important;
        }

    .stepper-container .btnBox button {
        margin-top: 30px;
    }

    .newUserFlow .touPlansBoxLeft, .newUserFlow .touPlansBoxRight, .newUserFlow .btnBox .btn-items {
        width: 100%;
    }

    .chargingDaysContainer, .chargingTimeContainer {
        width: 100%;
    }

    .weekdaysPattern, .weekdendPattern {
        flex-wrap: wrap;
    }

    #CostCont .roiFlexTtem .form-group {
        width: 100%;
    }

    div#L1vsL2Cont .roiFlexTtem {
        width: 100%;
    }



    figure.highcharts-figure.highcharts-figure-circle {
        flex-wrap: wrap;
        justify-content: center;
    }


    .calculateKm {
        z-index: 9999;
        width: 80%;
        display: flex;
        justify-content: center;
    }

    #step-3 .btnBox .btn-items button {
        width: auto;
    }
}


@media screen and (max-width: 767px) {
    .custom-tooltip {
        top: 100%;
        left: 0%;
        transform: translateX(-60%);
    }

    #step-3 .btnBox {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .finalCalculatorView .tabBox .nav-tabs li {
        width: 100%;
        border-bottom: 1px solid #eee;
    }

    .finalCalculatorView .tabBox .nav-tabs {
        flex-direction: column;
    }

    div#step-2 .btnBox .btn-items {
        width: 100% !important;
    }

    #step-3 .btnBox .btn-items button {
        width: auto;
    }


    .vehiclesDetailsBox .detailsItem {
        width: 47%;
    }

    footer.FooterMain.theme-color.spaceBottom {
        margin-bottom: 120px;
    }

    div#timeGraph .highcharts-figure {
        flex-direction: column-reverse;
        align-items: center
    }

        div#timeGraph .highcharts-figure #timeLevel2Graph {
            width: 80%;
        }

        div#timeGraph .highcharts-figure #timeLevel1Graph {
            width: 100%;
        }

    .newUserFlow .ratePlanBarDetails {
        width: 100%;
    }

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

    .newUserFlow .ratePlanBarDetails {
        width: 100%;
    }

    .startTime {
        width: 100%;
    }


    #L1vsL2Cont .tabBox {
        flex-wrap: wrap;
        justify-content: center;
    }

    #L1vsL2Cont.durationTabBox, #L1vsL2Cont .savingType {
        justify-content: center;
    }

    div#EmissionsCont .highcharts-figure #emissionGasGraph {
        width: 100%;
    }

    div#EmissionsCont .highcharts-figure #emissionEVGraph {
        width: 80%;
    }

    .calculateKm {
        width: 100%;
        flex-direction: column;
        bottom: 0;
        border-radius: 20px 20px 0 0;
        box-shadow: 1px -4px 11px 1px #ddd;
    }

    .accordion p {
        line-height: 28px;
        font-size: 16px;
    }

    h2.graph_heading {
        flex-direction: column;
        gap: 5px;
    }

    div#L1vsL2Cont h2 {
        margin-top: 20px;
    }

    .vehiclesDetailsBox {
        flex-wrap: wrap;
    }

    .detailsItem {
        width: 100%;
    }

    div#ChargerCont .note-content {
        margin-top: 20px;
    }

    .newUserFlow .sc_card {
        padding: 0;
    }

    .sc_heading {
        font-size: 24px;
    }

    .select-menu .select-btn {
        height: 70px;
    }
}



@media screen and (max-width: 480px) {
    .WeekdayPeakBar img, .WeekendPeakBar img {
        margin: 0;
    }

    .pricingBoxDiv .touPlansBoxRight h2 {
        margin-bottom: 0px !important;
    }

    .headerTopLeftBox a.active:before {
        opacity: 0;
    }

    .sc_card h2 span {
        flex-direction: column;
    }

    div#L1vsL2Cont .roiFlexTtem .form-group.commanInputBoxMUI {
        width: 100%;
    }

    div#L1vsL2Cont h2 {
        margin-top: 10px;
    }

    div#timeGraph .highcharts-figure {
        flex-direction: column-reverse;
    }



    .sc_card h2 span.toolipGroup {
        flex-direction: unset !important
    }
}