/*   ADMIRE ADMIN Project CSS Table of Content  */
/*

    1. Reset css
    2. Nav bars
      2.1 Top bar
      2.2 Left menu
      2.3 Minimize menu
      2.4 Right bar
    3. Body header
    4.Skin colors
    5. Common css
    6. Users css
    7. Tables
    8. Fixed menu header css
    9. Media queries.
    10. Modern UI
*/
/* ================ 1.Reset css========================== */
.card-header {
  font-family: "Hind", sans-serif;
  font-size: 16px;
}

.card {
  margin-bottom: 35px;
}

.card-header i {
  padding: 0 5px;
}

.disabled {
  opacity: 0.65;
}

.card-body {
  padding: 0 1.25rem 1.25rem 1.25rem;
}

.custom-control-indicator {
  pointer-events: all !important;
}

.custom-radio .custom-control-input:checked ~ .custom-control-indicator {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-3 -4 7 9'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E");
}

.bg-primary, .bg-danger, .bg-success, .bg-warning, .bg-info, .bg-mint {
  color: #fff;
}

.btn {
  outline: none !important;
}

.button-rounded {
  border-radius: 50px;
}

.main-bar .breadcrumb > li + li:before {
  padding: 0 6px;
  font: normal normal normal 15px/1 FontAwesome;
}

a.btn:focus {
  color: #fff;
}

.btn-secondary:hover {
  background-color: #60686f !important;
}

/*================Different card styles====================*/
/*card header colors*/
.header_colors {
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
  padding-bottom: 5px;
}

.header_colors .inline_table {
  display: inline-table;
  margin-left: 15px;
  margin-top: 15px;
}

.header_colors .inline_table div {
  width: 25px;
  height: 25px;
  border-radius: 50px;
}

.header-noticebar
{
  padding: 14px;
  background-color: #feb700;
  margin-top: 63px;
  font-size: 16px;
  font-weight: bold;
}

.header-noticebar > .noticebar-link
{
  margin-left: 202px;
}

@media screen and (max-width: 1025px) {
  .header-noticebar
  {
    margin-top: 63px;
  }
  .header-noticebar > .noticebar-link
  {
    margin-left: 0;
  }
}

.inline_table .bg-white {
  box-shadow: -1px 1px 5px 2px #ccc;
}

.text_for_save {
  border-radius: 0;
}

/*full screen*/
.fullscreen {
  z-index: 9999;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.card-header .fa {
  cursor: pointer;
}

.card_refresh_section {
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  opacity: 0.5;
}

.card_refresh_section img {
  position: absolute;
  width: 40px;
  height: 40px;
  left: 50%;
  top: 50%;
  margin-left: -20px;
}

.jspPane {
  width: 100% !important;
}

button, .btn {
  cursor: pointer;
}

/*=================== End of different card styles=============*/
/*============================2. Nav bars=========================*/
/* 2.1 Top bar */
.admin_img {
  width: 45px;
  height: 45px;
  margin-top: -10px;
}

.admin_img2 {
  width: 30px;
  height: 30px;
}

.navbar-brand h4 {
  font-size: 24px; /* Number 2 */
}

#menu-toggle .fa {
  font-size: 18px;
}

.micheal_btn {
  padding-right: 2px !important;
}

#menu li {
  border-bottom: none;
}

#menu hr.divider {
  background: white;
  margin-left: 2rem;
  margin-right: 2rem;
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}

#top .user-settings .btn {
  outline: none !important;
  box-shadow: none;
}

#top .user-settings .micheal_btn {
  font-family: "Source Sans Pro", sans-serif !important;
}

#top .badge {
  font-size: 9px;
}

#top .navbar-brand {
  padding-top: 16px;
  /* margin-left: 1em; */
  width: 55%;
}

.navbar-brand h4 {
  overflow-x: hidden;
  text-overflow: ellipsis;
}

.user-info li {
  color: #ccc;
}

.top_menubar li {
  padding: 9px 0;
}

.top_menubar li a {
  padding: 9px 7px;
}

.card:hover {
  box-shadow: 0 0 25px -5px #9e9c9e;
}

.without_border {
  border: 0;
  background-color: #ccc;
}

.hidden-md-up {
  margin: 10px;
  color: white;
  border: 1px solid white;
}

.user-info {
  padding-top: 30px;
  float: left;
}

.admire_admin {
  margin-top: 14px;
}

.drop_box_align {
  margin-top: 6px;
}

.calendar_badge {
  margin-right: 10px;
}

#top .navbar {
  padding: 8.925px 0px;
  margin-bottom: 0;
  background: #fff;
  /* box-shadow: 0 0 10px 1px #ccc; */
}

.menu {
  margin-top: 5px;
  margin-left: 25px;
  cursor: pointer;
}

.messages {
  line-height: 19px;
}

#top .notifications.messages .btn-sm, #top .notifications.no-bg .btn-sm {
  margin-right: 20px;
}

#top .btn {
  padding: 0.5rem 0 !important;
}

.top_search_box {
  width: 170px;
  margin: 0 20px 0 0;
}

.notifications_badge_top {
  top: -12px !important;
  margin-left: -7px !important;
}

.user-settings button {
  color: #343434;
  border: none;
}

.messages .fa-bell-o, .messages .fa-envelope-o {
  font-size: 16px;
}

.notifications .popover-header {
  background-color: #ffb366;
  color: #fff;
  font-size: 14px;
  margin-top: -8px;
  font-weight: bold;
  text-align: center;
}

#request_btn .badge {
  top: -12px !important;
  left: -9px !important;
}

.request_section .fa-sliders {
  font-size: 15px;
}

.request_section .message-img {
  width: 34px;
  height: auto;
}

#requests .chat_name {
  font-size: 15px;
  font-weight: 500;
}

#requests .data {
  border: 0;
  margin-top: 4px;
}

#requests .setting_title {
  color: #666;
  margin: 25px 0 0 8px;
}

#requests .fa-circle {
  margin-top: 7px;
}

#requests .progress {
  height: 10px;
  margin-bottom: 0;
}

.dropdown-item {
  white-space: normal !important;
}

.dropdown-item.title {
  margin-top: -8px;
  font-weight: bold;
  padding: 7px 10px;
  background-color: #4368D8;
  color: #fff !important;
  text-align: center;
  font-size: 15px;
}

.setting_ions {
  font-size: 20px;
  margin-top: 10px;
}

/* End of Navbar Sliders dropdown */
/* top right menu dropdowns */
.dropdown-menu#request_list {
  left: -254%;
}

.notifications .dropdown-menu {
  width: 230px;
  left: -113%;
  top: 38px;
}

.messages .dropdown-menu {
  width: 220px !important;
  left: -130%;
}

.messages .dropdown-menu .popover-footer a, .notifications .dropdown-menu .popover-footer a {
  display: block;
}

.user-settings .dropdown-menu {
  width: 167px;
  left: -63px;
  top: 34px;
}

.notifications .data {
  border-bottom: 1px solid #ddd;
  padding: 5px 15px 5px 15px;
  display: inline-block;
  width: 100%;
  cursor: pointer;
  font-size: 12px;
}

.notifications .message-data {
  max-width: 100%;
  min-width: 30px;
  height: auto;
}

.notifications .dropdown-menu:before {
  position: absolute;
  top: -9px;
  left: 24%;
  display: inline-block;
  content: '';
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ccc;
  border-bottom-color: #ffb366;
  border-left: 10px solid transparent;
}

#notifications .data:hover, #messages .data:hover {
  background-color: #eee;
}

.messages .dropdown-menu:before {
  position: absolute;
  top: -9px;
  left: 29%;
  display: inline-block;
  content: '';
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ccc;
  border-bottom-color: #ffb366;
  border-left: 10px solid transparent;
}

.user-settings .dropdown-menu:before {
  position: absolute;
  top: -9px;
  left: 80%;
  display: inline-block;
  content: '';
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ccc;
  border-bottom-color: #4368D8;
  border-left: 10px solid transparent;
}

.popover-footer {
  padding: 8px 14px;
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  background-color: #ffb366;
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0 0 3px 3px;
  text-align: center;
  margin-bottom: -8px;
}

.notifications .message-img {
  width: 30px;
  height: auto;
  margin: 7px 0 0 -7px;
}

.no-bg {
  background: none !important;
}

.bg-container {
  background: #f5f5f5;
  color: #525252;
}

.user-settings .dropdown-menu li a span {
  float: left;
  display: inline-block;
  color: #aaa;
  padding-right: 10px;
}

.user-settings .dropdown-menu li a {
  padding: -1px;
  display: table;
  width: 100%;
  font-size: 13px;
  letter-spacing: 0.05em;
}

.user-settings .popover-header {
  margin-top: -5px;
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 12px;
  background-color: #e6e6e6;
  text-align: center;
}

.well {
  margin-left: 5px;
  background-color: #fefefe;
  border-color: #fefefe;
  margin-bottom: 10px;
  padding: 10px 8px 1px 5px;
}

#right .alert {
  margin-left: 5px;
}

/* End of top right menu dropdowns */
/*=============================== top header search section css =======================*/
.small_device_search i {
  font-size: 15px;
  margin-right: 5px;
}

.search_bar_small {
  padding: 10px 30px 30px 30px;
}

#search_modal .close {
  margin: 10px 10px 0 0;
}

.top_search_box:after, .top_search_box:before {
  content: " ";
  display: table;
}

.header_input_search.closed {
  width: 37px;
  border-color: transparent;
  background-color: transparent;
}

/*=============================== top header search section css ================================*/
/* ================================ End of top bar ===================================*/
/* ================================ 2.2 Left menu ===================================*/
#left {
  background-color: #fff;
  font-size: 15px;
  /* margin-top: -1px; */
  width: 240px;
  position: absolute;
  left: -250px;
  height: 0;
  overflow: hidden;
  box-shadow: 0 10px 8px 3px #ccc;
}

/* .left_media {
  background-image: url("../img/2.JPG");
} */

.user-media {
  justify-content: center;
}

.user-media .user-link {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
  margin-bottom: 3em;
  position: relative;
}

.user-media img.sidebar-logo {
  width: 10em;
}

.user-media .user-link {
  color: #fff !important;
  float: left;
}

.user-media .user-link .user-img {
  margin: 17px 10px 3px 17px;
  float: left;
}

.user-media .media-body {
  display: block;
  float: left;
  margin-left: 12px;
}

.user-media .media-body h5.media-heading {
  color: #fff;
  padding-top: 8px;
  margin-bottom: 3px;
}

.user-media .media-body ul.user-info li {
  color: #ccc;
}

.side-right .user-link .user-label {
  left: 6px;
  right: auto;
}

.sidebar-left-mini .user-wrapper {
  position: absolute;
  top: 0;
  left: -100%;
  display: none;
  min-width: 250px;
}

.user-media-toggleHover {
  display: none;
}

.sidebar-left-mini .user-media-toggleHover {
  font-size: 18px;
  color: #fff;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  display: inherit;
}

.sidebar-left-mini .user-media:hover .user-wrapper {
  left: 100%;
  display: inherit;
  z-index: 9999;
}

.sidebar-left-mini.side-right .user-media:hover .user-wrapper {
  left: auto;
  right: 100%;
}

.user-wrapper .user-info {
  margin-top: 5px;
}

#menu.affix {
  position: fixed;
  width: 250px;
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

#menu.affix:hover {
  overflow-y: scroll;
}

.sidebar-left-mini #menu .nav-header {
  position: absolute !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
}

#menu .fa.arrow {
  float: right;
  padding-top: 3px;
  margin-right: 15px;
}

#menu .fa.arrow:before {
  content: "\f104";
}

#menu .active > a > .fa.arrow:before {
  content: "\f107";
}

.badge {
  padding: 0.4em 0.4em;
}

.badge-pill {
  padding-left: 0.6em;
  padding-right: 0.6em;
}

.admin_img3 {
  width: 64px;
  height: 64px;
}

#left, #right {
  /*transition: all 0.3s ease-in-out;*/
  z-index: 1006;
  width: 250px;
}

#menu li a {
  color: #fff;
  padding: 15px 8px 15px 2.5em;
  border-bottom: none;
  font-size: 14px; /* Number 1 */
}

#menu li.active > ul {
  background-color: #f2f2f2;
  color: #343434;
}

#menu li ul li a {
  padding: 10px 8px 10px 30px;
}

#menu li.active a {
  color: black;
}

#menu li.active {
  background: #fff;
  /* border-left: 4px solid #E9E9E9; */
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  color: black;
}

.sidebarbottom {
  top: auto !important;
  bottom: 0 !important;
}

#menu li:nth-child(3) .sidebarbottom {
  top: 0 !important;
  bottom: auto !important;
}

#menu, #menu ul, #menu li, #menu a {
  padding: 0;
  margin: 0;
  color: #f4f4f4;
}

#menu, #menu ul {
  list-style: none;
}

#menu li, #menu a {
  position: relative;
  display: block;
}

#menu a, #menu a:hover, #menu a:focus, #menu a:active {
  text-decoration: none;
}

#menu ul {
  background: rgba(236, 102, 72, 0.05);
}

#menu ul li > ul.sub-submenu > li > a {
  padding-left: 50px;
}

#menu ul li > ul > li > ul.sub-submenu > li > a {
  padding-left: 65px;
}

#menu ul li > ul > li > ul.sub-submenu > li > ul > li > a {
  padding-left: 80px;
}

#menu ul li > ul > li > ul.sub-submenu > li > ul > li > ul > li > a {
  padding-left: 95px;
}

#menu li:not(.active) a:hover {
  background: #fff;
  /* border-left: 4px solid #E9E9E9; */
  /* padding: 15px 8px 15px 1.9em; */
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  color: black;
}

#menu li ul li:not(.active) a:hover {
  background: #fff;
  border-left: 4px solid #4fb7fe;
  padding: 10px 8px 10px 26px;
  box-shadow: 0 0 11px #ccc;
}

#menu li.active > ul > li > a {
  color: #343434;
}

#menu li.active ul li.active > a {
  color: #fff;
  background-color: #4fb7fe;
}

.sub-menu.sub-submenu.collapse.show li a:hover {
  padding-left: 46px !important;
}

.sub-menu.sub-submenu.collapse.show li.active a:hover {
  padding-left: 50px !important;
}

.sub-menu.sub-submenu.collapse.show .sub-submenu li.active a:hover {
  padding-left: 65px !important;
}

.sub-menu.sub-submenu.collapse.show .sub-submenu li a:hover {
  padding-left: 61px !important;
}

.sub-menu.sub-submenu.collapse.show .sub-submenu .sub-submenu li.active a:hover {
  padding-left: 80px !important;
}

.sub-menu.sub-submenu.collapse.show .sub-submenu .sub-submenu li a:hover {
  padding-left: 76px !important;
}

.sub-menu.sub-submenu.collapse.show .sub-submenu .sub-submenu .sub-submenu li a:hover {
  padding-left: 91px !important;
}

.new_badge {
  margin-left: 10px;
}

.no_header #left {
  display: table-cell;
  float: inherit;
}

.no_header #content {
  display: table-cell;
  vertical-align: top;
}

/* ================================ End of left menu ===================================*/
/*========================== 2.3 Minimize menu hover ======================*/
.dropdown_menu.active:hover {
  background-color: #4fb7fe !important;
}

.sidebar-left-hidden .dropdown_menu .sub-menu .active {
  background-color: #4fb7fe !important;
}

.sidebar-left-hidden .dropdown_menu .sub-menu li.active > a {
  background-color: #4fb7fe !important;
  color: #fff !important;
  padding-top: 10px  !important;
  padding-bottom: 10px !important;
}

.sidebar-left-hidden .dropdown_menu li.active > a:hover {
  background-color: #4fb7fe !important;
  border-left: 0 !important;
  padding: 10px 8px 10px 30px !important;
}

.sidebar-left-hidden .dropdown_menu .sub-menu li.active a:hover {
  box-shadow: 0 0 11px #ccc !important;
  padding-top: 10px  !important;
  padding-bottom: 10px !important;
}

.sidebar-left-hidden .sub-submenu li.active > a:hover {
  border-left: 0 !important;
}

.sidebar-left-hidden .dropdown_menu .collapse li.active > a {
  background-color: #45b7fe;
}

.sidebar-left-hidden .dropdown_menu .collapse li.active > a:hover {
  background-color: #4fb7fe;
}

.sidebar-left-hidden .dropdown_menu.active .collapse li.active > a:hover {
  background-color: #4fb7fe !important;
  border-left: 0;
  padding: 10px 8px 10px 30px !important;
}

.sidebar-left-hidden #menu .dropdown_menu > ul {
  max-height: 500px;
  overflow-y: auto;
}

/*======================= minimize menu hover end ===========================*/
/*================================== 2.4 Right menu Css =====================================*/
#top .navbar-static-top {
  z-index: 100;
}

#left #menu li > a > .fa {
  margin-right: 10px;
  width: 14px;
  height: 14px;
}

#request_list.rightsidebar-without-nav {
  padding-top: 0 !important;
  bottom: -52px;
}

