@import '_content/Yellax.EngineeringPlatform.UI.Components/Yellax.EngineeringPlatform.UI.Components.ytlva2yqva.bundle.scp.css';
@import '_content/Yellax.UI.Components/Yellax.UI.Components.f2q6mv2x64.bundle.scp.css';

/* /PageComponents/Authentication/LoginDropdownComponent.razor.rz.scp.css */
/* The user menu is the last trigger in the bar; keep it just off the right edge.
   Small on purpose: the trigger is icon-only, so min-width (the bar height) already
   centres the icon with 1rem of slack on each side. A margin here is added on top of
   that, which is why a full 1rem read as a hole in the corner of the bar. */
.login-trigger-cluster[b-0neipfnct5] {
    margin-right: 0.25rem;
}
/* /PageComponents/BackgroundJobs/Details/BackgroundJobDetailsPopupComponent.razor.rz.scp.css */
.content[b-03aq3r8qxy] {
    padding: 0.5rem 0;
}

.content-status[b-03aq3r8qxy] {
    display: flex;
    gap: 0.3125rem;
}

.content-status-text[b-03aq3r8qxy] {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.content-details[b-03aq3r8qxy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #eaf4fb;
    border-radius: 6px;
    padding: 0.625rem 1rem;
}

.details-title[b-03aq3r8qxy] {
    color: #1a73b5;
    font-weight: 500;
}

.details-text[b-03aq3r8qxy] {
    display: flex;
    flex-direction: column;
    width: 9.375rem;
    max-width: 9.375rem;
    text-align: right;
}

.details-text-initiatedby[b-03aq3r8qxy] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* /PageComponents/BackgroundJobs/Status/BackgroundJobStatusComponent.razor.rz.scp.css */
/* Own zone in the top bar, so the divider only exists when there is a job to show. */
.status-zone[b-pbthhrvqfk] {
    display: flex;
    align-items: center;
    align-self: stretch;
    padding: 0 0.75rem;
    border-left: var(--topbar-divider-width) solid var(--topbar-divider);
}

/* A pill in the top bar rather than a boxed input. It keeps a light surface on purpose:
   the state icon carries meaning through colour (icon-waiting, icon-completed and
   friends in app.css use the blue and green tokens), which would lose its contrast on
   the environment-coloured bar. */
.icon-textbox-container[b-pbthhrvqfk] {
    display: flex;
    align-items: center;
    border: none;
    border-radius: 999px;
    background: rgb(255 255 255 / 92%);
    height: var(--topbar-chip-height);
    padding: 0 0.75rem;
    width: fit-content;
    box-shadow: 0 1px 2px rgb(0 0 0 / 20%);
    font-size: 0.9375rem;
    color: var(--grey-900);
}

.icon-in-textbox[b-pbthhrvqfk] {
    margin-right: 0.5rem;
    font-size: 1.375rem;
    display: inline-flex;
    align-items: center;
}

.icon-textbox[b-pbthhrvqfk] {
    border: none;
    background: transparent;
    font-size: inherit;
    color: inherit;
    flex: 1;
    outline: none;
}

.expand-btn[b-pbthhrvqfk] {
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 0.5rem;
    font-size: 1.125rem;
    color: var(--grey-700);
    display: flex;
    align-items: center;
}

.expand-btn:hover[b-pbthhrvqfk] {
    color: var(--grey-900);
}

.expand-btn:focus-visible[b-pbthhrvqfk] {
    outline: 2px solid var(--grey-700);
    outline-offset: 2px;
    border-radius: 2px;
}

/* /PageComponents/Dialogs/ConfirmDataLossDialogComponent.razor.rz.scp.css */
.button-container[b-vap9llg1gq] {
    display: flex;
    gap: 0.625rem;
    list-style-type: none;
    margin: 0.3125rem;
}
/* /PageComponents/Dialogs/ConfirmDeleteDialogComponent.razor.rz.scp.css */
.button-container[b-599aqze4ky] {
    display: flex;
    gap: 0.625rem;
    list-style-type: none;
    margin: 0.3125rem;
}
/* /PageComponents/Dialogs/InformationDialogComponent.razor.rz.scp.css */
.button-container[b-927l8t5590] {
    display: flex;
    gap: 0.625rem;
    list-style-type: none;
    margin: 0.3125rem;
}
/* /PageComponents/Dialogs/QuestionDialogComponent.razor.rz.scp.css */
.button-container[b-lb2lucm3xp] {
    display: flex;
    gap: 0.625rem;
    list-style-type: none;
    margin: 0.3125rem;
}
/* /PageComponents/Dialogs/RenameComponent.razor.rz.scp.css */
.footer-content[b-zqd9hynuig] {
    display: flex
}

.footer-content-button[b-zqd9hynuig] {
    margin: 0.3125rem
}
/* /PageComponents/Environment/EnvironmentTileComponent.razor.rz.scp.css */
.environment-card[b-72n6mocier] {
    height: 100%;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

    /* The z-index lifts the hovered card above its (also position:relative) sibling
       cards, so the full-width tooltips are not painted under a neighbouring tile. */
    .environment-card:hover[b-72n6mocier] {
        z-index: 30;
        border-color: var(--grey-300);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
    }

    /* Stretch the header/description/validation tooltips to the full card width:
       compensate the card-body padding, and for content next to the avatar also
       the avatar column (avatar + tile-top gap). */
    .environment-card .card-body[b-72n6mocier] {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-050);
        padding: var(--spacing-075) var(--spacing-10);
        --yx-tooltip-inset-left: calc(-1 * var(--spacing-10));
        --yx-tooltip-inset-right: calc(-1 * var(--spacing-10));
    }

    .environment-card .tile-main[b-72n6mocier] {
        --yx-tooltip-inset-left: calc(-1 * (var(--spacing-10) + var(--size-avatar) + var(--spacing-075)));
    }

    .environment-card.environment-card-inactive[b-72n6mocier] {
        opacity: 0.7;
    }

.tile-top[b-72n6mocier] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-075);
}

.tile-main[b-72n6mocier] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Cap the overflow-menu box so the dropdown button does not inflate the header row;
   this keeps the name and description tight together and high against the avatar. The
   button is deliberately taller than this cap and overflows it on both sides - that is
   its click target, which stays clickable because the overflow is visible. */
.tile-main[b-72n6mocier]  .yx-tile-header-menu {
    height: 1.5rem;
    overflow: visible;
}

.tile-subtitle-wrap[b-72n6mocier] {
    position: relative;
    margin-bottom: var(--spacing-050);
}

.tile-subtitle[b-72n6mocier] {
    color: var(--grey-500);
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tile-subtitle-tooltip[b-72n6mocier] {
    position: absolute;
    top: calc(100% + var(--spacing-025));
    left: var(--yx-tooltip-inset-left, 0rem);
    width: max-content;
    max-width: calc(100% - var(--yx-tooltip-inset-left, 0rem) - var(--yx-tooltip-inset-right, 0rem));
    z-index: 20;
    display: none;
    padding: var(--spacing-050) var(--spacing-075);
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    color: var(--grey-700);
    background: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

.tile-subtitle.is-truncated:hover + .tile-subtitle-tooltip[b-72n6mocier] {
    display: block;
}

.tile-footer[b-72n6mocier] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--spacing-050);
}

.tile-total[b-72n6mocier] {
    color: var(--grey-700);
    font-size: 0.85rem;
    font-weight: 600;
}
/* /PageComponents/Files/UploadFilePopupComponent.razor.rz.scp.css */
.drop-file-label[b-la3q406oms] {
    font-weight: bold;
}

.custom-drop-zone[b-la3q406oms] {
    padding: 0 !important;
    border-style: dashed;
    border-width: 2px !important;
    height: 14.375rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(183, 183, 183, 0.1);
}

    .custom-drop-zone.custom-drop-zone-hover[b-la3q406oms] {
        border-style: solid;
        background-color: rgba(183, 183, 183, 0.3);
    }

.upload-info-text[b-la3q406oms] {
    padding-top: 0.75rem;
    font-style: italic;
    font-size: 0.75rem;
    flex-direction: column;
    align-items: flex-end;
}
/* /PageComponents/General/DataStateIndicator.razor.rz.scp.css */
.data-state-cell[b-4sz84oajs4] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.data-state-indicator[b-4sz84oajs4] {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.data-state-indicator-active[b-4sz84oajs4] {
    background-color: var(--green-500);
}

.data-state-indicator-inactive[b-4sz84oajs4] {
    background-color: var(--grey-500);
}
/* /PageComponents/General/DataTypeIndicator.razor.rz.scp.css */
.data-type-indicator[b-uq4lucg6cp] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.0625rem 0.25rem;
    border-radius: 10px;
    font-size: 0.700rem;
    font-weight: 550;
    color: black;
    user-select: none;
    border: 1px solid rgba(32, 32, 32, .2);
    background-color: #eeeeee;
}
/* /PageComponents/General/EntityAuditInfoComponent.razor.rz.scp.css */
.audit-rail[b-f81umh14ku] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-025) var(--spacing-15);
    font-size: 0.8rem;
    line-height: 1.4;
}

.audit-item[b-f81umh14ku] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--spacing-050);
    white-space: nowrap;
}

.audit-label[b-f81umh14ku] {
    color: var(--grey-700);
}

.audit-name[b-f81umh14ku] {
    color: var(--grey-900);
}

.audit-sep[b-f81umh14ku] {
    color: var(--grey-300);
}

.audit-date[b-f81umh14ku] {
    color: var(--grey-700);
    font-variant-numeric: tabular-nums;
}
/* /PageComponents/General/MessagePresenterComponent.razor.rz.scp.css */
.MessageStyle[b-75on2g8iiw] {
    border-color: #888888;
    text-overflow: ellipsis;
    overflow-x: hidden;
}

