:root {
  color-scheme: dark;
  --nio-bg: #0A0B0E;
  --nio-surface: #12141A;
  --nio-input: #0F1116;
  --nio-border: #2B303B;
  --nio-text: #F7F8FA;
  --nio-muted: #8C94A3;
  --nio-blue: #4F7CFF;
  --nio-violet: #7B61FF;
}

html,
html.dark-mode,
body,
html.dark-mode body {
  background: var(--nio-bg) !important;
  color: var(--nio-text) !important;
}

.task-login #layout-content {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0, rgba(79, 124, 255, .15), transparent 38%),
    var(--nio-bg) !important;
}

.task-login #logo {
  top: 12vh;
  width: min(360px, 76vw);
  max-width: none;
  max-height: 112px;
  opacity: 1 !important;
}

#login-form {
  top: 16vh;
  max-width: 380px;
  padding: 30px;
  background: rgba(18, 20, 26, .94);
  border: 1px solid var(--nio-border);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .42);
  backdrop-filter: blur(18px);
}

#login-form .input-group-text,
#login-form .form-control {
  color: var(--nio-text) !important;
  background: var(--nio-input) !important;
  border-color: var(--nio-border) !important;
}

#login-form .form-control:focus {
  border-color: var(--nio-blue) !important;
  box-shadow: 0 0 0 .16rem rgba(79, 124, 255, .24) !important;
}

#rcmloginsubmit,
.btn-primary,
.button.mainaction {
  color: #fff !important;
  background: linear-gradient(135deg, var(--nio-blue), var(--nio-violet)) !important;
  border-color: transparent !important;
  border-radius: 12px !important;
}

#login-footer {
  color: var(--nio-muted) !important;
}

#layout-menu,
#layout-sidebar,
#layout-list,
#layout-content,
#layout > div > .header,
#layout > div > .footer {
  background-color: var(--nio-surface) !important;
  border-color: var(--nio-border) !important;
}

#layout-list,
#layout-content {
  background-color: var(--nio-bg) !important;
}

a,
.listing li.selected > a,
.listing li > a:hover {
  color: #7EA0FF;
}

@media screen and (max-height: 680px) {
  .task-login #logo {
    top: 7vh;
  }

  #login-form {
    top: 10vh;
  }
}