#request_list {
  top: 0;
  width: 250px;
  position: fixed;
  right: -250px;
  background-color: #fff;
  /*transition: all 0.3s ease-in-out;*/
}

.right_menu_section #request_list {
  box-shadow: 0 1px 8px 0 #999;
  right: 0;
  z-index: 91;
}

#request_list .message-img {
  width: 30px;
  height: auto;
  margin: 7px 0 0 -7px;
}

#request_list .data {
  padding: 10px 0 3px 0;
  display: inline-block;
  width: 100%;
  cursor: pointer;
  font-size: 12px;
}

#request_list .chat_name {
  font-size: 14px;
}

/* .fixedMenu_left #left {
  padding-top: 52px;
} */

/* .fixedNav_top #left.fixed {
  padding-top: 52px !important;
} */

.fixedNav_position #request_list.rightsidebar-without-nav {
  padding-top: 52px !important;
}

.jspVerticalBar {
  width: 4px !important;
  background: none;
}

.sidebar-left-hidden #left .jspVerticalBar {
  width: 0 !important;
}

.jspTrack {
  background: transparent !important;
}

.jspDrag {
  background: #aaa !important;
}

.lcs_switch {
  margin-top: 5px;
  width: 60px;
  height: 24px;
}

.lcs_label {
  top: 4px;
}

.lcs_cursor {
  width: 17px;
  height: 17px;
}

.lcs_switch.lcs_on .lcs_cursor {
  left: 39px;
}

.lcs_switch.lcs_on .lcs_label_on {
  left: 5px;
}

.lcs_switch.lcs_off .lcs_label_off {
  right: 5px;
}

/*checkbox*/
#request_list .checkbox label input[type="checkbox"] {
  display: none;
}

#request_list .checkbox .cr {
  position: relative;
  display: inline-block;
  border: 1px solid #a9a9a9;
  border-radius: .25em;
  width: 1.3em;
  height: 1.3em;
  float: left;
  margin-right: .5em;
}

#request_list .checkbox label input[type="checkbox"] + .cr > .cr-icon {
  transform: scale(3) rotateZ(-20deg);
  opacity: 0;
  /*transition: all .3s ease-in;*/
}

#request_list .checkbox label input[type="checkbox"]:checked + .cr > .cr-icon {
  transform: scale(1) rotateZ(0deg);
  opacity: 1;
}

#request_list .checkbox .cr .cr-icon {
  position: absolute;
  font-size: .8em;
  line-height: 0;
  top: 50%;
  left: 17%;
}

#settings_section .checkbox {
  margin-top: 7px;
}

#request_list li {
  width: 49%;
}

#request_list li a {
  border: none;
  background-color: #fff;
}

#request_list .nav-tabs {
  border-bottom: 0;
}

#request_list li a:hover {
  color: #4fb7fe;
}

#request_list li a {
  border-bottom: 3px solid #ddd;
}

#request_list li a.active {
  border-bottom: 3px solid #4fb7fe;
  color: #4fb7fe !important;
  /*transition: 1s;*/
}

#request_list .jspPane .tab-content {
  padding-bottom: 20px;
}

.mCSB_scrollTools {
  width: 8px !important;
}

.mCSB_container {
  transition: 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;
}

/* ==================== End of right menu css ======================*/
/*======================= 3. header breadcrumb ===================================*/
.head {
  /* border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef; */
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  color: #747474;
  background-color: #f5f5f5;
}

.nav_top_align {
  color: #3D4556;
  line-height: 45px;
  font-weight: 600;
  font-size: 22px; /* Number 3 */
}

.nav_breadcrumb_top_align {
  margin: 7px 0 7px 0;
}

.breadcrumb-item.active {
  color: #EF6F6C;
}

.breadcrumb {
  padding: 0.5rem 0;
}

.breadcrumb li:nth-child(2) a {
  margin-left: -3px;
}

.head .main-bar {
  padding: 5px 20px;
  margin-top: 22px;
}

.head {
  margin-bottom: 10px;
}

.head .main-bar h3 {
  margin-top: 0;
  margin-bottom: 0;
  color: #bababa;
}

/*==================================== header breadcrumb end ===========================*/
/*============================ 4.Skin clors section css ======================*/
/*skins*/
#right {
  top: 130px;
  height: 250px;
  border: 2px solid #00cc99;
  border-right: 0;
  border-radius: 8px 0 0 8px;
  position: fixed;
  right: -250px;
  background-color: #fff;
}

.skin-icon {
  color: #fff;
  padding: 4px;
  border-radius: 15px;
  width: 30px;
  height: 30px;
  font-size: 22px !important;
}

.sidebar-right-opened #right {
  box-shadow: 8px 0 7px 1px #999;
  right: 0;
}

.no-print {
  z-index: 90;
}

.sidebar-right-opened .no-print {
  right: 250px !important;
}

.skinmulti_btn {
  width: 40px;
  height: 40px;
  display: inline-table;
  cursor: pointer;
  margin-bottom: 12px;
}

.skin_size {
  height: 20px;
  width: 40px;
}

.skin_btn {
  width: 40px;
  height: 40px;
  display: inline-table;
  cursor: pointer;
}

#right .default_skin {
  border: 1px solid #ccc;
  background-color: transparent;
  color: #525252;
}

#right .default_skin:active, #right .default_skin:hover {
  color: #282828;
  background-color: #e6e6e6 !important;
}

#right .btn.btn-dark:hover {
  color: #fff;
}

.skinmulti_btn, .skin_btn {
  margin-left: 15px;
}

.b_t_r {
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
}

.b_b_r {
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
}

.b_r {
  border-radius: 50px;
}

.skin_shaddow {
  box-shadow: 1px 4px 5px 2px #ccc;
}

.skinsingle_btn {
  margin-top: 10px;
}

/*for dark button*/
.btn-dark {
  background-color: #282828;
  border: 1px solid #282828;
  color: #fff;
}

/*for default button*/
.default_skin {
  margin-left: 10px;
}

.skin_blue {
  background-color: #539CC1;
}

.skin_green {
  background-color: #7F9E40;
}

.skin_purple {
  background-color: #E07298;
}

.skin_orange {
  background-color: #ffb25a;
}

.skin_red {
  background-color: #e74c4c;
}

.skin_mint {
  background-color: #69d3bf;
}

.mint_bg {
  background-color: #69d3bf;
}

/*skin clors section css end*/
/*============================ End of skin clors section css ======================*/
/*======================== 5. Common css ==========================*/
.text-white {
  color: #fff;
}

.text-mint {
  color: #0FB0C0;
}

.text-brown {
  color: #9C6426;
}

.bg-white {
  background-color: #fff;
}

.font_18 {
  font-size: 18px;
}

.section_border {
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.m-r-0 {
  margin: 0;
}

.m-r-5 {
  margin-right: 5px;
}

.m-r-20 {
  margin-right: 20px;
}

.m-t-5 {
  margin-top: 5px;
}

.m-t-10 {
  margin-top: 10px !important;
}

/*
.m-t-15 {
  margin-top: 15px;
}
*/

.m-t-15 {
  margin-top: 15px;
  margin-right: 22px;
}

.m-t-15a {
  display:inline-block;
  margin-top: 15px;
  margin-left: 570px;
}

.m-t-20 {
  margin-top: 20px;
}

.m-t-25 {
  margin-top: 25px;
}

.m-t-30 {
  margin-top: 30px;
}

.m-t-35 {
  margin-top: 35px;
}

.m-t-40 {
  margin-top: 40px;
}

.m-l-0 {
  margin-left: 0;
}

.m-l-10 {
  margin-left: 10px;
}

.m-l-20 {
  margin-left: 20px;
}

.m-r-15 {
  margin-right: 15px;
}

.m-b-0 {
  margin-bottom: 0;
}

.m-b-20 {
  margin-bottom: 20px;
}

.p-b-15 {
  padding-bottom: 15px;
}

.p-b-20 {
  padding-bottom: 20px;
}

.p-t-15 {
  padding-top: 15px;
}

.p-t-25 {
  padding-top: 25px;
}

.p-l-0 {
  padding-left: 0;
}

.p-r-0 {
  padding-right: 0;
}

.p-lr-0 {
  padding-left: 0;
  padding-right: 0;
}

.p-l-5 {
  padding-left: 5px;
}

.p-d-0 {
  padding: 0;
}

.p-d-15 {
  padding: 15px;
}

.p-l-10 {
  padding-left: 10px;
}

.b_r_20 {
  border-radius: 20px;
}

.pointer {
  cursor: pointer;
}

#content {
  /* transition: width 0.4s; */
  padding-bottom: 15px;
  min-height: 570px !important;
}

.outer {
  padding: 10px;
  margin-top: 25px;
}

.outer:before, .outer:after {
  content: " ";
  display: table;
}

.outer:after {
  clear: both;
}

.inner {
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
}

.inner hr {
  border-top-color: #ccc;
}

body.error {
  padding-top: 40px;
}

body.error .logo h1 {
  color: #FFFFFF;
  font-size: 100px;
  text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}

.skin_txt {
  color: #4f4d4d;
}

.user-media .media-body ul.user-info li {
  color: #ccc;
}

.text-black {
  color: black !important;
}

/* ===================End of common css ==================*/
/* ============================ 6.Users section ===================*/
.input_field_sections {
  margin-top: 35px;
  padding: 0 30px 0 15px;
}

.has-error label, .has-error span, .has-error small {
  color: #ff6666;
}

.users_grid_tools .tools a {
  background-color: #424242;
  border: 1px solid gray;
  padding: 8px;
}

.view_user_nav_padding {
  padding: 12px 0 2px 20px !important;
}

.view_user_nav_padding > li > a {
  color: #000;
}

.view_user_nav_padding > li > .active {
  padding-bottom: 10px;
  border-bottom: 4px solid #f3565d;
  position: relative;
}

.inner hr {
  margin-top: -6px;
}

.card_nav_hover > a:hover {
  padding-bottom: 10px;
  border-bottom: 4px solid red;
}

.card_nav_body_padding {
  padding: 15px;
}

a.list-group-item {
  color: #555;
  text-decoration: none;
}

#tryitForm .has-error label {
  color: #e74c3c;
}

#tryitForm .has-error small {
  font-size: 14px;
  padding: 0;
}

#tryitForm .help-block {
  padding-left: 15px;
}

.help-block {
  font-size: 14px !important;
}

.fileinput-new, .fileinput-preview img {
  width: 240px;
  height: 180px;
}

.img-thumbnail {
  background-color: #000 !important;
  padding: 0 !important;
  border: 0 !important;
  margin-right: 0.5em;
}

.custom-control-description {
  color: #5a5a5a !important;
}

.gender_message .custom-controls-stacked {
  overflow: auto;
}

.custom-control .custom-control-indicator {
  margin-top: -2px;
}

.gender_message .custom-radio .custom-control-indicator {
  margin-left: 3px;
}

#select2_sample_chosen {
  width: 100% !important;
}

.card_block_top_align {
  margin-top: 15px;
}

/* ==========================End of users section ==============================*/
/* izi toast*/
.iziToast > .iziToast-progressbar > div {
  background: red;
}

.iziToast {
  background-color: #f8f8f8;
}

/* end of izi toast */
.toggle_icon {
  color: #000;
  border: 1px solid #fff;
}

.margin15_bottom {
  margin-bottom: 15px;
}

#wrap:before, #top:before, .head:before, .Footer:before, #wrap:after, #top:after, .head:after, .Footer:after {
  content: " ";
  display: table;
}

#wrap:after, #top:after, .head:after, .Footer:after {
  clear: both;
}

.Wrap, #wrap {
  margin: 0 auto -20px auto;
  position: relative;
  background: #f5f5f5;
}

.xs_skin_hide {
  float: right;
  right: 4px;
  color: #525252;
  font-size: 14px;
  border: 1px solid black;
  padding: 3px 10px;
  border-radius: 5px;
}

.sidebar-left-opened #left {
  left: 0;
  height: auto;
}

.sidebar-right-opened {
  position: relative;
}

.sidebar-right-opened.fixed .navbar-fixed-top {
  right: 0;
}

.right_progressbar_section .progress {
  height: 0.7rem;
  margin-bottom: 20px;
}

.main-bar .breadcrumb > li + li:before {
  padding: 0 3px;
  font: normal normal normal 15px/1 FontAwesome;
}

.main-bar.row {
  margin: 0;
}

/* ========== Maps  ============= */
.noheader_logo {
  padding: 15px 0 0 15px;
}

.sidebar-right-opened .fixed_header_menu_conainer {
  margin-left: 0;
}

.form_div > div {
  padding: 10px;
}

.search_route_maps_buttons_margin {
  margin: 20px 0 0 37px;
}

.search_route_maps_buttons_margin a {
  padding: 5px 10px;
}

.maps_body {
  margin: 0;
}

#get_route, #back, #forward {
  margin: 10px 0;
}

.vector_maps {
  height: 400px;
}

.vector_maps .jqvmap-zoomin, .vector_maps .jqvmap-zoomout {
  background-color: #bd7bda;
  width: 15px;
  height: 15px;
}

.jqvmap-zoomin, .jqvmap-zoomout {
  padding: 2px;
}

.vector_maps {
  background-color: #fff !important;
}

/* ==================End of maps ========================*/
/* END CONTENT STYLES */
/*==================================7. Tables==========================*/
table.dataTable thead .sorting:before, table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:before, table.dataTable thead .sorting_desc_disabled:after {
  position: absolute;
  bottom: 0.9em;
  display: block;
  opacity: 0.3;
}

table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before {
  right: 1em;
  content: "\2191";
}

table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
  right: 0.5em;
  content: "\2193";
}

table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:after {
  opacity: 1;
}

/*================================== End of Tables==========================*/
/* ========================== tooltips ===============================*/
.tipso_style {
  cursor: pointer !important;
  border-bottom: none !important;
}

.tipso_bubble, .popover, .tooltip {
  z-index: 1000 !important;
}

/*==================================8. Fixed menu header css=========================*/
@media screen and (min-width: 767px) {
  .no_header #left {
    padding-top: 0 !important;
  }
  .no_header #content {
    margin-left: 250px;
  }
  .boxed.fixedNav_position #top {
    left: 5%;
    right: 5%;
  }
  .boxed.right_menu_section #request_list, .boxed .no-print, .boxed.sidebar-right-opened #right {
    right: 5% !important;
  }
  .boxed.sidebar-right-opened .no-print {
    margin-right: 250px;
  }
  .boxed.fixedMenu_left #left {
    left: 5%;
  }
}

#top.fixed {
  position: fixed;
  z-index: 1040;
  left: 0;
  right: 0;
}

@media screen and (min-width: 559px) and (max-width: 1025px) {
  .fixedNav_top {
    margin-top: 52px;
  }
}

@media screen and (max-width: 558px) {
  .fixedNav_top {
    margin-top: 95px;
  }
  .fixedNav_position #request_list.rightsidebar-without-nav {
    padding-top: 93px !important;
  }
  .fixedMenu_left.fixedNav_position .fixed.rightsidebar-without-nav {
    padding-top: 93px !important;
  }
}

@media screen and (max-width: 1025px) {
  #left.fixed {
    position: fixed;
    background: #4368D8;
    box-shadow: 0px 4px 17px rgba(0, 0, 0, 0.25);
  }
  .fixedMenu_left.fixedNav_position #left.rightsidebar-without-nav {
    padding-top: 53px !important;
  }
  .fixedMenu_left #left.fixed {
    padding-top: 0 !important;
  }
  .fixedMenu_left #left.rightsidebar-without-nav {
    top: 0;
  }
  .fixedNav_position .fixedNav_top {
    margin-top: 57px;
  }
}

@media screen and (max-width: 455px) {
  .fixedNav_position .fixedNav_top {
    margin-top: 100px;
  }
}

@media screen and (max-width: 375px) {
  .fixedNav_position .fixedNav_top {
    margin-top: 57px;
  }
}

@media screen and (max-width: 320px) {
  .fixedNav_position .fixedNav_top {
    margin-top: 100px;
  }
}

/*==================================end  Fixed menu header css=========================*/
/* =============================9. Media queries =========================*/
/*=========== Boxed =================*/
@media (min-width: 769px) and (max-width: 1025px) {
  .boxed .top_search_box {
    width: 150px;
  }
}

@media (max-width: 1025px) {
  .layout_styles {
    display: none;
  }
}

