@charset "UTF-8";
/* CSS Document1 */


  :root {
    --main-dark-blue: #163161;
    --main02-dark-blue: #384875;
    --main-bright-blue: #eaf7fe;
    --main-akzent-blue: #61c3d9;
    --main-grey: #dadada;
    --main-red: #ea5153;
    --main-beige: #ede0b6;
    /*--debug-color:#f00;*/
  }

body{
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
	top:0px;
	left:0px;
	position:absolute;
	background-color:#ecedef; 
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
	}

#loginmaske{
	position:absolute;
	left:50%;
	top:50%;
	width:600px;
	height:450px;
	margin-left:-300px;
	margin-top:-225px;
	background-color:#ffffff;
	border-radius:10px;
	-webkit-background-clip: padding-box;
	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px 0px;
	-webkit-user-select: none;
	background-clip: padding-box;
	overflow:hidden;
	}
#loginmaske_logo{
	position:relative;
	float:left;
	font-size:25px;
	color:#fff;
	line-height:150px;
	height:150px;
	font-weight:700;
	background-image:url('../icon/bg_login.jpg');
	background-size: 100% auto;
	width:100%;
	text-align:center;
	font-weight:100;
	}
	#loginSplash{
		background-image:url("../icon/login_splash.png");
	width:100%;
	height:100%;
background-size: 300px auto;
background-position: center;
background-repeat: no-repeat;
	}
#loginmaske_felder{
	position:relative;
	float:left;
	width:100%;
	height:auto;
	}
.label{
	position:relative;
	float:left;
	width:170px;
	text-align:right;
	height:20px;
	line-height:40px;
	font-size:14px;
	font-weight:300;
	color:var(--main-grey);
	margin-top:15px;
	}
.eingabefeld{
	position:relative;
	float:left;
	width:300px;
	height:36px;
	font-size:14px;
	color:#000;
	border:none;
	border-bottom:1px solid var(--main-grey);
	margin-top:15px;
	margin-left:30px;
	margin-right:90px;
	 /* Firefox */
	 -moz-transition: border-bottom 0.5s ease-in;
	 /* WebKit */
	 -webkit-transition: border-bottom 0.5s ease-in;
	 /* Opera */
	 -o-transition: border-bottom 0.5s ease-in;
	 /* Standard */
	 transition: border-bottom 0.5s ease-in;
	 
	}
input{
	-webkit-appearance: none;
	border:none;
}
.eingabefeld:focus{
	border-bottom:1px solid var(--main-akzent-blue);
}
.row_send{
	position:relative;
	float:left;
	width:300px;
	height:36px;
	margin-top:20px;
	margin-left:200px;
	margin-right:100px;
	}

#checkbox_dummy{
	position:absolute; 
	left:0px;
	top:10px;
	width:18px;
	height:18px;
	margin:0px;
	background-image:url('../icon/flat@2x.png');
	background-size:auto 100%;
	}
#checkbox_desc{
	position:relative;
	float:left;
	width:160px;
	height:36px;
	line-height:36px;
	color:var(--main-grey);
	font-size:11px;
	margin-left:20px;
	}
#loginmaske_vergessen{
	position:relative;
	float:left;
	width:120px;
	height:36px;
	line-height:36px;
	text-align:right;
	}

	#loginmaske_vergessen a{
		color:var(--main-grey);
		text-decoration: none;
		font-size:11px;
	}
