/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
.utrecht-accordion {
  display: grid;
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-accordion-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-accordion-margin-block-start, 0));
  row-gap: var(--utrecht-accordion-row-gap);
}

.utrecht-accordion__section {
  border-block-start-color: var(--utrecht-accordion-section-border-color, currentColor);
  border-block-start-style: solid;
  border-block-start-width: var(--utrecht-accordion-section-border-width, 0);
  break-inside: avoid;
}
.utrecht-accordion__section:is(:last-child, :only-child) {
  border-block-end-color: var(--utrecht-accordion-section-border-color, currentColor);
  border-block-end-style: solid;
  border-block-end-width: var(--utrecht-accordion-section-border-width, 0);
}
.utrecht-accordion__section:not(:last-child) {
  border-block-end-color: transparent;
}
.utrecht-accordion__section:hover {
  --utrecht-accordion-section-border-color: var(--utrecht-accordion-section-hover-border-color, currentColor);
}

.utrecht-accordion__button {
  --utrecht-button-focus-scale: 1;
  --utrecht-button-hover-scale: 1;
  --utrecht-button-inline-size: 100%;
  --utrecht-button-min-inline-size: 100%;
  --utrecht-button-subtle-background-color: var(--utrecht-accordion-button-background-color);
  --utrecht-button-subtle-padding-inline-start: var(--utrecht-accordion-button-padding-inline-start);
  --utrecht-button-subtle-padding-inline-end: var(--utrecht-accordion-button-padding-inline-end);
  --utrecht-button-subtle-padding-block-start: var(--utrecht-accordion-button-padding-block-start);
  --utrecht-button-subtle-padding-block-end: var(--utrecht-accordion-button-padding-block-end);
  --utrecht-button-padding-block-start: var(--utrecht-accordion-button-padding-block-start);
  --utrecht-button-padding-block-end: var(--utrecht-accordion-button-padding-block-end);
  --utrecht-button-subtle-color: var(--utrecht-accordion-button-color);
  --utrecht-button-subtle-hover-background-color: var(--utrecht-accordion-button-hover-background-color);
  --utrecht-button-subtle-hover-border-color: var(--utrecht-accordion-button-hover-border-color);
  --utrecht-button-subtle-hover-color: var(--utrecht-accordion-button-hover-color);
  --utrecht-button-subtle-active-background-color: var(--utrecht-accordion-button-active-background-color);
  --utrecht-button-subtle-active-border-color: var(--utrecht-accordion-button-active-border-color);
  --utrecht-button-subtle-active-color: var(--utrecht-accordion-button-active-color);
  --utrecht-button-subtle-focus-background-color: var(--utrecht-accordion-button-focus-background-color);
  --utrecht-button-subtle-focus-border-color: var(--utrecht-accordion-button-focus-border-color);
  --utrecht-button-subtle-focus-color: var(--utrecht-accordion-button-focus-color);
  --utrecht-button-subtle-border-color: var(--utrecht-accordion-button-border-color);
  --utrecht-button-subtle-border-width: var(--utrecht-accordion-button-border-width);
  --utrecht-button-border-radius: var(--utrecht-accordion-button-border-radius);
  --utrecht-button-font-family: var(--utrecht-accordion-button-font-family);
  --utrecht-button-subtle-font-size: var(--utrecht-accordion-button-font-size);
  --utrecht-button-subtle-font-weight: var(--utrecht-accordion-button-font-weight);
  --utrecht-button-subtle-line-height: var(--utrecht-accordion-button-line-height);
  --utrecht-button-column-gap: var(--utrecht-accordion-button-gap, 0);
  align-items: baseline;
  justify-content: start !important;
  position: relative;
  text-align: start;
}
.utrecht-accordion__button:focus-visible {
  --utrecht-accordion-button-background-color: var(--utrecht-accordion-button-focus-visible-background-color);
  --utrecht-accordion-button-color: var(--utrecht-accordion-button-focus-visible-color);
  --utrecht-button-subtle-border-color: var(--utrecht-accordion-button-focus-visible-border-color);
  --utrecht-button-subtle-border-width: var(--utrecht-accordion-button-focus-visible-border-width);
}

.utrecht-accordion__button-icon {
  --utrecht-icon-size: var(--utrecht-accordion-button-icon-size);
  align-items: center;
  display: flex;
  inline-size: var(--utrecht-accordion-button-icon-size);
  justify-content: center;
}
.utrecht-accordion__button[aria-expanded=true] .utrecht-accordion__button-icon {
  transform: rotate(180deg);
}

.utrecht-accordion__panel {
  border-color: var(--utrecht-accordion-panel-border-color);
  border-style: solid;
  border-width: var(--utrecht-accordion-panel-border-width);
  border-block-start: none;
  padding-block-end: var(--utrecht-accordion-panel-padding-block-end);
  padding-block-start: var(--utrecht-accordion-panel-padding-block-start);
  padding-inline-end: var(--utrecht-accordion-panel-padding-inline-end);
  padding-inline-start: var(--utrecht-accordion-panel-padding-inline-start);
}

.utrecht-accordion__header {
  align-items: center;
  display: flex;
  margin-block-end: 0;
  margin-block-start: 0;
}
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
.utrecht-alert {
  background-color: var(--_utrecht-alert-background-color, var(--utrecht-alert-background-color));
  border-color: var(--_utrecht-alert-border-color, var(--utrecht-alert-border-color));
  border-radius: var(--utrecht-alert-border-radius, 0);
  border-style: solid;
  border-width: var(--_utrecht-alert-border-width, var(--utrecht-alert-border-width, 0));
  color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
  column-gap: var(--utrecht-alert-column-gap);
  display: flex;
  flex-direction: row;
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-start, 0));
  padding-block-end: var(--utrecht-alert-padding-block-end);
  padding-block-start: var(--utrecht-alert-padding-block-start);
  padding-inline-end: var(--utrecht-alert-padding-inline-end);
  padding-inline-start: var(--utrecht-alert-padding-inline-start);
}

.utrecht-alert__icon {
  --utrecht-icon-color: var(--_utrecht-alert-icon-color, var(--utrecht-alert-icon-color));
  --utrecht-icon-size: var(--utrecht-alert-icon-size);
  --utrecht-icon-inset-block-start: var(--utrecht-alert-icon-inset-block-start);
}

.utrecht-alert__content {
  display: flex;
  flex-direction: column;
  row-gap: var(--utrecht-alert-content-row-gap);
}

.utrecht-alert__message {
  --utrecht-heading-color: var(--utrecht-alert-color);
  --utrecht-paragraph-color: var(--utrecht-alert-color);
  display: flex;
  flex-direction: column;
  row-gap: var(--utrecht-alert-message-row-gap);
}

.utrecht-alert--info {
  --_utrecht-alert-icon-color: var(--utrecht-alert-icon-info-color);
  --_utrecht-alert-background-color: var(--utrecht-alert-info-background-color);
  --_utrecht-alert-border-color: var(--utrecht-alert-info-border-color);
  --_utrecht-alert-border-width: var(--utrecht-alert-info-border-width);
  --_utrecht-alert-color: var(--utrecht-alert-info-color);
}

.utrecht-alert--ok {
  --_utrecht-alert-icon-color: var(--utrecht-alert-icon-ok-color);
  --_utrecht-alert-background-color: var(--utrecht-alert-ok-background-color);
  --_utrecht-alert-border-color: var(--utrecht-alert-ok-border-color);
  --_utrecht-alert-border-width: var(--utrecht-alert-ok-border-width);
  --_utrecht-alert-color: var(--utrecht-alert-ok-color);
}

.utrecht-alert--warning {
  --_utrecht-alert-icon-color: var(--utrecht-alert-icon-warning-color);
  --_utrecht-alert-background-color: var(--utrecht-alert-warning-background-color);
  --_utrecht-alert-border-color: var(--utrecht-alert-warning-border-color);
  --_utrecht-alert-border-width: var(--utrecht-alert-warning-border-width);
  --_utrecht-alert-color: var(--utrecht-alert-warning-color);
}

.utrecht-alert--error {
  --_utrecht-alert-icon-color: var(--utrecht-alert-icon-error-color);
  --_utrecht-alert-background-color: var(--utrecht-alert-error-background-color);
  --_utrecht-alert-border-color: var(--utrecht-alert-error-border-color);
  --_utrecht-alert-border-width: var(--utrecht-alert-error-border-width);
  --_utrecht-alert-color: var(--utrecht-alert-error-color);
}
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
.utrecht-button {
  --_utrecht-button-background-color: var(
    --_utrecht-button-hint-background-color,
    var(--_utrecht-button-appearance-background-color, var(--utrecht-button-background-color))
  );
  --_utrecht-button-color: var(
    --_utrecht-button-hint-color,
    var(--_utrecht-button-appearance-color, var(--utrecht-button-color))
  );
  --_utrecht-button-border-color: var(
    --_utrecht-button-hint-border-color,
    var(--_utrecht-button-appearance-border-color, var(--utrecht-button-border-color, transparent))
  );
  --_utrecht-button-border-bottom-color: var(
    --_utrecht-button-hint-border-bottom-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-border-bottom-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent))
        )
      )
    )
  );
  --_utrecht-button-disabled-background-color: var(
    --_utrecht-button-hint-disabled-background-color,
    var(
      --_utrecht-button-appearance-disabled-background-color,
      var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color))
    )
  );
  --_utrecht-button-disabled-border-color: var(
    --_utrecht-button-hint-disabled-border-color,
    var(
      --_utrecht-button-appearance-disabled-border-color,
      var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color))
    )
  );
  --_utrecht-button-disabled-color: var(
    --_utrecht-button-hint-disabled-color,
    var(--_utrecht-button-appearance-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)))
  );
  --_utrecht-button-pressed-background-color: var(
    --_utrecht-button-hint-pressed-background-color,
    var(
      --_utrecht-button-hint-background-color,
      var(
        --_utrecht-button-appearance-pressed-background-color,
        var(
          --_utrecht-button-appearance-background-color,
          var(--utrecht-button-pressed-background-color, var(--utrecht-button-background-color))
        )
      )
    )
  );
  --_utrecht-button-pressed-border-color: var(
    --_utrecht-button-hint-pressed-border-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-pressed-border-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-pressed-border-color, var(--utrecht-button-border-color))
        )
      )
    )
  );
  --_utrecht-button-pressed-color: var(
    --_utrecht-button-hint-pressed-color,
    var(
      --_utrecht-button-hint-color,
      var(
        --_utrecht-button-appearance-pressed-color,
        var(--_utrecht-button-appearance-color, var(--utrecht-button-pressed-color, var(--utrecht-button-color)))
      )
    )
  );
  --_utrecht-button-focus-background-color: var(
    --_utrecht-button-hint-focus-background-color,
    var(
      --_utrecht-button-hint-background-color,
      var(
        --_utrecht-button-appearance-focus-background-color,
        var(
          --_utrecht-button-appearance-background-color,
          var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color))
        )
      )
    )
  );
  --_utrecht-button-focus-border-color: var(
    --_utrecht-button-hint-focus-border-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-focus-border-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color))
        )
      )
    )
  );
  --_utrecht-button-focus-color: var(
    --_utrecht-button-hint-focus-color,
    var(
      --_utrecht-button-hint-color,
      var(
        --_utrecht-button-appearance-focus-color,
        var(--_utrecht-button-appearance-color, var(--utrecht-button-focus-color, var(--utrecht-button-color)))
      )
    )
  );
  --_utrecht-button-hover-background-color: var(
    --_utrecht-button-hint-hover-background-color,
    var(
      --_utrecht-button-hint-background-color,
      var(
        --_utrecht-button-appearance-hover-background-color,
        var(
          --_utrecht-button-appearance-background-color,
          var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))
        )
      )
    )
  );
  --_utrecht-button-hover-border-color: var(
    --_utrecht-button-hint-hover-border-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-hover-border-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))
        )
      )
    )
  );
  --_utrecht-button-hover-color: var(
    --_utrecht-button-hint-hover-color,
    var(
      --_utrecht-button-hint-color,
      var(
        --_utrecht-button-appearance-hover-color,
        var(--_utrecht-button-appearance-color, var(--utrecht-button-hover-color, var(--utrecht-button-color)))
      )
    )
  );
  --_utrecht-button-active-background-color: var(
    --_utrecht-button-hint-active-background-color,
    var(
      --_utrecht-button-hint-background-color,
      var(
        --_utrecht-button-appearance-active-background-color,
        var(
          --_utrecht-button-appearance-background-color,
          var(--utrecht-button-active-background-color, var(--utrecht-button-background-color))
        )
      )
    )
  );
  --_utrecht-button-active-border-color: var(
    --_utrecht-button-hint-active-border-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-active-border-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-active-border-color, var(--utrecht-button-border-color))
        )
      )
    )
  );
  --_utrecht-button-active-color: var(
    --_utrecht-button-hint-active-color,
    var(
      --_utrecht-button-hint-color,
      var(
        --_utrecht-button-appearance-active-color,
        var(--_utrecht-button-appearance-color, var(--utrecht-button-active-color, var(--utrecht-button-color)))
      )
    )
  );
  --_utrecht-button-border-width: var(--_utrecht-button-appearance-border-width, var(--utrecht-button-border-width, 0));
  --_utrecht-button-border-block-end-width: var(
    --utrecht-button-border-bottom-width,
    var(--_utrecht-button-border-width, 0)
  );
  --_utrecht-button-font-size: var(--_utrecht-button-appearance-font-size, var(--utrecht-button-font-size));
  --_utrecht-button-line-height: var(--_utrecht-button-appearance-line-height, var(--utrecht-button-line-height));
  --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
  align-items: center;
  background-color: var(--_utrecht-button-background-color);
  block-size: fit-content;
  border-color: var(--_utrecht-button-border-color);
  border-radius: var(--utrecht-button-border-radius);
  border-style: solid;
  border-width: var(--_utrecht-button-border-width);
  border-block-end-color: var(--_utrecht-button-border-bottom-color);
  border-block-end-width: var(--_utrecht-button-border-block-end-width);
  box-sizing: border-box;
  color: var(--_utrecht-button-color);
  column-gap: var(--utrecht-button-column-gap);
  cursor: var(--utrecht-action-activate-cursor, revert);
  display: inline-flex;
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
  inline-size: var(--utrecht-button-inline-size, auto);
  justify-content: var(--utrecht-button-justify-content, center);
  line-height: var(--_utrecht-button-line-height);
  max-inline-size: var(--utrecht-button-max-inline-size, fit-content);
  min-block-size: var(--utrecht-button-min-block-size, 44px);
  min-inline-size: var(--utrecht-button-min-inline-size, 44px);
  padding-block-end: var(--utrecht-button-padding-block-end);
  padding-block-start: var(--utrecht-button-padding-block-start);
  padding-inline-end: var(--utrecht-button-padding-inline-end);
  padding-inline-start: var(--utrecht-button-padding-inline-start);
  scale: 1;
  text-transform: var(--utrecht-button-text-transform);
  -webkit-user-select: none;
  user-select: none;
}
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
  .utrecht-button {
    --_utrecht-button-disabled-border-color: GrayText;
    --_utrecht-button-disabled-color: GrayText;
    background-color: ButtonFace;
    border-color: buttonborder;
    color: ButtonText;
  }
}

.utrecht-button--distanced {
  margin-block-end: var(--utrecht-button-margin-block-end);
  margin-block-start: var(--utrecht-button-margin-block-start);
  margin-inline-end: var(--utrecht-button-margin-inline-end);
  margin-inline-start: var(--utrecht-button-margin-inline-start);
}

.utrecht-button--submit {
  cursor: var(--utrecht-action-submit-cursor, revert);
}

.utrecht-button--busy {
  cursor: var(--utrecht-action-busy-cursor, wait);
}

.utrecht-button--pressed {
  background-color: var(--_utrecht-button-pressed-background-color);
  border-color: var(--_utrecht-button-pressed-border-color);
  color: var(--_utrecht-button-pressed-color);
}

.utrecht-button:disabled,
.utrecht-button--disabled {
  background-color: var(--_utrecht-button-disabled-background-color);
  border-color: var(--_utrecht-button-disabled-border-color);
  color: var(--_utrecht-button-disabled-color);
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
}

.utrecht-button--focus-visible {
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
}

.utrecht-button--focus:not(.utrecht-button--disabled) {
  background-color: var(--_utrecht-button-focus-background-color);
  border-color: var(--_utrecht-button-focus-border-color);
  color: var(--_utrecht-button-focus-color);
  scale: var(--utrecht-button-focus-scale, 1);
}

.utrecht-button:focus-visible {
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
}

.utrecht-button:focus:not(:disabled, [aria-disabled=true], .utrecht-button--disabled) {
  background-color: var(--_utrecht-button-focus-background-color);
  border-color: var(--_utrecht-button-focus-border-color);
  color: var(--_utrecht-button-focus-color);
  scale: var(--utrecht-button-focus-scale, 1);
}

.utrecht-button--hover:not(:disabled, .utrecht-button--disabled),
.utrecht-button:hover:not(:disabled, [aria-disabled=true], .utrecht-button--disabled) {
  background-color: var(--_utrecht-button-hover-background-color);
  border-color: var(--_utrecht-button-hover-border-color);
  color: var(--_utrecht-button-hover-color);
  scale: var(--utrecht-button-hover-scale, 1);
}

