@amsterdam/design-system-css 2.1.0 → 2.2.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 (31) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/avatar/avatar.css +1 -1
  3. package/dist/avatar/avatar.css.map +1 -1
  4. package/dist/button/button.css +1 -101
  5. package/dist/button/button.css.map +1 -1
  6. package/dist/field-set/field-set.css +1 -1
  7. package/dist/field-set/field-set.css.map +1 -1
  8. package/dist/hint/hint.css +1 -1
  9. package/dist/hint/hint.css.map +1 -1
  10. package/dist/index.css +1 -4709
  11. package/dist/index.css.map +1 -1
  12. package/dist/label/label.css +1 -1
  13. package/dist/label/label.css.map +1 -1
  14. package/dist/page/page.css +1 -1
  15. package/dist/page/page.css.map +1 -1
  16. package/dist/page-header/page-header.css +1 -1
  17. package/dist/page-header/page-header.css.map +1 -1
  18. package/package.json +3 -3
  19. package/src/components/avatar/avatar.scss +10 -2
  20. package/src/components/field-set/field-set.scss +4 -0
  21. package/src/components/hint/hint.scss +4 -0
  22. package/src/components/label/label.scss +4 -0
  23. package/src/components/menu/README.md +2 -0
  24. package/src/components/page/README.md +6 -18
  25. package/src/components/page/page.scss +33 -0
  26. package/src/components/page-header/README.md +2 -1
  27. package/src/components/page-header/page-header.scss +16 -23
  28. package/dist/app/app.css +0 -40
  29. package/dist/app/app.css.map +0 -1
  30. package/dist/app-navigation/app-navigation.css +0 -249
  31. package/dist/app-navigation/app-navigation.css.map +0 -1