.message-icon[b-75on2g8iiw] {
    margin-right: var(--spacing-025);
}

    /* Small */
    .MessageStyle.message-sm[b-75on2g8iiw] {
        font-size: 0.85rem;
        border-radius: 3px;
        margin: 0.125rem;
        padding: 0.25rem;
    }

    /* Normal */
    .MessageStyle.message-md[b-75on2g8iiw] {
        font-size: 1rem;
        border-radius: 5px;
        margin: 0.25rem;
        padding: 0.375rem;
    }

    /* Large */
    .MessageStyle.message-lg[b-75on2g8iiw] {
        font-size: 1.15rem;
        border-radius: 8px;
        margin: 0.375rem;
        padding: 0.625rem;
    }

/* Base */
.MessageBox[b-75on2g8iiw] {
    display: flex;
    flex-direction: column;
}

    /* Small */
    .MessageBox.message-sm[b-75on2g8iiw] {
        margin: 0.125rem 0.25rem;
    }

    /* Normal */
    .MessageBox.message-md[b-75on2g8iiw] {
        margin: 0.25rem 0.5rem;
    }

    /* Large */
    .MessageBox.message-lg[b-75on2g8iiw] {
        margin: 0.375rem 0.75rem;
    }

/* /PageComponents/General/WaitingComponent.razor.rz.scp.css */
.loadingContainer[b-is6mehpge1] {
    text-align: center;
    font-size: large;
}
/* /PageComponents/General/WorkflowSteps.razor.rz.scp.css */
.workflow-steps[b-nakk4wu13k] {
    display: flex;
    margin: 0 1.875rem;
}

.workflow ol[b-nakk4wu13k] {
    display: flex;
    list-style: none;
    padding: 0;
    gap: 0;
}

.workflow-step-active[b-nakk4wu13k] {
    color:      var(--yellax-flowstep-active-color);
    background: var(--yellax-flowstep-active-background);
}

.workflow-step-next[b-nakk4wu13k] {
    color:      var(--yellax-button-color);
    background: var(--yellax-button-background);
}

.workflow-step-lowprio[b-nakk4wu13k] {
    color:      var(--yellax-flowstep-lowprio-color);
    background: var(--yellax-flowstep-lowprio-background);
}

.workflow-step-disabled[b-nakk4wu13k] {
    color: var(--yellax-flowstep-disabled-color);
    background: var(--yellax-flowstep-disabled-background);
}

.workflow-step:hover[b-nakk4wu13k] {
    cursor: default;
}

.workflow-step[b-nakk4wu13k] {
    display: block;
    height: 100%;
    padding: 0.625rem calc(0.625rem + var(--s));
    box-sizing: border-box;
    font-size: 1rem;
    text-align: center;
    min-width: 10.9375rem;
}

.workflow-active:hover[b-nakk4wu13k] {
    cursor: pointer;
}

.workflow[b-nakk4wu13k] {
    --s: 0.9375rem;
}

    .workflow ol li[b-nakk4wu13k] {
        clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0% 100%, 10% 50%, 0% 0%);
    }

.workflow ol li:first-child[b-nakk4wu13k] {
    margin-left: 0;
}

.workflow ol li:last-child[b-nakk4wu13k] {
    margin-right: 0;
}
/* /PageComponents/Grid/ColumnChooserComponent.razor.rz.scp.css */
.column-chooser-wrapper[b-yj1zwlhyej] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-050);
}

.column-chooser[b-yj1zwlhyej] {
    display: flex;
    gap: var(--spacing-10);
    height: 26.25rem;
}

.cc-panel[b-yj1zwlhyej] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--grey-100);
    border-radius: 5px;
    overflow: hidden;
    background: var(--grey-50);
}

.cc-panel-header[b-yj1zwlhyej] {
    display: flex;
    align-items: center;
    gap: var(--spacing-050);
    padding: var(--spacing-050) var(--spacing-075);
    background: var(--white);
    border-bottom: 1px solid var(--grey-100);
    flex-shrink: 0;
}

.cc-panel-title[b-yj1zwlhyej] {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03125rem;
    color: var(--grey-800);
    white-space: nowrap;
}

.cc-panel-header[b-yj1zwlhyej]  .yx-search-box {
    flex: 1;
    min-width: 0;
}

.cc-badge[b-yj1zwlhyej] {
    margin-left: auto;
    background: var(--button-color-primary);
    color: var(--white);
    border-radius: 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.0625rem 0.4375rem;
}

.cc-list[b-yj1zwlhyej] {
    overflow-y: auto;
    flex: 1;
}

.cc-row[b-yj1zwlhyej] {
    display: flex;
    align-items: center;
    gap: var(--spacing-050);
    padding: var(--spacing-050) var(--spacing-075);
    border-bottom: 1px solid var(--grey-50);
    cursor: pointer;
    background: var(--white);
    user-select: none;
}

.cc-row:hover[b-yj1zwlhyej] {
    background: var(--blue-50);
}

.cc-row-selected[b-yj1zwlhyej] {
    background: var(--blue-50);
}

.cc-check[b-yj1zwlhyej] {
    width: 1rem;
    height: 1rem;
    border-radius: 3px;
    border: 1.5px solid var(--grey-300);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.625rem;
    color: var(--white);
}

.cc-check-on[b-yj1zwlhyej] {
    border-color: var(--button-color-primary);
    background: var(--button-color-primary);
}

.cc-name[b-yj1zwlhyej] {
    flex: 1;
}

.cc-row-selected .cc-name[b-yj1zwlhyej] {
    color: var(--blue-700);
    font-weight: 500;
}

.cc-selected-row[b-yj1zwlhyej] {
    display: flex;
    align-items: center;
    gap: var(--spacing-050);
    padding: var(--spacing-050) var(--spacing-075);
    border-bottom: 1px solid var(--grey-50);
    background: var(--white);
    cursor: grab;
}

.cc-dragging[b-yj1zwlhyej] {
    opacity: 0.5;
    background: var(--blue-50);
}

.cc-grip[b-yj1zwlhyej] {
    color: var(--grey-300);
    flex-shrink: 0;
    cursor: grab;
}

.cc-order-num[b-yj1zwlhyej] {
    font-size: 0.6875rem;
    color: var(--grey-400);
    width: 1.125rem;
    text-align: right;
    flex-shrink: 0;
}

.cc-selected-name[b-yj1zwlhyej] {
    flex: 1;
}

.cc-icon-btn[b-yj1zwlhyej] {
    background: none;
    border: none;
    padding: var(--spacing-025);
    cursor: pointer;
    color: var(--grey-500);
    display: flex;
    align-items: center;
    border-radius: 3px;
}

.cc-icon-btn:hover:not(:disabled)[b-yj1zwlhyej] {
    color: var(--grey-800);
    background: var(--grey-100);
}

.cc-icon-btn:disabled[b-yj1zwlhyej] {
    opacity: var(--disabled-opacity);
    cursor: default;
}

.cc-icon-btn-danger:hover:not(:disabled)[b-yj1zwlhyej] {
    color: var(--button-color-danger);
    background: var(--red-50);
}

.cc-empty[b-yj1zwlhyej] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--grey-400);
    gap: var(--spacing-050);
    text-align: center;
    padding: var(--spacing-10);
}

.cc-empty-inline[b-yj1zwlhyej] {
    height: auto;
    padding: var(--spacing-075);
}

.cc-empty-icon[b-yj1zwlhyej] {
    font-size: 1.75rem;
}

.cc-hint[b-yj1zwlhyej] {
    font-size: 0.6875rem;
    color: var(--grey-500);
}
/* /PageComponents/Grid/GridDropDownButtonComponent.razor.rz.scp.css */
.dropdown-button-content[b-eb43zpmz38] {
    display: flex;
    align-items: center;
    width: 100%;
}

.dropdown-icon[b-eb43zpmz38] {
    margin-right: 0.5rem;
    width: 1rem;
    text-align: center;
}
/* /PageComponents/IdentityCurrentUser/IdentityCurrentUserComponent.razor.rz.scp.css */
.user-info-cards[b-vwmaaswekp] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem;
}
/* /PageComponents/InputProcess/ExcelPreviewPopupComponent.razor.rz.scp.css */
.preview-body[b-eevm7w5oxg] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

    .preview-body[b-eevm7w5oxg]  .datapreview-overview {
        flex: 1;
        height: 100%;
        overflow: auto;
    }

    /* The preview grid is read-only (AllowSort is off), so its column headers do nothing when
       clicked. DevExpress still renders a clickable hand cursor on the header cells; force the
       default cursor so the header does not look interactive. */
    .preview-body[b-eevm7w5oxg]  .datapreview-overview .dxbl-grid-header-row th,
    .preview-body[b-eevm7w5oxg]  .datapreview-overview .dxbl-grid-header-row th * {
        cursor: default !important;
    }

.type-count-summary[b-eevm7w5oxg] {
    padding: 0.25rem 0.5rem 0.625rem;
    font-size: 0.85rem;
}

    .type-count-summary .type-count-header[b-eevm7w5oxg] {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 0.3125rem;
    }

    .type-count-summary .type-count-info[b-eevm7w5oxg] {
        color: #5f5e5a;
    }

    .type-count-summary .type-count-total[b-eevm7w5oxg] {
        color: #888780;
    }

    .type-count-summary .type-count-bar[b-eevm7w5oxg] {
        display: flex;
        gap: 0.0625rem;
        height: 0.5rem;
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 0.3125rem;
    }

    .type-count-summary .type-count-segment[b-eevm7w5oxg] {
        flex-basis: 0;
        min-width: 0.1875rem;
    }

    .type-count-summary .type-counts[b-eevm7w5oxg] {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 0.875rem;
    }

    .type-count-summary .type-count[b-eevm7w5oxg] {
        display: inline-flex;
        align-items: center;
        gap: 0.3125rem;
        white-space: nowrap;
    }

    .type-count-summary .type-count-dot[b-eevm7w5oxg] {
        width: 0.5625rem;
        height: 0.5625rem;
        border-radius: 2px;
        flex-shrink: 0;
    }

    .type-count-summary .type-count-pct[b-eevm7w5oxg] {
        color: #888780;
    }

