body { 			
			margin: 0; 			
			padding: 0; 			
			background-color: #40869B;						
			height:100vh; 		
		}	

		#maincontainer {
			/*
			background: #40869B;
			NO height: 100vh;
			*/
			
			background: #40869B;
			/* height: 100vh; */
			display: flex;
			height: calc(100vh - 65px);			
		}
		
		#iconbar {			
			left:4px;			
			width: 99.7%;			
			z-index: 10;			
			position: fixed;			
			bottom: 14px;			/* 0px */
			height: 65px;			
			border: 1px solid green;			
			background-color: #D7EBF8;			
			color: black;			
			text-align:center;			
			font-size:0.5rem;  /* 8px;	*/		 
			font-weight:bold;			
			padding-top:6px;			
			padding-right:5px;			
			border-radius:15px;		
		}		
		
		#iconbar img {			
			width: 30px;		
		}		
		
		#iconbar .icondiv {			
			display:inline-block;			
			width:55px;			
			float:left;		
		}				
		
		#map { 			
		/*
			position: absolute; 			
			top: 45px; 			
			bottom: 0; 			
			width: 79.5%; 			
			left: 20%;			
			height:84.9%;			
			border-radius: 15px; 			
			padding-right:5px;	
*/
			/* position: absolute; */
			/* top: 45px; */
			bottom: 0;
			/* width: 79.5%; */
			/* left: 20%; */
			height: calc(100vh - 127px);  /* height: 84.9%; prev:115 */
			border-radius: 15px;
			padding-right: 5px;
			flex: 1;
			position: relative;			
		}     
		
		.marker {        
			background-size: cover;       
			width: 40px;        
			height: 40px;        
			border-radius: 50%;		
			border:3px solid brown;        
			cursor: pointer;      
		}      
		
		.mapboxgl-popup {		
			width: 260px;		
			border-radius:15px;     
		}      
		
		.mapboxgl-popup-content {		 
			width: 260px;		
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);		
			border-radius: 15px;         
			font-family: 'Open Sans', sans-serif;		
			background-color:lightgrey;		
			border:1px solid green;		
			background-image: linear-gradient(to bottom right, #ebf5fb, #d6eaf8, #aed6f1,#d6eaf8,#ebf5fb); 		
			background-repeat: no-repeat; 		
			background-size: cover;    
		}	  	  
		
		div.container {		  
			text-align:center;	  
		}	 
		.container {
			max-width: 93%;
			padding-right:100px;
		}
		
		div.photo {		  
			width:20%;		  
			float:left;		  
			text-align:center;		  
			font-weight:bold;	  
		}	  	  
		
		div.poptext {		 
			width:75%; 		  
			padding-left:4px;		  
			white-space:normal;		  
			word-wrap:break-word;		  
			overflow-wrap: breakword;		  
			float:left;		  
			font-size:100%;	  
		}	  	  
		
		.sidedata {		 
			text-align: left;		 
			line-height:1.6;	  
		}	  	 
		
		.hydrogenproduction {		  
			background-image: url('images/production-min.png');	  
		}	  	  
		
		.hydrogenvalley {		  
			background-image: url('images/valley-min.png');	  
		}	  	  
		
		.hydrogenstorage {		  
			background-image: url('images/storage-min.png');	  
		}	  	  
	/*	
		.enduser {		  
			background-image: url('images/enduser-min.png');	  
		}	  	  
	*/	
		.hydrogentransport {		  
			background-image: url('images/transport-min.png');	 
		}	  
		
		.hydrogensafety {		  
			background-image: url('images/safety-min.jpg');	  
		}	  
		
		.hydrogenpolicy {		  
			background-image: url('images/policy-min.jpg');	  
		}	  
		
		.waterdesalination {		  
			background-image: url('images/desalination-min.jpg');	 
		}	  
		
		.solarenergy {		  
			background-image: url('images/solar-min.jpg');	  
		}	  
		
		.windenergy {		  
			background-image: url('images/wind-min.jpg');	  
		}	  
		
		.wastewaterpurification {		  
			background-image: url('images/purification-min.jpg');	  
		}	   
		
		/* class names have to be verified once these types are used */ 
		
		.import {		  
			background-image: url('images/import-min.jpg');	  
		}	  
	/*	
		.organization {		  
			background-image: url('images/organization-min.png');	  
		}	  
		
		.port {		  
			background-image: url('images/port-min.png');	  
		}	  
	*/	
		.undergroundstorage {		  
			background-image: url('images/underground-min.png');	  
		}	  
		
		.h2refuelingstationhrs {		  
			background-image: url('images/gasstation-min.png');	 
		}	  
		
		.h2vehicle {		  
			background-image: url('images/hydrocar-min.png');	  
		}	  
		
		.h2drones {		  
			background-image: url('images/drones-min.jpg');	  
		}	  
		
		.solarfields {		  
			background-image: url('images/fields-min.jpg');	  
		}	  
		
		.naturalgasfields {		  
			background-image: url('images/gasfields-min.jpg');	 
		}	  	  	  	  
		
		.integratedproject {		  
			background-image: url('images/integrated-min.png');	  
		}	  
		
	  	.powergeneration {		  
			background-image: url('images/powergeneration-min.jpg');	  
		}	 
		.eu {
			background-image: url('images/eu-min.jpg');	  
		}
	  	.waterreservoir {		  
			background-image: url('images/reservoir-min.jpg');	  
		}	 

	  	.industrialzone {		  
			background-image: url('images/industrialzone-min.jpg');	  
		}	
		
		.cementplant{		  
			background-image: url('images/cementplant-min.jpg');	  
		}	
		
		.rawminerals{		  
			background-image: url('images/rawminerals-min.png');	  
		}	

		.datacenter{		  
			background-image: url('images/datacenter-min.png');	  
		}			
		
		#ex {		
		/*
			display:none;		
			width: 24px;		
			height: 24px;		
			background-color: white;		
			position: absolute;		
			text-align:center;		
			font-weight:bold;		
			top: 64px;		
			right: 370px;		
			z-index: 10;			
			font-size:18px;			
			cursor: pointer;	
*/

			display: none;
			width: 24px;
			height: 24px;
			background-color: white;
			position: absolute;
			text-align: center;
			font-weight: bold;
			top: 64px;
			right: 310px;
			z-index: 10;
			font-size: 18px;
			cursor: pointer;			
		}		
		
		#ex button {
			border:none;
		}
		
		#ex2 {		
			display:none;		
			width: 24px;		
			height: 24px;		
			background-color: white;		
			position: absolute;		
			text-align:center;		
			font-weight:bold;		
			top: 64px;		
			left: 380px;		
			z-index: 10;			
			font-size:18px;			
			cursor: pointer;				
		}			  
		
		#sidebar {	
