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

body {
  font-family: 'Poppins', sans-serif;
  padding-top: 70px;
}

body[data-theme="dark"] {
  background-color: black;
}

.navbar {
  background-color: #202226!important;
}

.widget {
  cursor: pointer;
  width: 360px;
  max-height: 365px;
}

body[data-theme="dark"] .widget {
  background-color: #141619;
}

body[data-theme="dark"] .widget-action-close {
  color: #999;
}

.widget-optimal-width {
  width: 10px;
  white-space: nowrap;
}

body[data-theme="dark"] .widget-header {
  color: white;
  background-color: #202226;
}

.widget-header .widget-title {
  overflow: hidden;
  font-size: 14px;
  height: 21px;
  word-break: break-all;
}

.widget-header .widget-sub-title {
  overflow: hidden;
  font-size: 12px;
  font-weight: 300;
  height: 18px;
  word-break: break-all;
}

.widget-body {
  overflow: auto;
  font-size: 12px;
  font-weight: 300;
  height: 100%;
}

.widget-body .widget-table tr {
  vertical-align: top;
}

.widget-body .widget-table td, .widget-body .widget-table th {
  padding: 3px;
  white-space: nowrap;
}

body[data-theme="dark"] .widget-body .widget-table td {
  color: #999;
  border-color: #555;
}

body[data-theme="dark"] .widget-body .widget-table th {
  color: #999;
  border-color: #555;
  background-color: #343a40;
}

body[data-theme="dark"] .widget-body {
  color: #999;
}

body[data-theme="dark"] .widget-footer {
  color: white;
  background-color: #202226;
}

body[data-theme="dark"] .widget-body .c3-chart-arc .c3-gauge-value {
  fill: #999;
}

body[data-theme="dark"] .widget-body .c3-chart-arcs .c3-chart-arcs-gauge-min {
  fill: #999;
}

body[data-theme="dark"] .widget-body .c3-chart-arcs .c3-chart-arcs-gauge-max {
  fill: #999;
}

body[data-theme="dark"] .widget-body .c3-chart-arcs .c3-chart-arcs-background {
  fill: #333;
  stroke: #444;
}

body[data-theme="dark"] .widget-body .c3-chart-arcs .c3-chart-arc path {
  stroke: #AAA;
}

body[data-theme="dark"] .widget-body .c3-axis {
  stroke: #AAA;
}

body[data-theme="dark"] .widget-body .c3-grid line {
  stroke: #333;
  stroke-dasharray: 0 0;
}

.widget-body .c3-grid line {
  stroke: #DDD;
  stroke-dasharray: 0 0;
}

body[data-theme="dark"] .widget-body .c3-legend-item {
  fill: #999;
}

.widget-footer .widget-footer-title, .widget-footer .widget-footer-sub-title, .widget-footer .widget-footer-tags {
  overflow: hidden;
  font-size: 12px;
  height: 18px;
  word-break: break-all;
}

.widget-footer .widget-footer-tags {
  margin-left: 6px;
  font-weight: normal;
  background-color: darkslategray;
  padding-left: 6px;
  padding-right: 6px;
  border-radius: 3px;
  color: white;
}

.widget-detached {
  position: fixed;
  top: 80px;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
  z-index: 1075;
  left: 50%;
  margin-left: -350px;
  width: 700px;
  max-height: 638px;
  height: 638px;
}

.widget-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
  transition: opacity .15s linear;
  opacity: 0.5;
  background-color: #444;
}

.widget-action-close {
  display: none;
}

.widget-detached .widget-action-close {
  display: inline;
}

body.widget-detached-activated .widget-backdrop {
  display: inline;
}

@media (max-width: 540px) {
  .widget-detached {
    left: 10px;
    right: 10px;
    margin: 0!important;
    width: initial;
  }
}

.hub-disconnected i {
  color: red;
}

.hub-connected i {
  color: green;
}