.column-role[b-eevm7w5oxg] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 400;
    color: #888780;
    margin-bottom: 0.1875rem;
}

    .column-role.column-role--converted[b-eevm7w5oxg] {
        color: #185fa5;
    }

    .column-role .column-role-label[b-eevm7w5oxg] {
        text-transform: uppercase;
        letter-spacing: .02em;
    }

.column-name[b-eevm7w5oxg] {
    display: block;
    font-weight: 500;
}
/* /PageComponents/Layout/MainLayout.razor.rz.scp.css */
html[b-d7xigin7qb], body[b-d7xigin7qb] {
    margin: 0;
    padding: 0;
    height: 100%;
}

.main-layout[b-d7xigin7qb] {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* The depth comes from one translucent gradient plus an inset highlight along the top
   edge, so it works on top of every environment colour instead of needing a variant per
   colour. The old 3px flat border is replaced by a hairline and a soft shadow. */
.platform-header[b-d7xigin7qb] {
    background-color: black;
    background-image: linear-gradient(180deg,
        rgb(255 255 255 / 7%) 0%,
        rgb(255 255 255 / 0%) 45%,
        rgb(0 0 0 / 12%) 100%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--topbar-height);
    /* Fixed-height chrome: never let a tall scrolling page squeeze the bar. */
    flex-shrink: 0;
    border-bottom: 1px solid rgb(0 0 0 / 30%);
    box-shadow: inset 0 1px 0 var(--topbar-highlight), 0 2px 4px rgb(0 0 0 / 18%);
    /* Above the sidebar, so the shadow falls over it instead of behind it. */
    position: relative;
    z-index: 40;
}

/* Environment-specific overrides. Each keeps its own hue but is mixed toward the dark
   grey token, so the bar stays recognisable per environment without shouting. */
.platform-header-local[b-d7xigin7qb] {
    background-color: color-mix(in srgb, var(--blue-500) 70%, var(--grey-900));
}

.platform-header-dev[b-d7xigin7qb] {
    background-color: color-mix(in srgb, cadetblue 70%, var(--grey-900));
}

.platform-header-test[b-d7xigin7qb] {
    background-color: color-mix(in srgb, forestgreen 70%, var(--grey-900));
}

.platform-header-qa[b-d7xigin7qb] {
    background-color: color-mix(in srgb, rebeccapurple 70%, var(--grey-900));
}

.platform-header-prod[b-d7xigin7qb] {
    background-color: black;
}

.platform-header-unknown[b-d7xigin7qb] {
    background-color: color-mix(in srgb, deeppink 70%, var(--grey-900));
}

/* Leftmost block of the bar. The logo is yellow-on-black artwork, so it needs a light
   surface of its own: on the environment-coloured header its black parts would be
   invisible. The block is exactly as wide as the sidebar below it so their right edges
   line up, and the logo sits centred in it. The block's own height follows the bar, so
   a taller logo does not make the bar taller. */
.platform-brand[b-d7xigin7qb] {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex: 0 0 var(--sidebar-width);
    width: var(--sidebar-width);
    padding: 0 calc((var(--topbar-height) - var(--topbar-logo-height)) / 2);
    background-color: white;
    text-decoration: none;
}

.platform-logo[b-d7xigin7qb] {
    height: var(--topbar-logo-height);
    width: auto;
}

.platform-text[b-d7xigin7qb] {
    color: rgb(255, 219, 41); /* Yellax Yellow */
}

.sidebar[b-d7xigin7qb] {
    width: var(--sidebar-width);
    background-color: lightgray;
    padding: 0.125rem;
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    bottom: 0;
}

.content[b-d7xigin7qb] {
    margin-left: var(--sidebar-width);
    padding: 0;
    background: #f0f0f0;
    overflow-y: auto;
    /* Reserve the scrollbar gutter so switching between a scrolling and a
       non-scrolling view does not shift the page horizontally. */
    scrollbar-gutter: stable;
    flex-grow: 1;
}

.content.content-full[b-d7xigin7qb] {
    margin-left: 0;
}

.home-link[b-d7xigin7qb]{
    color: black;
    text-decoration: none;
    margin-left: 0.625rem;
}

/* Tenant and project name, in that order, in the space left between the logo and
   the buttons. No padding on the left: the tenant name is a .topbar-trigger button
   that carries its own 0.75rem, so a padding here would sit in front of that and
   leave a gap twice as wide as everywhere else in the bar. */
.platform-header-context[b-d7xigin7qb] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    padding-right: 0.75rem;
}

/* The only flexible item in the bar: it shrinks (min-width: 0 lets it go below
   its text width) so a long project name is truncated instead of pushing the
   tenant name and the buttons out of the way.
   No padding of its own: both names are .topbar-trigger buttons that already carry
   0.75rem, so the divider sits directly between the two hit areas with the same
   breathing room on each side. Adding padding here would push the project name a
   further 0.75rem away and put the divider off-centre between the two names. */
.platform-header-project[b-d7xigin7qb] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    align-self: stretch;
    border-left: var(--topbar-divider-width) solid var(--topbar-divider);
}

.platform-environment[b-d7xigin7qb] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    align-self: center;
    height: 1.625rem;
    font-size: var(--topbar-font-size);
    line-height: 1;
    padding: 0 0.5rem;
    border: 1px solid var(--topbar-chip-border);
    border-radius: 999px;
    background-color: var(--topbar-chip-bg);
}

/* Hairline between the status zone and the action zone, so the bar reads as groups. */
.header-buttons-row[b-d7xigin7qb] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem; /* kleine tussenruimte tussen buttons en status */
    /* Never squeezed: the project name gives way instead. */
    flex: 0 0 auto;
    align-self: stretch;
    padding-left: 0.75rem;
    border-left: var(--topbar-divider-width) solid var(--topbar-divider);
}
/* /PageComponents/Layout/MenuHeaderButtons.razor.rz.scp.css */
.button-container[b-x0u3d7405v] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* The environment indicator is not a trigger, so it is sized here rather than by the
   shared .topbar-trigger rule. It used to be styled from MainLayout.razor.css, which
   never matched it: scoped css does not cross a component boundary. */
.platform-icon[b-x0u3d7405v] {
    font-size: var(--topbar-icon-size);
    padding: 0 0.5rem;
}
/* /PageComponents/Layout/ProjectNameComponent.razor.rz.scp.css */
/* Clicking the name opens the dashboard, so it is a button and carries the same hover
   and sizing as the other triggers in the bar (.topbar-trigger). A native button would
   otherwise draw its text in the browser's own font, hence font: inherit.
   The current project is the one item in full brand yellow - that is what sets it apart
   from the tenant next to it, instead of a heavier weight. */
.project-name[b-owpe3hsalb] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--yellow-500);
    font: inherit;
    min-width: 0;
    text-align: left;
}

.project-name > i[b-owpe3hsalb] {
    flex: 0 0 auto;
}

/* The text is the only clipping box, so a shortened name ends in an ellipsis
   instead of being cut off by an enclosing overflow. */
.project-name-text[b-owpe3hsalb] {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /PageComponents/Layout/TenantNameComponent.razor.rz.scp.css */
/* The name and its menu chevron are two hit areas of one segment, so they sit flush together. */
.tenant-trigger-cluster[b-5ajwwxpi5w] {
    display: flex;
    align-items: center;
    color: var(--yellow-500);
    /* Keeps its full width in the header bar; the project name next to it is the
       part that gives way. */
    flex-shrink: 0;
}

.tenant-item[b-5ajwwxpi5w] {
    display: flex;
    align-items: center;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}

/* The one deliberate exception to the bar's single icon size: a disclosure chevron reads
   as a sub-element of the name next to it and looks oversized at the icon size. */
.tenant-name-chevron[b-5ajwwxpi5w] {
    font-size: 0.75rem;
}
/* /PageComponents/NavMenu/NavMenuComponent.razor.rz.scp.css */
@media (min-width: 641px) {
    .navbar-toggler[b-lp1cri84dw] {
        display: none;
    }

    .nav-scrollable[b-lp1cri84dw] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /PageComponents/NavMenu/NavMenuEnvironmentComponent.razor.rz.scp.css */
.sub-item[b-9e0nzk0f62]{
    margin-left: -1.25rem;
}
.icon-text[b-9e0nzk0f62] {
    display: inline-flex;
    align-items: center;
}

.icon[b-9e0nzk0f62] {
    width: 1.5rem;
    display: inline-block;
    text-align: center;
    margin-right: 0.3rem;
}
/* /PageComponents/OutputTarget/LeadingSchemaBanner.razor.rz.scp.css */
.leading-banner[b-s66jqa1dhq] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background-color: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.leading-banner-left[b-s66jqa1dhq] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

.leading-banner-icon[b-s66jqa1dhq] {
    font-size: 1.25rem;
    color: var(--yellow-500);
}

.leading-banner-icon-empty[b-s66jqa1dhq] {
    color: var(--grey-300);
}

/* The filled star is the Unicode character, not a FontAwesome glyph: the kit only
   serves the regular styles, so a solid fa-star still draws as an outline. The
   character renders smaller than a FontAwesome glyph at the same font size, hence the
   step up from the 1.25rem the icons above use. */
.leading-banner-star[b-s66jqa1dhq] {
    font-size: 1.625rem;
    line-height: 1;
}

.leading-banner-content[b-s66jqa1dhq] {
    display: flex;
    flex-direction: column;
}

.leading-banner-label[b-s66jqa1dhq] {
    font-weight: 700;
}

.leading-banner-description[b-s66jqa1dhq] {
    color: var(--grey-700);
}
/* /PageComponents/OutputTarget/SchemaTileComponent.razor.rz.scp.css */
.schema-tile[b-lmjvurb85q] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 30rem;
    padding: 1rem;
    background-color: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: 8px;
}

.schema-tile-inactive[b-lmjvurb85q] {
    opacity: 0.5;
}

.schema-tile-leading[b-lmjvurb85q] {
    border-color: var(--yellow-500);
    border-width: 2px;
}

.schema-tile-badges[b-lmjvurb85q] {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    min-height: 1.5rem;
}

.schema-tile-info[b-lmjvurb85q] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-size: 90%;
    color: var(--grey-700);
}

