/* Hosey Mail 2026 — complete workspace design layer
 * Deliberately scoped to the Hosey-only skin. Preserves original Roundcube controls.
 * Loaded after hosey-ui.css to correct layout & control styling across all tasks.
 */
:root{
 --h-ink:#14373b;--h-deep:#102f37;--h-teal:#207f71;--h-teal-hover:#126657;
 --h-mint:#e7f4ec;--h-sage:#f3f8f3;--h-white:#fff;--h-border:#dce9df;
 --h-muted:#738a80;--h-gold:#e4b17b;--h-glow:0 8px 25px rgba(10,57,40,.07);
}
html:not(.iframe){height:100%!important}
body:not(.task-login):not(.task-error){
 height:100%!important;min-height:100%!important;
 background:#f3f8f3!important;color:var(--h-ink)!important;
}
body:not(.task-login):not(.task-error) #layout{
 display:flex!important;align-items:stretch!important;align-content:stretch!important;
 height:100%!important;min-height:100%!important;width:100%!important;
 background:#f3f8f3!important;overflow:hidden!important
}
body:not(.task-login):not(.task-error) #layout>div{
 box-sizing:border-box!important;min-height:0!important;height:100%!important;
 align-self:stretch!important;max-height:100%!important;
}
body:not(.task-login):not(.task-error) #layout-content{
 min-width:0!important;width:auto!important;flex:1 1 0!important;
 background:#fff!important;display:flex!important;flex-direction:column!important;
 overflow:hidden!important
}
body:not(.task-login):not(.task-error) #layout-list{
 min-width:260px!important;flex:0 1 31%!important;max-width:365px!important;
 background:#fff!important;overflow:hidden!important
}
body:not(.task-login):not(.task-error) #layout-sidebar:not(.sidebar-right){
 min-width:230px!important;flex:0 0 255px!important;max-width:255px!important;
 background:linear-gradient(140deg,#f5f9f5,#edf5ee)!important;overflow:hidden!important
}
body:not(.task-login):not(.task-error) #layout>div>.header{
 display:flex!important;flex:0 0 64px!important;height:64px!important;
 min-height:64px!important;align-items:center!important;
 background:#fff!important;color:#163d3b!important;
 border-bottom:1px solid #e2ebe4!important;
 padding:0 16px!important;line-height:normal!important
}
body:not(.task-login):not(.task-error) #layout>div>.header>.header-title{
 color:#173f3c!important;font-size:15px!important;font-weight:800!important;
 letter-spacing:-.025em!important;line-height:1.4!important
}
body:not(.task-login):not(.task-error) #layout>div>.scroller{
 min-height:0!important;flex:1 1 auto!important;overflow-y:auto!important;
 background:transparent!important
}
body:not(.task-login):not(.task-error) #layout-content>.iframe-wrapper{
 flex:1 1 auto!important;min-height:0!important;height:auto!important;
 display:flex!important;overflow:hidden!important;
 background:#fff!important
}
body:not(.task-login):not(.task-error) #layout-content>.iframe-wrapper>iframe{
 display:block!important;flex:1 1 auto!important;
 width:100%!important;height:100%!important;min-height:0!important;
 border:0!important;background:#fff!important
}
body:not(.task-login):not(.task-error) #layout-content>.content{
 min-height:0!important;overflow:auto!important;
 background:#fff!important
}
/* Main Hosey navigation is always dark with a complete, readable brand. */
body:not(.task-login):not(.task-error) #layout-menu{
 background:linear-gradient(164deg,#153c43,#102d35)!important;
 flex:0 0 216px!important;min-width:216px!important;max-width:216px!important;
 width:216px!important;height:100%!important;border-right:1px solid #28524c!important;
 box-shadow:none!important
}
body:not(.task-login):not(.task-error) #layout-menu>.popover-header{
 background:transparent!important;flex:0 0 88px!important;
 min-height:88px!important;height:88px!important;
 border-bottom:1px solid #ffffff18!important
}
body:not(.task-login):not(.task-error) .hosey-menu-brand{
 width:100%!important;min-height:80px!important;padding:12px 16px!important;
 display:flex!important;align-items:center!important;justify-content:flex-start!important
}
body:not(.task-login):not(.task-error) .hosey-brand-full{
 display:block!important;width:173px!important;max-width:100%!important;
 height:auto!important;max-height:65px!important;object-fit:contain!important
}
body:not(.task-login):not(.task-error) .hosey-brand-mark{display:none!important}
body:not(.task-login):not(.task-error) #taskmenu{
 width:216px!important;max-width:216px!important;min-width:216px!important;
 height:calc(100% - 88px)!important;box-sizing:border-box!important;
 padding:13px 0 125px!important;overflow-y:auto!important;overflow-x:hidden!important
}
body:not(.task-login):not(.task-error) #taskmenu>a,
body:not(.task-login):not(.task-error) #taskmenu .action-buttons>a,
body:not(.task-login):not(.task-error) #taskmenu .special-buttons>a{
 display:flex!important;flex-direction:row!important;
 justify-content:flex-start!important;align-items:center!important;gap:12px!important;
 width:calc(100% - 20px)!important;min-height:44px!important;
 margin:4px 10px!important;padding:10px 13px!important;
 border-radius:9px!important;line-height:1.4!important;
 text-align:left!important;color:#dbece4!important
}
body:not(.task-login):not(.task-error) #taskmenu a:before{
 display:inline-block!important;position:static!important;float:none!important;
 width:23px!important;flex:0 0 23px!important;
 text-align:center!important;font-size:18px!important;line-height:1.2!important
}
body:not(.task-login):not(.task-error) #taskmenu a .inner{
 display:block!important;min-width:0!important;width:auto!important;
 font-size:13px!important;font-weight:700!important;line-height:1.3!important;
 white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
 text-align:left!important
}
body:not(.task-login):not(.task-error) #taskmenu a.selected{
 background:#246d63!important;color:#fff!important;
 box-shadow:inset 3px 0 #e8b77e!important
}
body:not(.task-login):not(.task-error) #taskmenu .action-buttons{
 display:block!important;width:100%!important;margin:3px 0 18px!important
}
body:not(.task-login):not(.task-error) #taskmenu .action-buttons>a.compose{
 width:calc(100% - 20px)!important;margin:4px 10px!important;
 padding:13px!important;min-height:50px!important;
 background:#e6b77e!important;color:#133c3c!important;
 border:0!important;box-shadow:none!important;
 justify-content:center!important
}
body:not(.task-login):not(.task-error) #taskmenu .special-buttons{
 position:absolute!important;left:0!important;bottom:0!important;
 width:100%!important;padding:9px 0!important;
 background:#102d34!important;border-top:1px solid #ffffff16!important
}
body:not(.task-login):not(.task-error) #taskmenu .special-buttons>a{
 min-height:40px!important;color:#ecf3e9!important
}
/* Settings: visual sections, active navigation, spacious preference cards. */
body.task-settings #layout-sidebar{
 background:linear-gradient(160deg,#f4f9f5,#eaf3eb)!important;
 border-right:1px solid #dae7df!important
}
body.task-settings #settings-menu{
 padding:14px 12px!important;border:0!important;background:none!important;
}
body.task-settings #settings-menu li{
 border:0!important;border-radius:9px!important;overflow:hidden!important;
 margin:4px 0!important;background:transparent!important
}
body.task-settings #settings-menu li>a{
 display:flex!important;align-items:center!important;gap:10px!important;
 border-radius:9px!important;min-height:47px!important;
 padding:10px 13px!important;color:#3f665c!important;
 font-size:13px!important;font-weight:680!important
}
body.task-settings #settings-menu li>a:hover{
 background:#e3f2e8!important;color:#145c50!important
}
body.task-settings #settings-menu li.selected>a,
body.task-settings #settings-menu li>a.selected{
 background:#d8ede3!important;color:#176d5c!important;font-weight:830!important;
 border-left:3px solid #188a74!important;padding-left:10px!important
}
body.task-settings #settings-menu li>a:before{color:#2b8471!important}
body.task-settings #sections-table{padding:10px 9px!important;border:0!important;background:#fff!important}
body.task-settings #sections-table tr,
body.task-settings #sections-table li{
 border:0!important;border-radius:8px!important;overflow:hidden!important
}
body.task-settings #sections-table tr>td{
 border-bottom:1px solid #eef3ef!important;padding:12px 10px!important;
 font-size:13px!important;color:#3c655c!important
}
body.task-settings #sections-table tr.selected>td,
body.task-settings #sections-table li.selected,
body.task-settings #sections-table li.selected>a{
 background:#e1f3e8!important;color:#176c5b!important;font-weight:790!important
}
body.task-settings #sections-table tr:hover>td,
body.task-settings #sections-table li>a:hover{background:#f0f8f1!important}
body.task-settings #sections-table .section:before{color:#298b76!important}
body.task-settings #layout-content{background:#fff!important}
body.task-settings #preferences-frame{
 height:100%!important;min-height:100%!important;width:100%!important;border:0!important;
 background:#fff!important
}
/* The preference subpages load in iframes. Give them their own coherent Hosey style. */
html.iframe body:not(.task-login){background:#fff!important;color:#183c39!important}
html.iframe body:not(.task-login) .formcontent{
 padding:clamp(20px,3vw,38px)!important;background:#fff!important;
 width:100%!important;min-height:0!important
}
html.iframe body:not(.task-login) .propform{
 width:min(980px,100%)!important;border:0!important
}
html.iframe body:not(.task-login) .propform tr{
 border-bottom:1px solid #eef3ee!important
}
html.iframe body:not(.task-login) .propform td,
html.iframe body:not(.task-login) .propform th{
 padding:11px 13px!important;color:#32594f!important;font-size:13px!important
}
html.iframe body:not(.task-login) .propform label{
 color:#264d46!important;font-weight:700!important;font-size:12px!important
}
html.iframe body:not(.task-login) input[type=text],
html.iframe body:not(.task-login) input[type=email],
html.iframe body:not(.task-login) select,
html.iframe body:not(.task-login) textarea{
 border:1px solid #cfdfd5!important;border-radius:8px!important;
 color:#153d38!important;background:#fff!important;min-height:40px!important
}
html.iframe body:not(.task-login) .formbuttons{
 display:flex!important;justify-content:flex-start!important;
 padding:17px clamp(20px,3vw,38px)!important;border-top:1px solid #e1ece4!important;
 background:#fcfefa!important;gap:12px!important
}
html.iframe body:not(.task-login) .formbuttons button,
html.iframe body:not(.task-login) .formbuttons .btn{
 background:#187968!important;border-color:#187968!important;
 color:#fff!important;border-radius:9px!important;min-height:43px!important;
 padding:10px 23px!important;font-weight:750!important
}
/* Compose: professional writing workspace, generous left editor, compact right options.
   Important: do not rename Roundcube controls. Keep send/save/upload wiring intact. */
body.task-mail.action-compose #layout{
 background:#f4f8f4!important
}
body.task-mail.action-compose #layout-content{
 order:1!important;flex:1 1 0!important;min-width:0!important;
 height:100%!important;max-height:100%!important;
 overflow:hidden!important;background:#fff!important
}
body.task-mail.action-compose #layout-sidebar.sidebar-right{
 order:2!important;flex:0 0 334px!important;width:334px!important;
 min-width:285px!important;max-width:334px!important;
 height:100%!important;background:#f5f9f5!important;
 border-left:1px solid #dbe8df!important;
}
body.task-mail.action-compose #layout-content>.header{
 display:flex!important;flex:0 0 70px!important;
 height:70px!important;min-height:70px!important;
 padding:0 22px!important;background:#fff!important
}
body.task-mail.action-compose #layout-content>.header .header-title{
 font-size:18px!important;letter-spacing:-.04em!important;font-weight:850!important;
 color:#1b4740!important
}
body.task-mail.action-compose #messagetoolbar{
 display:flex!important;align-items:center!important;gap:3px!important;
 min-width:0!important;flex-wrap:nowrap!important
}
body.task-mail.action-compose #messagetoolbar a{
 min-height:46px!important;border-radius:8px!important;
 padding:6px 8px!important;color:#355e55!important
}
body.task-mail.action-compose #messagetoolbar a:hover{
 background:#ecf5ee!important;color:#176f60!important
}
body.task-mail.action-compose #compose-content{
 display:flex!important;flex:1 1 auto!important;flex-direction:column!important;
 overflow:hidden!important;min-height:0!important;height:auto!important;
 background:#fff!important;padding:0!important
}
body.task-mail.action-compose #compose-content>form{
 display:flex!important;flex:1 1 auto!important;flex-direction:column!important;
 min-height:0!important;max-height:100%!important;
 width:100%!important;overflow:hidden!important;margin:0!important
}
body.task-mail.action-compose #compose-headers{
 flex:0 0 auto!important;min-height:0!important;
 background:#fbfdfa!important;border-bottom:1px solid #e2ede5!important;
 padding:17px 24px 12px!important;margin:0!important
}
body.task-mail.action-compose #compose-headers>.compose-headers{
 margin:0!important;padding:0!important;width:100%!important
}
body.task-mail.action-compose #compose-headers .form-group.row{
 margin:0 0 12px!important;align-items:center!important;gap:0!important
}
body.task-mail.action-compose #compose-headers label{
 font-size:12px!important;font-weight:780!important;color:#4b7568!important
}
body.task-mail.action-compose #compose-headers .form-control,
body.task-mail.action-compose #compose-headers select,
body.task-mail.action-compose #compose-headers .recipient-input{
 border:1px solid #d1e2d6!important;background:#fff!important;
 border-radius:9px!important;color:#163e3c!important;
 box-shadow:none!important;min-height:44px!important
}
body.task-mail.action-compose #compose-headers .form-control:focus,
body.task-mail.action-compose #compose-headers .recipient-input:focus{
 border-color:#268e76!important;box-shadow:0 0 0 3px #c2e8d638!important
}
body.task-mail.action-compose #composebodycontainer{
 display:flex!important;flex-direction:column!important;
 flex:1 1 auto!important;min-height:0!important;max-height:none!important;
 margin:0!important;padding:13px 22px 0!important;
 overflow:hidden!important;background:#fff!important
}
body.task-mail.action-compose #composebodycontainer textarea{
 display:block!important;flex:1 1 auto!important;
 height:100%!important;min-height:140px!important;max-height:100%!important;
 width:100%!important;border:1px solid #dfebe3!important;
 background:#fff!important;border-radius:10px!important;
 padding:15px!important;resize:none!important
}
body.task-mail.action-compose #composebodycontainer .tox-tinymce,
body.task-mail.action-compose #composebodycontainer .mce-tinymce,
body.task-mail.action-compose #composebodycontainer .tox{
 flex:1 1 auto!important;min-height:150px!important;
 height:100%!important;max-height:100%!important;border-radius:10px!important;
 border:1px solid #d9e7dd!important;overflow:hidden!important
}
body.task-mail.action-compose #compose-content>.formbuttons{
 display:flex!important;flex:0 0 76px!important;align-items:center!important;
 justify-content:flex-start!important;gap:12px!important;
 height:76px!important;min-height:76px!important;
 width:100%!important;padding:12px 23px!important;
 background:#fff!important;border-top:1px solid #dfeae2!important;
 box-shadow:0 -8px 25px rgba(19,64,43,.04)!important;
 position:sticky!important;bottom:0!important;z-index:12!important;
 visibility:visible!important
}
body.task-mail.action-compose #compose-content>.formbuttons .send{
 display:inline-flex!important;align-items:center!important;justify-content:center!important;
 min-width:160px!important;min-height:48px!important;
 padding:12px 26px!important;background:#187c6c!important;
 color:#fff!important;border:1px solid #187c6c!important;
 font-size:14px!important;font-weight:820!important;border-radius:9px!important;
 box-shadow:0 6px 15px #176a4d21!important;visibility:visible!important
}
body.task-mail.action-compose #compose-content>.formbuttons .send:hover{
 background:#0f6255!important;border-color:#0f6255!important
}
body.task-mail.action-compose #layout-sidebar.sidebar-right>.header{
 flex:0 0 70px!important;height:70px!important;
 min-height:70px!important;padding:0 17px!important;
 background:#f2f8f2!important;color:#245449!important
}
body.task-mail.action-compose #layout-sidebar.sidebar-right>.header .header-title{
 color:#244e45!important;font-size:15px!important;font-weight:800!important
}
body.task-mail.action-compose #layout-sidebar.sidebar-right>.scroller{
 padding:17px 16px 22px!important;background:#f4f8f4!important;
 overflow-y:auto!important
}
body.task-mail.action-compose #compose-attachments{
 margin:0 0 20px!important;border:1px dashed #b9d9c4!important;
 border-radius:13px!important;background:#eaf4ec!important;
 min-height:174px!important;overflow:hidden!important
}
body.task-mail.action-compose #compose-attachments .upload-form{
 padding:18px 10px!important;text-align:center!important;
 background:transparent!important;color:#55766a!important
}
body.task-mail.action-compose #compose-attachments button.attach{
 display:inline-flex!important;justify-content:center!important;align-items:center!important;
 margin:14px auto 0!important;min-height:39px!important;
 background:#e2f0e8!important;border:1px solid #b8d5c3!important;
 color:#166c5b!important;border-radius:8px!important;font-weight:800!important
}
body.task-mail.action-compose #compose-attachments button.attach:hover{
 background:#d2e8dc!important
}
body.task-mail.action-compose #compose-options{
 padding:3px 0 5px!important;margin:0!important;
 background:transparent!important;font-size:12px!important;color:#2e594e!important
}
body.task-mail.action-compose #compose-options>.form-group{
 margin:0!important;padding:11px 0!important;
 border-bottom:1px solid #e1eae2!important;min-height:48px!important;align-items:center!important
}
body.task-mail.action-compose #compose-options .col-form-label{
 padding:0!important;font-size:12px!important;line-height:1.5!important;
 font-weight:650!important;color:#365e55!important
}
body.task-mail.action-compose #compose-options .custom-select,
body.task-mail.action-compose #compose-options select{
 min-height:38px!important;border:1px solid #ccdfd4!important;
 border-radius:8px!important;background:#fff!important;color:#204c44!important
}
body.task-mail.action-compose #compose-options input[type=checkbox]{
 accent-color:#238c77!important
}
/* Settings and addressbook list refinements. */
body.task-addressbook #layout-sidebar,
body.task-settings #layout-sidebar{background:#eff6ef!important}
body.task-addressbook #contacts-table tr,
body.task-settings #sections-table tr{
 border-bottom:1px solid #e5eee7!important
}
body.task-addressbook #contacts-table tr:hover,
body.task-settings #sections-table tr:hover{
 background:#ecf7ef!important
}
body:not(.task-login) .dropdown-menu,
body:not(.task-login) .popupmenu{
 background:#fff!important;border:1px solid #d6e7da!important;border-radius:11px!important;
 box-shadow:0 16px 38px rgba(16,65,47,.13)!important
}
body:not(.task-login) .popupmenu li a:hover{background:#e5f4ea!important}
body:not(.task-login) input:focus,
body:not(.task-login) select:focus,
body:not(.task-login) textarea:focus{
 outline-color:#2a957f!important
}
/* Allow normal composing, settings and reading in compact viewports. */
@media(max-width:1200px){
 body.task-mail.action-compose #layout-sidebar.sidebar-right{
   flex-basis:292px!important;width:292px!important;max-width:292px!important;min-width:255px!important
 }
 body.task-mail.action-compose #compose-headers{padding:14px 16px 10px!important}
 body.task-mail.action-compose #composebodycontainer{padding:11px 14px 0!important}
 body.task-mail.action-compose #compose-content>.formbuttons{padding:10px 15px!important}
 body:not(.task-login):not(.task-error) #layout-menu{
   flex-basis:190px!important;min-width:190px!important;max-width:190px!important;width:190px!important
 }
 body:not(.task-login):not(.task-error) #taskmenu{width:190px!important;max-width:190px!important;min-width:190px!important}
 body:not(.task-login):not(.task-error) #layout-sidebar:not(.sidebar-right){
   flex-basis:220px!important;max-width:220px!important;min-width:200px!important
 }
}
@media(max-width:900px){
 body:not(.task-login):not(.task-error) #layout-menu{
   flex:0 0 75px!important;min-width:75px!important;max-width:75px!important;width:75px!important
 }
 body:not(.task-login):not(.task-error) #taskmenu{
   width:75px!important;max-width:75px!important;min-width:75px!important
 }
 body:not(.task-login):not(.task-error) #taskmenu a .inner{display:none!important}
 body:not(.task-login):not(.task-error) .hosey-brand-full{display:none!important}
 body:not(.task-login):not(.task-error) .hosey-brand-mark{
   display:block!important;width:42px!important;height:42px!important
 }
 body:not(.task-login):not(.task-error) .hosey-menu-brand{
   padding:11px!important;justify-content:center!important
 }
 body:not(.task-login):not(.task-error) #layout-list{min-width:200px!important}
 body.task-mail.action-compose #layout-sidebar.sidebar-right{
   flex-basis:260px!important;width:260px!important;max-width:260px!important
 }
}
@media(max-width:767px){
 /* Restore Roundcube native mobile view modes, avoiding desktop panel overrides. */
 body:not(.task-login):not(.task-error) #layout>div{
   height:auto!important;max-height:none!important
 }
 body:not(.task-login):not(.task-error) #layout-menu{
   flex:initial!important;width:100%!important;max-width:100%!important;min-width:0!important;
   height:auto!important
 }
 body:not(.task-login):not(.task-error) #taskmenu{
   width:100%!important;max-width:100%!important;min-width:0!important;height:auto!important
 }
 body:not(.task-login):not(.task-error) #taskmenu a .inner{display:block!important}
 body:not(.task-login):not(.task-error) .hosey-brand-full{display:block!important;width:170px!important}
 body:not(.task-login):not(.task-error) .hosey-brand-mark{display:none!important}
 body:not(.task-login):not(.task-error) #layout-list,
 body:not(.task-login):not(.task-error) #layout-sidebar,
 body:not(.task-login):not(.task-error) #layout-content{
   width:100%!important;max-width:100%!important;min-width:0!important;
   flex:1 1 auto!important
 }
 body.task-mail.action-compose #layout-sidebar.sidebar-right{
   width:100%!important;max-width:100%!important;min-width:0!important
 }
 body.task-mail.action-compose #compose-content>.formbuttons{
   flex:0 0 70px!important;height:70px!important;min-height:70px!important;
 }
 body.task-mail.action-compose #compose-content>.formbuttons .send{min-width:130px!important}
 body.task-mail.action-compose #composebodycontainer{min-height:170px!important}
}
@media(prefers-reduced-motion:reduce){
 *{scroll-behavior:auto!important}
}
/* Hosey Mail — accessible primary send action in the compose header. */
body.task-mail.action-compose #messagetoolbar a.hosey-send-top{
 display:inline-flex!important;align-items:center!important;justify-content:center!important;
 flex:0 0 auto!important;gap:6px!important;min-height:43px!important;
 padding:9px 17px!important;margin:0 9px 0 3px!important;
 border:1px solid #177766!important;border-radius:9px!important;
 background:#177766!important;color:#fff!important;
 box-shadow:0 5px 15px rgba(17,108,81,.16)!important;
 font-size:12px!important;font-weight:800!important;line-height:1.3!important
}
body.task-mail.action-compose #messagetoolbar a.hosey-send-top .inner{
 display:inline!important;visibility:visible!important;
 color:#fff!important;font-weight:800!important;font-size:12px!important;
 white-space:nowrap!important;text-overflow:clip!important
}
body.task-mail.action-compose #messagetoolbar a.hosey-send-top:hover,
body.task-mail.action-compose #messagetoolbar a.hosey-send-top:focus{
 background:#0f6052!important;border-color:#0f6052!important;color:#fff!important
}
body.task-mail.action-compose #messagetoolbar a.hosey-send-top.disabled{
 opacity:.54!important;cursor:not-allowed!important
}
@media(max-width:1080px){
 body.task-mail.action-compose #messagetoolbar a.hosey-send-top{padding:8px 10px!important}
}
@media(max-width:767px){
 body.task-mail.action-compose #messagetoolbar a.hosey-send-top{padding:9px 12px!important;margin-right:4px!important}
}

