/*************************************
 * SPDX-FileCopyrightText: 2009-2020 Vtenext S.r.l. <info@vtenext.com>
 * SPDX-License-Identifier: AGPL-3.0-only
 ************************************/

/* Import variables */
@import 'vars/variables';

/* Import colors */
@import 'vars/colors';

@import 'material/shadows';

html.main-login, body.main-login {
	height: 100%;
}

body.main-login {
	width: 100%;
	min-height: 100%;
	display: table;
}

#loginBackground {
	display: table-cell;
    vertical-align: middle;
    width: 100%;
    min-height: 100%;
    
	&:before {
		position: absolute;
		width: 100%;
		height: 100%;
		display: block;
		left: 0;
		top: 0;
		content: "";
	}
}	

.headerFilter {
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    min-height: 100%;
    
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
    
	&:before {
		background: rgba(0, 0, 0, .4);
	}
}

.loginBox {
    @include shadow-z-2();
    padding: 5px;
    background-color: $white;
    border-radius: $vte-box-border-radius;
    margin: 0px auto;
    z-index: 2;
    width: 360px;
    
    -webkit-transform: translate3d(0, 0px, 0);
    -moz-transform: translate3d(0, 0px, 0);
    -o-transform: translate3d(0, 0px, 0);
    -ms-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0);
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}

.loginBox.boxHidden {
    opacity: 0;
    -webkit-transform: translate3d(0, -60px, 0);
    -moz-transform: translate3d(0, -60px, 0);
    -o-transform: translate3d(0, -60px, 0);
    -ms-transform: translate3d(0, -60px, 0);
    transform: translate3d(0, -60px, 0);
}

.underwater {
	position: relative;
	top: -130px;
}

.logoContainer {
	margin-bottom: 40px;
	margin-top: 20px;
	
	& img {
		width: 200px;
	}
}

.inputContainer {
    margin: 0 0 30px 0;
    position: relative;
    padding-top: 5px;
    
    & input {
		width: 100%;
		font-size: 14px;
		height: 45px;
		
		&:focus ~ label,
		&:valid ~ label {
			color: $primary;
			
			transform: translate(-12%, -160%) scale(0.75);
			-webkit-transform: translate(-12%, -160%) scale(0.75);
			-moz-transform: translate(-12%, -160%) scale(0.75);
			-o-transform: translate(-12%, -160%) scale(0.75);
			-ms-transform: translate(-12%, -160%) scale(0.75);
	    }
	    
	    &:focus ~ i,
	    &:valid ~ i {
	    	color: $primary;
	    }
	}
	
	& label {
		position: absolute;
	    top: 50%;
	    left: 0px;
	    color: $grey-700;
	    font-size: 16px;
	    font-weight: 300;
	    
	    transition: 0.2s ease;
		-webkit-transition: 0.2s ease;
		-moz-transition: 0.2s ease;
		-o-transition: 0.2s ease;
	    
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
	}
	
	& i {
    	position: absolute;
	    top: 50%;
	    right: 0;
	    color: $grey-700;
	    font-size: 30px;
	    
	    transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
    }
}

.recoverContainer a {
	color: $grey-700;
}

#logout_reason_msg {
	position: relative;
	padding-top: 0px;
}

#vte_footer {
	padding: 0px 5px 0px 5px;
	position: absolute;
	bottom: 0px;
	
	td {
		font-size: 9px;
	}
}
