@gov-design-system-ce/components 0.0.47 → 0.0.48

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.
@@ -0,0 +1,2532 @@
1
+ /* stylelint-disable */
2
+ /* stylelint-enable */
3
+ /* stylelint-disable */
4
+ /* stylelint-enable */
5
+ /* stylelint-disable */
6
+ /* stylelint-enable */
7
+ /* stylelint-disable */
8
+ /* stylelint-enable */
9
+ /* [Core] - Buttons
10
+ ------------------------------------------------------------------ */
11
+ /*
12
+ * Gets color from theme-colors or from palette-colors
13
+ */
14
+ /*
15
+ * Converts hex value to rgb colors value
16
+ */
17
+ /* stylelint-disable order/order */
18
+ /* stylelint-enable order/order */
19
+ /*
20
+ * Generates list of utility classes for margin, padding
21
+ *
22
+ * Make sure $list of definitions is sorted so that last item is defined last
23
+ * So largest views are mentioned last.
24
+ */
25
+ /*
26
+ - Variables - Sizes
27
+ */
28
+ /* "Constants" for general usage */
29
+ /*
30
+ - Variables - Layout
31
+ */
32
+ /**
33
+ * Utilities - Offset
34
+ */
35
+ /* stylelint-disable order/order */
36
+ /* stylelint-enable order/order */
37
+ /* stylelint-disable order/order */
38
+ /* stylelint-enable order/order */
39
+ /* stylelint-disable order/order */
40
+ /* stylelint-enable order/order */
41
+ /**
42
+ * Generates CSS3 var with default value
43
+ */
44
+ /*
45
+ - Variables - General
46
+ */
47
+ /*
48
+ - Variables - Typography
49
+ */
50
+ /*
51
+ - Variables - Variants
52
+ */
53
+ /*
54
+ - Variables - Container
55
+ */
56
+ /*
57
+ - Variables - Sizes
58
+ */
59
+ /* "Constants" for general usage */
60
+ /*
61
+ - Variables - Accordion
62
+ */
63
+ /*
64
+ - Variables - Attachments
65
+ */
66
+ /*
67
+ - Variables - Alert
68
+ */
69
+ /*
70
+ - Variables - Backdrop
71
+ */
72
+ /*
73
+ - Variables - Buttons (&& Badges)
74
+ */
75
+ /*
76
+ - Variables - Breadcrumbs
77
+ */
78
+ /*
79
+ - Variables - Classes
80
+ */
81
+ /*
82
+ - Variables - Colors
83
+ */
84
+ /*
85
+ - Variables - Control Group
86
+ */
87
+ /*
88
+ - Variables - Cookiebar
89
+ */
90
+ /*
91
+ - Variables - Dropdown
92
+ */
93
+ /*
94
+ - Variables - Card
95
+ */
96
+ /*
97
+ - Variables - Message
98
+ */
99
+ /*
100
+ - Variables - Empty
101
+ */
102
+ /*
103
+ - Variables - Error code
104
+ */
105
+ /*
106
+ - Variables - Grid
107
+ */
108
+ /*
109
+ - Variables - Tiles
110
+ */
111
+ /*
112
+ - Variables - Modal & Prompt
113
+ */
114
+ /**
115
+ * Utilities - Offset
116
+ */
117
+ /*
118
+ - Variables - shadows
119
+ */
120
+ /* "Constants" for general usage */
121
+ /*
122
+ - Variables - Statsbar
123
+ */
124
+ /*
125
+ - Variables - Tabs
126
+ */
127
+ /*
128
+ - Variables - Tooltip
129
+ */
130
+ /*
131
+ - Variables - Loading
132
+ */
133
+ /*
134
+ - Variables - Forms
135
+ */
136
+ /*
137
+ - Variables - Form Autocomplete
138
+ */
139
+ /*
140
+ - Variables - Form Message
141
+ */
142
+ /*
143
+ - Variables - Form label
144
+ */
145
+ /*
146
+ - Variables - Form switch
147
+ */
148
+ /*
149
+ - Variables - Form select
150
+ */
151
+ /*
152
+ - Variables - Form input
153
+ */
154
+ /*
155
+ - Variables - Form multiselect
156
+ */
157
+ /*
158
+ - Variables - Form password power
159
+ */
160
+ /*
161
+ - Variables - Form checkbox & radio
162
+ */
163
+ /*
164
+ - Variables - Form group
165
+ */
166
+ /*
167
+ - Variables - Form file
168
+ */
169
+ /*
170
+ - Variables - Toast Message
171
+ */
172
+ /*
173
+ - Variables - Wizzard
174
+ */
175
+ /*
176
+ - Variables - Stepper
177
+ */
178
+ /*
179
+ - Variables - Side nav
180
+ */
181
+ /*
182
+ - Variables - Grid & Tile
183
+ */
184
+ /*
185
+ - Variables - Pagination
186
+ */
187
+ /*
188
+ - Variables - Nav
189
+ */
190
+ /*
191
+ - Variables - Layout
192
+ */
193
+ .gov-spin-animation,
194
+ .gov-pseudo-spin-animation::before {
195
+ animation: spin 4s linear infinite;
196
+ }
197
+
198
+ @keyframes spin {
199
+ 100% {
200
+ transform: rotate(360deg);
201
+ }
202
+ }
203
+ @keyframes countdown {
204
+ to {
205
+ transform: scaleX(0);
206
+ }
207
+ }
208
+ @keyframes progress {
209
+ 0% {
210
+ background-position: -200px 0;
211
+ }
212
+ 100% {
213
+ background-position: calc(200px + 100%) 0;
214
+ }
215
+ }
216
+ @keyframes pulse {
217
+ 0% {
218
+ opacity: 1;
219
+ }
220
+ 50% {
221
+ opacity: 0.4;
222
+ }
223
+ 100% {
224
+ opacity: 1;
225
+ }
226
+ }
227
+ gov-accordion:not(.hydrated) {
228
+ position: relative;
229
+ display: block;
230
+ width: 100%;
231
+ display: flex;
232
+ flex-direction: column;
233
+ justify-content: space-between;
234
+ align-items: flex-start;
235
+ width: 100%;
236
+ }
237
+ gov-accordion:not(.hydrated) p {
238
+ display: none;
239
+ }
240
+ gov-accordion:not(.hydrated) gov-accordion-item {
241
+ position: relative;
242
+ width: 100%;
243
+ }
244
+ gov-accordion:not(.hydrated) gov-accordion-item:before {
245
+ content: "";
246
+ position: absolute;
247
+ display: block;
248
+ right: 0;
249
+ bottom: -1px;
250
+ left: 0;
251
+ height: 1px;
252
+ }
253
+ gov-accordion:not(.hydrated) gov-accordion-item[is-expanded=""] p, gov-accordion:not(.hydrated) gov-accordion-item[is-expanded=true i] p, gov-accordion:not(.hydrated) gov-accordion-item[is-expanded="1"] p {
254
+ display: inline-block;
255
+ }
256
+ gov-accordion:not(.hydrated)[size=xs] gov-accordion-item {
257
+ gap: var(--gov-accordion-s-headline-gap, 0.5rem);
258
+ min-height: var(--gov-accordion-s-min-height, 3rem);
259
+ padding: var(--gov-accordion-s-padding-y, 0.75rem) var(--gov-accordion-s-padding-x, 0.5rem);
260
+ }
261
+ gov-accordion:not(.hydrated)[size=xs] gov-accordion-item gov-icon {
262
+ width: calc(var(--gov-text-m-font-size) * 1.2);
263
+ height: calc(var(--gov-text-m-font-size) * 1.2);
264
+ }
265
+ gov-accordion:not(.hydrated)[size=s] gov-accordion-item {
266
+ gap: var(--gov-accordion-s-headline-gap, 0.5rem);
267
+ min-height: var(--gov-accordion-s-min-height, 3rem);
268
+ padding: var(--gov-accordion-s-padding-y, 1.125rem) var(--gov-accordion-s-padding-x, 0.5rem);
269
+ }
270
+ gov-accordion:not(.hydrated)[size=s] gov-accordion-item gov-icon {
271
+ width: calc(var(--gov-text-xl-font-size) * 1.2);
272
+ height: calc(var(--gov-text-xl-font-size) * 1.2);
273
+ }
274
+ gov-accordion:not(.hydrated)[size=m] gov-accordion-item {
275
+ gap: var(--gov-accordion-m-headline-gap, 1rem);
276
+ min-height: var(--gov-accordion-m-min-height, 4.5rem);
277
+ padding: var(--gov-accordion-m-padding-y, 1.25rem) var(--gov-accordion-m-padding-x, 0.5rem);
278
+ }
279
+ gov-accordion:not(.hydrated)[size=m] gov-accordion-item gov-icon {
280
+ width: calc(var(--gov-text-2xl-font-size) * 1.2);
281
+ height: calc(var(--gov-text-2xl-font-size) * 1.2);
282
+ }
283
+ gov-accordion:not(.hydrated)[size=l] gov-accordion-item {
284
+ gap: var(--gov-accordion-l-headline-gap, 1rem);
285
+ min-height: var(--gov-accordion-l-min-height, 5.5rem);
286
+ padding: var(--gov-accordion-l-padding-y, 1.375rem) var(--gov-accordion-l-padding-x, 0.5rem);
287
+ }
288
+ gov-accordion:not(.hydrated)[size=l] gov-accordion-item gov-icon {
289
+ width: calc(var(--gov-text-3xl-font-size) * 1.2);
290
+ height: calc(var(--gov-text-3xl-font-size) * 1.2);
291
+ }
292
+ gov-accordion:not(.hydrated)[variant=primary] gov-accordion-item {
293
+ background-color: var(--gov-accordion-primary-background, transparent);
294
+ color: var(--gov-accordion-primary-color, var(--gov-color-primary));
295
+ }
296
+ gov-accordion:not(.hydrated)[variant=primary] gov-accordion-item:before {
297
+ background-color: var(--gov-accordion-primary-separator, var(--gov-color-secondary-500));
298
+ }
299
+ gov-accordion:not(.hydrated) gov-accordion-item[disabled=""], gov-accordion:not(.hydrated) gov-accordion-item[disabled=true i], gov-accordion:not(.hydrated) gov-accordion-item[disabled="1"] {
300
+ color: var(--gov-accordion-primary-disabled-color, var(--gov-color-primary-400));
301
+ }
302
+ gov-accordion:not(.hydrated)[variant=secondary] gov-accordion-item {
303
+ background-color: var(--gov-accordion-secondary-background, transparent);
304
+ color: var(--gov-accordion-secondary-color, var(--gov-color-secondary));
305
+ }
306
+ gov-accordion:not(.hydrated)[variant=secondary] gov-accordion-item:before {
307
+ background-color: var(--gov-accordion-secondary-separator, var(--gov-color-secondary-500));
308
+ }
309
+ gov-accordion:not(.hydrated) gov-accordion-item[disabled=""], gov-accordion:not(.hydrated) gov-accordion-item[disabled=true i], gov-accordion:not(.hydrated) gov-accordion-item[disabled="1"] {
310
+ color: var(--gov-accordion-secondary-disabled-color, var(--gov-color-secondary-600));
311
+ }
312
+ gov-accordion:not(.hydrated)[no-border] gov-accordion-item:before {
313
+ background-color: transparent;
314
+ }
315
+
316
+ gov-alert:not(.hydrated) {
317
+ position: relative;
318
+ display: block;
319
+ width: 100%;
320
+ display: block;
321
+ width: 100%;
322
+ max-width: calc(var(--gov-container-width, 73.75rem) + 2 * var(--gov-container-padding, 2.5rem));
323
+ margin-right: auto;
324
+ margin-left: auto;
325
+ padding-right: var(--gov-container-padding-mobile, 1.25rem);
326
+ padding-left: var(--gov-container-padding-mobile, 1.25rem);
327
+ display: flex;
328
+ gap: 1rem;
329
+ padding-top: 1rem;
330
+ padding-bottom: 1rem;
331
+ }
332
+ @media (min-width: 48em) {
333
+ gov-alert:not(.hydrated) {
334
+ padding-right: var(--gov-container-padding, 2.5rem);
335
+ padding-left: var(--gov-container-padding, 2.5rem);
336
+ }
337
+ }
338
+ gov-alert:not(.hydrated) gov-icon:not(.hydrated) {
339
+ flex: 0 0 auto;
340
+ }
341
+ gov-alert:not(.hydrated) gov-icon:not(.hydrated) > * {
342
+ width: 1.25rem;
343
+ height: 1.25rem;
344
+ }
345
+ gov-alert:not(.hydrated)[variant=warning] {
346
+ background-color: var(--gov-alert-warning-bg-color, var(--gov-color-warning));
347
+ }
348
+ gov-alert:not(.hydrated)[variant=warning] gov-icon:not(.hydrated) {
349
+ color: var(--gov-alert-warning-icon-color, var(--gov-color-secondary));
350
+ }
351
+ gov-alert:not(.hydrated)[variant=warning] p {
352
+ color: var(--gov-alert-warning-text-color, var(--gov-color-secondary));
353
+ }
354
+ gov-alert:not(.hydrated)[variant=error] {
355
+ background-color: var(--gov-alert-error-bg-color, var(--gov-color-error));
356
+ }
357
+ gov-alert:not(.hydrated)[variant=error] gov-icon:not(.hydrated) {
358
+ color: var(--gov-alert-error-icon-color, var(--gov-color-neutral-white));
359
+ }
360
+ gov-alert:not(.hydrated)[variant=error] p {
361
+ color: var(--gov-alert-error-text-color, var(--gov-color-neutral-white));
362
+ }
363
+ gov-alert:not(.hydrated)[variant=secondary] {
364
+ background-color: var(--gov-alert-secondary-bg-color, var(--gov-color-secondary));
365
+ }
366
+ gov-alert:not(.hydrated)[variant=secondary] gov-icon:not(.hydrated) {
367
+ color: var(--gov-alert-secondary-icon-color, var(--gov-color-neutral-white));
368
+ }
369
+ gov-alert:not(.hydrated)[variant=secondary] p {
370
+ color: var(--gov-alert-secondary-text-color, var(--gov-color-neutral-white));
371
+ }
372
+ gov-alert:not(.hydrated)[variant=success] {
373
+ background-color: var(--gov-alert-success-bg-color, var(--gov-color-success-500));
374
+ }
375
+ gov-alert:not(.hydrated)[variant=success] gov-icon:not(.hydrated) {
376
+ color: var(--gov-alert-success-icon-color, var(--gov-color-neutral-white));
377
+ }
378
+ gov-alert:not(.hydrated)[variant=success] p {
379
+ color: var(--gov-alert-success-text-color, var(--gov-color-neutral-white));
380
+ }
381
+ gov-alert:not(.hydrated)[variant=primary] {
382
+ background-color: var(--gov-alert-primary-bg-color, var(--gov-color-primary));
383
+ }
384
+ gov-alert:not(.hydrated)[variant=primary] gov-icon:not(.hydrated) {
385
+ color: var(--gov-alert-primary-icon-color, var(--gov-color-neutral-white));
386
+ }
387
+ gov-alert:not(.hydrated)[variant=primary] p {
388
+ color: var(--gov-alert-primary-text-color, var(--gov-color-neutral-white));
389
+ }
390
+
391
+ gov-badge:not(.hydrated) {
392
+ margin: 0;
393
+ padding: 0;
394
+ font-family: var(--gov-font-family, "Roboto", sans-serif);
395
+ font-weight: 400;
396
+ box-sizing: border-box;
397
+ display: inline-flex;
398
+ padding: 0.25rem 0.625rem;
399
+ border: var(--gov-button-border-width, 0.0625rem) solid transparent;
400
+ letter-spacing: initial;
401
+ }
402
+ gov-badge:not(.hydrated) gov-icon:not(.hydrated) {
403
+ flex: 0 0 auto;
404
+ color: inherit;
405
+ }
406
+ gov-badge:not(.hydrated) gov-button:not(.hydrated) {
407
+ border: none;
408
+ }
409
+ gov-badge:not(.hydrated)[type=solid][variant=primary] {
410
+ background-color: var(--gov-button-primary-solid-bg, var(--gov-color-primary));
411
+ color: var(--gov-button-primary-solid-color, var(--gov-color-neutral-white));
412
+ border-width: 0;
413
+ }
414
+ gov-badge:not(.hydrated)[type=outlined][variant=primary] {
415
+ color: var(--gov-button-primary-outlined-color, var(--gov-color-primary));
416
+ border-color: var(--gov-button-primary-outlined-border, var(--gov-color-primary));
417
+ }
418
+ gov-badge:not(.hydrated)[type=base][variant=primary] {
419
+ color: var(--gov-button-primary-base-color, var(--gov-color-primary));
420
+ border-width: 0;
421
+ }
422
+ gov-badge:not(.hydrated)[type=link][variant=primary] {
423
+ color: var(--gov-button-primary-link-color, var(--gov-color-primary));
424
+ border-width: 0;
425
+ }
426
+ gov-badge:not(.hydrated)[type=solid][variant=secondary] {
427
+ background-color: var(--gov-button-secondary-solid-bg, var(--gov-color-secondary));
428
+ color: var(--gov-button-secondary-solid-color, var(--gov-color-neutral-white));
429
+ border-width: 0;
430
+ }
431
+ gov-badge:not(.hydrated)[type=outlined][variant=secondary] {
432
+ color: var(--gov-button-secondary-outlined-color, var(--gov-color-secondary));
433
+ border-color: var(--gov-button-secondary-outlined-border, var(--gov-color-secondary));
434
+ }
435
+ gov-badge:not(.hydrated)[type=base][variant=secondary] {
436
+ color: var(--gov-button-secondary-base-color, var(--gov-color-secondary));
437
+ border-width: 0;
438
+ }
439
+ gov-badge:not(.hydrated)[type=link][variant=secondary] {
440
+ color: var(--gov-button-secondary-link-color, var(--gov-color-secondary));
441
+ border-width: 0;
442
+ }
443
+ gov-badge:not(.hydrated)[type=solid][variant=error] {
444
+ background-color: var(--gov-button-error-solid-bg, var(--gov-color-error));
445
+ color: var(--gov-button-error-solid-color, var(--gov-color-neutral-white));
446
+ border-width: 0;
447
+ }
448
+ gov-badge:not(.hydrated)[type=outlined][variant=error] {
449
+ color: var(--gov-button-error-outlined-color, var(--gov-color-error));
450
+ border-color: var(--gov-button-error-outlined-border, var(--gov-color-error));
451
+ }
452
+ gov-badge:not(.hydrated)[type=base][variant=error] {
453
+ color: var(--gov-button-error-base-color, var(--gov-color-error));
454
+ border-width: 0;
455
+ }
456
+ gov-badge:not(.hydrated)[type=link][variant=error] {
457
+ color: var(--gov-button-error-link-color, var(--gov-color-error));
458
+ border-width: 0;
459
+ }
460
+ gov-badge:not(.hydrated)[type=solid][variant=success] {
461
+ background-color: var(--gov-button-success-solid-bg, var(--gov-color-success-500));
462
+ color: var(--gov-button-success-solid-color, var(--gov-color-neutral-white));
463
+ border-width: 0;
464
+ }
465
+ gov-badge:not(.hydrated)[type=outlined][variant=success] {
466
+ color: var(--gov-button-success-outlined-color, var(--gov-color-success-500));
467
+ border-color: var(--gov-button-success-outlined-border, var(--gov-color-success-500));
468
+ }
469
+ gov-badge:not(.hydrated)[type=base][variant=success] {
470
+ color: var(--gov-button-success-base-color, var(--gov-color-success-500));
471
+ border-width: 0;
472
+ }
473
+ gov-badge:not(.hydrated)[type=link][variant=success] {
474
+ color: var(--gov-button-success-link-color, var(--gov-color-success-500));
475
+ border-width: 0;
476
+ }
477
+ gov-badge:not(.hydrated)[type=solid][variant=warning] {
478
+ background-color: var(--gov-button-warning-solid-bg, var(--gov-color-warning-500));
479
+ color: var(--gov-button-warning-solid-color, var(--gov-color-neutral-white));
480
+ border-width: 0;
481
+ }
482
+ gov-badge:not(.hydrated)[type=outlined][variant=warning] {
483
+ color: var(--gov-button-warning-outlined-color, var(--gov-color-warning-500));
484
+ border-color: var(--gov-button-warning-outlined-border, var(--gov-color-warning-500));
485
+ }
486
+ gov-badge:not(.hydrated)[type=base][variant=warning] {
487
+ color: var(--gov-button-warning-base-color, var(--gov-color-warning-500));
488
+ border-width: 0;
489
+ }
490
+ gov-badge:not(.hydrated)[type=link][variant=warning] {
491
+ color: var(--gov-button-warning-link-color, var(--gov-color-warning-500));
492
+ border-width: 0;
493
+ }
494
+ gov-badge:not(.hydrated)[size=xs] {
495
+ font-weight: var(--gov-button-text-xs-font-weight, var(--gov-text-xs-font-weight));
496
+ font-size: var(--gov-button-text-xs-font-size, var(--gov-text-xs-font-size));
497
+ line-height: var(--gov-button-text-xs-line-height, var(--gov-text-xs-line-height));
498
+ letter-spacing: var(--gov-button-text-xs-letter-spacing, var(--gov-text-xs-letter-spacing));
499
+ column-gap: var(--gov-button-xs-padding-x, 0.625rem);
500
+ min-height: var(--gov-button-xs-min-height, 1.5rem);
501
+ padding: var(--gov-button-xs-padding-y, 0.125rem) var(--gov-button-xs-padding-x, 0.625rem);
502
+ border-radius: calc(var(--gov-button-xs-min-height, 1.5rem) * 0.5);
503
+ }
504
+ gov-badge:not(.hydrated)[size=xs] gov-icon:not(.hydrated) {
505
+ width: var(--gov-button-xs-icon-size, 1rem);
506
+ height: var(--gov-button-xs-icon-size, 1rem);
507
+ }
508
+ gov-badge:not(.hydrated)[size=s] {
509
+ font-weight: var(--gov-button-text-s-font-weight, var(--gov-text-s-font-weight));
510
+ font-size: var(--gov-button-text-s-font-size, var(--gov-text-s-font-size));
511
+ line-height: var(--gov-button-text-s-line-height, var(--gov-text-s-line-height));
512
+ letter-spacing: var(--gov-button-text-s-letter-spacing, var(--gov-text-s-letter-spacing));
513
+ column-gap: var(--gov-button-s-padding-x, 0.75rem);
514
+ min-height: var(--gov-button-s-min-height, 2rem);
515
+ padding: var(--gov-button-s-padding-y, 0.25rem) var(--gov-button-s-padding-x, 0.75rem);
516
+ border-radius: calc(var(--gov-button-s-min-height, 2rem) * 0.5);
517
+ }
518
+ gov-badge:not(.hydrated)[size=s] gov-icon:not(.hydrated) {
519
+ width: var(--gov-button-s-icon-size, 1rem);
520
+ height: var(--gov-button-s-icon-size, 1rem);
521
+ }
522
+ gov-badge:not(.hydrated)[size=m] {
523
+ font-weight: var(--gov-button-text-m-font-weight, var(--gov-text-m-font-weight));
524
+ font-size: var(--gov-button-text-m-font-size, var(--gov-text-m-font-size));
525
+ line-height: var(--gov-button-text-m-line-height, var(--gov-text-m-line-height));
526
+ letter-spacing: var(--gov-button-text-m-letter-spacing, var(--gov-text-m-letter-spacing));
527
+ column-gap: var(--gov-button-m-padding-x, 0.75rem);
528
+ min-height: var(--gov-button-m-min-height, 2.5rem);
529
+ padding: var(--gov-button-m-padding-y, 0.375rem) var(--gov-button-m-padding-x, 0.75rem);
530
+ border-radius: calc(var(--gov-button-m-min-height, 2.5rem) * 0.5);
531
+ }
532
+ gov-badge:not(.hydrated)[size=m] gov-icon:not(.hydrated) {
533
+ width: var(--gov-button-m-icon-size, 1.25rem);
534
+ height: var(--gov-button-m-icon-size, 1.25rem);
535
+ }
536
+ gov-badge:not(.hydrated)[size=l] {
537
+ font-weight: var(--gov-button-text-l-font-weight, var(--gov-text-l-font-weight));
538
+ font-size: var(--gov-button-text-l-font-size, var(--gov-text-l-font-size));
539
+ line-height: var(--gov-button-text-l-line-height, var(--gov-text-l-line-height));
540
+ letter-spacing: var(--gov-button-text-l-letter-spacing, var(--gov-text-l-letter-spacing));
541
+ column-gap: var(--gov-button-l-padding-x, 1rem);
542
+ min-height: var(--gov-button-l-min-height, 3rem);
543
+ padding: var(--gov-button-l-padding-y, 0.5rem) var(--gov-button-l-padding-x, 1rem);
544
+ border-radius: calc(var(--gov-button-l-min-height, 3rem) * 0.5);
545
+ }
546
+ gov-badge:not(.hydrated)[size=l] gov-icon:not(.hydrated) {
547
+ width: var(--gov-button-l-icon-size, 1.5rem);
548
+ height: var(--gov-button-l-icon-size, 1.5rem);
549
+ }
550
+ gov-badge:not(.hydrated)[size=xl] {
551
+ font-weight: var(--gov-button-text-xl-font-weight, var(--gov-text-xl-font-weight));
552
+ font-size: var(--gov-button-text-xl-font-size, var(--gov-text-xl-font-size));
553
+ line-height: var(--gov-button-text-xl-line-height, var(--gov-text-xl-line-height));
554
+ letter-spacing: var(--gov-button-text-xl-letter-spacing, var(--gov-text-xl-letter-spacing));
555
+ column-gap: var(--gov-button-xl-padding-x, 1.25rem);
556
+ min-height: var(--gov-button-xl-min-height, 3.5rem);
557
+ padding: var(--gov-button-xl-padding-y, 0.75rem) var(--gov-button-xl-padding-x, 1.25rem);
558
+ border-radius: calc(var(--gov-button-xl-min-height, 3.5rem) * 0.5);
559
+ }
560
+ gov-badge:not(.hydrated)[size=xl] gov-icon:not(.hydrated) {
561
+ width: var(--gov-button-xl-icon-size, 1.75rem);
562
+ height: var(--gov-button-xl-icon-size, 1.75rem);
563
+ }
564
+ gov-badge:not(.hydrated)[type=solid][variant=primary][inverse=""], gov-badge:not(.hydrated)[type=solid][variant=primary][inverse=true i], gov-badge:not(.hydrated)[type=solid][variant=primary][inverse="1"] {
565
+ border-width: 0.0625rem;
566
+ border-color: var(--gov-badge-inverse-primary-border-color, var(--gov-color-primary-200));
567
+ background-color: var(--gov-badge-inverse-primary-bg, var(--gov-color-primary-100));
568
+ color: var(--gov-badge-inverse-primary-color, var(--gov-color-primary));
569
+ }
570
+ gov-badge:not(.hydrated)[type=solid][variant=secondary][inverse=""], gov-badge:not(.hydrated)[type=solid][variant=secondary][inverse=true i], gov-badge:not(.hydrated)[type=solid][variant=secondary][inverse="1"] {
571
+ border-width: 0.0625rem;
572
+ border-color: var(--gov-badge-inverse-secondary-border-color, var(--gov-color-secondary-400));
573
+ background-color: var(--gov-badge-inverse-secondary-bg, var(--gov-color-secondary-200));
574
+ color: var(--gov-badge-inverse-secondary-color, var(--gov-color-secondary-900));
575
+ }
576
+ gov-badge:not(.hydrated)[type=solid][variant=success][inverse=""], gov-badge:not(.hydrated)[type=solid][variant=success][inverse=true i], gov-badge:not(.hydrated)[type=solid][variant=success][inverse="1"] {
577
+ border-width: 0.0625rem;
578
+ border-color: var(--gov-badge-inverse-success-border-color, var(--gov-color-success-200));
579
+ background-color: var(--gov-badge-inverse-success-bg, var(--gov-color-success-100));
580
+ color: var(--gov-badge-inverse-success-color, var(--gov-color-success-600));
581
+ }
582
+ gov-badge:not(.hydrated)[type=solid][variant=warning][inverse=""], gov-badge:not(.hydrated)[type=solid][variant=warning][inverse=true i], gov-badge:not(.hydrated)[type=solid][variant=warning][inverse="1"] {
583
+ border-width: 0.0625rem;
584
+ border-color: var(--gov-badge-inverse-warning-border-color, var(--gov-color-warning-200));
585
+ background-color: var(--gov-badge-inverse-warning-bg, var(--gov-color-warning-100));
586
+ color: var(--gov-badge-inverse-warning-color, var(--gov-color-warning-600));
587
+ }
588
+ gov-badge:not(.hydrated)[type=solid][variant=error][inverse=""], gov-badge:not(.hydrated)[type=solid][variant=error][inverse=true i], gov-badge:not(.hydrated)[type=solid][variant=error][inverse="1"] {
589
+ border-width: 0.0625rem;
590
+ border-color: var(--gov-badge-inverse-error-border-color, var(--gov-color-error-200));
591
+ background-color: var(--gov-badge-inverse-error-bg, var(--gov-color-error-100));
592
+ color: var(--gov-badge-inverse-error-color, var(--gov-color-error-500));
593
+ }
594
+
595
+ gov-breadcrumbs:not(.hydrated) ul {
596
+ position: relative;
597
+ display: flex;
598
+ width: 100%;
599
+ margin: 0;
600
+ padding: 0;
601
+ padding-bottom: 0.3125rem;
602
+ overflow-x: auto;
603
+ }
604
+ gov-breadcrumbs:not(.hydrated) li {
605
+ display: flex;
606
+ justify-content: flex-start;
607
+ align-items: center;
608
+ margin: 0;
609
+ padding: 0;
610
+ background: none;
611
+ white-space: nowrap;
612
+ }
613
+ gov-breadcrumbs:not(.hydrated) li::before {
614
+ display: none;
615
+ }
616
+ gov-breadcrumbs:not(.hydrated) button {
617
+ font-weight: var(--gov-text-m-font-weight);
618
+ font-size: var(--gov-text-m-font-size);
619
+ line-height: var(--gov-text-m-line-height);
620
+ letter-spacing: var(--gov-text-m-letter-spacing);
621
+ padding: 0;
622
+ border: none;
623
+ background: none;
624
+ color: var(--gov-breadcrumbs-link-color, var(--gov-color-primary));
625
+ text-decoration: underline;
626
+ }
627
+ gov-breadcrumbs:not(.hydrated) gov-icon {
628
+ width: 0.625rem;
629
+ height: 0.625rem;
630
+ margin: 0rem 1rem;
631
+ color: var(--gov-breadcrumbs-arrow-color, var(--gov-color-secondary-600));
632
+ }
633
+
634
+ gov-button:not(.hydrated) {
635
+ margin: 0;
636
+ padding: 0;
637
+ font-family: var(--gov-font-family, "Roboto", sans-serif);
638
+ font-weight: 400;
639
+ box-sizing: border-box;
640
+ display: inline-flex;
641
+ border: var(--gov-button-border-width, 0.0625rem) solid transparent;
642
+ border-radius: var(--gov-border-radius, 0.1875rem);
643
+ }
644
+ gov-button:not(.hydrated) gov-icon:not(.hydrated) {
645
+ flex: 0 0 auto;
646
+ color: inherit;
647
+ }
648
+ gov-button:not(.hydrated)[type=link] {
649
+ min-height: inherit;
650
+ padding: 0 !important;
651
+ line-height: inherit;
652
+ text-decoration: underline;
653
+ }
654
+ gov-button:not(.hydrated)[type=solid][variant=primary] {
655
+ background-color: var(--gov-button-primary-solid-bg, var(--gov-color-primary));
656
+ color: var(--gov-button-primary-solid-color, var(--gov-color-neutral-white));
657
+ border-width: 0;
658
+ }
659
+ gov-button:not(.hydrated)[type=outlined][variant=primary] {
660
+ color: var(--gov-button-primary-outlined-color, var(--gov-color-primary));
661
+ border-color: var(--gov-button-primary-outlined-border, var(--gov-color-primary));
662
+ }
663
+ gov-button:not(.hydrated)[type=base][variant=primary] {
664
+ color: var(--gov-button-primary-base-color, var(--gov-color-primary));
665
+ border-width: 0;
666
+ }
667
+ gov-button:not(.hydrated)[type=link][variant=primary] {
668
+ color: var(--gov-button-primary-link-color, var(--gov-color-primary));
669
+ border-width: 0;
670
+ }
671
+ gov-button:not(.hydrated)[type=solid][variant=secondary] {
672
+ background-color: var(--gov-button-secondary-solid-bg, var(--gov-color-secondary));
673
+ color: var(--gov-button-secondary-solid-color, var(--gov-color-neutral-white));
674
+ border-width: 0;
675
+ }
676
+ gov-button:not(.hydrated)[type=outlined][variant=secondary] {
677
+ color: var(--gov-button-secondary-outlined-color, var(--gov-color-secondary));
678
+ border-color: var(--gov-button-secondary-outlined-border, var(--gov-color-secondary));
679
+ }
680
+ gov-button:not(.hydrated)[type=base][variant=secondary] {
681
+ color: var(--gov-button-secondary-base-color, var(--gov-color-secondary));
682
+ border-width: 0;
683
+ }
684
+ gov-button:not(.hydrated)[type=link][variant=secondary] {
685
+ color: var(--gov-button-secondary-link-color, var(--gov-color-secondary));
686
+ border-width: 0;
687
+ }
688
+ gov-button:not(.hydrated)[type=solid][variant=error] {
689
+ background-color: var(--gov-button-error-solid-bg, var(--gov-color-error));
690
+ color: var(--gov-button-error-solid-color, var(--gov-color-neutral-white));
691
+ border-width: 0;
692
+ }
693
+ gov-button:not(.hydrated)[type=outlined][variant=error] {
694
+ color: var(--gov-button-error-outlined-color, var(--gov-color-error));
695
+ border-color: var(--gov-button-error-outlined-border, var(--gov-color-error));
696
+ }
697
+ gov-button:not(.hydrated)[type=base][variant=error] {
698
+ color: var(--gov-button-error-base-color, var(--gov-color-error));
699
+ border-width: 0;
700
+ }
701
+ gov-button:not(.hydrated)[type=link][variant=error] {
702
+ color: var(--gov-button-error-link-color, var(--gov-color-error));
703
+ border-width: 0;
704
+ }
705
+ gov-button:not(.hydrated)[type=solid][variant=success] {
706
+ background-color: var(--gov-button-success-solid-bg, var(--gov-color-success-500));
707
+ color: var(--gov-button-success-solid-color, var(--gov-color-neutral-white));
708
+ border-width: 0;
709
+ }
710
+ gov-button:not(.hydrated)[type=outlined][variant=success] {
711
+ color: var(--gov-button-success-outlined-color, var(--gov-color-success-500));
712
+ border-color: var(--gov-button-success-outlined-border, var(--gov-color-success-500));
713
+ }
714
+ gov-button:not(.hydrated)[type=base][variant=success] {
715
+ color: var(--gov-button-success-base-color, var(--gov-color-success-500));
716
+ border-width: 0;
717
+ }
718
+ gov-button:not(.hydrated)[type=link][variant=success] {
719
+ color: var(--gov-button-success-link-color, var(--gov-color-success-500));
720
+ border-width: 0;
721
+ }
722
+ gov-button:not(.hydrated)[type=solid][variant=warning] {
723
+ background-color: var(--gov-button-warning-solid-bg, var(--gov-color-warning-500));
724
+ color: var(--gov-button-warning-solid-color, var(--gov-color-neutral-white));
725
+ border-width: 0;
726
+ }
727
+ gov-button:not(.hydrated)[type=outlined][variant=warning] {
728
+ color: var(--gov-button-warning-outlined-color, var(--gov-color-warning-500));
729
+ border-color: var(--gov-button-warning-outlined-border, var(--gov-color-warning-500));
730
+ }
731
+ gov-button:not(.hydrated)[type=base][variant=warning] {
732
+ color: var(--gov-button-warning-base-color, var(--gov-color-warning-500));
733
+ border-width: 0;
734
+ }
735
+ gov-button:not(.hydrated)[type=link][variant=warning] {
736
+ color: var(--gov-button-warning-link-color, var(--gov-color-warning-500));
737
+ border-width: 0;
738
+ }
739
+ gov-button:not(.hydrated)[size=xs] {
740
+ font-weight: var(--gov-button-text-xs-font-weight, var(--gov-text-xs-font-weight));
741
+ font-size: var(--gov-button-text-xs-font-size, var(--gov-text-xs-font-size));
742
+ line-height: var(--gov-button-text-xs-line-height, var(--gov-text-xs-line-height));
743
+ letter-spacing: var(--gov-button-text-xs-letter-spacing, var(--gov-text-xs-letter-spacing));
744
+ column-gap: var(--gov-button-xs-padding-x, 0.625rem);
745
+ min-height: var(--gov-button-xs-min-height, 1.5rem);
746
+ padding: var(--gov-button-xs-padding-y, 0.125rem) var(--gov-button-xs-padding-x, 0.625rem);
747
+ font-weight: var(--gov-button-xs-font-weight, 700);
748
+ }
749
+ gov-button:not(.hydrated)[size=xs] gov-icon:not(.hydrated) {
750
+ width: var(--gov-button-xs-icon-size, 1rem);
751
+ height: var(--gov-button-xs-icon-size, 1rem);
752
+ }
753
+ gov-button:not(.hydrated)[size=s] {
754
+ font-weight: var(--gov-button-text-s-font-weight, var(--gov-text-s-font-weight));
755
+ font-size: var(--gov-button-text-s-font-size, var(--gov-text-s-font-size));
756
+ line-height: var(--gov-button-text-s-line-height, var(--gov-text-s-line-height));
757
+ letter-spacing: var(--gov-button-text-s-letter-spacing, var(--gov-text-s-letter-spacing));
758
+ column-gap: var(--gov-button-s-padding-x, 0.75rem);
759
+ min-height: var(--gov-button-s-min-height, 2rem);
760
+ padding: var(--gov-button-s-padding-y, 0.25rem) var(--gov-button-s-padding-x, 0.75rem);
761
+ font-weight: var(--gov-button-s-font-weight, 700);
762
+ }
763
+ gov-button:not(.hydrated)[size=s] gov-icon:not(.hydrated) {
764
+ width: var(--gov-button-s-icon-size, 1rem);
765
+ height: var(--gov-button-s-icon-size, 1rem);
766
+ }
767
+ gov-button:not(.hydrated)[size=m] {
768
+ font-weight: var(--gov-button-text-m-font-weight, var(--gov-text-m-font-weight));
769
+ font-size: var(--gov-button-text-m-font-size, var(--gov-text-m-font-size));
770
+ line-height: var(--gov-button-text-m-line-height, var(--gov-text-m-line-height));
771
+ letter-spacing: var(--gov-button-text-m-letter-spacing, var(--gov-text-m-letter-spacing));
772
+ column-gap: var(--gov-button-m-padding-x, 0.75rem);
773
+ min-height: var(--gov-button-m-min-height, 2.5rem);
774
+ padding: var(--gov-button-m-padding-y, 0.375rem) var(--gov-button-m-padding-x, 0.75rem);
775
+ font-weight: var(--gov-button-m-font-weight, 700);
776
+ }
777
+ gov-button:not(.hydrated)[size=m] gov-icon:not(.hydrated) {
778
+ width: var(--gov-button-m-icon-size, 1.25rem);
779
+ height: var(--gov-button-m-icon-size, 1.25rem);
780
+ }
781
+ gov-button:not(.hydrated)[size=l] {
782
+ font-weight: var(--gov-button-text-l-font-weight, var(--gov-text-l-font-weight));
783
+ font-size: var(--gov-button-text-l-font-size, var(--gov-text-l-font-size));
784
+ line-height: var(--gov-button-text-l-line-height, var(--gov-text-l-line-height));
785
+ letter-spacing: var(--gov-button-text-l-letter-spacing, var(--gov-text-l-letter-spacing));
786
+ column-gap: var(--gov-button-l-padding-x, 1rem);
787
+ min-height: var(--gov-button-l-min-height, 3rem);
788
+ padding: var(--gov-button-l-padding-y, 0.5rem) var(--gov-button-l-padding-x, 1rem);
789
+ font-weight: var(--gov-button-l-font-weight, 700);
790
+ }
791
+ gov-button:not(.hydrated)[size=l] gov-icon:not(.hydrated) {
792
+ width: var(--gov-button-l-icon-size, 1.5rem);
793
+ height: var(--gov-button-l-icon-size, 1.5rem);
794
+ }
795
+ gov-button:not(.hydrated)[size=xl] {
796
+ font-weight: var(--gov-button-text-xl-font-weight, var(--gov-text-xl-font-weight));
797
+ font-size: var(--gov-button-text-xl-font-size, var(--gov-text-xl-font-size));
798
+ line-height: var(--gov-button-text-xl-line-height, var(--gov-text-xl-line-height));
799
+ letter-spacing: var(--gov-button-text-xl-letter-spacing, var(--gov-text-xl-letter-spacing));
800
+ column-gap: var(--gov-button-xl-padding-x, 1.25rem);
801
+ min-height: var(--gov-button-xl-min-height, 3.5rem);
802
+ padding: var(--gov-button-xl-padding-y, 0.75rem) var(--gov-button-xl-padding-x, 1.25rem);
803
+ font-weight: var(--gov-button-xl-font-weight, 700);
804
+ }
805
+ gov-button:not(.hydrated)[size=xl] gov-icon:not(.hydrated) {
806
+ width: var(--gov-button-xl-icon-size, 1.75rem);
807
+ height: var(--gov-button-xl-icon-size, 1.75rem);
808
+ }
809
+
810
+ gov-card:not(.hydrated) {
811
+ position: relative;
812
+ display: flex;
813
+ width: 100%;
814
+ flex-direction: column;
815
+ border: var(--gov-card-border-width, 0.0625rem solid var(--gov-color-secondary-500));
816
+ border-radius: var(--gov-border-radius, 0.1875rem);
817
+ background: var(--gov-card-bg, var(--gov-color-neutral-white));
818
+ overflow: hidden;
819
+ }
820
+ gov-card:not(.hydrated) p {
821
+ display: block;
822
+ padding: 1.5rem;
823
+ margin-bottom: 0;
824
+ }
825
+ gov-card:not(.hydrated) gov-button {
826
+ padding-left: 1.5rem;
827
+ padding-bottom: 1.5rem;
828
+ }
829
+ gov-card:not(.hydrated) img {
830
+ width: 100%;
831
+ height: auto;
832
+ margin: 0;
833
+ line-height: 1;
834
+ }
835
+ gov-card:not(.hydrated) gov-icon {
836
+ flex: 0 0 auto;
837
+ width: 2.5rem;
838
+ height: 2.5rem;
839
+ color: var(--gov-card-icon-color, var(--gov-color-primary));
840
+ margin-top: 1.5rem;
841
+ margin-left: 1.5rem;
842
+ }
843
+ gov-card:not(.hydrated) *[slot=footer] {
844
+ padding: 1rem 1.5rem;
845
+ background: var(--gov-card-footer-bg, var(--gov-color-primary-100));
846
+ font-weight: var(--gov-text-s-font-weight);
847
+ font-size: var(--gov-text-s-font-size);
848
+ line-height: var(--gov-text-s-line-height);
849
+ letter-spacing: var(--gov-text-s-letter-spacing);
850
+ }
851
+ gov-card:not(.hydrated)[collapsible=""] p, gov-card:not(.hydrated)[collapsible=""] gov-button, gov-card:not(.hydrated)[collapsible=true i] p, gov-card:not(.hydrated)[collapsible=true i] gov-button, gov-card:not(.hydrated)[collapsible="1"] p, gov-card:not(.hydrated)[collapsible="1"] gov-button {
852
+ display: none;
853
+ }
854
+ gov-card:not(.hydrated)[collapsible=""][expanded=""] p, gov-card:not(.hydrated)[collapsible=""][expanded=""] gov-button, gov-card:not(.hydrated)[collapsible=""][expanded=true i] p, gov-card:not(.hydrated)[collapsible=""][expanded=true i] gov-button, gov-card:not(.hydrated)[collapsible=""][expanded="1"] p, gov-card:not(.hydrated)[collapsible=""][expanded="1"] gov-button, gov-card:not(.hydrated)[collapsible=true i][expanded=""] p, gov-card:not(.hydrated)[collapsible=true i][expanded=""] gov-button, gov-card:not(.hydrated)[collapsible=true i][expanded=true i] p, gov-card:not(.hydrated)[collapsible=true i][expanded=true i] gov-button, gov-card:not(.hydrated)[collapsible=true i][expanded="1"] p, gov-card:not(.hydrated)[collapsible=true i][expanded="1"] gov-button, gov-card:not(.hydrated)[collapsible="1"][expanded=""] p, gov-card:not(.hydrated)[collapsible="1"][expanded=""] gov-button, gov-card:not(.hydrated)[collapsible="1"][expanded=true i] p, gov-card:not(.hydrated)[collapsible="1"][expanded=true i] gov-button, gov-card:not(.hydrated)[collapsible="1"][expanded="1"] p, gov-card:not(.hydrated)[collapsible="1"][expanded="1"] gov-button {
855
+ display: block;
856
+ }
857
+ @media (min-width: 30em) {
858
+ gov-card:not(.hydrated)[promotion=""], gov-card:not(.hydrated)[promotion=true i], gov-card:not(.hydrated)[promotion="1"] {
859
+ flex-direction: row;
860
+ padding: 2rem;
861
+ }
862
+ gov-card:not(.hydrated)[promotion=""] p, gov-card:not(.hydrated)[promotion=true i] p, gov-card:not(.hydrated)[promotion="1"] p {
863
+ padding-top: 0;
864
+ padding-bottom: 0;
865
+ }
866
+ gov-card:not(.hydrated)[promotion=""] gov-icon, gov-card:not(.hydrated)[promotion=true i] gov-icon, gov-card:not(.hydrated)[promotion="1"] gov-icon {
867
+ width: 3rem;
868
+ height: 3rem;
869
+ margin: 0;
870
+ }
871
+ gov-card:not(.hydrated)[promotion=""] gov-button, gov-card:not(.hydrated)[promotion=true i] gov-button, gov-card:not(.hydrated)[promotion="1"] gov-button {
872
+ flex-direction: column;
873
+ padding: 0;
874
+ }
875
+ }
876
+
877
+ gov-container-test:not(.hydrated) {
878
+ display: block;
879
+ width: 100%;
880
+ max-width: calc(var(--gov-container-width, 73.75rem) + 2 * var(--gov-container-padding, 2.5rem));
881
+ margin-right: auto;
882
+ margin-left: auto;
883
+ padding-right: var(--gov-container-padding-mobile, 1.25rem);
884
+ padding-left: var(--gov-container-padding-mobile, 1.25rem);
885
+ }
886
+ @media (min-width: 48em) {
887
+ gov-container-test:not(.hydrated) {
888
+ padding-right: var(--gov-container-padding, 2.5rem);
889
+ padding-left: var(--gov-container-padding, 2.5rem);
890
+ }
891
+ }
892
+
893
+ gov-control-group:not(.hydrated) {
894
+ position: relative;
895
+ display: flex;
896
+ width: 100%;
897
+ align-items: center;
898
+ border-radius: var(--gov-control-group-border-radius, 0.25rem);
899
+ }
900
+ gov-control-group:not(.hydrated) * {
901
+ border: none !important;
902
+ border-radius: 0;
903
+ }
904
+ gov-control-group:not(.hydrated)[variant=primary] {
905
+ border: var(--gov-control-group-border-primary, 0.0625rem solid var(--gov-color-primary-600));
906
+ }
907
+ gov-control-group:not(.hydrated)[variant=primary] > * {
908
+ border-right: var(--gov-control-group-border-primary, 0.0625rem solid var(--gov-color-primary-600)) !important;
909
+ }
910
+ gov-control-group:not(.hydrated)[variant=secondary] {
911
+ border: var(--gov-control-group-border-secondary, 0.0625rem solid var(--gov-color-secondary-700));
912
+ }
913
+ gov-control-group:not(.hydrated)[variant=secondary] > * {
914
+ border-right: var(--gov-control-group-border-secondary, 0.0625rem solid var(--gov-color-secondary-700)) !important;
915
+ }
916
+ gov-control-group:not(.hydrated) > *:last-child {
917
+ border-right: none !important;
918
+ }
919
+ gov-control-group:not(.hydrated)[no-border=""] > *, gov-control-group:not(.hydrated)[no-border=true i] > *, gov-control-group:not(.hydrated)[no-border="1"] > * {
920
+ border-right: none !important;
921
+ }
922
+
923
+ gov-empty:not(.hydrated) {
924
+ position: relative;
925
+ display: block;
926
+ width: 100%;
927
+ }
928
+ gov-empty:not(.hydrated) gov-icon {
929
+ display: inline-flex;
930
+ justify-content: center;
931
+ align-items: center;
932
+ width: 6rem;
933
+ height: 6rem;
934
+ margin-bottom: 2rem;
935
+ border-radius: 50%;
936
+ background: var(--gov-empty-icon-circle-bg, linear-gradient(to bottom, var(--gov-color-primary-200), var(--gov-color-neutral-white)));
937
+ color: var(--gov-empty-icon-color, var(--gov-color-primary));
938
+ }
939
+ gov-empty:not(.hydrated) gov-icon > * {
940
+ width: 3.5rem;
941
+ height: 3.5rem;
942
+ }
943
+
944
+ gov-error-code:not(.hydrated) {
945
+ position: relative;
946
+ display: block;
947
+ width: 100%;
948
+ margin: 0 auto;
949
+ text-align: center;
950
+ }
951
+ gov-error-code:not(.hydrated) gov-icon {
952
+ display: flex;
953
+ justify-content: center;
954
+ align-items: center;
955
+ width: 9.375rem;
956
+ height: 9.375rem;
957
+ margin: 0 auto 1.5rem;
958
+ border-radius: 50%;
959
+ background: var(--gov-error-icon-circle-bg, linear-gradient(to bottom, var(--gov-color-primary-200), var(--gov-color-neutral-white)));
960
+ color: var(--gov-error-icon-color, var(--gov-color-primary));
961
+ }
962
+ gov-error-code:not(.hydrated) gov-icon > * {
963
+ width: 7.125rem;
964
+ height: 7.125rem;
965
+ }
966
+ @media (min-width: 48em) {
967
+ gov-error-code:not(.hydrated) gov-icon {
968
+ width: 12.5rem;
969
+ height: 12.5rem;
970
+ margin: 0 auto 2rem;
971
+ }
972
+ gov-error-code:not(.hydrated) gov-icon > * {
973
+ width: 9.5rem;
974
+ height: 9.5rem;
975
+ }
976
+ }
977
+
978
+ gov-form-autocomplete:not(.hydrated) {
979
+ position: relative;
980
+ display: flex;
981
+ width: 100%;
982
+ align-items: center;
983
+ justify-content: flex-end;
984
+ position: relative;
985
+ width: 100%;
986
+ border-radius: var(--gov-border-radius, 0.1875rem);
987
+ background-color: var(--gov-form-bg-color, var(--gov-color-neutral-white));
988
+ font-family: var(--gov-font-family, "Roboto", sans-serif);
989
+ }
990
+ gov-form-autocomplete:not(.hydrated)[size=s] {
991
+ font-weight: var(--gov-text-s-font-weight);
992
+ font-size: var(--gov-text-s-font-size);
993
+ line-height: var(--gov-text-s-line-height);
994
+ letter-spacing: var(--gov-text-s-letter-spacing);
995
+ height: var(--gov-form-input-core-s-height, 2rem);
996
+ padding: var(--gov-form-input-core-s-padding, 0.25rem 0.75rem);
997
+ }
998
+ gov-form-autocomplete:not(.hydrated)[size=m] {
999
+ font-weight: var(--gov-text-m-font-weight);
1000
+ font-size: var(--gov-text-m-font-size);
1001
+ line-height: var(--gov-text-m-line-height);
1002
+ letter-spacing: var(--gov-text-m-letter-spacing);
1003
+ height: var(--gov-form-input-core-m-height, 2.5rem);
1004
+ padding: var(--gov-form-input-core-m-padding, 0.4375rem 0.75rem);
1005
+ }
1006
+ gov-form-autocomplete:not(.hydrated)[size=l] {
1007
+ font-weight: var(--gov-text-m-font-weight);
1008
+ font-size: var(--gov-text-m-font-size);
1009
+ line-height: var(--gov-text-m-line-height);
1010
+ letter-spacing: var(--gov-text-m-letter-spacing);
1011
+ height: var(--gov-form-input-core-l-height, 3rem);
1012
+ padding: var(--gov-form-input-core-l-padding, 0.6875rem 0.75rem);
1013
+ }
1014
+ gov-form-autocomplete:not(.hydrated)[size=xl] {
1015
+ font-weight: var(--gov-text-l-font-weight);
1016
+ font-size: var(--gov-text-l-font-size);
1017
+ line-height: var(--gov-text-l-line-height);
1018
+ letter-spacing: var(--gov-text-l-letter-spacing);
1019
+ height: var(--gov-form-input-core-xl-height, 3.5rem);
1020
+ padding: var(--gov-form-input-core-xl-padding, 0.9375rem 1rem 0.875rem);
1021
+ }
1022
+ gov-form-autocomplete:not(.hydrated)[variant=primary] {
1023
+ color: var(--gov-form-input-color-primary, var(--gov-color-secondary-700));
1024
+ border: var(--gov-form-input-border-primary, 0.0625rem solid var(--gov-color-primary-600));
1025
+ }
1026
+ gov-form-autocomplete:not(.hydrated)[variant=secondary] {
1027
+ color: var(--gov-form-input-color-secondary, var(--gov-color-secondary-700));
1028
+ border: var(--gov-form-input-border-secondary, 0.0625rem solid var(--gov-color-secondary-700));
1029
+ }
1030
+ gov-form-autocomplete:not(.hydrated)[disabled=""], gov-form-autocomplete:not(.hydrated)[disabled=true i], gov-form-autocomplete:not(.hydrated)[disabled="1"] {
1031
+ pointer-events: none;
1032
+ border-color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));
1033
+ background: var(--gov-form-input-disabled-bg, var(--gov-color-secondary-300));
1034
+ color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));
1035
+ }
1036
+
1037
+ gov-form-file:not(.hydrated)[disabled=""] gov-form-label, gov-form-file:not(.hydrated)[disabled=true i] gov-form-label, gov-form-file:not(.hydrated)[disabled="1"] gov-form-label {
1038
+ pointer-events: none;
1039
+ }
1040
+ gov-form-file:not(.hydrated)[disabled=""] gov-form-label *, gov-form-file:not(.hydrated)[disabled=true i] gov-form-label *, gov-form-file:not(.hydrated)[disabled="1"] gov-form-label * {
1041
+ color: var(--gov-form-file-disabled-color, var(--gov-color-secondary-600));
1042
+ }
1043
+ gov-form-file:not(.hydrated)[expanded=""], gov-form-file:not(.hydrated)[expanded=true i], gov-form-file:not(.hydrated)[expanded="1"] {
1044
+ position: relative;
1045
+ width: 100%;
1046
+ padding: 2rem 1.375rem 1.375rem;
1047
+ border: var(--gov-form-file-border, 0.0625rem dashed var(--gov-color-secondary-500));
1048
+ text-align: center;
1049
+ }
1050
+ gov-form-file:not(.hydrated)[expanded=""] gov-form-label, gov-form-file:not(.hydrated)[expanded=true i] gov-form-label, gov-form-file:not(.hydrated)[expanded="1"] gov-form-label {
1051
+ width: 100%;
1052
+ padding: 1.375rem;
1053
+ border: var(--gov-form-file-border, 0.0625rem dashed var(--gov-color-secondary-500));
1054
+ text-align: center;
1055
+ }
1056
+ gov-form-file:not(.hydrated)[expanded=""][disabled=""], gov-form-file:not(.hydrated)[expanded=""][disabled=true i], gov-form-file:not(.hydrated)[expanded=""][disabled="1"], gov-form-file:not(.hydrated)[expanded=true i][disabled=""], gov-form-file:not(.hydrated)[expanded=true i][disabled=true i], gov-form-file:not(.hydrated)[expanded=true i][disabled="1"], gov-form-file:not(.hydrated)[expanded="1"][disabled=""], gov-form-file:not(.hydrated)[expanded="1"][disabled=true i], gov-form-file:not(.hydrated)[expanded="1"][disabled="1"] {
1057
+ pointer-events: none;
1058
+ color: var(--gov-form-file-disabled-color, var(--gov-color-secondary-600));
1059
+ }
1060
+ @media (min-width: 30em) {
1061
+ gov-form-file:not(.hydrated)[expanded=""] gov-form-label, gov-form-file:not(.hydrated)[expanded=true i] gov-form-label, gov-form-file:not(.hydrated)[expanded="1"] gov-form-label {
1062
+ padding: 2rem;
1063
+ }
1064
+ }
1065
+
1066
+ gov-form-checkbox:not(.hydrated) {
1067
+ display: block;
1068
+ border: var(--gov-form-checkbox-border-size, 0.125rem solid var(--gov-color-primary));
1069
+ background-color: var(--gov-form-checkbox-background-color, var(--gov-color-neutral-white));
1070
+ transition: 150ms linear border-color, 150ms linear background-color, 150ms linear outline-color;
1071
+ }
1072
+ gov-form-checkbox:not(.hydrated) gov-form-label {
1073
+ width: 100%;
1074
+ }
1075
+ gov-form-checkbox:not(.hydrated)[size=xs] {
1076
+ font-weight: var(--gov-text-xs-font-weight);
1077
+ font-size: var(--gov-text-xs-font-size);
1078
+ line-height: var(--gov-text-xs-line-height);
1079
+ letter-spacing: var(--gov-text-xs-letter-spacing);
1080
+ width: var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem);
1081
+ height: var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem);
1082
+ }
1083
+ gov-form-checkbox:not(.hydrated)[size=xs] gov-form-label {
1084
+ padding-top: calc((var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) - var(--gov-text-xs-font-size) * 1.5) / 2);
1085
+ padding-left: calc(var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) + var(--gov-form-checkbox-core-xs-gap, 0.75rem));
1086
+ }
1087
+ gov-form-checkbox:not(.hydrated)[size=s] {
1088
+ font-weight: var(--gov-text-s-font-weight);
1089
+ font-size: var(--gov-text-s-font-size);
1090
+ line-height: var(--gov-text-s-line-height);
1091
+ letter-spacing: var(--gov-text-s-letter-spacing);
1092
+ width: var(--gov-form-checkbox-core-s-indicator-size, 1.375rem);
1093
+ height: var(--gov-form-checkbox-core-s-indicator-size, 1.375rem);
1094
+ }
1095
+ gov-form-checkbox:not(.hydrated)[size=s] gov-form-label {
1096
+ padding-top: calc((var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) - var(--gov-text-s-font-size) * 1.5) / 2);
1097
+ padding-left: calc(var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) + var(--gov-form-checkbox-core-s-gap, 0.75rem));
1098
+ }
1099
+ gov-form-checkbox:not(.hydrated)[size=m] {
1100
+ font-weight: var(--gov-text-m-font-weight);
1101
+ font-size: var(--gov-text-m-font-size);
1102
+ line-height: var(--gov-text-m-line-height);
1103
+ letter-spacing: var(--gov-text-m-letter-spacing);
1104
+ width: var(--gov-form-checkbox-core-m-indicator-size, 1.5rem);
1105
+ height: var(--gov-form-checkbox-core-m-indicator-size, 1.5rem);
1106
+ }
1107
+ gov-form-checkbox:not(.hydrated)[size=m] gov-form-label {
1108
+ padding-top: calc((var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) - var(--gov-text-m-font-size) * 1.5) / 2);
1109
+ padding-left: calc(var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) + var(--gov-form-checkbox-core-m-gap, 1rem));
1110
+ }
1111
+ gov-form-checkbox:not(.hydrated)[size=l] {
1112
+ font-weight: var(--gov-text-l-font-weight);
1113
+ font-size: var(--gov-text-l-font-size);
1114
+ line-height: var(--gov-text-l-line-height);
1115
+ letter-spacing: var(--gov-text-l-letter-spacing);
1116
+ width: var(--gov-form-checkbox-core-l-indicator-size, 2rem);
1117
+ height: var(--gov-form-checkbox-core-l-indicator-size, 2rem);
1118
+ }
1119
+ gov-form-checkbox:not(.hydrated)[size=l] gov-form-label {
1120
+ padding-top: calc((var(--gov-form-checkbox-core-l-indicator-size, 2rem) - var(--gov-text-l-font-size) * 1.5) / 2);
1121
+ padding-left: calc(var(--gov-form-checkbox-core-l-indicator-size, 2rem) + var(--gov-form-checkbox-core-l-gap, 1rem));
1122
+ }
1123
+ gov-form-checkbox:not(.hydrated)[disabled=""], gov-form-checkbox:not(.hydrated)[disabled=true i], gov-form-checkbox:not(.hydrated)[disabled="1"] {
1124
+ pointer-events: none;
1125
+ border-color: var(--gov-form-input-disabled-bg, var(--gov-color-primary-400));
1126
+ }
1127
+ gov-form-checkbox:not(.hydrated)[disabled=""] gov-form-label, gov-form-checkbox:not(.hydrated)[disabled=true i] gov-form-label, gov-form-checkbox:not(.hydrated)[disabled="1"] gov-form-label {
1128
+ color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));
1129
+ }
1130
+
1131
+ gov-form-input:not(.hydrated) {
1132
+ position: relative;
1133
+ display: flex;
1134
+ width: 100%;
1135
+ align-items: center;
1136
+ position: relative;
1137
+ width: 100%;
1138
+ border-radius: var(--gov-border-radius, 0.1875rem);
1139
+ background-color: var(--gov-form-bg-color, var(--gov-color-neutral-white));
1140
+ font-family: var(--gov-font-family, "Roboto", sans-serif);
1141
+ }
1142
+ gov-form-input:not(.hydrated)[size=s] {
1143
+ font-weight: var(--gov-text-s-font-weight);
1144
+ font-size: var(--gov-text-s-font-size);
1145
+ line-height: var(--gov-text-s-line-height);
1146
+ letter-spacing: var(--gov-text-s-letter-spacing);
1147
+ gap: 0.5rem var(--gov-form-input-core-s-icon-size, 1rem);
1148
+ height: var(--gov-form-input-core-s-height, 2rem);
1149
+ padding: var(--gov-form-input-core-s-padding, 0.25rem 0.75rem);
1150
+ }
1151
+ gov-form-input:not(.hydrated)[size=m] {
1152
+ font-weight: var(--gov-text-m-font-weight);
1153
+ font-size: var(--gov-text-m-font-size);
1154
+ line-height: var(--gov-text-m-line-height);
1155
+ letter-spacing: var(--gov-text-m-letter-spacing);
1156
+ gap: 0.5rem var(--gov-form-input-core-m-icon-size, 1rem);
1157
+ height: var(--gov-form-input-core-m-height, 2.5rem);
1158
+ padding: var(--gov-form-input-core-m-padding, 0.4375rem 0.75rem);
1159
+ }
1160
+ gov-form-input:not(.hydrated)[size=l] {
1161
+ font-weight: var(--gov-text-m-font-weight);
1162
+ font-size: var(--gov-text-m-font-size);
1163
+ line-height: var(--gov-text-m-line-height);
1164
+ letter-spacing: var(--gov-text-m-letter-spacing);
1165
+ gap: 0.5rem var(--gov-form-input-core-l-icon-size, 1rem);
1166
+ height: var(--gov-form-input-core-l-height, 3rem);
1167
+ padding: var(--gov-form-input-core-l-padding, 0.6875rem 0.75rem);
1168
+ }
1169
+ gov-form-input:not(.hydrated)[size=xl] {
1170
+ font-weight: var(--gov-text-l-font-weight);
1171
+ font-size: var(--gov-text-l-font-size);
1172
+ line-height: var(--gov-text-l-line-height);
1173
+ letter-spacing: var(--gov-text-l-letter-spacing);
1174
+ gap: 0.5rem var(--gov-form-input-core-xl-icon-size, 1.25rem);
1175
+ height: var(--gov-form-input-core-xl-height, 3.5rem);
1176
+ padding: var(--gov-form-input-core-xl-padding, 0.9375rem 1rem 0.875rem);
1177
+ }
1178
+ gov-form-input:not(.hydrated)[variant=primary] {
1179
+ color: var(--gov-form-input-color-primary, var(--gov-color-secondary-700));
1180
+ border: var(--gov-form-input-border-primary, 0.0625rem solid var(--gov-color-primary-600));
1181
+ }
1182
+ gov-form-input:not(.hydrated)[variant=secondary] {
1183
+ color: var(--gov-form-input-color-secondary, var(--gov-color-secondary-700));
1184
+ border: var(--gov-form-input-border-secondary, 0.0625rem solid var(--gov-color-secondary-700));
1185
+ }
1186
+ gov-form-input:not(.hydrated)[multiline=""], gov-form-input:not(.hydrated)[multiline=true i], gov-form-input:not(.hydrated)[multiline="1"] {
1187
+ height: 5.625rem;
1188
+ }
1189
+ gov-form-input:not(.hydrated)[disabled=""], gov-form-input:not(.hydrated)[disabled=true i], gov-form-input:not(.hydrated)[disabled="1"] {
1190
+ pointer-events: none;
1191
+ border-color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));
1192
+ background: var(--gov-form-input-disabled-bg, var(--gov-color-secondary-300));
1193
+ color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));
1194
+ }
1195
+
1196
+ gov-form-label:not(.hydrated) {
1197
+ display: inline-block;
1198
+ width: 100%;
1199
+ color: var(--gov-form-label-color, #686868);
1200
+ box-sizing: border-box;
1201
+ }
1202
+
1203
+ gov-form-multi-select:not(.hydrated) {
1204
+ position: relative;
1205
+ display: flex;
1206
+ width: 100%;
1207
+ align-items: center;
1208
+ position: relative;
1209
+ width: 100%;
1210
+ border-radius: var(--gov-border-radius, 0.1875rem);
1211
+ background-color: var(--gov-form-bg-color, var(--gov-color-neutral-white));
1212
+ font-family: var(--gov-font-family, "Roboto", sans-serif);
1213
+ }
1214
+ gov-form-multi-select:not(.hydrated)[size=s] {
1215
+ font-weight: var(--gov-text-s-font-weight);
1216
+ font-size: var(--gov-text-s-font-size);
1217
+ line-height: var(--gov-text-s-line-height);
1218
+ letter-spacing: var(--gov-text-s-letter-spacing);
1219
+ gap: 0.5rem var(--gov-form-input-core-s-icon-size, 1rem);
1220
+ height: var(--gov-form-input-core-s-height, 2rem);
1221
+ padding: var(--gov-form-input-core-s-padding, 0.25rem 0.75rem);
1222
+ }
1223
+ gov-form-multi-select:not(.hydrated)[size=m] {
1224
+ font-weight: var(--gov-text-m-font-weight);
1225
+ font-size: var(--gov-text-m-font-size);
1226
+ line-height: var(--gov-text-m-line-height);
1227
+ letter-spacing: var(--gov-text-m-letter-spacing);
1228
+ gap: 0.5rem var(--gov-form-input-core-m-icon-size, 1rem);
1229
+ height: var(--gov-form-input-core-m-height, 2.5rem);
1230
+ padding: var(--gov-form-input-core-m-padding, 0.4375rem 0.75rem);
1231
+ }
1232
+ gov-form-multi-select:not(.hydrated)[size=l] {
1233
+ font-weight: var(--gov-text-m-font-weight);
1234
+ font-size: var(--gov-text-m-font-size);
1235
+ line-height: var(--gov-text-m-line-height);
1236
+ letter-spacing: var(--gov-text-m-letter-spacing);
1237
+ gap: 0.5rem var(--gov-form-input-core-l-icon-size, 1rem);
1238
+ height: var(--gov-form-input-core-l-height, 3rem);
1239
+ padding: var(--gov-form-input-core-l-padding, 0.6875rem 0.75rem);
1240
+ }
1241
+ gov-form-multi-select:not(.hydrated)[size=xl] {
1242
+ font-weight: var(--gov-text-l-font-weight);
1243
+ font-size: var(--gov-text-l-font-size);
1244
+ line-height: var(--gov-text-l-line-height);
1245
+ letter-spacing: var(--gov-text-l-letter-spacing);
1246
+ gap: 0.5rem var(--gov-form-input-core-xl-icon-size, 1.25rem);
1247
+ height: var(--gov-form-input-core-xl-height, 3.5rem);
1248
+ padding: var(--gov-form-input-core-xl-padding, 0.9375rem 1rem 0.875rem);
1249
+ }
1250
+ gov-form-multi-select:not(.hydrated)[variant=primary] {
1251
+ color: var(--gov-form-input-color-primary, var(--gov-color-secondary-700));
1252
+ border: var(--gov-form-input-border-primary, 0.0625rem solid var(--gov-color-primary-600));
1253
+ }
1254
+ gov-form-multi-select:not(.hydrated)[variant=secondary] {
1255
+ color: var(--gov-form-input-color-secondary, var(--gov-color-secondary-700));
1256
+ border: var(--gov-form-input-border-secondary, 0.0625rem solid var(--gov-color-secondary-700));
1257
+ }
1258
+ gov-form-multi-select:not(.hydrated)[multiline=""], gov-form-multi-select:not(.hydrated)[multiline=true i], gov-form-multi-select:not(.hydrated)[multiline="1"] {
1259
+ height: 5.625rem;
1260
+ }
1261
+ gov-form-multi-select:not(.hydrated)[disabled=""], gov-form-multi-select:not(.hydrated)[disabled=true i], gov-form-multi-select:not(.hydrated)[disabled="1"] {
1262
+ pointer-events: none;
1263
+ border-color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));
1264
+ background: var(--gov-form-input-disabled-bg, var(--gov-color-secondary-300));
1265
+ color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));
1266
+ }
1267
+ gov-form-multi-select:not(.hydrated) option {
1268
+ display: none;
1269
+ }
1270
+ gov-form-multi-select:not(.hydrated) option[selected] {
1271
+ display: inline-block;
1272
+ padding: 0.25rem 0.5rem;
1273
+ background: var(--gov-form-multiselect-bg, var(--gov-color-primary-200));
1274
+ }
1275
+
1276
+ gov-form-radio:not(.hydrated) {
1277
+ display: block;
1278
+ border-radius: 50%;
1279
+ border: var(--gov-form-checkbox-border-size, 0.125rem solid var(--gov-color-primary));
1280
+ background-color: var(--gov-form-checkbox-background-color, var(--gov-color-neutral-white));
1281
+ }
1282
+ gov-form-radio:not(.hydrated) gov-form-label {
1283
+ width: 100%;
1284
+ }
1285
+ gov-form-radio:not(.hydrated)[size=xs] {
1286
+ font-weight: var(--gov-text-xs-font-weight);
1287
+ font-size: var(--gov-text-xs-font-size);
1288
+ line-height: var(--gov-text-xs-line-height);
1289
+ letter-spacing: var(--gov-text-xs-letter-spacing);
1290
+ width: var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem);
1291
+ height: var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem);
1292
+ }
1293
+ gov-form-radio:not(.hydrated)[size=xs] gov-form-label {
1294
+ padding-top: calc((var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) - var(--gov-text-xs-font-size) * 1.5) / 2);
1295
+ padding-left: calc(var(--gov-form-checkbox-core-xs-indicator-size, 1.25rem) + var(--gov-form-checkbox-core-xs-gap, 0.75rem));
1296
+ }
1297
+ gov-form-radio:not(.hydrated)[size=s] {
1298
+ font-weight: var(--gov-text-s-font-weight);
1299
+ font-size: var(--gov-text-s-font-size);
1300
+ line-height: var(--gov-text-s-line-height);
1301
+ letter-spacing: var(--gov-text-s-letter-spacing);
1302
+ width: var(--gov-form-checkbox-core-s-indicator-size, 1.375rem);
1303
+ height: var(--gov-form-checkbox-core-s-indicator-size, 1.375rem);
1304
+ }
1305
+ gov-form-radio:not(.hydrated)[size=s] gov-form-label {
1306
+ padding-top: calc((var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) - var(--gov-text-s-font-size) * 1.5) / 2);
1307
+ padding-left: calc(var(--gov-form-checkbox-core-s-indicator-size, 1.375rem) + var(--gov-form-checkbox-core-s-gap, 0.75rem));
1308
+ }
1309
+ gov-form-radio:not(.hydrated)[size=m] {
1310
+ font-weight: var(--gov-text-m-font-weight);
1311
+ font-size: var(--gov-text-m-font-size);
1312
+ line-height: var(--gov-text-m-line-height);
1313
+ letter-spacing: var(--gov-text-m-letter-spacing);
1314
+ width: var(--gov-form-checkbox-core-m-indicator-size, 1.5rem);
1315
+ height: var(--gov-form-checkbox-core-m-indicator-size, 1.5rem);
1316
+ }
1317
+ gov-form-radio:not(.hydrated)[size=m] gov-form-label {
1318
+ padding-top: calc((var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) - var(--gov-text-m-font-size) * 1.5) / 2);
1319
+ padding-left: calc(var(--gov-form-checkbox-core-m-indicator-size, 1.5rem) + var(--gov-form-checkbox-core-m-gap, 1rem));
1320
+ }
1321
+ gov-form-radio:not(.hydrated)[size=l] {
1322
+ font-weight: var(--gov-text-l-font-weight);
1323
+ font-size: var(--gov-text-l-font-size);
1324
+ line-height: var(--gov-text-l-line-height);
1325
+ letter-spacing: var(--gov-text-l-letter-spacing);
1326
+ width: var(--gov-form-checkbox-core-l-indicator-size, 2rem);
1327
+ height: var(--gov-form-checkbox-core-l-indicator-size, 2rem);
1328
+ }
1329
+ gov-form-radio:not(.hydrated)[size=l] gov-form-label {
1330
+ padding-top: calc((var(--gov-form-checkbox-core-l-indicator-size, 2rem) - var(--gov-text-l-font-size) * 1.5) / 2);
1331
+ padding-left: calc(var(--gov-form-checkbox-core-l-indicator-size, 2rem) + var(--gov-form-checkbox-core-l-gap, 1rem));
1332
+ }
1333
+ gov-form-radio:not(.hydrated)[disabled=""], gov-form-radio:not(.hydrated)[disabled=true i], gov-form-radio:not(.hydrated)[disabled="1"] {
1334
+ pointer-events: none;
1335
+ border-color: var(--gov-form-input-disabled-bg, var(--gov-color-primary-400));
1336
+ }
1337
+ gov-form-radio:not(.hydrated)[disabled=""] gov-form-label, gov-form-radio:not(.hydrated)[disabled=true i] gov-form-label, gov-form-radio:not(.hydrated)[disabled="1"] gov-form-label {
1338
+ color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));
1339
+ }
1340
+
1341
+ gov-form-search:not(.hydrated) {
1342
+ position: relative;
1343
+ display: flex;
1344
+ width: 100%;
1345
+ gap: 0.5rem;
1346
+ align-items: center;
1347
+ border-radius: var(--gov-border-radius, 0.1875rem);
1348
+ background-color: var(--gov-form-bg-color, var(--gov-color-neutral-white));
1349
+ }
1350
+ gov-form-search:not(.hydrated) gov-form-input {
1351
+ flex: 1 1 auto;
1352
+ height: auto;
1353
+ border-width: 0 !important;
1354
+ }
1355
+ gov-form-search:not(.hydrated) gov-button {
1356
+ flex: 0 0 auto;
1357
+ margin: 0.1875rem 0.1875rem 0.1875rem 0;
1358
+ }
1359
+ gov-form-search:not(.hydrated)[variant=primary] {
1360
+ border: var(--gov-form-input-border-primary, 0.0625rem solid var(--gov-color-primary-600));
1361
+ }
1362
+ gov-form-search:not(.hydrated)[variant=secondary] {
1363
+ border: var(--gov-form-input-border-secondary, 0.0625rem solid var(--gov-color-secondary-700));
1364
+ }
1365
+
1366
+ gov-form-select:not(.hydrated) {
1367
+ position: relative;
1368
+ display: flex;
1369
+ width: 100%;
1370
+ align-items: center;
1371
+ position: relative;
1372
+ width: 100%;
1373
+ border-radius: var(--gov-border-radius, 0.1875rem);
1374
+ background-color: var(--gov-form-bg-color, var(--gov-color-neutral-white));
1375
+ font-family: var(--gov-font-family, "Roboto", sans-serif);
1376
+ }
1377
+ gov-form-select:not(.hydrated)[size=s] {
1378
+ font-weight: var(--gov-text-s-font-weight);
1379
+ font-size: var(--gov-text-s-font-size);
1380
+ line-height: var(--gov-text-s-line-height);
1381
+ letter-spacing: var(--gov-text-s-letter-spacing);
1382
+ gap: 0.5rem var(--gov-form-input-core-s-icon-size, 1rem);
1383
+ height: var(--gov-form-input-core-s-height, 2rem);
1384
+ padding: var(--gov-form-input-core-s-padding, 0.25rem 0.75rem);
1385
+ }
1386
+ gov-form-select:not(.hydrated)[size=m] {
1387
+ font-weight: var(--gov-text-m-font-weight);
1388
+ font-size: var(--gov-text-m-font-size);
1389
+ line-height: var(--gov-text-m-line-height);
1390
+ letter-spacing: var(--gov-text-m-letter-spacing);
1391
+ gap: 0.5rem var(--gov-form-input-core-m-icon-size, 1rem);
1392
+ height: var(--gov-form-input-core-m-height, 2.5rem);
1393
+ padding: var(--gov-form-input-core-m-padding, 0.4375rem 0.75rem);
1394
+ }
1395
+ gov-form-select:not(.hydrated)[size=l] {
1396
+ font-weight: var(--gov-text-m-font-weight);
1397
+ font-size: var(--gov-text-m-font-size);
1398
+ line-height: var(--gov-text-m-line-height);
1399
+ letter-spacing: var(--gov-text-m-letter-spacing);
1400
+ gap: 0.5rem var(--gov-form-input-core-l-icon-size, 1rem);
1401
+ height: var(--gov-form-input-core-l-height, 3rem);
1402
+ padding: var(--gov-form-input-core-l-padding, 0.6875rem 0.75rem);
1403
+ }
1404
+ gov-form-select:not(.hydrated)[size=xl] {
1405
+ font-weight: var(--gov-text-l-font-weight);
1406
+ font-size: var(--gov-text-l-font-size);
1407
+ line-height: var(--gov-text-l-line-height);
1408
+ letter-spacing: var(--gov-text-l-letter-spacing);
1409
+ gap: 0.5rem var(--gov-form-input-core-xl-icon-size, 1.25rem);
1410
+ height: var(--gov-form-input-core-xl-height, 3.5rem);
1411
+ padding: var(--gov-form-input-core-xl-padding, 0.9375rem 1rem 0.875rem);
1412
+ }
1413
+ gov-form-select:not(.hydrated)[variant=primary] {
1414
+ color: var(--gov-form-input-color-primary, var(--gov-color-secondary-700));
1415
+ border: var(--gov-form-input-border-primary, 0.0625rem solid var(--gov-color-primary-600));
1416
+ }
1417
+ gov-form-select:not(.hydrated)[variant=secondary] {
1418
+ color: var(--gov-form-input-color-secondary, var(--gov-color-secondary-700));
1419
+ border: var(--gov-form-input-border-secondary, 0.0625rem solid var(--gov-color-secondary-700));
1420
+ }
1421
+ gov-form-select:not(.hydrated)[multiline=""], gov-form-select:not(.hydrated)[multiline=true i], gov-form-select:not(.hydrated)[multiline="1"] {
1422
+ height: 5.625rem;
1423
+ }
1424
+ gov-form-select:not(.hydrated)[disabled=""], gov-form-select:not(.hydrated)[disabled=true i], gov-form-select:not(.hydrated)[disabled="1"] {
1425
+ pointer-events: none;
1426
+ border-color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));
1427
+ background: var(--gov-form-input-disabled-bg, var(--gov-color-secondary-300));
1428
+ color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));
1429
+ }
1430
+ gov-form-select:not(.hydrated) option {
1431
+ display: none;
1432
+ }
1433
+ gov-form-select:not(.hydrated) option[selected] {
1434
+ display: inline-block;
1435
+ }
1436
+
1437
+ gov-form-switch:not(.hydrated) {
1438
+ border-color: var(--gov-form-switch-indicator-bg-checked, var(--gov-color-primary));
1439
+ background-color: var(--gov-form-switch-indicator-bg-checked, var(--gov-color-primary));
1440
+ }
1441
+ gov-form-switch:not(.hydrated) gov-form-label {
1442
+ color: var(--gov-form-switch-color, var(--gov-color-secondary-800));
1443
+ }
1444
+ gov-form-switch:not(.hydrated)[size=xs] {
1445
+ display: block;
1446
+ width: calc(var(--gov-form-switch-xs-indicator-height, 1.25rem) * 1.6666666667);
1447
+ height: var(--gov-form-switch-xs-indicator-height, 1.25rem);
1448
+ border-radius: calc(var(--gov-form-switch-xs-indicator-height, 1.25rem) * 0.5);
1449
+ }
1450
+ gov-form-switch:not(.hydrated)[size=xs] gov-form-label {
1451
+ font-weight: var(--gov-text-xs-font-weight);
1452
+ font-size: var(--gov-text-xs-font-size);
1453
+ line-height: var(--gov-text-xs-line-height);
1454
+ letter-spacing: var(--gov-text-xs-letter-spacing);
1455
+ padding-top: calc((var(--gov-form-switch-xs-indicator-height, 1.25rem) - var(--gov-text-xs-font-size) * 1.5) / 2);
1456
+ padding-left: calc(var(--gov-form-switch-xs-indicator-height, 1.25rem) * 1.6666666667 + var(--gov-form-switch-xs-gap, 0.75rem));
1457
+ }
1458
+ gov-form-switch:not(.hydrated)[size=s] {
1459
+ display: block;
1460
+ width: calc(var(--gov-form-switch-s-indicator-height, 1.375rem) * 1.6666666667);
1461
+ height: var(--gov-form-switch-s-indicator-height, 1.375rem);
1462
+ border-radius: calc(var(--gov-form-switch-s-indicator-height, 1.375rem) * 0.5);
1463
+ }
1464
+ gov-form-switch:not(.hydrated)[size=s] gov-form-label {
1465
+ font-weight: var(--gov-text-s-font-weight);
1466
+ font-size: var(--gov-text-s-font-size);
1467
+ line-height: var(--gov-text-s-line-height);
1468
+ letter-spacing: var(--gov-text-s-letter-spacing);
1469
+ padding-top: calc((var(--gov-form-switch-s-indicator-height, 1.375rem) - var(--gov-text-s-font-size) * 1.5) / 2);
1470
+ padding-left: calc(var(--gov-form-switch-s-indicator-height, 1.375rem) * 1.6666666667 + var(--gov-form-switch-s-gap, 0.75rem));
1471
+ }
1472
+ gov-form-switch:not(.hydrated)[size=m] {
1473
+ display: block;
1474
+ width: calc(var(--gov-form-switch-m-indicator-height, 1.5rem) * 1.6666666667);
1475
+ height: var(--gov-form-switch-m-indicator-height, 1.5rem);
1476
+ border-radius: calc(var(--gov-form-switch-m-indicator-height, 1.5rem) * 0.5);
1477
+ }
1478
+ gov-form-switch:not(.hydrated)[size=m] gov-form-label {
1479
+ font-weight: var(--gov-text-m-font-weight);
1480
+ font-size: var(--gov-text-m-font-size);
1481
+ line-height: var(--gov-text-m-line-height);
1482
+ letter-spacing: var(--gov-text-m-letter-spacing);
1483
+ padding-top: calc((var(--gov-form-switch-m-indicator-height, 1.5rem) - var(--gov-text-m-font-size) * 1.5) / 2);
1484
+ padding-left: calc(var(--gov-form-switch-m-indicator-height, 1.5rem) * 1.6666666667 + var(--gov-form-switch-m-gap, 1rem));
1485
+ }
1486
+ gov-form-switch:not(.hydrated)[size=l] {
1487
+ display: block;
1488
+ width: calc(var(--gov-form-switch-l-indicator-height, 2rem) * 1.6666666667);
1489
+ height: var(--gov-form-switch-l-indicator-height, 2rem);
1490
+ border-radius: calc(var(--gov-form-switch-l-indicator-height, 2rem) * 0.5);
1491
+ }
1492
+ gov-form-switch:not(.hydrated)[size=l] gov-form-label {
1493
+ font-weight: var(--gov-text-l-font-weight);
1494
+ font-size: var(--gov-text-l-font-size);
1495
+ line-height: var(--gov-text-l-line-height);
1496
+ letter-spacing: var(--gov-text-l-letter-spacing);
1497
+ padding-top: calc((var(--gov-form-switch-l-indicator-height, 2rem) - var(--gov-text-l-font-size) * 1.5) / 2);
1498
+ padding-left: calc(var(--gov-form-switch-l-indicator-height, 2rem) * 1.6666666667 + var(--gov-form-switch-l-gap, 1rem));
1499
+ }
1500
+ gov-form-switch:not(.hydrated)[disabled=""], gov-form-switch:not(.hydrated)[disabled=true i], gov-form-switch:not(.hydrated)[disabled="1"] {
1501
+ pointer-events: none;
1502
+ border-color: var(--gov-form-input-disabled-bg, var(--gov-color-primary-400));
1503
+ background-color: var(--gov-form-input-disabled-bg, var(--gov-color-primary-400));
1504
+ }
1505
+ gov-form-switch:not(.hydrated)[disabled=""] gov-form-label, gov-form-switch:not(.hydrated)[disabled=true i] gov-form-label, gov-form-switch:not(.hydrated)[disabled="1"] gov-form-label {
1506
+ color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));
1507
+ }
1508
+
1509
+ gov-grid:not(.hydrated) {
1510
+ position: relative;
1511
+ display: flex;
1512
+ width: 100%;
1513
+ flex-wrap: wrap;
1514
+ }
1515
+ gov-grid:not(.hydrated)[align-x=middle] {
1516
+ align-items: center;
1517
+ }
1518
+ gov-grid:not(.hydrated)[align-x=bottom] {
1519
+ align-items: flex-end;
1520
+ }
1521
+ gov-grid:not(.hydrated)[align-y=center] {
1522
+ justify-content: center;
1523
+ }
1524
+ gov-grid:not(.hydrated)[align-y=right] {
1525
+ justify-content: flex-end;
1526
+ }
1527
+ gov-grid:not(.hydrated)[align-y=space-between] {
1528
+ justify-content: space-between;
1529
+ }
1530
+ gov-grid:not(.hydrated)[align-y=space-around] {
1531
+ justify-content: space-around;
1532
+ }
1533
+ gov-grid:not(.hydrated) gov-grid-item {
1534
+ border: 0 solid transparent;
1535
+ }
1536
+ gov-grid:not(.hydrated) gov-grid-item[size="1/12"] {
1537
+ width: 8.3333333333%;
1538
+ }
1539
+
1540
+ gov-grid:not(.hydrated) gov-grid-item[size="2/12"] {
1541
+ width: 16.6666666667%;
1542
+ }
1543
+
1544
+ gov-grid:not(.hydrated) gov-grid-item[size="3/12"] {
1545
+ width: 25%;
1546
+ }
1547
+
1548
+ gov-grid:not(.hydrated) gov-grid-item[size="4/12"] {
1549
+ width: 33.3333333333%;
1550
+ }
1551
+
1552
+ gov-grid:not(.hydrated) gov-grid-item[size="5/12"] {
1553
+ width: 41.6666666667%;
1554
+ }
1555
+
1556
+ gov-grid:not(.hydrated) gov-grid-item[size="6/12"] {
1557
+ width: 50%;
1558
+ }
1559
+
1560
+ gov-grid:not(.hydrated) gov-grid-item[size="7/12"] {
1561
+ width: 58.3333333333%;
1562
+ }
1563
+
1564
+ gov-grid:not(.hydrated) gov-grid-item[size="8/12"] {
1565
+ width: 66.6666666667%;
1566
+ }
1567
+
1568
+ gov-grid:not(.hydrated) gov-grid-item[size="9/12"] {
1569
+ width: 75%;
1570
+ }
1571
+
1572
+ gov-grid:not(.hydrated) gov-grid-item[size="10/12"] {
1573
+ width: 83.3333333333%;
1574
+ }
1575
+
1576
+ gov-grid:not(.hydrated) gov-grid-item[size="11/12"] {
1577
+ width: 91.6666666667%;
1578
+ }
1579
+
1580
+ gov-grid:not(.hydrated) gov-grid-item[size="12/12"] {
1581
+ width: 100%;
1582
+ }
1583
+
1584
+ @media (min-width: 30em) {
1585
+ gov-grid:not(.hydrated) gov-grid-item[size-sm="1/12"] {
1586
+ width: 8.3333333333%;
1587
+ }
1588
+ gov-grid:not(.hydrated) gov-grid-item[size-sm="2/12"] {
1589
+ width: 16.6666666667%;
1590
+ }
1591
+ gov-grid:not(.hydrated) gov-grid-item[size-sm="3/12"] {
1592
+ width: 25%;
1593
+ }
1594
+ gov-grid:not(.hydrated) gov-grid-item[size-sm="4/12"] {
1595
+ width: 33.3333333333%;
1596
+ }
1597
+ gov-grid:not(.hydrated) gov-grid-item[size-sm="5/12"] {
1598
+ width: 41.6666666667%;
1599
+ }
1600
+ gov-grid:not(.hydrated) gov-grid-item[size-sm="6/12"] {
1601
+ width: 50%;
1602
+ }
1603
+ gov-grid:not(.hydrated) gov-grid-item[size-sm="7/12"] {
1604
+ width: 58.3333333333%;
1605
+ }
1606
+ gov-grid:not(.hydrated) gov-grid-item[size-sm="8/12"] {
1607
+ width: 66.6666666667%;
1608
+ }
1609
+ gov-grid:not(.hydrated) gov-grid-item[size-sm="9/12"] {
1610
+ width: 75%;
1611
+ }
1612
+ gov-grid:not(.hydrated) gov-grid-item[size-sm="10/12"] {
1613
+ width: 83.3333333333%;
1614
+ }
1615
+ gov-grid:not(.hydrated) gov-grid-item[size-sm="11/12"] {
1616
+ width: 91.6666666667%;
1617
+ }
1618
+ gov-grid:not(.hydrated) gov-grid-item[size-sm="12/12"] {
1619
+ width: 100%;
1620
+ }
1621
+ }
1622
+ @media (min-width: 48em) {
1623
+ gov-grid:not(.hydrated) gov-grid-item[size-md="1/12"] {
1624
+ width: 8.3333333333%;
1625
+ }
1626
+ gov-grid:not(.hydrated) gov-grid-item[size-md="2/12"] {
1627
+ width: 16.6666666667%;
1628
+ }
1629
+ gov-grid:not(.hydrated) gov-grid-item[size-md="3/12"] {
1630
+ width: 25%;
1631
+ }
1632
+ gov-grid:not(.hydrated) gov-grid-item[size-md="4/12"] {
1633
+ width: 33.3333333333%;
1634
+ }
1635
+ gov-grid:not(.hydrated) gov-grid-item[size-md="5/12"] {
1636
+ width: 41.6666666667%;
1637
+ }
1638
+ gov-grid:not(.hydrated) gov-grid-item[size-md="6/12"] {
1639
+ width: 50%;
1640
+ }
1641
+ gov-grid:not(.hydrated) gov-grid-item[size-md="7/12"] {
1642
+ width: 58.3333333333%;
1643
+ }
1644
+ gov-grid:not(.hydrated) gov-grid-item[size-md="8/12"] {
1645
+ width: 66.6666666667%;
1646
+ }
1647
+ gov-grid:not(.hydrated) gov-grid-item[size-md="9/12"] {
1648
+ width: 75%;
1649
+ }
1650
+ gov-grid:not(.hydrated) gov-grid-item[size-md="10/12"] {
1651
+ width: 83.3333333333%;
1652
+ }
1653
+ gov-grid:not(.hydrated) gov-grid-item[size-md="11/12"] {
1654
+ width: 91.6666666667%;
1655
+ }
1656
+ gov-grid:not(.hydrated) gov-grid-item[size-md="12/12"] {
1657
+ width: 100%;
1658
+ }
1659
+ }
1660
+ @media (min-width: 64em) {
1661
+ gov-grid:not(.hydrated) gov-grid-item[size-lg="1/12"] {
1662
+ width: 8.3333333333%;
1663
+ }
1664
+ gov-grid:not(.hydrated) gov-grid-item[size-lg="2/12"] {
1665
+ width: 16.6666666667%;
1666
+ }
1667
+ gov-grid:not(.hydrated) gov-grid-item[size-lg="3/12"] {
1668
+ width: 25%;
1669
+ }
1670
+ gov-grid:not(.hydrated) gov-grid-item[size-lg="4/12"] {
1671
+ width: 33.3333333333%;
1672
+ }
1673
+ gov-grid:not(.hydrated) gov-grid-item[size-lg="5/12"] {
1674
+ width: 41.6666666667%;
1675
+ }
1676
+ gov-grid:not(.hydrated) gov-grid-item[size-lg="6/12"] {
1677
+ width: 50%;
1678
+ }
1679
+ gov-grid:not(.hydrated) gov-grid-item[size-lg="7/12"] {
1680
+ width: 58.3333333333%;
1681
+ }
1682
+ gov-grid:not(.hydrated) gov-grid-item[size-lg="8/12"] {
1683
+ width: 66.6666666667%;
1684
+ }
1685
+ gov-grid:not(.hydrated) gov-grid-item[size-lg="9/12"] {
1686
+ width: 75%;
1687
+ }
1688
+ gov-grid:not(.hydrated) gov-grid-item[size-lg="10/12"] {
1689
+ width: 83.3333333333%;
1690
+ }
1691
+ gov-grid:not(.hydrated) gov-grid-item[size-lg="11/12"] {
1692
+ width: 91.6666666667%;
1693
+ }
1694
+ gov-grid:not(.hydrated) gov-grid-item[size-lg="12/12"] {
1695
+ width: 100%;
1696
+ }
1697
+ }
1698
+ @media (min-width: 75em) {
1699
+ gov-grid:not(.hydrated) gov-grid-item[size-xl="1/12"] {
1700
+ width: 8.3333333333%;
1701
+ }
1702
+ gov-grid:not(.hydrated) gov-grid-item[size-xl="2/12"] {
1703
+ width: 16.6666666667%;
1704
+ }
1705
+ gov-grid:not(.hydrated) gov-grid-item[size-xl="3/12"] {
1706
+ width: 25%;
1707
+ }
1708
+ gov-grid:not(.hydrated) gov-grid-item[size-xl="4/12"] {
1709
+ width: 33.3333333333%;
1710
+ }
1711
+ gov-grid:not(.hydrated) gov-grid-item[size-xl="5/12"] {
1712
+ width: 41.6666666667%;
1713
+ }
1714
+ gov-grid:not(.hydrated) gov-grid-item[size-xl="6/12"] {
1715
+ width: 50%;
1716
+ }
1717
+ gov-grid:not(.hydrated) gov-grid-item[size-xl="7/12"] {
1718
+ width: 58.3333333333%;
1719
+ }
1720
+ gov-grid:not(.hydrated) gov-grid-item[size-xl="8/12"] {
1721
+ width: 66.6666666667%;
1722
+ }
1723
+ gov-grid:not(.hydrated) gov-grid-item[size-xl="9/12"] {
1724
+ width: 75%;
1725
+ }
1726
+ gov-grid:not(.hydrated) gov-grid-item[size-xl="10/12"] {
1727
+ width: 83.3333333333%;
1728
+ }
1729
+ gov-grid:not(.hydrated) gov-grid-item[size-xl="11/12"] {
1730
+ width: 91.6666666667%;
1731
+ }
1732
+ gov-grid:not(.hydrated) gov-grid-item[size-xl="12/12"] {
1733
+ width: 100%;
1734
+ }
1735
+ }
1736
+
1737
+ gov-icon:not(.hydrated) {
1738
+ display: inline-flex;
1739
+ width: 100%;
1740
+ height: 100%;
1741
+ }
1742
+
1743
+ gov-layout:not(.hydrated) {
1744
+ position: relative;
1745
+ display: block;
1746
+ width: 100%;
1747
+ display: flex;
1748
+ gap: var(--gov-layout-gap, 1.375rem);
1749
+ flex-direction: column;
1750
+ }
1751
+ @media (min-width: 64em) {
1752
+ gov-layout:not(.hydrated) {
1753
+ flex-direction: row;
1754
+ }
1755
+ gov-layout:not(.hydrated)[type=aside][variant=right] gov-layout-column:first-child {
1756
+ flex: 1 1 auto;
1757
+ width: auto;
1758
+ }
1759
+ gov-layout:not(.hydrated)[type=aside][variant=right] gov-layout-column:last-child {
1760
+ flex: 0 0 auto;
1761
+ width: calc(var(--gov-container-width, 73.75rem) / 3 - var(--gov-layout-gap, 1.375rem));
1762
+ }
1763
+ gov-layout:not(.hydrated)[type=aside][variant=left] gov-layout-column:first-child {
1764
+ flex: 0 0 auto;
1765
+ width: calc(var(--gov-container-width, 73.75rem) / 3 - var(--gov-layout-gap, 1.375rem));
1766
+ }
1767
+ gov-layout:not(.hydrated)[type=aside][variant=left] gov-layout-column:last-child {
1768
+ flex: 1 1 auto;
1769
+ width: auto;
1770
+ }
1771
+ gov-layout:not(.hydrated)[type=aside][variant=right][inverse=""] gov-layout-column:first-child, gov-layout:not(.hydrated)[type=aside][variant=right][inverse=true i] gov-layout-column:first-child, gov-layout:not(.hydrated)[type=aside][variant=right][inverse="1"] gov-layout-column:first-child {
1772
+ order: 1;
1773
+ }
1774
+ gov-layout:not(.hydrated)[type=aside][variant=left][inverse=""] gov-layout-column:first-child, gov-layout:not(.hydrated)[type=aside][variant=left][inverse=true i] gov-layout-column:first-child, gov-layout:not(.hydrated)[type=aside][variant=left][inverse="1"] gov-layout-column:first-child {
1775
+ order: 2;
1776
+ }
1777
+ gov-layout:not(.hydrated)[type=text] {
1778
+ width: var(--gov-layout-content-width, 48.75rem);
1779
+ margin-right: auto;
1780
+ margin-left: auto;
1781
+ }
1782
+ gov-layout:not(.hydrated)[type=text][variant=left] {
1783
+ width: var(--gov-layout-content-width, 48.75rem);
1784
+ margin-right: auto;
1785
+ margin-left: 0;
1786
+ }
1787
+ gov-layout:not(.hydrated)[type=text][variant=right] {
1788
+ width: var(--gov-layout-content-width, 48.75rem);
1789
+ margin-right: 0;
1790
+ margin-left: auto;
1791
+ }
1792
+ }
1793
+
1794
+ gov-message:not(.hydrated) {
1795
+ position: relative;
1796
+ display: flex;
1797
+ gap: 1rem;
1798
+ flex-direction: column;
1799
+ padding: 0.75rem 1rem;
1800
+ border-left: 0.25rem solid transparent;
1801
+ background: var(--gov-toast-message-bg, var(--gov-color-neutral-white));
1802
+ }
1803
+ gov-message:not(.hydrated) gov-icon {
1804
+ flex: 0 0 1.25rem;
1805
+ width: 1.25rem;
1806
+ height: 1.25rem;
1807
+ }
1808
+ gov-message:not(.hydrated) p {
1809
+ flex: 1 1 auto;
1810
+ font-weight: var(--gov-text-m-font-weight);
1811
+ font-size: var(--gov-text-m-font-size);
1812
+ line-height: var(--gov-text-m-line-height);
1813
+ letter-spacing: var(--gov-text-m-letter-spacing);
1814
+ }
1815
+ gov-message:not(.hydrated) p > *:last-child {
1816
+ margin-bottom: 0;
1817
+ }
1818
+ @media (min-width: 30em) {
1819
+ gov-message:not(.hydrated) {
1820
+ flex-direction: row;
1821
+ }
1822
+ }
1823
+ gov-message:not(.hydrated)[shadow=""], gov-message:not(.hydrated)[shadow=true i], gov-message:not(.hydrated)[shadow="1"] {
1824
+ box-shadow: var(--gov-message-box-shadow, 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1));
1825
+ }
1826
+ gov-message:not(.hydrated)[variant=warning] {
1827
+ border-left-color: var(--gov-message-warning-color, var(--gov-color-warning));
1828
+ background: var(--gov-message-warning-bg-color, var(--gov-color-warning-100));
1829
+ }
1830
+ gov-message:not(.hydrated)[variant=warning] gov-icon {
1831
+ color: var(--gov-message-warning-color, var(--gov-color-warning));
1832
+ }
1833
+ gov-message:not(.hydrated)[variant=warning][inverse=""], gov-message:not(.hydrated)[variant=warning][inverse=true i], gov-message:not(.hydrated)[variant=warning][inverse="1"] {
1834
+ background: var(--gov-message-bg-inverse, var(--gov-color-neutral-white));
1835
+ }
1836
+ gov-message:not(.hydrated)[variant=error] {
1837
+ border-left-color: var(--gov-message-error-color, var(--gov-color-error));
1838
+ background: var(--gov-message-error-bg-color, var(--gov-color-error-100));
1839
+ }
1840
+ gov-message:not(.hydrated)[variant=error] gov-icon {
1841
+ color: var(--gov-message-error-color, var(--gov-color-error));
1842
+ }
1843
+ gov-message:not(.hydrated)[variant=error][inverse=""], gov-message:not(.hydrated)[variant=error][inverse=true i], gov-message:not(.hydrated)[variant=error][inverse="1"] {
1844
+ background: var(--gov-message-bg-inverse, var(--gov-color-neutral-white));
1845
+ }
1846
+ gov-message:not(.hydrated)[variant=secondary] {
1847
+ border-left-color: var(--gov-message-secondary-color, var(--gov-color-secondary));
1848
+ background: var(--gov-message-secondary-bg-color, var(--gov-color-secondary-200));
1849
+ }
1850
+ gov-message:not(.hydrated)[variant=secondary] gov-icon {
1851
+ color: var(--gov-message-secondary-color, var(--gov-color-secondary));
1852
+ }
1853
+ gov-message:not(.hydrated)[variant=secondary][inverse=""], gov-message:not(.hydrated)[variant=secondary][inverse=true i], gov-message:not(.hydrated)[variant=secondary][inverse="1"] {
1854
+ background: var(--gov-message-bg-inverse, var(--gov-color-neutral-white));
1855
+ }
1856
+ gov-message:not(.hydrated)[variant=success] {
1857
+ border-left-color: var(--gov-message-success-color, var(--gov-color-success));
1858
+ background: var(--gov-message-success-bg-color, var(--gov-color-success-100));
1859
+ }
1860
+ gov-message:not(.hydrated)[variant=success] gov-icon {
1861
+ color: var(--gov-message-success-color, var(--gov-color-success));
1862
+ }
1863
+ gov-message:not(.hydrated)[variant=success][inverse=""], gov-message:not(.hydrated)[variant=success][inverse=true i], gov-message:not(.hydrated)[variant=success][inverse="1"] {
1864
+ background: var(--gov-message-bg-inverse, var(--gov-color-neutral-white));
1865
+ }
1866
+ gov-message:not(.hydrated)[variant=primary] {
1867
+ border-left-color: var(--gov-message-primary-color, var(--gov-color-primary));
1868
+ background: var(--gov-message-primary-bg-color, var(--gov-color-primary-100));
1869
+ }
1870
+ gov-message:not(.hydrated)[variant=primary] gov-icon {
1871
+ color: var(--gov-message-primary-color, var(--gov-color-primary));
1872
+ }
1873
+ gov-message:not(.hydrated)[variant=primary][inverse=""], gov-message:not(.hydrated)[variant=primary][inverse=true i], gov-message:not(.hydrated)[variant=primary][inverse="1"] {
1874
+ background: var(--gov-message-bg-inverse, var(--gov-color-neutral-white));
1875
+ }
1876
+
1877
+ gov-nav:not(.hydrated) {
1878
+ position: relative;
1879
+ display: block;
1880
+ width: 100%;
1881
+ font-weight: var(--gov-text-s-font-weight);
1882
+ font-size: var(--gov-text-s-font-size);
1883
+ line-height: var(--gov-text-s-line-height);
1884
+ letter-spacing: var(--gov-text-s-letter-spacing);
1885
+ background: var(--gov-nav-bg, var(--gov-color-primary));
1886
+ font-weight: bold;
1887
+ letter-spacing: 0.0125em;
1888
+ text-transform: uppercase;
1889
+ }
1890
+ gov-nav:not(.hydrated) gov-nav-item {
1891
+ position: relative;
1892
+ display: block;
1893
+ padding: 0.9375rem 3rem 0.9375rem 2.25rem;
1894
+ color: var(--gov-nav-color, var(--gov-color-neutral-white));
1895
+ text-decoration: none;
1896
+ }
1897
+ @media (min-width: 48em) {
1898
+ gov-nav:not(.hydrated) {
1899
+ text-align: center;
1900
+ display: flex;
1901
+ justify-content: space-between;
1902
+ }
1903
+ gov-nav:not(.hydrated) gov-nav-item {
1904
+ display: inline-flex;
1905
+ justify-content: center;
1906
+ align-items: center;
1907
+ height: 100%;
1908
+ padding: 1.375rem 1.25rem 1.3125rem;
1909
+ }
1910
+ }
1911
+
1912
+ gov-side-nav:not(.hydrated) {
1913
+ position: relative;
1914
+ display: block;
1915
+ width: 100%;
1916
+ }
1917
+ gov-side-nav:not(.hydrated) gov-side-nav-item {
1918
+ display: flex;
1919
+ border-bottom: var(--gov-side-nav-border, 0.0625rem solid var(--gov-color-secondary-500));
1920
+ font-weight: var(--gov-text-m-font-weight);
1921
+ font-size: var(--gov-text-m-font-size);
1922
+ line-height: var(--gov-text-m-line-height);
1923
+ letter-spacing: var(--gov-text-m-letter-spacing);
1924
+ padding: 0.75rem 1rem 0.75rem 0.5rem;
1925
+ min-height: 3rem;
1926
+ }
1927
+ gov-side-nav:not(.hydrated) gov-side-nav-item gov-icon {
1928
+ display: flex;
1929
+ flex: 0 0 auto;
1930
+ width: 1rem;
1931
+ height: 1rem;
1932
+ margin: 0;
1933
+ color: var(--gov-side-nav-color, var(--gov-color-secondary));
1934
+ }
1935
+ gov-side-nav:not(.hydrated) gov-side-nav-item gov-side-nav-item {
1936
+ display: none;
1937
+ }
1938
+ gov-side-nav:not(.hydrated)[compact=""] gov-side-nav-item, gov-side-nav:not(.hydrated)[compact=true i] gov-side-nav-item, gov-side-nav:not(.hydrated)[compact="1"] gov-side-nav-item {
1939
+ border-bottom: none;
1940
+ }
1941
+
1942
+ gov-spacer:not(.hydrated) {
1943
+ position: relative;
1944
+ display: block;
1945
+ width: 100%;
1946
+ }
1947
+ gov-spacer:not(.hydrated)[size=unset] {
1948
+ height: 0;
1949
+ }
1950
+ gov-spacer:not(.hydrated)[size="2xs"] {
1951
+ height: 0.25rem;
1952
+ }
1953
+ gov-spacer:not(.hydrated)[size=xs] {
1954
+ height: 0.5rem;
1955
+ }
1956
+ gov-spacer:not(.hydrated)[size=s] {
1957
+ height: 0.75rem;
1958
+ }
1959
+ gov-spacer:not(.hydrated)[size=m] {
1960
+ height: 1rem;
1961
+ }
1962
+ gov-spacer:not(.hydrated)[size=l] {
1963
+ height: 1.25rem;
1964
+ }
1965
+ gov-spacer:not(.hydrated)[size=xl] {
1966
+ height: 1.75rem;
1967
+ }
1968
+ gov-spacer:not(.hydrated)[size="2xl"] {
1969
+ height: 2rem;
1970
+ }
1971
+ gov-spacer:not(.hydrated)[size="3xl"] {
1972
+ height: 3rem;
1973
+ }
1974
+ gov-spacer:not(.hydrated)[size="4xl"] {
1975
+ height: 4.5rem;
1976
+ }
1977
+ gov-spacer:not(.hydrated)[breakpoint=none] {
1978
+ display: none;
1979
+ }
1980
+ gov-spacer:not(.hydrated)[breakpoint=sm] {
1981
+ display: none;
1982
+ }
1983
+ @media (min-width: 30em) {
1984
+ gov-spacer:not(.hydrated)[breakpoint=sm] {
1985
+ display: block;
1986
+ }
1987
+ }
1988
+ gov-spacer:not(.hydrated)[breakpoint=md] {
1989
+ display: none;
1990
+ }
1991
+ @media (min-width: 48em) {
1992
+ gov-spacer:not(.hydrated)[breakpoint=md] {
1993
+ display: block;
1994
+ }
1995
+ }
1996
+ gov-spacer:not(.hydrated)[breakpoint=lg] {
1997
+ display: none;
1998
+ }
1999
+ @media (min-width: 64em) {
2000
+ gov-spacer:not(.hydrated)[breakpoint=lg] {
2001
+ display: block;
2002
+ }
2003
+ }
2004
+ gov-spacer:not(.hydrated)[breakpoint=xl] {
2005
+ display: none;
2006
+ }
2007
+ @media (min-width: 75em) {
2008
+ gov-spacer:not(.hydrated)[breakpoint=xl] {
2009
+ display: block;
2010
+ }
2011
+ }
2012
+
2013
+ gov-statsbar:not(.hydrated) {
2014
+ position: relative;
2015
+ display: block;
2016
+ width: 100%;
2017
+ display: block;
2018
+ width: 100%;
2019
+ max-width: calc(var(--gov-container-width, 73.75rem) + 2 * var(--gov-container-padding, 2.5rem));
2020
+ margin-right: auto;
2021
+ margin-left: auto;
2022
+ padding-right: var(--gov-container-padding-mobile, 1.25rem);
2023
+ padding-left: var(--gov-container-padding-mobile, 1.25rem);
2024
+ }
2025
+ @media (min-width: 48em) {
2026
+ gov-statsbar:not(.hydrated) {
2027
+ padding-right: var(--gov-container-padding, 2.5rem);
2028
+ padding-left: var(--gov-container-padding, 2.5rem);
2029
+ }
2030
+ }
2031
+ gov-statsbar:not(.hydrated)[variant=primary] {
2032
+ background-color: var(--gov-statsbar-primary-bg-color, var(--gov-color-primary-200));
2033
+ color: var(--gov-statsbar-primary-text-color, var(--gov-color-primary));
2034
+ }
2035
+ gov-statsbar:not(.hydrated)[variant=primary][inverse=""], gov-statsbar:not(.hydrated)[variant=primary][inverse=true i], gov-statsbar:not(.hydrated)[variant=primary][inverse="1"] {
2036
+ background: var(--gov-color-neutral-white);
2037
+ color: var(--gov-statsbar-primary-text-color-inverse, var(--gov-color-primary));
2038
+ }
2039
+ gov-statsbar:not(.hydrated)[variant=secondary] {
2040
+ background-color: var(--gov-statsbar-secondary-bg-color, var(--gov-color-secondary));
2041
+ color: var(--gov-statsbar-secondary-text-color, var(--gov-color-neutral-white));
2042
+ }
2043
+ gov-statsbar:not(.hydrated)[variant=secondary][inverse=""], gov-statsbar:not(.hydrated)[variant=secondary][inverse=true i], gov-statsbar:not(.hydrated)[variant=secondary][inverse="1"] {
2044
+ background: var(--gov-color-neutral-white);
2045
+ color: var(--gov-statsbar-secondary-text-color-inverse, var(--gov-color-secondary));
2046
+ }
2047
+ gov-statsbar:not(.hydrated) gov-statsbar-item {
2048
+ position: relative;
2049
+ display: block;
2050
+ padding: 1.25rem;
2051
+ }
2052
+ gov-statsbar:not(.hydrated) gov-statsbar-item gov-icon {
2053
+ display: block;
2054
+ margin-bottom: 1rem;
2055
+ width: 2rem;
2056
+ height: 2rem;
2057
+ }
2058
+ gov-statsbar:not(.hydrated) gov-statsbar-item slot {
2059
+ font-weight: var(--gov-text-5xl-font-weight);
2060
+ font-size: var(--gov-text-5xl-font-size);
2061
+ line-height: var(--gov-text-5xl-line-height);
2062
+ letter-spacing: var(--gov-text-5xl-letter-spacing);
2063
+ margin-bottom: 1rem;
2064
+ }
2065
+ gov-statsbar:not(.hydrated) gov-statsbar-item p {
2066
+ letter-spacing: 0.0125em;
2067
+ }
2068
+ gov-statsbar:not(.hydrated) gov-statsbar-item p > *:last-child {
2069
+ margin-bottom: 0;
2070
+ }
2071
+ gov-statsbar:not(.hydrated) gov-statsbar-item[icon-position=left] {
2072
+ padding-left: 3rem;
2073
+ }
2074
+ gov-statsbar:not(.hydrated) gov-statsbar-item[icon-position=left] gov-icon {
2075
+ position: absolute;
2076
+ top: 1.5rem;
2077
+ left: 0;
2078
+ }
2079
+ @media (min-width: 30em) {
2080
+ gov-statsbar:not(.hydrated) gov-statsbar-item {
2081
+ flex: 1 0 50%;
2082
+ max-width: 50%;
2083
+ }
2084
+ }
2085
+ @media (min-width: 48em) {
2086
+ gov-statsbar:not(.hydrated) gov-statsbar-item {
2087
+ padding: 2.5rem;
2088
+ }
2089
+ gov-statsbar:not(.hydrated) gov-statsbar-item gov-icon {
2090
+ width: 3rem;
2091
+ height: 3rem;
2092
+ }
2093
+ gov-statsbar:not(.hydrated) gov-statsbar-item[icon-position=left] {
2094
+ padding-left: 4rem;
2095
+ }
2096
+ gov-statsbar:not(.hydrated) gov-statsbar-item[icon-position=left] gov-icon {
2097
+ top: 2.75rem;
2098
+ }
2099
+ }
2100
+ @media (min-width: 64em) {
2101
+ gov-statsbar:not(.hydrated) gov-statsbar-item {
2102
+ flex-basis: auto;
2103
+ max-width: 25%;
2104
+ }
2105
+ }
2106
+ @media (min-width: 30em) {
2107
+ gov-statsbar:not(.hydrated) {
2108
+ display: flex;
2109
+ flex-wrap: wrap;
2110
+ justify-content: center;
2111
+ }
2112
+ }
2113
+
2114
+ gov-stepper:not(.hydrated) {
2115
+ position: relative;
2116
+ display: block;
2117
+ width: 100%;
2118
+ }
2119
+ gov-stepper:not(.hydrated) gov-stepper-item {
2120
+ position: relative;
2121
+ display: block;
2122
+ width: 100%;
2123
+ }
2124
+ gov-stepper:not(.hydrated) gov-stepper-item gov-icon, gov-stepper:not(.hydrated) gov-stepper-item span {
2125
+ display: flex;
2126
+ flex: 0 0 auto;
2127
+ align-items: center;
2128
+ border-radius: 50%;
2129
+ }
2130
+ gov-stepper:not(.hydrated) gov-stepper-item span {
2131
+ justify-content: center;
2132
+ }
2133
+ gov-stepper:not(.hydrated) gov-stepper-item[size=xs] {
2134
+ min-height: calc(var(--gov-stepper-xs-indicator-size, 1.5rem) + 3 * var(--gov-stepper-xs-connect-gap, 0.5rem));
2135
+ }
2136
+ gov-stepper:not(.hydrated) gov-stepper-item[size=xs]:last-child {
2137
+ min-height: 0;
2138
+ }
2139
+ gov-stepper:not(.hydrated) gov-stepper-item[size=xs] gov-icon {
2140
+ font-weight: var(--gov-text-m-font-weight);
2141
+ font-size: var(--gov-text-m-font-size);
2142
+ line-height: var(--gov-text-m-line-height);
2143
+ letter-spacing: var(--gov-text-m-letter-spacing);
2144
+ width: calc(var(--gov-stepper-xs-indicator-size, 1.5rem) * 0.5);
2145
+ height: calc(var(--gov-stepper-xs-indicator-size, 1.5rem) * 0.5);
2146
+ box-shadow: 0 0 0 var(--gov-stepper-xs-connect-gap, 0.5rem) var(--gov-color-neutral-white);
2147
+ }
2148
+ gov-stepper:not(.hydrated) gov-stepper-item[size=xs] span {
2149
+ font-weight: var(--gov-text-m-font-weight);
2150
+ font-size: var(--gov-text-m-font-size);
2151
+ line-height: var(--gov-text-m-line-height);
2152
+ letter-spacing: var(--gov-text-m-letter-spacing);
2153
+ width: var(--gov-stepper-xs-indicator-size, 1.5rem);
2154
+ height: var(--gov-stepper-xs-indicator-size, 1.5rem);
2155
+ box-shadow: 0 0 0 var(--gov-stepper-xs-connect-gap, 0.5rem) var(--gov-color-neutral-white);
2156
+ }
2157
+ gov-stepper:not(.hydrated) gov-stepper-item[size=xs] div {
2158
+ padding: var(--gov-stepper-xs-content-padding, 1rem 1rem 2rem 2.5rem);
2159
+ }
2160
+ gov-stepper:not(.hydrated) gov-stepper-item[size=s] {
2161
+ min-height: calc(var(--gov-stepper-s-indicator-size, 2rem) + 3 * var(--gov-stepper-s-connect-gap, 1rem));
2162
+ }
2163
+ gov-stepper:not(.hydrated) gov-stepper-item[size=s]:last-child {
2164
+ min-height: 0;
2165
+ }
2166
+ gov-stepper:not(.hydrated) gov-stepper-item[size=s] gov-icon {
2167
+ font-weight: var(--gov-text-xl-font-weight);
2168
+ font-size: var(--gov-text-xl-font-size);
2169
+ line-height: var(--gov-text-xl-line-height);
2170
+ letter-spacing: var(--gov-text-xl-letter-spacing);
2171
+ width: calc(var(--gov-stepper-s-indicator-size, 2rem) * 0.5);
2172
+ height: calc(var(--gov-stepper-s-indicator-size, 2rem) * 0.5);
2173
+ box-shadow: 0 0 0 var(--gov-stepper-s-connect-gap, 1rem) var(--gov-color-neutral-white);
2174
+ }
2175
+ gov-stepper:not(.hydrated) gov-stepper-item[size=s] span {
2176
+ font-weight: var(--gov-text-xl-font-weight);
2177
+ font-size: var(--gov-text-xl-font-size);
2178
+ line-height: var(--gov-text-xl-line-height);
2179
+ letter-spacing: var(--gov-text-xl-letter-spacing);
2180
+ width: var(--gov-stepper-s-indicator-size, 2rem);
2181
+ height: var(--gov-stepper-s-indicator-size, 2rem);
2182
+ box-shadow: 0 0 0 var(--gov-stepper-s-connect-gap, 1rem) var(--gov-color-neutral-white);
2183
+ }
2184
+ gov-stepper:not(.hydrated) gov-stepper-item[size=s] div {
2185
+ padding: var(--gov-stepper-s-content-padding, 1rem 1rem 2rem 3rem);
2186
+ }
2187
+ gov-stepper:not(.hydrated) gov-stepper-item[size=m] {
2188
+ min-height: calc(var(--gov-stepper-m-indicator-size, 2.5rem) + 3 * var(--gov-stepper-m-connect-gap, 1rem));
2189
+ }
2190
+ gov-stepper:not(.hydrated) gov-stepper-item[size=m]:last-child {
2191
+ min-height: 0;
2192
+ }
2193
+ gov-stepper:not(.hydrated) gov-stepper-item[size=m] gov-icon {
2194
+ font-weight: var(--gov-text-xl-font-weight);
2195
+ font-size: var(--gov-text-xl-font-size);
2196
+ line-height: var(--gov-text-xl-line-height);
2197
+ letter-spacing: var(--gov-text-xl-letter-spacing);
2198
+ width: calc(var(--gov-stepper-m-indicator-size, 2.5rem) * 0.5);
2199
+ height: calc(var(--gov-stepper-m-indicator-size, 2.5rem) * 0.5);
2200
+ box-shadow: 0 0 0 var(--gov-stepper-m-connect-gap, 1rem) var(--gov-color-neutral-white);
2201
+ }
2202
+ gov-stepper:not(.hydrated) gov-stepper-item[size=m] span {
2203
+ font-weight: var(--gov-text-xl-font-weight);
2204
+ font-size: var(--gov-text-xl-font-size);
2205
+ line-height: var(--gov-text-xl-line-height);
2206
+ letter-spacing: var(--gov-text-xl-letter-spacing);
2207
+ width: var(--gov-stepper-m-indicator-size, 2.5rem);
2208
+ height: var(--gov-stepper-m-indicator-size, 2.5rem);
2209
+ box-shadow: 0 0 0 var(--gov-stepper-m-connect-gap, 1rem) var(--gov-color-neutral-white);
2210
+ }
2211
+ gov-stepper:not(.hydrated) gov-stepper-item[size=m] div {
2212
+ padding: var(--gov-stepper-m-content-padding, 1rem 1rem 2rem 3.5rem);
2213
+ }
2214
+ gov-stepper:not(.hydrated) gov-stepper-item[variant=primary] gov-icon, gov-stepper:not(.hydrated) gov-stepper-item[variant=primary] span {
2215
+ background: var(--gov-wizzard-primary-indicator-bg, var(--gov-color-primary-300));
2216
+ color: var(--gov-wizzard-primary-indicator-color, var(--gov-color-primary-800));
2217
+ }
2218
+ gov-stepper:not(.hydrated) gov-stepper-item[variant=secondary] gov-icon, gov-stepper:not(.hydrated) gov-stepper-item[variant=secondary] span {
2219
+ background: var(--gov-wizzard-secondary-indicator-bg, var(--gov-color-secondary-400));
2220
+ color: var(--gov-wizzard-secondary-indicator-color, var(--gov-color-secondary-700));
2221
+ }
2222
+ gov-stepper:not(.hydrated) gov-stepper-item[variant=success] gov-icon, gov-stepper:not(.hydrated) gov-stepper-item[variant=success] span {
2223
+ background: var(--gov-wizzard-success-indicator-bg, var(--gov-color-success));
2224
+ color: var(--gov-wizzard-success-indicator-color, var(--gov-color-neutral-white));
2225
+ }
2226
+ gov-stepper:not(.hydrated) gov-stepper-item[variant=error] gov-icon, gov-stepper:not(.hydrated) gov-stepper-item[variant=error] span {
2227
+ background: var(--gov-wizzard-error-indicator-bg, var(--gov-color-error));
2228
+ color: var(--gov-wizzard-error-indicator-color, var(--gov-color-neutral-white));
2229
+ }
2230
+ gov-stepper:not(.hydrated) gov-stepper-item[variant=warning] gov-icon, gov-stepper:not(.hydrated) gov-stepper-item[variant=warning] span {
2231
+ background: var(--gov-wizzard-warning-indicator-bg, var(--gov-color-warning));
2232
+ color: var(--gov-wizzard-warning-indicator-color, var(--gov-color-neutral-white));
2233
+ }
2234
+
2235
+ gov-tabs:not(.hydrated) gov-tabs-item {
2236
+ display: none;
2237
+ color: var(--gov-tabs-text-color, var(--gov-color-secondary-700));
2238
+ }
2239
+ gov-tabs:not(.hydrated) gov-tabs-item[default=""], gov-tabs:not(.hydrated) gov-tabs-item[default=true i], gov-tabs:not(.hydrated) gov-tabs-item[default="1"] {
2240
+ display: block;
2241
+ padding-top: 1.25rem;
2242
+ margin-top: 2.5rem;
2243
+ }
2244
+ gov-tabs:not(.hydrated):not([type=badge]) gov-tabs-item[default=""], gov-tabs:not(.hydrated):not([type=badge]) gov-tabs-item[default=true i], gov-tabs:not(.hydrated):not([type=badge]) gov-tabs-item[default="1"] {
2245
+ border-top: var(--gov-tabs-list-border-width, 0.0625rem solid var(--gov-color-secondary-500));
2246
+ margin-top: 2.875rem;
2247
+ }
2248
+ @media (min-width: 75em) {
2249
+ gov-tabs:not(.hydrated)[orientation=vertical] gov-tabs-item[default=""], gov-tabs:not(.hydrated)[orientation=vertical] gov-tabs-item[default=true i], gov-tabs:not(.hydrated)[orientation=vertical] gov-tabs-item[default="1"] {
2250
+ padding-top: 0;
2251
+ margin-top: 0;
2252
+ border-top: none;
2253
+ padding-left: 1.25rem;
2254
+ margin-left: 6.25rem;
2255
+ border-left: var(--gov-tabs-list-border-width, 0.0625rem solid var(--gov-color-secondary-500));
2256
+ }
2257
+ }
2258
+
2259
+ gov-tiles:not(.hydrated) {
2260
+ overflow: hidden;
2261
+ }
2262
+ gov-tiles:not(.hydrated) > * {
2263
+ margin: 0 -0.0625rem -0.0625rem 0;
2264
+ border: 0.0625rem solid var(--gov-tiles-border-color, var(--gov-color-secondary-500));
2265
+ border-width: 0 0 0.0625rem;
2266
+ }
2267
+ gov-tiles:not(.hydrated) > *:last-child {
2268
+ border-bottom-width: 0;
2269
+ }
2270
+ gov-tiles:not(.hydrated)[no-border] > * {
2271
+ border: none;
2272
+ }
2273
+ @media (min-width: 48em) {
2274
+ gov-tiles:not(.hydrated) {
2275
+ display: grid;
2276
+ }
2277
+ gov-tiles:not(.hydrated)[columns="2"] {
2278
+ grid-template-columns: repeat(2, 1fr);
2279
+ }
2280
+ gov-tiles:not(.hydrated)[columns="2"] > * {
2281
+ border-width: 0.0625rem 0.0625rem 0.0625rem 0;
2282
+ }
2283
+ gov-tiles:not(.hydrated)[columns="2"] > *:nth-child(-n+3) {
2284
+ border-top-width: 0;
2285
+ }
2286
+ gov-tiles:not(.hydrated)[columns="2"] > *:nth-child(2n+2) {
2287
+ border-right-width: 0;
2288
+ }
2289
+ }
2290
+ @media (min-width: 48em) and (max-width: 63.99em) {
2291
+ gov-tiles:not(.hydrated)[columns="3"], gov-tiles:not(.hydrated)[columns="4"] {
2292
+ grid-template-columns: repeat(2, 1fr);
2293
+ }
2294
+ gov-tiles:not(.hydrated)[columns="3"] > *, gov-tiles:not(.hydrated)[columns="4"] > * {
2295
+ border-width: 0.0625rem 0.0625rem 0.0625rem 0;
2296
+ }
2297
+ gov-tiles:not(.hydrated)[columns="3"] > *:nth-child(-n+3), gov-tiles:not(.hydrated)[columns="4"] > *:nth-child(-n+3) {
2298
+ border-top-width: 0;
2299
+ }
2300
+ gov-tiles:not(.hydrated)[columns="3"] > *:nth-child(2n+2), gov-tiles:not(.hydrated)[columns="4"] > *:nth-child(2n+2) {
2301
+ border-right-width: 0;
2302
+ }
2303
+ }
2304
+ @media (min-width: 64em) {
2305
+ gov-tiles:not(.hydrated)[columns="3"] {
2306
+ grid-template-columns: repeat(3, 1fr);
2307
+ }
2308
+ gov-tiles:not(.hydrated)[columns="3"] > * {
2309
+ border-width: 0.0625rem 0.0625rem 0.0625rem 0;
2310
+ }
2311
+ gov-tiles:not(.hydrated)[columns="3"] > *:nth-child(-n+4) {
2312
+ border-top-width: 0;
2313
+ }
2314
+ gov-tiles:not(.hydrated)[columns="3"] > *:nth-child(3n+3) {
2315
+ border-right-width: 0;
2316
+ }
2317
+ }
2318
+ @media (min-width: 64em) and (max-width: 74.99em) {
2319
+ gov-tiles:not(.hydrated)[columns="4"] {
2320
+ grid-template-columns: repeat(3, 1fr);
2321
+ }
2322
+ gov-tiles:not(.hydrated)[columns="4"] > * {
2323
+ border-width: 0.0625rem 0.0625rem 0.0625rem 0;
2324
+ }
2325
+ gov-tiles:not(.hydrated)[columns="4"] > *:nth-child(-n+4) {
2326
+ border-top-width: 0;
2327
+ }
2328
+ gov-tiles:not(.hydrated)[columns="4"] > *:nth-child(3n+3) {
2329
+ border-right-width: 0;
2330
+ }
2331
+ }
2332
+ @media (min-width: 75em) {
2333
+ gov-tiles:not(.hydrated)[columns="4"] {
2334
+ grid-template-columns: repeat(4, 1fr);
2335
+ }
2336
+ gov-tiles:not(.hydrated)[columns="4"] > * {
2337
+ border-width: 0.0625rem 0.0625rem 0.0625rem 0;
2338
+ }
2339
+ gov-tiles:not(.hydrated)[columns="4"] > *:nth-child(-n+5) {
2340
+ border-top-width: 0;
2341
+ }
2342
+ gov-tiles:not(.hydrated)[columns="4"] > *:nth-child(4n+4) {
2343
+ border-right-width: 0;
2344
+ }
2345
+ }
2346
+
2347
+ gov-tile:not(.hydrated) {
2348
+ position: relative;
2349
+ display: block;
2350
+ width: 100%;
2351
+ padding: 0.75rem;
2352
+ }
2353
+ gov-tile:not(.hydrated) gov-icon {
2354
+ display: flex;
2355
+ margin: 0rem 0rem 3.25rem;
2356
+ color: var(--gov-tile-main-color, var(--gov-color-primary));
2357
+ width: 2.5rem;
2358
+ height: 2.5rem;
2359
+ }
2360
+ @media (min-width: 30em) {
2361
+ gov-tile:not(.hydrated)[promotion=""], gov-tile:not(.hydrated)[promotion=true i], gov-tile:not(.hydrated)[promotion="1"] {
2362
+ display: grid;
2363
+ grid-template-columns: auto 1fr;
2364
+ gap: 0 0.875rem;
2365
+ }
2366
+ gov-tile:not(.hydrated)[promotion=""] gov-icon, gov-tile:not(.hydrated)[promotion=true i] gov-icon, gov-tile:not(.hydrated)[promotion="1"] gov-icon {
2367
+ grid-area: 1/1/3/1;
2368
+ margin: 0;
2369
+ }
2370
+ gov-tile:not(.hydrated)[promotion=""] p, gov-tile:not(.hydrated)[promotion=true i] p, gov-tile:not(.hydrated)[promotion="1"] p {
2371
+ grid-area: 2/2/2/2;
2372
+ }
2373
+ }
2374
+ @media (min-width: 48em) {
2375
+ gov-tile:not(.hydrated) {
2376
+ padding: 1.5rem;
2377
+ }
2378
+ gov-tile:not(.hydrated) gov-icon {
2379
+ margin: 0rem 0rem 4rem;
2380
+ width: 3rem;
2381
+ height: 3rem;
2382
+ }
2383
+ }
2384
+ @media (min-width: 64em) {
2385
+ gov-tile:not(.hydrated)[promotion=""], gov-tile:not(.hydrated)[promotion=true i], gov-tile:not(.hydrated)[promotion="1"] {
2386
+ gap: 0 1.625rem;
2387
+ }
2388
+ }
2389
+
2390
+ gov-wizzard:not(.hydrated) {
2391
+ position: relative;
2392
+ display: block;
2393
+ width: 100%;
2394
+ }
2395
+ gov-wizzard:not(.hydrated) > *:last-child {
2396
+ margin-bottom: 0;
2397
+ }
2398
+ gov-wizzard:not(.hydrated) gov-wizzard-item {
2399
+ position: relative;
2400
+ display: block;
2401
+ width: 100%;
2402
+ gap: 1rem;
2403
+ margin-bottom: 1rem;
2404
+ padding: 1rem;
2405
+ background: var(--gov-wizzard-bg-color, var(--gov-color-neutral-white));
2406
+ }
2407
+ gov-wizzard:not(.hydrated) gov-wizzard-item gov-icon, gov-wizzard:not(.hydrated) gov-wizzard-item span {
2408
+ align-items: center;
2409
+ border-radius: 50%;
2410
+ }
2411
+ gov-wizzard:not(.hydrated) gov-wizzard-item span[slot=prefix] {
2412
+ position: absolute;
2413
+ left: 1rem;
2414
+ display: flex;
2415
+ justify-content: center;
2416
+ align-items: center;
2417
+ }
2418
+ gov-wizzard:not(.hydrated) gov-wizzard-item p {
2419
+ display: none;
2420
+ }
2421
+ gov-wizzard:not(.hydrated) gov-wizzard-item[is-expanded=""] p, gov-wizzard:not(.hydrated) gov-wizzard-item[is-expanded=true i] p, gov-wizzard:not(.hydrated) gov-wizzard-item[is-expanded="1"] p {
2422
+ display: block;
2423
+ }
2424
+ gov-wizzard:not(.hydrated) gov-wizzard-item[size=xs], gov-wizzard:not(.hydrated) gov-wizzard-item[size=s], gov-wizzard:not(.hydrated) gov-wizzard-item[size=m] {
2425
+ min-height: calc(var(--gov-wizzard-xs-indicator-size, 1.5rem) + 30px);
2426
+ }
2427
+ gov-wizzard:not(.hydrated) gov-wizzard-item[size=xs] gov-icon, gov-wizzard:not(.hydrated) gov-wizzard-item[size=xs] span, gov-wizzard:not(.hydrated) gov-wizzard-item[size=s] gov-icon, gov-wizzard:not(.hydrated) gov-wizzard-item[size=s] span, gov-wizzard:not(.hydrated) gov-wizzard-item[size=m] gov-icon, gov-wizzard:not(.hydrated) gov-wizzard-item[size=m] span {
2428
+ font-weight: var(--gov-text-m-font-weight);
2429
+ font-size: var(--gov-text-m-font-size);
2430
+ line-height: var(--gov-text-m-line-height);
2431
+ letter-spacing: var(--gov-text-m-letter-spacing);
2432
+ width: var(--gov-wizzard-xs-indicator-size, 1.5rem);
2433
+ height: var(--gov-wizzard-xs-indicator-size, 1.5rem);
2434
+ }
2435
+ gov-wizzard:not(.hydrated) gov-wizzard-item[size=xs] span[slot=prefix], gov-wizzard:not(.hydrated) gov-wizzard-item[size=s] span[slot=prefix], gov-wizzard:not(.hydrated) gov-wizzard-item[size=m] span[slot=prefix] {
2436
+ top: var(--gov-wizzard-xs-top, 1rem);
2437
+ }
2438
+ gov-wizzard:not(.hydrated) gov-wizzard-item[size=xs] p, gov-wizzard:not(.hydrated) gov-wizzard-item[size=s] p, gov-wizzard:not(.hydrated) gov-wizzard-item[size=m] p {
2439
+ padding: var(--gov-wizzard-content-padding, 0rem 1rem 1rem 1rem);
2440
+ }
2441
+ gov-wizzard:not(.hydrated) gov-wizzard-item[variant=primary] gov-icon, gov-wizzard:not(.hydrated) gov-wizzard-item[variant=primary] span {
2442
+ background: var(--gov-wizzard-primary-indicator-bg, var(--gov-color-primary-300));
2443
+ color: var(--gov-wizzard-primary-indicator-color, var(--gov-color-primary-800));
2444
+ }
2445
+ gov-wizzard:not(.hydrated) gov-wizzard-item[variant=secondary] gov-icon, gov-wizzard:not(.hydrated) gov-wizzard-item[variant=secondary] span {
2446
+ background: var(--gov-wizzard-secondary-indicator-bg, var(--gov-color-secondary-400));
2447
+ color: var(--gov-wizzard-secondary-indicator-color, var(--gov-color-secondary-700));
2448
+ }
2449
+ gov-wizzard:not(.hydrated) gov-wizzard-item[variant=success] gov-icon, gov-wizzard:not(.hydrated) gov-wizzard-item[variant=success] span {
2450
+ background: var(--gov-wizzard-success-indicator-bg, var(--gov-color-success));
2451
+ color: var(--gov-wizzard-success-indicator-color, var(--gov-color-neutral-white));
2452
+ }
2453
+ gov-wizzard:not(.hydrated) gov-wizzard-item[variant=error] gov-icon, gov-wizzard:not(.hydrated) gov-wizzard-item[variant=error] span {
2454
+ background: var(--gov-wizzard-error-indicator-bg, var(--gov-color-error));
2455
+ color: var(--gov-wizzard-error-indicator-color, var(--gov-color-neutral-white));
2456
+ }
2457
+ gov-wizzard:not(.hydrated) gov-wizzard-item[variant=warning] gov-icon, gov-wizzard:not(.hydrated) gov-wizzard-item[variant=warning] span {
2458
+ background: var(--gov-wizzard-warning-indicator-bg, var(--gov-color-warning));
2459
+ color: var(--gov-wizzard-warning-indicator-color, var(--gov-color-neutral-white));
2460
+ }
2461
+ @media (min-width: 30em) {
2462
+ gov-wizzard:not(.hydrated) gov-wizzard-item[size=s], gov-wizzard:not(.hydrated) gov-wizzard-item[size=m] {
2463
+ min-height: calc(var(--gov-wizzard-s-indicator-size, 2rem) + 25px);
2464
+ }
2465
+ gov-wizzard:not(.hydrated) gov-wizzard-item[size=s] gov-icon, gov-wizzard:not(.hydrated) gov-wizzard-item[size=s] span, gov-wizzard:not(.hydrated) gov-wizzard-item[size=m] gov-icon, gov-wizzard:not(.hydrated) gov-wizzard-item[size=m] span {
2466
+ font-weight: var(--gov-text-xl-font-weight);
2467
+ font-size: var(--gov-text-xl-font-size);
2468
+ line-height: var(--gov-text-xl-line-height);
2469
+ letter-spacing: var(--gov-text-xl-letter-spacing);
2470
+ width: var(--gov-wizzard-s-indicator-size, 2rem);
2471
+ height: var(--gov-wizzard-s-indicator-size, 2rem);
2472
+ }
2473
+ gov-wizzard:not(.hydrated) gov-wizzard-item[size=s] span[slot=prefix], gov-wizzard:not(.hydrated) gov-wizzard-item[size=m] span[slot=prefix] {
2474
+ top: var(--gov-wizzard-s-top, 0.8125rem);
2475
+ }
2476
+ }
2477
+ @media (min-width: 48em) {
2478
+ gov-wizzard:not(.hydrated) gov-wizzard-item[size=m] {
2479
+ min-height: calc(var(--gov-wizzard-m-indicator-size, 2.5rem) + 20px);
2480
+ }
2481
+ gov-wizzard:not(.hydrated) gov-wizzard-item[size=m] gov-icon, gov-wizzard:not(.hydrated) gov-wizzard-item[size=m] span {
2482
+ font-weight: var(--gov-text-xl-font-weight);
2483
+ font-size: var(--gov-text-xl-font-size);
2484
+ line-height: var(--gov-text-xl-line-height);
2485
+ letter-spacing: var(--gov-text-xl-letter-spacing);
2486
+ width: var(--gov-wizzard-m-indicator-size, 2.5rem);
2487
+ height: var(--gov-wizzard-m-indicator-size, 2.5rem);
2488
+ }
2489
+ gov-wizzard:not(.hydrated) gov-wizzard-item[size=m] span[slot=prefix] {
2490
+ top: var(--gov-wizzard-m-top, 0.5625rem);
2491
+ }
2492
+ gov-wizzard:not(.hydrated) gov-wizzard-item[size=xs] p {
2493
+ padding: var(--gov-wizzard-xs-content-padding, 0rem 1rem 1rem 3.5rem);
2494
+ }
2495
+ gov-wizzard:not(.hydrated) gov-wizzard-item[size=s] p {
2496
+ padding: var(--gov-wizzard-s-content-padding, 0rem 1rem 1rem 4rem);
2497
+ }
2498
+ gov-wizzard:not(.hydrated) gov-wizzard-item[size=m] p {
2499
+ padding: var(--gov-wizzard-m-content-padding, 0rem 1rem 1rem 4.5rem);
2500
+ }
2501
+ }
2502
+
2503
+ gov-attachments,
2504
+ gov-attachments-item,
2505
+ gov-backdrop,
2506
+ gov-cookiebar,
2507
+ gov-form-message,
2508
+ gov-form-password-power,
2509
+ gov-loading,
2510
+ gov-modal,
2511
+ gov-pagination,
2512
+ gov-prompt,
2513
+ gov-skeleton,
2514
+ gov-toast,
2515
+ gov-tooltip {
2516
+ visibility: hidden;
2517
+ }
2518
+ gov-attachments.hydrated,
2519
+ gov-attachments-item.hydrated,
2520
+ gov-backdrop.hydrated,
2521
+ gov-cookiebar.hydrated,
2522
+ gov-form-message.hydrated,
2523
+ gov-form-password-power.hydrated,
2524
+ gov-loading.hydrated,
2525
+ gov-modal.hydrated,
2526
+ gov-pagination.hydrated,
2527
+ gov-prompt.hydrated,
2528
+ gov-skeleton.hydrated,
2529
+ gov-toast.hydrated,
2530
+ gov-tooltip.hydrated {
2531
+ visibility: inherit;
2532
+ }