/* GLobale Settings*/

/* Dark-mode*/
:root .theme-dark, :root .login{
--bodyColor: #9f9f9f;
--mainArea: #9f9f9f;
--backgroundColorDark:#212121;
--backgroundColorMedium:#272727;
--backgroundColorLight:#454545;

--greyText:#999999;
--textColor:#fff;
--yelowText:#ff9e1c;
}


body{	background-color: var(--bodyColor); }


input{
	background-color: transparent;
	color: var(--textColor);
	padding: 5px;
	font-size: 1em;
	border: 1px solid transparent;
	margin-top: -5px;
	transition: .3s;
	
}


input:focus{
	background-color: transparent;
	color: var(--textColor);
	padding: 5px;
	font-size: 1em;
	border-bottom: 1px solid var(--yelowText);
	background-color: rgba(255,255,255,0.1);
	margin-top: -5px;
	
}





/*------------- Der Loading-Spinner ---------*/

#th3_spinner_wrapper{
  display: block;
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 100000;
  background-color: rgba(0,0,0,0.7);
  /*filter: blur(4px);*/
  text-align: center;
  display: none;
  
}

.th3_spinner {
  display: inline-block;
  position: relative;
  width: 94px;
  height: 94px;
  margin-top: 50vh;
  transform: translateY(-50%);
}
.th3_spinner div {
  position: absolute;
  border: 5px solid #fff;
  opacity: 1;
  border-radius: 50%;
  animation: th3_spinner 1.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.th3_spinner div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes th3_spinner {
  0% {
    top: 42px;
    left: 42px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: -1px;
    left: -1px;
    width: 88px;
    height: 88px;
    opacity: 0;
  }
}








/*###########################################################*/
/*################### LOGIN-Seite ############################*/
/*###########################################################*/

.login{
	overflow: hidden; 
	display: flex;
	align-items: center;
	justify-content: center;
	background: -webkit-linear-gradient(left, #ee4036 60%,#ffdd15 150%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #ee4036 60%,#ffdd15 150%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}


.login .loginmodal{	
	position: relative;
	background: var(--backgroundColorDark);
	padding: 25px;
	-webkit-border-radius: 212px%;
	-moz-border-radius: 12px;
	border-radius: 12px; 
	width: 440px;
	color: #fff;

	/*background-color: var(--backgroundColorLight);*/
}


.login .loginIcon{
	border: 4px solid #fff;
	width: 90px;
	height: 90px;
	left: 50%;
	top:-110px;
	transform: translateX(-45px);
	position: absolute;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%; 
  background: #ee4036; 
  background: -webkit-linear-gradient(left, #ee4036 0%,#ffdd15 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #ee4036 0%,#ffdd15 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}



.loginIcon svg{
    position: absolute;
    left:8%;
    top:8px;
}


.login label{
	display: block;
	margin: 20px 0 4px 0;
}


.login input{
	background-color: var(--mainArea);
	color: var(--textColor);
	padding: 5px;
	font-size: 1em;
	width: 100%;
	margin: 5px 0 0px 0;
	transition: .3s;
	height: 45px;
	
}


input:focus{
	background-color: transparent;
	color: var(--textColor);
	padding: 5px;
	font-size: 1em;
	border-bottom: 1px solid transparent;
	background-color: rgba(255,255,255,0.1);
	margin-top: 0px;
	
}


.login #loginBtn{
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px; 
	background-color: #191818;
	height: 50px;
	cursor: pointer;
	-webkit-box-shadow: inset 0px 0px 0px 0px #ef812e;
	-moz-box-shadow: inset 0px 0px 0px 0px #ef812e;
	box-shadow: inset 0px 0px 0px 0px #ef812e; 
	transition: 1;
	
}


.login #loginBtn:hover{
		background-color: #ef812e;
		-webkit-box-shadow: inset 300px 0px 0px 0px #ef812e;
		-moz-box-shadow: inset 300px 0px 0px 0px #ef812e;
		box-shadow: inset 300px 0px 0px 0px #ef812e; 
		cursor: pointer;
	}


.login #result{
	margin: 10px 5px;
}




.loginShake {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}


@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0);  }
  20%, 80% { transform: translate3d(2px, 0, 0);  }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0);  }
  40%, 60% { transform: translate3d(4px, 0, 0);  }
}