.schema-tile-counts[b-lmjvurb85q],
.schema-tile-mapped[b-lmjvurb85q] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    font-size: 90%;
}

.schema-tile-counts .tile-label[b-lmjvurb85q],
.schema-tile-mapped .tile-label[b-lmjvurb85q] {
    color: var(--grey-700);
}

.schema-tile-quality[b-lmjvurb85q] {
    margin-top: var(--spacing-025);
    padding-top: var(--spacing-050);
    border-top: 1px solid var(--grey-100);
    font-size: 90%;
}

    .schema-tile-quality .tile-label[b-lmjvurb85q] {
        color: var(--grey-700);
    }

.schema-tile-actions[b-lmjvurb85q] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: auto;
}
/* /PageComponents/ParseRules/ParseRuleHeaderComponent.razor.rz.scp.css */
.popup-container[b-sugjur2y4g] {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-button-inbetween);
    float: right;
    top: 0;
    right: 1.5625rem;
}
/* /PageComponents/Schema/ChangeSchemaEnvironmentImpactPopupComponent.razor.rz.scp.css */
.button-container[b-44z7dod741] {
    display: flex;
    gap: 0.625rem;
    list-style-type: none;
    margin: 0.3125rem;
}
/* /PageComponents/Schema/SchemaField/SchemaFieldDefinePredefinedNumberValues.razor.rz.scp.css */
.component-caption[b-tkvjb64ucn] {
    background-color: #EEEEEE;
    border: 1px #AAAAAA solid;
    border-radius: 6px;
    padding: 0.3125rem 0.75rem;
    overflow-wrap: anywhere;
}
/* /PageComponents/Schema/SchemaField/SchemaFieldDefinePredefinedTextValues.razor.rz.scp.css */
.component-caption[b-3535kns2zu] {
    background-color: #EEEEEE;
    border: 1px #AAAAAA solid;
    border-radius: 6px;
    padding: 0.3125rem 0.75rem;
    overflow-wrap: anywhere;
}
/* /PageComponents/SchemaDefinitionInstances/Step1/SchemaDefinitionInstanceImportStep1.razor.rz.scp.css */
.schema-file-card[b-auyi1qa1oc] {
    padding: var(--spacing-075) var(--spacing-10);
}
/* /PageComponents/SchemaDefinitionInstances/Step2/SchemaDefinitionInstanceImportStep2.razor.rz.scp.css */
.schema-information[b-7ty93ms2xu] {
    padding: var(--spacing-075) var(--spacing-10);
}

.schema-identity[b-7ty93ms2xu] {
    display: flex;
    align-items: center;
    gap: var(--spacing-075);
    max-width: 44rem;
    padding: var(--spacing-075) var(--spacing-10);
    border: 1px solid var(--grey-100);
    border-left: 3px solid var(--accent-color);
    border-radius: 6px;
}

.schema-identity-icon[b-7ty93ms2xu] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 6px;
    background-color: var(--accent-color-subtle);
    color: var(--accent-color);
}

.schema-identity-caption[b-7ty93ms2xu] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--grey-600);
}

.schema-identity-name[b-7ty93ms2xu] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--grey-900);
}

.schema-identity-tags[b-7ty93ms2xu] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-050);
    margin-left: auto;
}

/* Scoped to these chips on purpose — elsewhere the tag keeps its own weight and colour. */
.schema-identity-tags[b-7ty93ms2xu]  .static-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-025);
    font-weight: 500;
    color: var(--grey-700);
}

.schema-information-messages[b-7ty93ms2xu] {
    margin-top: var(--spacing-075);
    max-width: 44rem;
}

/* Its own .MessageBox is a column flex container, which stretches every message to the full
   width — hence the explicit row direction and flex-start. Layout only; severity stays theirs. */
.schema-information-messages[b-7ty93ms2xu]  .MessageBox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--spacing-050);
}

.schema-information-messages[b-7ty93ms2xu]  .MessageStyle {
    margin: 0;
    /* Transparent rather than none, so the box keeps its size. */
    border-color: transparent;
}

.schema-descriptions[b-7ty93ms2xu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--spacing-10);
    max-width: 44rem;
    margin-top: var(--spacing-075);
    padding: var(--spacing-075) var(--spacing-10);
    border: 1px solid var(--grey-100);
    border-radius: 6px;
}
/* /PageComponents/SchemaDefinitionInstances/Step3/SchemaDefinitionInstanceImportStep3.razor.rz.scp.css */
.schema-content[b-0aeflg5xwp] {
    padding: var(--spacing-075) var(--spacing-10);
}

.schema-content-kind[b-0aeflg5xwp] {
    color: var(--grey-600);
}

.schema-content-count[b-0aeflg5xwp] {
    color: var(--grey-700);
}

/* Two fixed slots, so the value type and the key tag start at the same offset on every row.
   The widths follow the longest member of each closed label set, not a round guess:

     requiredness  "Required" | "Optional"        — both 8 characters
     value type    "Text" | "Number" | "Yes/No"   — longest 6 characters, plus its icon

   Both tags render at font-size 0.7rem; the slot adds the tag's own padding and border. Add a
   longer label to either set — or translate these — and these two widths need rechecking. */
.schema-content-field[b-0aeflg5xwp] {
    display: grid;
    grid-template-columns: 4.75rem 5.75rem auto;
    align-items: center;
    /* Without this a grid item stretches, widening the pill instead of leaving white space. */
    justify-items: start;
    gap: var(--spacing-025);
}
/* /PageComponents/SystemHealth/SystemHealthComponent.razor.rz.scp.css */
.system-health-cards[b-6y90k7brf3] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem;
}
/* /PageComponents/UserInvitations/UserManagementComponent.razor.rz.scp.css */
.user-management[b-jh5edn0s1a] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-075);
}

.user-management-section + .user-management-section[b-jh5edn0s1a] {
    padding-top: var(--spacing-075);
    border-top: 1px solid var(--grey-100);
}

.section-header[b-jh5edn0s1a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-050);
    margin-bottom: var(--spacing-050);
}

    .section-header .section-title[b-jh5edn0s1a] {
        margin-bottom: 0;
    }

.section-title[b-jh5edn0s1a] {
    margin-bottom: var(--spacing-050);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--grey-900);
}

.invite-form[b-jh5edn0s1a] {
    max-width: 32rem;
}

.stat-row[b-jh5edn0s1a] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-050);
    margin-bottom: var(--spacing-075);
}

.stat-box[b-jh5edn0s1a] {
    min-width: 8.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--grey-200);
    border-radius: 6px;
    background-color: var(--white);
}

.stat-value[b-jh5edn0s1a] {
    font-size: 1.25rem;
    font-weight: 700;
}

.stat-label[b-jh5edn0s1a] {
    font-size: 0.8rem;
    color: var(--grey-700);
}
/* /PageComponents/Viewpoint/DataStateBulkActions.razor.rz.scp.css */
.data-state-bulk-actions[b-9b8gnm5gcy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.data-state-bulk-actions-footer[b-9b8gnm5gcy] {
    display: flex;
    gap: 0.75rem;
}
/* /PageComponents/Viewpoint/GridRowCountSummary.razor.rz.scp.css */
.grid-row-count-summary[b-m6hfs5yes5] {
    display: flex;
    justify-content: flex-end;
    font-size: 0.875rem;
}
/* /PageComponents/Viewpoint/NoSchemasComponent.razor.rz.scp.css */
.no-schemas-container[b-egf14pjsab] {
    text-align: center;
    padding: 1rem;
    background-color: var(--grey-100);
    border-radius: 6px;
}

.no-schemas-icon[b-egf14pjsab] {
    font-size: 2rem;
    color: var(--orange-500);
}

.no-schemas-description[b-egf14pjsab] {
    color: var(--grey-500);
}
/* /PageComponents/Viewpoint/SelectSchemaEnvironmentComponent.razor.rz.scp.css */
.checkbox-row[b-usqjdtnjlw] {
    display: flex;
    gap: 3rem;
}

.combobox-caption[b-usqjdtnjlw] {
    width: 30%;
    max-width: 15rem;
}

.combobox-container[b-usqjdtnjlw] {
    width: 80%;
    max-width: 40rem;
}

.flex-container[b-usqjdtnjlw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 50rem;
}
/* /PageComponents/Viewpoint/WorkEfficiencyPopup.razor.rz.scp.css */
.work-efficiency-content[b-csrchwquda] {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 1rem 1.25rem;
    gap: 0.75rem;
    box-sizing: border-box;
}

.work-efficiency-chart-card[b-csrchwquda] {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--grey-300);
    border-radius: 6px;
    box-sizing: border-box;
}

.work-efficiency-chart-title[b-csrchwquda] {
    font-weight: 600;
    font-size: 0.9rem;
}

.work-efficiency-chart-container[b-csrchwquda] {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
}

.work-efficiency-summary[b-csrchwquda] {
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex: 0 0 auto;
}

.work-efficiency-summary-label[b-csrchwquda] {
    font-size: 0.85rem;
    font-weight: 600;
}

