body{
    /*background-color:rgb(40,40,40);*/
    /*background-color:rgb(20,20,30);*/
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(-90deg, rgb(20,20,40), rgb(20,30,60), rgb(20,20,40));
	background-size: 400% 400%;
    animation: loginbackground linear 30s infinite;
}


.more-width{
    width:400px;
}



@keyframes loginbackground {
    0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.login-controller{
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
}


.galgo-logo{
    position:absolute;
    width:320px;
    height:64px;
    left:0px;
    top:-80px;
    text-align: center;
    line-height: 64px;
}



.galgo-logo-only{
    position:relative;
    width:320px;
    height:64px;
    text-align: center;
    line-height: 64px;
}


.leave{
    animation: leaveframe linear 1s forwards;
}


@keyframes leaveframe {
    0% {
        opacity:1;
        filter:blur(0px);
    }
    60% {
        filter:blur(3px);
    }
    100%{
        
        filter:blur(20px);
        opacity:0;
        display:none;
    }
}

.hidden{
    display:none;
}

.showup {
    color: rgb(255,255,255);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    animation: showframe linear 1s forwards;
    bottom: 0;
    text-align: center;
    line-height: 64px;
    font-weight: 800;
    font-size: 2em;
}

.be-normal{
    font-size:1em;

}
@keyframes showframe {
    0% {
        opacity:0;
        filter:blur(0px);
    }
    60% {
        opacity:0;
        filter:blur(20px);
    }
    100%{
        
        filter:blur(0px);
        opacity:1;
    }
}

.login-box{
    position:relative;
    width:300px;
    height:260px;
    background-color:rgb(40,40,40);
    padding-left:20px;
    padding-top:20px;
    border-radius: 10px;
}
.login-label{
    color:rgb(200,200,200);
    font-size:1.1em;
    font-weight: 800;
    margin-bottom: 10px;
    margin-top: 10px;
}
.login-input{
    background-color:rgb(60,60,60);
    color:rgb(255, 255, 255);
    border: 1px solid rgb(80,80,80);
    width:260px;
    height:30px;
    outline: none;
    padding-left:10px;
    font-size:1.1em;
    font-weight: 300;
}

.error{
    animation: errorbg linear 1s 1;
}

.pass{
    animation: passbg linear 0.5s 1;
}

.fail{
    animation: errorbg linear 1s 1;
}




@keyframes errorbg {
    0% {
        background-color:rgba(60, 60, 60,0);
    }
    5% {
        background-color:rgb(200, 60, 60);
    }
    50% {
        background-color:rgb(200, 60, 60);
    }
    100%{
        background-color:rgb(60,60,60);
    }
}



@keyframes passbg {
    
    0% {
        background-color:rgb(60, 255, 60);
        color:rgb(20,255,20);
        
    }
    20% {
        background-color:rgb(60, 120, 60);
        color:rgb(0,200,200);
    }
    100%{
        background-color:rgb(60,60,60);
    }
}


.login-button{
    background-color:rgb(80,80,80);
    color:rgb(200,200,200);
    border: 1px solid rgb(20,20,20);
    height:30px;
    line-height: 30px;
    text-align: center;
    width:100px;
    position:absolute;
    right:30px;
    bottom: 30px;
    cursor:pointer;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}



.login-recovery{
    background-color:rgb(80,80,80);
    color:rgb(200,200,200);
    border: 1px solid rgb(20,20,20);
    height:30px;
    line-height: 30px;
    text-align: center;
    width:150px;
    position:absolute;
    left:20px;
    bottom: 30px;
    cursor:pointer;

}

.login-button:hover {
    border-color:rgb(20,200,20);
}

.login-recovery:hover{
    border-color:rgb(20,200,20);

}

.login-disabled{
    pointer-events: none;
    /*filter:blur(1px);*/
    opacity:0.3;
}