:root {
  --qilin-teal: #087f73;
  --qilin-teal-dark: #075f57;
  --qilin-ink: #1f2933;
  --qilin-border: #d7dee5;
}

body.task-login {
  background: #f4f7f8;
  color: var(--qilin-ink);
}

body.task-login #layout-content {
  background: #f4f7f8;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.task-login #logo {
  background: none !important;
  display: block !important;
  height: auto;
  margin: 0 auto 28px;
  max-width: 80%;
  width: 250px;
}

body.task-login #login-form {
  background: #ffffff;
  border: 1px solid var(--qilin-border);
  border-radius: 6px;
  box-shadow: 0 16px 38px rgba(31, 41, 51, 0.12);
  box-sizing: border-box;
  max-width: 380px;
  padding: 34px 32px 28px;
  width: calc(100vw - 32px);
}

body.task-login #login-form .input-group,
body.task-login #login-form .form-control,
body.task-login #rcmloginsubmit {
  min-height: 46px;
}

body.task-login #login-footer {
  color: #63717d;
  margin-top: 20px;
}

.btn-primary,
button.mainaction {
  background-color: var(--qilin-teal) !important;
  border-color: var(--qilin-teal) !important;
}

.btn-primary:hover,
button.mainaction:hover {
  background-color: var(--qilin-teal-dark) !important;
  border-color: var(--qilin-teal-dark) !important;
}

a,
.listing li.selected > a,
.menu a:hover {
  color: var(--qilin-teal-dark);
}

@media (max-width: 600px) {
  body.task-login #login-form {
    box-shadow: none;
    padding: 30px 24px 24px;
  }
}