/* DROPIDEA Mail: branded Roundcube chrome. Message bodies keep their own styles. */
:root {
  --di-gold:#EBB22D;
  --di-gold-deep:#D29A16;
  --di-green:#2DB67D;
  --di-ink:#424242;
  --di-muted:#748077;
  --di-line:#E4EAE5;
  --di-canvas:#F5F8F6;
}
html:not(.dark-mode) body {
  color:var(--di-ink);
  background:var(--di-canvas);
  font-family:"Tajawal","Segoe UI",Arial,sans-serif;
}
body.task-mail #layout,
body.task-addressbook #layout,
body.task-settings #layout {
  position:relative;
  padding-top:56px;
  box-sizing:border-box;
}
.di-appbar {
  position:absolute;
  z-index:30;
  inset:0 0 auto;
  height:56px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 23px;
  background:#fff;
  border-bottom:1px solid #E5EBE6;
  box-shadow:0 2px 9px rgba(29,56,40,.035);
  white-space:nowrap;
}
.di-appbar__brand{display:inline-flex;align-items:center;height:100%}
.di-appbar__brand img{height:39px;width:auto;display:block}
.di-appbar__divider{height:24px;width:1px;background:#E2E8E2}
.di-appbar__title{color:#48514B;font-size:1.02rem;font-weight:700}
.di-appbar__spacer{flex:1}
.di-appbar__help{color:#457A5D;font-size:.9rem;font-weight:600;text-decoration:none;padding:7px 11px;border-radius:8px}
.di-appbar__help:hover{color:#1C7C53;background:#EEF8F1;text-decoration:none}
html.dark-mode .di-appbar{background:#26322D;border-color:#3B4A40;box-shadow:none}
html.dark-mode .di-appbar__title{color:#ECF2EC}
html.dark-mode .di-appbar__divider{background:#56665A}
html.dark-mode .di-appbar__help{color:#87D4A9}

/* App rail and three-pane layout */
html:not(.dark-mode) #layout-menu {
  width:72px;
  min-width:72px;
  max-width:72px;
  flex:0 0 72px;
  background:#fff;
  border-right:1px solid var(--di-line);
}
html:not(.dark-mode) #layout-menu .popover-header{background:#fff}
html:not(.dark-mode) #layout-menu .popover-header,
html:not(.dark-mode) #taskmenu .special-buttons {
  width:72px!important;
  background:#fff!important;
  border-right:1px solid var(--di-line);
}
html:not(.dark-mode) #taskmenu a {
  width:72px!important;
  max-width:72px;
}
html:not(.dark-mode) #taskmenu a:not(.logout),
html:not(.dark-mode) #taskmenu a:not(.logout)::before {
  color:#65746A!important;
}
html:not(.dark-mode) #taskmenu a.selected,
html:not(.dark-mode) #taskmenu a.selected::before {
  color:#956807!important;
}
html:not(.dark-mode) #taskmenu a.compose:not(.selected),
html:not(.dark-mode) #taskmenu a.compose:not(.selected)::before{color:#65746A!important}
html:not(.dark-mode) #taskmenu a.compose:not(.selected){background:#fff!important;box-shadow:none!important}
html:not(.dark-mode) #taskmenu a.logout,
html:not(.dark-mode) #taskmenu a.logout::before {
  color:#A35D55!important;
}
html:not(.dark-mode) #taskmenu a {
  color:#667169;
  border-radius:12px;
  transition:background .16s,color .16s;
}
html:not(.dark-mode) #taskmenu a:hover {
  color:#4B5D50;
  background:#F3F7F4;
}
html:not(.dark-mode) #taskmenu a.selected {
  color:#9A6A0B;
  background:#FFF3D7;
}
html:not(.dark-mode) #taskmenu .compose.selected {
  color:#3B2C08;
  background:linear-gradient(180deg,#F4C743,var(--di-gold));
  box-shadow:0 5px 12px rgba(210,154,22,.2);
}
html:not(.dark-mode) #taskmenu .compose.selected:hover {
  color:#3B2C08;
  background:#F4C338;
}
html:not(.dark-mode) #taskmenu .logout{color:#A55C50}
html:not(.dark-mode) #layout-sidebar {
  background:#F8FAF8;
  border-right:1px solid var(--di-line);
}
html:not(.dark-mode) #layout-list {
  background:#fff;
  border-right:1px solid var(--di-line);
}
html:not(.dark-mode) #layout-content{background:#fff}
html:not(.dark-mode) #layout > div > .header,
html:not(.dark-mode) #layout > div > .footer {
  background:#fff;
  color:#49534B;
  border-color:var(--di-line);
}
html:not(.dark-mode) #layout-sidebar > .header{background:#F8FAF8}
html:not(.dark-mode) #layout-sidebar > .footer{background:#F8FAF8}
html:not(.dark-mode) #layout-sidebar .username {
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:.82rem;
  font-weight:600;
  color:#48534C;
}
@media(min-width:1025px){
  body.task-mail #layout-sidebar.hidden,
  body.task-mail #layout-list.hidden{display:flex!important}
  body.task-mail #layout-sidebar{flex:0 0 210px;min-width:210px;max-width:210px}
  body.task-mail #layout-list{flex:0 0 clamp(300px,27vw,360px);min-width:300px;max-width:360px}
  body.task-mail a.back-sidebar-button,
  body.task-mail a.back-list-button{display:none}
}
@media(min-width:1400px){
  body.task-mail #layout-sidebar{flex-basis:238px;min-width:238px;max-width:238px}
  body.task-mail #layout-list{flex-basis:clamp(320px,29vw,390px);min-width:320px;max-width:390px}
}
/* Folder tree */
html:not(.dark-mode) #folderlist-content{padding:10px 7px}
html:not(.dark-mode) #mailboxlist li{border-radius:10px;margin-bottom:3px}
html:not(.dark-mode) #mailboxlist li a{color:#4B564D;border-radius:10px}
html:not(.dark-mode) #mailboxlist li:hover{background:#EDF4EF}
html:not(.dark-mode) #mailboxlist li.mailbox.selected{background:transparent!important}
html:not(.dark-mode) #mailboxlist li.mailbox.selected > a{
  background:#FFF2D6!important;
  color:#8B640D!important;
  font-weight:700;
}
html:not(.dark-mode) #mailboxlist .unreadcount{
  background:var(--di-gold);
  color:#46330A;
  border-radius:999px;
}
html:not(.dark-mode) #quotadisplay{color:#6A776D}
/* Search, list and reading pane */
html:not(.dark-mode) #layout-list .searchbar,
html:not(.dark-mode) #mailsearchform {
  background:#F7F9F7;
}
html:not(.dark-mode) #mailsearchform input {
  background:#F7F9F7;
  border-color:#DCE6DF;
  border-radius:10px;
  color:#34453A;
}
html:not(.dark-mode) #mailsearchform input:focus {
  border-color:var(--di-gold);
  box-shadow:0 0 0 3px rgba(235,178,45,.16);
}
html:not(.dark-mode) #messagelist tr.message {
  border-bottom:1px solid #ECF0ED;
  background:#fff;
  transition:background .12s ease;
}
html:not(.dark-mode) #messagelist tr.message:hover{background:#F7FAF7}
html:not(.dark-mode) #messagelist tr.message.selected,
html:not(.dark-mode) #messagelist tr.message.focused {
  background:#FFF7E6;
  box-shadow:inset 3px 0 0 var(--di-gold);
}
html:not(.dark-mode) #messagelist tr.message td.subject .subject{color:#303B32;font-weight:600}
html:not(.dark-mode) #messagelist tr.message td.subject .fromto{color:#5C6960}
html:not(.dark-mode) #messagelist tr.message td.subject .date{color:#89938B}
html:not(.dark-mode) #messagelist .unread td.subject .subject{font-weight:800;color:#24372A}
html:not(.dark-mode) #messagecontframe{background:#fff}
html:not(.dark-mode) #layout-content .iframe-wrapper{background:#fff}
html:not(.dark-mode) #layout-content > .header{box-shadow:0 1px 0 var(--di-line)}
html:not(.dark-mode) .toolbar a.button:hover,
html:not(.dark-mode) .toolbar button:hover{color:#926609;background:#FFF3D7}
html:not(.dark-mode) .btn-primary,
html:not(.dark-mode) .button.mainaction {
  color:#3D2E08;
  background:var(--di-gold);
  border-color:var(--di-gold-deep);
  border-radius:9px;
}
html:not(.dark-mode) .btn-primary:hover,
html:not(.dark-mode) .button.mainaction:hover {
  color:#3D2E08;
  background:#F2C33D;
  border-color:var(--di-gold-deep);
}
html:not(.dark-mode) .form-control:focus {
  border-color:var(--di-gold);
  box-shadow:0 0 0 .2rem rgba(235,178,45,.16);
}
html:not(.dark-mode) .listing li.selected,
html:not(.dark-mode) .listing tr.selected{background:#FFF5DC}
html:not(.dark-mode) .popupmenu li a:hover{background:#FFF4D8;color:#60470B}
html:not(.dark-mode) #messagestack .notice{border-radius:10px}

/* Arabic Outlook-style workspace. Keep addresses and message data readable. */
html[dir="rtl"] #layout-menu,
html[dir="rtl"] #layout-menu .popover-header,
html[dir="rtl"] #taskmenu .special-buttons {
  border-right:0;
  border-left:1px solid var(--di-line);
}
html[dir="rtl"] #layout-menu .special-buttons,
html[dir="rtl"] #taskmenu .special-buttons {
  left:auto!important;
  right:0!important;
}
html[dir="rtl"] #layout-sidebar,
html[dir="rtl"] #layout-list {
  border-right:0;
  border-left:1px solid var(--di-line);
}
html[dir="rtl"] #messagelist tr.message.selected,
html[dir="rtl"] #messagelist tr.message.focused {
  box-shadow:none;
}
html:not(.dark-mode)[dir="rtl"] #messagelist tr.message.selected td,
html:not(.dark-mode)[dir="rtl"] #messagelist tr.message.focused td {
  border-left:0;
  border-right:0;
}
html:not(.dark-mode)[dir="rtl"] #messagelist tr.message.selected td.subject,
html:not(.dark-mode)[dir="rtl"] #messagelist tr.message.focused td.subject {
  border-right:3px solid var(--di-gold);
}
html:not(.dark-mode) #mailboxlist li a::before{color:#6C8173!important}
html:not(.dark-mode) #mailboxlist li.selected a::before{color:#AB7812!important}
html:not(.dark-mode) body.task-settings #layout-sidebar a::before,
html:not(.dark-mode) body.task-settings #sections-table td.section::before {
  color:#6C8173!important;
}
html:not(.dark-mode) body.task-settings #layout-sidebar a.selected::before,
html:not(.dark-mode) body.task-settings #sections-table tr.focused td.section::before {
  color:#AB7812!important;
}
html[dir="rtl"] #layout-sidebar .username,
html[dir="rtl"] .adr,
html[dir="rtl"] a[href^="mailto:"] {
  direction:ltr;
  unicode-bidi:isolate;
}
html[dir="rtl"] #layout-sidebar .username{text-align:center}
html[dir="rtl"] #message-header .subject,
html[dir="rtl"] #message-header .header-summary,
html[dir="rtl"] #message-header .header-headers {text-align:right}
html[dir="rtl"] #messagebody .pre {
  unicode-bidi:plaintext;
  text-align:start!important;
  font-family:"Tajawal","Segoe UI",Arial,sans-serif;
}
html[dir="rtl"] #messagelist td.subject .subject,
html[dir="rtl"] #messagelist td.subject .fromto {unicode-bidi:plaintext}

