body {
  background-color: black;
  color: white;
}

div.trafgrapher a {
  text-decoration: none;
  color: #F2FF00;
}
div.trafgrapher a:visited {
  color: #FFA500;
}

div.trafgrapher div, div.trafgrapher h2 {
  text-align: center;
}

div.trafgrapher div.graph {
  width: 100%;
  height: 400px;
  margin-left: auto;
  margin-right: auto;
}

div.trafgrapher div.graph200r {
  /* display: block; */
  width: 80%;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
}

div.trafgrapher div.footer {
  margin-top: 10pt;
  text-align: center;
  font-size: 10pt;
}

div.trafgrapher div.loader {
  position: absolute;
  width: 99%;
  height: 390px;
  /* border: 1px solid black; */
}

div.trafgrapher div.error, div.trafgrapher div.download {
  display: none;
  position: absolute;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

div.trafgrapher h1 {
  margin-top: 150px;
  text-align: center;
}

div.trafgrapher ul {
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  list-style: none;
  column-width: 18em;
}

div.trafgrapher ul li {
  border: 2px solid transparent;
  margin: 1px;
  width: 18em;
}

div.trafgrapher ul li input {
  margin-right: .25em;
}

div.trafgrapher ul li div {
  display: inline-block;
  border: 1px solid transparent;
  margin: 1px;
  width: 17px;
  height: 17px;
}

div.trafgrapher input.right {
  text-align: right;
}

div.trafgrapher div.info {
  display: none;
  text-align: center;
}

div.trafgrapher div.info table {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

div.trafgrapher table {
  border: 0px;
  margin: 0px;
  padding: 0px;
}

div.trafgrapher table tr td {
  vertical-align: top;
  text-align: left;
  padding: 0px;
  margin: 0px;
}

div.tooltip {
  position: absolute;
  display: none;
  border: 1px solid #333;
  background-color: #111;
  padding: 2px;
  opacity: 0.70;
}

.flot-text {
  color: #eee !important;
}

/* menu buttons */
div.trafgrapher input,
div.trafgrapher select,
div.trafgrapher button {
  height: 22pt;
  min-width: 20pt;
  margin: 2px 0px 1px 0px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0px 0px 1px #aaa;
  background-color: #111;
  color: white;
  background-repeat: no-repeat;
  background-position: center;
  appearance: none;
}
div.trafgrapher select {
  background-position: right;
  padding-left: 2pt;
  padding-right: 12pt;
}
div.trafgrapher input[type="checkbox"] {
  height: 15px;
  width: 15px;
  min-height: auto;
  min-width: auto;
  padding: 0;
}
div.noscroll {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
  padding-bottom: 2pt;
  background-color: black;
}

/* generated images */
div.trafgrapher input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M 1 5 l 3 3 l 5 -6' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
div.trafgrapher button.b_reload {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M 15 12 A 5 5 0 1 1 15 8 h -4 m 4 0 v -4' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
div.trafgrapher button.b_select_all {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect x='2' y='2' width='16' height='16' rx='4' ry='4' stroke='white' stroke-width='2' fill='%23aaa'/%3E%3C/svg%3E");
}
div.trafgrapher div.selection select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M 4 7 L 10 13 L 16 7' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
div.trafgrapher button.b_select_invert {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cdefs%3E%3Cmask id='half' x='0' y='0' width='20' height='20'%3E%3Cpolygon points='0,0 20,0 0,20' fill='white'/%3E%3C/mask%3E%3C/defs%3E%3Cg stroke='white' stroke-width='2'%3E%3Crect x='2' y='2' width='16' height='16' rx='4' ry='4' fill='none'/%3E%3Crect x='2' y='2' width='16' height='16' rx='4' ry='4' fill='%23aaa' mask='url(%23half)'/%3E%3Cline x1='17' y1='3' x2='3' y2='17'/%3E%3C/g%3E%3C/svg%3E");
}
div.trafgrapher button.b_select_none {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect x='2' y='2' width='16' height='16' rx='4' ry='4' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}
div.trafgrapher button.b_select_zero {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect x='2' y='2' width='16' height='16' rx='4' ry='4' stroke='white' stroke-width='2' fill='none'/%3E%3Ctext x='10' y='13' fill='white' font-weight='normal' font-family='sans-serif' font-size='8' text-anchor='middle'%3E=0%3C/text%3E%3C/svg%3E");
}
div.trafgrapher button.b_urllink {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M 4 5 L 16 5 l -4 -3 M 16 5 l -4 3' transform='rotate(-20 10 7)' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ctext x='10' y='18' fill='white' font-weight='bold' font-family='sans-serif' font-size='8' text-anchor='middle'%3EURL%3C/text%3E%3C/svg%3E");
}
div.trafgrapher button.b_zoom_out {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cg stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='5' fill='none'/%3E%3Cline x1='11' y1='11' x2='17' y2='17'/%3E%3Cline x1='5' y1='7' x2='9' y2='7' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
}