@charset "UTF-8";
/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
Document
========
*/
/**
Use a better box model (opinionated).
*/
*,
::before,
::after {
  box-sizing: border-box;
}

html {
  /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.15; /* 1. Correct the line height in all browsers. */
  -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
  tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
}

/*
Sections
========
*/
body {
  margin: 0; /* Remove the margin in all browsers. */
}

/*
Text-level semantics
====================
*/
/**
Add the correct font weight in Chrome and Safari.
*/
b,
strong {
  font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
Tabular data
============
*/
/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
  border-color: currentcolor;
}

/*
Forms
=====
*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
  padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Interactive
===========
*/
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}

:root {
  /* Spacing */
  --ui-spacing-xs: 0.5rem;
  --ui-spacing-s: 0.75rem;
  --ui-spacing-m: 1rem;
  --ui-spacing-l: 1.5rem;
  --ui-spacing-xl: 2rem;
  --ui-spacing-fluid: var(--ui-spacing-m);
  /* Gap */
  --ui-veld-gap: 0.875rem;
  --ui-cluster-gap: var(--ui-spacing-s);
  --ui-cluster-gap-s: var(--ui-spacing-xs);
  --ui-cluster-gap-l: var(--ui-spacing-m);
  /* Sizing */
  --ui-font-size-s: 0.6875rem;
  --ui-font-size-m: 0.75rem;
  --ui-font-size-l: 0.8125rem;
  --ui-font-size-xl: 0.875rem;
  --ui-font-size-2xl: 0.9375rem;
  --ui-font-size-3xl: 1.25rem;
  /* Radius */
  --ui-radius-s: 0.375rem;
  --ui-radius-m: 0.75rem;
  --mv-radius-full: 9999px;
  /* Background */
  --ui-background-primary: #F6F6F9;
  --ui-background-invert: #1D1C41;
  --ui-background-invert-gradient: #1e3561;
  /* Surface */
  --ui-surface-primary: #FFF;
  --ui-surface-secondary: #F6F6F9;
  /* Border */
  /* Stond als #B7CAD7, #c8d6e1, #b7c9de en #BFD0DB door de bestanden heen, vier
     tinten voor dezelfde lijn. Nu op één plek, zodat een donkere modus mogelijk
     blijft. --ui-border-grip is de greep van een resizer, iets lichter. */
  --ui-border-primary: #b7cad7;
  --ui-border-secondary: #c8d6e1;
  --ui-border-grip: #b7c9de;
  /* Control */
  --ui-control-primary: #d4e3ed;
  --ui-control-primary-hover: #A7D8F3;
  --ui-control-secondary: #FFF;
  --ui-control-tertiary: #e7eff4;
  --ui-control-brand: #1daaff;
  /* Type */
  --ui-text-primary: #1D1C41;
  --ui-text-secondary: #476580;
  --ui-text-brand: #1daaff;
  --ui-text-invert: #F6F6F9;
  --ui-text-invert-hightlight: #A7D8F3;
  /* Components */
  --ui-scrollbar-width: 0;
  --ui-sidebar-left-width: 15rem;
  --ui-sidebar-left-min-width: 10rem;
  --ui-sidebar-left-max-width: 35rem;
  --ui-sidebar-right-width: 20rem;
  --ui-sidebar-right-min-width: 12.5rem;
  --ui-sidebar-component-width: 20rem;
  --ui-sidebar-component-min-width: 12.5rem;
  --ui-sidebar-component-max-width: 35rem;
  --ui-sidebar-component-hide: 2.5rem;
  --ui-sidebar-split-width: 66%;
  --ui-sidebar-split-min-width: 12.5rem;
  --ui-sidebar-split-max-width: 80%;
  --ui-sidebar-split-height: 50%;
  --ui-sidebar-panel-width: 15rem;
  --ui-sidebar-panel-min-width: 11.25rem;
  --ui-sidebar-panel-max-width: 30rem;
  --ui-content-min-width: 15rem;
  /* Mobile indicator */
  --ui-mobile: 1;
}
@media screen and (min-width: 60rem) {
  :root {
    --ui-mobile: 0;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  inline-size: 100%;
}
@supports (block-size: 100dvh) {
  html,
  body {
    block-size: 100dvh;
  }
}

html {
  display: flex;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  overflow: auto;
  line-height: 135%;
  color: #fff;
  background: var(--ui-background-invert) linear-gradient(180deg, var(--ui-background-invert) 0%, var(--ui-background-invert-gradient) 100%);
}

@media (display-mode: standalone) {
  @supports (block-size: 100vh) {
    html,
    body {
      block-size: 100vh;
    }
  }
}
@media (display-mode: fullscreen) {
  @supports (block-size: 100vh) {
    html,
    body {
      block-size: 100vh;
    }
  }
}
a {
  color: inherit;
  text-decoration: none;
}

svg {
  fill: currentcolor;
}

* {
  user-select: none;
}

svg:not([width]) {
  inline-size: 1em;
}

svg:not([height]) {
  block-size: 1em;
}

.uikit {
  --ui-chrome-spacing-s: var(--ui-spacing-xs);
  --ui-chrome-spacing-m: var(--ui-spacing-m);
  --ui-chrome-spacing-l: var(--ui-spacing-l);
  --ui-content-box-padding: var(--ui-spacing-m);
  --ui-chrome-radius-s: var(--ui-radius-s);
  --ui-chrome-radius-m: var(--ui-radius-m);
  --ui-sidebar-left-progress: 0;
  --ui-sidebar-component-progress: 0;
  --ui-sidebar-split-progress: 0;
  --ui-sidebar-right-progress: 0;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  min-block-size: 35rem;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow: hidden;
  font-size: var(--ui-font-size-m);
}
@media screen and (min-width: 60rem) {
  .uikit {
    --ui-sidebar-left-progress: 1;
    --ui-sidebar-component-progress: 1;
    --ui-sidebar-split-progress: 1;
    --ui-sidebar-right-progress: 1;
  }
}
.uikit.has\:toggled-sidebar-left {
  --ui-sidebar-left-progress: 1;
}
@media screen and (min-width: 60rem) {
  .uikit.has\:toggled-sidebar-left {
    --ui-sidebar-left-progress: 0;
  }
}
.uikit.has\:toggled-sidebar-component {
  --ui-sidebar-component-progress: 1;
}
@media screen and (min-width: 60rem) {
  .uikit.has\:toggled-sidebar-component {
    --ui-sidebar-component-progress: 0;
  }
}
.uikit.has\:toggled-sidebar-split {
  --ui-sidebar-split-progress: 1;
}
@media screen and (min-width: 60rem) {
  .uikit.has\:toggled-sidebar-split {
    --ui-sidebar-split-progress: 0;
  }
}
.uikit.has\:toggled-sidebar-right {
  --ui-sidebar-right-progress: 1;
}
@media screen and (min-width: 60rem) {
  .uikit.has\:toggled-sidebar-right {
    --ui-sidebar-right-progress: 0;
  }
}
.uikit.is\:initializing *, .uikit.is\:resizing *, .uikit.has\:resizing * {
  transition-duration: 0ms !important;
  animation-duration: 0ms !important;
}

.header {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ui-chrome-spacing-m);
  padding: 0 var(--ui-chrome-spacing-m);
}

.sidebar-left-width-imitator {
  display: inherit;
  align-items: inherit;
  gap: inherit;
  transition: all 300ms cubic-bezier(0.25, 1, 0.7, 1);
}
@media screen and (min-width: 60rem) {
  .sidebar-left-width-imitator {
    inline-size: calc(3rem + ((var(--ui-sidebar-left-width)) - 3rem) * var(--ui-sidebar-left-progress));
    min-inline-size: var(--ui-sidebar-left-min-width);
    max-inline-size: min(33vw, var(--ui-sidebar-left-max-width));
    padding-inline: var(--ui-chrome-spacing-m);
    margin-inline: calc(var(--ui-chrome-spacing-m) * -1);
  }
}

.header__brand {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--ui-chrome-spacing-m);
  padding: var(--ui-chrome-spacing-m) 0;
  overflow: hidden;
  font-size: var(--ui-font-size-2xl);
  font-weight: 700;
}
.header__brand svg {
  flex: 0 0 auto;
  fill: var(--ui-text-invert-hightlight);
}

.brand-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header__search {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  padding: var(--ui-chrome-spacing-m) 0;
  text-align: center;
}

.header__switch {
  display: none;
  padding: var(--ui-chrome-spacing-m) 0;
}
@media screen and (min-width: 60rem) {
  .header__switch {
    display: flex;
  }
}
.header__switch select {
  block-size: 2.5rem;
  padding: 0.375rem 0.5rem;
  color: #333;
  background: var(--ui-control-secondary);
  border: none;
  border-radius: var(--ui-radius-s);
}

.header__utilities {
  display: none;
  gap: 0.75rem;
  padding: var(--ui-chrome-spacing-m) 0;
}
@media screen and (min-width: 30rem) {
  .header__utilities {
    display: flex;
  }
}

.header__utility {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 1px solid #31475A;
  border-radius: var(--ui-radius-s);
}

.header__profile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-spacing-m);
  padding: var(--ui-chrome-spacing-m) 0;
}
.header__profile svg {
  fill: currentcolor;
}

.profile {
  display: flex;
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0;
  color: currentcolor;
  cursor: pointer;
  background: transparent;
  border: none;
}

.profile__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 100%;
  font-size: 16px;
  font-weight: 700;
  background: var(--ui-control-brand);
  border-radius: 100%;
}

.profile__indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
}
.profile__indicator svg {
  inline-size: 1rem;
  block-size: 1rem;
}

.profile-dropdown {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-end: 0;
  z-index: 9;
  display: none;
  inline-size: 15rem;
  overflow: hidden;
  color: #000;
  background: var(--ui-surface-primary);
  border: 1px solid var(--ui-border-primary);
  border-radius: var(--ui-chrome-radius-s);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
}
.uikit.has\:toggled-profile .profile-dropdown {
  display: block;
}

.profile-dropdown ul {
  padding-inline-start: 0;
  margin: 0;
}
.profile-dropdown ul > ::marker {
  font-size: 0;
}
.profile-dropdown li + li {
  border-block-start: 1px solid #e0e0e0;
}
.profile-dropdown a {
  display: block;
  padding: 0.75em 1em;
}
.profile-dropdown a:hover, .profile-dropdown a:focus {
  background: #d4e3ee;
}

.layout {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  max-inline-size: 100%;
  padding-inline: var(--ui-chrome-spacing-s);
  padding-block-end: var(--ui-chrome-spacing-s);
  overflow: hidden;
}

.sidebar {
  position: relative;
  min-inline-size: 3rem;
  max-inline-size: 33vw;
}

.sidebar__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  max-block-size: 100%;
  overflow: hidden;
}
.sidebar__body > * {
  min-inline-size: calc(var(--ui-sidebar-right-min-width) - 0.5rem);
}
.sidebar__body .sidebar__content {
  flex: 1 1 auto;
  padding: var(--ui-spacing-m);
}

.sidebar__resizer {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 9;
  display: none;
  inline-size: var(--ui-chrome-spacing-m);
  cursor: ew-resize;
  background: transparent;
}
@media screen and (min-width: 60rem) {
  .sidebar__resizer {
    display: block;
  }
}