@media (min-width: 1025px) {
  /* =============================End of Boxed layout css =========================*/
  .head {
    margin-top: 10px;
  }
  #top.fixed {
    position: fixed;
    z-index: 1040;
    left: 0;
    right: 0;
    margin-left: 14.3em; /* Number 6 */
  }
  .small_device_search {
    display: none;
  }
  #left.fixed {
    width: 200px; /* Number 6 */
    position: fixed;
    z-index: 90;
    top: 0;
    left: 0;
    right: 0;
    background: #4368D8;
    box-shadow: 0px 4px 17px rgba(0, 0, 0, 0.25);
    /* padding-top: 52px; */
  }
  .fixedMenu_left #left .jspScrollable, .fixedMenu_left #left .jspContainer {
    overflow: visible !important;
    height: 100vh !important;
  }
  #left.fixed.rightsidebar-without-nav {
    padding-top: 0;
  }
  .fixedNav_top {
    margin-top: 52px;
  }
  .sidebar-left-hidden .fixedNav_top #content {
    margin-left: 70px;
  }
  .fixedNav_top #content, .fixedMenu_left #content {
    margin-left: 215px;
    margin-right: 16px;
  }
  .sidebar-left-hidden.fixedMenu_left #content {
    margin-left: 70px;
  }
  /*Bread crumb hide*/
  .breadcrumb_hide {
    display: none;
  }
}

@media (max-width: 546px) {
  .preloader_img {
    left: 46%;
    top: 47%;
  }
}

@media (max-width: 769px) {
  body.error .logo h1 {
    font-size: 60px;
  }
}

@media (min-width: 1025px) {
  #left {
    position: relative;
    float: left;
    left: auto;
    height: 100%;
  }
  .sidebar-left-hidden #left {
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }
  .sidebar-left-mini #left {
    width: 50px;
  }
  #content {
    /* transition: all 0.3s ease-in-out; */
    overflow: hidden;
  }
  .sidebar-right-opened {
    right: 0;
  }
  body.boxed {
    margin-bottom: 0;
  }
  body.boxed .Wrap, body.boxed #wrap, body.boxed .Footer, body.boxed #top .navbar.navbar-fixed-top {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    float: none;
  }
  body.boxed .Footer, body.boxed #footer {
    position: relative;
  }
  .sidebar-left-hidden #left {
    width: 70px !important;
    height: auto !important;
    visibility: visible !important;
    overflow: visible !important;
  }
  .sidebar-left-hidden #left .menu_hide {
    display: none;
  }
  .sidebar-left-hidden #left .fa {
    font-size: 18px;
    margin-left: 10px;
  }
  .sidebar-left-hidden #left .admin_img3 {
    width: 45px;
    height: 45px;
    margin: 17px 0 0 12px;
  }
  .sm_content {
    min-height: 960px !important;
  }
  /*==========================menu hover=============================*/
  body.sidebar-left-hidden #menu ul.collapse:not(.sub-submenu) {
    position: absolute;
    width: 250px !important;
    top: 0;
    right: -250px;
    z-index: 2;
    display: none;
    height: auto;
  }
  body.sidebar-left-hidden #menu li:not(.active):hover > a {
    background: #fff !important;
    border-left: 4px solid #4fb7fe !important;
    padding: 15px 8px 15px 11px !important;
    box-shadow: 0 0 11px #ccc !important;
  }
  body.sidebar-left-hidden #menu li:hover ul.collapse:not(.sub-submenu) {
    display: block;
    height: auto;
    z-index: 1000;
    background-color: #fff;
    border-left: 2px solid #ccc;
    box-shadow: 3px 0 12px -1px #525252;
  }
  .header_input_search {
    width: 100%;
    height: 30px;
    position: relative;
    padding: 0 35px 0 0;
    border: 1px solid #9bd6fe;
    border-radius: 25rem;
    background: #fff;
    overflow: hidden;
    transition: all .5s ease-in-out;
  }
  .header_input_search.closed input[type=text] {
    opacity: 0;
  }
  .font-icon-search:before {
    content: "\f002";
    color: #4fb7fe;
    font-size: 16px;
  }
  [class*=" font-icon-"]:before, [class^=font-icon-]:before, [data-icon]:before {
    font-family: FontAwesome !important;
  }
  .header_input_search {
    background-color: #e7f1ff;
  }
  .header_input_search input[type=text] {
    width: 100%;
    padding: 2px 0 0 14px;
    border: none;
    background: none;
    color: #343434;
    transition: all .5s ease-in-out;
  }
  .header_input_search input:focus, .header_input_search button:focus {
    outline: none;
  }
  .header_input_search button {
    display: block;
    position: absolute;
    right: 0;
    top: -2px;
    width: 35px;
    height: 100%;
    text-align: center;
    border: none !important;
    background: none !important;
  }
  .header_input_search .overlay {
    display: none;
  }
  .inner {
    float: left;
    width: 100%;
  }
  .head .search-bar .main-search {
    margin-right: auto;
  }
  .head .main-bar h3 {
    margin-top: 5px;
  }
  .search-bar {
    float: left;
    padding: 10px 4px;
  }
  .side-right .search-bar {
    float: right;
  }
  .search-bar .input-small.form-control {
    border-radius: 3px;
  }
  #top .topnav {
    margin: 4px 0;
  }
  .top_menu {
    margin-top: 1px;
    padding: 0 0 2px 45px;
  }
  .head .search-bar {
    border-bottom-width: 0;
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.05) inset;
  }
  .side-right .head .search-bar {
    border-right-width: 0;
    border-left: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.05) inset;
  }
  .search-bar {
    float: left;
    padding: 10px 4px;
  }
  .side-right .search-bar {
    float: right;
  }
  .search-bar .input-small.form-control {
    border-radius: 3px;
  }
  .main-bar {
    display: block;
    overflow: hidden;
  }
  .head .search-bar .main-search {
    margin-right: auto;
  }
  .head .main-bar h3 {
    margin-top: 5px;
  }
}

@media (max-width: 1240px) {
  .sidebar-right-opened #nav-content {
    width: 30%;
  }
  .sidebar-right-opened .quick_text {
    display: none;
  }
}

@media (min-width: 992px) {
  .search-bar {
    width: 250px;
    padding: 10px 15px;
  }
  .search-bar .input-group-btn {
    display: table-cell;
  }
  .search-bar .input-small.form-control {
    border-radius: 3px 0 0 3px;
  }
}

@media (max-width: 967px) {
  .advancnced_customized_fade {
    padding-top: 30px !important;
  }
}

@media (max-width: 768px) {
  .flip-scroll th {
    padding: 11px;
  }
  .small_device_search {
    border: none;
  }
}

@media (min-width: 768px) and (max-width: 1200px) {
  .fixed-header_menu {
    position: fixed !important;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    margin-top: 53px;
  }
}

@media (min-width: 767px) {
  .fixed_header_menu_conainer {
    margin-left: 250px;
  }
}

@media (min-width: 422px) {
  .xs_skin_hide {
    display: none;
  }
}

@media (min-width: 320px) and (max-width: 382px) {
  .pagination_padding_general_components > li > a {
    padding: 5px 7px !important;
  }
  .nav-inline .nav-link {
    padding: 6px 9px;
  }
}

@media (max-width: 991px) and (min-width: 768px) {
  .user-settings .dropdown-menu {
    top: 34px !important;
  }
}

@media (max-width: 553px) {
  .notifications .dropdown-menu {
    top: 34px !important;
  }
  .user-settings .dropdown-menu {
    top: 30px !important;
  }
}

@media (min-width: 992px) and (max-width: 1023px) {
  .top_menu {
    margin-top: 1px;
    padding: 0 0 2px 20px;
  }
}

@media (min-width: 1024px) {
  .top_menu {
    margin-top: 1px;
    padding: 0 0 2px 45px;
  }
}

@media (max-width: 504px) {
  .menu {
    float: right;
  }
}

/*boxed layouts*/
@media (max-width: 1200px) {
  .boxed_top_menu {
    padding: 0 0 2px 31px !important;
  }
}

@media (max-width: 1199px) {
  .media_max_1199 {
    margin-top: 35px;
  }
}

@media (max-width: 991px) {
  .media_max_991 {
    margin-top: 35px;
  }
}

@media (max-width: 573px) {
  .media_max_573 {
    margin-top: 35px;
  }
  .topnav.dropdown-menu-right {
    margin-left: auto;
  }
}

@media (max-width: 424px) {
  .vector_maps {
    height: 250px;
  }
}

/* ============================= End of media queries ===============================*/
#input_search {
  border: 1px solid #ddd;
  padding-bottom: 7px;
  padding-top: 3px;
}

.modal-header .btn-outline-primary:hover,
.modal-header .btn-outline-primary:focus {
  cursor: pointer;
  background: none;
  border: none;
}

.border-left-0 {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.btn-outline-warning:hover {
  color: #fff;
}

.btn-outline-danger:hover {
  color: #fff;
}

.btn-outline-warning:hover, .btn-outline-danger:hover {
  color: #fff !important;
}

.input-group-append .fa-search {
  color: #fff;
}
/* DL_Z CUSTOM CSS OF CALENDER  */
.card-header-add-btn{
  float: right;
}

.update-btn-myprofile{
  float: left;
}

.outer{
  margin-top: 0px;
  padding-top: 0px;
}

.menu_scroll #menu  .menu-section-heading{
  background-color: #646465;
}

.menu_scroll #menu  .menu-section-heading a span{
  color: white;
}

.menu_scroll #menu .menu-section-heading a:hover{
  background: #646465;
  border-left: none;
  box-shadow: none;
  padding-bottom: 15px;
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
}

.comment-row-display{
  border-bottom: unset !important;
}

.comment-row-display td{
  background: #eaeaea;
}

.comment-row {
  cursor: pointer;
}

.fee-buttons {
  display: flex;
  border:none !important;
}

.display-flex
{
  display: flex;
  justify-content: center;
  align-items: center;
}

.clickable-table-row {
  cursor:pointer;
}



/*.content{*/
  /*min-height: 600px;*/
  /*max-height: 700px;*/
/*}*/
/* DL_Z CUSTOM CSS OF CALENDER  */

/*!
 * # Semantic UI 2.4.1 - Button
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */


/*******************************
            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;
  -webkit-box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
          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, background 0.1s ease, -webkit-box-shadow 0.1s ease;*/
  /*transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, background 0.1s ease, -webkit-box-shadow 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;*/
  /*transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease, -webkit-box-shadow 0.1s ease;*/
  will-change: '';
  -webkit-tap-highlight-color: transparent;
}


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


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

.ui.button:hover {
  background-color: #CACBCD;
  background-image: none;
  -webkit-box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
          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 .icon {
  opacity: 0.85;
}

/*--------------
      Focus
---------------*/

.ui.button:focus {
  background-color: #CACBCD;
  color: rgba(0, 0, 0, 0.8);
  background-image: '' !important;
  -webkit-box-shadow: '' !important;
          box-shadow: '' !important;
}
.ui.button:focus .icon {
  opacity: 0.85;
}

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

/* .ui.button:active,
.ui.active.button:active {
  background: #4368D8 !important;
  background-image: '';
  color: white;
  -webkit-box-shadow: 0px 0px 0px 1px transparent inset, none;
          box-shadow: 0px 0px 0px 1px transparent inset, none;
} */

.ui.active.button a {
  color: white;
}

.ui.button:active a {
  color: white;
}

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

.ui.active.button {
  background: #4368D8 !important;
  background-image: none;
  -webkit-box-shadow: 0px 0px 0px 1px transparent inset;
          box-shadow: 0px 0px 0px 1px transparent inset;
  color: white
}
.ui.active.button:hover {
  background-color: rgb(59, 91, 187);
  background-image: none;
  color: white;
}
.ui.active.button:active {
  background-color: #4368D8 !important;
  background-image: none;
}

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


/* Specificity hack */
.ui.loading.loading.loading.loading.loading.loading.button {
  position: relative;
  cursor: default;
  text-shadow: none !important;
  color: transparent !important;
  opacity: 1;
  pointer-events: auto;
  /*-webkit-transition: all 0s linear, opacity 0.1s ease;*/
  /*transition: all 0s linear, opacity 0.1s ease;*/
}
.ui.loading.button:before {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  margin: -0.64285714em 0em 0em -0.64285714em;
  width: 1.28571429em;
  height: 1.28571429em;
  border-radius: 500rem;
  border: 0.2em solid rgba(0, 0, 0, 0.15);
}
.ui.loading.button:after {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  margin: -0.64285714em 0em 0em -0.64285714em;
  width: 1.28571429em;
  height: 1.28571429em;
  -webkit-animation: button-spin 0.6s linear;
          animation: button-spin 0.6s linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  border-radius: 500rem;
  border-color: #FFFFFF transparent transparent;
  border-style: solid;
  border-width: 0.2em;
  -webkit-box-shadow: 0px 0px 0px 1px transparent;
          box-shadow: 0px 0px 0px 1px transparent;
}
.ui.labeled.icon.loading.button .icon {
  background-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
}
@-webkit-keyframes button-spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes button-spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.ui.basic.loading.button:not(.inverted):before {
  border-color: rgba(0, 0, 0, 0.1);
}
.ui.basic.loading.button:not(.inverted):after {
  border-top-color: #767676;
}

/*-------------------
      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;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  pointer-events: none !important;
}

/* Basic Group With Disabled */
.ui.basic.buttons .ui.disabled.button {
  border-color: rgba(34, 36, 38, 0.5);
}


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


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

.ui.animated.button {
  position: relative;
  overflow: hidden;
  padding-right: 0em !important;
  vertical-align: middle;
  z-index: 1;
}
.ui.animated.button .content {
  will-change: transform, opacity;
}
.ui.animated.button .visible.content {
  position: relative;
  margin-right: 1.5em;
}
.ui.animated.button .hidden.content {
  position: absolute;
  width: 100%;
}

/* Horizontal */
.ui.animated.button .visible.content,
/*.ui.animated.button .hidden.content {
  -webkit-transition: right 0.3s ease 0s;
  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.5em;
}
.ui.animated.button:focus .visible.content,
.ui.animated.button:hover .visible.content {
  left: auto;
  right: 200%;
}
.ui.animated.button:focus .hidden.content,
.ui.animated.button:hover .hidden.content {
  left: auto;
  right: 0%;
}

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

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

/*-------------------
       Inverted
--------------------*/

.ui.inverted.button {
  -webkit-box-shadow: 0px 0px 0px 2px #FFFFFF inset !important;
          box-shadow: 0px 0px 0px 2px #FFFFFF inset !important;
  background: transparent none;
  color: #FFFFFF;
  text-shadow: none !important;
}

/* Group */
.ui.inverted.buttons .button {
  margin: 0px 0px 0px -2px;
}
.ui.inverted.buttons .button:first-child {
  margin-left: 0em;
}
.ui.inverted.vertical.buttons .button {
  margin: 0px 0px -2px 0px;
}
.ui.inverted.vertical.buttons .button:first-child {
  margin-top: 0em;
}

/* States */

/* Hover */
.ui.inverted.button:hover {
  background: #FFFFFF;
  -webkit-box-shadow: 0px 0px 0px 2px #FFFFFF inset !important;
          box-shadow: 0px 0px 0px 2px #FFFFFF inset !important;
  color: rgba(0, 0, 0, 0.8);
}

/* Active / Focus */
.ui.inverted.button:focus,
.ui.inverted.button.active {
  background: #FFFFFF;
  -webkit-box-shadow: 0px 0px 0px 2px #FFFFFF inset !important;
          box-shadow: 0px 0px 0px 2px #FFFFFF inset !important;
  color: rgba(0, 0, 0, 0.8);
}

/* Active Focus */
.ui.inverted.button.active:focus {
  background: #DCDDDE;
  -webkit-box-shadow: 0px 0px 0px 2px #DCDDDE inset !important;
          box-shadow: 0px 0px 0px 2px #DCDDDE inset !important;
  color: rgba(0, 0, 0, 0.8);
}

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

.ui.labeled.button:not(.icon) {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  background: none !important;
  padding: 0px !important;
  border: none !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.ui.labeled.button > .button {
  margin: 0px;
}
.ui.labeled.button > .label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: 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
--------------------*/


/* Facebook */
.ui.facebook.button {
  background-color: #3B5998;
  color: #FFFFFF;
  text-shadow: none;
  background-image: none;
  -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
          box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
}
.ui.facebook.button:hover {
  background-color: #304d8a;
  color: #FFFFFF;
  text-shadow: none;
}
.ui.facebook.button:active {
  background-color: #2d4373;
  color: #FFFFFF;
  text-shadow: none;
}

/* Twitter */
.ui.twitter.button {
  background-color: #55ACEE;
  color: #FFFFFF;
  text-shadow: none;
  background-image: none;
  -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
          box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
}
.ui.twitter.button:hover {
  background-color: #35a2f4;
  color: #FFFFFF;
  text-shadow: none;
}
.ui.twitter.button:active {
  background-color: #2795e9;
  color: #FFFFFF;
  text-shadow: none;
}

/* Google Plus */
.ui.google.plus.button {
  background-color: #DD4B39;
  color: #FFFFFF;
  text-shadow: none;
  background-image: none;
  -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
          box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
}
.ui.google.plus.button:hover {
  background-color: #e0321c;
  color: #FFFFFF;
  text-shadow: none;
}
.ui.google.plus.button:active {
  background-color: #c23321;
  color: #FFFFFF;
  text-shadow: none;
}

/* Linked In */
.ui.linkedin.button {
  background-color: #1F88BE;
  color: #FFFFFF;
  text-shadow: none;
}
.ui.linkedin.button:hover {
  background-color: #147baf;
  color: #FFFFFF;
  text-shadow: none;
}
.ui.linkedin.button:active {
  background-color: #186992;
  color: #FFFFFF;
  text-shadow: none;
}

/* YouTube */
.ui.youtube.button {
  background-color: #FF0000;
  color: #FFFFFF;
  text-shadow: none;
  background-image: none;
  -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
          box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
}
.ui.youtube.button:hover {
  background-color: #e60000;
  color: #FFFFFF;
  text-shadow: none;
}
.ui.youtube.button:active {
  background-color: #cc0000;
  color: #FFFFFF;
  text-shadow: none;
}

/* Instagram */
.ui.instagram.button {
  background-color: #49769C;
  color: #FFFFFF;
  text-shadow: none;
  background-image: none;
  -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
          box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
}
.ui.instagram.button:hover {
  background-color: #3d698e;
  color: #FFFFFF;
  text-shadow: none;
}
.ui.instagram.button:active {
  background-color: #395c79;
  color: #FFFFFF;
  text-shadow: none;
}

/* Pinterest */
.ui.pinterest.button {
  background-color: #BD081C;
  color: #FFFFFF;
  text-shadow: none;
  background-image: none;
  -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
          box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
}
.ui.pinterest.button:hover {
  background-color: #ac0013;
  color: #FFFFFF;
  text-shadow: none;
}
.ui.pinterest.button:active {
  background-color: #8c0615;
  color: #FFFFFF;
  text-shadow: none;
}

/* VK */
.ui.vk.button {
  background-color: #4D7198;
  color: #FFFFFF;
  background-image: none;
  -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
          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
---------------*/

.ui.button > .icon: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(.icon) > .icon:not(.button):not(.dropdown) {
  margin: 0em 0.42857143em 0em -0.21428571em;
}
.ui.button:not(.icon) > .right.icon: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.icon.buttons .button,
.ui.compact.icon.button {
  padding: 0.58928571em 0.58928571em 0.58928571em;
}
.ui.compact.labeled.icon.buttons .button,
.ui.compact.labeled.icon.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.icon.buttons .button,
.ui.icon.button {
  padding: 0.78571429em 0.78571429em 0.78571429em;
}
.ui.icon.buttons .button > .icon,
.ui.icon.button > .icon {
  opacity: 0.9;
  margin: 0em !important;
  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;
  -webkit-box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
          box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
}
.ui.basic.buttons {
  -webkit-box-shadow: none;
          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;
  -webkit-box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset;
          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;
  -webkit-box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset;
          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;
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 4px 0px rgba(34, 36, 38, 0.15) inset;
          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;
  -webkit-box-shadow: '' !important;
          box-shadow: '' !important;
  color: rgba(0, 0, 0, 0.95) !important;
}
.ui.basic.buttons .active.button:hover,
.ui.basic.active.button:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Vertical */
.ui.basic.buttons .button:hover {
  -webkit-box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset inset;
          box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.35) inset, 0px 0px 0px 0px rgba(34, 36, 38, 0.15) inset inset;
}
.ui.basic.buttons .button:active {
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 4px 0px rgba(34, 36, 38, 0.15) inset inset;
          box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.15) inset, 0px 1px 4px 0px rgba(34, 36, 38, 0.15) inset inset;
}
.ui.basic.buttons .active.button {
  -webkit-box-shadow: '' !important;
          box-shadow: '' !important;
}

/* Standard Basic Inverted */
.ui.basic.inverted.buttons .button,
.ui.basic.inverted.button {
  background-color: transparent !important;
  color: #F9FAFB !important;
  -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
          box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
}
.ui.basic.inverted.buttons .button:hover,
.ui.basic.inverted.button:hover {
  color: #FFFFFF !important;
  -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
          box-shadow: 0px 0px 0px 2px #ffffff inset !important;
}
.ui.basic.inverted.buttons .button:focus,
.ui.basic.inverted.button:focus {
  color: #FFFFFF !important;
  -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
          box-shadow: 0px 0px 0px 2px #ffffff inset !important;
}
.ui.basic.inverted.buttons .button:active,
.ui.basic.inverted.button:active {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
  -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.9) inset !important;
          box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.9) inset !important;
}
.ui.basic.inverted.buttons .active.button,
.ui.basic.inverted.active.button {
  background-color: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  text-shadow: none;
  -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.7) inset;
          box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.7) inset;
}
.ui.basic.inverted.buttons .active.button:hover,
.ui.basic.inverted.active.button:hover {
  background-color: rgba(255, 255, 255, 0.15);
  -webkit-box-shadow: 0px 0px 0px 2px #ffffff inset !important;
          box-shadow: 0px 0px 0px 2px #ffffff inset !important;
}

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

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

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

