html, body {
  background: url('background.svg') no-repeat;
  background-size: cover;
  background-color: black;
  height: 100%;
  width: 100%;
  top: 0px;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
   scroll-behavior: smooth;
}

*{
	font-family: Helvetica, sans-serif; 
	color: #ededf0;
	scrollbar-width: thin;
	scrollbar-color: #005825 black;	
}

.sucheDiv{
	height: 3em;
	width: 100%;
}

#fileName, #myFile{
	width: 80%;
	margin-top: 2%;
	float: left;
	color: black;
}

.status{
	width: 20%;
	float: left;
	margin-top: 2%;
}

.statusUpdate {
	width: 60%;
	margin-left: 20%;
	margin-top: 2%;
	float: left;
}

#myFile {
	color: white;
}
.iFrameDivAll {
  width: 96%;
  margin-left: 2%;
  margin-top: 4%;
  float: left;
  overflow-x: hidden;
  overflow-y: hidden;
  border: 0.5px solid black;
  margin-bottom: 10%;
}

.logR {
	margin-top: 2%;
	width: 98%;
	font-size: 1.2rem;
	margin-bottom: 2%;
}

iframe {
	width: 96%;
	height: 90%;
	margin-left: 2%;
}
.loadR {
	background-color: black;
	color: white;
	margin-left: 4%;
	width: 30%;
	border: none;
	border-radius: 8px;
	height: 2em;
	transition-duration: 0.3s;
}
.rootR {
	width: 60%;
	float: left;
}
.checkboxR {
	width: 10%;
	float: left;
	margin-top: 2%;
}

.backR, .upDownload {
	width: 98%;
	font-size: 1.2rem;
	margin-bottom: 2%;
}

.upR, .downR, .saveR {
	float: left;
	width: 25%;
	margin-left: 3%;
	height: auto;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.upR::after {
  content: "";
  clear: both;
  display: table;
}
.downR::after {
  content: "";
  clear: both;
  display: table;
}
.saveR::after {
  content: "";
  clear: both;
  display: table;
}

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

.verzeichnisDiv{
	width: 12%;
	float: left;
}

.pwdSave {
	background-color: black;
	color: white;
	border: none;
	border-radius: 4px;
	margin-top: 2%;
	margin-bottom: 4%;
	height: 2rem;
	margin-left: 4%;
	width: 2rem;
	transition-duration: 0.3s;
}

.btnRoot {
	background-color: black;
	color: white;
	width: 100%;
	height: 2.5em;
	border: none;
	border-radius: 8px;
	margin-top: 2%;
	transition-duration: 0.3s;
}

.btnRoot:hover{
	background-color: darkslategray;
	transition-duration: 0.3s;
}

.loadR:hover {
	background-color: darkslategray;
	transition-duration: 0.3s;
}

.pwdSave:hover {
	background-color: darkslategray;
	transition-duration: 0.3s;
}

.rootSub {
	color: black;
}

.datenSchutzDiv{
	background-color: rgba(20, 20, 20, 0.5);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	-moz-backdrop-filter: blur(8px);
	border-radius: 15px;
	margin-left:4%;
	margin-right: 4%;
	margin-bottom: 2%;
	border-top: 1px solid rgba(255, 255, 255, 0.5);
	border-left: 1px solid rgba(255, 255, 255, 0.5);
	-moz-box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
	-webkit-box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
	box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
}

#blur {
	-moz-box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
	-webkit-box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
	box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
	background-color: rgba(100, 100, 100, 0.2);
	border-top: 1px solid rgba(255, 255, 255, 0.5);
	border-left: 1px solid rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	-moz-backdrop-filter: blur(8px);
}

#blur2{
	-moz-box-shadow: 20px 20px 50px rgba(0,0,0,0.5); 
	-webkit-box-shadow: 20px 20px 50px rgba(0,0,0,0.5); 
	box-shadow: 20px 20px 50px rgba(0,0,0,0.5); 
	background-color: rgba(100, 100, 100, 0.2);
	border-top: 1px solid rgba(255, 255, 255, 0.5);
	border-left: 1px solid rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	-moz-backdrop-filter: blur(8px);
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
	width: 100%;
	height: 4em;
	text-align: center;
	margin-bottom: 2%;
}

