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