/* /assets/css/sol-brand.css */
/* Solipsis - eigen laag bovenop de Divi-CSS. Handmatig beheerd, laatste in de cascade.
   Tokens = content/site.json -> brand. Hier alleen correcties die het ontwerp NIET zichtbaar
   veranderen; elke regel noemt waarom hij er staat. Styling-wijziging nodig? Hier, met reden. */

:root {
  --sol-navy: #002835;
  --sol-blue: #00658d;
  --sol-magenta: #a93a6d;
  --sol-magenta-hover: #c7387f;
  --sol-light: #efefef;
  --sol-offwhite: #fcfcfc;
  --sol-slate: #24383f;
  --sol-green: #a4cb65;
  --sol-font-body: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  --sol-font-heading: 'Ubuntu', Helvetica, Arial, Lucida, sans-serif;
}

/* Zichtbare berichttitel als h1. De titel stond als kale tekst in een Divi-tekstmodule en kreeg
   zijn opmaak van die module; de h1 neemt precies die opmaak over. */
#page-container .et_pb_text_inner > h1.sol-titel {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  text-shadow: inherit;
  padding-bottom: 0;
  margin: 0;
}

/* h1 op archiefpagina's: die hebben geen zichtbare titel. Alleen voor zoekmachines en
   schermlezers. */
.sol-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Zichtbare publicatiedatum onder de titel van een bericht (besluit 22-09-2026; Google eist dat
   de datum in het Article-schema ook zichtbaar op de pagina staat). Staat in de titelmodule, dus
   de kleur erft van de hero; alle overige opmaak hier expliciet, want de module is 72px. */
#page-container .et_pb_text_inner > p.sol-datum {
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 15px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.6;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  opacity: .85;
  margin: 8px 0 0;
  padding: 0;
}

/* Uitklapper "Een greep uit de vragen" op /van-check-up-naar-doorlopend-traject/ (verzoek
   Alexander, 23-09-2026). De vragen zelf zijn ongewijzigd; alleen de presentatie: een kaart met
   het kleuraccent van het domein, en de opsomming als losse regels in plaats van een dichte lijst.
   De class komt uit content/fixes.nl.json; de kleuren zijn dezelfde als in de blokken. */

.sol-vragenlijst {
  --sol-vl-kleur: #a8d85e;
  --sol-vl-ink: #24383f;
  border: 1px solid rgba(0, 40, 53, .12);
  border: 1px solid var(--sol-vl-kleur);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
}

/* De kaart staat in de pasteltint van zijn domein: de kleur voor 14% gemengd met wit, net als de
   kaartkoppen op /digital-health-score/ (verzoek Alexander, 25-09-2026; daarvoor stond hier de
   volle kleur). Divi zet een open uitklapper op #efefef via
   `.et_pb_toggle_0.et_pb_toggle.et_pb_toggle_open` (drie classes), dus deze regel heeft er vier
   nodig om te winnen. */