package/dist/index.css CHANGED
@@ -1,4709 +1 @@
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 */
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-grid;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;place-content:stretch;vertical-align:middle}.ams-avatar--has-image img{block-size:100%;inline-size:100%;object-fit:cover}.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{break-after:avoid;font-family:var(--ams-breadcrumb-font-family);font-size:var(--ams-breadcrumb-font-size);font-weight:var(--ams-breadcrumb-font-weight);line-height:var(--ams-breadcrumb-line-height)}.ams-breadcrumb__list{box-sizing:border-box;break-inside:avoid;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-grid-padding-inline)*-1)}@media screen and (min-width: 37.5rem){.ams-breakout__cell--has-spotlight{margin-inline:calc(var(--ams-grid-medium-padding-inline)*-1)}}@media screen and (min-width: 72.5rem){.ams-breakout__cell--has-spotlight{margin-inline:calc(var(--ams-grid-wide-padding-inline)*-1)}}.ams-breakout--gap-vertical--small>.ams-breakout__cell--has-spotlight{margin-block:calc(var(--ams-space-l)*-1)}.ams-breakout--gap-vertical--large>.ams-breakout__cell--has-spotlight{margin-block:calc(var(--ams-space-2xl)*-1)}.ams-breakout__cell--row-span-1{grid-row-end:span 1}.ams-breakout__cell--row-start-1{grid-row-start:1}.ams-breakout__cell--row-span-2{grid-row-end:span 2}.ams-breakout__cell--row-start-2{grid-row-start:2}.ams-breakout__cell--row-span-3{grid-row-end:span 3}.ams-breakout__cell--row-start-3{grid-row-start:3}.ams-breakout__cell--row-span-4{grid-row-end:span 4}.ams-breakout__cell--row-start-4{grid-row-start:4}@media screen and (min-width: 37.5rem){.ams-breakout__cell--row-span-1-medium{grid-row-end:span 1}.ams-breakout__cell--row-start-1-medium{grid-row-start:1}.ams-breakout__cell--row-span-2-medium{grid-row-end:span 2}.ams-breakout__cell--row-start-2-medium{grid-row-start:2}.ams-breakout__cell--row-span-3-medium{grid-row-end:span 3}.ams-breakout__cell--row-start-3-medium{grid-row-start:3}.ams-breakout__cell--row-span-4-medium{grid-row-end:span 4}.ams-breakout__cell--row-start-4-medium{grid-row-start:4}}@media screen and (min-width: 72.5rem){.ams-breakout__cell--row-span-1-wide{grid-row-end:span 1}.ams-breakout__cell--row-start-1-wide{grid-row-start:1}.ams-breakout__cell--row-span-2-wide{grid-row-end:span 2}.ams-breakout__cell--row-start-2-wide{grid-row-start:2}.ams-breakout__cell--row-span-3-wide{grid-row-end:span 3}.ams-breakout__cell--row-start-3-wide{grid-row-start:3}.ams-breakout__cell--row-span-4-wide{grid-row-end:span 4}.ams-breakout__cell--row-start-4-wide{grid-row-start:4}}.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:not(:last-child){margin-block-end:var(--ams-card-heading-margin-block-end)}.ams-card>.ams-card__image:not(:last-child){margin-block-end:var(--ams-card-image-margin-block-end)}.ams-card__heading-group{display:flex;flex-direction:column-reverse;gap:var(--ams-card-heading-group-gap);margin-block-end:var(--ams-card-heading-group-margin-block-end)}.ams-card__link{color:var(--ams-card-link-color);text-decoration-line:var(--ams-card-link-text-decoration-line);text-decoration-thickness:var(--ams-card-link-text-decoration-thickness);text-underline-offset:var(--ams-card-link-text-underline-offset)}.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-calendar-picker-indicator-background-image);cursor:var(--ams-date-input-calendar-picker-indicator-cursor)}.ams-date-input:hover::-webkit-calendar-picker-indicator{background-image:var(--ams-date-input-hover-calendar-picker-indicator-background-image)}.ams-date-input:disabled{color:var(--ams-date-input-disabled-color);cursor:var(--ams-date-input-disabled-cursor)}.ams-date-input:disabled::-webkit-calendar-picker-indicator{background-image:var(--ams-date-input-disabled-calendar-picker-indicator-background-image);visibility:visible}.ams-date-input:not(:disabled):invalid,.ams-date-input:not(:disabled)[aria-invalid=true]{border-color:var(--ams-date-input-invalid-border-color)}.ams-date-input:not(:disabled):hover{box-shadow:var(--ams-date-input-hover-box-shadow)}.ams-date-input:not(:disabled):invalid:hover,.ams-date-input:not(:disabled)[aria-invalid=true]:hover{border-color:var(--ams-date-input-invalid-hover-border-color);box-shadow:var(--ams-date-input-invalid-hover-box-shadow)}.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__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:left;inline-size:100%;padding-inline:0}.ams-field-set__legend+*{clear:both}.ams-field-set__legend--in-fieldset{font-weight:var(--ams-field-set-legend-in-fieldset-font-weight)}.ams-field-set__heading{font-size:inherit;font-weight:inherit;margin-block:0}.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-hint--in-fieldset{color:var(--ams-hint-in-fieldset-color)}.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;position:relative;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-label--in-fieldset{font-weight:var(--ams-label-in-fieldset-font-weight)}.ams-label__heading{font-size:var(--ams-label-font-size);font-weight:var(--ams-label-font-weight);margin-block:0}.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{background-color:var(--ams-menu-background-color);font-family:var(--ams-menu-font-family);font-size:var(--ams-menu-font-size);font-weight:var(--ams-menu-font-weight);line-height:var(--ams-menu-line-height);margin-inline:calc(var(--ams-grid-padding-inline)*-1);padding-block:var(--ams-menu-padding-block);padding-inline:calc(var(--ams-grid-padding-inline) - var(--ams-menu-link-padding-inline))}@media screen and (min-width: 37.5rem){.ams-menu{margin-inline:calc(var(--ams-grid-medium-padding-inline)*-1);padding-inline:var(--ams-grid-medium-padding-inline)}}@media screen and (min-width: 72.5rem){.ams-menu{display:none;margin-inline:0;max-inline-size:var(--ams-menu-wide-max-inline-size);padding-block:var(--ams-menu-wide-padding-block);padding-inline:var(--ams-menu-wide-padding-inline)}}.ams-menu--in-wide-window{display:none}@media screen and (min-width: 72.5rem){.ams-menu--in-wide-window{display:block}}.ams-menu__list{display:grid;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:inline-flex;gap:var(--ams-menu-link-gap);outline-offset:var(--ams-menu-link-outline-offset);padding-block:var(--ams-menu-link-padding-block);padding-inline:var(--ams-menu-link-padding-inline);text-decoration-line:var(--ams-menu-link-text-decoration-line);text-decoration-thickness:var(--ams-menu-link-text-decoration-thickness);text-underline-offset:var(--ams-menu-link-text-underline-offset)}.ams-menu__link:hover{color:var(--ams-menu-link-hover-color);text-decoration-line:var(--ams-menu-link-hover-text-decoration-line)}.ams-menu__link .ams-menu__icon{align-self:initial}@media screen and (min-width: 72.5rem){.ams-menu__link{align-items:center;display:flex;flex-direction:column;gap:var(--ams-menu-link-wide-gap);text-align:center}.ams-menu__link .ams-menu__icon{--ams-icon-font-size: var(--ams-icon-heading-2-font-size);--ams-icon-line-height: var(--ams-icon-heading-2-line-height)}}.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--with-menu{display:grid;grid-auto-rows:min-content auto 1fr auto;grid-template-areas:"skip-link skip-link" "menu header" "menu body" "menu footer";grid-template-columns:auto 1fr;max-inline-size:var(--ams-page-with-menu-max-inline-size)}.ams-page--with-menu>.ams-page__area--skip-link{grid-area:skip-link;margin-inline-end:var(--ams-page-with-menu-area-skip-link-margin-inline-end)}.ams-page--with-menu>.ams-page__area--menu{grid-area:menu}.ams-page--with-menu>.ams-page__area--header{grid-area:header}.ams-page--with-menu>.ams-page__area--body{grid-area:body}.ams-page--with-menu>.ams-page__area--footer{grid-area:footer}.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%;-webkit-user-select:none;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-flex;gap:var(--ams-page-header-menu-link-gap);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;-webkit-user-select:none;user-select:none;visibility:hidden}.ams-page-header__menu-icon-top,.ams-page-header__menu-icon-middle,.ams-page-header__menu-icon-bottom{transform-origin:center;transition:opacity .1s ease-in-out,rotate .2s ease-in-out,translate .1s ease-in-out}@media(prefers-reduced-motion){.ams-page-header__menu-icon-top,.ams-page-header__menu-icon-middle,.ams-page-header__menu-icon-bottom{transition:none}}.ams-page-header__menu-icon--open .ams-page-header__menu-icon-top{rotate:45deg;translate:-4px 4px}.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:-4px -4px}.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;-webkit-user-select: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-calendar-picker-indicator-background-image);cursor:var(--ams-time-input-calendar-picker-indicator-cursor)}.ams-time-input:hover::-webkit-calendar-picker-indicator{background-image:var(--ams-time-input-hover-calendar-picker-indicator-background-image)}.ams-time-input:disabled{color:var(--ams-time-input-disabled-color);cursor:var(--ams-time-input-disabled-cursor)}.ams-time-input:disabled::-webkit-calendar-picker-indicator{background-image:var(--ams-time-input-disabled-calendar-picker-indicator-background-image);visibility:visible}.ams-time-input:not(:disabled):invalid,.ams-time-input:not(:disabled)[aria-invalid=true]{border-color:var(--ams-time-input-invalid-border-color)}.ams-time-input:not(:disabled):hover{box-shadow:var(--ams-time-input-hover-box-shadow)}.ams-time-input:not(:disabled):invalid:hover,.ams-time-input:not(:disabled)[aria-invalid=true]:hover{border-color:var(--ams-time-input-invalid-hover-border-color);box-shadow:var(--ams-time-input-invalid-hover-box-shadow)}.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-path:inset(50%);inline-size:1px;overflow:hidden;position:absolute;-webkit-user-select:none;user-select:none;white-space:nowrap}/*# sourceMappingURL=index.css.map */