@import '_content/Yellax.EngineeringPlatform.UI.Components/Yellax.EngineeringPlatform.UI.Components.23zk74hzab.bundle.scp.css';
@import '_content/Yellax.UI.Components/Yellax.UI.Components.zqgpgjxapi.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;
}

/* Sits directly on the environment-coloured bar rather than in the light pill, so it uses the
   translucent topbar overlays that work on every environment colour. The status itself stays
   readable in its pill; this only says that what it shows may be stale. */
.live-updates-warning[b-pbthhrvqfk],
.live-updates-connecting[b-pbthhrvqfk] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: 0.5rem;
    padding: 0 0.625rem;
    height: var(--topbar-chip-height);
    border: 1px solid var(--topbar-chip-border);
    border-radius: 999px;
    background: var(--topbar-chip-bg);
    font-size: var(--topbar-font-size);
    color: white;
    white-space: nowrap;
}

.live-updates-warning i[b-pbthhrvqfk] {
    font-size: var(--topbar-icon-size);
    color: var(--yellow-500);
}

/* Neutral on purpose: connecting is not yet a problem, so it must not read as one. */
.live-updates-connecting i[b-pbthhrvqfk] {
    font-size: var(--topbar-icon-size);
    color: white;
}

/* /PageComponents/Delivery/CreateDeliveryDialogComponent.razor.rz.scp.css */
.footer-content[b-xasmtjxglc] {
    display: flex
}

.footer-content-button[b-xasmtjxglc] {
    margin: 0.3125rem
}

.create-delivery-explanation[b-xasmtjxglc] {
    color: var(--grey-600);
}

.create-delivery-info[b-xasmtjxglc] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-top: 0.875rem;
    font-size: 0.75rem;
    color: var(--grey-600);
}

.create-delivery-info i[b-xasmtjxglc] {
    margin-top: 0.125rem;
}
/* /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/DataTypeIndicators/DataTypeIndicator.razor.rz.scp.css */
.data-type-indicator[b-02cy0zjc4o] {
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    font-weight: 550;
    color: black;
    user-select: none;
    border: 1px solid rgba(32, 32, 32, .2);
    background-color: #eeeeee;
}

.data-type-indicator-large[b-02cy0zjc4o] {
    gap: 0.4375rem;
    padding: 0.09375rem 0.3125rem;
    font-size: 0.9rem;
}

.data-type-indicator-medium[b-02cy0zjc4o] {
    gap: 0.375rem;
    padding: 0.0625rem 0.25rem;
    font-size: 0.700rem;
}

.data-type-indicator-small[b-02cy0zjc4o] {
    gap: 0.3125rem;
    padding: 0.05rem 0.2rem;
    font-size: 0.6rem;
}
/* /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. On a page with a menu the block lines up with the sidebar below it and
   narrows with it; on a page without a menu it always reads the fixed expanded token,
   because there is no sidebar edge to line up with. 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-expanded);
    width: var(--sidebar-width-expanded);
    padding: 0 calc((var(--topbar-height) - var(--topbar-logo-height)) / 2);
    background-color: white;
    text-decoration: none;
    transition: width 0.2s ease, flex-basis 0.2s ease;
}

.main-layout.has-sidebar .platform-brand[b-d7xigin7qb] {
    flex-basis: var(--sidebar-width);
    width: var(--sidebar-width);
}

/* Every visible consequence of the collapse click comes from this selector — the layout
   itself never re-renders after the click, only after a navigation, so a C# condition
   here would lag a full page behind what the user just did. */
:root[data-sidebar-collapsed="true"] .main-layout.has-sidebar .platform-brand[b-d7xigin7qb] {
    display: 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;
    transition: width 0.2s ease;
}

/* Positioned so a page overlay (YxLoadingOverlay) anchors to the content region instead of
   the viewport, keeping the header bar and the sidebar reachable while a page loads. */
.content[b-d7xigin7qb] {
    position: relative;
    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;
    transition: margin-left 0.2s ease;
}

.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 */
.nav-menu-environment[b-9e0nzk0f62] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.menu-sections[b-9e0nzk0f62] {
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    flex: 1 1 auto;
    overflow-y: auto;
}

