/*BEGIN Dashboard*/
.e-dashboardlayout {
    padding: 10px;
}

.e-panel-header {
    padding: 10px;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, .03);
}


.panel-content {
    vertical-align: middle;
    font-size: 15px;
    font-size: 15px;
    font-weight: 500;   
}

.e-panel-content {
    height: calc(100% - 28px);
    width: 100%;
    display: block;
}

.e-panel .e-header-text {
    padding: 12px 0 12px 0;
}

.e-dashboardlayout.e-control .e-panel .e-panel-header {
    font-size: 15px;
    font-weight: 500;
    height: 37px;
    line-height: 30px;
    padding: 10px;
    vertical-align: middle;
    border-bottom: 0.5px solid #e3e3e3;
}

.mobile .e-control.e-lib.e-dashboardlayout.e-responsive {
    z-index: 0;
    overflow: scroll;
}

.e-control.e-lib.e-dashboardlayout.e-responsive {
    z-index: 0;
}

.bootstrap5 .e-dashboardlayout.e-control .e-panel .e-panel-header,
.bootstrap5-dark .e-dashboardlayout.e-control .e-panel .e-panel-header {
    line-height: 20px;
}
/*END Dashboard*/


/*Progress Message*/
.progress-text::after {
    content: var(--progress-message, "Starting...");
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: black;
    font-weight: bold;
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    /*position: absolute;*/
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

/*Linear progress*/
.linear-progress {
    background: silver;
    width: 50vw;
    margin: 20% auto;
    height: 1rem;
    border-radius: 10rem;
    overflow: hidden;
    position: relative;
}

    .linear-progress:after {
        content: '';
        position: absolute;
        inset: 0;
        background: #1b6ec2;
        scale: var(--blazor-load-percentage, 0%) 100%;
        transform-origin: left top;
        transition: scale ease-out 0.5s;
    }

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}






.gridLink {
    text-decoration: underline !important;
    cursor: pointer !important;
}

    .gridLink:hover {
        cursor: pointer !important;
    }

table.k-grid-table td a.gridLink {
    color: #58a6ff !important;
    text-decoration: underline !important;
}

a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
    color: #58a6ff !important;
}
/* Enter custom CSS rules for your application here */
.panel .panel-container .panel-content {
    /* padding: 1rem 1rem; */
    padding: 0rem 0rem;
}

.voffset1 {
    margin-top: 5px;
}

.voffset2 {
    margin-top: 10px;
}

.voffset3 {
    margin-top: 20px;
}

.voffset4 {
    margin-top: 40px;
}

.hidden {
    display: none;
}

.mod-skin-dark:not(.mod-skin-light) .panel-hdr, .mod-skin-dark:not(.mod-skin-light) .accordion:not(.accordion-clean) .card .card-header {
    background-color: #1a1b1d;
}

.alertInElement {
    margin-bottom: 0rem !important;
}

.k-popup.k-reset {
    transition: none !important;
    /* to just make animations faster than normal use the following line INSTEAD */
    /* transition-duration: 100ms !important; */
}

.vh-50 {
    height: 50vh;
}

.vh-40 {
    height: 40vh;
}

.flexibleContent {
    flex: 1 1 auto
}

.flexibleHeader {
    flex: 0 1 auto;
}

.indentedTab {
    padding-left: 10px;
}



.blazored-toast-container {
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 999;
}

.position-topleft {
    top: 3rem;
    left: 2rem;
}

.position-topright {
    top: 3rem;
    right: 2rem;
}

.position-topcenter {
    top: 3rem;
    left: 50%;
    transform: translate(-50%, 0%);
}

.position-bottomleft {
    bottom: 2rem;
    left: 2rem;
}

.position-bottomright {
    bottom: 2rem;
    right: 2rem;
}

.position-bottomcenter {
    bottom: 2rem;
    left: 50%;
    transform: translate(-50%, 0%);
}

.blazored-toast {
    width: 30rem;
    border-radius: .25rem;
}

