/* === DARK MODE STYLES === */

/* === CONTAINER === */

.statistic__container {
  background-color: #282828;
}

/* === DATEPICKER === */

.statistic__datepicker {
  border-bottom: 1px solid #333333;
}

.statistic__datepicker input {
  background: #333333;
  border: 1px solid #555;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}

#statistic__search {
  background: #333333;
  border: 1px solid #555;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

/* === UI DATEPICKER jQuery === */

.ui-datepicker {
  background-color: #282828;
  border: 1px solid #d5d5d5;
}

.ui-datepicker-today {
  background: #CD3844;
}

.ui-datepicker a:active,
.ui-datepicker a:hover,
.ui-datepicker a:visited {
  color: #ccc;
}

/* === TABS === */

.nav-tabs {
  background-color: #333333;
  border-bottom: 1px solid #333333;
}

.nav-tabs > li > a {
  background-color: #3D3D3D;
}

.nav-tabs > li.active > a {
  background-color: #282828;
  border: 1px solid #282828;
  color: #DCDCDC;
}

.nav-tabs > li > a:hover {
  background-color: #4A4443;
  border: 1px solid #4A4443;
  color: #DCDCDC;
  cursor: pointer;
}

.nav-tabs > li.active > a:hover {
  background-color: #282828;
  border: 1px solid #282828;
  color: #DCDCDC;
  cursor: pointer;
}

/* === Worker table TOGGLE === */

.worker__toggle-visibility {
  color: rgb(213, 213, 213);
  background: inherit;
  border: 1px solid rgb(102, 102, 102);
}

.worker__toggle-visibility:hover {
  background:rgb(153, 153, 153);
  border: 1px solid rgb(153, 153, 153);
}

.worker__toggle-visibility:active {
  background: rgba(0, 0, 0, 0.1);
}

.worker__toggle-visibility:focus,
.worker__toggle-visibility:active {
  outline: none !important;
  box-shadow: none;
}

/* === Worker page LOGS === */

.statistic__log > input[type=text] {
  background: #333333;
  border: 1px solid #555;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}

/* === CHART C3.js === */

.c3 svg {
  background-color: #555;
}

.c3 line,
.c3 path {
  fill: none;
  stroke: #FFF;
}

.tick text {
  fill: #FFF;
}

.c3-legend-item text { fill: #FFF; }
