:root {
  --mcr-yellow: #ffd21f;
  --mcr-yellow-hover: #ffe16c;
  --mcr-ink: #10120d;
  --mcr-panel: #1b2018;
  --mcr-border: #394331;
}
body.task-login {
  background: radial-gradient(circle at 80% 20%, #34331a, transparent 36%),
              radial-gradient(circle at 10% 80%, #1b2719, transparent 30%), var(--mcr-ink) !important;
  color: #f6f5ec;
}
body.task-login #layout-content { background: transparent !important; }
body.task-login #logo { top: 10vh; width: 180px; max-height: 180px; object-fit: contain; }
body.task-login #login-form {
  top: 12vh; max-width: 370px; padding: 25px;
  border: 1px solid var(--mcr-border); border-radius: 22px;
  background: var(--mcr-panel); box-shadow: 0 25px 70px #0007;
}
body.task-login #login-form:before {
  content: 'MCR BEE MAIL'; display: block; margin: 0 0 16px;
  color: var(--mcr-yellow); font-size: 1.15rem; font-weight: 900; letter-spacing: .12em;
}
body.task-login #login-form .input-group-text,
body.task-login #login-form .form-control {
  border-color: var(--mcr-border); background: #11150f; color: #fff;
}
body.task-login #login-form .form-control::placeholder { color: #aeb8a9; }
body.task-login #login-form .form-control:focus { border-color: var(--mcr-yellow); box-shadow: 0 0 0 .2rem #ffd21f33; }
body.task-login #rcmloginsubmit,
body.task-login .btn-primary,
.btn-primary {
  background: var(--mcr-yellow) !important; border-color: var(--mcr-yellow) !important;
  color: #111 !important; font-weight: 800;
}
body.task-login #rcmloginsubmit:hover, .btn-primary:hover { background: var(--mcr-yellow-hover) !important; }
body.task-login #login-footer { color: #c6c9b9; }
body.task-login #login-footer a { color: var(--mcr-yellow); }
body:not(.task-login) #layout-menu { background: #171d15 !important; }
body:not(.task-login) #layout-menu a.selected,
body:not(.task-login) #layout-menu a:hover { color: var(--mcr-yellow) !important; }
body:not(.task-login) #layout-content > .header,
body:not(.task-login) #layout-list > .header { border-bottom-color: var(--mcr-border); }
body:not(.task-login) a { color: #ad7900; }
body:not(.task-login) a:hover { color: #896000; }
@media (max-width: 600px) {
  body.task-login #logo { top: 5vh; width: 145px; max-height: 145px; }
  body.task-login #login-form { top: 6vh; width: calc(100% - 26px); padding: 20px; }
}