:root, [data-theme=light] {
    --kt-text-muted: #4D5261;
    --kt-form-text-color: #4D5261;
    --kt-input-placeholder-color: #565E64;
    --kt-input-solid-placeholder-color: #565E64;
    --kt-text-gray-500: #6E7180;
    --kt-text-gray-600: #656D76;
    --fb-text-disabled: #A1A5B7;
}
[data-theme=light] .k-input-inner::placeholder,
[data-theme=light] .k-picker .k-input-inner::placeholder,
[data-theme=light] .k-textbox .k-input-inner::placeholder {
    color: #565E64 !important;
    opacity: 1;
}

[data-theme=light] {
    --fb-text-dark: #181C32;

    /* Links resolved to #009ef7 - 2.90:1 on a card, 2.72:1 on the page ground. app.css already
       declares a, .btn-link { color: #0071c1 }, but --kt-link-color was winning over it, so the
       intent existed and just wasn't reaching the page. #0071c1 measures 5.08 / 4.77. */
    --kt-link-color: #0071c1;
    --kt-link-hover-color: #0d6ab0;
    /* The bundle styles bare <a> off --bs-link-color, NOT --kt-link-color, and its own a{} rule
       loads after app.css:398's a,.btn-link{color:#0071c1} - so that declaration never applied.
       Both families are set here so links resolve the same wherever they're read from. */
    --bs-link-color: #0071c1;
    --bs-link-hover-color: #0d6ab0;
}

html:not([data-theme=dark]) body,
html:not([data-theme=dark]) .app-default {
    background-color: var(--kendo-color-surface) !important;
}
html:not([data-theme=dark]) #kt_app_content_container .fb-details-card,
html:not([data-theme=dark]) #kt_app_content_container .fb-page-header-card {
    background-color: var(--kt-app-bg-color) !important;
}

