@import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';
@import '/_content/LBMH.Blazor.FluentUI.Components/css/bootstrap/bootstrap-grid.min.css';
@import '/_content/LBMH.Blazor.FluentUI.Components/css/bootstrap/bootstrap-utilities.min.css';

/*
 * LBMH Fluent UI Styles
 */

:root {
    /* Fluent UI Color Overrides */
    --success: #3db838 !important;
    --warning: #eaa300 !important;
    --error: #dc3545 !important;
    --info: #6c757d !important;
    --presence-available: #3db838 !important;
    --presence-away: #eaa300 !important;
    --presence-busy: #dc3545 !important;
    --presence-dnd: #dc3545 !important;
    --presence-offline: #6c757d !important;
    --presence-oof: #a065be !important;
    --presence-unknown: #dc3545 !important;
    --highlight-bg: #ffdf5f !important;
    /* ECI Colors */
    --eci-white: #fff;
    --eci-black: #434143;
    --eci-gray: #a1a1a1;
    --eci-lightgray: #ddd;
    --eci-darkgray: #686868;
    --eci-red: #f5333f;
    --eci-lightred: #fe5c66;
    --eci-brightred: #ffa0a6;
    --eci-darkred: #a71b28;
    --eci-yellow: #f49f00;
    --eci-lightyellow: #f9bb2c;
    --eci-brightyellow: #ffdf5f;
    --eci-darkyellow: #d57602;
    --eci-green: #48a100;
    --eci-lightgreen: #73cd2a;
    --eci-brightgreen: #aaf36f;
    --eci-darkgreen: #347500;
    --eci-teal: #18a899;
    --eci-lightteal: #3fc6a5;
    --eci-brightteal: #7bf6d8;
    --eci-darkteal: #007468;
    --eci-blue: #5388e1;
    --eci-lightblue: #5fa3f0;
    --eci-brightblue: #9eceff;
    --eci-darkblue: #3f63b2;
    --eci-purple: #a065be;
    --eci-lightpurple: #B587de;
    --eci-brightpurple: #d6b5f4;
    --eci-darkpurple: #6f4692;
    --eci-white-rgb: 255, 255, 255;
    --eci-black-rgb: 67, 65, 68;
    --eci-gray-rgb: 161, 161, 161;
    --eci-lightgray-rgb: 221, 221, 221;
    --eci-darkgray-rgb: 104, 104, 104;
    --eci-red-rgb: 245, 51, 63;
    --eci-lightred-rgb: 254, 92, 102;
    --eci-brightred-rgb: 255, 160, 166;
    --eci-darkred-rgb: 167, 27, 40;
    --eci-yellow-rgb: 244, 156, 0;
    --eci-lightyellow-rgb: 249, 187, 44;
    --eci-brightyellow-rgb: 255, 223, 95;
    --eci-darkyellow-rgb: 213, 118, 2;
    --eci-green-rgb: 72, 161, 0;
    --eci-lightgreen-rgb: 115, 205, 42;
    --eci-brightgreen-rgb: 170, 243, 111;
    --eci-darkgreen-rgb: 52, 117, 0;
    --eci-teal-rgb: 24, 168, 153;
    --eci-lightteal-rgb: 63, 198, 165;
    --eci-brightteal-rgb: 123, 246, 216;
    --eci-darkteal-rgb: 0, 116, 104;
    --eci-blue-rgb: 83, 136, 225;
    --eci-lightblue-rgb: 95, 163, 240;
    --eci-brightblue-rgb: 158, 206, 255;
    --eci-darkblue-rgb: 63, 99, 178;
    --eci-purple-rgb: 160, 101, 190;
    --eci-lightpurple-rgb: 181, 135, 222;
    --eci-brightpurple-rgb: 214, 181, 244;
    --eci-darkpurple-rgb: 111, 70, 146;
    /* Breakpoints */
    --eci-breakpoint-xs: var(--bs-breakpoint-xs);
    --eci-breakpoint-sm: var(--bs-breakpoint-sm);
    --eci-breakpoint-md: var(--bs-breakpoint-md);
    --eci-breakpoint-lg: var(--bs-breakpoint-lg);
    --eci-breakpoint-xl: var(--bs-breakpoint-xl);
    --eci-breakpoint-xxl: var(--bs-breakpoint-xxl);
    /* Fonts */
    --body-font: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    --body-font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
    }
}