.sol-vragenlijst.et_pb_toggle.et_pb_toggle_item.et_pb_toggle_close,
.sol-vragenlijst.et_pb_toggle.et_pb_toggle_item.et_pb_toggle_open {
  background-color: color-mix(in srgb, var(--sol-vl-kleur) 14%, #ffffff);
}

.sol-vragenlijst--1 { --sol-vl-kleur: #a8d85e; }
.sol-vragenlijst--2 { --sol-vl-kleur: #c5de5c; }
.sol-vragenlijst--3 { --sol-vl-kleur: #5dcaa5; }
.sol-vragenlijst--4 { --sol-vl-kleur: #ffd166; }
.sol-vragenlijst--5 { --sol-vl-kleur: #ffa94d; }

.sol-vragenlijst .et_pb_toggle_title {
  padding: 14px 52px 14px 18px;
  margin: 0;
  font-family: 'Ubuntu', Helvetica, Arial, Lucida, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  color: var(--sol-vl-ink);
  background: transparent;
  cursor: pointer;
  transition: background .2s ease;
}

/* Geen kleurverandering bij hover: de titel blijft zoals hij is, alleen de muisaanwijzer en het
   plus/min-teken laten zien dat je kunt klikken. Divi zet de titel dicht op #666 en open op #333
   via `.et_pb_toggle_close h5.et_pb_toggle_title` (drie delen); deze regel gaat daaroverheen en
   houdt hem in beide toestanden dezelfde inktkleur. */
.sol-vragenlijst.et_pb_toggle h5.et_pb_toggle_title,
.sol-vragenlijst.et_pb_toggle h5.et_pb_toggle_title:hover,
.sol-vragenlijst.et_pb_toggle_close h5.et_pb_toggle_title,
.sol-vragenlijst.et_pb_toggle_open h5.et_pb_toggle_title {
  color: #002835;
}

.sol-vragenlijst .et_pb_toggle_title:focus-visible {
  outline: 3px solid #a93a6d;
  outline-offset: -3px;
}

/* het plus/min-teken van Divi staat in een bolletje in de volle domeinkleur, zoals het icoon in
   de kop van een domein op /digital-health-score/. Divi kleurt het dichte teken standaard
   magenta; dat leest slecht op deze tinten, dus beide toestanden krijgen de donkere inktkleur. */
.sol-vragenlijst.et_pb_toggle_close .et_pb_toggle_title::before,
.sol-vragenlijst.et_pb_toggle_open .et_pb_toggle_title::before,
.sol-vragenlijst .et_pb_toggle_title::before {
  right: 16px;
  top: 50%;
  margin-top: -14px;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 50%;
  background: var(--sol-vl-kleur);
  color: var(--sol-vl-ink);
  font-size: 16px;
}

/* open: geen streep onder de titel en geen apart paneel; de vragen staan gewoon op het
   gekleurde vlak, zodat de kaart één geheel blijft. */
.sol-vragenlijst.et_pb_toggle_open {
  box-shadow: 0 10px 26px rgba(0, 40, 53, .06);
}

.sol-vragenlijst.et_pb_toggle_open .et_pb_toggle_title {
  padding-bottom: 12px;
}

.sol-vragenlijst .et_pb_toggle_content {
  padding: 4px 18px 18px;
}

.sol-vragenlijst .et_pb_toggle_content ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: transparent;
}

.sol-vragenlijst .et_pb_toggle_content li {
  position: relative;
  padding: 0 0 10px 22px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--sol-vl-ink);
}

.sol-vragenlijst .et_pb_toggle_content li:last-child {
  padding-bottom: 0;
}

.sol-vragenlijst .et_pb_toggle_content li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sol-vl-ink);
}

/* Op een telefoon staat de kaart in een Divi-kolom met 20px binnenruimte; daar blijft weinig
   regelbreedte over. De kaart mag daar iets ruimer staan en krijgt strakkere maten, zodat de
   vragen niet woord voor woord afbreken. */
@media (max-width: 560px) {
  .sol-vragenlijst {
    margin-left: -10px;
    margin-right: -10px;
  }

  .sol-vragenlijst .et_pb_toggle_title { padding: 13px 44px 13px 13px; font-size: 14px; }
  .sol-vragenlijst .et_pb_toggle_title::before { right: 12px; }
  .sol-vragenlijst .et_pb_toggle_content { padding: 2px 13px 14px; }
  .sol-vragenlijst .et_pb_toggle_content li { padding-left: 18px; font-size: 14px; }
  .sol-vragenlijst .et_pb_toggle_content li::before { left: 1px; top: 7px; }
}

/* De vijf domeinkaarten: de uitklapper met de vragen staat onderaan de kaart, net als de knop in
   het zesde (paarse) blok. De kolom wordt daarvoor een flexkolom; de uitklapper duwt zichzelf
   met margin-top:auto naar beneden. Divi's eigen ondermarge op de module vervalt, zodat de
   uitklapper net als de knop op de binnenruimte van de kaart eindigt. */
.sol-vraagkaart {
  display: flex;
  flex-direction: column;
}

/* Divi zet op deze module `margin-bottom: 35px !important` (module-instelling in WordPress),
   dus hier is !important nodig. Zonder die marge eindigt de uitklapper op dezelfde hoogte als de
   knop in het zesde blok (gemeten: 1px verschil); margin-top:auto duwt hem naar beneden zodra er
   ruimte over is, zodat de vijf uitklappers per rij op één lijn staan. */
.sol-vraagkaart .sol-vragenlijst {
  margin-top: auto !important;
  margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------------------------
   ActiveCampaign-formulieren: "Laten we kennismaken" op /contact/ (formulier 111) en hetzelfde
   formulier in de footer (115). Verzoek Alexander, 23-09-2026.

   De techniek is niet aangeraakt: hetzelfde embed-script van solipsis.activehosted.com, dezelfde
   velden, namen, action en reCAPTCHA. Het script schrijft de HTML en een eigen <style> in de lege
   div ._form_111 / ._form_115; alleen de presentatie is hier aangepast.

   Waarom overal !important: de stijl van ActiveCampaign komt pas bij het laden in de pagina (dus
   na deze stylesheet) en werkt met id-selectors. Zonder !important wint hun regel altijd. Wat zij
   zelf met !important op een id vastleggen - achtergrond, kleur, binnenruimte en ronding van de
   knop - is niet te overschrijven; dat is de magenta pil die ook elders op de site staat, dus die
   blijft. De hover gaat daarom via filter.

   Het id van het <form> verschilt per aanvraag en de veldcodes (._x70025618) kunnen veranderen als
   het formulier in ActiveCampaign wordt gewijzigd. Hieronder staan daarom alleen classes die niet
   wisselen; het reCAPTCHA-veld wijzen we aan met :has(.g-recaptcha).

   Drie formulieren, dezelfde opmaak, twee kleurvarianten en een losse kaart:
     .sol-acform--licht  op een lichte achtergrond: tekst in de inktkleur (/contact/ en het
                         aanmeldformulier op /event/ai-event-van-handmatig-naar-moeiteloos/)
     .sol-acform--donker in de footer, op het donkerblauw: tekst in wit
     .sol-acform--kaart  alleen op /contact/: een witte kaart om het formulier. Op de eventpagina
                         staat het formulier al in een witte kolom, daar zou dat dubbel zijn.
   --------------------------------------------------------------------------------------------- */

/* --- gemeenschappelijk: maatvoering en gedrag ------------------------------------------------ */

.sol-acform form._form {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 600px !important;
  font-family: var(--sol-font-body) !important;
}

.sol-acform form._form ._form_element {
  margin-left: 0 !important;
  margin-bottom: 14px !important;
}

/* ActiveCampaign duwt elk veld met margin-left:-20px buiten de binnenruimte van het formulier;
   die binnenruimte is hierboven weg, dus die verschuiving ook. */
.sol-acform form._form input[type="text"],
.sol-acform form._form ._submit {
  margin-left: 0 !important;
}

/* de reCAPTCHA houdt zijn verschuiving (die staat met !important op een id-selector), dus duwen we
   het omhullende veld er evenveel tegenin. Dat veld wijzen we aan via de reCAPTCHA zelf en niet
   via de veldcode van ActiveCampaign: die kan bij een wijziging in het formulier veranderen.
   Formulier 117 (de eventpagina van 24 juni) verschuift zijn reCAPTCHA niet, dus daar hoort geen
   tegendruk; vandaar dat de drie formulieren die dat wel doen met naam genoemd staan. */
.sol-acform form._form ._form_element:has(.g-recaptcha) {
  margin-top: 4px !important;
}

.sol-acform form._form_111 ._form_element:has(.g-recaptcha),
.sol-acform form._form_115 ._form_element:has(.g-recaptcha),
.sol-acform form._form_121 ._form_element:has(.g-recaptcha) {
  margin-left: 20px !important;
}

.sol-acform form._form ._form_element:has(.g-recaptcha) ._form-label {
  margin-left: -20px !important;
}

.sol-acform form._form .g-recaptcha {
  margin-bottom: 6px !important;
}

/* labels: lege labels (de velden werken met een placeholder) nemen anders ruimte in */
.sol-acform form._form ._form-label {
  font-family: var(--sol-font-heading) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
}

.sol-acform form._form ._form-label:empty {
  display: none !important;
}

.sol-acform form._form .field-required {
  margin-left: 2px;
}

/* de velden: dezelfde pilvorm als op de site, maar rustiger. De rand was volvlak magenta; dat trok
   alle aandacht naar de omlijning in plaats van naar de tekst. */
.sol-acform form._form input[type="text"] {
  width: 100% !important;
  height: 58px !important;
  padding: 0 22px !important;
  border: 1px solid #ddd2d8 !important;
  border-radius: 50px !important;
  background-color: #ffffff !important;
  font-family: var(--sol-font-body) !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.sol-acform form._form input[type="text"]::placeholder {
  color: #7a8890 !important;
  opacity: 1 !important;
}

.sol-acform form._form input[type="text"]:hover {
  border-color: #c9b6c0 !important;
}

/* actief veld: de merkkleur als rand plus een zachte ring, zodat duidelijk is waar je bent */
.sol-acform form._form input[type="text"]:focus {
  border-color: var(--sol-magenta) !important;
  outline: none;
}

.sol-acform form._form input[type="text"]:focus-visible {
  outline: 3px solid var(--sol-magenta);
  outline-offset: 2px;
}

.sol-acform form._form input[type="text"]._has_error {
  border-color: #d64545 !important;
}

/* de knop: breedte en lettertype liggen bij ActiveCampaign niet vast, dus daarmee geven we hem het
   formaat van de knoppen elders op de site */
.sol-acform form._form ._button-wrapper {
  margin-top: 4px !important;
}

.sol-acform form._form ._submit {
  min-width: 220px !important;
  font-family: var(--sol-font-heading) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  transition: filter .2s ease, box-shadow .2s ease, transform .1s ease;
}

.sol-acform form._form ._submit:hover {
  filter: brightness(1.12);
  box-shadow: 0 8px 18px rgba(169, 58, 109, .28);
}

.sol-acform form._form ._submit:active {
  transform: translateY(1px);
}

.sol-acform form._form ._form-thank-you {
  font-family: var(--sol-font-body) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  text-align: left !important;
  padding: 6px 0 !important;
}

/* --- variant licht: /contact/, op de grijze sectie ------------------------------------------- */

/* de kaart om het formulier; laadt het script niet, dan is er geen <form> en blijft de kaart weg */
.sol-acform--kaart .et_pb_code_inner:has(form) {
  background: #ffffff;
  border-radius: 22px;
  padding: 28px 30px 30px;
  box-shadow: 0 14px 34px rgba(0, 40, 53, .08);
  max-width: 560px;
}

/* ActiveCampaign zet het hele formulier op wit; op de lichtgrijze sectie was het label boven de
   reCAPTCHA daardoor onleesbaar, en het bedankbericht na het versturen ook. */
.sol-acform--licht form._form,
.sol-acform--licht form._form ._form-label,
.sol-acform--licht form._form ._form-thank-you {
  color: var(--sol-slate) !important;
}

.sol-acform--licht form._form .field-required {
  color: var(--sol-magenta) !important;
}

.sol-acform--licht form._form input[type="text"]:focus {
  box-shadow: 0 0 0 3px rgba(169, 58, 109, .16) !important;
}

.sol-acform--licht form._form ._submit:focus-visible {
  outline: 3px solid var(--sol-navy);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .sol-acform--kaart .et_pb_code_inner:has(form) {
    padding: 22px 20px 24px;
    border-radius: 18px;
  }

  .sol-acform--licht form._form ._submit {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* de reCAPTCHA van Google is 304px breed en vast van formaat; op een smal scherm steekt hij
   daardoor buiten de binnenruimte van de kaart. Iets verkleinen laat hem netjes meelopen. */
/* de regels in een keuzelijst kunnen niet afbreken; op een smal scherm past de langste sessienaam
   daarom alleen in een iets kleinere letter */
@media (max-width: 430px) {
  .sol-acform--licht form._form select,
  .sol-acform--licht form._form select option {
    font-size: 13px !important;
  }

  .sol-acform--licht form._form select {
    padding: 6px !important;
  }

  .sol-acform--licht form._form select option {
    padding: 8px;
  }
}

@media (max-width: 430px) {
  .sol-acform--licht form._form .g-recaptcha {
    transform: scale(.9);
    transform-origin: left center;
  }
}

/* Het aanmeldformulier op /event/ai-event-van-handmatig-naar-moeiteloos/ heeft twee velden die de
   andere twee formulieren niet hebben: een tekstvak ("Waar zou jij AI voor willen inzetten?") en
   een akkoordvinkje. In WordPress stond daar een eigen stijlblok voor in de pagina; dat is
   verwijderd (content/fixes.nl.json) en hier overgenomen in dezelfde vormtaal als de rest. */

.sol-acform--licht form._form textarea:not(.g-recaptcha-response) {
  width: 100% !important;
  min-height: 116px !important;
  padding: 14px 20px !important;
  border: 1px solid #ddd2d8 !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  font-family: var(--sol-font-body) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: var(--sol-slate) !important;
  resize: vertical !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.sol-acform--licht form._form textarea:not(.g-recaptcha-response)::placeholder {
  color: #7a8890 !important;
  opacity: 1 !important;
}

.sol-acform--licht form._form textarea:not(.g-recaptcha-response):hover {
  border-color: #c9b6c0 !important;
}

.sol-acform--licht form._form textarea:not(.g-recaptcha-response):focus {
  border-color: var(--sol-magenta) !important;
  box-shadow: 0 0 0 3px rgba(169, 58, 109, .16) !important;
  outline: none;
}

.sol-acform--licht form._form textarea:not(.g-recaptcha-response):focus-visible {
  outline: 3px solid var(--sol-magenta);
  outline-offset: 2px;
}

/* Het aanmeldformulier op /event/event-digitale-werkplek-24-juni-2026/ heeft een keuzelijst voor
   de sessies (<select multiple>, drie opties). Die stond in WordPress in een pil van 67px hoog met
   appearance:none en een pijltje erbij, terwijl het geen uitklaplijst is: de drie regels stonden
   klem in een rond vakje. Hier is het een gewone, rustige lijst waarin je de opties ziet staan. */
.sol-acform--licht form._form select {
  width: 100% !important;
  height: auto !important;
  padding: 8px !important;
  border: 1px solid #ddd2d8 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  background-image: none !important;
  font-family: var(--sol-font-body) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--sol-slate) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.sol-acform--licht form._form select:hover {
  border-color: #c9b6c0 !important;
}

.sol-acform--licht form._form select:focus {
  border-color: var(--sol-magenta) !important;
  box-shadow: 0 0 0 3px rgba(169, 58, 109, .16) !important;
  outline: none;
}

.sol-acform--licht form._form select:focus-visible {
  outline: 3px solid var(--sol-magenta);
  outline-offset: 2px;
}

.sol-acform--licht form._form select option {
  padding: 9px 12px;
  border-radius: 10px;
}

/* een gekozen optie in de merkkleur. Chrome en Safari negeren background-color op een option, maar
   luisteren wel naar een background-image; vandaar het verloop van één kleur. */
.sol-acform--licht form._form select option:checked {
  background: var(--sol-magenta) linear-gradient(0deg, var(--sol-magenta) 0%, var(--sol-magenta) 100%);
  color: #ffffff;
}

/* het akkoordvinkje als aanklikbare kaart; het label eromheen maakt de hele regel klikbaar */
.sol-acform--licht form._form ._row._checkbox-radio {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid #e0e5e8;
  border-radius: 14px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}

.sol-acform--licht form._form ._row._checkbox-radio:hover {
  border-color: #c9b6c0;
  background: #fdf7fa;
}

.sol-acform--licht form._form ._row._checkbox-radio:has(input:checked) {
  border-color: var(--sol-magenta);
  background: #fbf1f6;
}

.sol-acform--licht form._form ._row._checkbox-radio:has(input:focus-visible) {
  outline: 3px solid var(--sol-magenta);
  outline-offset: 2px;
}

.sol-acform--licht form._form input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  flex: none;
  accent-color: var(--sol-magenta);
  cursor: pointer;
}

.sol-acform--licht form._form ._row._checkbox-radio label,
.sol-acform--licht form._form ._row._checkbox-radio span {
  display: inline !important;
  width: auto !important;
  margin: 0 !important;
  font-family: var(--sol-font-body) !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--sol-slate) !important;
  cursor: pointer;
}

/* het kopje boven het vinkje ("akkoord privacy verklaring") stond in een lichtgrijs dat op wit
   onvoldoende contrast heeft (3,6:1); dit haalt 4,5:1 */
.sol-acform--licht form._form legend._form-label {
  font-family: var(--sol-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #5a6a72 !important;
  margin-bottom: 8px !important;
}

/* --- variant donker: de footer, op het donkerblauw ------------------------------------------- */

/* hier klopt het wit van ActiveCampaign wel; de tekst blijft dus wit, alleen het sterretje krijgt
   een lichte tint van de merkkleur (magenta op donkerblauw leest slecht). */
.sol-acform--donker form._form .field-required {
  color: #f0aecb !important;
}

/* de footer is een smalle kolom naast de adresgegevens: daar passen dezelfde velden in een iets
   kleinere maat. ActiveCampaign leverde ze 30px hoog, wat te krap is om in te typen. */
.sol-acform--donker form._form input[type="text"] {
  height: 46px !important;
  padding: 0 18px !important;
  font-size: 15px !important;
  border-color: #e4e8ea !important;
}

.sol-acform--donker form._form input[type="text"]:hover {
  border-color: #ffffff !important;
}

.sol-acform--donker form._form input[type="text"]:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .22) !important;
}

.sol-acform--donker form._form input[type="text"]:focus-visible {
  outline-color: #ffffff;
}

.sol-acform--donker form._form ._form_element {
  margin-bottom: 10px !important;
}

.sol-acform--donker form._form ._form-label {
  font-size: 13px !important;
}

/* ActiveCampaign verkleint de reCAPTCHA hier al (scale .75) vanaf de linkerbovenhoek; vanuit het
   midden blijft de witruimte boven en onder gelijk. */
.sol-acform--donker form._form .g-recaptcha {
  transform-origin: left center !important;
}

.sol-acform--donker form._form ._submit {
  min-width: 0 !important;
  font-size: 16px !important;
}

.sol-acform--donker form._form ._submit:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ heroknop naar de check

   Verzoek Alexander (25-09-2026): dezelfde knop als in de hero van de homepage ("Ontvang jouw
   Digital Health Score") staat nu ook in de hero van /wat-meten-we/ en
   /van-check-up-naar-doorlopend-traject/, met een link naar /digital-health-score/. Die twee
   pagina's hebben zelf geen knop, dus ook geen genummerde knop-CSS van Divi; deze regels geven
   de knop dezelfde vorm als op de homepage (magenta pil, Ubuntu 700 18px, 16/24 binnenruimte,
   gemeten 25-09-2026). Het pijltje bij hover komt uit .et_pb_button in sol-core.css; net als op
   /agents/ maakt de knop daar rechts ruimte voor, zodat het binnen de pil valt. */

/* Divi zet onder de ondertitel van deze twee hero's 77px lucht; de knop stond daardoor bijna
   tegen de onderrand. De ondertitel krijgt dezelfde 22px als op de homepage, zodat de knop er
   net zo dicht onder staat en de hero ongeveer even hoog blijft (gemeten 25-09-2026). */
.sol-hero-sub.et_pb_module {
  margin-bottom: 22px !important;
}

/* Onder de knop hoort lucht voordat de hero ophoudt: de rij zelf geeft 20px, deze marge maakt er
   64px van (verzoek Alexander, 25-09-2026). Divi zet de laatste module in een kolom op
   `margin-bottom: 0` via `.et_pb_column .et_pb_module:last-child`; daar gaat deze regel
   overheen. */
.sol-hero-knopblok.et_pb_module {
  margin-top: 0;
  margin-bottom: 44px !important;
}

.sol-hero-knop {
  display: inline-block;
  border-radius: 50px;
  padding: 16px 24px !important;
  border-width: 0 !important;
  background-color: #a93a6d;
  color: #edeaeb !important;
  font-family: 'Ubuntu', Helvetica, Arial, Lucida, sans-serif !important;
  font-size: 18px;
  font-weight: 700 !important;
  transition: all 300ms ease 0ms;
}

.sol-hero-knop:hover {
  background-color: #a93a6d !important;
  padding: 16px 48px 16px 24px !important;
}

.sol-hero-knop::after {
  display: inline-block;
  left: auto;
  right: 20px;
  margin-left: 0;
  font-size: 1.6em;
  opacity: 0;
  transition: all 300ms ease 0ms;
}

.sol-hero-knop:hover::after {
  opacity: 1;
  margin-left: 0;
}

.sol-hero-knop:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ pijltje op alle knoppen

   Verzoek Alexander (25-09-2026): de knoppen die uit WordPress komen krijgen dezelfde beweging
   als de nieuwe knoppen op /agents/ en /digital-health-score/.

   Divi tekent het pijltje (het teken "5" uit het lettertype ETmodules) bij hover net buiten de
   knop en rekt de knop daarvoor normaal gesproken op. Op deze site staat de binnenruimte van elke
   knop vast op 16/24px met !important, dus dat oprekken gebeurde niet: het pijltje viel buiten de
   pil en had de kleur van de knoptekst, waardoor het op de pagina-achtergrond onzichtbaar bleef.

   Deze twee regels zetten dat recht voor alle knoppen tegelijk: bij hover komt er rechts 24px bij
   en het pijltje staat binnen de pil. De selector begint met `body #page-container` omdat de
   knopregels van Divi per pagina dat ook doen; anders wint hun !important. Alle knoppen op de
   site hebben dezelfde binnenruimte (gecontroleerd 25-09-2026), dus 48px rechts klopt overal. */

body #page-container .et_pb_button:hover {
  padding-right: 48px !important;
}

body #page-container .et_pb_button::after {
  left: auto;
  right: 20px;
  margin-left: 0;
}

/* ------------------------------------------------------------------ pijltje op "Lees meer"

   De "Lees meer"-links onder de kaarten in een bloglijst zijn geen Divi-knop maar een
   `.more-link`; die heeft het pijltje van zichzelf niet (gemerkt 25-09-2026). Hieronder hetzelfde
   recept als bij de knoppen: bij hover komt er rechts ruimte bij en schuift het pijltje in beeld.
   Het teken "5" uit het lettertype ETmodules is hetzelfde pijltje dat Divi op zijn knoppen zet. */

body #page-container .more-link {
  position: relative;
  transition: all 300ms ease 0ms;
}

body #page-container .more-link::after {
  content: "\35";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-family: ETmodules;
  font-size: 22px;
  font-weight: 400;
  font-style: normal;
  line-height: 1em;
  opacity: 0;
  text-transform: none;
  transition: all 300ms ease 0ms;
}

/* de bloglijst zet de binnenruimte met !important (`.et_pb_blog_0 a.more-link{padding:16px
   !important}`), dus die ruimte erbij moet hier ook !important zijn */
body #page-container .more-link:hover {
  padding-right: 40px !important;
}

