/*FRONT END UI SPECIFIC CSS*/
:root { 
	--iconcolour: #0598d5;
	/* --iconcolour:#fff; */
}

img{
	
		max-width: 100%;
	max-height: 100%;
}

body {
	margin: 0;
	padding: 0;
}

h1 {
	font: 15px Arial, Helvetica, sans-serif;
	font-weight: lighter;
	color: #0598d5;
}

h6{
	
	font: 25px Roboto Condensed, Arial, Helvetica, sans-serif;
	font-weight:100;
	color: #617592;
	
}

li{
    margin: 25px 0;
}

p {
	font: 12px Arial, Helvetica, sans-serif;
	color: #000;
}

span {

  vertical-align: middle;
  
}

/* Welcome */

.centerdivtext {
	display: flex; 
	/* justify-content: center; */
	align-items: center;
	height: 50px;
	text-align: left;
	/* width: 100%; */
}

.topalign{
	
	display: flex;
	justify-content: center;
	align-items: top;
	height: 50px;

}

/*Menu*/
div .mainlogo {
	background-image: url("img/NAME_ICON_FULL_500x150.png");
	background-repeat: no-repeat;
	background-color: transparent;
	height: 155px;
	margin:3px;
	/*z-index: 100;
	float:left;*/
}

/* @media only screen and (max-height: 800px) {
	.mainlogo {
		display: none;
	}
} */

@media only screen and (max-width: 800px) {
	.mainlogo {
		display: none;
	}
}

div .logo {
	background-image: url("img/NAME_ICON_FULL_200x50.png");
	background-repeat: no-repeat;
	background-color: transparent;
	height: 50px;
	width:200px;
	margin:3px;
	/*float:left;*/
}

.hamburger {
	width: 30px;
	height: 3px;
	background-color: #0598d5;
	margin: 6px 0;
}

/* logobar */
.logobar {
	margin: auto;
	border-radius: 2px;
	position: absolute;
	top: 5px;
	left: 2px;
	z-index: 1050;
	min-width: 60%;
	max-width: 65%;
	min-height: 55px;
	background-color: transparent;
	opacity: 1;
	display: flex;
	border-color: #0598d5;
	border-width: 1px;
	padding: 6px;
	overflow: viisble;
}

/* drop Down Menu */
.dropbtn {
	/*background-color: #04AA6D;*/
	color: white;
	padding: 0px 20px 0px 0px;
	font-size: 16px;
	border: none;
}

.dropdown {
	position: relative;
	display: inline-block;
	z-index: 10000;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f1f1f1;
	min-width: 100px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1000;
	border: 1px solid #0598d5;
	border-radius: 2px;
}

.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	width: 10em;
	font-family: sans-serif;
	font-weight: bold;
	margin-top: 3px;
	margin-bottom: 3px;
	margin-left: 3px;
	margin-right: 3px;
	margin-bottom: 3px;
	font-size: smaller;
	display: block;
}

.dropdown-content a:hover {
	background-color: rgba(5, 152, 213, 0.3);
}

.droplink {
	border-bottom: 1px solid #e0e0e0;
}

.dropdown:hover .dropdown-content {
	display: block;
}

/* Infobar */
.infobar {
	border: 1px solid #0598d5;
	border-radius: 2px;
	position: absolute;
	margin: 0 auto;
	top: 8px;
	right: 8px;
	z-index: 10000;
	min-width: 10%;
	max-width: 35%;
	min-height: 20%;
	background-color: #FFFFFF;
	opacity: 1;
	display: inline-block;
	border-color: #0598d5;
	border-width: 1px;
	z-index: 10000;
	overflow: hidden;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	visibility:hidden;
}

/* @media only screen and (max-width: 500px) {
	.infobar {
		display:none;
	}
	
	.legend{
		display:none;
	}
}  */

#infobar .row {
	font-family: sans-serif;
	margin-bottom: 2px;
	margin-left: 3px;
	margin-right: 3px;
	background-color: rgb(0 0 0/ 0%);
	border-bottom: 1px solid #e0e0e0;
	min-width: 360px;
}

#infobar .caption-column {
	font-family: sans-serif;
	font-weight: bold;
	font-size: 12px;
}

#infobar .header-column {
	font-family: sans-serif;
	font-weight: bold;
	font-size: 14px;
	padding-top: 2px;
}

#infobar .value-column {
	font-family: sans-serif;
	font-weight: normal;
	font-size: 12px;
	color: #0598d5;
}

#infobar .closeicon {
/* 	top: 2px;
	text-align:right; */
	top: 2px;
    right: -15px;
    text-align: right;
}

img .close-icon{
	
	font-size: 16px;
	/*padding-top: 2px;*/
	top: 2px;
	
}
/*MAPPING SPECIFIC CSS*/
#map {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
}