.work-efficiency-summary-value[b-csrchwquda] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}
/* /Pages/DataDimension/Columns/Edit/DataColumnEditPage.razor.rz.scp.css */
.container[b-m7kjld8bpy] {
    margin-top: 1.25rem;
    margin-left: 1.25rem;
    max-width: auto;
}

.button-icon[b-m7kjld8bpy] {
    margin-right: 0.3125rem;
}

.button-group-container[b-m7kjld8bpy]{
    display: flex;
    flex-direction: row;
    gap: var(--spacing-button-inbetween);
}

.dxbl-modal-footer[b-m7kjld8bpy]{
    gap: 0.625rem;
}
/* /Pages/DataDimension/Columns/Overview/DataColumnOverviewPage.razor.rz.scp.css */
.btn-header-group[b-yq5bpuho3a] {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-button-inbetween);
}
/* /Pages/DataDimension/DataDimensionLayer.razor.rz.scp.css */
.button-icon[b-ald73chd4d]{
    margin-right: 0.3125rem;
}


/* /Pages/DataDimension/Layers/Compare/CompareLayersPage.razor.rz.scp.css */
.data-grid-header[b-4t2ug7l9g9] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
}


.compare-layer-container[b-4t2ug7l9g9] {
    display: grid;
    grid-template-columns: auto auto;
    row-gap: 0.25rem;
    column-gap: 2rem;
    margin-right: auto;
    width: fit-content;
}

.compare-layer-names[b-4t2ug7l9g9] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background-color: var(--grey-100);
    border: 0.0625rem solid var(--grey-600);
    padding: 0.375rem 0.75rem;
}

.compare-option-container[b-4t2ug7l9g9] {
    display: grid;
    grid-template-columns: auto auto auto;
    row-gap: 0.25rem;
    column-gap: 2rem;
    margin-right: 1rem;
    margin-left: auto;
    width: fit-content;
    background-color: var(--grey-100);
    border: 0.0625rem solid var(--grey-600);
    padding: 0.375rem 0.75rem;
}

.compare-option[b-4t2ug7l9g9] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    line-height: 0.0625rem;
    height: 1.375rem;
}

.compare-option-color-box[b-4t2ug7l9g9] {
    width: 1rem;
    height: 1rem;
    border: 0.0625rem solid black;
}

    .compare-option-color-box.compare-option-color-box-unchanged[b-4t2ug7l9g9] {
        background-color: var(--white);
    }

    .compare-option-color-box.compare-option-color-box-changed[b-4t2ug7l9g9] {
        background-color: var(--blue-100);
    }

    .compare-option-color-box.compare-option-color-box-only-in-upper-layer[b-4t2ug7l9g9] {
        background-color: var(--green-300);
    }

    .compare-option-color-box.compare-option-color-box-only-in-lower-layer[b-4t2ug7l9g9] {
        background-color: var(--orange-300);
    }

.compare-option-text[b-4t2ug7l9g9] {
    font-size: 0.9rem
}

.value-cell[b-4t2ug7l9g9] {
    width: 100%
}

.transparent-cell[b-4t2ug7l9g9] {
    min-height: 1.25rem;
    opacity: 0.5;
    /* Background pattern */
    background-image: repeating-linear-gradient(45deg, #b1b1b1 25%, transparent 25%, transparent 75%, #b1b1b1 75%, #b1b1b1), repeating-linear-gradient(45deg, #b1b1b1 25%, #ffffff 25%, #ffffff 75%, #b1b1b1 75%, #b1b1b1);
    background-position: 0 0, 4px 4px;
    background-size: 8px 8px;
}
/* /Pages/DataDimension/Layers/Compare/Support/CompareLayersLayerNameComponent.razor.rz.scp.css */
.compare-a-layer[b-806e8wtibl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.compare-layername[b-806e8wtibl] {
    width: 10rem;
}

.layer-text[b-806e8wtibl] {
    display: inline-block;
    width: 21.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-806e8wtibl] .represendstopview-tag {
    font-size: 0.875rem;
}

[b-806e8wtibl] .layer-number-orange {
    background-color: var(--orange-300) !important;
}

[b-806e8wtibl] .layer-number-green {
    background-color: var(--green-300) !important;
}
/* /Pages/DataDimension/Layers/Edit/ManageLayers.razor.rz.scp.css */
.container[b-3qx7hgoobu] {
    margin-top: 0.625rem;
    margin-left: 1.25rem;
    max-width: auto;
}

.btn-header-group[b-3qx7hgoobu] {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-button-inbetween);
}

.card[b-3qx7hgoobu] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
    background-color: white;
    width: 100%;
}

.card-content[b-3qx7hgoobu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}

.card-header[b-3qx7hgoobu] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    border-radius: 4px 4px 0 0;
    color: black;
    background-color: white;
    padding: .3rem;
}

.card-level[b-3qx7hgoobu] {
    font-size: 0.875rem;
    font-weight: bold;
    text-align: center;
    background-color: lightgray;
    white-space: nowrap;
    justify-content: center;
    align-items: center;
    padding: 0.125rem 0.25rem;
    border-radius: 10%;
    width: 2.5rem
}

.card-header.ismoved[b-3qx7hgoobu] {
    background-color: #fff3cd; /* alert-warning */
}

.card-header.inactive .card-level[b-3qx7hgoobu],
.card-header.inactive .card-name[b-3qx7hgoobu],
.card-header.inactive .card-source[b-3qx7hgoobu],
.card-header.inactive .card-create[b-3qx7hgoobu] {
    color: var(--grey-500);
}

.card-icon[b-3qx7hgoobu] {
    width: 1.25rem;
}

.card-name[b-3qx7hgoobu] {
    font-size: 0.875rem;
    font-weight: bold;
    text-align: left;

    vertical-align: middle;
    display: inline-block;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-grow: 1; /* Neem alle beschikbare ruimte in */
    min-width: 12.5rem; /* Zorg dat text-overflow: ellipsis werkt */
    margin-right: 0.3125rem;
    margin-left: 0.3125rem;
}

.card-create[b-3qx7hgoobu] {
    text-align: left;
    width: 7.5rem;
}

.card-source[b-3qx7hgoobu] {
    text-align: left;
    width: 25rem;
}

.checkbox-name[b-3qx7hgoobu] {
    font-size: 0.625rem;
    line-height: 2;
    vertical-align: middle;
    display: inline-block;
}

.legend-bar[b-3qx7hgoobu] {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.legend-container[b-3qx7hgoobu] {
    display: grid;
    grid-template-columns: auto;
    row-gap: 0.25rem;
    column-gap: 2rem;
    margin-left: auto;
    margin-right: 1rem;
    width: fit-content;
    background-color: var(--grey-100);
    border: 0.0625rem solid var(--grey-600);
    padding: 0.375rem 0.75rem;
}

.legend-item[b-3qx7hgoobu] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    height: 1.375rem;
}

.legend-color-box[b-3qx7hgoobu] {
    width: 1rem;
    height: 1rem;
    border: 0.0625rem solid black;
}

.legend-color-box-moved[b-3qx7hgoobu] {
    background-color: #fff3cd; /* alert-warning, matches .card-header.ismoved */
}

.legend-text[b-3qx7hgoobu] {
    font-size: 0.9rem;
}
/* /Pages/DataDimension/Layers/Overview/DataLayerOverviewPage.razor.rz.scp.css */
.buttons-container[b-ynv7vtv3ht] {
    display: flex;
    gap: 1.5625rem;
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
}
/* /Pages/DataDimension/Layers/View/DataLayerViewPage.razor.rz.scp.css */
.container[b-w23z1vq6na] {
    margin-top: 1.25rem;
    margin-left: 1.25rem;
    max-width: auto;
}

.transparent-cell[b-w23z1vq6na] {
    min-height: 1.25rem;
    opacity: 0.5;
    /* Background pattern */
    background-image: repeating-linear-gradient(45deg, #b1b1b1 25%, transparent 25%, transparent 75%, #b1b1b1 75%, #b1b1b1), repeating-linear-gradient(45deg, #b1b1b1 25%, #ffffff 25%, #ffffff 75%, #b1b1b1 75%, #b1b1b1);
    background-position: 0 0, 4px 4px;
    background-size: 8px 8px;
}

.column_data[b-w23z1vq6na] {
    background: transparent;
}
/* /Pages/DataView/Viewpoint/DataViewViewpointPage.razor.rz.scp.css */
.btn-header-group[b-v1xf63lmsq] {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-button-inbetween);
}

.checkbox-row[b-v1xf63lmsq] {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.bulk-actions-slot[b-v1xf63lmsq] {
    margin-left: auto;
}

.body-content[b-v1xf63lmsq] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.validationcount-error[b-v1xf63lmsq] {
    background-color: var(--red-500);
    color: var(--white);
}

.badge[b-v1xf63lmsq] {
    padding: 0.25rem 0.5rem;
    text-align: center;
    border-radius: 5px;
    line-height: 1;
    font-size: 80%;
    font-weight: 700;
    white-space: nowrap;
}
/* /Pages/Environment/Edit/DashboardPage.razor.rz.scp.css */
[b-5ylll35p4p] .environment-first-item {
    margin-top: 1.875rem;
}


.btn-header-group[b-5ylll35p4p] {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-button-inbetween);
}

/* The description is entered in a multi-line box, so its line breaks are kept. */
.detail-multiline[b-5ylll35p4p] {
    white-space: pre-wrap;
}

.header-meta[b-5ylll35p4p] {
    padding-bottom: var(--spacing-075);
    margin-bottom: var(--spacing-10);
    border-bottom: 1px solid var(--grey-100);
}

.dashboard-cards[b-5ylll35p4p] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--spacing-10);
}

    .dashboard-cards[b-5ylll35p4p]  .yx-detail-card {
        flex: 1 1 24rem;
    }

.quality-empty[b-5ylll35p4p] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-025);
    padding: var(--spacing-050) 0;
    color: var(--grey-500);
    font-size: 0.85rem;
}

