#EPYWmap {
  margin-top:0.5rem;
  margin-left: 2rem;
  margin-right:2rem;
  margin-bottom:0.5rem;
  height: 97%;

}

li{
  margin: 20px 0;
}


html{
  font-size: 100%;
  height: 100vh;
}
body{
  padding: 0;
  margin: 0;
  height: 100vh;
  display: grid;
  grid-row-gap: 0.5rem;
  grid-template-rows: 1fr 2fr 5fr 0.75fr;
  grid-template-areas:	"titlebanner"
      "query"
      "main"
      "tail";
  font-family: Palatino;
  /*background-color: #FFFFFF;*/
  background-color: #f9ebe0;
}
.pagetitle{
  grid-area: titlebanner;
  display : grid;
  grid-template-columns: 4fr 2fr 3fr;
  padding:0;
  margin:0;
  
  grid-template-areas: "title-block empty tabs";
  
  /*text-shadow: 1px 1px;
  text-shadow: 0.6px 0.6px #ffffff;*/
  background-color: #0d2149;
  color:#FFFFFF;
  font-size:2rem;
  position:relative;
}
#title-block{
  position:absolute;
  top:50%;
  grid-area: title-block;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-areas: "logo title";
  font-weight: bold;
  /*padding:0.15rem 0rem 0.15rem 0rem;
  margin-top: 5%;
  margin-bottom: 5%;*/
}
#logo{
  grid-area: logo;
  height: 4rem;
  width: auto;
  margin-top: -10%;
  margin-left:60%;

  
  
}
#title{
  grid-area: title;
  text-align: right;
  /*position:absolute;
  top:50%;*/
  
  
}
#tabs{
  position:absolute;
  top:50%;
  grid-area: tabs;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "intro-tab credits-tab map-tab";
  /*padding:0.15rem 0rem 0.15rem 0rem;
  margin-top: 5%;
  margin-bottom: 5%;*/
 

}
#intro-tab{
  grid-area: intro-tab;
  margin-right:4rem;
  /*position:absolute;
  top:50%;*/
}
#credits-tab{
  grid-area: credits-tab;
  
  /*position:absolute;
  top:50%;*/
}
#map{
  grid-area:map-tab;
  /*position:absolute;
  top:50%;*/
}



#settingstitle{
  grid-area: settingstitle;
  font-size: 1.25em;
  font-weight: bold;
  position: absolute;
  left: 2rem;
  right:2rem;
  
}

.param {
  background-color: #f1f132;
}



#QuerySubmitButton {
  grid-area: settingsbutton;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-size: 1.15em;
  font-family: Palatino, sans-serif;
  outline: none;
  color: #ffffff;
  background-color: #208aae;
  border: none;
  border-radius: 15px;
  box-shadow: 0 7px #000000; 
  position:absolute;
  left:50%;
  /*margin-left:50%;*/
}
#QuerySubmitButton:hover {
  background-color: rgba(255, 217, 179);
  color: #000000;
}

#QuerySubmitButton:active {
  background-color: rgba(255, 217, 179);
  box-shadow: 0 3px #ffffff;
  transform: translateY(4px);
}

#AnalyticsButton {
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-size: 1.15em;
  font-family: Palatino, sans-serif;
  outline: none;
  color: #ffffff;
  background-color: #208aae;
  border: none;
  border-radius: 15px;
  box-shadow: 0 7px #000000; 
  margin-left:50%;
}
#AnalyticsButton:hover {
  background-color: rgba(255, 217, 179);
  color: #000000;
}

#AnalyticsButton:active {
  background-color: rgba(255, 217, 179);
  box-shadow: 0 3px #ffffff;
  transform: translateY(4px);
}


input[type=range] {
  height: 34px;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 11px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000;
  background: #208aae;
  border-radius: 1px;
  border: 0px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000031;
  border: 1px solid #00001E;
  height: 26px;
  width: 26px;
  border-radius: 15px;
  background: #FFFFFF;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #208aae;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 11px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000;
  background: #208aae;
  border-radius: 1px;
  border: 0px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000031;
  border: 1px solid #00001E;
  height: 26px;
  width: 26px;
  border-radius: 15px;
  background: #FFFFFF;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 11px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #208aae;
  border: 0px solid #010101;
  border-radius: 2px;
  box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-fill-upper {
  background: #208aae;
  border: 0px solid #010101;
  border-radius: 2px;
  box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-thumb {
  margin-top: 1px;
  box-shadow: 1px 1px 1px #000031;
  border: 1px solid #00001E;
  height: 26px;
  width: 26px;
  border-radius: 15px;
  background: #FFFFFF;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #208aae;
}
input[type=range]:focus::-ms-fill-upper {
  background: #208aae;
}




.query-block{
  grid-area: query;
  background-color: #f9ebe0;
  font-size: 1.25rem;
  position:relative;
  display: grid;
  grid-template-rows: 0.75fr 2fr 2fr 0.75fr;
  grid-template-areas: "settingstitle" 
  "settingwho" 
  "settingwhen" 
  "settingsbutton";
  
}
#who_setting{
  grid-area: settingwho;
  position:absolute;
  left:3rem;
  right:3rem;
  margin-top:1rem;
}
#when_setting{
  grid-area: settingwhen;
  position:absolute;
  left:3rem;
  right:3rem;

}

.map_parts{
  display: grid;
  position:relative;
  grid-column-gap: 10px; 
  grid-template-rows: 100%;
  grid-template-columns: 3fr 2fr;
  grid-template-areas: "map data-viz";

}

.map-onleft{
  grid-area: map;

}

.data_visualization{
  height:97%;
  grid-area: data-viz;
  position:absolute;
  background-color: #f9ebe0;
  overflow-y: scroll;
  margin-top:0.5rem;
  margin-bottom:0.5rem;
}

#main{
  /*height: 640px;*/
  height: auto;
  position: relative;
  font-size: 1.25rem;
  grid-area: main;
  background-color: #f9ebe0;
  
}

#tail{
  grid-area:tail;
  background-color: #878786;
}

.placedatapie{
  width:100%;
}

.pie-label{
  margin-top: 1rem;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5em; 
}