  
  @font-face {
    font-family: 'Arkipelago'; /*a name to be used later*/
    src: url('../fonts/arkipelago.ttf'); /*URL to font*/
}
  
  @font-face {
    font-family: 'Burbank'; /*a name to be used later*/
    src: url('../fonts/BurbankBigCondensed-Bold.otf'); /*URL to font*/
}

.ez-companion, .ez-video-wrap{background: black !important;}
.ez-companion{visibility:hidden !important;}
  .ezmob-footer{background: transparent !important;}

  html, body {
				width:100%;
				height:100%;
				margin:0;
				padding:0;
				background-image: url("../img/bg.jpg");
				background-position: center; /* Center the image */
				background-repeat: repeat-y; /* Do not repeat the image */
				background-size: cover;
			}
			
			 #page {
				width:100%;
				height:100%;
				margin:0;
				margin-top:0px;
				padding:0;
				
				display: flex;
			}
			
			#copilot_title
			{
				width:90%;
				height:50px;
				position:absolute;
				left:0%;
				top:40px;
			}
			#copilot_title1
			{
				width:74%;
				height:100px;
				position:absolute;
				left:13%;
				top:120px;
				text-align:center;
				font-family: 'Burbank';
				font-size:18pt;
			}
			#copilot_title1 b {color:#34ff80;font-weight:normal;}
			
			
			
			
			
			#title_left
			{
				float: left;
				position: relative;
			}
			#title_right
			{
				float: right;
				position: relative;
				height:50px;
			}
			#copilot_title_img{ 
				width:auto;
				height:32px;
				position: relative;
				top:12px;
				}
			#copilot { font-size: 2.75em; font-family: 'Evogria', sans-serif; color:#34ff80;font-weight:500; }
			#copilot b { font-size: 70%;  font-family: 'Evogria', sans-serif; font-weight:500; color:#34ff80;}
			
			
			
			#title_right {
				float: right;
				position: absolute;
				height: 32px;
				top: 0px;
				right: 10px;
			}
		
			
			#alsoavailable { 
			font-size:16px;  
			font-family: 'Evogria', sans-serif;  
			color:#34ff80;
			position:absolute;
			width:300px;
			left:40px;
			top:150px;
			}
			
			#alsodivider { 
	 
			background-color:#FFFFFF;
			position:absolute;
			width:140px;
			height:2px;
			left:120px;
			top:190px;
			}
			#alsoavailable b {font-size: 22px;font-weight:normal;}
			
			#alsoavailable_apple {
			position:relative;
			width:180px;
			height:60px;
			margin:auto;
			margin-top:40px;
			
			}
			#alsoavailable_android {width:180px;
			position:relative;
			height:60px;
			margin:auto;
			margin-top:10px;
			
			}
			#alsoavailable_amazon {width:180px;
			position:relative;
			height:60px;
			margin:auto;
			margin-top:10px;
			
			}
			
			#alsoavailable_google {width:300px;
			position:absolute;
			height:100px;
			left:40px;
			top:410px;
			}
			
			#copilot_title2
			{
				width:74%;
				height:80px;
				position:absolute;
				left:13%;
				top:50px;
				text-align:center;
				font-family: 'Evogria', sans-serif;
				font-size:14pt;
			}
			#copilot_title2 b {color:#34ff80;}
			
			
			
			.names{
				 text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
				color:#FFFFFF;
				text-align:center;
				font-family: 'Evogria', sans-serif;
				font-size:10pt;			
				font-weight:500;				
			}
			
			.spotnames{
				 text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
				color:#FFFFFF;
				text-align:center;
				font-family: 'Evogria', sans-serif;
				font-size:8pt;			
				font-weight:500;				
			}
			
			
			/*mobile*/
			
			
			#copilot_dialog_mobile { font-size: 3.75em; font-family: 'Evogria', sans-serif; color:#34ff80;font-weight:500; }
			#copilot_dialog_mobile b { font-size: 70%;  font-family: 'Evogria', sans-serif; font-weight:500; color:#34ff80;}
			#copilot_title1_dialog_mobile
			{
				width:74%;
				height:100px;
				position:absolute;
				left:13%;
				top:120px;
				text-align:center;
				font-family: 'Burbank';
				font-size:10pt;
				margin-top:40px;
			}
			#copilot_title1_dialog_mobile b {color:#34ff80;font-weight:normal;}
			
			
			
			/* Dialog*/
			
			
			#sharetitle{ font-size: 1.75em; font-family: 'Evogria', sans-serif; color:#ffffff;font-weight:500; padding-top:20px;padding-left:60px;padding-right:60px;padding-bottom:20px}
			#sharetitle b{color:#34ff80; }
			
			#sharetitle1{ font-size: 1.25em; font-family: 'Evogria', sans-serif; color:#ffffff;font-weight:300; padding-top:0px;padding-left:60px;padding-right:60px;padding-bottom:40px}
			
			
			
			
			#getcode { font-size: 1.5em; font-family: 'Evogria', sans-serif; color:#ffffff;font-weight:700; cursor: pointer;width:100%;}
			#getcode b{  color:#34ff80;}
			
			#shareor{padding-top:20px;padding-bottom:20px;font-size: 1.5em; font-family: 'Evogria', sans-serif;color:#ffffff;}
			
			
			#sharedone{	padding-top:20px;padding-bottom:20px;font-family: 'Burbank';font-size:10pt; cursor: pointer;}
			
			#validatecode{	font-size: 1em; font-family: 'Evogria', sans-serif; color:#ffffff; cursor: pointer;padding-left:20px;}
			#code{font-size: 1.5em; font-family: 'Evogria', sans-serif;color:#ffffff; background: transparent;}
		
		    #logintitle{ font-size: 1.75em; font-family: 'Evogria', sans-serif; color:#ffffff;font-weight:500; padding-top:20px;padding-left:60px;padding-right:60px;padding-bottom:40px}
			#logintitle b{color:#34ff80; }
			
			#loginexplanation{ font-size: 1em; font-family: 'Evogria', sans-serif; color:#ffffff;font-weight:700; cursor: pointer;width:60%;text-align:left;}
			#loginexplanationb{  color:#34ff80;}
			
				#loginok a{ font-size: 1.75em; font-family: 'Evogria', sans-serif; color:#ffffff;font-weight:500; padding-left:60px;padding-right:60px;text-decoration:none;}
				#loginok :hover{ color:#34ff80;}
				
				#logindone{	padding-top:20px;padding-bottom:20px;font-family: 'Burbank';font-size:10pt; cursor: pointer;}
		
		
		
		
			#getshareablemap { font-size: 1.5em; font-family: 'Evogria', sans-serif; color:#ffffff;font-weight:700; cursor: pointer;width:100%; padding-top:20px;padding-bottom:40px}
			#getshareablemap b{  color:#34ff80;}
			
			#shareablemaplink { font-size: 1.5em; font-family: 'Evogria', sans-serif; color:#ffffff;font-weight:700; cursor: pointer;width:100%;}
			#shareablemaplink b{  color:#34ff80;}
			#shareablemaplink_text { font-size: 1.25em; font-family: 'Evogria', sans-serif; color:#ffffff;font-weight:700; cursor: pointer;width:100%;padding-top:20px;padding-bottom:20px}
			#shareablemaplink_text b{  color:#34ff80;}
			
			#shareableadminmaplink { font-size: 1.5em; font-family: 'Evogria', sans-serif; color:#ffffff;font-weight:700; cursor: pointer;width:100%;}
			#shareableadminmaplink b{  color:#34ff80;}
			#shareableadminmaplink_text { font-size: 1.5em; font-family: 'Evogria', sans-serif; color:#ffffff;font-weight:700; cursor: pointer;width:100%;padding-top:20px;padding-bottom:20px}
			#shareableadminmaplink_text b{  color:#34ff80;}
			
			#newshareable_map{ float:left;font-size: 1.25em; font-family: 'Evogria', sans-serif; color:#ffffff;font-weight:500; cursor: pointer;width:33.3%;text-align:left;padding-left:10px;}
			#newshareable_map:hover{ color:#34ff80;}
			
			#rename_shareablemap{ float:left;font-size: 1.25em; font-family: 'Evogria', sans-serif; color:#ffffff;font-weight:500; cursor: pointer;width:33.3%;}
			#rename_shareablemap:hover{ color:#34ff80;}
			
			#delete_shareablemap{ float:left;font-size: 1.25em; font-family: 'Evogria', sans-serif; color:#ffffff;font-weight:500; cursor: pointer;width:33.3%;text-align:right;padding-right:10px;}
			#delete_shareablemap:hover{ color:#34ff80;}
			
			#shareablemap_bottom{width:80%;padding-bottom:40px;}
			
			#shareablemap_list{background:rgba(255, 255, 255, 0.1);width:80%;height:220px;overflow: overflow-y: scroll;}
			#shareablemap_list:hover{background:rgba(255, 255, 255, 0.2);width:60%;height:220px;overflow: overflow-y: scroll;}
			
			.shareable_item{ font-size: 1.2em; font-family: 'Evogria', sans-serif; color:#ffffff;font-weight:300; cursor: pointer;width:100%;text-align:left;padding-left:20px;padding-top:10px;}
			.shareable_item:hover { font-size: 1.2em; font-family: 'Evogria', sans-serif; color:#34ff80;font-weight:300; cursor: pointer;width:100%;text-align:left;padding-left:20px;padding-top:10px;}
			.shareable_highlighted{ font-size: 1.2em; font-family: 'Evogria', sans-serif; color:#34ff80 !important;font-weight:700; cursor: pointer;width:100%;text-align:left;padding-left:20px;padding-top:10px;}
		
			#sharespotdone{	padding-top:20px;padding-bottom:20px;font-family: 'Burbank';font-size:10pt; cursor: pointer;}
			
			
			
			#copilot_dialog { font-size: 6.75em; font-family: 'Evogria', sans-serif; color:#34ff80;font-weight:500; }
			#copilot_dialog b { font-size: 70%;  font-family: 'Evogria', sans-serif; font-weight:500; color:#34ff80;}
			#copilot_title1_dialog
			{
				width:74%;
				height:100px;
				position:absolute;
				left:13%;
				top:120px;
				text-align:center;
				font-family: 'Burbank';
				font-size:20pt;
				margin-top:40px;
			}
			#copilot_title1_dialog b {color:#34ff80;font-weight:normal;}

			.ui-widget-content{
				background-color:rgba(0,0,0,0) !important;
				height:100%;
			}
			
			.ui-widget{
				background-color:rgba(0,0,0,0.8) !important;
				height:100%;
			}
			#dialog{
				height:100% !important;
			}
			#wait_txt
			{
				font-family: 'Evogria', sans-serif; 
				font-size:22px;  				
				font-weight:500;
				color:#34ff80;
				position:relative;
				margin-bottom:20px;
			}
			
			#wait_error
			{
				font-family: 'Evogria', sans-serif; 
				font-size:22px;  				
				font-weight:700;
				color:#34ff80;
				position:relative;
				margin-bottom:60px;
			}
			
			
			
			#wait_img
			{
				position:relative;
				margin-bottom:80px;
			}
			
			#text_dialog1
			{
				font-size:18px;  
				font-family: 'Evogria', sans-serif;  
				font-weight:300;
				color:#ffffff;
				position:relative;
			}
			#text_dialog2
			{
				font-size:18px;  
				font-family: 'Evogria', sans-serif;  
				font-weight:300;
				color:#ffffff;
				position:relative;
			}
			#text_dialog3
			{
				font-size:18px;  
				font-family: 'Evogria', sans-serif;  
				font-weight:300;
				color:#ffffff;
				position:relative;
				margin-bottom:40px;
			}
			
			
			#alsoavailable_dialog { 
			font-size:22px;  
			font-family: 'Evogria', sans-serif;  
			color:#34ff80;
			position:relative;
			width:300px;
			
			}
			
			#alsodivider_dialog { 
	 
			background-color:#FFFFFF;
			position:relative;
			width:220px;
			height:2px;
			position:relative;
			}
			#alsoavailable_dialog b {font-size: 22px;font-weight:normal;}
			
			
		
			
			#download_container
			{
				width:900px;
				 position:absolute;
				bottom:40px;
				left:50%;
				margin-left:-450px;
			}
			
			#alsoavailable_apple_dialog {
			position:relative;
			float:left;
			width:300px;
			height:100px;
			
			}
			#alsoavailable_android_dialog {width:300px;
			text-align:center;
			position:relative;
			float:left;
			height:100px;
			
			}
			#alsoavailable_amazon_dialog {width:300px;
			position:relative;
			float:left;
			height:100px;
		
			}
			#alsoavailable_google_dialog {width:300px;
			position:relative;
			float:left;
			height:100px;
		
			}
			
			
			#left_side 
			{
				width: 380px;
				height: 100%;
				float: left;
				position: relative;
				color:#FFFFFF;
				text-align:center; 
				/*background-image:url(https://www.landingtutorial.com/img/models.png);*/
			background-size:     contain;                      /* <------ */
			background-repeat:   no-repeat;
			background-position: center bottom;  
				
				
			}
			
			#left_side_top
			{
				width: 100%;
				height: 240px;
				position: relative;
				color:#FFFFFF;
				text-align:center; 
				background-image: url("../img/grid_small.png");
				background-repeat: repeat;
				padding-bottom:80px;
			}
			#left_side_bottom
			{
				width: 100%;
		
				position: relative;
				color:#FFFFFF;
				text-align:center; 

				padding-top:170px;
				
			
				
			}
			
			#left_middle
			{
				width: 100%;
				height: 180px;
				position: absolute;
				color:#FFFFFF;
				text-align:center; 
				background-color: #FFFFFF;
				left: 0%;
				top: 200px;
				
			}
			
		
			
