/* -------------------------------------------------------------------------
NOTE: A CSS pixel is not a screen pixel!
96px = 1 inch = 2,54 cm on the target device
*/

*
{
	box-sizing: border-box;
}

html
{
	width: 100%; height: 100%;
}

body
{
	width: 100%; height: 100%;
	margin: 0; padding: 0;
	font-family: Calibri, sans-serif;
	
	/* for overlay elements */
	--background-color: rgba(230, 230, 230, 0.9);
	--border-color: #808080;
	--border-width: 2px;
	--gap: 10px;
}

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

#App
{
	width: 100%; height: 100%;

	display: flex;
	flex-direction: row;
}

#App>*
{
	width: 100%; height: 100%;
	flex: 1 1 auto;
	
	display: flex;
	flex-direction: column;
}

#App>*>*
{
	width: 100%; height: 100%;
	flex: 1 1 auto;
}

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

button /* for 32x32 icons */
{
	width: 48px; height: 48px;
	padding: 6px; /* to center the icon exactly */
	margin: 0;
	border: var(--border-width) solid var(--border-color);
	border-radius: 10px;
	background-color: var(--background-color);
}

button.Off
{
	filter: saturate(0);
}

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

span
{
	white-space: nowrap;
}

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