* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 0;
	margin: 0;
}
html {
	height: 100%;
	background: white;
}
body {
	height: 100%;
	background: white;
	font-family: Verdana,Tahoma,Geneva, sans-serif;
	font-size: 16px;
	display: flex;
	flex-direction: column;
}

.page-content {
	flex: 1 0 auto; /* resize in container */
	flex-direction: column;
	overflow: hidden;
	display: flex;
	/*padding: 5px 15px 50px 15px;*/
	background: white;
}
.footer {
	flex-shrink: 0;
	padding: 20px;
	background-image: url("../../images/backgrounds/footer.png");
	height: auto;
	color: #bbb;
}

/* Basic styling */
	/* text */
.normal {
	font-size: .9em;
}
.normal1 {
	font-size: .95em;
}
.normalTitle {
	font-size: 1.0em;
	font-weight: bold;
}
.selectLabel {
	color: #565681;
	font-size: .9em;
	width: 100px;
	height: 25px;
}
.selectList {
	color: #565681;
	font-size: .9em;
	width: 150px;
	height: 25px;
}
.myButton {
	font-size: 1.1em;
	padding: 5px 12px 5px 12px;
}
.myPinPadButton {
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: linear-gradient(#ebebeb, #bababa);
	border: thin;
	border-style: solid;
	border-color: darkgray;
	cursor: pointer;
	height: 60px;
	width: 60px;
	opacity: 1;
	transition: 0.3s;
	border-radius: 3px
}
	.myPinPadButton:hover {
		opacity: 0.6;
	}
	.myPinPadButton:active {
		opacity: 1;
		border: thin;
		border-style: solid;
		border-color: black;
	}
.myLittleButton {
	font-size: 1.0em;
	padding: 2px 5px 2px 5px;
}
.myPlainButton {
	background-color: white;
	border: none;
	color: black;
	padding: 0px 10px 0px 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 1.0em;
	cursor: pointer;
}

/* hyperlinks */
a {
	color: white;
	text-decoration: none;
}
.myLink {
	text-decoration: underline;
	font-size: 1em;
	font-weight: normal;
}
	.myLink:link {
		color: #565681;
	}
	.myLink:visited {
		color: #565681;
	}
	.myLink:hover {
		color: #0047B6;
	}
	.myLink:active {
		color: #0047B6;
	}


/* tables */
table {
	border-spacing: 0;
	border-collapse: collapse;
}

td {
	padding: 0px
}

	td img {
		display: block;
	}

.tdpadded-r20 {
	padding: 5px 20px 5px 5px;
}

.tdpadded-r10 {
	padding: 5px 10px 5px 5px;
}


/* menu */
nav {
	background: #222;
	background-image: url("../../images/backgrounds/header.png");
	padding: 0 15px;
	width: 100%;
}

.menu, .submenu {
	list-style-type: none;
}

.logo {
	font-size: 25px;
	font-style: italic;
	padding: 5px 10px 5px 0;
	font-weight: 600;
}

.item {
	padding: 10px;
	border: 0px #444 solid;
}

.subitem {
	padding: 5px 10px 5px 10px;
	border: 1px #222 solid;
}

.item.button {
	padding: 9px 5px;
}

.item:not(.button) a:hover, .item a:hover::after {
	color: #ccc;
}

.myLiveItem {
	color: red;
}

/* Mobile menu */
.menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

	.menu li a {
		display: block;
		padding: 15px 5px;
	}

	.menu li.subitem a {
		padding: 10px;
	}

.toggle {
	order: 1;
	font-size: 20px;
}

.item.button {
	order: 2;
}

.item {
	order: 3;
	width: 100%;
	text-align: left;
	display: none;
}

.active .item {
	display: block;
}

.button.secondary { /* divider between buttons and menu links */
	border-bottom: 1px #444 solid;
}

/* Submenu up from mobile screens */
.submenu {
	display: none;
}

.submenu-active .submenu {
	display: block;
}

.has-submenu i {
	font-size: 12px;
}

.has-submenu > a::after {
	font-family: "Font Awesome 5 Free";
	font-size: 12px;
	line-height: 16px;
	font-weight: 900;
	content: "\f078";
	color: white;
	padding-left: 5px;
}

.subitem a {
	padding: 10px 15px;
}

.submenu-active {
	background-color: #111;
	border-radius: 3px;
}

/* for footer items*/
.FooterGrid {
	display: grid;
	grid-gap: 10px;
	padding: 10px;
	height: auto;
	width: auto;
	grid-template-columns: 1fr;
}
.FooterItem {
	padding: 20px;
	height: auto;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

}