/*
    Browserreset
	
*/
html, body {
    margin: 0px;
    padding: 0px;
    border: none;
    background-color: Black;
    color: #111; 
    font-family: Helvetica, Arial, Verdana, sans-serif;
}

/*
   Elemente müssen wieder ihren 'margin' bekommen, den wir am Anfang zurück gesetzt haben.
*/
body {
    margin: 0px 1.3em;
}

#content h2, #content p {
    margin: 1em 0px;
}

body {
	background-color: GhostWhite;
	display: block;
	padding-left: 5px;
	padding-right: 5px;
}

div#all { width: 100%;}

div#spalte-1, div#spalte-2, div#spalte-3 { 
	float: left; 
	width: 33.33333%; 
	display: flex;
  align-items: center;
  justify-content: center;	
}
div#footer { clear: left; }

#spalte-1 {}

#spalte-2 {}

#spalte-3 {}

h1, h2{
	color: indigo;
}

p.aufgabe{
	border: none;
	background-color: orange;
	color: black;		
    padding: 5px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 120%;	
}

p.ergebnis{
	border: none;
	color: black;		
    padding: 5px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 120%;	
}
	
p.ergebnisOK{
	background-color: LightGreen;
}	

p.ergebnisFehler{
	background-color: #F44336;
}	


table {
	background-color: white;
    border-collapse: collapse;
	width: 100%;
}

} 
table, th, td {
    border: 1px solid black;
}

th {
	background-color: indigo;
	color: white;
	height: 50px;
	padding: 5px;
	text-align: left;
    vertical-align: center;
}

td {
	padding: 5px;
	text-align: left;
    vertical-align: center;
}

tr:nth-child(even) {background-color: lavender;}
tr:hover {background-color: NavajoWhite ;}	/* gold, SandyBrown */

.label {
	color: white;
	padding: 8px;
}
.success {background-color: #4CAF50;} /* Green */
.info {background-color: #2196F3;} /* Blue */
.warning {background-color: #ff9800;} /* Orange */
.danger {background-color: #f44336;} /* Red */ 
.other {background-color: #e7e7e7; color: black;} /* Gray */ 
.indigo {background-color: #e7e7e7; color: Indigo;} 

label {
	font-weight: bold;
	color: indigo;
}

fieldset {
	border: 1px solid indigo;
}

legend {
	background-color: indigo;
	color: white;
	padding: 5px 10px 5px 10px;
}

textarea {
	font-family: Times New Roman, Georgia, serif;
	font-size: 120%;
	color: #555555;
	width: 100%;
	height: 150px;
	padding: 5px 10px;
	box-sizing: border-box;
	border: 1px solid indigo;
}

select {
	font-size: 110%;
	color: indigo;
}

a:link, a:visited { 
	cursor: auto;
    background-color: GhostWhite; 
    border: none;
    color: indigo;
    padding: 2px 10px;
    text-align: left;
    text-decoration: none;
    display: inline-block;
    font-size: 110%;	
}

a:hover {
    background-color: orange;
}

a:active {
    background-color: orange;
}


.button {
	background-color: #4CAF50; /* Green */
	border: none;
	color: white;
	padding: 10px 20px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
}

.button:hover {
	background-color: orange; 	/* NavajoWhite */
	color: white; 
	/*border: 2px solid Indigo; */
} 

.button:focus {
	background-color: orange; 	/* NavajoWhite */
	color: white; 
	/*border: 2px solid Indigo; */
} 

.button0 {background-color: white; color: black; border: 2px solid Indigo;} /* Black */
.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black; border: 2px solid Indigo;} /* Gray */
.button5 {background-color: #555555;} /* Black */
.button6 {background-color: Indigo;} 
.button7 {background-color: SandyBrown;} 

button[type=submit]::-moz-focus-inner {border: 1px dotted transparent;}

hr {
	border:solid #e7e7e7 1px;
	background-color:indigo;
	height:2px;margin:16px 0px;
}

pre {
	font-family: Lucida Console, Courier New;
}

/* hr { */
    /* display: block; */
    /* margin-top: 0.5em; */
    /* margin-bottom: 0.5em; */
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* border-style: inset; */
	/* border-top: 1px solid yellow; */
	/* height: 20px; */
/* } */


/*	========================================
	RADIO BUTTON
	======================================== */
/* The container */
.container {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 120%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	/* display: block;  ... wenn die Radiobuttons untereinder stehen sollen */
}

/* Hide the browser's default radio button */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a indigo background */
.container input:checked ~ .checkmark {
    background-color: indigo;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
 	top: 6px;
	left: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

/*	========================================
	SELECT (AUSWAHLLISTE)
	======================================== */
/*the container must be positioned relative:*/
.custom-select {
	position: relative;
	font-family: Helvetica, Arial, Verdana, sans-serif;
}
.custom-select select {
	display: none; /*hide original SELECT element:*/
}
.select-selected {
	background-color: indigo;
}
/*style the arrow inside the select element:*/
.select-selected:after {
	position: absolute;
	content: "";
	top: 14px;
	right: 10px;
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-color: #fff transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
	border-color: transparent transparent #fff transparent;
	top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
	color: #ffffff;
	padding: 8px 16px;
	border: 1px solid transparent;
	border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
	cursor: pointer;
	user-select: none;
}
/*style items (options):*/
.select-items {
	position: absolute;
	background-color: indigo;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
	display: none;
}
.select-items div:hover, .same-as-selected {
	background-color: rgba(0, 0, 0, 0.1);
}

.imgAnsicht {
	border: 3px solid lightgrey;
    max-width: 100%;
    height: auto;
	background-color: white;
}


/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_scroll_to_top */
#myTopBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: indigo;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myTopBtn:hover {
	background-color: orange;
	color: black;
}

/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_block_buttons */
.btnBlock {
  display: block;
  width: 80%;
  border: none;
  background-color: #555555;
  color: white;
  padding: 14px 28px;
  font-size: 150%;
  font-weight: normal;
  cursor: pointer;
  text-align: center;
}

.btnBlock:hover {
	background-color: darkorange; 	/* NavajoWhite */
	color: black; 
}

.btnBild {
	/* border: 5px solid indigo; */
	max-width: 80%;
	height: auto;
}

/* äöü */