/* Left Labeled */
.ui.labeled.icon.buttons > .button > .icon,
.ui.labeled.icon.button > .icon {
  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: '';
  -webkit-box-shadow: -1px 0px 0px 0px transparent inset;
          box-shadow: -1px 0px 0px 0px transparent inset;
}

/* Left Labeled */
.ui.labeled.icon.buttons > .button > .icon,
.ui.labeled.icon.button > .icon {
  top: 0em;
  left: 0em;
}

/* Right Labeled */
.ui[class*="right labeled"].icon.button {
  padding-right: 4.07142857em !important;
  padding-left: 1.5em !important;
}
.ui[class*="right labeled"].icon.button > .icon {
  left: auto;
  right: 0em;
  border-radius: 0px;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  -webkit-box-shadow: 1px 0px 0px 0px transparent inset;
          box-shadow: 1px 0px 0px 0px transparent inset;
}
.ui.labeled.icon.buttons > .button > .icon:before,
.ui.labeled.icon.button > .icon:before,
.ui.labeled.icon.buttons > .button > .icon:after,
.ui.labeled.icon.button > .icon:after {
  display: block;
  position: absolute;
  width: 100%;
  top: 50%;
  text-align: center;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.ui.labeled.icon.buttons .button > .icon {
  border-radius: 0em;
}
.ui.labeled.icon.buttons .button:first-child > .icon {
  border-top-left-radius: 0.28571429rem;
  border-bottom-left-radius: 0.28571429rem;
}
.ui.labeled.icon.buttons .button:last-child > .icon {
  border-top-right-radius: 0.28571429rem;
  border-bottom-right-radius: 0.28571429rem;
}
.ui.vertical.labeled.icon.buttons .button:first-child > .icon {
  border-radius: 0em;
  border-top-left-radius: 0.28571429rem;
}
.ui.vertical.labeled.icon.buttons .button:last-child > .icon {
  border-radius: 0em;
  border-bottom-left-radius: 0.28571429rem;
}

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

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


/* Toggle (Modifies active state to give affordances) */
.ui.toggle.buttons .active.button,
.ui.buttons .button.toggle.active,
.ui.button.toggle.active {
  background-color: #21BA45 !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  text-shadow: none;
  color: #FFFFFF !important;
}
.ui.button.toggle.active:hover {
  background-color: #16ab39 !important;
  text-shadow: none;
  color: #FFFFFF !important;
}

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

.ui.circular.button {
  border-radius: 10em;
}
.ui.circular.button > .icon {
  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;
  -webkit-box-shadow: 0px 0px 0px 1px transparent inset;
          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
--------------------*/


/* Singular */
.ui.attached.button {
  position: relative;
  display: block;
  margin: 0em;
  border-radius: 0em;
  -webkit-box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) !important;
          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: -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: -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: -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.5%;
}
.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%;
}

/* Fluid Vertical Buttons */
.ui.fluid.vertical.buttons,
.ui.fluid.vertical.buttons > .button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: auto;
}
.ui.two.vertical.buttons > .button {
  height: 50%;
}
.ui.three.vertical.buttons > .button {
  height: 33.333%;
}
.ui.four.vertical.buttons > .button {
  height: 25%;
}
.ui.five.vertical.buttons > .button {
  height: 20%;
}
.ui.six.vertical.buttons > .button {
  height: 16.666%;
}
.ui.seven.vertical.buttons > .button {
  height: 14.285%;
}
.ui.eight.vertical.buttons > .button {
  height: 12.5%;
}
.ui.nine.vertical.buttons > .button {
  height: 11.11%;
}
.ui.ten.vertical.buttons > .button {
  height: 10%;
}
.ui.eleven.vertical.buttons > .button {
  height: 9.09%;
}
.ui.twelve.vertical.buttons > .button {
  height: 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 {
  -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
          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 {
  -webkit-box-shadow: 0px 0px 0px 1px #1B1C1D inset !important;
          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;
  -webkit-box-shadow: 0px 0px 0px 1px #27292a inset !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;
  -webkit-box-shadow: 0px 0px 0px 1px #2f3032 inset !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;
  -webkit-box-shadow: 0px 0px 0px 1px #0f0f10 inset !important;
          box-shadow: 0px 0px 0px 1px #0f0f10 inset !important;
  color: #343637 !important;
}
.ui.basic.black.buttons .button:active,
.ui.basic.black.button:active {
  -webkit-box-shadow: 0px 0px 0px 1px #343637 inset !important;
          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;
}

/* Inverted */
.ui.inverted.black.buttons .button,
.ui.inverted.black.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px #D4D4D5 inset !important;
          box-shadow: 0px 0px 0px 2px #D4D4D5 inset !important;
  color: #FFFFFF;
}
.ui.inverted.black.buttons .button:hover,
.ui.inverted.black.button:hover,
.ui.inverted.black.buttons .button:focus,
.ui.inverted.black.button:focus,
.ui.inverted.black.buttons .button.active,
.ui.inverted.black.button.active,
.ui.inverted.black.buttons .button:active,
.ui.inverted.black.button:active {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  color: #FFFFFF;
}
.ui.inverted.black.buttons .button:hover,
.ui.inverted.black.button:hover {
  background-color: #000000;
}
.ui.inverted.black.buttons .button:focus,
.ui.inverted.black.button:focus {
  background-color: #000000;
}
.ui.inverted.black.buttons .active.button,
.ui.inverted.black.active.button {
  background-color: #000000;
}
.ui.inverted.black.buttons .button:active,
.ui.inverted.black.button:active {
  background-color: #000000;
}

/* Inverted Basic */
.ui.inverted.black.basic.buttons .button,
.ui.inverted.black.buttons .basic.button,
.ui.inverted.black.basic.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
          box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  color: #FFFFFF !important;
}
.ui.inverted.black.basic.buttons .button:hover,
.ui.inverted.black.buttons .basic.button:hover,
.ui.inverted.black.basic.button:hover {
  -webkit-box-shadow: 0px 0px 0px 2px #000000 inset !important;
          box-shadow: 0px 0px 0px 2px #000000 inset !important;
  color: #FFFFFF !important;
}
.ui.inverted.black.basic.buttons .button:focus,
.ui.inverted.black.basic.buttons .button:focus,
.ui.inverted.black.basic.button:focus {
  -webkit-box-shadow: 0px 0px 0px 2px #000000 inset !important;
          box-shadow: 0px 0px 0px 2px #000000 inset !important;
  color: #545454 !important;
}
.ui.inverted.black.basic.buttons .active.button,
.ui.inverted.black.buttons .basic.active.button,
.ui.inverted.black.basic.active.button {
  -webkit-box-shadow: 0px 0px 0px 2px #000000 inset !important;
          box-shadow: 0px 0px 0px 2px #000000 inset !important;
  color: #FFFFFF !important;
}
.ui.inverted.black.basic.buttons .button:active,
.ui.inverted.black.buttons .basic.button:active,
.ui.inverted.black.basic.button:active {
  -webkit-box-shadow: 0px 0px 0px 2px #000000 inset !important;
          box-shadow: 0px 0px 0px 2px #000000 inset !important;
  color: #FFFFFF !important;
}

/*--- Grey ---*/

.ui.grey.buttons .button,
.ui.grey.button {
  background-color: #767676;
  color: #FFFFFF;
  text-shadow: none;
  background-image: none;
}
.ui.grey.button {
  -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
          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 {
  -webkit-box-shadow: 0px 0px 0px 1px #767676 inset !important;
          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;
  -webkit-box-shadow: 0px 0px 0px 1px #838383 inset !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;
  -webkit-box-shadow: 0px 0px 0px 1px #8a8a8a inset !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;
  -webkit-box-shadow: 0px 0px 0px 1px #696969 inset !important;
          box-shadow: 0px 0px 0px 1px #696969 inset !important;
  color: #909090 !important;
}
.ui.basic.grey.buttons .button:active,
.ui.basic.grey.button:active {
  -webkit-box-shadow: 0px 0px 0px 1px #909090 inset !important;
          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;
}

/* Inverted */
.ui.inverted.grey.buttons .button,
.ui.inverted.grey.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px #D4D4D5 inset !important;
          box-shadow: 0px 0px 0px 2px #D4D4D5 inset !important;
  color: #FFFFFF;
}
.ui.inverted.grey.buttons .button:hover,
.ui.inverted.grey.button:hover,
.ui.inverted.grey.buttons .button:focus,
.ui.inverted.grey.button:focus,
.ui.inverted.grey.buttons .button.active,
.ui.inverted.grey.button.active,
.ui.inverted.grey.buttons .button:active,
.ui.inverted.grey.button:active {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  color: rgba(0, 0, 0, 0.6);
}
.ui.inverted.grey.buttons .button:hover,
.ui.inverted.grey.button:hover {
  background-color: #cfd0d2;
}
.ui.inverted.grey.buttons .button:focus,
.ui.inverted.grey.button:focus {
  background-color: #c7c9cb;
}
.ui.inverted.grey.buttons .active.button,
.ui.inverted.grey.active.button {
  background-color: #cfd0d2;
}
.ui.inverted.grey.buttons .button:active,
.ui.inverted.grey.button:active {
  background-color: #c2c4c5;
}

/* Inverted Basic */
.ui.inverted.grey.basic.buttons .button,
.ui.inverted.grey.buttons .basic.button,
.ui.inverted.grey.basic.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
          box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  color: #FFFFFF !important;
}
.ui.inverted.grey.basic.buttons .button:hover,
.ui.inverted.grey.buttons .basic.button:hover,
.ui.inverted.grey.basic.button:hover {
  -webkit-box-shadow: 0px 0px 0px 2px #cfd0d2 inset !important;
          box-shadow: 0px 0px 0px 2px #cfd0d2 inset !important;
  color: #FFFFFF !important;
}
.ui.inverted.grey.basic.buttons .button:focus,
.ui.inverted.grey.basic.buttons .button:focus,
.ui.inverted.grey.basic.button:focus {
  -webkit-box-shadow: 0px 0px 0px 2px #c7c9cb inset !important;
          box-shadow: 0px 0px 0px 2px #c7c9cb inset !important;
  color: #DCDDDE !important;
}
.ui.inverted.grey.basic.buttons .active.button,
.ui.inverted.grey.buttons .basic.active.button,
.ui.inverted.grey.basic.active.button {
  -webkit-box-shadow: 0px 0px 0px 2px #cfd0d2 inset !important;
          box-shadow: 0px 0px 0px 2px #cfd0d2 inset !important;
  color: #FFFFFF !important;
}
.ui.inverted.grey.basic.buttons .button:active,
.ui.inverted.grey.buttons .basic.button:active,
.ui.inverted.grey.basic.button:active {
  -webkit-box-shadow: 0px 0px 0px 2px #c2c4c5 inset !important;
          box-shadow: 0px 0px 0px 2px #c2c4c5 inset !important;
  color: #FFFFFF !important;
}

/*--- Brown ---*/

.ui.brown.buttons .button,
.ui.brown.button {
  background-color: #A5673F;
  color: #FFFFFF;
  text-shadow: none;
  background-image: none;
}
.ui.brown.button {
  -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
          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 {
  -webkit-box-shadow: 0px 0px 0px 1px #A5673F inset !important;
          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;
  -webkit-box-shadow: 0px 0px 0px 1px #975b33 inset !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;
  -webkit-box-shadow: 0px 0px 0px 1px #90532b inset !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;
  -webkit-box-shadow: 0px 0px 0px 1px #995a31 inset !important;
          box-shadow: 0px 0px 0px 1px #995a31 inset !important;
  color: #805031 !important;
}
.ui.basic.brown.buttons .button:active,
.ui.basic.brown.button:active {
  -webkit-box-shadow: 0px 0px 0px 1px #805031 inset !important;
          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;
}

/* Inverted */
.ui.inverted.brown.buttons .button,
.ui.inverted.brown.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px #D67C1C inset !important;
          box-shadow: 0px 0px 0px 2px #D67C1C inset !important;
  color: #D67C1C;
}
.ui.inverted.brown.buttons .button:hover,
.ui.inverted.brown.button:hover,
.ui.inverted.brown.buttons .button:focus,
.ui.inverted.brown.button:focus,
.ui.inverted.brown.buttons .button.active,
.ui.inverted.brown.button.active,
.ui.inverted.brown.buttons .button:active,
.ui.inverted.brown.button:active {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  color: #FFFFFF;
}
.ui.inverted.brown.buttons .button:hover,
.ui.inverted.brown.button:hover {
  background-color: #c86f11;
}
.ui.inverted.brown.buttons .button:focus,
.ui.inverted.brown.button:focus {
  background-color: #c16808;
}
.ui.inverted.brown.buttons .active.button,
.ui.inverted.brown.active.button {
  background-color: #cc6f0d;
}
.ui.inverted.brown.buttons .button:active,
.ui.inverted.brown.button:active {
  background-color: #a96216;
}

