Fixes labeled icon placement in chrome

Fixes labeled icon placement in chrome

/*
 * # Semantic - Button
 * http://github.com/jlukic/semantic-ui/
 *
 *
 * Copyright 2013 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
            Button
*******************************/

/* Prototype */
.ui.button {
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;

  min-height: 1em;

  outline: none;
  border: none;
  background-color: #FAFAFA;
  color: #808080;

  margin: 0em;
  padding: 0.8em 1.5em 0.875em;

  font-size: 1rem;
  text-transform: uppercase;
  line-height: 1;
  font-weight: bold;
  font-style: normal;
  text-align: center;
  text-decoration: none;

  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));

  -webkit-border-radius: 0.25em;
  -moz-border-radius: 0.25em;
  border-radius: 0.25em;

  box-shadow:
    0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset,
    0px -0.133em 0px 0px rgba(0, 0, 0, 0.1) inset
  ;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  -webkit-transition:
    opacity 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease
  ;
  -moz-transition:
    opacity 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease
  ;
  -o-transition:
    opacity 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease
  ;
  -ms-transition:
    opacity 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease
  ;
  transition:
    opacity 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease
  ;
}

/*******************************
            States
*******************************/

/*--------------
     Active
---------------*/

.ui.buttons .active.button,
.ui.active.button {
  background-color: #EAEAEA;
  background-image: none;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
  color: rgba(0, 0, 0, 0.7);
}

/*--------------
      Hover
---------------*/

.ui.button:not(.loading):hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08));
  color: rgba(0, 0, 0, 0.7);
}
.ui.button.active:hover {
  background-image: none;
}

.ui.button:hover .icon,
.ui.button.hover .icon {
  opacity: 0.85;
}

/*--------------
      Down
---------------*/

.ui.button:not(.loading):active,
.ui.active.button:not(.loading):active {
  background-color: #F1F1F1;
  color: rgba(0, 0, 0, 0.7);
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
}

/*--------------
    Loading
---------------*/

.ui.loading.button {
  position: relative;
  cursor: default;

  background-color: #FFFFFF !important;
  color: transparent !important;

  -webkit-transition: all 0s linear;
  -moz-transition: all 0s linear;
  -o-transition: all 0s linear;
  -ms-transition: all 0s linear;
  transition: all 0s linear;
}
.ui.loading.button:after {
  position: absolute;
  top: 0em;
  left: 0em;
  width: 100%;
  height: 100%;
  content: '';
  background: transparent url(../images/loader-mini.gif) no-repeat 50% 50%;
}

