:root {
  --main-color-1: #2d8197;
  --main-color-2: #99c63d;
  --main-color-3: #dc8100;
}

.map-left{
	height:100%;
	overflow:scroll;
	padding:10px;
}

.map-left::-webkit-scrollbar-thumb {
  background-color: #85b4bf;
}

.map-left::-webkit-scrollbar-track {
  background-color: var(--main-color-2);
}
.map-left::-webkit-scrollbar-track-piece {
  background-color: #e8f1d8;
}
.map-left::-webkit-scrollbar {
  background-color: var(--main-color-2);
}

.map-header{
	background-image: linear-gradient(#ffffff,#ebebeb);
}

.map-language-switcher{
	position:absolute !important;
	font-size:0.9em;
	right:30px;
	top:8px;
	color: var(--main-color-1);
	text-align:right;
}

.map-language-switcher a{
	color: var(--main-color-1);
}



.map-main-search-box{
	width:150px;
}

#ajax-loader{
	position:absolute;
	top:50%;
	left:50%;
	z-index:999;
}

.close-project-list{
	width: 25px;
    height: 25px;
    margin: 5px 5px 0px 0px;
    float: right;
    display: inline;
    color: #b5b5b5;
    font-size: large;
    border-radius: 4px;
    border: 2px solid #ececec;
    text-align: center;
    vertical-align: middle;
    line-height: 1.3em;
}

.close-project-list:hover{
	cursor:pointer;
	color:#444444;
}


body.left-view .map-section .menu {
	margin-left:10%;
}

body.full-view .map-section .menu {
	margin-left:25%;
}

.map-left, .map-map{
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}



/* MENU STYLING */
@media only screen and (min-width: 943px) {
	.mega-regions{ /*Main menu div*/
		position:absolute;
		top:-24px;
	}

	.map-dd-menu {
		color:white;
		height:100%;
		margin:0px 20px 0px 20px;
		bottom:0px;
		float:left;
		text-align:center;
	}

	
	#map-map{
		width:100%;
		height:100%;
		z-index: 1;
	}

	.menu .menuclosebtn{
		display:none;
	}

	#mobile-nav{
		display:none;
	}

	.menu > ul > li > ul > li {
		font-weight:bold;	
	}

	.menu > ul > li > ul > li > ul > li {
		font-weight:normal;	
	    width: 100%;
	    padding: 6px 0;
	    margin: 0;
	    font-size: .9em;
	}

	.menu > ul > li > ul > li > ul > li:hover{
		font-weight:bolder;
		cursor:pointer;
	}

	.menu > ul > li.map-dd-organizations > ul {
		background-color:rgba(125, 169, 34, 0.9);
		width:600px;
		margin-left:-150px;
	}

	.map-dd-organizations{
		background-color:rgba(125, 169, 34, 1);
		margin:0px 5px;
	}

	.map-dd-organizations>ul li{
		background-color::rgba(125, 169, 34, 0);
		text-align:left;
	}

	.menu > ul > li{
		border-radius: 5px 5px 0px 0px;
	}

	.menu > ul > li.map-dd-regions > ul {
		background-color:rgba(95, 132, 17,0.8);
		width:600px;
	}

	.menu > ul > li.map-dd-regions  > ul > li {
		width:50%;
	}

	.map-dd-regions{
		background-color:rgba(95, 132, 17,1);
		margin:0px 5px;
	}

	.map-dd-regions>ul li{
		background-color:rgba(95, 132, 17,0);
		text-align:left;
	}



	.menu > ul > li.map-dd-actions > ul {
		background-color:rgba(82, 150, 169,0.9);
	}

	.menu > ul > li.map-dd-actions  > ul > li {
		width:100%;
	}

	.menu > ul > li.map-dd-actions  > ul {
		width:400px;
	}

	.map-dd-actions{
		background-color:rgba(82, 150, 169,1);
		margin:0px 5px;
	}

	.map-dd-actions>ul li{
		background-color:rgba(82, 150, 169,0);
		text-align:left;
	}

	.menu > ul > li.map-dd-keywords > ul {
		background-color:rgba(45, 129, 151, 0.8);
		width:700px;
	}

	.menu > ul > li.map-dd-keywords > ul > li {
		width:33%;
		padding-right:10px;
	}

	.map-dd-keywords{
		background-color:rgba(45, 129, 151, 1);
		margin:0px 5px;
	}

	.map-dd-keywords>ul li{
		background-color:rgba(45, 129, 151, 0);
		text-shadow: 1px 1px rgb(45, 129, 151);
		text-align:left;
	}



	.menu > ul > li.map-dd-larger > ul {
		background-color:#1b5a6a;
		width:400px;
	}

	.menu > ul > li.map-dd-larger > ul > li {
		width:100%;
		padding-right:10px;
	}

	.map-dd-larger{
		background-color:#1b5a6a;
		margin:0px 5px;
	}

	.map-dd-larger>ul li{
		background-color:rgba(45, 129, 151, 0);
		text-shadow: 1px 1px #1b5a6a;
		text-align:left;
	}

	.keywords-ul{
		margin-left:-350px !important;
	}

	.map-menu-row{
		position:relative;
	}

	.map-menu-div{
		height:30px;
		position:absolute !important;
		bottom:0px;
	}

	.region-li:hover, .action-li:hover{
		cursor:pointer;
		font-weight:bolder;
	}

	.project-count{
		position:absolute;
		color:white;
		font-size:x-large;
		bottom:20px;
		right:20px;
		z-index:9999;
		font-weight:bold;
		text-shadow: 1px 1px rgb(45, 129, 151);
	}

	.map-main-search-box-div{
		position:absolute !important;
		right:80px;
		top:8px;
		width:150px;
	}

}

