@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap');
/* ClouderStack palette on Roundcube Elastic: light by default, dark when Elastic's dark mode is on. */
:root {
  --cs-accent: #0F9D84; --cs-accent-ink: #fff; --cs-accent-soft: rgba(15,157,132,.10);
  --cs-bg: #F6F7F9; --cs-rail: #0D1015; --cs-rail-text: #A9B1C2; --cs-card: #fff; --cs-line: #E4E7EC; --cs-text: #15181E;
}
html.dark-mode {
  --cs-accent: #5EE6D0; --cs-accent-ink: #04110E; --cs-accent-soft: rgba(94,230,208,.12);
  --cs-bg: #0A0C10; --cs-rail: #0D1015; --cs-card: #10141B; --cs-line: #1B2029; --cs-text: #E8ECF4;
}
body, input, textarea, select, button, .btn, .form-control { font-family: Geist, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; }

/* left menu */
#layout-menu { background: var(--cs-rail) !important; border-right: 1px solid #1B2029; }
#layout-menu .menu a, #layout-menu .popover-header { color: var(--cs-rail-text) !important; }
#layout-menu .menu a:hover { color: #F2F5FA !important; background: #161B23 !important; }
#layout-menu .menu a.selected { color: #F2F5FA !important; background: #161B23 !important; box-shadow: inset 3px 0 0 #5EE6D0; }
#layout-menu .menu a.compose, #layout-menu .menu a.compose:hover { color: #04110E !important; background: #5EE6D0 !important; border-radius: 12px;
  margin: 8px 8px 10px; width: calc(100% - 16px); box-sizing: border-box; box-shadow: none; }
#layout-menu .special-buttons, #layout-menu .popover-header, #layout-menu .menu { background: transparent !important; }
#layout-menu .special-buttons a { color: #8D96A8 !important; }
#layout-menu .special-buttons a:hover { color: #F2F5FA !important; background: #161B23 !important; }
#layout-menu .special-buttons a.logout:hover { color: #F87171 !important; }
#layout-menu #logo { max-height: 40px; }

/* accent */
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--cs-accent) !important; border-color: var(--cs-accent) !important; color: var(--cs-accent-ink) !important; border-radius: 10px; font-weight: 600;
}
a, a:hover, .listing li a.selected, .header-title { color: inherit; }
.form-control:focus, .custom-select:focus { border-color: var(--cs-accent) !important; box-shadow: 0 0 0 3px var(--cs-accent-soft) !important; }
.listing li.selected, .listing li.selected > a, table.records-table tr.selected td, table.records-table tr.focused td,
.listing li.focused, table.records-table tr.selected:not(.flagged) td { background-color: var(--cs-accent-soft) !important; }
table.messagelist tr.unread td.subject span.subject a { font-weight: 650; }
table.messagelist tr.unread .flag span.unread, .unreadcount, .listing li .unreadcount { background-color: var(--cs-accent) !important; color: var(--cs-accent-ink) !important; }
.badge-primary, .progress-bar, .quota-widget .bar { background-color: var(--cs-accent) !important; }
.toolbar a.button:hover, .toolbar a.button.active { color: var(--cs-accent) !important; }
#layout-sidebar, #layout-list, #layout-content { border-color: var(--cs-line) !important; }
.boxtitle, .header { letter-spacing: -.01em; }
.messagelist td.subject span.fromto, table.messagelist td span.date { opacity: .8; }

/* login */
body.task-login { background: radial-gradient(1200px 600px at 15% -10%, rgba(94,230,208,.16), transparent 60%), #0A0C10 !important; }
body.task-login #layout-content { background: transparent !important; }
body.task-login #layout-content > * { color: #E8ECF4; }
body.task-login #login-form { background: #10141B; border: 1px solid #1B2029; border-radius: 18px; padding: 28px 30px 22px; max-width: 400px;
  box-shadow: 0 30px 80px rgba(0,0,0,.45); }
body.task-login #login-form .form-control { background: #0D1016 !important; border: 1px solid #262D3A !important; color: #E8ECF4 !important; border-radius: 10px; height: 44px; }
body.task-login #login-form label, body.task-login #login-form td.title { color: #A9B1C2 !important; }
body.task-login #login-form button.mainaction { width: 100%; height: 44px; background: #5EE6D0 !important; color: #04110E !important; border: 0 !important; border-radius: 11px; font-weight: 650; }
body.task-login #logo { max-width: 260px; margin-bottom: 18px; }
body.task-login #login-footer, body.task-login .formbuttons + p { color: #6E788C !important; }
body.task-login #login-footer a { color: #8D96A8 !important; }
.cs-login-note { color: #8D96A8; font-size: 12.5px; text-align: center; margin: 14px 0 0; }

/* dark mode in the ClouderStack palette */
html.dark-mode body, html.dark-mode #layout { background: #0A0C10 !important; }
html.dark-mode #layout-sidebar, html.dark-mode #layout-list, html.dark-mode #layout-content,
html.dark-mode .header, html.dark-mode .footer, html.dark-mode .searchbar, html.dark-mode .header .toolbar,
html.dark-mode #layout-sidebar .header, html.dark-mode #layout-list .header, html.dark-mode #layout-content .header,
html.dark-mode .listing li, html.dark-mode table.records-table tr td, html.dark-mode .popupmenu, html.dark-mode .popover-body {
  background-color: #0D1016 !important; border-color: #1B2029 !important; }
html.dark-mode #layout-content, html.dark-mode #layout-content .iframe-wrapper { background-color: #0A0C10 !important; }
html.dark-mode .listing li.selected, html.dark-mode table.records-table tr.selected td, html.dark-mode table.records-table tr.focused td {
  background-color: rgba(94,230,208,.10) !important; }
html.dark-mode table.records-table tr.selected td a, html.dark-mode table.messagelist tr.selected td span.subject a,
html.dark-mode .listing li.selected > a { color: #7CF2DE !important; }
html.dark-mode .form-control, html.dark-mode .custom-select, html.dark-mode input, html.dark-mode textarea { background-color: #11151C !important; border-color: #262D3A !important; color: #E8ECF4 !important; }
html.dark-mode .btn-secondary, html.dark-mode .btn-default { background: #161B23 !important; border-color: #262D3A !important; color: #E8ECF4 !important; }
html.dark-mode .ui-dialog, html.dark-mode .ui-dialog-titlebar, html.dark-mode .ui-dialog-buttonpane { background-color: #10141B !important; border-color: #1B2029 !important; }
html.dark-mode .message-partheaders, html.dark-mode #message-header { background: transparent !important; }
html.dark-mode a, html.dark-mode .link, html.dark-mode a.button.link { color: #7CF2DE; }