@charset "utf-8";
body#login{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	background: #7e8aa2;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}
.loginBtn, .btn {
  box-sizing: border-box;
  position: relative;
  border: none;
  text-align: left;
  white-space: nowrap;
  color: #FFF;
  border-radius: 0.2em;
}
.error-message{
  display: none;
}
.loginBtn:focus, .btn:focus {
  outline: none;
}
.loginBtn:active, .btn:active {
  box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
}
/* General */
.loginBtn--general {
  background-color: #ff9900;
  background-image: linear-gradient(#ff9900, #feae36);
  
  text-shadow: 0 -1px 0 #feae36;
}
.loginBtn--general:hover,
.loginBtn--general:focus {
  background-color: #feae36;
  background-image: linear-gradient(#feae36, #feb548);
  cursor: pointer;
}

/* Facebook */
.loginBtn--facebook {
  background-color: #4C69BA;
  background-image: linear-gradient(#4C69BA, #3B55A0);
  
  text-shadow: 0 -1px 0 #354C8C;
}
.loginBtn--facebook:before {
  border-right: #364e92 1px solid;
  background: url('/QSTool/Images/icon_facebook.png') 6px 6px no-repeat;
}
.loginBtn--facebook:hover,
.loginBtn--facebook:focus {
  background-color: #5B7BD5;
  background-image: linear-gradient(#5B7BD5, #4864B1);
  cursor: pointer;
}
/* Google */
.loginBtn--google {
  /*font-family: "Roboto", Roboto, arial, sans-serif;*/
  background: #DD4B39;
}
.loginBtn--google:before {
  border-right: #BB3F30 1px solid;
  background: url('/QSTool/Images/icon_google.png') 6px 6px no-repeat;
}
.loginBtn--google:hover,
.loginBtn--google:focus {
  background: #E74B37;
  cursor: pointer;
}

/* Geen media query */
/* input[type='text'], input[type='password']{
  border: 1px solid #999;
  border-radius: 3px;
  box-sizing: border-box;
  padding: 5px;
  outline: none;
  margin: 0px auto;
}*/
.login-box{
	height: auto;
	box-shadow: 0px 0px 10px #000;
	background: #fff;
	border-radius: 5px;
}
.label-big-check {
	position: relative;
	display: block;
	margin: 0;
	cursor: pointer;
}
.login-link{
	display: inline;
}
.login-link:hover{
	text-decoration: underline;
	cursor: pointer;
}
.label-big-check input {
	display: none;
}
.label-big-check .check-title {
	cursor: pointer;
}
.label-big-check .fa-square{
	background: none;
}
.fa-stack {
    display: inline-block;
    height: 32px !important;
    line-height: 2em;
    position: relative;
    vertical-align: middle;
    width: 20px !important;
}
.label-big-check input[type="checkbox"] + .check-title .fa-square {
	color: #feae36;
	font-size: 18px;
}
.label-big-check input[type="checkbox"] + .check-title .fa-check-square {
	display: none;
}
.label-big-check input[type="checkbox"]:checked + .check-title .fa-check-square {
	display: block;
	color: #feae36;
	font-size: 18px;
}
.login-line{
	background: #ddd;
	height: 1px;
	width: 90%;
	margin: 10px auto 10px;
}
#error-message-login-email, #error-message-login-pass, #error-message-login-reset-email, .forget-info-text{
  display: none;
  margin: 5px 0px 5px 0px;
  border-radius: 5px;
  padding: 5px;
}
#error-message-login-email, #error-message-login-pass{
  font-size: 11px;
}
.loginBtn:before {
	content: "";
	box-sizing: border-box;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
}
.btn{
	margin: 3px;
	padding: 0 15px 0 15px;
	line-height: 34px;
	font-size: 16px;
}
.loginBtn:before {
	width: 34px;
}
.loginBtn {
	margin: 3px;
	padding: 0 15px 0 46px;
	line-height: 34px;
}

.login-box{
	margin: 5% auto;
	width: 30%;
	padding: 10px;
}
.login-text, .login-link, .label-big-check .check-title {
	font-size: 14px;
}
.header{
	font-size: 20px;
	font-weight: 700;
}
.label-big-check {
	padding: 15px 0px 0px 0px;
}
.checkbox-login{
	background: #fff;
	border: none;
}
.label-big-check input[type="checkbox"] + .check-title:before {
	font-size: 20px;
	line-height: 1px;
	padding: 10px 10px 0px 0px;
}
.login-image{
	padding: 0px;
	margin: 10px auto;
	width: 45%;
}
.loginBtn {
	font-size: 14px;
}
.warning-red, .success-green{
	font-size: 13px;
}

/* 2FA */
#factorinput{
	margin: 0px auto 10px auto;
	width: 75%;
}
.login-inputs .fa-square::before, .fa-check-square::before{
	top: 0px;
}

/* Extra grote apparaten (Grote desktops, 1200px en lager) */
@media screen and (max-width: 1199px) {
	.login-box{
		margin: 5% auto;
		width: 35%;
		padding: 10px;
	}
	.login-text, .login-link, .label-big-check .check-title {
		font-size: 14px;
	}
	.header{
		font-size: 20px;
		font-weight: 700;
	}
	.label-big-check {
		padding: 15px 0px 0px 0px;
	}
	.label-big-check input[type="checkbox"] + .check-title:before {
		font-size: 20px;
		line-height: 1px;
		padding: 10px 10px 0px 0px;
	}
	.login-image{
		padding: 0px;
		margin: 10px auto;
		width: 60%;
	}
	.loginBtn {
		font-size: 14px;
	}
	.warning-red, .success-green{
		font-size: 13px;
	}
}
/* Grotere apparaten (desktops, 992px en lager) */
@media screen and (max-width: 991px) {
	.login-box{
		margin: 5% auto;
		width: 45%;
		padding: 10px;
	}
	.login-text, .login-link, .label-big-check .check-title {
		font-size: 14px;
	}
	.header{
		font-size: 20px;
		font-weight: 700;
	}
	.label-big-check {
		padding: 15px 0px 0px 0px;
	}
	.label-big-check input[type="checkbox"] + .check-title:before {
		font-size: 20px;
		line-height: 1px;
		padding: 10px 10px 0px 0px;
	}
	.login-image{
		padding: 0px;
		margin: 10px auto;
		width: 65%;
	}
	.loginBtn {
		font-size: 14px;
	}
	.warning-red, .success-green{
		font-size: 11px;
	}
}
/* Medium apparaten (tablets, 768px en lager) */
@media screen and (max-width: 767px) {
	.login-box{
		margin: 5% auto;
		width: 55%;
		padding: 10px;
	}
	.label-big-check {
		padding: 15px 0px 0px 0px;
	}
	.label-big-check input[type="checkbox"] + .check-title:before {
		font-size: 20px;
		line-height: 1px;
		padding: 10px 10px 0px 0px;
	}
	.login-text, .login-link, .label-big-check .check-title {
		font-size: 14px;
	}
	.header{
		font-size: 18px;
		font-weight: 700;
	}
	.login-image{
		padding: 0px;
		margin: 10px auto;
		width: 65%;
	}
	.loginBtn {
		font-size: 14px;
	}
	.warning-red, .success-green{
		font-size: 11px;
	}
}
/* Kleinere apparaten (landscape telefoons, 575px en lager) */
@media screen and (max-width: 575px) {
	.label-big-check {
		padding: 15px 0px 0px 0px;
	}
	.label-big-check input[type="checkbox"] + .check-title:before {
		font-size: 16px;
		line-height: 1px;
		padding: 10px 10px 0px 0px;
	}
	.login-box{
		margin: 5% auto;
		width: 70%;
		padding: 10px;
	}
	.login-text, .login-link, .label-big-check .check-title {
		font-size: 14px;
	}
	.header{
		font-size: 16px;
		font-weight: 700;
	}
	.login-image{
		padding: 0px;
		margin: 10px auto;
		width: 70%;
	}
	.loginBtn {
		font-size: 12px;
	}
	.warning-red, .success-green{
		font-size: 11px;
	}
}