/*		
			display:none;			
			font-family: 'Arial';			
			height:100%;			
			width:100%;			
			background-color: white;			
			position: absolute;			
			z-index: 5;			
			padding:10px; 			
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);			
			overflow-y:auto; 			
			font-size:16px;			
			background-image: linear-gradient(to bottom right, #ebf5fb, #d6eaf8, #ebf5fb); 	
*/

			display: none;
			font-family: 'Arial';
			height: 100%;
			width: 100%;
			background-color: white;
			position: absolute;
			z-index: 5;
			padding: 10px;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			overflow-y: auto;
			font-size: 16px;
			background-image: linear-gradient(to bottom right, #ebf5fb, #d6eaf8, #ebf5fb);			
		}	  	  
		
		.sidepic {		  
			border-radius: 10px; 	  
		}  	  
		
		.toppic {		  
			width:80%;		  
			margin-left:10%;		  
			margin-right:10%;		
		}  	  
		
		#searchbox {		
		/*
			font-family: 'Arial';		
			width: 19%;		
			height: 84.9%;		
			background-color: white;		
			border:1px solid blue;		
			position: absolute;		
			top: 45px;		
			left: 5px;		
			z-index: 5;		
			border-radius: 15px; 		
			padding:10px; 		
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);		
			overflow-y:auto; 		
			font-size:16px;		
			background-image: linear-gradient(to bottom right, #ebf5fb, #d6eaf8, #ebf5fb); 	  
			*/
			
			font-family: 'Arial';
			/* width: 19%; */
			height: calc(100vh - 127px); /* height: 84.9%; prev:115 */
			background-color: white;
			border: 1px solid blue;
			/* position: absolute; */
			/* top: 45px; */
			/* left: 5px; */
			z-index: 5;
			border-radius: 15px;
			padding: 10px;
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
			overflow-y: auto;
			font-size: 16px;
			background-image: linear-gradient(to bottom right, #ebf5fb, #d6eaf8, #ebf5fb);
			width: 280px;
			background: #eee;
			z-index: 10;
			position: relative;
			margin-right: 5px;			
		}	  	  	  
		
		#search {		
			width:95%;		
			position: absolute;		
			top: 15px;		
			left: 50px;		
			z-index: 5;		  	  
		}	  	  
		
		#reset {		
				/* width:95%; */		
				position: fixed;		
				top: 65px;		
				left: 320px;		
				z-index: 50;	  	  
		}	  	  
		
		#noresults {		
			border-radius: 10px; 		
			border:1px solid black;		
			width:250px;		
			position: absolute;		
			top: 25px;		
			left: 480px;		
			z-index: 5;		  		
			background-color:white;		
			color:red;		
			font-weight:bold;		
			font-size:110%;		
			display:none;		
			text-align:center;		
			box-shadow: rgba(0, 0, 0, .1) 0 2px 4px 0;		
			box-sizing: border-box;			  
		}	  	  	
		
		.searchbutton, .resetbutton {	  
			background-color: #E6F0F7;  /* #D7EBF8; #306472;   #40869B;   #13aa52; */	  
			border: 1px solid #13aa52;	  
			border-radius: 10px;	  
			box-shadow: rgba(0, 0, 0, .1) 0 2px 4px 0;	  
			box-sizing: border-box;	  
			color: #000;	  
			cursor: pointer;	  
			font-family: "Akzidenz Grotesk BQ Medium", -apple-system, BlinkMacSystemFont, sans-serif;	  
			font-size: 1.0rem;	  
			font-weight: 600;	  
			outline: none;	  
			outline: 0;	  
			padding: 7px 15px;	  
			text-align: center;	  
			/* transform: translateY(0);	  
			transition: transform 150ms, box-shadow 150ms;	  
			user-select: none;	  
			-webkit-user-select: none;	  
			touch-action: manipulation;	 */
		}  		
		
		#searchfield {		
			width:150px;		
			border-radius:15px;		
			line-height:20px;		
			padding:5px; 		
			font-size:16px;		
			vertical-align:middle;	
		}	
		
		.searchbutton:hover {	  
			background-color: #00913C;	  
			border: 1px solid #00913C;	  
			box-shadow: rgba(0, 0, 0, .15) 0 3px 9px 0;	  
			transform: translateY(-2px);
		}		
		
		#searchimg {		
			vertical-align:middle;		
			width:45px;		
			margin-top:5px;	
		}		
		
		#searchbut {		
			height:40px;		
			background-color:transparent;		
			width:30px;		
			border:0px;		
			cursor:pointer;	
		}		
		
		#searchiconcontainer {		 
			text-align:center;	
		}		
		
		#barcontainer {		
		/*
			display:none;		
			position: absolute;		
			top: 60px;		
			right: 50px;		
			border-radius: 15px; 		
			overflow:hidden;		
			width: 350px;		
			height: 600px;			
			border:1px solid blue;	
*/
			display: none;
			position: absolute;
			top: 60px;
			right: 20px;
			border-radius: 15px;
			overflow: hidden;
			width: 320px;
			height: 600px;
			border: 1px solid blue;			
		}		
		
		.nores {		
			color:red;		
			font-weight:bold;	
		}	
		
	#page-container {
		position:absolute;
		background-image: url('images/bkgr-pages.jpg');		
		width:100%;
		font-family:arial;
		top:50px;
		font-size:1em;
		height:auto;
		min-height:100%;
	}
	.page-header {
		font-size:1em;
		font-weight:bold;
		text-align:center;	
		padding-top:15px;	
		padding-bottom:25px;			
	}
	.text-block {
		font-size:0.4em;
		padding-left:25px;
		padding-right:25px;
		padding-top:3px;
		padding-bottom:15px;
		margin-left:20%;
		margin-right:20%;
		background-color:white;
		border-radius: 30px;	  
		/*background-image: url('images/bkgr-pages.jpg'); */
	}
	.sm-caption {
		text-align:center;
		font-size:2.2em;
	}
	.reg-text {
		font-size:1.6em !important;
		text-align:justify;
	}
	.text-ul {
		font-size:1.6em !important;
	}
	.pic-bar {
		padding-top:25px;
		padding-bottom:25px;
		margin-left:15%;
		margin-right:15%;
		text-align:center;
	}
	.pic-bar span {
		width:3%;
		display: inline-block;
	}
	.pic-bar img {
		height:135px;
	}	
	
	#searchbox input, #searchbox textarea,  #searchbox button,  #searchbox select {
		width:150px;
	}	
	
	
