@keyframes spin {
	0% {
		transform: rotate(0deg);
		opacity: 0;
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes blur{
	from{filter: blur(0px);}
	to{filter: blur(5px);}
}

@keyframes fadeup {
	from {
		opacity: 0.0;
		bottom: -200px;
	}

	to {
		opacity: 1.0;
		bottom: 0;
	}
}

*{
	margin: 0;
	transition: 0.3s;
}

body{
	font-family: 'Open Sans', sans-serif;
	font-size: 10pt;
	overflow: hidden;
	background-repeat: no-repeat;
	background-size: cover !important;
	background-position: top;
	background: url("/bernini/images/shoptrader-login-wallpaper.jpg") no-repeat fixed center;
}

div#background_image img{
	 display: none;
 }

div.error_message{
	position: relative;
	padding: 5px;
	background: #ff0000;
	color: #fff;
	z-index: 10;
}

div#wrapper{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	padding: 40px;
	width: 300px;
	height: 285px;
	border-radius: 5px;
	z-index: 1;
	background: #ffffff;
	animation-name: fadeup;
	animation-duration: 2s;
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.25);
}

div#wrapper a{
	text-align: left;
}
div#wrapper a, .release{
	color: #737373;
}

div#logo{
	text-align: center;
	position: relative;
	margin: -100px auto 50px;
	padding: 23px;
	box-sizing: border-box;
	width: 120px;
	height: 120px;
	animation: 0.25s ease spin;
	animation-delay: 1s;
}

.right{
	display: inline-block;
	width: 50%;

}

.release {
	display: inline-block;
	float: right;
}

div#logo.done{
	background-color: rgba(255, 255, 255, 1);
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
	border-radius: 100px;
}

div#logo img{
	max-width: 70px;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	opacity: 0;
}
div#logo img.zoom{
	/*-webkit-transform: scale(1.2);*/
	/*-moz-transform: scale(1.2);*/
	/*-o-transform: scale(1.2);*/
	/*transform: scale(1.2);*/
}

div#logo img.done{
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);
	opacity: 1;
}

div#footer a{
	color: #fff;
}

span.release {
    float: right;
}

div.form-field{
	position: relative;
	margin-bottom: 10px;
	transition: 0.5s;
}

.form-field.last {
    margin-top: -5px;
}

span.icon-user{
	display: inline-block;
	width: 40px;
	height: 40px;
	/*background: url("https://cdn3.iconfinder.com/data/icons/essential-rounded/64/Rounded-31-512.png") no-repeat;
	background-size: 40px;*/
	display: none;
}

span.icon-password{
	display: block;
	position: absolute;
	top: 2px;
	left: 0px;
	width: 46px;
	height: 46px;
	border-radius: 5px 0px 0px 5px;
	/*background: url("../images/icon-password.png") no-repeat;*/
}

span.icon-mail{
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 46px;
	height: 48px;
	background: url("../images/icon-mail.png") no-repeat;
}

span.icon-2factor {
	display: block;
	position: absolute;
	top: 0px;
	right: 4px;
	width: 46px;
	height: 48px;
	border-radius: 0 3px 3px 0;
	background: url("../images/icon-2factor.png") no-repeat;
}

/* input velden, submit knop */
input[type=password],
input[type=text]{
	background-color: rgba(255, 255, 255, 0.39);
	border: 0px;
	color: #333333;
	font-family: 'Open Sans', sans-serif;
	font-size: 12pt;
	font-weight: normal;
	height: 36px;
	padding: 10px;
	width: 275px;
}

input[type=submit]{
	background-color: #5954f8;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	border: 0px;
	color: #ffffff;
	font-family: 'Open Sans', sans-serif;
	font-size: 13pt;
	font-weight: normal;
	height: 46px;
	width: 298px;
	cursor: pointer;
}

input[type=password],
input[type=text]{
	border-radius: 3px;
	border: 1px solid #dcdcdc;
	box-shadow: 0 1px 5px #9b9b9b29;
	transition: 0.3s;
}

input[type=submit]{
	border-radius: 2px;
	transition: 0.3s;
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.22);
	margin-bottom: 15px;
}

input[type=submit]:hover {
	transform: scale(0.98);
}

input[type=password]:hover,
input[type=text]:hover,
input[type=password]:focus,
input[type=text]:focus{
	box-shadow: 0 1px 3px #00000029;
	outline: none;
}

.indicator {
	position: relative;
	padding: 7px 40px 7px 40px;
	margin: 50px 0 0 -40px;
	width: 300px;
	height: 40px;
	line-height: 40px;
	border-radius: 5px;
	z-index: 1;
	background: #ffffff;
	animation-name: fadeup;
	animation-duration: 2s;
	box-shadow: 0px 2px 10px rgb(0 0 0 / 25%);
	color: #737373;
	display: flex;
	align-items: center;
}

.bullet-status {
	float: left;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	margin:15px 10px 0 20px;
	width: 10px;
	height: 10px;
	-webkit-transition: background-color .5s;
	transition: background-color .5s;
	line-height: 40px;
	align-items: center;
}


.bullet-status.bullet-status-none {
	background-color: #3c763d;
}

.bullet-status.bullet-status-minor {
	background-color: #f1c40f;
}

.bullet-status.bullet-status-major {
	background-color: #e67e22;
}

.indicatorNone,
.indicatorNone a{
	color: #3c763d !important;
	font-weight: bold;
	text-decoration: none;
}

.indicatorMinor,
.indicatorMinor a{
	color: #f1c40f !important;
	font-weight: bold;
	text-decoration: none;
}

.indicatorMajor,
.indicatorMajor a{
	color: #e67e22 !important;
	font-weight: bold;
	text-decoration: none;
}


@media only screen and (max-width: 661px) {
	div#wrapper {
		width: calc(90% - 80px) !important;
		margin: 40% 5% 10px 5% !important;
		padding:40px;
	}

	.indicator {
		padding: 10px 40px 10px 40px;
		margin: 50px 0 0 -40px;
		width: calc(100% - 0px) !important;
	}

	/* input velden, submit knop */
	input[type=password],
	input[type=text] {
		width: 95%;
	}

	input[type=submit]{
		width: calc(95% + 20px);
	}
}