.quality-empty-reason[b-5ylll35p4p] {
    font-size: 0.8rem;
    color: var(--grey-500);
}

/* The quality always belongs to the leading schema, so the same star that marks the
   leading schema elsewhere marks this line; the tooltip on the line spells it out. */
.quality-context[b-5ylll35p4p] {
    display: flex;
    align-items: center;
    gap: var(--spacing-025);
    padding: var(--spacing-050) 0;
    font-size: 0.8rem;
    color: var(--grey-500);
}

.quality-context-leading[b-5ylll35p4p] {
    flex: 0 0 auto;
    font-size: 1rem;
    line-height: 1;
    color: var(--yellow-500);
}

.quality-metric[b-5ylll35p4p] {
    display: flex;
    align-items: center;
    gap: var(--spacing-050);
    margin: 0 calc(-1 * var(--spacing-050));
    padding: 0 var(--spacing-050);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .quality-metric:hover[b-5ylll35p4p] {
        background-color: var(--grey-100);
    }

    .quality-metric[b-5ylll35p4p]  .yx-data-quality-bar {
        flex: 1 1 auto;
    }

.quality-metric-chevron[b-5ylll35p4p] {
    flex: 0 0 auto;
    font-size: 0.8rem;
    color: var(--grey-500);
}
/* /Pages/Environment/Overview/EnvironmentOverviewPage.razor.rz.scp.css */
.container[b-puhpe1b48q] {
    margin: 0;
    max-width: none;
    padding: 0 var(--spacing-10);
}

.project-overview-header[b-puhpe1b48q] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-10);
}

.project-overview-greeting h1[b-puhpe1b48q] {
    margin-bottom: 0;
}

.project-overview-subtitle[b-puhpe1b48q] {
    color: var(--grey-500);
    margin-bottom: var(--spacing-10);
}

.project-overview-actions[b-puhpe1b48q] {
    display: flex;
    gap: var(--spacing-050);
    flex: 0 0 auto;
    margin-top: var(--spacing-050);
}

.project-overview-controls[b-puhpe1b48q] {
    display: flex;
    align-items: center;
    gap: var(--spacing-10);
    margin-bottom: var(--spacing-10);
}

    .project-overview-controls[b-puhpe1b48q]  .yx-search-box {
        flex: 0 0 auto;
    }

    .project-overview-controls[b-puhpe1b48q]  .yx-tab-strip {
        margin-left: auto;
        flex: 0 0 auto;
    }

.project-overview-empty[b-puhpe1b48q] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-075);
    margin: var(--spacing-10) 0;
    color: var(--grey-500);
}

.skeleton-tile[b-puhpe1b48q] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-075);
    padding: var(--spacing-075) var(--spacing-10);
    background-color: var(--white);
    border: 1px solid var(--grey-100);
    border-radius: 0.25rem;
}

.skeleton-tile-top[b-puhpe1b48q] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-075);
}

.skeleton-tile-lines[b-puhpe1b48q] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--spacing-050);
}

.skeleton-block[b-puhpe1b48q] {
    border-radius: 4px;
    background: linear-gradient(90deg, var(--grey-100) 25%, var(--grey-200) 50%, var(--grey-100) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer-b-puhpe1b48q 1.4s ease-in-out infinite;
}

.skeleton-avatar[b-puhpe1b48q] {
    width: var(--size-avatar);
    height: var(--size-avatar);
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-line-wide[b-puhpe1b48q] {
    height: 1.1rem;
    width: 70%;
}

.skeleton-line-narrow[b-puhpe1b48q] {
    height: 0.85rem;
    width: 45%;
}

.skeleton-bar[b-puhpe1b48q] {
    height: 0.375rem;
    width: 100%;
    border-radius: 3px;
}

@keyframes skeleton-shimmer-b-puhpe1b48q {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.project-tile-grid[b-puhpe1b48q] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--spacing-10);
}

/* Tiles keep a fixed width and wrap to fewer columns on a narrow screen,
   rather than shrinking (which would overflow their text). */
.project-tile[b-puhpe1b48q] {
    flex: 0 0 23.75rem;
    width: 23.75rem;
}
/* /Pages/InputCompare/CompareProcess/CompareProcessFlowPage.razor.rz.scp.css */
.page-header[b-kmrsx0bx37] {
    width: 100%;
    padding-bottom: 0.625rem;
}

.header-row[b-kmrsx0bx37] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.625rem;
}

.header-row:last-child[b-kmrsx0bx37] {
    margin-bottom: 0;
}
/* /Pages/InputCompare/CompareProcess/CompareProcessStep1Configuration.razor.rz.scp.css */
.page-container[b-d59nqkbmln] {
    padding: 0;
    margin: 0.625rem 1.875rem;
    display: flex;
    flex-direction: column;
}

.content-top[b-d59nqkbmln] {
    padding: 0.625rem;
}

.content-tabels[b-d59nqkbmln] {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
}

/* /Pages/InputCompare/CompareProcess/CompareProcessStep2ShowComparison.razor.rz.scp.css */
.page-container[b-cjxwwko8ks] {
    padding: 0;
    margin: 0.625rem 1.875rem;
}

.content-tabels[b-cjxwwko8ks] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.checkbox-row[b-cjxwwko8ks] {
    display: flex;
    gap: 3rem;
}

[b-cjxwwko8ks] .dimension-column-header {
    background: var(--yellow-200) !important;
}
/* /Pages/InputCompare/Edit/InputCompareExcelEditPage.razor.rz.scp.css */
.btn-header-group[b-8ab0ao1o3z]{
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
}
/* /Pages/InputCompare/Edit/InputComparePdfEditPage.razor.rz.scp.css */
.btn-header-group[b-x8f3tauy8f] {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
}
/* /Pages/InputCompare/InputCompareOverviewPage.razor.rz.scp.css */
.button-div[b-xqf63a9k0q] {
    margin-top: 0.625rem;
}

.button-container[b-xqf63a9k0q] {
    display: flex;
    gap: 0.625rem;
    list-style-type: none;
    margin: 0.3125rem;
    align-items: center;
}

.form-container[b-xqf63a9k0q] {
    display: flex;
    margin: 0.625rem 0;
    list-style-type: none;
    align-items: center;
    justify-content: flex-start;
}

.btn-header-group[b-xqf63a9k0q] {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
}
/* /Pages/InputProcess/Edit/InputProcessExcelEditPage.razor.rz.scp.css */
.input-process-container[b-lnoaw3uk8x] {
    padding: 0.625rem 1.25rem;
    overflow: auto;
}

.btn-header-group[b-lnoaw3uk8x] {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-button-inbetween);
}
/* /Pages/InputProcess/Execute/Dialog/ImportImpactDialogComponent.razor.rz.scp.css */
.button-container[b-dv4hmxlwqa] {
    display: flex;
    gap: 0.625rem;
    list-style-type: none;
    margin: 0.3125rem;
}

.footer-flex[b-dv4hmxlwqa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.footer-left[b-dv4hmxlwqa] {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

.footer-right[b-dv4hmxlwqa] {
    display: flex;
    justify-content: flex-end;
}

.sysmsg-header[b-dv4hmxlwqa] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .3rem .3rem;
    box-sizing: border-box;
    font-weight: 300;
    border-radius: 5px;
    border: 1px solid #888888;
}

    .sysmsg-header.accordion-error[b-dv4hmxlwqa] {
        background: #f8d7da;
        color: #842029;
    }

    .sysmsg-header.accordion-warning[b-dv4hmxlwqa] {
        background: #fff3cd;
        color: #664d03;
    }

    .sysmsg-header.accordion-info[b-dv4hmxlwqa] {
        background: #cff4fc;
        color: #055160;
    }

/* /Pages/InputProcess/Execute/InputProcessExcelFlowPage.razor.rz.scp.css */
.page-header[b-hjf2rq549o] {
    width: 100%;
    padding-bottom: 0.625rem;
}

.header-row[b-hjf2rq549o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.625rem;
}

.header-row:last-child[b-hjf2rq549o] {
    margin-bottom: 0;
}
/* /Pages/InputProcess/Execute/Step1/InputProcessExcelStep1PreviewAndConvert.razor.rz.scp.css */
.page-container[b-x0obl55o8c] {
    padding: 0;
    margin: 0.625rem 1.875rem;
    display: flex;
    flex-direction: column;
}

.content-top[b-x0obl55o8c] {
    padding: 0.625rem;
    border-bottom: 1px solid #ccc; 
}

.content-tabels[b-x0obl55o8c] {
    display: flex;
    flex-direction: column;
}
/* /Pages/InputProcess/Execute/Step2/InputProcessExcelStep2MappingAndImport.razor.rz.scp.css */
.page-container[b-ugdzs0zxpa] {
    padding: 0;
    margin: 0.625rem 1.875rem;
}

.content-tabels[b-ugdzs0zxpa] {
    display: flex;
    flex-direction: row;
    gap: 0.625rem;
}

[b-ugdzs0zxpa] .new-column {
    background: var(--orange-100);
}

[b-ugdzs0zxpa] .ignore-column {
    background: var(--yellow-100);
}

[b-ugdzs0zxpa] .mapped-column {
    background: var(--blue-100);
}

[b-ugdzs0zxpa] .error-column {
    background: var(--red-600);
}

[b-ugdzs0zxpa] .field-type-mismatch .data-type-indicator {
    color: var(--red-600);
    border-color: var(--red-600);
}
/* /Pages/InputProcess/Overview/InputProcessOverviewPage.razor.rz.scp.css */
.button-container[b-0sv58tcb8m] {
    display: flex;
    gap: 0.625rem;
    list-style-type: none;
    margin: 0.3125rem;
    align-items: center;
}

.form-container[b-0sv58tcb8m] {
    display: flex;
    margin: 0.625rem 0;
    list-style-type: none;
    align-items: center;
    justify-content: flex-start;
}
/* /Pages/OutputTarget/OutputTargetPage.razor.rz.scp.css */
.body-content[b-9t5o6sauda] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Align the body with the page title, which carries a 1.5625rem left margin (.title-font). */
    margin-left: 1.5625rem;
}

