@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500');
*{
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}

body 
{
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
}
.sidebar {
  position: fixed;
  left: -20%;
  width: 20%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  transition: all .5s ease;
  z-index: 400;
  overflow-x: hidden;
  overflow-y: auto;
  border:1px #666666;
  box-shadow: 0px 1px 6px 0px rgba(100, 100, 100, 0.7);
}
.sidebar header {
  font-size: 22px;
  line-height: 70px;
  text-align: center;
  background: rgba(100, 100, 100);
  border: 1px solid #666666;
}

.sidebar header a {
  font-size: 25px;
  color:  rgb(250, 250, 250);
  line-height: 70px;
  padding: 4px 10px;
  text-align: center;
  
  z-index: 2100;
}

.sidebar header a:hover {
  color:  #d30000;
  border-bottom: 5px #fc0505;
}

.sidebar a:focus {
  color:  #d30000;
  border-bottom: 5px #fc0505;
}


#check{
  position:absolute;
  top: 3em;
  right: auto;
  bottom: auto;
  left: 3em;
  z-index: 800;
}

#check{
  display: none;
}

/*
#check:checked ~ section{
  margin-left: 20%;
}
*/

label #btn,label #cancel{
  position: absolute;
  background: rgba(250, 248, 248, 0.7);
  border-radius: 3px;
  cursor: pointer;
}
label #btn{
  left: 15px;
  top: 15px;
  font-size: 35px;
  color: rgb(100, 100, 100);
  padding: 6px 12px;
  transition: all .5s;
  z-index: 100;
}

label #btn:hover{
  color: #d30000;
  background: rgba(100, 100, 100, 0.5);
}

label #cancel{
  z-index: 1111;
  left: -195px;
  top: 20px;
  font-size: 20px;
  color: rgb(100, 100, 100);
  padding: 4px 9px;
  transition: all .5s ease;
}

label #cancel:hover{
  color: #d30000;
}

#check:checked ~ .sidebar{
  left: 0;
}
#check:checked ~ label #btn{
  left: 250px;
  opacity: 0;
  pointer-events: none;
}
#check:checked ~ label #cancel{
  left: 5px;
  position: fixed;
}

section{
  height: 100vh;
  transition: all .5s;
}

#mapSelect{
  display: none;
}

#mapSelect:target{
  display: block;
}

#layerNames{
  display: none;
}

#layerNames:target{
  display: block;
}

#layerLegend{
  display: none;
}

#layerLegend:target{
  display: block;
}

#layerTools{
  display: none;
}

#layerTools:target{
  display: block;
}

#infoDetail{
  display: none;
}

#infoDetail:target{
  display: block;
}

#maparea{
  position:relative;
  background:#faf8f8;
  width:100%; 
  height:100%;
}

#divMeta{

  height: 55px;
  text-align: right;
  margin-bottom: 5px;
  padding-right:10px;
  padding-left:5px;
  padding-bottom:15px;
  background-color:#e6e6e6;
  box-shadow: 0px 0px 3px 0px rgba(100, 100, 100, 0.7);

}

#btnMetadata{
	color:#ffffff;
  background-color: #666666;
  box-shadow: 0px 1px 6px 0px rgba(100, 100, 100, 0.7);
  border: 1px #666666;  
	width:40px;
	height: 40px;
	padding-bottom: 5px;
	border-radius: 3px;
	margin-left: 5px;
  font-family:Segoe UI;
	font-size:20px;
  text-align: center;
  cursor:pointer;
  bottom: 5px;
}

#btnMetadata:hover{
  color: #d30000;
  background-color:rgb(225, 225, 225);
  border:1px solid #d30000;
}


#mapSelect
{
	padding-top:20px;
	padding-left:10px;
	padding-bottom:20px;
}

.selBox
{
	color:#ffffff;
	background-color:#666666;
	width:80%;
	height:40px;
	text-align: left;
	box-shadow: 0px 1px 6px 0px rgba(100, 100, 100, 0.7);
	border-radius: 3px;
	border:1px #666666;
  font-family:Segoe UI;
	font-size:14px;
  margin-top: 5px;
  margin-left: 5px;
  margin-bottom: 10px;
  padding-left: 5px;
}

