/*
This CSS file matches the color scheme from MudBlazor to Bootstrap when utilized for authentication.
The file remains available at all times for demonstration purposes,
but it is exclusively employed in the 'App.razor' component when authentication is enabled.
*/
:root, .mud-theme-light {
    background-color: transparent !important;
    --pbs-body-background: #efefef;
    --pbs-appbar: rgba(9,35,64,1);
    --pbs-appbar-over: #ffffff;
    --pbs-menubar-top: rgba(40,128,186,1);
    --pbs-menubar: rgba(40,128,186,1);
    --pbs-menubar-over: #ffffff;
    --pbs-menubar-active: rgba(9,35,64,.5);
    --pbs-primary-color: rgba(9,35,64,1);
    --pbs-primary-color-over: #ffffff;
    --pbs-primary-brand: rgba(9,35,64,1);
    --pbs-primary-strong: rgba(9,35,64,1);
    --pbs-secondary-color: rgba(40,128,186,1);
    --pbs-secondary-color-over: rgba(255,255,255,1);
    --pbs-secondary-brand: rgba(40,128,186,1);
    --pbs-secondary-soft: rgba(40,128,186,.95);
    --pbs-secondary-soft-over: rgba(255,255,255,1); /* rgba(9,35,64,1);*/

    --pbs-accent-color: rgba(201,48,39,1);
    --pbs-accent-color-over: rgba(255,255,255,1);

    --pbs-drawer: rgba(200,200,200,1);
    --mud-default-borderradius: 10px;
    --mud-palette-action-default-hover: rgba(9,35,64,.2);
}
.mud-theme-dark {
    background-color: transparent !important;
    --pbs-menubar-active: rgba(40,128,186,.5);
    --pbs-primary-color: rgba(40,128,186,1);
    --pbs-primary-color-over: #ffffff;
    --pbs-primary-brand: rgba(9,35,64,1);
    --pbs-primary-strong: rgba(255,255,255,1);

    --pbs-secondary-color: rgba(100,200,255,1);
    --pbs-secondary-color-over: rgba(0,0,0,1);
    --pbs-secondary-brand: rgba(40,128,186,1);
    --pbs-secondary-soft: rgba(40,128,186,.95);
    --pbs-secondary-soft-over: rgba(255,255,255,1);

    --pbs-accent-color:rgba(201,48,39,1);
    --pbs-accent-color-over:rgba(255,255,255,1);

    --pbs-drawer: rgba(20,25,32,1);
    --mud-default-borderradius: 10px;
    --mud-palette-action-default-hover: rgba(40,128,186,.2);
    --pbs-body-background: #000000;
}

.body {
background-color: var(--pbs-body-background);
}
.pbs-body {
    background-image: none !important;
   
}
.pbs-primary, .mud-paper {
    color: var(--pbs-primary-color);
    
}
.pbs-svg-secondary {
    fill: var(--pbs-secondary-color) !important;
    stroke: var(--pbs-secondary-color) !important;
    line-height: 0;
}
.pbs-svg-warn {
    fill: #ff8000 !important;
   
}
.pbs-svg-alert {
    fill: #ef0000 !important;
   
}
.pbs-svg-primary {
    fill: var(--pbs-primary-color) !important;
    stroke: var(--pbs-primary-color) !important;
    line-height: 0;
}
.pbs-secondary-brand{
    color:var(--pbs-secondary-brand);
}
.pbs-appbar {
    background-color: var(--pbs-appbar);
    color: var(--pbs-appbar-over);
    fill: var(--pbs-appbar-over);
}
    .appbar-button {
        padding:8px 20px 8px 20px!important;
    }
.pbs-menubar-top {
    background-color: var(--pbs-menubar-top);
    color: var(--pbs-menubar-over);
    fill: var(--pbs-menubar-over);
}

.pbs-primary-background {
    background-color: var(--pbs-primary-color);
    color: var(--pbs-primary-color-over);
    fill: var(--pbs-primary-color-over);
}
.pbs-secondary {
    color: var(--pbs-secondary-color)!important;
}
.pbs-percent-bar{
border:solid 2px var(--pbs-primary-color);
border-radius:2px;
height:24px;
position:relative;
}
.pbs-percent-bar-inner{
margin:1px;
background-color:var(--pbs-secondary-color);
color: var(--pbs-secondary-color-over);
}