.fb-text-disabled {
    color: var(--fb-text-disabled) !important;
}
.form-control::placeholder,
.form-control.form-control-solid::placeholder,
.form-select.form-select-solid::placeholder {
    font-weight: 400;
}
/* Loaded last so it wins over the KeenThemes vendor bundle's [data-theme=dark] block. */
[data-theme=dark] {
  --kt-text-muted: #8b949e;
  --fb-text-disabled: #6e7681;
  --kt-gray-100: #010409;
  --kt-gray-200: #21262d;
  --kt-gray-300: #30363d;
  --kt-gray-400: #484f58;
  --kt-gray-500: #6e7681;
  --kt-gray-600: #7d8590;
  --kt-gray-700: #8b949e;
  --kt-gray-800: #c9d1d9;
  --kt-gray-900: #e6edf3;
  --kt-gray-100-rgb: 1, 4, 9;
  --kt-gray-200-rgb: 33, 38, 45;
  --kt-gray-300-rgb: 48, 54, 61;
  --kt-gray-400-rgb: 72, 79, 88;
  --kt-gray-500-rgb: 110, 118, 129;
  --kt-gray-600-rgb: 125, 133, 144;
  --kt-gray-700-rgb: 139, 148, 158;
  --kt-gray-800-rgb: 201, 209, 217;
  --kt-gray-900-rgb: 230, 237, 243;
  --kt-dark: #e6edf3;
  --kt-light: #21262d;
  --kt-secondary: #30363d;
  --kt-dark-active: #e6edf3;
  --kt-light-active: #30363d;
  --kt-secondary-active: #484f58;
  --kt-primary-light: #0d2a4a;
  --kt-success-light: #0f291e;
  --kt-info-light: #291d44;
  --kt-warning-light: #38280b;
  --kt-danger-light: #3b0f10;
  --kt-dark-light: #21262d;
  --kt-secondary-light: #010409;
  --kt-dark-inverse: #010409;
  --kt-light-inverse: #7d8590;
  --kt-secondary-inverse: #c9d1d9;
  --kt-dark-rgb: 230, 237, 243;
  --kt-light-rgb: 33, 38, 45;
  --kt-secondary-rgb: 48, 54, 61;
  --kt-text-dark: #c9d1d9;
  --kt-text-secondary: #30363d;
  --kt-text-gray-100: #010409;
  --kt-text-gray-200: #21262d;
  --kt-text-gray-300: #30363d;
  --kt-text-gray-400: #484f58;
  --kt-text-gray-500: #7d8590; /* was #6e7681 (3.77:1 on #161b22). No value clears 4.5:1 on the
                                darkest card surface while staying lighter than gray-600, so 500 and
                                600 are deliberately collapsed to one tone here. 14 .text-gray-500
                                call sites affected; .text-gray-600 unchanged. */
  --kt-text-gray-600: #7d8590;
  --kt-text-gray-700: #8b949e;
  --kt-text-gray-800: #c9d1d9;
  --kt-text-gray-900: #e6edf3;
  --kt-body-bg: #0d1117;
  --kt-body-bg-rgb: 13, 17, 23;
  --kt-body-color: #c9d1d9;
  --kt-link-color: #58a6ff;
  --kt-link-hover-color: #79c0ff;
  --kt-border-color: #30363d;
  --kt-border-dashed-color: #30363d;
  --kt-component-active-bg: #1f6feb;
  --kt-component-hover-color: #58a6ff;
  --kt-component-hover-bg: #21262d;
  --kt-component-checked-bg: #1f6feb;
  --kt-headings-color: #e6edf3;
  --kt-table-color: #c9d1d9;
  --kt-table-striped-color: #c9d1d9;
  --kt-table-striped-bg: rgba(1, 4, 9, 0.75);
  --kt-table-active-color: #e6edf3;
  --kt-table-active-bg: #161b22;
  --kt-table-hover-colorr: #e6edf3;
  --kt-table-hover-bg: #161b22;
  --kt-table-border-color: #30363d;
  --kt-table-caption-color: #6e7681;
  --kt-table-loading-message-bg: #21262d;
  --kt-table-loading-message-color: #8b949e;
  --kt-input-btn-focus-color: rgba(88, 166, 255, 0.25);
  --kt-input-color: #c9d1d9;
  --kt-input-placeholder-color: #7d8590;
  --kt-input-plaintext-color: #8b949e;
  --kt-btn-link-color: #58a6ff;
  --kt-btn-link-hover-color: #79c0ff;
  --kt-btn-link-disabled-color: #7d8590;
  --kt-form-label-color: #c9d1d9;
  --kt-form-text-color: #8b949e;
  --kt-input-bg: #0d1117;
  --kt-input-disabled-bg: #21262d;
  --kt-input-disabled-color: #6e7681;
  --kt-input-disabled-border-color: #30363d;
  --kt-input-border-color: #30363d;
  --kt-input-focus-bg: #0d1117;
  --kt-input-focus-border-color: #484f58;
  --kt-input-focus-color: #c9d1d9;
  --kt-input-solid-bg: #010409;
  --kt-input-solid-bg-focus: #161b22;
  --kt-input-solid-placeholder-color: #7d8590;
  --kt-input-solid-color: #c9d1d9;
  --kt-form-check-label-color: #6e7681;
  --kt-form-check-label-color-checked: #c9d1d9;
  --kt-form-check-input-bg-solid: #21262d;
  --kt-form-check-input-border: 1px solid #30363d;
  --kt-form-check-input-focus-border: #484f58;
  --kt-form-check-input-checked-bg-color: #1f6feb;
  --kt-form-check-input-checked-border-color: #1f6feb;
  --kt-form-check-input-indeterminate-bg-color: #1f6feb;
  --kt-form-check-input-indeterminate-border-color: #1f6feb;
  --kt-form-switch-color-solid: #8b949e;
  --kt-form-switch-focus-color: #484f58;
  --kt-input-group-addon-color: #8b949e;
  --kt-input-group-addon-bg: #010409;
  --kt-input-group-addon-border-color: #30363d;
  --kt-form-select-color: #8b949e;
  --kt-form-select-bg: #0d1117;
  --kt-form-select-disabled-color: #6e7681;
  --kt-form-select-disabled-bg: #21262d;
  --kt-form-select-disabled-border-color: #30363d;
  --kt-form-select-indicator-color: #7d8590;
  --kt-form-select-indicator: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237d8590' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --kt-form-select-border-color: #30363d;
  --kt-form-select-focus-border-color: #484f58;
  --kt-form-select-focus-box-shadow: 0 0 0 0.25rem rgba(88, 166, 255, 0.25);
  --kt-form-file-button-color: #8b949e;
  --kt-form-file-button-bg: #010409;
  --kt-nav-tabs-border-color: #21262d;
  --kt-nav-tabs-link-hover-border-color: #21262d #21262d #21262d;
  --kt-nav-tabs-link-active-color: #8b949e;
  --kt-nav-tabs-link-active-bg: #0d1117;
  --kt-nav-tabs-link-active-border-color: #30363d #30363d #0d1117;
  --kt-nav-pills-link-active-bg: #1f6feb;
  --kt-dropdown-color: #e6edf3;
  --kt-dropdown-bg: #161b22;
  --kt-dropdown-divider-bg: #010409;
  --kt-dropdown-link-color: #e6edf3;
  --kt-dropdown-link-hover-bg: #21262d;
  --kt-dropdown-link-active-bg: #1f6feb;
  --kt-dropdown-link-disabled-color: #6e7681;
  --kt-dropdown-header-color: #7d8590;
  --kt-pagination-item-bg: #0d1117;
  --kt-pagination-color: #8b949e;
  --kt-pagination-focus-color: #58a6ff;
  --kt-pagination-focus-bg: #21262d;
  --kt-pagination-hover-color: #58a6ff;
  --kt-pagination-hover-bg: #21262d;
  --kt-pagination-active-bg: #1f6feb;
  --kt-pagination-disabled-color: #484f58;
  --kt-card-bg: #161b22;
  --kt-card-border-color: #30363d;
  --kt-card-border-dashed-color: #30363d;
  --kt-accordion-color: #e6edf3;
  --kt-accordion-bg: #161b22;
  --kt-accordion-border-color: #30363d;
  --kt-accordion-button-color: #e6edf3;
  --kt-accordion-button-bg: #161b22;
  --kt-accordion-button-active-bg: #010409;
  --kt-accordion-button-active-color: #58a6ff;
  --kt-accordion-button-focus-border-color: #30363d;
  --kt-accordion-icon-color: #e6edf3;
  --kt-accordion-icon-active-color: #58a6ff;
  --kt-accordion-button-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2358a6ff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --kt-tooltip-color: #c9d1d9;
  --kt-tooltip-bg: #30363d;
  --kt-popover-bg: #161b22;
  --kt-popover-border-color: #30363d;
  --kt-popover-header-bg: #21262d;
  --kt-popover-header-color: #c9d1d9;
  --kt-popover-header-border-color: #30363d;
  --kt-popover-body-color: #c9d1d9;
  --kt-dropdown-bg: #161b22;
  --kt-badge-color: #0d1117;
  --kt-modal-bg: #161b22;
  --kt-modal-content-bg: #161b22;
  --kt-modal-header-border-color: #30363d;
  --kt-modal-footer-border-color: #30363d;
  --kt-modal-backdrop-bg: #010409;
  --kt-progress-bg: #010409;
  --kt-list-group-color: #e6edf3;
  --kt-list-group-bg: #0d1117;
  --kt-list-group-active-bg: #1f6feb;
  --kt-list-group-active-border-colorg: #1f6feb;
  --kt-list-group-disabled-color: #7d8590;
  --kt-list-group-disabled-bg: #0d1117;
  --kt-list-group-action-colorg: #8b949e;
  --kt-list-group-action-hover-color: #8b949e;
  --kt-list-group-action-active-color: #e6edf3;
  --kt-list-group-action-active-bg: #21262d;
  --kt-thumbnail-bg: #0d1117;
  --kt-thumbnail-border-color: #30363d;
  --kt-figure-caption-color: #7d8590;
  --kt-breadcrumb-divider-color: #7d8590;
  --kt-breadcrumb-active-color: #58a6ff;
  --kt-carousel-custom-indicator-default-bg-color: #21262d;
  --kt-carousel-custom-indicator-active-bg-color: #484f58;
  --kt-arousel-custom-bullet-indicator-default-bg-color: #484f58;
  --kt-carousel-custom-bullet-indicator-active-bg-color: #7d8590;
  --kt-code-bg: #21262d;
  --kt-code-color: #ff7b72;
  --kt-offcanvas-bg-color: #0d1117;
  --kt-offcanvas-backdrop-bg: #010409;
  --kt-symbol-label-color: #c9d1d9;
  --kt-symbol-label-bg: #010409;
  --kt-bullet-bg-color: #484f58;
  --kt-scrolltop-bg-color: #1f6feb;
  --kt-scrolltop-bg-color-hover: #1f6feb;
  --kt-drawer-bg-color: #0d1117;
  --kt-menu-dropdown-bg-color: #0d1117;
  --kt-menu-heading-color: #6e7681;
  --kt-menu-link-color-hover: #58a6ff;
  --kt-menu-link-color-show: #58a6ff;
  --kt-menu-link-color-here: #58a6ff;
  --kt-menu-link-color-active: #58a6ff;
  --kt-menu-link-bg-color-hover: #21262d;
  --kt-menu-link-bg-color-show: #21262d;
  --kt-menu-link-bg-color-here: #21262d;
  --kt-menu-link-bg-color-active: #21262d;
  --kt-feedback-popup-background-color: #161b22;
  --kt-scrollbar-color: #30363d;
  --kt-scrollbar-hover-color: #484f58;
  --kt-rating-color-active: #d29922;
  --kt-ribbon-label-bg: #58a6ff;
  --kt-engage-btn-bg: #21262d;
  --kt-engage-btn-color: #7d8590;
  --kt-engage-btn-color-active: #c9d1d9;
}

