@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

/* Remove whitespace from admin bar when hidden */
html.wpn-custom-login-removeMargin {
	margin-top: 0 !important;
}

/* reset the margin/padding on the body */
body.page-template-custom-login {
	padding: 0;
	margin: 0;
}

/* reset the default max width */
body.page-template-custom-login .grid-container {
	max-width: 100%;
	max-width: 100%;

	box-sizing: border-box;
}

/* remove any element that has header in it's classname */
/* body.page-template-custom-login [class*=header]{
    display: none !important;
} */

/* remove padding on any element that has content or main in it's classname */
body.page-template-custom-login .content {
	padding: 0;
}

/* body.page-template-custom-login > nav{
    display: none !important;
} */

/* body.page-template-custom-login [class*=col-]{
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    flex: unset !important;
} */

/* make sure existing elements are hidden behind the login page */
body.page-template-custom-login .site {
	width: 100%;
}

body.page-template-custom-login #page.site {
	margin: 0;
	padding: 0;
}

/* resetting container class */
body.page-template-custom-login .container {
	max-width: 100% !important;
	padding: 0 !important;
}

/* resetting container class */
body.page-template-custom-login .container .row {
	margin: 0 !important;
}

/* remove default padding on the site-content container */
body.page-template-custom-login .site-content,
body.page-template-custom-login #content {
	padding: 0;
}

/* make sure no margin is set on the custom-login-section */
body.page-template-custom-login main.custom-login-site-main section.custom-login-section {
	margin: 0;
	padding: 0;
}

/* overall container */
.custom-login-container {
	width: 100%;
	padding: 0;
	margin: 0;
	height: 100vh;

	display: flex;
	flex-direction: row;
}

.custom-login-section .custom-login-container .custom-login-logo-col .custom-login-setup-logo p {
	background-color: white;
	padding: 15px;

	font-size: 16px;
}

/* custom-login-logo-col = left side
custom-login-form-col = right side
 */
.custom-login-logo-col,
.custom-login-form-col {
	height: 100vh;
	width: 100%;
	overflow: hidden;
}

.custom-login-form-col {
	max-width: 56.25%;
}

.custom-login-logo-col {
	max-width: 43.75%;
	overflow-x: hidden;
}

/* button's */
.custom-login-section .custom-login-container .button {
	width: 100%;
	/* margin: 100px auto 0 auto; */
	text-align: center;
	display: block;
	color: #f5f6f8;
	font-family: 'Lato';
	font-weight: 600;
	font-size: 20px;
	line-height: 24px;
	font-weight: bold;
	-webkit-appearance: button;
	appearance: button;
	padding: 10px 20px;
	border: 1px solid transparent;
	background: transparent;
	cursor: pointer;
	user-select: none;
	background-color: #778cff;

	border-radius: 9px;
	transition: background-color 0.3s ease-out;
}

.custom-login-section .custom-login-container .button:hover {
	background-color: #3a57f8;
}

.custom-login-section .custom-login-container .custom-login-loggedin .button {
	margin-top: 25px;
}

/* #region Column with logo */
.custom-login-logo-col {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
}

.custom-login-background-image {
	width: 100%;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
}

.custom-login-background-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.custom-login-section .custom-login-container .custom-login-logo-col .custom-login-logo,
.custom-login-section .custom-login-container .custom-login-logo-col .custom-login-setup-logo {
	max-width: 300px;
	width: 50%;
	margin: 0;
	box-sizing: border-box;
}

.custom-login-section .custom-login-container .custom-login-logo-col .custom-login-setup-logo {
	text-align: center;
	background-color: #ffffff;
}

.custom-login-section .custom-login-container .custom-login-logo-col .custom-login-setup-logo p {
	margin: 0;
}


.custom-login-section .custom-login-container .custom-login-form-col .custom-login-error-messages p,
.custom-login-section
	.custom-login-container
	.custom-login-form-col
	.custom-login-loggedout-message
	p {
	margin: 0;
	font-family: 'Lato';
	font-size: 18px;
}
.custom-login-section
	.custom-login-container
	.custom-login-form-col
	.custom-login-loggedout-message
	p {
		color: #3A57F8;
}

.custom-login-section .custom-login-container .custom-login-form-col .custom-login-error-messages p{
	color: #d63638;
}

.wpnordic-custom-login-watermark {
	width: 100%;
	max-width: 810px;
	margin-left: auto;
	margin-right: -160px;
}

