/* Loginizer login page layouts. Small screens keep the default centered layout. */
@media screen and (min-width: 783px) {
/* A column: #login grows to fill the screen, the language switcher follows it inside the panel */
body.lz-panel {
display: flex;
flex-direction: column;
align-items: flex-start;
height: auto; /* core fixes it at 100% */
min-height: 100vh;
}
body.lz-layout-right {
align-items: flex-end;
}
/* #login and the switcher together form the panel */
.lz-panel #login,
.lz-panel .language-switcher {
/* !important beats the captcha's own #login width override */
width: 420px !important;
max-width: 100%;
margin: 0;
box-sizing: border-box;
background: var(--lz-panel-bg, #fff);
color: var(--lz-panel-text, inherit);
}
.lz-panel #login {
flex: 1 0 auto;
padding: 10vh 48px 48px !important;
}
.lz-panel .language-switcher {
padding: 0 48px 24px;
}
/* With a custom panel width the fields stay a comfortable width in its middle */
.lz-panel #login > * {
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.lz-panel #login form {
padding-left: 0;
padding-right: 0;
background: transparent;
border: 0;
box-shadow: none;
}
.lz-panel #nav,
.lz-panel #backtoblog {
padding-left: 0;
padding-right: 0;
}
}