#Info
{
	--gap: 4px;
	
	height: fit-content;
	background-color: var(--border-color);
	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
	{
		background-color: #E0E0E0; /* grey */
		border-radius: 5px;
		padding: 1px 4px;
		width: fit-content;
		height: fit-content;
		user-select: none;

		img
		{
			vertical-align: middle;
		}

		span.Unit
		{
			font-size: x-small;
		}

		span.Val
		{
			display: inline-block; /* otherwise a width cannot be set */
			text-align: right;
			font-family: Consolas, monospace;
			font-weight: bold;
			min-width: 3ch;
		}

		/* customizations for specific fields */

		&[name=Course_Distance],
		&[name=Course_Duration],
		&[name=Course_Arrival]
		{
			background-color: #8adf8a; /* green */
		}

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

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

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