html, body {
    height: 100%;
    margin: 0 !important;
    padding: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-image: var(--pulse-theme-bg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

/*#region Fluent UI ver5 Fixes */

svg {
    height: stretch !important;
}


fluent-button {
    min-width: 0px !important;
    max-width: 100% !important;
}

.pulse-no-padding {
    padding: 0px !important;
}

/*#endregion Fluent UI ver5 Fixes */

    /* Printing: strip the app chrome and neutralize the fixed-height/overflow shell so tall
   content (e.g. stickers) flows and paginates instead of being clipped to one viewport. */
    @media print {
        .no-print {
            display: none !important;
        }

        .MasterLayoutHeader,
        .MasterLayoutFooter,
        .PulseZoneMenubar {
            display: none !important;
        }

        html, body,
        .MasterLayoutParent,
        .MasterLayoutContent,
        .PulseZoneParent,
        .PulseZoneContent {
            height: auto !important;
            max-height: none !important;
            min-height: 0 !important;
            overflow: visible !important;
            margin: 0 !important;
            padding: 0 !important;
            background: #fff !important;
            background-image: none !important;
            box-shadow: none !important;
            border: none !important;
            border-radius: 0 !important;
        }
    }


    .pulse-offCanvas-BG {
        background-color: rgba(0,0,0,0) !important;
        background-image: var(--pulse-theme-bg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .divShadow {
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8) !important;
    }

    .myContentDiv {
        border: 1px solid black;
        border-radius: 10px;
        background-color: rgba(255,255,255,0.5);
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8);
    }

    /*#region Control Colour Corrections*/

    .rz-multiselect-panel {
        color: var(--rz-text-color) !important;
    }

    .rz-dropdown-panel {
        color: var(--rz-text-color) !important;
    }

    /*#endregion Control Colour Corrections*/

    /*#region Z-Index Settings*/

    .fluent-dialog-overlay {
        z-index: 9999 !important;
        pointer-events: auto !important;
    }

    fluent-dialog {
        z-index: 10000 !important;
        pointer-events: auto !important;
    }

    .fluent-dialog {
        z-index: 10000 !important;
        pointer-events: auto !important;
    }

    .rz-dialog-wrapper {
        z-index: 2000 !important;
    }

    .rz-dialog {
        z-index: 2005 !important;
        pointer-events: auto !important;
    }
    /* Radzen popups (dropdown, autocomplete, datepicker, overlay) are appended to <body>
   with a default z-index of 2000. Because the dialog above is forced to 10000, any
   popup opened inside a dialog would render behind it and have its clicks intercepted
   by the dialog content. Raise all Radzen popups above the dialog so they work. */
    .rz-dropdown-panel,
    .rz-autocomplete-panel,
    .rz-datepicker-panel,
    .rz-datetime-panel,
    .rz-datatable-filter,
    .rz-overlaypanel,
    .rz-popup,
    .rz-tooltip {
        z-index: 10001 !important;
    }
    /* Fluent UI default overlay z-index */
    /*::backdrop {
    z-index: 9998 !important;
    pointer-events: auto !important;
}*/
    /*#endregion Z-Index Settings*/

    /*#region Layout for AI Pages*/

    .aiParent {
        display: flex;
        flex-direction: column; /* Stack children vertically */
        height: 100vh;
        background-color: var(--pulse-light-colour);
    }

    .pulseAiPgMenuDiv {
        background-color: var(--pulse-dark-colour);
        border: 1px solid var(--pulse-dark-colour);
        padding: 10px 10px;
        height: 5vh;
    }

    .aiHeader, .aiFooter {
        width: 100%;
        height: 5vh;
        background-color: var(--pulse-dark-colour) !important;
        text-align: center;
        /* background: lightgray; */
    }

    .aiMenu {
        min-height: 50px; /* Or min-height if you want flexibility */
        border-bottom: 1px solid black;
    }

    .aiContent {
        flex: 1;
        padding: 10px;
        overflow: hidden;
        display: flex;
        background-color: white;
        gap: 10px;
    }

    .aiSidebar {
        flex-shrink: 0;
        width: 450px;
        overflow: auto;
        padding: 10px;
        /*border: 1px solid var(--pulse-dark-colour);*/
        border-radius: 8px;
    }

    .aiBox {
        border: 1px solid black;
        border-radius: 10px;
        background-color: var(--pulse-light-2-colour);
        overflow-x: hidden;
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8);
    }

    .aiAssistBox {
        border-bottom: 1px solid white;
        margin-bottom: 5px;
        margin-top: -5px;
        /*border: 1px solid black;*/
        background-color: var(--pulse-light-2-colour);
        overflow-x: hidden;
    }
    /*#endregion Layout for AI Pages*/

    /*#region Pulse Menu Buttons*/
    
    :root {
        --appbar-active-indicator-width: 0px !important;
        --appbar-item-size: 68px !important;
        --appbar-item-height-adjustment: 20px !important;
    }

    .fluent-appbar .fluent-appbar-item,
    .fluent-appbar .fluent-appbar-more-item {
        --appbar-active-indicator-width: 0px !important;
    }

    .fluent-appbar[orientation=horizontal] .fluent-appbar-item a.active::before,
    .fluent-appbar[orientation=horizontal] .fluent-appbar-more-item a.active::before {
        content: none !important;
        display: none !important;
        height: 0 !important;
    }

    .nbMainSel {
        background-color: var(--pulse-light-colour) !important;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        cursor: pointer;
    }

        .nbMainSel svg[part="icon-active"] {
            fill: var(--pulse-dark-colour) !important;
        }

        .nbMainSel svg[part="icon-rest"] {
            fill: var(--pulse-dark-colour) !important;
        }

        .nbMainSel div[part="label"] {
            color: var(--pulse-dark-colour) !important;
        }

    .nbMainUnSel {
        background-color: var(--pulse-dark-colour) !important;
        cursor: pointer;
    }

        .nbMainUnSel svg[part="icon-rest"] {
            /* fill: white !important; */
            fill: var(--pulse-light-colour) !important;
        }

        .nbMainUnSel svg[part="icon-active"] {
            /* fill: white !important; */
            fill: var(--pulse-light-colour) !important;
        }

        .nbMainUnSel div[part="label"] {
            /* color: white !important; */
            color: var(--pulse-light-colour) !important;
        }


    .nbZoneUnSel {
        background-color: var(--pulse-light-colour) !important;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        cursor: pointer;
    }

        .nbZoneUnSel svg[part="icon-rest"] {
            fill: var(--pulse-dark-colour) !important;
        }

        .nbZoneUnSel svg[part="icon-active"] {
            fill: var(--pulse-dark-colour) !important;
        }

        .nbZoneUnSel div[part="label"] {
            color: var(--pulse-dark-colour) !important;
        }

    .nbZoneSel {
        background-color: var(--pulse-dark-colour) !important;
        border-radius: 10px;
        cursor: pointer;
    }

        .nbZoneSel svg[part="icon-active"] {
            /* fill: white !important; */
            fill: var(--pulse-light-colour) !important;
        }

        .nbZoneSel svg[part="icon-rest"] {
            /* fill: white !important; */
            fill: var(--pulse-light-colour) !important;
        }

        .nbZoneSel div[part="label"] {
            /* color: white !important; */
            color: var(--pulse-light-colour) !important;
        }
    /*#endregion Pulse Menu Buttons*/

    /*#region Layout for Pulse Zones */
    .PulseZoneParent {
        display: flex;
        flex-direction: column; /* Stack children vertically */
        height: calc(100vh - 112px); /* Or whatever height your parent should be, like 100% */
    }

    .PulseZoneMenubar {
        width: 100%;
        height: 56px;
    }

    .PulseZoneContent {
        /* flex: 1; */
        /* width: 100%; */
        height: calc(100vh - 188px);
        margin: 10px;
        padding: 10px;
        background-color: var(--pulse-dark-t25-colour);
        border-radius: 10px;
        overflow: hidden;
    }
    /*#endregion Layout for Pulse Zones */

    /*#region Pulse Grids */

    .pulse-column-grid {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        /*grid-auto-rows: 100%; */
        gap: 12px;
        margin: 16px 0;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .pulse-grid-item {
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 12px 0 12px 0;
        background: white;
        transition: box-shadow 0.2s ease;
    }

        .pulse-grid-item:last-child {
            margin-bottom: 0;
        }

    .animated-border {
        padding: 20px 40px;
        font-size: 1.5rem;
        color: white;
        border: 5px solid transparent;
        border-radius: 12px;
        background: #111;
        border-image: linear-gradient(45deg, #ff0057, #ff7b00, #00ffcc, #007bff) 1;
        animation: border-rotate 4s linear infinite;
    }

    @keyframes border-rotate {
        0% {
            border-image-source: linear-gradient(0deg, #ff0057, #ff7b00, #00ffcc, #007bff);
        }

        100% {
            border-image-source: linear-gradient(360deg, #ff0057, #ff7b00, #00ffcc, #007bff);
        }
    }

    @media (max-width: 768px) {
        .permission-grid {
            grid-auto-flow: row;
            grid-auto-columns: 1fr;
            max-height: none;
            overflow-x: hidden;
            overflow-y: auto;
        }
    }
    /*#endregion Pulse Grids */

    /*#region Pulse Buttons*/

    .btnShadow {
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0);
    }

        .btnShadow:hover {
            cursor: pointer;
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8);
        }

    .myAccentBtn {
        --pulse-accent-btn-bg: var(--pulse-accent-btn-theme-colour);
        --pulse-accent-btn-colour: var(--pulse-accent-btn-theme-bg);
        border: 1px solid var(--pulse-accent-btn-colour);
        background-color: var(--pulse-accent-btn-bg);
        color: var(--pulse-accent-btn-colour);
        cursor: pointer;
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0);
    }

        .myAccentBtn:hover {
            --pulse-accent-btn-bg: var(--pulse-accent-btn-theme-bg);
            --pulse-accent-btn-colour: var(--pulse-accent-btn-theme-colour);
            border: 1px solid var(--pulse-accent-btn-colour);
            background-color: var(--pulse-accent-btn-bg);
            color: var(--pulse-accent-btn-colour);
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8);
        }

    .myOkBtn {
        --pulse-ok-btn-bg: rgb(255,255,255);
        --pulse-ok-btn-colour: var(--success);
        border: 1px solid var(--pulse-ok-btn-colour);
        background-color: var(--pulse-ok-btn-bg);
        color: var(--pulse-ok-btn-colour);
        cursor: pointer;
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0);
    }

        .myOkBtn:hover {
            --pulse-ok-btn-bg: var(--success);
            --pulse-ok-btn-colour: rgb(255,255,255);
            border: 1px solid var(--pulse-ok-btn-colour);
            background-color: var(--pulse-ok-btn-bg);
            color: var(--pulse-ok-btn-colour);
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8);
        }

    .myCancelBtn {
        --pulse-cancel-btn-bg: rgb(255,255,255);
        --pulse-cancel-btn-colour: var(--error);
        border: 2px solid var(--pulse-cancel-btn-colour);
        background-color: var(--pulse-cancel-btn-bg);
        color: var(--pulse-cancel-btn-colour);
        cursor: pointer;
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0);
    }

        .myCancelBtn:hover {
            --pulse-cancel-btn-bg: var(--error);
            --pulse-cancel-btn-colour: rgb(255,255,255);
            border: 1px solid var(--pulse-cancel-btn-colour);
            background-color: var(--pulse-cancel-btn-bg);
            color: var(--pulse-cancel-btn-colour);
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8);
        }

    .myModeBtnOn {
        --pulse-mode-btn-bg: var(--pulse-mode-btn-on-bg);
        --pulse-mode-btn-item-colour: var(--pulse-mode-btn-on-item-colour);
        border: 1px solid var(--pulse-mode-btn-item-colour);
    }

        .myModeBtnOn:hover {
            cursor: pointer;
        }

    .myModeBtnOff {
        --pulse-mode-btn-bg: var(--pulse-mode-btn-off-bg);
        --pulse-mode-btn-item-colour: var(--pulse-mode-btn-off-item-colour);
        border: 1px solid var(--pulse-mode-btn-item-colour);
    }

        .myModeBtnOff:hover {
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 1);
            cursor: pointer;
        }
    /*#endregion Pulse Buttons*/

    .stagger-item {
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.5s ease;
    }

        .stagger-item.visible {
            opacity: 1;
            transform: translateY(0);
        }
    /*#region Factory Zone Formatting*/
    /* Pulsing red border for zones behind schedule */
    .zone-behind {
        animation: pulse-behind 2s infinite ease-in-out;
        /*2s infinite;*/
        stroke: #ef4444 !important;
        /*stroke-opacity: 0.95;*/
    }

    @keyframes pulse-behind {

        0%, 100% {
            stroke-width: 4;
            stroke-opacity: 0.95;
        }

        50% {
            stroke-width: 8;
            stroke-opacity: 0.05;
        }
    }

    .zone-behind-warning {
        animation: warning-pulse 2s infinite ease-in-out;
    }

    @keyframes warning-pulse {
        0%, 100% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }
    }
    /*#endregion Factory Zone Formatting*/

    /*#region Radzen Table Formatting*/

    .rz-grid-table {
        cursor: pointer;
    }

    .rz-group-header-drop {
        flex: auto;
        text-align: center;
        border: 1px dashed var(--rz-text-tertiary-color);
        height: 100% !important;
        align-content: center;
    }

    .rz-group-header-items {
        flex: auto;
        text-align: center;
        border: 1px dashed var(--rz-text-tertiary-color);
        height: 100% !important;
        justify-content: center;
        padding: 5px;
    }

    .rz-group-header-item {
        border-color: var(--pulse-dark-colour) !important;
    }

        .rz-group-header-item:hover {
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8);
            cursor: pointer;
        }

    .rz-selectable tbody tr.rz-data-row:hover:not(.rz-state-highlight) .rz-cell-data {
        font-weight: bolder;
        font-style: italic;
        /*--rz-grid-hover-background-color: var(--pulse-light-colour) !important;
            color: var(--pulse-dark-colour) !important;*/
    }

    .rz-selectable tbody tr.rz-data-row.rz-state-highlight {
        font-weight: bolder;
        font-style: italic;
        /*background-color: var(--pulse-dark-colour) !important;
            color: var(--pulse-light-colour) !important;*/
    }
    /*.rz-selectable tbody tr.rz-data-row.rz-state-highlight {
        color: white;*/
    /*text-shadow: 0 1px 0 #000;*/
    /*--border-angle: 0turn;*/ /* // For animation. */
    /*--main-bg: conic-gradient( from var(--border-angle), #213, #112 5%, #112 60%, #213 95% );
        --rz-grid-selected-background-color: var(--main-bg);*/
    /* border-color: transparent;
    border-style: solid;
    border: 5px 1px 5px 1px;*/
    /*border: 1px solid transparent;
        border-radius: 8px;
        --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #08f, #f03 99%, transparent);
        background: var(--main-bg) padding-box,*/
    /* // border-box extends this background to the border space */
    /*var(--gradient-border) border-box,*/
    /* // Duplicate main background to fill in behind the gradient border. You can remove this if you want the border to extend "outside" the box background. */
    /*var(--main-bg) border-box;
        background-position: center center;
        animation: bg-spin 3s linear infinite;
    }*/

    .rz-column-drag:active {
        color: var(--pulse-dark-colour) !important;
    }

    .rz-grid-table thead th > div:not(.rz-cell-filter) {
        /*background-color: var(--pulse-dark-colour) !important;
            color: var(--pulse-light-colour) !important;*/
    }

    .rz-grid-table thead th .rz-column-title {
        /*color: var(--pulse-light-colour) !important;*/
    }

    .rz-grid-table thead th .rz-textbox {
        border: 1px solid var(--pulse-dark-colour) !important;
    }

    .rz-grid-table thead th .rz-numeric-input {
        border: 1px solid var(--pulse-dark-colour) !important;
    }

    thead tr {
        /*background-color: var(--pulse-dark-colour) !important;*/
    }
    /*.rz-group-header {
            justify-content: flex-end !important;
        }*/

    .rz-cell-filter {
        background-color: var(--pulse-light-colour) !important;
    }
    /*#endregion Radzen Table Formatting*/

    /*#region Radzen Dialog Formatting*/

    .rz-dialog {
        border-radius: 10px !important;
        box-shadow: 8px 8px 20px 12px rgba(0, 0, 0, 0.8) !important;
        /*background-color: var(--pulse-light-colour) !important;*/
    }

    .rz-dialog-titlebar {
        background-color: var(--pulse-dark-colour) !important;
        padding-block: 0px 0px !important;
        padding-inline: 0px 0px !important;
        padding: 15px !important;
    }

    .rz-dialog-title {
        color: var(--pulse-light-colour) !important;
    }

    .rz-dialog-mask {
        opacity: 0.8 !important;
    }

    .rz-dialog-content {
        padding: 0.5em !important;
        flex: 1 1 !important;
    }

    .pulseDialogParent {
        display: flex;
        flex-direction: column; /* Stack children vertically */
        height: 100%; /* Or whatever height your parent should be, like 100% */
        overflow: hidden;
    }

    .pulseDialogHeader, .pulseDialogFooter {
        /* Fixed sizes; flexbox will respect these */
        height: 60px; /* Or min-height if you want flexibility */
        background: var(--pulse-dark-colour);
    }

    .pulseDialogContent {
        flex: 1; /* This magic makes it grow to fill the space */
        overflow: auto;
        margin: 0.5em !important;
    }
    /*#endregion Radzen Dialog Formatting*/

    /*#region Radzen Form Field Last Child Fix Formatting*/
    .rz-form-field-label:last-child {
        /* inset-inline-end: 1.5rem; */
        inset-inline-start: var(--rz-form-field-label-inset-inline-start);
        inset-inline-end: auto;
        inset-block-start: var(--rz-form-field-label-floating-top);
        padding-block-start: 0;
        padding-block-end: 0;
        transform: translate(0, 0);
        color: var(--rz-input-placeholder-color);
        /* background-color: var(--rz-form-field-label-floating-background-color); */
        font-size: var(--rz-form-field-label-floating-font-size, 0.75rem);
        line-height: 1rem;
        max-width: calc(100% - 1.5rem);
    }
    /*#endregion Radzen Form Field Last Child Fix Formatting*/

    /*#region Radzen TabView Formatting*/