.ui.labeled.icon.loading.button .icon {
  background-color: transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/*-------------------
      Disabled
--------------------*/

.ui.disabled.button,
.ui.disabled.button:hover,
.ui.disabled.button.active {
  background-color: #DDDDDD !important;
  cursor: default;
  color: rgba(0, 0, 0, 0.5) !important;
  opacity: 0.3 !important;
  background-image: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

/*******************************
             Types
*******************************/

/*-------------------
       Animated
--------------------*/

.ui.animated.button {
  position: relative;
  overflow: hidden;
}

.ui.animated.button .visible.content {
  position: relative;
}
.ui.animated.button .hidden.content {
  position: absolute;
  width: 100%;
}

/* Horizontal */
.ui.animated.button .visible.content,
.ui.animated.button .hidden.content {
  transition: right 0.3s ease 0s;
}
.ui.animated.button .visible.content {
  left: auto;
  right: 0%;
}
.ui.animated.button .hidden.content {
  top: 50%;
  left: auto;
  right: -100%;
  margin-top: -0.55em;
}
.ui.animated.button:hover .visible.content {
  left: auto;
  right: 200%;
}
.ui.animated.button:hover .hidden.content {
  left: auto;
  right: 0%;
}

/* Vertical */
.ui.vertical.animated.button .visible.content,
.ui.vertical.animated.button .hidden.content {
  transition: top 0.3s ease 0s, transform 0.3s ease 0s;
}
.ui.vertical.animated.button .visible.content {
  transform: translateY(0%);
  right: auto;
}
.ui.vertical.animated.button .hidden.content {
  top: -100%;
  left: 0%;
  right: auto;
}
.ui.vertical.animated.button:hover .visible.content {
  transform: translateY(200%);
  right: auto;
}
.ui.vertical.animated.button:hover .hidden.content {
  top: 50%;
  right: auto;
}

/* Fade */
.ui.fade.animated.button .visible.content,
.ui.fade.animated.button .hidden.content {
  transition: opacity 0.3s ease 0s, transform 0.3s ease 0s;
}
.ui.fade.animated.button .visible.content {
  left: auto;
  right: auto;
  opacity: 1;
  transform: scale(1);
}
.ui.fade.animated.button .hidden.content {
  opacity: 0;
  left: 0%;
  right: auto;
  transform: scale(1.2);
}
.ui.fade.animated.button:hover .visible.content {
  left: auto;
  right: auto;
  opacity: 0;
  transform: scale(0.7);
}
.ui.fade.animated.button:hover .hidden.content {
  left: 0%;
  right: auto;
  opacity: 1;
  transform: scale(1);
}

/*-------------------
       Primary
--------------------*/

.ui.primary.buttons .button,
.ui.primary.button {
  background-color: #D95C5C;
  color: #FFFFFF;
}
.ui.primary.buttons .button:hover,
.ui.primary.button:hover,
.ui.primary.buttons .active.button,
.ui.primary.button.active {
  background-color: #E75859;
  color: #FFFFFF;
}
.ui.primary.buttons .button:active,
.ui.primary.button:active {
  background-color: #D24B4C;
  color: #FFFFFF;
}

/*-------------------
      Secondary
--------------------*/

.ui.secondary.buttons .button,
.ui.secondary.button {
  background-color: #00B5AD;
  color: #FFFFFF;
}
.ui.secondary.buttons .button:hover,
.ui.secondary.button:hover,
.ui.secondary.buttons .active.button,
.ui.secondary.button.active {
  background-color: #009A93;
  color: #FFFFFF;
}
.ui.secondary.buttons .button:active,
.ui.secondary.button:active {
  background-color: #00847E;
  color: #FFFFFF;
}

/*-------------------
       Social
--------------------*/

/* Facebook */
.ui.facebook.button {
  background-color: #3B579D;
  color: #FFFFFF;
}
.ui.facebook.button:hover {
  background-color: #3A59A9;
  color: #FFFFFF;
}
.ui.facebook.button:active {
  background-color: #334F95;
  color: #FFFFFF;
}

/* Twitter */
.ui.twitter.button {
  background-color: #4092CC;
  color: #FFFFFF;
}
.ui.twitter.button:hover {
  background-color: #399ADE;
  color: #FFFFFF;
}
.ui.twitter.button:active {
  background-color: #3283BC;
  color: #FFFFFF;
}

/* Google Plus */
.ui.google.plus.button {
  background-color: #D34836;
  color: #FFFFFF;
}
.ui.google.plus.button:hover {
  background-color: #E3432E;
  color: #FFFFFF;
}
.ui.google.plus.button:active {
  background-color: #CA3A27;
  color: #FFFFFF;
}

/* Linked In */
.ui.linkedin.button {
  background-color: #1F88BE;
  color: #FFFFFF;
}
.ui.linkedin.button:hover {
  background-color: #1394D6;
  color: #FFFFFF;
}
.ui.linkedin.button:active {
  background-color: #1179AE;
  color: #FFFFFF;
}

/* YouTube */
.ui.youtube.button {
  background-color: #CC181E;
  color: #FFFFFF;
}
.ui.youtube.button:hover {
  background-color: #DF0209;
  color: #FFFFFF;
}
.ui.youtube.button:active {
  background-color: #A50006;
  color: #FFFFFF;
}

/* Instagram */
.ui.instagram.button {
  background-color: #49769C;
  color: #FFFFFF;
}
.ui.instagram.button:hover {
  background-color: #4781B1;
  color: #FFFFFF;
}
.ui.instagram.button:active {
  background-color: #38658A;
  color: #FFFFFF;
}

/* Pinterest */
.ui.pinterest.button {
  background-color: #00ACED;
  color: #FFFFFF;
}
.ui.pinterest.button:hover {
  background-color: #00B9FF;
  color: #FFFFFF;
}
.ui.pinterest.button:active {
  background-color: #009EDA;
  color: #FFFFFF;
}

/*--------------
     Icon
---------------*/

.ui.button > .icon {
  margin-right: 0.6em;

  line-height: 1;

  -webkit-transition:
    opacity 0.1s ease
  ;
  -moz-transition:
    opacity 0.1s ease
  ;
  -o-transition:
    opacity 0.1s ease
  ;
  -ms-transition:
    opacity 0.1s ease
  ;
  transition:
    opacity 0.1s ease
  ;
}

/*******************************
           Variations
*******************************/

/*-------------------
       Floated
--------------------*/

.ui.left.floated.buttons,
.ui.left.floated.button {
  float: left;
  margin-right: 0.25em;
}
.ui.right.floated.buttons,
.ui.right.floated.button {
  float: right;
  margin-left: 0.25em;
}

/*-------------------
        Sizes
--------------------*/

.ui.buttons .button,
.ui.button {
  font-size: 1rem;
}

.ui.mini.buttons .button,
.ui.mini.buttons .or,
.ui.mini.button {
  font-size: 0.8rem;
}
.ui.mini.buttons .button,
.ui.mini.button {
  padding: 0.6em 0.8em 0.73em;
}
.ui.mini.icon.buttons .button,
.ui.mini.buttons .icon.button {
  padding: 0.6em 0.6em 0.73em;
}

.ui.tiny.buttons .button,
.ui.tiny.buttons .or,
.ui.tiny.button {
  font-size: 0.875rem;
}
.ui.tiny.buttons .button,
.ui.tiny.buttons .button,
.ui.tiny.button {
  padding: 0.6em 0.8em 0.73em;
}
.ui.tiny.icon.buttons .button,
.ui.tiny.buttons .icon.button {
  padding: 0.6em 0.6em 0.73em;
}

.ui.small.buttons .button,
.ui.small.buttons .or,
.ui.small.button {
  font-size: 0.875rem;
}

.ui.large.buttons .button,
.ui.large.buttons .or,
.ui.large.button {
  font-size: 1.125rem;
}
.ui.big.buttons .button,
.ui.big.buttons .or,
.ui.big.button {
  font-size: 1.25rem;
}
.ui.huge.buttons .button,
.ui.huge.buttons .or,
.ui.huge.button {
  font-size: 1.375rem;
}
.ui.massive.buttons .button,
.ui.massive.buttons .or,
.ui.massive.button {
  font-size: 1.5rem;
  font-weight: bold;
}

/* Or resize */
.ui.tiny.buttons .or:before,
.ui.mini.buttons .or:before {
  width: 1.45em;
  height: 1.55em;
  line-height: 1.4;
  margin-left: -0.725em;
  margin-top: -0.25em;
}
.ui.tiny.buttons .or:after,
.ui.mini.buttons .or:after {
  height: 1.45em;
}

/* loading */
.ui.huge.loading.button:after {
  background-image: url(../images/loader-small.gif);
}
.ui.massive.buttons .loading.button:after,
.ui.gigantic.buttons .loading.button:after,
.ui.massive.loading.button:after,
.ui.gigantic.loading.button:after {
  background-image: url(../images/loader-medium.gif);
}

.ui.huge.loading.button:after,
.ui.huge.loading.button.active:after {
  background-image: url(../images/loader-small.gif);
}
.ui.massive.buttons .loading.button:after,
.ui.gigantic.buttons .loading.button:after,
.ui.massive.loading.button:after,
.ui.gigantic.loading.button:after,
.ui.massive.buttons .loading.button.active:after,
.ui.gigantic.buttons .loading.button.active:after,
.ui.massive.loading.button.active:after,
.ui.gigantic.loading.button.active:after {
  background-image: url(../images/loader-medium.gif);
}

/*--------------
    Icon Only
---------------*/

.ui.icon.buttons .button,
.ui.icon.button {
  padding: 0.8em 0.8em 0.875em;
}
.ui.icon.buttons .button > .icon,
.ui.icon.button > .icon {
  opacity: 0.9;
  margin: 0em;
  vertical-align: top;
}

/*-------------------
        Basic
--------------------*/

.ui.basic.buttons .button,
.ui.basic.button {
  background-color: transparent !important;
  background-image: none;
  color: #808080 !important;
  font-weight: normal;
  text-transform: none;

  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
}
.ui.basic.buttons {
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;

  -webkit-border-radius: 0.25em;
  -moz-border-radius: 0.25em;
  border-radius: 0.25em;
}

.ui.basic.buttons .button:hover,
.ui.basic.button:hover {
  background-image: none;
  color: #7F7F7F !important;
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset;
  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset;
}
.ui.basic.buttons .button:active,
.ui.basic.button:active {
  background-color: rgba(0, 0, 0, 0.02) !important;
  color: #7F7F7F !important;

  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
}
.ui.basic.buttons .button.active,
.ui.basic.button.active {
  background-color: rgba(0, 0, 0, 0.05);
  color: #7F7F7F;

  -webkit-box-shadow: 0px 0px 0px 1px #BDBDBD inset;
  -moz-box-shadow: 0px 0px 0px 1px #BDBDBD inset;
  box-shadow: 0px 0px 0px 1px #BDBDBD inset;
}
.ui.basic.buttons .button.active:hover,
.ui.basic.button.active:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* Basic Group */
.ui.basic.buttons .button {
  border-left: 1px solid rgba(0, 0, 0, 0.1);

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.ui.basic.buttons .button:hover,
.ui.basic.buttons .button:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.ui.basic.buttons .button.active,
.ui.basic.buttons .button.active:hover {
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
}

/*--------------
   Labeled Icon
---------------*/

.ui.labeled.icon.buttons .button,
.ui.labeled.icon.button {
  position: relative;
  padding-left: 4em !important;
  padding-right: 1.4em !important;
}

.ui.labeled.icon.buttons > .button > .icon,
.ui.labeled.icon.button > .icon {
  position: absolute;
  top: 0em;
  left: 0em;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;

  width: 2.75em;
  height: 100%;
  padding-top: 0.8em;
  background-color: rgba(0, 0, 0, 0.05);
  text-align: center;

  -webkit-border-radius: 0.25em 0px 0px 0.25em;
  -moz-border-radius: 0.25em 0px 0px 0.25em;
  border-radius: 0.25em 0px 0px 0.25em;

  line-height: 1;

  -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
  -moz-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
  box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
}

.ui.labeled.icon.buttons .button > .icon {
  -webkit-border-radius: 0em;
  -moz-border-radius: 0em;
  border-radius: 0em;
}
.ui.labeled.icon.buttons .button:first-child > .icon {
  border-top-left-radius: 0.25em;
  border-bottom-left-radius: 0.25em;
}
.ui.labeled.icon.buttons .button:last-child > .icon {
  border-top-right-radius: 0.25em;
  border-bottom-right-radius: 0.25em;
}
.ui.vertical.labeled.icon.buttons .button:first-child > .icon {
  -webkit-border-radius: 0em;
  -moz-border-radius: 0em;
  border-radius: 0em;
  border-top-left-radius: 0.25em;
}
.ui.vertical.labeled.icon.buttons .button:last-child > .icon {
  -webkit-border-radius: 0em;
  -moz-border-radius: 0em;
  border-radius: 0em;
  border-bottom-left-radius: 0.25em;
}

.ui.right.labeled.icon.button {
  padding-left: 1.4em !important;
  padding-right: 4em !important;
}
.ui.left.fluid.labeled.icon.button,
.ui.right.fluid.labeled.icon.button {
  padding-left: 1.4em !important;
  padding-right: 1.4em !important;
}

.ui.right.labeled.icon.button .icon {
  left: auto;
  right: 0em;

  -webkit-border-radius: 0em 0.25em 0.25em 0em;
  -moz-border-radius: 0em 0.25em 0.25em 0em;
  border-radius: 0em 0.25em 0.25em 0em;

  -webkit-box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
  -moz-box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
  box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
}

/*--------------
     Toggle
---------------*/

/* Toggle (Modifies active state to give affordances) */
.ui.toggle.buttons .active.button,
.ui.buttons .button.toggle.active,
.ui.button.toggle.active {
  background-color: #5BBD72 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
.ui.button.toggle.active:hover {
  background-color: #58CB73 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

/*--------------
    Circular
---------------*/

.ui.circular.button {
  -webkit-border-radius: 10em;
  -moz-border-radius: 10em;
  border-radius: 10em;
}

/*--------------
     Attached
---------------*/

.ui.attached.button {
  display: block;
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
}
.ui.attached.top.button {

  -webkit-border-radius: 0.25em 0.25em 0em 0em;
  -moz-border-radius: 0.25em 0.25em 0em 0em;
  border-radius: 0.25em 0.25em 0em 0em;
}
.ui.attached.bottom.button {
  -webkit-border-radius: 0em 0em 0.25em 0.25em;
  -moz-border-radius: 0em 0em 0.25em 0.25em;
  border-radius: 0em 0em 0.25em 0.25em;
}
.ui.attached.left.button {
  display: inline-block;
  border-left: none;

  padding-right: 0.75em;
  text-align: right;

  -webkit-border-radius: 0.25em 0em 0em 0.25em;
  -moz-border-radius: 0.25em 0em 0em 0.25em;
  border-radius: 0.25em 0em 0em 0.25em;
}
.ui.attached.right.button {
  display: inline-block;

  padding-left: 0.75em;
  text-align: left;

  -webkit-border-radius: 0em 0.25em 0.25em 0em;
  -moz-border-radius: 0em 0.25em 0.25em 0em;
  border-radius: 0em 0.25em 0.25em 0em;
}

/*-------------------
      Or Buttons
--------------------*/

.ui.buttons .or {
  position: relative;
  float: left;
  width: 0.3em;
  height: 1.1em;
  z-index: 3;
}
.ui.buttons .or:before {
  position: absolute;
  top: 50%;
  left: 50%;
  content: 'or';
  background-color: #FFFFFF;

  margin-top: -0.1em;
  margin-left: -0.9em;

  width: 1.8em;
  height: 1.8em;

  line-height: 1.55;
  color: #AAAAAA;
  font-style: normal;
  font-weight: normal;
  text-align: center;

  -moz-border-radius: 500px;
  -webkit-border-radius: 500px;
  border-radius: 500px;

  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.ui.buttons .or:after {
  position: absolute;
  top: 0em;
  left: 0em;
  content: ' ';

  width: 0.3em;
  height: 1.7em;

  background-color: transparent;
  border-top: 0.5em solid #FFFFFF;
  border-bottom: 0.5em solid #FFFFFF;

}

/* Fluid Or */
.ui.fluid.buttons .or {
  width: 0em !important;
}
.ui.fluid.buttons .or:after{
  display: none;
}

/*-------------------
       Attached
--------------------*/

/* Plural Attached */
.attached.ui.buttons {
  margin: 0px;
  -webkit-border-radius: 4px 4px 0px 0px;
  -moz-border-radius: 4px 4px 0px 0px;
  border-radius: 4px 4px 0px 0px;
}
.attached.ui.buttons .button:first-child {
  -webkit-border-radius: 4px 0px 0px 0px;
  -moz-border-radius: 4px 0px 0px 0px;
  border-radius: 4px 0px 0px 0px;
}
.attached.ui.buttons .button:last-child {
  -webkit-border-radius: 0px 4px 0px 0px;
  -moz-border-radius: 0px 4px 0px 0px;
  border-radius: 0px 4px 0px 0px;
}

/* Bottom Side */
.bottom.attached.ui.buttons {
  margin-top: -1px;
  -webkit-border-radius: 0px 0px 4px 4px;
  -moz-border-radius: 0px 0px 4px 4px;
  border-radius: 0px 0px 4px 4px;
}
.bottom.attached.ui.buttons .button:first-child {
  -webkit-border-radius: 0px 0px 0px 4px;
  -moz-border-radius: 0px 0px 0px 4px;
  border-radius: 0px 0px 0px 4px;
}
.bottom.attached.ui.buttons .button:last-child {
  -webkit-border-radius: 0px 0px 4px 0px;
  -moz-border-radius: 0px 0px 4px 0px;
  border-radius: 0px 0px 4px 0px;
}

/* Left Side */
.left.attached.ui.buttons {
  margin-left: -1px;
  -webkit-border-radius: 0px 4px 4px 0px;
  -moz-border-radius: 0px 4px 4px 0px;
  border-radius: 0px 4px 4px 0px;
}
.left.attached.ui.buttons .button:first-child {
  margin-left: -1px;
  -webkit-border-radius: 0px 4px 0px 0px;
  -moz-border-radius: 0px 4px 0px 0px;
  border-radius: 0px 4px 0px 0px;
}
.left.attached.ui.buttons .button:last-child {
  margin-left: -1px;
  -webkit-border-radius: 0px 0px 4px 0px;
  -moz-border-radius: 0px 0px 4px 0px;
  border-radius: 0px 0px 4px 0px;
}
/* Right Side */
.right.attached.ui.buttons,
.right.attached.ui.buttons .button {
  margin-right: -1px;
  -webkit-border-radius: 4px 0px 0px 4px;
  -moz-border-radius: 4px 0px 0px 4px;
  border-radius: 4px 0px 0px 4px;
}
.right.attached.ui.buttons .button:first-child {
  margin-left: -1px;
  -webkit-border-radius: 4px 0px 0px 0px;
  -moz-border-radius: 4px 0px 0px 0px;
  border-radius: 4px 0px 0px 0px;
}
.right.attached.ui.buttons .button:last-child {
  margin-left: -1px;
  -webkit-border-radius: 0px 0px 0px 4px;
  -moz-border-radius: 0px 0px 0px 4px;
  border-radius: 0px 0px 0px 4px;
}

/* Fluid */
.ui.fluid.buttons,
.ui.button.fluid,
.ui.fluid.buttons > .button {
  display: block;
  width: 100%;
}
.ui.\32.buttons > .button,
.ui.two.buttons > .button {
  width: 50%;
}
.ui.\33.buttons > .button,
.ui.three.buttons > .button {
  width: 33.333%;
}
.ui.\34.buttons > .button,
.ui.four.buttons > .button {
  width: 25%;
}
.ui.\35.buttons > .button,
.ui.five.buttons > .button {
  width: 20%;
}
.ui.\36.buttons > .button,
.ui.six.buttons > .button {
  width: 16.666%;
}
.ui.\37.buttons > .button,
.ui.seven.buttons > .button {
  width: 14.285%;
}
.ui.\38.buttons > .button,
.ui.eight.buttons > .button {
  width: 12.500%;
}
.ui.\39.buttons > .button,
.ui.nine.buttons > .button {
  width: 11.11%;
}
.ui.\31\30.buttons > .button,
.ui.ten.buttons > .button {
  width: 10%;
}
.ui.\31\31.buttons > .button,
.ui.eleven.buttons > .button {
  width: 9.09%;
}
.ui.\31\32.buttons > .button,
.ui.twelve.buttons > .button {
  width: 8.3333%;
}

/* Fluid Vertical Buttons */
.ui.fluid.vertical.buttons,
.ui.fluid.vertical.buttons > .button {
  display: block;
  width: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.ui.\32.vertical.buttons > .button,
.ui.two.vertical.buttons > .button {
  height: 50%;
}
.ui.\33.vertical.buttons > .button,
.ui.three.vertical.buttons > .button {
  height: 33.333%;
}
.ui.\34.vertical.buttons > .button,
.ui.four.vertical.buttons > .button {
  height: 25%;
}
.ui.\35.vertical.buttons > .button,
.ui.five.vertical.buttons > .button {
  height: 20%;
}
.ui.\36.vertical.buttons > .button,
.ui.six.vertical.buttons > .button {
  height: 16.666%;
}
.ui.\37.vertical.buttons > .button,
.ui.seven.vertical.buttons > .button {
  height: 14.285%;
}
.ui.\38.vertical.buttons > .button,
.ui.eight.vertical.buttons > .button {
  height: 12.500%;
}
.ui.\39.vertical.buttons > .button,
.ui.nine.vertical.buttons > .button {
  height: 11.11%;
}
.ui.\31\30.vertical.buttons > .button,
.ui.ten.vertical.buttons > .button {
  height: 10%;
}
.ui.\31\31.vertical.buttons > .button,
.ui.eleven.vertical.buttons > .button {
  height: 9.09%;
}
.ui.\31\32.vertical.buttons > .button,
.ui.twelve.vertical.buttons > .button {
  height: 8.3333%;
}

/*-------------------
       Colors
--------------------*/

/*--- Black ---*/
.ui.black.buttons .button,
.ui.black.button {
  background-color: #5C6166;
  color: #FFFFFF;
}
.ui.black.buttons .button:hover,
.ui.black.button:hover {
  background-color: #4C4C4C;
  color: #FFFFFF;
}
.ui.black.buttons .button:active,
.ui.black.button:active {
  background-color: #333333;
  color: #FFFFFF;
}

/*--- Green ---*/
.ui.green.buttons .button,
.ui.green.button {
  background-color: #5BBD72;
  color: #FFFFFF;
}
.ui.green.buttons .button:hover,
.ui.green.button:hover,
.ui.green.buttons .active.button,
.ui.green.button.active {
  background-color: #58cb73;
  color: #FFFFFF;
}
.ui.green.buttons .button:active,
.ui.green.button:active {
  background-color: #4CB164;
  color: #FFFFFF;
}

/*--- Red ---*/
.ui.red.buttons .button,
.ui.red.button {
  background-color: #D95C5C;
  color: #FFFFFF;
}
.ui.red.buttons .button:hover,
.ui.red.button:hover,
.ui.red.buttons .active.button,
.ui.red.button.active {
  background-color: #E75859;
  color: #FFFFFF;
}
.ui.red.buttons .button:active,
.ui.red.button:active {
  background-color: #D24B4C;
  color: #FFFFFF;
}

/*--- Orange ---*/
.ui.orange.buttons .button,
.ui.orange.button {
  background-color: #E96633;
  color: #FFFFFF;
}
.ui.orange.buttons .button:hover,
.ui.orange.button:hover,
.ui.orange.buttons .active.button,
.ui.orange.button.active {
  background-color: #FF7038;
  color: #FFFFFF;
}
.ui.orange.buttons .button:active,
.ui.orange.button:active {
  background-color: #DA683B;
  color: #FFFFFF;
}

/*--- Blue ---*/
.ui.blue.buttons .button,
.ui.blue.button {
  background-color: #6ECFF5;
  color: #FFFFFF;
}
.ui.blue.buttons .button:hover,
.ui.blue.button:hover,
.ui.blue.buttons .active.button,
.ui.blue.button.active {
  background-color: #1AB8F3;
  color: #FFFFFF;
}
.ui.blue.buttons .button:active,
.ui.blue.button:active {
  background-color: #0AA5DF;
  color: #FFFFFF;
}

/*--- Purple ---*/
.ui.purple.buttons .button,
.ui.purple.button {
  background-color: #564F8A;
  color: #FFFFFF;
}
.ui.purple.buttons .button:hover,
.ui.purple.button:hover,
.ui.purple.buttons .active.button,
.ui.purple.button.active {
  background-color: #3E3773;
  color: #FFFFFF;
}
.ui.purple.buttons .button:active,
.ui.purple.button:active {
  background-color: #2E2860;
  color: #FFFFFF;
}

/*--- Teal ---*/
.ui.teal.buttons .button,
.ui.teal.button {
  background-color: #00B5AD;
  color: #FFFFFF;
}
.ui.teal.buttons .button:hover,
.ui.teal.button:hover,
.ui.teal.buttons .active.button,
.ui.teal.button.active {
  background-color: #009A93;
  color: #FFFFFF;
}
.ui.teal.buttons .button:active,
.ui.teal.button:active {
  background-color: #00847E;
  color: #FFFFFF;
}

/*---------------
    Positive
----------------*/

.ui.positive.buttons .button,
.ui.positive.button {
  background-color: #5BBD72 !important;
  color: #FFFFFF;
}
.ui.positive.buttons .button:hover,
.ui.positive.button:hover,
.ui.positive.buttons .active.button,
.ui.positive.button.active {
  background-color: #58CB73 !important;
  color: #FFFFFF;
}
.ui.positive.buttons .button:active,
.ui.positive.button:active {
  background-color: #4CB164 !important;
  color: #FFFFFF;
}

/*---------------
     Negative
----------------*/
.ui.negative.buttons .button,
.ui.negative.button {
  background-color: #D95C5C !important;
  color: #FFFFFF;
}
.ui.negative.buttons .button:hover,
.ui.negative.button:hover,
.ui.negative.buttons .active.button,
.ui.negative.button.active {
  background-color: #E75859 !important;
  color: #FFFFFF;
}
.ui.negative.buttons .button:active,
.ui.negative.button:active {
  background-color: #D24B4C !important;
  color: #FFFFFF;
}

/*******************************
            Groups
*******************************/

.ui.buttons {
  display: inline-block;
  vertical-align: middle;
}
.ui.buttons:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.ui.buttons .button:first-child {
  border-left: none;
}

.ui.buttons .button {
  float: left;
  -webkit-border-radius: 0em;
  -moz-border-radius: 0em;
  border-radius: 0em;
}
.ui.buttons .button:first-child  {
  margin-left: 0em;
  border-top-left-radius: 0.25em;
  border-bottom-left-radius: 0.25em;
}
.ui.buttons .button:last-child {
  border-top-right-radius: 0.25em;
  border-bottom-right-radius: 0.25em;
}

/* Vertical  Style */
.ui.vertical.buttons {
  display: inline-block;
}
.ui.vertical.buttons .button {
  display: block;
  float: none;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
}
.ui.vertical.buttons .button:first-child,
.ui.vertical.buttons .mini.button:first-child,
.ui.vertical.buttons .tiny.button:first-child,
.ui.vertical.buttons .small.button:first-child,
.ui.vertical.buttons .massive.button:first-child,
.ui.vertical.buttons .huge.button:first-child {
  margin-top: 0px;
  -moz-border-radius: 0.25em 0.25em 0px 0px;
  -webkit-border-radius: 0.25em 0.25em 0px 0px;
  border-radius: 0.25em 0.25em 0px 0px;
}
.ui.vertical.buttons .button:last-child,
.ui.vertical.buttons .mini.button:last-child,
.ui.vertical.buttons .tiny.button:last-child,
.ui.vertical.buttons .small.button:last-child,
.ui.vertical.buttons .massive.button:last-child,
.ui.vertical.buttons .huge.button:last-child,
.ui.vertical.buttons .gigantic.button:last-child {
  -moz-border-radius: 0px 0px 0.25em 0.25em;
  -webkit-border-radius: 0px 0px 0.25em 0.25em;
  border-radius: 0px 0px 0.25em 0.25em;
}

/*
 * # Semantic - Button
 * http://github.com/jlukic/semantic-ui/
 *
 *
 * Copyright 2013 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
            Button
*******************************/

/* Prototype */
.ui.button {
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;

  min-height: 1em;

  outline: none;
  border: none;
  background-color: #FAFAFA;
  color: #808080;

  margin: 0em;
  padding: 0.8em 1.5em 0.875em;

  font-size: 1rem;
  text-transform: uppercase;
  line-height: 1;
  font-weight: bold;
  font-style: normal;
  text-align: center;
  text-decoration: none;

  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));

  -webkit-border-radius: 0.25em;
  -moz-border-radius: 0.25em;
  border-radius: 0.25em;

  box-shadow:
    0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset,
    0px -0.133em 0px 0px rgba(0, 0, 0, 0.1) inset
  ;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  -webkit-transition:
    opacity 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease
  ;
  -moz-transition:
    opacity 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease
  ;
  -o-transition:
    opacity 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease
  ;
  -ms-transition:
    opacity 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease
  ;
  transition:
    opacity 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease
  ;
}

/*******************************
            States
*******************************/

/*--------------
     Active
---------------*/

.ui.buttons .active.button,
.ui.active.button {
  background-color: #EAEAEA;
  background-image: none;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
  color: rgba(0, 0, 0, 0.7);
}

/*--------------
      Hover
---------------*/

.ui.button:not(.loading):hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08));
  color: rgba(0, 0, 0, 0.7);
}
.ui.button.active:hover {
  background-image: none;
}

.ui.button:hover .icon,
.ui.button.hover .icon {
  opacity: 0.85;
}

/*--------------
      Down
---------------*/

.ui.button:not(.loading):active,
.ui.active.button:not(.loading):active {
  background-color: #F1F1F1;
  color: rgba(0, 0, 0, 0.7);
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
}

/*--------------
    Loading
---------------*/

.ui.loading.button {
  position: relative;
  cursor: default;

  background-color: #FFFFFF !important;
  color: transparent !important;

  -webkit-transition: all 0s linear;
  -moz-transition: all 0s linear;
  -o-transition: all 0s linear;
  -ms-transition: all 0s linear;
  transition: all 0s linear;
}
.ui.loading.button:after {
  position: absolute;
  top: 0em;
  left: 0em;
  width: 100%;
  height: 100%;
  content: '';
  background: transparent url(../images/loader-mini.gif) no-repeat 50% 50%;
}

.ui.labeled.icon.loading.button .icon {
  background-color: transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/*-------------------
      Disabled
--------------------*/

.ui.disabled.button,
.ui.disabled.button:hover,
.ui.disabled.button.active {
  background-color: #DDDDDD !important;
  cursor: default;
  color: rgba(0, 0, 0, 0.5) !important;
  opacity: 0.3 !important;
  background-image: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

/*******************************
             Types
*******************************/

/*-------------------
       Animated
--------------------*/

.ui.animated.button {
  position: relative;
  overflow: hidden;
}

.ui.animated.button .visible.content {
  position: relative;
}
.ui.animated.button .hidden.content {
  position: absolute;
  width: 100%;
}

/* Horizontal */
.ui.animated.button .visible.content,
.ui.animated.button .hidden.content {
  transition: right 0.3s ease 0s;
}
.ui.animated.button .visible.content {
  left: auto;
  right: 0%;
}
.ui.animated.button .hidden.content {
  top: 50%;
  left: auto;
  right: -100%;
  margin-top: -0.55em;
}
.ui.animated.button:hover .visible.content {
  left: auto;
  right: 200%;
}
.ui.animated.button:hover .hidden.content {
  left: auto;
  right: 0%;
}

/* Vertical */
.ui.vertical.animated.button .visible.content,
.ui.vertical.animated.button .hidden.content {
  transition: top 0.3s ease 0s, transform 0.3s ease 0s;
}
.ui.vertical.animated.button .visible.content {
  transform: translateY(0%);
  right: auto;
}
.ui.vertical.animated.button .hidden.content {
  top: -100%;
  left: 0%;
  right: auto;
}
.ui.vertical.animated.button:hover .visible.content {
  transform: translateY(200%);
  right: auto;
}
.ui.vertical.animated.button:hover .hidden.content {
  top: 50%;
  right: auto;
}

/* Fade */
.ui.fade.animated.button .visible.content,
.ui.fade.animated.button .hidden.content {
  transition: opacity 0.3s ease 0s, transform 0.3s ease 0s;
}
.ui.fade.animated.button .visible.content {
  left: auto;
  right: auto;
  opacity: 1;
  transform: scale(1);
}
.ui.fade.animated.button .hidden.content {
  opacity: 0;
  left: 0%;
  right: auto;
  transform: scale(1.2);
}
.ui.fade.animated.button:hover .visible.content {
  left: auto;
  right: auto;
  opacity: 0;
  transform: scale(0.7);
}
.ui.fade.animated.button:hover .hidden.content {
  left: 0%;
  right: auto;
  opacity: 1;
  transform: scale(1);
}

/*-------------------
       Primary
--------------------*/

.ui.primary.buttons .button,
.ui.primary.button {
  background-color: #D95C5C;
  color: #FFFFFF;
}
.ui.primary.buttons .button:hover,
.ui.primary.button:hover,
.ui.primary.buttons .active.button,
.ui.primary.button.active {
  background-color: #E75859;
  color: #FFFFFF;
}
.ui.primary.buttons .button:active,
.ui.primary.button:active {
  background-color: #D24B4C;
  color: #FFFFFF;
}

/*-------------------
      Secondary
--------------------*/

.ui.secondary.buttons .button,
.ui.secondary.button {
  background-color: #00B5AD;
  color: #FFFFFF;
}
.ui.secondary.buttons .button:hover,
.ui.secondary.button:hover,
.ui.secondary.buttons .active.button,
.ui.secondary.button.active {
  background-color: #009A93;
  color: #FFFFFF;
}
.ui.secondary.buttons .button:active,
.ui.secondary.button:active {
  background-color: #00847E;
  color: #FFFFFF;
}

/*-------------------
       Social
--------------------*/

/* Facebook */
.ui.facebook.button {
  background-color: #3B579D;
  color: #FFFFFF;
}
.ui.facebook.button:hover {
  background-color: #3A59A9;
  color: #FFFFFF;
}
.ui.facebook.button:active {
  background-color: #334F95;
  color: #FFFFFF;
}

/* Twitter */
.ui.twitter.button {
  background-color: #4092CC;
  color: #FFFFFF;
}
.ui.twitter.button:hover {
  background-color: #399ADE;
  color: #FFFFFF;
}
.ui.twitter.button:active {
  background-color: #3283BC;
  color: #FFFFFF;
}

/* Google Plus */
.ui.google.plus.button {
  background-color: #D34836;
  color: #FFFFFF;
}
.ui.google.plus.button:hover {
  background-color: #E3432E;
  color: #FFFFFF;
}
.ui.google.plus.button:active {
  background-color: #CA3A27;
  color: #FFFFFF;
}

/* Linked In */
.ui.linkedin.button {
  background-color: #1F88BE;
  color: #FFFFFF;
}
.ui.linkedin.button:hover {
  background-color: #1394D6;
  color: #FFFFFF;
}
.ui.linkedin.button:active {
  background-color: #1179AE;
  color: #FFFFFF;
}

/* YouTube */
.ui.youtube.button {
  background-color: #CC181E;
  color: #FFFFFF;
}
.ui.youtube.button:hover {
  background-color: #DF0209;
  color: #FFFFFF;
}
.ui.youtube.button:active {
  background-color: #A50006;
  color: #FFFFFF;
}

/* Instagram */
.ui.instagram.button {
  background-color: #49769C;
  color: #FFFFFF;
}
.ui.instagram.button:hover {
  background-color: #4781B1;
  color: #FFFFFF;
}
.ui.instagram.button:active {
  background-color: #38658A;
  color: #FFFFFF;
}

/* Pinterest */
.ui.pinterest.button {
  background-color: #00ACED;
  color: #FFFFFF;
}
.ui.pinterest.button:hover {
  background-color: #00B9FF;
  color: #FFFFFF;
}
.ui.pinterest.button:active {
  background-color: #009EDA;
  color: #FFFFFF;
}

/*--------------
     Icon
---------------*/

.ui.button > .icon {
  margin-right: 0.6em;

  line-height: 1;

  -webkit-transition:
    opacity 0.1s ease
  ;
  -moz-transition:
    opacity 0.1s ease
  ;
  -o-transition:
    opacity 0.1s ease
  ;
  -ms-transition:
    opacity 0.1s ease
  ;
  transition:
    opacity 0.1s ease
  ;
}

/*******************************
           Variations
*******************************/

/*-------------------
       Floated
--------------------*/

.ui.left.floated.buttons,
.ui.left.floated.button {
  float: left;
  margin-right: 0.25em;
}
.ui.right.floated.buttons,
.ui.right.floated.button {
  float: right;
  margin-left: 0.25em;
}

/*-------------------
        Sizes
--------------------*/

.ui.buttons .button,
.ui.button {
  font-size: 1rem;
}

.ui.mini.buttons .button,
.ui.mini.buttons .or,
.ui.mini.button {
  font-size: 0.8rem;
}
.ui.mini.buttons .button,
.ui.mini.button {
  padding: 0.6em 0.8em 0.73em;
}
.ui.mini.icon.buttons .button,
.ui.mini.buttons .icon.button {
  padding: 0.6em 0.6em 0.73em;
}

.ui.tiny.buttons .button,
.ui.tiny.buttons .or,
.ui.tiny.button {
  font-size: 0.875rem;
}
.ui.tiny.buttons .button,
.ui.tiny.buttons .button,
.ui.tiny.button {
  padding: 0.6em 0.8em 0.73em;
}
.ui.tiny.icon.buttons .button,
.ui.tiny.buttons .icon.button {
  padding: 0.6em 0.6em 0.73em;
}

.ui.small.buttons .button,
.ui.small.buttons .or,
.ui.small.button {
  font-size: 0.875rem;
}

.ui.large.buttons .button,
.ui.large.buttons .or,
.ui.large.button {
  font-size: 1.125rem;
}
.ui.big.buttons .button,
.ui.big.buttons .or,
.ui.big.button {
  font-size: 1.25rem;
}
.ui.huge.buttons .button,
.ui.huge.buttons .or,
.ui.huge.button {
  font-size: 1.375rem;
}
.ui.massive.buttons .button,
.ui.massive.buttons .or,
.ui.massive.button {
  font-size: 1.5rem;
  font-weight: bold;
}

/* Or resize */
.ui.tiny.buttons .or:before,
.ui.mini.buttons .or:before {
  width: 1.45em;
  height: 1.55em;
  line-height: 1.4;
  margin-left: -0.725em;
  margin-top: -0.25em;
}
.ui.tiny.buttons .or:after,
.ui.mini.buttons .or:after {
  height: 1.45em;
}

/* loading */
.ui.huge.loading.button:after {
  background-image: url(../images/loader-small.gif);
}
.ui.massive.buttons .loading.button:after,
.ui.gigantic.buttons .loading.button:after,
.ui.massive.loading.button:after,
.ui.gigantic.loading.button:after {
  background-image: url(../images/loader-medium.gif);
}

.ui.huge.loading.button:after,
.ui.huge.loading.button.active:after {
  background-image: url(../images/loader-small.gif);
}
.ui.massive.buttons .loading.button:after,
.ui.gigantic.buttons .loading.button:after,
.ui.massive.loading.button:after,
.ui.gigantic.loading.button:after,
.ui.massive.buttons .loading.button.active:after,
.ui.gigantic.buttons .loading.button.active:after,
.ui.massive.loading.button.active:after,
.ui.gigantic.loading.button.active:after {
  background-image: url(../images/loader-medium.gif);
}

/*--------------
    Icon Only
---------------*/

.ui.icon.buttons .button,
.ui.icon.button {
  padding: 0.8em 0.8em 0.875em;
}
.ui.icon.buttons .button > .icon,
.ui.icon.button > .icon {
  opacity: 0.9;
  margin: 0em;
  vertical-align: top;
}

/*-------------------
        Basic
--------------------*/

.ui.basic.buttons .button,
.ui.basic.button {
  background-color: transparent !important;
  background-image: none;
  color: #808080 !important;
  font-weight: normal;
  text-transform: none;

  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
}
.ui.basic.buttons {
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;

  -webkit-border-radius: 0.25em;
  -moz-border-radius: 0.25em;
  border-radius: 0.25em;
}

.ui.basic.buttons .button:hover,
.ui.basic.button:hover {
  background-image: none;
  color: #7F7F7F !important;
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset;
  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.18) inset;
}
.ui.basic.buttons .button:active,
.ui.basic.button:active {
  background-color: rgba(0, 0, 0, 0.02) !important;
  color: #7F7F7F !important;

  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
}
.ui.basic.buttons .button.active,
.ui.basic.button.active {
  background-color: rgba(0, 0, 0, 0.05);
  color: #7F7F7F;

  -webkit-box-shadow: 0px 0px 0px 1px #BDBDBD inset;
  -moz-box-shadow: 0px 0px 0px 1px #BDBDBD inset;
  box-shadow: 0px 0px 0px 1px #BDBDBD inset;
}
.ui.basic.buttons .button.active:hover,
.ui.basic.button.active:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* Basic Group */
.ui.basic.buttons .button {
  border-left: 1px solid rgba(0, 0, 0, 0.1);

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.ui.basic.buttons .button:hover,
.ui.basic.buttons .button:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.ui.basic.buttons .button.active,
.ui.basic.buttons .button.active:hover {
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
}

/*--------------
   Labeled Icon
---------------*/

.ui.labeled.icon.buttons .button,
.ui.labeled.icon.button {
  position: relative;
  padding-left: 4em !important;
  padding-right: 1.4em !important;
}

.ui.labeled.icon.buttons > .button > .icon,
.ui.labeled.icon.button > .icon {
  position: absolute;
  top: 0em;
  left: 0em;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;

  width: 2.75em;
  height: 100%;
  padding-top: 0.85em;
  background-color: rgba(0, 0, 0, 0.05);
  text-align: center;

  -webkit-border-radius: 0.25em 0px 0px 0.25em;
  -moz-border-radius: 0.25em 0px 0px 0.25em;
  border-radius: 0.25em 0px 0px 0.25em;

  line-height: 1;

  -webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
  -moz-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
  box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
}

.ui.labeled.icon.buttons .button > .icon {
  -webkit-border-radius: 0em;
  -moz-border-radius: 0em;
  border-radius: 0em;
}
.ui.labeled.icon.buttons .button:first-child > .icon {
  border-top-left-radius: 0.25em;
  border-bottom-left-radius: 0.25em;
}
.ui.labeled.icon.buttons .button:last-child > .icon {
  border-top-right-radius: 0.25em;
  border-bottom-right-radius: 0.25em;
}
.ui.vertical.labeled.icon.buttons .button:first-child > .icon {
  -webkit-border-radius: 0em;
  -moz-border-radius: 0em;
  border-radius: 0em;
  border-top-left-radius: 0.25em;
}
.ui.vertical.labeled.icon.buttons .button:last-child > .icon {
  -webkit-border-radius: 0em;
  -moz-border-radius: 0em;
  border-radius: 0em;
  border-bottom-left-radius: 0.25em;
}

.ui.right.labeled.icon.button {
  padding-left: 1.4em !important;
  padding-right: 4em !important;
}
.ui.left.fluid.labeled.icon.button,
.ui.right.fluid.labeled.icon.button {
  padding-left: 1.4em !important;
  padding-right: 1.4em !important;
}

.ui.right.labeled.icon.button .icon {
  left: auto;
  right: 0em;

  -webkit-border-radius: 0em 0.25em 0.25em 0em;
  -moz-border-radius: 0em 0.25em 0.25em 0em;
  border-radius: 0em 0.25em 0.25em 0em;

  -webkit-box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
  -moz-box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
  box-shadow: 1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
}

/*--------------
     Toggle
---------------*/

/* Toggle (Modifies active state to give affordances) */
.ui.toggle.buttons .active.button,
.ui.buttons .button.toggle.active,
.ui.button.toggle.active {
  background-color: #5BBD72 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
.ui.button.toggle.active:hover {
  background-color: #58CB73 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

/*--------------
    Circular
---------------*/

.ui.circular.button {
  -webkit-border-radius: 10em;
  -moz-border-radius: 10em;
  border-radius: 10em;
}

/*--------------
     Attached
---------------*/

.ui.attached.button {
  display: block;
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
}
.ui.attached.top.button {

  -webkit-border-radius: 0.25em 0.25em 0em 0em;
  -moz-border-radius: 0.25em 0.25em 0em 0em;
  border-radius: 0.25em 0.25em 0em 0em;
}
.ui.attached.bottom.button {
  -webkit-border-radius: 0em 0em 0.25em 0.25em;
  -moz-border-radius: 0em 0em 0.25em 0.25em;
  border-radius: 0em 0em 0.25em 0.25em;
}
.ui.attached.left.button {
  display: inline-block;
  border-left: none;

  padding-right: 0.75em;
  text-align: right;

  -webkit-border-radius: 0.25em 0em 0em 0.25em;
  -moz-border-radius: 0.25em 0em 0em 0.25em;
  border-radius: 0.25em 0em 0em 0.25em;
}
.ui.attached.right.button {
  display: inline-block;

  padding-left: 0.75em;
  text-align: left;

  -webkit-border-radius: 0em 0.25em 0.25em 0em;
  -moz-border-radius: 0em 0.25em 0.25em 0em;
  border-radius: 0em 0.25em 0.25em 0em;
}

/*-------------------
      Or Buttons
--------------------*/

.ui.buttons .or {
  position: relative;
  float: left;
  width: 0.3em;
  height: 1.1em;
  z-index: 3;
}
.ui.buttons .or:before {
  position: absolute;
  top: 50%;
  left: 50%;
  content: 'or';
  background-color: #FFFFFF;

  margin-top: -0.1em;
  margin-left: -0.9em;

  width: 1.8em;
  height: 1.8em;

  line-height: 1.55;
  color: #AAAAAA;
  font-style: normal;
  font-weight: normal;
  text-align: center;

  -moz-border-radius: 500px;
  -webkit-border-radius: 500px;
  border-radius: 500px;

  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.ui.buttons .or:after {
  position: absolute;
  top: 0em;
  left: 0em;
  content: ' ';

  width: 0.3em;
  height: 1.7em;

  background-color: transparent;
  border-top: 0.5em solid #FFFFFF;
  border-bottom: 0.5em solid #FFFFFF;

}

/* Fluid Or */
.ui.fluid.buttons .or {
  width: 0em !important;
}
.ui.fluid.buttons .or:after{
  display: none;
}

/*-------------------
       Attached
--------------------*/

/* Plural Attached */
.attached.ui.buttons {
  margin: 0px;
  -webkit-border-radius: 4px 4px 0px 0px;
  -moz-border-radius: 4px 4px 0px 0px;
  border-radius: 4px 4px 0px 0px;
}
.attached.ui.buttons .button:first-child {
  -webkit-border-radius: 4px 0px 0px 0px;
  -moz-border-radius: 4px 0px 0px 0px;
  border-radius: 4px 0px 0px 0px;
}
.attached.ui.buttons .button:last-child {
  -webkit-border-radius: 0px 4px 0px 0px;
  -moz-border-radius: 0px 4px 0px 0px;
  border-radius: 0px 4px 0px 0px;
}

/* Bottom Side */
.bottom.attached.ui.buttons {
  margin-top: -1px;
  -webkit-border-radius: 0px 0px 4px 4px;
  -moz-border-radius: 0px 0px 4px 4px;
  border-radius: 0px 0px 4px 4px;
}
.bottom.attached.ui.buttons .button:first-child {
  -webkit-border-radius: 0px 0px 0px 4px;
  -moz-border-radius: 0px 0px 0px 4px;
  border-radius: 0px 0px 0px 4px;
}
.bottom.attached.ui.buttons .button:last-child {
  -webkit-border-radius: 0px 0px 4px 0px;
  -moz-border-radius: 0px 0px 4px 0px;
  border-radius: 0px 0px 4px 0px;
}

/* Left Side */
.left.attached.ui.buttons {
  margin-left: -1px;
  -webkit-border-radius: 0px 4px 4px 0px;
  -moz-border-radius: 0px 4px 4px 0px;
  border-radius: 0px 4px 4px 0px;
}
.left.attached.ui.buttons .button:first-child {
  margin-left: -1px;
  -webkit-border-radius: 0px 4px 0px 0px;
  -moz-border-radius: 0px 4px 0px 0px;
  border-radius: 0px 4px 0px 0px;
}
.left.attached.ui.buttons .button:last-child {
  margin-left: -1px;
  -webkit-border-radius: 0px 0px 4px 0px;
  -moz-border-radius: 0px 0px 4px 0px;
  border-radius: 0px 0px 4px 0px;
}
/* Right Side */
.right.attached.ui.buttons,
.right.attached.ui.buttons .button {
  margin-right: -1px;
  -webkit-border-radius: 4px 0px 0px 4px;
  -moz-border-radius: 4px 0px 0px 4px;
  border-radius: 4px 0px 0px 4px;
}
.right.attached.ui.buttons .button:first-child {
  margin-left: -1px;
  -webkit-border-radius: 4px 0px 0px 0px;
  -moz-border-radius: 4px 0px 0px 0px;
  border-radius: 4px 0px 0px 0px;
}
.right.attached.ui.buttons .button:last-child {
  margin-left: -1px;
  -webkit-border-radius: 0px 0px 0px 4px;
  -moz-border-radius: 0px 0px 0px 4px;
  border-radius: 0px 0px 0px 4px;
}

/* Fluid */
.ui.fluid.buttons,
.ui.button.fluid,
.ui.fluid.buttons > .button {
  display: block;
  width: 100%;
}
.ui.\32.buttons > .button,
.ui.two.buttons > .button {
  width: 50%;
}
.ui.\33.buttons > .button,
.ui.three.buttons > .button {
  width: 33.333%;
}
.ui.\34.buttons > .button,
.ui.four.buttons > .button {
  width: 25%;
}
.ui.\35.buttons > .button,
.ui.five.buttons > .button {
  width: 20%;
}
.ui.\36.buttons > .button,
.ui.six.buttons > .button {
  width: 16.666%;
}
.ui.\37.buttons > .button,
.ui.seven.buttons > .button {
  width: 14.285%;
}
.ui.\38.buttons > .button,
.ui.eight.buttons > .button {
  width: 12.500%;
}
.ui.\39.buttons > .button,
.ui.nine.buttons > .button {
  width: 11.11%;
}
.ui.\31\30.buttons > .button,
.ui.ten.buttons > .button {
  width: 10%;
}
.ui.\31\31.buttons > .button,
.ui.eleven.buttons > .button {
  width: 9.09%;
}
.ui.\31\32.buttons > .button,
.ui.twelve.buttons > .button {
  width: 8.3333%;
}

/* Fluid Vertical Buttons */
.ui.fluid.vertical.buttons,
.ui.fluid.vertical.buttons > .button {
  display: block;
  width: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.ui.\32.vertical.buttons > .button,
.ui.two.vertical.buttons > .button {
  height: 50%;
}
.ui.\33.vertical.buttons > .button,
.ui.three.vertical.buttons > .button {
  height: 33.333%;
}
.ui.\34.vertical.buttons > .button,
.ui.four.vertical.buttons > .button {
  height: 25%;
}
.ui.\35.vertical.buttons > .button,
.ui.five.vertical.buttons > .button {
  height: 20%;
}
.ui.\36.vertical.buttons > .button,
.ui.six.vertical.buttons > .button {
  height: 16.666%;
}
.ui.\37.vertical.buttons > .button,
.ui.seven.vertical.buttons > .button {
  height: 14.285%;
}
.ui.\38.vertical.buttons > .button,
.ui.eight.vertical.buttons > .button {
  height: 12.500%;
}
.ui.\39.vertical.buttons > .button,
.ui.nine.vertical.buttons > .button {
  height: 11.11%;
}
.ui.\31\30.vertical.buttons > .button,
.ui.ten.vertical.buttons > .button {
  height: 10%;
}
.ui.\31\31.vertical.buttons > .button,
.ui.eleven.vertical.buttons > .button {
  height: 9.09%;
}
.ui.\31\32.vertical.buttons > .button,
.ui.twelve.vertical.buttons > .button {
  height: 8.3333%;
}

/*-------------------
       Colors
--------------------*/

/*--- Black ---*/
.ui.black.buttons .button,
.ui.black.button {
  background-color: #5C6166;
  color: #FFFFFF;
}
.ui.black.buttons .button:hover,
.ui.black.button:hover {
  background-color: #4C4C4C;
  color: #FFFFFF;
}
.ui.black.buttons .button:active,
.ui.black.button:active {
  background-color: #333333;
  color: #FFFFFF;
}

/*--- Green ---*/
.ui.green.buttons .button,
.ui.green.button {
  background-color: #5BBD72;
  color: #FFFFFF;
}
.ui.green.buttons .button:hover,
.ui.green.button:hover,
.ui.green.buttons .active.button,
.ui.green.button.active {
  background-color: #58cb73;
  color: #FFFFFF;
}
.ui.green.buttons .button:active,
.ui.green.button:active {
  background-color: #4CB164;
  color: #FFFFFF;
}

/*--- Red ---*/
.ui.red.buttons .button,
.ui.red.button {
  background-color: #D95C5C;
  color: #FFFFFF;
}
.ui.red.buttons .button:hover,
.ui.red.button:hover,
.ui.red.buttons .active.button,
.ui.red.button.active {
  background-color: #E75859;
  color: #FFFFFF;
}
.ui.red.buttons .button:active,
.ui.red.button:active {
  background-color: #D24B4C;
  color: #FFFFFF;
}

/*--- Orange ---*/
.ui.orange.buttons .button,
.ui.orange.button {
  background-color: #E96633;
  color: #FFFFFF;
}
.ui.orange.buttons .button:hover,
.ui.orange.button:hover,
.ui.orange.buttons .active.button,
.ui.orange.button.active {
  background-color: #FF7038;
  color: #FFFFFF;
}
.ui.orange.buttons .button:active,
.ui.orange.button:active {
  background-color: #DA683B;
  color: #FFFFFF;
}

/*--- Blue ---*/
.ui.blue.buttons .button,
.ui.blue.button {
  background-color: #6ECFF5;
  color: #FFFFFF;
}
.ui.blue.buttons .button:hover,
.ui.blue.button:hover,
.ui.blue.buttons .active.button,
.ui.blue.button.active {
  background-color: #1AB8F3;
  color: #FFFFFF;
}
.ui.blue.buttons .button:active,
.ui.blue.button:active {
  background-color: #0AA5DF;
  color: #FFFFFF;
}

/*--- Purple ---*/
.ui.purple.buttons .button,
.ui.purple.button {
  background-color: #564F8A;
  color: #FFFFFF;
}
.ui.purple.buttons .button:hover,
.ui.purple.button:hover,
.ui.purple.buttons .active.button,
.ui.purple.button.active {
  background-color: #3E3773;
  color: #FFFFFF;
}
.ui.purple.buttons .button:active,
.ui.purple.button:active {
  background-color: #2E2860;
  color: #FFFFFF;
}

/*--- Teal ---*/
.ui.teal.buttons .button,
.ui.teal.button {
  background-color: #00B5AD;
  color: #FFFFFF;
}
.ui.teal.buttons .button:hover,
.ui.teal.button:hover,
.ui.teal.buttons .active.button,
.ui.teal.button.active {
  background-color: #009A93;
  color: #FFFFFF;
}
.ui.teal.buttons .button:active,
.ui.teal.button:active {
  background-color: #00847E;
  color: #FFFFFF;
}

/*---------------
    Positive
----------------*/

.ui.positive.buttons .button,
.ui.positive.button {
  background-color: #5BBD72 !important;
  color: #FFFFFF;
}
.ui.positive.buttons .button:hover,
.ui.positive.button:hover,
.ui.positive.buttons .active.button,
.ui.positive.button.active {
  background-color: #58CB73 !important;
  color: #FFFFFF;
}
.ui.positive.buttons .button:active,
.ui.positive.button:active {
  background-color: #4CB164 !important;
  color: #FFFFFF;
}

/*---------------
     Negative
----------------*/
.ui.negative.buttons .button,
.ui.negative.button {
  background-color: #D95C5C !important;
  color: #FFFFFF;
}
.ui.negative.buttons .button:hover,
.ui.negative.button:hover,
.ui.negative.buttons .active.button,
.ui.negative.button.active {
  background-color: #E75859 !important;
  color: #FFFFFF;
}
.ui.negative.buttons .button:active,
.ui.negative.button:active {
  background-color: #D24B4C !important;
  color: #FFFFFF;
}

/*******************************
            Groups
*******************************/

.ui.buttons {
  display: inline-block;
  vertical-align: middle;
}
.ui.buttons:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.ui.buttons .button:first-child {
  border-left: none;
}

.ui.buttons .button {
  float: left;
  -webkit-border-radius: 0em;
  -moz-border-radius: 0em;
  border-radius: 0em;
}
.ui.buttons .button:first-child  {
  margin-left: 0em;
  border-top-left-radius: 0.25em;
  border-bottom-left-radius: 0.25em;
}
.ui.buttons .button:last-child {
  border-top-right-radius: 0.25em;
  border-bottom-right-radius: 0.25em;
}

/* Vertical  Style */
.ui.vertical.buttons {
  display: inline-block;
}
.ui.vertical.buttons .button {
  display: block;
  float: none;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
}
.ui.vertical.buttons .button:first-child,
.ui.vertical.buttons .mini.button:first-child,
.ui.vertical.buttons .tiny.button:first-child,
.ui.vertical.buttons .small.button:first-child,
.ui.vertical.buttons .massive.button:first-child,
.ui.vertical.buttons .huge.button:first-child {
  margin-top: 0px;
  -moz-border-radius: 0.25em 0.25em 0px 0px;
  -webkit-border-radius: 0.25em 0.25em 0px 0px;
  border-radius: 0.25em 0.25em 0px 0px;
}
.ui.vertical.buttons .button:last-child,
.ui.vertical.buttons .mini.button:last-child,
.ui.vertical.buttons .tiny.button:last-child,
.ui.vertical.buttons .small.button:last-child,
.ui.vertical.buttons .massive.button:last-child,
.ui.vertical.buttons .huge.button:last-child,
.ui.vertical.buttons .gigantic.button:last-child {
  -moz-border-radius: 0px 0px 0.25em 0.25em;
  -webkit-border-radius: 0px 0px 0.25em 0.25em;
  border-radius: 0px 0px 0.25em 0.25em;
}


added icon to EXLResultMediaTYPEpamphlet

useful for non-digital pamphlets (småtryk)

fatal: unable to access 'https://github.com/Det-Kongelige-Bibliotek/rex.git/': The requested URL returned error: 403


Shrunken the icon sizes for locationList.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Det-Kongelige-Bibliotek/rex.git/'


优惠券列表组件less

优惠券列表组件less

@charset "UTF-8";

/**
 * Description: 优惠券列表公用LESS
 * User: zhaoyiming
 * Date: 2017/9/29
 */

.coupon-list-wraper {
	a {
		display: block;
		position: relative;
		height: 95px;
		margin-bottom: 10px;
		background-repeat: no-repeat;
		background-position: left top;
		&.use-discount-bg {
			background-image: url("../images/discountbg.png");
			background-size: 100% 100%;
			.shop-active {
				position: absolute;
				top: 13px;
				right: 4px;
				height: 70px;
			}
		}
		&.used-bg {
			background-image: url("../images/usebg.png");
			background-size: 100% 103%;
		}
		&.past-bg {
			background-image: url("../images/pastduebg.png");
			background-size: 100% 103%;
		}
		.shop-ico {
			position: absolute;
			left: 8px;
			top: 13px;
			width: 105px;
			height: 70px;
			img {
				border: 1px solid #e2e2e2;
			}
		}
		.shop-intro {
			position: absolute;
			left: 118px;
			top: 13px;
			width: 100%;
			.shop-title {
				font-size: 15px;
				color: #4d4d4d;
			}
			.shop-discounts {
				font-size: 12px;
				color: #b3b3b3;
			}
			.shop-price span{
				display: inline-block;
				height: 100%;
				line-height: 22px;
				vertical-align: middle;
				&.condition {
					padding: 0 3px;
					background-color: #fff4ec;
					font-size: 15px;
					color: #f23030;
				}
			}
		}
		.shop-active {
			position: absolute;
			top: 45px;
			right: 4px;
			height: 70px;
			p {
				height: 18px;
				line-height: 30px;
				text-align: center;
				font-size: 10px;
				font-weight: 500;
				color: #f23030;
			}
			.use-discount {
				background-image: url("../images/littlebtn.png");
			}
			.used {
				background-image: url("../images/usebtn.png");
			}
			.past {
				background-image: url("../images/pastduebtn.png");
			}
		}
		.shop-active-canuse {
			background-image: url("../images/circlered.png");
			background-repeat: no-repeat;
			background-position: center top;
			background-size: 47px 35px;
		}
	}
}

.use-discount, .used, .past {
	display: block;
	height: 33px;
	margin: 10px auto 0 auto;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 54px 33px;
}

@media only screen and (min-width:320px) and (max-width:374px) {
	.shop-price {
		max-width: 125px;
	}

	.shop-active {
		width: 50px;
	}

	.use-discount, .used, .past {
		width: 50px;
		height: 30px;
		background-size: 50px 33px;
	}
}

@media only screen and (min-width:375px) and (max-width:413px) {
	.shop-price {
		max-width: 156px;
	}

	.shop-active {
		width: 60px;
	}
}

@media only screen and (min-width:414px) and (max-width:767px) {
	.shop-price {
		max-width: 185px;
	}

	.shop-active {
		width: 65px;
	}
}

@media only screen and (min-width:768px) {
	.shop-price {
		max-width: 360px;
	}

	.shop-active {
		width: 107px;
		background-size: 60px 45px;
		p {
			height: 20px;
			line-height: 42px;
		}
	}
}

error: pathspec 'static/less/coupon.less' did not match any file(s) known to git


Change disabled pager button color.

Change disabled pager button color.

fatal: unable to access 'https://github.com/exceptionless/Exceptionless.UI.git/': The requested URL returned error: 403


Better box sizing rule

Better box sizing rule

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/theworkers/HLTheme.git/'


fix criteria container style

fix criteria container style

@import 'parameters/parameters';

.vic-checkbox {
    display: inline-block;
    label {
        text-align: left;
        color: #313131;
    }
}

.vic-form-group label {
    text-align: left;
    color: #313131;
}
.slug-is-not-correct {
    color: @red;
}
.slug-is-correct {
    color: @green;
}

.vic-quantum-nav {
    position: fixed;
    bottom: 50px;
}
.quantum-tab-name {
    background-color: #fff;
}

.vic-criterias-container {
    position: fixed;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(217, 217, 217);
    padding: 15px 25px;
    bottom: 64px;
    left: 35px;
    right: 50px;
}

@import 'parameters/parameters';

.vic-checkbox {
    display: inline-block;
    label {
        text-align: left;
        color: #313131;
    }
}

.vic-form-group label {
    text-align: left;
    color: #313131;
}
.slug-is-not-correct {
    color: @red;
}
.slug-is-correct {
    color: @green;
}

.vic-quantum-nav {
    position: fixed;
    bottom: 50px;
}
.quantum-tab-name {
    background-color: #fff;
}

.vic-criterias-container {
    position: absolute;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(217, 217, 217);
    padding: 15px 25px;
    bottom: -1px;
    left: 35px;
    right: 35px;
}


Update static/vendors/bootstrap/less/mixins/panels.less

Signed-off-by: Bernard Ojengwa <fccb4cc00c1ba7e51bf5c2b5f77130b9fe8d917e@gmail.com>

// Panels

.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) {
  border-color: @border;

  & > .panel-heading {
    color: @heading-text-color;
    background-color: @heading-bg-color;
    border-color: @heading-border;

    + .panel-collapse > .panel-body {
      border-top-color: @border;
    }
    .badge {
      color: @heading-bg-color;
      background-color: @heading-text-color;
    }
  }
  & > .panel-footer {
    + .panel-collapse > .panel-body {
      border-bottom-color: @border;
    }
  }
}

error: pathspec 'static/vendors/bootstrap/less/mixins/panels.less' did not match any file(s) known to git


Simplify selector and bold matching chars

@import "ui-variables";

// Highlight matched text
.select-list .list-group .matching {
  color: @text-color-highlight;
  font-weight: bold;
}

@import "ui-variables";

// Highlight matched text
.select-list .list-group .two-lines .matching {
  color: @text-color-highlight;
}


Removing unused css rule

Removing unused css rule

fatal: unable to access 'https://github.com/studiomotio/www1.git/': The requested URL returned error: 403


Create media.less

Create media.less

fatal: unable to access 'https://github.com/fotisz/MachineLearningIntro.git/': The requested URL returned error: 403


fix style for type view namespace

fix style for type view namespace

fatal: remote error: upload-pack: not our ref f4f84a9f9eb4cc652098970180dcd520ab1c8a8b
fatal: the remote end hung up unexpectedly


Mockup: Fixed minor layout in tab-body.

Mockup: Fixed minor layout in tab-body.


Fix the colorBlock component styling.

Fix the colorBlock component styling.

fatal: remote error: upload-pack: not our ref f9deb4692896ebe2a177305f710fd9b52bd993fe
fatal: the remote end hung up unexpectedly


Add carousel styles

Add carousel styles

with bootstrap patterns

//
// Carousel
// --------------------------------------------------

// Wrapper for the slide container and indicators
.carousel {
  position: relative;
}

.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;

  > .item {
    display: none;
    position: relative;
    .transition(.6s ease-in-out left);

    // Account for jankitude on images
    > img,
    > a > img {
      .img-responsive();
      line-height: 1;
    }
  }

  > .active,
  > .next,
  > .prev { display: block; }

  > .active {
    left: 0;
  }

  > .next,
  > .prev {
    position: absolute;
    top: 0;
    width: 100%;
  }

  > .next {
    left: 100%;
  }
  > .prev {
    left: -100%;
  }
  > .next.left,
  > .prev.right {
    left: 0;
  }

  > .active.left {
    left: -100%;
  }
  > .active.right {
    left: 100%;
  }

}

// Left/right controls for nav
// ---------------------------

.carousel-control {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: @carousel-control-width;
  .opacity(@carousel-control-opacity);
  font-size: @carousel-control-font-size;
  color: @carousel-control-color;
  text-align: center;
  text-shadow: @carousel-text-shadow;
  // We can't have this transition here because WebKit cancels the carousel
  // animation if you trip this while in the middle of another animation.

  // Set gradients for backgrounds
  &.left {
    #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001));
  }
  &.right {
    left: auto;
    right: 0;
    #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5));
  }

  // Hover/focus state
  &:hover,
  &:focus {
    outline: none;
    color: @carousel-control-color;
    text-decoration: none;
    .opacity(.9);
  }

  // Toggles
  .icon-prev,
  .icon-next,
  .glyphicon-chevron-left,
  .glyphicon-chevron-right {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: inline-block;
  }
  .icon-prev,
  .glyphicon-chevron-left {
    left: 50%;
  }
  .icon-next,
  .glyphicon-chevron-right {
    right: 50%;
  }
  .icon-prev,
  .icon-next {
    width:  20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    font-family: serif;
  }

  .icon-prev {
    &:before {
      content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
    }
  }
  .icon-next {
    &:before {
      content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
    }
  }
}

// Optional indicator pips
//
// Add an unordered list with the following class and add a list item for each
// slide your carousel holds.

.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 15;
  width: 60%;
  margin-left: -30%;
  padding-left: 0;
  list-style: none;
  text-align: center;

  li {
    display: inline-block;
    width:  10px;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    border: 1px solid @carousel-indicator-border-color;
    border-radius: 10px;
    cursor: pointer;

    // IE8-9 hack for event handling
    //
    // Internet Explorer 8-9 does not support clicks on elements without a set
    // `background-color`. We cannot use `filter` since that's not viewed as a
    // background color by the browser. Thus, a hack is needed.
    //
    // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
    // set alpha transparency for the best results possible.
    background-color: #000 \9; // IE8
    background-color: rgba(0,0,0,0); // IE9
  }
  .active {
    margin: 0;
    width:  12px;
    height: 12px;
    background-color: @carousel-indicator-active-bg;
  }
}

// Optional captions
// -----------------------------
// Hidden by default for smaller viewports
.carousel-caption {
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 20px;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: @carousel-caption-color;
  text-align: center;
  text-shadow: @carousel-text-shadow;
  & .btn {
    text-shadow: none; // No shadow for button elements in carousel-caption
  }
}

// Scale up controls for tablets and up
@media screen and (min-width: @screen-sm-min) {

  // Scale up the controls a smidge
  .carousel-control {
    .glyphicons-chevron-left,
    .glyphicons-chevron-right,
    .icon-prev,
    .icon-next {
      width: 30px;
      height: 30px;
      margin-top: -15px;
      margin-left: -15px;
      font-size: 30px;
    }
  }

  // Show and left align the captions
  .carousel-caption {
    left: 20%;
    right: 20%;
    padding-bottom: 30px;
  }

  // Move up the indicators
  .carousel-indicators {
    bottom: 20px;
  }
}

error: pathspec 'cp-strap/src/stylesheets/components/carousel.less' did not match any file(s) known to git


TINY-841: css changes for ephox embed

TINY-841: css changes for ephox embed

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/aduth/tinymce.git/'


Add material-ui css

Add material-ui css

@import '../../node_modules/material-ui/src/less/scaffolding.less';
// Define custom variables here
@import '../../node_modules/material-ui/src/less/components.less';

error: pathspec 'app/style/material-ui.less' did not match any file(s) known to git


Adding File public/freelancer/font-awesome-4.1.0/less/fixed-width.less

fatal: unable to access 'https://github.com/asm-products/AssemblyCoins.git/': The requested URL returned error: 403


add emaillink styles

add emaillink styles

@import 'lib';

/* Long titles othwerwise break our layout everywhere. */
* {
    word-wrap: break-word;
}

.js-hidden, .hidden {
    display: none;
}

span.emaillink {
    direction: rtl;
    unicode-bidi: bidi-override;
    .i {
        display: none;
    }
}

a {
    text-decoration: none;
    color: @link;
    &:hover {
        text-decoration: underline;
    }
}

body {
    color: @text;
    overflow-x: hidden;
    background: #f0f0f0;
}

.balloon {
    .border-box;
    .border-radius(0 0 5px 5px);
    .transition(.2s top ease-out);
    border: 2px solid #e3873b;
    border-top-width: 0;
    background-color: #fcefb7;
    height: 27px;
    line-height: 24px;
    padding: 0 2.5%;
    position: fixed;
    top: -29px;
    left: 43%;
    &.active {
        top: 0;
    }
}

#page .notification-box {
    margin-bottom: 10px;
}

.notification-box {
    .border-radius(5px);
    .box-shadow(0 -1px 0 #ddd inset, 0 1px 0 rgba(0,0,0,.1));
    border: 1px solid #CCD6E3;
    padding: 15px;
    background: #E3EDFA;
    form {
        line-height: 28px;
        button {
            float: right;
        }
    }
    p {
        margin: .5em 0 0;
    }
    b {
        color: #333;
    }
    h1 {
        color: maroon;
        font-size: 14px;
    }
    h2 {
        color: #458;
        font-size: 12px;
        font-weight: bold;
        margin: 0;
    }
    &.error {
        background: #FEE3E5;
        border-color: #E0C9D6;
        h2 {
            color: #B14949;
        }
    }
    &.warning {
        background: #fd9;
        border: 1px solid darken(#fd9, 60%);
    }
}

#site-header, #page {
    > section {
        .width(10);
        margin: 0 auto;
        .border-box;
        &:after {
            content: '';
            display: block;
            clear: both;
        }
        &.full {
            width: 100%;
        }
    }
}

// account for the header.
#page {
     margin-top: 70px;
}

// 7 columns (portrait tablet)
@media (max-width: @7col) {
    #site-header, #page {
        > section {
            .width(7);
        }
    }
    #site-header > section {
        .width(7);
    }
}

// 4 columns (landscape smartphone)
@media (max-width: @4col) {
    #site-header, #page {
        > section {
            .width(4);
        }
    }
    #site-header section {
        .width(4);
    }
}