.sidebar__navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background: var(--ui-surface-primary);
  border-block-end: 1px solid var(--ui-border-primary);
}
.sidebar__navigation .cluster {
  flex: 0 0 auto;
}
.sidebar__navigation button {
  padding: 0;
  color: inherit;
  cursor: pointer;
  background: transparent;
  border: none;
}
.sidebar__navigation button svg {
  inline-size: 1rem;
  block-size: 1rem;
}

.sidebar__title {
  font-weight: 700;
}

.sidebar__search {
  margin-block-end: var(--ui-spacing-s);
}

.sidebar--left {
  display: flex;
  flex: 0 0 auto;
  min-inline-size: min(100vw - (env(safe-area-inset-left) + env(safe-area-inset-right) + 1rem), 25rem);
  max-block-size: 100%;
  padding-block-start: 0.5rem;
  margin-inline-start: calc(var(--ui-chrome-spacing-s) * -1);
  overflow: visible;
  transition: min-inline-size 300ms cubic-bezier(0.25, 1, 0.7, 1), inline-size 300ms cubic-bezier(0.25, 1, 0.7, 1);
  will-change: min-inline-size, inline-size;
}
@media screen and (min-width: 60rem) {
  .sidebar--left {
    inline-size: calc(3rem + ((var(--ui-sidebar-left-width)) - 3rem) * var(--ui-sidebar-left-progress));
    min-inline-size: var(--ui-sidebar-left-min-width);
    max-inline-size: min(33vw, var(--ui-sidebar-left-max-width));
  }
  .uikit.has\:toggled-sidebar-left .sidebar--left {
    min-inline-size: 3rem;
  }
}
.sidebar--left .sidebar__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-inline-size: min(20rem, max(var(--ui-sidebar-left-width), var(--ui-sidebar-left-min-width)));
  padding: 0;
  overflow: hidden;
}
@media screen and (min-width: 60rem) {
  .sidebar--left .sidebar__content {
    min-inline-size: min(min(33vw, 20rem), max(var(--ui-sidebar-left-width), var(--ui-sidebar-left-min-width)));
  }
}
.sidebar--left .sidebar__resizer {
  inset-inline-start: 100%;
}
.uikit.has\:toggled-sidebar-split .sidebar--left .sidebar__resizer {
  display: none;
}
@media screen and (min-width: 60rem) {
  .uikit.has\:toggled-sidebar-split .sidebar--left .sidebar__resizer {
    display: block;
  }
}

.sidebar--left .sidebar__resizer::after {
  position: absolute;
  content: " ";
  display: block;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 3px;
  block-size: 1rem;
  border-inline-end: 1px solid var(--ui-border-grip);
  border-inline-start: 1px solid var(--ui-border-grip);
  transition: border 100ms ease-in-out 120ms;
  transform: translate(-50%, -50%);
}
.uikit.has\:toggled-sidebar-left .sidebar--left .sidebar__resizer {
  display: none;
}

.sidebar--left .sidebar__resizer:hover::after, .sidebar--left .sidebar__resizer:focus::after {
  border-color: #000;
}
.sidebar--left[data-resizing] .sidebar__resizer::after {
  border-color: #000;
}
.uikit.has\:toggled-sidebar-left .sidebar--left .sidebar-toggle-left .is\:off {
  display: none;
}
@media screen and (min-width: 60rem) {
  .uikit.has\:toggled-sidebar-left .sidebar--left .sidebar-toggle-left .is\:off {
    display: block;
  }
}
.uikit.has\:toggled-sidebar-left .sidebar--left .sidebar-toggle-left .is\:on {
  display: block;
}
@media screen and (min-width: 60rem) {
  .uikit.has\:toggled-sidebar-left .sidebar--left .sidebar-toggle-left .is\:on {
    display: none;
  }
}

.sidebar--left .sidebar__swiper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  inline-size: 100vw;
  pointer-events: none;
  background: yellow;
  opacity: 0;
}

.sidebar--component {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% - var(--ui-sidebar-component-hide));
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  inline-size: var(--ui-sidebar-component-width);
  min-inline-size: min(var(--ui-sidebar-component-width), 100% - var(--ui-sidebar-component-hide) - var(--ui-chrome-spacing-m));
  max-inline-size: calc(100% - var(--ui-sidebar-component-hide) - var(--ui-chrome-spacing-m));
  transition: all 300ms cubic-bezier(0.25, 1, 0.7, 1) 0ms;
}
@media screen and (min-width: 60rem) {
  .uikit.has\:toggled-sidebar-component .sidebar--component {
    inline-size: var(--ui-sidebar-component-hide);
    min-inline-size: var(--ui-sidebar-component-hide);
  }
}

@media screen and (min-width: 60rem) {
  .sidebar--component {
    position: relative;
    left: 0;
    inline-size: calc(var(--ui-sidebar-component-width) * var(--ui-sidebar-component-progress));
    min-inline-size: var(--ui-sidebar-component-min-width);
    max-inline-size: min(33vw, var(--ui-sidebar-component-max-width));
  }
  .uikit.is\:resizing .sidebar--component {
    inline-size: calc(var(--ui-sidebar-component-hide) + (var(--ui-sidebar-component-width) - var(--ui-sidebar-component-hide)) * var(--ui-sidebar-component-progress));
    min-inline-size: var(--ui-sidebar-component-hide);
  }
}
.sidebar--component .sidebar__content {
  flex: 1 1 auto;
  padding: 1rem;
  background: var(--ui-surface-primary);
  border: 1px solid var(--ui-border-primary);
  border-radius: var(--ui-chrome-radius-s);
}
@media screen and (min-width: 60rem) {
  .sidebar--component .sidebar__content {
    min-inline-size: min(var(--ui-sidebar-component-width), var(--ui-sidebar-component-min-width));
    max-inline-size: 100%;
  }
}
.sidebar--component .sidebar__resizer {
  inset-inline-end: 100%;
}
.uikit.has\:toggled-sidebar-component .sidebar--component .sidebar__resizer {
  display: none;
}

.sidebar--component .sidebar__resizer::after {
  position: absolute;
  content: " ";
  display: block;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 3px;
  block-size: 1rem;
  border-inline-end: 1px solid var(--ui-border-grip);
  border-inline-start: 1px solid var(--ui-border-grip);
  transition: border 100ms ease-in-out 120ms;
  transform: translate(-50%, -50%);
}
.sidebar--component .sidebar__resizer:hover::after, .sidebar--component .sidebar__resizer:focus::after {
  border-color: #000;
}
.sidebar--component[data-resizing] .sidebar__resizer::after {
  border-color: #000;
}
.sidebar--component .sidebar__swiper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100vw;
  z-index: 99;
  inline-size: 200vw;
  pointer-events: none;
  background: yellow;
  opacity: 0;
}

.sidebar-overlay-toggle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  cursor: pointer;
  background: var(--ui-surface-primary);
  border-radius: var(--ui-radius-s);
  opacity: calc(0.75 - var(--ui-sidebar-component-progress) * 0.75);
  will-change: background, opacity;
  transition: background 300ms cubic-bezier(0.25, 1, 0.7, 1) 0ms, opacity 300ms cubic-bezier(0.25, 1, 0.7, 1) 0ms;
}
@media screen and (min-width: 60rem) {
  .sidebar-overlay-toggle {
    pointer-events: none;
  }
}
.uikit.has\:toggled-sidebar-component .sidebar-overlay-toggle {
  pointer-events: none;
}
@media screen and (min-width: 60rem) {
  .uikit.has\:toggled-sidebar-component .sidebar-overlay-toggle {
    pointer-events: auto;
  }
  .uikit.has\:toggled-sidebar-component .sidebar-overlay-toggle:hover, .uikit.has\:toggled-sidebar-component .sidebar-overlay-toggle:focus {
    background: var(--ui-control-brand);
    opacity: 0.5;
  }
}

.sidebar-overlay-toggle-left {
  position: absolute;
  top: 0;
  right: calc(100% + var(--ui-chrome-spacing-m));
  bottom: 0;
  z-index: 1;
  inline-size: 100vw;
  pointer-events: none;
  cursor: pointer;
  background: var(--ui-surface-primary);
  border-radius: var(--ui-radius-s);
  opacity: calc(var(--ui-sidebar-component-progress) * 0.75);
  will-change: opacity;
  transition: opacity 300ms cubic-bezier(0.25, 1, 0.7, 1) 0ms;
}
@media screen and (min-width: 60rem) {
  .sidebar-overlay-toggle-left {
    display: none;
  }
  .sidebar-overlay-toggle-left:hover, .sidebar-overlay-toggle-left:focus {
    background: var(--ui-control-brand);
  }
}
.uikit.has\:toggled-sidebar-component .sidebar-overlay-toggle-left {
  pointer-events: auto;
}

.sidebar--right {
  position: absolute;
  inset-block: 0 0.5rem;
  inset-inline-end: 0;
  z-index: 4;
  flex: 0 0 auto;
  flex-direction: column;
  inline-size: var(--ui-sidebar-right-width);
  max-inline-size: calc(100vw - (env(safe-area-inset-right) + env(safe-area-inset-left)) - 6rem);
  transition: transform 300ms cubic-bezier(0.25, 1, 0.7, 1), inline-size 300ms cubic-bezier(0.25, 1, 0.7, 1), margin 300ms cubic-bezier(0.25, 1, 0.7, 1);
  transform: translateX(calc((1 - var(--ui-sidebar-right-progress, 0)) * 100%));
  will-change: transform, inline-size, margin;
}
@media screen and (min-width: 60rem) {
  .sidebar--right {
    transform: translateX(calc((var(--ui-sidebar-right-progress, 0)) * 100%));
  }
}
.sidebar--right .sidebar__body {
  min-block-size: 100%;
  color: var(--ui-text-primary);
  background: var(--ui-background-primary);
  border-radius: var(--ui-chrome-radius-m) 0 0 var(--ui-chrome-radius-m);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.15), 0 0 24px rgba(0, 0, 0, 0.25);
}
@media screen and (min-width: 60rem) {
  .sidebar--right[data-sidebar-type=sidebar] {
    position: relative;
    inset-block-end: auto;
    min-inline-size: calc(100vw - (env(safe-area-inset-right) + env(safe-area-inset-left)) - 3rem);
    max-inline-size: 40vw;
    padding-inline-start: var(--ui-chrome-spacing-s);
    margin-inline-end: calc(var(--ui-chrome-spacing-s) * -1);
    transform: none;
    animation: slide-out-right 300ms cubic-bezier(0.25, 1, 0.7, 1) forwards;
  }
  .uikit.has\:toggled-sidebar-right .sidebar--right[data-sidebar-type=sidebar] {
    display: flex;
    min-inline-size: var(--ui-sidebar-right-min-width);
    margin-inline-end: 0;
    animation: slide-in-right 300ms cubic-bezier(0.25, 1, 0.7, 1);
  }
  .sidebar--right[data-sidebar-type=sidebar] .sidebar__body {
    border-radius: var(--ui-chrome-radius-m);
  }
}
.sidebar--right[data-sidebar-type=sidebar] [data-sidebar-type-toggle=sidebar] {
  display: none;
}
.sidebar--right[data-sidebar-type=cover] {
  position: fixed;
  inset-inline: 0.5rem;
  inset-block-start: 0.5rem;
  z-index: 11;
  inline-size: calc(100% - 1rem);
  max-inline-size: calc(100% - 1rem);
  border-radius: var(--ui-chrome-radius-m);
}
.sidebar--right[data-sidebar-type=cover] [data-sidebar-type-toggle=cover] {
  display: none;
}
.sidebar--right[data-sidebar-type=float] .sidebar__resizer {
  inset-inline-start: 0;
}
.sidebar--right[data-sidebar-type=float] [data-sidebar-type-toggle=float] {
  display: none;
}
.sidebar--right .sidebar__resizer {
  inset-inline: 0 auto;
  display: none;
  inline-size: var(--ui-chrome-spacing-s);
}
.uikit.has\:toggled-sidebar-right .sidebar--right .sidebar__resizer {
  display: block;
}

