/* --- FONTS IMPORTS --- */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

/* --- ICONS IMPORTS --- */
@import url('https://cdn.jsdelivr.net/npm/lucide-static@0.542.0/font/lucide.css');

/* --- CSS IMPORTS --- */

/* ── Foundations (tokens) — must load first ─────────────────── */
@import url('inradr-design/inradr-color.css'); /* 01 */
@import url('inradr-design/inradr-typography.css'); /* 02 */
@import url('inradr-design/inradr-spacing.css'); /* 03 */
@import url('inradr-design/inradr-radius.css'); /* 04 */
@import url('inradr-design/inradr-elevation.css'); /* 05 */
@import url('inradr-design/inradr-icon.css'); /* 06  XAF-ImageLoader-Icons als CSS-Maske */

/* ── Components (consume tokens; some need earlier roots) ────── */
@import url('inradr-design/inradr-button.css'); /* shared button system */
@import url('inradr-design/inradr-badge.css'); /* 07 */
@import url('inradr-design/inradr-toggle.css'); /* 08 */
@import url('inradr-design/inradr-checkbox.css'); /* 09 */
@import url('inradr-design/inradr-card.css'); /* 10 */
@import url('inradr-design/inradr-hero-image.css'); /* 15 */
@import url('inradr-design/inradr-form.css'); /* 11  before modal */
@import url('inradr-design/inradr-navigation.css'); /* 12 */
@import url('inradr-design/inradr-accordion.css'); /* 13  before modal (shares .accordion-title) */
@import url('inradr-design/inradr-xaf-breadcrumb.css');
@import url('inradr-design/inradr-modal.css'); /* 17 */
@import url('inradr-design/inradr-info-line.css'); /* 14 */
@import url('inradr-design/inradr-data-grid.css'); /* 15  before filter */
@import url('inradr-design/inradr-alert.css'); /* 16 */
@import url('inradr-design/inradr-filter.css'); /* 19 */
@import url('inradr-design/inradr-dataviz.css'); /* 19 */
@import url('inradr-design/inradr-toast.css');
@import url('inradr-design/inradr-responsive.css'); /* 22  stub — order irrelevant */

/* Feature CSS (inradr-features) */
@import url('inradr-features/inradr-badge.css');
@import url('inradr-features/inradr-bilanz-dashboard.css');
@import url('inradr-features/inradr-button.css');
@import url('inradr-features/inradr-custom-dashboard.css');
@import url('inradr-features/inradr-customs.css');
@import url('inradr-features/inradr-data-delivery-dashboard.css');
@import url('inradr-features/inradr-embedded-crud-feature.css');
@import url('inradr-features/inradr-feedback.css');
@import url('inradr-features/inradr-field-reveal.css');
@import url('inradr-features/inradr-footer.css');
@import url('inradr-features/inradr-grids.css');
@import url('inradr-features/inradr-guv-dashboard.css');
@import url('inradr-features/inradr-icon.css');
@import url('inradr-features/inradr-inputs.css');
@import url('inradr-features/inradr-navigation.css');
@import url('inradr-features/inradr-notifications.css');
@import url('inradr-features/inradr-performance-dashboard.css');
@import url('inradr-features/inradr-plotly-chart-colors.css');
@import url('inradr-features/inradr-rent-roll.css'); /* Rent Roll legacy overrides */
@import url('inradr-features/inradr-tenant-view.css');
@import url('inradr-features/inradr-toast.css');

/* Responsive overrides are maintained in dedicated modern breakpoint files. */
@import url('inradr-features/inradr-site-modern-max1200.css');
@import url('inradr-features/inradr-site-modern-max991.css');
@import url('inradr-features/inradr-site-modern-max768.css');
@import url('inradr-features/inradr-site-modern-max580.css');

/* Ensure parent containers do not clip content */

/* -------------------------------------------------------------------------- */

*,
*::before,
*::after,
html, body,
.dxbl,
.dxbl *,
.dx-blazor,
.dx-blazor * {
    font-family: var(--font-primary) !important;
}

[class*="dx-icon"],
.dx-dropdowneditor-icon::before,
.dxbl-image-font-icon,
[class*="dxbl-icon"],
.dx-icon {
    font-family: 'DXIcons', 'dxicons' !important;
}

.fa, .fas, .far, .fal, .fad, .fab,
.fa-solid, .fa-regular, .fa-light, .fa-duotone, .fa-brands,
[class*="fa-"]::before, [class*="fa-"]::after {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
}

[class^="icon-"], [class*=" icon-"],
[class^="icon-"]::before, [class*=" icon-"]::before {
    font-family: 'lucide' !important;
}

.bi, [class^="bi-"], [class*=" bi-"],
.bi::before, [class^="bi-"]::before, [class*=" bi-"]::before {
    font-family: 'bootstrap-icons' !important;
}

/* Ensured moved variables out of root here */


body {
    font: var(--text-body) !important;
    padding-bottom: 36px;
}

:root {
    /* Shared responsive page gutter: 16px on narrow screens, up to 32px on
       larger screens. Caption and DetailView content use the same variable. */
    --inradr-content-gutter: clamp(1rem, 4vw, 2rem);
}

body:has(.xaf-item-fundmaster_name) {
    --inradr-content-gutter: 32px;
}

/* Ensures the custom app component is displayed as a block-level element and occupies the full height */
app {
    display: block;
    height: 100%;
}

/* --- DEVEXPRESS OPTIMIZATION --- */
/* No overrides for grid scrolling */

.white-space-pre-line[title]:not([title=""]) {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-size: clamp(13px, 0.8125rem + 0.25vw, 14px);
    color: #9ca3af !important;
    cursor: help;
}

label.white-space-pre-line[title]:not([title=""]) {
    color: var(--color-surface-muted) !important;
}

.white-space-pre-line[title]:not([title=""])::before {
    content: "" !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 12px !important;
    background-color: var(--color-navy) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.2 5.6H8.8V4H7.2V5.6ZM8 14.4C4.472 14.4 1.6 11.528 1.6 8C1.6 4.472 4.472 1.6 8 1.6C11.528 1.6 14.4 4.472 14.4 8C14.4 11.528 11.528 14.4 8 14.4ZM8 0C6.94943 0 5.90914 0.206926 4.93853 0.608964C3.96793 1.011 3.08601 1.60028 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.08601 14.3997 3.96793 14.989 4.93853 15.391C5.90914 15.7931 6.94943 16 8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 6.94943 15.7931 5.90914 15.391 4.93853C14.989 3.96793 14.3997 3.08601 13.6569 2.34315C12.914 1.60028 12.0321 1.011 11.0615 0.608964C10.0909 0.206926 9.05058 0 8 0ZM7.2 12H8.8V7.2H7.2V12Z'/%3E%3C/svg%3E") no-repeat center !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.2 5.6H8.8V4H7.2V5.6ZM8 14.4C4.472 14.4 1.6 11.528 1.6 8C1.6 4.472 4.472 1.6 8 1.6C11.528 1.6 14.4 4.472 14.4 8C14.4 11.528 11.528 14.4 8 14.4ZM8 0C6.94943 0 5.90914 0.206926 4.93853 0.608964C3.96793 1.011 3.08601 1.60028 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.08601 14.3997 3.96793 14.989 4.93853 15.391C5.90914 15.7931 6.94943 16 8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 6.94943 15.7931 5.90914 15.391 4.93853C14.989 3.96793 14.3997 3.08601 13.6569 2.34315C12.914 1.60028 12.0321 1.011 11.0615 0.608964C10.0909 0.206926 9.05058 0 8 0ZM7.2 12H8.8V7.2H7.2V12Z'/%3E%3C/svg%3E") no-repeat center !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    vertical-align: middle !important;
}

.white-space-pre-line[title]:not([title=""]):hover::after {
    content: attr(title);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-navy);
    color: var(--color-surface);
    padding: 6px 10px;
    border-radius: var(--radius-md);
    font-size: clamp(13px, 0.8125rem + 0.25vw, 14px);
    white-space: nowrap;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    pointer-events: none;
}

/* --- ALERT & BANNER POSITIONING --- */

.xaf-layout,
.main-content,
main {
    margin-top: 20px !important;
}

    .main-content.xaf-flex-auto {
        gap: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        min-height: calc(100vh - 200px) !important;
        display: flex !important;
        flex-direction: column !important;
    }

        .main-content.xaf-flex-auto:has(dxbl-grid):not(:has(.detail-view-content)),
        .main-content.xaf-flex-auto:has(.grid-content):not(:has(.detail-view-content)) {
            margin-top: 24px !important;
        }

/* Align Modal/Popup content to the left of the header */
.dxbl-modal-content,
.dxbl-popup-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

