/*
* Styles for user creation, change password, etc. forms
*/

.system-message-wrapper {
max-width: 460px;
}

#auth {
padding: 1.32em 0 5.2em 0;
max-width: 780px;
margin: 0 auto;
}

#auth h1 {
margin: 0 auto 1.2em auto;
text-align: center;
font-weight: normal;
font-size: 1.32em;
line-height: 1.4em;
}

#auth p {
padding-left: 0.8em;
padding-right: 0.8em;
line-height: 1.6em;
text-indent: 1.6em;
}

#auth p.center {
text-indent: 0;
text-align: center;
}

#auth a {
color: var(--link-color);
text-decoration: none;
}

#auth a:hover {
text-decoration: underline;
}

#auth a:visited {
color: var(--link-color);
}

#auth-form {
width: max-content;
margin: 2em auto 5.2em auto;
padding-left: 0.8em;
padding-right: 0.8em;
}

#auth-form label {
display: block;
margin-top: 0.32em;
margin-bottom: 0.2em;
width: 272px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

#auth-form .input {
font: inherit;
display: block;
padding: 0.6em 0.5em 0.5em 0.5em;
border-radius: 4px;
width: 260px;
box-shadow: var(--form-shadow);
border: var(--form-border);
}

#auth-form .input:focus {
outline: 0;
border-color: var(--form-focus-color);
}

.show-password {
position: relative;
}

.show-password span {
display: block;
position: absolute;
right: 0.1em;
top: 0.1em;
bottom: 0;
z-index: 100;
cursor: pointer;
width: 2em;
background-position: center;
background-repeat: no-repeat;
background-size: 1.4em 1.4em;
background-image: url("/svg/profile/visibility.svg");
}

.show-password span.show-password-off {
background-image: url("/svg/profile/visibility-off.svg");
}

#auth-form .show-pwd {
padding-right: 2.5em;
width: calc(260px - 2em);
}

button {
font: inherit;
display: inline-block;
margin-top: 1.4em;
cursor: pointer;
border-radius: 5px;
padding: 0.6em 1.2em;
color: var(--form-button-color);
background: var(--form-button-bg-color);
border: none;
}

button:hover {
background: var(--form-button-hover-color);
}

button:focus {
outline: 0;
}

button:disabled {
color: var(--form-button-disabled-color);
background: var(--form-button-bg-disabled-color);
cursor: unset;
}

button:disabled:hover {
background: var(--form-button-bg-disabled-color);
}

.ierror {
background: var(--form-error-color);
border-color: var(--error-color);
}

.input-error {
display: block;
margin-left: 0.12em;
font-size: 0.78em;
font-weight: bold;
color: var(--error-color);
height: 1.52em;
line-height: 1.52em;
width: 272px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.links {
margin-top: 2.2em;
line-height: 1.8em;
}

.links a {
margin-left: auto;
margin-right: auto;
display: block;
width: max-content;
white-space: nowrap;
}

#create-account-link {
font-size: 1.2em;
}

#reset-password-link {
margin-top: 0.92em;
font-size: 0.92em;
}

.gdpr {
margin-top: -2.2em;
line-height: 1.12em;
padding-left: 0.52em;
padding-right: 0.52em;
}

.gdpr span {
display: block;
font-size: 0.82em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

::-webkit-input-placeholder {
color: var(--form-placeholder-color);
}
:-moz-placeholder {
color: var(--form-placeholder-color);
}
::-moz-placeholder {
color: var(--form-placeholder-color);
}
:-ms-input-placeholder {
color: var(--form-placeholder-color);
}
:placeholder {
color: var(--form-placeholder-color);
}


#auth-form #remembermed {
text-align: center;
margin: 0.8em auto 0 auto;
width: max-content;
}

#auth-form #remembermel {
display: block;
margin: 0;
width: unset;
white-space: unset;
overflow: unset;
text-overflow: unset;
}