@media only screen and (max-width: 943px) {

	.menu-container{
		position:absolute;
		top:0px;		
	}
	#map-map{
		margin-top:40px;
		width:100%;
		height:100%;
		min-height:700px;
		z-index: 1;
	}
	.menu-dropdown-icon:before {
	    content: "\f489";
	    font-family: "Ionicons";
	    display: none;
	    cursor: pointer;
	    float: right;
	    padding: 0em 0em;
	    background: #fff;
	    color: #333;
	}

	#mobile-nav:after{
		content: "\f394";
	    font-family: "Ionicons";
	    font-size: 1.75rem;
	    padding: 0;
	    float: right;
	    position: relative;
	    -webkit-transform: translateY(-25%);
	    -ms-transform: translateY(-25%);
	    transform: translateY(-25%);
	}

	#mobile-nav{
		width:100%;
		height:40px;
		background-color:  var(--main-color-2);
		padding:10px;
		color:white;
	}
	/* The side navigation menu */
	.menu {
	  height: 100%; /* 100% Full-height */
	  width: 0; /* 0 width - change this with JavaScript */
	  position: fixed; /* Stay in place */
	  z-index: 1; /* Stay on top */
	  top: 0; /* Stay at the top */
	  right: 0;
	  background-color: #111; /* Black*/
	  overflow-x: hidden; /* Disable horizontal scroll */
	  padding-top: 60px; /* Place content 60px from the top */
	  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
	}

	/* The navigation menu links */
	.menu a {
	  padding: 8px 8px 8px 32px;
	  text-decoration: none;
	  font-size: 25px;
	  color: white;
	  display: block;
	  transition: 0.3s;
	  font-weight:bold;
	}

	/* When you mouse over the navigation links, change their color */
	.menu a:hover {
	  color: #f1f1f1;
	}

	.menu ul li{
		color:white !important;
		margin:5px 0px 5px 10px;
		font-weight:bold;
	}


	/* Position and style the close button (top right corner) */
	.menu .closebtn {
	  position: absolute;
	  top: 0;
	  right: 25px;
	  font-size: 36px;
	  margin-left: 50px;
	}

	.map-main-search-box-div{
		display:none;
	}

	/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
	@media screen and (max-height: 450px) {
	  .menu {padding-top: 15px;}
	  .menu a {font-size: 18px;}
	}
}