.footer{
	padding-top: 2%;
	-moz-box-shadow: 20px 20px 50px rgba(0,0,0,0.5); 
	-webkit-box-shadow: 20px 20px 50px rgba(0,0,0,0.5); 
	box-shadow: 20px 20px 50px rgba(0,0,0,0.5); 
	background-color: rgba(100, 100, 100, 0.2);
	border-top: 1px solid rgba(255, 255, 255, 0.5);
	border-left: 1px solid rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	-moz-backdrop-filter: blur(8px);
	border-top-right-radius: 15px;
	border-top-left-radius: 15px;
	width: 100%;
	height: 5rem;
	text-align: center;
	margin-top: 2%;
}

.ditLabel{
	color: gray;
	transition-duration: 200ms;
	cursor: pointer;
	font-size: 1.1rem;
}

.ditLabel:hover{
	color: white;
	transition-duration: 200ms;
}

.navBarText{
	font-size: 1.8rem;
	font-family: Courier New, monospace; 
	text-align: center;
}

.tickets{
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	width: 98%;
	margin-left: 1%;
	margin-bottom: 5px;
}

.betreffLabel, .problemLabel{
	width: 98%;
	margin-left: 1%;
	margin-top: 2%;
	margin-bottom: 1%;
	font-size: 1.1rem;
	font-weight: bold;
	text-align: center;
}

.textareaProblem, .textareaBetreff{
	height: 6rem;
	background-color: white;
	color: black;
	width: 94%;
	margin: 0px;
	margin-left: 1%;
	margin-bottom: 2%;
	padding-left: 2%;
	padding-right: 2%;
	padding-top: 0%;
	padding-bottom: 0%;
	border-radius: 10px;
	border: none;
	float: left;
	font-size: 1.1rem;
}

table, tr{
	width: 100%;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-collapse: collapse;
	border-spacing: 0 10px; 
	-webkit-transition: 200ms linear;
    transition: 200ms linear;
	transition-duration: 0.6s;
}

table{
  display:block;
}

tr{
	display: table;
	table-layout: fixed;
	width:100%;
	appearance: none;
	transition: 300ms;
	box-shadow: 1px 1px 2px black;
	-moz-box-shadow: 1px 1px 2px black;
	-webkit-box-shadow: 1px 1px 2px black;
	background-color: rgba(0, 0, 0, 0);
}

table {
	margin-bottom: 2%;
}

.inBeaButton{
	color: black;
	margin-right: 8%;
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 20%;
	border: none;
	transition-duration: 300ms;
	text-align:center;
}

option{
	background: black;
	color: white;
}

td{
	padding-top: 2rem;
	padding-bottom: 2rem;
	text-align: center;
}

.saveButton{
	transition-duration: 300ms;
	background-color: rgba(20, 40, 20, 0.5);
	color: white;
	border: none;
	width: 49%;
	margin-left: 1%;
	height: 5rem;
	float: left;
	text-align: center;
	border-radius: 0px;
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
	margin-bottom: 1%;
	margin-top: 1%;
}
.saveButton:hover{
	transition-duration: 300ms;
	background-color: rgba(20, 40, 20, 1);
}

.chancelButton{
	margin-top: 1%;
	margin-bottom: 1%;
	transition-duration: 300ms;
	background-color: rgba(40, 20, 20, 0.5);
	color: black;
	width: 49%;
	height: 5rem;;
	border:none;
	border-radius: 0px;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	float: left;
	text-align: center;
}

.chancelButton:hover{
	transition-duration: 300ms;
	background-color: rgba(40, 20, 20, 1);
}
.saveIMG{
	max-height: 70%;
	width: 55%;
	height: 60%;
	border: none;
}

.chancelIMG{
	max-height: 70%;
	width: 55%;
	height: 60%;
}