body #page-container .more-link:hover::after {
  opacity: 1;
}

/* ------------------------------------------------------------------ Contact-knop bij scrollen

   Verzoek Alexander (25-09-2026): de Contact-knop in het menu mag er bij het scrollen niet anders
   uit gaan zien. Divi kleurt in de vastgezette header alle menulinks donkerblauw
   (`.et-fixed-header #top-menu a{color:#002835!important}`) en de link van de huidige pagina
   magenta; op het magenta pilletje is dat allebei slecht leesbaar. Deze regel houdt de tekst daar
   licht, in beide toestanden. */

#main-header.et-fixed-header #top-menu li.cta-button > a,
#main-header.et-fixed-header #top-menu li.cta-button.current-menu-item > a,
#main-header.et-fixed-header #top-menu li.cta-button.current_page_item > a {
  color: #f1f1f1 !important;
}

/* ------------------------------------------------------------------ 404-pagina

   De 404 van WordPress zei "Geen Resultaten Gevonden" met een zoekformulier dat naar /?s= postte;
   dat doet op een statische site niets. De pagina heeft nu een eigen tekst met wegwijzers
   (content/fixes.nl.json) en een knop die het zoekvenster opent. */

/* de zijbalk is leeg gemaakt; het tekstvlak mag dan de volle breedte hebben (Divi zet op een
   pagina met rechterzijbalk een smalle kolom met een scheidingslijn) */
