html, body {
  background-color: #000;
  height: 100%;
}

div.height1 {
  height: 10%;
}
div.height2 {
  height: 16.5%;
}
div.height3 {
  height: 33%;
}
div.height4 {
  height: 50%;
}
div.height6 {
  height: 66%;
}

div.graphsrv.overview {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
}

div.graphsrv.overview div.container-fluid {
  height: 100%;
}

div.graphsrv.overview div.row>div {
  background-color: #000;
  height: 100%;
  padding: 3px;
}

div.graphsrv.overview div.overview-file {
  white-space:pre;
  color: #fff;
  font-size: 12px;
  padding-top: 10px;
}

div.graphsrv.overview div.graph-label {
  text-align: center;
  font-size: 12px;
  padding: 3px;
}

div.graphsrv.overview div.graph-label a {
  text-decoration: underline;
  padding: 2px 5px 2px 5px;
  display: inline-block;
  background-color: #818182;
  border-radius: 5px;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

div.graphsrv.overview div.empty {
  padding-top: 10%;
  color: #666;
  font-size: 150%;
  text-align: center;
  height: 100%;
  width: 100%;
  background-color: #151515;
  border-radius: 5px;
}

@keyframes status_indicator_anim {
  0% {opacity:1.0;}
  50% {opacity:0.5;}
  100% {opacity:1.0;}
}

div.graphsrv.overview div.status-indicator {
  position: absolute;
  left: 0px;
  right: 65px;
  top: 5px;
  bottom: 40px;
  font-size: 12px;
  color: red;
  font-weight: bold;
  text-align: right;
  padding-top: 10px;
  padding-right: 10px;
  text-shadow: 0px 0px 5px #000;
  z-index: 1000;
  border-right: 3px red solid
}

div.graphsrv.overview div.status-indicator.visible {
  animation-name: status_indicator_anim;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

svg text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: start;
}

svg text.label {
  font-size: 12px;
}

svg .axis line,
svg .axis path {
  fill: none;
  stroke: #aaa;
  shape-rendering: crispEdges;
}

svg .axis.error text {
  fill: red;
}

svg .axis.error line,
svg .axis.error path {
  stroke: red;
}


svg .axis.historic text {
  fill: orange;
}

svg .axis.historic line,
svg .axis.historic path {
  stroke: orange;
}


svg .x.axis text {
  text-anchor: middle;
}

svg .y.axis text {
  text-anchor: end;
}

svg .y.axis.right text {
  text-anchor: start;
}

svg rect.background {
  fill: #2b2b2b;
}


svg.mtr rect.avg-line {
  fill: orange;
}

svg.mtr rect.loss {
  fill: red;
}

svg.mtr text.loss {
  fill: red;
}

svg.multitarget g.data path {
  fill: none;
  stroke: steelblue;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-wdith: 3.5;
}

svg g.data-feed-stopped text {
  fill: red;
  text-anchor:middle;
  font: 16px sans-serif;
}

div.graphsrv-popover {
  background-color: #000;
  border: 1px #666 solid;
  color: #999;
  padding: 3px;
}

div.graphsrv-popover p {
  margin: 0px;
}

div.graphsrv-popover h1 {
  font-size: 15px;
  margin:0px;
}