html{
	height:100%;
}

body, .component.map , #page_container{
	height:100%;
	box-sizing:border-box;
	padding:0;
	margin:0;
}

.component.map{
	position: relative;
}

body{
	height:calc(100% - 6px);
}

body{
	margin:3px;	
}
.footer{
	display:none;
}

.coords div, form{
	float:right;
}

.coords label, .coords input{
	font-size:12px;	
	padding:1px 4px;
	/*margin-none;*/
}
.coords label{
	margin-left:5px;
}

.coords input{
	width: 80px;
}

#FabMap{
	height: calc(100% - 23px)!important;
	box-sizing:border-box;
}

#map_search{
	/*border:1px solid red;*/
	width: calc(100% - 110px);
	position:absolute;
	top:13px;
	left:13px;
	z-index:9999;
}

#map_search input{
	padding-left:35px;
	box-sizing:border-box;
	width:calc(100% - 70px);
	max-width:300px;
	margin-top:0;
	margin-left:0;
    text-transform: capitalize;
}

#map_search input, #map_search button, .leaflet-control,  .leaflet-control-layers{
	box-shadow: 0 0 10px 2px grey!important;
}

#map_search button{
	margin-top:0;
	cursor:pointer;
}

#map_search button:hover{
}

.search_icon{
	position:absolute;
	left:0px;
	top:0px;
	display:inline-block;
	font-size:16px;
	font-family: 'Ubuntu', sans-serif;
	padding:5px;
	width:20px;
	height:19px;
	background-color:lightgrey;
	border-radius:  5px 0 0 5px;
	border:2px solid grey;
	border-right:none;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(../../assets/searchicon.png);
}


@media only screen and (max-width: 420px) {
	#map_search{
		width: calc(100% - 10px);
	}
	#map_search button{
		display:none;
	}
	#map_search input{
		display:none;
	}
	
	#map_search.active input{
		display:inline-block;
	}
	.search_icon{
		cursor:pointer;
		border:2px solid grey;
		border-radius:  5px;
		box-shadow: 0 0 10px 2px grey!important;
	}
	
	#map_search.active .search_icon{
		border-radius:  5px 0 0 5px;
		border:2px solid grey;
		border-right:none;
		box-shadow: none!important;
	}
	
}

.ui-menu{
	border: 2px solid grey!important;
	border-radius:5px;
	box-shadow: 0 2px 10px 2px grey!important;
	width:20em;
	background-color: white;
	/*box-shadow-top: none!important;*/
}
.ui-menu-item{
	
	list-style: none;
	
}

.ui-menu-item:hover{
	background: grey !important;
	color:white !important;
	cursor: pointer;
}

.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    //background: grey !important;
	//color:white !important;
} 

.leaflet-top.leaflet-left{
	top:40px;	
}

.search_status{
	font-size:16px;
	z-index:9999;
	position:absolute;
	top:50%;
	left:50%;
	width:50%;
	line-height:80px;
	text-align:center;
	border:2px solid grey;
	border-radius:  5px;
	box-shadow: 0 0 10px 2px grey;
	background-color:rgba(255, 255, 255, 0.7);
	transform: translate(-50%, -50%);
}

.leaflet-key .tab{
	cursor:pointer;
	position:absolute;
	z-index:9999;
	display:inline-block;
	padding:5px 10px;
	box-shadow: 0 -2px 5px 0px grey;
	border: 2px solid grey;
	border-bottom:none;
	border-radius: 5px 5px 0 0;
	background-color: lightgrey;
}

.feedback-key .tab{
	cursor:pointer;
	position:absolute;
	transform: rotate(-90deg);
	z-index:9999;
	display:inline-block;
	padding:5px 10px;
	box-shadow: 0 -2px 5px 0px grey;
	border: 2px solid grey;
	border-bottom:none;
	border-radius: 5px 5px 0 0;
	background-color: lightgrey;
}

.leaflet-key.open .tab{
	top:-31px;
	left:10px;
}

.feedback-key.open .tab{
	left: -101px;
	top: 78px;
}

.leaflet-key.closed .tab{
	bottom:26px;
	left:10px;
}

.feedback-key.closed .tab{
	top: 55%;
	right: -68px;
}

.leaflet-key.closed .item{
	display:none;
}

.feedback-key.closed .content{
	display:none;
}

.leaflet-key.open{
	z-index:9999;
	position:absolute;
	bottom:35px;
	left:10px;
	cursor:pointer;
	border:2px solid grey;
	border-radius:  5px;
	box-shadow: 0 0 10px 2px grey;
	width:30%;
	background-color:white;
	padding:10px;
	min-width:200px;
	max-width:270px;
}

.feedback-key.open{
	z-index:9999;
	position:absolute;
	right: 10px;
	top: calc(50% - 35px);
	cursor:pointer;
	border:2px solid grey;
	border-radius:  5px;
	box-shadow: 0 0 10px 2px grey;
	background-color:white;
	padding:10px;
	max-width:300px;
	min-height: 170px;
}

.feedback-key.open .content{
	font-size: 0.9rem;
	text-align: center;
}

.feedback-key.open .content img {
	width: 30%;
	margin-left: auto;
	margin-right: auto;
}

.feedback-key.open .content .title {
	font-weight: bolder;
}

