/* Donker thema: alle tabellen, kaarten en invoervelden blijven goed leesbaar. */
body[data-thema="donker"]{
  --groen:#2f8f68;
  --groen-donker:#227452;
}
body[data-thema="donker"] table,
body[data-thema="donker"] thead,
body[data-thema="donker"] tbody,
body[data-thema="donker"] tr,
body[data-thema="donker"] td{
  background:#17241f!important;
  color:#edf7f0!important;
  border-color:#496155!important;
}
body[data-thema="donker"] th{
  background:#263a31!important;
  color:#fff!important;
  border-color:#60796c!important;
}
body[data-thema="donker"] input,
body[data-thema="donker"] select,
body[data-thema="donker"] textarea{
  background:#101915!important;
  color:#edf7f0!important;
  border-color:#60796c!important;
}
body[data-thema="donker"] input::placeholder,
body[data-thema="donker"] textarea::placeholder{color:#b7c9bf}
body[data-thema="donker"] .accountkeuzes a,
body[data-thema="donker"] .accountinloggen>section,
body[data-thema="donker"] .accountnieuw,
body[data-thema="donker"] .bestelkaarten article,
body[data-thema="donker"] .adreskaarten article,
body[data-thema="donker"] .kaartpubliek,
body[data-thema="donker"] .keuzekaart,
body[data-thema="donker"] .betaalkeuze,
body[data-thema="donker"] .adreskeuzelijst label,
body[data-thema="donker"] .donatiekaart,
body[data-thema="donker"] .overschrijfgegevens,
body[data-thema="donker"] .frieseslogan,
body[data-thema="donker"] .melding,
body[data-thema="donker"] .goeddoel{
  background:#17241f!important;
  color:#edf7f0!important;
  border-color:#496155!important;
}
body[data-thema="donker"] .accountkeuzes strong,
body[data-thema="donker"] .kortingregel,
body[data-thema="donker"] .donatieregel,
body[data-thema="donker"] .frieseslogan,
body[data-thema="donker"] .frieseslogan strong{color:#c9f0d9!important}
body[data-thema="donker"] small,
body[data-thema="donker"] .hulptekst,
body[data-thema="donker"] .btwregel{color:#c0d1c7!important}
body[data-thema="donker"] .status{background:#30463c;color:#fff}
body[data-thema="donker"] .status.groen{background:#194d37;color:#d8ffea}
body[data-thema="donker"] .status.rood{background:#5c2d2a;color:#ffe4e1}
body[data-thema="donker"] .tabelknop,
body[data-thema="donker"] .verderwinkelen,
body[data-thema="donker"] .accountlink{background:#294238;color:#fff}
body[data-thema="donker"] .keuze a{
  background:#fff!important;
  color:#111!important;
  border-color:#d8ded8!important;
}
body[data-thema="donker"] .keuze a:hover,
body[data-thema="donker"] .keuze a:focus{
  background:#eef5ef!important;
  color:#000!important;
}

/* Hotfix 0.8.6a: knop bovenaan de winkelwagen altijd duidelijk zichtbaar. */
.winkelwagenkop .verderwinkelen{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 22px;
  background:#164f3b!important;
  color:#fff!important;
  border:2px solid #164f3b!important;
  border-radius:9px;
  box-shadow:0 4px 12px rgba(22,79,59,.22);
  font-weight:800;
  opacity:1!important;
}
.winkelwagenkop .verderwinkelen:hover,
.winkelwagenkop .verderwinkelen:focus{
  background:#0d382a!important;
  border-color:#0d382a!important;
  color:#fff!important;
}
body[data-thema="donker"] .winkelwagenkop .verderwinkelen{
  background:#79c991!important;
  border-color:#79c991!important;
  color:#07170e!important;
}
body[data-thema="contrast"] .winkelwagenkop .verderwinkelen{
  background:#000!important;
  border-color:#000!important;
  color:#fff!important;
}
@media(max-width:700px){
  .winkelwagenkop .verderwinkelen{width:100%}
}

/* Winkelwagenupdate 0.8.6b: aantallen wijzigen en regels verwijderen. */
.winkelwagenregel{align-items:center;gap:22px}
.regelomschrijving{min-width:0;flex:1}
.regelbediening{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.aantalformulier{display:flex;align-items:flex-end;gap:8px;margin:0}
.aantalformulier label{display:grid;gap:3px;font-size:12px;font-weight:750}
.aantalformulier input{width:78px;min-height:42px;padding:8px 10px;text-align:center}
.verwijderformulier{margin:0}
.icoonknop{width:38px;height:38px;padding:7px;display:inline-grid;place-items:center;border-radius:8px;cursor:pointer;transition:transform .15s ease,background .15s ease}
.icoonknop:hover,.icoonknop:focus{transform:translateY(-1px)}
.icoonknop svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bijwerkicoon{border:1px solid #164f3b;background:#edf6ef;color:#164f3b}
.bijwerkicoon:hover,.bijwerkicoon:focus{background:#d9ebdd}
.verwijdericoon{border:1px solid #c77b72;background:#fff5f3;color:#9b3025}
.verwijdericoon:hover,.verwijdericoon:focus{background:#ffe2de}
.regeltotaal{min-width:86px;text-align:right}
body[data-thema="donker"] .bijwerkicoon{background:#294238;color:#c9f0d9;border-color:#6a917c}
body[data-thema="donker"] .verwijdericoon{background:#5c2d2a;color:#ffe4e1;border-color:#b86b64}
@media(max-width:760px){
  .winkelwagenregel{align-items:stretch!important;flex-direction:column}
  .regelbediening{justify-content:flex-start}
  .regeltotaal{margin-left:auto}
}
@media(max-width:480px){
  .regelbediening{display:grid;grid-template-columns:1fr auto}
  .aantalformulier{grid-column:1/-1;display:grid;grid-template-columns:82px 1fr}
  .aantalformulier label{grid-row:1/2}
  .aantalformulier .tabelknop{align-self:end}
  .regeltotaal{align-self:center}
}

/* Versie 2.0: productspecificatie en betaalinstructies bij afrekenen. */
.kostenoverzicht>div.afrekenproducten{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 20px;padding:12px 0}
.kostenoverzicht .afrekenproducten>span{min-width:0}
.kostenoverzicht .afrekenproducten strong{align-self:center}
.kostenoverzicht .afrekenproducten small{display:block;margin-top:3px}
.kostenoverzicht .subtotaalregel{font-weight:750}
.betaalaanwijzing{display:block;margin-top:8px;padding:9px 11px;border-left:4px solid #287353;background:#eef6ef;color:#17352b;border-radius:0 6px 6px 0;line-height:1.45}
body[data-thema="donker"] .betaalaanwijzing{background:#263a31;color:#edf7f0;border-left-color:#79c991}
body[data-thema="donker"] .donatiebedankt,
body[data-thema="donker"] .donatiebedankt *{
  color:#000!important;
}
body[data-thema="donker"] .donatiebedankt{
  background:#edf6ef!important;
  border-color:#83ad8c!important;
}
@media(max-width:520px){
  .kostenoverzicht>div.afrekenproducten{gap:10px 12px}
  .kostenoverzicht .afrekenproducten>strong{white-space:nowrap}
}