body{
text-align:center;
background:#fefefe; 
}

/*Verhindern, dass die Elemente für Interaktion in jedem Browser anders angezeigt werden*/
textarea,
input[type="text"],
input[type="button"],
input[type="checkbox"],
input[type="submit"] {
-webkit-appearance: none;
appearance: none;
border-radius:0;
margin:0px;
}

input,select{
font-size:0.9em;
height:32px;
width:100%;
box-sizing: border-box;
border:none;
border:1px solid #aaa;
border-radius:0px !important;
background-color:#fefefe;
color:#333;
font-weight:normal;
}

/*eigene Checkbox gestalten*/
select:hover{cursor:pointer;}
input[type=checkbox]{
height:24px;width:24px;
border:none;border:1px solid #aaa;
padding:3px;
place-content: center;
}
/*das wird das Quadrat in der Checkbox*/
input[type=checkbox]::before{
content: "";
display:inline-block;
box-sizing:border-box;
width: 16px;
height: 16px;
transform: scale(0);
transition: 120ms transform ease-in-out;
transform-origin: middle center;
box-shadow: inset 16px 0px #aaa;
}
/*Quadrat anzeigen, wenn gecheckt*/
input[type=checkbox]:checked::before{
  transform: scale(1);
}

input[type=submit],input[type=checkbox]{cursor:pointer;}
textarea{border:none;border:1px solid #aaa;}

/*Speichernschaltfläche bei Eintragen eines Schülers -> Zustand disabled darstellen*/
#speichern:disabled,input[type="submit"]:disabled, input[type=checkbox]:disabled{
cursor:default;
color:#aaa;
}


a{color:#03406A;}
hr{border-top: 1px solid #aaa;border-bottom:none}



.tabelle{table-layout:fixed;border-collapse:collapse;background:#fefefe;width:80%;margin:30px 10%;border:1px solid #aaa;padding:0px;text-align:center}
.tabelle th{background-color:rgba(180,180,180,0.3);font-size:0.9em;font-weight:normal;padding:5px}
.tabelle th.breit,.tabelle.td.breit{width:20%}
.tabelle.checked th.breit{width:13%}
.tabelle tr:nth-child(2n+2){background-color:rgba(180,180,180,0.1);}
.tabelle td{border:1px solid #aaa;padding:6px 3px;border-radius:0px;}
.checked td,.checked th{font-size:0.8em;}
.tabelle td img{cursor:pointer;margin:0px 10px;}
.sortieren{background-image:url('sort.png');background-repeat:no-repeat;background-position:right 2px bottom;cursor:pointer;}
.tdrechts{text-align:right;padding: 5px 20px;}
.tdlinks{text-align:left;}
.tdschmal{width:160px}

#bemerkung,#thema{width:240px;}
#bemerkung.bemklein{width:190px;}
#titel{font-size:1.2em;font-weight:bold;border-bottom:1px solid #666;margin-bottom:12px}
#termin{width:100%;border-radius:0px}

.anmeldung,.anmeldungmitte{text-align:right;margin: 20px 10px 30px;}
.anmeldung{font-size:0.8em;width:80%;margin-left:10%;}
.anmeldungmitte{text-align:center;}
.abstand{width:80%;margin-left:10%}

.rahmendiv{background:#fefefe;text-align:center;border:1px solid #aaa;padding:20px 0px;border-radius:0px;}
.platzoben{margin-top:50px;}
.platzunten{margin-bottom:50px;}
.buttons{border-top:1px solid #aaa;padding: 20px 0px 0px 0px;margin-top:20px}
.buttons input{margin: 0px 10px;}
.inputabstand{margin:0 10px;}
.bemerkung{text-align:left;font-size:0.8em;color:#777;padding-left:20px;}
.top{vertical-align:top}

/*Alerts/Dialoge*/
.blende{
position:absolute;
z-index:1;
display:none;
top:0px;
bottom:0px;
left:0px;
right:0px;
width:100%;
height:100%;
background-color:rgba(230,230,230,0.15);
}

.blendediv{
position:relative;
z-index:2;
background-color:#fefefe;
border: 2px solid #aaa;
border-radius:0px;
padding:10px;
box-shadow:0px 0px 20px -1px rgba(50,50,50,0.75);
}

#downbtns{
top:0px;
left:0px;
width:200px;
}  

#downbtns img{
margin:0px 8px;
cursor:pointer;
}  

#downbtns img:hover{
background-color:rgba(180,180,180,0.3);
box-shadow:0px 0px 5px 3px rgba(50,50,50,0.3);
}

#auswahl,#alert,#loealert{
top:50%;
width:70%;
min-width:400px;
max-width:700px;
margin-top:-220px;
margin-left:auto;
margin-right:auto
}
#alert,#loealert{
margin-top:-200px;
}

.auswahl div{
text-align:center;
padding:7px;
cursor:pointer;
border:1px solid #aaa;
border-radius:0px;
background-color:#efefef;
}

.auswahl div a{
display:block;
width:100%;
}

.sftab{
table-layout:fixed;
width:60%;
margin:20px 20%;
}
.sftab td{
padding:0px 20px;
}

#version{
text-align:left;
font-size:10px;
color:#dedede;
}
#version span{color:#fefefe}

#inhalte{
position:relative;
padding-right:5%;
max-height:500px;
overflow:auto;
}

#vorgaben{
padding:0px;
max-height:498px;
}

#vorgaben div{
width:100%;
height:100%;
overflow-y:auto;
}

#tabVorgaben{
table-layout:fixed;
width:100%;
border:none;
opacity:0;
border-collapse:collapse;
transition: opacity 0.2s linear;
}

#tabVorgaben td{
height:28px;
width:100%;
text-align:center;
border-bottom:1px solid #aaa;
cursor:pointer;
}

#tabVorgaben tr:nth-child(2n+2) {
background-color:rgba(180,180,180,0.1);
}

#tabVorgaben td:hover{
background-color:rgba(180,180,180,0.3);
box-shadow:0px 0px 1px 1px rgba(50,50,50,0.1);
}
 
/*Buttons zum Filtern der Namen*/
#buttons{
position:absolute;
top:0px;
right:27%;
width:88px;
opacity:0;
transition: opacity 0.2s linear;
}

#buttons div{
margin:0px 10% 5px 10%;
padding:5px 0;
border:1px solid #aaa;
text-align:center;
width:80%;
cursor:pointer;
} 

#buttons div:hover{
background-color:rgba(180,180,180,0.3);
box-shadow:0px 0px 1px 1px rgba(50,50,50,0.1);
}

#buttons div.aktmenpkt{
background-color:rgba(180,180,180,0.3);
}

/*Anpassungen bei kleinen Bildschirmen*/
@media only screen and (max-width:950px) {
#bemerkung.bemklein{width:97%}
}
@media only screen and (max-width: 870px) {
.anmeldung,.abstand,.tabelle{width:94%;margin-left:3%}
#bemerkung{width:186px}
#inhalte{padding-right:0px}
#buttons{right:22%}
}

/*Abstände links-rechts bei Ausgabe Newspoint klein*/
.np_abstand{width:100%;margin:3px 0px;}

#divalles{
    opacity:1;
    transition: opacity 0.4s linear;
}