// 3 columns (portrait smartphone)
@media (max-width: @3col) {
    #site-header, #page {
        > section {
            .width(3);
        }
    }
    #site-header {
        margin-bottom: 20px;
        > section {
            .width(3);
        }
    }
}

.row {
    clear: both;
}

.col {
    float: left;
    margin-left: @gutter * @px;
    &:first-child {
        margin-left: 0;
    }
}

.html-rtl .col {
    float: right;
    margin-right: @gutter * @px;
    margin-left: auto;
    &:first-child {
        margin-right: 0;
    }
}

@media (max-width: @7col) {
    .col {
        float: none;
        margin: 0 auto;
    }
    // Account for the wrapped stuff in the header.
    #page {
        margin-top: 50px;
    }
}

@media (max-width: @4col) {
    #page {
        margin-top: 80px;
    }
}

@media (max-width: @3col) {
    #page {
        margin-top: 85px;
    }
}

// TODO potch: Belongs with the "collapsible" widget.
.more {
    display: none;
    &.expand {
        display: block;
    }
}

footer {
    border-top: 1px solid black;
    margin-top: 20px;
    padding: 16px;
    text-align: center;
}

@import 'lib';

/* Long titles othwerwise break our layout everywhere. */
* {
    word-wrap: break-word;
}

