@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,600);
[id*=flat-slider].ui-slider,
[id*=flat-slider].ui-slider .ui-slider-pip .ui-slider-line {
  background: #7e8c9f;
}

[id*=flat-slider].ui-slider .ui-slider-handle .ui-slider-tip:after {
  border-left-color: #434d5a;
}

[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-hover,
[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-focus,
[id*=flat-slider].ui-slider .ui-slider-handle.ui-state-active {
  border-color: white;
}

body {
  background: #434d5a;
  font-family: "Roboto";
}

h1 {
  color: #7e8c9f;
  padding: 20px 20px 0px;
  margin: 0;
  font-weight: 300;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: default;
}

#panel_a_container {
  text-align: center;
  position: relative;
}

#panel_a_slider_ems {
  width: 140px;
  height: 50px;
  position: absolute;
  bottom: 33px;
  left: 165px;
}

#panel_a_slider_rf {
  width: 92px;
  height: 50px;
  position: absolute;
  bottom: 90px;
  right: -8px;
}

#myRange2 {
  position: relative;
  top: 40%;
  transform: rotate(270deg);
}

#panel_a_slider_ems {
  z-index: 1;
}

#panel_bcd_container {
  text-align: center;
  padding-bottom: 40px;
}

#para_above_plot1 { color: #c7cdd5;
  text-align: left;
  padding: 0px 0px 0px;
  font-weight: 300;
  font-size: 1.3em;
}
#para_above_plot2 { color: #c7cdd5;
  text-align: left;
  padding: 0px 0px 0px;
  font-weight: 300;
  font-size: 1.3em;
}

#figure_header { color: #c7cdd5;
  text-align: left;
  padding: 40px 0px 0px;
  font-weight: 370;
  font-size: 1.2em}

#below_stuff { color: #c7cdd5;
  text-align: center;
  padding: 50px 0px 0px;
  font-weight: 300;
  font-size: 1.3em;
}

#finalstuff {
  padding-bottom: 20px;
}

.description_of_use { color: #c7cdd5;
  text-align: left;
  padding: 0px 0px 0px;
  /*font-weight: 300;*/
  /*font-size: 1.3em;*/
}

.net_zero_year { color: #c7cdd5;
  float:left;
  text-align: left;
  padding: 0px 82px 0px;
  font-weight: 500;
  font-size: 1.3em;
}
.non_co2_rf { color: #c7cdd5;
  float:right;
  text-align: right;
  padding: 0px 82px 0px;
  font-weight: 500;
  font-size: 1.3em;
}

.slider_wrapper { /*color: #c7cdd5;*/
  text-align: center;
  /*padding: 0px 0px 0px;*/
  width: 100%;
  padding-left: 100px;
  padding-right: 100px;
  padding-bottom: 15px;
  /*font-weight: 300;*/
  /*font-size: 1.3em;*/
}

p {
  color: #c7cdd5;
  text-align: center;
  margin: 0.5em 1em;
  font-weight: 300;
  font-size: 1.3em;
}
p:nth-of-type(1) {
  margin-top: 3em;
}
p:last-child {
  color: #c7cdd5;
  font-weight: 500;
  font-size: 1.3em;
}
p:last-child a {
  font-weight: 300;
}

/*p.label {
  text-align: left;
}*/

#panela_label {position: absolute;
  text-align:center;
  width: 550px;
  height: 50px;
  top: -20px;
  left: 55px;
  }

#panelb_label {position: absolute;
  width: 292px;
  height: 50px;
  top: 300px;
  left: 53px;
  }

#panelc_label {position: absolute;
  width: 292px;
  height: 50px;
  top: 300px;
  left: 336px;
  }

#paneld_label {position: absolute;
  width: 292px;
  height: 50px;
  top: 300px;
  left: 629px;
  }

#labela {color: #000000;
  font-size: 0.9em;
  font-weight: 300;
  }
#labelb {color: #000000;
  font-size: 0.75em;
  font-weight: 300;
  }
#labelc {color: #000000;
  font-size: 0.75em;
  font-weight: 300;
  }
#labeld {color: #000000;
  font-size: 0.75em;
  font-weight: 300;
  }

.stuff {
  padding: 0px 0px 0px;
  max-width: 900px;
  margin: auto;
}

/*.slidecontainer {
  width: 100%;
  padding-left: 200px;
  padding-bottom: 20px;
}*/

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 0px;
  /*border-radius: 5px;*/
  background: #000000;
  outline: none;
  opacity: 1.0;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0000FF;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0000FF;
  cursor: pointer;
}

#myRange2::-moz-range-thumb {
  background: #FF00FF;
}

#myRange2::-webkit-slider-thumb {
  background: #BB00DD;
}





#buttonWrapper {
  position: absolute;
  left: 42%;
}

#myBtn {
  position: relative;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 2; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#modal_text {
  color: rgb(120,120,120);
  text-align: left;
}