@font-face{font-family:"Material Symbols";src:url("fonts/MaterialSymbolsOutlined.woff2") format("woff2 supports variations"),url("fonts/MaterialSymbolsOutlined.woff2") format("woff2-variations");font-style:normal;font-weight:100 700}
/* Page rules for the embeddable prototype. The design system itself is in styles.css. */

/* From the design file's <helmet> ("Bestelling voor studenten plaatsen" is the screen design) */
html, body { margin: 0; background: #edf3f7; }
a { color: var(--lb-action-secondary-default); }
a:hover { color: var(--lb-action-secondary-hover); }
input::placeholder, textarea::placeholder { font-style: italic; color: var(--lb-neutral-6); }
.rz-grid-table thead th .rz-column-title { padding-right: 5px; box-sizing: border-box; }
.rz-steps-item.rz-state-disabled > .rz-menuitem-link > .rz-steps-number { background-color: var(--lb-neutral-3) !important; color: var(--lb-neutral-1) !important; }
.rz-steps-item.rz-state-disabled > .rz-menuitem-link > .rz-steps-title { color: var(--lb-neutral-1) !important; }
.rz-sidebar .rz-panel-menu { --rz-panel-menu-item-margin-block: 0px; --rz-panel-menu-item-padding-block: 8px; --rz-panel-menu-item-line-height: 20px; }
.rz-sidebar .rz-panel-menu .nav-item { padding-bottom: 0 !important; margin-bottom: 12px !important; }

/* The purple marker rings of the decisions panel */
@keyframes lbTourPulse {
  0%, 100% { outline: 0 solid rgba(82, 127, 159, 0.35); }
  50% { outline: 6px solid rgba(82, 127, 159, 0); }
}

/* Dropdown options: navy fill on hover, as the design's style-hover rule */
.lb-menu-item:hover { background: var(--lb-action-secondary-default) !important; color: var(--lb-action-secondary-inverted) !important; }
.lb-menu-item:hover .rzi { color: inherit !important; }

/* Clickable table rows (invoice overview): the design's hover tint */
.lb-rowlink { cursor: pointer; }
.lb-rowlink:hover > td { background: var(--lb-neutral-4) !important; }

/* Dialog header icon buttons (full screen, close): navy like the sidebar, as the project rules say.
   The design system's `.rz-button.rz-secondary { color: ... !important }` would otherwise paint them red. */
.lb-dlg-icon, .lb-dlg-icon .rzi { color: var(--lb-neutral-black) !important; }

/* Invoice overview fitted to the content area (no sideways scrolling): 13px cells, as the purchaser overview */
.lb-fit thead th .rz-column-title { font-size: 12px; line-height: 18px; }
.lb-fit tbody td, .lb-fit tbody td .rz-cell-data { font-size: 13px; line-height: 18px; }
.lb-fit tbody td { vertical-align: middle; }

/* Default mode: a fixed 1600x800 stage, zoomed to whatever size the iframe gets.
   The stage size is set from index.html (STAGE_W / STAGE_H); these are the fallbacks. */
html, body { height: 100%; }
body { overflow: hidden; font-family: "Inter", system-ui, sans-serif; }
#viewport { position: fixed; inset: 0; overflow: hidden; background: #edf3f7; }
#stage { position: absolute; left: 0; top: 0; width: 1600px; height: 800px; transform-origin: 0 0; }
#root { height: 100%; }

/* ?fit=reflow : the original responsive layout instead of zooming (panel stacks under the screen below 900px) */
html.reflow, html.reflow body { height: auto; overflow: auto; }
html.reflow #viewport { position: static; overflow: visible; }
html.reflow #stage { position: static; width: auto; height: auto; transform: none !important; }
html.reflow #root { min-height: 100vh; }

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}








/* Responsive portfolio decisions */
 html.reflow #root{min-height:0;height:auto}
 html.embedded-tour,html.embedded-tour body{overflow:hidden}
 html.embedded-tour:fullscreen,html.embedded-tour:fullscreen body{overflow:auto}
 .portfolio-tour{min-height:0!important}
 .portfolio-tour>div:first-child{position:static!important;max-height:none!important;padding:18px!important}
 .portfolio-tour>div:first-child{font-family:var(--tour-text-family,'DM Sans',Arial,sans-serif);color:var(--tour-text-color,#193651)}
 .portfolio-tour>div:last-child{padding:24px!important}
 @media(max-width:759px){.portfolio-tour>div:first-child{order:0!important;border:0!important}.portfolio-tour>div:last-child{order:1!important}}