.utrecht-button:active:not(:disabled, [aria-disabled=true], .utrecht-button--disabled),
.utrecht-button--active {
  background-color: var(--_utrecht-button-active-background-color);
  border-color: var(--_utrecht-button-active-border-color);
  color: var(--_utrecht-button-active-color);
}

.utrecht-button--primary-action {
  --_utrecht-button-appearance-active-background-color: var(--utrecht-button-primary-action-active-background-color);
  --_utrecht-button-appearance-active-border-color: var(--utrecht-button-primary-action-active-border-color);
  --_utrecht-button-appearance-active-color: var(--utrecht-button-primary-action-active-color);
  --_utrecht-button-appearance-background-color: var(--utrecht-button-primary-action-background-color);
  --_utrecht-button-appearance-border-color: var(--utrecht-button-primary-action-border-color);
  --_utrecht-button-appearance-border-width: var(--utrecht-button-primary-action-border-width);
  --_utrecht-button-appearance-color: var(--utrecht-button-primary-action-color);
  --_utrecht-button-appearance-font-size: var(--utrecht-button-primary-action-font-size);
  --_utrecht-button-appearance-font-weight: var(--utrecht-button-primary-action-font-weight);
  --_utrecht-button-appearance-line-height: var(--utrecht-button-primary-action-line-height);
  --_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-primary-action-disabled-background-color);
  --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-primary-action-disabled-border-color);
  --_utrecht-button-appearance-disabled-color: var(--utrecht-button-primary-action-disabled-color);
  --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-primary-action-focus-background-color);
  --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-primary-action-focus-border-color);
  --_utrecht-button-appearance-focus-color: var(--utrecht-button-primary-action-focus-color);
  --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
  --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-primary-action-hover-border-color);
  --_utrecht-button-appearance-hover-color: var(--utrecht-button-primary-action-hover-color);
  --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-primary-action-pressed-background-color);
  --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-primary-action-pressed-border-color);
  --_utrecht-button-appearance-pressed-color: var(--utrecht-button-primary-action-pressed-color);
}

.utrecht-button--secondary-action {
  --_utrecht-button-appearance-active-background-color: var(--utrecht-button-secondary-action-active-background-color);
  --_utrecht-button-appearance-active-border-color: var(--utrecht-button-secondary-action-active-border-color);
  --_utrecht-button-appearance-active-color: var(--utrecht-button-secondary-action-active-color);
  --_utrecht-button-appearance-background-color: var(--utrecht-button-secondary-action-background-color);
  --_utrecht-button-appearance-border-color: var(--utrecht-button-secondary-action-border-color);
  --_utrecht-button-appearance-border-width: var(--utrecht-button-secondary-action-border-width);
  --_utrecht-button-appearance-color: var(--utrecht-button-secondary-action-color);
  --_utrecht-button-appearance-font-size: var(--utrecht-button-secondary-action-font-size);
  --_utrecht-button-appearance-font-weight: var(--utrecht-button-secondary-action-font-weight);
  --_utrecht-button-appearance-line-height: var(--utrecht-button-secondary-action-line-height);
  --_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-secondary-action-disabled-background-color);
  --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-secondary-action-disabled-border-color);
  --_utrecht-button-appearance-disabled-color: var(--utrecht-button-secondary-action-disabled-color);
  --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-secondary-action-focus-background-color);
  --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-secondary-action-focus-border-color);
  --_utrecht-button-appearance-focus-color: var(--utrecht-button-secondary-action-focus-color);
  --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-secondary-action-hover-background-color);
  --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-secondary-action-hover-border-color);
  --_utrecht-button-appearance-hover-color: var(--utrecht-button-secondary-action-hover-color);
  --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-secondary-action-pressed-background-color);
  --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-secondary-action-pressed-border-color);
  --_utrecht-button-appearance-pressed-color: var(--utrecht-button-secondary-action-pressed-color);
}

.utrecht-button--subtle {
  --_utrecht-button-appearance-active-background-color: var(--utrecht-button-subtle-active-background-color);
  --_utrecht-button-appearance-active-border-color: var(--utrecht-button-subtle-active-border-color);
  --_utrecht-button-appearance-active-color: var(--utrecht-button-subtle-active-color);
  --_utrecht-button-appearance-background-color: var(--utrecht-button-subtle-background-color);
  --_utrecht-button-appearance-border-color: var(--utrecht-button-subtle-border-color);
  --_utrecht-button-appearance-border-width: var(--utrecht-button-subtle-border-width);
  --_utrecht-button-appearance-color: var(--utrecht-button-subtle-color);
  --_utrecht-button-appearance-font-size: var(--utrecht-button-subtle-font-size);
  --_utrecht-button-appearance-font-weight: var(--utrecht-button-subtle-font-weight);
  --_utrecht-button-appearance-line-height: var(--utrecht-button-subtle-line-height);
  --_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-subtle-disabled-background-color);
  --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-subtle-disabled-border-color);
  --_utrecht-button-appearance-disabled-color: var(--utrecht-button-subtle-disabled-color);
  --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-subtle-focus-background-color);
  --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-subtle-focus-border-color);
  --_utrecht-button-appearance-focus-color: var(--utrecht-button-subtle-focus-color);
  --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-subtle-hover-background-color);
  --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-subtle-hover-border-color);
  --_utrecht-button-appearance-hover-color: var(--utrecht-button-subtle-hover-color);
  --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-subtle-pressed-background-color);
  --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-subtle-pressed-border-color);
  --_utrecht-button-appearance-pressed-color: var(--utrecht-button-subtle-pressed-color);
}

.utrecht-button--primary-action.utrecht-button--danger {
  --_utrecht-button-hint-active-background-color: var(--utrecht-button-primary-action-danger-active-background-color);
  --_utrecht-button-hint-active-border-color: var(--utrecht-button-primary-action-danger-active-border-color);
  --_utrecht-button-hint-active-color: var(--utrecht-button-primary-action-danger-active-color);
  --_utrecht-button-hint-background-color: var(--utrecht-button-primary-action-danger-background-color);
  --_utrecht-button-hint-border-color: var(--utrecht-button-primary-action-danger-border-color);
  --_utrecht-button-hint-color: var(--utrecht-button-primary-action-danger-color);
  --_utrecht-button-hint-disabled-background-color: var(
    --utrecht-button-primary-action-danger-disabled-background-color
  );
  --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-primary-action-danger-disabled-border-color);
  --_utrecht-button-hint-disabled-color: var(--utrecht-button-primary-action-danger-disabled-color);
  --_utrecht-button-hint-focus-background-color: var(--utrecht-button-primary-action-danger-focus-background-color);
  --_utrecht-button-hint-focus-border-color: var(--utrecht-button-primary-action-danger-focus-border-color);
  --_utrecht-button-hint-focus-color: var(--utrecht-button-primary-action-danger-focus-color);
  --_utrecht-button-hint-hover-background-color: var(--utrecht-button-primary-action-danger-hover-background-color);
  --_utrecht-button-hint-hover-border-color: var(--utrecht-button-primary-action-danger-hover-border-color);
  --_utrecht-button-hint-hover-color: var(--utrecht-button-primary-action-danger-hover-color);
  --_utrecht-button-hint-pressed-background-color: var(
    --utrecht-button-primary-action-danger-pressed-background-color
  );
  --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-primary-action-danger-pressed-border-color);
  --_utrecht-button-hint-pressed-color: var(--utrecht-button-primary-action-danger-pressed-color);
}

.utrecht-button--primary-action.utrecht-button--ready {
  --_utrecht-button-hint-active-background-color: var(--utrecht-button-primary-action-ready-active-background-color);
  --_utrecht-button-hint-active-border-color: var(--utrecht-button-primary-action-ready-active-border-color);
  --_utrecht-button-hint-active-color: var(--utrecht-button-primary-action-ready-active-color);
  --_utrecht-button-hint-background-color: var(--utrecht-button-primary-action-ready-background-color);
  --_utrecht-button-hint-border-color: var(--utrecht-button-primary-action-ready-border-color);
  --_utrecht-button-hint-color: var(--utrecht-button-primary-action-ready-color);
  --_utrecht-button-hint-disabled-background-color: var(
    --utrecht-button-primary-action-ready-disabled-background-color
  );
  --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-primary-action-ready-disabled-border-color);
  --_utrecht-button-hint-disabled-color: var(--utrecht-button-primary-action-ready-disabled-color);
  --_utrecht-button-hint-focus-background-color: var(--utrecht-button-primary-action-ready-focus-background-color);
  --_utrecht-button-hint-focus-border-color: var(--utrecht-button-primary-action-ready-focus-border-color);
  --_utrecht-button-hint-focus-color: var(--utrecht-button-primary-action-ready-focus-color);
  --_utrecht-button-hint-hover-background-color: var(--utrecht-button-primary-action-ready-hover-background-color);
  --_utrecht-button-hint-hover-border-color: var(--utrecht-button-primary-action-ready-hover-border-color);
  --_utrecht-button-hint-hover-color: var(--utrecht-button-primary-action-ready-hover-color);
  --_utrecht-button-hint-pressed-background-color: var(
    --utrecht-button-primary-action-ready-pressed-background-color
  );
  --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-primary-action-ready-pressed-border-color);
  --_utrecht-button-hint-pressed-color: var(--utrecht-button-primary-action-ready-pressed-color);
}

.utrecht-button--primary-action.utrecht-button--warning {
  --_utrecht-button-hint-active-background-color: var(--utrecht-button-primary-action-warning-active-background-color);
  --_utrecht-button-hint-active-border-color: var(--utrecht-button-primary-action-warning-active-border-color);
  --_utrecht-button-hint-active-color: var(--utrecht-button-primary-action-warning-active-color);
  --_utrecht-button-hint-background-color: var(--utrecht-button-primary-action-warning-background-color);
  --_utrecht-button-hint-border-color: var(--utrecht-button-primary-action-warning-border-color);
  --_utrecht-button-hint-color: var(--utrecht-button-primary-action-warning-color);
  --_utrecht-button-hint-disabled-background-color: var(
    --utrecht-button-primary-action-warning-disabled-background-color
  );
  --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-primary-action-warning-disabled-border-color);
  --_utrecht-button-hint-disabled-color: var(--utrecht-button-primary-action-warning-disabled-color);
  --_utrecht-button-hint-focus-background-color: var(--utrecht-button-primary-action-warning-focus-background-color);
  --_utrecht-button-hint-focus-border-color: var(--utrecht-button-primary-action-warning-focus-border-color);
  --_utrecht-button-hint-focus-color: var(--utrecht-button-primary-action-warning-focus-color);
  --_utrecht-button-hint-hover-background-color: var(--utrecht-button-primary-action-warning-hover-background-color);
  --_utrecht-button-hint-hover-border-color: var(--utrecht-button-primary-action-warning-hover-border-color);
  --_utrecht-button-hint-hover-color: var(--utrecht-button-primary-action-warning-hover-color);
  --_utrecht-button-hint-pressed-background-color: var(
    --utrecht-button-primary-action-warning-pressed-background-color
  );
  --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-primary-action-warning-pressed-border-color);
  --_utrecht-button-hint-pressed-color: var(--utrecht-button-primary-action-warning-pressed-color);
}

.utrecht-button--secondary-action.utrecht-button--danger {
  --_utrecht-button-hint-active-background-color: var(--utrecht-button-secondary-action-danger-active-background-color);
  --_utrecht-button-hint-active-border-color: var(--utrecht-button-secondary-action-danger-active-border-color);
  --_utrecht-button-hint-active-color: var(--utrecht-button-secondary-action-danger-active-color);
  --_utrecht-button-hint-background-color: var(--utrecht-button-secondary-action-danger-background-color);
  --_utrecht-button-hint-border-color: var(--utrecht-button-secondary-action-danger-border-color);
  --_utrecht-button-hint-color: var(--utrecht-button-secondary-action-danger-color);
  --_utrecht-button-hint-disabled-background-color: var(
    --utrecht-button-secondary-action-danger-disabled-background-color
  );
  --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-secondary-action-danger-disabled-border-color);
  --_utrecht-button-hint-disabled-color: var(--utrecht-button-secondary-action-danger-disabled-color);
  --_utrecht-button-hint-focus-background-color: var(--utrecht-button-secondary-action-danger-focus-background-color);
  --_utrecht-button-hint-focus-border-color: var(--utrecht-button-secondary-action-danger-focus-border-color);
  --_utrecht-button-hint-focus-color: var(--utrecht-button-secondary-action-danger-focus-color);
  --_utrecht-button-hint-hover-background-color: var(--utrecht-button-secondary-action-danger-hover-background-color);
  --_utrecht-button-hint-hover-border-color: var(--utrecht-button-secondary-action-danger-hover-border-color);
  --_utrecht-button-hint-hover-color: var(--utrecht-button-secondary-action-danger-hover-color);
  --_utrecht-button-hint-pressed-background-color: var(
    --utrecht-button-secondary-action-danger-pressed-background-color
  );
  --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-secondary-action-danger-pressed-border-color);
  --_utrecht-button-hint-pressed-color: var(--utrecht-button-secondary-action-danger-pressed-color);
}

.utrecht-button--secondary-action.utrecht-button--ready {
  --_utrecht-button-hint-active-background-color: var(--utrecht-button-secondary-action-ready-active-background-color);
  --_utrecht-button-hint-active-border-color: var(--utrecht-button-secondary-action-ready-active-border-color);
  --_utrecht-button-hint-active-color: var(--utrecht-button-secondary-action-ready-active-color);
  --_utrecht-button-hint-background-color: var(--utrecht-button-secondary-action-ready-background-color);
  --_utrecht-button-hint-border-color: var(--utrecht-button-secondary-action-ready-border-color);
  --_utrecht-button-hint-color: var(--utrecht-button-secondary-action-ready-color);
  --_utrecht-button-hint-disabled-background-color: var(
    --utrecht-button-secondary-action-ready-disabled-background-color
  );
  --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-secondary-action-ready-disabled-border-color);
  --_utrecht-button-hint-disabled-color: var(--utrecht-button-secondary-action-ready-disabled-color);
  --_utrecht-button-hint-focus-background-color: var(--utrecht-button-secondary-action-ready-focus-background-color);
  --_utrecht-button-hint-focus-border-color: var(--utrecht-button-secondary-action-ready-focus-border-color);
  --_utrecht-button-hint-focus-color: var(--utrecht-button-secondary-action-ready-focus-color);
  --_utrecht-button-hint-hover-background-color: var(--utrecht-button-secondary-action-ready-hover-background-color);
  --_utrecht-button-hint-hover-border-color: var(--utrecht-button-secondary-action-ready-hover-border-color);
  --_utrecht-button-hint-hover-color: var(--utrecht-button-secondary-action-ready-hover-color);
  --_utrecht-button-hint-pressed-background-color: var(
    --utrecht-button-secondary-action-ready-pressed-background-color
  );
  --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-secondary-action-ready-pressed-border-color);
  --_utrecht-button-hint-pressed-color: var(--utrecht-button-secondary-action-ready-pressed-color);
}

.utrecht-button--secondary-action.utrecht-button--warning {
  --_utrecht-button-hint-active-background-color: var(--utrecht-button-secondary-action-warning-active-background-color);
  --_utrecht-button-hint-active-border-color: var(--utrecht-button-secondary-action-warning-active-border-color);
  --_utrecht-button-hint-active-color: var(--utrecht-button-secondary-action-warning-active-color);
  --_utrecht-button-hint-background-color: var(--utrecht-button-secondary-action-warning-background-color);
  --_utrecht-button-hint-border-color: var(--utrecht-button-secondary-action-warning-border-color);
  --_utrecht-button-hint-color: var(--utrecht-button-secondary-action-warning-color);
  --_utrecht-button-hint-disabled-background-color: var(
    --utrecht-button-secondary-action-warning-disabled-background-color
  );
  --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-secondary-action-warning-disabled-border-color);
  --_utrecht-button-hint-disabled-color: var(--utrecht-button-secondary-action-warning-disabled-color);
  --_utrecht-button-hint-focus-background-color: var(--utrecht-button-secondary-action-warning-focus-background-color);
  --_utrecht-button-hint-focus-border-color: var(--utrecht-button-secondary-action-warning-focus-border-color);
  --_utrecht-button-hint-focus-color: var(--utrecht-button-secondary-action-warning-focus-color);
  --_utrecht-button-hint-hover-background-color: var(--utrecht-button-secondary-action-warning-hover-background-color);
  --_utrecht-button-hint-hover-border-color: var(--utrecht-button-secondary-action-warning-hover-border-color);
  --_utrecht-button-hint-hover-color: var(--utrecht-button-secondary-action-warning-hover-color);
  --_utrecht-button-hint-pressed-background-color: var(
    --utrecht-button-secondary-action-warning-pressed-background-color
  );
  --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-secondary-action-warning-pressed-border-color);
  --_utrecht-button-hint-pressed-color: var(--utrecht-button-secondary-action-warning-pressed-color);
}