.wpnordic-custom-login-watermark img {
	width: 100%;
	height: auto;
}

/* #endregion */

/* #region Column with form */
.custom-login-section .custom-login-container .custom-login-form-col a.back-button {
	margin: 0px;
	display: flex;
	font-size: 16px;
	font-weight: bold;
	align-items: center;
	width: fit-content;
	font-family: 'Lato', sans-serif;
	text-decoration: none;
	margin-right: auto;
	margin-left: 115px;
	margin-top: 45px;
}

.back-button,
.back-button:visited,
.back-button:hover,
.back-button:active,
.back-button:hover .back-arrow,
.back-button:active .back-arrow {
	color: #cfd6ff !important;
}

.back-arrow {
	fill: #cfd6ff !important;
}

.custom-login-section .custom-login-container .custom-login-form-col a.back-button:visited,
.custom-login-section .custom-login-container .custom-login-form-col a.back-button:hover,
.custom-login-section .custom-login-container .custom-login-form-col a.back-button:active {
	text-decoration: none;
}

.custom-login-section .custom-login-container .custom-login-form-col .back-arrow {
	max-width: 25px;
	max-height: 25px;
}
.custom-login-form-col {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

/* create an extra empty element before to move the form down */
.custom-login-form-col::before {
	content: '';
	display: block;
}

.custom-login-form-container {
	max-width: 430px;
	width: 100%;
	margin-block: auto;
}

.custom-login-form-container .custom-login-form-title,
.custom-login-logo-container h2 {
	text-align: center;
	margin-bottom: 20px;
	font-size: 50px;
	line-height: 60px;
	font-weight: bold;
	font-variant: normal;
	font-style: normal;
	color: #ffffff;
	font-family: 'Lato';
}

.custom-login-logo-container h2 {
	color: #01142b;
	font-size: 32px;
	line-height: 39px;
	margin: 0;
}

.custom-login-logo-container .custom-login-form-title {
	font-size: 35px;
}

.custom-login-form-container #custom-loginform {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: auto;

	align-items: center;
	align-items: center;

	box-sizing: border-box;
}

.custom-login-section .custom-login-container .custom-login-form-col .custom-login-logo img,
.custom-login-section .custom-login-container .custom-login-logo-col .custom-login-logo img {
	width: 100%;
	height: auto;
	display: block;
}

.custom-login-section .custom-login-container .custom-login-form-col .custom-login-error-messages,
.custom-login-section
	.custom-login-container
	.custom-login-form-col
	.custom-login-loggedout-message {
	min-height: 48px;
	padding-inline: 25px;
	text-align: left;
	border-radius: 9px;
	display: flex;
	align-items: center;
	background-color: rgb(235, 239, 255);
	margin-bottom: 1rem;
}

.custom-login-section .custom-login-container .custom-login-form-col .custom-login-error-messages.custom-login-padding,
.custom-login-section
	.custom-login-container
	.custom-login-form-col
	.custom-login-loggedout-message.custom-login-padding{
		padding-block: 12px;
	}


.custom-login-section
	.custom-login-container
	.custom-login-form-col
	.custom-login-loggedout-message {
	color: rgb(117, 138, 255);
}

.custom-login-section .custom-login-container .custom-login-form-col .custom-login-loggedin {
	text-align: center;
	padding: 15px;
	background-color: white;
	font-size: 16px;
	color: black;
}

.custom-login-form-col .custom-login-logo-container {
	display: flex;
	flex-direction: row;
	width: 100%;
	align-items: center;
	justify-content: center;
	column-gap: 25px;

	margin: 50px auto;
}

.custom-login-logo-col .custom-login-logo-container {
	margin: auto 100px 50px auto;
	position: relative;
	z-index: 99;
}

.custom-login-form-col .custom-login-logo-container .custom-login-logo {
	width: 50%;
	max-width: 150px;
	padding: 0;
	margin-bottom: 0;
}

figure.custom-login-logo-container {
	width: 100%;
	max-width: 300px;
}

figure.custom-login-logo-container img {
	width: 100%;
	height: auto;
	display: block;
}

.custom-login-form-col .custom-login-logo-container h1 {
	width: 50%;
	max-width: 200px;
	text-align: end;
}
/* #endregion */

/* #region input field containers */
p.login-username {
	grid-row: 1;
	grid-column: 1/3;
}

p.login-password {
	grid-row: 2;
	grid-column: 1/3;
	margin-block: 0;
	margin-bottom: 18px;

	position: relative;
	width: 100%;
}

