/*---------------------------------------------------------------------------*/

#Main>article>section
{
	width: 100%;
}

/*---------------------------------------------------------------------------*/

#App>article
{
	display: flex;
	flex-direction: row;
}

/*---------------------------------------------------------------------------*/

#Info
{
	flex: 0 0 auto;
	border-right: solid 1px var(--nav_background);
	background-color: var(--submenu_background);
}

/*---------------------------------------------------------------------------*/

#Portrait
{
	flex: 1 1 auto;
	position: relative;
	background-color: rgb(240, 240, 255, 0.8);
}

#PortraitImage
{
	width: 100%;
	height: 100%;
	position: absolute; /* otherwise height will change with canvas height */
	overflow: hidden; /* this is needed for up/down-scaling with keeping cursor position on image properly (not sure why) */
	text-align: center;
}

#PortraitCanvas
{
	position: relative;
	cursor: copy;
}

/*---------------------------------------------------------------------------*/

#Info
{
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0 1em;
	text-align: left;
}

#Info>article
{
	width: 14em; /* this will make the #Info width increase once the scroll bar appears */
}

#Info>article>section
{
	border-bottom: solid 1px var(--table_line);
}

#Info img
{
	vertical-align: bottom;
}

.InfoElements
{
	font-size: x-small;
}

.InfoIcon
{
	float: right;
	margin-left: 0.5em;
}

/*---------------------------------------------------------------------------*/

#Map
{
	flex: 1 1 auto;
	position: relative; /* reference for overlay positions */
	background-color: rgba(240, 255, 240, 0.8);  /*light green transparent*/
	--radius: 5px;
}

#MapGoogle
{
	width: 100%;
	height: 100%;
}

#Map .Overlay
{
	position: absolute;
	padding: 5px;
	border: solid 1px var(--nav_background);
	border-radius: var(--radius);
	white-space: nowrap;
	text-overflow: ellipsis;
	background-color:	inherit;
}

#Map .Overlay .Indent
{
	margin-left: 1em;
}

#Map .Overlay img
{
	vertical-align: sub;
}

#MapSelection
{
	left: 2%; top: 1%;
	max-width: 22%; max-height: 49%;
	overflow-x: hidden; overflow-y: auto;
}

#MapRouting
{
	right: 2%; top: 1%;
	max-width: 22%; max-height: 49%;
	overflow-x: hidden; overflow-y: auto;
}

#MapProfile
{
	right: 1%; bottom: 2%;
	max-width: 93%; max-height: 70%; /* need some space for google buttons on the left! */
	overflow-x: auto; overflow-y: hidden;
	cursor: copy;
}

#MapProfileContour
{
	width: max-content;
	height: max-content;
	min-width: 50px;
	min-height: 70px;
	line-height: 0; /* to make the height same like canvas height */
	text-align: right; /* when canvas width is below min-width */
}

.MapButton
{
	position: absolute;
	padding: 10px 2px;
	border: solid 1px var(--nav_background);
	cursor: pointer;
	line-height: 0; /* to make the button's height same like image it contains */
}

.MapButton:hover
{
	background-color: var(--table_line);
	transition: var(--transition);
}

#MapButtonInfo
{
	bottom: 50%;
	left: -1px; /* to hide the info border by overlap */
	border-left: none;
	border-bottom-right-radius: var(--radius);
	border-top-right-radius: var(--radius);
	background-color: var(--submenu_background);
}

#MapButtonProfile
{
	bottom: 2%;
	right: 1%;
	border-bottom-right-radius: var(--radius);
	border-top-left-radius: var(--radius);
	background-color: rgb(240, 255, 240);  /*light green */
}

/*---------------------------------------------------------------------------*/

#Account_Login,
#Account_Store
{
	width: 16em;
}

/*---------------------------------------------------------------------------*/

#StatusText
{
	font-family: Consolas;
	white-space: pre;
}

/*---------------------------------------------------------------------------*/

#DialogWaiting article
{
	width: 20em;
}

/*---------------------------------------------------------------------------*/

#Map .MyCursor
{
	cursor: help;
}