client/public/mini-custom.css

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