/* SDY visual theme for the isolated Roundcube preview. UTF-8. */
html:not(.dark-mode) {
  --sdy-blue: #007cb1;
  --sdy-blue-dark: #00577c;
  --sdy-ink: #262626;
  --sdy-border: #d3d8db;
  --sdy-surface: #fafafa;
}
body { font-family: Montserrat, Arial, sans-serif; }
html:not(.dark-mode) body { color: var(--sdy-ink); }
html:not(.dark-mode) #layout-menu { background: #007cb1; border-right: 1px solid #007cb1; }
html:not(.dark-mode) #layout-menu .popover-header { background: #007cb1 !important; }
html:not(.dark-mode) #layout-menu #logo { content: url('/branding/sdy-logo-bluebar.svg'); }
#layout-menu .popover-header #logo { cursor: pointer; }
html:not(.dark-mode) #taskmenu .special-buttons { background: #007cb1; }
html:not(.dark-mode) #taskmenu a { color: #fff; }
html:not(.dark-mode) #taskmenu a:hover,
html:not(.dark-mode) #taskmenu a:focus,
html:not(.dark-mode) #taskmenu a.selected,
html:not(.dark-mode) #taskmenu a.selected:hover { background: #00577c; color: #fff; }
html:not(.dark-mode) #taskmenu a.compose { color: #fff; background: #006b99; }
html:not(.dark-mode) #taskmenu a.compose:hover { color: #fff; background: #00577c; }
html:not(.dark-mode) #taskmenu a.logout { color: #fff !important; }
html:not(.dark-mode) #layout-sidebar { background: #fafafa; border-color: var(--sdy-border); }
html:not(.dark-mode) #layout-list { background: #fff; border-color: var(--sdy-border); }
html:not(.dark-mode) #layout-sidebar > .header,
html:not(.dark-mode) #layout-list > .header,
html:not(.dark-mode) #layout-content > .header { background: #007cb1; border-color: #007cb1; color: #fff; }
html:not(.dark-mode) #layout-menu { border-right-color: #00577c; }
@media (min-width: 481px) {
  html:not(.dark-mode) #layout-sidebar:not(.sidebar-right)::after,
  html:not(.dark-mode) #layout-list::after {
    content: '';
    position: absolute;
    top: 0;
    right: -1px;
    width: 1px;
    height: 4.2rem;
    background: #00577c;
    z-index: 2;
    pointer-events: none;
  }
}
html:not(.dark-mode) #layout-sidebar > .header a.button,
html:not(.dark-mode) #layout-list > .header a.button,
html:not(.dark-mode) #layout-content > .header a.button,
html:not(.dark-mode) #layout-list > .header .toolbar a,
html:not(.dark-mode) #layout-content > .header .toolbar a { color: #fff; }
html:not(.dark-mode) #layout-list > .header .toolbar a.disabled,
html:not(.dark-mode) #layout-content > .header .toolbar a.disabled { color: #b7d6e3; }
html:not(.dark-mode) #layout-list > .header .toolbar a:not(.disabled):hover,
html:not(.dark-mode) #layout-content > .header .toolbar a:not(.disabled):hover,
html:not(.dark-mode) #layout-list > .header .toolbar a:not(.disabled):focus,
html:not(.dark-mode) #layout-content > .header .toolbar a:not(.disabled):focus { background: #00577c; color: #fff; }
html:not(.dark-mode) #layout-content > .header .toolbar .dropbutton:not(.disabled):hover { background-color: #00577c; }
html:not(.dark-mode) #layout-content > .header .toolbar .dropbutton a.dropdown:hover,
html:not(.dark-mode) #layout-content > .header .toolbar .dropbutton a.dropdown:focus-visible,
html:not(.dark-mode) #layout-content > .header .toolbar .dropbutton a.dropdown[aria-expanded="true"] { background-color: #004a69; color: #fff; }
html:not(.dark-mode) #layout-sidebar > .header a.button:hover,
html:not(.dark-mode) #layout-sidebar > .header a.button:focus-visible,
html:not(.dark-mode) #layout-sidebar > .header a.button[aria-expanded="true"],
html:not(.dark-mode) #layout-list > .header a.button:hover,
html:not(.dark-mode) #layout-list > .header a.button:focus-visible,
html:not(.dark-mode) #layout-list > .header a.button[aria-expanded="true"],
html:not(.dark-mode) #layout-content > .header a.button:hover,
html:not(.dark-mode) #layout-content > .header a.button:focus-visible,
html:not(.dark-mode) #layout-content > .header a.button[aria-expanded="true"] { background-color: #00577c; color: #fff; }
html:not(.dark-mode) .listing li.selected > a,
html:not(.dark-mode) .listing tr.selected { background-color: #e4f3f9; }
html:not(.dark-mode) .listing li a:hover,
html:not(.dark-mode) .listing tr:hover { background-color: #f1f8fb; }
html:not(.dark-mode) a { color: #007cb1; }
html:not(.dark-mode) a:hover { color: #00577c; }
html:not(.dark-mode) .btn-primary { background-color: #007cb1; border-color: #007cb1; color: #fff; }
html:not(.dark-mode) .btn-primary:hover,
html:not(.dark-mode) .btn-primary:focus { background-color: #00577c; border-color: #00577c; color: #fff; }
html:not(.dark-mode) .btn-secondary,
html:not(.dark-mode) .btn-light { border-color: #a8bbc4; }
html:not(.dark-mode) .btn-secondary:hover,
html:not(.dark-mode) .btn-light:hover { border-color: #007cb1; }
html:not(.dark-mode) .btn:focus-visible { outline: 2px solid #007cb1; outline-offset: 2px; }
html:not(.dark-mode) .form-control:focus,
html:not(.dark-mode) .custom-select:focus { border-color: #007cb1; box-shadow: 0 0 0 .15rem rgba(0,124,177,.18); }
html:not(.dark-mode) .task-login { background: #f4f8fa; }
html:not(.dark-mode) .task-login #layout-content { background: #fff; border: 1px solid #d3d8db; border-radius: 12px; box-shadow: 0 12px 36px rgba(45,53,62,.09); }
html:not(.dark-mode) .task-login #login-form { padding: 0 12px 12px; }

/* Frame HTML messages against the dark message view. */
html.dark-mode #messagebody .message-htmlpart {
  border: 1px solid #78919c;
  border-radius: 4px;
  padding: 12px;
}