/*
	COLORS:
	- Narzissengelb				#dc9d00		220,157,0
	- Narzissengelb, hover		#ffcc00		255,204,0
	- Perlkupfer				#763c28 	118,60,40
	- Perlkupfer, 25% satter	#80371e		128,55,30
	- Silber					#c0c0c0		192,192,192
	- Maroon					#800000		128,0,0
	- Gray						#808080		128,128,128
	- Gray, hover				#404040		64,64,64
		
	*/

/* Bordered form */
form {
	border: 3px solid #f1f1f1;
}

/* STANDARD-STYLING ***************************************************************************** */
	/* Style the submit button */
	input[type=submit] {
	  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	  font-size: 12px;
	  letter-spacing:1px;
	  font-weight: normal;
	  background-color: #dc9d00; /* Narzissengelb */
	  color: black;
	  padding: 2px 4px;
	  margin: 1px;
	  border: 1px solid #808080;
	  border-radius: 4px;
	  cursor: pointer;
	  width: 115px;
	}

	input[type=submit]:hover {
	  background-color: #ffcc00; /* Leuchtgelb */
	  color: white;
	  border: 1px solid #808080;
	}

	/* Style inputs, select elements and textareas */
/*	input[type=text], select, textarea{
	  font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	  font-size:13px;
	  width: 100%;
	  padding: 12px;
	  border: 1px solid #ccc;
	  border-radius: 4px;
	  box-sizing: border-box;
	  resize: vertical;
	}
*/


/* SELECTED-STYLING ***************************************************************************** */	


/* Full-width inputs */
.logincontainer input[type=text], .logincontainer input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0px;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.logincontainersmall input[type=text], .logincontainersmall input[type=password] {
  width: 100%;
  padding: 2px 2px;
  margin: 0px 0px 2px 0px;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */
.logincontainer button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0px;
  border: none;
  cursor: pointer;
  width: 100%;
}

/* Set a style for all buttons */
.logincontainersmall button {
  background-color: #4CAF50;
  color: white;
  padding: 4px 4px;
  margin: 2px 0px;
  border: none;
  cursor: pointer;
  width: 70px;
}

/* Add padding to containers */
.logincontainersmall {
  padding: 4px;
}

/* Add a hover effect for buttons */
.logincontainersmall button:hover {
  opacity: 0.8;
  background-color: #dc9d00;
}

/* Add a hover effect for buttons */
.logincontainer button:hover {
  opacity: 0.8;
  background-color: #dc9d00;
}

/* Extra style for the cancel button (red) */
.logincontainer .cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* Center the avatar image inside this container */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

/* Avatar image */
img.avatar {
  width: 20%;
  border-radius: 50%;
}

/* Add padding to containers */
.logincontainer {
  padding: 16px;
}

/* The "Forgot password" text */
.logincontainer span.psw {
  float: right;
  padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  .logincontainer  span.psw {
    display: block;
    float: none;
  }
  
  .logincontainer .cancelbtn {
    width: 100%;
  }
  
  .logincontainersmall span.psw {
    display: block;
    float: none;
  }
}


/* STATUS-BAR ******************************************************* */

.loginstatusscreen {
	box-sizing: border-box;
}

.lssrow {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 1px;
}

[class*="lsscol-"] {
	float: left;
	padding: 0px;
	border: 1px solid #800000;
}

.lsscol-01 {
	width: 340px;	
}
.lsscol-02 {
	width: 340px;	
}
.lsscol-03 {
	width: 340px;	
}
.lsscol-04 {
	width: 360px;
	float: right;
	border: 1px solid #c0c0c0;	
}
.lsscolspacer {
	width: 5px;
	float: left;
	padding: 0px;
	border: 1px solid #c0c0c0;
}

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

/* innere Tabellen gestalten */

#loginstatusscreen table {
	table-layout:fixed;
	width: 100%;
	border: 0px #800000 solid;
	border-collapse: collapse;
	font-size: 13px;

}
#loginstatusscreen table.tablestats {
	background-color: #b3b3b3;
	border: 0px #800000 solid;
}

#loginstatusscreen td {
	padding: 1px 5px;
	vertical-align: top;
	}


.loginstatusscreen .tablestats4 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	max-width: 360px;
	float: right;

}

[class*="tlscol-"] {
	background-color: #c0c0c0;
}

[class*="tlscol-"] form {
	border: 2px solid #c0c0c0;
}