/* Hosey dark mode: consistent across reading, settings, contacts and compose. */
html.dark-mode body:not(.task-login):not(.task-error),
html.dark-mode body:not(.task-login):not(.task-error) #layout{
 background:#172e34!important;color:#e7f2ed!important
}
html.dark-mode body:not(.task-login):not(.task-error) #layout-content,
html.dark-mode body:not(.task-login):not(.task-error) #layout-list,
html.dark-mode body:not(.task-login):not(.task-error) #layout-content>.iframe-wrapper,
html.dark-mode body:not(.task-login):not(.task-error) #layout-content>.content{
 background:#203a3d!important;color:#e7f1eb!important
}
html.dark-mode body:not(.task-login):not(.task-error) #layout-sidebar:not(.sidebar-right),
html.dark-mode body.task-settings #layout-sidebar,
html.dark-mode body.task-addressbook #layout-sidebar{
 background:#213f3e!important;color:#e7f1eb!important;border-color:#345a53!important
}
html.dark-mode body:not(.task-login):not(.task-error) #layout>div>.header{
 background:#284849!important;border-color:#3f5e59!important;color:#eaf5ef!important
}
html.dark-mode body:not(.task-login):not(.task-error) #layout>div>.header>.header-title{
 color:#eaf5ef!important
}
html.dark-mode body.task-settings #sections-table,
html.dark-mode body.task-settings #sections-table tr>td{
 background:#203a3d!important;border-color:#36574f!important;color:#d8e9df!important
}
html.dark-mode body.task-settings #sections-table tr.selected>td,
html.dark-mode body.task-settings #sections-table li.selected{
 background:#2c594b!important;color:#eefaf1!important
}
html.dark-mode body.task-settings #settings-menu li>a{
 color:#d4e8dc!important
}
html.dark-mode body.task-settings #settings-menu li.selected>a,
html.dark-mode body.task-settings #settings-menu li>a:hover{
 background:#2b584f!important;color:#e8f6ef!important
}
html.dark-mode body.task-mail.action-compose #layout-sidebar.sidebar-right,
html.dark-mode body.task-mail.action-compose #layout-sidebar.sidebar-right>.scroller,
html.dark-mode body.task-mail.action-compose #layout-sidebar.sidebar-right>.header{
 background:#213c40!important;border-color:#3b5b54!important;color:#e6f4ed!important
}
html.dark-mode body.task-mail.action-compose #compose-content,
html.dark-mode body.task-mail.action-compose #compose-headers,
html.dark-mode body.task-mail.action-compose #composebodycontainer,
html.dark-mode body.task-mail.action-compose #compose-content>.formbuttons{
 background:#203a3d!important;border-color:#3b5b54!important;color:#e6f4ed!important
}
html.dark-mode body.task-mail.action-compose #compose-headers label,
html.dark-mode body.task-mail.action-compose #compose-options .col-form-label{
 color:#d5e7dd!important
}
html.dark-mode body.task-mail.action-compose #compose-headers .form-control,
html.dark-mode body.task-mail.action-compose #compose-headers select,
html.dark-mode body.task-mail.action-compose #compose-headers .recipient-input,
html.dark-mode body.task-mail.action-compose #composebodycontainer textarea,
html.dark-mode body.task-mail.action-compose #compose-options select{
 background:#294a49!important;border-color:#40635a!important;color:#f2faf5!important
}
html.dark-mode body.task-mail.action-compose #compose-attachments{
 background:#294a44!important;border-color:#4c7566!important;color:#e7f4ec!important
}
html.dark-mode body.task-mail.action-compose #compose-options>.form-group{
 border-color:#39574e!important
}
html.dark-mode body:not(.task-login) .popupmenu,
html.dark-mode body:not(.task-login) .dropdown-menu{
 background:#284546!important;border-color:#42635a!important;color:#eaf5ee!important
}
html.iframe.dark-mode body:not(.task-login),
html.iframe.dark-mode body:not(.task-login) .formcontent,
html.iframe.dark-mode body:not(.task-login) .formbuttons{
 background:#203a3d!important;color:#ecf4ed!important;border-color:#36574e!important
}
html.iframe.dark-mode body:not(.task-login) .propform td,
html.iframe.dark-mode body:not(.task-login) .propform th,
html.iframe.dark-mode body:not(.task-login) .propform label{
 color:#e2f0e7!important;border-color:#3a5851!important
}
html.iframe.dark-mode body:not(.task-login) input[type=text],
html.iframe.dark-mode body:not(.task-login) input[type=email],
html.iframe.dark-mode body:not(.task-login) textarea,
html.iframe.dark-mode body:not(.task-login) select{
 background:#2b4a4a!important;color:#e8f3eb!important;border-color:#436559!important
}

