/* GEGENEREERD door site/werktuig/app_onderdelen.py, niet met de hand wijzigen.
   De CSS-regels van de app (frontend/src/index.css en styles/tokens.css) die de
   onderdelen in site/app-onderdelen/ raken, gescoped onder .app-scherm. Het
   donkere thema van de app ([data-theme='dark']) staat hier onder
   prefers-color-scheme, want de site kent geen themaknop. */
.app-scherm { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light; --brand: #1f69ff; --brand-contrast: #fff; --brand-strong: color-mix(in oklab, var(--brand), #000 12%); --brand-stronger: color-mix(in oklab, var(--brand), #000 24%); --brand-soft: color-mix(in srgb, var(--brand) 14%, var(--surface)); --brand-tint: color-mix(in srgb, var(--brand) 7%, var(--surface)); --focus-ring: color-mix(in srgb, var(--text) 55%, transparent); --focus-rand: color-mix(in srgb, var(--text) 70%, transparent); --brand-strong-bg: color-mix(in oklab, var(--brand), #000 12%); --brand-stronger-bg: color-mix(in oklab, var(--brand), #000 24%); --brand-teken: var(--brand-teken-licht,var(--brand)); --keuze-vink-op-donker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M6.55 12.05 2.6 8.1l1.3-1.3 2.65 2.65 5.55-5.55 1.3 1.3-6.85 6.85Z'/%3E%3C/svg%3E"); --keuze-vink-op-licht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2314161b' d='M6.55 12.05 2.6 8.1l1.3-1.3 2.65 2.65 5.55-5.55 1.3 1.3-6.85 6.85Z'/%3E%3C/svg%3E"); --keuze-stip-op-donker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle fill='%23ffffff' cx='8' cy='8' r='3.4'/%3E%3C/svg%3E"); --keuze-stip-op-licht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle fill='%2314161b' cx='8' cy='8' r='3.4'/%3E%3C/svg%3E"); --keuze-vink: var(--keuze-vink-licht-thema,var(--keuze-vink-op-donker)); --keuze-stip: var(--keuze-stip-licht-thema,var(--keuze-stip-op-donker)); --link: color-mix(in oklab, var(--brand), #000 20%); --bg: color-mix(in srgb, var(--brand) 5%, #f3f4f6); --surface: #fff; --surface-2: color-mix(in srgb, var(--brand) 6%, #fff); --border: color-mix(in srgb, var(--brand) 9%, #e2e4ea); --border-strong: color-mix(in srgb, var(--brand) 16%, #878a97); --text: #14161b; --text-dim: #47505f; --text-muted: #838b98; --status-queued: #8b93a1; --status-transcribing: #a96508; --tegoed-alarm: var(--status-transcribing); --status-review: #8a4fb8; --status-done: #258546; --status-error: #d33a34; --status-cancelled: #767d8b; --spreker-1: #6a5f98; --spreker-2: #507100; --spreker-3: #a94700; --spreker-4: #007374; --spreker-5: #960336; --spreker-6: #5f4600; --spreker-7: #085076; --spreker-8: #004d2d; --spreker-9: #811b78; --spreker-10: #940700; --spreker-11: #3a5fc9; --spreker-12: #766700; --spreker-13: #af3679; --spreker-14: #227357; --spreker-15: #175800; --speler-verloop: linear-gradient(90deg, var(--brand), var(--ramp-teal)); --fs-xs: .75rem; --fs-sm: .8125rem; --fs-base: .9375rem; --fs-md: 1.0625rem; --fs-lg: 1.25rem; --fs-xl: 1.625rem; --fs-2xl: 2rem; --font: "Inter Variable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --pagina-breedte: 55rem; --ruimte-in-blok: var(--sp-4); --ruimte-tussen-blokken: var(--sp-5); --ruimte-tussen-secties: var(--sp-8); --controle-hoogte: 2.375rem; --controle-hoogte-klein: 2rem; --pil-hoogte: 2.25rem; --radius-sm: .5rem; --radius: .75rem; --radius-lg: 1rem; --radius-pill: 999px; --shadow-sm: 0 1px 2px #12141e0f, 0 1px 3px #12141e0a; --shadow-md: 0 2px 4px #12141e0d, 0 10px 24px -8px #12141e24; --shadow-lg: 0 16px 48px -16px #12141e47; --ease: cubic-bezier(.22, 1, .36, 1); --dur-1: .12s; --dur-2: .19s; --ramp-navy: #0a398c; --ramp-blauw: #1f69ff; --ramp-teal: #1794a3; --ramp-groen: #58ba64; --ramp-lichtgroen: #87d545; --ramp-lijn: linear-gradient(180deg, var(--ramp-navy) 0%, var(--ramp-blauw) 30%, var(--ramp-teal) 55%, var(--ramp-groen) 80%, var(--ramp-lichtgroen) 100%); --kop-verloop: linear-gradient(100deg, var(--ramp-navy) 0%, var(--ramp-blauw) 55%, #146f7b 100%); --merkrail-sluier: #07183f94; --merkrail-bodem: #3d6742; --merkrail-rand: #ffffff2e; --merkrail-dim: #ffffffdb; --merkrail-dim-bodem: color-mix(in srgb, #fff 86%, var(--merkrail-bodem)); --merkrail-alarm: #ffd493; --merkrail-fout: #ffb3ae; --console-rail-sluier: var(--merkrail-sluier); --console-rail-bodem: var(--merkrail-bodem); --console-rail-rand: var(--merkrail-rand); --console-rail-dim: var(--merkrail-dim); --console-rail-dim-bodem: var(--merkrail-dim-bodem); --dur-3: .62s; --zweem-1: color-mix(in srgb, var(--ramp-teal) 14%, transparent); --zweem-2: color-mix(in srgb, var(--ramp-lichtgroen) 12%, transparent); --zweem-3: color-mix(in srgb, var(--ramp-navy) 10%, transparent); --blad-accent: #0a398c; --z-sticky: 100; --z-dropdown: 200; --z-toast: 400; --z-tooltip: 500; }
@media (prefers-color-scheme: dark) { .app-scherm { --lightningcss-light: ; --lightningcss-dark: initial; color-scheme: dark; --kop-verloop: linear-gradient(100deg, #5b9dff 0%, #57c2cf 55%, var(--ramp-lichtgroen) 100%); --merkrail-sluier: #07183f94; --merkrail-bodem: #3d6742; --merkrail-rand: #ffffff1a; --merkrail-dim: #ffffffdb; --merkrail-dim-bodem: color-mix(in srgb, #fff 86%, var(--merkrail-bodem)); --console-rail-sluier: var(--merkrail-sluier); --console-rail-bodem: var(--merkrail-bodem); --console-rail-rand: var(--merkrail-rand); --console-rail-dim: var(--merkrail-dim); --console-rail-dim-bodem: var(--merkrail-dim-bodem); --zweem-1: color-mix(in srgb, var(--ramp-teal) 14%, transparent); --zweem-2: color-mix(in srgb, var(--ramp-lichtgroen) 10%, transparent); --zweem-3: color-mix(in srgb, var(--ramp-navy) 10%, transparent); --brand-soft: color-mix(in srgb, var(--brand) 24%, var(--surface)); --brand-tint: color-mix(in srgb, var(--brand) 13%, var(--surface)); --brand-strong: color-mix(in oklab, var(--brand), #fff 35%); --brand-stronger: color-mix(in oklab, var(--brand), #fff 45%); --brand-teken: var(--brand-teken-donker,var(--brand)); --keuze-vink: var(--keuze-vink-donker-thema,var(--keuze-vink-op-donker)); --keuze-stip: var(--keuze-stip-donker-thema,var(--keuze-stip-op-donker)); --link: color-mix(in oklab, var(--brand), #fff 45%); --bg: color-mix(in srgb, var(--brand) 8%, #0e0f13); --surface: color-mix(in srgb, var(--brand) 6%, #17191e); --surface-2: color-mix(in srgb, var(--brand) 10%, #1c1f25); --border: color-mix(in srgb, var(--brand) 14%, #2a2d34); --border-strong: color-mix(in srgb, var(--brand) 22%, #6d7380); --text: #eceef2; --text-dim: #a4abb8; --text-muted: #767d8b; --status-transcribing: #f0a032; --status-review: #bb90e0; --status-done: #58ba64; --status-error: #f26b66; --status-cancelled: #8b93a1; --spreker-1: #beb4f3; --spreker-2: #80a500; --spreker-3: #ec7622; --spreker-4: #00a9ae; --spreker-5: #ff879d; --spreker-6: #e4af00; --spreker-7: #45bfff; --spreker-8: #85c9a1; --spreker-9: #f88eeb; --spreker-10: #ff9379; --spreker-11: #6995ff; --spreker-12: #ab9700; --spreker-13: #c684a3; --spreker-14: #00ab7a; --spreker-15: #a2f07b; --speler-verloop: linear-gradient(90deg, var(--ramp-teal), var(--ramp-lichtgroen)); --shadow-sm: 0 1px 2px #0006; --shadow-md: 0 2px 6px #0006, 0 12px 28px -10px #0009; --shadow-lg: 0 20px 56px -18px #000000b3; } }
.app-scherm * { box-sizing: border-box; }
.app-scherm { text-size-adjust: 100%; }
.app-scherm { background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-base); -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; margin: 0px; line-height: 1.5; }
.app-scherm button, .app-scherm input { font-family: inherit; }
.app-scherm pre { font-family: var(--mono); }
.app-scherm ::selection { background: color-mix(in srgb, var(--brand) 22%, transparent); }
.app-scherm .kop-h1, .app-scherm .kop-h3, .app-scherm .kop-h4 { letter-spacing: -0.014em; color: var(--text); text-wrap: balance; margin: 0px; font-weight: 650; line-height: 1.2; }
.app-scherm .kop-h1 { font-size: var(--fs-2xl); letter-spacing: -0.022em; }
.app-scherm .kop-h3 { font-size: var(--fs-md); }
.app-scherm p { margin: 0px; }
.app-scherm a { color: var(--link); }
.app-scherm { scrollbar-gutter: stable; }
.app-scherm main > section { width: 100%; max-width: var(--pagina-breedte); margin-inline: auto; }
.app-scherm main > section.pagina-breed { max-width: min(76rem, 100cqw); }
.app-scherm .app-indeling { min-height: 780.0px; display: flex; }
.app-scherm .werkgebied { width: 100%; min-width: 0px; padding: var(--sp-10) var(--sp-8) var(--sp-12); flex: 1 1 0%; position: relative; container: werkgebied / inline-size; }
.app-scherm .werkgebied::before { content: ""; z-index: -1; pointer-events: none; background: radial-gradient(40% 35% at 100% 0%, var(--zweem-1), transparent 70%), radial-gradient(35% 40% at 100% 100%, var(--zweem-2), transparent 70%), radial-gradient(30% 30% at 40% 100%, var(--zweem-3), transparent 70%); position: fixed; inset: 0px; }
.app-scherm .pagina > * + * { margin-top: var(--ruimte-tussen-secties); }
.app-scherm .pagina.pagina-kaarten > * + * { margin-top: var(--ruimte-tussen-blokken); }
.app-scherm .pagina { animation: opkomen var(--dur-3) var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .app-scherm .pagina { animation-name: vervagen; animation-duration: 0.22s; animation-delay: 0s; } }
.app-scherm { --rail-breedte: 0px; }
.app-scherm { --rail-breedte: 15rem; }
.app-scherm .rail { isolation: isolate; align-self: flex-start; gap: var(--sp-1); width: 15rem; height: 780.0px; padding: var(--sp-5) var(--sp-3); background: var(--merkrail-bodem); color: rgb(255, 255, 255); transition: width .3s var(--ease); flex-direction: column; flex-shrink: 0; display: flex; position: sticky; top: 0px; overflow: clip; }
.app-scherm .rail .merkwolk { z-index: -2; pointer-events: none; width: 15rem; height: 780.0px; position: absolute; inset: 0px auto auto 0px; overflow: clip; }
.app-scherm .rail .merkwolk svg { width: 100%; height: 100%; display: block; position: absolute; inset: 0px; }
.app-scherm .rail-sluier { z-index: -1; pointer-events: none; background: var(--merkrail-sluier); position: absolute; inset: 0px; }
.app-scherm .rail .rail-sluier { box-shadow: rgba(255, 255, 255, 0.16) 0px 1px inset; }
.app-scherm .rail :focus-visible { outline-offset: 2px; box-shadow: none; outline: rgb(255, 255, 255) solid 2px; }
.app-scherm .rail { user-select: none; }
.app-scherm .rail-merk { padding: var(--sp-2) 2px var(--sp-4); color: rgb(255, 255, 255); justify-content: center; align-items: center; display: flex; }
.app-scherm .merk-capsule { min-width: 0px; max-width: 14rem; height: var(--controle-hoogte); padding-right: calc(var(--controle-hoogte) * .42); transition: max-width .3s var(--ease), padding .3s var(--ease), background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease); background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; align-items: center; display: inline-flex; overflow: hidden; }
.app-scherm .merk-capsule-kop { width: calc(var(--controle-hoogte) - 2px); height: calc(var(--controle-hoogte) - 2px); margin-right: calc(var(--controle-hoogte) * .26); border-radius: 50%; flex-shrink: 0; display: block; overflow: hidden; }
.app-scherm .merk-capsule-kop svg { object-fit: cover; width: 100%; height: 100%; display: block; }
.app-scherm .merk-capsule-naam { white-space: nowrap; text-overflow: clip; letter-spacing: -0.01em; color: rgb(255, 255, 255); transition: opacity .16s var(--ease); font-size: 15.5px; overflow: hidden; }
.app-scherm .merk-licht { font-weight: 470; }
.app-scherm .merk-zwaar { font-weight: 660; }
.app-scherm .railkop { padding: var(--sp-4) var(--sp-3) var(--sp-1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--merkrail-dim); white-space: nowrap; transition: color .16s var(--ease); font-size: 0.6875rem; font-weight: 600; position: relative; overflow: hidden; }
.app-scherm .railkop::after { content: ""; left: var(--sp-3); right: var(--sp-3); background: var(--merkrail-rand); opacity: 0; height: 1px; transition: opacity var(--dur-2) var(--ease); position: absolute; top: 50%; }
.app-scherm .rail-knop { align-items: center; column-gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); min-height: 2.5rem; font-size: var(--fs-base); color: rgb(255, 255, 255); white-space: nowrap; text-align: left; cursor: pointer; width: 100%; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); background: 0px 0px; border: 0px; grid-template-columns: 18px minmax(0px, 1fr); font-family: inherit; font-weight: 500; text-decoration: none; display: grid; overflow: hidden; }
.app-scherm .rail-knop span { white-space: nowrap; text-overflow: clip; transition: opacity .16s var(--ease); grid-column: 2; overflow: hidden; }
.app-scherm .rail-knop:hover { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.11); }
.app-scherm .rail-knop svg { flex-shrink: 0; grid-column: 1; width: 18px; height: 18px; }
.app-scherm .rail-voet { gap: var(--sp-1); flex-direction: column; margin-top: auto; display: flex; }
.app-scherm .rail-klap { border: 1px solid var(--merkrail-rand); color: rgb(255, 255, 255); cursor: pointer; width: 32px; height: 32px; margin-top: var(--sp-2); background: rgba(255, 255, 255, 0.12); border-radius: 50%; align-self: flex-end; place-items: center; display: grid; }
.app-scherm .rail-klap:hover { background: rgba(255, 255, 255, 0.2); }
.app-scherm .rail-klap svg { width: 16px; height: 16px; transition: transform var(--dur-2) var(--ease); }
.app-scherm .btn { height: var(--controle-hoogte); border-radius: var(--radius-pill); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: var(--fs-sm); cursor: pointer; white-space: nowrap; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); border: 1px solid rgba(0, 0, 0, 0); justify-content: center; align-items: center; gap: 8px; padding: 0px 20px; font-weight: 600; text-decoration: none; display: inline-flex; }
.app-scherm .btn svg { flex: 0 0 auto; width: 16px; height: 16px; }
.app-scherm .btn:active { transform: scale(0.97); }
.app-scherm .btn:focus-visible, .app-scherm button:focus-visible, .app-scherm a:focus-visible, .app-scherm input:focus-visible, .app-scherm [role="tab"]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; box-shadow: none; }
.app-scherm .btn { background: color-mix(in srgb, var(--surface) 55%, transparent); color: var(--text); border-color: var(--border-strong); }
.app-scherm .btn:hover { background: color-mix(in srgb, var(--surface) 75%, transparent); border-color: var(--text-dim); }
.app-scherm .btn-sm { height: var(--controle-hoogte-klein); font-size: var(--fs-xs); border-color: color-mix(in srgb, var(--border) 70%, transparent); background: color-mix(in srgb, var(--surface) 50%, transparent); color: var(--text-dim); gap: 6px; padding: 0px 12px; }
.app-scherm .btn-sm svg { width: 14px; height: 14px; }
.app-scherm .btn-sm:hover { background: color-mix(in srgb, var(--surface) 50%, transparent); color: var(--text); border-color: var(--border-strong); }
.app-scherm .btn-primary { background: var(--brand); color: var(--brand-contrast); border-color: rgba(0, 0, 0, 0); }
.app-scherm .btn-primary:hover { background: var(--brand-strong-bg); color: var(--brand-contrast); }
.app-scherm .btn-primary:active { background: var(--brand-stronger-bg); }
.app-scherm .btn-ghost { color: var(--text-dim); background: 0px 0px; border-color: rgba(0, 0, 0, 0); }
.app-scherm .btn-ghost:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); border-color: rgba(0, 0, 0, 0); }
.app-scherm .btn:disabled, .app-scherm button:disabled, .app-scherm .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
@media (prefers-reduced-motion: reduce) { .app-scherm .btn { transition: none; } }
.app-scherm input:not([type="checkbox"]):not([type="radio"]), .app-scherm .btn, .app-scherm .keuzemenu-knop { min-height: var(--controle-hoogte); }
.app-scherm .btn-sm { min-height: var(--controle-hoogte-klein); }
.app-scherm input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]) { width: 100%; padding: 0 var(--sp-3); height: var(--controle-hoogte); font-family: inherit; font-size: var(--fs-base); color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); font-weight: 500; line-height: 1.5; }
.app-scherm input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):hover { border-color: var(--text-dim); }
.app-scherm input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):focus { box-shadow: none; border-color: var(--focus-rand); }
.app-scherm input::placeholder { color: var(--text-muted); }
.app-scherm input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):disabled { background: var(--surface-2); color: var(--text-dim); cursor: not-allowed; border-style: dashed; }
.app-scherm label { font-size: var(--fs-sm); color: var(--text-dim); font-weight: 600; }
.app-scherm input[type="checkbox"], .app-scherm input[type="radio"] { appearance: none; box-sizing: border-box; border: 1.5px solid var(--border-strong); background-color: var(--surface); cursor: pointer; width: 18px; height: 18px; transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); flex-shrink: 0; margin: 0px; }
.app-scherm input[type="checkbox"] { border-radius: 5px; }
.app-scherm input[type="radio"] { border-radius: 50%; }
.app-scherm input[type="checkbox"]:checked, .app-scherm input[type="radio"]:checked { border-color: var(--brand-teken); background-color: var(--brand-teken); background-position: 50% center; background-repeat: no-repeat; background-size: 100% auto; }
.app-scherm input[type="checkbox"]:checked { background-image: var(--keuze-vink); }
.app-scherm input[type="radio"]:checked { background-image: var(--keuze-stip); }
.app-scherm input[type="checkbox"]:disabled, .app-scherm input[type="radio"]:disabled { cursor: not-allowed; }
.app-scherm input[type="checkbox"]:checked:disabled { appearance: none; opacity: 1; cursor: not-allowed; background-color: color-mix(in srgb, var(--text-muted) 65%, var(--text)); flex-shrink: 0; width: 18px; height: 18px; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M3.2 0h9.6A3.2 3.2 0 0 1 16 3.2v9.6a3.2 3.2 0 0 1-3.2 3.2H3.2A3.2 3.2 0 0 1 0 12.8V3.2A3.2 3.2 0 0 1 3.2 0Zm3.35 12.05L2.6 8.1l1.3-1.3 2.65 2.65 5.55-5.55 1.3 1.3-6.85 6.85Z'/%3E%3C/svg%3E"); mask-size: contain; mask-repeat: no-repeat; }
.app-scherm input[type="radio"]:checked:disabled { appearance: none; opacity: 1; cursor: not-allowed; background-color: color-mix(in srgb, var(--text-muted) 65%, var(--text)); flex-shrink: 0; width: 18px; height: 18px; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm0 4.6a3.4 3.4 0 1 0 0 6.8 3.4 3.4 0 0 0 0-6.8Z'/%3E%3C/svg%3E"); mask-size: contain; mask-repeat: no-repeat; }
.app-scherm .keuzemenu { display: inline-block; }
.app-scherm .keuzemenu-knop { align-items: center; gap: var(--sp-2); height: var(--controle-hoogte); padding: .45rem var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: var(--fs-base); cursor: pointer; transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); display: inline-flex; }
.app-scherm .keuzemenu-knop:hover { border-color: var(--text-dim); }
.app-scherm .keuzemenu-knop:disabled { opacity: 0.55; cursor: not-allowed; }
.app-scherm .keuzemenu-breed { width: 100%; display: block; }
.app-scherm .keuzemenu-leeg { color: var(--text-muted); }
.app-scherm .keuzemenu .chevron { color: var(--text-dim); transition: transform var(--dur-1) var(--ease); flex: 0 0 auto; }
.app-scherm .kv { box-sizing: border-box; cursor: text; width: 100%; min-height: var(--controle-hoogte); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 55%, transparent); border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent); backdrop-filter: blur(12px) saturate(140%); transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease); align-items: center; display: flex; position: relative; box-shadow: rgba(255, 255, 255, 0.14) 0px 1px inset, rgba(0, 0, 0, 0.5) 0px 6px 18px -12px; }
.app-scherm .kv:hover { background: color-mix(in srgb, var(--surface) 80%, transparent); }
.app-scherm .kv:focus-within { border-color: var(--focus-rand); box-shadow: rgba(255, 255, 255, 0.14) 0px 1px inset; }
.app-scherm .kv input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]) { width: auto; min-width: 0px; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; color: var(--text); height: var(--controle-hoogte); padding: 0 var(--sp-2) 0 var(--sp-3); background: 0px 0px; border: 0px; border-radius: 0px; flex: 1 1 0%; font-weight: 600; }
.app-scherm .kv-input:focus, .app-scherm .kv-input:focus-visible { box-shadow: none; outline: 0px; }
.app-scherm .kv-input::placeholder { color: var(--text-muted); font-weight: 500; }
.app-scherm .kv-chevron { margin-right: var(--sp-3); flex-shrink: 0; display: inline-flex; }
.app-scherm .app-kaart { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-5); }
.app-scherm .melding { color: var(--text-dim); }
.app-scherm .visueel-verborgen { clip: rect(0px, 0px, 0px, 0px); width: 1px; height: 1px; position: absolute; overflow: hidden; }
.app-scherm .melding-klein { font-size: var(--fs-sm); }
.app-scherm .tab-inhoud { gap: var(--sp-5); flex-direction: column; display: flex; }
.app-scherm .kopkaart { padding: var(--sp-5) var(--sp-6) 0; }
.app-scherm .kopkaart-rij { justify-content: space-between; align-items: center; gap: var(--sp-4); display: flex; }
.app-scherm .detail-kop .kop-h1 { cursor: default; }
.app-scherm .kop-terug.dk-terug { border-color: var(--border-strong); background: color-mix(in srgb, var(--surface) 70%, transparent); width: 36px; height: 36px; margin-top: 0px; }
.app-scherm .detail-kop .meer-menu-knop { width: 36px; height: 36px; font: inherit; border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--text-dim); border-radius: 50%; place-items: center; gap: normal; padding: 0px; display: grid; }
.app-scherm .detail-kop .meer-menu-knop svg { width: 18px; height: 18px; }
.app-scherm .dk-tekst { flex: 1 1 0%; min-width: 0px; }
.app-scherm .dk-tekst .kop-h1 { letter-spacing: -0.02em; font-size: clamp(1.5rem, 2.6vw, 1.875rem); font-weight: 650; line-height: 1.1; }
.app-scherm .dk-meta { font-size: var(--fs-sm); color: var(--text-dim); flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0px 0px; display: flex; }
.app-scherm .dk-meta .scheider { background: var(--text-muted); border-radius: 50%; width: 3px; height: 3px; }
.app-scherm .tabs-balk { margin: var(--sp-4) calc(-1 * var(--sp-6)) 0; border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent); grid-template-columns: repeat(3, 1fr); display: grid; }
.app-scherm .tabs-balk .demo-tab { color: var(--text-dim); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: var(--fs-sm); cursor: pointer; transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); background: 0px 0px; border-width: 0px 0px 2px; border-style: none none solid; border-color: currentcolor currentcolor rgba(0, 0, 0, 0); border-image: none; justify-content: center; align-items: center; gap: 8px; padding: 12px 10px 13px; font-weight: 600; display: flex; }
.app-scherm .tabs-balk .demo-tab svg { width: 16px; height: 16px; }
.app-scherm .tabs-balk .demo-tab + .demo-tab { border-left: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.app-scherm .tabs-balk .demo-tab:hover { color: var(--text); }
.app-scherm .demo-tab.is-gekozen { color: var(--text); border-bottom-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); }
.app-scherm .tabs-balk .demo-tab:first-child { border-bottom-left-radius: var(--radius-lg); }
.app-scherm .tabs-balk .demo-tab:last-child { border-bottom-right-radius: var(--radius-lg); }
.app-scherm .meer-menu { display: inline-block; position: relative; }
.app-scherm .meer-menu-knop { padding: 0.45rem; }
.app-scherm .tip-anker { display: inline-flex; }
.app-scherm .tip-anker :disabled { pointer-events: none; }
.app-scherm .tip-anker[tabindex]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.app-scherm .kaartkop { height: 3.5rem; padding: 0 var(--sp-4) 0 var(--sp-5); border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); flex: 0 0 auto; align-items: center; gap: 10px; display: flex; }
.app-scherm .kaartkop-titel { font-size: var(--fs-md); letter-spacing: normal; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0px; margin: 0px; font-weight: 650; line-height: 1.3; overflow: hidden; }
.app-scherm .kaartkop > :not(.kaartkop-titel) { flex: 0 0 auto; }
.app-scherm .doc-blok-acties { align-items: center; gap: var(--sp-2); flex-wrap: wrap; display: flex; }
.app-scherm .doc-blok-document { padding: var(--sp-5); max-height: 468.0px; overflow-y: auto; }
.app-scherm .doc-blok-document .kop-h3 { line-height: 1.3; }
.app-scherm .doc-blok-document ul, .app-scherm .doc-blok-document ol { padding-left: var(--sp-5); }
.app-scherm .transcript-weergave > * + * { margin-top: var(--ruimte-in-blok); }
.app-scherm .transcript-blokken { gap: var(--sp-3); flex-direction: column; margin: 0px; padding: 0px; list-style: none; display: flex; }
.app-scherm .doc-blok-document .transcript-blokken { margin-left: 0px; padding-left: 0px; }
.app-scherm .transcript-blok { column-gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);border-left:3px solid color-mix(in srgb, var(--spreker,var(--brand)) 45%, transparent);padding-left:var(--sp-3);grid-template-columns:auto 1fr;row-gap:2px;display:grid }
.app-scherm .transcript-blok.actief { background: var(--brand-soft); }
.app-scherm .transcript-tijd { font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; font-variant-east-asian: inherit; font-variant-alternates: inherit; font-variant-position: inherit; font-variant-emoji: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; background: 0px 0px; border: 0px; grid-area: 1 / 1; align-self: baseline; padding: 0px; }
.app-scherm .transcript-blok.actief .transcript-tijd { color: var(--brand-strong); }
.app-scherm .transcript-spreker { color: var(--spreker,var(--brand)); grid-area: 1 / 2; font-weight: 600; }
.app-scherm .transcript-tekst { white-space: pre-line; grid-area: 2 / 2; margin: 0px; }
.app-scherm .sprekers-voortgang { align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-dim); display: inline-flex; }
.app-scherm .sprekers-meter { border-radius: var(--radius-pill); background: var(--border); flex-shrink: 0; width: 3rem; height: 4px; overflow: hidden; }
.app-scherm .sprekerpaneel > .kaartkop > .kaartkop-titel { flex: 1 0 auto; }
.app-scherm .kaartkop > .sprekers-voortgang { flex: 0 1 auto; min-width: 0px; }
.app-scherm .sprekers-voortgang-tekst { text-overflow: ellipsis; white-space: nowrap; min-width: 0px; overflow: hidden; }
.app-scherm .sprekers-meter i { border-radius: inherit; background: var(--status-done); height: 100%; transition: width var(--dur-2) var(--ease); display: block; }
.app-scherm .actiepunt-rij { align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; display: flex; }
.app-scherm .actiepunt-deadline { font-size: var(--fs-sm); color: var(--text-dim); flex-shrink: 0; }
.app-scherm .kop-terug { border: 1px solid var(--border-strong); background: var(--surface); width: 34px; height: 34px; color: var(--text-dim); transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); border-radius: 50%; flex-shrink: 0; place-items: center; margin-top: 2px; display: grid; }
.app-scherm .kop-terug:hover { color: var(--text); border-color: var(--text-dim); background: var(--surface-2); }
@media (prefers-reduced-motion: reduce) { .app-scherm *, .app-scherm ::before, .app-scherm ::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }
.app-scherm .opname-zwevers { bottom: var(--sp-4); right: var(--sp-4); z-index: 30; align-items: flex-end; gap: var(--sp-2); flex-direction: column-reverse; display: flex; position: fixed; }
.app-scherm .toast-kolom { right: var(--sp-4); top: var(--sp-4); z-index: var(--z-toast); gap: var(--sp-2); flex-direction: column; max-width: 26rem; display: flex; position: fixed; }
.app-scherm .console-telbal { font-family: var(--mono); font-size: var(--fs-xs); text-align: center; border-radius: var(--radius-pill); color: rgb(10, 57, 140); background: rgb(255, 255, 255); min-width: 1.5rem; padding: 0px 0.45rem; font-weight: 700; line-height: 1.5; }
.app-scherm .aandeslag-item { position: relative; overflow: visible; }
.app-scherm .rail .aandeslag-telbal { top: 2px; left: calc(var(--sp-3) + 14px); min-width: 1.1rem; box-shadow: 0 0 0 2px var(--merkrail-bodem); padding: 0px 0.25rem; font-size: 0.625rem; font-style: normal; line-height: 1.5; position: absolute; }
.app-scherm .rail:not(.is-smal) .aandeslag-item { grid-template-columns: 18px minmax(0px, 1fr) auto; }
.app-scherm .rail:not(.is-smal) .aandeslag-telbal { box-shadow: none; grid-area: 1 / 3; min-width: 1.25rem; padding: 0px 0.4rem; font-size: 0.6875rem; position: static; }
.app-scherm { --aandeslag-ramp-1: #0a398c; --aandeslag-ramp-2: var(--brand); --aandeslag-ramp-3: #1794a3; }
@media (prefers-color-scheme: dark) { .app-scherm { --aandeslag-ramp-1: var(--brand); --aandeslag-ramp-2: #1794a3; --aandeslag-ramp-3: #58ba64; } }
@media (prefers-color-scheme: dark) { .app-scherm { --aandeslag-ramp-1: color-mix(in oklab, var(--brand), #000 28%); --aandeslag-ramp-2: var(--brand); --aandeslag-ramp-3: color-mix(in oklab, var(--brand), #fff 22%); } }
.app-scherm { --einde-strook-hoogte: 3rem; }
.app-scherm { --kamer-bg: #0b0c11; --kamer-surface: #ffffff0b; --kamer-surface-2: #ffffff13; --kamer-border: #ffffff17; --kamer-border-strong: #ffffff38; --kamer-text: #eef0f4; --kamer-dim: #a9b0bc; --kamer-muted: #828a99; --kamer-glow-1: #1f69ff38; --kamer-glow-2: #1794a32e; --kamer-glow-3: #58ba641f; --kamer-dur: .34s; }
.app-scherm .sprekertijdlijn { gap: var(--sp-3); display: grid; }
.app-scherm .sprekertijdlijn-kop { align-items: center; gap: var(--sp-3); flex-wrap: wrap; display: flex; }
.app-scherm .sprekertijdlijn-kop .kop-h3 { font-size: var(--fs-md); margin: 0px; }
.app-scherm .tl-strook { gap: 2px; height: 28px; display: flex; position: relative; }
.app-scherm .tl-strook i { flex: var(--w) 1 0; background: var(--spreker,var(--brand)); cursor: pointer; min-width: 2px; transition: opacity var(--dur-3) var(--ease), transform var(--dur-2) var(--ease); border-radius: 4px; }
.app-scherm .tl-strook i:hover { transform: scaleY(1.12); }
@media (prefers-reduced-motion: reduce) { .app-scherm .tl-strook i { transition: none; } }
@media (prefers-reduced-motion: reduce) { .app-scherm .tl-strook i:hover { transform: none; } }
.app-scherm .sprekertijdlijn-as { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; justify-content: space-between; display: flex; }
.app-scherm .transcript-tweeluik { gap: var(--sp-5); grid-template-columns: minmax(19rem, 23rem) minmax(0px, 1fr); align-items: stretch; height: 530.4px; min-height: 34rem; display: grid; }
.app-scherm .transcript-tweeluik > * { flex-direction: column; min-height: 0px; display: flex; overflow: hidden; }
.app-scherm .transcript-tweeluik .doc-blok-document { flex: 1 1 0%; height: auto; min-height: 0px; max-height: none; overflow-y: auto; }
.app-scherm .doc-blok { min-width: 0px; container-type: inline-size; }
.app-scherm .sprekerpaneel-rol { flex: 1 1 0%; min-height: 0px; overflow-y: auto; }
.app-scherm .sp-groep + .sp-groep { border-top: 1px solid var(--border); }
.app-scherm .sp-kop { padding-right: var(--sp-3); border-left: 3px solid var(--spreker,var(--brand)); transition: background var(--dur-3) var(--ease); grid-template-columns: minmax(0px, 1fr); align-items: center; display: grid; }
.app-scherm .sp-kop:hover { background: var(--surface-2); }
.app-scherm .sp-rij { gap: var(--sp-3); width: 100%; padding: var(--sp-3) var(--sp-2) var(--sp-3) calc(var(--sp-4) - 3px); font: inherit; color: inherit; text-align: left; cursor: pointer; background: 0px 0px; border: 0px; grid-template-columns: auto auto minmax(0px, 1fr); align-items: center; display: grid; }
.app-scherm .sp-caret { color: var(--text-muted); font-size: var(--fs-md); transition: transform var(--dur-2) var(--ease); line-height: 1; display: inline-block; }
.app-scherm .sp-meterrij { align-items: center; gap: var(--sp-2); grid-template-columns: minmax(0px, 1fr) auto; margin-top: 4px; display: grid; }
.app-scherm .sp-meterrij .tip-anker { min-width: 0px; }
.app-scherm .sp-cijfer { font-size: var(--fs-sm); color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }
.app-scherm .sp-cijfer.app-klein { font-size: var(--fs-xs); color: var(--text-dim); flex-shrink: 0; }
.app-scherm .sp-avatar { width: 2rem; height: 2rem; font-size: var(--fs-xs); transition: opacity var(--dur-3) var(--ease); border-radius: 50%; flex-shrink: 0; place-items: center; font-weight: 650; display: grid; }
.app-scherm .sp-avatar.open { color: var(--text-muted); border: 1.5px dashed color-mix(in srgb, var(--spreker,var(--brand)) 70%, var(--border-strong)); background: 0px 0px; }
.app-scherm .sp-tekst { min-width: 0px; }
.app-scherm .sp-naamrij { align-items: baseline; gap: 6px; min-width: 0px; display: flex; }
.app-scherm .sp-naam { font-weight: 600; font-size: var(--fs-base); text-overflow: ellipsis; white-space: nowrap; transition: opacity var(--dur-3) var(--ease); display: block; overflow: hidden; }
.app-scherm .sp-hint { font-size: var(--fs-xs); color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; min-width: 0px; overflow: hidden; }
.app-scherm .sp-rij .tip-anker { min-width: 0px; display: block; }
.app-scherm .sp-meter { border-radius: var(--radius-pill); background: color-mix(in srgb, var(--text) 13%, transparent); height: 5px; display: block; overflow: hidden; }
.app-scherm .sp-meter i { background: var(--spreker,var(--brand)); height: 100%; display: block; }
.app-scherm .sp-uitklap { transition: grid-template-rows var(--dur-2) var(--ease); grid-template-rows: 0fr; display: grid; }
.app-scherm .sp-uitklap-in { opacity: 0; min-height: 0px; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); overflow: hidden; transform: translateY(-0.25rem); }
@media (prefers-reduced-motion: reduce) { .app-scherm .sp-uitklap { transition-duration: var(--dur-1); } }
@media (prefers-reduced-motion: reduce) { .app-scherm .sp-uitklap-in { transition: opacity var(--dur-1) var(--ease); transform: none; } }
@media (prefers-reduced-motion: reduce) { .app-scherm .sp-caret, .app-scherm .sp-kop, .app-scherm .sp-avatar, .app-scherm .sp-naam { transition: none; } }
.app-scherm .sp-paneel { padding: 12px var(--sp-4) var(--sp-4); background: var(--brand-tint); gap: var(--sp-3); display: grid; }
.app-scherm .sp-antwoord { gap: var(--sp-2); min-width: 0px; display: grid; }
.app-scherm .sp-antwoord .keuzemenu { min-width: 0px; max-width: 100%; }
.app-scherm .sp-antwoord .tip-anker { min-width: 0px; display: block; }
.app-scherm .sp-antwoord .kv { border-radius: var(--radius-pill); min-height: var(--pil-hoogte); }
.app-scherm .sp-antwoord .kv input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]) { height: calc(var(--pil-hoogte) - 2px); min-height: 0px; padding-left: var(--sp-4); }
.app-scherm .sp-herken { justify-content: space-between; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-dim); flex-wrap: wrap; display: flex; }
.app-scherm .sp-luister { height: var(--pil-hoogte); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface) 55%, transparent); border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent); backdrop-filter: blur(12px) saturate(140%); align-items: center; display: inline-flex; box-shadow: rgba(255, 255, 255, 0.14) 0px 1px inset, rgba(0, 0, 0, 0.5) 0px 6px 18px -12px; }
.app-scherm .sp-luister .tip-anker { height: 100%; display: inline-flex; }
.app-scherm .sp-luister button, .app-scherm .sp-filter { font: inherit; color: var(--text); cursor: pointer; height: 100%; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease); background: 0px 0px; border: 0px; justify-content: center; align-items: center; gap: 6px; display: inline-flex; }
.app-scherm .sp-luister button:active, .app-scherm .sp-filter:active { transform: scale(0.97); }
.app-scherm .sp-luister button:focus-visible, .app-scherm .sp-filter:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus-ring); outline: 0px; }
.app-scherm .sp-luister button:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.app-scherm .sp-stap { width: 1.9rem; color: var(--text-muted); }
.app-scherm .sp-stap:hover { color: var(--text); }
.app-scherm .sp-stap-volgend { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.app-scherm .sp-luister:not(:has(.sp-play)) .sp-stap-vorig { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.app-scherm .sp-teller { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0px 2px; }
.app-scherm .sp-filter { height: var(--pil-hoogte); border-radius: var(--radius-pill); font-size: var(--fs-sm); color: var(--text-dim); white-space: nowrap; background: color-mix(in srgb, var(--surface) 55%, transparent); border: 1px solid color-mix(in srgb, var(--border-strong) 70%, transparent); backdrop-filter: blur(12px) saturate(140%); padding: 0px 0.9em 0px 0.75em; font-weight: 500; box-shadow: rgba(255, 255, 255, 0.14) 0px 1px inset, rgba(0, 0, 0, 0.5) 0px 6px 18px -12px; }
.app-scherm .sp-filter svg { transition: transform var(--dur-2) var(--ease); flex-shrink: 0; }
.app-scherm .sp-filter:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 80%, transparent); }
@media (prefers-reduced-motion: reduce) { .app-scherm .sp-luister button:active, .app-scherm .sp-filter:active { transform: none; } }
@media (prefers-reduced-motion: reduce) { .app-scherm .sp-filter svg { transition: none; } }
.app-scherm button.transcript-spreker { font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; color: var(--spreker,var(--brand)); cursor: pointer; padding: 0 var(--sp-1); margin-inline: calc(var(--sp-1) * -1); border-radius: var(--radius-sm); text-align: left; background: 0px 0px; border: 0px; font-weight: 600; }
.app-scherm button.transcript-spreker:hover { background: var(--surface-2); }
.app-scherm .transcript-blok { transition: background var(--dur-2) var(--ease), outline-color var(--dur-2) var(--ease); }
@media (prefers-reduced-motion: reduce) { .app-scherm .transcript-blok { transition: none; } }
.app-scherm, .app-scherm .werkgebied { transition: background-color .32s var(--ease); }
@media (prefers-reduced-motion: reduce) { .app-scherm, .app-scherm .rail, .app-scherm .werkgebied { transition: none; } }
.app-scherm .glaskaart { isolation: isolate; border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); background: color-mix(in srgb, var(--surface) 72%, transparent); backdrop-filter: blur(14px) saturate(140%); border-radius: var(--radius-lg); position: relative; overflow: hidden; box-shadow: rgba(255, 255, 255, 0.06) 0px 1px inset, rgba(0, 0, 0, 0.06) 0px 1px 2px; }
.app-scherm .glaskaart > * { position: relative; }
.app-scherm .glaskaart { clip-path: inset(0 round var(--radius-lg)); }
.app-scherm .kaartwolk { pointer-events: none; filter: blur(28px); opacity: 0.47; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); background: radial-gradient(34% 70% at 8% 30%, rgba(31, 105, 255, 0.58), rgba(0, 0, 0, 0) 70%), radial-gradient(34% 64% at 46% 85%, rgba(23, 148, 163, 0.5), rgba(0, 0, 0, 0) 70%), radial-gradient(26% 50% at 66% 20%, rgba(88, 186, 100, 0.3), rgba(0, 0, 0, 0) 70%), radial-gradient(45% 90% at 96% 110%, rgba(88, 186, 100, 0.3), rgba(0, 0, 0, 0) 70%); position: absolute; inset: -40% -10%; }
.app-scherm [data-theme="light"] .kaartwolk { opacity: 0.28; }
.app-scherm .glaskaart:hover .kaartwolk { opacity: 0.8; transform: scale(1.05); }
.app-scherm [data-theme="light"] .glaskaart:hover .kaartwolk { opacity: 0.5; }
.app-scherm .kaartwolk.met-vlek { background: radial-gradient(34% 70% at 8% 30%, #1f69ff94, transparent 70%), radial-gradient(34% 64% at 46% 85%, #1794a380, transparent 70%), radial-gradient(26% 50% at 66% 20%, #58ba644d, transparent 70%), radial-gradient(45% 90% at 96% 110%, color-mix(in srgb, var(--status) 60%, transparent), transparent 70%); }
.app-scherm .stand-woord { font-size: var(--fs-xs); white-space: nowrap; color: color-mix(in srgb, var(--status) 70%, var(--text)); align-items: center; gap: 7px; font-weight: 650; display: inline-flex; }
.app-scherm [data-theme="light"] .stand-woord { color: color-mix(in srgb, var(--status) 80%, #000); }
.app-scherm .stand-woord i { background: var(--status); width: 8px; height: 8px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--status) 22%, transparent); border-radius: 50%; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .app-scherm .kaartwolk { transition: none; } }
@media (prefers-reduced-motion: reduce) { .app-scherm .glaskaart:hover .kaartwolk { transform: none; } }
.app-scherm .actiekolom { flex-direction: column; min-height: 0px; display: flex; overflow: hidden; }
.app-scherm .actiekolom-voortgang { align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-dim); white-space: nowrap; margin-right: auto; display: inline-flex; }
.app-scherm .actiekolom-meter { border-radius: var(--radius-pill); background: color-mix(in srgb, var(--text) 13%, transparent); width: 3rem; height: 4px; overflow: hidden; }
.app-scherm .actiekolom-meter i { background: linear-gradient(90deg, var(--ramp-teal), var(--ramp-lichtgroen)); height: 100%; transition: width var(--dur-1) var(--ease); display: block; }
.app-scherm .actiekolom-weergave { display: flex; }
.app-scherm .actiekolom-weergave-knop { border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); background: color-mix(in srgb, var(--surface) 50%, transparent); width: 2rem; height: 2rem; color: var(--text); font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: var(--fs-xs); cursor: pointer; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); border-radius: 50%; flex: 0 0 auto; justify-content: center; align-items: center; gap: 6px; padding: 0px; display: inline-flex; }
.app-scherm .actiekolom-weergave-knop svg { color: var(--text-dim); }
.app-scherm .actiekolom-weergave-knop:hover { background: color-mix(in srgb, var(--surface) 80%, transparent); }
.app-scherm .actiekolom-weergave-knop:hover svg { color: var(--text); }
.app-scherm .actiekolom-lijst { scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent; flex-direction: column; flex: 1 1 0%; min-height: 0px; padding: 0px; display: flex; overflow-y: auto; }
.app-scherm .actiekolom-voet { height: 52px; padding: 0 calc(var(--sp-4) + 8px) 0 var(--sp-5); border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent); flex: 0 0 auto; align-items: center; display: flex; }
.app-scherm .actiekolom-toevoegen { height: var(--controle-hoogte-klein); border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); background: color-mix(in srgb, var(--surface) 50%, transparent); color: var(--text-dim); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: var(--fs-xs); cursor: pointer; align-items: center; gap: 6px; padding: 0px 12px; font-weight: 600; display: inline-flex; }
.app-scherm .actiekolom-toevoegen svg { width: 14px; height: 14px; }
.app-scherm .actiekolom-toevoegen:hover { color: var(--text); border-color: var(--border-strong); }
.app-scherm .actieblok { margin: 12px var(--sp-4) 0 var(--sp-5); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 50%, transparent); flex: 0 0 auto; overflow: hidden; }
.app-scherm .actieblok:last-child { margin-bottom: 12px; }
.app-scherm .actieblok-kop { border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); background: color-mix(in srgb, var(--text) 4%, transparent); font-size: var(--fs-sm); align-items: center; gap: 10px; padding: 11px 12px; display: flex; }
.app-scherm .actieblok-kop strong { font-weight: 650; }
.app-scherm .actieblok-avatar { background: color-mix(in srgb, var(--text) 16%, var(--surface)); width: 20px; height: 20px; color: var(--text-dim); border-radius: 50%; flex: 0 0 auto; place-items: center; font-size: 0.6rem; font-weight: 650; display: grid; }
.app-scherm .actieblok-teller { color: var(--text-dim); font-size: var(--fs-xs); white-space: nowrap; margin-left: auto; }
.app-scherm .actiepunt-lijst { flex-direction: column; gap: 0px; margin: 0px; padding: 0px; list-style: none; display: flex; }
.app-scherm .actiepunt-kop { min-height: 30px; font-size: var(--fs-xs); color: var(--text-dim); align-items: center; gap: 10px; padding: 6px 6px 0px 12px; display: flex; }
.app-scherm .actiepunt.is-afgerond .actiepunt-kop { opacity: 0.8; }
.app-scherm .actiepunt-deadline { white-space: nowrap; font-size: inherit; align-items: center; gap: 5px; display: inline-flex; }
.app-scherm .actiepunt-deadline svg { width: 12px; height: 12px; }
.app-scherm .actiepunt-deadline.is-links { margin-right: auto; }
.app-scherm .actiepunt-deadline.is-leeg { color: var(--text-muted); }
.app-scherm .actiepunt-rij { grid-template-columns: 20px minmax(0px, 1fr); align-items: start; gap: normal 12px; padding: 4px 12px 13px; display: grid; }
.app-scherm .actiepunt:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.app-scherm input.actiepunt-vink { width: 20px; height: 20px; font-size: var(--fs-base); border-radius: 50%; margin-top: 1px; line-height: 1.5; }
.app-scherm input.actiepunt-vink:checked { background-color: var(--status-done); border-color: var(--status-done); }
.app-scherm .actiepunt-tekstknop { min-width: 0px; color: var(--text); font: inherit; text-align: left; cursor: pointer; background: 0px 0px; border: 0px; flex-direction: column; gap: 4px; padding: 0px; display: flex; }
.app-scherm .actiepunt-tekst { font-size: var(--fs-sm); line-height: 1.45; }
.app-scherm .actiepunt.is-afgerond .actiepunt-tekst { color: var(--text-muted); text-decoration: line-through; }
.app-scherm .veld-kapitaal { font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; }
.app-scherm .notulendoc { flex-direction: column; min-height: 0px; display: flex; overflow: hidden; container-type: inline-size; }
.app-scherm .notulendoc-acties { align-items: center; gap: 2px; margin-left: auto; display: flex; }
.app-scherm .notulendoc-acties .btn-sm { gap: 5px; padding: 0px 7px; }
.app-scherm .notulendoc-sprong { padding: 10px var(--sp-5); border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); scrollbar-width: none; flex: 0 0 auto; gap: 6px; display: flex; overflow-x: auto; }
.app-scherm .notulendoc-sprong-knop { border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); height: 28px; color: var(--text-dim); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: var(--fs-xs); cursor: pointer; white-space: nowrap; background: 0px 0px; flex: 0 0 auto; padding: 0px 12px; font-weight: 600; }
.app-scherm .notulendoc-sprong-knop:hover { color: var(--text); border-color: var(--border-strong); }
.app-scherm .notulendoc-sprong-knop.is-actief, .demo:has(#demo-sprong-0:checked) .notulendoc-sprong-knop[for="demo-sprong-0"], .demo:has(#demo-sprong-1:checked) .notulendoc-sprong-knop[for="demo-sprong-1"], .demo:has(#demo-sprong-2:checked) .notulendoc-sprong-knop[for="demo-sprong-2"], .demo:has(#demo-sprong-3:checked) .notulendoc-sprong-knop[for="demo-sprong-3"], .demo:has(#demo-sprong-4:checked) .notulendoc-sprong-knop[for="demo-sprong-4"], .demo:has(#demo-sprong-5:checked) .notulendoc-sprong-knop[for="demo-sprong-5"], .demo:has(#demo-sprong-6:checked) .notulendoc-sprong-knop[for="demo-sprong-6"], .demo:has(#demo-sprong-7:checked) .notulendoc-sprong-knop[for="demo-sprong-7"], .demo:has(#demo-sprong-8:checked) .notulendoc-sprong-knop[for="demo-sprong-8"] { background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); border-color: rgba(0, 0, 0, 0); }
.app-scherm .notulendoc-document { min-height: 0px; padding: var(--sp-5) var(--sp-5) var(--sp-6); font-size: var(--fs-md); flex: 1 1 0%; line-height: 1.65; overflow-y: auto; }
.app-scherm .notulendoc-document > * { max-width: 68ch; }
.app-scherm .notulendoc-document .kop-h4 { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-md); letter-spacing: normal; font-weight: 700; line-height: 1.65; }
.app-scherm .notulendoc-document > .kop-h4:first-child { margin-top: 0px; }
.app-scherm .notulendoc-document .kop-h5 { margin: var(--sp-3) 0 2px; font-size: var(--fs-sm); color: var(--text-dim); letter-spacing: normal; font-weight: 650; line-height: 1.65; }
.app-scherm .notulendoc-document p { margin: 0 0 var(--sp-3); }
.app-scherm .notulendoc-document li { margin-bottom: 6px; }
.app-scherm .notulendoc-document ul { margin: 0 0 var(--sp-3); padding-left: 1.2em; }
.app-scherm .notulen-tweeluik { gap: var(--sp-5); grid-template-columns: minmax(19rem, 23rem) minmax(0px, 1fr); align-items: stretch; height: 530.4px; min-height: 34rem; display: grid; }
.app-scherm .notulen-tweeluik > * { min-height: 0px; }
.app-scherm .docvoorbeeld { border-radius: var(--radius-lg); background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid color-mix(in srgb, var(--border) 55%, transparent); flex-direction: column; align-items: center; gap: 10px; min-width: 0px; padding: 18px; display: flex; position: relative; }
.app-scherm .docvoorbeeld-vel, .app-scherm .docvoorbeeld-plat { aspect-ratio: 210 / 297; box-sizing: border-box; color: rgb(28, 34, 48); background: rgb(253, 253, 254); border-radius: 4px; flex-direction: column; width: 100%; padding: 26px 28px 18px; font-family: Aptos, "Segoe UI", system-ui, sans-serif; font-size: 9.5px; line-height: 1.5; display: flex; position: relative; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.35) 0px 10px 30px; }
.app-scherm .docvoorbeeld-plat { font-family: var(--mono); gap: var(--sp-2); font-size: 8.5px; }
.app-scherm .docvoorbeeld-plat-titel { color: rgb(28, 34, 48); flex: 0 0 auto; margin: 0px; font-size: 9.5px; font-weight: 700; }
.app-scherm .docvoorbeeld-plat-meta { color: rgb(107, 114, 128); flex: 0 0 auto; margin: 0px; font-size: 8.5px; }
.app-scherm .docvoorbeeld-plat-tekst { min-height: 0px; margin: var(--sp-2) 0 0; white-space: pre-wrap; font-family: inherit; font-size: inherit; color: rgb(28, 34, 48); flex: 1 1 0%; overflow: hidden; }
.app-scherm .docvoorbeeld-blader { align-items: center; gap: 10px; display: inline-flex; }
.app-scherm .docvoorbeeld-pijl { font: inherit; border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); background: color-mix(in srgb, var(--surface) 50%, transparent); width: 28px; height: 28px; color: var(--text-dim); cursor: pointer; transition: transform var(--dur-1) var(--ease); border-radius: 50%; place-items: center; display: grid; }
.app-scherm .docvoorbeeld-pijl:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); }
.app-scherm .docvoorbeeld-pijl:active:not(:disabled) { transform: scale(0.94); }
.app-scherm .docvoorbeeld-pijl:disabled { opacity: 0.35; cursor: default; }
.app-scherm .docvoorbeeld-pijl svg { width: 14px; height: 14px; }
.app-scherm .docvoorbeeld-pagina { text-align: center; min-width: 7.5rem; font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .app-scherm .docvoorbeeld-pijl { transition: none; } }
.app-scherm .docvoorbeeld-canvas { width: 100%; height: auto; transition: opacity var(--dur-2) var(--ease); display: block; position: absolute; top: 0px; left: 0px; }
@media (prefers-reduced-motion: reduce) { .app-scherm .docvoorbeeld-canvas { transition: none; } }
.app-scherm .dockeuze { gap: var(--sp-4); flex-direction: column; min-width: 0px; height: 100%; display: flex; }
.app-scherm .dockeuze-groep { flex-direction: column; flex: 1 1 0%; gap: 8px; min-height: 0px; display: flex; }
.app-scherm .dockeuze-vinkjes, .app-scherm .dockeuze-vormen { border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); flex-direction: column; flex: 1 1 0%; display: flex; overflow: hidden; }
.app-scherm .dockeuze-vink, .app-scherm .dockeuze-vorm { font: inherit; cursor: pointer; color: var(--text); flex: 1 1 0%; grid-template-columns: 28px minmax(0px, 1fr) 18px; align-items: center; column-gap: 12px; padding: 10px 18px; display: grid; }
.app-scherm .dockeuze-vink { font-size: var(--fs-sm); }
.app-scherm .dockeuze-vink + .dockeuze-vink, .app-scherm .dockeuze-vorm + .dockeuze-vorm { border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.app-scherm .dockeuze-vorm:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.app-scherm .dockeuze-vorm:has(input:checked) { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.app-scherm .dockeuze-v-t { flex-direction: column; gap: 1px; min-width: 0px; display: flex; }
.app-scherm .dockeuze-v-t strong { font-size: var(--fs-md); font-weight: 600; }
.app-scherm .dockeuze-v-t small { font-size: var(--fs-sm); color: var(--text-dim); }
.app-scherm .dockeuze-v-ico { background: color-mix(in srgb, var(--text) 8%, transparent); width: 28px; height: 28px; color: var(--text-dim); border-radius: 8px; place-items: center; display: grid; }
.app-scherm .dockeuze-v-ico svg { width: 15px; height: 15px; }
.app-scherm .dockeuze-vink:has(input:checked) .dockeuze-v-ico, .app-scherm .dockeuze-vorm:has(input:checked) .dockeuze-v-ico { background: color-mix(in srgb, var(--brand) 18%, transparent); color: color-mix(in srgb, var(--brand) 75%, var(--text)); }
.app-scherm .dockeuze input[type="checkbox"], .app-scherm .dockeuze input[type="radio"] { font-size: inherit; background-color: rgba(0, 0, 0, 0); line-height: 1.5; }
.app-scherm .dockeuze-vorm input { color: inherit; }
.app-scherm .dockeuze input[type="checkbox"]:checked:not(:disabled) { background-color: var(--brand-teken); }
.app-scherm .dockeuze input[type="radio"]:checked { background-color: rgba(0, 0, 0, 0); background-image: radial-gradient(circle, var(--brand-teken) 0 4.5px, transparent 4.5px); }
.app-scherm .dockeuze .tip-anker { flex: 0 0 auto; }
.app-scherm .dockeuze-letop { font-size: var(--fs-xs); color: var(--text-dim); margin: 0px; line-height: 1.5; }
.app-scherm .dockeuze-letop:first-of-type { margin-top: auto; }
.app-scherm .collegas-kaart, .app-scherm .linken-kaart, .app-scherm .delen-document-kaart { flex-direction: column; display: flex; }
.app-scherm .collegas-kaart, .app-scherm .linken-kaart { gap: var(--sp-4); }
.app-scherm .collegas-kop, .app-scherm .linken-kop, .app-scherm .delen-kop { align-items: flex-start; gap: var(--sp-3); display: flex; }
.app-scherm .collegas-kop > div:first-child, .app-scherm .linken-kop > div:first-child, .app-scherm .delen-kop > div:first-child { min-width: 0px; margin-right: auto; }
.app-scherm .collegas-kop .kop-h3, .app-scherm .linken-kop .kop-h3, .app-scherm .delen-kop .kop-h3 { font-size: var(--fs-md); letter-spacing: normal; margin: 0px; font-weight: 650; line-height: 1.5; }
.app-scherm .collegas-kop p, .app-scherm .linken-kop p, .app-scherm .delen-kop p { font-size: var(--fs-sm); color: var(--text-dim); margin: 4px 0px 0px; line-height: 1.5; }
.app-scherm .collegas-zicht { flex: 0 0 auto; position: relative; }
.app-scherm .collegas-zichtknop { height: var(--controle-hoogte-klein); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); background: color-mix(in srgb, var(--surface) 50%, transparent); color: var(--text); font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: var(--fs-xs); cursor: pointer; white-space: nowrap; border-radius: 999px; align-items: center; gap: 6px; padding: 0px 10px 0px 12px; display: inline-flex; }
.app-scherm .collegas-zichtknop:hover { border-color: var(--border-strong); }
.app-scherm .collegas-zichtknop svg { width: 14px; height: 14px; color: var(--text-muted); }
.app-scherm .collegas-zicht-label { color: var(--text-dim); }
.app-scherm .collegas-zichtknop strong { font-weight: 650; }
.app-scherm .collegas-lijst { flex-direction: column; gap: 10px; display: flex; }
.app-scherm .collegas-lijstkop { flex-direction: column; gap: 1px; margin: 0px; display: flex; }
.app-scherm .collegas-lijstkop strong { font-size: var(--fs-sm); font-weight: 650; }
.app-scherm .collegas-lijstkop span { font-size: var(--fs-xs); color: var(--text-dim); }
.app-scherm .collegas-mensen { margin: 0px; padding: 0px; list-style: none; }
.app-scherm .collegas-mensen li { font-size: var(--fs-sm); border-bottom: 1px solid color-mix(in srgb, var(--border) 45%, transparent); grid-template-columns: 22px minmax(0px, 1fr) auto 28px; align-items: center; column-gap: 10px; padding: 7px 4px 7px 2px; display: grid; }
.app-scherm .collegas-mensen li:last-child { border-bottom: 0px; }
.app-scherm .collegas-avatar { box-sizing: border-box; background: color-mix(in srgb, var(--text) 10%, transparent); width: 22px; height: 22px; color: var(--text-dim); border-radius: 50%; flex: 0 0 auto; place-items: center; font-size: 0.66rem; font-weight: 650; display: grid; }
.app-scherm .collegas-m-naam { text-overflow: ellipsis; white-space: nowrap; min-width: 0px; overflow: hidden; }
.app-scherm .collegas-m-naam em { color: var(--text-muted); font-style: normal; font-size: var(--fs-xs); margin-left: 6px; }
.app-scherm .collegas-m-recht { color: var(--text-dim); font-size: var(--fs-xs); }
.app-scherm .collegas-toevoegen { margin-top: auto; }
.app-scherm .delen-document-kaart, .app-scherm .collegas-kaart, .app-scherm .linken-kaart { padding: var(--sp-6); }
.app-scherm .delen-document-kaart, .app-scherm .tab-inhoud.delen-tab { gap: var(--sp-5); }
.app-scherm .delen-document-rij { gap: var(--sp-6); grid-template-columns: 26rem minmax(0px, 1fr); align-items: stretch; display: grid; }
.app-scherm .delen-voet { align-items: center; gap: var(--sp-4); padding-top: var(--sp-5); border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent); flex-wrap: wrap; display: flex; }
.app-scherm .delen-voet-acties { gap: 8px; display: flex; }
.app-scherm .linken-voet .btn svg:last-child { opacity: 0.6; width: 13px; height: 13px; }
.app-scherm .delen-onder-rij { gap: var(--sp-5); grid-template-columns: 1fr 1fr; align-items: stretch; display: grid; }
.app-scherm .linken-uitnodiging { flex-direction: column; gap: 10px; display: flex; }
.app-scherm .linken-u-kop { font-size: var(--fs-sm); color: var(--text-dim); margin: 0px; }
.app-scherm .linken-tegels { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 8px; display: grid; }
.app-scherm .linken-tegel { border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent); background: color-mix(in srgb, var(--text) 3%, transparent); color: var(--text); font: inherit; text-align: left; cursor: pointer; align-items: flex-start; gap: 12px; min-width: 0px; padding: 14px; display: flex; }
.app-scherm .linken-tegel:hover { border-color: var(--border-strong); background: color-mix(in srgb, var(--text) 6%, transparent); }
.app-scherm .linken-t-ico { background: color-mix(in srgb, var(--brand) 14%, transparent); width: 34px; height: 34px; color: color-mix(in srgb, var(--brand) 75%, var(--text)); border-radius: 10px; flex: 0 0 auto; place-items: center; display: grid; }
.app-scherm .linken-t-ico svg { width: 17px; height: 17px; }
.app-scherm .linken-t-t { flex-direction: column; gap: 2px; min-width: 0px; display: flex; }
.app-scherm .linken-t-t strong { font-size: var(--fs-sm); font-weight: 650; }
.app-scherm .linken-t-t small { font-size: var(--fs-xs); color: var(--text-dim); line-height: 1.45; }
.app-scherm .linken-voet { flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; display: flex; }
.app-scherm .linken-voet .linken-bekijk-uit { opacity: 0.5; cursor: default; pointer-events: none; }
.app-scherm .actieblok-avatar.is-gekleurd, .app-scherm .collegas-avatar.is-gekleurd { background: color-mix(in srgb, var(--k) 16%, transparent); color: var(--k); }
@keyframes opkomen { 
  0% { opacity: 0; transform: translateY(18px) scale(0.985); }
}
@keyframes vervagen { 
  0% { opacity: 0; }
}