[data-theme=dark] {
  --bs-gray-100: #010409;
  --bs-gray-200: #21262d;
  --bs-gray-300: #30363d;
  --bs-gray-400: #484f58;
  --bs-gray-500: #6e7681;
  --bs-gray-600: #7d8590;
  --bs-gray-700: #8b949e;
  --bs-gray-800: #c9d1d9;
  --bs-gray-900: #e6edf3;
  --bs-dark: #e6edf3;
  --bs-light: #21262d;
  --bs-secondary: #30363d;
  --bs-body-color-rgb: 230, 237, 243;
  --bs-body-bg-rgb: 13, 17, 23;
  --bs-body-color: #c9d1d9;
  --bs-body-bg: #0d1117;
  --bs-border-color: #30363d;
  --bs-heading-color: #e6edf3;
  --bs-link-color: #58a6ff;
  --bs-link-hover-color: #79c0ff;
  --bs-code-color: #ff7b72;
}

/* The KeenThemes "app shell" tokens (header/sidebar/toolbar/footer chrome) are a separate
   variable family from the --kt-*/
[data-theme=dark] {
  --kt-app-bg-color: #0d1117;
  --kt-app-blank-bg-color: #0d1117;
  --kt-app-header-base-bg-color: #0d1117;
  --kt-app-header-base-bg-color-mobile: #0d1117;
  --kt-app-header-base-menu-link-bg-color-active: #21262d;
  --kt-app-header-light-separator-color: #30363d;
  --kt-app-sidebar-base-toggle-btn-bg-color: #21262d;
  --kt-app-sidebar-light-bg-color: #0d1117;
  --kt-app-sidebar-light-separator-color: #30363d;
  --kt-app-sidebar-light-scrollbar-color: #30363d;
  --kt-app-sidebar-light-scrollbar-color-hover: #484f58;
  --kt-app-sidebar-light-menu-heading-color: #6e7681;
  --kt-app-sidebar-light-menu-link-bg-color-active: #21262d;
  --kt-app-sidebar-light-header-menu-link-bg-color-active: #010409;
  --kt-app-toolbar-base-bg-color: #0d1117;
  --kt-app-toolbar-base-bg-color-mobile: #0d1117;
  --kt-app-footer-bg-color: #0d1117;
  --kt-app-footer-bg-color-mobile: #0d1117;
}