.dxbl-modal-body,
.dxbl-modal-footer,
.dxbl-popup-body {
    padding-left: 1rem !important; /* Standard padding matching header content */
    padding-right: 1rem !important;
    margin-left: 0 !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important; /* Changed from flex-start to allow toolbars to take full width */
}

    /* Ensure Toolbars in footer also align left and take full width to prevent adaptive dots */
    .dxbl-modal-footer .dxbl-toolbar,
    .dxbl-modal-footer .dxbl-btn-toolbar,
    .dxbl-modal-footer .dxbl-toolbar-layout-block {
        width: 100% !important;
        display: flex !important;
        justify-content: flex-start !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* Prevent buttons in modal footer from collapsing into "..." dots menu if space is available */
    .dxbl-modal-footer :is(.dxbl-toolbar, .dxbl-btn-toolbar) .dxbl-toolbar-btn-ellipsis {
        display: none !important;
    }

    .dxbl-modal-footer :is(.dxbl-toolbar, .dxbl-btn-toolbar) .dxbl-toolbar-item:not(.dxbl-toolbar-btn-ellipsis) {
        display: flex !important;
        visibility: visible !important;
    }

.dxbl-modal-footer {
    border-top: none !important;
    padding-bottom: 1.5rem !important;
}

.view-caption-area + div,
.view-caption-area + .main-content,
.main-content .xaf-view-content,
.detail-view-content {
    margin-top: 0px !important;
    padding-top: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    display: flex !important;
    flex-direction: column !important;
}

    /* Remove empty spaces from inside content */
    .xaf-view-content > div:first-child,
    .xaf-view-content .main-toolbar.py-3,
    .detail-view-content > div:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

.main-toolbar.py-3 {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.xaf-view-content .dxbl-tabs {
    margin-top: 0 !important;
}

/* Fix for navigation inside fixed header */

.xaf-alerts-stack,
.xaf-alerts-stack-inner {
    pointer-events: none !important;
    z-index: 100000 !important; /* On top of everything */
    height: auto !important;
    min-height: 0 !important;
}

.xaf-alerts-stack-scrollable {
    pointer-events: auto !important; /* Re-enable for interactions inside alert */
    z-index: 100000 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    background: transparent !important;
}

/* Ensure container inside detail view content also goes to the top */
.detail-view-content:has(.xaf-alerts-stack) {
    display: flex !important;
    flex-direction: column !important;
}

.xaf-alerts-stack {
    order: -2 !important; /* Even higher than our previous alert fix */
    margin-bottom: 10px !important;
}

/* Remove all our forced pointer-events: auto rules that could break cascade */
.dxbl-grid .dxbl-grid-table,
.dxbl-grid-table {
    table-layout: auto !important;
    width: 100% !important;
    min-width: 100% !important;
}

.detail-view-content:has(.xaf-item-fundmaster_name) .force-four-columns .dxbl-fl-item-horizontal {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: baseline !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.detail-view-content:has(.xaf-item-fundmaster_name) .force-four-columns .dxbl-fl-item-horizontal:has(> .dxbl-fl-cpt) > .dxbl-fl-cpt {
    flex: 0 0 240px !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
}

.detail-view-content:has(.xaf-item-fundmaster_name) .force-four-columns .dxbl-fl-item-horizontal:has(> .dxbl-fl-cpt) > .dxbl-fl-ctrl {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

.detail-view-content:has(.xaf-item-fundmaster_name) .force-four-columns .dxbl-fl-item-horizontal:has(> .dxbl-fl-cpt) dxbl-input-editor,
.detail-view-content:has(.xaf-item-fundmaster_name) .force-four-columns .dxbl-fl-item-horizontal:has(> .dxbl-fl-cpt) dxbl-date-edit,
.detail-view-content:has(.xaf-item-fundmaster_name) .force-four-columns .dxbl-fl-item-horizontal:has(> .dxbl-fl-cpt) dxbl-spinedit {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.detail-view-content:has(.xaf-item-fundmaster_name) .force-four-columns .dxbl-fl-item-horizontal .dxbl-fl-cpt,
.detail-view-content:has(.xaf-item-fundmaster_name) .force-four-columns .dxbl-fl-item-horizontal .dxbl-fl-ctrl {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.detail-view-content:has(.xaf-item-fundmaster_name) .force-four-columns .dxbl-fl-item-horizontal .dxbl-fl-cpt {
    margin-bottom: 4px !important;
}

.detail-view-content:has(.xaf-item-fundmaster_name) .force-four-columns .dxbl-fl-item-horizontal:has(> .xaf-item-fundmaster_name) {
    flex-direction: row !important;
    align-items: baseline !important;
}

.detail-view-content:has(.xaf-item-fundmaster_name) .force-four-columns .dxbl-fl-item-horizontal:has(> .xaf-item-fundmaster_name) > .dxbl-fl-cpt {
    flex: 0 0 240px !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    margin-bottom: 0 !important;
}

.detail-view-content:has(.xaf-item-fundmaster_name) .force-four-columns .dxbl-fl-item-horizontal:has(> .xaf-item-fundmaster_name) > .dxbl-fl-ctrl {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

.detail-view-content:has(.xaf-item-fundmaster_name) .force-four-columns .dxbl-fl-item-horizontal:has(> .xaf-item-fundmaster_name) dxbl-input-editor {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.detail-view-content:has(.xaf-item-mainfundasset_fundid) .dxbl-row {
    --dxbl-row-item-spacing-x: 0px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.detail-view-content:has(.xaf-item-mainfundasset_fundid) .dxbl-fl-group {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.detail-view-content:has(.xaf-item-mainfundasset_fundid) .dxbl-row:has(> .dxbl-fl-group:nth-child(4)) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.detail-view-content:has(.xaf-item-mainfundasset_fundid) .dxbl-row:has(> .dxbl-fl-group:nth-child(4)) > .dxbl-fl-group {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.dxbl-grid-table td,
.dxbl-grid-table th span {
        white-space: nowrap !important;
        width: auto !important;
    }

.dxbl-grid:not(.lvw-hidden-footer):not(.nested-content .dxbl-grid) {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100%;
}

.dxbl-grid-table > tbody > tr.dxbl-grid-row:nth-child(odd):not(:hover):not(.dxbl-active):not(.dxbl-selected):not(.dxbl-focused),
.dxbl-grid .dxbl-grid-table > tbody > tr:nth-child(odd):not(:hover):not(.dxbl-active):not(.dxbl-selected):not(.dxbl-focused),
.dxbl-grid-table tr.dxbl-alt-row:not(:hover):not(.dxbl-active):not(.dxbl-selected):not(.dxbl-focused) {
    background-color: var(--color-surface) !important;
}

.dxbl-grid-table > tbody > tr.dxbl-grid-row:nth-child(even):not(:hover):not(.dxbl-active):not(.dxbl-selected):not(.dxbl-focused),
.dxbl-grid .dxbl-grid-table > tbody > tr:nth-child(even):not(:has(.dxbl-grid-empty-data-not-found)):not(:hover):not(.dxbl-active):not(.dxbl-selected):not(.dxbl-focused),
.dxbl-grid-table tr.dxbl-grid-alt-row:not(:hover):not(.dxbl-active):not(.dxbl-selected):not(.dxbl-focused) {
    background-color: var(--color-surface-muted) !important;
}

.dxbl-grid-table tr:hover > td,
.dxbl-grid-table tr.dxbl-grid-row:hover,
.dxbl-grid-table tr.dxbl-active > td,
.dxbl-grid-table tr.dxbl-active,
.dxbl-grid-table tr.dxbl-selected > td,
.dxbl-grid-table tr.dxbl-selected,
.dxbl-grid-table tr.dxbl-focused > td,
.dxbl-grid-table tr.dxbl-focused,
.dxbl-grid-table.dxbl-grid-row-hover-enabled > tbody > tr:not(.dxbl-grid-group-row):not(.dxbl-grid-group-footer-row):not(.dxbl-grid-edit-row):not(.dxbl-grid-empty-row):not(:has(.dxbl-grid-empty-data-not-found)):hover {
    background-color: var(--color-row-selected) !important;
    color: inherit;
}

.dxbl-grid,
.dxbl-grid .dxbl-scroll-viewer,
.dxbl-grid .dxbl-grid-container {
    border: none !important;
    box-shadow: none !important;
}

    /* The right content container */
    .dxbl-grid .dxbl-scroll-viewer-content {
        min-height: 0 !important;
        overflow: auto !important; /* Re-enable internal scroll */
    }

.dxbl-grid-empty-cell,
.dxbl-grid-hidden-empty-cell {
    display: none !important;
}

.dxbl-grid-table,
.dxbl-grid-table tr,
.dxbl-grid-table tr td {
    transition: none !important;
}

.dxbl-grid .dxbl-grid-table > thead > tr > th,
.dxbl-grid .dxbl-grid-header-row > th,
.dxbl-grid .dxbl-grid-header-row .dxbl-grid-header-text,
.dxbl-grid-header > th {
    font: var(--text-list-header) !important;
    text-transform: none !important;
    color: var(--color-text-primary) !important;
    border-left: none !important;
    border-right: none !important;
    background-color: var(--color-surface) !important;
}

/* 2IG: Multi-level Grid Header Styles */
/* 1) First header row: Light gray background + vertical separators ONLY if there are at least 2 rows (has multilevel groups) */
.dxbl-grid .dxbl-grid-table > thead:has(tr:nth-child(2)) > tr:first-child > th.dxbl-grid-header {
    background-color: var(--color-surface-muted, #F5F5F5) !important;
    border-right: 1px solid var(--color-grid-line, #D6D6D6) !important;
}

    /* Ensure the last cell in the first row doesn't have a right border if it's the edge */
    .dxbl-grid .dxbl-grid-table > thead:has(tr:nth-child(2)) > tr:first-child > th.dxbl-grid-header:last-of-type {
        border-right: none !important;
    }

/* 2) Hover override for multi-level headers */
.dxbl-grid .dxbl-grid-table > thead > tr > th:hover,
.dxbl-grid .dxbl-grid-header-row > th:hover,
.dxbl-grid-header > th:hover,
.dxbl-grid > .dxbl-scroll-viewer th:hover {
    background-color: var(--color-row-selected) !important;
}

.dxbl-treeview,
.dxbl-treeview-container,
.dxbl-treeview-container .dxbl-scroll-viewer,
.dxbl-treeview-container .dxbl-scroll-viewer-content,
.dxbl-toolbar-dropdown-item-list,
.dxbl-toolbar-dropdown-item-list .dxbl-toolbar-dropdown-item,
.dxbl-toolbar-dropdown-item-list .dxbl-toolbar-menu-item {
    background-color: var(--color-surface) !important;
    color: var(--color-navy) !important;
    overflow: hidden !important;
}

    .dxbl-treeview-container .dxbl-treeview-item-text,
    .dxbl-treeview-container .dxbl-text,
    .dxbl-treeview-container label.dxbl-text {
        color: var(--color-navy) !important;
    }

/* Context menu in List View (right mouse button) --- */
.dxbl-dropdown-dialog.dxbl-context-menu-dropdown,
.dxbl-dropdown-dialog.dxbl-context-menu-dropdown .dxbl-scroll-viewer,
.dxbl-dropdown-dialog.dxbl-context-menu-dropdown .dxbl-scroll-viewer-content,
.dxbl-dropdown-dialog.dxbl-context-menu-dropdown .dxbl-dropdown-body {
    background-color: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
    border: 1px solid rgba(0,0,0,.15) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.175) !important;
}

.dxbl-context-menu-dropdown img.xaf-context-menu-item-icon,
.dxbl-context-menu-dropdown .dxbl-image,
.dxbl-context-menu-dropdown .xaf-image,
.dxbl-itemlist-dropdown .dxbl-image,
.dxbl-itemlist-dropdown img {
    filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(1352%) hue-rotate(175deg) brightness(96%) contrast(101%) !important;
}

/* Text and icons in the context menu */
.dxbl-context-menu-dropdown .dxbl-context-menu-item-text,
.dxbl-context-menu-dropdown .dxbl-context-menu-item-text * {
    color: var(--color-text-primary) !important;
}

.dxbl-context-menu-dropdown .dxbl-context-menu-item:hover {
    background-color: var(--color-surface-muted) !important;
}

/* Animation for the dropdown */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Styles for view captions with updated Figma specifications */
.xaf-view-caption-sm,
.xaf-view-caption-lg {
    color: var(--color-accent-dark);
    font-family: var(--font-primary) !important;
    font: var(--text-h1) !important;
    line-height: normal !important;
    letter-spacing: 0% !important;
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
}

/* Aligning text and image in view-caption-area (Global) */
.view-caption-area {
    /* Keep the caption aligned with the horizontal content gutter. */
    padding: 80px var(--inradr-content-gutter) 16px !important;
    position: relative !important;
    z-index: 10 !important;
}

body:has(.dxbl-grid):not(:has(.detail-view-content)):not(:has(.xaf-dashboard-view)) .view-caption-area {
    padding-bottom: 20px !important;
}

.main-content.xaf-flex-auto:not(:has(.detail-view-content)) {
    padding-left: var(--inradr-content-gutter) !important;
    padding-right: var(--inradr-content-gutter) !important;
    margin-bottom: 10px !important;
}

/* DetailView content uses Bootstrap utility classes (px-2/px-sm-3),
   so apply the same 32px horizontal gutter as the view caption. */
.main-content.xaf-flex-auto:has(.detail-view-content),
.main-content.xaf-flex-auto:has(.xaf-dashboard-container, .xaf-dashboard-view) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-left: var(--inradr-content-gutter) !important;
    padding-right: var(--inradr-content-gutter) !important;
}

.main-toolbar {
    padding-left: var(--inradr-content-gutter) !important;
    padding-right: var(--inradr-content-gutter) !important;
}

.dxbl-pager-container {
    display: none !important;
}

.view-caption-caption-area,
.xaf-caption-container {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    gap: 8px;
}

.xaf-object-caption {
    font: var(--text-h3) !important;
    line-height: 1.4 !important;
    color: var(--color-text-muted) !important;
    white-space: pre-wrap !important;
    display: block !important;
    position: relative;
}

    .xaf-object-caption::first-line {
        font: var(--text-display) !important;
        color: var(--color-navy) !important;
        line-height: 1.2 !important;
    }

    .xaf-object-caption.xaf-ellipsis,
    .xaf-object-caption .xaf-ellipsis,
    .xaf-ellipsis {
        white-space: pre-wrap;
        overflow: visible !important;
        text-overflow: clip !important;
        display: inline-block !important;
        word-break: break-word !important;
    }

.view-caption-area:has(.navigate-back-icon-container) .xaf-caption-container {
    margin-left: 0 !important;
}

.dxbl-group {
    border: none;
}

.dxbl-group-header.dxbl-fl-caption-tmpl {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

    /* --- GROUP HEADERS - MODERN LOOK & TOOLTIP FIX V21_SNUG_TOOLTIP --- */
    .dxbl-group > .dxbl-group-header {
        margin-bottom: 2px !important;
    }

        .dxbl-group > .dxbl-group-header::before {
            display: none !important;
        }

        .dxbl-group > .dxbl-group-header > .dxbl-text {
            color: var(--color-navy);
            font: var(--text-h2);
            position: relative;
            display: flex !important;
            align-items: center;
            width: 100% !important;
            padding-bottom: 8px;
            overflow: visible !important;
        }

            .dxbl-group > .dxbl-group-header > .dxbl-text::after {
                content: "";
                position: absolute;
                left: 0;
                bottom: 0;
                width: 80px;
                height: 4px;
                background-color: var(--color-accent);
                border-radius: var(--radius-xs);
            }

.dxbl-group-header .dxbl-text [title],
.dxbl-group-header .dxbl-text [title] * {
    pointer-events: none !important;
}

    .dxbl-group-header .dxbl-text [title]:not([title=""]) {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
    }

        .dxbl-group-header .dxbl-text [title]:not([title=""])::after {
            content: "" !important;
            display: inline-block !important;
            position: relative !important;
            width: 20px !important;
            height: 20px !important;
            margin-left: 10px !important;
            background-color: var(--color-navy) !important;
            -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.2 5.6H8.8V4H7.2V5.6ZM8 14.4C4.472 14.4 1.6 11.528 1.6 8C1.6 4.472 4.472 1.6 8 1.6C11.528 1.6 14.4 4.472 14.4 8C14.4 11.528 11.528 14.4 8 14.4ZM8 0C6.94943 0 5.90914 0.206926 4.93853 0.608964C3.96793 1.011 3.08601 1.60028 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.08601 14.3997 3.96793 14.989 4.93853 15.391C5.90914 15.7931 6.94943 16 8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 6.94943 15.7931 5.90914 15.391 4.93853C14.989 3.96793 14.3997 3.08601 13.6569 2.34315C12.914 1.60028 12.0321 1.011 11.0615 0.608964C10.0909 0.206926 9.05058 0 8 0ZM7.2 12H8.8V7.2H7.2V12Z'/%3E%3C/svg%3E") no-repeat center !important;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7.2 5.6H8.8V4H7.2V5.6ZM8 14.4C4.472 14.4 1.6 11.528 1.6 8C1.6 4.472 4.472 1.6 8 1.6C11.528 1.6 14.4 4.472 14.4 8C14.4 11.528 11.528 14.4 8 14.4ZM8 0C6.94943 0 5.90914 0.206926 4.93853 0.608964C3.96793 1.011 3.08601 1.60028 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.08601 14.3997 3.96793 14.989 4.93853 15.391C5.90914 15.7931 6.94943 16 8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 6.94943 15.7931 5.90914 15.391 4.93853C14.989 3.96793 14.3997 3.08601 13.6569 2.34315C12.914 1.60028 12.0321 1.011 11.0615 0.608964C10.0909 0.206926 9.05058 0 8 0ZM7.2 12H8.8V7.2H7.2V12Z'/%3E%3C/svg%3E") no-repeat center !important;
            -webkit-mask-size: contain !important;
            mask-size: contain !important;
        }

.dxbl-group-header .dxbl-text:hover [title]:not([title=""])::before {
    content: attr(title) !important;
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-left: 8px;
    background-color: var(--color-navy) !important;
    color: var(--color-surface) !important;
    padding: 12px 16px !important;
    border-radius: var(--radius-lg) !important;
    font: var(--text-body) !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    width: 280px !important;
    z-index: 1000000 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
    text-align: left !important;
    display: block !important;
    pointer-events: none !important;
    visibility: visible !important;
}

.dxbl-fl.dxbl-fl-group, .dxbl-group, .dxbl-group-header {
    z-index: auto !important;
}

    .dxbl-fl .dxbl-fl-group > .dxbl-group > .dxbl-group-header:not(.dxbl-fl-group-header-tmpl) {
        border: none;
    }

.dxbl-tabs {
    --dxbl-tabs-tab-hover-color: var(--color-text-secondary) !important;
    --dxbl-tabs-tab-hover-bg: transparent !important;
    --dxbl-tabs-tab-selected-color: var(--color-accent) !important;
    --dxbl-tabs-tab-selected-bg: transparent !important;
    --dxbl-tabs-color: var(--color-text-secondary) !important;
    --dxbl-tabs-bg: transparent !important;
}

.dxbl-tabs-item .dxbl-tabs-text-container > .dxbl-tabs-space-reservation,
.dxbl-tabs-item .dxbl-tabs-text-container > div:nth-child(2) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
}

.dxbl-tabs-item .dxbl-tabs-text-container {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    width: auto !important;
    position: relative !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
    align-items: baseline !important;
}

    .dxbl-tabs-item .dxbl-tabs-text-container > div:not(.dxbl-tabs-space-reservation) {
        display: inline-block !important;
        position: relative !important;
        width: auto !important;
        line-height: 1.2 !important;
    }

.dxbl-tabs > .dxbl-tabs-tablist > ul > li,
.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    vertical-align: top !important;
}

.dxbl-tabs-item {
    background-color: transparent !important;
    border: none !important;
    padding: 0 12px !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: visible !important;
    display: inline-flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    height: 32px !important;
    padding-top: 6px !important;
}

    .dxbl-tabs-item.dxbl-active .dxbl-tabs-text-container::after,
    .dxbl-tabs-item:hover .dxbl-tabs-text-container::after {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: -6px !important;
        height: 3px !important;
        border-radius: var(--radius-xs) !important;
        display: block !important;
        z-index: 100 !important;
        pointer-events: none !important;
    }

    /* Line color for ACTIVE tab: light blue */
    .dxbl-tabs-item.dxbl-active .dxbl-tabs-text-container::after {
        background-color: var(--color-accent) !important;
    }

    /* Line color on hover: gray */
    .dxbl-tabs-item:not(.dxbl-active):hover .dxbl-tabs-text-container::after {
        background-color: var(--color-text-secondary) !important;
    }

    .dxbl-tabs-item.dxbl-active,
    .dxbl-tabs-item.dxbl-active *,
    .dxbl-tabs-item.dxbl-active .dxbl-tabs-text-overflow {
        color: var(--color-accent) !important;
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    /* Completely clear default DevExpress styles on all levels */
    .dxbl-tabs-item::after,
    .dxbl-tabs-item::before,
    .dxbl-tabs-item:hover,
    .dxbl-tabs-item.dxbl-active {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }

    .dxbl-tabs-item .dxbl-tabs-text-container::before {
        /* Spacing below tabs */
        box-shadow: none !important;
        display: block !important;
    }

.dxbl-tabs > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item:hover::after,
.dxbl-tabs > .dxbl-tabs-tablist > ul > li > .dxbl-tabs-item:hover::after {
    background-color: transparent !important;
    height: 0 !important;
}

/* Disable the previous underline on the item itself */
.dxbl-tabs.dxbl-tabs-top > .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li > .dxbl-tabs-item.dxbl-active::after,
.dxbl-tabs > .dxbl-tabs-tablist > ul > li > .dxbl-tabs-item.dxbl-active::after {
    display: none !important;
}

/* Add spacing below tabs to separate from the content (info boxes) */
.dxbl-tabs-top {
    margin-bottom: 32px !important;
}

/* Line pseudo-element, visible only on hover */
.dxbl-tabs-item:not(.dxbl-active):not(.dxbl-disabled):not(:disabled)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: transparent;
    pointer-events: none;
}

/* Visible line only on hover */
.dxbl-tabs-item:not(.dxbl-active):not(.dxbl-disabled):not(:disabled):hover::after {
    background-color: var(--color-surface-muted);
}

.dxbl-tabs-item:not(.dxbl-active):not(.dxbl-disabled):not(:disabled)::before {
    content: none !important;
    background: none !important;
}

.dxbl-tabs > .dxbl-tabs-tablist.dxbl-tabs-tablist-scrollable {
    border: none;
}
/* Styles for active tab icon with bright white filter */
.dxbl-active img.dxbl-image.xaf-layout-tab-icon {
    min-width: 25px;
    min-height: 20px;
    max-width: 25px;
    max-height: 20px;
    margin-right: 10px;
    color: var(--color-surface);
    filter: brightness(10000%);
}
/* --- DEVEXPRESS IMAGE EDITOR: Reset i RWD --- */
.xaf-image-editor {
    & .img-thumbnail {
        width: 100% !important;
        max-height: 400px;
        overflow: hidden;
        padding: 0 !important;
        border: none !important;
        border-radius: var(--radius-sm) !important;
        background: transparent !important;

        & .xaf-image-container {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
        }

        & img.xaf-component-image {
            width: 100% !important;
            height: auto !important;
            max-height: 400px !important;
            object-fit: cover !important;
            object-position: center;
            display: block;
            padding-top: 1.5rem; /* ~24px jeśli 1rem = 16px */
            border-radius: var(--radius-sm) !important; /* Consistent 8px on image itself */
        }
        /* Ukrycie kontenera gdy brak obrazka */
        &:has(img.xaf-component-image[src=""]),
        &:has(img.xaf-component-image:not([src])) {
            display: none !important;
        }
    }
}

/* Styles for inactive tab icon with blue tint and opacity */
img.dxbl-image.xaf-layout-tab-icon {
    filter: brightness(0) saturate(100%);
}

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.dxbl-grid .dxbl-grid-table > tbody > tr {
    border: none;
}

    .dxbl-grid .dxbl-grid-table > tbody > tr:not(:has(.dxbl-grid-empty-data-not-found)):hover,
    .dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-active,
    .dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-focused,
    .dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-selected {
        background-color: var(--color-row-selected) !important;
    }

.dxbl-grid .dxbl-grid-table > tbody:nth-child(2) > tr:first-child > td, .dxbl-grid .dxbl-grid-table > tbody:nth-child(2) > tr:first-child > th, .dxbl-grid .dxbl-grid-table > tfoot:nth-child(2) > tr:first-child > td, .dxbl-grid .dxbl-grid-table > tfoot:nth-child(2) > tr:first-child > th, .dxbl-grid .dxbl-grid-table > thead:nth-child(2) > tr:first-child > td, .dxbl-grid .dxbl-grid-table > thead:nth-child(2) > tr:first-child > th {
    background: var(--color-surface);
}

/* Remove hover on "No Data" row in ListView */
.dxbl-grid .dxbl-grid-table > tbody > tr:has(.dxbl-grid-empty-data-not-found),
.dxbl-grid .dxbl-grid-table > tbody > tr:has(.dxbl-grid-empty-data-not-found):hover,
.dxbl-grid .dxbl-grid-table > tbody > tr:has(.dxbl-grid-empty-data-not-found):hover > td,
.dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-empty-row,
.dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-empty-row:hover,
.dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-empty-row:hover > td {
    background-color: transparent !important;
    background: transparent !important;
    cursor: default !important;
}

tr:nth-child(even).cursor-pointer {
    background-color: var(--color-row-selected);
    transition: background-color 0.3s ease;
    cursor: pointer;
}

    tr:nth-child(even).cursor-pointer:hover {
        background-color: var(--color-row-selected);
    }

/* Rule applies ONLY if .lvw-hidden-header-footer is NOT present (to allow auto-height for short lists) */
.dxbl-fl-ctrl .dxbl-grid:not(.lvw-hidden-header-footer) > .dxbl-scroll-viewer,
.nested-content .dxbl-grid:not(.lvw-hidden-header-footer) > .dxbl-scroll-viewer {
    min-height: 0px !important;
    display: flex !important;
    flex-direction: column !important;
}

    /* Ensure the internal content can scroll if it exceeds max-height */
    .dxbl-fl-ctrl .dxbl-grid:not(.lvw-hidden-header-footer) > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content,
    .nested-content .dxbl-grid:not(.lvw-hidden-header-footer) > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content {
        flex-grow: 1 !important;
    }

/* Ensure the internal content can scroll if it exceeds max-height (Match site.css) */
.nested-content .dxbl-grid:not(.lvw-hidden-header-footer) > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content {
    flex-grow: 1 !important;
}

.dxbl-grid-container {
    overflow: hidden !important;
}

/* Restore flex for indented scrollable tables (so their layout is not broken) */
.nested-content .dxbl-grid:not(.lvw-hidden-header-footer) > .dxbl-scroll-viewer {
    display: flex !important;
}

/* NAVCHART */
.dxc-markers {
    fill: var(--color-navy) !important;
    stroke: var(--color-navy) !important;
}

.dxbl-chart-root .dxbl-widget-container {
    padding: 0 !important;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* Table occupying the full width */
.dxbl-grid > .dxbl-scroll-viewer table {
    display: table;
    width: 100%;
    min-width: 100%;
    table-layout: auto; /* Flexible column width adjustment */
}

/* Ensuring full accessibility of table content */
.dxbl-grid > .dxbl-scroll-viewer tbody {
    width: 100%;
}

.dxbl-grid > .dxbl-scroll-viewer tr {
    display: table-row;
}

.dxbl-grid > .dxbl-scroll-viewer th,
.dxbl-grid > .dxbl-scroll-viewer th span,
.dxbl-grid > .dxbl-scroll-viewer th .dxbl-grid-header-content,
.dxbl-grid > .dxbl-scroll-viewer th .dxbl-image,
.dxbl-grid > .dxbl-scroll-viewer th .dxbl-image use {
    text-align: left;
    text-transform: none !important;
    font: var(--text-list-header) !important;
    color: var(--color-text-primary) !important;
    fill: var(--color-text-primary) !important;
    border-left: none !important;
    border-right: none !important;
}

/* Settings for table cells - EXCLUDING VIRTUAL SPACERS */
.dxbl-grid tr:not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]) td,
.dxbl-grid-table th,
.dxbl-grid-table td:not([dxbl-top-virtual-spacer-element] td):not([dxbl-bottom-virtual-spacer-element] td),
.dxbl-grid tr:not([dxbl-top-virtual-spacer-element]):not([dxbl-bottom-virtual-spacer-element]) {
    padding: 0px 6px !important;
    height: var(--height-table-row) !important;
    max-height: var(--height-table-row) !important;
    line-height: var(--height-table-row) !important;
    box-sizing: border-box !important;
}

.dxbl-grid td > *, .dxbl-grid-table td > * {
    line-height: normal !important;
    vertical-align: middle !important;
}

/* Ensure virtual spacer rows can have their height set by DevExpress inline styles.
   NEVER use !important height here as it breaks virtual scrolling calculations. */
tr[dxbl-top-virtual-spacer-element],
tr[dxbl-bottom-virtual-spacer-element],
tr[dxbl-top-virtual-spacer-element] td,
tr[dxbl-bottom-virtual-spacer-element] td {
    max-height: none !important;
    padding: 0 !important;
    border: none !important;
    line-height: 0 !important;
}

.nested-toolbar:empty, .main-toolbar:empty {
    display: none !important;
}

.dxbl-fl .dxbl-fl-cpt {
    font-size: 14px;
    color: var(--color-surface-muted);
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.dxbl-group-body-content {
    padding: 0 !important;
    margin: 8px 0; /* gap between rows */
}

    /* --- Side-by-Side Items (50% Label, 50% Editor) --- */
    .dxbl-group-body-content .dxbl-row {
        row-gap: 4px !important;
    }

    .dxbl-group-body-content .dxbl-fl-item-horizontal {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: baseline !important;
        width: 100% !important;
    }

        .dxbl-group-body-content .dxbl-fl-item-horizontal .dxbl-fl-cpt {
            width: 240px !important;
            max-width: 240px !important;
            min-width: 240px !important;
            flex-shrink: 0; /* Label cannot shrink */
            font: var(--text-body) !important;
            color: var(--color-text-secondary) !important;
            margin-bottom: 0 !important;
        }

        .dxbl-group-body-content .dxbl-fl-item-horizontal .dxbl-fl-ctrl {
            flex-grow: 1;
        }

            .dxbl-group-body-content .dxbl-fl-item-horizontal .dxbl-fl-ctrl.dxbl-fl-ctrl-nc {
                width: 100% !important;
                max-width: 100% !important;
                flex-basis: 100%;
            }

        .dxbl-group-body-content .dxbl-fl-item-horizontal:has(.dxbl-fl-ctrl-nc) {
            flex-wrap: wrap !important;
            align-items: stretch !important;
        }

            .dxbl-group-body-content .dxbl-fl-item-horizontal:has(.dxbl-fl-ctrl-nc) .dxbl-fl-cpt {
                width: 100% !important;
                max-width: 100% !important;
                margin-bottom: 8px !important;
            }

/* Checked state — accent fill */
.dxbl-checkbox:not(.dxbl-checkbox-unchecked) .dxbl-checkbox-check-element,
.dxbl-check:not(.dxbl-checkbox-unchecked) .dxbl-checkbox-check-element {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
}
/* Force checkmark to be white in checked state */
.dxbl-checkbox:not(.dxbl-checkbox-unchecked) .dxbl-checkbox-check-element::after,
.dxbl-check:not(.dxbl-checkbox-unchecked) .dxbl-checkbox-check-element::after {
    border-color: var(--color-surface) !important;
    filter: brightness(0) invert(1) !important;
}

/* Disabled State */
.dxbl-checkbox.dxbl-disabled .dxbl-checkbox-check-element,
.dxbl-check.dxbl-disabled .dxbl-checkbox-check-element,
.dxbl-checkbox[disabled] .dxbl-checkbox-check-element {
    background-color: var(--color-surface-muted) !important;
    border-color: var(--color-border) !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* --- Global Form Item Layout (Consolidated) --- */
.dxbl-fl .dxbl-fl-item:not(.dxbl-fl-item-horizontal) {
    margin-top: 4px;
    margin-bottom: 24px;
    font: var(--text-h3);
    color: var(--color-navy) !important;
}

.portfoliobestand .dxbl-fl-group .dxbl-fl-item:not(.dxbl-fl-item-horizontal) {
    padding-left: 20px !important;
}

/* Force color for dxbl-fl-cpt labels */
label.dxbl-fl-cpt {
    color: var(--color-navy) !important;
    font-weight: 500 !important;
}

/* Splash Screen Progress */


@keyframes slide {
    0% {
        left: -40%;
    }

    100% {
        left: 100%;
    }
}

/* --- ListView Grid Fixes --- */
/* Target only the top-level multi-column headers (colspan > 1) for centering */
.dxbl-grid-header[colspan]:not([colspan="1"]) .dxbl-grid-header-content {
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    width: 100% !important;
}

/* Ensure standard single-column headers (bottom row) stay left-aligned */
.dxbl-grid-header:not([colspan]),
.dxbl-grid-header[colspan="1"] {
    text-align: left !important;
}

/* Re-enable toolbar item icons */
.xaf-toolbar-item-icon.dxbl-image {
    display: inline-block !important;
    padding: initial !important;
    margin: initial !important;
    width: initial !important;
}

/* --- GLOBAL DROPDOWN MANAGEMENT --- */
/* Global Nuclear Reset: Everything White by Default (Filters, Grid, Context Menu) */
.dxbl-dropdown,
.dxbl-dropdown-dialog,
.dxbl-list-box {
    background-color: var(--color-surface) !important;
    color: var(--color-text-muted) !important;
	margin-bottom:8px;
}

/* Tab container - additional optimizations */

/* Fix for icons with blue background squares (Action Icons / Context Menu Icons) */
.dxbl-image,
.dxbl-context-menu-item-icon,
.xaf-context-menu-item-icon,
.dxbl-menu-item-icon {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
}

.dxbl-dropdown-dialog .dxbl-menu-list-item:hover,
.dxbl-dropdown-dialog [class*="menu-item"]:hover {
    background-color: transparent !important;
    background: transparent !important;
}

.dxbl-dropdown-dialog .dxbl-menu-item {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    height: 30px !important;
}

.dxbl-context-menu-dropdown,
.dxbl-date-edit-dropdown,
.dxbl-combobox-dropdown {
    background-color: var(--color-surface) !important;
    border: 1px solid #dee2e6 !important;
}

.dxbl-scroll-viewer,
.dxbl-scroll-viewer-content {
    background: transparent !important;
    border: none !important;
}

/* --- Rent Roll Tabs Styles (V13: Unified Modern Aesthetic) --- */
.force-four-columns > .dxbl-row,
.force-four-columns > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content > .dxbl-row,
.dxbl-group-body-content:not(.uebersicht *):not(.uebersicht):not(.portfoliobestand *):not(.portfoliobestand) > .dxbl-row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
}

    .dxbl-group-body-content:not(.uebersicht *):not(.uebersicht):not(.portfoliobestand *):not(.portfoliobestand) > .dxbl-row > .dxbl-fl-item,
    .dxbl-group-body-content:not(.uebersicht *):not(.uebersicht):not(.portfoliobestand *):not(.portfoliobestand) > .dxbl-row > .dxbl-col {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .force-four-columns > .dxbl-row > .dxbl-fl-item,
    .force-four-columns > .dxbl-row > .dxbl-col,
    .force-four-columns > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content > .dxbl-row > .dxbl-fl-item,
    .force-four-columns > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content > .dxbl-row > .dxbl-col {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

/* Custom Checkbox labels (ja/nein) for ViewMode */
.dxbl-checkbox-display-view-checked,
.dxbl-checkbox-display-view-unchecked,
.dxbl-checkbox-display-view-checked::before,
.dxbl-checkbox-display-view-unchecked::before,
.dxbl-checkbox-display-view-checked::after,
.dxbl-checkbox-display-view-unchecked::after,
.dxbl-checkbox-display-view-checked > div,
.dxbl-checkbox-display-view-unchecked > div,
.dxbl-checkbox-display-view-checked > div::before,
.dxbl-checkbox-display-view-unchecked > div::before,
.dxbl-checkbox-display-view-checked > div::after,
.dxbl-checkbox-display-view-unchecked > div::after {
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
    display: flex !important;
}

    .dxbl-checkbox-display-view-checked > div svg {
        display: none !important;
    }

    .dxbl-checkbox-display-view-checked > div::after {
        content: "ja";
        display: inline-block;
    }

    .dxbl-checkbox-display-view-unchecked > div::after {
        content: "nein";
        display: inline-block;
    }

#blazor-error-ui {
    display: none !important;
    visibility: hidden !important;
    background: inherit;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 100001;
}

/* --- INRADR ACTION SWITCH (LOOKTHROUGH) --- */
.dxbl-expandable-container.dxbl-group-body {
    padding-top: 0 !important;
}

    .dxbl-expandable-container.dxbl-group-body > .dxbl-group-body-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

        .dxbl-expandable-container.dxbl-group-body > .dxbl-group-body-content > .dxbl-row:first-child,
        .dxbl-expandable-container.dxbl-group-body > .dxbl-group-body-content > .dxbl-row:first-child > .dxbl-fl-item {
            margin-top: 0 !important;
        }


/* DEVGUI-RESTORE – vom Designer ersatzlos entfernt; FormLayout-Spalten aller DetailViews ausserhalb von Tabs,
   ausser Gruppen mit uebersicht/portfoliobestand (PerformanceView-Dashboards, TenantView). Entscheidung offen
   (siehe docs/context/design/css-devgui-migration-report.md, R3).
   Vorher: inradr-design.css:1399-1405 (Stand 49e6235), dortiger Kommentar:
   "ALIGN GROUPS (FORM LAYOUT GROUPS) TO STANDARD ELEMENTS - Ensures that dxbl-form-layout-group
   acting as columns have consistent outer margins and spacing"
.dxbl-fl-group.dxbl-col:not(.uebersicht *):not(.uebersicht):not(.portfoliobestand *):not(.portfoliobestand),
.dxbl-fl-group[class*="dxbl-col-"]:not(.uebersicht *):not(.uebersicht):not(.portfoliobestand *):not(.portfoliobestand) {
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .8);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .75);
}
*/

/* If inside tabs, use smaller padding */
.dxbl-tabs .dxbl-fl-group.dxbl-col,
.dxbl-tabs .dxbl-fl-group[class*="dxbl-col-"] {
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
}

/* Segment tabs have direct group columns without the InvestmentVehicle
   four-column wrapper. Keep the outer tab inset, but remove the inner row
   compensation that otherwise shifts content 16px outside each group. */
#main-view-content .detail-view-content:has(.xaf-item-segment_fund_fundid) .dxbl-group-body-content > .dxbl-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#main-view-content .detail-view-content:has(.xaf-item-segment_fund_fundid) .dxbl-group-body-content > .dxbl-row > .dxbl-fl-item,
#main-view-content .detail-view-content:has(.xaf-item-segment_fund_fundid) .dxbl-group-body-content > .dxbl-row > .dxbl-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Add equal spacing at top and bottom of menu (so hover doesn't touch panel edge) */
.dxbl-itemlist-dropdown .dxbl-menu-item-list,
.dxbl-dropdown-dialog.dxbl-menu-navbar-dropdown .dxbl-menu-item-list,
.dxbl-dropdown-dialog.dxbl-menu-navbar-dropdown .dxbl-scroll-viewer-content {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Spinner border color to navy */
.spinner-border {
    color: var(--color-navy) !important;
    border-color: var(--color-navy) !important;
    border-right-color: transparent !important;
}

/* Accordion sections, info panels, content areas - Flat (Level 0) */
.accordion {
    background: var(--elevation-0-bg);
    border: var(--elevation-0-border);
    box-shadow: var(--elevation-0-shadow);
}

/* Fix for invisible icons in file upload/attachment buttons */
.xaf-append-image-button .xaf-image,
.dxbl-btn:not(.account-button):not(.navigate-back-icon-container) .xaf-image {
    background-color: var(--color-text-primary, #1F2324) !important;
}

/* KPI cards, form inputs, table borders - Bordered (Level 1) */
.kpi-card, .form-field input {
    border: var(--elevation-1-border);
}

/* Toasts, Dropdowns - Raised (Level 2) */
.toast, .dropdown {
    box-shadow: var(--elevation-2-shadow);
}

/* Modals, Full-Screen Sheets - Overlay (Level 3) */
.modal-card {
    box-shadow: var(--elevation-3-shadow);
    border: var(--elevation-3-border);
}

/* ==========================================================================
   ALERTS & SYSTEM NOTIFICATIONS
   ========================================================================== */

/* Fix for alert positioning: Move it to the very top and ensure it remains sticky */
.detail-view-content:has(.xaf-alert-text-container) {
    display: flex !important;
    flex-direction: column !important;
    padding-top: 0 !important;
    overflow: visible !important; /* Ensure children can overflow if needed for shadows/positioning */
}

.xaf-alert-text-container {
    order: -1 !important; /* Forces the alert to the top of the flex container */
    position: sticky !important;
    top: 0 !important;
    z-index: 100000 !important; /* High z-index to stay above other UI layers */
}

/* Ensure the alert-text itself is visible and padded */
.xaf-alert-text {
    display: block !important;
    padding: 5px !important;
}

/* ========================================================================== */
/* DETAILVIEW HORIZONTAL ALIGNMENT                                            */
/* ========================================================================== */

/* The caption and .main-content already share the 32px outer gutter. Remove
   only the generated form-layout gutters that otherwise shift the tab strip
   and the first content row to the right. */
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-fl-group:has(> .dxbl-row > .dxbl-fl-gt > .dxbl-tabs),
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-fl-group:has(> .dxbl-row > .dxbl-fl-gt > .dxbl-tabs) > .dxbl-row,
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-fl-group:has(> .dxbl-row > .dxbl-fl-gt > .dxbl-tabs) > .dxbl-row > .dxbl-fl-gt {
    margin-inline: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* The clipped edges originate one level higher: the generated form layout
   places the tab group inside a Bootstrap-style row. Normalize that row too,
   rather than compensating with asymmetric fixed margins. */
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-fl:has(> .dxbl-row > .dxbl-fl-group:has(> .dxbl-row > .dxbl-fl-gt > .dxbl-tabs)) > .dxbl-row,
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-fl:has(> .dxbl-row > .dxbl-fl-group:has(> .dxbl-row > .dxbl-fl-gt > .dxbl-tabs)) > .dxbl-row > .dxbl-fl-group {
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    box-sizing: border-box !important;
}

.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-fl:has(> .dxbl-row > .dxbl-fl-group:has(> .dxbl-row > .dxbl-fl-gt > .dxbl-tabs)) {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    overflow: visible !important;
}

/* DevExpress reserves horizontal space on the tab-list and on every tab
   item. Keep the normal spacing between tabs, but make the first tab begin
   exactly on the same vertical line as the view caption. */
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-tabs-tablist,
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-tabs-tablist > .dxbl-scroll-viewer,
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-tabs,
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-tabs-tablist,
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-tabs-tablist > .dxbl-scroll-viewer {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    box-sizing: border-box !important;
}

.main-content.xaf-flex-auto:has(.detail-view-content),
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;
}

.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
}

.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    inline-size: max-content !important;
    min-inline-size: 100% !important;
    max-inline-size: none !important;
}

.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > ul > li:first-child > .dxbl-tabs-item {
    padding-left: 0 !important;
}

/* KPI row: outer borders use the same left/right origin as the tab strip;
   internal 8px spacing remains between cards. */
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-fl-group:has(> .dxbl-row > .dxbl-fl-item > .dxbl-fl-ctrl > .inradr-kpi-card) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-fl-group:has(> .dxbl-row > .dxbl-fl-item > .dxbl-fl-ctrl > .inradr-kpi-card) > .dxbl-row {
    margin-left: 5px !important;
    margin-right: 0 !important;
    inline-size: calc(100% - 5px) !important;
    max-inline-size: calc(100% - 5px) !important;
    box-sizing: border-box !important;
}

.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-fl-group:has(> .dxbl-row > .dxbl-fl-item > .dxbl-fl-ctrl > .inradr-kpi-card) > .dxbl-row > .dxbl-fl-item,
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-fl-group:has(> .dxbl-row > .dxbl-fl-item > .dxbl-fl-ctrl > .inradr-kpi-card) > .dxbl-row > .dxbl-col {
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
}

.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-fl-group:has(> .dxbl-row > .dxbl-fl-item > .dxbl-fl-ctrl > .inradr-kpi-card) > .dxbl-row > :first-child {
    padding-left: 0 !important;
}

.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-fl-group:has(> .dxbl-row > .dxbl-fl-item > .dxbl-fl-ctrl > .inradr-kpi-card) > .dxbl-row > :last-child {
    padding-right: 8px !important;
}

/* Keep the KPI row aligned with the other four-column DetailView groups:
   add a small outer buffer to the first and last card and compensate their
   flex basis so the four cards remain within the row width. */
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-fl-group:has(> .dxbl-row > .dxbl-fl-item > .dxbl-fl-ctrl > .inradr-kpi-card) > .dxbl-row > :first-child {
    margin-left: 15px !important;
    flex-basis: calc(25% - 15px) !important;
    max-width: calc(25% - 15px) !important;
}

.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-fl-group:has(> .dxbl-row > .dxbl-fl-item > .dxbl-fl-ctrl > .inradr-kpi-card) > .dxbl-row > :last-child {
    margin-right: 15px !important;
    flex-basis: calc(25% - 15px) !important;
    max-width: calc(25% - 15px) !important;
}





/* Four-column DetailView groups: the group header, underline, labels, and
   controls all share the same left origin. This applies to both
   InvestmentVehicle and Property DetailViews. */
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .force-four-columns {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .force-four-columns > .dxbl-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Keep a visible outer buffer on the first and last group as well. Reduce
   their flex basis by the same amount so the four groups stay on one row. */
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content:not(:has(.xaf-item-fundmaster_name)) .force-four-columns > .dxbl-row > :first-child,
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content:not(:has(.xaf-item-fundmaster_name)) .force-four-columns > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content > .dxbl-row > :first-child {
    margin-left: 25px !important;
    flex-basis: calc(25% - 25px) !important;
    max-width: calc(25% - 25px) !important;
}

.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content:not(:has(.xaf-item-fundmaster_name)) .force-four-columns > .dxbl-row > :last-child,
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content:not(:has(.xaf-item-fundmaster_name)) .force-four-columns > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content > .dxbl-row > :last-child {
    margin-right: 25px !important;
    flex-basis: calc(25% - 25px) !important;
    max-width: calc(25% - 25px) !important;
}





    /* Image-only form groups must use the same horizontal origin as the other
       DetailView controls. Remove the generated column and row inset, while
       keeping the image responsive to the available width. */
    .main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-fl-group:has(.xaf-image-editor),
    .main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-fl-group:has(.xaf-image-editor) > .dxbl-row,
    .main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-fl-group:has(.xaf-image-editor) > .dxbl-row > .dxbl-fl-item,
    .main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-fl-group:has(.xaf-image-editor) .dxbl-fl-ctrl,
    .main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-fl-group:has(.xaf-image-editor) .xaf-image-editor {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-fl-group:has(.xaf-image-editor) .img-thumbnail,
    .main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-fl-group:has(.xaf-image-editor) .xaf-image-container,
    .main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-fl-group:has(.xaf-image-editor) img.xaf-component-image {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .force-four-columns > .dxbl-row > .dxbl-fl-group,
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .force-four-columns > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content > .dxbl-row > .dxbl-fl-group {
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .force-four-columns > .dxbl-row > .dxbl-fl-group > .dxbl-group > .dxbl-group-header,
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .force-four-columns > .dxbl-row > .dxbl-fl-group > .dxbl-group > .dxbl-group-body,
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .force-four-columns > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content > .dxbl-row > .dxbl-fl-group > .dxbl-group > .dxbl-group-header,
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .force-four-columns > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content > .dxbl-row > .dxbl-fl-group > .dxbl-group > .dxbl-group-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .force-four-columns > .dxbl-row > .dxbl-fl-group > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content > .dxbl-row,
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .force-four-columns > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content > .dxbl-row > .dxbl-fl-group > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content > .dxbl-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .force-four-columns > .dxbl-row > .dxbl-fl-group > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content > .dxbl-row > .dxbl-fl-item,
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .force-four-columns > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content > .dxbl-row > .dxbl-fl-group > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content > .dxbl-row > .dxbl-fl-item {
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* ========================================================================== */
/* DETAILVIEW MOBILE OVERFLOW PROTECTION                                     */
/* ========================================================================== */



/* ========================================================================== */
/* DETAILVIEW RESPONSIVE WIDTH SAFETY                                        */
/* ========================================================================== */

/* The exported four-column groups use Bootstrap-style percentage widths.
   The column padding must be included in those widths; otherwise every row
   becomes wider than its parent and the DetailView is clipped at both edges. */
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .force-four-columns > .dxbl-row > *,
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .force-four-columns > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content > .dxbl-row > * {
    box-sizing: border-box !important;
    min-width: 0 !important;
}

.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .force-four-columns > .dxbl-row,
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .force-four-columns > .dxbl-group > .dxbl-group-body > .dxbl-group-body-content > .dxbl-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}





/* Property DetailView uses a scrollable tab component inside the generated
   form-layout. The clipping is caused by the outer Bootstrap row/column
   width calculation, not by the tab text. Normalize that complete chain and
   let the tab viewer be the only horizontal scrolling surface. */
/* Align the complete DetailView tab strip with the inset used by the first
   four-column group. Reduce the viewer width together with the left offset so
   the tab strip stays inside the available content area. */
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-tabs-tablist,
.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-tabs-tablist > .dxbl-scroll-viewer {
    margin-left: 8px !important;
    margin-right: 0 !important;
    inline-size: calc(100% - 8px) !important;
    max-inline-size: calc(100% - 8px) !important;
    min-inline-size: 0 !important;
    box-sizing: border-box !important;
}

.main-content.xaf-flex-auto:has(.detail-view-content) .detail-view-content .dxbl-tabs-tablist > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    min-inline-size: 0 !important;
    box-sizing: border-box !important;
}

/* Darlehen DetailView: remove the generated horizontal padding from the
   four-column parent group. The field class is stable in the exported view,
   while generated element ids are not. */
.main-content.xaf-flex-auto:has(.detail-view-content:has(.xaf-item-lendernameshort))
    .detail-view-content:has(.xaf-item-lendernameshort)
    > .dxbl-fl
    > .dxbl-row
    > .dxbl-fl-group,
.main-content.xaf-flex-auto:has(.detail-view-content:has(.xaf-item-lendernameshort))
    .detail-view-content:has(.xaf-item-lendernameshort)
    > .dxbl-fl
    > .dxbl-row
    > .dxbl-fl-group
    > .dxbl-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* The generic form-layout column rule above also matches all four inner
   groups in this view. Reset those columns as well; otherwise the visible
   padding remains on the child groups even after the parent is reset. */
.main-content.xaf-flex-auto:has(.detail-view-content:has(.xaf-item-lendernameshort))
    .detail-view-content:has(.xaf-item-lendernameshort)
    .dxbl-fl-group.dxbl-col,
.main-content.xaf-flex-auto:has(.detail-view-content:has(.xaf-item-lendernameshort))
    .detail-view-content:has(.xaf-item-lendernameshort)
    .dxbl-fl-group[class*="dxbl-col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Darlehen: remove remaining generated horizontal insets from every nested
   form-layout level. The generic DevExpress column rules can also apply to
   rows, items, and controls inside the four-column group. */
.main-content.xaf-flex-auto:has(.detail-view-content:has(.xaf-item-lendernameshort))
    .detail-view-content:has(.xaf-item-lendernameshort) .dxbl-row,
.main-content.xaf-flex-auto:has(.detail-view-content:has(.xaf-item-lendernameshort))
    .detail-view-content:has(.xaf-item-lendernameshort) .dxbl-fl-group,
.main-content.xaf-flex-auto:has(.detail-view-content:has(.xaf-item-lendernameshort))
    .detail-view-content:has(.xaf-item-lendernameshort) .dxbl-fl-item,
.main-content.xaf-flex-auto:has(.detail-view-content:has(.xaf-item-lendernameshort))
    .detail-view-content:has(.xaf-item-lendernameshort) .dxbl-fl-gt,
.main-content.xaf-flex-auto:has(.detail-view-content:has(.xaf-item-lendernameshort))
    .detail-view-content:has(.xaf-item-lendernameshort) .dxbl-fl-ctrl {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* The dashboard creates this wrapper with an inline padding declaration.
   An important author rule is required to override element.style padding. */
.dx-scrollview-content > div[style*="padding: 16px"] {
    padding: 0 !important;
}

/* InvestmentVehicle HM: keep the KPI cards and the four detail groups on the
   same four-column grid with a consistent 24px gap. */
.detail-view-content:has(.xaf-item-fundmaster_name) > .dxbl-fl > .dxbl-row {
    --dxbl-row-item-spacing-x: 0px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.detail-view-content:has(.xaf-item-fundmaster_name-fe6999e883724114aff2416bc1f4b113)
    .dxbl-fl-group:has(> .dxbl-row > .dxbl-fl-item > .dxbl-fl-ctrl .inradr-kpi-card),
.detail-view-content:has(.xaf-item-fundmaster_name-fe6999e883724114aff2416bc1f4b113)
    .force-four-columns:has(.xaf-item-fundmaster_name-fe6999e883724114aff2416bc1f4b113) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.detail-view-content:has(.xaf-item-fundmaster_name-fe6999e883724114aff2416bc1f4b113)
    .dxbl-fl-group:has(> .dxbl-row > .dxbl-fl-item > .dxbl-fl-ctrl .inradr-kpi-card) > .dxbl-row,
.detail-view-content:has(.xaf-item-fundmaster_name-fe6999e883724114aff2416bc1f4b113)
    .force-four-columns:has(.xaf-item-fundmaster_name-fe6999e883724114aff2416bc1f4b113) > .dxbl-row {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

.detail-view-content:has(.xaf-item-fundmaster_name-fe6999e883724114aff2416bc1f4b113)
    .dxbl-fl-group:has(> .dxbl-row > .dxbl-fl-item > .dxbl-fl-ctrl .inradr-kpi-card) > .dxbl-row > .dxbl-fl-item,
.detail-view-content:has(.xaf-item-fundmaster_name-fe6999e883724114aff2416bc1f4b113)
    .force-four-columns:has(.xaf-item-fundmaster_name-fe6999e883724114aff2416bc1f4b113) > .dxbl-row > .dxbl-fl-group {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

.detail-view-content:has(.xaf-item-fundmaster_name-fe6999e883724114aff2416bc1f4b113)
    .force-four-columns:has(.xaf-item-fundmaster_name-fe6999e883724114aff2416bc1f4b113)
    > .dxbl-row > .dxbl-fl-group > dxbl-group-control,
.detail-view-content:has(.xaf-item-fundmaster_name-fe6999e883724114aff2416bc1f4b113)
    .force-four-columns:has(.xaf-item-fundmaster_name-fe6999e883724114aff2416bc1f4b113)
    > .dxbl-row > .dxbl-fl-group > dxbl-group-control > .dxbl-group-header,
.detail-view-content:has(.xaf-item-fundmaster_name-fe6999e883724114aff2416bc1f4b113)
    .force-four-columns:has(.xaf-item-fundmaster_name-fe6999e883724114aff2416bc1f4b113)
    > .dxbl-row > .dxbl-fl-group > dxbl-group-control > .dxbl-expandable-container,
.detail-view-content:has(.xaf-item-fundmaster_name-fe6999e883724114aff2416bc1f4b113)
    .force-four-columns:has(.xaf-item-fundmaster_name-fe6999e883724114aff2416bc1f4b113)
    > .dxbl-row > .dxbl-fl-group > dxbl-group-control > dxbl-expandable-container > .dxbl-group-body-content,
.detail-view-content:has(.xaf-item-fundmaster_name-fe6999e883724114aff2416bc1f4b113)
    .force-four-columns:has(.xaf-item-fundmaster_name-fe6999e883724114aff2416bc1f4b113)
    > .dxbl-row > .dxbl-fl-group > dxbl-group-control > dxbl-expandable-container > .dxbl-group-body-content > .dxbl-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}





/* InvestmentVehicle HM: align the identification group and KPI grid. */
.detail-view-content:has(.xaf-item-fundmaster_name) :is(
    .force-four-columns,
    .dxbl-fl-group:has(> .dxbl-row > .dxbl-fl-item > .dxbl-fl-ctrl .inradr-kpi-card)
),
.detail-view-content:has(.xaf-item-fundmaster_name) :is(
    .force-four-columns > .dxbl-row,
    .dxbl-fl-group:has(> .dxbl-row > .dxbl-fl-item > .dxbl-fl-ctrl .inradr-kpi-card) > .dxbl-row
) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

.detail-view-content:has(.xaf-item-fundmaster_name) :is(
    .force-four-columns > .dxbl-row,
    .dxbl-fl-group:has(> .dxbl-row > .dxbl-fl-item > .dxbl-fl-ctrl .inradr-kpi-card) > .dxbl-row
) {
    --dxbl-row-item-spacing-x: 0px !important;
    --dxbl-row-item-spacing-y: 0px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
}

.detail-view-content:has(.xaf-item-fundmaster_name)
    .force-four-columns > .dxbl-row > .dxbl-fl-group .dxbl-group-body-content > .dxbl-row {
    --dxbl-row-item-spacing-x: 0px !important;
    --dxbl-row-item-spacing-y: 0px !important;
}

.detail-view-content:has(.xaf-item-fundmaster_name) :is(
    .force-four-columns > .dxbl-row > .dxbl-fl-group,
    .dxbl-fl-group:has(> .dxbl-row > .dxbl-fl-item > .dxbl-fl-ctrl .inradr-kpi-card) > .dxbl-row > .dxbl-fl-item
) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

.detail-view-content:has(.xaf-item-fundmaster_name) .force-four-columns > .dxbl-row > .dxbl-fl-group,
.detail-view-content:has(.xaf-item-fundmaster_name) .force-four-columns > .dxbl-row > .dxbl-fl-group > dxbl-group-control,
.detail-view-content:has(.xaf-item-fundmaster_name) .force-four-columns > .dxbl-row > .dxbl-fl-group > dxbl-group-control > .dxbl-group-header,
.detail-view-content:has(.xaf-item-fundmaster_name) .force-four-columns > .dxbl-row > .dxbl-fl-group > dxbl-group-control > .dxbl-expandable-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}





/* InvestmentVehicle HM: remove the tab-content inset before applying the
   shared KPI and identification grid alignment. */
.detail-view-content:has(.xaf-item-fundmaster_name) .dxbl-fl-tab-content,
.detail-view-content:has(.xaf-item-fundmaster_name) .dxbl-fl-tab-content > .dxbl-row,
.detail-view-content:has(.xaf-item-fundmaster_name) .dxbl-fl-tab-content > .dxbl-row > .dxbl-fl-group {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

#main-view-content .detail-view-content:has(.xaf-item-fundmaster_name) .dxbl-tabs-tablist,
#main-view-content .detail-view-content:has(.xaf-item-fundmaster_name) .dxbl-tabs-tablist > .dxbl-scroll-viewer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

.detail-view-content:has(.xaf-item-fundmaster_name) .dxbl-fl-tab-content > .dxbl-row {
    --dxbl-row-item-spacing-x: 0px !important;
    --dxbl-row-item-spacing-y: 0px !important;
}

.detail-view-content:has(.xaf-item-fundmaster_name) .dxbl-tabs-tablist,
.detail-view-content:has(.xaf-item-fundmaster_name) .dxbl-tabs-tablist > .dxbl-scroll-viewer,
.detail-view-content:has(.xaf-item-fundmaster_name) .dxbl-tabs-content-panel,
.detail-view-content:has(.xaf-item-fundmaster_name) .dxbl-tabs-content,
.detail-view-content:has(.xaf-item-fundmaster_name) .dxbl-fl-tab-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

.detail-view-content:has(.xaf-item-fundmaster_name) .force-four-columns .perf-dashboard,
.detail-view-content:has(.xaf-item-fundmaster_name) .force-four-columns .perf-chart-card,
.detail-view-content:has(.xaf-item-fundmaster_name) .force-four-columns .perf-chart-container,
.detail-view-content:has(.xaf-item-fundmaster_name) .force-four-columns .js-plotly-plot,
.detail-view-content:has(.xaf-item-fundmaster_name) .force-four-columns .plot-container,
.detail-view-content:has(.xaf-item-fundmaster_name) .force-four-columns .svg-container,
.detail-view-content:has(.xaf-item-fundmaster_name) .force-four-columns .main-svg {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* SegmentView has no force-four-columns wrapper. Its three visible groups
   share a direct inner row whose generated negative gutter clips the first
   group header and fields. Normalize only that Segment row. */
#main-view-content .detail-view-content:has(.xaf-item-segment_fund_fundid) .dxbl-fl-tab-content > .dxbl-row > .dxbl-fl-group > .dxbl-row {
    --dxbl-row-item-spacing-x: 0px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* SpvView already normalizes its form groups to zero horizontal padding.
   Override the shared tab inset so SPV does not receive a second 12px gap. */
#main-view-content .detail-view-content:has(.xaf-item-mainfundasset_fundid) .dxbl-tabs .dxbl-fl-group[class*="dxbl-col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* SpvView inherits the 14px DevExpress tab-content inset. Remove it so the
   tab panel and its groups share the same horizontal content origin. */
#main-view-content .detail-view-content:has(.xaf-item-mainfundasset_fundid) .dxbl-fl-tab-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* SpvView also inherits the shared 8px tab-list offset. Its tab content is
   already normalized, so keep the tab-list on the same full-width origin. */
#main-view-content .detail-view-content:has(.xaf-item-mainfundasset_fundid) .dxbl-tabs-tablist,
#main-view-content .detail-view-content:has(.xaf-item-mainfundasset_fundid) .dxbl-tabs-tablist > .dxbl-scroll-viewer {
    margin-left: 0 !important;
    margin-right: 0 !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* LoanView resets every form-group inset, which leaves the first group label
   flush against the clipping edge. Restore one controlled tab-group inset. */
#main-view-content .detail-view-content:has(.xaf-item-lendernameshort) .dxbl-tabs .dxbl-fl-group[class*="dxbl-col-"] {
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5) !important;
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5) !important;
    box-sizing: border-box !important;
}

/* LoanView has the same direct group-row structure as SegmentView. Remove
   the generated negative gutter from that row so the first group is not
   clipped at the DetailView content edge. */
#main-view-content .detail-view-content:has(.xaf-item-lendernameshort) .dxbl-fl-tab-content > .dxbl-row > .dxbl-fl-group > .dxbl-row {
    --dxbl-row-item-spacing-x: 0px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* FundInvestment uses the same nested tab-group row as LoanView. Normalize
   its generated negative gutter so the first group is not clipped. */
#main-view-content .detail-view-content:has(.xaf-item-investmentcompany_nameshort) .dxbl-fl-tab-content > .dxbl-row > .dxbl-fl-group > .dxbl-row {
    --dxbl-row-item-spacing-x: 0px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* FundInvestment action toolbar controls have no caption and lose the
   generated column padding. Restore the buffer on the actual control. */
#main-view-content .detail-view-content:has(.xaf-item-investmentcompany_nameshort)
    .dxbl-fl-tab-content > .dxbl-row > .dxbl-fl-group > .dxbl-row
    > .dxbl-fl-item > .dxbl-fl-ctrl-nc:has(> dxbl-toolbar) {
    padding-left: 10px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
}

/* InvestmentCompany uses the same nested tab-group structure as
   FundInvestment. Normalize its inner row so the visible groups keep their
   horizontal inset instead of being pulled into the clipping edge. */
#main-view-content .detail-view-content:has(.xaf-item-tenantdata) .dxbl-fl-tab-content > .dxbl-row > .dxbl-fl-group > .dxbl-row {
    --dxbl-row-item-spacing-x: 0px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.nested-toolbar:has(> dxbl-toolbar),
.nested-toolbar:has(> dxbl-toolbar) > dxbl-toolbar,
.nested-toolbar:has(> dxbl-toolbar) > dxbl-toolbar > .dxbl-btn-toolbar {
    margin-left: 0 !important;
    padding-left: 0 !important;
    box-sizing: border-box !important;
}

.nested-toolbar > dxbl-toolbar > .dxbl-btn-toolbar > :is(.dxbl-toolbar-group-separator, .dxbl-btn-toolbar-separator):first-child,
.nested-toolbar > dxbl-toolbar > .dxbl-virtual-toolbar > :is(.dxbl-toolbar-group-separator, .dxbl-btn-toolbar-separator):first-child,
.nested-toolbar > dxbl-toolbar > .dxbl-btn-toolbar > .dxbl-adaptive-container-content > :is(.dxbl-toolbar-group-separator, .dxbl-btn-toolbar-separator):first-child {
    display: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.nested-toolbar > dxbl-toolbar > .dxbl-btn-toolbar > .dxbl-btn-group-first,
.nested-toolbar > dxbl-toolbar > .dxbl-virtual-toolbar > .dxbl-btn-group-first,
.nested-toolbar > dxbl-toolbar > .dxbl-btn-toolbar > .dxbl-adaptive-container-content > .dxbl-btn-group-first {
    margin-left: 0 !important;
}

/* FundInvestment Zeichnung uses md-5 for both groups, while the other
   DetailViews use the shared md-3 group rhythm. Match that common layout and
   normalize the row gutter for both Zeichnung groups together. */
#main-view-content .detail-view-content:has(.xaf-item-investmentcompany_nameshort)
    .dxbl-row:has(> .dxbl-fl-group > dxbl-group-control > .dxbl-group-header > .dxbl-text.xaf-item-col1) {
    --dxbl-row-item-spacing-x: 0px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#main-view-content .detail-view-content:has(.xaf-item-investmentcompany_nameshort)
    .dxbl-fl-group:has(> dxbl-group-control > .dxbl-group-header > .dxbl-text.xaf-item-col1),
#main-view-content .detail-view-content:has(.xaf-item-investmentcompany_nameshort)
    .dxbl-fl-group:has(> dxbl-group-control > .dxbl-group-header > .dxbl-text.xaf-item-col2) {
    flex: 0 0 25% !important;
    width: 25% !important;
    max-width: 25% !important;
    min-width: 0 !important;
    padding-left: 16px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
}

#main-view-content .detail-view-content:has(.xaf-item-investmentcompany_nameshort)
    .dxbl-fl-group:has(> dxbl-group-control > .dxbl-group-header > .dxbl-text.xaf-item-col1)
    > dxbl-group-control > .dxbl-expandable-container > .dxbl-group-body-content > .dxbl-row,
#main-view-content .detail-view-content:has(.xaf-item-investmentcompany_nameshort)
    .dxbl-fl-group:has(> dxbl-group-control > .dxbl-group-header > .dxbl-text.xaf-item-col2)
    > dxbl-group-control > .dxbl-expandable-container > .dxbl-group-body-content > .dxbl-row,
#main-view-content .detail-view-content:has(.xaf-item-investmentcompany_nameshort)
    .dxbl-fl-group:has(> dxbl-group-control > .dxbl-group-header > .dxbl-text.xaf-item-col1)
    > dxbl-group-control > .dxbl-expandable-container > .dxbl-group-body-content > .dxbl-row > .dxbl-fl-item,
#main-view-content .detail-view-content:has(.xaf-item-investmentcompany_nameshort)
    .dxbl-fl-group:has(> dxbl-group-control > .dxbl-group-header > .dxbl-text.xaf-item-col2)
    > dxbl-group-control > .dxbl-expandable-container > .dxbl-group-body-content > .dxbl-row > .dxbl-fl-item {
    --dxbl-row-item-spacing-x: 0px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}