/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */

:root
{
	/* --panel-background-color: rgb(128, 201, 225); */
	--panel-background-color: rgb(174, 203, 212);

	--panel-border: 2px solid black;
	--panel-border-radius: 5px;

	--panel-margin: 25px;
	--panel-padding: 10px;

	--panel-shadow: 5px 5px 2px 1px rgba(0, 0, 0, 0.4);
}

span {
	display:block;
}

ul {
	margin: 3px;
}

h2 {
	margin: 0px;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
	position: static;
	font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

#map {
  height: 100%;
}

.panelClass {
	background-color:var(--panel-background-color);
	border: var(--panel-border);
	border-radius: var(--panel-border-radius);
	padding: var(--panel-padding);
	margin: var(--panel-margin);
	box-shadow: var(--panel-shadow);
}

#appInfoTriggerPanelID {
	position: absolute;
	left: 0px;
	bottom: 0vh;
	z-index: 2;
	scale: 0.75;
}

#appInfoTextPanelID {
	visibility: hidden;
	position: absolute;
	left: 0px;
	bottom: 0px;

	opacity: 0;

	z-index: 3;

	transition: visibility 0.25s, opacity 0.25s;
}

/* #appInfoTextPanelID > h1 {
	size: 1.2em;
} */

#currentCoordsPanelID {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0%);
	bottom: 0px;

	z-index: 2;
	padding: 5px 10px 5px 10px;
}

#mouseTooltipId {
	background-color: var(--panel-background-color);
	border: 2px solid black;
	border-radius: 0px 15px 15px 15px;
	display:none;
	z-index: 2;
	position: absolute;
	margin: 0px;
	padding: 5px;
	cursor:crosshair;
	box-shadow: var(--panel-shadow);
}