/* De demo: per spreker de regels voor het oplichten. */
.demo:has(#demo-sp-0:checked) .transcript-blok[data-sp="0"] { opacity: 1; background: var(--brand-soft); }
.demo:has(#demo-sp-0:checked) .sp-groep[data-sp="0"] { background: var(--brand-tint); }
.demo:has(#demo-sp-1:checked) .transcript-blok[data-sp="1"] { opacity: 1; background: var(--brand-soft); }
.demo:has(#demo-sp-1:checked) .sp-groep[data-sp="1"] { background: var(--brand-tint); }
.demo:has(#demo-sp-2:checked) .transcript-blok[data-sp="2"] { opacity: 1; background: var(--brand-soft); }
.demo:has(#demo-sp-2:checked) .sp-groep[data-sp="2"] { background: var(--brand-tint); }

.demo:has(#demo-sprong-1:checked) .notulendoc-document > :nth-child(-n+2) { display: none; }

.demo:has(#demo-sprong-2:checked) .notulendoc-document > :nth-child(-n+3) { display: none; }

.demo:has(#demo-sprong-3:checked) .notulendoc-document > :nth-child(-n+5) { display: none; }

.demo:has(#demo-sprong-4:checked) .notulendoc-document > :nth-child(-n+7) { display: none; }

.demo:has(#demo-sprong-5:checked) .notulendoc-document > :nth-child(-n+9) { display: none; }

.demo:has(#demo-sprong-6:checked) .notulendoc-document > :nth-child(-n+11) { display: none; }

.demo:has(#demo-sprong-7:checked) .notulendoc-document > :nth-child(-n+13) { display: none; }

.demo:has(#demo-sprong-8:checked) .notulendoc-document > :nth-child(-n+15) { display: none; }

.demo .actiekolom:has(#demo-ap-0:checked) .demo-teller::before,
.demo .actiekolom:has(#demo-ap-1:checked) .demo-teller::before,
.demo .actiekolom:has(#demo-ap-2:checked) .demo-teller::before { content: "1"; }
.demo .actiekolom:has(#demo-ap-0:checked) .actiekolom-meter i,
.demo .actiekolom:has(#demo-ap-1:checked) .actiekolom-meter i,
.demo .actiekolom:has(#demo-ap-2:checked) .actiekolom-meter i { width: 33% !important; }
.demo .actiekolom:has(#demo-ap-0:checked):has(#demo-ap-1:checked) .demo-teller::before,
.demo .actiekolom:has(#demo-ap-0:checked):has(#demo-ap-2:checked) .demo-teller::before,
.demo .actiekolom:has(#demo-ap-1:checked):has(#demo-ap-2:checked) .demo-teller::before { content: "2"; }
.demo .actiekolom:has(#demo-ap-0:checked):has(#demo-ap-1:checked) .actiekolom-meter i,
.demo .actiekolom:has(#demo-ap-0:checked):has(#demo-ap-2:checked) .actiekolom-meter i,
.demo .actiekolom:has(#demo-ap-1:checked):has(#demo-ap-2:checked) .actiekolom-meter i { width: 67% !important; }
.demo .actiekolom:has(#demo-ap-0:checked):has(#demo-ap-1:checked):has(#demo-ap-2:checked) .demo-teller::before { content: "3"; }
.demo .actiekolom:has(#demo-ap-0:checked):has(#demo-ap-1:checked):has(#demo-ap-2:checked) .actiekolom-meter i { width: 100% !important; }

.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-0"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-0"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-0"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-0"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-0"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-0"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-0"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-0"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-0"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-0"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-0"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-0"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-0"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-0"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-0"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-0"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-0"] { display: none !important; }
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-1"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-1"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-1"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-1"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-1"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-1"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-1"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-1"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-1"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-1"] { display: none !important; }
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-2"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-2"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-2"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-2"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-2"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-2"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-2"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-2"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-2"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-2"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-2"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-2"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-2"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-2"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-2"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-2"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-2"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-2"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-2"] { display: none !important; }
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-3"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-3"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-3"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-3"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-3"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-3"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-3"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-3"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-3"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-3"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-3"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-3"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-3"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-3"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-3"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-3"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-3"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-3"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-3"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-3"] { display: none !important; }
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-4"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-4"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-4"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-4"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-4"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-4"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-4"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-4"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-4"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-4"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-4"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-4"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-4"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-4"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-4"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-4"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-4"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-4"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-4"] { display: none !important; }
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-5"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-5"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-5"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-5"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-5"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-5"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-5"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-5"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-5"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-5"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-5"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-5"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-5"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-5"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-5"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-5"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-5"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-5"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-5"] { display: none !important; }
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-6"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-6"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-6"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-6"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-6"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-6"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-6"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-6"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-6"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-6"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-6"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-6"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-6"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-6"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-6"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-6"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-6"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-6"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-6"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-6"] { display: none !important; }
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-7"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-7"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-7"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-7"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-7"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-7"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-7"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-7"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-7"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-7"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-7"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-7"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-7"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-7"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-7"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-7"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-7"] { display: none !important; }
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-8"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-8"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-8"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-8"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-8"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-8"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-8"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-8"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-8"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-8"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-8"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-8"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-8"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-8"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-8"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-8"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-8"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-8"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-8"] { display: none !important; }
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-9"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-9"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-9"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-9"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-9"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-9"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-9"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-9"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-9"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-9"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-9"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-9"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-9"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-9"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-9"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-9"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-9"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-9"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-9"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-9"] { display: none !important; }
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-10"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-10"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-10"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-10"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-10"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-10"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d0-0-10"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d0-0-10"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d0-0-10"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-10"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-10"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-10"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-10"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-10"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-10"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-10"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-10"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d0-0-10"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d0-0-10"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d0-0-10"] { display: none !important; }
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d1-0-0"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d1-0-0"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d1-0-0"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d1-0-0"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d1-0-0"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d1-0-0"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d1-0-0"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d1-0-0"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d1-0-0"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d1-0-0"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d1-0-0"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d1-0-0"] { display: none !important; }
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d1-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d1-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d1-0-1"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d1-0-1"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d1-0-1"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d1-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d1-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d1-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d1-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d1-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d1-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d1-0-1"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d1-0-1"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d1-0-1"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d1-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d1-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d1-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d1-0-1"] { display: none !important; }
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d1-0-2"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d1-0-2"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d1-0-2"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d1-0-2"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d1-0-2"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d1-0-2"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d1-0-2"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d1-0-2"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d1-0-2"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d1-0-2"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d1-0-2"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d1-0-2"] { display: none !important; }
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d2-2-0"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d2-2-0"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d2-2-0"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d2-2-0"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d2-2-0"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d2-2-0"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d2-2-0"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d2-2-0"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d2-2-0"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d2-2-0"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d2-2-0"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d2-2-0"] { display: none !important; }
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d2-2-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d2-2-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d2-2-1"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d2-2-1"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d2-2-1"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d2-2-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d2-2-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d2-2-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d2-2-1"] { display: none !important; }
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d3-0-0"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d3-0-0"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d3-0-0"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d3-0-0"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d3-0-0"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d3-0-0"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d3-0-0"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d3-0-0"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d3-0-0"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d3-0-0"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d3-0-0"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d3-0-0"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d3-0-0"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d3-0-0"] { display: none !important; }
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d3-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d3-0-1"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d3-0-1"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d3-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d3-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-2:checked) [data-dv="d3-0-1"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d3-0-1"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d3-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d3-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d3-0-1"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d3-0-1"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d3-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d3-0-1"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-2:checked) [data-dv="d3-0-1"] { display: none !important; }
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d3-0-2"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d3-0-2"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d3-0-2"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d3-0-2"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-0:checked) [data-dv="d3-0-2"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)):has(#demo-dv-1:checked) [data-dv="d3-0-2"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d3-0-2"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d3-0-2"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d3-0-2"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d3-0-2"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d3-0-2"],
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d3-0-2"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-0:checked) [data-dv="d3-0-2"],
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:checked):has(#demo-dk-2:checked):has(#demo-dv-1:checked) [data-dv="d3-0-2"] { display: none !important; }
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)) .dockeuze-vink:has(#demo-dk-0) { pointer-events: none; }
.demo:has(#demo-dk-0:checked):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:not(:checked)) #demo-dk-0 {  appearance: none; opacity: 1; cursor: not-allowed; background-color: color-mix(in srgb, var(--text-muted) 65%, var(--text)); flex-shrink: 0; width: 18px; height: 18px; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M3.2 0h9.6A3.2 3.2 0 0 1 16 3.2v9.6a3.2 3.2 0 0 1-3.2 3.2H3.2A3.2 3.2 0 0 1 0 12.8V3.2A3.2 3.2 0 0 1 3.2 0Zm3.35 12.05L2.6 8.1l1.3-1.3 2.65 2.65 5.55-5.55 1.3 1.3-6.85 6.85Z'/%3E%3C/svg%3E"); mask-size: contain; mask-repeat: no-repeat;  }
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)) .dockeuze-vink:has(#demo-dk-1) { pointer-events: none; }
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:checked):has(#demo-dk-2:not(:checked)) #demo-dk-1 {  appearance: none; opacity: 1; cursor: not-allowed; background-color: color-mix(in srgb, var(--text-muted) 65%, var(--text)); flex-shrink: 0; width: 18px; height: 18px; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M3.2 0h9.6A3.2 3.2 0 0 1 16 3.2v9.6a3.2 3.2 0 0 1-3.2 3.2H3.2A3.2 3.2 0 0 1 0 12.8V3.2A3.2 3.2 0 0 1 3.2 0Zm3.35 12.05L2.6 8.1l1.3-1.3 2.65 2.65 5.55-5.55 1.3 1.3-6.85 6.85Z'/%3E%3C/svg%3E"); mask-size: contain; mask-repeat: no-repeat;  }
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked) .dockeuze-vink:has(#demo-dk-2) { pointer-events: none; }
.demo:has(#demo-dk-0:not(:checked)):has(#demo-dk-1:not(:checked)):has(#demo-dk-2:checked) #demo-dk-2 {  appearance: none; opacity: 1; cursor: not-allowed; background-color: color-mix(in srgb, var(--text-muted) 65%, var(--text)); flex-shrink: 0; width: 18px; height: 18px; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M3.2 0h9.6A3.2 3.2 0 0 1 16 3.2v9.6a3.2 3.2 0 0 1-3.2 3.2H3.2A3.2 3.2 0 0 1 0 12.8V3.2A3.2 3.2 0 0 1 3.2 0Zm3.35 12.05L2.6 8.1l1.3-1.3 2.65 2.65 5.55-5.55 1.3 1.3-6.85 6.85Z'/%3E%3C/svg%3E"); mask-size: contain; mask-repeat: no-repeat;  }