.js-hidden {
    display: none;
}

a {
    text-decoration: none;
    color: @link;
    &:hover {
        text-decoration: underline;
    }
}

body {
    color: @text;
    overflow-x: hidden;
    background: #f0f0f0;
}

.balloon {
    .border-box;
    .border-radius(0 0 5px 5px);
    .transition(.2s top ease-out);
    border: 2px solid #e3873b;
    border-top-width: 0;
    background-color: #fcefb7;
    height: 27px;
    line-height: 24px;
    padding: 0 2.5%;
    position: fixed;
    top: -29px;
    left: 43%;
    &.active {
        top: 0;
    }
}

#page .notification-box {
    margin-bottom: 10px;
}

.notification-box {
    .border-radius(5px);
    .box-shadow(0 -1px 0 #ddd inset, 0 1px 0 rgba(0,0,0,.1));
    border: 1px solid #CCD6E3;
    padding: 15px;
    background: #E3EDFA;
    form {
        line-height: 28px;
        button {
            float: right;
        }
    }
    p {
        margin: .5em 0 0;
    }
    b {
        color: #333;
    }
    h1 {
        color: maroon;
        font-size: 14px;
    }
    h2 {
        color: #458;
        font-size: 12px;
        font-weight: bold;
        margin: 0;
    }
    &.error {
        background: #FEE3E5;
        border-color: #E0C9D6;
        h2 {
            color: #B14949;
        }
    }
    &.warning {
        background: #fd9;
        border: 1px solid darken(#fd9, 60%);
    }
}

#site-header, #page {
    > section {
        .width(10);
        margin: 0 auto;
        .border-box;
        &:after {
            content: '';
            display: block;
            clear: both;
        }
        &.full {
            width: 100%;
        }
    }
}

// account for the header.
#page {
     margin-top: 70px;
}

