.Profile
{
	position: relative;
	background-color: rgba(0, 0, 0, 0.1);
	
	output
	{
		font-size: 80%;
	}
	
	.Container
	{
		width: 100%; height: 100%;
		overflow: auto;
		scrollbar-width: none;
		overscroll-behavior: none;
		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;
		}
	}
	
	.Cursor
	{
		position: absolute;
		top: 0; left: 50%;
		width: 4px; height: 100%;
		transform: translateX(-50%); /* center */
		background-color: black;
		border: 1px solid white;
		display: none; /* initial state */
	}
	
	.Drag
	{
		display: none;
		position: absolute;
		top: 0; left: 0;
		
		output
		{
			display: block;
			margin: 2px;
		}
	}
}