html, body {
	height: 100%;
	margin: 0;
	font-family: 'Roboto', 'sans-serif';
	overflow: hidden;
	position: relative;
	touch-action: none;
}

* {
	color: #000;
}

button {
	/* To avoid extra :active padding. */
	padding: 0;
	cursor: pointer;
	width: 40px;
}

#map {
	height: 100%;
}

.control {
	background-color: #fff;
	border: 0px solid #fff;
	border-radius: 2px;
	line-height: 40px;
	text-align: center;
	box-sizing: border-box;
	font-size: 14pt;
	vertical-align: sub; /* Icon is a bit up. */
	width: 40px;
	margin: 10px;
	text-decoration: none;
}

.control,
.control * {
	cursor: pointer;
}

.control:hover {
	outline: 4px solid rgba(255,255,255,.4);
}

.control,
.control button {
	text-shadow: 2px 2px rgba(0, 0, 0, .05), 1px 1px rgba(0, 0, 0, .09), 3px 3px rgba(0, 0, 0, .02);
}

.control * {
	user-select: none;
}

#overview-control {
	margin-bottom: 10px;
}

#locateme-control.active {
	color: red;
}

#tape-control,
#erase-control,
#locateme-control,
#device-control {
	margin-bottom: 24px;
}

#device-control {
	width: auto;
}
#device-type {
	padding: 0 .5ch;
}

#device-control select {
	top: -1px; /* Workaround. */
	position: relative;
}

#device-control button {
	padding: 0 1ch;
	font-weight: bold;
	border-left: 1px solid #e6e6e6;
}

button:hover {
	background-color: #f0f0f4;
}

select, button {
	background-color: #fff;
	border: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	line-height: 40px !important;
}

#device-control button:hover {
	background-color: #eee;
}

#lock-control {
	transition: opacity .08s ease;
	box-sizing: border-box;
	font-size: 12pt;
}

#search {
	margin: 0 10px;
	border: none;
	height: 25px;
	position: absolute;
	top: -10000px;
	width: 50ch;
	max-width: calc(100vw - 80px);
}

#search + button {
	display: none;
}

#search:focus {
	position: static;
}

#search:focus + button {
	display: initial;
}

#search-control {
	z-index: 1 !important;
}

#search-control:focus-within {
	width: unset;
	padding: 0 12px;
}

.gm-fullscreen-control:not(:hover),
#search-control.dimmed:not(:hover):not(:focus-within),
#help-control:not(:hover),
#cart-control.fa-shopping-cart:not(:hover),
#mail-control:not(:hover),
#lock-control.fa-unlock:not(:hover) {
	opacity: .5;
}

#mail-control {
	margin-bottom: 0;
}

main,
#overview,
#overview > div,
article,
article > div {
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;
}

main {
	flex-direction: column;
	height: 100%;
}

#map {
	align-self: stretch;
	/* display: block; */
}

button[data-toggled] {
	outline: 4px solid rgba(255, 255, 255, .4);
}

#overview {
	flex-direction: row;
	overflow-y: hidden;
	overflow-x: scroll;
	scroll-snap-type: y mandatory;
	align-content: stretch;
}

#overview > div {
	user-select: none;
	padding: 1ch;
	scroll-snap-align: start;
	/* border-right: 1px solid black; */
	cursor: pointer;
	white-space: pre;
	align-items: center;
	flex-direction: column;
	flex-basis: 0;
}

#overview:empty {
	display: none;
}

#overview > div:not(:last-child) {
	border-right: 1px solid #e6e6e6;
}

.control,
article > div,
#overview > div:hover {
	box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

#overview > div > span {
	padding: .5ch 0 1ch 0;
	border-top: 1px solid rgb(245, 245, 245);
}

#overview > div > img {
	height: 40px;
	clip-path: inset(0 0 10px 0);
}
/* InfoWindow */
.iw-buttons:not(:first-child) {
	text-align: center;
	margin-top: 18px;
}

.gm-style .gm-style-iw-c {
	border-radius: 2px;
	font-size: 18px !important;
	padding: 18px;
}

/* InfoWindow close button. */
.gm-style-iw > button {
	top: 0 !important;
	right: 0 !important;
	width: 22px !important;
	height: 22px !important;
}
.gm-style-iw > button > img {
	width: 100% !important;
	height: 100% !important;
	margin: 0px !important;
}

article {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	background: rgba(0, 0, 0, .23);
}

article > div {
	width: 90vw;
	height: 90vh;
	max-width: 80ch;
	border-radius: 6px;
	background: white;
	flex-direction: column;
	align-items: stretch;
	overflow: hidden;
}

article button {
	width: auto;
}

article iframe {
	display: block;
	border: none;
	flex: 1;
}

article iframe {
	border-bottom: 1px solid #e6e6e6;
}

@media print {
	.control {
		display: none;
	}
}

@media only screen and (max-width: 410px) {
	#add-device {
		display: none;
	}
}