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