/* QUICK LOGIN OVERLAY */

#quick-login-bg{
	display:none;
	position:fixed;
	background:rgba(8,25,55,0.82);
	backdrop-filter:blur(6px);
	-webkit-backdrop-filter:blur(6px);
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:49;
}

/* GLASS PANEL */

#quick-login-panel{
	box-sizing:border-box;
	display:none;
	position:fixed;
	margin:0 auto;
	padding:18px 20px;
	width:420px;
	max-width:calc(100% - 30px);
	top:25%;
	left:0;
	right:0;
	z-index:50;

	background:rgba(230,242,255,0.68);
	backdrop-filter:blur(14px);
	-webkit-backdrop-filter:blur(14px);

	border-radius:12px;
	border:1px solid rgba(60,124,193,0.45);

	box-shadow:
		0 25px 60px rgba(0,35,90,0.35),
		0 0 18px rgba(60,124,193,0.35),
		inset 0 1px 0 rgba(255,255,255,0.75);
}

/* glass highlight */

#quick-login-panel:before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:45%;
	border-radius:12px 12px 0 0;
	background:linear-gradient(
		to bottom,
		rgba(255,255,255,0.40),
		rgba(255,255,255,0)
	);
	pointer-events:none;
}

/* CONTENT */

#quick-login-panel .content{
	overflow:inherit;
	padding:6px;
	position:relative;
}

/* TITLE */

#quick-login-panel h3{
	text-align:center;
	color:#2f6fb0;
	font-weight:600;
	margin-bottom:8px;
}

/* HR */

#quick-login-panel hr{
	margin:10px 0;
	border:none;
	height:1px;
	background:linear-gradient(
		to right,
		transparent,
		#8bb6e8,
		transparent
	);
}

/* OPTIONS */

#quick-login-panel .ql-options{
	margin:5px auto 10px;
}

#quick-login-panel .ql-options span{
	vertical-align:middle;
}

#quick-login-panel .ql-oauth{
	font-weight:bold;
	margin:0;
	text-align:center;
	color:#2f6fb0;
}

/* INPUTS */

#quick-login-panel input[type="text"],
#quick-login-panel input[type="password"]{
	background:rgba(255,255,255,0.90);
	border:1px solid rgba(120,170,230,0.6);
	border-radius:6px;
	padding:6px 8px;
	width:100%;
	max-width:100%;
	box-sizing:border-box;
}

#quick-login-panel input:focus{
	border-color:#3c7cc1;
	box-shadow:0 0 8px rgba(60,124,193,0.45);
	outline:none;
}

/* SUBMIT BUTTON */

#quick-login-panel input[type="submit"]{
	display:inline-block;
	padding:8px 20px;
	height:auto;
	line-height:1.2;

	background:linear-gradient(to bottom,#4a87c8,#3573b6);
	border:1px solid #2f6fb0;
	border-radius:8px;

	color:#fff;
	font-size:13px;
	font-weight:600;
	text-align:center;

	box-shadow:0 2px 6px rgba(0,35,90,0.2);
	cursor:pointer;
}

#quick-login-panel input[type="submit"]:hover{
	background:linear-gradient(to bottom,#528fd0,#2f6fb0);
}

#quick-login-panel input[type="submit"]:focus{
	outline: none;
	box-shadow:
		0 0 0 3px rgba(120,180,235,0.25),
		0 2px 0 rgba(20,60,110,0.35) inset,
		0 2px 8px rgba(0,35,90,0.18);
}

/* CLOSE */

#quick-login-panel .close{
	position:absolute;
	right:-8px;
	top:-3px;
	width:12px;
	height:12px;
	background:transparent url("./images/close.png") no-repeat;
	opacity:0.65;
	filter:hue-rotate(200deg);
}

#quick-login-panel .close:hover{
	opacity:1;
}

/* RESPONSIVE */

@media only screen and (max-width:700px),
only screen and (max-device-width:700px){
	#quick-login-panel{
		width:320px;
		max-width:calc(100% - 20px);
		padding:15px 14px;
		top:12%;
		border-radius:10px;
	}

	#quick-login-panel:before{
		border-radius:10px 10px 0 0;
	}

	#quick-login-panel h3{
		font-size:1.05em;
	}

	#quick-login-panel .content{
		padding:4px;
	}
}

@media only screen and (max-width:480px),
only screen and (max-device-width:480px){
	#quick-login-panel{
		width:auto;
		left:10px;
		right:10px;
		top:8%;
		padding:14px 12px;
	}

	#quick-login-panel h3{
		font-size:1em;
	}

	#quick-login-panel input[type="text"],
	#quick-login-panel input[type="password"]{
		font-size:16px; /* voorkomt rare zoom op mobiel */
	}
}

@media only screen and (max-width:360px),
only screen and (max-device-width:360px){
	#quick-login-panel{
		top:5%;
		padding:12px 10px;
		border-radius:8px;
	}

	#quick-login-panel:before{
		border-radius:8px 8px 0 0;
	}

	#quick-login-panel h3{
		font-size:0.95em;
	}
}