// 7 columns (portrait tablet)
@media (max-width: @7col) {
    #site-header, #page {
        > section {
            .width(7);
        }
    }
    #site-header > section {
        .width(7);
    }
}

// 4 columns (landscape smartphone)
@media (max-width: @4col) {
    #site-header, #page {
        > section {
            .width(4);
        }
    }
    #site-header section {
        .width(4);
    }
}

// 3 columns (portrait smartphone)
@media (max-width: @3col) {
    #site-header, #page {
        > section {
            .width(3);
        }
    }
    #site-header {
        margin-bottom: 20px;
        > section {
            .width(3);
        }
    }
}

.row {
    clear: both;
}

.col {
    float: left;
    margin-left: @gutter * @px;
    &:first-child {
        margin-left: 0;
    }
}

.html-rtl .col {
    float: right;
    margin-right: @gutter * @px;
    margin-left: auto;
    &:first-child {
        margin-right: 0;
    }
}

@media (max-width: @7col) {
    .col {
        float: none;
        margin: 0 auto;
    }
    // Account for the wrapped stuff in the header.
    #page {
        margin-top: 50px;
    }
}

@media (max-width: @4col) {
    #page {
        margin-top: 80px;
    }
}

@media (max-width: @3col) {
    #page {
        margin-top: 85px;
    }
}