.pbs-secondary-background {
    background-color: var(--pbs-secondary-color);
    color: var(--pbs-secondary-color-over);
    fill: var(--pbs-secondary-color-over);
}
.mud-navmenu {
    background-color: var(--pbs-drawer)!important;
    color: var(--pbs-menubar-over);
    fill: var(--pbs-menubar-over);
    height: 100%;
    
}
.mud-nav-link {
    color: var(--pbs-primary-color);
}

.mud-nav-link.active {
    color: var(--pbs-primary-color-over) !important;
    background-color: var(--pbs-menubar-active) !important;
}
.mud-drawer{
    color: var(--pbs-primary-color);
   /* background-color: var(--pbs-primary-color) !important;*/
   background-color: var(--pbs-drawer);
}
.mud-nav-link-icon {
    color: var(--pbs-primary-color) !important;
   
}

.mud-nav-link.active .mud-nav-link-icon {
    color: var(--pbs-primary-color-over) !important;
}
.mud-nav-link:hover:not(.mud-nav-link-disabled){
    background-color:var(--pbs-accent-color);
    color:var(--pbs-accent-color-over);
}
    .mud-nav-link:hover:not(.mud-nav-link-disabled) .mud-nav-link-icon {
       
        color: var(--pbs-accent-color-over)!important;
    }

.pbs-outlined {
    border: solid 2px !important;
    border-color: var(--pbs-secondary-brand) !important;
    overflow: hidden;
    background-color: transparent;
    box-shadow: none;
}

.mud-expand-panel {
    background-color: transparent;
    /*color:var(--pbs-secondary-soft-over);*/

}
.pbs-outlined.mud-expand-panel:last-child, .pbs-outlined.mud-panel-next-expanded, .pbs-outlined.mud-panel-expanded {
    border: solid 2px !important;
    border-color: var(--pbs-secondary-brand) !important;
}
.pbs-no-border {
    border-color: transparent !important;
    border-width: 0px !important;
    box-shadow: none;
}

.pbs-split-border, .pbs-split-border.mud-panel-expanded  {
    box-shadow: none;
    border-top: solid 1px var(--pbs-secondary-brand) !important;
    padding: 0px;
}


.pbs-soft-panel {
    background-color: var(--pbs-secondary-soft) !important;
    border-radius: 10px;
    box-shadow: none !important;
    color: var(--pbs-secondary-soft-over) !important;
    
}

.pbs-clear-panel {
    background-color: transparent !important;
    border-radius:10px;
    box-shadow: none !important;
    color: var(--pbs-primary-color) !important;
}
.pbs-empty {
    background-color: transparent !important;
    
    box-shadow: none !important;
   
}
.mud-donut-text {
    color: var(--pbs-secondary-color-over);
    fill: var(--pbs-secondary-color-over);
}

.pbs-select-soft {
    padding: 2px 5px 2px 5px !important;
    margin: 0px !important;
    background-color: var(--pbs-secondary-soft) !important;
    color: var(--pbs-secondary-soft-over) !important;
    border-bottom: 0px solid !important;
    border-radius:5px
}
    .pbs-select-soft::after {
        border-color: transparent !important;
   
    }
    .pbs-select-soft::before {
        border-color: transparent !important;
       
    }
.mud-list-item {
padding:0px 10px 0px 10px;
    color: var(--pbs-secondary-soft-over) !important;
    background-color: var(--pbs-secondary-soft) !important;
}
.mud-selected-item {
    color: var(--pbs-secondary-soft) !important;
    background-color: var(--pbs-secondary-soft-over) !important;
}
.mud-table, .mud-table-container {
    overflow: visible !important;
    display: inline-table;
}
.mud-table-sticky-header .mud-table-head .mud-table-cell, .mud-table-root .mud-table-body .mud-table-cell {
    background-color: transparent !important;
    color: var(--pbs-primary-strong);
    font-size: .75rem!important;
    padding: 2px 10px 2px 10px!important;
}
.mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell:first-child, .mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell:last-child {
border-radius:0px;
}
.mud-table-head .mud-table-row .mud-table-cell {
    background-color: var(--pbs-secondary-color) !important;
    color: var(--pbs-secondary-soft-over);

}
.mud-table {
    background-color:transparent!important;
    border-radius:0px!important;  
}