.sidebar--right .sidebar__resizer::before {
  position: absolute;
  content: " ";
  display: block;
  inset-block: 0;
  inset-inline: 0;
  inline-size: var(--ui-chrome-spacing-s);
  block-size: 100%;
  background: linear-gradient(to bottom, rgba(29, 170, 255, 0), #1daaff, #1daaff, rgba(29, 170, 255, 0));
  opacity: 0;
  transition: opacity 100ms ease-in-out 120ms;
}
.sidebar--right .sidebar__resizer:hover::before, .sidebar--right .sidebar__resizer:focus::before {
  opacity: 1;
}
.sidebar--right .sidebar__resizer:hover::after, .sidebar--right .sidebar__resizer:focus::after {
  border-color: #000;
}
.sidebar--right .sidebar__resizer::after {
  position: absolute;
  content: " ";
  display: block;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 3px;
  block-size: 1rem;
  border-inline: 1px solid var(--ui-border-grip);
  transition: border 100ms ease-in-out 120ms;
  transform: translate(-50%, -50%);
}
.sidebar--right[data-resizing] .sidebar__resizer::before {
  opacity: 1;
}
.sidebar--right[data-resizing] .sidebar__resizer::after {
  border-color: #000;
}
@media screen and (min-width: 60rem) {
  .sidebar--right {
    min-inline-size: 3rem;
  }
}
.sidebar--right .sidebar__swiper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  inline-size: 100vw;
  pointer-events: none;
  background: yellow;
  opacity: 0;
}

@keyframes slide-out-right {
  from {
    min-inline-size: min(var(--ui-sidebar-right-width), 40vw);
    max-inline-size: min(var(--ui-sidebar-right-width), 40vw);
  }
  to {
    min-inline-size: 0;
    max-inline-size: 0;
  }
}
@keyframes slide-in-right {
  from {
    min-inline-size: 0;
    max-inline-size: 0;
  }
  to {
    min-inline-size: min(var(--ui-sidebar-right-width), 40vw);
    max-inline-size: min(var(--ui-sidebar-right-width), 40vw);
  }
}
.sidebar__navigation [data-sidebar-type-toggle=sidebar],
.sidebar__navigation [data-sidebar-type-toggle=float] .layer-icon {
  display: none;
}
@media screen and (min-width: 60rem) {
  .sidebar__navigation [data-sidebar-type-toggle=sidebar],
  .sidebar__navigation [data-sidebar-type-toggle=float] .layer-icon {
    display: block;
  }
}

.sidebar__navigation [data-sidebar-type-toggle=float] .close-icon {
  display: none;
}

[data-sidebar-type=cover] .close-icon {
  display: block !important;
}
@media screen and (min-width: 60rem) {
  [data-sidebar-type=cover] .close-icon {
    display: none !important;
  }
}

.sidebar--split {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  z-index: 3;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  inline-size: min(100% - var(--ui-content-min-width) - var(--ui-chrome-spacing-m), var(--ui-sidebar-split-width));
  min-inline-size: var(--ui-sidebar-split-min-width);
  max-inline-size: var(--ui-sidebar-split-max-width);
  transform: translateX(calc((var(--ui-sidebar-split-progress, 0)) * -100%));
  transition: all 300ms cubic-bezier(0.25, 1, 0.7, 1) 0ms;
}
@media screen and (min-width: 0) and (max-width: 59.9375rem) {
  .uikit.has\:toggled-sidebar-split .sidebar--split {
    inline-size: 100%;
    max-inline-size: 100%;
  }
}

@media screen and (min-width: 60rem) {
  .uikit.has\:split-vertical .sidebar--split {
    inline-size: 100%;
    max-inline-size: 100%;
    block-size: var(--ui-sidebar-split-height);
    min-block-size: 12.5rem;
    max-block-size: 75%;
  }
}

@media screen and (min-width: 60rem) {
  .sidebar--split {
    position: relative;
    left: auto;
    transform: none;
  }
}
.sidebar--split .sidebar__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--ui-chrome-spacing-m);
  max-inline-size: 100%;
  padding: 1rem;
  background: var(--ui-surface-primary);
  border: 1px solid var(--ui-border-primary);
  border-radius: var(--ui-chrome-radius-s);
}
.sidebar--split .sidebar__resizer {
  inset-inline-end: 100%;
}
.uikit.has\:toggled-sidebar-split .sidebar--split .sidebar__resizer {
  display: none;
}
@media screen and (min-width: 60rem) {
  .uikit.has\:toggled-sidebar-split .sidebar--split .sidebar__resizer {
    display: block;
  }
}

.sidebar--split .sidebar__resizer::after {
  position: absolute;
  content: " ";
  display: block;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 3px;
  block-size: 1rem;
  border-inline-end: 1px solid var(--ui-border-grip);
  border-inline-start: 1px solid var(--ui-border-grip);
  transition: border 100ms ease-in-out 120ms;
  transform: translate(-50%, -50%);
}
.sidebar--split .sidebar__resizer:hover::after, .sidebar--split .sidebar__resizer:focus::after {
  border-color: #000;
}
.uikit.has\:split-vertical .sidebar--split .sidebar__resizer {
  inset-inline: 0;
  inset-block-start: calc(var(--ui-chrome-spacing-m) * -1);
  inline-size: 100%;
  block-size: var(--ui-chrome-spacing-m);
  cursor: ns-resize;
}
.uikit.has\:split-vertical .sidebar--split .sidebar__resizer::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.sidebar--split[data-resizing] .sidebar__resizer::after {
  border-color: #000;
}
.sidebar--split .sidebar__swiper {
  position: absolute;
  inset: 0;
  z-index: 99;
  inline-size: 200vw;
  pointer-events: none;
  background: yellow;
  opacity: 0;
}

@media screen and (min-width: 60rem) {
  .toggle-split-overlay {
    display: none;
  }
}

@media screen and (min-width: 60rem) {
  .close-split-overlay {
    display: none;
  }
}

.sidebar--panel {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  inline-size: var(--ui-sidebar-panel-width);
  min-inline-size: var(--ui-sidebar-panel-min-width);
  max-inline-size: var(--ui-sidebar-panel-max-width);
  background: var(--ui-surface-primary);
  border-inline-end: 1px solid var(--ui-border-primary);
  transition: inline-size 300ms cubic-bezier(0.25, 1, 0.7, 1) 0ms, min-inline-size 300ms cubic-bezier(0.25, 1, 0.7, 1) 0ms;
}
.uikit.has\:toggled-sidebar-panel .sidebar--panel {
  inline-size: 0;
  min-inline-size: 0;
  border-inline-end-width: 0;
}

@media screen and (min-width: 0) and (max-width: 59.9375rem) {
  .sidebar--panel {
    display: none;
  }
}
.sidebar--panel .sidebar__body {
  inline-size: 100%;
  min-block-size: 0;
}
.sidebar--panel .sidebar__content {
  padding: var(--ui-spacing-m);
}
.sidebar--panel .sidebar__resizer {
  inset-inline: 100% auto;
}
.uikit.has\:toggled-sidebar-panel .sidebar--panel .sidebar__resizer {
  display: none;
}

.sidebar--panel .sidebar__resizer::after {
  position: absolute;
  content: " ";
  display: block;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 3px;
  block-size: 1rem;
  border-inline: 1px solid var(--ui-border-grip);
  transition: border 100ms ease-in-out 120ms;
  transform: translate(-50%, -50%);
}
.sidebar--panel .sidebar__resizer:hover::after, .sidebar--panel .sidebar__resizer:focus::after {
  border-color: #000;
}
.sidebar--panel[data-resizing] .sidebar__resizer::after {
  border-color: #000;
}

.component {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--ui-spacing-fluid);
  min-inline-size: 100%;
  max-inline-size: 100%;
  padding: var(--ui-spacing-fluid);
  overflow: hidden;
  color: var(--ui-text-primary);
  background: var(--ui-background-primary);
  border-radius: var(--ui-chrome-radius-m);
  transition: transform 300ms cubic-bezier(0.25, 1, 0.7, 1);
  will-change: transform, min-inline-size, inline-size;
}
@media screen and (min-width: 60rem) {
  .component {
    min-inline-size: 0;
  }
}
.uikit:has(.sidebar--left) .component {
  min-inline-size: calc(100vw - (env(safe-area-inset-right) + env(safe-area-inset-left)) - 3rem - 0.5rem);
  transform: translateX(max(max(-25rem + 3rem, -100% + 0.5rem) * (1 - var(--ui-sidebar-left-progress))));
}
@media screen and (min-width: 60rem) {
  .uikit:has(.sidebar--left) .component {
    min-inline-size: 0;
    transform: none;
  }
}

.uikit.has\:toggled-sidebar-left .component > *:not(.sidebar-overlay-toggle) {
  pointer-events: none;
}
@media screen and (min-width: 60rem) {
  .uikit.has\:toggled-sidebar-left .component > *:not(.sidebar-overlay-toggle) {
    pointer-events: auto;
  }
}

.component > .sidebar-overlay-toggle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: none;
  inline-size: 2.5rem;
  cursor: pointer;
  background: var(--ui-surface-primary);
  border-radius: var(--ui-radius-s);
  opacity: calc(0.75 - var(--ui-sidebar-left-progress) * 0.75);
  will-change: background, opacity;
  transition: background 300ms cubic-bezier(0.25, 1, 0.7, 1) 0ms, opacity 300ms cubic-bezier(0.25, 1, 0.7, 1) 0ms;
}
.uikit.has\:toggled-sidebar-left .component > .sidebar-overlay-toggle {
  display: block;
}
@media screen and (min-width: 60rem) {
  .uikit.has\:toggled-sidebar-left .component > .sidebar-overlay-toggle {
    display: none;
  }
}

@media screen and (min-width: 60rem) {
  .component > .sidebar-overlay-toggle {
    display: none;
  }
}

.component:has(> .sidebar--panel) {
  flex-direction: row;
  gap: 0;
  padding: 0;
}
.component:has(> .sidebar--panel) > .component__body {
  padding: var(--ui-spacing-fluid);
}

.component__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--ui-spacing-fluid);
  min-inline-size: 0;
  min-block-size: 0;
}

.toolbar {
  position: relative;
  z-index: 4;
  display: flex;
}

.filters {
  position: relative;
  z-index: 4;
  display: flex;
  flex: 0 0 auto;
  min-block-size: 2.5rem;
  background: var(--ui-surface-primary);
  border: 1px solid var(--ui-border-primary);
  border-radius: var(--ui-chrome-radius-s);
}