.menu-section[b-9e0nzk0f62] {
    margin-bottom: 0.5rem;
}

.menu-section-header[b-9e0nzk0f62] {
    padding: 0.5rem 1rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #6c757d);
}

.menu-items[b-9e0nzk0f62] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-subitems[b-9e0nzk0f62] {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Fixed row height and label size come from the prototype (44px / 13.5px); they keep the rail
   aligned with the top bar's chrome instead of following the page font. */
.menu-item[b-9e0nzk0f62] {
    display: flex;
    align-items: center;
    width: 100%;
    height: 2.75rem;
    border: none;
    background: none;
    padding: 0 1rem;
    font-size: 0.84375rem;
    text-align: left;
    cursor: pointer;
    color: inherit;
}

.menu-item:hover:not(:disabled)[b-9e0nzk0f62] {
    background-color: var(--accent-color-subtle, rgba(0, 0, 0, 0.05));
}

.menu-item:disabled[b-9e0nzk0f62] {
    cursor: default;
    opacity: 0.5;
}

.menu-item.active[b-9e0nzk0f62] {
    background-color: var(--accent-color);
    color: #fff;
}

.menu-item.active:hover:not(:disabled)[b-9e0nzk0f62] {
    background-color: var(--accent-color);
    color: #fff;
    filter: brightness(0.92);
}

.menu-item.sub-item[b-9e0nzk0f62] {
    padding-left: 2.5rem;
}

.icon-text[b-9e0nzk0f62] {
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.icon[b-9e0nzk0f62] {
    width: 1.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-right: 0.75rem;
    font-size: 1.125rem;
}

.text[b-9e0nzk0f62] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-menu-environment.collapsed .menu-item[b-9e0nzk0f62] {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.nav-menu-environment.collapsed .icon-text[b-9e0nzk0f62] {
    justify-content: center;
}

.nav-menu-environment.collapsed .icon[b-9e0nzk0f62] {
    margin-right: 0;
}

/* Collapsed, a section is a short rule instead of a name; the name stays reachable as the
   header's tooltip, so the empty header still needs a hoverable height. */
.nav-menu-environment.collapsed .menu-section-header[b-9e0nzk0f62] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.75rem;
    padding: 0;
}

/* The rule is drawn as a border rather than as a one-pixel-high box: a hairline is decoration and
   should stay crisp instead of thickening with the browser font-size preference, and a height in
   pixels is the one way of expressing it that the scaling guard rejects. */
.nav-menu-environment.collapsed .menu-section-header[b-9e0nzk0f62]::after {
    content: "";
    width: 1.25rem;
    border-top: 1px solid var(--grey-300);
}

.menu-collapse-toggle[b-9e0nzk0f62] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    height: 2.75rem;
    border: none;
    border-top: 1px solid var(--grey-200);
    background: none;
    padding: 0 1rem;
    font-size: 0.84375rem;
    cursor: pointer;
    color: inherit;
    flex: 0 0 auto;
}

.menu-collapse-toggle:hover[b-9e0nzk0f62] {
    background-color: var(--accent-color-subtle, rgba(0, 0, 0, 0.05));
}
/* /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" | "Boolean"   — longest 7 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;
    margin-bottom: 0.625rem;
}

.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 */
/* Compact, inline variant: this component sits in the Views control row next to the Data/Classify
   tabs, not in a wide detail-form layout. */
.checkbox-row[b-usqjdtnjlw] {
    display: flex;
}

.combobox-caption[b-usqjdtnjlw] {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.combobox-container[b-usqjdtnjlw] {
    flex: 0 0 auto;
    width: 17.5rem;
}

.flex-container[b-usqjdtnjlw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* /PageComponents/Viewpoint/ViewpointPickerComponent.razor.rz.scp.css */
.viewpoint-picker[b-v9k0hze5u2] {
    position: relative;
    display: inline-flex;
}

.viewpoint-picker-toggle[b-v9k0hze5u2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 0.75rem;
    max-width: 24rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    cursor: pointer;
}

.viewpoint-picker-toggle-label[b-v9k0hze5u2] {
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.viewpoint-picker-toggle-chevron[b-v9k0hze5u2] {
    flex: 0 0 auto;
    color: var(--text-tertiary);
    font-size: 0.75rem;
}

.viewpoint-picker-panel[b-v9k0hze5u2] {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    width: 26rem;
    padding: 0.5rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    box-shadow: var(--shadow-lg);
}

.viewpoint-picker-list[b-v9k0hze5u2] {
    max-height: 20rem;
    overflow-y: auto;
    margin-top: 0.5rem;
}

.viewpoint-picker-item[b-v9k0hze5u2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--radius-sm);
}

.viewpoint-picker-item:hover[b-v9k0hze5u2] {
    background-color: var(--surface-hover);
}

.viewpoint-picker-item-selected[b-v9k0hze5u2] {
    background-color: var(--surface-selected);
}

.viewpoint-picker-item-select[b-v9k0hze5u2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    text-align: left;
    background: none;
    border: none;
    padding: 0.4rem 0.5rem;
    cursor: pointer;
}

.viewpoint-picker-item-selected-icon[b-v9k0hze5u2] {
    flex: 0 0 auto;
    color: var(--teal-600);
}

.viewpoint-picker-item-pin[b-v9k0hze5u2] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
}

/* A pinned viewpoint reads as unmistakably different from an unpinned one - the same glyph in
   two FontAwesome weights alone is too subtle to notice (US#25313 v16 review). Colour carries
   the distinction instead. */
.viewpoint-picker-pin-active[b-v9k0hze5u2] {
    color: var(--amber-600);
}

.viewpoint-picker-pin-inactive[b-v9k0hze5u2] {
    color: var(--text-tertiary);
}

.viewpoint-picker-empty[b-v9k0hze5u2] {
    padding: 0.5rem;
    color: var(--text-tertiary);
}

.viewpoint-picker-footer[b-v9k0hze5u2] {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-subtle);
}

.viewpoint-picker-manage[b-v9k0hze5u2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0.4rem 0.5rem;
    color: var(--text-link);
}

.viewpoint-picker-manage:hover[b-v9k0hze5u2] {
    background-color: var(--surface-hover);
}
/* /PageComponents/Viewpoint/ViewpointQuickSwitchComponent.razor.rz.scp.css */
.viewpoint-quick-switch[b-8bj819nw4u] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-bottom: 0.625rem;
}