/* Align every navigation level from the right, including folder trees. */
html[dir="rtl"] #layout-sidebar .listing li > a,
html[dir="rtl"] body.task-settings #sections-table td.section{
  direction:rtl;
  text-align:right!important;
}
html[dir="rtl"] #layout-sidebar .listing li > a::before,
html[dir="rtl"] body.task-settings #sections-table td.section::before{
  float:right!important;
  margin:0 0 0 9px!important;
}
html[dir="rtl"] #mailboxlist li.mailbox > a{padding-left:8px!important;padding-right:21px!important}
html[dir="rtl"] #mailboxlist li.mailbox[aria-level="2"] > a{padding-right:42px!important}
html[dir="rtl"] #mailboxlist li.mailbox[aria-level="3"] > a{padding-right:63px!important}
html[dir="rtl"] #mailboxlist li.mailbox[aria-level="4"] > a{padding-right:84px!important}
html[dir="rtl"] #mailboxlist li.mailbox[aria-level="5"] > a{padding-right:105px!important}
html[dir="rtl"] #mailboxlist li.mailbox > .treetoggle{left:auto!important;right:0!important}
html[dir="rtl"] #subscription-table li.mailbox > a{
  direction:rtl;
  text-align:right!important;
  padding:0 21px 0 45px!important;
}
html[dir="rtl"] #subscription-table li.mailbox[aria-level="2"] > a{padding-right:42px!important}
html[dir="rtl"] #subscription-table li.mailbox[aria-level="3"] > a{padding-right:63px!important}
html[dir="rtl"] #subscription-table li.mailbox > a::before{float:right!important;margin:0 0 0 9px!important}
html[dir="rtl"] #subscription-table li.mailbox > .treetoggle{left:auto!important;right:0!important}
html[dir="rtl"] #subscription-table li.mailbox > .custom-control{right:auto!important;left:0!important}
html:not(.dark-mode) #subscription-table li.mailbox > a::before{color:#6C8173!important}
html[dir="rtl"] body.action-compose #layout-sidebar.sidebar-right{order:0!important}
html[dir="rtl"] body.action-compose #layout-content{order:1!important}
html[dir="rtl"] body.action-compose #layout-sidebar .header,
html[dir="rtl"] body.action-compose #layout-sidebar label{text-align:right!important}
html[dir="rtl"] body.task-settings #layout-sidebar .listing li.selected > a{
  background:#FFF3D7!important;
  border-left:0!important;
  border-right:3px solid var(--di-gold)!important;
  color:#795913!important;
}
html[dir="rtl"] body.task-settings #sections-table tr.focused td.section{
  background:#FFF3D7!important;
  border-left:0!important;
  border-right:3px solid var(--di-gold)!important;
  color:#795913!important;
}
/* Keep the settings detail form anchored to the right side of its pane. */
html.iframe[dir="rtl"] body.task-settings .formcontent,
html.iframe[dir="rtl"] body.task-settings .formbuttons{
  direction:rtl;
  text-align:right;
}
html.iframe[dir="rtl"] body.task-settings .formcontent .propform{
  width:100%;
  max-width:820px;
  margin-left:auto;
  margin-right:0;
}
html.iframe[dir="rtl"] body.task-settings .formcontent legend,
html.iframe[dir="rtl"] body.task-settings .formcontent .propform .title,
html.iframe[dir="rtl"] body.task-settings .formcontent .col-form-label{
  text-align:right!important;
}
html #taskmenu a.guide::before{display:none!important}
html #taskmenu a.guide .guide-ico{
  display:block!important;
  width:25px!important;
  height:25px!important;
  flex:0 0 25px;
  margin:0 auto 4px;
}

