body {

    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
    position: absolute;
    overflow: hidden;

}
html {
  position: relative;
  min-height: 100%;
  background: #ffffff;
}
a:focus,
a:hover {
  text-decoration: none;
}
/*
background-image: -webkit-linear-gradient(#6d94bf,#446e9b 50%,#3e648d);
background-image: linear-gradient(#6d94bf,#446e9b 50%,#3e648d);*/
.header-nav{
	text-shadow: 0 -1px 0 rgba(0,0,0,0.3);

background-image: -webkit-linear-gradient(#393186,#19b069 50%,#393186);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff6d94bf',endColorstr='#ff3e648d',GradientType=0);
filter: none;
	color: #fff;
	height: 50px;
	position: fixed;
	border-color: #395c82;
	width: 100%;
	position: fixed;
	z-index: 99;
}
.logo {

    background: #fff;
    position: absolute;
    right: 0px;
    width: 90px;
    height: 50px;
    margin: 0 auto;
    padding: 7px;
    top: 0;


}
.heading{
	text-align: center;
	line-height: 5px;
	font-weight: bold;
	margin: 0;
    padding: 15px;
}
.main-container {

    background: #fafafa;
    padding-bottom: 60px;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    height: 100%;
    bottom: 0;
    top: 50px;
    right: 0;
    left: 0;

}
.layers{
	position: absolute;
	right: 0;
	bottom: 80px;
}
.footer{
font-size: 10px;
    height: 30px;
   background-color: #3f658f8a;

border: 1px solid #345578;
    overflow: hidden;
width: 100%;
bottom: 0 !important;
position:fixed;
z-index: 999;
padding: 3px;
text-align: center;
color: #fff

}
.footer img{padding-right: 5px}
.footer a{color: #fff}

/***
Side bar
**/
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 0;
    transition: 0.3s;
    font-size: 17px;
    color: #fff
}

.tab button:hover {
    background-color:#0C1F42;
}

.tab button.active {
    background-color:#0C1F42;
}

.tabcontent {
    width: 250px;
	height: 100%;
	position: absolute;
	background: #fff;
	margin-right: 65px;
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    right: 0;
    z-index: 99

}

/* Style the close button */
.topright {
    float: right;
    cursor: pointer;
    font-size: 28px;
}
/*    background:rgba(65,106,149,0.7);
*/
.tab {
	right: 0;
    position: absolute;
    height: 100%;
    width: 65px;
        background:rgba(65,106,149,0.7);

    color: #fff;
    z-index: 99

}

.tab button{
    width: 100%;
    border-bottom:1px solid #fff;
}
.p-a-10{
	padding: 10px 
}
.info-module {
box-shadow: 3px -1px 15px #000;
    width: 250px;
    left: 0;
    right: 0;
    top: 25%;
    height: 250px;
    margin: 0 auto;
    position: absolute;
    background: #fff;
    z-index: 999;
    border-radius: 10px;

}
.info-heading {

    text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
    background-image: -webkit-linear-gradient(#841905,#841905 50%,#841905);
    background-image: linear-gradient(#841905,#841905 50%,#841905));
    background-repeat: no-repeat;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff6d94bf',endColorstr='#ff3e648d',GradientType=0);
    filter: none;
    color: #fff;
    position: relative;
    z-index: 99999;
    width: 100%;
    text-align: center;
    padding: 5px;
    font-size: 20px;
    border-radius: 10px 10px 0 0;

}
.ol-popup{
	padding:0px !important
}
.arrow {

    bottom: -25px;
    left: 50%;
    margin-left: -11px;
    	width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 25px solid #fff;
	position: absolute;
}
.info-heading p{margin: 0}
.info-module .topright {
color: #fff;
    float: right;
    cursor: pointer;
    font-size: 28px;
    position: absolute;
    z-index: 999999;
    right: 0;
    padding: 0 5px 0 0;
    top: 0;

}

.wrapper{
  width:70%;
}
@media(max-width:992px){
 .wrapper{
  width:100%;
} 
}
.panel-heading {
	 text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
background-image: -webkit-linear-gradient(#6d94bf,#446e9b 50%,#3e648d);
    background-image: linear-gradient(#6d94bf,#446e9b 50%,#3e648d));
    background-repeat: no-repeat;
  padding: 0;
	border:0;

}
.panel-title>a, .panel-title>a:active{
	display:block;
  color:#fff !important;
  font-size:9px;
  font-weight:bold;
	text-transform:uppercase;
	letter-spacing:1px;
  word-spacing:3px;
	text-decoration:none;
}
.panel-heading  a:before {
   font-family: 'Glyphicons Halflings';
   content: "\e114";
   float: right;
   transition: all 0.5s;
}
.panel-heading.active a:before {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	transform: rotate(180deg);
} 
.tablinks.legend {

    display: inline;
    position: absolute;
    bottom: 80px;
    right: 0;

}


.modal-dialog.modal-sm{bottom: 0;right: 0;position: absolute;}
#map {

    height: 100%;

}
.tablinks .text {

    display: none;

}
.tablinks:hover .text {

    display: block;
    position: fixed;
    right: 80px;
    background: black;
    padding: 5px;
    border-radius: 5px;
    width: auto;

}
.ol-control button{
	background:#19b069 !important
}
.ol-attribution ul
{
	display:block !important;
	font-size:0.7em !important;
	padding: 0 0em !important;
}
.ol-attribution a{
	color:white !important;
}

/*.ol-attribution ul li:nth-child(2){
	display:block !important;
}*/

.ol-attribution {
	    right: 4.5em !important;
	    bottom: 5.5em !important;
    width: 140px !important;
    height: 22px !important;
}
.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 280px;
}
.layers-control li {

    margin-left: 15px;

}
/* The popup form - hidden by default */
.legend{
	left:0 !important;
	/*top:0px !important;*/
	right:none !important;
	bottom:107px !important;
	display: none;
	position: absolute;
	border: 3px solid #f1f1f1;	
	position: absolute;
	z-index: 999;
	background:#fff;
	/*overflow:scroll;*/
}
.close_btn{
	position: absolute;
right: 2px;
top: 2px;
}
.form-popup {
  display: none;
  position: fixed;
  bottom: 80px;
  right: 85px;
  border: 3px solid #f1f1f1;
  z-index: 9;
  position: absolute;
  z-index: 999
}

/* Add styles to the form container */
.form-container {
  width: 250px;
  padding: 10px;
  background-color: white;
}
.form-container img {

    margin-left: 15px;

}
/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form-container .cancel {
  background-color: red;
}
.ol-scale-line.ol-unselectable {

    position: absolute;
    bottom: 55px;
    z-index: 99999;

}
img#image_nm {
    width: 100%;
    padding: 1%;
}
.ol-zoom {

    left: 0 !important;
    background: transparent !important;
    position: absolute !important;

}
/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

.legend_button {

    position: absolute;
    z-index: 9999;
    left: 0;
    bottom: 80px;
    padding: 10px;
    background: #395c82 !important;
    border: 1px solid #fff;

}
.popup_close{
	float:right;
	font-weight:bold;
	cursor:pointer
	
}
.sub-header{
	font-size:15px;
font-weight:bold;
margin-left:5px

}
.legend img {

    margin-left: 10px;

}
@media screen and (max-width: 500px) {
#info{display:none !important}
   .tab{
   	width: 50px
   }
   .tab button{
   	 padding: 14px 0px !important;
   }
   .tabcontent{
   	margin-right: 50px
   }
   .form-popup{right: 50px;
   bottom: 80px;

overflow: scroll;}
.ol-scale-line{display:none}
.layers-control{right:50px !important;bottom:130px !important}
}
@media screen and (max-width: 350px) {

	.tabcontent{
		width: 70%;
	}
	.info-module{
		width: 70%;
	}
	.info-heading{
		font-size: 12px
	}
	.heading{
		float: left;


    float: left;
    margin: 0;
    padding: 15px;
	}
}

ol-zoom.ol-unselectable.ol-control {
    left: 0 !important;
    background: transparent;
    position: absolute;

}
.p-l-10{
padding-left:10px
}