/* FORMULARE FÜR LOGIN-SEITEN ******************************************************* */

	/* Style inputs, select elements and textareas */
	.account-form input[type=text], input[type=password],select, textarea{
	  font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	  font-size:13px;
	  width: 100%;
	  padding: 12px;
	  border: 1px solid #ccc;
	  border-radius: 4px;
	  box-sizing: border-box;
	  resize: vertical;
	}

	/* Style the container */
	.modlogin-container {
	  border-radius: 5px;
	  background-color: #f2f2f2;
	  padding: 20px;
	  margin-left: auto;
	  margin-right: auto;
	  width: 90%;
	 /* min-height: 800px;*/
	}

	/* Style for all buttons */
	.modlogin-container button {
	  background-color: #4CAF50;
	  color: white;
	  padding: 12px 12px;
	  border: 1px solid #ccc;
	  border-radius: 4px;
	  cursor: pointer;
	  float: right;
	  width: 80px;
	  height: 42px;
	}

	.modlogin-container button:hover {
	  background-color: #ffcc00; /* Leuchtgelb */
	  color: white;
	  border: 1px solid #808080;
	}

	.modlogin-container #prevBtn {
	  float: left;
	}
			

	/* Style for structure */
	.modlogin-container .registerrow {
	  display: flex;
	  width: 100%;
	}

	.modlogin-container .registersteprow {
	  display: flex;
	  width: 100%;
	}

	/* Floating column for labels: 25% width */
	.modlogin-container .col-25 {
	  float: left;
	  width: 25%;
	  margin-top: 6px;
	}

	/* Floating column for labels: 25% width */
	.modlogin-container .col-0 {
	  float: left;
	  width: auto;
	  margin-top: 6px;
	}

	/* Floating column for inputs: 75% width */
	.modlogin-container .col-75 {
	  float: left;
	  width: 75%;
	  margin-top: 6px;
	}

	/* Floating column for inputs: 100% width */
	.modlogin-container .col-100 {
	  float: left;
	  width: 100%;
	  margin-top: 6px;
	}

	/* Clear floats after the columns */
	.modlogin-container .registerrow:after {
	  content: "";
	  display: table;
	  clear: both;
	}




/* The Modal (background) ******************************************* */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 111; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(128,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5px auto; /* 15% from the top and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  max-width: 400px;
}

/* The Close Button */
.close {
  /* Position it in the top right corner outside of the modal */
  position: absolute;
  right: 25px;
  top: 0;
  color: #000;
  font-size: 35px;
  font-weight: bold;
}

/* Close button on hover */
.close:hover,
.close:focus {
  color: red;
  cursor: pointer;
}

/* Add Zoom Animation */
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
}

/* Textglowing */
.glowyred {
  font-size: 14px;
  color: #000000;
  text-align: left;
  animation: glowred 1s ease-in-out infinite alternate;
}

/* Textglowing */
.glowygreen {
  font-size: 14px;
  color: #000000;
  text-align: left;
  animation: glowgreen 1s ease-in-out infinite alternate;
}

/* Textglowing */
.glowyblue {
  font-size: 14px;
  color: #000000;
  text-align: left;
  animation: glowblue 1s ease-in-out infinite alternate;
}



@-webkit-keyframes glowred {
  from {
    text-shadow: 0 0 2px #c0c0c0, 0 0 4px #c0c0c0;
  }
  
  to {
    text-shadow: 0 0 4px #c0c0c0, 0 0 8px #660000;
  }
}

@-webkit-keyframes glowgreen {
  from {
    text-shadow: 0 0 2px #c0c0c0, 0 0 4px #c0c0c0;
  }
  
  to {
    text-shadow: 0 0 4px #c0c0c0, 0 0 8px #00ff00;
  }
}