// TODO potch: Belongs with the "collapsible" widget.
.more {
    display: none;
    &.expand {
        display: block;
    }
}

footer {
    border-top: 1px solid black;
    margin-top: 20px;
    padding: 16px;
    text-align: center;
}


override dropdown carets in custom

override dropdown carets in custom

body {
    padding-top: 24px;
}

label:not(.checkbox):not(.radio) {
    font-weight: bold;
}

.navbar .nav li.dropdown .dropdown-toggle .caret,
.navbar .nav li.dropdown.open .caret {
  border-top-color: @grayDarker;
  border-bottom-color: @grayDarker;
}

header {
    position: relative;
    margin-bottom: 24px;

    h1 {
        margin-bottom: 9px;
        font-size: 48px;
        letter-spacing: -1px;
        line-height: 1;
        -webkit-margin-before: 0;
        -webkit-margin-after: 0;
    }

    p {
        font-size: 30px;
        line-height: 36px;
    }

    a, a:hover, a:visited {
        color: @grayDark;
        text-decoration: none;
    }
}

// Markitup
div.box-content .markItUpEditor {
  font-family: @monoFontFamily;
  padding:5px;
  width:600px;
  height:320px;
  clear:both; display:block;
  overflow:auto;
}

// Markitup Modal
.modal div.markItUp {
    width: 500px;
}
.modal textarea.markItUpEditor {
    width: 500px;
    height: 250px;
}

