body {
	display: grid;
	grid-template-rows: [top] 72px 36px calc(100vh - 130px) 22px [bottom];
	grid-template-columns: 100vw;
	grid-template-areas:
		"header"
		"menuBar"
		"mainBody"
		"footer";
}

/* ===== HEADER ===== */
#zHeader {
	position: relative;
	width: 100%;
	height: 100%;
	background-color:rgb(68, 84, 106);
	color: white;
}

#zHeader img {
	height: 100%;
}

/* =====  MENU  ===== */


/* =====  BODY  ===== */


/* ===== FOOTER ===== */
#zFooter {
	width: 100%;
	background-color: var(--pageFooter-background_color);
	color: var(--pageFooter-font_color);
	font-size: var(--generic-fontSize_small);
	font-style: italic;
}

#fmessage {
	padding-left: var(--spacing_default);
	color:goldenrod;
}
#switchBlock {
	/*padding: var(--spacing_small) var(--spacing_default);*/
	border-left: 1px solid grey;
	padding-left: var(--spacing_default);
}

/*========================================
			Theme swtitcher
	======================================== */
.toggle {
	position: relative;
	box-sizing: border-box;
	font-size: 1.2rem;
}
.toggle input[type="checkbox"] {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
	cursor: pointer;
	opacity: 0;
}
.toggle label {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}
.toggle label:before {
	content: "";
	width: 2em;
	height: 1em;
	background: #fff;
	border: 1px solid #ddd;
	box-shadow: inset -1em 0 0 #225;
	position: relative;
	display: inline-block;
	border-radius: 0.5em;
	box-sizing: border-box;
	transition: 0.25s ease-in;
}

.toggle label:after {
	content: "";
	width: 0.7em;
	height: 0.7em;
	position: absolute;
	left: 0.14em;
	border-radius: 50%;
	background: #fffdfd;
	box-shadow: inset -0.24em -0.12em #333;
	transition: 0.2s ease-in-out;
}

.toggle input[type="checkbox"]:checked + label:before {
	box-shadow: inset 1em 0 0 lightCyan;
}
.toggle input[type="checkbox"]:checked + label:after {
	box-shadow: inset 0 0 0 2px lemonChiffon;
	background: #ffbc00;
	left: 1.06em;
	border: 2px dotted #fff;
}

/*========================================
	 webAPI State Indicator
	======================================== */
#webApiState {
	display: flex;
	border-left: 1px solid grey;
	padding-left: var(--spacing_default);
}