@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> ("Lessen voortgang v2" 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-grid-table td, .rz-grid-table th { font-size: 14px; }
.rz-grid-table tbody td, .rz-grid-table tbody td *:not(.rzi):not(.rz-button-text) { font-size: 14px; line-height: 20px; }
.rz-grid-table tbody td { padding-top: 10px; padding-bottom: 10px; height: 41px; box-sizing: border-box; }
.rz-grid-table tbody td[colspan] { padding-top: 0; padding-bottom: 0; height: auto; }
.rz-grid-table thead th > div { min-height: 40px; box-sizing: border-box; }
.rz-grid-table thead th { font-size: 13px; }
.rz-tabview .rz-tabview-nav li, .rz-tabview.rz-tabview-top > .rz-tabview-nav li { margin: 0 !important; padding: 0 !important; }
.rz-tabview .rz-tabview-nav li a, .rz-tabview.rz-tabview-top > .rz-tabview-nav li a { padding: 12px 16px !important; margin: 0 !important; line-height: 20px !important; }
.rz-tabview .rz-tabview-nav li:first-child a { padding-left: 0 !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 sidebar as a 72px icon rail that slides open over the content on hover (or when pinned by its toggle). */
.lb-side { width: 72px; overflow: hidden; white-space: nowrap; box-sizing: border-box; transition: width .22s ease, box-shadow .22s ease; }
.lb-side:hover, .lb-side.lb-side-pin { width: 250px; box-shadow: 12px 0 32px rgba(28, 25, 23, 0.14); }
.lb-side .lb-side-hide { opacity: 0; transition: opacity .12s ease; }
.lb-side:hover .lb-side-hide, .lb-side.lb-side-pin .lb-side-hide { opacity: 1; transition: opacity .16s ease .1s; }
.lb-side .rz-navigation-item-link { padding-left: 10px !important; padding-right: 10px !important; }
.lb-side .rz-navigation-item-icon { margin-right: 12px !important; flex: none; }
.lb-side .rz-sidebar-toggle .rzi { font-size: 24px; width: 24px; height: 24px; }
/* The design gives the inner column a fixed 200px; it has to follow the rail (72px) and the open panel (250px) so the
   logo row can put the logo left and keep the menu toggle in view on the right. */
.lb-side .expanded { width: 100% !important; }
/* The purple marks sit above the screen; while the sidebar is open over the content they fade out. */
.lb-ring { transition: opacity .2s ease; }
.lb-stage:has(.lb-side:hover) .lb-ring, .lb-stage:has(.lb-side-pin) .lb-ring { opacity: 0; }

/* 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); }
}

/* The design's style-hover / style-focus attributes as classes */
.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; }
.lb-option:hover { background: var(--lb-neutral-4) !important; }
.lb-day:hover { background: var(--lb-neutral-4) !important; }
.lb-white:hover { background: rgba(255,255,255,0.12) !important; }
.lb-grade-input:hover { border-color: var(--lb-neutral-2) !important; }
.lb-grade-input:focus { border-color: var(--lb-neutral-6) !important; background: var(--lb-neutral-white) !important; }
.lb-rowlink:hover > td { background: var(--lb-neutral-4) !important; }

/* Icon-only text buttons: navy like the sidebar, as the project rules say (the theme's `.rz-button.rz-secondary`
   would otherwise paint them red); `.lb-on` = the panel behind the button is open. */
.lb-ib, .lb-ib .rzi { color: var(--lb-neutral-black) !important; }
.lb-ib.lb-on, .lb-ib.lb-on .rzi { color: var(--lb-primary) !important; }

/* Default mode: a fixed 1600x800 stage, zoomed to whatever size the iframe gets.
   The stage size is set from the page (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; }

/* Grade type dropdowns in the variant tree (native selects, styled like the tree's inputs) */
.lb-gt:disabled { opacity: 1; }
.lb-gt:focus { outline: 2px solid var(--lb-secondary); outline-offset: -1px; }

@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}}