body { 
	margin: 0; 
	padding: 0;
	overflow-y: hidden;
	overflow-x: hidden;
}

#map { 
	position: absolute; 
	top: 0; 
	bottom: 0; 
	width: 100%;
	
}

/*
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700);
@import url(https://fonts.googleapis.com/css?family=Raleway:100,400,700);
*/

    html,
    body,
    #map {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
	
	.esri-view-width-xlarge .esri-popup__main-container,
    .esri-view-width-large .esri-popup__main-container,
    .esri-view-width-medium .esri-popup__main-container
    {
      max-height: 550px !important;
      max-width: 350px !important;
    }
	
/* Component Needs */
.pc-tab > input,
.pc-tab section > div {
  display: none;
}

#tab1:checked ~ section .tab1,
#tab2:checked ~ section .tab2,
#tab3:checked ~ section .tab3,
#tab4:checked ~ section .tab4,
#tab5:checked ~ section .tab5,
#tab6:checked ~ section .tab6 {
  display: block;
  border: 1px solid #ddd;
  font-family: "Raleway";
  color: navyblue;
  overflow: hidden;
  cursor: pointer;
}

#tab1:checked ~ nav .tab1,
#tab2:checked ~ nav .tab2,
#tab3:checked ~ nav .tab3,
#tab4:checked ~ nav .tab4,
#tab5:checked ~ nav .tab5,
#tab6:checked ~ nav .tab6 {
  color: red;
}

/* Visual Styles */
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*
body {
  -webkit-font-smoothing: antialiased;
  background: #ecf0f1;
  font-family: "Raleway";
}
*/

h1 {
  text-align: center;
  font-weight: 100;
  font-size: 60px;
  color: #e74c3c;
}

.pc-tab {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}
.pc-tab ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pc-tab ul li label {
  font-family: "Raleway";
  float: left;
  padding: 3px 5px;
  border: 1px solid #ddd;
  border-bottom: 0;
  background: #eeeeee;
  color: #444;
}
.pc-tab ul li label:hover {
  background: #dddddd;
}
.pc-tab ul li label:active {
  background: #ffffff;
}
.pc-tab ul li:not(:last-child) label {
  border-right-width: 0;
}
.pc-tab section {
  font-family: "Droid Serif";
  clear: both;
}

/*
.pc-tab section div {
  padding: 20px;
  width: 100%;
  border: 1px solid #ddd;
  background: #fff;
  line-height: 1.5em;
  letter-spacing: 0.3px;
  color: #444;
}
.pc-tab section div h2 {
  margin: 0;
  font-family: "Raleway";
  letter-spacing: 1px;
  color: #34495e;
}
*/



#tab1:checked ~ nav .tab1 label,
#tab2:checked ~ nav .tab2 label,
#tab3:checked ~ nav .tab3 label,
#tab4:checked ~ nav .tab4 label,
#tab5:checked ~ nav .tab5 label,
#tab6:checked ~ nav .tab6 label {
  background: white;
  color: #111;
  position: relative;
}
#tab1:checked ~ nav .tab1 label:after,
#tab2:checked ~ nav .tab2 label:after,
#tab3:checked ~ nav .tab3 label:after,
#tab4:checked ~ nav .tab4 label:after,
#tab5:checked ~ nav .tab5 label:after,
#tab6:checked ~ nav .tab6 label:after {
  content: "";
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #ffffff;
  left: 0;
  bottom: -1px;
}

footer {
  margin-top: 50px;
  font-size: 14px;
  color: #CCC;
  text-align: center;
}
footer a {
  color: #AAA;
  text-decoration: none;
}

.mainbutton3 {
	text-align: center; 
	position: relative; 
	display: block; 
	border-radius: 5px; 
	left: 22%; 
	width: 60%; 
	background-color: rgba(0, 42, 92, 0.5); 
	color: white; 
	height: 20px; 
	font-size: 9px;
	margin-bottom: 5px;
	padding-top: 5px;
	cursor: pointer;
}

.panel1_title_class {
	font-size: 2.5vh;
	float: left;
	position: relative;
	display: block;
	padding: 5px;
	padding-bottom: 20px;
	height: 80px;
	width: 100%;
}

.menu_step_label {
	font-size: 1.7vh;
	float: left;
	position: relative;
	display: block;
	padding: 5px;
}

.demo_label {
	width: 60%;
	text-align: left;
	padding: 5px;
	display: block;
	position: relative;
	height: 50px;	
}

.gauge_back {
	width: 80%;
	border: 0px solid blue;
	height: 5px;
	background-color: lightblue;
	border-radius: 5px;
	/*background: linear-gradient(to right, green,yellow,red);*/
	background: linear-gradient(90deg, rgba(0,63,90,1) 0%, rgba(237,185,200,1) 51%, rgba(222,102,0,1) 100%);
	transform: translate(0px, -10px);
}

