#Map .Profile
{
	position: relative;
	background-color: var(--overlay-background);
	
	output
	{
		font-size: 80%;
	}
	
	.Container
	{
		width: 100%; height: 100%;
		overflow: auto;
		scrollbar-width: none;
		overscroll-behavior: none;

		/* when moving this to .Profile, on Android no pointer events are
		received any longer => no cursor info update, but scroll works... strange */
		pointer-events: auto; /* drag the profile, not the map */
		touch-action: none; /* prevent scrolling by touch */
			
		&>div
		{
			width: fit-content;
			padding: 0 50%; /* allows scrolling the left and right canvas edge up to the middle */

			&>div
			{
				position: relative;
				
				canvas
				{
					display: block; /* for making the embodying div the same height */
				}
				
				.Geoloc, .Marker /* canvas overlays */
				{
					position: absolute;
					transform: translate(-50%,-50%); /* anchor at element's center */
					display: none; /* initial state */
				}
			}
		}
	}
	
	.NoData
	{
		display: none; /* initial state */
		
		.Message
		{
			width: fit-content;
			margin: 1em auto; /* hor centering */
			padding: 0.5em;
			font-size: larger;
			font-weight: bold;
			color: #404040;
			text-shadow: 1px 1px 2px white;
		}
	}
}