.utrecht-button--subtle.utrecht-button--danger {
  --_utrecht-button-hint-active-background-color: var(--utrecht-button-subtle-danger-active-background-color);
  --_utrecht-button-hint-active-border-color: var(--utrecht-button-subtle-danger-active-border-color);
  --_utrecht-button-hint-active-color: var(--utrecht-button-subtle-danger-active-color);
  --_utrecht-button-hint-background-color: var(--utrecht-button-subtle-danger-background-color);
  --_utrecht-button-hint-border-color: var(--utrecht-button-subtle-danger-border-color);
  --_utrecht-button-hint-color: var(--utrecht-button-subtle-danger-color);
  --_utrecht-button-hint-disabled-background-color: var(
    --utrecht-button-subtle-danger-disabled-background-color
  );
  --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-subtle-danger-disabled-border-color);
  --_utrecht-button-hint-disabled-color: var(--utrecht-button-subtle-danger-disabled-color);
  --_utrecht-button-hint-focus-background-color: var(--utrecht-button-subtle-danger-focus-background-color);
  --_utrecht-button-hint-focus-border-color: var(--utrecht-button-subtle-danger-focus-border-color);
  --_utrecht-button-hint-focus-color: var(--utrecht-button-subtle-danger-focus-color);
  --_utrecht-button-hint-hover-background-color: var(--utrecht-button-subtle-danger-hover-background-color);
  --_utrecht-button-hint-hover-border-color: var(--utrecht-button-subtle-danger-hover-border-color);
  --_utrecht-button-hint-hover-color: var(--utrecht-button-subtle-danger-hover-color);
  --_utrecht-button-hint-pressed-background-color: var(
    --utrecht-button-subtle-danger-pressed-background-color
  );
  --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-subtle-danger-pressed-border-color);
  --_utrecht-button-hint-pressed-color: var(--utrecht-button-subtle-danger-pressed-color);
}

.utrecht-button--subtle.utrecht-button--ready {
  --_utrecht-button-hint-active-background-color: var(--utrecht-button-subtle-ready-active-background-color);
  --_utrecht-button-hint-active-border-color: var(--utrecht-button-subtle-ready-active-border-color);
  --_utrecht-button-hint-active-color: var(--utrecht-button-subtle-ready-active-color);
  --_utrecht-button-hint-background-color: var(--utrecht-button-subtle-ready-background-color);
  --_utrecht-button-hint-border-color: var(--utrecht-button-subtle-ready-border-color);
  --_utrecht-button-hint-color: var(--utrecht-button-subtle-ready-color);
  --_utrecht-button-hint-disabled-background-color: var(
    --utrecht-button-subtle-ready-disabled-background-color
  );
  --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-subtle-ready-disabled-border-color);
  --_utrecht-button-hint-disabled-color: var(--utrecht-button-subtle-ready-disabled-color);
  --_utrecht-button-hint-focus-background-color: var(--utrecht-button-subtle-ready-focus-background-color);
  --_utrecht-button-hint-focus-border-color: var(--utrecht-button-subtle-ready-focus-border-color);
  --_utrecht-button-hint-focus-color: var(--utrecht-button-subtle-ready-focus-color);
  --_utrecht-button-hint-hover-background-color: var(--utrecht-button-subtle-ready-hover-background-color);
  --_utrecht-button-hint-hover-border-color: var(--utrecht-button-subtle-ready-hover-border-color);
  --_utrecht-button-hint-hover-color: var(--utrecht-button-subtle-ready-hover-color);
  --_utrecht-button-hint-pressed-background-color: var(
    --utrecht-button-subtle-ready-pressed-background-color
  );
  --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-subtle-ready-pressed-border-color);
  --_utrecht-button-hint-pressed-color: var(--utrecht-button-subtle-ready-pressed-color);
}

.utrecht-button--subtle.utrecht-button--warning {
  --_utrecht-button-hint-active-background-color: var(--utrecht-button-subtle-warning-active-background-color);
  --_utrecht-button-hint-active-border-color: var(--utrecht-button-subtle-warning-active-border-color);
  --_utrecht-button-hint-active-color: var(--utrecht-button-subtle-warning-active-color);
  --_utrecht-button-hint-background-color: var(--utrecht-button-subtle-warning-background-color);
  --_utrecht-button-hint-border-color: var(--utrecht-button-subtle-warning-border-color);
  --_utrecht-button-hint-color: var(--utrecht-button-subtle-warning-color);
  --_utrecht-button-hint-disabled-background-color: var(
    --utrecht-button-subtle-warning-disabled-background-color
  );
  --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-subtle-warning-disabled-border-color);
  --_utrecht-button-hint-disabled-color: var(--utrecht-button-subtle-warning-disabled-color);
  --_utrecht-button-hint-focus-background-color: var(--utrecht-button-subtle-warning-focus-background-color);
  --_utrecht-button-hint-focus-border-color: var(--utrecht-button-subtle-warning-focus-border-color);
  --_utrecht-button-hint-focus-color: var(--utrecht-button-subtle-warning-focus-color);
  --_utrecht-button-hint-hover-background-color: var(--utrecht-button-subtle-warning-hover-background-color);
  --_utrecht-button-hint-hover-border-color: var(--utrecht-button-subtle-warning-hover-border-color);
  --_utrecht-button-hint-hover-color: var(--utrecht-button-subtle-warning-hover-color);
  --_utrecht-button-hint-pressed-background-color: var(
    --utrecht-button-subtle-warning-pressed-background-color
  );
  --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-subtle-warning-pressed-border-color);
  --_utrecht-button-hint-pressed-color: var(--utrecht-button-subtle-warning-pressed-color);
}
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
.utrecht-button-link {
  --_utrecht-button-background-color: var(
    --_utrecht-button-hint-background-color,
    var(--_utrecht-button-appearance-background-color, var(--utrecht-button-background-color))
  );
  --_utrecht-button-color: var(
    --_utrecht-button-hint-color,
    var(--_utrecht-button-appearance-color, var(--utrecht-button-color))
  );
  --_utrecht-button-border-color: var(
    --_utrecht-button-hint-border-color,
    var(--_utrecht-button-appearance-border-color, var(--utrecht-button-border-color, transparent))
  );
  --_utrecht-button-border-bottom-color: var(
    --_utrecht-button-hint-border-bottom-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-border-bottom-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-border-bottom-color, var(--utrecht-button-border-color, transparent))
        )
      )
    )
  );
  --_utrecht-button-disabled-background-color: var(
    --_utrecht-button-hint-disabled-background-color,
    var(
      --_utrecht-button-appearance-disabled-background-color,
      var(--utrecht-button-disabled-background-color, var(--utrecht-button-background-color))
    )
  );
  --_utrecht-button-disabled-border-color: var(
    --_utrecht-button-hint-disabled-border-color,
    var(
      --_utrecht-button-appearance-disabled-border-color,
      var(--utrecht-button-disabled-border-color, var(--utrecht-button-border-color))
    )
  );
  --_utrecht-button-disabled-color: var(
    --_utrecht-button-hint-disabled-color,
    var(--_utrecht-button-appearance-disabled-color, var(--utrecht-button-disabled-color, var(--utrecht-button-color)))
  );
  --_utrecht-button-pressed-background-color: var(
    --_utrecht-button-hint-pressed-background-color,
    var(
      --_utrecht-button-hint-background-color,
      var(
        --_utrecht-button-appearance-pressed-background-color,
        var(
          --_utrecht-button-appearance-background-color,
          var(--utrecht-button-pressed-background-color, var(--utrecht-button-background-color))
        )
      )
    )
  );
  --_utrecht-button-pressed-border-color: var(
    --_utrecht-button-hint-pressed-border-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-pressed-border-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-pressed-border-color, var(--utrecht-button-border-color))
        )
      )
    )
  );
  --_utrecht-button-pressed-color: var(
    --_utrecht-button-hint-pressed-color,
    var(
      --_utrecht-button-hint-color,
      var(
        --_utrecht-button-appearance-pressed-color,
        var(--_utrecht-button-appearance-color, var(--utrecht-button-pressed-color, var(--utrecht-button-color)))
      )
    )
  );
  --_utrecht-button-focus-background-color: var(
    --_utrecht-button-hint-focus-background-color,
    var(
      --_utrecht-button-hint-background-color,
      var(
        --_utrecht-button-appearance-focus-background-color,
        var(
          --_utrecht-button-appearance-background-color,
          var(--utrecht-button-focus-background-color, var(--utrecht-button-background-color))
        )
      )
    )
  );
  --_utrecht-button-focus-border-color: var(
    --_utrecht-button-hint-focus-border-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-focus-border-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-focus-border-color, var(--utrecht-button-border-color))
        )
      )
    )
  );
  --_utrecht-button-focus-color: var(
    --_utrecht-button-hint-focus-color,
    var(
      --_utrecht-button-hint-color,
      var(
        --_utrecht-button-appearance-focus-color,
        var(--_utrecht-button-appearance-color, var(--utrecht-button-focus-color, var(--utrecht-button-color)))
      )
    )
  );
  --_utrecht-button-hover-background-color: var(
    --_utrecht-button-hint-hover-background-color,
    var(
      --_utrecht-button-hint-background-color,
      var(
        --_utrecht-button-appearance-hover-background-color,
        var(
          --_utrecht-button-appearance-background-color,
          var(--utrecht-button-hover-background-color, var(--utrecht-button-background-color))
        )
      )
    )
  );
  --_utrecht-button-hover-border-color: var(
    --_utrecht-button-hint-hover-border-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-hover-border-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-hover-border-color, var(--utrecht-button-border-color))
        )
      )
    )
  );
  --_utrecht-button-hover-color: var(
    --_utrecht-button-hint-hover-color,
    var(
      --_utrecht-button-hint-color,
      var(
        --_utrecht-button-appearance-hover-color,
        var(--_utrecht-button-appearance-color, var(--utrecht-button-hover-color, var(--utrecht-button-color)))
      )
    )
  );
  --_utrecht-button-active-background-color: var(
    --_utrecht-button-hint-active-background-color,
    var(
      --_utrecht-button-hint-background-color,
      var(
        --_utrecht-button-appearance-active-background-color,
        var(
          --_utrecht-button-appearance-background-color,
          var(--utrecht-button-active-background-color, var(--utrecht-button-background-color))
        )
      )
    )
  );
  --_utrecht-button-active-border-color: var(
    --_utrecht-button-hint-active-border-color,
    var(
      --_utrecht-button-hint-border-color,
      var(
        --_utrecht-button-appearance-active-border-color,
        var(
          --_utrecht-button-appearance-border-color,
          var(--utrecht-button-active-border-color, var(--utrecht-button-border-color))
        )
      )
    )
  );
  --_utrecht-button-active-color: var(
    --_utrecht-button-hint-active-color,
    var(
      --_utrecht-button-hint-color,
      var(
        --_utrecht-button-appearance-active-color,
        var(--_utrecht-button-appearance-color, var(--utrecht-button-active-color, var(--utrecht-button-color)))
      )
    )
  );
  --_utrecht-button-border-width: var(--_utrecht-button-appearance-border-width, var(--utrecht-button-border-width, 0));
  --_utrecht-button-border-block-end-width: var(
    --utrecht-button-border-bottom-width,
    var(--_utrecht-button-border-width, 0)
  );
  --_utrecht-button-font-size: var(--_utrecht-button-appearance-font-size, var(--utrecht-button-font-size));
  --_utrecht-button-line-height: var(--_utrecht-button-appearance-line-height, var(--utrecht-button-line-height));
  --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
  align-items: center;
  background-color: var(--_utrecht-button-background-color);
  block-size: fit-content;
  border-color: var(--_utrecht-button-border-color);
  border-radius: var(--utrecht-button-border-radius);
  border-style: solid;
  border-width: var(--_utrecht-button-border-width);
  border-block-end-color: var(--_utrecht-button-border-bottom-color);
  border-block-end-width: var(--_utrecht-button-border-block-end-width);
  box-sizing: border-box;
  color: var(--_utrecht-button-color);
  column-gap: var(--utrecht-button-column-gap);
  cursor: var(--utrecht-action-activate-cursor, revert);
  display: inline-flex;
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
  font-size: var(--_utrecht-button-font-size, var(--utrecht-document-font-family, inherit));
  font-weight: var(--_utrecht-button-appearance-font-weight, var(--utrecht-button-font-weight));
  inline-size: var(--utrecht-button-inline-size, auto);
  justify-content: var(--utrecht-button-justify-content, center);
  line-height: var(--_utrecht-button-line-height);
  max-inline-size: var(--utrecht-button-max-inline-size, fit-content);
  min-block-size: var(--utrecht-button-min-block-size, 44px);
  min-inline-size: var(--utrecht-button-min-inline-size, 44px);
  padding-block-end: var(--utrecht-button-padding-block-end);
  padding-block-start: var(--utrecht-button-padding-block-start);
  padding-inline-end: var(--utrecht-button-padding-inline-end);
  padding-inline-start: var(--utrecht-button-padding-inline-start);
  scale: 1;
  text-transform: var(--utrecht-button-text-transform);
  -webkit-user-select: none;
  user-select: none;
  cursor: var(--utrecht-action-navigate-cursor, pointer);
  text-decoration: none;
}
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
  .utrecht-button-link {
    --_utrecht-button-disabled-border-color: GrayText;
    --_utrecht-button-disabled-color: GrayText;
    background-color: ButtonFace;
    border-color: buttonborder;
    color: ButtonText;
  }
}

.utrecht-button-link--active {
  background-color: var(--_utrecht-button-active-background-color);
  border-color: var(--_utrecht-button-active-border-color);
  color: var(--_utrecht-button-active-color);
}

.utrecht-button-link--hover {
  background-color: var(--_utrecht-button-hover-background-color);
  border-color: var(--_utrecht-button-hover-border-color);
  color: var(--_utrecht-button-hover-color);
  scale: var(--utrecht-button-hover-scale, 1);
}

.utrecht-button-link--focus {
  background-color: var(--_utrecht-button-focus-background-color);
  border-color: var(--_utrecht-button-focus-border-color);
  color: var(--_utrecht-button-focus-color);
  scale: var(--utrecht-button-focus-scale, 1);
}

.utrecht-button-link--focus-visible {
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
}

.utrecht-button-link--placeholder {
  background-color: var(--_utrecht-button-disabled-background-color);
  border-color: var(--_utrecht-button-disabled-border-color);
  color: var(--_utrecht-button-disabled-color);
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
}

.utrecht-button-link--html-a:focus {
  background-color: var(--_utrecht-button-focus-background-color);
  border-color: var(--_utrecht-button-focus-border-color);
  color: var(--_utrecht-button-focus-color);
  scale: var(--utrecht-button-focus-scale, 1);
}
.utrecht-button-link--html-a:focus-visible {
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
}
.utrecht-button-link--html-a:hover {
  background-color: var(--_utrecht-button-hover-background-color);
  border-color: var(--_utrecht-button-hover-border-color);
  color: var(--_utrecht-button-hover-color);
  scale: var(--utrecht-button-hover-scale, 1);
}
.utrecht-button-link--html-a:active {
  background-color: var(--_utrecht-button-active-background-color);
  border-color: var(--_utrecht-button-active-border-color);
  color: var(--_utrecht-button-active-color);
}

.utrecht-button-link--primary-action {
  --_utrecht-button-appearance-active-background-color: var(--utrecht-button-primary-action-active-background-color);
  --_utrecht-button-appearance-active-border-color: var(--utrecht-button-primary-action-active-border-color);
  --_utrecht-button-appearance-active-color: var(--utrecht-button-primary-action-active-color);
  --_utrecht-button-appearance-background-color: var(--utrecht-button-primary-action-background-color);
  --_utrecht-button-appearance-border-color: var(--utrecht-button-primary-action-border-color);
  --_utrecht-button-appearance-border-width: var(--utrecht-button-primary-action-border-width);
  --_utrecht-button-appearance-color: var(--utrecht-button-primary-action-color);
  --_utrecht-button-appearance-font-size: var(--utrecht-button-primary-action-font-size);
  --_utrecht-button-appearance-font-weight: var(--utrecht-button-primary-action-font-weight);
  --_utrecht-button-appearance-line-height: var(--utrecht-button-primary-action-line-height);
  --_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-primary-action-disabled-background-color);
  --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-primary-action-disabled-border-color);
  --_utrecht-button-appearance-disabled-color: var(--utrecht-button-primary-action-disabled-color);
  --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-primary-action-focus-background-color);
  --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-primary-action-focus-border-color);
  --_utrecht-button-appearance-focus-color: var(--utrecht-button-primary-action-focus-color);
  --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-primary-action-hover-background-color);
  --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-primary-action-hover-border-color);
  --_utrecht-button-appearance-hover-color: var(--utrecht-button-primary-action-hover-color);
  --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-primary-action-pressed-background-color);
  --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-primary-action-pressed-border-color);
  --_utrecht-button-appearance-pressed-color: var(--utrecht-button-primary-action-pressed-color);
}