.viewpoint-quick-switch-caption[b-8bj819nw4u] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-right: 0.125rem;
}

.viewpoint-quick-switch-chip[b-8bj819nw4u] {
    display: inline-flex;
    align-items: center;
    height: 1.625rem;
    padding: 0 0.25rem 0 0.5625rem;
    gap: 0.25rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-subtle);
    background: var(--surface-card);
}

.viewpoint-quick-switch-chip-active[b-8bj819nw4u] {
    border-color: var(--teal-500);
    background: var(--surface-selected);
}

.viewpoint-quick-switch-chip-label[b-8bj819nw4u] {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    font-size: 0.78125rem;
    font-weight: 500;
    color: var(--text-secondary);
    max-width: 11.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.viewpoint-quick-switch-chip-active .viewpoint-quick-switch-chip-label[b-8bj819nw4u] {
    font-weight: 600;
    color: var(--teal-600);
}

.viewpoint-quick-switch-chip-pin[b-8bj819nw4u] {
    display: inline-flex;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0.125rem;
    font-size: 0.6875rem;
}

.viewpoint-quick-switch-pin-active[b-8bj819nw4u] {
    color: var(--amber-600);
}

.viewpoint-quick-switch-pin-inactive[b-8bj819nw4u] {
    color: var(--text-tertiary);
}
/* /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;
}
/* /PageComponents/Views/BlockedOnDataMessage.razor.rz.scp.css */
.views-empty-state[b-kekyewzuor] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    text-align: center;
    max-width: 35rem;
    margin: 0 auto;
}

.views-empty-state-icon[b-kekyewzuor] {
    font-size: 1.75rem;
    color: var(--amber-600);
    margin-bottom: 0.25rem;
}

.views-empty-state-title[b-kekyewzuor] {
    font-weight: 600;
    font-size: 1.125rem;
}

.views-empty-state-body[b-kekyewzuor] {
    color: var(--text-secondary);
}