.blazored-toast {
    display: flex;
    position: relative;
    flex-direction: row;
    animation: fadein 1.5s;
    margin-bottom: 1rem;
    /*padding: 1rem 1.25rem;*/
    padding: 1rem .25rem 1rem 1.25rem;
    color: #1D1D1B;
    /*  width: 20rem;*/
    border-radius: .25rem;
    box-shadow: rgba(0,0,0,0.30) 0px 10px 30px 2px;
    background-color: #fff;
    border-top: 6px solid #fff;
}

.blazored-toast-component {
    display: initial;
    padding: 0 0 0 0;
    border-top: none;
}

.blazored-toast-info {
    border-top: 6px solid #2563eb;
}

    .blazored-toast-info .blazored-toast-icon {
        color: #2563eb;
    }

.blazored-toast-success {
    border-top: 6px solid #16a34a;
}

    .blazored-toast-success .blazored-toast-icon {
        color: #16a34a;
    }

.blazored-toast-warning {
    border-top: 6px solid #eab308;
}

    .blazored-toast-warning .blazored-toast-icon {
        color: #eab308;
    }

.blazored-toast-error {
    border-top: 6px solid #dc2626;
}

    .blazored-toast-error .blazored-toast-icon {
        color: #dc2626;
    }

.blazored-toast-icon {
    display: flex;
    flex-direction: column;
    justify-content: start;
    padding: 0 1rem 0 0;
    font-size: 1.5rem;
}

.blazored-toast .blazored-toast-message {
    flex-grow: 1;
    margin-bottom: 0;
    font-weight: 500;
    font-size: 0.875rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.blazored-toast .blazored-toast-close {
    display: flex;
    flex-direction: column;
    justify-content: start;
    /* padding: 0 0 0 1rem;*/
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    color: #94a3b8;
    font-size: 0.9rem;
}

    .blazored-toast .blazored-toast-close:hover {
        color: inherit;
    }

.blazored-toast .blazored-toast-progressbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 6px;
    border-bottom-left-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

    .blazored-toast .blazored-toast-progressbar > span {
        position: absolute;
        filter: brightness(75%);
        height: 6px;
        border-bottom-left-radius: .375rem;
        background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);
        transition: all .1s linear;
    }