/* Inverted Basic */
.ui.inverted.brown.basic.buttons .button,
.ui.inverted.brown.buttons .basic.button,
.ui.inverted.brown.basic.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
          box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  color: #FFFFFF !important;
}
.ui.inverted.brown.basic.buttons .button:hover,
.ui.inverted.brown.buttons .basic.button:hover,
.ui.inverted.brown.basic.button:hover {
  -webkit-box-shadow: 0px 0px 0px 2px #c86f11 inset !important;
          box-shadow: 0px 0px 0px 2px #c86f11 inset !important;
  color: #D67C1C !important;
}
.ui.inverted.brown.basic.buttons .button:focus,
.ui.inverted.brown.basic.buttons .button:focus,
.ui.inverted.brown.basic.button:focus {
  -webkit-box-shadow: 0px 0px 0px 2px #c16808 inset !important;
          box-shadow: 0px 0px 0px 2px #c16808 inset !important;
  color: #D67C1C !important;
}
.ui.inverted.brown.basic.buttons .active.button,
.ui.inverted.brown.buttons .basic.active.button,
.ui.inverted.brown.basic.active.button {
  -webkit-box-shadow: 0px 0px 0px 2px #cc6f0d inset !important;
          box-shadow: 0px 0px 0px 2px #cc6f0d inset !important;
  color: #D67C1C !important;
}
.ui.inverted.brown.basic.buttons .button:active,
.ui.inverted.brown.buttons .basic.button:active,
.ui.inverted.brown.basic.button:active {
  -webkit-box-shadow: 0px 0px 0px 2px #a96216 inset !important;
          box-shadow: 0px 0px 0px 2px #a96216 inset !important;
  color: #D67C1C !important;
}

/*--- Blue ---*/

.ui.blue.buttons .button,
.ui.blue.button {
  background-color: #2185D0;
  color: #FFFFFF;
  text-shadow: none;
  background-image: none;
}
.ui.blue.button {
  -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
          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 {
  -webkit-box-shadow: 0px 0px 0px 1px #2185D0 inset !important;
          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;
  -webkit-box-shadow: 0px 0px 0px 1px #1678c2 inset !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;
  -webkit-box-shadow: 0px 0px 0px 1px #0d71bb inset !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;
  -webkit-box-shadow: 0px 0px 0px 1px #1279c6 inset !important;
          box-shadow: 0px 0px 0px 1px #1279c6 inset !important;
  color: #1a69a4 !important;
}
.ui.basic.blue.buttons .button:active,
.ui.basic.blue.button:active {
  -webkit-box-shadow: 0px 0px 0px 1px #1a69a4 inset !important;
          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;
}

/* Inverted */
.ui.inverted.blue.buttons .button,
.ui.inverted.blue.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px #54C8FF inset !important;
          box-shadow: 0px 0px 0px 2px #54C8FF inset !important;
  color: #54C8FF;
}
.ui.inverted.blue.buttons .button:hover,
.ui.inverted.blue.button:hover,
.ui.inverted.blue.buttons .button:focus,
.ui.inverted.blue.button:focus,
.ui.inverted.blue.buttons .button.active,
.ui.inverted.blue.button.active,
.ui.inverted.blue.buttons .button:active,
.ui.inverted.blue.button:active {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  color: #FFFFFF;
}
.ui.inverted.blue.buttons .button:hover,
.ui.inverted.blue.button:hover {
  background-color: #3ac0ff;
}
.ui.inverted.blue.buttons .button:focus,
.ui.inverted.blue.button:focus {
  background-color: #2bbbff;
}
.ui.inverted.blue.buttons .active.button,
.ui.inverted.blue.active.button {
  background-color: #3ac0ff;
}
.ui.inverted.blue.buttons .button:active,
.ui.inverted.blue.button:active {
  background-color: #21b8ff;
}

/* Inverted Basic */
.ui.inverted.blue.basic.buttons .button,
.ui.inverted.blue.buttons .basic.button,
.ui.inverted.blue.basic.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
          box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  color: #FFFFFF !important;
}
.ui.inverted.blue.basic.buttons .button:hover,
.ui.inverted.blue.buttons .basic.button:hover,
.ui.inverted.blue.basic.button:hover {
  -webkit-box-shadow: 0px 0px 0px 2px #3ac0ff inset !important;
          box-shadow: 0px 0px 0px 2px #3ac0ff inset !important;
  color: #54C8FF !important;
}
.ui.inverted.blue.basic.buttons .button:focus,
.ui.inverted.blue.basic.buttons .button:focus,
.ui.inverted.blue.basic.button:focus {
  -webkit-box-shadow: 0px 0px 0px 2px #2bbbff inset !important;
          box-shadow: 0px 0px 0px 2px #2bbbff inset !important;
  color: #54C8FF !important;
}
.ui.inverted.blue.basic.buttons .active.button,
.ui.inverted.blue.buttons .basic.active.button,
.ui.inverted.blue.basic.active.button {
  -webkit-box-shadow: 0px 0px 0px 2px #3ac0ff inset !important;
          box-shadow: 0px 0px 0px 2px #3ac0ff inset !important;
  color: #54C8FF !important;
}
.ui.inverted.blue.basic.buttons .button:active,
.ui.inverted.blue.buttons .basic.button:active,
.ui.inverted.blue.basic.button:active {
  -webkit-box-shadow: 0px 0px 0px 2px #21b8ff inset !important;
          box-shadow: 0px 0px 0px 2px #21b8ff inset !important;
  color: #54C8FF !important;
}

/*--- Green ---*/

.ui.green.buttons .button,
.ui.green.button {
  background-color: #21BA45;
  color: #FFFFFF;
  text-shadow: none;
  background-image: none;
}
.ui.green.button {
  -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
          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 {
  -webkit-box-shadow: 0px 0px 0px 1px #21BA45 inset !important;
          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;
  -webkit-box-shadow: 0px 0px 0px 1px #16ab39 inset !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;
  -webkit-box-shadow: 0px 0px 0px 1px #0ea432 inset !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;
  -webkit-box-shadow: 0px 0px 0px 1px #13ae38 inset !important;
          box-shadow: 0px 0px 0px 1px #13ae38 inset !important;
  color: #198f35 !important;
}
.ui.basic.green.buttons .button:active,
.ui.basic.green.button:active {
  -webkit-box-shadow: 0px 0px 0px 1px #198f35 inset !important;
          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;
}

/* Inverted */
.ui.inverted.green.buttons .button,
.ui.inverted.green.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px #2ECC40 inset !important;
          box-shadow: 0px 0px 0px 2px #2ECC40 inset !important;
  color: #2ECC40;
}
.ui.inverted.green.buttons .button:hover,
.ui.inverted.green.button:hover,
.ui.inverted.green.buttons .button:focus,
.ui.inverted.green.button:focus,
.ui.inverted.green.buttons .button.active,
.ui.inverted.green.button.active,
.ui.inverted.green.buttons .button:active,
.ui.inverted.green.button:active {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  color: #FFFFFF;
}
.ui.inverted.green.buttons .button:hover,
.ui.inverted.green.button:hover {
  background-color: #22be34;
}
.ui.inverted.green.buttons .button:focus,
.ui.inverted.green.button:focus {
  background-color: #19b82b;
}
.ui.inverted.green.buttons .active.button,
.ui.inverted.green.active.button {
  background-color: #1fc231;
}
.ui.inverted.green.buttons .button:active,
.ui.inverted.green.button:active {
  background-color: #25a233;
}

/* Inverted Basic */
.ui.inverted.green.basic.buttons .button,
.ui.inverted.green.buttons .basic.button,
.ui.inverted.green.basic.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
          box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  color: #FFFFFF !important;
}
.ui.inverted.green.basic.buttons .button:hover,
.ui.inverted.green.buttons .basic.button:hover,
.ui.inverted.green.basic.button:hover {
  -webkit-box-shadow: 0px 0px 0px 2px #22be34 inset !important;
          box-shadow: 0px 0px 0px 2px #22be34 inset !important;
  color: #2ECC40 !important;
}
.ui.inverted.green.basic.buttons .button:focus,
.ui.inverted.green.basic.buttons .button:focus,
.ui.inverted.green.basic.button:focus {
  -webkit-box-shadow: 0px 0px 0px 2px #19b82b inset !important;
          box-shadow: 0px 0px 0px 2px #19b82b inset !important;
  color: #2ECC40 !important;
}
.ui.inverted.green.basic.buttons .active.button,
.ui.inverted.green.buttons .basic.active.button,
.ui.inverted.green.basic.active.button {
  -webkit-box-shadow: 0px 0px 0px 2px #1fc231 inset !important;
          box-shadow: 0px 0px 0px 2px #1fc231 inset !important;
  color: #2ECC40 !important;
}
.ui.inverted.green.basic.buttons .button:active,
.ui.inverted.green.buttons .basic.button:active,
.ui.inverted.green.basic.button:active {
  -webkit-box-shadow: 0px 0px 0px 2px #25a233 inset !important;
          box-shadow: 0px 0px 0px 2px #25a233 inset !important;
  color: #2ECC40 !important;
}

/*--- Orange ---*/

.ui.orange.buttons .button,
.ui.orange.button {
  background-color: #F2711C;
  color: #FFFFFF;
  text-shadow: none;
  background-image: none;
}
.ui.orange.button {
  -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
          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 {
  -webkit-box-shadow: 0px 0px 0px 1px #F2711C inset !important;
          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;
  -webkit-box-shadow: 0px 0px 0px 1px #f26202 inset !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;
  -webkit-box-shadow: 0px 0px 0px 1px #e55b00 inset !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;
  -webkit-box-shadow: 0px 0px 0px 1px #f56100 inset !important;
          box-shadow: 0px 0px 0px 1px #f56100 inset !important;
  color: #cf590c !important;
}
.ui.basic.orange.buttons .button:active,
.ui.basic.orange.button:active {
  -webkit-box-shadow: 0px 0px 0px 1px #cf590c inset !important;
          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;
}

/* Inverted */
.ui.inverted.orange.buttons .button,
.ui.inverted.orange.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px #FF851B inset !important;
          box-shadow: 0px 0px 0px 2px #FF851B inset !important;
  color: #FF851B;
}
.ui.inverted.orange.buttons .button:hover,
.ui.inverted.orange.button:hover,
.ui.inverted.orange.buttons .button:focus,
.ui.inverted.orange.button:focus,
.ui.inverted.orange.buttons .button.active,
.ui.inverted.orange.button.active,
.ui.inverted.orange.buttons .button:active,
.ui.inverted.orange.button:active {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  color: #FFFFFF;
}
.ui.inverted.orange.buttons .button:hover,
.ui.inverted.orange.button:hover {
  background-color: #ff7701;
}
.ui.inverted.orange.buttons .button:focus,
.ui.inverted.orange.button:focus {
  background-color: #f17000;
}
.ui.inverted.orange.buttons .active.button,
.ui.inverted.orange.active.button {
  background-color: #ff7701;
}
.ui.inverted.orange.buttons .button:active,
.ui.inverted.orange.button:active {
  background-color: #e76b00;
}

/* Inverted Basic */
.ui.inverted.orange.basic.buttons .button,
.ui.inverted.orange.buttons .basic.button,
.ui.inverted.orange.basic.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
          box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  color: #FFFFFF !important;
}
.ui.inverted.orange.basic.buttons .button:hover,
.ui.inverted.orange.buttons .basic.button:hover,
.ui.inverted.orange.basic.button:hover {
  -webkit-box-shadow: 0px 0px 0px 2px #ff7701 inset !important;
          box-shadow: 0px 0px 0px 2px #ff7701 inset !important;
  color: #FF851B !important;
}
.ui.inverted.orange.basic.buttons .button:focus,
.ui.inverted.orange.basic.buttons .button:focus,
.ui.inverted.orange.basic.button:focus {
  -webkit-box-shadow: 0px 0px 0px 2px #f17000 inset !important;
          box-shadow: 0px 0px 0px 2px #f17000 inset !important;
  color: #FF851B !important;
}
.ui.inverted.orange.basic.buttons .active.button,
.ui.inverted.orange.buttons .basic.active.button,
.ui.inverted.orange.basic.active.button {
  -webkit-box-shadow: 0px 0px 0px 2px #ff7701 inset !important;
          box-shadow: 0px 0px 0px 2px #ff7701 inset !important;
  color: #FF851B !important;
}
.ui.inverted.orange.basic.buttons .button:active,
.ui.inverted.orange.buttons .basic.button:active,
.ui.inverted.orange.basic.button:active {
  -webkit-box-shadow: 0px 0px 0px 2px #e76b00 inset !important;
          box-shadow: 0px 0px 0px 2px #e76b00 inset !important;
  color: #FF851B !important;
}

/*--- Pink ---*/

.ui.pink.buttons .button,
.ui.pink.button {
  background-color: #E03997;
  color: #FFFFFF;
  text-shadow: none;
  background-image: none;
}
.ui.pink.button {
  -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
          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 {
  -webkit-box-shadow: 0px 0px 0px 1px #E03997 inset !important;
          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;
  -webkit-box-shadow: 0px 0px 0px 1px #e61a8d inset !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;
  -webkit-box-shadow: 0px 0px 0px 1px #e10f85 inset !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;
  -webkit-box-shadow: 0px 0px 0px 1px #ea158d inset !important;
          box-shadow: 0px 0px 0px 1px #ea158d inset !important;
  color: #c71f7e !important;
}
.ui.basic.pink.buttons .button:active,
.ui.basic.pink.button:active {
  -webkit-box-shadow: 0px 0px 0px 1px #c71f7e inset !important;
          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;
}

/* Inverted */
.ui.inverted.pink.buttons .button,
.ui.inverted.pink.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px #FF8EDF inset !important;
          box-shadow: 0px 0px 0px 2px #FF8EDF inset !important;
  color: #FF8EDF;
}
.ui.inverted.pink.buttons .button:hover,
.ui.inverted.pink.button:hover,
.ui.inverted.pink.buttons .button:focus,
.ui.inverted.pink.button:focus,
.ui.inverted.pink.buttons .button.active,
.ui.inverted.pink.button.active,
.ui.inverted.pink.buttons .button:active,
.ui.inverted.pink.button:active {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  color: #FFFFFF;
}
.ui.inverted.pink.buttons .button:hover,
.ui.inverted.pink.button:hover {
  background-color: #ff74d8;
}
.ui.inverted.pink.buttons .button:focus,
.ui.inverted.pink.button:focus {
  background-color: #ff65d3;
}
.ui.inverted.pink.buttons .active.button,
.ui.inverted.pink.active.button {
  background-color: #ff74d8;
}
.ui.inverted.pink.buttons .button:active,
.ui.inverted.pink.button:active {
  background-color: #ff5bd1;
}

/* Inverted Basic */
.ui.inverted.pink.basic.buttons .button,
.ui.inverted.pink.buttons .basic.button,
.ui.inverted.pink.basic.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
          box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  color: #FFFFFF !important;
}
.ui.inverted.pink.basic.buttons .button:hover,
.ui.inverted.pink.buttons .basic.button:hover,
.ui.inverted.pink.basic.button:hover {
  -webkit-box-shadow: 0px 0px 0px 2px #ff74d8 inset !important;
          box-shadow: 0px 0px 0px 2px #ff74d8 inset !important;
  color: #FF8EDF !important;
}
.ui.inverted.pink.basic.buttons .button:focus,
.ui.inverted.pink.basic.buttons .button:focus,
.ui.inverted.pink.basic.button:focus {
  -webkit-box-shadow: 0px 0px 0px 2px #ff65d3 inset !important;
          box-shadow: 0px 0px 0px 2px #ff65d3 inset !important;
  color: #FF8EDF !important;
}
.ui.inverted.pink.basic.buttons .active.button,
.ui.inverted.pink.buttons .basic.active.button,
.ui.inverted.pink.basic.active.button {
  -webkit-box-shadow: 0px 0px 0px 2px #ff74d8 inset !important;
          box-shadow: 0px 0px 0px 2px #ff74d8 inset !important;
  color: #FF8EDF !important;
}
.ui.inverted.pink.basic.buttons .button:active,
.ui.inverted.pink.buttons .basic.button:active,
.ui.inverted.pink.basic.button:active {
  -webkit-box-shadow: 0px 0px 0px 2px #ff5bd1 inset !important;
          box-shadow: 0px 0px 0px 2px #ff5bd1 inset !important;
  color: #FF8EDF !important;
}

/*--- Violet ---*/

