/* =====================================================
   CLEAN EXPANDED MODAL OVERRIDE
   Scoped + Stable + Grid Safe
===================================================== */

/* ----------------------------------
   Undo media query collapse
---------------------------------- */
@media (min-width: 89em) {
    .QuoteResultsList .RateHolder.Expanded .Colquick {
        max-width: none !important;
        padding: initial !important;
    }
}

.QuoteActions{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:10px
}
.QuoteResultsList .RateHolder.Expanded .QuoteActions {
    flex-direction: row-reverse;
    position: sticky;
    bottom: 0;
    background: #fff;
}
/* ----------------------------------
   Overlay container (safe)
---------------------------------- */
.ContactInfo p i{
    margin-right:10px;
}
.ContactInfo{
    padding:0 10px;
}
.BtnHolder {
    align-items: unset;
    justify-content: center;
}
#launcher{
	right:32px!important;
	left:unset!important;
}
/* OUTER CARD */
.QuoteResultsList .RateHolder.Expanded .RateRow > .ColInfo {
    border-radius: 16px;
    overflow: hidden; /* Important */
}

    /* INNER SCROLL AREA */
    .QuoteResultsList .RateHolder.Expanded .RateRow > .ColInfo > .RowInfo {
        overflow: auto;
    }
    .QuoteResultsList {
        gap: 10px;
    }
.Consumption, .CEDBox {
    border: 1px solid #ccc;
    border-radius: 8px;
}
.k-autocomplete, .k-dropdown-wrap.k-state-default, .k-numeric-wrap.k-state-default, .k-picker-wrap.k-state-default {
    border: 1px solid #ccc;
    border-radius: 8px;
}

.RateHolder .RateRow{
    border:none!important;
}
.QuoteResultsList .RateHolder .RateRow.Main {
    border: 1px solid #ccc!important;
    border-radius: 8px;
    overflow:hidden;
    padding:5px;
	
    background-color: #fff;
}
.QuoteResultsList .RateHolder.Expanded .RateRow {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    padding: 40px;
}
.RateHolder.Expanded .RateRow:before,
.RateHolder.Expanded .RateRow:after {
    display: none;
}
.RateHolder.Expanded .ColInfo .RowInfo .ColInfo .RowInfo .ColInfo.Rates,
.RateHolder.Expanded .ColInfo .RowInfo .ColInfo .RowInfo .ColInfo.PlanInfo{
    flex-basis:50%;
    padding:20px;
}
.RateHolder.Expanded .ColInfo .RowInfo .ColInfo .RowInfo .ColInfo.Rates,
.RateHolder.Expanded .ColInfo .RowInfo .ColInfo .RowInfo .ColInfo.PlanInfo,
.QuoteResultsList .RateHolder.Expanded .SingleRate.AdditionalInfo,
.QuoteResultsList .RateHolder.Expanded .RatePlanContent.Costs {
    border-radius: 8px;
    background-color: #f9f9f9;
}
.QuoteResultsList .RateHolder.Expanded .RatePlanContent.Costs {
    margin-top: 10px;
    margin-top: 10px;
    padding: 20px;
    width: unset !important;
}
    .RateHolder.Expanded .Indicator {
        font-size: 2em;
    }

    .RateHolder.Expanded .PlanInfoHolder {
        margin: 0;
    }

.QuoteResultsList .RateHolder.Expanded .SingleRate.AdditionalInfo {
    margin-top: 10px;
    margin-top: 10px;
    /* width: 100%; */
    padding: 20px;
    margin-top: 10px !important;
    background-color: #dbdbdb;
    border: 2px solid #999!important;
}

