#custom-handle {
  width: 3em;
  height: 1.6em;
  top: 50%;
  margin-top: -.8em;
  text-align: center;
  line-height: 1.6em;
}
#mapArea {
  height: 100%;
  width: 60%;
  float: left;
}
#graphArea {
  height: 500px;
  width: 40%;
  float: left;
}
#visualization {
    height: 95%;
    width: 100%;
    border-bottom-color: black;
    background: black;
    background-size: cover;
}
.radialDial {
    stroke-width:2;
    stroke: #cccccc;
    fill:none;
}

.v1, .v2 {
    stroke-width:3;
}

.v1 {
    stroke:#0CB4FF;
}

.v2 {
    stroke:#00DEC7;
}
p.legend {
    margin:10px 0px 0px 0px;
}

i.legendIncidenceAngle {
    color:#ffff00;
}

i.legendEmissionAngle {
    color:#00ffff;
}
i.legendXAxis {
    color:#00ff00;
}
i.legendYAxis {
    color:#0000ff;
}
i.legendZAxis {
    color:#ff0000;
}
.label {
  color: #FFF;
  font-family: sans-serif;
  padding: 2px;
  background: rgba( 0, 0, 0, 0 );
}
.pm_row:hover {
  cursor: pointer;
}
.pm_row.pm_row_highlight:hover {
  cursor: default;
}
.pm_row_highlight {
  background-color: #aaaaaa;
  color: #222222;
}
.pm_column_highlight {
  background-color: #666666;
  color: #222222;
}
i.arrow {
  border-style: solid;
  display: inline-block;
  padding: 3px;
  margin: 2px 3px 2px 3px;
  cursor: pointer;
}
i.active {
  border-color: #f5ead9;
  border-width: 0 3px 3px 0;
}
i.inactive {
  border-color: #958a79;
  border-width: 0 1px 1px 0;
}
i.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
i.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}