1@charset "UTF-8"; 2/* 3 Flavor name: Default (mini-default) 4 Author: Angelos Chalaris ([email protected]) 5 Maintainers: Angelos Chalaris 6 mini.css version: v3.0.0-alpha.3 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.125rem; 24 --universal-border-radius: 0.125rem; 25 --a-link-color: #0277bd; 26 --a-visited-color: #01579b; } 27 28html { 29 font-size: 14px; } 30 31a, b, del, em, i, ins, q, span, strong, u { 32 font-size: 1em; } 33 34html, * { 35 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif; 36 line-height: 1.4; 37 -webkit-text-size-adjust: 100%; } 38 39* { 40 font-size: 1rem; } 41 42body { 43 margin: 0; 44 color: var(--fore-color); 45 background: var(--back-color); } 46 47details { 48 display: block; } 49 50summary { 51 display: list-item; } 52 53abbr[title] { 54 border-bottom: none; 55 text-decoration: underline dotted; } 56 57input { 58 overflow: visible; } 59 60img { 61 max-width: 100%; 62 height: auto; } 63 64h1, h2, h3, h4, h5, h6 { 65 line-height: 1.2; 66 margin: calc(1.5 * var(--universal-margin)) var(--universal-margin); 67 font-weight: 500; } 68 h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { 69 color: var(--secondary-fore-color); 70 display: block; 71 margin-top: -0.25rem; } 72 73h1 { 74 font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio)); } 75 76h2 { 77 font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio); ); 78 background: var(--mark-back-color); 79 font-weight: 600; 80 padding: 0.1em 0.5em 0.2em 0.5em; 81 color: var(--mark-fore-color); } 82 83h3 { 84 font-size: calc(1rem * var(--heading-ratio)); 85 padding-left: calc(2 * var(--universal-margin)); 86 /* background: var(--border-color); */ 87 } 88 89h4 { 90 font-size: 1rem;); 91 padding-left: calc(4 * var(--universal-margin)); } 92 93h5 { 94 font-size: 1rem; } 95 96h6 { 97 font-size: calc(1rem / var(--heading-ratio)); } 98 99p { 100 margin: var(--universal-margin); } 101 102ol, ul { 103 margin: var(--universal-margin); 104 padding-left: calc(6 * var(--universal-margin)); } 105 106b, strong { 107 font-weight: 700; } 108 109hr { 110 box-sizing: content-box; 111 border: 0; 112 line-height: 1.25em; 113 margin: var(--universal-margin); 114 height: 0.0625rem; 115 background: linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent); } 116 117blockquote { 118 display: block; 119 position: relative; 120 font-style: italic; 121 color: var(--secondary-fore-color); 122 margin: var(--universal-margin); 123 padding: calc(3 * var(--universal-padding)); 124 border: 0.0625rem solid var(--secondary-border-color); 125 border-left: 0.375rem solid var(--blockquote-color); 126 border-radius: 0 var(--universal-border-radius) var(--universal-border-radius) 0; } 127 blockquote:before { 128 position: absolute; 129 top: calc(0rem - var(--universal-padding)); 130 left: 0; 131 font-family: sans-serif; 132 font-size: 3rem; 133 font-weight: 700; 134 content: "\201c"; 135 color: var(--blockquote-color); } 136 blockquote[cite]:after { 137 font-style: normal; 138 font-size: 0.75em; 139 font-weight: 700; 140 content: "\a— " attr(cite); 141 white-space: pre; } 142 143code, kbd, pre, samp { 144 font-family: Menlo, Consolas, monospace; 145 font-size: 0.85em; } 146 147code { 148 background: var(--secondary-back-color); 149 border-radius: var(--universal-border-radius); 150 padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2); } 151 152kbd { 153 background: var(--fore-color); 154 color: var(--back-color); 155 border-radius: var(--universal-border-radius); 156 padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2); } 157 158pre { 159 overflow: auto; 160 background: var(--secondary-back-color); 161 padding: calc(1.5 * var(--universal-padding)); 162 margin: var(--universal-margin); 163 border: 0.0625rem solid var(--secondary-border-color); 164 border-left: 0.25rem solid var(--pre-color); 165 border-radius: 0 var(--universal-border-radius) var(--universal-border-radius) 0; } 166 167sup, sub, code, kbd { 168 line-height: 0; 169 position: relative; 170 vertical-align: baseline; } 171 172small, sup, sub, figcaption { 173 font-size: 0.75em; } 174 175sup { 176 top: -0.5em; } 177 178sub { 179 bottom: -0.25em; } 180 181figure { 182 margin: var(--universal-margin); } 183 184figcaption { 185 color: var(--secondary-fore-color); } 186 187a { 188 text-decoration: none; } 189 a:link { 190 color: var(--a-link-color); } 191 a:visited { 192 color: var(--a-visited-color); } 193 a:hover, a:focus { 194 text-decoration: underline; } 195 196/* 197 Definitions for the grid system, cards and containers. 198*/ 199.container { 200 margin: 0 auto; 201 padding: 0 calc(1.5 * var(--universal-padding)); } 202 203.row { 204 box-sizing: border-box; 205 display: flex; 206 flex: 0 1 auto; 207 flex-flow: row wrap; } 208 209.col-sm, 210[class^='col-sm-'], 211[class^='col-sm-offset-'], 212.row[class*='cols-sm-'] > * { 213 box-sizing: border-box; 214 flex: 0 0 auto; 215 padding: 0 calc(var(--universal-padding) / 2); } 216 217.col-sm, 218.row.cols-sm > * { 219 max-width: 100%; 220 flex-grow: 1; 221 flex-basis: 0; } 222 223.col-sm-1, 224.row.cols-sm-1 > * { 225 max-width: 8.3333333333%; 226 flex-basis: 8.3333333333%; } 227 228.col-sm-offset-0 { 229 margin-left: 0; } 230 231.col-sm-2, 232.row.cols-sm-2 > * { 233 max-width: 16.6666666667%; 234 flex-basis: 16.6666666667%; } 235 236.col-sm-offset-1 { 237 margin-left: 8.3333333333%; } 238 239.col-sm-3, 240.row.cols-sm-3 > * { 241 max-width: 25%; 242 flex-basis: 25%; } 243 244.col-sm-offset-2 { 245 margin-left: 16.6666666667%; } 246 247.col-sm-4, 248.row.cols-sm-4 > * { 249 max-width: 33.3333333333%; 250 flex-basis: 33.3333333333%; } 251 252.col-sm-offset-3 { 253 margin-left: 25%; } 254 255.col-sm-5, 256.row.cols-sm-5 > * { 257 max-width: 41.6666666667%; 258 flex-basis: 41.6666666667%; } 259 260.col-sm-offset-4 { 261 margin-left: 33.3333333333%; } 262 263.col-sm-6, 264.row.cols-sm-6 > * { 265 max-width: 50%; 266 flex-basis: 50%; } 267 268.col-sm-offset-5 { 269 margin-left: 41.6666666667%; } 270 271.col-sm-7, 272.row.cols-sm-7 > * { 273 max-width: 58.3333333333%; 274 flex-basis: 58.3333333333%; } 275 276.col-sm-offset-6 { 277 margin-left: 50%; } 278 279.col-sm-8, 280.row.cols-sm-8 > * { 281 max-width: 66.6666666667%; 282 flex-basis: 66.6666666667%; } 283 284.col-sm-offset-7 { 285 margin-left: 58.3333333333%; } 286 287.col-sm-9, 288.row.cols-sm-9 > * { 289 max-width: 75%; 290 flex-basis: 75%; } 291 292.col-sm-offset-8 { 293 margin-left: 66.6666666667%; } 294 295.col-sm-10, 296.row.cols-sm-10 > * { 297 max-width: 83.3333333333%; 298 flex-basis: 83.3333333333%; } 299 300.col-sm-offset-9 { 301 margin-left: 75%; } 302 303.col-sm-11, 304.row.cols-sm-11 > * { 305 max-width: 91.6666666667%; 306 flex-basis: 91.6666666667%; } 307 308.col-sm-offset-10 { 309 margin-left: 83.3333333333%; } 310 311.col-sm-12, 312.row.cols-sm-12 > * { 313 max-width: 100%; 314 flex-basis: 100%; } 315 316.col-sm-offset-11 { 317 margin-left: 91.6666666667%; } 318 319.col-sm-normal { 320 order: initial; } 321 322.col-sm-first { 323 order: -999; } 324 325.col-sm-last { 326 order: 999; } 327 328@media screen and (min-width: 500px) { 329 .col-md, 330 [class^='col-md-'], 331 [class^='col-md-offset-'], 332 .row[class*='cols-md-'] > * { 333 box-sizing: border-box; 334 flex: 0 0 auto; 335 padding: 0 calc(var(--universal-padding) / 2); } 336 337 .col-md, 338 .row.cols-md > * { 339 max-width: 100%; 340 flex-grow: 1; 341 flex-basis: 0; } 342 343 .col-md-1, 344 .row.cols-md-1 > * { 345 max-width: 8.3333333333%; 346 flex-basis: 8.3333333333%; } 347 348 .col-md-offset-0 { 349 margin-left: 0; } 350 351 .col-md-2, 352 .row.cols-md-2 > * { 353 max-width: 16.6666666667%; 354 flex-basis: 16.6666666667%; } 355 356 .col-md-offset-1 { 357 margin-left: 8.3333333333%; } 358 359 .col-md-3, 360 .row.cols-md-3 > * { 361 max-width: 25%; 362 flex-basis: 25%; } 363 364 .col-md-offset-2 { 365 margin-left: 16.6666666667%; } 366 367 .col-md-4, 368 .row.cols-md-4 > * { 369 max-width: 33.3333333333%; 370 flex-basis: 33.3333333333%; } 371 372 .col-md-offset-3 { 373 margin-left: 25%; } 374 375 .col-md-5, 376 .row.cols-md-5 > * { 377 max-width: 41.6666666667%; 378 flex-basis: 41.6666666667%; } 379 380 .col-md-offset-4 { 381 margin-left: 33.3333333333%; } 382 383 .col-md-6, 384 .row.cols-md-6 > * { 385 max-width: 50%; 386 flex-basis: 50%; } 387 388 .col-md-offset-5 { 389 margin-left: 41.6666666667%; } 390 391 .col-md-7, 392 .row.cols-md-7 > * { 393 max-width: 58.3333333333%; 394 flex-basis: 58.3333333333%; } 395 396 .col-md-offset-6 { 397 margin-left: 50%; } 398 399 .col-md-8, 400 .row.cols-md-8 > * { 401 max-width: 66.6666666667%; 402 flex-basis: 66.6666666667%; } 403 404 .col-md-offset-7 { 405 margin-left: 58.3333333333%; } 406 407 .col-md-9, 408 .row.cols-md-9 > * { 409 max-width: 75%; 410 flex-basis: 75%; } 411 412 .col-md-offset-8 { 413 margin-left: 66.6666666667%; } 414 415 .col-md-10, 416 .row.cols-md-10 > * { 417 max-width: 83.3333333333%; 418 flex-basis: 83.3333333333%; } 419 420 .col-md-offset-9 { 421 margin-left: 75%; } 422 423 .col-md-11, 424 .row.cols-md-11 > * { 425 max-width: 91.6666666667%; 426 flex-basis: 91.6666666667%; } 427 428 .col-md-offset-10 { 429 margin-left: 83.3333333333%; } 430 431 .col-md-12, 432 .row.cols-md-12 > * { 433 max-width: 100%; 434 flex-basis: 100%; } 435 436 .col-md-offset-11 { 437 margin-left: 91.6666666667%; } 438 439 .col-md-normal { 440 order: initial; } 441 442 .col-md-first { 443 order: -999; } 444 445 .col-md-last { 446 order: 999; } } 447@media screen and (min-width: 1280px) { 448 .col-lg, 449 [class^='col-lg-'], 450 [class^='col-lg-offset-'], 451 .row[class*='cols-lg-'] > * { 452 box-sizing: border-box; 453 flex: 0 0 auto; 454 padding: 0 calc(var(--universal-padding) / 2); } 455 456 .col-lg, 457 .row.cols-lg > * { 458 max-width: 100%; 459 flex-grow: 1; 460 flex-basis: 0; } 461 462 .col-lg-1, 463 .row.cols-lg-1 > * { 464 max-width: 8.3333333333%; 465 flex-basis: 8.3333333333%; } 466 467 .col-lg-offset-0 { 468 margin-left: 0; } 469 470 .col-lg-2, 471 .row.cols-lg-2 > * { 472 max-width: 16.6666666667%; 473 flex-basis: 16.6666666667%; } 474 475 .col-lg-offset-1 { 476 margin-left: 8.3333333333%; } 477 478 .col-lg-3, 479 .row.cols-lg-3 > * { 480 max-width: 25%; 481 flex-basis: 25%; } 482 483 .col-lg-offset-2 { 484 margin-left: 16.6666666667%; } 485 486 .col-lg-4, 487 .row.cols-lg-4 > * { 488 max-width: 33.3333333333%; 489 flex-basis: 33.3333333333%; } 490 491 .col-lg-offset-3 { 492 margin-left: 25%; } 493 494 .col-lg-5, 495 .row.cols-lg-5 > * { 496 max-width: 41.6666666667%; 497 flex-basis: 41.6666666667%; } 498 499 .col-lg-offset-4 { 500 margin-left: 33.3333333333%; } 501 502 .col-lg-6, 503 .row.cols-lg-6 > * { 504 max-width: 50%; 505 flex-basis: 50%; } 506 507 .col-lg-offset-5 { 508 margin-left: 41.6666666667%; } 509 510 .col-lg-7, 511 .row.cols-lg-7 > * { 512 max-width: 58.3333333333%; 513 flex-basis: 58.3333333333%; } 514 515 .col-lg-offset-6 { 516 margin-left: 50%; } 517 518 .col-lg-8, 519 .row.cols-lg-8 > * { 520 max-width: 66.6666666667%; 521 flex-basis: 66.6666666667%; } 522 523 .col-lg-offset-7 { 524 margin-left: 58.3333333333%; } 525 526 .col-lg-9, 527 .row.cols-lg-9 > * { 528 max-width: 75%; 529 flex-basis: 75%; } 530 531 .col-lg-offset-8 { 532 margin-left: 66.6666666667%; } 533 534 .col-lg-10, 535 .row.cols-lg-10 > * { 536 max-width: 83.3333333333%; 537 flex-basis: 83.3333333333%; } 538 539 .col-lg-offset-9 { 540 margin-left: 75%; } 541 542 .col-lg-11, 543 .row.cols-lg-11 > * { 544 max-width: 91.6666666667%; 545 flex-basis: 91.6666666667%; } 546 547 .col-lg-offset-10 { 548 margin-left: 83.3333333333%; } 549 550 .col-lg-12, 551 .row.cols-lg-12 > * { 552 max-width: 100%; 553 flex-basis: 100%; } 554 555 .col-lg-offset-11 { 556 margin-left: 91.6666666667%; } 557 558 .col-lg-normal { 559 order: initial; } 560 561 .col-lg-first { 562 order: -999; } 563 564 .col-lg-last { 565 order: 999; } } 566/* Card component CSS variable definitions */ 567:root { 568 --card-back-color: #f8f8f8; 569 --card-fore-color: #111; 570 --card-border-color: #ddd; } 571 572.card { 573 display: flex; 574 flex-direction: column; 575 justify-content: space-between; 576 align-self: center; 577 position: relative; 578 width: 100%; 579 background: var(--card-back-color); 580 color: var(--card-fore-color); 581 border: 0.0625rem solid var(--card-border-color); 582 border-radius: var(--universal-border-radius); 583 margin: var(--universal-margin); 584 overflow: hidden; } 585 @media screen and (min-width: 320px) { 586 .card { 587 max-width: 320px; } } 588 .card > .sectione { 589 background: var(--card-back-color); 590 color: var(--card-fore-color); 591 box-sizing: border-box; 592 margin: 0; 593 border: 0; 594 border-radius: 0; 595 border-bottom: 0.0625rem solid var(--card-border-color); 596 padding: var(--universal-padding); 597 width: 100%; } 598 .card > .sectione.media { 599 height: 200px; 600 padding: 0; 601 -o-object-fit: cover; 602 object-fit: cover; } 603 .card > .sectione:last-child { 604 border-bottom: 0; } 605 606/* 607 Custom elements for card elements. 608*/ 609@media screen and (min-width: 240px) { 610 .card.small { 611 max-width: 240px; } } 612@media screen and (min-width: 480px) { 613 .card.large { 614 max-width: 480px; } } 615.card.fluid { 616 max-width: 100%; 617 width: auto; } 618 619.card.warning { 620/* --card-back-color: #ffca28; */ 621 --card-back-color: #e5b8b7; 622 --card-border-color: #e8b825; } 623 624.card.error { 625 --card-back-color: #b71c1c; 626 --card-fore-color: #f8f8f8; 627 --card-border-color: #a71a1a; } 628 629.card > .sectione.dark { 630 --card-back-color: #e0e0e0; } 631 632.card > .sectione.double-padded { 633 padding: calc(1.5 * var(--universal-padding)); } 634 635/* 636 Definitions for forms and input elements. 637*/ 638/* Input_control module CSS variable definitions */ 639:root { 640 --form-back-color: #f0f0f0; 641 --form-fore-color: #111; 642 --form-border-color: #ddd; 643 --input-back-color: #f8f8f8; 644 --input-fore-color: #111; 645 --input-border-color: #ddd; 646 --input-focus-color: #0288d1; 647 --input-invalid-color: #d32f2f; 648 --button-back-color: #e2e2e2; 649 --button-hover-back-color: #dcdcdc; 650 --button-fore-color: #212121; 651 --button-border-color: transparent; 652 --button-hover-border-color: transparent; 653 --button-group-border-color: rgba(124, 124, 124, 0.54); } 654 655form { 656 background: var(--form-back-color); 657 color: var(--form-fore-color); 658 border: 0.0625rem solid var(--form-border-color); 659 border-radius: var(--universal-border-radius); 660 margin: var(--universal-margin); 661 padding: calc(2 * var(--universal-padding)) var(--universal-padding); } 662 663fieldset { 664 border: 0.0625rem solid var(--form-border-color); 665 border-radius: var(--universal-border-radius); 666 margin: calc(var(--universal-margin) / 4); 667 padding: var(--universal-padding); } 668 669legend { 670 box-sizing: border-box; 671 display: table; 672 max-width: 100%; 673 white-space: normal; 674 font-weight: 700; 675 padding: calc(var(--universal-padding) / 2); } 676 677label { 678 padding: calc(var(--universal-padding) / 2) var(--universal-padding); } 679 680.input-group { 681 display: inline-block; } 682 .input-group.fluid { 683 display: flex; 684 align-items: center; 685 justify-content: center; } 686 .input-group.fluid > input { 687 max-width: 100%; 688 flex-grow: 1; 689 flex-basis: 0px; } 690 @media screen and (max-width: 499px) { 691 .input-group.fluid { 692 align-items: stretch; 693 flex-direction: column; } } 694 .input-group.vertical { 695 display: flex; 696 align-items: stretch; 697 flex-direction: column; } 698 .input-group.vertical > input { 699 max-width: 100%; 700 flex-grow: 1; 701 flex-basis: 0px; } 702 703[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { 704 height: auto; } 705 706[type="search"] { 707 -webkit-appearance: textfield; 708 outline-offset: -2px; } 709 710[type="search"]::-webkit-search-cancel-button, 711[type="search"]::-webkit-search-decoration { 712 -webkit-appearance: none; } 713 714input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"], 715[type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select { 716 box-sizing: border-box; 717 background: var(--input-back-color); 718 color: var(--input-fore-color); 719 border: 0.0625rem solid var(--input-border-color); 720 border-radius: var(--universal-border-radius); 721 margin: calc(var(--universal-margin) / 2); 722 padding: var(--universal-padding) calc(1.5 * var(--universal-padding)); } 723 724input: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 { 725 border-color: var(--input-focus-color); 726 box-shadow: none; } 727input: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 { 728 border-color: var(--input-invalid-color); 729 box-shadow: none; } 730input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly], textarea[readonly], select[readonly] { 731 background: var(--secondary-back-color); } 732 733select { 734 max-width: 100%; } 735 736option { 737 overflow: hidden; 738 text-overflow: ellipsis; } 739 740[type="checkbox"], [type="radio"] { 741 -webkit-appearance: none; 742 -moz-appearance: none; 743 appearance: none; 744 position: relative; 745 height: calc(1rem + var(--universal-padding) / 2); 746 width: calc(1rem + var(--universal-padding) / 2); 747 vertical-align: text-bottom; 748 padding: 0; 749 flex-basis: calc(1rem + var(--universal-padding) / 2) !important; 750 flex-grow: 0 !important; } 751 [type="checkbox"]:checked:before, [type="radio"]:checked:before { 752 position: absolute; } 753 754[type="checkbox"]:checked:before { 755 content: '\2713'; 756 font-family: sans-serif; 757 font-size: calc(1rem + var(--universal-padding) / 2); 758 top: calc(0rem - var(--universal-padding)); 759 left: calc(var(--universal-padding) / 4); } 760 761[type="radio"] { 762 border-radius: 100%; } 763 [type="radio"]:checked:before { 764 border-radius: 100%; 765 content: ''; 766 top: calc(0.0625rem + var(--universal-padding) / 2); 767 left: calc(0.0625rem + var(--universal-padding) / 2); 768 background: var(--input-fore-color); 769 width: 0.5rem; 770 height: 0.5rem; } 771 772:placeholder-shown { 773 color: var(--input-fore-color); } 774 775::-ms-placeholder { 776 color: var(--input-fore-color); 777 opacity: 0.54; } 778 779button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { 780 border-style: none; 781 padding: 0; } 782 783button, html [type="button"], [type="reset"], [type="submit"] { 784 -webkit-appearance: button; } 785 786button { 787 overflow: visible; 788 text-transform: none; } 789 790button, [type="button"], [type="submit"], [type="reset"], 791a.button, label.button, .button, 792a[role="button"], label[role="button"], [role="button"] { 793 display: inline-block; 794 background: var(--button-back-color); 795 color: var(--button-fore-color); 796 border: 0.0625rem solid var(--button-border-color); 797 border-radius: var(--universal-border-radius); 798 padding: var(--universal-padding) calc(1.5 * var(--universal-padding)); 799 margin: var(--universal-margin); 800 text-decoration: none; 801 cursor: pointer; 802 transition: background 0.3s; } 803 button:hover, button:focus, [type="button"]:hover, [type="button"]:focus, [type="submit"]:hover, [type="submit"]:focus, [type="reset"]:hover, [type="reset"]:focus, 804 a.button:hover, 805 a.button:focus, label.button:hover, label.button:focus, .button:hover, .button:focus, 806 a[role="button"]:hover, 807 a[role="button"]:focus, label[role="button"]:hover, label[role="button"]:focus, [role="button"]:hover, [role="button"]:focus { 808 background: var(--button-hover-back-color); 809 border-color: var(--button-hover-border-color); } 810 811input: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] { 812 cursor: not-allowed; 813 opacity: 0.75; } 814 815.button-group { 816 display: flex; 817 border: 0.0625rem solid var(--button-group-border-color); 818 border-radius: var(--universal-border-radius); 819 margin: var(--universal-margin); } 820 .button-group > button, .button-group [type="button"], .button-group > [type="submit"], .button-group > [type="reset"], .button-group > .button, .button-group > [role="button"] { 821 margin: 0; 822 max-width: 100%; 823 flex: 1 1 auto; 824 text-align: center; 825 border: 0; 826 border-radius: 0; 827 box-shadow: none; } 828 .button-group > :not(:first-child) { 829 border-left: 0.0625rem solid var(--button-group-border-color); } 830 @media screen and (max-width: 499px) { 831 .button-group { 832 flex-direction: column; } 833 .button-group > :not(:first-child) { 834 border: 0; 835 border-top: 0.0625rem solid var(--button-group-border-color); } } 836 837/* 838 Custom elements for forms and input elements. 839*/ 840button.primary, [type="button"].primary, [type="submit"].primary, [type="reset"].primary, .button.primary, [role="button"].primary { 841 --button-back-color: #1976d2; 842 --button-fore-color: #f8f8f8; } 843 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 { 844 --button-hover-back-color: #1565c0; } 845 846button.secondary, [type="button"].secondary, [type="submit"].secondary, [type="reset"].secondary, .button.secondary, [role="button"].secondary { 847 --button-back-color: #d32f2f; 848 --button-fore-color: #f8f8f8; } 849 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 { 850 --button-hover-back-color: #c62828; } 851 852button.tertiary, [type="button"].tertiary, [type="submit"].tertiary, [type="reset"].tertiary, .button.tertiary, [role="button"].tertiary { 853 --button-back-color: #308732; 854 --button-fore-color: #f8f8f8; } 855 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 { 856 --button-hover-back-color: #277529; } 857 858button.inverse, [type="button"].inverse, [type="submit"].inverse, [type="reset"].inverse, .button.inverse, [role="button"].inverse { 859 --button-back-color: #212121; 860 --button-fore-color: #f8f8f8; } 861 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 { 862 --button-hover-back-color: #111; } 863 864button.small, [type="button"].small, [type="submit"].small, [type="reset"].small, .button.small, [role="button"].small { 865 padding: calc(0.5 * var(--universal-padding)) calc(0.75 * var(--universal-padding)); 866 margin: var(--universal-margin); } 867 868button.large, [type="button"].large, [type="submit"].large, [type="reset"].large, .button.large, [role="button"].large { 869 padding: calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding)); 870 margin: var(--universal-margin); } 871 872/* 873 Definitions for navigation elements. 874*/ 875/* Navigation module CSS variable definitions */ 876:root { 877 --header-back-color: #f8f8f8; 878 --header-hover-back-color: #f0f0f0; 879 --header-fore-color: #444; 880 --header-border-color: #ddd; 881 --nav-back-color: #f8f8f8; 882 --nav-hover-back-color: #f0f0f0; 883 --nav-fore-color: #444; 884 --nav-border-color: #ddd; 885 --nav-link-color: #0277bd; 886 --footer-fore-color: #444; 887 --footer-back-color: #f8f8f8; 888 --footer-border-color: #ddd; 889 --footer-link-color: #0277bd; 890 --drawer-back-color: #f8f8f8; 891 --drawer-hover-back-color: #f0f0f0; 892 --drawer-border-color: #ddd; 893 --drawer-close-color: #444; } 894 895header { 896 height: 3.1875rem; 897 background: var(--header-back-color); 898 color: var(--header-fore-color); 899 border-bottom: 0.0625rem solid var(--header-border-color); 900 padding: calc(var(--universal-padding) / 4) 0; 901 white-space: nowrap; 902 overflow-x: auto; 903 overflow-y: hidden; } 904 header.row { 905 box-sizing: content-box; } 906 header .logo { 907 color: var(--header-fore-color); 908 font-size: 1.75rem; 909 padding: var(--universal-padding) calc(2 * var(--universal-padding)); 910 text-decoration: none; } 911 header button, header [type="button"], header .button, header [role="button"] { 912 box-sizing: border-box; 913 position: relative; 914 top: calc(0rem - var(--universal-padding) / 4); 915 height: calc(3.1875rem + var(--universal-padding) / 2); 916 background: var(--header-back-color); 917 line-height: calc(3.1875rem - var(--universal-padding) * 1.5); 918 text-align: center; 919 color: var(--header-fore-color); 920 border: 0; 921 border-radius: 0; 922 margin: 0; 923 text-transform: uppercase; } 924 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 { 925 background: var(--header-hover-back-color); } 926 927nav { 928 background: var(--nav-back-color); 929 color: var(--nav-fore-color); 930 border: 0.0625rem solid var(--nav-border-color); 931 border-radius: var(--universal-border-radius); 932 margin: var(--universal-margin); } 933 nav * { 934 padding: var(--universal-padding) calc(1.5 * var(--universal-padding)); } 935 nav a, nav a:visited { 936 display: block; 937 color: var(--nav-link-color); 938 border-radius: var(--universal-border-radius); 939 transition: background 0.3s; } 940 nav a:hover, nav a:focus, nav a:visited:hover, nav a:visited:focus { 941 text-decoration: none; 942 background: var(--nav-hover-back-color); } 943 nav .sublink-1 { 944 position: relative; 945 margin-left: calc(2 * var(--universal-padding)); } 946 nav .sublink-1:before { 947 position: absolute; 948 left: calc(var(--universal-padding) - 1 * var(--universal-padding)); 949 top: -0.0625rem; 950 content: ''; 951 height: 100%; 952 border: 0.0625rem solid var(--nav-border-color); 953 border-left: 0; } 954 nav .sublink-2 { 955 position: relative; 956 margin-left: calc(4 * var(--universal-padding)); } 957 nav .sublink-2:before { 958 position: absolute; 959 left: calc(var(--universal-padding) - 3 * var(--universal-padding)); 960 top: -0.0625rem; 961 content: ''; 962 height: 100%; 963 border: 0.0625rem solid var(--nav-border-color); 964 border-left: 0; } 965 966footer { 967 background: var(--footer-back-color); 968 color: var(--footer-fore-color); 969 border-top: 0.0625rem solid var(--footer-border-color); 970 padding: calc(2 * var(--universal-padding)) var(--universal-padding); 971 font-size: 0.875rem; } 972 footer a, footer a:visited { 973 color: var(--footer-link-color); } 974 975header.sticky { 976 position: -webkit-sticky; 977 position: sticky; 978 z-index: 1101; 979 top: 0; } 980 981footer.sticky { 982 position: -webkit-sticky; 983 position: sticky; 984 z-index: 1101; 985 bottom: 0; } 986 987.drawer-toggle:before { 988 display: inline-block; 989 position: relative; 990 vertical-align: bottom; 991 content: '\00a0\2261\00a0'; 992 font-family: sans-serif; 993 font-size: 1.5em; } 994@media screen and (min-width: 500px) { 995 .drawer-toggle:not(.persistent) { 996 display: none; } } 997 998[type="checkbox"].drawer { 999 height: 1px; 1000 width: 1px; 1001 margin: -1px; 1002 overflow: hidden; 1003 position: absolute; 1004 clip: rect(0 0 0 0); 1005 -webkit-clip-path: inset(100%); 1006 clip-path: inset(100%); } 1007 [type="checkbox"].drawer + * { 1008 display: block; 1009 box-sizing: border-box; 1010 position: fixed; 1011 top: 0; 1012 width: 320px; 1013 height: 100vh; 1014 overflow-y: auto; 1015 background: var(--drawer-back-color); 1016 border: 0.0625rem solid var(--drawer-border-color); 1017 border-radius: 0; 1018 margin: 0; 1019 z-index: 1110; 1020 right: -320px; 1021 transition: right 0.3s; } 1022 [type="checkbox"].drawer + * .drawer-close { 1023 position: absolute; 1024 top: var(--universal-margin); 1025 right: var(--universal-margin); 1026 z-index: 1111; 1027 width: 2rem; 1028 height: 2rem; 1029 border-radius: var(--universal-border-radius); 1030 padding: var(--universal-padding); 1031 margin: 0; 1032 cursor: pointer; 1033 transition: background 0.3s; } 1034 [type="checkbox"].drawer + * .drawer-close:before { 1035 display: block; 1036 content: '\00D7'; 1037 color: var(--drawer-close-color); 1038 position: relative; 1039 font-family: sans-serif; 1040 font-size: 2rem; 1041 line-height: 1; 1042 text-align: center; } 1043 [type="checkbox"].drawer + * .drawer-close:hover, [type="checkbox"].drawer + * .drawer-close:focus { 1044 background: var(--drawer-hover-back-color); } 1045 @media screen and (max-width: 320px) { 1046 [type="checkbox"].drawer + * { 1047 width: 100%; } } 1048 [type="checkbox"].drawer:checked + * { 1049 right: 0; } 1050 @media screen and (min-width: 500px) { 1051 [type="checkbox"].drawer:not(.persistent) + * { 1052 position: static; 1053 height: 100%; 1054 z-index: 1100; } 1055 [type="checkbox"].drawer:not(.persistent) + * .drawer-close { 1056 display: none; } } 1057 1058/* 1059 Definitions for the responsive table component. 1060*/ 1061/* Table module CSS variable definitions. */ 1062:root { 1063 --table-border-color: #aaa; 1064 --table-border-separator-color: #666; 1065 --table-head-back-color: #e6e6e6; 1066 --table-head-fore-color: #111; 1067 --table-body-back-color: #f8f8f8; 1068 --table-body-fore-color: #111; 1069 --table-body-alt-back-color: #eee; } 1070 1071table { 1072 border-collapse: separate; 1073 border-spacing: 0; 1074 : margin: calc(1.5 * var(--universal-margin)) var(--universal-margin); 1075 display: flex; 1076 flex: 0 1 auto; 1077 flex-flow: row wrap; 1078 padding: var(--universal-padding); 1079 padding-top: 0; 1080 margin: calc(1.5 * var(--universal-margin)) var(--universal-margin); } 1081 table caption { 1082 font-size: 1.25 * rem; 1083 margin: calc(2 * var(--universal-margin)) 0; 1084 max-width: 100%; 1085 flex: 0 0 100%; 1086 text-align: left;} 1087 table thead, table tbody { 1088 display: flex; 1089 flex-flow: row wrap; 1090 border: 0.0625rem solid var(--table-border-color); } 1091 table thead { 1092 z-index: 999; 1093 border-radius: var(--universal-border-radius) var(--universal-border-radius) 0 0; 1094 border-bottom: 0.0625rem solid var(--table-border-separator-color); } 1095 table tbody { 1096 border-top: 0; 1097 margin-top: calc(0 - var(--universal-margin)); 1098 border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius); } 1099 table tr { 1100 display: flex; 1101 padding: 0; } 1102 table th, table td { 1103 padding: calc(0.5 * var(--universal-padding)); 1104 font-size: 0.9rem; } 1105 table th { 1106 text-align: left; 1107 background: var(--table-head-back-color); 1108 color: var(--table-head-fore-color); } 1109 table td { 1110 background: var(--table-body-back-color); 1111 color: var(--table-body-fore-color); 1112 border-top: 0.0625rem solid var(--table-border-color); } 1113 1114table:not(.horizontal) { 1115 overflow: auto; 1116 max-height: 850px; } 1117 table:not(.horizontal) thead, table:not(.horizontal) tbody { 1118 max-width: 100%; 1119 flex: 0 0 100%; } 1120 table:not(.horizontal) tr { 1121 flex-flow: row wrap; 1122 flex: 0 0 100%; } 1123 table:not(.horizontal) th, table:not(.horizontal) td { 1124 flex: 1 0 0%; 1125 overflow: hidden; 1126 text-overflow: ellipsis; } 1127 table:not(.horizontal) thead { 1128 position: sticky; 1129 top: 0; } 1130 table:not(.horizontal) tbody tr:first-child td { 1131 border-top: 0; } 1132 1133table.horizontal { 1134 border: 0; } 1135 table.horizontal thead, table.horizontal tbody { 1136 border: 0; 1137 flex-flow: row nowrap; } 1138 table.horizontal tbody { 1139 overflow: auto; 1140 justify-content: space-between; 1141 flex: 1 0 0; 1142 margin-left: calc( 4 * var(--universal-margin)); 1143 padding-bottom: calc(var(--universal-padding) / 4); } 1144 table.horizontal tr { 1145 flex-direction: column; 1146 flex: 1 0 auto; } 1147 table.horizontal th, table.horizontal td { 1148 width: 100%; 1149 border: 0; 1150 border-bottom: 0.0625rem solid var(--table-border-color); } 1151 table.horizontal th:not(:first-child), table.horizontal td:not(:first-child) { 1152 border-top: 0; } 1153 table.horizontal th { 1154 text-align: right; 1155 border-left: 0.0625rem solid var(--table-border-color); 1156 border-right: 0.0625rem solid var(--table-border-separator-color); } 1157 table.horizontal thead tr:first-child { 1158 padding-left: 0; } 1159 table.horizontal th:first-child, table.horizontal td:first-child { 1160 border-top: 0.0625rem solid var(--table-border-color); } 1161 table.horizontal tbody tr:last-child td { 1162 border-right: 0.0625rem solid var(--table-border-color); } 1163 table.horizontal tbody tr:last-child td:first-child { 1164 border-top-right-radius: 0.25rem; } 1165 table.horizontal tbody tr:last-child td:last-child { 1166 border-bottom-right-radius: 0.25rem; } 1167 table.horizontal thead tr:first-child th:first-child { 1168 border-top-left-radius: 0.25rem; } 1169 table.horizontal thead tr:first-child th:last-child { 1170 border-bottom-left-radius: 0.25rem; } 1171 1172@media screen and (max-width: 499px) { 1173 table, table.horizontal { 1174 border-collapse: collapse; 1175 border: 0; 1176 width: 100%; 1177 display: table; } 1178 table thead, table th, table.horizontal thead, table.horizontal th { 1179 border: 0; 1180 height: 1px; 1181 width: 1px; 1182 margin: -1px; 1183 overflow: hidden; 1184 padding: 0; 1185 position: absolute; 1186 clip: rect(0 0 0 0); 1187 -webkit-clip-path: inset(100%); 1188 clip-path: inset(100%); } 1189 table tbody, table.horizontal tbody { 1190 border: 0; 1191 display: table-row-group; } 1192 table tr, table.horizontal tr { 1193 display: block; 1194 border: 0.0625rem solid var(--table-border-color); 1195 border-radius: var(--universal-border-radius); 1196 background: #fafafa; 1197 padding: var(--universal-padding); 1198 margin: var(--universal-margin); 1199 margin-bottom: calc(2 * var(--universal-margin)); } 1200 table th, table td, table.horizontal th, table.horizontal td { 1201 width: auto; } 1202 table td, table.horizontal td { 1203 display: block; 1204 border: 0; 1205 text-align: right; } 1206 table td:before, table.horizontal td:before { 1207 content: attr(data-label); 1208 float: left; 1209 font-weight: 600; } 1210 table th:first-child, table td:first-child, table.horizontal th:first-child, table.horizontal td:first-child { 1211 border-top: 0; } 1212 table tbody tr:last-child td, table.horizontal tbody tr:last-child td { 1213 border-right: 0; } } 1214:root { 1215 --table-body-alt-back-color: #eee; } 1216 1217table tr:nth-of-type(2n) > td { 1218 background: var(--table-body-alt-back-color); } 1219 1220@media screen and (max-width: 500px) { 1221 table tr:nth-of-type(2n) { 1222 background: var(--table-body-alt-back-color); } } 1223:root { 1224 --table-body-hover-back-color: #90caf9; } 1225 1226table.hoverable tr:hover, table.hoverable tr:hover > td, table.hoverable tr:focus, table.hoverable tr:focus > td { 1227 background: var(--table-body-hover-back-color); } 1228 1229@media screen and (max-width: 500px) { 1230 table.hoverable tr:hover, table.hoverable tr:hover > td, table.hoverable tr:focus, table.hoverable tr:focus > td { 1231 background: var(--table-body-hover-back-color); } } 1232/* 1233 Definitions for contextual background elements, toasts and tooltips. 1234*/ 1235/* Contextual module CSS variable definitions */ 1236:root { 1237 --mark-back-color: #0277bd; 1238 --mark-fore-color: #fafafa; } 1239 1240mark { 1241 background: var(--mark-back-color); 1242 color: var(--mark-fore-color); 1243 font-size: 0.95em; 1244 line-height: 1em; 1245 border-radius: var(--universal-border-radius); 1246 padding: calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2); } 1247 mark.inline-block { 1248 display: inline-block; 1249 font-size: 1em; 1250 line-height: 1.5; 1251 padding: calc(var(--universal-padding) / 2) var(--universal-padding); } 1252 1253:root { 1254 --toast-back-color: #424242; 1255 --toast-fore-color: #fafafa; } 1256 1257.toast { 1258 position: fixed; 1259 bottom: calc(var(--universal-margin) * 3); 1260 left: 50%; 1261 transform: translate(-50%, -50%); 1262 z-index: 1111; 1263 color: var(--toast-fore-color); 1264 background: var(--toast-back-color); 1265 border-radius: calc(var(--universal-border-radius) * 16); 1266 padding: var(--universal-padding) calc(var(--universal-padding) * 3); } 1267 1268:root { 1269 --tooltip-back-color: #212121; 1270 --tooltip-fore-color: #fafafa; } 1271 1272.tooltip { 1273 position: relative; 1274 display: inline-block; } 1275 .tooltip:before, .tooltip:after { 1276 position: absolute; 1277 opacity: 0; 1278 clip: rect(0 0 0 0); 1279 -webkit-clip-path: inset(100%); 1280 clip-path: inset(100%); 1281 transition: all 0.3s; 1282 z-index: 1010; 1283 left: 50%; } 1284 .tooltip:not(.bottom):before, .tooltip:not(.bottom):after { 1285 bottom: 75%; } 1286 .tooltip.bottom:before, .tooltip.bottom:after { 1287 top: 75%; } 1288 .tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after { 1289 opacity: 1; 1290 clip: auto; 1291 -webkit-clip-path: inset(0%); 1292 clip-path: inset(0%); } 1293 .tooltip:before { 1294 content: ''; 1295 background: transparent; 1296 border: var(--universal-margin) solid transparent; 1297 left: calc(50% - var(--universal-margin)); } 1298 .tooltip:not(.bottom):before { 1299 border-top-color: #212121; } 1300 .tooltip.bottom:before { 1301 border-bottom-color: #212121; } 1302 .tooltip:after { 1303 content: attr(aria-label); 1304 color: var(--tooltip-fore-color); 1305 background: var(--tooltip-back-color); 1306 border-radius: var(--universal-border-radius); 1307 padding: var(--universal-padding); 1308 white-space: nowrap; 1309 transform: translateX(-50%); } 1310 .tooltip:not(.bottom):after { 1311 margin-bottom: calc(2 * var(--universal-margin)); } 1312 .tooltip.bottom:after { 1313 margin-top: calc(2 * var(--universal-margin)); } 1314 1315:root { 1316 --modal-overlay-color: rgba(0, 0, 0, 0.45); 1317 --modal-close-color: #444; 1318 --modal-close-hover-color: #f0f0f0; } 1319 1320[type="checkbox"].modal { 1321 height: 1px; 1322 width: 1px; 1323 margin: -1px; 1324 overflow: hidden; 1325 position: absolute; 1326 clip: rect(0 0 0 0); 1327 -webkit-clip-path: inset(100%); 1328 clip-path: inset(100%); } 1329 [type="checkbox"].modal + div { 1330 position: fixed; 1331 top: 0; 1332 left: 0; 1333 display: none; 1334 width: 100vw; 1335 height: 100vh; 1336 background: var(--modal-overlay-color); } 1337 [type="checkbox"].modal + div .card { 1338 margin: 0 auto; 1339 max-height: 50vh; 1340 overflow: auto; } 1341 [type="checkbox"].modal + div .card .modal-close { 1342 position: absolute; 1343 top: 0; 1344 right: 0; 1345 width: 1.75rem; 1346 height: 1.75rem; 1347 border-radius: var(--universal-border-radius); 1348 padding: var(--universal-padding); 1349 margin: 0; 1350 cursor: pointer; 1351 transition: background 0.3s; } 1352 [type="checkbox"].modal + div .card .modal-close:before { 1353 display: block; 1354 content: '\00D7'; 1355 color: var(--modal-close-color); 1356 position: relative; 1357 font-family: sans-serif; 1358 font-size: 1.75rem; 1359 line-height: 1; 1360 text-align: center; } 1361 [type="checkbox"].modal + div .card .modal-close:hover, [type="checkbox"].modal + div .card .modal-close:focus { 1362 background: var(--modal-close-hover-color); } 1363 [type="checkbox"].modal:checked + div { 1364 display: flex; 1365 flex: 0 1 auto; 1366 z-index: 1200; } 1367 [type="checkbox"].modal:checked + div .card .modal-close { 1368 z-index: 1211; } 1369 1370:root { 1371 --collapse-label-back-color: #e8e8e8; 1372 --collapse-label-fore-color: #212121; 1373 --collapse-label-hover-back-color: #f0f0f0; 1374 --collapse-selected-label-back-color: #ececec; 1375 --collapse-border-color: #ddd; 1376 --collapse-content-back-color: #fafafa; 1377 --collapse-selected-label-border-color: #0277bd; } 1378 1379.collapse { 1380 width: calc(100% - 2 * var(--universal-margin)); 1381 opacity: 1; 1382 display: flex; 1383 flex-direction: column; 1384 margin: var(--universal-margin); 1385 border-radius: var(--universal-border-radius); } 1386 .collapse > [type="radio"], .collapse > [type="checkbox"] { 1387 height: 1px; 1388 width: 1px; 1389 margin: -1px; 1390 overflow: hidden; 1391 position: absolute; 1392 clip: rect(0 0 0 0); 1393 -webkit-clip-path: inset(100%); 1394 clip-path: inset(100%); } 1395 .collapse > label { 1396 flex-grow: 1; 1397 display: inline-block; 1398 height: 1.5rem; 1399 cursor: pointer; 1400 transition: background 0.3s; 1401 color: var(--collapse-label-fore-color); 1402 background: var(--collapse-label-back-color); 1403 border: 0.0625rem solid var(--collapse-border-color); 1404 padding: calc(1.5 * var(--universal-padding)); } 1405 .collapse > label:hover, .collapse > label:focus { 1406 background: var(--collapse-label-hover-back-color); } 1407 .collapse > label + div { 1408 flex-basis: auto; 1409 height: 1px; 1410 width: 1px; 1411 margin: -1px; 1412 overflow: hidden; 1413 position: absolute; 1414 clip: rect(0 0 0 0); 1415 -webkit-clip-path: inset(100%); 1416 clip-path: inset(100%); 1417 transition: max-height 0.3s; 1418 max-height: 1px; } 1419 .collapse > :checked + label { 1420 background: var(--collapse-selected-label-back-color); 1421 border-bottom-color: var(--collapse-selected-label-border-color); } 1422 .collapse > :checked + label + div { 1423 box-sizing: border-box; 1424 position: relative; 1425 width: 100%; 1426 height: auto; 1427 overflow: auto; 1428 margin: 0; 1429 background: var(--collapse-content-back-color); 1430 border: 0.0625rem solid var(--collapse-border-color); 1431 border-top: 0; 1432 padding: var(--universal-padding); 1433 clip: auto; 1434 -webkit-clip-path: inset(0%); 1435 clip-path: inset(0%); 1436 max-height: 850px; } 1437 .collapse > label:not(:first-of-type) { 1438 border-top: 0; } 1439 .collapse > label:first-of-type { 1440 border-radius: var(--universal-border-radius) var(--universal-border-radius) 0 0; } 1441 .collapse > label:last-of-type:not(:first-of-type) { 1442 border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius); } 1443 .collapse > label:last-of-type:first-of-type { 1444 border-radius: var(--universal-border-radius); } 1445 .collapse > :checked:last-of-type:not(:first-of-type) + label { 1446 border-radius: 0; } 1447 .collapse > :checked:last-of-type + label + div { 1448 border-radius: 0 0 var(--universal-border-radius) var(--universal-border-radius); } 1449 1450/* 1451 Custom elements for contextual background elements, toasts and tooltips. 1452*/ 1453mark.secondary { 1454 --mark-back-color: #d32f2f; } 1455 1456mark.tertiary { 1457 --mark-back-color: #308732; } 1458 1459mark.tag { 1460 padding: calc(var(--universal-padding)/2) var(--universal-padding); 1461 border-radius: 1em; } 1462 1463/* 1464 Definitions for progress elements and spinners. 1465*/ 1466/* Progess module CSS variable definitions */ 1467:root { 1468 --progress-back-color: #ddd; 1469 --progress-fore-color: #555; } 1470 1471progress { 1472 display: block; 1473 vertical-align: baseline; 1474 -webkit-appearance: none; 1475 -moz-appearance: none; 1476 appearance: none; 1477 height: 0.75rem; 1478 width: calc(100% - 2 * var(--universal-margin)); 1479 margin: var(--universal-margin); 1480 border: 0; 1481 border-radius: calc(2 * var(--universal-border-radius)); 1482 background: var(--progress-back-color); 1483 color: var(--progress-fore-color); } 1484 progress::-webkit-progress-value { 1485 background: var(--progress-fore-color); 1486 border-top-left-radius: calc(2 * var(--universal-border-radius)); 1487 border-bottom-left-radius: calc(2 * var(--universal-border-radius)); } 1488 progress::-webkit-progress-bar { 1489 background: var(--progress-back-color); } 1490 progress::-moz-progress-bar { 1491 background: var(--progress-fore-color); 1492 border-top-left-radius: calc(2 * var(--universal-border-radius)); 1493 border-bottom-left-radius: calc(2 * var(--universal-border-radius)); } 1494 progress[value="1000"]::-webkit-progress-value { 1495 border-radius: calc(2 * var(--universal-border-radius)); } 1496 progress[value="1000"]::-moz-progress-bar { 1497 border-radius: calc(2 * var(--universal-border-radius)); } 1498 progress.inline { 1499 display: inline-block; 1500 vertical-align: middle; 1501 width: 60%; } 1502 1503:root { 1504 --spinner-back-color: #ddd; 1505 --spinner-fore-color: #555; } 1506 1507@keyframes spinner-donut-anim { 1508 0% { 1509 transform: rotate(0deg); } 1510 100% { 1511 transform: rotate(360deg); } } 1512.spinner { 1513 display: inline-block; 1514 margin: var(--universal-margin); 1515 border: 0.25rem solid var(--spinner-back-color); 1516 border-left: 0.25rem solid var(--spinner-fore-color); 1517 border-radius: 50%; 1518 width: 1.25rem; 1519 height: 1.25rem; 1520 animation: spinner-donut-anim 1.2s linear infinite; } 1521 1522/* 1523 Custom elements for progress bars and spinners. 1524*/ 1525progress.primary { 1526 --progress-fore-color: #1976d2; } 1527 1528progress.secondary { 1529 --progress-fore-color: #d32f2f; } 1530 1531progress.tertiary { 1532 --progress-fore-color: #308732; } 1533 1534.spinner.primary { 1535 --spinner-fore-color: #1976d2; } 1536 1537.spinner.secondary { 1538 --spinner-fore-color: #d32f2f; } 1539 1540.spinner.tertiary { 1541 --spinner-fore-color: #308732; } 1542 1543/* 1544 Definitions for icons - powered by Feather (https://feathericons.com/). 1545*/ 1546span[class^='icon-'] { 1547 display: inline-block; 1548 height: 1em; 1549 width: 1em; 1550 vertical-align: -0.125em; 1551 background-size: contain; 1552 margin: 0 calc(var(--universal-margin) / 4); } 1553 span[class^='icon-'].secondary { 1554 -webkit-filter: invert(25%); 1555 filter: invert(25%); } 1556 span[class^='icon-'].inverse { 1557 -webkit-filter: invert(100%); 1558 filter: invert(100%); } 1559 1560span.icon-alert { 1561 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"); } 1562span.icon-bookmark { 1563 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"); } 1564span.icon-calendar { 1565 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"); } 1566span.icon-credit { 1567 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"); } 1568span.icon-edit { 1569 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"); } 1570span.icon-link { 1571 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"); } 1572span.icon-help { 1573 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"); } 1574span.icon-home { 1575 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"); } 1576span.icon-info { 1577 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"); } 1578span.icon-lock { 1579 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"); } 1580span.icon-mail { 1581 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"); } 1582span.icon-location { 1583 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"); } 1584span.icon-phone { 1585 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"); } 1586span.icon-rss { 1587 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"); } 1588span.icon-search { 1589 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"); } 1590span.icon-settings { 1591 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"); } 1592span.icon-share { 1593 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"); } 1594span.icon-cart { 1595 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"); } 1596span.icon-upload { 1597 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"); } 1598span.icon-user { 1599 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"); } 1600 1601/* 1602 Definitions for utilities and helper classes. 1603*/ 1604/* Utility module CSS variable definitions */ 1605:root { 1606 --generic-border-color: rgba(0, 0, 0, 0.3); 1607 --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); } 1608 1609.hidden { 1610 display: none !important; } 1611 1612.visually-hidden { 1613 position: absolute !important; 1614 width: 1px !important; 1615 height: 1px !important; 1616 margin: -1px !important; 1617 border: 0 !important; 1618 padding: 0 !important; 1619 clip: rect(0 0 0 0) !important; 1620 -webkit-clip-path: inset(100%) !important; 1621 clip-path: inset(100%) !important; 1622 overflow: hidden !important; } 1623 1624.bordered { 1625 border: 0.0625rem solid var(--generic-border-color) !important; } 1626 1627.rounded { 1628 border-radius: var(--universal-border-radius) !important; } 1629 1630.circular { 1631 border-radius: 50% !important; } 1632 1633.shadowed { 1634 box-shadow: var(--generic-box-shadow) !important; } 1635 1636.responsive-margin { 1637 margin: calc(var(--universal-margin) / 4) !important; } 1638 @media screen and (min-width: 500px) { 1639 .responsive-margin { 1640 margin: calc(var(--universal-margin) / 2) !important; } } 1641 @media screen and (min-width: 1280px) { 1642 .responsive-margin { 1643 margin: var(--universal-margin) !important; } } 1644 1645.responsive-padding { 1646 padding: calc(var(--universal-padding) / 4) !important; } 1647 @media screen and (min-width: 500px) { 1648 .responsive-padding { 1649 padding: calc(var(--universal-padding) / 2) !important; } } 1650 @media screen and (min-width: 1280px) { 1651 .responsive-padding { 1652 padding: var(--universal-padding) !important; } } 1653 1654@media screen and (max-width: 499px) { 1655 .hidden-sm { 1656 display: none !important; } } 1657@media screen and (min-width: 500px) and (max-width: 1279px) { 1658 .hidden-md { 1659 display: none !important; } } 1660@media screen and (min-width: 1280px) { 1661 .hidden-lg { 1662 display: none !important; } } 1663@media screen and (max-width: 499px) { 1664 .visually-hidden-sm { 1665 position: absolute !important; 1666 width: 1px !important; 1667 height: 1px !important; 1668 margin: -1px !important; 1669 border: 0 !important; 1670 padding: 0 !important; 1671 clip: rect(0 0 0 0) !important; 1672 -webkit-clip-path: inset(100%) !important; 1673 clip-path: inset(100%) !important; 1674 overflow: hidden !important; } } 1675@media screen and (min-width: 500px) and (max-width: 1279px) { 1676 .visually-hidden-md { 1677 position: absolute !important; 1678 width: 1px !important; 1679 height: 1px !important; 1680 margin: -1px !important; 1681 border: 0 !important; 1682 padding: 0 !important; 1683 clip: rect(0 0 0 0) !important; 1684 -webkit-clip-path: inset(100%) !important; 1685 clip-path: inset(100%) !important; 1686 overflow: hidden !important; } } 1687@media screen and (min-width: 1280px) { 1688 .visually-hidden-lg { 1689 position: absolute !important; 1690 width: 1px !important; 1691 height: 1px !important; 1692 margin: -1px !important; 1693 border: 0 !important; 1694 padding: 0 !important; 1695 clip: rect(0 0 0 0) !important; 1696 -webkit-clip-path: inset(100%) !important; 1697 clip-path: inset(100%) !important; 1698 overflow: hidden !important; } } 1699 1700/*# sourceMappingURL=mini-default.css.map */ 1701