.filters > form {
  display: contents;
}

.filters__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0;
  color: inherit;
  background: transparent;
  border: none;
}
.filters__icon svg {
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--ui-text-brand);
}
.filters__icon[type=button] {
  cursor: pointer;
}

.filter {
  position: relative;
}
.filter button {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5em;
  block-size: calc(100% + 2px);
  padding: 0 1em;
  margin: -1px;
  color: inherit;
  cursor: pointer;
  background: var(--ui-surface-primary);
  border: 1px solid var(--ui-border-primary);
}
.filter button:hover, .filter button:focus {
  background: #e5f0f6;
}
.filter button[aria-expanded=true] {
  background: #d4e2ed;
}

.filter-dropdown {
  position: absolute;
  z-index: 5;
  inset-block-start: 100%;
  inset-inline-start: -1px;
  inline-size: calc(100vw - (env(safe-area-inset-right) + env(safe-area-inset-left)));
  max-inline-size: 20rem;
  padding: 1rem;
  background: var(--ui-surface-primary);
  border: 1px solid var(--ui-border-primary);
  border-radius: 0 0 var(--ui-chrome-radius-s) var(--ui-chrome-radius-s);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
}
.filter-dropdown label {
  display: flex;
  gap: 0.6em;
  align-items: flex-start;
  padding-block: 0.1875rem;
  cursor: pointer;
}
.filter-dropdown label input {
  margin-block-start: 0.1em;
}
.filter-dropdown .button {
  inline-size: 100%;
  margin-block-start: 0.75rem;
}

.reset-filters {
  display: flex;
  align-items: center;
  padding: 1em;
  margin-inline-start: auto;
}
.reset-filters button {
  text-decoration: underline;
  cursor: pointer;
  background: transparent;
  border: none;
}

.filters__search {
  position: relative;
  display: flex;
  flex: 1 1 auto;
}
.filters__search label {
  position: absolute;
  overflow: hidden;
  backface-visibility: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: none;
}
.filters__search input {
  inline-size: 100%;
  block-size: 100%;
  padding-inline: 2.5rem 1rem;
  border: none;
  border-radius: 0;
}
.filters__search button {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0;
  line-height: 1;
  color: #93AFC2;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: 0;
}
.filters__search button:hover, .filters__search button:focus {
  color: #000;
  background: #d4e3ee;
}
.filters__search button svg {
  display: block;
}

.filters__overflow {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  margin: -1px;
  overflow: hidden;
  border: 1px solid var(--ui-border-primary);
}

.overflow__items {
  display: flex;
  flex: 1 1 auto;
  max-inline-size: 100%;
}

.filters__link {
  display: flex;
  align-items: center;
  block-size: 2.625rem;
  padding: 0 1rem;
  white-space: nowrap;
}
.filters__link:not(:first-child) {
  border-inline-start: 1px solid var(--ui-border-primary);
}
.filters__link:hover, .filters__link:focus {
  background: #e5f0f6;
}
.filters__link.is\:active {
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--ui-text-brand);
}

.main {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  gap: var(--ui-chrome-spacing-m);
  overflow: hidden;
  transition: transform 300ms cubic-bezier(0.25, 1, 0.7, 1);
  will-change: transform;
}
.uikit:has(.sidebar--component) .main .content,
.uikit:has(.sidebar--component) .main .sidebar--component {
  transform: translateX(calc((min(var(--ui-sidebar-component-width), 100%) - var(--ui-sidebar-component-hide)) * -1 * var(--ui-sidebar-component-progress)));
}
@media screen and (min-width: 60rem) {
  .uikit:has(.sidebar--component) .main .content,
  .uikit:has(.sidebar--component) .main .sidebar--component {
    transform: none;
  }
}

.uikit.has\:split-vertical .main:has(.sidebar--split) {
  flex-direction: column;
}

.content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  transition: all 300ms cubic-bezier(0.25, 1, 0.7, 1);
}
@media screen and (min-width: 30rem) {
  .content {
    min-inline-size: var(--ui-content-min-width);
  }
}
.main:has(.sidebar--component) .content {
  margin-inline-end: calc(var(--ui-sidebar-component-hide) + var(--ui-chrome-spacing-m));
}
@media screen and (min-width: 60rem) {
  .main:has(.sidebar--component) .content {
    margin-inline-end: 0;
  }
}

/* Overflow
   ========================================================================== */
.overflow-wrapper {
  flex: 1 1 auto;
  block-size: 100%;
  overflow: hidden;
}

.overflow {
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-color: var(--ui-control-brand) transparent;
  scrollbar-width: thin;
}
.overflow:has(> table) {
  scrollbar-color: var(--ui-control-brand) var(--ui-control-tertiary);
}

.overflow--fill {
  block-size: 100%;
}

.overflow--no-style {
  scrollbar-width: none;
}

.toggle-wrapper {
  display: none;
}
.toggle-wrapper button {
  padding: 0;
  color: inherit;
  cursor: pointer;
  background: transparent;
  border: none;
}

.uikit:has(.sidebar--left:not([hidden])) .toggle-wrapper--sidebar-left {
  display: block;
}

.uikit:has(.sidebar--right:not([hidden])) .toggle-wrapper--sidebar-right {
  display: block;
}

.uikit:has(.sidebar--component:not([hidden])) .toggle-wrapper--sidebar-component {
  display: flex;
}

.uikit:has(.sidebar--panel:not([hidden])) .toggle-wrapper--sidebar-panel {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.sidebar-toggle-left {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  margin: -0.5rem;
}

.uikit.has\:toggled-sidebar-right .sidebar-toggle-right {
  color: var(--ui-control-brand);
}

.uikit.has\:toggled-sidebar-panel .sidebar-toggle-panel {
  color: var(--ui-control-brand);
}

.search-wrapper {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  z-index: 9;
  display: none;
  padding: 0 1rem;
}
.uikit.has\:toggled-search .search-wrapper {
  display: block;
}

@media screen and (min-width: 60rem) {
  .search-wrapper {
    position: static;
    display: flex;
    inline-size: 100%;
    padding: 0;
  }
}

.toggle-search {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0;
  color: inherit;
  cursor: pointer;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.66);
  border-radius: 100%;
}
@media screen and (min-width: 60rem) {
  .toggle-search {
    display: none;
  }
}

.search {
  position: relative;
  inline-size: 100%;
  max-inline-size: 25rem;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}
.search [type=search] {
  inline-size: 100%;
  block-size: 2.5rem;
  padding-inline: 2.5rem 1rem;
  font-size: 1rem;
  background: var(--ui-control-secondary);
  border: none;
  border-radius: var(--ui-radius-s);
}
.search button {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0;
  line-height: 1;
  color: #93AFC2;
  cursor: pointer;
  background: transparent;
  border: none;
  border-radius: var(--ui-radius-s) 0 0 var(--ui-radius-s);
}
.search button:hover, .search button:focus {
  color: #000;
  background: #d4e3ee;
}
.search button svg {
  display: block;
}

.sidebar__tabs,
.content__tabs--map {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  margin-block-end: -1px;
}
.sidebar__tabs ul,
.content__tabs--map ul {
  display: flex;
  gap: 0.5rem;
  padding-inline-start: 0;
  margin: 0;
}
.sidebar__tabs ul > ::marker,
.content__tabs--map ul > ::marker {
  font-size: 0;
}
.sidebar__tabs ul li,
.content__tabs--map ul li {
  flex: none;
  white-space: nowrap;
  padding-block-end: 1px;
}
.sidebar__tabs ul a,
.content__tabs--map ul a {
  display: flex;
  padding: 0.65em 1em;
  border: 1px solid transparent;
  border-block-end-width: 0;
  border-radius: 0.5em 0.5em 0 0;
}
.sidebar__tabs ul a:hover, .sidebar__tabs ul a:focus,
.content__tabs--map ul a:hover,
.content__tabs--map ul a:focus {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(183, 202, 215, 0.5);
}
.sidebar__tabs ul .is\:active,
.content__tabs--map ul .is\:active {
  padding-block-end: 0;
}
.sidebar__tabs ul .is\:active a,
.content__tabs--map ul .is\:active a {
  block-size: 100%;
  background: var(--ui-control-secondary);
  border-color: var(--ui-border-primary);
}

.tab-content {
  display: none;
  overflow: hidden;
}
.tab-content.is\:active {
  display: flex;
  flex-direction: column;
  gap: var(--ui-veld-gap);
}
.tab-content .form-group--groeit {
  flex: 1;
  min-block-size: 0;
}

.content__tabs--map + .box {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-block-size: 0;
}
.content__tabs--map + .box > .tab-content.is\:active {
  flex: 1 1 auto;
  min-block-size: 0;
}
.content__tabs--map + .box > .tab-content.is\:active > .overflow {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--ui-veld-gap);
  min-block-size: 0;
}

.content:has(> .content__tabs--map li:first-child.is\:active) > .box {
  border-start-start-radius: 0;
}

.sidebar--component:has(.sidebar__tabs :first-child.is\:active) .sidebar__content {
  border-start-start-radius: 0;
}

.content__tabs {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--ui-control-primary);
  font-size: var(--ui-font-size-l);
}
.content__tabs.content__tabs--center ul {
  justify-content: center;
}
.content__tabs ul {
  display: flex;
  gap: 0.5rem;
  padding-inline-start: 0;
  margin: 0 0 -2px;
}
.content__tabs ul > ::marker {
  font-size: 0;
}
.content__tabs ul li {
  flex: none;
  white-space: nowrap;
  padding-block-end: 1px;
}
.content__tabs ul a {
  display: flex;
  padding: 0.65em;
  opacity: 0.65;
  border-block-end: 2px solid transparent;
}
.content__tabs ul a svg {
  fill: #152937;
}
.content__tabs ul a:hover, .content__tabs ul a:focus {
  opacity: 0.85;
}
.content__tabs ul .is\:active {
  font-weight: bold;
}
.content__tabs ul .is\:active a {
  opacity: 1;
  border-color: var(--ui-control-brand);
}

.content__tabs--box {
  padding: 0.25rem;
  background: #fff;
  border: 1px solid var(--ui-border-secondary);
  border-radius: var(--ui-chrome-radius-s);
}
.content__tabs--box ul {
  gap: 0.25rem;
  margin: 0;
}
.content__tabs--box ul li {
  padding-block-end: 0;
}
.content__tabs--box ul a {
  padding: 0.5em 1em;
  border: 0;
  border-radius: var(--ui-chrome-radius-s);
}
.content__tabs--box ul a:hover, .content__tabs--box ul a:focus {
  background: rgba(212, 227, 237, 0.5);
  opacity: 0.85;
}
.content__tabs--box ul .is\:active a {
  background: var(--ui-control-primary);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  opacity: 1;
}
.content__tabs--box ul .is\:active a:hover, .content__tabs--box ul .is\:active a:focus {
  background: var(--ui-control-primary);
}

.navigation-wrapper {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}
.navigation-wrapper hr {
  inline-size: 100%;
  block-size: 1px;
  margin: 1.5rem 0;
  background: rgba(255, 255, 255, 0.2);
  border: none;
}
.navigation-wrapper .navigation--stick-to-bottom {
  margin-block-start: auto;
}