.mud-switch-span-small ~ .mud-typography {
font-size:.75rem;
}

.pbs-group-header {
    background-color: var(--pbs-secondary-color) !important;
    color: var(--pbs-secondary-color-over) !important;
}
.pbs-soft-panel .mud-table-cell {
    color: var(--pbs-primary-color) !important;
}
.pbs-main-container {
    padding: 0px !important;
    overflow: hidden;
}


.btn-primary {
    text-transform: uppercase;
    --bs-btn-bg: var(--mud-palette-primary) !important;
    --bs-btn-hover-bg: var(--mud-palette-primary-darken) !important;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--mud-palette-primary) !important;
}

.nav {
    --bs-nav-link-color: var(--mud-palette-primary) !important;
    --bs-nav-link-hover-color: var(--mud-palette-primary-darken) !important;
}

/* Target MudBlazor button classes for higher specificity */
.mud-button.custom-new-button {
    background-color: black !important; /* Default black background */
    border: 1px solid red !important; /* Red outline */
    color: white !important; /* White text for readability */
}

    .mud-button.custom-new-button:hover {
        background-color: gray !important; /* Hover gray background */
        border: 1px solid red !important; /* Retain red outline */
        color: black !important; /* Black text for contrast */
    }

    /* Optional: Disabled state override */
    .mud-button.custom-new-button.mud-disabled {
        background-color: darkgray !important;
        color: lightgray !important;
    }

/* Remove ALL underline, inner border, and reserved underline space for the Active Dealer MudSelect
   (Text variant). The outer MudPaper border is the only border shown. These rules + the
   --mud-input-underline-thickness:0 on the component keep the total height identical to the
   sibling "Show" bordered paper (no double-height, no inner lines). */