.ui.violet.buttons .button,
.ui.violet.button {
  background-color: #6435C9;
  color: #FFFFFF;
  text-shadow: none;
  background-image: none;
}
.ui.violet.button {
  -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
          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 {
  -webkit-box-shadow: 0px 0px 0px 1px #6435C9 inset !important;
          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;
  -webkit-box-shadow: 0px 0px 0px 1px #5829bb inset !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;
  -webkit-box-shadow: 0px 0px 0px 1px #4f20b5 inset !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;
  -webkit-box-shadow: 0px 0px 0px 1px #5626bf inset !important;
          box-shadow: 0px 0px 0px 1px #5626bf inset !important;
  color: #502aa1 !important;
}
.ui.basic.violet.buttons .button:active,
.ui.basic.violet.button:active {
  -webkit-box-shadow: 0px 0px 0px 1px #502aa1 inset !important;
          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;
}

/* Inverted */
.ui.inverted.violet.buttons .button,
.ui.inverted.violet.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px #A291FB inset !important;
          box-shadow: 0px 0px 0px 2px #A291FB inset !important;
  color: #A291FB;
}
.ui.inverted.violet.buttons .button:hover,
.ui.inverted.violet.button:hover,
.ui.inverted.violet.buttons .button:focus,
.ui.inverted.violet.button:focus,
.ui.inverted.violet.buttons .button.active,
.ui.inverted.violet.button.active,
.ui.inverted.violet.buttons .button:active,
.ui.inverted.violet.button:active {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  color: #FFFFFF;
}
.ui.inverted.violet.buttons .button:hover,
.ui.inverted.violet.button:hover {
  background-color: #8a73ff;
}
.ui.inverted.violet.buttons .button:focus,
.ui.inverted.violet.button:focus {
  background-color: #7d64ff;
}
.ui.inverted.violet.buttons .active.button,
.ui.inverted.violet.active.button {
  background-color: #8a73ff;
}
.ui.inverted.violet.buttons .button:active,
.ui.inverted.violet.button:active {
  background-color: #7860f9;
}

/* Inverted Basic */
.ui.inverted.violet.basic.buttons .button,
.ui.inverted.violet.buttons .basic.button,
.ui.inverted.violet.basic.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
          box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  color: #FFFFFF !important;
}
.ui.inverted.violet.basic.buttons .button:hover,
.ui.inverted.violet.buttons .basic.button:hover,
.ui.inverted.violet.basic.button:hover {
  -webkit-box-shadow: 0px 0px 0px 2px #8a73ff inset !important;
          box-shadow: 0px 0px 0px 2px #8a73ff inset !important;
  color: #A291FB !important;
}
.ui.inverted.violet.basic.buttons .button:focus,
.ui.inverted.violet.basic.buttons .button:focus,
.ui.inverted.violet.basic.button:focus {
  -webkit-box-shadow: 0px 0px 0px 2px #7d64ff inset !important;
          box-shadow: 0px 0px 0px 2px #7d64ff inset !important;
  color: #A291FB !important;
}
.ui.inverted.violet.basic.buttons .active.button,
.ui.inverted.violet.buttons .basic.active.button,
.ui.inverted.violet.basic.active.button {
  -webkit-box-shadow: 0px 0px 0px 2px #8a73ff inset !important;
          box-shadow: 0px 0px 0px 2px #8a73ff inset !important;
  color: #A291FB !important;
}
.ui.inverted.violet.basic.buttons .button:active,
.ui.inverted.violet.buttons .basic.button:active,
.ui.inverted.violet.basic.button:active {
  -webkit-box-shadow: 0px 0px 0px 2px #7860f9 inset !important;
          box-shadow: 0px 0px 0px 2px #7860f9 inset !important;
  color: #A291FB !important;
}

/*--- Purple ---*/

.ui.purple.buttons .button,
.ui.purple.button {
  background-color: #A333C8;
  color: #FFFFFF;
  text-shadow: none;
  background-image: none;
}
.ui.purple.button {
  -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
          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 {
  -webkit-box-shadow: 0px 0px 0px 1px #A333C8 inset !important;
          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;
  -webkit-box-shadow: 0px 0px 0px 1px #9627ba inset !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;
  -webkit-box-shadow: 0px 0px 0px 1px #8f1eb4 inset !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;
  -webkit-box-shadow: 0px 0px 0px 1px #9724be inset !important;
          box-shadow: 0px 0px 0px 1px #9724be inset !important;
  color: #82299f !important;
}
.ui.basic.purple.buttons .button:active,
.ui.basic.purple.button:active {
  -webkit-box-shadow: 0px 0px 0px 1px #82299f inset !important;
          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;
}

/* Inverted */
.ui.inverted.purple.buttons .button,
.ui.inverted.purple.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px #DC73FF inset !important;
          box-shadow: 0px 0px 0px 2px #DC73FF inset !important;
  color: #DC73FF;
}
.ui.inverted.purple.buttons .button:hover,
.ui.inverted.purple.button:hover,
.ui.inverted.purple.buttons .button:focus,
.ui.inverted.purple.button:focus,
.ui.inverted.purple.buttons .button.active,
.ui.inverted.purple.button.active,
.ui.inverted.purple.buttons .button:active,
.ui.inverted.purple.button:active {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  color: #FFFFFF;
}
.ui.inverted.purple.buttons .button:hover,
.ui.inverted.purple.button:hover {
  background-color: #d65aff;
}
.ui.inverted.purple.buttons .button:focus,
.ui.inverted.purple.button:focus {
  background-color: #d24aff;
}
.ui.inverted.purple.buttons .active.button,
.ui.inverted.purple.active.button {
  background-color: #d65aff;
}
.ui.inverted.purple.buttons .button:active,
.ui.inverted.purple.button:active {
  background-color: #cf40ff;
}

/* Inverted Basic */
.ui.inverted.purple.basic.buttons .button,
.ui.inverted.purple.buttons .basic.button,
.ui.inverted.purple.basic.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
          box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  color: #FFFFFF !important;
}
.ui.inverted.purple.basic.buttons .button:hover,
.ui.inverted.purple.buttons .basic.button:hover,
.ui.inverted.purple.basic.button:hover {
  -webkit-box-shadow: 0px 0px 0px 2px #d65aff inset !important;
          box-shadow: 0px 0px 0px 2px #d65aff inset !important;
  color: #DC73FF !important;
}
.ui.inverted.purple.basic.buttons .button:focus,
.ui.inverted.purple.basic.buttons .button:focus,
.ui.inverted.purple.basic.button:focus {
  -webkit-box-shadow: 0px 0px 0px 2px #d24aff inset !important;
          box-shadow: 0px 0px 0px 2px #d24aff inset !important;
  color: #DC73FF !important;
}
.ui.inverted.purple.basic.buttons .active.button,
.ui.inverted.purple.buttons .basic.active.button,
.ui.inverted.purple.basic.active.button {
  -webkit-box-shadow: 0px 0px 0px 2px #d65aff inset !important;
          box-shadow: 0px 0px 0px 2px #d65aff inset !important;
  color: #DC73FF !important;
}
.ui.inverted.purple.basic.buttons .button:active,
.ui.inverted.purple.buttons .basic.button:active,
.ui.inverted.purple.basic.button:active {
  -webkit-box-shadow: 0px 0px 0px 2px #cf40ff inset !important;
          box-shadow: 0px 0px 0px 2px #cf40ff inset !important;
  color: #DC73FF !important;
}

/*--- Red ---*/

.ui.red.buttons .button,
.ui.red.button {
  background-color: #DB2828;
  color: #FFFFFF;
  text-shadow: none;
  background-image: none;
}
.ui.red.button {
  -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
          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 {
  -webkit-box-shadow: 0px 0px 0px 1px #DB2828 inset !important;
          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;
  -webkit-box-shadow: 0px 0px 0px 1px #d01919 inset !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;
  -webkit-box-shadow: 0px 0px 0px 1px #ca1010 inset !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;
  -webkit-box-shadow: 0px 0px 0px 1px #d41515 inset !important;
          box-shadow: 0px 0px 0px 1px #d41515 inset !important;
  color: #b21e1e !important;
}
.ui.basic.red.buttons .button:active,
.ui.basic.red.button:active {
  -webkit-box-shadow: 0px 0px 0px 1px #b21e1e inset !important;
          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;
}

/* Inverted */
.ui.inverted.red.buttons .button,
.ui.inverted.red.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px #FF695E inset !important;
          box-shadow: 0px 0px 0px 2px #FF695E inset !important;
  color: #FF695E;
}
.ui.inverted.red.buttons .button:hover,
.ui.inverted.red.button:hover,
.ui.inverted.red.buttons .button:focus,
.ui.inverted.red.button:focus,
.ui.inverted.red.buttons .button.active,
.ui.inverted.red.button.active,
.ui.inverted.red.buttons .button:active,
.ui.inverted.red.button:active {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  color: #FFFFFF;
}
.ui.inverted.red.buttons .button:hover,
.ui.inverted.red.button:hover {
  background-color: #ff5144;
}
.ui.inverted.red.buttons .button:focus,
.ui.inverted.red.button:focus {
  background-color: #ff4335;
}
.ui.inverted.red.buttons .active.button,
.ui.inverted.red.active.button {
  background-color: #ff5144;
}
.ui.inverted.red.buttons .button:active,
.ui.inverted.red.button:active {
  background-color: #ff392b;
}

/* Inverted Basic */
.ui.inverted.red.basic.buttons .button,
.ui.inverted.red.buttons .basic.button,
.ui.inverted.red.basic.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
          box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  color: #FFFFFF !important;
}
.ui.inverted.red.basic.buttons .button:hover,
.ui.inverted.red.buttons .basic.button:hover,
.ui.inverted.red.basic.button:hover {
  -webkit-box-shadow: 0px 0px 0px 2px #ff5144 inset !important;
          box-shadow: 0px 0px 0px 2px #ff5144 inset !important;
  color: #FF695E !important;
}
.ui.inverted.red.basic.buttons .button:focus,
.ui.inverted.red.basic.buttons .button:focus,
.ui.inverted.red.basic.button:focus {
  -webkit-box-shadow: 0px 0px 0px 2px #ff4335 inset !important;
          box-shadow: 0px 0px 0px 2px #ff4335 inset !important;
  color: #FF695E !important;
}
.ui.inverted.red.basic.buttons .active.button,
.ui.inverted.red.buttons .basic.active.button,
.ui.inverted.red.basic.active.button {
  -webkit-box-shadow: 0px 0px 0px 2px #ff5144 inset !important;
          box-shadow: 0px 0px 0px 2px #ff5144 inset !important;
  color: #FF695E !important;
}
.ui.inverted.red.basic.buttons .button:active,
.ui.inverted.red.buttons .basic.button:active,
.ui.inverted.red.basic.button:active {
  -webkit-box-shadow: 0px 0px 0px 2px #ff392b inset !important;
          box-shadow: 0px 0px 0px 2px #ff392b inset !important;
  color: #FF695E !important;
}

/*--- Teal ---*/

.ui.teal.buttons .button,
.ui.teal.button {
  background-color: #00B5AD;
  color: #FFFFFF;
  text-shadow: none;
  background-image: none;
}
.ui.teal.button {
  -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
          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 {
  -webkit-box-shadow: 0px 0px 0px 1px #00B5AD inset !important;
          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;
  -webkit-box-shadow: 0px 0px 0px 1px #009c95 inset !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;
  -webkit-box-shadow: 0px 0px 0px 1px #008c86 inset !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;
  -webkit-box-shadow: 0px 0px 0px 1px #009c95 inset !important;
          box-shadow: 0px 0px 0px 1px #009c95 inset !important;
  color: #00827c !important;
}
.ui.basic.teal.buttons .button:active,
.ui.basic.teal.button:active {
  -webkit-box-shadow: 0px 0px 0px 1px #00827c inset !important;
          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;
}

/* Inverted */
.ui.inverted.teal.buttons .button,
.ui.inverted.teal.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px #6DFFFF inset !important;
          box-shadow: 0px 0px 0px 2px #6DFFFF inset !important;
  color: #6DFFFF;
}
.ui.inverted.teal.buttons .button:hover,
.ui.inverted.teal.button:hover,
.ui.inverted.teal.buttons .button:focus,
.ui.inverted.teal.button:focus,
.ui.inverted.teal.buttons .button.active,
.ui.inverted.teal.button.active,
.ui.inverted.teal.buttons .button:active,
.ui.inverted.teal.button:active {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  color: rgba(0, 0, 0, 0.6);
}
.ui.inverted.teal.buttons .button:hover,
.ui.inverted.teal.button:hover {
  background-color: #54ffff;
}
.ui.inverted.teal.buttons .button:focus,
.ui.inverted.teal.button:focus {
  background-color: #44ffff;
}
.ui.inverted.teal.buttons .active.button,
.ui.inverted.teal.active.button {
  background-color: #54ffff;
}
.ui.inverted.teal.buttons .button:active,
.ui.inverted.teal.button:active {
  background-color: #3affff;
}

/* Inverted Basic */
.ui.inverted.teal.basic.buttons .button,
.ui.inverted.teal.buttons .basic.button,
.ui.inverted.teal.basic.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
          box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  color: #FFFFFF !important;
}
.ui.inverted.teal.basic.buttons .button:hover,
.ui.inverted.teal.buttons .basic.button:hover,
.ui.inverted.teal.basic.button:hover {
  -webkit-box-shadow: 0px 0px 0px 2px #54ffff inset !important;
          box-shadow: 0px 0px 0px 2px #54ffff inset !important;
  color: #6DFFFF !important;
}
.ui.inverted.teal.basic.buttons .button:focus,
.ui.inverted.teal.basic.buttons .button:focus,
.ui.inverted.teal.basic.button:focus {
  -webkit-box-shadow: 0px 0px 0px 2px #44ffff inset !important;
          box-shadow: 0px 0px 0px 2px #44ffff inset !important;
  color: #6DFFFF !important;
}
.ui.inverted.teal.basic.buttons .active.button,
.ui.inverted.teal.buttons .basic.active.button,
.ui.inverted.teal.basic.active.button {
  -webkit-box-shadow: 0px 0px 0px 2px #54ffff inset !important;
          box-shadow: 0px 0px 0px 2px #54ffff inset !important;
  color: #6DFFFF !important;
}
.ui.inverted.teal.basic.buttons .button:active,
.ui.inverted.teal.buttons .basic.button:active,
.ui.inverted.teal.basic.button:active {
  -webkit-box-shadow: 0px 0px 0px 2px #3affff inset !important;
          box-shadow: 0px 0px 0px 2px #3affff inset !important;
  color: #6DFFFF !important;
}

/*--- Olive ---*/

.ui.olive.buttons .button,
.ui.olive.button {
  background-color: #B5CC18;
  color: #FFFFFF;
  text-shadow: none;
  background-image: none;
}
.ui.olive.button {
  -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
          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 {
  -webkit-box-shadow: 0px 0px 0px 1px #B5CC18 inset !important;
          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;
  -webkit-box-shadow: 0px 0px 0px 1px #a7bd0d inset !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;
  -webkit-box-shadow: 0px 0px 0px 1px #a0b605 inset !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;
  -webkit-box-shadow: 0px 0px 0px 1px #aac109 inset !important;
          box-shadow: 0px 0px 0px 1px #aac109 inset !important;
  color: #8d9e13 !important;
}
.ui.basic.olive.buttons .button:active,
.ui.basic.olive.button:active {
  -webkit-box-shadow: 0px 0px 0px 1px #8d9e13 inset !important;
          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;
}

/* Inverted */
.ui.inverted.olive.buttons .button,
.ui.inverted.olive.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px #D9E778 inset !important;
          box-shadow: 0px 0px 0px 2px #D9E778 inset !important;
  color: #D9E778;
}
.ui.inverted.olive.buttons .button:hover,
.ui.inverted.olive.button:hover,
.ui.inverted.olive.buttons .button:focus,
.ui.inverted.olive.button:focus,
.ui.inverted.olive.buttons .button.active,
.ui.inverted.olive.button.active,
.ui.inverted.olive.buttons .button:active,
.ui.inverted.olive.button:active {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  color: rgba(0, 0, 0, 0.6);
}
.ui.inverted.olive.buttons .button:hover,
.ui.inverted.olive.button:hover {
  background-color: #d8ea5c;
}
.ui.inverted.olive.buttons .button:focus,
.ui.inverted.olive.button:focus {
  background-color: #daef47;
}
.ui.inverted.olive.buttons .active.button,
.ui.inverted.olive.active.button {
  background-color: #daed59;
}
.ui.inverted.olive.buttons .button:active,
.ui.inverted.olive.button:active {
  background-color: #cddf4d;
}

