0cdd10d0c5208d39a9b0dca7d77d990054be2fc1
[cacert-boardvoting.git] / static / semantic.css
1 /*
2 * # Semantic UI -
3 * https://github.com/Semantic-Org/Semantic-UI
4 * http://www.semantic-ui.com/
5 *
6 * Copyright 2014 Contributors
7 * Released under the MIT license
8 * http://opensource.org/licenses/MIT
9 *
10 */
11 @import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin');
12 /*!
13 * # Semantic UI undefined - Reset
14 * http://github.com/semantic-org/semantic-ui/
15 *
16 *
17 * Released under the MIT license
18 * http://opensource.org/licenses/MIT
19 *
20 */
21
22 /*******************************
23 Reset
24 *******************************/
25
26 /* Border-Box */
27
28 *,
29 *:before,
30 *:after {
31 box-sizing: inherit;
32 }
33
34 html {
35 box-sizing: border-box;
36 }
37
38 /* iPad Input Shadows */
39
40 input[type="text"],
41 input[type="email"],
42 input[type="search"],
43 input[type="password"] {
44 -webkit-appearance: none;
45 -moz-appearance: none;
46 /* mobile firefox too! */
47 }
48
49 /*******************************
50 Theme Overrides
51 *******************************/
52
53 /*! normalize.css v3.0.1 | MIT License | git.io/normalize */
54
55 /**
56 * Correct `block` display not defined in IE 8/9.
57 */
58
59 /*! normalize.css v3.0.1 | MIT License | git.io/normalize */
60
61 /**
62 * 1. Set default font family to sans-serif.
63 * 2. Prevent iOS text size adjust after orientation change, without disabling
64 * user zoom.
65 */
66
67 html {
68 font-family: sans-serif;
69 /* 1 */
70 -ms-text-size-adjust: 100%;
71 /* 2 */
72 -webkit-text-size-adjust: 100%;
73 /* 2 */
74 }
75
76 /**
77 * Remove default margin.
78 */
79
80 body {
81 margin: 0;
82 }
83
84 /* HTML5 display definitions
85 ========================================================================== */
86
87 /**
88 * Correct `block` display not defined for any HTML5 element in IE 8/9.
89 * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
90 * Correct `block` display not defined for `main` in IE 11.
91 */
92
93 article,
94 aside,
95 details,
96 figcaption,
97 figure,
98 footer,
99 header,
100 hgroup,
101 main,
102 nav,
103 section,
104 summary {
105 display: block;
106 }
107
108 /**
109 * 1. Correct `inline-block` display not defined in IE 8/9.
110 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
111 */
112
113 audio,
114 canvas,
115 progress,
116 video {
117 display: inline-block;
118 /* 1 */
119 vertical-align: baseline;
120 /* 2 */
121 }
122
123 /**
124 * Prevent modern browsers from displaying `audio` without controls.
125 * Remove excess height in iOS 5 devices.
126 */
127
128 audio:not([controls]) {
129 display: none;
130 height: 0;
131 }
132
133 /**
134 * Address `[hidden]` styling not present in IE 8/9/10.
135 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
136 */
137
138 [hidden],
139 template {
140 display: none;
141 }
142
143 /* Links
144 ========================================================================== */
145
146 /**
147 * Remove the gray background color from active links in IE 10.
148 */
149
150 a {
151 background: transparent;
152 }
153
154 /**
155 * Improve readability when focused and also mouse hovered in all browsers.
156 */
157
158 a:active,
159 a:hover {
160 outline: 0;
161 }
162
163 /* Text-level semantics
164 ========================================================================== */
165
166 /**
167 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
168 */
169
170 abbr[title] {
171 border-bottom: 1px dotted;
172 }
173
174 /**
175 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
176 */
177
178 b,
179 strong {
180 font-weight: bold;
181 }
182
183 /**
184 * Address styling not present in Safari and Chrome.
185 */
186
187 dfn {
188 font-style: italic;
189 }
190
191 /**
192 * Address variable `h1` font-size and margin within `section` and `article`
193 * contexts in Firefox 4+, Safari, and Chrome.
194 */
195
196 h1 {
197 font-size: 2em;
198 margin: 0.67em 0;
199 }
200
201 /**
202 * Address styling not present in IE 8/9.
203 */
204
205 mark {
206 background: #ff0;
207 color: #000;
208 }
209
210 /**
211 * Address inconsistent and variable font size in all browsers.
212 */
213
214 small {
215 font-size: 80%;
216 }
217
218 /**
219 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
220 */
221
222 sub,
223 sup {
224 font-size: 75%;
225 line-height: 0;
226 position: relative;
227 vertical-align: baseline;
228 }
229
230 sup {
231 top: -0.5em;
232 }
233
234 sub {
235 bottom: -0.25em;
236 }
237
238 /* Embedded content
239 ========================================================================== */
240
241 /**
242 * Remove border when inside `a` element in IE 8/9/10.
243 */
244
245 img {
246 border: 0;
247 }
248
249 /**
250 * Correct overflow not hidden in IE 9/10/11.
251 */
252
253 svg:not(:root) {
254 overflow: hidden;
255 }
256
257 /* Grouping content
258 ========================================================================== */
259
260 /**
261 * Address margin not present in IE 8/9 and Safari.
262 */
263
264 figure {
265 margin: 1em 40px;
266 }
267
268 /**
269 * Address differences between Firefox and other browsers.
270 */
271
272 hr {
273 height: 0;
274 }
275
276 /**
277 * Contain overflow in all browsers.
278 */
279
280 pre {
281 overflow: auto;
282 }
283
284 /**
285 * Address odd `em`-unit font size rendering in all browsers.
286 */
287
288 code,
289 kbd,
290 pre,
291 samp {
292 font-family: monospace, monospace;
293 font-size: 1em;
294 }
295
296 /* Forms
297 ========================================================================== */
298
299 /**
300 * Known limitation: by default, Chrome and Safari on OS X allow very limited
301 * styling of `select`, unless a `border` property is set.
302 */
303
304 /**
305 * 1. Correct color not being inherited.
306 * Known issue: affects color of disabled elements.
307 * 2. Correct font properties not being inherited.
308 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
309 */
310
311 button,
312 input,
313 optgroup,
314 select,
315 textarea {
316 color: inherit;
317 /* 1 */
318 font: inherit;
319 /* 2 */
320 margin: 0;
321 /* 3 */
322 }
323
324 /**
325 * Address `overflow` set to `hidden` in IE 8/9/10/11.
326 */
327
328 button {
329 overflow: visible;
330 }
331
332 /**
333 * Address inconsistent `text-transform` inheritance for `button` and `select`.
334 * All other form control elements do not inherit `text-transform` values.
335 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
336 * Correct `select` style inheritance in Firefox.
337 */
338
339 button,
340 select {
341 text-transform: none;
342 }
343
344 /**
345 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
346 * and `video` controls.
347 * 2. Correct inability to style clickable `input` types in iOS.
348 * 3. Improve usability and consistency of cursor style between image-type
349 * `input` and others.
350 */
351
352 button,
353 html input[type="button"],
354 input[type="reset"],
355 input[type="submit"] {
356 -webkit-appearance: button;
357 /* 2 */
358 cursor: pointer;
359 /* 3 */
360 }
361
362 /**
363 * Re-set default cursor for disabled elements.
364 */
365
366 button[disabled],
367 html input[disabled] {
368 cursor: default;
369 }
370
371 /**
372 * Remove inner padding and border in Firefox 4+.
373 */
374
375 button::-moz-focus-inner,
376 input::-moz-focus-inner {
377 border: 0;
378 padding: 0;
379 }
380
381 /**
382 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
383 * the UA stylesheet.
384 */
385
386 input {
387 line-height: normal;
388 }
389
390 /**
391 * It's recommended that you don't attempt to style these elements.
392 * Firefox's implementation doesn't respect box-sizing, padding, or width.
393 *
394 * 1. Address box sizing set to `content-box` in IE 8/9/10.
395 * 2. Remove excess padding in IE 8/9/10.
396 */
397
398 input[type="checkbox"],
399 input[type="radio"] {
400 box-sizing: border-box;
401 /* 1 */
402 padding: 0;
403 /* 2 */
404 }
405
406 /**
407 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
408 * `font-size` values of the `input`, it causes the cursor style of the
409 * decrement button to change from `default` to `text`.
410 */
411
412 input[type="number"]::-webkit-inner-spin-button,
413 input[type="number"]::-webkit-outer-spin-button {
414 height: auto;
415 }
416
417 /**
418 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
419 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
420 * (include `-moz` to future-proof).
421 */
422
423 input[type="search"] {
424 -webkit-appearance: textfield;
425 /* 1 */
426 }
427
428 /**
429 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
430 * Safari (but not Chrome) clips the cancel button when the search input has
431 * padding (and `textfield` appearance).
432 */
433
434 input[type="search"]::-webkit-search-cancel-button,
435 input[type="search"]::-webkit-search-decoration {
436 -webkit-appearance: none;
437 }
438
439 /**
440 * Define consistent border, margin, and padding.
441 */
442
443 fieldset {
444 border: 1px solid #c0c0c0;
445 margin: 0 2px;
446 padding: 0.35em 0.625em 0.75em;
447 }
448
449 /**
450 * 1. Correct `color` not being inherited in IE 8/9/10/11.
451 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
452 */
453
454 legend {
455 border: 0;
456 /* 1 */
457 padding: 0;
458 /* 2 */
459 }
460
461 /**
462 * Remove default vertical scrollbar in IE 8/9/10/11.
463 */
464
465 textarea {
466 overflow: auto;
467 }
468
469 /**
470 * Don't inherit the `font-weight` (applied by a rule above).
471 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
472 */
473
474 optgroup {
475 font-weight: bold;
476 }
477
478 /* Tables
479 ========================================================================== */
480
481 /**
482 * Remove most spacing between table cells.
483 */
484
485 table {
486 border-collapse: collapse;
487 border-spacing: 0;
488 }
489
490 td,
491 th {
492 padding: 0;
493 }
494
495 /*******************************
496 Site Overrides
497 *******************************/
498 /*!
499 * # Semantic UI undefined - Site
500 * http://github.com/semantic-org/semantic-ui/
501 *
502 *
503 * Released under the MIT license
504 * http://opensource.org/licenses/MIT
505 *
506 */
507
508 /*******************************
509 Page
510 *******************************/
511
512 html,
513 body {
514 height: 100%;
515 }
516
517 html {
518 font-size: 14px;
519 }
520
521 body {
522 margin: 0px;
523 padding: 0px;
524 overflow-x: hidden;
525 min-width: 320px;
526 background: #FFFFFF;
527 font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
528 font-size: 14px;
529 line-height: 1.4285em;
530 color: rgba(0, 0, 0, 0.87);
531 font-smoothing: antialiased;
532 }
533
534 /*******************************
535 Headers
536 *******************************/
537
538 h1,
539 h2,
540 h3,
541 h4,
542 h5 {
543 font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
544 line-height: 1.28571429em;
545 margin: calc(2rem - 0.14285714em ) 0em 1rem;
546 font-weight: bold;
547 padding: 0em;
548 }
549
550 h1 {
551 min-height: 1rem;
552 font-size: 2rem;
553 }
554
555 h2 {
556 font-size: 1.71428571rem;
557 }
558
559 h3 {
560 font-size: 1.28571429rem;
561 }
562
563 h4 {
564 font-size: 1.07142857rem;
565 }
566
567 h5 {
568 font-size: 1rem;
569 }
570
571 h1:first-child,
572 h2:first-child,
573 h3:first-child,
574 h4:first-child,
575 h5:first-child {
576 margin-top: 0em;
577 }
578
579 h1:last-child,
580 h2:last-child,
581 h3:last-child,
582 h4:last-child,
583 h5:last-child {
584 margin-bottom: 0em;
585 }
586
587 /*******************************
588 Text
589 *******************************/
590
591 p {
592 margin: 0em 0em 1em;
593 line-height: 1.4285em;
594 }
595
596 p:first-child {
597 margin-top: 0em;
598 }
599
600 p:last-child {
601 margin-bottom: 0em;
602 }
603
604 /*-------------------
605 Links
606 --------------------*/
607
608 a {
609 color: #4183C4;
610 text-decoration: none;
611 }
612
613 a:hover {
614 color: #1e70bf;
615 text-decoration: none;
616 }
617
618 /*******************************
619 Highlighting
620 *******************************/
621
622 /* Site */
623
624 ::-webkit-selection {
625 background-color: #CCE2FF;
626 color: rgba(0, 0, 0, 0.87);
627 }
628
629 ::-moz-selection {
630 background-color: #CCE2FF;
631 color: rgba(0, 0, 0, 0.87);
632 }
633
634 ::selection {
635 background-color: #CCE2FF;
636 color: rgba(0, 0, 0, 0.87);
637 }
638
639 /* Form */
640
641 textarea::-webkit-selection,
642 input::-webkit-selection {
643 background-color: rgba(100, 100, 100, 0.4);
644 color: rgba(0, 0, 0, 0.87);
645 }
646
647 textarea::-moz-selection,
648 input::-moz-selection {
649 background-color: rgba(100, 100, 100, 0.4);
650 color: rgba(0, 0, 0, 0.87);
651 }
652
653 textarea::selection,
654 input::selection {
655 background-color: rgba(100, 100, 100, 0.4);
656 color: rgba(0, 0, 0, 0.87);
657 }
658
659 /*******************************
660 Global Overrides
661 *******************************/
662
663 /*******************************
664 Site Overrides
665 *******************************/
666 /*!
667 * # Semantic UI undefined - Button
668 * http://github.com/semantic-org/semantic-ui/
669 *
670 *
671 * Released under the MIT license
672 * http://opensource.org/licenses/MIT
673 *
674 */
675
676 /*******************************
677 Button
678 *******************************/
679
680 .ui.button {
681 cursor: pointer;
682 display: inline-block;
683 min-height: 1em;
684 outline: none;
685 border: none;
686 vertical-align: baseline;
687 background: #E0E1E2 none;
688 color: rgba(0, 0, 0, 0.6);
689 font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
690 margin: 0em 0.25em 0em 0em;
691 padding: 0.78571429em 1.5em 0.78571429em;
692 text-transform: none;
693 text-shadow: none;
694 font-weight: bold;
695 line-height: 1em;
696 font-style: normal;
697 text-align: center;
698 text-decoration: none;
699 border-radius: 0.28571429rem;
700 box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
701 -webkit-user-select: none;
702 -moz-user-select: none;
703 -ms-user-select: none;
704 user-select: none;
705 -webkit-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
706 transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
707 will-change: '';
708 -webkit-tap-highlight-color: transparent;
709 }
710
711 /*******************************
712 States
713 *******************************/
714
715 /*--------------
716 Hover
717 ---------------*/
718
719 .ui.button:hover {
720 background-color: #CACBCD;
721 background-image: none;
722 box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
723 color: rgba(0, 0, 0, 0.8);
724 }
725
726 .ui.button:hover .icon {
727 opacity: 0.85;
728 }
729
730 /*--------------
731 Focus
732 ---------------*/
733
734 .ui.button:focus {
735 background-color: #CACBCD;
736 color: rgba(0, 0, 0, 0.8);
737 background-image: '' !important;
738 box-shadow: '' !important;
739 }
740
741 .ui.button:focus .icon {
742 opacity: 0.85;
743 }
744
745 /*--------------
746 Down
747 ---------------*/
748
749 .ui.button:active,
750 .ui.active.button:active {
751 background-color: #BABBBC;
752 background-image: '';
753 color: rgba(0, 0, 0, 0.9);
754 box-shadow: 0px 0px 0px 1px transparent inset, none;
755 }
756
757 /*--------------
758 Active
759 ---------------*/
760
761 .ui.active.button {
762 background-color: #C0C1C2;
763 background-image: none;
764 box-shadow: 0px 0px 0px 1px transparent inset;
765 color: rgba(0, 0, 0, 0.95);
766 }
767
768 .ui.active.button:hover {
769 background-color: #C0C1C2;
770 background-image: none;
771 color: rgba(0, 0, 0, 0.95);
772 }
773
774 .ui.active.button:active {
775 background-color: #C0C1C2;
776 background-image: none;
777 }
778
779 /*--------------
780 Loading
781 ---------------*/
782
783 /* Specificity hack */
784
785 .ui.loading.loading.loading.loading.loading.loading.button {
786 position: relative;
787 cursor: default;
788 text-shadow: none !important;
789 color: transparent !important;
790 opacity: 1;
791 pointer-events: auto;
792 -webkit-transition: all 0s linear, opacity 0.1s ease;
793 transition: all 0s linear, opacity 0.1s ease;
794 }
795
796 .ui.loading.button:before {
797 position: absolute;
798 content: '';
799 top: 50%;
800 left: 50%;
801 margin: -0.64285714em 0em 0em -0.64285714em;
802 width: 1.28571429em;
803 height: 1.28571429em;
804 border-radius: 500rem;
805 border: 0.2em solid rgba(0, 0, 0, 0.15);
806 }
807
808 .ui.loading.button:after {
809 position: absolute;
810 content: '';
811 top: 50%;
812 left: 50%;
813 margin: -0.64285714em 0em 0em -0.64285714em;
814 width: 1.28571429em;
815 height: 1.28571429em;
816 -webkit-animation: button-spin 0.6s linear;
817 animation: button-spin 0.6s linear;
818 -webkit-animation-iteration-count: infinite;
819 animation-iteration-count: infinite;
820 border-radius: 500rem;
821 border-color: #FFFFFF transparent transparent;
822 border-style: solid;
823 border-width: 0.2em;
824 box-shadow: 0px 0px 0px 1px transparent;
825 }
826
827 .ui.labeled.icon.loading.button .icon {
828 background-color: transparent;
829 box-shadow: none;
830 }
831
832 @-webkit-keyframes button-spin {
833 from {
834 -webkit-transform: rotate(0deg);
835 transform: rotate(0deg);
836 }
837
838 to {
839 -webkit-transform: rotate(360deg);
840 transform: rotate(360deg);
841 }
842 }
843
844 @keyframes button-spin {
845 from {
846 -webkit-transform: rotate(0deg);
847 transform: rotate(0deg);
848 }
849
850 to {
851 -webkit-transform: rotate(360deg);
852 transform: rotate(360deg);
853 }
854 }
855
856 .ui.basic.loading.button:not(.inverted):before {
857 border-color: rgba(0, 0, 0, 0.1);
858 }
859
860 .ui.basic.loading.button:not(.inverted):after {
861 border-top-color: #767676;
862 }
863
864 /*-------------------
865 Disabled
866 --------------------*/
867
868 .ui.buttons .disabled.button,
869 .ui.disabled.button,
870 .ui.button:disabled,
871 .ui.disabled.button:hover,
872 .ui.disabled.active.button {
873 cursor: default;
874 opacity: 0.45 !important;
875 background-image: none !important;
876 box-shadow: none !important;
877 pointer-events: none !important;
878 }
879
880 /* Basic Group With Disabled */
881
882 .ui.basic.buttons .ui.disabled.button {
883 border-color: rgba(34, 36, 38, 0.5);
884 }
885
886 /*******************************
887 Types
888 *******************************/
889
890 /*-------------------
891 Animated
892 --------------------*/
893
894 .ui.animated.button {
895 position: relative;
896 overflow: hidden;
897 padding-right: 0em !important;
898 vertical-align: middle;
899 z-index: 1;
900 }
901
902 .ui.animated.button .content {
903 will-change: transform, opacity;
904 }
905
906 .ui.animated.button .visible.content {
907 position: relative;
908 margin-right: 1.5em;
909 }
910
911 .ui.animated.button .hidden.content {
912 position: absolute;
913 width: 100%;
914 }
915
916 /* Horizontal */
917
918 .ui.animated.button .visible.content,
919 .ui.animated.button .hidden.content {
920 -webkit-transition: right 0.3s ease 0s;
921 transition: right 0.3s ease 0s;
922 }
923
924 .ui.animated.button .visible.content {
925 left: auto;
926 right: 0%;
927 }
928
929 .ui.animated.button .hidden.content {
930 top: 50%;
931 left: auto;
932 right: -100%;
933 margin-top: -0.5em;
934 }
935
936 .ui.animated.button:focus .visible.content,
937 .ui.animated.button:hover .visible.content {
938 left: auto;
939 right: 200%;
940 }
941
942 .ui.animated.button:focus .hidden.content,
943 .ui.animated.button:hover .hidden.content {
944 left: auto;
945 right: 0%;
946 }
947
948 /* Vertical */
949
950 .ui.vertical.animated.button .visible.content,
951 .ui.vertical.animated.button .hidden.content {
952 -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease;
953 transition: top 0.3s ease, -webkit-transform 0.3s ease;
954 transition: top 0.3s ease, transform 0.3s ease;
955 transition: top 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
956 }
957
958 .ui.vertical.animated.button .visible.content {
959 -webkit-transform: translateY(0%);
960 transform: translateY(0%);
961 right: auto;
962 }
963
964 .ui.vertical.animated.button .hidden.content {
965 top: -50%;
966 left: 0%;
967 right: auto;
968 }
969
970 .ui.vertical.animated.button:focus .visible.content,
971 .ui.vertical.animated.button:hover .visible.content {
972 -webkit-transform: translateY(200%);
973 transform: translateY(200%);
974 right: auto;
975 }
976
977 .ui.vertical.animated.button:focus .hidden.content,
978 .ui.vertical.animated.button:hover .hidden.content {
979 top: 50%;
980 right: auto;
981 }
982
983 /* Fade */
984
985 .ui.fade.animated.button .visible.content,
986 .ui.fade.animated.button .hidden.content {
987 -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
988 transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
989 transition: opacity 0.3s ease, transform 0.3s ease;
990 transition: opacity 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
991 }
992
993 .ui.fade.animated.button .visible.content {
994 left: auto;
995 right: auto;
996 opacity: 1;
997 -webkit-transform: scale(1);
998 transform: scale(1);
999 }
1000
1001 .ui.fade.animated.button .hidden.content {
1002 opacity: 0;
1003 left: 0%;
1004 right: auto;
1005 -webkit-transform: scale(1.5);
1006 transform: scale(1.5);
1007 }
1008
1009 .ui.fade.animated.button:focus .visible.content,
1010 .ui.fade.animated.button:hover .visible.content {
1011 left: auto;
1012 right: auto;
1013 opacity: 0;
1014 -webkit-transform: scale(0.75);
1015 transform: scale(0.75);
1016 }
1017
1018 .ui.fade.animated.button:focus .hidden.content,
1019 .ui.fade.animated.button:hover .hidden.content {
1020 left: 0%;
1021 right: auto;
1022 opacity: 1;
1023 -webkit-transform: scale(1);
1024 transform: scale(1);
1025 }
1026
1027 /*-------------------
1028 Inverted
1029 --------------------*/
1030
1031 .ui.inverted.button {
1032 box-shadow: 0px 0px 0px 2px #FFFFFF inset !important;
1033 background: transparent none;
1034 color: #FFFFFF;
1035 text-shadow: none !important;
1036 }
1037
1038 /* Group */
1039
1040 .ui.inverted.buttons .button {
1041 margin: 0px 0px 0px -2px;
1042 }
1043
1044 .ui.inverted.buttons .button:first-child {
1045 margin-left: 0em;
1046 }
1047
1048 .ui.inverted.vertical.buttons .button {
1049 margin: 0px 0px -2px 0px;
1050 }
1051
1052 .ui.inverted.vertical.buttons .button:first-child {
1053 margin-top: 0em;
1054 }
1055
1056 /* States */
1057
1058 /* Hover */
1059
1060 .ui.inverted.button:hover {
1061 background: #FFFFFF;
1062 box-shadow: 0px 0px 0px 2px #FFFFFF inset !important;
1063 color: rgba(0, 0, 0, 0.8);
1064 }
1065
1066 /* Active / Focus */
1067
1068 .ui.inverted.button:focus,
1069 .ui.inverted.button.active {
1070 background: #FFFFFF;
1071 box-shadow: 0px 0px 0px 2px #FFFFFF inset !important;
1072 color: rgba(0, 0, 0, 0.8);
1073 }
1074
1075 /* Active Focus */
1076
1077 .ui.inverted.button.active:focus {
1078 background: #DCDDDE;
1079 box-shadow: 0px 0px 0px 2px #DCDDDE inset !important;
1080 color: rgba(0, 0, 0, 0.8);
1081 }
1082
1083 /*-------------------
1084 Labeled Button
1085 --------------------*/
1086
1087 .ui.labeled.button:not(.icon) {
1088 display: -webkit-inline-box;
1089 display: -ms-inline-flexbox;
1090 display: inline-flex;
1091 -webkit-box-orient: horizontal;
1092 -webkit-box-direction: normal;
1093 -ms-flex-direction: row;
1094 flex-direction: row;
1095 background: none !important;
1096 padding: 0px !important;
1097 border: none !important;
1098 box-shadow: none !important;
1099 }
1100
1101 .ui.labeled.button > .button {
1102 margin: 0px;
1103 }
1104
1105 .ui.labeled.button > .label {
1106 display: -webkit-box;
1107 display: -ms-flexbox;
1108 display: flex;
1109 -webkit-box-align: center;
1110 -ms-flex-align: center;
1111 align-items: center;
1112 margin: 0px 0px 0px -1px !important;
1113 padding: '';
1114 font-size: 1em;
1115 border-color: rgba(34, 36, 38, 0.15);
1116 }
1117
1118 /* Tag */
1119
1120 .ui.labeled.button > .tag.label:before {
1121 width: 1.85em;
1122 height: 1.85em;
1123 }
1124
1125 /* Right */
1126
1127 .ui.labeled.button:not([class*="left labeled"]) > .button {
1128 border-top-right-radius: 0px;
1129 border-bottom-right-radius: 0px;
1130 }
1131
1132 .ui.labeled.button:not([class*="left labeled"]) > .label {
1133 border-top-left-radius: 0px;
1134 border-bottom-left-radius: 0px;
1135 }
1136
1137 /* Left Side */
1138
1139 .ui[class*="left labeled"].button > .button {
1140 border-top-left-radius: 0px;
1141 border-bottom-left-radius: 0px;
1142 }
1143
1144 .ui[class*="left labeled"].button > .label {
1145 border-top-right-radius: 0px;
1146 border-bottom-right-radius: 0px;
1147 }
1148
1149 /*-------------------
1150 Social
1151 --------------------*/
1152
1153 /* Facebook */
1154
1155 .ui.facebook.button {
1156 background-color: #3B5998;
1157 color: #FFFFFF;
1158 text-shadow: none;
1159 background-image: none;
1160 box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
1161 }
1162
1163 .ui.facebook.button:hover {
1164 background-color: #304d8a;
1165 color: #FFFFFF;
1166 text-shadow: none;
1167 }
1168
1169 .ui.facebook.button:active {
1170 background-color: #2d4373;
1171 color: #FFFFFF;
1172 text-shadow: none;
1173 }
1174
1175 /* Twitter */
1176
1177 .ui.twitter.button {
1178 background-color: #55ACEE;
1179 color: #FFFFFF;
1180 text-shadow: none;
1181 background-image: none;
1182 box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
1183 }
1184
1185 .ui.twitter.button:hover {
1186 background-color: #35a2f4;
1187 color: #FFFFFF;
1188 text-shadow: none;
1189 }
1190
1191 .ui.twitter.button:active {
1192 background-color: #2795e9;
1193 color: #FFFFFF;
1194 text-shadow: none;
1195 }
1196
1197 /* Google Plus */
1198
1199 .ui.google.plus.button {
1200 background-color: #DD4B39;
1201 color: #FFFFFF;
1202 text-shadow: none;
1203 background-image: none;
1204 box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
1205 }
1206
1207 .ui.google.plus.button:hover {
1208 background-color: #e0321c;
1209 color: #FFFFFF;
1210 text-shadow: none;
1211 }
1212
1213 .ui.google.plus.button:active {
1214 background-color: #c23321;
1215 color: #FFFFFF;
1216 text-shadow: none;
1217 }
1218
1219 /* Linked In */
1220
1221 .ui.linkedin.button {
1222 background-color: #1F88BE;
1223 color: #FFFFFF;
1224 text-shadow: none;
1225 }
1226
1227 .ui.linkedin.button:hover {
1228 background-color: #147baf;
1229 color: #FFFFFF;
1230 text-shadow: none;
1231 }
1232
1233 .ui.linkedin.button:active {
1234 background-color: #186992;
1235 color: #FFFFFF;
1236 text-shadow: none;
1237 }
1238
1239 /* YouTube */
1240
1241 .ui.youtube.button {
1242 background-color: #CC181E;
1243 color: #FFFFFF;
1244 text-shadow: none;
1245 background-image: none;
1246 box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
1247 }
1248
1249 .ui.youtube.button:hover {
1250 background-color: #bd0d13;
1251 color: #FFFFFF;
1252 text-shadow: none;
1253 }
1254
1255 .ui.youtube.button:active {
1256 background-color: #9e1317;
1257 color: #FFFFFF;
1258 text-shadow: none;
1259 }
1260
1261 /* Instagram */
1262
1263 .ui.instagram.button {
1264 background-color: #49769C;
1265 color: #FFFFFF;
1266 text-shadow: none;
1267 background-image: none;
1268 box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
1269 }
1270
1271 .ui.instagram.button:hover {
1272 background-color: #3d698e;
1273 color: #FFFFFF;
1274 text-shadow: none;
1275 }
1276
1277 .ui.instagram.button:active {
1278 background-color: #395c79;
1279 color: #FFFFFF;
1280 text-shadow: none;
1281 }
1282
1283 /* Pinterest */
1284
1285 .ui.pinterest.button {
1286 background-color: #BD081C;
1287 color: #FFFFFF;
1288 text-shadow: none;
1289 background-image: none;
1290 box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
1291 }
1292
1293 .ui.pinterest.button:hover {
1294 background-color: #ac0013;
1295 color: #FFFFFF;
1296 text-shadow: none;
1297 }
1298
1299 .ui.pinterest.button:active {
1300 background-color: #8c0615;
1301 color: #FFFFFF;
1302 text-shadow: none;
1303 }
1304
1305 /* VK */
1306
1307 .ui.vk.button {
1308 background-color: #4D7198;
1309 color: #FFFFFF;
1310 background-image: none;
1311 box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
1312 }
1313
1314 .ui.vk.button:hover {
1315 background-color: #41648a;
1316 color: #FFFFFF;
1317 }
1318
1319 .ui.vk.button:active {
1320 background-color: #3c5876;
1321 color: #FFFFFF;
1322 }
1323
1324 /*--------------
1325 Icon
1326 ---------------*/
1327
1328 .ui.button > .icon:not(.button) {
1329 height: 0.85714286em;
1330 opacity: 0.8;
1331 margin: 0em 0.42857143em 0em -0.21428571em;
1332 -webkit-transition: opacity 0.1s ease;
1333 transition: opacity 0.1s ease;
1334 vertical-align: '';
1335 color: '';
1336 }
1337
1338 .ui.button:not(.icon) > .icon:not(.button):not(.dropdown) {
1339 margin: 0em 0.42857143em 0em -0.21428571em;
1340 }
1341
1342 .ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) {
1343 margin: 0em -0.21428571em 0em 0.42857143em;
1344 }
1345
1346 /*******************************
1347 Variations
1348 *******************************/
1349
1350 /*-------------------
1351 Floated
1352 --------------------*/
1353
1354 .ui[class*="left floated"].buttons,
1355 .ui[class*="left floated"].button {
1356 float: left;
1357 margin-left: 0em;
1358 margin-right: 0.25em;
1359 }
1360
1361 .ui[class*="right floated"].buttons,
1362 .ui[class*="right floated"].button {
1363 float: right;
1364 margin-right: 0em;
1365 margin-left: 0.25em;
1366 }
1367
1368 /*-------------------
1369 Compact
1370 --------------------*/
1371
1372 .ui.compact.buttons .button,
1373 .ui.compact.button {
1374 padding: 0.58928571em 1.125em 0.58928571em;
1375 }
1376
1377 .ui.compact.icon.buttons .button,
1378 .ui.compact.icon.button {
1379 padding: 0.58928571em 0.58928571em 0.58928571em;
1380 }
1381
1382 .ui.compact.labeled.icon.buttons .button,
1383 .ui.compact.labeled.icon.button {
1384 padding: 0.58928571em 3.69642857em 0.58928571em;
1385 }
1386
1387 /*-------------------
1388 Sizes
1389 --------------------*/
1390
1391 .ui.mini.buttons .button,
1392 .ui.mini.buttons .or,
1393 .ui.mini.button {
1394 font-size: 0.78571429rem;
1395 }
1396
1397 .ui.tiny.buttons .button,
1398 .ui.tiny.buttons .or,
1399 .ui.tiny.button {
1400 font-size: 0.85714286rem;
1401 }
1402
1403 .ui.small.buttons .button,
1404 .ui.small.buttons .or,
1405 .ui.small.button {
1406 font-size: 0.92857143rem;
1407 }
1408
1409 .ui.buttons .button,
1410 .ui.buttons .or,
1411 .ui.button {
1412 font-size: 1rem;
1413 }
1414
1415 .ui.large.buttons .button,
1416 .ui.large.buttons .or,
1417 .ui.large.button {
1418 font-size: 1.14285714rem;
1419 }
1420
1421 .ui.big.buttons .button,
1422 .ui.big.buttons .or,
1423 .ui.big.button {
1424 font-size: 1.28571429rem;
1425 }
1426
1427 .ui.huge.buttons .button,
1428 .ui.huge.buttons .or,
1429 .ui.huge.button {
1430 font-size: 1.42857143rem;
1431 }
1432
1433 .ui.massive.buttons .button,
1434 .ui.massive.buttons .or,
1435 .ui.massive.button {
1436 font-size: 1.71428571rem;
1437 }
1438
1439 /*--------------
1440 Icon Only
1441 ---------------*/
1442
1443 .ui.icon.buttons .button,
1444 .ui.icon.button {
1445 padding: 0.78571429em 0.78571429em 0.78571429em;
1446 }
1447
1448 .ui.icon.buttons .button > .icon,
1449 .ui.icon.button > .icon {
1450 opacity: 0.9;
1451 margin: 0em !important;
1452 vertical-align: top;
1453 }
1454
1455 /*-------------------
1456 Basic
1457 --------------------*/
1458
1459 .ui.basic.buttons .button,
1460 .ui.basic.button {
1461 background: transparent none !important;
1462 color: rgba(0, 0, 0, 0.6) !important;
1463 font-weight: normal;
1464 border-radius: 0.28571429rem;
1465 text-transform: none;
1466 text-shadow: none !important;
1467 box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
1468 }
1469
1470 .ui.basic.buttons {
1471 box-shadow: none;
1472 border: 1px solid rgba(34, 36, 38, 0.15);
1473 border-radius: 0.28571429rem;
1474 }
1475
1476 .ui.basic.buttons .button {
1477 border-radius: 0em;
1478 }
1479
1480 .ui.basic.buttons .button:hover,
1481 .ui.basic.button:hover {
1482 background: #FFFFFF !important;
1483 color: rgba(0, 0, 0, 0.8) !important;
1484 box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset;
1485 }
1486
1487 .ui.basic.buttons .button:focus,
1488 .ui.basic.button:focus {
1489 background: #FFFFFF !important;
1490 color: rgba(0, 0, 0, 0.8) !important;
1491 box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset;
1492 }
1493
1494 .ui.basic.buttons .button:active,
1495 .ui.basic.button:active {
1496 background: #F8F8F8 !important;
1497 color: rgba(0, 0, 0, 0.9) !important;
1498 box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 4px 0px rgba(34, 36, 38, 0.15) inset;
1499 }
1500
1501 .ui.basic.buttons .active.button,
1502 .ui.basic.active.button {
1503 background: rgba(0, 0, 0, 0.05) !important;
1504 box-shadow: '' !important;
1505 color: rgba(0, 0, 0, 0.95);
1506 }
1507
1508 .ui.basic.buttons .active.button:hover,
1509 .ui.basic.active.button:hover {
1510 background-color: rgba(0, 0, 0, 0.05);
1511 }
1512
1513 /* Vertical */
1514
1515 .ui.basic.buttons .button:hover {
1516 box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset inset;
1517 }
1518
1519 .ui.basic.buttons .button:active {
1520 box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 4px 0px rgba(34, 36, 38, 0.15) inset inset;
1521 }
1522
1523 .ui.basic.buttons .active.button {
1524 box-shadow: '' !important;
1525 }
1526
1527 /* Standard Basic Inverted */
1528
1529 .ui.basic.inverted.buttons .button,
1530 .ui.basic.inverted.button {
1531 background-color: transparent !important;
1532 color: #F9FAFB !important;
1533 box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
1534 }
1535
1536 .ui.basic.inverted.buttons .button:hover,
1537 .ui.basic.inverted.button:hover {
1538 color: #FFFFFF !important;
1539 box-shadow: 0px 0px 0px 2px #ffffff inset !important;
1540 }
1541
1542 .ui.basic.inverted.buttons .button:focus,
1543 .ui.basic.inverted.button:focus {
1544 color: #FFFFFF !important;
1545 box-shadow: 0px 0px 0px 2px #ffffff inset !important;
1546 }
1547
1548 .ui.basic.inverted.buttons .button:active,
1549 .ui.basic.inverted.button:active {
1550 background-color: rgba(255, 255, 255, 0.08) !important;
1551 color: #FFFFFF !important;
1552 box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.9) inset !important;
1553 }
1554
1555 .ui.basic.inverted.buttons .active.button,
1556 .ui.basic.inverted.active.button {
1557 background-color: rgba(255, 255, 255, 0.08);
1558 color: #FFFFFF;
1559 text-shadow: none;
1560 box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.7) inset;
1561 }
1562
1563 .ui.basic.inverted.buttons .active.button:hover,
1564 .ui.basic.inverted.active.button:hover {
1565 background-color: rgba(255, 255, 255, 0.15);
1566 box-shadow: 0px 0px 0px 2px #ffffff inset !important;
1567 }
1568
1569 /* Basic Group */
1570
1571 .ui.basic.buttons .button {
1572 border-left: 1px solid rgba(34, 36, 38, 0.15);
1573 box-shadow: none;
1574 }
1575
1576 .ui.basic.vertical.buttons .button {
1577 border-left: none;
1578 }
1579
1580 .ui.basic.vertical.buttons .button {
1581 border-left-width: 0px;
1582 border-top: 1px solid rgba(34, 36, 38, 0.15);
1583 }
1584
1585 .ui.basic.vertical.buttons .button:first-child {
1586 border-top-width: 0px;
1587 }
1588
1589 /*--------------
1590 Labeled Icon
1591 ---------------*/
1592
1593 .ui.labeled.icon.buttons .button,
1594 .ui.labeled.icon.button {
1595 position: relative;
1596 padding-left: 4.07142857em !important;
1597 padding-right: 1.5em !important;
1598 }
1599
1600 /* Left Labeled */
1601
1602 .ui.labeled.icon.buttons > .button > .icon,
1603 .ui.labeled.icon.button > .icon {
1604 position: absolute;
1605 height: 100%;
1606 line-height: 1;
1607 border-radius: 0px;
1608 border-top-left-radius: inherit;
1609 border-bottom-left-radius: inherit;
1610 text-align: center;
1611 margin: 0em;
1612 width: 2.57142857em;
1613 background-color: rgba(0, 0, 0, 0.05);
1614 color: '';
1615 box-shadow: -1px 0px 0px 0px transparent inset;
1616 }
1617
1618 /* Left Labeled */
1619
1620 .ui.labeled.icon.buttons > .button > .icon,
1621 .ui.labeled.icon.button > .icon {
1622 top: 0em;
1623 left: 0em;
1624 }
1625
1626 /* Right Labeled */
1627
1628 .ui[class*="right labeled"].icon.button {
1629 padding-right: 4.07142857em !important;
1630 padding-left: 1.5em !important;
1631 }
1632
1633 .ui[class*="right labeled"].icon.button > .icon {
1634 left: auto;
1635 right: 0em;
1636 border-radius: 0px;
1637 border-top-right-radius: inherit;
1638 border-bottom-right-radius: inherit;
1639 box-shadow: 1px 0px 0px 0px transparent inset;
1640 }
1641
1642 .ui.labeled.icon.buttons > .button > .icon:before,
1643 .ui.labeled.icon.button > .icon:before,
1644 .ui.labeled.icon.buttons > .button > .icon:after,
1645 .ui.labeled.icon.button > .icon:after {
1646 display: block;
1647 position: absolute;
1648 width: 100%;
1649 top: 50%;
1650 text-align: center;
1651 -webkit-transform: translateY(-50%);
1652 transform: translateY(-50%);
1653 }
1654
1655 .ui.labeled.icon.buttons .button > .icon {
1656 border-radius: 0em;
1657 }
1658
1659 .ui.labeled.icon.buttons .button:first-child > .icon {
1660 border-top-left-radius: 0.28571429rem;
1661 border-bottom-left-radius: 0.28571429rem;
1662 }
1663
1664 .ui.labeled.icon.buttons .button:last-child > .icon {
1665 border-top-right-radius: 0.28571429rem;
1666 border-bottom-right-radius: 0.28571429rem;
1667 }
1668
1669 .ui.vertical.labeled.icon.buttons .button:first-child > .icon {
1670 border-radius: 0em;
1671 border-top-left-radius: 0.28571429rem;
1672 }
1673
1674 .ui.vertical.labeled.icon.buttons .button:last-child > .icon {
1675 border-radius: 0em;
1676 border-bottom-left-radius: 0.28571429rem;
1677 }
1678
1679 /* Fluid Labeled */
1680
1681 .ui.fluid[class*="left labeled"].icon.button,
1682 .ui.fluid[class*="right labeled"].icon.button {
1683 padding-left: 1.5em !important;
1684 padding-right: 1.5em !important;
1685 }
1686
1687 /*--------------
1688 Toggle
1689 ---------------*/
1690
1691 /* Toggle (Modifies active state to give affordances) */
1692
1693 .ui.toggle.buttons .active.button,
1694 .ui.buttons .button.toggle.active,
1695 .ui.button.toggle.active {
1696 background-color: #21BA45 !important;
1697 box-shadow: none !important;
1698 text-shadow: none;
1699 color: #FFFFFF !important;
1700 }
1701
1702 .ui.button.toggle.active:hover {
1703 background-color: #16ab39 !important;
1704 text-shadow: none;
1705 color: #FFFFFF !important;
1706 }
1707
1708 /*--------------
1709 Circular
1710 ---------------*/
1711
1712 .ui.circular.button {
1713 border-radius: 10em;
1714 }
1715
1716 .ui.circular.button > .icon {
1717 width: 1em;
1718 vertical-align: baseline;
1719 }
1720
1721 /*-------------------
1722 Or Buttons
1723 --------------------*/
1724
1725 .ui.buttons .or {
1726 position: relative;
1727 width: 0.3em;
1728 height: 2.57142857em;
1729 z-index: 3;
1730 }
1731
1732 .ui.buttons .or:before {
1733 position: absolute;
1734 text-align: center;
1735 border-radius: 500rem;
1736 content: 'or';
1737 top: 50%;
1738 left: 50%;
1739 background-color: #FFFFFF;
1740 text-shadow: none;
1741 margin-top: -0.89285714em;
1742 margin-left: -0.89285714em;
1743 width: 1.78571429em;
1744 height: 1.78571429em;
1745 line-height: 1.78571429em;
1746 color: rgba(0, 0, 0, 0.4);
1747 font-style: normal;
1748 font-weight: bold;
1749 box-shadow: 0px 0px 0px 1px transparent inset;
1750 }
1751
1752 .ui.buttons .or[data-text]:before {
1753 content: attr(data-text);
1754 }
1755
1756 /* Fluid Or */
1757
1758 .ui.fluid.buttons .or {
1759 width: 0em !important;
1760 }
1761
1762 .ui.fluid.buttons .or:after {
1763 display: none;
1764 }
1765
1766 /*-------------------
1767 Attached
1768 --------------------*/
1769
1770 /* Singular */
1771
1772 .ui.attached.button {
1773 position: relative;
1774 display: block;
1775 margin: 0em;
1776 border-radius: 0em;
1777 box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) !important;
1778 }
1779
1780 /* Top / Bottom */
1781
1782 .ui.attached.top.button {
1783 border-radius: 0.28571429rem 0.28571429rem 0em 0em;
1784 }
1785
1786 .ui.attached.bottom.button {
1787 border-radius: 0em 0em 0.28571429rem 0.28571429rem;
1788 }
1789
1790 /* Left / Right */
1791
1792 .ui.left.attached.button {
1793 display: inline-block;
1794 border-left: none;
1795 text-align: right;
1796 padding-right: 0.75em;
1797 border-radius: 0.28571429rem 0em 0em 0.28571429rem;
1798 }
1799
1800 .ui.right.attached.button {
1801 display: inline-block;
1802 text-align: left;
1803 padding-left: 0.75em;
1804 border-radius: 0em 0.28571429rem 0.28571429rem 0em;
1805 }
1806
1807 /* Plural */
1808
1809 .ui.attached.buttons {
1810 position: relative;
1811 display: -webkit-box;
1812 display: -ms-flexbox;
1813 display: flex;
1814 border-radius: 0em;
1815 width: auto !important;
1816 z-index: 2;
1817 margin-left: -1px;
1818 margin-right: -1px;
1819 }
1820
1821 .ui.attached.buttons .button {
1822 margin: 0em;
1823 }
1824
1825 .ui.attached.buttons .button:first-child {
1826 border-radius: 0em;
1827 }
1828
1829 .ui.attached.buttons .button:last-child {
1830 border-radius: 0em;
1831 }
1832
1833 /* Top / Bottom */
1834
1835 .ui[class*="top attached"].buttons {
1836 margin-bottom: -1px;
1837 border-radius: 0.28571429rem 0.28571429rem 0em 0em;
1838 }
1839
1840 .ui[class*="top attached"].buttons .button:first-child {
1841 border-radius: 0.28571429rem 0em 0em 0em;
1842 }
1843
1844 .ui[class*="top attached"].buttons .button:last-child {
1845 border-radius: 0em 0.28571429rem 0em 0em;
1846 }
1847
1848 .ui[class*="bottom attached"].buttons {
1849 margin-top: -1px;
1850 border-radius: 0em 0em 0.28571429rem 0.28571429rem;
1851 }
1852
1853 .ui[class*="bottom attached"].buttons .button:first-child {
1854 border-radius: 0em 0em 0em 0.28571429rem;
1855 }
1856
1857 .ui[class*="bottom attached"].buttons .button:last-child {
1858 border-radius: 0em 0em 0.28571429rem 0em;
1859 }
1860
1861 /* Left / Right */
1862
1863 .ui[class*="left attached"].buttons {
1864 display: -webkit-inline-box;
1865 display: -ms-inline-flexbox;
1866 display: inline-flex;
1867 margin-right: 0em;
1868 margin-left: -1px;
1869 border-radius: 0em 0.28571429rem 0.28571429rem 0em;
1870 }
1871
1872 .ui[class*="left attached"].buttons .button:first-child {
1873 margin-left: -1px;
1874 border-radius: 0em 0.28571429rem 0em 0em;
1875 }
1876
1877 .ui[class*="left attached"].buttons .button:last-child {
1878 margin-left: -1px;
1879 border-radius: 0em 0em 0.28571429rem 0em;
1880 }
1881
1882 .ui[class*="right attached"].buttons {
1883 display: -webkit-inline-box;
1884 display: -ms-inline-flexbox;
1885 display: inline-flex;
1886 margin-left: 0em;
1887 margin-right: -1px;
1888 border-radius: 0.28571429rem 0em 0em 0.28571429rem;
1889 }
1890
1891 .ui[class*="right attached"].buttons .button:first-child {
1892 margin-left: -1px;
1893 border-radius: 0.28571429rem 0em 0em 0em;
1894 }
1895
1896 .ui[class*="right attached"].buttons .button:last-child {
1897 margin-left: -1px;
1898 border-radius: 0em 0em 0em 0.28571429rem;
1899 }
1900
1901 /*-------------------
1902 Fluid
1903 --------------------*/
1904
1905 .ui.fluid.buttons,
1906 .ui.fluid.button {
1907 width: 100%;
1908 }
1909
1910 .ui.fluid.button {
1911 display: block;
1912 }
1913
1914 .ui.two.buttons {
1915 width: 100%;
1916 }
1917
1918 .ui.two.buttons > .button {
1919 width: 50%;
1920 }
1921
1922 .ui.three.buttons {
1923 width: 100%;
1924 }
1925
1926 .ui.three.buttons > .button {
1927 width: 33.333%;
1928 }
1929
1930 .ui.four.buttons {
1931 width: 100%;
1932 }
1933
1934 .ui.four.buttons > .button {
1935 width: 25%;
1936 }
1937
1938 .ui.five.buttons {
1939 width: 100%;
1940 }
1941
1942 .ui.five.buttons > .button {
1943 width: 20%;
1944 }
1945
1946 .ui.six.buttons {
1947 width: 100%;
1948 }
1949
1950 .ui.six.buttons > .button {
1951 width: 16.666%;
1952 }
1953
1954 .ui.seven.buttons {
1955 width: 100%;
1956 }
1957
1958 .ui.seven.buttons > .button {
1959 width: 14.285%;
1960 }
1961
1962 .ui.eight.buttons {
1963 width: 100%;
1964 }
1965
1966 .ui.eight.buttons > .button {
1967 width: 12.500%;
1968 }
1969
1970 .ui.nine.buttons {
1971 width: 100%;
1972 }
1973
1974 .ui.nine.buttons > .button {
1975 width: 11.11%;
1976 }
1977
1978 .ui.ten.buttons {
1979 width: 100%;
1980 }
1981
1982 .ui.ten.buttons > .button {
1983 width: 10%;
1984 }
1985
1986 .ui.eleven.buttons {
1987 width: 100%;
1988 }
1989
1990 .ui.eleven.buttons > .button {
1991 width: 9.09%;
1992 }
1993
1994 .ui.twelve.buttons {
1995 width: 100%;
1996 }
1997
1998 .ui.twelve.buttons > .button {
1999 width: 8.3333%;
2000 }
2001
2002 /* Fluid Vertical Buttons */
2003
2004 .ui.fluid.vertical.buttons,
2005 .ui.fluid.vertical.buttons > .button {
2006 display: -webkit-box;
2007 display: -ms-flexbox;
2008 display: flex;
2009 width: auto;
2010 }
2011
2012 .ui.two.vertical.buttons > .button {
2013 height: 50%;
2014 }
2015
2016 .ui.three.vertical.buttons > .button {
2017 height: 33.333%;
2018 }
2019
2020 .ui.four.vertical.buttons > .button {
2021 height: 25%;
2022 }
2023
2024 .ui.five.vertical.buttons > .button {
2025 height: 20%;
2026 }
2027
2028 .ui.six.vertical.buttons > .button {
2029 height: 16.666%;
2030 }
2031
2032 .ui.seven.vertical.buttons > .button {
2033 height: 14.285%;
2034 }
2035
2036 .ui.eight.vertical.buttons > .button {
2037 height: 12.500%;
2038 }
2039
2040 .ui.nine.vertical.buttons > .button {
2041 height: 11.11%;
2042 }
2043
2044 .ui.ten.vertical.buttons > .button {
2045 height: 10%;
2046 }
2047
2048 .ui.eleven.vertical.buttons > .button {
2049 height: 9.09%;
2050 }
2051
2052 .ui.twelve.vertical.buttons > .button {
2053 height: 8.3333%;
2054 }
2055
2056 /*-------------------
2057 Colors
2058 --------------------*/
2059
2060 /*--- Black ---*/
2061
2062 .ui.black.buttons .button,
2063 .ui.black.button {
2064 background-color: #1B1C1D;
2065 color: #FFFFFF;
2066 text-shadow: none;
2067 background-image: none;
2068 }
2069
2070 .ui.black.button {
2071 box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
2072 }
2073
2074 .ui.black.buttons .button:hover,
2075 .ui.black.button:hover {
2076 background-color: #27292a;
2077 color: #FFFFFF;
2078 text-shadow: none;
2079 }
2080
2081 .ui.black.buttons .button:focus,
2082 .ui.black.button:focus {
2083 background-color: #2f3032;
2084 color: #FFFFFF;
2085 text-shadow: none;
2086 }
2087
2088 .ui.black.buttons .button:active,
2089 .ui.black.button:active {
2090 background-color: #343637;
2091 color: #FFFFFF;
2092 text-shadow: none;
2093 }
2094
2095 .ui.black.buttons .active.button,
2096 .ui.black.buttons .active.button:active,
2097 .ui.black.active.button,
2098 .ui.black.button .active.button:active {
2099 background-color: #0f0f10;
2100 color: #FFFFFF;
2101 text-shadow: none;
2102 }
2103
2104 /* Basic */
2105
2106 .ui.basic.black.buttons .button,
2107 .ui.basic.black.button {
2108 box-shadow: 0px 0px 0px 1px #1B1C1D inset !important;
2109 color: #1B1C1D !important;
2110 }
2111
2112 .ui.basic.black.buttons .button:hover,
2113 .ui.basic.black.button:hover {
2114 background: transparent !important;
2115 box-shadow: 0px 0px 0px 1px #27292a inset !important;
2116 color: #27292a !important;
2117 }
2118
2119 .ui.basic.black.buttons .button:focus,
2120 .ui.basic.black.button:focus {
2121 background: transparent !important;
2122 box-shadow: 0px 0px 0px 1px #2f3032 inset !important;
2123 color: #27292a !important;
2124 }
2125
2126 .ui.basic.black.buttons .active.button,
2127 .ui.basic.black.active.button {
2128 background: transparent !important;
2129 box-shadow: 0px 0px 0px 1px #0f0f10 inset !important;
2130 color: #343637 !important;
2131 }
2132
2133 .ui.basic.black.buttons .button:active,
2134 .ui.basic.black.button:active {
2135 box-shadow: 0px 0px 0px 1px #343637 inset !important;
2136 color: #343637 !important;
2137 }
2138
2139 .ui.buttons:not(.vertical) > .basic.black.button:not(:first-child) {
2140 margin-left: -1px;
2141 }
2142
2143 /* Inverted */
2144
2145 .ui.inverted.black.buttons .button,
2146 .ui.inverted.black.button {
2147 background-color: transparent;
2148 box-shadow: 0px 0px 0px 2px #D4D4D5 inset !important;
2149 color: #FFFFFF;
2150 }
2151
2152 .ui.inverted.black.buttons .button:hover,
2153 .ui.inverted.black.button:hover,
2154 .ui.inverted.black.buttons .button:focus,
2155 .ui.inverted.black.button:focus,
2156 .ui.inverted.black.buttons .button.active,
2157 .ui.inverted.black.button.active,
2158 .ui.inverted.black.buttons .button:active,
2159 .ui.inverted.black.button:active {
2160 box-shadow: none !important;
2161 color: #FFFFFF;
2162 }
2163
2164 .ui.inverted.black.buttons .button:hover,
2165 .ui.inverted.black.button:hover {
2166 background-color: #000000;
2167 }
2168
2169 .ui.inverted.black.buttons .button:focus,
2170 .ui.inverted.black.button:focus {
2171 background-color: #000000;
2172 }
2173
2174 .ui.inverted.black.buttons .active.button,
2175 .ui.inverted.black.active.button {
2176 background-color: #000000;
2177 }
2178
2179 .ui.inverted.black.buttons .button:active,
2180 .ui.inverted.black.button:active {
2181 background-color: #000000;
2182 }
2183
2184 /* Inverted Basic */
2185
2186 .ui.inverted.black.basic.buttons .button,
2187 .ui.inverted.black.buttons .basic.button,
2188 .ui.inverted.black.basic.button {
2189 background-color: transparent;
2190 box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
2191 color: #FFFFFF !important;
2192 }
2193
2194 .ui.inverted.black.basic.buttons .button:hover,
2195 .ui.inverted.black.buttons .basic.button:hover,
2196 .ui.inverted.black.basic.button:hover {
2197 box-shadow: 0px 0px 0px 2px #000000 inset !important;
2198 color: #FFFFFF !important;
2199 }
2200
2201 .ui.inverted.black.basic.buttons .button:focus,
2202 .ui.inverted.black.basic.buttons .button:focus,
2203 .ui.inverted.black.basic.button:focus {
2204 box-shadow: 0px 0px 0px 2px #000000 inset !important;
2205 color: #545454 !important;
2206 }
2207
2208 .ui.inverted.black.basic.buttons .active.button,
2209 .ui.inverted.black.buttons .basic.active.button,
2210 .ui.inverted.black.basic.active.button {
2211 box-shadow: 0px 0px 0px 2px #000000 inset !important;
2212 color: #FFFFFF !important;
2213 }
2214
2215 .ui.inverted.black.basic.buttons .button:active,
2216 .ui.inverted.black.buttons .basic.button:active,
2217 .ui.inverted.black.basic.button:active {
2218 box-shadow: 0px 0px 0px 2px #000000 inset !important;
2219 color: #FFFFFF !important;
2220 }
2221
2222 /*--- Grey ---*/
2223
2224 .ui.grey.buttons .button,
2225 .ui.grey.button {
2226 background-color: #767676;
2227 color: #FFFFFF;
2228 text-shadow: none;
2229 background-image: none;
2230 }
2231
2232 .ui.grey.button {
2233 box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
2234 }
2235
2236 .ui.grey.buttons .button:hover,
2237 .ui.grey.button:hover {
2238 background-color: #838383;
2239 color: #FFFFFF;
2240 text-shadow: none;
2241 }
2242
2243 .ui.grey.buttons .button:focus,
2244 .ui.grey.button:focus {
2245 background-color: #8a8a8a;
2246 color: #FFFFFF;
2247 text-shadow: none;
2248 }
2249
2250 .ui.grey.buttons .button:active,
2251 .ui.grey.button:active {
2252 background-color: #909090;
2253 color: #FFFFFF;
2254 text-shadow: none;
2255 }
2256
2257 .ui.grey.buttons .active.button,
2258 .ui.grey.buttons .active.button:active,
2259 .ui.grey.active.button,
2260 .ui.grey.button .active.button:active {
2261 background-color: #696969;
2262 color: #FFFFFF;
2263 text-shadow: none;
2264 }
2265
2266 /* Basic */
2267
2268 .ui.basic.grey.buttons .button,
2269 .ui.basic.grey.button {
2270 box-shadow: 0px 0px 0px 1px #767676 inset !important;
2271 color: #767676 !important;
2272 }
2273
2274 .ui.basic.grey.buttons .button:hover,
2275 .ui.basic.grey.button:hover {
2276 background: transparent !important;
2277 box-shadow: 0px 0px 0px 1px #838383 inset !important;
2278 color: #838383 !important;
2279 }
2280
2281 .ui.basic.grey.buttons .button:focus,
2282 .ui.basic.grey.button:focus {
2283 background: transparent !important;
2284 box-shadow: 0px 0px 0px 1px #8a8a8a inset !important;
2285 color: #838383 !important;
2286 }
2287
2288 .ui.basic.grey.buttons .active.button,
2289 .ui.basic.grey.active.button {
2290 background: transparent !important;
2291 box-shadow: 0px 0px 0px 1px #696969 inset !important;
2292 color: #909090 !important;
2293 }
2294
2295 .ui.basic.grey.buttons .button:active,
2296 .ui.basic.grey.button:active {
2297 box-shadow: 0px 0px 0px 1px #909090 inset !important;
2298 color: #909090 !important;
2299 }
2300
2301 .ui.buttons:not(.vertical) > .basic.grey.button:not(:first-child) {
2302 margin-left: -1px;
2303 }
2304
2305 /* Inverted */
2306
2307 .ui.inverted.grey.buttons .button,
2308 .ui.inverted.grey.button {
2309 background-color: transparent;
2310 box-shadow: 0px 0px 0px 2px #D4D4D5 inset !important;
2311 color: #FFFFFF;
2312 }
2313
2314 .ui.inverted.grey.buttons .button:hover,
2315 .ui.inverted.grey.button:hover,
2316 .ui.inverted.grey.buttons .button:focus,
2317 .ui.inverted.grey.button:focus,
2318 .ui.inverted.grey.buttons .button.active,
2319 .ui.inverted.grey.button.active,
2320 .ui.inverted.grey.buttons .button:active,
2321 .ui.inverted.grey.button:active {
2322 box-shadow: none !important;
2323 color: rgba(0, 0, 0, 0.6);
2324 }
2325
2326 .ui.inverted.grey.buttons .button:hover,
2327 .ui.inverted.grey.button:hover {
2328 background-color: #cfd0d2;
2329 }
2330
2331 .ui.inverted.grey.buttons .button:focus,
2332 .ui.inverted.grey.button:focus {
2333 background-color: #c7c9cb;
2334 }
2335
2336 .ui.inverted.grey.buttons .active.button,
2337 .ui.inverted.grey.active.button {
2338 background-color: #cfd0d2;
2339 }
2340
2341 .ui.inverted.grey.buttons .button:active,
2342 .ui.inverted.grey.button:active {
2343 background-color: #c2c4c5;
2344 }
2345
2346 /* Inverted Basic */
2347
2348 .ui.inverted.grey.basic.buttons .button,
2349 .ui.inverted.grey.buttons .basic.button,
2350 .ui.inverted.grey.basic.button {
2351 background-color: transparent;
2352 box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
2353 color: #FFFFFF !important;
2354 }
2355
2356 .ui.inverted.grey.basic.buttons .button:hover,
2357 .ui.inverted.grey.buttons .basic.button:hover,
2358 .ui.inverted.grey.basic.button:hover {
2359 box-shadow: 0px 0px 0px 2px #cfd0d2 inset !important;
2360 color: #FFFFFF !important;
2361 }
2362
2363 .ui.inverted.grey.basic.buttons .button:focus,
2364 .ui.inverted.grey.basic.buttons .button:focus,
2365 .ui.inverted.grey.basic.button:focus {
2366 box-shadow: 0px 0px 0px 2px #c7c9cb inset !important;
2367 color: #DCDDDE !important;
2368 }
2369
2370 .ui.inverted.grey.basic.buttons .active.button,
2371 .ui.inverted.grey.buttons .basic.active.button,
2372 .ui.inverted.grey.basic.active.button {
2373 box-shadow: 0px 0px 0px 2px #cfd0d2 inset !important;
2374 color: #FFFFFF !important;
2375 }
2376
2377 .ui.inverted.grey.basic.buttons .button:active,
2378 .ui.inverted.grey.buttons .basic.button:active,
2379 .ui.inverted.grey.basic.button:active {
2380 box-shadow: 0px 0px 0px 2px #c2c4c5 inset !important;
2381 color: #FFFFFF !important;
2382 }
2383
2384 /*--- Brown ---*/
2385
2386 .ui.brown.buttons .button,
2387 .ui.brown.button {
2388 background-color: #A5673F;
2389 color: #FFFFFF;
2390 text-shadow: none;
2391 background-image: none;
2392 }
2393
2394 .ui.brown.button {
2395 box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
2396 }
2397
2398 .ui.brown.buttons .button:hover,
2399 .ui.brown.button:hover {
2400 background-color: #975b33;
2401 color: #FFFFFF;
2402 text-shadow: none;
2403 }
2404
2405 .ui.brown.buttons .button:focus,
2406 .ui.brown.button:focus {
2407 background-color: #90532b;
2408 color: #FFFFFF;
2409 text-shadow: none;
2410 }
2411
2412 .ui.brown.buttons .button:active,
2413 .ui.brown.button:active {
2414 background-color: #805031;
2415 color: #FFFFFF;
2416 text-shadow: none;
2417 }
2418
2419 .ui.brown.buttons .active.button,
2420 .ui.brown.buttons .active.button:active,
2421 .ui.brown.active.button,
2422 .ui.brown.button .active.button:active {
2423 background-color: #995a31;
2424 color: #FFFFFF;
2425 text-shadow: none;
2426 }
2427
2428 /* Basic */
2429
2430 .ui.basic.brown.buttons .button,
2431 .ui.basic.brown.button {
2432 box-shadow: 0px 0px 0px 1px #A5673F inset !important;
2433 color: #A5673F !important;
2434 }
2435
2436 .ui.basic.brown.buttons .button:hover,
2437 .ui.basic.brown.button:hover {
2438 background: transparent !important;
2439 box-shadow: 0px 0px 0px 1px #975b33 inset !important;
2440 color: #975b33 !important;
2441 }
2442
2443 .ui.basic.brown.buttons .button:focus,
2444 .ui.basic.brown.button:focus {
2445 background: transparent !important;
2446 box-shadow: 0px 0px 0px 1px #90532b inset !important;
2447 color: #975b33 !important;
2448 }
2449
2450 .ui.basic.brown.buttons .active.button,
2451 .ui.basic.brown.active.button {
2452 background: transparent !important;
2453 box-shadow: 0px 0px 0px 1px #995a31 inset !important;
2454 color: #805031 !important;
2455 }
2456
2457 .ui.basic.brown.buttons .button:active,
2458 .ui.basic.brown.button:active {
2459 box-shadow: 0px 0px 0px 1px #805031 inset !important;
2460 color: #805031 !important;
2461 }
2462
2463 .ui.buttons:not(.vertical) > .basic.brown.button:not(:first-child) {
2464 margin-left: -1px;
2465 }
2466
2467 /* Inverted */
2468
2469 .ui.inverted.brown.buttons .button,
2470 .ui.inverted.brown.button {
2471 background-color: transparent;
2472 box-shadow: 0px 0px 0px 2px #D67C1C inset !important;
2473 color: #D67C1C;
2474 }
2475
2476 .ui.inverted.brown.buttons .button:hover,
2477 .ui.inverted.brown.button:hover,
2478 .ui.inverted.brown.buttons .button:focus,
2479 .ui.inverted.brown.button:focus,
2480 .ui.inverted.brown.buttons .button.active,
2481 .ui.inverted.brown.button.active,
2482 .ui.inverted.brown.buttons .button:active,
2483 .ui.inverted.brown.button:active {
2484 box-shadow: none !important;
2485 color: #FFFFFF;
2486 }
2487
2488 .ui.inverted.brown.buttons .button:hover,
2489 .ui.inverted.brown.button:hover {
2490 background-color: #c86f11;
2491 }
2492
2493 .ui.inverted.brown.buttons .button:focus,
2494 .ui.inverted.brown.button:focus {
2495 background-color: #c16808;
2496 }
2497
2498 .ui.inverted.brown.buttons .active.button,
2499 .ui.inverted.brown.active.button {
2500 background-color: #cc6f0d;
2501 }
2502
2503 .ui.inverted.brown.buttons .button:active,
2504 .ui.inverted.brown.button:active {
2505 background-color: #a96216;
2506 }
2507
2508 /* Inverted Basic */
2509
2510 .ui.inverted.brown.basic.buttons .button,
2511 .ui.inverted.brown.buttons .basic.button,
2512 .ui.inverted.brown.basic.button {
2513 background-color: transparent;
2514 box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
2515 color: #FFFFFF !important;
2516 }
2517
2518 .ui.inverted.brown.basic.buttons .button:hover,
2519 .ui.inverted.brown.buttons .basic.button:hover,
2520 .ui.inverted.brown.basic.button:hover {
2521 box-shadow: 0px 0px 0px 2px #c86f11 inset !important;
2522 color: #D67C1C !important;
2523 }
2524
2525 .ui.inverted.brown.basic.buttons .button:focus,
2526 .ui.inverted.brown.basic.buttons .button:focus,
2527 .ui.inverted.brown.basic.button:focus {
2528 box-shadow: 0px 0px 0px 2px #c16808 inset !important;
2529 color: #D67C1C !important;
2530 }
2531
2532 .ui.inverted.brown.basic.buttons .active.button,
2533 .ui.inverted.brown.buttons .basic.active.button,
2534 .ui.inverted.brown.basic.active.button {
2535 box-shadow: 0px 0px 0px 2px #cc6f0d inset !important;
2536 color: #D67C1C !important;
2537 }
2538
2539 .ui.inverted.brown.basic.buttons .button:active,
2540 .ui.inverted.brown.buttons .basic.button:active,
2541 .ui.inverted.brown.basic.button:active {
2542 box-shadow: 0px 0px 0px 2px #a96216 inset !important;
2543 color: #D67C1C !important;
2544 }
2545
2546 /*--- Blue ---*/
2547
2548 .ui.blue.buttons .button,
2549 .ui.blue.button {
2550 background-color: #2185D0;
2551 color: #FFFFFF;
2552 text-shadow: none;
2553 background-image: none;
2554 }
2555
2556 .ui.blue.button {
2557 box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
2558 }
2559
2560 .ui.blue.buttons .button:hover,
2561 .ui.blue.button:hover {
2562 background-color: #1678c2;
2563 color: #FFFFFF;
2564 text-shadow: none;
2565 }
2566
2567 .ui.blue.buttons .button:focus,
2568 .ui.blue.button:focus {
2569 background-color: #0d71bb;
2570 color: #FFFFFF;
2571 text-shadow: none;
2572 }
2573
2574 .ui.blue.buttons .button:active,
2575 .ui.blue.button:active {
2576 background-color: #1a69a4;
2577 color: #FFFFFF;
2578 text-shadow: none;
2579 }
2580
2581 .ui.blue.buttons .active.button,
2582 .ui.blue.buttons .active.button:active,
2583 .ui.blue.active.button,
2584 .ui.blue.button .active.button:active {
2585 background-color: #1279c6;
2586 color: #FFFFFF;
2587 text-shadow: none;
2588 }
2589
2590 /* Basic */
2591
2592 .ui.basic.blue.buttons .button,
2593 .ui.basic.blue.button {
2594 box-shadow: 0px 0px 0px 1px #2185D0 inset !important;
2595 color: #2185D0 !important;
2596 }
2597
2598 .ui.basic.blue.buttons .button:hover,
2599 .ui.basic.blue.button:hover {
2600 background: transparent !important;
2601 box-shadow: 0px 0px 0px 1px #1678c2 inset !important;
2602 color: #1678c2 !important;
2603 }
2604
2605 .ui.basic.blue.buttons .button:focus,
2606 .ui.basic.blue.button:focus {
2607 background: transparent !important;
2608 box-shadow: 0px 0px 0px 1px #0d71bb inset !important;
2609 color: #1678c2 !important;
2610 }
2611
2612 .ui.basic.blue.buttons .active.button,
2613 .ui.basic.blue.active.button {
2614 background: transparent !important;
2615 box-shadow: 0px 0px 0px 1px #1279c6 inset !important;
2616 color: #1a69a4 !important;
2617 }
2618
2619 .ui.basic.blue.buttons .button:active,
2620 .ui.basic.blue.button:active {
2621 box-shadow: 0px 0px 0px 1px #1a69a4 inset !important;
2622 color: #1a69a4 !important;
2623 }
2624
2625 .ui.buttons:not(.vertical) > .basic.blue.button:not(:first-child) {
2626 margin-left: -1px;
2627 }
2628
2629 /* Inverted */
2630
2631 .ui.inverted.blue.buttons .button,
2632 .ui.inverted.blue.button {
2633 background-color: transparent;
2634 box-shadow: 0px 0px 0px 2px #54C8FF inset !important;
2635 color: #54C8FF;
2636 }
2637
2638 .ui.inverted.blue.buttons .button:hover,
2639 .ui.inverted.blue.button:hover,
2640 .ui.inverted.blue.buttons .button:focus,
2641 .ui.inverted.blue.button:focus,
2642 .ui.inverted.blue.buttons .button.active,
2643 .ui.inverted.blue.button.active,
2644 .ui.inverted.blue.buttons .button:active,
2645 .ui.inverted.blue.button:active {
2646 box-shadow: none !important;
2647 color: #FFFFFF;
2648 }
2649
2650 .ui.inverted.blue.buttons .button:hover,
2651 .ui.inverted.blue.button:hover {
2652 background-color: #3ac0ff;
2653 }
2654
2655 .ui.inverted.blue.buttons .button:focus,
2656 .ui.inverted.blue.button:focus {
2657 background-color: #2bbbff;
2658 }
2659
2660 .ui.inverted.blue.buttons .active.button,
2661 .ui.inverted.blue.active.button {
2662 background-color: #3ac0ff;
2663 }
2664
2665 .ui.inverted.blue.buttons .button:active,
2666 .ui.inverted.blue.button:active {
2667 background-color: #21b8ff;
2668 }
2669
2670 /* Inverted Basic */
2671
2672 .ui.inverted.blue.basic.buttons .button,
2673 .ui.inverted.blue.buttons .basic.button,
2674 .ui.inverted.blue.basic.button {
2675 background-color: transparent;
2676 box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
2677 color: #FFFFFF !important;
2678 }
2679
2680 .ui.inverted.blue.basic.buttons .button:hover,
2681 .ui.inverted.blue.buttons .basic.button:hover,
2682 .ui.inverted.blue.basic.button:hover {
2683 box-shadow: 0px 0px 0px 2px #3ac0ff inset !important;
2684 color: #54C8FF !important;
2685 }
2686
2687 .ui.inverted.blue.basic.buttons .button:focus,
2688 .ui.inverted.blue.basic.buttons .button:focus,
2689 .ui.inverted.blue.basic.button:focus {
2690 box-shadow: 0px 0px 0px 2px #2bbbff inset !important;
2691 color: #54C8FF !important;
2692 }
2693
2694 .ui.inverted.blue.basic.buttons .active.button,
2695 .ui.inverted.blue.buttons .basic.active.button,
2696 .ui.inverted.blue.basic.active.button {
2697 box-shadow: 0px 0px 0px 2px #3ac0ff inset !important;
2698 color: #54C8FF !important;
2699 }
2700
2701 .ui.inverted.blue.basic.buttons .button:active,
2702 .ui.inverted.blue.buttons .basic.button:active,
2703 .ui.inverted.blue.basic.button:active {
2704 box-shadow: 0px 0px 0px 2px #21b8ff inset !important;
2705 color: #54C8FF !important;
2706 }
2707
2708 /*--- Green ---*/
2709
2710 .ui.green.buttons .button,
2711 .ui.green.button {
2712 background-color: #21BA45;
2713 color: #FFFFFF;
2714 text-shadow: none;
2715 background-image: none;
2716 }
2717
2718 .ui.green.button {
2719 box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
2720 }
2721
2722 .ui.green.buttons .button:hover,
2723 .ui.green.button:hover {
2724 background-color: #16ab39;
2725 color: #FFFFFF;
2726 text-shadow: none;
2727 }
2728
2729 .ui.green.buttons .button:focus,
2730 .ui.green.button:focus {
2731 background-color: #0ea432;
2732 color: #FFFFFF;
2733 text-shadow: none;
2734 }
2735
2736 .ui.green.buttons .button:active,
2737 .ui.green.button:active {
2738 background-color: #198f35;
2739 color: #FFFFFF;
2740 text-shadow: none;
2741 }
2742
2743 .ui.green.buttons .active.button,
2744 .ui.green.buttons .active.button:active,
2745 .ui.green.active.button,
2746 .ui.green.button .active.button:active {
2747 background-color: #13ae38;
2748 color: #FFFFFF;
2749 text-shadow: none;
2750 }
2751
2752 /* Basic */
2753
2754 .ui.basic.green.buttons .button,
2755 .ui.basic.green.button {
2756 box-shadow: 0px 0px 0px 1px #21BA45 inset !important;
2757 color: #21BA45 !important;
2758 }
2759
2760 .ui.basic.green.buttons .button:hover,
2761 .ui.basic.green.button:hover {
2762 background: transparent !important;
2763 box-shadow: 0px 0px 0px 1px #16ab39 inset !important;
2764 color: #16ab39 !important;
2765 }
2766
2767 .ui.basic.green.buttons .button:focus,
2768 .ui.basic.green.button:focus {
2769 background: transparent !important;
2770 box-shadow: 0px 0px 0px 1px #0ea432 inset !important;
2771 color: #16ab39 !important;
2772 }
2773
2774 .ui.basic.green.buttons .active.button,
2775 .ui.basic.green.active.button {
2776 background: transparent !important;
2777 box-shadow: 0px 0px 0px 1px #13ae38 inset !important;
2778 color: #198f35 !important;
2779 }
2780
2781 .ui.basic.green.buttons .button:active,
2782 .ui.basic.green.button:active {
2783 box-shadow: 0px 0px 0px 1px #198f35 inset !important;
2784 color: #198f35 !important;
2785 }
2786
2787 .ui.buttons:not(.vertical) > .basic.green.button:not(:first-child) {
2788 margin-left: -1px;
2789 }
2790
2791 /* Inverted */
2792
2793 .ui.inverted.green.buttons .button,
2794 .ui.inverted.green.button {
2795 background-color: transparent;
2796 box-shadow: 0px 0px 0px 2px #2ECC40 inset !important;
2797 color: #2ECC40;
2798 }
2799
2800 .ui.inverted.green.buttons .button:hover,
2801 .ui.inverted.green.button:hover,
2802 .ui.inverted.green.buttons .button:focus,
2803 .ui.inverted.green.button:focus,
2804 .ui.inverted.green.buttons .button.active,
2805 .ui.inverted.green.button.active,
2806 .ui.inverted.green.buttons .button:active,
2807 .ui.inverted.green.button:active {
2808 box-shadow: none !important;
2809 color: #FFFFFF;
2810 }
2811
2812 .ui.inverted.green.buttons .button:hover,
2813 .ui.inverted.green.button:hover {
2814 background-color: #22be34;
2815 }
2816
2817 .ui.inverted.green.buttons .button:focus,
2818 .ui.inverted.green.button:focus {
2819 background-color: #19b82b;
2820 }
2821
2822 .ui.inverted.green.buttons .active.button,
2823 .ui.inverted.green.active.button {
2824 background-color: #1fc231;
2825 }
2826
2827 .ui.inverted.green.buttons .button:active,
2828 .ui.inverted.green.button:active {
2829 background-color: #25a233;
2830 }
2831
2832 /* Inverted Basic */
2833
2834 .ui.inverted.green.basic.buttons .button,
2835 .ui.inverted.green.buttons .basic.button,
2836 .ui.inverted.green.basic.button {
2837 background-color: transparent;
2838 box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
2839 color: #FFFFFF !important;
2840 }
2841
2842 .ui.inverted.green.basic.buttons .button:hover,
2843 .ui.inverted.green.buttons .basic.button:hover,
2844 .ui.inverted.green.basic.button:hover {
2845 box-shadow: 0px 0px 0px 2px #22be34 inset !important;
2846 color: #2ECC40 !important;
2847 }
2848
2849 .ui.inverted.green.basic.buttons .button:focus,
2850 .ui.inverted.green.basic.buttons .button:focus,
2851 .ui.inverted.green.basic.button:focus {
2852 box-shadow: 0px 0px 0px 2px #19b82b inset !important;
2853 color: #2ECC40 !important;
2854 }
2855
2856 .ui.inverted.green.basic.buttons .active.button,
2857 .ui.inverted.green.buttons .basic.active.button,
2858 .ui.inverted.green.basic.active.button {
2859 box-shadow: 0px 0px 0px 2px #1fc231 inset !important;
2860 color: #2ECC40 !important;
2861 }
2862
2863 .ui.inverted.green.basic.buttons .button:active,
2864 .ui.inverted.green.buttons .basic.button:active,
2865 .ui.inverted.green.basic.button:active {
2866 box-shadow: 0px 0px 0px 2px #25a233 inset !important;
2867 color: #2ECC40 !important;
2868 }
2869
2870 /*--- Orange ---*/
2871
2872 .ui.orange.buttons .button,
2873 .ui.orange.button {
2874 background-color: #F2711C;
2875 color: #FFFFFF;
2876 text-shadow: none;
2877 background-image: none;
2878 }
2879
2880 .ui.orange.button {
2881 box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
2882 }
2883
2884 .ui.orange.buttons .button:hover,
2885 .ui.orange.button:hover {
2886 background-color: #f26202;
2887 color: #FFFFFF;
2888 text-shadow: none;
2889 }
2890
2891 .ui.orange.buttons .button:focus,
2892 .ui.orange.button:focus {
2893 background-color: #e55b00;
2894 color: #FFFFFF;
2895 text-shadow: none;
2896 }
2897
2898 .ui.orange.buttons .button:active,
2899 .ui.orange.button:active {
2900 background-color: #cf590c;
2901 color: #FFFFFF;
2902 text-shadow: none;
2903 }
2904
2905 .ui.orange.buttons .active.button,
2906 .ui.orange.buttons .active.button:active,
2907 .ui.orange.active.button,
2908 .ui.orange.button .active.button:active {
2909 background-color: #f56100;
2910 color: #FFFFFF;
2911 text-shadow: none;
2912 }
2913
2914 /* Basic */
2915
2916 .ui.basic.orange.buttons .button,
2917 .ui.basic.orange.button {
2918 box-shadow: 0px 0px 0px 1px #F2711C inset !important;
2919 color: #F2711C !important;
2920 }
2921
2922 .ui.basic.orange.buttons .button:hover,
2923 .ui.basic.orange.button:hover {
2924 background: transparent !important;
2925 box-shadow: 0px 0px 0px 1px #f26202 inset !important;
2926 color: #f26202 !important;
2927 }
2928
2929 .ui.basic.orange.buttons .button:focus,
2930 .ui.basic.orange.button:focus {
2931 background: transparent !important;
2932 box-shadow: 0px 0px 0px 1px #e55b00 inset !important;
2933 color: #f26202 !important;
2934 }
2935
2936 .ui.basic.orange.buttons .active.button,
2937 .ui.basic.orange.active.button {
2938 background: transparent !important;
2939 box-shadow: 0px 0px 0px 1px #f56100 inset !important;
2940 color: #cf590c !important;
2941 }
2942
2943 .ui.basic.orange.buttons .button:active,
2944 .ui.basic.orange.button:active {
2945 box-shadow: 0px 0px 0px 1px #cf590c inset !important;
2946 color: #cf590c !important;
2947 }
2948
2949 .ui.buttons:not(.vertical) > .basic.orange.button:not(:first-child) {
2950 margin-left: -1px;
2951 }
2952
2953 /* Inverted */
2954
2955 .ui.inverted.orange.buttons .button,
2956 .ui.inverted.orange.button {
2957 background-color: transparent;
2958 box-shadow: 0px 0px 0px 2px #FF851B inset !important;
2959 color: #FF851B;
2960 }
2961
2962 .ui.inverted.orange.buttons .button:hover,
2963 .ui.inverted.orange.button:hover,
2964 .ui.inverted.orange.buttons .button:focus,
2965 .ui.inverted.orange.button:focus,
2966 .ui.inverted.orange.buttons .button.active,
2967 .ui.inverted.orange.button.active,
2968 .ui.inverted.orange.buttons .button:active,
2969 .ui.inverted.orange.button:active {
2970 box-shadow: none !important;
2971 color: #FFFFFF;
2972 }
2973
2974 .ui.inverted.orange.buttons .button:hover,
2975 .ui.inverted.orange.button:hover {
2976 background-color: #ff7701;
2977 }
2978
2979 .ui.inverted.orange.buttons .button:focus,
2980 .ui.inverted.orange.button:focus {
2981 background-color: #f17000;
2982 }
2983
2984 .ui.inverted.orange.buttons .active.button,
2985 .ui.inverted.orange.active.button {
2986 background-color: #ff7701;
2987 }
2988
2989 .ui.inverted.orange.buttons .button:active,
2990 .ui.inverted.orange.button:active {
2991 background-color: #e76b00;
2992 }
2993
2994 /* Inverted Basic */
2995
2996 .ui.inverted.orange.basic.buttons .button,
2997 .ui.inverted.orange.buttons .basic.button,
2998 .ui.inverted.orange.basic.button {
2999 background-color: transparent;
3000 box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
3001 color: #FFFFFF !important;
3002 }
3003
3004 .ui.inverted.orange.basic.buttons .button:hover,
3005 .ui.inverted.orange.buttons .basic.button:hover,
3006 .ui.inverted.orange.basic.button:hover {
3007 box-shadow: 0px 0px 0px 2px #ff7701 inset !important;
3008 color: #FF851B !important;
3009 }
3010
3011 .ui.inverted.orange.basic.buttons .button:focus,
3012 .ui.inverted.orange.basic.buttons .button:focus,
3013 .ui.inverted.orange.basic.button:focus {
3014 box-shadow: 0px 0px 0px 2px #f17000 inset !important;
3015 color: #FF851B !important;
3016 }
3017
3018 .ui.inverted.orange.basic.buttons .active.button,
3019 .ui.inverted.orange.buttons .basic.active.button,
3020 .ui.inverted.orange.basic.active.button {
3021 box-shadow: 0px 0px 0px 2px #ff7701 inset !important;
3022 color: #FF851B !important;
3023 }
3024
3025 .ui.inverted.orange.basic.buttons .button:active,
3026 .ui.inverted.orange.buttons .basic.button:active,
3027 .ui.inverted.orange.basic.button:active {
3028 box-shadow: 0px 0px 0px 2px #e76b00 inset !important;
3029 color: #FF851B !important;
3030 }
3031
3032 /*--- Pink ---*/
3033
3034 .ui.pink.buttons .button,
3035 .ui.pink.button {
3036 background-color: #E03997;
3037 color: #FFFFFF;
3038 text-shadow: none;
3039 background-image: none;
3040 }
3041
3042 .ui.pink.button {
3043 box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
3044 }
3045
3046 .ui.pink.buttons .button:hover,
3047 .ui.pink.button:hover {
3048 background-color: #e61a8d;
3049 color: #FFFFFF;
3050 text-shadow: none;
3051 }
3052
3053 .ui.pink.buttons .button:focus,
3054 .ui.pink.button:focus {
3055 background-color: #e10f85;
3056 color: #FFFFFF;
3057 text-shadow: none;
3058 }
3059
3060 .ui.pink.buttons .button:active,
3061 .ui.pink.button:active {
3062 background-color: #c71f7e;
3063 color: #FFFFFF;
3064 text-shadow: none;
3065 }
3066
3067 .ui.pink.buttons .active.button,
3068 .ui.pink.buttons .active.button:active,
3069 .ui.pink.active.button,
3070 .ui.pink.button .active.button:active {
3071 background-color: #ea158d;
3072 color: #FFFFFF;
3073 text-shadow: none;
3074 }
3075
3076 /* Basic */
3077
3078 .ui.basic.pink.buttons .button,
3079 .ui.basic.pink.button {
3080 box-shadow: 0px 0px 0px 1px #E03997 inset !important;
3081 color: #E03997 !important;
3082 }
3083
3084 .ui.basic.pink.buttons .button:hover,
3085 .ui.basic.pink.button:hover {
3086 background: transparent !important;
3087 box-shadow: 0px 0px 0px 1px #e61a8d inset !important;
3088 color: #e61a8d !important;
3089 }
3090
3091 .ui.basic.pink.buttons .button:focus,
3092 .ui.basic.pink.button:focus {
3093 background: transparent !important;
3094 box-shadow: 0px 0px 0px 1px #e10f85 inset !important;
3095 color: #e61a8d !important;
3096 }
3097
3098 .ui.basic.pink.buttons .active.button,
3099 .ui.basic.pink.active.button {
3100 background: transparent !important;
3101 box-shadow: 0px 0px 0px 1px #ea158d inset !important;
3102 color: #c71f7e !important;
3103 }
3104
3105 .ui.basic.pink.buttons .button:active,
3106 .ui.basic.pink.button:active {
3107 box-shadow: 0px 0px 0px 1px #c71f7e inset !important;
3108 color: #c71f7e !important;
3109 }
3110
3111 .ui.buttons:not(.vertical) > .basic.pink.button:not(:first-child) {
3112 margin-left: -1px;
3113 }
3114
3115 /* Inverted */
3116
3117 .ui.inverted.pink.buttons .button,
3118 .ui.inverted.pink.button {
3119 background-color: transparent;
3120 box-shadow: 0px 0px 0px 2px #FF8EDF inset !important;
3121 color: #FF8EDF;
3122 }
3123
3124 .ui.inverted.pink.buttons .button:hover,
3125 .ui.inverted.pink.button:hover,
3126 .ui.inverted.pink.buttons .button:focus,
3127 .ui.inverted.pink.button:focus,
3128 .ui.inverted.pink.buttons .button.active,
3129 .ui.inverted.pink.button.active,
3130 .ui.inverted.pink.buttons .button:active,
3131 .ui.inverted.pink.button:active {
3132 box-shadow: none !important;
3133 color: #FFFFFF;
3134 }
3135
3136 .ui.inverted.pink.buttons .button:hover,
3137 .ui.inverted.pink.button:hover {
3138 background-color: #ff74d8;
3139 }
3140
3141 .ui.inverted.pink.buttons .button:focus,
3142 .ui.inverted.pink.button:focus {
3143 background-color: #ff65d3;
3144 }
3145
3146 .ui.inverted.pink.buttons .active.button,
3147 .ui.inverted.pink.active.button {
3148 background-color: #ff74d8;
3149 }
3150
3151 .ui.inverted.pink.buttons .button:active,
3152 .ui.inverted.pink.button:active {
3153 background-color: #ff5bd1;
3154 }
3155
3156 /* Inverted Basic */
3157
3158 .ui.inverted.pink.basic.buttons .button,
3159 .ui.inverted.pink.buttons .basic.button,
3160 .ui.inverted.pink.basic.button {
3161 background-color: transparent;
3162 box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
3163 color: #FFFFFF !important;
3164 }
3165
3166 .ui.inverted.pink.basic.buttons .button:hover,
3167 .ui.inverted.pink.buttons .basic.button:hover,
3168 .ui.inverted.pink.basic.button:hover {
3169 box-shadow: 0px 0px 0px 2px #ff74d8 inset !important;
3170 color: #FF8EDF !important;
3171 }
3172
3173 .ui.inverted.pink.basic.buttons .button:focus,
3174 .ui.inverted.pink.basic.buttons .button:focus,
3175 .ui.inverted.pink.basic.button:focus {
3176 box-shadow: 0px 0px 0px 2px #ff65d3 inset !important;
3177 color: #FF8EDF !important;
3178 }
3179
3180 .ui.inverted.pink.basic.buttons .active.button,
3181 .ui.inverted.pink.buttons .basic.active.button,
3182 .ui.inverted.pink.basic.active.button {
3183 box-shadow: 0px 0px 0px 2px #ff74d8 inset !important;
3184 color: #FF8EDF !important;
3185 }
3186
3187 .ui.inverted.pink.basic.buttons .button:active,
3188 .ui.inverted.pink.buttons .basic.button:active,
3189 .ui.inverted.pink.basic.button:active {
3190 box-shadow: 0px 0px 0px 2px #ff5bd1 inset !important;
3191 color: #FF8EDF !important;
3192 }
3193
3194 /*--- Violet ---*/
3195
3196 .ui.violet.buttons .button,
3197 .ui.violet.button {
3198 background-color: #6435C9;
3199 color: #FFFFFF;
3200 text-shadow: none;
3201 background-image: none;
3202 }
3203
3204 .ui.violet.button {
3205 box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
3206 }
3207
3208 .ui.violet.buttons .button:hover,
3209 .ui.violet.button:hover {
3210 background-color: #5829bb;
3211 color: #FFFFFF;
3212 text-shadow: none;
3213 }
3214
3215 .ui.violet.buttons .button:focus,
3216 .ui.violet.button:focus {
3217 background-color: #4f20b5;
3218 color: #FFFFFF;
3219 text-shadow: none;
3220 }
3221
3222 .ui.violet.buttons .button:active,
3223 .ui.violet.button:active {
3224 background-color: #502aa1;
3225 color: #FFFFFF;
3226 text-shadow: none;
3227 }
3228
3229 .ui.violet.buttons .active.button,
3230 .ui.violet.buttons .active.button:active,
3231 .ui.violet.active.button,
3232 .ui.violet.button .active.button:active {
3233 background-color: #5626bf;
3234 color: #FFFFFF;
3235 text-shadow: none;
3236 }
3237
3238 /* Basic */
3239
3240 .ui.basic.violet.buttons .button,
3241 .ui.basic.violet.button {
3242 box-shadow: 0px 0px 0px 1px #6435C9 inset !important;
3243 color: #6435C9 !important;
3244 }
3245
3246 .ui.basic.violet.buttons .button:hover,
3247 .ui.basic.violet.button:hover {
3248 background: transparent !important;
3249 box-shadow: 0px 0px 0px 1px #5829bb inset !important;
3250 color: #5829bb !important;
3251 }
3252
3253 .ui.basic.violet.buttons .button:focus,
3254 .ui.basic.violet.button:focus {
3255 background: transparent !important;
3256 box-shadow: 0px 0px 0px 1px #4f20b5 inset !important;
3257 color: #5829bb !important;
3258 }
3259
3260 .ui.basic.violet.buttons .active.button,
3261 .ui.basic.violet.active.button {
3262 background: transparent !important;
3263 box-shadow: 0px 0px 0px 1px #5626bf inset !important;
3264 color: #502aa1 !important;
3265 }
3266
3267 .ui.basic.violet.buttons .button:active,
3268 .ui.basic.violet.button:active {
3269 box-shadow: 0px 0px 0px 1px #502aa1 inset !important;
3270 color: #502aa1 !important;
3271 }
3272
3273 .ui.buttons:not(.vertical) > .basic.violet.button:not(:first-child) {
3274 margin-left: -1px;
3275 }
3276
3277 /* Inverted */
3278
3279 .ui.inverted.violet.buttons .button,
3280 .ui.inverted.violet.button {
3281 background-color: transparent;
3282 box-shadow: 0px 0px 0px 2px #A291FB inset !important;
3283 color: #A291FB;
3284 }
3285
3286 .ui.inverted.violet.buttons .button:hover,
3287 .ui.inverted.violet.button:hover,
3288 .ui.inverted.violet.buttons .button:focus,
3289 .ui.inverted.violet.button:focus,
3290 .ui.inverted.violet.buttons .button.active,
3291 .ui.inverted.violet.button.active,
3292 .ui.inverted.violet.buttons .button:active,
3293 .ui.inverted.violet.button:active {
3294 box-shadow: none !important;
3295 color: #FFFFFF;
3296 }
3297
3298 .ui.inverted.violet.buttons .button:hover,
3299 .ui.inverted.violet.button:hover {
3300 background-color: #8a73ff;
3301 }
3302
3303 .ui.inverted.violet.buttons .button:focus,
3304 .ui.inverted.violet.button:focus {
3305 background-color: #7d64ff;
3306 }
3307
3308 .ui.inverted.violet.buttons .active.button,
3309 .ui.inverted.violet.active.button {
3310 background-color: #8a73ff;
3311 }
3312
3313 .ui.inverted.violet.buttons .button:active,
3314 .ui.inverted.violet.button:active {
3315 background-color: #7860f9;
3316 }
3317
3318 /* Inverted Basic */
3319
3320 .ui.inverted.violet.basic.buttons .button,
3321 .ui.inverted.violet.buttons .basic.button,
3322 .ui.inverted.violet.basic.button {
3323 background-color: transparent;
3324 box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
3325 color: #FFFFFF !important;
3326 }
3327
3328 .ui.inverted.violet.basic.buttons .button:hover,
3329 .ui.inverted.violet.buttons .basic.button:hover,
3330 .ui.inverted.violet.basic.button:hover {
3331 box-shadow: 0px 0px 0px 2px #8a73ff inset !important;
3332 color: #A291FB !important;
3333 }
3334
3335 .ui.inverted.violet.basic.buttons .button:focus,
3336 .ui.inverted.violet.basic.buttons .button:focus,
3337 .ui.inverted.violet.basic.button:focus {
3338 box-shadow: 0px 0px 0px 2px #7d64ff inset !important;
3339 color: #A291FB !important;
3340 }
3341
3342 .ui.inverted.violet.basic.buttons .active.button,
3343 .ui.inverted.violet.buttons .basic.active.button,
3344 .ui.inverted.violet.basic.active.button {
3345 box-shadow: 0px 0px 0px 2px #8a73ff inset !important;
3346 color: #A291FB !important;
3347 }
3348
3349 .ui.inverted.violet.basic.buttons .button:active,
3350 .ui.inverted.violet.buttons .basic.button:active,
3351 .ui.inverted.violet.basic.button:active {
3352 box-shadow: 0px 0px 0px 2px #7860f9 inset !important;
3353 color: #A291FB !important;
3354 }
3355
3356 /*--- Purple ---*/
3357
3358 .ui.purple.buttons .button,
3359 .ui.purple.button {
3360 background-color: #A333C8;
3361 color: #FFFFFF;
3362 text-shadow: none;
3363 background-image: none;
3364 }
3365
3366 .ui.purple.button {
3367 box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
3368 }
3369
3370 .ui.purple.buttons .button:hover,
3371 .ui.purple.button:hover {
3372 background-color: #9627ba;
3373 color: #FFFFFF;
3374 text-shadow: none;
3375 }
3376
3377 .ui.purple.buttons .button:focus,
3378 .ui.purple.button:focus {
3379 background-color: #8f1eb4;
3380 color: #FFFFFF;
3381 text-shadow: none;
3382 }
3383
3384 .ui.purple.buttons .button:active,
3385 .ui.purple.button:active {
3386 background-color: #82299f;
3387 color: #FFFFFF;
3388 text-shadow: none;
3389 }
3390
3391 .ui.purple.buttons .active.button,
3392 .ui.purple.buttons .active.button:active,
3393 .ui.purple.active.button,
3394 .ui.purple.button .active.button:active {
3395 background-color: #9724be;
3396 color: #FFFFFF;
3397 text-shadow: none;
3398 }
3399
3400 /* Basic */
3401
3402 .ui.basic.purple.buttons .button,
3403 .ui.basic.purple.button {
3404 box-shadow: 0px 0px 0px 1px #A333C8 inset !important;
3405 color: #A333C8 !important;
3406 }
3407
3408 .ui.basic.purple.buttons .button:hover,
3409 .ui.basic.purple.button:hover {
3410 background: transparent !important;
3411 box-shadow: 0px 0px 0px 1px #9627ba inset !important;
3412 color: #9627ba !important;
3413 }
3414
3415 .ui.basic.purple.buttons .button:focus,
3416 .ui.basic.purple.button:focus {
3417 background: transparent !important;
3418 box-shadow: 0px 0px 0px 1px #8f1eb4 inset !important;
3419 color: #9627ba !important;
3420 }
3421
3422 .ui.basic.purple.buttons .active.button,
3423 .ui.basic.purple.active.button {
3424 background: transparent !important;
3425 box-shadow: 0px 0px 0px 1px #9724be inset !important;
3426 color: #82299f !important;
3427 }
3428
3429 .ui.basic.purple.buttons .button:active,
3430 .ui.basic.purple.button:active {
3431 box-shadow: 0px 0px 0px 1px #82299f inset !important;
3432 color: #82299f !important;
3433 }
3434
3435 .ui.buttons:not(.vertical) > .basic.purple.button:not(:first-child) {
3436 margin-left: -1px;
3437 }
3438
3439 /* Inverted */
3440
3441 .ui.inverted.purple.buttons .button,
3442 .ui.inverted.purple.button {
3443 background-color: transparent;
3444 box-shadow: 0px 0px 0px 2px #DC73FF inset !important;
3445 color: #DC73FF;
3446 }
3447
3448 .ui.inverted.purple.buttons .button:hover,
3449 .ui.inverted.purple.button:hover,
3450 .ui.inverted.purple.buttons .button:focus,
3451 .ui.inverted.purple.button:focus,
3452 .ui.inverted.purple.buttons .button.active,
3453 .ui.inverted.purple.button.active,
3454 .ui.inverted.purple.buttons .button:active,
3455 .ui.inverted.purple.button:active {
3456 box-shadow: none !important;
3457 color: #FFFFFF;
3458 }
3459
3460 .ui.inverted.purple.buttons .button:hover,
3461 .ui.inverted.purple.button:hover {
3462 background-color: #d65aff;
3463 }
3464
3465 .ui.inverted.purple.buttons .button:focus,
3466 .ui.inverted.purple.button:focus {
3467 background-color: #d24aff;
3468 }
3469
3470 .ui.inverted.purple.buttons .active.button,
3471 .ui.inverted.purple.active.button {
3472 background-color: #d65aff;
3473 }
3474
3475 .ui.inverted.purple.buttons .button:active,
3476 .ui.inverted.purple.button:active {
3477 background-color: #cf40ff;
3478 }
3479
3480 /* Inverted Basic */
3481
3482 .ui.inverted.purple.basic.buttons .button,
3483 .ui.inverted.purple.buttons .basic.button,
3484 .ui.inverted.purple.basic.button {
3485 background-color: transparent;
3486 box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
3487 color: #FFFFFF !important;
3488 }
3489
3490 .ui.inverted.purple.basic.buttons .button:hover,
3491 .ui.inverted.purple.buttons .basic.button:hover,
3492 .ui.inverted.purple.basic.button:hover {
3493 box-shadow: 0px 0px 0px 2px #d65aff inset !important;
3494 color: #DC73FF !important;
3495 }
3496
3497 .ui.inverted.purple.basic.buttons .button:focus,
3498 .ui.inverted.purple.basic.buttons .button:focus,
3499 .ui.inverted.purple.basic.button:focus {
3500 box-shadow: 0px 0px 0px 2px #d24aff inset !important;
3501 color: #DC73FF !important;
3502 }
3503
3504 .ui.inverted.purple.basic.buttons .active.button,
3505 .ui.inverted.purple.buttons .basic.active.button,
3506 .ui.inverted.purple.basic.active.button {
3507 box-shadow: 0px 0px 0px 2px #d65aff inset !important;
3508 color: #DC73FF !important;
3509 }
3510
3511 .ui.inverted.purple.basic.buttons .button:active,
3512 .ui.inverted.purple.buttons .basic.button:active,
3513 .ui.inverted.purple.basic.button:active {
3514 box-shadow: 0px 0px 0px 2px #cf40ff inset !important;
3515 color: #DC73FF !important;
3516 }
3517
3518 /*--- Red ---*/
3519
3520 .ui.red.buttons .button,
3521 .ui.red.button {
3522 background-color: #DB2828;
3523 color: #FFFFFF;
3524 text-shadow: none;
3525 background-image: none;
3526 }
3527
3528 .ui.red.button {
3529 box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
3530 }
3531
3532 .ui.red.buttons .button:hover,
3533 .ui.red.button:hover {
3534 background-color: #d01919;
3535 color: #FFFFFF;
3536 text-shadow: none;
3537 }
3538
3539 .ui.red.buttons .button:focus,
3540 .ui.red.button:focus {
3541 background-color: #ca1010;
3542 color: #FFFFFF;
3543 text-shadow: none;
3544 }
3545
3546 .ui.red.buttons .button:active,
3547 .ui.red.button:active {
3548 background-color: #b21e1e;
3549 color: #FFFFFF;
3550 text-shadow: none;
3551 }
3552
3553 .ui.red.buttons .active.button,
3554 .ui.red.buttons .active.button:active,
3555 .ui.red.active.button,
3556 .ui.red.button .active.button:active {
3557 background-color: #d41515;
3558 color: #FFFFFF;
3559 text-shadow: none;
3560 }
3561
3562 /* Basic */
3563
3564 .ui.basic.red.buttons .button,
3565 .ui.basic.red.button {
3566 box-shadow: 0px 0px 0px 1px #DB2828 inset !important;
3567 color: #DB2828 !important;
3568 }
3569
3570 .ui.basic.red.buttons .button:hover,
3571 .ui.basic.red.button:hover {
3572 background: transparent !important;
3573 box-shadow: 0px 0px 0px 1px #d01919 inset !important;
3574 color: #d01919 !important;
3575 }
3576
3577 .ui.basic.red.buttons .button:focus,
3578 .ui.basic.red.button:focus {
3579 background: transparent !important;
3580 box-shadow: 0px 0px 0px 1px #ca1010 inset !important;
3581 color: #d01919 !important;
3582 }
3583
3584 .ui.basic.red.buttons .active.button,
3585 .ui.basic.red.active.button {
3586 background: transparent !important;
3587 box-shadow: 0px 0px 0px 1px #d41515 inset !important;
3588 color: #b21e1e !important;
3589 }
3590
3591 .ui.basic.red.buttons .button:active,
3592 .ui.basic.red.button:active {
3593 box-shadow: 0px 0px 0px 1px #b21e1e inset !important;
3594 color: #b21e1e !important;
3595 }
3596
3597 .ui.buttons:not(.vertical) > .basic.red.button:not(:first-child) {
3598 margin-left: -1px;
3599 }
3600
3601 /* Inverted */
3602
3603 .ui.inverted.red.buttons .button,
3604 .ui.inverted.red.button {
3605 background-color: transparent;
3606 box-shadow: 0px 0px 0px 2px #FF695E inset !important;
3607 color: #FF695E;
3608 }
3609
3610 .ui.inverted.red.buttons .button:hover,
3611 .ui.inverted.red.button:hover,
3612 .ui.inverted.red.buttons .button:focus,
3613 .ui.inverted.red.button:focus,
3614 .ui.inverted.red.buttons .button.active,
3615 .ui.inverted.red.button.active,
3616 .ui.inverted.red.buttons .button:active,
3617 .ui.inverted.red.button:active {
3618 box-shadow: none !important;
3619 color: #FFFFFF;
3620 }
3621
3622 .ui.inverted.red.buttons .button:hover,
3623 .ui.inverted.red.button:hover {
3624 background-color: #ff5144;
3625 }
3626
3627 .ui.inverted.red.buttons .button:focus,
3628 .ui.inverted.red.button:focus {
3629 background-color: #ff4335;
3630 }
3631
3632 .ui.inverted.red.buttons .active.button,
3633 .ui.inverted.red.active.button {
3634 background-color: #ff5144;
3635 }
3636
3637 .ui.inverted.red.buttons .button:active,
3638 .ui.inverted.red.button:active {
3639 background-color: #ff392b;
3640 }
3641
3642 /* Inverted Basic */
3643
3644 .ui.inverted.red.basic.buttons .button,
3645 .ui.inverted.red.buttons .basic.button,
3646 .ui.inverted.red.basic.button {
3647 background-color: transparent;
3648 box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
3649 color: #FFFFFF !important;
3650 }
3651
3652 .ui.inverted.red.basic.buttons .button:hover,
3653 .ui.inverted.red.buttons .basic.button:hover,
3654 .ui.inverted.red.basic.button:hover {
3655 box-shadow: 0px 0px 0px 2px #ff5144 inset !important;
3656 color: #FF695E !important;
3657 }
3658
3659 .ui.inverted.red.basic.buttons .button:focus,
3660 .ui.inverted.red.basic.buttons .button:focus,
3661 .ui.inverted.red.basic.button:focus {
3662 box-shadow: 0px 0px 0px 2px #ff4335 inset !important;
3663 color: #FF695E !important;
3664 }
3665
3666 .ui.inverted.red.basic.buttons .active.button,
3667 .ui.inverted.red.buttons .basic.active.button,
3668 .ui.inverted.red.basic.active.button {
3669 box-shadow: 0px 0px 0px 2px #ff5144 inset !important;
3670 color: #FF695E !important;
3671 }
3672
3673 .ui.inverted.red.basic.buttons .button:active,
3674 .ui.inverted.red.buttons .basic.button:active,
3675 .ui.inverted.red.basic.button:active {
3676 box-shadow: 0px 0px 0px 2px #ff392b inset !important;
3677 color: #FF695E !important;
3678 }
3679
3680 /*--- Teal ---*/
3681
3682 .ui.teal.buttons .button,
3683 .ui.teal.button {
3684 background-color: #00B5AD;
3685 color: #FFFFFF;
3686 text-shadow: none;
3687 background-image: none;
3688 }
3689
3690 .ui.teal.button {
3691 box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
3692 }
3693
3694 .ui.teal.buttons .button:hover,
3695 .ui.teal.button:hover {
3696 background-color: #009c95;
3697 color: #FFFFFF;
3698 text-shadow: none;
3699 }
3700
3701 .ui.teal.buttons .button:focus,
3702 .ui.teal.button:focus {
3703 background-color: #008c86;
3704 color: #FFFFFF;
3705 text-shadow: none;
3706 }
3707
3708 .ui.teal.buttons .button:active,
3709 .ui.teal.button:active {
3710 background-color: #00827c;
3711 <