code.gitea.io/gitea@v1.21.7/web_src/fomantic/build/semantic.css (about) 1 /* 2 * # Fomantic UI - 2.8.7 3 * https://github.com/fomantic/Fomantic-UI 4 * http://fomantic-ui.com/ 5 * 6 * Copyright 2014 Contributors 7 * Released under the MIT license 8 * http://opensource.org/licenses/MIT 9 * 10 */ 11 /*! 12 * # Fomantic-UI - Button 13 * http://github.com/fomantic/Fomantic-UI/ 14 * 15 * 16 * Released under the MIT license 17 * http://opensource.org/licenses/MIT 18 * 19 */ 20 21 /******************************* 22 Button 23 *******************************/ 24 25 .ui.button { 26 cursor: pointer; 27 display: inline-block; 28 min-height: 1em; 29 outline: none; 30 border: none; 31 vertical-align: baseline; 32 background: #E0E1E2 none; 33 color: rgba(0, 0, 0, 0.6); 34 font-family: var(--fonts-regular); 35 margin: 0 0.25em 0 0; 36 padding: 0.78571429em 1.5em 0.78571429em; 37 text-transform: none; 38 text-shadow: none; 39 font-weight: 500; 40 line-height: 1em; 41 font-style: normal; 42 text-align: center; 43 text-decoration: none; 44 border-radius: 0.28571429rem; 45 box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; 46 -webkit-user-select: none; 47 -moz-user-select: none; 48 user-select: none; 49 transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease; 50 will-change: auto; 51 -webkit-tap-highlight-color: transparent; 52 } 53 54 /******************************* 55 States 56 *******************************/ 57 58 /*-------------- 59 Hover 60 ---------------*/ 61 62 .ui.button:hover { 63 background-color: #CACBCD; 64 background-image: none; 65 box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; 66 color: rgba(0, 0, 0, 0.8); 67 } 68 69 .ui.button:hover .icon { 70 opacity: 0.85; 71 } 72 73 /*-------------- 74 Focus 75 ---------------*/ 76 77 .ui.button:focus { 78 background-color: #CACBCD; 79 color: rgba(0, 0, 0, 0.8); 80 background-image: none; 81 box-shadow: ''; 82 } 83 84 .ui.button:focus .icon { 85 opacity: 0.85; 86 } 87 88 /*-------------- 89 Down 90 ---------------*/ 91 92 .ui.button:active, 93 .ui.active.button:active { 94 background-color: #BABBBC; 95 background-image: ''; 96 color: rgba(0, 0, 0, 0.9); 97 box-shadow: 0 0 0 1px transparent inset, none; 98 } 99 100 /*-------------- 101 Active 102 ---------------*/ 103 104 .ui.active.button { 105 background-color: #C0C1C2; 106 background-image: none; 107 box-shadow: 0 0 0 1px transparent inset; 108 color: rgba(0, 0, 0, 0.95); 109 } 110 111 .ui.active.button:hover { 112 background-color: #C0C1C2; 113 background-image: none; 114 color: rgba(0, 0, 0, 0.95); 115 } 116 117 .ui.active.button:active { 118 background-color: #C0C1C2; 119 background-image: none; 120 } 121 122 /*-------------- 123 Loading 124 ---------------*/ 125 126 /* Specificity hack */ 127 128 .ui.loading.loading.loading.loading.loading.loading.button { 129 position: relative; 130 cursor: default; 131 text-shadow: none !important; 132 color: transparent; 133 opacity: 1; 134 pointer-events: auto; 135 transition: all 0s linear, opacity 0.1s ease; 136 } 137 138 .ui.loading.button:before { 139 position: absolute; 140 content: ''; 141 top: 50%; 142 left: 50%; 143 margin: -0.64285714em 0 0 -0.64285714em; 144 width: 1.28571429em; 145 height: 1.28571429em; 146 border-radius: 500rem; 147 border: 0.2em solid rgba(0, 0, 0, 0.15); 148 } 149 150 .ui.loading.button:after { 151 position: absolute; 152 content: ''; 153 top: 50%; 154 left: 50%; 155 margin: -0.64285714em 0 0 -0.64285714em; 156 width: 1.28571429em; 157 height: 1.28571429em; 158 border-radius: 500rem; 159 -webkit-animation: loader 0.6s infinite linear; 160 animation: loader 0.6s infinite linear; 161 border: 0.2em solid currentColor; 162 color: #FFFFFF; 163 box-shadow: 0 0 0 1px transparent; 164 } 165 166 .ui.labeled.icon.loading.button .icon { 167 background-color: transparent; 168 box-shadow: none; 169 } 170 171 .ui.basic.loading.button:not(.inverted):before { 172 border-color: rgba(0, 0, 0, 0.1); 173 } 174 175 .ui.basic.loading.button:not(.inverted):after { 176 border-color: #767676; 177 } 178 179 /*------------------- 180 Disabled 181 --------------------*/ 182 183 .ui.buttons .disabled.button:not(.basic), 184 .ui.disabled.button, 185 .ui.button:disabled, 186 .ui.disabled.button:hover, 187 .ui.disabled.active.button { 188 cursor: default; 189 opacity: var(--opacity-disabled) !important; 190 background-image: none; 191 box-shadow: none; 192 pointer-events: none !important; 193 } 194 195 /* Basic Group With Disabled */ 196 197 .ui.basic.buttons .ui.disabled.button { 198 border-color: rgba(34, 36, 38, 0.5); 199 } 200 201 /******************************* 202 Types 203 *******************************/ 204 205 /*------------------- 206 Labeled Button 207 --------------------*/ 208 209 .ui.labeled.button:not(.icon) { 210 display: inline-flex; 211 flex-direction: row; 212 background: none; 213 padding: 0 !important; 214 border: none; 215 box-shadow: none; 216 } 217 218 .ui.labeled.button > .button { 219 margin: 0; 220 } 221 222 .ui.labeled.button > .label { 223 display: flex; 224 align-items: center; 225 margin: 0 0 0 -1px !important; 226 font-size: 1em; 227 padding: ''; 228 border-color: rgba(34, 36, 38, 0.15); 229 } 230 231 /* Tag */ 232 233 .ui.labeled.button > .tag.label:before { 234 width: 1.85em; 235 height: 1.85em; 236 } 237 238 /* Right */ 239 240 .ui.labeled.button:not([class*="left labeled"]) > .button { 241 border-top-right-radius: 0; 242 border-bottom-right-radius: 0; 243 } 244 245 .ui.labeled.button:not([class*="left labeled"]) > .label { 246 border-top-left-radius: 0; 247 border-bottom-left-radius: 0; 248 } 249 250 /* Left Side */ 251 252 .ui[class*="left labeled"].button > .button { 253 border-top-left-radius: 0; 254 border-bottom-left-radius: 0; 255 } 256 257 .ui[class*="left labeled"].button > .label { 258 border-top-right-radius: 0; 259 border-bottom-right-radius: 0; 260 } 261 262 /*-------------- 263 Icon 264 ---------------*/ 265 266 .ui.button > .icon:not(.button) { 267 height: auto; 268 opacity: 0.8; 269 transition: opacity 0.1s ease; 270 color: ''; 271 } 272 273 .ui.button:not(.icon) > .icon:not(.button):not(.dropdown), 274 .ui.button:not(.icon) > .icons:not(.button):not(.dropdown) { 275 margin: 0 0.42857143em 0 -0.21428571em; 276 vertical-align: baseline; 277 } 278 279 .ui.button:not(.icon) > .icons:not(.button):not(.dropdown) > .icon { 280 vertical-align: baseline; 281 } 282 283 .ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) { 284 margin: 0 -0.21428571em 0 0.42857143em; 285 } 286 287 /******************************* 288 Variations 289 *******************************/ 290 291 /*------------------- 292 Floated 293 --------------------*/ 294 295 .ui[class*="left floated"].buttons, 296 .ui[class*="left floated"].button { 297 float: left; 298 margin-left: 0; 299 margin-right: 0.25em; 300 } 301 302 .ui[class*="right floated"].buttons, 303 .ui[class*="right floated"].button { 304 float: right; 305 margin-right: 0; 306 margin-left: 0.25em; 307 } 308 309 /*------------------- 310 Compact 311 --------------------*/ 312 313 .ui.compact.buttons .button, 314 .ui.compact.button { 315 padding: 0.58928571em 1.125em 0.58928571em; 316 } 317 318 .ui.compact.icon.buttons .button, 319 .ui.compact.icon.button { 320 padding: 0.58928571em 0.58928571em 0.58928571em; 321 } 322 323 .ui.compact.labeled.icon.buttons .button, 324 .ui.compact.labeled.icon.button { 325 padding: 0.58928571em 3.69642857em 0.58928571em; 326 } 327 328 .ui.compact.labeled.icon.buttons .button > .icon, 329 .ui.compact.labeled.icon.button > .icon { 330 padding: 0.58928571em 0 0.58928571em 0; 331 } 332 333 /*------------------- 334 Sizes 335 --------------------*/ 336 337 .ui.buttons .button, 338 .ui.buttons .or, 339 .ui.button { 340 font-size: 1rem; 341 } 342 343 .ui.mini.buttons .dropdown, 344 .ui.mini.buttons .dropdown .menu > .item, 345 .ui.mini.buttons .button, 346 .ui.mini.buttons .or, 347 .ui.ui.ui.ui.mini.button { 348 font-size: 0.78571429rem; 349 } 350 351 .ui.tiny.buttons .dropdown, 352 .ui.tiny.buttons .dropdown .menu > .item, 353 .ui.tiny.buttons .button, 354 .ui.tiny.buttons .or, 355 .ui.ui.ui.ui.tiny.button { 356 font-size: 0.85714286rem; 357 } 358 359 .ui.small.buttons .dropdown, 360 .ui.small.buttons .dropdown .menu > .item, 361 .ui.small.buttons .button, 362 .ui.small.buttons .or, 363 .ui.ui.ui.ui.small.button { 364 font-size: 0.92857143rem; 365 } 366 367 .ui.large.buttons .dropdown, 368 .ui.large.buttons .dropdown .menu > .item, 369 .ui.large.buttons .button, 370 .ui.large.buttons .or, 371 .ui.ui.ui.ui.large.button { 372 font-size: 1.14285714rem; 373 } 374 375 .ui.big.buttons .dropdown, 376 .ui.big.buttons .dropdown .menu > .item, 377 .ui.big.buttons .button, 378 .ui.big.buttons .or, 379 .ui.ui.ui.ui.big.button { 380 font-size: 1.28571429rem; 381 } 382 383 .ui.huge.buttons .dropdown, 384 .ui.huge.buttons .dropdown .menu > .item, 385 .ui.huge.buttons .button, 386 .ui.huge.buttons .or, 387 .ui.ui.ui.ui.huge.button { 388 font-size: 1.42857143rem; 389 } 390 391 .ui.massive.buttons .dropdown, 392 .ui.massive.buttons .dropdown .menu > .item, 393 .ui.massive.buttons .button, 394 .ui.massive.buttons .or, 395 .ui.ui.ui.ui.massive.button { 396 font-size: 1.71428571rem; 397 } 398 399 /*-------------- 400 Icon Only 401 ---------------*/ 402 403 .ui.icon.buttons .button, 404 .ui.icon.button:not(.animated):not(.compact) { 405 padding: 0.78571429em 0.78571429em 0.78571429em; 406 } 407 408 .ui.animated.icon.button > .content > .icon, 409 .ui.icon.buttons .button > .icon, 410 .ui.icon.button > .icon { 411 opacity: 0.9; 412 margin: 0 !important; 413 vertical-align: top; 414 } 415 416 .ui.animated.button > .content > .icon { 417 vertical-align: top; 418 } 419 420 /*------------------- 421 Basic 422 --------------------*/ 423 424 .ui.basic.buttons .button, 425 .ui.basic.button { 426 background: transparent none; 427 color: rgba(0, 0, 0, 0.6); 428 font-weight: normal; 429 border-radius: 0.28571429rem; 430 text-transform: none; 431 text-shadow: none !important; 432 box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset; 433 } 434 435 .ui.basic.buttons { 436 box-shadow: none; 437 border: 1px solid rgba(34, 36, 38, 0.15); 438 border-radius: 0.28571429rem; 439 } 440 441 .ui.basic.buttons .button { 442 border-radius: 0; 443 } 444 445 .ui.basic.buttons .button:hover, 446 .ui.basic.button:hover { 447 background: #FFFFFF; 448 color: rgba(0, 0, 0, 0.8); 449 box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; 450 } 451 452 .ui.basic.buttons .button:focus, 453 .ui.basic.button:focus { 454 background: #FFFFFF; 455 color: rgba(0, 0, 0, 0.8); 456 box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; 457 } 458 459 .ui.basic.buttons .button:active, 460 .ui.basic.button:active { 461 background: #F8F8F8; 462 color: rgba(0, 0, 0, 0.9); 463 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 4px 0 rgba(34, 36, 38, 0.15) inset; 464 } 465 466 .ui.basic.buttons .active.button, 467 .ui.basic.active.button { 468 background: rgba(0, 0, 0, 0.05); 469 box-shadow: ''; 470 color: rgba(0, 0, 0, 0.95); 471 } 472 473 .ui.basic.buttons .active.button:hover, 474 .ui.basic.active.button:hover { 475 background-color: rgba(0, 0, 0, 0.05); 476 } 477 478 /* Vertical */ 479 480 .ui.basic.buttons .button:hover { 481 box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset inset; 482 } 483 484 .ui.basic.buttons .button:active { 485 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 4px 0 rgba(34, 36, 38, 0.15) inset inset; 486 } 487 488 .ui.basic.buttons .active.button { 489 box-shadow: ''; 490 } 491 492 /* Basic Group */ 493 494 .ui.basic.buttons .button { 495 border-left: 1px solid rgba(34, 36, 38, 0.15); 496 box-shadow: none; 497 } 498 499 .ui.basic.vertical.buttons .button { 500 border-left: none; 501 border-left-width: 0; 502 border-top: 1px solid rgba(34, 36, 38, 0.15); 503 } 504 505 .ui.basic.vertical.buttons .button:first-child { 506 border-top-width: 0; 507 } 508 509 /*-------------- 510 Labeled Icon 511 ---------------*/ 512 513 .ui.labeled.icon.buttons .button, 514 .ui.labeled.icon.button { 515 position: relative; 516 padding-left: 4.07142857em !important; 517 padding-right: 1.5em !important; 518 } 519 520 /* Left Labeled */ 521 522 .ui.labeled.icon.buttons > .button > .icon, 523 .ui.labeled.icon.button > .icon { 524 position: absolute; 525 top: 0; 526 left: 0; 527 height: 100%; 528 line-height: 1; 529 border-radius: 0; 530 border-top-left-radius: inherit; 531 border-bottom-left-radius: inherit; 532 text-align: center; 533 -webkit-animation: none; 534 animation: none; 535 padding: 0.78571429em 0 0.78571429em 0; 536 margin: 0; 537 width: 2.57142857em; 538 background-color: rgba(0, 0, 0, 0.05); 539 color: ''; 540 box-shadow: -1px 0 0 0 transparent inset; 541 } 542 543 /* Right Labeled */ 544 545 .ui[class*="right labeled"].icon.button { 546 padding-right: 4.07142857em !important; 547 padding-left: 1.5em !important; 548 } 549 550 .ui[class*="right labeled"].icon.button > .icon { 551 left: auto; 552 right: 0; 553 border-radius: 0; 554 border-top-right-radius: inherit; 555 border-bottom-right-radius: inherit; 556 box-shadow: 1px 0 0 0 transparent inset; 557 } 558 559 .ui.labeled.icon.buttons > .button > .icon:before, 560 .ui.labeled.icon.button > .icon:before, 561 .ui.labeled.icon.buttons > .button > .icon:after, 562 .ui.labeled.icon.button > .icon:after { 563 display: block; 564 position: relative; 565 width: 100%; 566 top: 0; 567 text-align: center; 568 } 569 570 .ui.labeled.icon.buttons .button > .icon { 571 border-radius: 0; 572 } 573 574 .ui.labeled.icon.buttons .button:first-child > .icon { 575 border-top-left-radius: 0.28571429rem; 576 border-bottom-left-radius: 0.28571429rem; 577 } 578 579 .ui.labeled.icon.buttons .button:last-child > .icon { 580 border-top-right-radius: 0.28571429rem; 581 border-bottom-right-radius: 0.28571429rem; 582 } 583 584 .ui.vertical.labeled.icon.buttons .button:first-child > .icon { 585 border-radius: 0; 586 border-top-left-radius: 0.28571429rem; 587 } 588 589 .ui.vertical.labeled.icon.buttons .button:last-child > .icon { 590 border-radius: 0; 591 border-bottom-left-radius: 0.28571429rem; 592 } 593 594 /* Loading Icon in Labeled Button */ 595 596 .ui.labeled.icon.button > .loading.icon:before { 597 -webkit-animation: loader 2s linear infinite; 598 animation: loader 2s linear infinite; 599 } 600 601 /*-------------- 602 Toggle 603 ---------------*/ 604 605 /* Toggle (Modifies active state to give affordances) */ 606 607 .ui.toggle.buttons .active.button, 608 .ui.buttons .button.toggle.active, 609 .ui.button.toggle.active { 610 background-color: #21BA45; 611 box-shadow: none; 612 text-shadow: none; 613 color: #FFFFFF; 614 } 615 616 .ui.button.toggle.active:hover { 617 background-color: #16ab39; 618 text-shadow: none; 619 color: #FFFFFF; 620 } 621 622 /*-------------- 623 Circular 624 ---------------*/ 625 626 .ui.circular.button { 627 border-radius: 10em; 628 } 629 630 .ui.circular.button > .icon { 631 width: 1em; 632 vertical-align: baseline; 633 } 634 635 /*------------------- 636 Or Buttons 637 --------------------*/ 638 639 .ui.buttons .or { 640 position: relative; 641 width: 0.3em; 642 height: 2.57142857em; 643 z-index: 3; 644 } 645 646 .ui.buttons .or:before { 647 position: absolute; 648 text-align: center; 649 border-radius: 500rem; 650 content: 'or'; 651 top: 50%; 652 left: 50%; 653 background-color: #FFFFFF; 654 text-shadow: none; 655 margin-top: -0.89285714em; 656 margin-left: -0.89285714em; 657 width: 1.78571429em; 658 height: 1.78571429em; 659 line-height: 1.78571429em; 660 color: rgba(0, 0, 0, 0.4); 661 font-style: normal; 662 font-weight: 500; 663 box-shadow: 0 0 0 1px transparent inset; 664 } 665 666 .ui.buttons .or[data-text]:before { 667 content: attr(data-text); 668 } 669 670 /* Fluid Or */ 671 672 .ui.fluid.buttons .or { 673 width: 0 !important; 674 } 675 676 .ui.fluid.buttons .or:after { 677 display: none; 678 } 679 680 /*------------------- 681 Fluid 682 --------------------*/ 683 684 .ui.fluid.buttons, 685 .ui.fluid.button { 686 width: 100%; 687 } 688 689 .ui.fluid.button { 690 display: block; 691 } 692 693 .ui.two.buttons { 694 width: 100%; 695 } 696 697 .ui.two.buttons > .button { 698 width: 50%; 699 } 700 701 .ui.three.buttons { 702 width: 100%; 703 } 704 705 .ui.three.buttons > .button { 706 width: 33.333%; 707 } 708 709 .ui.four.buttons { 710 width: 100%; 711 } 712 713 .ui.four.buttons > .button { 714 width: 25%; 715 } 716 717 .ui.five.buttons { 718 width: 100%; 719 } 720 721 .ui.five.buttons > .button { 722 width: 20%; 723 } 724 725 .ui.six.buttons { 726 width: 100%; 727 } 728 729 .ui.six.buttons > .button { 730 width: 16.666%; 731 } 732 733 .ui.seven.buttons { 734 width: 100%; 735 } 736 737 .ui.seven.buttons > .button { 738 width: 14.285%; 739 } 740 741 .ui.eight.buttons { 742 width: 100%; 743 } 744 745 .ui.eight.buttons > .button { 746 width: 12.5%; 747 } 748 749 .ui.nine.buttons { 750 width: 100%; 751 } 752 753 .ui.nine.buttons > .button { 754 width: 11.11%; 755 } 756 757 .ui.ten.buttons { 758 width: 100%; 759 } 760 761 .ui.ten.buttons > .button { 762 width: 10%; 763 } 764 765 .ui.eleven.buttons { 766 width: 100%; 767 } 768 769 .ui.eleven.buttons > .button { 770 width: 9.09%; 771 } 772 773 .ui.twelve.buttons { 774 width: 100%; 775 } 776 777 .ui.twelve.buttons > .button { 778 width: 8.3333%; 779 } 780 781 /* Fluid Vertical Buttons */ 782 783 .ui.fluid.vertical.buttons, 784 .ui.fluid.vertical.buttons > .button { 785 display: flex; 786 width: auto; 787 justify-content: center; 788 } 789 790 .ui.two.vertical.buttons > .button { 791 height: 50%; 792 } 793 794 .ui.three.vertical.buttons > .button { 795 height: 33.333%; 796 } 797 798 .ui.four.vertical.buttons > .button { 799 height: 25%; 800 } 801 802 .ui.five.vertical.buttons > .button { 803 height: 20%; 804 } 805 806 .ui.six.vertical.buttons > .button { 807 height: 16.666%; 808 } 809 810 .ui.seven.vertical.buttons > .button { 811 height: 14.285%; 812 } 813 814 .ui.eight.vertical.buttons > .button { 815 height: 12.5%; 816 } 817 818 .ui.nine.vertical.buttons > .button { 819 height: 11.11%; 820 } 821 822 .ui.ten.vertical.buttons > .button { 823 height: 10%; 824 } 825 826 .ui.eleven.vertical.buttons > .button { 827 height: 9.09%; 828 } 829 830 .ui.twelve.vertical.buttons > .button { 831 height: 8.3333%; 832 } 833 834 /*------------------- 835 Colors 836 --------------------*/ 837 838 .ui.primary.buttons .button, 839 .ui.primary.button { 840 background-color: #2185D0; 841 color: #FFFFFF; 842 text-shadow: none; 843 background-image: none; 844 } 845 846 .ui.primary.button { 847 box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; 848 } 849 850 .ui.primary.buttons .button:hover, 851 .ui.primary.button:hover { 852 background-color: #1678c2; 853 color: #FFFFFF; 854 text-shadow: none; 855 } 856 857 .ui.primary.buttons .button:focus, 858 .ui.primary.button:focus { 859 background-color: #0d71bb; 860 color: #FFFFFF; 861 text-shadow: none; 862 } 863 864 .ui.primary.buttons .button:active, 865 .ui.primary.button:active { 866 background-color: #1a69a4; 867 color: #FFFFFF; 868 text-shadow: none; 869 } 870 871 .ui.primary.buttons .active.button, 872 .ui.primary.buttons .active.button:active, 873 .ui.primary.active.button, 874 .ui.primary.button .active.button:active { 875 background-color: #1279c6; 876 color: #FFFFFF; 877 text-shadow: none; 878 } 879 880 /* Basic */ 881 882 .ui.basic.primary.buttons .button, 883 .ui.basic.primary.button { 884 background: transparent; 885 box-shadow: 0 0 0 1px #2185D0 inset; 886 color: #2185D0; 887 } 888 889 .ui.basic.primary.buttons .button:hover, 890 .ui.basic.primary.button:hover { 891 background: transparent; 892 box-shadow: 0 0 0 1px #1678c2 inset; 893 color: #1678c2; 894 } 895 896 .ui.basic.primary.buttons .button:focus, 897 .ui.basic.primary.button:focus { 898 background: transparent; 899 box-shadow: 0 0 0 1px #0d71bb inset; 900 color: #1678c2; 901 } 902 903 .ui.basic.primary.buttons .active.button, 904 .ui.basic.primary.active.button { 905 background: transparent; 906 box-shadow: 0 0 0 1px #1279c6 inset; 907 color: #1a69a4; 908 } 909 910 .ui.basic.primary.buttons .button:active, 911 .ui.basic.primary.button:active { 912 box-shadow: 0 0 0 1px #1a69a4 inset; 913 color: #1a69a4; 914 } 915 916 .ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) { 917 margin-left: -1px; 918 } 919 920 .ui.secondary.buttons .button, 921 .ui.secondary.button { 922 background-color: #1B1C1D; 923 color: #FFFFFF; 924 text-shadow: none; 925 background-image: none; 926 } 927 928 .ui.secondary.button { 929 box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; 930 } 931 932 .ui.secondary.buttons .button:hover, 933 .ui.secondary.button:hover { 934 background-color: #27292a; 935 color: #FFFFFF; 936 text-shadow: none; 937 } 938 939 .ui.secondary.buttons .button:focus, 940 .ui.secondary.button:focus { 941 background-color: #2e3032; 942 color: #FFFFFF; 943 text-shadow: none; 944 } 945 946 .ui.secondary.buttons .button:active, 947 .ui.secondary.button:active { 948 background-color: #343637; 949 color: #FFFFFF; 950 text-shadow: none; 951 } 952 953 .ui.secondary.buttons .active.button, 954 .ui.secondary.buttons .active.button:active, 955 .ui.secondary.active.button, 956 .ui.secondary.button .active.button:active { 957 background-color: #27292a; 958 color: #FFFFFF; 959 text-shadow: none; 960 } 961 962 /* Basic */ 963 964 .ui.basic.secondary.buttons .button, 965 .ui.basic.secondary.button { 966 background: transparent; 967 box-shadow: 0 0 0 1px #1B1C1D inset; 968 color: #1B1C1D; 969 } 970 971 .ui.basic.secondary.buttons .button:hover, 972 .ui.basic.secondary.button:hover { 973 background: transparent; 974 box-shadow: 0 0 0 1px #27292a inset; 975 color: #27292a; 976 } 977 978 .ui.basic.secondary.buttons .button:focus, 979 .ui.basic.secondary.button:focus { 980 background: transparent; 981 box-shadow: 0 0 0 1px #2e3032 inset; 982 color: #27292a; 983 } 984 985 .ui.basic.secondary.buttons .active.button, 986 .ui.basic.secondary.active.button { 987 background: transparent; 988 box-shadow: 0 0 0 1px #27292a inset; 989 color: #343637; 990 } 991 992 .ui.basic.secondary.buttons .button:active, 993 .ui.basic.secondary.button:active { 994 box-shadow: 0 0 0 1px #343637 inset; 995 color: #343637; 996 } 997 998 .ui.buttons:not(.vertical) > .basic.secondary.button:not(:first-child) { 999 margin-left: -1px; 1000 } 1001 1002 .ui.red.buttons .button, 1003 .ui.red.button { 1004 background-color: #DB2828; 1005 color: #FFFFFF; 1006 text-shadow: none; 1007 background-image: none; 1008 } 1009 1010 .ui.red.button { 1011 box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; 1012 } 1013 1014 .ui.red.buttons .button:hover, 1015 .ui.red.button:hover { 1016 background-color: #d01919; 1017 color: #FFFFFF; 1018 text-shadow: none; 1019 } 1020 1021 .ui.red.buttons .button:focus, 1022 .ui.red.button:focus { 1023 background-color: #ca1010; 1024 color: #FFFFFF; 1025 text-shadow: none; 1026 } 1027 1028 .ui.red.buttons .button:active, 1029 .ui.red.button:active { 1030 background-color: #b21e1e; 1031 color: #FFFFFF; 1032 text-shadow: none; 1033 } 1034 1035 .ui.red.buttons .active.button, 1036 .ui.red.buttons .active.button:active, 1037 .ui.red.active.button, 1038 .ui.red.button .active.button:active { 1039 background-color: #d41515; 1040 color: #FFFFFF; 1041 text-shadow: none; 1042 } 1043 1044 /* Basic */ 1045 1046 .ui.basic.red.buttons .button, 1047 .ui.basic.red.button { 1048 background: transparent; 1049 box-shadow: 0 0 0 1px #DB2828 inset; 1050 color: #DB2828; 1051 } 1052 1053 .ui.basic.red.buttons .button:hover, 1054 .ui.basic.red.button:hover { 1055 background: transparent; 1056 box-shadow: 0 0 0 1px #d01919 inset; 1057 color: #d01919; 1058 } 1059 1060 .ui.basic.red.buttons .button:focus, 1061 .ui.basic.red.button:focus { 1062 background: transparent; 1063 box-shadow: 0 0 0 1px #ca1010 inset; 1064 color: #d01919; 1065 } 1066 1067 .ui.basic.red.buttons .active.button, 1068 .ui.basic.red.active.button { 1069 background: transparent; 1070 box-shadow: 0 0 0 1px #d41515 inset; 1071 color: #b21e1e; 1072 } 1073 1074 .ui.basic.red.buttons .button:active, 1075 .ui.basic.red.button:active { 1076 box-shadow: 0 0 0 1px #b21e1e inset; 1077 color: #b21e1e; 1078 } 1079 1080 .ui.buttons:not(.vertical) > .basic.red.button:not(:first-child) { 1081 margin-left: -1px; 1082 } 1083 1084 .ui.orange.buttons .button, 1085 .ui.orange.button { 1086 background-color: #F2711C; 1087 color: #FFFFFF; 1088 text-shadow: none; 1089 background-image: none; 1090 } 1091 1092 .ui.orange.button { 1093 box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; 1094 } 1095 1096 .ui.orange.buttons .button:hover, 1097 .ui.orange.button:hover { 1098 background-color: #f26202; 1099 color: #FFFFFF; 1100 text-shadow: none; 1101 } 1102 1103 .ui.orange.buttons .button:focus, 1104 .ui.orange.button:focus { 1105 background-color: #e55b00; 1106 color: #FFFFFF; 1107 text-shadow: none; 1108 } 1109 1110 .ui.orange.buttons .button:active, 1111 .ui.orange.button:active { 1112 background-color: #cf590c; 1113 color: #FFFFFF; 1114 text-shadow: none; 1115 } 1116 1117 .ui.orange.buttons .active.button, 1118 .ui.orange.buttons .active.button:active, 1119 .ui.orange.active.button, 1120 .ui.orange.button .active.button:active { 1121 background-color: #f56100; 1122 color: #FFFFFF; 1123 text-shadow: none; 1124 } 1125 1126 /* Basic */ 1127 1128 .ui.basic.orange.buttons .button, 1129 .ui.basic.orange.button { 1130 background: transparent; 1131 box-shadow: 0 0 0 1px #F2711C inset; 1132 color: #F2711C; 1133 } 1134 1135 .ui.basic.orange.buttons .button:hover, 1136 .ui.basic.orange.button:hover { 1137 background: transparent; 1138 box-shadow: 0 0 0 1px #f26202 inset; 1139 color: #f26202; 1140 } 1141 1142 .ui.basic.orange.buttons .button:focus, 1143 .ui.basic.orange.button:focus { 1144 background: transparent; 1145 box-shadow: 0 0 0 1px #e55b00 inset; 1146 color: #f26202; 1147 } 1148 1149 .ui.basic.orange.buttons .active.button, 1150 .ui.basic.orange.active.button { 1151 background: transparent; 1152 box-shadow: 0 0 0 1px #f56100 inset; 1153 color: #cf590c; 1154 } 1155 1156 .ui.basic.orange.buttons .button:active, 1157 .ui.basic.orange.button:active { 1158 box-shadow: 0 0 0 1px #cf590c inset; 1159 color: #cf590c; 1160 } 1161 1162 .ui.buttons:not(.vertical) > .basic.orange.button:not(:first-child) { 1163 margin-left: -1px; 1164 } 1165 1166 .ui.yellow.buttons .button, 1167 .ui.yellow.button { 1168 background-color: #FBBD08; 1169 color: #FFFFFF; 1170 text-shadow: none; 1171 background-image: none; 1172 } 1173 1174 .ui.yellow.button { 1175 box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; 1176 } 1177 1178 .ui.yellow.buttons .button:hover, 1179 .ui.yellow.button:hover { 1180 background-color: #eaae00; 1181 color: #FFFFFF; 1182 text-shadow: none; 1183 } 1184 1185 .ui.yellow.buttons .button:focus, 1186 .ui.yellow.button:focus { 1187 background-color: #daa300; 1188 color: #FFFFFF; 1189 text-shadow: none; 1190 } 1191 1192 .ui.yellow.buttons .button:active, 1193 .ui.yellow.button:active { 1194 background-color: #cd9903; 1195 color: #FFFFFF; 1196 text-shadow: none; 1197 } 1198 1199 .ui.yellow.buttons .active.button, 1200 .ui.yellow.buttons .active.button:active, 1201 .ui.yellow.active.button, 1202 .ui.yellow.button .active.button:active { 1203 background-color: #eaae00; 1204 color: #FFFFFF; 1205 text-shadow: none; 1206 } 1207 1208 /* Basic */ 1209 1210 .ui.basic.yellow.buttons .button, 1211 .ui.basic.yellow.button { 1212 background: transparent; 1213 box-shadow: 0 0 0 1px #FBBD08 inset; 1214 color: #FBBD08; 1215 } 1216 1217 .ui.basic.yellow.buttons .button:hover, 1218 .ui.basic.yellow.button:hover { 1219 background: transparent; 1220 box-shadow: 0 0 0 1px #eaae00 inset; 1221 color: #eaae00; 1222 } 1223 1224 .ui.basic.yellow.buttons .button:focus, 1225 .ui.basic.yellow.button:focus { 1226 background: transparent; 1227 box-shadow: 0 0 0 1px #daa300 inset; 1228 color: #eaae00; 1229 } 1230 1231 .ui.basic.yellow.buttons .active.button, 1232 .ui.basic.yellow.active.button { 1233 background: transparent; 1234 box-shadow: 0 0 0 1px #eaae00 inset; 1235 color: #cd9903; 1236 } 1237 1238 .ui.basic.yellow.buttons .button:active, 1239 .ui.basic.yellow.button:active { 1240 box-shadow: 0 0 0 1px #cd9903 inset; 1241 color: #cd9903; 1242 } 1243 1244 .ui.buttons:not(.vertical) > .basic.yellow.button:not(:first-child) { 1245 margin-left: -1px; 1246 } 1247 1248 .ui.olive.buttons .button, 1249 .ui.olive.button { 1250 background-color: #B5CC18; 1251 color: #FFFFFF; 1252 text-shadow: none; 1253 background-image: none; 1254 } 1255 1256 .ui.olive.button { 1257 box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; 1258 } 1259 1260 .ui.olive.buttons .button:hover, 1261 .ui.olive.button:hover { 1262 background-color: #a7bd0d; 1263 color: #FFFFFF; 1264 text-shadow: none; 1265 } 1266 1267 .ui.olive.buttons .button:focus, 1268 .ui.olive.button:focus { 1269 background-color: #a0b605; 1270 color: #FFFFFF; 1271 text-shadow: none; 1272 } 1273 1274 .ui.olive.buttons .button:active, 1275 .ui.olive.button:active { 1276 background-color: #8d9e13; 1277 color: #FFFFFF; 1278 text-shadow: none; 1279 } 1280 1281 .ui.olive.buttons .active.button, 1282 .ui.olive.buttons .active.button:active, 1283 .ui.olive.active.button, 1284 .ui.olive.button .active.button:active { 1285 background-color: #aac109; 1286 color: #FFFFFF; 1287 text-shadow: none; 1288 } 1289 1290 /* Basic */ 1291 1292 .ui.basic.olive.buttons .button, 1293 .ui.basic.olive.button { 1294 background: transparent; 1295 box-shadow: 0 0 0 1px #B5CC18 inset; 1296 color: #B5CC18; 1297 } 1298 1299 .ui.basic.olive.buttons .button:hover, 1300 .ui.basic.olive.button:hover { 1301 background: transparent; 1302 box-shadow: 0 0 0 1px #a7bd0d inset; 1303 color: #a7bd0d; 1304 } 1305 1306 .ui.basic.olive.buttons .button:focus, 1307 .ui.basic.olive.button:focus { 1308 background: transparent; 1309 box-shadow: 0 0 0 1px #a0b605 inset; 1310 color: #a7bd0d; 1311 } 1312 1313 .ui.basic.olive.buttons .active.button, 1314 .ui.basic.olive.active.button { 1315 background: transparent; 1316 box-shadow: 0 0 0 1px #aac109 inset; 1317 color: #8d9e13; 1318 } 1319 1320 .ui.basic.olive.buttons .button:active, 1321 .ui.basic.olive.button:active { 1322 box-shadow: 0 0 0 1px #8d9e13 inset; 1323 color: #8d9e13; 1324 } 1325 1326 .ui.buttons:not(.vertical) > .basic.olive.button:not(:first-child) { 1327 margin-left: -1px; 1328 } 1329 1330 .ui.green.buttons .button, 1331 .ui.green.button { 1332 background-color: #21BA45; 1333 color: #FFFFFF; 1334 text-shadow: none; 1335 background-image: none; 1336 } 1337 1338 .ui.green.button { 1339 box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; 1340 } 1341 1342 .ui.green.buttons .button:hover, 1343 .ui.green.button:hover { 1344 background-color: #16ab39; 1345 color: #FFFFFF; 1346 text-shadow: none; 1347 } 1348 1349 .ui.green.buttons .button:focus, 1350 .ui.green.button:focus { 1351 background-color: #0ea432; 1352 color: #FFFFFF; 1353 text-shadow: none; 1354 } 1355 1356 .ui.green.buttons .button:active, 1357 .ui.green.button:active { 1358 background-color: #198f35; 1359 color: #FFFFFF; 1360 text-shadow: none; 1361 } 1362 1363 .ui.green.buttons .active.button, 1364 .ui.green.buttons .active.button:active, 1365 .ui.green.active.button, 1366 .ui.green.button .active.button:active { 1367 background-color: #13ae38; 1368 color: #FFFFFF; 1369 text-shadow: none; 1370 } 1371 1372 /* Basic */ 1373 1374 .ui.basic.green.buttons .button, 1375 .ui.basic.green.button { 1376 background: transparent; 1377 box-shadow: 0 0 0 1px #21BA45 inset; 1378 color: #21BA45; 1379 } 1380 1381 .ui.basic.green.buttons .button:hover, 1382 .ui.basic.green.button:hover { 1383 background: transparent; 1384 box-shadow: 0 0 0 1px #16ab39 inset; 1385 color: #16ab39; 1386 } 1387 1388 .ui.basic.green.buttons .button:focus, 1389 .ui.basic.green.button:focus { 1390 background: transparent; 1391 box-shadow: 0 0 0 1px #0ea432 inset; 1392 color: #16ab39; 1393 } 1394 1395 .ui.basic.green.buttons .active.button, 1396 .ui.basic.green.active.button { 1397 background: transparent; 1398 box-shadow: 0 0 0 1px #13ae38 inset; 1399 color: #198f35; 1400 } 1401 1402 .ui.basic.green.buttons .button:active, 1403 .ui.basic.green.button:active { 1404 box-shadow: 0 0 0 1px #198f35 inset; 1405 color: #198f35; 1406 } 1407 1408 .ui.buttons:not(.vertical) > .basic.green.button:not(:first-child) { 1409 margin-left: -1px; 1410 } 1411 1412 .ui.teal.buttons .button, 1413 .ui.teal.button { 1414 background-color: #00B5AD; 1415 color: #FFFFFF; 1416 text-shadow: none; 1417 background-image: none; 1418 } 1419 1420 .ui.teal.button { 1421 box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; 1422 } 1423 1424 .ui.teal.buttons .button:hover, 1425 .ui.teal.button:hover { 1426 background-color: #009c95; 1427 color: #FFFFFF; 1428 text-shadow: none; 1429 } 1430 1431 .ui.teal.buttons .button:focus, 1432 .ui.teal.button:focus { 1433 background-color: #008c86; 1434 color: #FFFFFF; 1435 text-shadow: none; 1436 } 1437 1438 .ui.teal.buttons .button:active, 1439 .ui.teal.button:active { 1440 background-color: #00827c; 1441 color: #FFFFFF; 1442 text-shadow: none; 1443 } 1444 1445 .ui.teal.buttons .active.button, 1446 .ui.teal.buttons .active.button:active, 1447 .ui.teal.active.button, 1448 .ui.teal.button .active.button:active { 1449 background-color: #009c95; 1450 color: #FFFFFF; 1451 text-shadow: none; 1452 } 1453 1454 /* Basic */ 1455 1456 .ui.basic.teal.buttons .button, 1457 .ui.basic.teal.button { 1458 background: transparent; 1459 box-shadow: 0 0 0 1px #00B5AD inset; 1460 color: #00B5AD; 1461 } 1462 1463 .ui.basic.teal.buttons .button:hover, 1464 .ui.basic.teal.button:hover { 1465 background: transparent; 1466 box-shadow: 0 0 0 1px #009c95 inset; 1467 color: #009c95; 1468 } 1469 1470 .ui.basic.teal.buttons .button:focus, 1471 .ui.basic.teal.button:focus { 1472 background: transparent; 1473 box-shadow: 0 0 0 1px #008c86 inset; 1474 color: #009c95; 1475 } 1476 1477 .ui.basic.teal.buttons .active.button, 1478 .ui.basic.teal.active.button { 1479 background: transparent; 1480 box-shadow: 0 0 0 1px #009c95 inset; 1481 color: #00827c; 1482 } 1483 1484 .ui.basic.teal.buttons .button:active, 1485 .ui.basic.teal.button:active { 1486 box-shadow: 0 0 0 1px #00827c inset; 1487 color: #00827c; 1488 } 1489 1490 .ui.buttons:not(.vertical) > .basic.teal.button:not(:first-child) { 1491 margin-left: -1px; 1492 } 1493 1494 .ui.blue.buttons .button, 1495 .ui.blue.button { 1496 background-color: #2185D0; 1497 color: #FFFFFF; 1498 text-shadow: none; 1499 background-image: none; 1500 } 1501 1502 .ui.blue.button { 1503 box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; 1504 } 1505 1506 .ui.blue.buttons .button:hover, 1507 .ui.blue.button:hover { 1508 background-color: #1678c2; 1509 color: #FFFFFF; 1510 text-shadow: none; 1511 } 1512 1513 .ui.blue.buttons .button:focus, 1514 .ui.blue.button:focus { 1515 background-color: #0d71bb; 1516 color: #FFFFFF; 1517 text-shadow: none; 1518 } 1519 1520 .ui.blue.buttons .button:active, 1521 .ui.blue.button:active { 1522 background-color: #1a69a4; 1523 color: #FFFFFF; 1524 text-shadow: none; 1525 } 1526 1527 .ui.blue.buttons .active.button, 1528 .ui.blue.buttons .active.button:active, 1529 .ui.blue.active.button, 1530 .ui.blue.button .active.button:active { 1531 background-color: #1279c6; 1532 color: #FFFFFF; 1533 text-shadow: none; 1534 } 1535 1536 /* Basic */ 1537 1538 .ui.basic.blue.buttons .button, 1539 .ui.basic.blue.button { 1540 background: transparent; 1541 box-shadow: 0 0 0 1px #2185D0 inset; 1542 color: #2185D0; 1543 } 1544 1545 .ui.basic.blue.buttons .button:hover, 1546 .ui.basic.blue.button:hover { 1547 background: transparent; 1548 box-shadow: 0 0 0 1px #1678c2 inset; 1549 color: #1678c2; 1550 } 1551 1552 .ui.basic.blue.buttons .button:focus, 1553 .ui.basic.blue.button:focus { 1554 background: transparent; 1555 box-shadow: 0 0 0 1px #0d71bb inset; 1556 color: #1678c2; 1557 } 1558 1559 .ui.basic.blue.buttons .active.button, 1560 .ui.basic.blue.active.button { 1561 background: transparent; 1562 box-shadow: 0 0 0 1px #1279c6 inset; 1563 color: #1a69a4; 1564 } 1565 1566 .ui.basic.blue.buttons .button:active, 1567 .ui.basic.blue.button:active { 1568 box-shadow: 0 0 0 1px #1a69a4 inset; 1569 color: #1a69a4; 1570 } 1571 1572 .ui.buttons:not(.vertical) > .basic.blue.button:not(:first-child) { 1573 margin-left: -1px; 1574 } 1575 1576 .ui.violet.buttons .button, 1577 .ui.violet.button { 1578 background-color: #6435C9; 1579 color: #FFFFFF; 1580 text-shadow: none; 1581 background-image: none; 1582 } 1583 1584 .ui.violet.button { 1585 box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; 1586 } 1587 1588 .ui.violet.buttons .button:hover, 1589 .ui.violet.button:hover { 1590 background-color: #5829bb; 1591 color: #FFFFFF; 1592 text-shadow: none; 1593 } 1594 1595 .ui.violet.buttons .button:focus, 1596 .ui.violet.button:focus { 1597 background-color: #4f20b5; 1598 color: #FFFFFF; 1599 text-shadow: none; 1600 } 1601 1602 .ui.violet.buttons .button:active, 1603 .ui.violet.button:active { 1604 background-color: #502aa1; 1605 color: #FFFFFF; 1606 text-shadow: none; 1607 } 1608 1609 .ui.violet.buttons .active.button, 1610 .ui.violet.buttons .active.button:active, 1611 .ui.violet.active.button, 1612 .ui.violet.button .active.button:active { 1613 background-color: #5626bf; 1614 color: #FFFFFF; 1615 text-shadow: none; 1616 } 1617 1618 /* Basic */ 1619 1620 .ui.basic.violet.buttons .button, 1621 .ui.basic.violet.button { 1622 background: transparent; 1623 box-shadow: 0 0 0 1px #6435C9 inset; 1624 color: #6435C9; 1625 } 1626 1627 .ui.basic.violet.buttons .button:hover, 1628 .ui.basic.violet.button:hover { 1629 background: transparent; 1630 box-shadow: 0 0 0 1px #5829bb inset; 1631 color: #5829bb; 1632 } 1633 1634 .ui.basic.violet.buttons .button:focus, 1635 .ui.basic.violet.button:focus { 1636 background: transparent; 1637 box-shadow: 0 0 0 1px #4f20b5 inset; 1638 color: #5829bb; 1639 } 1640 1641 .ui.basic.violet.buttons .active.button, 1642 .ui.basic.violet.active.button { 1643 background: transparent; 1644 box-shadow: 0 0 0 1px #5626bf inset; 1645 color: #502aa1; 1646 } 1647 1648 .ui.basic.violet.buttons .button:active, 1649 .ui.basic.violet.button:active { 1650 box-shadow: 0 0 0 1px #502aa1 inset; 1651 color: #502aa1; 1652 } 1653 1654 .ui.buttons:not(.vertical) > .basic.violet.button:not(:first-child) { 1655 margin-left: -1px; 1656 } 1657 1658 .ui.purple.buttons .button, 1659 .ui.purple.button { 1660 background-color: #A333C8; 1661 color: #FFFFFF; 1662 text-shadow: none; 1663 background-image: none; 1664 } 1665 1666 .ui.purple.button { 1667 box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; 1668 } 1669 1670 .ui.purple.buttons .button:hover, 1671 .ui.purple.button:hover { 1672 background-color: #9627ba; 1673 color: #FFFFFF; 1674 text-shadow: none; 1675 } 1676 1677 .ui.purple.buttons .button:focus, 1678 .ui.purple.button:focus { 1679 background-color: #8f1eb4; 1680 color: #FFFFFF; 1681 text-shadow: none; 1682 } 1683 1684 .ui.purple.buttons .button:active, 1685 .ui.purple.button:active { 1686 background-color: #82299f; 1687 color: #FFFFFF; 1688 text-shadow: none; 1689 } 1690 1691 .ui.purple.buttons .active.button, 1692 .ui.purple.buttons .active.button:active, 1693 .ui.purple.active.button, 1694 .ui.purple.button .active.button:active { 1695 background-color: #9724be; 1696 color: #FFFFFF; 1697 text-shadow: none; 1698 } 1699 1700 /* Basic */ 1701 1702 .ui.basic.purple.buttons .button, 1703 .ui.basic.purple.button { 1704 background: transparent; 1705 box-shadow: 0 0 0 1px #A333C8 inset; 1706 color: #A333C8; 1707 } 1708 1709 .ui.basic.purple.buttons .button:hover, 1710 .ui.basic.purple.button:hover { 1711 background: transparent; 1712 box-shadow: 0 0 0 1px #9627ba inset; 1713 color: #9627ba; 1714 } 1715 1716 .ui.basic.purple.buttons .button:focus, 1717 .ui.basic.purple.button:focus { 1718 background: transparent; 1719 box-shadow: 0 0 0 1px #8f1eb4 inset; 1720 color: #9627ba; 1721 } 1722 1723 .ui.basic.purple.buttons .active.button, 1724 .ui.basic.purple.active.button { 1725 background: transparent; 1726 box-shadow: 0 0 0 1px #9724be inset; 1727 color: #82299f; 1728 } 1729 1730 .ui.basic.purple.buttons .button:active, 1731 .ui.basic.purple.button:active { 1732 box-shadow: 0 0 0 1px #82299f inset; 1733 color: #82299f; 1734 } 1735 1736 .ui.buttons:not(.vertical) > .basic.purple.button:not(:first-child) { 1737 margin-left: -1px; 1738 } 1739 1740 .ui.pink.buttons .button, 1741 .ui.pink.button { 1742 background-color: #E03997; 1743 color: #FFFFFF; 1744 text-shadow: none; 1745 background-image: none; 1746 } 1747 1748 .ui.pink.button { 1749 box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; 1750 } 1751 1752 .ui.pink.buttons .button:hover, 1753 .ui.pink.button:hover { 1754 background-color: #e61a8d; 1755 color: #FFFFFF; 1756 text-shadow: none; 1757 } 1758 1759 .ui.pink.buttons .button:focus, 1760 .ui.pink.button:focus { 1761 background-color: #e10f85; 1762 color: #FFFFFF; 1763 text-shadow: none; 1764 } 1765 1766 .ui.pink.buttons .button:active, 1767 .ui.pink.button:active { 1768 background-color: #c71f7e; 1769 color: #FFFFFF; 1770 text-shadow: none; 1771 } 1772 1773 .ui.pink.buttons .active.button, 1774 .ui.pink.buttons .active.button:active, 1775 .ui.pink.active.button, 1776 .ui.pink.button .active.button:active { 1777 background-color: #ea158d; 1778 color: #FFFFFF; 1779 text-shadow: none; 1780 } 1781 1782 /* Basic */ 1783 1784 .ui.basic.pink.buttons .button, 1785 .ui.basic.pink.button { 1786 background: transparent; 1787 box-shadow: 0 0 0 1px #E03997 inset; 1788 color: #E03997; 1789 } 1790 1791 .ui.basic.pink.buttons .button:hover, 1792 .ui.basic.pink.button:hover { 1793 background: transparent; 1794 box-shadow: 0 0 0 1px #e61a8d inset; 1795 color: #e61a8d; 1796 } 1797 1798 .ui.basic.pink.buttons .button:focus, 1799 .ui.basic.pink.button:focus { 1800 background: transparent; 1801 box-shadow: 0 0 0 1px #e10f85 inset; 1802 color: #e61a8d; 1803 } 1804 1805 .ui.basic.pink.buttons .active.button, 1806 .ui.basic.pink.active.button { 1807 background: transparent; 1808 box-shadow: 0 0 0 1px #ea158d inset; 1809 color: #c71f7e; 1810 } 1811 1812 .ui.basic.pink.buttons .button:active, 1813 .ui.basic.pink.button:active { 1814 box-shadow: 0 0 0 1px #c71f7e inset; 1815 color: #c71f7e; 1816 } 1817 1818 .ui.buttons:not(.vertical) > .basic.pink.button:not(:first-child) { 1819 margin-left: -1px; 1820 } 1821 1822 .ui.brown.buttons .button, 1823 .ui.brown.button { 1824 background-color: #A5673F; 1825 color: #FFFFFF; 1826 text-shadow: none; 1827 background-image: none; 1828 } 1829 1830 .ui.brown.button { 1831 box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; 1832 } 1833 1834 .ui.brown.buttons .button:hover, 1835 .ui.brown.button:hover { 1836 background-color: #975b33; 1837 color: #FFFFFF; 1838 text-shadow: none; 1839 } 1840 1841 .ui.brown.buttons .button:focus, 1842 .ui.brown.button:focus { 1843 background-color: #90532b; 1844 color: #FFFFFF; 1845 text-shadow: none; 1846 } 1847 1848 .ui.brown.buttons .button:active, 1849 .ui.brown.button:active { 1850 background-color: #805031; 1851 color: #FFFFFF; 1852 text-shadow: none; 1853 } 1854 1855 .ui.brown.buttons .active.button, 1856 .ui.brown.buttons .active.button:active, 1857 .ui.brown.active.button, 1858 .ui.brown.button .active.button:active { 1859 background-color: #995a31; 1860 color: #FFFFFF; 1861 text-shadow: none; 1862 } 1863 1864 /* Basic */ 1865 1866 .ui.basic.brown.buttons .button, 1867 .ui.basic.brown.button { 1868 background: transparent; 1869 box-shadow: 0 0 0 1px #A5673F inset; 1870 color: #A5673F; 1871 } 1872 1873 .ui.basic.brown.buttons .button:hover, 1874 .ui.basic.brown.button:hover { 1875 background: transparent; 1876 box-shadow: 0 0 0 1px #975b33 inset; 1877 color: #975b33; 1878 } 1879 1880 .ui.basic.brown.buttons .button:focus, 1881 .ui.basic.brown.button:focus { 1882 background: transparent; 1883 box-shadow: 0 0 0 1px #90532b inset; 1884 color: #975b33; 1885 } 1886 1887 .ui.basic.brown.buttons .active.button, 1888 .ui.basic.brown.active.button { 1889 background: transparent; 1890 box-shadow: 0 0 0 1px #995a31 inset; 1891 color: #805031; 1892 } 1893 1894 .ui.basic.brown.buttons .button:active, 1895 .ui.basic.brown.button:active { 1896 box-shadow: 0 0 0 1px #805031 inset; 1897 color: #805031; 1898 } 1899 1900 .ui.buttons:not(.vertical) > .basic.brown.button:not(:first-child) { 1901 margin-left: -1px; 1902 } 1903 1904 .ui.grey.buttons .button, 1905 .ui.grey.button { 1906 background-color: #767676; 1907 color: #FFFFFF; 1908 text-shadow: none; 1909 background-image: none; 1910 } 1911 1912 .ui.grey.button { 1913 box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; 1914 } 1915 1916 .ui.grey.buttons .button:hover, 1917 .ui.grey.button:hover { 1918 background-color: #838383; 1919 color: #FFFFFF; 1920 text-shadow: none; 1921 } 1922 1923 .ui.grey.buttons .button:focus, 1924 .ui.grey.button:focus { 1925 background-color: #8a8a8a; 1926 color: #FFFFFF; 1927 text-shadow: none; 1928 } 1929 1930 .ui.grey.buttons .button:active, 1931 .ui.grey.button:active { 1932 background-color: #909090; 1933 color: #FFFFFF; 1934 text-shadow: none; 1935 } 1936 1937 .ui.grey.buttons .active.button, 1938 .ui.grey.buttons .active.button:active, 1939 .ui.grey.active.button, 1940 .ui.grey.button .active.button:active { 1941 background-color: #696969; 1942 color: #FFFFFF; 1943 text-shadow: none; 1944 } 1945 1946 /* Basic */ 1947 1948 .ui.basic.grey.buttons .button, 1949 .ui.basic.grey.button { 1950 background: transparent; 1951 box-shadow: 0 0 0 1px #767676 inset; 1952 color: #767676; 1953 } 1954 1955 .ui.basic.grey.buttons .button:hover, 1956 .ui.basic.grey.button:hover { 1957 background: transparent; 1958 box-shadow: 0 0 0 1px #838383 inset; 1959 color: #838383; 1960 } 1961 1962 .ui.basic.grey.buttons .button:focus, 1963 .ui.basic.grey.button:focus { 1964 background: transparent; 1965 box-shadow: 0 0 0 1px #8a8a8a inset; 1966 color: #838383; 1967 } 1968 1969 .ui.basic.grey.buttons .active.button, 1970 .ui.basic.grey.active.button { 1971 background: transparent; 1972 box-shadow: 0 0 0 1px #696969 inset; 1973 color: #909090; 1974 } 1975 1976 .ui.basic.grey.buttons .button:active, 1977 .ui.basic.grey.button:active { 1978 box-shadow: 0 0 0 1px #909090 inset; 1979 color: #909090; 1980 } 1981 1982 .ui.buttons:not(.vertical) > .basic.grey.button:not(:first-child) { 1983 margin-left: -1px; 1984 } 1985 1986 .ui.black.buttons .button, 1987 .ui.black.button { 1988 background-color: #1B1C1D; 1989 color: #FFFFFF; 1990 text-shadow: none; 1991 background-image: none; 1992 } 1993 1994 .ui.black.button { 1995 box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; 1996 } 1997 1998 .ui.black.buttons .button:hover, 1999 .ui.black.button:hover { 2000 background-color: #27292a; 2001 color: #FFFFFF; 2002 text-shadow: none; 2003 } 2004 2005 .ui.black.buttons .button:focus, 2006 .ui.black.button:focus { 2007 background-color: #2f3032; 2008 color: #FFFFFF; 2009 text-shadow: none; 2010 } 2011 2012 .ui.black.buttons .button:active, 2013 .ui.black.button:active { 2014 background-color: #343637; 2015 color: #FFFFFF; 2016 text-shadow: none; 2017 } 2018 2019 .ui.black.buttons .active.button, 2020 .ui.black.buttons .active.button:active, 2021 .ui.black.active.button, 2022 .ui.black.button .active.button:active { 2023 background-color: #0f0f10; 2024 color: #FFFFFF; 2025 text-shadow: none; 2026 } 2027 2028 /* Basic */ 2029 2030 .ui.basic.black.buttons .button, 2031 .ui.basic.black.button { 2032 background: transparent; 2033 box-shadow: 0 0 0 1px #1B1C1D inset; 2034 color: #1B1C1D; 2035 } 2036 2037 .ui.basic.black.buttons .button:hover, 2038 .ui.basic.black.button:hover { 2039 background: transparent; 2040 box-shadow: 0 0 0 1px #27292a inset; 2041 color: #27292a; 2042 } 2043 2044 .ui.basic.black.buttons .button:focus, 2045 .ui.basic.black.button:focus { 2046 background: transparent; 2047 box-shadow: 0 0 0 1px #2f3032 inset; 2048 color: #27292a; 2049 } 2050 2051 .ui.basic.black.buttons .active.button, 2052 .ui.basic.black.active.button { 2053 background: transparent; 2054 box-shadow: 0 0 0 1px #0f0f10 inset; 2055 color: #343637; 2056 } 2057 2058 .ui.basic.black.buttons .button:active, 2059 .ui.basic.black.button:active { 2060 box-shadow: 0 0 0 1px #343637 inset; 2061 color: #343637; 2062 } 2063 2064 .ui.buttons:not(.vertical) > .basic.black.button:not(:first-child) { 2065 margin-left: -1px; 2066 } 2067 2068 /*--------------- 2069 Positive 2070 ----------------*/ 2071 2072 /* Standard */ 2073 2074 .ui.positive.buttons .button, 2075 .ui.positive.button { 2076 background-color: #21BA45; 2077 color: #FFFFFF; 2078 text-shadow: none; 2079 background-image: none; 2080 } 2081 2082 .ui.positive.button { 2083 box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; 2084 } 2085 2086 .ui.positive.buttons .button:hover, 2087 .ui.positive.button:hover { 2088 background-color: #16ab39; 2089 color: #FFFFFF; 2090 text-shadow: none; 2091 } 2092 2093 .ui.positive.buttons .button:focus, 2094 .ui.positive.button:focus { 2095 background-color: #0ea432; 2096 color: #FFFFFF; 2097 text-shadow: none; 2098 } 2099 2100 .ui.positive.buttons .button:active, 2101 .ui.positive.button:active { 2102 background-color: #198f35; 2103 color: #FFFFFF; 2104 text-shadow: none; 2105 } 2106 2107 .ui.positive.buttons .active.button, 2108 .ui.positive.buttons .active.button:active, 2109 .ui.positive.active.button, 2110 .ui.positive.button .active.button:active { 2111 background-color: #13ae38; 2112 color: #FFFFFF; 2113 text-shadow: none; 2114 } 2115 2116 /* Basic */ 2117 2118 .ui.basic.positive.buttons .button, 2119 .ui.basic.positive.button { 2120 background: transparent; 2121 box-shadow: 0 0 0 1px #21BA45 inset; 2122 color: #21BA45; 2123 } 2124 2125 .ui.basic.positive.buttons .button:hover, 2126 .ui.basic.positive.button:hover { 2127 background: transparent; 2128 box-shadow: 0 0 0 1px #16ab39 inset; 2129 color: #16ab39; 2130 } 2131 2132 .ui.basic.positive.buttons .button:focus, 2133 .ui.basic.positive.button:focus { 2134 background: transparent; 2135 box-shadow: 0 0 0 1px #0ea432 inset; 2136 color: #16ab39; 2137 } 2138 2139 .ui.basic.positive.buttons .active.button, 2140 .ui.basic.positive.active.button { 2141 background: transparent; 2142 box-shadow: 0 0 0 1px #13ae38 inset; 2143 color: #198f35; 2144 } 2145 2146 .ui.basic.positive.buttons .button:active, 2147 .ui.basic.positive.button:active { 2148 box-shadow: 0 0 0 1px #198f35 inset; 2149 color: #198f35; 2150 } 2151 2152 .ui.buttons:not(.vertical) > .basic.positive.button:not(:first-child) { 2153 margin-left: -1px; 2154 } 2155 2156 /*--------------- 2157 Negative 2158 ----------------*/ 2159 2160 /* Standard */ 2161 2162 .ui.negative.buttons .button, 2163 .ui.negative.button { 2164 background-color: #DB2828; 2165 color: #FFFFFF; 2166 text-shadow: none; 2167 background-image: none; 2168 } 2169 2170 .ui.negative.button { 2171 box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset; 2172 } 2173 2174 .ui.negative.buttons .button:hover, 2175 .ui.negative.button:hover { 2176 background-color: #d01919; 2177 color: #FFFFFF; 2178 text-shadow: none; 2179 } 2180 2181 .ui.negative.buttons .button:focus, 2182 .ui.negative.button:focus { 2183 background-color: #ca1010; 2184 color: #FFFFFF; 2185 text-shadow: none; 2186 } 2187 2188 .ui.negative.buttons .button:active, 2189 .ui.negative.button:active { 2190 background-color: #b21e1e; 2191 color: #FFFFFF; 2192 text-shadow: none; 2193 } 2194 2195 .ui.negative.buttons .active.button, 2196 .ui.negative.buttons .active.button:active, 2197 .ui.negative.active.button, 2198 .ui.negative.button .active.button:active { 2199 background-color: #d41515; 2200 color: #FFFFFF; 2201 text-shadow: none; 2202 } 2203 2204 /* Basic */ 2205 2206 .ui.basic.negative.buttons .button, 2207 .ui.basic.negative.button { 2208 background: transparent; 2209 box-shadow: 0 0 0 1px #DB2828 inset; 2210 color: #DB2828; 2211 } 2212 2213 .ui.basic.negative.buttons .button:hover, 2214 .ui.basic.negative.button:hover { 2215 background: transparent; 2216 box-shadow: 0 0 0 1px #d01919 inset; 2217 color: #d01919; 2218 } 2219 2220 .ui.basic.negative.buttons .button:focus, 2221 .ui.basic.negative.button:focus { 2222 background: transparent; 2223 box-shadow: 0 0 0 1px #ca1010 inset; 2224 color: #d01919; 2225 } 2226 2227 .ui.basic.negative.buttons .active.button, 2228 .ui.basic.negative.active.button { 2229 background: transparent; 2230 box-shadow: 0 0 0 1px #d41515 inset; 2231 color: #b21e1e; 2232 } 2233 2234 .ui.basic.negative.buttons .button:active, 2235 .ui.basic.negative.button:active { 2236 box-shadow: 0 0 0 1px #b21e1e inset; 2237 color: #b21e1e; 2238 } 2239 2240 .ui.buttons:not(.vertical) > .basic.negative.button:not(:first-child) { 2241 margin-left: -1px; 2242 } 2243 2244 /******************************* 2245 Groups 2246 *******************************/ 2247 2248 .ui.buttons { 2249 display: inline-flex; 2250 flex-direction: row; 2251 font-size: 0; 2252 vertical-align: baseline; 2253 margin: 0 0.25em 0 0; 2254 } 2255 2256 .ui.buttons:not(.basic):not(.inverted) { 2257 box-shadow: none; 2258 } 2259 2260 /* Clearfix */ 2261 2262 .ui.buttons:after { 2263 content: "."; 2264 display: block; 2265 height: 0; 2266 clear: both; 2267 visibility: hidden; 2268 } 2269 2270 /* Standard Group */ 2271 2272 .ui.buttons .button { 2273 flex: 1 0 auto; 2274 border-radius: 0; 2275 margin: 0 0 0 0; 2276 } 2277 2278 .ui.buttons:not(.basic):not(.inverted) > .button:not(.basic):not(.inverted) { 2279 box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset; 2280 } 2281 2282 .ui.buttons .button:first-child { 2283 border-left: none; 2284 margin-left: 0; 2285 border-top-left-radius: 0.28571429rem; 2286 border-bottom-left-radius: 0.28571429rem; 2287 } 2288 2289 .ui.buttons .button:last-child { 2290 border-top-right-radius: 0.28571429rem; 2291 border-bottom-right-radius: 0.28571429rem; 2292 } 2293 2294 /* Vertical Style */ 2295 2296 .ui.vertical.buttons { 2297 display: inline-flex; 2298 flex-direction: column; 2299 } 2300 2301 .ui.vertical.buttons .button { 2302 display: block; 2303 float: none; 2304 width: 100%; 2305 margin: 0 0 0 0; 2306 box-shadow: none; 2307 border-radius: 0; 2308 } 2309 2310 .ui.vertical.buttons .button:first-child { 2311 border-top-left-radius: 0.28571429rem; 2312 border-top-right-radius: 0.28571429rem; 2313 } 2314 2315 .ui.vertical.buttons .button:last-child { 2316 margin-bottom: 0; 2317 border-bottom-left-radius: 0.28571429rem; 2318 border-bottom-right-radius: 0.28571429rem; 2319 } 2320 2321 .ui.vertical.buttons .button:only-child { 2322 border-radius: 0.28571429rem; 2323 } 2324 2325 /******************************* 2326 Theme Overrides 2327 *******************************/ 2328 2329 /******************************* 2330 Site Overrides 2331 *******************************/ 2332 /*! 2333 * # Fomantic-UI - Checkbox 2334 * http://github.com/fomantic/Fomantic-UI/ 2335 * 2336 * 2337 * Released under the MIT license 2338 * http://opensource.org/licenses/MIT 2339 * 2340 */ 2341 2342 /******************************* 2343 Checkbox 2344 *******************************/ 2345 2346 /*-------------- 2347 Content 2348 ---------------*/ 2349 2350 .ui.checkbox { 2351 position: relative; 2352 display: inline-block; 2353 -webkit-backface-visibility: hidden; 2354 backface-visibility: hidden; 2355 outline: none; 2356 vertical-align: baseline; 2357 font-style: normal; 2358 min-height: 17px; 2359 font-size: 1em; 2360 line-height: 17px; 2361 min-width: 17px; 2362 } 2363 2364 /* HTML Checkbox */ 2365 2366 .ui.checkbox input[type="checkbox"], 2367 .ui.checkbox input[type="radio"] { 2368 cursor: pointer; 2369 position: absolute; 2370 top: 0; 2371 left: 0; 2372 opacity: 0 !important; 2373 outline: none; 2374 z-index: 3; 2375 width: 17px; 2376 height: 17px; 2377 } 2378 2379 .ui.checkbox label { 2380 cursor: auto; 2381 position: relative; 2382 display: block; 2383 padding-left: 1.85714em; 2384 outline: none; 2385 font-size: 1em; 2386 } 2387 2388 .ui.checkbox label:before { 2389 position: absolute; 2390 top: 0; 2391 left: 0; 2392 width: 17px; 2393 height: 17px; 2394 content: ''; 2395 background: #FFFFFF; 2396 border-radius: 0.21428571rem; 2397 transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease; 2398 border: 1px solid #D4D4D5; 2399 } 2400 2401 /*-------------- 2402 Checkmark 2403 ---------------*/ 2404 2405 .ui.checkbox label:after { 2406 position: absolute; 2407 font-size: 14px; 2408 top: 0; 2409 left: 0; 2410 width: 17px; 2411 height: 17px; 2412 text-align: center; 2413 opacity: 0; 2414 color: rgba(0, 0, 0, 0.87); 2415 transition: border 0.1s ease, opacity 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease; 2416 } 2417 2418 /*-------------- 2419 Label 2420 ---------------*/ 2421 2422 /* Inside */ 2423 2424 .ui.checkbox label, 2425 .ui.checkbox + label { 2426 color: rgba(0, 0, 0, 0.87); 2427 transition: color 0.1s ease; 2428 } 2429 2430 /* Outside */ 2431 2432 .ui.checkbox + label { 2433 vertical-align: middle; 2434 } 2435 2436 /******************************* 2437 States 2438 *******************************/ 2439 2440 /*-------------- 2441 Hover 2442 ---------------*/ 2443 2444 .ui.checkbox label:hover::before { 2445 background: #FFFFFF; 2446 border-color: rgba(34, 36, 38, 0.35); 2447 } 2448 2449 .ui.checkbox label:hover, 2450 .ui.checkbox + label:hover { 2451 color: rgba(0, 0, 0, 0.8); 2452 } 2453 2454 /*-------------- 2455 Down 2456 ---------------*/ 2457 2458 .ui.checkbox label:active::before { 2459 background: #F9FAFB; 2460 border-color: rgba(34, 36, 38, 0.35); 2461 } 2462 2463 .ui.checkbox label:active::after { 2464 color: rgba(0, 0, 0, 0.95); 2465 } 2466 2467 .ui.checkbox input:active ~ label { 2468 color: rgba(0, 0, 0, 0.95); 2469 } 2470 2471 /*-------------- 2472 Focus 2473 ---------------*/ 2474 2475 .ui.checkbox input:focus ~ label:before { 2476 background: #FFFFFF; 2477 border-color: #96C8DA; 2478 } 2479 2480 .ui.checkbox input:focus ~ label:after { 2481 color: rgba(0, 0, 0, 0.95); 2482 } 2483 2484 .ui.checkbox input:focus ~ label { 2485 color: rgba(0, 0, 0, 0.95); 2486 } 2487 2488 /*-------------- 2489 Active 2490 ---------------*/ 2491 2492 .ui.checkbox input:checked ~ label:before { 2493 background: #FFFFFF; 2494 border-color: rgba(34, 36, 38, 0.35); 2495 } 2496 2497 .ui.checkbox input:checked ~ label:after { 2498 opacity: 1; 2499 color: rgba(0, 0, 0, 0.95); 2500 } 2501 2502 /*-------------- 2503 Indeterminate 2504 ---------------*/ 2505 2506 .ui.checkbox input:not([type=radio]):indeterminate ~ label:before { 2507 background: #FFFFFF; 2508 border-color: rgba(34, 36, 38, 0.35); 2509 } 2510 2511 .ui.checkbox input:not([type=radio]):indeterminate ~ label:after { 2512 opacity: 1; 2513 color: rgba(0, 0, 0, 0.95); 2514 } 2515 2516 .ui.indeterminate.toggle.checkbox input:not([type=radio]):indeterminate ~ label:before { 2517 background: rgba(0, 0, 0, 0.15); 2518 } 2519 2520 .ui.indeterminate.toggle.checkbox input:not([type=radio]) ~ label:after { 2521 left: 1.075rem; 2522 } 2523 2524 /*-------------- 2525 Active Focus 2526 ---------------*/ 2527 2528 .ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:before, 2529 .ui.checkbox input:checked:focus ~ label:before { 2530 background: #FFFFFF; 2531 border-color: #96C8DA; 2532 } 2533 2534 .ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:after, 2535 .ui.checkbox input:checked:focus ~ label:after { 2536 color: rgba(0, 0, 0, 0.95); 2537 } 2538 2539 /*-------------- 2540 Read-Only 2541 ---------------*/ 2542 2543 .ui.read-only.checkbox, 2544 .ui.read-only.checkbox label { 2545 cursor: default; 2546 } 2547 2548 /*-------------- 2549 Disabled 2550 ---------------*/ 2551 2552 .ui.disabled.checkbox label, 2553 .ui.checkbox input[disabled] ~ label { 2554 cursor: default !important; 2555 opacity: 0.5; 2556 color: #000000; 2557 pointer-events: none; 2558 } 2559 2560 /*-------------- 2561 Hidden 2562 ---------------*/ 2563 2564 /* Initialized checkbox moves input below element 2565 to prevent manually triggering */ 2566 2567 .ui.checkbox input.hidden { 2568 z-index: -1; 2569 } 2570 2571 /* Selectable Label */ 2572 2573 .ui.checkbox input.hidden + label { 2574 cursor: pointer; 2575 -webkit-user-select: none; 2576 -moz-user-select: none; 2577 user-select: none; 2578 } 2579 2580 /******************************* 2581 Types 2582 *******************************/ 2583 2584 /*-------------- 2585 Radio 2586 ---------------*/ 2587 2588 .ui.radio.checkbox { 2589 min-height: 15px; 2590 } 2591 2592 .ui.radio.checkbox label { 2593 padding-left: 1.85714em; 2594 } 2595 2596 /* Box */ 2597 2598 .ui.radio.checkbox label:before { 2599 content: ''; 2600 transform: none; 2601 width: 15px; 2602 height: 15px; 2603 border-radius: 500rem; 2604 top: 1px; 2605 left: 0; 2606 } 2607 2608 /* Bullet */ 2609 2610 .ui.radio.checkbox label:after { 2611 border: none; 2612 content: '' !important; 2613 line-height: 15px; 2614 top: 1px; 2615 left: 0; 2616 width: 15px; 2617 height: 15px; 2618 border-radius: 500rem; 2619 transform: scale(0.46666667); 2620 background-color: rgba(0, 0, 0, 0.87); 2621 } 2622 2623 /* Focus */ 2624 2625 .ui.radio.checkbox input:focus ~ label:before { 2626 background-color: #FFFFFF; 2627 } 2628 2629 .ui.radio.checkbox input:focus ~ label:after { 2630 background-color: rgba(0, 0, 0, 0.95); 2631 } 2632 2633 /* Indeterminate */ 2634 2635 .ui.radio.checkbox input:indeterminate ~ label:after { 2636 opacity: 0; 2637 } 2638 2639 /* Active */ 2640 2641 .ui.radio.checkbox input:checked ~ label:before { 2642 background-color: #FFFFFF; 2643 } 2644 2645 .ui.radio.checkbox input:checked ~ label:after { 2646 background-color: rgba(0, 0, 0, 0.95); 2647 } 2648 2649 /* Active Focus */ 2650 2651 .ui.radio.checkbox input:focus:checked ~ label:before { 2652 background-color: #FFFFFF; 2653 } 2654 2655 .ui.radio.checkbox input:focus:checked ~ label:after { 2656 background-color: rgba(0, 0, 0, 0.95); 2657 } 2658 2659 /*-------------- 2660 Slider 2661 ---------------*/ 2662 2663 .ui.slider.checkbox { 2664 min-height: 1.25rem; 2665 } 2666 2667 /* Input */ 2668 2669 .ui.slider.checkbox input { 2670 width: 3.5rem; 2671 height: 1.25rem; 2672 } 2673 2674 /* Label */ 2675 2676 .ui.slider.checkbox label { 2677 padding-left: 4.5rem; 2678 line-height: 1rem; 2679 color: rgba(0, 0, 0, 0.4); 2680 } 2681 2682 /* Line */ 2683 2684 .ui.slider.checkbox label:before { 2685 display: block; 2686 position: absolute; 2687 content: ''; 2688 transform: none; 2689 border: none !important; 2690 left: 0; 2691 z-index: 1; 2692 top: 0.4rem; 2693 background-color: rgba(0, 0, 0, 0.05); 2694 width: 3.5rem; 2695 height: 0.21428571rem; 2696 border-radius: 500rem; 2697 transition: background 0.3s ease; 2698 } 2699 2700 /* Handle */ 2701 2702 .ui.slider.checkbox label:after { 2703 background: #FFFFFF linear-gradient(transparent, rgba(0, 0, 0, 0.05)); 2704 position: absolute; 2705 content: '' !important; 2706 opacity: 1; 2707 z-index: 2; 2708 border: none; 2709 box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset; 2710 width: 1.5rem; 2711 height: 1.5rem; 2712 top: -0.25rem; 2713 left: 0; 2714 transform: none; 2715 border-radius: 500rem; 2716 transition: left 0.3s ease; 2717 } 2718 2719 /* Focus */ 2720 2721 .ui.slider.checkbox input:focus ~ label:before { 2722 background-color: rgba(0, 0, 0, 0.15); 2723 border: none; 2724 } 2725 2726 /* Hover */ 2727 2728 .ui.slider.checkbox label:hover { 2729 color: rgba(0, 0, 0, 0.8); 2730 } 2731 2732 .ui.slider.checkbox label:hover::before { 2733 background: rgba(0, 0, 0, 0.15); 2734 } 2735 2736 /* Active */ 2737 2738 .ui.slider.checkbox input:checked ~ label { 2739 color: rgba(0, 0, 0, 0.95) !important; 2740 } 2741 2742 .ui.slider.checkbox input:checked ~ label:before { 2743 background-color: #545454 !important; 2744 } 2745 2746 .ui.slider.checkbox input:checked ~ label:after { 2747 left: 2rem; 2748 } 2749 2750 /* Active Focus */ 2751 2752 .ui.slider.checkbox input:focus:checked ~ label { 2753 color: rgba(0, 0, 0, 0.95) !important; 2754 } 2755 2756 .ui.slider.checkbox input:focus:checked ~ label:before { 2757 background-color: #000000 !important; 2758 } 2759 2760 /*-------------- 2761 Toggle 2762 ---------------*/ 2763 2764 .ui.toggle.checkbox { 2765 min-height: 1.5rem; 2766 } 2767 2768 /* Input */ 2769 2770 .ui.toggle.checkbox input { 2771 width: 3.5rem; 2772 height: 1.5rem; 2773 } 2774 2775 /* Label */ 2776 2777 .ui.toggle.checkbox label { 2778 min-height: 1.5rem; 2779 padding-left: 4.5rem; 2780 color: rgba(0, 0, 0, 0.87); 2781 } 2782 2783 .ui.toggle.checkbox label { 2784 padding-top: 0.15em; 2785 } 2786 2787 /* Switch */ 2788 2789 .ui.toggle.checkbox label:before { 2790 display: block; 2791 position: absolute; 2792 content: ''; 2793 z-index: 1; 2794 transform: none; 2795 border: none; 2796 top: 0; 2797 background: rgba(0, 0, 0, 0.05); 2798 box-shadow: none; 2799 width: 3.5rem; 2800 height: 1.5rem; 2801 border-radius: 500rem; 2802 } 2803 2804 /* Handle */ 2805 2806 .ui.toggle.checkbox label:after { 2807 background: #FFFFFF linear-gradient(transparent, rgba(0, 0, 0, 0.05)); 2808 position: absolute; 2809 content: '' !important; 2810 opacity: 1; 2811 z-index: 2; 2812 border: none; 2813 box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset; 2814 width: 1.5rem; 2815 height: 1.5rem; 2816 top: 0; 2817 left: 0; 2818 border-radius: 500rem; 2819 transition: background 0.3s ease, left 0.3s ease; 2820 } 2821 2822 .ui.toggle.checkbox input ~ label:after { 2823 left: -0.05rem; 2824 box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset; 2825 } 2826 2827 /* Focus */ 2828 2829 .ui.toggle.checkbox input:focus ~ label:before { 2830 background-color: rgba(0, 0, 0, 0.15); 2831 border: none; 2832 } 2833 2834 /* Hover */ 2835 2836 .ui.toggle.checkbox label:hover::before { 2837 background-color: rgba(0, 0, 0, 0.15); 2838 border: none; 2839 } 2840 2841 /* Active */ 2842 2843 .ui.toggle.checkbox input:checked ~ label { 2844 color: rgba(0, 0, 0, 0.95) !important; 2845 } 2846 2847 .ui.toggle.checkbox input:checked ~ label:before { 2848 background-color: #2185D0 !important; 2849 } 2850 2851 .ui.toggle.checkbox input:checked ~ label:after { 2852 left: 2.15rem; 2853 box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), 0 0 0 1px rgba(34, 36, 38, 0.15) inset; 2854 } 2855 2856 /* Active Focus */ 2857 2858 .ui.toggle.checkbox input:focus:checked ~ label { 2859 color: rgba(0, 0, 0, 0.95) !important; 2860 } 2861 2862 .ui.toggle.checkbox input:focus:checked ~ label:before { 2863 background-color: #0d71bb !important; 2864 } 2865 2866 /******************************* 2867 Variations 2868 *******************************/ 2869 2870 /*-------------- 2871 Fitted 2872 ---------------*/ 2873 2874 .ui.fitted.checkbox label { 2875 padding-left: 0 !important; 2876 } 2877 2878 .ui.fitted.toggle.checkbox { 2879 width: 3.5rem; 2880 } 2881 2882 .ui.fitted.slider.checkbox { 2883 width: 3.5rem; 2884 } 2885 2886 /*-------------------- 2887 Size 2888 ---------------------*/ 2889 2890 .ui.mini.checkbox { 2891 font-size: 0.78571429em; 2892 } 2893 2894 .ui.tiny.checkbox { 2895 font-size: 0.85714286em; 2896 } 2897 2898 .ui.small.checkbox { 2899 font-size: 0.92857143em; 2900 } 2901 2902 .ui.large.checkbox { 2903 font-size: 1.14285714em; 2904 } 2905 2906 .ui.large.form .checkbox:not(.slider):not(.toggle):not(.radio) label:after, 2907 .ui.large.checkbox:not(.slider):not(.toggle):not(.radio) label:after, 2908 .ui.large.form .checkbox:not(.slider):not(.toggle):not(.radio) label:before, 2909 .ui.large.checkbox:not(.slider):not(.toggle):not(.radio) label:before { 2910 transform: scale(1.14285714); 2911 transform-origin: left; 2912 } 2913 2914 .ui.large.form .checkbox.radio label:before, 2915 .ui.large.checkbox.radio label:before { 2916 transform: scale(1.14285714); 2917 transform-origin: left; 2918 } 2919 2920 .ui.large.form .checkbox.radio label:after, 2921 .ui.large.checkbox.radio label:after { 2922 transform: scale(0.57142857); 2923 transform-origin: left; 2924 left: 0.33571429em; 2925 } 2926 2927 .ui.big.checkbox { 2928 font-size: 1.28571429em; 2929 } 2930 2931 .ui.big.form .checkbox:not(.slider):not(.toggle):not(.radio) label:after, 2932 .ui.big.checkbox:not(.slider):not(.toggle):not(.radio) label:after, 2933 .ui.big.form .checkbox:not(.slider):not(.toggle):not(.radio) label:before, 2934 .ui.big.checkbox:not(.slider):not(.toggle):not(.radio) label:before { 2935 transform: scale(1.28571429); 2936 transform-origin: left; 2937 } 2938 2939 .ui.big.form .checkbox.radio label:before, 2940 .ui.big.checkbox.radio label:before { 2941 transform: scale(1.28571429); 2942 transform-origin: left; 2943 } 2944 2945 .ui.big.form .checkbox.radio label:after, 2946 .ui.big.checkbox.radio label:after { 2947 transform: scale(0.64285714); 2948 transform-origin: left; 2949 left: 0.37142857em; 2950 } 2951 2952 .ui.huge.checkbox { 2953 font-size: 1.42857143em; 2954 } 2955 2956 .ui.huge.form .checkbox:not(.slider):not(.toggle):not(.radio) label:after, 2957 .ui.huge.checkbox:not(.slider):not(.toggle):not(.radio) label:after, 2958 .ui.huge.form .checkbox:not(.slider):not(.toggle):not(.radio) label:before, 2959 .ui.huge.checkbox:not(.slider):not(.toggle):not(.radio) label:before { 2960 transform: scale(1.42857143); 2961 transform-origin: left; 2962 } 2963 2964 .ui.huge.form .checkbox.radio label:before, 2965 .ui.huge.checkbox.radio label:before { 2966 transform: scale(1.42857143); 2967 transform-origin: left; 2968 } 2969 2970 .ui.huge.form .checkbox.radio label:after, 2971 .ui.huge.checkbox.radio label:after { 2972 transform: scale(0.71428571); 2973 transform-origin: left; 2974 left: 0.40714286em; 2975 } 2976 2977 .ui.massive.checkbox { 2978 font-size: 1.71428571em; 2979 } 2980 2981 .ui.massive.form .checkbox:not(.slider):not(.toggle):not(.radio) label:after, 2982 .ui.massive.checkbox:not(.slider):not(.toggle):not(.radio) label:after, 2983 .ui.massive.form .checkbox:not(.slider):not(.toggle):not(.radio) label:before, 2984 .ui.massive.checkbox:not(.slider):not(.toggle):not(.radio) label:before { 2985 transform: scale(1.71428571); 2986 transform-origin: left; 2987 } 2988 2989 .ui.massive.form .checkbox.radio label:before, 2990 .ui.massive.checkbox.radio label:before { 2991 transform: scale(1.71428571); 2992 transform-origin: left; 2993 } 2994 2995 .ui.massive.form .checkbox.radio label:after, 2996 .ui.massive.checkbox.radio label:after { 2997 transform: scale(0.85714286); 2998 transform-origin: left; 2999 left: 0.47857143em; 3000 } 3001 3002 /******************************* 3003 Theme Overrides 3004 *******************************/ 3005 3006 @font-face { 3007 font-family: 'Checkbox'; 3008 src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBD8AAAC8AAAAYGNtYXAYVtCJAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zn4huwUAAAF4AAABYGhlYWQGPe1ZAAAC2AAAADZoaGVhB30DyAAAAxAAAAAkaG10eBBKAEUAAAM0AAAAHGxvY2EAmgESAAADUAAAABBtYXhwAAkALwAAA2AAAAAgbmFtZSC8IugAAAOAAAABknBvc3QAAwAAAAAFFAAAACAAAwMTAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADoAgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6AL//f//AAAAAAAg6AD//f//AAH/4xgEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAEUAUQO7AvgAGgAAARQHAQYjIicBJjU0PwE2MzIfAQE2MzIfARYVA7sQ/hQQFhcQ/uMQEE4QFxcQqAF2EBcXEE4QAnMWEP4UEBABHRAXFhBOEBCoAXcQEE4QFwAAAAABAAABbgMlAkkAFAAAARUUBwYjISInJj0BNDc2MyEyFxYVAyUQEBf9SRcQEBAQFwK3FxAQAhJtFxAQEBAXbRcQEBAQFwAAAAABAAAASQMlA24ALAAAARUUBwYrARUUBwYrASInJj0BIyInJj0BNDc2OwE1NDc2OwEyFxYdATMyFxYVAyUQEBfuEBAXbhYQEO4XEBAQEBfuEBAWbhcQEO4XEBACEm0XEBDuFxAQEBAX7hAQF20XEBDuFxAQEBAX7hAQFwAAAQAAAAIAAHRSzT9fDzz1AAsEAAAAAADRsdR3AAAAANGx1HcAAAAAA7sDbgAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAADuwABAAAAAAAAAAAAAAAAAAAABwQAAAAAAAAAAAAAAAIAAAAEAABFAyUAAAMlAAAAAAAAAAoAFAAeAE4AcgCwAAEAAAAHAC0AAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAIAAAAAQAAAAAAAgAHAGkAAQAAAAAAAwAIADkAAQAAAAAABAAIAH4AAQAAAAAABQALABgAAQAAAAAABgAIAFEAAQAAAAAACgAaAJYAAwABBAkAAQAQAAgAAwABBAkAAgAOAHAAAwABBAkAAwAQAEEAAwABBAkABAAQAIYAAwABBAkABQAWACMAAwABBAkABgAQAFkAAwABBAkACgA0ALBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhWZXJzaW9uIDIuMABWAGUAcgBzAGkAbwBuACAAMgAuADBDaGVja2JveABDAGgAZQBjAGsAYgBvAHhDaGVja2JveABDAGgAZQBjAGsAYgBvAHhSZWd1bGFyAFIAZQBnAHUAbABhAHJDaGVja2JveABDAGgAZQBjAGsAYgBvAHhGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'); 3009 } 3010 3011 /* Checkmark */ 3012 3013 .ui.checkbox label:after, 3014 .ui.checkbox .box:after { 3015 font-family: 'Checkbox'; 3016 } 3017 3018 /* Checked */ 3019 3020 .ui.checkbox input:checked ~ .box:after, 3021 .ui.checkbox input:checked ~ label:after { 3022 content: '\e800'; 3023 } 3024 3025 /* Indeterminate */ 3026 3027 .ui.checkbox input:indeterminate ~ .box:after, 3028 .ui.checkbox input:indeterminate ~ label:after { 3029 font-size: 12px; 3030 content: '\e801'; 3031 } 3032 3033 /* UTF Reference 3034 .check:before { content: '\e800'; } 3035 .dash:before { content: '\e801'; } 3036 .plus:before { content: '\e802'; } 3037 */ 3038 3039 /******************************* 3040 Site Overrides 3041 *******************************/ 3042 /*! 3043 * # Fomantic-UI - Container 3044 * http://github.com/fomantic/Fomantic-UI/ 3045 * 3046 * 3047 * Released under the MIT license 3048 * http://opensource.org/licenses/MIT 3049 * 3050 */ 3051 3052 /******************************* 3053 Container 3054 *******************************/ 3055 3056 /* All Sizes */ 3057 3058 .ui.container { 3059 display: block; 3060 max-width: 100%; 3061 } 3062 3063 /* Mobile */ 3064 3065 @media only screen and (max-width: 767.98px) { 3066 .ui.ui.ui.container:not(.fluid) { 3067 width: auto; 3068 margin-left: 1em; 3069 margin-right: 1em; 3070 } 3071 3072 .ui.ui.ui.grid.container { 3073 width: auto; 3074 } 3075 3076 .ui.ui.ui.relaxed.grid.container { 3077 width: auto; 3078 } 3079 3080 .ui.ui.ui.very.relaxed.grid.container { 3081 width: auto; 3082 } 3083 } 3084 3085 /* Tablet */ 3086 3087 @media only screen and (min-width: 768px) and (max-width: 991.98px) { 3088 .ui.ui.ui.container:not(.fluid) { 3089 width: 723px; 3090 margin-left: auto; 3091 margin-right: auto; 3092 } 3093 3094 .ui.ui.ui.grid.container { 3095 width: calc(723px + 2rem); 3096 } 3097 3098 .ui.ui.ui.relaxed.grid.container { 3099 width: calc(723px + 3rem); 3100 } 3101 3102 .ui.ui.ui.very.relaxed.grid.container { 3103 width: calc(723px + 5rem); 3104 } 3105 } 3106 3107 /* Small Monitor */ 3108 3109 @media only screen and (min-width: 992px) and (max-width: 1199.98px) { 3110 .ui.ui.ui.container:not(.fluid) { 3111 width: 933px; 3112 margin-left: auto; 3113 margin-right: auto; 3114 } 3115 3116 .ui.ui.ui.grid.container { 3117 width: calc(933px + 2rem); 3118 } 3119 3120 .ui.ui.ui.relaxed.grid.container { 3121 width: calc(933px + 3rem); 3122 } 3123 3124 .ui.ui.ui.very.relaxed.grid.container { 3125 width: calc(933px + 5rem); 3126 } 3127 } 3128 3129 /* Large Monitor */ 3130 3131 @media only screen and (min-width: 1200px) { 3132 .ui.ui.ui.container:not(.fluid) { 3133 width: 1127px; 3134 margin-left: auto; 3135 margin-right: auto; 3136 } 3137 3138 .ui.ui.ui.grid.container { 3139 width: calc(1127px + 2rem); 3140 } 3141 3142 .ui.ui.ui.relaxed.grid.container { 3143 width: calc(1127px + 3rem); 3144 } 3145 3146 .ui.ui.ui.very.relaxed.grid.container { 3147 width: calc(1127px + 5rem); 3148 } 3149 } 3150 3151 /******************************* 3152 Types 3153 *******************************/ 3154 3155 /* Text Container */ 3156 3157 .ui.text.container { 3158 font-family: var(--fonts-regular); 3159 max-width: 700px; 3160 line-height: 1.5; 3161 font-size: 1.14285714rem; 3162 } 3163 3164 /* Fluid */ 3165 3166 .ui.fluid.container { 3167 width: 100%; 3168 } 3169 3170 /******************************* 3171 Variations 3172 *******************************/ 3173 3174 .ui[class*="left aligned"].container { 3175 text-align: left; 3176 } 3177 3178 .ui[class*="center aligned"].container { 3179 text-align: center; 3180 } 3181 3182 .ui[class*="right aligned"].container { 3183 text-align: right; 3184 } 3185 3186 .ui.justified.container { 3187 text-align: justify; 3188 -webkit-hyphens: auto; 3189 hyphens: auto; 3190 } 3191 3192 /******************************* 3193 Theme Overrides 3194 *******************************/ 3195 3196 /******************************* 3197 Site Overrides 3198 *******************************/ 3199 /*! 3200 * # Fomantic-UI - Dimmer 3201 * http://github.com/fomantic/Fomantic-UI/ 3202 * 3203 * 3204 * Released under the MIT license 3205 * http://opensource.org/licenses/MIT 3206 * 3207 */ 3208 3209 /******************************* 3210 Dimmer 3211 *******************************/ 3212 3213 .dimmable:not(body) { 3214 position: relative; 3215 } 3216 3217 .ui.dimmer { 3218 display: none; 3219 position: absolute; 3220 top: 0 !important; 3221 left: 0 !important; 3222 width: 100%; 3223 height: 100%; 3224 text-align: center; 3225 vertical-align: middle; 3226 padding: 1em; 3227 background: rgba(0, 0, 0, 0.85); 3228 opacity: 0; 3229 line-height: 1; 3230 -webkit-animation-fill-mode: both; 3231 animation-fill-mode: both; 3232 -webkit-animation-duration: 0.5s; 3233 animation-duration: 0.5s; 3234 transition: background-color 0.5s linear; 3235 flex-direction: column; 3236 align-items: center; 3237 justify-content: center; 3238 -webkit-user-select: none; 3239 -moz-user-select: none; 3240 user-select: none; 3241 will-change: opacity; 3242 z-index: 1000; 3243 } 3244 3245 /* Dimmer Content */ 3246 3247 .ui.dimmer > .content { 3248 -webkit-user-select: text; 3249 -moz-user-select: text; 3250 user-select: text; 3251 color: #FFFFFF; 3252 } 3253 3254 /* Loose Coupling */ 3255 3256 .ui.segment > .ui.dimmer:not(.page) { 3257 border-radius: inherit; 3258 } 3259 3260 /* Scrollbars */ 3261 3262 /******************************* 3263 States 3264 *******************************/ 3265 3266 /* Animating */ 3267 3268 .animating.dimmable:not(body), 3269 .dimmed.dimmable:not(body) { 3270 overflow: hidden; 3271 } 3272 3273 /* Animating / Active / Visible */ 3274 3275 .dimmed.dimmable > .ui.animating.dimmer, 3276 .dimmed.dimmable > .ui.visible.dimmer, 3277 .ui.active.dimmer { 3278 display: flex; 3279 opacity: 1; 3280 } 3281 3282 /* Disabled */ 3283 3284 .ui.disabled.dimmer { 3285 width: 0 !important; 3286 height: 0 !important; 3287 } 3288 3289 /******************************* 3290 Variations 3291 *******************************/ 3292 3293 /*-------------- 3294 Legacy 3295 ---------------*/ 3296 3297 /* Animating / Active / Visible */ 3298 3299 .dimmed.dimmable > .ui.animating.legacy.dimmer, 3300 .dimmed.dimmable > .ui.visible.legacy.dimmer, 3301 .ui.active.legacy.dimmer { 3302 display: block; 3303 } 3304 3305 /*-------------- 3306 Alignment 3307 ---------------*/ 3308 3309 .ui[class*="top aligned"].dimmer { 3310 justify-content: flex-start; 3311 } 3312 3313 .ui[class*="bottom aligned"].dimmer { 3314 justify-content: flex-end; 3315 } 3316 3317 /*-------------- 3318 Page 3319 ---------------*/ 3320 3321 .ui.page.dimmer { 3322 position: fixed; 3323 transform-style: ''; 3324 perspective: 2000px; 3325 transform-origin: center center; 3326 } 3327 3328 .ui.page.dimmer.modals { 3329 -moz-perspective: none; 3330 } 3331 3332 body.animating.in.dimmable, 3333 body.dimmed.dimmable { 3334 overflow: hidden; 3335 } 3336 3337 body.dimmable > .dimmer { 3338 position: fixed; 3339 } 3340 3341 /*-------------- 3342 Blurring 3343 ---------------*/ 3344 3345 .blurring.dimmable > :not(.dimmer) { 3346 filter: initial; 3347 transition: 800ms filter ease; 3348 } 3349 3350 .blurring.dimmed.dimmable > :not(.dimmer):not(.popup) { 3351 filter: blur(5px) grayscale(0.7); 3352 } 3353 3354 /* Dimmer Color */ 3355 3356 .blurring.dimmable > .dimmer { 3357 background: rgba(0, 0, 0, 0.6); 3358 } 3359 3360 .blurring.dimmable > .inverted.dimmer { 3361 background: rgba(255, 255, 255, 0.6); 3362 } 3363 3364 /*-------------- 3365 Aligned 3366 ---------------*/ 3367 3368 .ui.dimmer > .top.aligned.content > * { 3369 vertical-align: top; 3370 } 3371 3372 .ui.dimmer > .bottom.aligned.content > * { 3373 vertical-align: bottom; 3374 } 3375 3376 /*-------------- 3377 Shades 3378 ---------------*/ 3379 3380 .medium.medium.medium.medium.medium.dimmer { 3381 background: rgba(0, 0, 0, 0.65); 3382 } 3383 3384 .light.light.light.light.light.dimmer { 3385 background: rgba(0, 0, 0, 0.45); 3386 } 3387 3388 .very.light.light.light.light.dimmer { 3389 background: rgba(0, 0, 0, 0.25); 3390 } 3391 3392 /*-------------- 3393 Simple 3394 ---------------*/ 3395 3396 /* Displays without javascript */ 3397 3398 .ui.simple.dimmer { 3399 display: block; 3400 overflow: hidden; 3401 opacity: 0; 3402 width: 0; 3403 height: 0; 3404 z-index: -100; 3405 background: rgba(0, 0, 0, 0); 3406 } 3407 3408 .dimmed.dimmable > .ui.simple.dimmer { 3409 overflow: visible; 3410 opacity: 1; 3411 width: 100%; 3412 height: 100%; 3413 background: rgba(0, 0, 0, 0.85); 3414 z-index: 1; 3415 } 3416 3417 .ui.simple.inverted.dimmer { 3418 background: rgba(255, 255, 255, 0); 3419 } 3420 3421 .dimmed.dimmable > .ui.simple.inverted.dimmer { 3422 background: rgba(255, 255, 255, 0.85); 3423 } 3424 3425 /*-------------- 3426 Partially 3427 ----------------*/ 3428 3429 .ui[class*="top dimmer"], 3430 .ui[class*="center dimmer"], 3431 .ui[class*="bottom dimmer"] { 3432 height: auto; 3433 } 3434 3435 .ui[class*="bottom dimmer"] { 3436 top: auto !important; 3437 bottom: 0; 3438 } 3439 3440 .ui[class*="center dimmer"] { 3441 top: 50% !important; 3442 transform: translateY(-50%); 3443 -webkit-transform: translateY(calc(-50% - 0.5px)); 3444 } 3445 3446 .ui.segment > .ui.ui[class*="top dimmer"] { 3447 border-bottom-left-radius: 0; 3448 border-bottom-right-radius: 0; 3449 } 3450 3451 .ui.segment > .ui.ui[class*="center dimmer"] { 3452 border-radius: 0; 3453 } 3454 3455 .ui.segment > .ui.ui[class*="bottom dimmer"] { 3456 border-top-left-radius: 0; 3457 border-top-right-radius: 0; 3458 } 3459 3460 .ui[class*="center dimmer"].transition[class*="fade up"].in { 3461 -webkit-animation-name: fadeInUpCenter; 3462 animation-name: fadeInUpCenter; 3463 } 3464 3465 .ui[class*="center dimmer"].transition[class*="fade down"].in { 3466 -webkit-animation-name: fadeInDownCenter; 3467 animation-name: fadeInDownCenter; 3468 } 3469 3470 .ui[class*="center dimmer"].transition[class*="fade up"].out { 3471 -webkit-animation-name: fadeOutUpCenter; 3472 animation-name: fadeOutUpCenter; 3473 } 3474 3475 .ui[class*="center dimmer"].transition[class*="fade down"].out { 3476 -webkit-animation-name: fadeOutDownCenter; 3477 animation-name: fadeOutDownCenter; 3478 } 3479 3480 .ui[class*="center dimmer"].bounce.transition { 3481 -webkit-animation-name: bounceCenter; 3482 animation-name: bounceCenter; 3483 } 3484 3485 @-webkit-keyframes fadeInUpCenter { 3486 0% { 3487 opacity: 0; 3488 transform: translateY(-40%); 3489 -webkit-transform: translateY(calc(-40% - 0.5px)); 3490 } 3491 3492 100% { 3493 opacity: 1; 3494 transform: translateY(-50%); 3495 -webkit-transform: translateY(calc(-50% - 0.5px)); 3496 } 3497 } 3498 3499 @keyframes fadeInUpCenter { 3500 0% { 3501 opacity: 0; 3502 transform: translateY(-40%); 3503 -webkit-transform: translateY(calc(-40% - 0.5px)); 3504 } 3505 3506 100% { 3507 opacity: 1; 3508 transform: translateY(-50%); 3509 -webkit-transform: translateY(calc(-50% - 0.5px)); 3510 } 3511 } 3512 3513 @-webkit-keyframes fadeInDownCenter { 3514 0% { 3515 opacity: 0; 3516 transform: translateY(-60%); 3517 -webkit-transform: translateY(calc(-60% - 0.5px)); 3518 } 3519 3520 100% { 3521 opacity: 1; 3522 transform: translateY(-50%); 3523 -webkit-transform: translateY(calc(-50% - 0.5px)); 3524 } 3525 } 3526 3527 @keyframes fadeInDownCenter { 3528 0% { 3529 opacity: 0; 3530 transform: translateY(-60%); 3531 -webkit-transform: translateY(calc(-60% - 0.5px)); 3532 } 3533 3534 100% { 3535 opacity: 1; 3536 transform: translateY(-50%); 3537 -webkit-transform: translateY(calc(-50% - 0.5px)); 3538 } 3539 } 3540 3541 @-webkit-keyframes fadeOutUpCenter { 3542 0% { 3543 opacity: 1; 3544 transform: translateY(-50%); 3545 -webkit-transform: translateY(calc(-50% - 0.5px)); 3546 } 3547 3548 100% { 3549 opacity: 0; 3550 transform: translateY(-45%); 3551 -webkit-transform: translateY(calc(-45% - 0.5px)); 3552 } 3553 } 3554 3555 @keyframes fadeOutUpCenter { 3556 0% { 3557 opacity: 1; 3558 transform: translateY(-50%); 3559 -webkit-transform: translateY(calc(-50% - 0.5px)); 3560 } 3561 3562 100% { 3563 opacity: 0; 3564 transform: translateY(-45%); 3565 -webkit-transform: translateY(calc(-45% - 0.5px)); 3566 } 3567 } 3568 3569 @-webkit-keyframes fadeOutDownCenter { 3570 0% { 3571 opacity: 1; 3572 transform: translateY(-50%); 3573 -webkit-transform: translateY(calc(-50% - 0.5px)); 3574 } 3575 3576 100% { 3577 opacity: 0; 3578 transform: translateY(-55%); 3579 -webkit-transform: translateY(calc(-55% - 0.5px)); 3580 } 3581 } 3582 3583 @keyframes fadeOutDownCenter { 3584 0% { 3585 opacity: 1; 3586 transform: translateY(-50%); 3587 -webkit-transform: translateY(calc(-50% - 0.5px)); 3588 } 3589 3590 100% { 3591 opacity: 0; 3592 transform: translateY(-55%); 3593 -webkit-transform: translateY(calc(-55% - 0.5px)); 3594 } 3595 } 3596 3597 @-webkit-keyframes bounceCenter { 3598 0%, 20%, 50%, 80%, 100% { 3599 transform: translateY(-50%); 3600 -webkit-transform: translateY(calc(-50% - 0.5px)); 3601 } 3602 3603 40% { 3604 transform: translateY(calc(-50% - 30px)); 3605 } 3606 3607 60% { 3608 transform: translateY(calc(-50% - 15px)); 3609 } 3610 } 3611 3612 @keyframes bounceCenter { 3613 0%, 20%, 50%, 80%, 100% { 3614 transform: translateY(-50%); 3615 -webkit-transform: translateY(calc(-50% - 0.5px)); 3616 } 3617 3618 40% { 3619 transform: translateY(calc(-50% - 30px)); 3620 } 3621 3622 60% { 3623 transform: translateY(calc(-50% - 15px)); 3624 } 3625 } 3626 3627 /******************************* 3628 Theme Overrides 3629 *******************************/ 3630 3631 /******************************* 3632 User Overrides 3633 *******************************/ 3634 /*! 3635 * # Fomantic-UI - Dropdown 3636 * http://github.com/fomantic/Fomantic-UI/ 3637 * 3638 * 3639 * Released under the MIT license 3640 * http://opensource.org/licenses/MIT 3641 * 3642 */ 3643 3644 /******************************* 3645 Dropdown 3646 *******************************/ 3647 3648 .ui.dropdown { 3649 cursor: pointer; 3650 position: relative; 3651 display: inline-block; 3652 outline: none; 3653 text-align: left; 3654 transition: box-shadow 0.1s ease, width 0.1s ease; 3655 -webkit-user-select: none; 3656 -moz-user-select: none; 3657 user-select: none; 3658 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 3659 } 3660 3661 /******************************* 3662 Content 3663 *******************************/ 3664 3665 /*-------------- 3666 Menu 3667 ---------------*/ 3668 3669 .ui.dropdown .menu { 3670 cursor: auto; 3671 position: absolute; 3672 display: none; 3673 outline: none; 3674 top: 100%; 3675 min-width: -webkit-max-content; 3676 min-width: -moz-max-content; 3677 min-width: max-content; 3678 margin: 0; 3679 padding: 0 0; 3680 background: #FFFFFF; 3681 font-size: 1em; 3682 text-shadow: none; 3683 text-align: left; 3684 box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15); 3685 border: 1px solid rgba(34, 36, 38, 0.15); 3686 border-radius: 0.28571429rem; 3687 transition: opacity 0.1s ease; 3688 z-index: 11; 3689 will-change: transform, opacity; 3690 } 3691 3692 .ui.dropdown .menu > * { 3693 white-space: nowrap; 3694 } 3695 3696 /*-------------- 3697 Hidden Input 3698 ---------------*/ 3699 3700 .ui.dropdown > input:not(.search):first-child, 3701 .ui.dropdown > select { 3702 display: none !important; 3703 } 3704 3705 /*-------------- 3706 Dropdown Icon 3707 ---------------*/ 3708 3709 .ui.dropdown:not(.labeled) > .dropdown.icon { 3710 position: relative; 3711 width: auto; 3712 font-size: 0.85714286em; 3713 margin: 0 0 0 1em; 3714 } 3715 3716 .ui.dropdown .menu > .item .dropdown.icon { 3717 width: auto; 3718 float: right; 3719 margin: 0em 0 0 1em; 3720 } 3721 3722 .ui.dropdown .menu > .item .dropdown.icon + .text { 3723 margin-right: 1em; 3724 } 3725 3726 /*-------------- 3727 Text 3728 ---------------*/ 3729 3730 .ui.dropdown > .text { 3731 display: inline-block; 3732 transition: none; 3733 } 3734 3735 /*-------------- 3736 Menu Item 3737 ---------------*/ 3738 3739 .ui.dropdown .menu > .item { 3740 position: relative; 3741 cursor: pointer; 3742 display: block; 3743 border: none; 3744 height: auto; 3745 min-height: 2.57142857rem; 3746 text-align: left; 3747 border-top: none; 3748 line-height: 1em; 3749 font-size: 1rem; 3750 color: rgba(0, 0, 0, 0.87); 3751 padding: 0.78571429rem 1.14285714rem !important; 3752 text-transform: none; 3753 font-weight: normal; 3754 box-shadow: none; 3755 -webkit-touch-callout: none; 3756 } 3757 3758 .ui.dropdown .menu > .item:first-child { 3759 border-top-width: 0; 3760 } 3761 3762 .ui.dropdown .menu > .item.vertical { 3763 display: flex; 3764 flex-direction: column-reverse; 3765 } 3766 3767 /*-------------- 3768 Floated Content 3769 ---------------*/ 3770 3771 .ui.dropdown > .text > [class*="right floated"], 3772 .ui.dropdown .menu .item > [class*="right floated"] { 3773 float: right !important; 3774 margin-right: 0 !important; 3775 margin-left: 1em !important; 3776 } 3777 3778 .ui.dropdown > .text > [class*="left floated"], 3779 .ui.dropdown .menu .item > [class*="left floated"] { 3780 float: left !important; 3781 margin-left: 0 !important; 3782 margin-right: 1em !important; 3783 } 3784 3785 .ui.dropdown .menu .item > i.icon.floated, 3786 .ui.dropdown .menu .item > .flag.floated, 3787 .ui.dropdown .menu .item > .image.floated, 3788 .ui.dropdown .menu .item > img.floated { 3789 margin-top: 0em; 3790 } 3791 3792 /*-------------- 3793 Menu Divider 3794 ---------------*/ 3795 3796 .ui.dropdown .menu > .header { 3797 margin: 1rem 0 0.75rem; 3798 padding: 0 1.14285714rem; 3799 font-weight: 500; 3800 text-transform: uppercase; 3801 } 3802 3803 .ui.dropdown .menu > .header:not(.ui) { 3804 color: rgba(0, 0, 0, 0.85); 3805 font-size: 0.78571429em; 3806 } 3807 3808 .ui.dropdown .menu > .divider { 3809 border-top: 1px solid rgba(34, 36, 38, 0.1); 3810 height: 0; 3811 margin: 0.5em 0; 3812 } 3813 3814 .ui.dropdown .menu > .horizontal.divider { 3815 border-top: none; 3816 } 3817 3818 .ui.dropdown.dropdown .menu > .input { 3819 width: auto; 3820 display: flex; 3821 margin: 1.14285714rem 0.78571429rem; 3822 min-width: 10rem; 3823 } 3824 3825 .ui.dropdown .menu > .header + .input { 3826 margin-top: 0; 3827 } 3828 3829 .ui.dropdown .menu > .input:not(.transparent) input { 3830 padding: 0.5em 1em; 3831 } 3832 3833 .ui.dropdown .menu > .input:not(.transparent) .button, 3834 .ui.dropdown .menu > .input:not(.transparent) i.icon, 3835 .ui.dropdown .menu > .input:not(.transparent) .label { 3836 padding-top: 0.5em; 3837 padding-bottom: 0.5em; 3838 } 3839 3840 /*----------------- 3841 Item Description 3842 -------------------*/ 3843 3844 .ui.dropdown > .text > .description, 3845 .ui.dropdown .menu > .item > .description { 3846 float: right; 3847 margin: 0 0 0 1em; 3848 color: rgba(0, 0, 0, 0.4); 3849 } 3850 3851 .ui.dropdown .menu > .item.vertical > .description { 3852 margin: 0; 3853 } 3854 3855 /*----------------- 3856 Item Text 3857 -------------------*/ 3858 3859 .ui.dropdown .menu > .item.vertical > .text { 3860 margin-bottom: 0.25em; 3861 } 3862 3863 /*----------------- 3864 Message 3865 -------------------*/ 3866 3867 .ui.dropdown .menu > .message { 3868 padding: 0.78571429rem 1.14285714rem; 3869 font-weight: normal; 3870 } 3871 3872 .ui.dropdown .menu > .message:not(.ui) { 3873 color: rgba(0, 0, 0, 0.4); 3874 } 3875 3876 /*-------------- 3877 Sub Menu 3878 ---------------*/ 3879 3880 .ui.dropdown .menu .menu { 3881 top: 0; 3882 left: 100%; 3883 right: auto; 3884 margin: 0 -0.5em !important; 3885 border-radius: 0.28571429rem !important; 3886 z-index: 21 !important; 3887 } 3888 3889 /* Hide Arrow */ 3890 3891 .ui.dropdown .menu .menu:after { 3892 display: none; 3893 } 3894 3895 /*-------------- 3896 Sub Elements 3897 ---------------*/ 3898 3899 /* Icons / Flags / Labels / Image */ 3900 3901 .ui.dropdown > .text > i.icon, 3902 .ui.dropdown > .text > .label, 3903 .ui.dropdown > .text > .flag, 3904 .ui.dropdown > .text > img, 3905 .ui.dropdown > .text > .image { 3906 margin-top: 0em; 3907 } 3908 3909 .ui.dropdown .menu > .item > i.icon, 3910 .ui.dropdown .menu > .item > .label, 3911 .ui.dropdown .menu > .item > .flag, 3912 .ui.dropdown .menu > .item > .image, 3913 .ui.dropdown .menu > .item > img { 3914 margin-top: 0em; 3915 } 3916 3917 .ui.dropdown > .text > i.icon, 3918 .ui.dropdown > .text > .label, 3919 .ui.dropdown > .text > .flag, 3920 .ui.dropdown > .text > img, 3921 .ui.dropdown > .text > .image, 3922 .ui.dropdown .menu > .item > i.icon, 3923 .ui.dropdown .menu > .item > .label, 3924 .ui.dropdown .menu > .item > .flag, 3925 .ui.dropdown .menu > .item > .image, 3926 .ui.dropdown .menu > .item > img { 3927 margin-left: 0; 3928 float: none; 3929 margin-right: 0.78571429rem; 3930 } 3931 3932 /*-------------- 3933 Image 3934 ---------------*/ 3935 3936 .ui.dropdown > .text > img, 3937 .ui.dropdown > .text > .image:not(.icon), 3938 .ui.dropdown .menu > .item > .image:not(.icon), 3939 .ui.dropdown .menu > .item > img { 3940 display: inline-block; 3941 vertical-align: top; 3942 width: auto; 3943 margin-top: -0.5em; 3944 margin-bottom: -0.5em; 3945 max-height: 2em; 3946 } 3947 3948 /******************************* 3949 Coupling 3950 *******************************/ 3951 3952 /*-------------- 3953 Menu 3954 ---------------*/ 3955 3956 /* Remove Menu Item Divider */ 3957 3958 .ui.dropdown .ui.menu > .item:before, 3959 .ui.menu .ui.dropdown .menu > .item:before { 3960 display: none; 3961 } 3962 3963 /* Prevent Menu Item Border */ 3964 3965 .ui.menu .ui.dropdown .menu .active.item { 3966 border-left: none; 3967 } 3968 3969 /* Automatically float dropdown menu right on last menu item */ 3970 3971 .ui.menu .right.menu .dropdown:last-child > .menu:not(.left), 3972 .ui.menu .right.dropdown.item > .menu:not(.left), 3973 .ui.buttons > .ui.dropdown:last-child > .menu:not(.left) { 3974 left: auto; 3975 right: 0; 3976 } 3977 3978 /*-------------- 3979 Label 3980 ---------------*/ 3981 3982 /* Dropdown Menu */ 3983 3984 .ui.label.dropdown .menu { 3985 min-width: 100%; 3986 } 3987 3988 /*-------------- 3989 Button 3990 ---------------*/ 3991 3992 /* No Margin On Icon Button */ 3993 3994 .ui.dropdown.icon.button > .dropdown.icon { 3995 margin: 0; 3996 } 3997 3998 .ui.button.dropdown .menu { 3999 min-width: 100%; 4000 } 4001 4002 /******************************* 4003 Types 4004 *******************************/ 4005 4006 select.ui.dropdown { 4007 height: 38px; 4008 padding: 0.5em; 4009 border: 1px solid rgba(34, 36, 38, 0.15); 4010 visibility: visible; 4011 } 4012 4013 /*-------------- 4014 Selection 4015 ---------------*/ 4016 4017 /* Displays like a select box */ 4018 4019 .ui.selection.dropdown { 4020 cursor: pointer; 4021 word-wrap: break-word; 4022 line-height: 1em; 4023 white-space: normal; 4024 outline: 0; 4025 transform: rotateZ(0deg); 4026 min-width: 14em; 4027 min-height: 2.71428571em; 4028 background: #FFFFFF; 4029 display: inline-block; 4030 padding: 0.78571429em 3.2em 0.78571429em 1em; 4031 color: rgba(0, 0, 0, 0.87); 4032 box-shadow: none; 4033 border: 1px solid rgba(34, 36, 38, 0.15); 4034 border-radius: 0.28571429rem; 4035 transition: box-shadow 0.1s ease, width 0.1s ease; 4036 } 4037 4038 .ui.selection.dropdown.visible, 4039 .ui.selection.dropdown.active { 4040 z-index: 10; 4041 } 4042 4043 .ui.selection.dropdown > .search.icon, 4044 .ui.selection.dropdown > .delete.icon, 4045 .ui.selection.dropdown > .dropdown.icon { 4046 cursor: pointer; 4047 position: absolute; 4048 width: auto; 4049 height: auto; 4050 line-height: 1.21428571em; 4051 top: 0.78571429em; 4052 right: 1em; 4053 z-index: 3; 4054 margin: -0.78571429em; 4055 padding: 0.91666667em; 4056 opacity: 0.8; 4057 transition: opacity 0.1s ease; 4058 } 4059 4060 /* Compact */ 4061 4062 .ui.compact.selection.dropdown { 4063 min-width: 0; 4064 } 4065 4066 /* Selection Menu */ 4067 4068 .ui.selection.dropdown .menu { 4069 overflow-x: hidden; 4070 overflow-y: auto; 4071 -webkit-backface-visibility: hidden; 4072 backface-visibility: hidden; 4073 -webkit-overflow-scrolling: touch; 4074 border-top-width: 0 !important; 4075 width: auto; 4076 outline: none; 4077 margin: 0 -1px; 4078 min-width: calc(100% + 2px); 4079 width: calc(100% + 2px); 4080 border-radius: 0 0 0.28571429rem 0.28571429rem; 4081 box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15); 4082 transition: opacity 0.1s ease; 4083 } 4084 4085 .ui.selection.dropdown .menu:after, 4086 .ui.selection.dropdown .menu:before { 4087 display: none; 4088 } 4089 4090 /*-------------- 4091 Message 4092 ---------------*/ 4093 4094 .ui.selection.dropdown .menu > .message { 4095 padding: 0.78571429rem 1.14285714rem; 4096 } 4097 4098 @media only screen and (max-width: 767.98px) { 4099 .ui.selection.dropdown.short .menu { 4100 max-height: 6.01071429rem; 4101 } 4102 4103 .ui.selection.dropdown[class*="very short"] .menu { 4104 max-height: 4.00714286rem; 4105 } 4106 4107 .ui.selection.dropdown .menu { 4108 max-height: 8.01428571rem; 4109 } 4110 4111 .ui.selection.dropdown.long .menu { 4112 max-height: 16.02857143rem; 4113 } 4114 4115 .ui.selection.dropdown[class*="very long"] .menu { 4116 max-height: 24.04285714rem; 4117 } 4118 } 4119 4120 @media only screen and (min-width: 768px) { 4121 .ui.selection.dropdown.short .menu { 4122 max-height: 8.01428571rem; 4123 } 4124 4125 .ui.selection.dropdown[class*="very short"] .menu { 4126 max-height: 5.34285714rem; 4127 } 4128 4129 .ui.selection.dropdown .menu { 4130 max-height: 10.68571429rem; 4131 } 4132 4133 .ui.selection.dropdown.long .menu { 4134 max-height: 21.37142857rem; 4135 } 4136 4137 .ui.selection.dropdown[class*="very long"] .menu { 4138 max-height: 32.05714286rem; 4139 } 4140 } 4141 4142 @media only screen and (min-width: 992px) { 4143 .ui.selection.dropdown.short .menu { 4144 max-height: 12.02142857rem; 4145 } 4146 4147 .ui.selection.dropdown[class*="very short"] .menu { 4148 max-height: 8.01428571rem; 4149 } 4150 4151 .ui.selection.dropdown .menu { 4152 max-height: 16.02857143rem; 4153 } 4154 4155 .ui.selection.dropdown.long .menu { 4156 max-height: 32.05714286rem; 4157 } 4158 4159 .ui.selection.dropdown[class*="very long"] .menu { 4160 max-height: 48.08571429rem; 4161 } 4162 } 4163 4164 @media only screen and (min-width: 1920px) { 4165 .ui.selection.dropdown.short .menu { 4166 max-height: 16.02857143rem; 4167 } 4168 4169 .ui.selection.dropdown[class*="very short"] .menu { 4170 max-height: 10.68571429rem; 4171 } 4172 4173 .ui.selection.dropdown .menu { 4174 max-height: 21.37142857rem; 4175 } 4176 4177 .ui.selection.dropdown.long .menu { 4178 max-height: 42.74285714rem; 4179 } 4180 4181 .ui.selection.dropdown[class*="very long"] .menu { 4182 max-height: 64.11428571rem; 4183 } 4184 } 4185 4186 /* Menu Item */ 4187 4188 .ui.selection.dropdown .menu > .item { 4189 border-top: 1px solid #FAFAFA; 4190 padding: 0.78571429rem 1.14285714rem !important; 4191 white-space: normal; 4192 word-wrap: normal; 4193 } 4194 4195 /* User Item */ 4196 4197 .ui.selection.dropdown .menu > .hidden.addition.item { 4198 display: none; 4199 } 4200 4201 /* Hover */ 4202 4203 .ui.selection.dropdown:hover { 4204 border-color: rgba(34, 36, 38, 0.35); 4205 box-shadow: none; 4206 } 4207 4208 /* Active */ 4209 4210 .ui.selection.active.dropdown { 4211 border-color: #96C8DA; 4212 box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15); 4213 } 4214 4215 .ui.selection.active.dropdown .menu { 4216 border-color: #96C8DA; 4217 box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15); 4218 } 4219 4220 /* Focus */ 4221 4222 .ui.selection.dropdown:focus { 4223 border-color: #96C8DA; 4224 box-shadow: none; 4225 } 4226 4227 .ui.selection.dropdown:focus .menu { 4228 border-color: #96C8DA; 4229 box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15); 4230 } 4231 4232 /* Visible */ 4233 4234 .ui.selection.visible.dropdown > .text:not(.default) { 4235 font-weight: normal; 4236 color: rgba(0, 0, 0, 0.8); 4237 } 4238 4239 /* Visible Hover */ 4240 4241 .ui.selection.active.dropdown:hover { 4242 border-color: #96C8DA; 4243 box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15); 4244 } 4245 4246 .ui.selection.active.dropdown:hover .menu { 4247 border-color: #96C8DA; 4248 box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15); 4249 } 4250 4251 /* Dropdown Icon */ 4252 4253 .ui.active.selection.dropdown > .dropdown.icon, 4254 .ui.visible.selection.dropdown > .dropdown.icon { 4255 opacity: ''; 4256 z-index: 3; 4257 } 4258 4259 /* Connecting Border */ 4260 4261 .ui.active.selection.dropdown { 4262 border-bottom-left-radius: 0 !important; 4263 border-bottom-right-radius: 0 !important; 4264 } 4265 4266 /* Empty Connecting Border */ 4267 4268 .ui.active.empty.selection.dropdown { 4269 border-radius: 0.28571429rem !important; 4270 box-shadow: none !important; 4271 } 4272 4273 .ui.active.empty.selection.dropdown .menu { 4274 border: none !important; 4275 box-shadow: none !important; 4276 } 4277 4278 /* CSS specific to iOS devices or firefox mobile only */ 4279 4280 @supports (-webkit-touch-callout: none) or (-webkit-overflow-scrolling: touch) or (-moz-appearance:none) { 4281 @media (-moz-touch-enabled), (pointer: coarse) { 4282 .ui.dropdown .scrollhint.menu:not(.hidden):before { 4283 -webkit-animation: scrollhint 2s ease 2; 4284 animation: scrollhint 2s ease 2; 4285 content: ''; 4286 z-index: 15; 4287 display: block; 4288 position: absolute; 4289 opacity: 0; 4290 right: 0.25em; 4291 top: 0; 4292 height: 100%; 4293 border-right: 0.25em solid; 4294 border-left: 0; 4295 -o-border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)) 1 100%; 4296 border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)) 1 100%; 4297 } 4298 4299 .ui.inverted.dropdown .scrollhint.menu:not(.hidden):before { 4300 -o-border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)) 1 100%; 4301 border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)) 1 100%; 4302 } 4303 4304 @-webkit-keyframes scrollhint { 4305 0% { 4306 opacity: 1; 4307 top: 100%; 4308 } 4309 4310 100% { 4311 opacity: 0; 4312 top: 0; 4313 } 4314 } 4315 4316 @keyframes scrollhint { 4317 0% { 4318 opacity: 1; 4319 top: 100%; 4320 } 4321 4322 100% { 4323 opacity: 0; 4324 top: 0; 4325 } 4326 } 4327 } 4328 } 4329 4330 /*-------------- 4331 Searchable 4332 ---------------*/ 4333 4334 /* Search Selection */ 4335 4336 .ui.search.dropdown { 4337 min-width: ''; 4338 } 4339 4340 /* Search Dropdown */ 4341 4342 .ui.search.dropdown > input.search { 4343 background: none transparent !important; 4344 border: none !important; 4345 box-shadow: none !important; 4346 cursor: text; 4347 top: 0; 4348 left: 1px; 4349 width: 100%; 4350 outline: none; 4351 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 4352 padding: inherit; 4353 } 4354 4355 /* Text Layering */ 4356 4357 .ui.search.dropdown > input.search { 4358 position: absolute; 4359 z-index: 2; 4360 } 4361 4362 .ui.search.dropdown > .text { 4363 cursor: text; 4364 position: relative; 4365 left: 1px; 4366 z-index: auto; 4367 } 4368 4369 /* Search Selection */ 4370 4371 .ui.search.selection.dropdown > input.search { 4372 line-height: 1.21428571em; 4373 padding: 0.67857143em 3.2em 0.67857143em 1em; 4374 } 4375 4376 /* Used to size multi select input to character width */ 4377 4378 .ui.search.selection.dropdown > span.sizer { 4379 line-height: 1.21428571em; 4380 padding: 0.67857143em 3.2em 0.67857143em 1em; 4381 display: none; 4382 white-space: pre; 4383 } 4384 4385 /* Active/Visible Search */ 4386 4387 .ui.search.dropdown.active > input.search, 4388 .ui.search.dropdown.visible > input.search { 4389 cursor: auto; 4390 } 4391 4392 .ui.search.dropdown.active > .text, 4393 .ui.search.dropdown.visible > .text { 4394 pointer-events: none; 4395 } 4396 4397 /* Filtered Text */ 4398 4399 .ui.active.search.dropdown input.search:focus + .text i.icon, 4400 .ui.active.search.dropdown input.search:focus + .text .flag { 4401 opacity: var(--opacity-disabled); 4402 } 4403 4404 .ui.active.search.dropdown input.search:focus + .text { 4405 color: rgba(115, 115, 115, 0.87) !important; 4406 } 4407 4408 .ui.search.dropdown.button > span.sizer { 4409 display: none; 4410 } 4411 4412 /* Search Menu */ 4413 4414 .ui.search.dropdown .menu { 4415 overflow-x: hidden; 4416 overflow-y: auto; 4417 -webkit-backface-visibility: hidden; 4418 backface-visibility: hidden; 4419 -webkit-overflow-scrolling: touch; 4420 } 4421 4422 @media only screen and (max-width: 767.98px) { 4423 .ui.search.dropdown .menu { 4424 max-height: 8.01428571rem; 4425 } 4426 } 4427 4428 @media only screen and (min-width: 768px) { 4429 .ui.search.dropdown .menu { 4430 max-height: 10.68571429rem; 4431 } 4432 } 4433 4434 @media only screen and (min-width: 992px) { 4435 .ui.search.dropdown .menu { 4436 max-height: 16.02857143rem; 4437 } 4438 } 4439 4440 @media only screen and (min-width: 1920px) { 4441 .ui.search.dropdown .menu { 4442 max-height: 21.37142857rem; 4443 } 4444 } 4445 4446 /* Clearable Selection */ 4447 4448 .ui.dropdown > .remove.icon { 4449 cursor: pointer; 4450 font-size: 0.85714286em; 4451 margin: -0.78571429em; 4452 padding: 0.91666667em; 4453 right: 3em; 4454 top: 0.78571429em; 4455 position: absolute; 4456 opacity: 0.6; 4457 z-index: 3; 4458 } 4459 4460 .ui.clearable.dropdown .text, 4461 .ui.clearable.dropdown a:last-of-type { 4462 margin-right: 1.5em; 4463 } 4464 4465 .ui.dropdown select.noselection ~ .remove.icon, 4466 .ui.dropdown input[value=''] ~ .remove.icon, 4467 .ui.dropdown input:not([value]) ~ .remove.icon, 4468 .ui.dropdown.loading > .remove.icon { 4469 display: none; 4470 } 4471 4472 /*-------------- 4473 Multiple 4474 ---------------*/ 4475 4476 /* Multiple Selection */ 4477 4478 .ui.ui.multiple.dropdown { 4479 padding: 0.22619048em 3.2em 0.22619048em 0.35714286em; 4480 } 4481 4482 .ui.multiple.dropdown .menu { 4483 cursor: auto; 4484 } 4485 4486 /* Selection Label */ 4487 4488 .ui.multiple.dropdown > .label { 4489 display: inline-block; 4490 white-space: normal; 4491 font-size: 1em; 4492 padding: 0.35714286em 0.78571429em; 4493 margin: 0.14285714rem 0.28571429rem 0.14285714rem 0; 4494 box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset; 4495 } 4496 4497 /* Dropdown Icon */ 4498 4499 .ui.multiple.dropdown .dropdown.icon { 4500 margin: ''; 4501 padding: ''; 4502 } 4503 4504 /* Text */ 4505 4506 .ui.multiple.dropdown > .text { 4507 position: static; 4508 padding: 0; 4509 max-width: 100%; 4510 margin: 0.45238095em 0 0.45238095em 0.64285714em; 4511 line-height: 1.21428571em; 4512 } 4513 4514 .ui.multiple.dropdown > .text.default { 4515 white-space: nowrap; 4516 overflow: hidden; 4517 text-overflow: ellipsis; 4518 } 4519 4520 .ui.multiple.dropdown > .label ~ input.search { 4521 margin-left: 0.14285714em !important; 4522 } 4523 4524 .ui.multiple.dropdown > .label ~ .text { 4525 display: none; 4526 } 4527 4528 .ui.multiple.dropdown > .label:not(.image) > img:not(.centered) { 4529 margin-right: 0.78571429rem; 4530 } 4531 4532 .ui.multiple.dropdown > .label:not(.image) > img.ui:not(.avatar) { 4533 margin-bottom: 0.39285714rem; 4534 } 4535 4536 .ui.multiple.dropdown > .image.label img { 4537 margin: -0.35714286em 0.78571429em -0.35714286em -0.78571429em; 4538 height: 1.71428571em; 4539 } 4540 4541 /*----------------- 4542 Multiple Search 4543 -----------------*/ 4544 4545 /* Multiple Search Selection */ 4546 4547 .ui.multiple.search.dropdown, 4548 .ui.multiple.search.dropdown > input.search { 4549 cursor: text; 4550 } 4551 4552 /* Prompt Text */ 4553 4554 .ui.multiple.search.dropdown > .text { 4555 display: inline-block; 4556 position: absolute; 4557 top: 0; 4558 left: 0; 4559 padding: inherit; 4560 margin: 0.45238095em 0 0.45238095em 0.64285714em; 4561 line-height: 1.21428571em; 4562 } 4563 4564 .ui.multiple.search.dropdown > .label ~ .text { 4565 display: none; 4566 } 4567 4568 /* Search */ 4569 4570 .ui.multiple.search.dropdown > input.search { 4571 position: static; 4572 padding: 0; 4573 max-width: 100%; 4574 margin: 0.45238095em 0 0.45238095em 0.64285714em; 4575 width: 2.2em; 4576 line-height: 1.21428571em; 4577 } 4578 4579 .ui.multiple.search.dropdown.button { 4580 min-width: 14em; 4581 } 4582 4583 /*-------------- 4584 Inline 4585 ---------------*/ 4586 4587 .ui.inline.dropdown { 4588 cursor: pointer; 4589 display: inline-block; 4590 color: inherit; 4591 } 4592 4593 .ui.inline.dropdown .dropdown.icon { 4594 margin: 0 0.21428571em 0 0.21428571em; 4595 vertical-align: baseline; 4596 } 4597 4598 .ui.inline.dropdown > .text { 4599 font-weight: 500; 4600 } 4601 4602 .ui.inline.dropdown .menu { 4603 cursor: auto; 4604 margin-top: 0.21428571em; 4605 border-radius: 0.28571429rem; 4606 } 4607 4608 /******************************* 4609 States 4610 *******************************/ 4611 4612 /*-------------------- 4613 Active 4614 ----------------------*/ 4615 4616 /* Menu Item Active */ 4617 4618 .ui.dropdown .menu .active.item { 4619 background: transparent; 4620 font-weight: 500; 4621 color: rgba(0, 0, 0, 0.95); 4622 box-shadow: none; 4623 z-index: 12; 4624 } 4625 4626 /*-------------------- 4627 Hover 4628 ----------------------*/ 4629 4630 /* Menu Item Hover */ 4631 4632 .ui.dropdown .menu > .item:hover { 4633 background: rgba(0, 0, 0, 0.05); 4634 color: rgba(0, 0, 0, 0.95); 4635 z-index: 13; 4636 } 4637 4638 /*-------------------- 4639 Default Text 4640 ----------------------*/ 4641 4642 .ui.dropdown:not(.button) > .default.text, 4643 .ui.default.dropdown:not(.button) > .text { 4644 color: rgba(191, 191, 191, 0.87); 4645 } 4646 4647 .ui.dropdown:not(.button) > input:focus ~ .default.text, 4648 .ui.default.dropdown:not(.button) > input:focus ~ .text { 4649 color: rgba(115, 115, 115, 0.87); 4650 } 4651 4652 /*-------------------- 4653 Loading 4654 ---------------------*/ 4655 4656 .ui.loading.dropdown > i.icon { 4657 height: 1em !important; 4658 } 4659 4660 .ui.loading.selection.dropdown > i.icon { 4661 padding: 1.5em 1.28571429em !important; 4662 } 4663 4664 .ui.loading.dropdown > i.icon:before { 4665 position: absolute; 4666 content: ''; 4667 top: 50%; 4668 left: 50%; 4669 margin: -0.64285714em 0 0 -0.64285714em; 4670 width: 1.28571429em; 4671 height: 1.28571429em; 4672 border-radius: 500rem; 4673 border: 0.2em solid rgba(0, 0, 0, 0.1); 4674 } 4675 4676 .ui.loading.dropdown > i.icon:after { 4677 position: absolute; 4678 content: ''; 4679 top: 50%; 4680 left: 50%; 4681 box-shadow: 0 0 0 1px transparent; 4682 margin: -0.64285714em 0 0 -0.64285714em; 4683 width: 1.28571429em; 4684 height: 1.28571429em; 4685 -webkit-animation: loader 0.6s infinite linear; 4686 animation: loader 0.6s infinite linear; 4687 border: 0.2em solid #767676; 4688 border-radius: 500rem; 4689 } 4690 4691 /* Coupling */ 4692 4693 .ui.loading.dropdown.button > i.icon:before, 4694 .ui.loading.dropdown.button > i.icon:after { 4695 display: none; 4696 } 4697 4698 .ui.loading.dropdown > .text { 4699 transition: none; 4700 } 4701 4702 /* Used To Check Position */ 4703 4704 .ui.dropdown .loading.menu { 4705 display: block; 4706 visibility: hidden; 4707 z-index: -1; 4708 } 4709 4710 .ui.dropdown > .loading.menu { 4711 left: 0 !important; 4712 right: auto !important; 4713 } 4714 4715 .ui.dropdown > .menu .loading.menu { 4716 left: 100% !important; 4717 right: auto !important; 4718 } 4719 4720 /*-------------------- 4721 Keyboard Select 4722 ----------------------*/ 4723 4724 /* Selected Item */ 4725 4726 .ui.dropdown.selected, 4727 .ui.dropdown .menu .selected.item { 4728 background: rgba(0, 0, 0, 0.03); 4729 color: rgba(0, 0, 0, 0.95); 4730 } 4731 4732 /*-------------------- 4733 Search Filtered 4734 ----------------------*/ 4735 4736 /* Filtered Item */ 4737 4738 .ui.dropdown > .filtered.text { 4739 visibility: hidden; 4740 } 4741 4742 .ui.dropdown .filtered.item { 4743 display: none !important; 4744 } 4745 4746 /*-------------------- 4747 States 4748 ----------------------*/ 4749 4750 .ui.dropdown.error, 4751 .ui.dropdown.error > .text, 4752 .ui.dropdown.error > .default.text { 4753 color: #9F3A38; 4754 } 4755 4756 .ui.selection.dropdown.error { 4757 background: #FFF6F6; 4758 border-color: #E0B4B4; 4759 } 4760 4761 .ui.selection.dropdown.error:hover { 4762 border-color: #E0B4B4; 4763 } 4764 4765 .ui.multiple.selection.error.dropdown > .label { 4766 border-color: #E0B4B4; 4767 } 4768 4769 .ui.dropdown.error > .menu, 4770 .ui.dropdown.error > .menu .menu { 4771 border-color: #E0B4B4; 4772 } 4773 4774 .ui.dropdown.error > .menu > .item { 4775 color: #9F3A38; 4776 } 4777 4778 /* Item Hover */ 4779 4780 .ui.dropdown.error > .menu > .item:hover { 4781 background-color: #FBE7E7; 4782 } 4783 4784 /* Item Active */ 4785 4786 .ui.dropdown.error > .menu .active.item { 4787 background-color: #FDCFCF; 4788 } 4789 4790 .ui.dropdown.info, 4791 .ui.dropdown.info > .text, 4792 .ui.dropdown.info > .default.text { 4793 color: #276F86; 4794 } 4795 4796 .ui.selection.dropdown.info { 4797 background: #F8FFFF; 4798 border-color: #A9D5DE; 4799 } 4800 4801 .ui.selection.dropdown.info:hover { 4802 border-color: #A9D5DE; 4803 } 4804 4805 .ui.multiple.selection.info.dropdown > .label { 4806 border-color: #A9D5DE; 4807 } 4808 4809 .ui.dropdown.info > .menu, 4810 .ui.dropdown.info > .menu .menu { 4811 border-color: #A9D5DE; 4812 } 4813 4814 .ui.dropdown.info > .menu > .item { 4815 color: #276F86; 4816 } 4817 4818 /* Item Hover */ 4819 4820 .ui.dropdown.info > .menu > .item:hover { 4821 background-color: #e9f2fb; 4822 } 4823 4824 /* Item Active */ 4825 4826 .ui.dropdown.info > .menu .active.item { 4827 background-color: #cef1fd; 4828 } 4829 4830 .ui.dropdown.success, 4831 .ui.dropdown.success > .text, 4832 .ui.dropdown.success > .default.text { 4833 color: #2C662D; 4834 } 4835 4836 .ui.selection.dropdown.success { 4837 background: #FCFFF5; 4838 border-color: #A3C293; 4839 } 4840 4841 .ui.selection.dropdown.success:hover { 4842 border-color: #A3C293; 4843 } 4844 4845 .ui.multiple.selection.success.dropdown > .label { 4846 border-color: #A3C293; 4847 } 4848 4849 .ui.dropdown.success > .menu, 4850 .ui.dropdown.success > .menu .menu { 4851 border-color: #A3C293; 4852 } 4853 4854 .ui.dropdown.success > .menu > .item { 4855 color: #2C662D; 4856 } 4857 4858 /* Item Hover */ 4859 4860 .ui.dropdown.success > .menu > .item:hover { 4861 background-color: #e9fbe9; 4862 } 4863 4864 /* Item Active */ 4865 4866 .ui.dropdown.success > .menu .active.item { 4867 background-color: #dafdce; 4868 } 4869 4870 .ui.dropdown.warning, 4871 .ui.dropdown.warning > .text, 4872 .ui.dropdown.warning > .default.text { 4873 color: #573A08; 4874 } 4875 4876 .ui.selection.dropdown.warning { 4877 background: #FFFAF3; 4878 border-color: #C9BA9B; 4879 } 4880 4881 .ui.selection.dropdown.warning:hover { 4882 border-color: #C9BA9B; 4883 } 4884 4885 .ui.multiple.selection.warning.dropdown > .label { 4886 border-color: #C9BA9B; 4887 } 4888 4889 .ui.dropdown.warning > .menu, 4890 .ui.dropdown.warning > .menu .menu { 4891 border-color: #C9BA9B; 4892 } 4893 4894 .ui.dropdown.warning > .menu > .item { 4895 color: #573A08; 4896 } 4897 4898 /* Item Hover */ 4899 4900 .ui.dropdown.warning > .menu > .item:hover { 4901 background-color: #fbfbe9; 4902 } 4903 4904 /* Item Active */ 4905 4906 .ui.dropdown.warning > .menu .active.item { 4907 background-color: #fdfdce; 4908 } 4909 4910 /*-------------------- 4911 Clear 4912 ----------------------*/ 4913 4914 .ui.dropdown > .clear.dropdown.icon { 4915 opacity: 0.8; 4916 transition: opacity 0.1s ease; 4917 } 4918 4919 .ui.dropdown > .clear.dropdown.icon:hover { 4920 opacity: 1; 4921 } 4922 4923 /*-------------------- 4924 Disabled 4925 ----------------------*/ 4926 4927 /* Disabled */ 4928 4929 .ui.disabled.dropdown, 4930 .ui.dropdown .menu > .disabled.item { 4931 cursor: default; 4932 pointer-events: none; 4933 opacity: var(--opacity-disabled); 4934 } 4935 4936 /******************************* 4937 Variations 4938 *******************************/ 4939 4940 /*-------------- 4941 Direction 4942 ---------------*/ 4943 4944 /* Flyout Direction */ 4945 4946 .ui.dropdown .menu { 4947 left: 0; 4948 } 4949 4950 /* Default Side (Right) */ 4951 4952 .ui.dropdown .right.menu > .menu, 4953 .ui.dropdown .menu .right.menu { 4954 left: 100% !important; 4955 right: auto !important; 4956 border-radius: 0.28571429rem !important; 4957 } 4958 4959 /* Leftward Opening Menu */ 4960 4961 .ui.dropdown > .left.menu { 4962 left: auto !important; 4963 right: 0 !important; 4964 } 4965 4966 .ui.dropdown > .left.menu .menu, 4967 .ui.dropdown .menu .left.menu { 4968 left: auto; 4969 right: 100%; 4970 margin: 0 -0.5em 0 0 !important; 4971 border-radius: 0.28571429rem !important; 4972 } 4973 4974 .ui.dropdown .item .left.dropdown.icon, 4975 .ui.dropdown .left.menu .item .dropdown.icon { 4976 width: auto; 4977 float: left; 4978 margin: 0em 0 0 0; 4979 } 4980 4981 .ui.dropdown .item .left.dropdown.icon, 4982 .ui.dropdown .left.menu .item .dropdown.icon { 4983 width: auto; 4984 float: left; 4985 margin: 0em 0 0 0; 4986 } 4987 4988 .ui.dropdown .item .left.dropdown.icon + .text, 4989 .ui.dropdown .left.menu .item .dropdown.icon + .text { 4990 margin-left: 1em; 4991 margin-right: 0; 4992 } 4993 4994 /*-------------- 4995 Upward 4996 ---------------*/ 4997 4998 /* Upward Main Menu */ 4999 5000 .ui.upward.dropdown > .menu { 5001 top: auto; 5002 bottom: 100%; 5003 box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.08); 5004 border-radius: 0.28571429rem 0.28571429rem 0 0; 5005 } 5006 5007 /* Upward Sub Menu */ 5008 5009 .ui.dropdown .upward.menu { 5010 top: auto !important; 5011 bottom: 0 !important; 5012 } 5013 5014 /* Active Upward */ 5015 5016 .ui.simple.upward.active.dropdown, 5017 .ui.simple.upward.dropdown:hover { 5018 border-radius: 0.28571429rem 0.28571429rem 0 0 !important; 5019 } 5020 5021 .ui.upward.dropdown.button:not(.pointing):not(.floating).active { 5022 border-radius: 0.28571429rem 0.28571429rem 0 0; 5023 } 5024 5025 /* Selection */ 5026 5027 .ui.upward.selection.dropdown .menu { 5028 border-top-width: 1px !important; 5029 border-bottom-width: 0 !important; 5030 box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.08); 5031 } 5032 5033 .ui.upward.selection.dropdown:hover { 5034 box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05); 5035 } 5036 5037 /* Active Upward */ 5038 5039 .ui.active.upward.selection.dropdown { 5040 border-radius: 0 0 0.28571429rem 0.28571429rem !important; 5041 } 5042 5043 /* Visible Upward */ 5044 5045 .ui.upward.selection.dropdown.visible { 5046 box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.08); 5047 border-radius: 0 0 0.28571429rem 0.28571429rem !important; 5048 } 5049 5050 /* Visible Hover Upward */ 5051 5052 .ui.upward.active.selection.dropdown:hover { 5053 box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.05); 5054 } 5055 5056 .ui.upward.active.selection.dropdown:hover .menu { 5057 box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.08); 5058 } 5059 5060 /*-------------- 5061 Scrolling 5062 ---------------*/ 5063 5064 /* Selection Menu */ 5065 5066 .ui.scrolling.dropdown .menu, 5067 .ui.dropdown .scrolling.menu { 5068 overflow-x: hidden; 5069 overflow-y: auto; 5070 } 5071 5072 .ui.scrolling.dropdown .menu { 5073 overflow-x: hidden; 5074 overflow-y: auto; 5075 -webkit-backface-visibility: hidden; 5076 backface-visibility: hidden; 5077 -webkit-overflow-scrolling: touch; 5078 min-width: 100% !important; 5079 width: auto !important; 5080 } 5081 5082 .ui.dropdown .scrolling.menu { 5083 position: static; 5084 overflow-y: auto; 5085 border: none; 5086 box-shadow: none !important; 5087 border-radius: 0 !important; 5088 margin: 0 !important; 5089 min-width: 100% !important; 5090 width: auto !important; 5091 border-top: 1px solid rgba(34, 36, 38, 0.15); 5092 } 5093 5094 .ui.scrolling.dropdown .menu .item.item.item, 5095 .ui.dropdown .scrolling.menu > .item.item.item { 5096 border-top: none; 5097 } 5098 5099 .ui.scrolling.dropdown .menu .item:first-child, 5100 .ui.dropdown .scrolling.menu .item:first-child { 5101 border-top: none; 5102 } 5103 5104 .ui.dropdown > .animating.menu .scrolling.menu, 5105 .ui.dropdown > .visible.menu .scrolling.menu { 5106 display: block; 5107 } 5108 5109 /* Scrollbar in IE */ 5110 5111 @media all and (-ms-high-contrast: none) { 5112 .ui.scrolling.dropdown .menu, 5113 .ui.dropdown .scrolling.menu { 5114 min-width: calc(100% - 17px); 5115 } 5116 } 5117 5118 @media only screen and (max-width: 767.98px) { 5119 .ui.scrolling.dropdown .menu, 5120 .ui.dropdown .scrolling.menu { 5121 max-height: 10.28571429rem; 5122 } 5123 } 5124 5125 @media only screen and (min-width: 768px) { 5126 .ui.scrolling.dropdown .menu, 5127 .ui.dropdown .scrolling.menu { 5128 max-height: 15.42857143rem; 5129 } 5130 } 5131 5132 @media only screen and (min-width: 992px) { 5133 .ui.scrolling.dropdown .menu, 5134 .ui.dropdown .scrolling.menu { 5135 max-height: 20.57142857rem; 5136 } 5137 } 5138 5139 @media only screen and (min-width: 1920px) { 5140 .ui.scrolling.dropdown .menu, 5141 .ui.dropdown .scrolling.menu { 5142 max-height: 20.57142857rem; 5143 } 5144 } 5145 5146 /*-------------- 5147 Columnar 5148 ---------------*/ 5149 5150 .ui.column.dropdown > .menu { 5151 flex-wrap: wrap; 5152 } 5153 5154 .ui.dropdown[class*="two column"] > .menu > .item { 5155 width: 50%; 5156 } 5157 5158 .ui.dropdown[class*="three column"] > .menu > .item { 5159 width: 33%; 5160 } 5161 5162 .ui.dropdown[class*="four column"] > .menu > .item { 5163 width: 25%; 5164 } 5165 5166 .ui.dropdown[class*="five column"] > .menu > .item { 5167 width: 20%; 5168 } 5169 5170 /*-------------- 5171 Simple 5172 ---------------*/ 5173 5174 /* Displays without javascript */ 5175 5176 .ui.simple.dropdown .menu:before, 5177 .ui.simple.dropdown .menu:after { 5178 display: none; 5179 } 5180 5181 .ui.simple.dropdown .menu { 5182 position: absolute; 5183 /* IE hack to make dropdown icons appear inline */ 5184 display: -ms-inline-flexbox !important; 5185 display: block; 5186 overflow: hidden; 5187 top: -9999px; 5188 opacity: 0; 5189 width: 0; 5190 height: 0; 5191 transition: opacity 0.1s ease; 5192 margin-top: 0 !important; 5193 } 5194 5195 .ui.simple.active.dropdown, 5196 .ui.simple.dropdown:hover { 5197 border-bottom-left-radius: 0 !important; 5198 border-bottom-right-radius: 0 !important; 5199 } 5200 5201 .ui.simple.active.dropdown > .menu, 5202 .ui.simple.dropdown:hover > .menu { 5203 overflow: visible; 5204 width: auto; 5205 height: auto; 5206 top: 100%; 5207 opacity: 1; 5208 } 5209 5210 .ui.simple.dropdown > .menu > .item:active > .menu, 5211 .ui.simple.dropdown .menu .item:hover > .menu { 5212 overflow: visible; 5213 width: auto; 5214 height: auto; 5215 top: 0 !important; 5216 left: 100%; 5217 opacity: 1; 5218 } 5219 5220 .ui.simple.dropdown > .menu > .item:active > .left.menu, 5221 .ui.simple.dropdown .menu .item:hover > .left.menu, 5222 .right.menu .ui.simple.dropdown > .menu > .item:active > .menu:not(.right), 5223 .right.menu .ui.simple.dropdown > .menu .item:hover > .menu:not(.right) { 5224 left: auto; 5225 right: 100%; 5226 } 5227 5228 .ui.simple.disabled.dropdown:hover .menu { 5229 display: none; 5230 height: 0; 5231 width: 0; 5232 overflow: hidden; 5233 } 5234 5235 /* Visible */ 5236 5237 .ui.simple.visible.dropdown > .menu { 5238 display: block; 5239 } 5240 5241 /* Scrolling */ 5242 5243 .ui.simple.scrolling.active.dropdown > .menu, 5244 .ui.simple.scrolling.dropdown:hover > .menu { 5245 overflow-x: hidden; 5246 overflow-y: auto; 5247 } 5248 5249 /*-------------- 5250 Fluid 5251 ---------------*/ 5252 5253 .ui.fluid.dropdown { 5254 display: block; 5255 width: 100% !important; 5256 min-width: 0; 5257 } 5258 5259 .ui.fluid.dropdown > .dropdown.icon { 5260 float: right; 5261 } 5262 5263 /*-------------- 5264 Floating 5265 ---------------*/ 5266 5267 .ui.floating.dropdown .menu { 5268 left: 0; 5269 right: auto; 5270 box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15) !important; 5271 border-radius: 0.28571429rem !important; 5272 } 5273 5274 .ui.floating.dropdown > .menu { 5275 border-radius: 0.28571429rem !important; 5276 } 5277 5278 .ui:not(.upward).floating.dropdown > .menu { 5279 margin-top: 0.5em; 5280 } 5281 5282 .ui.upward.floating.dropdown > .menu { 5283 margin-bottom: 0.5em; 5284 } 5285 5286 /*-------------- 5287 Pointing 5288 ---------------*/ 5289 5290 .ui.pointing.dropdown > .menu { 5291 top: 100%; 5292 margin-top: 0.78571429rem; 5293 border-radius: 0.28571429rem; 5294 } 5295 5296 .ui.pointing.dropdown > .menu:not(.hidden):after { 5297 display: block; 5298 position: absolute; 5299 pointer-events: none; 5300 content: ''; 5301 visibility: visible; 5302 transform: rotate(45deg); 5303 width: 0.5em; 5304 height: 0.5em; 5305 box-shadow: -1px -1px 0 0 rgba(34, 36, 38, 0.15); 5306 background: #FFFFFF; 5307 z-index: 2; 5308 } 5309 5310 .ui.pointing.dropdown > .menu:not(.hidden):after { 5311 top: -0.25em; 5312 left: 50%; 5313 margin: 0 0 0 -0.25em; 5314 } 5315 5316 /* Top Left Pointing */ 5317 5318 .ui.top.left.pointing.dropdown > .menu { 5319 top: 100%; 5320 bottom: auto; 5321 left: 0; 5322 right: auto; 5323 margin: 1em 0 0; 5324 } 5325 5326 .ui.top.left.pointing.dropdown > .menu { 5327 top: 100%; 5328 bottom: auto; 5329 left: 0; 5330 right: auto; 5331 margin: 1em 0 0; 5332 } 5333 5334 .ui.top.left.pointing.dropdown > .menu:after { 5335 top: -0.25em; 5336 left: 1em; 5337 right: auto; 5338 margin: 0; 5339 transform: rotate(45deg); 5340 } 5341 5342 /* Top Right Pointing */ 5343 5344 .ui.top.right.pointing.dropdown > .menu { 5345 top: 100%; 5346 bottom: auto; 5347 right: 0; 5348 left: auto; 5349 margin: 1em 0 0; 5350 } 5351 5352 .ui.top.pointing.dropdown > .left.menu:after, 5353 .ui.top.right.pointing.dropdown > .menu:after { 5354 top: -0.25em; 5355 left: auto !important; 5356 right: 1em !important; 5357 margin: 0; 5358 transform: rotate(45deg); 5359 } 5360 5361 /* Left Pointing */ 5362 5363 .ui.left.pointing.dropdown > .menu { 5364 top: 0; 5365 left: 100%; 5366 right: auto; 5367 margin: 0 0 0 1em; 5368 } 5369 5370 .ui.left.pointing.dropdown > .menu:after { 5371 top: 1em; 5372 left: -0.25em; 5373 margin: 0 0 0 0; 5374 transform: rotate(-45deg); 5375 } 5376 5377 .ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu { 5378 left: auto !important; 5379 right: 100% !important; 5380 margin: 0 1em 0 0; 5381 } 5382 5383 .ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu:after { 5384 top: 1em; 5385 left: auto; 5386 right: -0.25em; 5387 margin: 0 0 0 0; 5388 transform: rotate(135deg); 5389 } 5390 5391 /* Right Pointing */ 5392 5393 .ui.right.pointing.dropdown > .menu { 5394 top: 0; 5395 left: auto; 5396 right: 100%; 5397 margin: 0 1em 0 0; 5398 } 5399 5400 .ui.right.pointing.dropdown > .menu:after { 5401 top: 1em; 5402 left: auto; 5403 right: -0.25em; 5404 margin: 0 0 0 0; 5405 transform: rotate(135deg); 5406 } 5407 5408 /* Bottom Pointing */ 5409 5410 .ui.bottom.pointing.dropdown > .menu { 5411 top: auto; 5412 bottom: 100%; 5413 left: 0; 5414 right: auto; 5415 margin: 0 0 1em; 5416 } 5417 5418 .ui.bottom.pointing.dropdown > .menu:after { 5419 top: auto; 5420 bottom: -0.25em; 5421 right: auto; 5422 margin: 0; 5423 transform: rotate(-135deg); 5424 } 5425 5426 /* Reverse Sub-Menu Direction */ 5427 5428 .ui.bottom.pointing.dropdown > .menu .menu { 5429 top: auto !important; 5430 bottom: 0 !important; 5431 } 5432 5433 /* Bottom Left */ 5434 5435 .ui.bottom.left.pointing.dropdown > .menu { 5436 left: 0; 5437 right: auto; 5438 } 5439 5440 .ui.bottom.left.pointing.dropdown > .menu:after { 5441 left: 1em; 5442 right: auto; 5443 } 5444 5445 /* Bottom Right */ 5446 5447 .ui.bottom.right.pointing.dropdown > .menu { 5448 right: 0; 5449 left: auto; 5450 } 5451 5452 .ui.bottom.right.pointing.dropdown > .menu:after { 5453 left: auto; 5454 right: 1em; 5455 } 5456 5457 /* Upward pointing */ 5458 5459 .ui.pointing.upward.dropdown .menu, 5460 .ui.top.pointing.upward.dropdown .menu { 5461 top: auto !important; 5462 bottom: 100% !important; 5463 margin: 0 0 0.78571429rem; 5464 border-radius: 0.28571429rem; 5465 } 5466 5467 .ui.pointing.upward.dropdown .menu:after, 5468 .ui.top.pointing.upward.dropdown .menu:after { 5469 top: 100% !important; 5470 bottom: auto !important; 5471 box-shadow: 1px 1px 0 0 rgba(34, 36, 38, 0.15); 5472 margin: -0.25em 0 0; 5473 } 5474 5475 /* Right Pointing Upward */ 5476 5477 .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu { 5478 top: auto !important; 5479 bottom: 0 !important; 5480 margin: 0 1em 0 0; 5481 } 5482 5483 .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after { 5484 top: auto !important; 5485 bottom: 0 !important; 5486 margin: 0 0 1em 0; 5487 box-shadow: -1px -1px 0 0 rgba(34, 36, 38, 0.15); 5488 } 5489 5490 /* Left Pointing Upward */ 5491 5492 .ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu { 5493 top: auto !important; 5494 bottom: 0 !important; 5495 margin: 0 0 0 1em; 5496 } 5497 5498 .ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after { 5499 top: auto !important; 5500 bottom: 0 !important; 5501 margin: 0 0 1em 0; 5502 box-shadow: -1px -1px 0 0 rgba(34, 36, 38, 0.15); 5503 } 5504 5505 /*-------------------- 5506 Sizes 5507 ---------------------*/ 5508 5509 .ui.dropdown, 5510 .ui.dropdown .menu > .item { 5511 font-size: 1rem; 5512 } 5513 5514 .ui.mini.dropdown, 5515 .ui.mini.dropdown .menu > .item { 5516 font-size: 0.78571429rem; 5517 } 5518 5519 .ui.tiny.dropdown, 5520 .ui.tiny.dropdown .menu > .item { 5521 font-size: 0.85714286rem; 5522 } 5523 5524 .ui.small.dropdown, 5525 .ui.small.dropdown .menu > .item { 5526 font-size: 0.92857143rem; 5527 } 5528 5529 .ui.large.dropdown, 5530 .ui.large.dropdown .menu > .item { 5531 font-size: 1.14285714rem; 5532 } 5533 5534 .ui.big.dropdown, 5535 .ui.big.dropdown .menu > .item { 5536 font-size: 1.28571429rem; 5537 } 5538 5539 .ui.huge.dropdown, 5540 .ui.huge.dropdown .menu > .item { 5541 font-size: 1.42857143rem; 5542 } 5543 5544 .ui.massive.dropdown, 5545 .ui.massive.dropdown .menu > .item { 5546 font-size: 1.71428571rem; 5547 } 5548 5549 /******************************* 5550 Theme Overrides 5551 *******************************/ 5552 5553 /* Dropdown Carets */ 5554 5555 @font-face { 5556 font-family: 'Dropdown'; 5557 src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfuIIAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zjo82LgAAAFwAAABVGhlYWQAQ88bAAACxAAAADZoaGVhAwcB6QAAAvwAAAAkaG10eAS4ABIAAAMgAAAAIGxvY2EBNgDeAAADQAAAABJtYXhwAAoAFgAAA1QAAAAgbmFtZVcZpu4AAAN0AAABRXBvc3QAAwAAAAAEvAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDX//3//wAB/+MPLQADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAIABJQElABMAABM0NzY3BTYXFhUUDwEGJwYvASY1AAUGBwEACAUGBoAFCAcGgAUBEgcGBQEBAQcECQYHfwYBAQZ/BwYAAQAAAG4BJQESABMAADc0PwE2MzIfARYVFAcGIyEiJyY1AAWABgcIBYAGBgUI/wAHBgWABwaABQWABgcHBgUFBgcAAAABABIASQC3AW4AEwAANzQ/ATYXNhcWHQEUBwYnBi8BJjUSBoAFCAcFBgYFBwgFgAbbBwZ/BwEBBwQJ/wgEBwEBB38GBgAAAAABAAAASQClAW4AEwAANxE0NzYzMh8BFhUUDwEGIyInJjUABQYHCAWABgaABQgHBgVbAQAIBQYGgAUIBwWABgYFBwAAAAEAAAABAADZuaKOXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAAAAACgAUAB4AQgBkAIgAqgAAAAEAAAAIABQAAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVwAAoAAAAABSgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAdkAAAHZLDXE/09TLzIAAALQAAAAYAAAAGAIIweQY21hcAAAAzAAAABMAAAATA9+4ghnYXNwAAADfAAAAAgAAAAIAAAAEGhlYWQAAAOEAAAANgAAADYAQ88baGhlYQAAA7wAAAAkAAAAJAMHAelobXR4AAAD4AAAACAAAAAgBLgAEm1heHAAAAQAAAAABgAAAAYACFAAbmFtZQAABAgAAAFFAAABRVcZpu5wb3N0AAAFUAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAACIDx0AAACNER0AAAAJHQAAAdASAAkBAQgPERMWGyAlKmljb21vb25pY29tb29udTB1MXUyMHVGMEQ3dUYwRDh1RjBEOXVGMERBAAACAYkABgAIAgABAAQABwAKAA0AVgCfAOgBL/yUDvyUDvyUDvuUDvtvi/emFYuQjZCOjo+Pj42Qiwj3lIsFkIuQiY6Hj4iNhouGi4aJh4eHCPsU+xQFiIiGiYaLhouHjYeOCPsU9xQFiI+Jj4uQCA77b4v3FBWLkI2Pjo8I9xT3FAWPjo+NkIuQi5CJjogI9xT7FAWPh42Hi4aLhomHh4eIiIaJhosI+5SLBYaLh42HjoiPiY+LkAgO+92d928Vi5CNkI+OCPcU9xQFjo+QjZCLkIuPiY6Hj4iNhouGCIv7lAWLhomHh4iIh4eJhouGi4aNiI8I+xT3FAWHjomPi5AIDvvdi+YVi/eUBYuQjZCOjo+Pj42Qi5CLkImOhwj3FPsUBY+IjYaLhouGiYeHiAj7FPsUBYiHhomGi4aLh42Hj4iOiY+LkAgO+JQU+JQViwwKAAAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8NoB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDw2v/9//8AAAAAACDw1//9//8AAf/jDy0AAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAA5emozXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAUAAACAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff'); 5558 font-weight: normal; 5559 font-style: normal; 5560 } 5561 5562 .ui.dropdown > .dropdown.icon { 5563 font-family: 'Dropdown'; 5564 line-height: 1; 5565 height: 1em; 5566 width: 1.23em; 5567 -webkit-backface-visibility: hidden; 5568 backface-visibility: hidden; 5569 font-weight: normal; 5570 font-style: normal; 5571 text-align: center; 5572 } 5573 5574 .ui.dropdown > .dropdown.icon { 5575 width: auto; 5576 } 5577 5578 .ui.dropdown > .dropdown.icon:before { 5579 content: '\f0d7'; 5580 } 5581 5582 /* Sub Menu */ 5583 5584 .ui.dropdown .menu .item .dropdown.icon:before { 5585 content: '\f0da' ; 5586 } 5587 5588 .ui.dropdown .item .left.dropdown.icon:before, 5589 .ui.dropdown .left.menu .item .dropdown.icon:before { 5590 content: "\f0d9" ; 5591 } 5592 5593 /* Vertical Menu Dropdown */ 5594 5595 .ui.vertical.menu .dropdown.item > .dropdown.icon:before { 5596 content: "\f0da" ; 5597 } 5598 5599 /* Icons for Reference 5600 .dropdown.down.icon { 5601 content: "\f0d7"; 5602 } 5603 .dropdown.up.icon { 5604 content: "\f0d8"; 5605 } 5606 .dropdown.left.icon { 5607 content: "\f0d9"; 5608 } 5609 .dropdown.icon.icon { 5610 content: "\f0da"; 5611 } 5612 */ 5613 5614 /******************************* 5615 User Overrides 5616 *******************************/ 5617 /*! 5618 * # Fomantic-UI - Form 5619 * http://github.com/fomantic/Fomantic-UI/ 5620 * 5621 * 5622 * Released under the MIT license 5623 * http://opensource.org/licenses/MIT 5624 * 5625 */ 5626 5627 /******************************* 5628 Elements 5629 *******************************/ 5630 5631 /*-------------------- 5632 Form 5633 ---------------------*/ 5634 5635 .ui.form { 5636 position: relative; 5637 max-width: 100%; 5638 } 5639 5640 /*-------------------- 5641 Content 5642 ---------------------*/ 5643 5644 .ui.form > p { 5645 margin: 1em 0; 5646 } 5647 5648 /*-------------------- 5649 Field 5650 ---------------------*/ 5651 5652 .ui.form .field { 5653 clear: both; 5654 margin: 0 0 1em; 5655 } 5656 5657 .ui.form .fields .fields, 5658 .ui.form .field:last-child, 5659 .ui.form .fields:last-child .field { 5660 margin-bottom: 0; 5661 } 5662 5663 .ui.form .fields .field { 5664 clear: both; 5665 margin: 0; 5666 } 5667 5668 /*-------------------- 5669 Labels 5670 ---------------------*/ 5671 5672 .ui.form .field > label { 5673 display: block; 5674 margin: 0 0 0.28571429rem 0; 5675 color: rgba(0, 0, 0, 0.87); 5676 font-size: 0.92857143em; 5677 font-weight: 500; 5678 text-transform: none; 5679 } 5680 5681 /*-------------------- 5682 Standard Inputs 5683 ---------------------*/ 5684 5685 .ui.form textarea, 5686 .ui.form input:not([type]), 5687 .ui.form input[type="date"], 5688 .ui.form input[type="datetime-local"], 5689 .ui.form input[type="email"], 5690 .ui.form input[type="number"], 5691 .ui.form input[type="password"], 5692 .ui.form input[type="search"], 5693 .ui.form input[type="tel"], 5694 .ui.form input[type="time"], 5695 .ui.form input[type="text"], 5696 .ui.form input[type="file"], 5697 .ui.form input[type="url"] { 5698 width: 100%; 5699 vertical-align: top; 5700 } 5701 5702 /* Set max height on unusual input */ 5703 5704 .ui.form ::-webkit-datetime-edit, 5705 .ui.form ::-webkit-inner-spin-button { 5706 height: 1.21428571em; 5707 } 5708 5709 .ui.form input:not([type]), 5710 .ui.form input[type="date"], 5711 .ui.form input[type="datetime-local"], 5712 .ui.form input[type="email"], 5713 .ui.form input[type="number"], 5714 .ui.form input[type="password"], 5715 .ui.form input[type="search"], 5716 .ui.form input[type="tel"], 5717 .ui.form input[type="time"], 5718 .ui.form input[type="text"], 5719 .ui.form input[type="file"], 5720 .ui.form input[type="url"] { 5721 font-family: var(--fonts-regular); 5722 margin: 0; 5723 outline: none; 5724 -webkit-appearance: none; 5725 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 5726 line-height: 1.21428571em; 5727 padding: 0.67857143em 1em; 5728 font-size: 1em; 5729 background: #FFFFFF; 5730 border: 1px solid rgba(34, 36, 38, 0.15); 5731 color: rgba(0, 0, 0, 0.87); 5732 border-radius: 0.28571429rem; 5733 box-shadow: 0 0 0 0 transparent inset; 5734 transition: color 0.1s ease, border-color 0.1s ease; 5735 } 5736 5737 /* Text Area */ 5738 5739 .ui.input textarea, 5740 .ui.form textarea { 5741 margin: 0; 5742 -webkit-appearance: none; 5743 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 5744 padding: 0.78571429em 1em; 5745 background: #FFFFFF; 5746 border: 1px solid rgba(34, 36, 38, 0.15); 5747 outline: none; 5748 color: rgba(0, 0, 0, 0.87); 5749 border-radius: 0.28571429rem; 5750 box-shadow: 0 0 0 0 transparent inset; 5751 transition: color 0.1s ease, border-color 0.1s ease; 5752 font-size: 1em; 5753 font-family: var(--fonts-regular); 5754 line-height: 1.2857; 5755 resize: vertical; 5756 } 5757 5758 .ui.form textarea:not([rows]) { 5759 height: 12em; 5760 min-height: 8em; 5761 max-height: 24em; 5762 } 5763 5764 .ui.form textarea, 5765 .ui.form input[type="checkbox"] { 5766 vertical-align: top; 5767 } 5768 5769 /*-------------------- 5770 Checkbox margin 5771 ---------------------*/ 5772 5773 .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) label + .ui.ui.checkbox { 5774 margin-top: 0.7em; 5775 } 5776 5777 .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.checkbox { 5778 margin-top: 2.41428571em; 5779 } 5780 5781 .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.toggle.checkbox { 5782 margin-top: 2.21428571em; 5783 } 5784 5785 .ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.slider.checkbox { 5786 margin-top: 2.61428571em; 5787 } 5788 5789 .ui.ui.form .field .fields .field:not(:only-child) .ui.checkbox { 5790 margin-top: 0.6em; 5791 } 5792 5793 .ui.ui.form .field .fields .field:not(:only-child) .ui.toggle.checkbox { 5794 margin-top: 0.5em; 5795 } 5796 5797 .ui.ui.form .field .fields .field:not(:only-child) .ui.slider.checkbox { 5798 margin-top: 0.7em; 5799 } 5800 5801 /*-------------------------- 5802 Input w/ attached Button 5803 ---------------------------*/ 5804 5805 .ui.form input.attached { 5806 width: auto; 5807 } 5808 5809 /*-------------------- 5810 Basic Select 5811 ---------------------*/ 5812 5813 .ui.form select { 5814 display: block; 5815 height: auto; 5816 width: 100%; 5817 background: #FFFFFF; 5818 border: 1px solid rgba(34, 36, 38, 0.15); 5819 border-radius: 0.28571429rem; 5820 box-shadow: 0 0 0 0 transparent inset; 5821 padding: 0.62em 1em; 5822 color: rgba(0, 0, 0, 0.87); 5823 transition: color 0.1s ease, border-color 0.1s ease; 5824 } 5825 5826 /*-------------------- 5827 Dropdown 5828 ---------------------*/ 5829 5830 /* Block */ 5831 5832 .ui.form .field > .selection.dropdown { 5833 min-width: auto; 5834 width: 100%; 5835 } 5836 5837 .ui.form .field > .selection.dropdown > .dropdown.icon { 5838 float: right; 5839 } 5840 5841 /* Inline */ 5842 5843 .ui.form .inline.fields .field > .selection.dropdown, 5844 .ui.form .inline.field > .selection.dropdown { 5845 width: auto; 5846 } 5847 5848 .ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon, 5849 .ui.form .inline.field > .selection.dropdown > .dropdown.icon { 5850 float: none; 5851 } 5852 5853 /*-------------------- 5854 UI Input 5855 ---------------------*/ 5856 5857 /* Block */ 5858 5859 .ui.form .field .ui.input, 5860 .ui.form .fields .field .ui.input, 5861 .ui.form .wide.field .ui.input { 5862 width: 100%; 5863 } 5864 5865 /* Inline */ 5866 5867 .ui.form .inline.fields .field:not(.wide) .ui.input, 5868 .ui.form .inline.field:not(.wide) .ui.input { 5869 width: auto; 5870 vertical-align: middle; 5871 } 5872 5873 /* Auto Input */ 5874 5875 .ui.form .fields .field .ui.input input, 5876 .ui.form .field .ui.input input { 5877 width: auto; 5878 } 5879 5880 /* Full Width Input */ 5881 5882 .ui.form .ten.fields .ui.input input, 5883 .ui.form .nine.fields .ui.input input, 5884 .ui.form .eight.fields .ui.input input, 5885 .ui.form .seven.fields .ui.input input, 5886 .ui.form .six.fields .ui.input input, 5887 .ui.form .five.fields .ui.input input, 5888 .ui.form .four.fields .ui.input input, 5889 .ui.form .three.fields .ui.input input, 5890 .ui.form .two.fields .ui.input input, 5891 .ui.form .wide.field .ui.input input { 5892 flex: 1 0 auto; 5893 width: 0; 5894 } 5895 5896 /*-------------------- 5897 Types of Messages 5898 ---------------------*/ 5899 5900 .ui.form .error.message, 5901 .ui.form .error.message:empty { 5902 display: none; 5903 } 5904 5905 .ui.form .info.message, 5906 .ui.form .info.message:empty { 5907 display: none; 5908 } 5909 5910 .ui.form .success.message, 5911 .ui.form .success.message:empty { 5912 display: none; 5913 } 5914 5915 .ui.form .warning.message, 5916 .ui.form .warning.message:empty { 5917 display: none; 5918 } 5919 5920 /* Assumptions */ 5921 5922 .ui.form .message:first-child { 5923 margin-top: 0; 5924 } 5925 5926 /*-------------------- 5927 Validation Prompt 5928 ---------------------*/ 5929 5930 .ui.form .field .prompt.label { 5931 white-space: normal; 5932 background: #FFFFFF !important; 5933 border: 1px solid #E0B4B4 !important; 5934 color: #9F3A38 !important; 5935 } 5936 5937 .ui.form .inline.fields .field .prompt, 5938 .ui.form .inline.field .prompt { 5939 vertical-align: top; 5940 margin: -0.25em 0 -0.5em 0.5em; 5941 } 5942 5943 .ui.form .inline.fields .field .prompt:before, 5944 .ui.form .inline.field .prompt:before { 5945 border-width: 0 0 1px 1px; 5946 bottom: auto; 5947 right: auto; 5948 top: 50%; 5949 left: 0; 5950 } 5951 5952 /******************************* 5953 States 5954 *******************************/ 5955 5956 /*-------------------- 5957 Autofilled 5958 ---------------------*/ 5959 5960 .ui.form .field.field input:-webkit-autofill { 5961 box-shadow: 0 0 0 100px #FFFFF0 inset !important; 5962 border-color: #E5DFA1 !important; 5963 } 5964 5965 /* Focus */ 5966 5967 .ui.form .field.field input:-webkit-autofill:focus { 5968 box-shadow: 0 0 0 100px #FFFFF0 inset !important; 5969 border-color: #D5C315 !important; 5970 } 5971 5972 /*-------------------- 5973 Placeholder 5974 ---------------------*/ 5975 5976 /* browsers require these rules separate */ 5977 5978 .ui.form ::-webkit-input-placeholder { 5979 color: rgba(191, 191, 191, 0.87); 5980 } 5981 5982 .ui.form :-ms-input-placeholder { 5983 color: rgba(191, 191, 191, 0.87) !important; 5984 } 5985 5986 .ui.form ::-moz-placeholder { 5987 color: rgba(191, 191, 191, 0.87); 5988 } 5989 5990 .ui.form :focus::-webkit-input-placeholder { 5991 color: rgba(115, 115, 115, 0.87); 5992 } 5993 5994 .ui.form :focus:-ms-input-placeholder { 5995 color: rgba(115, 115, 115, 0.87) !important; 5996 } 5997 5998 .ui.form :focus::-moz-placeholder { 5999 color: rgba(115, 115, 115, 0.87); 6000 } 6001 6002 /*-------------------- 6003 Focus 6004 ---------------------*/ 6005 6006 .ui.form input:not([type]):focus, 6007 .ui.form input[type="date"]:focus, 6008 .ui.form input[type="datetime-local"]:focus, 6009 .ui.form input[type="email"]:focus, 6010 .ui.form input[type="number"]:focus, 6011 .ui.form input[type="password"]:focus, 6012 .ui.form input[type="search"]:focus, 6013 .ui.form input[type="tel"]:focus, 6014 .ui.form input[type="time"]:focus, 6015 .ui.form input[type="text"]:focus, 6016 .ui.form input[type="file"]:focus, 6017 .ui.form input[type="url"]:focus { 6018 color: rgba(0, 0, 0, 0.95); 6019 border-color: #85B7D9; 6020 border-radius: 0.28571429rem; 6021 background: #FFFFFF; 6022 box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset; 6023 } 6024 6025 .ui.form .ui.action.input:not([class*="left action"]) input:not([type]):focus, 6026 .ui.form .ui.action.input:not([class*="left action"]) input[type="date"]:focus, 6027 .ui.form .ui.action.input:not([class*="left action"]) input[type="datetime-local"]:focus, 6028 .ui.form .ui.action.input:not([class*="left action"]) input[type="email"]:focus, 6029 .ui.form .ui.action.input:not([class*="left action"]) input[type="number"]:focus, 6030 .ui.form .ui.action.input:not([class*="left action"]) input[type="password"]:focus, 6031 .ui.form .ui.action.input:not([class*="left action"]) input[type="search"]:focus, 6032 .ui.form .ui.action.input:not([class*="left action"]) input[type="tel"]:focus, 6033 .ui.form .ui.action.input:not([class*="left action"]) input[type="time"]:focus, 6034 .ui.form .ui.action.input:not([class*="left action"]) input[type="text"]:focus, 6035 .ui.form .ui.action.input:not([class*="left action"]) input[type="file"]:focus, 6036 .ui.form .ui.action.input:not([class*="left action"]) input[type="url"]:focus { 6037 border-top-right-radius: 0; 6038 border-bottom-right-radius: 0; 6039 } 6040 6041 .ui.form .ui[class*="left action"].input input:not([type]), 6042 .ui.form .ui[class*="left action"].input input[type="date"], 6043 .ui.form .ui[class*="left action"].input input[type="datetime-local"], 6044 .ui.form .ui[class*="left action"].input input[type="email"], 6045 .ui.form .ui[class*="left action"].input input[type="number"], 6046 .ui.form .ui[class*="left action"].input input[type="password"], 6047 .ui.form .ui[class*="left action"].input input[type="search"], 6048 .ui.form .ui[class*="left action"].input input[type="tel"], 6049 .ui.form .ui[class*="left action"].input input[type="time"], 6050 .ui.form .ui[class*="left action"].input input[type="text"], 6051 .ui.form .ui[class*="left action"].input input[type="file"], 6052 .ui.form .ui[class*="left action"].input input[type="url"] { 6053 border-bottom-left-radius: 0; 6054 border-top-left-radius: 0; 6055 } 6056 6057 .ui.form textarea:focus { 6058 color: rgba(0, 0, 0, 0.95); 6059 border-color: #85B7D9; 6060 border-radius: 0.28571429rem; 6061 background: #FFFFFF; 6062 box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset; 6063 -webkit-appearance: none; 6064 } 6065 6066 /*-------------------- 6067 States 6068 ---------------------*/ 6069 6070 /* On Form */ 6071 6072 .ui.form.error .error.message:not(:empty) { 6073 display: block; 6074 } 6075 6076 .ui.form.error .compact.error.message:not(:empty) { 6077 display: inline-block; 6078 } 6079 6080 .ui.form.error .icon.error.message:not(:empty) { 6081 display: flex; 6082 } 6083 6084 /* On Field(s) */ 6085 6086 .ui.form .fields.error .error.message:not(:empty), 6087 .ui.form .field.error .error.message:not(:empty) { 6088 display: block; 6089 } 6090 6091 .ui.form .fields.error .compact.error.message:not(:empty), 6092 .ui.form .field.error .compact.error.message:not(:empty) { 6093 display: inline-block; 6094 } 6095 6096 .ui.form .fields.error .icon.error.message:not(:empty), 6097 .ui.form .field.error .icon.error.message:not(:empty) { 6098 display: flex; 6099 } 6100 6101 .ui.ui.form .fields.error .field label, 6102 .ui.ui.form .field.error label, 6103 .ui.ui.form .fields.error .field .input, 6104 .ui.ui.form .field.error .input { 6105 color: #9F3A38; 6106 } 6107 6108 .ui.form .fields.error .field .corner.label, 6109 .ui.form .field.error .corner.label { 6110 border-color: #9F3A38; 6111 color: #FFFFFF; 6112 } 6113 6114 .ui.form .fields.error .field textarea, 6115 .ui.form .fields.error .field select, 6116 .ui.form .fields.error .field input:not([type]), 6117 .ui.form .fields.error .field input[type="date"], 6118 .ui.form .fields.error .field input[type="datetime-local"], 6119 .ui.form .fields.error .field input[type="email"], 6120 .ui.form .fields.error .field input[type="number"], 6121 .ui.form .fields.error .field input[type="password"], 6122 .ui.form .fields.error .field input[type="search"], 6123 .ui.form .fields.error .field input[type="tel"], 6124 .ui.form .fields.error .field input[type="time"], 6125 .ui.form .fields.error .field input[type="text"], 6126 .ui.form .fields.error .field input[type="file"], 6127 .ui.form .fields.error .field input[type="url"], 6128 .ui.form .field.error textarea, 6129 .ui.form .field.error select, 6130 .ui.form .field.error input:not([type]), 6131 .ui.form .field.error input[type="date"], 6132 .ui.form .field.error input[type="datetime-local"], 6133 .ui.form .field.error input[type="email"], 6134 .ui.form .field.error input[type="number"], 6135 .ui.form .field.error input[type="password"], 6136 .ui.form .field.error input[type="search"], 6137 .ui.form .field.error input[type="tel"], 6138 .ui.form .field.error input[type="time"], 6139 .ui.form .field.error input[type="text"], 6140 .ui.form .field.error input[type="file"], 6141 .ui.form .field.error input[type="url"] { 6142 color: #9F3A38; 6143 background: #FFF6F6; 6144 border-color: #E0B4B4; 6145 border-radius: ''; 6146 box-shadow: none; 6147 } 6148 6149 .ui.form .field.error textarea:focus, 6150 .ui.form .field.error select:focus, 6151 .ui.form .field.error input:not([type]):focus, 6152 .ui.form .field.error input[type="date"]:focus, 6153 .ui.form .field.error input[type="datetime-local"]:focus, 6154 .ui.form .field.error input[type="email"]:focus, 6155 .ui.form .field.error input[type="number"]:focus, 6156 .ui.form .field.error input[type="password"]:focus, 6157 .ui.form .field.error input[type="search"]:focus, 6158 .ui.form .field.error input[type="tel"]:focus, 6159 .ui.form .field.error input[type="time"]:focus, 6160 .ui.form .field.error input[type="text"]:focus, 6161 .ui.form .field.error input[type="file"]:focus, 6162 .ui.form .field.error input[type="url"]:focus { 6163 background: #FFF6F6; 6164 border-color: #E0B4B4; 6165 color: #9F3A38; 6166 box-shadow: none; 6167 } 6168 6169 /* Preserve Native Select Stylings */ 6170 6171 .ui.form .field.error select { 6172 -webkit-appearance: menulist-button; 6173 } 6174 6175 /*------------------ 6176 Input State 6177 --------------------*/ 6178 6179 /* Transparent */ 6180 6181 .ui.form .field.error .transparent.input input, 6182 .ui.form .field.error .transparent.input textarea, 6183 .ui.form .field.error input.transparent, 6184 .ui.form .field.error textarea.transparent { 6185 background-color: #FFF6F6 !important; 6186 color: #9F3A38 !important; 6187 } 6188 6189 /* Autofilled */ 6190 6191 .ui.form .error.error input:-webkit-autofill { 6192 box-shadow: 0 0 0 100px #FFFAF0 inset !important; 6193 border-color: #E0B4B4 !important; 6194 } 6195 6196 /* Placeholder */ 6197 6198 .ui.form .error ::-webkit-input-placeholder { 6199 color: #e7bdbc; 6200 } 6201 6202 .ui.form .error :-ms-input-placeholder { 6203 color: #e7bdbc !important; 6204 } 6205 6206 .ui.form .error ::-moz-placeholder { 6207 color: #e7bdbc; 6208 } 6209 6210 .ui.form .error :focus::-webkit-input-placeholder { 6211 color: #da9796; 6212 } 6213 6214 .ui.form .error :focus:-ms-input-placeholder { 6215 color: #da9796 !important; 6216 } 6217 6218 .ui.form .error :focus::-moz-placeholder { 6219 color: #da9796; 6220 } 6221 6222 /*------------------ 6223 Dropdown State 6224 --------------------*/ 6225 6226 .ui.form .fields.error .field .ui.dropdown, 6227 .ui.form .fields.error .field .ui.dropdown .item, 6228 .ui.form .field.error .ui.dropdown, 6229 .ui.form .field.error .ui.dropdown .text, 6230 .ui.form .field.error .ui.dropdown .item { 6231 background: #FFF6F6; 6232 color: #9F3A38; 6233 } 6234 6235 .ui.form .fields.error .field .ui.dropdown, 6236 .ui.form .field.error .ui.dropdown { 6237 border-color: #E0B4B4 !important; 6238 } 6239 6240 .ui.form .fields.error .field .ui.dropdown:hover, 6241 .ui.form .field.error .ui.dropdown:hover { 6242 border-color: #E0B4B4 !important; 6243 } 6244 6245 .ui.form .fields.error .field .ui.dropdown:hover .menu, 6246 .ui.form .field.error .ui.dropdown:hover .menu { 6247 border-color: #E0B4B4; 6248 } 6249 6250 .ui.form .fields.error .field .ui.multiple.selection.dropdown > .label, 6251 .ui.form .field.error .ui.multiple.selection.dropdown > .label { 6252 background-color: #EACBCB; 6253 color: #9F3A38; 6254 } 6255 6256 /* Hover */ 6257 6258 .ui.form .fields.error .field .ui.dropdown .menu .item:hover, 6259 .ui.form .field.error .ui.dropdown .menu .item:hover { 6260 background-color: #FBE7E7; 6261 } 6262 6263 /* Selected */ 6264 6265 .ui.form .fields.error .field .ui.dropdown .menu .selected.item, 6266 .ui.form .field.error .ui.dropdown .menu .selected.item { 6267 background-color: #FBE7E7; 6268 } 6269 6270 /* Active */ 6271 6272 .ui.form .fields.error .field .ui.dropdown .menu .active.item, 6273 .ui.form .field.error .ui.dropdown .menu .active.item { 6274 background-color: #FDCFCF !important; 6275 } 6276 6277 /*-------------------- 6278 Checkbox State 6279 ---------------------*/ 6280 6281 .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label, 6282 .ui.form .field.error .checkbox:not(.toggle):not(.slider) label, 6283 .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box, 6284 .ui.form .field.error .checkbox:not(.toggle):not(.slider) .box { 6285 color: #9F3A38; 6286 } 6287 6288 .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before, 6289 .ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before, 6290 .ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before, 6291 .ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before { 6292 background: #FFF6F6; 6293 border-color: #E0B4B4; 6294 } 6295 6296 .ui.form .fields.error .field .checkbox label:after, 6297 .ui.form .field.error .checkbox label:after, 6298 .ui.form .fields.error .field .checkbox .box:after, 6299 .ui.form .field.error .checkbox .box:after { 6300 color: #9F3A38; 6301 } 6302 6303 /* On Form */ 6304 6305 .ui.form.info .info.message:not(:empty) { 6306 display: block; 6307 } 6308 6309 .ui.form.info .compact.info.message:not(:empty) { 6310 display: inline-block; 6311 } 6312 6313 .ui.form.info .icon.info.message:not(:empty) { 6314 display: flex; 6315 } 6316 6317 /* On Field(s) */ 6318 6319 .ui.form .fields.info .info.message:not(:empty), 6320 .ui.form .field.info .info.message:not(:empty) { 6321 display: block; 6322 } 6323 6324 .ui.form .fields.info .compact.info.message:not(:empty), 6325 .ui.form .field.info .compact.info.message:not(:empty) { 6326 display: inline-block; 6327 } 6328 6329 .ui.form .fields.info .icon.info.message:not(:empty), 6330 .ui.form .field.info .icon.info.message:not(:empty) { 6331 display: flex; 6332 } 6333 6334 .ui.ui.form .fields.info .field label, 6335 .ui.ui.form .field.info label, 6336 .ui.ui.form .fields.info .field .input, 6337 .ui.ui.form .field.info .input { 6338 color: #276F86; 6339 } 6340 6341 .ui.form .fields.info .field .corner.label, 6342 .ui.form .field.info .corner.label { 6343 border-color: #276F86; 6344 color: #FFFFFF; 6345 } 6346 6347 .ui.form .fields.info .field textarea, 6348 .ui.form .fields.info .field select, 6349 .ui.form .fields.info .field input:not([type]), 6350 .ui.form .fields.info .field input[type="date"], 6351 .ui.form .fields.info .field input[type="datetime-local"], 6352 .ui.form .fields.info .field input[type="email"], 6353 .ui.form .fields.info .field input[type="number"], 6354 .ui.form .fields.info .field input[type="password"], 6355 .ui.form .fields.info .field input[type="search"], 6356 .ui.form .fields.info .field input[type="tel"], 6357 .ui.form .fields.info .field input[type="time"], 6358 .ui.form .fields.info .field input[type="text"], 6359 .ui.form .fields.info .field input[type="file"], 6360 .ui.form .fields.info .field input[type="url"], 6361 .ui.form .field.info textarea, 6362 .ui.form .field.info select, 6363 .ui.form .field.info input:not([type]), 6364 .ui.form .field.info input[type="date"], 6365 .ui.form .field.info input[type="datetime-local"], 6366 .ui.form .field.info input[type="email"], 6367 .ui.form .field.info input[type="number"], 6368 .ui.form .field.info input[type="password"], 6369 .ui.form .field.info input[type="search"], 6370 .ui.form .field.info input[type="tel"], 6371 .ui.form .field.info input[type="time"], 6372 .ui.form .field.info input[type="text"], 6373 .ui.form .field.info input[type="file"], 6374 .ui.form .field.info input[type="url"] { 6375 color: #276F86; 6376 background: #F8FFFF; 6377 border-color: #A9D5DE; 6378 border-radius: ''; 6379 box-shadow: none; 6380 } 6381 6382 .ui.form .field.info textarea:focus, 6383 .ui.form .field.info select:focus, 6384 .ui.form .field.info input:not([type]):focus, 6385 .ui.form .field.info input[type="date"]:focus, 6386 .ui.form .field.info input[type="datetime-local"]:focus, 6387 .ui.form .field.info input[type="email"]:focus, 6388 .ui.form .field.info input[type="number"]:focus, 6389 .ui.form .field.info input[type="password"]:focus, 6390 .ui.form .field.info input[type="search"]:focus, 6391 .ui.form .field.info input[type="tel"]:focus, 6392 .ui.form .field.info input[type="time"]:focus, 6393 .ui.form .field.info input[type="text"]:focus, 6394 .ui.form .field.info input[type="file"]:focus, 6395 .ui.form .field.info input[type="url"]:focus { 6396 background: #F8FFFF; 6397 border-color: #A9D5DE; 6398 color: #276F86; 6399 box-shadow: none; 6400 } 6401 6402 /* Preserve Native Select Stylings */ 6403 6404 .ui.form .field.info select { 6405 -webkit-appearance: menulist-button; 6406 } 6407 6408 /*------------------ 6409 Input State 6410 --------------------*/ 6411 6412 /* Transparent */ 6413 6414 .ui.form .field.info .transparent.input input, 6415 .ui.form .field.info .transparent.input textarea, 6416 .ui.form .field.info input.transparent, 6417 .ui.form .field.info textarea.transparent { 6418 background-color: #F8FFFF !important; 6419 color: #276F86 !important; 6420 } 6421 6422 /* Autofilled */ 6423 6424 .ui.form .info.info input:-webkit-autofill { 6425 box-shadow: 0 0 0 100px #F0FAFF inset !important; 6426 border-color: #b3e0e0 !important; 6427 } 6428 6429 /* Placeholder */ 6430 6431 .ui.form .info ::-webkit-input-placeholder { 6432 color: #98cfe1; 6433 } 6434 6435 .ui.form .info :-ms-input-placeholder { 6436 color: #98cfe1 !important; 6437 } 6438 6439 .ui.form .info ::-moz-placeholder { 6440 color: #98cfe1; 6441 } 6442 6443 .ui.form .info :focus::-webkit-input-placeholder { 6444 color: #70bdd6; 6445 } 6446 6447 .ui.form .info :focus:-ms-input-placeholder { 6448 color: #70bdd6 !important; 6449 } 6450 6451 .ui.form .info :focus::-moz-placeholder { 6452 color: #70bdd6; 6453 } 6454 6455 /*------------------ 6456 Dropdown State 6457 --------------------*/ 6458 6459 .ui.form .fields.info .field .ui.dropdown, 6460 .ui.form .fields.info .field .ui.dropdown .item, 6461 .ui.form .field.info .ui.dropdown, 6462 .ui.form .field.info .ui.dropdown .text, 6463 .ui.form .field.info .ui.dropdown .item { 6464 background: #F8FFFF; 6465 color: #276F86; 6466 } 6467 6468 .ui.form .fields.info .field .ui.dropdown, 6469 .ui.form .field.info .ui.dropdown { 6470 border-color: #A9D5DE !important; 6471 } 6472 6473 .ui.form .fields.info .field .ui.dropdown:hover, 6474 .ui.form .field.info .ui.dropdown:hover { 6475 border-color: #A9D5DE !important; 6476 } 6477 6478 .ui.form .fields.info .field .ui.dropdown:hover .menu, 6479 .ui.form .field.info .ui.dropdown:hover .menu { 6480 border-color: #A9D5DE; 6481 } 6482 6483 .ui.form .fields.info .field .ui.multiple.selection.dropdown > .label, 6484 .ui.form .field.info .ui.multiple.selection.dropdown > .label { 6485 background-color: #cce3ea; 6486 color: #276F86; 6487 } 6488 6489 /* Hover */ 6490 6491 .ui.form .fields.info .field .ui.dropdown .menu .item:hover, 6492 .ui.form .field.info .ui.dropdown .menu .item:hover { 6493 background-color: #e9f2fb; 6494 } 6495 6496 /* Selected */ 6497 6498 .ui.form .fields.info .field .ui.dropdown .menu .selected.item, 6499 .ui.form .field.info .ui.dropdown .menu .selected.item { 6500 background-color: #e9f2fb; 6501 } 6502 6503 /* Active */ 6504 6505 .ui.form .fields.info .field .ui.dropdown .menu .active.item, 6506 .ui.form .field.info .ui.dropdown .menu .active.item { 6507 background-color: #cef1fd !important; 6508 } 6509 6510 /*-------------------- 6511 Checkbox State 6512 ---------------------*/ 6513 6514 .ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) label, 6515 .ui.form .field.info .checkbox:not(.toggle):not(.slider) label, 6516 .ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) .box, 6517 .ui.form .field.info .checkbox:not(.toggle):not(.slider) .box { 6518 color: #276F86; 6519 } 6520 6521 .ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) label:before, 6522 .ui.form .field.info .checkbox:not(.toggle):not(.slider) label:before, 6523 .ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) .box:before, 6524 .ui.form .field.info .checkbox:not(.toggle):not(.slider) .box:before { 6525 background: #F8FFFF; 6526 border-color: #A9D5DE; 6527 } 6528 6529 .ui.form .fields.info .field .checkbox label:after, 6530 .ui.form .field.info .checkbox label:after, 6531 .ui.form .fields.info .field .checkbox .box:after, 6532 .ui.form .field.info .checkbox .box:after { 6533 color: #276F86; 6534 } 6535 6536 /* On Form */ 6537 6538 .ui.form.success .success.message:not(:empty) { 6539 display: block; 6540 } 6541 6542 .ui.form.success .compact.success.message:not(:empty) { 6543 display: inline-block; 6544 } 6545 6546 .ui.form.success .icon.success.message:not(:empty) { 6547 display: flex; 6548 } 6549 6550 /* On Field(s) */ 6551 6552 .ui.form .fields.success .success.message:not(:empty), 6553 .ui.form .field.success .success.message:not(:empty) { 6554 display: block; 6555 } 6556 6557 .ui.form .fields.success .compact.success.message:not(:empty), 6558 .ui.form .field.success .compact.success.message:not(:empty) { 6559 display: inline-block; 6560 } 6561 6562 .ui.form .fields.success .icon.success.message:not(:empty), 6563 .ui.form .field.success .icon.success.message:not(:empty) { 6564 display: flex; 6565 } 6566 6567 .ui.ui.form .fields.success .field label, 6568 .ui.ui.form .field.success label, 6569 .ui.ui.form .fields.success .field .input, 6570 .ui.ui.form .field.success .input { 6571 color: #2C662D; 6572 } 6573 6574 .ui.form .fields.success .field .corner.label, 6575 .ui.form .field.success .corner.label { 6576 border-color: #2C662D; 6577 color: #FFFFFF; 6578 } 6579 6580 .ui.form .fields.success .field textarea, 6581 .ui.form .fields.success .field select, 6582 .ui.form .fields.success .field input:not([type]), 6583 .ui.form .fields.success .field input[type="date"], 6584 .ui.form .fields.success .field input[type="datetime-local"], 6585 .ui.form .fields.success .field input[type="email"], 6586 .ui.form .fields.success .field input[type="number"], 6587 .ui.form .fields.success .field input[type="password"], 6588 .ui.form .fields.success .field input[type="search"], 6589 .ui.form .fields.success .field input[type="tel"], 6590 .ui.form .fields.success .field input[type="time"], 6591 .ui.form .fields.success .field input[type="text"], 6592 .ui.form .fields.success .field input[type="file"], 6593 .ui.form .fields.success .field input[type="url"], 6594 .ui.form .field.success textarea, 6595 .ui.form .field.success select, 6596 .ui.form .field.success input:not([type]), 6597 .ui.form .field.success input[type="date"], 6598 .ui.form .field.success input[type="datetime-local"], 6599 .ui.form .field.success input[type="email"], 6600 .ui.form .field.success input[type="number"], 6601 .ui.form .field.success input[type="password"], 6602 .ui.form .field.success input[type="search"], 6603 .ui.form .field.success input[type="tel"], 6604 .ui.form .field.success input[type="time"], 6605 .ui.form .field.success input[type="text"], 6606 .ui.form .field.success input[type="file"], 6607 .ui.form .field.success input[type="url"] { 6608 color: #2C662D; 6609 background: #FCFFF5; 6610 border-color: #A3C293; 6611 border-radius: ''; 6612 box-shadow: none; 6613 } 6614 6615 .ui.form .field.success textarea:focus, 6616 .ui.form .field.success select:focus, 6617 .ui.form .field.success input:not([type]):focus, 6618 .ui.form .field.success input[type="date"]:focus, 6619 .ui.form .field.success input[type="datetime-local"]:focus, 6620 .ui.form .field.success input[type="email"]:focus, 6621 .ui.form .field.success input[type="number"]:focus, 6622 .ui.form .field.success input[type="password"]:focus, 6623 .ui.form .field.success input[type="search"]:focus, 6624 .ui.form .field.success input[type="tel"]:focus, 6625 .ui.form .field.success input[type="time"]:focus, 6626 .ui.form .field.success input[type="text"]:focus, 6627 .ui.form .field.success input[type="file"]:focus, 6628 .ui.form .field.success input[type="url"]:focus { 6629 background: #FCFFF5; 6630 border-color: #A3C293; 6631 color: #2C662D; 6632 box-shadow: none; 6633 } 6634 6635 /* Preserve Native Select Stylings */ 6636 6637 .ui.form .field.success select { 6638 -webkit-appearance: menulist-button; 6639 } 6640 6641 /*------------------ 6642 Input State 6643 --------------------*/ 6644 6645 /* Transparent */ 6646 6647 .ui.form .field.success .transparent.input input, 6648 .ui.form .field.success .transparent.input textarea, 6649 .ui.form .field.success input.transparent, 6650 .ui.form .field.success textarea.transparent { 6651 background-color: #FCFFF5 !important; 6652 color: #2C662D !important; 6653 } 6654 6655 /* Autofilled */ 6656 6657 .ui.form .success.success input:-webkit-autofill { 6658 box-shadow: 0 0 0 100px #F0FFF0 inset !important; 6659 border-color: #bee0b3 !important; 6660 } 6661 6662 /* Placeholder */ 6663 6664 .ui.form .success ::-webkit-input-placeholder { 6665 color: #8fcf90; 6666 } 6667 6668 .ui.form .success :-ms-input-placeholder { 6669 color: #8fcf90 !important; 6670 } 6671 6672 .ui.form .success ::-moz-placeholder { 6673 color: #8fcf90; 6674 } 6675 6676 .ui.form .success :focus::-webkit-input-placeholder { 6677 color: #6cbf6d; 6678 } 6679 6680 .ui.form .success :focus:-ms-input-placeholder { 6681 color: #6cbf6d !important; 6682 } 6683 6684 .ui.form .success :focus::-moz-placeholder { 6685 color: #6cbf6d; 6686 } 6687 6688 /*------------------ 6689 Dropdown State 6690 --------------------*/ 6691 6692 .ui.form .fields.success .field .ui.dropdown, 6693 .ui.form .fields.success .field .ui.dropdown .item, 6694 .ui.form .field.success .ui.dropdown, 6695 .ui.form .field.success .ui.dropdown .text, 6696 .ui.form .field.success .ui.dropdown .item { 6697 background: #FCFFF5; 6698 color: #2C662D; 6699 } 6700 6701 .ui.form .fields.success .field .ui.dropdown, 6702 .ui.form .field.success .ui.dropdown { 6703 border-color: #A3C293 !important; 6704 } 6705 6706 .ui.form .fields.success .field .ui.dropdown:hover, 6707 .ui.form .field.success .ui.dropdown:hover { 6708 border-color: #A3C293 !important; 6709 } 6710 6711 .ui.form .fields.success .field .ui.dropdown:hover .menu, 6712 .ui.form .field.success .ui.dropdown:hover .menu { 6713 border-color: #A3C293; 6714 } 6715 6716 .ui.form .fields.success .field .ui.multiple.selection.dropdown > .label, 6717 .ui.form .field.success .ui.multiple.selection.dropdown > .label { 6718 background-color: #cceacc; 6719 color: #2C662D; 6720 } 6721 6722 /* Hover */ 6723 6724 .ui.form .fields.success .field .ui.dropdown .menu .item:hover, 6725 .ui.form .field.success .ui.dropdown .menu .item:hover { 6726 background-color: #e9fbe9; 6727 } 6728 6729 /* Selected */ 6730 6731 .ui.form .fields.success .field .ui.dropdown .menu .selected.item, 6732 .ui.form .field.success .ui.dropdown .menu .selected.item { 6733 background-color: #e9fbe9; 6734 } 6735 6736 /* Active */ 6737 6738 .ui.form .fields.success .field .ui.dropdown .menu .active.item, 6739 .ui.form .field.success .ui.dropdown .menu .active.item { 6740 background-color: #dafdce !important; 6741 } 6742 6743 /*-------------------- 6744 Checkbox State 6745 ---------------------*/ 6746 6747 .ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) label, 6748 .ui.form .field.success .checkbox:not(.toggle):not(.slider) label, 6749 .ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) .box, 6750 .ui.form .field.success .checkbox:not(.toggle):not(.slider) .box { 6751 color: #2C662D; 6752 } 6753 6754 .ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) label:before, 6755 .ui.form .field.success .checkbox:not(.toggle):not(.slider) label:before, 6756 .ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) .box:before, 6757 .ui.form .field.success .checkbox:not(.toggle):not(.slider) .box:before { 6758 background: #FCFFF5; 6759 border-color: #A3C293; 6760 } 6761 6762 .ui.form .fields.success .field .checkbox label:after, 6763 .ui.form .field.success .checkbox label:after, 6764 .ui.form .fields.success .field .checkbox .box:after, 6765 .ui.form .field.success .checkbox .box:after { 6766 color: #2C662D; 6767 } 6768 6769 /* On Form */ 6770 6771 .ui.form.warning .warning.message:not(:empty) { 6772 display: block; 6773 } 6774 6775 .ui.form.warning .compact.warning.message:not(:empty) { 6776 display: inline-block; 6777 } 6778 6779 .ui.form.warning .icon.warning.message:not(:empty) { 6780 display: flex; 6781 } 6782 6783 /* On Field(s) */ 6784 6785 .ui.form .fields.warning .warning.message:not(:empty), 6786 .ui.form .field.warning .warning.message:not(:empty) { 6787 display: block; 6788 } 6789 6790 .ui.form .fields.warning .compact.warning.message:not(:empty), 6791 .ui.form .field.warning .compact.warning.message:not(:empty) { 6792 display: inline-block; 6793 } 6794 6795 .ui.form .fields.warning .icon.warning.message:not(:empty), 6796 .ui.form .field.warning .icon.warning.message:not(:empty) { 6797 display: flex; 6798 } 6799 6800 .ui.ui.form .fields.warning .field label, 6801 .ui.ui.form .field.warning label, 6802 .ui.ui.form .fields.warning .field .input, 6803 .ui.ui.form .field.warning .input { 6804 color: #573A08; 6805 } 6806 6807 .ui.form .fields.warning .field .corner.label, 6808 .ui.form .field.warning .corner.label { 6809 border-color: #573A08; 6810 color: #FFFFFF; 6811 } 6812 6813 .ui.form .fields.warning .field textarea, 6814 .ui.form .fields.warning .field select, 6815 .ui.form .fields.warning .field input:not([type]), 6816 .ui.form .fields.warning .field input[type="date"], 6817 .ui.form .fields.warning .field input[type="datetime-local"], 6818 .ui.form .fields.warning .field input[type="email"], 6819 .ui.form .fields.warning .field input[type="number"], 6820 .ui.form .fields.warning .field input[type="password"], 6821 .ui.form .fields.warning .field input[type="search"], 6822 .ui.form .fields.warning .field input[type="tel"], 6823 .ui.form .fields.warning .field input[type="time"], 6824 .ui.form .fields.warning .field input[type="text"], 6825 .ui.form .fields.warning .field input[type="file"], 6826 .ui.form .fields.warning .field input[type="url"], 6827 .ui.form .field.warning textarea, 6828 .ui.form .field.warning select, 6829 .ui.form .field.warning input:not([type]), 6830 .ui.form .field.warning input[type="date"], 6831 .ui.form .field.warning input[type="datetime-local"], 6832 .ui.form .field.warning input[type="email"], 6833 .ui.form .field.warning input[type="number"], 6834 .ui.form .field.warning input[type="password"], 6835 .ui.form .field.warning input[type="search"], 6836 .ui.form .field.warning input[type="tel"], 6837 .ui.form .field.warning input[type="time"], 6838 .ui.form .field.warning input[type="text"], 6839 .ui.form .field.warning input[type="file"], 6840 .ui.form .field.warning input[type="url"] { 6841 color: #573A08; 6842 background: #FFFAF3; 6843 border-color: #C9BA9B; 6844 border-radius: ''; 6845 box-shadow: none; 6846 } 6847 6848 .ui.form .field.warning textarea:focus, 6849 .ui.form .field.warning select:focus, 6850 .ui.form .field.warning input:not([type]):focus, 6851 .ui.form .field.warning input[type="date"]:focus, 6852 .ui.form .field.warning input[type="datetime-local"]:focus, 6853 .ui.form .field.warning input[type="email"]:focus, 6854 .ui.form .field.warning input[type="number"]:focus, 6855 .ui.form .field.warning input[type="password"]:focus, 6856 .ui.form .field.warning input[type="search"]:focus, 6857 .ui.form .field.warning input[type="tel"]:focus, 6858 .ui.form .field.warning input[type="time"]:focus, 6859 .ui.form .field.warning input[type="text"]:focus, 6860 .ui.form .field.warning input[type="file"]:focus, 6861 .ui.form .field.warning input[type="url"]:focus { 6862 background: #FFFAF3; 6863 border-color: #C9BA9B; 6864 color: #573A08; 6865 box-shadow: none; 6866 } 6867 6868 /* Preserve Native Select Stylings */ 6869 6870 .ui.form .field.warning select { 6871 -webkit-appearance: menulist-button; 6872 } 6873 6874 /*------------------ 6875 Input State 6876 --------------------*/ 6877 6878 /* Transparent */ 6879 6880 .ui.form .field.warning .transparent.input input, 6881 .ui.form .field.warning .transparent.input textarea, 6882 .ui.form .field.warning input.transparent, 6883 .ui.form .field.warning textarea.transparent { 6884 background-color: #FFFAF3 !important; 6885 color: #573A08 !important; 6886 } 6887 6888 /* Autofilled */ 6889 6890 .ui.form .warning.warning input:-webkit-autofill { 6891 box-shadow: 0 0 0 100px #FFFFe0 inset !important; 6892 border-color: #e0e0b3 !important; 6893 } 6894 6895 /* Placeholder */ 6896 6897 .ui.form .warning ::-webkit-input-placeholder { 6898 color: #edad3e; 6899 } 6900 6901 .ui.form .warning :-ms-input-placeholder { 6902 color: #edad3e !important; 6903 } 6904 6905 .ui.form .warning ::-moz-placeholder { 6906 color: #edad3e; 6907 } 6908 6909 .ui.form .warning :focus::-webkit-input-placeholder { 6910 color: #e39715; 6911 } 6912 6913 .ui.form .warning :focus:-ms-input-placeholder { 6914 color: #e39715 !important; 6915 } 6916 6917 .ui.form .warning :focus::-moz-placeholder { 6918 color: #e39715; 6919 } 6920 6921 /*------------------ 6922 Dropdown State 6923 --------------------*/ 6924 6925 .ui.form .fields.warning .field .ui.dropdown, 6926 .ui.form .fields.warning .field .ui.dropdown .item, 6927 .ui.form .field.warning .ui.dropdown, 6928 .ui.form .field.warning .ui.dropdown .text, 6929 .ui.form .field.warning .ui.dropdown .item { 6930 background: #FFFAF3; 6931 color: #573A08; 6932 } 6933 6934 .ui.form .fields.warning .field .ui.dropdown, 6935 .ui.form .field.warning .ui.dropdown { 6936 border-color: #C9BA9B !important; 6937 } 6938 6939 .ui.form .fields.warning .field .ui.dropdown:hover, 6940 .ui.form .field.warning .ui.dropdown:hover { 6941 border-color: #C9BA9B !important; 6942 } 6943 6944 .ui.form .fields.warning .field .ui.dropdown:hover .menu, 6945 .ui.form .field.warning .ui.dropdown:hover .menu { 6946 border-color: #C9BA9B; 6947 } 6948 6949 .ui.form .fields.warning .field .ui.multiple.selection.dropdown > .label, 6950 .ui.form .field.warning .ui.multiple.selection.dropdown > .label { 6951 background-color: #eaeacc; 6952 color: #573A08; 6953 } 6954 6955 /* Hover */ 6956 6957 .ui.form .fields.warning .field .ui.dropdown .menu .item:hover, 6958 .ui.form .field.warning .ui.dropdown .menu .item:hover { 6959 background-color: #fbfbe9; 6960 } 6961 6962 /* Selected */ 6963 6964 .ui.form .fields.warning .field .ui.dropdown .menu .selected.item, 6965 .ui.form .field.warning .ui.dropdown .menu .selected.item { 6966 background-color: #fbfbe9; 6967 } 6968 6969 /* Active */ 6970 6971 .ui.form .fields.warning .field .ui.dropdown .menu .active.item, 6972 .ui.form .field.warning .ui.dropdown .menu .active.item { 6973 background-color: #fdfdce !important; 6974 } 6975 6976 /*-------------------- 6977 Checkbox State 6978 ---------------------*/ 6979 6980 .ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) label, 6981 .ui.form .field.warning .checkbox:not(.toggle):not(.slider) label, 6982 .ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) .box, 6983 .ui.form .field.warning .checkbox:not(.toggle):not(.slider) .box { 6984 color: #573A08; 6985 } 6986 6987 .ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) label:before, 6988 .ui.form .field.warning .checkbox:not(.toggle):not(.slider) label:before, 6989 .ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) .box:before, 6990 .ui.form .field.warning .checkbox:not(.toggle):not(.slider) .box:before { 6991 background: #FFFAF3; 6992 border-color: #C9BA9B; 6993 } 6994 6995 .ui.form .fields.warning .field .checkbox label:after, 6996 .ui.form .field.warning .checkbox label:after, 6997 .ui.form .fields.warning .field .checkbox .box:after, 6998 .ui.form .field.warning .checkbox .box:after { 6999 color: #573A08; 7000 } 7001 7002 /*-------------------- 7003 Disabled 7004 ---------------------*/ 7005 7006 .ui.form .disabled.fields .field, 7007 .ui.form .disabled.field, 7008 .ui.form .field :disabled { 7009 pointer-events: none; 7010 opacity: var(--opacity-disabled); 7011 } 7012 7013 .ui.form .field.disabled > label, 7014 .ui.form .fields.disabled > label { 7015 opacity: var(--opacity-disabled); 7016 } 7017 7018 .ui.form .field.disabled :disabled { 7019 opacity: 1; 7020 } 7021 7022 /*-------------- 7023 Loading 7024 ---------------*/ 7025 7026 .ui.loading.form { 7027 position: relative; 7028 cursor: default; 7029 pointer-events: none; 7030 } 7031 7032 .ui.loading.form:before { 7033 position: absolute; 7034 content: ''; 7035 top: 0; 7036 left: 0; 7037 background: rgba(255, 255, 255, 0.8); 7038 width: 100%; 7039 height: 100%; 7040 z-index: 100; 7041 } 7042 7043 .ui.loading.form.segments:before { 7044 border-radius: 0.28571429rem; 7045 } 7046 7047 .ui.loading.form:after { 7048 position: absolute; 7049 content: ''; 7050 top: 50%; 7051 left: 50%; 7052 margin: -1.5em 0 0 -1.5em; 7053 width: 3em; 7054 height: 3em; 7055 -webkit-animation: loader 0.6s infinite linear; 7056 animation: loader 0.6s infinite linear; 7057 border: 0.2em solid #767676; 7058 border-radius: 500rem; 7059 box-shadow: 0 0 0 1px transparent; 7060 visibility: visible; 7061 z-index: 101; 7062 } 7063 7064 /******************************* 7065 Element Types 7066 *******************************/ 7067 7068 /*-------------------- 7069 Required Field 7070 ---------------------*/ 7071 7072 .ui.form .required.fields:not(.grouped) > .field > label:after, 7073 .ui.form .required.fields.grouped > label:after, 7074 .ui.form .required.field > label:after, 7075 .ui.form .required.fields:not(.grouped) > .field > .checkbox:after, 7076 .ui.form .required.field > .checkbox:after, 7077 .ui.form label.required:after { 7078 margin: -0.2em 0 0 0.2em; 7079 content: '*'; 7080 color: #DB2828; 7081 } 7082 7083 .ui.form .required.fields:not(.grouped) > .field > label:after, 7084 .ui.form .required.fields.grouped > label:after, 7085 .ui.form .required.field > label:after, 7086 .ui.form label.required:after { 7087 display: inline-block; 7088 vertical-align: top; 7089 } 7090 7091 .ui.form .required.fields:not(.grouped) > .field > .checkbox:after, 7092 .ui.form .required.field > .checkbox:after { 7093 position: absolute; 7094 top: 0; 7095 left: 100%; 7096 } 7097 7098 /******************************* 7099 Variations 7100 *******************************/ 7101 7102 /*-------------------- 7103 Field Groups 7104 ---------------------*/ 7105 7106 /* Grouped Vertically */ 7107 7108 .ui.form .grouped.fields { 7109 display: block; 7110 margin: 0 0 1em; 7111 } 7112 7113 .ui.form .grouped.fields:last-child { 7114 margin-bottom: 0; 7115 } 7116 7117 .ui.form .grouped.fields > label { 7118 margin: 0 0 0.28571429rem 0; 7119 color: rgba(0, 0, 0, 0.87); 7120 font-size: 0.92857143em; 7121 font-weight: 500; 7122 text-transform: none; 7123 } 7124 7125 .ui.form .grouped.fields .field, 7126 .ui.form .grouped.inline.fields .field { 7127 display: block; 7128 margin: 0.5em 0; 7129 padding: 0; 7130 } 7131 7132 .ui.form .grouped.inline.fields .ui.checkbox { 7133 margin-bottom: 0.4em; 7134 } 7135 7136 /*-------------------- 7137 Fields 7138 ---------------------*/ 7139 7140 /* Split fields */ 7141 7142 .ui.form .fields { 7143 display: flex; 7144 flex-direction: row; 7145 margin: 0 -0.5em 1em; 7146 } 7147 7148 .ui.form .fields > .field { 7149 flex: 0 1 auto; 7150 padding-left: 0.5em; 7151 padding-right: 0.5em; 7152 } 7153 7154 .ui.form .fields > .field:first-child { 7155 border-left: none; 7156 box-shadow: none; 7157 } 7158 7159 /* Other Combinations */ 7160 7161 .ui.form .two.fields > .fields, 7162 .ui.form .two.fields > .field { 7163 width: 50%; 7164 } 7165 7166 .ui.form .three.fields > .fields, 7167 .ui.form .three.fields > .field { 7168 width: 33.33333333%; 7169 } 7170 7171 .ui.form .four.fields > .fields, 7172 .ui.form .four.fields > .field { 7173 width: 25%; 7174 } 7175 7176 .ui.form .five.fields > .fields, 7177 .ui.form .five.fields > .field { 7178 width: 20%; 7179 } 7180 7181 .ui.form .six.fields > .fields, 7182 .ui.form .six.fields > .field { 7183 width: 16.66666667%; 7184 } 7185 7186 .ui.form .seven.fields > .fields, 7187 .ui.form .seven.fields > .field { 7188 width: 14.28571429%; 7189 } 7190 7191 .ui.form .eight.fields > .fields, 7192 .ui.form .eight.fields > .field { 7193 width: 12.5%; 7194 } 7195 7196 .ui.form .nine.fields > .fields, 7197 .ui.form .nine.fields > .field { 7198 width: 11.11111111%; 7199 } 7200 7201 .ui.form .ten.fields > .fields, 7202 .ui.form .ten.fields > .field { 7203 width: 10%; 7204 } 7205 7206 /* Swap to full width on mobile */ 7207 7208 @media only screen and (max-width: 767.98px) { 7209 .ui.form .fields { 7210 flex-wrap: wrap; 7211 margin-bottom: 0; 7212 } 7213 7214 .ui.form:not(.unstackable) .fields:not(.unstackable) > .fields, 7215 .ui.form:not(.unstackable) .fields:not(.unstackable) > .field { 7216 width: 100%; 7217 margin: 0 0 1em; 7218 } 7219 } 7220 7221 /* Sizing Combinations */ 7222 7223 .ui.form .fields .wide.field { 7224 width: 6.25%; 7225 padding-left: 0.5em; 7226 padding-right: 0.5em; 7227 } 7228 7229 .ui.form .one.wide.field { 7230 width: 6.25%; 7231 } 7232 7233 .ui.form .two.wide.field { 7234 width: 12.5%; 7235 } 7236 7237 .ui.form .three.wide.field { 7238 width: 18.75%; 7239 } 7240 7241 .ui.form .four.wide.field { 7242 width: 25%; 7243 } 7244 7245 .ui.form .five.wide.field { 7246 width: 31.25%; 7247 } 7248 7249 .ui.form .six.wide.field { 7250 width: 37.5%; 7251 } 7252 7253 .ui.form .seven.wide.field { 7254 width: 43.75%; 7255 } 7256 7257 .ui.form .eight.wide.field { 7258 width: 50%; 7259 } 7260 7261 .ui.form .nine.wide.field { 7262 width: 56.25%; 7263 } 7264 7265 .ui.form .ten.wide.field { 7266 width: 62.5%; 7267 } 7268 7269 .ui.form .eleven.wide.field { 7270 width: 68.75%; 7271 } 7272 7273 .ui.form .twelve.wide.field { 7274 width: 75%; 7275 } 7276 7277 .ui.form .thirteen.wide.field { 7278 width: 81.25%; 7279 } 7280 7281 .ui.form .fourteen.wide.field { 7282 width: 87.5%; 7283 } 7284 7285 .ui.form .fifteen.wide.field { 7286 width: 93.75%; 7287 } 7288 7289 .ui.form .sixteen.wide.field { 7290 width: 100%; 7291 } 7292 7293 /*-------------------- 7294 Equal Width 7295 ---------------------*/ 7296 7297 .ui[class*="equal width"].form .fields > .field, 7298 .ui.form [class*="equal width"].fields > .field { 7299 width: 100%; 7300 flex: 1 1 auto; 7301 } 7302 7303 /*-------------------- 7304 Inline Fields 7305 ---------------------*/ 7306 7307 .ui.form .inline.fields { 7308 margin: 0 0 1em; 7309 align-items: center; 7310 } 7311 7312 .ui.form .inline.fields .field { 7313 margin: 0; 7314 padding: 0 1em 0 0; 7315 } 7316 7317 /* Inline Label */ 7318 7319 .ui.form .inline.fields > label, 7320 .ui.form .inline.fields .field > label, 7321 .ui.form .inline.fields .field > p, 7322 .ui.form .inline.field > label, 7323 .ui.form .inline.field > p { 7324 display: inline-block; 7325 width: auto; 7326 margin-top: 0; 7327 margin-bottom: 0; 7328 vertical-align: baseline; 7329 font-size: 0.92857143em; 7330 font-weight: 500; 7331 color: rgba(0, 0, 0, 0.87); 7332 text-transform: none; 7333 } 7334 7335 /* Grouped Inline Label */ 7336 7337 .ui.form .inline.fields > label { 7338 margin: 0.035714em 1em 0 0; 7339 } 7340 7341 /* Inline Input */ 7342 7343 .ui.form .inline.fields .field > input, 7344 .ui.form .inline.fields .field > select, 7345 .ui.form .inline.field > input, 7346 .ui.form .inline.field > select { 7347 display: inline-block; 7348 width: auto; 7349 margin-top: 0; 7350 margin-bottom: 0; 7351 vertical-align: middle; 7352 font-size: 1em; 7353 } 7354 7355 .ui.form .inline.fields .field .calendar:not(.popup), 7356 .ui.form .inline.field .calendar:not(.popup) { 7357 display: inline-block; 7358 } 7359 7360 .ui.form .inline.fields .field .calendar:not(.popup) > .input > input, 7361 .ui.form .inline.field .calendar:not(.popup) > .input > input { 7362 width: 13.11em; 7363 } 7364 7365 /* Label */ 7366 7367 .ui.form .inline.fields .field > :first-child, 7368 .ui.form .inline.field > :first-child { 7369 margin: 0 0.85714286em 0 0; 7370 } 7371 7372 .ui.form .inline.fields .field > :only-child, 7373 .ui.form .inline.field > :only-child { 7374 margin: 0; 7375 } 7376 7377 /* Wide */ 7378 7379 .ui.form .inline.fields .wide.field { 7380 display: flex; 7381 align-items: center; 7382 } 7383 7384 .ui.form .inline.fields .wide.field > input, 7385 .ui.form .inline.fields .wide.field > select { 7386 width: 100%; 7387 } 7388 7389 /*-------------------- 7390 Sizes 7391 ---------------------*/ 7392 7393 .ui.form, 7394 .ui.form .field .dropdown, 7395 .ui.form .field .dropdown .menu > .item { 7396 font-size: 1rem; 7397 } 7398 7399 .ui.mini.form, 7400 .ui.mini.form .field .dropdown, 7401 .ui.mini.form .field .dropdown .menu > .item { 7402 font-size: 0.78571429rem; 7403 } 7404 7405 .ui.tiny.form, 7406 .ui.tiny.form .field .dropdown, 7407 .ui.tiny.form .field .dropdown .menu > .item { 7408 font-size: 0.85714286rem; 7409 } 7410 7411 .ui.small.form, 7412 .ui.small.form .field .dropdown, 7413 .ui.small.form .field .dropdown .menu > .item { 7414 font-size: 0.92857143rem; 7415 } 7416 7417 .ui.large.form, 7418 .ui.large.form .field .dropdown, 7419 .ui.large.form .field .dropdown .menu > .item { 7420 font-size: 1.14285714rem; 7421 } 7422 7423 .ui.big.form, 7424 .ui.big.form .field .dropdown, 7425 .ui.big.form .field .dropdown .menu > .item { 7426 font-size: 1.28571429rem; 7427 } 7428 7429 .ui.huge.form, 7430 .ui.huge.form .field .dropdown, 7431 .ui.huge.form .field .dropdown .menu > .item { 7432 font-size: 1.42857143rem; 7433 } 7434 7435 .ui.massive.form, 7436 .ui.massive.form .field .dropdown, 7437 .ui.massive.form .field .dropdown .menu > .item { 7438 font-size: 1.71428571rem; 7439 } 7440 7441 /******************************* 7442 Theme Overrides 7443 *******************************/ 7444 7445 /******************************* 7446 Site Overrides 7447 *******************************/ 7448 /*! 7449 * # Fomantic-UI - Grid 7450 * http://github.com/fomantic/Fomantic-UI/ 7451 * 7452 * 7453 * Released under the MIT license 7454 * http://opensource.org/licenses/MIT 7455 * 7456 */ 7457 7458 /******************************* 7459 Standard 7460 *******************************/ 7461 7462 .ui.grid { 7463 display: flex; 7464 flex-direction: row; 7465 flex-wrap: wrap; 7466 align-items: stretch; 7467 padding: 0; 7468 } 7469 7470 /*---------------------- 7471 Remove Gutters 7472 -----------------------*/ 7473 7474 .ui.grid { 7475 margin-top: -1rem; 7476 margin-bottom: -1rem; 7477 margin-left: -1rem; 7478 margin-right: -1rem; 7479 } 7480 7481 .ui.relaxed.grid { 7482 margin-left: -1.5rem; 7483 margin-right: -1.5rem; 7484 } 7485 7486 .ui[class*="very relaxed"].grid { 7487 margin-left: -2.5rem; 7488 margin-right: -2.5rem; 7489 } 7490 7491 /* Preserve Rows Spacing on Consecutive Grids */ 7492 7493 .ui.grid + .grid { 7494 margin-top: 1rem; 7495 } 7496 7497 /*------------------- 7498 Columns 7499 --------------------*/ 7500 7501 /* Standard 16 column */ 7502 7503 .ui.grid > .column:not(.row), 7504 .ui.grid > .row > .column { 7505 position: relative; 7506 display: inline-block; 7507 width: 6.25%; 7508 padding-left: 1rem; 7509 padding-right: 1rem; 7510 vertical-align: top; 7511 } 7512 7513 .ui.grid > * { 7514 padding-left: 1rem; 7515 padding-right: 1rem; 7516 } 7517 7518 /*------------------- 7519 Rows 7520 --------------------*/ 7521 7522 .ui.grid > .row { 7523 position: relative; 7524 display: flex; 7525 flex-direction: row; 7526 flex-wrap: wrap; 7527 justify-content: inherit; 7528 align-items: stretch; 7529 width: 100% !important; 7530 padding: 0; 7531 padding-top: 1rem; 7532 padding-bottom: 1rem; 7533 } 7534 7535 /*------------------- 7536 Columns 7537 --------------------*/ 7538 7539 /* Vertical padding when no rows */ 7540 7541 .ui.grid > .column:not(.row) { 7542 padding-top: 1rem; 7543 padding-bottom: 1rem; 7544 } 7545 7546 .ui.grid > .row > .column { 7547 margin-top: 0; 7548 margin-bottom: 0; 7549 } 7550 7551 /*------------------- 7552 Content 7553 --------------------*/ 7554 7555 .ui.grid > .row > img, 7556 .ui.grid > .row > .column > img { 7557 max-width: 100%; 7558 } 7559 7560 /*------------------- 7561 Loose Coupling 7562 --------------------*/ 7563 7564 /* Collapse Margin on Consecutive Grid */ 7565 7566 .ui.grid > .ui.grid:first-child { 7567 margin-top: 0; 7568 } 7569 7570 .ui.grid > .ui.grid:last-child { 7571 margin-bottom: 0; 7572 } 7573 7574 /* Segment inside Aligned Grid */ 7575 7576 .ui.grid .aligned.row > .column > .segment:not(.compact):not(.attached), 7577 .ui.aligned.grid .column > .segment:not(.compact):not(.attached) { 7578 width: 100%; 7579 } 7580 7581 /* Align Dividers with Gutter */ 7582 7583 .ui.grid .row + .ui.divider { 7584 flex-grow: 1; 7585 margin: 1rem 1rem; 7586 } 7587 7588 .ui.grid .column + .ui.vertical.divider { 7589 height: calc(50% - 1rem); 7590 } 7591 7592 /* Remove Border on Last Horizontal Segment */ 7593 7594 .ui.grid > .row > .column:last-child > .horizontal.segment, 7595 .ui.grid > .column:last-child > .horizontal.segment { 7596 box-shadow: none; 7597 } 7598 7599 /******************************* 7600 Variations 7601 *******************************/ 7602 7603 /*----------------------- 7604 Page Grid 7605 -------------------------*/ 7606 7607 @media only screen and (max-width: 767.98px) { 7608 .ui.page.grid { 7609 width: auto; 7610 padding-left: 0; 7611 padding-right: 0; 7612 margin-left: 0; 7613 margin-right: 0; 7614 } 7615 } 7616 7617 @media only screen and (min-width: 768px) and (max-width: 991.98px) { 7618 .ui.page.grid { 7619 width: auto; 7620 margin-left: 0; 7621 margin-right: 0; 7622 padding-left: 2em; 7623 padding-right: 2em; 7624 } 7625 } 7626 7627 @media only screen and (min-width: 992px) and (max-width: 1199.98px) { 7628 .ui.page.grid { 7629 width: auto; 7630 margin-left: 0; 7631 margin-right: 0; 7632 padding-left: 3%; 7633 padding-right: 3%; 7634 } 7635 } 7636 7637 @media only screen and (min-width: 1200px) and (max-width: 1919.98px) { 7638 .ui.page.grid { 7639 width: auto; 7640 margin-left: 0; 7641 margin-right: 0; 7642 padding-left: 15%; 7643 padding-right: 15%; 7644 } 7645 } 7646 7647 @media only screen and (min-width: 1920px) { 7648 .ui.page.grid { 7649 width: auto; 7650 margin-left: 0; 7651 margin-right: 0; 7652 padding-left: 23%; 7653 padding-right: 23%; 7654 } 7655 } 7656 7657 /*------------------- 7658 Column Count 7659 --------------------*/ 7660 7661 /* Assume full width with one column */ 7662 7663 .ui.grid > .column:only-child, 7664 .ui.grid > .row > .column:only-child { 7665 width: 100%; 7666 } 7667 7668 /* Grid Based */ 7669 7670 .ui[class*="one column"].grid > .row > .column, 7671 .ui[class*="one column"].grid > .column:not(.row) { 7672 width: 100%; 7673 } 7674 7675 .ui[class*="two column"].grid > .row > .column, 7676 .ui[class*="two column"].grid > .column:not(.row) { 7677 width: 50%; 7678 } 7679 7680 .ui[class*="three column"].grid > .row > .column, 7681 .ui[class*="three column"].grid > .column:not(.row) { 7682 width: 33.33333333%; 7683 } 7684 7685 .ui[class*="four column"].grid > .row > .column, 7686 .ui[class*="four column"].grid > .column:not(.row) { 7687 width: 25%; 7688 } 7689 7690 .ui[class*="five column"].grid > .row > .column, 7691 .ui[class*="five column"].grid > .column:not(.row) { 7692 width: 20%; 7693 } 7694 7695 .ui[class*="six column"].grid > .row > .column, 7696 .ui[class*="six column"].grid > .column:not(.row) { 7697 width: 16.66666667%; 7698 } 7699 7700 .ui[class*="seven column"].grid > .row > .column, 7701 .ui[class*="seven column"].grid > .column:not(.row) { 7702 width: 14.28571429%; 7703 } 7704 7705 .ui[class*="eight column"].grid > .row > .column, 7706 .ui[class*="eight column"].grid > .column:not(.row) { 7707 width: 12.5%; 7708 } 7709 7710 .ui[class*="nine column"].grid > .row > .column, 7711 .ui[class*="nine column"].grid > .column:not(.row) { 7712 width: 11.11111111%; 7713 } 7714 7715 .ui[class*="ten column"].grid > .row > .column, 7716 .ui[class*="ten column"].grid > .column:not(.row) { 7717 width: 10%; 7718 } 7719 7720 .ui[class*="eleven column"].grid > .row > .column, 7721 .ui[class*="eleven column"].grid > .column:not(.row) { 7722 width: 9.09090909%; 7723 } 7724 7725 .ui[class*="twelve column"].grid > .row > .column, 7726 .ui[class*="twelve column"].grid > .column:not(.row) { 7727 width: 8.33333333%; 7728 } 7729 7730 .ui[class*="thirteen column"].grid > .row > .column, 7731 .ui[class*="thirteen column"].grid > .column:not(.row) { 7732 width: 7.69230769%; 7733 } 7734 7735 .ui[class*="fourteen column"].grid > .row > .column, 7736 .ui[class*="fourteen column"].grid > .column:not(.row) { 7737 width: 7.14285714%; 7738 } 7739 7740 .ui[class*="fifteen column"].grid > .row > .column, 7741 .ui[class*="fifteen column"].grid > .column:not(.row) { 7742 width: 6.66666667%; 7743 } 7744 7745 .ui[class*="sixteen column"].grid > .row > .column, 7746 .ui[class*="sixteen column"].grid > .column:not(.row) { 7747 width: 6.25%; 7748 } 7749 7750 /* Row Based Overrides */ 7751 7752 .ui.grid > [class*="one column"].row > .column { 7753 width: 100% !important; 7754 } 7755 7756 .ui.grid > [class*="two column"].row > .column { 7757 width: 50% !important; 7758 } 7759 7760 .ui.grid > [class*="three column"].row > .column { 7761 width: 33.33333333% !important; 7762 } 7763 7764 .ui.grid > [class*="four column"].row > .column { 7765 width: 25% !important; 7766 } 7767 7768 .ui.grid > [class*="five column"].row > .column { 7769 width: 20% !important; 7770 } 7771 7772 .ui.grid > [class*="six column"].row > .column { 7773 width: 16.66666667% !important; 7774 } 7775 7776 .ui.grid > [class*="seven column"].row > .column { 7777 width: 14.28571429% !important; 7778 } 7779 7780 .ui.grid > [class*="eight column"].row > .column { 7781 width: 12.5% !important; 7782 } 7783 7784 .ui.grid > [class*="nine column"].row > .column { 7785 width: 11.11111111% !important; 7786 } 7787 7788 .ui.grid > [class*="ten column"].row > .column { 7789 width: 10% !important; 7790 } 7791 7792 .ui.grid > [class*="eleven column"].row > .column { 7793 width: 9.09090909% !important; 7794 } 7795 7796 .ui.grid > [class*="twelve column"].row > .column { 7797 width: 8.33333333% !important; 7798 } 7799 7800 .ui.grid > [class*="thirteen column"].row > .column { 7801 width: 7.69230769% !important; 7802 } 7803 7804 .ui.grid > [class*="fourteen column"].row > .column { 7805 width: 7.14285714% !important; 7806 } 7807 7808 .ui.grid > [class*="fifteen column"].row > .column { 7809 width: 6.66666667% !important; 7810 } 7811 7812 .ui.grid > [class*="sixteen column"].row > .column { 7813 width: 6.25% !important; 7814 } 7815 7816 /* Celled Page */ 7817 7818 .ui.celled.page.grid { 7819 box-shadow: none; 7820 } 7821 7822 /*------------------- 7823 Column Width 7824 --------------------*/ 7825 7826 /* Sizing Combinations */ 7827 7828 .ui.grid > .row > [class*="one wide"].column, 7829 .ui.grid > .column.row > [class*="one wide"].column, 7830 .ui.grid > [class*="one wide"].column, 7831 .ui.column.grid > [class*="one wide"].column { 7832 width: 6.25% !important; 7833 } 7834 7835 .ui.grid > .row > [class*="two wide"].column, 7836 .ui.grid > .column.row > [class*="two wide"].column, 7837 .ui.grid > [class*="two wide"].column, 7838 .ui.column.grid > [class*="two wide"].column { 7839 width: 12.5% !important; 7840 } 7841 7842 .ui.grid > .row > [class*="three wide"].column, 7843 .ui.grid > .column.row > [class*="three wide"].column, 7844 .ui.grid > [class*="three wide"].column, 7845 .ui.column.grid > [class*="three wide"].column { 7846 width: 18.75% !important; 7847 } 7848 7849 .ui.grid > .row > [class*="four wide"].column, 7850 .ui.grid > .column.row > [class*="four wide"].column, 7851 .ui.grid > [class*="four wide"].column, 7852 .ui.column.grid > [class*="four wide"].column { 7853 width: 25% !important; 7854 } 7855 7856 .ui.grid > .row > [class*="five wide"].column, 7857 .ui.grid > .column.row > [class*="five wide"].column, 7858 .ui.grid > [class*="five wide"].column, 7859 .ui.column.grid > [class*="five wide"].column { 7860 width: 31.25% !important; 7861 } 7862 7863 .ui.grid > .row > [class*="six wide"].column, 7864 .ui.grid > .column.row > [class*="six wide"].column, 7865 .ui.grid > [class*="six wide"].column, 7866 .ui.column.grid > [class*="six wide"].column { 7867 width: 37.5% !important; 7868 } 7869 7870 .ui.grid > .row > [class*="seven wide"].column, 7871 .ui.grid > .column.row > [class*="seven wide"].column, 7872 .ui.grid > [class*="seven wide"].column, 7873 .ui.column.grid > [class*="seven wide"].column { 7874 width: 43.75% !important; 7875 } 7876 7877 .ui.grid > .row > [class*="eight wide"].column, 7878 .ui.grid > .column.row > [class*="eight wide"].column, 7879 .ui.grid > [class*="eight wide"].column, 7880 .ui.column.grid > [class*="eight wide"].column { 7881 width: 50% !important; 7882 } 7883 7884 .ui.grid > .row > [class*="nine wide"].column, 7885 .ui.grid > .column.row > [class*="nine wide"].column, 7886 .ui.grid > [class*="nine wide"].column, 7887 .ui.column.grid > [class*="nine wide"].column { 7888 width: 56.25% !important; 7889 } 7890 7891 .ui.grid > .row > [class*="ten wide"].column, 7892 .ui.grid > .column.row > [class*="ten wide"].column, 7893 .ui.grid > [class*="ten wide"].column, 7894 .ui.column.grid > [class*="ten wide"].column { 7895 width: 62.5% !important; 7896 } 7897 7898 .ui.grid > .row > [class*="eleven wide"].column, 7899 .ui.grid > .column.row > [class*="eleven wide"].column, 7900 .ui.grid > [class*="eleven wide"].column, 7901 .ui.column.grid > [class*="eleven wide"].column { 7902 width: 68.75% !important; 7903 } 7904 7905 .ui.grid > .row > [class*="twelve wide"].column, 7906 .ui.grid > .column.row > [class*="twelve wide"].column, 7907 .ui.grid > [class*="twelve wide"].column, 7908 .ui.column.grid > [class*="twelve wide"].column { 7909 width: 75% !important; 7910 } 7911 7912 .ui.grid > .row > [class*="thirteen wide"].column, 7913 .ui.grid > .column.row > [class*="thirteen wide"].column, 7914 .ui.grid > [class*="thirteen wide"].column, 7915 .ui.column.grid > [class*="thirteen wide"].column { 7916 width: 81.25% !important; 7917 } 7918 7919 .ui.grid > .row > [class*="fourteen wide"].column, 7920 .ui.grid > .column.row > [class*="fourteen wide"].column, 7921 .ui.grid > [class*="fourteen wide"].column, 7922 .ui.column.grid > [class*="fourteen wide"].column { 7923 width: 87.5% !important; 7924 } 7925 7926 .ui.grid > .row > [class*="fifteen wide"].column, 7927 .ui.grid > .column.row > [class*="fifteen wide"].column, 7928 .ui.grid > [class*="fifteen wide"].column, 7929 .ui.column.grid > [class*="fifteen wide"].column { 7930 width: 93.75% !important; 7931 } 7932 7933 .ui.grid > .row > [class*="sixteen wide"].column, 7934 .ui.grid > .column.row > [class*="sixteen wide"].column, 7935 .ui.grid > [class*="sixteen wide"].column, 7936 .ui.column.grid > [class*="sixteen wide"].column { 7937 width: 100% !important; 7938 } 7939 7940 /*---------------------- 7941 Width per Device 7942 -----------------------*/ 7943 7944 /* Mobile Sizing Combinations */ 7945 7946 @media only screen and (min-width: 320px) and (max-width: 767.98px) { 7947 .ui.grid > .row > [class*="one wide mobile"].column, 7948 .ui.grid > .column.row > [class*="one wide mobile"].column, 7949 .ui.grid > [class*="one wide mobile"].column, 7950 .ui.column.grid > [class*="one wide mobile"].column { 7951 width: 6.25% !important; 7952 } 7953 7954 .ui.grid > .row > [class*="two wide mobile"].column, 7955 .ui.grid > .column.row > [class*="two wide mobile"].column, 7956 .ui.grid > [class*="two wide mobile"].column, 7957 .ui.column.grid > [class*="two wide mobile"].column { 7958 width: 12.5% !important; 7959 } 7960 7961 .ui.grid > .row > [class*="three wide mobile"].column, 7962 .ui.grid > .column.row > [class*="three wide mobile"].column, 7963 .ui.grid > [class*="three wide mobile"].column, 7964 .ui.column.grid > [class*="three wide mobile"].column { 7965 width: 18.75% !important; 7966 } 7967 7968 .ui.grid > .row > [class*="four wide mobile"].column, 7969 .ui.grid > .column.row > [class*="four wide mobile"].column, 7970 .ui.grid > [class*="four wide mobile"].column, 7971 .ui.column.grid > [class*="four wide mobile"].column { 7972 width: 25% !important; 7973 } 7974 7975 .ui.grid > .row > [class*="five wide mobile"].column, 7976 .ui.grid > .column.row > [class*="five wide mobile"].column, 7977 .ui.grid > [class*="five wide mobile"].column, 7978 .ui.column.grid > [class*="five wide mobile"].column { 7979 width: 31.25% !important; 7980 } 7981 7982 .ui.grid > .row > [class*="six wide mobile"].column, 7983 .ui.grid > .column.row > [class*="six wide mobile"].column, 7984 .ui.grid > [class*="six wide mobile"].column, 7985 .ui.column.grid > [class*="six wide mobile"].column { 7986 width: 37.5% !important; 7987 } 7988 7989 .ui.grid > .row > [class*="seven wide mobile"].column, 7990 .ui.grid > .column.row > [class*="seven wide mobile"].column, 7991 .ui.grid > [class*="seven wide mobile"].column, 7992 .ui.column.grid > [class*="seven wide mobile"].column { 7993 width: 43.75% !important; 7994 } 7995 7996 .ui.grid > .row > [class*="eight wide mobile"].column, 7997 .ui.grid > .column.row > [class*="eight wide mobile"].column, 7998 .ui.grid > [class*="eight wide mobile"].column, 7999 .ui.column.grid > [class*="eight wide mobile"].column { 8000 width: 50% !important; 8001 } 8002 8003 .ui.grid > .row > [class*="nine wide mobile"].column, 8004 .ui.grid > .column.row > [class*="nine wide mobile"].column, 8005 .ui.grid > [class*="nine wide mobile"].column, 8006 .ui.column.grid > [class*="nine wide mobile"].column { 8007 width: 56.25% !important; 8008 } 8009 8010 .ui.grid > .row > [class*="ten wide mobile"].column, 8011 .ui.grid > .column.row > [class*="ten wide mobile"].column, 8012 .ui.grid > [class*="ten wide mobile"].column, 8013 .ui.column.grid > [class*="ten wide mobile"].column { 8014 width: 62.5% !important; 8015 } 8016 8017 .ui.grid > .row > [class*="eleven wide mobile"].column, 8018 .ui.grid > .column.row > [class*="eleven wide mobile"].column, 8019 .ui.grid > [class*="eleven wide mobile"].column, 8020 .ui.column.grid > [class*="eleven wide mobile"].column { 8021 width: 68.75% !important; 8022 } 8023 8024 .ui.grid > .row > [class*="twelve wide mobile"].column, 8025 .ui.grid > .column.row > [class*="twelve wide mobile"].column, 8026 .ui.grid > [class*="twelve wide mobile"].column, 8027 .ui.column.grid > [class*="twelve wide mobile"].column { 8028 width: 75% !important; 8029 } 8030 8031 .ui.grid > .row > [class*="thirteen wide mobile"].column, 8032 .ui.grid > .column.row > [class*="thirteen wide mobile"].column, 8033 .ui.grid > [class*="thirteen wide mobile"].column, 8034 .ui.column.grid > [class*="thirteen wide mobile"].column { 8035 width: 81.25% !important; 8036 } 8037 8038 .ui.grid > .row > [class*="fourteen wide mobile"].column, 8039 .ui.grid > .column.row > [class*="fourteen wide mobile"].column, 8040 .ui.grid > [class*="fourteen wide mobile"].column, 8041 .ui.column.grid > [class*="fourteen wide mobile"].column { 8042 width: 87.5% !important; 8043 } 8044 8045 .ui.grid > .row > [class*="fifteen wide mobile"].column, 8046 .ui.grid > .column.row > [class*="fifteen wide mobile"].column, 8047 .ui.grid > [class*="fifteen wide mobile"].column, 8048 .ui.column.grid > [class*="fifteen wide mobile"].column { 8049 width: 93.75% !important; 8050 } 8051 8052 .ui.grid > .row > [class*="sixteen wide mobile"].column, 8053 .ui.grid > .column.row > [class*="sixteen wide mobile"].column, 8054 .ui.grid > [class*="sixteen wide mobile"].column, 8055 .ui.column.grid > [class*="sixteen wide mobile"].column { 8056 width: 100% !important; 8057 } 8058 } 8059 8060 /* Tablet Sizing Combinations */ 8061 8062 @media only screen and (min-width: 768px) and (max-width: 991.98px) { 8063 .ui.grid > .row > [class*="one wide tablet"].column, 8064 .ui.grid > .column.row > [class*="one wide tablet"].column, 8065 .ui.grid > [class*="one wide tablet"].column, 8066 .ui.column.grid > [class*="one wide tablet"].column { 8067 width: 6.25% !important; 8068 } 8069 8070 .ui.grid > .row > [class*="two wide tablet"].column, 8071 .ui.grid > .column.row > [class*="two wide tablet"].column, 8072 .ui.grid > [class*="two wide tablet"].column, 8073 .ui.column.grid > [class*="two wide tablet"].column { 8074 width: 12.5% !important; 8075 } 8076 8077 .ui.grid > .row > [class*="three wide tablet"].column, 8078 .ui.grid > .column.row > [class*="three wide tablet"].column, 8079 .ui.grid > [class*="three wide tablet"].column, 8080 .ui.column.grid > [class*="three wide tablet"].column { 8081 width: 18.75% !important; 8082 } 8083 8084 .ui.grid > .row > [class*="four wide tablet"].column, 8085 .ui.grid > .column.row > [class*="four wide tablet"].column, 8086 .ui.grid > [class*="four wide tablet"].column, 8087 .ui.column.grid > [class*="four wide tablet"].column { 8088 width: 25% !important; 8089 } 8090 8091 .ui.grid > .row > [class*="five wide tablet"].column, 8092 .ui.grid > .column.row > [class*="five wide tablet"].column, 8093 .ui.grid > [class*="five wide tablet"].column, 8094 .ui.column.grid > [class*="five wide tablet"].column { 8095 width: 31.25% !important; 8096 } 8097 8098 .ui.grid > .row > [class*="six wide tablet"].column, 8099 .ui.grid > .column.row > [class*="six wide tablet"].column, 8100 .ui.grid > [class*="six wide tablet"].column, 8101 .ui.column.grid > [class*="six wide tablet"].column { 8102 width: 37.5% !important; 8103 } 8104 8105 .ui.grid > .row > [class*="seven wide tablet"].column, 8106 .ui.grid > .column.row > [class*="seven wide tablet"].column, 8107 .ui.grid > [class*="seven wide tablet"].column, 8108 .ui.column.grid > [class*="seven wide tablet"].column { 8109 width: 43.75% !important; 8110 } 8111 8112 .ui.grid > .row > [class*="eight wide tablet"].column, 8113 .ui.grid > .column.row > [class*="eight wide tablet"].column, 8114 .ui.grid > [class*="eight wide tablet"].column, 8115 .ui.column.grid > [class*="eight wide tablet"].column { 8116 width: 50% !important; 8117 } 8118 8119 .ui.grid > .row > [class*="nine wide tablet"].column, 8120 .ui.grid > .column.row > [class*="nine wide tablet"].column, 8121 .ui.grid > [class*="nine wide tablet"].column, 8122 .ui.column.grid > [class*="nine wide tablet"].column { 8123 width: 56.25% !important; 8124 } 8125 8126 .ui.grid > .row > [class*="ten wide tablet"].column, 8127 .ui.grid > .column.row > [class*="ten wide tablet"].column, 8128 .ui.grid > [class*="ten wide tablet"].column, 8129 .ui.column.grid > [class*="ten wide tablet"].column { 8130 width: 62.5% !important; 8131 } 8132 8133 .ui.grid > .row > [class*="eleven wide tablet"].column, 8134 .ui.grid > .column.row > [class*="eleven wide tablet"].column, 8135 .ui.grid > [class*="eleven wide tablet"].column, 8136 .ui.column.grid > [class*="eleven wide tablet"].column { 8137 width: 68.75% !important; 8138 } 8139 8140 .ui.grid > .row > [class*="twelve wide tablet"].column, 8141 .ui.grid > .column.row > [class*="twelve wide tablet"].column, 8142 .ui.grid > [class*="twelve wide tablet"].column, 8143 .ui.column.grid > [class*="twelve wide tablet"].column { 8144 width: 75% !important; 8145 } 8146 8147 .ui.grid > .row > [class*="thirteen wide tablet"].column, 8148 .ui.grid > .column.row > [class*="thirteen wide tablet"].column, 8149 .ui.grid > [class*="thirteen wide tablet"].column, 8150 .ui.column.grid > [class*="thirteen wide tablet"].column { 8151 width: 81.25% !important; 8152 } 8153 8154 .ui.grid > .row > [class*="fourteen wide tablet"].column, 8155 .ui.grid > .column.row > [class*="fourteen wide tablet"].column, 8156 .ui.grid > [class*="fourteen wide tablet"].column, 8157 .ui.column.grid > [class*="fourteen wide tablet"].column { 8158 width: 87.5% !important; 8159 } 8160 8161 .ui.grid > .row > [class*="fifteen wide tablet"].column, 8162 .ui.grid > .column.row > [class*="fifteen wide tablet"].column, 8163 .ui.grid > [class*="fifteen wide tablet"].column, 8164 .ui.column.grid > [class*="fifteen wide tablet"].column { 8165 width: 93.75% !important; 8166 } 8167 8168 .ui.grid > .row > [class*="sixteen wide tablet"].column, 8169 .ui.grid > .column.row > [class*="sixteen wide tablet"].column, 8170 .ui.grid > [class*="sixteen wide tablet"].column, 8171 .ui.column.grid > [class*="sixteen wide tablet"].column { 8172 width: 100% !important; 8173 } 8174 } 8175 8176 /* Computer/Desktop Sizing Combinations */ 8177 8178 @media only screen and (min-width: 992px) { 8179 .ui.grid > .row > [class*="one wide computer"].column, 8180 .ui.grid > .column.row > [class*="one wide computer"].column, 8181 .ui.grid > [class*="one wide computer"].column, 8182 .ui.column.grid > [class*="one wide computer"].column { 8183 width: 6.25% !important; 8184 } 8185 8186 .ui.grid > .row > [class*="two wide computer"].column, 8187 .ui.grid > .column.row > [class*="two wide computer"].column, 8188 .ui.grid > [class*="two wide computer"].column, 8189 .ui.column.grid > [class*="two wide computer"].column { 8190 width: 12.5% !important; 8191 } 8192 8193 .ui.grid > .row > [class*="three wide computer"].column, 8194 .ui.grid > .column.row > [class*="three wide computer"].column, 8195 .ui.grid > [class*="three wide computer"].column, 8196 .ui.column.grid > [class*="three wide computer"].column { 8197 width: 18.75% !important; 8198 } 8199 8200 .ui.grid > .row > [class*="four wide computer"].column, 8201 .ui.grid > .column.row > [class*="four wide computer"].column, 8202 .ui.grid > [class*="four wide computer"].column, 8203 .ui.column.grid > [class*="four wide computer"].column { 8204 width: 25% !important; 8205 } 8206 8207 .ui.grid > .row > [class*="five wide computer"].column, 8208 .ui.grid > .column.row > [class*="five wide computer"].column, 8209 .ui.grid > [class*="five wide computer"].column, 8210 .ui.column.grid > [class*="five wide computer"].column { 8211 width: 31.25% !important; 8212 } 8213 8214 .ui.grid > .row > [class*="six wide computer"].column, 8215 .ui.grid > .column.row > [class*="six wide computer"].column, 8216 .ui.grid > [class*="six wide computer"].column, 8217 .ui.column.grid > [class*="six wide computer"].column { 8218 width: 37.5% !important; 8219 } 8220 8221 .ui.grid > .row > [class*="seven wide computer"].column, 8222 .ui.grid > .column.row > [class*="seven wide computer"].column, 8223 .ui.grid > [class*="seven wide computer"].column, 8224 .ui.column.grid > [class*="seven wide computer"].column { 8225 width: 43.75% !important; 8226 } 8227 8228 .ui.grid > .row > [class*="eight wide computer"].column, 8229 .ui.grid > .column.row > [class*="eight wide computer"].column, 8230 .ui.grid > [class*="eight wide computer"].column, 8231 .ui.column.grid > [class*="eight wide computer"].column { 8232 width: 50% !important; 8233 } 8234 8235 .ui.grid > .row > [class*="nine wide computer"].column, 8236 .ui.grid > .column.row > [class*="nine wide computer"].column, 8237 .ui.grid > [class*="nine wide computer"].column, 8238 .ui.column.grid > [class*="nine wide computer"].column { 8239 width: 56.25% !important; 8240 } 8241 8242 .ui.grid > .row > [class*="ten wide computer"].column, 8243 .ui.grid > .column.row > [class*="ten wide computer"].column, 8244 .ui.grid > [class*="ten wide computer"].column, 8245 .ui.column.grid > [class*="ten wide computer"].column { 8246 width: 62.5% !important; 8247 } 8248 8249 .ui.grid > .row > [class*="eleven wide computer"].column, 8250 .ui.grid > .column.row > [class*="eleven wide computer"].column, 8251 .ui.grid > [class*="eleven wide computer"].column, 8252 .ui.column.grid > [class*="eleven wide computer"].column { 8253 width: 68.75% !important; 8254 } 8255 8256 .ui.grid > .row > [class*="twelve wide computer"].column, 8257 .ui.grid > .column.row > [class*="twelve wide computer"].column, 8258 .ui.grid > [class*="twelve wide computer"].column, 8259 .ui.column.grid > [class*="twelve wide computer"].column { 8260 width: 75% !important; 8261 } 8262 8263 .ui.grid > .row > [class*="thirteen wide computer"].column, 8264 .ui.grid > .column.row > [class*="thirteen wide computer"].column, 8265 .ui.grid > [class*="thirteen wide computer"].column, 8266 .ui.column.grid > [class*="thirteen wide computer"].column { 8267 width: 81.25% !important; 8268 } 8269 8270 .ui.grid > .row > [class*="fourteen wide computer"].column, 8271 .ui.grid > .column.row > [class*="fourteen wide computer"].column, 8272 .ui.grid > [class*="fourteen wide computer"].column, 8273 .ui.column.grid > [class*="fourteen wide computer"].column { 8274 width: 87.5% !important; 8275 } 8276 8277 .ui.grid > .row > [class*="fifteen wide computer"].column, 8278 .ui.grid > .column.row > [class*="fifteen wide computer"].column, 8279 .ui.grid > [class*="fifteen wide computer"].column, 8280 .ui.column.grid > [class*="fifteen wide computer"].column { 8281 width: 93.75% !important; 8282 } 8283 8284 .ui.grid > .row > [class*="sixteen wide computer"].column, 8285 .ui.grid > .column.row > [class*="sixteen wide computer"].column, 8286 .ui.grid > [class*="sixteen wide computer"].column, 8287 .ui.column.grid > [class*="sixteen wide computer"].column { 8288 width: 100% !important; 8289 } 8290 } 8291 8292 /* Large Monitor Sizing Combinations */ 8293 8294 @media only screen and (min-width: 1200px) and (max-width: 1919.98px) { 8295 .ui.grid > .row > [class*="one wide large screen"].column, 8296 .ui.grid > .column.row > [class*="one wide large screen"].column, 8297 .ui.grid > [class*="one wide large screen"].column, 8298 .ui.column.grid > [class*="one wide large screen"].column { 8299 width: 6.25% !important; 8300 } 8301 8302 .ui.grid > .row > [class*="two wide large screen"].column, 8303 .ui.grid > .column.row > [class*="two wide large screen"].column, 8304 .ui.grid > [class*="two wide large screen"].column, 8305 .ui.column.grid > [class*="two wide large screen"].column { 8306 width: 12.5% !important; 8307 } 8308 8309 .ui.grid > .row > [class*="three wide large screen"].column, 8310 .ui.grid > .column.row > [class*="three wide large screen"].column, 8311 .ui.grid > [class*="three wide large screen"].column, 8312 .ui.column.grid > [class*="three wide large screen"].column { 8313 width: 18.75% !important; 8314 } 8315 8316 .ui.grid > .row > [class*="four wide large screen"].column, 8317 .ui.grid > .column.row > [class*="four wide large screen"].column, 8318 .ui.grid > [class*="four wide large screen"].column, 8319 .ui.column.grid > [class*="four wide large screen"].column { 8320 width: 25% !important; 8321 } 8322 8323 .ui.grid > .row > [class*="five wide large screen"].column, 8324 .ui.grid > .column.row > [class*="five wide large screen"].column, 8325 .ui.grid > [class*="five wide large screen"].column, 8326 .ui.column.grid > [class*="five wide large screen"].column { 8327 width: 31.25% !important; 8328 } 8329 8330 .ui.grid > .row > [class*="six wide large screen"].column, 8331 .ui.grid > .column.row > [class*="six wide large screen"].column, 8332 .ui.grid > [class*="six wide large screen"].column, 8333 .ui.column.grid > [class*="six wide large screen"].column { 8334 width: 37.5% !important; 8335 } 8336 8337 .ui.grid > .row > [class*="seven wide large screen"].column, 8338 .ui.grid > .column.row > [class*="seven wide large screen"].column, 8339 .ui.grid > [class*="seven wide large screen"].column, 8340 .ui.column.grid > [class*="seven wide large screen"].column { 8341 width: 43.75% !important; 8342 } 8343 8344 .ui.grid > .row > [class*="eight wide large screen"].column, 8345 .ui.grid > .column.row > [class*="eight wide large screen"].column, 8346 .ui.grid > [class*="eight wide large screen"].column, 8347 .ui.column.grid > [class*="eight wide large screen"].column { 8348 width: 50% !important; 8349 } 8350 8351 .ui.grid > .row > [class*="nine wide large screen"].column, 8352 .ui.grid > .column.row > [class*="nine wide large screen"].column, 8353 .ui.grid > [class*="nine wide large screen"].column, 8354 .ui.column.grid > [class*="nine wide large screen"].column { 8355 width: 56.25% !important; 8356 } 8357 8358 .ui.grid > .row > [class*="ten wide large screen"].column, 8359 .ui.grid > .column.row > [class*="ten wide large screen"].column, 8360 .ui.grid > [class*="ten wide large screen"].column, 8361 .ui.column.grid > [class*="ten wide large screen"].column { 8362 width: 62.5% !important; 8363 } 8364 8365 .ui.grid > .row > [class*="eleven wide large screen"].column, 8366 .ui.grid > .column.row > [class*="eleven wide large screen"].column, 8367 .ui.grid > [class*="eleven wide large screen"].column, 8368 .ui.column.grid > [class*="eleven wide large screen"].column { 8369 width: 68.75% !important; 8370 } 8371 8372 .ui.grid > .row > [class*="twelve wide large screen"].column, 8373 .ui.grid > .column.row > [class*="twelve wide large screen"].column, 8374 .ui.grid > [class*="twelve wide large screen"].column, 8375 .ui.column.grid > [class*="twelve wide large screen"].column { 8376 width: 75% !important; 8377 } 8378 8379 .ui.grid > .row > [class*="thirteen wide large screen"].column, 8380 .ui.grid > .column.row > [class*="thirteen wide large screen"].column, 8381 .ui.grid > [class*="thirteen wide large screen"].column, 8382 .ui.column.grid > [class*="thirteen wide large screen"].column { 8383 width: 81.25% !important; 8384 } 8385 8386 .ui.grid > .row > [class*="fourteen wide large screen"].column, 8387 .ui.grid > .column.row > [class*="fourteen wide large screen"].column, 8388 .ui.grid > [class*="fourteen wide large screen"].column, 8389 .ui.column.grid > [class*="fourteen wide large screen"].column { 8390 width: 87.5% !important; 8391 } 8392 8393 .ui.grid > .row > [class*="fifteen wide large screen"].column, 8394 .ui.grid > .column.row > [class*="fifteen wide large screen"].column, 8395 .ui.grid > [class*="fifteen wide large screen"].column, 8396 .ui.column.grid > [class*="fifteen wide large screen"].column { 8397 width: 93.75% !important; 8398 } 8399 8400 .ui.grid > .row > [class*="sixteen wide large screen"].column, 8401 .ui.grid > .column.row > [class*="sixteen wide large screen"].column, 8402 .ui.grid > [class*="sixteen wide large screen"].column, 8403 .ui.column.grid > [class*="sixteen wide large screen"].column { 8404 width: 100% !important; 8405 } 8406 } 8407 8408 /* Widescreen Sizing Combinations */ 8409 8410 @media only screen and (min-width: 1920px) { 8411 .ui.grid > .row > [class*="one wide widescreen"].column, 8412 .ui.grid > .column.row > [class*="one wide widescreen"].column, 8413 .ui.grid > [class*="one wide widescreen"].column, 8414 .ui.column.grid > [class*="one wide widescreen"].column { 8415 width: 6.25% !important; 8416 } 8417 8418 .ui.grid > .row > [class*="two wide widescreen"].column, 8419 .ui.grid > .column.row > [class*="two wide widescreen"].column, 8420 .ui.grid > [class*="two wide widescreen"].column, 8421 .ui.column.grid > [class*="two wide widescreen"].column { 8422 width: 12.5% !important; 8423 } 8424 8425 .ui.grid > .row > [class*="three wide widescreen"].column, 8426 .ui.grid > .column.row > [class*="three wide widescreen"].column, 8427 .ui.grid > [class*="three wide widescreen"].column, 8428 .ui.column.grid > [class*="three wide widescreen"].column { 8429 width: 18.75% !important; 8430 } 8431 8432 .ui.grid > .row > [class*="four wide widescreen"].column, 8433 .ui.grid > .column.row > [class*="four wide widescreen"].column, 8434 .ui.grid > [class*="four wide widescreen"].column, 8435 .ui.column.grid > [class*="four wide widescreen"].column { 8436 width: 25% !important; 8437 } 8438 8439 .ui.grid > .row > [class*="five wide widescreen"].column, 8440 .ui.grid > .column.row > [class*="five wide widescreen"].column, 8441 .ui.grid > [class*="five wide widescreen"].column, 8442 .ui.column.grid > [class*="five wide widescreen"].column { 8443 width: 31.25% !important; 8444 } 8445 8446 .ui.grid > .row > [class*="six wide widescreen"].column, 8447 .ui.grid > .column.row > [class*="six wide widescreen"].column, 8448 .ui.grid > [class*="six wide widescreen"].column, 8449 .ui.column.grid > [class*="six wide widescreen"].column { 8450 width: 37.5% !important; 8451 } 8452 8453 .ui.grid > .row > [class*="seven wide widescreen"].column, 8454 .ui.grid > .column.row > [class*="seven wide widescreen"].column, 8455 .ui.grid > [class*="seven wide widescreen"].column, 8456 .ui.column.grid > [class*="seven wide widescreen"].column { 8457 width: 43.75% !important; 8458 } 8459 8460 .ui.grid > .row > [class*="eight wide widescreen"].column, 8461 .ui.grid > .column.row > [class*="eight wide widescreen"].column, 8462 .ui.grid > [class*="eight wide widescreen"].column, 8463 .ui.column.grid > [class*="eight wide widescreen"].column { 8464 width: 50% !important; 8465 } 8466 8467 .ui.grid > .row > [class*="nine wide widescreen"].column, 8468 .ui.grid > .column.row > [class*="nine wide widescreen"].column, 8469 .ui.grid > [class*="nine wide widescreen"].column, 8470 .ui.column.grid > [class*="nine wide widescreen"].column { 8471 width: 56.25% !important; 8472 } 8473 8474 .ui.grid > .row > [class*="ten wide widescreen"].column, 8475 .ui.grid > .column.row > [class*="ten wide widescreen"].column, 8476 .ui.grid > [class*="ten wide widescreen"].column, 8477 .ui.column.grid > [class*="ten wide widescreen"].column { 8478 width: 62.5% !important; 8479 } 8480 8481 .ui.grid > .row > [class*="eleven wide widescreen"].column, 8482 .ui.grid > .column.row > [class*="eleven wide widescreen"].column, 8483 .ui.grid > [class*="eleven wide widescreen"].column, 8484 .ui.column.grid > [class*="eleven wide widescreen"].column { 8485 width: 68.75% !important; 8486 } 8487 8488 .ui.grid > .row > [class*="twelve wide widescreen"].column, 8489 .ui.grid > .column.row > [class*="twelve wide widescreen"].column, 8490 .ui.grid > [class*="twelve wide widescreen"].column, 8491 .ui.column.grid > [class*="twelve wide widescreen"].column { 8492 width: 75% !important; 8493 } 8494 8495 .ui.grid > .row > [class*="thirteen wide widescreen"].column, 8496 .ui.grid > .column.row > [class*="thirteen wide widescreen"].column, 8497 .ui.grid > [class*="thirteen wide widescreen"].column, 8498 .ui.column.grid > [class*="thirteen wide widescreen"].column { 8499 width: 81.25% !important; 8500 } 8501 8502 .ui.grid > .row > [class*="fourteen wide widescreen"].column, 8503 .ui.grid > .column.row > [class*="fourteen wide widescreen"].column, 8504 .ui.grid > [class*="fourteen wide widescreen"].column, 8505 .ui.column.grid > [class*="fourteen wide widescreen"].column { 8506 width: 87.5% !important; 8507 } 8508 8509 .ui.grid > .row > [class*="fifteen wide widescreen"].column, 8510 .ui.grid > .column.row > [class*="fifteen wide widescreen"].column, 8511 .ui.grid > [class*="fifteen wide widescreen"].column, 8512 .ui.column.grid > [class*="fifteen wide widescreen"].column { 8513 width: 93.75% !important; 8514 } 8515 8516 .ui.grid > .row > [class*="sixteen wide widescreen"].column, 8517 .ui.grid > .column.row > [class*="sixteen wide widescreen"].column, 8518 .ui.grid > [class*="sixteen wide widescreen"].column, 8519 .ui.column.grid > [class*="sixteen wide widescreen"].column { 8520 width: 100% !important; 8521 } 8522 } 8523 8524 /*---------------------- 8525 Centered 8526 -----------------------*/ 8527 8528 .ui.centered.grid, 8529 .ui.centered.grid > .row, 8530 .ui.grid > .centered.row { 8531 text-align: center; 8532 justify-content: center; 8533 } 8534 8535 .ui.centered.grid > .column:not(.aligned):not(.justified):not(.row), 8536 .ui.centered.grid > .row > .column:not(.aligned):not(.justified), 8537 .ui.grid .centered.row > .column:not(.aligned):not(.justified) { 8538 text-align: left; 8539 } 8540 8541 .ui.grid > .centered.column, 8542 .ui.grid > .row > .centered.column { 8543 display: block; 8544 margin-left: auto; 8545 margin-right: auto; 8546 } 8547 8548 /*---------------------- 8549 Relaxed 8550 -----------------------*/ 8551 8552 .ui.relaxed.grid > .column:not(.row), 8553 .ui.relaxed.grid > .row > .column, 8554 .ui.grid > .relaxed.row > .column { 8555 padding-left: 1.5rem; 8556 padding-right: 1.5rem; 8557 } 8558 8559 .ui[class*="very relaxed"].grid > .column:not(.row), 8560 .ui[class*="very relaxed"].grid > .row > .column, 8561 .ui.grid > [class*="very relaxed"].row > .column { 8562 padding-left: 2.5rem; 8563 padding-right: 2.5rem; 8564 } 8565 8566 /* Coupling with UI Divider */ 8567 8568 .ui.relaxed.grid .row + .ui.divider, 8569 .ui.grid .relaxed.row + .ui.divider { 8570 margin-left: 1.5rem; 8571 margin-right: 1.5rem; 8572 } 8573 8574 .ui[class*="very relaxed"].grid .row + .ui.divider, 8575 .ui.grid [class*="very relaxed"].row + .ui.divider { 8576 margin-left: 2.5rem; 8577 margin-right: 2.5rem; 8578 } 8579 8580 /*---------------------- 8581 Padded 8582 -----------------------*/ 8583 8584 .ui.padded.grid:not(.vertically):not(.horizontally) { 8585 margin: 0 !important; 8586 } 8587 8588 [class*="horizontally padded"].ui.grid { 8589 margin-left: 0 !important; 8590 margin-right: 0 !important; 8591 } 8592 8593 [class*="vertically padded"].ui.grid { 8594 margin-top: 0 !important; 8595 margin-bottom: 0 !important; 8596 } 8597 8598 /*---------------------- 8599 "Floated" 8600 -----------------------*/ 8601 8602 .ui.grid [class*="left floated"].column { 8603 margin-right: auto; 8604 } 8605 8606 .ui.grid [class*="right floated"].column { 8607 margin-left: auto; 8608 } 8609 8610 /*---------------------- 8611 Divided 8612 -----------------------*/ 8613 8614 .ui.divided.grid:not([class*="vertically divided"]) > .column:not(.row), 8615 .ui.divided.grid:not([class*="vertically divided"]) > .row > .column { 8616 box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15); 8617 } 8618 8619 /* Swap from padding to margin on columns to have dividers align */ 8620 8621 .ui[class*="vertically divided"].grid > .column:not(.row), 8622 .ui[class*="vertically divided"].grid > .row > .column { 8623 margin-top: 1rem; 8624 margin-bottom: 1rem; 8625 padding-top: 0; 8626 padding-bottom: 0; 8627 } 8628 8629 .ui[class*="vertically divided"].grid > .row { 8630 margin-top: 0; 8631 margin-bottom: 0; 8632 } 8633 8634 /* No divider on first column on row */ 8635 8636 .ui.divided.grid:not([class*="vertically divided"]) > .column:first-child, 8637 .ui.divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { 8638 box-shadow: none; 8639 } 8640 8641 /* No space on top of first row */ 8642 8643 .ui[class*="vertically divided"].grid > .row:first-child > .column { 8644 margin-top: 0; 8645 } 8646 8647 /* Divided Row */ 8648 8649 .ui.grid > .divided.row > .column { 8650 box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15); 8651 } 8652 8653 .ui.grid > .divided.row > .column:first-child { 8654 box-shadow: none; 8655 } 8656 8657 /* Vertically Divided */ 8658 8659 .ui[class*="vertically divided"].grid > .row { 8660 position: relative; 8661 } 8662 8663 .ui[class*="vertically divided"].grid > .row:before { 8664 position: absolute; 8665 content: ""; 8666 top: 0; 8667 left: 0; 8668 width: calc(100% - 2rem); 8669 height: 1px; 8670 margin: 0 1rem; 8671 box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15); 8672 } 8673 8674 /* Padded Horizontally Divided */ 8675 8676 [class*="horizontally padded"].ui.divided.grid, 8677 .ui.padded.divided.grid:not(.vertically):not(.horizontally) { 8678 width: 100%; 8679 } 8680 8681 /* First Row Vertically Divided */ 8682 8683 .ui[class*="vertically divided"].grid > .row:first-child:before { 8684 box-shadow: none; 8685 } 8686 8687 /* Relaxed */ 8688 8689 .ui.relaxed[class*="vertically divided"].grid > .row:before { 8690 margin-left: 1.5rem; 8691 margin-right: 1.5rem; 8692 width: calc(100% - 3rem); 8693 } 8694 8695 .ui[class*="very relaxed"][class*="vertically divided"].grid > .row:before { 8696 margin-left: 2.5rem; 8697 margin-right: 2.5rem; 8698 width: calc(100% - 5rem); 8699 } 8700 8701 /*---------------------- 8702 Celled 8703 -----------------------*/ 8704 8705 .ui.celled.grid { 8706 width: 100%; 8707 margin: 1em 0; 8708 box-shadow: 0 0 0 1px #D4D4D5; 8709 } 8710 8711 .ui.celled.grid > .row { 8712 width: 100% !important; 8713 margin: 0; 8714 padding: 0; 8715 box-shadow: 0 -1px 0 0 #D4D4D5; 8716 } 8717 8718 .ui.celled.grid > .column:not(.row), 8719 .ui.celled.grid > .row > .column { 8720 box-shadow: -1px 0 0 0 #D4D4D5; 8721 } 8722 8723 .ui.celled.grid > .column:first-child, 8724 .ui.celled.grid > .row > .column:first-child { 8725 box-shadow: none; 8726 } 8727 8728 .ui.celled.grid > .column:not(.row), 8729 .ui.celled.grid > .row > .column { 8730 padding: 1em; 8731 } 8732 8733 .ui.relaxed.celled.grid > .column:not(.row), 8734 .ui.relaxed.celled.grid > .row > .column { 8735 padding: 1.5em; 8736 } 8737 8738 .ui[class*="very relaxed"].celled.grid > .column:not(.row), 8739 .ui[class*="very relaxed"].celled.grid > .row > .column { 8740 padding: 2em; 8741 } 8742 8743 /* Internally Celled */ 8744 8745 .ui[class*="internally celled"].grid { 8746 box-shadow: none; 8747 margin: 0; 8748 } 8749 8750 .ui[class*="internally celled"].grid > .row:first-child { 8751 box-shadow: none; 8752 } 8753 8754 .ui[class*="internally celled"].grid > .row > .column:first-child { 8755 box-shadow: none; 8756 } 8757 8758 /*---------------------- 8759 Vertically Aligned 8760 -----------------------*/ 8761 8762 /* Top Aligned */ 8763 8764 .ui[class*="top aligned"].grid > .column:not(.row), 8765 .ui[class*="top aligned"].grid > .row > .column, 8766 .ui.grid > [class*="top aligned"].row > .column, 8767 .ui.grid > [class*="top aligned"].column:not(.row), 8768 .ui.grid > .row > [class*="top aligned"].column { 8769 flex-direction: column; 8770 vertical-align: top; 8771 align-self: flex-start !important; 8772 } 8773 8774 /* Middle Aligned */ 8775 8776 .ui[class*="middle aligned"].grid > .column:not(.row), 8777 .ui[class*="middle aligned"].grid > .row > .column, 8778 .ui.grid > [class*="middle aligned"].row > .column, 8779 .ui.grid > [class*="middle aligned"].column:not(.row), 8780 .ui.grid > .row > [class*="middle aligned"].column { 8781 flex-direction: column; 8782 vertical-align: middle; 8783 align-self: center !important; 8784 } 8785 8786 /* Bottom Aligned */ 8787 8788 .ui[class*="bottom aligned"].grid > .column:not(.row), 8789 .ui[class*="bottom aligned"].grid > .row > .column, 8790 .ui.grid > [class*="bottom aligned"].row > .column, 8791 .ui.grid > [class*="bottom aligned"].column:not(.row), 8792 .ui.grid > .row > [class*="bottom aligned"].column { 8793 flex-direction: column; 8794 vertical-align: bottom; 8795 align-self: flex-end !important; 8796 } 8797 8798 /* Stretched */ 8799 8800 .ui.stretched.grid > .row > .column, 8801 .ui.stretched.grid > .column, 8802 .ui.grid > .stretched.row > .column, 8803 .ui.grid > .stretched.column:not(.row), 8804 .ui.grid > .row > .stretched.column { 8805 display: inline-flex !important; 8806 align-self: stretch; 8807 flex-direction: column; 8808 } 8809 8810 .ui.stretched.grid > .row > .column > *, 8811 .ui.stretched.grid > .column > *, 8812 .ui.grid > .stretched.row > .column > *, 8813 .ui.grid > .stretched.column:not(.row) > *, 8814 .ui.grid > .row > .stretched.column > * { 8815 flex-grow: 1; 8816 } 8817 8818 /*---------------------- 8819 Horizontally Centered 8820 -----------------------*/ 8821 8822 /* Left Aligned */ 8823 8824 .ui[class*="left aligned"].grid > .column, 8825 .ui[class*="left aligned"].grid > .row > .column, 8826 .ui.grid > [class*="left aligned"].row > .column, 8827 .ui.grid > [class*="left aligned"].column.column, 8828 .ui.grid > .row > [class*="left aligned"].column.column { 8829 text-align: left; 8830 align-self: inherit; 8831 } 8832 8833 /* Center Aligned */ 8834 8835 .ui[class*="center aligned"].grid > .column, 8836 .ui[class*="center aligned"].grid > .row > .column, 8837 .ui.grid > [class*="center aligned"].row > .column, 8838 .ui.grid > [class*="center aligned"].column.column, 8839 .ui.grid > .row > [class*="center aligned"].column.column { 8840 text-align: center; 8841 align-self: inherit; 8842 } 8843 8844 .ui[class*="center aligned"].grid { 8845 justify-content: center; 8846 } 8847 8848 /* Right Aligned */ 8849 8850 .ui[class*="right aligned"].grid > .column, 8851 .ui[class*="right aligned"].grid > .row > .column, 8852 .ui.grid > [class*="right aligned"].row > .column, 8853 .ui.grid > [class*="right aligned"].column.column, 8854 .ui.grid > .row > [class*="right aligned"].column.column { 8855 text-align: right; 8856 align-self: inherit; 8857 } 8858 8859 /* Justified */ 8860 8861 .ui.justified.grid > .column, 8862 .ui.justified.grid > .row > .column, 8863 .ui.grid > .justified.row > .column, 8864 .ui.grid > .justified.column.column, 8865 .ui.grid > .row > .justified.column.column { 8866 text-align: justify; 8867 -webkit-hyphens: auto; 8868 hyphens: auto; 8869 } 8870 8871 /*---------------------- 8872 Colored 8873 -----------------------*/ 8874 8875 .ui.grid > .primary.row, 8876 .ui.grid > .primary.column, 8877 .ui.grid > .row > .primary.column { 8878 background-color: #2185D0; 8879 color: #FFFFFF; 8880 } 8881 8882 .ui.grid > .secondary.row, 8883 .ui.grid > .secondary.column, 8884 .ui.grid > .row > .secondary.column { 8885 background-color: #1B1C1D; 8886 color: #FFFFFF; 8887 } 8888 8889 .ui.grid > .red.row, 8890 .ui.grid > .red.column, 8891 .ui.grid > .row > .red.column { 8892 background-color: #DB2828; 8893 color: #FFFFFF; 8894 } 8895 8896 .ui.grid > .orange.row, 8897 .ui.grid > .orange.column, 8898 .ui.grid > .row > .orange.column { 8899 background-color: #F2711C; 8900 color: #FFFFFF; 8901 } 8902 8903 .ui.grid > .yellow.row, 8904 .ui.grid > .yellow.column, 8905 .ui.grid > .row > .yellow.column { 8906 background-color: #FBBD08; 8907 color: #FFFFFF; 8908 } 8909 8910 .ui.grid > .olive.row, 8911 .ui.grid > .olive.column, 8912 .ui.grid > .row > .olive.column { 8913 background-color: #B5CC18; 8914 color: #FFFFFF; 8915 } 8916 8917 .ui.grid > .green.row, 8918 .ui.grid > .green.column, 8919 .ui.grid > .row > .green.column { 8920 background-color: #21BA45; 8921 color: #FFFFFF; 8922 } 8923 8924 .ui.grid > .teal.row, 8925 .ui.grid > .teal.column, 8926 .ui.grid > .row > .teal.column { 8927 background-color: #00B5AD; 8928 color: #FFFFFF; 8929 } 8930 8931 .ui.grid > .blue.row, 8932 .ui.grid > .blue.column, 8933 .ui.grid > .row > .blue.column { 8934 background-color: #2185D0; 8935 color: #FFFFFF; 8936 } 8937 8938 .ui.grid > .violet.row, 8939 .ui.grid > .violet.column, 8940 .ui.grid > .row > .violet.column { 8941 background-color: #6435C9; 8942 color: #FFFFFF; 8943 } 8944 8945 .ui.grid > .purple.row, 8946 .ui.grid > .purple.column, 8947 .ui.grid > .row > .purple.column { 8948 background-color: #A333C8; 8949 color: #FFFFFF; 8950 } 8951 8952 .ui.grid > .pink.row, 8953 .ui.grid > .pink.column, 8954 .ui.grid > .row > .pink.column { 8955 background-color: #E03997; 8956 color: #FFFFFF; 8957 } 8958 8959 .ui.grid > .brown.row, 8960 .ui.grid > .brown.column, 8961 .ui.grid > .row > .brown.column { 8962 background-color: #A5673F; 8963 color: #FFFFFF; 8964 } 8965 8966 .ui.grid > .grey.row, 8967 .ui.grid > .grey.column, 8968 .ui.grid > .row > .grey.column { 8969 background-color: #767676; 8970 color: #FFFFFF; 8971 } 8972 8973 .ui.grid > .black.row, 8974 .ui.grid > .black.column, 8975 .ui.grid > .row > .black.column { 8976 background-color: #1B1C1D; 8977 color: #FFFFFF; 8978 } 8979 8980 /*---------------------- 8981 Equal Width 8982 -----------------------*/ 8983 8984 .ui[class*="equal width"].grid > .column:not(.row), 8985 .ui[class*="equal width"].grid > .row > .column, 8986 .ui.grid > [class*="equal width"].row > .column { 8987 display: inline-block; 8988 flex-grow: 1; 8989 } 8990 8991 .ui[class*="equal width"].grid > .wide.column, 8992 .ui[class*="equal width"].grid > .row > .wide.column, 8993 .ui.grid > [class*="equal width"].row > .wide.column { 8994 flex-grow: 0; 8995 } 8996 8997 /*---------------------- 8998 Reverse 8999 -----------------------*/ 9000 9001 /* Mobile */ 9002 9003 @media only screen and (max-width: 767.98px) { 9004 .ui[class*="mobile reversed"].grid, 9005 .ui[class*="mobile reversed"].grid > .row, 9006 .ui.grid > [class*="mobile reversed"].row { 9007 flex-direction: row-reverse; 9008 } 9009 9010 .ui[class*="mobile vertically reversed"].grid, 9011 .ui.stackable[class*="mobile reversed"] { 9012 flex-direction: column-reverse; 9013 } 9014 9015 /* Divided Reversed */ 9016 9017 .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, 9018 .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { 9019 box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15); 9020 } 9021 9022 .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, 9023 .ui[class*="mobile reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child { 9024 box-shadow: none; 9025 } 9026 9027 /* Vertically Divided Reversed */ 9028 9029 .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:first-child:before { 9030 box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15); 9031 } 9032 9033 .ui.grid[class*="vertically divided"][class*="mobile vertically reversed"] > .row:last-child:before { 9034 box-shadow: none; 9035 } 9036 9037 /* Celled Reversed */ 9038 9039 .ui[class*="mobile reversed"].celled.grid > .row > .column:first-child { 9040 box-shadow: -1px 0 0 0 #D4D4D5; 9041 } 9042 9043 .ui[class*="mobile reversed"].celled.grid > .row > .column:last-child { 9044 box-shadow: none; 9045 } 9046 } 9047 9048 /* Tablet */ 9049 9050 @media only screen and (min-width: 768px) and (max-width: 991.98px) { 9051 .ui[class*="tablet reversed"].grid, 9052 .ui[class*="tablet reversed"].grid > .row, 9053 .ui.grid > [class*="tablet reversed"].row { 9054 flex-direction: row-reverse; 9055 } 9056 9057 .ui[class*="tablet vertically reversed"].grid { 9058 flex-direction: column-reverse; 9059 } 9060 9061 /* Divided Reversed */ 9062 9063 .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, 9064 .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { 9065 box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15); 9066 } 9067 9068 .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, 9069 .ui[class*="tablet reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child { 9070 box-shadow: none; 9071 } 9072 9073 /* Vertically Divided Reversed */ 9074 9075 .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:first-child:before { 9076 box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15); 9077 } 9078 9079 .ui.grid[class*="vertically divided"][class*="tablet vertically reversed"] > .row:last-child:before { 9080 box-shadow: none; 9081 } 9082 9083 /* Celled Reversed */ 9084 9085 .ui[class*="tablet reversed"].celled.grid > .row > .column:first-child { 9086 box-shadow: -1px 0 0 0 #D4D4D5; 9087 } 9088 9089 .ui[class*="tablet reversed"].celled.grid > .row > .column:last-child { 9090 box-shadow: none; 9091 } 9092 } 9093 9094 /* Computer */ 9095 9096 @media only screen and (min-width: 992px) { 9097 .ui[class*="computer reversed"].grid, 9098 .ui[class*="computer reversed"].grid > .row, 9099 .ui.grid > [class*="computer reversed"].row { 9100 flex-direction: row-reverse; 9101 } 9102 9103 .ui[class*="computer vertically reversed"].grid { 9104 flex-direction: column-reverse; 9105 } 9106 9107 /* Divided Reversed */ 9108 9109 .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:first-child, 9110 .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:first-child { 9111 box-shadow: -1px 0 0 0 rgba(34, 36, 38, 0.15); 9112 } 9113 9114 .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .column:last-child, 9115 .ui[class*="computer reversed"].divided.grid:not([class*="vertically divided"]) > .row > .column:last-child { 9116 box-shadow: none; 9117 } 9118 9119 /* Vertically Divided Reversed */ 9120 9121 .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:first-child:before { 9122 box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15); 9123 } 9124 9125 .ui.grid[class*="vertically divided"][class*="computer vertically reversed"] > .row:last-child:before { 9126 box-shadow: none; 9127 } 9128 9129 /* Celled Reversed */ 9130 9131 .ui[class*="computer reversed"].celled.grid > .row > .column:first-child { 9132 box-shadow: -1px 0 0 0 #D4D4D5; 9133 } 9134 9135 .ui[class*="computer reversed"].celled.grid > .row > .column:last-child { 9136 box-shadow: none; 9137 } 9138 } 9139 9140 /*------------------- 9141 Stackable 9142 --------------------*/ 9143 9144 @media only screen and (max-width: 767.98px) { 9145 .ui.stackable.grid { 9146 width: auto; 9147 margin-left: 0 !important; 9148 margin-right: 0 !important; 9149 } 9150 9151 .ui.stackable.grid > .row > .wide.column, 9152 .ui.stackable.grid > .wide.column, 9153 .ui.stackable.grid > .column.grid > .column, 9154 .ui.stackable.grid > .column.row > .column, 9155 .ui.stackable.grid > .row > .column, 9156 .ui.stackable.grid > .column:not(.row), 9157 .ui.grid > .stackable.stackable.stackable.row > .column { 9158 width: 100% !important; 9159 margin: 0 0 !important; 9160 box-shadow: none !important; 9161 padding: 1rem 1rem; 9162 } 9163 9164 .ui.stackable.grid:not(.vertically) > .row { 9165 margin: 0; 9166 padding: 0; 9167 } 9168 9169 /* Coupling */ 9170 9171 .ui.container > .ui.stackable.grid > .column, 9172 .ui.container > .ui.stackable.grid > .row > .column { 9173 padding-left: 0 !important; 9174 padding-right: 0 !important; 9175 } 9176 9177 /* Don't pad inside segment or nested grid */ 9178 9179 .ui.grid .ui.stackable.grid, 9180 .ui.segment:not(.vertical) .ui.stackable.page.grid { 9181 margin-left: -1rem !important; 9182 margin-right: -1rem !important; 9183 } 9184 9185 /* Divided Stackable */ 9186 9187 .ui.stackable.divided.grid > .row:first-child > .column:first-child, 9188 .ui.stackable.celled.grid > .row:first-child > .column:first-child, 9189 .ui.stackable.divided.grid > .column:not(.row):first-child, 9190 .ui.stackable.celled.grid > .column:not(.row):first-child { 9191 border-top: none !important; 9192 } 9193 9194 .ui.stackable.celled.grid > .column:not(.row), 9195 .ui.stackable.divided:not(.vertically).grid > .column:not(.row), 9196 .ui.stackable.celled.grid > .row > .column, 9197 .ui.stackable.divided:not(.vertically).grid > .row > .column { 9198 border-top: 1px solid rgba(34, 36, 38, 0.15); 9199 box-shadow: none !important; 9200 padding-top: 2rem !important; 9201 padding-bottom: 2rem !important; 9202 } 9203 9204 .ui.stackable.celled.grid > .row { 9205 box-shadow: none !important; 9206 } 9207 9208 .ui.stackable.divided:not(.vertically).grid > .column:not(.row), 9209 .ui.stackable.divided:not(.vertically).grid > .row > .column { 9210 padding-left: 0 !important; 9211 padding-right: 0 !important; 9212 } 9213 } 9214 9215 /*---------------------- 9216 Only (Device) 9217 -----------------------*/ 9218 9219 /* These include arbitrary class repetitions for forced specificity */ 9220 9221 /* Mobile Only Hide */ 9222 9223 @media only screen and (max-width: 767.98px) { 9224 .ui[class*="tablet only"].grid.grid.grid:not(.mobile), 9225 .ui.grid.grid.grid > [class*="tablet only"].row:not(.mobile), 9226 .ui.grid.grid.grid > [class*="tablet only"].column:not(.mobile), 9227 .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.mobile) { 9228 display: none !important; 9229 } 9230 9231 .ui[class*="computer only"].grid.grid.grid:not(.mobile), 9232 .ui.grid.grid.grid > [class*="computer only"].row:not(.mobile), 9233 .ui.grid.grid.grid > [class*="computer only"].column:not(.mobile), 9234 .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.mobile) { 9235 display: none !important; 9236 } 9237 9238 .ui[class*="large screen only"].grid.grid.grid:not(.mobile), 9239 .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile), 9240 .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile), 9241 .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) { 9242 display: none !important; 9243 } 9244 9245 .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), 9246 .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), 9247 .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), 9248 .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { 9249 display: none !important; 9250 } 9251 } 9252 9253 /* Tablet Only Hide */ 9254 9255 @media only screen and (min-width: 768px) and (max-width: 991.98px) { 9256 .ui[class*="mobile only"].grid.grid.grid:not(.tablet), 9257 .ui.grid.grid.grid > [class*="mobile only"].row:not(.tablet), 9258 .ui.grid.grid.grid > [class*="mobile only"].column:not(.tablet), 9259 .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.tablet) { 9260 display: none !important; 9261 } 9262 9263 .ui[class*="computer only"].grid.grid.grid:not(.tablet), 9264 .ui.grid.grid.grid > [class*="computer only"].row:not(.tablet), 9265 .ui.grid.grid.grid > [class*="computer only"].column:not(.tablet), 9266 .ui.grid.grid.grid > .row > [class*="computer only"].column:not(.tablet) { 9267 display: none !important; 9268 } 9269 9270 .ui[class*="large screen only"].grid.grid.grid:not(.mobile), 9271 .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile), 9272 .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile), 9273 .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) { 9274 display: none !important; 9275 } 9276 9277 .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), 9278 .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), 9279 .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), 9280 .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { 9281 display: none !important; 9282 } 9283 } 9284 9285 /* Computer Only Hide */ 9286 9287 @media only screen and (min-width: 992px) and (max-width: 1199.98px) { 9288 .ui[class*="mobile only"].grid.grid.grid:not(.computer), 9289 .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), 9290 .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), 9291 .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { 9292 display: none !important; 9293 } 9294 9295 .ui[class*="tablet only"].grid.grid.grid:not(.computer), 9296 .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), 9297 .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), 9298 .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { 9299 display: none !important; 9300 } 9301 9302 .ui[class*="large screen only"].grid.grid.grid:not(.mobile), 9303 .ui.grid.grid.grid > [class*="large screen only"].row:not(.mobile), 9304 .ui.grid.grid.grid > [class*="large screen only"].column:not(.mobile), 9305 .ui.grid.grid.grid > .row > [class*="large screen only"].column:not(.mobile) { 9306 display: none !important; 9307 } 9308 9309 .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), 9310 .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), 9311 .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), 9312 .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { 9313 display: none !important; 9314 } 9315 } 9316 9317 /* Large Screen Only Hide */ 9318 9319 @media only screen and (min-width: 1200px) and (max-width: 1919.98px) { 9320 .ui[class*="mobile only"].grid.grid.grid:not(.computer), 9321 .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), 9322 .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), 9323 .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { 9324 display: none !important; 9325 } 9326 9327 .ui[class*="tablet only"].grid.grid.grid:not(.computer), 9328 .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), 9329 .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), 9330 .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { 9331 display: none !important; 9332 } 9333 9334 .ui[class*="widescreen only"].grid.grid.grid:not(.mobile), 9335 .ui.grid.grid.grid > [class*="widescreen only"].row:not(.mobile), 9336 .ui.grid.grid.grid > [class*="widescreen only"].column:not(.mobile), 9337 .ui.grid.grid.grid > .row > [class*="widescreen only"].column:not(.mobile) { 9338 display: none !important; 9339 } 9340 } 9341 9342 /* Widescreen Only Hide */ 9343 9344 @media only screen and (min-width: 1920px) { 9345 .ui[class*="mobile only"].grid.grid.grid:not(.computer), 9346 .ui.grid.grid.grid > [class*="mobile only"].row:not(.computer), 9347 .ui.grid.grid.grid > [class*="mobile only"].column:not(.computer), 9348 .ui.grid.grid.grid > .row > [class*="mobile only"].column:not(.computer) { 9349 display: none !important; 9350 } 9351 9352 .ui[class*="tablet only"].grid.grid.grid:not(.computer), 9353 .ui.grid.grid.grid > [class*="tablet only"].row:not(.computer), 9354 .ui.grid.grid.grid > [class*="tablet only"].column:not(.computer), 9355 .ui.grid.grid.grid > .row > [class*="tablet only"].column:not(.computer) { 9356 display: none !important; 9357 } 9358 } 9359 9360 /*----------------- 9361 Compact 9362 -----------------*/ 9363 9364 .ui.ui.ui.compact.grid > .column:not(.row), 9365 .ui.ui.ui.compact.grid > .row > .column { 9366 padding-left: 0.5rem; 9367 padding-right: 0.5rem; 9368 } 9369 9370 .ui.ui.ui.compact.grid > * { 9371 padding-left: 0.5rem; 9372 padding-right: 0.5rem; 9373 } 9374 9375 /* Row */ 9376 9377 .ui.ui.ui.compact.grid > .row { 9378 padding-top: 0.5rem; 9379 padding-bottom: 0.5rem; 9380 } 9381 9382 /* Columns */ 9383 9384 .ui.ui.ui.compact.grid > .column:not(.row) { 9385 padding-top: 0.5rem; 9386 padding-bottom: 0.5rem; 9387 } 9388 9389 /* Relaxed + Celled */ 9390 9391 .ui.compact.relaxed.celled.grid > .column:not(.row), 9392 .ui.compact.relaxed.celled.grid > .row > .column { 9393 padding: 0.75em; 9394 } 9395 9396 .ui.compact[class*="very relaxed"].celled.grid > .column:not(.row), 9397 .ui.compact[class*="very relaxed"].celled.grid > .row > .column { 9398 padding: 1em; 9399 } 9400 9401 /*----------------- 9402 Very compact 9403 -----------------*/ 9404 9405 .ui.ui.ui[class*="very compact"].grid > .column:not(.row), 9406 .ui.ui.ui[class*="very compact"].grid > .row > .column { 9407 padding-left: 0.25rem; 9408 padding-right: 0.25rem; 9409 } 9410 9411 .ui.ui.ui[class*="very compact"].grid > * { 9412 padding-left: 0.25rem; 9413 padding-right: 0.25rem; 9414 } 9415 9416 /* Row */ 9417 9418 .ui.ui.ui[class*="very compact"].grid > .row { 9419 padding-top: 0.25rem; 9420 padding-bottom: 0.25rem; 9421 padding-left: 0.75rem; 9422 padding-right: 0.75rem; 9423 } 9424 9425 /* Columns */ 9426 9427 .ui.ui.ui[class*="very compact"].grid > .column:not(.row) { 9428 padding-top: 0.25rem; 9429 padding-bottom: 0.25rem; 9430 } 9431 9432 /* Relaxed + Celled */ 9433 9434 .ui[class*="very compact"].relaxed.celled.grid > .column:not(.row), 9435 .ui[class*="very compact"].relaxed.celled.grid > .row > .column { 9436 padding: 0.375em; 9437 } 9438 9439 .ui[class*="very compact"][class*="very relaxed"].celled.grid > .column:not(.row), 9440 .ui[class*="very compact"][class*="very relaxed"].celled.grid > .row > .column { 9441 padding: 0.5em; 9442 } 9443 9444 /******************************* 9445 Theme Overrides 9446 *******************************/ 9447 9448 /******************************* 9449 Site Overrides 9450 *******************************/ 9451 /*! 9452 * # Fomantic-UI - Header 9453 * http://github.com/fomantic/Fomantic-UI/ 9454 * 9455 * 9456 * Released under the MIT license 9457 * http://opensource.org/licenses/MIT 9458 * 9459 */ 9460 9461 /******************************* 9462 Header 9463 *******************************/ 9464 9465 /* Standard */ 9466 9467 .ui.header { 9468 border: none; 9469 margin: calc(2rem - 0.1428571428571429em) 0 1rem; 9470 padding: 0 0; 9471 font-family: var(--fonts-regular); 9472 font-weight: 500; 9473 line-height: 1.28571429em; 9474 text-transform: none; 9475 color: rgba(0, 0, 0, 0.87); 9476 } 9477 9478 .ui.header:first-child { 9479 margin-top: -0.14285714em; 9480 } 9481 9482 .ui.header:last-child { 9483 margin-bottom: 0; 9484 } 9485 9486 /*-------------- 9487 Sub Header 9488 ---------------*/ 9489 9490 .ui.header .sub.header { 9491 display: block; 9492 font-weight: normal; 9493 padding: 0; 9494 margin: 0; 9495 font-size: 1rem; 9496 line-height: 1.2em; 9497 color: rgba(0, 0, 0, 0.6); 9498 } 9499 9500 /*-------------- 9501 Icon 9502 ---------------*/ 9503 9504 .ui.header > i.icon { 9505 display: table-cell; 9506 opacity: 1; 9507 font-size: 1.5em; 9508 padding-top: 0; 9509 vertical-align: middle; 9510 } 9511 9512 /* With Text Node */ 9513 9514 .ui.header > i.icon:only-child { 9515 display: inline-block; 9516 padding: 0; 9517 margin-right: 0.75rem; 9518 } 9519 9520 /*------------------- 9521 Image 9522 --------------------*/ 9523 9524 .ui.header > .image:not(.icon), 9525 .ui.header > img { 9526 display: inline-block; 9527 margin-top: 0.14285714em; 9528 width: 2.5em; 9529 height: auto; 9530 vertical-align: middle; 9531 } 9532 9533 .ui.header > .image:not(.icon):only-child, 9534 .ui.header > img:only-child { 9535 margin-right: 0.75rem; 9536 } 9537 9538 /*-------------- 9539 Content 9540 ---------------*/ 9541 9542 .ui.header .content { 9543 display: inline-block; 9544 vertical-align: top; 9545 } 9546 9547 /* After Image */ 9548 9549 .ui.header > img + .content, 9550 .ui.header > .image + .content { 9551 padding-left: 0.75rem; 9552 vertical-align: middle; 9553 } 9554 9555 /* After Icon */ 9556 9557 .ui.header > i.icon + .content { 9558 padding-left: 0.75rem; 9559 display: table-cell; 9560 vertical-align: middle; 9561 } 9562 9563 /*-------------- 9564 Loose Coupling 9565 ---------------*/ 9566 9567 .ui.header .ui.label { 9568 font-size: ''; 9569 margin-left: 0.5rem; 9570 vertical-align: middle; 9571 } 9572 9573 /* Positioning */ 9574 9575 .ui.header + p { 9576 margin-top: 0; 9577 } 9578 9579 /******************************* 9580 Types 9581 *******************************/ 9582 9583 /*-------------- 9584 Page 9585 ---------------*/ 9586 9587 h1.ui.header { 9588 font-size: 2rem; 9589 } 9590 9591 h1.ui.header .sub.header { 9592 font-size: 1.14285714rem; 9593 } 9594 9595 h2.ui.header { 9596 font-size: 1.71428571rem; 9597 } 9598 9599 h2.ui.header .sub.header { 9600 font-size: 1.14285714rem; 9601 } 9602 9603 h3.ui.header { 9604 font-size: 1.28571429rem; 9605 } 9606 9607 h3.ui.header .sub.header { 9608 font-size: 1rem; 9609 } 9610 9611 h4.ui.header { 9612 font-size: 1.07142857rem; 9613 } 9614 9615 h4.ui.header .sub.header { 9616 font-size: 1rem; 9617 } 9618 9619 h5.ui.header { 9620 font-size: 1rem; 9621 } 9622 9623 h5.ui.header .sub.header { 9624 font-size: 0.92857143rem; 9625 } 9626 9627 h6.ui.header { 9628 font-size: 0.85714286rem; 9629 } 9630 9631 h6.ui.header .sub.header { 9632 font-size: 0.92857143rem; 9633 } 9634 9635 /*-------------- 9636 Content Heading 9637 ---------------*/ 9638 9639 .ui.mini.header { 9640 font-size: 0.85714286em; 9641 } 9642 9643 .ui.mini.header .sub.header { 9644 font-size: 0.92857143rem; 9645 } 9646 9647 .ui.mini.sub.header { 9648 font-size: 0.78571429em; 9649 } 9650 9651 .ui.tiny.header { 9652 font-size: 1em; 9653 } 9654 9655 .ui.tiny.header .sub.header { 9656 font-size: 0.92857143rem; 9657 } 9658 9659 .ui.tiny.sub.header { 9660 font-size: 0.78571429em; 9661 } 9662 9663 .ui.small.header { 9664 font-size: 1.07142857em; 9665 } 9666 9667 .ui.small.header .sub.header { 9668 font-size: 1rem; 9669 } 9670 9671 .ui.small.sub.header { 9672 font-size: 0.78571429em; 9673 } 9674 9675 .ui.large.header { 9676 font-size: 1.71428571em; 9677 } 9678 9679 .ui.large.header .sub.header { 9680 font-size: 1.14285714rem; 9681 } 9682 9683 .ui.large.sub.header { 9684 font-size: 0.92857143em; 9685 } 9686 9687 .ui.big.header { 9688 font-size: 1.85714286em; 9689 } 9690 9691 .ui.big.header .sub.header { 9692 font-size: 1.14285714rem; 9693 } 9694 9695 .ui.big.sub.header { 9696 font-size: 1em; 9697 } 9698 9699 .ui.huge.header { 9700 font-size: 2em; 9701 min-height: 1em; 9702 } 9703 9704 .ui.huge.header .sub.header { 9705 font-size: 1.14285714rem; 9706 } 9707 9708 .ui.huge.sub.header { 9709 font-size: 1em; 9710 } 9711 9712 .ui.massive.header { 9713 font-size: 2.28571429em; 9714 min-height: 1em; 9715 } 9716 9717 .ui.massive.header .sub.header { 9718 font-size: 1.42857143rem; 9719 } 9720 9721 .ui.massive.sub.header { 9722 font-size: 1.14285714em; 9723 } 9724 9725 /*-------------- 9726 Sub Heading 9727 ---------------*/ 9728 9729 .ui.sub.header { 9730 padding: 0; 9731 margin-bottom: 0.14285714rem; 9732 font-weight: 500; 9733 font-size: 0.85714286em; 9734 text-transform: uppercase; 9735 color: ''; 9736 } 9737 9738 /*------------------- 9739 Icon 9740 --------------------*/ 9741 9742 .ui.icon.header { 9743 display: inline-block; 9744 text-align: center; 9745 margin: 2rem 0 1rem; 9746 } 9747 9748 .ui.icon.header:after { 9749 content: ''; 9750 display: block; 9751 height: 0; 9752 clear: both; 9753 visibility: hidden; 9754 } 9755 9756 .ui.icon.header:first-child { 9757 margin-top: 0; 9758 } 9759 9760 .ui.icon.header > i.icon { 9761 float: none; 9762 display: block; 9763 width: auto; 9764 height: auto; 9765 line-height: 1; 9766 padding: 0; 9767 font-size: 3em; 9768 margin: 0 auto 0.5rem; 9769 opacity: 1; 9770 } 9771 9772 .ui.icon.header .corner.icon { 9773 font-size: calc(3em * 0.45); 9774 } 9775 9776 .ui.icon.header .content { 9777 display: block; 9778 padding: 0; 9779 } 9780 9781 .ui.icon.header > i.circular.icon { 9782 font-size: 2em; 9783 } 9784 9785 .ui.icon.header > i.square.icon { 9786 font-size: 2em; 9787 } 9788 9789 .ui.block.icon.header > i.icon { 9790 margin-bottom: 0; 9791 } 9792 9793 .ui.icon.header.aligned { 9794 margin-left: auto; 9795 margin-right: auto; 9796 display: block; 9797 } 9798 9799 /******************************* 9800 States 9801 *******************************/ 9802 9803 .ui.disabled.header { 9804 opacity: var(--opacity-disabled); 9805 } 9806 9807 /******************************* 9808 Variations 9809 *******************************/ 9810 9811 /*------------------- 9812 Colors 9813 --------------------*/ 9814 9815 .ui.primary.header { 9816 color: #2185D0; 9817 } 9818 9819 a.ui.primary.header:hover { 9820 color: #1678c2; 9821 } 9822 9823 .ui.primary.dividing.header { 9824 border-bottom: 2px solid #2185D0; 9825 } 9826 9827 .ui.secondary.header { 9828 color: #1B1C1D; 9829 } 9830 9831 a.ui.secondary.header:hover { 9832 color: #27292a; 9833 } 9834 9835 .ui.secondary.dividing.header { 9836 border-bottom: 2px solid #1B1C1D; 9837 } 9838 9839 .ui.red.header { 9840 color: #DB2828; 9841 } 9842 9843 a.ui.red.header:hover { 9844 color: #d01919; 9845 } 9846 9847 .ui.red.dividing.header { 9848 border-bottom: 2px solid #DB2828; 9849 } 9850 9851 .ui.orange.header { 9852 color: #F2711C; 9853 } 9854 9855 a.ui.orange.header:hover { 9856 color: #f26202; 9857 } 9858 9859 .ui.orange.dividing.header { 9860 border-bottom: 2px solid #F2711C; 9861 } 9862 9863 .ui.yellow.header { 9864 color: #FBBD08; 9865 } 9866 9867 a.ui.yellow.header:hover { 9868 color: #eaae00; 9869 } 9870 9871 .ui.yellow.dividing.header { 9872 border-bottom: 2px solid #FBBD08; 9873 } 9874 9875 .ui.olive.header { 9876 color: #B5CC18; 9877 } 9878 9879 a.ui.olive.header:hover { 9880 color: #a7bd0d; 9881 } 9882 9883 .ui.olive.dividing.header { 9884 border-bottom: 2px solid #B5CC18; 9885 } 9886 9887 .ui.green.header { 9888 color: #21BA45; 9889 } 9890 9891 a.ui.green.header:hover { 9892 color: #16ab39; 9893 } 9894 9895 .ui.green.dividing.header { 9896 border-bottom: 2px solid #21BA45; 9897 } 9898 9899 .ui.teal.header { 9900 color: #00B5AD; 9901 } 9902 9903 a.ui.teal.header:hover { 9904 color: #009c95; 9905 } 9906 9907 .ui.teal.dividing.header { 9908 border-bottom: 2px solid #00B5AD; 9909 } 9910 9911 .ui.blue.header { 9912 color: #2185D0; 9913 } 9914 9915 a.ui.blue.header:hover { 9916 color: #1678c2; 9917 } 9918 9919 .ui.blue.dividing.header { 9920 border-bottom: 2px solid #2185D0; 9921 } 9922 9923 .ui.violet.header { 9924 color: #6435C9; 9925 } 9926 9927 a.ui.violet.header:hover { 9928 color: #5829bb; 9929 } 9930 9931 .ui.violet.dividing.header { 9932 border-bottom: 2px solid #6435C9; 9933 } 9934 9935 .ui.purple.header { 9936 color: #A333C8; 9937 } 9938 9939 a.ui.purple.header:hover { 9940 color: #9627ba; 9941 } 9942 9943 .ui.purple.dividing.header { 9944 border-bottom: 2px solid #A333C8; 9945 } 9946 9947 .ui.pink.header { 9948 color: #E03997; 9949 } 9950 9951 a.ui.pink.header:hover { 9952 color: #e61a8d; 9953 } 9954 9955 .ui.pink.dividing.header { 9956 border-bottom: 2px solid #E03997; 9957 } 9958 9959 .ui.brown.header { 9960 color: #A5673F; 9961 } 9962 9963 a.ui.brown.header:hover { 9964 color: #975b33; 9965 } 9966 9967 .ui.brown.dividing.header { 9968 border-bottom: 2px solid #A5673F; 9969 } 9970 9971 .ui.grey.header { 9972 color: #767676; 9973 } 9974 9975 a.ui.grey.header:hover { 9976 color: #838383; 9977 } 9978 9979 .ui.grey.dividing.header { 9980 border-bottom: 2px solid #767676; 9981 } 9982 9983 .ui.black.header { 9984 color: #1B1C1D; 9985 } 9986 9987 a.ui.black.header:hover { 9988 color: #27292a; 9989 } 9990 9991 .ui.black.dividing.header { 9992 border-bottom: 2px solid #1B1C1D; 9993 } 9994 9995 /*------------------- 9996 Aligned 9997 --------------------*/ 9998 9999 .ui.left.aligned.header { 10000 text-align: left; 10001 } 10002 10003 .ui.right.aligned.header { 10004 text-align: right; 10005 } 10006 10007 .ui.centered.header, 10008 .ui.center.aligned.header { 10009 text-align: center; 10010 } 10011 10012 .ui.justified.header { 10013 text-align: justify; 10014 } 10015 10016 .ui.justified.header:after { 10017 display: inline-block; 10018 content: ''; 10019 width: 100%; 10020 } 10021 10022 /*------------------- 10023 Floated 10024 --------------------*/ 10025 10026 .ui.floated.header, 10027 .ui[class*="left floated"].header { 10028 float: left; 10029 margin-top: 0; 10030 margin-right: 0.5em; 10031 } 10032 10033 .ui[class*="right floated"].header { 10034 float: right; 10035 margin-top: 0; 10036 margin-left: 0.5em; 10037 } 10038 10039 /*------------------- 10040 Fitted 10041 --------------------*/ 10042 10043 .ui.fitted.header { 10044 padding: 0; 10045 } 10046 10047 /*------------------- 10048 Dividing 10049 --------------------*/ 10050 10051 .ui.dividing.header { 10052 padding-bottom: 0.21428571rem; 10053 border-bottom: 1px solid rgba(34, 36, 38, 0.15); 10054 } 10055 10056 .ui.dividing.header .sub.header { 10057 padding-bottom: 0.21428571rem; 10058 } 10059 10060 .ui.dividing.header i.icon { 10061 margin-bottom: 0; 10062 } 10063 10064 /*------------------- 10065 Block 10066 --------------------*/ 10067 10068 .ui.block.header { 10069 background: #F3F4F5; 10070 padding: 0.78571429rem 1rem; 10071 box-shadow: none; 10072 border: 1px solid #D4D4D5; 10073 border-radius: 0.28571429rem; 10074 } 10075 10076 .ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { 10077 font-size: 1rem; 10078 } 10079 10080 .ui.mini.block.header { 10081 font-size: 0.78571429rem; 10082 } 10083 10084 .ui.tiny.block.header { 10085 font-size: 0.85714286rem; 10086 } 10087 10088 .ui.small.block.header { 10089 font-size: 0.92857143rem; 10090 } 10091 10092 .ui.large.block.header { 10093 font-size: 1.14285714rem; 10094 } 10095 10096 .ui.big.block.header { 10097 font-size: 1.28571429rem; 10098 } 10099 10100 .ui.huge.block.header { 10101 font-size: 1.42857143rem; 10102 } 10103 10104 .ui.massive.block.header { 10105 font-size: 1.71428571rem; 10106 } 10107 10108 /*------------------- 10109 Attached 10110 --------------------*/ 10111 10112 .ui.attached.header { 10113 background: #FFFFFF; 10114 padding: 0.78571429rem 1rem; 10115 margin: 0 -1px 0 -1px; 10116 box-shadow: none; 10117 border: 1px solid #D4D4D5; 10118 border-radius: 0; 10119 } 10120 10121 .ui.attached.block.header { 10122 background: #F3F4F5; 10123 } 10124 10125 .ui.attached:not(.top).header { 10126 border-top: none; 10127 } 10128 10129 .ui.top.attached.header { 10130 border-radius: 0.28571429rem 0.28571429rem 0 0; 10131 } 10132 10133 .ui.bottom.attached.header { 10134 border-radius: 0 0 0.28571429rem 0.28571429rem; 10135 } 10136 10137 /* Attached Sizes */ 10138 10139 .ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { 10140 font-size: 1em; 10141 } 10142 10143 .ui.mini.attached.header { 10144 font-size: 0.78571429em; 10145 } 10146 10147 .ui.tiny.attached.header { 10148 font-size: 0.85714286em; 10149 } 10150 10151 .ui.small.attached.header { 10152 font-size: 0.92857143em; 10153 } 10154 10155 .ui.large.attached.header { 10156 font-size: 1.14285714em; 10157 } 10158 10159 .ui.big.attached.header { 10160 font-size: 1.28571429em; 10161 } 10162 10163 .ui.huge.attached.header { 10164 font-size: 1.42857143em; 10165 } 10166 10167 .ui.massive.attached.header { 10168 font-size: 1.71428571em; 10169 } 10170 10171 /*------------------- 10172 Sizing 10173 --------------------*/ 10174 10175 .ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { 10176 font-size: 1.28571429em; 10177 } 10178 10179 /******************************* 10180 Theme Overrides 10181 *******************************/ 10182 10183 /******************************* 10184 Site Overrides 10185 *******************************/ 10186 /*! 10187 * # Fomantic-UI - Input 10188 * http://github.com/fomantic/Fomantic-UI/ 10189 * 10190 * 10191 * Released under the MIT license 10192 * http://opensource.org/licenses/MIT 10193 * 10194 */ 10195 10196 /******************************* 10197 Standard 10198 *******************************/ 10199 10200 /*-------------------- 10201 Inputs 10202 ---------------------*/ 10203 10204 .ui.input { 10205 position: relative; 10206 font-weight: normal; 10207 font-style: normal; 10208 display: inline-flex; 10209 color: rgba(0, 0, 0, 0.87); 10210 } 10211 10212 .ui.input > input { 10213 margin: 0; 10214 max-width: 100%; 10215 flex: 1 0 auto; 10216 outline: none; 10217 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 10218 text-align: left; 10219 line-height: 1.21428571em; 10220 font-family: var(--fonts-regular); 10221 padding: 0.67857143em 1em; 10222 background: #FFFFFF; 10223 border: 1px solid rgba(34, 36, 38, 0.15); 10224 color: rgba(0, 0, 0, 0.87); 10225 border-radius: 0.28571429rem; 10226 transition: box-shadow 0.1s ease, border-color 0.1s ease; 10227 box-shadow: none; 10228 } 10229 10230 /*-------------------- 10231 Placeholder 10232 ---------------------*/ 10233 10234 /* browsers require these rules separate */ 10235 10236 .ui.input > input::-webkit-input-placeholder { 10237 color: rgba(191, 191, 191, 0.87); 10238 } 10239 10240 .ui.input > input::-moz-placeholder { 10241 color: rgba(191, 191, 191, 0.87); 10242 } 10243 10244 .ui.input > input:-ms-input-placeholder { 10245 color: rgba(191, 191, 191, 0.87); 10246 } 10247 10248 /******************************* 10249 States 10250 *******************************/ 10251 10252 /*-------------------- 10253 Disabled 10254 ---------------------*/ 10255 10256 .ui.disabled.input, 10257 .ui.input:not(.disabled) input[disabled] { 10258 opacity: var(--opacity-disabled); 10259 } 10260 10261 .ui.disabled.input > input, 10262 .ui.input:not(.disabled) input[disabled] { 10263 pointer-events: none; 10264 } 10265 10266 /*-------------------- 10267 Active 10268 ---------------------*/ 10269 10270 .ui.input > input:active, 10271 .ui.input.down input { 10272 border-color: rgba(0, 0, 0, 0.3); 10273 background: #FAFAFA; 10274 color: rgba(0, 0, 0, 0.87); 10275 box-shadow: none; 10276 } 10277 10278 /*-------------------- 10279 Loading 10280 ---------------------*/ 10281 10282 .ui.loading.loading.input > i.icon:before { 10283 position: absolute; 10284 content: ''; 10285 top: 50%; 10286 left: 50%; 10287 margin: -0.64285714em 0 0 -0.64285714em; 10288 width: 1.28571429em; 10289 height: 1.28571429em; 10290 border-radius: 500rem; 10291 border: 0.2em solid rgba(0, 0, 0, 0.1); 10292 } 10293 10294 .ui.loading.loading.input > i.icon:after { 10295 position: absolute; 10296 content: ''; 10297 top: 50%; 10298 left: 50%; 10299 margin: -0.64285714em 0 0 -0.64285714em; 10300 width: 1.28571429em; 10301 height: 1.28571429em; 10302 -webkit-animation: loader 0.6s infinite linear; 10303 animation: loader 0.6s infinite linear; 10304 border: 0.2em solid #767676; 10305 border-radius: 500rem; 10306 box-shadow: 0 0 0 1px transparent; 10307 } 10308 10309 /*-------------------- 10310 Focus 10311 ---------------------*/ 10312 10313 .ui.input.focus > input, 10314 .ui.input > input:focus { 10315 border-color: #85B7D9; 10316 background: #FFFFFF; 10317 color: rgba(0, 0, 0, 0.8); 10318 box-shadow: none; 10319 } 10320 10321 .ui.input.focus > input::-webkit-input-placeholder, 10322 .ui.input > input:focus::-webkit-input-placeholder { 10323 color: rgba(115, 115, 115, 0.87); 10324 } 10325 10326 .ui.input.focus > input::-moz-placeholder, 10327 .ui.input > input:focus::-moz-placeholder { 10328 color: rgba(115, 115, 115, 0.87); 10329 } 10330 10331 .ui.input.focus > input:-ms-input-placeholder, 10332 .ui.input > input:focus:-ms-input-placeholder { 10333 color: rgba(115, 115, 115, 0.87); 10334 } 10335 10336 /*-------------------- 10337 States 10338 ---------------------*/ 10339 10340 .ui.input.error > input { 10341 background-color: #FFF6F6; 10342 border-color: #E0B4B4; 10343 color: #9F3A38; 10344 box-shadow: none; 10345 } 10346 10347 /* Placeholder */ 10348 10349 .ui.input.error > input::-webkit-input-placeholder { 10350 color: #e7bdbc; 10351 } 10352 10353 .ui.input.error > input::-moz-placeholder { 10354 color: #e7bdbc; 10355 } 10356 10357 .ui.input.error > input:-ms-input-placeholder { 10358 color: #e7bdbc !important; 10359 } 10360 10361 /* Focused Placeholder */ 10362 10363 .ui.input.error > input:focus::-webkit-input-placeholder { 10364 color: #da9796; 10365 } 10366 10367 .ui.input.error > input:focus::-moz-placeholder { 10368 color: #da9796; 10369 } 10370 10371 .ui.input.error > input:focus:-ms-input-placeholder { 10372 color: #da9796 !important; 10373 } 10374 10375 .ui.input.info > input { 10376 background-color: #F8FFFF; 10377 border-color: #A9D5DE; 10378 color: #276F86; 10379 box-shadow: none; 10380 } 10381 10382 /* Placeholder */ 10383 10384 .ui.input.info > input::-webkit-input-placeholder { 10385 color: #98cfe1; 10386 } 10387 10388 .ui.input.info > input::-moz-placeholder { 10389 color: #98cfe1; 10390 } 10391 10392 .ui.input.info > input:-ms-input-placeholder { 10393 color: #98cfe1 !important; 10394 } 10395 10396 /* Focused Placeholder */ 10397 10398 .ui.input.info > input:focus::-webkit-input-placeholder { 10399 color: #70bdd6; 10400 } 10401 10402 .ui.input.info > input:focus::-moz-placeholder { 10403 color: #70bdd6; 10404 } 10405 10406 .ui.input.info > input:focus:-ms-input-placeholder { 10407 color: #70bdd6 !important; 10408 } 10409 10410 .ui.input.success > input { 10411 background-color: #FCFFF5; 10412 border-color: #A3C293; 10413 color: #2C662D; 10414 box-shadow: none; 10415 } 10416 10417 /* Placeholder */ 10418 10419 .ui.input.success > input::-webkit-input-placeholder { 10420 color: #8fcf90; 10421 } 10422 10423 .ui.input.success > input::-moz-placeholder { 10424 color: #8fcf90; 10425 } 10426 10427 .ui.input.success > input:-ms-input-placeholder { 10428 color: #8fcf90 !important; 10429 } 10430 10431 /* Focused Placeholder */ 10432 10433 .ui.input.success > input:focus::-webkit-input-placeholder { 10434 color: #6cbf6d; 10435 } 10436 10437 .ui.input.success > input:focus::-moz-placeholder { 10438 color: #6cbf6d; 10439 } 10440 10441 .ui.input.success > input:focus:-ms-input-placeholder { 10442 color: #6cbf6d !important; 10443 } 10444 10445 .ui.input.warning > input { 10446 background-color: #FFFAF3; 10447 border-color: #C9BA9B; 10448 color: #573A08; 10449 box-shadow: none; 10450 } 10451 10452 /* Placeholder */ 10453 10454 .ui.input.warning > input::-webkit-input-placeholder { 10455 color: #edad3e; 10456 } 10457 10458 .ui.input.warning > input::-moz-placeholder { 10459 color: #edad3e; 10460 } 10461 10462 .ui.input.warning > input:-ms-input-placeholder { 10463 color: #edad3e !important; 10464 } 10465 10466 /* Focused Placeholder */ 10467 10468 .ui.input.warning > input:focus::-webkit-input-placeholder { 10469 color: #e39715; 10470 } 10471 10472 .ui.input.warning > input:focus::-moz-placeholder { 10473 color: #e39715; 10474 } 10475 10476 .ui.input.warning > input:focus:-ms-input-placeholder { 10477 color: #e39715 !important; 10478 } 10479 10480 /******************************* 10481 Variations 10482 *******************************/ 10483 10484 /*-------------------- 10485 Transparent 10486 ---------------------*/ 10487 10488 .ui.transparent.input > textarea, 10489 .ui.transparent.input > input { 10490 border-color: transparent !important; 10491 background-color: transparent !important; 10492 padding: 0; 10493 box-shadow: none !important; 10494 border-radius: 0 !important; 10495 } 10496 10497 .field .ui.transparent.input > textarea { 10498 padding: 0.67857143em 1em; 10499 } 10500 10501 /* Transparent Icon */ 10502 10503 :not(.field) > .ui.transparent.icon.input > i.icon { 10504 width: 1.1em; 10505 } 10506 10507 :not(.field) > .ui.ui.ui.transparent.icon.input > input { 10508 padding-left: 0; 10509 padding-right: 2em; 10510 } 10511 10512 :not(.field) > .ui.ui.ui.transparent[class*="left icon"].input > input { 10513 padding-left: 2em; 10514 padding-right: 0; 10515 } 10516 10517 /*-------------------- 10518 Icon 10519 ---------------------*/ 10520 10521 .ui.icon.input > i.icon { 10522 cursor: default; 10523 position: absolute; 10524 line-height: 1; 10525 text-align: center; 10526 top: 0; 10527 right: 0; 10528 margin: 0; 10529 height: 100%; 10530 width: 2.67142857em; 10531 opacity: 0.5; 10532 border-radius: 0 0.28571429rem 0.28571429rem 0; 10533 transition: opacity 0.3s ease; 10534 } 10535 10536 .ui.icon.input > i.icon:not(.link) { 10537 pointer-events: none; 10538 } 10539 10540 .ui.ui.ui.ui.icon.input > textarea, 10541 .ui.ui.ui.ui.icon.input > input { 10542 padding-right: 2.67142857em; 10543 } 10544 10545 .ui.icon.input > i.icon:before, 10546 .ui.icon.input > i.icon:after { 10547 left: 0; 10548 position: absolute; 10549 text-align: center; 10550 top: 50%; 10551 width: 100%; 10552 margin-top: -0.5em; 10553 } 10554 10555 .ui.icon.input > i.link.icon { 10556 cursor: pointer; 10557 } 10558 10559 .ui.icon.input > i.circular.icon { 10560 top: 0.35em; 10561 right: 0.5em; 10562 } 10563 10564 /* Left Icon Input */ 10565 10566 .ui[class*="left icon"].input > i.icon { 10567 right: auto; 10568 left: 1px; 10569 border-radius: 0.28571429rem 0 0 0.28571429rem; 10570 } 10571 10572 .ui[class*="left icon"].input > i.circular.icon { 10573 right: auto; 10574 left: 0.5em; 10575 } 10576 10577 .ui.ui.ui.ui[class*="left icon"].input > textarea, 10578 .ui.ui.ui.ui[class*="left icon"].input > input { 10579 padding-left: 2.67142857em; 10580 padding-right: 1em; 10581 } 10582 10583 /* Focus */ 10584 10585 .ui.icon.input > textarea:focus ~ i.icon, 10586 .ui.icon.input > input:focus ~ i.icon { 10587 opacity: 1; 10588 } 10589 10590 /*-------------------- 10591 Labeled 10592 ---------------------*/ 10593 10594 /* Adjacent Label */ 10595 10596 .ui.labeled.input > .label { 10597 flex: 0 0 auto; 10598 margin: 0; 10599 font-size: 1em; 10600 } 10601 10602 .ui.labeled.input > .label:not(.corner) { 10603 padding-top: 0.78571429em; 10604 padding-bottom: 0.78571429em; 10605 } 10606 10607 /* Regular Label on Left */ 10608 10609 .ui.labeled.input:not([class*="corner labeled"]) .label:first-child { 10610 border-top-right-radius: 0; 10611 border-bottom-right-radius: 0; 10612 } 10613 10614 .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input { 10615 border-top-left-radius: 0; 10616 border-bottom-left-radius: 0; 10617 border-left-color: transparent; 10618 } 10619 10620 .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + input:focus { 10621 border-left-color: #85B7D9; 10622 } 10623 10624 /* Regular Label on Right */ 10625 10626 .ui[class*="right labeled"].input > input { 10627 border-top-right-radius: 0 !important; 10628 border-bottom-right-radius: 0 !important; 10629 border-right-color: transparent !important; 10630 } 10631 10632 .ui[class*="right labeled"].input > input + .label { 10633 border-top-left-radius: 0; 10634 border-bottom-left-radius: 0; 10635 } 10636 10637 .ui[class*="right labeled"].input > input:focus { 10638 border-right-color: #85B7D9 !important; 10639 } 10640 10641 /* Corner Label */ 10642 10643 .ui.labeled.input .corner.label { 10644 top: 1px; 10645 right: 1px; 10646 font-size: 0.64285714em; 10647 border-radius: 0 0.28571429rem 0 0; 10648 } 10649 10650 /* Spacing with corner label */ 10651 10652 .ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > textarea, 10653 .ui[class*="corner labeled"]:not([class*="left corner labeled"]).labeled.input > input { 10654 padding-right: 2.5em !important; 10655 } 10656 10657 .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > textarea, 10658 .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > input { 10659 padding-right: 3.25em !important; 10660 } 10661 10662 .ui[class*="corner labeled"].icon.input:not([class*="left corner labeled"]) > i.icon { 10663 margin-right: 1.25em; 10664 } 10665 10666 /* Left Labeled */ 10667 10668 .ui[class*="left corner labeled"].labeled.input > textarea, 10669 .ui[class*="left corner labeled"].labeled.input > input { 10670 padding-left: 2.5em !important; 10671 } 10672 10673 .ui[class*="left corner labeled"].icon.input > textarea, 10674 .ui[class*="left corner labeled"].icon.input > input { 10675 padding-left: 3.25em !important; 10676 } 10677 10678 .ui[class*="left corner labeled"].icon.input > i.icon { 10679 margin-left: 1.25em; 10680 } 10681 10682 .ui.icon.input > textarea ~ i.icon { 10683 height: 3em; 10684 } 10685 10686 :not(.field) > .ui.transparent.icon.input > textarea ~ i.icon { 10687 height: 1.3em; 10688 } 10689 10690 /* Corner Label Position */ 10691 10692 .ui.input > .ui.corner.label { 10693 top: 1px; 10694 right: 1px; 10695 } 10696 10697 .ui.input > .ui.left.corner.label { 10698 right: auto; 10699 left: 1px; 10700 } 10701 10702 /* Labeled and action input states */ 10703 10704 .ui.form .field.error > .ui.action.input > .ui.button, 10705 .ui.form .field.error > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label, 10706 .ui.action.input.error > .ui.button, 10707 .ui.labeled.input.error:not([class*="corner labeled"]) > .ui.label { 10708 border-top: 1px solid #E0B4B4; 10709 border-bottom: 1px solid #E0B4B4; 10710 } 10711 10712 .ui.form .field.error > .ui[class*="left action"].input > .ui.button, 10713 .ui.form .field.error > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label, 10714 .ui[class*="left action"].input.error > .ui.button, 10715 .ui.labeled.input.error:not(.right):not([class*="corner labeled"]) > .ui.label { 10716 border-left: 1px solid #E0B4B4; 10717 } 10718 10719 .ui.form .field.error > .ui.action.input:not([class*="left action"]) > input + .ui.button, 10720 .ui.form .field.error > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label, 10721 .ui.action.input.error:not([class*="left action"]) > input + .ui.button, 10722 .ui.right.labeled.input.error:not([class*="corner labeled"]) > input + .ui.label { 10723 border-right: 1px solid #E0B4B4; 10724 } 10725 10726 .ui.form .field.error > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child, 10727 .ui.right.labeled.input.error:not([class*="corner labeled"]) > .ui.label:first-child { 10728 border-left: 1px solid #E0B4B4; 10729 } 10730 10731 .ui.form .field.info > .ui.action.input > .ui.button, 10732 .ui.form .field.info > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label, 10733 .ui.action.input.info > .ui.button, 10734 .ui.labeled.input.info:not([class*="corner labeled"]) > .ui.label { 10735 border-top: 1px solid #A9D5DE; 10736 border-bottom: 1px solid #A9D5DE; 10737 } 10738 10739 .ui.form .field.info > .ui[class*="left action"].input > .ui.button, 10740 .ui.form .field.info > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label, 10741 .ui[class*="left action"].input.info > .ui.button, 10742 .ui.labeled.input.info:not(.right):not([class*="corner labeled"]) > .ui.label { 10743 border-left: 1px solid #A9D5DE; 10744 } 10745 10746 .ui.form .field.info > .ui.action.input:not([class*="left action"]) > input + .ui.button, 10747 .ui.form .field.info > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label, 10748 .ui.action.input.info:not([class*="left action"]) > input + .ui.button, 10749 .ui.right.labeled.input.info:not([class*="corner labeled"]) > input + .ui.label { 10750 border-right: 1px solid #A9D5DE; 10751 } 10752 10753 .ui.form .field.info > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child, 10754 .ui.right.labeled.input.info:not([class*="corner labeled"]) > .ui.label:first-child { 10755 border-left: 1px solid #A9D5DE; 10756 } 10757 10758 .ui.form .field.success > .ui.action.input > .ui.button, 10759 .ui.form .field.success > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label, 10760 .ui.action.input.success > .ui.button, 10761 .ui.labeled.input.success:not([class*="corner labeled"]) > .ui.label { 10762 border-top: 1px solid #A3C293; 10763 border-bottom: 1px solid #A3C293; 10764 } 10765 10766 .ui.form .field.success > .ui[class*="left action"].input > .ui.button, 10767 .ui.form .field.success > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label, 10768 .ui[class*="left action"].input.success > .ui.button, 10769 .ui.labeled.input.success:not(.right):not([class*="corner labeled"]) > .ui.label { 10770 border-left: 1px solid #A3C293; 10771 } 10772 10773 .ui.form .field.success > .ui.action.input:not([class*="left action"]) > input + .ui.button, 10774 .ui.form .field.success > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label, 10775 .ui.action.input.success:not([class*="left action"]) > input + .ui.button, 10776 .ui.right.labeled.input.success:not([class*="corner labeled"]) > input + .ui.label { 10777 border-right: 1px solid #A3C293; 10778 } 10779 10780 .ui.form .field.success > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child, 10781 .ui.right.labeled.input.success:not([class*="corner labeled"]) > .ui.label:first-child { 10782 border-left: 1px solid #A3C293; 10783 } 10784 10785 .ui.form .field.warning > .ui.action.input > .ui.button, 10786 .ui.form .field.warning > .ui.labeled.input:not([class*="corner labeled"]) > .ui.label, 10787 .ui.action.input.warning > .ui.button, 10788 .ui.labeled.input.warning:not([class*="corner labeled"]) > .ui.label { 10789 border-top: 1px solid #C9BA9B; 10790 border-bottom: 1px solid #C9BA9B; 10791 } 10792 10793 .ui.form .field.warning > .ui[class*="left action"].input > .ui.button, 10794 .ui.form .field.warning > .ui.labeled.input:not(.right):not([class*="corner labeled"]) > .ui.label, 10795 .ui[class*="left action"].input.warning > .ui.button, 10796 .ui.labeled.input.warning:not(.right):not([class*="corner labeled"]) > .ui.label { 10797 border-left: 1px solid #C9BA9B; 10798 } 10799 10800 .ui.form .field.warning > .ui.action.input:not([class*="left action"]) > input + .ui.button, 10801 .ui.form .field.warning > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label, 10802 .ui.action.input.warning:not([class*="left action"]) > input + .ui.button, 10803 .ui.right.labeled.input.warning:not([class*="corner labeled"]) > input + .ui.label { 10804 border-right: 1px solid #C9BA9B; 10805 } 10806 10807 .ui.form .field.warning > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child, 10808 .ui.right.labeled.input.warning:not([class*="corner labeled"]) > .ui.label:first-child { 10809 border-left: 1px solid #C9BA9B; 10810 } 10811 10812 /*-------------------- 10813 Action 10814 ---------------------*/ 10815 10816 .ui.action.input > .button, 10817 .ui.action.input > .buttons { 10818 display: flex; 10819 align-items: center; 10820 flex: 0 0 auto; 10821 } 10822 10823 .ui.action.input > .button, 10824 .ui.action.input > .buttons > .button { 10825 padding-top: 0.78571429em; 10826 padding-bottom: 0.78571429em; 10827 margin: 0; 10828 } 10829 10830 /* Input when ui Left*/ 10831 10832 .ui[class*="left action"].input > input { 10833 border-top-left-radius: 0; 10834 border-bottom-left-radius: 0; 10835 border-left-color: transparent; 10836 } 10837 10838 /* Input when ui Right*/ 10839 10840 .ui.action.input:not([class*="left action"]) > input { 10841 border-top-right-radius: 0; 10842 border-bottom-right-radius: 0; 10843 border-right-color: transparent; 10844 } 10845 10846 /* Button and Dropdown */ 10847 10848 .ui.action.input > .dropdown:first-child, 10849 .ui.action.input > .button:first-child, 10850 .ui.action.input > .buttons:first-child > .button { 10851 border-radius: 0.28571429rem 0 0 0.28571429rem; 10852 } 10853 10854 .ui.action.input > .dropdown:not(:first-child), 10855 .ui.action.input > .button:not(:first-child), 10856 .ui.action.input > .buttons:not(:first-child) > .button { 10857 border-radius: 0; 10858 } 10859 10860 .ui.action.input > .dropdown:last-child, 10861 .ui.action.input > .button:last-child, 10862 .ui.action.input > .buttons:last-child > .button { 10863 border-radius: 0 0.28571429rem 0.28571429rem 0; 10864 } 10865 10866 /* Input Focus */ 10867 10868 .ui.action.input:not([class*="left action"]) > input:focus { 10869 border-right-color: #85B7D9; 10870 } 10871 10872 .ui.ui[class*="left action"].input > input:focus { 10873 border-left-color: #85B7D9; 10874 } 10875 10876 /*-------------------- 10877 Fluid 10878 ---------------------*/ 10879 10880 .ui.fluid.input { 10881 display: flex; 10882 } 10883 10884 .ui.fluid.input > input { 10885 width: 0 !important; 10886 } 10887 10888 /*-------------------- 10889 Size 10890 ---------------------*/ 10891 10892 .ui.input { 10893 font-size: 1em; 10894 } 10895 10896 .ui.mini.input { 10897 font-size: 0.78571429em; 10898 } 10899 10900 .ui.tiny.input { 10901 font-size: 0.85714286em; 10902 } 10903 10904 .ui.small.input { 10905 font-size: 0.92857143em; 10906 } 10907 10908 .ui.large.input { 10909 font-size: 1.14285714em; 10910 } 10911 10912 .ui.big.input { 10913 font-size: 1.28571429em; 10914 } 10915 10916 .ui.huge.input { 10917 font-size: 1.42857143em; 10918 } 10919 10920 .ui.massive.input { 10921 font-size: 1.71428571em; 10922 } 10923 10924 /******************************* 10925 Theme Overrides 10926 *******************************/ 10927 10928 /******************************* 10929 Site Overrides 10930 *******************************/ 10931 /*! 10932 * # Fomantic-UI - Label 10933 * http://github.com/fomantic/Fomantic-UI/ 10934 * 10935 * 10936 * Released under the MIT license 10937 * http://opensource.org/licenses/MIT 10938 * 10939 */ 10940 10941 /******************************* 10942 Label 10943 *******************************/ 10944 10945 .ui.label { 10946 display: inline-block; 10947 line-height: 1; 10948 vertical-align: baseline; 10949 margin: 0 0.14285714em; 10950 background-color: #E8E8E8; 10951 background-image: none; 10952 padding: 0.5833em 0.833em; 10953 color: rgba(0, 0, 0, 0.6); 10954 text-transform: none; 10955 font-weight: 500; 10956 border: 0 solid transparent; 10957 border-radius: 0.28571429rem; 10958 transition: background 0.1s ease; 10959 } 10960 10961 .ui.label:first-child { 10962 margin-left: 0; 10963 } 10964 10965 .ui.label:last-child { 10966 margin-right: 0; 10967 } 10968 10969 /* Link */ 10970 10971 a.ui.label { 10972 cursor: pointer; 10973 } 10974 10975 /* Inside Link */ 10976 10977 .ui.label > a { 10978 cursor: pointer; 10979 color: inherit; 10980 opacity: 0.5; 10981 transition: 0.1s opacity ease; 10982 } 10983 10984 .ui.label > a:hover { 10985 opacity: 1; 10986 } 10987 10988 /* Image */ 10989 10990 .ui.label > img { 10991 width: auto !important; 10992 vertical-align: middle; 10993 height: 2.1666em; 10994 } 10995 10996 /* Icon */ 10997 10998 .ui.left.icon.label > .icon, 10999 .ui.label > .icon { 11000 width: auto; 11001 margin: 0 0.75em 0 0; 11002 } 11003 11004 /* Detail */ 11005 11006 .ui.label > .detail { 11007 display: inline-block; 11008 vertical-align: top; 11009 font-weight: 500; 11010 margin-left: 1em; 11011 opacity: 0.8; 11012 } 11013 11014 .ui.label > .detail .icon { 11015 margin: 0 0.25em 0 0; 11016 } 11017 11018 /* Removable label */ 11019 11020 .ui.label > .close.icon, 11021 .ui.label > .delete.icon { 11022 cursor: pointer; 11023 font-size: 0.92857143em; 11024 opacity: 0.5; 11025 transition: background 0.1s ease; 11026 } 11027 11028 .ui.label > .close.icon:hover, 11029 .ui.label > .delete.icon:hover { 11030 opacity: 1; 11031 } 11032 11033 /* Backward compatible positioning */ 11034 11035 .ui.label.left.icon > .close.icon, 11036 .ui.label.left.icon > .delete.icon { 11037 margin: 0 0.5em 0 0; 11038 } 11039 11040 .ui.label:not(.icon) > .close.icon, 11041 .ui.label:not(.icon) > .delete.icon { 11042 margin: 0 0 0 0.5em; 11043 } 11044 11045 /* Label for only an icon */ 11046 11047 .ui.icon.label > .icon { 11048 margin: 0 auto; 11049 } 11050 11051 /* Right Side Icon */ 11052 11053 .ui.right.icon.label > .icon { 11054 margin: 0 0 0 0.75em; 11055 } 11056 11057 /*------------------- 11058 Group 11059 --------------------*/ 11060 11061 .ui.labels > .label { 11062 margin: 0 0.5em 0.5em 0; 11063 } 11064 11065 /*------------------- 11066 Coupling 11067 --------------------*/ 11068 11069 .ui.header > .ui.label { 11070 margin-top: -0.29165em; 11071 } 11072 11073 /* Remove border radius on attached segment */ 11074 11075 .ui.attached.segment > .ui.top.left.attached.label, 11076 .ui.bottom.attached.segment > .ui.top.left.attached.label { 11077 border-top-left-radius: 0; 11078 } 11079 11080 .ui.attached.segment > .ui.top.right.attached.label, 11081 .ui.bottom.attached.segment > .ui.top.right.attached.label { 11082 border-top-right-radius: 0; 11083 } 11084 11085 .ui.top.attached.segment > .ui.bottom.left.attached.label { 11086 border-bottom-left-radius: 0; 11087 } 11088 11089 .ui.top.attached.segment > .ui.bottom.right.attached.label { 11090 border-bottom-right-radius: 0; 11091 } 11092 11093 /* Padding on next content after a label */ 11094 11095 .ui.top.attached.label ~ .ui.bottom.attached.label + :not(.attached), 11096 .ui.top.attached.label + :not(.attached) { 11097 margin-top: 2rem !important; 11098 } 11099 11100 .ui.bottom.attached.label ~ :last-child:not(.attached) { 11101 margin-top: 0; 11102 margin-bottom: 2rem !important; 11103 } 11104 11105 .ui.segment:not(.basic) > .ui.top.attached.label { 11106 margin-top: -1px; 11107 } 11108 11109 .ui.segment:not(.basic) > .ui.bottom.attached.label { 11110 margin-bottom: -1px; 11111 } 11112 11113 .ui.segment:not(.basic) > .ui.attached.label:not(.right) { 11114 margin-left: -1px; 11115 } 11116 11117 .ui.segment:not(.basic) > .ui.right.attached.label { 11118 margin-right: -1px; 11119 } 11120 11121 .ui.segment:not(.basic) > .ui.attached.label:not(.left):not(.right) { 11122 width: calc(100% + 2px); 11123 } 11124 11125 /******************************* 11126 Types 11127 *******************************/ 11128 11129 /*------------------- 11130 Attached 11131 --------------------*/ 11132 11133 .ui[class*="top attached"].label, 11134 .ui.attached.label { 11135 width: 100%; 11136 position: absolute; 11137 margin: 0; 11138 top: 0; 11139 left: 0; 11140 padding: 0.75em 1em; 11141 border-radius: 0.21428571rem 0.21428571rem 0 0; 11142 } 11143 11144 .ui[class*="bottom attached"].label { 11145 top: auto; 11146 bottom: 0; 11147 border-radius: 0 0 0.21428571rem 0.21428571rem; 11148 } 11149 11150 .ui[class*="top left attached"].label { 11151 width: auto; 11152 margin-top: 0; 11153 border-radius: 0.21428571rem 0 0.28571429rem 0; 11154 } 11155 11156 .ui[class*="top right attached"].label { 11157 width: auto; 11158 left: auto; 11159 right: 0; 11160 border-radius: 0 0.21428571rem 0 0.28571429rem; 11161 } 11162 11163 .ui[class*="bottom left attached"].label { 11164 width: auto; 11165 top: auto; 11166 bottom: 0; 11167 border-radius: 0 0.28571429rem 0 0.21428571rem; 11168 } 11169 11170 .ui[class*="bottom right attached"].label { 11171 top: auto; 11172 bottom: 0; 11173 left: auto; 11174 right: 0; 11175 width: auto; 11176 border-radius: 0.28571429rem 0 0.21428571rem 0; 11177 } 11178 11179 /******************************* 11180 States 11181 *******************************/ 11182 11183 /*------------------- 11184 Disabled 11185 --------------------*/ 11186 11187 .ui.label.disabled { 11188 opacity: 0.5; 11189 } 11190 11191 /*------------------- 11192 Hover 11193 --------------------*/ 11194 11195 .ui.labels a.label:hover, 11196 a.ui.label:hover { 11197 background-color: #E0E0E0; 11198 border-color: #E0E0E0; 11199 background-image: none; 11200 color: rgba(0, 0, 0, 0.8); 11201 } 11202 11203 .ui.labels a.label:hover:before, 11204 a.ui.label:hover:before { 11205 color: rgba(0, 0, 0, 0.8); 11206 } 11207 11208 /*------------------- 11209 Active 11210 --------------------*/ 11211 11212 .ui.active.label { 11213 background-color: #D0D0D0; 11214 border-color: #D0D0D0; 11215 background-image: none; 11216 color: rgba(0, 0, 0, 0.95); 11217 } 11218 11219 .ui.active.label:before { 11220 background-color: #D0D0D0; 11221 background-image: none; 11222 color: rgba(0, 0, 0, 0.95); 11223 } 11224 11225 /*------------------- 11226 Active Hover 11227 --------------------*/ 11228 11229 .ui.labels a.active.label:hover, 11230 a.ui.active.label:hover { 11231 background-color: #C8C8C8; 11232 border-color: #C8C8C8; 11233 background-image: none; 11234 color: rgba(0, 0, 0, 0.95); 11235 } 11236 11237 .ui.labels a.active.label:hover:before, 11238 a.ui.active.label:hover:before { 11239 background-color: #C8C8C8; 11240 background-image: none; 11241 color: rgba(0, 0, 0, 0.95); 11242 } 11243 11244 /*------------------- 11245 Visible 11246 --------------------*/ 11247 11248 .ui.labels.visible .label, 11249 .ui.label.visible:not(.dropdown) { 11250 display: inline-block !important; 11251 } 11252 11253 /*------------------- 11254 Hidden 11255 --------------------*/ 11256 11257 .ui.labels.hidden .label, 11258 .ui.label.hidden { 11259 display: none !important; 11260 } 11261 11262 /******************************* 11263 Variations 11264 *******************************/ 11265 11266 /*------------------- 11267 Basic 11268 --------------------*/ 11269 11270 .ui.basic.labels .label, 11271 .ui.basic.label { 11272 background: none #FFFFFF; 11273 border: 1px solid rgba(34, 36, 38, 0.15); 11274 color: rgba(0, 0, 0, 0.87); 11275 box-shadow: none; 11276 padding-top: calc(0.5833em - 1px); 11277 padding-bottom: calc(0.5833em - 1px); 11278 padding-right: calc(0.833em - 1px); 11279 } 11280 11281 .ui.basic.labels:not(.tag):not(.image):not(.ribbon) .label, 11282 .ui.basic.label:not(.tag):not(.image):not(.ribbon) { 11283 padding-left: calc(0.833em - 1px); 11284 } 11285 11286 /* Link */ 11287 11288 .ui.basic.labels a.label:hover, 11289 a.ui.basic.label:hover { 11290 text-decoration: none; 11291 background: none #FFFFFF; 11292 color: #1e70bf; 11293 box-shadow: none; 11294 } 11295 11296 /* Pointing */ 11297 11298 .ui.basic.pointing.label:before { 11299 border-color: inherit; 11300 } 11301 11302 /*------------------- 11303 Fluid 11304 --------------------*/ 11305 11306 .ui.label.fluid, 11307 .ui.fluid.labels > .label { 11308 width: 100%; 11309 box-sizing: border-box; 11310 } 11311 11312 /*------------------- 11313 Colors 11314 --------------------*/ 11315 11316 .ui.primary.labels .label, 11317 .ui.ui.ui.primary.label { 11318 background-color: #2185D0; 11319 border-color: #2185D0; 11320 color: rgba(255, 255, 255, 0.9); 11321 } 11322 11323 /* Link */ 11324 11325 .ui.primary.labels a.label:hover, 11326 a.ui.ui.ui.primary.label:hover { 11327 background-color: #1678c2; 11328 border-color: #1678c2; 11329 color: #FFFFFF; 11330 } 11331 11332 /* Basic */ 11333 11334 .ui.basic.labels .primary.label, 11335 .ui.ui.ui.basic.primary.label { 11336 background: none #FFFFFF; 11337 border-color: #2185D0; 11338 color: #2185D0; 11339 } 11340 11341 .ui.basic.labels a.primary.label:hover, 11342 a.ui.ui.ui.basic.primary.label:hover { 11343 background: none #FFFFFF; 11344 border-color: #1678c2; 11345 color: #1678c2; 11346 } 11347 11348 .ui.secondary.labels .label, 11349 .ui.ui.ui.secondary.label { 11350 background-color: #1B1C1D; 11351 border-color: #1B1C1D; 11352 color: rgba(255, 255, 255, 0.9); 11353 } 11354 11355 /* Link */ 11356 11357 .ui.secondary.labels a.label:hover, 11358 a.ui.ui.ui.secondary.label:hover { 11359 background-color: #27292a; 11360 border-color: #27292a; 11361 color: #FFFFFF; 11362 } 11363 11364 /* Basic */ 11365 11366 .ui.basic.labels .secondary.label, 11367 .ui.ui.ui.basic.secondary.label { 11368 background: none #FFFFFF; 11369 border-color: #1B1C1D; 11370 color: #1B1C1D; 11371 } 11372 11373 .ui.basic.labels a.secondary.label:hover, 11374 a.ui.ui.ui.basic.secondary.label:hover { 11375 background: none #FFFFFF; 11376 border-color: #27292a; 11377 color: #27292a; 11378 } 11379 11380 .ui.red.labels .label, 11381 .ui.ui.ui.red.label { 11382 background-color: #DB2828; 11383 border-color: #DB2828; 11384 color: #FFFFFF; 11385 } 11386 11387 /* Link */ 11388 11389 .ui.red.labels a.label:hover, 11390 a.ui.ui.ui.red.label:hover { 11391 background-color: #d01919; 11392 border-color: #d01919; 11393 color: #FFFFFF; 11394 } 11395 11396 /* Basic */ 11397 11398 .ui.basic.labels .red.label, 11399 .ui.ui.ui.basic.red.label { 11400 background: none #FFFFFF; 11401 border-color: #DB2828; 11402 color: #DB2828; 11403 } 11404 11405 .ui.basic.labels a.red.label:hover, 11406 a.ui.ui.ui.basic.red.label:hover { 11407 background: none #FFFFFF; 11408 border-color: #d01919; 11409 color: #d01919; 11410 } 11411 11412 .ui.orange.labels .label, 11413 .ui.ui.ui.orange.label { 11414 background-color: #F2711C; 11415 border-color: #F2711C; 11416 color: #FFFFFF; 11417 } 11418 11419 /* Link */ 11420 11421 .ui.orange.labels a.label:hover, 11422 a.ui.ui.ui.orange.label:hover { 11423 background-color: #f26202; 11424 border-color: #f26202; 11425 color: #FFFFFF; 11426 } 11427 11428 /* Basic */ 11429 11430 .ui.basic.labels .orange.label, 11431 .ui.ui.ui.basic.orange.label { 11432 background: none #FFFFFF; 11433 border-color: #F2711C; 11434 color: #F2711C; 11435 } 11436 11437 .ui.basic.labels a.orange.label:hover, 11438 a.ui.ui.ui.basic.orange.label:hover { 11439 background: none #FFFFFF; 11440 border-color: #f26202; 11441 color: #f26202; 11442 } 11443 11444 .ui.yellow.labels .label, 11445 .ui.ui.ui.yellow.label { 11446 background-color: #FBBD08; 11447 border-color: #FBBD08; 11448 color: #FFFFFF; 11449 } 11450 11451 /* Link */ 11452 11453 .ui.yellow.labels a.label:hover, 11454 a.ui.ui.ui.yellow.label:hover { 11455 background-color: #eaae00; 11456 border-color: #eaae00; 11457 color: #FFFFFF; 11458 } 11459 11460 /* Basic */ 11461 11462 .ui.basic.labels .yellow.label, 11463 .ui.ui.ui.basic.yellow.label { 11464 background: none #FFFFFF; 11465 border-color: #FBBD08; 11466 color: #FBBD08; 11467 } 11468 11469 .ui.basic.labels a.yellow.label:hover, 11470 a.ui.ui.ui.basic.yellow.label:hover { 11471 background: none #FFFFFF; 11472 border-color: #eaae00; 11473 color: #eaae00; 11474 } 11475 11476 .ui.olive.labels .label, 11477 .ui.ui.ui.olive.label { 11478 background-color: #B5CC18; 11479 border-color: #B5CC18; 11480 color: #FFFFFF; 11481 } 11482 11483 /* Link */ 11484 11485 .ui.olive.labels a.label:hover, 11486 a.ui.ui.ui.olive.label:hover { 11487 background-color: #a7bd0d; 11488 border-color: #a7bd0d; 11489 color: #FFFFFF; 11490 } 11491 11492 /* Basic */ 11493 11494 .ui.basic.labels .olive.label, 11495 .ui.ui.ui.basic.olive.label { 11496 background: none #FFFFFF; 11497 border-color: #B5CC18; 11498 color: #B5CC18; 11499 } 11500 11501 .ui.basic.labels a.olive.label:hover, 11502 a.ui.ui.ui.basic.olive.label:hover { 11503 background: none #FFFFFF; 11504 border-color: #a7bd0d; 11505 color: #a7bd0d; 11506 } 11507 11508 .ui.green.labels .label, 11509 .ui.ui.ui.green.label { 11510 background-color: #21BA45; 11511 border-color: #21BA45; 11512 color: #FFFFFF; 11513 } 11514 11515 /* Link */ 11516 11517 .ui.green.labels a.label:hover, 11518 a.ui.ui.ui.green.label:hover { 11519 background-color: #16ab39; 11520 border-color: #16ab39; 11521 color: #FFFFFF; 11522 } 11523 11524 /* Basic */ 11525 11526 .ui.basic.labels .green.label, 11527 .ui.ui.ui.basic.green.label { 11528 background: none #FFFFFF; 11529 border-color: #21BA45; 11530 color: #21BA45; 11531 } 11532 11533 .ui.basic.labels a.green.label:hover, 11534 a.ui.ui.ui.basic.green.label:hover { 11535 background: none #FFFFFF; 11536 border-color: #16ab39; 11537 color: #16ab39; 11538 } 11539 11540 .ui.teal.labels .label, 11541 .ui.ui.ui.teal.label { 11542 background-color: #00B5AD; 11543 border-color: #00B5AD; 11544 color: #FFFFFF; 11545 } 11546 11547 /* Link */ 11548 11549 .ui.teal.labels a.label:hover, 11550 a.ui.ui.ui.teal.label:hover { 11551 background-color: #009c95; 11552 border-color: #009c95; 11553 color: #FFFFFF; 11554 } 11555 11556 /* Basic */ 11557 11558 .ui.basic.labels .teal.label, 11559 .ui.ui.ui.basic.teal.label { 11560 background: none #FFFFFF; 11561 border-color: #00B5AD; 11562 color: #00B5AD; 11563 } 11564 11565 .ui.basic.labels a.teal.label:hover, 11566 a.ui.ui.ui.basic.teal.label:hover { 11567 background: none #FFFFFF; 11568 border-color: #009c95; 11569 color: #009c95; 11570 } 11571 11572 .ui.blue.labels .label, 11573 .ui.ui.ui.blue.label { 11574 background-color: #2185D0; 11575 border-color: #2185D0; 11576 color: #FFFFFF; 11577 } 11578 11579 /* Link */ 11580 11581 .ui.blue.labels a.label:hover, 11582 a.ui.ui.ui.blue.label:hover { 11583 background-color: #1678c2; 11584 border-color: #1678c2; 11585 color: #FFFFFF; 11586 } 11587 11588 /* Basic */ 11589 11590 .ui.basic.labels .blue.label, 11591 .ui.ui.ui.basic.blue.label { 11592 background: none #FFFFFF; 11593 border-color: #2185D0; 11594 color: #2185D0; 11595 } 11596 11597 .ui.basic.labels a.blue.label:hover, 11598 a.ui.ui.ui.basic.blue.label:hover { 11599 background: none #FFFFFF; 11600 border-color: #1678c2; 11601 color: #1678c2; 11602 } 11603 11604 .ui.violet.labels .label, 11605 .ui.ui.ui.violet.label { 11606 background-color: #6435C9; 11607 border-color: #6435C9; 11608 color: #FFFFFF; 11609 } 11610 11611 /* Link */ 11612 11613 .ui.violet.labels a.label:hover, 11614 a.ui.ui.ui.violet.label:hover { 11615 background-color: #5829bb; 11616 border-color: #5829bb; 11617 color: #FFFFFF; 11618 } 11619 11620 /* Basic */ 11621 11622 .ui.basic.labels .violet.label, 11623 .ui.ui.ui.basic.violet.label { 11624 background: none #FFFFFF; 11625 border-color: #6435C9; 11626 color: #6435C9; 11627 } 11628 11629 .ui.basic.labels a.violet.label:hover, 11630 a.ui.ui.ui.basic.violet.label:hover { 11631 background: none #FFFFFF; 11632 border-color: #5829bb; 11633 color: #5829bb; 11634 } 11635 11636 .ui.purple.labels .label, 11637 .ui.ui.ui.purple.label { 11638 background-color: #A333C8; 11639 border-color: #A333C8; 11640 color: #FFFFFF; 11641 } 11642 11643 /* Link */ 11644 11645 .ui.purple.labels a.label:hover, 11646 a.ui.ui.ui.purple.label:hover { 11647 background-color: #9627ba; 11648 border-color: #9627ba; 11649 color: #FFFFFF; 11650 } 11651 11652 /* Basic */ 11653 11654 .ui.basic.labels .purple.label, 11655 .ui.ui.ui.basic.purple.label { 11656 background: none #FFFFFF; 11657 border-color: #A333C8; 11658 color: #A333C8; 11659 } 11660 11661 .ui.basic.labels a.purple.label:hover, 11662 a.ui.ui.ui.basic.purple.label:hover { 11663 background: none #FFFFFF; 11664 border-color: #9627ba; 11665 color: #9627ba; 11666 } 11667 11668 .ui.pink.labels .label, 11669 .ui.ui.ui.pink.label { 11670 background-color: #E03997; 11671 border-color: #E03997; 11672 color: #FFFFFF; 11673 } 11674 11675 /* Link */ 11676 11677 .ui.pink.labels a.label:hover, 11678 a.ui.ui.ui.pink.label:hover { 11679 background-color: #e61a8d; 11680 border-color: #e61a8d; 11681 color: #FFFFFF; 11682 } 11683 11684 /* Basic */ 11685 11686 .ui.basic.labels .pink.label, 11687 .ui.ui.ui.basic.pink.label { 11688 background: none #FFFFFF; 11689 border-color: #E03997; 11690 color: #E03997; 11691 } 11692 11693 .ui.basic.labels a.pink.label:hover, 11694 a.ui.ui.ui.basic.pink.label:hover { 11695 background: none #FFFFFF; 11696 border-color: #e61a8d; 11697 color: #e61a8d; 11698 } 11699 11700 .ui.brown.labels .label, 11701 .ui.ui.ui.brown.label { 11702 background-color: #A5673F; 11703 border-color: #A5673F; 11704 color: #FFFFFF; 11705 } 11706 11707 /* Link */ 11708 11709 .ui.brown.labels a.label:hover, 11710 a.ui.ui.ui.brown.label:hover { 11711 background-color: #975b33; 11712 border-color: #975b33; 11713 color: #FFFFFF; 11714 } 11715 11716 /* Basic */ 11717 11718 .ui.basic.labels .brown.label, 11719 .ui.ui.ui.basic.brown.label { 11720 background: none #FFFFFF; 11721 border-color: #A5673F; 11722 color: #A5673F; 11723 } 11724 11725 .ui.basic.labels a.brown.label:hover, 11726 a.ui.ui.ui.basic.brown.label:hover { 11727 background: none #FFFFFF; 11728 border-color: #975b33; 11729 color: #975b33; 11730 } 11731 11732 .ui.grey.labels .label, 11733 .ui.ui.ui.grey.label { 11734 background-color: #767676; 11735 border-color: #767676; 11736 color: #FFFFFF; 11737 } 11738 11739 /* Link */ 11740 11741 .ui.grey.labels a.label:hover, 11742 a.ui.ui.ui.grey.label:hover { 11743 background-color: #838383; 11744 border-color: #838383; 11745 color: #FFFFFF; 11746 } 11747 11748 /* Basic */ 11749 11750 .ui.basic.labels .grey.label, 11751 .ui.ui.ui.basic.grey.label { 11752 background: none #FFFFFF; 11753 border-color: #767676; 11754 color: #767676; 11755 } 11756 11757 .ui.basic.labels a.grey.label:hover, 11758 a.ui.ui.ui.basic.grey.label:hover { 11759 background: none #FFFFFF; 11760 border-color: #838383; 11761 color: #838383; 11762 } 11763 11764 .ui.black.labels .label, 11765 .ui.ui.ui.black.label { 11766 background-color: #1B1C1D; 11767 border-color: #1B1C1D; 11768 color: #FFFFFF; 11769 } 11770 11771 /* Link */ 11772 11773 .ui.black.labels a.label:hover, 11774 a.ui.ui.ui.black.label:hover { 11775 background-color: #27292a; 11776 border-color: #27292a; 11777 color: #FFFFFF; 11778 } 11779 11780 /* Basic */ 11781 11782 .ui.basic.labels .black.label, 11783 .ui.ui.ui.basic.black.label { 11784 background: none #FFFFFF; 11785 border-color: #1B1C1D; 11786 color: #1B1C1D; 11787 } 11788 11789 .ui.basic.labels a.black.label:hover, 11790 a.ui.ui.ui.basic.black.label:hover { 11791 background: none #FFFFFF; 11792 border-color: #27292a; 11793 color: #27292a; 11794 } 11795 11796 /*------------------- 11797 Horizontal 11798 --------------------*/ 11799 11800 .ui.horizontal.labels .label, 11801 .ui.horizontal.label { 11802 margin: 0 0.5em 0 0; 11803 padding: 0.4em 0.833em; 11804 min-width: 3em; 11805 text-align: center; 11806 } 11807 11808 /*------------------- 11809 Circular 11810 --------------------*/ 11811 11812 .ui.circular.labels .label, 11813 .ui.circular.label { 11814 min-width: 2em; 11815 min-height: 2em; 11816 padding: 0.5em !important; 11817 line-height: 1em; 11818 text-align: center; 11819 border-radius: 500rem; 11820 } 11821 11822 .ui.empty.circular.labels .label, 11823 .ui.empty.circular.label { 11824 min-width: 0; 11825 min-height: 0; 11826 overflow: hidden; 11827 width: 0.5em; 11828 height: 0.5em; 11829 vertical-align: baseline; 11830 } 11831 11832 /*------------------- 11833 Pointing 11834 --------------------*/ 11835 11836 .ui.pointing.label { 11837 position: relative; 11838 } 11839 11840 .ui.attached.pointing.label { 11841 position: absolute; 11842 } 11843 11844 .ui.pointing.label:before { 11845 background-color: inherit; 11846 background-image: inherit; 11847 border-width: 0; 11848 border-style: solid; 11849 border-color: inherit; 11850 } 11851 11852 /* Arrow */ 11853 11854 .ui.pointing.label:before { 11855 position: absolute; 11856 content: ''; 11857 transform: rotate(45deg); 11858 background-image: none; 11859 z-index: 2; 11860 width: 0.6666em; 11861 height: 0.6666em; 11862 transition: none; 11863 } 11864 11865 /*--- Above ---*/ 11866 11867 .ui.pointing.label, 11868 .ui[class*="pointing above"].label { 11869 margin-top: 1em; 11870 } 11871 11872 .ui.pointing.label:before, 11873 .ui[class*="pointing above"].label:before { 11874 border-width: 1px 0 0 1px; 11875 transform: translateX(-50%) translateY(-50%) rotate(45deg); 11876 top: 0; 11877 left: 50%; 11878 } 11879 11880 /*--- Below ---*/ 11881 11882 .ui[class*="bottom pointing"].label, 11883 .ui[class*="pointing below"].label { 11884 margin-top: 0; 11885 margin-bottom: 1em; 11886 } 11887 11888 .ui[class*="bottom pointing"].label:before, 11889 .ui[class*="pointing below"].label:before { 11890 border-width: 0 1px 1px 0; 11891 top: auto; 11892 right: auto; 11893 transform: translateX(-50%) translateY(-50%) rotate(45deg); 11894 top: 100%; 11895 left: 50%; 11896 } 11897 11898 /*--- Left ---*/ 11899 11900 .ui[class*="left pointing"].label { 11901 margin-top: 0; 11902 margin-left: 0.6666em; 11903 } 11904 11905 .ui[class*="left pointing"].label:before { 11906 border-width: 0 0 1px 1px; 11907 transform: translateX(-50%) translateY(-50%) rotate(45deg); 11908 bottom: auto; 11909 right: auto; 11910 top: 50%; 11911 left: 0; 11912 } 11913 11914 /*--- Right ---*/ 11915 11916 .ui[class*="right pointing"].label { 11917 margin-top: 0; 11918 margin-right: 0.6666em; 11919 } 11920 11921 .ui[class*="right pointing"].label:before { 11922 border-width: 1px 1px 0 0; 11923 transform: translateX(50%) translateY(-50%) rotate(45deg); 11924 top: 50%; 11925 right: 0; 11926 bottom: auto; 11927 left: auto; 11928 } 11929 11930 /* Basic Pointing */ 11931 11932 /*--- Above ---*/ 11933 11934 .ui.basic.pointing.label:before, 11935 .ui.basic[class*="pointing above"].label:before { 11936 margin-top: -1px; 11937 } 11938 11939 /*--- Below ---*/ 11940 11941 .ui.basic[class*="bottom pointing"].label:before, 11942 .ui.basic[class*="pointing below"].label:before { 11943 bottom: auto; 11944 top: 100%; 11945 margin-top: 1px; 11946 } 11947 11948 /*--- Left ---*/ 11949 11950 .ui.basic[class*="left pointing"].label:before { 11951 top: 50%; 11952 left: -1px; 11953 } 11954 11955 /*--- Right ---*/ 11956 11957 .ui.basic[class*="right pointing"].label:before { 11958 top: 50%; 11959 right: -1px; 11960 } 11961 11962 /*------------------ 11963 Floating Label 11964 -------------------*/ 11965 11966 .ui.floating.label { 11967 position: absolute; 11968 z-index: 100; 11969 top: -1em; 11970 right: 0; 11971 white-space: nowrap; 11972 transform: translateX(50%); 11973 } 11974 11975 .ui.right.aligned.floating.label { 11976 transform: translateX(1.2em); 11977 } 11978 11979 .ui.left.floating.label { 11980 left: 0; 11981 right: auto; 11982 transform: translateX(-50%); 11983 } 11984 11985 .ui.left.aligned.floating.label { 11986 transform: translateX(-1.2em); 11987 } 11988 11989 .ui.bottom.floating.label { 11990 top: auto; 11991 bottom: -1em; 11992 } 11993 11994 /*------------------- 11995 Sizes 11996 --------------------*/ 11997 11998 .ui.labels .label, 11999 .ui.label { 12000 font-size: 0.85714286rem; 12001 } 12002 12003 .ui.mini.labels .label, 12004 .ui.mini.label { 12005 font-size: 0.64285714rem; 12006 } 12007 12008 .ui.tiny.labels .label, 12009 .ui.tiny.label { 12010 font-size: 0.71428571rem; 12011 } 12012 12013 .ui.small.labels .label, 12014 .ui.small.label { 12015 font-size: 0.78571429rem; 12016 } 12017 12018 .ui.large.labels .label, 12019 .ui.large.label { 12020 font-size: 1rem; 12021 } 12022 12023 .ui.big.labels .label, 12024 .ui.big.label { 12025 font-size: 1.28571429rem; 12026 } 12027 12028 .ui.huge.labels .label, 12029 .ui.huge.label { 12030 font-size: 1.42857143rem; 12031 } 12032 12033 .ui.massive.labels .label, 12034 .ui.massive.label { 12035 font-size: 1.71428571rem; 12036 } 12037 12038 /******************************* 12039 Theme Overrides 12040 *******************************/ 12041 12042 /******************************* 12043 Site Overrides 12044 *******************************/ 12045 /*! 12046 * # Fomantic-UI - List 12047 * http://github.com/fomantic/Fomantic-UI/ 12048 * 12049 * 12050 * Released under the MIT license 12051 * http://opensource.org/licenses/MIT 12052 * 12053 */ 12054 12055 /******************************* 12056 List 12057 *******************************/ 12058 12059 ul.ui.list, 12060 ol.ui.list, 12061 .ui.list { 12062 list-style-type: none; 12063 margin: 1em 0; 12064 padding: 0 0; 12065 } 12066 12067 ul.ui.list:first-child, 12068 ol.ui.list:first-child, 12069 .ui.list:first-child { 12070 margin-top: 0; 12071 padding-top: 0; 12072 } 12073 12074 ul.ui.list:last-child, 12075 ol.ui.list:last-child, 12076 .ui.list:last-child { 12077 margin-bottom: 0; 12078 padding-bottom: 0; 12079 } 12080 12081 /******************************* 12082 Content 12083 *******************************/ 12084 12085 /* List Item */ 12086 12087 ul.ui.list li, 12088 ol.ui.list li, 12089 .ui.list > .item, 12090 .ui.list .list > .item { 12091 display: list-item; 12092 table-layout: fixed; 12093 list-style-type: none; 12094 list-style-position: outside; 12095 padding: 0.21428571em 0; 12096 line-height: 1.14285714em; 12097 } 12098 12099 ul.ui.list > li:first-child:after, 12100 ol.ui.list > li:first-child:after, 12101 .ui.list > .list > .item:after, 12102 .ui.list > .item:after { 12103 content: ''; 12104 display: block; 12105 height: 0; 12106 clear: both; 12107 visibility: hidden; 12108 } 12109 12110 ul.ui.list li:first-child, 12111 ol.ui.list li:first-child, 12112 .ui.list .list > .item:first-child, 12113 .ui.list > .item:first-child { 12114 padding-top: 0; 12115 } 12116 12117 ul.ui.list li:last-child, 12118 ol.ui.list li:last-child, 12119 .ui.list .list > .item:last-child, 12120 .ui.list > .item:last-child { 12121 padding-bottom: 0; 12122 } 12123 12124 /* Child List */ 12125 12126 ul.ui.list ul, 12127 ol.ui.list ol, 12128 .ui.list .list:not(.icon) { 12129 clear: both; 12130 margin: 0; 12131 padding: 0.75em 0 0.25em 0.5em; 12132 } 12133 12134 /* Child Item */ 12135 12136 ul.ui.list ul li, 12137 ol.ui.list ol li, 12138 .ui.list .list > .item { 12139 padding: 0.14285714em 0; 12140 line-height: inherit; 12141 } 12142 12143 /* Icon */ 12144 12145 .ui.list .list > .item > i.icon, 12146 .ui.list > .item > i.icon { 12147 display: table-cell; 12148 min-width: 1.55em; 12149 margin: 0; 12150 padding-top: 0; 12151 transition: color 0.1s ease; 12152 } 12153 12154 .ui.list .list > .item > i.icon:not(.loading), 12155 .ui.list > .item > i.icon:not(.loading) { 12156 padding-right: 0.28571429em; 12157 vertical-align: top; 12158 } 12159 12160 .ui.list .list > .item > i.icon:only-child, 12161 .ui.list > .item > i.icon:only-child { 12162 display: inline-block; 12163 min-width: auto; 12164 vertical-align: top; 12165 } 12166 12167 /* Image */ 12168 12169 .ui.list .list > .item > .image, 12170 .ui.list > .item > .image { 12171 display: table-cell; 12172 background-color: transparent; 12173 margin: 0; 12174 vertical-align: top; 12175 } 12176 12177 .ui.list .list > .item > .image:not(:only-child):not(img), 12178 .ui.list > .item > .image:not(:only-child):not(img) { 12179 padding-right: 0.5em; 12180 } 12181 12182 .ui.list .list > .item > .image img, 12183 .ui.list > .item > .image img { 12184 vertical-align: top; 12185 } 12186 12187 .ui.list .list > .item > img.image, 12188 .ui.list .list > .item > .image:only-child, 12189 .ui.list > .item > img.image, 12190 .ui.list > .item > .image:only-child { 12191 display: inline-block; 12192 } 12193 12194 /* Content */ 12195 12196 .ui.list .list > .item > .content, 12197 .ui.list > .item > .content { 12198 line-height: 1.14285714em; 12199 color: rgba(0, 0, 0, 0.87); 12200 } 12201 12202 .ui.list .list > .item > .image + .content, 12203 .ui.list .list > .item > i.icon + .content, 12204 .ui.list > .item > .image + .content, 12205 .ui.list > .item > i.icon + .content { 12206 display: table-cell; 12207 width: 100%; 12208 padding: 0 0 0 0.5em; 12209 vertical-align: top; 12210 } 12211 12212 .ui.list .list > .item > i.loading.icon + .content, 12213 .ui.list > .item > i.loading.icon + .content { 12214 padding-left: calc(0.2857142857142857em + 0.5em); 12215 } 12216 12217 .ui.list .list > .item > img.image + .content, 12218 .ui.list > .item > img.image + .content { 12219 display: inline-block; 12220 width: auto; 12221 } 12222 12223 .ui.list .list > .item > .content > .list, 12224 .ui.list > .item > .content > .list { 12225 margin-left: 0; 12226 padding-left: 0; 12227 } 12228 12229 /* Header */ 12230 12231 .ui.list .list > .item .header, 12232 .ui.list > .item .header { 12233 display: block; 12234 margin: 0; 12235 font-family: var(--fonts-regular); 12236 font-weight: 500; 12237 color: rgba(0, 0, 0, 0.87); 12238 } 12239 12240 /* Description */ 12241 12242 .ui.list .list > .item .description, 12243 .ui.list > .item .description { 12244 display: block; 12245 color: rgba(0, 0, 0, 0.7); 12246 } 12247 12248 /* Child Link */ 12249 12250 .ui.list > .item a, 12251 .ui.list .list > .item a { 12252 cursor: pointer; 12253 } 12254 12255 /* Linking Item */ 12256 12257 .ui.list .list > a.item, 12258 .ui.list > a.item { 12259 cursor: pointer; 12260 color: #4183C4; 12261 } 12262 12263 .ui.list .list > a.item:hover, 12264 .ui.list > a.item:hover { 12265 color: #1e70bf; 12266 } 12267 12268 /* Linked Item Icons */ 12269 12270 .ui.list .list > a.item > i.icons, 12271 .ui.list > a.item > i.icons, 12272 .ui.list .list > a.item > i.icon, 12273 .ui.list > a.item > i.icon { 12274 color: rgba(0, 0, 0, 0.4); 12275 } 12276 12277 /* Header Link */ 12278 12279 .ui.list .list > .item a.header, 12280 .ui.list > .item a.header { 12281 cursor: pointer; 12282 color: #4183C4 !important; 12283 } 12284 12285 .ui.list .list > .item > a.header:hover, 12286 .ui.list > .item > a.header:hover { 12287 color: #1e70bf !important; 12288 } 12289 12290 /* Floated Content */ 12291 12292 .ui[class*="left floated"].list { 12293 float: left; 12294 } 12295 12296 .ui[class*="right floated"].list { 12297 float: right; 12298 } 12299 12300 .ui.list .list > .item [class*="left floated"], 12301 .ui.list > .item [class*="left floated"] { 12302 float: left; 12303 margin: 0 1em 0 0; 12304 } 12305 12306 .ui.list .list > .item [class*="right floated"], 12307 .ui.list > .item [class*="right floated"] { 12308 float: right; 12309 margin: 0 0 0 1em; 12310 } 12311 12312 /******************************* 12313 Coupling 12314 *******************************/ 12315 12316 .ui.menu .ui.list > .item, 12317 .ui.menu .ui.list .list > .item { 12318 display: list-item; 12319 table-layout: fixed; 12320 background-color: transparent; 12321 list-style-type: none; 12322 list-style-position: outside; 12323 padding: 0.21428571em 0; 12324 line-height: 1.14285714em; 12325 } 12326 12327 .ui.menu .ui.list .list > .item:before, 12328 .ui.menu .ui.list > .item:before { 12329 border: none; 12330 background: none; 12331 } 12332 12333 .ui.menu .ui.list .list > .item:first-child, 12334 .ui.menu .ui.list > .item:first-child { 12335 padding-top: 0; 12336 } 12337 12338 .ui.menu .ui.list .list > .item:last-child, 12339 .ui.menu .ui.list > .item:last-child { 12340 padding-bottom: 0; 12341 } 12342 12343 /******************************* 12344 Types 12345 *******************************/ 12346 12347 /*------------------- 12348 Horizontal 12349 --------------------*/ 12350 12351 .ui.horizontal.list { 12352 display: inline-block; 12353 font-size: 0; 12354 } 12355 12356 .ui.horizontal.list > .item { 12357 display: inline-block; 12358 margin-right: 1em; 12359 font-size: 1rem; 12360 } 12361 12362 .ui.horizontal.list:not(.celled) > .item:last-child { 12363 margin-right: 0; 12364 padding-right: 0; 12365 } 12366 12367 .ui.horizontal.list .list:not(.icon) { 12368 padding-left: 0; 12369 padding-bottom: 0; 12370 } 12371 12372 .ui.horizontal.list > .item > .image, 12373 .ui.horizontal.list .list > .item > .image, 12374 .ui.horizontal.list > .item > i.icon, 12375 .ui.horizontal.list .list > .item > i.icon, 12376 .ui.horizontal.list > .item > .content, 12377 .ui.horizontal.list .list > .item > .content { 12378 vertical-align: middle; 12379 } 12380 12381 /* Padding on all elements */ 12382 12383 .ui.horizontal.list > .item:first-child, 12384 .ui.horizontal.list > .item:last-child { 12385 padding-top: 0.21428571em; 12386 padding-bottom: 0.21428571em; 12387 } 12388 12389 /* Horizontal List */ 12390 12391 .ui.horizontal.list > .item > i.icon, 12392 .ui.horizontal.list .item > i.icons > i.icon { 12393 margin: 0; 12394 padding: 0 0.25em 0 0; 12395 } 12396 12397 .ui.horizontal.list > .item > .image + .content, 12398 .ui.horizontal.list > .item > i.icon, 12399 .ui.horizontal.list > .item > i.icon + .content { 12400 float: none; 12401 display: inline-block; 12402 width: auto; 12403 } 12404 12405 .ui.horizontal.list > .item > .image { 12406 display: inline-block; 12407 } 12408 12409 /******************************* 12410 States 12411 *******************************/ 12412 12413 /*------------------- 12414 Disabled 12415 --------------------*/ 12416 12417 .ui.list .list > .disabled.item, 12418 .ui.list > .disabled.item { 12419 pointer-events: none; 12420 color: rgba(40, 40, 40, 0.3) !important; 12421 } 12422 12423 /*------------------- 12424 Hover 12425 --------------------*/ 12426 12427 .ui.list .list > a.item:hover > .icons, 12428 .ui.list > a.item:hover > .icons, 12429 .ui.list .list > a.item:hover > i.icon, 12430 .ui.list > a.item:hover > i.icon { 12431 color: rgba(0, 0, 0, 0.87); 12432 } 12433 12434 /******************************* 12435 Variations 12436 *******************************/ 12437 12438 /*------------------- 12439 Aligned 12440 --------------------*/ 12441 12442 .ui.list[class*="top aligned"] .image, 12443 .ui.list[class*="top aligned"] .content, 12444 .ui.list [class*="top aligned"] { 12445 vertical-align: top !important; 12446 } 12447 12448 .ui.list[class*="middle aligned"] .image, 12449 .ui.list[class*="middle aligned"] .content, 12450 .ui.list [class*="middle aligned"] { 12451 vertical-align: middle !important; 12452 } 12453 12454 .ui.list[class*="bottom aligned"] .image, 12455 .ui.list[class*="bottom aligned"] .content, 12456 .ui.list [class*="bottom aligned"] { 12457 vertical-align: bottom !important; 12458 } 12459 12460 /*------------------- 12461 Link 12462 --------------------*/ 12463 12464 .ui.link.list .item, 12465 .ui.link.list a.item, 12466 .ui.link.list .item a:not(.ui) { 12467 color: rgba(0, 0, 0, 0.4); 12468 transition: 0.1s color ease; 12469 } 12470 12471 .ui.link.list.list a.item:hover, 12472 .ui.link.list.list .item a:not(.ui):hover { 12473 color: rgba(0, 0, 0, 0.8); 12474 } 12475 12476 .ui.link.list.list a.item:active, 12477 .ui.link.list.list .item a:not(.ui):active { 12478 color: rgba(0, 0, 0, 0.9); 12479 } 12480 12481 .ui.link.list.list .active.item, 12482 .ui.link.list.list .active.item a:not(.ui) { 12483 color: rgba(0, 0, 0, 0.95); 12484 } 12485 12486 /*------------------- 12487 Selection 12488 --------------------*/ 12489 12490 .ui.selection.list .list > .item, 12491 .ui.selection.list > .item { 12492 cursor: pointer; 12493 background: transparent; 12494 padding: 0.5em 0.5em; 12495 margin: 0; 12496 color: rgba(0, 0, 0, 0.4); 12497 border-radius: 0.5em; 12498 transition: 0.1s color ease, 0.1s padding-left ease, 0.1s background-color ease; 12499 } 12500 12501 .ui.selection.list .list > .item:last-child, 12502 .ui.selection.list > .item:last-child { 12503 margin-bottom: 0; 12504 } 12505 12506 .ui.selection.list .list > .item:hover, 12507 .ui.selection.list > .item:hover { 12508 background: rgba(0, 0, 0, 0.03); 12509 color: rgba(0, 0, 0, 0.8); 12510 } 12511 12512 .ui.selection.list .list > .item:active, 12513 .ui.selection.list > .item:active { 12514 background: rgba(0, 0, 0, 0.05); 12515 color: rgba(0, 0, 0, 0.9); 12516 } 12517 12518 .ui.selection.list .list > .item.active, 12519 .ui.selection.list > .item.active { 12520 background: rgba(0, 0, 0, 0.05); 12521 color: rgba(0, 0, 0, 0.95); 12522 } 12523 12524 /* Celled / Divided Selection List */ 12525 12526 .ui.celled.selection.list .list > .item, 12527 .ui.divided.selection.list .list > .item, 12528 .ui.celled.selection.list > .item, 12529 .ui.divided.selection.list > .item { 12530 border-radius: 0; 12531 } 12532 12533 /*------------------- 12534 Animated 12535 --------------------*/ 12536 12537 .ui.animated.list > .item { 12538 transition: 0.25s color ease 0.1s, 0.25s padding-left ease 0.1s, 0.25s background-color ease 0.1s; 12539 } 12540 12541 .ui.animated.list:not(.horizontal) > .item:hover { 12542 padding-left: 1em; 12543 } 12544 12545 /*------------------- 12546 Fitted 12547 --------------------*/ 12548 12549 .ui.fitted.list:not(.selection) .list > .item, 12550 .ui.fitted.list:not(.selection) > .item { 12551 padding-left: 0; 12552 padding-right: 0; 12553 } 12554 12555 .ui.fitted.selection.list .list > .item, 12556 .ui.fitted.selection.list > .item { 12557 margin-left: -0.5em; 12558 margin-right: -0.5em; 12559 } 12560 12561 /*------------------- 12562 Bulleted 12563 --------------------*/ 12564 12565 ul.ui.list, 12566 .ui.bulleted.list { 12567 margin-left: 1.25rem; 12568 } 12569 12570 ul.ui.list li, 12571 .ui.bulleted.list .list > .item, 12572 .ui.bulleted.list > .item { 12573 position: relative; 12574 } 12575 12576 ul.ui.list li:before, 12577 .ui.bulleted.list .list > .item:before, 12578 .ui.bulleted.list > .item:before { 12579 -webkit-user-select: none; 12580 -moz-user-select: none; 12581 user-select: none; 12582 pointer-events: none; 12583 position: absolute; 12584 top: auto; 12585 left: auto; 12586 font-weight: normal; 12587 margin-left: -1.25rem; 12588 content: '\2022'; 12589 opacity: 1; 12590 color: inherit; 12591 vertical-align: top; 12592 } 12593 12594 ul.ui.list li:before, 12595 .ui.bulleted.list .list > a.item:before, 12596 .ui.bulleted.list > a.item:before { 12597 color: rgba(0, 0, 0, 0.87); 12598 } 12599 12600 ul.ui.list ul, 12601 .ui.bulleted.list .list:not(.icon) { 12602 padding-left: 1.25rem; 12603 } 12604 12605 /* Horizontal Bulleted */ 12606 12607 ul.ui.horizontal.bulleted.list, 12608 .ui.horizontal.bulleted.list { 12609 margin-left: 0; 12610 } 12611 12612 ul.ui.horizontal.bulleted.list li, 12613 .ui.horizontal.bulleted.list > .item { 12614 margin-left: 1.75rem; 12615 } 12616 12617 ul.ui.horizontal.bulleted.list li:first-child, 12618 .ui.horizontal.bulleted.list > .item:first-child { 12619 margin-left: 0; 12620 } 12621 12622 ul.ui.horizontal.bulleted.list li::before, 12623 .ui.horizontal.bulleted.list > .item::before { 12624 color: rgba(0, 0, 0, 0.87); 12625 } 12626 12627 ul.ui.horizontal.bulleted.list li:first-child::before, 12628 .ui.horizontal.bulleted.list > .item:first-child::before { 12629 display: none; 12630 } 12631 12632 /*------------------- 12633 Ordered 12634 --------------------*/ 12635 12636 ol.ui.list, 12637 .ui.ordered.list, 12638 .ui.ordered.list .list:not(.icon), 12639 ol.ui.list ol { 12640 counter-reset: ordered; 12641 margin-left: 1.25rem; 12642 list-style-type: none; 12643 } 12644 12645 ol.ui.list li, 12646 .ui.ordered.list .list > .item, 12647 .ui.ordered.list > .item { 12648 list-style-type: none; 12649 position: relative; 12650 } 12651 12652 ol.ui.list li:before, 12653 .ui.ordered.list .list > .item:before, 12654 .ui.ordered.list > .item:before { 12655 position: absolute; 12656 top: auto; 12657 left: auto; 12658 -webkit-user-select: none; 12659 -moz-user-select: none; 12660 user-select: none; 12661 pointer-events: none; 12662 margin-left: -1.25rem; 12663 counter-increment: ordered; 12664 content: counters(ordered, ".") " "; 12665 text-align: right; 12666 color: rgba(0, 0, 0, 0.87); 12667 vertical-align: middle; 12668 opacity: 0.8; 12669 } 12670 12671 /* Value */ 12672 12673 .ui.ordered.list .list > .item[data-value]:before, 12674 .ui.ordered.list > .item[data-value]:before { 12675 content: attr(data-value); 12676 } 12677 12678 ol.ui.list li[value]:before { 12679 content: attr(value); 12680 } 12681 12682 /* Child Lists */ 12683 12684 ol.ui.list ol, 12685 .ui.ordered.list .list:not(.icon) { 12686 margin-left: 1em; 12687 } 12688 12689 ol.ui.list ol li:before, 12690 .ui.ordered.list .list > .item:before { 12691 margin-left: -2em; 12692 } 12693 12694 /* Horizontal Ordered */ 12695 12696 ol.ui.horizontal.list, 12697 .ui.ordered.horizontal.list { 12698 margin-left: 0; 12699 } 12700 12701 ol.ui.horizontal.list li:before, 12702 .ui.ordered.horizontal.list .list > .item:before, 12703 .ui.ordered.horizontal.list > .item:before { 12704 position: static; 12705 margin: 0 0.5em 0 0; 12706 } 12707 12708 /* Suffixed Ordered */ 12709 12710 ol.ui.suffixed.list li:before, 12711 .ui.suffixed.ordered.list .list > .item:before, 12712 .ui.suffixed.ordered.list > .item:before { 12713 content: counters(ordered, ".") "."; 12714 } 12715 12716 /*------------------- 12717 Divided 12718 --------------------*/ 12719 12720 .ui.divided.list > .item { 12721 border-top: 1px solid rgba(34, 36, 38, 0.15); 12722 } 12723 12724 .ui.divided.list .list > .item { 12725 border-top: none; 12726 } 12727 12728 .ui.divided.list .item .list > .item { 12729 border-top: none; 12730 } 12731 12732 .ui.divided.list .list > .item:first-child, 12733 .ui.divided.list > .item:first-child { 12734 border-top: none; 12735 } 12736 12737 /* Sub Menu */ 12738 12739 .ui.divided.list:not(.horizontal) .list > .item:first-child { 12740 border-top-width: 1px; 12741 } 12742 12743 /* Divided bulleted */ 12744 12745 .ui.divided.bulleted.list:not(.horizontal), 12746 .ui.divided.bulleted.list .list:not(.icon) { 12747 margin-left: 0; 12748 padding-left: 0; 12749 } 12750 12751 .ui.divided.bulleted.list > .item:not(.horizontal) { 12752 padding-left: 1.25rem; 12753 } 12754 12755 /* Divided Ordered */ 12756 12757 .ui.divided.ordered.list { 12758 margin-left: 0; 12759 } 12760 12761 .ui.divided.ordered.list .list > .item, 12762 .ui.divided.ordered.list > .item { 12763 padding-left: 1.25rem; 12764 } 12765 12766 .ui.divided.ordered.list .item .list:not(.icon) { 12767 margin-left: 0; 12768 margin-right: 0; 12769 padding-bottom: 0.21428571em; 12770 } 12771 12772 .ui.divided.ordered.list .item .list > .item { 12773 padding-left: 1em; 12774 } 12775 12776 /* Divided Selection */ 12777 12778 .ui.divided.selection.list .list > .item, 12779 .ui.divided.selection.list > .item { 12780 margin: 0; 12781 border-radius: 0; 12782 } 12783 12784 /* Divided horizontal */ 12785 12786 .ui.divided.horizontal.list { 12787 margin-left: 0; 12788 } 12789 12790 .ui.divided.horizontal.list > .item { 12791 padding-left: 0.5em; 12792 } 12793 12794 .ui.divided.horizontal.list > .item:not(:last-child) { 12795 padding-right: 0.5em; 12796 } 12797 12798 .ui.divided.horizontal.list > .item { 12799 border-top: none; 12800 border-right: 1px solid rgba(34, 36, 38, 0.15); 12801 margin: 0; 12802 line-height: 0.6; 12803 } 12804 12805 .ui.horizontal.divided.list > .item:last-child { 12806 border-right: none; 12807 } 12808 12809 /*------------------- 12810 Celled 12811 --------------------*/ 12812 12813 .ui.celled.list > .item, 12814 .ui.celled.list > .list { 12815 border-top: 1px solid rgba(34, 36, 38, 0.15); 12816 padding-left: 0.5em; 12817 padding-right: 0.5em; 12818 } 12819 12820 .ui.celled.list > .item:last-child { 12821 border-bottom: 1px solid rgba(34, 36, 38, 0.15); 12822 } 12823 12824 /* Padding on all elements */ 12825 12826 .ui.celled.list > .item:first-child, 12827 .ui.celled.list > .item:last-child { 12828 padding-top: 0.21428571em; 12829 padding-bottom: 0.21428571em; 12830 } 12831 12832 /* Sub Menu */ 12833 12834 .ui.celled.list .item .list > .item { 12835 border-width: 0; 12836 } 12837 12838 .ui.celled.list .list > .item:first-child { 12839 border-top-width: 0; 12840 } 12841 12842 /* Celled Bulleted */ 12843 12844 .ui.celled.bulleted.list { 12845 margin-left: 0; 12846 } 12847 12848 .ui.celled.bulleted.list .list > .item, 12849 .ui.celled.bulleted.list > .item { 12850 padding-left: 1.25rem; 12851 } 12852 12853 .ui.celled.bulleted.list .item .list:not(.icon) { 12854 margin-left: -1.25rem; 12855 margin-right: -1.25rem; 12856 padding-bottom: 0.21428571em; 12857 } 12858 12859 /* Celled Ordered */ 12860 12861 .ui.celled.ordered.list { 12862 margin-left: 0; 12863 } 12864 12865 .ui.celled.ordered.list .list > .item, 12866 .ui.celled.ordered.list > .item { 12867 padding-left: 1.25rem; 12868 } 12869 12870 .ui.celled.ordered.list .item .list:not(.icon) { 12871 margin-left: 0; 12872 margin-right: 0; 12873 padding-bottom: 0.21428571em; 12874 } 12875 12876 .ui.celled.ordered.list .list > .item { 12877 padding-left: 1em; 12878 } 12879 12880 /* Celled Horizontal */ 12881 12882 .ui.horizontal.celled.list { 12883 margin-left: 0; 12884 } 12885 12886 .ui.horizontal.celled.list .list > .item, 12887 .ui.horizontal.celled.list > .item { 12888 border-top: none; 12889 border-left: 1px solid rgba(34, 36, 38, 0.15); 12890 margin: 0; 12891 padding-left: 0.5em; 12892 padding-right: 0.5em; 12893 line-height: 0.6; 12894 } 12895 12896 .ui.horizontal.celled.list .list > .item:last-child, 12897 .ui.horizontal.celled.list > .item:last-child { 12898 border-bottom: none; 12899 border-right: 1px solid rgba(34, 36, 38, 0.15); 12900 } 12901 12902 /*------------------- 12903 Relaxed 12904 --------------------*/ 12905 12906 .ui.relaxed.list:not(.horizontal) > .item:not(:first-child) { 12907 padding-top: 0.42857143em; 12908 } 12909 12910 .ui.relaxed.list:not(.horizontal) > .item:not(:last-child) { 12911 padding-bottom: 0.42857143em; 12912 } 12913 12914 .ui.horizontal.relaxed.list .list > .item:not(:first-child), 12915 .ui.horizontal.relaxed.list > .item:not(:first-child) { 12916 padding-left: 1rem; 12917 } 12918 12919 .ui.horizontal.relaxed.list .list > .item:not(:last-child), 12920 .ui.horizontal.relaxed.list > .item:not(:last-child) { 12921 padding-right: 1rem; 12922 } 12923 12924 /* Very Relaxed */ 12925 12926 .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:first-child) { 12927 padding-top: 0.85714286em; 12928 } 12929 12930 .ui[class*="very relaxed"].list:not(.horizontal) > .item:not(:last-child) { 12931 padding-bottom: 0.85714286em; 12932 } 12933 12934 .ui.horizontal[class*="very relaxed"].list .list > .item:not(:first-child), 12935 .ui.horizontal[class*="very relaxed"].list > .item:not(:first-child) { 12936 padding-left: 1.5rem; 12937 } 12938 12939 .ui.horizontal[class*="very relaxed"].list .list > .item:not(:last-child), 12940 .ui.horizontal[class*="very relaxed"].list > .item:not(:last-child) { 12941 padding-right: 1.5rem; 12942 } 12943 12944 /*------------------- 12945 Sizes 12946 --------------------*/ 12947 12948 .ui.list { 12949 font-size: 1em; 12950 } 12951 12952 .ui.mini.list { 12953 font-size: 0.78571429em; 12954 } 12955 12956 .ui.mini.horizontal.list .list > .item, 12957 .ui.mini.horizontal.list > .item { 12958 font-size: 0.78571429rem; 12959 } 12960 12961 .ui.tiny.list { 12962 font-size: 0.85714286em; 12963 } 12964 12965 .ui.tiny.horizontal.list .list > .item, 12966 .ui.tiny.horizontal.list > .item { 12967 font-size: 0.85714286rem; 12968 } 12969 12970 .ui.small.list { 12971 font-size: 0.92857143em; 12972 } 12973 12974 .ui.small.horizontal.list .list > .item, 12975 .ui.small.horizontal.list > .item { 12976 font-size: 0.92857143rem; 12977 } 12978 12979 .ui.large.list { 12980 font-size: 1.14285714em; 12981 } 12982 12983 .ui.large.horizontal.list .list > .item, 12984 .ui.large.horizontal.list > .item { 12985 font-size: 1.14285714rem; 12986 } 12987 12988 .ui.big.list { 12989 font-size: 1.28571429em; 12990 } 12991 12992 .ui.big.horizontal.list .list > .item, 12993 .ui.big.horizontal.list > .item { 12994 font-size: 1.28571429rem; 12995 } 12996 12997 .ui.huge.list { 12998 font-size: 1.42857143em; 12999 } 13000 13001 .ui.huge.horizontal.list .list > .item, 13002 .ui.huge.horizontal.list > .item { 13003 font-size: 1.42857143rem; 13004 } 13005 13006 .ui.massive.list { 13007 font-size: 1.71428571em; 13008 } 13009 13010 .ui.massive.horizontal.list .list > .item, 13011 .ui.massive.horizontal.list > .item { 13012 font-size: 1.71428571rem; 13013 } 13014 13015 /******************************* 13016 Theme Overrides 13017 *******************************/ 13018 13019 /******************************* 13020 User Variable Overrides 13021 *******************************/ 13022 /* 13023 * # Fomantic - Menu 13024 * http://github.com/fomantic/Fomantic-UI/ 13025 * 13026 * 13027 * Copyright 2015 Contributor 13028 * Released under the MIT license 13029 * http://opensource.org/licenses/MIT 13030 * 13031 */ 13032 13033 /******************************* 13034 Standard 13035 *******************************/ 13036 13037 /*-------------- 13038 Menu 13039 ---------------*/ 13040 13041 .ui.menu { 13042 display: flex; 13043 margin: 1rem 0; 13044 font-family: var(--fonts-regular); 13045 background: #FFFFFF; 13046 font-weight: normal; 13047 border: 1px solid rgba(34, 36, 38, 0.15); 13048 box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); 13049 border-radius: 0.28571429rem; 13050 min-height: 2.85714286em; 13051 } 13052 13053 .ui.menu:after { 13054 content: ''; 13055 display: block; 13056 height: 0; 13057 clear: both; 13058 visibility: hidden; 13059 } 13060 13061 .ui.menu:first-child { 13062 margin-top: 0; 13063 } 13064 13065 .ui.menu:last-child { 13066 margin-bottom: 0; 13067 } 13068 13069 /*-------------- 13070 Sub-Menu 13071 ---------------*/ 13072 13073 .ui.menu .menu { 13074 margin: 0; 13075 } 13076 13077 .ui.menu:not(.vertical) > .menu { 13078 display: flex; 13079 } 13080 13081 /*-------------- 13082 Item 13083 ---------------*/ 13084 13085 .ui.menu:not(.vertical) .item { 13086 display: flex; 13087 align-items: center; 13088 } 13089 13090 .ui.menu .item { 13091 position: relative; 13092 vertical-align: middle; 13093 line-height: 1; 13094 text-decoration: none; 13095 -webkit-tap-highlight-color: transparent; 13096 flex: 0 0 auto; 13097 -webkit-user-select: none; 13098 -moz-user-select: none; 13099 user-select: none; 13100 background: none; 13101 padding: 0.92857143em 1.14285714em; 13102 text-transform: none; 13103 color: rgba(0, 0, 0, 0.87); 13104 font-weight: normal; 13105 transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease; 13106 } 13107 13108 .ui.menu > .item:first-child { 13109 border-radius: 0.28571429rem 0 0 0.28571429rem; 13110 } 13111 13112 /* Border */ 13113 13114 .ui.menu .item:before { 13115 position: absolute; 13116 content: ''; 13117 top: 0; 13118 right: 0; 13119 height: 100%; 13120 width: 1px; 13121 background: rgba(34, 36, 38, 0.1); 13122 } 13123 13124 /*-------------- 13125 Text Content 13126 ---------------*/ 13127 13128 .ui.menu .text.item > *, 13129 .ui.menu .item > a:not(.ui), 13130 .ui.menu .item > p:only-child { 13131 -webkit-user-select: text; 13132 -moz-user-select: text; 13133 user-select: text; 13134 line-height: 1.3; 13135 } 13136 13137 .ui.menu .item > p:first-child { 13138 margin-top: 0; 13139 } 13140 13141 .ui.menu .item > p:last-child { 13142 margin-bottom: 0; 13143 } 13144 13145 /*-------------- 13146 Icons 13147 ---------------*/ 13148 13149 .ui.menu .item > i.icon { 13150 opacity: 0.9; 13151 float: none; 13152 margin: 0 0.35714286em 0 0; 13153 } 13154 13155 /*-------------- 13156 Button 13157 ---------------*/ 13158 13159 .ui.menu:not(.vertical) .item > .button { 13160 position: relative; 13161 top: 0; 13162 margin: -0.5em 0; 13163 padding-bottom: 0.78571429em; 13164 padding-top: 0.78571429em; 13165 font-size: 1em; 13166 } 13167 13168 /*---------------- 13169 Grid / Container 13170 -----------------*/ 13171 13172 .ui.menu > .grid, 13173 .ui.menu > .container { 13174 display: flex; 13175 align-items: inherit; 13176 flex-direction: inherit; 13177 } 13178 13179 /*-------------- 13180 Inputs 13181 ---------------*/ 13182 13183 .ui.menu .item > .input { 13184 width: 100%; 13185 } 13186 13187 .ui.menu:not(.vertical) .item > .input { 13188 position: relative; 13189 top: 0; 13190 margin: -0.5em 0; 13191 } 13192 13193 .ui.menu .item > .input input { 13194 font-size: 1em; 13195 padding-top: 0.57142857em; 13196 padding-bottom: 0.57142857em; 13197 } 13198 13199 /*-------------- 13200 Header 13201 ---------------*/ 13202 13203 .ui.menu .header.item, 13204 .ui.vertical.menu .header.item { 13205 margin: 0; 13206 background: ''; 13207 text-transform: normal; 13208 font-weight: 500; 13209 } 13210 13211 .ui.vertical.menu .item > .header:not(.ui) { 13212 margin: 0 0 0.5em; 13213 font-size: 1em; 13214 font-weight: 500; 13215 } 13216 13217 /*-------------- 13218 Dropdowns 13219 ---------------*/ 13220 13221 /* Dropdown Icon */ 13222 13223 .ui.menu .item > i.dropdown.icon { 13224 padding: 0; 13225 float: right; 13226 margin: 0 0 0 1em; 13227 } 13228 13229 /* Menu */ 13230 13231 .ui.menu .dropdown.item .menu { 13232 min-width: calc(100% - 1px); 13233 border-radius: 0 0 0.28571429rem 0.28571429rem; 13234 background: #FFFFFF; 13235 margin: 0 0 0; 13236 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08); 13237 flex-direction: column !important; 13238 } 13239 13240 /* Menu Items */ 13241 13242 .ui.menu .ui.dropdown .menu > .item { 13243 margin: 0; 13244 text-align: left; 13245 font-size: 1em !important; 13246 padding: 0.78571429em 1.14285714em !important; 13247 background: transparent !important; 13248 color: rgba(0, 0, 0, 0.87) !important; 13249 text-transform: none !important; 13250 font-weight: normal !important; 13251 box-shadow: none !important; 13252 transition: none !important; 13253 } 13254 13255 .ui.menu .ui.dropdown .menu > .item:hover { 13256 background: rgba(0, 0, 0, 0.05) !important; 13257 color: rgba(0, 0, 0, 0.95) !important; 13258 } 13259 13260 .ui.menu .ui.dropdown .menu > .selected.item { 13261 background: rgba(0, 0, 0, 0.05) !important; 13262 color: rgba(0, 0, 0, 0.95) !important; 13263 } 13264 13265 .ui.menu .ui.dropdown .menu > .active.item { 13266 background: rgba(0, 0, 0, 0.03) !important; 13267 font-weight: 500 !important; 13268 color: rgba(0, 0, 0, 0.95) !important; 13269 } 13270 13271 .ui.menu .ui.dropdown.item .menu .item:not(.filtered) { 13272 display: block; 13273 } 13274 13275 .ui.menu .ui.dropdown .menu > .item > .icons, 13276 .ui.menu .ui.dropdown .menu > .item > i.icon:not(.dropdown) { 13277 display: inline-block; 13278 font-size: 1em !important; 13279 float: none; 13280 margin: 0 0.75em 0 0 !important; 13281 } 13282 13283 /* Secondary */ 13284 13285 .ui.secondary.menu .dropdown.item > .menu, 13286 .ui.text.menu .dropdown.item > .menu { 13287 border-radius: 0.28571429rem; 13288 margin-top: 0.35714286em; 13289 } 13290 13291 /* Pointing */ 13292 13293 .ui.menu .pointing.dropdown.item .menu { 13294 margin-top: 0.75em; 13295 } 13296 13297 /* Vertical */ 13298 13299 .ui.vertical.menu .dropdown.item > i.icon { 13300 float: right; 13301 content: "\f0da"; 13302 margin-left: 1em; 13303 } 13304 13305 .ui.vertical.menu .dropdown.item .menu { 13306 left: 100%; 13307 /* IE needs 0, all others support max-content to show dropdown icon inline, so keep both settings! */ 13308 min-width: 0; 13309 min-width: -webkit-max-content; 13310 min-width: -moz-max-content; 13311 min-width: max-content; 13312 margin: 0 0 0 0; 13313 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08); 13314 border-radius: 0 0.28571429rem 0.28571429rem 0.28571429rem; 13315 } 13316 13317 .ui.vertical.menu .dropdown.item.upward .menu { 13318 bottom: 0; 13319 } 13320 13321 .ui.vertical.menu .dropdown.item:not(.upward) .menu { 13322 top: 0; 13323 } 13324 13325 .ui.vertical.menu .active.dropdown.item { 13326 border-top-right-radius: 0; 13327 border-bottom-right-radius: 0; 13328 } 13329 13330 .ui.vertical.menu .dropdown.active.item { 13331 box-shadow: none; 13332 } 13333 13334 /* Evenly Divided */ 13335 13336 .ui.item.menu .dropdown .menu .item { 13337 width: 100%; 13338 } 13339 13340 /*-------------- 13341 Labels 13342 ---------------*/ 13343 13344 .ui.menu .item > .label:not(.floating) { 13345 margin-left: 1em; 13346 padding: 0.3em 0.78571429em; 13347 } 13348 13349 .ui.vertical.menu .item > .label { 13350 margin-top: -0.15em; 13351 margin-bottom: -0.15em; 13352 padding: 0.3em 0.78571429em; 13353 } 13354 13355 .ui.menu .item > .floating.label { 13356 padding: 0.3em 0.78571429em; 13357 } 13358 13359 .ui.menu .item > .label { 13360 background: #999999; 13361 color: #FFFFFF; 13362 } 13363 13364 .ui.menu .item > .image.label img { 13365 margin: -0.2833em 0.8em -0.2833em -0.8em; 13366 height: 1.5666em; 13367 } 13368 13369 /*-------------- 13370 Images 13371 ---------------*/ 13372 13373 .ui.menu .item > img:not(.ui) { 13374 display: inline-block; 13375 vertical-align: middle; 13376 margin: -0.3em 0; 13377 width: 2.5em; 13378 } 13379 13380 .ui.vertical.menu .item > img:not(.ui):only-child { 13381 display: block; 13382 max-width: 100%; 13383 width: auto; 13384 } 13385 13386 /******************************* 13387 Coupling 13388 *******************************/ 13389 13390 /*-------------- 13391 List 13392 ---------------*/ 13393 13394 /* Menu divider shouldnt apply */ 13395 13396 .ui.menu .list .item:before { 13397 background: none !important; 13398 } 13399 13400 /*-------------- 13401 Sidebar 13402 ---------------*/ 13403 13404 /* Show vertical dividers below last */ 13405 13406 .ui.vertical.sidebar.menu > .item:first-child:before { 13407 display: block !important; 13408 } 13409 13410 .ui.vertical.sidebar.menu > .item::before { 13411 top: auto; 13412 bottom: 0; 13413 } 13414 13415 /*-------------- 13416 Container 13417 ---------------*/ 13418 13419 @media only screen and (max-width: 767.98px) { 13420 .ui.menu > .ui.container { 13421 width: 100% !important; 13422 margin-left: 0 !important; 13423 margin-right: 0 !important; 13424 } 13425 } 13426 13427 @media only screen and (min-width: 768px) { 13428 .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child { 13429 border-left: 1px solid rgba(34, 36, 38, 0.1); 13430 } 13431 13432 .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.item:not(.borderless):last-child, 13433 .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.menu > .item:not(.borderless):last-child { 13434 border-right: 1px solid rgba(34, 36, 38, 0.1); 13435 } 13436 } 13437 13438 /******************************* 13439 States 13440 *******************************/ 13441 13442 /*-------------- 13443 Hover 13444 ---------------*/ 13445 13446 .ui.link.menu .item:hover, 13447 .ui.menu .dropdown.item:hover, 13448 .ui.menu .link.item:hover, 13449 .ui.menu a.item:hover { 13450 cursor: pointer; 13451 background: rgba(0, 0, 0, 0.03); 13452 color: rgba(0, 0, 0, 0.95); 13453 } 13454 13455 /*-------------- 13456 Pressed 13457 ---------------*/ 13458 13459 .ui.link.menu .item:active, 13460 .ui.menu .link.item:active, 13461 .ui.menu a.item:active { 13462 background: rgba(0, 0, 0, 0.03); 13463 color: rgba(0, 0, 0, 0.95); 13464 } 13465 13466 /*-------------- 13467 Active 13468 ---------------*/ 13469 13470 .ui.menu .active.item { 13471 background: rgba(0, 0, 0, 0.05); 13472 color: rgba(0, 0, 0, 0.95); 13473 font-weight: normal; 13474 box-shadow: none; 13475 } 13476 13477 .ui.menu .active.item > i.icon { 13478 opacity: 1; 13479 } 13480 13481 /*-------------- 13482 Active Hover 13483 ---------------*/ 13484 13485 .ui.menu .active.item:hover, 13486 .ui.vertical.menu .active.item:hover { 13487 background-color: rgba(0, 0, 0, 0.05); 13488 color: rgba(0, 0, 0, 0.95); 13489 } 13490 13491 /*-------------- 13492 Disabled 13493 ---------------*/ 13494 13495 .ui.ui.menu .item.disabled { 13496 cursor: default; 13497 background-color: transparent; 13498 color: rgba(40, 40, 40, 0.3); 13499 pointer-events: none; 13500 } 13501 13502 /******************************* 13503 Types 13504 *******************************/ 13505 13506 /*------------------ 13507 Floated Menu / Item 13508 -------------------*/ 13509 13510 /* Left Floated */ 13511 13512 .ui.menu:not(.vertical) .left.item, 13513 .ui.menu:not(.vertical) .left.menu { 13514 display: flex; 13515 margin-right: auto !important; 13516 } 13517 13518 /* Right Floated */ 13519 13520 .ui.menu:not(.vertical) .right.item, 13521 .ui.menu:not(.vertical) .right.menu { 13522 display: flex; 13523 margin-left: auto !important; 13524 } 13525 13526 .ui.menu:not(.vertical) :not(.dropdown) > .left.menu, 13527 .ui.menu:not(.vertical) :not(.dropdown) > .right.menu { 13528 display: inherit; 13529 } 13530 13531 /* Center */ 13532 13533 .ui.menu:not(.vertical) .center.item, 13534 .ui.menu:not(.vertical) .center.menu { 13535 display: flex; 13536 margin-left: auto !important; 13537 margin-right: auto !important; 13538 } 13539 13540 /* Swapped Borders */ 13541 13542 .ui.menu .right.item::before, 13543 .ui.menu .right.menu > .item::before { 13544 right: auto; 13545 left: 0; 13546 } 13547 13548 /* Remove Outer Borders */ 13549 13550 .ui.menu .center.item:last-child::before, 13551 .ui.menu .center.menu > .item:last-child::before { 13552 display: none; 13553 } 13554 13555 /*-------------- 13556 Vertical 13557 ---------------*/ 13558 13559 .ui.vertical.menu { 13560 display: block; 13561 flex-direction: column; 13562 background: #FFFFFF; 13563 box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); 13564 } 13565 13566 /*--- Item ---*/ 13567 13568 .ui.vertical.menu .item { 13569 display: block; 13570 background: none; 13571 border-top: none; 13572 border-right: none; 13573 } 13574 13575 .ui.vertical.menu > .item:first-child { 13576 border-radius: 0.28571429rem 0.28571429rem 0 0; 13577 } 13578 13579 .ui.vertical.menu > .item:last-child { 13580 border-radius: 0 0 0.28571429rem 0.28571429rem; 13581 } 13582 13583 /*--- Label ---*/ 13584 13585 .ui.vertical.menu .item > .label { 13586 float: right; 13587 text-align: center; 13588 } 13589 13590 /*--- Icon ---*/ 13591 13592 .ui.vertical.menu .item > i.icon, 13593 .ui.vertical.menu .item > i.icons { 13594 width: 1.18em; 13595 float: right; 13596 margin: 0 0 0 0.5em; 13597 } 13598 13599 .ui.vertical.menu .item > .label + i.icon { 13600 float: none; 13601 margin: 0 0.5em 0 0; 13602 } 13603 13604 /*--- Border ---*/ 13605 13606 .ui.vertical.menu .item:before { 13607 position: absolute; 13608 content: ''; 13609 top: 0; 13610 left: 0; 13611 width: 100%; 13612 height: 1px; 13613 background: rgba(34, 36, 38, 0.1); 13614 } 13615 13616 .ui.vertical.menu .item:first-child:before { 13617 display: none !important; 13618 } 13619 13620 /*--- Sub Menu ---*/ 13621 13622 .ui.vertical.menu .item > .menu { 13623 margin: 0.5em -1.14285714em 0; 13624 } 13625 13626 .ui.vertical.menu .menu .item { 13627 background: none; 13628 padding: 0.5em 1.33333333em; 13629 font-size: 0.85714286em; 13630 color: rgba(0, 0, 0, 0.5); 13631 } 13632 13633 .ui.vertical.menu .item .menu a.item:hover, 13634 .ui.vertical.menu .item .menu .link.item:hover { 13635 color: rgba(0, 0, 0, 0.85); 13636 } 13637 13638 .ui.vertical.menu .menu .item:before { 13639 display: none; 13640 } 13641 13642 /* Vertical Active */ 13643 13644 .ui.vertical.menu .active.item { 13645 background: rgba(0, 0, 0, 0.05); 13646 border-radius: 0; 13647 box-shadow: none; 13648 } 13649 13650 .ui.vertical.menu > .active.item:first-child { 13651 border-radius: 0.28571429rem 0.28571429rem 0 0; 13652 } 13653 13654 .ui.vertical.menu > .active.item:last-child { 13655 border-radius: 0 0 0.28571429rem 0.28571429rem; 13656 } 13657 13658 .ui.vertical.menu > .active.item:only-child { 13659 border-radius: 0.28571429rem; 13660 } 13661 13662 .ui.vertical.menu .active.item .menu .active.item { 13663 border-left: none; 13664 } 13665 13666 .ui.vertical.menu .item .menu .active.item { 13667 background-color: transparent; 13668 font-weight: 500; 13669 color: rgba(0, 0, 0, 0.95); 13670 } 13671 13672 /*-------------- 13673 Tabular 13674 ---------------*/ 13675 13676 .ui.tabular.menu { 13677 border-radius: 0; 13678 box-shadow: none !important; 13679 border: none; 13680 background: none transparent; 13681 border-bottom: 1px solid #D4D4D5; 13682 } 13683 13684 .ui.tabular.fluid.menu { 13685 width: calc(100% + 2px) !important; 13686 } 13687 13688 .ui.tabular.menu .item { 13689 background: transparent; 13690 border-bottom: none; 13691 border-left: 1px solid transparent; 13692 border-right: 1px solid transparent; 13693 border-top: 2px solid transparent; 13694 padding: 0.92857143em 1.42857143em; 13695 color: rgba(0, 0, 0, 0.87); 13696 } 13697 13698 .ui.tabular.menu .item:before { 13699 display: none; 13700 } 13701 13702 /* Hover */ 13703 13704 .ui.tabular.menu .item:hover { 13705 background-color: transparent; 13706 color: rgba(0, 0, 0, 0.8); 13707 } 13708 13709 /* Active */ 13710 13711 .ui.tabular.menu .active.item { 13712 background: none #FFFFFF; 13713 color: rgba(0, 0, 0, 0.95); 13714 border-top-width: 1px; 13715 border-color: #D4D4D5; 13716 font-weight: 500; 13717 margin-bottom: -1px; 13718 box-shadow: none; 13719 border-radius: 0.28571429rem 0.28571429rem 0 0 !important; 13720 } 13721 13722 /* Coupling with segment for attachment */ 13723 13724 .ui.tabular.menu + .attached:not(.top).segment, 13725 .ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment { 13726 border-top: none; 13727 margin-left: 0; 13728 margin-top: 0; 13729 margin-right: 0; 13730 width: 100%; 13731 } 13732 13733 .top.attached.segment + .ui.bottom.tabular.menu { 13734 position: relative; 13735 width: calc(100% + 2px); 13736 left: -1px; 13737 } 13738 13739 /* Bottom Vertical Tabular */ 13740 13741 .ui.bottom.tabular.menu { 13742 background: none transparent; 13743 border-radius: 0; 13744 box-shadow: none !important; 13745 border-bottom: none; 13746 border-top: 1px solid #D4D4D5; 13747 } 13748 13749 .ui.bottom.tabular.menu .item { 13750 background: none; 13751 border-left: 1px solid transparent; 13752 border-right: 1px solid transparent; 13753 border-bottom: 1px solid transparent; 13754 border-top: none; 13755 } 13756 13757 .ui.bottom.tabular.menu .active.item { 13758 background: none #FFFFFF; 13759 color: rgba(0, 0, 0, 0.95); 13760 border-color: #D4D4D5; 13761 margin: -1px 0 0 0; 13762 border-radius: 0 0 0.28571429rem 0.28571429rem !important; 13763 } 13764 13765 /* Vertical Tabular (Left) */ 13766 13767 .ui.vertical.tabular.menu { 13768 background: none transparent; 13769 border-radius: 0; 13770 box-shadow: none !important; 13771 border-bottom: none; 13772 border-right: 1px solid #D4D4D5; 13773 } 13774 13775 .ui.vertical.tabular.menu .item { 13776 background: none; 13777 border-left: 1px solid transparent; 13778 border-bottom: 1px solid transparent; 13779 border-top: 1px solid transparent; 13780 border-right: none; 13781 } 13782 13783 .ui.vertical.tabular.menu .active.item { 13784 background: none #FFFFFF; 13785 color: rgba(0, 0, 0, 0.95); 13786 border-color: #D4D4D5; 13787 margin: 0 -1px 0 0; 13788 border-radius: 0.28571429rem 0 0 0.28571429rem !important; 13789 } 13790 13791 /* Vertical Right Tabular */ 13792 13793 .ui.vertical.right.tabular.menu { 13794 background: none transparent; 13795 border-radius: 0; 13796 box-shadow: none !important; 13797 border-bottom: none; 13798 border-right: none; 13799 border-left: 1px solid #D4D4D5; 13800 } 13801 13802 .ui.vertical.right.tabular.menu .item { 13803 background: none; 13804 border-right: 1px solid transparent; 13805 border-bottom: 1px solid transparent; 13806 border-top: 1px solid transparent; 13807 border-left: none; 13808 } 13809 13810 .ui.vertical.right.tabular.menu .active.item { 13811 background: none #FFFFFF; 13812 color: rgba(0, 0, 0, 0.95); 13813 border-color: #D4D4D5; 13814 margin: 0 0 0 -1px; 13815 border-radius: 0 0.28571429rem 0.28571429rem 0 !important; 13816 } 13817 13818 /* Dropdown */ 13819 13820 .ui.tabular.menu .active.dropdown.item { 13821 margin-bottom: 0; 13822 border-left: 1px solid transparent; 13823 border-right: 1px solid transparent; 13824 border-top: 2px solid transparent; 13825 border-bottom: none; 13826 } 13827 13828 /*-------------- 13829 Pagination 13830 ---------------*/ 13831 13832 .ui.pagination.menu { 13833 margin: 0; 13834 display: inline-flex; 13835 vertical-align: middle; 13836 } 13837 13838 .ui.pagination.menu .item:last-child { 13839 border-radius: 0 0.28571429rem 0.28571429rem 0; 13840 } 13841 13842 .ui.compact.menu .item:last-child { 13843 border-radius: 0 0.28571429rem 0.28571429rem 0; 13844 } 13845 13846 .ui.pagination.menu .item:last-child:before { 13847 display: none; 13848 } 13849 13850 .ui.pagination.menu .item { 13851 min-width: 3em; 13852 text-align: center; 13853 } 13854 13855 .ui.pagination.menu .icon.item i.icon { 13856 vertical-align: top; 13857 } 13858 13859 /* Active */ 13860 13861 .ui.pagination.menu .active.item { 13862 border-top: none; 13863 padding-top: 0.92857143em; 13864 background-color: rgba(0, 0, 0, 0.05); 13865 color: rgba(0, 0, 0, 0.95); 13866 box-shadow: none; 13867 } 13868 13869 /*-------------- 13870 Secondary 13871 ---------------*/ 13872 13873 .ui.secondary.menu { 13874 background: none; 13875 margin-left: -0.35714286em; 13876 margin-right: -0.35714286em; 13877 border-radius: 0; 13878 border: none; 13879 box-shadow: none; 13880 } 13881 13882 /* Item */ 13883 13884 .ui.secondary.menu .item { 13885 align-self: center; 13886 box-shadow: none; 13887 border: none; 13888 padding: 0.78571429em 0.92857143em; 13889 margin: 0 0.35714286em; 13890 background: none; 13891 transition: color 0.1s ease; 13892 border-radius: 0.28571429rem; 13893 } 13894 13895 /* No Divider */ 13896 13897 .ui.secondary.menu .item:before { 13898 display: none !important; 13899 } 13900 13901 /* Header */ 13902 13903 .ui.secondary.menu .header.item { 13904 border-radius: 0; 13905 border-right: none; 13906 background: none transparent; 13907 } 13908 13909 /* Image */ 13910 13911 .ui.secondary.menu .item > img:not(.ui) { 13912 margin: 0; 13913 } 13914 13915 /* Hover */ 13916 13917 .ui.secondary.menu .dropdown.item:hover, 13918 .ui.secondary.menu .link.item:hover, 13919 .ui.secondary.menu a.item:hover { 13920 background: rgba(0, 0, 0, 0.05); 13921 color: rgba(0, 0, 0, 0.95); 13922 } 13923 13924 /* Active */ 13925 13926 .ui.secondary.menu .active.item { 13927 box-shadow: none; 13928 background: rgba(0, 0, 0, 0.05); 13929 color: rgba(0, 0, 0, 0.95); 13930 border-radius: 0.28571429rem; 13931 } 13932 13933 /* Active Hover */ 13934 13935 .ui.secondary.menu .active.item:hover { 13936 box-shadow: none; 13937 background: rgba(0, 0, 0, 0.05); 13938 color: rgba(0, 0, 0, 0.95); 13939 } 13940 13941 /* Fix item margins */ 13942 13943 .ui.secondary.item.menu { 13944 margin-left: 0; 13945 margin-right: 0; 13946 } 13947 13948 .ui.secondary.item.menu .item:last-child { 13949 margin-right: 0; 13950 } 13951 13952 .ui.secondary.attached.menu { 13953 box-shadow: none; 13954 } 13955 13956 /*--------------------- 13957 Secondary Vertical 13958 -----------------------*/ 13959 13960 /* Sub Menu */ 13961 13962 .ui.vertical.secondary.menu .item:not(.dropdown) > .menu { 13963 margin: 0 -0.92857143em; 13964 } 13965 13966 .ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item { 13967 margin: 0; 13968 padding: 0.5em 1.33333333em; 13969 } 13970 13971 .ui.secondary.vertical.menu > .item { 13972 border: none; 13973 margin: 0 0 0.35714286em; 13974 border-radius: 0.28571429rem !important; 13975 } 13976 13977 .ui.secondary.vertical.menu > .header.item { 13978 border-radius: 0; 13979 } 13980 13981 /* Sub Menu */ 13982 13983 .ui.vertical.secondary.menu .item > .menu .item { 13984 background-color: transparent; 13985 } 13986 13987 /* Inverted */ 13988 13989 .ui.secondary.inverted.menu { 13990 background-color: transparent; 13991 } 13992 13993 /*--------------------- 13994 Secondary Pointing 13995 -----------------------*/ 13996 13997 .ui.secondary.pointing.menu { 13998 margin-left: 0; 13999 margin-right: 0; 14000 border-bottom: 2px solid rgba(34, 36, 38, 0.15); 14001 } 14002 14003 .ui.secondary.pointing.menu .item { 14004 border-bottom-color: transparent; 14005 border-bottom-style: solid; 14006 border-radius: 0; 14007 align-self: flex-end; 14008 margin: 0 0 -2px; 14009 padding: 0.85714286em 1.14285714em; 14010 border-bottom-width: 2px; 14011 transition: color 0.1s ease; 14012 } 14013 14014 .ui.secondary.pointing.menu .ui.dropdown .menu .item { 14015 border-bottom-width: 0; 14016 } 14017 14018 .ui.secondary.pointing.menu .item > .label:not(.floating) { 14019 margin-top: -0.3em; 14020 margin-bottom: -0.3em; 14021 } 14022 14023 .ui.secondary.pointing.menu .item > .circular.label { 14024 margin-top: -0.5em; 14025 margin-bottom: -0.5em; 14026 } 14027 14028 /* Item Types */ 14029 14030 .ui.secondary.pointing.menu .header.item { 14031 color: rgba(0, 0, 0, 0.85) !important; 14032 } 14033 14034 .ui.secondary.pointing.menu .text.item { 14035 box-shadow: none !important; 14036 } 14037 14038 .ui.secondary.pointing.menu .item:after { 14039 display: none; 14040 } 14041 14042 /* Hover */ 14043 14044 .ui.secondary.pointing.menu .dropdown.item:hover, 14045 .ui.secondary.pointing.menu .link.item:hover, 14046 .ui.secondary.pointing.menu a.item:hover { 14047 background-color: transparent; 14048 color: rgba(0, 0, 0, 0.87); 14049 } 14050 14051 /* Pressed */ 14052 14053 .ui.secondary.pointing.menu .dropdown.item:active, 14054 .ui.secondary.pointing.menu .link.item:active, 14055 .ui.secondary.pointing.menu a.item:active { 14056 background-color: transparent; 14057 border-color: rgba(34, 36, 38, 0.15); 14058 } 14059 14060 /* Active */ 14061 14062 .ui.secondary.pointing.menu .active.item { 14063 background-color: transparent; 14064 box-shadow: none; 14065 border-color: currentColor; 14066 font-weight: 500; 14067 color: rgba(0, 0, 0, 0.95); 14068 } 14069 14070 /* Active Hover */ 14071 14072 .ui.secondary.pointing.menu .active.item:hover { 14073 border-color: currentColor; 14074 color: rgba(0, 0, 0, 0.95); 14075 } 14076 14077 /* Active Dropdown */ 14078 14079 .ui.secondary.pointing.menu .active.dropdown.item { 14080 border-color: transparent; 14081 } 14082 14083 /* Vertical Pointing */ 14084 14085 .ui.secondary.vertical.pointing.menu { 14086 border-bottom-width: 0; 14087 border-right-width: 2px; 14088 border-right-style: solid; 14089 border-right-color: rgba(34, 36, 38, 0.15); 14090 } 14091 14092 .ui.secondary.vertical.pointing.menu .item { 14093 border-bottom: none; 14094 border-right-style: solid; 14095 border-right-color: transparent; 14096 border-radius: 0 !important; 14097 margin: 0 -2px 0 0; 14098 border-right-width: 2px; 14099 } 14100 14101 /* Vertical Active */ 14102 14103 .ui.secondary.vertical.pointing.menu .active.item { 14104 border-color: currentColor; 14105 } 14106 14107 /*-------------- 14108 Text Menu 14109 ---------------*/ 14110 14111 .ui.text.menu { 14112 background: none transparent; 14113 border-radius: 0; 14114 box-shadow: none; 14115 border: none; 14116 margin: 1em -0.5em; 14117 } 14118 14119 .ui.text.menu .item { 14120 border-radius: 0; 14121 box-shadow: none; 14122 align-self: center; 14123 margin: 0 0; 14124 padding: 0.35714286em 0.5em; 14125 font-weight: normal; 14126 color: rgba(0, 0, 0, 0.6); 14127 transition: opacity 0.1s ease; 14128 } 14129 14130 /* Border */ 14131 14132 .ui.text.menu .item:before, 14133 .ui.text.menu .menu .item:before { 14134 display: none !important; 14135 } 14136 14137 /* Header */ 14138 14139 .ui.text.menu .header.item { 14140 background-color: transparent; 14141 opacity: 1; 14142 color: rgba(0, 0, 0, 0.85); 14143 font-size: 0.92857143em; 14144 text-transform: uppercase; 14145 font-weight: 500; 14146 } 14147 14148 /* Image */ 14149 14150 .ui.text.menu .item > img:not(.ui) { 14151 margin: 0; 14152 } 14153 14154 /*--- fluid text ---*/ 14155 14156 .ui.text.item.menu .item { 14157 margin: 0; 14158 } 14159 14160 /*--- vertical text ---*/ 14161 14162 .ui.vertical.text.menu { 14163 margin: 1em 0; 14164 } 14165 14166 .ui.vertical.text.menu:first-child { 14167 margin-top: 0; 14168 } 14169 14170 .ui.vertical.text.menu:last-child { 14171 margin-bottom: 0; 14172 } 14173 14174 .ui.vertical.text.menu .item { 14175 margin: 0.57142857em 0; 14176 padding-left: 0; 14177 padding-right: 0; 14178 } 14179 14180 .ui.vertical.text.menu .item > i.icon { 14181 float: none; 14182 margin: 0 0.35714286em 0 0; 14183 } 14184 14185 .ui.vertical.text.menu .header.item { 14186 margin: 0.57142857em 0 0.71428571em; 14187 } 14188 14189 /* Vertical Sub Menu */ 14190 14191 .ui.vertical.text.menu .item:not(.dropdown) > .menu { 14192 margin: 0; 14193 } 14194 14195 .ui.vertical.text.menu .item:not(.dropdown) > .menu > .item { 14196 margin: 0; 14197 padding: 0.5em 0; 14198 } 14199 14200 /*--- hover ---*/ 14201 14202 .ui.text.menu .item:hover { 14203 opacity: 1; 14204 background-color: transparent; 14205 } 14206 14207 /*--- active ---*/ 14208 14209 .ui.text.menu .active.item { 14210 background-color: transparent; 14211 border: none; 14212 box-shadow: none; 14213 font-weight: normal; 14214 color: rgba(0, 0, 0, 0.95); 14215 } 14216 14217 /*--- active hover ---*/ 14218 14219 .ui.text.menu .active.item:hover { 14220 background-color: transparent; 14221 } 14222 14223 /* Disable Bariations */ 14224 14225 .ui.text.pointing.menu .active.item:after { 14226 box-shadow: none; 14227 } 14228 14229 .ui.text.attached.menu { 14230 box-shadow: none; 14231 } 14232 14233 /* Fluid */ 14234 14235 .ui.fluid.text.menu { 14236 margin-left: 0; 14237 margin-right: 0; 14238 } 14239 14240 /*-------------- 14241 Icon Only 14242 ---------------*/ 14243 14244 /* Vertical Menu */ 14245 14246 .ui.vertical.icon.menu { 14247 display: inline-block; 14248 width: auto; 14249 } 14250 14251 /* Item */ 14252 14253 .ui.icon.menu .item { 14254 height: auto; 14255 text-align: center; 14256 color: #1B1C1D; 14257 } 14258 14259 /* Icon */ 14260 14261 .ui.icon.menu .item > i.icon:not(.dropdown) { 14262 margin: 0; 14263 opacity: 1; 14264 } 14265 14266 /* Icon Gylph */ 14267 14268 .ui.icon.menu i.icon:before { 14269 opacity: 1; 14270 } 14271 14272 /* (x) Item Icon */ 14273 14274 .ui.menu .icon.item > i.icon { 14275 width: auto; 14276 margin: 0 auto; 14277 } 14278 14279 /* Vertical Icon */ 14280 14281 .ui.vertical.icon.menu .item > i.icon:not(.dropdown) { 14282 display: block; 14283 opacity: 1; 14284 margin: 0 auto; 14285 float: none; 14286 } 14287 14288 /* Inverted */ 14289 14290 .ui.inverted.icon.menu .item { 14291 color: #FFFFFF; 14292 } 14293 14294 /*-------------- 14295 Labeled Icon 14296 ---------------*/ 14297 14298 /* Menu */ 14299 14300 .ui.labeled.icon.menu { 14301 text-align: center; 14302 } 14303 14304 /* Item */ 14305 14306 .ui.labeled.icon.menu .item { 14307 min-width: 6em; 14308 flex-direction: column; 14309 } 14310 14311 /* Icon */ 14312 14313 .ui.labeled.icon.menu > .item > i.icon:not(.dropdown) { 14314 height: 1em; 14315 display: block; 14316 font-size: 1.71428571em !important; 14317 margin: 0 auto 0.5rem !important; 14318 } 14319 14320 /* Fluid */ 14321 14322 .ui.fluid.labeled.icon.menu > .item { 14323 min-width: 0; 14324 } 14325 14326 /******************************* 14327 Variations 14328 *******************************/ 14329 14330 /*-------------- 14331 Stackable 14332 ---------------*/ 14333 14334 @media only screen and (max-width: 767.98px) { 14335 .ui.stackable.menu { 14336 flex-direction: column; 14337 } 14338 14339 .ui.stackable.menu .item { 14340 width: 100% !important; 14341 } 14342 14343 .ui.stackable.menu .item:before { 14344 position: absolute; 14345 content: ''; 14346 top: auto; 14347 bottom: 0; 14348 left: 0; 14349 width: 100%; 14350 height: 1px; 14351 background: rgba(34, 36, 38, 0.1); 14352 } 14353 14354 .ui.stackable.menu .left.menu, 14355 .ui.stackable.menu .left.item { 14356 margin-right: 0 !important; 14357 } 14358 14359 .ui.stackable.menu .right.menu, 14360 .ui.stackable.menu .right.item { 14361 margin-left: 0 !important; 14362 } 14363 14364 .ui.stackable.menu .center.menu, 14365 .ui.stackable.menu .center.item { 14366 margin-left: 0 !important; 14367 margin-right: 0 !important; 14368 } 14369 14370 .ui.stackable.menu .right.menu, 14371 .ui.stackable.menu .center.menu, 14372 .ui.stackable.menu .left.menu { 14373 flex-direction: column; 14374 } 14375 } 14376 14377 /*-------------- 14378 Colors 14379 ---------------*/ 14380 14381 .ui.ui.ui.menu .primary.active.item, 14382 .ui.ui.primary.menu .active.item:hover, 14383 .ui.ui.primary.menu .active.item { 14384 color: #2185D0; 14385 } 14386 14387 .ui.ui.ui.menu .red.active.item, 14388 .ui.ui.red.menu .active.item:hover, 14389 .ui.ui.red.menu .active.item { 14390 color: #DB2828; 14391 } 14392 14393 .ui.ui.ui.menu .orange.active.item, 14394 .ui.ui.orange.menu .active.item:hover, 14395 .ui.ui.orange.menu .active.item { 14396 color: #F2711C; 14397 } 14398 14399 .ui.ui.ui.menu .yellow.active.item, 14400 .ui.ui.yellow.menu .active.item:hover, 14401 .ui.ui.yellow.menu .active.item { 14402 color: #FBBD08; 14403 } 14404 14405 .ui.ui.ui.menu .olive.active.item, 14406 .ui.ui.olive.menu .active.item:hover, 14407 .ui.ui.olive.menu .active.item { 14408 color: #B5CC18; 14409 } 14410 14411 .ui.ui.ui.menu .green.active.item, 14412 .ui.ui.green.menu .active.item:hover, 14413 .ui.ui.green.menu .active.item { 14414 color: #21BA45; 14415 } 14416 14417 .ui.ui.ui.menu .teal.active.item, 14418 .ui.ui.teal.menu .active.item:hover, 14419 .ui.ui.teal.menu .active.item { 14420 color: #00B5AD; 14421 } 14422 14423 .ui.ui.ui.menu .blue.active.item, 14424 .ui.ui.blue.menu .active.item:hover, 14425 .ui.ui.blue.menu .active.item { 14426 color: #2185D0; 14427 } 14428 14429 .ui.ui.ui.menu .violet.active.item, 14430 .ui.ui.violet.menu .active.item:hover, 14431 .ui.ui.violet.menu .active.item { 14432 color: #6435C9; 14433 } 14434 14435 .ui.ui.ui.menu .purple.active.item, 14436 .ui.ui.purple.menu .active.item:hover, 14437 .ui.ui.purple.menu .active.item { 14438 color: #A333C8; 14439 } 14440 14441 .ui.ui.ui.menu .pink.active.item, 14442 .ui.ui.pink.menu .active.item:hover, 14443 .ui.ui.pink.menu .active.item { 14444 color: #E03997; 14445 } 14446 14447 .ui.ui.ui.menu .brown.active.item, 14448 .ui.ui.brown.menu .active.item:hover, 14449 .ui.ui.brown.menu .active.item { 14450 color: #A5673F; 14451 } 14452 14453 .ui.ui.ui.menu .grey.active.item, 14454 .ui.ui.grey.menu .active.item:hover, 14455 .ui.ui.grey.menu .active.item { 14456 color: #767676; 14457 } 14458 14459 .ui.ui.ui.menu .black.active.item, 14460 .ui.ui.black.menu .active.item:hover, 14461 .ui.ui.black.menu .active.item { 14462 color: #1B1C1D; 14463 } 14464 14465 /*-------------- 14466 Floated 14467 ---------------*/ 14468 14469 .ui.floated.menu { 14470 float: left; 14471 margin: 0 0.5rem 0 0; 14472 } 14473 14474 .ui.floated.menu .item:last-child:before { 14475 display: none; 14476 } 14477 14478 .ui.right.floated.menu { 14479 float: right; 14480 margin: 0 0 0 0.5rem; 14481 } 14482 14483 /*-------------- 14484 Fitted 14485 ---------------*/ 14486 14487 .ui.fitted.menu .item, 14488 .ui.fitted.menu .item .menu .item, 14489 .ui.menu .fitted.item { 14490 padding: 0; 14491 } 14492 14493 .ui.horizontally.fitted.menu .item, 14494 .ui.horizontally.fitted.menu .item .menu .item, 14495 .ui.menu .horizontally.fitted.item { 14496 padding-top: 0.92857143em; 14497 padding-bottom: 0.92857143em; 14498 } 14499 14500 .ui.vertically.fitted.menu .item, 14501 .ui.vertically.fitted.menu .item .menu .item, 14502 .ui.menu .vertically.fitted.item { 14503 padding-left: 1.14285714em; 14504 padding-right: 1.14285714em; 14505 } 14506 14507 /*-------------- 14508 Borderless 14509 ---------------*/ 14510 14511 .ui.borderless.menu .item:before, 14512 .ui.borderless.menu .item .menu .item:before, 14513 .ui.menu .borderless.item:before { 14514 background: none !important; 14515 } 14516 14517 /*------------------- 14518 Compact 14519 --------------------*/ 14520 14521 .ui.compact.menu { 14522 display: inline-flex; 14523 margin: 0; 14524 vertical-align: middle; 14525 } 14526 14527 .ui.compact.vertical.menu { 14528 /* IE hack to make dropdown icons appear inline */ 14529 display: -ms-inline-flexbox !important; 14530 display: inline-block; 14531 } 14532 14533 .ui.compact.menu:not(.secondary) .item:last-child { 14534 border-radius: 0 0.28571429rem 0.28571429rem 0; 14535 } 14536 14537 .ui.compact.menu .item:last-child:before { 14538 display: none; 14539 } 14540 14541 .ui.compact.vertical.menu { 14542 width: auto !important; 14543 } 14544 14545 .ui.compact.vertical.menu .item:last-child::before { 14546 display: block; 14547 } 14548 14549 /*------------------- 14550 Fluid 14551 --------------------*/ 14552 14553 .ui.menu.fluid, 14554 .ui.vertical.menu.fluid { 14555 width: 100% !important; 14556 } 14557 14558 /*------------------- 14559 Evenly Sized 14560 --------------------*/ 14561 14562 .ui.item.menu, 14563 .ui.item.menu .item { 14564 width: 100%; 14565 padding-left: 0 !important; 14566 padding-right: 0 !important; 14567 margin-left: 0 !important; 14568 margin-right: 0 !important; 14569 text-align: center; 14570 justify-content: center; 14571 } 14572 14573 .ui.attached.item.menu:not(.tabular) { 14574 margin: 0 -1px !important; 14575 } 14576 14577 .ui.item.menu .item:last-child:before { 14578 display: none; 14579 } 14580 14581 .ui.menu.two.item .item { 14582 width: 50%; 14583 } 14584 14585 .ui.menu.three.item .item { 14586 width: 33.333%; 14587 } 14588 14589 .ui.menu.four.item .item { 14590 width: 25%; 14591 } 14592 14593 .ui.menu.five.item .item { 14594 width: 20%; 14595 } 14596 14597 .ui.menu.six.item .item { 14598 width: 16.666%; 14599 } 14600 14601 .ui.menu.seven.item .item { 14602 width: 14.285%; 14603 } 14604 14605 .ui.menu.eight.item .item { 14606 width: 12.5%; 14607 } 14608 14609 .ui.menu.nine.item .item { 14610 width: 11.11%; 14611 } 14612 14613 .ui.menu.ten.item .item { 14614 width: 10%; 14615 } 14616 14617 .ui.menu.eleven.item .item { 14618 width: 9.09%; 14619 } 14620 14621 .ui.menu.twelve.item .item { 14622 width: 8.333%; 14623 } 14624 14625 /*-------------- 14626 Fixed 14627 ---------------*/ 14628 14629 .ui.menu.fixed { 14630 position: fixed; 14631 z-index: 101; 14632 margin: 0; 14633 width: 100%; 14634 } 14635 14636 .ui.menu.fixed, 14637 .ui.menu.fixed .item:first-child, 14638 .ui.menu.fixed .item:last-child { 14639 border-radius: 0 !important; 14640 } 14641 14642 .ui.fixed.menu, 14643 .ui[class*="top fixed"].menu { 14644 top: 0; 14645 left: 0; 14646 right: auto; 14647 bottom: auto; 14648 } 14649 14650 .ui[class*="top fixed"].menu { 14651 border-top: none; 14652 border-left: none; 14653 border-right: none; 14654 } 14655 14656 .ui[class*="right fixed"].menu { 14657 border-top: none; 14658 border-bottom: none; 14659 border-right: none; 14660 top: 0; 14661 right: 0; 14662 left: auto; 14663 bottom: auto; 14664 width: auto; 14665 height: 100%; 14666 } 14667 14668 .ui[class*="bottom fixed"].menu { 14669 border-bottom: none; 14670 border-left: none; 14671 border-right: none; 14672 bottom: 0; 14673 left: 0; 14674 top: auto; 14675 right: auto; 14676 } 14677 14678 .ui[class*="left fixed"].menu { 14679 border-top: none; 14680 border-bottom: none; 14681 border-left: none; 14682 top: 0; 14683 left: 0; 14684 right: auto; 14685 bottom: auto; 14686 width: auto; 14687 height: 100%; 14688 } 14689 14690 /* Coupling with Grid */ 14691 14692 .ui.fixed.menu + .ui.grid { 14693 padding-top: 2.75rem; 14694 } 14695 14696 /*------------------- 14697 Pointing 14698 --------------------*/ 14699 14700 .ui.pointing.menu .item:after { 14701 visibility: hidden; 14702 position: absolute; 14703 content: ''; 14704 top: 100%; 14705 left: 50%; 14706 transform: translateX(-50%) translateY(-50%) rotate(45deg); 14707 background: none; 14708 margin: 0.5px 0 0; 14709 width: 0.57142857em; 14710 height: 0.57142857em; 14711 border: none; 14712 border-bottom: 1px solid #D4D4D5; 14713 border-right: 1px solid #D4D4D5; 14714 z-index: 2; 14715 transition: background 0.1s ease; 14716 } 14717 14718 .ui.vertical.pointing.menu .item:after { 14719 position: absolute; 14720 top: 50%; 14721 right: 0; 14722 bottom: auto; 14723 left: auto; 14724 transform: translateX(50%) translateY(-50%) rotate(45deg); 14725 margin: 0 -0.5px 0 0; 14726 border: none; 14727 border-top: 1px solid #D4D4D5; 14728 border-right: 1px solid #D4D4D5; 14729 } 14730 14731 .ui.pointing.menu .ui.dropdown .menu .item:after, 14732 .ui.vertical.pointing.menu .ui.dropdown .menu .item:after { 14733 display: none; 14734 } 14735 14736 /* Active */ 14737 14738 .ui.pointing.menu .active.item:after { 14739 visibility: visible; 14740 } 14741 14742 .ui.pointing.menu .active.dropdown.item:after { 14743 visibility: hidden; 14744 } 14745 14746 /* Don't double up pointers */ 14747 14748 .ui.pointing.menu .dropdown.active.item:after, 14749 .ui.pointing.menu .active.item .menu .active.item:after { 14750 display: none; 14751 } 14752 14753 /* Colors */ 14754 14755 .ui.pointing.menu .active.item:hover:after { 14756 background-color: #F2F2F2; 14757 } 14758 14759 .ui.pointing.menu .active.item:after { 14760 background-color: #F2F2F2; 14761 } 14762 14763 .ui.pointing.menu .active.item:hover:after { 14764 background-color: #F2F2F2; 14765 } 14766 14767 .ui.vertical.pointing.menu .active.item:hover:after { 14768 background-color: #F2F2F2; 14769 } 14770 14771 .ui.vertical.pointing.menu .active.item:after { 14772 background-color: #F2F2F2; 14773 } 14774 14775 .ui.vertical.pointing.menu .menu .active.item:after { 14776 background-color: #FFFFFF; 14777 } 14778 14779 .ui.inverted.pointing.menu .primary.active.item:after { 14780 background-color: #2185D0; 14781 } 14782 14783 .ui.inverted.pointing.menu .secondary.active.item:after { 14784 background-color: #1B1C1D; 14785 } 14786 14787 .ui.inverted.pointing.menu .red.active.item:after { 14788 background-color: #DB2828; 14789 } 14790 14791 .ui.inverted.pointing.menu .orange.active.item:after { 14792 background-color: #F2711C; 14793 } 14794 14795 .ui.inverted.pointing.menu .yellow.active.item:after { 14796 background-color: #FBBD08; 14797 } 14798 14799 .ui.inverted.pointing.menu .olive.active.item:after { 14800 background-color: #B5CC18; 14801 } 14802 14803 .ui.inverted.pointing.menu .green.active.item:after { 14804 background-color: #21BA45; 14805 } 14806 14807 .ui.inverted.pointing.menu .teal.active.item:after { 14808 background-color: #00B5AD; 14809 } 14810 14811 .ui.inverted.pointing.menu .blue.active.item:after { 14812 background-color: #2185D0; 14813 } 14814 14815 .ui.inverted.pointing.menu .violet.active.item:after { 14816 background-color: #6435C9; 14817 } 14818 14819 .ui.inverted.pointing.menu .purple.active.item:after { 14820 background-color: #A333C8; 14821 } 14822 14823 .ui.inverted.pointing.menu .pink.active.item:after { 14824 background-color: #E03997; 14825 } 14826 14827 .ui.inverted.pointing.menu .brown.active.item:after { 14828 background-color: #A5673F; 14829 } 14830 14831 .ui.inverted.pointing.menu .grey.active.item:after { 14832 background-color: #767676; 14833 } 14834 14835 .ui.inverted.pointing.menu .black.active.item:after { 14836 background-color: #1B1C1D; 14837 } 14838 14839 /*-------------- 14840 Attached 14841 ---------------*/ 14842 14843 /* Middle */ 14844 14845 .ui.attached.menu { 14846 top: 0; 14847 bottom: 0; 14848 border-radius: 0; 14849 margin: 0 -1px; 14850 width: calc(100% + 2px); 14851 max-width: calc(100% + 2px); 14852 box-shadow: none; 14853 } 14854 14855 .ui.attached + .ui.attached.menu:not(.top) { 14856 border-top: none; 14857 } 14858 14859 /* Top */ 14860 14861 .ui[class*="top attached"].menu { 14862 bottom: 0; 14863 margin-bottom: 0; 14864 top: 0; 14865 margin-top: 1rem; 14866 border-radius: 0.28571429rem 0.28571429rem 0 0; 14867 } 14868 14869 .ui.menu[class*="top attached"]:first-child { 14870 margin-top: 0; 14871 } 14872 14873 /* Bottom */ 14874 14875 .ui[class*="bottom attached"].menu { 14876 bottom: 0; 14877 margin-top: 0; 14878 top: 0; 14879 margin-bottom: 1rem; 14880 box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none; 14881 border-radius: 0 0 0.28571429rem 0.28571429rem; 14882 } 14883 14884 .ui[class*="bottom attached"].menu:last-child { 14885 margin-bottom: 0; 14886 } 14887 14888 /* Attached Menu Item */ 14889 14890 .ui.top.attached.menu > .item:first-child { 14891 border-radius: 0.28571429rem 0 0 0; 14892 } 14893 14894 .ui.bottom.attached.menu > .item:first-child { 14895 border-radius: 0 0 0 0.28571429rem; 14896 } 14897 14898 /* Tabular Attached */ 14899 14900 .ui.attached.menu:not(.tabular) { 14901 border: 1px solid #D4D4D5; 14902 } 14903 14904 .ui.attached.tabular.menu { 14905 margin-left: 0; 14906 margin-right: 0; 14907 width: 100%; 14908 } 14909 14910 /*-------------- 14911 Sizes 14912 ---------------*/ 14913 14914 .ui.menu { 14915 font-size: 1rem; 14916 } 14917 14918 .ui.vertical.menu { 14919 width: 15rem; 14920 } 14921 14922 .ui.mini.menu, 14923 .ui.mini.menu .dropdown, 14924 .ui.mini.menu .dropdown .menu > .item { 14925 font-size: 0.78571429rem; 14926 } 14927 14928 .ui.mini.vertical.menu:not(.icon) { 14929 width: 9rem; 14930 } 14931 14932 .ui.tiny.menu, 14933 .ui.tiny.menu .dropdown, 14934 .ui.tiny.menu .dropdown .menu > .item { 14935 font-size: 0.85714286rem; 14936 } 14937 14938 .ui.tiny.vertical.menu:not(.icon) { 14939 width: 11rem; 14940 } 14941 14942 .ui.small.menu, 14943 .ui.small.menu .dropdown, 14944 .ui.small.menu .dropdown .menu > .item { 14945 font-size: 0.92857143rem; 14946 } 14947 14948 .ui.small.vertical.menu:not(.icon) { 14949 width: 13rem; 14950 } 14951 14952 .ui.large.menu, 14953 .ui.large.menu .dropdown, 14954 .ui.large.menu .dropdown .menu > .item { 14955 font-size: 1.07142857rem; 14956 } 14957 14958 .ui.large.vertical.menu:not(.icon) { 14959 width: 18rem; 14960 } 14961 14962 .ui.big.menu, 14963 .ui.big.menu .dropdown, 14964 .ui.big.menu .dropdown .menu > .item { 14965 font-size: 1.14285714rem; 14966 } 14967 14968 .ui.big.vertical.menu:not(.icon) { 14969 width: 20rem; 14970 } 14971 14972 .ui.huge.menu, 14973 .ui.huge.menu .dropdown, 14974 .ui.huge.menu .dropdown .menu > .item { 14975 font-size: 1.21428571rem; 14976 } 14977 14978 .ui.huge.vertical.menu:not(.icon) { 14979 width: 22rem; 14980 } 14981 14982 .ui.massive.menu, 14983 .ui.massive.menu .dropdown, 14984 .ui.massive.menu .dropdown .menu > .item { 14985 font-size: 1.28571429rem; 14986 } 14987 14988 .ui.massive.vertical.menu:not(.icon) { 14989 width: 25rem; 14990 } 14991 14992 /*------------------- 14993 Inverted dropdowns 14994 --------------------*/ 14995 14996 .ui.menu .ui.inverted.inverted.dropdown.item .menu { 14997 background: #1B1C1D; 14998 box-shadow: none; 14999 } 15000 15001 .ui.menu .ui.inverted.dropdown .menu > .item { 15002 color: rgba(255, 255, 255, 0.8) !important; 15003 } 15004 15005 .ui.menu .ui.inverted.dropdown .menu > .active.item { 15006 background: transparent !important; 15007 color: rgba(255, 255, 255, 0.8) !important; 15008 } 15009 15010 .ui.menu .ui.inverted.dropdown .menu > .item:hover { 15011 background: rgba(255, 255, 255, 0.08) !important; 15012 color: rgba(255, 255, 255, 0.8) !important; 15013 } 15014 15015 .ui.menu .ui.inverted.dropdown .menu > .selected.item { 15016 background: rgba(255, 255, 255, 0.15) !important; 15017 color: rgba(255, 255, 255, 0.8) !important; 15018 } 15019 15020 /* Vertical */ 15021 15022 .ui.vertical.menu .inverted.dropdown.item .menu { 15023 box-shadow: none; 15024 } 15025 15026 /******************************* 15027 Theme Overrides 15028 *******************************/ 15029 15030 /******************************* 15031 Site Overrides 15032 *******************************/ 15033 /*! 15034 * # Fomantic-UI - Message 15035 * http://github.com/fomantic/Fomantic-UI/ 15036 * 15037 * 15038 * Released under the MIT license 15039 * http://opensource.org/licenses/MIT 15040 * 15041 */ 15042 15043 /******************************* 15044 Message 15045 *******************************/ 15046 15047 .ui.message { 15048 position: relative; 15049 min-height: 1em; 15050 margin: 1em 0; 15051 background: #F8F8F9; 15052 padding: 1em 1.5em; 15053 line-height: 1.4285em; 15054 color: rgba(0, 0, 0, 0.87); 15055 transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease, box-shadow 0.1s ease; 15056 border-radius: 0.28571429rem; 15057 box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.22) inset, 0 0 0 0 rgba(0, 0, 0, 0); 15058 } 15059 15060 .ui.message:first-child { 15061 margin-top: 0; 15062 } 15063 15064 .ui.message:last-child { 15065 margin-bottom: 0; 15066 } 15067 15068 /*-------------- 15069 Content 15070 ---------------*/ 15071 15072 /* Header */ 15073 15074 .ui.message .header { 15075 display: block; 15076 font-family: var(--fonts-regular); 15077 font-weight: 500; 15078 margin: -0.14285714em 0 0 0; 15079 } 15080 15081 /* Default font size */ 15082 15083 .ui.message .header:not(.ui) { 15084 font-size: 1.14285714em; 15085 } 15086 15087 /* Paragraph */ 15088 15089 .ui.message p { 15090 opacity: 0.85; 15091 margin: 0.75em 0; 15092 } 15093 15094 .ui.message p:first-child { 15095 margin-top: 0; 15096 } 15097 15098 .ui.message p:last-child { 15099 margin-bottom: 0; 15100 } 15101 15102 .ui.message .header + p { 15103 margin-top: 0.25em; 15104 } 15105 15106 /* List */ 15107 15108 .ui.message .list:not(.ui) { 15109 text-align: left; 15110 padding: 0; 15111 opacity: 0.85; 15112 list-style-position: inside; 15113 margin: 0.5em 0 0; 15114 } 15115 15116 .ui.message .list:not(.ui):first-child { 15117 margin-top: 0; 15118 } 15119 15120 .ui.message .list:not(.ui):last-child { 15121 margin-bottom: 0; 15122 } 15123 15124 .ui.message .list:not(.ui) li { 15125 position: relative; 15126 list-style-type: none; 15127 margin: 0 0 0.3em 1em; 15128 padding: 0; 15129 } 15130 15131 .ui.message .list:not(.ui) li:before { 15132 position: absolute; 15133 content: '•'; 15134 left: -1em; 15135 height: 100%; 15136 vertical-align: baseline; 15137 } 15138 15139 .ui.message .list:not(.ui) li:last-child { 15140 margin-bottom: 0; 15141 } 15142 15143 /* Icon */ 15144 15145 .ui.message > i.icon { 15146 margin-right: 0.6em; 15147 } 15148 15149 /* Close Icon */ 15150 15151 .ui.message > .close.icon { 15152 cursor: pointer; 15153 position: absolute; 15154 margin: 0; 15155 top: 0.78575em; 15156 right: 0.5em; 15157 opacity: 0.7; 15158 transition: opacity 0.1s ease; 15159 } 15160 15161 .ui.message > .close.icon:hover { 15162 opacity: 1; 15163 } 15164 15165 /* First / Last Element */ 15166 15167 .ui.message > :first-child { 15168 margin-top: 0; 15169 } 15170 15171 .ui.message > :last-child { 15172 margin-bottom: 0; 15173 } 15174 15175 /******************************* 15176 Coupling 15177 *******************************/ 15178 15179 .ui.dropdown .menu > .message { 15180 margin: 0 -1px; 15181 } 15182 15183 /******************************* 15184 States 15185 *******************************/ 15186 15187 /*-------------- 15188 Visible 15189 ---------------*/ 15190 15191 .ui.visible.visible.visible.visible.message { 15192 display: block; 15193 } 15194 15195 .ui.icon.visible.visible.visible.visible.message { 15196 display: flex; 15197 } 15198 15199 /*-------------- 15200 Hidden 15201 ---------------*/ 15202 15203 .ui.hidden.hidden.hidden.hidden.message { 15204 display: none; 15205 } 15206 15207 /******************************* 15208 Variations 15209 *******************************/ 15210 15211 /*-------------- 15212 Compact 15213 ---------------*/ 15214 15215 .ui.compact.message { 15216 display: inline-block; 15217 } 15218 15219 .ui.compact.icon.message { 15220 display: inline-flex; 15221 width: auto; 15222 } 15223 15224 /*-------------- 15225 Attached 15226 ---------------*/ 15227 15228 .ui.attached.message { 15229 margin-bottom: -1px; 15230 border-radius: 0.28571429rem 0.28571429rem 0 0; 15231 box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset; 15232 margin-left: -1px; 15233 margin-right: -1px; 15234 } 15235 15236 .ui.attached + .ui.attached.message:not(.top):not(.bottom) { 15237 margin-top: -1px; 15238 border-radius: 0; 15239 } 15240 15241 .ui.bottom.attached.message { 15242 margin-top: -1px; 15243 border-radius: 0 0 0.28571429rem 0.28571429rem; 15244 box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset, 0 1px 2px 0 rgba(34, 36, 38, 0.15); 15245 } 15246 15247 .ui.bottom.attached.message:not(:last-child) { 15248 margin-bottom: 1em; 15249 } 15250 15251 .ui.attached.icon.message { 15252 width: auto; 15253 } 15254 15255 /*-------------- 15256 Icon 15257 ---------------*/ 15258 15259 .ui.icon.message { 15260 display: flex; 15261 width: 100%; 15262 align-items: center; 15263 } 15264 15265 .ui.icon.message > i.icon:not(.close) { 15266 display: block; 15267 flex: 0 0 auto; 15268 width: auto; 15269 line-height: 1; 15270 vertical-align: middle; 15271 font-size: 3em; 15272 opacity: 0.8; 15273 } 15274 15275 .ui.icon.message > .content { 15276 display: block; 15277 flex: 1 1 auto; 15278 vertical-align: middle; 15279 } 15280 15281 .ui.icon.message > i.icon:not(.close) + .content { 15282 padding-left: 0; 15283 } 15284 15285 .ui.icon.message > i.circular.icon { 15286 width: 1em; 15287 } 15288 15289 /*-------------- 15290 Floating 15291 ---------------*/ 15292 15293 .ui.floating.message { 15294 box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.22) inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); 15295 } 15296 15297 /*-------------- 15298 Colors 15299 ---------------*/ 15300 15301 /*-------------- 15302 Types 15303 ---------------*/ 15304 15305 .ui.positive.message { 15306 background-color: #FCFFF5; 15307 color: #2C662D; 15308 } 15309 15310 .ui.positive.message, 15311 .ui.attached.positive.message { 15312 box-shadow: 0 0 0 1px #A3C293 inset, 0 0 0 0 rgba(0, 0, 0, 0); 15313 } 15314 15315 .ui.floating.positive.message { 15316 box-shadow: 0 0 0 1px #A3C293 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); 15317 } 15318 15319 .ui.positive.message .header { 15320 color: #1A531B; 15321 } 15322 15323 .ui.negative.message { 15324 background-color: #FFF6F6; 15325 color: #9F3A38; 15326 } 15327 15328 .ui.negative.message, 15329 .ui.attached.negative.message { 15330 box-shadow: 0 0 0 1px #E0B4B4 inset, 0 0 0 0 rgba(0, 0, 0, 0); 15331 } 15332 15333 .ui.floating.negative.message { 15334 box-shadow: 0 0 0 1px #E0B4B4 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); 15335 } 15336 15337 .ui.negative.message .header { 15338 color: #912D2B; 15339 } 15340 15341 .ui.info.message { 15342 background-color: #F8FFFF; 15343 color: #276F86; 15344 } 15345 15346 .ui.info.message, 15347 .ui.attached.info.message { 15348 box-shadow: 0 0 0 1px #A9D5DE inset, 0 0 0 0 rgba(0, 0, 0, 0); 15349 } 15350 15351 .ui.floating.info.message { 15352 box-shadow: 0 0 0 1px #A9D5DE inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); 15353 } 15354 15355 .ui.info.message .header { 15356 color: #0E566C; 15357 } 15358 15359 .ui.warning.message { 15360 background-color: #FFFAF3; 15361 color: #573A08; 15362 } 15363 15364 .ui.warning.message, 15365 .ui.attached.warning.message { 15366 box-shadow: 0 0 0 1px #C9BA9B inset, 0 0 0 0 rgba(0, 0, 0, 0); 15367 } 15368 15369 .ui.floating.warning.message { 15370 box-shadow: 0 0 0 1px #C9BA9B inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); 15371 } 15372 15373 .ui.warning.message .header { 15374 color: #794B02; 15375 } 15376 15377 .ui.error.message { 15378 background-color: #FFF6F6; 15379 color: #9F3A38; 15380 } 15381 15382 .ui.error.message, 15383 .ui.attached.error.message { 15384 box-shadow: 0 0 0 1px #E0B4B4 inset, 0 0 0 0 rgba(0, 0, 0, 0); 15385 } 15386 15387 .ui.floating.error.message { 15388 box-shadow: 0 0 0 1px #E0B4B4 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); 15389 } 15390 15391 .ui.error.message .header { 15392 color: #912D2B; 15393 } 15394 15395 .ui.success.message { 15396 background-color: #FCFFF5; 15397 color: #2C662D; 15398 } 15399 15400 .ui.success.message, 15401 .ui.attached.success.message { 15402 box-shadow: 0 0 0 1px #A3C293 inset, 0 0 0 0 rgba(0, 0, 0, 0); 15403 } 15404 15405 .ui.floating.success.message { 15406 box-shadow: 0 0 0 1px #A3C293 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); 15407 } 15408 15409 .ui.success.message .header { 15410 color: #1A531B; 15411 } 15412 15413 .ui.primary.message { 15414 background-color: #DFF0FF; 15415 color: rgba(255, 255, 255, 0.9); 15416 } 15417 15418 .ui.primary.message, 15419 .ui.attached.primary.message { 15420 box-shadow: 0 0 0 1px #2185D0 inset, 0 0 0 0 rgba(0, 0, 0, 0); 15421 } 15422 15423 .ui.floating.primary.message { 15424 box-shadow: 0 0 0 1px #2185D0 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); 15425 } 15426 15427 .ui.primary.message .header { 15428 color: rgba(242, 242, 242, 0.9); 15429 } 15430 15431 .ui.secondary.message { 15432 background-color: #F4F4F4; 15433 color: rgba(255, 255, 255, 0.9); 15434 } 15435 15436 .ui.secondary.message, 15437 .ui.attached.secondary.message { 15438 box-shadow: 0 0 0 1px #1B1C1D inset, 0 0 0 0 rgba(0, 0, 0, 0); 15439 } 15440 15441 .ui.floating.secondary.message { 15442 box-shadow: 0 0 0 1px #1B1C1D inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); 15443 } 15444 15445 .ui.secondary.message .header { 15446 color: rgba(242, 242, 242, 0.9); 15447 } 15448 15449 .ui.red.message { 15450 background-color: #FFE8E6; 15451 color: #DB2828; 15452 } 15453 15454 .ui.red.message, 15455 .ui.attached.red.message { 15456 box-shadow: 0 0 0 1px #DB2828 inset, 0 0 0 0 rgba(0, 0, 0, 0); 15457 } 15458 15459 .ui.floating.red.message { 15460 box-shadow: 0 0 0 1px #DB2828 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); 15461 } 15462 15463 .ui.red.message .header { 15464 color: #c82121; 15465 } 15466 15467 .ui.orange.message { 15468 background-color: #FFEDDE; 15469 color: #F2711C; 15470 } 15471 15472 .ui.orange.message, 15473 .ui.attached.orange.message { 15474 box-shadow: 0 0 0 1px #F2711C inset, 0 0 0 0 rgba(0, 0, 0, 0); 15475 } 15476 15477 .ui.floating.orange.message { 15478 box-shadow: 0 0 0 1px #F2711C inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); 15479 } 15480 15481 .ui.orange.message .header { 15482 color: #e7640d; 15483 } 15484 15485 .ui.yellow.message { 15486 background-color: #FFF8DB; 15487 color: #B58105; 15488 } 15489 15490 .ui.yellow.message, 15491 .ui.attached.yellow.message { 15492 box-shadow: 0 0 0 1px #B58105 inset, 0 0 0 0 rgba(0, 0, 0, 0); 15493 } 15494 15495 .ui.floating.yellow.message { 15496 box-shadow: 0 0 0 1px #B58105 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); 15497 } 15498 15499 .ui.yellow.message .header { 15500 color: #9c6f04; 15501 } 15502 15503 .ui.olive.message { 15504 background-color: #FBFDEF; 15505 color: #8ABC1E; 15506 } 15507 15508 .ui.olive.message, 15509 .ui.attached.olive.message { 15510 box-shadow: 0 0 0 1px #8ABC1E inset, 0 0 0 0 rgba(0, 0, 0, 0); 15511 } 15512 15513 .ui.floating.olive.message { 15514 box-shadow: 0 0 0 1px #8ABC1E inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); 15515 } 15516 15517 .ui.olive.message .header { 15518 color: #7aa61a; 15519 } 15520 15521 .ui.green.message { 15522 background-color: #E5F9E7; 15523 color: #1EBC30; 15524 } 15525 15526 .ui.green.message, 15527 .ui.attached.green.message { 15528 box-shadow: 0 0 0 1px #1EBC30 inset, 0 0 0 0 rgba(0, 0, 0, 0); 15529 } 15530 15531 .ui.floating.green.message { 15532 box-shadow: 0 0 0 1px #1EBC30 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); 15533 } 15534 15535 .ui.green.message .header { 15536 color: #1aa62a; 15537 } 15538 15539 .ui.teal.message { 15540 background-color: #E1F7F7; 15541 color: #10A3A3; 15542 } 15543 15544 .ui.teal.message, 15545 .ui.attached.teal.message { 15546 box-shadow: 0 0 0 1px #10A3A3 inset, 0 0 0 0 rgba(0, 0, 0, 0); 15547 } 15548 15549 .ui.floating.teal.message { 15550 box-shadow: 0 0 0 1px #10A3A3 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); 15551 } 15552 15553 .ui.teal.message .header { 15554 color: #0e8c8c; 15555 } 15556 15557 .ui.blue.message { 15558 background-color: #DFF0FF; 15559 color: #2185D0; 15560 } 15561 15562 .ui.blue.message, 15563 .ui.attached.blue.message { 15564 box-shadow: 0 0 0 1px #2185D0 inset, 0 0 0 0 rgba(0, 0, 0, 0); 15565 } 15566 15567 .ui.floating.blue.message { 15568 box-shadow: 0 0 0 1px #2185D0 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); 15569 } 15570 15571 .ui.blue.message .header { 15572 color: #1e77ba; 15573 } 15574 15575 .ui.violet.message { 15576 background-color: #EAE7FF; 15577 color: #6435C9; 15578 } 15579 15580 .ui.violet.message, 15581 .ui.attached.violet.message { 15582 box-shadow: 0 0 0 1px #6435C9 inset, 0 0 0 0 rgba(0, 0, 0, 0); 15583 } 15584 15585 .ui.floating.violet.message { 15586 box-shadow: 0 0 0 1px #6435C9 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); 15587 } 15588 15589 .ui.violet.message .header { 15590 color: #5a30b5; 15591 } 15592 15593 .ui.purple.message { 15594 background-color: #F6E7FF; 15595 color: #A333C8; 15596 } 15597 15598 .ui.purple.message, 15599 .ui.attached.purple.message { 15600 box-shadow: 0 0 0 1px #A333C8 inset, 0 0 0 0 rgba(0, 0, 0, 0); 15601 } 15602 15603 .ui.floating.purple.message { 15604 box-shadow: 0 0 0 1px #A333C8 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); 15605 } 15606 15607 .ui.purple.message .header { 15608 color: #922eb4; 15609 } 15610 15611 .ui.pink.message { 15612 background-color: #FFE3FB; 15613 color: #E03997; 15614 } 15615 15616 .ui.pink.message, 15617 .ui.attached.pink.message { 15618 box-shadow: 0 0 0 1px #E03997 inset, 0 0 0 0 rgba(0, 0, 0, 0); 15619 } 15620 15621 .ui.floating.pink.message { 15622 box-shadow: 0 0 0 1px #E03997 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); 15623 } 15624 15625 .ui.pink.message .header { 15626 color: #dd238b; 15627 } 15628 15629 .ui.brown.message { 15630 background-color: #F1E2D3; 15631 color: #A5673F; 15632 } 15633 15634 .ui.brown.message, 15635 .ui.attached.brown.message { 15636 box-shadow: 0 0 0 1px #A5673F inset, 0 0 0 0 rgba(0, 0, 0, 0); 15637 } 15638 15639 .ui.floating.brown.message { 15640 box-shadow: 0 0 0 1px #A5673F inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); 15641 } 15642 15643 .ui.brown.message .header { 15644 color: #935b38; 15645 } 15646 15647 .ui.grey.message { 15648 background-color: #F4F4F4; 15649 color: #767676; 15650 } 15651 15652 .ui.grey.message, 15653 .ui.attached.grey.message { 15654 box-shadow: 0 0 0 1px #767676 inset, 0 0 0 0 rgba(0, 0, 0, 0); 15655 } 15656 15657 .ui.floating.grey.message { 15658 box-shadow: 0 0 0 1px #767676 inset, 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); 15659 } 15660 15661 .ui.grey.message .header { 15662 color: #696969; 15663 } 15664 15665 .ui.black.message { 15666 background-color: #1B1C1D; 15667 color: rgba(255, 255, 255, 0.9); 15668 } 15669 15670 .ui.black.message .header { 15671 color: rgba(255, 255, 255, 0.9); 15672 } 15673 15674 /*-------------- 15675 Sizes 15676 ---------------*/ 15677 15678 .ui.message { 15679 font-size: 1em; 15680 } 15681 15682 .ui.mini.message { 15683 font-size: 0.78571429em; 15684 } 15685 15686 .ui.tiny.message { 15687 font-size: 0.85714286em; 15688 } 15689 15690 .ui.small.message { 15691 font-size: 0.92857143em; 15692 } 15693 15694 .ui.large.message { 15695 font-size: 1.14285714em; 15696 } 15697 15698 .ui.big.message { 15699 font-size: 1.28571429em; 15700 } 15701 15702 .ui.huge.message { 15703 font-size: 1.42857143em; 15704 } 15705 15706 .ui.massive.message { 15707 font-size: 1.71428571em; 15708 } 15709 15710 /******************************* 15711 Theme Overrides 15712 *******************************/ 15713 15714 /******************************* 15715 Site Overrides 15716 *******************************/ 15717 /*! 15718 * # Fomantic-UI - Modal 15719 * http://github.com/fomantic/Fomantic-UI/ 15720 * 15721 * 15722 * Released under the MIT license 15723 * http://opensource.org/licenses/MIT 15724 * 15725 */ 15726 15727 /******************************* 15728 Modal 15729 *******************************/ 15730 15731 .ui.modal { 15732 position: absolute; 15733 display: none; 15734 z-index: 1001; 15735 text-align: left; 15736 background: #FFFFFF; 15737 border: none; 15738 box-shadow: 1px 3px 3px 0 rgba(0, 0, 0, 0.2), 1px 3px 15px 2px rgba(0, 0, 0, 0.2); 15739 transform-origin: 50% 25%; 15740 flex: 0 0 auto; 15741 border-radius: 0.28571429rem; 15742 -webkit-user-select: text; 15743 -moz-user-select: text; 15744 user-select: text; 15745 will-change: top, left, margin, transform, opacity; 15746 } 15747 15748 .ui.modal > :first-child:not(.icon):not(.dimmer), 15749 .ui.modal > i.icon:first-child + *, 15750 .ui.modal > .dimmer:first-child + *:not(.icon), 15751 .ui.modal > .dimmer:first-child + i.icon + * { 15752 border-top-left-radius: 0.28571429rem; 15753 border-top-right-radius: 0.28571429rem; 15754 } 15755 15756 .ui.modal > :last-child { 15757 border-bottom-left-radius: 0.28571429rem; 15758 border-bottom-right-radius: 0.28571429rem; 15759 } 15760 15761 .ui.modal > .ui.dimmer { 15762 border-radius: inherit; 15763 } 15764 15765 /******************************* 15766 Content 15767 *******************************/ 15768 15769 /*-------------- 15770 Close 15771 ---------------*/ 15772 15773 .ui.modal > .close { 15774 cursor: pointer; 15775 position: absolute; 15776 top: -2.5rem; 15777 right: -2.5rem; 15778 z-index: 1; 15779 opacity: 0.8; 15780 font-size: 1.25em; 15781 color: #FFFFFF; 15782 width: 2.25rem; 15783 height: 2.25rem; 15784 padding: 0.625rem 0 0 0; 15785 } 15786 15787 .ui.modal > .close:hover { 15788 opacity: 1; 15789 } 15790 15791 /*-------------- 15792 Header 15793 ---------------*/ 15794 15795 .ui.modal > .header { 15796 display: block; 15797 font-family: var(--fonts-regular); 15798 background: #FFFFFF; 15799 margin: 0; 15800 padding: 1.25rem 1.5rem; 15801 box-shadow: none; 15802 color: rgba(0, 0, 0, 0.85); 15803 border-bottom: 1px solid rgba(34, 36, 38, 0.15); 15804 } 15805 15806 .ui.modal > .header:not(.ui) { 15807 font-size: 1.42857143rem; 15808 line-height: 1.28571429em; 15809 font-weight: 500; 15810 } 15811 15812 /*-------------- 15813 Content 15814 ---------------*/ 15815 15816 .ui.modal > .content { 15817 display: block; 15818 width: 100%; 15819 font-size: 1em; 15820 line-height: 1.4; 15821 padding: 1.5rem; 15822 background: #FFFFFF; 15823 } 15824 15825 .ui.modal > .image.content { 15826 display: flex; 15827 flex-direction: row; 15828 } 15829 15830 /* Image */ 15831 15832 .ui.modal > .content > .image { 15833 display: block; 15834 flex: 0 1 auto; 15835 width: ''; 15836 align-self: start; 15837 max-width: 100%; 15838 } 15839 15840 .ui.modal > [class*="top aligned"] { 15841 align-self: start; 15842 } 15843 15844 .ui.modal > [class*="middle aligned"] { 15845 align-self: center; 15846 } 15847 15848 .ui.modal > [class*="stretched"] { 15849 align-self: stretch; 15850 } 15851 15852 /* Description */ 15853 15854 .ui.modal > .content > .description { 15855 display: block; 15856 flex: 1 0 auto; 15857 min-width: 0; 15858 align-self: start; 15859 } 15860 15861 .ui.modal > .content > i.icon + .description, 15862 .ui.modal > .content > .image + .description { 15863 flex: 0 1 auto; 15864 min-width: ''; 15865 width: auto; 15866 padding-left: 2em; 15867 } 15868 15869 /*rtl:ignore*/ 15870 15871 .ui.modal > .content > .image > i.icon { 15872 margin: 0; 15873 opacity: 1; 15874 width: auto; 15875 line-height: 1; 15876 font-size: 8rem; 15877 } 15878 15879 /*-------------- 15880 Actions 15881 ---------------*/ 15882 15883 .ui.modal > .actions { 15884 background: #F9FAFB; 15885 padding: 1rem 1rem; 15886 border-top: 1px solid rgba(34, 36, 38, 0.15); 15887 text-align: right; 15888 } 15889 15890 .ui.modal .actions > .button:not(.fluid) { 15891 margin-left: 0.75em; 15892 } 15893 15894 .ui.basic.modal > .actions { 15895 border-top: none; 15896 } 15897 15898 /*------------------- 15899 Responsive 15900 --------------------*/ 15901 15902 /* Modal Width */ 15903 15904 @media only screen and (max-width: 767.98px) { 15905 .ui.modal:not(.fullscreen) { 15906 width: 95%; 15907 margin: 0 0 0 0; 15908 } 15909 } 15910 15911 @media only screen and (min-width: 768px) { 15912 .ui.modal:not(.fullscreen) { 15913 width: 88%; 15914 margin: 0 0 0 0; 15915 } 15916 } 15917 15918 @media only screen and (min-width: 992px) { 15919 .ui.modal:not(.fullscreen) { 15920 width: 850px; 15921 margin: 0 0 0 0; 15922 } 15923 } 15924 15925 @media only screen and (min-width: 1200px) { 15926 .ui.modal:not(.fullscreen) { 15927 width: 900px; 15928 margin: 0 0 0 0; 15929 } 15930 } 15931 15932 @media only screen and (min-width: 1920px) { 15933 .ui.modal:not(.fullscreen) { 15934 width: 950px; 15935 margin: 0 0 0 0; 15936 } 15937 } 15938 15939 /* Tablet and Mobile */ 15940 15941 @media only screen and (max-width: 991.98px) { 15942 .ui.modal > .header { 15943 padding-right: 2.25rem; 15944 } 15945 15946 .ui.modal > .close { 15947 top: 1.0535rem; 15948 right: 1rem; 15949 color: rgba(0, 0, 0, 0.87); 15950 } 15951 } 15952 15953 /* Mobile */ 15954 15955 @media only screen and (max-width: 767.98px) { 15956 .ui.modal > .header { 15957 padding: 0.75rem 1rem !important; 15958 padding-right: 2.25rem !important; 15959 } 15960 15961 .ui.overlay.fullscreen.modal > .content.content.content { 15962 min-height: calc(100vh - 8.1rem); 15963 } 15964 15965 .ui.overlay.fullscreen.modal > .scrolling.content.content.content { 15966 max-height: calc(100vh - 8.1rem); 15967 } 15968 15969 .ui.modal > .content { 15970 display: block; 15971 padding: 1rem !important; 15972 } 15973 15974 .ui.modal > .close { 15975 top: 0.5rem !important; 15976 right: 0.5rem !important; 15977 } 15978 15979 /*rtl:ignore*/ 15980 15981 .ui.modal .image.content { 15982 flex-direction: column; 15983 } 15984 15985 .ui.modal > .content > .image { 15986 display: block; 15987 max-width: 100%; 15988 margin: 0 auto !important; 15989 text-align: center; 15990 padding: 0 0 1rem !important; 15991 } 15992 15993 .ui.modal > .content > .image > i.icon { 15994 font-size: 5rem; 15995 text-align: center; 15996 } 15997 15998 /*rtl:ignore*/ 15999 16000 .ui.modal > .content > .description { 16001 display: block; 16002 width: 100% !important; 16003 margin: 0 !important; 16004 padding: 1rem 0 !important; 16005 box-shadow: none; 16006 } 16007 16008 /* Let Buttons Stack */ 16009 16010 .ui.modal > .actions { 16011 padding: 1rem 1rem 0rem !important; 16012 } 16013 16014 .ui.modal .actions > .buttons, 16015 .ui.modal .actions > .button { 16016 margin-bottom: 1rem; 16017 } 16018 } 16019 16020 /*-------------- 16021 Coupling 16022 ---------------*/ 16023 16024 .ui.inverted.dimmer > .ui.modal { 16025 box-shadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2); 16026 } 16027 16028 /******************************* 16029 Types 16030 *******************************/ 16031 16032 .ui.basic.modal { 16033 background-color: transparent; 16034 border: none; 16035 border-radius: 0; 16036 box-shadow: none !important; 16037 color: #FFFFFF; 16038 } 16039 16040 .ui.basic.modal > .header, 16041 .ui.basic.modal > .content, 16042 .ui.basic.modal > .actions { 16043 background-color: transparent; 16044 } 16045 16046 .ui.basic.modal > .header { 16047 color: #FFFFFF; 16048 border-bottom: none; 16049 } 16050 16051 .ui.basic.modal > .close { 16052 top: 1rem; 16053 right: 1.5rem; 16054 color: #FFFFFF; 16055 } 16056 16057 .ui.inverted.dimmer > .basic.modal { 16058 color: rgba(0, 0, 0, 0.87); 16059 } 16060 16061 .ui.inverted.dimmer > .ui.basic.modal > .header { 16062 color: rgba(0, 0, 0, 0.85); 16063 } 16064 16065 /* Resort to margin positioning if legacy */ 16066 16067 .ui.legacy.legacy.modal, 16068 .ui.legacy.legacy.page.dimmer > .ui.modal { 16069 left: 50% !important; 16070 } 16071 16072 .ui.legacy.legacy.modal:not(.aligned), 16073 .ui.legacy.legacy.page.dimmer > .ui.modal:not(.aligned) { 16074 top: 50%; 16075 } 16076 16077 .ui.legacy.legacy.page.dimmer > .ui.scrolling.modal:not(.aligned), 16078 .ui.page.dimmer > .ui.scrolling.legacy.legacy.modal:not(.aligned), 16079 .ui.top.aligned.legacy.legacy.page.dimmer > .ui.modal:not(.aligned), 16080 .ui.top.aligned.dimmer > .ui.legacy.legacy.modal:not(.aligned) { 16081 top: auto; 16082 } 16083 16084 .ui.legacy.overlay.fullscreen.modal { 16085 margin-top: -2rem !important; 16086 } 16087 16088 /******************************* 16089 States 16090 *******************************/ 16091 16092 .ui.loading.modal { 16093 display: block; 16094 visibility: hidden; 16095 z-index: -1; 16096 } 16097 16098 .ui.active.modal { 16099 display: block; 16100 } 16101 16102 /******************************* 16103 Variations 16104 *******************************/ 16105 16106 /*-------------- 16107 Aligned 16108 ---------------*/ 16109 16110 .modals.dimmer .ui.top.aligned.modal { 16111 top: 5vh; 16112 } 16113 16114 .modals.dimmer .ui.bottom.aligned.modal { 16115 bottom: 5vh; 16116 } 16117 16118 @media only screen and (max-width: 767.98px) { 16119 .modals.dimmer .ui.top.aligned.modal { 16120 top: 1rem; 16121 } 16122 16123 .modals.dimmer .ui.bottom.aligned.modal { 16124 bottom: 1rem; 16125 } 16126 } 16127 16128 /*-------------- 16129 Scrolling 16130 ---------------*/ 16131 16132 /* Scrolling Dimmer */ 16133 16134 .scrolling.dimmable.dimmed { 16135 overflow: hidden; 16136 } 16137 16138 .scrolling.dimmable > .dimmer { 16139 justify-content: flex-start; 16140 position: fixed; 16141 } 16142 16143 .scrolling.dimmable.dimmed > .dimmer { 16144 overflow: auto; 16145 -webkit-overflow-scrolling: touch; 16146 } 16147 16148 .modals.dimmer .ui.scrolling.modal:not(.fullscreen) { 16149 margin: 2rem auto; 16150 } 16151 16152 /* Fix for Firefox, Edge, IE11 */ 16153 16154 .modals.dimmer .ui.scrolling.modal:not([class*="overlay fullscreen"])::after { 16155 content: '\00A0'; 16156 position: absolute; 16157 height: 2rem; 16158 } 16159 16160 /* Undetached Scrolling */ 16161 16162 .scrolling.undetached.dimmable.dimmed { 16163 overflow: auto; 16164 -webkit-overflow-scrolling: touch; 16165 } 16166 16167 .scrolling.undetached.dimmable.dimmed > .dimmer { 16168 overflow: hidden; 16169 } 16170 16171 .scrolling.undetached.dimmable .ui.scrolling.modal:not(.fullscreen) { 16172 position: absolute; 16173 left: 50%; 16174 } 16175 16176 /* Scrolling Content */ 16177 16178 .ui.modal > .scrolling.content { 16179 max-height: calc(80vh - 10rem); 16180 overflow: auto; 16181 } 16182 16183 .ui.overlay.fullscreen.modal > .content { 16184 min-height: calc(100vh - 9.1rem); 16185 } 16186 16187 .ui.overlay.fullscreen.modal > .scrolling.content { 16188 max-height: calc(100vh - 9.1rem); 16189 } 16190 16191 /*-------------- 16192 Full Screen 16193 ---------------*/ 16194 16195 .ui.fullscreen.modal { 16196 width: 95%; 16197 left: 2.5%; 16198 margin: 1em auto; 16199 } 16200 16201 .ui.overlay.fullscreen.modal { 16202 width: 100%; 16203 left: 0; 16204 margin: 0 auto; 16205 top: 0; 16206 border-radius: 0; 16207 } 16208 16209 .ui.modal > .close.inside + .header, 16210 .ui.fullscreen.modal > .header { 16211 padding-right: 2.25rem; 16212 } 16213 16214 .ui.modal > .close.inside, 16215 .ui.fullscreen.modal > .close { 16216 top: 1.0535rem; 16217 right: 1rem; 16218 color: rgba(0, 0, 0, 0.87); 16219 } 16220 16221 .ui.basic.fullscreen.modal > .close { 16222 color: #FFFFFF; 16223 } 16224 16225 /*-------------- 16226 Size 16227 ---------------*/ 16228 16229 .ui.modal { 16230 font-size: 1rem; 16231 } 16232 16233 .ui.mini.modal > .header:not(.ui) { 16234 font-size: 1.3em; 16235 } 16236 16237 @media only screen and (max-width: 767.98px) { 16238 .ui.mini.modal { 16239 width: 95%; 16240 margin: 0 0 0 0; 16241 } 16242 } 16243 16244 @media only screen and (min-width: 768px) { 16245 .ui.mini.modal { 16246 width: 35.2%; 16247 margin: 0 0 0 0; 16248 } 16249 } 16250 16251 @media only screen and (min-width: 992px) { 16252 .ui.mini.modal { 16253 width: 340px; 16254 margin: 0 0 0 0; 16255 } 16256 } 16257 16258 @media only screen and (min-width: 1200px) { 16259 .ui.mini.modal { 16260 width: 360px; 16261 margin: 0 0 0 0; 16262 } 16263 } 16264 16265 @media only screen and (min-width: 1920px) { 16266 .ui.mini.modal { 16267 width: 380px; 16268 margin: 0 0 0 0; 16269 } 16270 } 16271 16272 .ui.tiny.modal > .header:not(.ui) { 16273 font-size: 1.3em; 16274 } 16275 16276 @media only screen and (max-width: 767.98px) { 16277 .ui.tiny.modal { 16278 width: 95%; 16279 margin: 0 0 0 0; 16280 } 16281 } 16282 16283 @media only screen and (min-width: 768px) { 16284 .ui.tiny.modal { 16285 width: 52.8%; 16286 margin: 0 0 0 0; 16287 } 16288 } 16289 16290 @media only screen and (min-width: 992px) { 16291 .ui.tiny.modal { 16292 width: 510px; 16293 margin: 0 0 0 0; 16294 } 16295 } 16296 16297 @media only screen and (min-width: 1200px) { 16298 .ui.tiny.modal { 16299 width: 540px; 16300 margin: 0 0 0 0; 16301 } 16302 } 16303 16304 @media only screen and (min-width: 1920px) { 16305 .ui.tiny.modal { 16306 width: 570px; 16307 margin: 0 0 0 0; 16308 } 16309 } 16310 16311 .ui.small.modal > .header:not(.ui) { 16312 font-size: 1.3em; 16313 } 16314 16315 @media only screen and (max-width: 767.98px) { 16316 .ui.small.modal { 16317 width: 95%; 16318 margin: 0 0 0 0; 16319 } 16320 } 16321 16322 @media only screen and (min-width: 768px) { 16323 .ui.small.modal { 16324 width: 70.4%; 16325 margin: 0 0 0 0; 16326 } 16327 } 16328 16329 @media only screen and (min-width: 992px) { 16330 .ui.small.modal { 16331 width: 680px; 16332 margin: 0 0 0 0; 16333 } 16334 } 16335 16336 @media only screen and (min-width: 1200px) { 16337 .ui.small.modal { 16338 width: 720px; 16339 margin: 0 0 0 0; 16340 } 16341 } 16342 16343 @media only screen and (min-width: 1920px) { 16344 .ui.small.modal { 16345 width: 760px; 16346 margin: 0 0 0 0; 16347 } 16348 } 16349 16350 .ui.large.modal > .header:not(.ui) { 16351 font-size: 1.6em; 16352 } 16353 16354 @media only screen and (max-width: 767.98px) { 16355 .ui.large.modal { 16356 width: 95%; 16357 margin: 0 0 0 0; 16358 } 16359 } 16360 16361 @media only screen and (min-width: 768px) { 16362 .ui.large.modal { 16363 width: 88%; 16364 margin: 0 0 0 0; 16365 } 16366 } 16367 16368 @media only screen and (min-width: 992px) { 16369 .ui.large.modal { 16370 width: 1020px; 16371 margin: 0 0 0 0; 16372 } 16373 } 16374 16375 @media only screen and (min-width: 1200px) { 16376 .ui.large.modal { 16377 width: 1080px; 16378 margin: 0 0 0 0; 16379 } 16380 } 16381 16382 @media only screen and (min-width: 1920px) { 16383 .ui.large.modal { 16384 width: 1140px; 16385 margin: 0 0 0 0; 16386 } 16387 } 16388 16389 .ui.big.modal > .header:not(.ui) { 16390 font-size: 1.6em; 16391 } 16392 16393 @media only screen and (max-width: 767.98px) { 16394 .ui.big.modal { 16395 width: 95%; 16396 margin: 0 0 0 0; 16397 } 16398 } 16399 16400 @media only screen and (min-width: 768px) { 16401 .ui.big.modal { 16402 width: 88%; 16403 margin: 0 0 0 0; 16404 } 16405 } 16406 16407 @media only screen and (min-width: 992px) { 16408 .ui.big.modal { 16409 width: 1190px; 16410 margin: 0 0 0 0; 16411 } 16412 } 16413 16414 @media only screen and (min-width: 1200px) { 16415 .ui.big.modal { 16416 width: 1260px; 16417 margin: 0 0 0 0; 16418 } 16419 } 16420 16421 @media only screen and (min-width: 1920px) { 16422 .ui.big.modal { 16423 width: 1330px; 16424 margin: 0 0 0 0; 16425 } 16426 } 16427 16428 .ui.huge.modal > .header:not(.ui) { 16429 font-size: 1.6em; 16430 } 16431 16432 @media only screen and (max-width: 767.98px) { 16433 .ui.huge.modal { 16434 width: 95%; 16435 margin: 0 0 0 0; 16436 } 16437 } 16438 16439 @media only screen and (min-width: 768px) { 16440 .ui.huge.modal { 16441 width: 88%; 16442 margin: 0 0 0 0; 16443 } 16444 } 16445 16446 @media only screen and (min-width: 992px) { 16447 .ui.huge.modal { 16448 width: 1360px; 16449 margin: 0 0 0 0; 16450 } 16451 } 16452 16453 @media only screen and (min-width: 1200px) { 16454 .ui.huge.modal { 16455 width: 1440px; 16456 margin: 0 0 0 0; 16457 } 16458 } 16459 16460 @media only screen and (min-width: 1920px) { 16461 .ui.huge.modal { 16462 width: 1520px; 16463 margin: 0 0 0 0; 16464 } 16465 } 16466 16467 .ui.massive.modal > .header:not(.ui) { 16468 font-size: 1.8em; 16469 } 16470 16471 @media only screen and (max-width: 767.98px) { 16472 .ui.massive.modal { 16473 width: 95%; 16474 margin: 0 0 0 0; 16475 } 16476 } 16477 16478 @media only screen and (min-width: 768px) { 16479 .ui.massive.modal { 16480 width: 88%; 16481 margin: 0 0 0 0; 16482 } 16483 } 16484 16485 @media only screen and (min-width: 992px) { 16486 .ui.massive.modal { 16487 width: 1530px; 16488 margin: 0 0 0 0; 16489 } 16490 } 16491 16492 @media only screen and (min-width: 1200px) { 16493 .ui.massive.modal { 16494 width: 1620px; 16495 margin: 0 0 0 0; 16496 } 16497 } 16498 16499 @media only screen and (min-width: 1920px) { 16500 .ui.massive.modal { 16501 width: 1710px; 16502 margin: 0 0 0 0; 16503 } 16504 } 16505 16506 /******************************* 16507 Theme Overrides 16508 *******************************/ 16509 16510 /******************************* 16511 Site Overrides 16512 *******************************/ 16513 /*! 16514 * # Fomantic-UI - Search 16515 * http://github.com/fomantic/Fomantic-UI/ 16516 * 16517 * 16518 * Released under the MIT license 16519 * http://opensource.org/licenses/MIT 16520 * 16521 */ 16522 16523 /******************************* 16524 Search 16525 *******************************/ 16526 16527 .ui.search { 16528 position: relative; 16529 } 16530 16531 .ui.search > .prompt { 16532 margin: 0; 16533 outline: none; 16534 -webkit-appearance: none; 16535 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 16536 text-shadow: none; 16537 font-style: normal; 16538 font-weight: normal; 16539 line-height: 1.21428571em; 16540 padding: 0.67857143em 1em; 16541 font-size: 1em; 16542 background: #FFFFFF; 16543 border: 1px solid rgba(34, 36, 38, 0.15); 16544 color: rgba(0, 0, 0, 0.87); 16545 box-shadow: 0 0 0 0 transparent inset; 16546 transition: background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, border-color 0.1s ease; 16547 } 16548 16549 .ui.search .prompt { 16550 border-radius: 500rem; 16551 } 16552 16553 /*-------------- 16554 Icon 16555 ---------------*/ 16556 16557 .ui.search .prompt ~ .search.icon { 16558 cursor: pointer; 16559 } 16560 16561 /*-------------- 16562 Results 16563 ---------------*/ 16564 16565 .ui.search > .results { 16566 display: none; 16567 position: absolute; 16568 top: 100%; 16569 left: 0; 16570 transform-origin: center top; 16571 white-space: normal; 16572 text-align: left; 16573 text-transform: none; 16574 background: #FFFFFF; 16575 margin-top: 0.5em; 16576 width: 18em; 16577 border-radius: 0.28571429rem; 16578 box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); 16579 border: 1px solid #D4D4D5; 16580 z-index: 998; 16581 } 16582 16583 .ui.search > .results > :first-child { 16584 border-radius: 0.28571429rem 0.28571429rem 0 0; 16585 } 16586 16587 .ui.search > .results > :last-child { 16588 border-radius: 0 0 0.28571429rem 0.28571429rem; 16589 } 16590 16591 /*-------------- 16592 Result 16593 ---------------*/ 16594 16595 .ui.search > .results .result { 16596 cursor: pointer; 16597 display: block; 16598 overflow: hidden; 16599 font-size: 1em; 16600 padding: 0.85714286em 1.14285714em; 16601 color: rgba(0, 0, 0, 0.87); 16602 line-height: 1.33; 16603 border-bottom: 1px solid rgba(34, 36, 38, 0.1); 16604 } 16605 16606 .ui.search > .results .result:last-child { 16607 border-bottom: none !important; 16608 } 16609 16610 /* Image */ 16611 16612 .ui.search > .results .result .image { 16613 float: right; 16614 overflow: hidden; 16615 background: none; 16616 width: 5em; 16617 height: 3em; 16618 border-radius: 0.25em; 16619 } 16620 16621 .ui.search > .results .result .image img { 16622 display: block; 16623 width: auto; 16624 height: 100%; 16625 } 16626 16627 /*-------------- 16628 Info 16629 ---------------*/ 16630 16631 .ui.search > .results .result .image + .content { 16632 margin: 0 6em 0 0; 16633 } 16634 16635 .ui.search > .results .result .title { 16636 margin: -0.14285714em 0 0; 16637 font-family: var(--fonts-regular); 16638 font-weight: 500; 16639 font-size: 1em; 16640 color: rgba(0, 0, 0, 0.85); 16641 } 16642 16643 .ui.search > .results .result .description { 16644 margin-top: 0; 16645 font-size: 0.92857143em; 16646 color: rgba(0, 0, 0, 0.4); 16647 } 16648 16649 .ui.search > .results .result .price { 16650 float: right; 16651 color: #21BA45; 16652 } 16653 16654 /*-------------- 16655 Message 16656 ---------------*/ 16657 16658 .ui.search > .results > .message { 16659 padding: 1em 1em; 16660 } 16661 16662 .ui.search > .results > .message .header { 16663 font-family: var(--fonts-regular); 16664 font-size: 1rem; 16665 font-weight: 500; 16666 color: rgba(0, 0, 0, 0.87); 16667 } 16668 16669 .ui.search > .results > .message .description { 16670 margin-top: 0.25rem; 16671 font-size: 1em; 16672 color: rgba(0, 0, 0, 0.87); 16673 } 16674 16675 /* View All Results */ 16676 16677 .ui.search > .results > .action { 16678 display: block; 16679 border-top: none; 16680 background: #F3F4F5; 16681 padding: 0.92857143em 1em; 16682 color: rgba(0, 0, 0, 0.87); 16683 font-weight: 500; 16684 text-align: center; 16685 } 16686 16687 /******************************* 16688 States 16689 *******************************/ 16690 16691 /*-------------------- 16692 Focus 16693 ---------------------*/ 16694 16695 .ui.search > .prompt:focus { 16696 border-color: rgba(34, 36, 38, 0.35); 16697 background: #FFFFFF; 16698 color: rgba(0, 0, 0, 0.95); 16699 } 16700 16701 /*-------------------- 16702 Loading 16703 ---------------------*/ 16704 16705 .ui.loading.search .input > i.icon:before { 16706 position: absolute; 16707 content: ''; 16708 top: 50%; 16709 left: 50%; 16710 margin: -0.64285714em 0 0 -0.64285714em; 16711 width: 1.28571429em; 16712 height: 1.28571429em; 16713 border-radius: 500rem; 16714 border: 0.2em solid rgba(0, 0, 0, 0.1); 16715 } 16716 16717 .ui.loading.search .input > i.icon:after { 16718 position: absolute; 16719 content: ''; 16720 top: 50%; 16721 left: 50%; 16722 margin: -0.64285714em 0 0 -0.64285714em; 16723 width: 1.28571429em; 16724 height: 1.28571429em; 16725 -webkit-animation: loader 0.6s infinite linear; 16726 animation: loader 0.6s infinite linear; 16727 border: 0.2em solid #767676; 16728 border-radius: 500rem; 16729 box-shadow: 0 0 0 1px transparent; 16730 } 16731 16732 /*-------------- 16733 Hover 16734 ---------------*/ 16735 16736 .ui.search > .results .result:hover, 16737 .ui.category.search > .results .category .result:hover { 16738 background: #F9FAFB; 16739 } 16740 16741 .ui.search .action:hover:not(div) { 16742 background: #E0E0E0; 16743 } 16744 16745 /*-------------- 16746 Active 16747 ---------------*/ 16748 16749 .ui.category.search > .results .category.active { 16750 background: #F3F4F5; 16751 } 16752 16753 .ui.category.search > .results .category.active > .name { 16754 color: rgba(0, 0, 0, 0.87); 16755 } 16756 16757 .ui.search > .results .result.active, 16758 .ui.category.search > .results .category .result.active { 16759 position: relative; 16760 border-left-color: rgba(34, 36, 38, 0.1); 16761 background: #F3F4F5; 16762 box-shadow: none; 16763 } 16764 16765 .ui.search > .results .result.active .title { 16766 color: rgba(0, 0, 0, 0.85); 16767 } 16768 16769 .ui.search > .results .result.active .description { 16770 color: rgba(0, 0, 0, 0.85); 16771 } 16772 16773 /*-------------------- 16774 Disabled 16775 ----------------------*/ 16776 16777 /* Disabled */ 16778 16779 .ui.disabled.search { 16780 cursor: default; 16781 pointer-events: none; 16782 opacity: var(--opacity-disabled); 16783 } 16784 16785 /******************************* 16786 Types 16787 *******************************/ 16788 16789 /*-------------- 16790 Selection 16791 ---------------*/ 16792 16793 .ui.search.selection .prompt { 16794 border-radius: 0.28571429rem; 16795 } 16796 16797 /* Remove input */ 16798 16799 .ui.search.selection > .icon.input > .remove.icon { 16800 pointer-events: none; 16801 position: absolute; 16802 left: auto; 16803 opacity: 0; 16804 color: ''; 16805 top: 0; 16806 right: 0; 16807 transition: color 0.1s ease, opacity 0.1s ease; 16808 } 16809 16810 .ui.search.selection > .icon.input > .active.remove.icon { 16811 cursor: pointer; 16812 opacity: 0.8; 16813 pointer-events: auto; 16814 } 16815 16816 .ui.search.selection > .icon.input:not([class*="left icon"]) > .icon ~ .remove.icon { 16817 right: 1.85714em; 16818 } 16819 16820 .ui.search.selection > .icon.input > .remove.icon:hover { 16821 opacity: 1; 16822 color: #DB2828; 16823 } 16824 16825 /*-------------- 16826 Category 16827 ---------------*/ 16828 16829 .ui.category.search .results { 16830 width: 28em; 16831 } 16832 16833 .ui.category.search .results.animating, 16834 .ui.category.search .results.visible { 16835 display: table; 16836 } 16837 16838 /* Category */ 16839 16840 .ui.category.search > .results .category { 16841 display: table-row; 16842 background: #F3F4F5; 16843 box-shadow: none; 16844 transition: background 0.1s ease, border-color 0.1s ease; 16845 } 16846 16847 /* Last Category */ 16848 16849 .ui.category.search > .results .category:last-child { 16850 border-bottom: none; 16851 } 16852 16853 /* First / Last */ 16854 16855 .ui.category.search > .results .category:first-child .name + .result { 16856 border-radius: 0 0.28571429rem 0 0; 16857 } 16858 16859 .ui.category.search > .results .category:last-child .result:last-child { 16860 border-radius: 0 0 0.28571429rem 0; 16861 } 16862 16863 /* Category Result Name */ 16864 16865 .ui.category.search > .results .category > .name { 16866 display: table-cell; 16867 text-overflow: ellipsis; 16868 width: 100px; 16869 white-space: nowrap; 16870 background: transparent; 16871 font-family: var(--fonts-regular); 16872 font-size: 1em; 16873 padding: 0.4em 1em; 16874 font-weight: 500; 16875 color: rgba(0, 0, 0, 0.4); 16876 border-bottom: 1px solid rgba(34, 36, 38, 0.1); 16877 } 16878 16879 /* Category Result */ 16880 16881 .ui.category.search > .results .category .results { 16882 display: table-cell; 16883 background: #FFFFFF; 16884 border-left: 1px solid rgba(34, 36, 38, 0.15); 16885 border-bottom: 1px solid rgba(34, 36, 38, 0.1); 16886 } 16887 16888 .ui.category.search > .results .category .result { 16889 border-bottom: 1px solid rgba(34, 36, 38, 0.1); 16890 transition: background 0.1s ease, border-color 0.1s ease; 16891 padding: 0.85714286em 1.14285714em; 16892 } 16893 16894 /******************************* 16895 Variations 16896 *******************************/ 16897 16898 /*------------------- 16899 Scrolling 16900 --------------------*/ 16901 16902 .ui.scrolling.search > .results, 16903 .ui.search.long > .results, 16904 .ui.search.short > .results { 16905 overflow-x: hidden; 16906 overflow-y: auto; 16907 -webkit-backface-visibility: hidden; 16908 backface-visibility: hidden; 16909 -webkit-overflow-scrolling: touch; 16910 } 16911 16912 @media only screen and (max-width: 767.98px) { 16913 .ui.scrolling.search > .results { 16914 max-height: 12.17714286em; 16915 } 16916 } 16917 16918 @media only screen and (min-width: 768px) { 16919 .ui.scrolling.search > .results { 16920 max-height: 18.26571429em; 16921 } 16922 } 16923 16924 @media only screen and (min-width: 992px) { 16925 .ui.scrolling.search > .results { 16926 max-height: 24.35428571em; 16927 } 16928 } 16929 16930 @media only screen and (min-width: 1920px) { 16931 .ui.scrolling.search > .results { 16932 max-height: 36.53142857em; 16933 } 16934 } 16935 16936 @media only screen and (max-width: 767.98px) { 16937 .ui.search.short > .results { 16938 max-height: 12.17714286em; 16939 } 16940 16941 .ui.search[class*="very short"] > .results { 16942 max-height: 9.13285714em; 16943 } 16944 16945 .ui.search.long > .results { 16946 max-height: 24.35428571em; 16947 } 16948 16949 .ui.search[class*="very long"] > .results { 16950 max-height: 36.53142857em; 16951 } 16952 } 16953 16954 @media only screen and (min-width: 768px) { 16955 .ui.search.short > .results { 16956 max-height: 18.26571429em; 16957 } 16958 16959 .ui.search[class*="very short"] > .results { 16960 max-height: 13.69928571em; 16961 } 16962 16963 .ui.search.long > .results { 16964 max-height: 36.53142857em; 16965 } 16966 16967 .ui.search[class*="very long"] > .results { 16968 max-height: 54.79714286em; 16969 } 16970 } 16971 16972 @media only screen and (min-width: 992px) { 16973 .ui.search.short > .results { 16974 max-height: 24.35428571em; 16975 } 16976 16977 .ui.search[class*="very short"] > .results { 16978 max-height: 18.26571429em; 16979 } 16980 16981 .ui.search.long > .results { 16982 max-height: 48.70857143em; 16983 } 16984 16985 .ui.search[class*="very long"] > .results { 16986 max-height: 73.06285714em; 16987 } 16988 } 16989 16990 @media only screen and (min-width: 1920px) { 16991 .ui.search.short > .results { 16992 max-height: 36.53142857em; 16993 } 16994 16995 .ui.search[class*="very short"] > .results { 16996 max-height: 27.39857143em; 16997 } 16998 16999 .ui.search.long > .results { 17000 max-height: 73.06285714em; 17001 } 17002 17003 .ui.search[class*="very long"] > .results { 17004 max-height: 109.59428571em; 17005 } 17006 } 17007 17008 /*------------------- 17009 Left / Right 17010 --------------------*/ 17011 17012 .ui[class*="left aligned"].search > .results { 17013 right: auto; 17014 left: 0; 17015 } 17016 17017 .ui[class*="right aligned"].search > .results { 17018 right: 0; 17019 left: auto; 17020 } 17021 17022 /*-------------- 17023 Fluid 17024 ---------------*/ 17025 17026 .ui.fluid.search .results { 17027 width: 100%; 17028 } 17029 17030 /*-------------- 17031 Sizes 17032 ---------------*/ 17033 17034 .ui.search { 17035 font-size: 1em; 17036 } 17037 17038 .ui.mini.search { 17039 font-size: 0.78571429em; 17040 } 17041 17042 .ui.tiny.search { 17043 font-size: 0.85714286em; 17044 } 17045 17046 .ui.small.search { 17047 font-size: 0.92857143em; 17048 } 17049 17050 .ui.large.search { 17051 font-size: 1.14285714em; 17052 } 17053 17054 .ui.big.search { 17055 font-size: 1.28571429em; 17056 } 17057 17058 .ui.huge.search { 17059 font-size: 1.42857143em; 17060 } 17061 17062 .ui.massive.search { 17063 font-size: 1.71428571em; 17064 } 17065 17066 /*-------------- 17067 Mobile 17068 ---------------*/ 17069 17070 @media only screen and (max-width: 767.98px) { 17071 .ui.search .results { 17072 max-width: calc(100vw - 2rem); 17073 } 17074 } 17075 17076 /******************************* 17077 Theme Overrides 17078 *******************************/ 17079 17080 /******************************* 17081 Site Overrides 17082 *******************************/ 17083 /*! 17084 * # Fomantic-UI - Segment 17085 * http://github.com/fomantic/Fomantic-UI/ 17086 * 17087 * 17088 * Released under the MIT license 17089 * http://opensource.org/licenses/MIT 17090 * 17091 */ 17092 17093 /******************************* 17094 Segment 17095 *******************************/ 17096 17097 .ui.segment { 17098 position: relative; 17099 background: #FFFFFF; 17100 box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); 17101 margin: 1rem 0; 17102 padding: 1em 1em; 17103 border-radius: 0.28571429rem; 17104 border: 1px solid rgba(34, 36, 38, 0.15); 17105 } 17106 17107 .ui.segment:first-child { 17108 margin-top: 0; 17109 } 17110 17111 .ui.segment:last-child { 17112 margin-bottom: 0; 17113 } 17114 17115 /* Vertical */ 17116 17117 .ui.vertical.segment { 17118 margin: 0; 17119 padding-left: 0; 17120 padding-right: 0; 17121 background: none transparent; 17122 border-radius: 0; 17123 box-shadow: none; 17124 border: none; 17125 border-bottom: 1px solid rgba(34, 36, 38, 0.15); 17126 } 17127 17128 .ui.vertical.segment:last-child { 17129 border-bottom: none; 17130 } 17131 17132 /*------------------- 17133 Loose Coupling 17134 --------------------*/ 17135 17136 /* Label */ 17137 17138 .ui[class*="bottom attached"].segment > [class*="top attached"].label { 17139 border-top-left-radius: 0; 17140 border-top-right-radius: 0; 17141 } 17142 17143 .ui[class*="top attached"].segment > [class*="bottom attached"].label { 17144 border-bottom-left-radius: 0; 17145 border-bottom-right-radius: 0; 17146 } 17147 17148 .ui.attached.segment:not(.top):not(.bottom) > [class*="top attached"].label { 17149 border-top-left-radius: 0; 17150 border-top-right-radius: 0; 17151 } 17152 17153 .ui.attached.segment:not(.top):not(.bottom) > [class*="bottom attached"].label { 17154 border-bottom-left-radius: 0; 17155 border-bottom-right-radius: 0; 17156 } 17157 17158 /* Grid */ 17159 17160 .ui.page.grid.segment, 17161 .ui.grid > .row > .ui.segment.column, 17162 .ui.grid > .ui.segment.column { 17163 padding-top: 2em; 17164 padding-bottom: 2em; 17165 } 17166 17167 .ui.grid.segment { 17168 margin: 1rem 0; 17169 border-radius: 0.28571429rem; 17170 } 17171 17172 /* Table */ 17173 17174 .ui.basic.table.segment { 17175 background: #FFFFFF; 17176 border: 1px solid rgba(34, 36, 38, 0.15); 17177 box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); 17178 } 17179 17180 .ui[class*="very basic"].table.segment { 17181 padding: 1em 1em; 17182 } 17183 17184 /* Tab */ 17185 17186 .ui.segment.tab:last-child { 17187 margin-bottom: 1rem; 17188 } 17189 17190 /******************************* 17191 Types 17192 *******************************/ 17193 17194 /*------------------- 17195 Placeholder 17196 --------------------*/ 17197 17198 .ui.placeholder.segment { 17199 display: flex; 17200 flex-direction: column; 17201 justify-content: center; 17202 align-items: stretch; 17203 max-width: initial; 17204 -webkit-animation: none; 17205 animation: none; 17206 overflow: visible; 17207 padding: 1em 1em; 17208 min-height: 18rem; 17209 background: #F9FAFB; 17210 border-color: rgba(34, 36, 38, 0.15); 17211 box-shadow: 0 2px 25px 0 rgba(34, 36, 38, 0.05) inset; 17212 } 17213 17214 .ui.placeholder.segment .button, 17215 .ui.placeholder.segment textarea { 17216 display: block; 17217 } 17218 17219 .ui.placeholder.segment .field, 17220 .ui.placeholder.segment textarea, 17221 .ui.placeholder.segment > .ui.input, 17222 .ui.placeholder.segment .button { 17223 max-width: 15rem; 17224 margin-left: auto; 17225 margin-right: auto; 17226 } 17227 17228 .ui.placeholder.segment .column .button, 17229 .ui.placeholder.segment .column .field, 17230 .ui.placeholder.segment .column textarea, 17231 .ui.placeholder.segment .column > .ui.input { 17232 max-width: 15rem; 17233 margin-left: auto; 17234 margin-right: auto; 17235 } 17236 17237 .ui.placeholder.segment > .inline { 17238 align-self: center; 17239 } 17240 17241 .ui.placeholder.segment > .inline > .button { 17242 display: inline-block; 17243 width: auto; 17244 margin: 0 0.35714286rem 0 0; 17245 } 17246 17247 .ui.placeholder.segment > .inline > .button:last-child { 17248 margin-right: 0; 17249 } 17250 17251 /*------------------- 17252 Padded 17253 --------------------*/ 17254 17255 .ui.padded.segment { 17256 padding: 1.5em; 17257 } 17258 17259 .ui[class*="very padded"].segment { 17260 padding: 3em; 17261 } 17262 17263 /* Padded vertical */ 17264 17265 .ui.padded.segment.vertical.segment, 17266 .ui[class*="very padded"].vertical.segment { 17267 padding-left: 0; 17268 padding-right: 0; 17269 } 17270 17271 /*------------------- 17272 Compact 17273 --------------------*/ 17274 17275 .ui.compact.segment { 17276 display: table; 17277 } 17278 17279 /* Compact Group */ 17280 17281 .ui.compact.segments { 17282 display: inline-flex; 17283 } 17284 17285 .ui.compact.segments .segment, 17286 .ui.segments .compact.segment { 17287 display: block; 17288 flex: 0 1 auto; 17289 } 17290 17291 /*------------------- 17292 Circular 17293 --------------------*/ 17294 17295 .ui.circular.segment { 17296 display: table-cell; 17297 padding: 2em; 17298 text-align: center; 17299 vertical-align: middle; 17300 border-radius: 500em; 17301 } 17302 17303 /*------------------- 17304 Raised 17305 --------------------*/ 17306 17307 .ui.raised.raised.segments, 17308 .ui.raised.raised.segment { 17309 box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15); 17310 } 17311 17312 /******************************* 17313 Groups 17314 *******************************/ 17315 17316 /* Group */ 17317 17318 .ui.segments { 17319 flex-direction: column; 17320 position: relative; 17321 margin: 1rem 0; 17322 border: 1px solid rgba(34, 36, 38, 0.15); 17323 box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); 17324 border-radius: 0.28571429rem; 17325 } 17326 17327 .ui.segments:first-child { 17328 margin-top: 0; 17329 } 17330 17331 .ui.segments:last-child { 17332 margin-bottom: 0; 17333 } 17334 17335 /* Nested Segment */ 17336 17337 .ui.segments > .segment { 17338 top: 0; 17339 bottom: 0; 17340 border-radius: 0; 17341 margin: 0; 17342 width: auto; 17343 box-shadow: none; 17344 border: none; 17345 border-top: 1px solid rgba(34, 36, 38, 0.15); 17346 } 17347 17348 .ui.segments:not(.horizontal) > .segment:first-child { 17349 top: 0; 17350 bottom: 0; 17351 border-top: none; 17352 margin-top: 0; 17353 margin-bottom: 0; 17354 border-radius: 0.28571429rem 0.28571429rem 0 0; 17355 } 17356 17357 /* Bottom */ 17358 17359 .ui.segments:not(.horizontal) > .segment:last-child { 17360 top: 0; 17361 bottom: 0; 17362 margin-top: 0; 17363 margin-bottom: 0; 17364 box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none; 17365 border-radius: 0 0 0.28571429rem 0.28571429rem; 17366 } 17367 17368 /* Only */ 17369 17370 .ui.segments:not(.horizontal) > .segment:only-child { 17371 border-radius: 0.28571429rem; 17372 } 17373 17374 /* Nested Group */ 17375 17376 .ui.segments > .ui.segments { 17377 border-top: 1px solid rgba(34, 36, 38, 0.15); 17378 margin: 1rem 1rem; 17379 } 17380 17381 .ui.segments > .segments:first-child { 17382 border-top: none; 17383 } 17384 17385 .ui.segments > .segment + .segments:not(.horizontal) { 17386 margin-top: 0; 17387 } 17388 17389 /* Horizontal Group */ 17390 17391 .ui.horizontal.segments { 17392 display: flex; 17393 flex-direction: row; 17394 background-color: transparent; 17395 padding: 0; 17396 box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15); 17397 margin: 1rem 0; 17398 border-radius: 0.28571429rem; 17399 border: 1px solid rgba(34, 36, 38, 0.15); 17400 } 17401 17402 .ui.stackable.horizontal.segments { 17403 flex-wrap: wrap; 17404 } 17405 17406 /* Nested Horizontal Group */ 17407 17408 .ui.segments > .horizontal.segments { 17409 margin: 0; 17410 background-color: transparent; 17411 border-radius: 0; 17412 border: none; 17413 box-shadow: none; 17414 border-top: 1px solid rgba(34, 36, 38, 0.15); 17415 } 17416 17417 /* Horizontal Segment */ 17418 17419 .ui.horizontal.segments:not(.compact) > .segment:not(.compact) { 17420 flex: 1 1 auto; 17421 -ms-flex: 1 1 0; 17422 /* Solves #2550 MS Flex */ 17423 } 17424 17425 .ui.horizontal.segments > .segment { 17426 margin: 0; 17427 min-width: 0; 17428 border-radius: 0; 17429 border: none; 17430 box-shadow: none; 17431 border-left: 1px solid rgba(34, 36, 38, 0.15); 17432 } 17433 17434 /* Border Fixes */ 17435 17436 .ui.segments > .horizontal.segments:first-child { 17437 border-top: none; 17438 } 17439 17440 .ui.horizontal.segments:not(.stackable) > .segment:first-child { 17441 border-left: none; 17442 } 17443 17444 .ui.horizontal.segments > .segment:first-child { 17445 border-radius: 0.28571429rem 0 0 0.28571429rem; 17446 } 17447 17448 .ui.horizontal.segments > .segment:last-child { 17449 border-radius: 0 0.28571429rem 0.28571429rem 0; 17450 } 17451 17452 /******************************* 17453 States 17454 *******************************/ 17455 17456 /*-------------- 17457 Disabled 17458 ---------------*/ 17459 17460 .ui.disabled.segment { 17461 opacity: var(--opacity-disabled); 17462 color: rgba(40, 40, 40, 0.3); 17463 } 17464 17465 /*-------------- 17466 Loading 17467 ---------------*/ 17468 17469 .ui.loading.segment { 17470 position: relative; 17471 cursor: default; 17472 pointer-events: none; 17473 text-shadow: none !important; 17474 transition: all 0s linear; 17475 } 17476 17477 .ui.loading.segment:before { 17478 position: absolute; 17479 content: ''; 17480 top: 0; 17481 left: 0; 17482 background: rgba(255, 255, 255, 0.8); 17483 width: 100%; 17484 height: 100%; 17485 border-radius: 0.28571429rem; 17486 z-index: 100; 17487 } 17488 17489 .ui.loading.segment:after { 17490 position: absolute; 17491 content: ''; 17492 top: 50%; 17493 left: 50%; 17494 margin: -1.5em 0 0 -1.5em; 17495 width: 3em; 17496 height: 3em; 17497 -webkit-animation: loader 0.6s infinite linear; 17498 animation: loader 0.6s infinite linear; 17499 border: 0.2em solid #767676; 17500 border-radius: 500rem; 17501 box-shadow: 0 0 0 1px transparent; 17502 visibility: visible; 17503 z-index: 101; 17504 } 17505 17506 /******************************* 17507 Variations 17508 *******************************/ 17509 17510 /*------------------- 17511 Basic 17512 --------------------*/ 17513 17514 .ui.basic.segment, 17515 .ui.segments .ui.basic.segment, 17516 .ui.basic.segments { 17517 background: none transparent; 17518 box-shadow: none; 17519 border: none; 17520 border-radius: 0; 17521 } 17522 17523 /*------------------- 17524 Clearing 17525 --------------------*/ 17526 17527 .ui.clearing.segment:after { 17528 content: ""; 17529 display: block; 17530 clear: both; 17531 } 17532 17533 /*------------------- 17534 Colors 17535 --------------------*/ 17536 17537 .ui.red.segment.segment.segment.segment.segment:not(.inverted) { 17538 border-top: 2px solid #DB2828; 17539 } 17540 17541 .ui.orange.segment.segment.segment.segment.segment:not(.inverted) { 17542 border-top: 2px solid #F2711C; 17543 } 17544 17545 .ui.yellow.segment.segment.segment.segment.segment:not(.inverted) { 17546 border-top: 2px solid #FBBD08; 17547 } 17548 17549 .ui.olive.segment.segment.segment.segment.segment:not(.inverted) { 17550 border-top: 2px solid #B5CC18; 17551 } 17552 17553 .ui.green.segment.segment.segment.segment.segment:not(.inverted) { 17554 border-top: 2px solid #21BA45; 17555 } 17556 17557 .ui.teal.segment.segment.segment.segment.segment:not(.inverted) { 17558 border-top: 2px solid #00B5AD; 17559 } 17560 17561 .ui.blue.segment.segment.segment.segment.segment:not(.inverted) { 17562 border-top: 2px solid #2185D0; 17563 } 17564 17565 .ui.violet.segment.segment.segment.segment.segment:not(.inverted) { 17566 border-top: 2px solid #6435C9; 17567 } 17568 17569 .ui.purple.segment.segment.segment.segment.segment:not(.inverted) { 17570 border-top: 2px solid #A333C8; 17571 } 17572 17573 .ui.pink.segment.segment.segment.segment.segment:not(.inverted) { 17574 border-top: 2px solid #E03997; 17575 } 17576 17577 .ui.brown.segment.segment.segment.segment.segment:not(.inverted) { 17578 border-top: 2px solid #A5673F; 17579 } 17580 17581 .ui.grey.segment.segment.segment.segment.segment:not(.inverted) { 17582 border-top: 2px solid #767676; 17583 } 17584 17585 .ui.black.segment.segment.segment.segment.segment:not(.inverted) { 17586 border-top: 2px solid #1B1C1D; 17587 } 17588 17589 /*------------------- 17590 Aligned 17591 --------------------*/ 17592 17593 .ui[class*="left aligned"].segment { 17594 text-align: left; 17595 } 17596 17597 .ui[class*="right aligned"].segment { 17598 text-align: right; 17599 } 17600 17601 .ui[class*="center aligned"].segment { 17602 text-align: center; 17603 } 17604 17605 /*------------------- 17606 Floated 17607 --------------------*/ 17608 17609 .ui.floated.segment, 17610 .ui[class*="left floated"].segment { 17611 float: left; 17612 margin-right: 1em; 17613 } 17614 17615 .ui[class*="right floated"].segment { 17616 float: right; 17617 margin-left: 1em; 17618 } 17619 17620 /*------------------- 17621 Emphasis 17622 --------------------*/ 17623 17624 /* Secondary */ 17625 17626 .ui.secondary.segment { 17627 background: #F3F4F5; 17628 color: rgba(0, 0, 0, 0.6); 17629 } 17630 17631 /* Tertiary */ 17632 17633 .ui.tertiary.segment { 17634 background: #DCDDDE; 17635 color: rgba(0, 0, 0, 0.6); 17636 } 17637 17638 /*------------------- 17639 Attached 17640 --------------------*/ 17641 17642 /* Middle */ 17643 17644 .ui.attached.segment { 17645 top: 0; 17646 bottom: 0; 17647 border-radius: 0; 17648 margin: 0 -1px; 17649 width: calc(100% + 2px); 17650 max-width: calc(100% + 2px); 17651 box-shadow: none; 17652 border: 1px solid #D4D4D5; 17653 } 17654 17655 .ui.attached:not(.message) + .ui.attached.segment:not(.top) { 17656 border-top: none; 17657 } 17658 17659 /* Top */ 17660 17661 .ui[class*="top attached"].segment { 17662 bottom: 0; 17663 margin-bottom: 0; 17664 top: 0; 17665 margin-top: 1rem; 17666 border-radius: 0.28571429rem 0.28571429rem 0 0; 17667 } 17668 17669 .ui.segment[class*="top attached"]:first-child { 17670 margin-top: 0; 17671 } 17672 17673 /* Bottom */ 17674 17675 .ui.segment[class*="bottom attached"] { 17676 bottom: 0; 17677 margin-top: 0; 17678 top: 0; 17679 margin-bottom: 1rem; 17680 box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none; 17681 border-radius: 0 0 0.28571429rem 0.28571429rem; 17682 } 17683 17684 .ui.segment[class*="bottom attached"]:last-child { 17685 margin-bottom: 1rem; 17686 } 17687 17688 /*-------------- 17689 Fitted 17690 ---------------*/ 17691 17692 .ui.fitted.segment:not(.horizontally) { 17693 padding-top: 0; 17694 padding-bottom: 0; 17695 } 17696 17697 .ui.fitted.segment:not(.vertically) { 17698 padding-left: 0; 17699 padding-right: 0; 17700 } 17701 17702 /*------------------- 17703 Size 17704 --------------------*/ 17705 17706 .ui.segments .segment, 17707 .ui.segment { 17708 font-size: 1rem; 17709 } 17710 17711 .ui.mini.segments .segment, 17712 .ui.mini.segment { 17713 font-size: 0.78571429rem; 17714 } 17715 17716 .ui.tiny.segments .segment, 17717 .ui.tiny.segment { 17718 font-size: 0.85714286rem; 17719 } 17720 17721 .ui.small.segments .segment, 17722 .ui.small.segment { 17723 font-size: 0.92857143rem; 17724 } 17725 17726 .ui.large.segments .segment, 17727 .ui.large.segment { 17728 font-size: 1.14285714rem; 17729 } 17730 17731 .ui.big.segments .segment, 17732 .ui.big.segment { 17733 font-size: 1.28571429rem; 17734 } 17735 17736 .ui.huge.segments .segment, 17737 .ui.huge.segment { 17738 font-size: 1.42857143rem; 17739 } 17740 17741 .ui.massive.segments .segment, 17742 .ui.massive.segment { 17743 font-size: 1.71428571rem; 17744 } 17745 17746 /******************************* 17747 Theme Overrides 17748 *******************************/ 17749 17750 /******************************* 17751 Site Overrides 17752 *******************************/ 17753 /*! 17754 * # Fomantic-UI - Site 17755 * http://github.com/fomantic/Fomantic-UI/ 17756 * 17757 * 17758 * Released under the MIT license 17759 * http://opensource.org/licenses/MIT 17760 * 17761 */ 17762 17763 /******************************* 17764 Page 17765 *******************************/ 17766 17767 html, 17768 body { 17769 height: 100%; 17770 } 17771 17772 html { 17773 font-size: 14px; 17774 } 17775 17776 body { 17777 margin: 0; 17778 padding: 0; 17779 overflow-x: visible; 17780 min-width: 320px; 17781 background: #FFFFFF; 17782 font-family: var(--fonts-regular); 17783 font-size: 14px; 17784 line-height: 1.4285em; 17785 color: rgba(0, 0, 0, 0.87); 17786 } 17787 17788 /******************************* 17789 Headers 17790 *******************************/ 17791 17792 h1, 17793 h2, 17794 h3, 17795 h4, 17796 h5 { 17797 font-family: var(--fonts-regular); 17798 line-height: 1.28571429em; 17799 margin: calc(2rem - 0.1428571428571429em) 0 1rem; 17800 font-weight: 500; 17801 padding: 0; 17802 } 17803 17804 h1 { 17805 min-height: 1rem; 17806 font-size: 2rem; 17807 } 17808 17809 h2 { 17810 font-size: 1.71428571rem; 17811 } 17812 17813 h3 { 17814 font-size: 1.28571429rem; 17815 } 17816 17817 h4 { 17818 font-size: 1.07142857rem; 17819 } 17820 17821 h5 { 17822 font-size: 1rem; 17823 } 17824 17825 h1:first-child, 17826 h2:first-child, 17827 h3:first-child, 17828 h4:first-child, 17829 h5:first-child { 17830 margin-top: 0; 17831 } 17832 17833 h1:last-child, 17834 h2:last-child, 17835 h3:last-child, 17836 h4:last-child, 17837 h5:last-child { 17838 margin-bottom: 0; 17839 } 17840 17841 /******************************* 17842 Text 17843 *******************************/ 17844 17845 p { 17846 margin: 0 0 1em; 17847 line-height: 1.4285em; 17848 } 17849 17850 p:first-child { 17851 margin-top: 0; 17852 } 17853 17854 p:last-child { 17855 margin-bottom: 0; 17856 } 17857 17858 /*------------------- 17859 Links 17860 --------------------*/ 17861 17862 a { 17863 color: #4183C4; 17864 text-decoration: none; 17865 } 17866 17867 a:hover { 17868 color: #1e70bf; 17869 text-decoration: underline; 17870 } 17871 17872 /******************************* 17873 Scrollbars 17874 *******************************/ 17875 17876 /******************************* 17877 Highlighting 17878 *******************************/ 17879 17880 /* Site */ 17881 17882 ::-webkit-selection { 17883 background-color: #CCE2FF; 17884 color: rgba(0, 0, 0, 0.87); 17885 } 17886 17887 ::-moz-selection { 17888 background-color: #CCE2FF; 17889 color: rgba(0, 0, 0, 0.87); 17890 } 17891 17892 ::selection { 17893 background-color: #CCE2FF; 17894 color: rgba(0, 0, 0, 0.87); 17895 } 17896 17897 /* Form */ 17898 17899 textarea::-webkit-selection, 17900 input::-webkit-selection { 17901 background-color: rgba(100, 100, 100, 0.4); 17902 color: rgba(0, 0, 0, 0.87); 17903 } 17904 17905 textarea::-moz-selection, 17906 input::-moz-selection { 17907 background-color: rgba(100, 100, 100, 0.4); 17908 color: rgba(0, 0, 0, 0.87); 17909 } 17910 17911 textarea::-moz-selection, 17912 input::-moz-selection { 17913 background-color: rgba(100, 100, 100, 0.4); 17914 color: rgba(0, 0, 0, 0.87); 17915 } 17916 17917 textarea::selection, 17918 input::selection { 17919 background-color: rgba(100, 100, 100, 0.4); 17920 color: rgba(0, 0, 0, 0.87); 17921 } 17922 17923 /******************************* 17924 Global Overrides 17925 *******************************/ 17926 17927 /******************************* 17928 Site Overrides 17929 *******************************/ 17930 /*! 17931 * # Fomantic-UI - Tab 17932 * http://github.com/fomantic/Fomantic-UI/ 17933 * 17934 * 17935 * Released under the MIT license 17936 * http://opensource.org/licenses/MIT 17937 * 17938 */ 17939 17940 /******************************* 17941 UI Tabs 17942 *******************************/ 17943 17944 .ui.tab { 17945 display: none; 17946 } 17947 17948 /******************************* 17949 States 17950 *******************************/ 17951 17952 /*-------------------- 17953 Active 17954 ---------------------*/ 17955 17956 .ui.tab.active, 17957 .ui.tab.open { 17958 display: block; 17959 } 17960 17961 /*-------------------- 17962 Loading 17963 ---------------------*/ 17964 17965 .ui.tab.loading { 17966 position: relative; 17967 overflow: hidden; 17968 display: block; 17969 min-height: 250px; 17970 } 17971 17972 .ui.tab.loading * { 17973 position: relative !important; 17974 left: -10000px !important; 17975 } 17976 17977 .ui.tab.loading:before, 17978 .ui.tab.loading.segment:before { 17979 position: absolute; 17980 content: ''; 17981 top: 50%; 17982 left: 50%; 17983 margin: -1.25em 0 0 -1.25em; 17984 width: 2.5em; 17985 height: 2.5em; 17986 border-radius: 500rem; 17987 border: 0.2em solid rgba(0, 0, 0, 0.1); 17988 } 17989 17990 .ui.tab.loading:after, 17991 .ui.tab.loading.segment:after { 17992 position: absolute; 17993 content: ''; 17994 top: 50%; 17995 left: 50%; 17996 margin: -1.25em 0 0 -1.25em; 17997 width: 2.5em; 17998 height: 2.5em; 17999 -webkit-animation: loader 0.6s infinite linear; 18000 animation: loader 0.6s infinite linear; 18001 border: 0.2em solid #767676; 18002 border-radius: 500rem; 18003 box-shadow: 0 0 0 1px transparent; 18004 } 18005 18006 /******************************* 18007 Tab Overrides 18008 *******************************/ 18009 18010 /******************************* 18011 User Overrides 18012 *******************************/ 18013 /*! 18014 * # Fomantic-UI - Table 18015 * http://github.com/fomantic/Fomantic-UI/ 18016 * 18017 * 18018 * Released under the MIT license 18019 * http://opensource.org/licenses/MIT 18020 * 18021 */ 18022 18023 /******************************* 18024 Table 18025 *******************************/ 18026 18027 /* Prototype */ 18028 18029 .ui.table { 18030 width: 100%; 18031 background: #FFFFFF; 18032 margin: 1em 0; 18033 border: 1px solid rgba(34, 36, 38, 0.15); 18034 box-shadow: none; 18035 border-radius: 0.28571429rem; 18036 text-align: left; 18037 vertical-align: middle; 18038 color: rgba(0, 0, 0, 0.87); 18039 border-collapse: separate; 18040 border-spacing: 0; 18041 } 18042 18043 .ui.table:first-child { 18044 margin-top: 0; 18045 } 18046 18047 .ui.table:last-child { 18048 margin-bottom: 0; 18049 } 18050 18051 .ui.table > thead, 18052 .ui.table > tbody { 18053 text-align: inherit; 18054 vertical-align: inherit; 18055 } 18056 18057 /******************************* 18058 Parts 18059 *******************************/ 18060 18061 /* Table Content */ 18062 18063 .ui.table th, 18064 .ui.table td { 18065 transition: background 0.1s ease, color 0.1s ease; 18066 } 18067 18068 /* Rowspan helper class */ 18069 18070 .ui.table th.rowspanned, 18071 .ui.table td.rowspanned { 18072 display: none; 18073 } 18074 18075 /* Headers */ 18076 18077 .ui.table > thead { 18078 box-shadow: none; 18079 } 18080 18081 .ui.table > thead > tr > th { 18082 cursor: auto; 18083 background: #F9FAFB; 18084 text-align: inherit; 18085 color: rgba(0, 0, 0, 0.87); 18086 padding: 0.92857143em 0.78571429em; 18087 vertical-align: inherit; 18088 font-style: none; 18089 font-weight: 500; 18090 text-transform: none; 18091 border-bottom: 1px solid rgba(34, 36, 38, 0.1); 18092 border-left: none; 18093 } 18094 18095 .ui.table > thead > tr > th:first-child { 18096 border-left: none; 18097 } 18098 18099 .ui.table > thead > tr:first-child > th:first-child { 18100 border-radius: 0.28571429rem 0 0 0; 18101 } 18102 18103 .ui.table > thead > tr:first-child > th:last-child { 18104 border-radius: 0 0.28571429rem 0 0; 18105 } 18106 18107 .ui.table > thead > tr:first-child > th:only-child { 18108 border-radius: 0.28571429rem 0.28571429rem 0 0; 18109 } 18110 18111 /* Footer */ 18112 18113 .ui.table > tfoot { 18114 box-shadow: none; 18115 } 18116 18117 .ui.table > tfoot > tr > th, 18118 .ui.table > tfoot > tr > td { 18119 cursor: auto; 18120 border-top: 1px solid rgba(34, 36, 38, 0.15); 18121 background: #F9FAFB; 18122 text-align: inherit; 18123 color: rgba(0, 0, 0, 0.87); 18124 padding: 0.78571429em 0.78571429em; 18125 vertical-align: inherit; 18126 font-style: normal; 18127 font-weight: normal; 18128 text-transform: none; 18129 } 18130 18131 .ui.table > tfoot > tr > th:first-child, 18132 .ui.table > tfoot > tr > td:first-child { 18133 border-left: none; 18134 } 18135 18136 .ui.table > tfoot > tr:first-child > th:first-child, 18137 .ui.table > tfoot > tr:first-child > td:first-child { 18138 border-radius: 0 0 0 0.28571429rem; 18139 } 18140 18141 .ui.table > tfoot > tr:first-child > th:last-child, 18142 .ui.table > tfoot > tr:first-child > td:last-child { 18143 border-radius: 0 0 0.28571429rem 0; 18144 } 18145 18146 .ui.table > tfoot > tr:first-child > th:only-child, 18147 .ui.table > tfoot > tr:first-child > td:only-child { 18148 border-radius: 0 0 0.28571429rem 0.28571429rem; 18149 } 18150 18151 /* Table Row */ 18152 18153 .ui.table > tr > td, 18154 .ui.table > tbody > tr > td { 18155 border-top: 1px solid rgba(34, 36, 38, 0.1); 18156 } 18157 18158 .ui.table > tr:first-child > td, 18159 .ui.table > tbody > tr:first-child > td { 18160 border-top: none; 18161 } 18162 18163 /* Repeated tbody */ 18164 18165 .ui.table > tbody + tbody tr:first-child > td { 18166 border-top: 1px solid rgba(34, 36, 38, 0.1); 18167 } 18168 18169 /* Table Cells */ 18170 18171 .ui.table > tbody > tr > td, 18172 .ui.table > tr > td { 18173 padding: 0.78571429em 0.78571429em; 18174 text-align: inherit; 18175 } 18176 18177 /* Icons */ 18178 18179 .ui.table > i.icon { 18180 vertical-align: baseline; 18181 } 18182 18183 .ui.table > i.icon:only-child { 18184 margin: 0; 18185 } 18186 18187 /* Table Segment */ 18188 18189 .ui.table.segment { 18190 padding: 0; 18191 } 18192 18193 .ui.table.segment:after { 18194 display: none; 18195 } 18196 18197 .ui.table.segment.stacked:after { 18198 display: block; 18199 } 18200 18201 /* Responsive */ 18202 18203 @media only screen and (max-width: 767.98px) { 18204 .ui.table:not(.unstackable) { 18205 width: 100%; 18206 padding: 0; 18207 } 18208 18209 .ui.table:not(.unstackable) > thead, 18210 .ui.table:not(.unstackable) > thead > tr, 18211 .ui.table:not(.unstackable) > tfoot, 18212 .ui.table:not(.unstackable) > tfoot > tr, 18213 .ui.table:not(.unstackable) > tbody, 18214 .ui.table:not(.unstackable) > tr, 18215 .ui.table:not(.unstackable) > tbody > tr, 18216 .ui.table:not(.unstackable) > tr > th:not(.rowspanned), 18217 .ui.table:not(.unstackable) > thead > tr > th:not(.rowspanned), 18218 .ui.table:not(.unstackable) > tbody > tr > th:not(.rowspanned), 18219 .ui.table:not(.unstackable) > tfoot > tr > th:not(.rowspanned), 18220 .ui.table:not(.unstackable) > tr > td:not(.rowspanned), 18221 .ui.table:not(.unstackable) > tbody > tr > td:not(.rowspanned), 18222 .ui.table:not(.unstackable) > tfoot > tr > td:not(.rowspanned) { 18223 display: block !important; 18224 width: auto !important; 18225 } 18226 18227 .ui.table:not(.unstackable) > thead { 18228 display: block; 18229 } 18230 18231 .ui.table:not(.unstackable) > tfoot { 18232 display: block; 18233 } 18234 18235 .ui.ui.ui.ui.table:not(.unstackable) > tr, 18236 .ui.ui.ui.ui.table:not(.unstackable) > thead > tr, 18237 .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr, 18238 .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr { 18239 padding-top: 1em; 18240 padding-bottom: 1em; 18241 box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset; 18242 } 18243 18244 .ui.ui.ui.ui.table:not(.unstackable) > tr > th, 18245 .ui.ui.ui.ui.table:not(.unstackable) > thead > tr > th, 18246 .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > th, 18247 .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > th, 18248 .ui.ui.ui.ui.table:not(.unstackable) > tr > td, 18249 .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr > td, 18250 .ui.ui.ui.ui.table:not(.unstackable) > tfoot > tr > td { 18251 background: none; 18252 border: none; 18253 padding: 0.25em 0.75em; 18254 box-shadow: none; 18255 } 18256 18257 .ui.table:not(.unstackable) > tr > th:first-child, 18258 .ui.table:not(.unstackable) > thead > tr > th:first-child, 18259 .ui.table:not(.unstackable) > tbody > tr > th:first-child, 18260 .ui.table:not(.unstackable) > tfoot > tr > th:first-child, 18261 .ui.table:not(.unstackable) > tr > td:first-child, 18262 .ui.table:not(.unstackable) > tbody > tr > td:first-child, 18263 .ui.table:not(.unstackable) > tfoot > tr > td:first-child { 18264 font-weight: 500; 18265 } 18266 18267 /* Definition Table */ 18268 18269 .ui.definition.table:not(.unstackable) > thead > tr > th:first-child { 18270 box-shadow: none !important; 18271 } 18272 } 18273 18274 /******************************* 18275 Coupling 18276 *******************************/ 18277 18278 /* UI Image */ 18279 18280 .ui.table .collapsing .image, 18281 .ui.table .collapsing .image img { 18282 max-width: none; 18283 } 18284 18285 /******************************* 18286 Types 18287 *******************************/ 18288 18289 /*-------------- 18290 Complex 18291 ---------------*/ 18292 18293 .ui.structured.table { 18294 border-collapse: collapse; 18295 } 18296 18297 .ui.structured.table > thead > tr > th { 18298 border-left: none; 18299 border-right: none; 18300 } 18301 18302 .ui.structured.sortable.table > thead > tr > th { 18303 border-left: 1px solid rgba(34, 36, 38, 0.15); 18304 border-right: 1px solid rgba(34, 36, 38, 0.15); 18305 } 18306 18307 .ui.structured.basic.table > tr > th, 18308 .ui.structured.basic.table > thead > tr > th, 18309 .ui.structured.basic.table > tbody > tr > th, 18310 .ui.structured.basic.table > tfoot > tr > th { 18311 border-left: none; 18312 border-right: none; 18313 } 18314 18315 .ui.structured.celled.table > tr > th, 18316 .ui.structured.celled.table > thead > tr > th, 18317 .ui.structured.celled.table > tbody > tr > th, 18318 .ui.structured.celled.table > tfoot > tr > th, 18319 .ui.structured.celled.table > tr > td, 18320 .ui.structured.celled.table > tbody > tr > td, 18321 .ui.structured.celled.table > tfoot > tr > td { 18322 border-left: 1px solid rgba(34, 36, 38, 0.1); 18323 border-right: 1px solid rgba(34, 36, 38, 0.1); 18324 } 18325 18326 /*-------------- 18327 Definition 18328 ---------------*/ 18329 18330 .ui.definition.table > thead:not(.full-width) > tr > th:first-child { 18331 pointer-events: none; 18332 background: #FFFFFF; 18333 font-weight: normal; 18334 color: rgba(0, 0, 0, 0.4); 18335 box-shadow: -0.1em -0.2em 0 0.1em #FFFFFF; 18336 -moz-transform: scale(1); 18337 } 18338 18339 .ui.definition.table > tfoot:not(.full-width) > tr > th:first-child { 18340 pointer-events: none; 18341 background: #FFFFFF; 18342 font-weight: normal; 18343 color: rgba(0, 0, 0, 0.4); 18344 box-shadow: -0.1em 0.2em 0 0.1em #FFFFFF; 18345 -moz-transform: scale(1); 18346 } 18347 18348 /* Highlight Defining Column */ 18349 18350 .ui.definition.table > tr > td:first-child:not(.ignored), 18351 .ui.definition.table > tbody > tr > td:first-child:not(.ignored), 18352 .ui.definition.table > tfoot > tr > td:first-child:not(.ignored), 18353 .ui.definition.table tr td.definition { 18354 background: rgba(0, 0, 0, 0.03); 18355 font-weight: 500; 18356 color: rgba(0, 0, 0, 0.95); 18357 text-transform: ''; 18358 box-shadow: ''; 18359 text-align: ''; 18360 font-size: 1em; 18361 padding-left: ''; 18362 padding-right: ''; 18363 } 18364 18365 /* Fix 2nd Column */ 18366 18367 .ui.definition.table > thead:not(.full-width) > tr > th:nth-child(2) { 18368 border-left: 1px solid rgba(34, 36, 38, 0.15); 18369 } 18370 18371 .ui.definition.table > tfoot:not(.full-width) > tr > th:nth-child(2), 18372 .ui.definition.table > tfoot:not(.full-width) > tr > td:nth-child(2) { 18373 border-left: 1px solid rgba(34, 36, 38, 0.15); 18374 } 18375 18376 .ui.definition.table > tr > td:nth-child(2), 18377 .ui.definition.table > tbody > tr > td:nth-child(2) { 18378 border-left: 1px solid rgba(34, 36, 38, 0.15); 18379 } 18380 18381 /******************************* 18382 States 18383 *******************************/ 18384 18385 /*-------------- 18386 Positive 18387 ---------------*/ 18388 18389 .ui.ui.ui.ui.table tr.positive, 18390 .ui.ui.table td.positive { 18391 box-shadow: 0 0 0 #A3C293 inset; 18392 background: #FCFFF5; 18393 color: #2C662D; 18394 } 18395 18396 /*-------------- 18397 Negative 18398 ---------------*/ 18399 18400 .ui.ui.ui.ui.table tr.negative, 18401 .ui.ui.table td.negative { 18402 box-shadow: 0 0 0 #E0B4B4 inset; 18403 background: #FFF6F6; 18404 color: #9F3A38; 18405 } 18406 18407 /*-------------- 18408 Error 18409 ---------------*/ 18410 18411 .ui.ui.ui.ui.table tr.error, 18412 .ui.ui.table td.error { 18413 box-shadow: 0 0 0 #E0B4B4 inset; 18414 background: #FFF6F6; 18415 color: #9F3A38; 18416 } 18417 18418 /*-------------- 18419 Warning 18420 ---------------*/ 18421 18422 .ui.ui.ui.ui.table tr.warning, 18423 .ui.ui.table td.warning { 18424 box-shadow: 0 0 0 #C9BA9B inset; 18425 background: #FFFAF3; 18426 color: #573A08; 18427 } 18428 18429 /*-------------- 18430 Active 18431 ---------------*/ 18432 18433 .ui.ui.ui.ui.table tr.active, 18434 .ui.ui.table td.active { 18435 box-shadow: 0 0 0 rgba(0, 0, 0, 0.87) inset; 18436 background: #E0E0E0; 18437 color: rgba(0, 0, 0, 0.87); 18438 } 18439 18440 /*-------------- 18441 Disabled 18442 ---------------*/ 18443 18444 .ui.table tr.disabled td, 18445 .ui.table tr td.disabled, 18446 .ui.table tr.disabled:hover, 18447 .ui.table tr:hover td.disabled { 18448 pointer-events: none; 18449 color: rgba(40, 40, 40, 0.3); 18450 } 18451 18452 /******************************* 18453 Variations 18454 *******************************/ 18455 18456 /*-------------- 18457 Text Alignment 18458 ---------------*/ 18459 18460 .ui.table[class*="left aligned"], 18461 .ui.table [class*="left aligned"] { 18462 text-align: left; 18463 } 18464 18465 .ui.table[class*="center aligned"], 18466 .ui.table [class*="center aligned"] { 18467 text-align: center; 18468 } 18469 18470 .ui.table[class*="right aligned"], 18471 .ui.table [class*="right aligned"] { 18472 text-align: right; 18473 } 18474 18475 /*------------------ 18476 Vertical Alignment 18477 ------------------*/ 18478 18479 .ui.table[class*="top aligned"], 18480 .ui.table [class*="top aligned"] { 18481 vertical-align: top; 18482 } 18483 18484 .ui.table[class*="middle aligned"], 18485 .ui.table [class*="middle aligned"] { 18486 vertical-align: middle; 18487 } 18488 18489 .ui.table[class*="bottom aligned"], 18490 .ui.table [class*="bottom aligned"] { 18491 vertical-align: bottom; 18492 } 18493 18494 /*-------------- 18495 Collapsing 18496 ---------------*/ 18497 18498 .ui.table th.collapsing, 18499 .ui.table td.collapsing { 18500 width: 1px; 18501 white-space: nowrap; 18502 } 18503 18504 /*-------------- 18505 Fixed 18506 ---------------*/ 18507 18508 .ui.fixed.table { 18509 table-layout: fixed; 18510 } 18511 18512 .ui.fixed.table th, 18513 .ui.fixed.table td { 18514 overflow: hidden; 18515 text-overflow: ellipsis; 18516 } 18517 18518 /*-------------- 18519 Selectable 18520 ---------------*/ 18521 18522 .ui.ui.selectable.table > tbody > tr:hover, 18523 .ui.table tbody tr td.selectable:hover { 18524 background: rgba(0, 0, 0, 0.05); 18525 color: rgba(0, 0, 0, 0.95); 18526 } 18527 18528 /* Selectable Cell Link */ 18529 18530 .ui.table tbody tr td.selectable { 18531 padding: 0; 18532 } 18533 18534 .ui.table tbody tr td.selectable > a:not(.ui) { 18535 display: block; 18536 color: inherit; 18537 padding: 0.78571429em 0.78571429em; 18538 } 18539 18540 .ui.table > tr > td.selectable, 18541 .ui.table > tbody > tr > td.selectable, 18542 .ui.selectable.table > tbody > tr, 18543 .ui.selectable.table > tr { 18544 cursor: pointer; 18545 } 18546 18547 /* Other States */ 18548 18549 .ui.ui.selectable.table tr.error:hover, 18550 .ui.table tr td.selectable.error:hover, 18551 .ui.selectable.table tr:hover td.error { 18552 background: #ffe7e7; 18553 color: #943634; 18554 } 18555 18556 .ui.ui.selectable.table tr.warning:hover, 18557 .ui.table tr td.selectable.warning:hover, 18558 .ui.selectable.table tr:hover td.warning { 18559 background: #fff4e4; 18560 color: #493107; 18561 } 18562 18563 .ui.ui.selectable.table tr.active:hover, 18564 .ui.table tr td.selectable.active:hover, 18565 .ui.selectable.table tr:hover td.active { 18566 background: #E0E0E0; 18567 color: rgba(0, 0, 0, 0.87); 18568 } 18569 18570 .ui.ui.selectable.table tr.positive:hover, 18571 .ui.table tr td.selectable.positive:hover, 18572 .ui.selectable.table tr:hover td.positive { 18573 background: #f7ffe6; 18574 color: #275b28; 18575 } 18576 18577 .ui.ui.selectable.table tr.negative:hover, 18578 .ui.table tr td.selectable.negative:hover, 18579 .ui.selectable.table tr:hover td.negative { 18580 background: #ffe7e7; 18581 color: #943634; 18582 } 18583 18584 /*------------------- 18585 Attached 18586 --------------------*/ 18587 18588 /* Middle */ 18589 18590 .ui.attached.table { 18591 top: 0; 18592 bottom: 0; 18593 border-radius: 0; 18594 margin: 0 -1px; 18595 width: calc(100% + 2px); 18596 max-width: calc(100% + 2px); 18597 box-shadow: none; 18598 border: 1px solid #D4D4D5; 18599 } 18600 18601 .ui.attached + .ui.attached.table:not(.top) { 18602 border-top: none; 18603 } 18604 18605 /* Top */ 18606 18607 .ui[class*="top attached"].table { 18608 bottom: 0; 18609 margin-bottom: 0; 18610 top: 0; 18611 margin-top: 1em; 18612 border-radius: 0.28571429rem 0.28571429rem 0 0; 18613 } 18614 18615 .ui.table[class*="top attached"]:first-child { 18616 margin-top: 0; 18617 } 18618 18619 /* Bottom */ 18620 18621 .ui[class*="bottom attached"].table { 18622 bottom: 0; 18623 margin-top: 0; 18624 top: 0; 18625 margin-bottom: 1em; 18626 box-shadow: none, none; 18627 border-radius: 0 0 0.28571429rem 0.28571429rem; 18628 } 18629 18630 .ui[class*="bottom attached"].table:last-child { 18631 margin-bottom: 0; 18632 } 18633 18634 /*-------------- 18635 Striped 18636 ---------------*/ 18637 18638 /* Table Striping */ 18639 18640 .ui.striped.table > tr:nth-child(2n), 18641 .ui.striped.table > tbody > tr:nth-child(2n) { 18642 background-color: rgba(0, 0, 50, 0.02); 18643 } 18644 18645 /* Allow striped active hover */ 18646 18647 .ui.striped.selectable.selectable.selectable.table tbody tr.active:hover { 18648 background: #EFEFEF; 18649 color: rgba(0, 0, 0, 0.95); 18650 } 18651 18652 /*-------------- 18653 Single Line 18654 ---------------*/ 18655 18656 .ui.table[class*="single line"], 18657 .ui.table [class*="single line"] { 18658 white-space: nowrap; 18659 } 18660 18661 /*------------------- 18662 Colors 18663 --------------------*/ 18664 18665 .ui.primary.table { 18666 border-top: 0.2em solid #2185D0; 18667 } 18668 18669 .ui.ui.ui.ui.table tr.primary:not(.marked), 18670 .ui.ui.table td.primary:not(.marked) { 18671 background: #ddf4ff; 18672 color: rgba(255, 255, 255, 0.9); 18673 } 18674 18675 .ui.ui.selectable.table tr.primary:not(.marked):hover, 18676 .ui.table tr td.selectable.primary:not(.marked):hover, 18677 .ui.selectable.table tr:hover td.primary:not(.marked) { 18678 background: #d3f1ff; 18679 color: rgba(255, 255, 255, 0.9); 18680 } 18681 18682 .ui.secondary.table { 18683 border-top: 0.2em solid #1B1C1D; 18684 } 18685 18686 .ui.ui.ui.ui.table tr.secondary:not(.marked), 18687 .ui.ui.table td.secondary:not(.marked) { 18688 background: #dddddd; 18689 color: rgba(255, 255, 255, 0.9); 18690 } 18691 18692 .ui.ui.selectable.table tr.secondary:not(.marked):hover, 18693 .ui.table tr td.selectable.secondary:not(.marked):hover, 18694 .ui.selectable.table tr:hover td.secondary:not(.marked) { 18695 background: #e2e2e2; 18696 color: rgba(255, 255, 255, 0.9); 18697 } 18698 18699 .ui.red.table { 18700 border-top: 0.2em solid #DB2828; 18701 } 18702 18703 .ui.ui.ui.ui.table tr.red:not(.marked), 18704 .ui.ui.table td.red:not(.marked) { 18705 background: #ffe1df; 18706 color: #DB2828; 18707 } 18708 18709 .ui.ui.selectable.table tr.red:not(.marked):hover, 18710 .ui.table tr td.selectable.red:not(.marked):hover, 18711 .ui.selectable.table tr:hover td.red:not(.marked) { 18712 background: #ffd7d5; 18713 color: #DB2828; 18714 } 18715 18716 .ui.orange.table { 18717 border-top: 0.2em solid #F2711C; 18718 } 18719 18720 .ui.ui.ui.ui.table tr.orange:not(.marked), 18721 .ui.ui.table td.orange:not(.marked) { 18722 background: #ffe7d1; 18723 color: #F2711C; 18724 } 18725 18726 .ui.ui.selectable.table tr.orange:not(.marked):hover, 18727 .ui.table tr td.selectable.orange:not(.marked):hover, 18728 .ui.selectable.table tr:hover td.orange:not(.marked) { 18729 background: #fae1cc; 18730 color: #F2711C; 18731 } 18732 18733 .ui.yellow.table { 18734 border-top: 0.2em solid #FBBD08; 18735 } 18736 18737 .ui.ui.ui.ui.table tr.yellow:not(.marked), 18738 .ui.ui.table td.yellow:not(.marked) { 18739 background: #fff9d2; 18740 color: #B58105; 18741 } 18742 18743 .ui.ui.selectable.table tr.yellow:not(.marked):hover, 18744 .ui.table tr td.selectable.yellow:not(.marked):hover, 18745 .ui.selectable.table tr:hover td.yellow:not(.marked) { 18746 background: #fbf5cc; 18747 color: #B58105; 18748 } 18749 18750 .ui.olive.table { 18751 border-top: 0.2em solid #B5CC18; 18752 } 18753 18754 .ui.ui.ui.ui.table tr.olive:not(.marked), 18755 .ui.ui.table td.olive:not(.marked) { 18756 background: #f7fae4; 18757 color: #8ABC1E; 18758 } 18759 18760 .ui.ui.selectable.table tr.olive:not(.marked):hover, 18761 .ui.table tr td.selectable.olive:not(.marked):hover, 18762 .ui.selectable.table tr:hover td.olive:not(.marked) { 18763 background: #f6fada; 18764 color: #8ABC1E; 18765 } 18766 18767 .ui.green.table { 18768 border-top: 0.2em solid #21BA45; 18769 } 18770 18771 .ui.ui.ui.ui.table tr.green:not(.marked), 18772 .ui.ui.table td.green:not(.marked) { 18773 background: #d5f5d9; 18774 color: #1EBC30; 18775 } 18776 18777 .ui.ui.selectable.table tr.green:not(.marked):hover, 18778 .ui.table tr td.selectable.green:not(.marked):hover, 18779 .ui.selectable.table tr:hover td.green:not(.marked) { 18780 background: #d2eed5; 18781 color: #1EBC30; 18782 } 18783 18784 .ui.teal.table { 18785 border-top: 0.2em solid #00B5AD; 18786 } 18787 18788 .ui.ui.ui.ui.table tr.teal:not(.marked), 18789 .ui.ui.table td.teal:not(.marked) { 18790 background: #e2ffff; 18791 color: #10A3A3; 18792 } 18793 18794 .ui.ui.selectable.table tr.teal:not(.marked):hover, 18795 .ui.table tr td.selectable.teal:not(.marked):hover, 18796 .ui.selectable.table tr:hover td.teal:not(.marked) { 18797 background: #d8ffff; 18798 color: #10A3A3; 18799 } 18800 18801 .ui.blue.table { 18802 border-top: 0.2em solid #2185D0; 18803 } 18804 18805 .ui.ui.ui.ui.table tr.blue:not(.marked), 18806 .ui.ui.table td.blue:not(.marked) { 18807 background: #ddf4ff; 18808 color: #2185D0; 18809 } 18810 18811 .ui.ui.selectable.table tr.blue:not(.marked):hover, 18812 .ui.table tr td.selectable.blue:not(.marked):hover, 18813 .ui.selectable.table tr:hover td.blue:not(.marked) { 18814 background: #d3f1ff; 18815 color: #2185D0; 18816 } 18817 18818 .ui.violet.table { 18819 border-top: 0.2em solid #6435C9; 18820 } 18821 18822 .ui.ui.ui.ui.table tr.violet:not(.marked), 18823 .ui.ui.table td.violet:not(.marked) { 18824 background: #ece9fe; 18825 color: #6435C9; 18826 } 18827 18828 .ui.ui.selectable.table tr.violet:not(.marked):hover, 18829 .ui.table tr td.selectable.violet:not(.marked):hover, 18830 .ui.selectable.table tr:hover td.violet:not(.marked) { 18831 background: #e3deff; 18832 color: #6435C9; 18833 } 18834 18835 .ui.purple.table { 18836 border-top: 0.2em solid #A333C8; 18837 } 18838 18839 .ui.ui.ui.ui.table tr.purple:not(.marked), 18840 .ui.ui.table td.purple:not(.marked) { 18841 background: #f8e3ff; 18842 color: #A333C8; 18843 } 18844 18845 .ui.ui.selectable.table tr.purple:not(.marked):hover, 18846 .ui.table tr td.selectable.purple:not(.marked):hover, 18847 .ui.selectable.table tr:hover td.purple:not(.marked) { 18848 background: #f5d9ff; 18849 color: #A333C8; 18850 } 18851 18852 .ui.pink.table { 18853 border-top: 0.2em solid #E03997; 18854 } 18855 18856 .ui.ui.ui.ui.table tr.pink:not(.marked), 18857 .ui.ui.table td.pink:not(.marked) { 18858 background: #ffe8f9; 18859 color: #E03997; 18860 } 18861 18862 .ui.ui.selectable.table tr.pink:not(.marked):hover, 18863 .ui.table tr td.selectable.pink:not(.marked):hover, 18864 .ui.selectable.table tr:hover td.pink:not(.marked) { 18865 background: #ffdef6; 18866 color: #E03997; 18867 } 18868 18869 .ui.brown.table { 18870 border-top: 0.2em solid #A5673F; 18871 } 18872 18873 .ui.ui.ui.ui.table tr.brown:not(.marked), 18874 .ui.ui.table td.brown:not(.marked) { 18875 background: #f7e5d2; 18876 color: #A5673F; 18877 } 18878 18879 .ui.ui.selectable.table tr.brown:not(.marked):hover, 18880 .ui.table tr td.selectable.brown:not(.marked):hover, 18881 .ui.selectable.table tr:hover td.brown:not(.marked) { 18882 background: #efe0cf; 18883 color: #A5673F; 18884 } 18885 18886 .ui.grey.table { 18887 border-top: 0.2em solid #767676; 18888 } 18889 18890 .ui.ui.ui.ui.table tr.grey:not(.marked), 18891 .ui.ui.table td.grey:not(.marked) { 18892 background: #DCDDDE; 18893 color: #767676; 18894 } 18895 18896 .ui.ui.selectable.table tr.grey:not(.marked):hover, 18897 .ui.table tr td.selectable.grey:not(.marked):hover, 18898 .ui.selectable.table tr:hover td.grey:not(.marked) { 18899 background: #c2c4c5; 18900 color: #767676; 18901 } 18902 18903 .ui.black.table { 18904 border-top: 0.2em solid #1B1C1D; 18905 } 18906 18907 .ui.ui.ui.ui.table tr.black:not(.marked), 18908 .ui.ui.table td.black:not(.marked) { 18909 background: #545454; 18910 color: #FFFFFF; 18911 } 18912 18913 .ui.ui.selectable.table tr.black:not(.marked):hover, 18914 .ui.table tr td.selectable.black:not(.marked):hover, 18915 .ui.selectable.table tr:hover td.black:not(.marked) { 18916 background: #000000; 18917 color: #FFFFFF; 18918 } 18919 18920 /*-------------- 18921 Column Count 18922 ---------------*/ 18923 18924 /* Grid Based */ 18925 18926 .ui.one.column.table td { 18927 width: 100%; 18928 } 18929 18930 .ui.two.column.table td { 18931 width: 50%; 18932 } 18933 18934 .ui.three.column.table td { 18935 width: 33.33333333%; 18936 } 18937 18938 .ui.four.column.table td { 18939 width: 25%; 18940 } 18941 18942 .ui.five.column.table td { 18943 width: 20%; 18944 } 18945 18946 .ui.six.column.table td { 18947 width: 16.66666667%; 18948 } 18949 18950 .ui.seven.column.table td { 18951 width: 14.28571429%; 18952 } 18953 18954 .ui.eight.column.table td { 18955 width: 12.5%; 18956 } 18957 18958 .ui.nine.column.table td { 18959 width: 11.11111111%; 18960 } 18961 18962 .ui.ten.column.table td { 18963 width: 10%; 18964 } 18965 18966 .ui.eleven.column.table td { 18967 width: 9.09090909%; 18968 } 18969 18970 .ui.twelve.column.table td { 18971 width: 8.33333333%; 18972 } 18973 18974 .ui.thirteen.column.table td { 18975 width: 7.69230769%; 18976 } 18977 18978 .ui.fourteen.column.table td { 18979 width: 7.14285714%; 18980 } 18981 18982 .ui.fifteen.column.table td { 18983 width: 6.66666667%; 18984 } 18985 18986 .ui.sixteen.column.table td { 18987 width: 6.25%; 18988 } 18989 18990 /* Column Width */ 18991 18992 .ui.table th.one.wide, 18993 .ui.table td.one.wide { 18994 width: 6.25%; 18995 } 18996 18997 .ui.table th.two.wide, 18998 .ui.table td.two.wide { 18999 width: 12.5%; 19000 } 19001 19002 .ui.table th.three.wide, 19003 .ui.table td.three.wide { 19004 width: 18.75%; 19005 } 19006 19007 .ui.table th.four.wide, 19008 .ui.table td.four.wide { 19009 width: 25%; 19010 } 19011 19012 .ui.table th.five.wide, 19013 .ui.table td.five.wide { 19014 width: 31.25%; 19015 } 19016 19017 .ui.table th.six.wide, 19018 .ui.table td.six.wide { 19019 width: 37.5%; 19020 } 19021 19022 .ui.table th.seven.wide, 19023 .ui.table td.seven.wide { 19024 width: 43.75%; 19025 } 19026 19027 .ui.table th.eight.wide, 19028 .ui.table td.eight.wide { 19029 width: 50%; 19030 } 19031 19032 .ui.table th.nine.wide, 19033 .ui.table td.nine.wide { 19034 width: 56.25%; 19035 } 19036 19037 .ui.table th.ten.wide, 19038 .ui.table td.ten.wide { 19039 width: 62.5%; 19040 } 19041 19042 .ui.table th.eleven.wide, 19043 .ui.table td.eleven.wide { 19044 width: 68.75%; 19045 } 19046 19047 .ui.table th.twelve.wide, 19048 .ui.table td.twelve.wide { 19049 width: 75%; 19050 } 19051 19052 .ui.table th.thirteen.wide, 19053 .ui.table td.thirteen.wide { 19054 width: 81.25%; 19055 } 19056 19057 .ui.table th.fourteen.wide, 19058 .ui.table td.fourteen.wide { 19059 width: 87.5%; 19060 } 19061 19062 .ui.table th.fifteen.wide, 19063 .ui.table td.fifteen.wide { 19064 width: 93.75%; 19065 } 19066 19067 .ui.table th.sixteen.wide, 19068 .ui.table td.sixteen.wide { 19069 width: 100%; 19070 } 19071 19072 /*-------------- 19073 Sortable 19074 ---------------*/ 19075 19076 .ui.sortable.table > thead > tr > th { 19077 cursor: pointer; 19078 white-space: nowrap; 19079 border-left: 1px solid rgba(34, 36, 38, 0.15); 19080 color: rgba(0, 0, 0, 0.87); 19081 } 19082 19083 .ui.sortable.table > thead > tr > th:first-child { 19084 border-left: none; 19085 } 19086 19087 .ui.sortable.table thead th.sorted, 19088 .ui.sortable.table thead th.sorted:hover { 19089 -webkit-user-select: none; 19090 -moz-user-select: none; 19091 user-select: none; 19092 } 19093 19094 .ui.sortable.table > thead > tr > th:after { 19095 display: none; 19096 font-style: normal; 19097 font-weight: normal; 19098 text-decoration: inherit; 19099 content: ''; 19100 height: 1em; 19101 width: auto; 19102 opacity: 0.8; 19103 margin: 0 0 0 0.5em; 19104 font-family: 'Icons'; 19105 } 19106 19107 .ui.sortable.table thead th.ascending:after { 19108 content: '\f0d8'; 19109 } 19110 19111 .ui.sortable.table thead th.descending:after { 19112 content: '\f0d7'; 19113 } 19114 19115 /* Hover */ 19116 19117 .ui.sortable.table th.disabled:hover { 19118 cursor: auto; 19119 color: rgba(40, 40, 40, 0.3); 19120 } 19121 19122 .ui.sortable.table > thead > tr > th:hover { 19123 color: rgba(0, 0, 0, 0.8); 19124 } 19125 19126 .ui.sortable.table:not(.basic) > thead > tr > th:hover { 19127 background: rgba(0, 0, 0, 0.05); 19128 } 19129 19130 /* Sorted */ 19131 19132 .ui.sortable.table thead th.sorted { 19133 color: rgba(0, 0, 0, 0.95); 19134 } 19135 19136 .ui.sortable.table:not(.basic) thead th.sorted { 19137 background: rgba(0, 0, 0, 0.05); 19138 } 19139 19140 .ui.sortable.table thead th.sorted:after { 19141 display: inline-block; 19142 } 19143 19144 /* Sorted Hover */ 19145 19146 .ui.sortable.table thead th.sorted:hover { 19147 color: rgba(0, 0, 0, 0.95); 19148 } 19149 19150 .ui.sortable.table:not(.basic) thead th.sorted:hover { 19151 background: rgba(0, 0, 0, 0.05); 19152 } 19153 19154 /*-------------- 19155 Collapsing 19156 ---------------*/ 19157 19158 .ui.collapsing.table { 19159 width: auto; 19160 } 19161 19162 /*-------------- 19163 Basic 19164 ---------------*/ 19165 19166 .ui.basic.table { 19167 background: transparent; 19168 border: 1px solid rgba(34, 36, 38, 0.15); 19169 box-shadow: none; 19170 } 19171 19172 .ui.basic.table > thead, 19173 .ui.basic.table > tfoot { 19174 box-shadow: none; 19175 } 19176 19177 .ui.basic.table > thead > tr > th, 19178 .ui.basic.table > tbody > tr > th, 19179 .ui.basic.table > tfoot > tr > th, 19180 .ui.basic.table > tr > th { 19181 background: transparent; 19182 border-left: none; 19183 } 19184 19185 .ui.basic.table > tbody > tr { 19186 border-bottom: 1px solid rgba(0, 0, 0, 0.1); 19187 } 19188 19189 .ui.basic.table > tbody > tr > td, 19190 .ui.basic.table > tfoot > tr > td, 19191 .ui.basic.table > tr > td { 19192 background: transparent; 19193 } 19194 19195 .ui.basic.striped.table > tbody > tr:nth-child(2n) { 19196 background-color: rgba(0, 0, 0, 0.05); 19197 } 19198 19199 /* Very Basic */ 19200 19201 .ui[class*="very basic"].table { 19202 border: none; 19203 } 19204 19205 .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th, 19206 .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th, 19207 .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th, 19208 .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th, 19209 .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td, 19210 .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td { 19211 padding: ''; 19212 } 19213 19214 .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th:first-child, 19215 .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th:first-child, 19216 .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th:first-child, 19217 .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th:first-child, 19218 .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td:first-child, 19219 .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td:first-child, 19220 .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > td:first-child { 19221 padding-left: 0; 19222 } 19223 19224 .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > th:last-child, 19225 .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr > th:last-child, 19226 .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > th:last-child, 19227 .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > th:last-child, 19228 .ui[class*="very basic"].table:not(.sortable):not(.striped) > tr > td:last-child, 19229 .ui[class*="very basic"].table:not(.sortable):not(.striped) > tbody > tr > td:last-child, 19230 .ui[class*="very basic"].table:not(.sortable):not(.striped) > tfoot > tr > td:last-child { 19231 padding-right: 0; 19232 } 19233 19234 .ui[class*="very basic"].table:not(.sortable):not(.striped) > thead > tr:first-child > th { 19235 padding-top: 0; 19236 } 19237 19238 /*-------------- 19239 Celled 19240 ---------------*/ 19241 19242 .ui.celled.table > tr > th, 19243 .ui.celled.table > thead > tr > th, 19244 .ui.celled.table > tbody > tr > th, 19245 .ui.celled.table > tfoot > tr > th, 19246 .ui.celled.table > tr > td, 19247 .ui.celled.table > tbody > tr > td, 19248 .ui.celled.table > tfoot > tr > td { 19249 border-left: 1px solid rgba(34, 36, 38, 0.1); 19250 } 19251 19252 .ui.celled.table > tr > th:first-child, 19253 .ui.celled.table > thead > tr > th:first-child, 19254 .ui.celled.table > tbody > tr > th:first-child, 19255 .ui.celled.table > tfoot > tr > th:first-child, 19256 .ui.celled.table > tr > td:first-child, 19257 .ui.celled.table > tbody > tr > td:first-child, 19258 .ui.celled.table > tfoot > tr > td:first-child { 19259 border-left: none; 19260 } 19261 19262 /*-------------- 19263 Padded 19264 ---------------*/ 19265 19266 .ui.padded.table > tr > th, 19267 .ui.padded.table > thead > tr > th, 19268 .ui.padded.table > tbody > tr > th, 19269 .ui.padded.table > tfoot > tr > th { 19270 padding-left: 1em; 19271 padding-right: 1em; 19272 } 19273 19274 .ui.padded.table > tr > th, 19275 .ui.padded.table > thead > tr > th, 19276 .ui.padded.table > tbody > tr > th, 19277 .ui.padded.table > tfoot > tr > th, 19278 .ui.padded.table > tr > td, 19279 .ui.padded.table > tbody > tr > td, 19280 .ui.padded.table > tfoot > tr > td { 19281 padding: 1em 1em; 19282 } 19283 19284 /* Very */ 19285 19286 .ui[class*="very padded"].table > tr > th, 19287 .ui[class*="very padded"].table > thead > tr > th, 19288 .ui[class*="very padded"].table > tbody > tr > th, 19289 .ui[class*="very padded"].table > tfoot > tr > th { 19290 padding-left: 1.5em; 19291 padding-right: 1.5em; 19292 } 19293 19294 .ui[class*="very padded"].table > tr > td, 19295 .ui[class*="very padded"].table > tbody > tr > td, 19296 .ui[class*="very padded"].table > tfoot > tr > td { 19297 padding: 1.5em 1.5em; 19298 } 19299 19300 /*-------------- 19301 Compact 19302 ---------------*/ 19303 19304 .ui.compact.table > tr > th, 19305 .ui.compact.table > thead > tr > th, 19306 .ui.compact.table > tbody > tr > th, 19307 .ui.compact.table > tfoot > tr > th { 19308 padding-left: 0.7em; 19309 padding-right: 0.7em; 19310 } 19311 19312 .ui.compact.table > tr > td, 19313 .ui.compact.table > tbody > tr > td, 19314 .ui.compact.table > tfoot > tr > td { 19315 padding: 0.5em 0.7em; 19316 } 19317 19318 /* Very */ 19319 19320 .ui[class*="very compact"].table > tr > th, 19321 .ui[class*="very compact"].table > thead > tr > th, 19322 .ui[class*="very compact"].table > tbody > tr > th, 19323 .ui[class*="very compact"].table > tfoot > tr > th { 19324 padding-left: 0.6em; 19325 padding-right: 0.6em; 19326 } 19327 19328 .ui[class*="very compact"].table > tr > td, 19329 .ui[class*="very compact"].table > tbody > tr > td, 19330 .ui[class*="very compact"].table > tfoot > tr > td { 19331 padding: 0.4em 0.6em; 19332 } 19333 19334 /*-------------- 19335 Sizes 19336 ---------------*/ 19337 19338 /* Standard */ 19339 19340 .ui.table { 19341 font-size: 1em; 19342 } 19343 19344 .ui.mini.table { 19345 font-size: 0.78571429rem; 19346 } 19347 19348 .ui.tiny.table { 19349 font-size: 0.85714286rem; 19350 } 19351 19352 .ui.small.table { 19353 font-size: 0.9em; 19354 } 19355 19356 .ui.large.table { 19357 font-size: 1.1em; 19358 } 19359 19360 .ui.big.table { 19361 font-size: 1.28571429rem; 19362 } 19363 19364 .ui.huge.table { 19365 font-size: 1.42857143rem; 19366 } 19367 19368 .ui.massive.table { 19369 font-size: 1.71428571rem; 19370 } 19371 19372 /******************************* 19373 Site Overrides 19374 *******************************/