.views-blocked-on-data-actions[b-kekyewzuor] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.views-empty-state-hint[b-kekyewzuor] {
    color: var(--text-tertiary);
    font-size: 0.8125rem;
    margin-top: 0.5rem;
}
/* /PageComponents/Views/NoSchemaMessage.razor.rz.scp.css */
.views-empty-state[b-rqa1mdpz2i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    text-align: center;
    max-width: 35rem;
    margin: 0 auto;
}

.views-empty-state-icon[b-rqa1mdpz2i] {
    font-size: 1.75rem;
    color: var(--text-tertiary);
    margin-bottom: 0.25rem;
}

.views-empty-state-title[b-rqa1mdpz2i] {
    font-weight: 600;
    font-size: 1.125rem;
}

.views-empty-state-body[b-rqa1mdpz2i] {
    color: var(--text-secondary);
}
/* /PageComponents/Views/NoViewpointsMessage.razor.rz.scp.css */
.views-empty-state[b-18ojep62k8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    text-align: center;
    max-width: 35rem;
    margin: 0 auto;
}

.views-empty-state-icon[b-18ojep62k8] {
    font-size: 1.75rem;
    color: var(--text-tertiary);
    margin-bottom: 0.25rem;
}

.views-empty-state-title[b-18ojep62k8] {
    font-weight: 600;
    font-size: 1.125rem;
}

.views-empty-state-body[b-18ojep62k8] {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
/* /PageComponents/Views/ViewsToolbarComponent.razor.rz.scp.css */
.views-toolbar[b-ptx30jxcaf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.views-toolbar-left[b-ptx30jxcaf],
.views-toolbar-right[b-ptx30jxcaf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.views-toolbar-row-count[b-ptx30jxcaf] {
    display: inline-flex;
}

.views-toolbar-row-count[b-ptx30jxcaf]  .grid-row-count-summary {
    justify-content: flex-start;
    margin-bottom: 0;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.views-toolbar-caption[b-ptx30jxcaf] {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.views-toolbar-divider[b-ptx30jxcaf] {
    width: 0.0625rem;
    height: 1.25rem;
    background: var(--border-subtle);
}

.views-active-rows-only-chip[b-ptx30jxcaf] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--surface-sunken);
    border: 1px solid var(--border-subtle);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.views-toolbar[b-ptx30jxcaf]  .views-tool-active {
    background: var(--teal-100);
    border-color: var(--teal-500);
    color: var(--teal-700);
}

.views-legend-anchor[b-ptx30jxcaf] {
    position: relative;
    display: inline-flex;
}

.views-legend-popover[b-ptx30jxcaf] {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    z-index: 20;
    width: 18.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}

.views-legend-heading[b-ptx30jxcaf] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-tertiary);
}

.views-legend-row[b-ptx30jxcaf] {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
}

.views-legend-text[b-ptx30jxcaf] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.views-legend-mark[b-ptx30jxcaf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    flex: 0 0 auto;
}

.views-legend-mark-invalid-value[b-ptx30jxcaf] {
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 3px;
    background: var(--status-invalid-bg);
    border: 1px solid var(--status-invalid-fg);
}

.views-legend-mark-invalid-count[b-ptx30jxcaf] {
    min-width: 1.125rem;
    height: 1.0625rem;
    padding: 0 0.3125rem;
    border-radius: var(--radius-pill);
    background: var(--status-invalid-bg);
    color: var(--status-invalid-fg);
    font-size: 0.6875rem;
    font-weight: 700;
}

.views-legend-icon[b-ptx30jxcaf] {
    width: 1.25rem;
    flex: 0 0 auto;
    text-align: center;
    font-size: 0.875rem;
}

.views-legend-icon-valid[b-ptx30jxcaf] {
    color: var(--status-valid-fg);
}

.views-legend-icon-unassigned[b-ptx30jxcaf] {
    color: var(--neutral-400);
}
/* /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;
}

/* Matches the "Details" panel width on the ParseRuleBooleanEdit page (YxSettingsCard in a column
   capped at 60rem): the expression builder renders its own card, so it is sized here rather than
   wrapped in a second card. Its own heading is suppressed (ShowSummaryTitle="false" in the .razor)
   because the surrounding YxFormItem already shows the same label above it. */
[b-m7kjld8bpy] .data-column-edit-derived-expression-builder {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 60rem;
}
/* /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/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 */
/* The Compare button and the selection count read as a pair, so they sit further apart than the
   shared .grid-toolbar gap in app.css; the margins stay shared. */
.grid-toolbar[b-ynv7vtv3ht] {
    gap: 1.5625rem;
}
/* /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/Delivery/Detail/DeliveryDetailPage.razor.rz.scp.css */
.delivery-detail-header[b-144tocikml] {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
    padding-top: 0.75rem;
}

.delivery-running-block[b-144tocikml] {
    padding: 1rem;
    margin-bottom: 0.875rem;
}

.delivery-running-title[b-144tocikml] {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.delivery-running-hint[b-144tocikml] {
    font-size: 0.8125rem;
    color: var(--grey-600);
}

.delivery-failure-block[b-144tocikml] {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    padding: 0.875rem;
    margin-bottom: 0.875rem;
    background-color: var(--danger-color-subtle);
    border: 1px solid var(--button-color-danger);
    border-radius: 8px;
}

.delivery-failure-icon[b-144tocikml] {
    margin-top: 0.125rem;
    color: var(--button-color-danger);
}

.delivery-failure-title[b-144tocikml] {
    font-weight: 600;
    color: var(--button-color-danger);
}

.delivery-failure-reason[b-144tocikml] {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--grey-600);
}

.delivery-facts[b-144tocikml] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
    padding: 1rem;
    margin-bottom: 0.875rem;
}

.delivery-fact[b-144tocikml] {
    display: flex;
    flex-direction: column;
}

.delivery-fact-label[b-144tocikml] {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--grey-700);
}

