Prepare images for Knightmate variant. Fix lastMove.fen early assignment (when =...
[vchess.git] / client / public / mini-custom.css
CommitLineData
bd76b456
BA
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
29html {
30 font-size: 16px;
31}
32
33a, b, del, em, i, ins, q, span, strong, u {
34 font-size: 1em;
35}
36
37html, * {
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
47body {
48 margin: 0;
49 color: var(--fore-color);
50 background: var(--back-color);
51}
52
53details {
54 display: block;
55}
56
57summary {
58 display: list-item;
59}
60
61abbr[title] {
62 border-bottom: none;
63 text-decoration: underline dotted;
64}
65
66input {
67 overflow: visible;
68}
69
70img {
71 max-width: 100%;
72 height: auto;
73}
74
75h1, 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
81h1 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
87h1 {
88 font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
89}
90
91h2 {
92 font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
93}
94
95h3 {
96 font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio));
97}
98
99h4 {
100 font-size: calc(1rem * var(--heading-ratio));
101}
102
103h5 {
104 font-size: 1rem;
105}
106
107h6 {
108 font-size: calc(1rem / var(--heading-ratio));
109}
110
111p {
112 margin: var(--universal-margin);
113}
114
115ol, ul {
116 margin: var(--universal-margin);
117 padding-left: calc(2 * var(--universal-margin));
118}
119
120b, strong {
121 font-weight: 700;
122}
123
124hr {
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
133blockquote {
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
145blockquote: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
156blockquote[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
164code, kbd, pre, samp {
165 font-family: Menlo, Consolas, monospace;
166 font-size: 0.85em;
167}
168
169code {
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
175kbd {
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
182pre {
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
192sup, sub, code, kbd {
193 line-height: 0;
194 position: relative;
195 vertical-align: baseline;
196}
197
198small, sup, sub, figcaption {
199 font-size: 0.75em;
200}
201
202sup {
203 top: -0.5em;
204}
205
206sub {
207 bottom: -0.25em;
208}
209
210figure {
211 margin: var(--universal-margin);
212}
213
214figcaption {
215 color: var(--secondary-fore-color);
216}
217
218a {
219 text-decoration: none;
220}
221
222a:link {
223 color: var(--a-link-color);
224}
225
226a:visited {
227 color: var(--a-visited-color);
228}
229
230a: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
752form {
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
761fieldset {
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
768legend {
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
777label {
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
823input: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
834input: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
839input: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
844input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], textarea[readonly], select[readonly] {
845 background: var(--secondary-back-color);
846}
847
848select {
849 max-width: 100%;
850}
851
852option {
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
905button::-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
910button, html [type="button"], [type="reset"], [type="submit"] {
911 -webkit-appearance: button;
912}
913
914button {
915 overflow: visible;
916 text-transform: none;
917}
918
919button, [type="button"], [type="submit"], [type="reset"],
920a.button, label.button, .button,
921a[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
934button:hover, button:focus, [type="button"]:hover, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:focus,
935a.button:hover,
936a.button:focus, label.button:hover, label.button:focus, .button:hover, .button:focus,
937a[role="button"]:hover,
938a[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
943input: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*/
973button.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
978button.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
982button.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
987button.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
991button.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
996button.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
1000button.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
1005button.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
1009button.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
1014button.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
1043header {
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
1054header.row {
1055 box-sizing: content-box;
1056}
1057
1058header .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
1065header 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
1080header 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
1084nav {
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
1092nav * {
1093 padding: var(--universal-padding) calc(1.5 * var(--universal-padding));
1094}
1095
1096nav 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
1103nav 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
1108nav .sublink-1 {
1109 position: relative;
1110 margin-left: calc(2 * var(--universal-padding));
1111}
1112
1113nav .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
1123nav .sublink-2 {
1124 position: relative;
1125 margin-left: calc(4 * var(--universal-padding));
1126}
1127
1128nav .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
1138footer {
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
1146footer a, footer a:visited {
1147 color: var(--footer-link-color);
1148}
1149
1150header.sticky {
1151 position: -webkit-sticky;
1152 position: sticky;
1153 z-index: 1101;
1154 top: 0;
1155}
1156
1157footer.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
1271table {
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
1282table 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
1289table thead, table tbody {
1290 display: flex;
1291 flex-flow: row wrap;
1292 border: 0.0625rem solid var(--table-border-color);
1293}
1294
1295table 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
1301table 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
1307table tr {
1308 display: flex;
1309 padding: 0;
1310}
1311
1312table th, table td {
1313 padding: calc(2 * var(--universal-padding));
1314}
1315
1316table th {
1317 text-align: left;
1318 background: var(--table-head-back-color);
1319 color: var(--table-head-fore-color);
1320}
1321
1322table 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
1328table:not(.horizontal) {
1329 overflow: auto;
1330 max-height: 400px;
1331}
1332
1333table:not(.horizontal) thead, table:not(.horizontal) tbody {
1334 max-width: 100%;
1335 flex: 0 0 100%;
1336}
1337
1338table:not(.horizontal) tr {
1339 flex-flow: row wrap;
1340 flex: 0 0 100%;
1341}
1342
1343table:not(.horizontal) th, table:not(.horizontal) td {
1344 flex: 1 0 0%;
1345 overflow: hidden;
1346 text-overflow: ellipsis;
1347}
1348
1349table:not(.horizontal) thead {
1350 position: sticky;
1351 top: 0;
1352}
1353
1354table:not(.horizontal) tbody tr:first-child td {
1355 border-top: 0;
1356}
1357
1358table.horizontal {
1359 border: 0;
1360}
1361
1362table.horizontal thead, table.horizontal tbody {
1363 border: 0;
1364 flex: .2 0 0;
1365 flex-flow: row nowrap;
1366}
1367
1368table.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
1376table.horizontal tr {
1377 flex-direction: column;
1378 flex: 1 0 auto;
1379}
1380
1381table.horizontal th, table.horizontal td {
1382 width: auto;
1383 border: 0;
1384 border-bottom: 0.0625rem solid var(--table-border-color);
1385}
1386
1387table.horizontal th:not(:first-child), table.horizontal td:not(:first-child) {
1388 border-top: 0;
1389}
1390
1391table.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
1397table.horizontal thead tr:first-child {
1398 padding-left: 0;
1399}
1400
1401table.horizontal th:first-child, table.horizontal td:first-child {
1402 border-top: 0.0625rem solid var(--table-border-color);
1403}
1404
1405table.horizontal tbody tr:last-child td {
1406 border-right: 0.0625rem solid var(--table-border-color);
1407}
1408
1409table.horizontal tbody tr:last-child td:first-child {
1410 border-top-right-radius: 0.25rem;
1411}
1412
1413table.horizontal tbody tr:last-child td:last-child {
1414 border-bottom-right-radius: 0.25rem;
1415}
1416
1417table.horizontal thead tr:first-child th:first-child {
1418 border-top-left-radius: 0.25rem;
1419}
1420
1421table.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
1429table.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
1437table.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
1450mark {
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
1459mark.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*/
1732mark.secondary {
1733 --mark-back-color: #d32f2f;
1734}
1735
1736mark.tertiary {
1737 --mark-back-color: #308732;
1738}
1739
1740mark.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
1754progress {
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
1769progress::-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
1775progress::-webkit-progress-bar {
1776 background: var(--progress-back-color);
1777}
1778
1779progress::-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
1785progress[value="1000"]::-webkit-progress-value {
1786 border-radius: calc(2 * var(--universal-border-radius));
1787}
1788
1789progress[value="1000"]::-moz-progress-bar {
1790 border-radius: calc(2 * var(--universal-border-radius));
1791}
1792
1793progress.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*/
1827progress.primary {
1828 --progress-fore-color: #1976d2;
1829}
1830
1831progress.secondary {
1832 --progress-fore-color: #d32f2f;
1833}
1834
1835progress.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*/
1854span[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
1863span[class^='icon-'].secondary {
1864 -webkit-filter: invert(25%);
1865 filter: invert(25%);
1866}
1867
1868span[class^='icon-'].inverse {
1869 -webkit-filter: invert(100%);
1870 filter: invert(100%);
1871}
1872
1873span.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
1877span.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
1881span.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
1885span.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
1889span.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
1893span.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
1897span.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
1901span.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
1905span.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
1909span.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
1913span.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
1917span.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
1921span.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
1925span.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
1929span.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
1933span.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
1937span.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
1941span.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
1945span.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
1949span.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}