/* Algemene login stijlen */
body.login {
	background-color: #fff;
}

body.login div#login {
	width: 400px;
}

/* Logo styling */
#login h1 a, 
.login h1 a {
	background-image: url('../images/login-logo.svg');
	height: 70px;
	width: 161px;
	background-size: 215px 56px;
	background-repeat: no-repeat;
	padding-bottom: 30px;
	float: left;
	width: 100%;
	background-position: center left -40px;
}

/* Login formulier */
.login form,
body.login div#login form#loginform {
	background-color: #051c2c;
	color: #fff;
	border: none;
	padding: 40px;
}

body.login label,
body.login div#login form#loginform p label {
	font-size: 18px;
	margin: 0px auto 10px;
}

body.login div#login form#loginform p input,
.login form .input, 
.login form input[type=checkbox], 
.login input[type=text] {
	background-color: #03101a;
	border: solid 1px #0c4166;
	color: #F4F7F9;
}

/* Achtergrond decoratie */
body.login div#login:before {
	content: '';
	position: fixed;
	right: 0;
	top: 0;
	width: 50%;
	height: 40%;
	background-image: url('../images/login-text.svg');
	background-position: bottom left;
	background-repeat: no-repeat;
	background-size: contain;
	z-index: -1;
	mix-blend-mode: multiply;
}

body.login div#login:after {
	content: '';
	position: fixed;
	right: 0;
	top: 0;
	width: 50%;
	height: 40%;
	background-color: #ddd;
	z-index: -2;
	background-image: url('../images/login-background.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

/* Knoppen en links */
.wp-core-ui .button.button-large,
body.login div#login form#loginform p.submit input#wp-submit {
	transition: all ease-in-out 0.3s;
	color: #fff;
	font-size: 16px;
	border-radius: 100px;
	padding: 8px 40px;
	font-weight: bold;
	border: solid 1px #FF2341;
	text-align: center;
	background-color: #FF2341;
	width: 100%;
}

.wp-core-ui .button.button-large:hover,
body.login div#login form#loginform p.submit input#wp-submit:hover {
	transition: all ease-in-out 0.3s;
	background-color: transparent;
}

body.login div#login p#nav a {
	transition: all ease-in-out 0.3s;
	color: #051c2c;
	font-size: 16px;
	border: solid 1px #FF2341;
	border-radius: 100px;
	padding: 15px 30px;
	font-weight: bold;
	display: block;
	margin-bottom: 30px 0;
	text-align: center;
}

body.login div#login p#nav a:hover {
	transition: all ease-in-out 0.3s;
	background-color: #FF2341;
	color: #fff;
}

body.login div#login p#backtoblog a,
a.privacy-policy-link {
	color: #697780;
	text-decoration: none;
}

/* WordFence 2FA styling */
body.login #wfls-prompt-overlay {
	background-color: #051c2c;
	color: #fff;
	padding: 40px;
}

body.login #wfls-prompt-overlay .dashicons:not(.dashicons-editor-help) {
	background: #FF2341 !important;
}

body.login #wfls-prompt-overlay .dashicons.dashicons-editor-help {
	color: #FF2341 !important;
}

body.login #wfls-prompt-overlay .button {
	border: solid 1px #FF2341 !important;
	background-color: #FF2341 !important;
}

/* Overige elementen */
.dashicons-hidden:before,
.dashicons-visibility:before {
	transition: all ease-in-out 0.3s;
	color: #FF2341;
}

#login form p.forgetmenot {
	margin-bottom: 20px;
}

.login .privacy-policy-page-link {
	display: none;
}

body.login .notice-error {
	display: table;
}

#login .message {
	display: none;
}

/* Responsive */
@media (max-width: 600px) {
	body.login div#login {
		width: 320px;
	}
	
	.wp-core-ui .button.button-large {
		white-space: normal;
		line-height: 24px;
	}
}