h1 {
	font-weight: normal;
	font-size: 40px;
	margin: 140px 0 20px;
}
h2 {
	font-weight: normal;
	font-size: 30px;
	margin: 60px 0 10px;
}
h3 {
	font-weight: normal;
	font-size: 25px;
	margin: 30px 0 10px;
}
header {
	background: #427D9A url(../img/texture-petrol.png);
	color: rgba(255,255,255,0.6);
	border-radius: 10px;
	padding: 80px 20px 75px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
header h1 {
	color: #fff;
	margin: 10px 0 30px;
	font-weight: lighter;
	font-size: 90px;
	line-height: 0.9;
}
header a {
	color: rgba(255,255,255,0.6) !important;
	text-decoration: underline;
}
header a:hover {
	color: rgba(255,255,255,0.9) !important;
}
.todo {
	margin: 250px 0 50px;
	opacity: 0.2;
	transition: all 1s;
}
.todo:hover {
	opacity: 1;
}
.shy {
	width: 0;
	height: 0;
	opacity: 0;
	font-size: 0;
	margin: 0;
    padding: 0;
}

html,
body {
	margin: 0;
	color: #fff;
	background: #eee;
	overflow: hidden;
}
.map {
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0px;
	left: 0;
}
.widget {
	background-color: #eee;
	height: 100%;
}
h4 {
	font-size: 16px;
	font-weight: normal;
	margin-top: 7px;
	margin-bottom: 2px;
}
.whitebox a:after,
.whitebox a:hover { color:  0; }
#opacity-slider-handle { background-color: #408eb5; }
.list-unstyled { padding-left: 0; list-style: none; }


#map-switcher {
	height: min-content;
	line-height: 0.5;
	z-index: 50;
	top: 0;
	left: 0;
	background-color: #bc0067;
	padding: 12px 15px 10px 12px;
	border-top: none;
	border-left: none;
	z-index: 5;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#map-switcher legend {
	border: none;
    color: #fff;
    font-size: 16px;
    margin: 0 0 4px;
    line-height: 1;
}
#map-switcher input[type=radio] {
	margin-left: 5px;
}
#map-options {
	background: #ff9;
	flex-grow: 1;
	position: relative;
}
#map-options .map {
	width: 100%;
    height: 100%;
}


#map-grid {
	display: flex;
	flex-direction: column;
    height: 100%;
	background: #f9f;
}
@media (min-width:570px) {
	#map-switcher {
		position: absolute;
		border-radius: 0 0 10px 0;
		background-color: #b40063bb;
		backdrop-filter: blur(6px);
	}
	#map-options {
		width: 100vw;
		height: 100vh;
	}
}

#map-switcher,
button.plan-a-route { display: none; }
a.plan-a-route { display: block; }
@media (min-width:280px) and (min-height:400px), (min-width:405px) and (min-height:250px), (min-width:570px) {
	#map-switcher,
	button.plan-a-route { display: block; }
	a.plan-a-route { display: none; }
}


small { opacity: 0.75; }
label { font-weight: 400; }
.erg-kml-layer-show-hide-container { display: none !important; }
.plan-a-route {
	position: absolute;
	z-index: 10;
	top: 10px;
	right: 10px;
}
a.plan-a-route {
	text-decoration: none;
	color: #fff;
	/* for testing responsiveness */
	/* color: #ff0; */
}
.button {
	background-color: #bc0067;
	border: none;
	/*border: 2px solid rgba(255, 255, 255, 1);*/
	border-radius: 5px;
	padding: 5px 15px;
	font-size: 16px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	display: flex;
	gap: 10px;
	align-items: center;
}
.button:hover img { opacity: 1 !important; }

/* Chrome only radios positioning */
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
	#map-switcher input {
		/* -webkit-appearance: none;
		-moz-appearance: none; */
		position: relative;
		top: 2px;
	}
}

@font-face {
	font-family:'MeteoconsRegular';
	src: url('../fonts/font-face/meteocons-webfont.eot');
	src: url('../fonts/font-face/meteocons-webfont.eot?#iefix') format('embedded-opentype'),
		url('../fonts/font-face/meteocons-webfont.woff') format('woff'),
		url('../fonts/font-face/meteocons-webfont.ttf') format('truetype'),
		url('../fonts/font-face/meteocons-webfont.svg#MeteoconsRegular') format('svg');
	font-weight:normal;
	font-style:normal;
}
[data-icon]:before {
	font-family: 'MeteoconsRegular';
	content: attr(data-icon);
	font-size: 20px;
	position: relative;
	top: 4px;
}