.gauge_dot {
	width: 20px;
	height: 20px;
	border-radius: 3px;
	background-color: #72A0C1;
	left: 25%;
	display: block;
	position: relative;
	z-index: 10;
	transform: translate(0px, -7px) rotate(-45deg);
	box-shadow: 0px 0px 4px #D4D4D4;
	text-align: center;
}

.gauge_dot_label {
	font-size: 10px;
	font-family: arial;
	color: white;
	transform: translate(0px, 4px) rotate(45deg);		
}

.gauge_container {
	width: 500px;
	border: 1px solid #6699CC;
	border-radius: 5px;
	padding: 15px;
	background-color: #F6F8FB
}

.gauge_zero {
	left: 0px;
	bottom: 0px;
	transform: translate(0px, 13px);
	color: gray;
	font-family: arial;
	font-size: 8px;
	display: block;
	position: absolute;
	
}

.gauge_max {
	right: 0px;
	bottom: 0px;
	transform: translate(0px, 13px);
	color: gray;
	font-family: arial;
	font-size: 8px;
	display: block;
	position: absolute;
	
}

.subcat_button {
	border: 1px solid blue;
	background-color: blue;
	color: white;
	background-color: navy;
	border-radius: 3px;
	height: 12px;
	width: 50px;
	text-align: center;
	font-size: 10px;
	padding: 3px;
	cursor: pointer;
}

.sidebar {
	z-index: 10; 
	position: absolute; 
	display: inline-block; 
	top: 0px; 
	left: 0px; 
	width: 35%; 
	min-width: 350px;
	height: 100%; 
	/* background-color: rgba(0,42,92,0.9);  */
	background-color: rgba(255,255,255,0.9);
	color: rgba(0,42,92); 
	font-family: 'Roboto', sans-serif;
	padding: 10px;
	-webkit-box-shadow: 2px 2px 9px 1px rgba(0,0,0,0.42); 
	box-shadow: 2px 2px 9px 1px rgba(0,0,0,0.42);
}

.logo {
	width: 90%; 
	opacity: 1;
}

.demo0 {
	margin: 5px auto;
}

.demo1 {
	margin: 5px auto;
}

.demo2 {
	margin: 5px auto;
}

.demo3 {
	margin: 5px auto;
}

.dropdown-container-old {
    width: 250px;
    margin: 5px auto;
    position: relative;
}

.dropdown-container {
    width: 55%;
    margin: 5px auto;
    position: relative;
	font-family: 'Roboto', sans-serif;
	font-size: 1.2vh;
	color: white;
}

.main_select {
	font-size: 1.5vh;
	font-family: 'Roboto', sans-serif;
}

.toolbar {
	text-align: center; 
	width: 100%; 
	height: 5%; 
	left: 5px; 
	top: 5px; 
	/* border: 1px solid white; */
	font-family: arial;
	font-size: 11px;
}

.toolbtn {
	width: 60px; 
	height: 20px; 
	margin-top: 5px; 
	border-radius: 10px; 
	border: 1px solid rgba(0,42,92);
	float: left; 
	padding-top: 5px;
	margin-left: 5px;
	background-color: white;
	color: navy;
	box-shadow: 1px 1px 1px 1px rgba(250, 250, 250, 0.2);
	font-weight: bold;
	cursor: pointer;
	font-size: 10px;	
}

.toolbtn2 {
	width: 120px; 
	height: 20px; 
	margin-top: 5px; 
	border-radius: 10px; 
	border: 1px solid rgba(0,42,92);
	float: left; 
	padding-top: 5px;
	margin-left: 5px;
	background-color: white;
	color: navy;
	box-shadow: 1px 1px 1px 1px rgba(250, 250, 250, 0.2);
	font-weight: bold;
	cursor: pointer;
	font-size: 10px;	
}


select {
    width: 100%;
    height: 25px;
    font-size: 100%;
    font-weight: bold;
    cursor: pointer;
    border-radius: 0;
    background-color: rgb(216, 193, 160);
    border: none;
    border-bottom: 2px solid rgb(134, 102, 55);
    color: white;
    appearance: none;
    padding: 2px;
    padding-right: 38px;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: color 0.3s ease, background-color 0.3s ease, border-bottom-color 0.3s ease;
}


    /* For IE <= 11 */
select::-ms-expand {
    display: none; 
}

