/* Old app.css styling */

h1:focus {
    outline: none;
}


.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjEzLjU4NiA2Ni4wMTgzWk0yNjMuNTc2IDg2LjA1NDdDNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--v1-dark-border-subtle);
}


/* Container for validation summary */
.validation-summary {
    border-bottom: 1px solid var(--v1-danger-border-subtle);
    background-color: var(--v1-danger-bg-subtle);
    color: var(--v1-danger-text-emphasis);
    padding: 0.5rem 1rem;
    border-radius: 0.1875rem;
    margin-bottom: 1rem;
    font-size: var(--v1-body-font-size);
}

    /* Remove default list styling */
    .validation-summary ul {
        list-style-type: none;
        padding-left: 0;
        margin: 0;
    }

    /* Individual error messages */
    .validation-summary li {
        margin-bottom: 5px;
    }

.validation-message {
    color: var(--v1-danger-text-emphasis);
    font-size: var(--v1-body-font-size);
}

#components-reconnect-modal,
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: none;
}

/* Original common.css styling */

.clsImg {
    height: 80px;
}

.cursor-pointer {
    cursor: pointer;
}

#sessionModal {
    z-index: 1100 !important;
}

.rz-multiselect-items li, .rz-dropdown-item, .rz-dropdown {
    font-size: inherit !important;
}

.rz-dropdown.rz-state-disabled {
    background-color: var(--v1-input-disabled-bg) !important;
    border-color: var(--v1-input-disabled-bg) !important;
    color: var(--v1-secondary-color) !important;
}

.rz-dropdown.rz-state-disabled .rz-dropdown-label {
    background-color: var(--v1-input-disabled-bg) !important;
    color: var(--v1-secondary-color) !important;
}

.rz-dropdown-panel,
.rz-multiselect-panel,
.rz-autocomplete-panel,
.rz-overlaypanel,
.rz-datepicker-popup-container {
    z-index: 20002 !important;
}


.checkall-label {
    min-height: 33px;
    min-width: 100px;
}

.h400 {
    height: 400px;
}
.mh300 {
    min-height: 300px;
}
.mh150 {
    min-height: 150px;
}

canvas.chartjs-render-monitor[id$=sliderChart] {
    height: 56px !important;
    z-index: 0 !important;
}

/* ==== Container & Chart Overlay ==== */
.chart-nav-container {
    width: 100%;
    height: 70px;
    position: relative;
    margin-top: 2rem;
}

.irs .irs-grid {
    top: 60px;
}

#range-slider {
    visibility: hidden;
}

.error-message {
    min-height: 30px;
}

.header-search-component {
    position: relative;
}

.suggestions-box {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 4px;
}

/* Removed duplicate .header-search-component and .suggestions-box */

.usage_data_select {
    min-width: 140px;
}

.heat_map_container {
    height: 100% !important;
    position: relative;
}

.usage_data_container {
    height: 55vh;
    position: relative;
}

.label-bold {
    font-weight: bold;
}

.error-container {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.heat_map_echart {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.hidden-account-tiles {
    display: none !important;
}

.card-index {
    z-index: 1;
}
/*
 * Radzen dialog used only as a host for a Bootstrap modal (DialogService.OpenAsync with
 * Width="0px"): the dialog shell itself must contribute nothing visually, because the modal
 * inside it is position: fixed and paints over the whole viewport on its own.
 *
 * The selector is doubled on purpose. radzen-standard-base.css is loaded after common.css
 * (see App.razor), so .rz-dialog's own background-color/box-shadow win on equal specificity
 * and this override did nothing -- leaving a white 150x150 box with a 22px/64px drop shadow
 * painted behind the modal. min-width/min-height/overflow come from .rz-dialog too and are
 * reset for the same reason: an empty shell should have no box and should not clip.
 */
.hideRadzenDialogContainer.hideRadzenDialogContainer {
    background-color: transparent;
    box-shadow: none;
    min-width: 0;
    min-height: 0;
    overflow: visible;
}

/*
 * Ghost/stale-paint fix for the Bootstrap modals hosted inside those dialogs.
 *
 * .modal carries backdrop-filter: blur(4px) (main-utility.css), which puts the modal AND its
 * subtree on their own render surface. When the content changes height -- e.g. a
 * RadzenDataGrid paging from a full page of rows to a short last page -- Chromium/Edge does
 * not always invalidate that surface, so the previous, taller layout stays painted behind the
 * modal as a blurred ghost. Reproduced on Manage Roles > Users Assigned to <role>: page to
 * the last, partial page and the previous page's rows are still visible above and below the
 * modal.
 *
 * The frosted backdrop is kept, just moved onto a pseudo-element that has no children of its
 * own, so there is no cached subtree raster left to go stale. It cannot be moved onto
 * .rz-dialog-mask instead: that mask paints --v1-backdrop-bg, which main-utility.css declares
 * inside .modal-backdrop, so on the mask it does not resolve and the mask is fully
 * transparent -- these dialogs render no .modal-backdrop, so this blur is the only backdrop
 * treatment they have.
 */
.hideRadzenDialogContainer .modal {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.hideRadzenDialogContainer .modal::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/*
 * Users Assigned to <role> popup: keep the dialog box wrapped around its content.
 *
 * Both Bootstrap sizing helpers make .modal-dialog as tall as the viewport --
 * modal-dialog-scrollable via height: calc(100% - margin*2), modal-dialog-centered via the
 * same value as min-height -- so a short list (the last, partial page of the grid) sat inside
 * a viewport-tall box. Both classes are dropped from ViewRoles.razor and the centering moves
 * onto .modal, which is already position: fixed over the whole viewport, so nothing here is
 * full length any more.
 *
 * display needs !important only because .d-block (kept in the markup so the modal still shows
 * if this rule ever goes away) declares display: block !important. The dialog is centred with
 * margin: auto rather than align-items, which centres it without a min-height and, unlike
 * align-items: center, leaves the top reachable when a long list outgrows the viewport;
 * .modal's padding keeps the gap that --v1-modal-margin used to provide. width: 100% keeps
 * Bootstrap's --v1-modal-width max-width in charge of the width instead of letting the box
 * shrink to fit the rows.
 */
#RoleUsers_Modal {
    display: flex !important;
    padding: 0.5rem;
}

#RoleUsers_Modal .modal-dialog {
    width: 100%;
    margin: auto;
}

/*
 * Pinned grid height, applied by ViewRoles while the list spans more than one page.
 *
 * Paging must not change how tall the modal is: a short last page shrank it, and Edge left
 * the previous, taller page painted behind the modal as a ghost. The value mirrors the
 * max-height that .table-scroll already carries in main-utility.css -- pages that are full
 * are sitting at that cap anyway, so pinning it only stops the last page collapsing. Keep the
 * two in step if that cap ever changes.
 */
#RoleUsers_Modal .table-scroll-pinned {
    height: 65vh;
}