/* Give Arabic navigation labels room and keep the mobile drawer on the right. */
html #layout-menu {
  width:120px!important;
  min-width:120px!important;
  max-width:120px!important;
  flex:0 0 120px!important;
}
html:not(.dark-mode) #layout-menu .popover-header,
html:not(.dark-mode) #taskmenu {
  width:100%!important;
  max-width:none!important;
}
html:not(.dark-mode) #taskmenu .special-buttons {
  width:120px!important;
  max-width:120px!important;
}
html.dark-mode #layout-menu .popover-header,
html.dark-mode #taskmenu {
  width:100%!important;
  max-width:none!important;
}
html.dark-mode #taskmenu .special-buttons{width:120px!important;max-width:120px!important}
html:not(.dark-mode) #taskmenu a {
  width:calc(100% - 16px)!important;
  max-width:none!important;
  margin-inline:8px!important;
  box-sizing:border-box;
}
html.dark-mode #taskmenu a {
  width:calc(100% - 16px)!important;
  max-width:none!important;
  margin-inline:8px!important;
  box-sizing:border-box;
}
html.dark-mode #taskmenu a:not(.compose):not(.selected):not(.logout),
html.dark-mode #taskmenu a:not(.compose):not(.selected):not(.logout)::before{color:#C7D6CB!important}
html.dark-mode #taskmenu a.selected,
html.dark-mode #taskmenu a.selected::before{color:#F4C85A!important}
html.dark-mode #taskmenu a.compose:not(.selected),
html.dark-mode #taskmenu a.compose:not(.selected)::before{color:#C7D6CB!important}
html.dark-mode #taskmenu a.compose:not(.selected){background:transparent!important;box-shadow:none!important}
html.dark-mode #taskmenu a.compose.selected,
html.dark-mode #taskmenu a.compose.selected::before{color:#3B2C08!important}
html.dark-mode #taskmenu a.compose.selected{background:#EAB52E!important}
html.dark-mode #taskmenu a.logout,
html.dark-mode #taskmenu a.logout::before{color:#E7A299!important}
html.dark-mode #taskmenu a.guide svg{color:#C7D6CB}
html #taskmenu .special-buttons{left:auto!important;right:0!important}

