/* Stadt Leipzig — Wiki.js Login & Error-Screen Styling
 *
 * WARUM DIESE DATEI EXISTIERT:
 * Die Login-, Register- und Fehlerseiten von Wiki.js werden in einer eigenen
 * Server-Shell gerendert (<div id="root" class="is-fullscreen"><login></login></div>)
 * und laden das Theming "CSS überschreiben" (injectCSS) NICHT. Deshalb wirkt das
 * normale CSS-Override dort nicht — dieses Stylesheet muss per nginx sub_filter
 * direkt in die Login-Shell injiziert werden (siehe nginx-login-inject.conf).
 *
 * Inhalt extrahiert aus dem Live-Theming injectCSS (source of truth):
 *   :root-Variablen, @font-face, alle .login* / .app-error* / #root.is-fullscreen-Regeln.
 */

@font-face {
  font-family: "Leipzig Sans";
  src: url("/_assets/fonts/sl-leipzigsans-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap
}
:root {
  --sl-green: #237f52;
  --sl-green-dark: #1f754b;
  --sl-green-soft: #328b61;
  --sl-blue: #173f9f;
  --sl-ink: #202033;
  --sl-muted: #7a7d99;
  --sl-line: #c8ccdc;
  --sl-page: #f4f6f8;
  --sl-card: #ffffff;
  --sl-font: "Leipzig Sans","Source Sans 3","Segoe UI",Roboto,Arial,sans-serif;
  --sl-logo-url: url("/_assets/svg/sl-stadt-leipzig-logo.svg")
}
.login {
  display: flex!important;
  align-items: center!important;
  justify-content: center!important;
  min-height: 100vh!important;
  background-color: var(--sl-green)!important;
  background-image: none!important;
  background-size: cover!important;
  background-position: center!important;
  overflow: auto!important;
  padding: 42px 18px 66px!important;
  position: relative!important
}
.login::after,
.login::before {
  content: ""!important;
  position: fixed!important;
  pointer-events: none!important;
  opacity: .36!important
}
.login::before {
  right: 0!important;
  top: 0!important;
  width: 340px!important;
  height: 250px!important;
  background: linear-gradient(90deg,transparent 0 40%,rgba(255,255,255,.12) 40% 100%),linear-gradient(180deg,rgba(255,255,255,.12) 0 40%,transparent 40% 100%)!important
}
.login::after {
  left: 0!important;
  bottom: 0!important;
  width: 250px!important;
  height: 250px!important;
  background: linear-gradient(90deg,rgba(255,255,255,.12) 0 60%,transparent 60% 100%),linear-gradient(180deg,transparent 0 40%,rgba(255,255,255,.12) 40% 100%)!important
}
.login-sd {
  width: min(100%,448px)!important;
  height: auto!important;
  min-height: 560px!important;
  margin: 0!important;
  padding: 52px!important;
  background: var(--sl-card)!important;
  border: 0!important;
  border-radius: 5px!important;
  box-shadow: 0 18px 44px rgba(17,30,24,.18)!important;
  backdrop-filter: none!important;
  -webkit-backdrop-filter: none!important;
  position: relative!important;
  z-index: 1!important
}
.login-logo {
  width: 58px!important;
  height: 58px!important;
  margin: 0 12px 0 0!important;
  padding: 0!important;
  display: flex!important;
  align-items: center!important;
  justify-content: center!important;
  background: var(--sl-logo-url) center/contain no-repeat!important;
  border-radius: 0!important
}
.login-logo .v-avatar {
  border-radius: 0!important
}
.login-logo .v-image,
.login-logo img {
  opacity: 0!important
}
.login-title {
  height: 58px!important;
  padding-left: 0!important;
  text-shadow: none!important
}
.login-title .text-h6 {
  color: var(--sl-ink)!important;
  font-size: 24px!important;
  font-weight: 800!important;
  line-height: 1.15!important
}
.login-subtitle {
  margin: 24px 0 18px!important;
  padding: 0!important;
  color: var(--sl-muted)!important;
  background: 0 0!important;
  border: 0!important;
  text-align: left!important;
  text-shadow: none!important
}
.login-subtitle .text-subtitle-1 {
  color: var(--sl-muted)!important;
  font-size: 14px!important;
  font-weight: 700!important
}
.login-form,
.login-info,
.login-list {
  padding: 0!important;
  border-top: 0!important;
  background: 0 0!important;
  color: var(--sl-ink)!important;
  text-align: left!important
}
.login-form .v-text-field {
  margin-top: 12px!important
}
.login-form .v-input__slot,
.login-tfa-field .v-input__slot {
  min-height: 48px!important;
  background: #fbfbfc!important;
  border: 2px solid var(--sl-line)!important;
  border-radius: 3px!important;
  box-shadow: none!important
}
.login-form .v-input--is-focused .v-input__slot,
.login-tfa-field.v-input--is-focused .v-input__slot {
  border-color: var(--sl-green)!important;
  box-shadow: 0 0 0 3px rgba(35,127,82,.16)!important
}
.login-form input,
.login-tfa-field input {
  color: var(--sl-ink)!important;
  font-weight: 700!important
}
.login-form .v-icon,
.login-tfa-field .v-icon {
  color: var(--sl-ink)!important
}
.login-form .v-btn,
.login-tfa .v-btn {
  min-height: 52px!important;
  margin-top: 18px!important;
  color: #fff!important;
  background: var(--sl-green)!important;
  border-radius: 3px!important;
  font-size: 15px!important;
  font-weight: 800!important;
  text-transform: none!important;
  box-shadow: none!important
}
.login-form .v-btn:hover,
.login-tfa .v-btn:hover {
  background: var(--sl-green-dark)!important
}
.login-form .text-center .v-btn {
  min-height: 32px!important;
  margin-top: 10px!important;
  color: var(--sl-green)!important;
  background: 0 0!important
}
.login-tfa {
  background: #f4f6f8!important;
  border: 7px solid #fff!important;
  border-radius: 5px!important
}
#root.is-fullscreen,
.app-error {
  min-height: 100vh!important
}
.app-error {
  display: flex!important;
  flex-direction: column!important;
  align-items: center!important;
  justify-content: center!important;
  padding: 42px 18px!important;
  background: var(--sl-green)!important;
  color: var(--sl-ink)!important;
  text-align: center!important
}
.app-error > a,
.app-error > pre,
.app-error > span,
.app-error > strong {
  width: min(100%,448px)!important;
  background: #fff!important
}
.app-error > a {
  min-height: 124px!important;
  padding: 52px 52px 18px!important;
  background: #fff var(--sl-logo-url) center 52px/76px auto no-repeat!important;
  border-radius: 5px 5px 0 0!important
}
.app-error img {
  max-width: 76px!important;
  opacity: 0!important
}
.app-error > strong {
  padding: 8px 52px 0!important;
  color: var(--sl-ink)!important;
  font-size: 24px!important;
  font-weight: 800!important
}
.app-error > span {
  padding: 10px 52px 52px!important;
  border-radius: 0 0 5px 5px!important;
  color: var(--sl-muted)!important;
  font-size: 15px!important;
  font-weight: 700!important;
  box-shadow: 0 18px 44px rgba(17,30,24,.18)!important
}
.app-error > pre {
  margin-top: 18px!important;
  padding: 16px!important;
  overflow: auto!important;
  color: #7b1f32!important;
  background: #fff7f8!important;
  border-radius: 5px!important;
  text-align: left!important
}
#root.is-fullscreen,
#root.is-fullscreen .v-application,
#root.is-fullscreen .v-application--wrap {
  min-height: 100vh!important;
  background: var(--sl-page)!important;
  background-color: var(--sl-page)!important;
  background-image: none!important
}
#root.is-fullscreen .newpage,
#root.is-fullscreen .notfound,
#root.is-fullscreen .unauthorized {
  display: flex!important;
  align-items: center!important;
  justify-content: center!important;
  min-height: 100vh!important;
  padding: 42px 18px!important;
  background: var(--sl-page)!important;
  background-color: var(--sl-page)!important;
  background-image: none!important;
  color: var(--sl-ink)!important
}
#root.is-fullscreen .newpage:after,
#root.is-fullscreen .newpage:before,
#root.is-fullscreen .notfound:after,
#root.is-fullscreen .notfound:before,
#root.is-fullscreen .unauthorized:after,
#root.is-fullscreen .unauthorized:before {
  display: none!important;
  content: none!important;
  background: 0 0!important
}
#root.is-fullscreen .newpage-content,
#root.is-fullscreen .notfound-content,
#root.is-fullscreen .unauthorized-content {
  display: flex!important;
  flex-direction: column!important;
  align-items: flex-start!important;
  width: min(100%,448px)!important;
  padding: 52px!important;
  background: var(--sl-card)!important;
  background-color: var(--sl-card)!important;
  border: 1px solid #e1e5ee!important;
  border-radius: 5px!important;
  box-shadow: 0 18px 44px rgba(17,30,24,.18)!important;
  color: var(--sl-ink)!important;
  text-align: left!important
}
#root.is-fullscreen .newpage-content img,
#root.is-fullscreen .notfound-content img,
#root.is-fullscreen .unauthorized-content img {
  width: 76px!important;
  height: 76px!important;
  max-width: 76px!important;
  margin: 0 0 30px!important;
  padding: 14px!important;
  background: var(--sl-green)!important;
  border-radius: 5px!important;
  filter: none!important;
  animation: none!important
}
#root.is-fullscreen .newpage .headline,
#root.is-fullscreen .notfound .headline,
#root.is-fullscreen .unauthorized .headline {
  margin: 0 0 10px!important;
  color: var(--sl-ink)!important;
  font-family: var(--sl-font)!important;
  font-size: 24px!important;
  font-weight: 800!important;
  line-height: 1.2!important;
  letter-spacing: 0!important
}
#root.is-fullscreen .newpage .subtitle-1,
#root.is-fullscreen .notfound .subtitle-1,
#root.is-fullscreen .unauthorized .subtitle-1 {
  margin: 0 0 30px!important;
  color: var(--sl-muted)!important;
  font-family: var(--sl-font)!important;
  font-size: 15px!important;
  font-weight: 700!important;
  line-height: 1.45!important;
  letter-spacing: 0!important
}
#root.is-fullscreen .newpage .v-btn,
#root.is-fullscreen .notfound .v-btn,
#root.is-fullscreen .unauthorized .v-btn {
  min-height: 44px!important;
  margin-top: 0!important;
  border-radius: 3px!important;
  box-shadow: none!important;
  font-family: var(--sl-font)!important;
  font-size: 15px!important;
  font-weight: 800!important;
  letter-spacing: 0!important;
  text-indent: 0!important;
  text-transform: none!important
}
#root.is-fullscreen .newpage .v-btn + .v-btn,
#root.is-fullscreen .notfound .v-btn + .v-btn,
#root.is-fullscreen .unauthorized .v-btn + .v-btn {
  margin-top: 12px!important
}
#root.is-fullscreen .newpage .v-btn.v-btn--contained,
#root.is-fullscreen .notfound .v-btn.v-btn--contained,
#root.is-fullscreen .unauthorized .v-btn.v-btn--contained {
  background: var(--sl-green)!important;
  background-color: var(--sl-green)!important;
  color: #fff!important
}
#root.is-fullscreen .newpage .v-btn.v-btn--contained:hover,
#root.is-fullscreen .notfound .v-btn.v-btn--contained:hover,
#root.is-fullscreen .unauthorized .v-btn.v-btn--contained:hover {
  background: var(--sl-green-dark)!important;
  background-color: var(--sl-green-dark)!important
}
#root.is-fullscreen .newpage .v-btn.v-btn--outlined,
#root.is-fullscreen .notfound .v-btn.v-btn--outlined,
#root.is-fullscreen .unauthorized .v-btn.v-btn--outlined {
  background: #edf7f2!important;
  background-color: #edf7f2!important;
  border-color: #d7e9df!important;
  color: var(--sl-green-dark)!important
}
#root.is-fullscreen .newpage .v-btn .v-btn__content,
#root.is-fullscreen .newpage .v-btn .v-icon,
#root.is-fullscreen .notfound .v-btn .v-btn__content,
#root.is-fullscreen .notfound .v-btn .v-icon,
#root.is-fullscreen .unauthorized .v-btn .v-btn__content,
#root.is-fullscreen .unauthorized .v-btn .v-icon {
  color: inherit!important;
  letter-spacing: 0!important
}
#root.is-fullscreen .newpage .v-btn:after,
#root.is-fullscreen .newpage .v-btn:before,
#root.is-fullscreen .notfound .v-btn:after,
#root.is-fullscreen .notfound .v-btn:before,
#root.is-fullscreen .unauthorized .v-btn:after,
#root.is-fullscreen .unauthorized .v-btn:before {
  opacity: 0!important
}
#root.is-fullscreen .login {
  display: flex!important;
  align-items: center!important;
  justify-content: center!important;
  min-height: 100vh!important;
  padding: 42px 18px 66px!important;
  background: var(--sl-green)!important;
  background-color: var(--sl-green)!important;
  background-image: none!important;
  color: var(--sl-ink)!important;
  overflow: hidden!important;
  position: relative!important
}
#root.is-fullscreen .login::after,
#root.is-fullscreen .login::before {
  display: block!important;
  content: ""!important;
  position: fixed!important;
  pointer-events: none!important;
  z-index: 0!important;
  opacity: .34!important;
  background: 0 0!important
}
#root.is-fullscreen .login::before {
  top: 0!important;
  right: 0!important;
  width: min(28vw,340px)!important;
  height: min(34vw,340px)!important;
  border-left: 136px solid rgba(255,255,255,.14)!important;
  border-bottom: 136px solid rgba(255,255,255,.14)!important
}
#root.is-fullscreen .login::after {
  left: 0!important;
  bottom: 0!important;
  width: min(25vw,260px)!important;
  height: min(25vw,260px)!important;
  border-top: 152px solid rgba(255,255,255,.14)!important;
  border-right: 152px solid rgba(255,255,255,.14)!important
}
#root.is-fullscreen .login-sd {
  width: min(100%,448px)!important;
  min-height: 0!important;
  height: auto!important;
  margin: 0!important;
  padding: 46px!important;
  background: var(--sl-card)!important;
  background-color: var(--sl-card)!important;
  border: 1px solid #e1e5ee!important;
  border-radius: 5px!important;
  box-shadow: 0 18px 44px rgba(17,30,24,.18)!important;
  color: var(--sl-ink)!important;
  position: relative!important;
  z-index: 1!important
}
#root.is-fullscreen .login-sd > .d-flex.mb-5 {
  align-items: center!important;
  margin-bottom: 32px!important
}
#root.is-fullscreen .login-logo {
  flex: 0 0 64px!important;
  width: 64px!important;
  height: 64px!important;
  margin-right: 16px!important;
  background: var(--sl-logo-url) center/contain no-repeat!important
}
#root.is-fullscreen .login-logo .v-avatar,
#root.is-fullscreen .login-logo .v-image {
  width: 64px!important;
  height: 64px!important;
  min-width: 64px!important;
  opacity: 0!important
}
#root.is-fullscreen .login-title {
  display: flex!important;
  align-items: center!important;
  min-height: 64px!important;
  height: auto!important
}
#root.is-fullscreen .login-title .grey--text.text--darken-4,
#root.is-fullscreen .login-title .text-h6 {
  color: var(--sl-ink)!important;
  font-family: var(--sl-font)!important;
  font-size: 23px!important;
  font-weight: 800!important;
  line-height: 1.18!important;
  letter-spacing: 0!important
}
#root.is-fullscreen .login-subtitle {
  margin: 24px 0 12px!important;
  color: var(--sl-muted)!important;
  text-align: left!important
}
#root.is-fullscreen .login-subtitle .text-subtitle-1 {
  color: var(--sl-muted)!important;
  font-family: var(--sl-font)!important;
  font-size: 14px!important;
  font-weight: 800!important;
  line-height: 1.35!important;
  letter-spacing: 0!important
}
#root.is-fullscreen .login-list .v-list {
  padding: 6px!important;
  background: #fbfbfc!important;
  background-color: #fbfbfc!important;
  border: 1px solid #e1e5ee!important;
  border-radius: 5px!important;
  box-shadow: none!important
}
#root.is-fullscreen .login-list .v-list-item {
  min-height: 48px!important;
  margin: 0!important;
  padding: 0 12px!important;
  border-radius: 3px!important;
  color: var(--sl-ink)!important;
  font-family: var(--sl-font)!important;
  font-size: 14px!important;
  font-weight: 800!important;
  letter-spacing: 0!important
}
#root.is-fullscreen .login-list .v-list-item + .v-list-item {
  margin-top: 4px!important
}
/* Nur der wirklich ausgewaehlte Eintrag wird gruen hinterlegt.
   NICHT .primary--text mitnehmen: Vuetify laesst diese Klasse dauerhaft am
   Eintrag der lokalen Strategie haengen (color="primary"), unabhaengig von der
   Auswahl — damit sahen beide Provider gleichzeitig ausgewaehlt aus. */
