/* http://maddesigns.de/responsive-iframes-2417.html */
/* PWA best practice: https://dev.to/uyouthe/pwa-checklist-2019-25j4 */
button { user-select: none; }
body { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-overflow-scrolling: touch; }

* { font-family: roboto, sans-serif; }
body { margin: 0; }
html, body { height: 100%; }
a { color: #006f99 !important; text-decoration: none; }

#leaflet {	width: 100%; height: 100vh; margin: 0 auto; z-index: 0; display: block; }
#flot { width: 100%; height: 20vh; margin: 0 auto; display: none; }
#live { position: absolute; left:0; bottom:0; width: 100%; height: 42px; margin: 0 auto; display: none; text-align: center; background: #fff; }
#live .col-2	{ padding-left: 0; padding-right: 0; }
#live .col-2 p { color:#333; }

#cacheZoomLevel .badge	{ font-size: 100% !important; margin-bottom: 5px; }
#zoomIcon	{ text-align: center; font-size: 22px; min-height: 38px; vertical-align: bottom; /* background: white;  */}

#modalFileUpload { opacity: 0.9; }

#headline 		{ position: absolute; top:0; left:15vw; text-align: center; margin: 0 auto; width: 70vw; z-index: 1; }
#headline img	{ max-width: 90px; }
#headline div	{
							font-size: 14px; font-weight: bolder; display: inline-block;
							background: rgba(255, 255, 255, 0.84); padding: 5px 10px 5px 10px;
							border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;
						}

#subline 	{ display:block; }
#footline	{ position: absolute; bottom: 0; left: 0; padding: 5px; width: 100%; font-size: 18px;
				text-align: center; display: block; z-index: 1; }
#footline div { background: rgba(255, 255, 255, 0.85); display: inline-block; padding: 0 5px; }

.leaflet-routing-geocoders div { margin-top: 4px; border-radius: 4px; }
.leaflet-routing-geocoders input { padding: 4px; border-radius: 4px; }

#routing_headline { position: absolute; left:6px; top:6px; font-weight:bold; font-size:1.1em; }