/* added for contact form */
	.text-block input, .text-block textarea,  .text-block button,  .text-block select {
		font-size:160%;
		width:500px;
		border: 1px solid black;
		background: #FFFCF7;
	}
	.text-block select {
		height:28px;
	}
	#subbutton {
		color:white;
		font-weight:bold;
		background:#40869B;
		height:40px;
		font-size: 1.4rem;
	}
	::placeholder {
	  color: #666666;
	  opacity: 1; /* Firefox */
	}

	::-ms-input-placeholder { /* Edge 12 -18 */
	  color: #666666;
	}	
	
	.caption {
		font-size:170%;
		font-weight:bold;
	}
	
	.check {
		font-size:160%;
	}
	
	#consent {
		height:25px;
		width:25px;
		border:2px solid black;
	}
	
	.contactform {
		border-radius:70px;
	}
	.ending {
		font-size:150%;
		text-align:center;
	}
	
	.whatsapp {
		font-size:75%;
		text-align:center;
	}	
	
	.whatsapp a {
		color:#0a509c;
		text-decoration: underline;
	}
	
	.whatsapp a:hover {
		color:#083769;
	}
	
	/* for message sent page */
	.sentmail {
		font-size:40%;
		text-align:center;
	}
	
	#myform {
		width:500px;
		margin-left:auto;
		margin-right:auto;
	}
	
	.zoom-legend .icondiv {
	  font-size: 0.85rem; /* Enlarged font for better accessibility */
	  margin-right: 6px;
	  font-weight:400;
	}
	.zoom-legend #iconbar {
		height:130px;
	}
	#toggleZoom {
		font-size:0.9rem;
		float:right;
	}
	.zoom-legend #iconbar  .icondiv {
		width:65px;
	}
	
	#close-search {
		display:none;
	}

