@import "https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900";

/*

HOW TO CUSTOMIZE COLORS

Replace all Main Colors: #000000

Peplace all Secondary Colors: #5e5e5e

*/

.preloader {
  width: 100%;
  height: 100%;
  top: 0;
  position: fixed;
  z-index: 99999;
  background: #fff;
}
.preloader .cssload-speeding-wheel {
  position: absolute;
  top: calc(50% - 3.5px);
  left: calc(50% - 3.5px);
}
#side-menu i {
  margin: 0 10px 0 5px;
  font-size: 18px;
}
.logo i {
  color: #fff;
}
.top-left-part .light-logo {
  display: inline-block;
}
.top-left-part .dark-logo {
  display: none;
}
.navbar-header {
  background: #000000; /*MAIN*/
}
.navbar-top-links > li > a {
  color: #fff;
}

/*Right Sidebar Icons Clicked*/
.right-sidebar .rpanel-title {
  background: #5e5e5e; /*SECONDARY*/
}
.bg-title .breadcrumb .active {
  color: #5e5e5e; /*SECONDARY*/
}
.sidebar {
  background: #fff;
  box-shadow: 1px 0 20px rgba(0, 0, 0, 0.08);
}
.sidebar .label-custom {
  background: #00b5c2; /*Teal*/
}
#side-menu li a {
  color: #000000; /*MAIN*/
  border-left: 0 solid #fff;
}
#side-menu li a span {
  color: #333;
}
#side-menu > li > a:focus,
#side-menu > li > a:hover {
  background: rgba(0, 0, 0, 0.03);
}
#side-menu > li > a.active {
  border-left: 3px solid #5e5e5e; /*SECONDARY*/
  color: #3e4d6c;
  font-weight: 500;
  background: #eff0f7;
}
#side-menu ul > li > a:hover,
#side-menu > li > a.active i {
  color: #5e5e5e; /*SECONDARY*/
}
#side-menu ul > li > a.active {
  color: #3e4d6c;
  font-weight: 500;
}
.sidebar #side-menu .user-pro .nav-second-level a:hover {
  color: #5e5e5e; /*SECONDARY*/
}
.bg-theme {
  background-color: #5e5e5e !important; /*SECONDARY*/
}
.bg-theme-dark {
  background-color: #00b5c2 !important; /*Teal*/
}
.chat-list .odd .chat-text {
  background: #5e5e5e; /*SECONDARY*/
}
.btn-custom {
  background: #5e5e5e; /*SECONDARY*/
  border: 1px solid #5e5e5e; /*SECONDARY*/
  color: #fff;
}
.btn-custom:hover {
  background: #5e5e5e; /*SECONDARY*/
  opacity: 0.8;
  color: #fff;
  border: 1px solid #5e5e5e; /*SECONDARY*/
}
.customtab li.active a,
.customtab li.active a:focus,
.customtab li.active a:hover {
  border-bottom: 2px solid #5e5e5e; /*SECONDARY*/
  color: #5e5e5e; /*SECONDARY*/
}
.tabs-vertical li.active a,
.tabs-vertical li.active a:focus,
.tabs-vertical li.active a:hover {
  background: #5e5e5e; /*SECONDARY*/
  border-right: 2px solid #5e5e5e; /*SECONDARY*/
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
  background: #5e5e5e; /*SECONDARY*/
  color: #fff;
}

.top-bar {
  background-color: #000000; /*MAIN*/
}

.button2 {
  background-color: #000000; /*MAIN*/
  border-color: #000000; /*MAIN*/
}

.button2:hover {
  background-color: #000000; /*MAIN*/
  border-color: #000000; /*MAIN*/
}

.button2:focus {
  background-color: #000000; /*MAIN*/
  border-color: #000000; /*MAIN*/
}

.button2:active {
  background-color: #000000; /*MAIN*/
  border-color: #000000; /*MAIN*/
}

.button4 {
  background-color: #000000; /*MAIN*/
  border-color: #000000; /*MAIN*/
}

.button4:hover {
  background-color: #000000; /*MAIN*/
  border-color: #000000; /*MAIN*/
}

.button4:focus {
  background-color: #000000; /*MAIN*/
  border-color: #000000; /*MAIN*/
}

.button4:active {
  background-color: #000000; /*MAIN*/
  border-color: #000000; /*MAIN*/
}

/*Custom Button*/
.btn-custom {
  color: #fff;
  background-color: #000000;
  border-color: #000000;
}
.btn-custom.focus,
.btn-custom:focus {
  color: #fff;
  background-color: #000000;
  border-color: #000000;
}
.btn-custom:hover {
  color: #fff;
  background-color: #000000;
  border-color: #000000;
}
.btn-custom.active,
.btn-custom:active,
.open > .dropdown-toggle.btn-custom {
  color: #fff;
  background-color: #000000;
  border-color: #000000;
}
.btn-custom.active.focus,
.btn-custom.active:focus,
.btn-custom.active:hover,
.btn-custom:active.focus,
.btn-custom:active:focus,
.btn-custom:active:hover,
.open > .dropdown-toggle.btn-custom.focus,
.open > .dropdown-toggle.btn-custom:focus,
.open > .dropdown-toggle.btn-custom:hover {
  color: #fff;
  background-color: #000000;
  border-color: #000000;
}
.btn-custom.active,
.btn-custom:active,
.open > .dropdown-toggle.btn-custom {
  background-image: none;
}
.btn-custom.disabled.focus,
.btn-custom.disabled:focus,
.btn-custom.disabled:hover,
.btn-custom[disabled].focus,
.btn-custom[disabled]:focus,
.btn-custom[disabled]:hover,
fieldset[disabled] .btn-custom.focus,
fieldset[disabled] .btn-custom:focus,
fieldset[disabled] .btn-custom:hover {
  background-color: #000000;
  border-color: #000000;
}