p.login-remember {
	grid-row: 3;
	grid-column: 1/2;
	margin: 0;
}

a.forgotten {
	grid-row: 3;
	grid-column: 1/3;
	margin: 0;
	padding: 0;
	font-family: 'Lato', sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: bold;
	letter-spacing: 0;
	font-size: 16px;
	color: #778cff;
	height: 30px;

	position: relative;
	justify-self: flex-end;

	text-decoration: none;

	transition: color 0.3s ease-out;
}

a.forgotten:visited,
a.forgotten:hover,
a.forgotten:active {
	text-decoration: none;
}

a.forgotten:visited,
a.forgotten:hover,
a.forgotten:active {
	text-decoration: none;
	color: #3a57f8;
}

p.login-submit {
	grid-row: 5;
	grid-column: 1/3;
	margin: 0;
	margin-top: 40px;
	padding: 0;
}

p.login-username,
p.login-password {
	margin-bottom: 1rem;
	line-height: normal;
	display: flex;
	flex-direction: column;

	box-sizing: border-box;
}

/* #endregion */

/* #region Inputs */
.custom-login-section
	.custom-login-container
	.custom-login-form-col
	.custom-login-form-container
	#custom-loginform
	p.login-username
	label,
.custom-login-section
	.custom-login-container
	.custom-login-form-col
	.custom-login-form-container
	#custom-loginform
	p.login-password
	label {
	font-weight: normal;
	font-size: 10px;
	letter-spacing: 0.3px;
	visibility: hidden;
	opacity: 0;
	margin-bottom: 0px;
	height: 0;
}

.custom-login-section
	.custom-login-container
	.custom-login-form-col
	.custom-login-form-container
	#custom-loginform
	p.login-password
	label {
	margin-bottom: 0;
}

.custom-login-section
	.custom-login-container
	.custom-login-form-col
	.custom-login-form-container
	#custom-loginform
	p.login-remember
	label {
	font-size: 16px;
	font-family: 'Lato', sans-serif;
	margin: 0;
	padding: 0;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	line-height: 30px;
	column-gap: 10px;
	color: #ecf0ff;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	position: relative;
	display: flex;
	width: fit-content;
	flex-direction: row-reverse;
	align-items: center;
}

.custom-login-section
	.custom-login-container
	.custom-login-form-col
	.custom-login-form-container
	#custom-loginform
	p.login-username
	input[type='text']#user_login,
.custom-login-section
	.custom-login-container
	.custom-login-form-col
	.custom-login-form-container
	#custom-loginform
	p.login-password
	input#user_pass {
	width: 100%;
	border: 0;
	padding-block: 0;
	background-color: #ecf0ff;
	font-size: 18px;
	font-family: 'Lato', sans-serif;
	font-weight: normal;
	font-weight: normal;
	font-variant: normal;
	letter-spacing: 0;
	line-height: 30px;
	border-radius: 9px;
	height: 48px;
	max-width: 430px;
	color: #01142b;
	padding-left: 25px;
	box-sizing: border-box;
}

/* hide/show image styling */
.wpnordic-custom-login-hide,
.wpnordic-custom-login-show {
	position: absolute;
	right: 70px;
	top: 50%;
	transform: translateY(-50%);
	translate: 20px;
}

.wpnordic-custom-login-hide {
	display: none;
}

/*===============================================
 =          Custom checkbox styling           =
===============================================*/
.wpnordic-cookie-care-checkmark {
	position: relative;
	height: 22px;
	width: 22px;
	background-color: #ecf0ff;
	border-radius: 4px;
	border: 1px solid transparent;
}

.custom-login-section
	.custom-login-container
	.custom-login-form-col
	.custom-login-form-container
	#custom-loginform
	p.login-remember
	label
	input:checked
	~ .wpnordic-cookie-care-checkmark {
	background-color: #778cff;
	border-color: transparent;
}

.custom-login-section
	.custom-login-container
	.custom-login-form-col
	.custom-login-form-container
	#custom-loginform
	p.login-remember
	label
	.wpnordic-cookie-care-checkmark::after {
	width: 100%;
	height: 100%;
}

.custom-login-section
	.custom-login-container
	.custom-login-form-col
	.custom-login-form-container
	#custom-loginform
	p.login-remember
	label
	input:checked
	~ .wpnordic-cookie-care-checkmark::after {
	display: flex;
	align-items: center;
	justify-content: center;
}

