/*!
 * Copyright (c) 2024 StyloPress - CodeWS.online
 * This file is part of StyloPress.
 *
 * This file is licensed under the same terms as the main plugin (GNU GPL v2 or later).
 */

html.spss.new {
	position: var(--spss-lp-position-relative);
	margin: var(--spss-lp-margin-zero);
	padding: var(--spss-lp-padding-zero);
	width: var(--spss-lp-full-width);
	height: var(--spss-lp-full-height);
	display: var(--spss-lp-display-grid);
	place-items: var(--spss-lp-place-items);
}

html.spss.new::before {
	content: var(--spss-lp-before-content);
	position: var(--spss-lp-position-absolute);
	top: var(--spss-lp-top-zero);
	left: var(--spss-lp-left-zero);
	width: var(--spss-lp-full-width);
	height: var(--spss-lp-full-height);
	background-color: var(--spss-lp-overlay-color);
	z-index: var(--spss-lp-z-index-plus-1);
}

body.spss.new {
	font-family: var(--spss-lp-google-font-family);
	font-weight: var(--spss-lp-google-font-weight);
	position: var(--spss-lp-position-relative);
	overflow: var(--spss-lp-overflow-hidden);
	background-color: var(--spss-lp-background-color);
	background-image: var(--spss-lp-background-image);
	background-size: var(--spss-lp-background-image-size);
	background-repeat: var(--spss-lp-background-repeat);
	background-position: var(--spss-lp-background-position);
	width: var(--spss-lp-background-border-width);
	height: var(--spss-lp-background-border-height);
	display: var(--spss-lp-display-flex);
	justify-content: var(--spss-lp-justify-content-center);
	align-items: var(--spss-lp-align-items-center);
}

@media only screen and (max-width: 768px) {
	body.spss.new {
		background-image: var(--spss-lp-background-image-mobile);
	}
}

body.spss.new .spss-background-video {
	position: var(--spss-lp-position-absolute);
	top: var(--spss-lp-top-zero);
	left: var(--spss-lp-left-zero);
	width: var(--spss-lp-full-width);
	height: var(--spss-lp-full-height);
	z-index: var(--spss-lp-z-index-minus-1);
	object-fit: var(--spss-lp-object-fit-cover);
	pointer-events: var(--spss-lp-pointer-events-none);
}

body.spss.new .spss-background-video #bg-video {
	width: var(--spss-lp-full-width);
	height: var(--spss-lp-full-height);
	object-fit: var(--spss-lp-object-fit-cover);
}

body.spss.new .spss-background-video .video-overlay {
	position: var(--spss-lp-position-absolute);
	top: var(--spss-lp-top-zero);
	left: var(--spss-lp-left-zero);
	width: var(--spss-lp-full-width);
	height: var(--spss-lp-full-height);
	pointer-events: var(--spss-lp-pointer-events-none);
	z-index: var(--spss-lp-z-index-plus-1);
	background: var(--spss-lp-video-overlay);
}

body.spss.new .login-title a {
	background-image: var(--spss-lp-logo-image);
	background-size: var(--spss-lp-logo-background-size-cover);
	width: var(--spss-lp-logo-width);
	height: var(--spss-lp-logo-height);
	display: var(--spss-lp-logo-hidden);
	animation: var(--spss-lp-logo-rotation-enabled);
}

@media only screen and (max-width: 768px) {
	body.spss.new .login-title a {
		background-size: var(--spss-lp-logo-background-size-contain);
		width: var(--spss-lp-full-width);
	}
}

@keyframes spss-animation-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

body.spss.new .login-container {
	max-width: var(--spss-lp-form-width);
	z-index: var(--spss-lp-z-index-plus-1);
}

body.spss.new #custom-login-form {
	max-width: var(--spss-lp-form-width);
	min-height: var(--spss-lp-form-min-height);
	background-color: var(--spss-lp-form-background-color);
	background-image: var(--spss-lp-form-background-image);
	background-size: var(--spss-lp-form-image-background-size);
	background-repeat: var(--spss-lp-form-image-background-repeat);
	background-position: var(--spss-lp-form-image-background-position);
	border-radius: var(--spss-lp-form-border-radius);
	box-shadow: var(--spss-lp-box-shadow-style);
	padding: var(--spss-lp-form-padding);
	border-width: var(--spss-lp-form-border-width);
	border-style: var(--spss-lp-form-border-style);
	border-color: var(--spss-lp-form-border-color);
	margin-top: var(--spss-lp-form-margin-top);
}

@media only screen and (max-width: 768px) {
	body.spss.new .login-container {
		max-width: var(--spss-lp-login-form-max-width-mobile);
	}

	body.spss.new #custom-login-form {
		max-width: var(--spss-lp-login-form-max-width-mobile);
	}
}

body.spss.new #custom-login-form .form-field label {
	color: var(--spss-lp-input-label-color);
	font-size: var(--spss-lp-input-label-font-size);
	font-family: var(--spss-lp-google-font-family);
	font-weight: var(--spss-lp-google-font-weight);
}

