body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 960px;
  height: 500px;
  position: relative;
}

#header {
    background-color: #476583;
    color: white;
    border-color: white;
    border-style: solid;
    border-radius: 10px;
    border-width: 3px;
    }

#textA {
    color: #CDDAF4;
}

#dataDiv {
    background-color: white;
    border-color: skyblue;
    border-style: solid;
    border-radius: 10px;
    border-width: 3px;
}

#pieChartContainer {
    height: 120px; 
    width: 100%;
    margin: auto;
}

#bar1ChartContainer {
    height: 210px; 
    width: 100%;
    margin: auto;
}

#bar2ChartContainer {
    height: 80px; 
    width: 100%;
    margin: auto;
}

#bar3ChartContainer {
    height: 100px; 
    width: 100%;
    margin: auto;
}

#canvas-svg {
    height: 360px;
    /*background-color: #2C2C2C;
    border-color: skyblue;
    border-style: solid;
    border-radius: 10px;
    border-width: 3px;*/
}

.states {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
}

.states-choropleth {
  fill: #ccc;
}

#tooltip-container {
  position: absolute;
  background-color: #fff;
  color: #000;
  padding: 10px;
  display: none;
}

.tooltip_key {
  font-weight: bold;
}

.tooltip_value {
  margin-left: 20px;
  float: right;
}

.option-select {
    fill: #64b646;
    width: auto;
    color: black;
}

#stateA {
    display: inline-block;
    color: white;
}

#stateB {
    display: inline-block;
    color: skyblue;
}

hr {
    color: skyblue;
}