/* Own screen hierarchy inside Hosey's preference editor and composer. */
html.iframe body:not(.task-login) .hosey-preferences-intro{
 padding:27px clamp(20px,3vw,38px) 22px!important;
 background:linear-gradient(110deg,#f1f9f3,#fbfefb)!important;
 border-bottom:1px solid #deebe1!important;
}
.hosey-preferences-intro .hosey-kicker{
 display:block;color:#238972!important;font-size:10px!important;
 font-weight:850!important;letter-spacing:.15em!important;
 margin-bottom:12px!important
}
.hosey-preferences-intro h2{
 font-family:"Segoe UI Variable","Segoe UI",system-ui,sans-serif!important;
 color:#1c4841!important;font-size:27px!important;font-weight:750!important;
 letter-spacing:-.047em!important;line-height:1.2!important;
 margin:0 0 9px!important;padding:0!important
}
.hosey-preferences-intro p{
 color:#749087!important;font-size:12px!important;
 line-height:1.7!important;margin:0!important
}
body.task-mail.action-compose #composebodycontainer .hosey-editor-label{
 display:block!important;flex:0 0 23px!important;
 height:23px!important;margin:0 0 7px!important;
 font-size:10px!important;line-height:23px!important;
 font-weight:850!important;letter-spacing:.14em!important;
 color:#258372!important
}
html.iframe.dark-mode body:not(.task-login) .hosey-preferences-intro{
 background:#284744!important;border-color:#426359!important
}
html.iframe.dark-mode body:not(.task-login) .hosey-preferences-intro h2{
 color:#e7f6ef!important
}
html.iframe.dark-mode body:not(.task-login) .hosey-preferences-intro p{
 color:#b5cfc3!important
}
html.dark-mode body.task-mail.action-compose #composebodycontainer .hosey-editor-label{
 color:#94dec0!important
}