github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/button.css (about)

     1  /*!
     2   * # Semantic UI x.x - Button
     3   * http://github.com/semantic-org/semantic-ui/
     4   *
     5   *
     6   * Copyright 2014 Contributorss
     7   * Released under the MIT license
     8   * http://opensource.org/licenses/MIT
     9   *
    10   */
    11  
    12  
    13  /*******************************
    14              Button
    15  *******************************/
    16  
    17  .ui.button {
    18    cursor: pointer;
    19    display: inline-block;
    20    min-height: 1em;
    21    outline: none;
    22    border: none;
    23    vertical-align: baseline;
    24    background-color: #e0e0e0;
    25    color: rgba(0, 0, 0, 0.6);
    26    font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    27    margin: 0em 0.25em 0em 0em;
    28    padding: 0.78571em 1.5em 0.78571em;
    29    text-transform: none;
    30    text-shadow: none;
    31    font-weight: bold;
    32    line-height: 1;
    33    font-style: normal;
    34    text-align: center;
    35    text-decoration: none;
    36    background-image: none;
    37    border-radius: 0.2857rem;
    38    box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
    39    -webkit-user-select: none;
    40       -moz-user-select: none;
    41        -ms-user-select: none;
    42            user-select: none;
    43    -webkit-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
    44            transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
    45    will-change: '';
    46    -webkit-tap-highlight-color: transparent;
    47  }
    48  
    49  
    50  /*******************************
    51              States
    52  *******************************/
    53  
    54  
    55  /*--------------
    56        Hover
    57  ---------------*/
    58  
    59  .ui.button:hover {
    60    background-color: #e8e8e8;
    61    background-image: none;
    62    box-shadow: '';
    63    color: rgba(0, 0, 0, 0.8);
    64  }
    65  .ui.button:hover .icon {
    66    opacity: 0.85;
    67  }
    68  
    69  /*--------------
    70        Focus
    71  ---------------*/
    72  
    73  .ui.button:focus {
    74    background-color: '';
    75    color: rgba(0, 0, 0, 0.8);
    76    background-image: '' !important;
    77    box-shadow: 0px 0px 0px 1px transparent inset, 0px 0px 1px rgba(81, 167, 232, 0.8) inset, 0px 0px 3px 2px rgba(81, 167, 232, 0.8) !important;
    78  }
    79  .ui.button:focus .icon {
    80    opacity: 0.85;
    81  }
    82  
    83  /*--------------
    84        Down
    85  ---------------*/
    86  
    87  .ui.button:active,
    88  .ui.active.button:active {
    89    background-color: #cccccc;
    90    background-image: '';
    91    color: rgba(0, 0, 0, 0.8);
    92    box-shadow: 0px 0px 0px 1px transparent inset, 0px 1px 4px 0px rgba(39, 41, 43, 0.15) inset !important;
    93  }
    94  
    95  /*--------------
    96       Active
    97  ---------------*/
    98  
    99  .ui.active.button {
   100    background-color: #d0d0d0;
   101    background-image: none;
   102    box-shadow: 0px 0px 0px 1px transparent inset;
   103    color: rgba(0, 0, 0, 0.8);
   104  }
   105  .ui.active.button:hover {
   106    background-color: #d0d0d0;
   107    background-image: none;
   108    color: rgba(0, 0, 0, 0.8);
   109  }
   110  .ui.active.button:active {
   111    background-color: #d0d0d0;
   112    background-image: none;
   113  }
   114  
   115  /*--------------
   116      Loading
   117  ---------------*/
   118  
   119  
   120  /* Specificity hack */
   121  .ui.loading.loading.loading.loading.loading.loading.button {
   122    position: relative;
   123    cursor: default;
   124    text-shadow: none !important;
   125    color: transparent !important;
   126    opacity: 1;
   127    pointer-events: none;
   128    -webkit-transition: all 0s linear, opacity 0.2s ease;
   129            transition: all 0s linear, opacity 0.2s ease;
   130  }
   131  .ui.loading.button:before {
   132    position: absolute;
   133    content: '';
   134    top: 50%;
   135    left: 50%;
   136    margin: -0.64285em 0em 0em -0.64285em;
   137    width: 1.2857em;
   138    height: 1.2857em;
   139    border-radius: 500rem;
   140    border: 0.2em solid rgba(0, 0, 0, 0.15);
   141  }
   142  .ui.loading.button:after {
   143    position: absolute;
   144    content: '';
   145    top: 50%;
   146    left: 50%;
   147    margin: -0.64285em 0em 0em -0.64285em;
   148    width: 1.2857em;
   149    height: 1.2857em;
   150    -webkit-animation: button-spin 0.6s linear;
   151            animation: button-spin 0.6s linear;
   152    -webkit-animation-iteration-count: infinite;
   153            animation-iteration-count: infinite;
   154    border-radius: 500rem;
   155    border-color: #ffffff transparent transparent;
   156    border-style: solid;
   157    border-width: 0.2em;
   158    box-shadow: 0px 0px 0px 1px transparent;
   159  }
   160  .ui.labeled.icon.loading.button .icon {
   161    background-color: transparent;
   162    box-shadow: none;
   163  }
   164  @-webkit-keyframes button-spin {
   165    from {
   166      -webkit-transform: rotate(0deg);
   167              transform: rotate(0deg);
   168    }
   169    to {
   170      -webkit-transform: rotate(360deg);
   171              transform: rotate(360deg);
   172    }
   173  }
   174  @keyframes button-spin {
   175    from {
   176      -webkit-transform: rotate(0deg);
   177              transform: rotate(0deg);
   178    }
   179    to {
   180      -webkit-transform: rotate(360deg);
   181              transform: rotate(360deg);
   182    }
   183  }
   184  .ui.basic.loading.button:not(.inverted):before {
   185    border-color: rgba(0, 0, 0, 0.1);
   186  }
   187  .ui.basic.loading.button:not(.inverted):after {
   188    border-top-color: #aaaaaa;
   189  }
   190  
   191  /*-------------------
   192        Disabled
   193  --------------------*/
   194  
   195  .ui.buttons .disabled.button,
   196  .ui.disabled.button,
   197  .ui.button:disabled,
   198  .ui.disabled.button:hover,
   199  .ui.disabled.active.button {
   200    cursor: default;
   201    background-color: #dcddde !important;
   202    color: rgba(0, 0, 0, 0.4) !important;
   203    opacity: 0.3 !important;
   204    background-image: none !important;
   205    box-shadow: none !important;
   206    pointer-events: none;
   207  }
   208  
   209  /* Basic Group With Disabled */
   210  .ui.basic.buttons .ui.disabled.button {
   211    border-color: rgba(39, 41, 43, 0.5);
   212  }
   213  
   214  
   215  /*******************************
   216               Types
   217  *******************************/
   218  
   219  
   220  /*-------------------
   221         Animated
   222  --------------------*/
   223  
   224  .ui.animated.button {
   225    position: relative;
   226    overflow: hidden;
   227    vertical-align: middle;
   228    padding-right: 0em !important;
   229  }
   230  .ui.animated.button .content {
   231    will-change: transform, opacity;
   232  }
   233  .ui.animated.button .visible.content {
   234    position: relative;
   235    margin-right: 1.5em;
   236  }
   237  .ui.animated.button .hidden.content {
   238    position: absolute;
   239    width: 100%;
   240  }
   241  
   242  /* Horizontal */
   243  .ui.animated.button .visible.content,
   244  .ui.animated.button .hidden.content {
   245    -webkit-transition: right 0.3s ease 0s;
   246            transition: right 0.3s ease 0s;
   247  }
   248  .ui.animated.button .visible.content {
   249    left: auto;
   250    right: 0%;
   251  }
   252  .ui.animated.button .hidden.content {
   253    top: 50%;
   254    left: auto;
   255    right: -100%;
   256    margin-top: -0.5em;
   257  }
   258  .ui.animated.button:hover .visible.content {
   259    left: auto;
   260    right: 200%;
   261  }
   262  .ui.animated.button:hover .hidden.content {
   263    left: auto;
   264    right: 0%;
   265  }
   266  
   267  /* Vertical */
   268  .ui.vertical.animated.button .visible.content,
   269  .ui.vertical.animated.button .hidden.content {
   270    -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease;
   271            transition: top 0.3s ease, transform 0.3s ease;
   272  }
   273  .ui.vertical.animated.button .visible.content {
   274    -webkit-transform: translateY(0%);
   275        -ms-transform: translateY(0%);
   276            transform: translateY(0%);
   277    right: auto;
   278  }
   279  .ui.vertical.animated.button .hidden.content {
   280    top: -50%;
   281    left: 0%;
   282    right: auto;
   283  }
   284  .ui.vertical.animated.button:hover .visible.content {
   285    -webkit-transform: translateY(200%);
   286        -ms-transform: translateY(200%);
   287            transform: translateY(200%);
   288    right: auto;
   289  }
   290  .ui.vertical.animated.button:hover .hidden.content {
   291    top: 50%;
   292    right: auto;
   293  }
   294  
   295  /* Fade */
   296  .ui.fade.animated.button .visible.content,
   297  .ui.fade.animated.button .hidden.content {
   298    -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
   299            transition: opacity 0.3s ease, transform 0.3s ease;
   300  }
   301  .ui.fade.animated.button .visible.content {
   302    left: auto;
   303    right: auto;
   304    opacity: 1;
   305    -webkit-transform: scale(1);
   306        -ms-transform: scale(1);
   307            transform: scale(1);
   308  }
   309  .ui.fade.animated.button .hidden.content {
   310    opacity: 0;
   311    left: 0%;
   312    right: auto;
   313    -webkit-transform: scale(1.5);
   314        -ms-transform: scale(1.5);
   315            transform: scale(1.5);
   316  }
   317  .ui.fade.animated.button:hover .visible.content {
   318    left: auto;
   319    right: auto;
   320    opacity: 0;
   321    -webkit-transform: scale(0.75);
   322        -ms-transform: scale(0.75);
   323            transform: scale(0.75);
   324  }
   325  .ui.fade.animated.button:hover .hidden.content {
   326    left: 0%;
   327    right: auto;
   328    opacity: 1;
   329    -webkit-transform: scale(1);
   330        -ms-transform: scale(1);
   331            transform: scale(1);
   332  }
   333  
   334  /*-------------------
   335         Inverted
   336  --------------------*/
   337  
   338  .ui.inverted.button {
   339    box-shadow: 0px 0px 0px 2px #ffffff inset !important;
   340    background: transparent none;
   341    color: #ffffff;
   342    text-shadow: none !important;
   343  }
   344  .ui.inverted.buttons .button {
   345    margin: 0px 0px 0px -2px;
   346  }
   347  .ui.inverted.buttons .button:first-child {
   348    margin-left: 0em;
   349  }
   350  .ui.inverted.vertical.buttons .button {
   351    margin: 0px 0px -2px 0px;
   352  }
   353  .ui.inverted.vertical.buttons .button:first-child {
   354    margin-top: 0em;
   355  }
   356  .ui.inverted.buttons .button:hover {
   357    position: relative;
   358  }
   359  .ui.inverted.button:hover {
   360    background: #ffffff;
   361    box-shadow: 0px 0px 0px 2px #ffffff inset !important;
   362    color: rgba(0, 0, 0, 0.8);
   363  }
   364  
   365  /*-------------------
   366         Social
   367  --------------------*/
   368  
   369  
   370  /* Facebook */
   371  .ui.facebook.button {
   372    background-color: #3b579d;
   373    color: #ffffff;
   374    text-shadow: none;
   375    background-image: none;
   376    box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
   377  }
   378  .ui.facebook.button:hover {
   379    background-color: #3f5da8;
   380    color: #ffffff;
   381    text-shadow: none;
   382  }
   383  .ui.facebook.button:active {
   384    background-color: #314983;
   385    color: #ffffff;
   386    text-shadow: none;
   387  }
   388  
   389  /* Twitter */
   390  .ui.twitter.button {
   391    background-color: #4092cc;
   392    color: #ffffff;
   393    text-shadow: none;
   394    background-image: none;
   395    box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
   396  }
   397  .ui.twitter.button:hover {
   398    background-color: #4c99cf;
   399    color: #ffffff;
   400    text-shadow: none;
   401  }
   402  .ui.twitter.button:active {
   403    background-color: #3180b7;
   404    color: #ffffff;
   405    text-shadow: none;
   406  }
   407  
   408  /* Google Plus */
   409  .ui.google.plus.button {
   410    background-color: #d34836;
   411    color: #ffffff;
   412    text-shadow: none;
   413    background-image: none;
   414    box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
   415  }
   416  .ui.google.plus.button:hover {
   417    background-color: #d65343;
   418    color: #ffffff;
   419    text-shadow: none;
   420  }
   421  .ui.google.plus.button:active {
   422    background-color: #bc3a29;
   423    color: #ffffff;
   424    text-shadow: none;
   425  }
   426  
   427  /* Linked In */
   428  .ui.linkedin.button {
   429    background-color: #1f88be;
   430    color: #ffffff;
   431    text-shadow: none;
   432  }
   433  .ui.linkedin.button:hover {
   434    background-color: #2191cb;
   435    color: #ffffff;
   436    text-shadow: none;
   437  }
   438  .ui.linkedin.button:active {
   439    background-color: #1a729f;
   440    color: #ffffff;
   441    text-shadow: none;
   442  }
   443  
   444  /* YouTube */
   445  .ui.youtube.button {
   446    background-color: #cc181e;
   447    color: #ffffff;
   448    text-shadow: none;
   449    background-image: none;
   450    box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
   451  }
   452  .ui.youtube.button:hover {
   453    background-color: #da1a20;
   454    color: #ffffff;
   455    text-shadow: none;
   456  }
   457  .ui.youtube.button:active {
   458    background-color: #ac1419;
   459    color: #ffffff;
   460    text-shadow: none;
   461  }
   462  
   463  /* Instagram */
   464  .ui.instagram.button {
   465    background-color: #49769c;
   466    color: #ffffff;
   467    text-shadow: none;
   468    background-image: none;
   469    box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
   470  }
   471  .ui.instagram.button:hover {
   472    background-color: #4e7ea6;
   473    color: #ffffff;
   474    text-shadow: none;
   475  }
   476  .ui.instagram.button:active {
   477    background-color: #3e6484;
   478    color: #ffffff;
   479    text-shadow: none;
   480  }
   481  
   482  /* Pinterest */
   483  .ui.pinterest.button {
   484    background-color: #00aced;
   485    color: #ffffff;
   486    text-shadow: none;
   487    background-image: none;
   488    box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
   489  }
   490  .ui.pinterest.button:hover {
   491    background-color: #00b7fc;
   492    color: #ffffff;
   493    text-shadow: none;
   494  }
   495  .ui.pinterest.button:active {
   496    background-color: #0092c9;
   497    color: #ffffff;
   498    text-shadow: none;
   499  }
   500  
   501  /* VK */
   502  .ui.vk.button {
   503    background-color: #4D7198;
   504    color: #ffffff;
   505    background-image: none;
   506    box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
   507  }
   508  .ui.vk.button:hover {
   509    background-color: #5279a2;
   510    color: #ffffff;
   511  }
   512  .ui.vk.button:active {
   513    background-color: #415f80;
   514    color: #ffffff;
   515  }
   516  
   517  /*--------------
   518       Icon
   519  ---------------*/
   520  
   521  .ui.button > .icon {
   522    opacity: 0.8;
   523    margin: 0em 0.4em 0em -0.2em;
   524    -webkit-transition: opacity 0.2s ease;
   525            transition: opacity 0.2s ease;
   526    vertical-align: baseline;
   527    color: '';
   528  }
   529  .ui.button > .right.icon {
   530    margin: 0em -0.2em 0em 0.4em;
   531  }
   532  
   533  
   534  /*******************************
   535             Variations
   536  *******************************/
   537  
   538  
   539  /*-------------------
   540         Floated
   541  --------------------*/
   542  
   543  .ui[class*="left floated"].buttons,
   544  .ui[class*="left floated"].button {
   545    float: left;
   546    margin-left: 0em;
   547    margin-right: 0.25em;
   548  }
   549  .ui[class*="right floated"].buttons,
   550  .ui[class*="right floated"].button {
   551    float: right;
   552    margin-right: 0em;
   553    margin-left: 0.25em;
   554  }
   555  
   556  /*-------------------
   557         Compact
   558  --------------------*/
   559  
   560  .ui.compact.buttons .button,
   561  .ui.compact.button {
   562    padding: 0.5892825em 1.125em 0.5892825em;
   563  }
   564  .ui.compact.icon.buttons .button,
   565  .ui.compact.icon.button {
   566    padding: 0.5892825em 0.5892825em 0.5892825em;
   567  }
   568  .ui.compact.labeled.icon.buttons .button,
   569  .ui.compact.labeled.icon.button {
   570    padding: 0.5892825em 3.69642em 0.5892825em;
   571  }
   572  
   573  /*-------------------
   574          Sizes
   575  --------------------*/
   576  
   577  .ui.mini.buttons .button,
   578  .ui.mini.buttons .or,
   579  .ui.mini.button {
   580    font-size: 0.71428571rem;
   581  }
   582  .ui.tiny.buttons .button,
   583  .ui.tiny.buttons .or,
   584  .ui.tiny.button {
   585    font-size: 0.85714286rem;
   586  }
   587  .ui.small.buttons .button,
   588  .ui.small.buttons .or,
   589  .ui.small.button {
   590    font-size: 0.92857143rem;
   591  }
   592  .ui.buttons .button,
   593  .ui.buttons .or,
   594  .ui.button {
   595    font-size: 1rem;
   596  }
   597  .ui.large.buttons .button,
   598  .ui.large.buttons .or,
   599  .ui.large.button {
   600    font-size: 1.14285714rem;
   601  }
   602  .ui.big.buttons .button,
   603  .ui.big.buttons .or,
   604  .ui.big.button {
   605    font-size: 1.28571429rem;
   606  }
   607  .ui.huge.buttons .button,
   608  .ui.huge.buttons .or,
   609  .ui.huge.button {
   610    font-size: 1.42857143rem;
   611  }
   612  .ui.massive.buttons .button,
   613  .ui.massive.buttons .or,
   614  .ui.massive.button {
   615    font-size: 1.71428571rem;
   616  }
   617  
   618  /*--------------
   619      Icon Only
   620  ---------------*/
   621  
   622  .ui.icon.buttons .button,
   623  .ui.icon.button {
   624    padding: 0.78571em 0.78571em 0.78571em;
   625  }
   626  .ui.icon.buttons .button > .icon,
   627  .ui.icon.button > .icon {
   628    opacity: 0.9;
   629    margin: 0em;
   630    vertical-align: top;
   631  }
   632  
   633  /*-------------------
   634          Basic
   635  --------------------*/
   636  
   637  .ui.basic.buttons .button,
   638  .ui.basic.button {
   639    background: transparent !important;
   640    background-image: none;
   641    color: rgba(0, 0, 0, 0.6) !important;
   642    font-weight: normal;
   643    border-radius: 0.2857rem;
   644    text-transform: none;
   645    text-shadow: none !important;
   646    box-shadow: 0px 0px 0px 1px rgba(39, 41, 43, 0.15) inset;
   647  }
   648  .ui.basic.buttons {
   649    box-shadow: 0px 0px 0px 1px rgba(39, 41, 43, 0.15);
   650    border-radius: 0.2857rem;
   651  }
   652  .ui.basic.buttons .button {
   653    border-radius: 0em;
   654  }
   655  .ui.basic.buttons .button:hover,
   656  .ui.basic.button:hover {
   657    background: #fafafa !important;
   658    color: rgba(0, 0, 0, 0.8) !important;
   659    box-shadow: 0px 0px 0px 1px rgba(39, 41, 43, 0.15) inset, 0px 0px 0px 0px rgba(39, 41, 43, 0.15) inset;
   660  }
   661  .ui.basic.buttons .button:active,
   662  .ui.basic.button:active {
   663    background: #f8f8f8 !important;
   664    color: rgba(0, 0, 0, 0.8) !important;
   665    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 4px 0px rgba(39, 41, 43, 0.15) inset;
   666  }
   667  .ui.basic.buttons .active.button,
   668  .ui.basic.active.button {
   669    background: rgba(0, 0, 0, 0.05) !important;
   670    box-shadow: '' !important;
   671    color: rgba(0, 0, 0, 0.8);
   672    box-shadow: rgba(39, 41, 43, 0.3);
   673  }
   674  .ui.basic.buttons .active.button:hover,
   675  .ui.basic.active.button:hover {
   676    background-color: rgba(0, 0, 0, 0.05);
   677  }
   678  
   679  /* Vertical */
   680  .ui.basic.buttons .button:hover {
   681    box-shadow: 0px 0px 0px 1px rgba(39, 41, 43, 0.15) inset, 0px 0px 0px 0px rgba(39, 41, 43, 0.15) inset inset;
   682  }
   683  .ui.basic.buttons .button:active {
   684    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 4px 0px rgba(39, 41, 43, 0.15) inset inset;
   685  }
   686  .ui.basic.buttons .active.button {
   687    box-shadow: rgba(39, 41, 43, 0.3) inset;
   688  }
   689  
   690  /* Standard Basic Inverted */
   691  .ui.basic.inverted.buttons .button,
   692  .ui.basic.inverted.button {
   693    background-color: transparent !important;
   694    color: #fafafa !important;
   695    box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
   696  }
   697  .ui.basic.inverted.buttons .button:hover,
   698  .ui.basic.inverted.button:hover {
   699    color: #ffffff !important;
   700    box-shadow: 0px 0px 0px 2px #ffffff inset !important;
   701  }
   702  .ui.basic.inverted.buttons .button:active,
   703  .ui.basic.inverted.button:active {
   704    background-color: rgba(255, 255, 255, 0.05) !important;
   705    color: #ffffff !important;
   706    box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.9) inset !important;
   707  }
   708  .ui.basic.inverted.buttons .active.button,
   709  .ui.basic.inverted.active.button {
   710    background-color: rgba(255, 255, 255, 0.05);
   711    color: #ffffff;
   712    text-shadow: none;
   713    box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.7) inset;
   714  }
   715  .ui.basic.inverted.buttons .active.button:hover,
   716  .ui.basic.inverted.active.button:hover {
   717    background-color: rgba(255, 255, 255, 0.07);
   718    box-shadow: 0px 0px 0px 2px #ffffff inset !important;
   719  }
   720  
   721  /* Basic Group */
   722  .ui.basic.buttons .button {
   723    border-left: 1px solid rgba(39, 41, 43, 0.15);
   724    box-shadow: none;
   725  }
   726  .ui.basic.vertical.buttons .button {
   727    border-left: none;
   728  }
   729  .ui.basic.vertical.buttons .button {
   730    border-left-width: 0px;
   731    border-top: 1px solid rgba(39, 41, 43, 0.15);
   732  }
   733  .ui.basic.vertical.buttons .button:first-child {
   734    border-top-width: 0px;
   735  }
   736  
   737  /*--------------
   738    Labeled Icon
   739  ---------------*/
   740  
   741  .ui.labeled.icon.buttons .button,
   742  .ui.labeled.icon.button {
   743    position: relative;
   744    padding-left: 4.07142em !important;
   745    padding-right: 1.5em !important;
   746  }
   747  
   748  /* Left Labeled */
   749  .ui.labeled.icon.buttons > .button > .icon,
   750  .ui.labeled.icon.button > .icon {
   751    position: absolute;
   752    width: 2.57142em;
   753    height: 100%;
   754    background-color: rgba(0, 0, 0, 0.05);
   755    text-align: center;
   756    color: '';
   757    border-radius: 0.2857rem 0px 0px 0.2857rem;
   758    line-height: 1;
   759    box-shadow: -1px 0px 0px 0px transparent inset;
   760  }
   761  
   762  /* Left Labeled */
   763  .ui.labeled.icon.buttons > .button > .icon,
   764  .ui.labeled.icon.button > .icon {
   765    top: 0em;
   766    left: 0em;
   767  }
   768  
   769  /* Right Labeled */
   770  .ui[class*="right labeled"].icon.button {
   771    padding-right: 4.07142em !important;
   772    padding-left: 1.5em !important;
   773  }
   774  .ui[class*="right labeled"].icon.button > .icon {
   775    left: auto;
   776    right: 0em;
   777    border-radius: 0em 0.2857rem 0.2857rem 0em;
   778    box-shadow: 1px 0px 0px 0px transparent inset;
   779  }
   780  .ui.labeled.icon.buttons > .button > .icon:before,
   781  .ui.labeled.icon.button > .icon:before,
   782  .ui.labeled.icon.buttons > .button > .icon:after,
   783  .ui.labeled.icon.button > .icon:after {
   784    display: block;
   785    position: absolute;
   786    width: 100%;
   787    top: 50%;
   788    text-align: center;
   789    margin-top: -0.5em;
   790  }
   791  .ui.labeled.icon.buttons .button > .icon {
   792    border-radius: 0em;
   793  }
   794  .ui.labeled.icon.buttons .button:first-child > .icon {
   795    border-top-left-radius: 0.2857rem;
   796    border-bottom-left-radius: 0.2857rem;
   797  }
   798  .ui.labeled.icon.buttons .button:last-child > .icon {
   799    border-top-right-radius: 0.2857rem;
   800    border-bottom-right-radius: 0.2857rem;
   801  }
   802  .ui.vertical.labeled.icon.buttons .button:first-child > .icon {
   803    border-radius: 0em;
   804    border-top-left-radius: 0.2857rem;
   805  }
   806  .ui.vertical.labeled.icon.buttons .button:last-child > .icon {
   807    border-radius: 0em;
   808    border-bottom-left-radius: 0.2857rem;
   809  }
   810  
   811  /* Fluid Labeled */
   812  .ui.fluid[class*="left labeled"].icon.button,
   813  .ui.fluid[class*="right labeled"].icon.button {
   814    padding-left: 1.5em !important;
   815    padding-right: 1.5em !important;
   816  }
   817  
   818  /*--------------
   819       Toggle
   820  ---------------*/
   821  
   822  
   823  /* Toggle (Modifies active state to give affordances) */
   824  .ui.toggle.buttons .active.button,
   825  .ui.buttons .button.toggle.active,
   826  .ui.button.toggle.active {
   827    background-color: #5bbd72 !important;
   828    box-shadow: none !important;
   829    text-shadow: none;
   830    color: #ffffff !important;
   831  }
   832  .ui.button.toggle.active:hover {
   833    background-color: #66c17b !important;
   834    text-shadow: none;
   835    color: #ffffff !important;
   836  }
   837  
   838  /*--------------
   839      Circular
   840  ---------------*/
   841  
   842  .ui.circular.button {
   843    border-radius: 10em;
   844  }
   845  .ui.circular.button > .icon {
   846    width: 1em;
   847    vertical-align: baseline;
   848  }
   849  
   850  /*--------------
   851       Attached
   852  ---------------*/
   853  
   854  .ui.attached.button {
   855    display: block;
   856    margin: 0em;
   857    box-shadow: 0px 0px 0px 1px rgba(39, 41, 43, 0.15) !important;
   858    border-radius: 0em;
   859  }
   860  .ui.attached.top.button {
   861    border-radius: 0.2857rem 0.2857rem 0em 0em;
   862  }
   863  .ui.attached.bottom.button {
   864    border-radius: 0em 0em 0.2857rem 0.2857rem;
   865  }
   866  .ui.attached.left.button {
   867    display: inline-block;
   868    border-left: none;
   869    padding-right: 0.75em;
   870    text-align: right;
   871    border-radius: 0.2857rem 0em 0em 0.2857rem;
   872  }
   873  .ui.attached.right.button {
   874    display: inline-block;
   875    padding-left: 0.75em;
   876    text-align: left;
   877    border-radius: 0em 0.2857rem 0.2857rem 0em;
   878  }
   879  
   880  /*-------------------
   881        Or Buttons
   882  --------------------*/
   883  
   884  .ui.buttons .or {
   885    position: relative;
   886    float: left;
   887    width: 0.3em;
   888    height: 2.57142em;
   889    z-index: 3;
   890  }
   891  .ui.buttons .or:before {
   892    position: absolute;
   893    text-align: center;
   894    border-radius: 500rem;
   895    content: 'or';
   896    top: 50%;
   897    left: 50%;
   898    background-color: #ffffff;
   899    text-shadow: none;
   900    margin-top: -0.892855em;
   901    margin-left: -0.892855em;
   902    width: 1.78571em;
   903    height: 1.78571em;
   904    line-height: 1.78571em;
   905    color: rgba(0, 0, 0, 0.4);
   906    font-style: normal;
   907    font-weight: bold;
   908    box-shadow: 0px 0px 0px 1px transparent inset;
   909  }
   910  .ui.buttons .or[data-text]:before {
   911    content: attr(data-text);
   912  }
   913  
   914  /* Fluid Or */
   915  .ui.fluid.buttons .or {
   916    width: 0em !important;
   917  }
   918  .ui.fluid.buttons .or:after {
   919    display: none;
   920  }
   921  
   922  /*-------------------
   923         Attached
   924  --------------------*/
   925  
   926  
   927  /* Plural Attached */
   928  .attached.ui.buttons {
   929    margin: 0px;
   930    border-radius: 0em 0em 0em 0em;
   931  }
   932  .attached.ui.buttons .button {
   933    margin: 0em;
   934  }
   935  .attached.ui.buttons .button:first-child {
   936    border-radius: 0em 0em 0em 0em;
   937  }
   938  .attached.ui.buttons .button:last-child {
   939    border-radius: 0em 0em 0em 0em;
   940  }
   941  
   942  /* Top Side */
   943  [class*="top attached"].ui.buttons {
   944    margin-bottom: -1px;
   945    border-radius: 0.2857rem 0.2857rem 0em 0em;
   946  }
   947  [class*="top attached"].ui.buttons .button:first-child {
   948    border-radius: 0.2857rem 0em 0em 0em;
   949  }
   950  [class*="top attached"].ui.buttons .button:last-child {
   951    border-radius: 0em 0.2857rem 0em 0em;
   952  }
   953  
   954  /* Bottom Side */
   955  [class*="bottom attached"].ui.buttons {
   956    margin-top: -1px;
   957    border-radius: 0em 0em 0.2857rem 0.2857rem;
   958  }
   959  [class*="bottom attached"].ui.buttons .button:first-child {
   960    border-radius: 0em 0em 0em 0.2857rem;
   961  }
   962  [class*="bottom attached"].ui.buttons .button:last-child {
   963    border-radius: 0em 0em 0.2857rem 0em;
   964  }
   965  
   966  /* Left Side */
   967  [class*="left attached"].ui.buttons {
   968    margin-left: -1px;
   969    border-radius: 0em 0.2857rem 0.2857rem 0em;
   970  }
   971  [class*="left attached"].ui.buttons .button:first-child {
   972    margin-left: -1px;
   973    border-radius: 0em 0.2857rem 0em 0em;
   974  }
   975  [class*="left attached"].ui.buttons .button:last-child {
   976    margin-left: -1px;
   977    border-radius: 0em 0em 0.2857rem 0em;
   978  }
   979  
   980  /* Right Side */
   981  [class*="right attached"].ui.buttons,
   982  [class*="right attached"].ui.buttons .button {
   983    margin-right: -1px;
   984    border-radius: 0.2857rem 0em 0em 0.2857rem;
   985  }
   986  [class*="right attached"].ui.buttons .button:first-child {
   987    margin-left: -1px;
   988    border-radius: 0.2857rem 0em 0em 0em;
   989  }
   990  [class*="right attached"].ui.buttons .button:last-child {
   991    margin-left: -1px;
   992    border-radius: 0em 0em 0em 0.2857rem;
   993  }
   994  
   995  /* Fluid */
   996  .ui.fluid.buttons,
   997  .ui.button.fluid,
   998  .ui.fluid.buttons > .button {
   999    display: block;
  1000    width: 100%;
  1001  }
  1002  .ui.\32.buttons,
  1003  .ui.two.buttons {
  1004    width: 100%;
  1005  }
  1006  .ui.\32.buttons > .button,
  1007  .ui.two.buttons > .button {
  1008    width: 50%;
  1009  }
  1010  .ui.\33.buttons,
  1011  .ui.three.buttons {
  1012    width: 100%;
  1013  }
  1014  .ui.\33.buttons > .button,
  1015  .ui.three.buttons > .button {
  1016    width: 33.333%;
  1017  }
  1018  .ui.\34.buttons,
  1019  .ui.four.buttons {
  1020    width: 100%;
  1021  }
  1022  .ui.\34.buttons > .button,
  1023  .ui.four.buttons > .button {
  1024    width: 25%;
  1025  }
  1026  .ui.\35.buttons,
  1027  .ui.five.buttons {
  1028    width: 100%;
  1029  }
  1030  .ui.\35.buttons > .button,
  1031  .ui.five.buttons > .button {
  1032    width: 20%;
  1033  }
  1034  .ui.\36.buttons,
  1035  .ui.six.buttons {
  1036    width: 100%;
  1037  }
  1038  .ui.\36.buttons > .button,
  1039  .ui.six.buttons > .button {
  1040    width: 16.666%;
  1041  }
  1042  .ui.\37.buttons,
  1043  .ui.seven.buttons {
  1044    width: 100%;
  1045  }
  1046  .ui.\37.buttons > .button,
  1047  .ui.seven.buttons > .button {
  1048    width: 14.285%;
  1049  }
  1050  .ui.\38.buttons,
  1051  .ui.eight.buttons {
  1052    width: 100%;
  1053  }
  1054  .ui.\38.buttons > .button,
  1055  .ui.eight.buttons > .button {
  1056    width: 12.500%;
  1057  }
  1058  .ui.\39.buttons,
  1059  .ui.nine.buttons {
  1060    width: 100%;
  1061  }
  1062  .ui.\39.buttons > .button,
  1063  .ui.nine.buttons > .button {
  1064    width: 11.11%;
  1065  }
  1066  .ui.\31\30.buttons,
  1067  .ui.ten.buttons {
  1068    width: 100%;
  1069  }
  1070  .ui.\31\30.buttons > .button,
  1071  .ui.ten.buttons > .button {
  1072    width: 10%;
  1073  }
  1074  .ui.\31\31.buttons,
  1075  .ui.eleven.buttons {
  1076    width: 100%;
  1077  }
  1078  .ui.\31\31.buttons > .button,
  1079  .ui.eleven.buttons > .button {
  1080    width: 9.09%;
  1081  }
  1082  .ui.\31\32.buttons,
  1083  .ui.twelve.buttons {
  1084    width: 100%;
  1085  }
  1086  .ui.\31\32.buttons > .button,
  1087  .ui.twelve.buttons > .button {
  1088    width: 8.3333%;
  1089  }
  1090  
  1091  /* Fluid Vertical Buttons */
  1092  .ui.fluid.vertical.buttons,
  1093  .ui.fluid.vertical.buttons > .button {
  1094    display: block;
  1095    width: auto;
  1096  }
  1097  .ui.\32.vertical.buttons > .button,
  1098  .ui.two.vertical.buttons > .button {
  1099    height: 50%;
  1100  }
  1101  .ui.\33.vertical.buttons > .button,
  1102  .ui.three.vertical.buttons > .button {
  1103    height: 33.333%;
  1104  }
  1105  .ui.\34.vertical.buttons > .button,
  1106  .ui.four.vertical.buttons > .button {
  1107    height: 25%;
  1108  }
  1109  .ui.\35.vertical.buttons > .button,
  1110  .ui.five.vertical.buttons > .button {
  1111    height: 20%;
  1112  }
  1113  .ui.\36.vertical.buttons > .button,
  1114  .ui.six.vertical.buttons > .button {
  1115    height: 16.666%;
  1116  }
  1117  .ui.\37.vertical.buttons > .button,
  1118  .ui.seven.vertical.buttons > .button {
  1119    height: 14.285%;
  1120  }
  1121  .ui.\38.vertical.buttons > .button,
  1122  .ui.eight.vertical.buttons > .button {
  1123    height: 12.500%;
  1124  }
  1125  .ui.\39.vertical.buttons > .button,
  1126  .ui.nine.vertical.buttons > .button {
  1127    height: 11.11%;
  1128  }
  1129  .ui.\31\30.vertical.buttons > .button,
  1130  .ui.ten.vertical.buttons > .button {
  1131    height: 10%;
  1132  }
  1133  .ui.\31\31.vertical.buttons > .button,
  1134  .ui.eleven.vertical.buttons > .button {
  1135    height: 9.09%;
  1136  }
  1137  .ui.\31\32.vertical.buttons > .button,
  1138  .ui.twelve.vertical.buttons > .button {
  1139    height: 8.3333%;
  1140  }
  1141  
  1142  /*-------------------
  1143         Colors
  1144  --------------------*/
  1145  
  1146  
  1147  /*--- Black ---*/
  1148  
  1149  .ui.black.buttons .button,
  1150  .ui.black.button {
  1151    background-color: #1b1c1d;
  1152    color: #ffffff;
  1153    text-shadow: none;
  1154    background-image: none;
  1155  }
  1156  .ui.black.button {
  1157    box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
  1158  }
  1159  .ui.black.buttons .button:hover,
  1160  .ui.black.button:hover {
  1161    background-color: #1b1c1d;
  1162    color: #ffffff;
  1163    text-shadow: none;
  1164  }
  1165  .ui.black.buttons .button:active,
  1166  .ui.black.button:active {
  1167    background-color: #0a0a0b;
  1168    color: #ffffff;
  1169    text-shadow: none;
  1170  }
  1171  .ui.black.buttons .active.button,
  1172  .ui.black.buttons .active.button:active,
  1173  .ui.black.active.button,
  1174  .ui.black.button .active.button:active {
  1175    background-color: #0f0f10;
  1176    color: #ffffff;
  1177    text-shadow: none;
  1178  }
  1179  
  1180  /* Basic */
  1181  .ui.basic.black.buttons .button,
  1182  .ui.basic.black.button {
  1183    box-shadow: 0px 0px 0px 2px rgba(39, 41, 43, 0.15) inset !important;
  1184    color: rgba(0, 0, 0, 0.6) !important;
  1185  }
  1186  .ui.basic.black.buttons .button:hover,
  1187  .ui.basic.black.button:hover {
  1188    background: transparent !important;
  1189    box-shadow: 0px 0px 0px 2px #1b1c1d inset !important;
  1190    color: #1b1c1d !important;
  1191  }
  1192  .ui.basic.black.buttons .button:active,
  1193  .ui.basic.black.button:active {
  1194    box-shadow: 0px 0px 0px 2px #0a0a0b inset !important;
  1195    color: #0a0a0b !important;
  1196  }
  1197  .ui.basic.black.buttons .active.button,
  1198  .ui.basic.black.active.button {
  1199    background: transparent !important;
  1200    box-shadow: 0px 0px 0px 2px #0a0a0b inset !important;
  1201    color: #0a0a0b !important;
  1202  }
  1203  .ui.buttons > .basic.black.button:not(:first-child) {
  1204    margin-left: -2px;
  1205  }
  1206  
  1207  /* Inverted */
  1208  .ui.inverted.black.buttons .button,
  1209  .ui.inverted.black.button {
  1210    background-color: transparent;
  1211    box-shadow: 0px 0px 0px 2px #d4d4d5 inset !important;
  1212    color: #ffffff;
  1213  }
  1214  .ui.inverted.black.buttons .button:hover,
  1215  .ui.inverted.black.button:hover {
  1216    box-shadow: 0px 0px 0px 2px #333333 inset !important;
  1217    background-color: #333333;
  1218    color: #ffffff;
  1219  }
  1220  .ui.inverted.black.buttons .active.button,
  1221  .ui.inverted.black.active.button {
  1222    box-shadow: 0px 0px 0px 2px #333333 inset !important;
  1223    background-color: #333333;
  1224    color: #ffffff;
  1225  }
  1226  .ui.inverted.black.buttons .button:active,
  1227  .ui.inverted.black.button:active {
  1228    box-shadow: 0px 0px 0px 2px #212121 inset !important;
  1229    background-color: #212121;
  1230    color: #ffffff;
  1231  }
  1232  
  1233  /* Inverted Basic */
  1234  .ui.inverted.black.basic.buttons .button,
  1235  .ui.inverted.black.buttons .basic.button,
  1236  .ui.inverted.black.basic.button {
  1237    background-color: transparent;
  1238    box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  1239    color: #ffffff !important;
  1240  }
  1241  .ui.inverted.black.basic.buttons .button:hover,
  1242  .ui.inverted.black.buttons .basic.button:hover,
  1243  .ui.inverted.black.basic.button:hover {
  1244    box-shadow: 0px 0px 0px 2px #333333 inset !important;
  1245    color: #ffffff !important;
  1246  }
  1247  .ui.inverted.black.basic.buttons .active.button,
  1248  .ui.inverted.black.buttons .basic.active.button,
  1249  .ui.inverted.black.basic.active.button {
  1250    box-shadow: 0px 0px 0px 2px #333333 inset !important;
  1251    color: #ffffff !important;
  1252  }
  1253  .ui.inverted.black.basic.buttons .button:active,
  1254  .ui.inverted.black.buttons .basic.button:active,
  1255  .ui.inverted.black.basic.button:active {
  1256    box-shadow: 0px 0px 0px 2px #212121 inset !important;
  1257    color: #ffffff !important;
  1258  }
  1259  
  1260  /*--- Blue ---*/
  1261  
  1262  .ui.blue.buttons .button,
  1263  .ui.blue.button {
  1264    background-color: #0097c9;
  1265    color: #ffffff;
  1266    text-shadow: none;
  1267    background-image: none;
  1268  }
  1269  .ui.blue.button {
  1270    box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
  1271  }
  1272  .ui.blue.buttons .button:hover,
  1273  .ui.blue.button:hover {
  1274    background-color: #0079a2;
  1275    color: #ffffff;
  1276    text-shadow: none;
  1277  }
  1278  .ui.blue.buttons .button:active,
  1279  .ui.blue.button:active {
  1280    background-color: #00536f;
  1281    color: #ffffff;
  1282    text-shadow: none;
  1283  }
  1284  .ui.blue.buttons .active.button,
  1285  .ui.blue.buttons .active.button:active,
  1286  .ui.blue.active.button,
  1287  .ui.blue.button .active.button:active {
  1288    background-color: #005b7a;
  1289    color: #ffffff;
  1290    text-shadow: none;
  1291  }
  1292  
  1293  /* Basic */
  1294  .ui.basic.blue.buttons .button,
  1295  .ui.basic.blue.button {
  1296    box-shadow: 0px 0px 0px 2px rgba(39, 41, 43, 0.15) inset !important;
  1297    color: rgba(0, 0, 0, 0.6) !important;
  1298  }
  1299  .ui.basic.blue.buttons .button:hover,
  1300  .ui.basic.blue.button:hover {
  1301    background: transparent !important;
  1302    box-shadow: 0px 0px 0px 2px #0079a2 inset !important;
  1303    color: #0079a2 !important;
  1304  }
  1305  .ui.basic.blue.buttons .button:active,
  1306  .ui.basic.blue.button:active {
  1307    box-shadow: 0px 0px 0px 2px #00536f inset !important;
  1308    color: #00536f !important;
  1309  }
  1310  .ui.basic.blue.buttons .active.button,
  1311  .ui.basic.blue.active.button {
  1312    background: transparent !important;
  1313    box-shadow: 0px 0px 0px 2px #00536f inset !important;
  1314    color: #00536f !important;
  1315  }
  1316  .ui.buttons > .basic.blue.button:not(:first-child) {
  1317    margin-left: -2px;
  1318  }
  1319  
  1320  /* Inverted */
  1321  .ui.inverted.blue.buttons .button,
  1322  .ui.inverted.blue.button {
  1323    background-color: transparent;
  1324    box-shadow: 0px 0px 0px 2px #0097c9 inset !important;
  1325    color: #0097c9;
  1326  }
  1327  .ui.inverted.blue.buttons .button:hover,
  1328  .ui.inverted.blue.button:hover {
  1329    box-shadow: 0px 0px 0px 2px #0097c9 inset !important;
  1330    background-color: #0097c9;
  1331    color: #ffffff;
  1332  }
  1333  .ui.inverted.blue.buttons .active.button,
  1334  .ui.inverted.blue.active.button {
  1335    box-shadow: 0px 0px 0px 2px #0097c9 inset !important;
  1336    background-color: #0097c9;
  1337    color: #ffffff;
  1338  }
  1339  .ui.inverted.blue.buttons .button:active,
  1340  .ui.inverted.blue.button:active {
  1341    box-shadow: 0px 0px 0px 2px #007ca5 inset !important;
  1342    background-color: #007ca5;
  1343    color: #ffffff;
  1344  }
  1345  
  1346  /* Inverted Basic */
  1347  .ui.inverted.blue.basic.buttons .button,
  1348  .ui.inverted.blue.buttons .basic.button,
  1349  .ui.inverted.blue.basic.button {
  1350    background-color: transparent;
  1351    box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  1352    color: #ffffff !important;
  1353  }
  1354  .ui.inverted.blue.basic.buttons .button:hover,
  1355  .ui.inverted.blue.buttons .basic.button:hover,
  1356  .ui.inverted.blue.basic.button:hover {
  1357    box-shadow: 0px 0px 0px 2px #0097c9 inset !important;
  1358    color: #0097c9 !important;
  1359  }
  1360  .ui.inverted.blue.basic.buttons .active.button,
  1361  .ui.inverted.blue.buttons .basic.active.button,
  1362  .ui.inverted.blue.basic.active.button {
  1363    box-shadow: 0px 0px 0px 2px #0097c9 inset !important;
  1364    color: #0097c9 !important;
  1365  }
  1366  .ui.inverted.blue.basic.buttons .button:active,
  1367  .ui.inverted.blue.buttons .basic.button:active,
  1368  .ui.inverted.blue.basic.button:active {
  1369    box-shadow: 0px 0px 0px 2px #007ca5 inset !important;
  1370    color: #0097c9 !important;
  1371  }
  1372  
  1373  /*--- Green ---*/
  1374  
  1375  .ui.green.buttons .button,
  1376  .ui.green.button {
  1377    background-color: #5bbd72;
  1378    color: #ffffff;
  1379    text-shadow: none;
  1380    background-image: none;
  1381  }
  1382  .ui.green.button {
  1383    box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
  1384  }
  1385  .ui.green.buttons .button:hover,
  1386  .ui.green.button:hover {
  1387    background-color: #66c17b;
  1388    color: #ffffff;
  1389    text-shadow: none;
  1390  }
  1391  .ui.green.buttons .button:active,
  1392  .ui.green.button:active {
  1393    background-color: #46ae5f;
  1394    color: #ffffff;
  1395    text-shadow: none;
  1396  }
  1397  .ui.green.buttons .active.button,
  1398  .ui.green.buttons .active.button:active,
  1399  .ui.green.active.button,
  1400  .ui.green.button .active.button:active {
  1401    background-color: #49b562;
  1402    color: #ffffff;
  1403    text-shadow: none;
  1404  }
  1405  
  1406  /* Basic */
  1407  .ui.basic.green.buttons .button,
  1408  .ui.basic.green.button {
  1409    box-shadow: 0px 0px 0px 2px rgba(39, 41, 43, 0.15) inset !important;
  1410    color: rgba(0, 0, 0, 0.6) !important;
  1411  }
  1412  .ui.basic.green.buttons .button:hover,
  1413  .ui.basic.green.button:hover {
  1414    background: transparent !important;
  1415    box-shadow: 0px 0px 0px 2px #66c17b inset !important;
  1416    color: #66c17b !important;
  1417  }
  1418  .ui.basic.green.buttons .button:active,
  1419  .ui.basic.green.button:active {
  1420    box-shadow: 0px 0px 0px 2px #46ae5f inset !important;
  1421    color: #46ae5f !important;
  1422  }
  1423  .ui.basic.green.buttons .active.button,
  1424  .ui.basic.green.active.button {
  1425    background: transparent !important;
  1426    box-shadow: 0px 0px 0px 2px #46ae5f inset !important;
  1427    color: #46ae5f !important;
  1428  }
  1429  .ui.buttons > .basic.green.button:not(:first-child) {
  1430    margin-left: -2px;
  1431  }
  1432  
  1433  /* Inverted */
  1434  .ui.inverted.green.buttons .button,
  1435  .ui.inverted.green.button {
  1436    background-color: transparent;
  1437    box-shadow: 0px 0px 0px 2px #2ecc40 inset !important;
  1438    color: #2ecc40;
  1439  }
  1440  .ui.inverted.green.buttons .button:hover,
  1441  .ui.inverted.green.button:hover {
  1442    box-shadow: 0px 0px 0px 2px #2ecc40 inset !important;
  1443    background-color: #2ecc40;
  1444    color: #ffffff;
  1445  }
  1446  .ui.inverted.green.buttons .active.button,
  1447  .ui.inverted.green.active.button {
  1448    box-shadow: 0px 0px 0px 2px #2ecc40 inset !important;
  1449    background-color: #2ecc40;
  1450    color: #ffffff;
  1451  }
  1452  .ui.inverted.green.buttons .button:active,
  1453  .ui.inverted.green.button:active {
  1454    box-shadow: 0px 0px 0px 2px #27af37 inset !important;
  1455    background-color: #27af37;
  1456    color: #ffffff;
  1457  }
  1458  
  1459  /* Inverted Basic */
  1460  .ui.inverted.green.basic.buttons .button,
  1461  .ui.inverted.green.buttons .basic.button,
  1462  .ui.inverted.green.basic.button {
  1463    background-color: transparent;
  1464    box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  1465    color: #ffffff !important;
  1466  }
  1467  .ui.inverted.green.basic.buttons .button:hover,
  1468  .ui.inverted.green.buttons .basic.button:hover,
  1469  .ui.inverted.green.basic.button:hover {
  1470    box-shadow: 0px 0px 0px 2px #2ecc40 inset !important;
  1471    color: #2ecc40 !important;
  1472  }
  1473  .ui.inverted.green.basic.buttons .active.button,
  1474  .ui.inverted.green.buttons .basic.active.button,
  1475  .ui.inverted.green.basic.active.button {
  1476    box-shadow: 0px 0px 0px 2px #2ecc40 inset !important;
  1477    color: #2ecc40 !important;
  1478  }
  1479  .ui.inverted.green.basic.buttons .button:active,
  1480  .ui.inverted.green.buttons .basic.button:active,
  1481  .ui.inverted.green.basic.button:active {
  1482    box-shadow: 0px 0px 0px 2px #27af37 inset !important;
  1483    color: #2ecc40 !important;
  1484  }
  1485  
  1486  /*--- Orange ---*/
  1487  
  1488  .ui.orange.buttons .button,
  1489  .ui.orange.button {
  1490    background-color: #e07b53;
  1491    color: #ffffff;
  1492    text-shadow: none;
  1493    background-image: none;
  1494  }
  1495  .ui.orange.button {
  1496    box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
  1497  }
  1498  .ui.orange.buttons .button:hover,
  1499  .ui.orange.button:hover {
  1500    background-color: #e28560;
  1501    color: #ffffff;
  1502    text-shadow: none;
  1503  }
  1504  .ui.orange.buttons .button:active,
  1505  .ui.orange.button:active {
  1506    background-color: #db6435;
  1507    color: #ffffff;
  1508    text-shadow: none;
  1509  }
  1510  .ui.orange.buttons .active.button,
  1511  .ui.orange.buttons .active.button:active,
  1512  .ui.orange.active.button,
  1513  .ui.orange.button .active.button:active {
  1514    background-color: #dc6a3d;
  1515    color: #ffffff;
  1516    text-shadow: none;
  1517  }
  1518  
  1519  /* Basic */
  1520  .ui.basic.orange.buttons .button,
  1521  .ui.basic.orange.button {
  1522    box-shadow: 0px 0px 0px 2px rgba(39, 41, 43, 0.15) inset !important;
  1523    color: rgba(0, 0, 0, 0.6) !important;
  1524  }
  1525  .ui.basic.orange.buttons .button:hover,
  1526  .ui.basic.orange.button:hover {
  1527    background: transparent !important;
  1528    box-shadow: 0px 0px 0px 2px #e28560 inset !important;
  1529    color: #e28560 !important;
  1530  }
  1531  .ui.basic.orange.buttons .button:active,
  1532  .ui.basic.orange.button:active {
  1533    box-shadow: 0px 0px 0px 2px #db6435 inset !important;
  1534    color: #db6435 !important;
  1535  }
  1536  .ui.basic.orange.buttons .active.button,
  1537  .ui.basic.orange.active.button {
  1538    background: transparent !important;
  1539    box-shadow: 0px 0px 0px 2px #db6435 inset !important;
  1540    color: #db6435 !important;
  1541  }
  1542  .ui.buttons > .basic.orange.button:not(:first-child) {
  1543    margin-left: -2px;
  1544  }
  1545  
  1546  /* Inverted */
  1547  .ui.inverted.orange.buttons .button,
  1548  .ui.inverted.orange.button {
  1549    background-color: transparent;
  1550    box-shadow: 0px 0px 0px 2px #ff851b inset !important;
  1551    color: #ff851b;
  1552  }
  1553  .ui.inverted.orange.buttons .button:hover,
  1554  .ui.inverted.orange.button:hover {
  1555    box-shadow: 0px 0px 0px 2px #ff851b inset !important;
  1556    background-color: #ff851b;
  1557    color: #ffffff;
  1558  }
  1559  .ui.inverted.orange.buttons .active.button,
  1560  .ui.inverted.orange.active.button {
  1561    box-shadow: 0px 0px 0px 2px #ff851b inset !important;
  1562    background-color: #ff851b;
  1563    color: #ffffff;
  1564  }
  1565  .ui.inverted.orange.buttons .button:active,
  1566  .ui.inverted.orange.button:active {
  1567    box-shadow: 0px 0px 0px 2px #f67300 inset !important;
  1568    background-color: #f67300;
  1569    color: #ffffff;
  1570  }
  1571  
  1572  /* Inverted Basic */
  1573  .ui.inverted.orange.basic.buttons .button,
  1574  .ui.inverted.orange.buttons .basic.button,
  1575  .ui.inverted.orange.basic.button {
  1576    background-color: transparent;
  1577    box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  1578    color: #ffffff !important;
  1579  }
  1580  .ui.inverted.orange.basic.buttons .button:hover,
  1581  .ui.inverted.orange.buttons .basic.button:hover,
  1582  .ui.inverted.orange.basic.button:hover {
  1583    box-shadow: 0px 0px 0px 2px #ff851b inset !important;
  1584    color: #ff851b !important;
  1585  }
  1586  .ui.inverted.orange.basic.buttons .active.button,
  1587  .ui.inverted.orange.buttons .basic.active.button,
  1588  .ui.inverted.orange.basic.active.button {
  1589    box-shadow: 0px 0px 0px 2px #ff851b inset !important;
  1590    color: #ff851b !important;
  1591  }
  1592  .ui.inverted.orange.basic.buttons .button:active,
  1593  .ui.inverted.orange.buttons .basic.button:active,
  1594  .ui.inverted.orange.basic.button:active {
  1595    box-shadow: 0px 0px 0px 2px #f67300 inset !important;
  1596    color: #ff851b !important;
  1597  }
  1598  
  1599  /*--- Pink ---*/
  1600  
  1601  .ui.pink.buttons .button,
  1602  .ui.pink.button {
  1603    background-color: #d9499a;
  1604    color: #ffffff;
  1605    text-shadow: none;
  1606    background-image: none;
  1607  }
  1608  .ui.pink.button {
  1609    box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
  1610  }
  1611  .ui.pink.buttons .button:hover,
  1612  .ui.pink.button:hover {
  1613    background-color: #dc56a1;
  1614    color: #ffffff;
  1615    text-shadow: none;
  1616  }
  1617  .ui.pink.buttons .button:active,
  1618  .ui.pink.button:active {
  1619    background-color: #d22c8a;
  1620    color: #ffffff;
  1621    text-shadow: none;
  1622  }
  1623  .ui.pink.buttons .active.button,
  1624  .ui.pink.buttons .active.button:active,
  1625  .ui.pink.active.button,
  1626  .ui.pink.button .active.button:active {
  1627    background-color: #d5348e;
  1628    color: #ffffff;
  1629    text-shadow: none;
  1630  }
  1631  
  1632  /* Basic */
  1633  .ui.basic.pink.buttons .button,
  1634  .ui.basic.pink.button {
  1635    box-shadow: 0px 0px 0px 2px rgba(39, 41, 43, 0.15) inset !important;
  1636    color: rgba(0, 0, 0, 0.6) !important;
  1637  }
  1638  .ui.basic.pink.buttons .button:hover,
  1639  .ui.basic.pink.button:hover {
  1640    background: transparent !important;
  1641    box-shadow: 0px 0px 0px 2px #dc56a1 inset !important;
  1642    color: #dc56a1 !important;
  1643  }
  1644  .ui.basic.pink.buttons .button:active,
  1645  .ui.basic.pink.button:active {
  1646    box-shadow: 0px 0px 0px 2px #d22c8a inset !important;
  1647    color: #d22c8a !important;
  1648  }
  1649  .ui.basic.pink.buttons .active.button,
  1650  .ui.basic.pink.active.button {
  1651    background: transparent !important;
  1652    box-shadow: 0px 0px 0px 2px #d22c8a inset !important;
  1653    color: #d22c8a !important;
  1654  }
  1655  .ui.buttons > .basic.pink.button:not(:first-child) {
  1656    margin-left: -2px;
  1657  }
  1658  
  1659  /* Inverted */
  1660  .ui.inverted.pink.buttons .button,
  1661  .ui.inverted.pink.button {
  1662    background-color: transparent;
  1663    box-shadow: 0px 0px 0px 2px #ff8edf inset !important;
  1664    color: #ff8edf;
  1665  }
  1666  .ui.inverted.pink.buttons .button:hover,
  1667  .ui.inverted.pink.button:hover {
  1668    box-shadow: 0px 0px 0px 2px #ff8edf inset !important;
  1669    background-color: #ff8edf;
  1670    color: #ffffff;
  1671  }
  1672  .ui.inverted.pink.buttons .active.button,
  1673  .ui.inverted.pink.active.button {
  1674    box-shadow: 0px 0px 0px 2px #ff8edf inset !important;
  1675    background-color: #ff8edf;
  1676    color: #ffffff;
  1677  }
  1678  .ui.inverted.pink.buttons .button:active,
  1679  .ui.inverted.pink.button:active {
  1680    box-shadow: 0px 0px 0px 2px #ff6ad5 inset !important;
  1681    background-color: #ff6ad5;
  1682    color: #ffffff;
  1683  }
  1684  
  1685  /* Inverted Basic */
  1686  .ui.inverted.pink.basic.buttons .button,
  1687  .ui.inverted.pink.buttons .basic.button,
  1688  .ui.inverted.pink.basic.button {
  1689    background-color: transparent;
  1690    box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  1691    color: #ffffff !important;
  1692  }
  1693  .ui.inverted.pink.basic.buttons .button:hover,
  1694  .ui.inverted.pink.buttons .basic.button:hover,
  1695  .ui.inverted.pink.basic.button:hover {
  1696    box-shadow: 0px 0px 0px 2px #ff8edf inset !important;
  1697    color: #ff8edf !important;
  1698  }
  1699  .ui.inverted.pink.basic.buttons .active.button,
  1700  .ui.inverted.pink.buttons .basic.active.button,
  1701  .ui.inverted.pink.basic.active.button {
  1702    box-shadow: 0px 0px 0px 2px #ff8edf inset !important;
  1703    color: #ff8edf !important;
  1704  }
  1705  .ui.inverted.pink.basic.buttons .button:active,
  1706  .ui.inverted.pink.buttons .basic.button:active,
  1707  .ui.inverted.pink.basic.button:active {
  1708    box-shadow: 0px 0px 0px 2px #ff6ad5 inset !important;
  1709    color: #ff8edf !important;
  1710  }
  1711  
  1712  /*--- Purple ---*/
  1713  
  1714  .ui.purple.buttons .button,
  1715  .ui.purple.button {
  1716    background-color: #564f8a;
  1717    color: #ffffff;
  1718    text-shadow: none;
  1719    background-image: none;
  1720  }
  1721  .ui.purple.button {
  1722    box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
  1723  }
  1724  .ui.purple.buttons .button:hover,
  1725  .ui.purple.button:hover {
  1726    background-color: #5c5594;
  1727    color: #ffffff;
  1728    text-shadow: none;
  1729  }
  1730  .ui.purple.buttons .button:active,
  1731  .ui.purple.button:active {
  1732    background-color: #484273;
  1733    color: #ffffff;
  1734    text-shadow: none;
  1735  }
  1736  .ui.purple.buttons .active.button,
  1737  .ui.purple.buttons .active.button:active,
  1738  .ui.purple.active.button,
  1739  .ui.purple.button .active.button:active {
  1740    background-color: #4c467a;
  1741    color: #ffffff;
  1742    text-shadow: none;
  1743  }
  1744  
  1745  /* Basic */
  1746  .ui.basic.purple.buttons .button,
  1747  .ui.basic.purple.button {
  1748    box-shadow: 0px 0px 0px 2px rgba(39, 41, 43, 0.15) inset !important;
  1749    color: rgba(0, 0, 0, 0.6) !important;
  1750  }
  1751  .ui.basic.purple.buttons .button:hover,
  1752  .ui.basic.purple.button:hover {
  1753    background: transparent !important;
  1754    box-shadow: 0px 0px 0px 2px #5c5594 inset !important;
  1755    color: #5c5594 !important;
  1756  }
  1757  .ui.basic.purple.buttons .button:active,
  1758  .ui.basic.purple.button:active {
  1759    box-shadow: 0px 0px 0px 2px #484273 inset !important;
  1760    color: #484273 !important;
  1761  }
  1762  .ui.basic.purple.buttons .active.button,
  1763  .ui.basic.purple.active.button {
  1764    background: transparent !important;
  1765    box-shadow: 0px 0px 0px 2px #484273 inset !important;
  1766    color: #484273 !important;
  1767  }
  1768  .ui.buttons > .basic.purple.button:not(:first-child) {
  1769    margin-left: -2px;
  1770  }
  1771  
  1772  /* Inverted */
  1773  .ui.inverted.purple.buttons .button,
  1774  .ui.inverted.purple.button {
  1775    background-color: transparent;
  1776    box-shadow: 0px 0px 0px 2px #cdc6ff inset !important;
  1777    color: #cdc6ff;
  1778  }
  1779  .ui.inverted.purple.buttons .button:hover,
  1780  .ui.inverted.purple.button:hover {
  1781    box-shadow: 0px 0px 0px 2px #cdc6ff inset !important;
  1782    background-color: #cdc6ff;
  1783    color: #1b1c1d;
  1784  }
  1785  .ui.inverted.purple.buttons .active.button,
  1786  .ui.inverted.purple.active.button {
  1787    box-shadow: 0px 0px 0px 2px #cdc6ff inset !important;
  1788    background-color: #cdc6ff;
  1789    color: #1b1c1d;
  1790  }
  1791  .ui.inverted.purple.buttons .button:active,
  1792  .ui.inverted.purple.button:active {
  1793    box-shadow: 0px 0px 0px 2px #aea2ff inset !important;
  1794    background-color: #aea2ff;
  1795    color: #1b1c1d;
  1796  }
  1797  
  1798  /* Inverted Basic */
  1799  .ui.inverted.purple.basic.buttons .button,
  1800  .ui.inverted.purple.buttons .basic.button,
  1801  .ui.inverted.purple.basic.button {
  1802    background-color: transparent;
  1803    box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  1804    color: #ffffff !important;
  1805  }
  1806  .ui.inverted.purple.basic.buttons .button:hover,
  1807  .ui.inverted.purple.buttons .basic.button:hover,
  1808  .ui.inverted.purple.basic.button:hover {
  1809    box-shadow: 0px 0px 0px 2px #cdc6ff inset !important;
  1810    color: #cdc6ff !important;
  1811  }
  1812  .ui.inverted.purple.basic.buttons .active.button,
  1813  .ui.inverted.purple.buttons .basic.active.button,
  1814  .ui.inverted.purple.basic.active.button {
  1815    box-shadow: 0px 0px 0px 2px #cdc6ff inset !important;
  1816    color: #cdc6ff !important;
  1817  }
  1818  .ui.inverted.purple.basic.buttons .button:active,
  1819  .ui.inverted.purple.buttons .basic.button:active,
  1820  .ui.inverted.purple.basic.button:active {
  1821    box-shadow: 0px 0px 0px 2px #aea2ff inset !important;
  1822    color: #cdc6ff !important;
  1823  }
  1824  
  1825  /*--- Red ---*/
  1826  
  1827  .ui.red.buttons .button,
  1828  .ui.red.button {
  1829    background-color: #d95c5c;
  1830    color: #ffffff;
  1831    text-shadow: none;
  1832    background-image: none;
  1833  }
  1834  .ui.red.button {
  1835    box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
  1836  }
  1837  .ui.red.buttons .button:hover,
  1838  .ui.red.button:hover {
  1839    background-color: #dc6868;
  1840    color: #ffffff;
  1841    text-shadow: none;
  1842  }
  1843  .ui.red.buttons .button:active,
  1844  .ui.red.button:active {
  1845    background-color: #d23f3f;
  1846    color: #ffffff;
  1847    text-shadow: none;
  1848  }
  1849  .ui.red.buttons .active.button,
  1850  .ui.red.buttons .active.button:active,
  1851  .ui.red.active.button,
  1852  .ui.red.button .active.button:active {
  1853    background-color: #d44747;
  1854    color: #ffffff;
  1855    text-shadow: none;
  1856  }
  1857  
  1858  /* Basic */
  1859  .ui.basic.red.buttons .button,
  1860  .ui.basic.red.button {
  1861    box-shadow: 0px 0px 0px 2px rgba(39, 41, 43, 0.15) inset !important;
  1862    color: rgba(0, 0, 0, 0.6) !important;
  1863  }
  1864  .ui.basic.red.buttons .button:hover,
  1865  .ui.basic.red.button:hover {
  1866    background: transparent !important;
  1867    box-shadow: 0px 0px 0px 2px #dc6868 inset !important;
  1868    color: #dc6868 !important;
  1869  }
  1870  .ui.basic.red.buttons .button:active,
  1871  .ui.basic.red.button:active {
  1872    box-shadow: 0px 0px 0px 2px #d23f3f inset !important;
  1873    color: #d23f3f !important;
  1874  }
  1875  .ui.basic.red.buttons .active.button,
  1876  .ui.basic.red.active.button {
  1877    background: transparent !important;
  1878    box-shadow: 0px 0px 0px 2px #d23f3f inset !important;
  1879    color: #d23f3f !important;
  1880  }
  1881  .ui.buttons > .basic.red.button:not(:first-child) {
  1882    margin-left: -2px;
  1883  }
  1884  
  1885  /* Inverted */
  1886  .ui.inverted.red.buttons .button,
  1887  .ui.inverted.red.button {
  1888    background-color: transparent;
  1889    box-shadow: 0px 0px 0px 2px #ff695e inset !important;
  1890    color: #ff695e;
  1891  }
  1892  .ui.inverted.red.buttons .button:hover,
  1893  .ui.inverted.red.button:hover {
  1894    box-shadow: 0px 0px 0px 2px #ff695e inset !important;
  1895    background-color: #ff695e;
  1896    color: #ffffff;
  1897  }
  1898  .ui.inverted.red.buttons .active.button,
  1899  .ui.inverted.red.active.button {
  1900    box-shadow: 0px 0px 0px 2px #ff695e inset !important;
  1901    background-color: #ff695e;
  1902    color: #ffffff;
  1903  }
  1904  .ui.inverted.red.buttons .button:active,
  1905  .ui.inverted.red.button:active {
  1906    box-shadow: 0px 0px 0px 2px #ff483a inset !important;
  1907    background-color: #ff483a;
  1908    color: #ffffff;
  1909  }
  1910  
  1911  /* Inverted Basic */
  1912  .ui.inverted.red.basic.buttons .button,
  1913  .ui.inverted.red.buttons .basic.button,
  1914  .ui.inverted.red.basic.button {
  1915    background-color: transparent;
  1916    box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  1917    color: #ffffff !important;
  1918  }
  1919  .ui.inverted.red.basic.buttons .button:hover,
  1920  .ui.inverted.red.buttons .basic.button:hover,
  1921  .ui.inverted.red.basic.button:hover {
  1922    box-shadow: 0px 0px 0px 2px #ff695e inset !important;
  1923    color: #ff695e !important;
  1924  }
  1925  .ui.inverted.red.basic.buttons .active.button,
  1926  .ui.inverted.red.buttons .basic.active.button,
  1927  .ui.inverted.red.basic.active.button {
  1928    box-shadow: 0px 0px 0px 2px #ff695e inset !important;
  1929    color: #ff695e !important;
  1930  }
  1931  .ui.inverted.red.basic.buttons .button:active,
  1932  .ui.inverted.red.buttons .basic.button:active,
  1933  .ui.inverted.red.basic.button:active {
  1934    box-shadow: 0px 0px 0px 2px #ff483a inset !important;
  1935    color: #ff695e !important;
  1936  }
  1937  
  1938  /*--- Teal ---*/
  1939  
  1940  .ui.teal.buttons .button,
  1941  .ui.teal.button {
  1942    background-color: #00b5ad;
  1943    color: #ffffff;
  1944    text-shadow: none;
  1945    background-image: none;
  1946  }
  1947  .ui.teal.button {
  1948    box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
  1949  }
  1950  .ui.teal.buttons .button:hover,
  1951  .ui.teal.button:hover {
  1952    background-color: #00c4bc;
  1953    color: #ffffff;
  1954    text-shadow: none;
  1955  }
  1956  .ui.teal.buttons .button:active,
  1957  .ui.teal.button:active {
  1958    background-color: #00918b;
  1959    color: #ffffff;
  1960    text-shadow: none;
  1961  }
  1962  .ui.teal.buttons .active.button,
  1963  .ui.teal.buttons .active.button:active,
  1964  .ui.teal.active.button,
  1965  .ui.teal.button .active.button:active {
  1966    background-color: #009c95;
  1967    color: #ffffff;
  1968    text-shadow: none;
  1969  }
  1970  
  1971  /* Basic */
  1972  .ui.basic.teal.buttons .button,
  1973  .ui.basic.teal.button {
  1974    box-shadow: 0px 0px 0px 2px rgba(39, 41, 43, 0.15) inset !important;
  1975    color: rgba(0, 0, 0, 0.6) !important;
  1976  }
  1977  .ui.basic.teal.buttons .button:hover,
  1978  .ui.basic.teal.button:hover {
  1979    background: transparent !important;
  1980    box-shadow: 0px 0px 0px 2px #00c4bc inset !important;
  1981    color: #00c4bc !important;
  1982  }
  1983  .ui.basic.teal.buttons .button:active,
  1984  .ui.basic.teal.button:active {
  1985    box-shadow: 0px 0px 0px 2px #00918b inset !important;
  1986    color: #00918b !important;
  1987  }
  1988  .ui.basic.teal.buttons .active.button,
  1989  .ui.basic.teal.active.button {
  1990    background: transparent !important;
  1991    box-shadow: 0px 0px 0px 2px #00918b inset !important;
  1992    color: #00918b !important;
  1993  }
  1994  .ui.buttons > .basic.teal.button:not(:first-child) {
  1995    margin-left: -2px;
  1996  }
  1997  
  1998  /* Inverted */
  1999  .ui.inverted.teal.buttons .button,
  2000  .ui.inverted.teal.button {
  2001    background-color: transparent;
  2002    box-shadow: 0px 0px 0px 2px #6dffff inset !important;
  2003    color: #6dffff;
  2004  }
  2005  .ui.inverted.teal.buttons .button:hover,
  2006  .ui.inverted.teal.button:hover {
  2007    box-shadow: 0px 0px 0px 2px #6dffff inset !important;
  2008    background-color: #6dffff;
  2009    color: #1b1c1d;
  2010  }
  2011  .ui.inverted.teal.buttons .active.button,
  2012  .ui.inverted.teal.active.button {
  2013    box-shadow: 0px 0px 0px 2px #6dffff inset !important;
  2014    background-color: #6dffff;
  2015    color: #1b1c1d;
  2016  }
  2017  .ui.inverted.teal.buttons .button:active,
  2018  .ui.inverted.teal.button:active {
  2019    box-shadow: 0px 0px 0px 2px #49ffff inset !important;
  2020    background-color: #49ffff;
  2021    color: #1b1c1d;
  2022  }
  2023  
  2024  /* Inverted Basic */
  2025  .ui.inverted.teal.basic.buttons .button,
  2026  .ui.inverted.teal.buttons .basic.button,
  2027  .ui.inverted.teal.basic.button {
  2028    background-color: transparent;
  2029    box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  2030    color: #ffffff !important;
  2031  }
  2032  .ui.inverted.teal.basic.buttons .button:hover,
  2033  .ui.inverted.teal.buttons .basic.button:hover,
  2034  .ui.inverted.teal.basic.button:hover {
  2035    box-shadow: 0px 0px 0px 2px #6dffff inset !important;
  2036    color: #6dffff !important;
  2037  }
  2038  .ui.inverted.teal.basic.buttons .active.button,
  2039  .ui.inverted.teal.buttons .basic.active.button,
  2040  .ui.inverted.teal.basic.active.button {
  2041    box-shadow: 0px 0px 0px 2px #6dffff inset !important;
  2042    color: #6dffff !important;
  2043  }
  2044  .ui.inverted.teal.basic.buttons .button:active,
  2045  .ui.inverted.teal.buttons .basic.button:active,
  2046  .ui.inverted.teal.basic.button:active {
  2047    box-shadow: 0px 0px 0px 2px #49ffff inset !important;
  2048    color: #6dffff !important;
  2049  }
  2050  
  2051  /*--- Yellow ---*/
  2052  
  2053  .ui.yellow.buttons .button,
  2054  .ui.yellow.button {
  2055    background-color: #f2c61f;
  2056    color: #ffffff;
  2057    text-shadow: none;
  2058    background-image: none;
  2059  }
  2060  .ui.yellow.button {
  2061    box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
  2062  }
  2063  .ui.yellow.buttons .button:hover,
  2064  .ui.yellow.button:hover {
  2065    background-color: #f3ca2d;
  2066    color: #ffffff;
  2067    text-shadow: none;
  2068  }
  2069  .ui.yellow.buttons .button:active,
  2070  .ui.yellow.button:active {
  2071    background-color: #e0b40d;
  2072    color: #ffffff;
  2073    text-shadow: none;
  2074  }
  2075  .ui.yellow.buttons .active.button,
  2076  .ui.yellow.buttons .active.button:active,
  2077  .ui.yellow.active.button,
  2078  .ui.yellow.button .active.button:active {
  2079    background-color: #eabc0e;
  2080    color: #ffffff;
  2081    text-shadow: none;
  2082  }
  2083  
  2084  /* Basic */
  2085  .ui.basic.yellow.buttons .button,
  2086  .ui.basic.yellow.button {
  2087    box-shadow: 0px 0px 0px 2px rgba(39, 41, 43, 0.15) inset !important;
  2088    color: rgba(0, 0, 0, 0.6) !important;
  2089  }
  2090  .ui.basic.yellow.buttons .button:hover,
  2091  .ui.basic.yellow.button:hover {
  2092    background: transparent !important;
  2093    box-shadow: 0px 0px 0px 2px #f3ca2d inset !important;
  2094    color: #f3ca2d !important;
  2095  }
  2096  .ui.basic.yellow.buttons .button:active,
  2097  .ui.basic.yellow.button:active {
  2098    box-shadow: 0px 0px 0px 2px #e0b40d inset !important;
  2099    color: #e0b40d !important;
  2100  }
  2101  .ui.basic.yellow.buttons .active.button,
  2102  .ui.basic.yellow.active.button {
  2103    background: transparent !important;
  2104    box-shadow: 0px 0px 0px 2px #e0b40d inset !important;
  2105    color: #e0b40d !important;
  2106  }
  2107  .ui.buttons > .basic.yellow.button:not(:first-child) {
  2108    margin-left: -2px;
  2109  }
  2110  
  2111  /* Inverted */
  2112  .ui.inverted.yellow.buttons .button,
  2113  .ui.inverted.yellow.button {
  2114    background-color: transparent;
  2115    box-shadow: 0px 0px 0px 2px #ffe21f inset !important;
  2116    color: #ffe21f;
  2117  }
  2118  .ui.inverted.yellow.buttons .button:hover,
  2119  .ui.inverted.yellow.button:hover {
  2120    box-shadow: 0px 0px 0px 2px #ffe21f inset !important;
  2121    background-color: #ffe21f;
  2122    color: #1b1c1d;
  2123  }
  2124  .ui.inverted.yellow.buttons .active.button,
  2125  .ui.inverted.yellow.active.button {
  2126    box-shadow: 0px 0px 0px 2px #ffe21f inset !important;
  2127    background-color: #ffe21f;
  2128    color: #1b1c1d;
  2129  }
  2130  .ui.inverted.yellow.buttons .button:active,
  2131  .ui.inverted.yellow.button:active {
  2132    box-shadow: 0px 0px 0px 2px #fada00 inset !important;
  2133    background-color: #fada00;
  2134    color: #1b1c1d;
  2135  }
  2136  
  2137  /* Inverted Basic */
  2138  .ui.inverted.yellow.basic.buttons .button,
  2139  .ui.inverted.yellow.buttons .basic.button,
  2140  .ui.inverted.yellow.basic.button {
  2141    background-color: transparent;
  2142    box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  2143    color: #ffffff !important;
  2144  }
  2145  .ui.inverted.yellow.basic.buttons .button:hover,
  2146  .ui.inverted.yellow.buttons .basic.button:hover,
  2147  .ui.inverted.yellow.basic.button:hover {
  2148    box-shadow: 0px 0px 0px 2px #ffe21f inset !important;
  2149    color: #ffe21f !important;
  2150  }
  2151  .ui.inverted.yellow.basic.buttons .active.button,
  2152  .ui.inverted.yellow.buttons .basic.active.button,
  2153  .ui.inverted.yellow.basic.active.button {
  2154    box-shadow: 0px 0px 0px 2px #ffe21f inset !important;
  2155    color: #ffe21f !important;
  2156  }
  2157  .ui.inverted.yellow.basic.buttons .button:active,
  2158  .ui.inverted.yellow.buttons .basic.button:active,
  2159  .ui.inverted.yellow.basic.button:active {
  2160    box-shadow: 0px 0px 0px 2px #fada00 inset !important;
  2161    color: #ffe21f !important;
  2162  }
  2163  
  2164  /*-------------------
  2165         Primary
  2166  --------------------*/
  2167  
  2168  .ui.primary.buttons .button,
  2169  .ui.primary.button {
  2170    background-color: #006e93;
  2171    color: #ffffff;
  2172    text-shadow: none;
  2173    background-image: none;
  2174  }
  2175  .ui.primary.button {
  2176    box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
  2177  }
  2178  .ui.primary.buttons .button:hover,
  2179  .ui.primary.button:hover {
  2180    background-color: #0079a2;
  2181    color: #ffffff;
  2182    text-shadow: none;
  2183  }
  2184  .ui.primary.buttons .button:active,
  2185  .ui.primary.button:active {
  2186    background-color: #00536f;
  2187    color: #ffffff;
  2188    text-shadow: none;
  2189  }
  2190  .ui.primary.buttons .active.button,
  2191  .ui.primary.active.button {
  2192    background-color: #005b7a;
  2193    color: #ffffff;
  2194    text-shadow: none;
  2195  }
  2196  
  2197  /*-------------------
  2198        Secondary
  2199  --------------------*/
  2200  
  2201  .ui.secondary.buttons .button,
  2202  .ui.secondary.button {
  2203    background-color: #1b1c1d;
  2204    color: #ffffff;
  2205    text-shadow: none;
  2206    background-image: none;
  2207  }
  2208  .ui.secondary.button {
  2209    box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
  2210  }
  2211  .ui.secondary.buttons .button:hover,
  2212  .ui.secondary.button:hover {
  2213    background-color: #222425;
  2214    color: #ffffff;
  2215    text-shadow: none;
  2216  }
  2217  .ui.secondary.buttons .button:active,
  2218  .ui.secondary.button:active {
  2219    background-color: #0a0a0b;
  2220    color: #ffffff;
  2221    text-shadow: none;
  2222  }
  2223  .ui.secondary.buttons .active.button,
  2224  .ui.secondary.active.button {
  2225    background-color: #0f0f10;
  2226    color: #ffffff;
  2227    text-shadow: none;
  2228  }
  2229  
  2230  /*---------------
  2231      Positive
  2232  ----------------*/
  2233  
  2234  .ui.positive.buttons .button,
  2235  .ui.positive.button {
  2236    background-color: #5bbd72 !important;
  2237    color: #ffffff;
  2238    text-shadow: none;
  2239    background-image: none;
  2240  }
  2241  .ui.positive.button {
  2242    box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
  2243  }
  2244  .ui.positive.buttons .button:hover,
  2245  .ui.positive.button:hover,
  2246  .ui.positive.buttons .active.button,
  2247  .ui.positive.active.button {
  2248    background-color: #66c17b !important;
  2249    color: #ffffff;
  2250    text-shadow: none;
  2251  }
  2252  .ui.positive.buttons .button:active,
  2253  .ui.positive.button:active {
  2254    background-color: #46ae5f !important;
  2255    color: #ffffff;
  2256    text-shadow: none;
  2257  }
  2258  .ui.positive.buttons .active.button,
  2259  .ui.positive.buttons .active.button:active,
  2260  .ui.positive.active.button,
  2261  .ui.positive.button .active.button:active {
  2262    background-color: #49b562;
  2263    color: #ffffff;
  2264    text-shadow: none;
  2265  }
  2266  
  2267  /*---------------
  2268       Negative
  2269  ----------------*/
  2270  
  2271  .ui.negative.buttons .button,
  2272  .ui.negative.button {
  2273    background-color: #d95c5c !important;
  2274    color: #ffffff;
  2275    text-shadow: none;
  2276    background-image: none;
  2277  }
  2278  .ui.negative.button {
  2279    box-shadow: 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
  2280  }
  2281  .ui.negative.buttons .button:hover,
  2282  .ui.negative.button:hover,
  2283  .ui.negative.buttons .active.button,
  2284  .ui.negative.active.button {
  2285    background-color: #dc6868 !important;
  2286    color: #ffffff;
  2287    text-shadow: none;
  2288  }
  2289  .ui.negative.buttons .button:active,
  2290  .ui.negative.button:active {
  2291    background-color: #d23f3f !important;
  2292    color: #ffffff;
  2293    text-shadow: none;
  2294  }
  2295  .ui.negative.buttons .active.button,
  2296  .ui.negative.buttons .active.button:active,
  2297  .ui.negative.active.button,
  2298  .ui.negative.button .active.button:active {
  2299    background-color: #d44747;
  2300    color: #ffffff;
  2301    text-shadow: none;
  2302  }
  2303  
  2304  
  2305  /*******************************
  2306              Groups
  2307  *******************************/
  2308  
  2309  .ui.buttons {
  2310    display: inline-block;
  2311    vertical-align: middle;
  2312    margin: 0em 0.25em 0em 0em;
  2313  }
  2314  .ui.buttons > .button:hover,
  2315  .ui.buttons > .active.button {
  2316    position: relative;
  2317  }
  2318  .ui.buttons:after {
  2319    content: ".";
  2320    display: block;
  2321    height: 0;
  2322    clear: both;
  2323    visibility: hidden;
  2324  }
  2325  .ui.buttons .button:first-child {
  2326    border-left: none;
  2327  }
  2328  .ui.buttons:not(.basic):not(.inverted) {
  2329    box-shadow: none;
  2330  }
  2331  .ui.buttons > .ui.button:not(.basic):not(.inverted),
  2332  .ui.buttons:not(.basic):not(.inverted) > .button {
  2333    box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(39, 41, 43, 0.15) inset;
  2334  }
  2335  .ui.buttons .button {
  2336    margin: 0em;
  2337    float: left;
  2338    border-radius: 0em;
  2339    margin: 0px 0px 0px 0px;
  2340  }
  2341  .ui.buttons .button:first-child {
  2342    margin-left: 0em;
  2343    border-top-left-radius: 0.2857rem;
  2344    border-bottom-left-radius: 0.2857rem;
  2345  }
  2346  .ui.buttons .button:last-child {
  2347    border-top-right-radius: 0.2857rem;
  2348    border-bottom-right-radius: 0.2857rem;
  2349  }
  2350  
  2351  /* Vertical  Style */
  2352  .ui.vertical.buttons {
  2353    display: inline-block;
  2354  }
  2355  .ui.vertical.buttons .button {
  2356    display: block;
  2357    float: none;
  2358    width: 100%;
  2359    margin: 0px 0px 0px 0px;
  2360    box-shadow: none;
  2361  }
  2362  .ui.vertical.buttons .button:first-child,
  2363  .ui.vertical.buttons .mini.button:first-child,
  2364  .ui.vertical.buttons .tiny.button:first-child,
  2365  .ui.vertical.buttons .small.button:first-child,
  2366  .ui.vertical.buttons .massive.button:first-child,
  2367  .ui.vertical.buttons .huge.button:first-child {
  2368    border-radius: 0.2857rem 0.2857rem 0px 0px;
  2369  }
  2370  .ui.vertical.buttons .button:last-child,
  2371  .ui.vertical.buttons .mini.button:last-child,
  2372  .ui.vertical.buttons .tiny.button:last-child,
  2373  .ui.vertical.buttons .small.button:last-child,
  2374  .ui.vertical.buttons .massive.button:last-child,
  2375  .ui.vertical.buttons .huge.button:last-child,
  2376  .ui.vertical.buttons .gigantic.button:last-child {
  2377    margin-bottom: 0px;
  2378    border-radius: 0px 0px 0.2857rem 0.2857rem;
  2379  }
  2380  
  2381  
  2382  /*******************************
  2383           Theme Overrides
  2384  *******************************/
  2385  
  2386  
  2387  
  2388  /*******************************
  2389           Site Overrides
  2390  *******************************/
  2391