/*Legend specific*/
.legend {
	border: 1px solid #0598d5;
	border-radius: 2px;
	position: absolute;
	margin: 0 auto;
	/* 	left: 10px; */
	/* 	bottom: 10px; */
	bottom: 30px;
	/*right: 8px;*/
	left: 8px;
	/*transform : translate( -50%, -50%); */
	z-index: 10000;
	min-width: 20%;
	max-width: 50%;
	min-height: 20%;
	background-color: #FFFFFF;
	opacity: 1;
	/*text-align: center;*/
	display: inline-block;
	border-color: #0598d5;
	border-width: 1px;
	z-index: 1000;
	/*overflow: auto;*/
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

@media only screen and (max-width: 299px) {
	.legend {
		visibility:hidden;
	}	
}

@media only screen and (max-width: 299px) {
	.infobar {
		visibility:hidden;		
	}
}

.legend-header2 {
	margin: 25px 5px 5px 5px;
	height: 30px;
	padding: 5px 5px 5px 10px;
	font-size: 11pt;
	font-weight: light;
	color: #0598d5;
	/*text-align: center;
	
	line-height: 20px;
	background-color: #006f5e;
	*/
}

.legendtext{
	
	line-height: 0.8em;
}

.legendtextbold{	
	font-weight: bold;
}

.legend span {
	position: relative;
	bottom: 3px;
	margin-left: 15px;
	font-size: 11pt;
}

.legend span data-points{	
	font-size: 5px;	
}


.legend i {
	width: 10px;
	height: 10px;
	border-style: solid;
	border-width: 1px;
	border-color: #000;
	float: left;
	margin: 2px 2px 2px 15px;
	opacity: 1;
	padding-left: 10px;
}



.legend i.icon {
	background-size: 18px;
	background-color: rgba(255, 255, 255, 1);
}

/* New Tabbed Legend */

/* .legend { */
/* 	border: 1px solid #0598d5; */
/* 	border-radius: 2px; */
/* 	position: absolute; */
/* 	margin: 0 auto; */
/* 	/* 	left: 10px; */ */
/* 	/* 	bottom: 10px; */ */
/* 	bottom: 20px; */
/* 	right: 8px; */
/* 	/*transform : translate( -50%, -50%); */ */
/* 	z-index: 10000; */
/* 	min-width: 10%; */
/* 	max-width: 50%; */
/* 	min-height: 20%; */
/* 	background-color: #FFFFFF; */
/* 	opacity: 1; */
/* 	/*text-align: center;*/ */
/* 	display: inline-block; */
/* 	border-color: #0598d5; */
/* 	border-width: 1px; */
/* 	z-index: 1000; */
/* 	/*overflow: auto;*/ */
/* 	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); */
/* } */


/* Style the tab */

.tab {
  overflow: hidden;
  border: 1px solid #0598d5;
  background-color: #E6F4FA;
  
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  font-weight: bold;
  color: #0598d5
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: rgba(5, 152, 213, 0.3);
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #50B6E1;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  text-align: left;
}




.leaflet-container.pointer-cursor-enabled {
	cursor: default;
}

/* Grouped Layer Control */
.leaflet-control-layers-group-name {
	font-weight: bold;
	margin-bottom: .2em;
	display: block;
}

.leaflet-control-layers-group {
	margin-bottom: .5em;
}

.leaflet-control-layers-group label {
	padding-left: .5em;
}

/*Markers*/
.omsmarker {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: var(- -iconcolour);
	border: 1px solid #000;
	opacity: 0.85;
}

/* "#0598d5" */
.apesmarker {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #0598d5;
	border: 1px solid #000;
	opacity: 0.85;
}

.microbialmarker {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: orange;
	border: 1px solid #000;
	opacity: 0.85;
}

.microplasticsmarker {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: yellow;
	border: 1px solid #000;
	opacity: 0.85;
}

.pahsmarker {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: green;
	border: 1px solid #000;
	opacity: 0.85;
}

/* Pop Up  */
.popup-header {
/* 	margin: 2px 2px 2px 2px; */
	height: 17px;
	/*padding: 2px 2px 2px 2px;
	font-size: 11pt;*/
	font-weight: light;
	color: #0598d5;
	overflow: auto;
}

.row {
	display: flex; /* equal height of the children */
}

.col {
	flex: 1; /* additionally, equal width */
	padding: 10px 10px 10px 10px;
	
}

.pic {
	padding: 10px 2px 10px 10px;
	float: left;
	z-index: 9999;
}

.text{
	font: 20px Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-stretch: extra-condensed;
	color: #000;
	border: 1px solid #ccc;
	border-radius: 2px;
	margin:5px;
	background-color:white;
	z-index: 999;
	
	
}

.pgragh{
	
	font: 20px Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #000;
	
	
	
}

.modal-header-title{
	margin-bottom:0;
	line-height:1.5;
	
	}
	

.modal-Text {
/* 	font-family: sans-serif;
	font-weight: light;
	font-size: 10px;
	font-weight:bold; */
	
	font: 18px Arial, Helvetica, sans-serif;
	font-weight: light;
	font-stretch: extra-condensed;
	color: #000;
}

.modaldiv {
	z-index: 9999;
}

.hover figure img {
	/*width: 200px;*/
	height: auto;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.hover figure:hover img {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
/*   max-height: 10vh; */
/*   max-width: 10vh; */
  z-index:13000;

}

.leaflet-popup-content {
/*     max-width: 600px; */
/*     max-height: 400px; */
/*     overflow-y:auto */

max-height: 20.75em;
    overflow-y: auto;
    font-size:1em;
    line-height:1.25em;
    border-radius: 2px;
}

/* Leaflet layer group css */

    .leaflet-control-layers-group-name {
      font-weight: bold;
      margin-bottom: .2em;
      display: block;
    }

    .leaflet-control-layers-group {
      margin-bottom: .5em;
	  
    }

    .leaflet-control-layers-group label {
      padding-left: .5em;
    } 
    
    .leaflet-control-layers {
        max-height: 800px;
        overflow: auto;
      }
      
      .divtextalignleft{
      
      text-align:left;
      
      }

    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
    }
    
 @media only screen and (min-device-width: 350px) and (max-device-width:
	667px){
	/* styles for mobile browsers smaller than 480px; (iPhone) */
	.legend {
		border: 1px solid #0598d5;
		border-radius: 2px;
		position: absolute;
		margin: 0 auto;
		/* 	left: 10px; */
		/* 	bottom: 10px; */
		bottom: 20px;
		/*right: 8px;*/
		left: 8px;
		/*transform : translate( -50%, -50%); */
		z-index: 10000;
		min-width: 10%;
		max-width: 40%;
		max-height: 60%;
		background-color: #FFFFFF;
		opacity: 1;
		/*text-align: center; */
		display: inline-block;
		border-color: #0598d5;
		border-width: 1px;
		z-index: 1000;
		/*overflow: auto; */
		box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
		overflow: scroll;
	}
	.legend span {
		position: relative;
		bottom: 3px;
		margin-left: 15px;
		font-size: 8pt;
	}
	.legend i {
		width: 4px;
		height: 4px;
		/* 	border-radius: 50%; */
		border-style: solid;
		border-width: 1px;
		border-color: #000;
		float: left;
		margin: 2px 2px 2px 15px;
		opacity: 1;
		padding-left: 5px;
	}
	
	.legendpointcounter{
	
	font-size: 5px;
	
	}
	
	.infobar {
	border: 1px solid #0598d5;
	border-radius: 2px;
	position: absolute;
	margin: 0 auto;
	top: 8px;
	right: 8px;
	z-index: 10000;
	min-width: 10%;
	max-width: 65%;
	max-height: 40%;
	background-color: #FFFFFF;
	opacity: 1;
	display: inline-block;
	border-color: #0598d5;
	border-width: 1px;
	z-index: 10000;
	overflow: hidden;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	font-size: 8pt;
	overflow: scroll;
}

#infobar .caption-column {
	font-family: sans-serif;
	font-weight: bold;
	font-size: 8pt;
}

#infobar .header-column {
	font-family: sans-serif;
	font-weight: bold;
	font-size: 10pt;
	padding-top: 2px;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 8pt;
}