@media(max-width:767px){
  html[dir="rtl"] #layout-menu {
    width:min(82vw,300px)!important;
    min-width:min(82vw,300px)!important;
    max-width:min(82vw,300px)!important;
    left:auto!important;
    right:0!important;
    box-shadow:-18px 0 48px rgba(24,43,31,.18);
  }
  html:not(.dark-mode)[dir="rtl"] #layout-menu .popover-header {
    justify-content:space-between;
    padding-inline:18px;
  }
  html:not(.dark-mode)[dir="rtl"] #layout-menu .popover-header a.cancel {
    flex:0 0 42px;
    width:42px;
    height:42px;
    align-self:center;
    border-radius:10px;
    background:#F1F6F2;
    color:#4B6253!important;
  }
  html:not(.dark-mode)[dir="rtl"] #layout-menu .popover-header a.cancel::before{color:#4B6253!important}
  html[dir="rtl"] #taskmenu {text-align:right!important;white-space:normal!important}
  html:not(.dark-mode)[dir="rtl"] #taskmenu a {
    display:flex!important;
    align-items:center!important;
    height:48px;
    padding:0 16px!important;
    text-align:right!important;
    line-height:1.3!important;
    white-space:nowrap!important;
  }
  html[dir="rtl"] #taskmenu a::before {
    flex:0 0 26px;
    margin:0 0 0 12px!important;
    text-align:center;
  }
  html[dir="rtl"] #taskmenu a .inner {overflow:visible;text-overflow:clip}
  html[dir="rtl"] #taskmenu a.guide .guide-ico{margin:0 0 0 12px!important}
  html:not(.dark-mode)[dir="rtl"] #taskmenu .special-buttons{
    position:static!important;
    display:block!important;
    width:100%!important;
    max-width:none!important;
  }
  html.dark-mode[dir="rtl"] #taskmenu .special-buttons{
    position:static!important;
    display:block!important;
    width:100%!important;
    max-width:none!important;
  }
  html.dark-mode[dir="rtl"] #taskmenu a{
    display:flex!important;
    align-items:center!important;
    height:48px;
    padding:0 16px!important;
    text-align:right!important;
    line-height:1.3!important;
    white-space:nowrap!important;
  }
  html.dark-mode[dir="rtl"] #taskmenu a::before{
    flex:0 0 26px;
    margin:0 0 0 12px!important;
    text-align:center;
  }
  html.dark-mode[dir="rtl"] #layout-menu .popover-header{justify-content:space-between;padding-inline:18px}
  html.dark-mode[dir="rtl"] #layout-menu .popover-header a.cancel{
    flex:0 0 42px;
    width:42px;
    height:42px;
    align-self:center;
    border-radius:10px;
    background:#34483B;
  }
  html.dark-mode[dir="rtl"] #layout-menu .popover-header a.cancel,
  html.dark-mode[dir="rtl"] #layout-menu .popover-header a.cancel::before{color:#D9EEE0!important}
}

