1@charset "UTF-8";
2:root {
3 --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
4 --line-height: 1.5;
5 --font-weight: 400;
6 --font-size: 16px;
7 --border-radius: 0.25rem;
8 --border-width: 1px;
9 --outline-width: 3px;
10 --spacing: 1rem;
11 --typography-spacing-vertical: 1.5rem;
12 --block-spacing-vertical: calc(var(--spacing) * 2);
13 --block-spacing-horizontal: var(--spacing);
14 --grid-spacing-vertical: 0;
15 --grid-spacing-horizontal: var(--spacing);
16 --form-element-spacing-vertical: 0.75rem;
17 --form-element-spacing-horizontal: 1rem;
18 --nav-element-spacing-vertical: 1rem;
19 --nav-element-spacing-horizontal: 0.5rem;
20 --nav-link-spacing-vertical: 0.5rem;
21 --nav-link-spacing-horizontal: 0.5rem;
22 --form-label-font-weight: var(--font-weight);
23 --transition: 0.2s ease-in-out
24}
25
26@media (min-width: 576px) {
27 :root {
28 --font-size: 17px
29 }
30}
31
32@media (min-width: 768px) {
33 :root {
34 --font-size: 18px
35 }
36}
37
38@media (min-width: 992px) {
39 :root {
40 --font-size: 19px
41 }
42}
43
44@media (min-width: 1200px) {
45 :root {
46 --font-size: 20px
47 }
48}
49
50@media (min-width: 576px) {
51 body > footer, body > header, body > main, section {
52 --block-spacing-vertical: calc(var(--spacing) * 2.5)
53 }
54}
55
56@media (min-width: 768px) {
57 body > footer, body > header, body > main, section {
58 --block-spacing-vertical: calc(var(--spacing) * 3)
59 }
60}
61
62@media (min-width: 992px) {
63 body > footer, body > header, body > main, section {
64 --block-spacing-vertical: calc(var(--spacing) * 3.5)
65 }
66}
67
68@media (min-width: 1200px) {
69 body > footer, body > header, body > main, section {
70 --block-spacing-vertical: calc(var(--spacing) * 4)
71 }
72}
73
74@media (min-width: 576px) {
75 article {
76 --block-spacing-horizontal: calc(var(--spacing) * 1.25)
77 }
78}
79
80@media (min-width: 768px) {
81 article {
82 --block-spacing-horizontal: calc(var(--spacing) * 1.5)
83 }
84}
85
86@media (min-width: 992px) {
87 article {
88 --block-spacing-horizontal: calc(var(--spacing) * 1.75)
89 }
90}
91
92@media (min-width: 1200px) {
93 article {
94 --block-spacing-horizontal: calc(var(--spacing) * 2)
95 }
96}
97
98a {
99 --text-decoration: none
100}
101
102h1, h2, h3, h4, h5, h6 {
103 --font-weight: 700
104}
105
106h1 {
107 --font-size: 2rem;
108 --typography-spacing-vertical: 3rem
109}
110
111h2 {
112 --font-size: 1.75rem;
113 --typography-spacing-vertical: 2.625rem
114}
115
116h3 {
117 --font-size: 1.5rem;
118 --typography-spacing-vertical: 2.25rem
119}
120
121h4 {
122 --font-size: 1.25rem;
123 --typography-spacing-vertical: 1.874rem
124}
125
126h5 {
127 --font-size: 1.125rem;
128 --typography-spacing-vertical: 1.6875rem
129}
130
131:root:not([data-theme=dark]), [data-theme=light] {
132 color-scheme: light;
133 --background-color: #fff;
134 --color: #415462;
135 --h1-color: #1b2832;
136 --h2-color: #24333e;
137 --h3-color: #2c3d49;
138 --h4-color: #374956;
139 --h5-color: #415462;
140 --h6-color: #4d606d;
141 --muted-color: #73828c;
142 --muted-border-color: #edf0f3;
143 --primary: #1095c1;
144 --primary-hover: #08769b;
145 --primary-focus: rgba(16, 149, 193, 0.125);
146 --primary-inverse: #fff;
147 --secondary: #596b78;
148 --secondary-hover: #415462;
149 --secondary-focus: rgba(89, 107, 120, 0.125);
150 --secondary-inverse: #fff;
151 --contrast: #1b2832;
152 --contrast-hover: #000;
153 --contrast-focus: rgba(89, 107, 120, 0.125);
154 --contrast-inverse: #fff;
155 --mark-background-color: #fff2ca;
156 --mark-color: #543a26;
157 --ins-color: #388e3c;
158 --del-color: #c62828;
159 --blockquote-border-color: var(--muted-border-color);
160 --blockquote-footer-color: var(--muted-color);
161 --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
162 --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
163 --form-element-background-color: transparent;
164 --form-element-border-color: #a2afb9;
165 --form-element-color: var(--color);
166 --form-element-placeholder-color: var(--muted-color);
167 --form-element-active-background-color: transparent;
168 --form-element-active-border-color: var(--primary);
169 --form-element-focus-color: var(--primary-focus);
170 --form-element-disabled-background-color: #d5dce2;
171 --form-element-disabled-border-color: #a2afb9;
172 --form-element-disabled-opacity: 0.5;
173 --form-element-invalid-border-color: #c62828;
174 --form-element-invalid-active-border-color: #d32f2f;
175 --form-element-invalid-focus-color: rgba(211, 47, 47, 0.125);
176 --form-element-valid-border-color: #388e3c;
177 --form-element-valid-active-border-color: #43a047;
178 --form-element-valid-focus-color: rgba(67, 160, 71, 0.125);
179 --switch-background-color: #bbc6ce;
180 --switch-color: var(--primary-inverse);
181 --switch-checked-background-color: var(--primary);
182 --range-border-color: #d5dce2;
183 --range-active-border-color: #bbc6ce;
184 --range-thumb-border-color: var(--background-color);
185 --range-thumb-color: var(--secondary);
186 --range-thumb-hover-color: var(--secondary-hover);
187 --range-thumb-active-color: var(--primary);
188 --table-border-color: var(--muted-border-color);
189 --table-row-stripped-background-color: #f6f8f9;
190 --code-background-color: #edf0f3;
191 --code-color: var(--muted-color);
192 --code-kbd-background-color: var(--contrast);
193 --code-kbd-color: var(--contrast-inverse);
194 --code-tag-color: #b34d80;
195 --code-property-color: #3d888f;
196 --code-value-color: #998866;
197 --code-comment-color: #a2afb9;
198 --accordion-border-color: var(--muted-border-color);
199 --accordion-close-summary-color: var(--color);
200 --accordion-open-summary-color: var(--muted-color);
201 --card-background-color: var(--background-color);
202 --card-border-color: var(--muted-border-color);
203 --card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
204 --card-sectionning-background-color: #fbfbfc;
205 --dropdown-background-color: #fbfbfc;
206 --dropdown-border-color: #e1e6eb;
207 --dropdown-box-shadow: var(--card-box-shadow);
208 --dropdown-color: var(--color);
209 --dropdown-hover-background-color: #edf0f3;
210 --modal-overlay-background-color: rgba(213, 220, 226, 0.8);
211 --progress-background-color: #d5dce2;
212 --progress-color: var(--primary);
213 --loading-spinner-opacity: 0.5;
214 --tooltip-background-color: var(--contrast);
215 --tooltip-color: var(--contrast-inverse);
216 --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
217 --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
218 --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
219 --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(255, 255, 255, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
220 --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
221 --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
222 --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
223 --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
224 --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
225 --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
226 --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")
227}
228
229*, ::after, ::before {
230 box-sizing: border-box;
231 background-repeat: no-repeat
232}
233
234::after, ::before {
235 text-decoration: inherit;
236 vertical-align: inherit
237}
238
239:where(:root) {
240 -webkit-tap-highlight-color: transparent;
241 -webkit-text-size-adjust: 100%;
242 -moz-text-size-adjust: 100%;
243 text-size-adjust: 100%;
244 text-rendering: optimizeLegibility;
245 background-color: var(--background-color);
246 color: var(--color);
247 font-weight: var(--font-weight);
248 font-size: var(--font-size);
249 line-height: var(--line-height);
250 font-family: var(--font-family);
251 overflow-wrap: break-word;
252 cursor: default;
253 -moz-tab-size: 4;
254 -o-tab-size: 4;
255 tab-size: 4
256}
257
258main {
259 display: block
260}
261
262body {
263 width: 100%;
264 margin: 0
265}
266
267body > footer, body > header, body > main {
268 width: 100%;
269 margin-right: auto;
270 margin-left: auto;
271 padding: 1rem
272}
273
274.container, .container-fluid {
275 width: 100%;
276 margin-right: auto;
277 margin-left: auto;
278 padding-right: var(--spacing);
279 padding-left: var(--spacing)
280}
281
282@media (min-width: 576px) {
283 .container {
284 max-width: 510px;
285 padding-right: 0;
286 padding-left: 0
287 }
288}
289
290@media (min-width: 768px) {
291 .container {
292 max-width: 700px
293 }
294}
295
296@media (min-width: 992px) {
297 .container {
298 max-width: 800px
299 }
300}
301
302section {
303 margin-bottom: var(--block-spacing-vertical)
304}
305
306.grid {
307 grid-column-gap: var(--grid-spacing-horizontal);
308 grid-row-gap: var(--grid-spacing-vertical);
309 display: grid;
310 grid-template-columns:1fr;
311 margin: 0
312}
313
314@media (min-width: 992px) {
315 .grid {
316 grid-template-columns:repeat(auto-fit, minmax(0%, 1fr))
317 }
318}
319
320.grid > * {
321 min-width: 0
322}
323
324b, strong {
325 font-weight: bolder
326}
327
328address, blockquote, dl, figure, form, ol, p, pre, table, ul {
329 margin-top: 0;
330 margin-bottom: var(--typography-spacing-vertical);
331 color: var(--color);
332 font-style: normal;
333 font-weight: var(--font-weight);
334 font-size: var(--font-size)
335}
336
337[role=link], a {
338 --color: var(--primary);
339 --background-color: transparent;
340 outline: 0;
341 background-color: var(--background-color);
342 color: var(--color);
343 -webkit-text-decoration: var(--text-decoration);
344 text-decoration: var(--text-decoration);
345 transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
346 transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
347 transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition)
348}
349
350[role=link]:is([aria-current],:hover,:active,:focus), a:is([aria-current],:hover,:active,:focus) {
351 --color: var(--primary-hover);
352 --text-decoration: underline
353}
354
355[role=link]:focus, a:focus {
356 --background-color: var(--primary-focus)
357}
358
359[role=link].secondary, a.secondary {
360 --color: var(--secondary)
361}
362
363[role=link].secondary:is([aria-current],:hover,:active,:focus), a.secondary:is([aria-current],:hover,:active,:focus) {
364 --color: var(--secondary-hover)
365}
366
367[role=link].secondary:focus, a.secondary:focus {
368 --background-color: var(--secondary-focus)
369}
370
371[role=link].contrast, a.contrast {
372 --color: var(--contrast)
373}
374
375[role=link].contrast:is([aria-current],:hover,:active,:focus), a.contrast:is([aria-current],:hover,:active,:focus) {
376 --color: var(--contrast-hover)
377}
378
379[role=link].contrast:focus, a.contrast:focus {
380 --background-color: var(--contrast-focus)
381}
382
383h1, h2, h3, h4, h5, h6 {
384 margin-top: 0;
385 margin-bottom: var(--typography-spacing-vertical);
386 color: var(--color);
387 font-weight: var(--font-weight);
388 font-size: var(--font-size);
389 font-family: var(--font-family)
390}
391
392h1 {
393 --color: var(--h1-color)
394}
395
396h2 {
397 --color: var(--h2-color)
398}
399
400h3 {
401 --color: var(--h3-color)
402}
403
404h4 {
405 --color: var(--h4-color)
406}
407
408h5 {
409 --color: var(--h5-color)
410}
411
412h6 {
413 --color: var(--h6-color)
414}
415
416:where(address,blockquote,dl,figure,form,ol,p,pre,table,ul) ~ :is(h1,h2,h3,h4,h5,h6) {
417 margin-top: var(--typography-spacing-vertical)
418}
419
420.headings, hgroup {
421 margin-bottom: var(--typography-spacing-vertical)
422}
423
424.headings > *, hgroup > * {
425 margin-bottom: 0
426}
427
428.headings > :last-child, hgroup > :last-child {
429 --color: var(--muted-color);
430 --font-weight: unset;
431 font-size: 1rem;
432 font-family: unset
433}
434
435p {
436 margin-bottom: var(--typography-spacing-vertical)
437}
438
439:where(dl,ol,ul) {
440 padding-right: 0;
441 padding-left: var(--spacing);
442 -webkit-padding-start: var(--spacing);
443 padding-inline-start: var(--spacing);
444 -webkit-padding-end: 0;
445 padding-inline-end: 0
446}
447
448:where(dl,ol,ul) li {
449 margin-bottom: calc(var(--typography-spacing-vertical) * .25)
450}
451
452:where(dl,ol,ul):is(dl,ol,ul) {
453 margin: calc(var(--typography-spacing-vertical) * .25) 0 0
454}
455
456ul li {
457 list-style: none
458}
459
460mark {
461 padding: 0.125rem 0.25rem;
462 background-color: var(--mark-background-color);
463 color: var(--mark-color);
464 vertical-align: baseline
465}
466
467abbr[title] {
468 border-bottom: 1px dotted;
469 text-decoration: none;
470 cursor: help
471}
472
473::-moz-selection {
474 background-color: var(--primary-focus)
475}
476
477::selection {
478 background-color: var(--primary-focus)
479}
480
481:where(audio,canvas,iframe,img,svg,video) {
482 vertical-align: middle
483}
484
485legend {
486 max-width: 100%;
487 padding: 0;
488 color: inherit;
489 white-space: normal
490}
491
492::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
493 height: auto
494}
495
496fieldset legend, label {
497 display: block;
498 margin-bottom: calc(var(--spacing) * .25);
499 font-weight: var(--form-label-font-weight, var(--font-weight))
500}
501
502[type=color]::-webkit-color-swatch-wrapper {
503 padding: 0
504}
505
506code, kbd, pre, samp {
507 font-size: 0.875em;
508 font-family: var(--font-family)
509}
510
511pre {
512 -ms-overflow-style: scrollbar;
513 overflow: auto
514}
515
516code, kbd, pre {
517 border-radius: var(--border-radius);
518 background: var(--code-background-color);
519 color: var(--code-color);
520 font-weight: var(--font-weight);
521 line-height: initial
522}
523
524code, kbd {
525 display: inline-block;
526 padding: 0.375rem 0.5rem
527}
528
529pre {
530 display: block;
531 margin-bottom: var(--spacing);
532 overflow-x: auto
533}
534
535pre > code {
536 display: block;
537 padding: var(--spacing);
538 background: 0 0;
539 font-size: 14px;
540 line-height: var(--line-height)
541}
542
543code b {
544 color: var(--code-tag-color);
545 font-weight: var(--font-weight)
546}
547
548code i {
549 color: var(--code-property-color);
550 font-style: normal
551}
552
553code u {
554 color: var(--code-value-color);
555 text-decoration: none
556}
557
558code em {
559 color: var(--code-comment-color);
560 font-style: normal
561}
562
563kbd {
564 background-color: var(--code-kbd-background-color);
565 color: var(--code-kbd-color);
566 vertical-align: baseline
567}
568
569hr {
570 height: 0;
571 border: 0;
572 border-top: 1px solid var(--muted-border-color);
573 color: inherit
574}
575
576[hidden], template {
577 display: none !important
578}
579
580article {
581 margin: var(--block-spacing-vertical) 0;
582 padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
583 border-radius: var(--border-radius);
584 background: var(--card-background-color);
585 box-shadow: var(--card-box-shadow)
586}
587
588article > footer, article > header {
589 margin-right: calc(var(--block-spacing-horizontal) * -1);
590 margin-left: calc(var(--block-spacing-horizontal) * -1);
591 padding: calc(var(--block-spacing-vertical) * .66) var(--block-spacing-horizontal);
592 background-color: var(--card-sectionning-background-color)
593}
594
595article > header {
596 margin-top: calc(var(--block-spacing-vertical) * -1);
597 margin-bottom: var(--block-spacing-vertical);
598 border-bottom: var(--border-width) solid var(--card-border-color)
599}
600
601article > footer {
602 margin-top: var(--block-spacing-vertical);
603 margin-bottom: calc(var(--block-spacing-vertical) * -1);
604 border-top: var(--border-width) solid var(--card-border-color)
605}
606
607:root {
608 --scrollbar-width: 0
609}
610
611dialog article {
612 max-height: calc(100vh - var(--spacing) * 2);
613 overflow: auto
614}
615
616@media (min-width: 576px) {
617 dialog article {
618 max-width: 510px
619 }
620}
621
622@media (min-width: 768px) {
623 dialog article {
624 max-width: 700px
625 }
626}
627
628dialog article > footer, dialog article > header {
629 padding: calc(var(--block-spacing-vertical) * .5) var(--block-spacing-horizontal)
630}
631
632dialog article > header .close {
633 margin: 0 0 0 var(--spacing);
634 float: right
635}
636
637dialog article > footer {
638 text-align: right
639}
640
641dialog article > footer [role=button] {
642 margin-bottom: 0
643}
644
645dialog article > footer [role=button]:not(:first-of-type) {
646 margin-left: calc(var(--spacing) * .5)
647}
648
649dialog article p:last-of-type {
650 margin: 0
651}
652
653dialog article .close {
654 display: block;
655 width: 1rem;
656 height: 1rem;
657 margin-top: calc(var(--block-spacing-vertical) * -.5);
658 margin-bottom: var(--typography-spacing-vertical);
659 margin-left: auto;
660 background-image: var(--icon-close);
661 background-position: center;
662 background-size: auto 1rem;
663 background-repeat: no-repeat;
664 opacity: 0.5;
665 transition: opacity var(--transition)
666}
667
668dialog article .close:is([aria-current],:hover,:active,:focus) {
669 opacity: 1
670}
671
672dialog:not([open]), dialog[open=false] {
673 display: none
674}
675
676.modal-is-open {
677 padding-right: var(--scrollbar-width, 0);
678 overflow: hidden;
679 pointer-events: none
680}
681
682.modal-is-open dialog {
683 pointer-events: auto
684}
685
686:where(.modal-is-opening,.modal-is-closing) dialog, :where(.modal-is-opening,.modal-is-closing) dialog > article {
687 -webkit-animation-duration: 0.2s;
688 animation-duration: 0.2s;
689 -webkit-animation-timing-function: ease-in-out;
690 animation-timing-function: ease-in-out;
691 -webkit-animation-fill-mode: both;
692 animation-fill-mode: both
693}
694
695:where(.modal-is-opening,.modal-is-closing) dialog {
696 -webkit-animation-duration: 0.8s;
697 animation-duration: 0.8s;
698 -webkit-animation-name: fadeIn;
699 animation-name: fadeIn
700}
701
702:where(.modal-is-opening,.modal-is-closing) dialog > article {
703 -webkit-animation-delay: 0.2s;
704 animation-delay: 0.2s;
705 -webkit-animation-name: slideInDown;
706 animation-name: slideInDown
707}
708
709.modal-is-closing dialog, .modal-is-closing dialog > article {
710 -webkit-animation-delay: 0s;
711 animation-delay: 0s;
712 animation-direction: reverse
713}
714
715:where(nav li)::before {
716 float: left;
717 content: "​"
718}
719
720nav, nav ul {
721 display: flex
722}
723
724nav {
725 justify-content: space-between
726}
727
728nav ol, nav ul {
729 align-items: center;
730 margin-bottom: 0;
731 padding: 0;
732 list-style: none
733}
734
735nav ol:first-of-type, nav ul:first-of-type {
736 margin-left: calc(var(--nav-element-spacing-horizontal) * -1)
737}
738
739nav ol:last-of-type, nav ul:last-of-type {
740 margin-right: calc(var(--nav-element-spacing-horizontal) * -1)
741}
742
743nav li {
744 display: inline-block;
745 margin: 0;
746 padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal)
747}
748
749nav li > * {
750 --spacing: 0
751}
752
753nav:where(a,[role=link]) {
754 display: inline-block;
755 margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
756 padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
757 border-radius: var(--border-radius);
758 text-decoration: none
759}
760
761nav:where(a,[role=link]):is([aria-current],:hover,:active,:focus) {
762 text-decoration: none
763}
764
765nav [role=button] {
766 margin-right: inherit;
767 margin-left: inherit;
768 padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal)
769}
770
771details[role=list], li[role=list] {
772 position: relative
773}
774
775details[role=list] summary + ul, li[role=list] > ul {
776 display: flex;
777 z-index: 99;
778 position: absolute;
779 top: auto;
780 right: 0;
781 left: 0;
782 flex-direction: column;
783 margin: 0;
784 padding: 0;
785 border: var(--border-width) solid var(--dropdown-border-color);
786 border-radius: var(--border-radius);
787 border-top-right-radius: 0;
788 border-top-left-radius: 0;
789 background-color: var(--dropdown-background-color);
790 box-shadow: var(--card-box-shadow);
791 color: var(--dropdown-color);
792 white-space: nowrap
793}
794
795details[role=list] summary + ul li, li[role=list] > ul li {
796 width: 100%;
797 margin-bottom: 0;
798 padding: calc(var(--form-element-spacing-vertical) * .5) var(--form-element-spacing-horizontal);
799 list-style: none
800}
801
802details[role=list] summary + ul li:first-of-type, li[role=list] > ul li:first-of-type {
803 margin-top: calc(var(--form-element-spacing-vertical) * .5)
804}
805
806details[role=list] summary + ul li:last-of-type, li[role=list] > ul li:last-of-type {
807 margin-bottom: calc(var(--form-element-spacing-vertical) * .5)
808}
809
810details[role=list] summary + ul li a, li[role=list] > ul li a {
811 display: block;
812 margin: calc(var(--form-element-spacing-vertical) * -.5) calc(var(--form-element-spacing-horizontal) * -1);
813 padding: calc(var(--form-element-spacing-vertical) * .5) var(--form-element-spacing-horizontal);
814 overflow: hidden;
815 color: var(--dropdown-color);
816 text-decoration: none;
817 text-overflow: ellipsis
818}
819
820details[role=list] summary + ul li a:hover, li[role=list] > ul li a:hover {
821 background-color: var(--dropdown-hover-background-color)
822}
823
824details[role=list] summary::after, li[role=list] > a::after {
825 display: block;
826 width: 1rem;
827 height: calc(1rem * var(--line-height, 1.5));
828 -webkit-margin-start: 0.5rem;
829 margin-inline-start: 0.5rem;
830 float: right;
831 transform: rotate(0);
832 background-position: right center;
833 background-size: 1rem auto;
834 background-repeat: no-repeat;
835 content: ""
836}
837
838nav details[role=list] summary + ul, nav li[role=list] > ul {
839 min-width: -webkit-fit-content;
840 min-width: -moz-fit-content;
841 min-width: fit-content;
842 border-radius: var(--border-radius)
843}
844
845nav details[role=list] summary + ul li a, nav li[role=list] > ul li a {
846 border-radius: 0
847}
848
849nav details[role=list] summary, nav details[role=list] summary:not([role]) {
850 height: auto;
851 padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal)
852}
853
854nav details[role=list][open] summary {
855 border-radius: var(--border-radius)
856}
857
858nav details[role=list] summary + ul {
859 margin-top: var(--outline-width);
860 -webkit-margin-start: 0;
861 margin-inline-start: 0
862}
863
864nav details[role=list] summary[role=link] {
865 margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
866 line-height: var(--line-height)
867}
868
869nav details[role=list] summary[role=link] + ul {
870 margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
871 -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
872 margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1)
873}
874
875li[role=list] a:active ~ ul, li[role=list] a:focus ~ ul, li[role=list]:hover > ul {
876 display: flex
877}
878
879li[role=list] > ul {
880 display: none;
881 margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
882 -webkit-margin-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
883 margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal))
884}
885
886li[role=list] > a::after {
887 background-image: var(--icon-chevron)
888}