/*			
			.button_copilot
			{
				text-align:center;
				font-family: 'Burbank';
				font-size:18pt;
				
				background: #1e1e1e !important;
				color: #FFFFFF !important;
				border: solid 1px #34ff80;
				transition: 0.6s;
			
				
			}
			
			.button_copilot b
			{
				font-weight:normal;
				text-align:center;
				font-family: 'Burbank';
				font-size:18pt;
			}
			
			

.button_copilot:hover {
	background: #1e1e1e !important;
	color: #34ff80 !important;
	border: solid 1px #FFFFFF;
							
}
*/

	.button_copilot{
	  color: white !important; 
	  font-size: 18px;font-family: 'evogria', sans-serif;
	  border-radius: 4px; 
	  transition: 0.6s;
	  padding: 18px 32px; 
	  top:0px;
	  width:40%;
	  min-width:320px;
	  background: linear-gradient(#0000, rgb(0 0 0/40%)) top/100% 800%;
	  /*background-color: #34ff80;*/
	  background-color: #177ddc;
	  cursor : pointer ;
	  margin-left:0px;
	  margin-right:0px;
	  position:relative;
	  display:inline-block;
	  text-shadow: 0 -1px 0 rgba(0,0,0,.12);
	  box-shadow: 0 2px 0 rgba(0,0,0,.045); 
	  font-weight: 600;
	  border: solid 1px #000000;
 }
  
  .button_copilot:hover {
		 background-position: bottom;
		 color: white; 
	}


		.leaflet-control-zoom-in
		{
			font-family: 'Burbank' !important;
			-webkit-border-radius: .25em !important; 
			-moz-border-radius: .25em !important;
			border-radius: .25em !important;
			margin-bottom:5px;
			
		}
		.leaflet-control-zoom-out
		{
			font-family: 'Burbank' !important;
			-webkit-border-radius: .25em !important; 
			-moz-border-radius: .25em !important;
			border-radius: .25em !important;
			
		}
		
		.leaflet-popup-content-wrapper, .leaflet-popup-tip {
			background: rgba(76, 175, 80, 0) !important;
			color: #FFFFFF !important;
			text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
			box-shadow: 0 3px 14px rgba(0,0,0,0) !important;
			font-family: 'Burbank' !important;
			font-size:18pt;
		}
		
		
		.popupSpot .leaflet-popup-tip,
		.popupSpot .leaflet-popup-content-wrapper {
			background: rgba(255, 255, 255, 0.8) !important;
			
			
		}
		
		
		
		.leaflet-container a.leaflet-popup-close-button {
			padding: 0px 0px 0 0  !important;
			width: 0px !important;
			height: 0px !important;
			font: 0px Tahoma,Verdana,sans-serif  !important;
		}
		
		#autodeploy{
			width:50%;
			text-align:center;
			position: absolute;
			top:0px;
			left:25%;
			font-family: 'Burbank';
			font-size:22px;
			color:#FFFFFF;
			text-shadow: 0 1px 1px rgba(0,0,0,.5);
			
		}
			
			#menu_bar{
				padding-top: 20px;
				height:70px;
				margin: auto auto;
				display: inline-block;
			}
			.menu_icon{
				float: left;
				position: relative;
				width:48px;
				height:48px;
				padding:1px;
				background-color:#FFFFFF;
				margin-left:5px;
				margin-right:5px;
			}
			
			
			
			.menu_icon:hover{
				background-color:#34ff80;
			}
			
			.menu_icon img{
				width:48px;
				height:48px;
				
			}
			
		
			#hover_text{
				width:360px;
				height:100px;
				position:absolute;
				left:10px;
				top:100px;
				text-align:center;
				font-family: 'Burbank';
				font-size:14pt;
				color:#303030;

			}
			
			#hover_text b{font-weight:normal;font-size:24px;}
			
			
			
			#right_side
			{
				width: 20%;
				min-width:280px;
				height: 100%;
				float: left;
				position: relative;
				color:#FFFFFF;
				text-align:center; 
				background-image: url("../img/grid_small.png");
				background-repeat: repeat;
				overflow-y: auto;
				overflow-x: hidden;
			
			}
			
			#right1
			{
				display: inline-block;
				margin-bottom: 20px;
				color:#FFFFFF;
				text-align:center; 
				position: relative;
				
				
			}
			
			#right2
			{
				width: 100%;
				height: 30%;
				color:#FFFFFF;
				text-align:center; 
				position: absolute;
				left: 0%;
				top: 35%;
			}
			
			
			#right3
			{
				display: inline-block;
				color:#FFFFFF;
				text-align:center; 
				position: relative;
				
				
			}
			
			#page_bottom {
				width:100%;
				height:40%;
				margin:0;
				padding:0;
				padding-top:10px;
				
				display: flex;
			}
			
			#map_bottom{
				flex-grow: 1;
				height:100%;
				margin:0;
				padding:0;
			
				 float: left;
				 position: relative;
			}
			
			#map_border
			{
				height:100%;
				width:1px;
				background-color: #FFFFFF;
				float: left;
				 position: relative;
			}
			
			#map{
				flex-grow: 1;
				height:100%;
				margin:0;
				padding:0;
			
				 float: left;
				 position: relative;
			}
			
			.my_polyline { 
			  stroke: green;
			  fill: none;
			  stroke-dasharray: 10,10; 
			  stroke-width: 5;  
			}
			
	.boats
	{
		background-image: url("../img/boat.png");	
		background-size:contain;
		color:#FFFFFF;
		font-size:24px;
		line-height: 48px;
		text-align:center;  
		text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	}	
	
	.mushrooms
	{
		background-image: url("../img/mushroom.png");	
		background-size:contain;
		color:#FFFFFF;
		font-size:24px;
		line-height: 48px;
		text-align:center;  
		text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	}	
	
	.campfires
	{
		background-image: url("../img/campfire.png");	
		background-size:contain;
		color:#FFFFFF;
		font-size:24px;
		line-height: 48px;
		text-align:center;
		text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;		
	}	
	.chugs
	{
		background-image: url("../img/chug.png");	
		background-size:contain;
		color:#FFFFFF;
		font-size:24px;
		line-height: 48px;
		text-align:center;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;		
	}	
	
	.chests
	{
		background-image: url("../img/chest_icon.png");	
		background-size:contain;
		color:#FFFFFF;
		font-size:24px;
		line-height: 48px;
		text-align:center;
		text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;		
	}	
	
	.ammos
	{
		background-image: url("../img/ammo_icon.png");	
		background-size:contain;
		color:#FFFFFF;
		font-size:24px;
		line-height: 48px;
		text-align:center;
		text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;		
	}	
	
	.loots
	{
		background-image: url("../img/loot_icon.png");	
		background-size:contain;
		color:#FFFFFF;
		font-size:24px;
		line-height: 48px;
		text-align:center;
		text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;		
	}	
	
	
	
	
	.bus_pointer{
		z-index:999 !important;
	}
			
	.bus_path{
		position: relative;
		overflow: hidden;
	}	
	
	.no-close .ui-dialog-titlebar
	{
		  display: none;
		}
	.no-close .ui-dialog-titlebar-close {
		  display: none;
		}
	.no-close .ui-dialog
	{
		width :100%;
		height: 100%;
		 background: rgba(1, 1,1, .9) !important;
		 z-index: 9999;
	}
		
       