@-webkit-keyframes glowblue {
  from {
    text-shadow: 0 0 2px #c0c0c0, 0 0 4px #c0c0c0;
  }
  
  to {
    text-shadow: 0 0 4px #c0c0c0, 0 0 8px #0080ff;
  }
}




	/* ***** @MEDIA-KLASSEN ****** */

	/* ************************************************************************************************************************ */
	/* MEDIA-SCREEN 414 MAX																										*/
	/* ************************************************************************************************************************ */

 	@media screen and (max-width: 414px) {
		.loginstatusscreen {
			font-size: 10px;
		}
		#loginstatusscreen table {
			font-size: 10px;
		}
		.loginstatusscreen .tablestats4 {
			flex-direction: column;
			justify-content: flex-start;
			float: left;	
			max-width: 100%;
		}
		input[type=submit] {
			font-size: 10px;
	  		width: 70px;
		}
		.lsscol-01 {
			width: 280px;
			margin-top: 2px;
			order: 2;	
		}
		.lsscol-02 {
			width: 280px;	
			margin-top: 2px;
			order: 3;	
		}
		.lsscol-03 {
			width: 280px;	
			margin-top: 2px;
			order: 4;	
		}
		.lsscol-04 {
			order: 1;
			width: 240px;
			flex-grow: 100;
			/* flex-wrap: nowrap; */
		}
		.lsscolspacer {
			order: 5;	
			width: 0px;
			margin-top: 2px;
		}	

 	}
	
	/* ************************************************************************************************************************ */
	/* MEDIA-SCREEN 414 MIN																										*/
	/* ************************************************************************************************************************ */

 	@media screen and (min-width: 414px) {
		.loginstatusscreen {
			font-size: 10px;
		}
		#loginstatusscreen table {
			font-size: 10px;
		}
		.loginstatusscreen .tablestats4 {
			flex-direction: column;
			justify-content: flex-start;
			float: left;	
			max-width: 100%;
		}
		input[type=submit] {
			font-size: 10px;
	  		width: 70px;
		}
		.lsscol-01 {
			width: 280px;
			margin-top: 2px;
			order: 2;	
		}
		.lsscol-02 {
			width: 280px;	
			margin-top: 2px;
			order: 3;	
		}
		.lsscol-03 {
			width: 280px;	
			margin-top: 2px;
			order: 4;	
		}
		.lsscol-04 {
			order: 1;
			width: 240px;
			flex-grow: 100;
			/* flex-wrap: nowrap; */
		}
		.lsscolspacer {
			order: 5;	
			width: 0px;
			margin-top: 2px;
		}	

 	}

	/* ************************************************************************************************************************ */
	/* MEDIA-SCREEN 520																											*/
	/* ************************************************************************************************************************ */

 	@media screen and (min-width: 520px) {
		.loginstatusscreen {
			font-size: 10px;
		}
		#loginstatusscreen table {
			font-size: 10px;
		}
		.loginstatusscreen .tablestats4 {
			flex-direction: column;
			justify-content: flex-start;
			float: left;	
			max-width: 100%;
		}
		input[type=submit] {
			font-size: 10px;
	  		width: 70px;
		}
		.lsscol-01 {
			width: 280px;
			margin-top: 2px;
			order: 2;	
		}
		.lsscol-02 {
			width: 280px;	
			margin-top: 2px;
			order: 3;	
		}
		.lsscol-03 {
			width: 280px;	
			margin-top: 2px;
			order: 4;	
		}
		.lsscol-04 {
			order: 1;
			width: 240px;
			flex-grow: 100;
			/* flex-wrap: nowrap; */
		}
		.lsscolspacer {
			order: 5;	
			width: 0px;
			margin-top: 2px;
		}	

 	}
 	
	/* ************************************************************************************************************************ */
	/* MEDIA-SCREEN 620																											*/
	/* ************************************************************************************************************************ */

 	@media screen and (min-width: 620px) {
		.loginstatusscreen {
			font-size: 10px;
		}
		#loginstatusscreen table {
			font-size: 10px;
		}
		.loginstatusscreen .tablestats4 {
			flex-direction: column;
			justify-content: flex-start;
			float: left;	
			max-width: 100%;
		}
		input[type=submit] {
			font-size: 10px;
	  		width: 70px;
		}
		.lsscol-01 {
			width: 280px;
			margin-top: 2px;
			order: 2;	
		}
		.lsscol-02 {
			width: 280px;	
			margin-top: 2px;
			order: 3;	
		}
		.lsscol-03 {
			width: 280px;	
			margin-top: 2px;
			order: 4;	
		}
		.lsscol-04 {
			order: 1;
			width: 240px;
			flex-grow: 100;
			/* flex-wrap: nowrap; */
		}
		.lsscolspacer {
			order: 5;	
			width: 0px;
			margin-top: 2px;
		}	

	}

	/* ************************************************************************************************************************ */
	/* MEDIA-SCREEN 788																											*/
	/* ************************************************************************************************************************ */

 	@media screen and (min-width: 788px) {
		.loginstatusscreen {
			font-size: 10px;
		}
		#loginstatusscreen table {
			font-size: 10px;
		}
		.loginstatusscreen .tablestats4 {
			flex-direction: row;
			justify-content: flex-end;
			float: right;	
			max-width: 100%;
		}
		input[type=submit] {
			font-size: 10px;
	  		width: 70px;
		}
		.lsscol-01 {
			width: 280px;	
			order: 0;	
		}
		.lsscol-02 {
			width: 280px;	
			order: 0;	
		}
		.lsscol-03 {
			width: 280px;	
			order: 0;	
		}
		.lsscol-04 {
			width: 240px;
			order: 0;	
			flex-grow: 100;
		}
		.lsscolspacer {
			width: 5px;
			order: 0;	
		}	

	}
	/* ************************************************************************************************************************ */
	/* MEDIA-SCREEN 1012																										*/
	/* ************************************************************************************************************************ */

 	@media screen and (min-width: 1012px) {
		.loginstatusscreen {
			font-size: 10px;
		}
		#loginstatusscreen table {
			font-size: 10px;
		}
		.loginstatusscreen .tablestats4 {
			max-width: 100%;
		}
		input[type=submit] {
			font-size: 10px;
	  		width: 70px;
		}
		.lsscol-01 {
			width: 280px;	
		}
		.lsscol-02 {
			width: 280px;	
		}
		.lsscol-03 {
			width: 280px;	
		}
		.lsscol-04 {
			width: 240px;
			flex-grow: 100;
		}
		.lsscolspacer {
			width: 5px;
		}	

	}

	/* ************************************************************************************************************************ */
	/* MEDIA-SCREEN 1220																										*/
	/* ************************************************************************************************************************ */

 	@media screen and (min-width: 1220px) {
		.loginstatusscreen {
			font-size: 10px;
		}
		#loginstatusscreen table {
			font-size: 10px;
		}
		.loginstatusscreen .tablestats4 {
			max-width: 100%;
		}
		input[type=submit] {
			font-size: 10px;
	  		width: 70px;
		}
		.lsscol-01 {
			width: 280px;	
		}
		.lsscol-02 {
			width: 280px;	
		}
		.lsscol-03 {
			width: 280px;	
		}
		.lsscol-04 {
			width: 240px;
			flex-grow: 100;
		}
		.lsscolspacer {
			width: 5px;
		}	
	}

	/* ************************************************************************************************************************ */
	/* MEDIA-SCREEN 1620																										*/
	/* ************************************************************************************************************************ */
 	@media screen and (min-width: 1620px) {
		.loginstatusscreen {
			font-size: 12px;
		}
		#loginstatusscreen table {
			font-size: 10px;
		}
		.loginstatusscreen .tablestats4 {
			max-width: 100%;
		}
		input[type=submit] {
			font-size: 11px;
	  		width: 85px;
		}
		.lsscol-01 {
			width: 280px;	
		}
		.lsscol-02 {
			width: 280px;	
		}
		.lsscol-03 {
			width: 280px;	
		}
		.lsscol-04 {
			width: 280px;
			flex-grow: 100;
		}
		.lsscolspacer {
			width: 5px;
		}	
	}

	/* ************************************************************************************************************************ */
	/* MEDIA-SCREEN 1940																										*/
	/* ************************************************************************************************************************ */
 	@media screen and (min-width: 1940px) {
		.loginstatusscreen {
			font-size: 14px;
		}
		#loginstatusscreen table {
			font-size: 11px;
		}
		.loginstatusscreen .tablestats4 {
			max-width: 280px;
		}
		input[type=submit] {
			font-size: 11px;
	  		width: 85px;
		}
		.lsscol-01 {
			width: 300px;	
		}
		.lsscol-02 {
			width: 300px;	
		}
		.lsscol-03 {
			width: 300px;	
		}
		.lsscol-04 {
			width: 280px;
			flex-grow: 100;
			
		}
		.lsscolspacer {
			width: 5px;
		}	
	}
	
	/* ************************************************************************************************************************ */
	/* MEDIA-SCREEN 2240																										*/
	/* ************************************************************************************************************************ */

 	@media screen and (min-width: 2240px) {
		.loginstatusscreen {
			font-size: 16px;
		}

		#loginstatusscreen table {
			font-size: 13px;
		}

		.loginstatusscreen .tablestats4 {
			max-width: 350px;
		}

		input[type=submit] {
			font-size: 12px;
	  		width: 110px;
		}
		.lsscol-01 {
			width: 345px;	
		}
		.lsscol-02 {
			width: 345px;	
		}
		.lsscol-03 {
			width: 345px;	
		}
		.lsscol-04 {
			width: 350px;
			flex-grow: 100;
		}
		.lsscolspacer {
			width: 5px;
		}	
	}