.no-underline-select .mud-input,
.no-underline-select .mud-input-text,
.no-underline-select .mud-input-control,
.no-underline-select .mud-input.mud-input-underline,
.no-underline-select .mud-input-underline,
.no-underline-select .mud-input-underline::before,
.no-underline-select .mud-input-underline::after,
.no-underline-select .mud-input-outlined-border {
    border-bottom: none !important;
    border-bottom-width: 0 !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

    /* Collapse any bottom padding/margin the input reserves for its underline */
    .no-underline-select .mud-input.mud-input-text,
    .no-underline-select .mud-input-slot {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

        /* Belt-and-suspenders for the actual input element inside the select */
        .no-underline-select .mud-input-slot input {
            border-bottom: none !important;
        }

    /* Extend the no-underline handling (originally for height parity + underline removal
   in the VehicleManagement bordered dealer/select pattern) with vertical centering
   rules so the label text (MudText) and the *selected value text* (or placeholder)
   inside the MudSelect land on the exact same horizontal line and are both centered
   inside the pa-1 paper content area. */

    .no-underline-select .mud-input.mud-input-text,
    .no-underline-select .mud-input-slot {
        padding-top: 0 !important; /* Theme default is 2px; zero it so value text isn't pushed down */
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

        /* Target the actual displayed value element (MudBlazor commonly uses .mud-select-input
   on the input or container that shows the ToStringFunc result / placeholder when using
   Variant.Text + Dense). Force tight metrics + centering so its text baseline matches
   the adjacent MudText label. */
        .no-underline-select .mud-input-slot input,
        .no-underline-select .mud-select-input {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            line-height: 1.25; /* Matches typical subtitle2 + Dense metrics; tweak if needed */
            vertical-align: middle;
        }

/* Companion for the labels in bordered selects so their text uses the same line-height
   and has no extra margins from typography. Applied via Class on the MudText elements
   (see .razor changes). The outer MudStack AlignItems.Center + paper pa-1 then ensures
   the common line is centered inside the border. */
.select-label {
    line-height: 1.25;
    padding-top: 0;
    margin: 0;
}

/* Readability fixes for dark/light modes on the specific controls in ScanInvoices (folder textfield + two selects).
   Labels and selected values were light-gray on gray bg in dark (hard to read); use theme primary text color
   which is near-white in dark, near-black/darker in light (as done for other labels like the watching status).
   Targets labels (via .select-label and .mud-input-label) + value text in inputs/selects. */
.select-label,
.mud-input-label,
.mud-input-slot input,
.mud-select-input,
.no-underline-select .mud-input-slot input,
.no-underline-select .mud-select-input {
    color: var(--pbs-primary-color);
}

/* ScanInvoices "selected folder" textbox: its value/placeholder text is mint green (#69f0ae), which is
   unreadable on the near-white default background in light mode. Give the field a medium-dark gray fill
   (both themes) so the green stays readable in light and the field still looks like a normal input in dark. */
.watch-folder-field .mud-input,
.watch-folder-field .mud-input-slot {
    background-color: #5f5f5f !important;
    border-radius: 4px;
}

/* Yellow focus highlight (black text) for editable fields in the vehicle edit form and the option
   editors (both the inline edit-form table and the options popup) — parity with the inline grid edit,
   where clicking into a cell turns it yellow. Applied via Class="edit-highlight" on the field. The
   !important keeps it readable in both light and dark mode. */
.edit-highlight input:focus,
.edit-highlight textarea:focus,
.edit-highlight .mud-input:focus-within {
    background-color: #fff9c4 !important;
}

    .edit-highlight input:focus,
    .edit-highlight textarea:focus,
    .edit-highlight .mud-input:focus-within input,
    .edit-highlight .mud-input:focus-within textarea {
        color: #000 !important;
    }

/* Green status dot shown to the left of the VIN for vehicles with no PBSId (added via invoice scan or
   manually, not downloaded from PBS). Signals the vehicle will be pushed/added to v10. */
.pbs-new-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #2e7d32; /* app success green */
    margin-right: 8px;
    vertical-align: middle;
}

/* Disabled fields (e.g. the auto-filled Dealer Name) keep their "disabled" affordance — greyed label and
   underline, no cursor — but MudBlazor's default disabled text is far too faint to read. Force the value to
   the theme's secondary text color so it stays clearly legible in both light and dark mode while still
   reading as muted/disabled. Applied via Class="readable-disabled". */
.readable-disabled input,
.readable-disabled .mud-input-slot,
.readable-disabled textarea {
    color: var(--mud-palette-text-secondary) !important;
    -webkit-text-fill-color: var(--mud-palette-text-secondary) !important;
    opacity: 1 !important;
}

/* #12: Vehicle edit-form fields. The floating label sat right on top of its value box, so when a field
   is focused (and turns yellow) the highlight overlapped the label above it. Add vertical clearance:
   space above each field plus a small gap between the label row and the value box. */
.vehicle-edit-field {
    padding-top: 8px;
}

    .vehicle-edit-field .mud-input-control {
        margin-top: 4px;
    }

/* Inline option / fee editors (Name / Description / Cost / Price in the edit-form options & fees tables and
   the Options dialog) must occupy the EXACT same box as the static cell text they replace, so clicking Edit
   never shifts or shrinks a value. The authoritative rules live here (global) so both the vehicle edit form
   and the Options dialog share them — page-level <style> blocks no longer touch .option-editor.
     - Every wrapper (control / input / slot) is stripped of its margin, padding, min-height and width
       constraints so the input element fills the cell content box (left edge = static text left edge; the
       cell's own left/right padding is what positions the text, identically to the static cell).
     - input / textarea carry no padding/margin and use the cell's font metrics, so the glyphs render in the
       same place and at the same size (no shift, no font growth).
     - Amount editors stay right-aligned and FULL WIDTH, so a long value like $8,675.00 is never clipped. */
.option-editor,
.option-editor .mud-input-control,
.option-editor .mud-input,
.option-editor .mud-input-text,
.option-editor .mud-input-slot {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    width: 100% !important;
}

    .option-editor input,
    .option-editor textarea {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 0.875rem !important;
        vertical-align: middle !important;
    }

    .option-editor input {
        text-align: left;
        line-height: 1.3 !important; /* single-line fields (Name / amounts) stay compact + aligned */
    }
    /* The multi-line Description editor must use the SAME line spacing as the static cell so the row height does
   not change between view and edit (1.5 matches MudBlazor's body line-height; tweak if your theme differs). */
    .option-editor textarea {
        line-height: 1.5 !important;
    }

.option-amount-editor input {
    text-align: right !important;
}

/* Option Description cell: the row must look IDENTICAL in view and edit (same height AND same line wrapping).
   Both states render the description in the SAME element — a <textarea> (read-only when viewing) that fills a
   box sized by a hidden "sizer" carrying the same text + metrics. Using the same element in both states is
   what guarantees identical wrapping: a <div> and a <textarea> wrap the same text at slightly different
   widths, which previously made a word jump lines on edit. Keep the sizer and textarea on identical metrics
   (white-space / font-size 0.875rem / line-height 1.5) so the sized box matches the textarea's content. */
.option-desc-edit-wrap {
    position: relative;
}

.option-desc-sizer {
    white-space: pre-wrap;
    font-size: 0.875rem;
    line-height: 1.5;
    visibility: hidden;
    pointer-events: none;
}

.option-desc-raw {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    resize: none;
    overflow: auto;
    background: transparent;
    color: inherit; /* the row/cell color flips to black on hover/edit, so this stays readable */
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-wrap;
    -webkit-appearance: none;
    appearance: none;
}

    .option-desc-raw[readonly] {
        cursor: default;
    }

    .option-desc-raw:not([readonly]):focus {
        background-color: #fff9c4; /* same edit-highlight yellow as the other inline editors */
        color: #000;
    }

/* Option / fee editor tables must use a FIXED column layout so a row entering edit mode (where the
   Name/Description cell becomes a 100%-width input) can never recompute column widths — otherwise editing
   the widest Name (e.g. "FACTORY") collapses the Name column and shifts Description left. MudTable's Style
   attribute lands on the OUTER wrapper, so `table-layout: fixed` has to be applied to the inner
   .mud-table-root here (the header cells' explicit widths then fix every column; Description takes the rest). */
.option-table-fixed .mud-table-root {
    table-layout: fixed;
    width: 100%;
}

/* The app bar grows via an inline height set in MainLayout (per active watch line, up to 5).
   Only the INNER toolbar should fill that height — never set a height on .watcher-appbar itself, or
   (being position:fixed) 100% would expand it to the full viewport and cover the page. Keep the
   title/status/theme vertically centered; 64px min preserves the normal single-row look when idle. */
.watcher-appbar .mud-toolbar {
    height: 100%;
    min-height: 64px;
    align-items: center;
}

/* Highlighter-yellow hover highlight (black text) for data grids — clearly visible in both light and dark
   mode, replacing MudBlazor's subtle gray hover. Applied via Class="grid-hover-yellow" on the MudTable. */
.grid-hover-yellow tbody tr:hover td {
    background-color: #ece95c !important; /* toned-down "highlighter" yellow */
    color: #000 !important;
}
    /* Force black text on EVERY field of the hovered row — the cell inputs / typography are otherwise white in
   dark mode (only plain-text cells like the VIN picked up the td color). */
    .grid-hover-yellow tbody tr:hover td .mud-input input,
    .grid-hover-yellow tbody tr:hover td .mud-input textarea,
    .grid-hover-yellow tbody tr:hover td .mud-input-slot input,
    .grid-hover-yellow tbody tr:hover td .mud-input-slot textarea,
    .grid-hover-yellow tbody tr:hover td .mud-select-input,
    .grid-hover-yellow tbody tr:hover td .mud-typography {
        color: #000 !important;
    }
    /* Make the Edit (pencil) icon and the inline-edit Cancel (X) icon black on the hovered row so they're
   readable on the yellow (white/blue otherwise in dark mode). Only these are targeted (via
   Class="grid-edit-icon" / "grid-cancel-icon"); status/delete icons keep their meaningful colors. */
    .grid-hover-yellow tbody tr:hover td .grid-edit-icon,
    .grid-hover-yellow tbody tr:hover td .grid-edit-icon .mud-icon-root,
    .grid-hover-yellow tbody tr:hover td .grid-cancel-icon,
    .grid-hover-yellow tbody tr:hover td .grid-cancel-icon .mud-icon-root {
        color: #000 !important;
    }

/* #4: Shorter Dealer-installations rows (the vehicle grid is handled in VehicleManagement's scoped style). */
.dealer-grid-compact tbody td {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* PDF.js text layer for the custom PdfViewer (Components/Shared/PdfViewer.razor + js/pdf-viewer.js).
   Transparent DOM spans positioned over the rendered canvas make the PDF text selectable/copyable
   (e.g. VIN, amounts) — the canvas alone is just pixels. Minimal subset of pdf_viewer.css (v3.11),
   self-hosted to keep the strict-CSP setup (no CDNs). PDF.js positions each span with
   calc(var(--scale-factor) * ...px); the variable is set on .textLayer by renderPdfPage. */
.pdf-page .textLayer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    line-height: 1;
    text-align: initial;
    text-size-adjust: none;
    forced-color-adjust: none;
    transform-origin: 0 0;
    z-index: 2;
    caret-color: CanvasText;
}

    .pdf-page .textLayer span,
    .pdf-page .textLayer br {
        color: transparent;
        position: absolute;
        white-space: pre;
        cursor: text;
        transform-origin: 0% 0%;
    }

    /* Visible selection highlight over the invisible spans. */
    .pdf-page .textLayer ::selection {
        background: rgba(33, 150, 243, 0.35);
    }


    /*ICONS*/
.pbs-ico-soft-over {
    color: var(--pbs-primary-color-over) !important;
    fill: var(--pbs-primary-color-over) !important;
}
    .pbs-ico-soft-over::before {
        color: var(--pbs-primary-color-over) !important;
        
    }
.pbs-ico-warn {
    color: #d50000 !important;
} 
    .pbs-ico-warn::before {
        color: #d50000!important;
    } 
.pbs-ico-datacenter {
    width: 64px;
    height: 64px;
    display: inline-block;
    background-color: var(--pbs-secondary-brand);
    -webkit-mask: url('/images/icon_datacenter.svg') no-repeat center;
    -webkit-mask-size: contain;
    mask: url('/images/icon_datacenter.svg') no-repeat center;
    mask-size: contain;
}
.pbs-ico-alert-finance::before {
    font-family: 'Material Icons';
    color: #ff8000;

    content: 'paid';
}
.pbs-ico-info::before {
    font-family: 'Material Icons';
    color: var(--pbs-primary-color);
    opacity:0.5;
    content: 'info';
}
.pbs-ico-info::before:hover {
   
    opacity: 1;
   
}
.pbs-ico-servers::before {
    font-family: 'Material Icons';
    color: var(--pbs-primary-color);
    content: 'dns';
}
.pbs-ico-cluster::before {
    font-family: 'Material Icons Outlined';
    color: var(--pbs-primary-color);
    content: 'hive';
}
.pbs-ico-vm::before {
    font-family: 'Material Icons';
    color: var(--pbs-primary-color);
    content: 'account_tree';
}
.pbs-ico-dealer::before {
    font-family: 'Material Icons';
    color: var(--pbs-primary-color);
    content: 'directions_car_filled';
}
.pbs-ico-users::before {
    font-family: 'Material Icons';
    color: var(--pbs-primary-color);
    content: 'groups_2';
}
.pbs-ico-desktop::before {
    font-family: 'Material Icons';
    color: var(--pbs-primary-color);
    content: 'desktop_windows';
}
.pbs-ico-licensed-users::before {
    font-family: 'Material Icons';
    color: var(--pbs-primary-color);
    content: 'verified';
}
.pbs-ico-rdp-users::before {
    font-family: 'Material Icons';
    color: var(--pbs-primary-color);
    content: 'cast_connected';
}
.pbs-table-header{
white-space:nowrap;
}

.mud-expand-panel{
color:var(--pbs-primary-color);
}

.pbs-svg-ico-soft {
    font-family: 'Material Icons';
    fill: var(--pbs-secondary-soft-over);
    font-size: 20px;
}


.pbs-ico-smart-users::before {
    font-family: 'Material Icons';
    color: var(--pbs-primary-color);
    content: 'auto_awesome';
}
.pbs-ico-ram::before {
    font-family: 'Material Symbols Outlined';
    color: var(--pbs-primary-color);
    content: 'memory_alt';
    font-weight: 500;
    line-height: 0;
}
.pbs-ico-storage::before {
    font-family: 'Material Symbols Outlined';
    color: var(--pbs-primary-color);
    content: 'hard_drive';
    font-weight: 500;
    line-height: 0;
}