/*
 * Fluent UI Blazor Overrides
 */

body {
    background: var(--fill-color);
    color: var(--neutral-foreground-rest);
}

#app {
    width: 100dvw;
    height: 100dvh;
}

body[data-theme="light"],
body[data-theme="system-light"] {
    color-scheme: light;
}

body[data-theme="dark"],
body[data-theme="system-dark"] {
    color-scheme: dark;
}


/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
    --body-font: var(--body-font-display);
}


/* Anchors */

a {
    color: var(--accent-foreground-rest);
    text-decoration: none;
}

    a:hover {
        color: var(--accent-foreground-hover);
    }

    a:active {
        color: var(--accent-foreground-active);
    }

    a:focus {
        color: var(--accent-foreground-focus);
    }


/* Buttons */

fluent-button.lightweight::part(control) {
    background: unset;
}

.eci-fluent-button-lg {
    --density: 2 !important;
    --type-ramp-base-font-size: var(--type-ramp-plus-1-font-size);
}


/* Menu Buttons */

.fluent-menubutton-container fluent-button::part(content) {
    width: 100%;
    text-align: start;
}


/* Badges */

.eci-fluent-badge-lg::part(control) {
    padding: 4px 8px;
}

.eci-fluent-badge-lg svg {
    width: 16px !important;
    margin: 1px 0px 0px 10px !important;
}


/* Text Fields */

fluent-text-field {
    display: block !important;
}

    fluent-text-field:part(control) {
        height: unset;
    }

    fluent-text-field svg {
        width: 16px !important;
    }

    fluent-text-field fluent-badge {
        font-size: var(--type-ramp-base-font-size);
    }

        fluent-text-field fluent-badge > div {
            padding: 2px 2px 2px 4px;
        }

        fluent-text-field fluent-badge svg {
            margin: 0 0 0 5px !important;
        }


/* Searches */

fluent-search::part(control) {
    height: unset;
}

fluent-search::part(clear-button) {
    min-width: unset;
}


/* Selects */

fluent-select fluent-option {
    background: var(--neutral-fill-rest) !important;
}

    fluent-select fluent-option:hover {
        background: var(--neutral-fill-hover) !important;
    }

    fluent-select fluent-option:focus {
        background: var(--neutral-fill-focus) !important;
    }

    fluent-select fluent-option:host(aria-selected="true") {
        background: var(--neutral-fill-active) !important;
    }


/* Cards */

fluent-card,
.fluent-card-minimal-style {
    box-shadow: none !important;
}


/* Data Grids */

.fluent-data-grid .column-header {
    height: 32px !important;
    margin-top: 4px;
}

.fluent-data-grid .select-all {
    padding-top: unset !important;
}

.fluent-data-grid .loading-content-cell,
.fluent-data-grid .empty-content-cell {
    border-bottom: none;
}


/* Tabs */

fluent-tabs fluent-tab-panel {
    padding: 0 !important;
}


/* Radio Button */

fluent-radio {
    margin-inline-end: calc(var(--design-unit) * 1px) !important;
}


/* Switches */

fluent-switch.w-100 {
    width: 100%;
    box-sizing: border-box;
}

fluent-switch.w-100::part(label) {
    flex: 1;
}


/* Sliders */

fluent-slider {
    display: block;
    margin-top: 1.125rem;
}


/* Menus */

fluent-menu fluent-switch {
    height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);
    padding: 0 calc(var(--design-unit) * 1px + 10px);
}


/* Personas */

