#Map .Info
{
	background-color: var(--overlay-background);
	pointer-events: auto; /* no map drag */
	
	&>div /* flex container */
	{
		color: black;
		font-size: 20px;
		
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		
		/* note that margins of flex box elements do not collapse */
		row-gap: var(--gap);
		column-gap: var(--gap);
		padding: var(--gap);
		
		output
		{
			max-width: 100%;

			.Val
			{
				min-width: 3ch;
			}

			&[name=Course_Distance],
			&[name=Course_Duration],
			&[name=Course_Arrival],
			&[name=Course_Uphill]
			{
				background-color: #d0d0e8; /* purple */
			}

			&[name=Track_Name] .Val
			{
				font-family: unset;
				font-weight: unset;
			}

			&[name=Geoloc_Position] .Val
			{
				font-weight: unset;
			}

			&[name=Course_Duration] .Val
			{
				min-width: 5ch;
			}
			
			&.Strong
			{
				background-color: #ffa0a0; /* red */
			}
		}
	}
}