.datumveld{display:inline-flex;flex-direction:column;min-width:0;max-width:100%;position:relative}.datumveld input{width:11em!important;max-width:100%;font-size:16px}.datumfout{white-space:normal;max-width:25em;color:var(--vlak-tekst,#222);font-size:.85em}.datumfout:empty{display:none}.datumkalender{position:fixed;margin:0;inset:auto;padding:8px;border:1px solid var(--kleur-icoonrand,#73858d);border-radius:12px;background:var(--kleur-icoontekst,#f5f7f8);color:var(--vlak-tekst,#222);box-shadow:0 6px 20px #0004;max-width:calc(100vw - 16px);box-sizing:border-box;z-index:10000}.datum-navigatie{display:flex;align-items:center;justify-content:space-between;gap:3px}.datum-navigatie span{display:flex}.datum-navigatie strong{text-align:center;flex:1}body .datumkalender button{padding:0!important;margin:0!important;min-width:32px;min-height:42px;border:0!important;background:none!important;box-shadow:none!important;color:inherit!important;border-radius:6px}.datum-dagen{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}.datum-dagen small{text-align:center;padding:8px 0}body .datumkalender .datum-dagen button{min-width:0}body .datumkalender .datum-dagen button:disabled{opacity:.3}body .datumkalender .datum-dagen button[aria-pressed=true]{background:color-mix(in srgb,var(--kleur-icoon,#40839c) 20%,var(--kleur-icoontekst,#f5f7f8))!important;outline:1px solid var(--kleur-icoon,#40839c)}body .datumkalender button:hover:not(:disabled){outline:1px solid currentColor}
.datumfoutdialoog{width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);box-sizing:border-box;overflow:auto;margin:auto;padding:20px;border:2px solid var(--kleur-icoonrand,#73858d);border-radius:16px;background:var(--kleur-menu,#f5f7f8);color:var(--kleur-menutekst,#222);box-shadow:0 12px 36px #0007}
.datumfoutdialoog::backdrop{background:#071a27a6}
.datumfoutdialoog h2{margin:0 0 12px;font-size:1.25rem;color:inherit}
.datumfoutdialoog p{margin:0 0 14px;line-height:1.45}
.datumfout-acties{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px}
body .datumfout-acties button{margin:0;min-height:44px}

.datumformaat{font-size:.75em;opacity:.8;text-align:center}
.datum-navigatie{display:grid;grid-template-columns:108px minmax(0,1fr) 76px 32px;align-items:center;gap:3px}
.datum-navigatie span{display:flex;justify-content:center;min-width:0}
.datum-navigatie strong{text-align:center;white-space:nowrap}
body .datumkalender .datum-navigatie span button{font-size:1.35rem!important;font-weight:700!important}
.periodeveld{display:flex;flex-wrap:wrap;align-items:end;gap:8px 14px;min-width:0;padding:8px 12px;border:1px solid var(--kleur-icoonrand,#73858d);border-radius:10px}
.periodeveld legend{padding:0 6px;font-weight:600}
.periodeveld label{display:flex;align-items:center;gap:8px;min-width:0}
@media(max-width:520px){.periodeveld label{flex-wrap:wrap}}