.fluent-persona .name {
    color: var(--neutral-foreground-rest);
    margin-inline-start: 10px !important;
}

.fluent-persona.no-name .name {
    display: none !important;
}


/* Toasts */

.fluent-toast {
    padding: 12px 16px !important;
    min-height: 0px !important;
}


/* Message Bars */

.fluent-messagebar {
    width: unset !important;
}


/* Popovers */

.popover-rounded {
    border-radius: calc(var(--layer-corner-radius) * 1px);
}


/* Dialogs */

fluent-dialog .fluent-dialog-header {
    column-gap: 0px !important;
}

fluent-dialog .fluent-dialog-header fluent-button svg {
    width: 24px !important;
}

fluent-dialog .fluent-messagebox .stack-horizontal {
    align-items: start !important;
}

fluent-dialog .fluent-messagebox .icon {
    width: 32px !important;
    min-width: 32px !important;
}

@media (max-width: 575px) {
    fluent-dialog::part(control) {
        --dialog-padding: 1rem !important;
    }
}


/* Accordions */

fluent-accordion {
    gap: calc(var(--design-unit) * 3px);
}

fluent-accordion-item::part(heading) {
    font-size: var(--type-ramp-plus-1-font-size);
}

fluent-accordion-item::part(button) {
    height: 48px;
    padding: 0 calc(((var(--design-unit) * 3) + var(--focus-stroke-width) - var(--stroke-width)) * 1px);
    margin: 0;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

fluent-accordion-item::part(start) {
    padding-inline-start: calc(var(--design-unit) * 3px);
}


/* Navigation Buttons */

.eci-fluent-toolbar-navbutton::part(control) {
    font-size: var(--type-ramp-plus-1-font-size);
    padding-left: calc((4 + (var(--design-unit) * 1 * var(--density))) * 1px);
    background: none;
}

.eci-fluent-toolbar-navbutton::part(start) {
    margin-inline-end: 0;
}


/* Breadcrumbs */

fluent-breadcrumb-item::part(separator) {
    margin-inline: 5px;
}


/* Dividers */
fluent-divider[orientation="vertical"] {
    height: stretch;
}


/* Responsive Scaling */

@media (max-width: 575px) {
    fluent-button,
    fluent-anchor,
    fluent-text-field,
    fluent-text-area,
    fluent-select,
    fluent-search,
    fluent-menu-item,
    eci-fluent-menu-label {
        --density: 0.5;
        --design-unit: 4.5;
    }

        fluent-button,
        fluent-anchor,
        fluent-text-field::part(control),
        fluent-text-area::part(control),
        fluent-select::part(control),
        fluent-search::part(control),
        fluent-option {
            font-size: var(--type-ramp-plus-1-font-size);
        }

            fluent-button.eci-fluent-button-lg {
                font-size: var(--type-ramp-plus-2-font-size);
            }

    fluent-select::part(indicator) {
        transform: scale(1.25);
    }

    fluent-search::part(start),
    fluent-search::slotted(clear-glyph) {
        transform: scale(1.25);
    }

    fluent-switch {
        --density: 0;
        --design-unit: 4;
    }

    fluent-menu-item {
        font-size: var(--type-ramp-plus-1-font-size);
        line-height: var(--type-ramp-plus-1-line-height);
    }
}


/* Color Application */

.fg-accent {
    color: var(--accent-fill-rest) !important;
}

.fg-neutral {
    color: var(--neutral-fill-rest) !important;
}

.fg-layer-1 {
    color: var(--neutral-layer-1) !important;
}

.fg-layer-2 {
    color: var(--neutral-layer-2) !important;
}

.fg-layer-3 {
    color: var(--neutral-layer-3) !important;
}

.fg-layer-4 {
    color: var(--neutral-layer-4) !important;
}

.fg-success {
    color: var(--success) !important;
}

.fg-warning {
    color: var(--warning) !important;
}

.fg-error {
    color: var(--error) !important;
}

.fg-info {
    color: var(--info) !important;
}

.fg-eci-white {
    color: var(--eci-white) !important;
}

.fg-eci-black {
    color: var(--eci-black) !important;
}

.fg-eci-gray {
    color: var(--eci-gray) !important;
}

.fg-eci-lightgray {
    color: var(--eci-lightgray) !important;
}

.fg-eci-darkgray {
    color: var(--eci-darkgray) !important;
}

.fg-eci-red {
    color: var(--eci-red) !important;
}

.fg-eci-lightred {
    color: var(--eci-lightred) !important;
}

.fg-eci-brightred {
    color: var(--eci-brightred) !important;
}

.fg-eci-darkred {
    color: var(--eci-darkred) !important;
}

.fg-eci-yellow {
    color: var(--eci-yellow) !important;
}

.fg-eci-lightyellow {
    color: var(--eci-lightyellow) !important;
}

.fg-eci-brightyellow {
    color: var(--eci-brightyellow) !important;
}

.fg-eci-darkyellow {
    color: var(--eci-darkyellow) !important;
}

.fg-eci-green {
    color: var(--eci-green) !important;
}

.fg-eci-lightgreen {
    color: var(--eci-lightgreen) !important;
}

.fg-eci-brightgreen {
    color: var(--eci-brightgreen) !important;
}

.fg-eci-darkgreen {
    color: var(--eci-darkgreen) !important;
}

.fg-eci-teal {
    color: var(--eci-teal) !important;
}

.fg-eci-lightteal {
    color: var(--eci-lightteal) !important;
}

.fg-eci-brightteal {
    color: var(--eci-brightteal) !important;
}

.fg-eci-darkteal {
    color: var(--eci-darkteal) !important;
}

.fg-eci-blue {
    color: var(--eci-blue) !important;
}

.fg-eci-lightblue {
    color: var(--eci-lightblue) !important;
}

.fg-eci-brightblue {
    color: var(--eci-brightblue) !important;
}

.fg-eci-darkblue {
    color: var(--eci-darkblue) !important;
}

.fg-eci-purple {
    color: var(--eci-purple) !important;
}

.fg-eci-lightpurple {
    color: var(--eci-lightpurple) !important;
}

.fg-eci-brightpurple {
    color: var(--eci-brightpurple) !important;
}

.fg-eci-darkpurple {
    color: var(--eci-darkpurple) !important;
}

.bg-accent {
    background-color: var(--accent-fill-rest) !important;
}

.bg-neutral {
    background-color: var(--neutral-fill-rest) !important;
}

.bg-layer-1 {
    background-color: var(--neutral-layer-1) !important;
}

.bg-layer-2 {
    background-color: var(--neutral-layer-2) !important;
}

.bg-layer-3 {
    background-color: var(--neutral-layer-3) !important;
}

.bg-layer-4 {
    background-color: var(--neutral-layer-4) !important;
}

.bg-success {
    background-color: var(--success) !important;
}

.bg-warning {
    background-color: var(--warning) !important;
}

.bg-error {
    background-color: var(--error) !important;
}

.bg-info {
    background-color: var(--info) !important;
}

.bg-eci-white {
    background-color: var(--eci-white) !important;
}

.bg-eci-black {
    background-color: var(--eci-black) !important;
}

.bg-eci-gray {
    background-color: var(--eci-gray) !important;
}

.bg-eci-lightgray {
    background-color: var(--eci-lightgray) !important;
}

.bg-eci-darkgray {
    background-color: var(--eci-darkgray) !important;
}

.bg-eci-red {
    background-color: var(--eci-red) !important;
}

.bg-eci-lightred {
    background-color: var(--eci-lightred) !important;
}

.bg-eci-brightred {
    background-color: var(--eci-brightred) !important;
}

.bg-eci-darkred {
    background-color: var(--eci-darkred) !important;
}

.bg-eci-yellow {
    background-color: var(--eci-yellow) !important;
}

.bg-eci-lightyellow {
    background-color: var(--eci-lightyellow) !important;
}

.bg-eci-brightyellow {
    background-color: var(--eci-brightyellow) !important;
}

.bg-eci-darkyellow {
    background-color: var(--eci-darkyellow) !important;
}

.bg-eci-green {
    background-color: var(--eci-green) !important;
}

.bg-eci-lightgreen {
    background-color: var(--eci-lightgreen) !important;
}

.bg-eci-brightgreen {
    background-color: var(--eci-brightgreen) !important;
}

.bg-eci-darkgreen {
    background-color: var(--eci-darkgreen) !important;
}

.bg-eci-teal {
    background-color: var(--eci-teal) !important;
}

.bg-eci-lightteal {
    background-color: var(--eci-lightteal) !important;
}

.bg-eci-brightteal {
    background-color: var(--eci-brightteal) !important;
}

.bg-eci-darkteal {
    background-color: var(--eci-darkteal) !important;
}

.bg-eci-blue {
    background-color: var(--eci-blue) !important;
}

.bg-eci-lightblue {
    background-color: var(--eci-lightblue) !important;
}

.bg-eci-brightblue {
    background-color: var(--eci-brightblue) !important;
}

.bg-eci-darkblue {
    background-color: var(--eci-darkblue) !important;
}

.bg-eci-purple {
    background-color: var(--eci-purple) !important;
}

.bg-eci-lightpurple {
    background-color: var(--eci-lightpurple) !important;
}

.bg-eci-brightpurple {
    background-color: var(--eci-brightpurple) !important;
}

.bg-eci-darkpurple {
    background-color: var(--eci-darkpurple) !important;
}

.bd-accent {
    border-color: var(--accent-fill-rest) !important;
}

.bd-neutral {
    border-color: var(--neutral-fill-rest) !important;
}

.bd-layer-1 {
    border-color: var(--neutral-layer-1) !important;
}

.bd-layer-2 {
    border-color: var(--neutral-layer-1) !important;
}

.bd-layer-3 {
    border-color: var(--neutral-layer-1) !important;
}

.bd-layer-4 {
    border-color: var(--neutral-layer-1) !important;
}

.bd-success {
    border-color: var(--success) !important;
}

.bd-warning {
    border-color: var(--warning) !important;
}

.bd-error {
    border-color: var(--error) !important;
}

.bd-info {
    border-color: var(--info) !important;
}

.bd-eci-white {
    border-color: var(--eci-white) !important;
}

.bd-eci-black {
    border-color: var(--eci-black) !important;
}

.bd-eci-gray {
    border-color: var(--eci-gray) !important;
}

.bd-eci-lightgray {
    border-color: var(--eci-lightgray) !important;
}

.bd-eci-darkgray {
    border-color: var(--eci-darkgray) !important;
}

.bd-eci-red {
    border-color: var(--eci-red) !important;
}

.bd-eci-lightred {
    border-color: var(--eci-lightred) !important;
}

.bd-eci-brightred {
    border-color: var(--eci-brightred) !important;
}

.bd-eci-darkred {
    border-color: var(--eci-darkred) !important;
}

.bd-eci-yellow {
    border-color: var(--eci-yellow) !important;
}

.bd-eci-lightyellow {
    border-color: var(--eci-lightyellow) !important;
}

.bd-eci-brightyellow {
    border-color: var(--eci-brightyellow) !important;
}

.bd-eci-darkyellow {
    border-color: var(--eci-darkyellow) !important;
}

.bd-eci-green {
    border-color: var(--eci-green) !important;
}

.bd-eci-lightgreen {
    border-color: var(--eci-lightgreen) !important;
}

.bd-eci-brightgreen {
    border-color: var(--eci-brightgreen) !important;
}

.bd-eci-darkgreen {
    border-color: var(--eci-darkgreen) !important;
}

.bd-eci-teal {
    border-color: var(--eci-teal) !important;
}

.bd-eci-lightteal {
    border-color: var(--eci-lightteal) !important;
}

.bd-eci-brightteal {
    border-color: var(--eci-brightteal) !important;
}

.bd-eci-darkteal {
    border-color: var(--eci-darkteal) !important;
}

.bd-eci-blue {
    border-color: var(--eci-blue) !important;
}

.bd-eci-lightblue {
    border-color: var(--eci-lightblue) !important;
}

.bd-eci-brightblue {
    border-color: var(--eci-brightblue) !important;
}

.bd-eci-darkblue {
    border-color: var(--eci-darkblue) !important;
}

.bd-eci-purple {
    border-color: var(--eci-purple) !important;
}

.bd-eci-lightpurple {
    border-color: var(--eci-lightpurple) !important;
}

.bd-eci-brightpurple {
    border-color: var(--eci-brightpurple) !important;
}

.bd-eci-darkpurple {
    border-color: var(--eci-darkpurple) !important;
}


/* Absolute Position */

.absolute-top {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
}


/* Centering */

.centered {
    position: relative;
    width: fit-content;
    height: fit-content;
    margin-inline: auto;
    top: 50%;
    transform: translateY(-50%);
}

.centered-high {
    position: relative;
    width: fit-content;
    height: fit-content;
    margin-inline: auto;
    top: 25%;
    transform: translateY(-50%);
}

.centered-low {
    position: relative;
    width: fit-content;
    height: fit-content;
    margin-inline: auto;
    top: 75%;
    transform: translateY(-50%);
}


/* Safe Area */

.p-safearea,
.p-0-safearea {
    padding-top: env(safe-area-inset-top) !important;
    padding-right: env(safe-area-inset-right) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    padding-left: env(safe-area-inset-left) !important;
}

.px-safearea,
.px-0-safearea {
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
}

.py-safearea,
.py-0-safearea {
    padding-top: env(safe-area-inset-top) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
}

.pt-safearea,
.pt-0-safearea {
    padding-top: env(safe-area-inset-top) !important;
}

.pe-safearea,
.pe-0-safearea {
    padding-right: env(safe-area-inset-right) !important;
}

.pb-safearea,
.pb-0-safearea {
    padding-bottom: env(safe-area-inset-bottom) !important;
}

.ps-safearea,
.ps-0-safearea {
    padding-left: env(safe-area-inset-left) !important;
}

.p-1-safearea {
    padding-top: calc(0.25rem + env(safe-area-inset-top)) !important;
    padding-right: calc(0.25rem + env(safe-area-inset-right)) !important;
    padding-bottom: calc(0.25rem + env(safe-area-inset-bottom)) !important;
    padding-left: calc(0.25rem + env(safe-area-inset-left)) !important;
}

.px-1-safearea {
    padding-left: calc(0.25rem + env(safe-area-inset-left)) !important;
    padding-right: calc(0.25rem + env(safe-area-inset-right)) !important;
}

.py-1-safearea {
    padding-top: calc(0.25rem + env(safe-area-inset-top)) !important;
    padding-bottom: calc(0.25rem + env(safe-area-inset-bottom)) !important;
}

.pt-1-safearea {
    padding-top: calc(0.25rem + env(safe-area-inset-top)) !important;
}

.pe-1-safearea {
    padding-right: calc(0.25rem + env(safe-area-inset-right)) !important;
}

.pb-1-safearea {
    padding-bottom: calc(0.25rem + env(safe-area-inset-bottom)) !important;
}

.ps-1-safearea {
    padding-left: calc(0.25rem + env(safe-area-inset-left)) !important;
}

.p-2-safearea {
    padding-top: calc(0.5rem + env(safe-area-inset-top)) !important;
    padding-right: calc(0.5rem + env(safe-area-inset-right)) !important;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)) !important;
    padding-left: calc(0.5rem + env(safe-area-inset-left)) !important;
}