/* Inverted Basic */
.ui.inverted.olive.basic.buttons .button,
.ui.inverted.olive.buttons .basic.button,
.ui.inverted.olive.basic.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
          box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  color: #FFFFFF !important;
}
.ui.inverted.olive.basic.buttons .button:hover,
.ui.inverted.olive.buttons .basic.button:hover,
.ui.inverted.olive.basic.button:hover {
  -webkit-box-shadow: 0px 0px 0px 2px #d8ea5c inset !important;
          box-shadow: 0px 0px 0px 2px #d8ea5c inset !important;
  color: #D9E778 !important;
}
.ui.inverted.olive.basic.buttons .button:focus,
.ui.inverted.olive.basic.buttons .button:focus,
.ui.inverted.olive.basic.button:focus {
  -webkit-box-shadow: 0px 0px 0px 2px #daef47 inset !important;
          box-shadow: 0px 0px 0px 2px #daef47 inset !important;
  color: #D9E778 !important;
}
.ui.inverted.olive.basic.buttons .active.button,
.ui.inverted.olive.buttons .basic.active.button,
.ui.inverted.olive.basic.active.button {
  -webkit-box-shadow: 0px 0px 0px 2px #daed59 inset !important;
          box-shadow: 0px 0px 0px 2px #daed59 inset !important;
  color: #D9E778 !important;
}
.ui.inverted.olive.basic.buttons .button:active,
.ui.inverted.olive.buttons .basic.button:active,
.ui.inverted.olive.basic.button:active {
  -webkit-box-shadow: 0px 0px 0px 2px #cddf4d inset !important;
          box-shadow: 0px 0px 0px 2px #cddf4d inset !important;
  color: #D9E778 !important;
}

/*--- Yellow ---*/

.ui.yellow.buttons .button,
.ui.yellow.button {
  background-color: #FBBD08;
  color: #FFFFFF;
  text-shadow: none;
  background-image: none;
}
.ui.yellow.button {
  -webkit-box-shadow: 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
          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 {
  -webkit-box-shadow: 0px 0px 0px 1px #FBBD08 inset !important;
          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;
  -webkit-box-shadow: 0px 0px 0px 1px #eaae00 inset !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;
  -webkit-box-shadow: 0px 0px 0px 1px #daa300 inset !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;
  -webkit-box-shadow: 0px 0px 0px 1px #eaae00 inset !important;
          box-shadow: 0px 0px 0px 1px #eaae00 inset !important;
  color: #cd9903 !important;
}
.ui.basic.yellow.buttons .button:active,
.ui.basic.yellow.button:active {
  -webkit-box-shadow: 0px 0px 0px 1px #cd9903 inset !important;
          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;
}

/* Inverted */
.ui.inverted.yellow.buttons .button,
.ui.inverted.yellow.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px #FFE21F inset !important;
          box-shadow: 0px 0px 0px 2px #FFE21F inset !important;
  color: #FFE21F;
}
.ui.inverted.yellow.buttons .button:hover,
.ui.inverted.yellow.button:hover,
.ui.inverted.yellow.buttons .button:focus,
.ui.inverted.yellow.button:focus,
.ui.inverted.yellow.buttons .button.active,
.ui.inverted.yellow.button.active,
.ui.inverted.yellow.buttons .button:active,
.ui.inverted.yellow.button:active {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  color: rgba(0, 0, 0, 0.6);
}
.ui.inverted.yellow.buttons .button:hover,
.ui.inverted.yellow.button:hover {
  background-color: #ffdf05;
}
.ui.inverted.yellow.buttons .button:focus,
.ui.inverted.yellow.button:focus {
  background-color: #f5d500;
}
.ui.inverted.yellow.buttons .active.button,
.ui.inverted.yellow.active.button {
  background-color: #ffdf05;
}
.ui.inverted.yellow.buttons .button:active,
.ui.inverted.yellow.button:active {
  background-color: #ebcd00;
}

/* Inverted Basic */
.ui.inverted.yellow.basic.buttons .button,
.ui.inverted.yellow.buttons .basic.button,
.ui.inverted.yellow.basic.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
          box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  color: #FFFFFF !important;
}
.ui.inverted.yellow.basic.buttons .button:hover,
.ui.inverted.yellow.buttons .basic.button:hover,
.ui.inverted.yellow.basic.button:hover {
  -webkit-box-shadow: 0px 0px 0px 2px #ffdf05 inset !important;
          box-shadow: 0px 0px 0px 2px #ffdf05 inset !important;
  color: #FFE21F !important;
}
.ui.inverted.yellow.basic.buttons .button:focus,
.ui.inverted.yellow.basic.buttons .button:focus,
.ui.inverted.yellow.basic.button:focus {
  -webkit-box-shadow: 0px 0px 0px 2px #f5d500 inset !important;
          box-shadow: 0px 0px 0px 2px #f5d500 inset !important;
  color: #FFE21F !important;
}
.ui.inverted.yellow.basic.buttons .active.button,
.ui.inverted.yellow.buttons .basic.active.button,
.ui.inverted.yellow.basic.active.button {
  -webkit-box-shadow: 0px 0px 0px 2px #ffdf05 inset !important;
          box-shadow: 0px 0px 0px 2px #ffdf05 inset !important;
  color: #FFE21F !important;
}
.ui.inverted.yellow.basic.buttons .button:active,
.ui.inverted.yellow.buttons .basic.button:active,
.ui.inverted.yellow.basic.button:active {
  -webkit-box-shadow: 0px 0px 0px 2px #ebcd00 inset !important;
          box-shadow: 0px 0px 0px 2px #ebcd00 inset !important;
  color: #FFE21F !important;
}

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


/*--- Standard ---*/

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

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

/* Inverted */
.ui.inverted.primary.buttons .button,
.ui.inverted.primary.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px #54C8FF inset !important;
          box-shadow: 0px 0px 0px 2px #54C8FF inset !important;
  color: #54C8FF;
}
.ui.inverted.primary.buttons .button:hover,
.ui.inverted.primary.button:hover,
.ui.inverted.primary.buttons .button:focus,
.ui.inverted.primary.button:focus,
.ui.inverted.primary.buttons .button.active,
.ui.inverted.primary.button.active,
.ui.inverted.primary.buttons .button:active,
.ui.inverted.primary.button:active {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  color: #FFFFFF;
}
.ui.inverted.primary.buttons .button:hover,
.ui.inverted.primary.button:hover {
  background-color: #3ac0ff;
}
.ui.inverted.primary.buttons .button:focus,
.ui.inverted.primary.button:focus {
  background-color: #2bbbff;
}
.ui.inverted.primary.buttons .active.button,
.ui.inverted.primary.active.button {
  background-color: #3ac0ff;
}
.ui.inverted.primary.buttons .button:active,
.ui.inverted.primary.button:active {
  background-color: #21b8ff;
}

/* Inverted Basic */
.ui.inverted.primary.basic.buttons .button,
.ui.inverted.primary.buttons .basic.button,
.ui.inverted.primary.basic.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
          box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  color: #FFFFFF !important;
}
.ui.inverted.primary.basic.buttons .button:hover,
.ui.inverted.primary.buttons .basic.button:hover,
.ui.inverted.primary.basic.button:hover {
  -webkit-box-shadow: 0px 0px 0px 2px #3ac0ff inset !important;
          box-shadow: 0px 0px 0px 2px #3ac0ff inset !important;
  color: #54C8FF !important;
}
.ui.inverted.primary.basic.buttons .button:focus,
.ui.inverted.primary.basic.buttons .button:focus,
.ui.inverted.primary.basic.button:focus {
  -webkit-box-shadow: 0px 0px 0px 2px #2bbbff inset !important;
          box-shadow: 0px 0px 0px 2px #2bbbff inset !important;
  color: #54C8FF !important;
}
.ui.inverted.primary.basic.buttons .active.button,
.ui.inverted.primary.buttons .basic.active.button,
.ui.inverted.primary.basic.active.button {
  -webkit-box-shadow: 0px 0px 0px 2px #3ac0ff inset !important;
          box-shadow: 0px 0px 0px 2px #3ac0ff inset !important;
  color: #54C8FF !important;
}
.ui.inverted.primary.basic.buttons .button:active,
.ui.inverted.primary.buttons .basic.button:active,
.ui.inverted.primary.basic.button:active {
  -webkit-box-shadow: 0px 0px 0px 2px #21b8ff inset !important;
          box-shadow: 0px 0px 0px 2px #21b8ff inset !important;
  color: #54C8FF !important;
}

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


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

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

/* Inverted */
.ui.inverted.secondary.buttons .button,
.ui.inverted.secondary.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px #545454 inset !important;
          box-shadow: 0px 0px 0px 2px #545454 inset !important;
  color: #545454;
}
.ui.inverted.secondary.buttons .button:hover,
.ui.inverted.secondary.button:hover,
.ui.inverted.secondary.buttons .button:focus,
.ui.inverted.secondary.button:focus,
.ui.inverted.secondary.buttons .button.active,
.ui.inverted.secondary.button.active,
.ui.inverted.secondary.buttons .button:active,
.ui.inverted.secondary.button:active {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  color: #FFFFFF;
}
.ui.inverted.secondary.buttons .button:hover,
.ui.inverted.secondary.button:hover {
  background-color: #616161;
}
.ui.inverted.secondary.buttons .button:focus,
.ui.inverted.secondary.button:focus {
  background-color: #686868;
}
.ui.inverted.secondary.buttons .active.button,
.ui.inverted.secondary.active.button {
  background-color: #616161;
}
.ui.inverted.secondary.buttons .button:active,
.ui.inverted.secondary.button:active {
  background-color: #6e6e6e;
}

/* Inverted Basic */
.ui.inverted.secondary.basic.buttons .button,
.ui.inverted.secondary.buttons .basic.button,
.ui.inverted.secondary.basic.button {
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
          box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.5) inset !important;
  color: #FFFFFF !important;
}
.ui.inverted.secondary.basic.buttons .button:hover,
.ui.inverted.secondary.buttons .basic.button:hover,
.ui.inverted.secondary.basic.button:hover {
  -webkit-box-shadow: 0px 0px 0px 2px #616161 inset !important;
          box-shadow: 0px 0px 0px 2px #616161 inset !important;
  color: #545454 !important;
}
.ui.inverted.secondary.basic.buttons .button:focus,
.ui.inverted.secondary.basic.buttons .button:focus,
.ui.inverted.secondary.basic.button:focus {
  -webkit-box-shadow: 0px 0px 0px 2px #686868 inset !important;
          box-shadow: 0px 0px 0px 2px #686868 inset !important;
  color: #545454 !important;
}
.ui.inverted.secondary.basic.buttons .active.button,
.ui.inverted.secondary.buttons .basic.active.button,
.ui.inverted.secondary.basic.active.button {
  -webkit-box-shadow: 0px 0px 0px 2px #616161 inset !important;
          box-shadow: 0px 0px 0px 2px #616161 inset !important;
  color: #545454 !important;
}
.ui.inverted.secondary.basic.buttons .button:active,
.ui.inverted.secondary.buttons .basic.button:active,
.ui.inverted.secondary.basic.button:active {
  -webkit-box-shadow: 0px 0px 0px 2px #6e6e6e inset !important;
          box-shadow: 0px 0px 0px 2px #6e6e6e inset !important;
  color: #545454 !important;
}

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


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

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

/*---------------
     Negative
----------------*/


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

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


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

.ui.buttons {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  font-size: 0em;
  vertical-align: baseline;
  margin: 0em 0.25em 0em 0em;
  background: #E6E7F0 !important;
  box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25) !important;
  height: 50px !important;
  border-radius: 43px !important;
  width: auto !important;
  max-width: 100%;
  margin-bottom: 0.5rem;
  overflow-x: auto;
}
.ui.buttons:not(.basic):not(.inverted) {
  -webkit-box-shadow: none;
          box-shadow: none;
}
.ui.buttons::-webkit-scrollbar {
    display: none !important;
}

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

/* Standard Group */
.ui.buttons .button {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  margin: 0em;
  border-radius: 0em;
  margin: 0px 0px 0px 0px;
  background: transparent;
  height: 50px !important;
  width: auto;
  border-radius: 43px !important;
  font-size: 14px; /* Number 4 */
  font-weight: normal;
  white-space: nowrap;
}
.ui.buttons a {
  padding: 0;
}
.ui.buttons > .ui.button:not(.basic):not(.inverted),
.ui.buttons:not(.basic):not(.inverted) > .button {
  -webkit-box-shadow: 0px 0px 0px 1px transparent inset, 0px 0em 0px 0px rgba(34, 36, 38, 0.15) inset;
          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;
}

/* Vertical  Style */
.ui.vertical.buttons {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.ui.vertical.buttons .button {
  display: block;
  float: none;
  width: 100%;
  margin: 0px 0px 0px 0px;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-radius: 0em;
}
.ui.vertical.buttons .button:first-child {
  border-top-left-radius: 0.28571429rem;
  border-top-right-radius: 0.28571429rem;
}
.ui.vertical.buttons .button:last-child {
  margin-bottom: 0px;
  border-bottom-left-radius: 0.28571429rem;
  border-bottom-right-radius: 0.28571429rem;
}
.ui.vertical.buttons .button:only-child {
  border-radius: 0.28571429rem;
}

/* Modern UI */

.purple-header-border-hint {
  border-left: 6px solid #4368D8 !important;
}

.orange-header-border-hint {
  border-left: 6px solid #FF9B00 !important;
}

.green-header-border-hint {
  border-left: 6px solid #01BF86 !important;
}

.dark-header-border-hint {
  border-left: 6px solid #525252 !important;
}

.purple-background-color {
  background-color: #4368D8 !important;
}

.orange-background-color {
  background-color: #FF9B00 !important;
}

.green-background-color {
  background-color: #01BF86 !important;
}

.dark-background-color {
  background-color: #525252 !important;
}

.purple-color {
  color: #4368D8 !important;
}

.orange-color {
  color: #FF9B00 !important;
}

.red-color {
  color: #EB5757 !important;
}

.green-color {
  color: #01BF86 !important;
}

.dark-color {
  color: #525252 !important;
}

/* Custom File Input */
.no-js .inputfile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.inputfile + label {
  max-width: 80%;
  font-size: 1.25rem;
  /* 20px */
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  padding: 0.625rem 1.25rem;
  /* 10px 20px */
}

/* .no-js .inputfile + label {
  display: none;
} */

.inputfile:focus + label,
.inputfile.has-focus + label {
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px;
}

.inputfile + label * {
  pointer-events: none;
  /* in case of FastClick lib use */
}

.inputfile + label svg {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  fill: currentColor;
  margin-top: -0.25em;
  /* 4px */
  margin-right: 0.25em;
  /* 4px */
}


/* style 1 */

.inputfile-1 + label {
  color: #f1e5e6;
  background-color: #d3394c;
}

.inputfile-1:focus + label,
.inputfile-1.has-focus + label,
.inputfile-1 + label:hover {
  background-color: #722040;
}


/* style 2 */

.inputfile-2 + label {
  color: #d3394c;
  border: 2px solid currentColor;
}

.inputfile-2:focus + label,
.inputfile-2.has-focus + label,
.inputfile-2 + label:hover {
  color: #722040;
}


/* style 3 */

.inputfile-3 + label {
  color: #d3394c;
}

.inputfile-3:focus + label,
.inputfile-3.has-focus + label,
.inputfile-3 + label:hover {
  color: #722040;
}


/* style 4 */

.inputfile-4 + label {
  color: #d3394c;
}

.inputfile-4:focus + label,
.inputfile-4.has-focus + label,
.inputfile-4 + label:hover {
  color: #722040;
}

.inputfile-4 + label figure {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #d3394c;
  display: block;
  padding: 20px;
  margin: 0 auto 10px;
}

.inputfile-4:focus + label figure,
.inputfile-4.has-focus + label figure,
.inputfile-4 + label:hover figure {
  background-color: #722040;
}

.inputfile-4 + label svg {
  width: 100%;
  height: 100%;
  fill: #f1e5e6;
}


/* style 5 */

.inputfile-5 + label {
  color: #d3394c;
}

.inputfile-5:focus + label,
.inputfile-5.has-focus + label,
.inputfile-5 + label:hover {
  color: #722040;
}

.inputfile-5 + label figure {
  width: 100px;
  height: 135px;
  background-color: #d3394c;
  display: block;
  position: relative;
  padding: 30px;
  margin: 0 auto 10px;
}

.inputfile-5:focus + label figure,
.inputfile-5.has-focus + label figure,
.inputfile-5 + label:hover figure {
  background-color: #722040;
}

.inputfile-5 + label figure::before,
.inputfile-5 + label figure::after {
  width: 0;
  height: 0;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
}

.inputfile-5 + label figure::before {
  border-top: 20px solid #dfc8ca;
  border-left: 20px solid transparent;
}

.inputfile-5 + label figure::after {
  border-bottom: 20px solid #722040;
  border-right: 20px solid transparent;
}

.inputfile-5:focus + label figure::after,
.inputfile-5.has-focus + label figure::after,
.inputfile-5 + label:hover figure::after {
  border-bottom-color: #d3394c;
}

.inputfile-5 + label svg {
  width: 100%;
  height: 100%;
  fill: #f1e5e6;
}


/* style 6 */

.inputfile-6 + label {
  color: #d3394c;
}

.inputfile-6 + label {
  border: 1px solid #d3394c;
  background-color: #f1e5e6;
  padding: 0;
}

.inputfile-6:focus + label,
.inputfile-6.has-focus + label,
.inputfile-6 + label:hover {
  border-color: #722040;
}

.inputfile-6 + label span,
.inputfile-6 + label strong {
  padding: 0.625rem 1.25rem;
  /* 10px 20px */
}

.inputfile-6 + label span {
  width: 200px;
  min-height: 2em;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: top;
}

.inputfile-6 + label strong {
  height: 100%;
  color: #f1e5e6;
  background-color: #d3394c;
  display: inline-block;
}

.inputfile-6:focus + label strong,
.inputfile-6.has-focus + label strong,
.inputfile-6 + label:hover strong {
  background-color: #722040;
}

@media screen and (max-width: 50em) {
.inputfile-6 + label strong {
  display: block;
}
}

/* Modern card */

.modern-card {
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25) !important;
  border-radius: 10px 10px 10px 10px !important;
  border: 0 !important;
}

