/* Ital identity v5 (2026). Elastic by the Roundcube Dev Team, CC BY-SA 3.0. */
@font-face{font-family:Inter;src:url('../fonts/Inter.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:Inter;src:url('../fonts/Inter-Italic.woff2') format('woff2');font-style:italic;font-weight:100 900;font-display:swap}
:root{--ital-navy:#1a315b;--ital-blue:#215aa8;--ital-cloud:#e6eff9;--ital-green:#3bb270;--ital-soft:#e0f0e1;--ital-gray:#5a5b5b;--ital-yellow:#f4c440;--ital-border:#d5deea;--ital-focus:#215aa8}
body,button,input,select,textarea,.popover,.ui-widget{font-family:Inter,Arial,sans-serif}
body{color:var(--ital-navy)}
a{color:var(--ital-blue)}a:hover{color:var(--ital-navy)}
.btn-primary,.btn-primary.disabled,.btn-primary:disabled{background-color:var(--ital-blue);border-color:var(--ital-blue)}
.btn-primary:hover,.btn-primary:active,.btn-primary:not(:disabled):not(.disabled):active{background-color:var(--ital-navy);border-color:var(--ital-navy)}
.btn-primary:focus,.btn-primary:not(:disabled):not(.disabled):active:focus{box-shadow:0 0 0 .2rem rgba(33,90,168,.25)}
.form-control:focus,.custom-select:focus{border-color:var(--ital-blue);box-shadow:0 0 0 .2rem rgba(33,90,168,.16)}
.custom-control-input:checked~.custom-control-label:before{background-color:var(--ital-blue);border-color:var(--ital-blue)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--ital-focus);outline-offset:3px}
#layout-menu,#layout-menu .popover-header{background:var(--ital-navy)}
#layout-menu .popover-header{border-color:rgba(255,255,255,.15)}
#layout-menu #logo{display:block;width:64px;height:58px;max-width:calc(100% - 12px);max-height:58px;object-fit:contain;margin:0 auto;padding:0}
#taskmenu a{color:#fff}
#taskmenu a:hover,#taskmenu a.selected,#taskmenu a.selected:hover{background-color:var(--ital-blue);color:#fff}
#taskmenu a.compose{color:var(--ital-yellow)}
#taskmenu a.compose:hover,#taskmenu a.compose.selected{color:#fff;background-color:var(--ital-blue)}
#taskmenu a.logout{color:#fff}
#layout>div>.header{background-color:var(--ital-cloud);border-color:var(--ital-border);color:var(--ital-navy)}
#layout>div>.footer{border-color:var(--ital-border)}
.listing li.selected,.listing tr.selected>td,.listing li.selected>a,.listing li.selected>div>a{background-color:var(--ital-cloud);color:var(--ital-navy)}
.listing li.selected>a,.listing li.selected>div>a{box-shadow:inset 3px 0 var(--ital-blue)}
.listing li.selected>a:focus,.listing.focus tr.selected>td{background-color:var(--ital-cloud)}
.listing .unread,.messagelist tr.unread td.subject{font-weight:700}
.listing .unreadcount{background:var(--ital-blue);color:#fff}
.listing li>a:hover,.listing li>div>a:hover{background-color:var(--ital-cloud)}
.listing li a:focus-visible{outline-offset:-3px}
.menu a:not(.disabled):hover,.menu a:not(.disabled):focus{background-color:var(--ital-blue);color:#fff}
.toolbar a.button:hover{color:var(--ital-blue)}
.nav-pills .nav-link.active,.nav-pills .show>.nav-link{background-color:var(--ital-blue)}
.page-item.active .page-link{background-color:var(--ital-blue);border-color:var(--ital-blue)}
.progress-bar{background-color:var(--ital-blue)}
.quota-widget .value{color:var(--ital-gray)}
.ui-dialog .ui-dialog-titlebar{background:var(--ital-cloud);color:var(--ital-navy)}
.ui-widget-header .ui-state-active,.ui-widget-content .ui-state-active{background:var(--ital-blue);border-color:var(--ital-blue);color:#fff}
/* Official artwork keeps its original proportions and a clear area. */
.task-login #layout{overflow:auto;background:var(--ital-cloud)}
.task-login #layout-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,1fr);min-height:100%;height:auto;text-align:left;background:var(--ital-cloud)}
.ital-brand{position:relative;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:72px clamp(40px,6vw,100px);background:var(--ital-navy);color:#fff;min-height:100vh}
.ital-brand-copy{position:relative;z-index:1;max-width:530px}
.ital-eyebrow{display:block;font-size:.72rem;font-weight:700;letter-spacing:.16em;line-height:1.6}
.ital-brand .ital-eyebrow{color:var(--ital-yellow);margin-bottom:24px}
.ital-brand h2{font-size:clamp(2rem,3.2vw,3.7rem);line-height:1.16;font-weight:600;letter-spacing:-.045em;margin:0 0 24px}
.ital-brand p{font-size:1rem;line-height:1.7;color:var(--ital-cloud);margin:0}
.ital-mosaic{display:grid;grid-template-columns:repeat(2,120px);gap:24px;margin-top:56px;opacity:.13;pointer-events:none}
.ital-mosaic img{width:120px;height:120px;object-fit:contain}
.ital-brand-footer{position:relative;margin-top:56px;font-size:.78rem;color:var(--ital-cloud);letter-spacing:.025em}
.ital-login-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 48px;min-width:0;background:#fff;color:var(--ital-navy)}
.ital-login-content{width:100%;max-width:360px}
.task-login #logo{display:block;position:static;top:auto;width:240px;max-width:100%;height:auto;max-height:none;margin:0 0 52px}
.ital-login-heading{margin-bottom:30px}
.ital-login-heading .ital-eyebrow{color:var(--ital-blue);margin-bottom:10px}
.ital-login-heading h2{color:var(--ital-navy);font-size:1.9rem;letter-spacing:-.035em;font-weight:600;margin:0 0 12px}
.ital-login-heading p{color:var(--ital-gray);line-height:1.6;font-size:.92rem;margin:0}
.task-login #login-form{position:static;top:auto;width:100%;max-width:none;margin:0}
.task-login #login-form table{width:100%}
.task-login #login-form .input-group{margin-bottom:18px}
.task-login .form-control{min-height:48px;border-color:var(--ital-border);border-radius:6px;color:var(--ital-navy);background:#fff}
.task-login .input-group-text{background:var(--ital-cloud);border-color:var(--ital-border);color:var(--ital-blue)}
.task-login #rcmloginsubmit{min-height:48px;font-weight:600;border-radius:6px;margin-top:8px}
.task-login #login-footer{color:var(--ital-gray);font-size:.8rem;line-height:1.8;margin-top:24px;text-align:center}
.task-login #login-footer a{color:var(--ital-blue)}
.ital-login-signature{font-size:.72rem;color:var(--ital-gray);text-align:center;line-height:1.7;margin:56px 0 0}
.task-login #login-addon{position:static;margin:20px!important;max-height:none}
/* Inherit dark message/editor surfaces from Elastic. Login stays a light surface. */
.dark-mode{--ital-focus:#f4c440}
.dark-mode body{color:#e6eff9}.dark-mode a{color:#a8c9f5}
.dark-mode #layout-menu,.dark-mode #layout-menu .popover-header{background:var(--ital-navy)}
.dark-mode #layout>div>.header,.dark-mode .ui-dialog .ui-dialog-titlebar{background:#243b60;color:#e6eff9;border-color:#3c4d68}
.dark-mode .listing li.selected,.dark-mode .listing tr.selected>td,.dark-mode .listing li.selected>a,.dark-mode .listing li.selected>div>a,.dark-mode .listing.focus tr.selected>td{background:#29456d;color:#fff}
.dark-mode .listing li>a:hover,.dark-mode .listing li>div>a:hover{background:#243b60}
.dark-mode .ital-login-panel{background:#fff;color:var(--ital-navy)}
.dark-mode .task-login .form-control{background:#fff;color:var(--ital-navy);border-color:var(--ital-border)}
.dark-mode .task-login .input-group-text{background:var(--ital-cloud);color:var(--ital-blue);border-color:var(--ital-border)}
.dark-mode .task-login #login-footer{color:var(--ital-gray)}
.dark-mode .task-login #login-footer a{color:var(--ital-blue)}
@media(min-width:769px){#layout-sidebar{background:#f7f9fc}.dark-mode #layout-sidebar{background:#21292c}}
@media(max-width:900px){.task-login #layout-content{grid-template-columns:minmax(0,.85fr) minmax(390px,1fr)}.ital-brand{padding:44px 32px}.ital-brand h2{font-size:2.2rem}.ital-mosaic{grid-template-columns:repeat(2,88px)}.ital-mosaic img{width:88px;height:88px}.ital-login-panel{padding:44px 32px}}
@media(max-width:768px){.task-login #layout-content{display:flex;flex-direction:column}.ital-brand{display:none}.ital-login-panel{flex:1;min-height:100vh;width:100%;padding:48px 24px;border-top:6px solid var(--ital-navy)}.task-login #logo{margin-bottom:40px}.ital-login-signature{margin-top:40px}}
@media(max-width:320px){.ital-login-panel{padding:32px 20px}.ital-login-heading h2{font-size:1.6rem}.task-login #logo{width:200px}}
@media print{.ital-brand,.ital-login-signature{display:none}body{color:#000;background:#fff}}
/* Match Elastic's html.dark-mode specificity and intentional !important rules. */
#layout-menu .popover-header{background-color:var(--ital-navy)!important}
#taskmenu .special-buttons{background-color:var(--ital-navy)}
#taskmenu a.logout,#taskmenu a.logout:hover{color:#fff!important}
.folderlist li.mailbox .unreadcount,.folderlist li.mailbox.recent>a>.unreadcount{background:var(--ital-blue);color:#fff}
html.dark-mode #layout-menu{background:var(--ital-navy)}
html.dark-mode #layout-menu .popover-header{background-color:var(--ital-navy)!important}
html.dark-mode #layout-menu .special-buttons a:not(:focus){background:var(--ital-navy)}
html.dark-mode #layout-menu #logo,html.dark-mode .task-login #logo{opacity:1}
html.dark-mode #taskmenu a{color:#fff}
html.dark-mode #taskmenu .action-buttons a,html.dark-mode #taskmenu a.compose{color:var(--ital-yellow)}
html.dark-mode #taskmenu a.selected,html.dark-mode #taskmenu a:hover,html.dark-mode #taskmenu a:focus{background:var(--ital-blue);color:#fff}
html.dark-mode #layout>div>.header,html.dark-mode .ui-dialog .ui-dialog-titlebar{background-color:#243b60;color:var(--ital-cloud);border-color:#3c4d68}
html.dark-mode .listing li.selected,html.dark-mode .listing tr.selected>td,html.dark-mode .listing li.selected>a,html.dark-mode .listing li.selected>div>a,html.dark-mode .listing.focus tr.selected>td{background-color:#29456d;color:#fff}
html.dark-mode .listing li>a:hover,html.dark-mode .listing li>div>a:hover{background-color:#243b60}
html.dark-mode .folderlist li.mailbox .unreadcount{background:var(--ital-blue);color:#fff}
html.dark-mode a{color:#a8c9f5}
html.dark-mode .btn-primary,html.dark-mode .task-login #rcmloginsubmit{background-color:var(--ital-blue);border-color:var(--ital-blue);color:#fff}
html.dark-mode .btn-primary:hover,html.dark-mode .task-login #rcmloginsubmit:hover{background-color:var(--ital-navy);border-color:var(--ital-navy)}
html.dark-mode .task-login .form-control{background:#fff;color:var(--ital-navy);border-color:var(--ital-border)}
html.dark-mode .task-login .form-control:focus{border-color:var(--ital-blue);box-shadow:0 0 0 .2rem rgba(33,90,168,.16)}
html.dark-mode .task-login .input-group-text{background:var(--ital-cloud);color:var(--ital-blue);border-color:var(--ital-border)}
html.dark-mode .task-login #login-footer a{color:var(--ital-blue)}
