/* Always set the map height explicitly to define the size of the div
* element that contains the map. */

.type-control {
  font-size: 14px;
  line-height: 30px;
  padding-left: 5px;
  padding-right: 5px;
}

.map-control {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
  font-family: 'Roboto','sans-serif';
  margin: 10px;
  /* Hide the control initially, to prevent it from appearing
     before the map loads. */
  display: none;
}
/* Display the control once it is inside the map. */
#map .map-control { display: block; }


#visualization {
    width: 100%;
    height: 600px;
    position: relative;
}

#legendcontainer {
  position: absolute;
}

#legend {
  margin-top: 80px;
  text-align: center;
}

#timeoptions {
  margin: auto;
  margin-bottom: -40px;
}

#months, #years {
  text-align: center;
  padding: 1px;
}

#timeline {
  text-align: center;
}

input[type=range] {
  width: 100%;
}

#map {
	height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html, body {
	height: 100%;
}

.overlay, .overlay svg {
  position: absolute;
  pointer-events: none;
}

.overlay svg {
  width: 60px;
  padding-right: 100px;
  font: 10px sans-serif;
}

.overlay circle {
  stroke: black;
  stroke-width: 1.5px;
  cursor: pointer;
  pointer-events: all;
}

.tooltip {
  position: absolute;
  line-height: .7;
  font-weight: bold;
  padding: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-weight: bold;
  font: 11.5px sans-serif;
  border-radius: 2px;
  pointer-events: none;    
}

#gradient {
    height: 20px;
    width: 250px;
    margin:auto;
    background: -webkit-linear-gradient(left, #F8EE3A,#EFCC38,#E7AA37,#DF8836,#D76635,#CF4434,#C72233,#BF0032); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #F8EE3A,#EFCC38,#E7AA37,#DF8836,#D76635,#CF4434,#C72233,#BF0032); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #F8EE3A,#EFCC38,#E7AA37,#DF8836,#D76635,#CF4434,#C72233,#BF0032); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #F8EE3A,#EFCC38,#E7AA37,#DF8836,#D76635,#CF4434,#C72233,#BF0032); /* Standard syntax (must be last) */
}

/* TIMELINE STUFF */
.timeline-selector-cont {
    text-align: center;
}

.timeline-selector-cont svg {
    height: 60px;
    width: 100%;
    /*This goes here because SVG uses em as units*/
    font: normal 9pt sans-serif;
}
.timeline-selector-cont svg g line {
    stroke: #ac8ed4;
    stroke-width: 4px;
}
.timeline-selector-cont svg g.active line
/*.timeline-selector-cont svg g.active ~ g line*/ {
    stroke: #ac8ed4;
}
.timeline-selector-cont svg g circle {
    fill: #ac8ed4;
}
.timeline-selector-cont svg g.active circle
/*.timeline-selector-cont svg g.active ~ g circle*/ {
    fill: #4b2e83;
}
.timeline-selector-cont svg g text {
    fill: #FFF;
    text-anchor: middle;
    dominant-baseline: central;
}
.timeline-selector-cont svg g.active text
/*.timeline-selector-cont svg g.active ~ g text*/ {
    fill: #FFF;
}
/* Make the active group bigger*/
.timeline-selector-cont svg g.active {
    font-size: 1.75em;
}
/* Use 'pointer' cursor*/
.timeline-selector-cont svg g circle,
.timeline-selector-cont svg g text {
    cursor: pointer;
}




/*Radial Graph*/
#ts-cont {
    position: relative;
    height: 350px;
    pointer-events: none;
}

.radial-graph {
    pointer-events: all;
    user-select: none;
}

.radial-graph text {
    font-size: 8pt;
}

.radial-tooltip {
    user-select: none;
    position: absolute;
    display: none;
    width: auto;
    height: auto;
    background: none repeat scroll 0 0 white;
    border: 0 none;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    color: black;
    font: 12px sans-serif;
    padding: 5px;
    text-align: center;
}

.radial-overlay {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    /*background-color: rgba(255, 0, 0, 0.1);*/
}
 
.frame {
    fill: none;
    stroke: #000;
}

.axis text {
    font: 10px sans-serif;
}

.axis line,
.axis circle {
    fill: none;
    stroke: #777;
    stroke-dasharray: 1,4;
}

.axis :last-of-type circle {
    stroke: #333;
    stroke-dasharray: none;
}

.line {
    fill: none;
    stroke: red;
    stroke-width: 1.5px;
}



/*Legends*/
#map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}



/*Controls*/
#input-view {
    width: 40px;
}

.control-header {
    margin-right: 10px;
}

.control-label {
    margin-right: 10px;
    font-size: 14px;
}

.control-sublist {
    list-style: none;
}

.bootstrap-switch {
    float: right;
}