.modern-card>.card-header {
  border: 0;
  background-color: unset !important;
  border-radius: 10px 0px 0px 0px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 1;
}

.modern-card>.card-header>div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
}

.modern-card>.card-header p {
  font-size: 17px; /* Number 5 */
}

.modern-card>.card-body {
  padding: 2em !important;
  padding-top: 0 !important;
}

.modern-card .form-header {
  font-weight: 600;
  font-size: 20px;
  line-height: 25px;
  color: #3D4556;
  margin-top: 45px !important;
  margin-bottom: 40px !important;
}

.modern-card .large-form-header {
  font-weight: 600;
  font-size: 25px;
  line-height: 31px;
  color: #3D4556;
  margin-top: 0.5em !important;
}

.modern-card .success-message {
  font-weight: bold;
  font-size: 36px;
  line-height: 45px;
  text-align: center;
  color: #3D4556;
}

.modern-card .form-body {
  font-weight: 600;
  font-size: 15px;
  line-height: 19px;
  color: #3D4556;
}

.modern-card .file-name {
  font-weight: 600;
  font-size: 20px;
  line-height: 25px;
  color: #3D4556;
}

/* Modern Table */

.modern-table thead th, .modern-table thead td {
  border: none;
  /* padding: 15px; */
}

.modern-table thead tr {
  background: white;
}

.modern-table tr, .modern-table th, .modern-table td {
  border-top: 0;
  border-bottom: 1px solid #CACACA;
  /* padding: 15px; */
}

/* Help button */

.help-button {
  background: #F5F5F5;
  border: 1px solid #A5A5A5;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  padding: 4px;
  width: 48px;
  height: 48px;
}

.help-button:disabled {
  background: #E9E9E9;
  border: 1px solid #8C8C8C;
  pointer-events: none;
}

.help-button:hover {
  background: #E9E9E9;
  border: 1px solid #8C8C8C;
}

.help-button:active {
  background: #3D4556;
}

.help-button:active i {
  color: white;
}

.help-button:focus {
  outline: unset !important;
}

.help-button i {
  color: #3D4556;
}


/* Small button size */

.small-modern-button {
  width: 36px !important;
  height: 36px !important;
}/* Number 4 */

/* Really small button size */
.really-small-modern-button {
  width: 26px !important;
  height: 26px !important;
}

.really-small-modern-button img {
  margin-bottom: 3px;
  width: 17px;
  height: 17px;
}

/* Plus button */

.plus-button {
  background: #4368D8;
  border: 1px solid #4368D8;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  padding: 4px;
  padding-bottom: 1px;
  width: 42px;
  height: 42px;
}

.plus-button:disabled {
  background: #29418C;
  pointer-events: none;
}

.plus-button:hover {
  background: #29418C;
}

.plus-button:active {
  background: rgb(31, 49, 104);
}

.plus-button:focus {
  outline: unset !important;
}

/* Edit button */

.edit-button {
  background: #01BF86;
  border: 1px solid #01BF86;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  padding: 4px;
  width: 48px;
  height: 48px;
}

.edit-button:disabled {
  background: #00865E;
  pointer-events: none;
}

.edit-button:hover {
  background: #00865E;
}

.edit-button:active {
  background: rgb(0, 105, 74);
}

.edit-button:focus {
  outline: unset !important;
}

/* Cancel button */

.cancel-button {
  background: #EB5757;
  border: 1px solid #EB5757;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  padding: 4px;
  width: 48px;
  height: 48px;
}

.cancel-button:disabled {
  background: #BD4848;
  pointer-events: none;
}

.cancel-button:hover {
  background: #BD4848;
}

.cancel-button:active {
  background: rgb(151, 59, 59);
}

.cancel-button:focus {
  outline: unset !important;
}

.cancel-button img {
  transform: rotate(45deg);
}

/* Next button */

.next-button {
  background: #FFFFFF;
  border: 1px solid #8C8C8C;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 43px;
  padding-top: 4px;
  padding-bottom: 1px;
  padding-left: 1em;
  padding-right: 1em;
  width: auto;
  min-width: 6rem;
  height: 50px;
  font-size: 14px; /* Number 4 */
  line-height: 23px;
  text-align: center;
  color: #5B5B5B;
}

.next-button:disabled {
  background: #E9E9E9;
  pointer-events: none;
}

.next-button:hover {
  background: #E9E9E9;
}

.next-button:active {
  background: rgb(211, 210, 210);
}

.next-button:focus {
  outline: unset !important;
}

.next-button img {
  transform: rotate(180deg);
  margin-left: 11px;
  margin-bottom: 3px;
}

/* Back button */

.back-button {
  background: #FFFFFF;
  border: 1px solid #8C8C8C;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 43px;
  padding: 4px;
  padding-bottom: 1px;
  padding-left: 1em;
  padding-right: 1em;
  width: auto;
  min-width: 6rem;
  height: 50px;
  font-size: 14px; /* Number 4 */
  line-height: 23px;
  text-align: center;
  color: #5B5B5B;
}

.back-button:disabled {
  background: #E9E9E9;
  pointer-events: none;
}

.back-button:hover {
  background: #E9E9E9;
}

.back-button:active {
  background: rgb(211, 210, 210);
}

.back-button:focus {
  outline: unset !important;
}

.back-button img {
  margin-right: 11px;
  margin-bottom: 3px;
}

/* Green button */

.green-button {
  background: #01BF86;
  border: 0;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 43px;
  padding: 4px;
  padding-left: 1em;
  padding-right: 1em;
  width: auto;
  min-width: 6rem;
  height: 50px;

  font-style: normal;
  font-weight: normal;
  font-size: 14px; /* Number 4 */
  line-height: 23px;
  text-align: center;
  color: #FFFFFF;
}

.green-button:disabled {
  background: #00865E;
  color: #fff;
  pointer-events: none;
}

.green-button.outline {
  border: 1px solid #01BF86;
  background: transparent;
  color: #01BF86;
}

.green-button:hover {
  background: #00865E;
  color: #fff;
}

.green-button:active {
  background: rgb(0, 105, 74);
}

.green-button:focus {
  outline: unset !important;
}

/* Red button */

.red-button {
  background: #EB5757;
  border: 0;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 43px;
  padding: 4px;
  padding-left: 1em;
  padding-right: 1em;
  width: auto;
  min-width: 6rem;
  height: 50px;

  font-style: normal;
  font-weight: normal;
  font-size: 14px; /* Number 4 */
  line-height: 23px;
  text-align: center;
  color: #FFFFFF;
}

.red-button:disabled {
  background: #BD4848;
  color: #fff;
  pointer-events: none;
}

.red-button.outline {
  border: 1px solid #EB5757;
  background: transparent;
  color: #EB5757;
}

.red-button:hover {
  background: #BD4848;
  color: #fff;
}

.red-button:active {
  background: rgb(151, 59, 59);
}

.red-button:focus {
  outline: unset !important;
}

/* Orange button */

.orange-button {
  background: #FF9B00;
  border: 0;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 43px;
  padding: 4px;
  padding-left: 1em;
  padding-right: 1em;
  width: auto;
  min-width: 6rem;
  height: 50px;

  font-style: normal;
  font-weight: normal;
  font-size: 14px; /* Number 4 */
  line-height: 23px;
  text-align: center;
  color: #FFFFFF;
}

.orange-button:disabled {
  background: #D3860D;
  color: #fff;
  pointer-events: none;
}

.orange-button.outline {
  border: 1px solid #FF9B00;
  background: transparent;
  color: #FF9B00;
}

.orange-button:hover {
  background: #D3860D;
  color: #fff;
}

.orange-button:active {
  background: rgb(179, 114, 11);
}

.orange-button:focus {
  outline: unset !important;
}

/* Gray Button */

.gray-button {
  background: #808080;
  border: 0;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 43px;
  padding: 4px;
  padding-left: 1em;
  padding-right: 1em;
  width: auto;
  min-width: 6rem;
  height: 50px;

  font-style: normal;
  font-weight: normal;
  font-size: 14px; /* Number 4 */
  line-height: 23px;
  text-align: center;
  color: #FFFFFF;
}

.gray-button:disabled {
  background: #888080;
  color: #fff;
  pointer-events: none;
}

.gray-button.outline {
  border: 1px solid #808080;
  background: transparent;
  color: #808080;
}

.gray-button:hover {
  background: #888080;
  color: #fff;
}

.gray-button:active {
  background: rgb(179, 114, 11);
}

.gray-button:focus {
  outline: unset !important;
}


/* Blue button */

.blue-button {
  background: #4368D8;
  border: 0;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 43px;
  padding: 4px;
  padding-left: 1em;
  padding-right: 1em;
  width: auto;
  min-width: 6rem;
  height: 50px;

  font-style: normal;
  font-weight: normal;
  font-size: 14px; /* Number 4 */
  line-height: 23px;
  text-align: center;
  color: #FFFFFF;
}

.blue-button:disabled {
  background: rgb(49, 83, 187);
  color: #fff;
  pointer-events: none;
}

.blue-button.outline {
  border: 1px solid #4368D8;
  background: transparent;
  color: #4368D8;
}

.blue-button:hover {
  background: rgb(49, 83, 187);
  color: #fff;
}

.blue-button:active {
  background: rgb(35, 61, 139);
}

.blue-button:focus {
  outline: unset !important;
}

/* Dull Blue button */

.dull-blue-button {
  background: #5C6DA1;
  border: 0;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 43px;
  padding: 4px;
  padding-left: 1em;
  padding-right: 1em;
  width: auto;
  min-width: 6rem;
  height: 50px;

  font-style: normal;
  font-weight: normal;
  font-size: 14px; /* Number 4 */
  line-height: 23px;
  text-align: center;
  color: #FFFFFF;
}

.dull-blue-button:disabled {
  background: #394875;
  color: #fff;
  pointer-events: none;
}

.dull-blue-button.outline {
  border: 1px solid #5C6DA1;
  background: transparent;
  color: #5C6DA1;
}

.dull-blue-button:hover {
  background: #394875;
  color: #fff;
}

.dull-blue-button:active {
  background: #313d63;
}

.dull-blue-button:focus {
  outline: unset !important;
}

/* Dark button */

.dark-button {
  background: #8C8C8C;
  border: 0;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 43px;
  padding: 4px;
  padding-left: 1em;
  padding-right: 1em;
  width: auto;
  min-width: 6rem;
  height: 50px;

  font-style: normal;
  font-weight: normal;
  font-size: 14px; /* Number 4 */
  line-height: 23px;
  text-align: center;
  color: #FFFFFF;
}

.dark-button:disabled {
  background: #646464;
  color: #fff;
  pointer-events: none;
}

.dark-button.outline {
  border: 1px solid #8C8C8C;
  background: transparent;
  color: #8C8C8C;
}

.dark-button:hover {
  background: #646464;
  color: #fff;
}

.dark-button:active {
  background: #494949;
}

.dark-button:focus {
  outline: unset !important;
}

/* White button */

.white-button {
  background: #FFFFFF;
  border: 1px solid #8C8C8C;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  border-radius: 43px;
  padding: 4px;
  padding-left: 1em;
  padding-right: 1em;
  width: auto;
  min-width: 6rem;
  height: 50px;

  font-style: normal;
  font-weight: normal;
  font-size: 14px; /* Number 4 */
  line-height: 23px;
  text-align: center;
  color: #5B5B5B;
}

.white-button:disabled {
  background: #E9E9E9;
  pointer-events: none;
}

.white-button:hover {
  background: #E9E9E9;
}

.white-button:active {
  background: rgb(211, 210, 210);
}

.white-button:focus {
  outline: unset !important;
}

/* New Insert Nav (navigation which guides user through new request insertion) */

.new-insert-nav {
  border-bottom: 1px solid #A4A4A4;
}

.new-insert-nav>div {
  margin-top: 1em !important;
  margin-bottom: 1em !important;
}

.new-insert-nav div.new-insert-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.new-insert-nav div.new-insert-nav-item div.circle {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  color: #A4A4A4;
  font-weight: 600;
  font-size: 20px;
  line-height: 17px;
  padding: 13px;
  background: #FFFFFF;
  border: 1px solid #A4A4A4;
  text-align: center;
}

.new-insert-nav div.new-insert-nav-item.active div.circle {
  background: #4368D8;
  color: white;
  border: unset;
}

.new-insert-nav div.new-insert-nav-item p {
  margin: 0;
  margin-left: 1rem;
  font-weight: 600;
  font-size: 15px;
  line-height: 25px;
  color: #606060;
}

.new-insert-nav div.new-insert-nav-item.active p {
  color: #1B1B1B;
}

/* Modern modal */

.modern-modal.small .modal-dialog {
  min-width: 30% !important;
}

.modern-modal .modal-dialog {
  min-width: 75%;
}

.modern-modal .modal-content {
  border-radius: 10px;
  border: 0;
}

.modern-modal .modal-header {
  background: #4368D8;
  padding-left: 35px;
  padding-right: 35px;
  padding-bottom: 1rem;
  height: 5rem;
  align-items: center;
}

.modern-modal .modal-header h1,
.modern-modal .modal-header h2,
.modern-modal .modal-header h3,
.modern-modal .modal-header h4,
.modern-modal .modal-header h5,
.modern-modal .modal-header h6 {
  font-weight: 600;
  font-size: 20px;
  line-height: 31px;
  color: #FFFFFF;
}

.modern-modal .modal-header button {
  opacity: 1;
  transform: rotate(45deg);
}

.modern-modal .modal-header .close:focus {
  outline: unset !important;
}

.modern-modal .modal-header button>span {
  font-weight: 300;
  font-size: 60px;
  line-height: 70px;
  color: #FFFFFF;
}

.modern-modal .modal-body {
  background: #fff;
  padding: 2.5rem;
}

.modern-modal .modal-body .form-row {
  margin-top: 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

.modern-modal .modal-body h5 {
  font-weight: 600;
  /* font-size: 15px; */
  line-height: 23px;
  color: #656565;
  margin-bottom: 10px !important;
}

.modern-modal .modal-body input[type="text"] {
  /* font-weight: 600; */
  /* font-size: 15px; */
  line-height: 19px;
  color: #3D4556;
  height: 38px;
}

.modern-modal .modal-body input[type="text"]::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  /* font-weight: 600; */
  /* font-size: 15px; */
  line-height: 19px;
  color: #D3D3D3;
  opacity: 1; /* Firefox */
}

.modern-modal .modal-body input[type="text"]:-ms-input-placeholder { /* Internet Explorer 10-11 */
  /* font-weight: 600; */
  /* font-size: 15px; */
  line-height: 19px;
  color: #D3D3D3;
}

.modern-modal .modal-body input[type="text"]::-ms-input-placeholder { /* Microsoft Edge */
  /* font-weight: 600; */
  /* font-size: 15px; */
  line-height: 19px;
  color: #D3D3D3;
}

.modern-modal .modal-body select {
  /* font-weight: 600; */
  /* font-size: 15px; */
  line-height: 19px;
  color: #3D4556;
}

.modern-modal .modal-footer {
  background: #fff;
  padding-bottom: 35px;
  justify-content: unset;
}

.important-message {
  font-weight: 600;
  font-size: 16px;
  line-height: 25px;
  color: #3D4556;
  margin-top: 2.5rem;
}

.mfp-no-margins img.mfp-img {
	padding: 0;
}
/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
	top: 0;
	bottom: 0;
}
/* padding for main container */
.mfp-no-margins .mfp-container {
	padding: 0;
}


.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
	opacity: 0;
	-webkit-backface-visibility: hidden;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
		opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
		opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
	opacity: 0;
}

.menu_text {
    border-radius: 50%;
    background-color:#ffffff;
    width: 28px;
    height: 28px;
    color: #4368d8;
    line-height: 28px;
}

.active .link-title .menu_text{
    border-radius: 50%;
    background-color:#4368d8;
    width: 28px;
    height: 28px;
    color: #ffffff;
    line-height: 28px;
}

li:hover .link-title .menu_text{
    border-radius: 50%;
    background-color:#4368d8;
    width: 28px;
    height: 28px;
    color: #ffffff;
    line-height: 28px;
}