:root {
	
}

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

html {
	font-family: 'PT Sans', sans-serif;
	font-size: 16px;
	min-width: 320px;
	height: 100%;
}

body {
	display: block; 
	margin: 0; 
	padding: 0; 
	width: 100%;
	height: 100vh;
	height: 100dvh;
}

.hidden {display: none !important;}

#map {
	display: block; 
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0; 
	width: 100%; 
	height: 100vh;
	height: 100dvh;
}

#map-distance {
	position: absolute;
	right: calc((100vw / 2) - 90px); 
	top: 16px;
	z-index: 1000;
	width: 180px;
	padding: 5px 10px;
	font-weight: bold;
	font-size: 14px;
	text-transform: uppercase;
	color: #00f;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0px 20px 40px rgba(2, 2, 2, 0.15), 0px 0px 3px rgba(2, 2, 2, 0.15);
	text-align: center;
}

.addr-mode-from .map-pin-from,
.addr-mode-where .map-pin-where {display: none;}

#map-button-done {width: calc(100vw - 20px); position: absolute; left: 10px; bottom: 20px; z-index: 1000; cursor: pointer; user-select: none;}

.map-center {
	display: none;
	width: 22px; 
	height: 31px; 
	margin: 0 auto; 
	position: absolute; 
	left: calc(50dvw - 11px);
	top: calc(50dvh - 31px); 
	z-index: 1000;
}

.addr-mode-from .map-center-from {display: block;}
.addr-mode-where .map-center-where {display: block;}

.map-center .pin {
	width: 22px;
	height: 31px;
	background-color: red;
	position: absolute;
	left: 0;	
	top: 0;
	background: url(/online/img/pin.svg) bottom center; 
	background-repeat: no-repeat;
	z-index: 1;
}

.map-center .text {
	padding: 5px 10px; 
	position: absolute;
	bottom: 32px;
	left: -149px;
	width: 320px;
	text-align: center;
	font-size: 24px;
	line-height: 1.2em;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: #fff 0 0 2px, #fff 0 0 2px, #fff 0 0 4px;
	user-select: none;
	color: #00f;
}
.map-center .text .address {color: #000; font-size: 17px;}

.search-animation {
	position: absolute; 
	width: 72px; 
	height: 72px; 	
	left: -25px;
	top: -5px; 
	z-index: 0;
}

.map-message {display: none;}

#show-route {
	display: block; 
	border: 0 none;
	border-radius: 4px;	
	width: 100%;
	padding: 10px; 
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .3s;
	background-color: #ddd;
}
#show-route:hover {background-color: #ccc;}
#show-route:active {background-color: #bbb;}

@media all and (min-width: 768px) and (min-height: 640px) {

	.over-map #order-form {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
		width: 400px;
		margin: 16px;
		border-radius: 8px;
		box-shadow: 0px 20px 40px rgba(2, 2, 2, 0.15), 0px 0px 3px rgba(2, 2, 2, 0.15);
	}

	.map-mobile { display: none; }
	.map-message { 
		display: block; 
		position: absolute;
		left: 20px;
		top: 20px;
		display: inline-block;
		background-color: #fff;
		padding: 10px;
		z-index: 1;
		font-size: 14px;
		border-radius: 5px;
		box-shadow: 0px 10px 20px rgba(2, 2, 2, 0.15);
		user-select: none;
		cursor: pointer;
	}

	#map-distance {
		right: calc(((100vw - 416px) / 2) - 90px); 
	}


	.addr-mode-from #map {cursor: url("/online/img/pin-from.svg") 32 48, crosshair !important;}
	.addr-mode-where #map {cursor: url("/online/img/pin-where.svg") 32 48, crosshair !important;}

	.icon-pin.active {background-image: url(/online/img/pin-blue.svg); opacity: 1;}

	.addr-mode-from .map-pin-from,
	.addr-mode-where .map-pin-where {display: block;}

	.map-center {display: none !important;}

}