* {
	font-family			: Sans-Serif, Sansserif, Arial, Tahoma, verdana;
	font-size			: 1rem;
	padding				: 0;
	margin				: 0;
	box-sizing			: border-box;
	cursor				: inherit;
	border-spacing		: 0;
}

b,
p,
ul,
li {
	font-size			: .8rem;
}



.left {
	text-align			: left;
}

body {
	width				: 100%;
	margin				: 0 auto;
	background			: #ffffff;
	/*overflow-y			: hidden;*/
}

h5 + div p {
	margin				: 1rem;
	font-weight			: bold;
	
}

form#navi {
}

#main {
	width				: 100%;
	display				: block;
	text-align			: center;
	padding				: 7.5rem 0 0 0;
	margin				: 0;
	background-color	: rgba(255, 255, 255, 1);
}

#header {
	position			: fixed;
	z-index				: 100;
	height				: 6rem;
	display				: flex;
	width				: calc(100%);
	left				: 0;
	top 				: 0;	
	background			: linear-gradient(0deg, #00408A, #3D69EC);
	box-shadow			: 0 2px 2px rgba(0, 0, 0, .25);
	color				: #FFF;
}

#footer {
	position			: fixed;
	bottom				: 0;
	display				: flex;
	flex-direction		: row;
	align-items			: bottom;
	justify-content		: space-between;
	width				: 100%;
	max-width			: calc(100%);
	margin-bottom		: 10.25rem;
}

#footer p,
p.stats {
	text-align			: center;
	text-shadow			: 1.5px 1.5px 1.5px #EEE;
	font-size			: .75rem;
	color				: #003f8a;
	font-weight			: bold;
	margin				: .125rem auto;
}

#footer p{
	width				: 100%;
	text-align			: right;
	padding-left		: 1rem;
	padding-right		: 1rem;
}

img.ps_logo {
	height				: auto;
	width				: calc(100% - 1.75rem);
	filter				: drop-shadow(0px 2px 2px #AAA);
}

#logo {
	padding-left		: 2rem;
	display				: table-cell;
	vertical-align		: middle;
	text-align			: center;
}

#logo p {
	font-size			: 40px;
	margin				: 10px 20px;
	font-weight			: 800;
	font-family			: arial;
	color				: #FCD205;
	filter				: drop-shadow(0px 2.5px 5px #000);
}

#title {
	height				: 80px;
	width				: calc(100% - 40px);
	filter				: drop-shadow(0px 2.5px 5px #000);
	color				: #FCD205;
}

#wrapper
{
	display				: flex;
	width				: 100%;
}

#content {
	z-index				: 5;
	width				: calc(100% - 26rem);
	max-height			: calc(100vh - 9.5em);
	display				: block;
	text-align			: center;
	margin				: 1.5rem 0 .25rem 13rem;
	overflow-y			: auto;
	overflow-x			: hidden;
	scrollbar-color		:  #3D69EC #003F8A;
	scrollbar-width		: auto;
	scroll-margin-left	: 1rem;
	background			: radial-gradient(circle at 0% -200%, rgba(0,0,0,.05) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,.09) 100%);
}

#content > div {
	padding				: 0;
}

#menu {
	z-index				: 100;
	position			: fixed;
	left				: 0;
	min-height			: calc(100vh - 6rem);
	width				: 20%;
	max-width			: 12.5rem;
	border				: 0px solid #f00;
	top					: 6rem;
	background			: linear-gradient(120deg, #003f8a, #FFF, #FFF, #FFF);
}

#menu form {
	max-width			: 100%;
	width				: 100%;
	padding				: 0;
	margin				: .5rem 0 0 0;	
	border				: none;
	box-shadow			: none;
	text-align			: left;
}

#menu button {
	height				: 2.5rem;
	width				: calc(100% - 1rem);
	margin				: 0 0 .5rem 0;
	text-align			: right;
	border-radius		: 0 .5rem .5rem 0 ;
	background			: radial-gradient(farthest-side at +125% -25%, #FFF, #003f8a, #003f8a);
}

h1, h2, h3, h4, h5, h6, h7 {
	text-align			: center;
	width				: 100%;
	font-weight			: 700;
}


h1 {
	font-size			: 1.75rem;
}

h2 {
	font-size			: 1.5rem;
	margin				: .5rem auto 0 auto;
}

h3 {
	width				: 50%;
	font-size			: .75rem;
	margin				: .125rem auto;
	padding-top			: .25rem;
	border-top			: 2px solid #FFF;
}

h5::before{
/*	content				: '- ';*/
}
h5::after{
/*	content				: ' -';*/
}

