/* Generated by configure_theme.py, do not edit. */
body:has(#page-login) {
  --cw-main: #3366FF;
  --cw-on-main: #FFFFFF;
  --cw-accent: #DD9E0D;
  --cw-on-accent: #0F2260;
  --cw-card: #FFFFFF;
  --cw-line: #D9DCE6;
  --cw-muted: #52608D;
  --cw-text: #0F2260;
}
@media (prefers-color-scheme: dark) {
  body:has(#page-login) {
    --cw-card: #2E3F75;
    --cw-line: #52608D;
    --cw-muted: #BCC1D2;
    --cw-text: #FFFFFF;
  }
}

body:has(#page-login) {
  background: var(--cw-main);
  isolation: isolate;
}

body:has(#page-login)::before,
body:has(#page-login)::after {
  content: "";
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

body:has(#page-login)::before {
  width: 70vmax;
  height: 70vmax;
  inset-inline-end: -22vmax;
  inset-block-start: -28vmax;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cw-accent) 40%, transparent), transparent);
  animation: cw-login-glow-a 18s ease-in-out infinite;
}

body:has(#page-login)::after {
  width: 60vmax;
  height: 60vmax;
  inset-inline-start: -20vmax;
  inset-block-end: -30vmax;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cw-accent) 22%, transparent), transparent);
  animation: cw-login-glow-b 18s ease-in-out infinite;
}

@keyframes cw-login-glow-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30%, 18%) scale(1.12); }
}

@keyframes cw-login-glow-b {
  0%, 100% { transform: translate(0, 0); opacity: .7; }
  50% { transform: translate(35%, -20%); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  body:has(#page-login)::before,
  body:has(#page-login)::after {
    animation: none;
  }
}

body:has(#page-login) .navbar,
body:has(#page-login) .web-footer,
#page-login .page-breadcrumbs,
#page-login .page-header-wrapper {
  display: none;
}

#page-login,
#page-login .page-content-wrapper,
#page-login main.container,
#page-login .page_content,
#page-login .page_content > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

#page-login section.for-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 100px 16px 48px;
}

/* Without a logo from the settings the card stands alone; ERPNext's own mark is at the top left. */
#page-login section.for-login:has(img.app-logo:is([src$="/frappe-framework-logo.svg"], [src$="/erpnext-logo.svg"])) {
  padding-top: 48px;
}

#page-login::before,
#page-login::after {
  position: fixed;
  inset-block-start: 20px;
  height: 28px;
}

/* ERPNext's mark in the page's text colour with the E cut out, never its own blue. */
#page-login::before {
  content: "";
  inset-inline-start: 24px;
  width: 28px;
  background: var(--cw-on-main);
  mask-image: url("/assets/erpnext/images/erpnext-favicon.svg"), url("/assets/erpnext/images/erpnext-favicon.svg");
  mask-mode: alpha, luminance;
  mask-composite: subtract;
  mask-size: contain;
  mask-repeat: no-repeat;
}

#page-login::after {
  content: "ERPNext";
  inset-inline-start: 60px;
  color: var(--cw-on-main);
  font: 600 19px/28px var(--cw-login-title-font, var(--font-stack, system-ui, sans-serif));
}

@media (max-width: 600px) {
  #page-login::before,
  #page-login::after {
    inset-block-start: 12px;
  }

  #page-login::before {
    inset-inline-start: 16px;
  }

  #page-login::after {
    inset-inline-start: 52px;
  }
}

#page-login .login-content.page-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 544px;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 48px;
  border: 0;
  border-top: 4px solid var(--cw-accent);
  border-radius: 0;
  background: var(--cw-card);
  color: var(--cw-text);
}

#page-login .login-content .app-logo {
  position: absolute;
  top: -100px;
  left: 50%;
  width: auto;
  height: 52px;
  transform: translateX(-50%);
}

#page-login .login-content .app-logo:is([src$="/frappe-framework-logo.svg"], [src$="/erpnext-logo.svg"]) {
  display: none;
}

/* Unwrap form and actions so single sign-on can come right after the title. */
#page-login .login-content form.form-login,
#page-login .login-content .page-card-actions {
  display: contents;
}

#page-login .login-content .page-card-head {
  order: 0;
  margin-bottom: 24px;
  padding: 0;
}

#page-login .login-content .page-card-head h4 {
  font-family: var(--cw-login-title-font, inherit);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--cw-text);
}

#page-login .login-content .page-card-subtitle {
  color: var(--cw-muted);
}

#page-login .login-content .page-card-actions > * {
  order: 3;
}

#page-login .login-content .social-logins {
  order: 1;
  width: 100%;
  margin: 0 0 24px;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--cw-line);
}

#page-login .login-content .social-logins > :not(.social-login-buttons) {
  display: none;
}

#page-login .login-content .social-login-buttons,
#page-login .login-content .login-button-wrapper {
  width: 100%;
  margin: 0;
  padding: 0;
}

#page-login .login-content .social-login-buttons a.btn-login-option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 3px;
  background: var(--cw-accent);
  color: var(--cw-on-accent);
  font-weight: 600;
}

#page-login .login-content .login-button-wrapper:only-child a.btn-login-option {
  font-size: 0;
}

#page-login .login-content .login-button-wrapper:only-child a.btn-login-option::after {
  content: "Sign in with Keycloak";
  font-size: 15px;
}

html:lang(de) #page-login .login-content .login-button-wrapper:only-child a.btn-login-option::after {
  content: "Mit Keycloak anmelden";
}

#page-login .login-content .page-card-body {
  order: 2;
  padding: 0;
}

#page-login .login-content button.es-button {
  order: 3;
  height: 40px;
  margin-top: 16px;
  border: 1px solid var(--cw-line);
  border-radius: 3px;
  background: transparent;
  color: var(--cw-text);
}

#page-login .login-content label,
#page-login .login-content a {
  color: var(--cw-text);
}

#page-login .login-content .form-control {
  height: 36px;
  border: 1px solid var(--cw-line);
  border-radius: 3px;
  background: var(--cw-card);
  color: var(--cw-text);
}

#page-login .login-content .form-control::placeholder {
  color: var(--cw-muted);
}