.select-icon {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 30px;
    height: 36px;
    pointer-events: none;
    border: 2px solid #89CFF0;
    padding-left: 5px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.select-icon svg.icon {
    transition: fill 0.3s ease;
    fill: white;
}

select:hover,
select:focus {
    color: #0047AB;
    background-color: white;
    border-bottom-color: #0096FF;
}

select:hover ~ .select-icon,
select:focus ~ .select-icon {
    background-color: white;
    border-color: #0096FF;
}

select:hover ~ .select-icon svg.icon,
select:focus ~ .select-icon svg.icon {
    fill: #0047AB;
}

.loader {
    position: absolute;
    display: inline-block;
    z-index: 50;
    width: 120px;
    height: 120px;

    /* border: 16px solid #f3f3f3; */
    /* border-radius: 50%; */
    /* border-top: 16px solid #3498db; */
	/* -webkit-animation: spin 2s linear infinite; */
    /* animation: spin 2s linear infinite; */

    left: 45%;
    top: 45%;
}

/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.legend {
	font-family: arial;
	position: absolute;
	display: inline-block;
	z-index: 10;
	right: 20px;
	bottom: 30px;
	width: 250px;
	height: 100px;
	background-color: rgba(255, 255, 255, 0.85);
	border-radius: 10px;
	box-shadow: 2px 2px 9px 1px rgba(0,0,0,0.42);
}

/* Mapbox Customize */
.mapboxgl-popup-content {
	width: 300px;
	padding: 10px;
}

.marker {
  background-image: url('mapbox-icon.png');
  background-size: cover;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
}

.bphc_legend {
	border: 1px solid gray; 
	border-radius: 10px; 
	display: inline; 
	position: absolute; 
	right: 60px; 
	bottom: 20px; 
	width: 230px; 
	height: 130px; 
	background-color: white; 
	z-index: 10;
	box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.42);
	overflow: hidden;
}

.histogram_box {
	left: 30%;
	top: 20%;
	width: 40%;
	height: 60%;
	border: 1px solid navy;
	border-radius: 10px;
	background-color: white;
	color: black;
	z-index: 10;
	position: absolute;
	display: none;
	font-family: arial;
}

.intro_paragraph {
	display: inline;
	position: absolute;
	left: 5%;
	width: 90%;	
}

.sidebar_panel1 {
	width: 90%;
	height: 90%;
	border: 1px soild white;
	font-size: 12px;
}

.panel1_number {
	float: left;
	position: relative;
	display: block;
	font-size: 26px;
	border-radius: 20px;
	height: 40px;
	width: 40px;
	background-color: navy;
	color: white;
	text-align: center;
}

.location_buttons {
	position: absolute;
	display: inline;
	bottom: 10px;
	width: 80%;
	height: 23%;
	border-radius: 10px;
	border: 0px solid black;
	text-align: center;	
}

.bivar_legendx {
	font-family: arial;
	font-size: 8px;
	position: absolute;
	z-index: 5;
	bottom: 10px;
	left: 26%;	
}

.bivar_legendy {
	font-family: arial;
	font-size: 8px;
	position: absolute;
	z-index: 5;
	transform: rotate(-90deg) translate(-90px);
	transform-origin: 0 100%; left: 15%;	
}

.mainbutton2 {
	text-align: center; 
	position: relative; 
	display: block; 
	border-radius: 5px; 
	left: 12%; 
	width: 80%; 
	background-color: rgb(0, 42, 92); 
	color: white; 
	height: 25px; 
	font-size: 11px;
	margin-bottom: 5px;
	padding-top: 5px;
	cursor: pointer;
}

.map_title {
	right: 10px;
	top: 10px;
	z-index: 2;
	width: 250px;
	height: 150px;
	background-color: rgba(250, 250, 250, 0.75);
	color: rgb(0, 42, 92);
	font-family: arial;
	font-size: 14px;
	position: absolute;
	display: block;
	border-radius: 10px;
	padding-top: 7px;
	text-align: center;
	border: 1px solid rgb(200, 200, 200);
	box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.2);
	cursor: pointer;

}

.splash_screen_laptop {
	z-index: 20;
	text-align: center;
	position: absolute;
	display: flex;
	justify-content: center;
	/*
	left: 17%;
	top: 10%;
	width: 65%;
	height: 70%;
	*/

	left: 0%;
	top: 0%;
	width: 100%;
	height: 100%;
	
	border-radius: 0px;
	background-color: rgb(0, 42, 92, 0.9);
	color: white;
	font-family: 'Raleway';
	border: 1px solid gray;	
	overflow: hidden;
	align-items: center;

}

.splash_screen_portrait {
	display: none;
}

.aboutParagraph {

	height: 80%;
	overflow-y: scroll;
	
}

.splash_screen_main_box {
	color: white; 
	/* top: 10%; */ 
	/* left: 30%; */
	/* width: 60%; */
	/* height: 60%; */
	/* position: absolute; */ 
	/* display: block; */ 
	font-size: 30px; 
	/* background-color: rgb(0, 42, 92); */
	color: rgb(0, 42, 92);
	background-color: white;
	border-radius: 10px; 
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
	overflow: hidden; 
	/* min-width: 600px; */
	/* min-height: 250px; */
	width: 800px; 
	height: 400px;
}

