@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

footer {
		margin-top: 50px;
}

.CodeMirror {
		height: auto;
		border: 1px solid #ddd;
}

.CodeMirror-scroll {
		max-height: 200px;
}

.CodeMirror pre {
		padding-left: 7px;
		line-height: 1.25;
}

.banner {
		background: #ffc;
		padding: 6px;
		border-bottom: 2px solid silver;
		text-align: center
}

iframe {
		width: 100%;
}

.saveBtn {
		background-color: green;
		color: white;
		cursor: pointer;
		padding: 10px;
		border: none;
		text-align: left;
		outline: none;
		transition: 0.4s;
		border-radius: 10px;
		font-size: 14pt;
		float: left;
}

.rquiz {
		background-color: white;
}

.belohnung {
		display: none;
}

#highscore-container {
		display: none;
}

.highscores {
		height: 400px;
		overflow: auto;
}

.Horizontal_20_Line {
		font-size: 6pt;
		border: 3px;
		font-family: 'Open Sans';
		writing-mode: horizontal-tb;
		direction: ltr;
		margin-top: 0cm;
		margin-bottom: 0.499cm;
		padding: 0cm;
		border-left-style: none;
		border-right-style: none;
		border-top-style: none;
		border-bottom-width: NaNcm;
		border-bottom-style: solid;
		border-bottom-color: #000000;
}

h2 {
		font-size: 20pt;
		font-weight: bold;
		margin-bottom: 0.212cm;
		margin-top: 0.423cm;
		font-family: 'Open Sans';
		writing-mode: horizontal-tb;
		direction: ltr;
		text-align: center ! important;
}

h1 {
		font-size: 36pt;
		font-weight: bold;
		margin-bottom: 0.212cm;
		margin-top: 0.423cm;
		text-align: center ! important;
		font-family: 'Open Sans';
		writing-mode: horizontal-tb;
		direction: ltr;
		text-decoration: none ! important;
}

h3 {
		font-size: 16pt;
		font-weight: bold;
		margin-bottom: 0.212cm;
		margin-top: 0.423cm;
		font-family: 'Open Sans';
		writing-mode: horizontal-tb;
		direction: ltr;
		text-align: left ! important;
		font-style: italic;
}

p {
	font-size: 12pt;
	font-family: 'Open Sans';
	writing-mode: horizontal-tb;
	direction: ltr;
}

.quelle {
	font-size: 8pt;
	font-family: 'Open Sans';
	writing-mode: horizontal-tb;
	direction: ltr;
	font-style: italic;
}

li {
		font-family: 'Open Sans';
		font-size: 12pt;
}

.left {
		float: left;
}

.right {
		float: right;
}

body {
		max-width: 18cm;
		margin-top: 2cm;
		margin-bottom: 2cm;
		margin-left: auto;
		margin-right: auto;
		font-family: 'Open Sans';
		font-size: 12pt;
		background-color: white;
}

.accordion {
		background-color: #007eb4;
		color: white;
		cursor: pointer;
		padding: .6em 0.5em;
		width: 100%;
		text-align: left;
		transition: 0.4s;
		min-height: 44px;
		font-size: 1.1em;
}

.accordion:after {
		content: '\002B';
		color: white;
		font-weight: bold;
		float: right;
		margin-left: 5px;
}

.active:after {
		content: "\2212";
}

.panel {
		padding: 0 18px;
		display: none;
		background-color: white;
		overflow: hidden;
}
/* The Modal (background) */

.modal {
		display: none;
		/* Hidden by default */
		position: fixed;
		/* Stay in place */
		z-index: 1;
		/* Sit on top */
		padding-top: 100px;
		/* Location of the box */
		left: 0;
		top: 0;
		width: 100%;
		/* Full width */
		height: 100%;
		/* Full height */
		overflow: auto;
		/* Enable scroll if needed */
		background-color: rgb(0, 0, 0);
		/* Fallback color */
		background-color: rgba(0, 0, 0, 0.4);
		/* Black w/ opacity */
}
/* Modal Content */

.modal-content {
		background-color: #fefefe;
		margin: auto;
		padding: 20px;
		border: 1px solid #888;
		width: 80%;
}
/* The Close Button */

.close {
		color: #aaaaaa;
		float: right;
		font-size: 28px;
		font-weight: bold;
}

.close:hover,
.close:focus {
		color: #000;
		text-decoration: none;
		cursor: pointer;
}

.img_float_left {
		float: left;
}

.img_float_right {
		float: right;
}

.img_inline {
		max-height: 50px;
		max-width: 100px;
}

.pupil_data {
		text-align: center;
}

.infoBox {
		border: solid;
		border-color: #007eb4;
		margin-top: 20px;
		min-height: 150px;
		width: 100%;
}

.infoBox .header {
		background-color: #007eb4;
		color: white;
		padding: .6em 0.5em;
		text-align: left;
}

.infoBox .text {
		padding: 5px
}

.navBtn {}
/* Create two equal columns that floats next to each other */

.column {
		float: left;
		width: 50%;
		padding: 10px;
		box-sizing: border-box;
}
/* Clear floats after the columns */

.row:after {
		content: "";
		display: table;
		clear: both;
}

.executeBtn {
		width: 100%;
		text-align: center;
		background-color: blue;
		color: white;
		cursor: pointer;
		padding: 10px;
		border: none;
		outline: none;
		border-radius: 10px;
		font-size: 14pt;
		margin-bottom: 20px;
}

.extra_wide {
	position: relative;
	left: -50%;
	width: 200%;
}

.extra_high {
	height: 75%;
}