.kontakt{
	word-break: break-word;
	transition-duration: 300ms;
	cursor: pointer;
	width: 14%;
	border-right: 1px solid black;
	word-break: break-word;
}

.kontakt:hover{
	transition-duration: 300ms;
	text-shadow: 2px 5px 5px black;
}

.datum{
	width: 12%;
	border-right: 1px solid black;
}

.problem{
	cursor: pointer;
	width: 53%;	
	word-break: break-word;
	border-right: 1px solid black;
}

.wVersteckt, .kVersteckt{
	display: none;
}

.raum{
	word-break: break-word;
	width: 8%;	
}

.erledigt{
	width: 12%;
	border-left: 1px solid black;
	border-bottom-right-radius: 15px;
	border-top-right-radius: 15px;
}

::-moz-selection { background: black; color: #ededf0;}
::-webkit-selection { background: black; color: #ededf0;}
::selection { background: black; color: #ededf0;}


textarea{
	width: 80%;
	margin-left: 10%;
	height: 15em;
	color: black;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background-color: #CED9D2;
	resize:vertical;
	border: none;
	font-size: 1.2rem;
}


input[type=text]{
	font-size: 1.1rem;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	width: 80%;
	height: 2em;
	margin-left: 10%;
	margin-bottom: 2%;
	border-bottom: 1px solid white;
	background-color: #CED9D2;
	color: black;
	float: left;
	border: none;
	text-align: center;
}

#raumText, #kontaktKuerzel{
	margin-left: 30%;
	width: 40%;
}

#td4{
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
	border-right: 1px solid black;
}

.betreffUeb{
	margin-top: 4%;
}

#betreff{
	width: 80%;
	margin-left: 10%;
	margin-bottom: 4%;
	text-align: start;
}

input[type=range]{
	margin-top: 4%;
	margin-bottom: 4%;
	-webkit-appearance: none;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	width: 50%;
	margin-left: 25%;
	height: 1em;
	background: linear-gradient(90deg, green, orange, red);;
	opacity: 0.7;
}

input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 1.8em;
	height: 1.8em;
	background: white;
	cursor: pointer;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-color: black;
}

input[type=range]::-moz-range-thumb {
	width: 1.8em;
	height: 1.8em;
	background: white;
	cursor: pointer;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-color: black;
	content: "<>";
}

input[type=search]{
	color: black;
	float: right;
	margin-right: 1%;
	width: 60%;
	height: 2em;
	font-size: 1.05rem;
	border: none;
	border-radius: 15px;
}

.senden{
	width: 10%;	
	border-left: 1px solid black;
}

.sendenB{
	font-size: 1.1rem;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	margin-top: 2%;
	transition-duration: 0.6s;
	width: 68%;
	height: 4em;
	-moz-box-shadow: 20px 20px 50px rgba(0,0,0,0.5); 
	-webkit-box-shadow: 20px 20px 50px rgba(0,0,0,0.5); 
	box-shadow: 20px 20px 50px rgba(0,0,0,0.5); 
	background-color: #3f4652;
	border: none;
	float: right;
	margin-right: 10%;
	margin-bottom: 2%;
}

.zurueckB{
	font-size: 1.1rem;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	transition-duration: 0.6s;
	margin-left: 10%;
	margin-top: 2%;
	margin-bottom: 2%;
	width: 2%;
	height: 4em;
	-moz-box-shadow: 20px 20px 50px rgba(0,0,0,0.5); 
	-webkit-box-shadow: 20px 20px 50px rgba(0,0,0,0.5); 
	box-shadow: 20px 20px 50px rgba(0,0,0,0.5); 
	background-color: #3f4652;
	border: none;
	
}

.dringlichkeit{
	height: 20em;
	display: none;
	margin-top: 4%;
	margin-bottom: 2%;
	width: 100%;
}

.raumBez{
	display: none;
	margin-top: 4%;
	margin-bottom: 2%;
	width: 100%;
}

.ladeAußen{
	margin-top: 2%;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	margin-left: 10%;
	height: 1em;
	width: 80%;
	background-color: white;
}