.px-2-safearea {
    padding-left: calc(0.5rem + env(safe-area-inset-left)) !important;
    padding-right: calc(0.5rem + env(safe-area-inset-right)) !important;
}

.py-2-safearea {
    padding-top: calc(0.5rem + env(safe-area-inset-top)) !important;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)) !important;
}

.pt-2-safearea {
    padding-top: calc(0.5rem + env(safe-area-inset-top)) !important;
}

.pe-2-safearea {
    padding-right: calc(0.5rem + env(safe-area-inset-right)) !important;
}

.pb-2-safearea {
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)) !important;
}

.ps-2-safearea {
    padding-left: calc(0.5rem + env(safe-area-inset-left)) !important;
}

.p-3-safearea {
    padding-top: calc(1rem + env(safe-area-inset-top)) !important;
    padding-right: calc(1rem + env(safe-area-inset-right)) !important;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
    padding-left: calc(1rem + env(safe-area-inset-left)) !important;
}

.px-3-safearea {
    padding-left: calc(1rem + env(safe-area-inset-left)) !important;
    padding-right: calc(1rem + env(safe-area-inset-right)) !important;
}

.py-3-safearea {
    padding-top: calc(1rem + env(safe-area-inset-top)) !important;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
}

.pt-3-safearea {
    padding-top: calc(1rem + env(safe-area-inset-top)) !important;
}

