

      .topmap {
        height: 500px;
        width: 100%;
      }
	  
	  .fmnmap {
        height: 150px;
        width: 100%;
      }
	  
	  .btmmap {
		height: 200px;
		width: 100%;

	  }
	  
	  .smallmap{	
		width:250px;
		height:200px;
	  }
	  
	  .mmwrap{
	  margin-left:50px;
	  }
	  
	  .mmtoolbar{
	 
	  height:500px;
	  background-color:#2d2d2d;
	  float:left;
	  }
	  
	  .mmcontain{
	  border:2px solid #2d2d2d;
		background-color:#aad3df;
	  }
	  
	  .smallcontain{
		  float:left;
		  
		  width:250px;
	  }
	  
	  .mapCtrlIcon{
	  width:30px;
	  }
	  
	  .mapCtrl{
	  width:50px;
	  height:50px;
	  text-align:center;
	  cursor:pointer;
	  border-bottom:1px solid #ccc;
	  margin-top:20px;
	  }
	  
	  .mapToolset{
	  margin-top:0px;
	  }
	  
	  .mapInfoPanel{
	  width:0px;
	  height:500px;
	  background-color:#efefef;
	  position:absolute;
	  z-index:100;
	  float:left;
	  margin-left:50px;
	  -webkit-transition: width 0.5s;
	  }
	  
	  .mapInfoHead{
	  width:100%;
	  background-color:#019c8c;
	  min-height:35px;
	  -webkit-transition: height 0.5s;
	  }
	  
	  .mapInfoHeaderTxt{
	  display:none;
	  padding:6px;
	  color:#fff;
	  font-size:1.2em;
	  font-weight:bold;
	   opacity: 1;
	-webkit-transition: opacity 0.25s ease-in-out;
	  }
	 
	 .infoText{
	 display:none;
	 padding:8px;
	 opacity: 1;
	-webkit-transition: opacity 0.10s ease-in-out;
	 } 
	 .checkboxContainer{background-color:rgba(255,255,255,0.3); padding:8px; background-repeat:no-repeat; background-position:right top; background-size: contain;
	 }
	 
	 @media screen and (max-width: 786px) {
		.mmtoolbar{
		width:100%;
		height:50px;
		}
		
		 .mapCtrl{
		 margin-top:10px;
		 float:left;
		 }
		 
		 .mapInfoPanel{
		 margin-top:50px;
		 margin-left:0px;
		 }
		 
		 .mmwrap{
		 margin-left:0px;
		 }
		 
		 .mmcontain{
		 padding-bottom:50px;
		 }
		 
		 .oslink{
		position: margin-left:0px;
		}
	 }
	 
	.maptooltip{
		position: absolute;
		padding: 10px;
		background: rgba(34, 34, 34, 0.9);
		color: white;
		opacity: 1;
		white-space: nowrap;
		/*font: 10pt sans-serif;*/
		margin-left: 22px;
		margin-top:-100px;
		opacity: 1;
		min-height:23px;
		-webkit-transition: opacity 2s ease-in-out;
		-webkit-transition: width 0.5s;
		-webkit-transition: height 0.5s;

	}
	
	.mappopover{
		position: absolute;
		padding: 0px;
	/*	background-image: linear-gradient(rgba(0, 0, 0, 0.6),rgba(102, 102, 153,0.7));*/
		background-color:rgba(239,239,239,0.9);
		border-bottom:6px solid #eb5310;
		color: #2d2d2d;
		opacity: 0;
	/*	white-space: nowrap;*/
		/*font: 10pt sans-serif;*/
		margin-left: 22px;
		margin-top:-100px;
		width:10px;
		height:10px;
		max-width:300px;
		-webkit-transition: opacity 0.5s ease-in-out;

		-webkit-transition: height 0.5s;
	}
	
	.mappopclose{
		float:right;
		width:30px;
		margin-top:-6px;
	}
	
	.mappoptitle{	
	width: 270px;
    background-color: #2d2d2d;
    color: #fff;
    padding: 10px;
	min-height:23px;
	}
	
	.mappoptext{
	max-width:300px;
	max-height:250px;
	overflow-y:auto;
	overflow-x:hidden;
	font-size:0.9em;
	opacity:0;
	-webkit-transition: opacity 0.15s ease-in-out;
	}
	
	.mappoptext::-webkit-scrollbar  {
    width: 6px;
	}

.mappoptext::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
}

.mappoptext::-webkit-scrollbar-thumb {
    background: #888 !important;
}

.mappoptext::-webkit-scrollbar-thumb:hover {
    background: #555 !important;
}

.infoLine{
	padding:8px;
	opacity:1;
	-webkit-transition: opacity 5s ease-in-out;
	border-bottom: 1px solid #e2e6e6;
}

.featureLstHdr{
width:100%; 
background-color:#fff; 
color:#017e71; 
padding:8px; 
font-weight:bold;
}

.triangle-up {
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 12px solid #017e71;
	float:right;
	margin-right:25px;
}

.triangle-down {
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 12px solid #017e71;
	float:right;
	margin-right:25px;
}
 
.addressSearchInput {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  border-radius:6px;
}

.layerSearchInput {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  border-radius:6px;
}


.searchList{
	height: 120px;
    overflow-y: auto;
    width: 95%;
    background-color: #fff;
	padding: 10px;
	display:none;
}

.searchList::-webkit-scrollbar  {
    width: 6px;
}

.searchList::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
}

.searchItem{
cursor:pointer;
}

.searchList::-webkit-scrollbar-thumb {
    background: #888 !important;
}

.searchList::-webkit-scrollbar-thumb:hover {
    background: #555 !important;
}

.searchSelect{
	width:100%;
	padding:6px;
}

.layerSearchInputlbl{
	display:none;
}
.layerSearchInput{
	display:none;
}
.locSearchItem{
	padding-bottom:2px;
	border-bottom:1px solid #efefef;
}



.mapAlertBox{
position: absolute;
    z-index: 1;
    width: 60%;
    height: 0px;
    background-color: rgba(255,255,255,.8);
    -webkit-transition: height 0.5s;
    margin-left: 23%;
    padding: 10px;
	top:-1000px;
}

.mapAlertText{
	font-size: x-large;
	color: #2d2d2d;
	opacity:0;
	height:0px;
	-webkit-transition: opacity 1.5s;
	font-size:large;
	font-weight:bold;
	text-align:center;
}

.hiddenLayerSelect{
	display:none;
}

.oslink{
	position: absolute; z-index: 9999; background-color: rgba(0, 0, 0, 0.5); margin-left: 50px; height: 18px; right: initial; bottom: 0px; display:none; font-size:smaller;
}

.mapLoader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #94b8b8;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