/* till here added for contact form */

/* for PDF Viewer */
    #viewer { 
		width: 100vw; 
		height: 100vh; 
		overflow: auto; 
		background: #666; 
	}
    .canv { 
		display: block; 
		margin: 10px auto; 
	}	
	.conf_name {
		text-align:center;
		margin-top:5px;
		margin-bottom:5 px;
	}	
	.annotationLayer a {
	  position: absolute;
	  display: block;
	}	
	.pdfframe {
		width:80%;
		margin-left:10%;
		margin-right:10%;
		height:800px;
	}
	.submenu {
		font-size:80%;
	}
	#copy {
		position:fixed;
		color:white;
		font-size:1.4em;
		bottom:0px;
		text-align:center;
		width:100%;
	}
	
		
	@media (min-width: 768px) {	  
		.searchbutton {		
			padding: 10px 30px;	  
		}	
	}	  
	
	@media (max-width: 1400px) {
		
		#close-search {
			line-height:20px;
			text-align:center;
			width:100%;
			font-size:0.9rem;
			color: darkblue;
			cursor:pointer;
			display:block;

			/*
			position:absolute;
			bottom:4px;
			line-height:20px;
			text-align:center;
			width:100%;
			font-size:0.9rem;
			font-weight:bold; 
			color: darkblue;
			cursor:pointer;
			background-color:white;
			box-sizing: border-box;
			z-index:105;
			*/
		}		
		
		#searchfield {
			width:125px;
			text-align:left;
		}	
		
		#map {
			left:1%;
			right:1%;
			width:98%;
			height: calc(100vh - 115px);  /* height:87%;		 */
		}
		
		#reset {
			top: 55 px;
			/* left: 10px; */
		}		
		
		#searchboxmob {		
			font-family: 'Arial';		
			width: 74%;		
			height: 80%;		
			margin-left: 13%;
			margin-right: 13%;			
			background-color: white;		
			border:1px solid blue;		
			position: absolute;		
			top: 65px;		
			z-index: 100;		
			border-radius: 15px; 		
			padding:10px; 		
			box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);		
			overflow-y:auto; 		
			font-size:1rem;		
			background-image: linear-gradient(to bottom right, #ebf5fb, #d6eaf8, #ebf5fb); 	  
			overflow-y: auto;
		}	  

		#searchboxmob textarea,  #searchboxmob button,  #searchboxmob select {
			width:180px;
		}
		#searchboxmob input {
			width:160px;
		}
		
		#search {		
			width:95%;		
			position: absolute;		
			top: 15px;		
			left: 50px;		
			z-index: 5;		  	  
		}			
		
		#iconbarmob {
			display: grid;
			position: absolute;
			text-align: center;
			padding-top: 10px;
			padding-bottom: 10px;
			grid-template-columns: repeat(4, 1fr);
			/* grid-template-rows: repeat(5, auto); */
			/* grid-auto-flow: column; */
			gap: 10px;
			width: 80%;
			top: 100px;
			margin-left: 10%;
			margin-right: 10%;
			z-index: 100;
			background-color: white;
			color: black;
			border:2px solid black;
		}	

		#iconbarmob img {			
			width: 30px;		
		}		
		
		#iconbarmob .icondiv {			
			display:inline;			
			width:65px;			
			float:none;	
			font-size:0.7rem;			
		}	

		#featurebar {
			left: 4px;
			right: 4px;
			display: flex;
			justify-content: center;
			gap: 15px;
			z-index: 10;
			position: fixed;
			bottom: 0px;
			border: 1px solid green;
			background-color: #D7EBF8;
			color: black;
			text-align: center;
			font-size: 1rem;
			font-weight: bold;
			padding-top: 6px;
			padding-right: 5px;
			border-radius: 15px;	
		}	
		#featurebar .bar-item {
			text-align: center;
			border: 1px solid black;
			background-color: white;
			border-radius: 15px;
			padding-left: 7px;
			padding-right: 7px;
			/* padding-top: 5px; */
			padding-bottom: 5px;
			bottom: 2px;
			margin-top: 5px;
			margin-bottom: 5px;
			position: relative;		
		}	
		
        .pictext-container	{
			display: block;
		}
		.pictext-container img	{
			  float: left;
			  width: 100px;
			  margin: 0 1em 1em 0;			
		}
		.page-header {			
			padding-top:10px;
			padding-bottom: 5%;
			font-size: 0.9em;
		}
		.text-block {
			margin-left:2%;
			margin-right: 2%;
			padding-left:6px;
			padding-right:6px;
			padding-bottom:5px;
			width:96%;
		}
		.text-block input, .text-block textarea,  .text-block button,  .text-block select {
			font-size:150%;
			width: 95%;
		}
		.check {
			font-size:150%;
		}
		#myform {
			width:100%;
			padding-left:5px;
		}	
		.contactform {
			border-radius: 20px;
		}	
		.whatsapp {
			font-size: 55%;
		}
		body {
			width:100%;
			height:100vh;
		}
		.reg-text {
			padding-left: 4px;
			padding-right: 4px;
		}
		.pic-bar {
			padding-bottom: 15px;
		}		
		.pic-bar img {
			height: 60px;
			margin-bottom: 10px;
		}		
		
	}
	
	@media (min-width: 768px) {	  
        .pictext-container	{
			display: flex;
			align-items: flex-start;
		}
		.pictext-container img	{
			  float: none;
			  width: 120px;
			  margin: 0 1em 0 0;			
		}
	}