.selBox:hover{
  border:1px solid #d30000;
  color: #d30000;
  background-color:rgb(225, 225, 225);
}


#aoiLabel{
  font-family:Segoe UI;
	font-size:14px;
	padding-left: 5px;

}

.openMap{
	color:#ffffff;
	
	width:50px;
	height: 40px;
	text-align: center;
	box-shadow: 0px 1px 6px 0px rgba(100, 100, 100, 0.7);
	padding-bottom: 3px;
	border: 1px #666666;
	border-radius: 3px;
	margin-left: 5px;
  font-family:Segoe UI;
	font-size:20px;
  cursor:pointer;
  margin-top: 5px;
  background-color:#666666;
 
}

.openMap:hover
{
  border:1px solid #d30000;
  color: #d30000;
  background-color:rgb(225, 225, 225);
}

#logo
{
	max-height:50px;
  position:absolute;
  top: 1.5em;
  right: 2em;
  bottom: auto;
  left: auto;
  z-index: 100;
}

#latlong{
  position:fixed;
  z-index: 1;
  width: 140px;
  height: 20px;
  text-align: center;
  color: rgb(95, 95, 95);
  font-size: 11px;
	font-family:Segoe UI;
  text-shadow: rgb(253, 252, 252) 0px 0px 3px;
  -webkit-font-smoothing: antialiased;
  right: 2em;
  left: auto;
  bottom: 7.5em;
  top: auto;
 }



#layerNames{
  color:#525253 !important;
}

#aboutlogo
{
	max-height:50px;
	margin-top:5px;
	margin-right:10px;
	padding-top:0px;
	padding-bottom:0px;
	vertical-align: middle; 
}

#divLogo
{
	position:relative;
	font-size:16px;
  color:#d30000;
  height: 60px;
 }

#infoDetail{
  padding-top:20px;
  padding-left:10px;
  padding-right:10px;
}

h4
{
	color:#d30000;
	font-size:20px;
	font-weight:500;
	font-family:Segoe UI;
  padding-top:10px;
}

#aboutus{
  font-size:13px;
	font-weight:400;
	font-family:Segoe UI;
  line-height:22px;
}

.socialmedia {
  text-align: center;
}

.socialmedia a {
  font-size: 27px;
  color:  #666666;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  z-index: 2;
}

.socialmedia a:hover{
  color: #d30000;
}

#info{
	max-height:150px;
  position:absolute;
  top: 3em;
  right: auto;
  bottom: auto;
  left: 48%;
  z-index: 200;
}

#layerTools{
  width: 100%;
  text-align: center;
}

#featureinfo{
  display: none;
}


label #btnInfo{
  margin-bottom: 15px;
  font-size: 20px;
  color: rgb(255, 255, 255);
  padding-left: 10px;
  padding-top: 10px;
  z-index: 200;
  background-color: #666666;
  box-shadow: 0px 1px 6px 0px rgba(100, 100, 100, 0.7);
  border-radius: 3px;
  width: 40px;
  height: 40px;
}



label #btnInfo:hover{
  color: #d30000;
  background-color:rgb(225, 225, 225);
  border: 1px solid #d30000;
}

#featureinfo:checked ~ label #btnInfo{
  color:#d30000;
  background-color:rgb(225, 225, 225);
  border: 1px solid #d30000;
}



#featInfoToolTipIcon
{
  font-size: 20px;
  color:#d30000;
}


.featInfoLayerName
{
  font-size: 12px;
  color: rgb(50, 50, 50);
}

#rivid 
{
	color:#000000;
	font-family:Segoe UI;
	padding-right:25px;
	padding-left:15px;
	background-color: #d6d6d6;
	border-bottom:1px solid #f80404;
  text-align: left;
  height: 50px;
  line-height: 50px;
}

#rivid i:hover{
  color:#d30000;
}

#rivid:hover{
  color:#d30000;
}


