/* =============================================================================
   Softwareshaker School
   Started as the look of the Glide School (2026-10-22: dark top bar, dark bands with a red glow and a 56 px grid,
   the red next-page button). Since the same day in the look of softwareshaker.com (user: "een iets modernere en
   strakkere look die past bij softwareshaker.com"): the section "Softwareshaker.com look" at the end sets the tokens,
   white cards with a hairline and a soft shadow on #f2f2f2, 5-6 px buttons, bold Inter headings and the pill label.
============================================================================= */

@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:32px;}
.sss-blok--ruim {padding-top:32px;}
.sss-scheiding {height:1px;margin:40px 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:10px;}
.sss-lijst-rij {display:grid;grid-template-columns:142px minmax(0,1fr) 24px;align-items:center;gap:14px;min-height:96px;padding:8px;border-radius:12px;background:var(--rij);}
.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-pad {color:var(--grijs);font-size:14px;line-height:20px;}
.sss-lijst-datum {color:var(--grijs-licht);font-size:13px;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;}
/* the red glow of the Glide sign-in (user 2026-10-22: "achtergrond iets meer rood net als bij de huidige site") */
.sss-auth::before {background:radial-gradient(ellipse 52% 62% at 50% 46%, rgba(190,30,24,.72) 0%, rgba(130,20,15,.42) 40%, rgba(50,12,10,0) 76%), #0e0b0b;}
.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-uitleg {margin:-8px 0 18px;color:rgba(255,255,255,.5);font-size:13px;line-height:1.45;}
.sss-auth-vink {display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 0 16px;border-radius:50%;background:rgba(31,138,76,.25);}
.sss-auth-vink .sss-icoon {width:24px;height:24px;stroke:#7ee2a6;stroke-width:2.5;}
.sss-auth-stappen {display:grid;gap:10px;margin:0 0 22px;padding:0;list-style:none;counter-reset:stap;}
.sss-auth-stappen li {display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.85);font-size:14px;counter-increment:stap;}
.sss-auth-stappen li::before {content:counter(stap);display:flex;flex:0 0 26px;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:13px;font-weight:700;}
.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-account-menu a.sss-bekijk-stop {display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;padding:0 10px;height:34px;border-radius:8px;background:#FFB11B;color:#2b1f00;font-size:13px;font-weight:600;}
.sss-account-menu a.sss-bekijk-stop:hover {background:#f0a300;}
.sss-bekijk-stop .sss-icoon {width:14px;height:14px;}
.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);}

/* Action counts: one scale (light → strong) instead of a colour per number */
.sss-telling--weinig {background:#eef6f1;color:#3d7a57;}
.sss-telling--gemiddeld {background:#cfe9da;color:#1f6b41;}
.sss-telling--veel {background:#1f8a4c;color:#fff;}

/* Volgorde (School team): drag the cards into order */
.is-volgorde > [data-id] {cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;outline:2px dashed rgba(51,51,51,.22);outline-offset:-2px;}
.is-volgorde > [data-id]:focus-visible {outline:2px solid var(--rood);}
.is-volgorde > [data-id] img {pointer-events:none;}
.is-volgorde .sss-tandwiel {display:none;}
.is-volgorde > .is-sleep {cursor:grabbing;opacity:.75;outline:2px solid var(--rood);box-shadow:0 10px 28px rgba(0,0,0,.18);z-index:2;}
.sss-volgorde-balk {position:fixed;left:50%;bottom:20px;z-index:70;transform:translateX(-50%);display:flex;align-items:center;gap:16px;width:max-content;max-width:calc(100% - 32px);padding:10px 10px 10px 18px;border-radius:14px;background:var(--ink);color:#fff;font-size:14px;box-shadow:0 12px 32px rgba(0,0,0,.25);}
.sss-volgorde-knoppen {display:flex;gap:8px;flex-shrink:0;}
.sss-volgorde-balk .sss-knop--rand {background:rgba(255,255,255,.1);color:#fff;box-shadow:none;}
.sss-volgorde-balk .sss-knop--rand:hover {background:rgba(255,255,255,.18);}
@media (max-width: 640px) {
	.sss-volgorde-balk {flex-direction:column;align-items:stretch;gap:10px;bottom:12px;padding:12px;}
	.sss-volgorde-knoppen .sss-knop {flex:1;}
}
@media (prefers-reduced-motion: reduce) {
	.is-volgorde > [data-id] {transition:none !important;}
}

/* Bulk e-mail */
.sss-bulk-aan {display:flex;flex-direction:column;gap:8px;max-width:560px;}
.sss-bulk-aan .sss-vinklijst {max-height:280px;margin:2px 0 0 24px;}
.sss-bulk-aan .sss-vinkje small {color:var(--grijs-licht);font-weight:400;}

/* Photos (contact, profile, account button) */
.sss-mini-avatar.heeft-foto, .sss-profiel-foto.heeft-foto, .sss-detail-foto, .sss-avatar-binnen {overflow:hidden;}
.sss-mini-avatar img, .sss-profiel-foto img, .sss-detail-foto img, .sss-avatar-binnen img {width:100%;height:100%;object-fit:cover;border-radius:50%;}
.sss-avatar-binnen {display:grid;place-items:center;width:100%;height:100%;border-radius:50%;}
.sss-avatar:has(.heeft-foto) {background:transparent;}
.sss-detail-kop:has(.sss-detail-foto) {align-items:center;}
.sss-detail-foto {display:grid;flex:0 0 56px;place-items:center;width:56px;height:56px;border-radius:50%;background:#ececee;color:var(--grijs);font-size:20px;font-weight:600;}
.sss-detail-naam {flex:1;min-width:0;}

/* Mails on the contact page */
.sss-mails {display:flex;flex-direction:column;}
.sss-mail-rij {width:100%;border:0;background:none;font:inherit;text-align:left;cursor:pointer;}
.sss-mail-rij:disabled {cursor:default;opacity:.7;}
dialog.sss-dialoog--mail {width:min(760px, 100vw);display:none;flex-direction:column;}
dialog.sss-dialoog--mail[open] {display:flex;}
.sss-mail-frame {flex:1;width:100%;border:0;background:#fafafa;}

/* Mijn plannen on Home */
.sss-plannen-leeg {display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--rand);color:var(--grijs);font-size:14px;line-height:1.5;}
.sss-plannen-leeg p {margin:0;}
.sss-plannen-leeg strong {color:var(--tekst);}
.sss-plannen-leeg .sss-icoon {flex:0 0 28px;width:28px;height:28px;stroke:var(--rood);}

/* Plan editor: drag the steps */
.sss-stappen-lijst li {cursor:grab;user-select:none;-webkit-user-select:none;}
.sss-stappen-lijst li img {touch-action:none;-webkit-user-drag:none;}
.sss-stappen-lijst li.is-sleep {cursor:grabbing;position:relative;z-index:2;background:#fff;box-shadow:0 10px 28px rgba(0,0,0,.16), inset 0 0 0 2px var(--rood);}
.sss-stappen-lijst li button {cursor:pointer;}

/* "Weet je het zeker?" popup (plan verwijderen) */
dialog.sss-dialoog--bevestig {width:min(420px, calc(100vw - 32px));}
.sss-bevestig {padding:24px 24px 4px;}
.sss-bevestig h2 {margin:14px 0 6px;font-size:18px;}
.sss-bevestig p {margin:0;color:var(--grijs);font-size:14px;line-height:1.5;}
.sss-bevestig p strong {color:var(--tekst);}
.sss-bevestig-icoon {display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--rood-zacht);}
.sss-bevestig-icoon .sss-icoon {width:22px;height:22px;stroke:var(--rood);}
.sss-bevestig-knoppen {display:flex;justify-content:flex-end;gap:10px;padding:20px 24px 24px;}
.sss-band-knoppen .sss-knop--weg:hover {background:var(--rood);color:#fff;}

/* Plan editor: share, shared with, this plan */
.sss-plan-beheer {display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:24px;align-items:start;margin-top:24px;}
.sss-plan-beheer-zij {display:flex;flex-direction:column;gap:24px;}
.sss-plan-beheer h2 {margin:0 0 6px;font-size:21px;}
.sss-plan-beheer .sss-noot {margin:0 0 4px;color:var(--grijs);font-size:14px;}
.sss-plan-beheer .sss-deelnemers {margin:12px 0 0;}
.sss-plan-beheer .sss-deelnemer-kop {flex-wrap:wrap;}
.sss-plan-beheer .sss-deelnemer-kop small {font-weight:400;}
.sss-plan-beheer .sss-kaart > .sss-knoppen {margin-top:12px;}
.sss-plan-beheer form {margin:0;}
.sss-knop--gevaar {color:var(--rood);}
.sss-knop--gevaar:hover {background:var(--rood-zacht);color:var(--rood-donker);}
.sss-deadline {margin:4px 0 20px;}
.sss-deadline-rij {display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.sss-formulier .sss-deadline input[type="date"] {width:190px;height:40px;padding:0 12px;font-family:inherit;}
.sss-deadline-snel {display:flex;flex-wrap:wrap;gap:6px;}
.sss-deadline-snel button {height:32px;padding:0 12px;border:0;border-radius:9999px;background:var(--rij);color:var(--tekst);font:inherit;font-size:13px;font-weight:600;cursor:pointer;}
.sss-deadline-snel button:hover {background:rgba(51,51,51,.1);}
.sss-deadline-snel button.is-aan {background:var(--rood-zacht);color:var(--rood-donker);}
.sss-deadline .sss-form-noot {margin-top:8px;}
@media (max-width: 900px) {
	.sss-plan-beheer {grid-template-columns:minmax(0,1fr);}
}

/* How much of a video is seen: a thin red bar at the bottom of the image */
.sss-kijkbalk {position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.35);}
.sss-kijkbalk > span {display:block;height:100%;background:var(--rood);}
.sss-stap-beeld {position:relative;display:block;overflow:hidden;border-radius:8px;}
.sss-stap-beeld img {display:block;}

/* The lightbox of a plan step */
dialog.sss-lightbox {width:min(1040px, calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:16px;background:#111214;color:#fff;box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden;}
dialog.sss-lightbox::backdrop {background:rgba(10,10,12,.78);}
dialog.sss-lightbox[open] {display:flex;flex-direction:column;animation:sss-vervaag-in .2s ease;}
.sss-lightbox-kop {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px 14px 20px;}
.sss-lightbox-kop h2 {margin:0;color:#fff;font-size:16px;font-weight:600;line-height:1.35;}
.sss-lightbox-sluit {display:grid;flex:0 0 36px;place-items:center;width:36px;height:36px;border:0;border-radius:9999px;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;}
.sss-lightbox-sluit:hover {background:rgba(255,255,255,.2);}
.sss-lightbox-sluit .sss-icoon {width:18px;height:18px;}
.sss-lightbox-speler {aspect-ratio:16 / 9;max-height:calc(100dvh - 180px);background:#000;}
.sss-lightbox-speler video, .sss-lightbox-speler iframe {display:block;width:100%;height:100%;border:0;background:#000;}
.sss-lightbox-voet {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:14px 16px 16px 20px;}
.sss-lightbox-stand {display:flex;flex:1 1 220px;align-items:center;gap:12px;color:rgba(255,255,255,.8);font-size:14px;}
.sss-lightbox-stand .sss-voortgang {flex:1;max-width:220px;background:rgba(255,255,255,.16);}
.sss-lightbox .sss-knop--rand {background:rgba(255,255,255,.1);color:#fff;box-shadow:none;}
.sss-lightbox .sss-knop--rand:hover {background:rgba(255,255,255,.18);color:#fff;}
.sss-lightbox [data-klaar].is-aan {background:var(--groen);}

/* =============================================================================
   Softwareshaker.com look (2026-10-22): measured on softwareshaker.com/functionaliteiten/ (page #f2f2f2, cards
   white 16 px radius with 1 px #ececec and 0 1px 3px rgba(0,0,0,.06), buttons 5 px radius and bold, inputs 5 px with
   #dcdcdc, text #353535, headings bold, the pill label rgba(211,32,32,.2) / #f38989 in the dark hero).
============================================================================= */
:root {
	--pagina: #f2f2f2;
	--tekst: #353535;
	--kop: #1d1d1f;
	--grijs: #6e6e6e;
	--grijs-licht: #8a8a8a;
	--kaart-rand: #ececec;
	--kaart-schaduw: 0 1px 3px rgba(0,0,0,.06);
	--kaart-schaduw-hover: 0 8px 24px rgba(0,0,0,.08);
	--veld-rand: #dcdcdc;
	--rij: #f6f6f6;
	--radius: 16px;
	--radius-klein: 10px;
	--radius-knop: 6px;
}
body {font-size:15px;line-height:1.5;}
h1, h2, h3 {color:var(--kop);font-weight:700;letter-spacing:-.01em;}

/* Top bar */
.sss-top {box-shadow:0 1px 0 rgba(255,255,255,.06), 0 6px 20px rgba(0,0,0,.18);}
.sss-top-inner {height:64px;}
.sss-logo {gap:9px;padding-left:0;font-size:19px;font-weight:700;letter-spacing:-.01em;}
.sss-logo img {width:17px;height:26px;}
.sss-nav {gap:2px;}
.sss-nav-link {height:38px;padding:0 12px;border-radius:var(--radius-knop);color:rgba(255,255,255,.82);font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;}
.sss-nav-link {gap:7px;}
.sss-nav-link > .sss-icoon:first-child {width:17px;height:17px;} /* the icons stay (user 2026-10-22) */
.sss-nav-link:hover {background:rgba(255,255,255,.06);}
.sss-nav-link.is-actief {background:rgba(255,255,255,.1);}
.sss-hulp-knop {height:40px;padding:0 16px;border-radius:5px;font-size:14px;font-weight:700;}
.sss-hulp-knop .sss-icoon {width:18px;height:18px;}
.sss-avatar {width:34px;height:34px;}
.sss-account-menu, .sss-meer-menu {border-radius:12px;box-shadow:0 0 0 1px var(--kaart-rand), 0 12px 32px rgba(0,0,0,.14);}

/* Dark band: as the hero of softwareshaker.com */
.sss-band-inner {padding-top:44px;padding-bottom:40px;} /* a bit less (user 2026-10-22: "tikje minder ruimte"; was 56/52) */
.sss-band-inner.heeft-kruimels {padding-top:18px;}
.sss-band-kop {margin-bottom:28px;}
.sss-kruimels ol {font-size:13px;color:rgba(255,255,255,.7);}
.sss-kruimels li + li::before {content:"\203A";margin:0 8px;color:rgba(255,255,255,.45);}
.sss-terug {width:40px;height:40px;border-radius:999px;background:rgba(255,255,255,.08);}
.sss-terug .sss-icoon {width:18px;height:18px;}
.sss-band-label {display:inline-flex;align-items:center;gap:6px;margin-bottom:16px;padding:6px 14px;border-radius:999px;background:rgba(211,32,32,.2);color:#f38989;font-size:12px;font-weight:700;letter-spacing:.06em;line-height:1.3;text-transform:uppercase;}
.sss-band-label::before {content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.sss-band-titel {max-width:900px;font-size:40px;font-weight:700;letter-spacing:-.025em;line-height:1.12;}
.sss-band-lead {max-width:720px;margin-top:12px;color:rgba(255,255,255,.75);font-size:16px;line-height:1.55;}
.sss-band-knoppen {margin-top:24px;}
.sss-band-voortgang {margin-top:20px;font-size:14px;}
.sss-band--midden .sss-band-inner {padding-top:36px;padding-bottom:32px;}

/* Page parts */
.sss-blok, .sss-blok--ruim {padding-top:40px;}
.sss-main {padding-bottom:72px;}
.sss-scheiding {margin:48px 0;background:#e2e2e2;}
.sss-kop {margin-bottom:20px;}
.sss-kop h2, .sss-kop--groot h2, .sss-lijstkop h1, .sss-lijstkop h2, .sss-kaart-kop h2, .sss-sectie-titel {font-size:24px;font-weight:700;letter-spacing:-.015em;}
.sss-kop-link {font-size:14px;font-weight:700;}
.sss-leeg {padding:20px 0;}
.sss-melding {border-radius:var(--radius-klein);font-size:14.5px;}

/* Buttons and fields */
.sss-knop {min-height:40px;padding:0 18px;border-radius:var(--radius-knop);font-size:14px;font-weight:700;}
.sss-knop .sss-icoon {width:17px;height:17px;}
.sss-knop--rand, .sss-afgerond {background:#fff;color:var(--kop);box-shadow:inset 0 0 0 1px var(--veld-rand);}
.sss-knop--rand:hover {background:#fafafa;box-shadow:inset 0 0 0 1px #c4c4c4;}
.sss-knop--wit {background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);}
.sss-knop--wit:hover {background:rgba(255,255,255,.18);}
.sss-zoekveld {height:40px;padding:0 12px;border-radius:var(--radius-knop);background:#fff;box-shadow:inset 0 0 0 1px var(--veld-rand);color:var(--grijs-licht);}
.sss-zoekveld:focus-within {box-shadow:inset 0 0 0 1px var(--rood), 0 0 0 3px rgba(211,32,32,.12);}
.sss-zoekveld input {font-size:14.5px;}
.sss-filter {height:40px;border-radius:var(--radius-knop);background:#fff;box-shadow:inset 0 0 0 1px var(--veld-rand);}
.sss-formulier textarea, .sss-formulier input[type="text"], .sss-formulier input[type="email"], .sss-formulier input[type="date"], .sss-formulier select, .sss-invoer, .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 {border:1px solid var(--veld-rand);border-radius:var(--radius-knop);font-size:14.5px;}
.sss-formulier input[type="text"], .sss-formulier input[type="email"], .sss-formulier select, .sss-invoer {min-height:42px;}
.sss-formulier :is(input, select, textarea):focus, .sss-invoer:focus, .sss-dialoog-body :is(input, select, textarea):focus {border-color:var(--rood);box-shadow:0 0 0 3px rgba(211,32,32,.12);}
.sss-veld-kop label {font-size:14px;font-weight:700;color:var(--kop);}

/* Cards: white, hairline, soft shadow */
.sss-kaart, .sss-map, .sss-module, .sss-video, .sss-plan, .sss-module-kaart, .sss-tabel-wrap, .sss-plannen-leeg {border:1px solid var(--kaart-rand);border-radius:var(--radius);background:#fff;box-shadow:var(--kaart-schaduw);}
.sss-kaart {padding:28px;}
.sss-kaart + .sss-kaart {margin-top:20px;}
.sss-map:hover, .sss-module:hover, .sss-video:hover, .sss-plan:hover, .sss-module-kaart:hover {border-color:#dedede;box-shadow:var(--kaart-schaduw-hover);}
.sss-map, .sss-module, .sss-video, .sss-plan {transition:box-shadow .2s ease, border-color .2s ease;}

/* Home: the software tiles */
.sss-mappen {gap:20px;}
.sss-map {padding:22px 22px 30px;}
.sss-map-beeld {border-radius:var(--radius-klein);}

/* Module and video cards */
.sss-modules, .sss-videos {gap:20px 16px;}
.sss-module, .sss-video {padding:8px 8px 16px;}
.sss-module-beeld, .sss-video-beeld {border-radius:var(--radius-klein);}
.sss-module-naam {margin:14px 8px 0;font-size:15px;font-weight:700;line-height:1.3;color:var(--kop);}
.sss-module-aantal {margin:2px 8px 0;font-size:13.5px;}
.sss-video-label {margin:14px 8px 2px;font-size:11px;font-weight:700;letter-spacing:.05em;}
.sss-video-titel {font-size:14.5px;font-weight:700;line-height:1.35;color:var(--kop);}

/* Recent videos: a white card with rows */
.sss-tabel-lijst {overflow:hidden;border:1px solid var(--kaart-rand);border-radius:var(--radius);background:#fff;box-shadow:var(--kaart-schaduw);}
.sss-tabel-rij {grid-template-columns:64px minmax(0,1fr) minmax(0,.62fr) 120px;gap:20px;min-height:60px;padding:10px 20px 10px 12px;border-bottom:1px solid #f0f0f0;font-size:14.5px;}
.sss-tabel-rij:last-child {border-bottom:0;}
.sss-tabel-rij:hover {background:#fafafa;}
.sss-tabel-rij img {width:64px;height:36px;border-radius:6px;}
.sss-tabel-titel {font-weight:700;color:var(--kop);}
.sss-tabel-meta, .sss-tabel-datum {color:var(--grijs);}

/* Page buttons */
.sss-paginas {margin-top:24px;}
.sss-pagina {border-radius:var(--radius-knop);font-size:14.5px;}
.sss-pagina-pijl {width:48px;height:38px;border-color:var(--veld-rand);border-radius:var(--radius-knop);}
.sss-pagina-pijl--volgende:not(.is-uit) {box-shadow:none;}

/* Lists (Zoek video's, contact actions) and plans */
.sss-lijst {gap:12px;}
.sss-lijst-rij {padding:10px;border:1px solid var(--kaart-rand);border-radius:14px;background:#fff;box-shadow:var(--kaart-schaduw);}
.sss-lijst-rij:hover {background:#fff;border-color:#dedede;box-shadow:var(--kaart-schaduw-hover);}
.sss-lijst-rij img, .sss-stap-kaart img {border-radius:var(--radius-klein);}
.sss-lijst-titel {font-size:15px;font-weight:700;color:var(--kop);}
.sss-plannen {gap:20px;}
.sss-plan {gap:14px;padding:20px;}
.sss-plan-titel {font-size:15.5px;font-weight:700;color:var(--kop);}
.sss-stap-kaart {padding:10px;border:1px solid var(--kaart-rand);border-radius:14px;background:#fff;box-shadow:var(--kaart-schaduw);}
.sss-stap.is-bezig .sss-stap-kaart {border-color:rgba(211,32,32,.45);box-shadow:0 0 0 3px rgba(211,32,32,.08);}
.sss-stap-tekst strong {font-size:15px;font-weight:700;color:var(--kop);}
.sss-stap-meta {font-weight:700;letter-spacing:.04em;}
.sss-tijdlijn {display:flex;flex-direction:column;gap:6px;}
.sss-stappen-lijst li, .sss-deelnemers li, .sss-collega {background:var(--rij);}
.sss-video-acties .sss-knop, .sss-detail-knoppen .sss-knop {min-height:40px;}
.sss-speler {border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.12);}

/* Tables of the School team */
.sss-datatabel-wrap {border:1px solid var(--kaart-rand);border-radius:var(--radius);background:#fff;box-shadow:var(--kaart-schaduw);}
.sss-datatabel th {padding:12px 10px;background:#fafafa;font-weight:700;color:var(--grijs);}
.sss-datatabel td {height:48px;padding:8px 10px;border-bottom-color:#f0f0f0;}
.sss-datatabel tbody tr:last-child td {border-bottom:0;}
.sss-tabel th {font-weight:700;font-size:12px;letter-spacing:.03em;text-transform:uppercase;}

/* Dialogs */
dialog.sss-dialoog {border-radius:var(--radius);}
dialog.sss-dialoog--zijkant {border-radius:0;}
.sss-dialoog-kop h2 {font-weight:700;}

@media (max-width: 820px) {
	.sss-top-inner {height:58px;}
	.sss-nav-link {height:46px;font-size:13px;}
	.sss-band-inner {padding-top:30px;padding-bottom:30px;}
	.sss-band-titel {font-size:28px;}
	.sss-band-lead {font-size:15px;}
	.sss-blok, .sss-blok--ruim {padding-top:28px;}
	.sss-scheiding {margin:36px 0;}
	.sss-kaart {padding:20px 16px;}
	.sss-map {padding:14px 14px 18px;}
	.sss-tabel-rij {grid-template-columns:64px minmax(0,1fr);padding:10px 14px 10px 10px;}
	.sss-mappen {gap:12px;}
	.sss-modules, .sss-videos {gap:12px;}
}

/* Rows inside a card stay flat (no card in a card) */
.sss-kaart .sss-lijst-rij {border-color:transparent;background:var(--rij);box-shadow:none;}
.sss-kaart .sss-lijst-rij:hover {border-color:transparent;background:#efefef;box-shadow:none;}
.sss-kaart .sss-stap-kaart {box-shadow:none;}
/* The search field in the band (Zoek video's): large and white, as a search on softwareshaker.com */
.sss-band-zoek {max-width:720px;margin-top:28px;}
.sss-band-zoek input {height:52px;padding:0 18px;border:0;border-radius:var(--radius-knop);background:#fff;color:var(--kop);font-size:16px;box-shadow:0 10px 30px rgba(0,0,0,.25);}
.sss-band-zoek input::placeholder {color:var(--grijs-licht);}
.sss-band-zoek input:focus {box-shadow:0 0 0 3px rgba(211,32,32,.35), 0 10px 30px rgba(0,0,0,.25);}
.sss-sorteer a {border-radius:var(--radius-knop);font-weight:600;}
.sss-sorteer a.is-actief {background:#fff;box-shadow:inset 0 0 0 1px var(--veld-rand);}
.sss-kaart .sss-datatabel-wrap, .sss-kaart .sss-tabel-wrap {border:0;border-radius:0;box-shadow:none;}
/* Reading text (video description, articles): calmer and wider line spacing */
.sss-tekst {max-width:780px;font-size:15.5px;line-height:1.7;-webkit-hyphens:manual;hyphens:manual;}
.sss-tekst p {margin:0 0 14px;}
.sss-velden {gap:20px;margin-top:28px;}
.sss-veld-label {font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--grijs);}
.sss-veld-waarde {margin-top:4px;font-size:15px;color:var(--kop);}
/* Module and video cards: the image fills the card to its edges (user 2026-10-22: "afbeelding volledig tot de randen") */
.sss-module, .sss-video {overflow:hidden;padding:0 0 16px;}
.sss-module-beeld, .sss-video-beeld {border-radius:0;}
.sss-module-naam {margin:14px 16px 0;}
.sss-module-aantal {margin:2px 16px 0;}
.sss-video-label {margin:14px 16px 2px;}
.sss-video-titel {margin:0 16px;}
/* 6 cards in a row (user 2026-10-23: "hier nu 6 naast elkaar"; was 5, "titels mogen ook netter mischien 5 op een rij") */
.sss-modules, .sss-videos {grid-template-columns:repeat(6, minmax(0,1fr));gap:22px 16px;}
.sss-video-label {margin:16px 18px 4px;font-size:11px;letter-spacing:.06em;}
.sss-video-titel, .sss-module-naam {display:-webkit-box;overflow:hidden;font-size:15.5px;font-weight:600;line-height:1.4;letter-spacing:-.005em;-webkit-line-clamp:3;-webkit-box-orient:vertical;}
.sss-video-titel {margin:0 18px;}
.sss-module-naam {margin:16px 18px 0;}
.sss-module-aantal {margin:4px 18px 0;}
.sss-module, .sss-video {padding-bottom:18px;}
@media (max-width: 1240px) {
	.sss-modules, .sss-videos {grid-template-columns:repeat(5, minmax(0,1fr));}
}
@media (max-width: 1100px) {
	.sss-modules, .sss-videos {grid-template-columns:repeat(3, minmax(0,1fr));}
}
@media (max-width: 820px) {
	.sss-modules, .sss-videos {grid-template-columns:repeat(2, minmax(0,1fr));gap:14px 12px;}
	.sss-video-label {margin:12px 12px 2px;}
	.sss-video-titel {margin:0 12px;font-size:14.5px;}
	.sss-module-naam {margin:12px 12px 0;font-size:14.5px;}
	.sss-module-aantal {margin:2px 12px 0;}
}
/* Data tables: room at the edges, a long company name ends in … instead of being cut off (user 2026-10-22) */
.sss-datatabel .sss-tag {display:inline-block;max-width:150px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;}
.sss-datatabel th, .sss-datatabel td {padding-left:8px;padding-right:8px;}
.sss-datatabel th:first-child, .sss-datatabel td:first-child {padding-left:18px;}
.sss-datatabel th:last-child, .sss-datatabel td:last-child {padding-right:18px;}

/* Date picker (school.js): Dutch, Monday first, in the School look */
.sss-datum {position:relative;}
.sss-datum-knop {display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:0 12px;border:1px solid var(--veld-rand);border-radius:var(--radius-knop);background:#fff;color:var(--kop);font:inherit;font-size:14.5px;text-align:left;cursor:pointer;}
.sss-datum-knop .sss-icoon {width:18px;height:18px;color:var(--grijs);}
.sss-datum-knop.is-leeg span {color:var(--grijs-licht);}
.sss-datum-knop:hover {border-color:#c4c4c4;}
.sss-datum-knop[aria-expanded="true"], .sss-datum-knop:focus-visible {border-color:var(--rood);outline:none;box-shadow:0 0 0 3px rgba(211,32,32,.12);}
.sss-kalender {position:absolute;left:0;top:calc(100% + 6px);z-index:70;width:min(300px, calc(100vw - 32px));padding:14px;border:1px solid var(--kaart-rand);border-radius:14px;background:#fff;box-shadow:0 16px 40px rgba(0,0,0,.14);}
.sss-kalender-kop {display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.sss-kalender-kop strong {font-size:15px;font-weight:700;color:var(--kop);}
.sss-kalender-kop strong::first-letter {text-transform:uppercase;}
.sss-kalender-kop button {display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:8px;background:none;color:var(--kop);cursor:pointer;}
.sss-kalender-kop button:hover {background:var(--rij);}
.sss-kalender-kop .sss-icoon {width:18px;height:18px;}
.sss-kalender-week, .sss-kalender-dagen {display:grid;grid-template-columns:repeat(7, minmax(0,1fr));gap:2px;}
.sss-kalender-week span {padding:6px 0;color:var(--grijs);font-size:11.5px;font-weight:700;text-align:center;text-transform:uppercase;}
.sss-kalender-dagen button {height:36px;padding:0;border:0;border-radius:8px;background:none;color:var(--kop);font:inherit;font-size:14px;cursor:pointer;}
.sss-kalender-dagen button:hover {background:var(--rij);}
.sss-kalender-dagen .is-vandaag {color:var(--rood);font-weight:700;box-shadow:inset 0 0 0 1px rgba(211,32,32,.5);}
.sss-kalender-dagen .is-gekozen, .sss-kalender-dagen .is-gekozen:hover {background:var(--rood);color:#fff;font-weight:700;box-shadow:none;}
.sss-kalender-dagen button:disabled {background:none;color:#c9c9c9;cursor:default;box-shadow:none;}
.sss-kalender-voet {display:flex;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid #f0f0f0;}
.sss-kalender-voet button {padding:6px 10px;border:0;border-radius:6px;background:none;color:var(--rood);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;}
.sss-kalender-voet button:hover {background:var(--rood-zacht);}
.sss-deadline .sss-datum {width:220px;}

/* Company picker: the field inside stays transparent, the frame around it shows the border and focus (user 2026-10-22: "de lijn verdwijnt") */
.sss-keuze-veld {height:42px;padding:0 12px;border:1px solid var(--veld-rand);border-radius:var(--radius-knop);}
.sss-keuze-veld:focus-within {border-color:var(--rood);box-shadow:0 0 0 3px rgba(211,32,32,.12);}
.sss-keuze-veld input, .sss-formulier .sss-keuze-veld input[type="text"], .sss-dialoog-body .sss-keuze-veld input[type="text"] {min-height:0;height:100%;padding:0;border:0 !important;border-radius:0;background:transparent !important;box-shadow:none !important;font-size:14.5px;}
.sss-keuze-lijst {border-color:var(--kaart-rand);border-radius:10px;}

/* Dragging: the item follows the pointer (school.js sortable) */
.is-sleep {position:relative;z-index:5;pointer-events:none;box-shadow:0 18px 40px rgba(0,0,0,.18) !important;}
.is-volgorde > .is-sleep {opacity:1;}
.is-slepend, .is-slepend * {cursor:grabbing !important;}
.sss-stappen-lijst li.is-sleep {background:#fff;}

/* The video picker of a plan: maps > modules > videos */
.sss-kiezer-lijst {gap:4px;}
.sss-kiezer-lijst details > summary {display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;list-style:none;font-weight:700;color:var(--kop);cursor:pointer;}
.sss-kiezer-lijst details > summary::-webkit-details-marker {display:none;}
.sss-kiezer-lijst details > summary::before {content:"";flex:none;width:7px;height:7px;margin:0 4px 0 2px;border-right:2px solid var(--grijs);border-bottom:2px solid var(--grijs);transform:rotate(-45deg);transition:transform .25s cubic-bezier(.4, 0, .2, 1);}
.sss-kiezer-lijst details[open] > summary::before {transform:rotate(45deg);}
.sss-kiezer-lijst details.is-dicht > summary::before {transform:rotate(-45deg);} /* closing: the arrow turns before the list is gone */
.sss-kiezer-lijst details > summary:hover {background:var(--rij);}
.sss-kiezer-lijst details > summary span {flex:1;min-width:0;}
.sss-kiezer-lijst details > summary small {flex:none;min-width:24px;padding:1px 8px;border-radius:999px;background:var(--rij);color:var(--grijs);font-size:12px;font-weight:600;text-align:center;}
.sss-kiezer-map > details > summary {font-size:15px;}
.sss-kiezer-map ul, .sss-kiezer-module ul {display:flex;flex-direction:column;gap:2px;margin:0;padding:0 0 0 14px;list-style:none;}
.sss-kiezer-module > details > summary {font-size:14px;font-weight:600;}
.sss-kiezer-module-acties {padding:2px 10px 6px 30px;}
.sss-kiezer-module-acties button {padding:0;border:0;background:none;color:var(--rood);font:inherit;font-size:13px;font-weight:700;cursor:pointer;}
.sss-kiezer-module-acties button:disabled {color:var(--groen);cursor:default;}
.sss-kiezer-lijst .sss-kiezer-video {display:grid;grid-template-columns:72px minmax(0,1fr) 34px;align-items:center;gap:10px;padding:6px;border-radius:8px;}
.sss-kiezer-lijst .sss-kiezer-video:hover {background:var(--rij);}
.sss-kiezer-video img {width:72px;aspect-ratio:16 / 9;object-fit:cover;border-radius:6px;background:#26221a;}
.sss-kiezer-tekst {display:flex;flex-direction:column;gap:1px;min-width:0;}
.sss-kiezer-tekst strong {display:-webkit-box;overflow:hidden;font-size:13.5px;font-weight:600;line-height:1.35;color:var(--kop);-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.sss-kiezer-tekst small {color:var(--grijs);font-size:12.5px;line-height:1.35;}
.sss-kiezer-lijst .sss-kiezer-plus {display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:var(--rood);color:#fff;cursor:pointer;}
.sss-kiezer-lijst .sss-kiezer-plus:hover {background:var(--rood-donker);}
.sss-kiezer-lijst .sss-kiezer-plus .sss-icoon {width:17px;height:17px;stroke-width:2.2;}
.sss-kiezer-lijst .sss-kiezer-plus.is-toegevoegd {background:var(--groen-licht);color:var(--groen);cursor:default;}
.sss-kiezer-lijst li.sss-kiezer-map, .sss-kiezer-lijst li.sss-kiezer-module {display:block;padding:0;}
.sss-kiezer-lijst li.sss-kiezer-map:hover, .sss-kiezer-lijst li.sss-kiezer-module:hover {background:none;}
.sss-kiezer-lijst summary span {display:block;font-weight:inherit;}

/* Checkboxes and radio buttons in the School look (user 2026-10-22: "maak de vinkjes beter"); the switch (.sss-schakel) keeps its own */
input[type="checkbox"]:not(.sss-schakel input), input[type="radio"] {-webkit-appearance:none;appearance:none;display:inline-grid;place-items:center;flex:none;width:20px;height:20px;margin:0;border:1.5px solid #bdbdbd;border-radius:6px;background:#fff;cursor:pointer;transition:background-color .15s, border-color .15s, box-shadow .15s;}
input[type="radio"] {border-radius:50%;}
input[type="checkbox"]:not(.sss-schakel input):hover, input[type="radio"]:hover {border-color:var(--rood);}
input[type="checkbox"]:not(.sss-schakel input):checked {border-color:var(--rood);background:var(--rood) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7.5'/%3E%3C/svg%3E") center/14px no-repeat;}
input[type="radio"]:checked {border-color:var(--rood);background:#fff;box-shadow:inset 0 0 0 4px #fff, inset 0 0 0 10px var(--rood);}
input[type="checkbox"]:not(.sss-schakel input):focus-visible, input[type="radio"]:focus-visible {outline:none;box-shadow:0 0 0 3px rgba(211,32,32,.2);}
input[type="radio"]:checked:focus-visible {box-shadow:inset 0 0 0 4px #fff, inset 0 0 0 10px var(--rood), 0 0 0 3px rgba(211,32,32,.2);}
input[type="checkbox"]:disabled, input[type="radio"]:disabled {opacity:.45;cursor:default;}
.sss-vinkje input, .sss-collega input {width:20px;height:20px;margin:0;}
.sss-auth input[type="checkbox"] {border-color:rgba(255,255,255,.35);background-color:rgba(255,255,255,.06);}
.sss-auth input[type="checkbox"]:checked {border-color:var(--rood);background-color:var(--rood);}

/* The colleague cards when sharing a plan: white, a red frame when chosen */
.sss-collegas {gap:10px;}
.sss-collega {align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--kaart-rand);border-radius:12px;background:#fff;transition:border-color .15s, background-color .15s;}
.sss-collega:hover {border-color:#d6d6d6;}
.sss-collega:has(input:checked) {border-color:rgba(211,32,32,.55);background:#fff7f7;box-shadow:0 0 0 3px rgba(211,32,32,.06);}
.sss-collega input {margin:0;}
.sss-collega strong {color:var(--kop);font-weight:700;}
/* Breadcrumbs on a light page (contact, company): dark text (user 2026-10-22: "contacten is wit is niet zichtbaar") */
.sss-kruimels--licht ol, .sss-kruimels--licht a, .sss-kruimels--licht .sss-kruimel-terug {color:var(--grijs);}
.sss-kruimels--licht li + li::before {color:#b5b5b5;}
.sss-kruimels--licht a:hover {color:var(--kop);}
.sss-kruimels--licht [aria-current] {color:var(--kop);}

/* Login and sign-up: the way to the other page inside the card (user 2026-10-22: "dat aanmelden kan beter") */
.sss-auth-wissel {display:flex;align-items:center;justify-content:space-between;gap:16px;margin:24px -30px -28px;padding:18px 30px 20px;border-top:1px solid rgba(255,255,255,.08);border-radius:0 0 16px 16px;background:rgba(255,255,255,.03);}
.sss-auth-wissel strong {display:block;color:#fff;font-size:14.5px;font-weight:700;}
.sss-auth-wissel span {display:block;margin-top:2px;color:rgba(255,255,255,.6);font-size:13px;line-height:1.45;}
.sss-auth-wissel-knop {display:inline-flex;flex:none;align-items:center;gap:6px;height:38px;padding:0 14px;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-knop);color:#fff;font-size:14px;font-weight:700;transition:background-color .15s, border-color .15s;}
.sss-auth-wissel-knop:hover {border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;}
.sss-auth-wissel-knop .sss-icoon {width:16px;height:16px;}
@media (max-width: 420px) {
	.sss-auth-wissel {flex-direction:column;align-items:stretch;margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px;}
	.sss-auth-wissel-knop {justify-content:center;}
}

/* Hulp nodig? popup (user 2026-10-22: "deze kan mooier") */
dialog.sss-dialoog--hulp {width:min(560px, calc(100vw - 32px));max-height:calc(100dvh - 48px);}
.sss-hulp-kop {display:flex;align-items:flex-start;gap:14px;padding:22px 22px 6px 24px;}
.sss-hulp-icoon {display:grid;flex:0 0 44px;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--rood-zacht);color:var(--rood);}
.sss-hulp-icoon .sss-icoon {width:22px;height:22px;}
.sss-hulp-kop > div {flex:1;min-width:0;}
.sss-hulp-kop h2 {margin:2px 0 4px;font-size:19px;font-weight:700;}
.sss-hulp-kop p {margin:0;color:var(--grijs);font-size:14px;line-height:1.5;}
.sss-hulp-kop .sss-dialoog-sluit {flex:none;margin:-4px -6px 0 0;}
.sss-dialoog--hulp .sss-dialoog-body {padding:18px 24px 22px;}
.sss-hulp-label {display:block;margin-bottom:8px;color:var(--kop);font-size:14px;font-weight:700;}
.sss-dialoog--hulp textarea {width:100%;min-height:128px;padding:12px 14px;border:1px solid var(--veld-rand);border-radius:10px;font-size:15px;line-height:1.5;resize:vertical;}
.sss-dialoog--hulp textarea:focus {border-color:var(--rood);outline:none;box-shadow:0 0 0 3px rgba(211,32,32,.12);}
.sss-hulp-noot {margin:6px 0 0;color:var(--grijs-licht);font-size:12.5px;}
.sss-dialoog--hulp .sss-anydesk {display:flex;gap:14px;margin-top:18px;padding:16px;border:1px solid var(--kaart-rand);border-radius:12px;background:#fafafa;font-size:14px;line-height:1.5;}
.sss-anydesk-icoon {display:grid;flex:0 0 38px;place-items:center;width:38px;height:38px;border-radius:10px;background:#fff;color:var(--kop);box-shadow:inset 0 0 0 1px var(--kaart-rand);}
.sss-anydesk-icoon .sss-icoon {width:20px;height:20px;}
.sss-dialoog--hulp .sss-anydesk strong {display:block;color:var(--kop);font-size:14.5px;}
.sss-dialoog--hulp .sss-anydesk > div > span {display:block;color:var(--grijs);font-size:13.5px;}
.sss-anydesk-knoppen {display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.sss-dialoog--hulp .sss-anydesk-knoppen a {display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:var(--radius-knop);background:#fff;box-shadow:inset 0 0 0 1px var(--veld-rand);color:var(--kop);font-size:13.5px;font-weight:700;text-decoration:none;}
.sss-dialoog--hulp .sss-anydesk-knoppen a:hover {box-shadow:inset 0 0 0 1px var(--rood);color:var(--rood);}
.sss-anydesk-knoppen .sss-icoon {width:16px;height:16px;}
.sss-hulp-voet {align-items:center;padding:14px 24px;}
.sss-hulp-voet .sss-knop {min-height:40px;padding:0 18px;}
.sss-hulp-bel {margin-right:auto;color:var(--grijs);font-size:13px;}
.sss-hulp-bel a {color:var(--kop);font-weight:600;white-space:nowrap;}
.sss-dialoog--hulp [data-hulp-melding] {margin:0;padding:14px 16px;font-size:14.5px;}
@media (max-width: 520px) {
	.sss-hulp-bel {flex-basis:100%;margin:0 0 4px;}
	.sss-hulp-voet .sss-knop {flex:1;}
}

/* Remove a colleague (Profiel): a quiet trash button per row */
.sss-icoonknop {display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:8px;background:none;color:var(--grijs);cursor:pointer;}
.sss-icoonknop:hover {background:var(--rood-zacht);color:var(--rood);}
.sss-icoonknop .sss-icoon {width:17px;height:17px;}

/* Card hover (user 2026-10-22: "kan mooier en smoother", then "geen zoom in op de afbeelding", "titel mag ook zwart blijven gewoon
   shadow met een kleine rode rand"): the card stays white, a soft deeper shadow and a thin red border with a red glow ("geef de rode rand een rode gloed") fade in. No zoom, the title
   keeps its colour, no lift (moving text blurs, as on the website's FAQ cards). */
.sss-map, .sss-module, .sss-video, .sss-plan, .sss-module-kaart {transition:box-shadow .3s ease, border-color .3s ease;}
.sss-map:hover, .sss-module:hover, .sss-video:hover, .sss-plan:hover, .sss-module-kaart:hover {background:#fff;border-color:rgba(211, 32, 32, .55);box-shadow:0 0 0 3px rgba(211, 32, 32, .10), 0 0 18px rgba(211, 32, 32, .22), 0 14px 32px rgba(17, 18, 20, .10);}
.sss-module:focus-visible, .sss-video:focus-visible, .sss-map:focus-visible {outline:2px solid var(--rood);outline-offset:3px;}
@media (prefers-reduced-motion: reduce) {
	.sss-map, .sss-module, .sss-video, .sss-plan, .sss-module-kaart {transition:none;}
}


/* Description heading with Bewerken for admins (single-ss_video.php) */
.sss-sectie-kop {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;}
.sss-sectie-kop .sss-sectie-titel {margin-bottom:0;}
.sss-knop--klein {min-height:34px;padding:0 12px;font-size:13.5px;gap:6px;}
.sss-knop--klein .sss-icoon {width:15px;height:15px;}

/* The player takes the video's own shape (user 2026-10-22: "maak ook de aspect netjes"): a screen recording is not 16:9, so
   no black bars at the sides; very tall videos stop at 80% of the screen. YouTube keeps 16:9 (its player fits itself). */
.sss-speler:has(> video) {aspect-ratio:auto;background:transparent;}
.sss-speler > video {display:block;width:100%;height:auto;max-height:80vh;object-fit:contain;}

/* Mijn plannen for admins: the company picker with its label (plans are made for the chosen company) */
.sss-kies-bedrijf-rij {display:flex;align-items:center;gap:10px;}
.sss-kies-bedrijf-rij label {color:var(--grijs);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
@media (max-width: 640px) { .sss-kies-bedrijf-rij {width:100%;} .sss-kies-bedrijf-rij .sss-kies-bedrijf {flex:1;} }

/* Beheerder en Lid (Profiel, 2026-10-22; plugin includes/rollen.php): the two roles explained, the role label, the role
   choice when adding a colleague, and the Zichtbaarheid tree */
.sss-rollen {display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px;margin:0 0 20px;}
.sss-rol {padding:14px 16px;border-radius:10px;background:var(--rij);box-shadow:inset 0 0 0 1px var(--rand);}
.sss-rol.is-mijn {background:#fff;box-shadow:inset 0 0 0 1px rgba(211, 32, 32, .35), 0 0 0 3px rgba(211, 32, 32, .06);}
.sss-rol-kop {display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:15px;}
.sss-rol-icoon {display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:8px;background:var(--rood-zacht);color:var(--rood);}
.sss-rol-icoon .sss-icoon {width:17px;height:17px;}
.sss-rol-jij {margin-left:auto;padding:2px 8px;border-radius:999px;background:var(--rood);color:#fff;font-size:11px;font-weight:600;}
.sss-rol ul {display:grid;gap:4px;margin:0;padding:0 0 0 18px;color:var(--grijs);font-size:13.5px;line-height:1.45;}
.sss-rolbadge {display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;background:var(--vlak);color:var(--grijs);font-size:12px;font-weight:600;line-height:18px;white-space:nowrap;vertical-align:1px;}
.sss-rolbadge--beheerder {background:var(--rood-zacht);color:var(--rood-donker);}
.sss-rolbadge--team {background:var(--ink);color:#fff;}
.sss-toegang-minder {display:block;margin-top:2px;color:var(--grijs);font-size:12px;}
.sss-rolkeuze {display:grid;gap:8px;}
.sss-rolkeuze-optie {display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--lijn);cursor:pointer;transition:box-shadow .2s ease, background-color .2s ease;}
.sss-rolkeuze-optie:hover {background:var(--rij);}
.sss-rolkeuze-optie:has(input:checked) {background:#fff;box-shadow:inset 0 0 0 1.5px var(--rood);}
.sss-rolkeuze-optie input {flex:none;width:16px;height:16px;margin:2px 0 0;accent-color:var(--rood);}
.sss-rolkeuze-optie span {display:grid;gap:3px;}
.sss-rolkeuze-optie small {color:var(--grijs);font-size:13px;line-height:1.45;}
.sss-veld-hulp {margin:8px 0 0;color:var(--grijs);font-size:12.5px;}
.sss-zicht-lijst {display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;}
.sss-zicht-lijst > span:first-child {margin-right:4px;color:var(--grijs);font-weight:600;}
.sss-zicht-chip {padding:3px 10px;border-radius:999px;background:var(--vlak);font-weight:500;}
.sss-zicht-alles-aan {display:flex;align-items:center;gap:8px;color:var(--groen);font-weight:600;}
.sss-zicht-alles-aan .sss-icoon {width:18px;height:18px;}
.sss-zicht {display:grid;gap:8px;}
.sss-zicht-balk {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;margin-bottom:4px;color:var(--grijs);font-size:13px;}
.sss-zicht-alles {display:flex;gap:6px;}
.sss-zicht-alles button {padding:4px 10px;border:0;border-radius:6px;background:var(--vlak);color:var(--tekst);font-size:12.5px;font-weight:600;cursor:pointer;}
.sss-zicht-alles button:hover {background:rgba(51, 51, 51, .1);}
.sss-zicht-map {border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--lijn);}
.sss-zicht-maprij {display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:6px 8px 6px 14px;}
.sss-zicht-open {display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border:0;border-radius:6px;background:none;color:var(--grijs);font-size:13px;cursor:pointer;white-space:nowrap;}
.sss-zicht-open:hover {background:var(--vlak);color:var(--tekst);}
.sss-zicht-open .sss-icoon {width:16px;height:16px;transition:transform .2s ease;}
.sss-zicht-open[aria-expanded="true"] .sss-icoon {transform:rotate(180deg);}
.sss-zicht-modules {display:grid;gap:2px;padding:4px 14px 12px 40px;border-top:1px solid var(--rand);}
.sss-zicht-modules .sss-vinkje {padding:5px 0;font-size:13.5px;}
.sss-zicht-map.is-uit .sss-zicht-modules {opacity:.45;}
.sss-zicht-map.is-uit .sss-zicht-open span {color:var(--rood);}
.sss-zicht-map.is-vast, .sss-vinkje.is-vast {opacity:.55;}
.sss-zicht-vast, .sss-vinkje.is-vast small {color:var(--grijs);font-size:12px;}
@media (max-width: 640px) {
	.sss-rollen {grid-template-columns:1fr;}
}

/* Meldingen per mail (Profiel, 2026-10-22): one row per kind of mail with a switch */
.sss-mailkeuzes {display:grid;overflow:hidden;border:1px solid var(--lijn);border-radius:10px;}
.sss-mailkeuze {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;cursor:pointer;}
.sss-mailkeuze:not(:first-of-type) {border-top:1px solid var(--rand);}
.sss-mailkeuze > span:first-child {display:grid;gap:2px;min-width:0;}
.sss-mailkeuze strong {font-size:14px;}
.sss-mailkeuze small {color:var(--grijs);font-size:13px;line-height:1.45;}
.sss-mailkeuze:hover {background:var(--rij);}
.sss-mailkeuze .sss-schakel {flex:none;}
.sss-nieuw-delen .sss-kaart-kop small {color:var(--grijs);font-size:12px;}
.sss-nieuw-delen .sss-deadline {margin-top:0;}
.sss-kiezer-eigen {margin-left:6px;padding:1px 7px;border-radius:999px;background:var(--rood-zacht);color:var(--rood-donker);font-size:11px;font-style:normal;font-weight:600;vertical-align:1px;}
.sss-kiezer-lijst .sss-kiezer-leeg--map {padding:6px 10px 10px 26px;color:var(--grijs);font-size:13px;}

/* Handtekening (Bulk e-mail, 2026-10-22): the signatures as cards to choose, with Bewerken and Toevoegen */
.sss-handtekeningen {display:grid;grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));gap:8px;}
.sss-handtekening {position:relative;display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 44px 10px 12px;border:0;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--lijn);color:var(--tekst);font:inherit;text-align:left;cursor:pointer;transition:box-shadow .2s ease, background-color .2s ease;}
.sss-handtekening:hover {background:var(--rij);}
.sss-handtekening:has(input:checked) {background:#fff;box-shadow:inset 0 0 0 1.5px var(--rood), 0 0 0 3px rgba(211, 32, 32, .08);}
.sss-handtekening input {position:absolute;opacity:0;pointer-events:none;}
.sss-handtekening:has(input:focus-visible) {outline:2px solid rgba(211, 32, 32, .6);outline-offset:2px;}
.sss-handtekening-beeld {display:grid;place-items:center;flex:none;width:40px;height:40px;overflow:hidden;border-radius:50%;background:var(--rood-zacht);color:var(--rood-donker);font-size:14px;font-weight:700;}
.sss-handtekening-beeld img {width:100%;height:100%;object-fit:cover;}
.sss-handtekening-beeld .sss-icoon {width:18px;height:18px;}
.sss-handtekening-beeld--leeg {background:var(--vlak);color:var(--grijs);}
.sss-handtekening-beeld--team {background:var(--ink);}
.sss-handtekening-beeld--team img {width:22px;height:22px;object-fit:contain;}
.sss-handtekening-tekst {display:grid;gap:2px;min-width:0;}
.sss-handtekening-tekst strong {font-size:14px;}
.sss-handtekening-tekst small {overflow:hidden;color:var(--grijs);font-size:12.5px;text-overflow:ellipsis;white-space:nowrap;}
.sss-handtekening-bewerk {position:absolute;top:50%;right:8px;transform:translateY(-50%);}
.sss-handtekening--nieuw {padding-right:12px;background:transparent;box-shadow:inset 0 0 0 1px var(--lijn);border:1px dashed transparent;}
.sss-handtekening--nieuw .sss-handtekening-beeld {background:var(--vlak);color:var(--tekst);}
.sss-handtekening-weg {margin-top:20px;color:var(--rood-donker);}
/* Cards side by side in a grid start at the same height: no "kaart + kaart" space there (user 2026-10-22: "lijnt niet netjes uit de bovenkant") */
.sss-plan-kolommen > .sss-kaart + .sss-kaart {margin-top:0;}

/* Wijzigen, Dupliceren, Verwijderen and Openen as icons in a row in the table Alle plannen (2026-10-22) */
.sss-tabel-acties {white-space:nowrap;}
.sss-tabel-acties form {display:inline;margin:0;}
.sss-tabel-acties > a, .sss-tabel-acties > form, .sss-tabel-acties > button {margin-left:2px;vertical-align:middle;}
.sss-tabel-acties .sss-icoonknop {color:var(--grijs);}
.sss-tabel-acties .sss-icoonknop .sss-icoon {width:18px;height:18px;}
.sss-tabel-acties .sss-icoonknop:hover {background:var(--vlak);color:var(--tekst);}
.sss-tabel-acties .sss-icoonknop--gevaar:hover {background:var(--rood-zacht);color:var(--rood);}
.sss-tabel-acties .sss-icoonknop--open {margin-left:8px;color:var(--rood);}
.sss-tabel-acties .sss-icoonknop--open:hover {background:var(--rood-zacht);color:var(--rood-donker);}

/* Lesplan templates (2026-10-22; own class names: .sss-keuze is the company picker, inc/sjablonen-ui.php, pagina-bibliotheek.php): the choice behind Nieuw plan, the
   library cards, the Lesplan label and the read-only steps of a plan that follows one */
.sss-inline-form {display:inline;margin:0;}
.sss-startkeuzes {display:grid;gap:10px;}
.sss-startkeuze {display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--lijn);color:var(--tekst);transition:box-shadow .2s ease, background-color .2s ease;}
.sss-startkeuze:hover {background:var(--rij);box-shadow:inset 0 0 0 1.5px var(--rood);}
.sss-startkeuze > span:nth-child(2) {display:grid;flex:1;gap:2px;min-width:0;}
.sss-startkeuze small {color:var(--grijs);font-size:13px;line-height:1.4;}
.sss-startkeuze > .sss-icoon {flex:none;width:18px;height:18px;color:var(--grijs);}
.sss-startkeuze-icoon {display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:10px;background:var(--rood-zacht);color:var(--rood);}
.sss-startkeuze-icoon .sss-icoon {width:20px;height:20px;}
.sss-startkeuze-icoon--team {background:var(--ink);color:#fff;}
.sss-startkeuze-kop {margin:28px 0 6px;font-size:17px;}
.sss-sjabloon-lijst {display:grid;gap:10px;margin:14px 0 0;padding:0;list-style:none;}
.sss-sjabloon-rij {display:grid;gap:10px;padding:14px 16px;border-radius:12px;background:var(--rij);}
.sss-sjabloon-tekst {display:grid;gap:2px;min-width:0;}
.sss-sjabloon-tekst small {color:var(--grijs);font-size:12.5px;}
.sss-sjabloon-tekst p {margin-top:4px;color:var(--grijs);font-size:13.5px;line-height:1.45;}
.sss-sjabloon-knoppen {display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.sss-startkeuze-meer {margin-top:18px;}
.sss-startkeuze-meer a {display:inline-flex;align-items:center;gap:4px;color:var(--rood);font-weight:600;}
.sss-startkeuze-meer .sss-icoon {width:16px;height:16px;}
.sss-sjablonen {display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:16px;}
.sss-sjabloon {display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--rand);}
.sss-sjabloon-kop {display:flex;align-items:flex-start;gap:12px;}
.sss-sjabloon-kop h2 {font-size:17px;line-height:1.3;}
.sss-sjabloon-kop h2 a:hover {color:var(--rood);}
.sss-sjabloon-kop small {color:var(--grijs);font-size:13px;}
.sss-sjabloon-icoon {display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:10px;background:var(--rood-zacht);color:var(--rood);}
.sss-sjabloon-icoon .sss-icoon {width:20px;height:20px;}
.sss-sjabloon-omschrijving {color:var(--grijs);font-size:14px;line-height:1.5;}
.sss-sjabloon-mappen {display:flex;flex-wrap:wrap;gap:6px;}
.sss-sjabloon-mappen span {padding:2px 9px;border-radius:999px;background:var(--vlak);font-size:12px;font-weight:600;}
.sss-sjabloon-gebruik {color:var(--grijs);font-size:12.5px;}
.sss-sjabloon .sss-sjabloon-knoppen {margin-top:auto;padding-top:4px;}
.sss-lesplan-tag {display:inline-flex;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--rood-zacht);color:var(--rood-donker);font-size:11px;font-weight:600;vertical-align:1px;}
.sss-lesplan-vast .sss-melding {margin-bottom:12px;}
.sss-stappen-lijst--vast li {cursor:default;}
.sss-gebruik-lijst {display:grid;gap:6px;margin:0;padding:0;list-style:none;}
.sss-gebruik-lijst li {display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:8px;background:var(--rij);font-weight:600;}
.sss-gebruik-lijst small {color:var(--grijs);font-weight:500;}
@media (max-width: 1100px) {
	.sss-sjablonen {grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width: 640px) {
	.sss-sjablonen {grid-template-columns:1fr;}
}
.sss-lesplan-feiten {margin:-4px 0 12px;color:var(--grijs);font-size:13px;font-weight:600;}
.sss-lesplan-over {color:var(--tekst);font-size:14.5px;line-height:1.6;}
.sss-lesplan-over p + p {margin-top:10px;}
/* Library card: "Bekijk de stappen" as a link, then two equal buttons (user 2026-10-22: "maak dit netter") */
.sss-sjabloon-bekijk {display:inline-flex;align-items:center;gap:4px;margin-top:auto;color:var(--rood);font-size:14px;font-weight:600;}
.sss-sjabloon-bekijk:hover {color:var(--rood-donker);}
.sss-sjabloon-bekijk .sss-icoon {width:16px;height:16px;}
.sss-sjabloon .sss-sjabloon-knoppen--twee {display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:8px;margin-top:4px;padding-top:14px;border-top:1px solid var(--rand);}
.sss-sjabloon-knoppen--twee > form {display:block;}
.sss-sjabloon-knoppen--twee .sss-knop {width:100%;justify-content:center;}
/* E-mails: the tabs Share update / Bulk e-mail in the band (2026-10-22, inc/mails-ui.php) */
.sss-band-tabs {display:inline-flex;flex-wrap:wrap;gap:4px;margin-top:20px;padding:4px;border-radius:10px;background:rgba(255, 255, 255, .08);box-shadow:inset 0 0 0 1px rgba(255, 255, 255, .1);}
.sss-band-tabs a {display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 16px;border-radius:7px;color:rgba(255, 255, 255, .8);font-size:14px;font-weight:600;transition:background-color .2s ease, color .2s ease;}
.sss-band-tabs a:hover {background:rgba(255, 255, 255, .08);color:#fff;}
.sss-band-tabs a.is-actief {background:#fff;color:var(--ink);}
.sss-band-tabs .sss-icoon {width:17px;height:17px;}
/* Genereer met AI under a lesplan text (2026-10-22) */
.sss-ai-rij {display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:8px;}
.sss-ai-knop {display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border:0;border-radius:999px;background:var(--rood-zacht);color:var(--rood-donker);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background-color .2s ease;}
.sss-ai-knop:hover {background:rgba(211, 32, 32, .16);}
.sss-ai-knop .sss-icoon {width:15px;height:15px;}
.sss-ai-knop.is-bezig {cursor:progress;opacity:.8;}
.sss-ai-knop.is-bezig .sss-icoon {animation:sss-ai-draai 1.2s linear infinite;}
@keyframes sss-ai-draai {to {transform:rotate(360deg);}}
.sss-ai-melding {color:var(--grijs);font-size:13px;}
.sss-ai-melding.is-fout {color:var(--rood-donker);}
.sss-ai-melding .sss-link-knop {font-size:13px;font-weight:600;}
@media (prefers-reduced-motion: reduce) {
	.sss-ai-knop.is-bezig .sss-icoon {animation:none;}
}
/* The logos of companies' own maps in grayscale, Softwareshaker's own (the general maps) in colour, also on hover
   (user 2026-10-23: "alle logo's maak grayscale op die van ons na", "hover kleur mag weg") */
.sss-map.is-klantlogo img {filter:grayscale(1);}
/* A white logo shown dark grey on its white map tile (2026-10-23, plugin includes/logos.php): white becomes #4d4d4d */
.sss-map.is-grijs-logo img {filter:grayscale(1) brightness(.3);}
/* Every logo trimmed (plugin includes/logos.php) and given the same room, so all sit in the middle at a like size
   (user 2026-10-23: "lijn alle logos mooi in het midden uit") */
.sss-map img {box-sizing:border-box;padding:8% 10%;object-position:center;}
/* Bulk e-mail templates (2026-10-23) */
.sss-bulk-sjablonen .sss-veld-kop .sss-link-knop {font-size:13px;font-weight:600;}
.sss-bulk-sjablonen .sss-link-knop .sss-icoon {width:15px;height:15px;}
.sss-sjabloon-chips {display:flex;flex-wrap:wrap;gap:8px;}
.sss-sjabloon-chip {display:inline-flex;align-items:stretch;overflow:hidden;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--lijn);}
.sss-sjabloon-chip button {border:0;background:none;color:var(--tekst);font:inherit;cursor:pointer;}
.sss-sjabloon-chip [data-bulk-sjabloon] {padding:7px 6px 7px 14px;font-size:13.5px;font-weight:600;}
.sss-sjabloon-chip [data-bulk-sjabloon].is-aan {color:var(--rood-donker);}
.sss-sjabloon-chip:has(.is-aan) {background:var(--rood-zacht);box-shadow:inset 0 0 0 1.5px var(--rood);}
.sss-sjabloon-chip:hover {background:var(--rij);}
.sss-sjabloon-chip-weg {display:grid;place-items:center;width:30px;padding:0 6px 0 2px;color:var(--grijs) !important;}
.sss-sjabloon-chip-weg:hover {color:var(--rood) !important;}
.sss-sjabloon-chip-weg .sss-icoon {width:13px;height:13px;}
.sss-bulk-dienst {margin-top:12px;font-weight:600;}
/* E-mails tabs: the sliding pill (2026-10-23, school.js) */
.sss-band-tabs {position:relative;}
.sss-band-tabs a {position:relative;z-index:1;}
.sss-band-tabs-pil {position:absolute;top:4px;left:4px;z-index:0;height:calc(100% - 8px);border-radius:7px;background:#fff;box-shadow:0 2px 8px rgba(0, 0, 0, .18);opacity:0;transition:transform .28s cubic-bezier(.4, 0, .2, 1), width .28s cubic-bezier(.4, 0, .2, 1);}
.sss-band-tabs.has-pil .sss-band-tabs-pil {opacity:1;}
.sss-band-tabs.has-pil a.is-actief {background:transparent;}
.sss-band-tabs a {transition:color .28s ease, background-color .2s ease;}
@media (prefers-reduced-motion: reduce) {
	.sss-band-tabs-pil {transition:none;}
}
/* The text editor of Bulk e-mail (2026-10-23, school.js data-rich) */
.sss-rich {display:none;overflow:hidden;border:1px solid var(--veld-rand, rgba(51, 51, 51, .15));border-radius:var(--radius-knop, 8px);background:#fff;}
.sss-rich.is-klaar {display:block;}
.sss-rich.is-klaar + .sss-rich-bron {display:none;}
.sss-rich:focus-within {border-color:var(--rood);box-shadow:0 0 0 3px rgba(211, 32, 32, .12);}
.sss-rich-balk {display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:6px;border-bottom:1px solid var(--rand);background:var(--rij);}
.sss-rich-balk button {display:inline-grid;place-items:center;min-width:32px;height:32px;padding:0 8px;border:0;border-radius:6px;background:none;color:var(--tekst);font:inherit;font-size:14px;cursor:pointer;}
.sss-rich-balk button:hover {background:rgba(51, 51, 51, .08);}
.sss-rich-balk button .sss-icoon {width:17px;height:17px;}
.sss-rich-balk [data-rich-cmd="aanhef"] {font-family:ui-monospace, SFMono-Regular, Menlo, monospace;font-size:12px;color:var(--grijs);}
.sss-rich-streep {width:1px;height:20px;margin:0 4px;background:var(--lijn);}
.sss-rich-link {display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px;border-bottom:1px solid var(--rand);background:#fff;}
.sss-rich-link input {flex:1;min-width:200px;height:34px;padding:0 10px;border:1px solid var(--lijn);border-radius:6px;font-size:14px;outline:none;}
.sss-rich-link input:focus {border-color:var(--rood);}
.sss-rich-veld {min-height:260px;max-height:60vh;overflow:auto;padding:14px 16px;font-size:14.5px;line-height:1.6;outline:none;}
.sss-rich-veld p {margin:0 0 12px;}
.sss-rich-veld h3 {margin:16px 0 8px;font-size:17px;}
.sss-rich-veld ul, .sss-rich-veld ol {margin:0 0 12px;padding-left:22px;}
.sss-rich-veld a {color:var(--rood);text-decoration:underline;}
/* Data tables: long names, addresses and company names wrap instead of pushing the table past the card (2026-10-23) */
.sss-datatabel td.sss-td-breek {white-space:normal;overflow-wrap:anywhere;}
/* A company tag stays one neat pill: a long name ends in … (the whole name in its title, on hover; user 2026-10-23: "wel iets netter", 30% narrower: 140 px) */
.sss-datatabel td.sss-td-breek .sss-tag {display:inline-block;max-width:140px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:middle;}
/* With 6 cards a row the video titles a little smaller (user 2026-10-22: "die titel van de video iets kleiner"), margins to match */
.sss-video-titel {font-size:13.5px;line-height:1.4;}
.sss-videos .sss-video-label, .sss-videos .sss-video-titel, .sss-modules .sss-module-naam, .sss-modules .sss-module-aantal {margin-left:14px;margin-right:14px;}
@media (max-width: 820px) {
	.sss-videos .sss-video-label, .sss-videos .sss-video-titel, .sss-modules .sss-module-naam, .sss-modules .sss-module-aantal {margin-left:12px;margin-right:12px;}
}
.sss-fieldset-plat {min-width:0;margin:0;padding:0;border:0;}
.sss-fieldset-plat:disabled {opacity:.75;}
/* Meldingen per software en module (Instellingen, 2026-10-23) */
.sss-mailboom {margin-top:10px;border:1px solid var(--lijn);border-radius:10px;background:#fff;}
.sss-mailboom > summary {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;list-style:none;font-size:14px;font-weight:600;cursor:pointer;}
.sss-mailboom > summary::-webkit-details-marker {display:none;}
.sss-mailboom > summary span::before {content:"";display:inline-block;width:7px;height:7px;margin:0 10px 2px 0;border-right:2px solid var(--grijs);border-bottom:2px solid var(--grijs);transform:rotate(-45deg);transition:transform .25s cubic-bezier(.4, 0, .2, 1);}
.sss-mailboom[open] > summary span::before {transform:rotate(45deg);}
.sss-mailboom > summary small {color:var(--grijs);font-size:12.5px;font-weight:500;}
.sss-mailboom > summary:hover {background:var(--rij);border-radius:10px;}
.sss-mailboom > .sss-noot, .sss-mailboom > .sss-zicht {margin:0 16px 14px;}
/* The bar of a map in the Zichtbaarheid and mail trees opens its modules (2026-10-23) */
.sss-zicht-maprij {cursor:pointer;border-radius:10px;transition:background-color .2s ease;}
.sss-zicht-maprij:hover {background:var(--rij);}
.sss-zicht-maprij .sss-vinkje {cursor:pointer;}
/* The modules of a map side by side, as many columns as fit (user 2026-10-23: "hier kunnen ook meerdere rijen") */
.sss-zicht-modules {grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));gap:2px 24px;align-items:start;}
.sss-zicht-modules .sss-vinkje {min-width:0;overflow-wrap:anywhere;}
@media (max-width:600px) {.sss-zicht-modules {padding-left:14px;}}
/* A long module name (Stockwijziging / voorraadbeheer) wraps: its box stays level with the first line */
.sss-zicht-modules .sss-vinkje {align-items:flex-start;line-height:20px;}
.sss-zicht-modules .sss-vinkje input {flex:none;}
/* Wider columns (4 on a laptop instead of 5), so names like Robaws + WooCommerce stay on one line */
.sss-zicht-modules {grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));column-gap:16px;}
/* Meer: two groups (Plannen, Beheer) with a line under each link (2026-10-23) */
.sss-meer-menu {min-width:290px;}
.sss-meer-groep {display:grid;gap:2px;}
.sss-meer-groep + .sss-meer-groep {margin-top:6px;padding-top:6px;border-top:1px solid var(--rand);}
.sss-meer-kop {padding:6px 8px 2px;color:var(--grijs);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;}
.sss-meer-menu a {align-items:flex-start;}
.sss-meer-menu a .sss-icoon {flex:none;margin-top:2px;}
.sss-meer-menu a > span {display:grid;gap:1px;min-width:0;}
.sss-meer-menu a strong {font-weight:600;}
.sss-meer-menu a small {color:var(--grijs);font-size:12.5px;line-height:1.35;}
.sss-meer-menu a.is-actief {background:var(--vlak);}
@media (max-width: 820px) {
	.sss-meer-menu {min-width:0;}
	.sss-meer-groep + .sss-meer-groep {border-top-color:rgba(255,255,255,.12);}
	.sss-meer-kop, .sss-meer-menu a small {color:rgba(255,255,255,.55);}
	.sss-meer-menu a.is-actief {background:rgba(255,255,255,.08);}
}
/* Wide enough for the line under Prompts on one line */
.sss-meer-menu {min-width:320px;}
@media (max-width: 820px) {.sss-meer-menu {min-width:0;}}
/* Bekijk als bedrijf, clearer (2026-10-23): an amber bar under the top bar that stays in view, amber ring + eye on the avatar */
.sss-bekijk-als {background:#FFB11B;color:#2b1f00;font-size:14px;box-shadow:inset 0 1px 0 rgba(0,0,0,.15);}
.sss-bekijk-als .sss-wrap.sss-bekijk-als-inner {display:flex;align-items:center;gap:12px;padding-top:9px;padding-bottom:9px;}
.sss-bekijk-als-icoon {display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:rgba(43,31,0,.12);}
.sss-bekijk-als-icoon .sss-icoon {width:18px;height:18px;}
.sss-bekijk-als p {flex:1;min-width:0;margin:0;line-height:1.35;}
.sss-bekijk-als p strong {display:block;font-weight:700;}
.sss-bekijk-als p span {font-size:13px;opacity:.85;}
.sss-bekijk-als-knoppen {display:flex;flex:none;gap:8px;}
.sss-bekijk-als-wissel, .sss-bekijk-als-stop {display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:8px;font-size:13.5px;font-weight:600;text-decoration:none !important;cursor:pointer;}
.sss-bekijk-als-wissel {border:1px solid rgba(43,31,0,.35);background:transparent;color:inherit;}
.sss-bekijk-als-wissel:hover {background:rgba(43,31,0,.08);}
.sss-bekijk-als-stop {border:0;background:var(--ink);color:#fff;}
.sss-bekijk-als-stop:hover {background:#000;}
.sss-bekijk-als-stop .sss-icoon {width:14px;height:14px;}
.sss-avatar {position:relative;}
.sss-avatar.is-bekijk {box-shadow:0 0 0 2px var(--ink), 0 0 0 4px #FFB11B;}
.sss-avatar-oog {position:absolute;right:-6px;bottom:-5px;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#FFB11B;color:#2b1f00;box-shadow:0 0 0 2px var(--ink);}
.sss-avatar-oog .sss-icoon {width:11px;height:11px;}
.sss-bekijk-uitleg {display:block;margin:-2px 0 6px;color:var(--grijs);font-size:12px;line-height:1.35;}
@media (max-width: 820px) {
	.sss-bekijk-als .sss-wrap.sss-bekijk-als-inner {flex-wrap:wrap;gap:8px 10px;}
	.sss-bekijk-als-icoon {display:none;}
	.sss-bekijk-als p {flex-basis:100%;}
	.sss-bekijk-als p span {display:none;}
}
/* Account menu, clearer (2026-10-23): who is logged in, links with icons, Bekijk als bedrijf as its own block */
.sss-account-menu {min-width:240px;}
.sss-account-kop {display:flex;align-items:center;gap:10px;padding:8px 8px 10px;margin-bottom:4px;border-bottom:1px solid var(--lijn);}
.sss-account-kop .sss-mini-avatar {flex:none;width:34px;height:34px;font-size:14px;}
.sss-account-kop > span {display:grid;min-width:0;line-height:1.3;}
.sss-account-kop strong {overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap;}
.sss-account-kop small {overflow:hidden;color:var(--grijs);font-size:12px;text-overflow:ellipsis;white-space:nowrap;}
.sss-account-menu a.sss-account-link {display:flex;align-items:center;gap:10px;}
.sss-account-link .sss-icoon {width:16px;height:16px;color:var(--grijs);}
.sss-bekijk-form {margin:6px 0;padding:10px;border:0;border-radius:10px;background:#fff8e6;box-shadow:inset 0 0 0 1px #f6deA0;}
.sss-bekijk-form label {display:flex !important;align-items:center;gap:6px;margin-bottom:2px;color:#5c4400 !important;font-size:13px !important;font-weight:700 !important;}
.sss-bekijk-form label .sss-icoon {width:16px;height:16px;}
.sss-bekijk-form .sss-bekijk-uitleg {margin:0 0 8px;color:#7a5f1a;}
.sss-bekijk-form .sss-keuze-veld {background:#fff;}
/* Lesplannen of Softwareshaker carry its red shaker (2026-10-23) */
.sss-ss-logo {display:block;flex:none;width:auto;height:18px;}
.sss-sjabloon-icoon--ss, .sss-startkeuze-icoon--ss {background:var(--ink);}
.sss-sjabloon-icoon--ss .sss-ss-logo, .sss-startkeuze-icoon--ss .sss-ss-logo {height:20px;}
.sss-knop--ss .sss-ss-logo {height:16px;}
.sss-startkeuze-kop {display:flex;align-items:center;gap:8px;}
.sss-startkeuze-kop .sss-ss-logo {height:16px;}
.sss-startkeuzes--pagina {grid-template-columns:repeat(2, minmax(0, 1fr));max-width:880px;margin-top:4px;}
.sss-startkeuzes--pagina .sss-startkeuze {padding:18px 20px;}
.sss-startkeuzes--pagina .sss-startkeuze strong {font-size:15.5px;}
@media (max-width: 700px) {.sss-startkeuzes--pagina {grid-template-columns:1fr;}}
/* Tighter (user 2026-10-23: "kan wat strakker"): the question right under the heading, equal tiles, one icon style */
.sss-start-vraag {margin:-8px 0 14px;color:var(--grijs);}
.sss-startkeuzes--pagina {gap:12px;max-width:900px;margin-top:0;}
.sss-startkeuzes--pagina .sss-startkeuze {gap:14px;padding:16px 18px;}
.sss-startkeuzes--pagina .sss-startkeuze strong {font-size:15px;}
.sss-sjabloon-icoon--ss, .sss-startkeuze-icoon--ss {background:var(--rood-zacht);}
.sss-sjabloon-icoon--ss .sss-ss-logo, .sss-startkeuze-icoon--ss .sss-ss-logo {height:24px;}
/* An empty text right under its heading, not 40px lower (user 2026-10-23, Gedeeld met jou) */
.sss-kop + .sss-leeg {margin-top:-8px;padding-top:0;}
/* Without the "Bekijk de stappen" link the buttons keep to the bottom of the card */
.sss-sjabloon .sss-sjabloon-knoppen--twee {margin-top:auto;}
/* The name in the contact card is an h2 now (the band has the h1) */
.sss-detail .sss-detail-naam h2 {font-size:24px;}
/* Lesplannen of Softwareshaker for the team: a table (2026-10-23) */
.sss-lesplan-tabel td {vertical-align:middle;}
.sss-lesplan-tabel-tekst {display:block;max-width:420px;margin-top:2px;overflow:hidden;color:var(--grijs);font-size:12.5px;text-overflow:ellipsis;white-space:nowrap;}
.sss-lesplan-tabel .sss-geen-wrap {white-space:nowrap;}
.sss-lesplan-tabel .sss-grijs {color:var(--grijs);}
/* The whole description, and the companies as chips (2026-10-23) */
.sss-lesplan-tabel td:first-child {min-width:300px;}
.sss-lesplan-tabel .sss-lesplan-tabel-tekst {max-width:560px;margin-top:3px;overflow:visible;line-height:1.45;white-space:normal;}
.sss-lesplan-bedrijven {max-width:260px;}
.sss-lesplan-bedrijven a, .sss-lesplan-bedrijven span {padding:2px 9px;border-radius:999px;background:var(--vlak);color:var(--tekst);font-size:12px;font-weight:600;}
.sss-lesplan-bedrijven a:hover {background:var(--rood-zacht);color:var(--rood);}
.sss-lesplan-bedrijven span {background:transparent;box-shadow:inset 0 0 0 1px var(--lijn);color:var(--grijs);cursor:default;}
/* The icon in a form (Dupliceren) on the same line as the other icons */
.sss-tabel-acties form {display:inline-flex;}