.feedback-key.open .content .text {
	margin-top: 5px;
	margin-bottom: 5px;
}

.leaflet-key.open .item{
	padding-bottom:5px;	
}
.leaflet-key.open .item .marker, .leaflet-key .item .value{
	display:table-cell;
}
.leaflet-key.open .item img{
	width:25px;
	padding-left:5px;
}

.leaflet-key.open .item .marker{
	width:40px;
}

.leaflet-key.open .item .value{
	vertical-align:middle;
	font-size:13px;
	width:calc(100% - 40px);
}


.leaflet-container a.leaflet-popup-close-button{
	position: absolute;
	top: 1px;
	right: 1px;
}

.popup_content{
	/*margin:3px;*/
}

.popup_content .maintitle img{
	width:20px;
}

.popup_content .maintitle{
	text-transform:capitalize;
	margin-left:3px;
	font-size:18px;
	font-weight:bold;
}

.popup_content .maintitle span{
	width:calc(100% - 30px);
	display:inline-block;
	padding-left:10px;
}

.popup_content .item{
	padding:1px;
}

.popup_content .item.staff_help_available_note .title ,
.popup_content .item.step_free_access_note .title,
.popup_content .item.nearest_station_notes .title,
.popup_content .item.accessible_toilet_notes .title,
.popup_content .item.national_key_toilets_location  .title{
	display:none;
}

.popup_content .item .title{
	padding:3px;
	font-weight:bold;
}

.popup_content .item.short_value .title{
	float:left;
}

.popup_content .item.short_value .value{
	border:none;
}

.popup_content .item .value{
	border:1px solid grey;
	border-radius:5px;
	padding:3px;
}

.popup_content .item .value img{
	height:12px;
}

.clearfix{
	clear:both;
}


.leaflet-popup-content{
	/*overflow:auto;*/
	/*height:calc(100% - 20px);	*/
}


.leaflet-popup{
 	margin-top:20px;	
}

.leaflet-popup-content .loader div{
	text-align:center;
}

.leaflet-tooltip {
	font-weight:bold;
    position: absolute;
	padding: 1px 6px;
	background: rgba(235, 235, 235, 0.81);
	background-clip: padding-box;
	border-color: #777;
	border-color: rgba(0,0,0,0.4);
	border-radius: 4px;
	border-style: solid;
	border-width: 4px;
	color: #111;
	display: block;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	z-index: auto;
}
.leaflet-tooltip-right{
	border-left-width:2px;
}

.leaflet-popup-content-wrapper {
    border-radius: 7px;
}

.leaflet-tooltip-right::before {
	position:absolute;
	margin-top: -13px;
    left: -15px;
    margin-left: -10px;
    border-right-color:rgba(0,0,0,0.4);
	border-width: 13px;
}


.leaflet-popup{
	background: rgba(235, 235, 235, 0.81);
	background-clip: padding-box;
	/*overflow:hidden;*/
	border-color: #777;
	border-color: rgba(0,0,0,0.4);
	border-radius: 10px;
	border-style: solid;
	border-width: 4px;
	color: #111;
	display: block;
    /*width:300px;*/
}



.leaflet-popup-content{
	margin-top:	20px;
}

.leaflet-container a.leaflet-popup-close-button{
	z-index:9999;
	color:black;
}

.leaflet-popup-tip{
	border:1px solid black;
	background-color: rgba(0,0,0,0.6);
	position:relative;
	top:3px;
}



/*clustering*/
.marker-cluster  {
	border:3px solid rgba(46, 108, 151, 0.7);
	box-shadow: 0px 0px 20px 5px #4a78a1;
	background-color: transparent!important;
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #277CC6), color-stop(1, #74C0F3))!important;
	background-image: -o-linear-gradient(top, #277CC6 0%, #74C0F3 100%)!important;
	background-image: -moz-linear-gradient(top, #277CC6 0%, #74C0F3 100%)!important;
	background-image: -webkit-linear-gradient(top, #277CC6 0%, #74C0F3 100%)!important;
	background-image: -ms-linear-gradient(top, #277CC6 0%, #74C0F3 100%)!important;
	background-image: linear-gradient(to top, #277CC6 0%, #74C0F3 100%)!important;
	opacity:0.8!important;
	overflow:hidden;
	height:50px!important;
	width:50px!important;
	background-clip: content-box;
	border-radius: 50%;
}
.marker-cluster div {
	border:3px solid rgba(46, 108, 151, 0.7);
	background-color: white!important;
	box-sizing:border-box;
	background-clip: content-box;
	width:calc(100% - 8px);
	height:calc(100% - 8px);
	margin-left: 4px;
	margin-right: 4px;
	margin-top: 4px;
	margin-bottom:4px;
	text-align: center;
	border-radius: 50%;
	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
	}
	
.marker-cluster span {
	line-height: 38px;
}


.ui-menu .ui-menu-item-wrapper {
    text-transform: capitalize;
}

#loader{
	position: absolute;
	top:0;
	left:0;
	bottom:0;
	right: 0;
	background-color: black;
	opacity: 0.3;
	z-index: 9999;
}

#loader #spinner{
	max-width: 300px;
	width: 20%;
	min-width: 150px;
	position: absolute;
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
}