h5 {
	height				: 2.5rem;
	text-align			: left;
	z-index				: 1000;
	display				: block;
	position			: fixed;
	top					: 6.5rem;
/*	display				: none;*/
	width				: calc(100% - 26rem); 
	font-size			: 1rem;
	font-weight			: 700;
	margin-left			: 0;
	padding				: .5rem;
	padding-left		: 1rem;
	letter-spacing		: .05rem;
	border-radius		: .5rem 0 0 0rem;
	border				: 2px solid #003f8a;
	background			: radial-gradient(farthest-side at -25% -25%, #FFF, #003f8a, #003f8a);
	color				: #FCD205;
/*	box-shadow			: 2px 2px 2px #CCC;*/
	
	
}

h6 {
	text-align			: left;
	font-size			: 1rem;
	color				: #003f8a;
	margin				: .5rem 0rem 0rem;
	text-transform		: UPPERCASE;
}

h7 {
	color				: #FCD205;
	display				: block;
	font-size			: .9rem;
	font-weight			: bold;
	text-align			: left;
	margin				: .5rem 0 .5rem;
	text-decoration		: none;
}

button, 
input, 
select,
fieldset {
	border				: 1px solid #BBB;
	letter-spacing		: .075rem;
	background-color	: rgba(0,0,0,0.01);
	font-size			: .9rem;
	padding				: .5rem;
	font-weight			: 600;
	margin				: 0rem;
	color				: #000;
	width				: 95%;
	border-radius		: .5rem;
	text-align			: center;
}

input {
	margin-bottom		: 0rem;
}

input[type=checkbox] {
	width				: 2rem;
	margin-top			: .125rem;
	margin-bottom		: .125rem;
}

input[type=checkbox][disabled] {
}


input[type=date],
input[type=email],
input[type=password],
input[type=text],
form label
{
	max-width				: 95%;
	margin-left				: auto;
	margin-right			: auto;
}

input[type=file]
{
}

input[type=file].button
{
	padding 			: 1rem;
}

button {
	color				: #FFF;
	text-transform		: uppercase;
	font-size			: .75rem;
	#text-shadow		: 1px 1px 2px #AAA;
	background-color	: #003f8a;
	/*box-shadow			: .125rem .125rem .25rem rgba(0, 0, 0, .15);	*/
	box-shadow			: 2px 2px 2px rgba(0, 0, 0, .25);
	border				: 2px solid #003f8a;
	background			: radial-gradient(farthest-side at 90% -25%, #FFF, #003f8a, #003f8a);
	transition			: border-color .25s, box-shadow .25s, background-color .25s;
}

button:hover {
	color				: #FCD205;
	box-shadow			: 2px 2px 2px rgba(0, 0, 0, .5);
	/*border				: 2px solid #0B60BF;*/
	transition			: color .25s, box-shadow .25s;
}

/* FORMULARE */

form {
	width				: 100%;
	margin				: 0 auto;
	padding				: 0;
}

form h6 {
	max-width			: 60rem;
	text-align			: left;
	margin				: 1.5rem auto 0 auto;
	font-size			: 1.25rem;
	border-bottom		: 2px solid #003f8a;
}

hr {
	margin				: 0;
	padding				: 0;
	color				: #FEFEFE;
	border-color		: #FEFEFE;
}

form > label {
	margin-top			: .5rem;
}

fieldset {
	max-width			: 30rem;
	margin				: 0 auto;
	display				: flex;
	flex-direction		: column;
	text-align			: left;	
	text-align			: left;	
}

form > fieldset > input[type=checkbox] {
	padding				: 0;
	margin				: 0;

}

form#navi nobr
{
	font-size			: .8rem;
	bottom				: 0;

}

form#navi {
	border				: none;
	position			: fixed;
	width				: calc(100% - 27rem);
	bottom				: .5rem;
	padding				: 0;
	margin				: 0;
}

button[disabled],
button[disabled].table:hover
{
	border				: 1px solid #DDD;
	background			: #FFF;
	box-shadow			: 2px 2px 2px rgba(0, 0, 0, .5);
	color				: #CCC;
}

label {
	display				: block;
	text-align			: left;
	margin				: 1rem 0 0 .25rem;
	font-weight			: 700;
	letter-spacing		: .1rem;
	font-size			: .75rem;
	color				: #AAA;
}

h6,
div.form_part{
	max-width			: 60rem;
	margin				: 0 auto;
}

#form_login form {
}

#form_login.login,
#form_login.logout {
/*	margin-bottom 		: 1.5rem;*/
}

p.klasse {
	text-align			: center;
}

/* TABELLEN */

table {
	width				: 100%;
/*	border				: 1px solid #f00;*/
	margin				: 0 auto;
	/*box-shadow			: 0 2px 2px rgba(0, 0, 0, .5);*/
	background-color	: none; /*#003f8a;*/
	padding-bottom		: 2.20rem;
}

