@charset "UTF-8";
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
/* Append here */
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
/**
 * Prioritizes legibility over speed when rendering text
 * and disables text inflation on some mobile devices.
 */
.ams-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--ams-accordion-gap);
  /* These CSS declarations have a fallback, so it's safe to use them. */
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
}

.ams-accordion__header {
  /* This class name is deprecated. */
}

.ams-accordion__button {
  background-color: transparent;
  color: var(--ams-accordion-button-color);
  cursor: var(--ams-accordion-button-cursor);
  display: flex;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  gap: var(--ams-accordion-button-gap);
  inline-size: 100%;
  line-height: inherit;
  outline-offset: var(--ams-accordion-button-outline-offset);
  padding-block: var(--ams-accordion-button-padding-block);
  padding-inline: var(--ams-accordion-button-padding-inline);
  text-align: start;
  border: none;
  margin-block: 0;
  margin-inline: 0;
}
.ams-accordion__button:hover {
  color: var(--ams-accordion-button-hover-color);
}

.ams-accordion__icon svg {
  rotate: 0deg;
  transition: none;
}
[aria-expanded=true] .ams-accordion__icon svg {
  rotate: -180deg;
}
@media not (prefers-reduced-motion) {
  .ams-accordion__icon svg {
    transition: rotate 0.3s ease;
  }
}

.ams-accordion__button[aria-expanded=true] svg {
  rotate: -180deg;
}

.ams-accordion__panel {
  display: none;
}