// Boxes
.content-box.editable {
    border: 1px dashed #bbb;
    padding: 5px;
    min-height: 30px;
}
.edit-toggle {
    position: relative;
    float: left;
    left: -20px;
}

.widget {
    position: relative;
    clear: both;
    width: auto;
    margin-bottom: 2em;
    overflow: hidden;
}

body {
    padding-top: 24px;
}

label:not(.checkbox):not(.radio) {
    font-weight: bold;
}

header {
    position: relative;
    margin-bottom: 24px;

    h1 {
        margin-bottom: 9px;
        font-size: 48px;
        letter-spacing: -1px;
        line-height: 1;
        -webkit-margin-before: 0;
        -webkit-margin-after: 0;
    }

    p {
        font-size: 30px;
        line-height: 36px;
    }

    a, a:hover, a:visited {
        color: @grayDark;
        text-decoration: none;
    }
}

// Markitup
div.box-content .markItUpEditor {
  font-family: @monoFontFamily;
  padding:5px;
  width:600px;
  height:320px;
  clear:both; display:block;
  overflow:auto;
}

// Markitup Modal
.modal div.markItUp {
    width: 500px;
}
.modal textarea.markItUpEditor {
    width: 500px;
    height: 250px;
}

// Boxes
.content-box.editable {
    border: 1px dashed #bbb;
    padding: 5px;
    min-height: 30px;
}
.edit-toggle {
    position: relative;
    float: left;
    left: -20px;
}