.utrecht-button-link--secondary-action {
  --_utrecht-button-appearance-active-background-color: var(--utrecht-button-secondary-action-active-background-color);
  --_utrecht-button-appearance-active-border-color: var(--utrecht-button-secondary-action-active-border-color);
  --_utrecht-button-appearance-active-color: var(--utrecht-button-secondary-action-active-color);
  --_utrecht-button-appearance-background-color: var(--utrecht-button-secondary-action-background-color);
  --_utrecht-button-appearance-border-color: var(--utrecht-button-secondary-action-border-color);
  --_utrecht-button-appearance-border-width: var(--utrecht-button-secondary-action-border-width);
  --_utrecht-button-appearance-color: var(--utrecht-button-secondary-action-color);
  --_utrecht-button-appearance-font-size: var(--utrecht-button-secondary-action-font-size);
  --_utrecht-button-appearance-font-weight: var(--utrecht-button-secondary-action-font-weight);
  --_utrecht-button-appearance-line-height: var(--utrecht-button-secondary-action-line-height);
  --_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-secondary-action-disabled-background-color);
  --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-secondary-action-disabled-border-color);
  --_utrecht-button-appearance-disabled-color: var(--utrecht-button-secondary-action-disabled-color);
  --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-secondary-action-focus-background-color);
  --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-secondary-action-focus-border-color);
  --_utrecht-button-appearance-focus-color: var(--utrecht-button-secondary-action-focus-color);
  --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-secondary-action-hover-background-color);
  --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-secondary-action-hover-border-color);
  --_utrecht-button-appearance-hover-color: var(--utrecht-button-secondary-action-hover-color);
  --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-secondary-action-pressed-background-color);
  --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-secondary-action-pressed-border-color);
  --_utrecht-button-appearance-pressed-color: var(--utrecht-button-secondary-action-pressed-color);
}

.utrecht-button-link--subtle {
  --_utrecht-button-appearance-active-background-color: var(--utrecht-button-subtle-active-background-color);
  --_utrecht-button-appearance-active-border-color: var(--utrecht-button-subtle-active-border-color);
  --_utrecht-button-appearance-active-color: var(--utrecht-button-subtle-active-color);
  --_utrecht-button-appearance-background-color: var(--utrecht-button-subtle-background-color);
  --_utrecht-button-appearance-border-color: var(--utrecht-button-subtle-border-color);
  --_utrecht-button-appearance-border-width: var(--utrecht-button-subtle-border-width);
  --_utrecht-button-appearance-color: var(--utrecht-button-subtle-color);
  --_utrecht-button-appearance-font-size: var(--utrecht-button-subtle-font-size);
  --_utrecht-button-appearance-font-weight: var(--utrecht-button-subtle-font-weight);
  --_utrecht-button-appearance-line-height: var(--utrecht-button-subtle-line-height);
  --_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-subtle-disabled-background-color);
  --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-subtle-disabled-border-color);
  --_utrecht-button-appearance-disabled-color: var(--utrecht-button-subtle-disabled-color);
  --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-subtle-focus-background-color);
  --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-subtle-focus-border-color);
  --_utrecht-button-appearance-focus-color: var(--utrecht-button-subtle-focus-color);
  --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-subtle-hover-background-color);
  --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-subtle-hover-border-color);
  --_utrecht-button-appearance-hover-color: var(--utrecht-button-subtle-hover-color);
  --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-subtle-pressed-background-color);
  --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-subtle-pressed-border-color);
  --_utrecht-button-appearance-pressed-color: var(--utrecht-button-subtle-pressed-color);
}
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
.utrecht-checkbox {
  margin-block-end: 0;
  margin-block-start: 0;
  margin-inline-end: 0;
  margin-inline-start: 0;
  cursor: var(--utrecht-action-activate-cursor, revert);
  -webkit-user-select: none;
  user-select: none;
}
.utrecht-checkbox--disabled {
  cursor: var(--utrecht-action-disabled-cursor, revert);
}

.utrecht-checkbox--focus-visible {
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
}

.utrecht-checkbox--html-input:disabled {
  cursor: var(--utrecht-action-disabled-cursor, revert);
}
.utrecht-checkbox--html-input :focus-visible {
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
}
/**
 * @license EUPL-1.2
 * Copyright (c) 2023 Frameless B.V.
 */
.utrecht-combobox {
  inline-size: 100%;
  max-inline-size: var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size));
  position: relative;
}

.utrecht-combobox__popover {
  border-width: 0;
  padding-block-end: 0;
  padding-block-start: 0;
  padding-inline-end: 0;
  padding-inline-start: 0;
  background-color: canvas;
  block-size: fit-content;
  color: canvastext;
  inline-size: fit-content;
  inset: 0;
  overflow: auto;
  position: absolute;
  z-index: var(--utrecht-combobox-popover-z-index, 1);
}

.utrecht-combobox__popover--block-end {
  inset-block-start: 100%;
}

.utrecht-combobox__popover--hidden {
  display: none !important;
}
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
.utrecht-data-list {
  display: block;
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-data-list-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-data-list-margin-block-start, 0));
}

.utrecht-data-list__item-key {
  color: var(--utrecht-data-list-item-key-color);
  font-size: var(--utrecht-data-list-item-key-font-size);
  font-weight: var(--utrecht-data-list-item-key-font-weight);
  line-height: var(--utrecht-data-list-item-key-line-height);
}

.utrecht-data-list__item-value {
  color: var(--utrecht-data-list-item-value-color);
  font-size: var(--utrecht-data-list-item-value-font-size);
  font-weight: var(--utrecht-data-list-item-value-font-weight);
  line-height: var(--utrecht-data-list-item-value-line-height);
  min-block-size: calc(var(--utrecht-data-list-item-value-line-height) * 1rem);
}

.utrecht-data-list__actions--html-dd {
  margin-inline-start: 0;
}

.utrecht-data-list__item-value--html-dd {
  margin-inline-start: 0;
}

.utrecht-data-list__item-value--multiline {
  white-space: pre-line;
}

.utrecht-data-list--rows .utrecht-data-list__actions {
  align-items: baseline;
  display: flex;
  grid-column: -1;
  grid-row: 1;
  justify-content: flex-end;
}
.utrecht-data-list--rows .utrecht-data-list__item {
  --_utrecht-minmax: max(
    var(--utrecht-data-list-rows-column-min-inline-size, 25ch),
    var(--utrecht-data-list-rows-column-inline-size, 80%)
  );
  --_utrecht-auto-col: minmax(var(--_utrecht-minmax), max-content);
  border-block-end-color: var(--utrecht-data-list-rows-border-bottom-color, transparent);
  border-block-end-style: solid;
  border-block-end-width: var(--utrecht-data-list-rows-border-bottom-width, 0);
  column-gap: var(--utrecht-data-list-rows-gap);
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-columns: repeat(auto-fit, var(--_utrecht-auto-col));
  margin-block-start: var(--utrecht-data-list-rows-item-margin-block-start);
  padding-block-end: var(--utrecht-data-list-rows-item-padding-block-end);
  padding-block-start: var(--utrecht-data-list-rows-item-padding-block-start);
  row-gap: 0;
}
.utrecht-data-list--rows .utrecht-data-list__item:first-of-type {
  margin-block-start: 0;
}
.utrecht-data-list--rows .utrecht-data-list__item-value {
  margin-block-start: var(--utrecht-data-list-rows-item-value-margin-block-start);
}
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */

.utrecht-figure {
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-block-start, 0));
  margin-inline-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-inline-end, 0));
  margin-inline-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-figure-margin-inline-start, 0));
}

.utrecht-figure__caption {
  color: var(--utrecht-figure-caption-color);
  font-size: var(--utrecht-figure-caption-font-size);
  line-height: var(--utrecht-figure-caption-line-height);
}
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
.utrecht-form-field {
  break-inside: avoid;
  font-family: var(--utrecht-document-font-family, inherit);
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-margin-block-start, 0));
}

.utrecht-form-field--distanced {
  --utrecht-space-around: 1;
}

.utrecht-form-field--invalid {
  border-inline-start-color: var(--utrecht-form-field-invalid-border-inline-start-color);
  border-inline-start-style: solid;
  border-inline-start-width: var(--utrecht-form-field-invalid-border-inline-start-width, 0);
  padding-inline-start: var(--utrecht-form-field-invalid-padding-inline-start);
}

.utrecht-form-field--checkbox {
  display: grid;
  gap: 0 var(--utrecht-checkbox-margin-inline-end, 12px);
  grid-template-areas: "input label" "input description" "input error-message";
  grid-template-columns: var(--utrecht-checkbox-size) 100fr;
}
.utrecht-form-field--checkbox .utrecht-form-field__label:has(.utrecht-form-field__input) {
  margin-inline-start: calc(-1 * (var(--utrecht-checkbox-size) + var(--utrecht-checkbox-margin-inline-end, 12px)));
}
.utrecht-form-field--checkbox .utrecht-form-field__label .utrecht-form-field__input {
  margin-inline-end: var(--utrecht-checkbox-margin-inline-end, 12px);
}

.utrecht-form-field--radio {
  display: grid;
  gap: 0 var(--utrecht-radio-button-margin-inline-end, 12px);
  grid-template-areas: "input label" "input description" "input error-message";
  grid-template-columns: var(--utrecht-radio-button-size) 100fr;
}
.utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input) {
  margin-inline-start: calc(-1 * (var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px)));
}
.utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input {
  margin-inline-end: var(--utrecht-radio-button-margin-inline-end, 12px);
}

.utrecht-form-field__input {
  margin-block-end: 0;
  margin-block-start: 0;
  grid-area: input;
  order: 5;
}

.utrecht-form-field__label {
  grid-area: label;
  margin-block-end: var(--utrecht-form-field-label-margin-block-end);
  margin-block-start: 0;
  order: 1;
}

.utrecht-form-field .utrecht-form-field-description {
  grid-area: description;
  margin-block-end: var(--utrecht-form-field-description-margin-block-end);
  margin-block-start: var(--utrecht-form-field-description-margin-block-start);
  order: 2;
}

.utrecht-form-field .utrecht-form-field-description--invalid {
  grid-area: error-message;
  order: 3;
}

.utrecht-form-field__description {
  grid-area: description;
  margin-block-end: var(--utrecht-form-field-description-margin-block-end);
  margin-block-start: var(--utrecht-form-field-description-margin-block-start);
  order: 2;
}

.utrecht-form-field__description--before {
  grid-area: description-before;
  order: 4;
}

.utrecht-form-field__error-message {
  grid-area: error-message;
  order: 3;
}
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
.utrecht-form-field-error-message {
  --utrecht-document-color: currentColor;
  background-color: var(--utrecht-form-field-error-message-background-color);
  color: var(--utrecht-form-field-error-message-color);
  display: block;
  font-family: var(--utrecht-document-font-family, inherit);
  font-size: var(--utrecht-form-field-error-message-font-size, inherit);
  font-style: var(--utrecht-form-field-error-message-font-style);
  line-height: var(--utrecht-form-field-error-message-line-height);
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-error-message-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-error-message-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
  padding-block-end: var(--utrecht-form-field-error-message-padding-block-end);
  padding-block-start: var(--utrecht-form-field-error-message-padding-block-start);
  padding-inline-end: var(--utrecht-form-field-error-message-padding-inline-end);
  padding-inline-start: var(--utrecht-form-field-error-message-padding-inline-start);
}
.utrecht-form-field-error-message > * {
  --utrecht-space-around: 1;
}
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
.utrecht-form-fieldset {
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-margin-block-start, 0));
}

.utrecht-form-fieldset--html-fieldset,
.utrecht-form-fieldset__fieldset--html-fieldset {
  all: revert;
  border-width: 0;
  margin-inline-end: 0;
  margin-inline-start: 0;
  min-inline-size: 0;
  padding-block-end: 0;
  padding-block-start: 0.01em;
  padding-inline-end: 0;
  padding-inline-start: 0;
}

.utrecht-form-fieldset__legend--html-legend {
  display: table;
  inline-size: 100%;
  padding-inline-end: 0;
  padding-inline-start: 0;
}

.utrecht-form-fieldset--distanced {
  --utrecht-space-around: 1;
}

.utrecht-form-fieldset--section {
  background-color: var(--utrecht-form-fieldset-section-background-color);
  color: var(--utrecht-form-fieldset-section-color);
}

.utrecht-form-fieldset__legend {
  break-after: avoid-page;
  break-inside: avoid-page;
  color: var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit));
  font-family: var(--utrecht-form-fieldset-legend-font-family, var(--utrecht-document-font-family));
  font-size: var(--utrecht-form-fieldset-legend-font-size);
  font-weight: var(--utrecht-form-fieldset-legend-font-weight);
  line-height: var(--utrecht-form-fieldset-legend-line-height);
}

.utrecht-form-fieldset__legend--disabled {
  color: var(--utrecht-form-fieldset-legend-disabled-color, var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit)));
}

.utrecht-form-fieldset__legend--distanced {
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-fieldset-legend-margin-block-start, 0));
}

.utrecht-form-fieldset--invalid {
  border-inline-start-color: var(--utrecht-form-fieldset-invalid-border-inline-start-color, var(--utrecht-form-field-invalid-border-inline-start-color));
  border-inline-start-style: solid;
  border-inline-start-width: var(--utrecht-form-fieldset-invalid-border-inline-start-width, var(--utrecht-form-field-invalid-border-inline-start-width));
  padding-inline-start: var(--utrecht-form-fieldset-invalid-padding-inline-start, var(--utrecht-form-field-invalid-padding-inline-start));
}
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */

.utrecht-form-label {
  color: var(--utrecht-form-label-color);
  font-size: var(--utrecht-form-label-font-size);
  font-weight: var(--utrecht-form-label-font-weight);
}

.utrecht-form-label--checkbox {
  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
  cursor: var(--utrecht-action-activate-cursor, revert);
  font-weight: var(--utrecht-form-label-checkbox-font-weight, var(--utrecht-form-label-font-weight));
}

.utrecht-form-label--checked {
  font-weight: var(--utrecht-form-label-checked-font-weight, var(--utrecht-form-label-font-weight));
}

.utrecht-form-label--disabled {
  color: var(--utrecht-form-label-disabled-color, var(--utrecht-form-label-color));
  cursor: var(--utrecht-action-disabled-cursor, revert);
}

.utrecht-form-label--radio {
  color: var(--utrecht-form-label-checkbox-color, var(--utrecht-form-label-color));
  cursor: var(--utrecht-action-activate-cursor, revert);
  font-weight: var(--utrecht-form-label-radio-font-weight, var(--utrecht-form-label-font-weight));
}
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */

.utrecht-heading-2 {
  break-after: avoid;
  break-inside: avoid-column;
  break-inside: avoid;
  color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
  font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
  font-size: var(--utrecht-heading-2-font-size, revert);
  font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold));
  line-height: var(--utrecht-heading-2-line-height);
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-2-margin-block-start, 0));
}

.utrecht-heading-2--distanced {
  --utrecht-space-around: 1;
}
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */

.utrecht-heading-3 {
  break-after: avoid;
  break-inside: avoid-column;
  break-inside: avoid;
  color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit)));
  font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family)));
  font-size: var(--utrecht-heading-3-font-size, revert);
  font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold));
  line-height: var(--utrecht-heading-3-line-height);
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-heading-3-margin-block-start, 0));
}

.utrecht-heading-3--distanced {
  --utrecht-space-around: 1;
}
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
.utrecht-link-button {
  --utrecht-icon-size: var(--utrecht-link-icon-size, 1em);
  color: var(--_utrecht-link-state-color, var(--utrecht-link-color, var(--_utrecht-link-forced-colors-color)));
  --_utrecht-link-forced-colors-color: linktext;
  text-decoration-color: var(--_utrecht-link-state-text-decoration-color, var(--utrecht-link-text-decoration-color, currentColor));
  text-decoration-line: var(--_utrecht-link-state-text-decoration, var(--utrecht-link-text-decoration, underline));
  text-decoration-skip-ink: all;
  text-decoration-thickness: max(var(--_utrecht-link-state-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px);
  text-underline-offset: var(--utrecht-link-text-underline-offset);
  --utrecht-icon-size: var(--utrecht-button-icon-size, 1em);
  align-items: center;
  border-radius: var(--utrecht-button-border-radius, 0);
  column-gap: var(--utrecht-button-column-gap, var(--utrecht-button-icon-gap));
  cursor: pointer;
  display: inline-flex;
  font-family: var(--utrecht-button-font-family, var(--utrecht-document-font-family));
  font-size: var(--utrecht-button-font-size, var(--utrecht-document-font-family));
  font-weight: var(--utrecht-button-font-weight);
  inline-size: var(--utrecht-button-inline-size, auto);
  justify-content: center;
  line-height: inherit;
  min-block-size: var(--utrecht-button-min-block-size, 44px);
  min-inline-size: var(--utrecht-button-min-inline-size, 44px);
  padding-block-end: var(--utrecht-button-padding-block-end);
  padding-block-start: var(--utrecht-button-padding-block-start);
  padding-inline-end: var(--utrecht-button-padding-inline-end);
  padding-inline-start: var(--utrecht-button-padding-inline-start);
  text-transform: var(--utrecht-button-text-transform);
  -webkit-user-select: none;
  user-select: none;
}

.utrecht-link-button--hover, .utrecht-link-button--html-button:not(:disabled):hover {
  --_utrecht-link-forced-colors-color: linktext;
  --_utrecht-link-state-color: var(--utrecht-link-hover-color);
  --_utrecht-link-state-text-decoration: var(--utrecht-link-hover-text-decoration);
  --_utrecht-link-state-text-decoration-thickness: var(--utrecht-link-hover-text-decoration-thickness);
  text-decoration-skip: none;
  text-decoration-skip-ink: none;
}

.utrecht-link-button--disabled {
  --_utrecht-link-forced-colors-color: GrayText;
  --_utrecht-link-state-color: var(--utrecht-link-placeholder-color);
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
  font-weight: var(--utrecht-link-placeholder-font-weight);
  text-decoration-line: none;
}

.utrecht-link-button--focus, .utrecht-link-button--html-button:not(:disabled):focus {
  --_utrecht-link-state-color: var(--utrecht-link-focus-color);
  background-color: var(--utrecht-link-focus-background-color, transparent);
  text-decoration-skip: none;
  text-decoration-skip-ink: none;
}

.utrecht-link-button--focus-visible, .utrecht-link-button--html-button:focus-visible {
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
  --_utrecht-link-state-text-decoration: var(
    --utrecht-link-focus-visible-text-decoration,
    var(--utrecht-link-focus-text-decoration)
  );
  --_utrecht-link-state-text-decoration-thickness: var(
    --utrecht-link-focus-visible-text-decoration-thickness,
    var(--utrecht-link-focus-text-decoration-thickness)
  );
  z-index: var(--utrecht-stack-focus-z-index, 1);
}

.utrecht-link-button--active, .utrecht-link-button--html-button:not(:disabled):active {
  --_utrecht-link-forced-colors-color: activetext;
  --_utrecht-link-state-color: var(--utrecht-link-active-color);
}

.utrecht-link-button--inline {
  --utrecht-icon-inset-block-start: var(--utrecht-icon-baseline-inset-block-start);
  min-block-size: auto;
  min-inline-size: auto;
  padding-block-end: 0;
  padding-block-start: 0;
  padding-inline-end: 0;
  padding-inline-start: 0;
}

.utrecht-link-button--pressed {
  --_utrecht-link-forced-colors-color: activetext;
  --_utrecht-link-state-color: var(--utrecht-link-active-color);
}

.utrecht-link-button--html-button {
  background-color: transparent;
  border-width: 0;
}
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2023 Frameless B.V.
 */
.utrecht-listbox {
  --utrecht-listbox-max-block-size: 300px;
  background-color: var(--_utrecht-listbox-disabled-background-color, var(--_utrecht-listbox-interactive-background-color, var(--utrecht-listbox-background-color)));
  border-color: var(--_utrecht-listbox-disabled-border-color, var(--_utrecht-listbox-interactive-border-color, var(--utrecht-listbox-border-color)));
  border-radius: var(--utrecht-listbox-border-radius);
  border-style: solid;
  border-width: var(--utrecht-listbox-border-width);
  box-sizing: border-box;
  color: var(--_utrecht-listbox-disabled-color, var(--_utrecht-listbox-interactive-color, var(--utrecht-listbox-color)));
  cursor: default;
  display: flex;
  flex-direction: column;
  font-weight: var(--utrecht-listbox-font-weight, var(--utrecht-form-control-font-weight, initial));
  inline-size: var(--utrecht-listbox-inline-size, var(--utrecht-form-control-max-inline-size));
  max-block-size: var(--utrecht-listbox-max-block-size);
  max-inline-size: 100%;
  min-block-size: 1em;
  overflow-block: auto;
  overflow-y: auto;
  padding-block-end: var(--utrecht-listbox-padding-block-end);
  padding-block-start: var(--utrecht-listbox-padding-block-start);
  padding-inline-end: var(--utrecht-listbox-padding-inline-end);
  padding-inline-start: var(--utrecht-listbox-padding-inline-start);
  -webkit-user-select: none;
  user-select: none;
}
@media (forced-colors: active) {
  .utrecht-listbox {
    --utrecht-listbox-background-color: field;
    --utrecht-listbox-border-color: fieldtext;
    --utrecht-listbox-hover-background-color: field;
    --utrecht-listbox-hover-border-color: fieldtext;
    --utrecht-listbox-hover-color: fieldtext;
    --utrecht-listbox-focus-border-color: Highlight;
    --utrecht-listbox-disabled-border-color: GrayText;
    --utrecht-listbox-option-background-color: field;
    --utrecht-listbox-option-color: fieldtext;
    --utrecht-listbox-option-hover-background-color: Highlight;
    --utrecht-listbox-option-hover-color: HighlightText;
    --utrecht-listbox-option-active-background-color: Highlight;
    --utrecht-listbox-option-active-color: HighlightText;
    --utrecht-listbox-option-disabled-background-color: field;
    --utrecht-listbox-option-disabled-color: GrayText;
    --utrecht-listbox-option-selected-background-color: Highlight;
    --utrecht-listbox-option-selected-color: HighlightText;
    --utrecht-listbox-option-selected-hover-background-color: Highlight;
    --utrecht-listbox-option-selected-hover-color: HighlightText;
    --utrecht-listbox-option-selected-disabled-background-color: GrayText;
    --utrecht-listbox-option-selected-disabled-color: field;
  }
}

.utrecht-listbox--focus {
  --_utrecht-listbox-interactive-border-color: var(--utrecht-listbox-focus-border-color);
}

.utrecht-listbox--focus-visible {
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
}

.utrecht-listbox--invalid {
}

.utrecht-listbox__list {
  margin-block-end: 0;
  margin-block-start: 0;
  margin-inline-end: 0;
  margin-inline-start: 0;
  padding-inline-start: 0;
}

.utrecht-listbox__group {
  margin-block-end: 0;
  margin-block-start: 0;
  margin-inline-end: 0;
  margin-inline-start: 0;
  padding-inline-start: 0;
  margin-block-end: var(--utrecht-listbox-option-group-margin-block-end);
}

.utrecht-listbox__group-label {
  color: var(--utrecht-listbox-option-group-label-color);
  font-size: var(--utrecht-listbox-option-group-label-font-size);
  font-weight: var(--utrecht-listbox-option-group-label-font-weight);
  line-height: var(--utrecht-listbox-option-group-label-line-height);
  margin-inline-start: var(--utrecht-listbox-option-group-label-margin-inline-start);
}
@media (forced-colors: active) {
  .utrecht-listbox__group-label {
    background-color: field;
    color: fieldtext;
  }
}

.utrecht-listbox__option {
  list-style: none;
  --_utrecht-listbox-option-background-color: var(
    --_utrecht-listbox-option-disabled-background-color,
    var(
      --_utrecht-listbox-option-interactive-background-color,
      var(--_utrecht-listbox-option-state-background-color, var(--utrecht-listbox-option-background-color))
    )
  );
  --_utrecht-listbox-option-color: var(
    --_utrecht-listbox-option-disabled-color,
    var(
      --_utrecht-listbox-option-interactive-color,
      var(--_utrecht-listbox-option-state-color, var(--utrecht-listbox-option-color))
    )
  );
  align-items: center;
  background-color: var(--_utrecht-listbox-option-background-color);
  box-sizing: border-box;
  color: var(--_utrecht-listbox-option-color);
  display: flex;
  min-block-size: var(--utrecht-listbox-option-min-block-size, var(--utrecht-pointer-target-min-size, 24px));
  padding-block-end: var(--utrecht-listbox-option-padding-block-end);
  padding-block-start: var(--utrecht-listbox-option-padding-block-start);
  padding-inline-end: var(--utrecht-listbox-option-padding-inline-end);
  padding-inline-start: var(--utrecht-listbox-option-padding-inline-start);
}
@media (forced-colors: active) {
  .utrecht-listbox__option {
    forced-color-adjust: none;
  }
}

.utrecht-listbox__option--hover {
  --_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-hover-background-color);
  --_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-hover-color);
}

.utrecht-listbox__option--focus {
  --_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-focus-background-color);
  --_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-focus-color);
}

.utrecht-listbox__option--focus-visible {
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
  --utrecht-focus-outline-offset: calc(var(--utrecht-focus-outline-width) * -1);
}

.utrecht-listbox__option--active {
  --_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-active-background-color);
  --_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-active-color);
  font-weight: var(--utrecht-listbox-option-is-active-font-weight);
}

.utrecht-listbox__option--selected {
  --_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-selected-background-color);
  --_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-selected-color);
}

.utrecht-listbox__option--html-li {
  list-style: none;
}
.utrecht-listbox__option--html-li:hover {
  --_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-hover-background-color);
  --_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-hover-color);
}
.utrecht-listbox__option--html-li:focus {
  --_utrecht-listbox-option-state-background-color: var(--utrecht-listbox-option-focus-background-color);
  --_utrecht-listbox-option-state-color: var(--utrecht-listbox-option-focus-color);
}
.utrecht-listbox__option--disabled {
  --utrecht-listbox-option-hover-background-color: var(--utrecht-listbox-option-disabled-background-color);
  --utrecht-listbox-option-hover-color: var(--utrecht-listbox-option-disabled-color);
  --_utrecht-listbox-option-interactive-background-color: var(--utrecht-listbox-option-disabled-background-color);
  --_utrecht-listbox-option-interactive-color: var(--utrecht-listbox-option-disabled-color);
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
}
.utrecht-listbox__option--disabled.utrecht-listbox__option--selected {
  --_utrecht-listbox-option-disabled-background-color: var(--utrecht-listbox-option-selected-disabled-background-color);
  --_utrecht-listbox-option-disabled-color: var(--utrecht-listbox-option-selected-disabled-color);
}

.utrecht-listbox--disabled {
  --_utrecht-listbox-option-disabled-background-color: var(--utrecht-listbox-option-disabled-background-color);
  --_utrecht-listbox-option-disabled-color: var(--utrecht-listbox-option-disabled-color);
  --_utrecht-listbox-disabled-background-color: var(--utrecht-listbox-disabled-background-color);
  --_utrecht-listbox-disabled-border-color: var(--utrecht-listbox-disabled-border-color);
  --_utrecht-listbox-disabled-color: var(--utrecht-listbox-disabled-color);
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
}

.utrecht-listbox--html-div:focus {
  --_utrecht-listbox-interactive-border-color: var(--utrecht-listbox-focus-border-color);
}
.utrecht-listbox--html-div:focus-visible {
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
}

.utrecht-listbox--forced-colors {
  --utrecht-listbox-background-color: field;
  --utrecht-listbox-border-color: fieldtext;
  --utrecht-listbox-hover-background-color: field;
  --utrecht-listbox-hover-border-color: fieldtext;
  --utrecht-listbox-hover-color: fieldtext;
  --utrecht-listbox-focus-border-color: Highlight;
  --utrecht-listbox-disabled-border-color: GrayText;
  --utrecht-listbox-option-background-color: field;
  --utrecht-listbox-option-color: fieldtext;
  --utrecht-listbox-option-hover-background-color: Highlight;
  --utrecht-listbox-option-hover-color: HighlightText;
  --utrecht-listbox-option-active-background-color: Highlight;
  --utrecht-listbox-option-active-color: HighlightText;
  --utrecht-listbox-option-disabled-background-color: field;
  --utrecht-listbox-option-disabled-color: GrayText;
  --utrecht-listbox-option-selected-background-color: Highlight;
  --utrecht-listbox-option-selected-color: HighlightText;
  --utrecht-listbox-option-selected-hover-background-color: Highlight;
  --utrecht-listbox-option-selected-hover-color: HighlightText;
  --utrecht-listbox-option-selected-disabled-background-color: GrayText;
  --utrecht-listbox-option-selected-disabled-color: field;
}
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */

.utrecht-paragraph {
  color: var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit));
  font-family: var(--utrecht-paragraph-font-family, var(--utrecht-document-font-family, inherit));
  font-size: var(--utrecht-paragraph-font-size, var(--utrecht-document-font-size, inherit));
  font-weight: var(--utrecht-paragraph-font-weight, inherit);
  line-height: var(--utrecht-paragraph-line-height, var(--utrecht-document-line-height, inherit));
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-paragraph-margin-block-start, 0));
}

.utrecht-paragraph--lead {
  color: var(--utrecht-paragraph-lead-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));
  font-size: var(--utrecht-paragraph-lead-font-size, var(--utrecht-paragraph-font-size, inherit));
  font-weight: var(--utrecht-paragraph-lead-font-weight, var(--utrecht-paragraph-font-weight, inherit));
  line-height: var(--utrecht-paragraph-lead-line-height, var(--utrecht-paragraph-line-height, inherit));
}

.utrecht-paragraph--small {
  color: var(--utrecht-paragraph-small-color, var(--utrecht-paragraph-color, var(--utrecht-document-color, inherit)));
  font-size: var(--utrecht-paragraph-small-font-size, var(--utrecht-paragraph-font-size, inherit));
  font-weight: var(--utrecht-paragraph-small-font-weight, var(--utrecht-paragraph-font-weight, inherit));
  line-height: var(--utrecht-paragraph-small-line-height, var(--utrecht-paragraph-line-height, inherit));
}

.utrecht-paragraph__small {
  font-size: inherit;
}

.utrecht-paragraph__b {
  font-weight: inherit;
}

.utrecht-paragraph--distanced {
  --utrecht-space-around: 1;
}
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
.utrecht-radio-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-block-end: 0;
  margin-block-start: 0;
  margin-inline-end: 0;
  margin-inline-start: 0;
  --_utrecht-radio-button-background-color: var(
    --_utrecht-radio-button-interactive-background-color,
    var(--_utrecht-radio-button-state-background-color, var(--utrecht-radio-button-background-color))
  );
  --_utrecht-radio-button-border-color: var(
    --_utrecht-radio-button-interactive-border-color,
    var(--_utrecht-radio-button-state-border-color, var(--utrecht-radio-button-border-color, currentColor))
  );
  --_utrecht-radio-button-border-width: var(
    --_utrecht-radio-button-interactive-border-width,
    var(--_utrecht-radio-button-state-border-width, var(--utrecht-radio-button-border-width))
  );
  --_utrecht-radio-button-color: var(
    --_utrecht-radio-button-interactive-color,
    var(--_utrecht-radio-button-state-color, var(--utrecht-radio-button-color, currentColor))
  );
  --_utrecht-radio-button-icon-size: 0;
  background-color: var(--_utrecht-radio-button-background-color);
  background-image: radial-gradient(circle, var(--_utrecht-radio-button-color, transparent) calc(var(--_utrecht-radio-button-icon-size, 50%) - 5%), var(--_utrecht-radio-button-background-color, currentColor) var(--_utrecht-radio-button-icon-size, 50%));
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  block-size: var(--utrecht-radio-button-size, 1em);
  border-color: var(--_utrecht-radio-button-border-color);
  border-radius: 50%;
  border-style: solid;
  border-width: var(--_utrecht-radio-button-border-width);
  cursor: var(--utrecht-action-activate-cursor, revert);
  inline-size: var(--utrecht-radio-button-size, 1em);
  margin-inline-end: var(--utrecht-radio-button-margin-inline-end);
  min-block-size: 24px;
  min-inline-size: 24px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  -webkit-user-select: none;
  user-select: none;
  vertical-align: top;
}

.utrecht-radio-button--checked {
  --_utrecht-radio-button-icon-size: var(--utrecht-radio-button-icon-size, 50%);
  --_utrecht-radio-button-state-background-color: var(--utrecht-radio-button-checked-background-color);
  --_utrecht-radio-button-state-border-color: var(--utrecht-radio-button-checked-border-color);
  --_utrecht-radio-button-state-border-width: var(--utrecht-radio-button-checked-border-width);
  --_utrecht-radio-button-state-color: var(--utrecht-radio-button-checked-color);
  --_utrecht-radio-button-state-active-background-color: var(--utrecht-radio-button-checked-active-background-color);
  --_utrecht-radio-button-state-active-border-color: var(--utrecht-radio-button-checked-active-border-color);
  --_utrecht-radio-button-state-active-border-width: var(--utrecht-radio-button-checked-active-border-width);
  --_utrecht-radio-button-state-active-color: var(--utrecht-radio-button-checked-active-color);
  --_utrecht-radio-button-state-focus-background-color: var(--utrecht-radio-button-checked-focus-background-color);
  --_utrecht-radio-button-state-focus-border-color: var(--utrecht-radio-button-checked-focus-border-color);
  --_utrecht-radio-button-state-focus-border-width: var(--utrecht-radio-button-checked-focus-border-width);
  --_utrecht-radio-button-state-focus-color: var(--utrecht-radio-button-checked-focus-color);
  --_utrecht-radio-button-state-hover-background-color: var(--utrecht-radio-button-checked-hover-background-color);
  --_utrecht-radio-button-state-hover-border-color: var(--utrecht-radio-button-checked-hover-border-color);
  --_utrecht-radio-button-state-hover-border-width: var(--utrecht-radio-button-checked-hover-border-width);
  --_utrecht-radio-button-state-hover-color: var(--utrecht-radio-button-checked-hover-color);
}

.utrecht-radio-button--hover {
  --_utrecht-radio-button-interactive-background-color: var(
    --_utrecht-radio-button-state-hover-background-color,
    var(--utrecht-radio-button-hover-background-color)
  );
  --_utrecht-radio-button-interactive-border-color: var(
    --_utrecht-radio-button-state-hover-border-color,
    var(--utrecht-radio-button-hover-border-color)
  );
  --_utrecht-radio-button-interactive-border-width: var(
    --_utrecht-radio-button-state-hover-border-width,
    var(--utrecht-radio-button-hover-border-width)
  );
  --_utrecht-radio-button-interactive-color: var(
    --_utrecht-radio-button-state-hover-color,
    var(--utrecht-radio-button-hover-color)
  );
}