.legend-header2 {
	margin: 25px 5px 5px 5px;
	height: 15px;
	padding: 5px 5px 5px 10px;
	font-size: 8pt;
	font-weight: light;
	color: #0598d5;
	/*text-align: center;
	
	line-height: 20px;
	background-color: #006f5e;
	*/
}

}

@media only screen and (min-device-width: 668px) and (max-device-width:
	1024px) and (orientation:portrait) {
	/* styles for mobile browsers smaller than 480px; (iPhone) */
	.legend {
		border: 1px solid #0598d5;
		border-radius: 2px;
		position: absolute;
		margin: 0 auto;
		/* 	left: 10px; */
		/* 	bottom: 10px; */
		bottom: 20px;
		/*right: 8px;*/
		left: 8px;
		/*transform : translate( -50%, -50%); */
		z-index: 10000;
		min-width: 10%;
		max-width: 20%;
		max-height: 60%;
		background-color: #FFFFFF;
		opacity: 1;
		/*text-align: center; */
		display: inline-block;
		border-color: #0598d5;
		border-width: 1px;
		z-index: 1000;
		/*overflow: auto; */
		box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	}
	.legend span {
		position: relative;
		bottom: 3px;
		margin-left: 15px;
		font-size: 7pt;
	}
	.legend i {
		width: 5px;
		height: 5px;
		/* 	border-radius: 50%; */
		border-style: solid;
		border-width: 1px;
		border-color: #000;
		float: left;
		margin: 2px 2px 2px 15px;
		opacity: 1;
		padding-left: 5px;
	}
	
	.infobar {
	border: 1px solid #0598d5;
	border-radius: 2px;
	position: absolute;
	margin: 0 auto;
	top: 8px;
	right: 8px;
	z-index: 10000;
	min-width: 10%;
	max-width: 65%;
	max-height: 40%;
	background-color: #FFFFFF;
	opacity: 1;
	display: inline-block;
	border-color: #0598d5;
	border-width: 1px;
	z-index: 10000;
	overflow: hidden;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	font-size: 8pt;
	overflow: scroll;
}
}

@media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }