@amsterdam/design-system-css 2.0.0 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/CHANGELOG.md +30 -1
  2. package/dist/accordion/accordion.css.map +1 -1
  3. package/dist/app/app.css +40 -0
  4. package/dist/app/app.css.map +1 -0
  5. package/dist/app-navigation/app-navigation.css +249 -0
  6. package/dist/app-navigation/app-navigation.css.map +1 -0
  7. package/dist/badge/badge.css.map +1 -1
  8. package/dist/blockquote/blockquote.css.map +1 -1
  9. package/dist/breadcrumb/breadcrumb.css +1 -1
  10. package/dist/breadcrumb/breadcrumb.css.map +1 -1
  11. package/dist/breakout/breakout.css +1 -1
  12. package/dist/breakout/breakout.css.map +1 -1
  13. package/dist/button/button.css +101 -1
  14. package/dist/button/button.css.map +1 -1
  15. package/dist/call-to-action-link/call-to-action-link.css.map +1 -1
  16. package/dist/card/card.css +1 -1
  17. package/dist/card/card.css.map +1 -1
  18. package/dist/character-count/character-count.css.map +1 -1
  19. package/dist/checkbox/checkbox.css.map +1 -1
  20. package/dist/date-input/date-input.css +1 -1
  21. package/dist/date-input/date-input.css.map +1 -1
  22. package/dist/description-list/description-list.css +1 -1
  23. package/dist/description-list/description-list.css.map +1 -1
  24. package/dist/error-message/error-message.css.map +1 -1
  25. package/dist/field-set/field-set.css +1 -1
  26. package/dist/field-set/field-set.css.map +1 -1
  27. package/dist/figure/figure.css.map +1 -1
  28. package/dist/file-input/file-input.css.map +1 -1
  29. package/dist/file-list/file-list.css.map +1 -1
  30. package/dist/grid/grid.css.map +1 -1
  31. package/dist/heading/heading.css.map +1 -1
  32. package/dist/image-slider/image-slider.css +1 -1
  33. package/dist/image-slider/image-slider.css.map +1 -1
  34. package/dist/index.css +4709 -1
  35. package/dist/index.css.map +1 -1
  36. package/dist/label/label.css +1 -1
  37. package/dist/label/label.css.map +1 -1
  38. package/dist/link/link.css.map +1 -1
  39. package/dist/link-list/link-list.css.map +1 -1
  40. package/dist/menu/menu.css +1 -1
  41. package/dist/menu/menu.css.map +1 -1
  42. package/dist/ordered-list/ordered-list.css.map +1 -1
  43. package/dist/page-footer/page-footer.css.map +1 -1
  44. package/dist/page-header/page-header.css +1 -1
  45. package/dist/page-header/page-header.css.map +1 -1
  46. package/dist/page-heading/page-heading.deprecated.css.map +1 -1
  47. package/dist/pagination/pagination.css.map +1 -1
  48. package/dist/paragraph/paragraph.css.map +1 -1
  49. package/dist/password-input/password-input.css.map +1 -1
  50. package/dist/radio/radio.css.map +1 -1
  51. package/dist/search-field/search-field.css.map +1 -1
  52. package/dist/standalone-link/standalone-link.css.map +1 -1
  53. package/dist/table-of-contents/table-of-contents.css.map +1 -1
  54. package/dist/tabs/tabs.css +1 -1
  55. package/dist/tabs/tabs.css.map +1 -1
  56. package/dist/text-area/text-area.css.map +1 -1
  57. package/dist/text-input/text-input.css.map +1 -1
  58. package/dist/time-input/time-input.css +1 -1
  59. package/dist/time-input/time-input.css.map +1 -1
  60. package/dist/unordered-list/unordered-list.css.map +1 -1
  61. package/dist/visually-hidden/visually-hidden.css +1 -1
  62. package/dist/visually-hidden/visually-hidden.css.map +1 -1
  63. package/documentation/coding-conventions.md +2 -0
  64. package/package.json +4 -4
  65. package/src/common/calculate-fluid-style.scss +2 -0
  66. package/src/common/hyphenation.scss +3 -0
  67. package/src/common/text-rendering.scss +3 -0
  68. package/src/components/breadcrumb/breadcrumb.scss +6 -1
  69. package/src/components/breakout/breakout.scss +9 -1
  70. package/src/components/card/card.scss +17 -8
  71. package/src/components/checkbox/checkbox.scss +2 -0
  72. package/src/components/date-input/date-input.scss +4 -4
  73. package/src/components/description-list/description-list.scss +0 -6
  74. package/src/components/field-set/field-set.scss +15 -1
  75. package/src/components/grid/_mixins.scss +2 -0
  76. package/src/components/heading/heading.scss +12 -0
  77. package/src/components/image-slider/image-slider.scss +12 -0
  78. package/src/components/label/label.scss +12 -0
  79. package/src/components/menu/README.md +16 -2
  80. package/src/components/menu/menu.scss +38 -4
  81. package/src/components/page-header/page-header.scss +14 -0
  82. package/src/components/page-heading/page-heading.deprecated.scss +2 -0
  83. package/src/components/tabs/tabs.scss +4 -0
  84. package/src/components/text-area/text-area.scss +7 -0
  85. package/src/components/time-input/time-input.scss +4 -4
  86. package/src/components/visually-hidden/visually-hidden.scss +4 -1
package/dist/index.css CHANGED
@@ -1 +1,4709 @@
1
- .ams-accordion{display:flex;flex-direction:column;gap:var(--ams-accordion-gap);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}.ams-accordion__button{background-color:rgba(0,0,0,0);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 .3s ease}}.ams-accordion__button[aria-expanded=true] svg{rotate:-180deg}.ams-accordion__panel{display:none}.ams-accordion__panel--expanded{display:block}.ams-action-group{align-items:center;display:inline-flex;flex-wrap:wrap;gap:var(--ams-action-group-gap)}.ams-action-group>*{flex:auto}.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)}.ams-aspect-ratio-9-16{aspect-ratio:var(--ams-aspect-ratio-9-16) !important}.ams-aspect-ratio-3-4{aspect-ratio:var(--ams-aspect-ratio-3-4) !important}.ams-aspect-ratio-1-1{aspect-ratio:var(--ams-aspect-ratio-1-1) !important}.ams-aspect-ratio-4-3{aspect-ratio:var(--ams-aspect-ratio-4-3) !important}.ams-aspect-ratio-16-9{aspect-ratio:var(--ams-aspect-ratio-16-9) !important}.ams-aspect-ratio-16-5{aspect-ratio:var(--ams-aspect-ratio-16-5) !important}.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}.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)}.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);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;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)}.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:"“" "”";hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;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)}.ams-breadcrumb{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-after:avoid;break-inside:avoid;hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;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)}.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}}.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;margin-block:calc(var(--ams-space-xl)*-1);margin-inline:calc(var(--ams-space-2xl)*-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}}.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;hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;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)}.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;hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;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)}.ams-card{display:grid;outline-offset:var(--ams-card-outline-offset);position:relative;touch-action:manipulation}.ams-card:has(:focus-visible){outline-color:-webkit-focus-ring-color;outline-style:auto;outline-width:.0625rem}.ams-card>.ams-card__heading:has(+*){margin-block-end:var(--ams-card-heading-margin-block-end)}.ams-card>.ams-card__image:has(+*){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)}.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:has(:focus-visible) .ams-card__link:focus{outline:none}.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);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}.ams-character-count--error{color:var(--ams-character-count-error-color)}.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);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;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}}.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}}.ams-column{display:flex;flex-direction:column;gap:var(--ams-column-gap-medium)}.ams-column--gap-x-small{gap:var(--ams-column-gap-x-small)}.ams-column--gap-small{gap:var(--ams-column-gap-small)}.ams-column--gap-large{gap:var(--ams-column-gap-large)}.ams-column--gap-x-large{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}.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;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-calender-picker-indicator-background-image);cursor:var(--ams-date-input-calender-picker-indicator-cursor)}.ams-date-input:hover::-webkit-calendar-picker-indicator{background-image:var(--ams-date-input-hover-calender-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-calender-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)}.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;hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;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 .ams-description-list__section{grid-template-columns:subgrid}.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}}.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]))::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)}}.ams-body{margin-block:0;margin-inline:0}.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);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;margin-block:0}.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);text-wrap:var(--ams-field-set-legend-text-wrap);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;float:inline-start;inline-size:100%;padding-inline:0}.ams-field-set__legend+*{clear:both}.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)}.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);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}.ams-figure__caption--inverse{color:var(--ams-figure-caption-inverse-color)}.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;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)}.ams-file-list{display:flex;flex-direction:column;gap:var(--ams-file-list-gap);padding-block:var(--ams-file-list-padding-block);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;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)}.ams-gap-xs{display:grid !important;gap:var(--ams-space-xs) !important}.ams-gap-s{display:grid !important;gap:var(--ams-space-s) !important}.ams-gap-m{display:grid !important;gap:var(--ams-space-m) !important}.ams-gap-l{display:grid !important;gap:var(--ams-space-l) !important}.ams-gap-xl{display:grid !important;gap:var(--ams-space-xl) !important}.ams-heading{box-sizing:border-box;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);text-wrap:var(--ams-heading-text-wrap);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;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)}.ams-hint{display:inline-block;font-weight:var(--ams-hint-font-weight)}.ams-icon-button{background-color:rgba(0,0,0,0);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:rgba(0,0,0,0);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:rgba(0,0,0,0);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)}.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)}.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)}.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}.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;scroll-snap-type:x mandatory;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)}.ams-image{aspect-ratio:var(--ams-image-aspect-ratio);block-size:auto;font-style:italic;inline-size:100%;object-fit:cover;vertical-align:middle}.ams-invalid-form-alert{outline-offset:var(--ams-invalid-form-alert-outline-offset)}.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);text-wrap:var(--ams-label-text-wrap);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}.ams-link-list{box-sizing:border-box;display:grid;gap:var(--ams-link-list-gap);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;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)}.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;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)}.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)}.ams-mb-xs{margin-block-end:var(--ams-space-xs) !important}.ams-mb-s{margin-block-end:var(--ams-space-s) !important}.ams-mb-m{margin-block-end:var(--ams-space-m) !important}.ams-mb-l{margin-block-end:var(--ams-space-l) !important}.ams-mb-xl{margin-block-end:var(--ams-space-xl) !important}.ams-mb-2xl{margin-block-end:var(--ams-space-2xl) !important}.ams-mark{background-color:var(--ams-mark-background-color)}.ams-menu{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)}.ams-menu__list{display:grid;hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;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: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;flex-direction:column;gap:0}.ams-menu__link .ams-menu__icon{--ams-icon-font-size: var(--ams-icon-heading-3-font-size);--ams-icon-line-height: var(--ams-icon-heading-3-line-height)}}.ams-menu__link--contrast{color:var(--ams-menu-link-contrast-color)}.ams-menu__link--contrast:hover{color:var(--ams-menu-link-contrast-hover-color)}.ams-menu__link--inverse{color:var(--ams-menu-link-inverse-color)}.ams-menu__link--inverse:hover{color:var(--ams-menu-link-inverse-hover-color)}.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;text-size-adjust:none;hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);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)}.ams-overlap{display:grid}.ams-overlap>*{grid-column:1/-1;grid-row:1/-1}.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;min-block-size:100dvh}.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);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;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)}.ams-page-header{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%;user-select:none}.ams-page-header__logo-container{flex-shrink:0;inline-size:.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);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;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;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;user-select:none;visibility:hidden}.ams-page-header__menu-icon line{stroke:currentColor;stroke-width:3px;transform-origin:center;transition:translate .1s ease-in-out,rotate .2s ease-in-out,opacity .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}}.ams-page-heading{box-sizing:border-box;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);text-wrap:var(--ams-page-heading-text-wrap);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;margin-block:0}.ams-page-heading--inverse{color:var(--ams-page-heading-inverse-color)}.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;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}.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;text-size-adjust:none;hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);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)}.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;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)}.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);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;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:rgba(0,0,0,0)}.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:rgba(0,0,0,0)}.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}}.ams-row{display:flex;gap:var(--ams-row-gap-medium)}.ams-row--gap-x-small{gap:var(--ams-row-gap-x-small)}.ams-row--gap-small{gap:var(--ams-row-gap-small)}.ams-row--gap-large{gap:var(--ams-row-gap-large)}.ams-row--gap-x-large{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}.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;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:.5rem}.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)}.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)}.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)}.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);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;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)}.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 rgba(0,0,0,0);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 .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:.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)}.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;hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;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)}.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)}.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:rgba(0,0,0,0);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;user-select:none;visibility:hidden}.ams-tabs__panel{overflow-x:auto}.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;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)}.ams-text-area--resize-none{resize:none}.ams-text-area--resize-horizontal{resize:inline}.ams-text-area--resize-vertical{resize:block}.ams-text-area--cols{inline-size:auto}.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;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)}.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;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-calender-picker-indicator-background-image);cursor:var(--ams-time-input-calender-picker-indicator-cursor)}.ams-time-input:hover::-webkit-calendar-picker-indicator{background-image:var(--ams-time-input-hover-calender-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-calender-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)}.ams-unordered-list{box-sizing:border-box;display:grid;gap:var(--ams-unordered-list-gap);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;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)}.ams-visually-hidden:not(:active,:focus){block-size:1px;clip:rect(0 0 0 0);clip-path:inset(50%);inline-size:1px;overflow:hidden;position:absolute;user-select:none;white-space:nowrap}/*# sourceMappingURL=index.css.map */
1
+ @charset "UTF-8";
2
+ /**
3
+ * @license EUPL-1.2+
4
+ * Copyright Gemeente Amsterdam
5
+ */
6
+ /* Append here */
7
+ /**
8
+ * @license EUPL-1.2+
9
+ * Copyright Gemeente Amsterdam
10
+ */
11
+ /**
12
+ * @license EUPL-1.2+
13
+ * Copyright Gemeente Amsterdam
14
+ */
15
+ /**
16
+ * @license EUPL-1.2+
17
+ * Copyright Gemeente Amsterdam
18
+ */
19
+ /**
20
+ * Prioritizes legibility over speed when rendering text
21
+ * and disables text inflation on some mobile devices.
22
+ */
23
+ .ams-accordion {
24
+ display: flex;
25
+ flex-direction: column;
26
+ gap: var(--ams-accordion-gap);
27
+ /* These CSS declarations have a fallback, so it's safe to use them. */
28
+ /* stylelint-disable-next-line plugin/use-baseline */
29
+ hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
30
+ /* stylelint-disable-next-line plugin/use-baseline */
31
+ hyphens: auto;
32
+ overflow-wrap: break-word;
33
+ text-rendering: optimizeLegibility;
34
+ -moz-text-size-adjust: none;
35
+ -webkit-text-size-adjust: none;
36
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
37
+ /* stylelint-disable-next-line plugin/use-baseline */
38
+ text-size-adjust: none;
39
+ }
40
+
41
+ .ams-accordion__header {
42
+ /* This class name is deprecated. */
43
+ }
44
+
45
+ .ams-accordion__button {
46
+ background-color: transparent;
47
+ color: var(--ams-accordion-button-color);
48
+ cursor: var(--ams-accordion-button-cursor);
49
+ display: flex;
50
+ font-family: inherit;
51
+ font-size: inherit;
52
+ font-weight: inherit;
53
+ gap: var(--ams-accordion-button-gap);
54
+ inline-size: 100%;
55
+ line-height: inherit;
56
+ outline-offset: var(--ams-accordion-button-outline-offset);
57
+ padding-block: var(--ams-accordion-button-padding-block);
58
+ padding-inline: var(--ams-accordion-button-padding-inline);
59
+ text-align: start;
60
+ border: none;
61
+ margin-block: 0;
62
+ margin-inline: 0;
63
+ }
64
+ .ams-accordion__button:hover {
65
+ color: var(--ams-accordion-button-hover-color);
66
+ }
67
+
68
+ .ams-accordion__icon svg {
69
+ rotate: 0deg;
70
+ transition: none;
71
+ }
72
+ [aria-expanded=true] .ams-accordion__icon svg {
73
+ rotate: -180deg;
74
+ }
75
+ @media not (prefers-reduced-motion) {
76
+ .ams-accordion__icon svg {
77
+ transition: rotate 0.3s ease;
78
+ }
79
+ }
80
+
81
+ .ams-accordion__button[aria-expanded=true] svg {
82
+ rotate: -180deg;
83
+ }
84
+
85
+ .ams-accordion__panel {
86
+ display: none;
87
+ }
88
+
89
+ .ams-accordion__panel--expanded {
90
+ display: block;
91
+ }
92
+
93
+ /**
94
+ * @license EUPL-1.2+
95
+ * Copyright Gemeente Amsterdam
96
+ */
97
+ .ams-action-group {
98
+ align-items: center;
99
+ display: inline-flex;
100
+ flex-wrap: wrap;
101
+ gap: var(--ams-action-group-gap);
102
+ }
103
+ .ams-action-group > * {
104
+ flex: auto;
105
+ }
106
+
107
+ /**
108
+ * @license EUPL-1.2+
109
+ * Copyright Gemeente Amsterdam
110
+ */
111
+ .ams-alert {
112
+ background-color: var(--ams-alert-background-color);
113
+ border-color: var(--ams-alert-border-color);
114
+ border-style: var(--ams-alert-border-style);
115
+ border-width: var(--ams-alert-border-width);
116
+ display: flex;
117
+ }
118
+
119
+ .ams-alert__severity-indicator {
120
+ background-color: var(--ams-alert-severity-indicator-background-color);
121
+ border-inline-end: inherit;
122
+ flex: none;
123
+ padding-block: var(--ams-alert-severity-indicator-padding-block);
124
+ padding-inline: var(--ams-alert-severity-indicator-padding-inline);
125
+ }
126
+
127
+ .ams-alert__content {
128
+ display: flex;
129
+ flex: auto;
130
+ flex-direction: column;
131
+ gap: var(--ams-alert-content-gap);
132
+ padding-block: var(--ams-alert-content-padding-block);
133
+ padding-inline: var(--ams-alert-content-padding-inline);
134
+ }
135
+
136
+ .ams-alert--error {
137
+ border-color: var(--ams-alert-error-border-color);
138
+ }
139
+ .ams-alert--error > .ams-alert__severity-indicator {
140
+ background-color: var(--ams-alert-error-severity-indicator-background-color);
141
+ }
142
+
143
+ .ams-alert--success {
144
+ border-color: var(--ams-alert-success-border-color);
145
+ }
146
+ .ams-alert--success > .ams-alert__severity-indicator {
147
+ background-color: var(--ams-alert-success-severity-indicator-background-color);
148
+ }
149
+
150
+ .ams-alert--warning {
151
+ border-color: var(--ams-alert-warning-border-color);
152
+ }
153
+ .ams-alert--warning > .ams-alert__severity-indicator {
154
+ background-color: var(--ams-alert-warning-severity-indicator-background-color);
155
+ }
156
+
157
+ /**
158
+ * @license EUPL-1.2+
159
+ * Copyright Gemeente Amsterdam
160
+ */
161
+ .ams-aspect-ratio-9-16 {
162
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
163
+ aspect-ratio: var(--ams-aspect-ratio-9-16) !important;
164
+ }
165
+ .ams-aspect-ratio-3-4 {
166
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
167
+ aspect-ratio: var(--ams-aspect-ratio-3-4) !important;
168
+ }
169
+ .ams-aspect-ratio-1-1 {
170
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
171
+ aspect-ratio: var(--ams-aspect-ratio-1-1) !important;
172
+ }
173
+ .ams-aspect-ratio-4-3 {
174
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
175
+ aspect-ratio: var(--ams-aspect-ratio-4-3) !important;
176
+ }
177
+ .ams-aspect-ratio-16-9 {
178
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
179
+ aspect-ratio: var(--ams-aspect-ratio-16-9) !important;
180
+ }
181
+ .ams-aspect-ratio-16-5 {
182
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
183
+ aspect-ratio: var(--ams-aspect-ratio-16-5) !important;
184
+ }
185
+
186
+ /**
187
+ * @license EUPL-1.2+
188
+ * Copyright Gemeente Amsterdam
189
+ */
190
+ .ams-avatar {
191
+ aspect-ratio: var(--ams-avatar-aspect-ratio);
192
+ background-color: var(--ams-avatar-background-color);
193
+ border-color: var(--ams-avatar-border-color);
194
+ border-radius: 50%;
195
+ border-style: var(--ams-avatar-border-style);
196
+ border-width: var(--ams-avatar-border-width);
197
+ color: var(--ams-avatar-color);
198
+ display: inline-flex;
199
+ font-family: var(--ams-avatar-font-family);
200
+ font-size: var(--ams-avatar-font-size);
201
+ inline-size: calc(var(--ams-avatar-line-height) * var(--ams-avatar-font-size));
202
+ line-height: var(--ams-avatar-line-height);
203
+ padding-block: var(--ams-avatar-padding-block);
204
+ padding-inline: var(--ams-avatar-padding-inline);
205
+ place-content: center;
206
+ }
207
+ .ams-avatar svg {
208
+ fill: currentColor;
209
+ }
210
+
211
+ .ams-avatar--has-image {
212
+ border: none;
213
+ 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));
214
+ overflow: hidden;
215
+ padding-block: 0;
216
+ padding-inline: 0;
217
+ vertical-align: middle; /* Remove ‘phantom’ white space when image doesn’t load */
218
+ }
219
+
220
+ .ams-avatar--azure {
221
+ background-color: var(--ams-avatar-azure-background-color);
222
+ border-color: var(--ams-avatar-azure-border-color);
223
+ color: var(--ams-avatar-azure-color);
224
+ }
225
+
226
+ .ams-avatar--green {
227
+ background-color: var(--ams-avatar-green-background-color);
228
+ border-color: var(--ams-avatar-green-border-color);
229
+ color: var(--ams-avatar-green-color);
230
+ }
231
+
232
+ .ams-avatar--lime {
233
+ background-color: var(--ams-avatar-lime-background-color);
234
+ border-color: var(--ams-avatar-lime-border-color);
235
+ color: var(--ams-avatar-lime-color);
236
+ }
237
+
238
+ .ams-avatar--magenta {
239
+ background-color: var(--ams-avatar-magenta-background-color);
240
+ border-color: var(--ams-avatar-magenta-border-color);
241
+ color: var(--ams-avatar-magenta-color);
242
+ }
243
+
244
+ .ams-avatar--orange {
245
+ background-color: var(--ams-avatar-orange-background-color);
246
+ border-color: var(--ams-avatar-orange-border-color);
247
+ color: var(--ams-avatar-orange-color);
248
+ }
249
+
250
+ .ams-avatar--yellow {
251
+ background-color: var(--ams-avatar-yellow-background-color);
252
+ border-color: var(--ams-avatar-yellow-border-color);
253
+ color: var(--ams-avatar-yellow-color);
254
+ }
255
+
256
+ /**
257
+ * @license EUPL-1.2+
258
+ * Copyright Gemeente Amsterdam
259
+ */
260
+ .ams-badge {
261
+ background-color: var(--ams-badge-background-color);
262
+ color: var(--ams-badge-color);
263
+ display: inline-block;
264
+ font-family: var(--ams-badge-font-family);
265
+ font-size: var(--ams-badge-font-size);
266
+ font-weight: var(--ams-badge-font-weight);
267
+ line-height: var(--ams-badge-line-height);
268
+ padding-inline: var(--ams-badge-padding-inline);
269
+ /* These CSS declarations have a fallback, so it's safe to use them. */
270
+ /* stylelint-disable-next-line plugin/use-baseline */
271
+ hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
272
+ /* stylelint-disable-next-line plugin/use-baseline */
273
+ hyphens: auto;
274
+ overflow-wrap: break-word;
275
+ text-rendering: optimizeLegibility;
276
+ -moz-text-size-adjust: none;
277
+ -webkit-text-size-adjust: none;
278
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
279
+ /* stylelint-disable-next-line plugin/use-baseline */
280
+ text-size-adjust: none;
281
+ }
282
+
283
+ .ams-badge--azure {
284
+ background-color: var(--ams-badge-azure-background-color);
285
+ color: var(--ams-badge-azure-color);
286
+ }
287
+
288
+ .ams-badge--lime {
289
+ background-color: var(--ams-badge-lime-background-color);
290
+ color: var(--ams-badge-lime-color);
291
+ }
292
+
293
+ .ams-badge--magenta {
294
+ background-color: var(--ams-badge-magenta-background-color);
295
+ color: var(--ams-badge-magenta-color);
296
+ }
297
+
298
+ .ams-badge--orange {
299
+ background-color: var(--ams-badge-orange-background-color);
300
+ color: var(--ams-badge-orange-color);
301
+ }
302
+
303
+ .ams-badge--purple {
304
+ background-color: var(--ams-badge-purple-background-color);
305
+ color: var(--ams-badge-purple-color);
306
+ }
307
+
308
+ .ams-badge--red {
309
+ background-color: var(--ams-badge-red-background-color);
310
+ color: var(--ams-badge-red-color);
311
+ }
312
+
313
+ .ams-badge--yellow {
314
+ background-color: var(--ams-badge-yellow-background-color);
315
+ color: var(--ams-badge-yellow-color);
316
+ }
317
+
318
+ /**
319
+ * @license EUPL-1.2+
320
+ * Copyright Gemeente Amsterdam
321
+ */
322
+ .ams-blockquote {
323
+ box-sizing: border-box;
324
+ break-inside: avoid;
325
+ color: var(--ams-blockquote-color);
326
+ font-family: var(--ams-blockquote-font-family);
327
+ font-size: var(--ams-blockquote-font-size);
328
+ font-weight: var(--ams-blockquote-font-weight);
329
+ line-height: var(--ams-blockquote-line-height);
330
+ quotes: "“" "”";
331
+ /* These CSS declarations have a fallback, so it's safe to use them. */
332
+ /* stylelint-disable-next-line plugin/use-baseline */
333
+ hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
334
+ /* stylelint-disable-next-line plugin/use-baseline */
335
+ hyphens: auto;
336
+ overflow-wrap: break-word;
337
+ text-rendering: optimizeLegibility;
338
+ -moz-text-size-adjust: none;
339
+ -webkit-text-size-adjust: none;
340
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
341
+ /* stylelint-disable-next-line plugin/use-baseline */
342
+ text-size-adjust: none;
343
+ margin-block: 0;
344
+ margin-inline: 0;
345
+ }
346
+ .ams-blockquote::before {
347
+ content: open-quote;
348
+ }
349
+ .ams-blockquote::after {
350
+ content: close-quote;
351
+ }
352
+
353
+ .ams-blockquote--inverse {
354
+ color: var(--ams-blockquote-inverse-color);
355
+ }
356
+
357
+ /**
358
+ * @license EUPL-1.2+
359
+ * Copyright Gemeente Amsterdam
360
+ */
361
+ .ams-breadcrumb {
362
+ /*
363
+ * If break-after is supported, use it to avoid Breadcrumbs from being the last item on a page when printed.
364
+ * If it is not supported, it is ignored.
365
+ */
366
+ /* stylelint-disable-next-line plugin/use-baseline */
367
+ break-after: avoid;
368
+ font-family: var(--ams-breadcrumb-font-family);
369
+ font-size: var(--ams-breadcrumb-font-size);
370
+ font-weight: var(--ams-breadcrumb-font-weight);
371
+ line-height: var(--ams-breadcrumb-line-height);
372
+ }
373
+
374
+ .ams-breadcrumb__list {
375
+ box-sizing: border-box;
376
+ break-inside: avoid;
377
+ /* These CSS declarations have a fallback, so it's safe to use them. */
378
+ /* stylelint-disable-next-line plugin/use-baseline */
379
+ hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
380
+ /* stylelint-disable-next-line plugin/use-baseline */
381
+ hyphens: auto;
382
+ overflow-wrap: break-word;
383
+ text-rendering: optimizeLegibility;
384
+ -moz-text-size-adjust: none;
385
+ -webkit-text-size-adjust: none;
386
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
387
+ /* stylelint-disable-next-line plugin/use-baseline */
388
+ text-size-adjust: none;
389
+ margin-block: 0;
390
+ padding-inline: 0;
391
+ }
392
+
393
+ .ams-breadcrumb__item {
394
+ display: inline;
395
+ }
396
+
397
+ .ams-breadcrumb__item:not(:last-child)::after {
398
+ background-image: var(--ams-breadcrumb-separator-background-image);
399
+ background-repeat: no-repeat;
400
+ block-size: var(--ams-breadcrumb-separator-block-size);
401
+ content: "";
402
+ display: inline-block;
403
+ inline-size: var(--ams-breadcrumb-separator-inline-size);
404
+ margin-inline: var(--ams-breadcrumb-separator-margin-inline);
405
+ }
406
+
407
+ .ams-breadcrumb__link {
408
+ color: var(--ams-breadcrumb-link-color);
409
+ outline-offset: var(--ams-breadcrumb-link-outline-offset);
410
+ text-decoration-line: var(--ams-breadcrumb-link-text-decoration-line);
411
+ text-decoration-thickness: var(--ams-breadcrumb-link-text-decoration-thickness);
412
+ text-underline-offset: var(--ams-breadcrumb-link-text-underline-offset);
413
+ }
414
+ .ams-breadcrumb__link:hover {
415
+ color: var(--ams-breadcrumb-link-hover-color);
416
+ text-decoration-line: var(--ams-breadcrumb-link-hover-text-decoration-line);
417
+ }
418
+
419
+ /**
420
+ * @license EUPL-1.2+
421
+ * Copyright Gemeente Amsterdam
422
+ */
423
+ /**
424
+ * @license EUPL-1.2+
425
+ * Copyright Gemeente Amsterdam
426
+ */
427
+ /**
428
+ * CSS Custom properties cannot be used in media queries.
429
+ * We resort to Sass variables for our breakpoint values.
430
+ */
431
+ /** The breakpoint at which medium screens start. */
432
+ /** The breakpoint at which wide screens start. */
433
+ /**
434
+ * @license EUPL-1.2+
435
+ * Copyright Gemeente Amsterdam
436
+ */
437
+ /**
438
+ * @license EUPL-1.2+
439
+ * Copyright Gemeente Amsterdam
440
+ */
441
+ /**
442
+ * @license EUPL-1.2+
443
+ * Copyright Gemeente Amsterdam
444
+ */
445
+ /**
446
+ * @license EUPL-1.2+
447
+ * Copyright Gemeente Amsterdam
448
+ */
449
+ /* stylelint-disable no-invalid-position-declaration */
450
+ .ams-grid {
451
+ column-gap: var(--ams-grid-column-gap);
452
+ display: grid;
453
+ grid-template-columns: repeat(var(--ams-grid-column-count), 1fr);
454
+ padding-inline: var(--ams-grid-padding-inline);
455
+ row-gap: var(--ams-grid-row-gap-xl);
456
+ }
457
+ @media screen and (min-width: 37.5rem) {
458
+ .ams-grid {
459
+ grid-template-columns: repeat(var(--ams-grid-medium-column-count), 1fr);
460
+ padding-inline: var(--ams-grid-medium-padding-inline);
461
+ }
462
+ }
463
+ @media screen and (min-width: 72.5rem) {
464
+ .ams-grid {
465
+ grid-template-columns: repeat(var(--ams-grid-wide-column-count), 1fr);
466
+ padding-inline: var(--ams-grid-wide-padding-inline);
467
+ }
468
+ }
469
+
470
+ .ams-grid--gap-vertical--none {
471
+ row-gap: initial;
472
+ }
473
+
474
+ .ams-grid--gap-vertical--large {
475
+ row-gap: var(--ams-grid-row-gap-l);
476
+ }
477
+
478
+ .ams-grid--gap-vertical--2x-large {
479
+ row-gap: var(--ams-grid-row-gap-2xl);
480
+ }
481
+
482
+ .ams-grid--padding-bottom--large {
483
+ padding-block-end: var(--ams-grid-padding-block-l);
484
+ }
485
+
486
+ .ams-grid--padding-bottom--x-large {
487
+ padding-block-end: var(--ams-grid-padding-block-xl);
488
+ }
489
+
490
+ .ams-grid--padding-bottom--2x-large {
491
+ padding-block-end: var(--ams-grid-padding-block-2xl);
492
+ }
493
+
494
+ .ams-grid--padding-top--large {
495
+ padding-block-start: var(--ams-grid-padding-block-l);
496
+ }
497
+
498
+ .ams-grid--padding-top--x-large {
499
+ padding-block-start: var(--ams-grid-padding-block-xl);
500
+ }
501
+
502
+ .ams-grid--padding-top--2x-large {
503
+ padding-block-start: var(--ams-grid-padding-block-2xl);
504
+ }
505
+
506
+ .ams-grid--padding-vertical--large {
507
+ padding-block: var(--ams-grid-padding-block-l);
508
+ }
509
+
510
+ .ams-grid--padding-vertical--x-large {
511
+ padding-block: var(--ams-grid-padding-block-xl);
512
+ }
513
+
514
+ .ams-grid--padding-vertical--2x-large {
515
+ padding-block: var(--ams-grid-padding-block-2xl);
516
+ }
517
+
518
+ .ams-grid__cell--span-all {
519
+ grid-column: 1/-1;
520
+ }
521
+
522
+ .ams-grid__cell--span-1 {
523
+ grid-column-end: span 1;
524
+ }
525
+
526
+ .ams-grid__cell--start-1 {
527
+ grid-column-start: 1;
528
+ }
529
+
530
+ .ams-grid__cell--span-2 {
531
+ grid-column-end: span 2;
532
+ }
533
+
534
+ .ams-grid__cell--start-2 {
535
+ grid-column-start: 2;
536
+ }
537
+
538
+ .ams-grid__cell--span-3 {
539
+ grid-column-end: span 3;
540
+ }
541
+
542
+ .ams-grid__cell--start-3 {
543
+ grid-column-start: 3;
544
+ }
545
+
546
+ .ams-grid__cell--span-4 {
547
+ grid-column-end: span 4;
548
+ }
549
+
550
+ .ams-grid__cell--start-4 {
551
+ grid-column-start: 4;
552
+ }
553
+
554
+ .ams-grid__cell--span-5 {
555
+ grid-column-end: span 5;
556
+ }
557
+
558
+ .ams-grid__cell--start-5 {
559
+ grid-column-start: 5;
560
+ }
561
+
562
+ .ams-grid__cell--span-6 {
563
+ grid-column-end: span 6;
564
+ }
565
+
566
+ .ams-grid__cell--start-6 {
567
+ grid-column-start: 6;
568
+ }
569
+
570
+ .ams-grid__cell--span-7 {
571
+ grid-column-end: span 7;
572
+ }
573
+
574
+ .ams-grid__cell--start-7 {
575
+ grid-column-start: 7;
576
+ }
577
+
578
+ .ams-grid__cell--span-8 {
579
+ grid-column-end: span 8;
580
+ }
581
+
582
+ .ams-grid__cell--start-8 {
583
+ grid-column-start: 8;
584
+ }
585
+
586
+ .ams-grid__cell--span-9 {
587
+ grid-column-end: span 9;
588
+ }
589
+
590
+ .ams-grid__cell--start-9 {
591
+ grid-column-start: 9;
592
+ }
593
+
594
+ .ams-grid__cell--span-10 {
595
+ grid-column-end: span 10;
596
+ }
597
+
598
+ .ams-grid__cell--start-10 {
599
+ grid-column-start: 10;
600
+ }
601
+
602
+ .ams-grid__cell--span-11 {
603
+ grid-column-end: span 11;
604
+ }
605
+
606
+ .ams-grid__cell--start-11 {
607
+ grid-column-start: 11;
608
+ }
609
+
610
+ .ams-grid__cell--span-12 {
611
+ grid-column-end: span 12;
612
+ }
613
+
614
+ .ams-grid__cell--start-12 {
615
+ grid-column-start: 12;
616
+ }
617
+
618
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
619
+ .ams-grid__cell--span-1-medium {
620
+ grid-column-end: span 1;
621
+ }
622
+ }
623
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
624
+ .ams-grid__cell--start-1-medium {
625
+ grid-column-start: 1;
626
+ }
627
+ }
628
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
629
+ .ams-grid__cell--span-2-medium {
630
+ grid-column-end: span 2;
631
+ }
632
+ }
633
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
634
+ .ams-grid__cell--start-2-medium {
635
+ grid-column-start: 2;
636
+ }
637
+ }
638
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
639
+ .ams-grid__cell--span-3-medium {
640
+ grid-column-end: span 3;
641
+ }
642
+ }
643
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
644
+ .ams-grid__cell--start-3-medium {
645
+ grid-column-start: 3;
646
+ }
647
+ }
648
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
649
+ .ams-grid__cell--span-4-medium {
650
+ grid-column-end: span 4;
651
+ }
652
+ }
653
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
654
+ .ams-grid__cell--start-4-medium {
655
+ grid-column-start: 4;
656
+ }
657
+ }
658
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
659
+ .ams-grid__cell--span-5-medium {
660
+ grid-column-end: span 5;
661
+ }
662
+ }
663
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
664
+ .ams-grid__cell--start-5-medium {
665
+ grid-column-start: 5;
666
+ }
667
+ }
668
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
669
+ .ams-grid__cell--span-6-medium {
670
+ grid-column-end: span 6;
671
+ }
672
+ }
673
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
674
+ .ams-grid__cell--start-6-medium {
675
+ grid-column-start: 6;
676
+ }
677
+ }
678
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
679
+ .ams-grid__cell--span-7-medium {
680
+ grid-column-end: span 7;
681
+ }
682
+ }
683
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
684
+ .ams-grid__cell--start-7-medium {
685
+ grid-column-start: 7;
686
+ }
687
+ }
688
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
689
+ .ams-grid__cell--span-8-medium {
690
+ grid-column-end: span 8;
691
+ }
692
+ }
693
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
694
+ .ams-grid__cell--start-8-medium {
695
+ grid-column-start: 8;
696
+ }
697
+ }
698
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
699
+ .ams-grid__cell--span-9-medium {
700
+ grid-column-end: span 9;
701
+ }
702
+ }
703
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
704
+ .ams-grid__cell--start-9-medium {
705
+ grid-column-start: 9;
706
+ }
707
+ }
708
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
709
+ .ams-grid__cell--span-10-medium {
710
+ grid-column-end: span 10;
711
+ }
712
+ }
713
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
714
+ .ams-grid__cell--start-10-medium {
715
+ grid-column-start: 10;
716
+ }
717
+ }
718
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
719
+ .ams-grid__cell--span-11-medium {
720
+ grid-column-end: span 11;
721
+ }
722
+ }
723
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
724
+ .ams-grid__cell--start-11-medium {
725
+ grid-column-start: 11;
726
+ }
727
+ }
728
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
729
+ .ams-grid__cell--span-12-medium {
730
+ grid-column-end: span 12;
731
+ }
732
+ }
733
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
734
+ .ams-grid__cell--start-12-medium {
735
+ grid-column-start: 12;
736
+ }
737
+ }
738
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
739
+ .ams-grid__cell--span-1-wide {
740
+ grid-column-end: span 1;
741
+ }
742
+ }
743
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
744
+ .ams-grid__cell--start-1-wide {
745
+ grid-column-start: 1;
746
+ }
747
+ }
748
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
749
+ .ams-grid__cell--span-2-wide {
750
+ grid-column-end: span 2;
751
+ }
752
+ }
753
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
754
+ .ams-grid__cell--start-2-wide {
755
+ grid-column-start: 2;
756
+ }
757
+ }
758
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
759
+ .ams-grid__cell--span-3-wide {
760
+ grid-column-end: span 3;
761
+ }
762
+ }
763
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
764
+ .ams-grid__cell--start-3-wide {
765
+ grid-column-start: 3;
766
+ }
767
+ }
768
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
769
+ .ams-grid__cell--span-4-wide {
770
+ grid-column-end: span 4;
771
+ }
772
+ }
773
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
774
+ .ams-grid__cell--start-4-wide {
775
+ grid-column-start: 4;
776
+ }
777
+ }
778
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
779
+ .ams-grid__cell--span-5-wide {
780
+ grid-column-end: span 5;
781
+ }
782
+ }
783
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
784
+ .ams-grid__cell--start-5-wide {
785
+ grid-column-start: 5;
786
+ }
787
+ }
788
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
789
+ .ams-grid__cell--span-6-wide {
790
+ grid-column-end: span 6;
791
+ }
792
+ }
793
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
794
+ .ams-grid__cell--start-6-wide {
795
+ grid-column-start: 6;
796
+ }
797
+ }
798
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
799
+ .ams-grid__cell--span-7-wide {
800
+ grid-column-end: span 7;
801
+ }
802
+ }
803
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
804
+ .ams-grid__cell--start-7-wide {
805
+ grid-column-start: 7;
806
+ }
807
+ }
808
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
809
+ .ams-grid__cell--span-8-wide {
810
+ grid-column-end: span 8;
811
+ }
812
+ }
813
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
814
+ .ams-grid__cell--start-8-wide {
815
+ grid-column-start: 8;
816
+ }
817
+ }
818
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
819
+ .ams-grid__cell--span-9-wide {
820
+ grid-column-end: span 9;
821
+ }
822
+ }
823
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
824
+ .ams-grid__cell--start-9-wide {
825
+ grid-column-start: 9;
826
+ }
827
+ }
828
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
829
+ .ams-grid__cell--span-10-wide {
830
+ grid-column-end: span 10;
831
+ }
832
+ }
833
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
834
+ .ams-grid__cell--start-10-wide {
835
+ grid-column-start: 10;
836
+ }
837
+ }
838
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
839
+ .ams-grid__cell--span-11-wide {
840
+ grid-column-end: span 11;
841
+ }
842
+ }
843
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
844
+ .ams-grid__cell--start-11-wide {
845
+ grid-column-start: 11;
846
+ }
847
+ }
848
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
849
+ .ams-grid__cell--span-12-wide {
850
+ grid-column-end: span 12;
851
+ }
852
+ }
853
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
854
+ .ams-grid__cell--start-12-wide {
855
+ grid-column-start: 12;
856
+ }
857
+ }
858
+ /**
859
+ * @license EUPL-1.2+
860
+ * Copyright Gemeente Amsterdam
861
+ */
862
+ .ams-breakout {
863
+ column-gap: var(--ams-grid-column-gap);
864
+ display: grid;
865
+ grid-template-columns: repeat(var(--ams-grid-column-count), 1fr);
866
+ padding-inline: var(--ams-grid-padding-inline);
867
+ row-gap: var(--ams-grid-row-gap-xl);
868
+ }
869
+ @media screen and (min-width: 37.5rem) {
870
+ .ams-breakout {
871
+ grid-template-columns: repeat(var(--ams-grid-medium-column-count), 1fr);
872
+ padding-inline: var(--ams-grid-medium-padding-inline);
873
+ }
874
+ }
875
+ @media screen and (min-width: 72.5rem) {
876
+ .ams-breakout {
877
+ grid-template-columns: repeat(var(--ams-grid-wide-column-count), 1fr);
878
+ padding-inline: var(--ams-grid-wide-padding-inline);
879
+ }
880
+ }
881
+
882
+ .ams-breakout--gap-vertical--none {
883
+ row-gap: initial;
884
+ }
885
+
886
+ .ams-breakout--gap-vertical--large {
887
+ row-gap: var(--ams-grid-row-gap-l);
888
+ }
889
+
890
+ .ams-breakout--gap-vertical--2x-large {
891
+ row-gap: var(--ams-grid-row-gap-2xl);
892
+ }
893
+
894
+ .ams-breakout--padding-bottom--large {
895
+ padding-block-end: var(--ams-grid-padding-block-l);
896
+ }
897
+
898
+ .ams-breakout--padding-bottom--x-large {
899
+ padding-block-end: var(--ams-grid-padding-block-xl);
900
+ }
901
+
902
+ .ams-breakout--padding-bottom--2x-large {
903
+ padding-block-end: var(--ams-grid-padding-block-2xl);
904
+ }
905
+
906
+ .ams-breakout--padding-top--large {
907
+ padding-block-start: var(--ams-grid-padding-block-l);
908
+ }
909
+
910
+ .ams-breakout--padding-top--x-large {
911
+ padding-block-start: var(--ams-grid-padding-block-xl);
912
+ }
913
+
914
+ .ams-breakout--padding-top--2x-large {
915
+ padding-block-start: var(--ams-grid-padding-block-2xl);
916
+ }
917
+
918
+ .ams-breakout--padding-vertical--large {
919
+ padding-block: var(--ams-grid-padding-block-l);
920
+ }
921
+
922
+ .ams-breakout--padding-vertical--x-large {
923
+ padding-block: var(--ams-grid-padding-block-xl);
924
+ }
925
+
926
+ .ams-breakout--padding-vertical--2x-large {
927
+ padding-block: var(--ams-grid-padding-block-2xl);
928
+ }
929
+
930
+ .ams-breakout__cell--col-span-all {
931
+ grid-column: 1/-1;
932
+ }
933
+
934
+ .ams-breakout__cell--col-span-1 {
935
+ grid-column-end: span 1;
936
+ }
937
+
938
+ .ams-breakout__cell--col-start-1 {
939
+ grid-column-start: 1;
940
+ }
941
+
942
+ .ams-breakout__cell--col-span-2 {
943
+ grid-column-end: span 2;
944
+ }
945
+
946
+ .ams-breakout__cell--col-start-2 {
947
+ grid-column-start: 2;
948
+ }
949
+
950
+ .ams-breakout__cell--col-span-3 {
951
+ grid-column-end: span 3;
952
+ }
953
+
954
+ .ams-breakout__cell--col-start-3 {
955
+ grid-column-start: 3;
956
+ }
957
+
958
+ .ams-breakout__cell--col-span-4 {
959
+ grid-column-end: span 4;
960
+ }
961
+
962
+ .ams-breakout__cell--col-start-4 {
963
+ grid-column-start: 4;
964
+ }
965
+
966
+ .ams-breakout__cell--col-span-5 {
967
+ grid-column-end: span 5;
968
+ }
969
+
970
+ .ams-breakout__cell--col-start-5 {
971
+ grid-column-start: 5;
972
+ }
973
+
974
+ .ams-breakout__cell--col-span-6 {
975
+ grid-column-end: span 6;
976
+ }
977
+
978
+ .ams-breakout__cell--col-start-6 {
979
+ grid-column-start: 6;
980
+ }
981
+
982
+ .ams-breakout__cell--col-span-7 {
983
+ grid-column-end: span 7;
984
+ }
985
+
986
+ .ams-breakout__cell--col-start-7 {
987
+ grid-column-start: 7;
988
+ }
989
+
990
+ .ams-breakout__cell--col-span-8 {
991
+ grid-column-end: span 8;
992
+ }
993
+
994
+ .ams-breakout__cell--col-start-8 {
995
+ grid-column-start: 8;
996
+ }
997
+
998
+ .ams-breakout__cell--col-span-9 {
999
+ grid-column-end: span 9;
1000
+ }
1001
+
1002
+ .ams-breakout__cell--col-start-9 {
1003
+ grid-column-start: 9;
1004
+ }
1005
+
1006
+ .ams-breakout__cell--col-span-10 {
1007
+ grid-column-end: span 10;
1008
+ }
1009
+
1010
+ .ams-breakout__cell--col-start-10 {
1011
+ grid-column-start: 10;
1012
+ }
1013
+
1014
+ .ams-breakout__cell--col-span-11 {
1015
+ grid-column-end: span 11;
1016
+ }
1017
+
1018
+ .ams-breakout__cell--col-start-11 {
1019
+ grid-column-start: 11;
1020
+ }
1021
+
1022
+ .ams-breakout__cell--col-span-12 {
1023
+ grid-column-end: span 12;
1024
+ }
1025
+
1026
+ .ams-breakout__cell--col-start-12 {
1027
+ grid-column-start: 12;
1028
+ }
1029
+
1030
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
1031
+ .ams-breakout__cell--col-span-1-medium {
1032
+ grid-column-end: span 1;
1033
+ }
1034
+ }
1035
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
1036
+ .ams-breakout__cell--col-start-1-medium {
1037
+ grid-column-start: 1;
1038
+ }
1039
+ }
1040
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
1041
+ .ams-breakout__cell--col-span-2-medium {
1042
+ grid-column-end: span 2;
1043
+ }
1044
+ }
1045
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
1046
+ .ams-breakout__cell--col-start-2-medium {
1047
+ grid-column-start: 2;
1048
+ }
1049
+ }
1050
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
1051
+ .ams-breakout__cell--col-span-3-medium {
1052
+ grid-column-end: span 3;
1053
+ }
1054
+ }
1055
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
1056
+ .ams-breakout__cell--col-start-3-medium {
1057
+ grid-column-start: 3;
1058
+ }
1059
+ }
1060
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
1061
+ .ams-breakout__cell--col-span-4-medium {
1062
+ grid-column-end: span 4;
1063
+ }
1064
+ }
1065
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
1066
+ .ams-breakout__cell--col-start-4-medium {
1067
+ grid-column-start: 4;
1068
+ }
1069
+ }
1070
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
1071
+ .ams-breakout__cell--col-span-5-medium {
1072
+ grid-column-end: span 5;
1073
+ }
1074
+ }
1075
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
1076
+ .ams-breakout__cell--col-start-5-medium {
1077
+ grid-column-start: 5;
1078
+ }
1079
+ }
1080
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
1081
+ .ams-breakout__cell--col-span-6-medium {
1082
+ grid-column-end: span 6;
1083
+ }
1084
+ }
1085
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
1086
+ .ams-breakout__cell--col-start-6-medium {
1087
+ grid-column-start: 6;
1088
+ }
1089
+ }
1090
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
1091
+ .ams-breakout__cell--col-span-7-medium {
1092
+ grid-column-end: span 7;
1093
+ }
1094
+ }
1095
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
1096
+ .ams-breakout__cell--col-start-7-medium {
1097
+ grid-column-start: 7;
1098
+ }
1099
+ }
1100
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
1101
+ .ams-breakout__cell--col-span-8-medium {
1102
+ grid-column-end: span 8;
1103
+ }
1104
+ }
1105
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
1106
+ .ams-breakout__cell--col-start-8-medium {
1107
+ grid-column-start: 8;
1108
+ }
1109
+ }
1110
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
1111
+ .ams-breakout__cell--col-span-9-medium {
1112
+ grid-column-end: span 9;
1113
+ }
1114
+ }
1115
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
1116
+ .ams-breakout__cell--col-start-9-medium {
1117
+ grid-column-start: 9;
1118
+ }
1119
+ }
1120
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
1121
+ .ams-breakout__cell--col-span-10-medium {
1122
+ grid-column-end: span 10;
1123
+ }
1124
+ }
1125
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
1126
+ .ams-breakout__cell--col-start-10-medium {
1127
+ grid-column-start: 10;
1128
+ }
1129
+ }
1130
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
1131
+ .ams-breakout__cell--col-span-11-medium {
1132
+ grid-column-end: span 11;
1133
+ }
1134
+ }
1135
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
1136
+ .ams-breakout__cell--col-start-11-medium {
1137
+ grid-column-start: 11;
1138
+ }
1139
+ }
1140
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
1141
+ .ams-breakout__cell--col-span-12-medium {
1142
+ grid-column-end: span 12;
1143
+ }
1144
+ }
1145
+ @media screen and (min-width: 37.5rem) and (min-width: 37.5rem) {
1146
+ .ams-breakout__cell--col-start-12-medium {
1147
+ grid-column-start: 12;
1148
+ }
1149
+ }
1150
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
1151
+ .ams-breakout__cell--col-span-1-wide {
1152
+ grid-column-end: span 1;
1153
+ }
1154
+ }
1155
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
1156
+ .ams-breakout__cell--col-start-1-wide {
1157
+ grid-column-start: 1;
1158
+ }
1159
+ }
1160
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
1161
+ .ams-breakout__cell--col-span-2-wide {
1162
+ grid-column-end: span 2;
1163
+ }
1164
+ }
1165
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
1166
+ .ams-breakout__cell--col-start-2-wide {
1167
+ grid-column-start: 2;
1168
+ }
1169
+ }
1170
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
1171
+ .ams-breakout__cell--col-span-3-wide {
1172
+ grid-column-end: span 3;
1173
+ }
1174
+ }
1175
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
1176
+ .ams-breakout__cell--col-start-3-wide {
1177
+ grid-column-start: 3;
1178
+ }
1179
+ }
1180
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
1181
+ .ams-breakout__cell--col-span-4-wide {
1182
+ grid-column-end: span 4;
1183
+ }
1184
+ }
1185
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
1186
+ .ams-breakout__cell--col-start-4-wide {
1187
+ grid-column-start: 4;
1188
+ }
1189
+ }
1190
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
1191
+ .ams-breakout__cell--col-span-5-wide {
1192
+ grid-column-end: span 5;
1193
+ }
1194
+ }
1195
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
1196
+ .ams-breakout__cell--col-start-5-wide {
1197
+ grid-column-start: 5;
1198
+ }
1199
+ }
1200
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
1201
+ .ams-breakout__cell--col-span-6-wide {
1202
+ grid-column-end: span 6;
1203
+ }
1204
+ }
1205
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
1206
+ .ams-breakout__cell--col-start-6-wide {
1207
+ grid-column-start: 6;
1208
+ }
1209
+ }
1210
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
1211
+ .ams-breakout__cell--col-span-7-wide {
1212
+ grid-column-end: span 7;
1213
+ }
1214
+ }
1215
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
1216
+ .ams-breakout__cell--col-start-7-wide {
1217
+ grid-column-start: 7;
1218
+ }
1219
+ }
1220
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
1221
+ .ams-breakout__cell--col-span-8-wide {
1222
+ grid-column-end: span 8;
1223
+ }
1224
+ }
1225
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
1226
+ .ams-breakout__cell--col-start-8-wide {
1227
+ grid-column-start: 8;
1228
+ }
1229
+ }
1230
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
1231
+ .ams-breakout__cell--col-span-9-wide {
1232
+ grid-column-end: span 9;
1233
+ }
1234
+ }
1235
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
1236
+ .ams-breakout__cell--col-start-9-wide {
1237
+ grid-column-start: 9;
1238
+ }
1239
+ }
1240
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
1241
+ .ams-breakout__cell--col-span-10-wide {
1242
+ grid-column-end: span 10;
1243
+ }
1244
+ }
1245
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
1246
+ .ams-breakout__cell--col-start-10-wide {
1247
+ grid-column-start: 10;
1248
+ }
1249
+ }
1250
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
1251
+ .ams-breakout__cell--col-span-11-wide {
1252
+ grid-column-end: span 11;
1253
+ }
1254
+ }
1255
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
1256
+ .ams-breakout__cell--col-start-11-wide {
1257
+ grid-column-start: 11;
1258
+ }
1259
+ }
1260
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
1261
+ .ams-breakout__cell--col-span-12-wide {
1262
+ grid-column-end: span 12;
1263
+ }
1264
+ }
1265
+ @media screen and (min-width: 72.5rem) and (min-width: 72.5rem) {
1266
+ .ams-breakout__cell--col-start-12-wide {
1267
+ grid-column-start: 12;
1268
+ }
1269
+ }
1270
+ .ams-breakout__cell--has-figure {
1271
+ align-self: end;
1272
+ }
1273
+
1274
+ .ams-breakout__cell--has-spotlight {
1275
+ display: grid; /* Stretches the empty Spotlight vertically. */
1276
+ margin-block: calc(var(--ams-space-xl) * -1);
1277
+ margin-inline: calc(var(--ams-grid-padding-inline) * -1);
1278
+ }
1279
+ @media screen and (min-width: 37.5rem) {
1280
+ .ams-breakout__cell--has-spotlight {
1281
+ margin-inline: calc(var(--ams-grid-medium-padding-inline) * -1);
1282
+ }
1283
+ }
1284
+ @media screen and (min-width: 72.5rem) {
1285
+ .ams-breakout__cell--has-spotlight {
1286
+ margin-inline: calc(var(--ams-grid-wide-padding-inline) * -1);
1287
+ }
1288
+ }
1289
+ .ams-breakout--gap-vertical--small > .ams-breakout__cell--has-spotlight {
1290
+ margin-block: calc(var(--ams-space-l) * -1);
1291
+ }
1292
+ .ams-breakout--gap-vertical--large > .ams-breakout__cell--has-spotlight {
1293
+ margin-block: calc(var(--ams-space-2xl) * -1);
1294
+ }
1295
+
1296
+ .ams-breakout__cell--row-span-1 {
1297
+ grid-row-end: span 1;
1298
+ }
1299
+
1300
+ .ams-breakout__cell--row-start-1 {
1301
+ grid-row-start: 1;
1302
+ }
1303
+
1304
+ .ams-breakout__cell--row-span-2 {
1305
+ grid-row-end: span 2;
1306
+ }
1307
+
1308
+ .ams-breakout__cell--row-start-2 {
1309
+ grid-row-start: 2;
1310
+ }
1311
+
1312
+ .ams-breakout__cell--row-span-3 {
1313
+ grid-row-end: span 3;
1314
+ }
1315
+
1316
+ .ams-breakout__cell--row-start-3 {
1317
+ grid-row-start: 3;
1318
+ }
1319
+
1320
+ .ams-breakout__cell--row-span-4 {
1321
+ grid-row-end: span 4;
1322
+ }
1323
+
1324
+ .ams-breakout__cell--row-start-4 {
1325
+ grid-row-start: 4;
1326
+ }
1327
+
1328
+ @media screen and (min-width: 37.5rem) {
1329
+ .ams-breakout__cell--row-span-1-medium {
1330
+ grid-row-end: span 1;
1331
+ }
1332
+ .ams-breakout__cell--row-start-1-medium {
1333
+ grid-row-start: 1;
1334
+ }
1335
+ .ams-breakout__cell--row-span-2-medium {
1336
+ grid-row-end: span 2;
1337
+ }
1338
+ .ams-breakout__cell--row-start-2-medium {
1339
+ grid-row-start: 2;
1340
+ }
1341
+ .ams-breakout__cell--row-span-3-medium {
1342
+ grid-row-end: span 3;
1343
+ }
1344
+ .ams-breakout__cell--row-start-3-medium {
1345
+ grid-row-start: 3;
1346
+ }
1347
+ .ams-breakout__cell--row-span-4-medium {
1348
+ grid-row-end: span 4;
1349
+ }
1350
+ .ams-breakout__cell--row-start-4-medium {
1351
+ grid-row-start: 4;
1352
+ }
1353
+ }
1354
+ @media screen and (min-width: 72.5rem) {
1355
+ .ams-breakout__cell--row-span-1-wide {
1356
+ grid-row-end: span 1;
1357
+ }
1358
+ .ams-breakout__cell--row-start-1-wide {
1359
+ grid-row-start: 1;
1360
+ }
1361
+ .ams-breakout__cell--row-span-2-wide {
1362
+ grid-row-end: span 2;
1363
+ }
1364
+ .ams-breakout__cell--row-start-2-wide {
1365
+ grid-row-start: 2;
1366
+ }
1367
+ .ams-breakout__cell--row-span-3-wide {
1368
+ grid-row-end: span 3;
1369
+ }
1370
+ .ams-breakout__cell--row-start-3-wide {
1371
+ grid-row-start: 3;
1372
+ }
1373
+ .ams-breakout__cell--row-span-4-wide {
1374
+ grid-row-end: span 4;
1375
+ }
1376
+ .ams-breakout__cell--row-start-4-wide {
1377
+ grid-row-start: 4;
1378
+ }
1379
+ }
1380
+ /**
1381
+ * @license EUPL-1.2+
1382
+ * Copyright Gemeente Amsterdam
1383
+ */
1384
+ .ams-button {
1385
+ --ams-icon-line-height: var(--ams-button-line-height);
1386
+ border-style: var(--ams-button-border-style);
1387
+ border-width: var(--ams-button-border-width);
1388
+ cursor: var(--ams-button-cursor);
1389
+ display: inline-flex;
1390
+ font-family: var(--ams-button-font-family);
1391
+ font-size: var(--ams-button-font-size);
1392
+ font-weight: var(--ams-button-font-weight);
1393
+ gap: var(--ams-button-gap);
1394
+ justify-content: center;
1395
+ line-height: var(--ams-button-line-height);
1396
+ outline-offset: var(--ams-button-outline-offset);
1397
+ padding-block: var(--ams-button-padding-block);
1398
+ padding-inline: var(--ams-button-padding-inline);
1399
+ touch-action: manipulation;
1400
+ /* These CSS declarations have a fallback, so it's safe to use them. */
1401
+ /* stylelint-disable-next-line plugin/use-baseline */
1402
+ hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
1403
+ /* stylelint-disable-next-line plugin/use-baseline */
1404
+ hyphens: auto;
1405
+ overflow-wrap: break-word;
1406
+ text-rendering: optimizeLegibility;
1407
+ -moz-text-size-adjust: none;
1408
+ -webkit-text-size-adjust: none;
1409
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
1410
+ /* stylelint-disable-next-line plugin/use-baseline */
1411
+ text-size-adjust: none;
1412
+ margin-block: 0;
1413
+ margin-inline: 0;
1414
+ }
1415
+ .ams-button:disabled, .ams-button[aria-disabled=true] {
1416
+ cursor: var(--ams-button-disabled-cursor);
1417
+ }
1418
+
1419
+ .ams-button--primary {
1420
+ background-color: var(--ams-button-primary-background-color);
1421
+ border-color: var(--ams-button-primary-border-color);
1422
+ color: var(--ams-button-primary-color);
1423
+ }
1424
+ .ams-button--primary:disabled,
1425
+ .ams-button--primary [aria-disabled=true] {
1426
+ background-color: var(--ams-button-primary-disabled-background-color);
1427
+ border-color: var(--ams-button-primary-disabled-border-color);
1428
+ }
1429
+ .ams-button--primary:hover:not(:disabled, [aria-disabled=true]) {
1430
+ background-color: var(--ams-button-primary-hover-background-color);
1431
+ border-color: var(--ams-button-primary-hover-border-color);
1432
+ }
1433
+
1434
+ .ams-button--secondary {
1435
+ background-color: var(--ams-button-secondary-background-color);
1436
+ border-color: var(--ams-button-secondary-border-color);
1437
+ color: var(--ams-button-secondary-color);
1438
+ }
1439
+ .ams-button--secondary:disabled,
1440
+ .ams-button--secondary [aria-disabled=true] {
1441
+ border-color: var(--ams-button-secondary-disabled-border-color);
1442
+ color: var(--ams-button-secondary-disabled-color);
1443
+ }
1444
+ .ams-button--secondary:hover:not(:disabled, [aria-disabled=true]) {
1445
+ box-shadow: var(--ams-button-secondary-hover-box-shadow);
1446
+ color: var(--ams-button-secondary-hover-color);
1447
+ }
1448
+
1449
+ .ams-button--tertiary {
1450
+ background-color: var(--ams-button-tertiary-background-color);
1451
+ border-color: var(--ams-button-tertiary-border-color);
1452
+ color: var(--ams-button-tertiary-color);
1453
+ }
1454
+ .ams-button--tertiary:disabled,
1455
+ .ams-button--tertiary [aria-disabled=true] {
1456
+ color: var(--ams-button-tertiary-disabled-color);
1457
+ }
1458
+ .ams-button--tertiary:hover:not(:disabled, [aria-disabled=true]) {
1459
+ border-color: var(--ams-button-tertiary-hover-border-color);
1460
+ color: var(--ams-button-tertiary-hover-color);
1461
+ }
1462
+
1463
+ .ams-button--icon-only {
1464
+ padding-block: var(--ams-button-icon-only-padding-block);
1465
+ padding-inline: var(--ams-button-icon-only-padding-inline);
1466
+ }
1467
+
1468
+ /**
1469
+ * @license EUPL-1.2+
1470
+ * Copyright Gemeente Amsterdam
1471
+ */
1472
+ .ams-call-to-action-link {
1473
+ background-color: var(--ams-call-to-action-link-background-color);
1474
+ color: var(--ams-call-to-action-link-color);
1475
+ display: inline-flex;
1476
+ font-family: var(--ams-call-to-action-link-font-family);
1477
+ font-size: var(--ams-call-to-action-link-font-size);
1478
+ font-weight: var(--ams-call-to-action-link-font-weight);
1479
+ line-height: var(--ams-call-to-action-link-line-height);
1480
+ outline-offset: var(--ams-call-to-action-link-outline-offset);
1481
+ padding-block: var(--ams-call-to-action-link-padding-block);
1482
+ padding-inline: var(--ams-call-to-action-link-padding-inline);
1483
+ text-decoration-thickness: var(--ams-call-to-action-link-text-decoration-thickness);
1484
+ text-underline-offset: var(--ams-call-to-action-link-text-underline-offset);
1485
+ touch-action: manipulation;
1486
+ /* These CSS declarations have a fallback, so it's safe to use them. */
1487
+ /* stylelint-disable-next-line plugin/use-baseline */
1488
+ hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
1489
+ /* stylelint-disable-next-line plugin/use-baseline */
1490
+ hyphens: auto;
1491
+ overflow-wrap: break-word;
1492
+ text-rendering: optimizeLegibility;
1493
+ -moz-text-size-adjust: none;
1494
+ -webkit-text-size-adjust: none;
1495
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
1496
+ /* stylelint-disable-next-line plugin/use-baseline */
1497
+ text-size-adjust: none;
1498
+ }
1499
+ .ams-call-to-action-link:hover {
1500
+ background-color: var(--ams-call-to-action-link-hover-background-color);
1501
+ text-decoration-thickness: var(--ams-call-to-action-link-hover-text-decoration-thickness);
1502
+ text-underline-offset: var(--ams-call-to-action-link-hover-text-underline-offset);
1503
+ }
1504
+
1505
+ /**
1506
+ * @license EUPL-1.2+
1507
+ * Copyright Gemeente Amsterdam
1508
+ */
1509
+ .ams-card {
1510
+ display: grid;
1511
+ outline-offset: var(--ams-card-outline-offset);
1512
+ position: relative;
1513
+ touch-action: manipulation;
1514
+ /*
1515
+ * Set native outline to Card if it has a visible focus inside.
1516
+ * It is okay to use the :has() pseudo-class here, because we have a fallback for browsers that do not support it.
1517
+ */
1518
+ /* stylelint-disable-next-line plugin/use-baseline */
1519
+ }
1520
+ .ams-card:has(:focus-visible) {
1521
+ outline-color: -webkit-focus-ring-color;
1522
+ outline-style: auto;
1523
+ outline-width: 0.0625rem;
1524
+ }
1525
+ .ams-card > .ams-card__heading:not(:last-child) {
1526
+ margin-block-end: var(--ams-card-heading-margin-block-end);
1527
+ }
1528
+ .ams-card > .ams-card__image:not(:last-child) {
1529
+ margin-block-end: var(--ams-card-image-margin-block-end);
1530
+ }
1531
+
1532
+ .ams-card__heading-group {
1533
+ display: flex;
1534
+ flex-direction: column-reverse;
1535
+ gap: var(--ams-card-heading-group-gap);
1536
+ margin-block-end: var(--ams-card-heading-group-margin-block-end);
1537
+ }
1538
+
1539
+ .ams-card__link {
1540
+ color: var(--ams-card-link-color);
1541
+ text-decoration-line: var(--ams-card-link-text-decoration-line);
1542
+ text-decoration-thickness: var(--ams-card-link-text-decoration-thickness);
1543
+ text-underline-offset: var(--ams-card-link-text-underline-offset);
1544
+ /*
1545
+ * Make the whole Card clickable by making the link cover its entire area.
1546
+ * Source: https://inclusive-components.design/cards/
1547
+ */
1548
+ }
1549
+ .ams-card__link::after {
1550
+ content: "";
1551
+ display: block;
1552
+ inset-block: 0;
1553
+ inset-inline: 0;
1554
+ position: absolute;
1555
+ }
1556
+ .ams-card__link:hover {
1557
+ color: var(--ams-card-link-hover-color);
1558
+ text-decoration-line: var(--ams-card-link-hover-text-decoration-line);
1559
+ }
1560
+ .ams-card__link {
1561
+ /*
1562
+ * Remove the outline from the link; it’s already on the Card.
1563
+ * Reuses the `.ams-card:has(:focus-visible)` selector above, so that
1564
+ * browsers that support it apply both styles, while those that don’t apply neither.
1565
+ */
1566
+ /* stylelint-disable-next-line plugin/use-baseline */
1567
+ }
1568
+ .ams-card:has(:focus-visible) .ams-card__link:focus {
1569
+ outline: none;
1570
+ }
1571
+
1572
+ /**
1573
+ * @license EUPL-1.2+
1574
+ * Copyright Gemeente Amsterdam
1575
+ */
1576
+ .ams-character-count {
1577
+ color: var(--ams-character-count-color);
1578
+ font-family: var(--ams-character-count-font-family);
1579
+ font-size: var(--ams-character-count-font-size);
1580
+ font-weight: var(--ams-character-count-font-weight);
1581
+ line-height: var(--ams-character-count-line-height);
1582
+ /* These CSS declarations have a fallback, so it's safe to use them. */
1583
+ /* stylelint-disable-next-line plugin/use-baseline */
1584
+ hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
1585
+ /* stylelint-disable-next-line plugin/use-baseline */
1586
+ hyphens: auto;
1587
+ overflow-wrap: break-word;
1588
+ text-rendering: optimizeLegibility;
1589
+ -moz-text-size-adjust: none;
1590
+ -webkit-text-size-adjust: none;
1591
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
1592
+ /* stylelint-disable-next-line plugin/use-baseline */
1593
+ text-size-adjust: none;
1594
+ }
1595
+
1596
+ .ams-character-count--error {
1597
+ color: var(--ams-character-count-error-color);
1598
+ }
1599
+
1600
+ /**
1601
+ * @license EUPL-1.2+
1602
+ * Copyright Gemeente Amsterdam
1603
+ */
1604
+ /**
1605
+ * @license EUPL-1.2+
1606
+ * Copyright Gemeente Amsterdam
1607
+ */
1608
+ /**
1609
+ * Focus is first set on the label next to a focussed input, and then
1610
+ * hidden when the focussed input doesn't have focus-visible.
1611
+ * This progressive enhancement means you get the benefits of focus-visible
1612
+ * while still showing a focus ring on browsers that don't support focus-visible (like older Safari).
1613
+ */
1614
+ /**
1615
+ * @license EUPL-1.2+
1616
+ * Copyright Gemeente Amsterdam
1617
+ */
1618
+ .ams-checkbox__label {
1619
+ color: var(--ams-checkbox-color);
1620
+ cursor: var(--ams-checkbox-cursor);
1621
+ display: inline-flex;
1622
+ font-family: var(--ams-checkbox-font-family);
1623
+ font-size: var(--ams-checkbox-font-size);
1624
+ font-weight: var(--ams-checkbox-font-weight);
1625
+ gap: var(--ams-checkbox-gap);
1626
+ line-height: var(--ams-checkbox-line-height);
1627
+ outline-offset: var(--ams-checkbox-outline-offset);
1628
+ text-decoration-thickness: var(--ams-checkbox-text-decoration-thickness);
1629
+ text-underline-offset: var(--ams-checkbox-text-underline-offset);
1630
+ /* These CSS declarations have a fallback, so it's safe to use them. */
1631
+ /* stylelint-disable-next-line plugin/use-baseline */
1632
+ hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
1633
+ /* stylelint-disable-next-line plugin/use-baseline */
1634
+ hyphens: auto;
1635
+ overflow-wrap: break-word;
1636
+ text-rendering: optimizeLegibility;
1637
+ -moz-text-size-adjust: none;
1638
+ -webkit-text-size-adjust: none;
1639
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
1640
+ /* stylelint-disable-next-line plugin/use-baseline */
1641
+ text-size-adjust: none;
1642
+ }
1643
+
1644
+ .ams-checkbox__icon-container {
1645
+ block-size: var(--ams-checkbox-icon-container-block-size);
1646
+ display: flex;
1647
+ flex: none;
1648
+ inline-size: var(--ams-checkbox-icon-container-inline-size);
1649
+ }
1650
+
1651
+ .ams-checkbox__rectangle {
1652
+ fill: var(--ams-checkbox-rectangle-fill);
1653
+ stroke: var(--ams-checkbox-rectangle-stroke);
1654
+ }
1655
+ @media (forced-colors: active) {
1656
+ .ams-checkbox__rectangle {
1657
+ fill: Canvas;
1658
+ stroke: FieldText;
1659
+ }
1660
+ }
1661
+
1662
+ .ams-checkbox__hover-indicator {
1663
+ stroke: none;
1664
+ }
1665
+
1666
+ .ams-checkbox__checked-indicator {
1667
+ display: none;
1668
+ stroke: var(--ams-checkbox-checked-indicator-stroke);
1669
+ }
1670
+ @media (forced-colors: active) {
1671
+ .ams-checkbox__checked-indicator {
1672
+ stroke: Canvas;
1673
+ }
1674
+ }
1675
+
1676
+ .ams-checkbox__indeterminate-indicator {
1677
+ display: none;
1678
+ stroke: var(--ams-checkbox-indeterminate-indicator-stroke);
1679
+ }
1680
+ @media (forced-colors: active) {
1681
+ .ams-checkbox__indeterminate-indicator {
1682
+ stroke: Canvas;
1683
+ }
1684
+ }
1685
+
1686
+ /* stylelint-disable no-invalid-position-declaration */
1687
+ /* stylelint-enable no-invalid-position-declaration */
1688
+ .ams-checkbox__input {
1689
+ appearance: none;
1690
+ inline-size: 0;
1691
+ margin-block: 0;
1692
+ margin-inline: 0;
1693
+ }
1694
+ .ams-checkbox__input:focus + label {
1695
+ outline: auto;
1696
+ }
1697
+ .ams-checkbox__input:focus:not(:focus-visible) + label {
1698
+ outline: 0;
1699
+ }
1700
+ .ams-checkbox__input:disabled + * {
1701
+ color: var(--ams-checkbox-disabled-color);
1702
+ cursor: var(--ams-checkbox-disabled-cursor);
1703
+ }
1704
+ .ams-checkbox__input:disabled + * .ams-checkbox__rectangle {
1705
+ stroke: var(--ams-checkbox-rectangle-disabled-stroke);
1706
+ }
1707
+ @media (forced-colors: active) {
1708
+ .ams-checkbox__input:disabled + * .ams-checkbox__rectangle {
1709
+ stroke: GrayText;
1710
+ }
1711
+ }
1712
+ .ams-checkbox__input:indeterminate + * .ams-checkbox__rectangle {
1713
+ fill: var(--ams-checkbox-rectangle-indeterminate-fill);
1714
+ }
1715
+ @media (forced-colors: active) {
1716
+ .ams-checkbox__input:indeterminate + * .ams-checkbox__rectangle {
1717
+ fill: ActiveText;
1718
+ stroke: ActiveText;
1719
+ }
1720
+ }
1721
+ .ams-checkbox__input:indeterminate + * .ams-checkbox__indeterminate-indicator {
1722
+ display: block;
1723
+ }
1724
+ .ams-checkbox__input:checked:not(:indeterminate) + * .ams-checkbox__rectangle {
1725
+ fill: var(--ams-checkbox-rectangle-checked-fill);
1726
+ }
1727
+ @media (forced-colors: active) {
1728
+ .ams-checkbox__input:checked:not(:indeterminate) + * .ams-checkbox__rectangle {
1729
+ fill: ActiveText;
1730
+ stroke: ActiveText;
1731
+ }
1732
+ }
1733
+ .ams-checkbox__input:checked:not(:indeterminate) + * .ams-checkbox__checked-indicator {
1734
+ display: block;
1735
+ }
1736
+ .ams-checkbox__input:hover:not(:disabled) + * {
1737
+ color: var(--ams-checkbox-hover-color);
1738
+ text-decoration-line: var(--ams-checkbox-hover-text-decoration-line);
1739
+ }
1740
+ @media (forced-colors: none) {
1741
+ .ams-checkbox__input:hover:not(:disabled) + * .ams-checkbox__rectangle {
1742
+ stroke: var(--ams-checkbox-rectangle-hover-stroke);
1743
+ }
1744
+ }
1745
+ @media (forced-colors: none) {
1746
+ .ams-checkbox__input:hover:not(:disabled) + * .ams-checkbox__hover-indicator {
1747
+ stroke: var(--ams-checkbox-hover-indicator-hover-stroke);
1748
+ }
1749
+ }
1750
+ .ams-checkbox__input:disabled:indeterminate + * .ams-checkbox__rectangle {
1751
+ fill: var(--ams-checkbox-rectangle-indeterminate-disabled-fill);
1752
+ }
1753
+ @media (forced-colors: active) {
1754
+ .ams-checkbox__input:disabled:indeterminate + * .ams-checkbox__rectangle {
1755
+ fill: GrayText;
1756
+ stroke: GrayText;
1757
+ }
1758
+ }
1759
+ .ams-checkbox__input:disabled:checked + * .ams-checkbox__rectangle {
1760
+ fill: var(--ams-checkbox-rectangle-checked-disabled-fill);
1761
+ }
1762
+ @media (forced-colors: active) {
1763
+ .ams-checkbox__input:disabled:checked + * .ams-checkbox__rectangle {
1764
+ fill: GrayText;
1765
+ stroke: GrayText;
1766
+ }
1767
+ }
1768
+ :is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid=true]):not(:disabled) + * .ams-checkbox__rectangle {
1769
+ stroke: var(--ams-checkbox-rectangle-invalid-stroke);
1770
+ }
1771
+ @media (forced-colors: active) {
1772
+ :is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid=true]):not(:disabled) + * .ams-checkbox__rectangle {
1773
+ fill: ActiveText;
1774
+ stroke: ActiveText;
1775
+ }
1776
+ }
1777
+ :is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid=true]):indeterminate:not(:disabled) + * .ams-checkbox__rectangle {
1778
+ fill: var(--ams-checkbox-rectangle-indeterminate-invalid-fill);
1779
+ }
1780
+ @media (forced-colors: active) {
1781
+ :is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid=true]):indeterminate:not(:disabled) + * .ams-checkbox__rectangle {
1782
+ fill: ActiveText;
1783
+ stroke: ActiveText;
1784
+ }
1785
+ }
1786
+ :is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid=true]):checked:not(:disabled) + * .ams-checkbox__rectangle {
1787
+ fill: var(--ams-checkbox-rectangle-checked-invalid-fill);
1788
+ }
1789
+ @media (forced-colors: active) {
1790
+ :is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid=true]):checked:not(:disabled) + * .ams-checkbox__rectangle {
1791
+ fill: ActiveText;
1792
+ stroke: ActiveText;
1793
+ }
1794
+ }
1795
+ .ams-checkbox__input:indeterminate:not(:disabled) + *:hover .ams-checkbox__rectangle {
1796
+ fill: var(--ams-checkbox-rectangle-indeterminate-hover-fill);
1797
+ }
1798
+ @media (forced-colors: active) {
1799
+ .ams-checkbox__input:indeterminate:not(:disabled) + *:hover .ams-checkbox__rectangle {
1800
+ fill: ActiveText;
1801
+ stroke: ActiveText;
1802
+ }
1803
+ }
1804
+ .ams-checkbox__input:checked:not(:disabled, :indeterminate) + *:hover .ams-checkbox__rectangle {
1805
+ fill: var(--ams-checkbox-rectangle-checked-hover-fill);
1806
+ }
1807
+ @media (forced-colors: active) {
1808
+ .ams-checkbox__input:checked:not(:disabled, :indeterminate) + *:hover .ams-checkbox__rectangle {
1809
+ fill: ActiveText;
1810
+ stroke: ActiveText;
1811
+ }
1812
+ }
1813
+ :is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid=true]):not(:disabled) + *:hover .ams-checkbox__rectangle {
1814
+ stroke: var(--ams-checkbox-rectangle-invalid-hover-stroke);
1815
+ }
1816
+ @media (forced-colors: none) {
1817
+ :is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid=true]):not(:disabled) + *:hover .ams-checkbox__hover-indicator {
1818
+ stroke: var(--ams-checkbox-hover-indicator-invalid-hover-stroke);
1819
+ }
1820
+ }
1821
+ :is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid=true]):indeterminate:not(:disabled) + *:hover .ams-checkbox__rectangle {
1822
+ fill: var(--ams-checkbox-rectangle-indeterminate-invalid-hover-fill);
1823
+ }
1824
+ @media (forced-colors: active) {
1825
+ :is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid=true]):indeterminate:not(:disabled) + *:hover .ams-checkbox__rectangle {
1826
+ fill: ActiveText;
1827
+ stroke: ActiveText;
1828
+ }
1829
+ }
1830
+ :is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid=true]):checked:not(:disabled) + *:hover .ams-checkbox__rectangle {
1831
+ fill: var(--ams-checkbox-rectangle-checked-invalid-hover-fill);
1832
+ }
1833
+ @media (forced-colors: active) {
1834
+ :is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid=true]):checked:not(:disabled) + *:hover .ams-checkbox__rectangle {
1835
+ fill: ActiveText;
1836
+ stroke: ActiveText;
1837
+ }
1838
+ }
1839
+
1840
+ /**
1841
+ * @license EUPL-1.2+
1842
+ * Copyright Gemeente Amsterdam
1843
+ */
1844
+ .ams-column {
1845
+ display: flex;
1846
+ flex-direction: column;
1847
+ gap: var(--ams-column-gap-medium);
1848
+ }
1849
+
1850
+ .ams-column--gap-x-small {
1851
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
1852
+ gap: var(--ams-column-gap-x-small);
1853
+ }
1854
+
1855
+ .ams-column--gap-small {
1856
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
1857
+ gap: var(--ams-column-gap-small);
1858
+ }
1859
+
1860
+ .ams-column--gap-large {
1861
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
1862
+ gap: var(--ams-column-gap-large);
1863
+ }
1864
+
1865
+ .ams-column--gap-x-large {
1866
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
1867
+ gap: var(--ams-column-gap-x-large);
1868
+ }
1869
+
1870
+ .ams-column--gap-none {
1871
+ gap: 0;
1872
+ }
1873
+
1874
+ .ams-column--align-around {
1875
+ justify-content: space-around;
1876
+ }
1877
+
1878
+ .ams-column--align-between {
1879
+ justify-content: space-between;
1880
+ }
1881
+
1882
+ .ams-column--align-center {
1883
+ justify-content: center;
1884
+ }
1885
+
1886
+ .ams-column--align-end {
1887
+ justify-content: flex-end;
1888
+ }
1889
+
1890
+ .ams-column--align-evenly {
1891
+ justify-content: space-evenly;
1892
+ }
1893
+
1894
+ .ams-column--align-horizontal-center {
1895
+ align-items: center;
1896
+ }
1897
+
1898
+ .ams-column--align-horizontal-end {
1899
+ align-items: flex-end;
1900
+ }
1901
+
1902
+ .ams-column--align-horizontal-start {
1903
+ align-items: flex-start;
1904
+ }
1905
+
1906
+ /**
1907
+ * @license EUPL-1.2+
1908
+ * Copyright Gemeente Amsterdam
1909
+ */
1910
+ .ams-date-input {
1911
+ background-color: var(--ams-date-input-background-color);
1912
+ border-color: var(--ams-date-input-border-color);
1913
+ border-style: var(--ams-date-input-border-style);
1914
+ border-width: var(--ams-date-input-border-width);
1915
+ box-sizing: border-box;
1916
+ color: var(--ams-date-input-color);
1917
+ font-family: var(--ams-date-input-font-family);
1918
+ font-size: var(--ams-date-input-font-size);
1919
+ font-weight: var(--ams-date-input-font-weight);
1920
+ line-height: var(--ams-date-input-line-height);
1921
+ min-block-size: calc(var(--ams-date-input-font-size) * var(--ams-date-input-line-height) + 2 * var(--ams-date-input-padding-block));
1922
+ min-inline-size: calc(8ch + 2 * var(--ams-date-input-padding-inline));
1923
+ outline-offset: var(--ams-date-input-outline-offset);
1924
+ padding-block: var(--ams-date-input-padding-block);
1925
+ padding-inline: var(--ams-date-input-padding-inline);
1926
+ touch-action: manipulation;
1927
+ text-rendering: optimizeLegibility;
1928
+ -moz-text-size-adjust: none;
1929
+ -webkit-text-size-adjust: none;
1930
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
1931
+ /* stylelint-disable-next-line plugin/use-baseline */
1932
+ text-size-adjust: none;
1933
+ -webkit-appearance: none;
1934
+ appearance: none;
1935
+ border-radius: 0;
1936
+ margin-block: 0;
1937
+ }
1938
+ .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 {
1939
+ padding-block: 0;
1940
+ }
1941
+
1942
+ .ams-date-input::-webkit-calendar-picker-indicator {
1943
+ appearance: none;
1944
+ background-image: var(--ams-date-input-calendar-picker-indicator-background-image);
1945
+ cursor: var(--ams-date-input-calendar-picker-indicator-cursor);
1946
+ }
1947
+
1948
+ .ams-date-input:hover::-webkit-calendar-picker-indicator {
1949
+ background-image: var(--ams-date-input-hover-calendar-picker-indicator-background-image);
1950
+ }
1951
+
1952
+ .ams-date-input:disabled {
1953
+ color: var(--ams-date-input-disabled-color);
1954
+ cursor: var(--ams-date-input-disabled-cursor);
1955
+ }
1956
+
1957
+ .ams-date-input:disabled::-webkit-calendar-picker-indicator {
1958
+ background-image: var(--ams-date-input-disabled-calendar-picker-indicator-background-image);
1959
+ visibility: visible;
1960
+ }
1961
+
1962
+ .ams-date-input:not(:disabled):invalid,
1963
+ .ams-date-input:not(:disabled)[aria-invalid=true] {
1964
+ border-color: var(--ams-date-input-invalid-border-color);
1965
+ }
1966
+
1967
+ .ams-date-input:not(:disabled):hover {
1968
+ box-shadow: var(--ams-date-input-hover-box-shadow);
1969
+ }
1970
+
1971
+ .ams-date-input:not(:disabled):invalid:hover,
1972
+ .ams-date-input:not(:disabled)[aria-invalid=true]:hover {
1973
+ border-color: var(--ams-date-input-invalid-hover-border-color);
1974
+ box-shadow: var(--ams-date-input-invalid-hover-box-shadow);
1975
+ }
1976
+
1977
+ /**
1978
+ * @license EUPL-1.2+
1979
+ * Copyright Gemeente Amsterdam
1980
+ */
1981
+ /**
1982
+ * @license EUPL-1.2+
1983
+ * Copyright Gemeente Amsterdam
1984
+ */
1985
+ .ams-description-list {
1986
+ box-sizing: border-box;
1987
+ color: var(--ams-description-list-color);
1988
+ column-gap: var(--ams-description-list-column-gap);
1989
+ display: grid;
1990
+ font-family: var(--ams-description-list-font-family);
1991
+ font-size: var(--ams-description-list-font-size);
1992
+ line-height: var(--ams-description-list-line-height);
1993
+ row-gap: var(--ams-description-list-row-gap);
1994
+ margin-block: 0;
1995
+ /* These CSS declarations have a fallback, so it's safe to use them. */
1996
+ /* stylelint-disable-next-line plugin/use-baseline */
1997
+ hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
1998
+ /* stylelint-disable-next-line plugin/use-baseline */
1999
+ hyphens: auto;
2000
+ overflow-wrap: break-word;
2001
+ text-rendering: optimizeLegibility;
2002
+ -moz-text-size-adjust: none;
2003
+ -webkit-text-size-adjust: none;
2004
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
2005
+ /* stylelint-disable-next-line plugin/use-baseline */
2006
+ text-size-adjust: none;
2007
+ }
2008
+
2009
+ @media screen and (min-width: 37.5rem) {
2010
+ .ams-description-list,
2011
+ .ams-description-list__section {
2012
+ grid-template-columns: auto 1fr;
2013
+ }
2014
+ .ams-description-list--narrow,
2015
+ .ams-description-list--narrow .ams-description-list__section {
2016
+ grid-template-columns: var(--ams-description-list-narrow-grid-template-columns);
2017
+ }
2018
+ .ams-description-list--medium,
2019
+ .ams-description-list--medium .ams-description-list__section {
2020
+ grid-template-columns: var(--ams-description-list-medium-grid-template-columns);
2021
+ }
2022
+ .ams-description-list--wide,
2023
+ .ams-description-list--wide .ams-description-list__section {
2024
+ grid-template-columns: var(--ams-description-list-wide-grid-template-columns);
2025
+ }
2026
+ }
2027
+ .ams-description-list--inverse {
2028
+ color: var(--ams-description-list-inverse-color);
2029
+ }
2030
+
2031
+ .ams-description-list__term {
2032
+ font-weight: var(--ams-description-list-term-font-weight);
2033
+ }
2034
+ @media screen and (min-width: 37.5rem) {
2035
+ .ams-description-list__term {
2036
+ grid-column-start: 1;
2037
+ }
2038
+ }
2039
+
2040
+ @media screen and (min-width: 37.5rem) {
2041
+ .ams-description-list__section {
2042
+ column-gap: var(--ams-description-list-column-gap);
2043
+ display: grid;
2044
+ grid-column: span 2;
2045
+ }
2046
+ .ams-description-list__section > :only-of-type {
2047
+ grid-row: 1/9;
2048
+ }
2049
+ }
2050
+
2051
+ .ams-description-list__description {
2052
+ font-weight: var(--ams-description-list-description-font-weight);
2053
+ padding-inline-start: var(--ams-description-list-description-padding-inline-start);
2054
+ margin-inline: 0;
2055
+ }
2056
+ @media screen and (min-width: 37.5rem) {
2057
+ .ams-description-list__description {
2058
+ grid-column-start: 2;
2059
+ padding-inline-start: 0;
2060
+ }
2061
+ }
2062
+
2063
+ /**
2064
+ * @license EUPL-1.2+
2065
+ * Copyright Gemeente Amsterdam
2066
+ */
2067
+ /**
2068
+ * @license EUPL-1.2+
2069
+ * Copyright Gemeente Amsterdam
2070
+ */
2071
+ /* A dialog must have `display: none` until the `open` attribute is set,
2072
+ so do not apply these styles without an `open` attribute. */
2073
+ .ams-dialog:not(dialog:not([open])) {
2074
+ background-color: var(--ams-dialog-background-color);
2075
+ border-color: var(--ams-dialog-border-color);
2076
+ border-style: var(--ams-dialog-border-style);
2077
+ border-width: var(--ams-dialog-border-width);
2078
+ box-sizing: border-box;
2079
+ display: flex;
2080
+ flex-direction: column;
2081
+ gap: var(--ams-dialog-gap);
2082
+ inline-size: var(--ams-dialog-inline-size);
2083
+ max-block-size: var(--ams-dialog-max-block-size);
2084
+ max-inline-size: var(--ams-dialog-max-inline-size);
2085
+ inset-block: 0;
2086
+ padding-block: 0;
2087
+ padding-inline: 0;
2088
+ }
2089
+ @media screen and (min-width: 37.5rem) {
2090
+ .ams-dialog:not(dialog:not([open])) {
2091
+ inline-size: var(--ams-dialog-medium-inline-size);
2092
+ max-block-size: var(--ams-dialog-medium-max-block-size);
2093
+ }
2094
+ }
2095
+ .ams-dialog:not(dialog:not([open])) {
2096
+ /*
2097
+ * The fallback value is for browsers where ::backdrop does not inherit from its originating element.
2098
+ * @see https://caniuse.com/mdn-css_selectors_backdrop_inherit_from_originating_element
2099
+ */
2100
+ }
2101
+ .ams-dialog:not(dialog:not([open]))::backdrop {
2102
+ background: var(--ams-dialog-backdrop-background-color, rgba(24, 24, 24, 0.625));
2103
+ }
2104
+
2105
+ .ams-dialog__header {
2106
+ align-items: flex-start;
2107
+ display: flex;
2108
+ gap: var(--ams-dialog-header-gap);
2109
+ justify-content: space-between;
2110
+ padding-block: var(--ams-dialog-header-padding-block);
2111
+ padding-inline: var(--ams-dialog-header-padding-inline);
2112
+ }
2113
+ @media screen and (min-width: 37.5rem) {
2114
+ .ams-dialog__header {
2115
+ padding-block: var(--ams-dialog-header-medium-padding-block);
2116
+ padding-inline: var(--ams-dialog-header-medium-padding-inline);
2117
+ }
2118
+ }
2119
+
2120
+ .ams-dialog__body {
2121
+ overflow-y: auto;
2122
+ overscroll-behavior-y: contain;
2123
+ padding-block: var(--ams-dialog-body-padding-block);
2124
+ padding-inline: var(--ams-dialog-body-padding-inline);
2125
+ }
2126
+ @media screen and (min-width: 37.5rem) {
2127
+ .ams-dialog__body {
2128
+ padding-inline: var(--ams-dialog-body-medium-padding-inline);
2129
+ }
2130
+ }
2131
+
2132
+ .ams-dialog__footer {
2133
+ padding-block: var(--ams-dialog-footer-padding-block);
2134
+ padding-inline: var(--ams-dialog-footer-padding-inline);
2135
+ }
2136
+ @media screen and (min-width: 37.5rem) {
2137
+ .ams-dialog__footer {
2138
+ padding-block: var(--ams-dialog-footer-medium-padding-block);
2139
+ padding-inline: var(--ams-dialog-footer-medium-padding-inline);
2140
+ }
2141
+ }
2142
+
2143
+ /**
2144
+ * @license EUPL-1.2+
2145
+ * Copyright Gemeente Amsterdam
2146
+ */
2147
+ .ams-body {
2148
+ margin-block: 0;
2149
+ margin-inline: 0;
2150
+ }
2151
+
2152
+ /**
2153
+ * @license EUPL-1.2+
2154
+ * Copyright Gemeente Amsterdam
2155
+ */
2156
+ .ams-error-message {
2157
+ box-sizing: border-box;
2158
+ color: var(--ams-error-message-color);
2159
+ display: inline-flex;
2160
+ font-family: var(--ams-error-message-font-family);
2161
+ font-size: var(--ams-error-message-font-size);
2162
+ font-weight: var(--ams-error-message-font-weight);
2163
+ gap: var(--ams-error-message-gap);
2164
+ line-height: var(--ams-error-message-line-height);
2165
+ /* These CSS declarations have a fallback, so it's safe to use them. */
2166
+ /* stylelint-disable-next-line plugin/use-baseline */
2167
+ hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
2168
+ /* stylelint-disable-next-line plugin/use-baseline */
2169
+ hyphens: auto;
2170
+ overflow-wrap: break-word;
2171
+ text-rendering: optimizeLegibility;
2172
+ -moz-text-size-adjust: none;
2173
+ -webkit-text-size-adjust: none;
2174
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
2175
+ /* stylelint-disable-next-line plugin/use-baseline */
2176
+ text-size-adjust: none;
2177
+ margin-block: 0;
2178
+ }
2179
+
2180
+ /**
2181
+ * @license EUPL-1.2+
2182
+ * Copyright Gemeente Amsterdam
2183
+ */
2184
+ .ams-field-set {
2185
+ break-inside: avoid;
2186
+ border: none;
2187
+ margin-inline: 0;
2188
+ padding-block: 0;
2189
+ padding-inline: 0;
2190
+ }
2191
+
2192
+ .ams-field-set--invalid {
2193
+ border-inline-start: var(--ams-field-set-invalid-border-inline-start);
2194
+ padding-inline-start: var(--ams-field-set-invalid-padding-inline-start);
2195
+ }
2196
+
2197
+ .ams-field-set__legend {
2198
+ color: var(--ams-field-set-legend-color);
2199
+ font-family: var(--ams-field-set-legend-font-family);
2200
+ font-size: var(--ams-field-set-legend-font-size);
2201
+ font-weight: var(--ams-field-set-legend-font-weight);
2202
+ line-height: var(--ams-field-set-legend-line-height);
2203
+ margin-block-end: var(--ams-field-set-legend-margin-block-end);
2204
+ /*
2205
+ * If text-wrap is not supported, it is ignored.
2206
+ * This means the wrapped text will look less balanced, which is fine.
2207
+ */
2208
+ /* stylelint-disable-next-line plugin/use-baseline */
2209
+ text-wrap: var(--ams-field-set-legend-text-wrap);
2210
+ /* These CSS declarations have a fallback, so it's safe to use them. */
2211
+ /* stylelint-disable-next-line plugin/use-baseline */
2212
+ hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
2213
+ /* stylelint-disable-next-line plugin/use-baseline */
2214
+ hyphens: auto;
2215
+ overflow-wrap: break-word;
2216
+ text-rendering: optimizeLegibility;
2217
+ -moz-text-size-adjust: none;
2218
+ -webkit-text-size-adjust: none;
2219
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
2220
+ /* stylelint-disable-next-line plugin/use-baseline */
2221
+ text-size-adjust: none;
2222
+ /* stylelint-disable-next-line csstools/use-logical */
2223
+ float: left;
2224
+ inline-size: 100%;
2225
+ padding-inline: 0;
2226
+ }
2227
+ .ams-field-set__legend + * {
2228
+ clear: both;
2229
+ }
2230
+
2231
+ .ams-field-set__heading {
2232
+ font-size: inherit;
2233
+ font-weight: inherit;
2234
+ margin-block: 0;
2235
+ }
2236
+
2237
+ /**
2238
+ * @license EUPL-1.2+
2239
+ * Copyright Gemeente Amsterdam
2240
+ */
2241
+ .ams-field {
2242
+ align-items: start;
2243
+ break-inside: avoid;
2244
+ display: flex;
2245
+ flex-direction: column;
2246
+ gap: var(--ams-field-gap);
2247
+ }
2248
+
2249
+ .ams-field--invalid {
2250
+ border-inline-start: var(--ams-field-invalid-border-inline-start);
2251
+ padding-inline-start: var(--ams-field-invalid-padding-inline-start);
2252
+ }
2253
+
2254
+ /**
2255
+ * @license EUPL-1.2+
2256
+ * Copyright Gemeente Amsterdam
2257
+ */
2258
+ .ams-figure {
2259
+ display: flex;
2260
+ flex-direction: column;
2261
+ gap: var(--ams-figure-gap);
2262
+ margin-block: 0;
2263
+ margin-inline: 0;
2264
+ }
2265
+
2266
+ .ams-figure__caption {
2267
+ color: var(--ams-figure-caption-color);
2268
+ font-family: var(--ams-figure-caption-font-family);
2269
+ font-size: var(--ams-figure-caption-font-size);
2270
+ font-weight: var(--ams-figure-caption-font-weight);
2271
+ line-height: var(--ams-figure-caption-line-height);
2272
+ /* These CSS declarations have a fallback, so it's safe to use them. */
2273
+ /* stylelint-disable-next-line plugin/use-baseline */
2274
+ hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
2275
+ /* stylelint-disable-next-line plugin/use-baseline */
2276
+ hyphens: auto;
2277
+ overflow-wrap: break-word;
2278
+ text-rendering: optimizeLegibility;
2279
+ -moz-text-size-adjust: none;
2280
+ -webkit-text-size-adjust: none;
2281
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
2282
+ /* stylelint-disable-next-line plugin/use-baseline */
2283
+ text-size-adjust: none;
2284
+ }
2285
+
2286
+ .ams-figure__caption--inverse {
2287
+ color: var(--ams-figure-caption-inverse-color);
2288
+ }
2289
+
2290
+ /**
2291
+ * @license EUPL-1.2+
2292
+ * Copyright Gemeente Amsterdam
2293
+ */
2294
+ .ams-file-input {
2295
+ background-color: var(--ams-file-input-background-color);
2296
+ border-color: var(--ams-file-input-border-color);
2297
+ border-style: var(--ams-file-input-border-style);
2298
+ border-width: var(--ams-file-input-border-width);
2299
+ box-sizing: border-box;
2300
+ color: var(--ams-file-input-color);
2301
+ cursor: var(--ams-file-input-cursor);
2302
+ font-family: var(--ams-file-input-font-family);
2303
+ font-size: var(--ams-file-input-font-size);
2304
+ font-weight: var(--ams-file-input-font-weight);
2305
+ inline-size: 100%;
2306
+ line-height: var(--ams-file-input-line-height);
2307
+ outline-offset: var(--ams-file-input-outline-offset);
2308
+ padding-block: var(--ams-file-input-padding-block);
2309
+ padding-inline: var(--ams-file-input-padding-inline);
2310
+ touch-action: manipulation;
2311
+ text-rendering: optimizeLegibility;
2312
+ -moz-text-size-adjust: none;
2313
+ -webkit-text-size-adjust: none;
2314
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
2315
+ /* stylelint-disable-next-line plugin/use-baseline */
2316
+ text-size-adjust: none;
2317
+ }
2318
+
2319
+ .ams-file-input:disabled {
2320
+ color: var(--ams-file-input-disabled-color);
2321
+ cursor: var(--ams-file-input-disabled-cursor);
2322
+ }
2323
+
2324
+ .ams-file-input::file-selector-button {
2325
+ -webkit-appearance: none;
2326
+ appearance: none;
2327
+ background-color: var(--ams-file-input-file-selector-button-background-color);
2328
+ border-color: var(--ams-file-input-file-selector-button-border-color);
2329
+ border-style: var(--ams-file-input-file-selector-button-border-style);
2330
+ border-width: var(--ams-file-input-file-selector-button-border-width);
2331
+ box-sizing: border-box;
2332
+ color: var(--ams-file-input-file-selector-button-color);
2333
+ cursor: var(--ams-file-input-file-selector-button-cursor);
2334
+ font-family: inherit;
2335
+ font-size: inherit;
2336
+ font-weight: inherit;
2337
+ line-height: var(--ams-file-input-file-selector-button-line-height);
2338
+ margin-inline-end: var(--ams-file-input-file-selector-button-margin-inline-end);
2339
+ padding-block: var(--ams-file-input-file-selector-button-padding-block);
2340
+ padding-inline: var(--ams-file-input-file-selector-button-padding-inline);
2341
+ border-radius: 0;
2342
+ }
2343
+
2344
+ .ams-file-input:disabled::file-selector-button {
2345
+ color: var(--ams-file-input-disabled-color);
2346
+ cursor: var(--ams-file-input-file-selector-button-disabled-cursor);
2347
+ }
2348
+
2349
+ .ams-file-input:not(:disabled):hover::file-selector-button {
2350
+ box-shadow: var(--ams-file-input-file-selector-button-hover-box-shadow);
2351
+ color: var(--ams-file-input-file-selector-button-hover-color);
2352
+ }
2353
+
2354
+ /**
2355
+ * @license EUPL-1.2+
2356
+ * Copyright Gemeente Amsterdam
2357
+ */
2358
+ .ams-file-list {
2359
+ display: flex;
2360
+ flex-direction: column;
2361
+ gap: var(--ams-file-list-gap);
2362
+ padding-block: var(--ams-file-list-padding-block);
2363
+ /* These CSS declarations have a fallback, so it's safe to use them. */
2364
+ /* stylelint-disable-next-line plugin/use-baseline */
2365
+ hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
2366
+ /* stylelint-disable-next-line plugin/use-baseline */
2367
+ hyphens: auto;
2368
+ overflow-wrap: break-word;
2369
+ text-rendering: optimizeLegibility;
2370
+ -moz-text-size-adjust: none;
2371
+ -webkit-text-size-adjust: none;
2372
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
2373
+ /* stylelint-disable-next-line plugin/use-baseline */
2374
+ text-size-adjust: none;
2375
+ list-style: none;
2376
+ margin-block: 0;
2377
+ padding-inline: 0;
2378
+ }
2379
+
2380
+ .ams-file-list__item {
2381
+ display: flex;
2382
+ font-family: var(--ams-file-list-file-font-family);
2383
+ font-size: var(--ams-file-list-file-font-size);
2384
+ font-weight: var(--ams-file-list-file-font-weight);
2385
+ gap: var(--ams-file-list-file-gap);
2386
+ line-height: var(--ams-file-list-file-line-height);
2387
+ }
2388
+
2389
+ .ams-file-list__item-preview {
2390
+ display: grid;
2391
+ flex: 0 0 var(--ams-file-list-file-preview-width);
2392
+ place-items: center;
2393
+ }
2394
+ .ams-file-list__item-preview img {
2395
+ inline-size: 100%;
2396
+ min-block-size: auto;
2397
+ }
2398
+
2399
+ .ams-file-list__item-info {
2400
+ flex: 1;
2401
+ gap: var(--ams-file-list-file-gap);
2402
+ overflow: hidden;
2403
+ text-overflow: ellipsis;
2404
+ white-space: nowrap;
2405
+ }
2406
+
2407
+ .ams-file-input__item-details {
2408
+ color: var(--ams-file-list-file-details-color);
2409
+ }
2410
+
2411
+ /**
2412
+ * @license EUPL-1.2+
2413
+ * Copyright Gemeente Amsterdam
2414
+ */
2415
+ .ams-gap-xs {
2416
+ display: grid !important;
2417
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
2418
+ gap: var(--ams-space-xs) !important;
2419
+ }
2420
+
2421
+ .ams-gap-s {
2422
+ display: grid !important;
2423
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
2424
+ gap: var(--ams-space-s) !important;
2425
+ }
2426
+
2427
+ .ams-gap-m {
2428
+ display: grid !important;
2429
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
2430
+ gap: var(--ams-space-m) !important;
2431
+ }
2432
+
2433
+ .ams-gap-l {
2434
+ display: grid !important;
2435
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
2436
+ gap: var(--ams-space-l) !important;
2437
+ }
2438
+
2439
+ .ams-gap-xl {
2440
+ display: grid !important;
2441
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
2442
+ gap: var(--ams-space-xl) !important;
2443
+ }
2444
+
2445
+ /**
2446
+ * @license EUPL-1.2+
2447
+ * Copyright Gemeente Amsterdam
2448
+ */
2449
+ .ams-heading {
2450
+ box-sizing: border-box;
2451
+ /*
2452
+ * If break-after is supported, use it to avoid a Heading from being the last item on a page when printed.
2453
+ * If it is not supported, it is ignored.
2454
+ */
2455
+ /* stylelint-disable-next-line plugin/use-baseline */
2456
+ break-after: avoid;
2457
+ break-inside: avoid;
2458
+ color: var(--ams-heading-color);
2459
+ font-family: var(--ams-heading-font-family);
2460
+ font-weight: var(--ams-heading-font-weight);
2461
+ /*
2462
+ * If text-wrap is not supported, it is ignored.
2463
+ * This means the wrapped text will look less balanced, which is fine.
2464
+ */
2465
+ /* stylelint-disable-next-line plugin/use-baseline */
2466
+ text-wrap: var(--ams-heading-text-wrap);
2467
+ /* These CSS declarations have a fallback, so it's safe to use them. */
2468
+ /* stylelint-disable-next-line plugin/use-baseline */
2469
+ hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
2470
+ /* stylelint-disable-next-line plugin/use-baseline */
2471
+ hyphens: auto;
2472
+ overflow-wrap: break-word;
2473
+ text-rendering: optimizeLegibility;
2474
+ -moz-text-size-adjust: none;
2475
+ -webkit-text-size-adjust: none;
2476
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
2477
+ /* stylelint-disable-next-line plugin/use-baseline */
2478
+ text-size-adjust: none;
2479
+ margin-block: 0;
2480
+ }
2481
+
2482
+ .ams-heading--1 {
2483
+ font-size: var(--ams-heading-1-font-size);
2484
+ line-height: var(--ams-heading-1-line-height);
2485
+ }
2486
+
2487
+ .ams-heading--2 {
2488
+ font-size: var(--ams-heading-2-font-size);
2489
+ line-height: var(--ams-heading-2-line-height);
2490
+ }
2491
+
2492
+ .ams-heading--3 {
2493
+ font-size: var(--ams-heading-3-font-size);
2494
+ line-height: var(--ams-heading-3-line-height);
2495
+ }
2496
+
2497
+ .ams-heading--4 {
2498
+ font-size: var(--ams-heading-4-font-size);
2499
+ line-height: var(--ams-heading-4-line-height);
2500
+ }
2501
+
2502
+ .ams-heading--5 {
2503
+ font-size: var(--ams-heading-5-font-size);
2504
+ line-height: var(--ams-heading-5-line-height);
2505
+ }
2506
+
2507
+ .ams-heading--6 {
2508
+ font-size: var(--ams-heading-6-font-size);
2509
+ line-height: var(--ams-heading-6-line-height);
2510
+ }
2511
+
2512
+ .ams-heading--inverse {
2513
+ color: var(--ams-heading-inverse-color);
2514
+ }
2515
+
2516
+ /**
2517
+ * @license EUPL-1.2+
2518
+ * Copyright Gemeente Amsterdam
2519
+ */
2520
+ .ams-hint {
2521
+ display: inline-block;
2522
+ font-weight: var(--ams-hint-font-weight);
2523
+ }
2524
+
2525
+ /**
2526
+ * @license EUPL-1.2+
2527
+ * Copyright Gemeente Amsterdam
2528
+ */
2529
+ .ams-icon-button {
2530
+ background-color: transparent;
2531
+ color: var(--ams-icon-button-color);
2532
+ cursor: var(--ams-icon-button-cursor);
2533
+ display: inline-flex;
2534
+ outline-offset: var(--ams-icon-button-outline-offset);
2535
+ touch-action: manipulation;
2536
+ border: none;
2537
+ margin-block: 0;
2538
+ margin-inline: 0;
2539
+ padding-block: 0;
2540
+ padding-inline: 0;
2541
+ }
2542
+ .ams-icon-button:hover {
2543
+ background-color: var(--ams-icon-button-hover-background-color);
2544
+ color: var(--ams-icon-button-hover-color);
2545
+ }
2546
+ .ams-icon-button:disabled {
2547
+ background-color: transparent;
2548
+ color: var(--ams-icon-button-disabled-color);
2549
+ cursor: var(--ams-icon-button-disabled-cursor);
2550
+ }
2551
+
2552
+ .ams-icon-button--contrast {
2553
+ color: var(--ams-icon-button-contrast-color);
2554
+ }
2555
+ .ams-icon-button--contrast:hover {
2556
+ background-color: var(--ams-icon-button-contrast-hover-background-color);
2557
+ color: var(--ams-icon-button-contrast-hover-color);
2558
+ }
2559
+ .ams-icon-button--contrast:disabled {
2560
+ background-color: transparent;
2561
+ color: var(--ams-icon-button-contrast-disabled-color);
2562
+ }
2563
+
2564
+ .ams-icon-button--inverse {
2565
+ background-color: var(--ams-icon-button-inverse-background-color);
2566
+ color: var(--ams-icon-button-inverse-color);
2567
+ }
2568
+ .ams-icon-button--inverse:hover {
2569
+ background-color: var(--ams-icon-button-inverse-hover-background-color);
2570
+ color: var(--ams-icon-button-inverse-hover-color);
2571
+ }
2572
+ .ams-icon-button--inverse:disabled {
2573
+ background-color: var(--ams-icon-button-inverse-disabled-background-color);
2574
+ color: var(--ams-icon-button-inverse-disabled-color);
2575
+ }
2576
+
2577
+ /**
2578
+ * @license EUPL-1.2+
2579
+ * Copyright Gemeente Amsterdam
2580
+ */
2581
+ .ams-icon {
2582
+ --ams-line-height: var(--ams-icon-line-height);
2583
+ align-items: center;
2584
+ align-self: baseline;
2585
+ display: inline-flex;
2586
+ font-size: var(--ams-icon-font-size);
2587
+ line-height: var(--ams-line-height);
2588
+ }
2589
+ .ams-icon::after {
2590
+ content: "​";
2591
+ }
2592
+ .ams-icon svg {
2593
+ fill: currentColor;
2594
+ inline-size: 1em;
2595
+ }
2596
+
2597
+ .ams-icon--inverse {
2598
+ color: var(--ams-icon-inverse-color);
2599
+ }
2600
+
2601
+ .ams-icon--square {
2602
+ inline-size: calc(1em * var(--ams-line-height));
2603
+ justify-content: center;
2604
+ }
2605
+
2606
+ .ams-icon--small {
2607
+ --ams-line-height: var(--ams-icon-small-line-height);
2608
+ font-size: var(--ams-icon-small-font-size);
2609
+ }
2610
+
2611
+ .ams-icon--large {
2612
+ --ams-line-height: var(--ams-icon-large-line-height);
2613
+ font-size: var(--ams-icon-large-font-size);
2614
+ }
2615
+
2616
+ .ams-icon--heading-1 {
2617
+ --ams-line-height: var(--ams-icon-heading-1-line-height);
2618
+ font-size: var(--ams-icon-heading-1-font-size);
2619
+ line-height: var(--ams-icon-heading-1-line-height);
2620
+ }
2621
+
2622
+ .ams-icon--heading-2 {
2623
+ --ams-line-height: var(--ams-icon-heading-2-line-height);
2624
+ font-size: var(--ams-icon-heading-2-font-size);
2625
+ line-height: var(--ams-icon-heading-2-line-height);
2626
+ }
2627
+
2628
+ .ams-icon--heading-3 {
2629
+ --ams-line-height: var(--ams-icon-heading-3-line-height);
2630
+ font-size: var(--ams-icon-heading-3-font-size);
2631
+ line-height: var(--ams-icon-heading-3-line-height);
2632
+ }
2633
+
2634
+ .ams-icon--heading-4 {
2635
+ --ams-line-height: var(--ams-icon-heading-4-line-height);
2636
+ font-size: var(--ams-icon-heading-4-font-size);
2637
+ line-height: var(--ams-icon-heading-4-line-height);
2638
+ }
2639
+
2640
+ .ams-icon--heading-5 {
2641
+ --ams-line-height: var(--ams-icon-heading-5-line-height);
2642
+ font-size: var(--ams-icon-heading-5-font-size);
2643
+ line-height: var(--ams-icon-heading-5-line-height);
2644
+ }
2645
+
2646
+ .ams-icon--heading-6 {
2647
+ --ams-line-height: var(--ams-icon-heading-6-line-height);
2648
+ font-size: var(--ams-icon-heading-6-font-size);
2649
+ line-height: var(--ams-icon-heading-6-line-height);
2650
+ }
2651
+
2652
+ /**
2653
+ * @license EUPL-1.2+
2654
+ * Copyright Gemeente Amsterdam
2655
+ */
2656
+ .ams-icon--heading-0 {
2657
+ --ams-line-height: var(--ams-icon-heading-0-line-height);
2658
+ font-size: var(--ams-icon-heading-0-font-size);
2659
+ line-height: var(--ams-icon-heading-0-line-height);
2660
+ }
2661
+
2662
+ /**
2663
+ * @license EUPL-1.2+
2664
+ * Copyright Gemeente Amsterdam
2665
+ */
2666
+ /**
2667
+ * @license EUPL-1.2+
2668
+ * Copyright Gemeente Amsterdam
2669
+ */
2670
+ .ams-image-slider {
2671
+ display: grid;
2672
+ gap: var(--ams-image-slider-gap);
2673
+ grid-template-rows: 1fr auto;
2674
+ }
2675
+
2676
+ .ams-image-slider__item {
2677
+ scroll-snap-align: center;
2678
+ scroll-snap-stop: always;
2679
+ /** temporary fix for covering the entire gallery */
2680
+ }
2681
+ .ams-image-slider__item .ams-image {
2682
+ inline-size: 100%;
2683
+ }
2684
+
2685
+ .ams-image-slider__scroller {
2686
+ align-items: center;
2687
+ display: grid;
2688
+ gap: var(--ams-image-slider-scroller-gap);
2689
+ grid-auto-columns: 100%;
2690
+ grid-auto-flow: column;
2691
+ grid-column: 1/-1;
2692
+ grid-row: 1;
2693
+ outline-offset: var(--ams-image-slider-scroller-outline-offset);
2694
+ overflow-x: auto;
2695
+ overscroll-behavior-x: contain;
2696
+ /*
2697
+ * Required for the goToSlide function to work properly.
2698
+ * Ensures that the offset of the slides is calculated relative to the scroller container.
2699
+ */
2700
+ position: relative;
2701
+ scroll-snap-type: x mandatory;
2702
+ /*
2703
+ * Hide the scrollbar in Firefox.
2704
+ * Firefox has full support for this property.
2705
+ */
2706
+ /* stylelint-disable-next-line plugin/use-baseline */
2707
+ scrollbar-width: none;
2708
+ }
2709
+ .ams-image-slider__scroller::-webkit-scrollbar {
2710
+ display: none;
2711
+ }
2712
+ @media not (prefers-reduced-motion) {
2713
+ .ams-image-slider__scroller {
2714
+ scroll-behavior: smooth;
2715
+ }
2716
+ }
2717
+
2718
+ .ams-image-slider__controls {
2719
+ display: flex;
2720
+ grid-column: 1/-1;
2721
+ grid-row: 1;
2722
+ justify-content: space-between;
2723
+ }
2724
+ @media (pointer: coarse) and (max-width: 37.5rem) {
2725
+ .ams-image-slider__controls {
2726
+ display: none;
2727
+ }
2728
+ }
2729
+
2730
+ .ams-image-slider__control {
2731
+ place-self: center;
2732
+ z-index: 1;
2733
+ }
2734
+
2735
+ .ams-image-slider__thumbnails {
2736
+ display: grid;
2737
+ gap: var(--ams-image-slider-thumbnails-gap);
2738
+ grid-template-columns: repeat(5, 1fr);
2739
+ max-inline-size: 100%;
2740
+ }
2741
+
2742
+ .ams-image-slider__thumbnail {
2743
+ aspect-ratio: var(--ams-image-aspect-ratio);
2744
+ background-color: var(--ams-image-slider-thumbnails-thumbnail-background-color);
2745
+ background-position: center;
2746
+ background-size: cover;
2747
+ cursor: var(--ams-image-slider-thumbnails-thumbnail-cursor);
2748
+ opacity: var(--ams-image-slider-thumbnails-thumbnail-opacity);
2749
+ outline-offset: var(--ams-button-outline-offset);
2750
+ position: relative;
2751
+ scroll-snap-align: start;
2752
+ border: none;
2753
+ border-radius: 0;
2754
+ padding-block: 0;
2755
+ padding-inline: 0;
2756
+ }
2757
+ .ams-image-slider__thumbnail:hover {
2758
+ opacity: var(--ams-image-slider-thumbnails-thumbnail-hover-opacity);
2759
+ }
2760
+
2761
+ .ams-image-slider__thumbnail--in-view {
2762
+ opacity: var(--ams-image-slider-thumbnails-thumbnail-in-view-opacity);
2763
+ }
2764
+
2765
+ /**
2766
+ * @license EUPL-1.2+
2767
+ * Copyright Gemeente Amsterdam
2768
+ */
2769
+ .ams-image {
2770
+ aspect-ratio: var(--ams-image-aspect-ratio);
2771
+ block-size: auto; /* [1] */
2772
+ font-style: italic; /* [3] */
2773
+ inline-size: 100%; /* [1] */
2774
+ object-fit: cover; /* [4] */
2775
+ vertical-align: middle; /* [2] */
2776
+ }
2777
+
2778
+ /**
2779
+ * @license EUPL-1.2+
2780
+ * Copyright Gemeente Amsterdam
2781
+ */
2782
+ .ams-invalid-form-alert {
2783
+ outline-offset: var(--ams-invalid-form-alert-outline-offset);
2784
+ }
2785
+
2786
+ /**
2787
+ * @license EUPL-1.2+
2788
+ * Copyright Gemeente Amsterdam
2789
+ */
2790
+ .ams-label {
2791
+ color: var(--ams-label-color);
2792
+ font-family: var(--ams-label-font-family);
2793
+ font-size: var(--ams-label-font-size);
2794
+ font-weight: var(--ams-label-font-weight);
2795
+ line-height: var(--ams-label-line-height);
2796
+ /*
2797
+ * If text-wrap is not supported, it is ignored.
2798
+ * This means the wrapped text will look less balanced, which is fine.
2799
+ */
2800
+ /* stylelint-disable-next-line plugin/use-baseline */
2801
+ text-wrap: var(--ams-label-text-wrap);
2802
+ /* These CSS declarations have a fallback, so it's safe to use them. */
2803
+ /* stylelint-disable-next-line plugin/use-baseline */
2804
+ hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
2805
+ /* stylelint-disable-next-line plugin/use-baseline */
2806
+ hyphens: auto;
2807
+ overflow-wrap: break-word;
2808
+ text-rendering: optimizeLegibility;
2809
+ -moz-text-size-adjust: none;
2810
+ -webkit-text-size-adjust: none;
2811
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
2812
+ /* stylelint-disable-next-line plugin/use-baseline */
2813
+ text-size-adjust: none;
2814
+ }
2815
+
2816
+ .ams-label__heading {
2817
+ font-size: var(--ams-label-font-size);
2818
+ font-weight: var(--ams-label-font-weight);
2819
+ margin-block: 0;
2820
+ }
2821
+
2822
+ /**
2823
+ * @license EUPL-1.2+
2824
+ * Copyright Gemeente Amsterdam
2825
+ */
2826
+ .ams-link-list {
2827
+ box-sizing: border-box;
2828
+ display: grid;
2829
+ gap: var(--ams-link-list-gap);
2830
+ /* These CSS declarations have a fallback, so it's safe to use them. */
2831
+ /* stylelint-disable-next-line plugin/use-baseline */
2832
+ hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
2833
+ /* stylelint-disable-next-line plugin/use-baseline */
2834
+ hyphens: auto;
2835
+ overflow-wrap: break-word;
2836
+ text-rendering: optimizeLegibility;
2837
+ -moz-text-size-adjust: none;
2838
+ -webkit-text-size-adjust: none;
2839
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
2840
+ /* stylelint-disable-next-line plugin/use-baseline */
2841
+ text-size-adjust: none;
2842
+ list-style: none;
2843
+ margin-block: 0;
2844
+ padding-inline-start: 0;
2845
+ }
2846
+
2847
+ .ams-link-list__link {
2848
+ align-items: flex-start;
2849
+ color: var(--ams-link-list-link-color);
2850
+ display: inline-flex;
2851
+ font-family: var(--ams-link-list-link-font-family);
2852
+ font-size: var(--ams-link-list-link-font-size);
2853
+ font-weight: var(--ams-link-list-link-font-weight);
2854
+ gap: var(--ams-link-list-link-gap);
2855
+ line-height: var(--ams-link-list-link-line-height);
2856
+ outline-offset: var(--ams-link-list-link-outline-offset);
2857
+ text-decoration-line: var(--ams-link-list-link-text-decoration-line);
2858
+ text-decoration-thickness: var(--ams-link-list-link-text-decoration-thickness);
2859
+ text-underline-offset: var(--ams-link-list-link-text-underline-offset);
2860
+ }
2861
+ .ams-link-list__link:hover {
2862
+ color: var(--ams-link-list-link-hover-color);
2863
+ text-decoration-line: var(--ams-link-list-link-hover-text-decoration-line);
2864
+ }
2865
+
2866
+ .ams-link-list__link--small {
2867
+ font-size: var(--ams-link-list-link-small-font-size);
2868
+ line-height: var(--ams-link-list-link-small-line-height);
2869
+ }
2870
+
2871
+ .ams-link-list__link--large {
2872
+ font-size: var(--ams-link-list-link-large-font-size);
2873
+ line-height: var(--ams-link-list-link-large-line-height);
2874
+ }
2875
+
2876
+ .ams-link-list__link--contrast {
2877
+ color: var(--ams-link-list-link-contrast-color);
2878
+ }
2879
+ .ams-link-list__link--contrast:hover {
2880
+ color: var(--ams-link-list-link-contrast-hover-color);
2881
+ }
2882
+
2883
+ .ams-link-list__link--inverse {
2884
+ color: var(--ams-link-list-link-inverse-color);
2885
+ }
2886
+ .ams-link-list__link--inverse:hover {
2887
+ color: var(--ams-link-list-link-inverse-hover-color);
2888
+ }
2889
+
2890
+ /**
2891
+ * @license EUPL-1.2+
2892
+ * Copyright Gemeente Amsterdam
2893
+ */
2894
+ .ams-link {
2895
+ color: var(--ams-link-color);
2896
+ font-family: var(--ams-link-font-family);
2897
+ font-size: var(--ams-link-font-size);
2898
+ font-weight: var(--ams-link-font-weight);
2899
+ line-height: var(--ams-link-line-height);
2900
+ outline-offset: var(--ams-link-outline-offset);
2901
+ text-decoration-thickness: var(--ams-link-text-decoration-thickness);
2902
+ text-underline-offset: var(--ams-link-text-underline-offset);
2903
+ text-rendering: optimizeLegibility;
2904
+ -moz-text-size-adjust: none;
2905
+ -webkit-text-size-adjust: none;
2906
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
2907
+ /* stylelint-disable-next-line plugin/use-baseline */
2908
+ text-size-adjust: none;
2909
+ }
2910
+ .ams-link:hover {
2911
+ color: var(--ams-link-hover-color);
2912
+ text-decoration-thickness: var(--ams-link-hover-text-decoration-thickness);
2913
+ text-underline-offset: var(--ams-link-hover-text-underline-offset);
2914
+ }
2915
+
2916
+ .ams-link--contrast {
2917
+ color: var(--ams-link-contrast-color);
2918
+ }
2919
+ .ams-link--contrast:hover {
2920
+ color: var(--ams-link-contrast-hover-color);
2921
+ }
2922
+
2923
+ .ams-link--inverse {
2924
+ color: var(--ams-link-inverse-color);
2925
+ }
2926
+ .ams-link--inverse:hover {
2927
+ color: var(--ams-link-inverse-hover-color);
2928
+ }
2929
+
2930
+ /**
2931
+ * @license EUPL-1.2+
2932
+ * Copyright Gemeente Amsterdam
2933
+ */
2934
+ .ams-logo {
2935
+ block-size: var(--ams-logo-block-size);
2936
+ display: block;
2937
+ min-block-size: var(--ams-logo-min-block-size);
2938
+ }
2939
+
2940
+ .ams-logo__emblem {
2941
+ fill: var(--ams-logo-emblem-color);
2942
+ }
2943
+
2944
+ .ams-logo__text-primary {
2945
+ fill: var(--ams-logo-title-color);
2946
+ }
2947
+
2948
+ .ams-logo__text-secondary {
2949
+ fill: var(--ams-logo-subsite-color);
2950
+ }
2951
+
2952
+ /**
2953
+ * @license EUPL-1.2+
2954
+ * Copyright Gemeente Amsterdam
2955
+ */
2956
+ .ams-mb-xs {
2957
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
2958
+ margin-block-end: var(--ams-space-xs) !important;
2959
+ }
2960
+
2961
+ .ams-mb-s {
2962
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
2963
+ margin-block-end: var(--ams-space-s) !important;
2964
+ }
2965
+
2966
+ .ams-mb-m {
2967
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
2968
+ margin-block-end: var(--ams-space-m) !important;
2969
+ }
2970
+
2971
+ .ams-mb-l {
2972
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
2973
+ margin-block-end: var(--ams-space-l) !important;
2974
+ }
2975
+
2976
+ .ams-mb-xl {
2977
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
2978
+ margin-block-end: var(--ams-space-xl) !important;
2979
+ }
2980
+
2981
+ .ams-mb-2xl {
2982
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
2983
+ margin-block-end: var(--ams-space-2xl) !important;
2984
+ }
2985
+
2986
+ /**
2987
+ * @license EUPL-1.2+
2988
+ * Copyright Gemeente Amsterdam
2989
+ */
2990
+ .ams-mark {
2991
+ background-color: var(--ams-mark-background-color);
2992
+ }
2993
+
2994
+ /**
2995
+ * @license EUPL-1.2+
2996
+ * Copyright Gemeente Amsterdam
2997
+ */
2998
+ /**
2999
+ * @license EUPL-1.2+
3000
+ * Copyright Gemeente Amsterdam
3001
+ */
3002
+ .ams-menu {
3003
+ background-color: var(--ams-menu-background-color);
3004
+ font-family: var(--ams-menu-font-family);
3005
+ font-size: var(--ams-menu-font-size);
3006
+ font-weight: var(--ams-menu-font-weight);
3007
+ line-height: var(--ams-menu-line-height);
3008
+ margin-inline: calc(var(--ams-grid-padding-inline) * -1);
3009
+ padding-block: var(--ams-menu-padding-block);
3010
+ padding-inline: calc(var(--ams-grid-padding-inline) - var(--ams-menu-link-padding-inline));
3011
+ }
3012
+ @media screen and (min-width: 37.5rem) {
3013
+ .ams-menu {
3014
+ margin-inline: calc(var(--ams-grid-medium-padding-inline) * -1);
3015
+ padding-inline: var(--ams-grid-medium-padding-inline);
3016
+ }
3017
+ }
3018
+ @media screen and (min-width: 72.5rem) {
3019
+ .ams-menu {
3020
+ display: none;
3021
+ margin-inline: 0;
3022
+ max-inline-size: var(--ams-menu-wide-max-inline-size);
3023
+ padding-block: var(--ams-menu-wide-padding-block);
3024
+ padding-inline: var(--ams-menu-wide-padding-inline);
3025
+ }
3026
+ }
3027
+
3028
+ .ams-menu--in-wide-window {
3029
+ display: none;
3030
+ }
3031
+ @media screen and (min-width: 72.5rem) {
3032
+ .ams-menu--in-wide-window {
3033
+ display: block;
3034
+ }
3035
+ }
3036
+
3037
+ .ams-menu__list {
3038
+ display: grid;
3039
+ /* These CSS declarations have a fallback, so it's safe to use them. */
3040
+ /* stylelint-disable-next-line plugin/use-baseline */
3041
+ hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
3042
+ /* stylelint-disable-next-line plugin/use-baseline */
3043
+ hyphens: auto;
3044
+ overflow-wrap: break-word;
3045
+ text-rendering: optimizeLegibility;
3046
+ -moz-text-size-adjust: none;
3047
+ -webkit-text-size-adjust: none;
3048
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
3049
+ /* stylelint-disable-next-line plugin/use-baseline */
3050
+ text-size-adjust: none;
3051
+ list-style: none;
3052
+ margin-block: 0;
3053
+ padding-inline-start: 0;
3054
+ }
3055
+ @media screen and (min-width: 72.5rem) {
3056
+ .ams-menu__list {
3057
+ gap: var(--ams-menu-list-gap);
3058
+ }
3059
+ }
3060
+
3061
+ .ams-menu__link {
3062
+ align-items: flex-start;
3063
+ color: var(--ams-menu-link-color);
3064
+ display: inline-flex;
3065
+ gap: var(--ams-menu-link-gap);
3066
+ outline-offset: var(--ams-menu-link-outline-offset);
3067
+ padding-block: var(--ams-menu-link-padding-block);
3068
+ padding-inline: var(--ams-menu-link-padding-inline);
3069
+ text-decoration-line: var(--ams-menu-link-text-decoration-line);
3070
+ text-decoration-thickness: var(--ams-menu-link-text-decoration-thickness);
3071
+ text-underline-offset: var(--ams-menu-link-text-underline-offset);
3072
+ }
3073
+ .ams-menu__link:hover {
3074
+ color: var(--ams-menu-link-hover-color);
3075
+ text-decoration-line: var(--ams-menu-link-hover-text-decoration-line);
3076
+ }
3077
+ .ams-menu__link .ams-menu__icon {
3078
+ align-self: initial;
3079
+ }
3080
+ @media screen and (min-width: 72.5rem) {
3081
+ .ams-menu__link {
3082
+ align-items: center;
3083
+ display: flex;
3084
+ flex-direction: column;
3085
+ gap: var(--ams-menu-link-wide-gap);
3086
+ text-align: center;
3087
+ }
3088
+ .ams-menu__link .ams-menu__icon {
3089
+ --ams-icon-font-size: var(--ams-icon-heading-2-font-size);
3090
+ --ams-icon-line-height: var(--ams-icon-heading-2-line-height);
3091
+ }
3092
+ }
3093
+
3094
+ /** @deprecated The menu has a dark background now, so this is no longer needed. */
3095
+ .ams-menu__link--contrast {
3096
+ color: var(--ams-menu-link-contrast-color);
3097
+ }
3098
+ .ams-menu__link--contrast:hover {
3099
+ color: var(--ams-menu-link-contrast-hover-color);
3100
+ }
3101
+
3102
+ /** @deprecated The menu has a dark background now, so this is no longer needed. */
3103
+ .ams-menu__link--inverse {
3104
+ color: var(--ams-menu-link-inverse-color);
3105
+ }
3106
+ .ams-menu__link--inverse:hover {
3107
+ color: var(--ams-menu-link-inverse-hover-color);
3108
+ }
3109
+
3110
+ /**
3111
+ * @license EUPL-1.2+
3112
+ * Copyright Gemeente Amsterdam
3113
+ */
3114
+ .ams-ordered-list {
3115
+ box-sizing: border-box;
3116
+ display: grid;
3117
+ gap: var(--ams-ordered-list-gap);
3118
+ text-rendering: optimizeLegibility;
3119
+ -moz-text-size-adjust: none;
3120
+ -webkit-text-size-adjust: none;
3121
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
3122
+ /* stylelint-disable-next-line plugin/use-baseline */
3123
+ text-size-adjust: none;
3124
+ /* These CSS declarations have a fallback, so it's safe to use them. */
3125
+ /* stylelint-disable-next-line plugin/use-baseline */
3126
+ hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
3127
+ /* stylelint-disable-next-line plugin/use-baseline */
3128
+ hyphens: auto;
3129
+ overflow-wrap: break-word;
3130
+ list-style-type: none;
3131
+ margin-block: 0;
3132
+ padding-inline-start: 0;
3133
+ }
3134
+
3135
+ .ams-ordered-list:not(.ams-ordered-list--no-markers) {
3136
+ color: var(--ams-ordered-list-color);
3137
+ font-family: var(--ams-ordered-list-font-family);
3138
+ font-size: var(--ams-ordered-list-font-size);
3139
+ font-weight: var(--ams-ordered-list-font-weight);
3140
+ line-height: var(--ams-ordered-list-line-height);
3141
+ list-style-type: var(--ams-ordered-list-list-style-type);
3142
+ }
3143
+ .ams-ordered-list:not(.ams-ordered-list--no-markers) .ams-ordered-list__item {
3144
+ margin-inline-start: var(--ams-ordered-list-item-margin-inline-start);
3145
+ padding-inline-start: var(--ams-ordered-list-item-padding-inline-start);
3146
+ }
3147
+
3148
+ .ams-ordered-list--inverse:not(.ams-ordered-list--no-markers) {
3149
+ color: var(--ams-ordered-list-inverse-color);
3150
+ }
3151
+
3152
+ .ams-ordered-list--small:not(.ams-ordered-list--no-markers) {
3153
+ font-size: var(--ams-ordered-list-small-font-size);
3154
+ line-height: var(--ams-ordered-list-small-line-height);
3155
+ }
3156
+
3157
+ :is(.ams-ordered-list, .ams-unordered-list) .ams-ordered-list {
3158
+ gap: var(--ams-ordered-list-ordered-list-gap);
3159
+ list-style-type: var(--ams-ordered-list-ordered-list-list-style-type);
3160
+ padding-block-start: var(--ams-ordered-list-ordered-list-padding-block-start);
3161
+ }
3162
+ :is(.ams-ordered-list, .ams-unordered-list) .ams-ordered-list .ams-ordered-list__item {
3163
+ margin-inline-start: var(--ams-ordered-list-ordered-list-item-margin-inline-start);
3164
+ padding-inline-start: var(--ams-ordered-list-ordered-list-item-padding-inline-start);
3165
+ }
3166
+ :is(.ams-ordered-list, .ams-unordered-list) > :not(:last-child) > .ams-ordered-list {
3167
+ padding-block-end: var(--ams-ordered-list-ordered-list-padding-block-end);
3168
+ }
3169
+
3170
+ /**
3171
+ * @license EUPL-1.2+
3172
+ * Copyright Gemeente Amsterdam
3173
+ */
3174
+ .ams-overlap {
3175
+ display: grid;
3176
+ }
3177
+ .ams-overlap > * {
3178
+ grid-column: 1/-1;
3179
+ grid-row: 1/-1;
3180
+ }
3181
+
3182
+ /**
3183
+ * @license EUPL-1.2+
3184
+ * Copyright Gemeente Amsterdam
3185
+ */
3186
+ .ams-page {
3187
+ background-color: var(--ams-page-background-color);
3188
+ margin-inline: auto;
3189
+ max-inline-size: var(--ams-page-max-inline-size);
3190
+ min-block-size: 100vh; /* Fallback for browsers that do not support dvh */
3191
+ min-block-size: 100dvh;
3192
+ }
3193
+
3194
+ /**
3195
+ * @license EUPL-1.2+
3196
+ * Copyright Gemeente Amsterdam
3197
+ */
3198
+ /**
3199
+ * @license EUPL-1.2+
3200
+ * Copyright Gemeente Amsterdam
3201
+ */
3202
+ .ams-page-footer__spotlight {
3203
+ background-color: var(--ams-page-footer-spotlight-background-color);
3204
+ }
3205
+
3206
+ .ams-page-footer__menu {
3207
+ column-gap: var(--ams-page-footer-menu-column-gap);
3208
+ display: flex;
3209
+ flex-wrap: wrap;
3210
+ padding-block: var(--ams-page-footer-menu-padding-block);
3211
+ padding-inline: var(--ams-page-footer-menu-padding-inline);
3212
+ row-gap: var(--ams-page-footer-menu-row-gap);
3213
+ list-style: none;
3214
+ margin-block: 0;
3215
+ }
3216
+ @media screen and (min-width: 37.5rem) {
3217
+ .ams-page-footer__menu {
3218
+ padding-inline: var(--ams-page-footer-menu-medium-padding-inline);
3219
+ }
3220
+ }
3221
+ @media screen and (min-width: 72.5rem) {
3222
+ .ams-page-footer__menu {
3223
+ padding-inline: var(--ams-page-footer-menu-wide-padding-inline);
3224
+ }
3225
+ }
3226
+
3227
+ .ams-page-footer__menu-link {
3228
+ color: var(--ams-page-footer-menu-link-color);
3229
+ font-family: var(--ams-page-footer-menu-link-font-family);
3230
+ font-size: var(--ams-page-footer-menu-link-font-size);
3231
+ font-weight: var(--ams-page-footer-menu-link-font-weight);
3232
+ line-height: var(--ams-page-footer-menu-link-line-height);
3233
+ outline-offset: var(--ams-page-footer-menu-link-outline-offset);
3234
+ text-decoration-line: var(--ams-page-footer-menu-link-text-decoration-line);
3235
+ text-decoration-thickness: var(--ams-page-footer-menu-link-text-decoration-thickness);
3236
+ text-underline-offset: var(--ams-page-footer-menu-link-text-underline-offset);
3237
+ /* These CSS declarations have a fallback, so it's safe to use them. */
3238
+ /* stylelint-disable-next-line plugin/use-baseline */
3239
+ hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
3240
+ /* stylelint-disable-next-line plugin/use-baseline */
3241
+ hyphens: auto;
3242
+ overflow-wrap: break-word;
3243
+ text-rendering: optimizeLegibility;
3244
+ -moz-text-size-adjust: none;
3245
+ -webkit-text-size-adjust: none;
3246
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
3247
+ /* stylelint-disable-next-line plugin/use-baseline */
3248
+ text-size-adjust: none;
3249
+ }
3250
+ .ams-page-footer__menu-link:hover {
3251
+ color: var(--ams-page-footer-menu-link-hover-color);
3252
+ text-decoration-line: var(--ams-page-footer-menu-link-hover-text-decoration-line);
3253
+ }
3254
+
3255
+ /**
3256
+ * @license EUPL-1.2+
3257
+ * Copyright Gemeente Amsterdam
3258
+ */
3259
+ /**
3260
+ * @license EUPL-1.2+
3261
+ * Copyright Gemeente Amsterdam
3262
+ */
3263
+ .ams-page-header {
3264
+ /*
3265
+ * The logo link section is created twice: once outside the navigation and once hidden inside it.
3266
+ * This keeps all navigation in one nav element and lets the menu wrap around the logo link section.
3267
+ * Display grid is used to let both logo link sections overlap.
3268
+ */
3269
+ display: grid;
3270
+ font-family: var(--ams-page-header-font-family);
3271
+ padding-block: var(--ams-page-header-padding-block);
3272
+ padding-inline: var(--ams-page-header-padding-inline);
3273
+ }
3274
+ @media screen and (min-width: 37.5rem) {
3275
+ .ams-page-header {
3276
+ padding-inline: var(--ams-page-header-medium-padding-inline);
3277
+ }
3278
+ }
3279
+ @media screen and (min-width: 72.5rem) {
3280
+ .ams-page-header {
3281
+ padding-inline: var(--ams-page-header-wide-padding-inline);
3282
+ }
3283
+ }
3284
+
3285
+ .ams-page-header__logo-link {
3286
+ align-items: center;
3287
+ align-self: start;
3288
+ column-gap: var(--ams-page-header-logo-link-column-gap);
3289
+ display: flex;
3290
+ grid-area: 1/1;
3291
+ inline-size: fit-content;
3292
+ outline-offset: var(--ams-page-header-logo-link-outline-offset);
3293
+ text-decoration: none;
3294
+ }
3295
+ @media (forced-colors: active) {
3296
+ .ams-page-header__logo-link .ams-logo__emblem,
3297
+ .ams-page-header__logo-link .ams-logo__text-primary,
3298
+ .ams-page-header__logo-link .ams-logo__text-secondary {
3299
+ fill: LinkText;
3300
+ }
3301
+ }
3302
+
3303
+ .ams-page-header__logo-link--hidden {
3304
+ opacity: 0%;
3305
+ -webkit-user-select: none;
3306
+ /* Safari support is added with the prefixed property. */
3307
+ /* stylelint-disable-next-line plugin/use-baseline */
3308
+ user-select: none;
3309
+ }
3310
+
3311
+ .ams-page-header__logo-container {
3312
+ flex-shrink: 0;
3313
+ inline-size: 0.75rem;
3314
+ overflow: hidden;
3315
+ }
3316
+ @media screen and (min-width: 37.5rem) {
3317
+ .ams-page-header__logo-container {
3318
+ inline-size: auto;
3319
+ }
3320
+ }
3321
+
3322
+ .ams-page-header__brand-name {
3323
+ color: var(--ams-page-header-brand-name-color);
3324
+ font-size: var(--ams-page-header-brand-name-font-size);
3325
+ font-weight: var(--ams-page-header-brand-name-font-weight);
3326
+ line-height: var(--ams-page-header-brand-name-line-height);
3327
+ /*
3328
+ * If text-wrap is not supported, it is ignored.
3329
+ * This means the wrapped text will look less balanced, which is fine.
3330
+ */
3331
+ /* stylelint-disable-next-line plugin/use-baseline */
3332
+ text-wrap: var(--ams-page-header-brand-name-text-wrap);
3333
+ }
3334
+
3335
+ .ams-page-header__navigation {
3336
+ column-gap: var(--ams-page-header-navigation-column-gap);
3337
+ display: flex;
3338
+ flex-wrap: wrap;
3339
+ grid-area: 1/1;
3340
+ pointer-events: none;
3341
+ row-gap: var(--ams-page-header-navigation-row-gap);
3342
+ }
3343
+
3344
+ .ams-page-header__menu {
3345
+ align-items: center;
3346
+ column-gap: var(--ams-page-header-menu-column-gap);
3347
+ display: flex;
3348
+ flex-wrap: wrap;
3349
+ justify-content: flex-end;
3350
+ margin-inline-start: auto;
3351
+ pointer-events: auto;
3352
+ row-gap: var(--ams-page-header-menu-row-gap);
3353
+ list-style: none;
3354
+ margin-block: 0;
3355
+ padding-inline-start: 0;
3356
+ }
3357
+
3358
+ @media screen and not (min-width: 72.5rem) {
3359
+ .ams-page-header__menu-item {
3360
+ display: none;
3361
+ }
3362
+ }
3363
+
3364
+ .ams-page-header__menu-item--fixed {
3365
+ display: revert;
3366
+ }
3367
+
3368
+ .ams-page-header__menu-link {
3369
+ display: inline-block;
3370
+ text-decoration-line: var(--ams-page-header-menu-link-text-decoration-line);
3371
+ text-decoration-thickness: var(--ams-page-header-menu-link-text-decoration-thickness);
3372
+ text-underline-offset: var(--ams-page-header-menu-link-text-underline-offset);
3373
+ color: var(--ams-page-header-menu-item-color);
3374
+ font-size: var(--ams-page-header-menu-item-font-size);
3375
+ font-weight: var(--ams-page-header-menu-item-font-weight);
3376
+ line-height: var(--ams-page-header-menu-item-line-height);
3377
+ outline-offset: var(--ams-page-header-menu-item-outline-offset);
3378
+ padding-block: var(--ams-page-header-menu-item-padding-block);
3379
+ touch-action: manipulation;
3380
+ white-space: nowrap;
3381
+ text-rendering: optimizeLegibility;
3382
+ -moz-text-size-adjust: none;
3383
+ -webkit-text-size-adjust: none;
3384
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
3385
+ /* stylelint-disable-next-line plugin/use-baseline */
3386
+ text-size-adjust: none;
3387
+ }
3388
+ .ams-page-header__menu-link:hover {
3389
+ color: var(--ams-page-header-menu-item-hover-color);
3390
+ }
3391
+ .ams-page-header__menu-link:hover {
3392
+ text-decoration-line: var(--ams-page-header-menu-link-hover-text-decoration-line);
3393
+ }
3394
+
3395
+ @media screen and (min-width: 72.5rem) {
3396
+ .ams-page-header__mega-menu-button-item--hide-on-wide-window {
3397
+ display: none;
3398
+ }
3399
+ }
3400
+
3401
+ .ams-page-header__mega-menu-button {
3402
+ column-gap: var(--ams-page-header-menu-item-column-gap);
3403
+ cursor: var(--ams-page-header-mega-menu-button-cursor);
3404
+ display: grid;
3405
+ font-family: inherit;
3406
+ grid-auto-flow: column;
3407
+ color: var(--ams-page-header-menu-item-color);
3408
+ font-size: var(--ams-page-header-menu-item-font-size);
3409
+ font-weight: var(--ams-page-header-menu-item-font-weight);
3410
+ line-height: var(--ams-page-header-menu-item-line-height);
3411
+ outline-offset: var(--ams-page-header-menu-item-outline-offset);
3412
+ padding-block: var(--ams-page-header-menu-item-padding-block);
3413
+ touch-action: manipulation;
3414
+ white-space: nowrap;
3415
+ text-rendering: optimizeLegibility;
3416
+ -moz-text-size-adjust: none;
3417
+ -webkit-text-size-adjust: none;
3418
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
3419
+ /* stylelint-disable-next-line plugin/use-baseline */
3420
+ text-size-adjust: none;
3421
+ }
3422
+ .ams-page-header__mega-menu-button:hover {
3423
+ color: var(--ams-page-header-menu-item-hover-color);
3424
+ }
3425
+ .ams-page-header__mega-menu-button {
3426
+ background: none;
3427
+ border: none;
3428
+ margin-block: 0;
3429
+ margin-inline: 0;
3430
+ padding-inline: 0;
3431
+ }
3432
+
3433
+ .ams-page-header__mega-menu-button[aria-expanded=true] {
3434
+ font-weight: var(--ams-page-header-mega-menu-button-label-open-font-weight);
3435
+ }
3436
+
3437
+ .ams-page-header__mega-menu-button-label,
3438
+ .ams-page-header__mega-menu-button-hidden-label {
3439
+ grid-area: 1/1;
3440
+ }
3441
+
3442
+ .ams-page-header__mega-menu-button-hidden-label {
3443
+ font-weight: var(--ams-page-header-mega-menu-button-label-open-font-weight);
3444
+ pointer-events: none;
3445
+ -webkit-user-select: none;
3446
+ /* Safari support is added with the prefixed property. */
3447
+ /* stylelint-disable-next-line plugin/use-baseline */
3448
+ user-select: none;
3449
+ visibility: hidden;
3450
+ }
3451
+
3452
+ .ams-page-header__menu-icon line {
3453
+ stroke: currentColor;
3454
+ stroke-width: 3px;
3455
+ transform-origin: center;
3456
+ transition: translate 0.1s ease-in-out, rotate 0.2s ease-in-out, opacity 0.1s ease-in-out;
3457
+ }
3458
+ @media (prefers-reduced-motion) {
3459
+ .ams-page-header__menu-icon line {
3460
+ transition: none;
3461
+ }
3462
+ }
3463
+ .ams-page-header__menu-icon .ams-page-header__menu-icon-top {
3464
+ translate: 0 -7px;
3465
+ }
3466
+ .ams-page-header__menu-icon .ams-page-header__menu-icon-bottom {
3467
+ translate: 0 7px;
3468
+ }
3469
+
3470
+ .ams-page-header__menu-icon--open .ams-page-header__menu-icon-top {
3471
+ rotate: 45deg;
3472
+ translate: 0;
3473
+ }
3474
+ .ams-page-header__menu-icon--open .ams-page-header__menu-icon-middle {
3475
+ opacity: 0%;
3476
+ }
3477
+ .ams-page-header__menu-icon--open .ams-page-header__menu-icon-bottom {
3478
+ rotate: -45deg;
3479
+ translate: 0;
3480
+ }
3481
+
3482
+ .ams-page-header__mega-menu {
3483
+ inline-size: 100%;
3484
+ pointer-events: auto;
3485
+ }
3486
+ .ams-page-header__mega-menu .ams-grid {
3487
+ padding-inline: 0;
3488
+ }
3489
+
3490
+ .ams-page-header__mega-menu--closed.ams-page-header__mega-menu--closed {
3491
+ display: none;
3492
+ }
3493
+
3494
+ @media screen and (min-width: 72.5rem) {
3495
+ .ams-page-header__grid-cell-narrow-window-only {
3496
+ display: none;
3497
+ }
3498
+ }
3499
+
3500
+ /**
3501
+ * @license EUPL-1.2+
3502
+ * Copyright Gemeente Amsterdam
3503
+ */
3504
+ /* @deprecated We no longer use this size of headings. Use `.ams-heading.ams-heading--1` instead. */
3505
+ .ams-page-heading {
3506
+ box-sizing: border-box;
3507
+ /* stylelint-disable-next-line plugin/use-baseline */
3508
+ break-after: avoid;
3509
+ break-inside: avoid;
3510
+ color: var(--ams-page-heading-color);
3511
+ font-family: var(--ams-page-heading-font-family);
3512
+ font-size: var(--ams-page-heading-font-size);
3513
+ font-weight: var(--ams-page-heading-font-weight);
3514
+ line-height: var(--ams-page-heading-line-height);
3515
+ /* stylelint-disable-next-line plugin/use-baseline */
3516
+ text-wrap: var(--ams-page-heading-text-wrap);
3517
+ /* These CSS declarations have a fallback, so it's safe to use them. */
3518
+ /* stylelint-disable-next-line plugin/use-baseline */
3519
+ hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
3520
+ /* stylelint-disable-next-line plugin/use-baseline */
3521
+ hyphens: auto;
3522
+ overflow-wrap: break-word;
3523
+ text-rendering: optimizeLegibility;
3524
+ -moz-text-size-adjust: none;
3525
+ -webkit-text-size-adjust: none;
3526
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
3527
+ /* stylelint-disable-next-line plugin/use-baseline */
3528
+ text-size-adjust: none;
3529
+ margin-block: 0;
3530
+ }
3531
+
3532
+ .ams-page-heading--inverse {
3533
+ color: var(--ams-page-heading-inverse-color);
3534
+ }
3535
+
3536
+ /**
3537
+ * @license EUPL-1.2+
3538
+ * Copyright Gemeente Amsterdam
3539
+ */
3540
+ .ams-pagination {
3541
+ display: flex;
3542
+ flex-wrap: wrap;
3543
+ font-family: var(--ams-pagination-font-family);
3544
+ font-size: var(--ams-pagination-font-size);
3545
+ font-weight: var(--ams-pagination-font-weight);
3546
+ justify-content: center;
3547
+ line-height: var(--ams-pagination-line-height);
3548
+ }
3549
+
3550
+ .ams-pagination__list {
3551
+ display: flex;
3552
+ flex-wrap: wrap;
3553
+ list-style-type: none;
3554
+ margin-block: 0;
3555
+ padding-inline-start: 0;
3556
+ }
3557
+
3558
+ .ams-pagination__link {
3559
+ color: var(--ams-pagination-link-color);
3560
+ display: inline-flex;
3561
+ gap: var(--ams-pagination-link-gap);
3562
+ outline-offset: var(--ams-pagination-link-outline-offset);
3563
+ padding-inline: var(--ams-pagination-link-padding-inline);
3564
+ text-decoration-line: var(--ams-pagination-link-text-decoration-line);
3565
+ text-decoration-thickness: var(--ams-pagination-link-text-decoration-thickness);
3566
+ text-underline-offset: var(--ams-pagination-link-text-underline-offset);
3567
+ touch-action: manipulation;
3568
+ text-rendering: optimizeLegibility;
3569
+ -moz-text-size-adjust: none;
3570
+ -webkit-text-size-adjust: none;
3571
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
3572
+ /* stylelint-disable-next-line plugin/use-baseline */
3573
+ text-size-adjust: none;
3574
+ }
3575
+ .ams-pagination__link:hover {
3576
+ color: var(--ams-pagination-link-hover-color);
3577
+ text-decoration-line: var(--ams-pagination-link-hover-text-decoration-line);
3578
+ }
3579
+ .ams-pagination__link span.ams-icon svg {
3580
+ block-size: 1rem;
3581
+ inline-size: 1rem;
3582
+ }
3583
+
3584
+ .ams-pagination__link[aria-current=page] {
3585
+ font-weight: var(--ams-pagination-link-current-font-weight);
3586
+ }
3587
+ .ams-pagination__link[aria-current=page]:hover {
3588
+ text-decoration: none;
3589
+ }
3590
+
3591
+ /**
3592
+ * @license EUPL-1.2+
3593
+ * Copyright Gemeente Amsterdam
3594
+ */
3595
+ .ams-paragraph {
3596
+ box-sizing: border-box;
3597
+ color: var(--ams-paragraph-color);
3598
+ font-family: var(--ams-paragraph-font-family);
3599
+ font-size: var(--ams-paragraph-font-size);
3600
+ font-weight: var(--ams-paragraph-font-weight);
3601
+ line-height: var(--ams-paragraph-line-height);
3602
+ text-rendering: optimizeLegibility;
3603
+ -moz-text-size-adjust: none;
3604
+ -webkit-text-size-adjust: none;
3605
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
3606
+ /* stylelint-disable-next-line plugin/use-baseline */
3607
+ text-size-adjust: none;
3608
+ /* These CSS declarations have a fallback, so it's safe to use them. */
3609
+ /* stylelint-disable-next-line plugin/use-baseline */
3610
+ hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
3611
+ /* stylelint-disable-next-line plugin/use-baseline */
3612
+ hyphens: auto;
3613
+ overflow-wrap: break-word;
3614
+ margin-block: 0;
3615
+ }
3616
+
3617
+ .ams-paragraph--small {
3618
+ font-size: var(--ams-paragraph-small-font-size);
3619
+ line-height: var(--ams-paragraph-small-line-height);
3620
+ }
3621
+
3622
+ .ams-paragraph--large {
3623
+ font-size: var(--ams-paragraph-large-font-size);
3624
+ line-height: var(--ams-paragraph-large-line-height);
3625
+ }
3626
+
3627
+ .ams-paragraph--inverse {
3628
+ color: var(--ams-paragraph-inverse-color);
3629
+ }
3630
+
3631
+ /**
3632
+ * @license EUPL-1.2+
3633
+ * Copyright Gemeente Amsterdam
3634
+ */
3635
+ .ams-password-input {
3636
+ background-color: var(--ams-password-input-background-color);
3637
+ border-color: var(--ams-password-input-border-color);
3638
+ border-style: var(--ams-password-input-border-style);
3639
+ border-width: var(--ams-password-input-border-width);
3640
+ box-sizing: border-box;
3641
+ color: var(--ams-password-input-color);
3642
+ font-family: var(--ams-password-input-font-family);
3643
+ font-size: var(--ams-password-input-font-size);
3644
+ font-weight: var(--ams-password-input-font-weight);
3645
+ line-height: var(--ams-password-input-line-height);
3646
+ max-inline-size: 100%;
3647
+ outline-offset: var(--ams-password-input-outline-offset);
3648
+ padding-block: var(--ams-password-input-padding-block);
3649
+ padding-inline: var(--ams-password-input-padding-inline);
3650
+ touch-action: manipulation;
3651
+ text-rendering: optimizeLegibility;
3652
+ -moz-text-size-adjust: none;
3653
+ -webkit-text-size-adjust: none;
3654
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
3655
+ /* stylelint-disable-next-line plugin/use-baseline */
3656
+ text-size-adjust: none;
3657
+ -webkit-appearance: none;
3658
+ appearance: none;
3659
+ border-radius: 0;
3660
+ margin-block: 0;
3661
+ }
3662
+
3663
+ .ams-password-input:not([size]) {
3664
+ inline-size: 100%;
3665
+ }
3666
+
3667
+ .ams-password-input::placeholder {
3668
+ color: var(--ams-password-input-placeholder-color);
3669
+ opacity: 100%;
3670
+ }
3671
+
3672
+ .ams-password-input:disabled {
3673
+ color: var(--ams-password-input-disabled-color);
3674
+ cursor: var(--ams-password-input-disabled-cursor);
3675
+ }
3676
+
3677
+ .ams-password-input:not(:disabled):invalid,
3678
+ .ams-password-input:not(:disabled)[aria-invalid=true] {
3679
+ border-color: var(--ams-password-input-invalid-border-color);
3680
+ }
3681
+
3682
+ .ams-password-input:not(:disabled):hover {
3683
+ box-shadow: var(--ams-password-input-hover-box-shadow);
3684
+ }
3685
+
3686
+ .ams-password-input:not(:disabled):invalid:hover,
3687
+ .ams-password-input:not(:disabled)[aria-invalid=true]:hover {
3688
+ border-color: var(--ams-password-input-invalid-hover-border-color);
3689
+ box-shadow: var(--ams-password-input-invalid-hover-box-shadow);
3690
+ }
3691
+
3692
+ /**
3693
+ * @license EUPL-1.2+
3694
+ * Copyright Gemeente Amsterdam
3695
+ */
3696
+ /**
3697
+ * @license EUPL-1.2+
3698
+ * Copyright Gemeente Amsterdam
3699
+ */
3700
+ .ams-radio__input {
3701
+ appearance: none;
3702
+ inline-size: 0;
3703
+ margin-block: 0;
3704
+ margin-inline: 0;
3705
+ }
3706
+ .ams-radio__input:focus + label {
3707
+ outline: auto;
3708
+ }
3709
+ .ams-radio__input:focus:not(:focus-visible) + label {
3710
+ outline: 0;
3711
+ }
3712
+
3713
+ .ams-radio__label {
3714
+ color: var(--ams-radio-color);
3715
+ cursor: var(--ams-radio-cursor);
3716
+ display: inline-flex;
3717
+ font-family: var(--ams-radio-font-family);
3718
+ font-size: var(--ams-radio-font-size);
3719
+ font-weight: var(--ams-radio-font-weight);
3720
+ gap: var(--ams-radio-gap);
3721
+ line-height: var(--ams-radio-line-height);
3722
+ outline-offset: var(--ams-radio-outline-offset);
3723
+ text-decoration-thickness: var(--ams-radio-text-decoration-thickness);
3724
+ text-underline-offset: var(--ams-radio-text-underline-offset);
3725
+ /* These CSS declarations have a fallback, so it's safe to use them. */
3726
+ /* stylelint-disable-next-line plugin/use-baseline */
3727
+ hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
3728
+ /* stylelint-disable-next-line plugin/use-baseline */
3729
+ hyphens: auto;
3730
+ overflow-wrap: break-word;
3731
+ text-rendering: optimizeLegibility;
3732
+ -moz-text-size-adjust: none;
3733
+ -webkit-text-size-adjust: none;
3734
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
3735
+ /* stylelint-disable-next-line plugin/use-baseline */
3736
+ text-size-adjust: none;
3737
+ }
3738
+
3739
+ .ams-radio__icon-container {
3740
+ block-size: var(--ams-radio-icon-container-block-size);
3741
+ display: flex;
3742
+ flex: none;
3743
+ inline-size: var(--ams-radio-icon-container-inline-size);
3744
+ }
3745
+
3746
+ .ams-radio__circle {
3747
+ fill: var(--ams-radio-circle-fill);
3748
+ stroke: var(--ams-radio-circle-stroke);
3749
+ }
3750
+
3751
+ .ams-radio__hover-indicator {
3752
+ stroke: none;
3753
+ }
3754
+
3755
+ .ams-radio__checked-indicator {
3756
+ display: none;
3757
+ fill: var(--ams-radio-checked-indicator-fill);
3758
+ }
3759
+
3760
+ .ams-radio__label:hover {
3761
+ color: var(--ams-radio-hover-color);
3762
+ text-decoration-line: var(--ams-radio-hover-text-decoration-line);
3763
+ }
3764
+ .ams-radio__label:hover .ams-radio__circle {
3765
+ stroke: var(--ams-radio-circle-hover-stroke);
3766
+ }
3767
+ .ams-radio__label:hover .ams-radio__hover-indicator {
3768
+ stroke: var(--ams-radio-hover-indicator-hover-stroke);
3769
+ }
3770
+ .ams-radio__label:hover .ams-radio__checked-indicator {
3771
+ fill: var(--ams-radio-checked-indicator-hover-fill);
3772
+ }
3773
+
3774
+ .ams-radio__input[aria-invalid=true] + .ams-radio__label .ams-radio__circle {
3775
+ stroke: var(--ams-radio-circle-invalid-stroke);
3776
+ }
3777
+ .ams-radio__input[aria-invalid=true] + .ams-radio__label .ams-radio__checked-indicator {
3778
+ fill: var(--ams-radio-checked-indicator-invalid-fill);
3779
+ }
3780
+
3781
+ .ams-radio__input:checked + .ams-radio__label .ams-radio__checked-indicator {
3782
+ display: block;
3783
+ }
3784
+
3785
+ .ams-radio__input:disabled + .ams-radio__label {
3786
+ color: var(--ams-radio-disabled-color);
3787
+ cursor: var(--ams-radio-disabled-cursor);
3788
+ }
3789
+ .ams-radio__input:disabled + .ams-radio__label .ams-radio__circle {
3790
+ stroke: var(--ams-radio-circle-disabled-stroke);
3791
+ }
3792
+ .ams-radio__input:disabled + .ams-radio__label .ams-radio__checked-indicator {
3793
+ fill: var(--ams-radio-checked-indicator-disabled-fill);
3794
+ }
3795
+
3796
+ .ams-radio__input[aria-invalid=true]:disabled + .ams-radio__label .ams-radio__circle {
3797
+ stroke: var(--ams-radio-circle-disabled-invalid-stroke);
3798
+ }
3799
+ .ams-radio__input[aria-invalid=true]:disabled + .ams-radio__label .ams-radio__checked-indicator {
3800
+ fill: var(--ams-radio-checked-indicator-disabled-invalid-fill);
3801
+ }
3802
+
3803
+ .ams-radio__input:disabled + .ams-radio__label:hover {
3804
+ text-decoration: none;
3805
+ }
3806
+ .ams-radio__input:disabled + .ams-radio__label:hover .ams-radio__hover-indicator {
3807
+ stroke: transparent;
3808
+ }
3809
+
3810
+ .ams-radio__input[aria-invalid=true] + .ams-radio__label:hover .ams-radio__circle {
3811
+ stroke: var(--ams-radio-circle-invalid-hover-stroke);
3812
+ }
3813
+ .ams-radio__input[aria-invalid=true] + .ams-radio__label:hover .ams-radio__hover-indicator {
3814
+ stroke: var(--ams-radio-hover-indicator-invalid-hover-stroke);
3815
+ }
3816
+ .ams-radio__input[aria-invalid=true] + .ams-radio__label:hover .ams-radio__checked-indicator {
3817
+ fill: var(--ams-radio-checked-indicator-invalid-hover-fill);
3818
+ }
3819
+
3820
+ .ams-radio__input[aria-invalid=true]:disabled + .ams-radio__label:hover .ams-radio__circle {
3821
+ stroke: var(--ams-radio-circle-disabled-invalid-hover-stroke);
3822
+ }
3823
+ .ams-radio__input[aria-invalid=true]:disabled + .ams-radio__label:hover .ams-radio__hover-indicator {
3824
+ stroke: transparent;
3825
+ }
3826
+ .ams-radio__input[aria-invalid=true]:disabled + .ams-radio__label:hover .ams-radio__checked-indicator {
3827
+ fill: var(--ams-radio-checked-indicator-disabled-invalid-hover-fill);
3828
+ }
3829
+
3830
+ @media (forced-colors: active) {
3831
+ .ams-radio__label .ams-radio__circle,
3832
+ .ams-radio__label:hover .ams-radio__circle,
3833
+ .ams-radio__input[aria-invalid=true] + .ams-radio__label .ams-radio__circle,
3834
+ .ams-radio__input[aria-invalid=true] + .ams-radio__label:hover .ams-radio__circle {
3835
+ fill: Canvas;
3836
+ stroke: FieldText;
3837
+ }
3838
+ .ams-radio__label .ams-radio__hover-indicator,
3839
+ .ams-radio__label:hover .ams-radio__hover-indicator,
3840
+ .ams-radio__input[aria-invalid=true] + .ams-radio__label .ams-radio__hover-indicator,
3841
+ .ams-radio__input[aria-invalid=true] + .ams-radio__label:hover .ams-radio__hover-indicator {
3842
+ stroke: none;
3843
+ }
3844
+ .ams-radio__label .ams-radio__checked-indicator,
3845
+ .ams-radio__label:hover .ams-radio__checked-indicator,
3846
+ .ams-radio__input[aria-invalid=true] + .ams-radio__label .ams-radio__checked-indicator,
3847
+ .ams-radio__input[aria-invalid=true] + .ams-radio__label:hover .ams-radio__checked-indicator {
3848
+ fill: FieldText;
3849
+ }
3850
+ }
3851
+ @media (forced-colors: active) {
3852
+ .ams-radio__input:checked + .ams-radio__label .ams-radio__circle,
3853
+ .ams-radio__input[aria-invalid=true]:checked + .ams-radio__label:hover .ams-radio__circle {
3854
+ stroke: ActiveText;
3855
+ }
3856
+ .ams-radio__input:checked + .ams-radio__label .ams-radio__checked-indicator,
3857
+ .ams-radio__input[aria-invalid=true]:checked + .ams-radio__label:hover .ams-radio__checked-indicator {
3858
+ fill: ActiveText;
3859
+ }
3860
+ }
3861
+ @media (forced-colors: active) {
3862
+ .ams-radio__input:disabled + .ams-radio__label .ams-radio__circle,
3863
+ .ams-radio__input[aria-invalid=true]:disabled + .ams-radio__label .ams-radio__circle,
3864
+ .ams-radio__input[aria-invalid=true]:disabled + .ams-radio__label:hover .ams-radio__circle {
3865
+ stroke: GrayText;
3866
+ }
3867
+ .ams-radio__input:disabled + .ams-radio__label .ams-radio__checked-indicator,
3868
+ .ams-radio__input[aria-invalid=true]:disabled + .ams-radio__label .ams-radio__checked-indicator,
3869
+ .ams-radio__input[aria-invalid=true]:disabled + .ams-radio__label:hover .ams-radio__checked-indicator {
3870
+ fill: GrayText;
3871
+ }
3872
+ }
3873
+ /**
3874
+ * @license EUPL-1.2+
3875
+ * Copyright Gemeente Amsterdam
3876
+ */
3877
+ .ams-row {
3878
+ display: flex;
3879
+ gap: var(--ams-row-gap-medium);
3880
+ }
3881
+
3882
+ .ams-row--gap-x-small {
3883
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
3884
+ gap: var(--ams-row-gap-x-small);
3885
+ }
3886
+
3887
+ .ams-row--gap-small {
3888
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
3889
+ gap: var(--ams-row-gap-small);
3890
+ }
3891
+
3892
+ .ams-row--gap-large {
3893
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
3894
+ gap: var(--ams-row-gap-large);
3895
+ }
3896
+
3897
+ .ams-row--gap-x-large {
3898
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
3899
+ gap: var(--ams-row-gap-x-large);
3900
+ }
3901
+
3902
+ .ams-row--gap-none {
3903
+ gap: 0;
3904
+ }
3905
+
3906
+ .ams-row--wrap {
3907
+ flex-wrap: wrap;
3908
+ }
3909
+
3910
+ .ams-row--align-around {
3911
+ justify-content: space-around;
3912
+ }
3913
+
3914
+ .ams-row--align-between {
3915
+ justify-content: space-between;
3916
+ }
3917
+
3918
+ .ams-row--align-center {
3919
+ justify-content: center;
3920
+ }
3921
+
3922
+ .ams-row--align-end {
3923
+ justify-content: flex-end;
3924
+ }
3925
+
3926
+ .ams-row--align-evenly {
3927
+ justify-content: space-evenly;
3928
+ }
3929
+
3930
+ .ams-row--align-vertical-baseline {
3931
+ align-items: baseline;
3932
+ }
3933
+
3934
+ .ams-row--align-vertical-center {
3935
+ align-items: center;
3936
+ }
3937
+
3938
+ .ams-row--align-vertical-end {
3939
+ align-items: flex-end;
3940
+ }
3941
+
3942
+ .ams-row--align-vertical-start {
3943
+ align-items: flex-start;
3944
+ }
3945
+
3946
+ /**
3947
+ * @license EUPL-1.2+
3948
+ * Copyright Gemeente Amsterdam
3949
+ */
3950
+ .ams-search-field {
3951
+ display: flex;
3952
+ isolation: isolate;
3953
+ }
3954
+
3955
+ .ams-search-field__input {
3956
+ background-color: var(--ams-search-field-input-background-color);
3957
+ border-color: var(--ams-search-field-input-border-color);
3958
+ border-style: var(--ams-search-field-input-border-style);
3959
+ border-width: var(--ams-search-field-input-border-width);
3960
+ box-sizing: border-box;
3961
+ color: var(--ams-search-field-input-color);
3962
+ font-family: var(--ams-search-field-input-font-family);
3963
+ font-size: var(--ams-search-field-input-font-size);
3964
+ font-weight: var(--ams-search-field-input-font-weight);
3965
+ inline-size: 100%;
3966
+ line-height: var(--ams-search-field-input-line-height);
3967
+ outline-offset: var(--ams-search-field-input-outline-offset);
3968
+ padding-block: var(--ams-search-field-input-padding-block);
3969
+ padding-inline: var(--ams-search-field-input-padding-inline);
3970
+ touch-action: manipulation;
3971
+ text-rendering: optimizeLegibility;
3972
+ -moz-text-size-adjust: none;
3973
+ -webkit-text-size-adjust: none;
3974
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
3975
+ /* stylelint-disable-next-line plugin/use-baseline */
3976
+ text-size-adjust: none;
3977
+ -webkit-appearance: none;
3978
+ appearance: none;
3979
+ border-radius: 0;
3980
+ margin-block: 0;
3981
+ }
3982
+ .ams-search-field__input:focus {
3983
+ z-index: 1;
3984
+ }
3985
+
3986
+ .ams-search-field__input::placeholder {
3987
+ color: var(--ams-search-field-input-placeholder-color);
3988
+ }
3989
+
3990
+ .ams-search-field__input:not(:disabled):invalid,
3991
+ .ams-search-field__input:not(:disabled)[aria-invalid=true] {
3992
+ border-color: var(--ams-search-field-input-invalid-border-color);
3993
+ }
3994
+
3995
+ .ams-search-field__input:not(:disabled):hover {
3996
+ box-shadow: var(--ams-search-field-input-hover-box-shadow);
3997
+ }
3998
+
3999
+ .ams-search-field__input:not(:disabled):invalid:hover,
4000
+ .ams-search-field__input:not(:disabled)[aria-invalid=true]:hover {
4001
+ border-color: var(--ams-search-field-input-invalid-hover-border-color);
4002
+ box-shadow: var(--ams-search-field-input-invalid-hover-box-shadow);
4003
+ }
4004
+
4005
+ .ams-search-field__input::-webkit-search-cancel-button {
4006
+ appearance: none;
4007
+ background-image: var(--ams-search-field-input-cancel-button-background-image);
4008
+ block-size: var(--ams-search-field-input-cancel-button-block-size);
4009
+ cursor: var(--ams-search-field-input-cancel-button-cursor);
4010
+ inline-size: var(--ams-search-field-input-cancel-button-inline-size);
4011
+ margin-inline-start: 0.5rem;
4012
+ }
4013
+
4014
+ /**
4015
+ * @license EUPL-1.2+
4016
+ * Copyright Gemeente Amsterdam
4017
+ */
4018
+ .ams-select {
4019
+ background-color: var(--ams-select-background-color);
4020
+ border-color: var(--ams-select-border-color);
4021
+ border-style: var(--ams-select-border-style);
4022
+ border-width: var(--ams-select-border-width);
4023
+ color: var(--ams-select-color);
4024
+ font-family: var(--ams-select-font-family);
4025
+ font-size: var(--ams-select-font-size);
4026
+ font-weight: var(--ams-select-font-weight);
4027
+ line-height: var(--ams-select-line-height);
4028
+ max-inline-size: 100%;
4029
+ outline-offset: var(--ams-select-outline-offset);
4030
+ padding-block: var(--ams-select-padding-block);
4031
+ padding-inline: var(--ams-select-padding-inline);
4032
+ touch-action: manipulation;
4033
+ appearance: none;
4034
+ border-radius: 0;
4035
+ }
4036
+ .ams-select:not([multiple]) {
4037
+ background-image: var(--ams-select-background-image);
4038
+ background-position: var(--ams-select-background-position);
4039
+ background-repeat: no-repeat;
4040
+ background-size: 1em 1em;
4041
+ }
4042
+
4043
+ .ams-select:disabled {
4044
+ color: var(--ams-select-disabled-color);
4045
+ cursor: var(--ams-select-disabled-cursor);
4046
+ }
4047
+ .ams-select:disabled:not([multiple]) {
4048
+ background-image: var(--ams-select-disabled-background-image);
4049
+ }
4050
+
4051
+ .ams-select:not(:disabled):invalid,
4052
+ .ams-select:not(:disabled)[aria-invalid=true] {
4053
+ border-color: var(--ams-select-invalid-border-color);
4054
+ }
4055
+
4056
+ .ams-select:not(:disabled):hover {
4057
+ box-shadow: var(--ams-select-hover-box-shadow);
4058
+ }
4059
+ .ams-select:not(:disabled):hover:not([multiple]) {
4060
+ background-image: var(--ams-select-hover-background-image);
4061
+ }
4062
+
4063
+ .ams-select:not(:disabled):invalid:hover,
4064
+ .ams-select:not(:disabled)[aria-invalid=true]:hover {
4065
+ border-color: var(--ams-select-invalid-hover-border-color);
4066
+ box-shadow: var(--ams-select-invalid-hover-box-shadow);
4067
+ }
4068
+
4069
+ .ams-select__option:disabled {
4070
+ color: var(--ams-select-option-disabled-color);
4071
+ }
4072
+
4073
+ /**
4074
+ * @license EUPL-1.2+
4075
+ * Copyright Gemeente Amsterdam
4076
+ */
4077
+ .ams-skip-link {
4078
+ background-color: var(--ams-skip-link-background-color);
4079
+ color: var(--ams-skip-link-color);
4080
+ display: block;
4081
+ font-family: var(--ams-skip-link-font-family);
4082
+ font-size: var(--ams-skip-link-font-size);
4083
+ font-weight: var(--ams-skip-link-font-weight);
4084
+ line-height: var(--ams-skip-link-line-height);
4085
+ outline-offset: var(--ams-skip-link-outline-offset);
4086
+ padding-block: var(--ams-skip-link-padding-block);
4087
+ padding-inline: var(--ams-skip-link-padding-inline);
4088
+ text-align: center;
4089
+ text-decoration: none;
4090
+ }
4091
+ .ams-skip-link:hover {
4092
+ background-color: var(--ams-skip-link-hover-background-color);
4093
+ }
4094
+
4095
+ /**
4096
+ * @license EUPL-1.2+
4097
+ * Copyright Gemeente Amsterdam
4098
+ */
4099
+ .ams-spotlight {
4100
+ background-color: var(--ams-spotlight-background-color);
4101
+ }
4102
+
4103
+ .ams-spotlight--azure {
4104
+ background-color: var(--ams-spotlight-azure-background-color);
4105
+ }
4106
+
4107
+ .ams-spotlight--green {
4108
+ background-color: var(--ams-spotlight-green-background-color);
4109
+ }
4110
+
4111
+ .ams-spotlight--lime {
4112
+ background-color: var(--ams-spotlight-lime-background-color);
4113
+ }
4114
+
4115
+ .ams-spotlight--magenta {
4116
+ background-color: var(--ams-spotlight-magenta-background-color);
4117
+ }
4118
+
4119
+ .ams-spotlight--orange {
4120
+ background-color: var(--ams-spotlight-orange-background-color);
4121
+ }
4122
+
4123
+ .ams-spotlight--yellow {
4124
+ background-color: var(--ams-spotlight-yellow-background-color);
4125
+ }
4126
+
4127
+ /**
4128
+ * @license EUPL-1.2+
4129
+ * Copyright Gemeente Amsterdam
4130
+ */
4131
+ .ams-standalone-link {
4132
+ color: var(--ams-standalone-link-color);
4133
+ column-gap: var(--ams-standalone-link-column-gap);
4134
+ display: inline-flex;
4135
+ font-family: var(--ams-standalone-link-font-family);
4136
+ font-size: var(--ams-standalone-link-font-size);
4137
+ font-weight: var(--ams-standalone-link-font-weight);
4138
+ line-height: var(--ams-standalone-link-line-height);
4139
+ outline-offset: var(--ams-standalone-link-outline-offset);
4140
+ text-decoration-line: var(--ams-standalone-link-text-decoration-line);
4141
+ text-decoration-thickness: var(--ams-standalone-link-text-decoration-thickness);
4142
+ text-underline-offset: var(--ams-standalone-link-text-underline-offset);
4143
+ /* These CSS declarations have a fallback, so it's safe to use them. */
4144
+ /* stylelint-disable-next-line plugin/use-baseline */
4145
+ hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
4146
+ /* stylelint-disable-next-line plugin/use-baseline */
4147
+ hyphens: auto;
4148
+ overflow-wrap: break-word;
4149
+ text-rendering: optimizeLegibility;
4150
+ -moz-text-size-adjust: none;
4151
+ -webkit-text-size-adjust: none;
4152
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
4153
+ /* stylelint-disable-next-line plugin/use-baseline */
4154
+ text-size-adjust: none;
4155
+ }
4156
+ .ams-standalone-link:hover {
4157
+ color: var(--ams-standalone-link-hover-color);
4158
+ text-decoration-line: var(--ams-standalone-link-hover-text-decoration-line);
4159
+ }
4160
+
4161
+ .ams-standalone-link--contrast {
4162
+ color: var(--ams-standalone-link-contrast-color);
4163
+ }
4164
+ .ams-standalone-link--contrast:hover {
4165
+ color: var(--ams-standalone-link-contrast-hover-color);
4166
+ }
4167
+
4168
+ .ams-standalone-link--inverse {
4169
+ color: var(--ams-standalone-link-inverse-color);
4170
+ }
4171
+ .ams-standalone-link--inverse:hover {
4172
+ color: var(--ams-standalone-link-inverse-hover-color);
4173
+ }
4174
+
4175
+ /* stylelint-disable-next-line block-no-empty */
4176
+ .ams-standalone-link--with-icon {
4177
+ /* This class name is deprecated. */
4178
+ }
4179
+
4180
+ /**
4181
+ * @license EUPL-1.2+
4182
+ * Copyright Gemeente Amsterdam
4183
+ */
4184
+ /**
4185
+ * @license EUPL-1.2+
4186
+ * Copyright Gemeente Amsterdam
4187
+ */
4188
+ .ams-switch__input {
4189
+ appearance: none;
4190
+ inline-size: 0;
4191
+ margin-block: 0;
4192
+ margin-inline: 0;
4193
+ }
4194
+ .ams-switch__input:focus + label {
4195
+ outline: auto;
4196
+ }
4197
+ .ams-switch__input:focus:not(:focus-visible) + label {
4198
+ outline: 0;
4199
+ }
4200
+
4201
+ .ams-switch__label {
4202
+ --ams-switch-track-border-width: var(--ams-border-width-m);
4203
+ background-color: var(--ams-switch-background-color);
4204
+ border: var(--ams-switch-track-border-width) solid transparent;
4205
+ border-radius: calc(var(--ams-switch-thumb-inline-size) * 2);
4206
+ box-sizing: border-box;
4207
+ cursor: var(--ams-switch-cursor);
4208
+ display: inline-block;
4209
+ inline-size: var(--ams-switch-inline-size);
4210
+ outline-offset: var(--ams-switch-outline-offset);
4211
+ transition: background-color 0.2s ease-in-out;
4212
+ vertical-align: middle;
4213
+ }
4214
+
4215
+ .ams-switch__label::before {
4216
+ background-color: var(--ams-switch-thumb-background-color);
4217
+ block-size: var(--ams-switch-thumb-block-size);
4218
+ border-radius: 50%;
4219
+ content: "";
4220
+ display: block;
4221
+ inline-size: var(--ams-switch-thumb-inline-size);
4222
+ transition-duration: 0.1s;
4223
+ transition-property: box-shadow, transform;
4224
+ transition-timing-function: ease-in-out;
4225
+ }
4226
+ @media (forced-colors: active) {
4227
+ .ams-switch__label::before {
4228
+ background-color: FieldText;
4229
+ }
4230
+ }
4231
+
4232
+ .ams-switch__input:checked + .ams-switch__label {
4233
+ background-color: var(--ams-switch-checked-background-color);
4234
+ }
4235
+
4236
+ .ams-switch__input:disabled + .ams-switch__label {
4237
+ background-color: var(--ams-switch-disabled-background-color);
4238
+ cursor: var(--ams-switch-disabled-cursor);
4239
+ }
4240
+
4241
+ .ams-switch__input:checked + .ams-switch__label::before {
4242
+ transform: translate(calc(100% - 2 * var(--ams-switch-track-border-width)));
4243
+ }
4244
+
4245
+ .ams-switch:hover .ams-switch__input:enabled + .ams-switch__label::before {
4246
+ box-shadow: var(--ams-switch-thumb-hover-box-shadow);
4247
+ }
4248
+
4249
+ /**
4250
+ * @license EUPL-1.2+
4251
+ * Copyright Gemeente Amsterdam
4252
+ */
4253
+ .ams-table-of-contents {
4254
+ display: flex;
4255
+ flex-direction: column;
4256
+ font-family: var(--ams-table-of-contents-font-family);
4257
+ font-size: var(--ams-table-of-contents-font-size);
4258
+ font-weight: var(--ams-table-of-contents-font-weight);
4259
+ gap: var(--ams-table-of-contents-gap);
4260
+ line-height: var(--ams-table-of-contents-line-height);
4261
+ }
4262
+
4263
+ .ams-table-of-contents__list {
4264
+ box-sizing: border-box;
4265
+ display: flex;
4266
+ flex-direction: column;
4267
+ gap: var(--ams-table-of-contents-list-gap);
4268
+ list-style: none;
4269
+ /* These CSS declarations have a fallback, so it's safe to use them. */
4270
+ /* stylelint-disable-next-line plugin/use-baseline */
4271
+ hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
4272
+ /* stylelint-disable-next-line plugin/use-baseline */
4273
+ hyphens: auto;
4274
+ overflow-wrap: break-word;
4275
+ text-rendering: optimizeLegibility;
4276
+ -moz-text-size-adjust: none;
4277
+ -webkit-text-size-adjust: none;
4278
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
4279
+ /* stylelint-disable-next-line plugin/use-baseline */
4280
+ text-size-adjust: none;
4281
+ margin-block: 0;
4282
+ padding-inline: 0;
4283
+ }
4284
+ .ams-table-of-contents__list .ams-table-of-contents__list {
4285
+ padding-block-start: var(--ams-table-of-contents-list-list-padding-block-start);
4286
+ padding-inline-start: var(--ams-table-of-contents-list-list-padding-inline-start);
4287
+ }
4288
+
4289
+ .ams-table-of-contents__link {
4290
+ color: var(--ams-table-of-contents-link-color);
4291
+ outline-offset: var(--ams-table-of-contents-link-outline-offset);
4292
+ text-decoration-line: var(--ams-table-of-contents-link-text-decoration-line);
4293
+ text-decoration-thickness: var(--ams-table-of-contents-link-text-decoration-thickness);
4294
+ text-underline-offset: var(--ams-table-of-contents-link-text-underline-offset);
4295
+ }
4296
+ .ams-table-of-contents__link:hover {
4297
+ color: var(--ams-table-of-contents-link-hover-color);
4298
+ text-decoration-line: var(--ams-table-of-contents-link-hover-text-decoration-line);
4299
+ }
4300
+
4301
+ /**
4302
+ * @license EUPL-1.2+
4303
+ * Copyright Gemeente Amsterdam
4304
+ */
4305
+ .ams-table {
4306
+ overflow-x: auto;
4307
+ }
4308
+
4309
+ .ams-table__table {
4310
+ border-spacing: 0;
4311
+ break-inside: avoid;
4312
+ color: var(--ams-table-color);
4313
+ font-family: var(--ams-table-font-family);
4314
+ font-size: var(--ams-table-font-size);
4315
+ font-weight: var(--ams-table-font-weight);
4316
+ line-height: var(--ams-table-line-height);
4317
+ }
4318
+
4319
+ .ams-table__caption {
4320
+ font-weight: var(--ams-table-caption-font-weight);
4321
+ text-align: start;
4322
+ }
4323
+
4324
+ .ams-table__cell,
4325
+ .ams-table__header-cell {
4326
+ border-block-end: var(--ams-table-cell-border-block-end);
4327
+ padding-block: var(--ams-table-cell-padding-block);
4328
+ padding-inline: var(--ams-table-cell-padding-inline);
4329
+ text-align: start;
4330
+ vertical-align: top;
4331
+ }
4332
+
4333
+ .ams-table__header-cell {
4334
+ font-weight: var(--ams-table-header-cell-font-weight);
4335
+ }
4336
+
4337
+ /**
4338
+ * @license EUPL-1.2+
4339
+ * Copyright Gemeente Amsterdam
4340
+ */
4341
+ /**
4342
+ * @license EUPL-1.2+
4343
+ * Copyright Gemeente Amsterdam
4344
+ */
4345
+ .ams-tabs {
4346
+ display: grid;
4347
+ gap: var(--ams-tabs-gap);
4348
+ }
4349
+
4350
+ .ams-tabs__list {
4351
+ box-shadow: var(--ams-tabs-list-box-shadow);
4352
+ display: flex;
4353
+ overflow-x: auto;
4354
+ }
4355
+
4356
+ .ams-tabs__button {
4357
+ color: var(--ams-tabs-button-color);
4358
+ cursor: var(--ams-tabs-button-cursor);
4359
+ display: grid;
4360
+ flex-shrink: 0;
4361
+ font-family: var(--ams-tabs-button-font-family);
4362
+ font-size: var(--ams-tabs-button-font-size);
4363
+ font-weight: var(--ams-tabs-button-font-weight);
4364
+ line-height: var(--ams-tabs-button-line-height);
4365
+ outline-offset: var(--ams-tabs-button-outline-offset);
4366
+ padding-block: var(--ams-tabs-button-padding-block);
4367
+ padding-inline: var(--ams-tabs-button-padding-inline);
4368
+ background-color: transparent;
4369
+ border: none;
4370
+ margin-block: 0;
4371
+ margin-inline: 0;
4372
+ }
4373
+ .ams-tabs__button:disabled {
4374
+ color: var(--ams-tabs-button-disabled-color);
4375
+ cursor: var(--ams-tabs-button-disabled-cursor);
4376
+ }
4377
+ @media (forced-colors: active) {
4378
+ .ams-tabs__button:disabled {
4379
+ color: GrayText;
4380
+ }
4381
+ }
4382
+ .ams-tabs__button:hover:not([disabled]) {
4383
+ color: var(--ams-tabs-button-hover-color);
4384
+ }
4385
+ .ams-tabs__button:hover:not([aria-selected=true], [disabled]) {
4386
+ box-shadow: var(--ams-tabs-button-hover-box-shadow);
4387
+ }
4388
+ .ams-tabs__button[aria-selected=true] {
4389
+ box-shadow: var(--ams-tabs-button-selected-box-shadow);
4390
+ font-weight: var(--ams-tabs-button-selected-font-weight);
4391
+ }
4392
+ @media (forced-colors: active) {
4393
+ .ams-tabs__button[aria-selected=true] {
4394
+ background-color: SelectedItem;
4395
+ }
4396
+ }
4397
+
4398
+ .ams-tabs__button-label,
4399
+ .ams-tabs__button-label-hidden {
4400
+ grid-area: 1/1;
4401
+ }
4402
+
4403
+ .ams-tabs__button-label-hidden {
4404
+ font-weight: var(--ams-tabs-button-selected-font-weight);
4405
+ pointer-events: none;
4406
+ -webkit-user-select: none;
4407
+ /* Safari support is added with the prefixed property. */
4408
+ /* stylelint-disable-next-line plugin/use-baseline */
4409
+ user-select: none;
4410
+ visibility: hidden;
4411
+ }
4412
+
4413
+ .ams-tabs__panel {
4414
+ overflow-x: auto;
4415
+ }
4416
+
4417
+ /**
4418
+ * @license EUPL-1.2+
4419
+ * Copyright Gemeente Amsterdam
4420
+ */
4421
+ .ams-text-area {
4422
+ background-color: var(--ams-text-area-background-color);
4423
+ border-color: var(--ams-text-area-border-color);
4424
+ border-style: var(--ams-text-area-border-style);
4425
+ border-width: var(--ams-text-area-border-width);
4426
+ box-sizing: border-box;
4427
+ color: var(--ams-text-area-color);
4428
+ font-family: var(--ams-text-area-font-family);
4429
+ font-size: var(--ams-text-area-font-size);
4430
+ font-weight: var(--ams-text-area-font-weight);
4431
+ inline-size: 100%;
4432
+ line-height: var(--ams-text-area-line-height);
4433
+ max-inline-size: 100%;
4434
+ min-block-size: var(--ams-text-area-min-block-size);
4435
+ outline-offset: var(--ams-text-area-outline-offset);
4436
+ padding-block: var(--ams-text-area-padding-block);
4437
+ padding-inline: var(--ams-text-area-padding-inline);
4438
+ touch-action: manipulation;
4439
+ text-rendering: optimizeLegibility;
4440
+ -moz-text-size-adjust: none;
4441
+ -webkit-text-size-adjust: none;
4442
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
4443
+ /* stylelint-disable-next-line plugin/use-baseline */
4444
+ text-size-adjust: none;
4445
+ -webkit-appearance: none;
4446
+ appearance: none;
4447
+ border-radius: 0;
4448
+ margin-block: 0;
4449
+ }
4450
+
4451
+ .ams-text-area::placeholder {
4452
+ color: var(--ams-text-area-placeholder-color);
4453
+ opacity: 100%;
4454
+ }
4455
+
4456
+ .ams-text-area:disabled {
4457
+ color: var(--ams-text-area-disabled-color);
4458
+ cursor: var(--ams-text-area-disabled-cursor);
4459
+ }
4460
+
4461
+ .ams-text-area:not(:disabled):invalid,
4462
+ .ams-text-area:not(:disabled)[aria-invalid=true] {
4463
+ border-color: var(--ams-text-area-invalid-border-color);
4464
+ }
4465
+
4466
+ .ams-text-area:not(:disabled):hover {
4467
+ box-shadow: var(--ams-text-area-hover-box-shadow);
4468
+ }
4469
+
4470
+ .ams-text-area:not(:disabled):invalid:hover,
4471
+ .ams-text-area:not(:disabled)[aria-invalid=true]:hover {
4472
+ border-color: var(--ams-text-area-invalid-hover-border-color);
4473
+ box-shadow: var(--ams-text-area-invalid-hover-box-shadow);
4474
+ }
4475
+
4476
+ /*
4477
+ * Resizing is not fully supported in Safari on iOS.
4478
+ * This is acceptable, it is not crucial functionality.
4479
+ */
4480
+ .ams-text-area--resize-none {
4481
+ /* stylelint-disable-next-line plugin/use-baseline */
4482
+ resize: none;
4483
+ }
4484
+
4485
+ .ams-text-area--resize-horizontal {
4486
+ /* stylelint-disable-next-line plugin/use-baseline */
4487
+ resize: inline;
4488
+ }
4489
+
4490
+ .ams-text-area--resize-vertical {
4491
+ /* stylelint-disable-next-line plugin/use-baseline */
4492
+ resize: block;
4493
+ }
4494
+
4495
+ .ams-text-area--cols {
4496
+ inline-size: auto;
4497
+ }
4498
+
4499
+ /**
4500
+ * @license EUPL-1.2+
4501
+ * Copyright Gemeente Amsterdam
4502
+ */
4503
+ .ams-text-input {
4504
+ background-color: var(--ams-text-input-background-color);
4505
+ border-color: var(--ams-text-input-border-color);
4506
+ border-style: var(--ams-text-input-border-style);
4507
+ border-width: var(--ams-text-input-border-width);
4508
+ box-sizing: border-box;
4509
+ color: var(--ams-text-input-color);
4510
+ font-family: var(--ams-text-input-font-family);
4511
+ font-size: var(--ams-text-input-font-size);
4512
+ font-weight: var(--ams-text-input-font-weight);
4513
+ line-height: var(--ams-text-input-line-height);
4514
+ max-inline-size: 100%;
4515
+ outline-offset: var(--ams-text-input-outline-offset);
4516
+ padding-block: var(--ams-text-input-padding-block);
4517
+ padding-inline: var(--ams-text-input-padding-inline);
4518
+ touch-action: manipulation;
4519
+ text-rendering: optimizeLegibility;
4520
+ -moz-text-size-adjust: none;
4521
+ -webkit-text-size-adjust: none;
4522
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
4523
+ /* stylelint-disable-next-line plugin/use-baseline */
4524
+ text-size-adjust: none;
4525
+ -webkit-appearance: none;
4526
+ appearance: none;
4527
+ border-radius: 0;
4528
+ margin-block: 0;
4529
+ }
4530
+
4531
+ .ams-text-input:not([size]) {
4532
+ inline-size: 100%;
4533
+ }
4534
+
4535
+ .ams-text-input::placeholder {
4536
+ color: var(--ams-text-input-placeholder-color);
4537
+ opacity: 100%;
4538
+ }
4539
+
4540
+ .ams-text-input:disabled {
4541
+ color: var(--ams-text-input-disabled-color);
4542
+ cursor: var(--ams-text-input-disabled-cursor);
4543
+ }
4544
+
4545
+ .ams-text-input:not(:disabled):invalid,
4546
+ .ams-text-input:not(:disabled)[aria-invalid=true] {
4547
+ border-color: var(--ams-text-input-invalid-border-color);
4548
+ }
4549
+
4550
+ .ams-text-input:not(:disabled):hover {
4551
+ box-shadow: var(--ams-text-input-hover-box-shadow);
4552
+ }
4553
+
4554
+ .ams-text-input:not(:disabled):invalid:hover,
4555
+ .ams-text-input:not(:disabled)[aria-invalid=true]:hover {
4556
+ border-color: var(--ams-text-input-invalid-hover-border-color);
4557
+ box-shadow: var(--ams-text-input-invalid-hover-box-shadow);
4558
+ }
4559
+
4560
+ /**
4561
+ * @license EUPL-1.2+
4562
+ * Copyright Gemeente Amsterdam
4563
+ */
4564
+ .ams-time-input {
4565
+ background-color: var(--ams-time-input-background-color);
4566
+ border-color: var(--ams-time-input-border-color);
4567
+ border-style: var(--ams-time-input-border-style);
4568
+ border-width: var(--ams-time-input-border-width);
4569
+ box-sizing: border-box;
4570
+ color: var(--ams-time-input-color);
4571
+ font-family: var(--ams-time-input-font-family);
4572
+ font-size: var(--ams-time-input-font-size);
4573
+ font-weight: var(--ams-time-input-font-weight);
4574
+ line-height: var(--ams-time-input-line-height);
4575
+ min-block-size: calc(var(--ams-time-input-font-size) * var(--ams-time-input-line-height) + 2 * var(--ams-time-input-padding-block));
4576
+ min-inline-size: calc(4ch + 2 * var(--ams-time-input-padding-inline));
4577
+ outline-offset: var(--ams-time-input-outline-offset);
4578
+ padding-block: var(--ams-time-input-padding-block);
4579
+ padding-inline: var(--ams-time-input-padding-inline);
4580
+ touch-action: manipulation;
4581
+ text-rendering: optimizeLegibility;
4582
+ -moz-text-size-adjust: none;
4583
+ -webkit-text-size-adjust: none;
4584
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
4585
+ /* stylelint-disable-next-line plugin/use-baseline */
4586
+ text-size-adjust: none;
4587
+ -webkit-appearance: none;
4588
+ appearance: none;
4589
+ border-radius: 0;
4590
+ inline-size: auto;
4591
+ margin-block: 0;
4592
+ }
4593
+ .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 {
4594
+ padding-block: 0;
4595
+ }
4596
+
4597
+ .ams-time-input::-webkit-calendar-picker-indicator {
4598
+ appearance: none;
4599
+ background-image: var(--ams-time-input-calendar-picker-indicator-background-image);
4600
+ cursor: var(--ams-time-input-calendar-picker-indicator-cursor);
4601
+ }
4602
+
4603
+ .ams-time-input:hover::-webkit-calendar-picker-indicator {
4604
+ background-image: var(--ams-time-input-hover-calendar-picker-indicator-background-image);
4605
+ }
4606
+
4607
+ .ams-time-input:disabled {
4608
+ color: var(--ams-time-input-disabled-color);
4609
+ cursor: var(--ams-time-input-disabled-cursor);
4610
+ }
4611
+
4612
+ .ams-time-input:disabled::-webkit-calendar-picker-indicator {
4613
+ background-image: var(--ams-time-input-disabled-calendar-picker-indicator-background-image);
4614
+ visibility: visible;
4615
+ }
4616
+
4617
+ .ams-time-input:not(:disabled):invalid,
4618
+ .ams-time-input:not(:disabled)[aria-invalid=true] {
4619
+ border-color: var(--ams-time-input-invalid-border-color);
4620
+ }
4621
+
4622
+ .ams-time-input:not(:disabled):hover {
4623
+ box-shadow: var(--ams-time-input-hover-box-shadow);
4624
+ }
4625
+
4626
+ .ams-time-input:not(:disabled):invalid:hover,
4627
+ .ams-time-input:not(:disabled)[aria-invalid=true]:hover {
4628
+ border-color: var(--ams-time-input-invalid-hover-border-color);
4629
+ box-shadow: var(--ams-time-input-invalid-hover-box-shadow);
4630
+ }
4631
+
4632
+ /**
4633
+ * @license EUPL-1.2+
4634
+ * Copyright Gemeente Amsterdam
4635
+ */
4636
+ .ams-unordered-list {
4637
+ box-sizing: border-box;
4638
+ display: grid;
4639
+ gap: var(--ams-unordered-list-gap);
4640
+ /* These CSS declarations have a fallback, so it's safe to use them. */
4641
+ /* stylelint-disable-next-line plugin/use-baseline */
4642
+ hyphenate-limit-chars: var(--ams-typography-hyphenate-limit-chars);
4643
+ /* stylelint-disable-next-line plugin/use-baseline */
4644
+ hyphens: auto;
4645
+ overflow-wrap: break-word;
4646
+ text-rendering: optimizeLegibility;
4647
+ -moz-text-size-adjust: none;
4648
+ -webkit-text-size-adjust: none;
4649
+ /* The prefixed declarations increase the support somewhat, and if the property is not supported it is ignored. */
4650
+ /* stylelint-disable-next-line plugin/use-baseline */
4651
+ text-size-adjust: none;
4652
+ list-style: none;
4653
+ margin-block: 0;
4654
+ padding-inline-start: 0;
4655
+ }
4656
+
4657
+ .ams-unordered-list:not(.ams-unordered-list--no-markers) {
4658
+ color: var(--ams-unordered-list-color);
4659
+ font-family: var(--ams-unordered-list-font-family);
4660
+ font-size: var(--ams-unordered-list-font-size);
4661
+ font-weight: var(--ams-unordered-list-font-weight);
4662
+ line-height: var(--ams-unordered-list-line-height);
4663
+ list-style-type: var(--ams-unordered-list-list-style-type);
4664
+ }
4665
+ .ams-unordered-list:not(.ams-unordered-list--no-markers) .ams-unordered-list__item {
4666
+ margin-inline-start: var(--ams-unordered-list-item-margin-inline-start);
4667
+ padding-inline-start: var(--ams-unordered-list-item-padding-inline-start);
4668
+ }
4669
+
4670
+ .ams-unordered-list--inverse:not(.ams-unordered-list--no-markers) {
4671
+ color: var(--ams-unordered-list-inverse-color);
4672
+ }
4673
+
4674
+ .ams-unordered-list--small:not(.ams-unordered-list--no-markers) {
4675
+ font-size: var(--ams-unordered-list-small-font-size);
4676
+ line-height: var(--ams-unordered-list-small-line-height);
4677
+ }
4678
+
4679
+ :is(.ams-ordered-list, .ams-unordered-list) .ams-unordered-list {
4680
+ gap: var(--ams-unordered-list-unordered-list-gap);
4681
+ list-style-type: var(--ams-unordered-list-unordered-list-list-style-type);
4682
+ padding-block-start: var(--ams-unordered-list-unordered-list-padding-block-start);
4683
+ }
4684
+ :is(.ams-ordered-list, .ams-unordered-list) .ams-unordered-list .ams-unordered-list__item {
4685
+ margin-inline-start: var(--ams-unordered-list-unordered-list-item-margin-inline-start);
4686
+ padding-inline-start: var(--ams-unordered-list-unordered-list-item-padding-inline-start);
4687
+ }
4688
+ :is(.ams-ordered-list, .ams-unordered-list) > :not(:last-child) > .ams-unordered-list {
4689
+ padding-block-end: var(--ams-unordered-list-unordered-list-padding-block-end);
4690
+ }
4691
+
4692
+ /**
4693
+ * @license EUPL-1.2+
4694
+ * Copyright Gemeente Amsterdam
4695
+ */
4696
+ .ams-visually-hidden:not(:active, :focus) {
4697
+ block-size: 1px;
4698
+ clip-path: inset(50%);
4699
+ inline-size: 1px;
4700
+ overflow: hidden;
4701
+ position: absolute;
4702
+ -webkit-user-select: none;
4703
+ /* Safari support is added with the prefixed property. */
4704
+ /* stylelint-disable-next-line plugin/use-baseline */
4705
+ user-select: none;
4706
+ white-space: nowrap;
4707
+ }
4708
+
4709
+ /*# sourceMappingURL=index.css.map */