.SideBarHolder{
	flex-grow:1;
	padding-top:50px;
}

    .RateHolder.Expanded .ColInfo .RowInfo .ColInfo .RowInfo .ColInfo .RatePlanContent {
        gap: 10px;
    }

    .RateHolder.Expanded .SmallCost {
        flex-grow: 1;
        font-size: 1.5em;
        justify-content: center;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    /* Modal card */
    .QuoteResultsList .RateHolder.Expanded .RateRow > .ColInfo {
        background: #ffffff;
        width: 100%;
        max-width: 900px;
        border-radius: 16px;
        box-shadow: 0 30px 80px rgba(0,0,0,0.25);
        padding: 40px;
        overflow:auto;
    }
    /* Remove legacy borders */
    .QuoteResultsList .RateHolder.Expanded .RatePlanContent,
    .QuoteResultsList .RateHolder.Expanded .ColInfo,
    .QuoteResultsList .RateHolder.Expanded .RowInfo {
        border: none !important;
        box-shadow: none !important;
    }
    /* Force vertical layout */
    .QuoteResultsList .RateHolder.Expanded .RowInfo,
    .QuoteResultsList .RateHolder.Expanded .RatePlanContent {
        display: flex !important;
        width: 100% !important;
    }

    .RateHolder.Expanded .RateRow .ColInfo .RowInfo {
        flex-direction: column !important;
    }

    .RateHolder.Expanded .RateRow .ColInfo {
        align-items: unset;
    }
    /* ----------------------------------
   Supplier Image
---------------------------------- */
    .QuoteResultsList .RateHolder.Expanded .Col.SupplierImage {
        width: 100% !important;
        display: flex !important;
        justify-content: center;
        margin-bottom: 0;
        margin-top: 0;
        padding: 0 !important;
        flex-basis: unset;
        height: 150px;
    }

    .QuoteResultsList .RateHolder.Expanded .SupplierImage {
        width: 200px !important;
        height: 100px !important;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        margin-bottom: 25px !important;
    }

.RateHolder .RateRow .RowInfo .Colquick:first-of-type{
    border-top:none;
}
/* ----------------------------------
   Flags (pills)
---------------------------------- */
/*.QuoteResultsList .RateHolder.Expanded .Colquick.RNLFlag,
.QuoteResultsList .RateHolder.Expanded .Colquick.Renewable,
.QuoteResultsList .RateHolder.Expanded .Colquick.Carbon,
.QuoteResultsList .RateHolder.Expanded .Colquick.BestRate {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 6px 14px !important;
    font-size: 12px;
    font-weight: 600;
    margin: 0 6px 16px 0 !important;
    position: relative;
    padding: 20px;
    border-radius: 8px;
    width: unset !important;
}*/

    .QuoteResultsList .RateHolder .SupplierTop {
        display: flex;
        flex-direction: column;
    }

    .QuoteResultsList .RateHolder.Expanded .SupplierTop {
        display: flex;
        flex-direction: row;
        width: 100%;
    }

.Consumption .CurrentSupplierLabel {
    flex-grow: 1;
}

.CurrentSupplierLabel {
    display: flex;
    align-items: center;
    justify-content: center;
}

.Consumption .CEDLabel {
    flex-grow: 1;
}

.CEDLabel {
    display: flex;
    align-items: center;
    justify-content: center;
}



@media (min-width: 89em) {
    .ContractOverview div {
        border: 1px solid #ccc;
        border-radius: 8px;
    }
}

@media (max-width: 88.99em) {

    .QuoteResultsList .RateHolder.Expanded .SupplierTop {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .QuoteResultsList .RateHolder.Expanded .SingleRate{
        flex-direction:column;
    }
    .RateHolder .RateRow .ColInfo p{
        width:unset;
    }
    .RateHolder.Expanded .ColInfo .RowInfo .ColInfo .RowInfo .ColInfo.Rates, .RateHolder.Expanded .ColInfo .RowInfo .ColInfo .RowInfo .ColInfo.PlanInfo{
        flex-basis:unset;
    }
    .RateHolder.Expanded .SmallCost{
        margin:10px 0;
        gap:20px;
    }

    .QuoteResultsList .RateHolder.Expanded .RateRow > .ColInfo{
        width:unset;
        padding:10px;
    }
    .Logo{
        background-position:top;
    }
}

    .RateHolder .RateRow .AcceptNow span, .RateHolder .RateRow .SendQuote span, .QuoteBack span {
        font-weight: 700;
    }
.Renewable {
    background-color: forestgreen !important;
    color: #fff !important;
}
.Carbon {
    background-color: deepskyblue !important;
    color: #fff !important;
}
.QuoteResultsList .RateHolder .Colquick.RNLFlag,
.QuoteResultsList .RateHolder .Colquick.Renewable,
.QuoteResultsList .RateHolder .Colquick.Carbon,
.QuoteResultsList .RateHolder .Colquick.BestRate {
    border-radius: 8px !important;
    margin: 5px !important;
    top: 0;
    position: relative;
    max-width: 80px;
    font-size: 12px;
    justify-content: center;
    align-items: center;
    display: flex;
    text-align: center;
    min-height: 32px;
    line-height: 16px;
	flex-grow:1;
	width:unset!important;
}

    .QuoteResultsList .RateHolder .Colquick.RNLFlag.NA,
    .QuoteResultsList .RateHolder .Colquick.Renewable.NA,
    .QuoteResultsList .RateHolder .Colquick.Carbon.NA,
    .QuoteResultsList .RateHolder .Colquick.BestRate.NA {
       opacity:.1;
       filter:grayscale(1)
    }
.QuoteResultsList .RateHolder.Expanded .Colquick.RNLFlag.NA,
.QuoteResultsList .RateHolder.Expanded .Colquick.Renewable.NA,
.QuoteResultsList .RateHolder.Expanded .Colquick.Carbon.NA,
.QuoteResultsList .RateHolder.Expanded .Colquick.BestRate.NA {
    opacity: 1 !important;
    filter: none !important;
    background: #fff !important;
    color: #fff !important;
    border: 1px solid #ccc !important;
	width:unset!important;
}


.QuoteResultsList .RateHolder.Expanded .RNLFlag {
    background: #111827;
    color: #fff;
}

    .QuoteResultsList .RateHolder.Expanded .Renewable {
        background: #16a34a;
        color: #fff;
    }

    .QuoteResultsList .RateHolder.Expanded .Carbon {
        background: #0ea5e9;
        color: #fff;
    }

    .QuoteResultsList .RateHolder.Expanded .BestRate {
        background: #f59e0b;
        color: #fff;
    }
    /* ----------------------------------
   Headings
---------------------------------- */
    .QuoteResultsList .RateHolder.Expanded h2 {
        font-size: 18px;
        font-weight: 600;
        margin: 30px 0 12px 0;
        color: #111827;
    }
    /* ----------------------------------
   Clean List Rows
---------------------------------- */
    .QuoteResultsList .RateHolder.Expanded .SingleRate {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f3f4f6;
        font-size: 16px;
    }

    .RateHolder.Expanded .ColInfo .RowInfo .ColInfo .RowInfo .ColInfo {
        max-height: unset !important;
    }

    .QuoteResultsList .RateHolder.Expanded .SingleRate span[style*="float"] {
        float: none !important;
    }

    .QuoteResultsList .RateHolder.Expanded .SingleRate span:first-child {
        color: #6b7280;
    }

    .QuoteResultsList .RateHolder.Expanded .SingleRate b {
        font-weight: 400;
        color: #111827;
    }
    /* Additional info paragraph */
    .QuoteResultsList .RateHolder.Expanded .SingleRate[style*="display:flex"] {
        border: none;
        margin-top: 0;
        color: #4b5563;
        font-size: 16px;
        line-height: 1.6;
        gap: 10px;
        flex-direction: column;
    }

        .QuoteResultsList .RateHolder.Expanded .SingleRate[style*="display:flex"] span {
            flex-grow: 1;
        }
    /* ----------------------------------
   Buttons (side-by-side)
---------------------------------- */
    .QuoteResultsList .RateHolder.Expanded .ColSign {
        width: unset !important;
        flex-grow: 1;
    }

    .QuoteResultsList .RateHolder.Expanded .ColMore {
        width: unset !important;
    }

    .ViewQuoteButton {
        border-radius: 8px;
    }

    .QuoteResultsList .RateHolder.Expanded .ColSign {
        display: flex !important;
        gap: 20px;
        justify-content: center;
    }

    .RateHolder .RateRow .AcceptNow span, .RateHolder .RateRow .SendQuote span, .QuoteBack span {
        border-radius: 8px;
        padding: 20px;
    }

    .RateHolder .RateRow .SendQuote, .RateHolder .RateRow .AcceptNow {
        padding: 0;
        margin-top: 5px;
    }

        .RateHolder .RateRow .SendQuote span {
            padding: 10px;
            background-color: #eee;
            color: #333;
            margin: 0;
            border: 1px solid #aaa;
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            .RateHolder .RateRow .SendQuote span:hover {
                padding: 10px;
                background-color: var(--AccentColor);
                color: #fff;
                margin: 0;
            }

        .RateHolder .RateRow .AcceptNow span {
            background-color: var(--AccentColor);
        }

            .RateHolder .RateRow .AcceptNow span:hover {
                color: var(--AccentColor);
                background-color: var(--MainColor);
            }

    .QuoteHeader {
        max-width: unset;
    }

    .chat-launcher {
        background: #2d2d2d;
        color: #fff;
        padding: 10px 18px;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        font-size: 14px;
        z-index: 9999;
    }
    /* ONLINE STATE */
    #customChatLauncher.chat-available {
        background-color: #16a34a; /* strong green */
        color: #fff;
        animation: chatPulse 1.4s infinite ease-out;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }

        /* Subtle hover lift */
        #customChatLauncher.chat-available:hover {
            transform: translateY(-2px);
        }

    /* Pulse ring */
    @keyframes chatPulse {
        0% {
            box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7);
            transform: scale(1);
        }

        50% {
            box-shadow: 0 0 0 14px rgba(22, 163, 74, 0);
            transform: scale(1.05);
        }

        100% {
            box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
            transform: scale(1);
        }
    }

    /* OFFLINE STATE */
    #customChatLauncher {
        background-color: #2d2d2d;
        color: #fff;
    }


