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

#Menu
{
	--font-size: 30px;
	--color1: #000000; /* background of the menu and text for input elements */
	--color2: #404040; /* background of menu elements */
	--color3: #E0E0E0; /* text color and background of buttons */
	--color4: #FFFFFF; /* background of input elements */
	--margin: 6px;
	--padding: 6px;
	--radius: 6px;
	
	position: relative;
	
	font-size: var(--font-size);
	background-color: var(--color1);
	color: var(--color3);
	user-select: none;
}

#Menu>div /* flex container */
{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

#Menu>div>aside
{
	flex: 0 0 auto;
}

#Menu>div>article
{
	flex: 0 1 auto;
	overflow-y: auto;
}

#Menu>div>button
{
	position: absolute;
	bottom: 0; right: 0;
	margin: var(--gap);
}

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

#Menu aside
{
	padding: var(--margin);
}

#Menu aside .Status
{
	font-size: small;
	float: right;
	text-align: right;
}

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

#Menu header + *
{
	display: none; /* initial state; toggled by click on preceeding header */
	padding-left: calc(2 * var(--margin));
}

#Menu header, #Menu form, #Menu section label
{
	background-color: var(--color2);
	
	/* collapsing of vertical margins is executed after toggle transition,
	so should be avoided, because results in unsmooth perception! */
	margin-top: var(--margin);
	margin-left: var(--margin);
	margin-right: var(--margin);
	
	border-radius: var(--radius);
	padding: var(--padding);
}

#Menu article
{
	margin-bottom: var(--margin);
}

/*---------------------------------------------------------------------------*/
/* elements for forms and settings */

#Menu label /* container for input elements */
{
	display: block;
	/* margin: var(--margin); */
}

#Menu label small /* header for input elements */
{
	display: block;
	font-size: calc(0.5 * var(--font-size));
}

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

#Menu input, #Menu select
{
	display: block;
	font-size: var(--font-size);
	color: var(--color1);
	background-color: var(--color4);
	/* 'stretch' would be the right thing, because would allow to use margins
     for the input elements, but not supported yet on mobile browsers */
	width: 100%;
}

#Menu input[type=color]
{
	height: var(--font-size);
}

#Menu input[type=checkbox]
{
	width: var(--font-size);
	height: var(--font-size);
}

#Menu input[type=submit]
{
	margin-top: calc(4 * var(--padding));
	background-color: var(--color3);
}

#Menu input[type=submit]:disabled
{
	filter: contrast(0.2);
}

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