.project-infow-link:hover{
	cursor:pointer;
	font-weight:bolder;
}

.map-project-list{
	list-style-type: none;
}

.map-project-list>li{
	background-color:  var(--main-color-1);
	margin:10px;
	color:white;
	padding:10px;
	margin-left:-20px;
	font-size: 0.9em;
	font-weight:bold;
	border-left: 10px solid var(--main-color-2);
	transition: all .3s ease-in-out;
}

.map-project-list>li:hover{
	cursor:pointer;
	transform: scale(1.05);
}

.map-goback {
	background-color:  var(--main-color-2);
	padding:6px 6px 6px 12px;
	color:white;
	font-weight:bold;
}
.map-goback:hover{
	cursor:pointer;
	margin-left:-2px;
}

.autocomplete-suggestions {
	font-size:14px;
	font-family: 'Montserrat', sans-serif !important;
	min-width:400px;
	background-color:rgba(255,255,255,0.8);
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box; 
	border: 1px solid #999; 
	background: rgba(255,255,255,0.8); 
	cursor: default; overflow: auto; 
	-webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); 
	-moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); 
	box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); 
}

.autocomplete-suggestion:hover {
	font-weight:bold;
	color: var(--main-color-1);
	cursor:pointer;
}

.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
.autocomplete-no-suggestion { padding: 2px 5px;}
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: bold; color: #000; }
.autocomplete-group { padding: 2px 5px; font-weight: bold; font-size: 16px; color: #000; display: block; border-bottom: 1px solid #000; }

.project_url{
	background-color: var(--main-color-2);
	margin:10px;
	padding:6px 15px;
	color:white;
	display:inline-block;
}

.project_url a{
	color:white;	
}
.project_url a:hover{
	color:white;
	text-decoration: none;
	font-weight: bold;
}

.blue_button{
	background-color: var(--main-color-1);
	margin:10px;
	padding:6px 15px;
	color:white;
	display:inline-block;
}

.blue_button a{
	color:white;	
}
.blue_button a:hover{
	color:white;
	text-decoration: none;
	font-weight: bold;
}

.green_button{
	background-color: var(--main-color-1);
	margin:10px;
	padding:6px 15px;
	color:white;
	display:inline-block;
}

.green_button a{
	color:white;	
}
.green_button a:hover{
	color:white;
	text-decoration: none;
	font-weight: bold;
}

#org-search-button{
	padding:7px;
	background-color:#5f840f;
	color:white;
	border:1px solid #5f840f;
	border-radius:3px;
	margin-left:10px;
}

.map-vis, .map-vis-url{
	background-color:var(--main-color-1);
	color:white;
	padding:7px;
	margin:10px;
}

.map-vis:hover, .map-vis-url:hover{
	font-weight:bold;
	cursor:pointer;
}

.map-vis div, .map-vis-url div{
	display:inline;
	width:10px;
	float:right;
	padding-right:30px;
}

.region-project-count{
	background:rgba(185, 86, 6, 0.8) !important;
	border:2px solid #f1f1f1 !important;
	color: white !important;
	border-radius: 15px !important;
	/*padding:5px 10px !important;*/
	width:33px;
	height:33px;
	text-align: center;
	vertical-align: middle;
	font-size:16px;
	font-weight:bold;
	text-shadow: 1px 1px rgb(45, 129, 151);
}

.region-project-count:hover{
	font-weight: bolder !important;
	color: yellow;
}

.pbox{
	border: 1px solid #c3c3c3;
    padding: 3px 9px;
    margin: 3px;
    display: inline-block;
    border-radius: 5px;
    color: #757575;
    font-weight: 600;
}