.cmn-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
  }
  .cmn-toggle + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
  }
  input.cmn-toggle-round + label {
    padding: 2px;
    width: 40px;
    height: 20px;
    background-color: #dddddd;
    border-radius: 20px;
  }
  input.cmn-toggle-round + label:before,
  input.cmn-toggle-round + label:after {
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    content: "";
  }
  input.cmn-toggle-round + label:before {
    right: 1px;
    background-color: #f1f1f1;
    border-radius: 20px;
    transition: background 0.4s;
  }
  input.cmn-toggle-round + label:after {
    width: 19px;
    background-color: #fff;
    border-radius: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: margin 0.4s;
  }
  input.cmn-toggle-round:checked + label:before {
    background-color: #8ce196;
  }
  input.cmn-toggle-round:checked + label:after {
    margin-left: 20px;
  }
  
  
  .button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	color: #FFFFFF;
	text-align: center;
	text-decoration: none;
	padding: .25em 2em .25em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}

/* gray */
.gray {
	color: #e9e9e9 !important;
	border: solid 1px #555;
	background: #6e6e6e;
	background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
	background: -moz-linear-gradient(top,  #888,  #575757);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.gray:hover {
	background: #616161 !important;
	background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
	background: -moz-linear-gradient(top,  #757575,  #4b4b4b);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
}
.gray:active {
	color: #afafaf !important;
	background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
	background: -moz-linear-gradient(top,  #575757,  #888);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
}
  
  
  .leaflet-popup-content
  {
	  text-align:center;
  }
		
.leaflet-popup
{
	opacity:0.8;
}	

#left_side_top{background-image:none}
#right_side{background-image:none}
#page{background-image:url(https://www.landingtutorial.com/img/bg1.png);
background-size:cover;
}
#map{background-color:rgba(12, 12, 12,0.6);}
#left_middle{background-color:rgba(255,255,255,0.95);}

#left_middle{background-color:rgba(255,255,255,0.95); 
	background-image:url(https://www.landingtutorial.com/img/green_gradient.png);
	background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;   
	border-top: 3px solid white;
border-bottom: 3px solid white;
}
.menu_icon{padding:0px !important;cursor:pointer;
border: 1px solid white;
height:50px;
width:50px;
}

.guild_icon{width:40px;height:auto;border-radius: 50%;}

.navigation_menu_bar{
 border-bottom: 3px solid transparent;
 display:inline-block;
 text-align:center;
 padding-right:4px;
 padding-left:4px;
 color:#AAAAAA;
 font-size:16px;  
 font-family: 'Evogria', sans-serif;  
 cursor:pointer;
}


.navigation_menu_bar:hover{
 border-bottom: 3px solid #34ff80;
   color:#FFFFFF;
}


.navigation_menu_bar_selected{
 border-bottom: 3px solid #34ff80;
  color:#FFFFFF;
}

.side_navigation_menu_bar{
 border-left: 3px solid transparent;
 display:inline-block;
 text-align:center;
 padding-right:4px;
 padding-left:4px;
 color:#AAAAAA;
 font-size:16px;  
 font-family: 'Evogria', sans-serif;  
 cursor:pointer;
}


.side_navigation_menu_bar:hover{
 border-left: 3px solid #34ff80;
   color:#FFFFFF;
}


.side_navigation_menu_bar_selected{
 border-left: 3px solid #34ff80;
  color:#FFFFFF;
}

.scrim_list_item
{
	display:inline-block;
	position:relative;
	left:10%;
	width:80%;
	color:#AAAAAA; 
	font-size:16px;
	font-family: 'Evogria', sans-serif;
	text-align:left;
	cursor:pointer;
}
.scrim_list_item:hover
{
	color:#FFFFFF; 
}
.scrim_list_item_selected
{
	color:#FFFFFF; 
}

.blueButton:hover {
  background-position: bottom;
  color: white;
}
.blueButton {
  color: white;
  font-size: 12px;
  font-family: 'evogria', sans-serif;
  border-radius: 4px;
  transition: 0.6s;
  padding: 12px 24px;
  top: 0px;
  background: linear-gradient(#0000, rgb(0 0 0/40%)) top/100% 800%;
    background-color: rgba(0, 0, 0, 0);
    background-position-x: center;
    background-position-y: top;
  background-color: #177ddc;
  cursor: pointer;
  margin-left: 0px;
  margin-right: 0px;
  position: relative;
  display: inline-block;
  text-shadow: 0 -1px 0 rgba(0,0,0,.12);
  box-shadow: 0 2px 0 rgba(0,0,0,.045);
  font-weight: 600;
}


.greyButton:hover {
  background-position: bottom;
  color: white;
}
.greyButton {
  color: white;
  font-size: 12px;
  font-family: 'evogria', sans-serif;
  border-radius: 4px;
  transition: 0.6s;
  padding: 12px 24px;
  top: 0px;
  width: 100%;
  background: linear-gradient(#0000, rgb(0 0 0/40%)) top/100% 800%;
    background-color: rgba(0, 0, 0, 0);
    background-position-x: center;
    background-position-y: top;
  background-color: #454646;
  cursor: pointer;
  margin-left: 0px;
  margin-right: 0px;
  position: relative;
  display: inline-block;
  text-shadow: 0 -1px 0 rgba(0,0,0,.12);
  box-shadow: 0 2px 0 rgba(0,0,0,.045);
  font-weight: 600;
}

.humix-universal-js-insert{
	background:black !important;
	display: inline !important;
	background-image: url("../img/bg.jpg") !important;
				background-position: center !important;  /* Center the image */
				background-repeat: repeat-y !important; /* Do not repeat the image */
				background-size: cover !important;
}
