/* Tramweb Custom Login */

body.login {
	min-height: 100vh !important;
	background: #f3f5f7 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 32px !important;
	box-sizing: border-box !important;
}

/* Hide unwanted WP elements */
.language-switcher,
#language-switcher,
.login .language-switcher,
.login #language-switcher {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	position: absolute !important;
	left: -99999px !important;
}

body.login #login {
	width: 70vw !important;
	max-width: 1080px !important;
	min-height: 620px !important;
	padding: 0 !important;
	margin: 0 !important;
	background: #ffffff !important;
	border-radius: 28px !important;
	box-shadow: 0 25px 70px rgba(0,0,0,0.16) !important;
	overflow: hidden !important;
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	position: relative !important;
}

/* Left image area */
body.login #login::before {
	content: "" !important;
	display: block !important;
	grid-column: 1 !important;
	grid-row: 1 / span 5 !important;
	background-color: #202020 !important;
	background-size: cover !important;
	background-position: center !important;
	min-height: 620px !important;
}

/* Right column elements */
body.login h1,
body.login form,
body.login #nav,
body.login #backtoblog,
body.login .message,
body.login .notice,
body.login .success {
	grid-column: 2 !important;
	width: min(360px, calc(100% - 64px)) !important;
	justify-self: center !important;
}

body.login h1 {
	align-self: end !important;
	margin: 70px 0 20px !important;
	padding: 0 !important;
}

body.login h1 a {
	background-size: contain !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	width: 220px !important;
	margin: 0 auto !important;
	padding: 0 !important;
}

body.login form {
	align-self: center !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}

body.login label {
	font-weight: 600 !important;
	color: #202020 !important;
}

body.login form .input,
body.login input[type="text"],
body.login input[type="password"] {
	border-radius: 10px !important;
	border: 1px solid #d6d6d6 !important;
	box-shadow: none !important;
	padding: 8px 12px !important;
}

body.login .button-primary {
	background: #03a4ad !important;
	border-color: #03a4ad !important;
	border-radius: 10px !important;
	font-weight: 700 !important;
	padding: 4px 18px !important;
}

body.login .button-primary:hover,
body.login .button-primary:focus {
	background: #01878f !important;
	border-color: #01878f !important;
}

body.login #nav,
body.login #backtoblog {
	text-align: center !important;
	padding: 0 !important;
	margin: 16px 0 0 !important;
}

body.login #nav a,
body.login #backtoblog a {
	color: #202020 !important;
	text-decoration: none !important;
}

body.login .message,
body.login .notice,
body.login .success,
body.login #login_error {
	box-sizing: border-box !important;
	margin-top: 24px !important;
	border-radius: 10px !important;
}

@media (max-width: 900px) {
	body.login {
		padding: 18px !important;
	}

	body.login #login {
		width: 100% !important;
		max-width: 520px !important;
		min-height: auto !important;
		display: block !important;
		padding: 32px 0 !important;
	}

	body.login #login::before {
		display: none !important;
	}

	body.login h1,
	body.login form,
	body.login #nav,
	body.login #backtoblog,
	body.login .message,
	body.login .notice,
	body.login .success {
		width: calc(100% - 56px) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body.login h1 {
		margin-top: 0 !important;
	}
}