.delivery-fact-value[b-144tocikml] {
    margin-top: 0.125rem;
    font-size: 0.875rem;
    font-weight: normal;
}

.delivery-file-available[b-144tocikml] {
    color: var(--green-700);
}

.delivery-file-expired[b-144tocikml] {
    color: var(--grey-600);
}

.delivery-component-breakdown[b-144tocikml] {
    padding: 0.75rem;
}

.delivery-component-breakdown h3[b-144tocikml] {
    padding: 0.25rem 0.25rem 0.75rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--grey-900);
}

.delivery-component-count[b-144tocikml] {
    display: block;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.delivery-component-count-valid[b-144tocikml] {
    color: var(--green-700);
}

.delivery-component-count-invalid[b-144tocikml] {
    color: var(--button-color-danger);
}

.delivery-component-count-muted[b-144tocikml] {
    color: var(--grey-600);
}

/* The right padding lines the totals up with the grid values above them: the grid right-aligns each
   value at its own cell padding, which this row has to match. Nudge this one value if it sits a
   hair off - the grid's padding comes from the DevExpress stylesheet, not from ours. */
.delivery-total-row[b-144tocikml] {
    display: flex;
    align-items: center;
    font-weight: 600;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    margin-top: 0.25rem;
    background-color: var(--grey-50);
    border-top: 2px solid var(--grey-300);
}

.delivery-total-label[b-144tocikml] {
    flex: 1 1 auto;
}

.delivery-total-value-rows[b-144tocikml] {
    flex: 0 0 8.75rem;
}

.delivery-total-value-valid[b-144tocikml],
.delivery-total-value-invalid[b-144tocikml] {
    flex: 0 0 7.5rem;
}

.delivery-unknown-validation[b-144tocikml] {
    color: var(--grey-600);
    font-size: 0.8125rem;
}
/* /Pages/Delivery/Overview/DeliveryOverviewPage.razor.rz.scp.css */
    .grid-toolbar[b-9r3yq7esca]  .yx-search-box {
        flex: 0 0 auto;
    }

    .grid-toolbar[b-9r3yq7esca]  .grid-row-count-summary {
        margin-left: auto;
    }

.delivery-availability-text[b-9r3yq7esca] {
    padding: 0 0.3125rem;
    color: var(--grey-600);
    font-size: 0.8125rem;
}

/* This is the one name cell that stacks two lines: the file name and the availability text below it.
   The global .clickable-text borrows the cell padding above and below to enlarge the hover highlight
   (see app.css); borrowing it below would pull the availability line up, so only the top is kept. */
.clickable-cell-button[b-9r3yq7esca]  .clickable-text {
    margin-bottom: 0;
    padding-bottom: 0;
}
/* /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/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));
    /* Caps the page at the viewport instead of just using it as a floor, so .page-body's
       min-height: 0 below actually has a limited space to size against and can hand off
       overflow to internal scrolling instead of growing the whole page. */
    max-height: calc(100vh - var(--topbar-height));
}

