@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:500');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round');

*{margin:0;padding:0;}
*,*:before,*:after{
	-webkit-box-sizing:inherit;
	box-sizing:inherit;
}
html,body{height:100%;}
body{font:400 16px/24px Roboto,sans-serif;}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition-delay:500000s;
}

/* ------ Special styles ------ */
.s_centered{
    -ms-display:flex;
    display:flex;
    align-items:center;
    justify-content:center;
}
.s_centered.v{justify-content:initial;}
.s_truncate{
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	word-break:normal;
}
.s_no-select{
	-webkit-user-select:none;  /* Chrome all / Safari all */
	-moz-user-select:none;     /* Firefox all */
	-ms-user-select:none;      /* IE 10+ */
	user-select:none;
}
.s_hidden{display:none;visibility:hidden;opacity:0;}

#desktopFix{
	align-items:center;
	justify-content:center;
	background-image:linear-gradient(-6deg, #401c6d, #7022cF 50%, #5341ca);
}
#login{
	position:relative;
	margin:0 auto;
	background-color:#FFF;
}

.header{
	padding:50px;
	text-align:center;
	box-sizing:border-box;
}
.header .logo{
	/*margin:0 auto 16px;*/
	/*width:100%;
	height:86px;
	background-repeat:no-repeat;
	background-position:center;
	background-size:auto 100%;*/
	margin:4px auto 10px;
    width:50px;
    height:50px;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
	background-image:url('/img/logo.png');
}
.header .happyMessage{
	/*display:none;*/
	font:14px Roboto, sans-serif;
}

.container{
	padding:0 40px 20px;
}
.container #advice{
	display:block;
	margin-bottom:24px;
	padding:4px 10px;
	text-align:center;
	font-size:16px;
	border-radius:5px;
}
.container #advice.error{
	color:#E22;
	background-color:#FDD;
}
.container #advice.warning{
	color:#881;
	background-color:#EEB;
}
.inputArea{
	position:relative;
	margin-bottom:24px;
	display:inline-flex;
	width:100%;
}
.inputArea #switch{
	position:absolute;
	top:50%;
	right:0;
	transform:translateY(-50%);
	cursor:pointer;
	width:52px;
	height:52px;
	color:rgba(0,0,0,.6);
	border-radius:5px;
}
.inputArea input{
	outline:none;
	width:100%;
	height:52px;
	color:#444;
	padding:16px;
	border:none;
	font-size:.94rem;
	caret-color:#3CA3FF;
	border-radius:5px;
	box-sizing:border-box;
}
.inputArea.trailing input{padding-right:66px;}
.inputArea .mdc-notched-outline{
	display:flex;
	position:absolute;
	right:0;
	left:0;
	box-sizing:border-box;
	width:100%;
	max-width:100%;
	height:100%;
	text-align:left;
	pointer-events:none;
}
.inputArea .mdc-notched-outline__leading, .inputArea .mdc-notched-outline__notch, .inputArea .mdc-notched-outline__trailing{
	box-sizing:border-box;
	height:100%;
	border-top:1px solid;
	border-bottom:1px solid;
	pointer-events:none;
}
.inputArea .mdc-notched-outline__leading{
	border-left:1px solid;
	border-right:none;
	width:12px;
	border-radius:5px 0 0 5px;
}
.inputArea .mdc-notched-outline__notch{
	flex:0 0 auto;
	width:auto;
	max-width:calc(100% - 12px * 2);
}
.inputArea .mdc-notched-outline__trailing{
	border-left:none;
	border-right:1px solid;
	flex-grow:1;
	border-radius: 0 5px 5px 0;
}
.inputArea .mdc-notched-outline__leading, .inputArea .mdc-notched-outline__notch, .inputArea .mdc-notched-outline__trailing{
	border-color:rgba(0,0,0,.38);
}
.inputArea .mdc-notched-outline .mdc-floating-label{
	display:inline-block;
	position:relative;
	top:50%;
	left:4px;
	max-width:100%;
	font-family: Roboto, sans-serif;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-size:1rem;
	font-weight:400;
	letter-spacing:.009375em;
	text-decoration:inherit;
	text-transform:inherit;
	transform:translateY(-50%);
	pointer-events:none;
	transform-origin:left top;
	transition:transform 150ms cubic-bezier(0.4, 0, 0.2, 1),color 150ms cubic-bezier(0.4, 0, 0.2, 1);
	line-height:1.15rem;
	text-align:left;
	text-overflow:ellipsis;
	white-space:nowrap;
	cursor:text;
	overflow:hidden;
	will-change:transform;
}
.inputArea.active .mdc-notched-outline .mdc-floating-label{
	text-overflow:clip;
	max-width:calc(100% / .75);
	transform:translateY(-32px) scale(0.75);
	font-size:1rem;
}
.inputArea.focus .mdc-notched-outline .mdc-floating-label{color:#3CA3FF;}
.inputArea.focus .mdc-notched-outline__leading, .inputArea.focus .mdc-notched-outline__notch, .inputArea.focus .mdc-notched-outline__trailing{
	border-width:2px;
	border-color:#3CA3FF;
}
.inputArea.active .mdc-notched-outline__notch{
	padding-top:1px;
	padding-left:0;
	padding-right:8px;
	border-top:none;
}
.inputArea.active.focus .mdc-notched-outline__notch{
	padding-top:2px;
}
.inputArea:not(.focus) input:hover~.mdc-notched-outline .mdc-notched-outline__leading,
.inputArea:not(.focus) input:hover~.mdc-notched-outline .mdc-notched-outline__notch,
.inputArea:not(.focus) input:hover~.mdc-notched-outline .mdc-notched-outline__trailing{
	border-color:rgba(0,0,0,.87);
}

.container .loginForm .btn-login{
	outline:none;
	position:relative;
	width:100%;
	height:52px;
	color:#888;
	padding:18px 14px;
	border:solid 1px #AAA;
	border-radius:5px;
	caret-color:#3CA3FF;
	box-sizing:border-box;
	cursor:pointer;
	margin:24px 0 20px 0;
	border:0;
	color:#FFF;
	background:linear-gradient(to right, #4d26ef, #ac8bff);
	/*box-shadow:0 0 12px rgba(180, 100, 255,.5);*/
}
/*.container .loginForm .checkbox-wrapper{margin-bottom:6px;position:relative;text-align:center;}
.container .loginForm .checkbox-wrapper label{padding-left:18px;font-size:14px;color:#666;}
.container .loginForm .checkbox-wrapper input[type="checkbox"]{
	position:absolute;
	top:4px;
	margin-left:-18px;
}*/

.loader{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(255,255,255,.8);
	z-index:2;
}
.loader .icon{
	width:40px;
	height:40px;
	border:solid 5px #3CA3FF;
	border-top:solid 5px transparent;
	border-radius:50%;
	animation:rotateAnimation .5s linear infinite;
}

/* Loader styles */
@-webkit-keyframes rotateAnimation{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}
@keyframes rotateAnimation{
	0%{
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100%{
		-webkit-transform: rotate(359deg);
		transform: rotate(359deg);
	}
}

@media only screen and (min-device-width: 400px){
	body{
		background-color:#1F3D52;
	}
	#desktopFix{
		padding:20px 0;
		box-sizing:border-box;
	}
	#login{
		overflow:hidden;
		width:350px;
		/*box-shadow: 0 0 20px rgba(0, 0, 0, .3);*/
		box-shadow:0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
	}
}
@media only screen and (min-device-width: 400px) and (orientation : portrait){
	#desktopFix{
		display:flex;
		height:100%;
	}
}
@media only screen and (min-device-width: 768px){
	#desktopFix{
		display:flex;
		height:100%;
	}
	.container .loginForm .checkbox-wrapper input[type="checkbox"]{
		top:6px;
	}
}

