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

.ui.button {
    cursor: pointer;
    display: inline-block;
    min-height: 1em;
    outline: none;
    border: none;
    vertical-align: baseline;
    background: #E0E1E2 none;
    color: rgba(0, 0, 0, 0.6);
    font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
    margin: 0em 0.25em 0em 0em;
    padding: 0.78571429em 1.5em 0.78571429em;
    text-transform: none;
    text-shadow: none;
    font-weight: bold;
    line-height: 1em;
    font-style: normal;
    text-align: center;
    text-decoration: none;
    border-radius: 0.28571429rem;
    box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
    transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
    will-change: '';
    -webkit-tap-highlight-color: transparent;
}

.ui.button:hover {background-color: #CACBCD; background-image: none; box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset; color: rgba(0, 0, 0, 0.8);}
.ui.button:hover .fa {opacity: 0.85;}
.ui.button:focus {background-color: #CACBCD; color: rgba(0, 0, 0, 0.8); background-image: '' !important; box-shadow: '' !important;}
.ui.button:focus .fa {opacity: 0.85;}
.ui.button:active, .ui.active.button:active {background-color: #BABBBC; background-image: ''; color: rgba(0, 0, 0, 0.9); box-shadow: 0px 0px 0px 1px transparent inset, none;}

/******** Active ********/

.ui.active.button {background-color: #C0C1C2; background-image: none; box-shadow: 0px 0px 0px 1px transparent inset; color: rgba(0, 0, 0, 0.95);}
.ui.active.button:hover {background-color: #C0C1C2; background-image: none; color: rgba(0, 0, 0, 0.95);}
.ui.active.button:active {background-color: #C0C1C2; background-image: none;}

/******** Disabled *********/

.ui.buttons .disabled.button, .ui.disabled.button, .ui.button:disabled, .ui.disabled.button:hover, .ui.disabled.active.button {cursor: default; opacity: 0.45 !important; background-image: none !important; box-shadow: none !important; pointer-events: none !important;}
.ui.basic.buttons .ui.disabled.button {border-color: rgba(34, 36, 38, 0.5);}

/********** Labeled Button ********/

.ui.labeled.button:not(.fa) {display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; background: none !important; padding: 0px !important; border: none !important; box-shadow: none !important;}
.ui.labeled.button > .button {margin: 0px;}
.ui.labeled.button > .label {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: 0px 0px 0px -1px !important; padding: ''; font-size: 1em; border-color: rgba(34, 36, 38, 0.15);}

/* Tag */
.ui.labeled.button > .tag.label:before {width: 1.85em; height: 1.85em;}

/* Right */
.ui.labeled.button:not([class*="left labeled"]) > .button {border-top-right-radius: 0px; border-bottom-right-radius: 0px;}
.ui.labeled.button:not([class*="left labeled"]) > .label {border-top-left-radius: 0px; border-bottom-left-radius: 0px;}

/* Left Side */
.ui[class*="left labeled"].button > .button {border-top-left-radius: 0px; border-bottom-left-radius: 0px;}
.ui[class*="left labeled"].button > .label {border-top-right-radius: 0px; border-bottom-right-radius: 0px;}

/****** Social Button ******/

/* VK */
.ui.vk.button {background-color: #4D7198; color: #FFFFFF; background-image: none; box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;}
.ui.vk.button:hover {background-color: #41648a; color: #FFFFFF;}
.ui.vk.button:active {background-color: #3c5876; color: #FFFFFF;}

/****** Icon Button *****/

.ui.button > .fa:not(.button) {height: 0.85714286em; opacity: 0.8; margin: 0em 0.42857143em 0em -0.21428571em; -webkit-transition: opacity 0.1s ease; transition: opacity 0.1s ease; vertical-align: ''; color: '';}
.ui.button:not(.fa) > .fa:not(.button):not(.dropdown), .ui.button:not(.fa) > .fa:not(.button):not(.dropdown) {margin: 0em 0.42857143em 0em -0.21428571em;}
.ui.button:not(.fa) > .right.fa:not(.button):not(.dropdown), .ui.button:not(.fa) > .right.fa:not(.button):not(.dropdown) {margin: 0em -0.21428571em 0em 0.42857143em;}

/***** Variations ******/
/* Кнопка может быть выровнена влево или вправо от его контейнера */

/* Floated */
.ui[class*="left floated"].buttons, .ui[class*="left floated"].button {float: left; margin-left: 0em; margin-right: 0.25em;}
.ui[class*="right floated"].buttons, .ui[class*="right floated"].button {float: right; margin-right: 0em; margin-left: 0.25em;}

/****** Compact ******/
/* Кнопка может уменьшить ее заполнение, чтобы вписаться в условиях ограниченного пространства */

.ui.compact.buttons .button, .ui.compact.button {padding: 0.58928571em 1.125em 0.58928571em;}
.ui.compact.fa.buttons .button, .ui.compact.fa.button, .ui.compact.fa.buttons .button, .ui.compact.fa.button {padding: 0.58928571em 0.58928571em 0.58928571em;}
.ui.compact.labeled.fa.buttons .button, .ui.compact.labeled.fa.button, .ui.compact.labeled.fa.buttons .button, .ui.compact.labeled.fa.button {padding: 0.58928571em 3.69642857em 0.58928571em;}

/****** Sizes ******/
/* Кнопка может иметь различные размеры */

.ui.mini.buttons .button, .ui.mini.buttons .or, .ui.mini.button {font-size: 0.78571429rem;}
.ui.tiny.buttons .button, .ui.tiny.buttons .or, .ui.tiny.button {font-size: 0.85714286rem;}
.ui.small.buttons .button, .ui.small.buttons .or, .ui.small.button {font-size: 0.92857143rem;}
.ui.buttons .button, .ui.buttons .or, .ui.button {font-size: 1rem;}
.ui.large.buttons .button, .ui.large.buttons .or, .ui.large.button {font-size: 1.14285714rem;}
.ui.big.buttons .button, .ui.big.buttons .or, .ui.big.button {font-size: 1.28571429rem;}
.ui.huge.buttons .button, .ui.huge.buttons .or, .ui.huge.button {font-size: 1.42857143rem;}
.ui.massive.buttons .button, .ui.massive.buttons .or, .ui.massive.button {font-size: 1.71428571rem;}

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

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

/************** Basic ******************/
/* Группа кнопок может быть менее выраженным */

.ui.basic.buttons .button, .ui.basic.button {background: transparent none !important; color: rgba(0, 0, 0, 0.6) !important; font-weight: normal; border-radius: 0.28571429rem; text-transform: none; text-shadow: none !important; box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;}
.ui.basic.buttons {box-shadow: none; border: 1px solid rgba(34, 36, 38, 0.15); border-radius: 0.28571429rem;}
.ui.basic.buttons .button {border-radius: 0em;}
.ui.basic.buttons .button:hover, .ui.basic.button:hover {background: #FFFFFF !important; color: rgba(0, 0, 0, 0.8) !important; box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset;}
.ui.basic.buttons .button:focus, .ui.basic.button:focus {background: #FFFFFF !important; color: rgba(0, 0, 0, 0.8) !important; box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset;}
.ui.basic.buttons .button:active, .ui.basic.button:active {background: #F8F8F8 !important; color: rgba(0, 0, 0, 0.9) !important; box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 4px 0px rgba(34, 36, 38, 0.15) inset;}
.ui.basic.buttons .active.button, .ui.basic.active.button {background: rgba(0, 0, 0, 0.05) !important; box-shadow: '' !important; color: rgba(0, 0, 0, 0.95); box-shadow: rgba(34, 36, 38, 0.35);}
.ui.basic.buttons .active.button:hover, .ui.basic.active.button:hover {background-color: rgba(0, 0, 0, 0.05);}

/****** Basic Group *********/
.ui.basic.buttons .button {border-left: 1px solid rgba(34, 36, 38, 0.15); box-shadow: none;}

/***** Labeled Icon ******/
/* Группы могут быть отформатированы для использования нескольких типов кнопок вместе */

.ui.labeled.fa.buttons .button, .ui.labeled.fa.button, .ui.labeled.fa.buttons .button, .ui.labeled.fa.button {position: relative; padding-left: 4.07142857em !important; padding-right: 1.5em !important;}

/* Left Labeled */
.ui.labeled.fa.buttons > .button > .fa, .ui.labeled.fa.button > .fa {position: absolute; height: 100%; line-height: 1; border-radius: 0px; border-top-left-radius: inherit; border-bottom-left-radius: inherit; text-align: center; margin: 0em; width: 2.57142857em; background-color: rgba(0, 0, 0, 0.05); color: ''; box-shadow: -1px 0px 0px 0px transparent inset;}
.ui.labeled.fa.buttons > .button > .fa, .ui.labeled.fa.button > .fa {top: 0em; left: 0em;}

/* Right Labeled */
.ui[class*="right labeled"].fa.button {padding-right: 4.07142857em !important; padding-left: 1.5em !important;}
.ui[class*="right labeled"].fa.button > .fa {left: auto; right: 0em; border-radius: 0px; border-top-right-radius: inherit; border-bottom-right-radius: inherit; box-shadow: 1px 0px 0px 0px transparent inset;}

.ui.labeled.fa.buttons > .button > .fa:before, .ui.labeled.fa.button > .fa:before, .ui.labeled.fa.buttons > .button > .fa:after, .ui.labeled.fa.button > .fa:after {display: block; position: absolute; width: 100%; top: 50%; text-align: center; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.ui.labeled.fa.buttons .button > .fa {border-radius: 0em;}
.ui.labeled.fa.buttons .button:first-child > .fa {border-top-left-radius: 0.28571429rem; border-bottom-left-radius: 0.28571429rem;}
.ui.labeled.fa.buttons .button:last-child > .fa {border-top-right-radius: 0.28571429rem; border-bottom-right-radius: 0.28571429rem;}

/* Fluid Labeled */
.ui.fluid[class*="left labeled"].fa.button, .ui.fluid[class*="right labeled"].fa.button {padding-left: 1.5em !important; padding-right: 1.5em !important;}

/****** Circular ******/
/* Кнопка может быть круглой */

.ui.circular.button {border-radius: 10em;}
.ui.circular.button > .fa {width: 1em; vertical-align: baseline;}

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

.ui.buttons .or {position: relative; width: 0.3em; height: 2.57142857em; z-index: 3;}
.ui.buttons .or:before {position: absolute; text-align: center; border-radius: 500rem; content: 'or'; top: 50%; left: 50%; background-color: #FFFFFF; text-shadow: none; margin-top: -0.89285714em; margin-left: -0.89285714em; width: 1.78571429em; height: 1.78571429em; line-height: 1.78571429em; color: rgba(0, 0, 0, 0.4); font-style: normal; font-weight: bold; box-shadow: 0px 0px 0px 1px transparent inset;}
.ui.buttons .or[data-text]:before {content: attr(data-text);}

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

/******* Attached *******/
/* Кнопка может быть присоединена слева или справа от другого контента */

.ui.attached.button {position: relative; display: block; margin: 0em; border-radius: 0em; box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) !important;}

/* Top / Bottom */
.ui.attached.top.button {border-radius: 0.28571429rem 0.28571429rem 0em 0em;}
.ui.attached.bottom.button {border-radius: 0em 0em 0.28571429rem 0.28571429rem;}

/* Left / Right */
.ui.left.attached.button {display: inline-block; border-left: none; text-align: right; padding-right: 0.75em; border-radius: 0.28571429rem 0em 0em 0.28571429rem;}
.ui.right.attached.button {display: inline-block; text-align: left; padding-left: 0.75em; border-radius: 0em 0.28571429rem 0.28571429rem 0em;}

/* Plural */
.ui.attached.buttons {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    border-radius: 0em;
    width: auto !important;
    z-index: 2;
    margin-left: -1px;
    margin-right: -1px;
}
.ui.attached.buttons .button {margin: 0em;}
.ui.attached.buttons .button:first-child {border-radius: 0em;}
.ui.attached.buttons .button:last-child {border-radius: 0em;}

/* Top / Bottom */
.ui[class*="top attached"].buttons {margin-bottom: -1px; border-radius: 0.28571429rem 0.28571429rem 0em 0em;}
.ui[class*="top attached"].buttons .button:first-child {border-radius: 0.28571429rem 0em 0em 0em;}
.ui[class*="top attached"].buttons .button:last-child {border-radius: 0em 0.28571429rem 0em 0em;}
.ui[class*="bottom attached"].buttons {margin-top: -1px; border-radius: 0em 0em 0.28571429rem 0.28571429rem;}
.ui[class*="bottom attached"].buttons .button:first-child {border-radius: 0em 0em 0em 0.28571429rem;}
.ui[class*="bottom attached"].buttons .button:last-child {border-radius: 0em 0em 0.28571429rem 0em;}

/* Left / Right */
.ui[class*="left attached"].buttons {display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; margin-right: 0em; margin-left: -1px; border-radius: 0em 0.28571429rem 0.28571429rem 0em;}
.ui[class*="left attached"].buttons .button:first-child {margin-left: -1px; border-radius: 0em 0.28571429rem 0em 0em;}
.ui[class*="left attached"].buttons .button:last-child {margin-left: -1px; border-radius: 0em 0em 0.28571429rem 0em;}
.ui[class*="right attached"].buttons {display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; margin-left: 0em; margin-right: -1px; border-radius: 0.28571429rem 0em 0em 0.28571429rem;}
.ui[class*="right attached"].buttons .button:first-child {margin-left: -1px; border-radius: 0.28571429rem 0em 0em 0em;}
.ui[class*="right attached"].buttons .button:last-child {margin-left: -1px; border-radius: 0em 0em 0em 0.28571429rem;}

/******* Fluid ******/
/* Кнопка может взять ширину контейнера */

.ui.fluid.buttons, .ui.fluid.button {width: 100%;}
.ui.fluid.button {display: block;}
.ui.two.buttons {width: 100%;}
.ui.two.buttons > .button {width: 50%;}
.ui.three.buttons {width: 100%;}
.ui.three.buttons > .button {width: 33.333%;}
.ui.four.buttons {width: 100%;}
.ui.four.buttons > .button {width: 25%;}
.ui.five.buttons {width: 100%;}
.ui.five.buttons > .button {width: 20%;}
.ui.six.buttons {width: 100%;}
.ui.six.buttons > .button {width: 16.666%;}
.ui.seven.buttons {width: 100%;}
.ui.seven.buttons > .button {width: 14.285%;}
.ui.eight.buttons {width: 100%;}
.ui.eight.buttons > .button {width: 12.500%;}
.ui.nine.buttons {width: 100%;}
.ui.nine.buttons > .button {width: 11.11%;}
.ui.ten.buttons {width: 100%;}
.ui.ten.buttons > .button {width: 10%;}
.ui.eleven.buttons {width: 100%;}
.ui.eleven.buttons > .button {width: 9.09%;}
.ui.twelve.buttons {width: 100%;}
.ui.twelve.buttons > .button {width: 8.3333%;}

/******* Colors ********/
/* Кнопка может иметь разные цвета */

/* Black */
.ui.black.buttons .button, .ui.black.button {background-color: #1B1C1D; color: #FFFFFF; text-shadow: none; background-image: none;}
.ui.black.button {box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;}
.ui.black.buttons .button:hover, .ui.black.button:hover {background-color: #27292a; color: #FFFFFF; text-shadow: none;}
.ui.black.buttons .button:focus, .ui.black.button:focus {background-color: #2f3032; color: #FFFFFF; text-shadow: none;}
.ui.black.buttons .button:active, .ui.black.button:active {background-color: #343637; color: #FFFFFF; text-shadow: none;}
.ui.black.buttons .active.button, .ui.black.buttons .active.button:active,
.ui.black.active.button, .ui.black.button .active.button:active {background-color: #0f0f10; color: #FFFFFF; text-shadow: none;}

/* Basic */
.ui.basic.black.buttons .button, .ui.basic.black.button {
    box-shadow: 0px 0px 0px 1px #1B1C1D inset !important;
    color: #1B1C1D !important;
}
.ui.basic.black.buttons .button:hover,
.ui.basic.black.button:hover {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #27292a inset !important;
    color: #27292a !important;
}
.ui.basic.black.buttons .button:focus,
.ui.basic.black.button:focus {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #2f3032 inset !important;
    color: #27292a !important;
}
.ui.basic.black.buttons .active.button,
.ui.basic.black.active.button {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #0f0f10 inset !important;
    color: #343637 !important;
}
.ui.basic.black.buttons .button:active,
.ui.basic.black.button:active {
    box-shadow: 0px 0px 0px 1px #343637 inset !important;
    color: #343637 !important;
}
.ui.buttons:not(.vertical) > .basic.black.button:not(:first-child) {
    margin-left: -1px;
}

/*--- Grey ---*/

.ui.grey.buttons .button,
.ui.grey.button {
    background-color: #767676;
    color: #FFFFFF;
    text-shadow: none;
    background-image: none;
}
.ui.grey.button {
    box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
}
.ui.grey.buttons .button:hover,
.ui.grey.button:hover {
    background-color: #838383;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.grey.buttons .button:focus,
.ui.grey.button:focus {
    background-color: #8a8a8a;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.grey.buttons .button:active,
.ui.grey.button:active {
    background-color: #909090;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.grey.buttons .active.button,
.ui.grey.buttons .active.button:active,
.ui.grey.active.button,
.ui.grey.button .active.button:active {
    background-color: #696969;
    color: #FFFFFF;
    text-shadow: none;
}

/* Basic */
.ui.basic.grey.buttons .button,
.ui.basic.grey.button {
    box-shadow: 0px 0px 0px 1px #767676 inset !important;
    color: #767676 !important;
}
.ui.basic.grey.buttons .button:hover,
.ui.basic.grey.button:hover {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #838383 inset !important;
    color: #838383 !important;
}
.ui.basic.grey.buttons .button:focus,
.ui.basic.grey.button:focus {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #8a8a8a inset !important;
    color: #838383 !important;
}
.ui.basic.grey.buttons .active.button,
.ui.basic.grey.active.button {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #696969 inset !important;
    color: #909090 !important;
}
.ui.basic.grey.buttons .button:active,
.ui.basic.grey.button:active {
    box-shadow: 0px 0px 0px 1px #909090 inset !important;
    color: #909090 !important;
}
.ui.buttons:not(.vertical) > .basic.grey.button:not(:first-child) {
    margin-left: -1px;
}

/*--- Brown ---*/

.ui.brown.buttons .button,
.ui.brown.button {
    background-color: #A5673F;
    color: #FFFFFF;
    text-shadow: none;
    background-image: none;
}
.ui.brown.button {
    box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
}
.ui.brown.buttons .button:hover,
.ui.brown.button:hover {
    background-color: #975b33;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.brown.buttons .button:focus,
.ui.brown.button:focus {
    background-color: #90532b;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.brown.buttons .button:active,
.ui.brown.button:active {
    background-color: #805031;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.brown.buttons .active.button,
.ui.brown.buttons .active.button:active,
.ui.brown.active.button,
.ui.brown.button .active.button:active {
    background-color: #995a31;
    color: #FFFFFF;
    text-shadow: none;
}

/* Basic */
.ui.basic.brown.buttons .button,
.ui.basic.brown.button {
    box-shadow: 0px 0px 0px 1px #A5673F inset !important;
    color: #A5673F !important;
}
.ui.basic.brown.buttons .button:hover,
.ui.basic.brown.button:hover {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #975b33 inset !important;
    color: #975b33 !important;
}
.ui.basic.brown.buttons .button:focus,
.ui.basic.brown.button:focus {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #90532b inset !important;
    color: #975b33 !important;
}
.ui.basic.brown.buttons .active.button,
.ui.basic.brown.active.button {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #995a31 inset !important;
    color: #805031 !important;
}
.ui.basic.brown.buttons .button:active,
.ui.basic.brown.button:active {
    box-shadow: 0px 0px 0px 1px #805031 inset !important;
    color: #805031 !important;
}
.ui.buttons:not(.vertical) > .basic.brown.button:not(:first-child) {
    margin-left: -1px;
}

/*--- Blue ---*/

.ui.blue.buttons .button,
.ui.blue.button {
    background-color: #2185D0;
    color: #FFFFFF;
    text-shadow: none;
    background-image: none;
}
.ui.blue.button {
    box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
}
.ui.blue.buttons .button:hover,
.ui.blue.button:hover {
    background-color: #1678c2;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.blue.buttons .button:focus,
.ui.blue.button:focus {
    background-color: #0d71bb;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.blue.buttons .button:active,
.ui.blue.button:active {
    background-color: #1a69a4;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.blue.buttons .active.button,
.ui.blue.buttons .active.button:active,
.ui.blue.active.button,
.ui.blue.button .active.button:active {
    background-color: #1279c6;
    color: #FFFFFF;
    text-shadow: none;
}

/* Basic */
.ui.basic.blue.buttons .button,
.ui.basic.blue.button {
    box-shadow: 0px 0px 0px 1px #2185D0 inset !important;
    color: #2185D0 !important;
}
.ui.basic.blue.buttons .button:hover,
.ui.basic.blue.button:hover {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #1678c2 inset !important;
    color: #1678c2 !important;
}
.ui.basic.blue.buttons .button:focus,
.ui.basic.blue.button:focus {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #0d71bb inset !important;
    color: #1678c2 !important;
}
.ui.basic.blue.buttons .active.button,
.ui.basic.blue.active.button {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #1279c6 inset !important;
    color: #1a69a4 !important;
}
.ui.basic.blue.buttons .button:active,
.ui.basic.blue.button:active {
    box-shadow: 0px 0px 0px 1px #1a69a4 inset !important;
    color: #1a69a4 !important;
}
.ui.buttons:not(.vertical) > .basic.blue.button:not(:first-child) {
    margin-left: -1px;
}

/*--- Green ---*/

.ui.green.buttons .button,
.ui.green.button {
    background-color: #21BA45;
    color: #FFFFFF;
    text-shadow: none;
    background-image: none;
}
.ui.green.button {
    box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
}
.ui.green.buttons .button:hover,
.ui.green.button:hover {
    background-color: #16ab39;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.green.buttons .button:focus,
.ui.green.button:focus {
    background-color: #0ea432;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.green.buttons .button:active,
.ui.green.button:active {
    background-color: #198f35;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.green.buttons .active.button,
.ui.green.buttons .active.button:active,
.ui.green.active.button,
.ui.green.button .active.button:active {
    background-color: #13ae38;
    color: #FFFFFF;
    text-shadow: none;
}

/* Basic */
.ui.basic.green.buttons .button,
.ui.basic.green.button {
    box-shadow: 0px 0px 0px 1px #21BA45 inset !important;
    color: #21BA45 !important;
}
.ui.basic.green.buttons .button:hover,
.ui.basic.green.button:hover {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #16ab39 inset !important;
    color: #16ab39 !important;
}
.ui.basic.green.buttons .button:focus,
.ui.basic.green.button:focus {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #0ea432 inset !important;
    color: #16ab39 !important;
}
.ui.basic.green.buttons .active.button,
.ui.basic.green.active.button {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #13ae38 inset !important;
    color: #198f35 !important;
}
.ui.basic.green.buttons .button:active,
.ui.basic.green.button:active {
    box-shadow: 0px 0px 0px 1px #198f35 inset !important;
    color: #198f35 !important;
}
.ui.buttons:not(.vertical) > .basic.green.button:not(:first-child) {
    margin-left: -1px;
}

/*--- Orange ---*/

.ui.orange.buttons .button,
.ui.orange.button {
    background-color: #F2711C;
    color: #FFFFFF;
    text-shadow: none;
    background-image: none;
}
.ui.orange.button {
    box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
}
.ui.orange.buttons .button:hover,
.ui.orange.button:hover {
    background-color: #f26202;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.orange.buttons .button:focus,
.ui.orange.button:focus {
    background-color: #e55b00;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.orange.buttons .button:active,
.ui.orange.button:active {
    background-color: #cf590c;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.orange.buttons .active.button,
.ui.orange.buttons .active.button:active,
.ui.orange.active.button,
.ui.orange.button .active.button:active {
    background-color: #f56100;
    color: #FFFFFF;
    text-shadow: none;
}

/* Basic */
.ui.basic.orange.buttons .button,
.ui.basic.orange.button {
    box-shadow: 0px 0px 0px 1px #F2711C inset !important;
    color: #F2711C !important;
}
.ui.basic.orange.buttons .button:hover,
.ui.basic.orange.button:hover {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #f26202 inset !important;
    color: #f26202 !important;
}
.ui.basic.orange.buttons .button:focus,
.ui.basic.orange.button:focus {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #e55b00 inset !important;
    color: #f26202 !important;
}
.ui.basic.orange.buttons .active.button,
.ui.basic.orange.active.button {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #f56100 inset !important;
    color: #cf590c !important;
}
.ui.basic.orange.buttons .button:active,
.ui.basic.orange.button:active {
    box-shadow: 0px 0px 0px 1px #cf590c inset !important;
    color: #cf590c !important;
}
.ui.buttons:not(.vertical) > .basic.orange.button:not(:first-child) {
    margin-left: -1px;
}

/*--- Pink ---*/

.ui.pink.buttons .button,
.ui.pink.button {
    background-color: #E03997;
    color: #FFFFFF;
    text-shadow: none;
    background-image: none;
}
.ui.pink.button {
    box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
}
.ui.pink.buttons .button:hover,
.ui.pink.button:hover {
    background-color: #e61a8d;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.pink.buttons .button:focus,
.ui.pink.button:focus {
    background-color: #e10f85;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.pink.buttons .button:active,
.ui.pink.button:active {
    background-color: #c71f7e;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.pink.buttons .active.button,
.ui.pink.buttons .active.button:active,
.ui.pink.active.button,
.ui.pink.button .active.button:active {
    background-color: #ea158d;
    color: #FFFFFF;
    text-shadow: none;
}

/* Basic */
.ui.basic.pink.buttons .button,
.ui.basic.pink.button {
    box-shadow: 0px 0px 0px 1px #E03997 inset !important;
    color: #E03997 !important;
}
.ui.basic.pink.buttons .button:hover,
.ui.basic.pink.button:hover {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #e61a8d inset !important;
    color: #e61a8d !important;
}
.ui.basic.pink.buttons .button:focus,
.ui.basic.pink.button:focus {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #e10f85 inset !important;
    color: #e61a8d !important;
}
.ui.basic.pink.buttons .active.button,
.ui.basic.pink.active.button {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #ea158d inset !important;
    color: #c71f7e !important;
}
.ui.basic.pink.buttons .button:active,
.ui.basic.pink.button:active {
    box-shadow: 0px 0px 0px 1px #c71f7e inset !important;
    color: #c71f7e !important;
}
.ui.buttons:not(.vertical) > .basic.pink.button:not(:first-child) {
    margin-left: -1px;
}

/*--- Violet ---*/

.ui.violet.buttons .button,
.ui.violet.button {
    background-color: #6435C9;
    color: #FFFFFF;
    text-shadow: none;
    background-image: none;
}
.ui.violet.button {
    box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
}
.ui.violet.buttons .button:hover,
.ui.violet.button:hover {
    background-color: #5829bb;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.violet.buttons .button:focus,
.ui.violet.button:focus {
    background-color: #4f20b5;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.violet.buttons .button:active,
.ui.violet.button:active {
    background-color: #502aa1;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.violet.buttons .active.button,
.ui.violet.buttons .active.button:active,
.ui.violet.active.button,
.ui.violet.button .active.button:active {
    background-color: #5626bf;
    color: #FFFFFF;
    text-shadow: none;
}

/* Basic */
.ui.basic.violet.buttons .button,
.ui.basic.violet.button {
    box-shadow: 0px 0px 0px 1px #6435C9 inset !important;
    color: #6435C9 !important;
}
.ui.basic.violet.buttons .button:hover,
.ui.basic.violet.button:hover {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #5829bb inset !important;
    color: #5829bb !important;
}
.ui.basic.violet.buttons .button:focus,
.ui.basic.violet.button:focus {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #4f20b5 inset !important;
    color: #5829bb !important;
}
.ui.basic.violet.buttons .active.button,
.ui.basic.violet.active.button {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #5626bf inset !important;
    color: #502aa1 !important;
}
.ui.basic.violet.buttons .button:active,
.ui.basic.violet.button:active {
    box-shadow: 0px 0px 0px 1px #502aa1 inset !important;
    color: #502aa1 !important;
}
.ui.buttons:not(.vertical) > .basic.violet.button:not(:first-child) {
    margin-left: -1px;
}

/*--- Purple ---*/

.ui.purple.buttons .button,
.ui.purple.button {
    background-color: #A333C8;
    color: #FFFFFF;
    text-shadow: none;
    background-image: none;
}
.ui.purple.button {
    box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
}
.ui.purple.buttons .button:hover,
.ui.purple.button:hover {
    background-color: #9627ba;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.purple.buttons .button:focus,
.ui.purple.button:focus {
    background-color: #8f1eb4;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.purple.buttons .button:active,
.ui.purple.button:active {
    background-color: #82299f;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.purple.buttons .active.button,
.ui.purple.buttons .active.button:active,
.ui.purple.active.button,
.ui.purple.button .active.button:active {
    background-color: #9724be;
    color: #FFFFFF;
    text-shadow: none;
}

/* Basic */
.ui.basic.purple.buttons .button,
.ui.basic.purple.button {
    box-shadow: 0px 0px 0px 1px #A333C8 inset !important;
    color: #A333C8 !important;
}
.ui.basic.purple.buttons .button:hover,
.ui.basic.purple.button:hover {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #9627ba inset !important;
    color: #9627ba !important;
}
.ui.basic.purple.buttons .button:focus,
.ui.basic.purple.button:focus {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #8f1eb4 inset !important;
    color: #9627ba !important;
}
.ui.basic.purple.buttons .active.button,
.ui.basic.purple.active.button {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #9724be inset !important;
    color: #82299f !important;
}
.ui.basic.purple.buttons .button:active,
.ui.basic.purple.button:active {
    box-shadow: 0px 0px 0px 1px #82299f inset !important;
    color: #82299f !important;
}
.ui.buttons:not(.vertical) > .basic.purple.button:not(:first-child) {
    margin-left: -1px;
}

/*--- Red ---*/

.ui.red.buttons .button,
.ui.red.button {
    background-color: #DB2828;
    color: #FFFFFF;
    text-shadow: none;
    background-image: none;
}
.ui.red.button {
    box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
}
.ui.red.buttons .button:hover,
.ui.red.button:hover {
    background-color: #d01919;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.red.buttons .button:focus,
.ui.red.button:focus {
    background-color: #ca1010;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.red.buttons .button:active,
.ui.red.button:active {
    background-color: #b21e1e;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.red.buttons .active.button,
.ui.red.buttons .active.button:active,
.ui.red.active.button,
.ui.red.button .active.button:active {
    background-color: #d41515;
    color: #FFFFFF;
    text-shadow: none;
}

/* Basic */
.ui.basic.red.buttons .button,
.ui.basic.red.button {
    box-shadow: 0px 0px 0px 1px #DB2828 inset !important;
    color: #DB2828 !important;
}
.ui.basic.red.buttons .button:hover,
.ui.basic.red.button:hover {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #d01919 inset !important;
    color: #d01919 !important;
}
.ui.basic.red.buttons .button:focus,
.ui.basic.red.button:focus {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #ca1010 inset !important;
    color: #d01919 !important;
}
.ui.basic.red.buttons .active.button,
.ui.basic.red.active.button {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #d41515 inset !important;
    color: #b21e1e !important;
}
.ui.basic.red.buttons .button:active,
.ui.basic.red.button:active {
    box-shadow: 0px 0px 0px 1px #b21e1e inset !important;
    color: #b21e1e !important;
}
.ui.buttons:not(.vertical) > .basic.red.button:not(:first-child) {
    margin-left: -1px;
}

/*--- Teal ---*/

.ui.teal.buttons .button,
.ui.teal.button {
    background-color: #00B5AD;
    color: #FFFFFF;
    text-shadow: none;
    background-image: none;
}
.ui.teal.button {
    box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
}
.ui.teal.buttons .button:hover,
.ui.teal.button:hover {
    background-color: #009c95;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.teal.buttons .button:focus,
.ui.teal.button:focus {
    background-color: #008c86;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.teal.buttons .button:active,
.ui.teal.button:active {
    background-color: #00827c;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.teal.buttons .active.button,
.ui.teal.buttons .active.button:active,
.ui.teal.active.button,
.ui.teal.button .active.button:active {
    background-color: #009c95;
    color: #FFFFFF;
    text-shadow: none;
}

/* Basic */
.ui.basic.teal.buttons .button,
.ui.basic.teal.button {
    box-shadow: 0px 0px 0px 1px #00B5AD inset !important;
    color: #00B5AD !important;
}
.ui.basic.teal.buttons .button:hover,
.ui.basic.teal.button:hover {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #009c95 inset !important;
    color: #009c95 !important;
}
.ui.basic.teal.buttons .button:focus,
.ui.basic.teal.button:focus {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #008c86 inset !important;
    color: #009c95 !important;
}
.ui.basic.teal.buttons .active.button,
.ui.basic.teal.active.button {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #009c95 inset !important;
    color: #00827c !important;
}
.ui.basic.teal.buttons .button:active,
.ui.basic.teal.button:active {
    box-shadow: 0px 0px 0px 1px #00827c inset !important;
    color: #00827c !important;
}
.ui.buttons:not(.vertical) > .basic.teal.button:not(:first-child) {
    margin-left: -1px;
}

/*--- Olive ---*/

.ui.olive.buttons .button,
.ui.olive.button {
    background-color: #B5CC18;
    color: #FFFFFF;
    text-shadow: none;
    background-image: none;
}
.ui.olive.button {
    box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
}
.ui.olive.buttons .button:hover,
.ui.olive.button:hover {
    background-color: #a7bd0d;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.olive.buttons .button:focus,
.ui.olive.button:focus {
    background-color: #a0b605;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.olive.buttons .button:active,
.ui.olive.button:active {
    background-color: #8d9e13;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.olive.buttons .active.button,
.ui.olive.buttons .active.button:active,
.ui.olive.active.button,
.ui.olive.button .active.button:active {
    background-color: #aac109;
    color: #FFFFFF;
    text-shadow: none;
}

/* Basic */
.ui.basic.olive.buttons .button,
.ui.basic.olive.button {
    box-shadow: 0px 0px 0px 1px #B5CC18 inset !important;
    color: #B5CC18 !important;
}
.ui.basic.olive.buttons .button:hover,
.ui.basic.olive.button:hover {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #a7bd0d inset !important;
    color: #a7bd0d !important;
}
.ui.basic.olive.buttons .button:focus,
.ui.basic.olive.button:focus {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #a0b605 inset !important;
    color: #a7bd0d !important;
}
.ui.basic.olive.buttons .active.button,
.ui.basic.olive.active.button {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #aac109 inset !important;
    color: #8d9e13 !important;
}
.ui.basic.olive.buttons .button:active,
.ui.basic.olive.button:active {
    box-shadow: 0px 0px 0px 1px #8d9e13 inset !important;
    color: #8d9e13 !important;
}
.ui.buttons:not(.vertical) > .basic.olive.button:not(:first-child) {
    margin-left: -1px;
}

/*--- Yellow ---*/

.ui.yellow.buttons .button,
.ui.yellow.button {
    background-color: #FBBD08;
    color: #FFFFFF;
    text-shadow: none;
    background-image: none;
}
.ui.yellow.button {
    box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
}
.ui.yellow.buttons .button:hover,
.ui.yellow.button:hover {
    background-color: #eaae00;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.yellow.buttons .button:focus,
.ui.yellow.button:focus {
    background-color: #daa300;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.yellow.buttons .button:active,
.ui.yellow.button:active {
    background-color: #cd9903;
    color: #FFFFFF;
    text-shadow: none;
}
.ui.yellow.buttons .active.button,
.ui.yellow.buttons .active.button:active,
.ui.yellow.active.button,
.ui.yellow.button .active.button:active {
    background-color: #eaae00;
    color: #FFFFFF;
    text-shadow: none;
}

/* Basic */
.ui.basic.yellow.buttons .button,
.ui.basic.yellow.button {
    box-shadow: 0px 0px 0px 1px #FBBD08 inset !important;
    color: #FBBD08 !important;
}
.ui.basic.yellow.buttons .button:hover,
.ui.basic.yellow.button:hover {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #eaae00 inset !important;
    color: #eaae00 !important;
}
.ui.basic.yellow.buttons .button:focus,
.ui.basic.yellow.button:focus {
    background: transparent !important;
    box-shadow: 0px 0px 0px 1px #daa300 inset !important;
    color: #eaae00 !important;
}
.ui.basic.yellow.buttons .active.button, .ui.basic.yellow.active.button {background: transparent !important; box-shadow: 0px 0px 0px 1px #eaae00 inset !important; color: #cd9903 !important;}
.ui.basic.yellow.buttons .button:active, .ui.basic.yellow.button:active {box-shadow: 0px 0px 0px 1px #cd9903 inset !important; color: #cd9903 !important;}
.ui.buttons:not(.vertical) > .basic.yellow.button:not(:first-child) {margin-left: -1px;}

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

.ui.buttons {display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; font-size: 0em; vertical-align: baseline; margin: 0em 0.25em 0em 0em;}
.ui.buttons:not(.basic):not(.inverted) {box-shadow: none;}

/* Clearfix */
.ui.buttons:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

.ui.buttons .button {-webkit-box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; margin: 0em; border-radius: 0em; margin: 0px 0px 0px 0px;}
.ui.buttons > .ui.button:not(.basic):not(.inverted), .ui.buttons:not(.basic):not(.inverted) > .button {box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;}
.ui.buttons .button:first-child {border-left: none; margin-left: 0em; border-top-left-radius: 0.28571429rem; border-bottom-left-radius: 0.28571429rem;}
.ui.buttons .button:last-child {border-top-right-radius: 0.28571429rem; border-bottom-right-radius: 0.28571429rem;}

