/* Roommate Finder palette on Roundcube's responsive Elastic interface. */
:root {
    --rf-ink: #172b35;
    --rf-accent: #146b60;
    --rf-accent-hover: #0c5148;
    --rf-border: #dce6e3;
}
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
html:not(.dark-mode) body { color: var(--rf-ink); }
html:not(.dark-mode) #layout-menu { background: #153c37; }
#taskmenu a.selected, #taskmenu a:hover { background-color: #246457; }
#taskmenu a.compose { color: #fff; background: var(--rf-accent); }
#taskmenu a.compose:hover { background: var(--rf-accent-hover); }
html:not(.dark-mode) #layout-sidebar { background: #f4f8f6; }
html:not(.dark-mode) #layout-sidebar .header { background: #f4f8f6; border-color: var(--rf-border); }
html:not(.dark-mode) .listing li.selected,
html:not(.dark-mode) .listing tr.selected td { background: #e0eee8; color: #153c37; }
html:not(.dark-mode) .listing tr.unread td { font-weight: 650; }
html:not(.dark-mode) .listing li > a:hover { background-color: #eaf2ed; }
.btn-primary, .btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active { background-color: var(--rf-accent); border-color: var(--rf-accent); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--rf-accent-hover); border-color: var(--rf-accent-hover); }
.form-control:focus { border-color: #439584; box-shadow: 0 0 0 .2rem rgb(20 107 96 / 16%); }
html:not(.dark-mode) .header { border-color: var(--rf-border); }
html:not(.dark-mode) body.task-login { background: #edf3ef; }
html:not(.dark-mode) body.task-login #layout-content { background: transparent; }
body.task-login #layout-content { padding: 7vh 1.5rem 3rem; }
body.task-login #logo { width: 290px; height: 62px; max-width: 100%; max-height: none; margin: 0 auto 2rem; }
body.task-login #login-form { max-width: 400px; padding: 2rem; border-radius: 16px; box-shadow: 0 16px 55px rgb(20 50 40 / 9%); }
html:not(.dark-mode) body.task-login #login-form { background: #fff; border: 1px solid var(--rf-border); }
body.task-login #login-form .form-control { min-height: 46px; }
body.task-login #login-form .btn { min-height: 46px; font-weight: 600; }
body.task-login #login-footer { line-height: 1.6; padding-top: 1.5rem; }
html.dark-mode body.task-login #login-form { background: #24312e; border: 1px solid #3b4b46; }
html.dark-mode #layout-menu { background: #132b27; }
@media (max-width: 480px) {
    body.task-login #layout-content { padding: 3rem 1rem; }
    body.task-login #login-form { padding: 1.5rem; width: 100%; }
    body.task-login #logo { width: 260px; }
}