body.error404 #left-area {
  width: 100% !important;
  padding-right: 0 !important;
  border-right: 0 !important;
}

body.error404 #sidebar {
  display: none !important;
}

.sol-404 {
  max-width: 62ch;
  padding: 10px 0 40px;
}

.sol-404 h1.not-found-title {
  font-family: 'Ubuntu', Helvetica, Arial, Lucida, sans-serif;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.2;
  color: #002835;
  margin-bottom: 14px;
}

.sol-404-tekst {
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 16px;
  line-height: 32px;
  color: #002835;
}

.sol-404-knoppen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 26px 0 36px;
}

.sol-404-zoek {
  border: 2px solid #e2e7e9;
  border-radius: 50px;
  background: #ffffff;
  color: #002835;
  font-family: 'Ubuntu', Helvetica, Arial, Lucida, sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 15px 24px;
  cursor: pointer;
  transition: border-color 200ms ease;
}

.sol-404-zoek:hover {
  border-color: #002835;
}

.sol-404-zoek:focus-visible {
  outline: 3px solid #a93a6d;
  outline-offset: 2px;
}

.sol-404-kop {
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5d6d75;
  margin-bottom: 10px;
}

.sol-404-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 8px 24px;
}

.sol-404-lijst a {
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 16px;
  line-height: 30px;
  color: #a93a6d;
  text-decoration: none;
}