.ams-accordion__panel--expanded {
  display: block;
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-action-group {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--ams-action-group-gap);
}
.ams-action-group > * {
  flex: auto;
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-alert {
  background-color: var(--ams-alert-background-color);
  border-color: var(--ams-alert-border-color);
  border-style: var(--ams-alert-border-style);
  border-width: var(--ams-alert-border-width);
  display: flex;
}

.ams-alert__severity-indicator {
  background-color: var(--ams-alert-severity-indicator-background-color);
  border-inline-end: inherit;
  flex: none;
  padding-block: var(--ams-alert-severity-indicator-padding-block);
  padding-inline: var(--ams-alert-severity-indicator-padding-inline);
}

.ams-alert__content {
  display: flex;
  flex: auto;
  flex-direction: column;
  gap: var(--ams-alert-content-gap);
  padding-block: var(--ams-alert-content-padding-block);
  padding-inline: var(--ams-alert-content-padding-inline);
}

.ams-alert--error {
  border-color: var(--ams-alert-error-border-color);
}
.ams-alert--error > .ams-alert__severity-indicator {
  background-color: var(--ams-alert-error-severity-indicator-background-color);
}

.ams-alert--success {
  border-color: var(--ams-alert-success-border-color);
}
.ams-alert--success > .ams-alert__severity-indicator {
  background-color: var(--ams-alert-success-severity-indicator-background-color);
}

.ams-alert--warning {
  border-color: var(--ams-alert-warning-border-color);
}
.ams-alert--warning > .ams-alert__severity-indicator {
  background-color: var(--ams-alert-warning-severity-indicator-background-color);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-aspect-ratio-9-16 {
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  aspect-ratio: var(--ams-aspect-ratio-9-16) !important;
}
.ams-aspect-ratio-3-4 {
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  aspect-ratio: var(--ams-aspect-ratio-3-4) !important;
}
.ams-aspect-ratio-1-1 {
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  aspect-ratio: var(--ams-aspect-ratio-1-1) !important;
}
.ams-aspect-ratio-4-3 {
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  aspect-ratio: var(--ams-aspect-ratio-4-3) !important;
}
.ams-aspect-ratio-16-9 {
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  aspect-ratio: var(--ams-aspect-ratio-16-9) !important;
}
.ams-aspect-ratio-16-5 {
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  aspect-ratio: var(--ams-aspect-ratio-16-5) !important;
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-avatar {
  aspect-ratio: var(--ams-avatar-aspect-ratio);
  background-color: var(--ams-avatar-background-color);
  border-color: var(--ams-avatar-border-color);
  border-radius: 50%;
  border-style: var(--ams-avatar-border-style);
  border-width: var(--ams-avatar-border-width);
  color: var(--ams-avatar-color);
  display: inline-flex;
  font-family: var(--ams-avatar-font-family);
  font-size: var(--ams-avatar-font-size);
  inline-size: calc(var(--ams-avatar-line-height) * var(--ams-avatar-font-size));
  line-height: var(--ams-avatar-line-height);
  padding-block: var(--ams-avatar-padding-block);
  padding-inline: var(--ams-avatar-padding-inline);
  place-content: center;
}
.ams-avatar svg {
  fill: currentColor;
}

.ams-avatar--has-image {
  border: none;
  inline-size: calc(var(--ams-avatar-line-height) * var(--ams-avatar-font-size) + 2 * var(--ams-avatar-padding-inline) + 2 * var(--ams-border-width-m));
  overflow: hidden;
  padding-block: 0;
  padding-inline: 0;
  vertical-align: middle; /* Remove ‘phantom’ white space when image doesn’t load */
}

.ams-avatar--azure {
  background-color: var(--ams-avatar-azure-background-color);
  border-color: var(--ams-avatar-azure-border-color);
  color: var(--ams-avatar-azure-color);
}

.ams-avatar--green {
  background-color: var(--ams-avatar-green-background-color);
  border-color: var(--ams-avatar-green-border-color);
  color: var(--ams-avatar-green-color);
}

.ams-avatar--lime {
  background-color: var(--ams-avatar-lime-background-color);
  border-color: var(--ams-avatar-lime-border-color);
  color: var(--ams-avatar-lime-color);
}

.ams-avatar--magenta {
  background-color: var(--ams-avatar-magenta-background-color);
  border-color: var(--ams-avatar-magenta-border-color);
  color: var(--ams-avatar-magenta-color);
}

.ams-avatar--orange {
  background-color: var(--ams-avatar-orange-background-color);
  border-color: var(--ams-avatar-orange-border-color);
  color: var(--ams-avatar-orange-color);
}

.ams-avatar--yellow {
  background-color: var(--ams-avatar-yellow-background-color);
  border-color: var(--ams-avatar-yellow-border-color);
  color: var(--ams-avatar-yellow-color);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-badge {
  background-color: var(--ams-badge-background-color);
  color: var(--ams-badge-color);
  display: inline-block;
  font-family: var(--ams-badge-font-family);
  font-size: var(--ams-badge-font-size);
  font-weight: var(--ams-badge-font-weight);
  line-height: var(--ams-badge-line-height);
  padding-inline: var(--ams-badge-padding-inline);
  /* These CSS declarations have a fallback, so it's safe to use them. */
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
}

.ams-badge--azure {
  background-color: var(--ams-badge-azure-background-color);
  color: var(--ams-badge-azure-color);
}

.ams-badge--lime {
  background-color: var(--ams-badge-lime-background-color);
  color: var(--ams-badge-lime-color);
}

.ams-badge--magenta {
  background-color: var(--ams-badge-magenta-background-color);
  color: var(--ams-badge-magenta-color);
}

.ams-badge--orange {
  background-color: var(--ams-badge-orange-background-color);
  color: var(--ams-badge-orange-color);
}

.ams-badge--purple {
  background-color: var(--ams-badge-purple-background-color);
  color: var(--ams-badge-purple-color);
}

.ams-badge--red {
  background-color: var(--ams-badge-red-background-color);
  color: var(--ams-badge-red-color);
}

.ams-badge--yellow {
  background-color: var(--ams-badge-yellow-background-color);
  color: var(--ams-badge-yellow-color);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-blockquote {
  box-sizing: border-box;
  break-inside: avoid;
  color: var(--ams-blockquote-color);
  font-family: var(--ams-blockquote-font-family);
  font-size: var(--ams-blockquote-font-size);
  font-weight: var(--ams-blockquote-font-weight);
  line-height: var(--ams-blockquote-line-height);
  quotes: "“" "”";
  /* These CSS declarations have a fallback, so it's safe to use them. */
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
  margin-block: 0;
  margin-inline: 0;
}
.ams-blockquote::before {
  content: open-quote;
}
.ams-blockquote::after {
  content: close-quote;
}

.ams-blockquote--inverse {
  color: var(--ams-blockquote-inverse-color);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-breadcrumb {
  /*
   * If break-after is supported, use it to avoid Breadcrumbs from being the last item on a page when printed.
   * If it is not supported, it is ignored.
   */
  /* stylelint-disable-next-line plugin/use-baseline */
  break-after: avoid;
  font-family: var(--ams-breadcrumb-font-family);
  font-size: var(--ams-breadcrumb-font-size);
  font-weight: var(--ams-breadcrumb-font-weight);
  line-height: var(--ams-breadcrumb-line-height);
}

.ams-breadcrumb__list {
  box-sizing: border-box;
  break-inside: avoid;
  /* These CSS declarations have a fallback, so it's safe to use them. */
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
  margin-block: 0;
  padding-inline: 0;
}

.ams-breadcrumb__item {
  display: inline;
}

.ams-breadcrumb__item:not(:last-child)::after {
  background-image: var(--ams-breadcrumb-separator-background-image);
  background-repeat: no-repeat;
  block-size: var(--ams-breadcrumb-separator-block-size);
  content: "";
  display: inline-block;
  inline-size: var(--ams-breadcrumb-separator-inline-size);
  margin-inline: var(--ams-breadcrumb-separator-margin-inline);
}

.ams-breadcrumb__link {
  color: var(--ams-breadcrumb-link-color);
  outline-offset: var(--ams-breadcrumb-link-outline-offset);
  text-decoration-line: var(--ams-breadcrumb-link-text-decoration-line);
  text-decoration-thickness: var(--ams-breadcrumb-link-text-decoration-thickness);
  text-underline-offset: var(--ams-breadcrumb-link-text-underline-offset);
}
.ams-breadcrumb__link:hover {
  color: var(--ams-breadcrumb-link-hover-color);
  text-decoration-line: var(--ams-breadcrumb-link-hover-text-decoration-line);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
/**
 * CSS Custom properties cannot be used in media queries.
 * We resort to Sass variables for our breakpoint values.
 */
/** The breakpoint at which medium screens start. */
/** The breakpoint at which wide screens start. */
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
/* stylelint-disable no-invalid-position-declaration */
.ams-grid {
  column-gap: var(--ams-grid-column-gap);
  display: grid;
  grid-template-columns: repeat(var(--ams-grid-column-count), 1fr);
  padding-inline: var(--ams-grid-padding-inline);
  row-gap: var(--ams-grid-row-gap-xl);
}
@media screen and (min-width: 37.5rem) {
  .ams-grid {
    grid-template-columns: repeat(var(--ams-grid-medium-column-count), 1fr);
    padding-inline: var(--ams-grid-medium-padding-inline);
  }
}
@media screen and (min-width: 72.5rem) {
  .ams-grid {
    grid-template-columns: repeat(var(--ams-grid-wide-column-count), 1fr);
    padding-inline: var(--ams-grid-wide-padding-inline);
  }
}

.ams-grid--gap-vertical--none {
  row-gap: initial;
}

.ams-grid--gap-vertical--large {
  row-gap: var(--ams-grid-row-gap-l);
}

.ams-grid--gap-vertical--2x-large {
  row-gap: var(--ams-grid-row-gap-2xl);
}

.ams-grid--padding-bottom--large {
  padding-block-end: var(--ams-grid-padding-block-l);
}

.ams-grid--padding-bottom--x-large {
  padding-block-end: var(--ams-grid-padding-block-xl);
}

.ams-grid--padding-bottom--2x-large {
  padding-block-end: var(--ams-grid-padding-block-2xl);
}

.ams-grid--padding-top--large {
  padding-block-start: var(--ams-grid-padding-block-l);
}

.ams-grid--padding-top--x-large {
  padding-block-start: var(--ams-grid-padding-block-xl);
}

.ams-grid--padding-top--2x-large {
  padding-block-start: var(--ams-grid-padding-block-2xl);
}

.ams-grid--padding-vertical--large {
  padding-block: var(--ams-grid-padding-block-l);
}

.ams-grid--padding-vertical--x-large {
  padding-block: var(--ams-grid-padding-block-xl);
}

.ams-grid--padding-vertical--2x-large {
  padding-block: var(--ams-grid-padding-block-2xl);
}

.ams-grid__cell--span-all {
  grid-column: 1/-1;
}

.ams-grid__cell--span-1 {
  grid-column-end: span 1;
}

.ams-grid__cell--start-1 {
  grid-column-start: 1;
}

.ams-grid__cell--span-2 {
  grid-column-end: span 2;
}

.ams-grid__cell--start-2 {
  grid-column-start: 2;
}

.ams-grid__cell--span-3 {
  grid-column-end: span 3;
}

.ams-grid__cell--start-3 {
  grid-column-start: 3;
}

.ams-grid__cell--span-4 {
  grid-column-end: span 4;
}

.ams-grid__cell--start-4 {
  grid-column-start: 4;
}

.ams-grid__cell--span-5 {
  grid-column-end: span 5;
}

.ams-grid__cell--start-5 {
  grid-column-start: 5;
}

.ams-grid__cell--span-6 {
  grid-column-end: span 6;
}

.ams-grid__cell--start-6 {
  grid-column-start: 6;
}

.ams-grid__cell--span-7 {
  grid-column-end: span 7;
}

.ams-grid__cell--start-7 {
  grid-column-start: 7;
}

.ams-grid__cell--span-8 {
  grid-column-end: span 8;
}

.ams-grid__cell--start-8 {
  grid-column-start: 8;
}

.ams-grid__cell--span-9 {
  grid-column-end: span 9;
}

.ams-grid__cell--start-9 {
  grid-column-start: 9;
}

.ams-grid__cell--span-10 {
  grid-column-end: span 10;
}

.ams-grid__cell--start-10 {
  grid-column-start: 10;
}

.ams-grid__cell--span-11 {
  grid-column-end: span 11;
}

.ams-grid__cell--start-11 {
  grid-column-start: 11;
}

.ams-grid__cell--span-12 {
  grid-column-end: span 12;
}

.ams-grid__cell--start-12 {
  grid-column-start: 12;
}

@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-grid__cell--span-1-medium {
    grid-column-end: span 1;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-grid__cell--start-1-medium {
    grid-column-start: 1;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-grid__cell--span-2-medium {
    grid-column-end: span 2;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-grid__cell--start-2-medium {
    grid-column-start: 2;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-grid__cell--span-3-medium {
    grid-column-end: span 3;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-grid__cell--start-3-medium {
    grid-column-start: 3;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-grid__cell--span-4-medium {
    grid-column-end: span 4;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-grid__cell--start-4-medium {
    grid-column-start: 4;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-grid__cell--span-5-medium {
    grid-column-end: span 5;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-grid__cell--start-5-medium {
    grid-column-start: 5;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-grid__cell--span-6-medium {
    grid-column-end: span 6;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-grid__cell--start-6-medium {
    grid-column-start: 6;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-grid__cell--span-7-medium {
    grid-column-end: span 7;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-grid__cell--start-7-medium {
    grid-column-start: 7;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-grid__cell--span-8-medium {
    grid-column-end: span 8;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-grid__cell--start-8-medium {
    grid-column-start: 8;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-grid__cell--span-9-medium {
    grid-column-end: span 9;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-grid__cell--start-9-medium {
    grid-column-start: 9;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-grid__cell--span-10-medium {
    grid-column-end: span 10;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-grid__cell--start-10-medium {
    grid-column-start: 10;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-grid__cell--span-11-medium {
    grid-column-end: span 11;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-grid__cell--start-11-medium {
    grid-column-start: 11;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-grid__cell--span-12-medium {
    grid-column-end: span 12;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-grid__cell--start-12-medium {
    grid-column-start: 12;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-grid__cell--span-1-wide {
    grid-column-end: span 1;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-grid__cell--start-1-wide {
    grid-column-start: 1;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-grid__cell--span-2-wide {
    grid-column-end: span 2;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-grid__cell--start-2-wide {
    grid-column-start: 2;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-grid__cell--span-3-wide {
    grid-column-end: span 3;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-grid__cell--start-3-wide {
    grid-column-start: 3;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-grid__cell--span-4-wide {
    grid-column-end: span 4;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-grid__cell--start-4-wide {
    grid-column-start: 4;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-grid__cell--span-5-wide {
    grid-column-end: span 5;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-grid__cell--start-5-wide {
    grid-column-start: 5;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-grid__cell--span-6-wide {
    grid-column-end: span 6;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-grid__cell--start-6-wide {
    grid-column-start: 6;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-grid__cell--span-7-wide {
    grid-column-end: span 7;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-grid__cell--start-7-wide {
    grid-column-start: 7;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-grid__cell--span-8-wide {
    grid-column-end: span 8;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-grid__cell--start-8-wide {
    grid-column-start: 8;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-grid__cell--span-9-wide {
    grid-column-end: span 9;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-grid__cell--start-9-wide {
    grid-column-start: 9;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-grid__cell--span-10-wide {
    grid-column-end: span 10;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-grid__cell--start-10-wide {
    grid-column-start: 10;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-grid__cell--span-11-wide {
    grid-column-end: span 11;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-grid__cell--start-11-wide {
    grid-column-start: 11;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-grid__cell--span-12-wide {
    grid-column-end: span 12;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-grid__cell--start-12-wide {
    grid-column-start: 12;
  }
}
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-breakout {
  column-gap: var(--ams-grid-column-gap);
  display: grid;
  grid-template-columns: repeat(var(--ams-grid-column-count), 1fr);
  padding-inline: var(--ams-grid-padding-inline);
  row-gap: var(--ams-grid-row-gap-xl);
}
@media screen and (min-width: 37.5rem) {
  .ams-breakout {
    grid-template-columns: repeat(var(--ams-grid-medium-column-count), 1fr);
    padding-inline: var(--ams-grid-medium-padding-inline);
  }
}
@media screen and (min-width: 72.5rem) {
  .ams-breakout {
    grid-template-columns: repeat(var(--ams-grid-wide-column-count), 1fr);
    padding-inline: var(--ams-grid-wide-padding-inline);
  }
}

.ams-breakout--gap-vertical--none {
  row-gap: initial;
}

.ams-breakout--gap-vertical--large {
  row-gap: var(--ams-grid-row-gap-l);
}

.ams-breakout--gap-vertical--2x-large {
  row-gap: var(--ams-grid-row-gap-2xl);
}

.ams-breakout--padding-bottom--large {
  padding-block-end: var(--ams-grid-padding-block-l);
}

.ams-breakout--padding-bottom--x-large {
  padding-block-end: var(--ams-grid-padding-block-xl);
}

.ams-breakout--padding-bottom--2x-large {
  padding-block-end: var(--ams-grid-padding-block-2xl);
}

.ams-breakout--padding-top--large {
  padding-block-start: var(--ams-grid-padding-block-l);
}

.ams-breakout--padding-top--x-large {
  padding-block-start: var(--ams-grid-padding-block-xl);
}

.ams-breakout--padding-top--2x-large {
  padding-block-start: var(--ams-grid-padding-block-2xl);
}

.ams-breakout--padding-vertical--large {
  padding-block: var(--ams-grid-padding-block-l);
}

.ams-breakout--padding-vertical--x-large {
  padding-block: var(--ams-grid-padding-block-xl);
}

.ams-breakout--padding-vertical--2x-large {
  padding-block: var(--ams-grid-padding-block-2xl);
}

.ams-breakout__cell--col-span-all {
  grid-column: 1/-1;
}

.ams-breakout__cell--col-span-1 {
  grid-column-end: span 1;
}

.ams-breakout__cell--col-start-1 {
  grid-column-start: 1;
}

.ams-breakout__cell--col-span-2 {
  grid-column-end: span 2;
}

.ams-breakout__cell--col-start-2 {
  grid-column-start: 2;
}

.ams-breakout__cell--col-span-3 {
  grid-column-end: span 3;
}

.ams-breakout__cell--col-start-3 {
  grid-column-start: 3;
}

.ams-breakout__cell--col-span-4 {
  grid-column-end: span 4;
}

.ams-breakout__cell--col-start-4 {
  grid-column-start: 4;
}

.ams-breakout__cell--col-span-5 {
  grid-column-end: span 5;
}

.ams-breakout__cell--col-start-5 {
  grid-column-start: 5;
}

.ams-breakout__cell--col-span-6 {
  grid-column-end: span 6;
}

.ams-breakout__cell--col-start-6 {
  grid-column-start: 6;
}

.ams-breakout__cell--col-span-7 {
  grid-column-end: span 7;
}

.ams-breakout__cell--col-start-7 {
  grid-column-start: 7;
}

.ams-breakout__cell--col-span-8 {
  grid-column-end: span 8;
}

.ams-breakout__cell--col-start-8 {
  grid-column-start: 8;
}

.ams-breakout__cell--col-span-9 {
  grid-column-end: span 9;
}

.ams-breakout__cell--col-start-9 {
  grid-column-start: 9;
}

.ams-breakout__cell--col-span-10 {
  grid-column-end: span 10;
}

.ams-breakout__cell--col-start-10 {
  grid-column-start: 10;
}

.ams-breakout__cell--col-span-11 {
  grid-column-end: span 11;
}

.ams-breakout__cell--col-start-11 {
  grid-column-start: 11;
}

.ams-breakout__cell--col-span-12 {
  grid-column-end: span 12;
}

.ams-breakout__cell--col-start-12 {
  grid-column-start: 12;
}

@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-breakout__cell--col-span-1-medium {
    grid-column-end: span 1;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-breakout__cell--col-start-1-medium {
    grid-column-start: 1;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-breakout__cell--col-span-2-medium {
    grid-column-end: span 2;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-breakout__cell--col-start-2-medium {
    grid-column-start: 2;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-breakout__cell--col-span-3-medium {
    grid-column-end: span 3;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-breakout__cell--col-start-3-medium {
    grid-column-start: 3;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-breakout__cell--col-span-4-medium {
    grid-column-end: span 4;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-breakout__cell--col-start-4-medium {
    grid-column-start: 4;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-breakout__cell--col-span-5-medium {
    grid-column-end: span 5;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-breakout__cell--col-start-5-medium {
    grid-column-start: 5;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-breakout__cell--col-span-6-medium {
    grid-column-end: span 6;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-breakout__cell--col-start-6-medium {
    grid-column-start: 6;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-breakout__cell--col-span-7-medium {
    grid-column-end: span 7;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-breakout__cell--col-start-7-medium {
    grid-column-start: 7;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-breakout__cell--col-span-8-medium {
    grid-column-end: span 8;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-breakout__cell--col-start-8-medium {
    grid-column-start: 8;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-breakout__cell--col-span-9-medium {
    grid-column-end: span 9;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-breakout__cell--col-start-9-medium {
    grid-column-start: 9;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-breakout__cell--col-span-10-medium {
    grid-column-end: span 10;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-breakout__cell--col-start-10-medium {
    grid-column-start: 10;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-breakout__cell--col-span-11-medium {
    grid-column-end: span 11;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-breakout__cell--col-start-11-medium {
    grid-column-start: 11;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-breakout__cell--col-span-12-medium {
    grid-column-end: span 12;
  }
}
@media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
  .ams-breakout__cell--col-start-12-medium {
    grid-column-start: 12;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-breakout__cell--col-span-1-wide {
    grid-column-end: span 1;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-breakout__cell--col-start-1-wide {
    grid-column-start: 1;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-breakout__cell--col-span-2-wide {
    grid-column-end: span 2;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-breakout__cell--col-start-2-wide {
    grid-column-start: 2;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-breakout__cell--col-span-3-wide {
    grid-column-end: span 3;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-breakout__cell--col-start-3-wide {
    grid-column-start: 3;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-breakout__cell--col-span-4-wide {
    grid-column-end: span 4;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-breakout__cell--col-start-4-wide {
    grid-column-start: 4;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-breakout__cell--col-span-5-wide {
    grid-column-end: span 5;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-breakout__cell--col-start-5-wide {
    grid-column-start: 5;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-breakout__cell--col-span-6-wide {
    grid-column-end: span 6;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-breakout__cell--col-start-6-wide {
    grid-column-start: 6;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-breakout__cell--col-span-7-wide {
    grid-column-end: span 7;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-breakout__cell--col-start-7-wide {
    grid-column-start: 7;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-breakout__cell--col-span-8-wide {
    grid-column-end: span 8;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-breakout__cell--col-start-8-wide {
    grid-column-start: 8;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-breakout__cell--col-span-9-wide {
    grid-column-end: span 9;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-breakout__cell--col-start-9-wide {
    grid-column-start: 9;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-breakout__cell--col-span-10-wide {
    grid-column-end: span 10;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-breakout__cell--col-start-10-wide {
    grid-column-start: 10;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-breakout__cell--col-span-11-wide {
    grid-column-end: span 11;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-breakout__cell--col-start-11-wide {
    grid-column-start: 11;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-breakout__cell--col-span-12-wide {
    grid-column-end: span 12;
  }
}
@media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
  .ams-breakout__cell--col-start-12-wide {
    grid-column-start: 12;
  }
}
.ams-breakout__cell--has-figure {
  align-self: end;
}

.ams-breakout__cell--has-spotlight {
  display: grid; /* Stretches the empty Spotlight vertically. */
  margin-block: calc(var(--ams-space-xl) * -1);
  margin-inline: calc(var(--ams-grid-padding-inline) * -1);
}
@media screen and (min-width: 37.5rem) {
  .ams-breakout__cell--has-spotlight {
    margin-inline: calc(var(--ams-grid-medium-padding-inline) * -1);
  }
}
@media screen and (min-width: 72.5rem) {
  .ams-breakout__cell--has-spotlight {
    margin-inline: calc(var(--ams-grid-wide-padding-inline) * -1);
  }
}
.ams-breakout--gap-vertical--small > .ams-breakout__cell--has-spotlight {
  margin-block: calc(var(--ams-space-l) * -1);
}
.ams-breakout--gap-vertical--large > .ams-breakout__cell--has-spotlight {
  margin-block: calc(var(--ams-space-2xl) * -1);
}

.ams-breakout__cell--row-span-1 {
  grid-row-end: span 1;
}

.ams-breakout__cell--row-start-1 {
  grid-row-start: 1;
}

.ams-breakout__cell--row-span-2 {
  grid-row-end: span 2;
}

.ams-breakout__cell--row-start-2 {
  grid-row-start: 2;
}

.ams-breakout__cell--row-span-3 {
  grid-row-end: span 3;
}

.ams-breakout__cell--row-start-3 {
  grid-row-start: 3;
}

.ams-breakout__cell--row-span-4 {
  grid-row-end: span 4;
}

.ams-breakout__cell--row-start-4 {
  grid-row-start: 4;
}

@media screen and (min-width: 37.5rem) {
  .ams-breakout__cell--row-span-1-medium {
    grid-row-end: span 1;
  }
  .ams-breakout__cell--row-start-1-medium {
    grid-row-start: 1;
  }
  .ams-breakout__cell--row-span-2-medium {
    grid-row-end: span 2;
  }
  .ams-breakout__cell--row-start-2-medium {
    grid-row-start: 2;
  }
  .ams-breakout__cell--row-span-3-medium {
    grid-row-end: span 3;
  }
  .ams-breakout__cell--row-start-3-medium {
    grid-row-start: 3;
  }
  .ams-breakout__cell--row-span-4-medium {
    grid-row-end: span 4;
  }
  .ams-breakout__cell--row-start-4-medium {
    grid-row-start: 4;
  }
}
@media screen and (min-width: 72.5rem) {
  .ams-breakout__cell--row-span-1-wide {
    grid-row-end: span 1;
  }
  .ams-breakout__cell--row-start-1-wide {
    grid-row-start: 1;
  }
  .ams-breakout__cell--row-span-2-wide {
    grid-row-end: span 2;
  }
  .ams-breakout__cell--row-start-2-wide {
    grid-row-start: 2;
  }
  .ams-breakout__cell--row-span-3-wide {
    grid-row-end: span 3;
  }
  .ams-breakout__cell--row-start-3-wide {
    grid-row-start: 3;
  }
  .ams-breakout__cell--row-span-4-wide {
    grid-row-end: span 4;
  }
  .ams-breakout__cell--row-start-4-wide {
    grid-row-start: 4;
  }
}
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-button {
  --ams-icon-line-height: var(--ams-button-line-height);
  border-style: var(--ams-button-border-style);
  border-width: var(--ams-button-border-width);
  cursor: var(--ams-button-cursor);
  display: inline-flex;
  font-family: var(--ams-button-font-family);
  font-size: var(--ams-button-font-size);
  font-weight: var(--ams-button-font-weight);
  gap: var(--ams-button-gap);
  justify-content: center;
  line-height: var(--ams-button-line-height);
  outline-offset: var(--ams-button-outline-offset);
  padding-block: var(--ams-button-padding-block);
  padding-inline: var(--ams-button-padding-inline);
  touch-action: manipulation;
  /* These CSS declarations have a fallback, so it's safe to use them. */
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
  margin-block: 0;
  margin-inline: 0;
}
.ams-button:disabled, .ams-button[aria-disabled=true] {
  cursor: var(--ams-button-disabled-cursor);
}

.ams-button--primary {
  background-color: var(--ams-button-primary-background-color);
  border-color: var(--ams-button-primary-border-color);
  color: var(--ams-button-primary-color);
}
.ams-button--primary:disabled,
.ams-button--primary [aria-disabled=true] {
  background-color: var(--ams-button-primary-disabled-background-color);
  border-color: var(--ams-button-primary-disabled-border-color);
}
.ams-button--primary:hover:not(:disabled, [aria-disabled=true]) {
  background-color: var(--ams-button-primary-hover-background-color);
  border-color: var(--ams-button-primary-hover-border-color);
}

.ams-button--secondary {
  background-color: var(--ams-button-secondary-background-color);
  border-color: var(--ams-button-secondary-border-color);
  color: var(--ams-button-secondary-color);
}
.ams-button--secondary:disabled,
.ams-button--secondary [aria-disabled=true] {
  border-color: var(--ams-button-secondary-disabled-border-color);
  color: var(--ams-button-secondary-disabled-color);
}
.ams-button--secondary:hover:not(:disabled, [aria-disabled=true]) {
  box-shadow: var(--ams-button-secondary-hover-box-shadow);
  color: var(--ams-button-secondary-hover-color);
}

.ams-button--tertiary {
  background-color: var(--ams-button-tertiary-background-color);
  border-color: var(--ams-button-tertiary-border-color);
  color: var(--ams-button-tertiary-color);
}
.ams-button--tertiary:disabled,
.ams-button--tertiary [aria-disabled=true] {
  color: var(--ams-button-tertiary-disabled-color);
}
.ams-button--tertiary:hover:not(:disabled, [aria-disabled=true]) {
  border-color: var(--ams-button-tertiary-hover-border-color);
  color: var(--ams-button-tertiary-hover-color);
}

.ams-button--icon-only {
  padding-block: var(--ams-button-icon-only-padding-block);
  padding-inline: var(--ams-button-icon-only-padding-inline);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-call-to-action-link {
  background-color: var(--ams-call-to-action-link-background-color);
  color: var(--ams-call-to-action-link-color);
  display: inline-flex;
  font-family: var(--ams-call-to-action-link-font-family);
  font-size: var(--ams-call-to-action-link-font-size);
  font-weight: var(--ams-call-to-action-link-font-weight);
  line-height: var(--ams-call-to-action-link-line-height);
  outline-offset: var(--ams-call-to-action-link-outline-offset);
  padding-block: var(--ams-call-to-action-link-padding-block);
  padding-inline: var(--ams-call-to-action-link-padding-inline);
  text-decoration-thickness: var(--ams-call-to-action-link-text-decoration-thickness);
  text-underline-offset: var(--ams-call-to-action-link-text-underline-offset);
  touch-action: manipulation;
  /* These CSS declarations have a fallback, so it's safe to use them. */
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
}
.ams-call-to-action-link:hover {
  background-color: var(--ams-call-to-action-link-hover-background-color);
  text-decoration-thickness: var(--ams-call-to-action-link-hover-text-decoration-thickness);
  text-underline-offset: var(--ams-call-to-action-link-hover-text-underline-offset);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-card {
  display: grid;
  outline-offset: var(--ams-card-outline-offset);
  position: relative;
  touch-action: manipulation;
  /*
   * Set native outline to Card if it has a visible focus inside.
   * It is okay to use the :has() pseudo-class here, because we have a fallback for browsers that do not support it.
   */
  /* stylelint-disable-next-line plugin/use-baseline */
}
.ams-card:has(:focus-visible) {
  outline-color: -webkit-focus-ring-color;
  outline-style: auto;
  outline-width: 0.0625rem;
}
.ams-card > .ams-card__heading:not(:last-child) {
  margin-block-end: var(--ams-card-heading-margin-block-end);
}
.ams-card > .ams-card__image:not(:last-child) {
  margin-block-end: var(--ams-card-image-margin-block-end);
}

.ams-card__heading-group {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--ams-card-heading-group-gap);
  margin-block-end: var(--ams-card-heading-group-margin-block-end);
}

.ams-card__link {
  color: var(--ams-card-link-color);
  text-decoration-line: var(--ams-card-link-text-decoration-line);
  text-decoration-thickness: var(--ams-card-link-text-decoration-thickness);
  text-underline-offset: var(--ams-card-link-text-underline-offset);
  /*
   * Make the whole Card clickable by making the link cover its entire area.
   * Source: https://inclusive-components.design/cards/
   */
}
.ams-card__link::after {
  content: "";
  display: block;
  inset-block: 0;
  inset-inline: 0;
  position: absolute;
}
.ams-card__link:hover {
  color: var(--ams-card-link-hover-color);
  text-decoration-line: var(--ams-card-link-hover-text-decoration-line);
}
.ams-card__link {
  /*
   * Remove the outline from the link; it’s already on the Card.
   * Reuses the `.ams-card:has(:focus-visible)` selector above, so that
   * browsers that support it apply both styles, while those that don’t apply neither.
   */
  /* stylelint-disable-next-line plugin/use-baseline */
}
.ams-card:has(:focus-visible) .ams-card__link:focus {
  outline: none;
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-character-count {
  color: var(--ams-character-count-color);
  font-family: var(--ams-character-count-font-family);
  font-size: var(--ams-character-count-font-size);
  font-weight: var(--ams-character-count-font-weight);
  line-height: var(--ams-character-count-line-height);
  /* These CSS declarations have a fallback, so it's safe to use them. */
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
}

.ams-character-count--error {
  color: var(--ams-character-count-error-color);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
/**
  * Focus is first set on the label next to a focussed input, and then
  * hidden when the focussed input doesn't have focus-visible.
  * This progressive enhancement means you get the benefits of focus-visible
  * while still showing a focus ring on browsers that don't support focus-visible (like older Safari).
  */
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-checkbox__label {
  color: var(--ams-checkbox-color);
  cursor: var(--ams-checkbox-cursor);
  display: inline-flex;
  font-family: var(--ams-checkbox-font-family);
  font-size: var(--ams-checkbox-font-size);
  font-weight: var(--ams-checkbox-font-weight);
  gap: var(--ams-checkbox-gap);
  line-height: var(--ams-checkbox-line-height);
  outline-offset: var(--ams-checkbox-outline-offset);
  text-decoration-thickness: var(--ams-checkbox-text-decoration-thickness);
  text-underline-offset: var(--ams-checkbox-text-underline-offset);
  /* These CSS declarations have a fallback, so it's safe to use them. */
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
}

.ams-checkbox__icon-container {
  block-size: var(--ams-checkbox-icon-container-block-size);
  display: flex;
  flex: none;
  inline-size: var(--ams-checkbox-icon-container-inline-size);
}

.ams-checkbox__rectangle {
  fill: var(--ams-checkbox-rectangle-fill);
  stroke: var(--ams-checkbox-rectangle-stroke);
}
@media (forced-colors: active) {
  .ams-checkbox__rectangle {
    fill: Canvas;
    stroke: FieldText;
  }
}

.ams-checkbox__hover-indicator {
  stroke: none;
}

.ams-checkbox__checked-indicator {
  display: none;
  stroke: var(--ams-checkbox-checked-indicator-stroke);
}
@media (forced-colors: active) {
  .ams-checkbox__checked-indicator {
    stroke: Canvas;
  }
}

.ams-checkbox__indeterminate-indicator {
  display: none;
  stroke: var(--ams-checkbox-indeterminate-indicator-stroke);
}
@media (forced-colors: active) {
  .ams-checkbox__indeterminate-indicator {
    stroke: Canvas;
  }
}

/* stylelint-disable no-invalid-position-declaration */
/* stylelint-enable no-invalid-position-declaration */
.ams-checkbox__input {
  appearance: none;
  inline-size: 0;
  margin-block: 0;
  margin-inline: 0;
}
.ams-checkbox__input:focus + label {
  outline: auto;
}
.ams-checkbox__input:focus:not(:focus-visible) + label {
  outline: 0;
}
.ams-checkbox__input:disabled + * {
  color: var(--ams-checkbox-disabled-color);
  cursor: var(--ams-checkbox-disabled-cursor);
}
.ams-checkbox__input:disabled + * .ams-checkbox__rectangle {
  stroke: var(--ams-checkbox-rectangle-disabled-stroke);
}
@media (forced-colors: active) {
  .ams-checkbox__input:disabled + * .ams-checkbox__rectangle {
    stroke: GrayText;
  }
}
.ams-checkbox__input:indeterminate + * .ams-checkbox__rectangle {
  fill: var(--ams-checkbox-rectangle-indeterminate-fill);
}
@media (forced-colors: active) {
  .ams-checkbox__input:indeterminate + * .ams-checkbox__rectangle {
    fill: ActiveText;
    stroke: ActiveText;
  }
}
.ams-checkbox__input:indeterminate + * .ams-checkbox__indeterminate-indicator {
  display: block;
}
.ams-checkbox__input:checked:not(:indeterminate) + * .ams-checkbox__rectangle {
  fill: var(--ams-checkbox-rectangle-checked-fill);
}
@media (forced-colors: active) {
  .ams-checkbox__input:checked:not(:indeterminate) + * .ams-checkbox__rectangle {
    fill: ActiveText;
    stroke: ActiveText;
  }
}
.ams-checkbox__input:checked:not(:indeterminate) + * .ams-checkbox__checked-indicator {
  display: block;
}
.ams-checkbox__input:hover:not(:disabled) + * {
  color: var(--ams-checkbox-hover-color);
  text-decoration-line: var(--ams-checkbox-hover-text-decoration-line);
}
@media (forced-colors: none) {
  .ams-checkbox__input:hover:not(:disabled) + * .ams-checkbox__rectangle {
    stroke: var(--ams-checkbox-rectangle-hover-stroke);
  }
}
@media (forced-colors: none) {
  .ams-checkbox__input:hover:not(:disabled) + * .ams-checkbox__hover-indicator {
    stroke: var(--ams-checkbox-hover-indicator-hover-stroke);
  }
}
.ams-checkbox__input:disabled:indeterminate + * .ams-checkbox__rectangle {
  fill: var(--ams-checkbox-rectangle-indeterminate-disabled-fill);
}
@media (forced-colors: active) {
  .ams-checkbox__input:disabled:indeterminate + * .ams-checkbox__rectangle {
    fill: GrayText;
    stroke: GrayText;
  }
}
.ams-checkbox__input:disabled:checked + * .ams-checkbox__rectangle {
  fill: var(--ams-checkbox-rectangle-checked-disabled-fill);
}
@media (forced-colors: active) {
  .ams-checkbox__input:disabled:checked + * .ams-checkbox__rectangle {
    fill: GrayText;
    stroke: GrayText;
  }
}
:is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid=true]):not(:disabled) + * .ams-checkbox__rectangle {
  stroke: var(--ams-checkbox-rectangle-invalid-stroke);
}
@media (forced-colors: active) {
  :is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid=true]):not(:disabled) + * .ams-checkbox__rectangle {
    fill: ActiveText;
    stroke: ActiveText;
  }
}
:is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid=true]):indeterminate:not(:disabled) + * .ams-checkbox__rectangle {
  fill: var(--ams-checkbox-rectangle-indeterminate-invalid-fill);
}
@media (forced-colors: active) {
  :is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid=true]):indeterminate:not(:disabled) + * .ams-checkbox__rectangle {
    fill: ActiveText;
    stroke: ActiveText;
  }
}
:is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid=true]):checked:not(:disabled) + * .ams-checkbox__rectangle {
  fill: var(--ams-checkbox-rectangle-checked-invalid-fill);
}
@media (forced-colors: active) {
  :is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid=true]):checked:not(:disabled) + * .ams-checkbox__rectangle {
    fill: ActiveText;
    stroke: ActiveText;
  }
}
.ams-checkbox__input:indeterminate:not(:disabled) + *:hover .ams-checkbox__rectangle {
  fill: var(--ams-checkbox-rectangle-indeterminate-hover-fill);
}
@media (forced-colors: active) {
  .ams-checkbox__input:indeterminate:not(:disabled) + *:hover .ams-checkbox__rectangle {
    fill: ActiveText;
    stroke: ActiveText;
  }
}
.ams-checkbox__input:checked:not(:disabled, :indeterminate) + *:hover .ams-checkbox__rectangle {
  fill: var(--ams-checkbox-rectangle-checked-hover-fill);
}
@media (forced-colors: active) {
  .ams-checkbox__input:checked:not(:disabled, :indeterminate) + *:hover .ams-checkbox__rectangle {
    fill: ActiveText;
    stroke: ActiveText;
  }
}
:is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid=true]):not(:disabled) + *:hover .ams-checkbox__rectangle {
  stroke: var(--ams-checkbox-rectangle-invalid-hover-stroke);
}
@media (forced-colors: none) {
  :is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid=true]):not(:disabled) + *:hover .ams-checkbox__hover-indicator {
    stroke: var(--ams-checkbox-hover-indicator-invalid-hover-stroke);
  }
}
:is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid=true]):indeterminate:not(:disabled) + *:hover .ams-checkbox__rectangle {
  fill: var(--ams-checkbox-rectangle-indeterminate-invalid-hover-fill);
}
@media (forced-colors: active) {
  :is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid=true]):indeterminate:not(:disabled) + *:hover .ams-checkbox__rectangle {
    fill: ActiveText;
    stroke: ActiveText;
  }
}
:is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid=true]):checked:not(:disabled) + *:hover .ams-checkbox__rectangle {
  fill: var(--ams-checkbox-rectangle-checked-invalid-hover-fill);
}
@media (forced-colors: active) {
  :is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid=true]):checked:not(:disabled) + *:hover .ams-checkbox__rectangle {
    fill: ActiveText;
    stroke: ActiveText;
  }
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-column {
  display: flex;
  flex-direction: column;
  gap: var(--ams-column-gap-medium);
}

.ams-column--gap-x-small {
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  gap: var(--ams-column-gap-x-small);
}

.ams-column--gap-small {
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  gap: var(--ams-column-gap-small);
}

.ams-column--gap-large {
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  gap: var(--ams-column-gap-large);
}

.ams-column--gap-x-large {
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  gap: var(--ams-column-gap-x-large);
}

.ams-column--gap-none {
  gap: 0;
}

.ams-column--align-around {
  justify-content: space-around;
}

.ams-column--align-between {
  justify-content: space-between;
}

.ams-column--align-center {
  justify-content: center;
}

.ams-column--align-end {
  justify-content: flex-end;
}

.ams-column--align-evenly {
  justify-content: space-evenly;
}

.ams-column--align-horizontal-center {
  align-items: center;
}

.ams-column--align-horizontal-end {
  align-items: flex-end;
}

.ams-column--align-horizontal-start {
  align-items: flex-start;
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-date-input {
  background-color: var(--ams-date-input-background-color);
  border-color: var(--ams-date-input-border-color);
  border-style: var(--ams-date-input-border-style);
  border-width: var(--ams-date-input-border-width);
  box-sizing: border-box;
  color: var(--ams-date-input-color);
  font-family: var(--ams-date-input-font-family);
  font-size: var(--ams-date-input-font-size);
  font-weight: var(--ams-date-input-font-weight);
  line-height: var(--ams-date-input-line-height);
  min-block-size: calc(var(--ams-date-input-font-size) * var(--ams-date-input-line-height) + 2 * var(--ams-date-input-padding-block));
  min-inline-size: calc(8ch + 2 * var(--ams-date-input-padding-inline));
  outline-offset: var(--ams-date-input-outline-offset);
  padding-block: var(--ams-date-input-padding-block);
  padding-inline: var(--ams-date-input-padding-inline);
  touch-action: manipulation;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  margin-block: 0;
}
.ams-date-input::-webkit-datetime-edit, .ams-date-input::-webkit-datetime-edit-ampm-field, .ams-date-input::-webkit-datetime-edit-day-field, .ams-date-input::-webkit-datetime-edit-fields-wrapper, .ams-date-input::-webkit-datetime-edit-hour-field, .ams-date-input::-webkit-datetime-edit-millisecond-field, .ams-date-input::-webkit-datetime-edit-minute-field, .ams-date-input::-webkit-datetime-edit-month-field, .ams-date-input::-webkit-datetime-edit-second-field, .ams-date-input::-webkit-datetime-edit-week-field, .ams-date-input::-webkit-datetime-edit-year-field {
  padding-block: 0;
}

.ams-date-input::-webkit-calendar-picker-indicator {
  appearance: none;
  background-image: var(--ams-date-input-calendar-picker-indicator-background-image);
  cursor: var(--ams-date-input-calendar-picker-indicator-cursor);
}

.ams-date-input:hover::-webkit-calendar-picker-indicator {
  background-image: var(--ams-date-input-hover-calendar-picker-indicator-background-image);
}

.ams-date-input:disabled {
  color: var(--ams-date-input-disabled-color);
  cursor: var(--ams-date-input-disabled-cursor);
}

.ams-date-input:disabled::-webkit-calendar-picker-indicator {
  background-image: var(--ams-date-input-disabled-calendar-picker-indicator-background-image);
  visibility: visible;
}

.ams-date-input:not(:disabled):invalid,
.ams-date-input:not(:disabled)[aria-invalid=true] {
  border-color: var(--ams-date-input-invalid-border-color);
}

.ams-date-input:not(:disabled):hover {
  box-shadow: var(--ams-date-input-hover-box-shadow);
}

.ams-date-input:not(:disabled):invalid:hover,
.ams-date-input:not(:disabled)[aria-invalid=true]:hover {
  border-color: var(--ams-date-input-invalid-hover-border-color);
  box-shadow: var(--ams-date-input-invalid-hover-box-shadow);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-description-list {
  box-sizing: border-box;
  color: var(--ams-description-list-color);
  column-gap: var(--ams-description-list-column-gap);
  display: grid;
  font-family: var(--ams-description-list-font-family);
  font-size: var(--ams-description-list-font-size);
  line-height: var(--ams-description-list-line-height);
  row-gap: var(--ams-description-list-row-gap);
  margin-block: 0;
  /* These CSS declarations have a fallback, so it's safe to use them. */
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
}

@media screen and (min-width: 37.5rem) {
  .ams-description-list,
  .ams-description-list__section {
    grid-template-columns: auto 1fr;
  }
  .ams-description-list--narrow,
  .ams-description-list--narrow .ams-description-list__section {
    grid-template-columns: var(--ams-description-list-narrow-grid-template-columns);
  }
  .ams-description-list--medium,
  .ams-description-list--medium .ams-description-list__section {
    grid-template-columns: var(--ams-description-list-medium-grid-template-columns);
  }
  .ams-description-list--wide,
  .ams-description-list--wide .ams-description-list__section {
    grid-template-columns: var(--ams-description-list-wide-grid-template-columns);
  }
}
.ams-description-list--inverse {
  color: var(--ams-description-list-inverse-color);
}

.ams-description-list__term {
  font-weight: var(--ams-description-list-term-font-weight);
}
@media screen and (min-width: 37.5rem) {
  .ams-description-list__term {
    grid-column-start: 1;
  }
}

@media screen and (min-width: 37.5rem) {
  .ams-description-list__section {
    column-gap: var(--ams-description-list-column-gap);
    display: grid;
    grid-column: span 2;
  }
  .ams-description-list__section > :only-of-type {
    grid-row: 1/9;
  }
}

.ams-description-list__description {
  font-weight: var(--ams-description-list-description-font-weight);
  padding-inline-start: var(--ams-description-list-description-padding-inline-start);
  margin-inline: 0;
}
@media screen and (min-width: 37.5rem) {
  .ams-description-list__description {
    grid-column-start: 2;
    padding-inline-start: 0;
  }
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
/* A dialog must have `display: none` until the `open` attribute is set,
so do not apply these styles without an `open` attribute. */
.ams-dialog:not(dialog:not([open])) {
  background-color: var(--ams-dialog-background-color);
  border-color: var(--ams-dialog-border-color);
  border-style: var(--ams-dialog-border-style);
  border-width: var(--ams-dialog-border-width);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--ams-dialog-gap);
  inline-size: var(--ams-dialog-inline-size);
  max-block-size: var(--ams-dialog-max-block-size);
  max-inline-size: var(--ams-dialog-max-inline-size);
  inset-block: 0;
  padding-block: 0;
  padding-inline: 0;
}
@media screen and (min-width: 37.5rem) {
  .ams-dialog:not(dialog:not([open])) {
    inline-size: var(--ams-dialog-medium-inline-size);
    max-block-size: var(--ams-dialog-medium-max-block-size);
  }
}
.ams-dialog:not(dialog:not([open])) {
  /*
   * The fallback value is for browsers where ::backdrop does not inherit from its originating element.
   * @see https://caniuse.com/mdn-css_selectors_backdrop_inherit_from_originating_element
   */
}
.ams-dialog:not(dialog:not([open]))::backdrop {
  background: var(--ams-dialog-backdrop-background-color, rgba(24, 24, 24, 0.625));
}

.ams-dialog__header {
  align-items: flex-start;
  display: flex;
  gap: var(--ams-dialog-header-gap);
  justify-content: space-between;
  padding-block: var(--ams-dialog-header-padding-block);
  padding-inline: var(--ams-dialog-header-padding-inline);
}
@media screen and (min-width: 37.5rem) {
  .ams-dialog__header {
    padding-block: var(--ams-dialog-header-medium-padding-block);
    padding-inline: var(--ams-dialog-header-medium-padding-inline);
  }
}

.ams-dialog__body {
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding-block: var(--ams-dialog-body-padding-block);
  padding-inline: var(--ams-dialog-body-padding-inline);
}
@media screen and (min-width: 37.5rem) {
  .ams-dialog__body {
    padding-inline: var(--ams-dialog-body-medium-padding-inline);
  }
}

.ams-dialog__footer {
  padding-block: var(--ams-dialog-footer-padding-block);
  padding-inline: var(--ams-dialog-footer-padding-inline);
}
@media screen and (min-width: 37.5rem) {
  .ams-dialog__footer {
    padding-block: var(--ams-dialog-footer-medium-padding-block);
    padding-inline: var(--ams-dialog-footer-medium-padding-inline);
  }
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-body {
  margin-block: 0;
  margin-inline: 0;
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-error-message {
  box-sizing: border-box;
  color: var(--ams-error-message-color);
  display: inline-flex;
  font-family: var(--ams-error-message-font-family);
  font-size: var(--ams-error-message-font-size);
  font-weight: var(--ams-error-message-font-weight);
  gap: var(--ams-error-message-gap);
  line-height: var(--ams-error-message-line-height);
  /* These CSS declarations have a fallback, so it's safe to use them. */
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
  margin-block: 0;
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-field-set {
  break-inside: avoid;
  border: none;
  margin-inline: 0;
  padding-block: 0;
  padding-inline: 0;
}

.ams-field-set--invalid {
  border-inline-start: var(--ams-field-set-invalid-border-inline-start);
  padding-inline-start: var(--ams-field-set-invalid-padding-inline-start);
}

.ams-field-set__legend {
  color: var(--ams-field-set-legend-color);
  font-family: var(--ams-field-set-legend-font-family);
  font-size: var(--ams-field-set-legend-font-size);
  font-weight: var(--ams-field-set-legend-font-weight);
  line-height: var(--ams-field-set-legend-line-height);
  margin-block-end: var(--ams-field-set-legend-margin-block-end);
  /*
   * If text-wrap is not supported, it is ignored.
   * This means the wrapped text will look less balanced, which is fine.
   */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-wrap: var(--ams-field-set-legend-text-wrap);
  /* These CSS declarations have a fallback, so it's safe to use them. */
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
  /* stylelint-disable-next-line csstools/use-logical */
  float: left;
  inline-size: 100%;
  padding-inline: 0;
}
.ams-field-set__legend + * {
  clear: both;
}

.ams-field-set__heading {
  font-size: inherit;
  font-weight: inherit;
  margin-block: 0;
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-field {
  align-items: start;
  break-inside: avoid;
  display: flex;
  flex-direction: column;
  gap: var(--ams-field-gap);
}

.ams-field--invalid {
  border-inline-start: var(--ams-field-invalid-border-inline-start);
  padding-inline-start: var(--ams-field-invalid-padding-inline-start);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-figure {
  display: flex;
  flex-direction: column;
  gap: var(--ams-figure-gap);
  margin-block: 0;
  margin-inline: 0;
}

.ams-figure__caption {
  color: var(--ams-figure-caption-color);
  font-family: var(--ams-figure-caption-font-family);
  font-size: var(--ams-figure-caption-font-size);
  font-weight: var(--ams-figure-caption-font-weight);
  line-height: var(--ams-figure-caption-line-height);
  /* These CSS declarations have a fallback, so it's safe to use them. */
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
}

.ams-figure__caption--inverse {
  color: var(--ams-figure-caption-inverse-color);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-file-input {
  background-color: var(--ams-file-input-background-color);
  border-color: var(--ams-file-input-border-color);
  border-style: var(--ams-file-input-border-style);
  border-width: var(--ams-file-input-border-width);
  box-sizing: border-box;
  color: var(--ams-file-input-color);
  cursor: var(--ams-file-input-cursor);
  font-family: var(--ams-file-input-font-family);
  font-size: var(--ams-file-input-font-size);
  font-weight: var(--ams-file-input-font-weight);
  inline-size: 100%;
  line-height: var(--ams-file-input-line-height);
  outline-offset: var(--ams-file-input-outline-offset);
  padding-block: var(--ams-file-input-padding-block);
  padding-inline: var(--ams-file-input-padding-inline);
  touch-action: manipulation;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
}

.ams-file-input:disabled {
  color: var(--ams-file-input-disabled-color);
  cursor: var(--ams-file-input-disabled-cursor);
}

.ams-file-input::file-selector-button {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--ams-file-input-file-selector-button-background-color);
  border-color: var(--ams-file-input-file-selector-button-border-color);
  border-style: var(--ams-file-input-file-selector-button-border-style);
  border-width: var(--ams-file-input-file-selector-button-border-width);
  box-sizing: border-box;
  color: var(--ams-file-input-file-selector-button-color);
  cursor: var(--ams-file-input-file-selector-button-cursor);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: var(--ams-file-input-file-selector-button-line-height);
  margin-inline-end: var(--ams-file-input-file-selector-button-margin-inline-end);
  padding-block: var(--ams-file-input-file-selector-button-padding-block);
  padding-inline: var(--ams-file-input-file-selector-button-padding-inline);
  border-radius: 0;
}

.ams-file-input:disabled::file-selector-button {
  color: var(--ams-file-input-disabled-color);
  cursor: var(--ams-file-input-file-selector-button-disabled-cursor);
}

.ams-file-input:not(:disabled):hover::file-selector-button {
  box-shadow: var(--ams-file-input-file-selector-button-hover-box-shadow);
  color: var(--ams-file-input-file-selector-button-hover-color);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-file-list {
  display: flex;
  flex-direction: column;
  gap: var(--ams-file-list-gap);
  padding-block: var(--ams-file-list-padding-block);
  /* These CSS declarations have a fallback, so it's safe to use them. */
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
  list-style: none;
  margin-block: 0;
  padding-inline: 0;
}

.ams-file-list__item {
  display: flex;
  font-family: var(--ams-file-list-file-font-family);
  font-size: var(--ams-file-list-file-font-size);
  font-weight: var(--ams-file-list-file-font-weight);
  gap: var(--ams-file-list-file-gap);
  line-height: var(--ams-file-list-file-line-height);
}

.ams-file-list__item-preview {
  display: grid;
  flex: 0 0 var(--ams-file-list-file-preview-width);
  place-items: center;
}
.ams-file-list__item-preview img {
  inline-size: 100%;
  min-block-size: auto;
}

.ams-file-list__item-info {
  flex: 1;
  gap: var(--ams-file-list-file-gap);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ams-file-input__item-details {
  color: var(--ams-file-list-file-details-color);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-gap-xs {
  display: grid !important;
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  gap: var(--ams-space-xs) !important;
}

.ams-gap-s {
  display: grid !important;
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  gap: var(--ams-space-s) !important;
}

.ams-gap-m {
  display: grid !important;
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  gap: var(--ams-space-m) !important;
}

.ams-gap-l {
  display: grid !important;
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  gap: var(--ams-space-l) !important;
}

.ams-gap-xl {
  display: grid !important;
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  gap: var(--ams-space-xl) !important;
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-heading {
  box-sizing: border-box;
  /*
   * If break-after is supported, use it to avoid a Heading from being the last item on a page when printed.
   * If it is not supported, it is ignored.
   */
  /* stylelint-disable-next-line plugin/use-baseline */
  break-after: avoid;
  break-inside: avoid;
  color: var(--ams-heading-color);
  font-family: var(--ams-heading-font-family);
  font-weight: var(--ams-heading-font-weight);
  /*
   * If text-wrap is not supported, it is ignored.
   * This means the wrapped text will look less balanced, which is fine.
   */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-wrap: var(--ams-heading-text-wrap);
  /* These CSS declarations have a fallback, so it's safe to use them. */
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
  margin-block: 0;
}

.ams-heading--1 {
  font-size: var(--ams-heading-1-font-size);
  line-height: var(--ams-heading-1-line-height);
}

.ams-heading--2 {
  font-size: var(--ams-heading-2-font-size);
  line-height: var(--ams-heading-2-line-height);
}

.ams-heading--3 {
  font-size: var(--ams-heading-3-font-size);
  line-height: var(--ams-heading-3-line-height);
}

.ams-heading--4 {
  font-size: var(--ams-heading-4-font-size);
  line-height: var(--ams-heading-4-line-height);
}

.ams-heading--5 {
  font-size: var(--ams-heading-5-font-size);
  line-height: var(--ams-heading-5-line-height);
}

.ams-heading--6 {
  font-size: var(--ams-heading-6-font-size);
  line-height: var(--ams-heading-6-line-height);
}

.ams-heading--inverse {
  color: var(--ams-heading-inverse-color);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-hint {
  display: inline-block;
  font-weight: var(--ams-hint-font-weight);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-icon-button {
  background-color: transparent;
  color: var(--ams-icon-button-color);
  cursor: var(--ams-icon-button-cursor);
  display: inline-flex;
  outline-offset: var(--ams-icon-button-outline-offset);
  touch-action: manipulation;
  border: none;
  margin-block: 0;
  margin-inline: 0;
  padding-block: 0;
  padding-inline: 0;
}
.ams-icon-button:hover {
  background-color: var(--ams-icon-button-hover-background-color);
  color: var(--ams-icon-button-hover-color);
}
.ams-icon-button:disabled {
  background-color: transparent;
  color: var(--ams-icon-button-disabled-color);
  cursor: var(--ams-icon-button-disabled-cursor);
}

.ams-icon-button--contrast {
  color: var(--ams-icon-button-contrast-color);
}
.ams-icon-button--contrast:hover {
  background-color: var(--ams-icon-button-contrast-hover-background-color);
  color: var(--ams-icon-button-contrast-hover-color);
}
.ams-icon-button--contrast:disabled {
  background-color: transparent;
  color: var(--ams-icon-button-contrast-disabled-color);
}

.ams-icon-button--inverse {
  background-color: var(--ams-icon-button-inverse-background-color);
  color: var(--ams-icon-button-inverse-color);
}
.ams-icon-button--inverse:hover {
  background-color: var(--ams-icon-button-inverse-hover-background-color);
  color: var(--ams-icon-button-inverse-hover-color);
}
.ams-icon-button--inverse:disabled {
  background-color: var(--ams-icon-button-inverse-disabled-background-color);
  color: var(--ams-icon-button-inverse-disabled-color);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-icon {
  --ams-line-height: var(--ams-icon-line-height);
  align-items: center;
  align-self: baseline;
  display: inline-flex;
  font-size: var(--ams-icon-font-size);
  line-height: var(--ams-line-height);
}
.ams-icon::after {
  content: "​";
}
.ams-icon svg {
  fill: currentColor;
  inline-size: 1em;
}

.ams-icon--inverse {
  color: var(--ams-icon-inverse-color);
}

.ams-icon--square {
  inline-size: calc(1em * var(--ams-line-height));
  justify-content: center;
}

.ams-icon--small {
  --ams-line-height: var(--ams-icon-small-line-height);
  font-size: var(--ams-icon-small-font-size);
}

.ams-icon--large {
  --ams-line-height: var(--ams-icon-large-line-height);
  font-size: var(--ams-icon-large-font-size);
}

.ams-icon--heading-1 {
  --ams-line-height: var(--ams-icon-heading-1-line-height);
  font-size: var(--ams-icon-heading-1-font-size);
  line-height: var(--ams-icon-heading-1-line-height);
}

.ams-icon--heading-2 {
  --ams-line-height: var(--ams-icon-heading-2-line-height);
  font-size: var(--ams-icon-heading-2-font-size);
  line-height: var(--ams-icon-heading-2-line-height);
}

.ams-icon--heading-3 {
  --ams-line-height: var(--ams-icon-heading-3-line-height);
  font-size: var(--ams-icon-heading-3-font-size);
  line-height: var(--ams-icon-heading-3-line-height);
}

.ams-icon--heading-4 {
  --ams-line-height: var(--ams-icon-heading-4-line-height);
  font-size: var(--ams-icon-heading-4-font-size);
  line-height: var(--ams-icon-heading-4-line-height);
}

.ams-icon--heading-5 {
  --ams-line-height: var(--ams-icon-heading-5-line-height);
  font-size: var(--ams-icon-heading-5-font-size);
  line-height: var(--ams-icon-heading-5-line-height);
}

.ams-icon--heading-6 {
  --ams-line-height: var(--ams-icon-heading-6-line-height);
  font-size: var(--ams-icon-heading-6-font-size);
  line-height: var(--ams-icon-heading-6-line-height);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-icon--heading-0 {
  --ams-line-height: var(--ams-icon-heading-0-line-height);
  font-size: var(--ams-icon-heading-0-font-size);
  line-height: var(--ams-icon-heading-0-line-height);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-image-slider {
  display: grid;
  gap: var(--ams-image-slider-gap);
  grid-template-rows: 1fr auto;
}

.ams-image-slider__item {
  scroll-snap-align: center;
  scroll-snap-stop: always;
  /** temporary fix for covering the entire gallery */
}
.ams-image-slider__item .ams-image {
  inline-size: 100%;
}

.ams-image-slider__scroller {
  align-items: center;
  display: grid;
  gap: var(--ams-image-slider-scroller-gap);
  grid-auto-columns: 100%;
  grid-auto-flow: column;
  grid-column: 1/-1;
  grid-row: 1;
  outline-offset: var(--ams-image-slider-scroller-outline-offset);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /*
   * Required for the goToSlide function to work properly.
   * Ensures that the offset of the slides is calculated relative to the scroller container.
   */
  position: relative;
  scroll-snap-type: x mandatory;
  /*
   * Hide the scrollbar in Firefox.
   * Firefox has full support for this property.
   */
  /* stylelint-disable-next-line plugin/use-baseline */
  scrollbar-width: none;
}
.ams-image-slider__scroller::-webkit-scrollbar {
  display: none;
}
@media not (prefers-reduced-motion) {
  .ams-image-slider__scroller {
    scroll-behavior: smooth;
  }
}

.ams-image-slider__controls {
  display: flex;
  grid-column: 1/-1;
  grid-row: 1;
  justify-content: space-between;
}
@media (pointer: coarse) and (max-width: 37.5rem) {
  .ams-image-slider__controls {
    display: none;
  }
}

.ams-image-slider__control {
  place-self: center;
  z-index: 1;
}

.ams-image-slider__thumbnails {
  display: grid;
  gap: var(--ams-image-slider-thumbnails-gap);
  grid-template-columns: repeat(5, 1fr);
  max-inline-size: 100%;
}

.ams-image-slider__thumbnail {
  aspect-ratio: var(--ams-image-aspect-ratio);
  background-color: var(--ams-image-slider-thumbnails-thumbnail-background-color);
  background-position: center;
  background-size: cover;
  cursor: var(--ams-image-slider-thumbnails-thumbnail-cursor);
  opacity: var(--ams-image-slider-thumbnails-thumbnail-opacity);
  outline-offset: var(--ams-button-outline-offset);
  position: relative;
  scroll-snap-align: start;
  border: none;
  border-radius: 0;
  padding-block: 0;
  padding-inline: 0;
}
.ams-image-slider__thumbnail:hover {
  opacity: var(--ams-image-slider-thumbnails-thumbnail-hover-opacity);
}

.ams-image-slider__thumbnail--in-view {
  opacity: var(--ams-image-slider-thumbnails-thumbnail-in-view-opacity);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-image {
  aspect-ratio: var(--ams-image-aspect-ratio);
  block-size: auto; /* [1] */
  font-style: italic; /* [3] */
  inline-size: 100%; /* [1] */
  object-fit: cover; /* [4] */
  vertical-align: middle; /* [2] */
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-invalid-form-alert {
  outline-offset: var(--ams-invalid-form-alert-outline-offset);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-label {
  color: var(--ams-label-color);
  font-family: var(--ams-label-font-family);
  font-size: var(--ams-label-font-size);
  font-weight: var(--ams-label-font-weight);
  line-height: var(--ams-label-line-height);
  /*
   * If text-wrap is not supported, it is ignored.
   * This means the wrapped text will look less balanced, which is fine.
   */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-wrap: var(--ams-label-text-wrap);
  /* These CSS declarations have a fallback, so it's safe to use them. */
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
}

.ams-label__heading {
  font-size: var(--ams-label-font-size);
  font-weight: var(--ams-label-font-weight);
  margin-block: 0;
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-link-list {
  box-sizing: border-box;
  display: grid;
  gap: var(--ams-link-list-gap);
  /* These CSS declarations have a fallback, so it's safe to use them. */
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
  list-style: none;
  margin-block: 0;
  padding-inline-start: 0;
}

.ams-link-list__link {
  align-items: flex-start;
  color: var(--ams-link-list-link-color);
  display: inline-flex;
  font-family: var(--ams-link-list-link-font-family);
  font-size: var(--ams-link-list-link-font-size);
  font-weight: var(--ams-link-list-link-font-weight);
  gap: var(--ams-link-list-link-gap);
  line-height: var(--ams-link-list-link-line-height);
  outline-offset: var(--ams-link-list-link-outline-offset);
  text-decoration-line: var(--ams-link-list-link-text-decoration-line);
  text-decoration-thickness: var(--ams-link-list-link-text-decoration-thickness);
  text-underline-offset: var(--ams-link-list-link-text-underline-offset);
}
.ams-link-list__link:hover {
  color: var(--ams-link-list-link-hover-color);
  text-decoration-line: var(--ams-link-list-link-hover-text-decoration-line);
}

.ams-link-list__link--small {
  font-size: var(--ams-link-list-link-small-font-size);
  line-height: var(--ams-link-list-link-small-line-height);
}

.ams-link-list__link--large {
  font-size: var(--ams-link-list-link-large-font-size);
  line-height: var(--ams-link-list-link-large-line-height);
}

.ams-link-list__link--contrast {
  color: var(--ams-link-list-link-contrast-color);
}
.ams-link-list__link--contrast:hover {
  color: var(--ams-link-list-link-contrast-hover-color);
}

.ams-link-list__link--inverse {
  color: var(--ams-link-list-link-inverse-color);
}
.ams-link-list__link--inverse:hover {
  color: var(--ams-link-list-link-inverse-hover-color);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-link {
  color: var(--ams-link-color);
  font-family: var(--ams-link-font-family);
  font-size: var(--ams-link-font-size);
  font-weight: var(--ams-link-font-weight);
  line-height: var(--ams-link-line-height);
  outline-offset: var(--ams-link-outline-offset);
  text-decoration-thickness: var(--ams-link-text-decoration-thickness);
  text-underline-offset: var(--ams-link-text-underline-offset);
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
}
.ams-link:hover {
  color: var(--ams-link-hover-color);
  text-decoration-thickness: var(--ams-link-hover-text-decoration-thickness);
  text-underline-offset: var(--ams-link-hover-text-underline-offset);
}

.ams-link--contrast {
  color: var(--ams-link-contrast-color);
}
.ams-link--contrast:hover {
  color: var(--ams-link-contrast-hover-color);
}

.ams-link--inverse {
  color: var(--ams-link-inverse-color);
}
.ams-link--inverse:hover {
  color: var(--ams-link-inverse-hover-color);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-logo {
  block-size: var(--ams-logo-block-size);
  display: block;
  min-block-size: var(--ams-logo-min-block-size);
}

.ams-logo__emblem {
  fill: var(--ams-logo-emblem-color);
}

.ams-logo__text-primary {
  fill: var(--ams-logo-title-color);
}

.ams-logo__text-secondary {
  fill: var(--ams-logo-subsite-color);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-mb-xs {
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  margin-block-end: var(--ams-space-xs) !important;
}

.ams-mb-s {
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  margin-block-end: var(--ams-space-s) !important;
}

.ams-mb-m {
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  margin-block-end: var(--ams-space-m) !important;
}

.ams-mb-l {
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  margin-block-end: var(--ams-space-l) !important;
}

.ams-mb-xl {
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  margin-block-end: var(--ams-space-xl) !important;
}

.ams-mb-2xl {
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  margin-block-end: var(--ams-space-2xl) !important;
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-mark {
  background-color: var(--ams-mark-background-color);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-menu {
  background-color: var(--ams-menu-background-color);
  font-family: var(--ams-menu-font-family);
  font-size: var(--ams-menu-font-size);
  font-weight: var(--ams-menu-font-weight);
  line-height: var(--ams-menu-line-height);
  margin-inline: calc(var(--ams-grid-padding-inline) * -1);
  padding-block: var(--ams-menu-padding-block);
  padding-inline: calc(var(--ams-grid-padding-inline) - var(--ams-menu-link-padding-inline));
}
@media screen and (min-width: 37.5rem) {
  .ams-menu {
    margin-inline: calc(var(--ams-grid-medium-padding-inline) * -1);
    padding-inline: var(--ams-grid-medium-padding-inline);
  }
}
@media screen and (min-width: 72.5rem) {
  .ams-menu {
    display: none;
    margin-inline: 0;
    max-inline-size: var(--ams-menu-wide-max-inline-size);
    padding-block: var(--ams-menu-wide-padding-block);
    padding-inline: var(--ams-menu-wide-padding-inline);
  }
}

.ams-menu--in-wide-window {
  display: none;
}
@media screen and (min-width: 72.5rem) {
  .ams-menu--in-wide-window {
    display: block;
  }
}

.ams-menu__list {
  display: grid;
  /* These CSS declarations have a fallback, so it's safe to use them. */
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
  list-style: none;
  margin-block: 0;
  padding-inline-start: 0;
}
@media screen and (min-width: 72.5rem) {
  .ams-menu__list {
    gap: var(--ams-menu-list-gap);
  }
}

.ams-menu__link {
  align-items: flex-start;
  color: var(--ams-menu-link-color);
  display: inline-flex;
  gap: var(--ams-menu-link-gap);
  outline-offset: var(--ams-menu-link-outline-offset);
  padding-block: var(--ams-menu-link-padding-block);
  padding-inline: var(--ams-menu-link-padding-inline);
  text-decoration-line: var(--ams-menu-link-text-decoration-line);
  text-decoration-thickness: var(--ams-menu-link-text-decoration-thickness);
  text-underline-offset: var(--ams-menu-link-text-underline-offset);
}
.ams-menu__link:hover {
  color: var(--ams-menu-link-hover-color);
  text-decoration-line: var(--ams-menu-link-hover-text-decoration-line);
}
.ams-menu__link .ams-menu__icon {
  align-self: initial;
}
@media screen and (min-width: 72.5rem) {
  .ams-menu__link {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--ams-menu-link-wide-gap);
    text-align: center;
  }
  .ams-menu__link .ams-menu__icon {
    --ams-icon-font-size: var(--ams-icon-heading-2-font-size);
    --ams-icon-line-height: var(--ams-icon-heading-2-line-height);
  }
}

/** @deprecated The menu has a dark background now, so this is no longer needed. */
.ams-menu__link--contrast {
  color: var(--ams-menu-link-contrast-color);
}
.ams-menu__link--contrast:hover {
  color: var(--ams-menu-link-contrast-hover-color);
}

/** @deprecated The menu has a dark background now, so this is no longer needed. */
.ams-menu__link--inverse {
  color: var(--ams-menu-link-inverse-color);
}
.ams-menu__link--inverse:hover {
  color: var(--ams-menu-link-inverse-hover-color);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-ordered-list {
  box-sizing: border-box;
  display: grid;
  gap: var(--ams-ordered-list-gap);
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
  /* These CSS declarations have a fallback, so it's safe to use them. */
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphens: auto;
  overflow-wrap: break-word;
  list-style-type: none;
  margin-block: 0;
  padding-inline-start: 0;
}

.ams-ordered-list:not(.ams-ordered-list--no-markers) {
  color: var(--ams-ordered-list-color);
  font-family: var(--ams-ordered-list-font-family);
  font-size: var(--ams-ordered-list-font-size);
  font-weight: var(--ams-ordered-list-font-weight);
  line-height: var(--ams-ordered-list-line-height);
  list-style-type: var(--ams-ordered-list-list-style-type);
}
.ams-ordered-list:not(.ams-ordered-list--no-markers) .ams-ordered-list__item {
  margin-inline-start: var(--ams-ordered-list-item-margin-inline-start);
  padding-inline-start: var(--ams-ordered-list-item-padding-inline-start);
}

.ams-ordered-list--inverse:not(.ams-ordered-list--no-markers) {
  color: var(--ams-ordered-list-inverse-color);
}

.ams-ordered-list--small:not(.ams-ordered-list--no-markers) {
  font-size: var(--ams-ordered-list-small-font-size);
  line-height: var(--ams-ordered-list-small-line-height);
}

:is(.ams-ordered-list, .ams-unordered-list) .ams-ordered-list {
  gap: var(--ams-ordered-list-ordered-list-gap);
  list-style-type: var(--ams-ordered-list-ordered-list-list-style-type);
  padding-block-start: var(--ams-ordered-list-ordered-list-padding-block-start);
}
:is(.ams-ordered-list, .ams-unordered-list) .ams-ordered-list .ams-ordered-list__item {
  margin-inline-start: var(--ams-ordered-list-ordered-list-item-margin-inline-start);
  padding-inline-start: var(--ams-ordered-list-ordered-list-item-padding-inline-start);
}
:is(.ams-ordered-list, .ams-unordered-list) > :not(:last-child) > .ams-ordered-list {
  padding-block-end: var(--ams-ordered-list-ordered-list-padding-block-end);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-overlap {
  display: grid;
}
.ams-overlap > * {
  grid-column: 1/-1;
  grid-row: 1/-1;
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-page {
  background-color: var(--ams-page-background-color);
  margin-inline: auto;
  max-inline-size: var(--ams-page-max-inline-size);
  min-block-size: 100vh; /* Fallback for browsers that do not support dvh */
  min-block-size: 100dvh;
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-page-footer__spotlight {
  background-color: var(--ams-page-footer-spotlight-background-color);
}

.ams-page-footer__menu {
  column-gap: var(--ams-page-footer-menu-column-gap);
  display: flex;
  flex-wrap: wrap;
  padding-block: var(--ams-page-footer-menu-padding-block);
  padding-inline: var(--ams-page-footer-menu-padding-inline);
  row-gap: var(--ams-page-footer-menu-row-gap);
  list-style: none;
  margin-block: 0;
}
@media screen and (min-width: 37.5rem) {
  .ams-page-footer__menu {
    padding-inline: var(--ams-page-footer-menu-medium-padding-inline);
  }
}
@media screen and (min-width: 72.5rem) {
  .ams-page-footer__menu {
    padding-inline: var(--ams-page-footer-menu-wide-padding-inline);
  }
}

.ams-page-footer__menu-link {
  color: var(--ams-page-footer-menu-link-color);
  font-family: var(--ams-page-footer-menu-link-font-family);
  font-size: var(--ams-page-footer-menu-link-font-size);
  font-weight: var(--ams-page-footer-menu-link-font-weight);
  line-height: var(--ams-page-footer-menu-link-line-height);
  outline-offset: var(--ams-page-footer-menu-link-outline-offset);
  text-decoration-line: var(--ams-page-footer-menu-link-text-decoration-line);
  text-decoration-thickness: var(--ams-page-footer-menu-link-text-decoration-thickness);
  text-underline-offset: var(--ams-page-footer-menu-link-text-underline-offset);
  /* These CSS declarations have a fallback, so it's safe to use them. */
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
}
.ams-page-footer__menu-link:hover {
  color: var(--ams-page-footer-menu-link-hover-color);
  text-decoration-line: var(--ams-page-footer-menu-link-hover-text-decoration-line);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-page-header {
  /*
  * The logo link section is created twice: once outside the navigation and once hidden inside it.
  * This keeps all navigation in one nav element and lets the menu wrap around the logo link section.
  * Display grid is used to let both logo link sections overlap.
  */
  display: grid;
  font-family: var(--ams-page-header-font-family);
  padding-block: var(--ams-page-header-padding-block);
  padding-inline: var(--ams-page-header-padding-inline);
}
@media screen and (min-width: 37.5rem) {
  .ams-page-header {
    padding-inline: var(--ams-page-header-medium-padding-inline);
  }
}
@media screen and (min-width: 72.5rem) {
  .ams-page-header {
    padding-inline: var(--ams-page-header-wide-padding-inline);
  }
}

.ams-page-header__logo-link {
  align-items: center;
  align-self: start;
  column-gap: var(--ams-page-header-logo-link-column-gap);
  display: flex;
  grid-area: 1/1;
  inline-size: fit-content;
  outline-offset: var(--ams-page-header-logo-link-outline-offset);
  text-decoration: none;
}
@media (forced-colors: active) {
  .ams-page-header__logo-link .ams-logo__emblem,
  .ams-page-header__logo-link .ams-logo__text-primary,
  .ams-page-header__logo-link .ams-logo__text-secondary {
    fill: LinkText;
  }
}

.ams-page-header__logo-link--hidden {
  opacity: 0%;
  -webkit-user-select: none;
  /* Safari support is added with the prefixed property. */
  /* stylelint-disable-next-line plugin/use-baseline */
  user-select: none;
}

.ams-page-header__logo-container {
  flex-shrink: 0;
  inline-size: 0.75rem;
  overflow: hidden;
}
@media screen and (min-width: 37.5rem) {
  .ams-page-header__logo-container {
    inline-size: auto;
  }
}

.ams-page-header__brand-name {
  color: var(--ams-page-header-brand-name-color);
  font-size: var(--ams-page-header-brand-name-font-size);
  font-weight: var(--ams-page-header-brand-name-font-weight);
  line-height: var(--ams-page-header-brand-name-line-height);
  /*
   * If text-wrap is not supported, it is ignored.
   * This means the wrapped text will look less balanced, which is fine.
   */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-wrap: var(--ams-page-header-brand-name-text-wrap);
}

.ams-page-header__navigation {
  column-gap: var(--ams-page-header-navigation-column-gap);
  display: flex;
  flex-wrap: wrap;
  grid-area: 1/1;
  pointer-events: none;
  row-gap: var(--ams-page-header-navigation-row-gap);
}

.ams-page-header__menu {
  align-items: center;
  column-gap: var(--ams-page-header-menu-column-gap);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-inline-start: auto;
  pointer-events: auto;
  row-gap: var(--ams-page-header-menu-row-gap);
  list-style: none;
  margin-block: 0;
  padding-inline-start: 0;
}

@media screen and not (min-width: 72.5rem) {
  .ams-page-header__menu-item {
    display: none;
  }
}

.ams-page-header__menu-item--fixed {
  display: revert;
}

.ams-page-header__menu-link {
  display: inline-block;
  text-decoration-line: var(--ams-page-header-menu-link-text-decoration-line);
  text-decoration-thickness: var(--ams-page-header-menu-link-text-decoration-thickness);
  text-underline-offset: var(--ams-page-header-menu-link-text-underline-offset);
  color: var(--ams-page-header-menu-item-color);
  font-size: var(--ams-page-header-menu-item-font-size);
  font-weight: var(--ams-page-header-menu-item-font-weight);
  line-height: var(--ams-page-header-menu-item-line-height);
  outline-offset: var(--ams-page-header-menu-item-outline-offset);
  padding-block: var(--ams-page-header-menu-item-padding-block);
  touch-action: manipulation;
  white-space: nowrap;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
}
.ams-page-header__menu-link:hover {
  color: var(--ams-page-header-menu-item-hover-color);
}
.ams-page-header__menu-link:hover {
  text-decoration-line: var(--ams-page-header-menu-link-hover-text-decoration-line);
}

@media screen and (min-width: 72.5rem) {
  .ams-page-header__mega-menu-button-item--hide-on-wide-window {
    display: none;
  }
}

.ams-page-header__mega-menu-button {
  column-gap: var(--ams-page-header-menu-item-column-gap);
  cursor: var(--ams-page-header-mega-menu-button-cursor);
  display: grid;
  font-family: inherit;
  grid-auto-flow: column;
  color: var(--ams-page-header-menu-item-color);
  font-size: var(--ams-page-header-menu-item-font-size);
  font-weight: var(--ams-page-header-menu-item-font-weight);
  line-height: var(--ams-page-header-menu-item-line-height);
  outline-offset: var(--ams-page-header-menu-item-outline-offset);
  padding-block: var(--ams-page-header-menu-item-padding-block);
  touch-action: manipulation;
  white-space: nowrap;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
}
.ams-page-header__mega-menu-button:hover {
  color: var(--ams-page-header-menu-item-hover-color);
}
.ams-page-header__mega-menu-button {
  background: none;
  border: none;
  margin-block: 0;
  margin-inline: 0;
  padding-inline: 0;
}

.ams-page-header__mega-menu-button[aria-expanded=true] {
  font-weight: var(--ams-page-header-mega-menu-button-label-open-font-weight);
}

.ams-page-header__mega-menu-button-label,
.ams-page-header__mega-menu-button-hidden-label {
  grid-area: 1/1;
}

.ams-page-header__mega-menu-button-hidden-label {
  font-weight: var(--ams-page-header-mega-menu-button-label-open-font-weight);
  pointer-events: none;
  -webkit-user-select: none;
  /* Safari support is added with the prefixed property. */
  /* stylelint-disable-next-line plugin/use-baseline */
  user-select: none;
  visibility: hidden;
}

.ams-page-header__menu-icon line {
  stroke: currentColor;
  stroke-width: 3px;
  transform-origin: center;
  transition: translate 0.1s ease-in-out, rotate 0.2s ease-in-out, opacity 0.1s ease-in-out;
}
@media (prefers-reduced-motion) {
  .ams-page-header__menu-icon line {
    transition: none;
  }
}
.ams-page-header__menu-icon .ams-page-header__menu-icon-top {
  translate: 0 -7px;
}
.ams-page-header__menu-icon .ams-page-header__menu-icon-bottom {
  translate: 0 7px;
}

.ams-page-header__menu-icon--open .ams-page-header__menu-icon-top {
  rotate: 45deg;
  translate: 0;
}
.ams-page-header__menu-icon--open .ams-page-header__menu-icon-middle {
  opacity: 0%;
}
.ams-page-header__menu-icon--open .ams-page-header__menu-icon-bottom {
  rotate: -45deg;
  translate: 0;
}

.ams-page-header__mega-menu {
  inline-size: 100%;
  pointer-events: auto;
}
.ams-page-header__mega-menu .ams-grid {
  padding-inline: 0;
}

.ams-page-header__mega-menu--closed.ams-page-header__mega-menu--closed {
  display: none;
}

@media screen and (min-width: 72.5rem) {
  .ams-page-header__grid-cell-narrow-window-only {
    display: none;
  }
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
/* @deprecated We no longer use this size of headings. Use `.ams-heading.ams-heading--1` instead. */
.ams-page-heading {
  box-sizing: border-box;
  /* stylelint-disable-next-line plugin/use-baseline */
  break-after: avoid;
  break-inside: avoid;
  color: var(--ams-page-heading-color);
  font-family: var(--ams-page-heading-font-family);
  font-size: var(--ams-page-heading-font-size);
  font-weight: var(--ams-page-heading-font-weight);
  line-height: var(--ams-page-heading-line-height);
  /* stylelint-disable-next-line plugin/use-baseline */
  text-wrap: var(--ams-page-heading-text-wrap);
  /* These CSS declarations have a fallback, so it's safe to use them. */
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
  margin-block: 0;
}

.ams-page-heading--inverse {
  color: var(--ams-page-heading-inverse-color);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-pagination {
  display: flex;
  flex-wrap: wrap;
  font-family: var(--ams-pagination-font-family);
  font-size: var(--ams-pagination-font-size);
  font-weight: var(--ams-pagination-font-weight);
  justify-content: center;
  line-height: var(--ams-pagination-line-height);
}

.ams-pagination__list {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  margin-block: 0;
  padding-inline-start: 0;
}

.ams-pagination__link {
  color: var(--ams-pagination-link-color);
  display: inline-flex;
  gap: var(--ams-pagination-link-gap);
  outline-offset: var(--ams-pagination-link-outline-offset);
  padding-inline: var(--ams-pagination-link-padding-inline);
  text-decoration-line: var(--ams-pagination-link-text-decoration-line);
  text-decoration-thickness: var(--ams-pagination-link-text-decoration-thickness);
  text-underline-offset: var(--ams-pagination-link-text-underline-offset);
  touch-action: manipulation;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
}
.ams-pagination__link:hover {
  color: var(--ams-pagination-link-hover-color);
  text-decoration-line: var(--ams-pagination-link-hover-text-decoration-line);
}
.ams-pagination__link span.ams-icon svg {
  block-size: 1rem;
  inline-size: 1rem;
}

.ams-pagination__link[aria-current=page] {
  font-weight: var(--ams-pagination-link-current-font-weight);
}
.ams-pagination__link[aria-current=page]:hover {
  text-decoration: none;
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-paragraph {
  box-sizing: border-box;
  color: var(--ams-paragraph-color);
  font-family: var(--ams-paragraph-font-family);
  font-size: var(--ams-paragraph-font-size);
  font-weight: var(--ams-paragraph-font-weight);
  line-height: var(--ams-paragraph-line-height);
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
  /* These CSS declarations have a fallback, so it's safe to use them. */
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphens: auto;
  overflow-wrap: break-word;
  margin-block: 0;
}

.ams-paragraph--small {
  font-size: var(--ams-paragraph-small-font-size);
  line-height: var(--ams-paragraph-small-line-height);
}

.ams-paragraph--large {
  font-size: var(--ams-paragraph-large-font-size);
  line-height: var(--ams-paragraph-large-line-height);
}

.ams-paragraph--inverse {
  color: var(--ams-paragraph-inverse-color);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-password-input {
  background-color: var(--ams-password-input-background-color);
  border-color: var(--ams-password-input-border-color);
  border-style: var(--ams-password-input-border-style);
  border-width: var(--ams-password-input-border-width);
  box-sizing: border-box;
  color: var(--ams-password-input-color);
  font-family: var(--ams-password-input-font-family);
  font-size: var(--ams-password-input-font-size);
  font-weight: var(--ams-password-input-font-weight);
  line-height: var(--ams-password-input-line-height);
  max-inline-size: 100%;
  outline-offset: var(--ams-password-input-outline-offset);
  padding-block: var(--ams-password-input-padding-block);
  padding-inline: var(--ams-password-input-padding-inline);
  touch-action: manipulation;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  margin-block: 0;
}

.ams-password-input:not([size]) {
  inline-size: 100%;
}

.ams-password-input::placeholder {
  color: var(--ams-password-input-placeholder-color);
  opacity: 100%;
}

.ams-password-input:disabled {
  color: var(--ams-password-input-disabled-color);
  cursor: var(--ams-password-input-disabled-cursor);
}

.ams-password-input:not(:disabled):invalid,
.ams-password-input:not(:disabled)[aria-invalid=true] {
  border-color: var(--ams-password-input-invalid-border-color);
}

.ams-password-input:not(:disabled):hover {
  box-shadow: var(--ams-password-input-hover-box-shadow);
}

.ams-password-input:not(:disabled):invalid:hover,
.ams-password-input:not(:disabled)[aria-invalid=true]:hover {
  border-color: var(--ams-password-input-invalid-hover-border-color);
  box-shadow: var(--ams-password-input-invalid-hover-box-shadow);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-radio__input {
  appearance: none;
  inline-size: 0;
  margin-block: 0;
  margin-inline: 0;
}
.ams-radio__input:focus + label {
  outline: auto;
}
.ams-radio__input:focus:not(:focus-visible) + label {
  outline: 0;
}

.ams-radio__label {
  color: var(--ams-radio-color);
  cursor: var(--ams-radio-cursor);
  display: inline-flex;
  font-family: var(--ams-radio-font-family);
  font-size: var(--ams-radio-font-size);
  font-weight: var(--ams-radio-font-weight);
  gap: var(--ams-radio-gap);
  line-height: var(--ams-radio-line-height);
  outline-offset: var(--ams-radio-outline-offset);
  text-decoration-thickness: var(--ams-radio-text-decoration-thickness);
  text-underline-offset: var(--ams-radio-text-underline-offset);
  /* These CSS declarations have a fallback, so it's safe to use them. */
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
}

.ams-radio__icon-container {
  block-size: var(--ams-radio-icon-container-block-size);
  display: flex;
  flex: none;
  inline-size: var(--ams-radio-icon-container-inline-size);
}

.ams-radio__circle {
  fill: var(--ams-radio-circle-fill);
  stroke: var(--ams-radio-circle-stroke);
}

.ams-radio__hover-indicator {
  stroke: none;
}

.ams-radio__checked-indicator {
  display: none;
  fill: var(--ams-radio-checked-indicator-fill);
}

.ams-radio__label:hover {
  color: var(--ams-radio-hover-color);
  text-decoration-line: var(--ams-radio-hover-text-decoration-line);
}
.ams-radio__label:hover .ams-radio__circle {
  stroke: var(--ams-radio-circle-hover-stroke);
}
.ams-radio__label:hover .ams-radio__hover-indicator {
  stroke: var(--ams-radio-hover-indicator-hover-stroke);
}
.ams-radio__label:hover .ams-radio__checked-indicator {
  fill: var(--ams-radio-checked-indicator-hover-fill);
}

.ams-radio__input[aria-invalid=true] + .ams-radio__label .ams-radio__circle {
  stroke: var(--ams-radio-circle-invalid-stroke);
}
.ams-radio__input[aria-invalid=true] + .ams-radio__label .ams-radio__checked-indicator {
  fill: var(--ams-radio-checked-indicator-invalid-fill);
}

.ams-radio__input:checked + .ams-radio__label .ams-radio__checked-indicator {
  display: block;
}

.ams-radio__input:disabled + .ams-radio__label {
  color: var(--ams-radio-disabled-color);
  cursor: var(--ams-radio-disabled-cursor);
}
.ams-radio__input:disabled + .ams-radio__label .ams-radio__circle {
  stroke: var(--ams-radio-circle-disabled-stroke);
}
.ams-radio__input:disabled + .ams-radio__label .ams-radio__checked-indicator {
  fill: var(--ams-radio-checked-indicator-disabled-fill);
}

.ams-radio__input[aria-invalid=true]:disabled + .ams-radio__label .ams-radio__circle {
  stroke: var(--ams-radio-circle-disabled-invalid-stroke);
}
.ams-radio__input[aria-invalid=true]:disabled + .ams-radio__label .ams-radio__checked-indicator {
  fill: var(--ams-radio-checked-indicator-disabled-invalid-fill);
}

.ams-radio__input:disabled + .ams-radio__label:hover {
  text-decoration: none;
}
.ams-radio__input:disabled + .ams-radio__label:hover .ams-radio__hover-indicator {
  stroke: transparent;
}

.ams-radio__input[aria-invalid=true] + .ams-radio__label:hover .ams-radio__circle {
  stroke: var(--ams-radio-circle-invalid-hover-stroke);
}
.ams-radio__input[aria-invalid=true] + .ams-radio__label:hover .ams-radio__hover-indicator {
  stroke: var(--ams-radio-hover-indicator-invalid-hover-stroke);
}
.ams-radio__input[aria-invalid=true] + .ams-radio__label:hover .ams-radio__checked-indicator {
  fill: var(--ams-radio-checked-indicator-invalid-hover-fill);
}

.ams-radio__input[aria-invalid=true]:disabled + .ams-radio__label:hover .ams-radio__circle {
  stroke: var(--ams-radio-circle-disabled-invalid-hover-stroke);
}
.ams-radio__input[aria-invalid=true]:disabled + .ams-radio__label:hover .ams-radio__hover-indicator {
  stroke: transparent;
}
.ams-radio__input[aria-invalid=true]:disabled + .ams-radio__label:hover .ams-radio__checked-indicator {
  fill: var(--ams-radio-checked-indicator-disabled-invalid-hover-fill);
}

@media (forced-colors: active) {
  .ams-radio__label .ams-radio__circle,
  .ams-radio__label:hover .ams-radio__circle,
  .ams-radio__input[aria-invalid=true] + .ams-radio__label .ams-radio__circle,
  .ams-radio__input[aria-invalid=true] + .ams-radio__label:hover .ams-radio__circle {
    fill: Canvas;
    stroke: FieldText;
  }
  .ams-radio__label .ams-radio__hover-indicator,
  .ams-radio__label:hover .ams-radio__hover-indicator,
  .ams-radio__input[aria-invalid=true] + .ams-radio__label .ams-radio__hover-indicator,
  .ams-radio__input[aria-invalid=true] + .ams-radio__label:hover .ams-radio__hover-indicator {
    stroke: none;
  }
  .ams-radio__label .ams-radio__checked-indicator,
  .ams-radio__label:hover .ams-radio__checked-indicator,
  .ams-radio__input[aria-invalid=true] + .ams-radio__label .ams-radio__checked-indicator,
  .ams-radio__input[aria-invalid=true] + .ams-radio__label:hover .ams-radio__checked-indicator {
    fill: FieldText;
  }
}
@media (forced-colors: active) {
  .ams-radio__input:checked + .ams-radio__label .ams-radio__circle,
  .ams-radio__input[aria-invalid=true]:checked + .ams-radio__label:hover .ams-radio__circle {
    stroke: ActiveText;
  }
  .ams-radio__input:checked + .ams-radio__label .ams-radio__checked-indicator,
  .ams-radio__input[aria-invalid=true]:checked + .ams-radio__label:hover .ams-radio__checked-indicator {
    fill: ActiveText;
  }
}
@media (forced-colors: active) {
  .ams-radio__input:disabled + .ams-radio__label .ams-radio__circle,
  .ams-radio__input[aria-invalid=true]:disabled + .ams-radio__label .ams-radio__circle,
  .ams-radio__input[aria-invalid=true]:disabled + .ams-radio__label:hover .ams-radio__circle {
    stroke: GrayText;
  }
  .ams-radio__input:disabled + .ams-radio__label .ams-radio__checked-indicator,
  .ams-radio__input[aria-invalid=true]:disabled + .ams-radio__label .ams-radio__checked-indicator,
  .ams-radio__input[aria-invalid=true]:disabled + .ams-radio__label:hover .ams-radio__checked-indicator {
    fill: GrayText;
  }
}
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-row {
  display: flex;
  gap: var(--ams-row-gap-medium);
}

.ams-row--gap-x-small {
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  gap: var(--ams-row-gap-x-small);
}

.ams-row--gap-small {
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  gap: var(--ams-row-gap-small);
}

.ams-row--gap-large {
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  gap: var(--ams-row-gap-large);
}

.ams-row--gap-x-large {
  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
  gap: var(--ams-row-gap-x-large);
}

.ams-row--gap-none {
  gap: 0;
}

.ams-row--wrap {
  flex-wrap: wrap;
}

.ams-row--align-around {
  justify-content: space-around;
}

.ams-row--align-between {
  justify-content: space-between;
}

.ams-row--align-center {
  justify-content: center;
}

.ams-row--align-end {
  justify-content: flex-end;
}

.ams-row--align-evenly {
  justify-content: space-evenly;
}

.ams-row--align-vertical-baseline {
  align-items: baseline;
}

.ams-row--align-vertical-center {
  align-items: center;
}

.ams-row--align-vertical-end {
  align-items: flex-end;
}

.ams-row--align-vertical-start {
  align-items: flex-start;
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-search-field {
  display: flex;
  isolation: isolate;
}

.ams-search-field__input {
  background-color: var(--ams-search-field-input-background-color);
  border-color: var(--ams-search-field-input-border-color);
  border-style: var(--ams-search-field-input-border-style);
  border-width: var(--ams-search-field-input-border-width);
  box-sizing: border-box;
  color: var(--ams-search-field-input-color);
  font-family: var(--ams-search-field-input-font-family);
  font-size: var(--ams-search-field-input-font-size);
  font-weight: var(--ams-search-field-input-font-weight);
  inline-size: 100%;
  line-height: var(--ams-search-field-input-line-height);
  outline-offset: var(--ams-search-field-input-outline-offset);
  padding-block: var(--ams-search-field-input-padding-block);
  padding-inline: var(--ams-search-field-input-padding-inline);
  touch-action: manipulation;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  margin-block: 0;
}
.ams-search-field__input:focus {
  z-index: 1;
}

.ams-search-field__input::placeholder {
  color: var(--ams-search-field-input-placeholder-color);
}

.ams-search-field__input:not(:disabled):invalid,
.ams-search-field__input:not(:disabled)[aria-invalid=true] {
  border-color: var(--ams-search-field-input-invalid-border-color);
}

.ams-search-field__input:not(:disabled):hover {
  box-shadow: var(--ams-search-field-input-hover-box-shadow);
}

.ams-search-field__input:not(:disabled):invalid:hover,
.ams-search-field__input:not(:disabled)[aria-invalid=true]:hover {
  border-color: var(--ams-search-field-input-invalid-hover-border-color);
  box-shadow: var(--ams-search-field-input-invalid-hover-box-shadow);
}

.ams-search-field__input::-webkit-search-cancel-button {
  appearance: none;
  background-image: var(--ams-search-field-input-cancel-button-background-image);
  block-size: var(--ams-search-field-input-cancel-button-block-size);
  cursor: var(--ams-search-field-input-cancel-button-cursor);
  inline-size: var(--ams-search-field-input-cancel-button-inline-size);
  margin-inline-start: 0.5rem;
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-select {
  background-color: var(--ams-select-background-color);
  border-color: var(--ams-select-border-color);
  border-style: var(--ams-select-border-style);
  border-width: var(--ams-select-border-width);
  color: var(--ams-select-color);
  font-family: var(--ams-select-font-family);
  font-size: var(--ams-select-font-size);
  font-weight: var(--ams-select-font-weight);
  line-height: var(--ams-select-line-height);
  max-inline-size: 100%;
  outline-offset: var(--ams-select-outline-offset);
  padding-block: var(--ams-select-padding-block);
  padding-inline: var(--ams-select-padding-inline);
  touch-action: manipulation;
  appearance: none;
  border-radius: 0;
}
.ams-select:not([multiple]) {
  background-image: var(--ams-select-background-image);
  background-position: var(--ams-select-background-position);
  background-repeat: no-repeat;
  background-size: 1em 1em;
}

.ams-select:disabled {
  color: var(--ams-select-disabled-color);
  cursor: var(--ams-select-disabled-cursor);
}
.ams-select:disabled:not([multiple]) {
  background-image: var(--ams-select-disabled-background-image);
}

.ams-select:not(:disabled):invalid,
.ams-select:not(:disabled)[aria-invalid=true] {
  border-color: var(--ams-select-invalid-border-color);
}

.ams-select:not(:disabled):hover {
  box-shadow: var(--ams-select-hover-box-shadow);
}
.ams-select:not(:disabled):hover:not([multiple]) {
  background-image: var(--ams-select-hover-background-image);
}

.ams-select:not(:disabled):invalid:hover,
.ams-select:not(:disabled)[aria-invalid=true]:hover {
  border-color: var(--ams-select-invalid-hover-border-color);
  box-shadow: var(--ams-select-invalid-hover-box-shadow);
}

.ams-select__option:disabled {
  color: var(--ams-select-option-disabled-color);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-skip-link {
  background-color: var(--ams-skip-link-background-color);
  color: var(--ams-skip-link-color);
  display: block;
  font-family: var(--ams-skip-link-font-family);
  font-size: var(--ams-skip-link-font-size);
  font-weight: var(--ams-skip-link-font-weight);
  line-height: var(--ams-skip-link-line-height);
  outline-offset: var(--ams-skip-link-outline-offset);
  padding-block: var(--ams-skip-link-padding-block);
  padding-inline: var(--ams-skip-link-padding-inline);
  text-align: center;
  text-decoration: none;
}
.ams-skip-link:hover {
  background-color: var(--ams-skip-link-hover-background-color);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-spotlight {
  background-color: var(--ams-spotlight-background-color);
}

.ams-spotlight--azure {
  background-color: var(--ams-spotlight-azure-background-color);
}

.ams-spotlight--green {
  background-color: var(--ams-spotlight-green-background-color);
}

.ams-spotlight--lime {
  background-color: var(--ams-spotlight-lime-background-color);
}

.ams-spotlight--magenta {
  background-color: var(--ams-spotlight-magenta-background-color);
}

.ams-spotlight--orange {
  background-color: var(--ams-spotlight-orange-background-color);
}

.ams-spotlight--yellow {
  background-color: var(--ams-spotlight-yellow-background-color);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-standalone-link {
  color: var(--ams-standalone-link-color);
  column-gap: var(--ams-standalone-link-column-gap);
  display: inline-flex;
  font-family: var(--ams-standalone-link-font-family);
  font-size: var(--ams-standalone-link-font-size);
  font-weight: var(--ams-standalone-link-font-weight);
  line-height: var(--ams-standalone-link-line-height);
  outline-offset: var(--ams-standalone-link-outline-offset);
  text-decoration-line: var(--ams-standalone-link-text-decoration-line);
  text-decoration-thickness: var(--ams-standalone-link-text-decoration-thickness);
  text-underline-offset: var(--ams-standalone-link-text-underline-offset);
  /* These CSS declarations have a fallback, so it's safe to use them. */
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
}
.ams-standalone-link:hover {
  color: var(--ams-standalone-link-hover-color);
  text-decoration-line: var(--ams-standalone-link-hover-text-decoration-line);
}

.ams-standalone-link--contrast {
  color: var(--ams-standalone-link-contrast-color);
}
.ams-standalone-link--contrast:hover {
  color: var(--ams-standalone-link-contrast-hover-color);
}

.ams-standalone-link--inverse {
  color: var(--ams-standalone-link-inverse-color);
}
.ams-standalone-link--inverse:hover {
  color: var(--ams-standalone-link-inverse-hover-color);
}

/* stylelint-disable-next-line block-no-empty */
.ams-standalone-link--with-icon {
  /* This class name is deprecated. */
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-switch__input {
  appearance: none;
  inline-size: 0;
  margin-block: 0;
  margin-inline: 0;
}
.ams-switch__input:focus + label {
  outline: auto;
}
.ams-switch__input:focus:not(:focus-visible) + label {
  outline: 0;
}

.ams-switch__label {
  --ams-switch-track-border-width: var(--ams-border-width-m);
  background-color: var(--ams-switch-background-color);
  border: var(--ams-switch-track-border-width) solid transparent;
  border-radius: calc(var(--ams-switch-thumb-inline-size) * 2);
  box-sizing: border-box;
  cursor: var(--ams-switch-cursor);
  display: inline-block;
  inline-size: var(--ams-switch-inline-size);
  outline-offset: var(--ams-switch-outline-offset);
  transition: background-color 0.2s ease-in-out;
  vertical-align: middle;
}

.ams-switch__label::before {
  background-color: var(--ams-switch-thumb-background-color);
  block-size: var(--ams-switch-thumb-block-size);
  border-radius: 50%;
  content: "";
  display: block;
  inline-size: var(--ams-switch-thumb-inline-size);
  transition-duration: 0.1s;
  transition-property: box-shadow, transform;
  transition-timing-function: ease-in-out;
}
@media (forced-colors: active) {
  .ams-switch__label::before {
    background-color: FieldText;
  }
}

.ams-switch__input:checked + .ams-switch__label {
  background-color: var(--ams-switch-checked-background-color);
}

.ams-switch__input:disabled + .ams-switch__label {
  background-color: var(--ams-switch-disabled-background-color);
  cursor: var(--ams-switch-disabled-cursor);
}

.ams-switch__input:checked + .ams-switch__label::before {
  transform: translate(calc(100% - 2 * var(--ams-switch-track-border-width)));
}

.ams-switch:hover .ams-switch__input:enabled + .ams-switch__label::before {
  box-shadow: var(--ams-switch-thumb-hover-box-shadow);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-table-of-contents {
  display: flex;
  flex-direction: column;
  font-family: var(--ams-table-of-contents-font-family);
  font-size: var(--ams-table-of-contents-font-size);
  font-weight: var(--ams-table-of-contents-font-weight);
  gap: var(--ams-table-of-contents-gap);
  line-height: var(--ams-table-of-contents-line-height);
}

.ams-table-of-contents__list {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--ams-table-of-contents-list-gap);
  list-style: none;
  /* These CSS declarations have a fallback, so it's safe to use them. */
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
  margin-block: 0;
  padding-inline: 0;
}
.ams-table-of-contents__list .ams-table-of-contents__list {
  padding-block-start: var(--ams-table-of-contents-list-list-padding-block-start);
  padding-inline-start: var(--ams-table-of-contents-list-list-padding-inline-start);
}

.ams-table-of-contents__link {
  color: var(--ams-table-of-contents-link-color);
  outline-offset: var(--ams-table-of-contents-link-outline-offset);
  text-decoration-line: var(--ams-table-of-contents-link-text-decoration-line);
  text-decoration-thickness: var(--ams-table-of-contents-link-text-decoration-thickness);
  text-underline-offset: var(--ams-table-of-contents-link-text-underline-offset);
}
.ams-table-of-contents__link:hover {
  color: var(--ams-table-of-contents-link-hover-color);
  text-decoration-line: var(--ams-table-of-contents-link-hover-text-decoration-line);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-table {
  overflow-x: auto;
}

.ams-table__table {
  border-spacing: 0;
  break-inside: avoid;
  color: var(--ams-table-color);
  font-family: var(--ams-table-font-family);
  font-size: var(--ams-table-font-size);
  font-weight: var(--ams-table-font-weight);
  line-height: var(--ams-table-line-height);
}

.ams-table__caption {
  font-weight: var(--ams-table-caption-font-weight);
  text-align: start;
}

.ams-table__cell,
.ams-table__header-cell {
  border-block-end: var(--ams-table-cell-border-block-end);
  padding-block: var(--ams-table-cell-padding-block);
  padding-inline: var(--ams-table-cell-padding-inline);
  text-align: start;
  vertical-align: top;
}

.ams-table__header-cell {
  font-weight: var(--ams-table-header-cell-font-weight);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-tabs {
  display: grid;
  gap: var(--ams-tabs-gap);
}

.ams-tabs__list {
  box-shadow: var(--ams-tabs-list-box-shadow);
  display: flex;
  overflow-x: auto;
}

.ams-tabs__button {
  color: var(--ams-tabs-button-color);
  cursor: var(--ams-tabs-button-cursor);
  display: grid;
  flex-shrink: 0;
  font-family: var(--ams-tabs-button-font-family);
  font-size: var(--ams-tabs-button-font-size);
  font-weight: var(--ams-tabs-button-font-weight);
  line-height: var(--ams-tabs-button-line-height);
  outline-offset: var(--ams-tabs-button-outline-offset);
  padding-block: var(--ams-tabs-button-padding-block);
  padding-inline: var(--ams-tabs-button-padding-inline);
  background-color: transparent;
  border: none;
  margin-block: 0;
  margin-inline: 0;
}
.ams-tabs__button:disabled {
  color: var(--ams-tabs-button-disabled-color);
  cursor: var(--ams-tabs-button-disabled-cursor);
}
@media (forced-colors: active) {
  .ams-tabs__button:disabled {
    color: GrayText;
  }
}
.ams-tabs__button:hover:not([disabled]) {
  color: var(--ams-tabs-button-hover-color);
}
.ams-tabs__button:hover:not([aria-selected=true], [disabled]) {
  box-shadow: var(--ams-tabs-button-hover-box-shadow);
}
.ams-tabs__button[aria-selected=true] {
  box-shadow: var(--ams-tabs-button-selected-box-shadow);
  font-weight: var(--ams-tabs-button-selected-font-weight);
}
@media (forced-colors: active) {
  .ams-tabs__button[aria-selected=true] {
    background-color: SelectedItem;
  }
}

.ams-tabs__button-label,
.ams-tabs__button-label-hidden {
  grid-area: 1/1;
}

.ams-tabs__button-label-hidden {
  font-weight: var(--ams-tabs-button-selected-font-weight);
  pointer-events: none;
  -webkit-user-select: none;
  /* Safari support is added with the prefixed property. */
  /* stylelint-disable-next-line plugin/use-baseline */
  user-select: none;
  visibility: hidden;
}

.ams-tabs__panel {
  overflow-x: auto;
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-text-area {
  background-color: var(--ams-text-area-background-color);
  border-color: var(--ams-text-area-border-color);
  border-style: var(--ams-text-area-border-style);
  border-width: var(--ams-text-area-border-width);
  box-sizing: border-box;
  color: var(--ams-text-area-color);
  font-family: var(--ams-text-area-font-family);
  font-size: var(--ams-text-area-font-size);
  font-weight: var(--ams-text-area-font-weight);
  inline-size: 100%;
  line-height: var(--ams-text-area-line-height);
  max-inline-size: 100%;
  min-block-size: var(--ams-text-area-min-block-size);
  outline-offset: var(--ams-text-area-outline-offset);
  padding-block: var(--ams-text-area-padding-block);
  padding-inline: var(--ams-text-area-padding-inline);
  touch-action: manipulation;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  margin-block: 0;
}

.ams-text-area::placeholder {
  color: var(--ams-text-area-placeholder-color);
  opacity: 100%;
}

.ams-text-area:disabled {
  color: var(--ams-text-area-disabled-color);
  cursor: var(--ams-text-area-disabled-cursor);
}

.ams-text-area:not(:disabled):invalid,
.ams-text-area:not(:disabled)[aria-invalid=true] {
  border-color: var(--ams-text-area-invalid-border-color);
}

.ams-text-area:not(:disabled):hover {
  box-shadow: var(--ams-text-area-hover-box-shadow);
}

.ams-text-area:not(:disabled):invalid:hover,
.ams-text-area:not(:disabled)[aria-invalid=true]:hover {
  border-color: var(--ams-text-area-invalid-hover-border-color);
  box-shadow: var(--ams-text-area-invalid-hover-box-shadow);
}

/*
 * Resizing is not fully supported in Safari on iOS.
 * This is acceptable, it is not crucial functionality.
 */
.ams-text-area--resize-none {
  /* stylelint-disable-next-line plugin/use-baseline */
  resize: none;
}

.ams-text-area--resize-horizontal {
  /* stylelint-disable-next-line plugin/use-baseline */
  resize: inline;
}

.ams-text-area--resize-vertical {
  /* stylelint-disable-next-line plugin/use-baseline */
  resize: block;
}

.ams-text-area--cols {
  inline-size: auto;
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-text-input {
  background-color: var(--ams-text-input-background-color);
  border-color: var(--ams-text-input-border-color);
  border-style: var(--ams-text-input-border-style);
  border-width: var(--ams-text-input-border-width);
  box-sizing: border-box;
  color: var(--ams-text-input-color);
  font-family: var(--ams-text-input-font-family);
  font-size: var(--ams-text-input-font-size);
  font-weight: var(--ams-text-input-font-weight);
  line-height: var(--ams-text-input-line-height);
  max-inline-size: 100%;
  outline-offset: var(--ams-text-input-outline-offset);
  padding-block: var(--ams-text-input-padding-block);
  padding-inline: var(--ams-text-input-padding-inline);
  touch-action: manipulation;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  margin-block: 0;
}

.ams-text-input:not([size]) {
  inline-size: 100%;
}

.ams-text-input::placeholder {
  color: var(--ams-text-input-placeholder-color);
  opacity: 100%;
}

.ams-text-input:disabled {
  color: var(--ams-text-input-disabled-color);
  cursor: var(--ams-text-input-disabled-cursor);
}

.ams-text-input:not(:disabled):invalid,
.ams-text-input:not(:disabled)[aria-invalid=true] {
  border-color: var(--ams-text-input-invalid-border-color);
}

.ams-text-input:not(:disabled):hover {
  box-shadow: var(--ams-text-input-hover-box-shadow);
}

.ams-text-input:not(:disabled):invalid:hover,
.ams-text-input:not(:disabled)[aria-invalid=true]:hover {
  border-color: var(--ams-text-input-invalid-hover-border-color);
  box-shadow: var(--ams-text-input-invalid-hover-box-shadow);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-time-input {
  background-color: var(--ams-time-input-background-color);
  border-color: var(--ams-time-input-border-color);
  border-style: var(--ams-time-input-border-style);
  border-width: var(--ams-time-input-border-width);
  box-sizing: border-box;
  color: var(--ams-time-input-color);
  font-family: var(--ams-time-input-font-family);
  font-size: var(--ams-time-input-font-size);
  font-weight: var(--ams-time-input-font-weight);
  line-height: var(--ams-time-input-line-height);
  min-block-size: calc(var(--ams-time-input-font-size) * var(--ams-time-input-line-height) + 2 * var(--ams-time-input-padding-block));
  min-inline-size: calc(4ch + 2 * var(--ams-time-input-padding-inline));
  outline-offset: var(--ams-time-input-outline-offset);
  padding-block: var(--ams-time-input-padding-block);
  padding-inline: var(--ams-time-input-padding-inline);
  touch-action: manipulation;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  inline-size: auto;
  margin-block: 0;
}
.ams-time-input::-webkit-datetime-edit, .ams-time-input::-webkit-datetime-edit-ampm-field, .ams-time-input::-webkit-datetime-edit-fields-wrapper, .ams-time-input::-webkit-datetime-edit-hour-field, .ams-time-input::-webkit-datetime-edit-millisecond-field, .ams-time-input::-webkit-datetime-edit-minute-field, .ams-time-input::-webkit-datetime-edit-second-field {
  padding-block: 0;
}

.ams-time-input::-webkit-calendar-picker-indicator {
  appearance: none;
  background-image: var(--ams-time-input-calendar-picker-indicator-background-image);
  cursor: var(--ams-time-input-calendar-picker-indicator-cursor);
}

.ams-time-input:hover::-webkit-calendar-picker-indicator {
  background-image: var(--ams-time-input-hover-calendar-picker-indicator-background-image);
}

.ams-time-input:disabled {
  color: var(--ams-time-input-disabled-color);
  cursor: var(--ams-time-input-disabled-cursor);
}

.ams-time-input:disabled::-webkit-calendar-picker-indicator {
  background-image: var(--ams-time-input-disabled-calendar-picker-indicator-background-image);
  visibility: visible;
}

.ams-time-input:not(:disabled):invalid,
.ams-time-input:not(:disabled)[aria-invalid=true] {
  border-color: var(--ams-time-input-invalid-border-color);
}

.ams-time-input:not(:disabled):hover {
  box-shadow: var(--ams-time-input-hover-box-shadow);
}

.ams-time-input:not(:disabled):invalid:hover,
.ams-time-input:not(:disabled)[aria-invalid=true]:hover {
  border-color: var(--ams-time-input-invalid-hover-border-color);
  box-shadow: var(--ams-time-input-invalid-hover-box-shadow);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-unordered-list {
  box-sizing: border-box;
  display: grid;
  gap: var(--ams-unordered-list-gap);
  /* These CSS declarations have a fallback, so it's safe to use them. */
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
  /* stylelint-disable-next-line plugin/use-baseline */
  hyphens: auto;
  overflow-wrap: break-word;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
  list-style: none;
  margin-block: 0;
  padding-inline-start: 0;
}

.ams-unordered-list:not(.ams-unordered-list--no-markers) {
  color: var(--ams-unordered-list-color);
  font-family: var(--ams-unordered-list-font-family);
  font-size: var(--ams-unordered-list-font-size);
  font-weight: var(--ams-unordered-list-font-weight);
  line-height: var(--ams-unordered-list-line-height);
  list-style-type: var(--ams-unordered-list-list-style-type);
}
.ams-unordered-list:not(.ams-unordered-list--no-markers) .ams-unordered-list__item {
  margin-inline-start: var(--ams-unordered-list-item-margin-inline-start);
  padding-inline-start: var(--ams-unordered-list-item-padding-inline-start);
}

.ams-unordered-list--inverse:not(.ams-unordered-list--no-markers) {
  color: var(--ams-unordered-list-inverse-color);
}

.ams-unordered-list--small:not(.ams-unordered-list--no-markers) {
  font-size: var(--ams-unordered-list-small-font-size);
  line-height: var(--ams-unordered-list-small-line-height);
}

:is(.ams-ordered-list, .ams-unordered-list) .ams-unordered-list {
  gap: var(--ams-unordered-list-unordered-list-gap);
  list-style-type: var(--ams-unordered-list-unordered-list-list-style-type);
  padding-block-start: var(--ams-unordered-list-unordered-list-padding-block-start);
}
:is(.ams-ordered-list, .ams-unordered-list) .ams-unordered-list .ams-unordered-list__item {
  margin-inline-start: var(--ams-unordered-list-unordered-list-item-margin-inline-start);
  padding-inline-start: var(--ams-unordered-list-unordered-list-item-padding-inline-start);
}
:is(.ams-ordered-list, .ams-unordered-list) > :not(:last-child) > .ams-unordered-list {
  padding-block-end: var(--ams-unordered-list-unordered-list-padding-block-end);
}

/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
.ams-visually-hidden:not(:active, :focus) {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  -webkit-user-select: none;
  /* Safari support is added with the prefixed property. */
  /* stylelint-disable-next-line plugin/use-baseline */
  user-select: none;
  white-space: nowrap;
}

/*# sourceMappingURL=index.css.map */