.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: var(--spacing-10) 0;
    border-top: 1px solid var(--grey-100);
    /* Without this the footer is just the last item in flow and gets pushed off-screen once
       .page-body's content overflows its allotted space; this keeps it from shrinking away. */
    flex-shrink: 0;
}

/* 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;
    /* Flex/grid items default to min-height: auto, i.e. "at least as tall as my content."
       That let long step content (e.g. the Step3 tree) grow this area — and everything above
       it, all the way up to .page-content — past the viewport, shoving the footer out of view
       instead of scrolling internally. This lets it shrink to the space .page-body gives it. */
    min-height: 0;
}

    .step-area > .step-content[b-2a5mqnek2s] {
        grid-area: 1 / 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

        .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;
    /* Same min-height: auto problem as .step-area, one level up — this is the flex item whose
       content (the whole step-area/tree) was dictating .page-content's height. Setting it to 0
       lets .page-body actually respect the space left over after header + footer, instead of
       growing to fit its tallest possible child. */
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* /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;
    max-width: 50rem;
}

.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/SignedOutPage.razor.rz.scp.css */
.signed-out-page[b-th79wm0vsa] {
    max-width: 32rem;
    margin: 6rem auto;
    text-align: center;
}

.signed-out-title[b-th79wm0vsa] {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
}

.signed-out-message[b-th79wm0vsa] {
    margin-bottom: 1.5rem;
}
/* /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/View/ViewsPage.razor.rz.scp.css */
/* baseline, not flex-start: the title block is two lines tall, so aligning the picker to the
   block's top leaves it sitting above the title. Baseline puts its label on the title's line. */
.views-header[b-3uoogneeca] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.625rem;
}

.views-header-subtitle[b-3uoogneeca] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}

.views-card[b-3uoogneeca] {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    padding: 0.75rem;
}

.views-control-row[b-3uoogneeca] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
    flex-wrap: wrap;
}

.views-controls-spacer[b-3uoogneeca] {
    flex: 1 1 auto;
}

.views-viewpoint-row[b-3uoogneeca] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
    flex-wrap: wrap;
}

/* The picker's own panel anchors right:0, which reads fine at its usual spot at the far right of
   the header row - here it sits at the left of the expanded view instead, so right:0 would push
   the 26rem panel off the left edge of the viewport. Anchor it to the left edge here instead. */
.views-viewpoint-row[b-3uoogneeca]  .viewpoint-picker-panel {
    right: auto;
    left: 0;
}

.views-expand-control[b-3uoogneeca] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.views-expand-toggle[b-3uoogneeca] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.75rem;
    cursor: pointer;
}

.views-expand-hint[b-3uoogneeca] {
    font-size: 0.8125rem;
    color: var(--text-tertiary);
}

/* ViewpointQuickSwitchComponent's own bottom margin is meant for its original placement as a
   standalone row below the header - here it sits inline in this row instead, which already
   carries the same bottom spacing itself. */
.views-viewpoint-row[b-3uoogneeca]  .viewpoint-quick-switch {
    margin-bottom: 0;
}

.views-assign-component-bar[b-3uoogneeca] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.625rem;
}

.views-state-cell[b-3uoogneeca] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.78125rem;
}

.views-state-dot[b-3uoogneeca] {
    display: inline-block;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    flex: 0 0 auto;
}

.views-state-dot-active[b-3uoogneeca] {
    background: var(--teal-500);
}

.views-state-dot-inactive[b-3uoogneeca] {
    background: var(--neutral-400);
}

.views-state-label-active[b-3uoogneeca] {
    color: var(--teal-600);
}

.views-state-label-inactive[b-3uoogneeca] {
    color: var(--text-secondary);
}

/* The Views page's own segmented look for the shared tab strip - kept here rather than in
   YxTabStrip's own stylesheet because YxTabStrip is also used by the Environment overview page,
   and that page's look must not change (frontend-conventions.md SS D: a shared look is a class,
   but this particular treatment is not yet shared beyond this page). */