.k-dropdown:focus, .k-dropdown:hover, .k-dropdown {
    border: none;
}

.result-list{
    list-style:none;
}
.result-item{}
.close-modal {
    position: absolute;
    top: 0px;
    right: 10px;
    font-size: 3em;
}

.rowform input, .CantFind, .ControlSection .FindMeter {
    border-radius: 8px;
}



.RenewableTag {
    color: #fff;
    font-size: 25px !important;
    background-color: green;
    border-radius: 200px;
    padding: 5px !important;
    position: relative;
    float: left;
    margin-left: 2px;
}
.SmartTag {
    color: #fff;
    font-size: 25px !important;
    background-color: #0059B2;
    border-radius: 200px;
    padding: 5px !important;
    position: relative;
    float: left;
    margin-left: 2px;
}


/* 1. Define the primary 'on' color (green by default, can be customized) */
:root {
    --primary-color: #4cd964; /* iOS-like green; change to any accent color */
}

/* 2. Hide the default checkbox appearance */
.toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* 3. Style the toggle track (the slider) */
.toggle-slider {
    display: inline-block;
    width: 55px;
    height: 30px;
    background: #e5e5e5; /* light gray off-state background */
    border-radius: 9999px; /* full rounding to create pill shape */
    position: relative;
    cursor: pointer;
    padding:0;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), /* subtle inner shadow */
    inset 0 4px 8px rgba(0,0,0,0.1), 0 1px 1px rgba(255,255,255,0.8); /* slight top highlight */
    transition: background 0.3s ease; /* smooth background color transition */
}

    /* 4. Create the knob using a pseudo-element */
    .toggle-slider::before {
        content: "";
        position: absolute;
        width: 26px;
        height: 26px;
        background: #fff; /* white knob */
        border-radius: 50%; /* make it a circle */
        top: 2px;
        left: 2px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* shadow for knob depth */
        transition: transform 0.3s ease; /* smooth knob movement */
    }

