/* colors
	#1D6573, = main backgroundcolor (blue)
	#3367D6 = theme color (blue)
*/
body {
	margin: 0px 0px 0px 0px;
	width: 100%;
	min-height: 100vh;
	font-family: Arial, Verdana, sans-serif;
}

body > div{
	margin-left: auto;
	margin-right: auto;
}

#main {
	box-sizing: border-box;
	padding: 0px 0px 5px 0px;
	font-size: 1em;
	min-height: calc(100vh - 40px); /*40px = footer-height*/
	background-color: #c2cae4;
}

#messages, #footer, #footer a, #installApp, #header {
	background-color: #804d00;
	text-align: center;
	color: #f5f5f0;
}

#header > div {
	display: grid;
	grid-template-columns: auto auto;
	align-items: start stretch;
	height: 44px;
	width: 100%;
}

#header .headerimage {
	text-align: left;
}

#header .headerimage img {
	margin: -2px 0px 0px 15px;
  height: 40px;
}

#header .headertext {
	width: auto;
	font-size: 140%;
}

/* navigation */
#navigation {
	display: grid;
	grid-template-columns: 80% 20%;
	width: 100%;
	height: 29px;
}

#navigation select,
#navigation input {
	width: 100%;
	height: 29px;
}

.breadcrumbitem {
	cursor: pointer;
}

/* selections */

#installApp {
	padding: 5px 0px 5px 0px;
}

#footer {
	box-sizing: border-box;
	bottom: 0;
	width: 100%;
	padding: 10px 0px 10px 0px;
	height: 40px;            /* Footer height */
}

/* selections */
#selections {
	padding: 8px 0px 3px 10px;
	text-align: left;
	color: #f5f5f0;
	background-color: #1D6573;
}

.bottom-buttons > div {
	margin-top: 15px;
	display: grid;
	grid-template-columns: auto auto;
	column-gap: 15px;
}

.bottom-buttons button {
	padding: 3px 10px 3px 10px;
}

button.selected {
	border: 2px solid #3367D6;
	box-shadow: 2px 2px 2px #15306a;
}

.backbutton {
	float: left;
	margin-left: 10px;
}

.nextbutton {
	float: right;
	margin-right: 10px;
}

/* instruction */
#instruction {
	padding: 8px 0px 3px 0px;
	text-align: center;
	color: #f5f5f0;
	background-color: #0F998A;
}

/* mainpanel */

#mainpanel {
	padding: 15px 25px 15px 25px;
}

.buttons {
	width: 80%;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(23%, 1fr));
	grid-gap: 10px;
	text-align: center;
}

.buttons button {
	min-width: 50px;
	max-width: 100px;
	min-height: 30px;
}

#messages {
	padding: 8px 0px 3px 0px;
	background-color: #1D6573;
}

#messages.warning {
	background-color: #ff8080;
}

/* videoselector */

.videobuttons {
	grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
}

.videobuttons button {
	max-width: none;
	text-align: left;
}

.videobuttons button :after {
	white-space: pre;
}

li.video-li {
	cursor: -webkit-grab;
	cursor: grab;
}

/* videoplayer */

video {
	max-width: 100%;
	height: auto;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	h1 {
		color: RED;
	}	
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	h1 {
		color: BLUE;
	}
	
	#main, #footer {
		max-width: 768px;
		font-size: 1em;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	h1 {
		color: GREEN;
	}
	

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	h1 {
		color: BLUE;
	}	
}