.schema-section-heading[b-9t5o6sauda] {
    font-weight: 700;
    margin: 1.5rem 0 0.75rem;
}

.schema-section-count[b-9t5o6sauda] {
    font-weight: 400;
    color: var(--grey-700);
}

.schema-tile-grid[b-9t5o6sauda] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
/* /Pages/OutputTarget/Viewpoint/OutputTargetViewpointPage.razor.rz.scp.css */
.bulk-container[b-sjcnkc29ro] {
    padding: 0.5rem;
    background-color: var(--blue-100);
    border-radius: 6px;
}

    .bulk-container .dx-button[b-sjcnkc29ro] {
        min-width: 6.25rem;
    }

.body-content[b-sjcnkc29ro] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[b-sjcnkc29ro] .schema-component-dropdown {
    max-width: 18.75rem;
}

.bulk-dropdown-container[b-sjcnkc29ro] {
    display: flex !important;
    flex-direction: row;
    justify-content: left;
    gap: 1rem;
}

.validationcount-error[b-sjcnkc29ro] {
    background-color: var(--red-500);
    color: var(--white);
}

.badge[b-sjcnkc29ro] {
    padding: 0.25rem 0.5rem;
    text-align: center;
    border-radius: 5px;
    line-height: 1;
    font-size: 80%;
    font-weight: 700;
    white-space: nowrap;
}
/* /Pages/ParseRule/Edit/Boolean/ParseRuleBooleanEditPage.razor.rz.scp.css */
.parse-rule-boolean-page[b-l3vcya296o] {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-15);
    height: 100%;
    padding: var(--spacing-15) var(--spacing-20);
    overflow: auto;
    background-color: var(--grey-50);
}

.parse-rule-boolean-columns[b-l3vcya296o] {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-10);
}

.parse-rule-boolean-cards[b-l3vcya296o] {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: var(--spacing-10);
    min-width: 0;
    max-width: 60rem;
}

.parse-rule-boolean-test[b-l3vcya296o] {
    flex: 0 0 24rem;
    min-width: 0;
}

/* Below this width the two columns no longer fit side by side, so the test panel
   returns to the bottom of the page, after the settings it operates on. */
@media (max-width: 1200px) {
    .parse-rule-boolean-columns[b-l3vcya296o] {
        flex-direction: column;
    }

    .parse-rule-boolean-test[b-l3vcya296o] {
        flex: 1 1 auto;
        width: 100%;
        max-width: 60rem;
    }
}

.card-title[b-l3vcya296o] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--grey-900);
}

.fallback-options[b-l3vcya296o] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-075);
}

[b-l3vcya296o] .test-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-075);
}

[b-l3vcya296o] .test-result {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-025);
}

[b-l3vcya296o] .test-result-row {
    display: flex;
    gap: var(--spacing-050);
    align-items: center;
}

[b-l3vcya296o] .remove-false-condition {
    margin-top: var(--spacing-075);
}

[b-l3vcya296o] .test-result-label {
    font-weight: 600;
    color: var(--grey-700);
}

[b-l3vcya296o] .test-result-outcome {
    font-size: 1rem;
    line-height: 1;
}
/* /Pages/ParseRule/Edit/Excel/ParseRuleExcelEditPage.razor.rz.scp.css */
.parse-rule-excel-page-content[b-jnf8vxuzda] {
    position: relative;
    visibility: hidden;
}

.parse-rule-excel-container[b-jnf8vxuzda] {
    padding: 0.625rem 1.25rem;
    overflow: auto;
}

.preview-filename[b-jnf8vxuzda] {
    margin: 0.625rem 1.875rem;
}

[b-jnf8vxuzda] .form-header {
    font-weight: bold !important;
    background-color: lightgray;
    padding-left: 0.3125rem !important;
}

[b-jnf8vxuzda] .parse-rule-first-item {
    margin-top: 1.875rem;
}

[b-jnf8vxuzda] .layout-normal-item {
    margin-bottom: 0.625rem;
}

[b-jnf8vxuzda] .form-item {
    margin-top: 0;
}

[b-jnf8vxuzda] .form-item-left {
    margin-top: 0;
    margin-left: 0;
}

[b-jnf8vxuzda] .required-caption:after {
    content: ' *';
    color: red;
}

[b-jnf8vxuzda] .inline-button {
    margin-left: 0;
    padding-left: 0;
}

/* Data Range two-column layout */
[b-jnf8vxuzda] .data-range-item {
    padding-left: 1.25rem;
}

[b-jnf8vxuzda] .data-range-two-col {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
}

[b-jnf8vxuzda] .data-range-col {
    flex: 1 1 16rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[b-jnf8vxuzda] .data-range-col-title {
    font-weight: bold;
    margin-bottom: 0.1rem;
}

[b-jnf8vxuzda] .data-range-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

[b-jnf8vxuzda] .data-range-label {
    min-width: 9rem;
    text-align: right;
    flex-shrink: 0;
    font-size: 0.875rem;
    color: #555;
}

[b-jnf8vxuzda] .data-range-to {
    padding: 0 0.15rem;
    flex-shrink: 0;
    font-size: 0.875rem;
    color: #555;
}

[b-jnf8vxuzda] .data-range-row > .dxbl-masked-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* Subheader grouping column layout */
[b-jnf8vxuzda] .subheader-fields {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
}

[b-jnf8vxuzda] .subheader-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
}

[b-jnf8vxuzda] .subheader-row > .dxbl-masked-input,
[b-jnf8vxuzda] .subheader-row > .dxbl-text-edit {
    flex: 1 1 auto;
    min-width: 0;
}

[b-jnf8vxuzda] .subheader-add-btn {
    flex-shrink: 0;
}

.icon-height[b-jnf8vxuzda] {
    line-height: 1.375rem;
}

[b-jnf8vxuzda] .result-table {
    padding: 0.3125rem;
}

[b-jnf8vxuzda] .tab {
    background-color: white;
}
/* /Pages/ParseRule/Edit/Pdf/ParseRulePdfEditPage.razor.rz.scp.css */
.parse-rule-pdf-page-content[b-algaopcg8z] {
    position: relative;
    visibility: hidden;
}

.parse-rule-pdf-container[b-algaopcg8z] {
    padding: 1.25rem;
    overflow-x: hidden;
}

.preview-filename[b-algaopcg8z] {
    margin: 0.625rem 1.875rem;
}

[b-algaopcg8z] .form-header {
    font-weight: bold !important;
    background-color: lightgray;
    padding-left: 0.3125rem !important;
}

[b-algaopcg8z] .form-item {
    margin-top: 0;
}

[b-algaopcg8z] .form-item-left {
    margin-top: 0;
    margin-left: 1.25rem;
}

[b-algaopcg8z] .parse-rule-first-item {
    margin-top: 1.875rem;
}

[b-algaopcg8z] .required-caption:after {
    content: ' *';
    color: red;
}

[b-algaopcg8z] .result-table {
    padding: 0.3125rem;
}

[b-algaopcg8z] .tab {
    background-color: white;
}
/* /Pages/ParseRule/Overview/SourceRuleOverviewPage.razor.rz.scp.css */
.dropdown-button[b-n527bg1vpz] {
    margin-right: 0.3125rem;
}

.btn-header-group[b-n527bg1vpz] {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
}
/* /Pages/Quality/QualityPage.razor.rz.scp.css */
.chart-controls[b-rlfrcgk3hx] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.radio-container[b-rlfrcgk3hx] {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}

.radio-left[b-rlfrcgk3hx] {
    position: absolute;
    left: 0;
}

.radio-right[b-rlfrcgk3hx] {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.radio-center[b-rlfrcgk3hx] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 auto;
}

.page-content[b-rlfrcgk3hx] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 4rem);
}

.body-content[b-rlfrcgk3hx] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.values-chart[b-rlfrcgk3hx] {
    width: 100%;
    flex: 1;
    min-height: 0;
}

[b-rlfrcgk3hx] .legend-no-pointer .dxbl-chart-legend-item {
    cursor: default;
}

.chart-legend[b-rlfrcgk3hx] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-050);
    margin-bottom: var(--spacing-075);
}

.chart-legend-item[b-rlfrcgk3hx] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-050);
    padding: 0.125rem 0.625rem;
    font-size: 0.85rem;
    color: var(--grey-700);
    background-color: var(--grey-100);
    border-radius: 999px;
}

.chart-legend-color[b-rlfrcgk3hx] {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
}
/* /Pages/Schema/SchemaFieldMappingPage.razor.rz.scp.css */
.btn-header-group[b-wuvfa1owxd] {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-button-inbetween);
}

.tags[b-wuvfa1owxd] {
    display: flex;
    justify-content: space-between;
    gap: 0.25rem;
    align-items: center;
}
/* /Pages/Schema/SchemaValidationPage.razor.rz.scp.css */
.btn-header-group[b-azfgzzymtj] {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-button-inbetween);
}

.buttons-container[b-azfgzzymtj] {
    display: flex;
    gap: 1.5625rem;
    margin-top: 0.625rem;
    margin-bottom: 0.625rem;
}

.tags[b-azfgzzymtj] {
    display: flex;
    justify-content: space-between;
    gap: 0.25rem;
    align-items: center;
}
/* /Pages/SchemaDefinitionInstances/Import/SchemaDefinitionInstanceImportPage.razor.rz.scp.css */
/* The wizard fills the area below the top bar and pins its footer to the bottom edge, so the
   Previous/Next buttons sit in a fixed place no matter how tall a step's content is. Scoped to
   this page: the shared .page-content rule in app.css is untouched. */
