[Otage] fix black pawn promoting with white pawn in hostage
[vchess.git] / client / public / mini-custom.css
1 @charset "UTF-8";
2 /*
3 Flavor name: Default (mini-default)
4 Author: Angelos Chalaris (chalarangelo@gmail.com)
5 Maintainers: Angelos Chalaris
6 mini.css version: v3.0.1
7 */
8 /*
9 Browsers resets and base typography.
10 */
11 /* Core module CSS variable definitions */
12 :root {
13 --fore-color: #111;
14 --secondary-fore-color: #444;
15 --back-color: #f8f8f8;
16 --secondary-back-color: #f0f0f0;
17 --blockquote-color: #f57c00;
18 --pre-color: #1565c0;
19 --border-color: #aaa;
20 --secondary-border-color: #ddd;
21 --heading-ratio: 1.19;
22 --universal-margin: 0.5rem;
23 --universal-padding: 0.5rem;
24 --universal-border-radius: 0.125rem;
25 --a-link-color: #0277bd;
26 --a-visited-color: #01579b;
27 }
28
29 html {
30 font-size: 16px;
31 }
32
33 a, b, del, em, i, ins, q, span, strong, u {
34 font-size: 1em;
35 }
36
37 html, * {
38 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;
39 line-height: 1.5;
40 -webkit-text-size-adjust: 100%;
41 }
42
43 * {
44 font-size: 1rem;
45 }
46
47 body {
48 margin: 0;
49 color: var(--fore-color);
50 background: var(--back-color);
51 }
52
53 details {
54 display: block;
55 }
56
57 summary {
58 display: list-item;
59 }
60
61 abbr[title] {
62 border-bottom: none;
63 text-decoration: underline dotted;
64 }
65
66 input {
67 overflow: visible;
68 }
69
70 img {
71 max-width: 100%;
72 height: auto;
73 }
74
75 h1, h2, h3, h4, h5, h6 {
76 line-height: 1.2;
77 margin: calc(1.5 * var(--universal-margin)) var(--universal-margin);
78 font-weight: 500;
79 }
80
81 h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
82 color: var(--secondary-fore-color);
83 display: block;
84 margin-top: -0.25rem;
85 }
86
87 h1 {
88 font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
89 }
90
91 h2 {
92 font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
93 }
94
95 h3 {
96 font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio));
97 }
98
99 h4 {
100 font-size: calc(1rem * var(--heading-ratio));
101 }
102
103 h5 {
104 font-size: 1rem;
105 }
106
107 h6 {
108 font-size: calc(1rem / var(--heading-ratio));
109 }
110
111 p {
112 margin: var(--universal-margin);
113 }
114
115 ol, ul {
116 margin: var(--universal-margin);
117 padding-left: calc(2 * var(--universal-margin));
118 }
119
120 b, strong {
121 font-weight: 700;
122 }
123
124 hr {
125 box-sizing: content-box;
126 border: 0;
127 line-height: 1.25em;
128 margin: var(--universal-margin);
129 height: 0.0625rem;
130 background: linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent);
131 }
132
133 blockquote {
134 display: block;
135 position: relative;
136 font-style: italic;
137 color: var(--secondary-fore-color);
138 margin: var(--universal-margin);
139 padding: calc(3 * var(--universal-padding));
140 border: 0.0625rem solid var(--secondary-border-color);
141 border-left: 0.375rem solid var(--blockquote-color);
142 border-radius: 0 var(--universal-border-radius) var(--universal-border-radius) 0;
143 }
144
145 blockquote:before {
146 position: absolute;
147 top: calc(0rem - var(--universal-padding));
148 left: 0;
149 font-family: sans-serif;
150 font-size: 3rem;
151 font-weight: 700;
152 content: "\201c";
153 color: var(--blockquote-color);
154 }
155
156 blockquote[cite]:after {
157 font-style: normal;
158 font-size: 0.75em;
159 font-weight: 700;
160 content: "\a— " attr(cite);
161 white-space: pre;
162 }
163
164 code, kbd, pre, samp {
165 font-family: Menlo, Consolas, monospace;
166 font-size: 0.85em;
167 }
168
169 code {
170 background: var(--secondary-back-color);
171 border-radius: var(--universal-border-radius);
172 padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);
173 }
174
175 kbd {
176 background: var(--fore-color);
177 color: var(--back-color);
178 border-radius: var(--universal-border-radius);
179 padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);
180 }
181
182 pre {
183 overflow: auto;
184 background: var(--secondary-back-color);
185 padding: calc(1.5 * var(--universal-padding));
186 margin: var(--universal-margin);
187 border: 0.0625rem solid var(--secondary-border-color);
188 border-left: 0.25rem solid var(--pre-color);
189 border-radius: 0 var(--universal-border-radius) var(--universal-border-radius) 0;
190 }
191
192 sup, sub, code, kbd {
193 line-height: 0;
194 position: relative;
195 vertical-align: baseline;
196 }
197
198 small, sup, sub, figcaption {
199 font-size: 0.75em;
200 }
201
202 sup {
203 top: -0.5em;
204 }
205
206 sub {
207 bottom: -0.25em;
208 }
209
210 figure {
211 margin: var(--universal-margin);
212 }
213
214 figcaption {
215 color: var(--secondary-fore-color);
216 }
217
218 a {
219 text-decoration: none;
220 }
221
222 a:link {
223 color: var(--a-link-color);
224 }
225
226 a:visited {
227 color: var(--a-visited-color);
228 }
229
230 a:hover, a:focus {
231 text-decoration: underline;
232 }
233
234 /*
235 Definitions for the grid system, cards and containers.
236 */
237 .container {
238 margin: 0 auto;
239 padding: 0 calc(1.5 * var(--universal-padding));
240 }
241
242 .row {
243 box-sizing: border-box;
244 display: flex;
245 flex: 0 1 auto;
246 flex-flow: row wrap;
247 }
248
249 .col-sm,
250 [class^='col-sm-'],
251 [class^='col-sm-offset-'],
252 .row[class*='cols-sm-'] > * {
253 box-sizing: border-box;
254 flex: 0 0 auto;
255 padding: 0 calc(var(--universal-padding) / 2);
256 }
257
258 .col-sm,
259 .row.cols-sm > * {
260 max-width: 100%;
261 flex-grow: 1;
262 flex-basis: 0;
263 }
264
265 .col-sm-1,
266 .row.cols-sm-1 > * {
267 max-width: 8.33333%;
268 flex-basis: 8.33333%;
269 }
270
271 .col-sm-offset-0 {
272 margin-left: 0;
273 }
274
275 .col-sm-2,
276 .row.cols-sm-2 > * {
277 max-width: 16.66667%;
278 flex-basis: 16.66667%;
279 }
280
281 .col-sm-offset-1 {
282 margin-left: 8.33333%;
283 }
284
285 .col-sm-3,
286 .row.cols-sm-3 > * {
287 max-width: 25%;
288 flex-basis: 25%;
289 }
290
291 .col-sm-offset-2 {
292 margin-left: 16.66667%;
293 }
294
295 .col-sm-4,
296 .row.cols-sm-4 > * {
297 max-width: 33.33333%;
298 flex-basis: 33.33333%;
299 }
300
301 .col-sm-offset-3 {
302 margin-left: 25%;
303 }
304
305 .col-sm-5,
306 .row.cols-sm-5 > * {
307 max-width: 41.66667%;
308 flex-basis: 41.66667%;
309 }
310
311 .col-sm-offset-4 {
312 margin-left: 33.33333%;
313 }
314
315 .col-sm-6,
316 .row.cols-sm-6 > * {
317 max-width: 50%;
318 flex-basis: 50%;
319 }
320
321 .col-sm-offset-5 {
322 margin-left: 41.66667%;
323 }
324
325 .col-sm-7,
326 .row.cols-sm-7 > * {
327 max-width: 58.33333%;
328 flex-basis: 58.33333%;
329 }
330
331 .col-sm-offset-6 {
332 margin-left: 50%;
333 }
334
335 .col-sm-8,
336 .row.cols-sm-8 > * {
337 max-width: 66.66667%;
338 flex-basis: 66.66667%;
339 }
340
341 .col-sm-offset-7 {
342 margin-left: 58.33333%;
343 }
344
345 .col-sm-9,
346 .row.cols-sm-9 > * {
347 max-width: 75%;
348 flex-basis: 75%;
349 }
350
351 .col-sm-offset-8 {
352 margin-left: 66.66667%;
353 }
354
355 .col-sm-10,
356 .row.cols-sm-10 > * {
357 max-width: 83.33333%;
358 flex-basis: 83.33333%;
359 }
360
361 .col-sm-offset-9 {
362 margin-left: 75%;
363 }
364
365 .col-sm-11,
366 .row.cols-sm-11 > * {
367 max-width: 91.66667%;
368 flex-basis: 91.66667%;
369 }
370
371 .col-sm-offset-10 {
372 margin-left: 83.33333%;
373 }
374
375 .col-sm-12,
376 .row.cols-sm-12 > * {
377 max-width: 100%;
378 flex-basis: 100%;
379 }
380
381 .col-sm-offset-11 {
382 margin-left: 91.66667%;
383 }
384
385 .col-sm-normal {
386 order: initial;
387 }
388
389 .col-sm-first {
390 order: -999;
391 }
392
393 .col-sm-last {
394 order: 999;
395 }
396
397 @media screen and (min-width: 768px) {
398 .col-md,
399 [class^='col-md-'],
400 [class^='col-md-offset-'],
401 .row[class*='cols-md-'] > * {
402 box-sizing: border-box;
403 flex: 0 0 auto;
404 padding: 0 calc(var(--universal-padding) / 2);
405 }
406 .col-md,
407 .row.cols-md > * {
408 max-width: 100%;
409 flex-grow: 1;
410 flex-basis: 0;
411 }
412 .col-md-1,
413 .row.cols-md-1 > * {
414 max-width: 8.33333%;
415 flex-basis: 8.33333%;
416 }
417 .col-md-offset-0 {
418 margin-left: 0;
419 }
420 .col-md-2,
421 .row.cols-md-2 > * {
422 max-width: 16.66667%;
423 flex-basis: 16.66667%;
424 }
425 .col-md-offset-1 {
426 margin-left: 8.33333%;
427 }
428 .col-md-3,
429 .row.cols-md-3 > * {
430 max-width: 25%;
431 flex-basis: 25%;
432 }
433 .col-md-offset-2 {
434 margin-left: 16.66667%;
435 }
436 .col-md-4,
437 .row.cols-md-4 > * {
438 max-width: 33.33333%;
439 flex-basis: 33.33333%;
440 }
441 .col-md-offset-3 {
442 margin-left: 25%;
443 }
444 .col-md-5,
445 .row.cols-md-5 > * {
446 max-width: 41.66667%;
447 flex-basis: 41.66667%;
448 }
449 .col-md-offset-4 {
450 margin-left: 33.33333%;
451 }
452 .col-md-6,
453 .row.cols-md-6 > * {
454 max-width: 50%;
455 flex-basis: 50%;
456 }
457 .col-md-offset-5 {
458 margin-left: 41.66667%;
459 }
460 .col-md-7,
461 .row.cols-md-7 > * {
462 max-width: 58.33333%;
463 flex-basis: 58.33333%;
464 }
465 .col-md-offset-6 {
466 margin-left: 50%;
467 }
468 .col-md-8,
469 .row.cols-md-8 > * {
470 max-width: 66.66667%;
471 flex-basis: 66.66667%;
472 }
473 .col-md-offset-7 {
474 margin-left: 58.33333%;
475 }
476 .col-md-9,
477 .row.cols-md-9 > * {
478 max-width: 75%;
479 flex-basis: 75%;
480 }
481 .col-md-offset-8 {
482 margin-left: 66.66667%;
483 }
484 .col-md-10,
485 .row.cols-md-10 > * {
486 max-width: 83.33333%;
487 flex-basis: 83.33333%;
488 }
489 .col-md-offset-9 {
490 margin-left: 75%;
491 }
492 .col-md-11,
493 .row.cols-md-11 > * {
494 max-width: 91.66667%;
495 flex-basis: 91.66667%;
496 }
497 .col-md-offset-10 {
498 margin-left: 83.33333%;
499 }
500 .col-md-12,
501 .row.cols-md-12 > * {
502 max-width: 100%;
503 flex-basis: 100%;
504 }
505 .col-md-offset-11 {
506 margin-left: 91.66667%;
507 }
508 .col-md-normal {
509 order: initial;
510 }
511 .col-md-first {
512 order: -999;
513 }
514 .col-md-last {
515 order: 999;
516 }
517 }
518
519 @media screen and (min-width: 1280px) {
520 .col-lg,
521 [class^='col-lg-'],
522 [class^='col-lg-offset-'],
523 .row[class*='cols-lg-'] > * {
524 box-sizing: border-box;
525 flex: 0 0 auto;
526 padding: 0 calc(var(--universal-padding) / 2);
527 }
528 .col-lg,
529 .row.cols-lg > * {
530 max-width: 100%;
531 flex-grow: 1;
532 flex-basis: 0;
533 }
534 .col-lg-1,
535 .row.cols-lg-1 > * {
536 max-width: 8.33333%;
537 flex-basis: 8.33333%;
538 }
539 .col-lg-offset-0 {
540 margin-left: 0;
541 }
542 .col-lg-2,
543 .row.cols-lg-2 > * {
544 max-width: 16.66667%;
545 flex-basis: 16.66667%;
546 }
547 .col-lg-offset-1 {
548 margin-left: 8.33333%;
549 }
550 .col-lg-3,
551 .row.cols-lg-3 > * {
552 max-width: 25%;
553 flex-basis: 25%;
554 }
555 .col-lg-offset-2 {
556 margin-left: 16.66667%;
557 }
558 .col-lg-4,
559 .row.cols-lg-4 > * {
560 max-width: 33.33333%;
561 flex-basis: 33.33333%;
562 }
563 .col-lg-offset-3 {
564 margin-left: 25%;
565 }
566 .col-lg-5,
567 .row.cols-lg-5 > * {
568 max-width: 41.66667%;
569 flex-basis: 41.66667%;
570 }
571 .col-lg-offset-4 {
572 margin-left: 33.33333%;
573 }
574 .col-lg-6,
575 .row.cols-lg-6 > * {
576 max-width: 50%;
577 flex-basis: 50%;
578 }
579 .col-lg-offset-5 {
580 margin-left: 41.66667%;
581 }
582 .col-lg-7,
583 .row.cols-lg-7 > * {
584 max-width: 58.33333%;
585 flex-basis: 58.33333%;
586 }
587 .col-lg-offset-6 {
588 margin-left: 50%;
589 }
590 .col-lg-8,
591 .row.cols-lg-8 > * {
592 max-width: 66.66667%;
593 flex-basis: 66.66667%;
594 }
595 .col-lg-offset-7 {
596 margin-left: 58.33333%;
597 }
598 .col-lg-9,
599 .row.cols-lg-9 > * {
600 max-width: 75%;
601 flex-basis: 75%;
602 }
603 .col-lg-offset-8 {
604 margin-left: 66.66667%;
605 }
606 .col-lg-10,
607 .row.cols-lg-10 > * {
608 max-width: 83.33333%;
609 flex-basis: 83.33333%;
610 }
611 .col-lg-offset-9 {
612 margin-left: 75%;
613 }
614 .col-lg-11,
615 .row.cols-lg-11 > * {
616 max-width: 91.66667%;
617 flex-basis: 91.66667%;
618 }
619 .col-lg-offset-10 {
620 margin-left: 83.33333%;
621 }
622 .col-lg-12,
623 .row.cols-lg-12 > * {
624 max-width: 100%;
625 flex-basis: 100%;
626 }
627 .col-lg-offset-11 {
628 margin-left: 91.66667%;
629 }
630 .col-lg-normal {
631 order: initial;
632 }
633 .col-lg-first {
634 order: -999;
635 }
636 .col-lg-last {
637 order: 999;
638 }
639 }
640
641 /* Card component CSS variable definitions */
642 :root {
643 --card-back-color: #f8f8f8;
644 --card-fore-color: #111;
645 --card-border-color: #ddd;
646 }
647
648 .card {
649 display: flex;
650 flex-direction: column;
651 justify-content: space-between;
652 align-self: center;
653 position: relative;
654 width: 100%;
655 background: var(--card-back-color);
656 color: var(--card-fore-color);
657 border: 0.0625rem solid var(--card-border-color);
658 border-radius: var(--universal-border-radius);
659 margin: var(--universal-margin);
660 overflow: hidden;
661 }
662
663 @media screen and (min-width: 320px) {
664 .card {
665 max-width: 320px;
666 }
667 }
668
669 .card > .section {
670 background: var(--card-back-color);
671 color: var(--card-fore-color);
672 box-sizing: border-box;
673 margin: 0;
674 border: 0;
675 border-radius: 0;
676 border-bottom: 0.0625rem solid var(--card-border-color);
677 padding: var(--universal-padding);
678 width: 100%;
679 }
680
681 .card > .section.media {
682 height: 200px;
683 padding: 0;
684 -o-object-fit: cover;
685 object-fit: cover;
686 }
687
688 .card > .section:last-child {
689 border-bottom: 0;
690 }
691
692 /*
693 Custom elements for card elements.
694 */
695 @media screen and (min-width: 240px) {
696 .card.small {
697 max-width: 240px;
698 }
699 }
700
701 @media screen and (min-width: 480px) {
702 .card.large {
703 max-width: 480px;
704 }
705 }
706
707 .card.fluid {
708 max-width: 100%;
709 width: auto;
710 }
711
712 .card.warning {
713 --card-back-color: #ffca28;
714 --card-border-color: #e8b825;
715 }
716
717 .card.error {
718 --card-back-color: #b71c1c;
719 --card-fore-color: #f8f8f8;
720 --card-border-color: #a71a1a;
721 }
722
723 .card > .section.dark {
724 --card-back-color: #e0e0e0;
725 }
726
727 .card > .section.double-padded {
728 padding: calc(1.5 * var(--universal-padding));
729 }
730
731 /*
732 Definitions for forms and input elements.
733 */
734 /* Input_control module CSS variable definitions */
735 :root {
736 --form-back-color: #f0f0f0;
737 --form-fore-color: #111;
738 --form-border-color: #ddd;
739 --input-back-color: #f8f8f8;
740 --input-fore-color: #111;
741 --input-border-color: #ddd;
742 --input-focus-color: #0288d1;
743 --input-invalid-color: #d32f2f;
744 --button-back-color: #e2e2e2;
745 --button-hover-back-color: #dcdcdc;
746 --button-fore-color: #212121;
747 --button-border-color: transparent;
748 --button-hover-border-color: transparent;
749 --button-group-border-color: rgba(124, 124, 124, 0.54);
750 }
751
752 form {
753 background: var(--form-back-color);
754 color: var(--form-fore-color);
755 border: 0.0625rem solid var(--form-border-color);
756 border-radius: var(--universal-border-radius);
757 margin: var(--universal-margin);
758 padding: calc(2 * var(--universal-padding)) var(--universal-padding);
759 }
760
761 fieldset {
762 border: 0.0625rem solid var(--form-border-color);
763 border-radius: var(--universal-border-radius);
764 margin: calc(var(--universal-margin) / 4);
765 padding: var(--universal-padding);
766 }
767
768 legend {
769 box-sizing: border-box;
770 display: table;
771 max-width: 100%;
772 white-space: normal;
773 font-weight: 700;
774 padding: calc(var(--universal-padding) / 2);
775 }
776
777 label {
778 padding: calc(var(--universal-padding) / 2) var(--universal-padding);
779 }
780
781 .input-group {
782 display: inline-block;
783 }
784
785 .input-group.fluid {
786 display: flex;
787 align-items: center;
788 justify-content: center;
789 }
790
791 .input-group.fluid > input {
792 max-width: 100%;
793 flex-grow: 1;
794 flex-basis: 0px;
795 }
796
797 .input-group.vertical {
798 display: flex;
799 align-items: stretch;
800 flex-direction: column;
801 }
802
803 .input-group.vertical > input {
804 max-width: 100%;
805 flex-grow: 1;
806 flex-basis: 0px;
807 }
808
809 [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
810 height: auto;
811 }
812
813 [type="search"] {
814 -webkit-appearance: textfield;
815 outline-offset: -2px;
816 }
817
818 [type="search"]::-webkit-search-cancel-button,
819 [type="search"]::-webkit-search-decoration {
820 -webkit-appearance: none;
821 }
822
823 input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
824 [type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select {
825 box-sizing: border-box;
826 background: var(--input-back-color);
827 color: var(--input-fore-color);
828 border: 0.0625rem solid var(--input-border-color);
829 border-radius: var(--universal-border-radius);
830 margin: calc(var(--universal-margin) / 2);
831 padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
832 }
833
834 input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus, textarea:hover, textarea:focus, select:hover, select:focus {
835 border-color: var(--input-focus-color);
836 box-shadow: none;
837 }
838
839 input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid, input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid, textarea:invalid, textarea:focus:invalid, select:invalid, select:focus:invalid {
840 border-color: var(--input-invalid-color);
841 box-shadow: none;
842 }
843
844 input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], textarea[readonly], select[readonly] {
845 background: var(--secondary-back-color);
846 }
847
848 select {
849 max-width: 100%;
850 }
851
852 option {
853 overflow: hidden;
854 text-overflow: ellipsis;
855 }
856
857 [type="checkbox"], [type="radio"] {
858 -webkit-appearance: none;
859 -moz-appearance: none;
860 appearance: none;
861 position: relative;
862 height: calc(1rem + var(--universal-padding) / 2);
863 width: calc(1rem + var(--universal-padding) / 2);
864 vertical-align: text-bottom;
865 padding: 0;
866 flex-basis: calc(1rem + var(--universal-padding) / 2) !important;
867 flex-grow: 0 !important;
868 }
869
870 [type="checkbox"]:checked:before, [type="radio"]:checked:before {
871 position: absolute;
872 }
873
874 [type="checkbox"]:checked:before {
875 content: '\2713';
876 font-family: sans-serif;
877 font-size: calc(1rem + var(--universal-padding) / 2);
878 top: calc(0rem - var(--universal-padding));
879 left: calc(var(--universal-padding) / 4);
880 }
881
882 [type="radio"] {
883 border-radius: 100%;
884 }
885
886 [type="radio"]:checked:before {
887 border-radius: 100%;
888 content: '';
889 top: calc(0.0625rem + var(--universal-padding) / 2);
890 left: calc(0.0625rem + var(--universal-padding) / 2);
891 background: var(--input-fore-color);
892 width: 0.5rem;
893 height: 0.5rem;
894 }
895
896 :placeholder-shown {
897 color: var(--input-fore-color);
898 }
899
900 ::-ms-placeholder {
901 color: var(--input-fore-color);
902 opacity: 0.54;
903 }
904
905 button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
906 border-style: none;
907 padding: 0;
908 }
909
910 button, html [type="button"], [type="reset"], [type="submit"] {
911 -webkit-appearance: button;
912 }
913
914 button {
915 overflow: visible;
916 text-transform: none;
917 }
918
919 button, [type="button"], [type="submit"], [type="reset"],
920 a.button, label.button, .button,
921 a[role="button"], label[role="button"], [role="button"] {
922 display: inline-block;
923 background: var(--button-back-color);
924 color: var(--button-fore-color);
925 border: 0.0625rem solid var(--button-border-color);
926 border-radius: var(--universal-border-radius);
927 padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
928 margin: var(--universal-margin);
929 text-decoration: none;
930 cursor: pointer;
931 transition: background 0.3s;
932 }
933
934 button:hover, button:focus, [type="button"]:hover, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:focus,
935 a.button:hover,
936 a.button:focus, label.button:hover, label.button:focus, .button:hover, .button:focus,
937 a[role="button"]:hover,
938 a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:focus, [role="button"]:hover, [role="button"]:focus {
939 background: var(--button-hover-back-color);
940 border-color: var(--button-hover-border-color);
941 }
942
943 input:disabled, input[disabled], textarea:disabled, textarea[disabled], select:disabled, select[disabled], button:disabled, button[disabled], .button:disabled, .button[disabled], [role="button"]:disabled, [role="button"][disabled] {
944 cursor: not-allowed;
945 opacity: 0.75;
946 }
947
948 .button-group {
949 display: flex;
950 border: 0.0625rem solid var(--button-group-border-color);
951 border-radius: var(--universal-border-radius);
952 margin: var(--universal-margin);
953 }
954
955 .button-group > button, .button-group [type="button"], .button-group > [type="submit"], .button-group > [type="reset"],
956 .button-group > .button, .button-group > [role="button"] {
957 margin: 0;
958 max-width: 100%;
959 flex: 1 1 auto;
960 text-align: center;
961 border: 0;
962 border-radius: 0;
963 box-shadow: none;
964 }
965
966 .button-group > :not(:first-child) {
967 border-left: 0.0625rem solid var(--button-group-border-color);
968 }
969
970 /*
971 Custom elements for forms and input elements.
972 */
973 button.primary, [type="button"].primary, [type="submit"].primary, [type="reset"].primary, .button.primary, [role="button"].primary {
974 --button-back-color: #1976d2;
975 --button-fore-color: #f8f8f8;
976 }
977
978 button.primary:hover, button.primary:focus, [type="button"].primary:hover, [type="button"].primary:focus, [type="submit"].primary:hover, [type="submit"].primary:focus, [type="reset"].primary:hover, [type="reset"].primary:focus, .button.primary:hover, .button.primary:focus, [role="button"].primary:hover, [role="button"].primary:focus {
979 --button-hover-back-color: #1565c0;
980 }
981
982 button.secondary, [type="button"].secondary, [type="submit"].secondary, [type="reset"].secondary, .button.secondary, [role="button"].secondary {
983 --button-back-color: #d32f2f;
984 --button-fore-color: #f8f8f8;
985 }
986
987 button.secondary:hover, button.secondary:focus, [type="button"].secondary:hover, [type="button"].secondary:focus, [type="submit"].secondary:hover, [type="submit"].secondary:focus, [type="reset"].secondary:hover, [type="reset"].secondary:focus, .button.secondary:hover, .button.secondary:focus, [role="button"].secondary:hover, [role="button"].secondary:focus {
988 --button-hover-back-color: #c62828;
989 }
990
991 button.tertiary, [type="button"].tertiary, [type="submit"].tertiary, [type="reset"].tertiary, .button.tertiary, [role="button"].tertiary {
992 --button-back-color: #308732;
993 --button-fore-color: #f8f8f8;
994 }
995
996 button.tertiary:hover, button.tertiary:focus, [type="button"].tertiary:hover, [type="button"].tertiary:focus, [type="submit"].tertiary:hover, [type="submit"].tertiary:focus, [type="reset"].tertiary:hover, [type="reset"].tertiary:focus, .button.tertiary:hover, .button.tertiary:focus, [role="button"].tertiary:hover, [role="button"].tertiary:focus {
997 --button-hover-back-color: #277529;
998 }
999
1000 button.inverse, [type="button"].inverse, [type="submit"].inverse, [type="reset"].inverse, .button.inverse, [role="button"].inverse {
1001 --button-back-color: #212121;
1002 --button-fore-color: #f8f8f8;
1003 }
1004
1005 button.inverse:hover, button.inverse:focus, [type="button"].inverse:hover, [type="button"].inverse:focus, [type="submit"].inverse:hover, [type="submit"].inverse:focus, [type="reset"].inverse:hover, [type="reset"].inverse:focus, .button.inverse:hover, .button.inverse:focus, [role="button"].inverse:hover, [role="button"].inverse:focus {
1006 --button-hover-back-color: #111;
1007 }
1008
1009 button.small, [type="button"].small, [type="submit"].small, [type="reset"].small, .button.small, [role="button"].small {
1010 padding: calc(0.5 * var(--universal-padding)) calc(0.75 * var(--universal-padding));
1011 margin: var(--universal-margin);
1012 }
1013
1014 button.large, [type="button"].large, [type="submit"].large, [type="reset"].large, .button.large, [role="button"].large {
1015 padding: calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding));
1016 margin: var(--universal-margin);
1017 }
1018
1019 /*
1020 Definitions for navigation elements.
1021 */
1022 /* Navigation module CSS variable definitions */
1023 :root {
1024 --header-back-color: #f8f8f8;
1025 --header-hover-back-color: #f0f0f0;
1026 --header-fore-color: #444;
1027 --header-border-color: #ddd;
1028 --nav-back-color: #f8f8f8;
1029 --nav-hover-back-color: #f0f0f0;
1030 --nav-fore-color: #444;
1031 --nav-border-color: #ddd;
1032 --nav-link-color: #0277bd;
1033 --footer-fore-color: #444;
1034 --footer-back-color: #f8f8f8;
1035 --footer-border-color: #ddd;
1036 --footer-link-color: #0277bd;
1037 --drawer-back-color: #f8f8f8;
1038 --drawer-hover-back-color: #f0f0f0;
1039 --drawer-border-color: #ddd;
1040 --drawer-close-color: #444;
1041 }
1042
1043 header {
1044 height: 3.1875rem;
1045 background: var(--header-back-color);
1046 color: var(--header-fore-color);
1047 border-bottom: 0.0625rem solid var(--header-border-color);
1048 padding: calc(var(--universal-padding) / 4) 0;
1049 white-space: nowrap;
1050 overflow-x: auto;
1051 overflow-y: hidden;
1052 }
1053
1054 header.row {
1055 box-sizing: content-box;
1056 }
1057
1058 header .logo {
1059 color: var(--header-fore-color);
1060 font-size: 1.75rem;
1061 padding: var(--universal-padding) calc(2 * var(--universal-padding));
1062 text-decoration: none;
1063 }
1064
1065 header button, header [type="button"], header .button, header [role="button"] {
1066 box-sizing: border-box;
1067 position: relative;
1068 top: calc(0rem - var(--universal-padding) / 4);
1069 height: calc(3.1875rem + var(--universal-padding) / 2);
1070 background: var(--header-back-color);
1071 line-height: calc(3.1875rem - var(--universal-padding) * 1.5);
1072 text-align: center;
1073 color: var(--header-fore-color);
1074 border: 0;
1075 border-radius: 0;
1076 margin: 0;
1077 text-transform: uppercase;
1078 }
1079
1080 header button:hover, header button:focus, header [type="button"]:hover, header [type="button"]:focus, header .button:hover, header .button:focus, header [role="button"]:hover, header [role="button"]:focus {
1081 background: var(--header-hover-back-color);
1082 }
1083
1084 nav {
1085 background: var(--nav-back-color);
1086 color: var(--nav-fore-color);
1087 border: 0.0625rem solid var(--nav-border-color);
1088 border-radius: var(--universal-border-radius);
1089 margin: var(--universal-margin);
1090 }
1091
1092 nav * {
1093 padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
1094 }
1095
1096 nav a, nav a:visited {
1097 display: block;
1098 color: var(--nav-link-color);
1099 border-radius: var(--universal-border-radius);
1100 transition: background 0.3s;
1101 }
1102
1103 nav a:hover, nav a:focus, nav a:visited:hover, nav a:visited:focus {
1104 text-decoration: none;
1105 background: var(--nav-hover-back-color);
1106 }
1107
1108 nav .sublink-1 {
1109 position: relative;
1110 margin-left: calc(2 * var(--universal-padding));
1111 }
1112
1113 nav .sublink-1:before {
1114 position: absolute;
1115 left: calc(var(--universal-padding) - 1 * var(--universal-padding));
1116 top: -0.0625rem;
1117 content: '';
1118 height: 100%;
1119 border: 0.0625rem solid var(--nav-border-color);
1120 border-left: 0;
1121 }
1122
1123 nav .sublink-2 {
1124 position: relative;
1125 margin-left: calc(4 * var(--universal-padding));
1126 }
1127
1128 nav .sublink-2:before {
1129 position: absolute;
1130 left: calc(var(--universal-padding) - 3 * var(--universal-padding));
1131 top: -0.0625rem;
1132 content: '';
1133 height: 100%;
1134 border: 0.0625rem solid var(--nav-border-color);
1135 border-left: 0;
1136 }
1137
1138 footer {
1139 background: var(--footer-back-color);
1140 color: var(--footer-fore-color);
1141 border-top: 0.0625rem solid var(--footer-border-color);
1142 padding: calc(2 * var(--universal-padding)) var(--universal-padding);
1143 font-size: 0.875rem;
1144 }
1145
1146 footer a, footer a:visited {
1147 color: var(--footer-link-color);
1148 }
1149
1150 header.sticky {
1151 position: -webkit-sticky;
1152 position: sticky;
1153 z-index: 1101;
1154 top: 0;
1155 }
1156
1157 footer.sticky {
1158 position: -webkit-sticky;
1159 position: sticky;
1160 z-index: 1101;
1161 bottom: 0;
1162 }
1163
1164 .drawer-toggle:before {
1165 display: inline-block;
1166 position: relative;
1167 vertical-align: bottom;
1168 content: '\00a0\2261\00a0';
1169 font-family: sans-serif;
1170 font-size: 1.5em;
1171 }
1172
1173 @media screen and (min-width: 768px) {
1174 .drawer-toggle:not(.persistent) {
1175 display: none;
1176 }
1177 }
1178
1179 [type="checkbox"].drawer {
1180 height: 1px;
1181 width: 1px;
1182 margin: -1px;
1183 overflow: hidden;
1184 position: absolute;
1185 clip: rect(0 0 0 0);
1186 -webkit-clip-path: inset(100%);
1187 clip-path: inset(100%);
1188 }
1189
1190 [type="checkbox"].drawer + * {
1191 display: block;
1192 box-sizing: border-box;
1193 position: fixed;
1194 top: 0;
1195 width: 320px;
1196 height: 100vh;
1197 overflow-y: auto;
1198 background: var(--drawer-back-color);
1199 border: 0.0625rem solid var(--drawer-border-color);
1200 border-radius: 0;
1201 margin: 0;
1202 z-index: 1110;
1203 right: -320px;
1204 transition: right 0.3s;
1205 }
1206
1207 [type="checkbox"].drawer + * .drawer-close {
1208 position: absolute;
1209 top: var(--universal-margin);
1210 right: var(--universal-margin);
1211 z-index: 1111;
1212 width: 2rem;
1213 height: 2rem;
1214 border-radius: var(--universal-border-radius);
1215 padding: var(--universal-padding);
1216 margin: 0;
1217 cursor: pointer;
1218 transition: background 0.3s;
1219 }
1220
1221 [type="checkbox"].drawer + * .drawer-close:before {
1222 display: block;
1223 content: '\00D7';
1224 color: var(--drawer-close-color);
1225 position: relative;
1226 font-family: sans-serif;
1227 font-size: 2rem;
1228 line-height: 1;
1229 text-align: center;
1230 }
1231
1232 [type="checkbox"].drawer + * .drawer-close:hover, [type="checkbox"].drawer + * .drawer-close:focus {
1233 background: var(--drawer-hover-back-color);
1234 }
1235
1236 @media screen and (max-width: 320px) {
1237 [type="checkbox"].drawer + * {
1238 width: 100%;
1239 }
1240 }
1241
1242 [type="checkbox"].drawer:checked + * {
1243 right: 0;
1244 }
1245
1246 @media screen and (min-width: 768px) {
1247 [type="checkbox"].drawer:not(.persistent) + * {
1248 position: static;
1249 height: 100%;
1250 z-index: 1100;
1251 }
1252 [type="checkbox"].drawer:not(.persistent) + * .drawer-close {
1253 display: none;
1254 }
1255 }
1256
1257 /*
1258 Definitions for the responsive table component.
1259 */
1260 /* Table module CSS variable definitions. */
1261 :root {
1262 --table-border-color: #aaa;
1263 --table-border-separator-color: #666;
1264 --table-head-back-color: #e6e6e6;
1265 --table-head-fore-color: #111;
1266 --table-body-back-color: #f8f8f8;
1267 --table-body-fore-color: #111;
1268 --table-body-alt-back-color: #eee;
1269 }
1270
1271 table {
1272 border-collapse: separate;
1273 border-spacing: 0;
1274 margin: 0;
1275 display: flex;
1276 flex: 0 1 auto;
1277 flex-flow: row wrap;
1278 padding: var(--universal-padding);
1279 padding-top: 0;
1280 }
1281
1282 table caption {
1283 font-size: 1.5rem;
1284 margin: calc(2 * var(--universal-margin)) 0;
1285 max-width: 100%;
1286 flex: 0 0 100%;
1287 }
1288
1289 table thead, table tbody {
1290 display: flex;
1291 flex-flow: row wrap;
1292 border: 0.0625rem solid var(--table-border-color);
1293 }
1294
1295 table thead {
1296 z-index: 999;
1297 border-radius: var(--universal-border-radius) var(--universal-border-radius) 0 0;
1298 border-bottom: 0.0625rem solid var(--table-border-separator-color);
1299 }
1300
1301 table tbody {
1302 border-top: 0;
1303 margin-top: calc(0 - var(--universal-margin));
1304 border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
1305 }
1306
1307 table tr {
1308 display: flex;
1309 padding: 0;
1310 }
1311
1312 table th, table td {
1313 padding: calc(2 * var(--universal-padding));
1314 }
1315
1316 table th {
1317 text-align: left;
1318 background: var(--table-head-back-color);
1319 color: var(--table-head-fore-color);
1320 }
1321
1322 table td {
1323 background: var(--table-body-back-color);
1324 color: var(--table-body-fore-color);
1325 border-top: 0.0625rem solid var(--table-border-color);
1326 }
1327
1328 table:not(.horizontal) {
1329 overflow: auto;
1330 max-height: 400px;
1331 }
1332
1333 table:not(.horizontal) thead, table:not(.horizontal) tbody {
1334 max-width: 100%;
1335 flex: 0 0 100%;
1336 }
1337
1338 table:not(.horizontal) tr {
1339 flex-flow: row wrap;
1340 flex: 0 0 100%;
1341 }
1342
1343 table:not(.horizontal) th, table:not(.horizontal) td {
1344 flex: 1 0 0%;
1345 overflow: hidden;
1346 text-overflow: ellipsis;
1347 }
1348
1349 table:not(.horizontal) thead {
1350 position: sticky;
1351 top: 0;
1352 }
1353
1354 table:not(.horizontal) tbody tr:first-child td {
1355 border-top: 0;
1356 }
1357
1358 table.horizontal {
1359 border: 0;
1360 }
1361
1362 table.horizontal thead, table.horizontal tbody {
1363 border: 0;
1364 flex: .2 0 0;
1365 flex-flow: row nowrap;
1366 }
1367
1368 table.horizontal tbody {
1369 overflow: auto;
1370 justify-content: space-between;
1371 flex: .8 0 0;
1372 margin-left: 0;
1373 padding-bottom: calc(var(--universal-padding) / 4);
1374 }
1375
1376 table.horizontal tr {
1377 flex-direction: column;
1378 flex: 1 0 auto;
1379 }
1380
1381 table.horizontal th, table.horizontal td {
1382 width: auto;
1383 border: 0;
1384 border-bottom: 0.0625rem solid var(--table-border-color);
1385 }
1386
1387 table.horizontal th:not(:first-child), table.horizontal td:not(:first-child) {
1388 border-top: 0;
1389 }
1390
1391 table.horizontal th {
1392 text-align: right;
1393 border-left: 0.0625rem solid var(--table-border-color);
1394 border-right: 0.0625rem solid var(--table-border-separator-color);
1395 }
1396
1397 table.horizontal thead tr:first-child {
1398 padding-left: 0;
1399 }
1400
1401 table.horizontal th:first-child, table.horizontal td:first-child {
1402 border-top: 0.0625rem solid var(--table-border-color);
1403 }
1404
1405 table.horizontal tbody tr:last-child td {
1406 border-right: 0.0625rem solid var(--table-border-color);
1407 }
1408
1409 table.horizontal tbody tr:last-child td:first-child {
1410 border-top-right-radius: 0.25rem;
1411 }
1412
1413 table.horizontal tbody tr:last-child td:last-child {
1414 border-bottom-right-radius: 0.25rem;
1415 }
1416
1417 table.horizontal thead tr:first-child th:first-child {
1418 border-top-left-radius: 0.25rem;
1419 }
1420
1421 table.horizontal thead tr:first-child th:last-child {
1422 border-bottom-left-radius: 0.25rem;
1423 }
1424
1425 :root {
1426 --table-body-alt-back-color: #eee;
1427 }
1428
1429 table.striped tr:nth-of-type(2n) > td {
1430 background: var(--table-body-alt-back-color);
1431 }
1432
1433 :root {
1434 --table-body-hover-back-color: #90caf9;
1435 }
1436
1437 table.hoverable tr:hover, table.hoverable tr:hover > td, table.hoverable tr:focus, table.hoverable tr:focus > td {
1438 background: var(--table-body-hover-back-color);
1439 }
1440
1441 /*
1442 Definitions for contextual background elements, toasts and tooltips.
1443 */
1444 /* Contextual module CSS variable definitions */
1445 :root {
1446 --mark-back-color: #0277bd;
1447 --mark-fore-color: #fafafa;
1448 }
1449
1450 mark {
1451 background: var(--mark-back-color);
1452 color: var(--mark-fore-color);
1453 font-size: 0.95em;
1454 line-height: 1em;
1455 border-radius: var(--universal-border-radius);
1456 padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2);
1457 }
1458
1459 mark.inline-block {
1460 display: inline-block;
1461 font-size: 1em;
1462 line-height: 1.5;
1463 padding: calc(var(--universal-padding) / 2) var(--universal-padding);
1464 }
1465
1466 :root {
1467 --toast-back-color: #424242;
1468 --toast-fore-color: #fafafa;
1469 }
1470
1471 .toast {
1472 position: fixed;
1473 bottom: calc(var(--universal-margin) * 3);
1474 left: 50%;
1475 transform: translate(-50%, -50%);
1476 z-index: 1111;
1477 color: var(--toast-fore-color);
1478 background: var(--toast-back-color);
1479 border-radius: calc(var(--universal-border-radius) * 16);
1480 padding: var(--universal-padding) calc(var(--universal-padding) * 3);
1481 }
1482
1483 :root {
1484 --tooltip-back-color: #212121;
1485 --tooltip-fore-color: #fafafa;
1486 }
1487
1488 .tooltip {
1489 position: relative;
1490 display: inline-block;
1491 }
1492
1493 .tooltip:before, .tooltip:after {
1494 position: absolute;
1495 opacity: 0;
1496 clip: rect(0 0 0 0);
1497 -webkit-clip-path: inset(100%);
1498 clip-path: inset(100%);
1499 transition: all 0.3s;
1500 z-index: 1010;
1501 left: 50%;
1502 }
1503
1504 .tooltip:not(.bottom):before, .tooltip:not(.bottom):after {
1505 bottom: 75%;
1506 }
1507
1508 .tooltip.bottom:before, .tooltip.bottom:after {
1509 top: 75%;
1510 }
1511
1512 .tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after {
1513 opacity: 1;
1514 clip: auto;
1515 -webkit-clip-path: inset(0%);
1516 clip-path: inset(0%);
1517 }
1518
1519 .tooltip:before {
1520 content: '';
1521 background: transparent;
1522 border: var(--universal-margin) solid transparent;
1523 left: calc(50% - var(--universal-margin));
1524 }
1525
1526 .tooltip:not(.bottom):before {
1527 border-top-color: #212121;
1528 }
1529
1530 .tooltip.bottom:before {
1531 border-bottom-color: #212121;
1532 }
1533
1534 .tooltip:after {
1535 content: attr(aria-label);
1536 color: var(--tooltip-fore-color);
1537 background: var(--tooltip-back-color);
1538 border-radius: var(--universal-border-radius);
1539 padding: var(--universal-padding);
1540 white-space: nowrap;
1541 transform: translateX(-50%);
1542 }
1543
1544 .tooltip:not(.bottom):after {
1545 margin-bottom: calc(2 * var(--universal-margin));
1546 }
1547
1548 .tooltip.bottom:after {
1549 margin-top: calc(2 * var(--universal-margin));
1550 }
1551
1552 :root {
1553 --modal-overlay-color: rgba(0, 0, 0, 0.45);
1554 --modal-close-color: #444;
1555 --modal-close-hover-color: #f0f0f0;
1556 }
1557
1558 [type="checkbox"].modal {
1559 height: 1px;
1560 width: 1px;
1561 margin: -1px;
1562 overflow: hidden;
1563 position: absolute;
1564 clip: rect(0 0 0 0);
1565 -webkit-clip-path: inset(100%);
1566 clip-path: inset(100%);
1567 }
1568
1569 [type="checkbox"].modal + div {
1570 position: fixed;
1571 top: 0;
1572 left: 0;
1573 display: none;
1574 width: 100vw;
1575 height: 100vh;
1576 background: var(--modal-overlay-color);
1577 }
1578
1579 [type="checkbox"].modal + div .card {
1580 margin: 0 auto;
1581 max-height: 50vh;
1582 overflow: auto;
1583 }
1584
1585 [type="checkbox"].modal + div .card .modal-close {
1586 position: absolute;
1587 top: 0;
1588 right: 0;
1589 width: 1.75rem;
1590 height: 1.75rem;
1591 border-radius: var(--universal-border-radius);
1592 padding: var(--universal-padding);
1593 margin: 0;
1594 cursor: pointer;
1595 transition: background 0.3s;
1596 }
1597
1598 [type="checkbox"].modal + div .card .modal-close:before {
1599 display: block;
1600 content: '\00D7';
1601 color: var(--modal-close-color);
1602 position: relative;
1603 font-family: sans-serif;
1604 font-size: 1.75rem;
1605 line-height: 1;
1606 text-align: center;
1607 }
1608
1609 [type="checkbox"].modal + div .card .modal-close:hover, [type="checkbox"].modal + div .card .modal-close:focus {
1610 background: var(--modal-close-hover-color);
1611 }
1612
1613 [type="checkbox"].modal:checked + div {
1614 display: flex;
1615 flex: 0 1 auto;
1616 z-index: 1200;
1617 }
1618
1619 [type="checkbox"].modal:checked + div .card .modal-close {
1620 z-index: 1211;
1621 }
1622
1623 :root {
1624 --collapse-label-back-color: #e8e8e8;
1625 --collapse-label-fore-color: #212121;
1626 --collapse-label-hover-back-color: #f0f0f0;
1627 --collapse-selected-label-back-color: #ececec;
1628 --collapse-border-color: #ddd;
1629 --collapse-content-back-color: #fafafa;
1630 --collapse-selected-label-border-color: #0277bd;
1631 }
1632
1633 .collapse {
1634 width: calc(100% - 2 * var(--universal-margin));
1635 opacity: 1;
1636 display: flex;
1637 flex-direction: column;
1638 margin: var(--universal-margin);
1639 border-radius: var(--universal-border-radius);
1640 }
1641
1642 .collapse > [type="radio"], .collapse > [type="checkbox"] {
1643 height: 1px;
1644 width: 1px;
1645 margin: -1px;
1646 overflow: hidden;
1647 position: absolute;
1648 clip: rect(0 0 0 0);
1649 -webkit-clip-path: inset(100%);
1650 clip-path: inset(100%);
1651 }
1652
1653 .collapse > label {
1654 flex-grow: 1;
1655 display: inline-block;
1656 height: 1.5rem;
1657 cursor: pointer;
1658 transition: background 0.3s;
1659 color: var(--collapse-label-fore-color);
1660 background: var(--collapse-label-back-color);
1661 border: 0.0625rem solid var(--collapse-border-color);
1662 padding: calc(1.5 * var(--universal-padding));
1663 }
1664
1665 .collapse > label:hover, .collapse > label:focus {
1666 background: var(--collapse-label-hover-back-color);
1667 }
1668
1669 .collapse > label + div {
1670 flex-basis: auto;
1671 height: 1px;
1672 width: 1px;
1673 margin: -1px;
1674 overflow: hidden;
1675 position: absolute;
1676 clip: rect(0 0 0 0);
1677 -webkit-clip-path: inset(100%);
1678 clip-path: inset(100%);
1679 transition: max-height 0.3s;
1680 max-height: 1px;
1681 }
1682
1683 .collapse > :checked + label {
1684 background: var(--collapse-selected-label-back-color);
1685 border-bottom-color: var(--collapse-selected-label-border-color);
1686 }
1687
1688 .collapse > :checked + label + div {
1689 box-sizing: border-box;
1690 position: relative;
1691 width: 100%;
1692 height: auto;
1693 overflow: auto;
1694 margin: 0;
1695 background: var(--collapse-content-back-color);
1696 border: 0.0625rem solid var(--collapse-border-color);
1697 border-top: 0;
1698 padding: var(--universal-padding);
1699 clip: auto;
1700 -webkit-clip-path: inset(0%);
1701 clip-path: inset(0%);
1702 max-height: 400px;
1703 }
1704
1705 .collapse > label:not(:first-of-type) {
1706 border-top: 0;
1707 }
1708
1709 .collapse > label:first-of-type {
1710 border-radius: var(--universal-border-radius) var(--universal-border-radius) 0 0;
1711 }
1712
1713 .collapse > label:last-of-type:not(:first-of-type) {
1714 border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
1715 }
1716
1717 .collapse > label:last-of-type:first-of-type {
1718 border-radius: var(--universal-border-radius);
1719 }
1720
1721 .collapse > :checked:last-of-type:not(:first-of-type) + label {
1722 border-radius: 0;
1723 }
1724
1725 .collapse > :checked:last-of-type + label + div {
1726 border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius);
1727 }
1728
1729 /*
1730 Custom elements for contextual background elements, toasts and tooltips.
1731 */
1732 mark.secondary {
1733 --mark-back-color: #d32f2f;
1734 }
1735
1736 mark.tertiary {
1737 --mark-back-color: #308732;
1738 }
1739
1740 mark.tag {
1741 padding: calc(var(--universal-padding)/2) var(--universal-padding);
1742 border-radius: 1em;
1743 }
1744
1745 /*
1746 Definitions for progress elements and spinners.
1747 */
1748 /* Progess module CSS variable definitions */
1749 :root {
1750 --progress-back-color: #ddd;
1751 --progress-fore-color: #555;
1752 }
1753
1754 progress {
1755 display: block;
1756 vertical-align: baseline;
1757 -webkit-appearance: none;
1758 -moz-appearance: none;
1759 appearance: none;
1760 height: 0.75rem;
1761 width: calc(100% - 2 * var(--universal-margin));
1762 margin: var(--universal-margin);
1763 border: 0;
1764 border-radius: calc(2 * var(--universal-border-radius));
1765 background: var(--progress-back-color);
1766 color: var(--progress-fore-color);
1767 }
1768
1769 progress::-webkit-progress-value {
1770 background: var(--progress-fore-color);
1771 border-top-left-radius: calc(2 * var(--universal-border-radius));
1772 border-bottom-left-radius: calc(2 * var(--universal-border-radius));
1773 }
1774
1775 progress::-webkit-progress-bar {
1776 background: var(--progress-back-color);
1777 }
1778
1779 progress::-moz-progress-bar {
1780 background: var(--progress-fore-color);
1781 border-top-left-radius: calc(2 * var(--universal-border-radius));
1782 border-bottom-left-radius: calc(2 * var(--universal-border-radius));
1783 }
1784
1785 progress[value="1000"]::-webkit-progress-value {
1786 border-radius: calc(2 * var(--universal-border-radius));
1787 }
1788
1789 progress[value="1000"]::-moz-progress-bar {
1790 border-radius: calc(2 * var(--universal-border-radius));
1791 }
1792
1793 progress.inline {
1794 display: inline-block;
1795 vertical-align: middle;
1796 width: 60%;
1797 }
1798
1799 :root {
1800 --spinner-back-color: #ddd;
1801 --spinner-fore-color: #555;
1802 }
1803
1804 @keyframes spinner-donut-anim {
1805 0% {
1806 transform: rotate(0deg);
1807 }
1808 100% {
1809 transform: rotate(360deg);
1810 }
1811 }
1812
1813 .spinner {
1814 display: inline-block;
1815 margin: var(--universal-margin);
1816 border: 0.25rem solid var(--spinner-back-color);
1817 border-left: 0.25rem solid var(--spinner-fore-color);
1818 border-radius: 50%;
1819 width: 1.25rem;
1820 height: 1.25rem;
1821 animation: spinner-donut-anim 1.2s linear infinite;
1822 }
1823
1824 /*
1825 Custom elements for progress bars and spinners.
1826 */
1827 progress.primary {
1828 --progress-fore-color: #1976d2;
1829 }
1830
1831 progress.secondary {
1832 --progress-fore-color: #d32f2f;
1833 }
1834
1835 progress.tertiary {
1836 --progress-fore-color: #308732;
1837 }
1838
1839 .spinner.primary {
1840 --spinner-fore-color: #1976d2;
1841 }
1842
1843 .spinner.secondary {
1844 --spinner-fore-color: #d32f2f;
1845 }
1846
1847 .spinner.tertiary {
1848 --spinner-fore-color: #308732;
1849 }
1850
1851 /*
1852 Definitions for icons - powered by Feather (https://feathericons.com/).
1853 */
1854 span[class^='icon-'] {
1855 display: inline-block;
1856 height: 1em;
1857 width: 1em;
1858 vertical-align: -0.125em;
1859 background-size: contain;
1860 margin: 0 calc(var(--universal-margin) / 4);
1861 }
1862
1863 span[class^='icon-'].secondary {
1864 -webkit-filter: invert(25%);
1865 filter: invert(25%);
1866 }
1867
1868 span[class^='icon-'].inverse {
1869 -webkit-filter: invert(100%);
1870 filter: invert(100%);
1871 }
1872
1873 span.icon-alert {
1874 background-image: 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='%23111' 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' y2='16'%3E%3C/line%3E%3C/svg%3E");
1875 }
1876
1877 span.icon-bookmark {
1878 background-image: 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='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'%3E%3C/path%3E%3C/svg%3E");
1879 }
1880
1881 span.icon-calendar {
1882 background-image: 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='%23111' 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");
1883 }
1884
1885 span.icon-credit {
1886 background-image: 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='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='4' width='22' height='16' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='1' y1='10' x2='23' y2='10'%3E%3C/line%3E%3C/svg%3E");
1887 }
1888
1889 span.icon-edit {
1890 background-image: 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='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34'%3E%3C/path%3E%3Cpolygon points='18 2 22 6 12 16 8 16 8 12 18 2'%3E%3C/polygon%3E%3C/svg%3E");
1891 }
1892
1893 span.icon-link {
1894 background-image: 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='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
1895 }
1896
1897 span.icon-help {
1898 background-image: 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='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='17' x2='12' y2='17'%3E%3C/line%3E%3C/svg%3E");
1899 }
1900
1901 span.icon-home {
1902 background-image: 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='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E");
1903 }
1904
1905 span.icon-info {
1906 background-image: 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='%23111' 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='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12' y2='8'%3E%3C/line%3E%3C/svg%3E");
1907 }
1908
1909 span.icon-lock {
1910 background-image: 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='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E");
1911 }
1912
1913 span.icon-mail {
1914 background-image: 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='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E");
1915 }
1916
1917 span.icon-location {
1918 background-image: 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='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E");
1919 }
1920
1921 span.icon-phone {
1922 background-image: 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='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E");
1923 }
1924
1925 span.icon-rss {
1926 background-image: 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='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9'%3E%3C/path%3E%3Cpath d='M4 4a16 16 0 0 1 16 16'%3E%3C/path%3E%3Ccircle cx='5' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E");
1927 }
1928
1929 span.icon-search {
1930 background-image: 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='%23111' 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");
1931 }
1932
1933 span.icon-settings {
1934 background-image: 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='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E");
1935 }
1936
1937 span.icon-share {
1938 background-image: 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='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'%3E%3C/circle%3E%3Ccircle cx='6' cy='12' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='19' r='3'%3E%3C/circle%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'%3E%3C/line%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'%3E%3C/line%3E%3C/svg%3E");
1939 }
1940
1941 span.icon-cart {
1942 background-image: 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='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'%3E%3C/circle%3E%3Ccircle cx='20' cy='21' r='1'%3E%3C/circle%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'%3E%3C/path%3E%3C/svg%3E");
1943 }
1944
1945 span.icon-upload {
1946 background-image: 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='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='17 8 12 3 7 8'%3E%3C/polyline%3E%3Cline x1='12' y1='3' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
1947 }
1948
1949 span.icon-user {
1950 background-image: 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='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
1951 }
1952
1953 /*
1954 Definitions for utilities and helper classes.
1955 */
1956 /* Utility module CSS variable definitions */
1957 :root {
1958 --generic-border-color: rgba(0, 0, 0, 0.3);
1959 --generic-box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.125), 0 0.125rem 0.125rem -0.125rem rgba(0, 0, 0, 0.25);
1960 }
1961
1962 .hidden {
1963 display: none !important;
1964 }
1965
1966 .visually-hidden {
1967 position: absolute !important;
1968 width: 1px !important;
1969 height: 1px !important;
1970 margin: -1px !important;
1971 border: 0 !important;
1972 padding: 0 !important;
1973 clip: rect(0 0 0 0) !important;
1974 -webkit-clip-path: inset(100%) !important;
1975 clip-path: inset(100%) !important;
1976 overflow: hidden !important;
1977 }
1978
1979 .bordered {
1980 border: 0.0625rem solid var(--generic-border-color) !important;
1981 }
1982
1983 .rounded {
1984 border-radius: var(--universal-border-radius) !important;
1985 }
1986
1987 .circular {
1988 border-radius: 50% !important;
1989 }
1990
1991 .shadowed {
1992 box-shadow: var(--generic-box-shadow) !important;
1993 }
1994
1995 .responsive-margin {
1996 margin: calc(var(--universal-margin) / 4) !important;
1997 }
1998
1999 @media screen and (min-width: 768px) {
2000 .responsive-margin {
2001 margin: calc(var(--universal-margin) / 2) !important;
2002 }
2003 }
2004
2005 @media screen and (min-width: 1280px) {
2006 .responsive-margin {
2007 margin: var(--universal-margin) !important;
2008 }
2009 }
2010
2011 .responsive-padding {
2012 padding: calc(var(--universal-padding) / 4) !important;
2013 }
2014
2015 @media screen and (min-width: 768px) {
2016 .responsive-padding {
2017 padding: calc(var(--universal-padding) / 2) !important;
2018 }
2019 }
2020
2021 @media screen and (min-width: 1280px) {
2022 .responsive-padding {
2023 padding: var(--universal-padding) !important;
2024 }
2025 }
2026
2027 @media screen and (max-width: 767px) {
2028 .hidden-sm {
2029 display: none !important;
2030 }
2031 }
2032
2033 @media screen and (min-width: 768px) and (max-width: 1279px) {
2034 .hidden-md {
2035 display: none !important;
2036 }
2037 }
2038
2039 @media screen and (min-width: 1280px) {
2040 .hidden-lg {
2041 display: none !important;
2042 }
2043 }
2044
2045 @media screen and (max-width: 767px) {
2046 .visually-hidden-sm {
2047 position: absolute !important;
2048 width: 1px !important;
2049 height: 1px !important;
2050 margin: -1px !important;
2051 border: 0 !important;
2052 padding: 0 !important;
2053 clip: rect(0 0 0 0) !important;
2054 -webkit-clip-path: inset(100%) !important;
2055 clip-path: inset(100%) !important;
2056 overflow: hidden !important;
2057 }
2058 }
2059
2060 @media screen and (min-width: 768px) and (max-width: 1279px) {
2061 .visually-hidden-md {
2062 position: absolute !important;
2063 width: 1px !important;
2064 height: 1px !important;
2065 margin: -1px !important;
2066 border: 0 !important;
2067 padding: 0 !important;
2068 clip: rect(0 0 0 0) !important;
2069 -webkit-clip-path: inset(100%) !important;
2070 clip-path: inset(100%) !important;
2071 overflow: hidden !important;
2072 }
2073 }
2074
2075 @media screen and (min-width: 1280px) {
2076 .visually-hidden-lg {
2077 position: absolute !important;
2078 width: 1px !important;
2079 height: 1px !important;
2080 margin: -1px !important;
2081 border: 0 !important;
2082 padding: 0 !important;
2083 clip: rect(0 0 0 0) !important;
2084 -webkit-clip-path: inset(100%) !important;
2085 clip-path: inset(100%) !important;
2086 overflow: hidden !important;
2087 }
2088 }