.grm-drawer,.grm-drawer *{box-sizing:border-box}
/* Geen font:inherit hier: die verkorte eigenschap zet familie, maat, gewicht
   en regelhoogte in een keer terug naar de themafont van de balk, en dit blad
   laadt na het blad dat de tabs hun maat geeft. De knop-tabs (Categorieen en
   Meer) stonden daardoor in een andere letter dan de link-tabs, en de hogere
   tekst viel onder de vaste balkhoogte uit. De gedeelde tabklasse zet de
   letters al, voor knop en link gelijk. */
.grm-tabbar__tab--btn{
  border:0;
  background:none;
  cursor:pointer;
}
.grm-tabbar__ic-wrap{position:relative;display:inline-flex}
.grm-tabbar__badge,
.grm-drawer__tab-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:17px;
  height:17px;
  padding:0 4px;
  border-radius:999px;
  background:var(--gm-accent,#1668C7);
  color:var(--gm-cta-text,#FFFFFF);
  font-size:11px;
  font-weight:800;
  line-height:1;
}
.grm-tabbar__badge{
  position:absolute;
  top:-6px;
  right:-9px;
  border:2px solid var(--gm-bg,#fff);
}

.grm-drawer{
  position:fixed;
  inset:0;
  z-index:2000;
  visibility:hidden;
}
.grm-drawer.is-open{visibility:visible}
.grm-drawer__overlay{
  position:absolute;
  inset:0;
  background:rgba(4,30,66,.42);
  opacity:0;
  transition:opacity .22s var(--gm-ease,ease);
}
.grm-drawer.is-open .grm-drawer__overlay{opacity:1}
.grm-drawer__paneel{
  position:absolute;
  top:0;
  right:0;
  width:min(440px,100%);
  height:100%;
  display:flex;
  flex-direction:column;
  background:var(--gm-bg,#fff);
  box-shadow:-16px 0 48px rgba(4,30,66,.22);
  transform:translateX(100%);
  transition:transform .26s var(--gm-ease,ease);
}
.grm-drawer.is-open .grm-drawer__paneel{transform:none}
body.grm-drawer-open{overflow:hidden}

.grm-drawer__kop{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 12px 12px 16px;
  border-bottom:1px solid var(--gm-border,#D7DEE7);
}
.grm-drawer__tabs{display:flex;gap:4px;flex:1}
.grm-drawer__tab{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 14px;
  border:0;
  border-radius:999px;
  background:none;
  color:var(--gm-text-secondary,#55636E);
  font-family:var(--gm-font-display,'Inter Tight',sans-serif);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}
.grm-drawer__tab .material-symbols-rounded{font-size:18px}
.grm-drawer__tab.is-active{background:var(--gm-primary-50,#EDF2F8);color:var(--gm-primary,#103A63)}
.grm-drawer__tab-badge{min-width:16px;height:16px;font-size:10.5px}
.grm-drawer__sluit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  flex-shrink:0;
  border:0;
  border-radius:10px;
  background:none;
  color:var(--gm-text-secondary,#55636E);
  cursor:pointer;
}
.grm-drawer__sluit:hover{background:var(--gm-bg-hover,#EAEFF5)}

.grm-drawer__body{
  flex:1;
  overflow-y:auto;
  padding:16px;
}
.grm-drawer__lijst{list-style:none;margin:0 0 4px;padding:0;display:flex;flex-direction:column;gap:8px}
.grm-drawer__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px 12px 14px;
  border:1px solid var(--gm-border,#D7DEE7);
  border-radius:10px;
}
.grm-drawer__item-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.grm-drawer__naam{font-weight:700;color:var(--gm-text,var(--grm-ink,#041e42));font-size:14.5px}
.grm-drawer__naam a{color:inherit;text-decoration:none}
.grm-drawer__naam a:hover{color:var(--gm-primary,#103A63)}
.grm-drawer__plaats{color:var(--gm-text-secondary,#55636E);font-size:13px}
.grm-drawer__rm{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  flex-shrink:0;
  margin-left:auto;
  border:0;
  border-radius:8px;
  background:none;
  color:var(--gm-text-tertiary,var(--grm-ink-400,#7A8794));
  cursor:pointer;
}
.grm-drawer__rm:hover{background:var(--grm-canvas,#f5f7fa);color:var(--gm-danger,var(--grm-danger,#dc2626))}
.grm-drawer__rm .material-symbols-rounded{font-size:19px}

.grm-drawer__leeg{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:56px 24px;
  text-align:center;
  color:var(--gm-text-secondary,#55636E);
}
.grm-drawer__leeg .material-symbols-rounded{font-size:44px;color:var(--gm-text-tertiary,var(--grm-ink-400,#7A8794))}

.grm-drawer__form{margin-top:18px;padding-top:18px;border-top:1px solid var(--gm-border,#D7DEE7)}
.grm-drawer__form h3{margin:0 0 4px;font-family:var(--gm-font-display,'Inter Tight',sans-serif);font-size:17px}
.grm-drawer__form-sub{margin:0 0 14px;color:var(--gm-text-secondary,#55636E);font-size:13.5px}
.grm-drawer__rij{display:flex;gap:10px}
.grm-drawer__form input,
.grm-drawer__form textarea{
  width:100%;
  margin-bottom:10px;
  padding:11px 13px;
  border:1px solid var(--gm-border,#D7DEE7);
  border-radius:9px;
  font-family:inherit;
  font-size:14.5px;
  color:var(--gm-text,var(--grm-ink,#041e42));
  box-sizing:border-box;
}
.grm-drawer__form input:focus,
.grm-drawer__form textarea:focus{
  outline:0;
  border-color:var(--gm-primary,#103A63);
  box-shadow:0 0 0 3px var(--gm-primary-50,#EDF2F8);
}
.grm-drawer__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.grm-drawer__melding{margin:10px 0 0;font-size:13.5px;color:var(--gm-text-secondary,#55636E)}
.grm-drawer__melding.is-fout{color:var(--gm-danger,var(--grm-danger,#dc2626));font-weight:600}

.grm-drawer__klaar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:56px 24px;
  text-align:center;
}
.grm-drawer__klaar .material-symbols-rounded{font-size:52px;color:var(--gm-primary,#103A63);font-variation-settings:'FILL' 1}
.grm-drawer__klaar h3{margin:6px 0 0;font-family:var(--gm-font-display,'Inter Tight',sans-serif)}
.grm-drawer__klaar p{margin:0;color:var(--gm-text-secondary,#55636E)}

@media (max-width:600px){
  .grm-drawer__rij{flex-direction:column;gap:0}
}
.grm-drawer__voet{border-top:1px solid var(--grm-line,#D7DEE7);padding:12px 16px;background:#fff}
.grm-drawer__voet a{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;font-weight:700;color:var(--grm-brand,#103A63);text-decoration:none;padding:6px 0}
.grm-drawer__voet a:hover{text-decoration:underline}
.grm-drawer__voet .material-symbols-rounded{font-size:18px}