.utrecht-radio-button--focus {
  --_utrecht-radio-button-interactive-background-color: var(
    --_utrecht-radio-button-state-focus-background-color,
    var(--utrecht-radio-button-focus-background-color)
  );
  --_utrecht-radio-button-interactive-border-color: var(
    --_utrecht-radio-button-state-focus-border-color,
    var(--utrecht-radio-button-focus-border-color)
  );
  --_utrecht-radio-button-interactive-border-width: var(
    --_utrecht-radio-button-state-focus-border-width,
    var(--utrecht-radio-button-focus-border-width)
  );
  --_utrecht-radio-button-interactive-color: var(
    --_utrecht-radio-button-state-focus-color,
    var(--utrecht-radio-button-focus-color)
  );
}

.utrecht-radio-button--focus-visible {
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
}

.utrecht-radio-button--active {
  --_utrecht-radio-button-interactive-background-color: var(
    --_utrecht-radio-button-state-active-background-color,
    var(--utrecht-radio-button-active-background-color)
  );
  --_utrecht-radio-button-interactive-border-color: var(
    --_utrecht-radio-button-state-active-border-color,
    var(--utrecht-radio-button-active-border-color)
  );
  --_utrecht-radio-button-interactive-border-width: var(
    --_utrecht-radio-button-state-active-border-width,
    var(--utrecht-radio-button-active-border-width)
  );
  --_utrecht-radio-button-interactive-color: var(
    --_utrecht-radio-button-state-active-color,
    var(--utrecht-radio-button-active-color)
  );
}

.utrecht-radio-button--disabled {
  --_utrecht-radio-button-background-color: var(
    --utrecht-radio-button-disabled-background-color,
    var(--utrecht-radio-button-background-color)
  );
  --_utrecht-radio-button-border-color: var(
    --utrecht-radio-button-disabled-border-color,
    var(--utrecht-radio-button-border-color)
  );
  --_utrecht-radio-button-border-width: var(
    --utrecht-radio-button-disabled-border-width,
    var(--utrecht-radio-button-border-width)
  );
  --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color, var(--utrecht-radio-button-color));
  --_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
  --_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
  --_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
  --_utrecht-radio-button-focus-color: var(--_utrecht-radio-button-color);
  --_utrecht-radio-button-active-background-color: var(--_utrecht-radio-button-background-color);
  --_utrecht-radio-button-active-border-color: var(--_utrecht-radio-button-border-color);
  --_utrecht-radio-button-active-border-width: var(--_utrecht-radio-button-border-width);
  --_utrecht-radio-button-active-color: var(--_utrecht-radio-button-color);
  --_utrecht-radio-button-hover-background-color: var(--_utrecht-radio-button-background-color);
  --_utrecht-radio-button-hover-border-color: var(--_utrecht-radio-button-border-color);
  --_utrecht-radio-button-hover-border-width: var(--_utrecht-radio-button-border-width);
  --_utrecht-radio-button-hover-color: var(--_utrecht-radio-button-color);
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
}

.utrecht-radio-button--invalid {
  border-color: var(--utrecht-radio-button-invalid-border-color, var(--utrecht-radio-button-border-color));
  border-width: var(--utrecht-radio-button-invalid-border-width, var(--utrecht-radio-button-border-width));
  color: var(--utrecht-radio-button-invalid-color, var(--utrecht-radio-button-color));
}

.utrecht-radio-button--html-input {
}
.utrecht-radio-button--html-input:checked {
  --_utrecht-radio-button-icon-size: var(--utrecht-radio-button-icon-size, 50%);
  --_utrecht-radio-button-state-background-color: var(--utrecht-radio-button-checked-background-color);
  --_utrecht-radio-button-state-border-color: var(--utrecht-radio-button-checked-border-color);
  --_utrecht-radio-button-state-border-width: var(--utrecht-radio-button-checked-border-width);
  --_utrecht-radio-button-state-color: var(--utrecht-radio-button-checked-color);
  --_utrecht-radio-button-state-active-background-color: var(--utrecht-radio-button-checked-active-background-color);
  --_utrecht-radio-button-state-active-border-color: var(--utrecht-radio-button-checked-active-border-color);
  --_utrecht-radio-button-state-active-border-width: var(--utrecht-radio-button-checked-active-border-width);
  --_utrecht-radio-button-state-active-color: var(--utrecht-radio-button-checked-active-color);
  --_utrecht-radio-button-state-focus-background-color: var(--utrecht-radio-button-checked-focus-background-color);
  --_utrecht-radio-button-state-focus-border-color: var(--utrecht-radio-button-checked-focus-border-color);
  --_utrecht-radio-button-state-focus-border-width: var(--utrecht-radio-button-checked-focus-border-width);
  --_utrecht-radio-button-state-focus-color: var(--utrecht-radio-button-checked-focus-color);
  --_utrecht-radio-button-state-hover-background-color: var(--utrecht-radio-button-checked-hover-background-color);
  --_utrecht-radio-button-state-hover-border-color: var(--utrecht-radio-button-checked-hover-border-color);
  --_utrecht-radio-button-state-hover-border-width: var(--utrecht-radio-button-checked-hover-border-width);
  --_utrecht-radio-button-state-hover-color: var(--utrecht-radio-button-checked-hover-color);
}
.utrecht-radio-button--html-input:disabled {
  --_utrecht-radio-button-background-color: var(
    --utrecht-radio-button-disabled-background-color,
    var(--utrecht-radio-button-background-color)
  );
  --_utrecht-radio-button-border-color: var(
    --utrecht-radio-button-disabled-border-color,
    var(--utrecht-radio-button-border-color)
  );
  --_utrecht-radio-button-border-width: var(
    --utrecht-radio-button-disabled-border-width,
    var(--utrecht-radio-button-border-width)
  );
  --_utrecht-radio-button-color: var(--utrecht-radio-button-disabled-color, var(--utrecht-radio-button-color));
  --_utrecht-radio-button-focus-background-color: var(--_utrecht-radio-button-background-color);
  --_utrecht-radio-button-focus-border-color: var(--_utrecht-radio-button-border-color);
  --_utrecht-radio-button-focus-border-width: var(--_utrecht-radio-button-border-width);
  --_utrecht-radio-button-focus-color: var(--_utrecht-radio-button-color);
  --_utrecht-radio-button-active-background-color: var(--_utrecht-radio-button-background-color);
  --_utrecht-radio-button-active-border-color: var(--_utrecht-radio-button-border-color);
  --_utrecht-radio-button-active-border-width: var(--_utrecht-radio-button-border-width);
  --_utrecht-radio-button-active-color: var(--_utrecht-radio-button-color);
  --_utrecht-radio-button-hover-background-color: var(--_utrecht-radio-button-background-color);
  --_utrecht-radio-button-hover-border-color: var(--_utrecht-radio-button-border-color);
  --_utrecht-radio-button-hover-border-width: var(--_utrecht-radio-button-border-width);
  --_utrecht-radio-button-hover-color: var(--_utrecht-radio-button-color);
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
}
.utrecht-radio-button--html-input:invalid, .utrecht-radio-button--html-input[aria-invalid=true] {
  border-color: var(--utrecht-radio-button-invalid-border-color, var(--utrecht-radio-button-border-color));
  border-width: var(--utrecht-radio-button-invalid-border-width, var(--utrecht-radio-button-border-width));
  color: var(--utrecht-radio-button-invalid-color, var(--utrecht-radio-button-color));
}
.utrecht-radio-button--html-input:focus:not([aria-disabled=true], :disabled) {
  --_utrecht-radio-button-interactive-background-color: var(
    --_utrecht-radio-button-state-focus-background-color,
    var(--utrecht-radio-button-focus-background-color)
  );
  --_utrecht-radio-button-interactive-border-color: var(
    --_utrecht-radio-button-state-focus-border-color,
    var(--utrecht-radio-button-focus-border-color)
  );
  --_utrecht-radio-button-interactive-border-width: var(
    --_utrecht-radio-button-state-focus-border-width,
    var(--utrecht-radio-button-focus-border-width)
  );
  --_utrecht-radio-button-interactive-color: var(
    --_utrecht-radio-button-state-focus-color,
    var(--utrecht-radio-button-focus-color)
  );
}
.utrecht-radio-button--html-input:focus-visible {
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
}
.utrecht-radio-button--html-input:hover:not([aria-disabled=true], :disabled) {
  --_utrecht-radio-button-interactive-background-color: var(
    --_utrecht-radio-button-state-hover-background-color,
    var(--utrecht-radio-button-hover-background-color)
  );
  --_utrecht-radio-button-interactive-border-color: var(
    --_utrecht-radio-button-state-hover-border-color,
    var(--utrecht-radio-button-hover-border-color)
  );
  --_utrecht-radio-button-interactive-border-width: var(
    --_utrecht-radio-button-state-hover-border-width,
    var(--utrecht-radio-button-hover-border-width)
  );
  --_utrecht-radio-button-interactive-color: var(
    --_utrecht-radio-button-state-hover-color,
    var(--utrecht-radio-button-hover-color)
  );
}
.utrecht-radio-button--html-input:active:not([aria-disabled=true], :disabled) {
  --_utrecht-radio-button-interactive-background-color: var(
    --_utrecht-radio-button-state-active-background-color,
    var(--utrecht-radio-button-active-background-color)
  );
  --_utrecht-radio-button-interactive-border-color: var(
    --_utrecht-radio-button-state-active-border-color,
    var(--utrecht-radio-button-active-border-color)
  );
  --_utrecht-radio-button-interactive-border-width: var(
    --_utrecht-radio-button-state-active-border-width,
    var(--utrecht-radio-button-active-border-width)
  );
  --_utrecht-radio-button-interactive-color: var(
    --_utrecht-radio-button-state-active-color,
    var(--utrecht-radio-button-active-color)
  );
}
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
.utrecht-table-container {
  display: block;
  overflow: auto;
}

.utrecht-table-container--overflow-inline {
  background-attachment: local, local, scroll, scroll;
  background-image: linear-gradient(to right, white, white), linear-gradient(to right, white, white), linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%;
}

.utrecht-table {
  border-collapse: separate;
  border-color: var(--utrecht-table-border-color, 0);
  border-spacing: 0;
  border-style: solid;
  border-width: var(--utrecht-table-border-width, 0);
  font-family: var(--utrecht-table-font-family, var(--utrecht-document-font-family));
  font-size: var(--utrecht-table-font-size, inherit);
  inline-size: 100%;
  line-height: var(--utrecht-table-line-height, inherit);
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-table-margin-block-start, 0));
}

.utrecht-table--distanced {
  --utrecht-space-around: 1;
}

.utrecht-table--html-table > caption,
.utrecht-table__caption {
  break-after: avoid;
  break-inside: avoid;
  color: var(--utrecht-table-caption-color);
  font-family: var(--utrecht-table-caption-font-family);
  font-size: var(--utrecht-table-caption-font-size);
  font-weight: var(--utrecht-table-caption-font-weight);
  line-height: var(--utrecht-table-caption-line-height);
  margin-block-end: var(--utrecht-table-caption-margin-block-end);
  text-align: var(--utrecht-table-caption-text-align, center);
}

.utrecht-table--html-table > figcaption,
.utrecht-table__figcaption {
  break-after: avoid;
  break-inside: avoid;
  color: var(--utrecht-table-caption-color);
  font-family: var(--utrecht-table-caption-font-family);
  font-size: var(--utrecht-table-caption-font-size);
  font-weight: var(--utrecht-table-caption-font-weight);
  line-height: var(--utrecht-table-caption-line-height);
  margin-block-end: var(--utrecht-table-caption-margin-block-end);
  text-align: var(--utrecht-table-caption-text-align, center);
}

.utrecht-table--html-table > thead,
.utrecht-table__header {
  --_utrecht-table-header-cell-vertical-align: bottom;
  --_utrecht-table-header-cell-z-index: 8;
  background-color: var(--utrecht-table-header-background-color, transparent);
  break-inside: avoid;
  color: var(--utrecht-table-header-color);
  font-weight: var(--utrecht-table-header-font-weight);
  text-transform: var(--utrecht-table-header-text-transform);
}

.utrecht-table__header--sticky th {
  background-color: var(--utrecht-table-header-sticky-background-color, transparent);
  color: var(--utrecht-table-header-sticky-color);
  inset-block-start: 0;
  position: sticky;
}
.utrecht-table__header--sticky tr:last-child > th {
  border-block-end-color: var(--utrecht-table-header-sticky-border-block-end-color, var(--utrecht-table-header-border-block-end-color, transparent));
  border-block-end-style: solid;
  border-block-end-width: var(--utrecht-table-header-sticky-border-block-end-width, var(--utrecht-table-header-border-block-end-width, 0));
}

.utrecht-table__footer {
  --_utrecht-table-header-cell-z-index: 5;
  z-index: 3;
}

.utrecht-table__footer--sticky {
  background-color: var(--utrecht-table-footer-sticky-background-color, var(--utrecht-table-footer-background-color, transparent));
  color: var(--utrecht-table-footer-sticky-color, var(--utrecht-table-footer-color));
  inset-block-end: 0;
  position: sticky;
}
.utrecht-table__footer--sticky tr:first-child > th,
.utrecht-table__footer--sticky tr:first-child > td {
  border-block-start-color: var(--utrecht-table-header-sticky-border-block-start-color, var(--utrecht-table-header-border-block-start-color, transparent));
  border-block-start-style: solid;
  border-block-start-width: var(--utrecht-table-header-sticky-border-block-start-width, var(--utrecht-table-header-border-block-start-width, 0));
}

.utrecht-table--html-table > tbody,
.utrecht-table__body {
  --_utrecht-table-header-cell-z-index: 2;
}

.utrecht-table--fixed {
  inline-size: fit-content;
  table-layout: fixed;
}

.utrecht-table--fixed th,
.utrecht-table--oneline th,
.utrecht-table--oneline td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.utrecht-table--html-table > tr,
.utrecht-table--html-table > thead > tr,
.utrecht-table--html-table > tbody > tr,
.utrecht-table--html-table > tfoot > tr,
.utrecht-table__row {
  break-inside: avoid;
}

.utrecht-table__row--selected {
  background-color: var(--utrecht-table-cell-selected-background-color, highlight);
  color: var(--utrecht-table-cell-selected-color, highlightText);
}

.utrecht-table--html-table > tr > th,
.utrecht-table--html-table > thead > tr > th,
.utrecht-table--html-table > tbody > tr > th,
.utrecht-table--html-table > tfoot > tr > th,
.utrecht-table__header-cell {
  --utrecht-icon-size: var(--utrecht-table-cell-icon-size);
  block-size: var(--utrecht-table-cell-line-height, 1em);
  line-height: var(--utrecht-table-cell-line-height, inherit);
  padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
  padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
  padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
  padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
  text-align: start;
  color: var(--utrecht-table-header-cell-color);
  font-size: var(--utrecht-table-header-cell-font-size);
  font-weight: var(--utrecht-table-header-cell-font-weight, bold);
  text-transform: var(--utrecht-table-header-cell-text-transform);
  vertical-align: var(--_utrecht-table-header-cell-vertical-align, top);
  z-index: var(--_utrecht-table-header-cell-z-index);
}

.utrecht-table__header-cell--selected {
  background-color: var(--utrecht-table-cell-selected-background-color, highlight);
  color: var(--utrecht-table-cell-selected-color, highlightText);
}

.utrecht-table__header-cell--sticky-block {
  background-color: #eee;
  color: black;
  inset-block-start: 0;
  position: sticky;
  z-index: calc(var(--_utrecht-table-header-cell-z-index, 0) + 2);
}

.utrecht-table__header-cell--sticky-inline {
  background-color: #eee;
  color: black;
  inset-inline-start: 0;
  position: sticky;
  z-index: calc(var(--_utrecht-table-header-cell-z-index, 0) + 1);
}

.utrecht-table--html-table > tr > td,
.utrecht-table--html-table > thead > tr > td,
.utrecht-table--html-table > tbody > tr > td,
.utrecht-table--html-table > tfoot > tr > td,
.utrecht-table__cell {
  --utrecht-icon-size: var(--utrecht-table-cell-icon-size);
  block-size: var(--utrecht-table-cell-line-height, 1em);
  line-height: var(--utrecht-table-cell-line-height, inherit);
  padding-block-end: var(--utrecht-table-cell-padding-block-end, 0);
  padding-block-start: var(--utrecht-table-cell-padding-block-start, 0);
  padding-inline-end: var(--utrecht-table-cell-padding-inline-end, 0);
  padding-inline-start: var(--utrecht-table-cell-padding-inline-start, 0);
  text-align: start;
  border-block-end-color: var(--utrecht-table-row-border-block-end-color, transparent);
  border-block-end-style: solid;
  border-block-end-width: var(--utrecht-table-row-border-block-end-width, 0);
  vertical-align: top;
}

