@font-face{font-family:XtraArabic;src:url(assets/fonts/IBMPlexSansArabic-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:XtraArabic;src:url(assets/fonts/IBMPlexSansArabic-Medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:XtraArabic;src:url(assets/fonts/IBMPlexSansArabic-SemiBold.woff2) format('woff2');font-weight:600;font-display:swap}
:root{color-scheme:light;--xtra-red:#b8402f;--xtra-ink:#282c30;--xtra-muted:#767675;--xtra-line:#eeeae5;--xtra-soft:#fbefeb}
html,body{background:#fff;color:var(--xtra-ink);font-family:XtraArabic,Arial,sans-serif}
html[lang^=ar] body{direction:rtl;text-align:right}
button,input,select,textarea,.btn{font-family:inherit}
a{color:var(--xtra-red)}
.btn-primary{background:var(--xtra-red);border-color:var(--xtra-red)}
.btn-primary:hover,.btn-primary:focus{background:#963222;border-color:#963222}
.btn:focus,.form-control:focus,.custom-select:focus{box-shadow:0 0 0 .18rem #b8402f1c;border-color:#b8402f}
button:focus-visible,a:focus-visible{outline:2px solid var(--xtra-red);outline-offset:3px}
#layout-menu,#layout-menu .popover-header,#taskmenu,#layout-sidebar,#layout-list,#layout-content{background:#fff;color:var(--xtra-ink)}
#layout>div>.header,#layout>div>.footer,.searchbar{background:#fff;border-color:var(--xtra-line);color:var(--xtra-muted)}
#layout-menu{border-inline-end:1px solid var(--xtra-line)}
#taskmenu a{color:#737572;background:transparent}
#taskmenu a:hover,#taskmenu a.selected{color:var(--xtra-red);background:var(--xtra-soft)}
#taskmenu a.compose{background:var(--xtra-red);color:#fff}
#taskmenu a.logout{color:#737572}
#taskmenu .special-buttons{background:white}
html[lang^=ar] #taskmenu .special-buttons{left:auto;right:0}
.listing li.selected,.listing li.selected>a,.listing tbody tr.selected td{background:var(--xtra-soft);color:var(--xtra-ink)}
.listing li>a{border-color:transparent}
.listing li>a:hover{background:#f6f5f2;color:var(--xtra-ink)}
.listing li.selected>a{color:var(--xtra-red);font-weight:600}
.listing li.selected>div>a{background:var(--xtra-soft);color:var(--xtra-red);font-weight:500}
#mailboxlist li.selected>a{background:var(--xtra-soft)!important;color:var(--xtra-red)}
.listing li>div>a{border-color:transparent}
.listing li.selected>a:before{color:var(--xtra-red)}
.listing li>a,.listing tbody td{border-color:var(--xtra-line)}
.folderlist li{margin:3px 10px}
.folderlist li>a{border-radius:8px;padding-top:4px;padding-bottom:4px}
.folderlist li.unread>a>.unreadcount{background:var(--xtra-red);color:#fff}
/* Center subscription switches in the folder row, independently of child folders. */
.task-settings #subscription-table{--xtra-folder-row-height:44px}
html.touch .task-settings #subscription-table{--xtra-folder-row-height:48px}
.task-settings #subscription-table li.mailbox>a{height:var(--xtra-folder-row-height);line-height:calc(var(--xtra-folder-row-height) - 8px);padding-right:48px}
.task-settings #subscription-table li.mailbox>.custom-switch{height:var(--xtra-folder-row-height);display:flex;align-items:center;top:0}
.task-settings #subscription-table li.mailbox>.custom-switch .custom-control-label{height:16px;min-height:0;line-height:16px}
.task-settings #subscription-table li.mailbox>.custom-switch .custom-control-label::before{top:0;margin:0}
.task-settings #subscription-table li.mailbox>.custom-switch .custom-control-label::after{top:2px;margin:0}
.messagelist tr{height:66px}
/* Keep message actions in the toolbar; suppress Elastic's floating row menu. */
.task-mail .listing-hover-menu{display:none!important}
.task-mail #layout-list,.task-mail #layout-list>.header,.task-mail #layout-list>.footer,.task-mail #layout-list .searchbar,.task-mail #messagelist-content{background:#f5f5f4}
#messagelist td{background:transparent}
#messagelist td.subject{padding:13px 16px;min-width:0;box-sizing:border-box}
#messagelist td.subject span.fromto{padding-inline-start:0;padding-inline-end:12px}
#messagelist tr:hover:not(.selected)>td{background:#ececea}
/* Elastic's blue focus border also appears after mouse selection. Reserve a
   deliberate focus outline for keyboard navigation instead. */
#messagelist.focus tbody tr.focused>td:first-child,#messagelist.focus:not(.withselection) tbody tr.focused>td.selection+td{border-left-color:transparent}
#messagelist td.subject:focus{outline:0}
html.xtra-keyboard-navigation #messagelist td.subject:focus{outline:2px solid var(--xtra-red);outline-offset:-3px}
.messagelist tr.unread td{background:#fcfaf7}
.messagelist tr.selected td{background:var(--xtra-soft)!important}
.messagelist td.subject span.subject{font-size:14px;font-weight:400}
.messagelist tr.unread td.subject span.subject{font-weight:600}
.messagelist td.subject span.fromto,.messagelist td.subject span.date{color:#747773}
.toolbar a.button,.toolbar a{color:#737572}
.toolbar a:not(.disabled):hover{color:var(--xtra-red)}
.listing .flagged:before,.messagelist .flagged:before{color:var(--xtra-red)!important}
.menu a:focus,.menu a:hover{background:var(--xtra-soft);color:var(--xtra-red)}
.form-control,.custom-select{border-color:#dedbd5;border-radius:7px}
.ui-dialog{border-radius:12px;box-shadow:0 16px 60px #282c3020;border-color:var(--xtra-line)}
.ui-dialog .ui-dialog-titlebar{background:#fff;color:var(--xtra-ink);border-bottom:1px solid var(--xtra-line)}
/* Share icon alignment across all dialog actions, including Save and Cancel. */
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.btn::before{float:none;flex:0 0 1em;width:1em;height:1em;line-height:1;margin:0!important}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button.save::before{content:'\f0c7'}
/* Preferences render Save inside a framed form, outside the dialog footer. */
.task-settings .formbuttons .btn.submit{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.task-settings .formbuttons .btn.submit::before{content:'\f0c7';float:none;flex:0 0 1em;width:1em;height:1em;line-height:1;margin:0!important}
/* Search buttons also appear in inline filter panels, outside dialog footers. */
button.btn.search{display:inline-flex;align-items:center;justify-content:center;gap:8px}
button.btn.search::before{content:'\f002';float:none;flex:0 0 1em;width:1em;height:1em;line-height:1;margin:0!important}
/* Keep inline compose action icons aligned and spaced beside their labels. */
#compose-attachments .upload-form button.attach,.task-mail.action-compose .formbuttons .btn.extwin{display:inline-flex;align-items:center;justify-content:center;gap:8px}
#compose-attachments .upload-form button.attach::before,.task-mail.action-compose .formbuttons .btn.extwin::before{float:none;flex:0 0 1em;width:1em;height:1em;line-height:1;margin:0!important}
.ui-widget{font-family:XtraArabic,Arial,sans-serif}
#xtra-topbar{height:80px;position:absolute;inset:0 0 auto;display:flex;align-items:center;gap:22px;padding:0 30px;border-bottom:1px solid var(--xtra-line);background:#fff;z-index:100}
.xtra-brand{width:190px;flex-shrink:0;display:flex;align-items:center;height:72px;overflow:hidden}
.xtra-brand img{width:190px;height:auto}
.xtra-workspace-label{font-size:12px;color:var(--xtra-muted)}
.xtra-profile{margin-inline-start:auto;display:flex;align-items:center;gap:12px;font-size:12px}
.xtra-avatar{width:35px;height:35px;background:#f3eee7;border:1px solid #e8ded4;border-radius:50%;display:grid;place-items:center;color:#6e5348;font-family:Georgia,serif;font-size:19px}
.xtra-workspace #layout{position:absolute;inset:80px 0 0;height:calc(100% - 80px)}
.xtra-compose{display:none}
#xtra-topbar .searchbar{flex:1;max-width:680px;border:0;background:#f6f5f2;border-radius:11px;height:48px;color:#696c69}
#xtra-topbar .searchbar input{background:transparent;font-size:14px}
#xtra-topbar .searchbar a{background:transparent;color:#737572}
/* Search options replace list controls while retaining mobile navigation. */
.xtra-search-mode-title,.xtra-search-close{display:none}
.task-mail #layout-list:has(>#searchmenu:not(.hidden)) #messagelist-header>.toolbar,
.task-mail #layout-list:has(>#searchmenu:not(.hidden)) #messagelist-header>.refresh,
.task-mail #layout-list:has(>#searchmenu:not(.hidden)) #messagelist-header>.toolbar-menu-button,
.task-mail #layout-list:has(>#searchmenu:not(.hidden)) #messagelist-header>.header-title,
.task-mail #layout-list:has(>#searchmenu:not(.hidden))>.footer{display:none!important}
.task-mail #layout-list:has(>#searchmenu:not(.hidden)) .xtra-search-mode-title{display:block;flex:1;align-self:center;margin:0;padding-inline:14px;font-size:15px;font-weight:500;line-height:1.5;text-align:start;color:var(--xtra-ink)}
.task-mail #layout-list:has(>#searchmenu:not(.hidden)) .xtra-search-close{display:inline-flex;align-items:center;align-self:center;margin-inline:8px;padding:7px 12px;border:1px solid var(--xtra-line);border-radius:7px;background:#fff;color:var(--xtra-red);font-size:12px;line-height:1.5}
#layout-menu .popover-header img{max-width:60px}
#layout-content{min-width:0}
#compose-content>.formcontent{overflow-x:hidden;min-width:0}
#compose-headers .row{margin-right:0;margin-left:0}
#compose-headers .col-form-label{padding-inline:8px;white-space:normal}
/* Elastic parks recipient textareas at -5000px. Keep them accessible to the
   form serializer without creating a large RTL scrollable area. */
.js #compose-headers .input-group>textarea{left:0!important;right:auto!important;top:0!important;width:1px!important;height:1px!important;clip-path:inset(50%);overflow:hidden;pointer-events:none}
.xtra-compose-mobile{display:none}
.tox .tox-toolbar,.tox .tox-toolbar__primary{background:#faf9f7!important}
.task-login #layout{background:#fff;display:block;overflow:auto}
.task-login #layout-content.xtra-login{width:min(1080px,100%);height:100%;min-height:700px;margin:auto;display:grid;grid-template-columns:1.1fr 1fr;align-content:center;align-items:center;gap:90px;padding:70px 60px;position:relative;max-width:none}
.xtra-login-heading{text-align:start}
.task-login #logo{display:block;float:none;max-height:none;width:260px;max-width:100%;margin:0 -18px 25px 0;position:static}
.xtra-kicker{display:block;color:var(--xtra-red);font-size:13px;font-weight:500;margin-bottom:18px}
.xtra-login-heading h1{font-size:46px;font-weight:500;line-height:1.55;letter-spacing:-1px;margin:0 0 18px}
.xtra-login-heading p{color:var(--xtra-muted);font-size:16px}
.task-login #login-form{width:100%;max-width:365px;margin:0;padding:0;text-align:start;top:auto}
.task-login #login-form h2{font-size:23px;font-weight:500;margin-bottom:12px}
.xtra-login-note{font-size:13px;line-height:1.9;color:var(--xtra-muted);margin-bottom:30px}
.task-login #login-form .input-group{margin-bottom:18px}
.task-login #login-form .form-control{height:50px;background:#fff}
.task-login #login-form .input-group-text{background:#faf9f6;border-color:#dedbd5;color:#a7a39c}
.task-login #login-form button{height:50px;border-radius:7px;font-size:15px;margin-top:6px}
.task-login #login-footer{display:flex;justify-content:space-between;gap:14px;font-size:11px;margin-top:25px;color:var(--xtra-muted)}
.xtra-login-bottom{position:absolute;bottom:30px;inset-inline:60px;display:flex;justify-content:space-between;align-items:center;padding-top:22px;border-top:1px solid var(--xtra-line);font-size:12px;color:var(--xtra-muted)}
.xtra-login-bottom a{color:var(--xtra-muted)}
@media(min-width:1025px){
 .xtra-workspace #layout-sidebar{min-width:215px;width:235px;max-width:260px;border-color:var(--xtra-line)}
 .xtra-workspace #layout-menu{width:68px;min-width:68px}
 .xtra-workspace #taskmenu a{width:auto;border-radius:9px;margin:8px 6px;padding-top:9px;padding-bottom:9px;font-size:10px}
 .xtra-workspace #taskmenu .special-buttons{width:67px}
 .xtra-workspace #layout-menu .popover-header{display:none}
 .xtra-workspace.task-mail:not(.action-compose) #taskmenu .action-buttons{display:none}
 .xtra-compose{display:block;margin:18px 18px 22px;padding:14px 22px;background:var(--xtra-red);color:#fff;border:0;border-radius:10px;font-size:14px;font-weight:500;text-align:center;box-shadow:0 3px 8px #b8402f16}
 .xtra-compose:hover{background:#963222}
 .task-mail #layout-sidebar>.header{font-size:11px;min-height:57px;border:0}
 #layout-sidebar .username{font-size:11px;color:var(--xtra-muted)}
 .xtra-workspace #layout-list{border-color:var(--xtra-line)}
 .xtra-workspace #layout-content{border-color:var(--xtra-line)}
}
@media(max-width:1024px){
 #xtra-topbar{height:66px;padding:0 18px;gap:10px}
 .xtra-brand{width:150px;height:60px}.xtra-brand img{width:150px}
 .xtra-workspace #layout{top:66px;height:calc(100% - 66px)}.xtra-workspace-label{display:none}
 .xtra-profile>span[dir=ltr]{max-width:210px;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:600px){
 .xtra-compose-mobile{display:block;position:fixed;bottom:70px;right:20px;z-index:20;border:0;border-radius:12px;padding:14px 20px;background:var(--xtra-red);color:#fff;font-size:14px;box-shadow:0 4px 18px #b8402f24}
 .xtra-workspace:has(#layout-content.selected)>.xtra-compose-mobile{display:none}
 a.compose.button[id$="-clone"]{display:none!important}
 .task-login #layout-content.xtra-login{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:35px;min-height:760px;padding:24px 28px 100px;width:100%}
 .xtra-login-heading{width:100%;max-width:365px;margin:auto auto 0}
 .task-login #logo{width:200px;margin:0 -14px 15px 0}
 .xtra-kicker{font-size:11px;margin-bottom:12px}.xtra-login-heading h1{font-size:32px;margin-bottom:10px}.xtra-login-heading p{font-size:13px}
 .task-login #login-form{margin:0 auto auto}.task-login #login-form h2{font-size:20px}.xtra-login-note{margin-bottom:22px}
 .xtra-login-bottom{bottom:24px;inset-inline:28px;font-size:10px}
 .xtra-brand,.xtra-brand img{width:135px}.xtra-profile{font-size:10px;gap:7px}.xtra-profile>span[dir=ltr]{max-width:145px}.xtra-avatar{width:29px;height:29px;font-size:16px}
 #xtra-topbar{padding:0 12px}.messagelist tr{height:70px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}