/* Tabs Style Underline History + Settings Tabs, SECONDARY*/
.tabs-style-underline nav {
  border: 1px solid rgba(120, 130, 140, 0.21);
}
.tabs-style-underline nav a {
  padding: 20px 0;
  border-left: 1px solid rgba(120, 130, 140, 0.21);
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
  color: #3e4d6c;
}
.tabs-style-underline nav li:last-child a {
  border-right: 1px solid rgba(120, 130, 140, 0.21);
}
.tabs-style-underline nav li a::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: #5e5e5e;
  content: "";
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform: translate3d(0, 150%, 0);
  transform: translate3d(0, 150%, 0);
}
.tabs-style-underline nav li.tab-current a::after {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.sttabs nav li.tab-current a {
  color: #5e5e5e;
}

/*Blue Button*/
.btn-blue {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}
.btn-blue.focus,
.btn-blue:focus {
  color: #fff;
  background-color: #286090;
  border-color: #122b40;
}
.btn-blue:hover {
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
}
.btn-blue.active,
.btn-blue:active,
.open > .dropdown-toggle.btn-blue {
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
}
.btn-blue.active.focus,
.btn-blue.active:focus,
.btn-blue.active:hover,
.btn-blue:active.focus,
.btn-blue:active:focus,
.btn-blue:active:hover,
.open > .dropdown-toggle.btn-blue.focus,
.open > .dropdown-toggle.btn-blue:focus,
.open > .dropdown-toggle.btn-blue:hover {
  color: #fff;
  background-color: #204d74;
  border-color: #122b40;
}
.btn-blue.active,
.btn-blue:active,
.open > .dropdown-toggle.btn-blue {
  background-image: none;
}
.btn-blue.disabled.focus,
.btn-blue.disabled:focus,
.btn-blue.disabled:hover,
.btn-blue[disabled].focus,
.btn-blue[disabled]:focus,
.btn-blue[disabled]:hover,
fieldset[disabled] .btn-blue.focus,
fieldset[disabled] .btn-blue:focus,
fieldset[disabled] .btn-blue:hover {
  background-color: #337ab7;
  border-color: #2e6da4;
}

/*Green Button*/
.btn-green {
  color: #fff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}
.btn-green.focus,
.btn-green:focus {
  color: #fff;
  background-color: #449d44;
  border-color: #255625;
}
.btn-green:hover {
  color: #fff;
  background-color: #449d44;
  border-color: #398439;
}
.btn-green.active,
.btn-green:active,
.open > .dropdown-toggle.btn-green {
  color: #fff;
  background-color: #449d44;
  border-color: #398439;
}
.btn-green.active.focus,
.btn-green.active:focus,
.btn-green.active:hover,
.btn-green:active.focus,
.btn-green:active:focus,
.btn-green:active:hover,
.open > .dropdown-toggle.btn-green.focus,
.open > .dropdown-toggle.btn-green:focus,
.open > .dropdown-toggle.btn-green:hover {
  color: #fff;
  background-color: #398439;
  border-color: #255625;
}
.btn-green.active,
.btn-green:active,
.open > .dropdown-toggle.btn-green {
  background-image: none;
}
.btn-green.disabled.focus,
.btn-green.disabled:focus,
.btn-green.disabled:hover,
.btn-green[disabled].focus,
.btn-green[disabled]:focus,
.btn-green[disabled]:hover,
fieldset[disabled] .btn-green.focus,
fieldset[disabled] .btn-green:focus,
fieldset[disabled] .btn-green:hover {
  background-color: #5cb85c;
  border-color: #4cae4c;
}

/*Process Tabs*/
.wizard-steps > li.current,
.wizard-steps > li.done {
  background: #337ab7;
  color: #fff;
}
.wizard-steps > li.current span,
.wizard-steps > li.done span {
  border-color: #fff;
  color: #fff;
}
.wizard-steps > li.current h4,
.wizard-steps > li.done h4 {
  color: #fff;
}
.wizard-steps > li.done {
  background: #5cb85c;
}
.wizard-steps > li.error {
  background: #8c2d2d;
}
.wiz-aco .pager {
  margin: 0;
}

/*Checkbox*/
.checkbox-green input[type="checkbox"]:checked + label::before {
  background-color: #5cb85c;
  border-color: #5cb85c;
}
.checkbox-green input[type="checkbox"]:checked + label::after {
  color: #fff;
}

.text-success {
  color: #5cb85c;
}
.text-danger {
  color: #c15959;
}

.has-success .form-control {
  border-color: #5cb85c;
  box-shadow: none !important;
}

/* Tabs Style Bar #5e5e5e, BLUE*/
.tabs-style-bar nav ul li a {
  margin: 0 2px;
  background-color: #f7fafc;
  color: #686868;
  padding: 5px 0;
  transition: background-color 0.2s, color 0.2s;
}
.tabs-style-bar nav ul li a:focus,
.tabs-style-bar nav ul li a:hover {
  color: #337ab7;
}
.tabs-style-bar nav ul li a span {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 14px;
  font-family: Poppins, sans-serif;
}
.tabs-style-bar nav ul li.tab-current a {
  background: #337ab7;
  color: #fff;
}