#svg {
  font: 10px sans-serif;
}

path.plan, path.metric {
    stroke-width: 2;
}

.background path {
  fill: none;
  stroke: #ddd;
  shape-rendering: crispEdges;
}

.foreground path {
  fill: none;
  cursor: pointer;
}

.foreground .one {
  stroke: steelblue;
}

.foreground .two {
  stroke: #990012;
}

.foreground .three {
  stroke: Moccasin;
}

/*.foreground path:hover {
  stroke-width:3;
  stroke: black;
}*/

.hover {
  stroke-width:3;
  stroke: orange;
}
.hover-dark {
  stroke-width:3;
  stroke: #000000;
  stroke-dasharray: 3;
}

.brush .extent {
  fill-opacity: .3;
  stroke: #fff;
  shape-rendering: crispEdges;
}

.axis line,
.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
  stroke-width: 3px;
}

.axis text {
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
  cursor: move;
}

.axis .heading {
    font-size: 12pt;
}

div.buttonbar {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid;
    border-color: #e7e7e7;
    padding: 5px;
}

/*filters*/
td.options{
    padding-top: 1ex;
    vertical-align: top;
}
td.options label{
    display:block;
    margin-top: 1ex;
    margin-bottom: 1ex;
}
td.options .do-filter{
    margin-top: 1ex;
    margin-bottom: 1ex;
    display:block;
    width: 75%;
}

#filtermenu>* {
    display:block;
}

#notes{
    border-top: 1px solid;
    border-color: #e7e7e7;
    padding: 5px;
}


div.svg-tooltip {
    position: absolute;
    text-align: center;
    padding: 2px;
    font: 12px sans-serif;
    background: white;
    border: 0px;
    border-radius: 8px;
    pointer-events: none;
}

.svg-tooltip table{
  background: white;
  text-align: left;
  margin-bottom: 0px;
}
.svg-tooltip table tr{
  padding: 0px;
  margin: 0px;
}

#new-note-btn {
    float:right;
}

#notes ul {
    font-size: x-small;
    max-height: 300px;
    overflow:scroll;
}

#notes li:hover {
    background: #f3f3f3;
}

#notes .noteheading {
    margin-top: 5px;
    margin-bottom: 10px;
}
#notes .noteheading h3 {
    display: inline;
}

.options .filterheading{
    border-bottom: 1px solid;
    border-color: #e7e7e7;
    padding: 5px;
}

.options h3:not('.popover-title h3') {
    display: inline-block;
}

h1 {
  display: inline-block;
}

.hidden {
    display:none;
}

.control.glyphicon {
  position: static;
}
.arrow-container {
    display: inline-block;
    float:right;
}

/*Table*/
#grid{
    width: 100%;
}
#grid .highlighted{
    background: orange !important;
}

#grid tbody, #grid thead{
    display: block;
}

#grid tbody{
    height: 350px;
    overflow-y: scroll;
}

.buttonbar a{
    color: #fff;
}

#legend-container{
    padding: 1.5em 0 0 1.5em;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    vertical-align: middle;
}
#legend {
    display: flex;
    display: -webkit-flex;
}

#legend div.key {
    height: 20px;
    width: 100px;
    margin: 0px;
}
#legend-container div.lower {
    float: left;
}

#legend-container div.upper {
    float: right;
}

/*Make the drop-downs in the menu the same width*/
.options .btn-group,
.options .multiselect.dropdown-toggle,
.options .bootstrap-select{
    width: 100% !important;
}


.options .multiselect.dropdown-toggle{
    padding-right: 20px;
}
.options .multiselect-selected-text,
.options .filter-option{
    width: 100%;
    display: inline-block;
    text-align: left;
}
.options .multiselect-selected-text{
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.multiselect-container.dropdown-menu{
    max-height: 400px;
    overflow-y: scroll;
}