3db25d56b8a0f67d41110ff8b7bccb3155d84ede
[WebKit-https.git] / Tools / resultsdbpy / resultsdbpy / view / static / library / css / webkit.css
1 /*
2 Copyright (C) 2019 Apple Inc. All rights reserved.
3
4  Redistribution and use in source and binary forms, with or without
5  modification, are permitted provided that the following conditions
6  are met:
7  1.  Redistributions of source code must retain the above copyright
8      notice, this list of conditions and the following disclaimer.
9  2.  Redistributions in binary form must reproduce the above copyright
10      notice, this list of conditions and the following disclaimer in the
11      documentation and/or other materials provided with the distribution.
12
13  THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS "AS IS" AND
14  ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
15  WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
16  DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS BE LIABLE FOR
17  ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
18  DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
19  SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
20  CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
21  OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
22  OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
23  */
24
25 /* colors */
26 :root {
27   --white: #fff;
28   --blueDarker: #0262ca;
29   --blueDark: #066ee0;
30   --blue: #0070c9;
31   --blueLight: #3b99fc;
32   --blueLighter: #9dccfe;
33   --blueLightest: #f5f9fe;
34   --greenDarker: #43c359;
35   --greenDark: #3dce56;
36   --green: #4cd964;
37   --greenLight: #79df8f;
38   --greenLighter: #bcefc7;
39   --greenLightest: #f8fdf9;
40   --orangeDarker: #d77900;
41   --orangeDark: #e68200;
42   --orange: #ff9500;
43   --orangeLight: #f7ad45;
44   --orangeLighter: #fbd6a2;
45   --orangeLightest: #fefaf5;
46   --redDarker: #dc3229;
47   --redDark: #f32d22;
48   --red: #ff3b30;
49   --redLight: #fc6e61;
50   --redLighter: #fdb6b0;
51   --redLightest: #fef7f7;
52   --purpleDarker: #884ac5;
53   --purpleDark: #9748e4;
54   --purple: #a45aec;
55   --purpleLight: #b375eb;
56   --purpleLighter: #d9baf5;
57   --purpleLightest: #fbf8fe;
58   --greyDarker: #6d727c;
59   --greyDark: #a4aaad;
60   --grey: #c1c4c6;
61   --greyLight: #d4d7d9;
62   --greyLighter: #f0f1f1;
63   --greyLightest: #f9fafa;
64   --blackDarker: #232323;
65   --blackDark: #363636;
66   --black: #484848;
67   --mainBodyType: var(--black);
68   --headerType: var(--grey);
69   --labelType: var(--black);
70   --messageFailureType: #b4251e;
71   --messageInfoType: #6e35a7;
72   --messageSuccessType: #33a046;
73   --messageWarningType: #a45c00;
74   --blurBackgroundColor: rgba(255,255,255,0.74902);
75   --blurBackgroundColorGrey: rgba(245,245,245,0.74902);
76   --blurBackgroundColorDark: rgba(22,22,22, 0.74902);
77   --linkColor: var(--blue);
78   --linkColorDarker: #0062cc;
79   --borderColorSubtle: var(--greyLightest);
80   --borderColorInlineElement: var(--greyLighter);
81   --borderColorSection: var(--greyLight);
82   --borderColorHard: var(--grey);
83   --tinySize: 10px;
84   --smallSize: 18px;
85   --mediumSize: 24px;
86   --largeSize: 28px;
87   --hugeSize: 36px;
88   --fontWeight: 200;
89   --contentPaddingSize: 4px;
90   --colPaddingSize: 4px;
91   --sectionPaddingSize: 12px 24px;
92   --formLabelPadding: 14px;
93   --topZIndex: 100;
94   --boldInverseColor: var(--black);
95 }
96
97 @media screen and (min-width: 600px) and (orientation: landscape) {
98   :root {
99     --tinySize: 11px;
100     --fontWeight: 200;
101     --contentPaddingSize: 20px;
102     --colPaddingSize: 6px;
103     --sectionPaddingSize: 16px 32px;
104   }
105 }
106
107 @media screen and (min-width: 768px) and (orientation: landscape) {
108   :root {
109     --tinySize: 12px;
110     --fontWeight: 100;
111     --contentPaddingSize: 40px;
112     --colPaddingSize: 8px;
113     --sectionPaddingSize: 19px 38px;
114   }
115 }
116
117 @media (prefers-color-scheme: dark) {
118   :root {
119     --mainBodyType: var(--black);
120     --headerType: var(--blackDarker);
121     --linkColor: var(--blueLighter);
122     --borderColorSubtle: var(--black);
123     --borderColorInlineElement: var(--greyDarker);
124     --borderColorSection: var(--blackDark);
125     --borderColorHard: var(--blackDarker);
126     --boldInverseColor: var(--white);
127   }
128 }
129
130
131 /* animations */
132
133 @keyframes blink-background {
134   0% {
135     opacity: 1.0;
136   }
137
138   50% {
139     opacity: 0.5;
140   }
141
142   100% {
143     opacity: 1.0;
144   }
145 }
146
147 @keyframes spin {
148   0% {
149     transform: rotate(0deg);
150   }
151
152   100% {
153     transform: rotate(360deg);
154   }
155 }
156
157
158 /* basics */
159 body {
160   margin: 0;
161   padding: 0;
162   text-align: start;
163   text-rendering: optimizeLegibility;
164   text-shadow: none;
165   text-transform: none;
166   white-space: normal;
167   letter-spacing: normal;
168   line-break: auto;
169   font-weight: var(--fontWeight);
170   background-color: var(--greyLightest);
171 }
172
173 @media (prefers-color-scheme: dark) {
174   body {
175     background: var(--blackDarker);
176     color: var(--greyLightest);
177   }
178 }
179
180 h1, h2, h3, h4, h5, h6, p, span, pre {
181   margin-block-start: 0;
182   margin-block-end: 0;
183   margin: 0;
184   font-weight: var(--fontWeight);
185 }
186
187 a {
188   color: var(--linkColor);
189 }
190
191 a:link, a:visited {
192   text-decoration: none;
193 }
194
195 a:hover {
196   text-decoration: underline;
197 }
198
199 .link-button:hover {
200   text-decoration: none;
201   cursor: pointer;
202 }
203
204 .divider, hr {
205   margin-block-start: 0.5em;
206   margin-block-end: 0.5em;
207   margin-inline-start: auto;
208   margin-inline-end: auto;
209   border-top-style: solid;
210   border-top-width: 1px;
211   border-color: var(--borderColorSection);
212   color: var(--borderColorSection);
213   background-color: var(--borderColorSection);
214   width: 100%;
215 }
216
217 .header, .topbar {
218   margin: 0;
219   margin-bottom: 18px;
220   border: 1px solid var(--headerType);
221   display: flex;
222   flex-direction: column;
223 }
224
225 .header>.title, .topbar>.title {
226   padding: 12px;
227   padding-left: var(--contentPaddingSize);
228   font-size: var(--largeSize);
229   font-weight: 400;
230   flex: auto;
231   overflow: hidden;
232 }
233
234 .header>.title>.logo, .topbar>.title>.logo {
235   display: inline-block;
236   vertical-align: middle;
237   margin-right: 10px;
238 }
239
240 .header>.title>.logo>img, .topbar>.title>.logo>img {
241   padding: 0;
242   margin: 0;
243   height: var(--hugeSize);
244   vertical-align: middle;
245 }
246
247 .header>.actions, .topbar>.actions {
248   flex: initial;
249   vertical-align: baseline;
250   border-top: 1px solid  var(--borderColorSection);
251   padding: 12px;
252   padding-left: 29px;
253   box-sizing: border-box;
254 }
255
256 .header>.actions>.list, .topbar>.actions>.list {
257   display: flex;
258   flex-direction: row;
259   border: none;
260   height: 100%;
261   align-items: center;
262 }
263
264 .header>.actions>.list>.item, .topbar>.actions>.list>.item {
265   border: none;
266   display: flex;
267   padding: 0 var(--colPaddingSize);
268   align-self: center;
269 }
270
271 .header>.actions>.list>.item *, .topbar>.actions>.list>.item * {
272   align-self: center;
273 }
274
275 .header.fixed,.topbar.fixed {
276   position: fixed;
277   top: 0;
278   width: 100%;
279   background-color: var(--blurBackgroundColor);
280   margin-bottom: 0px;
281   z-index: 12345;
282   -webkit-backdrop-filter: blur(3px);
283   min-height: calc(var(--largeSize) * 1.3 + 12px * 2);
284 }
285
286 .header.fixed>.actions, .topbar.fixed>.actions {
287   background-color: var(--blurBackgroundColor);
288   -webkit-backdrop-filter: blur(3px);
289 }
290
291 .header.fixed+.content, .topbar.fixed+.content {
292   margin-top: 130px;
293 }
294
295 @media (prefers-color-scheme: dark) {
296   .header.fixed, .topbar.fixed {
297     background-color: var(--blurBackgroundColorDark);
298     -webkit-backdrop-filter: blur(3px) brightness(150%);
299   }
300
301   .header.fixed>.actions, .topbar.fixed>.actions {
302     background: none;
303   }
304 }
305
306 @media screen and (min-width: 600px) and (orientation: landscape) {
307   .header, .topbar {
308     flex-direction: row;
309   }
310
311   .header>.actions, .topbar>.actions {
312     border-top: none;
313   }
314
315   .header.fixed+.content, .topbar.fixed+.content {
316     margin-top: 80px;
317   }
318
319   .header.fixed>.actions, .topbar.fixed>.actions {
320     background: none;
321   }
322 }
323
324 @media screen and (min-width: 768px) and (orientation: landscape) {
325   .header, .topbar {
326     flex-direction: row;
327   }
328
329   .header>.actions, .topbar>.actions {
330     border-top: none;
331   }
332
333   .header.fixed+.content, .topbar.fixed+.content {
334     margin-top: 80px;
335   }
336
337   .header.fixed>.actions, .topbar.fixed>.actions {
338     background: none;
339   }
340 }
341
342 .content {
343   padding: 0 var(--contentPaddingSize);
344 }
345
346 .row {
347   display: flex;
348   flex-direction: column;
349 }
350
351 [class*="col-"] {
352   width: 100%;
353   padding: var(--colPaddingSize) 0;
354 }
355
356 @media screen and (min-width: 600px) and (orientation: landscape) {
357   .row {
358     display: flex;
359     flex-direction: row;
360   }
361
362   .col-s-1 {
363     width: 8.33%;
364   }
365
366   .col-s-2 {
367     width: 16.66%;
368   }
369
370   .col-s-3 {
371     width: 25%;
372   }
373
374   .col-s-4 {
375     width: 33.33%;
376   }
377
378   .col-s-5 {
379     width: 41.66%;
380   }
381
382   .col-s-6 {
383     width: 50%;
384   }
385
386   .col-s-7 {
387     width: 58.33%;
388   }
389
390   .col-s-8 {
391     width: 66.66%;
392   }
393
394   .col-s-9 {
395     width: 75%;
396   }
397
398   .col-s-10 {
399     width: 83.33%;
400   }
401
402   .col-s-11 {
403     width: 91.66%;
404   }
405
406   .col-s-12 {
407     width: 100%;
408   }
409 }
410
411 @media screen and (min-width: 768px) and (orientation: landscape) {
412   /* For desktop: */
413   .row {
414     display: flex;
415     flex-direction: row;
416   }
417
418   .col-1 {
419     width: 8.33%;
420   }
421
422   .col-2 {
423     width: 16.66%;
424   }
425
426   .col-3 {
427     width: 25%;
428   }
429
430   .col-4 {
431     width: 33.33%;
432   }
433
434   .col-5 {
435     width: 41.66%;
436   }
437
438   .col-6 {
439     width: 50%;
440   }
441
442   .col-7 {
443     width: 58.33%;
444   }
445
446   .col-8 {
447     width: 66.66%;
448   }
449
450   .col-9 {
451     width: 75%;
452   }
453
454   .col-10 {
455     width: 83.33%;
456   }
457
458   .col-11 {
459     width: 91.66%;
460   }
461
462   .col-12 {
463     width: 100%;
464   }
465 }
466
467 .hide-for-xs {
468   display: none;
469 }
470
471 .hide-for-s {
472   display: none;
473 }
474
475 @media screen and (min-width: 600px) and (orientation: landscape) {
476   .hide-for-xs {
477     display: block;
478   }
479
480   .hide-for-s {
481     display: none;
482   }
483 }
484
485 @media screen and (min-width: 768px) and (orientation: landscape) {
486   .hide-for-s {
487     display: block;
488   }
489
490   .hide-for-xs {
491     display: block;
492   }
493 }
494
495 /* text */
496 .text, body, div, p, span, li, a, h4 {
497   font-family: -apple-system, system, HelveticaNeue, LucidaGrande;
498   font-size: var(--smallSize);
499   font-weight: var(--fontWeight);
500   font-stretch: normal;
501   font-style: normal;
502   font-variant-caps: normal;
503   line-height: 1.3;
504 }
505
506 xmp {
507   margin: 0;
508   padding: 0;
509   font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
510 }
511
512 pre {
513   border: 1px solid var(--borderColorInlineElement);
514   background-color: var(--greyLightest);
515   font-size: calc(var(--tinySize) + 1px);
516   font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
517   padding: 10px;
518   margin: 0;
519   color: var(--greyDarker);
520   overflow: auto;
521 }
522
523 @media (prefers-color-scheme: dark) {
524   pre {
525     background-color: var(--black);
526     color: var(--greyDark);
527   }
528 }
529
530 .text.tiny, h5, .text.tiny  * {
531   font-size: var(--tinySize);
532 }
533
534 .text.medium, h3, .text.medium  * {
535   font-size: var(--mediumSize);
536 }
537
538 .text.large, h2, .text.large  * {
539   font-size: var(--largeSize);
540 }
541
542 .text.huge, h1, .text.huge  * {
543   font-size: var(--hugeSize);
544 }
545
546 .text.block {
547   display: inline-block;
548   vertical-align: middle;
549   line-height: 1.1;
550 }
551
552 .text.success, .text.success * {
553   color: var(--greenDarker);
554 }
555
556 .text.failed, .text.failed * {
557   color: var(--redDarker);
558 }
559
560 .text.error, .text.error * {
561   color: var(--orangeDarker);
562 }
563
564
565 /* table */
566 .table {
567   padding: 0;
568   -webkit-border-horizontal-spacing: 0px;
569   -webkit-border-vertical-spacing: 0px;
570   margin: 12px 0;
571 }
572
573 .table.full-width {
574   width: 100%;
575   overflow: auto;
576 }
577
578 .table.stripped>tbody>tr:nth-child(odd) {
579   background-color: var(--greyLightest);
580 }
581
582 @media (prefers-color-scheme: dark) {
583   .table.stripped>tbody>tr:nth-child(odd) {
584     background-color: var(--black);
585   }
586 }
587
588 .table>thead>tr {
589   padding: 0;
590 }
591
592 .table>thead>tr>th {
593   padding: 12px;
594   border-bottom: 1px solid;
595   border-color: var(--borderColorInlineElement);
596   line-height: 1;
597   font-weight: 100;
598   text-align: left;
599 }
600
601 .table>tbody>tr>td {
602   line-height: 1;
603 }
604
605 .table>tbody>tr>td {
606   padding: 12px;
607 }
608
609 /* Dot */
610 .dot {
611   display: inline-block;
612   font-size: var(--tinySize);
613   width: var(--mediumSize);
614   height: var(--mediumSize);
615   border-radius: var(--mediumSize);
616   vertical-align: middle;
617   text-align: center;
618   padding: 0;
619   margin: 0 8px;
620   background-color: var(--greyDark);
621 }
622
623 .dot.blink {
624   -webkit-animation: blink-background 1s infinite;
625   /* Safari 4+ */
626   -moz-animation: blink-background 1s infinite;
627   /* Fx 5+ */
628   -o-animation: blink-background 1s infinite;
629   /* Opera 12+ */
630   animation: blink-background 1s infinite;
631   /* IE 10+, Fx 29+ */;
632 }
633
634 .dot * {
635   padding-top: 3px;
636   color: var(--greyLightest);
637   line-height: 1.1;
638 }
639
640 .dot.tiny {
641   font-size: calc(var(--tinySize) - 2px);
642   width: var(--tinySize);
643   height: var(--tinySize);
644   border-radius: var(--tinySize);
645 }
646
647 .dot.small {
648   font-size: var(--tinySize);
649   width: var(--smallSize);
650   height: var(--smallSize);
651   border-radius: var(--smallSize);
652 }
653
654 .dot.small * {
655   margin-top: 1px;
656 }
657
658 .dot.medium {
659   font-size: var(--smallSize)
660   width: var(--mediumSize);
661   height: var(--mediumSize);
662   border-radius: var(--mediumSize);
663 }
664
665 .dot.medium * {
666   padding-top: 3px;
667 }
668
669 .dot.large {
670   font-size: var(--mediumSize);
671   width: var(--largeSize);
672   height: var(--largeSize);
673   border-radius: var(--largeSize);
674 }
675
676 .dot.large * {
677   padding-top: 4px;
678 }
679
680 .dot.success {
681   background-color: var(--greenLight);
682 }
683
684 .dot.failed {
685   background-color: var(--redLight);
686 }
687
688 .dot.error {
689   background-color: var(--orangeLight);
690 }
691
692 .dot.clickable {
693   cursor: pointer;
694   border: 1px solid var(--greyDark);
695 }
696
697 .dot.clickable:hover {
698   border: 1px solid var(--greyDarker);
699 }
700
701 .dot.clickable:focus-within {
702   border: none;
703   background-color: var(--greyDarker);
704 }
705
706 .dot.clickable.success {
707   border: 1px solid var(--greenLight);
708 }
709
710 .dot.clickable.success:hover {
711   border: 1px solid var(--greenDark);
712 }
713
714 .dot.clickable.success:focus-within {
715   border: none;
716   background-color: var(--greenDark);
717 }
718
719 .dot.clickable.error {
720   border: 1px solid var(--orangeLight);
721 }
722
723 .dot.clickable.error:hover {
724   border: 1px solid var(--orangeDark);
725 }
726
727 .dot.clickable.error:focus-within {
728   border: none;
729   background-color: var(--orangeDark);
730 }
731
732 .dot.clickable.failed {
733   border: 1px solid var(--redLight);
734 }
735
736 .dot.clickable.failed:hover {
737   border: 1px solid var(--redDark);
738 }
739
740 .dot.clickable.failed:focus-within {
741   border: none;
742   background-color: var(--redDark);
743 }
744
745 .dot.selector {
746   display: flex;
747   flex-direction: column;
748   border-radius: 0;
749   background: none;
750   border: none;
751   width: auto;
752   height: auto;
753   margin: auto;
754 }
755
756 .dot.selector input {
757   opacity: 0;
758   width: 0;
759   height: 0;
760   margin: 0;
761   padding: 0;
762   border: none;
763 }
764
765 .dot.selector label {
766   margin: 0px;
767   padding: 2px;
768   display: flex;
769 }
770
771 .dot.selector .dot {
772   margin: 0px;
773   padding: 0px;
774 }
775
776 .dot.selector input:checked + .dot {
777   box-shadow: 0px 0px 5px 1px var(--grey);
778 }
779
780 .dot.selector input:checked + .dot.success {
781   box-shadow: 0px 0px 5px 1px var(--greenLight);
782 }
783
784 .dot.selector input:checked + .dot.failed {
785   box-shadow: 0px 0px 5px 1px var(--redLight);
786 }
787
788 .dot.selector input:checked + .dot.error {
789   box-shadow: 0px 0px 5px 1px var(--orangeLight);
790 }
791
792 /* icon */
793 .icon {
794   display: inline-block;
795   width: var(--mediumSize);
796   height: var(--mediumSize);
797   vertical-align: middle;
798 }
799
800 .icon.tiny {
801   width: var(--tinySize);
802   height: var(--tinySize);
803 }
804
805 .icon.small {
806   width: var(--smallSize);
807   height: var(--smallSize);
808 }
809
810 .icon.large {
811   width: var(--largeSize);
812   height: var(--largeSize);
813 }
814
815 .icon.huge {
816   width: var(--hugeSize);
817   height: var(--hugeSize);
818 }
819
820 /* section */
821 .section {
822   display: block;
823   border: 1px;
824   border-style: solid;
825   border-color: var(--borderColorSection);
826   border-radius: 11px;
827   margin-bottom: 15px;
828   background-color: var(--white);
829 }
830
831 @media (prefers-color-scheme: dark) {
832   .section .section {
833     border-color: var(--greyDarker);
834   }
835 }
836
837 @media (prefers-color-scheme: dark) {
838   .section {
839     background-color: var(--blackDark);
840   }
841 }
842
843 .section.article {
844   border: none;
845   margin-bottom: 0;
846 }
847
848 .section>.header {
849   display: flex;
850   flex-direction: column;
851   border: none;
852   margin-bottom: 0px;
853 }
854
855 .section>.header>.title {
856   padding: var(--sectionPaddingSize);
857   font-size: var(--mediumSize);
858   flex: auto;
859   padding-bottom: 0;
860 }
861
862 .section>.header>.title.small {
863   font-size: var(--smallSize);
864 }
865
866 .section>.content {
867   padding: var(--sectionPaddingSize);
868 }
869
870 .section>.content>.list {
871   width: 100%;
872 }
873
874 .section>.actions {
875   padding: var(--sectionPaddingSize);
876   padding-top: 0;
877   width: 100%;
878 }
879
880 @media screen and (min-width: 600px) and (orientation: landscape) {
881   .section>.header {
882     flex-direction: row;
883   }
884 }
885
886 @media screen and (min-width: 768px) and (orientation: landscape) {
887   .section>.header {
888     flex-direction: row;
889   }
890 }
891
892 /* list */
893 .list {
894   /*border-top: 1px solid var(--borderColorSection);*/;
895 }
896
897 .list>.item {
898   /*border-bottom: 1px solid var(--borderColorSection);*/
899   padding: var(--colPaddingSize);
900 }
901
902 .list>.item.sub {
903   color: var(--greyDarker);
904   font-size: calc(var(--smallSize) - 2px);
905 }
906
907 .list>.item>.list {
908   padding-left: var(--colPaddingSize);
909 }
910
911 /* sidebar */
912 .sidebar {
913   display: none;
914   height: 100%;
915   margin: 0;
916   padding: 0;
917   background-color: var(--blurBackgroundColor);
918   position: fixed;
919   border-right: 1px solid var(--borderColorSection);
920   overflow-y: auto;
921   min-width: 250px;
922   background-color: var(--blurBackgroundColor);
923   -webkit-backdrop-filter: blur(5px) brightness(88%);
924   backdrop-filter: blur(5px) brightness(88%);
925   z-index: var(--topZIndex);
926   right: 0;
927 }
928 .sidebar.hidden {
929   display: none;
930 }
931
932 .sidebar>.header {
933   margin-bottom: 0;
934   background-color: var(--white);
935   border: none;
936   border-bottom: 1px solid var(--borderColorSection);
937 }
938
939 .sidebar>.header>.title {
940   padding-left: var(--colPaddingSize);
941 }
942
943 .mobile-sidebar-control {
944   display: none;
945   float: right;
946 }
947 .mobile-sidebar-control.display {
948   display: block;
949 }
950
951 @media (prefers-color-scheme: dark) {
952   .sidebar {
953     background-color: var(--blurBackgroundColorDark);
954   }
955
956   .sidebar>.header {
957     background-color: var(--black);
958   }
959 }
960
961 .sidebar.under-topbar {
962   height: calc(100% - 12px * 2  - var(--largeSize) * 1.3);
963 }
964
965 .sidebar.under-topbar-with-actions {
966   height: calc(100% - 12px * 2  - var(--largeSize) * 1.3 - var(--smallSize) * 1.3 - 12px * 2 );
967   bottom: 0;
968 }
969
970 .main {
971   margin: auto;
972   height: 100%;
973   overflow: auto;
974 }
975
976 .main.under-topbar-with-actions {
977   margin-top: calc(12px * 2  + var(--largeSize) * 1.3 + var(--smallSize) * 1.3 + 12px * 2);
978 }
979
980 @media screen and (min-width: 600px) and (orientation: landscape) {
981   .sidebar {
982     display: block;
983     width: 299px;
984     z-index: 0;
985     left: 0;
986     right: unset;
987   }
988   .sidebar.left.hidden {
989     display: block;
990     left: -249px;
991   }
992   .sidebar.right.hidden {
993     display: block;
994     right: -249px;
995   }
996   .sidebar.under-topbar-with-actions {
997     height: calc(100% - 12px * 2  - var(--largeSize) * 1.3);
998     bottom: 0;
999   }
1000
1001   .mobile-sidebar-control.display {
1002     display: none;
1003   }
1004
1005   .main {
1006     margin-left: 299px;
1007     width: calc(100% - 299px);
1008   }
1009
1010   .main.left {
1011     margin-left: 0px;
1012     margin-right: 299px;
1013   }
1014   .main.right.hidden {
1015     margin-left: 50px;
1016     width: calc(100% - 50px);
1017   }
1018   .main.left.hidden {
1019     margin-left: 0;
1020     margin-right: 50px;
1021     width: calc(100% - 50px);
1022   }
1023
1024   .main.under-topbar-with-actions {
1025     margin-top: calc(12px * 2  + var(--largeSize) * 1.3);
1026   }
1027 }
1028
1029 @media screen and (min-width: 768px) and (orientation: landscape) {
1030   .sidebar {
1031     display: block;
1032     width: 310px;
1033     z-index: 0;
1034     left: 0;
1035     right: unset;
1036   }
1037   .sidebar.left.hidden {
1038     display: block;
1039     left: -260px;
1040   }
1041   .sidebar.right.hidden {
1042     display: block;
1043     right: -260px;
1044   }
1045   .sidebar.under-topbar-with-actions {
1046     height: calc(100% - 12px * 2  - var(--largeSize) * 1.3);
1047     bottom: 0;
1048   }
1049
1050   .main {
1051     margin-left: 310px;
1052     width: calc(100% - 310px);
1053   }
1054
1055   .main.left {
1056     margin-left: 0px;
1057     margin-right: 310px;
1058   }
1059
1060   .main.under-topbar-with-actions {
1061     margin-top: calc(12px * 2  + var(--largeSize) * 1.3);
1062   }
1063 }
1064
1065 .sidebar.right {
1066   left: unset;
1067   right: 0;
1068 }
1069
1070 .sidebar>.list {
1071   width: 100%;
1072 }
1073
1074 .sidebar.content {
1075   width: 100%;
1076 }
1077
1078 .sidebar.toggle {
1079   display: block;
1080 }
1081
1082 .sidebar>.bottom-nav {
1083   position: absolute;
1084 }
1085
1086 /* bottom nav*/
1087 .bottom-nav {
1088   display: flex;
1089   flex-direction: row;
1090   background: var(--greyLight);
1091 }
1092
1093 .bottom-nav>.item {
1094   align-self: center;
1095 }
1096
1097 /*chip*/
1098 .chip {
1099   display: inline-block;
1100   padding: 4px 12px;
1101   border: 1px solid var(--borderColorInlineElement);
1102   border-radius: 50px;
1103   margin: 5px;
1104   font-size: var(--tinySize);
1105 }
1106
1107 .chip .dot {
1108   margin-left: 0;
1109 }
1110
1111 .chip  * {
1112   font-size: var(--tinySize);
1113 }
1114
1115 .chip.outline {
1116   border: 1px solid var(--borderColorHard);
1117 }
1118
1119 .chip.narrow {
1120   padding: 1px 8px;
1121   margin: 1px;
1122 }
1123
1124 .chip.narrow * {
1125   font-size: calc(var(--tinySize) - 4px);
1126 }
1127
1128 .chip.success, .chip.success * {
1129   color: var(--greenDarker);
1130   border-color: var(--greenDarker);
1131 }
1132
1133 .chip.failed, .chip.failed * {
1134   color: var(--redDarker);
1135   border-color: var(--redDarker);
1136 }
1137
1138 .chip.error, .chip.error * {
1139   color: var(--orangeDarker);
1140   border-color: var(--orangeDarker);
1141 }
1142
1143 /*badge*/
1144 .badge {
1145   display: inline-block;
1146   padding: 4px 12px;
1147   border: 1px solid var(--borderColorInlineElement);
1148   margin: 5px;
1149 }
1150
1151 .badge.outline {
1152   border-color: var(--borderColorHard);
1153 }
1154
1155 .badge.active {
1156   border-color: var(--blue);
1157 }
1158
1159 .badge.outline.active {
1160   border-color: var(--blueDarker);
1161 }
1162
1163 .badge[onclick] {
1164   cursor: pointer;
1165 }
1166
1167 .badge.clickable {
1168   cursor: pointer;
1169 }
1170
1171 .badge.clickable:hover {
1172   border-color: var(--blueLighter);
1173 }
1174
1175
1176 /*placeholder*/
1177 .placeholder {
1178   width: 100%;
1179   min-height: 200px;
1180   text-align: center;
1181   display: flex;
1182 }
1183
1184 .placeholder .loader {
1185   align-self: center;
1186   margin: auto;
1187 }
1188
1189 .placeholder.dimmer {
1190   background: var(--greyLighter);
1191 }
1192
1193 @media (prefers-color-scheme: dark) {
1194   .placeholder.dimmer {
1195     background-color: var(--blackDarker);
1196   }
1197 }
1198
1199 .placeholder.small {
1200   min-height: 100px;
1201 }
1202
1203 .placeholder.tiny {
1204   min-height: 50px;
1205 }
1206
1207 /*loader*/
1208 .loader {
1209   text-align: center;
1210 }
1211
1212 .loader>.text {
1213   text-align: center;
1214 }
1215
1216 .spinner {
1217   width: var(--mediumSize);
1218   height: var(--mediumSize);
1219   border: 4px solid var(--greyLight);
1220   border-top: 4px solid var(--black);
1221   border-radius: 50%;
1222   animation: spin .5s linear infinite;
1223   display: inline-block;
1224 }
1225
1226 .spinner.tiny {
1227   width: var(--tinySize);
1228   height: var(--tinySize);
1229 }
1230
1231 .spinner.small {
1232   width: var(--smallSize);
1233   height: var(--smallSize);
1234 }
1235
1236 .spinner.large {
1237   width: var(--largeSize);
1238   height: var(--largeSize);
1239 }
1240
1241 .spinner.huge {
1242   width: var(--hugeSize);
1243   height: var(--hugeSize);
1244 }
1245
1246 .spinner.blue {
1247   border: 4px solid var(--blueLightest);
1248   border-top: 4px solid var(--blue);
1249 }
1250
1251 .spinner.green {
1252   border: 4px solid var(--greenLightest);
1253   border-top: 4px solid var(--green);
1254 }
1255
1256 .spinner.red {
1257   border: 4px solid var(--redLightest);
1258   border-top: 4px solid var(--red);
1259 }
1260
1261 .spinner.orange {
1262   border: 4px solid var(--orangeLightest);
1263   border-top: 4px solid var(--orange);
1264 }
1265
1266 .spinner.purple {
1267   border: 4px solid var(--purpleLightest);
1268   border-top: 4px solid var(--purple);
1269 }
1270
1271
1272 /*button*/
1273 .button {
1274   display: inline-block;
1275   border: 1px solid var(--greyLight);
1276   font-size: calc(var(--smallSize) - 2px);
1277   background: none;
1278   padding: 4px var(--formLabelPadding);
1279   border-radius: 4px;
1280   font-weight: var(--fontWeight);
1281   vertical-align: bottom;
1282 }
1283
1284 .button[disabled] {
1285   border-color: var(--greyLightest);
1286   background: var(--white);
1287   color: var(--greyLight);
1288 }
1289
1290 .button:hover {
1291   border-color: var(--greyDarker);
1292 }
1293
1294 .button[disabled]:hover {
1295   border-color: var(--greyLightest);
1296   background: var(--white);
1297   color: var(--greyLight);
1298 }
1299
1300 .button:active {
1301   border-color: var(--greyDark);
1302   background: var(--greyLightest);
1303   color: var(--greyDark);
1304 }
1305
1306 .button[disabled]:active {
1307   border-color: var(--greyLightest);
1308   background: var(--white);
1309   color: var(--greyLight);
1310 }
1311
1312 .button.primary {
1313   border-color: var(--blueDark);
1314   background-color: var(--blue);
1315   color: var(--white);
1316 }
1317
1318 .button[disabled].primary {
1319   border-color: var(--blueLightest);
1320   background-color: var(--blueLighter);
1321   color: var(--white);
1322 }
1323
1324 .button.primary:hover {
1325   border-color: var(--blueDarker);
1326   background-color: var(--blueLight);
1327 }
1328
1329 .button[disabled].primary:hover {
1330   border-color: var(--blueLightest);
1331   background-color: var(--blueLighter);
1332   color: var(--white);
1333 }
1334
1335 .button.primary:active {
1336   border-color: var(--blueDarker);
1337   background-color: var(--blueDark);
1338 }
1339
1340 .button[disabled].primary:active {
1341   border-color: var(--blueLightest);
1342   background-color: var(--blueLighter);
1343   color: var(--white);
1344 }
1345
1346 .button.danger {
1347   border-color: var(--redDark);
1348   background-color: var(--red);
1349   color: var(--white);
1350 }
1351
1352 .button[disabled].danger {
1353   border-color: var(--redLightest);
1354   background-color: var(--redLighter);
1355   color: var(--white);
1356 }
1357
1358 .button.danger:hover {
1359   border-color: var(--redDarker);
1360   background-color: var(--redLight);
1361 }
1362
1363 .button[disabled].danger:hover {
1364   border-color: var(--redLightest);
1365   background-color: var(--redLighter);
1366   color: var(--white);
1367 }
1368
1369 .button.danger:active {
1370   border-color: var(--redDarker);
1371   background-color: var(--redDark);
1372 }
1373
1374 .button[disabled].danger:active {
1375   border-color: var(--redLightest);
1376   background-color: var(--redLighter);
1377   color: var(--white);
1378 }
1379
1380 .button.tiny {
1381   font-size: var(--tinySize);
1382   padding: 3px 8px;
1383 }
1384
1385 .button.medium {
1386   font-size: calc(var(--mediumSize) - 2px);
1387   padding: 5px 17px;
1388 }
1389
1390 .button.large {
1391   font-size: calc(var(--largeSize) - 2px);
1392   padding: 7px 19px;
1393 }
1394
1395 .button.huge {
1396   font-size: calc(var(--hugeSize) - 2px);
1397   padding: 9px 21px;
1398 }
1399
1400 @media (prefers-color-scheme: dark) {
1401   .button {
1402     color: var(--grey);
1403   }
1404
1405   .button[disabled] {
1406     color: var(--greyDarker);
1407     border-color: var(--greyDarker);
1408     background: none;
1409   }
1410
1411   .button[disabled]:hover {
1412     color: var(--greyDarker);
1413     border-color: var(--greyDarker);
1414     background: none;
1415   }
1416
1417   .button[disabled].primary {
1418     border-color: var(--blueDarker);
1419     background-color: var(--blueDarker);
1420     color: var(--greyDarker);
1421     opacity: 0.7;
1422   }
1423
1424   .button[disabled].primary:hover {
1425     border-color: var(--blueDarker);
1426     background-color: var(--blueDarker);
1427     color: var(--greyDarker);
1428     opacity: 0.7;
1429   }
1430
1431   .button[disabled].danger {
1432     border-color: var(--redDarker);
1433     color: var(--greyDarker);
1434     background-color: var(--redDarker);
1435     opacity: 0.7;
1436   }
1437
1438   .button[disabled].danger:hover {
1439     border-color: var(--redDarker);
1440     color: var(--greyDarker);
1441     background-color: var(--redDarker);
1442     opacity: 0.7;
1443   }
1444 }
1445
1446 /*switch*/
1447 .switch {
1448   position: relative;
1449   display: inline-block;
1450   width: calc(var(--smallSize) * 2);
1451   height: calc(var(--smallSize) + 4px);
1452   flex: none;
1453 }
1454
1455 .switch input {
1456   opacity: 0;
1457   width: 0;
1458   height: 0;
1459 }
1460
1461 .slider {
1462   position: absolute;
1463   cursor: pointer;
1464   top: 0;
1465   left: 0;
1466   right: 0;
1467   bottom: 0;
1468   background-color: var(--white);
1469   -webkit-transition: .4s;
1470   transition: .4s;
1471   border-radius: 34px;
1472   border: 1.5px solid var(--greyLight);
1473   padding: 0;
1474   margin: 0;
1475 }
1476
1477 .slider::before {
1478   position: absolute;
1479   content: "";
1480   height: calc(var(--smallSize) + 1px);
1481   width: calc(var(--smallSize) + 1px);
1482   left: -1px;
1483   bottom: -0.25px;
1484   background-color: var(--white);
1485   -webkit-transition: .4s;
1486   transition: .4s;
1487   border-radius: 50%;
1488   border: 1px solid var(--greyLight);
1489   box-shadow: 0.5px 2px 5px 0px var(--grey);
1490 }
1491
1492 @media (prefers-color-scheme: dark) {
1493   .slider {
1494     background-color: var(--black);
1495     border: 1.5px solid var(--blackDark);
1496   }
1497
1498   .slider::before {
1499     background-color: var(--black);
1500     border: 1.5px solid var(--blackDark);
1501     box-shadow: 0.5px 2px 5px 0px var(--blackDarker);
1502   }
1503 }
1504
1505 .switch input:checked + .slider {
1506   background-color: var(--green);
1507   border: 1px solid var(--green);
1508 }
1509
1510 .switch  input:focus + .slider {
1511   border: 1px solid var(--green);
1512 }
1513
1514 .switch  input:checked + .slider:before {
1515   transform: translateX(calc(var(--smallSize) - 4px));
1516   bottom: -0.5px;
1517 }
1518
1519
1520 /*popover*/
1521 .popover {
1522   display: inline-block;
1523   position: relative;
1524 }
1525
1526 .popover>.content>.section {
1527   margin: 8px;
1528   background: var(--white);
1529 }
1530
1531 .popover:focus>.content, .popover:hover>.content {
1532   display: block;
1533   opacity: 1;
1534   transform: translate(-50%, -100%) scale(1);
1535 }
1536
1537 .popover>.content {
1538   left: 50%;
1539   top: 0;
1540   opacity: 0;
1541   position: absolute;
1542   transform: translate(-50%,-50%) scale(0);
1543   transition: transform .2s;
1544   z-index: 300;
1545   margin: 0;
1546   padding: 0;
1547 }
1548
1549 .popover.right>.content {
1550   left: 100%;
1551   top: 50%;
1552 }
1553
1554 .popover.right :focus>.content, .popover.right:hover>.content {
1555   transform: translate(0, -50%) scale(1);
1556 }
1557
1558 .popover.left>.content {
1559   left: 0;
1560   top: 50%;
1561 }
1562
1563 .popover.left :focus>.content, .popover.left:hover>.content {
1564   transform: translate(-100%, -50%) scale(1);
1565 }
1566
1567 .popover.bottom>.content {
1568   left: 350%;
1569   top: 100%;
1570 }
1571
1572 .popover.bottom :focus>.content, .popover.bottom:hover>.content {
1573   transform: translate(-50%, 0) scale(1);
1574 }
1575
1576
1577 /* drawer */
1578 .drawer {
1579   position: fixed;
1580   bottom: 0;
1581   left: 0;
1582   transition: height .5s;
1583   width: 100%;
1584   height: 0%;
1585   overflow: auto;
1586   border-top: 1px solid var(--blurBackgroundColor);
1587   background-color: var(--blurBackgroundColor);
1588   -webkit-backdrop-filter: blur(5px) brightness(88%);
1589   backdrop-filter: blur(5px) brightness(88%);
1590   box-sizing: border-box;
1591   z-index: var(--topZIndex);
1592 }
1593
1594 .drawer.display {
1595   height: 30%;
1596   box-shadow: 0px 0px 5px 1px var(--grey);
1597 }
1598
1599 @media (prefers-color-scheme: dark) {
1600   .drawer {
1601     background-color: var(--blurBackgroundColorDark);
1602     border-color: var(--blurBackgroundColorDark);
1603     -webkit-backdrop-filter: blur(5px) brightness(150%);
1604     backdrop-filter: blur(5px) brightness(150%);
1605   }
1606
1607   .drawer.display {
1608     box-shadow: 0px 0px 5px 1px var(--black);
1609   }
1610 }
1611
1612 .drawer.left {
1613   left: 0;
1614   width: 0%;
1615   height: 100%;
1616   transition: width .5s;
1617   border: none;
1618   border-right: 1px solid var(--blurBackgroundColor);
1619 }
1620
1621 @media (prefers-color-scheme: dark) {
1622   .drawer.left {
1623     border-right: 1px solid var(--blurBackgroundColorDark);
1624   }
1625 }
1626
1627 .drawer.left.display {
1628   width: 45%;
1629 }
1630
1631 .drawer.right {
1632   right: 0;
1633   bottom: 0;
1634   left: auto;
1635   width: 0%;
1636   height: 100%;
1637   transition: width .5s;
1638   border: none;
1639   border-left: 1px solid var(--blurBackgroundColor);
1640 }
1641
1642 @media (prefers-color-scheme: dark) {
1643   .drawer.right {
1644     border-left: 1px solid var(--blurBackgroundColorDark);
1645   }
1646 }
1647
1648 .drawer.right.display {
1649   width: 45%;
1650 }
1651
1652 .drawer.left.under-topbar, .drawer.right.under-topbar {
1653   height: calc(100% - 12px * 2  - var(--largeSize) * 1.3);
1654 }
1655
1656 .drawer.left.under-topbar-with-actions, .drawer.right.under-topbar-with-actions {
1657   height: calc(100% - 12px * 2  - var(--largeSize) * 1.3 - var(--smallSize) * 1.3 - 12px * 2 );
1658 }
1659
1660 @media screen and (min-width: 600px) and (orientation: landscape) {
1661   .drawer.left.display, .drawer.right.display {
1662     width: 20%;
1663   }
1664
1665   .drawer.left.under-topbar-with-actions, .drawer.right.under-topbar-with-actions {
1666     height: calc(100% - 12px * 2  - var(--largeSize) * 1.3);
1667   }
1668 }
1669
1670 @media screen and (min-width: 768px) and (orientation: landscape) {
1671   .drawer.left.display, .drawer.right.display {
1672     width: 20%;
1673   }
1674
1675   .drawer.left.under-topbar-with-actions, .drawer.right.under-topbar-with-actions {
1676     height: calc(100% - 12px * 2  - var(--largeSize) * 1.3);
1677   }
1678 }
1679
1680 .drawer .header {
1681   border: none;
1682   margin-bottom: 5px;
1683 }
1684
1685 .drawer .header>.title.small {
1686   font-size: var(--smallSize);
1687   padding-left: 0;
1688 }
1689
1690 .drawer .badge {
1691   border-color: var(--greyLight);
1692   background-color: var(--blurBackgroundColor);
1693   -webkit-backdrop-filter: blur(0.5px);
1694 }
1695
1696 .drawer .chip {
1697   background-color: var(--blurBackgroundColor);
1698   -webkit-backdrop-filter: blur(0.5px);
1699 }
1700
1701 .drawer pre {
1702   background-color: var(--blurBackgroundColor);
1703   -webkit-backdrop-filter: blur(0.5px);
1704 }
1705
1706 .drawer .badge.active {
1707   border-color: var(--blueLight);
1708 }
1709
1710 @media (prefers-color-scheme: dark) {
1711   .drawer .badge {
1712     background-color: var(--blurBackgroundColorDark);
1713     -webkit-backdrop-filter: blur(5px) brightness(150%);
1714     backdrop-filter: blur(5px) brightness(150%);
1715   }
1716
1717   .drawer .chip {
1718     background-color: var(--blurBackgroundColorDark);
1719     -webkit-backdrop-filter: blur(5px) brightness(150%);
1720     backdrop-filter: blur(5px) brightness(150%);
1721   }
1722
1723   .drawer pre {
1724     background-color: var(--blurBackgroundColorDark);
1725     -webkit-backdrop-filter: blur(5px) brightness(150%);
1726     backdrop-filter: blur(5px) brightness(150%);
1727   }
1728 }
1729
1730 .drawer>.close-header {
1731   width: 100%;
1732   display: flex;
1733   position: fixed;
1734   text-align: center;
1735 }
1736
1737 .drawer>.close-header>.list {
1738   width: 100%;
1739   flex-direction: column;
1740   height: 20px;
1741   padding: 0;
1742   margin: 0;
1743 }
1744
1745 .drawer>.close-header>.list>.item {
1746   padding: 0;
1747   margin: 0;
1748   vertical-align: center;
1749 }
1750
1751 .drawer>.close-header+.content {
1752   margin-top: 20px;
1753   height: calc(100% - 20px);
1754 }
1755
1756 /* Tab */
1757 .tabs {
1758   text-align: center;
1759   display: flex;
1760   width: 100%;
1761   border-bottom: 1px solid var(--greyLight);
1762   margin-bottom: 15px;
1763 }
1764
1765 .tabs .tab:first-child {
1766   padding-left: 0px;
1767 }
1768
1769 .tabs .title {
1770   color: var(--greyDarker);
1771   font-size: calc(var(--smallSize) + 2px);
1772 }
1773
1774 .tabs .tab {
1775   padding-left: 60px;
1776 }
1777
1778 .tabs .tab.active .link {
1779   border-bottom: 1px solid var(--greyDarker);
1780 }
1781
1782 .tabs .tab .link {
1783   padding-top: 2px;
1784   padding-bottom: 4px;
1785   display: block;
1786   font-size: calc(var(--smallSize) - 2px);
1787 }
1788
1789 .tabs .tab a.link {
1790   color: var(--greyDarker);
1791   cursor: pointer;
1792 }
1793
1794 .tabs .tab a.link:hover {
1795   color: var(--linkColor);
1796   text-decoration: none;
1797 }
1798
1799 @media (prefers-color-scheme: dark) {
1800   .tabs .title {
1801     color: var(--grey);
1802     font-size: calc(var(--smallSize) + 2px);
1803   }
1804
1805   .tabs .tab.active .link {
1806     border-bottom: 1px solid var(--grey);
1807   }
1808
1809   .tabs .tab a.link {
1810     color: var(--grey);
1811   }
1812 }
1813
1814 a.disabled {
1815   color: var(--grey);
1816   pointer-events: none; 
1817 }
1818
1819 /* timeline */
1820 .timeline {
1821   display: flex;
1822   flex-direction: row;
1823   padding: 0;
1824   margin: 2px 0;
1825 }
1826
1827 .timeline.no-border {
1828   border: none;
1829 }
1830
1831 .timeline>.content {
1832   overflow-x: auto;
1833   overflow-y: hidden;
1834   padding: 0;
1835   margin: 0;
1836   vertical-align: middle;
1837   flex: auto;
1838 }
1839
1840 .timeline>.header {
1841   margin: 0;
1842   text-align: right;
1843   border: none;
1844   vertical-align: middle;
1845   display: block;
1846   padding-right: 10px;
1847   overflow: auto;
1848   position: relative;
1849   border-left: 1px solid var(--borderColorInlineElement);
1850   flex: none;
1851 }
1852
1853 .timeline>.header .series {
1854   margin: 8px 0;
1855   margin-left: 5px;
1856   display: block;
1857   vertical-align: middle;
1858   font-size: var(--tinySize);
1859   line-height: var(--mediumSize);
1860   white-space: nowrap;
1861 }
1862 .timeline>.header .series * {
1863   line-height: var(--mediumSize);
1864   font-size: var(--tinySize);
1865 }
1866 .timeline>.header .series a {
1867   line-height: var(--mediumSize);
1868 }
1869
1870 .timeline>.content .series {
1871   display: flex;
1872   white-space: nowrap;
1873   margin: 8px 0;
1874   height: var(--mediumSize);
1875   vertical-align: middle;
1876 }
1877
1878 .timeline>.content .dot {
1879   vertical-align: middle;
1880   margin: 0 calc(var(--tinySize) / 2 );
1881   width: var(--smallSize);
1882   height: var(--smallSize);
1883   border-radius: var(--smallSize);
1884   display: flex;
1885   align-items: center;
1886   position: relative;
1887 }
1888
1889 .timeline>.content .dot.clickable {
1890   border: none;
1891 }
1892
1893 .timeline>.content .dot.clickable:hover {
1894   border: none;
1895 }
1896
1897 .timeline>.content .dot.clickable:active {
1898   border: none;
1899 }
1900
1901 .timeline>.content .dot .tag {
1902   font-size: calc(var(--tinySize) * 0.8);
1903   position: absolute;
1904   left: calc(0px - var(--tinySize) / 2);
1905   top: calc(var(--smallSize));
1906   height: var(--tinySize);
1907   line-height: 1;
1908   text-align: center;
1909   width: calc(var(--smallSize) + var(--tinySize));
1910   padding-top: 2px;
1911 }
1912
1913 .timeline>.content .dot::before, .timeline>.content .dot::after {
1914   content: "";
1915   height: 1px;
1916   background: var(--borderColorInlineElement);
1917   width: calc(var(--tinySize) / 2 );
1918   display: inline-block;
1919   flex: none;
1920 }
1921
1922 .timeline>.content .dot::before {
1923   margin-left: calc(0px - var(--tinySize) / 2);
1924 }
1925
1926 .timeline>.content .dot::after {
1927   margin-left: calc(var(--smallSize));
1928 }
1929
1930 .timeline>.content .dot.blink::before {
1931   animation: none;
1932 }
1933
1934 .timeline>.content .dot.blink::after {
1935   animation: none;
1936 }
1937
1938 .timeline>.content .dot.empty {
1939   height: 1px;
1940   margin-top: calc((var(--smallSize) - 1px) / 2);
1941   background: var(--grey);
1942 }
1943
1944 .timeline>.content .dot.empty::before {
1945   vertical-align: top;
1946 }
1947
1948 .timeline>.content .dot.empty::after {
1949   vertical-align: top;
1950 }
1951
1952 .timeline>.content .x-axis {
1953   display: flex;
1954   margin: 8px 0;
1955   min-height: calc(var(--smallSize) * 4);
1956 }
1957
1958 .timeline>.content>.x-axis .scale {
1959   font-size: var(--smallSize);
1960   width: calc(var(--smallSize) + var(--tinySize));
1961   text-align: center;
1962   border-top: 1px solid var(--borderColorInlineElement);
1963   flex: none;
1964   position: relative;
1965 }
1966
1967 .timeline>.content>.x-axis .scale.group-2 {
1968   width: calc((var(--smallSize) + var(--tinySize)) * 2);
1969 }
1970
1971 .timeline>.content>.x-axis .scale.group-3 {
1972   width: calc((var(--smallSize) + var(--tinySize)) * 3);
1973 }
1974
1975 .timeline>.content>.x-axis .scale.group-4 {
1976   width: calc((var(--smallSize) + var(--tinySize)) * 4);
1977 }
1978
1979 .timeline>.content>.x-axis .scale.group-5 {
1980   width: calc((var(--smallSize) + var(--tinySize)) * 5);
1981 }
1982
1983 .timeline>.content>.x-axis .scale.group-6 {
1984   width: calc((var(--smallSize) + var(--tinySize)) * 6);
1985 }
1986
1987 .timeline>.content>.x-axis .scale.group-7 {
1988   width: calc((var(--smallSize) + var(--tinySize)) * 7);
1989 }
1990
1991 .timeline>.content>.x-axis .scale.group-8 {
1992   width: calc((var(--smallSize) + var(--tinySize)) * 8);
1993 }
1994
1995 .timeline>.content>.x-axis .scale.group-9 {
1996   width: calc((var(--smallSize) + var(--tinySize)) * 9);
1997 }
1998
1999 .timeline>.content>.x-axis .scale.group-10 {
2000   width: calc((var(--smallSize) + var(--tinySize)) * 10);
2001 }
2002
2003 .timeline>.content>.x-axis .scale.group-11 {
2004   width: calc((var(--smallSize) + var(--tinySize)) * 11);
2005 }
2006
2007 .timeline>.content>.x-axis .scale.group-12 {
2008   width: calc((var(--smallSize) + var(--tinySize)) * 12);
2009 }
2010
2011 .timeline>.content>.x-axis .scale.group-13 {
2012   width: calc((var(--smallSize) + var(--tinySize)) * 13);
2013 }
2014
2015 .timeline>.content>.x-axis .scale.group-14 {
2016   width: calc((var(--smallSize) + var(--tinySize)) * 14);
2017 }
2018
2019 .timeline>.content>.x-axis .scale.group-15 {
2020   width: calc((var(--smallSize) + var(--tinySize)) * 15);
2021 }
2022
2023 .timeline>.content>.x-axis .scale.group-16 {
2024   width: calc((var(--smallSize) + var(--tinySize)) * 16);
2025 }
2026
2027 .timeline>.content>.x-axis .scale.group-17 {
2028   width: calc((var(--smallSize) + var(--tinySize)) * 17);
2029 }
2030
2031 .timeline>.content>.x-axis .scale.group-18 {
2032   width: calc((var(--smallSize) + var(--tinySize)) * 18);
2033 }
2034
2035 .timeline>.content>.x-axis .scale.group-19 {
2036   width: calc((var(--smallSize) + var(--tinySize)) * 19);
2037 }
2038
2039 .timeline>.content>.x-axis .scale.group-20 {
2040   width: calc((var(--smallSize) + var(--tinySize)) * 20);
2041 }
2042
2043 .timeline>.content>.x-axis .scale[class*="group-"] {
2044   border-color: var(--black);
2045 }
2046
2047 .timeline>.content>.x-axis .scale .line {
2048   width: 2px;
2049   height: var(--tinySize);
2050   margin: auto;
2051   display: block;
2052   background: var(--grey);
2053 }
2054
2055 .timeline>.content>.x-axis .scale .text {
2056   position: relative;
2057   left: calc(var(--tinySize) / 2);
2058   font-size: var(--tinySize);
2059   min-height: calc(var(--smallSize) * 4);
2060   display: block;
2061   -webkit-transform-origin: 10% 25%;
2062   -moz-transform-origin: 10% 25%;
2063   -ms-transform-origin: 10% 25%;
2064   -o-transform-origin: 10% 25%;
2065   transform-origin: 10% 25%;
2066   -webkit-transform: rotate(60deg);
2067   -moz-transform: rotate(60deg);
2068   -o-transform: rotate(60deg);
2069   -ms-transform: rotate(60deg);
2070   transform: rotate(60deg);
2071   white-space: nowrap;
2072 }
2073
2074 .timeline>.content>.x-axis.scale-90deg .scale .text {
2075   -webkit-transform-origin: 0% 25%;
2076   -moz-transform-origin: 0% 25%;
2077   -ms-transform-origin: 0% 25%;
2078   -o-transform-origin: 0% 25%;
2079   transform-origin: 0% 25%;
2080   top: -12px;
2081   -webkit-transform: rotate(90deg);
2082   -moz-transform: rotate(90deg);
2083   -o-transform: rotate(90deg);
2084   -ms-transform: rotate(90deg);
2085   transform: rotate(90deg);
2086 }
2087
2088 .timeline>.content>.x-axis .scale[class*="group-"] .border-line-left {
2089   position: absolute;
2090   top: calc(0px - var(--tinySize) / 2);
2091   left: 0;
2092   height: calc(var(--tinySize) / 2);
2093   width: 2px;
2094   background: var(--black);
2095 }
2096
2097 .timeline>.content>.x-axis .scale[class*="group-"] .border-line-right {
2098   position: absolute;
2099   top: calc(0px - var(--tinySize) / 2);
2100   right: 0;
2101   height: calc(var(--tinySize) / 2);
2102   width: 2px;
2103   background: var(--black);
2104 }
2105
2106 .timeline>.content>.x-axis .scale[class*="group-"] .line {
2107   background: var(--black);
2108 }
2109
2110 .timeline>.content>.x-axis .scale[class*="group-"] .text {
2111   min-height: calc(var(--smallSize));
2112   position: absolute;
2113   left: 50%;
2114   top: calc(8px + var(--tinySize));
2115 }
2116
2117 .timeline>.content>.x-axis.scale-90deg .scale[class*="group-"] .text {
2118   top: calc(4px + var(--tinySize));
2119 }
2120
2121 .timeline>.content>.x-axis.top .scale {
2122   border: none;
2123   border-bottom: 1px solid var(--borderColorInlineElement);
2124 }
2125
2126 .timeline>.content>.x-axis.top .scale[class*="group-"]{
2127   border-color: var(--black);
2128 }
2129
2130 .timeline>.content>.x-axis.top .scale .line {
2131   width: 2px;
2132   height: var(--tinySize);
2133   left: 50%;
2134   bottom: 0;
2135   display: block;
2136   background: var(--grey);
2137   position: absolute;
2138 }
2139
2140 .timeline>.content>.x-axis.top .scale[class*="group-"] .line {
2141   background: var(--black);
2142 }
2143
2144 .timeline>.content>.x-axis.top .scale .text {
2145   left: calc(var(--tinySize) * 2);
2146   min-height: calc(var(--smallSize) * 4);
2147   top: calc(var(--smallSize) * 2);
2148   -webkit-transform: rotate(300deg);
2149   -moz-transform: rotate(300deg);
2150   -o-transform: rotate(300deg);
2151   -ms-transform: rotate(300deg);
2152   transform: rotate(300deg);
2153   white-space: nowrap;
2154 }
2155
2156 .timeline>.content>.x-axis.top .scale[class*="group-"] .border-line-left {
2157   top: auto;
2158   bottom: calc(0px - var(--tinySize) / 2);
2159 }
2160
2161 .timeline>.content>.x-axis.top .scale[class*="group-"] .border-line-right {
2162   top: auto;
2163   bottom: calc(0px - var(--tinySize) / 2);
2164 }
2165
2166 .timeline>.content>.x-axis.top .scale[class*="group-"] .text {
2167   left: 54%;
2168 }
2169
2170 .timeline>.header.with-top-x-axis {
2171   padding-top: calc(var(--smallSize) * 4.5);
2172 }
2173
2174 .timeline>.content>.x-axis .scale .text a {
2175   font-size: var(--tinySize);
2176 }
2177
2178 .lengend, .timeline>.content .lengend{
2179   display: flex;
2180   flex-direction: row;
2181 }
2182
2183 .lengend.horizontal, .timeline>.header .lengend {
2184   display: flex;
2185   flex-direction: column;
2186 }
2187
2188 .lengend>.item {
2189   font-size: var(--tinySize);
2190   text-align: left;
2191   margin: 4px;
2192   display: flex;
2193   vertical-align: middle;
2194   align-items: center;
2195 }
2196
2197 .lengend>.item .dot{
2198   width: var(--smallSize);
2199   height: var(--smallSize);
2200   border-radius: var(--smallSize);
2201   font-size: calc(var(--tinySize));
2202   text-align: middle;
2203   flex: none;
2204   vertical-align: middle;
2205   align-items: center;
2206   display: flex;
2207   margin: 0 var(--tinySize);
2208   position: relative;
2209 }
2210 .lengend>.item .dot .text {
2211   font-size: calc(var(--tinySize));
2212   font-weight: 400;
2213   text-align: center;
2214   width: var(--smallSize);
2215   height: var(--smallSize);
2216   line-height: var(--smallSize);
2217   padding: 0;
2218   margin: 0;
2219   display: inline-block;
2220   -webkit-touch-callout: none;
2221   -webkit-user-select: none;
2222   user-select: none;
2223   cursor: default;
2224 }
2225 .timeline.lengend>.item .dot::before{
2226   left: calc(0px - var(--tinySize));
2227   width: var(--tinySize);
2228   content: "";
2229   height: 1px;
2230   background: var(--borderColorInlineElement);
2231   display: inline-block;
2232   flex: none;
2233   position: absolute;
2234 }
2235 .timeline.lengend>.item .dot::after{
2236   right: calc(0px - var(--tinySize));
2237   width: var(--tinySize);
2238   content: "";
2239   height: 1px;
2240   background: var(--borderColorInlineElement);
2241   display: inline-block;
2242   flex: none;
2243   position: absolute;
2244 }
2245 .lengend>.item .label{
2246   font-size: var(--tinySize);
2247   padding: 0 4px;
2248 }
2249
2250 @media (prefers-color-scheme: dark) {
2251
2252   .timeline>.content>.x-axis .scale[class*="group-"] {
2253     border-color: var(--white);
2254   }
2255
2256   .timeline>.content>.x-axis .scale[class*="group-"] .border-line-left {
2257     background: var(--white);
2258   }
2259
2260   .timeline>.content>.x-axis .scale[class*="group-"] .border-line-right {
2261     background: var(--white);
2262   }
2263
2264   .timeline>.content>.x-axis .scale[class*="group-"] .line {
2265     background: var(--white);
2266   }
2267
2268   .timeline>.content>.x-axis.top .scale[class*="group-"] .line {
2269     background: var(--white);
2270   }
2271
2272   .timeline>.content>.x-axis.top .scale[class*="group-"]{
2273     border-color: var(--white);
2274   }
2275 }
2276
2277 /* form and input*/
2278 .input {
2279   margin: var(--colPaddingSize);
2280   margin-left: 0;
2281   position: relative;
2282   display: flex;
2283   align-items: center;
2284 }
2285
2286 .row .input {
2287   margin: 0;
2288   margin-right: var(--colPaddingSize);
2289 }
2290
2291 .input>label {
2292   margin: 0;
2293   margin-left: var(--formLabelPadding);
2294   color: var(--greyDarker);
2295 }
2296 @media (prefers-color-scheme: dark) {
2297   .input>label {
2298     color: var(--grey);
2299   }
2300 }
2301
2302 .input>label.switch {
2303   flex: none;
2304   position: absolute;
2305   right: 0;
2306 }
2307
2308 .input>input, .input>select {
2309   width: 100%;
2310   margin: 0;
2311 }
2312
2313 .input>.prefix {
2314   width: calc(var(--mediumSize) * 3);
2315   background: var(--greyLightest);
2316   position: absolute;
2317   left: 0;
2318   height: 100%;
2319   border-radius: 4px 0 0 4px;
2320   display: flex;
2321   align-items: center;
2322   border: 1px solid var(--grey);
2323   box-sizing: border-box;
2324 }
2325
2326 .input>.prefix * {
2327   text-align: center;
2328   width: 100%;
2329 }
2330
2331 .input>.prefix~label {
2332   margin-left: calc(var(--formLabelPadding) + var(--mediumSize) * 3);
2333 }
2334
2335 .input>.prefix.invalid {
2336   border-color: var(--red);
2337 }
2338
2339 .input>input[type="text"][required], .input>input[type="number"][required],
2340 .input>input[type="password"][required], .input>input[type="email"][required], .input>select {
2341   -webkit-appearance: none;
2342   -moz-appearance: none;
2343   appearance: none;
2344   font-size: var(--smallSize);
2345   box-sizing: border-box;
2346   padding-top: calc(var(--tinySize) + 4px);
2347   padding-left: var(--formLabelPadding);
2348   padding-right: var(--formLabelPadding);
2349   text-align: left;
2350   border-radius: 4px;
2351   border: 1px solid var(--grey);
2352   background: none;
2353   vertical-align: top;
2354 }
2355
2356 .input>input[type="text"][required][disabled], .input>input[type="number"][required][disabled],
2357 .input>input[type="password"][required][disabled], .input>input[type="email"][required][disabled], .input>select[disabled] {
2358   border: 1px solid var(--greyLighter);
2359 }
2360
2361 .input>.prefix+input[type="text"][required], .input>.prefix+input[type="number"][required],
2362 .input>.prefix+input[type="password"][required], .input>.prefix+input[type="email"][required], .input>.prefix+select {
2363   padding-left: calc(var(--formLabelPadding) + var(--mediumSize) * 3);
2364 }
2365
2366 .input>input[type="text"][required]~label, .input>input[type="number"][required]~label,
2367 .input>input[type="password"][required]~label, .input>input[type="email"][required]~label, .input>select~label {
2368   pointer-events: none;
2369   display: block;
2370   position: absolute;
2371   top: calc((var(--tinySize) + 4px) / 2);
2372   color: var(--greyDarker);
2373   transition-timing-function: ease-in;
2374   transition-duration: .125s;
2375   font-size: var(--smallSize);
2376   height: var(--smallSize);
2377   z-index: 1;
2378 }
2379
2380 .input>input[type="text"][required][disabled], .input>input[type="number"][required][disabled],
2381 .input>input[type="password"][required][disabled], .input>input[type="email"][required][disabled], .input>select[disabled] {
2382   color: var(--greyDarker);
2383 }
2384
2385 .input>input[type="text"][required][disabled]~label, .input>input[type="number"][required][disabled]~label,
2386 .input>input[type="password"][required][disabled]~label, .input>input[type="email"][required][disabled]~label, .input>select[disabled]~label {
2387   color: var(--grey);
2388   font-size: var(--tinySize);
2389   top: 4px;
2390 }
2391
2392
2393 .input>input[type="text"][required]:focus, .input>input[type="number"][required]:focus,
2394 .input>input[type="password"][required]:focus, .input>input[type="email"][required]:focus, .input>select:focus {
2395   -webkit-appearance: none;
2396   -moz-appearance: none;
2397   appearance: none;
2398   border: 1px solid var(--blue);
2399   border-radius: 4px;
2400   box-shadow: none;
2401 }
2402
2403 .input>input[type="text"][required]:focus~label, .input>input[type="number"][required]:focus~label,
2404 .input>input[type="password"][required]:focus~label, .input>input[type="email"][required]:focus~label {
2405   font-size: var(--tinySize);
2406   top: 4px;
2407 }
2408
2409 .input>input[type="text"][required]:valid~label, .input>input[type="number"][required]:valid~label,
2410 .input>input[type="password"][required]:valid~label, .input>input[type="email"][required]:valid~label, .input>select:valid~label {
2411   font-size: var(--tinySize);
2412   top: 4px;
2413 }
2414
2415 @media (prefers-color-scheme: dark) {
2416   .input>.prefix {
2417     background-color: var(--black);
2418   }
2419
2420   .input>input[type="text"][required], .input>input[type="number"][required],
2421   .input>input[type="password"][required], .input>input[type="email"][required], .input>select {
2422     color: var(--white);
2423   }
2424
2425   .input>input[type="text"][required]~label, .input>input[type="number"][required]~label,
2426   .input>input[type="password"][required]~label, .input>input[type="email"][required]~label, .input>select~label {
2427     color: var(--grey);
2428   }
2429
2430   .input>input[type="text"][required][disabled], .input>input[type="number"][required][disabled],
2431   .input>input[type="password"][required][disabled], .input>input[type="email"][required][disabled], .input>select[disabled] {
2432     border: 1px solid var(--greyDarker);
2433     color: var(--blackDark);
2434   }
2435
2436   .input>input[type="text"][required][disabled]~label, .input>input[type="number"][required][disabled]~label,
2437   .input>input[type="password"][required][disabled]~label, .input>input[type="email"][required][disabled]~label, .input>select[disabled]~label {
2438     color: var(--greyDarker);
2439   }
2440
2441   .input>input[type="text"][required]:focus, .input>input[type="number"][required]:focus,
2442   .input>input[type="password"][required]:focus, .input>input[type="email"][required]:focus, .input>select:focus {
2443     color: var(--white);
2444   }
2445 }
2446
2447 .input>input[type="number"]:out-of-range, .input>input[type="text"][required].invalid, .input>input[type="number"][required].invalid,
2448 .input>input[type="password"][required].invalid, .input>input[type="email"][required].invalid, .input>select.invalid {
2449   border-color: var(--red);
2450   color: var(--red);
2451 }
2452
2453 .input>input[type="number"]:out-of-range~label, .input>input[type="text"][required].invalid~label, .input>input[type="number"][required].invalid~label,
2454 .input>input[type="password"][required].invalid~label, .input>input[type="email"][required].invalid~label, .input>select.invalid~label {
2455   color: var(--red);
2456   font-size: var(--tinySize);
2457   top: 4px;
2458 }
2459
2460 .input>input[type="number"]::-webkit-inner-spin-button {
2461   -webkit-appearance: none;
2462   appearance: none;
2463 }
2464
2465 .input>input[type="range"] {
2466   -webkit-appearance: none;
2467   -moz-appearance: none;
2468   appearance: none;
2469   opacity: 0.8;
2470   background: var(--grey);
2471   outline: none;
2472   transition-duration: .125s;
2473   height: 2px;
2474   width: auto;
2475   margin: 0 var(--formLabelPadding);
2476   flex: auto;
2477 }
2478
2479 .input>input[type="range"]:hover {
2480   opacity: 1;
2481 }
2482
2483 .input>input[type="range"]::-webkit-slider-thumb {
2484   -webkit-appearance: none;
2485   appearance: none;
2486   width: var(--tinySize);
2487   height: var(--tinySize);
2488   background: var(--grey);
2489   border-radius: var(--tinySize);
2490   cursor: pointer;
2491 }
2492
2493 .input>input[type="range"]::-webkit-slider-thumb:hover {
2494   background: var(--greyDarker);
2495 }
2496
2497 .input>input[type="range"].invalid::-webkit-slider-thumb {
2498   background: var(--red);
2499 }
2500
2501 .input>input[type="range"].invalid::-webkit-slider-thumb:hover {
2502   background: var(--red);
2503 }
2504
2505 .input>input[type="range"]:out-of-range, .input>input[type="range"].invalid {
2506   background: var(--red);
2507 }
2508
2509 .input>input[type="range"]:out-of-range::-webkit-slider-thumb, .input>input[type="range"].invalid::-webkit-slider-thumb {
2510   color: var(--red);
2511 }
2512
2513 .input>input[type="range"]+input[type="number"] {
2514   background: none;
2515   width: auto;
2516   min-width: calc(var(--mediumSize) * 2);
2517   border: 1px solid var(--grey);
2518   text-align: right;
2519   padding: 3px;
2520 }
2521
2522 .input>input[type="range"]+input[type="number"]:out-of-range {
2523   border-color: var(--red);
2524   color: var(--red);
2525 }
2526
2527 @media (prefers-color-scheme: dark) {
2528   .input>input[type="range"]+input[type="number"] {
2529     color: var(--white);
2530   }
2531 }
2532
2533 .input>input[type="range"]+input[type="number"]::-webkit-inner-spin-button {
2534   -webkit-appearance: none;
2535   appearance: none;
2536 }
2537
2538 .input>.double-range {
2539   flex: auto;
2540 }
2541
2542 .input>label + .double-range {
2543   margin-left: var(--formLabelPadding);
2544 }
2545
2546 .double-range {
2547   display: flex;
2548   align-items: center;
2549 }
2550
2551 .double-range>.range {
2552   flex: auto;
2553   position: relative;
2554   margin: 0 var(--formLabelPadding);
2555   height: var(--tinySize);
2556 }
2557
2558 .double-range>input[type="number"] {
2559   background: none;
2560   min-width: calc(var(--mediumSize) * 2);
2561   border: 1px solid var(--grey);
2562   text-align: right;
2563   padding: 3px;
2564 }
2565
2566 .double-range>input[type="number"]::-webkit-inner-spin-button {
2567   -webkit-appearance: none;
2568   appearance: none;
2569 }
2570
2571 .double-range>.range>input[type="range"] {
2572   width: 100%;
2573   -webkit-appearance: none;
2574   -moz-appearance: none;
2575   appearance: none;
2576   opacity: 1;
2577   background: var(--grey);
2578   outline: none;
2579   transition-duration: .125s;
2580   height: 2px;
2581   pointer-events: none;
2582   position: absolute;
2583   left: 0;
2584   top: calc(var(--tinySize) / 2 - 2px);
2585 }
2586
2587 @media (prefers-color-scheme: dark) {
2588   .double-range>.range>input[type="range"] {
2589     background: var(--greyDark);
2590   }
2591
2592   .double-range>input[type="number"] {
2593     color: var(--white);
2594   }
2595 }
2596
2597 .double-range>.range>input[type="range"]:first::-webkit-slider-thumb {
2598   background: var(--grey);
2599 }
2600
2601 .double-range>.range>input[type="range"]:last-child::-webkit-slider-thumb {
2602   background: var(--greyDarker);
2603 }
2604
2605 .double-range>.range>input[type="range"]::-webkit-slider-thumb {
2606   -webkit-appearance: none;
2607   -moz-appearance: none;
2608   appearance: none;
2609   pointer-events: all;
2610   position: relative;
2611   width: var(--tinySize);
2612   height: var(--tinySize);
2613   background: var(--grey);
2614   outline: none;
2615   opacity: 1;
2616   z-index: 1;
2617 }
2618
2619 /* progress bar */
2620 .progress-bar-container {
2621   display: flex;
2622   width: 100%;
2623   background: var(--greyLightest);
2624 }
2625
2626 @media (prefers-color-scheme: dark) {
2627   .progress-bar-container {
2628     background: var(--black);
2629   }
2630 }
2631
2632 .progress-bar-container .progress-bar {
2633   background: var(--blue);
2634   color: var(--white);
2635   min-width: 0%;
2636   text-align: center;
2637   overflow: hidden;
2638   height: var(--mediumSize);
2639   font-size: var(--tinySize);
2640   line-height: var(--mediumSize);
2641 }
2642
2643 .progress-bar-container .progress-bar.success {
2644   background: var(--green);
2645 }
2646
2647 .progress-bar-container .progress-bar.failed {
2648   background: var(--red);
2649 }
2650
2651 .progress-bar-container .progress-bar.error {
2652   background: var(--orange);
2653 }
2654
2655 .unselectable {
2656   -webkit-touch-callout: none;
2657   -webkit-user-select: none;
2658   user-select: none;
2659 }
2660
2661 .desktop-control {
2662   display: none;
2663 }
2664
2665 @media screen and (min-width: 600px) and (orientation: landscape) {
2666   .desktop-control {
2667     display: block;
2668   }
2669 }