/**
 * Digital Brandhub login page.
 */


/* ==========================================================
   Page background
   ========================================================== */

body.login {
	position: relative;
	min-height: 100vh;
	min-height: 100dvh;
	background-color: #ffffff;
	background-image: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
    display: flex;
    flex-direction: column;
    padding: 0 40px 0 40px;
    align-items: center;
}

/**
 * Use the global Brandhub background color.
 */
body.login.dbhub-login--background-global {
	background-color: var(
		--dbhub-login-background-color,
		#f5f3ef
	);
	background-image: none;
    align-items: flex-start;
    padding: 0 40px 0 0;
}

/**
 * Use the customer-specific login background image.
 *
 * The global background color remains visible while the image loads.
 */
body.login.dbhub-login--background-image {
	background-color: var(
		--dbhub-login-background-color,
		#f5f3ef
	);
	background-image: var(
		--dbhub-login-background-image,
		none
	);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
    align-items: flex-start;
    padding: 0 40px 0 0;
}


@media screen and (max-width: 1024px) {
body.login.dbhub-login--background-global,
body.login.dbhub-login--background-image {
        align-items: center;
        padding: 0 40px 0 40px;
    }
}

@media screen and (max-width: 767px) {
body.login.dbhub-login--background-global,
body.login.dbhub-login--background-image {
        align-items: center;
        padding: 0;
    }
}


/**
 * Neutral login background.
 *
 * "No background" is represented by a plain white surface.
 */
body.login.dbhub-login--background-none {
	background-color: #ffffff;
	background-image: none;
}



/* ==========================================================
   Login container
   ========================================================== */

#login {
	width: 100%;
	max-width: 600px;
    background-color: white;
    margin: 0;
}

.login .language-switcher {
    width: 100%;
    max-width: 600px;
    background-color: white;
    margin: 0;
    flex-grow: 2;
}

.login p#nav,
.login .message,
.login .notice {
    padding: 0 80px;
}

form#language-switcher {
    padding: 0 80px;
    
}


select#language-switcher-locales {
    border: 2px solid black;
}

/* ==========================================================
   Login logo
   ========================================================== */

#login h1 a,
.login h1 a {
	width: 200px;
	height: 50px;
	padding-bottom: 10px;
	background-image: url("../img/DigitalBrandHub.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}


/* ==========================================================
   Login form
   ========================================================== */

#loginform,
#lostpasswordform,
#resetpassform,
#registerform {
	padding: 80px;
	border: none;
    box-shadow: none;
}

.login form label {
	color: #000000;
}

.login form input[type="text"],
.login form input[type="email"],
.login form input[type="password"] {
	border: 2px solid #000000;
	border-radius: 500px;
}

.login form .wp-hide-pw {
	color: #000000;
}

#loginform input[type="submit"],
#lostpasswordform input[type="submit"],
#resetpassform input[type="submit"],
#registerform input[type="submit"] {
	width: 100%;
	margin-top: 40px;
	border: none;
	border-radius: 50px;
	background-color: #000000;
}


/* ==========================================================
   Language switcher
   ========================================================== */

#language-switcher-locales {
	border: none;
	border-radius: 500px;
}

#language-switcher input[type="submit"] {
	border: 2px solid #000000;
	border-radius: 500px;
	color: #000000;
}


/* ==========================================================
   Login navigation
   ========================================================== */

.login #nav a,
.login #nav a.wp-login-lost-password,
.login #nav a.wp-login-log-in {
	color: #000000;
}


/* ==========================================================
   Service credit
   ========================================================== */

.login #backtoblog {
    padding: 0 80px;
}

#backtoblog a {
	color: #000000;
	text-decoration: none;
}

#backtoblog a:hover,
#backtoblog a:focus-visible {
	text-decoration: underline;
}


/* ==========================================================
   Lost-password page
   ========================================================== */

.login-action-lostpassword .notice {
	border: none;
	background-color: transparent;
}

.login-action-lostpassword .notice p {
	color: #000000;
}


/* ==========================================================
   Responsive
   ========================================================== */

@media screen and (max-width: 767px) {
	body.login {
		padding-inline: 0;
	}

    .login .language-switcher {
        padding: 0;
    }

	#loginform,
	#lostpasswordform,
	#resetpassform,
	#registerform,
    .login #backtoblog,
    .login #language-switcher,
    .login p#nav
     {
		padding: 0 20px;
	}
}