.splash_button {
	border: 1px solid white;
	width: 200px;
	border-radius: 5px;
	color: white;
	padding-top: 5px;
	height: 30px;
	background-color: rgb(0, 42, 92);
	cursor: pointer;
	z-index: 10;
}

.empty_details {
	height: 95%;
	display: block;
	width: 97%;
	left: 1.5%;

}

.demo_mobile_label {
	display: none;
}

/* Mobile device */
@media screen and (max-width: 600px) {
  .sidebar {
	z-index: 10; 
	position: absolute; 
	display: inline-block; 
	top: 0px; 
	left: 0px; 
	width: 100%; 
	height: 25%; 
	/* background-color: rgba(0,42,92,0.9);  */
	background-color: rgba(255,255,255,0.9);
	color: rgba(0,42,92); 
	font-family: 'Roboto', sans-serif;
	padding: 10px;
	-webkit-box-shadow: 2px 2px 9px 1px rgba(0,0,0,0.42); 
	box-shadow: 2px 2px 9px 1px rgba(0,0,0,0.42);
	overflow: scroll;
  }
  
  .pc-tab {
    width: 100%;
    max-width: 95%;
	max-height: 90%;
    margin: 0 auto;
  }

  .bphc_logo {
	display: none;  
  }
  
  .intro_paragraph {
	display: none;  
  }

  .demo0 {
	position: absolute;
	display: block; 
	left: 0%;
	top: 25%;
	width: 22%;
  }
  
  .demo1 {
	position: absolute;
	display: block;
	left: 25%;
	top: 25%;
	width: 25%;
  }

  .demo2 {
	position: absolute;
	display: block;
	left: 50%;
	top: 25%;
	width: 25%;
  }

  .demo3 {
	position: absolute;
	display: block;
	left: 75%;
	top: 25%;
	width: 22%;
  }
  
  /*
  .bphc_legend {
	border: 0px solid gray; 
	border-radius: 0px; 
	display: inline; 
	position: absolute; 
	right: 0px; 
	bottom: 0px; 
	width: 100%; 
	height: 18%; 
	background-color: white; 
	z-index: 10;
	-webkit-box-shadow: 2px 2px 9px 1px rgba(0,0,0,0.42); 
	box-shadow: 2px 2px 9px 1px rgba(0,0,0,0.42);
  }
  */
  
  .sidebar_panel1 {
	width: 90%;
	height: 75%;
	border: 1px soild white;
	font-size: 12px;
 }
 
	.location_buttons {
		position: absolute;
		display: none;
		bottom: 10px;
		width: 80%;
		height: 23%;
		border-radius: 10px;
		border: 0px solid black;
		text-align: center;	
	}

	/*
	.bivar_legendx {
		font-family: arial;
		font-size: 8px;
		position: absolute;
		z-index: 5;
		bottom: 2px;
		left: 22%;	
	}

	.bivar_legendy {
		font-family: arial;
		font-size: 8px;
		position: absolute;
		z-index: 5;
		transform: rotate(-90deg) translate(-85px);
		transform-origin: 0 100%;
		left: 17%;	
	}
	*/
	
	.mainbutton2 {
		text-align: center; 
		position: relative; 
		display: block; 
		border-radius: 5px; 
		left: 12%; 
		width: 80%; 
		background-color: rgb(0, 42, 92); 
		color: white; 
		height: 25px; 
		font-size: 8px;
		margin-bottom: 5px;
		padding-top: 5px;
		cursor: pointer;
	}

	.dropdown-container {
		width: 80%;
		margin: 1px auto;
		position: relative;
		font-family: 'Roboto', sans-serif;
		font-size: 8px;
		color: white;
	}

	.splash_screen_portrait {
		z-index: 20;
		text-align: center;
		position: absolute;
		display: block;
		left: 0%;
		top: 0%;
		width: 100%;
		height: 100%;
		border-radius: 0px;
		background-color: rgb(0, 42, 92);
		color: white;
		font-family: 'Raleway';
		border: 1px solid gray;	
		overflow: hidden;
	}

	.splash_screen_laptop {
		display: none;
	}
	
	.aboutParagraph {

		height: 80%;
		overflow-y: scroll;
		
	}
	
	.empty_details {
		display: none;
	}

	.panel1_title_class {
		display: none;
		
	}
	
	.panel1_number {
		display: none;
	}
	
	.demo_label {
		display: none;
	}
	
	.map_title {
		display: none;
	}
	
	.demo_mobile_label {
		display: block;
		font-size: 10px;
		font-family: arial;
		color: black;
	}

	.logo {
		display: none; 
	}


}