.page-content[b-2a5mqnek2s] {
    /* border-box keeps the bottom padding inside the min-height, so reserving breathing room
       below the footer does not push the page past the viewport and add a scrollbar. */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--topbar-height));
    padding-bottom: var(--spacing-25);
}

.page-header[b-2a5mqnek2s] {
    width: 100%;
    padding-bottom: 0.625rem;
}

.header-row[b-2a5mqnek2s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.625rem;
}

.btn-header-group[b-2a5mqnek2s] {
    display: flex;
    flex-direction: row;
}

/* Previous shows on steps 2 and 3, Next on steps 1 and 2 — so one of the two is missing on the
   outer steps. Next is pushed right on its own instead of relying on space-between. */
.footer-primary[b-2a5mqnek2s] {
    margin-left: auto;
}

.page-footer[b-2a5mqnek2s] {
    display: flex;
    align-items: center;
    width: 100%;
    padding-top: var(--spacing-10);
    margin-top: var(--spacing-10);
    border-top: 1px solid var(--grey-100);
}

/* The waiting indicator sits on top of the step it is replacing instead of taking its place.
   Rendering it standalone made the body collapse to the height of a spinner, which dropped the
   footer buttons up and then back down again once the schema information arrived. */
.step-area[b-2a5mqnek2s] {
    display: grid;
}

    .step-area > .step-content[b-2a5mqnek2s] {
        grid-area: 1 / 1;
    }

    .step-area > .step-content.is-loading[b-2a5mqnek2s] {
        opacity: 0.4;
        pointer-events: none;
    }

    .step-area > .step-loading[b-2a5mqnek2s] {
        grid-area: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

/* The wizard reads as a centred column: the step bar and the step content share one width. */
.wizard-column[b-2a5mqnek2s] {
    width: 100%;
    max-width: 68rem;
    margin: 0 auto;
}

/* Takes the space between the step bar and the footer, which is what pushes the footer down. */
.page-body[b-2a5mqnek2s] {
    flex: 1 1 auto;
}
/* /Pages/SchemaEnvironments/SchemaEnvironmentEditPage.razor.rz.scp.css */
.btn-header-group[b-js8knk8ayr] {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-button-inbetween);
}

.multiline-tip[b-js8knk8ayr] {
    white-space: pre-line;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12.5rem;
}

.schema-edit-title[b-js8knk8ayr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.schema-edit-status[b-js8knk8ayr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Responsive card grid: groups sit side by side when there is room and
   collapse to a single column as the window narrows. */
.schema-edit-layout[b-js8knk8ayr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.schema-card[b-js8knk8ayr] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    background-color: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: 8px;
    min-width: 0;
}

.schema-card-header[b-js8knk8ayr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.schema-card-title[b-js8knk8ayr] {
    font-weight: 700;
    font-size: 1.05rem;
}

.schema-card-info[b-js8knk8ayr] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    font-size: 90%;
    color: var(--grey-700);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--grey-200);
}

.schema-card-info i[b-js8knk8ayr] {
    margin-right: 0.35rem;
}

/* Read-only fields shown as static label + value pairs, packed responsively. */
.schema-card-details[b-js8knk8ayr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem 1.25rem;
}

.detail-field[b-js8knk8ayr] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.detail-field-wide[b-js8knk8ayr] {
    grid-column: 1 / -1;
}

.detail-label[b-js8knk8ayr] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--grey-700);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.detail-value[b-js8knk8ayr] {
    font-size: 0.95rem;
    color: var(--grey-900);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

/* Caption left, switch right: right-align the control within the widened item
   so its right edge lines up with the dropdowns above it. */
[b-js8knk8ayr] .schema-copy-switch > .dxbl-fl-ctrl {
    display: flex;
    justify-content: flex-end;
}

/* Vertical form items (Name/Language) reserve a 1.59375rem tooltip slot at the right of
   their editor; horizontal items (Copy from Project, Version) have no such slot and
   run to the item edge. Mirror the slot so all editors share one right edge. */
[b-js8knk8ayr] .schema-card .dxbl-fl-item-horizontal > .dxbl-fl-ctrl {
    padding-right: 1.59375rem;
}
/* /Pages/StatusCodePage.razor.rz.scp.css */
.status-code-page[b-7x41dxjsik] {
    text-align: center;
    margin: 3.125rem auto;
    max-width: 37.5rem;
    font-family: Arial, sans-serif;
}

.status-code-header h1[b-7x41dxjsik] {
    font-size: 5rem;
    color: #dc3545;
}

.status-code-header h2[b-7x41dxjsik] {
    font-size: 2rem;
    margin-bottom: 1.25rem;
}

.status-code-actions .btn[b-7x41dxjsik] {
    margin: 0.625rem;
    padding: 0.625rem 1.25rem;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1rem;
}

.btn-primary[b-7x41dxjsik] {
    background-color: #007bff;
    color: white;
}

.btn-secondary[b-7x41dxjsik] {
    background-color: #6c757d;
    color: white;
}

.btn:hover[b-7x41dxjsik] {
    opacity: 0.9;
}
/* /Pages/Validation/Viewpoint/ValidationViewpointPage.razor.rz.scp.css */
.btn-header-group[b-2os5ffn187] {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-button-inbetween);
}

.body-content[b-2os5ffn187] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.validationcount-error[b-2os5ffn187] {
    background-color: var(--red-500);
    color: var(--white);
}

.badge[b-2os5ffn187] {
    padding: 0.25rem 0.5rem;
    text-align: center;
    border-radius: 5px;
    line-height: 1;
    font-size: 80%;
    font-weight: 700;
    white-space: nowrap;
}

.vp-legend[b-2os5ffn187] {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    background-color: var(--grey-100);
    border: 0.0625rem solid var(--grey-500);
    padding: 0.375rem 0.75rem;
}

.vp-legend-item[b-2os5ffn187] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.vp-legend-color-box[b-2os5ffn187] {
    width: 1rem;
    height: 1rem;
    border: 0.0625rem solid black;
}

.vp-legend-color-box-invalid[b-2os5ffn187] {
    background-color: #f8d7da;
}

.vp-legend-text[b-2os5ffn187] {
    font-size: 0.9rem;
}
/* /Pages/ViewPoint/DataEdit/ViewpointDataEditPage.razor.rz.scp.css */
.btn-header-group[b-ckkt21vjd0] {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-button-inbetween);
}

.body-content[b-ckkt21vjd0]  .scrollable-grid {
    user-select: none;
}

.body-content[b-ckkt21vjd0]  .vp-cell-selected {
    outline: 2px solid #1d6fb8;
    outline-offset: -2px;
    background-color: rgba(29, 111, 184, 0.10);
}

.body-content[b-ckkt21vjd0]  .vp-changed-cell,
.vp-legend-color-box-changed[b-ckkt21vjd0] {
    background-color: #fff3b0 !important;
}

.body-content[b-ckkt21vjd0]  .vp-error-cell,
.vp-legend-color-box-invalid[b-ckkt21vjd0] {
    background-color: #f8d7da !important;
}

.body-content[b-ckkt21vjd0]  .vp-error-changed-cell,
.vp-legend-color-box-invalid-changed[b-ckkt21vjd0] {
    background-color: transparent !important;
    background-image: repeating-linear-gradient(45deg, #f8d7da 25%, transparent 25%, transparent 75%, #f8d7da 75%, #f8d7da), repeating-linear-gradient(45deg, #f8d7da 25%, #fff3b0 25%, #fff3b0 75%, #f8d7da 75%, #f8d7da) !important;
    background-position: 0 0, 4px 4px;
    background-size: 8px 8px;
}

.body-content[b-ckkt21vjd0]  .vp-readonly-cell {
    background-color: var(--grey-100) !important;
}

.vp-grid-header-row[b-ckkt21vjd0] {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.vp-active-rows-note[b-ckkt21vjd0] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-style: italic;
}

.vp-legend[b-ckkt21vjd0] {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-050);
    margin-left: auto;
}

.vp-legend-item[b-ckkt21vjd0] {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-050);
    padding: 0.125rem 0.625rem;
    background-color: var(--grey-100);
    border-radius: 999px;
}

.vp-legend-color-box[b-ckkt21vjd0] {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
}

.vp-legend-text[b-ckkt21vjd0] {
    font-size: 0.85rem;
    color: var(--grey-700);
}

.save-popup[b-ckkt21vjd0] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.save-popup-label[b-ckkt21vjd0] {
    font-size: 0.8125rem;
    font-weight: 500;
}

.save-popup-actions[b-ckkt21vjd0] {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: var(--spacing-button-inbetween);
    margin: 0.5rem 0;
}
/* /Pages/ViewPoint/Edit/Support/ViewPointFilterBuilderComponent.razor.rz.scp.css */
.viewpoint-filterbuilder-container[b-2df9tddabf] {
    padding: 0.625rem;
    background: #fff;
    border-radius: 5px;
}
/* /Pages/ViewPoint/Edit/ViewPointEditPage.razor.rz.scp.css */
.container[b-vg41hdzntf] {
    margin-top: 1.25rem;
    margin-left: 1.25rem;
}

.header-meta[b-vg41hdzntf] {
    padding-bottom: var(--spacing-075);
    margin-bottom: var(--spacing-10);
    border-bottom: 1px solid var(--grey-100);
}

.btn-header-group[b-vg41hdzntf] {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-button-inbetween);
}

.button-icon[b-vg41hdzntf] {
    margin-right: 0.3125rem;
}


[b-vg41hdzntf] .tabs {
    margin-top: 1.25rem;
}
/* /Pages/ViewPoint/Overview/ViewpointOverviewPage.razor.rz.scp.css */
.button-icon[b-st8x0wtjpo] {
    margin-right: 0.3125rem;
}

[b-st8x0wtjpo] .custom-icon-button {
    padding: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}