.sol-404-lijst a:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .sol-404-lijst {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ knop naar Google Maps

   De link naar Google Maps onder het blok Locatie op /event/.../ (verzoek Alexander, 01-10-2026).
   Het is de tegenhanger van de volle magenta knop op dezelfde pagina: dezelfde pil (50px rond),
   hetzelfde lettertype en dezelfde binnenruimte (Ubuntu 700 18px, 16/24px), maar omgekeerd -
   wit met een magenta rand, en bij hover vult hij zich. Het pijltje is hetzelfde teken "5" uit
   ETmodules dat Divi op zijn knoppen zet; het schuift net als daar bij hover in beeld, waarvoor
   rechts 24px bij komt. Geen Divi-knopclass, want die is per pagina genummerd. */
.sol-maps {
  display: inline-block;
  position: relative;
  border-radius: 50px;
  border: 2px solid #a93a6d;
  padding: 14px 22px;
  background-color: #ffffff;
  color: #a93a6d;
  font-family: 'Ubuntu', Helvetica, Arial, Lucida, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: all 300ms ease 0ms;
}

.sol-maps:hover {
  background-color: #a93a6d;
  color: #ffffff;
  padding-right: 46px;
}

.sol-maps::after {
  content: "\35";
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  font-family: ETmodules;
  font-size: 22px;
  font-weight: 400;
  opacity: 0;
  transition: all 300ms ease 0ms;
}

.sol-maps:hover::after {
  opacity: 1;
}

.sol-maps:focus-visible {
  outline: 3px solid #a93a6d;
  outline-offset: 3px;
}
/* /assets/css/sol-zoek.css */
/* Solipsis - zoeken (25-09-2026).

   De site is statisch; het zoeken gebeurt in de browser met de index uit
   tools/build_zoekindex.py (/assets/zoek-index.json). Dit bestand staat op elke pagina, net als
   sol-brand.css, want het vergrootglas staat in de header.

   Zonder JavaScript is er niets te zien: de knop staat op display:none en het script zet pas
   `sol-zoek-aan` op <html> als het draait. Zo krijgt niemand een knop die niets doet.

   Kleuren en vormen komen uit de huisstijl: donkerblauw #002835, magenta #a93a6d, grijs #efefef,
   hoekronding 25px zoals de kaarten op de homepage. */

/* Het vergrootglas: een ronde knop met een dunne ring, donkerblauw icoon, magenta bij hover.
   Twee dingen zijn hier belangrijk:
   - `position: relative` met een z-index, anders ligt Divi's .logo_container eroverheen en komt
     een klik nooit bij de knop aan (gemerkt 25-09-2026);
   - `float: right` zodat hij in de rij van Divi meeloopt, met marge om hem op dezelfde hoogte te
     krijgen als het menu en de Contact-knop. */

.sol-zoek-knop {
  display: none;
  position: relative;
  z-index: 3;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  /* 6px eronder zetten: dan valt het hart van het rondje op het hart van de Contact-knop
     (gemeten 25-09-2026: die staat op 65px, het rondje zonder marge op 59px) */
  margin: 6px 0 0 14px;
  padding: 0;
  border: 1px solid rgba(0, 40, 53, .14);
  border-radius: 50%;
  background: #ffffff;
  color: #002835;
  cursor: pointer;
  float: right;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease, transform 200ms ease;
}

.sol-zoek-aan .sol-zoek-knop {
  display: inline-flex;
}

.sol-zoek-knop svg {
  display: block;
}

.sol-zoek-knop:hover,
.sol-zoek-knop:focus-visible {
  border-color: #a93a6d;
  background: #fdf5f8;
  color: #a93a6d;
  transform: translateY(-1px);
  outline: none;
}

.sol-zoek-knop:focus-visible {
  box-shadow: 0 0 0 3px rgba(169, 58, 109, .25);
}

/* de header schuift bij het scrollen dicht; de knop krimpt dan mee met het menu */
.et-fixed-header .sol-zoek-knop {
  width: 34px;
  height: 34px;
}

/* naast het mobiele menu staat hij dichter op de rand */
@media (max-width: 980px) {
  .sol-zoek-knop {
    margin-left: 10px;
  }
}

/* ---------------------------------------------------------------- het zoekvenster */

.sol-zoek-laag {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  justify-content: center;
  /* het venster groeit mee met de resultaten in plaats van altijd de volle hoogte te vullen */
  align-items: flex-start;
  padding: 12vh 20px 20px;
  background: rgba(0, 40, 53, .55);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms;
}

.sol-zoek-laag.is-open {
  opacity: 1;
  visibility: visible;
}

.sol-zoek-venster {
  width: 100%;
  max-width: 720px;
  max-height: 76vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 25px;
  box-shadow: 0 30px 70px rgba(0, 40, 53, .3);
  overflow: hidden;
  transform: translateY(-10px);
  transition: transform 200ms ease;
}

.sol-zoek-laag.is-open .sol-zoek-venster {
  transform: none;
}

.sol-zoek-balk {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid #e2e7e9;
}

.sol-zoek-balk svg {
  flex: none;
  color: #5d6d75;
}

.sol-zoek-veld {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 18px;
  line-height: 32px;
  color: #002835;
}

.sol-zoek-veld::placeholder {
  color: #8d9aa0;
}

.sol-zoek-veld:focus {
  outline: 0;
}

.sol-zoek-sluit {
  flex: none;
  border: 1px solid #e2e7e9;
  border-radius: 50px;
  background: #ffffff;
  color: #5d6d75;
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
}

.sol-zoek-sluit:hover {
  border-color: #002835;
  color: #002835;
}

/* de rij met soorten boven de resultaten: alles, en elk soort dat in de uitslag voorkomt */
.sol-zoek-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid #e2e7e9;
}