#notifi{
background-color: rgb(255, 255, 255);
background-image: none;
background-origin: padding-box;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
box-shadow: rgba(0, 0, 0, 0.597656) 0px 0px 20px 0px;
color:rgb(34, 34, 34);
display: block;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
text-align:center;
font-size: 16px;
height: 130px;
left: 50%;
margin-left: -155px;
margin-top: -120px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
position: absolute;
top: 50%;
width: 270px;
z-index: 900000;
-webkit-transform: scale( 0.9 );
-moz-transform: scale( 0.9 );
-ms-transform: scale( 0.9 );
-o-transform: scale( 0.9 );
transform: scale( 0.9 );
display:none;
opacity:0;


}
#notifi_title{font-weight:600; font-size:19px; -moz-user-select:none; -khtml-user-select: none;
}
#notifi_text{ margin-top:8px; line-height:21px; -moz-user-select:none; -khtml-user-select: none;
}
#notifi_abbrechen{ position:absolute; right:0px; width:100%; bottom:0px; height:40px; color:#999; -moz-user-select:none;
	-khtml-user-select: none; cursor:pointer;
}
	#shades{
		position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 900;
    background: #000;
    opacity:0;
	display:none;
		}
	
		
	
		#submitHolder{
			position: absolute;
			float:left;
			top:50px;
		}
		body, input[type="submit"] {
		  display: -webkit-box;
		  display: flex;
		  -webkit-box-pack: center;
				  justify-content: center;
		  -webkit-box-align: center;
				  align-items: center;
				  -webkit-appearance: none;
				  
		}
		
		*, *:before, *:after {
		  box-sizing: border-box;
		}
		
	
		
		input[type="submit"] {
		  width: 100px;
		  height: 40px;
		  background: #fff;
		  border-radius: 0px;
		  will-change: transform;
		  -webkit-transition: all .2s ease;
		  transition: all .2s ease;
		  border: 2px solid var(--main-akzent-blue);
		  cursor: pointer;
		  font-size: 16px;
		  color: var(--main-akzent-blue);
		  outline: none;
		  text-align: center;
		}
		input[type="submit"]:hover {
		  background: var(--main-akzent-blue);
		  color: #ffffff;
		}
		input[type="submit"]:active {
		  font-size: 15px;
		  -webkit-transform: translateY(1px);
				  transform: translateY(1px);
		}
		input[type="submit"].active {
		  font-size: 0;
		  border-radius: 20px;
		  width: 40px;
		  background: transparent;
		}
		input[type="submit"].loader {
		  border-right: 2px solid #ffffff;
		  -webkit-animation: loader .8s linear infinite;
				  animation: loader .8s linear infinite;
		}
		input[type="submit"].error {
		  background: var(--main-red);
		  border-color: var(--main-red);
		  font-size: 14px;
		  color: #ffffff;
		}
		
		@-webkit-keyframes loader {
		  0% {
			-webkit-transform: rotateZ(0);
					transform: rotateZ(0);
		  }
		  100% {
			-webkit-transform: rotateZ(360deg);
					transform: rotateZ(360deg);
		  }
		}
		
		@keyframes loader {
		  0% {
			-webkit-transform: rotateZ(0);
					transform: rotateZ(0);
		  }
		  100% {
			-webkit-transform: rotateZ(360deg);
					transform: rotateZ(360deg);
		  }
		}

		.spacer{
			height:30px;
		}
		
		
		@media only screen and (max-width: 768px) {
			/* For mobile phones: */
			#loginmaske {
				width:100%;
				height:100%;
				left:0px;
				top:0px;
				margin:0px;
				border-radius: 0px;
			}

			#label_user{
				padding-left:20px;
				text-align: left;
				margin-top:5px;
				text-transform: uppercase;
			}
			#username{
				width:100%;
				padding-left: 20px;
				padding-right:20px;
				margin:0px;
				margin-top:7px;
			}
			#label_pass{
				padding-left:20px;
				text-align: left;
				margin-top:5px;
				text-transform: uppercase;
			}
			#password{
				width:100%;
				padding-left: 20px;
				padding-right:20px;
				margin:0px;
				margin-top:7px;
			}
			.row_send{
				margin-left:20px;
				width:calc(100% - 40px);
			}
			#loginmaske_vergessen{
				float:right;
			}
			#submitHolder{
				width:100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			input[type="submit"]{
				width:100%;
			}
			.spacer{
				height:0px;
			}
			
		  }