/* html, body { width: 100%; height: 100%; margin: 0; padding: 0; } */
#map-plugin { max-width: 900px; max-height: 500px; width: 100%; height: 500px; font-size: 14px; }
#map-plugin input{ -webkit-appearance: none; }
#map-plugin input[type=button]:hover { cursor: pointer; background-color: #A6324C; }
#map-plugin input[type=range] {
	-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
	width: 50%; /* Specific width is required for Firefox. */
	padding: 0px;
}
#map-plugin input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	border: 1px solid #19407b;
	height: 20px;
	width: 20px;
	border-radius: 100%;
	background: #ffffff;
	cursor: pointer;
	margin-top: -9px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
	box-shadow: 1px 1px 1px #19407b, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
}
input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 2px;
	cursor: pointer;
	background: #19407b;
	border-radius: 1.3px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
	background: #367ebd;
}
/* All the same stuff for Firefox */
#map-plugin input[type=range]::-moz-range-thumb {
	box-shadow: 1px 1px 1px #19407b, 0px 0px 1px #0d0d0d;
	border: 1px solid #19407b;
	height: 20px;
	width: 20px;
	border-radius: 100%;
	background: #ffffff;
	cursor: pointer;
}
input[type=range]::-moz-range-track {
	width: 100%;
	height: 2px;
	cursor: pointer;
	background: #19407b;
	border-radius: 1.3px;
}
#map-plugin input[type=range]:focus {
	outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}