.utrecht-table--html-table > tr > td:first-child,
.utrecht-table--html-table > thead > tr > td:first-child,
.utrecht-table--html-table > tbody > tr > td:first-child,
.utrecht-table--html-table > tfoot > tr > td:first-child,
.utrecht-table__cell--first {
  padding-inline-start: var(--utrecht-table-row-padding-inline-start, var(--utrecht-table-cell-padding-inline-start, 0));
}

.utrecht-table--html-table > tr > td:last-child,
.utrecht-table--html-table > thead > tr > td:last-child,
.utrecht-table--html-table > tbody > tr > td:last-child,
.utrecht-table--html-table > tfoot > tr > td:last-child,
.utrecht-table__cell--last {
  padding-inline-end: var(--utrecht-table-row-padding-inline-end, var(--utrecht-table-cell-padding-inline-end, 0));
}

.utrecht-table__cell--selected {
  background-color: var(--utrecht-table-cell-selected-background-color, highlight);
  color: var(--utrecht-table-cell-selected-color, highlightText);
}
.utrecht-table__header-cell--numeric-column,
.utrecht-table__cell--numeric-column {
  --_utrecht-table-cell-text-align: right;
  text-align: var(--_utrecht-table-cell-text-align);
}

.utrecht-table__cell--numeric-data {
  font-variant-numeric: lining-nums tabular-nums;
}

.utrecht-table__row--alternate-odd {
  background-color: var(--utrecht-table-row-alternate-odd-background-color, transparent);
  color: var(--utrecht-table-row-alternate-odd-color);
}

.utrecht-table__row--alternate-even {
  background-color: var(--utrecht-table-row-alternate-even-background-color, transparent);
  color: var(--utrecht-table-row-alternate-even-color);
}

.utrecht-table__header-cell {
  --utrecht-button-font-size: inherit;
  --utrecht-button-font-weight: inherit;
  --utrecht-button-padding-inline-start: var(--utrecht-table-cell-padding-inline-start);
  --utrecht-button-padding-inline-end: var(--utrecht-table-cell-padding-inline-end);
  --utrecht-button-padding-block-start: var(--utrecht-table-cell-padding-block-start);
  --utrecht-button-padding-block-end: var(--utrecht-table-cell-padding-block-end);
  --utrecht-button-hover-scale: 1;
  --utrecht-button-focus-scale: 1;
  --utrecht-button-min-block-size: 100%;
  --utrecht-button-min-inline-size: 100%;
  --utrecht-button-border-color: transparent;
  --utrecht-button-border-size: 1px;
}

.utrecht-table__header-cell:has(.utrecht-button) {
  padding-block-end: 0;
  padding-block-start: 0;
  padding-inline-end: 0;
  padding-inline-start: 0;
}

.utrecht-table__header-cell-button {
  --utrecht-button-justify-content: var(--_utrecht-table-cell-text-align, start);
}
.utrecht-table__data--truncate {
  display: block;
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.utrecht-table__container {
  max-inline-size: 100%;
  overflow-inline: scroll;
}

.utrecht-table__header--hidden {
  block-size: 1px;
  border-color: silver;
  border-style: solid;
  border-width: 0;
  clip-path: inset(50%);
  inline-size: 1px;
  outline: 1px solid red;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

.utrecht-table--busy {
  cursor: var(--utrecht-action-busy-cursor, busy);
}

.utrecht-table--alternate-row-color .utrecht-table__body .utrecht-table__row:nth-child(odd) {
  background-color: var(--utrecht-table-row-alternate-odd-background-color, transparent);
  color: var(--utrecht-table-row-alternate-odd-color);
}
.utrecht-table--alternate-row-color .utrecht-table__body .utrecht-table__row:nth-child(even) {
  background-color: var(--utrecht-table-row-alternate-even-background-color, transparent);
  color: var(--utrecht-table-row-alternate-even-color);
}

.utrecht-table--row-hover .utrecht-table__body .utrecht-table__row:hover .utrecht-table__header-cell,
.utrecht-table--row-hover .utrecht-table__body .utrecht-table__row:hover .utrecht-table__cell {
  background-color: papayawhip;
  color: maroon;
}

.utrecht-table--row-focus-within .utrecht-table__body .utrecht-table__row:focus-within .utrecht-table__header-cell,
.utrecht-table--row-focus-within .utrecht-table__body .utrecht-table__row:focus-within .utrecht-table__cell {
  background-color: papayawhip;
  color: maroon;
}
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
.utrecht-textarea {
  border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
  border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
  border-style: solid;
  border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
  border-block-end-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)));
  background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
  block-size: initial;
  box-sizing: border-box;
  color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));
  font-weight: var(--utrecht-textarea-font-weight, var(--utrecht-form-control-font-weight, initial));
  inline-size: 100%;
  line-height: var(--utrecht-textarea-line-height, initial);
  max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
  min-block-size: var(--utrecht-textarea-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
  min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
  padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
  padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
  padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
  padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
  resize: vertical;
  resize: block;
}

.utrecht-textarea--invalid {
  --_utrecht-textarea-border-width: var(
    --utrecht-textarea-invalid-border-width,
    var(
      --utrecht-form-control-invalid-border-width,
      var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))
    )
  );
  border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
  border-width: var(--_utrecht-textarea-border-width);
  border-block-end-width: var(--utrecht-textarea-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-textarea-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textarea-border-width)))));
  background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
}

.utrecht-textarea--hover {
  background-color: var(--utrecht-textarea-hover-background-color, var(--utrecht-form-control-hover-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
  border-color: var(--utrecht-textarea-hover-border-color, var(--utrecht-form-control-hover-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
  color: var(--utrecht-textarea-hover-color, var(--utrecht-form-control-hover-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
}

.utrecht-textarea--disabled {
  background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
  border-color: var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
  color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
}

.utrecht-textarea--focus {
  background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
  border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
  color: var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
}

.utrecht-textarea--focus-visible {
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
}

.utrecht-textarea--read-only {
  background-color: var(--utrecht-textarea-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
  border-color: var(--utrecht-textarea-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
  color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
}

.utrecht-textarea__placeholder {
  color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
  font-style: var(--utrecht-form-control-placeholder-font-style);
  opacity: 100%;
}

.utrecht-textarea--html-textarea {
}
.utrecht-textarea--html-textarea:hover {
  background-color: var(--utrecht-textarea-hover-background-color, var(--utrecht-form-control-hover-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
  border-color: var(--utrecht-textarea-hover-border-color, var(--utrecht-form-control-hover-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
  color: var(--utrecht-textarea-hover-color, var(--utrecht-form-control-hover-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
}
.utrecht-textarea--html-textarea:focus {
  background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
  border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
  color: var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
}
.utrecht-textarea--html-textarea:focus-visible {
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
}
.utrecht-textarea--html-textarea:invalid, .utrecht-textarea--html-textarea[aria-invalid=true] {
  --_utrecht-textarea-border-width: var(
    --utrecht-textarea-invalid-border-width,
    var(
      --utrecht-form-control-invalid-border-width,
      var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))
    )
  );
  border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
  border-width: var(--_utrecht-textarea-border-width);
  border-block-end-width: var(--utrecht-textarea-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-textarea-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textarea-border-width)))));
  background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
  color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
}
.utrecht-textarea--html-textarea:read-only {
  background-color: var(--utrecht-textarea-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
  border-color: var(--utrecht-textarea-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
  color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
}
.utrecht-textarea--html-textarea:disabled {
  background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
  border-color: var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
  color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
}
.utrecht-textarea--html-textarea::placeholder {
  color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
  font-style: var(--utrecht-form-control-placeholder-font-style);
  opacity: 100%;
}
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
.utrecht-textbox {
  --_utrecht-textbox-value-char: 0.667em + 0.334ch;
  --_utrecht-textbox-max-inline-size: calc(
    calc(var(--utrecht-textbox-value-max-length) * var(--_utrecht-textbox-value-char)) +
      var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, 0)) +
      var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, 0)) +
      var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width, 0)) +
      var(--utrecht-textbox-autocomplete-ui-size, 44px)
  );
  max-inline-size: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)));
  min-block-size: var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-block-size, 44px));
  min-inline-size: var(--utrecht-pointer-target-min-size, var(--basis-pointer-target-min-inline-size, 44px));
  --_utrecht-textbox-border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width));
  --_utrecht-textbox-border-block-end-width: var(
    --utrecht-textbox-border-bottom-width,
    var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
  );
  border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color));
  border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0));
  border-style: solid;
  border-width: var(--_utrecht-textbox-border-width);
  border-block-end-width: var(--_utrecht-textbox-border-block-end-width);
  box-sizing: border-box;
  background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color));
  color: var(--utrecht-textbox-color, var(--utrecht-form-control-color));
  --_utrecht-textbox-padding-block-end: var(
    --utrecht-textbox-padding-block-end,
    var(--utrecht-form-control-padding-block-end, 0)
  );
  --_utrecht-textbox-padding-block-start: var(
    --utrecht-textbox-padding-block-start,
    var(--utrecht-form-control-padding-block-start, 0)
  );
  block-size: initial;
  display: block;
  font-family: var(--utrecht-textbox-font-family, var(--utrecht-form-control-font-family));
  font-size: var(--utrecht-textbox-font-size, var(--utrecht-form-control-font-size, inherit));
  font-weight: var(--utrecht-textbox-font-weight, var(--utrecht-form-control-font-weight, initial));
  inline-size: 100%;
  line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial));
  overflow: hidden;
  padding-block-end: var(--_utrecht-textbox-padding-block-end);
  padding-block-start: var(--_utrecht-textbox-padding-block-start);
  padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
  padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
  white-space: nowrap;
}

.utrecht-textbox--invalid {
  --_utrecht-textbox-border-width: var(
    --utrecht-textbox-invalid-border-width,
    var(
      --utrecht-form-control-invalid-border-width,
      var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
    )
  );
  border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
  border-width: var(--_utrecht-textbox-border-width);
  border-block-end-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
  background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
  color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
}

.utrecht-textbox--disabled {
  background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
  border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
  color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
}

.utrecht-textbox--hover {
  background-color: var(--utrecht-textbox-hover-background-color, var(--utrecht-form-control-hover-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
  border-color: var(--utrecht-textbox-hover-border-color, var(--utrecht-form-control-hover-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
  color: var(--utrecht-textbox-hover-color, var(--utrecht-form-control-hover-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
}

.utrecht-textbox--focus {
  background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
  border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
  color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
}

.utrecht-textbox--focus-visible {
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
}

.utrecht-textbox--read-only {
  background-color: var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
  border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
  color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
}

.utrecht-textbox__placeholder {
  color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
  font-style: var(--utrecht-form-control-placeholder-font-style);
  opacity: 100%;
}

.utrecht-textbox--numeric {
  -moz-appearance: textfield;
  font-variant-numeric: lining-nums tabular-nums;
}

.utrecht-textbox--password {
  font-variant-ligatures: none;
  font-variant-numeric: slashed-zero;
}

.utrecht-textbox--postal-code-nl-size {
  --utrecht-textbox-value-max-length: 7;
}

.utrecht-textbox--house-number-size {
  --utrecht-textbox-value-max-length: 5;
}

.utrecht-textbox--house-letter-size {
  --utrecht-textbox-value-max-length: 1;
}

.utrecht-textbox--house-addition-size {
  --utrecht-textbox-value-max-length: 4;
}

.utrecht-textbox--voorvoegsel-size {
  --utrecht-textbox-value-max-length: 10;
}

.utrecht-textbox--tel-size {
  --utrecht-textbox-value-max-length: 19;
}

.utrecht-textbox--tel-nl-size {
  --utrecht-textbox-value-max-length: 13;
}

.utrecht-textbox--iban-size {
  --utrecht-textbox-value-max-length: 41;
}

.utrecht-textbox--iban-nl-size {
  --utrecht-textbox-value-max-length: 22;
}
.utrecht-textbox--placeholder-ltr::placeholder, .utrecht-textbox--placeholder-ltr:placeholder-shown {
  direction: ltr;
}
.utrecht-textbox--placeholder-rtl::placeholder, .utrecht-textbox--placeholder-rtl:placeholder-shown {
  direction: rtl;
}

.utrecht-textbox--url {
  font-variant-ligatures: none;
}

.utrecht-textbox--html-input {
}
.utrecht-textbox--html-input:hover {
  background-color: var(--utrecht-textbox-hover-background-color, var(--utrecht-form-control-hover-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
  border-color: var(--utrecht-textbox-hover-border-color, var(--utrecht-form-control-hover-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
  color: var(--utrecht-textbox-hover-color, var(--utrecht-form-control-hover-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
}
.utrecht-textbox--html-input:focus {
  background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
  border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
  color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
}
.utrecht-textbox--html-input:focus-visible {
  --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0)
    var(--utrecht-focus-inverse-outline-color, transparent);
  box-shadow: var(--_utrecht-focus-ring-box-shadow);
  outline-color: var(--utrecht-focus-outline-color, revert);
  outline-offset: var(--utrecht-focus-outline-offset, revert);
  outline-style: var(--utrecht-focus-outline-style, revert);
  outline-width: var(--utrecht-focus-outline-width, revert);
  z-index: 1;
}
.utrecht-textbox--html-input:user-invalid, .utrecht-textbox--html-input[aria-invalid=true] {
  --_utrecht-textbox-border-width: var(
    --utrecht-textbox-invalid-border-width,
    var(
      --utrecht-form-control-invalid-border-width,
      var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))
    )
  );
  border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
  border-width: var(--_utrecht-textbox-border-width);
  border-block-end-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)))));
  background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
  color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
}
.utrecht-textbox--html-input:read-only {
  background-color: var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
  border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
  color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
}
.utrecht-textbox--html-input:disabled {
  background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color))));
  border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
  color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
}
.utrecht-textbox--html-input::placeholder {
  color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
  font-style: var(--utrecht-form-control-placeholder-font-style);
  opacity: 100%;
}
.utrecht-textbox--html-input[type=password i] {
  font-variant-ligatures: none;
  font-variant-numeric: slashed-zero;
}
.utrecht-textbox--html-input[type=url i], .utrecht-textbox--html-input[type=email i], .utrecht-textbox--html-input[inputMode=email i], .utrecht-textbox--html-input[inputMode=url i] {
  font-variant-ligatures: none;
}
.utrecht-textbox--html-input[pattern="\\d*"], .utrecht-textbox--html-input[pattern="[0-9]*"], .utrecht-textbox--html-input[type=number i], .utrecht-textbox--html-input[type=tel i], .utrecht-textbox--html-input[inputMode=numeric i], .utrecht-textbox--html-input[inputMode=decimal i], .utrecht-textbox--html-input[inputMode=tel i] {
  -moz-appearance: textfield;
  font-variant-numeric: lining-nums tabular-nums;
}
/* The site's NL Design System theme: every token its components read, set
   here and nowhere else, and only where a component is used — the Ik ben
   panel, the coordinator's card and the three choices that lead to the
   panel, the figure the jobs page's map stands in, and the terms and tables
   of a document — so nothing else on the site changes.

   Every value is a token site.css already declares: colour out of
   sitegen/content/shared.nix, glass out of glass.css (CDR-003, CDR-044).
   sitegen/default.nix fails a site.css that styles a utrecht- class
   itself, and a colour typed into this file. */

/* The coordinator's card is the panel's sibling and the jobs page's three
   choices open the panel, so they wear what it wears. */