/*button classes*/

.btn.btn-primary {
    border-color: var(--fb-primary) !important;
    background-color: var(--fb-primary) !important;
}

.btn.btn-light-primary {
    color: var(--fb-primary) !important;
    border-color: var(--fb-primary-light) !important;
    background-color: var(--fb-primary-light) !important;
}

.btn-check:checked + .btn.btn-light-primary, .btn-check:active + .btn.btn-light-primary, .btn.btn-light-primary:focus:not(.btn-active), .btn.btn-light-primary:hover:not(.btn-active), .btn.btn-light-primary:active:not(.btn-active), .btn.btn-light-primary.active, .btn.btn-light-primary.show, .show > .btn.btn-light-primary {
    color: var(--fb-white) !important;
    border-color: var(--fb-primary) !important;
    background-color: var(--fb-primary) !important;
}

.btn.btn-success {
    border-color: var(--fb-success) !important;
    background-color: var(--fb-success) !important;
}

.btn.btn-light-success {
    color: var(--fb-success) !important;
    border-color: var(--fb-success-light) !important;
    background-color: var(--fb-success-light) !important;
}

.btn-check:checked + .btn.btn-light-success, .btn-check:active + .btn.btn-light-success, .btn.btn-light-success:focus:not(.btn-active), .btn.btn-light-success:hover:not(.btn-active), .btn.btn-light-success:active:not(.btn-active), .btn.btn-light-success.active, .btn.btn-light-success.show, .show > .btn.btn-light-success {
    color: var(--fb-white) !important;
    border-color: var(--fb-success) !important;
    background-color: var(--fb-success) !important;
}