.ladeInnen{
	transition-duration: 1s;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	height: 100%;
	width: 20%;
	background-color: #49864d;
}

.problemS{
	display: inline;
	margin-top: 4%;
	width: 100%;
}

h3{
	width: 100%;
	text-align: center;
	font-size: 1.2rem;
}

#vorherigerInhaltD, #vorherigerInhaltP, #vorherigerInhaltR{
	font-size: 1.1rem;
	text-align: center;
	word-break: break-word;
}

#vorherigerInhaltD, #vorherigerInhaltP,  #vorherigerInhaltR{
	width: 80%;
	text-align: start;
	padding-left: 4%;
	padding-right: 4%;
	border-left: 0.5px solid black;
}

#vorherigerInhaltDUE, #vorherigerInhaltPUE, #vorherigerInhaltRUE{
	text-align: center;
	word-break: break-word;
	width: 20%;
}

.vorherigerInhalt{
	width: 80%;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-left: 10%;
	text-align: center;
	border: 0.5px solid white;
	margin-bottom: 2%;
}

#kontakSend{
	display: none;
	margin-top: 4%;
	margin-bottom: 2%;
	width: 100%;
}

.inBearbeitung, .fertig{
	background-color: none;
	border: none;
	width: 100%;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
}

.kontaktUeb{
	width: 100%;
	text-align: center;
}
.btnSort{
	margin-bottom: 2%;
	margin-left: 1%;
	transition-duration: 400ms;
	background-color: rgba(0, 0, 0, 0.0);
	border: 1px solid black;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	height: 2.5em;
	font-size: 1.05rem;
	width: 20%;
	float: left;
}

.btnSort:hover{
	transition-duration: 400ms;
	background-color: black;
	border: 1px solid black;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
}

input[type=checkbox]{
	accent-color: black;
	margin-right: 10%;
}

h4{
	width: 100%;
	text-align: center;
	margin-bottom: none;
}

.vorherigerInhaltTable{
	margin-top: 1%;
	margin-bottom: 1%;
}

#deleteBtn{
	float: none;
	margin-right: 1%;
	font-size: 1.05rem;
}

.adminFeedback, .lehrerFehlermeldung{
	cursor: pointer;
	transition-duration: 200ms;
	text-decoration: none;
	text-align: end;
	margin-right: 1%;
	float: right;
	font-size: 1.3rem;
	text-shadow: 4px 4px  4px black; 
	color: rgba(255, 255, 255, 1);
}

#aktuelleTicketsB{
	cursor: pointer;
	transition-duration: 200ms;
	text-decoration: none;
	width: 60%;
	text-align: start;
	margin-left: 1%;
	font-size: 1.3rem;
	text-shadow: 4px 4px  4px black; 
	color: rgba(255, 255, 255, 1);
}

#AtFButtonDiv{
	padding-top: none;
	margin-bottom: 1%;
	height: 2.5em;
}

.lehrerFehlermeldung{
	text-align: start;
	margin-left: 1%;
	float: none;
}

#aktuelleTicketsB:hover, .adminFeedback:hover, .lehrerFehlermeldung:hover{
	transition-duration: 200ms;
	color: rgba(0,255,0,1);
	text-shadow: 1px 1px  3px black; 
}

#dringlichkeitAnzeiger{
	margin-top: 2em;
	margin-left: 10%;
	margin-bottom: none;
	width: 80%;
	text-align: center;
}

#feedbackSenden{
	font-size: 1.1rem;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	margin-top: 2%;
	transition-duration: 0.6s;
	width: 50%;
	height: 4em;
	-moz-box-shadow: 20px 20px 50px rgba(0,0,0,0.5); 
	-webkit-box-shadow: 20px 20px 50px rgba(0,0,0,0.5); 
	box-shadow: 20px 20px 50px rgba(0,0,0,0.5); 
	background-color: #3f4652;
	border: none;
	margin-left: 25%;
	margin-bottom: 2%;
	margin-top: 2%;
}

#SVGimg{
	height: 3.5rem;
}

