@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300);

/* @prim: #53e3a6;	// original */


/* @bg-grad1: #50a3a2;
@bg-grad2: #53e3a6; */



:root{
    --prim: #136207;

    --bg-grad1: #4f963c;
    --bg-grad2: var(--prim);
}

.passwordScreenWrapper{
	/*
    background: -webkit-linear-gradient(top left, var(--bg-grad1) 0%, var(--bg-grad2) 100%);
    background: -moz-linear-gradient(top left, var(--bg-grad1) 0%, var(--bg-grad2) 100%);
    background: -o-linear-gradient(top left, var(--bg-grad1) 0%, var(--bg-grad2) 100%); */
    background: linear-gradient(to bottom right, var(--bg-grad1) 0%, var(--bg-grad2) 100%); 
    
	
    font-weight: 300;
    box-sizing: border-box;

    font-family: 'Source Sans Pro', sans-serif;
	color: white;
	overflow: hidden;	

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.form-success h1{
    transform: translateY(85px);
}

.container{
	max-width: 600px;
	margin: 0 auto;
	padding: 80px 0;
	height: 400px;
	text-align: center;
}

.container h1{
    font-size: 40px;
    transition-duration: 1s;
    transition-timing-function: ease-in-put;
    font-weight: 200;
}

form{
	padding: 20px 0;
	position: relative;
	z-index: 2;
}

.passwordScreenWrapper input{
    display: block;
    appearance: none;
    outline: 0;
    border: 1px solid #ffffff5e;
    background-color: #ffffff44;
    width: 250px;
    
    border-radius: 3px;
    padding: 10px 15px;
    margin: 0 auto 10px auto;
    display: block;
    text-align: center;
    font-size: 18px;
    
    color: white;
    
    transition-duration: 0.25s;
    font-weight: 300;
}

.passwordScreenWrapper input::placeholder {
    font-family: 'Source Sans Pro', sans-serif;
    color:    white;
    opacity:  1;
    font-weight: 300;
}

.passwordScreenWrapper input:hover{
    background-color: #ffffff5e;
}

.passwordScreenWrapper input:focus{
    background-color: white;
    width: 300px;
    
    color: var(--prim);
}

#passwordScreenButton{
    appearance: none;
    outline: 0;
    background-color: white;
    border: 0;
    padding: 10px 15px;
    color: var(--prim);
    border-radius: 3px;
    width: 250px;
    cursor: pointer;
    font-size: 18px;
    transition-duration: 0.25s;
}

#passwordScreenButton:hover{
    background-color: rgb(236, 236, 236);
}

#passwordScreenButton:disabled{
    border: 1px solid #999999;
    background-color: #cccccc;
    color: #666666;
}

.bg-bubbles{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
	z-index: 1;
	filter: opacity(20%);
}

.login-lion-img{
    position: absolute;
    list-style: none;
    display: block;
    width: 40px;
    height: 40px;
    bottom: -160px;
    
    -webkit-animation: square 20s infinite;
    animation:         square 20s infinite;
    
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
}

.login-lion-img:nth-child(1){
    left: 10%;

    animation-delay: -2s;
}

.login-lion-img:nth-child(2){
    left: 20%;
    
    width: 80px;
    height: 80px;
    
    animation-delay: 2s;
    animation-duration: 17s;
}

.login-lion-img:nth-child(3){
    left: 25%;
    animation-delay: 3s;
}

.login-lion-img:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    
    animation-delay: 4s;
    animation-duration: 22s;
    
    /* background-color: fade(white, 25%); */
}

.login-lion-img:nth-child(5){
    left: 70%;

    animation-delay: 5s;
}

.login-lion-img:nth-child(6){
    left: 80%;
    width: 120px;
    height: 120px;
    
    animation-delay: 6s;
    /* background-color: fade(white, 20%); */
}

.login-lion-img:nth-child(7){
    left: 32%;
    width: 160px;
    height: 160px;
    
    animation-delay: 7s;
}

.login-lion-img:nth-child(8){
    left: 55%;
    width: 20px;
    height: 20px;
    
    animation-delay: 8s;
    animation-duration: 20s;
}

.login-lion-img:nth-child(9){
    left: 25%;
    width: 10px;
    height: 10px;
    
    animation-delay: 9s;
    animation-duration: 20s;
    /* background-color: fade(white, 30%); */
}

.login-lion-img:nth-child(10){
    left: 90%;
    width: 160px;
    height: 160px;
    
    animation-delay: 10s;
}

@keyframes square {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-1200px) rotate(600deg); }
}

.wrong-password-shake {
    outline-color: red;
    animation: wrong-password-shake .5s linear;
}

@keyframes wrong-password-shake {
    8%, 41% {
        -webkit-transform: translateX(-10px);
    }
    25%, 58% {
        -webkit-transform: translateX(10px);
    }
    75% {
        -webkit-transform: translateX(-5px);
    }
    92% {
        -webkit-transform: translateX(5px);
    }
    0%, 100% {
        -webkit-transform: translateX(0);
    }
}

#passwordScreenCommandsFeedback {
	pointer-events: none;
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translate(-50%, 255px);
    /* height: 221px; */
    width: 200px;
    opacity: 0;
    text-align: left;
    overflow-wrap: break-word;
	font-family: 'Knicknack';
	text-shadow: 1px 1px 0px #00000061;
}

.passwordScreenCommandsFeedback_fade {
	animation-name: passwordScreenCommandsFeedback_fade;
	animation-duration: 4s;
}
 
@keyframes passwordScreenCommandsFeedback_fade {
	0% {
	   opacity: 0;
	}
 
	10% {
	   opacity: 1;
	}

	75% {
		opacity: 1;
	 }
 
	100% {
	   opacity: 0;
	}
}

#passwordScreenStatusUpdates {
	position: absolute;
    left: 50%;
    top: 0%;
    height: calc(100% - 392px);
    width: 239px;
    opacity: 1;
    text-align: left;
	transform: translate(-50%, 313px);
    overflow-wrap: break-word;
    /* background: red; */
    overflow-y: scroll;
    z-index: 5;
    text-shadow: 1px 1px 0px #00000061;
}

.passwordStatusUpdate_fadeIn {
	animation-name: passwordStatusUpdate_fadeIn;
	animation-duration: 1s;
	position: relative;
}

@keyframes passwordStatusUpdate_fadeIn {
	0% {
	   opacity: 0;
	   left: -50px;
	}

	100% {
		opacity: 1;
		left: 0;
	}
}