.btn.btn-warning {
    border-color: var(--fb-warning) !important;
    background-color: var(--fb-warning) !important;
}

.btn.btn-light-warning {
    color: var(--fb-warning) !important;
    border-color: var(--fb-warning-light) !important;
    background-color: var(--fb-warning-light) !important;
}

.btn-check:checked + .btn.btn-light-warning, .btn-check:active + .btn.btn-light-warning, .btn.btn-light-warning:focus:not(.btn-active), .btn.btn-light-warning:hover:not(.btn-active), .btn.btn-light-warning:active:not(.btn-active), .btn.btn-light-warning.active, .btn.btn-light-warning.show, .show > .btn.btn-light-warning {
    color: var(--fb-white) !important;
    border-color: var(--fb-warning) !important;
    background-color: var(--fb-warning) !important;
}

.btn.btn-danger {
    border-color: var(--fb-danger) !important;
    background-color: var(--fb-danger) !important;
}

.btn.btn-light-danger {
    border-color: var(--fb-danger-light) !important;
    background-color: var(--fb-danger-light) !important;
}

.btn.btn-secondary {
    border-color: var(--fb-secondary) !important;
    background-color: var(--fb-secondary) !important;
}

.btn.btn-light-secondary {
    color: var(--fb-secondary) !important;
    border-color: var(--fb-secondary-light) !important;
    background-color: var(--fb-secondary-light) !important;
}

.btn.btn-info {
    border-color: var(--fb-info) !important;
    background-color: var(--fb-info) !important;
}

.btn.btn-light-info {
    color: var(--fb-info) !important;
    border-color: var(--fb-info-light) !important;
    background-color: var(--fb-info-light) !important;
}

/*text classes*/

.text-primary {
    color: var(--fb-primary) !important;
}

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

.text-danger {
    color: var(--fb-danger) !important;
}

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

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

.text-secondary {
    color: var(--fb-secondary) !important;
}

/*border classes*/

.border-primary {
    border-color: var(--fb-primary) !important;
}

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

.border-danger {
    border-color: var(--fb-danger) !important;
}

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

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

.border-secondary {
    border-color: var(--fb-secondary) !important;
}

/*bg classes*/

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

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

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

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

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

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

.bg-light-secondary {
    background-color: var(--fb-secondary-light) !important;
}

.bg-white{
    background-color: var(--fb-white) !important;
}
/*badge classes*/

.badge-primary {
    background-color: var(--fb-primary) !important;
}

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

.badge-danger {
    background-color: var(--fb-danger) !important;
}

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

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

.badge-secondary {
    background-color: var(--fb-secondary) !important;
}

/*Grid stuff*/

.k-grid-header .k-sort-icon,
.k-grid-header .k-sort-order {
    color: var(--fb-primary);
}

.k-grid-header .k-grid-filter.k-active, .k-grid-header .k-header-column-menu.k-active, .k-grid-header .k-grid-header-menu.k-active, .k-grid-header .k-hierarchy-cell .k-icon.k-active, .k-grid-header .k-hierarchy-cell .k-svg-icon.k-active {
    color: var(--fb-white);
    background-color: var(--fb-primary);
}

.k-grid-header .k-header-column-menu.k-active,
.k-grid-header .k-grid-header-menu.k-active {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    border-radius: 0;
}

/*Checkbox*/

.form-check-custom.form-check-solid .form-check-input:checked {
    background-color: var(--fb-primary);
}


/*Sidebar*/
/*Address text wrapping in sidebar menu items*/
@media (min-width: 992px) {
    :root {
        --kt-app-sidebar-width: 285px;
        --kt-app-sidebar-width-actual: 285px;
    }
}