.imgAktuelleTickets{
	height: 2.5em;
}

#sucheIndex, #suche{
	width: 65%;
	height: 2.5em;
}

::-webkit-Scrollbar{
	width: 15px;
}
::-webkit-Scrollbar-track{
	border: 7px solid #23943;
	-moz-box-shadow: inset 0 0 2.5px rgba(0, 0, 0, 0.5); 
	-webkit-box-shadow: inset 0 0 2.5px rgba(0, 0, 0, 0.5); 
	box-shadow: inset 0 0 2.5px rgba(0, 0, 0, 0.5);
}

::-webkit-Scrollbar-thumb{
	background: linear-gradient(45deg, #1C7800, #005825);
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

@media ( min-width: 720px ) {
	tr:hover{
		background-color: rgba(20, 20, 20, 0.4);
	}
	
	.sendenB:hover{
		transition-duration: 0.6s;
		background-color: #49864d;
	}

	.zurueckB:hover{
		transition-duration: 0.6s;
		background-color: #9e2648;
	}
	
	#feedbackSenden:hover{
		transition-duration: 0.6s;
		background-color: #49864d;
	}

}

@media screen and (max-width: 767px) {
	#sucheIndex{
		width: 98%;
		height: 3em;
	}
	
	#AtFButtonDiv{
		padding-top: 2%;
		height: 3em;
	}
	
	.AtFButtonDiv{
		padding-bottom: 2%;
	}

	
	html, body{
		background: url('background767PX.svg') no-repeat;
		background-size: cover;
	}
	
	*{
		font-size: 0.98rem;
	}
	.navBarText{
		font-size: 1.4rem;
	}
	
	.btnSort, #inBE, #deleteBtn{
	  width: 98%;
	  float: none;
	  font-size: 0.9rem;
	  height: 3em;
	}
	
	.datum{
		display: none;
	}
	
	.raum{
		width: 12%;
	}
	
	.erledigt{
		width: 20%;
	}
	
	::-webkit-Scrollbar{
		width: 5px;
	}
	
	.upR, .downR, .saveR {
		float: none;
		width: 94%;
		margin-left: 3%;
		height: auto;
	}
}

#passwrt {
	margin-top: 2%;
	margin-bottom: 4%;
	width: 50%;
	margin-left: 25%;
	float: none;
}

.tippsTD{
	padding-top: 0px;
	padding-bottom: 0px;
	text-align: start;
}
.tippsTD:hover{
	background-color: rgba(0,0,0,0.0);
}

#close{
	background-color: #9e2648;
	color: white;
	transition-duration: 200ms;	
	float:right; 
	border: none; 
	border-radius: 2px; 
	margin-bottom: 2%; 
	cursor: pointer;
	height: 2em;	
}

#close:hover{
	transition-duration: 200ms;
	background-color: #350000;
}

#homeButton{
	font-size: 1.1rem;
	transition-duration: 0.3s;
	height: 5vh; 
	width: 90%; 
	margin-left: 5%; 
	margin-bottom: 4%; 
	border-radius: 15px; 
	background-color: black; 
	border: none;
	cursor: pointer;
}
#homeButton:hover{
	transition-duration: 0.3s;
	background-color: #49864d;
}

#kreis{
	position: absolute;
	right: 0%;
	top: 0%;
	z-index: 2;
	margin-left: auto;
	margin-right: auto;
	animation: kreis 0.35s linear;
}
#haken{
	position: absolute;
	right: 0%;
	z-index: 3;
	top: 0%;
	margin-left: auto;
	margin-right: auto;
	animation: haken 0.35s linear;
}
@keyframes kreis{
	0% {opacity: 0%; transform: scale(0.5);}
	30% {opacity: 50%;transform: scale(0.8);}
	70% {opacity: 100%;transform: scale(1.2);}
	100% {opacity: 100%;transform: scale(1);}
}

@keyframes haken{
	0% {transform: scale(1);}
	0.01% {transform: scale(0.2);}
	30% {transform: scale(0.6);}
	100% {transform: scale(1);}
}