/* All the same stuff for IE */
#map-plugin input[type=range]::-ms-thumb {
	box-shadow: 1px 1px 1px #19407b, 0px 0px 1px #0d0d0d;
	border: 1px solid #19407b;
	height: 20px;
	width: 20px;
	border-radius: 100%;
	background: #ffffff;
	cursor: pointer;
}
#map-plugin input[type=range]::-ms-track {
	width: 50%;
	cursor: pointer;
	background: transparent; /* Hides the slider so custom styles can be added */
	border-color: transparent;
	color: transparent;
}
#map-plugin input[type=range]::-ms-track {
	width: 100%;
	height: 2px;
	cursor: pointer;
	background: transparent;
	border-color: transparent;
	border-width: 16px 0;
	color: transparent;
}
#map-plugin input[type=range]::-ms-fill-lower {
	background: #2a6495;
	border-radius: 2.6px;
}
#map-plugin input[type=range]:focus::-ms-fill-lower {
	background: #19407b;
}
#map-plugin input[type=range]::-ms-fill-upper {
	background: #19407b;
	border-radius: 2.6px;
}
#map-plugin input[type=range]:focus::-ms-fill-upper {
	background: #367ebd;
}
#map-plugin > div { height: 100%; float: left; background-color: #19407b; }
#map-plugin > div > span { width: 100%; height: calc(10% + 10px); display: inline-block; position: relative; padding: 20px; color: white; }
#map-container { width: 70%; }
#map-container label, #map-results label { font-size: 18px; color: white;}
#map-search-box { width: 55%; height: 50px; position: absolute; right: 0px; bottom: 5px; border: medium none; padding-left: 20px; margin-bottom: 0px }
#map-search-button { width: 140px; height: 40px; position: absolute; right: 5px; bottom: 10px; border: medium none; background-color: #c0002b; color: white;  font-size: 14px;  }
#map-results { width: 30%; }
#map-results > span { text-align: center;  font-size: 18px; }
#map { width: 100%; height: calc(90% - 10px); position: relative; overflow: hidden; }
#map-filter { width: 100%; height: 100%; position: absolute; z-index: 1; transform: translate(0, -390px); transition: 0.6s ease; background-color: #e5e5e5; }
#map-filter-button { width: 140px; height: 40px; position: absolute; right: 5px; bottom: 5px; border: medium none; background-color: #c0002b; color: white; transition: 0.6s ease;  font-size: 14px; }
#filters-on { position: absolute; left: 20px; bottom: 18px; }
.filter-box { text-align: center; margin: 5px; background-color: white; padding: 10px;}
.filter-box span { display: block; margin: 10px 0px; }
.filter-box label { color: #19407b !important; padding: 5px 0px; background-color: #f4f5f9; }
.filter-box select { max-width: 200px; padding: 10px; margin: 5px 0px 0px 0px; }
#filter-radius-value::after { content: " Miles"; }
.filter-cat-extra { width: 60px; height: 60px; display: inline-block; border: 2px solid #19407b; border-radius: 100%;}
.filter-cat-extra:hover { cursor: pointer; border: 2px solid #00bcf3; }
.filter-cat-extra-0 { background: url("caticon-any.png") center center; background-size: 100%; }
.filter-cat-extra-1 { background: url("caticon-men.png") center center; background-size: 100%; }
.filter-cat-extra-2 { background: url("caticon-women.png") center center; background-size: 100%; }
.filter-cat-extra-3 { background: url("caticon-anyadult.png") center center; background-size: 100%; }
.filter-cat-extra-4 { background: url("caticon-anyone.png") center center; background-size: 100%;  }
.filter-cat-extra-5 { background: url("caticon-kids.png") center center; background-size: 100%;  }
.filter-cat-extra-6 { background: url("caticon-baby.png") center center; background-size: 100%;  }
.filter-cat-extra-0-active { background: url("caticon-any-active.png") center center; background-size: 100%;  border: 2px solid #00bcf3; }
.filter-cat-extra-1-active { background: url("caticon-men-active.png") center center; background-size: 100%;  border: 2px solid #00bcf3; }
.filter-cat-extra-2-active { background: url("caticon-women-active.png") center center; background-size: 100%;  border: 2px solid #00bcf3; }
.filter-cat-extra-3-active { background: url("caticon-anyadult-active.png") center center; background-size: 100%;  border: 2px solid #00bcf3; }
.filter-cat-extra-4-active { background: url("caticon-anyone-active.png") center center; background-size: 100%;  border: 2px solid #00bcf3; }
.filter-cat-extra-5-active { background: url("caticon-kids-active.png") center center; background-size: 100%;  border: 2px solid #00bcf3; }
.filter-cat-extra-6-active { background: url("caticon-baby-active.png") center center; background-size: 100%;  border: 2px solid #00bcf3; }
/*#map-filter-button > input { width: 100px; height: 40px; position: absolute; right: 0px; bottom: 0px; border: medium none; background-color: #c0002b; color: white; }*/
#gmap { width: 100%; height: 100%; position: relative; }
#map-results { position: relative; overflow: hidden; }
#map-results-info { height: calc(90% - 10px); overflow: auto; position: relative; }
.result-box { width: 100%; min-height: 50px; position: relative; padding: 15px 10px; color: #19407b; font-size: 14px; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; }
.result-box-active { color: white !important; background-color: #00bcf3 !important; }
.result-box-active .result-box-time, .result-box-active .result-box-level, .result-box-active .result-box-category  { color: white !important; }
.result-box-active > a { color: white !important; }
.result-box:nth-child(even) { background-color: #f4f5f9; }
.result-box:nth-child(odd) { background-color: #fff; }
.result-box:hover { cursor: pointer; }
.result-box span { width: 100%; display: block; }
.result-box .result-box-title { font-weight: 900; font-size: 18px; margin-bottom: 0.25rem; line-height: 1.2;}
.result-box .result-box-time { color: #c0002b; margin-bottom: 0.15rem; }
.result-box .result-box-level, .result-box .result-box-category { color: #000; }
.result-box > a { position: absolute; bottom: 0px; right: 0px; padding: 10px; color: #c0002b; text-decoration: none; line-height: 0.7; }
#map-results-extra-info { font-family: arial; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: white; border: 10px solid #19407b; box-sizing: border-box; padding: 10px; transform: translate(100%, 0); transition: 0.6s ease; overflow: auto}
#map-results-extra-info div { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; font-weight: 900; font-size: 20px; margin-bottom: 0.75rem;}
#map-results-extra-info h2 { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; color: #19407b; font-weight: 900; font-size: 14px;}
#map-results-extra-info h2.map-session-time { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; color: #19407b; font-weight: 900; font-size: 16px;}
#map-results-extra-info h3 { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; color: #000; font-size: 13px; margin-bottom: 1em; word-break: break-word;}
#map-results-extra-info a { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; color: #c0002b; line-height: 1.2; }
#map-results-extra-info a.fb-share-session { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; color: #c0002b; font-weight: 900 }
.map-session-close { font-size: 2rem; float: right; color: #193f7b; }

@media (max-width: 1100px){
	#map-plugin{
		width: 100%;
	}
	#map-plugin > div{
		width: 100%;
	}
	#map-results{
		height: auto !important;
	}
	#map-results-info{
		max-height: 350px;
	}
	#map-search-box{
		right: 5px;
	}
	#map-search-button{
		right: 10px;
	}

}

@media (max-width: 600px){

	#map-filter{
		background-color: transparent;
	}

	#map-search-box{
		width: calc(100% - 10px);
		right: 5px;;
		padding-left: 15px;
	}

	.filter-cat-extra{
		width: 48px;
		height: 48px;
		margin: 0px 1px;
	}

	#filters-on{
		display: none;
	}

}