/*
 * Metronic's own KTScroll plugin (data-kt-scroll) computes and hard-codes a pixel `height` +
 * `overflow-y` on this wrapper via JS. With 3 of the 6 top-level sections expanded by default
 * (see docs/specs/sidebar-section-grouping-and-expand-state.md §1/§3.4), the sidebar's default
 * rendered content is now tall enough that KTScroll's computed box stops containing it, so the
 * excess spills past the viewport instead of scrolling internally. Force the standard
 * "scrollable flex child" pattern instead of relying on that JS-computed height — flex-grow-1
 * (Bootstrap utility, already applied) plus min-height:0 (already inline) sizes this to exactly
 * the remaining space in its flex-column parent, and overflow-y:auto scrolls anything taller than
 * that internally. #kt_app_sidebar_menu_wrapper is a page-unique id, so this is a plain global
 * override (not a Blazor-scoped .razor.css rule) — deliberate, see the sidebar-section-grouping
 * spec's implementation notes for why.
 */
#kt_app_sidebar_menu_wrapper {
    height: auto !important;
    overflow-y: auto !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
}

/*Mud Dialog*/
.mud-dialog{
    background-color: var(--bs-body-bg) !important;
    color: var(--kt-headings-color) !important;
}
@media (max-width: 600px){
    .accordion-button{
        padding: 10px !important;
    }
}

@media (width <= 600px){
    .rounded-sm-0{
        border-radius: 0 !important;
    }
    .accordion-body{
        padding: 8px !important;
    }
}
@media (width > 991px){
    .rounded-lg-2{
        border-radius: .25rem !important;
    }
}

.k-card.\@\(\$\"fb-details-card.k-card-body{
    padding: unset !important;
}

/*
 * Completion-tab document preview (Job/Quote/Invoice/Order TemplateCard components) — bounded,
 * page-like "paper" framing. See docs/specs/completion-tab-document-preview-redesign.md §5/§6.1.
 * A plain custom class, not a Bootstrap .container-* class: those grow at the xl/xxl breakpoints
 * (960px -> 1140px -> 1320px) instead of staying capped at an A4-ish width.
 */
.fb-document-preview {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 48px;
    background-color: var(--bs-body-bg);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
}

@media (width <= 767.98px) {
    .fb-document-preview {
        max-width: 100%;
        padding: 16px;
        box-shadow: none;
    }
}

.fb-completion-aside .fb-completion-related > [class*="col-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}
.fb-tab-panel.fb-fill-col .fb-completion-splitter > .k-pane:has(.k-grid.fb-fill),
form.fb-fill-col .fb-completion-splitter > .k-pane:has(.k-grid.fb-fill),
.fb-completion-splitter > .k-pane,
.fb-completion-splitter > .k-pane *:has(.k-grid.fb-fill):not(.k-splitter) {
    min-height: 0;
}

.app-sidebar-branding-minimize {
    display: none;
}

@media (min-width: 992px) {
    [data-kt-app-sidebar-minimize=on]:not([data-kt-app-sidebar-hoverable=true]) .app-sidebar .app-sidebar-footer .app-sidebar-branding-default,
    [data-kt-app-sidebar-minimize=on][data-kt-app-sidebar-hoverable=true] .app-sidebar:not(:hover) .app-sidebar-footer .app-sidebar-branding-default {
        display: none !important;
    }

    [data-kt-app-sidebar-minimize=on]:not([data-kt-app-sidebar-hoverable=true]) .app-sidebar .app-sidebar-footer .app-sidebar-branding-minimize,
    [data-kt-app-sidebar-minimize=on][data-kt-app-sidebar-hoverable=true] .app-sidebar:not(:hover) .app-sidebar-footer .app-sidebar-branding-minimize {
        display: inline-block;
    }
}

.fb-fill {
    flex: 1 1 auto;
    min-height: 0;
}

.fb-fill-col {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.row:has(> .fb-grid),
.row:has(> .fb-skeleton > .fb-grid) {
    margin-left: 0;
    margin-right: 0;
}

.fb-fill-header {
    flex: 0 0 auto;
}

.btn-group.fb-fill-header {
    align-self: flex-start;
}

#kt_app_page:has(.fb-fixed-layout) {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

#kt_app_page:has(.fb-fixed-layout) #kt_app_wrapper,
#kt_app_page:has(.fb-fixed-layout) #kt_app_main,
#kt_app_page:has(.fb-fixed-layout) #kt_app_main > .flex-column-fluid,
#kt_app_page:has(.fb-fixed-layout) #kt_app_content,
#kt_app_page:has(.fb-fixed-layout) #kt_app_content_container {
    min-height: 0;
    flex-shrink: 1;
    overflow: hidden;
}

#kt_app_page:has(.fb-fixed-layout) #kt_app_content_container {
    display: flex;
    flex-direction: column;
}