.views-control-row[b-3uoogneeca]  .yx-tab-strip {
    background: var(--neutral-150);
    padding: 0.125rem;
    gap: 0.125rem;
    border-radius: var(--radius-sm);
}

.views-control-row[b-3uoogneeca]  .yx-tab-strip-item {
    height: 1.875rem;
    border-radius: var(--radius-xs);
    font-size: 0.84375rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.views-control-row[b-3uoogneeca]  .yx-tab-strip-item.yx-tab-strip-item-active {
    background: var(--surface-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-xs);
}

/* Fixed to the viewport rather than left in the .content flow, and given an explicit height
   instead of relying on .page-fill's height:100% resolving through position:fixed - the grid's
   own height cap (.scrollable-grid, max-height:100%) only holds while every ancestor in the
   chain has a definite height, and this is the one link in that chain the Expand toggle changes. */
/* box-sizing keeps the padding inside the 100vh box: without it the panel is taller than the
   viewport and the card is pushed past the bottom edge. The flex column is what lets the card
   take the remaining height instead of only as much as its content needs. */
.views-page-expanded[b-3uoogneeca] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    box-sizing: border-box;
    /* .page-content carries a horizontal margin that keeps applying while fixed, which pulls both
       edges inward - the expanded panel has to span the viewport, so the margin goes. */
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface-canvas);
    padding: 0.75rem 1rem;
}

/* Anchored on .views-grid-wrapper rather than the grid's own CssClass - DxGrid is a Razor
   component, not an HTML element, so scoped CSS never carries its scope attribute and a
   selector anchored there matches nothing (frontend-conventions.md SS D /
   https://learn.microsoft.com/aspnet/core/blazor/components/css-isolation). The wrapper is
   a real element in this component's own markup, which ::deep can reach through. */
.views-grid-wrapper[b-3uoogneeca]  .views-grid-header-row {
    height: 2.25rem;
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border-strong);
}

.views-grid-wrapper[b-3uoogneeca]  .views-grid-header-cell {
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Row height is fixed at 2rem (32px) - AC16 depends on every row having the same height. */
.views-grid-wrapper[b-3uoogneeca]  .views-grid-data-row {
    height: 2rem;
    background: var(--surface-card);
    border-bottom: 1px solid var(--border-subtle);
}

.views-grid-wrapper[b-3uoogneeca]  .views-grid-data-row-selected {
    background: var(--surface-selected);
}

.views-grid-wrapper[b-3uoogneeca]  .views-grid-data-row-inactive {
    opacity: .55;
}

.views-grid-wrapper[b-3uoogneeca]  .views-grid-data-cell {
    font-size: 0.8125rem;
    padding: 0 0.625rem;
}
/* /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-blocked-on-data[b-ckkt21vjd0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 3rem 1.5rem;
    text-align: center;
    max-width: 34rem;
    margin: 0 auto;
}

.vp-blocked-on-data-body[b-ckkt21vjd0] {
    color: var(--text-secondary, #666);
}

.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;
}

/* The filter builder draws its own rows and borders, so the rejected state is framed around the
   whole editor rather than on the input that caused it: the offending edit has already been rolled
   back, so there is no longer a field to point at. */
.viewpoint-filterbuilder-invalid[b-2df9tddabf] {
    padding: var(--spacing-050);
    border: 1px solid var(--red-500);
    border-radius: 6px;
    background-color: var(--red-50);
}

.viewpoint-filterbuilder-violation[b-2df9tddabf] {
    margin-top: var(--spacing-050);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--red-700);
}
/* /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);
}

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

.viewpoint-delivery-hint[b-vg41hdzntf] {
    margin-top: var(--spacing-025);
    color: var(--grey-500);
}

.viewpoint-component-condition-hint[b-vg41hdzntf] {
    margin-top: var(--spacing-025);
    color: var(--grey-500);
}


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

/* This toolbar holds only the row count, which sits on the right. Layout and margins come from
   the shared .grid-toolbar in app.css. */
.grid-toolbar[b-st8x0wtjpo] {
    justify-content: flex-end;
}

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