.sol-zoek-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid #e2e7e9;
  border-radius: 50px;
  background: #ffffff;
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  color: #5d6d75;
  cursor: pointer;
  transition: all 180ms ease;
}

.sol-zoek-chip span {
  padding: 0 6px;
  border-radius: 50px;
  background: #f2f6f6;
  font-size: 11px;
  color: #8d9aa0;
}

.sol-zoek-chip:hover {
  border-color: #002835;
  color: #002835;
}

.sol-zoek-chip.is-aan {
  background: #002835;
  border-color: #002835;
  color: #ffffff;
}

.sol-zoek-chip.is-aan span {
  background: rgba(255, 255, 255, .18);
  color: #ffffff;
}

.sol-zoek-chip:focus-visible {
  outline: 3px solid #a93a6d;
  outline-offset: 2px;
}

.sol-zoek-uitslag {
  overflow-y: auto;
  padding: 8px 10px 14px;
}

.sol-zoek-melding {
  padding: 18px 12px;
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 15px;
  line-height: 26px;
  color: #5d6d75;
}

.sol-zoek-teller {
  padding: 10px 12px 4px;
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8d9aa0;
}

.sol-zoek-rij {
  display: block;
  padding: 12px 14px;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
}

.sol-zoek-rij:hover,
.sol-zoek-rij.is-actief {
  background: #f2f6f6;
}