table p {
	font-size			: .9rem;
	font-weight			: 500;
}

/* TABELLEN-KOPF */

thead {
	background			: #003f8a;
}

thead th {
	min-height			: 3rem;
	padding-top			: 1rem;
	padding-left		: .5rem;
	padding-bottom		: .5rem;
	vertical-align		: bottom;
}

thead p {
	font-weight			: 700;
	font-size			: .75rem;
	color				: #FFF;
	text-transform		: uppercase;
	letter-spacing		: .125rem;
}

thead th.klassen,
thead th.lehrer,
thead th.schueler {
	vertical-align			: middle;
	text-align				: right;
/*	border-bottom			: 1px solid #DDD;*/
}

thead th.logoip {
	/*border-left				: 1px solid #DDD;*/
}

/* TABELLEN-KÖRPER */

thead {
}

tbody {
	overflow-y			: scroll;
	overflow-x			: hidden;
	/*height				: calc(100vh - 12.5rem);*/
	max-height			: calc(100vh - 12.5rem);
}

tbody p.stats,
tbody p.lip {
	font-size			: .8rem;
	font-weight			: 700;
}

tbody p.name,
tbody p.pitko {
	font-weight			: 600;
	text-align			: left;
}

tbody p.adresse,
tbody p.beschreibung {
	color				: #999;
	font-weight			: 500;
	font-size			: .75rem;
}

tbody td p.adresse,
tbody td p.name  {
	text-align			: left;
}

tbody td.klassen,
tbody td.lehrer,
tbody td.schueler,
tbody td.logoip {
	padding				: .75rem;
	border-left			: 1px solid #DDD;
}

tbody td.schueler {
	vertical-align		: top;
	padding-top			: 6.25rem;
}

tbody td.klassen,
tbody td.lehrer {
	vertical-align		: top;
}

tbody td.logoip {
	vertical-align		: top;
	margin				: 0;
	padding				: 0.125rem;
}

tbody td.logoip > div {
	display				: flex;
	flex-wrap			: wrap;
}

tbody td.logoip > div > div {
	width				: 50%;	
}

tbody > tr > td > p {
	font-weight			: bold;
}

tbody td.logoip p,
tbody td.logoip ul {
	width				: 100%;
	text-align			: left;
	margin	 			: .25rem;
}

tbody td.logoip ul,
tbody td.logoip ul li {
	display				: flex;
	flex-direction		: row;
}

tbody p.left {
	text-align			: left;
}

tbody p.center {
	text-align			: center;
}

tbody p.right {
	text-align			: right;
}

table tbody tr:hover{
	background			: #FFF;
}

table tbody td {
	border-bottom		: 1px solid #555;
	padding				: .25rem;
	margin				: 0;
}

tbody b,
tbody p,
tbody ul,
tbody li,
tbody li input[type=checkbox]{
	font-size			: .75rem;
}

table td.bottom {
	padding				: 1em 0;
	border-radius		: 0 0 .5rem .5rem;
	border-bottom		: 5px solid #003f8a;
}

table td,
table td div div {
	margin				: .125em .25em;
}

table td.menu1 {
	width				: 4rem;
}

table td.rotate {
	transform			: rotate(0deg);
	vertical-align		: bottom;
	text-align			: right;
}

table td.menu2 {
	width				: 8rem;
}

table td.menu3 {
	width				: 12rem;
}

table td.menu4 {
	width				: 16rem;
}

table td.menu5 {
	width				: 15rem;
}


#school_list form > form {
	box-shadow			: 0;
}

input.err {
	background-color	: #FCC;
	border				: 1px solid #A00;
	color				: #A00;
	font-weight			: 700;
}

p.err {
	color				: #A00;
	font-weight			: 700;
	width				: 20rem;
	margin				: 8rem auto 0 auto;
	padding				: 1rem;
	background-color	: #FCC;
	border				: 1px solid #A00;
	font-size			: .8rem;
}

input.res {
	background-color	: #CFC;
	border				: 1px solid #0A0;
	color				: #0A0;
	font-weight			: 700;
}


p.res {
	opacity				: 0;
	height				: 2.5rem;
	z-index				: 10001;
	position			: absolute;
	cursor				: none;
	display				: block;
	top					: 6.5rem;
	right				: 13rem;
	width				: 20rem;
	margin				: 0 auto;
	padding				: .75rem;
	background-color	: #CFC;
	border				: 1px solid #0A0;
	color				: #0A0;
	font-weight			: 700;
	font-size			: .8rem;
}

@keyframes fadeOut {
    from { opacity: 1;}
    to { opacity: 0;}
}

.fadeOut {
	animation			: fadeOut 5s ease-in;
}

.hidden {
	display				: none;
}

