@charset "utf-8";

/* INLOGGEN ############################################################################################################################# */
* {  	box-sizing: border-box;  	-webkit-font-smoothing: antialiased;  	-moz-osx-font-smoothing: grayscale; }
body {   padding: 0;	background-color: #D4DAE6;		font-size:13px;	font-weight: normal; background: #F5F5FC;	color: #394178;	line-height: 180%;}

.trans, .transition, .transition-2-all{ transition:all .2s linear; -o-transition:all .2s linear;  -moz-transition:all .2s linear;   -webkit-transition:all .2s linear; }

.login {  position: absolute; top: 20px; left: 20px; bottom: 20px;	width: 400px;  	background-color: #fff; border-radius: 3px; box-shadow: 0 9px 20px rgba(0,0,0,0.1);  }
.login h1 {  font-family: 'Montserrat', sans-serif;	text-align: left;  	color: #394178;  font-size: 24px;  	padding: 13px 30px 30px;  font-weight: 500;	border-bottom: 1px solid #ECECF9;}

.login form {  	display: flex;  	flex-wrap: wrap;  	justify-content: center;  	padding-top: 20px;}
.login form label {  	display: flex;  	justify-content: center;  	align-items: center;  	width: 50px;  	height: 50px;  	background: #F5F5FC;  	color: #394178;  }
.login form input[type="password"], .login form input[type="text"] {  	width: 310px;  	height: 50px;  background: #fff; outline-style: none;	border: 1px solid #ECECF9;  	margin-bottom: 20px;  	padding: 0 15px;}
.login form input[type="submit"] { border-radius: 3px; width: 90%;  	padding: 15px; 	margin: 10px 0 20px;  	background: #4849FF;    color: #fff;    box-shadow: 0px 9px 20px rgba(72,73,255,0.2);	border: 0;  	cursor: pointer;  	font-weight: bold;  	transition: background-color 0.2s;}
.login form input[type="submit"]:hover { outline-style: none; outline:none;	background: #00BAB3;  box-shadow: 0px 9px 20px rgba(0,186,179,0.2); 	transition: all 0.5s;}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
	-webkit-box-shadow: 0 0 0 30px white inset !important;
	font-size:13px;	font-weight: normal;
    background: #fff;
}

.bg{ position: fixed; bottom: 0; right: 0; left: 0; top: 0; }
.bg:before{ 	position: absolute; content:'';	bottom: 50px; 	right: 50px; width: 50%; top: 0; 	background: url("../img/svg-login.svg") no-repeat right bottom; background-size: 100% auto; }

.error{	background:#FFF5F5; border: 1px solid #F78B8B; color: #000; padding: 7px 25px 7px 55px; position: relative; float: left; width: 100%; margin: 0 20px 20px 21px; border-radius: 3px;   font-weight: bold;  }
.error:before{	content:''; background:#F78B8B;  position: absolute; top: 0px; left: 0px; bottom: 0px; width: 30px; border-radius: 3px 0 0 3px;  }
.error:after{	content:''; background: url("../img/svg-error.svg") no-repeat top center; width: 20px; height: 20px;  background-size: 100% auto; position: absolute; top: 50%; margin-top: -10px; left: 5px;   border-radius: 3px 0 0 3px;  }

.problemen { opacity: 0.4; font-family: 'Montserrat', sans-serif; position: absolute; padding-left: 25px; bottom: 20px; left: 30px; font-size: 10px; font-weight: bold; text-transform: uppercase; color: #394178; text-decoration: none; }
.problemen:before { content:''; position: absolute; top: 3px; left: 0px; width: 15px; height: 15px; background: url("../img/svg-info.svg") no-repeat left top; background-size: 100% auto; }
.problemen:hover { opacity: 1; }