code { font-size: 0.9em; }
.icon { color: black; font-size: 180%; line-height: 38px; }
.liveIcon	{ color: #0078A8 !important; }
.liveScale { margin-left: 3px; font-size: 0.4em; }

.log { border: solid 1px red; background: white; width: 25vw; height: 30vh; overflow: auto; padding: 3px; }
.alert { display:inline-block; }
.compass img { width: 45px; height: 45px; opacity: 0.85; }
.custom-hover:hover { cursor: pointer; }
.iframe-div { padding-bottom: 33%; width: 100%; height: auto; }
.iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.spinner-border	{ width: 1.2rem !important; height: 1.2rem !important; }
.grid	{ font-size: 12pt; outline: 1px solid gray; }
.speed_font { font-size: 40%; }
.wind_icon { max-width: 28.8px; }

/*** bootstrap ***/
.text-success { color: #598626 !important; }
.text-info { color: #006f99 !important; }

.opa	{ outline: dotted 3px rgba(100,100,255,0.35); outline-offset: -5px; }
.flotDiv { position: absolute; top:0; left:0; width:100%; text-align:right; padding-right:1em; font-size:1.4em; }
.flotA	{ background: white; padding: 0px 4px; border:solid 1px black; text-decoration: none; }
.m5	{ margin: 5px; }
.logo:hover, .help:hover, .gpx:hover, .live:hover, .home:hover, .full:hover, .download:hover, .weather:hover, .lang:hover { cursor: pointer; }
.logo		{ max-width: 150px !important; height: 16px; min-height: inherit !important; padding: 0px !important; margin: 0 !important; }
.logoDIV { background: rgba(255, 255, 255, 0.85) !important; padding: 2px; margin: 0 !important; border: none !important; vertical-align: middle; border-top-right-radius: 2px; }

.leaflet-control-geocoder input, .leaflet-control-geocoder a,
.leaflet-routing-container,  .leaflet-routing-geocoder-result { font-size: 14px !important; }
.leaflet-routing-container { padding-top: 0; display:none; }
.leaflet-routing-geocoder-result td { padding: 5px 8px; color: #006f99 !important; }
.leaflet-control-zoom-display
{ 	line-height: 30px !important; background: white; background-clip: content-box;
	text-align: center; font-size: 20px; padding-top: 2px; }

.leaflet-control-zoom-in { margin-bottom: 2px; }
.leaflet-control-zoom { border: solid 2px rgba(0,0,0,0.2); }
.leaflet-control-zoom a { width: 38px !important; color: black !important; min-height: 36px !important; }
.leaflet-control-zoom-in, .leaflet-control-zoom-out { width: 32px !important; border: none !important; font-weight: bold; }
.leaflet-touch .leaflet-control-layers, .leaflet-touch .leaflet-bar	{ box-shadow: 1px 1px 1px 0px #666; }
.sun, .zoom { box-shadow: none !important; }

.leaflet-routing-collapse-btn, .leaflet-control-geocoder-icon { border-radius: 4px; padding: 0 !important; }

.leaflet-control-container .leaflet-routing-container-hide, .leaflet-control-geocoder, .leaflet-control-zoom
{ min-width: 42px !important; min-height: 42px !important; left: 0; }

.leaflet-routing-container-hide .leaflet-routing-collapse-btn
{ width: auto !important; height: 36px; background-size: 36px 36px; background-repeat: no-repeat; left: 0; }

.help, .gpx, .live, .full, .download, .zoom, .lang { width: 42px !important; height: 42px !important; text-align: center; }
.sun, .zoom { background: rgba(255, 255, 255, 0.9) !important; border-color: rgb(255,255,255,1) !important; }
.sun, .zoom, .weather { width: 42px !important; text-align: center; color:black; opacity: 0.8; font-size: 0.9em; }

.zoom	{ line-height: 38px; }
.home	{ margin-bottom: 2px; }
.home a	{ border-radius: 0 !important; }
.lang	{ line-height: 36px; }
.lang span { color:white; margin-top: -36px; font-size: 0.8em; font-weight: 700; }
.help a, .gpx a, .live a, .full a, .download a, .zoom a, .weather a, .lang a { width: 100% !important; height: 100% !important; }
.liveGPS { margin: 0 !important; padding-right: 5px; font-size: 1.4em; }

.leaflet-fade-anim .leaflet-tile, .leaflet-zoom-anim .leaflet-zoom-animated { will-change: auto !important; }
.leaflet-control-attribution
{	font-size: 10px !important; border-top-left-radius: 2px;
	background: rgba(255, 255, 255, 0.85) !important; padding: 1px 5px 2px 5px !important; }

.leaflet-routing-collapse-btn { background-size: contain; top: 0 !important; color: #51850b; right: 13px; }
.leaflet-routing-container:hover	{ cursor: pointer; }
.leaflet-routing-geocoders button { margin-left: 5px; }
.leaflet-routing-geocoders button { font-family: atecmap; width: 42px; height: 42px; border: solid 2px rgba(0,0,0,0.2); }
.asJSON { display:block; width: auto !important; min-height: 30px; height: auto !important; margin-top: 10px; font-size: 0.85em !important; white-space: nowrap; }

.walking::after { content:'\f183'; }
.cycling::after { content:'\e80a'; }
.driving::after { content:'\f1b9'; }
.leaflet-routing-add-waypoint::after { font-family: 'atecmap'; content:'\e804'; }
.leaflet-routing-reverse-waypoints::after { font-family: 'atecmap'; content:'\f277'; }

.leaflet-control-geocoder-icon { min-width: 36px; min-height: 36px; background-size: contain; background-image: none !important; }
.leaflet-control-geocoder-icon::after { content:'\e800'; font-family: 'atecmap'; font-size: 220%; line-height: 38px; color:black; }

.leaflet-routing-container-hide .leaflet-routing-collapse-btn { min-height: 36px !important; }

.footer { background: #888 !important; }
button:hover	 { cursor: pointer; }

.borderIcon { display: block; border-radius: 50%; left: -5px !important; top: -5px !important; }
.pulse { display: block; border-radius: 50%; animation: pulse 2s infinite; left: -5px !important; top: -5px !important; }
@keyframes pulse {
  0% { -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.4); box-shadow: 0 0 0 0; }
  70% { -moz-box-shadow: 0 0 0 20px rgba(0, 0, 0, 0); box-shadow: 0 0 0 20px rgba(0, 0, 0, 0); }
  100% { -moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

*, ::after, ::before { box-sizing: border-box; }