.rotate-collapse-icon {
    transform: rotate(-180deg);
}

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


.blurred-bg > *:not(.modal-blur-overlay) {
    filter: blur(5px);
    transition: filter 0.3s ease-in-out;
}

.text-ellipsis-one-line {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clear-icon-button {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.clear-icon-button .v1-icon {
    width: 10px;
    height: 10px;
}

.wrap-text {
    white-space: normal;
    word-break: break-word;
    max-width: 400px;
    max-height: 100px;
    overflow-y: auto;
}


.highlighted-suggestion {
    background-color: #e6f2ff;
    color: #000;
    border-radius: 4px;
}

.sidebarTopNav{
    top: 53px;
}


.input-datepicker-range .form-control-width-md {
    max-width: 100% !important;
}

/* Removed .visually-hidden - already in main.css (Bootstrap) */

.disable-payment-date input {
    pointer-events: none;
    background-color: #eee;
    color: #888;
}


#chartjs-tooltip {
    position: fixed;
    background: white;
    color: black;
    padding: 8px 12px;
    border-radius: 6px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    z-index: 9999;
}

.chart-tooltip strong {
    font-weight: bold;
}

.chart-tooltip br {
    content: "";
    display: block;
    margin: 4px 0;
}

.page-footer-container {
    z-index: 1 !important;
}

.activity-note-text {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.form-control_max_width {
    max-width: 400px !important;
}

.h-50vh {
    height: 50vh !important;
}
.h-100 .rz-map {
    height: 100% !important;
    min-height: 40vh !important;
}

.report-map .chart-container {
    height: 100% !important;
    margin: 0 !important;
}

.is-active {
    font-weight: 700;
    color: #03a1f9 !important;
}

.account-details-top {
    top: 65.2px;
}

.card-tiles-top {
    top: 264px !important;
}

.card-tiles-margin-top {
    scroll-margin-top: 264px !important;
}
.mh-50vh {
    max-height: 50vh !important;
}

div#components-reconnect-modal{
    z-index: 9999 !important;
}
.is-invalid:not(#send-message *, #PayArrangeAmount1, #PayArrangeAmount2, #PaymentSchedule1, #PaymentSchedule2, #termsConditionsLabel) {
    border: 1px solid #dc3545 !important;
    border-radius: 0.25rem;
}
li.selectedList {
    background-color: var(--v1-secondary-bg);
}
li.selectedList button {
    font-weight: bold;
}
.modal.alert-dialog {
    --v1-modal-zindex : 2000;
}
.mh-40vh {
    min-height: 40vh;
}

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


.pac-input-text {
    background-color: #fff;
    font-family: Roboto, sans-serif;
    font-size: 15px;
    font-weight: 300;
    margin-left: 12px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 350px;
    left: 0px !important;
    top: 80px !important;
    z-index: 9999 !important;
    position: absolute !important;
}

.pac-container {
    z-index: 10000 !important;
    position: absolute !important;
    background-color: #fff;
    border: 1px solid #ccc;
}

.disabled-custom {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
}

.wide-column {
    width: 350px;
    min-width: 200px;
    max-width: 400px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.search-input {
    min-width: 200px;
    max-width: 400px;
}
.minh500px{
    min-height: 500px;
}

.unread-row {
    font-weight: bold;
}

.w150px{
    width:150px;
}

.col-subject {
    min-width: 300px;
    width: 40%;
    max-width: 600px;
}

.col-date {
    width: 120px;
    min-width: 100px;
    max-width: 150px;
    text-align: right;
}

.col-icons {
    width: 100px;
    min-width: 80px;
    max-width: 120px;
    text-align: right;
}

/*CSS for external tooltip arrow on chart (Custom tooltip)*/
.tooltip-arrow-custom {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(0, 0, 0, 0.8);
    position: absolute;
    left: var(--chart-tooltip-arrow-left, 50%);
    transform: translateX(-50%);
    bottom: -6px;
}

.signature-canvas {
     border: 1px solid #ccc;
     background-color: #fff;
     touch-action: none;
}
.v1-header-hidden {
    display: none !important;
}
.actionButtonsClass {
    width: 100%;
    position: absolute;
    top: 1.4rem;
}

.no-data-message {
    line-height: 300px;
    text-align: center;
}

.pinherit {
    padding: inherit;
}

.meter-reading-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--v1-card-login-section-bg);
    padding: min(5dvh, 5rem) min(1dvw, 1rem);
    border-bottom: var(--border-default);
}

.meter-reading-form-control-container {
    display: flex;
    justify-content: center;
    gap: min(1dvw, 0.5rem);
    width: min(100%, 800px);
}

.meter-reading-form-control-container > .form-control {
    width: min(100%, 5rem);
    padding: min(1dvw, 1rem);
    text-align: center;
    font-weight: 600;
    font-feature-settings: "tnum";
    font-size: min(5dvw, 2rem);
    line-height: 1;
}

.meter-reading-form-control-container > .form-control.disabled,
.meter-reading-form-control-container > .form-control[disabled] {
    border-color: var(--v1-border-color);
    color: var(--v1-gray-600);
}

.meter-reading-form-control-container > .form-control.is-invalid {
    background-image: none;
}

/* Removed .w-100 - already in main.css (Bootstrap) */

.max-w-100{
    max-width:100% !important;
}

/*Start Radzen FileUpload Css*/
#uploadWithDragAndDrop .rz-fileupload-content {
    display: none !important;
}

.rz-html-editor-dialog .rz-fileupload-content,
.rz-html-editor-dialog .rz-fileupload-files {
    display: block !important;
}

#uploadWithDragAndDrop {
    left: 0;
    --rz-upload-button-bar-background-color: transparent;
    --rz-upload-button-bar-padding: 0;
}

    #uploadWithDragAndDrop .rz-fileupload-buttonbar .rz-fileupload-choose {
        width: 100%;
        text-align: center;
        font-size: 16px;
        padding: 100px 0;
    }

.progress-container {
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
    width: 100%;
}

.rz-card.rz-variant-outlined {
    border: none !important;
}