.login,
.coord,
.prose__split {
  --utrecht-document-font-family: inherit;
  --utrecht-document-color: var(--foreground);

  --utrecht-focus-outline-color: var(--foreground);
  --utrecht-focus-inverse-outline-color: var(--card);
  --utrecht-focus-outline-style: solid;
  --utrecht-focus-outline-width: 2px;
  --utrecht-focus-outline-offset: 2px;

  --utrecht-action-activate-cursor: pointer;
  --utrecht-action-disabled-cursor: default;

  /* A field is the mint the panel's other fields wear, laid on its glass. */
  --utrecht-form-control-background-color: var(--secondary);
  --utrecht-form-control-color: var(--foreground);
  --utrecht-form-control-border-color: var(--border);
  --utrecht-form-control-border-width: 1px;
  --utrecht-form-control-border-radius: var(--radius);
  --utrecht-form-control-font-family: inherit;
  --utrecht-form-control-font-size: 1rem;
  --utrecht-form-control-line-height: 1.4;
  --utrecht-form-control-padding-block-start: 0.625rem;
  --utrecht-form-control-padding-block-end: 0.625rem;
  --utrecht-form-control-padding-inline-start: 0.75rem;
  --utrecht-form-control-padding-inline-end: 0.75rem;
  --utrecht-form-control-max-inline-size: 24rem;
  --utrecht-form-control-placeholder-color: var(--muted-foreground);
  --utrecht-form-control-hover-border-color: var(--muted-foreground);
  --utrecht-form-control-focus-border-color: var(--foreground);
  --utrecht-form-control-focus-background-color: var(--secondary);
  --utrecht-textbox-invalid-border-color: var(--foreground);
  --utrecht-textbox-invalid-border-width: 2px;

  /* A label says what the heading over it says, in the heading's own type:
     on the phone step the heading is the label. */
  --utrecht-form-label-color: inherit;
  --utrecht-form-label-font-size: inherit;
  --utrecht-form-label-font-weight: inherit;
  --utrecht-form-label-radio-font-weight: 500;
  --utrecht-form-field-label-margin-block-end: 0;

  /* What is wrong with a field, under it, in ink: orange is the action's. */
  --utrecht-form-field-error-message-color: var(--foreground);
  --utrecht-form-field-error-message-font-size: 0.875rem;
  --utrecht-form-field-invalid-border-inline-start-width: 0;

  --utrecht-form-fieldset-legend-color: var(--muted-foreground);
  --utrecht-form-fieldset-legend-font-size: 0.875rem;
  --utrecht-form-fieldset-legend-font-weight: 400;
  --utrecht-form-fieldset-legend-line-height: 1.5;

  /* Teal is ink and line (CDR-044): the chosen route is teal, never orange. */
  --utrecht-radio-button-size: 1.25rem;
  --utrecht-radio-button-icon-size: 55%;
  --utrecht-radio-button-margin-inline-end: 0.5rem;
  --utrecht-radio-button-background-color: var(--glass-strong);
  --utrecht-radio-button-border-color: var(--muted-foreground);
  --utrecht-radio-button-border-width: 1px;
  --utrecht-radio-button-color: var(--accent);
  --utrecht-radio-button-hover-border-color: var(--accent);
  --utrecht-radio-button-checked-background-color: var(--glass-strong);
  --utrecht-radio-button-checked-border-color: var(--accent);
  --utrecht-radio-button-checked-border-width: 2px;
  --utrecht-radio-button-checked-color: var(--accent);
  --utrecht-radio-button-checked-hover-border-color: var(--teal-deep);
  --utrecht-radio-button-checked-hover-color: var(--teal-deep);

  /* What the register offers opens over the panel, so it is the thicker
     glass: the steps under it show through and stay out of the way. */
  --utrecht-combobox-popover-z-index: 2;
  --utrecht-listbox-background-color: var(--glass-strong);
  --utrecht-listbox-color: var(--foreground);
  --utrecht-listbox-border-color: var(--glass-border);
  --utrecht-listbox-border-width: 1px;
  --utrecht-listbox-border-radius: var(--radius);
  --utrecht-listbox-inline-size: 100%;
  --utrecht-listbox-padding-block-start: 0.25rem;
  --utrecht-listbox-padding-block-end: 0.25rem;
  --utrecht-listbox-padding-inline-start: 0;
  --utrecht-listbox-padding-inline-end: 0;
  --utrecht-listbox-option-color: var(--foreground);
  --utrecht-listbox-option-padding-block-start: 0.5rem;
  --utrecht-listbox-option-padding-block-end: 0.5rem;
  --utrecht-listbox-option-padding-inline-start: 0.75rem;
  --utrecht-listbox-option-padding-inline-end: 0.75rem;
  --utrecht-listbox-option-hover-background-color: var(--secondary);
  --utrecht-listbox-option-hover-color: var(--foreground);
  --utrecht-listbox-option-active-background-color: var(--secondary);
  --utrecht-listbox-option-active-color: var(--foreground);
  --utrecht-listbox-option-focus-background-color: var(--secondary);
  --utrecht-listbox-option-focus-color: var(--foreground);

  /* A failure is said in ink on the panel's glass, edged in ink (CDR-005). */
  --utrecht-alert-border-radius: var(--radius);
  --utrecht-alert-padding-block-start: 0.75rem;
  --utrecht-alert-padding-block-end: 0.75rem;
  --utrecht-alert-padding-inline-start: 1rem;
  --utrecht-alert-padding-inline-end: 1rem;
  --utrecht-alert-column-gap: 0.75rem;
  --utrecht-alert-error-background-color: var(--glass-strong);
  --utrecht-alert-error-border-color: var(--foreground);
  --utrecht-alert-error-border-width: 1px;
  --utrecht-alert-error-color: var(--foreground);

  /* A step's question and the line under it, in the site's own type: the
     body face at the heading weight site.css gives every heading. */
  --utrecht-heading-font-family: var(--font-body);
  --utrecht-heading-font-weight: 800;
  --utrecht-heading-color: var(--foreground);
  --utrecht-heading-2-font-size: 1.75rem;
  --utrecht-heading-2-line-height: 1.15;
  --utrecht-heading-3-font-size: 1rem;
  --utrecht-heading-3-line-height: 1.5;
  --utrecht-paragraph-lead-color: var(--muted-foreground);
  --utrecht-paragraph-lead-font-size: 0.9375rem;
  --utrecht-paragraph-small-color: var(--muted-foreground);
  --utrecht-paragraph-small-font-size: 0.875rem;

  /* A button is the site's .btn--compact: a pill as big as its words. */
  --utrecht-button-font-family: var(--font-body);
  --utrecht-button-font-size: 0.875rem;
  --utrecht-button-font-weight: 600;
  /* A button element sets its line at the browser's normal, a link at the
     page's: the site's pills differ by that, and so do these. */
  --utrecht-button-line-height: normal;
  --utrecht-button-border-radius: 9999px;
  --utrecht-button-padding-block-start: 0.5rem;
  --utrecht-button-padding-block-end: 0.5rem;
  --utrecht-button-padding-inline-start: 1rem;
  --utrecht-button-padding-inline-end: 1rem;
  --utrecht-button-column-gap: 0.5rem;
  --utrecht-button-min-block-size: 0;
  --utrecht-button-min-inline-size: 0;

  /* Orange is the one positive action (CDR-044), on glass (CDR-003): the
     site's .btn--primary. Its highlight is a gradient, which no token
     carries; it is in the rule below. */
  --utrecht-button-primary-action-background-color: rgb(var(--primary-rgb) / 0.86);
  --utrecht-button-primary-action-border-color: rgb(var(--white-rgb) / 0.4);
  --utrecht-button-primary-action-border-width: 1px;
  --utrecht-button-primary-action-color: var(--primary-foreground);
  --utrecht-button-primary-action-disabled-background-color: rgb(var(--primary-rgb) / 0.86);
  --utrecht-button-primary-action-disabled-border-color: rgb(var(--white-rgb) / 0.4);
  --utrecht-button-primary-action-disabled-color: var(--primary-foreground);

  /* Everything else that can be pressed is the white pill: .btn--glass. */
  --utrecht-button-secondary-action-background-color: var(--glass-strong);
  --utrecht-button-secondary-action-border-color: var(--glass-border);
  --utrecht-button-secondary-action-border-width: 1px;
  --utrecht-button-secondary-action-color: var(--foreground);
  --utrecht-button-secondary-action-hover-background-color: var(--secondary);
  --utrecht-button-secondary-action-active-background-color: var(--secondary);
  --utrecht-button-secondary-action-disabled-background-color: var(--glass-strong);
  --utrecht-button-secondary-action-disabled-border-color: var(--glass-border);
  --utrecht-button-secondary-action-disabled-color: var(--foreground);

  /* The way back: no box until the pointer is on it. */
  --utrecht-button-subtle-background-color: transparent;
  --utrecht-button-subtle-border-width: 0;
  --utrecht-button-subtle-color: var(--muted-foreground);
  --utrecht-button-subtle-hover-background-color: var(--secondary);
  --utrecht-button-subtle-hover-color: var(--foreground);
  --utrecht-button-subtle-active-background-color: var(--secondary);
  --utrecht-button-subtle-active-color: var(--foreground);

  /* The clipboard's fallback: the whole message, readable at once. */
  --utrecht-textarea-min-block-size: 12rem;
  --utrecht-textarea-max-inline-size: none;
  --utrecht-textarea-line-height: 1.5;
}

/* The three at the start are buttons worn as cards of glass, edged in orange
   under the pointer, in the type of the words they hold. */
.login .login__choices,
.prose__split {
  --utrecht-button-secondary-action-background-color: var(--glass);
  --utrecht-button-secondary-action-hover-background-color: var(--glass);
  --utrecht-button-secondary-action-active-background-color: var(--glass);
  --utrecht-button-secondary-action-hover-border-color: var(--primary);
  --utrecht-button-secondary-action-active-border-color: var(--primary);
  --utrecht-button-secondary-action-font-size: 1rem;
  --utrecht-button-secondary-action-font-weight: 400;
  --utrecht-button-secondary-action-line-height: 1.5;
  --utrecht-button-border-radius: calc(var(--radius) + 8px);
  --utrecht-button-padding-block-start: 1rem;
  --utrecht-button-padding-block-end: 0.875rem;
  --utrecht-button-padding-inline-start: 0.625rem;
  --utrecht-button-padding-inline-end: 0.625rem;
  --utrecht-button-inline-size: 100%;
  --utrecht-button-max-inline-size: none;
}

/* On the jobs page they stand on the document's white, where glass has no
   edge: there they are edged in the document's own line. */
.prose__split {
  --utrecht-button-secondary-action-border-color: var(--border);
}

.login .utrecht-button-link {
  --utrecht-button-line-height: 1.5;
}

/* Leaving is a button that reads as a link, small and quiet. */
.login .utrecht-link-button {
  --utrecht-link-color: var(--muted-foreground);
  --utrecht-button-font-size: 0.875rem;
  --utrecht-button-font-weight: 400;
  --utrecht-button-padding-block-start: 0.25rem;
  --utrecht-button-padding-block-end: 0.25rem;
  --utrecht-button-padding-inline-start: 0;
  --utrecht-button-padding-inline-end: 0;
}

/* The site's buttons wear the browser's own focus ring, so these do: the
   panel's focus tokens are its fields', and a button falls back past them. */
.login .utrecht-button,
.login .utrecht-button-link,
.login .utrecht-link-button,
.coord .utrecht-button,
.prose__split .utrecht-button {
  --utrecht-focus-outline-color: initial;
  --utrecht-focus-outline-style: initial;
  --utrecht-focus-outline-width: initial;
  --utrecht-focus-outline-offset: initial;
}

/* Glass blurs what is behind it, and a pressed pill moves the way the
   site's do. */
.login .utrecht-button--primary-action,
.login .utrecht-button--secondary-action,
.login .utrecht-button-link--secondary-action,
.coord .utrecht-button--primary-action,
.prose__split .utrecht-button--secondary-action {
  transition: transform 0.15s, background-color 0.15s;
}
.login .utrecht-button--secondary-action,
.login .utrecht-button-link--secondary-action,
.prose__split .utrecht-button--secondary-action {
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
}

/* The orange button's highlight: light landing on a curved surface. */
.login .utrecht-button--primary-action,
.coord .utrecht-button--primary-action {
  background-image: linear-gradient(rgb(var(--white-rgb) / 0.28), rgb(var(--white-rgb) / 0) 55%);
  box-shadow: var(--shadow-cta);
  backdrop-filter: var(--glass-thin-filter);
  -webkit-backdrop-filter: var(--glass-thin-filter);
}
.login .utrecht-button--primary-action:hover,
.coord .utrecht-button--primary-action:hover {
  transform: translateY(-0.125rem);
}

/* The offer is as wide as the field it opens under. */
.login .utrecht-combobox__popover {
  inline-size: 100%;
}

/* The listbox is glass, and glass blurs what is behind it. */
.login .utrecht-listbox {
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  box-shadow: var(--shadow-glass);
}

/* A company over where it is and its number: two lines, the second quieter. */
.login .utrecht-listbox__option {
  flex-direction: column;
  align-items: start;
  gap: 0.125rem;
}
.login .utrecht-listbox__option span {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* What the node says can be one long word: a path, an id. */
.login .utrecht-alert__message {
  margin: 0;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

/* The offers line under the name: a checkbox's label in the quiet type of
   the panel's notes, not a field's question. */
.login__vul {
  --utrecht-form-label-color: var(--muted-foreground);
  --utrecht-form-label-font-size: 0.875rem;
  --utrecht-form-label-checkbox-font-weight: 400;
}

/* The coordinator's card asks in the type it always has: its question a
   size under the panel's, the line under it at reading size, and the field
   named over it at a heading's weight. */
.coord {
  --utrecht-heading-2-font-size: 1.5rem;
  --utrecht-paragraph-lead-font-size: 1rem;
  --utrecht-form-label-font-weight: 600;
  --utrecht-form-label-checkbox-font-weight: 400;
  --utrecht-form-control-max-inline-size: none;
  --utrecht-checkbox-size: 1rem;
  --utrecht-checkbox-margin-inline-end: 0.5rem;
}

/* The signed-in menu: its entries are subtle buttons as wide as the menu,
   in the panel's own type and ink, lit by the mint under the pointer. */
.login__menu {
  --utrecht-button-font-size: 1rem;
  --utrecht-button-font-weight: 400;
  --utrecht-button-line-height: 1.5;
  --utrecht-button-border-radius: calc(var(--radius) - 8px);
  --utrecht-button-padding-block-start: 0.5rem;
  --utrecht-button-padding-block-end: 0.5rem;
  --utrecht-button-padding-inline-start: 0.625rem;
  --utrecht-button-padding-inline-end: 0.625rem;
  --utrecht-button-inline-size: 100%;
  --utrecht-button-max-inline-size: none;
  --utrecht-button-subtle-color: var(--foreground);
  --utrecht-button-subtle-hover-color: var(--foreground);
  --utrecht-button-subtle-active-color: var(--foreground);
  --utrecht-paragraph-font-size: 0.875rem;
}

/* A document's terms, the vacancy's and the privacy statement's: the term
   in the ink at a heading's weight, what it is in the muted reading type.
   A vacancy's card stands outside the document's .prose, so it is named. */
.prose,
.vacature {
  --utrecht-data-list-item-key-color: var(--foreground);
  --utrecht-data-list-item-key-font-size: 0.9375rem;
  --utrecht-data-list-item-key-font-weight: 600;
  --utrecht-data-list-item-key-line-height: 1.5;
  --utrecht-data-list-item-value-color: var(--muted-foreground);
  --utrecht-data-list-item-value-font-weight: 400;
  --utrecht-data-list-item-value-line-height: 1.7;
}

/* The open roles as an accordion: a title per role on the page's own ground,
   a hairline between them, the role being read in ink and the others
   muted, its chevron the orange that marks the one you are on (CDR-044).
   Its terms open under it in their own glass card. */
.vacatures {
  --utrecht-accordion-row-gap: 0;
  --utrecht-accordion-section-border-color: var(--border);
  --utrecht-accordion-section-hover-border-color: var(--border);
  --utrecht-accordion-section-border-width: 1px;
  --utrecht-accordion-button-background-color: transparent;
  --utrecht-accordion-button-hover-background-color: transparent;
  --utrecht-accordion-button-active-background-color: transparent;
  --utrecht-accordion-button-focus-background-color: transparent;
  --utrecht-accordion-button-color: var(--muted-foreground);
  --utrecht-accordion-button-hover-color: var(--foreground);
  --utrecht-accordion-button-active-color: var(--foreground);
  --utrecht-accordion-button-focus-color: var(--foreground);
  --utrecht-accordion-button-border-width: 0;
  --utrecht-accordion-button-border-radius: 0;
  --utrecht-accordion-button-font-family: var(--font-body);
  --utrecht-accordion-button-font-size: 1.0625rem;
  --utrecht-accordion-button-font-weight: 600;
  --utrecht-accordion-button-line-height: 1.4;
  --utrecht-accordion-button-gap: 0.625rem;
  --utrecht-accordion-button-icon-size: 1.25rem;
  --utrecht-accordion-button-padding-block-start: 0.875rem;
  --utrecht-accordion-button-padding-block-end: 0.875rem;
  --utrecht-accordion-button-padding-inline-start: 0;
  --utrecht-accordion-button-padding-inline-end: 0;
  --utrecht-accordion-panel-border-width: 0;
  --utrecht-accordion-panel-padding-block-start: 0;
  --utrecht-accordion-panel-padding-block-end: 1.25rem;
  --utrecht-accordion-panel-padding-inline-start: 0;
  --utrecht-accordion-panel-padding-inline-end: 0;
}
.vacatures .utrecht-accordion__button[aria-expanded="true"] {
  --utrecht-accordion-button-color: var(--foreground);
}
.vacatures .utrecht-accordion__button[aria-expanded="true"] .utrecht-accordion__button-icon {
  color: var(--primary);
}

/* The jobs page's map is a figure, and its caption reads as the quiet line
   under a picture: the same muted small type as the panel's notes. */
.vacatures {
  --utrecht-figure-caption-color: var(--muted-foreground);
  --utrecht-figure-caption-font-size: 0.875rem;
  --utrecht-figure-caption-line-height: 1.5;
}

/* A document's table, the cookie statement's and the sitemap's: the
   column's name in the ink at a heading's weight, a hairline under each
   row. It scrolls inside its own box, so the page never does. */
.prose__table {
  --utrecht-table-font-size: 0.875rem;
  --utrecht-table-margin-block-start: 1rem;
  --utrecht-table-header-cell-color: var(--foreground);
  --utrecht-table-header-cell-font-weight: 600;
  --utrecht-table-row-border-block-end-color: var(--border);
  --utrecht-table-row-border-block-end-width: 1px;
  --utrecht-table-cell-padding-block-start: 0.625rem;
  --utrecht-table-cell-padding-block-end: 0.625rem;
  --utrecht-table-cell-padding-inline-start: 0.75rem;
  --utrecht-table-cell-padding-inline-end: 0.75rem;
  --utrecht-table-cell-line-height: 1.5;
}