.sol-zoek-kop {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.sol-zoek-titel {
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
  color: #002835;
}

.sol-zoek-soort {
  padding: 2px 10px;
  border-radius: 50px;
  background: #efefef;
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  color: #5d6d75;
  white-space: nowrap;
}

.sol-zoek-fragment {
  margin: 2px 0 0;
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 14px;
  line-height: 24px;
  color: #5d6d75;
}

.sol-zoek-fragment mark {
  background: rgba(168, 216, 94, .45);
  color: #002835;
  padding: 0 2px;
  border-radius: 3px;
}

@media (max-width: 640px) {
  .sol-zoek-laag {
    padding: 8vh 12px 12px;
  }

  .sol-zoek-venster {
    max-height: 84vh;
  }

  .sol-zoek-chips {
    padding: 12px 14px;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .sol-zoek-chip {
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sol-zoek-laag,
  .sol-zoek-venster,
  .sol-zoek-knop {
    transition: none;
  }
}
/* /assets/css/sol-consent.css */
/* Solipsis - opmaak van de cookiemelding (27-09-2026).

   Een strook onderaan het scherm, niet een vlak over de hele pagina: de bezoeker kan gewoon
   doorlezen terwijl hij kiest. Kleuren uit de huisstijl (donkerblauw #002835, magenta #a93a6d),
   hoekronding 25px zoals de kaarten. De twee knoppen zijn even groot en even duidelijk; "weigeren"
   mag niet moeilijker te vinden zijn dan "accepteren".

   De markup maakt src/js/sol-consent.js; zonder JavaScript is er geen melding en draait er ook
   geen tracking. */

.sol-ck {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  padding: 0 16px 16px;
  transform: translateY(110%);
  transition: transform 260ms ease;
}

.sol-ck.is-open {
  transform: none;
}

.sol-ck-binnen {
  display: flex;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 22px 26px;
  border-radius: 25px;
  /* een dun wit randje: de strook komt daardoor beter los van de pagina eronder
     (verzoek Alexander, 27-09-2026) */
  border: 1px solid rgba(255, 255, 255, .28);
  background: #002835;
  color: #efefef;
  box-shadow: 0 22px 50px rgba(0, 40, 53, .35);
}

.sol-ck-tekst p {
  margin: 0;
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 14px;
  line-height: 24px;
  color: rgba(255, 255, 255, .85);
}

.sol-ck-kop {
  font-family: 'Ubuntu', Helvetica, Arial, Lucida, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700;
  line-height: 26px !important;
  color: #ffffff !important;
  margin-bottom: 4px !important;
}

.sol-ck-tekst a {
  color: #ffffff;
  text-decoration: underline;
}

.sol-ck-tekst a:hover {
  color: #ffffff;
  text-decoration: none;
}

.sol-ck-knoppen {
  flex: none;
  display: flex;
  gap: 10px;
}

.sol-ck-knop {
  min-width: 130px;
  padding: 13px 22px;
  border-radius: 50px;
  border: 2px solid transparent;
  font-family: 'Ubuntu', Helvetica, Arial, Lucida, sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 200ms ease;
}

.sol-ck-knop--ja {
  background: #a93a6d;
  color: #ffffff;
}

.sol-ck-knop--ja:hover {
  background: #c7387f;
}

.sol-ck-knop--nee {
  background: transparent;
  border-color: rgba(255, 255, 255, .5);
  color: #ffffff;
}

.sol-ck-knop--nee:hover {
  border-color: #ffffff;
}

.sol-ck-knop:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* de knop in de voet waarmee je je keuze herziet: leest als de links ernaast */
.sol-ck-herzie {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.sol-ck-herzie:hover {
  text-decoration: underline;
}

@media (max-width: 860px) {
  .sol-ck {
    padding: 0 10px 10px;
  }

  .sol-ck-binnen {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 20px;
    border-radius: 22px;
  }

  .sol-ck-knoppen {
    flex-direction: row;
  }

  .sol-ck-knop {
    flex: 1;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sol-ck {
    transition: none;
  }
}

/* ------------------------------------------------------------------ het koekje linksonder

   Een klein knopje dat op elke pagina blijft staan, zodat een bezoeker zijn cookiekeuze altijd kan
   aanpassen en niet eerst naar de voet hoeft te scrollen (verzoek Alexander, 27-09-2026). Links,
   want rechtsonder zit de omhoog-knop van Divi. Terwijl de melding zelf open staat is hij weg. */

.sol-ck-koekje {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(0, 40, 53, .14);
  border-radius: 50%;
  background: #ffffff;
  color: #002835;
  cursor: pointer;
  opacity: .85;
  box-shadow: 0 6px 18px rgba(0, 40, 53, .14);
  transition: opacity 200ms ease, transform 200ms ease, border-color 200ms ease, color 200ms ease;
}

.sol-ck-koekje:hover {
  opacity: 1;
  transform: translateY(-2px);
  border-color: #a93a6d;
  color: #a93a6d;
}

.sol-ck-koekje:focus-visible {
  opacity: 1;
  outline: 3px solid #a93a6d;
  outline-offset: 2px;
}

.sol-ck-koekje.is-weg {
  display: none;
}

@media (max-width: 860px) {
  .sol-ck-koekje {
    left: 10px;
    bottom: 10px;
    width: 36px;
    height: 36px;
  }
}

@media print {
  .sol-ck-koekje,
  .sol-ck {
    display: none !important;
  }
}