update demo style

update demo style

fatal: unable to access 'https://github.com/hjin-me/ant-design.git/': The requested URL returned error: 403


sections css tweak

sections css tweak

// Sections
// -------------------------

ul.sections {
	margin: 0;
	display: block;
	background: @blackLight;
	height: 100%;
	width: 80px;
}

ul.sections li {
	display: block;
	border-left: 4px @blackLight solid;
	-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear;
	transition: all .3s linear;
}

ul.sections li [class^="icon-"]:before,
ul.sections li [class*=" icon-"]:before{
	font-size: 30px;
	margin: 1px 0 0 0;
	opacity: 0.4;
	-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear;
	transition: all .3s linear;
}

ul.sections:hover li [class^="icon-"]:before,
ul.sections:hover li [class*=" icon-"]:before {
	opacity: 1
}

ul.sections li a {
	display: block;
	text-decoration: none;
	text-align: center;
	color: @grayLight;
	padding: 20px 4px 4px 0;
	border-bottom: 1px solid @grayDark;
	width: 100%;
	height: 100%;
	margin: 0 0 0 -4px;
}

ul.sections a span {
	font-size: 10px;
	line-height: 1.4em;
	opacity: 0;
	-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear;
	transition: all .3s linear;
	display: block;
}

ul.sections:hover a span {
	opacity: 1
}

// Avatar, Section & Help icons
// -------------------------

ul.sections li.avatar {
	height: 69px;
	padding: 30px 0 2px 0;
	text-align: center;
	margin: 0 0 0 -4px;
	border-bottom: 1px solid @grayDark;
}

ul.sections li.avatar a {
	margin: 0 auto;
	padding: 0;
	width: 40px;
	height: 40px;
	border: none
}

ul.sections li.avatar a img {
	border-radius: 16px;
	width: 30px
}

.faded ul.sections li {
	opacity: 0.4
}

ul.sections li.current, ul.sections li:hover {
    border-left: 4px @orange solid;
}

ul.sections li.avatar.current, ul.sections li.avatar:hover {
	border-left: 4px @blackLight solid;
}

ul.sections li.current a{
    padding-left: 0px;
}

ul.sections li.help {
	margin: 0;
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
}

ul.sections li.help a {
	border-bottom: none;
}

// Section slide-out tray for additional apps
// -------------------------
li.expand a, li.expand{border: none !Important;}

ul.sections-tray {
	padding-top: 102px;
	width: 80px;
}

// Sections
// -------------------------

ul.sections {
	margin: 0;
	display: block;
	background: @blackLight;
	height: 100%;
	width: 80px;
}

ul.sections li {
	display: block;
	border-left: 4px @blackLight solid;
	-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear;
	transition: all .3s linear;
}

ul.sections li [class^="icon-"]:before,
ul.sections li [class*=" icon-"]:before{
	font-size: 30px;
	margin: 1px 0 0 0;
	opacity: 0.4;
	-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear;
	transition: all .3s linear;
}

ul.sections:hover li [class^="icon-"]:before,
ul.sections:hover li [class*=" icon-"]:before {
	opacity: 1
}

ul.sections li a {
	display: block;
	text-decoration: none;
	text-align: center;
	color: @grayLight;
	padding: 20px 4px 4px 0;
	border-bottom: 1px solid @grayDark;
	width: 100%;
	height: 100%;
	margin: 0 0 0 -4px;
}

ul.sections a span {
	font-size: 10px;
	line-height: 1.4em;
	opacity: 0;
	-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear;
	transition: all .3s linear;
	display: block;
}

ul.sections:hover a span {
	opacity: 1
}

// Avatar, Section & Help icons
// -------------------------

ul.sections li.avatar {
	height: 69px;
	padding: 30px 0 2px 0;
	text-align: center;
	margin: 0 0 0 -4px;
	border-bottom: 1px solid @grayDark;
}

ul.sections li.avatar a {
	margin: 0 auto;
	padding: 0;
	width: 40px;
	height: 40px;
	border: none
}

ul.sections li.avatar a img {
	border-radius: 16px;
	width: 30px
}

.faded ul.sections li {
	opacity: 0.4
}

ul.sections li.current, ul.sections li:hover {
    border-left: 4px @orange solid;
}

ul.sections li.avatar.current, ul.sections li.avatar:hover {
	border-left: 4px @blackLight solid;
}

ul.sections li.current a{
    padding-left: 0px;
}

ul.sections li.help {
	margin: 0;
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
}

ul.sections li.help a {
	border-bottom: none;
}

// Section slide-out tray for additional apps
// -------------------------
li.expand a, li.expand{border: none !Important;}

ul.sections-tray {
	padding-top: 100px;
	width: 80px;
}


Improve Styling

Improve Styling

// --------------------------------------------------
// Flexbox LESS mixins
// The spec: http://www.w3.org/TR/css3-flexbox
// --------------------------------------------------

// Flexbox display
// flex or inline-flex
.flex-display(@display: flex) {
	display: ~"-webkit-@{display}";
	display: ~"-moz-@{display}";
	display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
	display: ~"-ms-@{display}"; // IE11
	display: @display;
}

// The 'flex' shorthand
// - applies to: flex items
// <positive-number>, initial, auto, or none
.flex(@columns: initial) {
  -webkit-flex: @columns;
     -moz-flex: @columns;
      -ms-flex: @columns;
          flex: @columns;
}

// Flex Flow Direction
// - applies to: flex containers
// row | row-reverse | column | column-reverse
.flex-direction(@direction: row) {
  -webkit-flex-direction: @direction;
     -moz-flex-direction: @direction;
      -ms-flex-direction: @direction;
          flex-direction: @direction;
}

// Flex Line Wrapping
// - applies to: flex containers
// nowrap | wrap | wrap-reverse
.flex-wrap(@wrap: nowrap) {
  -webkit-flex-wrap: @wrap;
     -moz-flex-wrap: @wrap;
      -ms-flex-wrap: @wrap;
          flex-wrap: @wrap;
}

// Flex Direction and Wrap
// - applies to: flex containers
// <flex-direction> || <flex-wrap>
.flex-flow(@flow) {
  -webkit-flex-flow: @flow;
     -moz-flex-flow: @flow;
      -ms-flex-flow: @flow;
          flex-flow: @flow;
}

// Display Order
// - applies to: flex items
// <integer>
.flex-order(@order: 0) {
  -webkit-order: @order;
     -moz-order: @order;
      -ms-order: @order;
          order: @order;
}

// Flex grow factor
// - applies to: flex items
// <number>
.flex-grow(@grow: 0) {
  -webkit-flex-grow: @grow;
     -moz-flex-grow: @grow;
      -ms-flex-grow: @grow;
          flex-grow: @grow;
}

// Flex shrink
// - applies to: flex item shrink factor
// <number>
.flex-shrink(@shrink: 1) {
  -webkit-flex-shrink: @shrink;
     -moz-flex-shrink: @shrink;
      -ms-flex-shrink: @shrink;
          flex-shrink: @shrink;
}

// Flex basis
// - the initial main size of the flex item
// - applies to: flex itemsnitial main size of the flex item
// <width>
.flex-basis(@width: auto) {
  -webkit-flex-basis: @width;
     -moz-flex-basis: @width;
      -ms-flex-basis: @width;
          flex-basis: @width;
}

// Axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | space-between | space-around
.justify-content(@justify: flex-start) {
  -webkit-justify-content: @justify;
     -moz-justify-content: @justify;
      -ms-justify-content: @justify;
          justify-content: @justify;
}

// Packing Flex Lines
// - applies to: multi-line flex containers
// flex-start | flex-end | center | space-between | space-around | stretch
.align-content(@align: stretch) {
  -webkit-align-content: @align;
     -moz-align-content: @align;
      -ms-align-content: @align;
          align-content: @align;
}

// Cross-axis Alignment
// - applies to: flex containers
// flex-start | flex-end | center | baseline | stretch
.align-items(@align: stretch) {
  -webkit-align-items: @align;
     -moz-align-items: @align;
      -ms-align-items: @align;
          align-items: @align;
}

// Cross-axis Alignment
// - applies to: flex items
// auto | flex-start | flex-end | center | baseline | stretch
.align-self(@align: auto) {
  -webkit-align-self: @align;
     -moz-align-self: @align;
      -ms-align-self: @align;
          align-self: @align;
}

error: pathspec 'client/styles/flexbox.less' did not match any file(s) known to git


Fix layout on Firefox

Fix layout on Firefox

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/VoiSmart/Rocket.Chat.git/'


Bootstrap buttons overriding

Bootstrap buttons overriding

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Digipalvelutehdas/APIKA.git/'