body {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-family: 'Roboto', Arial, sans-serif;
	font-style: normal;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	font-size:  12px;
	color: #999;
	background-color: transparent;
	margin: 0;
}
* {
	margin: 0;
	box-sizing: border-box;
}


.widget { color:#fff; background-color:#9a8c7f; overflow:hidden; position:relative; } /* padding-top:1px; */
.round-corners { border-radius:8px; }
.widget h2 { text-align:center; margin:8px 6px; line-height:20px; font-size:20px; }

.title { clear:both; line-height:15px; margin-bottom:4px; text-align:center; }

.pollution { text-align:center; font-size:9px; }
.pollution p { letter-spacing:0.6px; font-size:8px; }

/* hide elements for JS to show */
.report h3,
.report.tomorrow .hide-me-wrapper,
.weather-box,
p.message { display:none; }
p.message.persistent { display:block; }
.has-weather .weather-box { display:block; }

.chevron-right { position:relative; }
.chevron-right:after {
	content:'';
	display:block;
	position: absolute;
	top: calc(50% - 5px);
	right: 2px;
	background-image:url(../img/ui/chevron-right.svg);
	width:10px;
	height:10px;
	background-repeat:no-repeat;
	background-size: 100% 100%;
	opacity: 0.7;
}
.chevron-right:hover:after { opacity:1; }





/* .dark-strip { background-color:rgba(0,0,0,0.2); padding:5px; width: 100%; overflow:hidden; } */

/* .routing-wrap { position:relative; height:25px; }
.routing-ui { max-width:650px; margin:0 auto; }
.routing-ui .title { text-align:left; position:absolute; left:0px; width: 70px; padding:0; margin:1px 0 0 0; line-height:13px; }
.routing-ui input { margin:0; border:0; border-radius: 5px; padding: 6px 5px; box-sizing:border-box; }
.routing-ui input[type=input] { height:25px; }
.routing-ui input { width:calc(50% - 2px); display: inline; margin-left: 4px; float:left; }
.screen-2 .routing-ui input { margin-left:0; margin-right:4px; }
.routing-ui input:last-child { margin-right: -20px; }
.routing-ui .button {
	border-radius:5px;
	border:2px solid #fff6;
	background:#0003;
	padding:2px 5px 3px;
	width:calc(50% - 4px);
	float:left;
	cursor:pointer;
	line-height:16px;
} */
/* .routing-ui .button:hover { border:2px solid #fffc; } */


.travel-mode-wrap {
	background-color: #b40063bb;
	border: none;
	border-radius: 5px;
	overflow: hidden;
	font-size: 15px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	display: flex;
	backdrop-filter: blur(6px);
	min-width: min-content;
}
.travel-mode-wrap input,
.travel-mode-wrap label {
	min-width: 30px;
}
.travel-mode-wrap input {
	/* display: none; */
	/* min-width: 30px; */
	height: 100%;
	opacity: 1;
	margin: 0 -30px 0 0;
	z-index: -1;
}
.travel-mode-wrap label {
	/* min-width: 30px; */
	cursor: pointer;
	text-align: center;
	height: 100%;
	margin: 0;
	/* opacity: 0.5; */
	font-size: 0;
    padding: 9px 3px;
	background-color: #c36c95;
	background-color: #670139;
	z-index: 1;
}
.link-screen-1.back.button span {
	display: none;
}
@media (min-width:400px) {
	.link-screen-1.back.button span {
		display: inline;
	}
	.button img { opacity: 0.7; }

	.travel-mode-wrap input,
	.travel-mode-wrap label {
		min-width: 50px;
	}
	.travel-mode-wrap input { margin-right: -50px; }
	.travel-mode-wrap label { padding: 6px; }
}


.travel-mode-wrap input:checked + label {
	opacity: 1;
	background-color: #fff4;
	background-color: #bc0067;
}
.travel-mode-wrap input:checked + label:before { opacity: 1; }
.travel-mode-wrap label:hover:before { opacity: 1; }


/* Image placement */ 
.travel-mode-wrap label:before {
	content: '';
	opacity: 0.7;
	display: block;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center center;
}
.travel-mode-wrap label.walking-before:before {
	background-image: url(../img/ui/walking.svg);
}
.travel-mode-wrap label.cycling-before:before {
	background-image: url(../img/ui/cycling.svg);
	background-size: 85% 85%;
}

/* .button.walking-before { padding-left:19px; }
.button.walking-before:before {
	position: absolute;
	top: calc(50% - 8px);
	left: 5px;
	width:10px;
	height:14px;
} */

/* .routing-ui { position:relative; }
.routing-ui .geo-detect-from { position:absolute; width:20px; height:20px; padding-top:7px; text-align:center; opacity:0.5; }
.routing-ui .geo-detect-from:hover { opacity:1; cursor:pointer; }
.screen-1 .geo-detect-from { right:4px; top:0; }
.screen-2 .routing-ui .geo-detect-from { left:calc(35% - 24px); top:0; } */

.screen-1,
.screen-1 .routing-wrap { margin: 0 auto; }

.routing-ui {
	display: flex;
	gap: 10px;
}
.routing-ui-overlay {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	z-index: 5;
}
.routing-ui input[type=text] {
	flex-grow: 1;
    min-width: 10px;
	background-color: #fff;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;

	/* margin-top: 10px; */
    /* margin-left: 12px; */
    border: 1px solid transparent;
    border-radius: 2px 0 0 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 32px;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    color: #000;
}
/* @media (min-width:300px) {
	.routing-ui input[type=text] {
		flex-grow: 1;
		width: auto;
	}
} */



 .chevron.link-screen-1 {
	top: 59px;
	z-index: 20;
	background: #333;
	border-radius: 100%;
	width: 40px !important;
	height: 20px;
}

.screen-2 { position:relative; overflow:hidden; }
.screen-2 h2 { margin-left:16px; margin-right:16px; }

.chevron { position:absolute; top:10px; left:5px; opacity:1; height:25px; width:25px; min-width:10%; }
.chevron:hover { opacity:1; cursor:pointer; }
@media (min-width:300px) {
	.chevron { left:10px; }
	.screen-2 h2 { margin-left:21px; margin-right:21px; }
}

/* Switch between widget and routing */
.screen-1 { position:relative; transition:left .5s; }
.screen-2 { transition:left .5s; position:absolute; top:0; left:100%; height:100%; width:100%; }

body.show-screen-1 .screen-1 { left:0; }
body.show-screen-1 .screen-2 { left:100%; }

body.show-screen-2 .screen-1 {left:-100%;}
body.show-screen-2 .screen-2 {left:0;}

.routing-map {position: relative;}

.erg-map-banding-strip { text-shadow: 0 0 1px black, 0 0 1px black, 0 0 7px black; }
input::placeholder { color: #585858; }

/* Opacity slider */
/* #opacity-slider-container { position:absolute; margin-left:-200px; margin-top:0!important; top:auto!important; bottom:40px;
	-webkit-user-select:none;
}
#opacity-slider-bar { position:absolute; top:0px; left:22px; overflow:hidden; background-color:yellow; width:160px; height:20px; font-size:0.9em; }
#opacity-slider-handle { position:absolute; top:0px; left:0px; overflow:hidden; background-color:red; width:12px; height:20px; cursor:pointer; }

#opacity-slider-container #less { left:0px; }
#opacity-slider-container #more { left:184px; } */
/* ///////////////// option to have POI in Google style:    #map-show-markers, */
/* #from-to,
#opacity-slider-bar,
#opacity-slider-handle,
#opacity-slider-container .increment { z-index:5; color:#777; line-height:17px; border-radius:2px; background-color:#fff; border:1px solid #999; cursor:pointer;
	-webkit-box-shadow:rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
			box-shadow:rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
}
#opacity-slider-container .increment { margin:0px; position:absolute; top:0px; width:19px; height:20px; text-align:center; padding:3px; font-size:18px; line-height:12px; }
#opacity-slider-bar { cursor:default; text-align:center; font-size:10px; }
#opacity-slider-handle { margin:-1px 0 0 -1px; cursor:ew-resize!important; }

#opacity-slider-container .increment { padding:7px 0 0 0; font-size:14px; height:13px; line-height:6px; } */