.pi {
    margin: 0;
    padding: 0;
}
html,body {
	height: 100%;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: #ccc;
  }
}


#seite {
    position: relative;
    min-height: 100%;
    width: 80%;
    margin: 0 auto;
	background-color: #cccccc;
	font-family: Arial; 
	font-size: medium;
}
#oben {
	background-color: #8C3590;
	color: #FFFFFF;
	padding-bottom: 2em;
	height: 10%;
	padding: 2em;
}
#mitte {
	color: #8C3590;
/*	color: #2C4982;*/
	min-height: 80%;
	height: 80%;
    margin: 0 auto;
	padding: 2em;
	overflow-y: scroll;
}
#orange {
	color: #8C3590;
/*	color: #2C4982;*/
	background-color: #FBB44A;
	position: relative;
    bottom: 0;
	padding: 1em;
	text-align: center;
}
#unten {
    position:absolute;
    bottom: 0;
    width: 100%;
	background-color: #ffffff;
	color: #8C3590;
	height: 10%;
}
h1.pi { color: #FBB44A; text-align: center;}
h2.pi { color: #FFFFFF; text-align: center;}
h3.pi { color: #2C4982; text-align: right;}
h1.warn { color: #DC143C; text-align: center;}

a.pi:link 	{ color: #8C3590 }
a.pi:visited { color: #8C3590;  }
a.pi:hover   { background-color: #FBB44A; color: #ffffff; border: solid 1px #ffffff}
a.pi:focus	{ color: #ffffff; }
a.pi:active  { background-color: #16C649; color: #ffffff;}



/*
#8C3590 lila
#2C4982 blue
#16C649 green
#FBB44A orange
*/

body.be {
  background-color: #FFFFFF;
  color: #000000;
  font-family: Arial; 
  font-size: large;
  margin: 3em;
}

body.dp {
  background-color: #8C3590;
  color: #FFFFFF;
  font-family: Arial; 
  font-size: large;
  margin: 3em;
}

a.dp:h1 { color: #FBB44A }
a.dp:link { color: #FFFFFF }
a.dp:visited { color: #FFFFFF; }
a.dp:hover   { background-color: #FBB44A; }
a.dp:focus	  { color: #FFFFFF; }
a.dp:active  { background-color: #16C649; }

pre {
     color: black;
	 font-size: x-large; 
	 
}

table.pi {
	color: #2C4982;
	border-collapse: collapse;
	border: 1px solid #16C649;
	padding: 1em;
	font-size: x-large;
}
 
th {
	text-align: right; 
	padding: 1em;
}

td {
	padding: 1em;
}
 
ul.pi { 
	/*color: #8C3590; */
	color: #2C4982;*/
	margin-left: 0%; 
/*	list-style-image: url(/pi.png); */
	list-style: none;
	padding: 1em;
}	
li.pi {
	margin: 2em;
	font-size: x-large; 
	background: url(/pi.png) left center no-repeat;
	padding-left: 2em;
}
.container {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: x-large; 
	margin: 0.5em;
}

.container2 {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: small; 
	margin: 0.5em;
}

.form {
	font-size: x-large; 

}
.ok {
	color: #ffffff;
	background-color: #16C649;
}

.notok {
	color: #ff2a2a;
}

		
#box-shadow {
    box-shadow: 0 0 0 1px #8C3590;
	border: 8px solid transparent;
	border-radius: 50%;
	appearance: none;
	-webkit-appearance: none;	
}

#box-shadow:hover {
    box-shadow: 0 0 0 3px #FBB44A;
    
}

#box-shadow:checked {
    box-shadow: 0 0 0 3px #FFFFFF;
	border: 8px solid #FBB44A;
	border-radius: 50%;
	appearance: none;
	-webkit-appearance: none;
}

#submit {
	font-size: x-large;
	background-color: #FBB44A;
	border-color: #ffffff;
	border-width: 3px;
	color: 2C4982;
}
#submit:hover {
	background-color: #FBB44A;
	color: #ffffff;
}
#submit:active {
	background-color: #16C649;
	color: #ffffff;
}


.tooltip {
  position: relative;
  display: inline-block;
  /* border-bottom: 1px dotted #16C649; */
  font-size: medium;
  background-color: #16C649;
  color: #FFFFFF;
  border-radius: 12px;
  padding: 4px 8px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 314px;
  background-color: #FBB44A;
  color: #8C3590;
  text-align: left;
  border-radius: 12px;
  padding: 0px 8px;
  left: -314px;
  top: 24px;
  opacity: 88%;
  font-size: large;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  background-color: #FBB44A;
}

.tooltip:hover {
  
  background-color: #FBB44A;
}