.upper {
	text-transform		: uppercase;
}


div#debug {
	z-index				: 10000;
	width				: 300px;
	height				: auto;
	position			: fixed;
	bottom				: 5rem;
	right				: 2rem;
	background-color	: rgba(255, 255, 255, 0.9);
	box-shadow			: 2px 2px 2px rgba(0, 0, 0, .5);
	border				: 1px solid #0F0;
	color				: #090;
	font-size			: .75rem;
	visibility			: 1;
	transition			: visibility 2s;
}



div#debug p {
	font-weight			: 600;
}
div#debug pre {
	color				: #090;
}

.material-symbols-outlined {
	color				: #FFF;
}

button[disabled] span.material-symbols-outlined{
	color				: #CCC;
	background			: none;
}

.bigger
{
	font-weight			: 600;
	font-size			: 2rem;
}

p.last_change {
	position			: fixed;
	bottom				: .5rem;
	left				: .5rem;
	font-size			: .75rem;
	color				: #999;
}

div.horizontal {
	width				: 100%;
	display				: flex;
	bottom				: 0rem;
	/*position			: fixed;*/
	justify-content		: space-between;
	text-align			: center;
	margin				: 0;
}

button {
	margin-top			: 1.5rem;
}

div.horizontal button {
	width				: 100%;
	border-radius		: 0;
	text-align			: center;
}

div.horizontal button.left {
	border-radius		: .5rem 0 0 .5rem;
	text-align			: center;
	padding-left		: 1rem;
	background			: radial-gradient(farthest-side at -25% 125%, #FFF, #003f8a, #003f8a);
}

div.horizontal button.center {
	border-radius 		: 0;
	text-align			: center;
	background			: none;
	background-color	: #003f8a;
}

div.horizontal button.right {
	border-radius		: 0 0rem 0rem 0;
	padding-right		: 1rem;
	text-align			: center;
}

div.horizontal button.alone {
	background			: radial-gradient(farthest-side at -25% 125%, #FFF, #003f8a, #003f8a);
	border-radius		: 0 0 .5rem .5rem;
	box-shadow			: none;
}

table + form div.horizontal button {
	padding				: .5rem;
	border-radius 		: 0 0 0 .5rem;
	box-shadow			: none;
	margin				: 0;
}

table + form div.horizontal button.left {
	border-radius 		: 0 0 0 .5rem;
}

table + form div.horizontal button.center {
	border-radius 		: 0;
}

table + form div.horizontal button.right {
	border-radius 		: 0 0 .5rem 0;
}

td.spacer {
	width 				: *;
}

td.school {
	vertical-align		: top;
}

td.school > div {
	display				: flex;
	flex-direction		: row;
	justify-content		: space-between;
	margin				: .5rem 0;
	width				: 100%;
}

td.school > div > div {
	/*border				: 1px solid #f00;*/
}

td.school div.symbol button {
	margin				: .125rem;
}


#firefox {
	z-index 			: 1000;
	position			: fixed;
	bottom				: 1.5rem;
	left				: .4rem;
	font-size			: .75rem;
	color				: #999;
	text-align			: left;

}

#firefox a {
	font-size			: .9rem;
	text-decoration		: none;
}

#firefox img {
	max-height			: 20px;
	width				: auto;
}

/* Listen */
ul {
	list-style			: none;
}


#infobox
{
	z-index				: 1000;
	display				: block;
	position			: fixed;
	right				: 0;
	top					: 6rem;
	padding				: .25rem 1rem;
	width				: 12.5rem;
	height				: calc(100% - 5rem);
	border				: none; /*px solid #f00;*/
	border-radius		: 0;
	background			: linear-gradient(160deg, #00408A, #00408A, #00408A, #00408A, #FFF, #FFF);
/*	box-shadow			: 2px 2px 2px rgba(0, 0, 0, .25);*/
	color				: #fff;
}

#infobox h7 {
	margin				: .5rem 0;
}

#infobox p {
	margin				: 1rem 0;
}

#infobox .material-symbols-outlined,
button.table {
	width				: 2.5rem;
	height				: 2.5rem;
	margin				: .125rem;
	padding				: .125rem;
	border-radius		: .5rem;
}



#infobox h6 {
	color				: #FFF;
	margin-top			: .5rem;
}

#infobox h7 {
	
}

#infobox p {
	font-size			: .80rem;
	text-align			: left;
	color				: #FFF;
	text-decoration		: none;
	font-weight			: 600;
}

#infobox .material-symbols-outlined {
	height				: 2rem;
	width				: 2rem;
	box-shadow			: 2px 2px 2px rgba(0, 0, 0, .25);
	border				: 2px solid #FFF/*#003f8a*/;
	text-align			: center;
	vertical-align		: middle;
}