/* Dark mode */
@media only screen and (min-device-width: 400px) and (prefers-color-scheme: dark){
	#desktopFix{
		background-image:linear-gradient(90deg, #19093a, #000a24 50%, #042853);
	}
}
@media (prefers-color-scheme: dark){
	body, #login{
		background-color:#000013;
	}
	.header .logo{
		background-image:url('/img/logo_blanco.png');
	}
	.header .happyMessage{
		color:#FFF;
	}
	.inputArea input{
		color:#FFF;
		caret-color:#FFF;
		background-color:#000013;
		/*background-color:rgba(255,255,255,0.05);*/
	}
	.inputArea .mdc-notched-outline__leading, 
	.inputArea .mdc-notched-outline__notch, 
	.inputArea .mdc-notched-outline__trailing{
		border-color:rgba(255, 255, 255, 0.2);
	}
	.inputArea.focus .mdc-notched-outline__leading, 
	.inputArea.focus .mdc-notched-outline__notch, 
	.inputArea.focus .mdc-notched-outline__trailing{
		border-color:#FFF;
	}
	.inputArea:not(.focus) input:hover~.mdc-notched-outline .mdc-notched-outline__leading, 
	.inputArea:not(.focus) input:hover~.mdc-notched-outline .mdc-notched-outline__notch, 
	.inputArea:not(.focus) input:hover~.mdc-notched-outline .mdc-notched-outline__trailing{
		border-color:#FFF;
	}
	.inputArea .mdc-notched-outline .mdc-floating-label,
	.inputArea #switch{
		color:rgba(255, 255, 255, 0.9);
	}
	.inputArea.active .mdc-notched-outline .mdc-floating-label{
		color:rgba(255, 255, 255, 0.7);
	}
	.container .loginForm .btn-login{
		background:linear-gradient(to right, rgba(255,255,255,.05), rgba(255,255,255,.3));
	}

	.loader{
		background-color:rgba(0,0,0,.8);
	}
	.loader .icon{
		border:solid 5px #FFF;
		border-top:solid 5px transparent;
	}
}