:root { 
  --roze: #d16491; 
  --groen: rgb(94 159 130 / 100%); 
  --groenblauw: #16abaf;
  --lichtblauw: #2696e5;
  --donkerblauw: #0b3866;
}

body, html {margin:0;padding:0;font-family:'Cedora', tahoma;color:#1b1b1f;min-height: 100%;font-size:18px;line-height:24px; background:
    radial-gradient(circle, rgba(120,150,220,0.07) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(135deg, #f9fbff 0%, #eef3fb 60%, #f9fbff 100%);
}
body.fixed {overflow:hidden;width:100%;}
.fixed {position:fixed!important;}
* {box-sizing:border-box; -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 -o-box-sizing:border-box;
 -webkit-overflow-scrolling: touch;}
*:after, *:before {font-family: "Font Awesome 6 Pro";font-weight:900;line-height: 100%;position: relative;font-size:22px;display:inline-block;box-sizing:border-box;}
.wf-editor-container *:after, .wf-editor-container *:before, .mce-container *:after, .mce-container *:before, .mce-widget:after, .mce-widget:before, .mce-ico:before { font-family: inherit; font-size: inherit; font-weight: inherit; position: static; }
*:hover {-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;}
:focus {outline: 0;}

#outer-wrapper {position:relative;max-width:1280px;margin:0px auto;display:block;padding:0 0 40px;}

a {color:#1b1b1f;text-decoration:none;}
th {text-align:left;}
p {margin:0 0 10px;padding:0;text-align: left;}
img {border:none;}

select {-webkit-appearance: none;-moz-appearance: none; appearance: none;cursor:pointer;border:0;border-radius:0;}
select::-ms-expand {display: none;outline: none;}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #1b1b1f!important;font-family:'Cedora'!important;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #1b1b1f!important;font-family:'Cedora'!important;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #1b1b1f!important;font-family:'Cedora'!important;
}
:-moz-placeholder { /* Firefox 18- */
  color: #1b1b1f!important;font-family:'Cedora'!important;
}

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.dashboard .tegels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.dashboard .tegel a { background:#fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 140px; padding: 20px 12px; text-align: center; text-decoration: none; color: var(--lichtblauw);  border-radius: 16px; box-shadow: 0 1px 3px rgb(0 0 0 / 6%); transition: transform 0.15s; }
.dashboard .tegel a:active { transform: scale(0.97); }
.dashboard .tegel .tegel-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; }
.dashboard .tegel .tegel-icon:before { font-family: "Font Awesome 6 Pro"; font-weight: 900; font-size: 24px; }
.dashboard .tegel .tegel-titel { font-size: 15px; font-weight: 600; line-height: 1.2; }
.dashboard .tegel.leersessies .tegel-icon { background: var(--groenblauw); color: var(--donkerblauw); }
.dashboard .tegel.leersessie .tegel-icon { background: var(--lichtblauw); color: var(--donkerblauw); }
.dashboard .tegel.profiel .tegel-icon { background: rgb(107 91 123 / 15%); color: #6b5b7b; }
.dashboard .tegel.chatbot .tegel-icon { background: var(--donkerblauw); color: #fff; }
.dashboard .tegel.uitloggen .tegel-icon { background: var(--groenblauw); color: var(--donkerblauw); }
.dashboard .tegel.profiel .tegel-icon:before { content: "\f007"; }
.dashboard .tegel.uitloggen .tegel-icon:before { content: "\f2f5"; }
.dashboard .tegel.leersessie .tegel-icon:before { content: "\f19d"; }
.dashboard .tegel.leersessies .tegel-icon:before { content: "\f03a"; }
.dashboard .tegel.chatbot .tegel-icon:before { content: "\e3b8";font-weight: 300; }



.app-laadscherm { position: fixed; inset: 0; z-index: 999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: rgb(255 255 255 / 92%); }
.app-laadscherm[hidden] { display: none; }
.app-spinner { width: 56px; height: 56px; border: 5px solid rgb(209 100 145 / 25%); border-top-color: var(--lichtblauw); border-radius: 50%; animation: app-draaien 0.9s linear infinite; }
.app-laadtekst { margin: 0; font-size: 16px; font-weight: 600; color: var(--lichtblauw); }
@keyframes app-draaien { to { transform: rotate(360deg); } }

.profiel .profielgegevens { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 20px; }
.profiel .profielgegevens dt { font-weight: 600; }
.profiel .profielgegevens dd { margin: 0; }
.profiel .sleutelbeheer { margin: 32px 0; padding: 20px; background: #fff; border-radius: 12px; }
.profiel .sleutelbeheer h2 { margin: 0 0 6px; font-size: 18px; }
.profiel .uitleg { margin: 0 0 16px; font-size: 14px; color: #777; }
.profiel .sleutellijst { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0 0 16px; padding: 0; }
.profiel .sleutelregel { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; background: #f7f7f7; border-radius: 10px; }
.profiel .sleutel-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.profiel .sleutel-label { font-weight: 600; font-size: 15px; }
.profiel .sleutel-datum { font-size: 13px; color: #888; }
.profiel .geen-sleutels { padding: 12px; font-size: 14px; color: #888; }
.profiel .knop-primair { width: 100%; padding: 16px; font-size: 16px; font-weight: 600; color: #fff; background: var(--groen); border: 0; border-radius: 10px; cursor: pointer; }
.profiel .knop-primair:disabled { background: #ccc; cursor: default; }
.profiel .knop-secundair { display: inline-block; padding: 12px 18px; font-size: 15px; font-weight: 600; color: var(--lichtblauw); text-decoration: none; border: 2px solid var(--lichtblauw); border-radius: 10px; }
.profiel .knop-verwijderen { flex: 0 0 auto; padding: 8px 12px; font-size: 13px; font-weight: 600; color: #b3261e; background: rgb(179 38 30 / 10%); border: 0; border-radius: 8px; cursor: pointer; }
.profiel .knop-uitloggen { display: block; margin-top: 24px; padding: 14px; font-size: 15px; font-weight: 600; text-align: center; color: #b3261e; text-decoration: none; border: 2px solid #b3261e; border-radius: 10px; }
.profiel .app-melding { margin-top: 12px; padding: 12px 16px; font-weight: 600; border-radius: 10px; }
.profiel .app-melding[hidden] { display: none; }
.profiel .app-melding.gelukt { color: #fff; background: var(--groen); }
.profiel .app-melding.fout { color: #fff; background: #b3261e; }
.com-users-login__form + .webauthn-inlog { margin-top: 20px; }
.knop-webauthn { display: block; width: 72px; height: 72px; margin: 24px auto 0; padding: 0; background: #fff; border: 2px solid var(--groen); border-radius: 50%; cursor: pointer; }
.knop-webauthn:after { content: "\f577"; font-family: "Font Awesome 6 Pro"; font-weight: 900; font-size: 30px; color: var(--groen); }
.knop-webauthn:disabled { opacity: 0.5; cursor: default; }
.profiel .sleutelbeheer label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; font-size: 15px; }
.profiel .sleutelbeheer label > span { font-weight: 600; }
.profiel #sleutel-label { width: 100%; box-sizing: border-box; padding: 14px 16px; font-size: 16px; border: 1px solid #ddd; border-radius: 10px; background: #fff; }
.profiel #sleutel-label:focus { outline: none; border-color: var(--lichtblauw); box-shadow: 0 0 0 3px rgb(209 100 145 / 20%); }
div.com-users-login__submit.control-group {margin:0 0 10px;}
.com-users-login__reset {font-size:.7rem}

.meervoudige-authenticatie {margin:32px 0;padding:20px;background:#fff;border-radius:12px;}
.meervoudige-authenticatie > h2 {margin:0 0 18px;font-size:18px;}
#com-users-methods-reset-container {padding:14px 16px;margin-bottom:18px;background:#f5f8fb;border-radius:10px;font-size:14px;}
#com-users-methods-list-container {display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.com-users-methods-list-method {margin:0!important;padding:0;background:#f7f9fc;border:1px solid #e3e6ef;border-radius:12px;overflow:hidden;}
.com-users-methods-list-method-header {display:flex;align-items:center;gap:14px;padding:16px;background:#fff;border-bottom:1px solid #e8ebf0;}
.com-users-methods-list-method-image {display:flex;align-items:center;justify-content:center;flex:0 0 52px;width:52px;height:52px;padding:8px!important;background:#f5f8fb;border-radius:10px;}
.com-users-methods-list-method-image img {display:block;width:36px;height:36px;object-fit:contain;}
.com-users-methods-list-method-title {flex:1;}
.com-users-methods-list-method-title h2 {margin:0!important;padding:0!important;font-size:16px;line-height:20px;text-transform:none;color:var(--donkerblauw);border:0;}
.com-users-methods-list-method-title h2:before {display:none;}
.com-users-methods-list-method-records-container {padding:14px 16px 16px;}
.com-users-methods-list-method-info {min-height:40px;margin:0 0 12px!important;padding:0!important;font-size:13px;line-height:19px;color:#666;}
.com-users-methods-list-method-addnew-container {padding-top:12px;border-top:1px solid #e3e6ef;}
.com-users-methods-list-method-addnew {display:block;padding:10px 12px;color:var(--lichtblauw);font-size:13px;font-weight:600;text-align:center;background:#fff;border:1px solid var(--lichtblauw);border-radius:8px;}
.com-users-methods-list-method-addnew:hover {color:#fff;background:var(--lichtblauw);}
.com-users-methods-list-method-addnew .icon-plus-2 {display:none;}
.profiel-acties {display:flex;gap:12px;margin-top:32px;}
.profiel-acties .knop-primair, .profiel-acties .knop-secundair {flex:1;width:auto;margin:0;float:none;padding:16px;border-radius:10px;font-family:'Cedora';font-size:16px;font-weight:600;line-height:1;text-align:center;text-transform:uppercase;cursor:pointer;}
.profiel-acties .knop-primair {background:var(--groen);color:#fff;border:2px solid var(--groen);}
.profiel-acties .knop-secundair {background:#fff;color:var(--lichtblauw);border:2px solid var(--lichtblauw);}
.profiel-acties .knop-secundair:hover {background:var(--lichtblauw);color:#fff;box-shadow:none;}

ul {margin:0;padding:0; list-style: none;}
h1 {text-transform: uppercase; font-size:28px;  font-weight:700;  letter-spacing:.5px;  display:flex;  align-items:center;  gap:10px;  margin:0 0 30px;  padding-bottom:15px;  color:var(--lichtblauw);  border-bottom:1px solid transparent;  border-image:linear-gradient(90deg,var(--lichtblauw) ,var(--groen) ,transparent 100%) 1;}
div.locaties h1:before {content:"\f3c5";}
div.collegas h1:before {content:"\f0c0";}
div.login h1:before {content:"\f3c1";}
div.checklist h1:before {content:"\f0ae";font-weight: 300;}
div.coachmoments h1:before {content:'\e14f'; font-weight: 300;}
div.comments h1:before {content:'\f4b0'; font-weight: 300;}
div.support h1:before {content:'\f590'; font-weight: 300;}

.com-users-login__remember {margin:-20px 0 20px;}
.com-users-login__remember .form-check{display:inline-block;}
.com-users-login__remember .form-check-input{appearance:none;width:16px;height:16px;border:2px solid #ccc;border-radius:4px;cursor:pointer;position:relative;vertical-align:middle;margin:0 6px 0 0;}
.com-users-login__remember .form-check-input:checked{background:var(--groen);border-color:var(--groen);}
.com-users-login__remember .form-check-input:checked::after{content:'';position:absolute;left:3px;top:0;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.com-users-login__remember .form-check-label{font-size:13px;color:#444;vertical-align:middle;white-space:nowrap;}

.pagina-titel {position:relative;margin:0 0 28px;padding:0 0 16px 52px;font-size:30px;line-height:38px;font-weight:700;letter-spacing:.2px;text-transform:none;color:var(--donkerblauw);border:0;}
.pagina-titel:before {content:"\f19d";position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;width:38px;height:38px;font-family:"Font Awesome 6 Pro";font-size:18px;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--lichtblauw),var(--groenblauw));border-radius:10px;box-shadow:0 4px 10px rgb(38 150 229 / 18%);}
.pagina-titel:after {content:"";position:absolute;left:52px;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--lichtblauw),var(--groenblauw),transparent);border-radius:2px;}


h2 {font-size:20px;margin:0 0 10px 0;text-transform:uppercase;}
h3 {margin:0 0 10px 0;font-size: 20px;}
h4 {font-family:'Cedora';font-size:15px;line-height: 16px;margin:0 0 10px;}
.boxshadow {-webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.2);-moz-box-shadow: 3px 3px 5px rgba(0,0,0,0.2);box-shadow: 3px 3px 5px rgba(0,0,0,0.2);}
.heading {font-family:'Cedora';font-size:20px;text-transform:uppercase;margin:0 0 10px;position: relative;}
input[type=text], input[type=url], input[type=email], textarea {-webkit-border-radius:0;border-radius:0;-webkit-appearance: none;}
input[type=checkbox]{border:1px solid var(--lichtblauw)!important;border-radius:0!important;}
img {border:0;}

nav#nav:before {content:' ';background:#fff;width:100%;height: 50px;position: fixed;top: 0;left: 0;z-index:100;box-shadow: 7px 3px 10px rgba(0,0,0,0.35);}
div.logo-container.mobileonly {  background: #fff;  border-radius: 0 0 20px;  display: block;  position: fixed;  top: 0px;  left: -10px;  width: 260px;  z-index: 100; box-shadow: 7px 3px 10px rgba(0,0,0,0.35);}
div.logo-container.mobileonly a.logo { padding: 5px 40px; display: block;}
div.logo-container.mobileonly a.logo img { width: 100%; height: auto; display: block;}
nav div.menucontainer {position: fixed;top: 50px;background: var(--lichtblauw);height: 100%;display:none;width: 100%;z-index: 50;overflow: hidden;}

#nav .menumain {font-family:'Cedora';font-size:11pt;line-height:100%;margin:60px 0 0 0;    overflow-y: auto;   height: 100%;}
#nav .menumain li  {position:relative;padding:0;margin:0 0 0 0;}
#nav .menumain li a {display:block;padding: 20px 30px; position: relative; margin: 0; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.2);}
#nav .menumain li a:hover {background:rgba(255,255,255,0.3);}
nav .menumain a:before { margin-right: 10px; font-size: 18px; }
nav .menumain a.dashboard:before { content: "\f00a"; }
nav .menumain a.leersessie:before { content: "\f19d"; }
nav .menumain a.leersessies:before { content: "\f03a"; }
nav .menumain a.profiel:before { content: "\f007"; }
nav .menumain a.loggin:before { content: "\f2f5"; }
nav .menumain a.chatbot:before { content: "\e3b8";font-weight:300; }

div.mobilemenu:before {content:'\f141'; position: fixed;z-index: 100; top: 0; right: 25px; line-height: 50px; cursor: pointer; width: 50px; text-align: center;color: var(--groen);}

div.marketing-container, div.studiehulp {width: 100%; max-width: 900px; margin:120px auto 0; padding:0 30px 30px;position:relative;}
div.marketing-container.login {max-width:680px;}
div#system-message-container { margin-top: 50px}
joomla-alert {text-align:center;padding:40px 20px 20px}
div.alert-heading {font-weight:bold;}
div.control-group {margin:0 0 30px;}
input[type=password], input[type=text]:not(.choices__input), input[type=email], textarea {    width: 100%;    padding: 14px 18px;    border-radius: 10px;    border: 1px solid #e3e6ef;    background: #fff;    font-size: 15px;    color: #333;    outline: none;    transition: .2s;    box-shadow: 0 2px 6px rgba(0, 0, 0, .04);}
input[type=text][readonly],input[type=email][readonly],input[type=password][readonly],textarea[readonly]  { background: #f5f5f5;color: #666; cursor: not-allowed;}

.error, div.has-danger input {border-color:rgb(247, 130, 12)!important;}
input[type=radio] {display:inline-block;}
label.radio {display:inline-block;}
button[type=submit], input[type=submit], .button.cancel, a.btn-danger {display: inline-block;font-family: 'Cedora';color: #fff;border-radius: 10px 5px;padding: 20px 40px;font-size: 12px;line-height: 100%;cursor:pointer!important;text-align:center;text-transform: uppercase;}


div.marketing-container ::placeholder { color: #bbb!important; opacity: 1; }
.button, button[type=submit] {background: var(--lichtblauw); border-radius: 10px 5px;border: 2px solid #fff;}
button[type=submit]:hover, a.btn-danger:hover {background:var(--lichtblauw);box-shadow: 5px 5px 10px rgba(0,0,0,0.5);}
a.btn-danger {background:#a39292;float:right;}

input[type=password], input#password {width:calc(100% - 50px);}
button.input-password-toggle {    height: 36px;    cursor: pointer;  display:inline-block;  background: var(--lichtblauw);    border: 0;    border-radius: 5px;    color: #fff;vertical-align: top;    margin: 6px 0 0 8px;}
span.visually-hidden {display:none;}
button.input-password-toggle span.icon-eye:before {content:'\f06e';}
button.input-password-toggle span.icon-eye-slash:before {content:'\f070'}

.choices__list--dropdown {z-index:100!important;}
div.choices__inner {cursor: pointer!important;}
div.choices__item[aria-selected="true"]  {border-radius:5px;font-size:16px;border: 0 !important;color:#fff;padding: 10px;}
div.choices__item[data-value="algemeen"][aria-selected="true"] {background:var(--lichtblauw);}
.choices__button_joomla {text-indent: -9999px;background:rgba(255,255,255,0.5);border: 0;position:relative;color: #fff;margin-left:10px;width: 20px;height: 20px; border-radius: 100%;}
.choices__button_joomla:before {text-align: center;text-indent: 0;content: "×";display: block;  position: absolute;top:50%;transform:translateY(-50%);font-size:12px;right:5px;cursor:pointer;left:0;right:0;}
joomla-field-fancy-select select, .js-tiny-toggler-button  {display: none!important;}


a.button {padding:10px 20px 10px 40px;border-radius:5px;color:#fff;position:relative;display: inline-block;}
a.button.add {position:absolute;top:10px;right:10px;}
a.button.add:before {content: "\2b";margin:0 5px 0 0;position:absolute;left:10px;}
a.button:hover {background:#8c637b!important;box-shadow: 3px 3px 5px rgba(0,0,0,0.2);}
a.button.add.shoutout:before {content: "\f7f5";}
a.button.list.comments:before {content: '\f4b0';font-weight: 300;position: absolute;left: 10px;}
a.button.reply:before {content: "\f4ad";position: absolute;left: 10px;}


/* Algemeen */
.studiehulp .btn { display: inline-block; padding: 0.5rem 1rem; border: 1px solid #d0d7de; border-radius: 0.375rem; background-color: #f6f8fa; color: #24292f; text-decoration: none; cursor: pointer; font-size: 0.9rem; }
.studiehulp .btn:hover { background-color: #eaeef2; color: #24292f; text-decoration: none; }
.studiehulp .btn-primary { border-color: #1f6feb; background-color: #1f6feb; color: #fff; }
.studiehulp .btn-primary:hover { background-color: #1a5fd0; color: #fff; }
.studiehulp .btn-gevaar { border-color: #cf222e; background-color: #cf222e; color: #fff; }
.studiehulp .btn-gevaar:hover { background-color: #a40e26; color: #fff; }
.studiehulp-button { display: inline-block; padding: 0.5rem 1rem; border: 1px solid #d0d7de; border-radius: 0.375rem; background-color: #f6f8fa; color: #24292f; text-decoration: none; cursor: pointer; font-size: 0.9rem; }
.studiehulp-button:hover { background-color: #eaeef2; color: #24292f; text-decoration: none; }
.studiehulp-intro { position: relative; margin: 0 0 22px; padding: 14px 16px 14px 44px; border-left: 4px solid var(--lichtblauw); border-radius: 10px; background: linear-gradient(135deg, #fff, #f7fbff); box-shadow: 0 2px 8px rgb(11 56 102 / 5%); color: #667085; font-size: 16px; line-height: 24px; }
.studiehulp-intro:before { content: "\f05a"; position: absolute; left: 15px; top: 15px; font-family: "Font Awesome 6 Pro"; font-weight: 900; font-size: 18px; color: var(--lichtblauw); }
.studiehulp-meta { margin: 0; color: #6c757d; font-size: 0.9rem; }
.studiehulp-leeg { padding: 1rem; border: 1px dashed #d0d7de; border-radius: 0.375rem; color: #57606a; }
.studiehulp-badge { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.4rem; border-radius: 0.75rem; background-color: #ddf4ff; color: #0969da; font-size: 0.75rem; font-weight: 600; }
.studiehulp-badge:before { content: "\f4ad"; margin-right: 0.25rem; font-size: 0.7rem; }
.studiehulp-totaal { margin-top: 10px; font-size: 0.8rem; }

/* Modal */
.studiehulp-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; background-color: rgba(27, 31, 36, 0.5); }
.studiehulp-modal[hidden] { display: none; }
.studiehulp-modal-venster { width: 100%; max-width: 24rem; padding: 1.5rem; border-radius: 0.5rem; background-color: #fff; box-shadow: 0 8px 24px rgba(27, 31, 36, 0.25); }
.studiehulp-modal-titel { margin: 0 0 0.5rem; font-size: 1.1rem; }
.studiehulp-modal-tekst { margin: 0 0 1.25rem; color: #57606a; }
.studiehulp-modal-acties { display: flex; gap: 0.5rem; justify-content: flex-end; }
.studiehulp-modal .btn { display: inline-block; padding: 0.5rem 1rem; border: 1px solid #d0d7de; border-radius: 0.375rem; background-color: #f6f8fa; color: #24292f; cursor: pointer; font-size: 0.9rem; }
.studiehulp-modal .btn:hover { background-color: #eaeef2; }
.studiehulp-modal .btn-gevaar { border-color: #cf222e; background-color: #cf222e; color: #fff; }
.studiehulp-modal .btn-gevaar:hover { background-color: #a40e26; color: #fff; }

/* Keuzelijst (chats en studiebot) */
.studiehulp-keuze { position: relative; flex: 1; min-width: 12rem; }
.studiehulp-keuze-knop { display: flex; gap: 0.5rem; align-items: center; justify-content: space-between; width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #d0d7de; border-radius: 0.375rem; background-color: #fff; color: #24292f; cursor: pointer; font: inherit; text-align: left; }
.studiehulp-keuze-knop:hover { border-color: #8c959f; }
.studiehulp-keuze-knop:after { content: "\f078"; color: #8c959f; font-size: 0.7rem; }
.studiehulp-keuze-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studiehulp-keuze-lijst { position: absolute; z-index: 20; top: calc(100% + 0.25rem); left: 0; right: 0; max-height: 18rem; overflow-y: auto; list-style: none; margin: 0; padding: 0.25rem; border: 1px solid #d0d7de; border-radius: 0.375rem; background-color: #fff; box-shadow: 0 8px 24px rgba(27, 31, 36, 0.15); }
.studiehulp-keuze-lijst li { margin: 0; padding: 0; border: 0; }
.studiehulp-keuze-lijst a { display: flex; gap: 0.75rem; align-items: baseline; justify-content: space-between; padding: 0.45rem 0.6rem; border-radius: 0.25rem; color: #24292f; text-decoration: none; font-size: 0.9rem; }
.studiehulp-keuze-lijst a:hover { background-color: #f6f8fa; color: #24292f; text-decoration: none; }
.studiehulp-keuze-lijst li.is-actief a { background-color: #ddf4ff; color: #0969da; font-weight: 600; }
.studiehulp-keuze-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studiehulp-keuze-datum { color: #8c959f; font-size: 0.8rem; white-space: nowrap; }

/* Start leersessie: formulier */
.studiehulp-leersessie-form { max-width: 40rem; }
.studiehulp-leersessie-form .control-group { margin-bottom: 1rem; }
.studiehulp-leersessie-form .control-label label { display: block; margin-bottom: 0.25rem; font-weight: 600; }
.studiehulp-leersessie-form input[type="text"] { width: 100%; padding: 0.5rem; border: 1px solid #d0d7de; border-radius: 0.375rem; font: inherit; }
.studiehulp-leersessie-form input[type="number"] { width: 8rem; padding: 0.5rem; border: 1px solid #d0d7de; border-radius: 0.375rem; font: inherit; }
.studiehulp-leersessie-form select { width: 100%; padding: 0.5rem; border: 1px solid #d0d7de; border-radius: 0.375rem; font: inherit; }
.studiehulp-leersessie-form .form-control-feedback { display: block; color: #82071e; font-size: 0.85rem; font-weight: 400; }
.studiehulp-paginas { display: flex; gap: 1rem; }
.studiehulp-niveau-readonly { display: flex; gap: 0.5rem; align-items: center; }
.studiehulp-niveau-waarde { font-weight: 600; }
.studiehulp-niveau-bewerken { padding: 0.25rem 0.5rem; border: 1px solid #d0d7de; border-radius: 0.375rem; background-color: #f6f8fa; color: #57606a; cursor: pointer; line-height: 1; }
.studiehulp-niveau-bewerken:before { content: "\f303"; }
.studiehulp-niveau-bewerken:hover { background-color: #eaeef2; color: #24292f; }
.studiehulp-niveau-select select { width: auto; min-width: 14rem; }
.studiehulp-niveau-melding { margin-top: 0.25rem; color: #82071e; font-size: 0.85rem; }
.studiehulp-niveau-melding:empty { display: none; }
.studiehulp-niveau-uitleg { margin-top: 0.25rem; color: #6c757d; font-size: 0.85rem; }
.studiehulp-upload-knoppen { display: flex; gap: 40px; margin-bottom: 0.75rem; }
.studiehulp-upload-knoppen .btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 1 50%; max-width: 200px; height: 3.25rem; padding: 0; border: 1px solid #d0d7de; border-radius: 0.375rem; background-color: #f6f8fa; color: #24292f; cursor: pointer; font-size: 1.4rem; }
.studiehulp-upload-knoppen .btn:hover { background-color: #eaeef2; }
#studiehulp-kies-bestanden:before { content: "\f07b"; }
#studiehulp-maak-foto:before { content: "\f030"; }
.studiehulp-bestandenlijst { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.studiehulp-bestandenlijst:empty { display: none; }
.studiehulp-bestandenlijst li { display: flex; gap: 0.5rem; align-items: center; justify-content: space-between; padding: 0.35rem 0; border-bottom: 1px solid #eaeef2; font-size: 0.9rem; }
.studiehulp-bestand-verwijderen { padding: 0; border: 0; background: none; color: #82071e; cursor: pointer; font-size: 1.2rem; line-height: 1; }
.studiehulp-veld-uitleg { margin-top: 0.25rem; color: #6c757d; font-size: 0.85rem; }
.studiehulp-upload-melding { margin: 8px 0 0; color: #b91c1c; font-weight: 600; }
.studiehulp-upload-melding:empty { display: none; }
.studiehulp-form-actions { display: flex; gap: 0.5rem; align-items: center; margin-top: 1.5rem; }
.studiehulp-form-actions .btn-primary { border-color: var(--lichtblauw); background-color: var(--lichtblauw); color: #fff; }
.studiehulp-form-actions .btn-primary:hover { background-color: var(--donkerblauw); color: #fff; }

/* Start leersessie: verwerken */
.studiehulp-flow { padding: 22px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; box-shadow: 0 4px 18px rgba(15, 23, 42, .06); }
.studiehulp-flow[hidden] { display: none; }
.studiehulp-flow h1 { margin: 0 0 4px; }
.studiehulp-flow-stappen { display: flex; gap: 8px; margin: 18px 0 14px; padding: 0; list-style: none; counter-reset: studiehulp-stap; }
.studiehulp-flow-stap { display: flex; flex: 1 1 0; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #f1f5f9; color: #94a3b8; font-size: 14px; font-weight: 600; counter-increment: studiehulp-stap; }
.studiehulp-flow-stap::before { content: counter(studiehulp-stap); flex: 0 0 26px; width: 26px; height: 26px; line-height: 26px; border-radius: 50%; background: #e2e8f0; color: #64748b; text-align: center; font-size: 13px; }
.studiehulp-flow-stap.is-actief { background: #eff6ff; color: #1d4ed8; }
.studiehulp-flow-stap.is-actief::before { background: #3b82f6; color: #fff; }
.studiehulp-flow-stap.is-klaar { background: #ecfdf5; color: #047857; }
.studiehulp-flow-stap.is-klaar::before { content: "\f00c"; font-family: "Font Awesome 6 Pro"; font-weight: 900; background: #10b981; color: #fff; }
.studiehulp-flow-balk { position: relative; height: 10px; border-radius: 10px; background: #e2e8f0; overflow: hidden; }
.studiehulp-flow-vulling { display: block; width: 0; height: 100%; border-radius: 10px; background: linear-gradient(90deg, #3b82f6, #14b8a6); transition: width .4s ease; }
.studiehulp-flow-balk.is-onbepaald .studiehulp-flow-vulling { position: absolute; top: 0; width: 35%; animation: studiehulp-onbepaald 1.4s ease-in-out infinite; }
.studiehulp-flow-balk.is-fout .studiehulp-flow-vulling { background: #ef4444; animation: none; }
@keyframes studiehulp-onbepaald { 0% { left: -35%; } 100% { left: 100%; } }
.studiehulp-flow-regel { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 8px 0 16px; }
.studiehulp-flow-status { margin: 0; color: #0f172a; font-weight: 600; }
.studiehulp-flow-tijd { margin: 0; color: #64748b; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.studiehulp-flow-paginas { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; list-style: none; }
.studiehulp-flow-pagina { position: relative; width: 64px; height: 86px; border: 2px solid #e2e8f0; border-radius: 8px; background-color: #f8fafc; background-size: cover; background-position: top; transition: border-color .2s ease, opacity .2s ease; }
.studiehulp-flow-pagina.is-pending { opacity: .5; }
.studiehulp-flow-pagina.is-bezig { border-color: #3b82f6; }
.studiehulp-flow-pagina.is-done { border-color: #10b981; }
.studiehulp-flow-pagina.is-error { border-color: #ef4444; }
.studiehulp-flow-pagina.is-pdf::before { content: "\f1c1"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: "Font Awesome 6 Pro"; font-weight: 900; font-size: 26px; color: #94a3b8; }
.studiehulp-flow-pagina::after { position: absolute; right: -9px; bottom: -9px; width: 24px; height: 24px; line-height: 24px; border-radius: 50%; font-family: "Font Awesome 6 Pro"; font-weight: 900; font-size: 12px; text-align: center; color: #fff; }
.studiehulp-flow-pagina.is-bezig::after { content: "\f110"; background: #3b82f6; animation: studiehulp-draai 1s linear infinite; }
.studiehulp-flow-pagina.is-done::after { content: "\f00c"; background: #10b981; }
.studiehulp-flow-pagina.is-error::after { content: "\f12a"; background: #ef4444; }
@keyframes studiehulp-draai { to { transform: rotate(360deg); } }
.studiehulp-flow-pagina-nummer { position: absolute; left: 4px; top: 4px; padding: 0 6px; border-radius: 8px; background: rgba(15, 23, 42, .7); color: #fff; font-size: 11px; }
.studiehulp-flow-fout { margin-top: 18px; padding: 14px 16px; border-left: 4px solid #ef4444; border-radius: 12px; background: #fef2f2; }
.studiehulp-flow-fout-titel { margin: 0 0 6px; color: #b91c1c; font-weight: 700; }
.studiehulp-flow-fout-lijst { margin: 0 0 8px; padding-left: 18px; }
.studiehulp-flow-fout-code { margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: #fee2e2; color: #991b1b; font-family: monospace; font-size: 12px; }
.studiehulp-flow-fout-uitleg { margin: 0 0 8px; color: #475569; font-size: 14px; }
.studiehulp-flow-details { margin-bottom: 12px; font-size: 13px; }
.studiehulp-flow-details summary { cursor: pointer; color: #64748b; }
.studiehulp-flow-details pre { margin: 6px 0 0; padding: 8px 10px; border: 1px solid #fecaca; border-radius: 8px; background: #fff; font-size: 12px; white-space: pre-wrap; word-break: break-word; }
.studiehulp-flow-fout-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }

/* Resultaatscherm: kop en bladzijden */
.studiehulp-result { max-width: 45rem; }
.studiehulp-result-kop { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; }
.studiehulp-result-kop h1 { margin-bottom: 0.30rem; }
.studiehulp-result-titel { flex: 1; }
.studiehulp-result-knoppen { display: flex; flex: 0 0 auto; gap: 0.35rem; }
.studiehulp-result-knoppen .studiehulp-sessie-actie { padding: 0.4rem 0.6rem; border: 1px solid #d0d7de; border-radius: 0.375rem; background-color: #f6f8fa; }
.studiehulp-terug { flex: 0 0 auto; padding: 0.4rem 0.6rem; border: 1px solid #d0d7de; border-radius: 0.375rem; background-color: #f6f8fa; color: #57606a; text-decoration: none; }
.studiehulp-terug:hover { background-color: #eaeef2; color: #24292f; text-decoration: none; }
.studiehulp-terug:before { content: "\f00b"; }
.studiehulp-bladzijden { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.studiehulp-bladzijde { position: relative; width: 3.5rem; height: 4.75rem; padding: 0; border: 1px solid #d0d7de; border-radius: 0.25rem; background-color: #f6f8fa; background-position: center top; background-size: cover; cursor: pointer; }
.studiehulp-bladzijde:hover { border-color: #1f6feb; }
.studiehulp-bladzijde.is-pdf { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.studiehulp-bladzijde.is-pdf:before { content: "\f1c1"; color: #cf222e; font-size: 1.4rem; }
.studiehulp-bladzijde-nummer { position: absolute; right: 0; bottom: 0; padding: 0 0.25rem; border-radius: 0.25rem 0 0.25rem 0; background-color: rgba(27, 31, 36, 0.7); color: #fff; font-size: 0.7rem; }

/* Resultaatscherm: tabs en panelen */
#studiehulp-tabs { display: inline-flex; flex-wrap: nowrap; width: auto; max-width: 100%; gap: 0.25rem; margin: 0 0 1.25rem; padding: 0.3rem; overflow-x: auto; border: 1px solid #e3e9f3; border-radius: 999px; background: #eef3fd; scrollbar-width: none; }
#studiehulp-tabs::-webkit-scrollbar { display: none; }
#studiehulp-tabs .studiehulp-tab { display: inline-flex; align-items: center; gap: 0.45rem; flex: 0 0 auto; padding: 0.5rem 1rem; border: 0; border-radius: 999px; background: transparent; color: #5b6b82; font: inherit; font-weight: 600; font-size: 0.95rem; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
#studiehulp-tabs .studiehulp-tab:hover { background: rgba(255, 255, 255, 0.6); color: #1d4fc4; }
#studiehulp-tabs .studiehulp-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.3); }
#studiehulp-tabs .studiehulp-tab.is-actief { background: #fff; color: #13306b; box-shadow: 0 2px 8px -2px rgba(19, 48, 107, 0.3); }
#studiehulp-tabs .studiehulp-tab span { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; padding: 0.1rem 0.4rem; border-radius: 999px; background: #d3e0f7; color: #3f5170; font-size: 0.75rem; font-weight: 700; }
#studiehulp-tabs .studiehulp-tab:hover span { background: #c5d7f5; }
#studiehulp-tabs .studiehulp-tab.is-actief span { background: #2f6fed; color: #fff; }

.studiehulp-tab:hover { color: #24292f; }
.studiehulp-tab.is-actief { border-bottom-color: #1f6feb; color: #1f6feb; }
.studiehulp-telling { display: inline-block; margin-left: 0.25rem; padding: 0 0.35rem; border-radius: 0.75rem; background-color: #eaeef2; color: #57606a; font-size: 0.75rem; }
.studiehulp-paneel { display: none; }
.studiehulp-paneel.is-actief { display: block; }
.studiehulp-pagina { flex: 1; text-align: right; color: #8c959f; font-size: 0.8rem; font-weight: 400; }
.studiehulp-pagina:empty { display: none; }
.studiehulp-onderwerp h3 .studiehulp-pagina { margin-left: auto; padding-left: 1rem; }


.studiehulp-onderwerp h3 { display: flex; align-items: baseline; gap: 0.75rem; }
.studiehulp-pagina { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: auto; flex: 0 0 auto; padding: 0.15rem 0.5rem; border: 1px solid #e3e9f3; border-radius: 999px; background: #f6f8fc; color: #5b6b82; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.studiehulp-pagina::before { content: ""; width: 0.85em; height: 0.85em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm0 2 4 4h-4V4zM8 13h8v2H8v-2zm0 4h8v2H8v-2zm0-8h3v2H8V9z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm0 2 4 4h-4V4zM8 13h8v2H8v-2zm0 4h8v2H8v-2zm0-8h3v2H8V9z'/%3E%3C/svg%3E") center / contain no-repeat; }

.studiehulp-blok { margin-bottom: 0.5rem; border: 1px solid #eaeef2; border-radius: 0.375rem; background-color: #fff; }
.studiehulp-blok summary { display: flex; gap: 0.5rem; align-items: baseline; justify-content: space-between; padding: 0.6rem 0.85rem; cursor: pointer; font-weight: 600; list-style: none; }
.studiehulp-blok summary:before { content: "\f078"; order: 2; color: #8c959f; font-size: 0.7rem; transition: transform 0.2s ease; }
.studiehulp-blok[open] summary:before { transform: rotate(180deg); }
.studiehulp-blok summary::-webkit-details-marker { display: none; }
.studiehulp-blok p { margin: 0; padding: 0 0.85rem 0.85rem; }
.studiehulp-terms { margin: 0; }
.studiehulp-terms dt { display: flex; justify-content: space-between; margin-top: 0.75rem; padding: 0.5rem 0 0.1rem; font-weight: 600; }
.studiehulp-terms dd { margin: 0 0 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid #eaeef2; color: #424a53; }
.studiehulp-questions { margin: 0; padding: 0; list-style: none; }
.studiehulp-questions li { margin-bottom: 0.5rem; }
.studiehulp-questions summary { cursor: pointer; color: #1f6feb; }
.studiehulp-antwoord { color: #0a5c2e; }
.studiehulp-focus { margin: 0; padding-left: 1.1rem; }
.studiehulp-focus li { margin-bottom: 0.4rem; }

/* Resultaatscherm: quiz */
.studiehulp-quiz { padding: 20px 22px 22px; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; box-shadow: 0 4px 18px rgba(15, 23, 42, .06); }
.studiehulp-quiz-balk { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; color: #6c757d; font-size: 0.85rem; }
.studiehulp-quiz-balk #studiehulp-quiz-voortgang { padding: 3px 12px; border-radius: 20px; background: #eff6ff; color: #1d4ed8; font-size: 13px; font-weight: 600; }
.studiehulp-quiz-score { padding: 3px 12px; border-radius: 20px; background: #ecfdf5; color: #047857; font-size: 13px; font-weight: 600; }
.studiehulp-vraag { display: none; }
.studiehulp-vraag.is-actief { display: block; }
.studiehulp-vraagtekst { margin: 0 0 18px; color: #0f172a; font-size: 1.2rem; font-weight: 700; line-height: 1.4; }
.studiehulp-antwoorden { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; counter-reset: studiehulp-optie; }
.studiehulp-optie { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; border: 2px solid #e2e8f0; border-radius: 12px; background: #f8fafc; color: #0f172a; font-size: 15px; text-align: left; cursor: pointer; counter-increment: studiehulp-optie; transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease; }
.studiehulp-optie::before { content: counter(studiehulp-optie, upper-alpha); flex: 0 0 32px; width: 32px; height: 32px; line-height: 32px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #475569; font-weight: 700; text-align: center; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.studiehulp-optie:hover:not(:disabled) { border-color: #3b82f6; background: #eff6ff; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(59, 130, 246, .15); }
.studiehulp-optie:hover:not(:disabled)::before { border-color: #3b82f6; background: #3b82f6; color: #fff; }
.studiehulp-optie:disabled { cursor: default; opacity: 0.7; }
.studiehulp-optie.is-goed { border-color: #1a7f37; background-color: #dafbe1; color: #0a5c2e; opacity: 1; }
.studiehulp-optie.is-fout { border-color: #cf222e; background-color: #ffebe9; color: #82071e; opacity: 1; }
.studiehulp-uitleg { margin-top: 16px; padding: 14px 16px; border-left: 4px solid #3b82f6; border-radius: 12px; background: #f1f5f9; }
.studiehulp-uitleg p { margin: 0 0 8px; }
.studiehulp-pagina-regel { color: #8c959f; font-size: 0.8rem; }
.studiehulp-uitleg .studiehulp-pagina-regel { color: #64748b; font-size: 13px; }
.studiehulp-volgende { margin-top: 6px; }
.studiehulp-quiz-uitslag { padding: 16px 0 4px; text-align: center; }
.studiehulp-cijfer { margin: 0; color: #1d4ed8; font-size: 3.5rem; font-weight: 800; line-height: 1; }
.studiehulp-cijfer-toelichting { margin: 8px 0 16px; color: #475569; }

/* Resultaatscherm: acties onderaan */
.studiehulp-result-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #eaeef2; }
.studiehulp-result-acties .studiehulp-sessie-verwijderen { margin-left: auto; color: #dc2626; }
.studiehulp-result-acties .studiehulp-sessie-verwijderen:hover { background-color: #fef2f2; color: #dc2626; }
.studiehulp-knop-chat { background: linear-gradient(135deg, var(--lichtblauw), var(--groenblauw)); }
.studiehulp-knop-chat:before { content: "\e3b8"; margin-right: 0.4rem; font-weight: 300; }

/* Chat */
.studiehulp-chat { margin-top: 1rem; }
.studiehulp-chat-kop { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.75rem; }
.studiehulp-chat-verwijderen { padding: 0.3rem 0.5rem; border: 0; border-radius: 0.375rem; background: none; color: #8c959f; cursor: pointer; font-size: 0.95rem; }
.studiehulp-chat-verwijderen:hover { background-color: #ffebe9; color: #cf222e; }
.studiehulp-chat-verwijderen:before { content: "\f1f8"; }
.studiehulp-berichten { max-height: 24rem; overflow-y: auto; margin-bottom: 0.75rem; padding: 0.85rem; border: 1px solid #eaeef2; border-radius: 0.375rem; background-color: #fff; }
.studiehulp-bericht { margin-bottom: 0.75rem; padding: 0.6rem 0.85rem; border-radius: 0.5rem; white-space: pre-wrap; }
.studiehulp-bericht-user { margin-left: 2rem; background-color: #ddf4ff; }
.studiehulp-bericht-assistant { margin-right: 2rem; background-color: #f6f8fa; }
.studiehulp-bericht-fout { background-color: #ffebe9; color: #82071e; }
.studiehulp-invoer { display: flex; gap: 0.5rem; align-items: flex-end; }
.studiehulp-invoer textarea { flex: 1; padding: 0.6rem; border: 1px solid #d0d7de; border-radius: 0.375rem; font: inherit; resize: vertical; }
.studiehulp-bron { display: block; margin-top: 0.4rem; color: #1f6feb; font-size: 0.8rem; }

/* Studiebot */
.studiehulp-bot { max-width: 45rem; }
.studiehulp-bot-sessies { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
.studiehulp-bot-sessies select { flex: 1; min-width: 12rem; padding: 0.5rem; border: 1px solid #d0d7de; border-radius: 0.375rem; font: inherit; }
.studiehulp-bot-berichten { min-height: 18rem; max-height: 60vh; }
.studiehulp-bot-onderbalk { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: flex-end; margin: 0.35rem 0 0.75rem; }
.studiehulp-bot-verwijderen { padding: 0.3rem 0.5rem; border: 0; border-radius: 0.375rem; background: none; color: #8c959f; cursor: pointer; font-size: 0.95rem; }
.studiehulp-bot-verwijderen:hover { background-color: #ffebe9; color: #cf222e; }
.studiehulp-bot-verwijderen:before { content: "\f1f8"; }
.studiehulp-bot-suggesties { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.studiehulp-suggestie { padding: 0.35rem 0.75rem; border: 1px solid #d0d7de; border-radius: 1rem; background-color: #fff; color: #57606a; cursor: pointer; font-size: 0.85rem; }
.studiehulp-suggestie:hover { border-color: #1f6feb; color: #1f6feb; }

/* Mijn leersessies */
.studiehulp-leersessies { max-width: 45rem; }
.studiehulp-vakfilter { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1rem; }
.studiehulp-vakfilter select { min-width: 14rem; padding: 0.5rem; border: 1px solid #d0d7de; border-radius: 0.375rem; font: inherit; }
.studiehulp-filtertelling { color: #8c959f; font-size: 0.85rem; }
.studiehulp-archiefknop { margin-left: auto; color: #57606a; font-size: 0.85rem; text-decoration: none; }
.studiehulp-archiefknop:hover { color: #1f6feb; }
.studiehulp-archiefknop:before { content: "\f187"; margin-right: 0.3rem; }
.studiehulp-sessielijst { list-style: none; margin: 0; padding: 0; border: 0; background: none; overflow: visible; }
.studiehulp-sessie { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 18px; padding: 0; border: 1px solid #eaeef2; border-radius: 0.375rem; background-color: #fff; }
.studiehulp-sessie[hidden] { display: none; }
.studiehulp-sessie:last-child { margin-bottom: 0; }
.studiehulp-sessie-thumb { flex: 0 0 2.25rem; height: 3rem; margin: 0.5rem 0 0.5rem 0.85rem; border-radius: 0.25rem; background-color: #eaeef2; background-position: center top; background-size: cover; }
.studiehulp-sessie-thumb.is-leeg:before { content: "\f15c"; display: flex; align-items: center; justify-content: center; height: 100%; color: #8c959f; font-size: 0.9rem; }
.studiehulp-sessie-link { display: flex; flex: 1; align-items: center; gap: 0.75rem; min-width: 0; padding: 0.5rem 0.85rem; color: #24292f; font-size: 0.9rem; text-decoration: none; }
.studiehulp-sessie-link:hover { background-color: #f6f8fa; color: #24292f; text-decoration: none; }
.studiehulp-sessie-vak { flex: 0 0 8rem; overflow: hidden; color: #1f6feb; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.studiehulp-sessie-titel { display: block; flex: 0 0 8rem; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.studiehulp-sessie-meta { display: flex; flex: 1; flex-wrap: wrap; gap: 0.35rem 0.75rem; color: #6c757d; font-size: 0.8rem; }
.studiehulp-sessie-datum { flex: 0 0 4rem; padding-left: 18px; color: #8c959f; font-size: 0.8rem; text-align: right; white-space: nowrap; }
.studiehulp-sessie-verwijderen { flex: 0 0 auto; padding: 0 0.85rem; border: 0; background: none; color: #8c959f; cursor: pointer; font-size: 0.9rem; text-decoration: none; }
.studiehulp-sessie-verwijderen:hover { background-color: #ffebe9; color: #cf222e; text-decoration: none; }
.studiehulp-sessie-verwijderen:before { content: "\f1f8"; }
.studiehulp-sessie-actie { flex: 0 0 auto; padding: 0 0.85rem; border: 0; background: none; color: #8c959f; cursor: pointer; font-size: 0.9rem; }
.studiehulp-sessie-actie:hover { background-color: #f6f8fa; color: #24292f; }
.studiehulp-sessie-actie:before { content: "\f187"; }
.studiehulp-sessie-actie.is-herstel:before { content: "\f0e2"; }
.studiehulp-sessielijst .studiehulp-sessie-verwijderen { border-left: 1px solid #eaeef2; }
.studiehulp-sessielijst .studiehulp-sessie-actie { border-left: 1px solid #eaeef2; }

/* Lightbox */
.studiehulp-lightbox { position: fixed; inset: 0; z-index: 1100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 2rem; overflow: hidden; background-color: rgba(27, 31, 36, 0.85); }
.studiehulp-lightbox[hidden] { display: none; }
.studiehulp-lightbox img { max-width: 100%; max-height: 85vh; border-radius: 0.375rem; background-color: #fff; cursor: zoom-in; transform-origin: center center; transition: transform 0.12s ease-out; will-change: transform; }
.studiehulp-lightbox img.is-ingezoomd { cursor: grab; }
.studiehulp-lightbox img.is-ingezoomd:active { cursor: grabbing; }
.studiehulp-lightbox-bijschrift { color: #fff; font-size: 0.85rem; }
.studiehulp-lightbox-sluiten { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background-color: rgba(255, 255, 255, 0.15); color: #fff; cursor: pointer; font-size: 1.1rem; }
.studiehulp-lightbox-sluiten:hover { background-color: rgba(255, 255, 255, 0.3); }
.studiehulp-lightbox-sluiten:before { content: "\f00d"; }

/* Controleren of deze nog in gebruik zijn */
.studiehulp-section { margin-bottom: 1.25rem; }
.studiehulp-section h3 { margin-bottom: 0.25rem; font-size: 1.05rem; }
.studiehulp-pages { color: #6c757d; font-size: 0.85rem; }
.studiehulp-question { margin-bottom: 0.35rem; font-weight: 600; }
.studiehulp-options { margin: 0 0 0.5rem 1.25rem; }
.studiehulp-quiz-eindscore { margin-bottom: 1rem; font-size: 2rem; font-weight: 600; }
.studiehulp-sessies { margin-bottom: 1.5rem; }
.studiehulp-filters { margin-bottom: 1rem; }
.studiehulp-sessie-cijfers { display: flex; flex: 0 0 auto; align-items: center; gap: 0.75rem; color: #57606a; font-size: 0.8rem; }
.studiehulp-sessie-berichten:before { content: "\f4ad"; margin-right: 0.3rem; }
.studiehulp-bot-wissen { padding: 0; border: 0; background: none; color: #8c959f; cursor: pointer; font-size: 0.85rem; text-decoration: underline; }
.studiehulp-bot-wissen:hover { color: #cf222e; }
.studiehulp-gesprek-verwijderen { padding: 0.3rem 0.5rem; border: 0; border-radius: 0.375rem; background: none; color: #8c959f; cursor: pointer; font-size: 0.95rem; }
.studiehulp-gesprek-verwijderen:hover { background-color: #ffebe9; color: #cf222e; }
.studiehulp-gesprek-verwijderen:before { content: "\f1f8"; font-weight: 300; }

.studiehulp-kopknoppen { order: 99; display: inline-flex; gap: 0.35rem; margin-left: auto; }
.studiehulp-terugknop { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border: 1px solid #d0d7de; border-radius: 0.3rem; background-color: #f6f8fa; color: #57606a; font-size: 0.75rem; text-decoration: none; }
.studiehulp-terugknop:hover { background-color: #eaeef2; color: #24292f; text-decoration: none; }
.studiehulp-terugknop:before { content: "\f060";font-weight: 300; font-size:16px; }
.studiehulp-homeknop { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border: 1px solid #d0d7de; border-radius: 0.3rem; background-color: #f6f8fa; color: #57606a; font-size: 0.75rem; text-decoration: none; }
.studiehulp-homeknop:hover { background-color: #eaeef2; color: #24292f; text-decoration: none; }
.studiehulp-homeknop:before { content: "\f015"; font-weight: 300; font-size:16px;}

.studiehulp-bericht-afbeelding { margin: 0.6rem 0 0; }
.studiehulp-bericht-afbeelding .studiehulp-afbeelding-zoom { position: relative; display: inline-block; max-width: 100%; padding: 0; border: 1px solid #d0d7de; border-radius: 0.375rem; background-color: #fff; overflow: hidden; cursor: zoom-in; line-height: 0; }
.studiehulp-bericht-afbeelding .studiehulp-afbeelding-zoom img { display: block; width: auto; max-width: 100%; height: auto; max-height: 220px; }
.studiehulp-bericht-afbeelding .studiehulp-afbeelding-zoom:after { content: "\f00e"; position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; background-color: rgba(15, 23, 42, .7); color: #fff; font-family: "Font Awesome 6 Pro"; font-weight: 900; font-size: 13px; text-align: center; transition: transform .15s ease; }
.studiehulp-bericht-afbeelding .studiehulp-afbeelding-zoom:hover:after { transform: scale(1.12); }
.studiehulp-bericht-afbeelding figcaption { margin-top: 0.25rem; color: #8c959f; font-size: 0.7rem; line-height: 1.3; }
.studiehulp-bericht-afbeelding figcaption a { color: inherit; text-decoration: none; }
.studiehulp-bericht-afbeelding figcaption a:hover { text-decoration: underline; }
.studiehulp-bot .studiehulp-bericht { white-space: normal; }
.studiehulp-bericht-tekst { white-space: pre-wrap; }

.studiehulp-typen { display: inline-flex; gap: 5px; align-items: center; height: 1.4rem; }
.studiehulp-typen span { width: 8px; height: 8px; border-radius: 50%; background-color: #8c959f; animation: studiehulp-stip 1.2s ease-in-out infinite; }
.studiehulp-typen span:nth-child(2) { animation-delay: .15s; }
.studiehulp-typen span:nth-child(3) { animation-delay: .3s; }
@keyframes studiehulp-stip { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }

.studiehulp-invoer-knoppen { display: flex; gap: 0.35rem; align-items: center; }
.studiehulp-bijlage-knop { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 1px solid #d0d7de; border-radius: 0.375rem; background-color: #f6f8fa; color: #57606a; cursor: pointer; font-size: 1rem; }
.studiehulp-bijlage-knop:hover { background-color: #eaeef2; color: #24292f; }
.studiehulp-bijlage-knop.is-bestand:before { content: "\f0c6"; }
.studiehulp-bijlage-knop.is-camera:before { content: "\f030"; }
.studiehulp-bijlage-voorbeeld { display: inline-flex; gap: 0.5rem; align-items: center; margin-bottom: 0.5rem; padding: 0.3rem 0.4rem 0.3rem 0.75rem; border: 1px solid #d0d7de; border-radius: 1rem; background-color: #fff; color: #24292f; font-size: 0.85rem; }
.studiehulp-bijlage-voorbeeld[hidden] { display: none; }
.studiehulp-bijlage-voorbeeld:before { content: "\f0c6"; color: #8c959f; }
.studiehulp-bijlage-naam { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studiehulp-bijlage-weg { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; padding: 0; border: 0; border-radius: 50%; background: none; color: #8c959f; cursor: pointer; }
.studiehulp-bijlage-weg:hover { background-color: #ffebe9; color: #cf222e; }
.studiehulp-bijlage-weg:before { content: "\f00d"; }
.studiehulp-bericht-bijlage { display: block; margin-bottom: 0.4rem; }
.studiehulp-bericht-bijlage.studiehulp-afbeelding-zoom { position: relative; display: inline-block; max-width: 100%; padding: 0; border: 1px solid #d0d7de; border-radius: 0.375rem; background-color: #fff; overflow: hidden; cursor: zoom-in; line-height: 0; }
.studiehulp-bericht-bijlage.studiehulp-afbeelding-zoom img { display: block; width: auto; max-width: 100%; height: auto; max-height: 160px; }
.studiehulp-bericht-bijlage.studiehulp-afbeelding-zoom:after { content: "\f00e"; position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; line-height: 26px; border-radius: 50%; background-color: rgba(15, 23, 42, .7); color: #fff; font-family: "Font Awesome 6 Pro"; font-weight: 900; font-size: 11px; text-align: center; }
.studiehulp-bericht-bijlage.is-pdf { color: #24292f; font-size: 0.85rem; text-decoration: none; }
.studiehulp-bericht-bijlage.is-pdf:before { content: "\f1c1"; margin-right: 0.35rem; color: #cf222e; }
.studiehulp-bericht-bijlage.is-pdf:hover { text-decoration: underline; }

.studiehulp-knop-chat[hidden] { display: none; }
.studiehulp-chat { margin-top: 1rem; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; box-shadow: 0 4px 18px rgba(15, 23, 42, .06); overflow: hidden; }
.studiehulp-chat[hidden] { display: none; }
.studiehulp-chat-paneelkop { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid #eaeef2; background: linear-gradient(135deg, #f7fbff, #fff); }
.studiehulp-chat-titel { display: flex; align-items: center; gap: 0.5rem; margin: 0; color: #0f172a; font-size: 1rem; font-weight: 700; }
.studiehulp-chat-titel:before { content: "\e3b8"; color: var(--lichtblauw); font-weight: 300; }
.studiehulp-chat-sluiten { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%; background: none; color: #57606a; cursor: pointer; }
.studiehulp-chat-sluiten:hover { background-color: #eaeef2; color: #24292f; }
.studiehulp-chat-sluiten:before { content: "\f00d"; }
.studiehulp-chat-inhoud { padding: 1rem; }
.studiehulp-chat .studiehulp-bericht { white-space: normal; }

.studiehulp-methode[hidden] { display: none; }
.studiehulp-kaft { margin-top: 0.75rem; padding: 0.85rem 1rem; border: 1px dashed #d0d7de; border-radius: 0.5rem; background-color: #f8fafc; }
.studiehulp-kaft[hidden] { display: none; }
.studiehulp-kaft .studiehulp-veld-uitleg { margin: 0 0 0.75rem; color: #24292f; font-size: 0.9rem; }
#studiehulp-kaft-kies:before { content: "\f03e"; }
#studiehulp-kaft-foto:before { content: "\f030"; }
.studiehulp-kaft-status { margin: 0.6rem 0 0; color: #57606a; font-size: 0.85rem; }
.studiehulp-kaft-status:empty { display: none; }
.studiehulp-kaft-status.is-fout { color: #b91c1c; font-weight: 600; }

.studiehulp-voorlezen { display: flex; align-items: center; gap: 0.35rem; width: fit-content; margin: 0 0 0.5rem auto; padding: 0.25rem 0.75rem; border: 1px solid #cddcfa; border-radius: 999px; background: #f5f8fe; color: #2f6fed; font: inherit; font-size: 0.85rem; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.studiehulp-voorlezen::before { content: "🔊"; font-size: 0.95em; opacity: 0.8; }
.studiehulp-voorlezen:hover { background: #eaf0fd; border-color: #a9c3f6; }
.studiehulp-voorlezen:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(47, 111, 237, 0.25); }
.studiehulp-voorlezen.is-bezig { background: #eaf0fd; border-color: #2f6fed; animation: studiehulp-voorlezen-ring 1.4s ease-out infinite; }
.studiehulp-voorlezen.is-bezig::before { content: "⏹"; opacity: 1; animation: studiehulp-voorlezen-icoon 1.4s ease-in-out infinite; }
.studiehulp-voorlezen[hidden] { display: none; }
@keyframes studiehulp-voorlezen-ring { 0% { box-shadow: 0 0 0 0 rgba(47, 111, 237, 0.5); } 70% { box-shadow: 0 0 0 8px rgba(47, 111, 237, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 111, 237, 0); } }
@keyframes studiehulp-voorlezen-icoon { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.studiehulp-cijfer-cirkel { position: relative; display: grid; place-items: center; width: 9rem; height: 9rem; margin: 0.5rem auto 0.75rem; }
.studiehulp-cijfer-cirkel svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.studiehulp-cijfer-spoor { fill: none; stroke: #e8eefb; stroke-width: 8; }
.studiehulp-cijfer-voortgang { fill: none; stroke: #2f6fed; stroke-width: 8; stroke-linecap: round; }
.studiehulp-cijfer-cirkel:has(.is-onvoldoende) .studiehulp-cijfer-voortgang { stroke: #e5484d; }
.studiehulp-cijfer-cirkel .studiehulp-cijfer { position: relative; margin: 0; text-align: center; font-variant-numeric: tabular-nums; }
.studiehulp-cijfer-cirkel.is-klaar .studiehulp-cijfer { animation: studiehulp-cijfer-pop 0.35s ease-out; }
@keyframes studiehulp-cijfer-pop { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }


.profielvelden select { width: 100%; padding: 0.7rem 0.9rem; border: 1px solid #dfe6f1; border-radius: 10px; background: #fff; color: #34425c; font: inherit; line-height: 1.3; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235b6b82'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.6rem center; background-size: 1.4rem; padding-right: 2.4rem; }
.profielvelden select:focus { outline: none; border-color: #2f6fed; box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.18); }
.profielblok { margin-top: 2rem; padding: 1.5rem; border: 1px solid #e3e9f3; border-radius: 16px; background: #fff; }
.profielblok h2 { margin: 0 0 1rem; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.04em; color: #13306b; }
.schoolzoeker { position: relative; }
.schoolzoeker input[type="search"] { width: 100%; padding: 0.7rem 0.9rem; border: 1px solid #dfe6f1; border-radius: 10px; font: inherit; }
.schoolzoeker input[type="search"]:focus { outline: none; border-color: #2f6fed; box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.18); }
.schoolresultaten { position: absolute; z-index: 20; left: 0; right: 0; max-height: 16rem; margin: 0.25rem 0 0; padding: 0; overflow-y: auto; list-style: none; border: 1px solid #dfe6f1; border-radius: 10px; background: #fff; box-shadow: 0 12px 30px -12px rgba(19, 48, 107, 0.35); }
.schoolresultaten li { border-bottom: 1px solid #f0f4fa; }
.schoolresultaten li:last-child { border-bottom: 0; }
.schoolresultaten button { display: block; width: 100%; padding: 0.6rem 0.9rem; border: 0; background: none; color: #34425c; font: inherit; text-align: left; cursor: pointer; }
.schoolresultaten button:hover { background: #eef3fd; color: #1d4fc4; }
.schoolresultaten .geen-resultaat { padding: 0.6rem 0.9rem; color: #6b7892; }
.schoolzoeker + .control-group select { display: none; }

#installInstructions {display: none}
button#install, div.ios.install {line-height: 18px;position:fixed;right:0;top: 50px;z-index: 49;background: var(--lichtblauw);color: #fff;font-family: 'Cedora', tahoma; border: 0; padding: 10px 10px 10px 45px; text-transform: uppercase; border-radius: 0 0 0 10px;  cursor: pointer; box-shadow: 7px 3px 10px rgba(0,0,0,0.35);    font-size: 13px;}
button#install:hover {background:var(--groen)}
button#install:before, div.ios.install:before {content:'\f0ed';font-family: 'Font Awesome 6 Sharp';font-weight: 100;position: fixed;right: 93px;top: 59px ;font-size: 18px;}




div.ios.install, div.ios.instructions {display:none;}
div.ios.instructions {position: fixed;margin: 0 auto;left: 0;right: 0;top: 50%;transform: translateY(-50%);width: 75%;max-width: 300px;    background: #8c637b; padding: 20px;color: #fff; border: 2px solid #ddd; border-radius: 10px;  font-size: 18px; line-height: 40px; font-weight: bold;}
div.ios.instructions span.share:before {content:'\e09c';font-weight:300;margin:0 10px;display:inline-block;}
div.ios.instructions span.start:before {content:'\f0fe';font-weight:300;margin:0 0 0 10px;display:inline-block;}

#pwa-update-message { position:fixed; left:16px; right:16px; bottom:16px; z-index:99999; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; background:#fff; border-radius:10px; box-shadow:0 4px 20px rgba(0,0,0,.18); font-size:15px; }
#pwa-update-message span { flex:1; }
#pwa-update-reload { border:0; border-radius:8px; padding:10px 14px; background:#d16491; color:#fff; font-weight:600; cursor:pointer; white-space:nowrap; }
#pwa-update-reload:active { transform:scale(.97); }
 



@media screen and (max-width: 900px) {

}

@media screen and (max-width: 900px) {

}

@media (display-mode: browser) {
  #installInstructions {
    display: block
  }
}

@media screen and (max-width: 1024px) {

}
@media screen and (max-width: 768px) {

}

@media screen and (max-width: 767px) {

  }

@media (max-width: 680px) {
  div.marketing-container {  margin: 140px auto 0;}
	.productlist .filterrij { flex-wrap: wrap; }
	.productlist .filterrij select { flex: 1 1 100%; }
	.productlist .productregel { display: grid; grid-template-columns: 56px 1fr; grid-template-areas: "foto tekst" "velden velden"; gap: 10px 12px; padding: 12px; }
	.productlist .regel-foto { grid-area: foto; width: 56px; }
	.productlist .regel-tekst { grid-area: tekst; }
	.productlist .regel-velden { grid-area: velden; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
	.productlist .snelveld, .productlist .statusknop { min-width: 0; padding: 8px 4px; font-size: 13px; }
  .studiehulp-kopknoppen { display: none; }
.studiehulp-flow-stappen { flex-direction: column; gap: 6px; }
.studiehulp-flow-stap { flex: none; padding: 8px 12px; }
.studiehulp-invoer { display: grid; gap: 0.5rem; }
	.studiehulp-invoer textarea { width: 100%; }
	.studiehulp-invoer-knoppen { display: flex; align-items: center; gap: 0.5rem; }
	.studiehulp-invoer-knoppen .btn-primary { margin-left: auto; }
  .studiehulp-bot-sessies { display: grid; gap: 0.5rem; }
	.studiehulp-keuze { min-width: 0; }
	.studiehulp-keuze-knop { width: 100%; }
	.studiehulp-keuze-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.studiehulp-keuze-lijst { left: 0; right: 0; width: auto; }
	.studiehulp-keuze-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.studiehulp-bot-sessies > .btn { width: 100%; text-align: center; }
  .studiehulp-sessie { gap: 0.6rem; padding: 0.75rem; }
	.studiehulp-sessie-thumb { width: 3rem; height: 4rem; flex: 0 0 auto; }
	.studiehulp-sessie-link { min-width: 0; display: grid; gap: 0.15rem; }
	.studiehulp-sessie-vak { font-size: 0.75rem; }
	.studiehulp-sessie-titel { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; }
	.studiehulp-sessie-ondertitel { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
	.studiehulp-sessie-meta { font-size: 0.8rem; }
	.studiehulp-sessie-tokens { display: none; }
	.studiehulp-sessie-datum { font-size: 0.75rem; }
	.studiehulp-sessie-actie { align-self: flex-start; flex: 0 0 auto; }
  	.pagina-titel { font-size: 1.35rem; }
	.studiehulp-bladzijden { gap: 0.4rem; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
	.studiehulp-bladzijden::-webkit-scrollbar { display: none; }
	.studiehulp-bladzijde { width: 3.25rem; height: 4.25rem; flex: 0 0 auto; }
	#studiehulp-tabs { display: flex; width: 100%; margin-bottom: 1rem; }
	#studiehulp-tabs .studiehulp-tab { padding: 0.45rem 0.8rem; font-size: 0.9rem; }
	.studiehulp-onderwerp h3 { flex-wrap: wrap; gap: 0.35rem; font-size: 1.05rem; }
	.studiehulp-pagina { margin-left: auto; }
	.studiehulp-voorlezen { font-size: 0.8rem; }
} 

@media screen and (max-width: 560px) {


}

@media screen and (max-width: 414px) {

} 

@media screen and (max-width: 360px) {

}

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */ 
  div.ios.install {display:block;}
  
}

@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); } }

@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-display: block;
  font-weight: 400;
  src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); }

@font-face {
  font-family: 'Font Awesome 6 Free';
  font-display: block;
  font-weight: 900;
  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }


 @font-face {
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 300;
    font-display: block;
    src: url("../webfonts/fa-light-300.woff2") format("woff2"), url("../webfonts/fa-light-300.ttf") format("truetype"); }
  
  
  @font-face {
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); }
  
  
  @font-face {
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }

  
  @font-face {
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    font-weight: 100;
    font-display: block;
    src: url("../webfonts/fa-thin-100.woff2") format("woff2"), url("../webfonts/fa-thin-100.ttf") format("truetype"); }
    
    @font-face {
      font-family: 'Font Awesome 6 Duotone';
      font-style: normal;
      font-weight: 900;
      font-display: block;
      src: url("../webfonts/fa-duotone-900.woff2") format("woff2"), url("../webfonts/fa-duotone-900.ttf") format("truetype"); }
      @font-face {
        font-family: 'Font Awesome 6 Sharp';
        font-style: normal;
        font-weight: 400;
        font-display: block;
        src: url("../webfonts/fa-sharp-regular-400.woff2") format("woff2"), url("../webfonts/fa-sharp-regular-400.ttf") format("truetype"); }
        @font-face {
          font-family: 'Font Awesome 6 Sharp';
          font-style: normal;
          font-weight: 300;
          font-display: block;
          src: url("../webfonts/fa-sharp-light-300.woff2") format("woff2"), url("../webfonts/fa-sharp-light-300.ttf") format("truetype"); }

          @font-face {
            font-family: 'Font Awesome 6 Sharp';
            font-style: normal;
            font-weight: 900;
            font-display: block;
            src: url("../webfonts/fa-sharp-solid-900.woff2") format("woff2"), url("../webfonts/fa-sharp-solid-900.ttf") format("truetype"); }


@font-face{font-family:'Cedora';src:url('/templates/pwa/webfonts/Cedora-RegularStd.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Cedora';src:url('/templates/pwa/webfonts/Cedora-RegularItalicStd.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Cedora';src:url('/templates/pwa/webfonts/Cedora-BoldStd.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Cedora';src:url('/templates/pwa/webfonts/Cedora-BoldItalicStd.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap;}