#root.is-fullscreen .login-list .v-list-item.v-item--active,
#root.is-fullscreen .login-list .v-list-item.v-list-item--active,
#root.is-fullscreen .login-list .v-list-item[aria-selected="true"] {
  background: #edf7f2!important;
  background-color: #edf7f2!important;
  color: var(--sl-green-dark)!important
}
#root.is-fullscreen .login-list .v-list-item:after,
#root.is-fullscreen .login-list .v-list-item:before {
  opacity: 0!important
}
#root.is-fullscreen .login-list .v-avatar {
  color: var(--sl-green)!important
}
#root.is-fullscreen .login-list .v-avatar svg {
  width: 24px!important;
  height: 24px!important;
  fill: currentColor!important
}
#root.is-fullscreen .login-list .v-avatar svg path {
  fill: currentColor!important
}
#root.is-fullscreen .login-form {
  padding: 0!important
}
#root.is-fullscreen .login-form .v-text-field {
  margin-top: 10px!important
}
#root.is-fullscreen .login-form .v-input__slot,
#root.is-fullscreen .login-form .v-input__slot.white,
#root.is-fullscreen .login-tfa-field .v-input__slot {
  min-height: 48px!important;
  background: #fbfbfc!important;
  background-color: #fbfbfc!important;
  border: 2px solid var(--sl-line)!important;
  border-radius: 3px!important;
  box-shadow: none!important
}
#root.is-fullscreen .login-form .v-input--is-focused .v-input__slot,
#root.is-fullscreen .login-tfa-field.v-input--is-focused .v-input__slot {
  border-color: var(--sl-green)!important;
  box-shadow: 0 0 0 3px rgba(35,127,82,.16)!important
}
#root.is-fullscreen .login-form input {
  color: var(--sl-ink)!important;
  font-family: var(--sl-font)!important;
  font-size: 15px!important;
  font-weight: 700!important
}
#root.is-fullscreen .login-form input::placeholder {
  color: #8e95a3!important;
  opacity: 1!important
}
#root.is-fullscreen .login-form .v-icon,
#root.is-fullscreen .login-form .v-icon.v-icon--link {
  color: var(--sl-ink)!important
}
#root.is-fullscreen .login-form .v-btn.v-btn--contained,
#root.is-fullscreen .login-form button.v-btn.blue.darken-2,
#root.is-fullscreen .login-tfa .v-btn.v-btn--contained {
  width: 100%!important;
  min-height: 50px!important;
  margin-top: 14px!important;
  background: var(--sl-green)!important;
  background-color: var(--sl-green)!important;
  border-radius: 3px!important;
  box-shadow: none!important;
  color: #fff!important;
  font-family: var(--sl-font)!important;
  font-size: 15px!important;
  font-weight: 800!important;
  letter-spacing: 0!important;
  text-indent: 0!important;
  text-transform: none!important
}
#root.is-fullscreen .login-form .v-btn.v-btn--contained:hover,
#root.is-fullscreen .login-form button.v-btn.blue.darken-2:hover,
#root.is-fullscreen .login-tfa .v-btn.v-btn--contained:hover {
  background: var(--sl-green-dark)!important;
  background-color: var(--sl-green-dark)!important
}
#root.is-fullscreen .login-form .v-btn .v-btn__content,
#root.is-fullscreen .login-tfa .v-btn .v-btn__content {
  color: inherit!important;
  letter-spacing: 0!important
}
#root.is-fullscreen .login-form .text-center {
  margin-top: 18px!important
}
#root.is-fullscreen .login-form .text-center .grey--text.text--darken-3,
#root.is-fullscreen .login-form .text-center .v-btn {
  min-height: 32px!important;
  margin-top: 0!important;
  padding: 0 8px!important;
  background: 0 0!important;
  color: var(--sl-green-dark)!important;
  box-shadow: none!important;
  font-family: var(--sl-font)!important;
  font-weight: 800!important;
  letter-spacing: 0!important;
  text-transform: none!important
}
#root.is-fullscreen .login-form .text-center .caption {
  color: inherit!important;
  font-size: 13px!important;
  font-weight: 800!important;
  letter-spacing: 0!important
}
#root.is-fullscreen .login .v-alert {
  margin: 0 0 18px!important;
  background: #fff4f4!important;
  background-color: #fff4f4!important;
  border: 1px solid #ffd4d4!important;
  border-left: 4px solid #b8212b!important;
  border-radius: 3px!important;
  color: #7b1f32!important
}
#root.is-fullscreen .login .v-alert .v-alert__content,
#root.is-fullscreen .login .v-alert .v-alert__icon {
  color: #7b1f32!important
}