.navigation__heading {
  padding: var(--ui-spacing-xs) var(--ui-spacing-m) var(--ui-spacing-m);
  font-size: var(--ui-font-size-m);
  font-weight: 400;
  color: var(--ui-text-invert-hightlight);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  position: relative;
}
.navigation__heading::before {
  position: absolute;
  content: " ";
  display: block;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 100%;
  text-indent: 0;
  content: "...";
  opacity: 0;
}
@media screen and (min-width: 0) and (max-width: 59.9375rem) {
  .navigation__heading {
    text-indent: -9999px;
  }
  .navigation__heading::before {
    opacity: 1;
  }
  .uikit.has\:toggled-sidebar-left .navigation__heading {
    text-indent: 0;
  }
  .uikit.has\:toggled-sidebar-left .navigation__heading::before {
    opacity: 0;
  }
}
@media screen and (min-width: 60rem) {
  .uikit.has\:toggled-sidebar-left .navigation__heading {
    text-indent: -9999px;
  }
  .uikit.has\:toggled-sidebar-left .navigation__heading::before {
    opacity: 1;
  }
}

.navigation__list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-inline: 0 var(--ui-chrome-spacing-s);
  margin: 0;
}
.navigation__list > ::marker {
  font-size: 0;
}
.navigation__list li {
  position: relative;
  min-block-size: 2rem;
  padding-inline-start: 0.625rem;
  position: relative;
}
.navigation__list li::before {
  position: absolute;
  content: " ";
  display: block;
  inset-block: 0.25rem;
  inset-inline-start: 0;
  inline-size: 0.25rem;
  block-size: calc(var(--ui-font-size-xl) + 0.5rem);
  background: var(--ui-control-brand);
  border-radius: 0 3px 3px 0;
  opacity: 0;
}
.navigation__list a {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  inline-size: 100%;
  padding: 0.375rem 0.5rem;
  overflow: hidden;
  font-size: var(--ui-font-size-xl);
  line-height: 1em;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-s);
}
.navigation__list a svg {
  flex: 0 0 auto;
  inline-size: 16px;
  block-size: 16px;
}
.navigation__list a:hover, .navigation__list a:focus {
  background: #283b65;
  border-color: #3d5075;
}
.navigation__list .icon-wrapper {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: 1rem;
  block-size: 1rem;
  color: var(--ui-text-invert-hightlight);
}
.navigation__list .icon-wrapper svg {
  fill: currentcolor;
}
.navigation__list .navigation__item {
  overflow: hidden;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navigation__list .is\:active::before {
  opacity: 1;
}
.navigation__list .is\:active > a {
  background: #1e3561;
  border-color: rgba(255, 255, 255, 0.15);
}
.navigation__list .is\:active > a > .icon-wrapper {
  color: var(--ui-text-brand);
}
.navigation__list .is\:active > ul {
  display: flex;
}
.navigation__list .is\:active > .nav-toggle {
  transform: rotate(90deg);
}
.navigation__list .is\:toggled > ul {
  display: block;
}
.navigation__list .is\:toggled > .nav-toggle {
  transform: rotate(90deg);
}
.navigation__list .is\:toggled.is\:active > ul {
  display: none;
}
.navigation__list .is\:toggled.is\:active > .nav-toggle {
  transform: rotate(0deg);
}
.navigation__list ul {
  position: relative;
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 1.5rem;
  margin-top: 0.25rem;
  list-style: none;
  position: relative;
}
.navigation__list ul::before {
  position: absolute;
  content: " ";
  display: block;
  top: 0.1875rem;
  bottom: 0.1875rem;
  left: 1rem;
  inline-size: 0.125rem;
  background: rgba(255, 255, 255, 0.2);
}
.navigation__list ul li::before {
  inset-inline-start: -0.5rem;
  z-index: -1;
  inline-size: 0.125rem;
  border-radius: 0;
  background: transparent;
}
.navigation__list ul li.is\:active a {
  font-weight: bold;
}
.navigation__list ul li.is\:active a:not(:hover) {
  background: transparent;
  border-color: transparent;
}
.navigation__list ul a {
  inline-size: calc(100% + 2.125rem);
  padding-left: calc(2.125rem + 0.375rem);
  margin-left: calc(2.125rem * -1);
  overflow: unset;
}
.navigation__list ul a .navigation__item {
  overflow: unset;
  white-space: unset;
  min-inline-size: 5rem;
}
.navigation__list ul a:has(.icon-wrapper) {
  transition: transform 300ms cubic-bezier(0.25, 1, 0.7, 1);
  transform: translateX(calc((2.125rem - 0.125rem) * (1 - min(var(--ui-sidebar-left-progress) * 1.33, 1)) * -1));
  will-change: transform;
}
.navigation__list ul a .icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 1rem;
  block-size: 1rem;
  background: rgba(29, 28, 65, calc(1 - var(--ui-sidebar-left-progress)));
}
.navigation__list ul a .icon-wrapper svg {
  inline-size: 0.75rem;
  block-size: 0.75rem;
}
.navigation__list ul a:hover .icon-wrapper, .navigation__list ul a:focus .icon-wrapper {
  background: transparent;
}
.navigation__list ul ul {
  padding-left: 0.75rem;
  pointer-events: none;
}
.uikit.has\:toggled-sidebar-left .navigation__list ul ul {
  pointer-events: auto;
}

@media screen and (min-width: 60rem) {
  .navigation__list ul ul {
    pointer-events: auto;
  }
}
.navigation__list ul ul a {
  gap: 0.625rem;
  inline-size: calc(100% + 1.625rem);
  padding-left: calc(1.625rem + 0.375rem);
  margin-left: calc(1.625rem * -1);
}
.navigation__list ul ul a:has(.icon-wrapper) {
  transform: none;
}
.navigation__list ul ul::before {
  left: 0.625rem;
}

.navigation--stick-to-bottom {
  flex: 0 0 auto;
}

.nav-toggle {
  position: absolute;
  top: 0;
  right: 0;
  inline-size: 1.875rem;
  block-size: 1.875rem;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: none;
}
.nav-toggle::before {
  display: inline-block;
  inline-size: 8px;
  block-size: 8px;
  font-size: 10px;
  color: var(--ui-text-invert-hightlight);
  content: " ";
  transition: transform 0.2s;
  transform: rotate(-90deg);
  background-color: currentcolor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' preserveAspectRatio='xMidYMid meet'%3E%3Cpath d='M3.71027 5.88255C3.86985 6.03915 4.1279 6.03915 4.28578 5.88255L7.54702 2.68388C7.7066 2.52728 7.7066 2.27405 7.54702 2.11912C7.38744 1.96418 7.12939 1.96252 6.97151 2.11912L4.00057 5.03457L1.02794 2.11745C0.868356 1.96085 0.610309 1.96085 0.452425 2.11745C0.29454 2.27405 0.292843 2.52728 0.452425 2.68222L3.71027 5.88255Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' preserveAspectRatio='xMidYMid meet'%3E%3Cpath d='M3.71027 5.88255C3.86985 6.03915 4.1279 6.03915 4.28578 5.88255L7.54702 2.68388C7.7066 2.52728 7.7066 2.27405 7.54702 2.11912C7.38744 1.96418 7.12939 1.96252 6.97151 2.11912L4.00057 5.03457L1.02794 2.11745C0.868356 1.96085 0.610309 1.96085 0.452425 2.11745C0.29454 2.27405 0.292843 2.52728 0.452425 2.68222L3.71027 5.88255Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.nav-toggle::after {
  position: absolute;
  z-index: -1;
  inline-size: 24px;
  block-size: 24px;
  content: " ";
  background: #283b65;
  border: 1px solid #3d5075;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  inset: 50%;
}
.nav-toggle:hover::after {
  opacity: 1;
}

.cluster {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-cluster-gap);
}

.cluster--s {
  gap: var(--ui-cluster-gap-s);
}

.cluster--l {
  gap: var(--ui-cluster-gap-l);
}

.cluster--fill {
  justify-content: space-between;
}

.cluster--top {
  align-items: flex-start;
}

.flag-object {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.flag-object__aside {
  flex: 0 0 auto;
}

.flag-object__aside--stretch {
  align-self: stretch;
}

.flag-object__body {
  flex: 1 1 auto;
  min-inline-size: 50%;
}

.flag-object--nowrap {
  flex-wrap: nowrap;
}

.flag-object--top {
  align-items: flex-start;
}

.flag-object--bottom {
  align-items: flex-end;
}

.flag-object--inline-from\:tablet {
  flex-flow: column nowrap;
}
@media screen and (min-width: 30rem) {
  .flag-object--inline-from\:tablet {
    flex-direction: row;
  }
}
.flag-object--inline-from\:tablet .test {
  align-items: flex-start;
}

.grid {
  display: flex;
  flex-direction: column;
  gap: var(--ui-spacing-fluid);
  inline-size: 100%;
}

.grid--grow {
  block-size: 100%;
}
.grid--grow > .row {
  flex-grow: 1;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-spacing-fluid);
  inline-size: 100%;
}
.row > * {
  flex-basis: calc((30rem - 100%) * 999);
  flex-grow: 1;
}

.stack {
  padding-inline-start: 0;
  margin-block: 0;
  list-style: none;
}
.stack > * + * {
  margin-block-start: 1.5rem;
}

.stack--s > * + * {
  margin-block-start: 0.5rem;
}

.stack--xs > * + * {
  margin-block-start: 0.33rem;
}

.box {
  padding: var(--ui-content-box-padding);
  background: #fff;
  border: 1px solid var(--ui-border-secondary);
  border-radius: var(--ui-chrome-radius-s);
  box-shadow: 0 1px 4px rgba(200, 214, 225, 0.5);
}

.box--grow {
  block-size: 100%;
}

.box-padding {
  padding: var(--ui-content-box-padding);
}

.box__content {
  margin: calc(var(--ui-content-box-padding) * -1);
}

.box:not(.overflow) {
  overflow: hidden;
}

.box__heading {
  display: flex;
  justify-content: space-between;
  padding: var(--ui-content-box-padding);
  margin: calc(var(--ui-content-box-padding) * -1) calc(var(--ui-content-box-padding) * -1) var(--ui-chrome-spacing-m);
  font-size: 1rem;
  font-weight: bold;
  border-bottom: 1px solid var(--ui-border-primary);
}

input[type=checkbox],
input[type=radio] {
  flex: 0 0 auto;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin: 0;
  appearance: none;
  cursor: pointer;
  background: #fff;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--ui-border-primary);
  border-radius: 0.25rem;
  transition: background-color 200ms cubic-bezier(0.195, 0.4, 0.45, 0.785) 0ms, border-color 200ms cubic-bezier(0.195, 0.4, 0.45, 0.785) 0ms, box-shadow 200ms cubic-bezier(0.195, 0.4, 0.45, 0.785) 0ms;
}
input[type=checkbox]:hover, input[type=checkbox]:focus,
input[type=radio]:hover,
input[type=radio]:focus {
  border-color: #A7D8F3;
}
input[type=checkbox]:focus-visible,
input[type=radio]:focus-visible {
  outline: 2px solid #1daaff;
  outline-offset: 1px;
}
input[type=checkbox]:checked,
input[type=radio]:checked {
  background-color: #1daaff;
  border-color: #1daaff;
}
input[type=checkbox]:disabled,
input[type=radio]:disabled {
  cursor: not-allowed;
  background-color: var(--ui-control-primary);
  opacity: 0.6;
}