.pe-3-safearea {
    padding-right: calc(1rem + env(safe-area-inset-right)) !important;
}

.pb-3-safearea {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
}

.ps-3-safearea {
    padding-left: calc(1rem + env(safe-area-inset-left)) !important;
}

.p-4-safearea {
    padding-top: calc(1.5rem + env(safe-area-inset-top)) !important;
    padding-right: calc(1.5rem + env(safe-area-inset-right)) !important;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important;
    padding-left: calc(1.5rem + env(safe-area-inset-left)) !important;
}

.px-4-safearea {
    padding-left: calc(1.5rem + env(safe-area-inset-left)) !important;
    padding-right: calc(1.5rem + env(safe-area-inset-right)) !important;
}

.py-4-safearea {
    padding-top: calc(1.5rem + env(safe-area-inset-top)) !important;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important;
}

.pt-4-safearea {
    padding-top: calc(1.5rem + env(safe-area-inset-top)) !important;
}

.pe-4-safearea {
    padding-right: calc(1.5rem + env(safe-area-inset-right)) !important;
}

.pb-4-safearea {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important;
}

.ps-4-safearea {
    padding-left: calc(1.5rem + env(safe-area-inset-left)) !important;
}

.p-5-safearea {
    padding-top: calc(3rem + env(safe-area-inset-top)) !important;
    padding-right: calc(3rem + env(safe-area-inset-right)) !important;
    padding-bottom: calc(3rem + env(safe-area-inset-bottom)) !important;
    padding-left: calc(3rem + env(safe-area-inset-left)) !important;
}

.px-5-safearea {
    padding-left: calc(3rem + env(safe-area-inset-left)) !important;
    padding-right: calc(3rem + env(safe-area-inset-right)) !important;
}

.py-5-safearea {
    padding-top: calc(3rem + env(safe-area-inset-top)) !important;
    padding-bottom: calc(3rem + env(safe-area-inset-bottom)) !important;
}

.pt-5-safearea {
    padding-top: calc(3rem + env(safe-area-inset-top)) !important;
}

.pe-5-safearea {
    padding-right: calc(3rem + env(safe-area-inset-right)) !important;
}

.pb-5-safearea {
    padding-bottom: calc(3rem + env(safe-area-inset-bottom)) !important;
}

.ps-5-safearea {
    padding-left: calc(3rem + env(safe-area-inset-left)) !important;
}


/* Hidden Elements */

fluent-design-theme,
eci-fluent-device-info {
    display: none;
}


/* Variable Font Support */

.text-display,
.display-1,
.display-2,
.display-3,
.display-4,
.display-5,
.display-6 {
    font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}