.blazored-toast-action {
    cursor: pointer;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


.heightCap450 {
    max-height: 450px;
}

.fillRemainingHeight {
    height: calc(100vh - 210px);
}

/* Panel.FillViewportHeight: opt-in dynamic sizing for results/grid panels.
   On desktop (>= lg) the panel grows to fill the remaining viewport height within its
   flex-column page, and its content scrolls internally so the panel bottom and any grid
   horizontal scrollbar stay on screen regardless of viewport height or the criteria panel's
   size above it. Below lg it falls back to natural height + normal page scroll (mobile).

   Requires the page container to be a flex column capped to the available viewport height -
   use the .pageFillViewport helper below on that container. The page cap supplies the fixed
   chrome offset (header/footer/padding, the same value as .fillRemainingHeight); flex then
   subtracts the criteria panel's height dynamically. */
@media (min-width: 992px) {
    /* Page-level: cap the flex-column page to the available viewport height so its flex
       children (criteria = auto, results = fill) split within the viewport instead of
       growing the page past the bottom. The offset is the page-area chrome (header +
       content padding + footer); flex subtracts the criteria panel's height dynamically. */
    .pageFillViewport {
        height: calc(100vh - 160px);
        overflow: hidden;
    }

    /* The Bootstrap .row is a horizontal flex container; force it to a vertical column so its
       single .col-12 distributes height on the MAIN axis (reliable shrink/grow) instead of via
       cross-axis stretch, which lets the column overflow the row when space is tight. */
    .panelFillViewport {
        flex: 1 1 auto;
        min-height: 0;
        flex-direction: column;
    }

        .panelFillViewport > .col-12 {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

            .panelFillViewport > .col-12 > .panel {
                flex: 1 1 auto;
                display: flex;
                flex-direction: column;
                min-height: 0;
            }

    /* Only the expanded (shown) container fills; a collapsed one stays hidden as usual.
       The grid inside manages its own scroll (Height="100%"), so the container itself clips. */
    /* The container itself must be a flex COLUMN (not just a flex item) so its children flex
       instead of relying on percentage h-100 - a percentage height of a flex item does not
       resolve, which let the content (and the grid) balloon to full height. */
    .panelFillViewport .panel-container.show {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

        /* Main content area flexes to fill the container (toolbar/status take natural height). */
        .panelFillViewport .panel-container.show > .panel-content:first-child {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
        }

            /* The ChildContent/Content wrapper flexes to fill the content area, so a single
               fill child inside it (the grid host) gets a real, bounded height to measure. */
            .panelFillViewport .panel-container.show > .panel-content:first-child > div:last-child {
                display: flex;
                flex-direction: column;
                flex: 1 1 auto;
                min-height: 0;
            }
}

.footer {
    position: fixed;
    height: 100px;
    bottom: 0;
    width: 100%;
}

.checkboxLabel{
    vertical-align: middle;
}

.loading-splash{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    background-color: #fff;
}

/* Hide the sidebar nav while the WASM splash screen is visible.
   jQuery sets display:none on #preload when loading completes,
   which removes this rule and reveals the nav. */
/*#preload:not([style*="display: none"]) ~ * aside.app-sidebar {
    display: none !important;
}*/

.boldRow {
    font-weight: bold !important;
}

.e-row.boldRow > td.e-active {
    font-weight: bold !important;
}

.e-confirm-dialog.e-primary {
    float: right;
}

.grid-goal-property {
    font-weight: bold;
}

#Grid table.e-table > tbody > tr.grid-row-goal-alert td {
    background-color: rgb(from var(--bs-success) r g b / 0.3);
}

#Grid table.e-table > tbody > tr.grid-row-goal-alert:hover td {
    background-color: rgb(from var(--bs-success) r g b / 0.5);
}

#Grid table.e-table > tbody > tr.grid-row-threshold-alert {
    background-color: rgb(from var(--bs-danger) r g b / 0.3);
}

#Grid table.e-table > tbody > tr.grid-row-threshold-alert:hover td {
    background-color: rgb(from var(--bs-danger) r g b / 0.5);
}

.report-subheading {
    color: var(--bs-heading-color);
    opacity: .5;
}

