/* DRAMS palette; scoped to application chrome, never message content. */
:root { --drams-navy:#071f46; --drams-teal:#008774; --drams-green:#00b798; }
body.task-login {
  background:radial-gradient(ellipse at 15% 10%,#16466a 0,transparent 48%),linear-gradient(135deg,#071f46,#0b2b46 65%,#064a48);
}
body.task-login #layout-content {
  width:calc(100% - 32px); max-width:460px; margin:clamp(24px,7vh,80px) auto;
  padding:36px 40px 24px; border:1px solid #dce7eb; border-top:4px solid var(--drams-green);
  border-radius:18px; background:#fff; color:#23364b; box-shadow:0 24px 70px #0004;
}
body.task-login #logo { display:block; width:100%; max-width:290px; height:auto; max-height:110px; margin:0 auto 24px; }
body.task-login .drams-intro { text-align:center; margin-bottom:26px; }
body.task-login .drams-eyebrow { color:var(--drams-teal); font-size:11px; letter-spacing:2px; font-weight:700; margin-bottom:10px; }
body.task-login .drams-intro h2 { color:var(--drams-navy); font-size:26px; font-weight:700; line-height:1.3; margin:0 0 10px; }
body.task-login .drams-intro p:last-child { color:#536779; font-size:14px; }
body.task-login #login-form { width:100%; max-width:none; margin:0; }
body.task-login .form-control { border-color:#bccdd6; border-radius:8px; min-height:44px; background:#fff; color:#23364b; }
body.task-login .input-group-text { background:#f0f5f7; color:#506779; border-color:#bccdd6; }
body.task-login #login-footer { color:#536779; font-size:12px; line-height:1.8; margin-top:22px; }
body.task-login #login-footer a { color:#006b5b; }
.btn-primary { background-color:var(--drams-teal); border-color:var(--drams-teal); }
.btn-primary:hover,.btn-primary:focus { background-color:#006c5d; border-color:#006c5d; }
.btn-primary:disabled { background-color:#526e6b; border-color:#526e6b; }
#layout-menu { background-color:var(--drams-navy); }
#layout-menu #taskmenu a { color:#e4eef7; }
#layout-menu #taskmenu a:hover { background-color:#153858; color:#fff; }
#layout-menu #taskmenu a.selected { background-color:#006e60; color:#fff; box-shadow:inset 3px 0 var(--drams-green); }
#layout-menu #logo { width:46px; height:46px; object-fit:contain; margin:12px auto; }
html:not(.dark-mode) .header { background-color:#f3f7fa; }
html:not(.dark-mode) .listing li.selected>*,html:not(.dark-mode) .listing tr.selected>td { background-color:#dcefe9; color:#073f37; }
.form-control:focus { border-color:var(--drams-teal); box-shadow:0 0 0 3px #00877424; }
:focus-visible { outline:3px solid #00a68c; outline-offset:3px; }
@media(max-width:480px) {
  body.task-login #layout-content { padding:28px 22px 20px; margin:20px auto; border-radius:14px; }
  body.task-login .drams-intro h2 { font-size:23px; }
  body.task-login #logo { max-width:260px; }
}

/* Reset Elastic's viewport offsets and flex sizing on the login screen. */
body.task-login #layout { display:block; height:auto; min-height:100vh; padding:24px 16px; overflow:auto; }
body.task-login #layout-content {
  display:block; flex:none; position:relative; top:auto; width:100%; height:auto; min-height:0;
  max-width:460px; margin:clamp(8px,5vh,48px) auto; overflow:visible;
}
body.task-login #logo {
  position:static; top:auto; right:auto; bottom:auto; left:auto; opacity:1;
  display:block; width:100%; max-width:290px; height:auto; max-height:110px; margin:0 auto 24px;
}
body.task-login #login-form { position:static; top:auto; width:100%; max-width:none; margin:0; }
body.task-login #rcmloginsubmit { background:#008774; border-color:#008774; color:#fff; }
body.task-login #rcmloginsubmit:hover,body.task-login #rcmloginsubmit:focus { background:#006c5d; border-color:#006c5d; }
@media(max-width:480px) {
  body.task-login #layout { padding:16px; }
  body.task-login #layout-content { margin:8px auto; }
}

/* Centre the card in the viewport; reserve space for a separate page footer. */
body.task-login #layout {
  display:grid; place-items:center; box-sizing:border-box; position:relative;
  min-height:100vh; min-height:100dvh; height:auto; padding:80px 16px;
}
body.task-login #layout-content { margin:0 auto; }
body.task-login .drams-recovery { margin:18px 0 0; text-align:center; font-size:13px; }
body.task-login .drams-recovery summary { color:#006b5b; cursor:pointer; padding:6px; font-weight:600; }
body.task-login .drams-recovery div { padding:12px; margin-top:8px; border:1px solid #d5e5e5; border-radius:8px; background:#f3f8f7; color:#40566b; line-height:1.6; }
body.task-login .drams-recovery p { margin:0 0 10px; }
body.task-login .drams-recovery p:last-child { margin:10px 0 0; font-size:12px; }
body.task-login .drams-recovery a { color:#006b5b; text-decoration:underline; }
body.task-login .drams-page-footer { position:absolute; left:16px; right:16px; bottom:20px; color:#dbe8ef; text-align:center; font-size:12px; line-height:1.6; }
body.task-login .drams-page-footer p { margin:0 0 4px; }
body.task-login .drams-page-footer a { color:#fff; text-decoration:underline; margin-left:6px; }
@media(max-width:480px) { body.task-login #layout { padding:80px 16px; } body.task-login #layout-content { margin:0 auto; } }

body.task-login #rcmloginsubmit { text-transform:none; font-weight:600; }

body.task-login #rcmloginsubmit.text-uppercase { text-transform:none !important; }
body.task-login .drams-recovery[open] + #login-footer { display:none; }