input[type=checkbox]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E");
  background-size: 1.125rem;
}

input[type=checkbox]:indeterminate {
  background-color: #1daaff;
  border-color: #1daaff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E");
  background-size: 1.125rem;
}

input[type=radio] {
  border-radius: 50%;
}
input[type=radio]:checked {
  background-image: radial-gradient(#fff 0 32%, transparent 34%);
}

.keuze {
  display: flex;
  gap: 0.6em;
  align-items: flex-start;
  cursor: pointer;
}
.keuze input {
  margin-block-start: 0.1em;
}

.schakelaar {
  display: flex;
  gap: 0.6em;
  align-items: center;
  cursor: pointer;
}
.schakelaar input {
  position: relative;
  flex: none;
  inline-size: 2.375rem;
  block-size: 1.375rem;
  margin: 0;
  appearance: none;
  cursor: pointer;
  background: var(--ui-control-primary);
  border: 1px solid var(--ui-border-primary);
  border-radius: 0.6875rem;
  transition: background 200ms cubic-bezier(0.195, 0.4, 0.45, 0.785) 0ms;
}
.schakelaar input::after {
  position: absolute;
  inset-block-start: 0.125rem;
  inset-inline-start: 0.125rem;
  inline-size: 1rem;
  block-size: 1rem;
  content: "";
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 0.125rem rgba(0, 0, 0, 0.25);
  transition: inset-inline-start 200ms cubic-bezier(0.195, 0.4, 0.45, 0.785) 0ms;
}
.schakelaar input:checked {
  background: #1daaff;
  border-color: #1daaff;
}
.schakelaar input:checked::after {
  inset-inline-start: 1.125rem;
}
.schakelaar input:focus-visible {
  outline: 0.125rem solid #1daaff;
  outline-offset: 0.125rem;
}

.sidebar__search {
  inline-size: 100%;
  min-block-size: 2.125rem;
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  font-size: var(--ui-font-size-xl);
  line-height: var(--ui-line-height-m);
  color: #333;
  background: #fff;
  border: 1px solid var(--ui-border-primary);
  border-radius: var(--ui-chrome-radius-s);
}
.sidebar__search:focus {
  border-color: #1daaff;
  outline: none;
  box-shadow: inset 0 0 0 0.125rem #1daaff;
  transition: box-shadow 200ms cubic-bezier(0.195, 0.4, 0.45, 0.785) 0ms;
}
.sidebar__search:disabled {
  color: var(--ui-text-secondary);
  cursor: not-allowed;
  background: var(--ui-control-primary);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.form-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--ui-font-size-xl);
  color: #333;
}
.form-group input:not([type=checkbox], [type=radio], [type=file], .chips__zoek),
.form-group select,
.form-group textarea {
  inline-size: 100%;
  min-block-size: 2.125rem;
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  font-size: var(--ui-font-size-xl);
  line-height: var(--ui-line-height-m);
  color: #333;
  background: #fff;
  border: 1px solid var(--ui-border-primary);
  border-radius: var(--ui-chrome-radius-s);
}
.form-group input:not([type=checkbox], [type=radio], [type=file], .chips__zoek):focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: #1daaff;
  outline: none;
  box-shadow: inset 0 0 0 0.125rem #1daaff;
  transition: box-shadow 200ms cubic-bezier(0.195, 0.4, 0.45, 0.785) 0ms;
}
.form-group input:not([type=checkbox], [type=radio], [type=file], .chips__zoek):disabled,
.form-group select:disabled,
.form-group textarea:disabled {
  color: var(--ui-text-secondary);
  cursor: not-allowed;
  background: var(--ui-control-primary);
}
.form-group textarea {
  min-block-size: 6rem;
  resize: vertical;
}
.form-group select {
  padding-inline-end: 2rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23426273'%3E%3Cpath d='M7.36 11.3a.9.9 0 0 0 1.25 0l5.8-5.69a.86.86 0 0 0 0-1.25.9.9 0 0 0-1.25 0L8 9.28 2.85 4.36a.88.88 0 0 0-1.25 1.25l5.76 5.7Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 0.75rem;
}
.form-group select[multiple] {
  padding-inline-end: 0.5rem;
  background-image: none;
  block-size: auto;
}
.form-group input[type=date]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
}
.form-group input[type=date]::-webkit-calendar-picker-indicator:hover, .form-group input[type=date]::-webkit-calendar-picker-indicator:focus {
  opacity: 1;
}

.form-group input[type=file] {
  font-size: var(--ui-font-size-l);
  color: var(--ui-text-secondary);
  cursor: pointer;
}
.form-group input[type=file]::file-selector-button {
  padding: 0.4rem 0.8rem;
  margin-inline-end: 0.6rem;
  font-family: inherit;
  font-size: var(--ui-font-size-l);
  font-weight: 700;
  color: inherit;
  cursor: pointer;
  background: var(--ui-control-primary);
  border: none;
  border-radius: var(--ui-radius-s);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  transition: background 200ms cubic-bezier(0.195, 0.4, 0.45, 0.785) 0ms;
}
.form-group input[type=file]::file-selector-button:hover, .form-group input[type=file]::file-selector-button:focus {
  background: var(--ui-control-primary-hover);
}

.veld__hint {
  font-size: var(--ui-font-size-l);
  line-height: var(--ui-line-height-m);
  color: var(--ui-text-secondary);
}

.veld__fout {
  font-size: var(--ui-font-size-l);
  font-weight: 700;
  color: #ef4546;
}

form.box {
  display: flex;
  flex-direction: column;
  gap: var(--ui-veld-gap);
}

.veldgroep {
  display: flex;
  flex-direction: column;
  gap: var(--ui-veld-gap);
  padding: 0 0 1.25rem;
  margin: 0 0 1.25rem;
  border: 0;
  border-block-end: 1px solid var(--ui-border-primary);
}
.veldgroep:last-child {
  padding-block-end: 0;
  margin-block-end: 0;
  border-block-end: 0;
}

.veldgroep__kop {
  padding: 0;
  font-size: var(--ui-font-size-xl);
  font-weight: 700;
  color: var(--ui-text-brand);
}

.veldgroep .cluster--stapel {
  flex-direction: column;
  align-items: stretch;
}

.bijlage {
  padding-block-end: 0.75rem;
}
.bijlage + .bijlage {
  padding-block-start: 0.75rem;
  border-block-start: 1px dashed var(--ui-border-primary);
}

.bijlage__naam {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: baseline;
  overflow-wrap: anywhere;
}

.geerfd {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  background: var(--ui-control-primary);
  border-inline-start: 0.1875rem solid #1daaff;
  border-radius: var(--ui-chrome-radius-s);
}
.geerfd__inhoud {
  max-block-size: 20rem;
  overflow-y: auto;
}
.geerfd__inhoud > :first-child {
  margin-block-start: 0;
}
.geerfd__inhoud > :last-child {
  margin-block-end: 0;
}
.geerfd__leeg {
  font-style: italic;
  color: var(--ui-text-secondary);
}

.bestandsveld {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
  padding: 1.2rem 1rem;
  text-align: center;
  cursor: pointer;
  background: #fff;
  border: 1px dashed var(--ui-border-primary);
  border-radius: var(--ui-chrome-radius-s);
  transition: border-color background cubic-bezier(0.195, 0.4, 0.45, 0.785) 0ms;
}
.bestandsveld:hover, .bestandsveld:focus {
  border-color: #1daaff;
}
.bestandsveld--sleep {
  background: var(--ui-control-primary);
  border-color: #1daaff;
  border-style: solid;
}
.bestandsveld__icoon {
  color: var(--ui-text-secondary);
}
.bestandsveld__hint, .bestandsveld__soorten {
  font-size: var(--ui-font-size-s);
  line-height: var(--ui-line-height-m);
  color: var(--ui-text-secondary);
}
.bestandsveld__naam {
  display: none;
  font-size: var(--ui-font-size-l);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.bestandsveld--gevuld .bestandsveld__naam {
  display: block;
}

.herhaalbaar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}
.herhaalbaar__rijen {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  inline-size: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}
.herhaalbaar__rij {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 0.5rem;
  align-items: start;
  padding: 0.5rem;
  background: var(--ui-control-primary);
  border-radius: var(--ui-chrome-radius-s);
}
.herhaalbaar__greep {
  padding-block-start: 0.45rem;
  font-size: 0.875rem;
  line-height: 1;
  color: var(--ui-text-secondary);
  cursor: grab;
}
.herhaalbaar__greep:active {
  cursor: grabbing;
}
.herhaalbaar__greep:focus-visible {
  outline: 0.125rem solid #1daaff;
  outline-offset: 0.125rem;
}
.herhaalbaar__nummer {
  min-inline-size: 1.125rem;
  padding-block-start: 0.4rem;
  font-size: var(--ui-font-size-l);
  font-weight: 600;
  color: var(--ui-text-secondary);
  text-align: end;
}
.herhaalbaar__velden {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-inline-size: 0;
}
.herhaalbaar__weg {
  padding: 0;
  font-size: 1.125rem;
  line-height: 1;
  color: var(--ui-text-secondary);
  cursor: pointer;
  background: none;
  border: none;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: var(--ui-radius-s);
}
.herhaalbaar__weg:hover, .herhaalbaar__weg:focus {
  color: #fff;
  background: var(--ui-danger, #b3261e);
}
.herhaalbaar__leegmelding {
  display: none;
  margin: 0;
  font-size: var(--ui-font-size-l);
  font-style: italic;
  color: var(--ui-text-secondary);
}
.herhaalbaar--leeg .herhaalbaar__leegmelding {
  display: block;
}

.uitleg {
  display: inline-flex;
  vertical-align: middle;
  margin-inline-start: 0.3em;
}
.uitleg__knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1rem;
  block-size: 1rem;
  padding: 0;
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ui-text-secondary);
  cursor: help;
  background: var(--ui-control-primary);
  border: none;
  border-radius: 50%;
}
.uitleg__knop:hover, .uitleg__knop:focus {
  color: #fff;
  background: #1daaff;
}
.uitleg__knop:focus-visible {
  outline: 0.125rem solid #1daaff;
  outline-offset: 0.125rem;
}
.uitleg__tekst {
  position: fixed;
  inset: auto;
  max-inline-size: 20rem;
  padding: 0.5rem 0.7rem;
  margin: 0;
  font-size: var(--ui-font-size-l);
  font-weight: 400;
  line-height: var(--ui-line-height-m);
  color: #fff;
  background: #1e293b;
  border: none;
  border-radius: var(--ui-chrome-radius-s);
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.22);
}
.uitleg__tekst::backdrop {
  background: none;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--ui-spacing-xl);
  padding: var(--ui-spacing-xs) var(--ui-spacing-s);
  line-height: 1;
  font-weight: 700;
  color: inherit;
  cursor: pointer;
  background: var(--ui-control-primary);
  border: none;
  border-radius: var(--ui-radius-s);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  transition: all 200ms cubic-bezier(0.195, 0.4, 0.45, 0.785) 0ms;
}
.button:hover, .button:focus {
  background: var(--ui-control-primary-hover);
}
.button svg:first-child {
  margin-inline-end: var(--ui-spacing-xs);
}

.button--large {
  min-block-size: 2.5rem;
  font-size: var(--ui-font-size-xl);
}