.panel-content-toolbar {
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

/*Dashboard Widgets - BEGIN*/

e-tooltip-wrap .e-arrow-tip.e-tip-bottom {
    display: none;
}

/* To customize the arrow tip at top */
.e-tooltip-wrap .e-arrow-tip.e-tip-top {
    display: none;
}

/* To customize the arrow tip at left */
.e-tooltip-wrap .e-arrow-tip.e-tip-left {
    display: none;
}

/* To customize the arrow tip at right */
.e-tooltip-wrap .e-arrow-tip.e-tip-right {
    display: none;
}


.e-btn:hover {
    background-color: #0b6a0b;
}


.noBorderButton {
    border: none !important;
}

.menuPopupButton {
    width: 100%;
    border-radius: 0 !important;
    text-align: left;
}

.noBorderButton:hover {
    background: var(--primary-300) !important;
    color: white;
}

.menuCloseButton:hover {
    background: var(--primary-300) !important;
    color: white;
}

.menuPopupButton:hover {
    width: 100%;
    border-radius: 0 !important;
}

.menuPopupButtonDiv:hover {
    background: var(--primary-300);
    color: white;
}

.menuPopupButtonDiv:hover {
    background: var(--primary-300);
    color: white;
}

.menuPopupButtonDiv:hover {
    background: var(--primary-300);
    color: white;
}

.menuPopupButtonDiv .fa-duotone {
    --fa-primary-color: var(--bs-primary);
    --fa-secondary-color: var(--bs-primary-200);
}

    .menuPopupButtonDiv .fa-duotone :hover {
        --fa-primary-color: white;
        --fa-secondary-color: white;
    }

.menuPopupButtonDiv:hover .fa-duotone {
    --fa-primary-color: white;
    --fa-secondary-color: white;
}

.menuPopupButtonDiv .fa-regular {
    color: var(--bs-primary);
}

    .menuPopupButtonDiv .fa-regular :hover {
        color: white;
    }

.menuPopupButtonDiv:hover .fa-regular {
    color: white;
}

.widgetHeaderIcon-Green {
    color: green;
}

.widgetHeaderIcon-Blue {
    color: deepskyblue;
}

/*Dashboard Widgets - END*/

/*  Syncfusion DataGrid - remove selection around cell when selecting row  - BEGIN */
.e-grid td.e-rowcell.e-focus.e-focused {
    box-shadow: none;
}
.e-grid th.e-headercell.e-focus.e-focused {
    box-shadow: none;
}
/*  Syncfusion DataGrid - remove selection around cell when selecting row  - END */

.panelButtonIcon {
    width: 2rem;
    height: 2rem;
    stroke-width: 1px;
    fill: none;
    margin-left: 0;
    position: relative;
    --sa-icon-hover-fill-opacity: 0.2;
}

.btn.btn-panel {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

    .btn.btn-panel:focus,
    .btn.btn-panel:active,
    .btn.btn-panel:focus-visible,
    .btn.btn-panel:focus-within {
        outline: none !important;
        box-shadow: none !important;
        border: none !important;
        background-color: transparent !important;
        background-image: none !important;
        transition: none !important;
        animation: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        opacity: 1 !important;
    }

        .btn.btn-panel::before,
        .btn.btn-panel::after,
        .btn.btn-panel:active::before,
        .btn.btn-panel:active::after {
            content: none !important;
            display: none !important;
        }

    .btn.btn-panel:hover {
        background-color: rgba(255, 255, 255, 0.3) !important;
    }

[data-bs-theme="dark"] .btn.btn-panel:hover {
    background-color: transparent !important;
}

.btn.btn-panel:active svg {
    filter: none !important;
}

.panelButtonIcon {
    transition: all 0.2s ease !important;
}

.panelCollapseIcon,
.panelCollapseIcon use {
    stroke: var(--bs-success);
}

.btn-panel:hover .panelCollapseIcon,
.btn-panel:hover .panelCollapseIcon use {
    fill: var(--bs-success) !important;
    fill-opacity: 0.2 !important;
}

.panelExpandIcon,
.panelExpandIcon use {
    stroke: var(--bs-success);
}

.btn-panel:hover .panelExpandIcon,
.btn-panel:hover .panelExpandIcon use {
    fill: var(--bs-success) !important;
    fill-opacity: 0.2 !important;
}

.panelFullscreenIcon,
.panelFullscreenIcon use {
    stroke: var(--bs-warning);
}

.btn-panel:hover .panelFullscreenIcon,
.btn-panel:hover .panelFullscreenIcon use {
    fill: var(--bs-warning) !important;
    fill-opacity: 0.2 !important;
}

/* Pin/thumbtack panel button - light (outline) thumbtack stacked in a light circle, matching
   the collapse/fullscreen circle icons (primary outline at rest, semi-opaque fill on hover).
   On/off is conveyed by the thumbtack angle (angled when unpinned, straight when pinned) and
   a persistent filled circle when pinned. */
.panelPinIcon.fa-stack {
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    vertical-align: middle;
}

    .panelPinIcon .panelPinRing {
        color: var(--bs-primary);
    }

    .panelPinIcon .panelPinTack {
        color: var(--bs-primary);
    }

    .panelPinIcon .panelPinFill {
        color: var(--bs-primary);
        opacity: 0;
        transition: opacity 0.2s ease;
    }

/* Hover fills the circle, like the other panel icons */
.btn-panel:hover .panelPinIcon .panelPinFill {
    opacity: 0.15;
}

/* Pinned (on): persistent filled circle to read as active */
.panelPinIcon.panelPinned .panelPinFill {
    opacity: 0.2;
}

.e-control, .e-css, .e-error {
    font-family: "Inter", sans-serif;  /*system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";*/
}

.notification-report-parameter-name {
    font-weight: bold;
}