/* Sign-in surface */
body.task-login {
  min-height:100%;
  overflow:auto;
  background:#F7FAF8!important;
}
body.task-login #layout{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  height:auto;
  padding:42px 20px;
  overflow:visible;
  isolation:isolate;
}
body.task-login #layout-content {
  position:relative;
  z-index:1;
  display:flex;
  flex:0 1 450px;
  flex-direction:column;
  align-items:stretch;
  max-width:450px;
  min-width:0;
  width:100%;
  height:auto;
  margin:0;
  background:transparent;
}
.di-login-scene {
  position:fixed;
  z-index:0;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  background:radial-gradient(ellipse 53% 68% at 96% 3%,rgba(235,178,45,.11),transparent 75%),radial-gradient(ellipse 56% 70% at 3% 98%,rgba(45,182,125,.1),transparent 75%);
}
.di-login-scene svg{width:116%;height:116%;position:absolute;top:-8%;left:-8%;fill:none;stroke:#D7A631;stroke-width:1.1;opacity:.33;animation:di-wave 24s ease-in-out infinite alternate}
.di-login-scene svg .green{stroke:var(--di-green);opacity:.8}
.di-login-card {
  width:100%;
  padding:33px 35px 30px;
  border:1px solid rgba(226,234,227,.95);
  border-radius:20px;
  background:rgba(255,255,255,.97);
  box-shadow:0 24px 72px rgba(39,73,51,.12),0 5px 18px rgba(33,52,39,.035);
  backdrop-filter:blur(12px);
}
.di-login-intro{text-align:center;direction:rtl}
.di-login-intro img{display:block;width:200px;height:auto;margin:0 auto 18px}
.di-login-tag{display:inline-block;padding:4px 11px;border-radius:999px;background:#EFF9F2;color:#24865A;font-size:.83rem;font-weight:700}
.di-login-intro h2{margin:16px 0 4px;color:var(--di-ink);font-size:1.65rem;line-height:1.3;font-weight:800}
.di-login-intro p{margin:0 auto 23px;color:#6D7770;font-size:.95rem;line-height:1.65;max-width:330px}
body.task-login #login-form{
  position:static!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  transform:none!important;
  width:100%;
  max-width:none;
  margin:0;
}
body.task-login #login-form .input-group{margin-bottom:13px}
body.task-login #login-form .input-group-prepend{display:none}
body.task-login #login-form input.form-control{
  width:100%;
  height:51px;
  background:#fff;
  border:1px solid #D5DFD7;
  border-radius:11px!important;
  color:#2B372F;
  padding:11px 15px;
  font-family:"Tajawal","Segoe UI",Arial,sans-serif;
  font-size:1rem;
  text-align:left;
}
body.task-login #login-form input.form-control::placeholder{color:#818C84;opacity:1}
body.task-login #login-form input.form-control:focus{border-color:var(--di-gold);box-shadow:0 0 0 3px rgba(235,178,45,.17)}
body.task-login #rcmloginsubmit{
  display:block;
  width:100%;
  min-height:51px;
  margin-top:6px;
  padding:11px 18px;
  border:1px solid var(--di-gold-deep);
  border-radius:11px;
  background:linear-gradient(180deg,#F1C13A,#E6AA1D)!important;
  color:#3C2B08;
  box-shadow:0 6px 16px rgba(210,154,22,.18);
  font-family:"Tajawal",system-ui,sans-serif;
  font-size:1.05rem;
  font-weight:700;
}
body.task-login #rcmloginsubmit:hover{background:#F2C139}
html body.task-login #layout-content #login-form #rcmloginuser,
html body.task-login #layout-content #login-form #rcmloginpwd {
  background:#fff!important;
  border:1px solid #D6E0D8!important;
  color:#2B372F!important;
  box-shadow:none!important;
}
html body.task-login #layout-content #login-form #rcmloginuser:focus,
html body.task-login #layout-content #login-form #rcmloginpwd:focus {
  border-color:var(--di-gold)!important;
  box-shadow:0 0 0 3px rgba(235,178,45,.17)!important;
}
html body.task-login #layout-content #login-form #rcmloginsubmit {
  background-color:#E6AA1D!important;
  background-image:linear-gradient(180deg,#F1C13A,#E6AA1D)!important;
  border:1px solid var(--di-gold-deep)!important;
  color:#3C2B08!important;
}
html body.task-login #layout-content #login-form #rcmloginsubmit:hover {
  background-color:#F2C139!important;
  background-image:none!important;
}
.di-login-note{margin:16px 0 0;text-align:center;color:#78827B;font-size:.85rem;line-height:1.6}
.di-login-note a{color:#89630E;text-decoration:none;font-weight:700}
.di-login-note a:hover{text-decoration:underline}
body.task-login #login-footer{margin:0;padding:0;border:0}
.di-login-foot{padding:18px 0 0;text-align:center;color:#838B84;font-size:.84rem;line-height:1.6}
.di-login-foot a{color:#60796A;text-decoration:none}
.di-login-foot a:hover{color:#8E6511;text-decoration:underline}
.di-login-foot span{padding:0 9px}
.di-login-foot p{margin:7px 0 0}
@keyframes di-wave{from{transform:translate3d(-1.2%,.5%,0) scale(1.01)}to{transform:translate3d(1.2%,-.6%,0) scale(1.03)}}
@media(max-width:767px){
  .di-appbar{height:50px;padding:0 12px;gap:8px}
  .di-appbar__brand img{height:32px}
  .di-appbar__title{font-size:.85rem}
  .di-appbar__help{display:none}
  body.task-mail #layout,body.task-addressbook #layout,body.task-settings #layout{padding-top:50px}
  body.task-login #layout{padding:25px 14px}
  .di-login-card{padding:28px 23px}
  .di-login-scene svg{width:190%;left:-45%;opacity:.25}
}
@media(prefers-reduced-motion:reduce){
  .di-login-scene svg{animation:none}
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
}