@media (min-width: 992px) {
  #react-container {
      width: 970px;
  }
}

@media (min-width: 768px) {
  #react-container {
      width: 750px;
  }
}


body {
  background: #F2F2F2;
  /* Testing Margin for iFrame 980px*/
  margin: 0;
  overflow-x: hidden;
}

.median-line {
  stroke-width:1;
}

.stroke-opacity-one {
  stroke-opacity: 1;

}

.stroke-opacity-zero {
  stroke-opacity: 0;
}

.fill-opacity-one {
  fill-opacity: 1;

}

.fill-opacity-zero {
  fill-opacity: 0;
}

.mark-ot {
  font-family: "MarkOT";
}

.mark-ot-light {
  font-family: "MarkOT";
}

.purple-text {
  color: #7B3EB3;
}

.gray-text {
  color: #929292;
}

/* individual component styles */

/* peak component*/

.peak-circle {
  font-size: 18px;
}

/* legend */

.legend {
  font-size: 14px;

}

.legend-dropdown-container {
  width: 520px;
  margin: 25px auto 0;
  position: relative;
}
/* title */

.chart-title {
  text-align: center;
  margin-bottom: 6px;
}

/* chart as a whole */

.svg-container {
  position: relative;
  margin: 0 auto;
}

.chart-container {
  position: relative;
}

.blur {
   -webkit-filter: blur(5px);
   filter: blur(5px);
   pointer-events:none;
}

.blur-animation {
  -webkit-animation: blur 2s;
}

@-webkit-keyframes blur {
  0%  { -webkit-filter: blur(5px); filter: blur(5px); }
  100% { -webkit-filter: blur(0px); filter: blur(0px); }
}

/* controls*/
.controls-container {
  position:relative;
}

.chart-and-controls-container {
  display: table;
  margin: 0 auto;
}

svg {

}

.axis-text {
  font-size:16px;
}

.dark-purple-text {
  fill: #3E1052;
}

.seafoam-dark-text {
  fill: #1F4C4A;
}

.bold-text {
  font-family: MarkOTBold;
}

.footnotes-container {
    text-align: center;
    font-family: "markot";
    font-size: 13px;
    width: 85%;
    margin: 0 auto;
}

.style-radioInfo-175xr {
   display: flex;
   cursor: pointer;
   color: #555;
   border: 1px solid #bbb;
   min-width: 15px;
   min-height: 15px;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   font-size: 10px;
   vertical-align: middle;
   text-align: center;
   font-family: serif;
   margin-left: 8px;
   margin-top: 3px;
   align-items: center;
   justify-content: center;

}

.style-radioInfo-new {
   display: flex;
   cursor: pointer;
   color: #555;
   border: 1px solid #bbb;
   min-width: 15px;
   min-height: 15px;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   font-size: 10px;
   vertical-align: middle;
   text-align: center;
   font-family: serif;
   margin-left: 0px;
   margin-top: 3px;
   align-items: center;
   justify-content: center;
   position: relative;
   right: 20px;


}

.style-radioInfo-title {
   display: inline-flex;
   cursor: pointer;
   color: #555;
   border: 1px solid #bbb;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   font-size: 10px;
   vertical-align: middle;
   text-align: center;
   font-family: serif;
   margin-left: 8px;
   margin-top: 3px;
   align-items: center;
   justify-content: center;
}