:root {
  --notebook-login-wallpaper: url('/static/img/login-wallpaper.png');
  --notebook-login-overlay: 36;
}

body.notebook-login-page {
  background-image:
    linear-gradient(
      rgba(10, 18, 32, calc(var(--notebook-login-overlay) / 100)),
      rgba(10, 18, 32, calc(var(--notebook-login-overlay) / 100))
    ),
    var(--notebook-login-wallpaper) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

body.notebook-login-page #app,
body.notebook-login-page .login-container,
body.notebook-login-page .auth-shell,
body.notebook-login-page .auth-page {
  min-height: 100vh;
  background: transparent !important;
}

body.notebook-login-page .login-form-wrap,
body.notebook-login-page .auth-card,
body.notebook-login-page .auth-shell__form {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28) !important;
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
}

body.notebook-login-page .auth-shell__brand,
body.notebook-login-page .login-brand {
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.34);
}

body.notebook-login-page .auth-shell__brand .brand-panel {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.46), rgba(15, 23, 42, 0.16)) !important;
}

body.notebook-login-page .auth-shell__topbar,
body.notebook-login-page .auth-shell__footer {
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.42);
}

@media (max-width: 768px) {
  body.notebook-login-page {
    background-position: 60% center !important;
  }

  body.notebook-login-page .login-form-wrap,
  body.notebook-login-page .auth-card,
  body.notebook-login-page .auth-shell__form {
    background: rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
  }
}