.wpnordic-cookie-care-checkmark:after {
	content: '';
	position: absolute;
	display: none;
}

.custom-login-section
	.custom-login-container
	.custom-login-form-col
	.custom-login-form-container
	#custom-loginform
	p.login-remember
	label
	.wpnordic-cookie-care-checkmark:after {
	left: 50%;
	top: 50%;
	width: 7px;
	height: 15px;
	border: solid #ecf0ff;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	translate: -50% -65%;
}

/* Hide the original checkbox */
.custom-login-section
	.custom-login-container
	.custom-login-form-col
	.custom-login-form-container
	#custom-loginform
	p.login-remember
	label
	#rememberme {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* style input fields placeholder content */
.custom-login-section
	.custom-login-container
	.custom-login-form-col
	.custom-login-form-container
	#custom-loginform
	p.login-username
	input[type='text']#user_login::placeholder,
.custom-login-section
	.custom-login-container
	.custom-login-form-col
	.custom-login-form-container
	#custom-loginform
	p.login-password
	input#user_pass::placeholder {
	color: #01142b;
	font-size: 18px;
	font-family: 'Lato', sans-serif;
	font-weight: normal;
	font-weight: normal;
	font-variant: normal;
	letter-spacing: 0;
	line-height: 30px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
	background-color: transparent !important;
	color: #01142b !important;
	-webkit-box-shadow: 0 0 0 1000px #ecf0ff inset !important;
	-webkit-text-fill-color: #01142b !important;
}

/* #endregion */

/* some of the older of wordpress' own themes sets the content width in media querys,
so we have to reset it */
@media only screen and (min-width: 59.6875em) {
	body.page-template-custom-login .site-content {
		float: unset;
		margin: 0;
		padding: 0;
		width: 100%;
		min-width: 100%;
	}

	body.page-template-custom-login #page.site {
		max-width: 100%;
		width: 100%;
	}

	body.page-template-custom-login [class*='col-'] {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
		flex: unset !important;
	}
}

/* @media only screen and (max-width: 1199px) {
	.wpnordic-custom-login-watermark {
		margin-left: 0px;
	}
} */

@media only screen and (max-width: 992px) {
	body.page-template-custom-login [class*='col-'] {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
		flex: unset !important;
	}

	.custom-login-form-col .custom-login-logo-container {
		flex-direction: column;
	}

	.custom-login-form-col .custom-login-logo-container h1 {
		text-align: center;
	}

	/* set the two sections ontop of each other */
	.custom-login-container {
		width: 100%;
		padding: 0;
		margin: 0;
		min-height: 100vh;

		display: flex;
		flex-direction: column;
	}

	/* left and right side of the screen */
	.custom-login-form-col,
	.custom-login-logo-col {
		max-width: 100%;
		padding-inline: 0;
	}

	.custom-login-form-col {
		justify-content: flex-start;
		height: fit-content;
	}

	.custom-login-logo-col {
		padding-bottom: 20px;
		flex: 1;
	}

	/* form */
	.custom-login-form-container {
		margin-block: auto;
	}

	.custom-login-form-col {
		height: 100vh;
	}

	.custom-login-logo-col {
		display: none;
	}
}

@media only screen and (max-width: 768px) {
	/* hide the mobile header, since the login page does not have any menu points */
	body.page-template-custom-login nav#mobile-header {
		display: none !important;
	}

	/* back button */
	.custom-login-section .custom-login-container .custom-login-form-col a.back-button {
		margin-inline: 0;
		max-width: 430px;
		width: 100%;
		margin-left: -10px;
	}
}

@media only screen and (max-width: 500px) {
	.custom-login-section
		.custom-login-container
		.custom-login-form-col
		.custom-login-error-messages,
	.custom-login-section
		.custom-login-container
		.custom-login-form-col
		.custom-login-loggedout-message {
		margin-top: 25px;
	}

	/* reset remember me and lost password grid-layout */
	p.login-remember {
		grid-row: 3;
		grid-column: 1/2;
	}

	a.forgotten {
		grid-row: 3;
		grid-column: 2/3;
	}

	p.login-submit {
		grid-row: 4;
	}
}

@media only screen and (max-width: 450px) {
	.custom-login-form-container {
		max-width: 90%;
	}

	/* back button */
	.custom-login-section .custom-login-container .custom-login-form-col a.back-button {
		margin-inline: 0;
		max-width: 90%;
		margin-left: -10px;
	}
}