/* 5. Checked (ON) state styles */
.toggle-input:checked + .toggle-slider {
    background: green; /* change track to primary color when ON */
}

    /* Move knob to the right side when checked */
    .toggle-input:checked + .toggle-slider::before {
        /* Translate the knob to the right by the track width minus the knob width minus the left offset (smoothly) */
        transform: translateX(25px);
    }

.fHolder {
    display: flex;
    /* width: 100%; */
    padding: 5px;
    gap: 10px;
}
    .fHolder .fLabel {
        flex-grow: 1;
        font-size: .8em;
}

    .fHolder.Supplier {
        flex-direction: column;
        align-items: center;
        gap: 3px;
    }

        .fHolder.Supplier .fLabel {
            text-align: center;
            font-size: .8em;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .fHolder.Supplier img {
            max-height: 40px;
            line-height: 20px;
            width: auto !important;
            max-width: calc(100% - 10px);
            margin: 2.5px;
        }

.fSuppliers .k-listview-content,.fEnergy  .k-listview-content {
    display:flex;
    flex-wrap:wrap;
}


.QuoteFilters .FilterHolder {
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
}

 .fHolder {
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

 .fHolder .fLabel {
    text-align: center;
    font-size: .8em;
}

.fDuration .fHolder img {
    max-height: 50px;
    max-width: 110px;
    flex-direction: column;
    align-items: center;
    width: 45%;
    gap: 0;
}

.fDuration {
    display: flex;
    flex-wrap: wrap;
	overflow:unset;
	margin:0;
}

.QuoteSupplierImage, .FeatureColumn i {
    font-size: 25px;
    margin:0 10px;
}

.FeatureColumn{
    display:flex;
    align-items:center;
}

    .FeatureColumn .OptionHolderSupplier {
        display: flex;
        flex-direction: column;
        gap: 5px;
        margin: 5px;
        padding: 5px 0;
    }

#CloseSupplier{color:#fff; font-size:1.5em;}

#egrid.k-grid .k-grid-content tr, #egrid.k-grid .k-grid-content-locked table tr {
    min-height: 160px;
    height: 130px !important;
}

.QuoteFilters{
flex-direction: row;
	max-width:unset;
width:unset;
    box-shadow: 0 0 3px #ccc;
    border: 1px solid #eee;
    padding: 10px;
    font-size: 1.2em;
	border-radius:10px;
    margin: 10px auto;
	top:0;
	position:relative;
	z-index:0;
}

.QuoteResults h1 {
    color: #333;
    font-size: 3em;
    margin-top: 5px;
    font-family: komu-a, sans-serif;
    cursor: pointer;
}
.QuoteFilters .FilterHolder{
	max-width:unset;
}

.QuoteFilters h1{
color: var(--TextColor);
}

.ButtonHolder{
	justify-content:center;
	background-color:#eee;
}

.QuoteFilters.Collapsed {
    flex-grow: 0;
    min-height: 0;
    opacity: 0;
    margin-top: 0;
    border: none;
    max-height: 0;
    margin: 0;
    padding: 0;
}
.QuoteResults{
	background-color:#fafafa;
	padding:10px;
}

.QuoteResultsList.k-grid, .fDuration{
	background-color:transparent;
	
}
.MpanLook:before{
	display:none;
}
.FiltersButton:before{display:none;}

.ButtonHolder div {
    border: 1px solid rgba(100, 100, 100, 1);
    background-color: rgba(50, 50, 50, 1);
	color:#fff;
	font-size:1.5em;
	border-radius:10px;
	padding:10px;
    align-items: center;
}

.ButtonHolder div.Selected, .ButtonHolder div:hover {
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.6);
	color:#333;
    align-items: center;
}

.AddressNotFound, .BackBtn, .ChangeBtn, .KnowConsumption, .NextBtn, .RatesBtn, .ReturnBtn, .SeePrices, .SpendBtn, .StartBtn, .VerifyOtpBtn, .ResendOtpBtn{
	border-radius:8px;
}

.RateHolder.Expanded .RateRow.Main{
top:100px;}