@import 'https://fonts.googleapis.com/css?family=Open+Sans';

* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', sans-serif;
	line-height: 1.75em;
	font-size: 16px;
	color: #bbb;
	background-color: #003a5d;
	background-image: linear-gradient(45deg, #000000 0%, #181818 74%);
	background-position: center 0;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;

}

.simple-container {
	max-width: 600px;
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 20px;
}

.simple-print {
	fill: white;
	stroke: white;
}

.simple-print svg {
	height: 100%;
}

.simple-close {
	color: white;
	border-color: white;
}

.simple-ext-info {
	border-top: 1px solid #aaa;
}

p {
	font-size: 16px;
}

h1 {
	font-size: 30px;
	line-height: 34px;
}

h2 {
	font-size: 20px;
	line-height: 25px;
}

h2.error {
	margin-top: 3rem;
}

h3 {
	font-size: 16px;
	line-height: 27px;
	padding-top: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #D8D8D8;
	border-top: 1px solid #D8D8D8;
}

hr {
	height: 1px;
	background-color: #d8d8d8;
	border: none;
	width: 100%;
	margin: 0px;
}

a[href] {
	color: #1e8ad6;
}

a[href]:hover {
	color: #3ba0e6;
}

img {
	max-width: 100%;
}

li {
	line-height: 1.5em;
}

aside,
[class *="sidebar"],
[id *="sidebar"] {
	max-width: 90%;
	margin: 0 auto;
	border: 1px solid lightgrey;
	padding: 5px 15px;
}

a[href].button {
	background-color: #1e8ad6;
	color: #ffffff;
	font-weight: bold;
	text-decoration: none;
	padding: 6px 14px;
	border-radius: 4px;
	border: 1px solid transparent;
	box-shadow: 3px 6px 5px rgba(0, 0, 0, 0.2);
}

a[href].button:hover {
	background-color: #3ba0e6;
	color: #ffffff;
}

.actions {
	margin: 20px 0 30px;
	text-align: center;
}

.actions a {
	display: inline-block;
	margin: 5px 10px;
}

.plyr {
	margin: 0 auto;
	max-width: 600px;
	max-height: 600px;
}

.qrcode {
	margin: 20px 0;
	text-align: center;
}

.qrcode_help {
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	margin: 0 10px 10px;
}


.loader {
	margin: 1em auto;
	color: #ffffff;
	font-size: 45px;
	text-indent: -9999em;
	overflow: hidden;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	position: relative;
	transform: translateZ(0);
	animation: mltShdSpin 1.7s infinite ease, round 1.7s infinite ease;
}

@keyframes mltShdSpin {
	0% {
		box-shadow: 0 -0.83em 0 -0.4em,
			0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
			0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
	}

	5%,
	95% {
		box-shadow: 0 -0.83em 0 -0.4em,
			0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em,
			0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
	}

	10%,
	59% {
		box-shadow: 0 -0.83em 0 -0.4em,
			-0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em,
			-0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
	}

	20% {
		box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em,
			-0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em,
			-0.749em -0.34em 0 -0.477em;
	}

	38% {
		box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em,
			-0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em,
			-0.82em -0.09em 0 -0.477em;
	}

	100% {
		box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em,
			0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
	}
}

@keyframes round {
	0% {
		transform: rotate(0deg)
	}

	100% {
		transform: rotate(360deg)
	}
}



@media (min-width: 1921px) {
	body {
		font-size: 18px;
	}
}