.rz-tabview-selected {
    border-top-width: 2px !important;
    border-top-style: solid !important;
    border-top-color: var(--rz-text-color) !important;
    border-left-width: 1px !important;
    border-left-style: solid !important;
    border-left-color: var(--rz-text-color) !important;
    border-right-width: 1px !important;
    border-right-style: solid !important;
    border-right-color: var(--rz-text-color) !important;
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
    border-bottom-color: var(--colorNeutralBackground1) !important;
    background-color: var(--colorNeutralBackground1) !important;
}

    .rz-tabview-panels {
        border-color: var(--rz-text-color) !important;
        border: 1px solid var(--rz-text-color) !important;
        background-color: var(--colorNeutralBackground1) !important;
    }
    .rz-tabview-panel {
        height:100%;
    }

    /*#endregion Radzen TabView Formatting*/

    /*#region Pulse Card Formatting*/
    .pulseCard {
        border-radius: 10px;
        background-color: var(--pulse-light-colour);
        border: 1px solid var(--pulse-dark-colour);
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8);
        margin: 10px;
    }

        .pulseCard:hover {
            box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
            cursor: pointer;
        }

    .pulseCardHeader {
        background-color: var(--pulse-dark-colour);
        color: var(--pulse-light-colour);
        width: 100%;
        padding: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .pulseCardContent {
        padding: 10px;
    }

    .pulseCardFooter {
        background-color: var(--pulse-dark-t50-colour);
        color: var(--pulse-light-colour);
        padding: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    /*#endregion Pulse Card Formatting*/

    .div-center-screen {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        min-height: 100vh;
    }

    .div-center-element {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        min-width: 100%;
        min-height: 100%;
    }

    .ai-toprow {
        background-color: var(--pulse-dark-colour);
        height: 56px;
    }

        .ai-toprow .fluent-appbar {
            height: 100% !important;
            align-items: flex-end !important;
        }

            .ai-toprow .fluent-appbar .fluent-appbar-item,
            .ai-toprow .fluent-appbar .fluent-appbar-more-item {
                height: 90% !important;
                align-self: flex-end;
            }

    .paginator {
        background-color: var(--pulse-dark-t75-colour) !important;
        color: var(--pulse-light-colour);
    }

    .zone-toprow {
        background-color: var(--pulse-light-colour);
        border-bottom: 1px solid var(--pulse-dark-colour);
        height: 56px;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

        .zone-toprow .fluent-appbar {
            height: 100% !important;
            align-items: center !important;
        }

            .zone-toprow .fluent-appbar .fluent-appbar-item,
            .zone-toprow .fluent-appbar .fluent-appbar-more-item {
                height: 90% !important;
                align-self: center;
            }

        .zone-toprow .fluent-appbar-item a,
        .zone-toprow .fluent-appbar-item a.active {
            text-decoration: none !important;
        }

    .ai-Mnu {
        background-color: #f7f7f7;
        background-image: linear-gradient(90deg, rgb(54,91,102) 20%, #bcd1d4 70%);
        border-bottom: 1px solid rgb(54,91,102);
        /*min-height: 3.5rem;*/
    }

    .myCardHdr {
        background-color: var(--pulse-dark-colour);
        color: var(--pulse-light-colour);
    }

    a, .btn-link {
        color: #006bb7;
    }

    .btn-primary {
        color: #fff;
        background-color: #1b6ec2;
        border-color: #1861ac;
    }

    .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
    }

    .content {
        padding-top: 1.1rem;
    }

    .fdgbrd {
        border-radius: 30px;
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
    }

    .fdgrselected {
        background-color: var(--pulse-dark-t50-colour) !important; /* blue !important;*/
        color: white !important; /* var(--pulse-dark-colour) !important;*/
        cursor: pointer;
    }

    .card-body {
        padding: 1px !important;
    }

    .fdgrunselected {
        background-color: white;
        color: var(--pulse-dark-colour) !important;
        cursor: pointer;
    }

        .fdgrunselected :hover {
            cursor: pointer;
        }

    .table-virtualize-demo {
        /*height: auto;*/
        margin: 15px;
    }

        .table-virtualize-demo .table-cell {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .table-virtualize-demo .table-fixed-body {
            overflow-x: hidden !important;
        }

    h1:focus {
        outline: none;
    }

    tr[row-type='sticky-header'] > th {
        position: sticky;
        top: 0;
        /*background-color: var(--accent-fill-rest) !important;*/
        background-color: var(--pulse-dark-colour) !important;
        /*color: var(--foreground-on-accent-rest) !important;*/
        color: white !important;
        align-content: center;
        border-color: white !important;
        z-index: 2;
    }

    .col-sort-button {
        width: calc(100% - 20px);
        overflow: hidden;
        text-overflow: ellipsis;
        /*background: linear-gradient(90deg, rgb(54,91,102) 20%, #bcd1d4 70%) !important;*/
        /*background-color: #365b66 !important;*/
        color: var(--pulse-dark-colour) !important;
        opacity: 0.85;
    }

    .valid.modified:not([type=checkbox]) {
        outline: 1px solid #26b050;
    }

    .invalid {
        outline: 1px solid #e50260;
    }

    .validation-message {
        color: #e50260;
    }

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

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

    .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
        color: var(--bs-secondary-color);
        text-align: end;
    }

    .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
        text-align: start;
    }

    .pulseSelectedCard {
        color: white;
        /*text-shadow: 0 1px 0 #000;*/
        --border-angle: 0turn; /* // For animation. */
        --main-bg: conic-gradient( from var(--border-angle), #213, #112 5%, #112 60%, #213 95% );
        border: solid 5px transparent;
        border-radius: 8px;
        --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #08f, #f03 99%, transparent);
        background:
        /* // padding-box clip this background in to the overall element except the border. */
        var(--main-bg) padding-box,
        /* // border-box extends this background to the border space */
        var(--gradient-border) border-box,
        /* // Duplicate main background to fill in behind the gradient border. You can remove this if you want the border to extend "outside" the box background. */
        var(--main-bg) border-box;
        background-position: center center;
        animation: bg-spin 3s linear infinite;
    }

    @keyframes bg-spin {
        to {
            --border-angle: 1turn;
        }
    }

    &:hover {
        animation-play-state: paused;
    }

    @property --border-angle {
        syntax: "<angle>";
        inherits: true;
        initial-value: 0turn;
    }