.accordion-panel:after{
  content: "\f106";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  float: right;
}
.accordion-panel.collapsed:after{
  content: "\f107";
}
.accordion-collapse{
  text-align: left;
  padding-left: 10px;
  padding-top:10px;
  padding-right:10px;
}

#spechar{
  font-size: 18px;
  font-weight: 700;
  padding-right: 20px;
  color:#d30000;
}

#tabQuery{
  width: 99%;
}

#tdHead{
  width:20%;
  padding-right: 5px;
  padding-top: 1px;
}
#tdValue{
  width:80%;
}

.selBox1{
	color:#ffffff;
	background-color:#666666;
	width:98%;
	height: 40px;
	text-align: left;
	box-shadow: 0px 1px 6px 0px rgba(100, 100, 100, 0.7);
  border-radius: 3px;
	border:1px #666666;
  font-family:Segoe UI;
	font-size:14px;
  margin-top: 5px;
  margin-left: 5px;
  margin-bottom: 10px;
  padding-left: 5px;
}

.selBox1:hover
{
  border:1px solid #d30000;
  color: #d30000;
  background-color:rgb(225, 225, 225);
}

#searchVal{
  margin-left: 5px;
  padding-left: 5px;
  margin-bottom:10px;
  margin-top: 5px;
  width:98%;
  height: 40px;
  font-family:Segoe UI;
	font-size:14px;
  box-shadow: inset 0px 0px 3px 0px rgba(100, 100, 100, 0.7);
  border-radius: 3px;
  border:1px rgb(20, 20, 20);
  background-color: rgb(225, 225, 225);
}

#searchVal:hover
{
  border:1px solid #d30000;
  color: #d30000;
  background-color:rgb(225, 225, 225);
}
#searchVal:focus
{
  border:1px solid #d30000;
  color: #d30000;
  background-color:rgb(225, 225, 225);
}

#btnClearQuery{
	color:#ffffff;
	background-color:#666666;
	width:47%;
	height: 40px;
	text-align: center;
	box-shadow: 0px 1px 6px 0px rgba(100, 100, 100, 0.7);
	padding-top: 0px;
	padding-bottom: 2px;
	border: 1px #666666;
	border-radius: 3px;
  padding-left: 10px;
  font-family:Segoe UI;
	font-size:22px;
  margin-bottom: 10px;
  margin-top: 5px;
  margin-left: 5px;
}

#btnQuery{
	color:#ffffff;
	background-color:#666666;
	width:47%;
	height: 40px;
	text-align: center;
	box-shadow: 0px 1px 6px 0px rgba(100, 100, 100, 0.7);
	padding-top: 0px;
	padding-bottom: 2px;
	border: 1px #666666;
	border-radius: 3px;
	margin-left: 3%;
  font-family:Segoe UI;
	font-size:22px;
  margin-bottom: 5px;
}

#btnClearQuery:hover
{
  border:1px solid #d30000;
  color: #d30000;
  background-color:rgb(225, 225, 225);
}

#btnQuery:hover
{
  border:1px solid #d30000;
  color: #d30000;
  background-color:rgb(225, 225, 225);
}

#radLength{
  display: none;
}

#radArea{
  display: none;
}


.labMeas{

  margin-bottom: 10px;
  color: rgb(240, 240, 240);
  padding-right: 10px;
  padding-top: 6px;
  padding-left: 10px;
  background-color: rgb(150, 150, 150);
  border: 1px rgb(150, 150, 150);
  box-shadow: 0px 1px 6px 0px rgba(100, 100, 100, 0.7);
  font-family:Segoe UI;
	font-size:18px;
  height: 40px;
  margin-left: 10px;
  text-align: center;
  width:40px;
  border-radius: 3px;
}

.labMeas:hover{
  color: #d30000;
  background-color:rgb(225, 225, 225);
  border: 1px solid #d30000;
}

#radArea:checked ~ #labArea
{
  color: #d30000;
  background-color:rgb(225, 225, 225);
  border: 1px solid #d30000;

}

#radLength:checked ~ #labLength
{
  color: #d30000;
  background-color:rgb(225, 225, 225);
  border: 1px solid #d30000;
}

#btnClearMeasure{
	color:#ffffff;
	background-color:#666666;
	height: 40px;
  Width:40%;
	text-align: center;
	box-shadow: 0px 1px 6px 0px rgba(100, 100, 100, 0.7);
	padding-top: 0px;
	padding-bottom: 2px;
	border: 1px #666666;
	border-radius: 3px;
  font-family:Segoe UI;
	font-size:22px;
  margin-bottom: 10px;
  margin-top: 5px;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: 10%;
}

#btnClearMeasure:hover{
  border:1px solid #d30000;
  color: #d30000;
  background-color:rgb(225, 225, 225);
}

#btnDraws
{
  text-align: center;
  margin-left: 0px;
}

#btnClearDraw
{
	color:#ffffff;
	background-color:#666666;
	height: 40px;
  width:40%;
	text-align: center;
	box-shadow: 0px 1px 6px 0px rgba(100, 100, 100, 0.7);
	padding-top: 0px;
	padding-bottom: 2px;
	border: 1px #666666;
	border-radius: 3px;
  font-family:Segoe UI;
	font-size:22px;
  margin-bottom: 10px;
  margin-top: 5px;
  padding-left: 10px;
  padding-right: 10px;

}

#btnClearDraw:hover
{
  border:1px solid #d30000;
  color: #d30000;
  background-color:rgb(225, 225, 225);
}

#radPoint
{
  display:none;
}
#radLine
{
  display:none;
}
#radCircle
{
  display:none;
}
#radPoly
{
  display:none;
}
#radText
{
  display:none;
}

#radPoint:checked ~ #labPoint
{
  color: #d30000;
  background-color:rgb(225, 225, 225);
  border: 1px solid #d30000;
}
#radLine:checked ~ #labLine
{
  color: #d30000;
  background-color:rgb(225, 225, 225);
  border: 1px solid #d30000;
}
#radCircle:checked ~ #labCircle
{
  color: #d30000;
  background-color:rgb(225, 225, 225);
  border: 1px solid #d30000;
}
#radPoly:checked ~ #labPoly
{
  color: #d30000;
  background-color:rgb(225, 225, 225);
  border: 1px solid #d30000;
}
#radText:checked ~ #labText
{
  color: #d30000;
  background-color:rgb(225, 225, 225);
  border: 1px solid #d30000;
}

#mapPrint
{
  margin-bottom: 10px;
  color: rgb(240, 240, 240);
  padding-right: 10px;
  padding-left: 10px;
  background-color: rgb(150, 150, 150);
  box-shadow: 0px 1px 6px 0px rgba(100, 100, 100, 0.7);
  font-family:Segoe UI;
	font-size:18px;
  height: 40px;
  margin-left: 10px;
  text-align: center;
  width:40px;
  border-radius: 3px;
  border: 1px rgb(150, 150, 150);
}
#mapPrint:hover{
  background-color:rgb(225, 225, 225);
  color: #d30000;
  border: 1px solid #d30000;
}




#divMetadata
{
	height:75%;
  width:22%;
  position:absolute;
  top: 10%;
  right: 0em;
  bottom: auto;
  left: auto;
  z-index: 3000;
  background-color:rgb(243, 242, 242);
  box-shadow: 0px 1px 6px 0px rgba(100, 100, 100, 0.7);
  overflow-x: auto;
  overflow-y: auto;
  padding-right: 10px;
  padding-left: 40px;
  padding-top: 40px;
  padding-bottom: 10px;
  font-family:Segoe UI;
  transition: all .5s ease;
  display: none;
}


#btnCloseMeta{
  background-color: rgba(212, 212, 212, 0.9);
  border-radius: 3px;
  font-family:Segoe UI;
  border: 1px rgb(212, 212, 212);
  height: 25px;
  width: 25px;
  box-shadow: 0px 1px 6px 0px rgba(100, 100, 100, 0.7);
  font-size: 15px;
  color: rgb(100, 100, 100);
  font-weight: 600;
}

#btnCloseMeta:hover{
  color: #d30000;
}