/* =============================================================================
   Softwareshaker School
   The look of the Glide School as it was live on 2026-10-22 (user: "het moet qua uiterlijk precies lijken op de
   oude"): Glide's layout (content 1196 px wide on #fafafa, Inter, small type: 14 px text, 21/24 px headings) plus the
   School's own Glide CSS (backups/glide-school-custom-css-live-2026-10-22.css on softwareshaker.com): top bar #111214
   with the tabs centred and "Hulp nodig?" as a red button, dark bands with a red glow and a 56 px grid, the red
   next-page button. Measured in the live app at 1920 px.
============================================================================= */

@font-face {font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root {
	--ink: #111214;
	--rood: #D32020;
	--rood-donker: #B51B1B;
	--rood-zacht: rgba(211, 32, 32, .1);
	--tekst: rgba(0, 0, 0, .95);
	--grijs: rgba(51, 51, 51, .7);
	--grijs-licht: rgba(51, 51, 51, .55);
	--lijn: rgba(51, 51, 51, .1);
	--rand: rgba(51, 51, 51, .08);
	--vlak: rgba(51, 51, 51, .05);
	--rij: #f5f5f5;
	--pagina: #fafafa;
	--groen: #1f8a4c;
	--groen-licht: #e3f4ea;
	--font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--breed: 1196px;
}

*, *::before, *::after {box-sizing:border-box;}
html {-webkit-text-size-adjust:100%;}
body {margin:0;background:var(--pagina);color:var(--tekst);font-family:var(--font);font-size:14px;line-height:1.4;-webkit-font-smoothing:antialiased;}
img, video, iframe {display:block;max-width:100%;}
a {color:inherit;text-decoration:none;}
h1, h2, h3, p {margin:0;}
h1, h2, h3 {color:var(--tekst);font-weight:600;line-height:1.2;}
button, input, select, textarea {font:inherit;color:inherit;}
.screen-reader-text {position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.sss-skip {position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:8px;background:#fff;color:var(--ink);font-weight:600;}
.sss-skip:focus {top:12px;}
:focus-visible {outline:2px solid rgba(211,32,32,.6);outline-offset:2px;}
[hidden] {display:none !important;}

.sss-wrap {width:100%;max-width:calc(var(--breed) + 48px);margin:0 auto;padding:0 24px;}
.sss-main {min-height:calc(100vh - 56px);padding-bottom:48px;}
.sss-icoon {width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- Top bar (56 px, tabs centred, Hulp nodig? red, avatar) ---------- */
.sss-top {position:sticky;top:0;z-index:50;background:var(--ink);color:#fff;}
.sss-top-inner {display:grid;grid-template-columns:minmax(120px,1fr) auto minmax(200px,1fr);align-items:center;column-gap:8px;max-width:calc(var(--breed) + 48px);height:56px;margin:0 auto;padding:0 24px;}
.sss-logo {display:inline-flex;align-items:center;gap:10px;justify-self:start;padding-left:7px;color:#fff;font-size:16px;font-weight:600;}
.sss-logo img {width:13px;height:24px;}
.sss-nav {display:flex;justify-content:center;gap:4px;}
.sss-nav-link {display:inline-flex;align-items:center;gap:8px;height:37px;padding:8px;border-radius:8px;color:rgba(255,255,255,.8);font-size:14px;font-weight:500;white-space:nowrap;}
.sss-nav-link:hover {color:#fff;}
.sss-nav-link.is-actief {background:rgba(255,255,255,.1);color:#fff;}
.sss-top-rechts {display:flex;justify-content:flex-end;align-items:center;gap:12px;}
.sss-hulp-knop {display:inline-flex;align-items:center;gap:8px;height:37px;padding:8px;border-radius:5px;background:var(--rood);color:#fff;font-size:14px;font-weight:600;white-space:nowrap;}
.sss-hulp-knop:hover {background:var(--rood-donker);color:#fff;}
.sss-account {position:relative;}
.sss-avatar {display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:9999px;background:rgb(255,239,209);color:rgb(255,177,27);font-size:14px;cursor:pointer;}
.sss-account-menu {position:absolute;right:-2px;top:calc(100% + 8px);z-index:60;min-width:156px;padding:6px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--rand), 0 8px 24px rgba(0,0,0,.12);color:var(--tekst);}
.sss-account-menu a {display:block;padding:7px 8px;border-radius:6px;font-size:14px;white-space:nowrap;}
.sss-account-menu a:hover {background:var(--vlak);}
.sss-bekijk-form {margin:4px 0;padding:8px;border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);}
.sss-bekijk-form label {display:block;margin-bottom:4px;color:var(--grijs);font-size:12px;font-weight:600;}
.sss-bekijk-form select {width:220px;max-width:100%;padding:5px 6px;border:1px solid var(--lijn);border-radius:6px;font-size:13px;}
.sss-menu-knop {display:none;place-items:center;width:37px;height:37px;padding:0;border:0;border-radius:8px;background:transparent;color:#fff;cursor:pointer;}
.sss-bekijk-als {background:#fff4d6;color:#5c4400;font-size:14px;}
.sss-bekijk-als .sss-wrap {padding-top:8px;padding-bottom:8px;}
.sss-bekijk-als a {font-weight:600;text-decoration:underline;}

/* ---------- Dark band (Glide "Accent" container + School CSS) ---------- */
.sss-band {position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:#fff;}
.sss-band::before, .sss-band::after {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;}
.sss-band::before {background:radial-gradient(820px circle at 74% 55%, rgba(211,32,32,.62), rgba(211,32,32,.26) 36%, rgba(211,32,32,.08) 58%, transparent 72%), radial-gradient(560px circle at 0% 100%, rgba(211,32,32,.16), transparent 62%);}
.sss-band::after {background-image:linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 60% 80% at 70% 50%, #000 20%, transparent 75%);mask-image:radial-gradient(ellipse 60% 80% at 70% 50%, #000 20%, transparent 75%);}
.sss-band-inner {padding-top:44px;padding-bottom:36px;}
.sss-band-inner.heeft-kruimels {padding-top:16px;}
.sss-band-kop {display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:40px;margin-bottom:22px;}
.sss-kruimels ol {display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none;color:rgba(255,255,255,.8);font-size:14px;}
.sss-kruimels li {display:flex;align-items:center;}
.sss-kruimels li + li::before {content:"/";margin:0 6px;color:rgba(255,255,255,.8);}
.sss-kruimels .sss-kruimel-terug {display:inline-flex;margin:0 8px 0 4px;color:rgba(255,255,255,.8);}
.sss-kruimels .sss-kruimel-terug .sss-icoon {width:16px;height:16px;}
.sss-kruimels a:hover {color:#fff;}
.sss-kruimels [aria-current] {color:#fff;font-weight:600;}
.sss-terug {display:inline-grid;place-items:center;width:88px;height:40px;border-radius:12px;background:rgba(255,255,255,.1);color:#fff;}
.sss-terug:hover {background:rgba(255,255,255,.16);}
.sss-terug .sss-icoon {width:20px;height:20px;}
.sss-band-titel {color:#fff;font-size:24px;font-weight:600;line-height:1.2;overflow-wrap:break-word;}
.sss-band-lead {margin-top:6px;color:rgba(255,255,255,.8);font-size:14px;line-height:1.4;white-space:pre-line;}
.sss-band-zoek {margin-top:28px;}
.sss-band-zoek input {width:100%;height:39px;padding:8px 12px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(255,255,255,.2);color:#fff;font-size:14px;outline:none;}
.sss-band-zoek input::placeholder {color:rgba(255,255,255,.75);}
.sss-band-zoek input:focus {border-color:rgba(255,255,255,.35);}
.sss-band-knoppen {display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.sss-band-knoppen form {margin:0;}
.sss-band-voortgang {display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;max-width:560px;margin-top:16px;color:rgba(255,255,255,.85);}
.sss-band-voortgang .sss-voortgang {flex:1 1 200px;background:rgba(255,255,255,.16);}
.sss-band--midden .sss-band-inner {display:flex;flex-direction:column;align-items:center;padding-top:36px;padding-bottom:20px;text-align:center;}
.sss-profiel-foto {display:grid;place-items:center;width:104px;height:104px;margin-bottom:24px;border:2px solid rgba(255,255,255,.85);border-radius:50%;background:#e0e0e0;color:#999;font-size:36px;font-weight:600;}
.sss-band--midden .sss-band-lead {margin-top:10px;}

/* ---------- Page parts ---------- */
.sss-blok {padding-top:16px;}
.sss-blok--ruim {padding-top:32px;}
.sss-scheiding {height:1px;margin:32px 0;background:var(--lijn);border:0;}
.sss-kop {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;}
.sss-kop h2 {font-size:21px;}
.sss-kop--groot h2 {font-size:24px;letter-spacing:-.01em;}
.sss-kop-link {display:inline-flex;align-items:center;gap:6px;color:var(--rood);font-size:14px;font-weight:600;}
.sss-kop-link .sss-icoon {width:16px;height:16px;}
.sss-leeg {padding:24px 0;color:var(--grijs);}
.sss-zoekveld {display:flex;align-items:center;gap:6px;width:263px;max-width:100%;height:36px;margin-left:auto;padding:0 10px 0 8px;border-radius:8px;background:rgba(51,51,51,.08);color:var(--grijs-licht);}
.sss-zoekveld .sss-icoon {width:16px;height:16px;}
.sss-zoekveld input {flex:1;min-width:0;height:100%;border:0;outline:none;background:transparent;color:var(--tekst);font-size:14px;}
.sss-zoekveld input::placeholder {color:var(--grijs-licht);}
.sss-zoekbalk {display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-bottom:16px;}
.sss-melding {margin:0 0 16px;padding:10px 14px;border-radius:8px;font-size:14px;}
.sss-melding--ok {background:var(--groen-licht);color:#14532d;}
.sss-melding--fout {background:var(--rood-zacht);color:#8f1515;}
.sss-melding--info {background:var(--vlak);color:var(--tekst);}
.sss-melding a {font-weight:600;text-decoration:underline;}
.sss-badge {display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;line-height:1.5;white-space:nowrap;text-transform:uppercase;}
.sss-badge--rood {background:var(--rood-zacht);color:var(--rood);}
.sss-badge--groen {background:var(--groen-licht);color:var(--groen);}

/* ---------- Home: map tiles, 4 in a row (Glide card collection: 16 px radius, the logo in an 8 px inset) ---------- */
.sss-mappen {display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:16px;}
.sss-map {display:flex;flex-direction:column;padding:8px 8px 36px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--rand);}
.sss-map:hover {box-shadow:inset 0 0 0 1px rgba(51,51,51,.16);}
.sss-map-beeld {position:relative;display:grid;place-items:center;aspect-ratio:271 / 152;overflow:hidden;border-radius:8px;}
.sss-map img {position:absolute;inset:0;width:100%;height:100%;object-fit:contain;} /* the whole logo, never cut off */
.sss-map-naam {padding:12px;font-size:18px;font-weight:600;text-align:center;}

/* ---------- Table list (Recent toegevoegde video's) ---------- */
.sss-tabel-lijst {border-top:1px solid var(--lijn);}
.sss-tabel-rij {display:grid;grid-template-columns:32px minmax(0,1fr) minmax(0,.62fr) 110px;align-items:center;gap:24px;min-height:45px;padding:6px;border-bottom:1px solid var(--lijn);font-size:14px;}
.sss-tabel-rij:hover {background:rgba(51,51,51,.03);}
.sss-tabel-rij img {width:32px;height:32px;object-fit:cover;border-radius:6px;background:#26221a;}
.sss-tabel-titel {font-weight:600;}
.sss-tabel-titel, .sss-tabel-meta {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---------- Pagination (School CSS: next button red, page buttons 36 px) ---------- */
.sss-paginas {display:flex;justify-content:center;align-items:center;gap:20px;margin-top:16px;}
.sss-paginas-nummers {display:flex;align-items:center;gap:2px;}
.sss-pagina {display:grid;place-items:center;min-width:36px;height:36px;padding:0 6px;border-radius:8px;color:var(--tekst);font-size:15px;font-weight:600;}
.sss-pagina:hover {background:var(--vlak);}
.sss-pagina.is-actief {background:var(--rood-zacht);color:var(--rood);}
.sss-pagina-gat {min-width:24px;text-align:center;color:var(--tekst);}
.sss-pagina-pijl {display:grid;place-items:center;width:64px;height:36px;border:1px solid var(--lijn);border-radius:8px;background:#fff;color:var(--grijs);}
.sss-pagina-pijl .sss-icoon {width:18px;height:18px;}
.sss-pagina-pijl.is-uit {opacity:.4;pointer-events:none;}
.sss-pagina-pijl--volgende:not(.is-uit) {border-color:var(--rood);background:var(--rood);color:#fff;box-shadow:0 6px 16px rgba(211,32,32,.25);}
.sss-pagina-pijl--volgende:not(.is-uit):hover {border-color:#b81b1b;background:#b81b1b;}

/* ---------- Module cards (map page, 6 in a row: grey card, image in a 4 px inset) ---------- */
.sss-modules {display:grid;grid-template-columns:repeat(6, minmax(0,1fr));gap:16px 10px;}
.sss-module {display:flex;flex-direction:column;padding:4px 4px 12px;border-radius:12px;background:var(--vlak);}
.sss-module:hover {background:rgba(51,51,51,.08);}
.sss-module-beeld {display:block;aspect-ratio:16 / 9;overflow:hidden;border-radius:8px;background:#26221a;}
.sss-module-beeld img {width:100%;height:100%;object-fit:cover;}
.sss-module-leeg {display:grid;place-items:center;height:100%;padding:8px;color:#fff;font-size:14px;font-weight:600;text-align:center;}
.sss-module-naam {margin:12px 8px 0;font-size:14px;font-weight:600;line-height:1.2;}
.sss-module-aantal {margin:1px 8px 0;color:var(--grijs);font-size:14px;line-height:1.4;}

/* ---------- Video cards (module page, 6 in a row: white card, "VIDEO 1" in red) ---------- */
.sss-videos {display:grid;grid-template-columns:repeat(6, minmax(0,1fr));gap:12px 10px;}
.sss-video {display:flex;flex-direction:column;padding:4px 4px 12px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--rand);}
.sss-video:hover {box-shadow:inset 0 0 0 1px rgba(51,51,51,.16);}
.sss-video-beeld {position:relative;display:block;aspect-ratio:16 / 9;overflow:hidden;border-radius:8px;background:#26221a;}
.sss-video-beeld img {width:100%;height:100%;object-fit:cover;}
.sss-vink {position:absolute;left:6px;top:6px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--groen);color:#fff;}
.sss-vink svg {width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.sss-video-label {margin:12px 8px 0;color:var(--rood);font-size:11px;font-weight:600;line-height:16px;text-transform:uppercase;}
.sss-video-titel {margin:0 8px;font-size:14px;font-weight:600;line-height:1.2;}

/* ---------- Video page ---------- */
.sss-speler {position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:12px;background:#000;}
.sss-speler video, .sss-speler iframe {width:100%;height:100%;border:0;background:#000;}
.sss-speler-leeg {position:relative;height:100%;}
.sss-speler-leeg img {width:100%;height:100%;object-fit:cover;opacity:.45;}
.sss-speler-leeg p {position:absolute;inset:auto 0 0;padding:16px;color:#fff;font-weight:600;}
.sss-velden {display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:16px;margin-top:24px;}
.sss-veld-label {color:var(--grijs);font-size:14px;line-height:1.2;}
.sss-veld-waarde {margin-top:2px;font-size:14px;line-height:1.2;}
.sss-video-acties {display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.sss-video-acties form {margin:0;}
.sss-tekst {font-size:14px;line-height:1.2;-webkit-hyphens:auto;hyphens:auto;}
.sss-tekst p {margin:0 0 10px;}
.sss-tekst p:last-child {margin-bottom:0;}
.sss-sectie-titel {margin-bottom:16px;font-size:24px;}
.sss-noot {margin-bottom:16px;color:var(--grijs);font-size:14px;}
.sss-module-kaart {display:flex;flex-direction:column;width:287px;max-width:100%;padding:8px 8px 14px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--rand);}
.sss-module-kaart img {width:100%;aspect-ratio:16 / 9;object-fit:cover;border-radius:8px;background:#26221a;}
.sss-module-kaart span {margin:16px 8px 0;font-size:14px;font-weight:600;}

/* ---------- Buttons ---------- */
.sss-knop {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:8px 14px;border:0;border-radius:8px;background:var(--rood);color:#fff;font-size:14px;font-weight:600;line-height:1.2;cursor:pointer;}
.sss-knop:hover {background:var(--rood-donker);color:#fff;}
.sss-knop:disabled {opacity:.4;cursor:default;}
.sss-knop .sss-icoon {width:18px;height:18px;}
.sss-knop--rand {background:#fff;color:var(--tekst);box-shadow:inset 0 0 0 1px var(--lijn);}
.sss-knop--rand:hover {background:var(--vlak);color:var(--tekst);}
.sss-knop--wit {background:rgba(255,255,255,.1);color:#fff;}
.sss-knop--wit:hover {background:rgba(255,255,255,.16);}
.sss-knop--breed {width:100%;}
.sss-knop--google {border:1px solid rgba(255,255,255,.18);background:transparent;color:#fff;}
.sss-knop--google:hover {background:rgba(255,255,255,.06);}
.sss-afgerond {background:#fff;color:var(--tekst);box-shadow:inset 0 0 0 1px var(--lijn);}
.sss-afgerond:hover {background:var(--groen-licht);color:#14532d;}
.sss-afgerond.is-aan {background:var(--groen);color:#fff;box-shadow:none;}
.sss-afgerond.is-aan:hover {background:#1a7641;color:#fff;}
.sss-knoppen {display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.sss-link-knop {display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--rood);font-size:14px;cursor:pointer;}
.sss-link-knop:hover {text-decoration:underline;}

/* ---------- Zoek video's: sort buttons, white card with the list ---------- */
.sss-sorteer {display:flex;gap:8px;margin:16px 0;}
.sss-sorteer a {display:inline-flex;align-items:center;gap:6px;height:36px;padding:8px 12px;border-radius:8px;font-size:14px;font-weight:500;}
.sss-sorteer a .sss-icoon {width:16px;height:16px;}
.sss-sorteer a:hover, .sss-sorteer a.is-actief {background:var(--vlak);}
.sss-kaart {padding:24px 26px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--rand);}
.sss-kaart + .sss-kaart {margin-top:16px;}
.sss-kaart-kop {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;}
.sss-kaart-kop h2 {font-size:24px;}
.sss-filter {position:relative;display:inline-flex;align-items:center;height:32px;padding:0 10px;border-radius:8px;background:rgba(51,51,51,.08);color:var(--grijs-licht);}
.sss-filter .sss-icoon {width:16px;height:16px;}
.sss-filter select {height:100%;padding:0 22px 0 6px;border:0;outline:none;background:transparent;color:var(--grijs);font-size:14px;cursor:pointer;-webkit-appearance:none;appearance:none;}
.sss-filter::after {content:"";position:absolute;right:12px;top:50%;width:6px;height:6px;margin-top:-5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);pointer-events:none;}
.sss-lijst {display:flex;flex-direction:column;gap:2px;}
.sss-lijst-rij {display:grid;grid-template-columns:142px minmax(0,1fr) 24px;align-items:center;gap:12px;min-height:96px;padding:8px;background:var(--rij);}
.sss-lijst-rij:first-child {border-radius:12px 12px 0 0;}
.sss-lijst-rij:last-child {border-radius:0 0 12px 12px;}
.sss-lijst-rij:only-child {border-radius:12px;}
.sss-lijst-rij:hover {background:#efefef;}
.sss-lijst-rij img {width:142px;height:80px;object-fit:cover;border-radius:8px;background:#26221a;}
.sss-lijst-duur {color:var(--rood);font-size:11px;font-weight:600;line-height:20px;text-transform:uppercase;}
.sss-lijst-titel {font-size:14px;font-weight:600;line-height:20px;}
.sss-lijst-datum {color:var(--grijs);font-size:14px;line-height:20px;}
.sss-lijst-rij > .sss-icoon {width:18px;height:18px;color:var(--grijs);}
.sss-lijst-rij.sss-in {animation:sss-in .32s cubic-bezier(.2,.7,.2,1) both;}
.sss-lijst-rij.sss-uit {animation:sss-uit .18s ease-in both;}
@keyframes sss-in {from {opacity:0;transform:translateX(24px);} to {opacity:1;transform:none;}}
@keyframes sss-uit {from {opacity:1;transform:none;} to {opacity:0;transform:translateX(-24px);}}
.sss-kaart-kop .sss-filter select {max-width:180px;}

/* ---------- Hulp nodig? (Glide form screen) ---------- */
.sss-formulier h1 {margin-bottom:16px;font-size:21px;}
.sss-veld-kop {display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
.sss-veld-kop label {font-size:14px;font-weight:600;}
.sss-veld-kop small {color:var(--grijs);font-size:11px;}
.sss-formulier textarea, .sss-formulier input[type="text"], .sss-formulier input[type="email"], .sss-formulier input[type="date"], .sss-formulier select {width:100%;padding:10px 12px;border:1px solid rgba(51,51,51,.15);border-radius:8px;background:#fff;color:var(--tekst);font-size:14px;outline:none;}
.sss-formulier textarea {min-height:124px;resize:vertical;line-height:1.4;}
.sss-formulier textarea::placeholder, .sss-formulier input::placeholder {color:var(--grijs-licht);}
.sss-formulier textarea:focus, .sss-formulier input:focus, .sss-formulier select:focus {border-color:rgba(51,51,51,.4);}
.sss-formulier .sss-veld + .sss-veld {margin-top:16px;}
.sss-formulier .sss-knoppen {margin-top:16px;}
.sss-anydesk {margin-top:16px;font-size:14px;line-height:1.4;}
.sss-anydesk strong {display:block;}
.sss-anydesk p + p {margin-top:8px;}
.sss-anydesk a {color:var(--rood);}
.sss-anydesk a:hover {text-decoration:underline;}
.sss-vinkje {display:flex !important;align-items:center;gap:10px;font-size:14px;cursor:pointer;}
.sss-vinkje input {width:16px;height:16px;accent-color:var(--rood);}
.sss-form-noot {margin-top:6px;color:var(--grijs);font-size:13px;}

/* ---------- Profiel ---------- */
.sss-rijen {display:flex;flex-direction:column;}
.sss-rijen > div, .sss-rijen > a {display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:8px 14px;font-size:14px;font-weight:600;}

/* ---------- Mijn plannen ---------- */
.sss-plannen {display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:16px;}
.sss-plan {display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--rand);}
.sss-plan:hover {box-shadow:inset 0 0 0 1px rgba(51,51,51,.16);}
.sss-plan-kop {display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.sss-plan-titel {font-size:14px;font-weight:600;}
.sss-plan-onder {display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;color:var(--grijs);font-size:14px;}
.sss-plan-onder .is-laat {color:var(--rood);font-weight:600;}
.sss-voortgang {position:relative;display:block;height:6px;overflow:hidden;border-radius:999px;background:rgba(51,51,51,.1);}
.sss-voortgang span {position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--rood);}
.sss-plan.is-klaar .sss-voortgang span, .sss-deelnemers .sss-voortgang span {background:var(--groen);}
.sss-voortgang--groot {height:8px;}
.sss-plan-kolommen {display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:24px;align-items:start;}
.sss-tijdlijn {position:relative;margin:0;padding:0;list-style:none;}
.sss-tijdlijn::before {content:"";position:absolute;left:15px;top:20px;bottom:20px;width:2px;background:var(--lijn);}
.sss-stap {position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:center;padding:4px 0;}
.sss-stap-nr {z-index:1;display:grid;place-items:center;width:32px;height:32px;border:2px solid rgba(51,51,51,.15);border-radius:50%;background:#fff;color:var(--grijs);font-size:13px;font-weight:600;}
.sss-stap.is-afgerond .sss-stap-nr {border-color:var(--groen);background:var(--groen);color:#fff;}
.sss-stap.is-bezig .sss-stap-nr {border-color:var(--rood);color:var(--rood);}
.sss-stap-nr .sss-icoon {width:15px;height:15px;stroke-width:2.6;}
.sss-stap-kaart {display:grid;grid-template-columns:142px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px;border-radius:12px;background:var(--rij);}
.sss-stap.is-bezig .sss-stap-kaart {background:#fff;box-shadow:inset 0 0 0 1px rgba(211,32,32,.35);}
.sss-stap-kaart img {width:142px;height:80px;object-fit:cover;border-radius:8px;background:#26221a;}
.sss-stap-tekst {display:flex;flex-direction:column;gap:2px;min-width:0;}
.sss-stap-meta {color:var(--rood);font-size:11px;font-weight:600;text-transform:uppercase;}
.sss-stap-tekst strong {font-size:14px;font-weight:600;}
.sss-stap-status {color:var(--grijs);font-size:14px;}
.sss-stap.is-afgerond .sss-stap-status {color:var(--groen);}
.sss-deelnemers {display:flex;flex-direction:column;gap:2px;margin:0 0 16px;padding:0;list-style:none;}
.sss-deelnemers li {display:flex;flex-direction:column;gap:6px;padding:12px;background:var(--rij);}
.sss-deelnemers li:first-child {border-radius:12px 12px 0 0;}
.sss-deelnemers li:last-child {border-radius:0 0 12px 12px;}
.sss-deelnemers li:only-child {border-radius:12px;}
.sss-deelnemer-kop {display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:600;}
.sss-deelnemers small {color:var(--grijs);font-size:13px;}
.sss-ontkoppel, .sss-verwijder {margin:0;}
.sss-delen {margin-bottom:16px;}
.sss-collegas {display:grid;grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));gap:8px;margin:12px 0 16px;}
.sss-collega {display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:8px;background:var(--rij);cursor:pointer;}
.sss-collega:has(input:checked) {background:var(--rood-zacht);}
.sss-collega input {margin-top:3px;accent-color:var(--rood);}
.sss-collega span {display:flex;flex-direction:column;min-width:0;}
.sss-collega small {color:var(--grijs);font-size:13px;overflow-wrap:anywhere;}
.sss-tabel {width:100%;border-collapse:collapse;font-size:14px;}
.sss-tabel th {padding:10px 8px;border-bottom:1px solid var(--lijn);color:var(--grijs);font-weight:400;text-align:left;}
.sss-tabel td {padding:12px 8px;border-bottom:1px solid var(--lijn);}
.sss-tabel td a {font-weight:600;}
.sss-tabel-acties {text-align:right;}
.sss-tabel-acties a {color:var(--rood);}
.sss-stappen-lijst {display:flex;flex-direction:column;gap:2px;margin:0 0 12px;padding:0;list-style:none;counter-reset:stap;}
.sss-stappen-lijst li {display:grid;grid-template-columns:24px 96px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px;background:var(--rij);counter-increment:stap;}
.sss-stappen-lijst li:first-child {border-radius:12px 12px 0 0;}
.sss-stappen-lijst li:last-child {border-radius:0 0 12px 12px;}
.sss-stappen-lijst li:only-child {border-radius:12px;}
.sss-stappen-lijst li::before {content:counter(stap);color:var(--grijs);font-weight:600;text-align:center;}
.sss-stappen-lijst img {width:96px;aspect-ratio:16 / 9;object-fit:cover;border-radius:6px;background:#26221a;}
.sss-stappen-lijst small, .sss-kiezer-lijst small {display:block;color:var(--grijs);font-size:13px;}
.sss-stap-knoppen {display:flex;gap:2px;}
.sss-stap-knoppen button {display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:6px;background:none;color:var(--grijs);cursor:pointer;}
.sss-stap-knoppen button:hover {background:rgba(51,51,51,.08);color:var(--tekst);}
.sss-stap-knoppen .sss-icoon {width:16px;height:16px;}
.sss-stappen-aantal {color:var(--grijs);font-weight:400;}
.sss-kiezer {position:sticky;top:72px;}
.sss-kiezer .sss-zoekveld {width:100%;margin:0 0 12px;}
.sss-kiezer-lijst {display:flex;flex-direction:column;gap:2px;max-height:60vh;overflow:auto;margin:0;padding:0;list-style:none;}
.sss-kiezer-lijst li {display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:12px;padding:6px;border-radius:8px;}
.sss-kiezer-lijst li:hover {background:var(--rij);}
.sss-kiezer-lijst img {width:96px;aspect-ratio:16 / 9;object-fit:cover;border-radius:6px;background:#26221a;}
.sss-kiezer-lijst span {display:flex;flex-direction:column;min-width:0;font-size:14px;font-weight:600;}
.sss-kiezer-lijst button {padding:5px 10px;border:0;border-radius:6px;background:var(--rood);color:#fff;font-size:13px;font-weight:600;cursor:pointer;}
.sss-kiezer-lijst button:disabled {background:none;color:var(--groen);cursor:default;}
.sss-kiezer-lijst .sss-kiezer-leeg {display:block;padding:10px 4px;color:var(--grijs);}

/* ---------- Login and sign-up (the Glide sign-in of 2026-10-22) ---------- */
body.sss-kaal {background:var(--ink);}
.sss-auth {position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:100vh;padding:40px 16px;overflow:hidden;color:#fff;}
.sss-auth::before, .sss-auth::after {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;}
.sss-auth::before {background:radial-gradient(760px circle at 50% 45%, rgba(211,32,32,.5), rgba(211,32,32,.2) 38%, rgba(211,32,32,.06) 60%, transparent 74%);}
.sss-auth::after {background-image:linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 25%, transparent 78%);mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, #000 25%, transparent 78%);}
.sss-auth-kaart {width:100%;max-width:420px;padding:34px 30px 28px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:rgba(27,28,31,.92);box-shadow:0 30px 80px rgba(0,0,0,.55);}
.sss-auth-logo {width:150px;height:auto;margin:0 auto 22px;}
.sss-auth h1 {margin:0 0 8px;color:#fff;font-size:24px;font-weight:700;}
.sss-auth-tekst {margin:0 0 20px;color:rgba(255,255,255,.72);font-size:15px;line-height:1.5;}
.sss-auth-tekst strong {color:#fff;overflow-wrap:anywhere;}
.sss-auth-form label {display:block;margin:0 0 6px;color:rgba(255,255,255,.88);font-size:14px;font-weight:600;}
.sss-auth-form input[type="email"], .sss-auth-form input[type="text"] {width:100%;height:48px;margin-bottom:14px;padding:0 14px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(255,255,255,.06);color:#fff;font-size:16px;}
.sss-auth-form input::placeholder {color:rgba(255,255,255,.38);}
.sss-auth-form input:focus {border-color:var(--rood);outline:none;box-shadow:0 0 0 3px rgba(211,32,32,.3);}
.sss-auth-form .sss-vinkje {margin:2px 0 18px;color:rgba(255,255,255,.85);}
.sss-auth .sss-knop {min-height:44px;font-size:15px;}
.sss-code-veld {font-size:24px !important;font-weight:700;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums;}
.sss-auth-klein {margin:16px 0 0;color:rgba(255,255,255,.5);font-size:12.5px;line-height:1.5;text-align:center;}
.sss-auth-klein a, .sss-auth-voet a, .sss-auth-onder a, .sss-auth .sss-link-knop {color:rgba(255,255,255,.85);text-decoration:underline;}
.sss-auth-onder {display:flex;justify-content:space-between;gap:12px;margin:16px 0 0;font-size:14px;}
.sss-of {display:flex;align-items:center;gap:12px;margin:18px 0;color:rgba(255,255,255,.4);font-size:13px;}
.sss-of::before, .sss-of::after {content:"";flex:1;height:1px;background:rgba(255,255,255,.12);}
.sss-auth-voet {margin:0;color:rgba(255,255,255,.55);font-size:13.5px;text-align:center;}
.sss-auth .sss-melding--fout {background:rgba(211,32,32,.18);color:#ffd2d2;}
.sss-auth .sss-melding--ok {background:rgba(31,138,76,.22);color:#c9f2d8;}
.sss-auth .sss-melding--info {background:rgba(255,255,255,.08);color:#fff;}
.sss-honing {position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.sss-artikel-beeld {width:100%;margin-bottom:20px;border-radius:12px;}

/* ---------- Smaller screens ---------- */
@media (max-width: 1100px) {
	.sss-modules, .sss-videos {grid-template-columns:repeat(4, minmax(0,1fr));}
	.sss-plan-kolommen {grid-template-columns:minmax(0,1fr);}
	.sss-kiezer {position:static;}
	.sss-plannen {grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width: 820px) {
	.sss-wrap, .sss-top-inner {padding-left:16px;padding-right:16px;}
	.sss-top-inner {grid-template-columns:auto 1fr;}
	.sss-menu-knop {display:grid;}
	.sss-hulp-knop span {display:none;}
	.sss-nav {position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;align-items:stretch;padding:8px 12px 12px;background:var(--ink);box-shadow:0 16px 32px rgba(0,0,0,.35);}
	.sss-nav.is-open {display:flex;}
	.sss-nav-link {height:44px;}
	.sss-mappen {grid-template-columns:repeat(2, minmax(0,1fr));gap:12px;}
	.sss-modules, .sss-videos {grid-template-columns:repeat(2, minmax(0,1fr));}
	.sss-tabel-rij {grid-template-columns:32px minmax(0,1fr);gap:12px;}
	.sss-tabel-meta, .sss-tabel-datum {display:none;}
	.sss-velden {grid-template-columns:1fr;gap:12px;}
	.sss-lijst-rij {grid-template-columns:104px minmax(0,1fr) 18px;}
	.sss-lijst-rij img {width:104px;height:58px;}
	.sss-stap-kaart {grid-template-columns:96px minmax(0,1fr);}
	.sss-stap-kaart img {width:96px;height:54px;}
	.sss-stap-kaart .sss-knop {grid-column:1 / -1;}
	.sss-plannen {grid-template-columns:minmax(0,1fr);}
	.sss-kaart {padding:18px 16px;}
	.sss-terug {width:56px;}
	.sss-module-kaart {width:100%;}
	.sss-paginas {gap:8px;}
	.sss-pagina-pijl {width:44px;}
}

/* ---------- Leftovers: plan list table, company picker ---------- */
.sss-tabel-wrap {padding:8px 16px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--rand);overflow-x:auto;}
.sss-tabel-wrap tr:last-child td {border-bottom:0;}
.sss-kies-bedrijf select {height:36px;max-width:280px;padding:0 10px;border:0;border-radius:8px;background:rgba(51,51,51,.08);color:var(--tekst);font-size:14px;}
.sss-stappen-leeg {padding:12px 0;}

/* =============================================================================
   The School team's screens (Glide admin look, 2026-10-22): data tables with uppercase heads, coloured tags,
   the contact card, the kebab (…) menu, the dialogs "Toevoegen"/"Bewerken", the admin bar, Share update.
============================================================================= */
.sss-meer {position:relative;}
.sss-meer > .sss-nav-link {border:0;background:none;cursor:pointer;}
.sss-meer > .sss-nav-link .sss-icoon:last-child {width:14px;height:14px;}
.sss-meer > .sss-nav-link.is-actief {background:rgba(255,255,255,.1);}
.sss-meer-menu {position:absolute;left:0;top:calc(100% + 6px);z-index:60;min-width:200px;padding:6px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--rand), 0 8px 24px rgba(0,0,0,.12);}
.sss-meer-menu a {display:flex;align-items:center;gap:10px;padding:8px;border-radius:6px;color:var(--tekst);font-size:14px;}
.sss-meer-menu a:hover {background:var(--vlak);}
.sss-meer-menu .sss-icoon {width:16px;height:16px;color:var(--grijs);}

.sss-lijstkop {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;}
.sss-lijstkop h1, .sss-lijstkop h2 {font-size:24px;}
.sss-lijstkop-knoppen {display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.sss-lijstkop-knoppen .sss-filter {height:36px;}
.sss-invoer {width:100%;height:39px;padding:8px 12px;border:1px solid rgba(51,51,51,.15);border-radius:8px;background:#fff;font-size:14px;outline:none;}
.sss-invoer:focus {border-color:rgba(51,51,51,.4);}
.sss-invoer::placeholder {color:var(--grijs-licht);}
.sss-datatabel-wrap {overflow-x:auto;}
.sss-datatabel {width:100%;border-collapse:collapse;font-size:14px;}
.sss-datatabel th {padding:10px 6px;border-bottom:1px solid var(--lijn);color:var(--grijs);font-size:11px;font-weight:600;letter-spacing:.02em;text-align:left;text-transform:uppercase;white-space:nowrap;}
.sss-datatabel td {height:37px;padding:6px;border-bottom:1px solid var(--lijn);vertical-align:middle;white-space:nowrap;}
.sss-datatabel tr[data-href] {cursor:pointer;}
.sss-datatabel tbody tr:hover {background:rgba(51,51,51,.04);}
.sss-datatabel-menu {width:40px;text-align:right;}
.sss-tag {display:inline-flex;align-items:center;margin:1px 2px 1px 0;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:500;line-height:18px;white-space:nowrap;}
.sss-telling {display:inline-grid;place-items:center;min-width:22px;height:18px;padding:0 6px;border-radius:999px;font-size:11px;font-weight:500;}
.sss-ja, .sss-nee {display:inline-flex;}
.sss-ja .sss-icoon {width:18px;height:18px;color:var(--rood);stroke-width:2.2;}
.sss-nee .sss-icoon {width:18px;height:18px;color:rgba(51,51,51,.45);}
.sss-mini-avatar {display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#ececee;color:var(--grijs);font-size:12px;font-weight:600;}
.sss-rood {color:var(--rood);}
.sss-rood:hover {text-decoration:underline;}

.sss-kruimels--licht {margin-bottom:20px;}
.sss-kruimels--licht ol, .sss-kruimels--licht li + li::before, .sss-kruimels--licht .sss-kruimel-terug {color:var(--grijs);}
.sss-kruimels--licht a:hover {color:var(--tekst);}
.sss-kruimels--licht [aria-current] {color:var(--tekst);font-weight:600;}
.sss-detail {padding:16px 26px 20px;}
.sss-detail-kop {display:flex;justify-content:space-between;align-items:flex-start;gap:16px;}
.sss-detail-label {display:block;margin-bottom:4px;color:var(--rood);font-size:11px;font-weight:600;text-transform:uppercase;}
.sss-detail h1 {font-size:24px;}
.sss-detail-knoppen {display:flex;align-items:center;gap:6px;}
.sss-detail-knoppen form {margin:0;}
.sss-velden--detail {margin-top:20px;row-gap:18px;}
.sss-velden--detail .sss-veld-waarde .sss-icoon {width:18px;height:18px;}
.sss-acties {display:flex;flex-direction:column;}
.sss-actie {display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 10px;border-bottom:1px solid var(--lijn);}
.sss-actie:hover {background:rgba(51,51,51,.03);}
.sss-actie > span {display:flex;flex-direction:column;}
.sss-actie-tijd {color:var(--rood);font-size:11px;font-weight:600;text-transform:uppercase;}
.sss-actie strong {font-size:14px;font-weight:600;}
.sss-actie > .sss-icoon {width:18px;height:18px;color:var(--grijs);}

.sss-kebab {position:relative;display:inline-block;}
.sss-kebab-knop {display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:8px;background:#fff;color:var(--tekst);box-shadow:inset 0 0 0 1px var(--lijn);cursor:pointer;}
.sss-datatabel .sss-kebab-knop {width:28px;height:28px;background:transparent;box-shadow:none;color:var(--grijs);}
.sss-kebab-knop:hover {background:var(--vlak);}
.sss-kebab-knop .sss-icoon {stroke-width:2.6;}
.sss-kebab-menu {position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:220px;padding:6px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--rand), 0 8px 24px rgba(0,0,0,.12);text-align:left;}
.sss-kebab-menu form {margin:0;}
.sss-kebab-menu a, .sss-kebab-menu button {display:flex;align-items:center;gap:10px;width:100%;padding:8px;border:0;border-radius:6px;background:none;color:var(--tekst);font-size:14px;text-align:left;cursor:pointer;}
.sss-kebab-menu a:hover, .sss-kebab-menu button:hover {background:var(--vlak);}
.sss-kebab-menu .sss-icoon {width:16px;height:16px;color:var(--grijs);}

.sss-beheerbalk {display:flex;align-items:center;gap:10px;margin:-6px 0 22px;padding:8px 8px 8px 14px;border-radius:10px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.85);font-size:14px;}
.sss-beheerbalk > span {flex:1;}
.sss-beheerbalk .sss-icoon {width:18px;height:18px;}
.sss-beheerbalk .sss-knop {min-height:32px;padding:6px 12px;border:1px solid rgba(255,255,255,.2);}

dialog.sss-dialoog {width:min(522px, calc(100vw - 32px));max-height:min(560px, calc(100vh - 48px));padding:0;border:0;border-radius:12px;background:#fff;color:var(--tekst);box-shadow:0 24px 64px rgba(0,0,0,.25);overflow:hidden;}
dialog.sss-dialoog::backdrop {background:rgba(17,18,20,.45);}
dialog.sss-dialoog[open] {display:flex;}
.sss-dialoog-form {display:flex;flex-direction:column;width:100%;max-height:inherit;}
.sss-dialoog-kop {position:relative;padding:16px 48px;border-bottom:1px solid var(--lijn);text-align:center;}
.sss-dialoog-kop h2 {font-size:16px;}
.sss-dialoog-sluit {position:absolute;right:12px;top:10px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:none;color:var(--grijs);cursor:pointer;}
.sss-dialoog-sluit:hover {background:var(--vlak);}
.sss-dialoog-body {flex:1;min-height:0;overflow:auto;padding:16px;}
.sss-dialoog-body .sss-veld + .sss-veld, .sss-dialoog-body .sss-schakel + .sss-veld {margin-top:16px;}
.sss-dialoog-body input[type="text"], .sss-dialoog-body input[type="email"], .sss-dialoog-body input[type="number"], .sss-dialoog-body input[type="search"], .sss-dialoog-body select, .sss-dialoog-body textarea {width:100%;padding:8px 10px;border:1px solid rgba(51,51,51,.15);border-radius:8px;background:#fff;font-size:14px;outline:none;}
.sss-dialoog-body textarea {resize:vertical;line-height:1.4;}
.sss-dialoog-body :is(input, select, textarea):focus {border-color:rgba(51,51,51,.4);}
.sss-dialoog-voet {display:flex;gap:10px;padding:12px 16px;border-top:1px solid var(--lijn);}
.sss-dialoog-voet .sss-knop {min-height:32px;padding:6px 14px;}
dialog.sss-dialoog--zijkant {position:fixed;inset:0 0 0 auto;width:min(520px, 100vw);max-width:100vw;max-height:none;height:100vh;height:100dvh;margin:0;border-radius:0;box-shadow:-12px 0 40px rgba(0,0,0,.18);}
dialog.sss-dialoog--zijkant[open] {animation:sss-schuif-in .28s cubic-bezier(.2,.8,.2,1);}
dialog.sss-dialoog--zijkant[open]::backdrop {animation:sss-vervaag-in .28s ease;}
dialog.sss-dialoog--zijkant.is-sluiten {animation:sss-schuif-uit .2s ease-in forwards;}
dialog.sss-dialoog--zijkant .sss-dialoog-form {height:100%;max-height:none;}
dialog.sss-dialoog--zijkant .sss-dialoog-kop {text-align:left;padding-left:20px;}
dialog.sss-dialoog--zijkant .sss-dialoog-body {padding:20px;}
dialog.sss-dialoog--zijkant .sss-dialoog-voet {padding:14px 20px;}
@keyframes sss-schuif-in {from {transform:translateX(100%);} to {transform:none;}}
@keyframes sss-schuif-uit {from {transform:none;} to {transform:translateX(100%);}}
@keyframes sss-vervaag-in {from {opacity:0;} to {opacity:1;}}
@media (prefers-reduced-motion: reduce) {dialog.sss-dialoog--zijkant[open], dialog.sss-dialoog--zijkant.is-sluiten {animation:none;}}
.sss-schakel {display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;cursor:pointer;}
.sss-schakel input {position:absolute;opacity:0;pointer-events:none;}
.sss-schakel i {position:relative;width:36px;height:20px;border-radius:999px;background:rgba(51,51,51,.2);transition:background-color .15s;}
.sss-schakel i::after {content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s;}
.sss-schakel input:checked + i {background:var(--rood);}
.sss-schakel input:checked + i::after {transform:translateX(16px);}
.sss-schakel input:focus-visible + i {outline:2px solid rgba(211,32,32,.6);outline-offset:2px;}
.sss-bestand {position:relative;display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border:1px solid rgba(51,51,51,.15);border-radius:8px;color:var(--grijs);font-size:14px;cursor:pointer;}
.sss-bestand .sss-icoon {width:16px;height:16px;}
.sss-bestand input {position:absolute;inset:0;opacity:0;cursor:pointer;}
.sss-vinklijst {display:flex;flex-direction:column;gap:2px;max-height:200px;overflow:auto;padding:6px;border:1px solid rgba(51,51,51,.15);border-radius:8px;}
.sss-vinklijst .sss-vinkje {padding:3px 4px;font-weight:400;}
.sss-vinklijst .sss-vinkje.is-aan {font-weight:600;}
.sss-vinklijst-zoek {margin-bottom:4px;}

.sss-share-rij {display:flex;justify-content:space-between;align-items:flex-start;gap:16px;}
.sss-share-reset {display:flex;align-items:center;gap:16px;width:calc(50% - 8px);justify-content:space-between;font-size:14px;}
.sss-share-reset span {display:flex;flex-direction:column;}
.sss-share-reset small {color:var(--grijs);font-size:12px;}
.sss-rond-knop {display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--rood-zacht);color:var(--rood);}
.sss-rond-knop .sss-icoon {width:16px;height:16px;}
.sss-share-velden {display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0;}
.sss-share-velden .sss-veld + .sss-veld {margin-top:0;}
.sss-share-lijst {display:flex;flex-direction:column;}
.sss-share-video {display:flex;align-items:center;gap:12px;padding:7px 6px;font-size:14px;cursor:pointer;}
.sss-share-video input {width:16px;height:16px;accent-color:var(--rood);}
.sss-share-video img {width:20px;height:20px;border-radius:50%;object-fit:cover;background:#26221a;}
@media (max-width: 820px) {
	.sss-share-velden {grid-template-columns:1fr;}
	.sss-share-rij {flex-direction:column;}
	.sss-share-reset {width:100%;}
	.sss-velden--detail {grid-template-columns:1fr 1fr;}
	.sss-meer-menu {position:static;box-shadow:none;background:transparent;}
	.sss-meer-menu a {color:rgba(255,255,255,.8);}
	.sss-meer-menu a:hover {background:rgba(255,255,255,.08);}
}

/* ---------- Company picker (search instead of a long list) ---------- */
.sss-keuze {position:relative;}
.sss-keuze-veld {display:flex;align-items:center;gap:8px;height:39px;padding:0 10px;border:1px solid rgba(51,51,51,.15);border-radius:8px;background:#fff;color:var(--grijs-licht);}
.sss-keuze-veld:focus-within {border-color:rgba(51,51,51,.4);}
.sss-keuze-veld .sss-icoon {width:16px;height:16px;flex:none;}
.sss-keuze-veld input {flex:1;min-width:0;height:100%;padding:0;border:0 !important;outline:none;background:transparent;color:var(--tekst);font-size:14px;}
.sss-keuze-lijst {max-height:260px;overflow:auto;margin:4px 0 0;padding:4px;list-style:none;border:1px solid rgba(51,51,51,.12);border-radius:8px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.08);}
.sss-keuze-lijst li {display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 8px;border-radius:6px;color:var(--tekst);font-size:14px;cursor:pointer;}
.sss-keuze-lijst li small {flex:none;color:var(--grijs);font-size:12px;}
.sss-keuze-lijst li:hover, .sss-keuze-lijst li.is-actief {background:var(--rood-zacht);}
.sss-keuze-lijst .sss-keuze-leeg {color:var(--grijs);cursor:default;}
.sss-keuze-lijst .sss-keuze-leeg:hover {background:none;}
.sss-kies-bedrijf {width:340px;max-width:100%;}
.sss-kies-bedrijf .sss-keuze-lijst {position:absolute;left:0;right:0;z-index:30;}
.sss-bekijk-form .sss-keuze {width:260px;}
.sss-bekijk-form .sss-keuze-veld {height:34px;}
.sss-bekijk-stop {display:inline-block !important;margin-top:6px;padding:0 !important;color:var(--rood) !important;font-size:13px !important;}
.sss-kiezer-titel {margin-bottom:10px;font-size:16px;}
.sss-kiezer-titel label {font-weight:600;}
.sss-plan-form .sss-veld + .sss-veld {margin-top:16px;}
.sss-plan-form .sss-veld input[type="text"], .sss-plan-form .sss-veld textarea {width:100%;padding:9px 12px;border:1px solid rgba(51,51,51,.15);border-radius:8px;font-size:14px;outline:none;}
.sss-plan-form .sss-veld textarea {resize:vertical;}

/* Current image above a file field (user 2026-10-22: "laat hier wel een preview van de huidige image zien") */
.sss-bestand-voorbeeld {display:grid;place-items:center;height:132px;margin-bottom:8px;padding:8px;border:1px solid rgba(51,51,51,.12);border-radius:8px;background:repeating-conic-gradient(#f4f4f5 0% 25%, #fff 0% 50%) 50% / 16px 16px;}
.sss-bestand-voorbeeld img {max-width:100%;max-height:116px;object-fit:contain;border-radius:4px;}

/* Gear at the top right of a tile for the School team (user 2026-10-22) */
.sss-map, .sss-module, .sss-video {position:relative;}
.sss-tandwiel {position:absolute;right:8px;top:8px;z-index:2;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.92);color:var(--tekst);box-shadow:0 0 0 1px var(--rand), 0 2px 6px rgba(0,0,0,.12);cursor:pointer;opacity:.85;transition:opacity .15s, background-color .15s;}
.sss-tandwiel:hover, .sss-tandwiel:focus-visible {opacity:1;background:#fff;color:var(--rood);}
.sss-tandwiel .sss-icoon {width:17px;height:17px;}
.sss-tandwiel.is-bezig {opacity:.5;pointer-events:none;}
.sss-video .sss-tandwiel, .sss-module .sss-tandwiel {right:10px;top:10px;}

/* Sortable column heads (user 2026-10-22) */
.sss-datatabel th.is-sorteerbaar {cursor:pointer;user-select:none;}
.sss-datatabel th.is-sorteerbaar:hover {color:var(--tekst);}
.sss-datatabel th.is-sorteerbaar::after {content:"";display:inline-block;width:0;height:0;margin-left:6px;vertical-align:middle;border:4px solid transparent;opacity:.35;border-top-color:currentColor;border-bottom-width:0;}
.sss-datatabel th[aria-sort="ascending"]::after {opacity:1;border-top:0;border-bottom:4px solid currentColor;}
.sss-datatabel th[aria-sort="descending"]::after {opacity:1;}
.sss-datatabel th[aria-sort="ascending"], .sss-datatabel th[aria-sort="descending"] {color:var(--tekst);}