body.spss.new #custom-login-form .form-field input {
	background-color: var(--spss-lp-input-background-color);
	border-radius: var(--spss-lp-input-field-border-radius);
	border-color: var(--spss-lp-input-field-border-color);
	border-width: var(--spss-lp-input-field-border-width);
	border-style: var(--spss-lp-input-field-border-style);
	color: var(--spss-lp-input-field-text-color);
	height: 40px;
}

body.spss.new #custom-login-form .form-field input:focus {
	outline: var(--spss-lp-none-value);
}

body.spss.new #custom-login-form label.remember-me {
	display: var(--spss-lp-remember-me-toggle-display);
	float: var(--spss-lp-float-none);
	width: var(--spss-lp-form-remember-me-width);
	color: var(--spss-lp-input-field-text-color);
}

body.spss.new #custom-login-form label.remember-me input {
	border-color: var(--spss-lp-input-field-border-color);
}

body.spss.new #custom-login-form label.remember-me span {
	color: var(--spss-lp-input-label-color);
	font-size: var(--spss-lp-input-label-font-size);
	font-family: var(--spss-lp-google-font-family);
	font-weight: var(--spss-lp-google-font-weight);
}

body.spss.new #custom-login-form .form-field .toggle-password {
	color: var(--spss-lp-input-field-password-eye-color);
	transition: var(--spss-lp-transition-all);
}

body.spss.new #custom-login-form .form-field .toggle-password:hover {
	color: var(--spss-lp-input-field-password-eye-color-hover);
}

body.spss.new #custom-login-form button.submit-button {
	font-family: var(--spss-lp-google-font-family);
	font-weight: var(--spss-lp-google-font-weight);
	display: var(--spss-lp-display-submit-button);
	float: var(--spss-lp-float-submit-button);
	width: var(--spss-lp-button-width);
	color: var(--spss-lp-button-text-color);
	background-color: var(--spss-lp-button-color);
	font-size: var(--spss-lp-button-text-size);
	border-style: var(--spss-lp-button-border-style);
	border-width: var(--spss-lp-button-border-width);
	border-color: var(--spss-lp-button-border-color);
	border-radius: var(--spss-lp-button-border-radius);
	text-transform: var(--spss-lp-button-text-style);
	font-weight: var(--spss-lp-button-text-weight);
	margin: var(--spss-lp-button-top-margin) 0 0 0;
	transition: var(--spss-lp-transition-all);
	height: 40px;
	min-height: 40px;
}

body.spss.new #custom-login-form button.submit-button:hover {
	color: var(--spss-lp-button-text-color-hover);
	background-color: var(--spss-lp-button-color-hover);
}

body.spss.new #nav {
	display: var(--spss-lp-footer-first-label-display);
	margin: var(--spss-lp-footer-label-margin);
	padding: var(--spss-lp-padding-zero);
}

body.spss.new #nav .wp-login-lost-password {
	color: var(--spss-lp-footer-text-color);
	font-size: var(--spss-lp-footer-label-font-size);
	transition: var(--spss-lp-transition-all);
}

body.spss.new #nav .wp-login-lost-password:hover {
	color: var(--spss-lp-footer-text-color-hover);
}

body.spss.new #backtoblog {
	display: var(--spss-lp-footer-second-label-display);
	margin: var(--spss-lp-footer-label-margin);
	padding: var(--spss-lp-padding-zero);
}

body.spss.new #backtoblog .wp-login-register {
	color: var(--spss-lp-footer-text-color);
	font-size: var(--spss-lp-footer-label-font-size);
	transition: var(--spss-lp-transition-all);
}

body.spss.new #backtoblog .wp-login-register:hover {
	color: var(--spss-lp-footer-text-color-hover);
}

body.spss.new .message-info,
body.spss.new .message-error {
	background-color: var(--spss-lp-notice-background-color);
	border-left-width: var(--spss-lp-notice-border-left-width);
	border-radius: var(--spss-lp-notice-border-radius);
	box-shadow: var(--spss-lp-box-shadow-style);
	border-top-color: var(--spss-lp-notice-border-color);
	border-right-color: var(--spss-lp-notice-border-color);
	border-bottom-color: var(--spss-lp-notice-border-color);
	border-top-width: var(--spss-lp-pixel-1);
	border-bottom-width: var(--spss-lp-pixel-1);
	border-right-width: var(--spss-lp-pixel-1);
	border-top-style: var(--spss-lp-border-solid);
	border-bottom-style: var(--spss-lp-border-solid);
	border-right-style: var(--spss-lp-border-solid);
}

body.spss.new .message-info {
	border-left-color: var(--spss-lp-notice-info-left-border-color);
}

body.spss.new .message-error {
	border-left-color: var(--spss-lp-notice-error-left-border-color);
}

body.spss.new .message-info p,
body.spss.new .message-error p {
	color: var(--spss-lp-notice-text-color);
	font-size: var(--spss-lp-notice-font-size);
}