.form-drop__container {
    position: relative;
    width: 100%;
    height: 150px;
    border: 2px dashed var(--v1-border-color);
    border-radius: var(--v1-theme-rounded-no, 0.3125rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1;
    overflow: hidden;
}

.rz-fileupload-absolute {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/*End Radzen FileUpload Css*/
/* Start Scrollable Large Dropdown Css */
.scrollable-dropdown {
    overflow: hidden;
    padding: 0;
}

.dropdown-scroll-container {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.dropdown-scroll-area.list-unstyled {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dropdown-scroll-area .nav-link.nav-sub-link {
    padding-left: 1rem;
    padding-right: 1rem;
}

    .scrollable-dropdown .dropdown-scroll-area {
        max-height: 70vh;
        overflow-y: auto;
        padding: .25rem 0 .5rem;
        scrollbar-width: thin;
    }

        .scrollable-dropdown .dropdown-scroll-area::-webkit-scrollbar {
            width: 6px;
        }

        .scrollable-dropdown .dropdown-scroll-area::-webkit-scrollbar-thumb {
            background: rgba(0,0,0,.25);
            border-radius: 3px;
        }

    .scrollable-dropdown .dropdown-cap-header {
        background: var(--bs-card-subheader-bg, var(--v1-gray-200));
        z-index: 2;
    }

.mw-425 {
    max-width: 425px !important;
}

/* End Scrollable Large Dropdown Css */
.comp-loading {
    background: var(--v1-card-bg) url('/images/bootstrap-spinner.svg') no-repeat center;
    * {  visibility : hidden !important}
}

.comp-loading.nav-account {
    min-height: 160px;
    background: var(--v1-nav-account-background) url('/images/bootstrap-spinner.svg') no-repeat center !important;
    *{ display: none !important}
}
.comp-loading.body-background {
    background: var(--v1-body-bg) url('/images/bootstrap-spinner.svg') no-repeat center !important;
    * { visibility: hidden !important}
}

.nav.comp-loading .nav-link-icon-container {
    min-height : 28px !important;
}
.nav.comp-loading li {
    min-height: 44px !important;
}


.comp-loading-transition {
    transition: opacity 0.5s ease-in;
}
.comp-loading-transition.hidden {
    opacity: 0;
    transition: none;
}
.rz-notification{
    z-index:9999 !important;
}
.nested-class {
    margin-left: 15px;
    border: 1px dotted;
}

.form-section.form-section-toggle {
    margin: 0;
}
.form-section.form-section-toggle .form-section-col {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #dee2e6;
}
.form-section.form-section-toggle + .form-section.form-section-toggle .form-section-col {
    border-top: none;
}
.form-section.form-section-toggle .form-section-header {
    margin-bottom: 0;
    flex: 1 1 auto;
    order: 1;
}
.form-section.form-section-toggle .form-control-container {
    display: contents;
}
.form-section.form-section-toggle .form-check.form-switch {
    margin-bottom: 0;
    flex: 0 0 auto;
    order: 2;
}
.form-section.form-section-toggle .form-section-toggle-help {
    flex: 1 1 100%;
    order: 3;
    margin: 0;
}

/* Payment integration wizard: constrain the toggle row to the standard field-column width so it aligns
   with the other (centered) fields instead of stretching the full card width. Scoped to the wizard
   (.payment-config-form) and its add/edit modals (.payment-config-modal, which render outside the wizard
   wrapper via a section outlet) so it does not affect toggle rows elsewhere. */
.payment-config-form .form-section.form-section-toggle .form-section-col,
.payment-config-modal .form-section.form-section-toggle .form-section-col {
    width: clamp(30rem, 90cqw, 40rem);
}

.checkmark-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 18px;
    height: 18px;
    fill: white;
    background: transparent;
    pointer-events: none;
}

.heatmap-container {
    transition: height 0.4s ease-in-out; /* Smooth height animation */
    overflow: hidden; /* Prevent scroll jump during resize */
}
#chatbot:has(.fui-Spinner) {
    display: none;
}

.ledgerHistoryDateRangeDeleteIcon {
    margin-left: -22px;
}

.premises-info-list-border {
    border-top: 1px solid #DADFE7;
}.ami-usage-legend {
    display: inline-block;
    width: 18px;
    height: 4px;
    background: #666666;
}
.ami-water-budget-legend {
    display: inline-block;
    width: 18px;
    height: 4px;
    background: #4da3ff;
}
.tooltip-class {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.text-wrap-break {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.min-w-0 {
    min-width: 0 !important;
}

.filter-break-word {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal !important;
}

.filter-row {
 white-space: nowrap;
}

.filter-col {
 min-width:0;
}

.filter-date {
 min-width:0;
 max-width:320px;
}

.filter-dropdown-sm {
 min-width:0;
 width:200px;
}

.filter-dropdown-alert {
 min-width:0;
 width:220px;
}

.filter-col .form-label {
 white-space: normal;
}

.cardsubheaderbg {
    background: var(--v1-card-subheader-bg);
}
.theme-preview-container {
    margin-top: 1rem;
}

.template-preview-wrapper {
    padding: 20px;
    background-color: var(--v1-theme-page-preview, #F8F9FB);
    min-height: 400px;
}

    .template-preview-wrapper img {
        max-width: 100%;
        height: auto;
    }

    .template-preview-wrapper table {
        max-width: 100%;
    }

.resolved-row {
    opacity: 0.45;
}

.action-slot {
    width: 36px; /* reserve fixed space */
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.modal-top-spacing {
    margin-top: 5rem;
}

.primaryData {
    position: relative;
    z-index: 0;
}

/* Payment Method Toggle Alignment Fix */
.payment-method-toggle {
    padding-left: 3.5rem !important;
}


.vx-mobile-banner {
    border-radius: 12px;
    padding: 12px 12px;
    margin: 12px;
    font-size: 0.95rem;
}

    .vx-mobile-banner .btn.btn-icon {
        min-width: 40px;
        min-height: 40px;
    }

.overflow-x-hidden {
    overflow-x: hidden;
}

.date-picker-gap {
    margin-right: 20px;
}

/*
 * Date-picker (and other overlay) popups vs the nav sidebar.*/
.content-container {
    position: relative;
}

/*
 * Delete confirmation modal stacking + paint behavior.
 *
 * z-index 99998/99999 stacks above Bootstrap tooltips/popovers (~1070-1080),
 * Radzen overlays (~20002), and any portal page-header/sidebar layers so the
 * blurred backdrop covers the page uniformly without needing a body-class toggle.
 *
 * opacity: 1 !important and transition: none !important suppress Bootstrap's
 * default .fade opacity transition (.15s linear). Without this, the backdrop
 * mounts at opacity 0 and ramps to 1, producing a visible blink/flicker on
 * first paint because backdrop-filter: blur is invisible until opacity > 0.
 * Forcing fully opaque + no transition makes the backdrop render blurred on
 * the very first frame.
 */
.delete-modal-backdrop {
    background-color: rgba(0, 0, 0, 0.3); /* lighter black */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99998;
    opacity: 1 !important;
    transition: none !important;
}

.modal.vx-delete-confirmation-modal.show {
    z-index: 99999;
    opacity: 1 !important;
    transition: none !important;
}

/* /Utility/Common.css */ 

.notification-container {
    position: fixed;
    top: 3rem;
    right: calc(var(--layout-gap-width) - .5rem);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    z-index: 1031
}

@media(max-width: 576px) {
    .notification-container {
        width: calc(100dvw - var(--layout-gap-width)*2)
    }
}

.notification-container .notification-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .25rem
}

.notification-container:not(.expanded) .notification-list .notification:nth-of-type(1) {
    z-index: 2;
    box-shadow: var(--v1-theme-shadows-no, 1px 1px 1px 1px rgba(20, 20, 21, 0.03), 10px 10px 10px rgba(20, 20, 21, 0.04), 0 0 0 1px rgba(20, 20, 21, 0.05))
}

.notification-container:not(.expanded) .notification-list .notification:nth-of-type(2) {
    position: absolute;
    bottom: -0.8rem;
    z-index: 1;
    transform: scale(0.93)
}

.notification-container:not(.expanded) .notification-list .notification:nth-of-type(3) {
    position: absolute;
    bottom: -1.5rem;
    transform: scale(0.85)
}

.notification-container:not(.expanded) .notification-list .notification:nth-of-type(n + 4) {
    opacity: 0;
    max-height: 0;
    display: none
}

.notification-container:not(.expanded) .notification-list .notification:nth-of-type(n + 2) {
    height: 5rem;
    max-height: 5rem;
    min-height: 5rem;
    overflow: hidden;
    align-items: baseline
}

    .notification-container:not(.expanded) .notification-list .notification:nth-of-type(n + 2) .btn-close {
        display: none
    }

    .notification-container:not(.expanded) .notification-list .notification:nth-of-type(n + 2) .notification-content {
        max-height: 3rem
    }

.notification-container.expanded {
    overflow-y: auto;
    height: calc(100dvh - 8rem);
    pointer-events: none;
    overscroll-behavior: contain
}

    .notification-container.expanded .notification-btn-container {
        pointer-events: initial
    }

    .notification-container.expanded .notification-list {
        -webkit-backdrop-filter: blur(0.5rem);
        backdrop-filter: blur(0.5rem)
    }

    .notification-container.expanded .notification {
        transform: scale(1);
        opacity: 1;
        pointer-events: initial
    }

        .notification-container.expanded .notification .btn-close {
            z-index: 2
        }

.notification-container .notification-btn-container button {
    position: fixed;
    right: calc(var(--layout-gap-width) - .5rem);
    top: 1rem;
    border-radius: 50rem;
    background-color: var(--v1-notification-background-color)
}

.notification {
    display: flex;
    align-items: center;
    gap: .75rem;
    position: relative;
    animation: notification-slide-in .3s ease-out;
    padding: 1rem 1rem;
    width: 400px;
    min-height: 5rem;
    min-width: 0;
    background-color: var(--v1-notification-background-color);
    border: 1px solid var(--v1-notification-border-color);
    border-radius: var(--v1-theme-rounded-no, 0.75rem);
    transition: transform .3s ease-in,bottom .3s ease-in
}

@media(max-width: 576px) {
    .notification {
        max-width: 100%
    }
}

.notification .notification-icon {
    margin-top: .25rem
}

    .notification .notification-icon svg {
        display: block
    }

.notification p:last-of-type {
    margin: 0
}

.notification .notification-content {
    display: flex;
    flex: 1;
    gap: .75rem
}

.notification .notification-text {
    flex: 1;
    overflow: hidden;
    font-size: .92857143em;
    line-height: 1.71428571
}

.notification .notification-title {
    font-size: 1rem;
    font-weight: 600
}

.notification .notification-subtitle {
    color: var(--v1-secondary-color);
    line-height: 1.5
}

.notification .btn-close {
    align-self: flex-start
}

@keyframes notification-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0
    }

    to {
        transform: translateX(0);
        opacity: 1
    }
}

/*Start: CSS for module dropdown on Utility profile search page*/
.module-dropdown-overlay {
    background: transparent;
    cursor: default;
}

.module-dropdown-panel {
    /* Prevent flickering */
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

    /* Remove the fade-in animation since we're controlling visibility with JS */
.module-dropdown-panel[style*="opacity: 1"] {
    animation: none;
}

.module-dropdown-panel::-webkit-scrollbar {
    width: 8px;
}

.module-dropdown-panel::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.module-dropdown-panel::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.module-dropdown-panel::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.module-dropdown-overlay,
.module-dropdown-panel {
    pointer-events: auto;
}

.module-dropdown-panel label,
.module-dropdown-panel span {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.module-filter-container {
    position: relative;
    width: 100%;
}

.module-dropdown-button {
    padding: 6px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: white;
    width: 100%;
    box-sizing: border-box;
}

.module-dropdown-text {
    color: #495057;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.module-dropdown-icon {
    font-size: 0.8em;
    flex-shrink: 0;
    margin-left: 8px;
}

.module-dropdown-overlay {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.module-dropdown-panel {
    position: fixed;
    z-index: 10001;
    background: white;
    border: 1px solid #ced4da;
    border-radius: 4px;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease-out;
}

.module-dropdown-content {
    padding: 8px;
}

.module-dropdown-header {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.module-parent {
    display: flex;
    align-items: center;
    padding: 4px 0;
    cursor: pointer;
}

.module-checkbox {
    margin-right: 8px;
    cursor: pointer;
}

.module-checkbox.indeterminate {
    opacity: 0.5;
}

.module-parent-label {
    font-weight: 600;
    color: #212529;
}

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

.module-child {
    display: flex;
    align-items: center;
    padding: 4px 0;
    cursor: pointer;
}

.module-child-label {
    color: #495057;
}
/*End: CSS for module dropdown on Utility profile search page*/

/*Start: Footer Links - Drag and Drop */
.list-group-item.drag-origin {
    visibility: hidden;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

.list-group-item.sortable-ghost {
    border: 2px dashed var(--v1-primary, #0d6efd);
    border-radius: var(--v1-theme-rounded-no, 0.375rem);
    background: transparent;
    min-height: 80px;
}
/*End: Footer Links - Drag and Drop */
.message-body-container {
    flex: 1 1 0;
}

.content-modal {
    width: 16px;
    height: 16px;
}

.shipment-preview-modal {
    z-index: 1101 !important;
    position: fixed !important;
}

/* Notification modals: channel list should not show an internal scrollbar. */
.notification-channels-container-no-scroll {
    max-height: unset !important;
    overflow-y: visible !important;
}
.page-container:has(.vx-nested-page-modal.show) .page-header-container {
    z-index: 0;
}

/* .content-container (z-index 1) is a stacking context, so the modal's z-index only competes
   inside it and the sticky .nav-main sidebar (z-index 2) paints over the dialog's left edge.
   Dropping it to auto lets the modal and its backdrop stack against the whole page. */
.page-container:has(.vx-nested-page-modal.show) .content-container {
    z-index: auto;
}

.modal.vx-nested-page-modal.show {
    z-index: 10200;
}

.modal-backdrop.vx-nested-page-modal-backdrop {
    z-index: 10190;
}

/* The shared Data Map modals (VertexOne.UIComponents' FadingModalWrapper) are
   page-level modals rendered inline inside .page-container, so they hit the same problem as
   .vx-nested-page-modal above: .page-header-container is position:sticky with z-index 1030 and
   clips whatever part of the dialog overlaps it. Raising the modal alone is not enough -- the
   header has to be dropped for the duration, exactly as the rule above does. Kept host-side
   rather than in the package because Admin portals these modals out of the header's stacking
   context instead and needs neither rule. */
.page-container:has(.vx-datamap-modal.show) .page-header-container {
    z-index: 0;
}

.modal.vx-datamap-modal.show {
    z-index: 10200;
}

/* MapAreaSelector (criteria map modal sidebar); scoped to .map-area-selector-panel */
.map-area-selector-panel .map-area-selector-helper-text {
    color: #fff;
}

.map-area-selector-panel .map-area-selector-uploader,
.map-area-selector-panel .map-area-selector-uploader h4,
.map-area-selector-panel .map-area-selector-uploader p,
.map-area-selector-panel .map-area-selector-uploader .form-text,
.map-area-selector-panel .map-area-selector-uploader .file-message {
    color: #fff !important;
}

.map-area-selector-panel .map-area-selector-uploader .rz-card.rz-variant-outlined {
    border-color: rgba(255, 255, 255, 0.35);
    background-color: transparent;
}

/* Uploader in dark panel: space inside dashed border; overrides global .form-drop__container + #uploadWithDragAndDrop choose padding */
.map-area-selector-panel .map-area-selector-uploader .form-drop__container {
    height: auto;
    min-height: 200px;
    max-height: none;
    overflow: visible;
    padding: 1.25rem 1.1rem 1.5rem;
    box-sizing: border-box;
    justify-content: center;
}

.map-area-selector-panel .map-area-selector-uploader .form-drop__container .rz-card {
    width: 100%;
    max-width: 100%;
}

.map-area-selector-panel .map-area-selector-uploader .form-drop__container .v1-icon.icon-xxl {
    display: block;
    margin: 0.15rem auto 0.25rem;
}

.map-area-selector-panel .map-area-selector-uploader .form-drop__container h4 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem;
}

.map-area-selector-panel .map-area-selector-uploader .form-drop__container p.form-text {
    margin-bottom: 0.75rem !important;
    line-height: 1.45;
}

.map-area-selector-panel .map-area-selector-uploader #uploadWithDragAndDrop .rz-fileupload-buttonbar .rz-fileupload-choose {
    padding: 0.6rem 0.75rem !important;
}

.autopay-accent-bar {
    width: 4px;
}

.warning-preline {
    white-space: pre-line;
}

.modal-body.emailsample-scroll-container {
    overflow-y: auto;
    max-height: 70vh;
}

/* Account summary / Highcharts: styledMode ignores series.color; force estimated-leak fill to theme danger red */
::deep(.chart-container-hc-usage.highcharts-container) .highcharts-series.data-estimated-leak .highcharts-point {
    fill: var(--v1-danger, #CE1212);
}

::deep(.chart-container-hc-usage.highcharts-container) .highcharts-series.data-estimated-leak .highcharts-graph {
    stroke: var(--v1-danger, #CE1212);
}

/* Billing tab Customer Usage / Water Budget lines: styledMode ignores series.color for the actual
   stroke (only the tooltip dot reads it), so without this the lines render using the theme's generic
   --highcharts-color-0/1 swatches instead of matching the .ami-usage-legend/.ami-water-budget-legend
   swatches shown above the chart. Same colors as those legend swatches. */
.chart-container-hc-usage.highcharts-container .highcharts-series.ami-usage-line .highcharts-graph {
    stroke: #666666;
}

/* Greyed-out placeholder bar for a period with no reading ("no data") or a real
   reported value of zero ("no usage") - point-level className, since styledMode ignores per-point
   color for the actual fill (only the tooltip dot reads it, via getPointColor's point.color check).
   The ancestor chain lifts specificity above the per-service fill rules in main-utility.css
   (.data-service-*:not(..):not(..) .highcharts-point, including their !important hover state). */
.highcharts-container .highcharts-root .highcharts-series-group .highcharts-series .highcharts-point.data-no-data,
.highcharts-container .highcharts-root .highcharts-series-group .highcharts-series .highcharts-point.data-no-usage {
    /* Same diagonal hatch as the Chart.js placeholders (pattern def: highcharts-gradients.js). */
    fill: url(#pattern-chart-placeholder) #C0C3CE !important;
}

/* A "no data" bar has nothing to drill into — the click handler ignores it, so don't advertise it. */
.highcharts-container .highcharts-root .highcharts-series-group .highcharts-series .highcharts-point.data-no-data,
.highcharts-container .highcharts-root .highcharts-series-group .highcharts-series .highcharts-point.data-no-usage {
    cursor: default;
}

/* On a line series the placeholder is a hollow grey marker rather than a hatched fill. */
.highcharts-container .highcharts-root .highcharts-series-group .highcharts-line-series .highcharts-point.data-no-data,
.highcharts-container .highcharts-root .highcharts-series-group .highcharts-line-series .highcharts-point.data-no-usage {
    fill: #ffffff !important;
    stroke: #9AA0AE;
    stroke-width: 2px;
}

.chart-container-hc-usage.highcharts-container .highcharts-series.ami-water-budget-line .highcharts-graph {
    stroke: #4da3ff;
}

/* A Multiple="true" RadzenDropDown renders its selected-value display inside .rz-dropdown-chips
   (even with Chips="false" + a ValueTemplate — that only changes what's inside this wrapper, not
   which wrapper is used). radzen-standard-base.css's caret-padding reskin only covers
   .rz-dropdown-label/.rz-multiselect-label-container, so .rz-dropdown-chips keeps Radzen's own
   default padding, which doesn't reserve the 1.5rem the theme's caret background-image (drawn on
   .rz-dropdown itself) needs — the selected-value text runs under the arrow. */
.rz-dropdown:not(.rz-calendar-month-dropdown):not(.rz-calendar-year-dropdown) .rz-dropdown-chips {
    display: flex !important;
    align-items: center !important;
    padding: var(--v1-input-padding-y, 0.4375rem) 1.5rem var(--v1-input-padding-y, 0.4375rem) var(--v1-input-padding-x, 0.5rem) !important;
    font-size: var(--v1-body-font-size, 0.875rem);
    line-height: var(--v1-body-line-height, 1.71428571);
    color: var(--v1-body-color);
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

/* Billing/AMI tab date-range picker overlay — was duplicated as an identical inline style attribute
   on both tabs' <div class="account-summary-daterange"> in UsageHistoryTile.razor. */
.usage-history-daterange-overlay {
    position: absolute;
    top: 0.75rem;
    right: 1.25rem;
    z-index: 5;
}

/* .chart-container-hc-usage's zoomed formula (main-utility.css) is max(250px, 100dvh - 380px) — the
   380px is a guess at how much "chrome" (header/tabs/subheader/padding) sits above the chart when
   zoomed. This tile's subheader (Service + Meter + Usage type + Interval on the AMI tab, up to 4
   controls that wrap more readily than Billing's shorter subheader) is taller than whatever the
   380px figure was tuned against, so on a modest-height window the formula clamps to the 250px
   floor — a ZOOMED chart ending up SMALLER than its own unzoomed clamp(350px, 60vh, 700px) size.
   Scoped to this card only so Customer Portal's own usage chart (which already looks correct at
   380px) is untouched. */
#card-usagehistory.card-zoomed .chart-container-hc-usage {
    height: max(300px, 100dvh - 300px);
}

/* AMI tab's chart column (.col-10) has a sibling column (.col-2, the total/leak/irrigation tiles),
   so Bootstrap's .row stretches the .col-10 BOX itself (flex align-items: stretch) to match the
   row's height — but .interactive-analytics-chart inside it stayed height:auto, sizing to its own
   content instead of filling that now-taller stretched box, leaving a gap below the chart. Billing's
   equivalent wrapper sits under .col-12 with no sibling column competing for row height, so it never
   gets stretched taller than its own content in the first place — hence no gap there. Scoped to
   .col-10 specifically (AMI's actual structure) rather than the shared .interactive-analytics-chart
   class, so Billing's .col-12 layout is untouched. */
#card-usagehistory .col-10 > .interactive-analytics-chart {
    height: 100%;
}

/* Start: FieldRenderer Inline Styles */

.field-renderer-table-responsive {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}

.field-renderer-table-header {
    position: sticky;
    top: 0;
    z-index: 10;
}

.field-renderer-table-column {
    white-space: nowrap;
    min-width: 120px;
}

.field-renderer-actions-column {
    white-space: nowrap;
    width: 80px;
}

.field-renderer-cell-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

.field-renderer-cell-center {
    text-align: center;
    white-space: nowrap;
}

/* End: FieldRenderer Inline Styles */

.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Online form select dropdown chevron
   formBuilder and OnlineFormRenderer use form-control on selects, which removes
   the native arrow without adding Bootstrap's form-select chevron. */
.form-wrap.form-builder .frmb .prev-holder select:not([multiple]),
.form-wrap.form-builder .frmb .form-elements select:not([multiple]),
#previewModal select.form-control:not([multiple]),
.form-group select.form-control:not([multiple]),
.form-group select.form-select:not([multiple]) {
    padding-right: 1.5rem !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232E3035' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 16px 12px;
}

[data-bs-theme=dark] .form-wrap.form-builder .frmb .prev-holder select:not([multiple]),
[data-bs-theme=dark] .form-wrap.form-builder .frmb .form-elements select:not([multiple]),
[data-bs-theme=dark] #previewModal select.form-control:not([multiple]),
[data-bs-theme=dark] .form-group select.form-control:not([multiple]),
[data-bs-theme=dark] .form-group select.form-select:not([multiple]) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23C0C3CE' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* My Home multi-select button groups: keep left divider visible on checked options */
.btn-group .btn-check:checked[type=checkbox] + .btn-outline-secondary:not(:first-of-type),
.btn-group-vertical .btn-check:checked[type=checkbox] + .btn-outline-secondary:not(:first-of-type) {
    border-left-color: var(--v1-primary);
}

.overflow-scroll {
    overflow: scroll;
}

/* Maintenance banner shown to whitelisted users while their client is under maintenance.
   Diagonal-stripe pattern mirrors the environment header treatment in the design system. */
/* Height reserved for the banner. The sticky page header (below) is offset by this
   amount when the banner is present so the two stack instead of overlapping on scroll. */
body:has(.maintenance-banner) {
    --maintenance-banner-height: 1.5rem;
}

.maintenance-banner {
    position: sticky;
    top: 0;
    z-index: 1031;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    overflow: hidden;
    height: var(--maintenance-banner-height, 2rem);
    padding: 0 1rem;
    font-weight: 500;
    color: #141415;
    background-color: #ffc107;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 24px,
        rgba(255, 255, 255, 0.2) 24px,
        rgba(255, 255, 255, 0.2) 48px
    );
}

/* Drop the sticky page header below the banner so both remain visible while scrolling. */
body:has(.maintenance-banner) .page-header-container {
    top: var(--maintenance-banner-height);
}

/* Lock background scroll while a custom modal is open. These modals render as plain
   conditional markup rather than through Bootstrap's JS show()/hide() lifecycle, so
   Bootstrap never gets the chance to add its own body.modal-open scroll lock. */
body:has(.body-disable-scroll) {
    overflow: hidden;
}

/* ServiceAddressSelector: RadzenDropDown's ValueTemplate renders a flex row (icon + text)
   instead of plain text, so the built-in .rz-dropdown-label ellipsis handling doesn't apply
   and long text bleeds under the absolutely-positioned dropdown arrow. Let the row shrink
   so the .text-ellipsis span can truncate instead. */
.service-address-value {
    min-width: 0;
    max-width: 100%;
}

/* VXCON-12992: negative usage-chart bars keep their palette color but reverse the gradient fade so the light end sits at the 0-line (mirrors positive bars). Placed in common.css (first-party) — NOT the UI-project-synced theme files. */
#gradient-highcharts-color-0-neg stop {
  stop-color: var(--highcharts-color-0);
}

.highcharts-point.highcharts-negative.highcharts-color-0 {
  fill: url(#gradient-highcharts-color-0-neg) var(--highcharts-color-0);
}

#gradient-highcharts-color-1-neg stop {
  stop-color: var(--highcharts-color-1);
}

.highcharts-point.highcharts-negative.highcharts-color-1 {
  fill: url(#gradient-highcharts-color-1-neg) var(--highcharts-color-1);
}

#gradient-highcharts-color-2-neg stop {
  stop-color: var(--highcharts-color-2);
}

.highcharts-point.highcharts-negative.highcharts-color-2 {
  fill: url(#gradient-highcharts-color-2-neg) var(--highcharts-color-2);
}

#gradient-highcharts-color-3-neg stop {
  stop-color: var(--highcharts-color-3);
}

.highcharts-point.highcharts-negative.highcharts-color-3 {
  fill: url(#gradient-highcharts-color-3-neg) var(--highcharts-color-3);
}

#gradient-highcharts-color-4-neg stop {
  stop-color: var(--highcharts-color-4);
}

.highcharts-point.highcharts-negative.highcharts-color-4 {
  fill: url(#gradient-highcharts-color-4-neg) var(--highcharts-color-4);
}

#gradient-highcharts-color-5-neg stop {
  stop-color: var(--highcharts-color-5);
}

.highcharts-point.highcharts-negative.highcharts-color-5 {
  fill: url(#gradient-highcharts-color-5-neg) var(--highcharts-color-5);
}

#gradient-highcharts-color-6-neg stop {
  stop-color: var(--highcharts-color-6);
}

.highcharts-point.highcharts-negative.highcharts-color-6 {
  fill: url(#gradient-highcharts-color-6-neg) var(--highcharts-color-6);
}

#gradient-highcharts-color-7-neg stop {
  stop-color: var(--highcharts-color-7);
}

.highcharts-point.highcharts-negative.highcharts-color-7 {
  fill: url(#gradient-highcharts-color-7-neg) var(--highcharts-color-7);
}

#gradient-highcharts-color-8-neg stop {
  stop-color: var(--highcharts-color-8);
}

.highcharts-point.highcharts-negative.highcharts-color-8 {
  fill: url(#gradient-highcharts-color-8-neg) var(--highcharts-color-8);
}

#gradient-highcharts-color-9-neg stop {
  stop-color: var(--highcharts-color-9);
}

.highcharts-point.highcharts-negative.highcharts-color-9 {
  fill: url(#gradient-highcharts-color-9-neg) var(--highcharts-color-9);
}

/* Online form field Help Text indicator — hover the icon to reveal the text (native title). */
.online-form-help-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border-radius: 50%;
  background: #000;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  line-height: 16px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
.form-label-req:has(> .online-form-help-icon) {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.form-label-req > .online-form-help-icon {
    order: 1;
}

/* LiveStats drill-down grid: loading spinner over the ROWS only — header, filter
   row and pager stay visible/interactive while a page is fetched. */
.tile-grid-body-loading .rz-data-grid-data {
    background: var(--v1-card-bg) url('/images/bootstrap-spinner.svg') no-repeat center;
}
.tile-grid-body-loading .rz-data-grid-data table tbody {
    visibility: hidden !important;
}

/* LiveStats drill-down grid: compact date filter (SingleDatePicker inside the
   Radzen filter cell) so the picker doesn't overflow the header. min-width matters
   here, not just max-width: under table-layout:auto (see .tile-grid-scroll below),
   RadzenDataGridColumn's Width param is only an advisory <col> hint and gets ignored
   on first paint - the column's real initial width comes from its cells' intrinsic
   content width, so this div must itself demand the space up front. */
.tile-grid-date-filter {
    min-width: 170px;
    max-width: 170px;
}
.tile-grid-date-filter .e-input-group {
    width: 100% !important;
}

/* LiveStats drill-down grid: Radzen forces table-layout:fixed + width:100%, which
   squeezes every column to fit the tile regardless of column count/content - once a
   tile has several columns (e.g. Payments' 9-10), cell text gets clipped. Let the
   table size to its natural content width instead and scroll horizontally. */
.tile-grid-scroll {
    overflow-x: auto;
}
.tile-grid-scroll .rz-grid-table {
    table-layout: auto;
    width: auto;
    min-width: 100%;
}
.tile-grid-scroll .rz-grid-table th,
.tile-grid-scroll .rz-grid-table td {
    white-space: nowrap;
}

/* In the zoomed usage card the chart sits below non-flex tab wrappers
   (tab-content > tab-pane > tab-subcontent > usage-interval-pane > card-body),
   so the card's leftover height never reaches it. Turn that chain into
   flex columns and let the chart fill the real remaining space instead of
   main-customer.css's viewport-offset estimate (these 3-class selectors
   out-rank its 2-class .card-zoomed rule regardless of load order). */
.card-usage.card-zoomed .tab-content,
.card-usage.card-zoomed .tab-pane.active,
.card-usage.card-zoomed .usage-interval-pane {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.card-usage.card-zoomed .chart-container-hc-usage {
    height: auto;
    min-height: 250px;
}

/* Swaps the "...and X more" / "Show less" label on the "Multiple Service
   Addresses" expander. Driven by the .expanded class that the collapse listener at the end of InterOp.js sets from
   Bootstrap's shown.bs.collapse/hidden.bs.collapse events -- not by [aria-expanded], which
   Bootstrap only keeps in sync via a trigger list it builds once per collapse target. The account
   @foreach now carries @key="account" -- the row object itself, not its account number, since a
   duplicate account number in the profile data would otherwise collide and crash Blazor's
   diffing -- so it no longer rebuilds this row's DOM on an unrelated re-render, but the same
   trigger-list sync can still be lost when Blazor patches other parts of the row in place (an
   amount field, "select all", search) -- the class from the JS listener does not depend on that
   sync and is reapplied every time the event fires. */
.more-addresses-toggle .more-addresses-label-less {
    display: none;
}

.more-addresses-toggle.expanded .more-addresses-label-more {
    display: none;
}

.more-addresses-toggle.expanded .more-addresses-label-less {
    display: inline;
}

.list-group-item-panel {
    margin: 0.75rem -1rem -0.75rem;
    border-top: 1px solid var(--v1-border-color);
}

/* RateHistoryModal Details column: Radzen 5.7.6's RadzenDataGridColumn has no Wrap
   parameter (only later Radzen versions do), so the grid's default .rz-cell-data
   (overflow: hidden; text-overflow: ellipsis; white-space: nowrap) has to be
   overridden directly for this column to keep multi-line change history readable. */
.rate-history-details-cell .rz-cell-data {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}
/* Services Overview "Group by" toggle (VXCON-15892).
   Bootstrap's .btn-group already gives the segmented shape (rounded outer ends, flat
   middle join); only the checked state's fill and the check/radio-dot icons are overridden
   here. This app's default .btn-check:checked treatment is a subtle pale-blue highlight,
   whereas this control is specified as a solid fill with a checkmark. */
.group-by-toggle .btn-check + label.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.group-by-toggle .btn-check + label.btn::before {
    content: "";
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    border: 1px solid var(--v1-border-color);
    font-size: 0.6rem;
    line-height: 1;
}

.group-by-toggle .btn-check:checked + label.btn {
    background-color: var(--v1-primary) !important;
    border-color: var(--v1-primary) !important;
    color: #fff !important;
}

.group-by-toggle .btn-check:checked + label.btn::before {
    content: "\2713";
    background-color: #fff;
    border-color: #fff;
    color: var(--v1-primary);
}
/* Same flex-chain problem for UsageHistoryTile's card: it doesn't carry the card-usage class, and
   its chart sits one level deeper (tab-pane > card-body > row > col > interactive-analytics-chart >
   chart-container > chart-container-hc-usage). .row keeps its default flex-direction (Bootstrap
   grid, AMI's col-9 chart + col-3 tiles must stay side by side) — only its own height needs to
   stretch; the column that actually holds the chart (col-12 for Billing, col-9 for AMI) gets its
   own flex-column so its single child (interactive-analytics-chart) can fill it in turn. */
#card-usagehistory.card-zoomed .tab-content,
#card-usagehistory.card-zoomed .tab-pane.active {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
#card-usagehistory.card-zoomed .row.mt-3 {
    flex: 1 1 auto;
    min-height: 0;
}
#card-usagehistory.card-zoomed .col-12,
#card-usagehistory.card-zoomed .col-9 {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#card-usagehistory.card-zoomed .interactive-analytics-chart,
#card-usagehistory.card-zoomed .chart-container {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
#card-usagehistory.card-zoomed .chart-container-hc-usage {
    height: auto;
    min-height: 250px;
    flex: 1 1 auto;
}

/* The remove control on a "Configured for" chip sits inside badge-sized text, so it takes its
   proportions from the chip rather than the page's default icon size. */
.configured-for-chips .badge .v1-icon {
    width: 0.625rem;
    height: 0.625rem;
    top: 0;
}

/* Grouped variable picker (template builder). Bootstrap supplies everything else this control
   needs -- list-group, hover, truncation, overflow -- but it has no max-height utility, and a
   single category can hold several hundred variables. Without a cap, expanding one pushes the
   rest of the template form off the screen. */
.variable-picker-groups {
    max-height: 22rem;
}

/* Take Over Property modal. The rate control is a Bootstrap dropdown used as a select, which
   Bootstrap styles for menus of links rather than for a control with radios inside it; these
   rules give it the shape the design asks for. They live here rather than in a component
   stylesheet because App.razor does not link VXconnect.Web.UI.styles.css, so scoped CSS never
   reaches the browser. The wrapper class keeps them off every other dropdown on the page. */
.take-over-modal .dropdown-select-control {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.take-over-modal .dropdown-select-menu {
    min-width: 100%;
    max-height: 16rem;
    overflow-y: auto;
}

.take-over-modal .dropdown-select-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    padding: 0.375rem 1rem;
    cursor: pointer;
}

.take-over-modal .dropdown-select-option:hover {
    background-color: var(--bs-dropdown-link-hover-bg, #f8f9fa);
}

.take-over-modal .dropdown-select-clear {
    border: 0;
    background: transparent;
    padding: 0;
    line-height: 1;
}

/* The utility can refuse several services at once; their reasons are joined with newlines. */
.take-over-modal #takeOverDeclineAlert {
    white-space: pre-line;
}

/* Business unit override editing banner. Built from theme tokens so it follows the client
   palette and has a dark variant, rather than carrying its own hex values. */
.bu-override-banner {
    background: var(--v1-primary-bg-subtle);
    color: var(--v1-primary-text);
    border-left: 4px solid var(--v1-primary-border-subtle);
}

[data-bs-theme=dark] .bu-override-banner {
    background: hsl(var(--v1-theme-primary-color-h), var(--v1-theme-primary-color-s), var(--v1-theme-primary-color-l), .25);
    color: var(--v1-primary-text);
    border-left-color: var(--v1-theme-primary-light);
}

/* Holds a loader invisible for --vx-loader-delay, then reveals it. Used by the resume loader a
   layout shows while a moved circuit refetches its content: most resumes land in well under a
   second, and a loader that flashes for 400ms reads as a page reload -- which is the one thing
   this whole feature exists to avoid. A loader unmounted before the delay elapses is never
   painted at all. Duration is 0s: the delay does the work, the animation only flips the values.
   pointer-events is discrete-animatable, so it flips with opacity; without it the invisible
   modal swallows clicks on a page that already looks ready. */
.vx-delayed-loader {
    opacity: 0;
    pointer-events: none;
    animation: vx-delayed-loader-appear 0s linear var(--vx-loader-delay, 1s) forwards;
}

@keyframes vx-delayed-loader-appear {
    to {
        opacity: 1;
        pointer-events: auto;
    }
}

.grid-nowrap-header .rz-column-title-content {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rz-data-grid td.rz-frozen-cell:has(.dropdown-menu.show) {
    z-index: 3 !important;
}

/* ---- Inline editing bar ---- */
.inline-edit-controls,
.inline-edit-banner {
    font-size: 0.765625rem;
    line-height: 1;
}

.inline-edit-banner {
    padding-block: 0.375rem;
}

.inline-edit-glyph {
    width: 1em;
    height: 1em;
}

.inline-edit-lock {
    width: 0.9em;
    height: 0.9em;
}

.inline-edit-mode {
    padding: 0.25rem 0.25rem 0.25rem 0.625rem;
}

.inline-edit-mode-dark {
    background: rgba(0, 0, 0, 0.25);
}

.inline-edit-mode-light {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
}

.btn.inline-edit-tool {
    font-size: inherit;
    line-height: 1;
    padding: 0.3125rem 0.625rem;
}

.btn.inline-edit-tool-dark {
    background: rgba(0, 0, 0, 0.3);
}

/* ---- Site Configuration row opened from an inline settings link ---- */
.list-group-item.site-config-linked,
.section-category.site-config-linked {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
    transition: outline-color 0.4s ease;
}

.content-change-history-table {
    max-height: 12rem;
    overflow-y: auto;
}