.button--white {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(22, 36, 70, 0.35);
}
.button--white:hover, .button--white:focus {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(22, 36, 70, 0.7);
}

.button__verder {
  margin-inline-start: var(--ui-spacing-xs);
  opacity: 0.55;
}

.button--google {
  color: #fff;
  text-decoration: none;
  background: #4285f4;
  border-color: #1c56b5;
}
.button--google:hover, .button--google:focus {
  background: #1c56b5;
  border-color: #1c56b5;
}

.button--small {
  min-block-size: 1.5rem;
  padding: var(--ui-spacing-xs) var(--ui-spacing-s);
  font-size: var(--ui-font-size-s);
}

.tree-nav {
  --ui-tree-hover: #283b65;
  --ui-tree-toggle: #A7D8F3;
  --ui-tree-toggle-hover: #fff;
  --ui-tree-active: transparent;
}
.tree-nav, .tree-nav ul {
  padding-inline-start: 0;
  margin: 0;
}
.tree-nav ::marker, .tree-nav ul ::marker {
  font-size: 0;
}
.tree-nav li {
  position: relative;
  line-height: 2rem;
}
.tree-nav a {
  display: block;
  padding-inline-start: 2rem;
  font-size: var(--ui-font-size-l);
  line-height: 2rem;
  border-radius: var(--ui-chrome-radius-s);
}
.tree-nav a:hover, .tree-nav a:focus {
  background: var(--ui-tree-hover);
}
.tree-nav .is\:active > a {
  font-weight: 700;
  background: var(--ui-tree-active);
}
.tree-nav li li a {
  padding-inline-start: 3rem;
}
.tree-nav li li .tree-nav__toggle {
  inset-inline-start: 1rem;
}
.tree-nav li li li a {
  padding-inline-start: 4rem;
}
.tree-nav li li li .tree-nav__toggle {
  inset-inline-start: 2rem;
}
.tree-nav li li li li a {
  padding-inline-start: 5rem;
}
.tree-nav li li li li .tree-nav__toggle {
  inset-inline-start: 3rem;
}
.tree-nav li li li li li a {
  padding-inline-start: 6rem;
}
.tree-nav li li li li li .tree-nav__toggle {
  inset-inline-start: 4rem;
}
.tree-nav li li li li li li a {
  padding-inline-start: 7rem;
}
.tree-nav li li li li li li .tree-nav__toggle {
  inset-inline-start: 5rem;
}
.tree-nav li li li li li li li a {
  padding-inline-start: 8rem;
}
.tree-nav li li li li li li li .tree-nav__toggle {
  inset-inline-start: 6rem;
}