#kt_app_page:has(.fb-fixed-layout) #kt_app_header,
#kt_app_page:has(.fb-fixed-layout) #kt_app_toolbar,
#kt_app_page:has(.fb-fixed-layout) #kt_app_main > .flex-column-fluid > *:not(#kt_app_content) {
    flex-shrink: 0;
}

.fb-fixed-layout {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

main.fb-main {
    min-height: 0;
    overflow-y: auto;
}

main.fb-main:has(> .fb-fill-col),
main.fb-main:has(> .fb-fill) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.k-grid.fb-fill .k-grid-aria-root {
    min-height: 0;
}

.k-card.fb-fill-col > .k-card-body.fb-fill-col {
    overflow: hidden;
}

.k-card.fb-fill-col > .k-card-body.fb-fill-col:not(:has(form.fb-fill-col)):not(:has(.fb-tab-panel.fb-fill-col)) {
    overflow-y: auto;
}

.k-splitter.fb-fill {
    height: auto !important;
}

form.fb-fill-col,
.fb-tab-panel.fb-fill-col {
    overflow-y: auto;
    min-height: 0;
}

.fb-fill-col *:has(.k-grid.fb-fill):not(.k-splitter) {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.fb-fill-col .collapse:not(.show):has(.k-grid.fb-fill) {
    display: none;
}

.fb-fill-col .accordion-item:has(> .collapse:not(.show)) {
    flex-grow: 0;
}

.fb-fill-col .k-splitter:has(.k-pane ~ .k-pane) > .k-pane:has(.k-grid.fb-fill):not([style*="flex-basis: ;"]) {
    flex-grow: 0;
    flex-shrink: 0;
}

form.fb-fill-col *:has(.k-grid.fb-fill):not(.k-splitter),
form.fb-fill-col .k-grid.fb-fill,
.fb-tab-panel.fb-fill-col *:has(.k-grid.fb-fill):not(.k-splitter),
.fb-tab-panel.fb-fill-col .k-grid.fb-fill {
    min-height: auto;
}

form.fb-fill-col .k-grid.fb-fill .k-grid-content,
.fb-tab-panel.fb-fill-col .k-grid.fb-fill .k-grid-content {
    flex: 1 1 180px;
    min-height: 0;
}

form.fb-fill-col .k-grid.fb-fill,
.fb-tab-panel.fb-fill-col .k-grid.fb-fill {
    max-height: 100%;
}

.fb-fill-col .accordion-body *:has(.k-grid.fb-fill):not(.k-splitter),
.fb-fill-col .accordion-body .k-grid.fb-fill,
.fb-fill-col .fb-document-preview,
.fb-fill-col .fb-document-preview *:has(.k-grid.fb-fill):not(.k-splitter),
.fb-fill-col .fb-document-preview .k-grid.fb-fill {
    min-height: auto;
}

.fb-fill-col .accordion-body .k-grid.fb-fill .k-grid-content,
.fb-fill-col .fb-document-preview .k-grid.fb-fill .k-grid-content {
    min-height: 180px;
}

.fb-fill-col .fb-document-preview:has(.k-grid.fb-fill) {
    display: block;
    flex: 0 0 auto;
}

.fb-fill-col .row:has(.k-grid.fb-fill) {
    flex-direction: row;
    margin-left: 0;
    margin-right: 0;
}

.k-pane.fb-fill-col {
    height: 100%;
    min-height: 0;
}

#kt_app_page:has(.fb-fixed-layout) .footer-menu {
    position: static !important;
    bottom: auto !important;
}

@media (max-width: 991.98px) {
    .fb-page-header-card {
        box-shadow: none !important;
        border: 0;
        border-bottom: 1px solid var(--kt-card-border-color);
    }
}

/* FbPhoneNumber's host-admin country-code combo: hide Telerik's own toggle button so only the flag
   shows. Lives here rather than in a scoped .razor.css because the .k-button it targets is rendered
   by the child TelerikComboBox, which never carries this component's scope attribute. Previously an
   inline <style> keyed off a hardcoded id, which duplicated the id once per rendered number - not
   viable now that FbPhoneNumberList renders several at once. */
.fb-phone-number .k-button {
    visibility: hidden;
}