html, body {
  font-family: 'Prompt', Helvetica, sans-serif;
  font-weight: 200;
  height: 100%;
  width: 100%;
  margin: 0;
}

body {
  position: relative;
}

section {
  color: black;
  height: 100%;
  /* padding-top: 10%; */
}

h1,h2 {
  background-color: #6A5D93;
  color: white;
  display: inline-block;
  font-weight: 200;
  margin: 2px;
  margin-right: 10px;
  padding: 8px 24px 8px 24px;
}

h1 {
  font-size: 48px;
  line-height: 48px;
  margin-right: 60px;
}

h2 {
  font-size: 36px;
  line-height: 36px;
}

.axis path,
.axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

.line {
  stroke: black;
  stroke-width: 1;
  fill: none;
}

.hidden {
  display: none;
}

.inline-block {
  display: inline-block;
}

#plot-area {
  /* background-color: #fff3d9; */
  height: 100%;
  position: fixed;
  right: 40px;
  width: 50%;
}

.sections {
  height: 100%;
  pointer-events: none;
  position: absolute;
  left: 40px;
  width: 35%;
}

.sections-expanded{
   width: 150%; 
}

.content, .footnote {
  box-sizing: border-box;
  background-color: rgba(243,239,231,0.9);
  padding: 28px 24px;
  margin-top: 32px;
  width: 90%;
}

.content, .footnote {
  border-left: 4px solid #6A5D93;
  font-size: 24px;
  font-weight: 400;
}

.footnote {
  border-left: 4px solid #f2be1a;
  font-size: 18px;
  font-weight: 200;
}

.content.interactive-content {
  pointer-events: auto;
}

.icon {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 48px;
  height: 48px;
  vertical-align: text-bottom;
  margin-left: -52px;
}

#district-field-radios label{
  display: inline-block;
  width: 220px;
  font-size: 0.95em;
}

.interactive-content small{
  display: block;
  margin-top: 10px;
}

#district-field-radios input[type=radio]{
  vertical-align: middle;
  margin-bottom: 5px;
}

.district-base path {
  fill: none;
  stroke: rgba(50,160,134,0.5);
  stroke-width: 6px;
  stroke-linejoin: round;
  pointer-events: none;
}

.district {
  fill: rgba(50,160,134,0.25);
  stroke: rgba(50,160,134,0.5);
  stroke-width: 1px;
  stroke-linejoin: round;
  cursor: pointer;
}

.orange {
  color: #f15a22;
}

.blue {
  color: #0071ae;
}

.green {
  color: #00a05b;
}

.red {
  color: #c9252c;
}

.pink {
  color: #da3e7b;
}

.yellow {
  color: #f2be1a;
}

.white {
	color: #ffffff;
}


.point {
  fill: #444;
  stroke: #444;
  stroke-width: 3px;
  stroke-opacity: 0.5;
  cursor: pointer;
}

#popup {
  position: relative;
}

.popupContent {
  position: absolute;
  color: white;
  background-color: rgba(0,0,0,0.75);
  padding: 10px;
  max-width: 300px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  font-size: 16px;
  pointer-events: none;
}

.diseaseBar:hover {
  fill: orange;
}