.tree-nav__toggle {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 2.5em;
  block-size: 2rem;
  cursor: pointer;
  background: transparent;
  border: none;
}
.tree-nav__toggle:hover ~ a {
  background: var(--ui-tree-hover);
}
.tree-nav__toggle:hover::before {
  color: var(--ui-tree-toggle-hover);
}
.tree-nav__toggle::before {
  display: inline-block;
  inline-size: 8px;
  block-size: 8px;
  font-size: 10px;
  color: var(--ui-tree-toggle);
  content: " ";
  transition: transform 0.2s;
  transform: rotate(-90deg);
  background-color: currentcolor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' preserveAspectRatio='xMidYMid meet'%3E%3Cpath d='M3.71027 5.88255C3.86985 6.03915 4.1279 6.03915 4.28578 5.88255L7.54702 2.68388C7.7066 2.52728 7.7066 2.27405 7.54702 2.11912C7.38744 1.96418 7.12939 1.96252 6.97151 2.11912L4.00057 5.03457L1.02794 2.11745C0.868356 1.96085 0.610309 1.96085 0.452425 2.11745C0.29454 2.27405 0.292843 2.52728 0.452425 2.68222L3.71027 5.88255Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' preserveAspectRatio='xMidYMid meet'%3E%3Cpath d='M3.71027 5.88255C3.86985 6.03915 4.1279 6.03915 4.28578 5.88255L7.54702 2.68388C7.7066 2.52728 7.7066 2.27405 7.54702 2.11912C7.38744 1.96418 7.12939 1.96252 6.97151 2.11912L4.00057 5.03457L1.02794 2.11745C0.868356 1.96085 0.610309 1.96085 0.452425 2.11745C0.29454 2.27405 0.292843 2.52728 0.452425 2.68222L3.71027 5.88255Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.tree-nav__toggle::after {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 100%;
  inline-size: 10rem;
  block-size: 100%;
  content: " ";
  background-color: transparent;
}

/* Voeg eigen icons toe via ::before of background-image */
.tree-nav .open > .tree-nav__toggle::before {
  transform: rotate(0deg);
}

.tree-nav li > ul {
  display: none;
}

.tree-nav .open > ul {
  display: block;
}

.sidebar--panel .tree-nav,
.tree-nav--light {
  --ui-tree-hover: var(--ui-control-tertiary);
  --ui-tree-toggle: var(--ui-text-secondary);
  --ui-tree-toggle-hover: var(--ui-text-primary);
  --ui-tree-active: var(--ui-control-primary);
  color: var(--ui-text-primary);
}

.tree-nav__amount {
  float: inline-end;
  padding-inline: 0.4em;
  font-size: var(--ui-font-size-s);
  color: var(--ui-text-secondary);
}

.color\:brand {
  color: var(--ui-text-brand);
}

.color\:primary {
  color: var(--ui-text-primary);
}

.color\:secondary {
  color: var(--ui-text-secondary);
}

.color\:success {
  color: #42cb6f;
}

.color\:error {
  color: #ef4546;
}

.color\:warning {
  color: #c89e23;
}

.color\:neutral {
  color: #2463eb;
}

.text\:big {
  font-size: 1.5rem;
  font-weight: 700;
}

.text\:medium {
  font-size: 1rem;
  font-weight: 700;
}

.text\:bold {
  font-weight: 700;
}

.align\:right {
  text-align: right;
}

.heading\:xs {
  font-size: var(--ui-font-size-l);
  font-weight: 700;
}

.text--strong {
  font-weight: 700;
}

.visually\:hidden {
  position: absolute;
  overflow: hidden;
  backface-visibility: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: none;
}

[hidden] {
  display: none !important;
}

.is\:on {
  display: none;
}

.display-contents {
  display: contents;
}

.amount-label {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.125rem;
  block-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  background: var(--ui-text-brand);
  border-radius: 100%;
}

table {
  --ui-table-item-title: #0B55C4;
  inline-size: 100%;
  font-size: var(--ui-font-size-l);
  border-collapse: collapse;
}
.box > table, .box > form > table {
  inline-size: calc(100% + var(--ui-content-box-padding) * 2);
  margin: calc(var(--ui-content-box-padding) * -1);
}
.box > table th, .box > form > table th {
  top: calc(var(--ui-chrome-spacing-m) * -1);
}
table th,
table td {
  padding: 0.75rem;
  text-align: left;
}
table .tabel__id {
  display: block;
  margin-block-start: 0.125rem;
  font-size: var(--ui-font-size-s);
  color: var(--ui-text-secondary);
  opacity: 0.7;
}
table tr:hover {
  --ui-table-item-title: #013381;
}
table tr:hover td {
  background: #DBE5EC;
}
table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-block: 1rem;
  white-space: nowrap;
  background: var(--ui-control-tertiary);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
table tr:not(:first-child) th,
table tr:not(:first-child) td {
  border-top: 1px solid var(--ui-control-primary);
}
table .is\:selected td, table .is\:selected:hover td {
  background: #cde7fd;
}
table .table__select {
  inline-size: 2.5rem;
  padding-inline-end: 0;
  text-align: center;
}
table .table__select input {
  display: block;
  margin: 0 auto;
  cursor: pointer;
}

.button[disabled] {
  cursor: default;
  opacity: 0.45;
}

.table-item-title {
  font-size: var(--ui-font-size-xl);
  color: var(--ui-table-item-title);
  cursor: pointer;
}
.table-item-title:hover, .table-item-title:focus {
  text-decoration: underline;
}

.table-link {
  color: var(--ui-table-item-title);
  cursor: pointer;
}
.table-link:hover, .table-link:focus {
  text-decoration: underline;
}

.switch-views button {
  display: none;
  block-size: 100%;
  aspect-ratio: 1/1;
  padding: 0;
  background: transparent;
  border: none;
}
@media screen and (min-width: 60rem) {
  .switch-views button {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.switch-views svg {
  inline-size: 1rem;
  block-size: 1rem;
}

.icon-rows {
  display: none;
}

.is\:stack .icon-rows {
  display: block;
}
.is\:stack .icon-columns {
  display: none;
}

.onboarding {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  font-size: var(--ui-font-size-3xl);
}
.onboarding svg {
  inline-size: 1em;
  block-size: 1em;
  margin-right: 1em;
}

.mdl-data-table {
  border: none !important;
}

.login {
  inline-size: 100%;
  max-inline-size: 320px;
  padding: 1.5rem;
  margin: auto;
  color: #333;
  background: #fff;
  border-radius: var(--ui-radius-m);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.15), 0 0 40px rgba(0, 0, 0, 0.15);
}
.login a:not([class]) {
  text-decoration: underline;
}
.login .button {
  inline-size: 100%;
}

.login__brand {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}

.alert {
  padding: 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-s);
}

.alert--error {
  color: color-mix(in oklab, #ef4546 70%, #000);
  background: color-mix(in oklab, #ef4546 12%, #fff);
  border-color: color-mix(in oklab, #ef4546 35%, #fff);
}

.divider {
  position: relative;
  z-index: 0;
  display: flex;
  justify-content: center;
  inline-size: 100%;
  margin-block: 1.5rem;
  text-align: center;
  position: relative;
}
.divider::before {
  position: absolute;
  content: " ";
  display: block;
  inset-block-start: 50%;
  z-index: -1;
  display: block;
  inline-size: 100%;
  block-size: 1px;
  background: var(--ui-border-primary);
}

.divider__content {
  padding: 0 0.66em;
  background: #fff;
}

.dashboard {
  block-size: 100%;
  padding: var(--ui-spacing-fluid);
}
.component:has(.dashboard) {
  padding: 0;
}

.component:has(.dashboard) > .component__body > .toolbar,
.component:has(.dashboard) > .component__body > .filters,
.component:has(.dashboard) > .component__body > .content__tabs {
  margin-inline: var(--ui-spacing-fluid);
}
.component:has(.dashboard) > .component__body > :first-child {
  margin-block-start: var(--ui-spacing-fluid);
}
.component:has(.dashboard) > .component__body > .main:not(:first-child) .dashboard {
  padding-block-start: 0;
}

.chip {
  display: inline-flex;
  gap: 0.5rem;
  padding-inline-end: 0.75rem;
  background: var(--ui-control-tertiary);
  border-radius: 1.25rem;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.chip__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  inline-size: 2rem;
  min-block-size: 2rem;
  font-size: var(--ui-font-size-l);
  font-weight: 700;
  color: var(--ui-text-invert);
  background: var(--ui-control-brand);
  border-radius: inherit;
}

.chip__content {
  flex: 1 1 auto;
  padding: 0.25em 0;
  margin: auto;
  line-height: 1em;
}

.chip--success .chip__label {
  background: #4daf51;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em 0.75em;
  font-size: var(--ui-font-size-s);
  font-weight: 700;
  line-height: 1em;
  color: #fff;
  background: var(--ui-text-brand);
  border-radius: var(--mv-radius-full);
}

.badge--success {
  background: #4daf51;
}

.badge--neutral {
  color: var(--ui-text-primary);
  background: var(--ui-control-primary);
}

.notice {
  padding: var(--ui-spacing-s) var(--ui-spacing-m);
  border-radius: var(--ui-radius-s);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.notice--success {
  background: rgba(66, 203, 111, 0.18);
}

.notice--error {
  background: rgba(239, 69, 70, 0.18);
}

.notice--warning {
  background: rgba(200, 158, 35, 0.18);
}

.notice--neutral {
  background: rgba(36, 99, 235, 0.12);
}

.button--danger {
  color: #fff;
  background: #ef4546;
}
.button--danger:hover, .button--danger:focus {
  background: color-mix(in oklab, #ef4546 88%, #000);
}

.pagination {
  flex: 0 0 auto;
  padding-block-start: var(--ui-spacing-s);
}
.pagination .button.is\:active {
  color: #fff;
  background: var(--ui-control-brand);
}
.pagination [aria-disabled=true] {
  cursor: default;
  opacity: 0.45;
}

.pagination__gap {
  padding-inline: 0.25em;
  color: var(--ui-text-secondary);
}

.pagination__count {
  margin-inline-start: auto;
  font-size: var(--ui-font-size-s);
  color: var(--ui-text-secondary);
}

.cards-subheading {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.75rem 0 0.5rem;
  font-size: var(--ui-font-size-m);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ui-text-secondary);
  text-transform: uppercase;
  background: var(--ui-surface-secondary);
  border-block-end: 1px solid var(--ui-border-primary);
}
.cards-subheading + * {
  margin-block-start: 0.75rem;
}

.square {
  aspect-ratio: 1/1;
  padding: 0.5rem;
  color: #1daaff;
  background: #d4e3ed;
  border-radius: 0.5rem;
}
.square svg {
  display: block;
}

.square--red {
  color: #df2e2e;
  background: #ffc8c8;
}

.square--orange {
  color: #df7f2e;
  background: #ffebc8;
}

.kolom--greep {
  inline-size: 1px;
  padding-inline-end: 0;
  white-space: nowrap;
}

.greep {
  cursor: grab;
  padding: 0.25rem 0.4rem;
  color: var(--ui-table-item-title);
  background: none;
  border: none;
  border-radius: var(--ui-radius-s);
  line-height: 1;
}
.greep:active {
  cursor: grabbing;
}
.greep:focus-visible {
  outline: 2px solid #1daaff;
  outline-offset: 1px;
}

tr.is\:sleept > td {
  background: var(--ui-control-secondary);
  box-shadow: inset 0 1px 0 0 #1daaff, inset 0 -1px 0 0 #1daaff;
}

tr.is\:plaats > td {
  background: var(--ui-control-primary);
  opacity: 0.4;
}

tbody.is\:bezig {
  opacity: 0.6;
  pointer-events: none;
}

.kolom--status {
  inline-size: 1px;
  padding-inline-end: 0;
  text-align: center;
}

.status {
  display: inline-flex;
  line-height: 0;
}

.status--aan {
  color: #4daf51;
}

.status--uit {
  color: #ef4546;
}

.filters__vinkje {
  display: flex;
  flex: 0 0 auto;
  gap: 0.5em;
  align-items: center;
  padding-inline: 1em;
  white-space: nowrap;
  cursor: pointer;
  border-inline-end: 1px solid var(--ui-border-primary);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
  min-block-size: 2.125rem;
  padding: 0.2rem 0.4rem;
  background: #fff;
  border: 1px solid var(--ui-border-primary);
  border-radius: var(--ui-chrome-radius-s);
}
.chips:focus-within {
  border-color: #1daaff;
  box-shadow: inset 0 0 0 0.125rem #1daaff;
}

.chips__gekozen {
  display: contents;
}

.chips__zoek {
  flex: 1 1 7.5rem;
  min-inline-size: 7.5rem;
  padding: 0.2em 0.3em;
  font-size: var(--ui-font-size-l);
  background: none;
  border: none;
}
.chips__zoek:focus {
  outline: none;
}

.chip-keuze {
  display: inline-flex;
  gap: 0.4em;
  align-items: center;
  padding: 0.2em 0.45em 0.2em 0.65em;
  font-size: var(--ui-font-size-l);
  background: var(--ui-control-primary);
  border-radius: var(--mv-radius-full);
}

.chip-keuze__weg {
  padding: 0 0.15em;
  font-size: 1.15em;
  line-height: 1;
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: var(--mv-radius-full);
  opacity: 0.7;
}
.chip-keuze__weg:hover, .chip-keuze__weg:focus {
  opacity: 1;
}

.chips__suggesties {
  position: fixed;
  z-index: 40;
  max-block-size: 16.25rem;
  padding: 0.25rem 0;
  margin: 0;
  overflow-y: auto;
  list-style: none;
  background: #fff;
  border: 1px solid var(--ui-border-primary);
  border-radius: var(--ui-chrome-radius-s);
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.16);
}

.chips__suggestie {
  display: block;
  inline-size: 100%;
  padding: 0.45em 0.6em;
  font-size: var(--ui-font-size-l);
  line-height: var(--ui-line-height-m);
  text-align: start;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: var(--ui-radius-s);
}
.chips__suggestie.is\:active {
  color: #fff;
  background: #1daaff;
}
.chips__suggestie mark {
  font-weight: 700;
  color: inherit;
  background: none;
}

.chips__suggesties .veld__hint {
  display: block;
  padding: 0.45em 0.6em;
  margin-block-start: 0.2rem;
  border-block-start: 1px solid var(--ui-border-primary);
}

.editor__balk {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem 0.5rem;
  padding: 0.25rem;
  margin-block-end: 0.4rem;
  background: var(--ui-control-primary);
  border-radius: var(--ui-chrome-radius-s);
}

.editor__groep {
  display: flex;
  gap: 0.1rem;
}
.editor__groep + .editor__groep {
  padding-inline-start: 0.5rem;
  border-inline-start: 1px solid var(--ui-border-primary);
}

.editor__knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.875rem;
  block-size: 1.875rem;
  padding-inline: 0.35rem;
  font-family: inherit;
  font-size: var(--ui-font-size-l);
  line-height: 1;
  color: var(--ui-text-primary);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: var(--ui-radius-s);
}
.editor__knop:hover, .editor__knop:focus {
  background: #fff;
}
.editor__knop.is\:active {
  color: #fff;
  background: #1daaff;
}
.editor__knop svg {
  fill: none;
  stroke: currentColor;
}
.editor__knop svg [fill=currentColor] {
  fill: currentColor;
}
.editor__knop--vet {
  font-weight: 700;
}
.editor__knop--cursief {
  font-style: italic;
  font-family: Georgia, serif;
}
.editor__knop--klein {
  font-size: var(--ui-font-size-s);
}

.editor__zwevend {
  position: absolute;
  inset: 0 auto auto 0;
  visibility: hidden;
  opacity: 0;
  z-index: 3;
  display: flex;
  gap: 0.1rem;
  padding: 0.2rem;
  background: #fff;
  border: 1px solid var(--ui-border-primary);
  border-radius: var(--ui-chrome-radius-s);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.14);
}

.editor__vlak .ProseMirror .has-focus {
  position: relative;
}

.editor__vlak .ProseMirror .has-focus::before {
  position: absolute;
  inset-block: 0;
  inset-inline-start: -0.625rem;
  inline-size: 0.125rem;
  content: "";
  background: var(--ui-border-primary);
  border-radius: 0.0625rem;
}

.editor__emoji {
  position: absolute;
  inset-block-start: calc(100% + 0.25rem);
  inset-inline-start: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  max-inline-size: 18.75rem;
  padding: 0.4rem;
  background: #fff;
  border: 1px solid var(--ui-border-primary);
  border-radius: var(--ui-chrome-radius-s);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
}

.editor__emoji-knop {
  padding: 0.15rem 0.3rem;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: var(--ui-radius-s);
}
.editor__emoji-knop:hover, .editor__emoji-knop:focus {
  background: var(--ui-control-primary);
}

.editor__vlak {
  min-block-size: 20rem;
  padding: 0.5rem 0.75rem;
  overflow-y: auto;
  max-block-size: 32.5rem;
  background: #fff;
  border: 1px solid #426273;
  border-radius: var(--ui-chrome-radius-s);
}
.form-group--groeit .editor__vlak {
  flex: 1;
  max-block-size: none;
}
.editor__vlak:focus-within {
  border-color: #1daaff;
  box-shadow: inset 0 0 0 0.125rem #1daaff;
}
.editor__vlak .ProseMirror {
  min-block-size: 18.75rem;
  padding: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  outline: none;
}
.editor__vlak p, .editor__vlak ul, .editor__vlak ol, .editor__vlak h2, .editor__vlak h3, .editor__vlak table {
  margin-block: 0 0.75em;
}
.editor__vlak h2 {
  font-size: 1.3em;
  font-weight: 700;
}
.editor__vlak h3 {
  font-size: 1.1em;
  font-weight: 700;
}
.editor__vlak ul, .editor__vlak ol {
  padding-inline-start: 1.4em;
}
.editor__vlak ul {
  list-style: disc;
}
.editor__vlak ol {
  list-style: decimal;
}
.editor__vlak li > p {
  margin-block-end: 0.2em;
}
.editor__vlak a {
  color: var(--ui-text-brand);
  text-decoration: underline;
}
.editor__vlak table {
  inline-size: 100%;
  border-collapse: collapse;
}
.editor__vlak table td, .editor__vlak table th {
  padding: 0.3em 0.5em;
  border: 1px solid var(--ui-border-primary);
}

.editor__broncode {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--ui-font-size-l);
}

.bijlagen {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.bijlage {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.5rem;
  align-items: start;
  padding: 0.4rem;
  border-radius: var(--ui-chrome-radius-s);
}
.bijlage:hover, .bijlage:focus {
  background: var(--ui-control-primary);
}
.bijlage--kaart {
  box-shadow: inset 0.1875rem 0 0 #1daaff;
}
.bijlage__beeld {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  overflow: hidden;
  background: var(--ui-control-primary);
  border-radius: var(--ui-radius-s);
}
.bijlage__beeld img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.bijlage__soort {
  font-size: var(--ui-font-size-s);
  font-weight: 700;
  color: var(--ui-text-secondary);
  text-transform: uppercase;
}
.bijlage__wat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-inline-size: 0;
}
.bijlage__naam {
  overflow: hidden;
  font-size: var(--ui-font-size-l);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bijlage__maat {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  font-size: var(--ui-font-size-s);
  color: var(--ui-text-secondary);
}
.bijlage__doen {
  display: flex;
  flex: none;
  gap: 0.15rem;
}
.bijlage__knop {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  padding: 0;
  color: var(--ui-text-secondary);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: var(--ui-radius-s);
}
.bijlage__knop:hover, .bijlage__knop:focus {
  color: #fff;
  background: #1daaff;
}
.bijlage__knop--weg:hover, .bijlage__knop--weg:focus {
  background: var(--ui-danger, #b3261e);
}