/* ERN Traffic webmail: eigen kleuren, mappenindeling, smalle vensters, telefoon en app-weergave.
   Palet: inkt #1b1f27, blauw #36a9e1, amber #e6af2e, ivoor #edefe2. Geladen na de basisstijl, wint dus bij gelijke regels. */
:root{--ern-inkt:#1b1f27;--ern-blauw:#36a9e1;--ern-blauw-d:#2a98cf;--ern-diep:#176b9e;--ern-amber:#e6af2e;--ern-amber-d:#d9a21f;--ern-ivoor:#edefe2;--ern-ivoor-d:#dcdfcd;
  --ern-boven:env(safe-area-inset-top,0px);--ern-onder:env(safe-area-inset-bottom,0px)}

/* ---------- 1. Zijbalk: kleuren staan in variabelen (--zb-*), zodat een andere balk een regel werk is ---------- */
/* gekozen door Ayham 10-11-2026: variant 10, grafiet met een amber gloed bij het logo en een blauwe gloed onderin */
:root{--zb-g1:rgba(230,175,46,.52);--zb-g2:rgba(54,169,225,.62);--zb-l1:#2e3a4a;--zb-l2:#24303f;--zb-l3:#1b1f27;
  --zb-icoon:#fff;--zb-hover:rgba(255,255,255,.12);--zb-gekozen:rgba(255,255,255,.16);--zb-streep:#36a9e1;
  --zb-opstel:#e6af2e;--zb-opstel-h:#f0bd45;--zb-opstel-icoon:#1b1f27;--zb-lijn:rgba(255,255,255,.16)}
@media screen and (min-width:481px){
  /* #layout krijgt dezelfde lagen, zodat de ronde hoek naast de balk naadloos doorloopt */
  html body:not(.task-login) #layout-menu,html body:not(.task-login) #layout{background-color:var(--zb-l3) !important;background-image:radial-gradient(95px 150px at 39px 0%,var(--zb-g1) 0%,transparent 72%),radial-gradient(120px 170px at 39px 100%,var(--zb-g2) 0%,transparent 72%),linear-gradient(180deg,var(--zb-l1) 0%,var(--zb-l2) 48%,var(--zb-l3) 100%) !important;background-repeat:no-repeat !important}
}
html #taskmenu a,html #taskmenu a:focus,html #taskmenu .action-buttons a{color:var(--zb-icoon) !important}
html #taskmenu a::before,html.layout-large #layout-menu #taskmenu a::before{color:var(--zb-icoon) !important}
html #taskmenu a:hover,html #taskmenu .action-buttons a:hover,html #taskmenu a:focus{background-color:var(--zb-hover) !important}
html #taskmenu a.selected,html #taskmenu a.selected:hover{background-color:var(--zb-gekozen) !important}
html #taskmenu a{position:relative}
html #taskmenu a.selected::after{content:"";position:absolute;left:0;top:50%;width:4px;height:26px;margin-top:-13px;border-radius:0 4px 4px 0;background:var(--zb-streep)}
/* brede indeling: elke knop een afgerond vlak van 46 bij 46, midden in de balk van 78 breed; logo 42 */
html.layout-large #layout-menu #taskmenu a{width:46px !important;height:46px !important;margin:3px auto !important;border-radius:12px !important;padding:0 !important;justify-content:center;align-items:center}
html.layout-large #layout-menu #taskmenu .action-buttons a.compose{margin:3px auto !important;box-shadow:none !important}
html.layout-large #layout-menu #taskmenu a.selected::after{display:none !important}
/* gekozen onderdeel: geel icoon, geen vlak (Ayham 10-11: versie 1) */
html.layout-large #layout-menu #taskmenu a.selected,html.layout-large #layout-menu #taskmenu a.selected:hover{background-color:transparent !important;box-shadow:none !important}
html.layout-large #layout-menu #taskmenu a.selected::before{background-color:#e6af2e !important;color:#e6af2e !important}
html.layout-large #layout-menu #taskmenu a:not(.selected):hover{background-color:var(--zb-hover) !important}
html.layout-large #layout-menu #taskmenu a,html.layout-large #layout-menu #taskmenu,html.layout-large #layout-menu #taskmenu > span{overflow:visible !important}
html.layout-large #layout-menu #taskmenu .special-buttons{left:0 !important;right:auto !important;width:78px !important;padding-bottom:10px !important;box-sizing:border-box}
html.layout-large #layout-menu .popover-header #logo{width:36px !important;height:36px !important;padding:11px 21px !important}
/* Opstellen is een gewoon wit icoon, net als de rest (Ayham 10-11: geen geel vlak) */
html #taskmenu a.compose,html #taskmenu .action-buttons a.compose{background-color:transparent !important;color:var(--zb-icoon) !important;box-shadow:none !important}
html #taskmenu a.compose::before,html #taskmenu .action-buttons a.compose::before,html.layout-large #layout-menu #taskmenu a.compose::before{color:var(--zb-icoon) !important;background-color:transparent}
html #taskmenu a.compose:hover,html #taskmenu .action-buttons a.compose:hover{background-color:var(--zb-hover) !important}
/* in het opstelscherm is Opstellen 'geselecteerd': geel zoals elk gekozen icoon. Het ::before tekent ook een
   lettertype-icoon (\f044) in 'color' onder het masker; staat dat op wit, dan wordt het icoon wit-geel gevlekt. Dus beide geel. */
html body #layout-menu #taskmenu a.compose.selected::before{color:#e6af2e !important}
html.layout-large body #layout-menu #taskmenu a.compose.selected::before{background-color:#e6af2e !important}
html #taskmenu a.logout,html:not(.dark-mode) #taskmenu a.logout,html.dark-mode #taskmenu a.logout{color:var(--zb-icoon) !important}
html #taskmenu .special-buttons{background:transparent !important}

/* gekozen onderdeel ook op tablet en telefoon: geel icoon en gele tekst, geen vlak of streepje (versie 1) */
html:not(.layout-large) #taskmenu a.selected,html:not(.layout-large) #taskmenu a.selected:hover{background-color:transparent !important;box-shadow:none !important;color:#e6af2e !important}
html:not(.layout-large) #taskmenu a.selected .inner{color:#e6af2e !important}
html:not(.layout-large) #taskmenu a.selected::before{color:#e6af2e !important;background-color:transparent}
html:not(.layout-large) #taskmenu a.selected:not(.ern-bel)::after{display:none !important}

/* donkere modus: geen grijze blokjes achter de knoppen in de linkerbalk (oude NEXXT-regel) */
html.dark-mode #layout-menu #taskmenu .special-buttons a:not(:hover),html.dark-mode #layout-menu #taskmenu .action-buttons a:not(:hover),
html.dark-mode #layout-menu #taskmenu a:not(.selected):not(:hover){background-color:transparent !important}

/* ---------- 1b. Inlogscherm: opbouw van NEXXT (twee grote gloeden op een donkere grond), in ERN-kleuren ---------- */
html body.task-login #layout{background-color:#1b1f27 !important;background-image:
    radial-gradient(45% 55% at 25% 30%,rgba(230,175,46,.42),transparent 70%),
    radial-gradient(40% 50% at 78% 75%,rgba(54,169,225,.50),transparent 70%),
    linear-gradient(180deg,#2e3a4a 0%,#24303f 50%,#1b1f27 100%) !important;background-repeat:no-repeat !important;background-size:100% 100% !important}
html body.task-login #rcmloginsubmit,html body.task-login #rcmloginsubmit:focus,html.touch body.task-login #rcmloginsubmit:hover{background:#e6af2e !important;border-color:#e6af2e !important;color:#1b1f27 !important;transition:none !important}
html:not(.touch) body.task-login #rcmloginsubmit:hover{background:#f0bd45 !important;border-color:#f0bd45 !important}
html body.task-login #rcmloginsubmit:active{background:#d9a21f !important;border-color:#d9a21f !important}
html body.task-login #login-form .form-control:focus{border-color:#36a9e1 !important;box-shadow:none !important}
/* door Chrome ingevulde velden: altijd de donkere veldkleur, ook als je erin klikt (anders wordt het veld lichtblauw) */
html body.task-login #login-form .form-control:-webkit-autofill,html body.task-login #login-form .form-control:-webkit-autofill:hover,
html body.task-login #login-form .form-control:-webkit-autofill:focus,html body.task-login #login-form .form-control:-webkit-autofill:active{-webkit-box-shadow:0 0 0 40px #2c323f inset !important;box-shadow:0 0 0 40px #2c323f inset !important;-webkit-text-fill-color:#fff !important;caret-color:#fff !important;transition:background-color 99999s ease-out 0s !important}
html body.task-login #login-form .form-control:-webkit-autofill:focus{border-color:#36a9e1 !important}
@media (max-width:480px){
  html body.task-login #layout{background-image:
    radial-gradient(80% 45% at 20% 22%,rgba(230,175,46,.40),transparent 70%),
    radial-gradient(75% 45% at 80% 80%,rgba(54,169,225,.48),transparent 70%),
    linear-gradient(180deg,#2e3a4a 0%,#24303f 50%,#1b1f27 100%) !important}
}

/* ---------- 2. Bovenbalk in ivoor ---------- */
html:not(.dark-mode) #layout > div > .header,
html:not(.dark-mode) #layout-content > .header,
html:not(.dark-mode) #layout-list > .header,
html:not(.dark-mode) #layout-sidebar > .header{background-color:#edefe2 !important;border-bottom-color:#dcdfcd !important}
html:not(.dark-mode) #layout > div > .header a.button:not(.disabled):hover,
html:not(.dark-mode) #layout > div > .header .toolbar a:not(.disabled):hover,
html:not(.dark-mode) #layout > div > .header a.dropdown:not(.disabled):hover,
html:not(.dark-mode) #layout-sidebar > .header a.sidebar-menu:hover{background-color:#dfe2d2 !important}
html:not(.dark-mode) #layout-sidebar > .footer,html:not(.dark-mode) #layout-list > .footer.pagenav{background:#f6f7ef !important;border-top-color:#e4e6d8 !important}

/* ---------- 3. Tellers en hoofdknoppen in amber, keuze in blauw ---------- */
html #mailboxlist .unreadcount,html.dark-mode #mailboxlist .unreadcount{background:#e6af2e !important;color:#1b1f27 !important}
html .nx-chip .nx-n{background:#e6af2e !important;color:#1b1f27 !important}
html .nx-chip.on .nx-n{background:#1b1f27 !important;color:#fff !important}
html:not(.dark-mode) .nx-chip{color:#1b1f27}
html .nx-chip.on,html.dark-mode .nx-chip.on{background:#36a9e1;color:#1b1f27}
html:not(.dark-mode) .nx-chip:not(.on):hover{background:#dfe2d2}
html.layout-large #toolbar-menu a.reply{background:#e6af2e !important;color:#1b1f27 !important}
html.layout-large #toolbar-menu a.reply::before{background-color:#1b1f27 !important}
html.layout-large #toolbar-menu a.reply:hover{background:#d9a21f !important}
html.layout-large #toolbar-menu a.reply:not(.disabled):active{background:#c9951a !important}
html.layout-large #toolbar-menu .dropbutton:has(a.reply-all) > a.dropdown{background:#e6af2e !important}
html.layout-large #toolbar-menu .dropbutton:has(a.reply-all) > a.dropdown::before{background-color:#1b1f27 !important}
html.layout-large #toolbar-menu .dropbutton:has(a.reply-all) > a.dropdown:hover{background:#d9a21f !important}
html.layout-large body.action-compose #toolbar-menu a.nx-send{background:#e6af2e !important;color:#1b1f27 !important}
html.layout-large body.action-compose #toolbar-menu a.nx-send::before{background-color:#1b1f27 !important}
html.layout-large body.action-compose #toolbar-menu a.nx-send:hover{background:#d9a21f !important}
/* opstelscherm op de computer: Verzenden ONDERAAN onder de tekst (Ayham 10-11), niet in de bovenbalk.
   Elastic heeft daar al een eigen knop (.formbuttons button.send); NEXXT had die verborgen. */
html.layout-large body.action-compose #toolbar-menu > li.nx-send-li{display:none !important}
html.layout-large body.action-compose #compose-content > .formbuttons{display:flex !important;align-items:center;gap:10px;flex:none;padding:2px 14px 16px !important;margin:0 !important;border:0 !important;background:transparent !important}
html.layout-large body.action-compose #compose-content > .formbuttons button.send{display:inline-flex !important;align-items:center;gap:8px;height:40px;padding:0 20px 0 16px !important;margin:0 !important;border:0 !important;border-radius:8px !important;background:#e6af2e !important;color:#1b1f27 !important;font-size:14.5px !important;font-weight:600 !important;line-height:1 !important;box-shadow:none !important;cursor:pointer}
html.layout-large body.action-compose #compose-content > .formbuttons button.send::before{content:"" !important;display:block !important;width:17px;height:17px;margin:0 !important;flex:none;background:#1b1f27;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 21.7a.5.5 0 0 0 .9 0l6.5-19a.5.5 0 0 0-.6-.6l-19 6.5a.5.5 0 0 0 0 .9l7.9 3.2a2 2 0 0 1 1.1 1.1z'/%3E%3Cpath d='m21.9 2.1-10.9 10.9'/%3E%3C/svg%3E") center/17px 17px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 21.7a.5.5 0 0 0 .9 0l6.5-19a.5.5 0 0 0-.6-.6l-19 6.5a.5.5 0 0 0 0 .9l7.9 3.2a2 2 0 0 1 1.1 1.1z'/%3E%3Cpath d='m21.9 2.1-10.9 10.9'/%3E%3C/svg%3E") center/17px 17px no-repeat}
html.layout-large body.action-compose #compose-content > .formbuttons button.send:hover{background:#d9a21f !important}
html.layout-large body.action-compose #compose-content > .formbuttons button.send:focus-visible{outline:2px solid #176b9e;outline-offset:2px}
html.layout-large body.action-compose #compose-content > .formbuttons .float-right{display:none !important}
/* knoppen in de bovenbalk van het opstelscherm in het midden (Ayham 10-11): opvuller weg, balk centreert */
html.layout-large body.action-compose #layout-content > .header #toolbar-menu{justify-content:center !important;flex:1 1 auto;padding:0 14px !important}
html.layout-large body.action-compose #layout-content > .header #toolbar-menu > li.spacer{display:none !important}
/* lange adressen in de kop van een mail (Van/Aan) breken af in plaats van het scherm zijwaarts te laten schuiven */
#message-header .nx-meta,#message-header .nx-val,#message-header .header-content{min-width:0}
#message-header .nx-val{overflow-wrap:anywhere;word-break:break-word}
/* de verborgen accountkeuze van ident_switch staat los in body: in het leesvenster gaf die een extra regel (tweede scrollbalk) */
body > #ident-switch-wrapper{display:none !important}
html .floating-action-buttons a.button{background:#e6af2e !important;color:#1b1f27 !important;box-shadow:0 2px 8px rgba(27,31,39,.22) !important}
html .floating-action-buttons a.button::before{color:#1b1f27 !important}
html .floating-action-buttons a.button:hover{background:#d9a21f !important}
html .btn-primary,html .btn-primary:focus{background-color:#e6af2e !important;border-color:#e6af2e !important;color:#1b1f27 !important}
html .btn-primary:hover,html .btn-primary:active{background-color:#d9a21f !important;border-color:#d9a21f !important;color:#1b1f27 !important}
html .btn-primary::before{color:#1b1f27 !important}
/* geen gekleurde focusrand (rood/roze van Bootstrap) om knoppen, o.a. "Weggooien" in de vraag bij verlaten opstelscherm */
html .btn:focus,html .btn.focus,html .btn:not(:disabled):not(.disabled):active:focus,html .btn:not(:disabled):not(.disabled).active:focus,html .ui-dialog .ui-dialog-buttonpane .btn:focus{box-shadow:none !important;outline:0 !important}

/* ---------- 4. Mappen: eigen mappen bij "Mappen", Spam/Prullenbak/Archief onderaan bij "Overig" ---------- */
#mailboxlist{display:flex;flex-direction:column}
#mailboxlist > li.mailbox{order:1}
#mailboxlist > li.mailbox.junk,#mailboxlist > li.mailbox.trash,#mailboxlist > li.mailbox.archive{order:2}

/* ---------- 4b. Kolomgrenzen en schuivers: #dcdfcd (Ayham 10-11), iets donkerder bij aanwijzen en slepen ---------- */
/* het ronde hoekje zat op de kolom zelf met overflow:hidden; dat knipte de schuiver af en liet het slepen haperen.
   Nu krijgt de kop zelf de ronde hoek en mag de kolom overlopen. */
@media screen and (min-width:481px){
  html body:not(.action-compose) #layout-sidebar,html body.action-compose #layout-content{overflow:visible !important}
  html body:not(.action-compose) #layout-sidebar > .header,html body.action-compose #layout-content > .header{border-top-left-radius:52px 46px}
}
html:not(.dark-mode) #layout-sidebar,html:not(.dark-mode) #layout-list{border-right:2px solid #dcdfcd !important}
html.dark-mode #layout-sidebar,html.dark-mode #layout-list{border-right:2px solid rgba(220,223,205,.20) !important}
/* meer ruimte om te verslepen: maillijst tot 55%, mappen tot 35% van het scherm */
html.layout-large #layout-list{max-width:55% !important}
html.layout-large #layout-sidebar{max-width:35% !important}
#layout .column-resizer{width:10px;right:-5px;z-index:5}
#layout .column-resizer.inverted{right:auto;left:-5px}
#layout .column-resizer::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-2px;background:transparent;transition:background-color .12s ease;pointer-events:none}
#layout .column-resizer:hover::after,#layout .column-resizer.active::after{background:#b9bea3}
#layout .column-resizer.active{width:10000px;right:-5000px;z-index:50}
#layout .column-resizer.active.inverted{right:auto;left:-5000px}
/* tijdens het slepen: geen overgangen en geen muis in de iframes, zodat de kolom de muis direct volgt */
body.ern-slepen iframe{pointer-events:none !important}
body.ern-slepen #layout > div{transition:none !important}

/* ---------- 4c. Accountwissel via de accountnaam linksboven ---------- */
#layout-sidebar > .header .ern-acc-knop{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;cursor:pointer;border-radius:8px;padding:5px 10px !important;margin-left:0 !important;box-sizing:border-box;-webkit-app-region:no-drag;app-region:no-drag}
#layout-sidebar > .header .ern-acc-knop:hover{background:rgba(27,31,39,.06)}
#layout-sidebar > .header .ern-acc-knop:focus-visible{outline:2px solid #36a9e1;outline-offset:1px}
#layout-sidebar > .header .ern-acc-knop .nx-acc-chev{display:inline-flex;align-items:center;margin-left:4px;flex:none}
#layout-sidebar > .header .ern-acc-knop .nx-acc-chev{width:18px;height:18px;background:currentColor !important;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/15px 15px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/15px 15px no-repeat}
#layout-sidebar > .header .ern-acc-n,#ern-accounts .ern-acc-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;margin-left:6px;border-radius:10px;background:#e6af2e;color:#1b1f27;font-size:11.5px;font-weight:700;flex:none;box-sizing:border-box}
#layout-sidebar > .header .ern-acc-knop .nx-acc-tx{min-width:0;flex:0 1 auto;overflow:visible !important}
#layout-sidebar > .header .ern-acc-knop .nx-acc-tx b{display:flex !important;align-items:center;min-width:0;overflow:visible !important}
#layout-sidebar > .header .ern-acc-knop .ern-acc-adres{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#layout-sidebar > .header .ern-acc-knop .nx-acc-lbl{flex:none}
#layout-sidebar > .header .ern-acc-knop.smal .nx-acc-lbl{display:none !important}
/* de plug-in voor meerdere mailboxen verbergt de accountnaam tot zijn eigen keuzelijst er staat; wij tonen ons eigen menu */
#layout-sidebar > .header .header-title.username{visibility:visible !important}
#ern-accounts{position:absolute;z-index:200;top:54px;left:10px;width:min(290px,calc(100vw - 24px));padding:6px;background:#fff;border:1px solid #dcdfcd;border-radius:12px;box-shadow:0 12px 32px rgba(27,31,39,.18);-webkit-app-region:no-drag;app-region:no-drag}
#ern-accounts .ern-acc-kop{padding:8px 10px 6px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#8a93ab}
#ern-accounts .ern-acc-rij{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:#1b1f27;text-decoration:none;min-height:44px;box-sizing:border-box}
#ern-accounts .ern-acc-rij:hover{background:#f1f8fc}
#ern-accounts .ern-acc-rij:focus{outline:none}
#ern-accounts .ern-acc-rij:focus-visible{outline:2px solid #36a9e1;outline-offset:-2px}
#ern-accounts .ern-acc-rij.actief{background:#e6f4fb}
#ern-accounts .ern-acc-bol{width:32px;height:32px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:#24303f;color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em}
#ern-accounts .ern-acc-rij.actief .ern-acc-bol{background:#36a9e1;color:#1b1f27}
#ern-accounts .ern-acc-tx{display:flex;flex-direction:column;min-width:0;flex:1}
#ern-accounts .ern-acc-tx b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ern-accounts .ern-acc-tx small{font-size:12px;color:#6c7385}
#ern-accounts .ern-acc-v{width:16px;height:16px;flex:none;background:#176b9e;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/16px no-repeat}
#ern-accounts .ern-acc-lijn{height:1px;background:#ecede4;margin:6px 4px}
#ern-accounts .ern-acc-beheer{display:flex;align-items:center;min-height:40px;padding:0 10px;border-radius:8px;color:#176b9e;font-size:13.5px;font-weight:600;text-decoration:none}
#ern-accounts .ern-acc-beheer:hover{background:#f1f8fc}
html.dark-mode #ern-accounts{background:#232933;border-color:#3a4354}
html.dark-mode #ern-accounts .ern-acc-rij{color:#f1f8fc}
html.dark-mode #ern-accounts .ern-acc-rij:hover,html.dark-mode #ern-accounts .ern-acc-rij.actief{background:#2e3a4a}
html.dark-mode #ern-accounts .ern-acc-beheer{color:#6abfe9}

/* ---------- 4d. Afzenderlogo's in de bolletjes (letters blijven als er geen logo is) ---------- */
#messagelist .nx-av,#message-header .nx-av-lg{overflow:hidden}
#message-header .nx-av-lg{position:relative}
.ern-av-logo{position:absolute;left:0;top:0;width:100%;height:100%;box-sizing:border-box;padding:5px;object-fit:contain;background:#fff;border-radius:50%;opacity:0;transition:opacity .15s ease}
.ern-av-logo.foto{padding:0;object-fit:cover}
.met-logo > .ern-av-logo{opacity:1}
#messagelist .nx-av.met-logo,#message-header .nx-av-lg.met-logo{background:#fff !important;color:transparent !important;box-shadow:inset 0 0 0 1px #e4e6d8}
#message-header .nx-av-lg.met-logo .ern-av-logo{padding:8px}
#message-header .nx-av-lg.met-logo .ern-av-logo.foto{padding:0}

/* ---------- 4e. Beantwoord en doorgestuurd in de maillijst: dikke ronde pijl (variant 4, gekozen 10-11) ---------- */
html body #messagelist:not(#nx-a):not(#nx-b):not(#nx-c) tbody tr td.subject span.msgicon.status.replied::before,
html body #messagelist:not(#nx-a):not(#nx-b):not(#nx-c) tbody tr td.subject span.msgicon.status.replied.forwarded::before{
  width:16px !important;height:16px !important;background-color:#24303f !important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E") !important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E") !important;
  -webkit-mask-size:16px 16px !important;mask-size:16px 16px !important;-webkit-mask-position:center !important;mask-position:center !important;-webkit-mask-repeat:no-repeat !important;mask-repeat:no-repeat !important}
html body #messagelist:not(#nx-a):not(#nx-b):not(#nx-c) tbody tr td.subject span.msgicon.status.forwarded:not(.replied)::before{
  width:16px !important;height:16px !important;background-color:#24303f !important;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14l5-5-5-5'/%3E%3Cpath d='M20 9H9.5a5.5 5.5 0 0 0 0 11H13'/%3E%3C/svg%3E") !important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14l5-5-5-5'/%3E%3Cpath d='M20 9H9.5a5.5 5.5 0 0 0 0 11H13'/%3E%3C/svg%3E") !important;
  -webkit-mask-size:16px 16px !important;mask-size:16px 16px !important;-webkit-mask-position:center !important;mask-position:center !important;-webkit-mask-repeat:no-repeat !important;mask-repeat:no-repeat !important}
html.layout-large body #messagelist:not(#nx-a):not(#nx-b):not(#nx-c) tbody tr td.subject span.msgicon.status:is(.replied,.forwarded){width:15px !important;height:15px !important;margin-top:-7.5px !important;left:4px !important}
html.dark-mode body #messagelist:not(#nx-a):not(#nx-b):not(#nx-c) tbody tr td.subject span.msgicon.status:is(.replied,.forwarded)::before{background-color:#cfe9f7 !important}
/* ongelezen: de ronde pijl krijgt dezelfde blauwe kleur als de ongelezen-bolletjes */
html body #messagelist:not(#nx-a):not(#nx-b):not(#nx-c):not(#nx-d) tbody tr.unread td.subject span.msgicon.status:is(.replied,.forwarded)::before{background-color:#36a9e1 !important}

/* ---------- 5. Filterbalk: schuift nooit meer over de knoppen ---------- */
#messagelist-header .nx-filters{min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain}
#messagelist-header .nx-filters::-webkit-scrollbar{display:none}
#messagelist-header .nx-filters .nx-chip{flex:none}
html.layout-large #messagelist-header .menu.toolbar,html.layout-large #messagelist-header a.toolbar-button{flex:none}
html.layout-large #messagelist-header .nx-filters::after{position:sticky;right:0}

/* eigen filterrij voor smalle vensters, tablet en telefoon (de brede balk bestaat daar niet) */
.ern-filters{display:none}
html:not(.layout-large) #layout-list .ern-filters{display:flex;align-items:center;gap:6px;padding:6px 10px;overflow-x:auto;scrollbar-width:none;background:#fff;border-bottom:1px solid #e4e6d8;flex:none}
html:not(.layout-large) #layout-list .ern-filters::-webkit-scrollbar{display:none}
html:not(.layout-large) #layout-list .ern-filters .nx-chip{flex:none;height:32px;padding:0 12px;font-size:13.5px}
html.dark-mode:not(.layout-large) #layout-list .ern-filters{background:#1b1f27;border-bottom-color:#3a4354}

/* gekozen filter (Alles, Ongelezen, ...) in vetgedrukte tekst */
html .nx-chip.on{font-weight:700 !important}

/* ---------- 6. Bijlagen: een compacte regel ---------- */
#message-header.nx-f .nx-strook,#message-header.nx-f .nx-strook.nx-veel{display:flex !important;align-items:center;flex-wrap:nowrap;gap:8px;margin:10px 0 2px;padding:5px 6px 5px 10px;border-radius:8px}
#message-header.nx-f .nx-strook .nx-tot,#message-header.nx-f .nx-strook.nx-veel .nx-tot{flex:none;font-size:12.5px;font-weight:500;color:#2c363a;padding-right:2px}
#message-header.nx-f .nx-strook .nx-bijlagen,#message-header.nx-f .nx-strook.nx-veel .nx-bijlagen{display:flex !important;flex-wrap:wrap;gap:4px 6px;flex:1 1 auto;min-width:0;padding:0;border:0;max-height:60px;overflow-y:auto;grid-template-columns:none}
#message-header.nx-f .nx-strook .nx-bijlagen li,#message-header.nx-f .nx-strook.nx-veel .nx-bijlagen li{height:28px;width:auto !important;padding:0 2px 0 8px;border-radius:6px;flex:0 1 auto;min-width:0;justify-content:flex-start}
#message-header.nx-f .nx-strook .nx-bijlagen li a.filename{height:26px;line-height:26px;font-size:12.5px;min-width:0;flex:0 1 auto}
#message-header.nx-f .nx-strook .nx-bijlagen li a.filename .attachment-name,#message-header.nx-f .nx-strook.nx-veel .nx-bijlagen li a.filename .attachment-name{max-width:190px;flex:0 1 auto}
#message-header.nx-f .nx-strook .nx-bijlagen li a.filename .attachment-size{font-size:11.5px;flex:none;margin-left:0;padding-left:0}
#message-header.nx-f .nx-strook .nx-bijlagen li a.dropdown{height:26px;width:20px !important;margin-left:0}
#message-header.nx-f .nx-strook a.zipdownload,#message-header.nx-f .nx-strook.nx-veel a.zipdownload{flex:none;height:28px;padding:0 10px;margin-left:auto;font-size:12.5px;border-radius:6px;align-self:flex-start}

/* bijlagen op de telefoon: kop met totaal en "Alles", daaronder de bijlagen op volle breedte */
html:is(.layout-phone,.layout-small) #message-header.nx-f .nx-strook,html:is(.layout-phone,.layout-small) #message-header.nx-f .nx-strook.nx-veel{flex-wrap:wrap !important;padding:6px 6px 6px 10px}
html:is(.layout-phone,.layout-small) #message-header.nx-f .nx-strook .nx-bijlagen,html:is(.layout-phone,.layout-small) #message-header.nx-f .nx-strook.nx-veel .nx-bijlagen{order:3;flex:1 1 100% !important;max-height:none !important;overflow:visible !important;display:flex !important;flex-direction:column;gap:4px}
html:is(.layout-phone,.layout-small) #message-header.nx-f .nx-strook .nx-bijlagen li,html:is(.layout-phone,.layout-small) #message-header.nx-f .nx-strook.nx-veel .nx-bijlagen li{width:100% !important;max-width:100% !important;height:34px;box-sizing:border-box;justify-content:space-between}
html:is(.layout-phone,.layout-small) #message-header.nx-f .nx-strook .nx-bijlagen li a.filename{flex:1 1 auto;min-width:0;height:32px;line-height:32px}
html:is(.layout-phone,.layout-small) #message-header.nx-f .nx-strook .nx-bijlagen li a.filename .attachment-name,html:is(.layout-phone,.layout-small) #message-header.nx-f .nx-strook.nx-veel .nx-bijlagen li a.filename .attachment-name{flex:1 1 auto;min-width:0;max-width:none}
html:is(.layout-phone,.layout-small) #message-header.nx-f .nx-strook .nx-bijlagen li a.dropdown{height:32px;width:30px !important}
html:is(.layout-phone,.layout-small) #message-header.nx-f .nx-strook a.zipdownload{height:30px;align-self:center}

/* accountkop: bij een smalle mappenkolom wijkt eerst het label, daarna kort het adres in; tandwiel blijft vrij */
html.layout-large #layout-sidebar > .header{container-type:inline-size;container-name:ernacc}
#layout-sidebar > .header .header-title{min-width:0;flex:1 1 auto;overflow:hidden}
#layout-sidebar > .header .nx-acc-tx,#layout-sidebar > .header .nx-acc-tx b{min-width:0;max-width:100%;overflow:hidden}
#layout-sidebar > .header .nx-acc-tx b{white-space:nowrap;text-overflow:ellipsis;display:flex;align-items:center}
#layout-sidebar > .header a.sidebar-menu{flex:none}
@container ernacc (max-width:265px){#layout-sidebar > .header .nx-acc-lbl{display:none !important}}

/* ---------- 7. Middelgrote en smalle vensters (geen brede indeling) ---------- */
html:not(.layout-large):not(.layout-phone) #layout-menu .popover-header #logo{width:26px !important;height:26px !important;padding:10px 0 !important;margin:0 auto !important;display:block;box-sizing:content-box;object-fit:contain}

html.layout-normal #layout-list > .header,html.layout-normal #layout-sidebar > .header{align-items:center}
html.layout-normal #layout-list > .header > a.button,html.layout-normal #layout-sidebar > .header > a.button{height:auto !important;line-height:1 !important;padding:8px 6px !important}

/* ---------- 7b. Maillijst op smalle schermen: rondje links in een eigen kolom (tik = gelezen/ongelezen), dan het initialenbolletje ---------- */
html:not(.layout-large) #messagelist tr.message td.subject{padding-left:74px !important}
html:not(.layout-large) #messagelist .nx-av{left:32px !important}
html:not(.layout-large) #messagelist td.subject span.msgicon.status{display:flex !important;align-items:center;justify-content:center;position:absolute !important;left:0 !important;top:0 !important;bottom:0 !important;width:32px !important;height:auto !important;margin:0 !important;padding:0 !important;background:none !important;box-shadow:none !important;border-radius:0;z-index:2;font-size:0;cursor:pointer;-webkit-tap-highlight-color:rgba(54,169,225,.18)}
html:not(.layout-large) #messagelist td.subject span.msgicon.status::before{float:none !important;display:block !important;margin:0 !important;width:13px !important;height:13px !important;-webkit-mask-size:13px 13px !important;mask-size:13px 13px !important;transform:none !important}
html:not(.layout-large) #messagelist td.subject span.msgicon.status:not(.replied):not(.forwarded)::before{-webkit-mask-size:10px 10px !important;mask-size:10px 10px !important}
html:not(.layout-large) #messagelist tr.unread td.subject span.msgicon.status{color:#36a9e1 !important}
html:not(.layout-large) body #messagelist:not(#nx-a):not(#nx-b):not(#nx-c) tbody tr td.subject span.msgicon.status.replied::before,
html:not(.layout-large) body #messagelist:not(#nx-a):not(#nx-b):not(#nx-c) tbody tr td.subject span.msgicon.status.forwarded::before{width:16px !important;height:16px !important;margin:0 !important;float:none !important;display:block !important;-webkit-mask-size:16px 16px !important;mask-size:16px 16px !important;transform:none !important}
html:not(.layout-large) #messagelist td.subject span.msgicon.status.replied.forwarded::after{display:none !important}
html:not(.layout-large) #messagelist td.subject span.fromto,html:not(.layout-large) #messagelist td.subject span.subject{margin-left:0 !important;padding-left:0 !important}

/* mappenlijst op smalle schermen: iconen in een vaste kolom, gelijk met het kopje "Mappen" */
html:not(.layout-large) #mailboxlist > li.mailbox > a{padding-left:16px !important}
html:not(.layout-large) #mailboxlist li.mailbox > a::before{width:22px !important;margin:0 10px 0 0 !important;text-align:center}

html:not(.dark-mode) #layout-sidebar .listing li.selected > a::after{display:none !important}
html:not(.dark-mode) #layout-sidebar .listing li.selected > a{background-image:radial-gradient(circle at 12px 50%,#36a9e1 0,#36a9e1 11.5px,rgba(54,169,225,0) 12.2px) !important;background-origin:content-box !important;background-clip:border-box !important;background-repeat:no-repeat !important;background-size:24px 100% !important;background-position:-1.68px 50% !important}
html:not(.layout-large):not(.dark-mode) #layout-sidebar .listing li.selected > a{background-position:-1px 50% !important}
html:not(.dark-mode) #layout-sidebar .listing li.selected > a{background-color:#e6f4fb !important;color:#176b9e !important}

/* mappen met submappen (bv. amardan@): hoofdmappen op dezelfde plek als zonder submappen,
   submappen springen 22px per niveau in, het uitklappijltje staat rechts op de regel */
html.layout-large #mailboxlist.treelist > li > a{padding-left:.5em !important}
html.layout-large #mailboxlist.treelist > li > ul > li > a{padding-left:calc(.5em + 22px) !important}
html.layout-large #mailboxlist.treelist > li > ul > li > ul > li > a{padding-left:calc(.5em + 44px) !important}
html.layout-large #mailboxlist.treelist > li > ul > li > ul > li > ul > li > a{padding-left:calc(.5em + 66px) !important}
html:not(.layout-large) #mailboxlist.treelist > li > ul > li > a{padding-left:38px !important}
html:not(.layout-large) #mailboxlist.treelist > li > ul > li > ul > li > a{padding-left:60px !important}
html:not(.layout-large) #mailboxlist.treelist > li > ul > li > ul > li > ul > li > a{padding-left:82px !important}
#layout-sidebar ul.treelist li div.treetoggle{left:auto !important;right:6px !important;top:0 !important;height:var(--ern-rij,36px) !important;width:26px !important;display:flex !important;align-items:center;justify-content:center;color:#8a93ab !important;z-index:2;border-radius:6px}
#layout-sidebar ul.treelist li div.treetoggle::before{margin:0 !important;float:none !important;width:12px !important;height:12px !important;-webkit-mask-size:12px 12px !important;mask-size:12px 12px !important}
#layout-sidebar ul.treelist li div.treetoggle:hover{color:#176b9e !important;background:rgba(54,169,225,.12)}
/* teller ongelezen schuift op als er ook een uitklappijltje rechts staat */
#mailboxlist li:has(> div.treetoggle) > a .unreadcount{right:36px !important}

/* mappenkop op smalle schermen: terugknop, account en tandwiel op een lijn */
html:not(.layout-large) #layout-sidebar > .header{padding:var(--ern-boven) 6px 0 4px !important;align-items:center !important;gap:2px}
html:not(.layout-large) #layout-sidebar > .header a.back-list-button{position:static !important;flex:none;width:44px !important;height:44px !important;min-height:44px;margin:0 !important;padding:0 !important;display:flex !important;align-items:center;justify-content:center;border-radius:10px;background:transparent !important}
html:not(.layout-large) #layout-sidebar > .header .header-title{flex:1 1 auto;min-width:0;width:auto !important;padding-left:2px !important}
html:not(.layout-large) #layout-sidebar > .header a.sidebar-menu{position:static !important;top:auto !important;right:auto !important;flex:none;align-self:center !important;margin:0 0 0 auto !important;width:44px !important;height:44px !important;border-radius:10px}
/* aanraakschermen: geen blijvende grijze vlakken na een tik */
html.touch #layout > div > .header a.button:hover,html.touch #layout > div > .header .toolbar a:hover,html.touch #layout-sidebar > .header a.sidebar-menu:hover{background-color:transparent !important}
html.touch #layout > div > .header a.button:active,html.touch #layout-sidebar > .header a.sidebar-menu:active{background-color:rgba(27,31,39,.08) !important}

/* ---------- 8. Telefoon ---------- */
/* menulade: dezelfde balk met gloed, ruime tikvlakken */
html.layout-phone #layout-menu{background-color:var(--zb-l3) !important;background-image:radial-gradient(240px 190px at 20% 0%,var(--zb-g1) 0%,transparent 72%),radial-gradient(280px 210px at 30% 100%,var(--zb-g2) 0%,transparent 72%),linear-gradient(180deg,var(--zb-l1) 0%,var(--zb-l2) 48%,var(--zb-l3) 100%) !important;background-repeat:no-repeat !important;width:min(300px,84vw) !important;padding-bottom:var(--ern-onder)}
html.layout-phone #layout-menu .popover-header{background:transparent !important;border-bottom:1px solid var(--zb-lijn);min-height:58px;padding-top:var(--ern-boven);display:flex;align-items:center}
html.layout-phone #layout-menu .popover-header #logo{width:30px !important;height:30px !important;padding:0 !important;margin:0 0 0 18px !important;object-fit:contain}
html.layout-phone #layout-menu .popover-header::after{content:"ERN Traffic";color:var(--zb-icoon);font-size:17px;font-weight:700;letter-spacing:.01em;margin-left:12px;flex:1}
html.layout-phone #layout-menu .popover-header a.button{color:var(--zb-icoon) !important;order:3}
html.layout-phone #layout-menu .popover-header a.button::before{color:var(--zb-icoon) !important}
html.layout-phone #taskmenu{background:transparent !important;padding-top:10px}
html.layout-phone #taskmenu a,html.layout-phone #taskmenu a:focus{height:52px !important;line-height:52px !important;font-size:16px !important;font-weight:500;border:0 !important;display:flex !important;align-items:center;padding:0 18px !important}
html.layout-phone #taskmenu a .inner{color:inherit !important;font-size:16px !important}
html.layout-phone #taskmenu a::before{margin:0 16px 0 0 !important;float:none !important;flex:none}
html.layout-phone #taskmenu a.compose,html.layout-phone #taskmenu .action-buttons a.compose{margin:0 !important;border-radius:0;padding:0 18px !important;font-weight:500}
html.layout-phone #taskmenu .special-buttons{border-top:1px solid var(--zb-lijn);margin-top:8px;padding-top:8px}

/* bovenbalk: ivoor, met het beeldmerk voor de titel */
html.layout-phone #layout > div > .header{padding-top:var(--ern-boven) !important;height:calc(58px + var(--ern-boven)) !important;min-height:calc(58px + var(--ern-boven)) !important;box-sizing:border-box}
html.layout-phone #layout-list > .header .header-title,html.layout-phone #layout-sidebar > .header .header-title{font-weight:700}
html.layout-phone:not(.dark-mode) #layout-list > .header .header-title,html.layout-phone:not(.dark-mode) #layout-sidebar > .header .header-title{color:#1b1f27}
html.layout-phone #layout-list > .header .header-title::before{content:"";display:inline-block;width:22px;height:22px;margin-right:8px;vertical-align:-5px;background:url(beeldmerk-blauw.png) center/contain no-repeat}
html.layout-phone #layout > div > .header a.button{min-width:42px;min-height:44px;align-items:center;justify-content:center}

/* lijst: grotere tikvlakken, voet boven de thuisbalk, opstelknop in amber */
html.layout-phone #layout-list > .footer.pagenav,html.layout-phone #layout-sidebar > .footer{padding-bottom:var(--ern-onder) !important;height:calc(44px + var(--ern-onder)) !important;box-sizing:border-box}
html.layout-phone .floating-action-buttons{bottom:calc(60px + var(--ern-onder)) !important;right:16px !important}
html.layout-phone .floating-action-buttons a.button{width:56px !important;height:56px !important;border-radius:16px !important;display:flex !important;align-items:center;justify-content:center}
html.layout-phone #layout-content > .footer,html.layout-phone #layout-content .footer.toolbar{padding-bottom:var(--ern-onder)}
html.layout-phone #mailboxlist > li.mailbox > a{min-height:46px;display:flex;align-items:center}

/* knoppenbalk onder een geopende mail */
#ern-acties{display:none}
html:is(.layout-phone,.layout-small) body.task-mail:not(.action-compose) #layout-content > #ern-acties{display:flex !important;flex:none;justify-content:space-around;align-items:stretch;gap:4px;margin:0;padding:6px 8px calc(6px + var(--ern-onder));background:#edefe2;border-top:1px solid #dcdfcd;border-radius:0;height:auto;overflow:visible}
html:is(.layout-phone,.layout-small) #ern-acties a{flex:1 1 0;min-width:0;display:flex !important;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:50px;height:auto !important;padding:4px 2px !important;margin:0 !important;border-radius:10px;color:#1b1f27 !important;text-decoration:none;opacity:1}
html:is(.layout-phone,.layout-small) #ern-acties a .inner{position:static !important;display:block;width:auto;height:auto;clip:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:11.5px;line-height:1.2;color:inherit}
html:is(.layout-phone,.layout-small) #ern-acties a::before{margin:0 !important;float:none !important;height:22px;line-height:22px;font-size:19px;color:inherit}
html:is(.layout-phone,.layout-small) #ern-acties a.reply{background:#e6af2e;font-weight:600}
html:is(.layout-phone,.layout-small) #ern-acties a.delete{color:#b3243a !important}
html.dark-mode:is(.layout-phone,.layout-small) body.task-mail #layout-content > #ern-acties{background:#272d38;border-top-color:#3a4354}
html.dark-mode:is(.layout-phone,.layout-small) #ern-acties a:not(.reply):not(.delete){color:#f1f8fc !important}
/* een knoppenbalk: de oude Vorige / Beantwoorden / Volgende-balk weg, Vorige en Volgende als pijlen in de kop */
html:not(.layout-large) #layout-content > .footer.content-frame-navigation{display:none !important}
/* opstellen: Verzenden staat bovenin; valt die knop om wat voor reden weg, dan komt de oude balk terug */
html:not(.layout-large) body.action-compose:not(:has(.ern-verzend)) #layout-content > .footer.content-frame-navigation{display:flex !important}
.ern-verzend{display:none}
html:not(.layout-large) body.action-compose #layout-content > .header .ern-verzend{display:inline-flex !important;align-items:center;gap:7px;flex:none;align-self:center;height:36px;padding:0 14px 0 12px;margin:0 2px 0 6px;border-radius:8px;background:#e6af2e;color:#1b1f27 !important;font-size:14.5px;font-weight:600;text-decoration:none;white-space:nowrap}
html:not(.layout-large) body.action-compose #layout-content > .header .ern-verzend::before{content:"";width:17px;height:17px;flex:none;background:#1b1f27;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 21.7a.5.5 0 0 0 .9 0l6.5-19a.5.5 0 0 0-.6-.6l-19 6.5a.5.5 0 0 0 0 .9l7.9 3.2a2 2 0 0 1 1.1 1.1z'/%3E%3Cpath d='m21.9 2.1-10.9 10.9'/%3E%3C/svg%3E") center/17px 17px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 21.7a.5.5 0 0 0 .9 0l6.5-19a.5.5 0 0 0-.6-.6l-19 6.5a.5.5 0 0 0 0 .9l7.9 3.2a2 2 0 0 1 1.1 1.1z'/%3E%3Cpath d='m21.9 2.1-10.9 10.9'/%3E%3C/svg%3E") center/17px 17px no-repeat}
html:not(.layout-large) body.action-compose #layout-content > .header .ern-verzend:active{background:#d9a21f}
html:not(.layout-large) body.action-compose #layout-content > .header .header-title{flex:1 1 auto;min-width:0;width:auto !important;padding:0 4px 0 6px !important;margin:0 !important;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:static !important;left:auto !important;right:auto !important;transform:none !important}
html.layout-large .ern-nav{display:none !important}
html:not(.layout-large) #layout-content > .header .ern-nav{flex:none;width:40px !important;min-width:40px !important;height:44px !important;padding:0 !important;margin:0 !important;display:flex !important;align-items:center;justify-content:center;background:transparent !important;border:0 !important;color:#176b9e !important;font-size:17px}
html:not(.layout-large) #layout-content > .header .ern-nav .inner{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html:not(.layout-large) #layout-content > .header .ern-nav::before{content:"" !important;display:block !important;width:22px !important;height:22px !important;margin:0 !important;float:none !important;background-color:currentColor !important;font-size:0 !important}
html:not(.layout-large) #layout-content > .header .ern-nav.prev::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E") center/22px 22px no-repeat !important;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E") center/22px 22px no-repeat !important}
html:not(.layout-large) #layout-content > .header .ern-nav.next::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/22px 22px no-repeat !important;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/22px 22px no-repeat !important}
html:not(.layout-large) #layout-content > .header .ern-nav.disabled,html:not(.layout-large) #layout-content > .header .ern-nav:disabled{opacity:.3}
html.layout-phone #layout-content > .header .header-title{min-width:0;overflow:hidden;text-overflow:ellipsis}
html.dark-mode:not(.layout-large) #layout-content > .header .ern-nav{color:#cfe9f7 !important}

/* opstellen op de telefoon: labels op een regel, Verzenden als hoofdknop */
html.layout-phone body.action-compose .compose-headers .form-group > label,html.layout-phone body.action-compose #compose-headers .form-group > label{flex:0 0 86px;max-width:86px;white-space:nowrap;font-size:14px;padding-right:4px}
html.layout-phone body.action-compose .compose-headers .form-group > div,html.layout-phone body.action-compose #compose-headers .form-group > div{flex:1 1 0;max-width:calc(100% - 86px)}
html.layout-phone body.action-compose #layout-content > .footer a.send,html.layout-phone body.action-compose .footer .toolbar a.send{background:#e6af2e !important;color:#1b1f27 !important;border-radius:10px;font-weight:600;margin:5px 10px !important;padding:4px 18px !important;height:auto !important}
html.layout-phone body.action-compose #layout-content > .footer{padding-bottom:var(--ern-onder)}
html.layout-phone body.action-compose .footer .toolbar a.send::before{color:#1b1f27 !important}

/* menu's die op telefoon en tablet als lade openschuiven (drie puntjes, mapopties): ERN-kop, ruime regels */
html .popover:not(#layout-menu) > .popover-header{background-color:#1b1f27 !important;background-image:linear-gradient(180deg,#2e3a4a 0%,#1b1f27 100%) !important;color:#fff !important;height:auto !important;min-height:58px;padding:var(--ern-boven) 8px 0 6px !important;margin:0 !important;display:flex !important;align-items:center;border:0 !important;border-radius:0 !important;font-size:16px}
html .popover:not(#layout-menu) > .popover-header a.button.cancel{display:flex !important;flex-direction:row !important;align-items:center;gap:10px;height:44px !important;min-height:44px;width:auto !important;padding:0 12px 0 10px !important;margin:0 !important;border-radius:10px;color:#fff !important;font-size:16px !important;font-weight:600;line-height:1 !important;text-decoration:none;background:transparent !important}
html .popover:not(#layout-menu) > .popover-header a.button.cancel::before{position:static !important;display:inline-block !important;float:none !important;margin:0 !important;width:auto !important;height:auto !important;font-size:19px !important;line-height:1 !important;color:#fff !important}
html .popover:not(#layout-menu) > .popover-header a.button.cancel .inner,html .popover:not(#layout-menu) > .popover-header a.button.cancel span{position:static !important;display:inline !important;width:auto;height:auto;clip:auto;font-size:16px;line-height:1}
html .popover:has(> .popover-header){border:0 !important;box-shadow:-6px 0 28px rgba(27,31,39,.28) !important}
html .popover:has(> .popover-header) .popover-body{padding:6px 0 calc(8px + var(--ern-onder)) !important}
html .popover:has(> .popover-header) .popover-body ul li{border-color:#ecede4 !important}
html .popover:has(> .popover-header) .popover-body ul li > a,html .popover:has(> .popover-header) .popover-body ul li > span > a{min-height:52px !important;height:auto !important;display:flex !important;align-items:center;padding:0 18px !important;font-size:16px !important;color:#1b1f27 !important;line-height:1.25 !important}
html .popover:has(> .popover-header) .popover-body ul li > span > a:not(.dropdown){min-height:52px !important;height:auto !important;display:flex !important;align-items:center;padding:0 18px !important;font-size:16px !important;color:#1b1f27 !important;flex:1 1 auto}
html .popover:has(> .popover-header) .popover-body ul li > span > a:not(.dropdown)::before{color:#176b9e !important;margin:0 14px 0 0 !important;float:none !important;width:22px !important;text-align:center;font-size:17px !important}
html .popover:has(> .popover-header) .popover-body ul li > span > a.disabled:not(.dropdown){color:#9aa3a8 !important}
html .popover:has(> .popover-header) .popover-body ul li > span > a.disabled:not(.dropdown)::before{color:#c3c9cc !important}
html .popover:has(> .popover-header) .popover-body ul li > span{display:flex !important;align-items:stretch}
html .popover:has(> .popover-header) .popover-body ul li > span > a.dropdown{background:transparent !important;border:0 !important;width:44px !important;display:flex !important;align-items:center;justify-content:center;padding:0 !important}
html .popover:has(> .popover-header) .popover-body ul li > a::before{color:#176b9e !important;margin:0 14px 0 0 !important;float:none !important;width:22px !important;text-align:center;font-size:17px !important}
html .popover:has(> .popover-header) .popover-body ul li > a.disabled,html .popover:has(> .popover-header) .popover-body ul li > a:disabled{color:#9aa3a8 !important;opacity:1 !important}
html .popover:has(> .popover-header) .popover-body ul li > a.disabled::before{color:#c3c9cc !important}
html .popover:has(> .popover-header) .popover-body ul li > a:not(.disabled):active{background:#f1f8fc !important}
html.dark-mode .popover:has(> .popover-header) .popover-body ul li > a{color:#f1f8fc !important}
html.dark-mode .popover:has(> .popover-header) .popover-body ul li > a::before{color:#6abfe9 !important}
html.dark-mode .popover:has(> .popover-header) .popover-body ul li{border-color:#3a4354 !important}

/* menu's op de computer (Mapacties, Markeren, Meer ...): witte kaart zoals het mailboxmenu, geen donkere kop */
html.layout-large .popover:not(#layout-menu):not(.select-menu){background:#fff !important;border:1px solid #dcdfcd !important;border-radius:12px !important;box-shadow:0 12px 32px rgba(27,31,39,.18) !important;padding:6px !important;overflow:hidden}
html.layout-large .popover:not(#layout-menu):not(.select-menu) > .popover-header{display:none !important}
html.layout-large .popover:not(#layout-menu):not(.select-menu) > .arrow,html.layout-large .popover:not(#layout-menu):not(.select-menu) > .popover-arrow{display:none !important}
html.layout-large .popover:not(#layout-menu):not(.select-menu) .popover-body{padding:0 !important;max-height:none}
html.layout-large .popover:not(#layout-menu):not(.select-menu) .popover-body ul li{border:0 !important;margin:0 !important}
html.layout-large .popover:not(#layout-menu):not(.select-menu) .popover-body ul li > a,
html.layout-large .popover:not(#layout-menu):not(.select-menu) .popover-body ul li > span > a:not(.dropdown){min-height:40px !important;height:auto !important;display:flex !important;align-items:center;padding:0 12px !important;border-radius:8px !important;font-size:14px !important;line-height:1.3 !important;color:#1b1f27 !important;background:transparent !important}
html.layout-large .popover:not(#layout-menu):not(.select-menu) .popover-body ul li > a:not(.disabled):hover,
html.layout-large .popover:not(#layout-menu):not(.select-menu) .popover-body ul li > span > a:not(.dropdown):not(.disabled):hover{background:#f1f8fc !important}
html.layout-large .popover:not(#layout-menu):not(.select-menu) .popover-body ul li > a::before,
html.layout-large .popover:not(#layout-menu):not(.select-menu) .popover-body ul li > span > a:not(.dropdown)::before{color:#176b9e !important;margin:0 12px 0 0 !important;width:18px !important;text-align:center;font-size:15px !important;float:none !important}
html.layout-large .popover:not(#layout-menu):not(.select-menu) .popover-body ul li > a.disabled{color:#9aa3a8 !important;opacity:1 !important}
html.layout-large .popover:not(#layout-menu):not(.select-menu) .popover-body ul li > a.disabled::before{color:#c3c9cc !important}
html.layout-large .popover:not(#layout-menu):not(.select-menu) .popover-body ul li.separator,
html.layout-large .popover:not(#layout-menu):not(.select-menu) .popover-body ul li.separator-above{border-top:1px solid #ecede4 !important;margin-top:4px !important;padding-top:4px !important}
html.dark-mode.layout-large .popover:not(#layout-menu):not(.select-menu){background:#232933 !important;border-color:#3a4354 !important}
html.dark-mode.layout-large .popover:not(#layout-menu):not(.select-menu) .popover-body ul li > a{color:#f1f8fc !important}
html.dark-mode.layout-large .popover:not(#layout-menu):not(.select-menu) .popover-body ul li > a:not(.disabled):hover{background:#2e3a4a !important}
/* keuzelijsten op de computer (Van, Prioriteit, Bewaren in ...): dezelfde witte kaart, geen donkere kop met Sluit */
html.layout-large .popover.select-menu{background:#fff !important;border:1px solid #dcdfcd !important;border-radius:12px !important;box-shadow:0 12px 32px rgba(27,31,39,.18) !important;padding:6px !important;overflow:hidden}
html.layout-large .popover.select-menu:not(#layout-menu) > .popover-header,html.layout-large .popover.select-menu > .arrow,html.layout-large .popover.select-menu > .popover-arrow{display:none !important}
html.layout-large .popover.select-menu > .popover-body{padding:0 !important}
html.layout-large .popover.select-menu .popover-body ul.listing li{border:0 !important;margin:0 !important}
html.layout-large .popover.select-menu .popover-body ul.listing li > a{min-height:40px !important;height:auto !important;line-height:1.3 !important;display:flex !important;align-items:center;padding:0 12px 0 32px !important;margin:0 !important;border-radius:8px !important;font-size:14px !important;font-weight:400 !important;color:#1b1f27 !important;background:transparent !important}
html.layout-large .popover.select-menu .popover-body ul.listing li > a:hover{background:#f1f8fc !important;color:#1b1f27 !important}
html.layout-large .popover.select-menu .popover-body ul.listing li > a.selected{background:#e6f4fb !important;color:#176b9e !important;font-weight:600 !important}
html.dark-mode.layout-large .popover.select-menu{background:#232933 !important;border-color:#3a4354 !important}
html.dark-mode.layout-large .popover.select-menu .popover-body ul.listing li > a{color:#f1f8fc !important}
html.dark-mode.layout-large .popover.select-menu .popover-body ul.listing li > a:hover{background:#2e3a4a !important}
html.dark-mode.layout-large .popover.select-menu .popover-body ul.listing li > a.selected{background:#2e3a4a !important;color:#6abfe9 !important}

/* ---------- 9. Als app (beginscherm of geinstalleerd op de computer) ---------- */
html.ern-app,html.ern-app body{overscroll-behavior:none}
html.ern-app body{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
html.touch input,html.touch select,html.touch textarea{font-size:16px !important}
html.touch a,html.touch button{touch-action:manipulation}

/* ---------- 9b. Geinstalleerde app op de computer zonder Chrome-titelbalk (window controls overlay) ----------
   De donkere menubalk met gloed loopt door naar boven en dan over de hele breedte: een L-vormige omlijsting.
   Daarin staan rechtsboven de vensterknoppen; de mail begint eronder met het ronde hoekje bij de mappenkolom.
   De bovenrand is sleepvlak (venster verplaatsen, dubbelklik = maximaliseren). */
@media (display-mode: window-controls-overlay){
  html:not(.iframe),html:not(.iframe) body{height:100%;overflow:hidden !important}
  html:not(.iframe) body:not(.task-login) #layout{height:100% !important;max-height:100% !important}
  html:not(.iframe) body:not(.task-login){box-sizing:border-box !important;padding-top:env(titlebar-area-height,33px) !important;
    background-color:var(--zb-l3) !important;
    background-image:radial-gradient(95px 150px at 39px 0%,var(--zb-g1) 0%,transparent 72%),radial-gradient(120px 170px at 39px 100%,var(--zb-g2) 0%,transparent 72%),linear-gradient(180deg,var(--zb-l1) 0%,var(--zb-l2) 48%,var(--zb-l3) 100%) !important;
    background-repeat:no-repeat !important;background-size:100% 100% !important}
  html:not(.iframe) body:not(.task-login) #layout,html:not(.iframe) body:not(.task-login) #layout-menu{background:transparent !important}
  html:not(.iframe) body:not(.task-login)::before{content:"";position:fixed;z-index:9999;top:0;left:0;right:0;height:env(titlebar-area-height,33px);
    display:flex;align-items:center;padding-left:92px;box-sizing:border-box;font-size:12.5px;font-weight:600;letter-spacing:.03em;color:rgba(255,255,255,.62);
    -webkit-app-region:drag;app-region:drag}
  html:not(.iframe):not(.layout-large) body:not(.task-login)::before{padding-left:14px}
  /* pop-ups: geen aparte strook; de knoppenbalk staat helemaal bovenin, de vensterknoppen rechts op dezelfde regel */
  html.ern-popup:not(.iframe) body:not(.task-login){padding-top:0 !important;background:#fff !important}
  html.ern-popup:not(.iframe) body:not(.task-login)::before{display:none !important}
  html.ern-popup:not(.iframe) #layout > div > .header{padding-right:calc(100vw - env(titlebar-area-x,0px) - env(titlebar-area-width,100vw) + 12px) !important;-webkit-app-region:drag;app-region:drag}
  html:not(.iframe):not(.layout-large) #layout-menu,html:not(.layout-large) .popover:not(#layout-menu):has(> .popover-header){top:env(titlebar-area-height,33px) !important;max-height:calc(100% - env(titlebar-area-height,33px)) !important}
  /* lege delen van de kopbalken: ook venster slepen */
  html:not(.iframe) #layout > div > .header{-webkit-app-region:drag;app-region:drag}
  html:not(.iframe) #layout > div > .header a,html:not(.iframe) #layout > div > .header button,html:not(.iframe) #layout > div > .header input,html:not(.iframe) #layout > div > .header select,
  html:not(.iframe) #layout > div > .header label,html:not(.iframe) #layout > div > .header .nx-chip,html:not(.iframe) #layout > div > .header [role=button],html:not(.iframe) #layout > div > .header .dropbutton,
  html:not(.iframe) #layout > div > .header .searchbar,html:not(.iframe) #layout > div > .header .nx-filters,html:not(.iframe) #layout > div > .header .header-title.username,
  html:not(.iframe) #layout > div > .header ul,html:not(.iframe) #layout > div > .header li{-webkit-app-region:no-drag;app-region:no-drag}
}

/* ---------- 9c. Pop-upvensters (bijlage bekijken, bericht apart): donkere ERN-knoppenbalk in de nieuwe stijl ---------- */
html.ern-popup:not(.iframe) #layout > div > .header{display:flex !important;align-items:center !important;gap:6px;height:58px !important;min-height:58px;padding:0 14px 0 18px !important;
  background-color:#2e3a4a !important;background-image:radial-gradient(300px 150px at 0% -40%,rgba(230,175,46,.32),transparent 70%),linear-gradient(180deg,#2e3a4a,#273242) !important;
  border-bottom:1px solid #1b1f27 !important;box-shadow:none !important;border-radius:0 !important}
/* bestandsnaam links */
html.ern-popup:not(.iframe) #layout > div > .header .header-title{display:block !important;position:static !important;flex:0 0 auto;min-width:0;max-width:38%;margin:0 18px 0 0 !important;padding:0 !important;
  color:#fff !important;font-size:15px !important;font-weight:600 !important;text-align:left !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:58px}
/* knoppen naast elkaar: icoon en tekst op een regel */
html.ern-popup:not(.iframe) #layout > div > .header #toolbar-menu{display:flex !important;align-items:center;gap:4px;flex:1 1 0;min-width:0;margin:0 !important;padding:0 !important;height:auto !important}
html.ern-popup:not(.iframe) #layout > div > .header #toolbar-menu > li{display:flex !important;align-items:center;margin:0 !important;padding:0 !important;border:0 !important;flex:none !important;width:auto !important;max-width:none !important;overflow:visible !important}
html.ern-popup:not(.iframe) #layout > div > .header #toolbar-menu > li.spacer{flex:1 1 auto !important}
html.ern-popup:not(.iframe) #layout > div > .header #toolbar-menu > li.spacer{flex:1 1 auto}
html.ern-popup:not(.iframe) #layout > div > .header #toolbar-menu > li > a{display:inline-flex !important;flex-direction:row !important;align-items:center !important;justify-content:center;gap:8px;
  height:36px !important;min-width:0 !important;width:auto !important;max-width:none !important;overflow:visible !important;flex:none !important;padding:0 12px !important;margin:0 !important;border-radius:8px !important;
  color:#fff !important;font-size:13.5px !important;font-weight:500;line-height:1 !important;text-decoration:none;background:transparent !important;white-space:nowrap}
html.ern-popup:not(.iframe) #layout > div > .header #toolbar-menu > li > a::before{margin:0 !important;float:none !important;position:static !important;font-size:16px !important;line-height:1 !important;width:16px !important;height:16px !important;color:currentColor !important}
html.ern-popup:not(.iframe) #layout > div > .header #toolbar-menu > li > a .inner{display:inline !important;position:static !important;width:auto !important;height:auto !important;clip:auto !important;overflow:visible !important;margin:0 !important;padding:0 !important;font-size:13.5px !important;line-height:1 !important;color:inherit !important}
html.ern-popup:not(.iframe) #layout > div > .header #toolbar-menu > li > a:not(.disabled):hover{background:rgba(255,255,255,.12) !important;color:#fff !important}
html.ern-popup:not(.iframe) #layout > div > .header #toolbar-menu > li > a.disabled{opacity:.4}
/* Download is de hoofdknop */
html.ern-popup:not(.iframe) #layout > div > .header #toolbar-menu > li > a.download{background:#e6af2e !important;color:#1b1f27 !important;font-weight:600}
html.ern-popup:not(.iframe) #layout > div > .header #toolbar-menu > li > a.download:hover{background:#f0bd45 !important;color:#1b1f27 !important}
/* zoomen en draaien: alleen icoon (naam als tooltip) */
html.ern-popup:not(.iframe) #layout > div > .header #toolbar-menu > li > a:is(.zoomin,.zoomout,.rotate,.fullscreen){width:36px !important;padding:0 !important}
html.ern-popup:not(.iframe) #layout > div > .header #toolbar-menu > li > a:is(.zoomin,.zoomout,.rotate,.fullscreen) .inner{position:absolute !important;width:1px !important;height:1px !important;overflow:hidden !important;clip:rect(0 0 0 0) !important}

/* ---------- 10. Meldingenbalk en knop ---------- */
#ern-melding{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + var(--ern-onder));z-index:9000;display:flex;align-items:center;gap:12px;max-width:min(520px,calc(100vw - 24px));padding:10px 10px 10px 16px;background:#1b1f27;color:#fff;border-radius:10px;box-shadow:0 8px 28px rgba(27,31,39,.28);font-size:14px;line-height:1.35}
#ern-melding b{font-weight:600}
#ern-melding span{flex:1;min-width:0}
#ern-melding button{flex:none;height:36px;padding:0 14px;border:0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer}
#ern-melding button.ja{background:#e6af2e;color:#1b1f27}
#ern-melding button.nee{background:transparent;color:rgba(255,255,255,.78);padding:0 8px}
html.layout-phone #ern-melding{left:12px;right:12px;transform:none;max-width:none;bottom:calc(126px + var(--ern-onder));flex-wrap:wrap;justify-content:flex-end;gap:6px 8px;padding:14px 12px 10px 16px}
html.layout-phone #ern-melding span{flex:1 0 100%}
#taskmenu a.ern-bel::before{content:"" !important;width:1em;height:1em;background-color:currentColor !important;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E") center/contain no-repeat}
#taskmenu a.ern-bel{position:relative}
html #taskmenu a.ern-bel.aan::after{content:"" !important;position:absolute !important;display:block !important;top:9px !important;left:50% !important;right:auto !important;bottom:auto !important;margin:0 0 0 4px !important;width:9px !important;height:9px !important;min-height:0 !important;padding:0 !important;border:0 !important;border-radius:50% !important;background:#e6af2e !important;box-shadow:0 0 0 2px #24303f !important;transform:none !important}
html.layout-phone #taskmenu a.ern-bel.aan::after{left:31px !important;top:13px !important;margin:0 !important}
html.layout-phone #taskmenu a.selected::after{height:32px;margin-top:-16px}

/* ---------- 11. Telefoon in stijl "versie 1" (Ayham 10-11): wit, grote titel met mappenkeuze, rustige regels ---------- */
:root{--t1-lijn:#eef0e8;--t1-mu:#7b8290;--t1-tx2:#4a5160;--t1-zoek:#f1f2ec}
/* kopbalken wit in plaats van ivoor (lijst, mappen, geopende mail, opstellen, instellingen) */
html.layout-phone:not(.dark-mode) #layout > div > .header,
html.layout-phone:not(.dark-mode) #layout-list > .header,
html.layout-phone:not(.dark-mode) #layout-content > .header,
html.layout-phone:not(.dark-mode) #layout-sidebar > .header{background-color:#fff !important;border-bottom-color:var(--t1-lijn) !important}
html.layout-phone:not(.dark-mode) #layout-list > .header{border-bottom-color:transparent !important}
html.layout-phone:not(.dark-mode) #layout-list,html.layout-phone:not(.dark-mode) #messagelist-content{background:#fff !important}

/* lijstkop: menu links, rechts verversen, meer en het mailboxbolletje; de mappenknop zit nu in de titel */
html.layout-phone #messagelist-header a.back-sidebar-button,html.layout-phone #messagelist-header > .header-title{display:none !important}
html.layout-phone #messagelist-header{justify-content:flex-start !important;gap:2px;padding-right:10px !important}
html.layout-phone #messagelist-header a.task-menu-button{margin-right:auto !important}
html.layout-phone:not(.dark-mode) #messagelist-header a.button,html.layout-phone:not(.dark-mode) #messagelist-header a.button::before{color:#1b1f27 !important}
.ern-acc-bub{display:none}
html.layout-phone #messagelist-header .ern-acc-bub{display:flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;margin-left:6px;border-radius:50%;background:#1b1f27;color:#fff !important;font-size:11.5px;font-weight:700;letter-spacing:.02em;text-decoration:none;-webkit-tap-highlight-color:transparent}
html.layout-phone.dark-mode #messagelist-header .ern-acc-bub{background:#36a9e1;color:#1b1f27 !important}
#ern-accounts.tel{position:fixed;top:calc(54px + var(--ern-boven,0px));right:10px;left:auto;z-index:1000}

/* grote titel met pijltje: tik = mappen kiezen */
.ern-titel{display:none}
html.layout-phone #layout-list > .ern-titel{display:flex;align-items:center;gap:10px;flex:none;padding:0 18px 10px 16px;background:#fff}
html.layout-phone #layout-list > .ern-titel .ern-map{display:inline-flex;align-items:center;gap:6px;min-width:0;flex:0 1 auto;padding:2px 6px 2px 4px;margin-left:-4px;border-radius:10px;color:#1b1f27;text-decoration:none;-webkit-tap-highlight-color:transparent}
html.layout-phone #layout-list > .ern-titel .ern-map:active{background:var(--t1-zoek)}
html.layout-phone #layout-list > .ern-titel .ern-map-naam{font-size:28px;font-weight:700;letter-spacing:-.01em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
html.layout-phone #layout-list > .ern-titel .ern-map-pijl{flex:none;width:22px;height:22px;margin-top:3px;background:#1b1f27;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/22px 22px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/22px 22px no-repeat}
html.layout-phone #layout-list > .ern-titel .ern-titel-n{margin-left:auto;flex:none;font-size:13px;color:var(--t1-mu);white-space:nowrap}
html.layout-phone.dark-mode #layout-list > .ern-titel{background:#1b1f27}
html.layout-phone.dark-mode #layout-list > .ern-titel .ern-map{color:#f1f3ea}
html.layout-phone.dark-mode #layout-list > .ern-titel .ern-map-pijl{background:#f1f3ea}

/* zoekveld: grijs, afgerond, zonder rand; envelopknop weg (Ongelezen staat in de tabbladen) */
html.layout-phone #layout-list > .searchbar{margin:0 16px 8px !important;height:42px !important;border:0 !important;border-radius:11px !important;background:var(--t1-zoek) !important;box-shadow:none !important;flex:none;padding:0 4px 0 2px !important;overflow:hidden}
html.layout-phone #layout-list > .searchbar a.button.unread{display:none !important}
html.layout-phone #layout-list > .searchbar input{background:transparent !important;border:0 !important;box-shadow:none !important;font-size:16px !important;height:42px !important;color:#1b1f27}
html.layout-phone #layout-list > .searchbar input::placeholder{color:var(--t1-mu);opacity:1}
html.layout-phone #layout-list > .searchbar a.button,html.layout-phone #layout-list > .searchbar a.button::before,html.layout-phone #layout-list > .searchbar button,html.layout-phone #layout-list > .searchbar button::before{color:var(--t1-mu) !important;background:transparent !important}
html.layout-phone.dark-mode #layout-list > .searchbar{background:#272d38 !important}
html.layout-phone.dark-mode #layout-list > .searchbar input{color:#f1f3ea}

/* filters als tabbladen met een gele streep onder de gekozen */
html.layout-phone #layout-list .ern-filters{gap:18px !important;padding:0 16px !important;height:42px;align-items:stretch !important;background:#fff !important;border-bottom:1px solid var(--t1-lijn) !important}
html.layout-phone #layout-list .ern-filters .nx-chip{height:auto !important;padding:0 1px !important;margin:0 !important;background:transparent !important;border:0 !important;border-radius:0 !important;border-bottom:2.5px solid transparent !important;box-shadow:none !important;color:var(--t1-mu) !important;font-size:14px !important;font-weight:500 !important;display:flex !important;align-items:center;white-space:nowrap}
html.layout-phone #layout-list .ern-filters .nx-chip.on{color:#1b1f27 !important;font-weight:650 !important;border-bottom-color:#e6af2e !important}
html.layout-phone #layout-list .ern-filters .nx-chip .nx-n:not(:empty){display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px;padding:0 6px !important;margin-left:6px;border-radius:9px;background:#e6af2e !important;color:#1b1f27 !important;font-size:11px !important;font-weight:700 !important}
html.layout-phone.dark-mode #layout-list .ern-filters{background:#1b1f27 !important;border-bottom-color:#2a303b !important}
html.layout-phone.dark-mode #layout-list .ern-filters .nx-chip.on{color:#f1f3ea !important}

/* mailregels: ruimer, grotere bolletjes, ongelezen = vet met blauwe stip en blauwe tijd */
html.layout-phone #messagelist tr.message td.subject{padding:11px 40px 11px 78px !important;line-height:1.3 !important;border-bottom:1px solid var(--t1-lijn) !important;align-content:center}
html.layout-phone #messagelist .nx-av{left:26px !important;width:40px !important;height:40px !important;margin-top:-20px !important;font-size:14px !important}
html.layout-phone #messagelist td.subject span.msgicon.status{width:26px !important}
html.layout-phone #messagelist td.subject span.msgicon.status:not(.replied):not(.forwarded)::before{width:9px !important;height:9px !important;-webkit-mask-size:9px 9px !important;mask-size:9px 9px !important}
html.layout-phone:not(.dark-mode) #messagelist tr.message:not(.unread) td.subject span.msgicon.status:not(.replied):not(.forwarded){color:#c9cdbb !important}
html.layout-phone #messagelist td.subject span.fromto{font-size:15px !important;line-height:21px !important;height:auto !important;color:#1b1f27 !important}
html.layout-phone #messagelist td.subject span.fromto *{color:inherit !important}
html.layout-phone #messagelist td.subject span.fromto *,html.layout-phone #messagelist td.subject span.subject > *:not(.msgicon),html.layout-phone #messagelist td.subject span.date{line-height:inherit !important;vertical-align:baseline}
html.layout-phone #messagelist td.subject span.date{line-height:21px !important}
html.layout-phone #messagelist-header .ern-acc-bub{order:100;align-self:center}
html.layout-phone #messagelist td.subject span.date{font-size:12.5px !important;line-height:21px !important;color:var(--t1-mu) !important;text-align:right !important;width:auto !important;min-width:44px;flex:none !important}
html.layout-phone #messagelist td.subject span.fromto{flex:1 1 0 !important;min-width:0 !important;padding-right:8px !important}
html.layout-phone #messagelist td.subject span.subject{line-height:20px !important;height:auto !important;margin-top:2px !important;flex:1 1 100% !important}
html.layout-phone #messagelist td.subject span.subject a{font-size:14px !important;color:var(--t1-tx2) !important;line-height:20px !important}
html.layout-phone #messagelist tr.unread td.subject span.fromto,html.layout-phone #messagelist tr.unread td.subject span.subject a{font-weight:650 !important;color:#1b1f27 !important}
html.layout-phone #messagelist tr.unread td.subject span.date{color:#176b9e !important;font-weight:600 !important}
html.layout-phone #messagelist td.flags{top:0 !important;bottom:0 !important;height:auto !important;display:flex !important;flex-direction:column;justify-content:flex-end;padding-bottom:12px !important;width:36px !important}
html.layout-phone.dark-mode #messagelist td.subject span.fromto,html.layout-phone.dark-mode #messagelist tr.unread td.subject span.subject a{color:#f1f3ea !important}
html.layout-phone.dark-mode #messagelist td.subject span.subject a{color:#b9bfca !important}
html.layout-phone.dark-mode #messagelist tr.message td.subject{border-bottom-color:#2a303b !important}

/* opstelknop rechtsonder: geel, afgeronde hoeken */
html.layout-phone .floating-action-buttons a.button{width:58px !important;height:58px !important;border-radius:18px !important;box-shadow:0 6px 16px rgba(27,31,39,.22) !important}

/* bladeren onderaan: wit en klein */
html.layout-phone:not(.dark-mode) #layout-list > .footer.pagenav{background:#fff !important;border-top:1px solid var(--t1-lijn) !important}
html.layout-phone #layout-list > .footer.pagenav,html.layout-phone #layout-list > .footer.pagenav *{font-size:12.5px}
html.layout-phone:not(.dark-mode) #layout-list > .footer.pagenav .pagenav-text{color:var(--t1-mu) !important}

/* mappenlijst wit */
html.layout-phone:not(.dark-mode) #layout-sidebar,html.layout-phone:not(.dark-mode) #layout-sidebar .scroller{background:#fff !important}

/* geopende mail: terugknop met de mapnaam in blauw, pijlen en meer in zwart, geen titel "E-mail" */
html.layout-phone body.task-mail:not(.action-compose) #layout-content > .header a.back-list-button{display:flex !important;align-items:center;gap:2px;flex:1 1 auto !important;width:auto !important;min-width:0;padding:0 8px 0 2px !important;margin:0 !important;color:#176b9e !important;text-decoration:none;justify-content:flex-start !important}
html.layout-phone body.task-mail:not(.action-compose) #layout-content > .header a.back-list-button::before{color:#176b9e !important;float:none !important;margin:0 2px 0 0 !important;flex:none}
html.layout-phone body.task-mail:not(.action-compose) #layout-content > .header a.back-list-button .inner{position:static !important;display:block !important;width:auto !important;height:auto !important;clip:auto !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16.5px !important;font-weight:500;color:inherit !important;line-height:1.2}
html.layout-phone body.task-mail:not(.action-compose) #layout-content > .header > .header-title{display:none !important}
html.layout-phone:not(.dark-mode) #layout-content > .header .ern-nav{color:#1b1f27 !important}
html.layout-phone:not(.dark-mode) #layout-content > .header a.toolbar-menu-button,html.layout-phone:not(.dark-mode) #layout-content > .header a.toolbar-menu-button::before{color:#1b1f27 !important}

/* kop in de mail zelf: groot onderwerp, kleiner bolletje, compacte regel "aan ..." (tik = alle gegevens) */
.ern-kort,.ern-tijd{display:none}
html.layout-phone #message-header h2.subject{font-size:21px !important;font-weight:650 !important;line-height:1.25 !important;letter-spacing:-.005em}
html.layout-phone #message-header .nx-av-lg{width:42px !important;height:42px !important;font-size:15px !important;margin-right:12px !important}
html.layout-phone #message-header > .header{align-items:flex-start !important}
html.layout-phone #message-header .header-summary{display:flex !important;align-items:baseline;gap:8px;min-width:0}
html.layout-phone #message-header .header-summary a.rcmContactAddress{font-size:15.5px !important;font-weight:600 !important;color:#1b1f27 !important}
html.layout-phone #message-header .ern-tijd{display:inline;flex:none;font-size:13px;color:var(--t1-mu);white-space:nowrap}
html.layout-phone #message-header .ern-kort{display:inline-flex;align-items:center;gap:3px;max-width:100%;margin-top:3px;padding:2px 0;font-size:13.5px;color:var(--t1-mu);text-decoration:none;-webkit-tap-highlight-color:transparent}
html.layout-phone #message-header .ern-kort-tx{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
html.layout-phone #message-header .ern-kort-pijl{flex:none;width:15px;height:15px;background:currentColor;transition:transform .15s ease;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/15px 15px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/15px 15px no-repeat}
html.layout-phone #message-header.ern-open .ern-kort-pijl{transform:rotate(180deg)}
html.layout-phone #message-header:not(.ern-open) .nx-meta,html.layout-phone #message-header:not(.ern-open) .header-links{display:none !important}
html.layout-phone #message-header.ern-open .nx-meta{margin-top:8px}
html.layout-phone.dark-mode #message-header .header-summary a.rcmContactAddress{color:#f1f3ea !important}

/* knoppenbalk onder een geopende mail: wit, Beantwoorden breder en geel, eigen lijniconen */
html.layout-phone:not(.dark-mode) body.task-mail:not(.action-compose) #layout-content > #ern-acties{background:#fff !important;border-top:1px solid var(--t1-lijn) !important}
html.layout-phone body.task-mail:not(.action-compose) #layout-content > #ern-acties{gap:6px !important;padding:8px 10px calc(8px + var(--ern-onder)) !important}
html.layout-phone #ern-acties a{flex:1 1 0 !important;min-height:54px !important;border-radius:12px !important;gap:4px !important;color:#1b1f27 !important;padding:6px 2px 5px !important;-webkit-tap-highlight-color:transparent}
html.layout-phone #ern-acties a .inner{font-size:11.5px !important;font-weight:500 !important;color:var(--t1-tx2) !important;line-height:1.15 !important}
html.layout-phone #ern-acties a.reply{flex:1.45 1 0 !important;background:#e6af2e !important}
html.layout-phone #ern-acties a.reply .inner{color:#1b1f27 !important;font-weight:650 !important}
html.layout-phone #ern-acties a.delete,html.layout-phone #ern-acties a.delete .inner{color:#b3243a !important}
html.layout-phone #ern-acties a:not(.reply):active{background:var(--t1-zoek) !important}
html.layout-phone #ern-acties a.reply:active{background:#d9a21f !important}
html.layout-phone #ern-acties a::before{content:"" !important;display:block !important;width:22px !important;height:22px !important;line-height:22px !important;font-size:0 !important;margin:0 !important;float:none !important;background-color:currentColor !important;-webkit-mask-position:center !important;mask-position:center !important;-webkit-mask-size:22px 22px !important;mask-size:22px 22px !important;-webkit-mask-repeat:no-repeat !important;mask-repeat:no-repeat !important}
html.layout-phone #ern-acties a.reply::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E") !important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E") !important}
html.layout-phone #ern-acties a.reply-all::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 14-5-5 5-5'/%3E%3Cpath d='m12 14-5-5 5-5'/%3E%3Cpath d='M7 9h8.5a5.5 5.5 0 0 1 0 11H13'/%3E%3C/svg%3E") !important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 14-5-5 5-5'/%3E%3Cpath d='m12 14-5-5 5-5'/%3E%3Cpath d='M7 9h8.5a5.5 5.5 0 0 1 0 11H13'/%3E%3C/svg%3E") !important}
html.layout-phone #ern-acties a.forward::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 14 5-5-5-5'/%3E%3Cpath d='M20 9H9.5a5.5 5.5 0 0 0 0 11H13'/%3E%3C/svg%3E") !important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 14 5-5-5-5'/%3E%3Cpath d='M20 9H9.5a5.5 5.5 0 0 0 0 11H13'/%3E%3C/svg%3E") !important}
html.layout-phone #ern-acties a.delete::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E") !important;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3C/svg%3E") !important}
html.layout-phone.dark-mode #ern-acties a .inner{color:#d7dbe2 !important}
html.layout-phone.dark-mode #ern-acties a.reply .inner{color:#1b1f27 !important}
/* korte datum in de lijst alleen op de telefoon (JS zet beide neer) */
.ern-kort-d{display:none}
html.layout-phone #messagelist span.date .ern-kort-d{display:inline}
html.layout-phone #messagelist span.date .ern-lang-d{display:none}
/* regels vast op een regel hoog: afzender 21px, onderwerp 20px (anders rekken ze uit door ingebouwde marges) */
html.layout-phone #messagelist tr.message td.subject span.fromto,html.layout-phone #messagelist tr.message td.subject span.date{height:21px !important;min-height:0 !important;max-height:21px;padding-top:0 !important;padding-bottom:0 !important;margin-top:0 !important;margin-bottom:0 !important;overflow:hidden}
html.layout-phone #messagelist tr.message td.subject span.subject{height:20px !important;min-height:0 !important;max-height:20px;padding-top:0 !important;padding-bottom:0 !important;margin-bottom:0 !important;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
html.layout-phone #messagelist tr.message{min-height:0 !important;height:auto !important}
/* knoppenbalk: vaste breedte van de werkbalk opheffen, zodat Beantwoorden echt breder wordt */
html.layout-phone body.task-mail #layout-content > #ern-acties{justify-content:stretch !important}
html.layout-phone #ern-acties a{width:auto !important;max-width:none !important;min-width:0 !important}
html.layout-phone:not(.dark-mode) #layout-sidebar > .footer{background:#fff !important;border-top-color:var(--t1-lijn) !important}

/* ---------- 12. Telefoon: mappenscherm opnieuw (Ayham 11-11) ----------
   bovenbalk alleen terug en tandwiel, grote titel "Mappen", mappen met pictogram in een rondje (mailboxen niet hier) */
.ern-zb-titel{display:none}
html.layout-phone #layout-sidebar > .header .header-title.username{visibility:hidden !important}
html.layout-phone:not(.dark-mode) #layout-sidebar > .header{border-bottom-color:transparent !important}
html.layout-phone:not(.dark-mode) #layout-sidebar > .header a.back-list-button,html.layout-phone:not(.dark-mode) #layout-sidebar > .header a.back-list-button::before{color:#176b9e !important}
html.layout-phone:not(.dark-mode) #layout-sidebar > .header a.sidebar-menu,html.layout-phone:not(.dark-mode) #layout-sidebar > .header a.sidebar-menu::before{color:#1b1f27 !important}
html.layout-phone #folderlist-content > .ern-zb-titel{display:block;padding:0 20px 4px;font-size:28px;font-weight:700;letter-spacing:-.01em;line-height:1.2;color:#1b1f27}
html.layout-phone.dark-mode #folderlist-content > .ern-zb-titel{color:#f1f3ea}

/* sectiekopjes */
html.layout-phone #mailboxlist > li.mailbox.inbox::before,html.layout-phone #mailboxlist > li.mailbox.junk::before{display:block;padding:18px 22px 6px !important;font-size:11px !important;line-height:14px !important;letter-spacing:.1em !important;text-transform:uppercase;font-weight:650 !important;color:#8a909b !important}


/* mappen: ruime regels in een afgeronde rij, pictogram in een licht rondje, gekozen map blauw */
html.layout-phone #mailboxlist{padding-bottom:12px}
html.layout-phone #mailboxlist li.mailbox{border:0 !important}
html.layout-phone #mailboxlist li.mailbox > a{min-height:52px !important;height:52px !important;margin:0 10px !important;padding:0 12px 0 14px !important;border-radius:12px !important;border:0 !important;font-size:16px !important;color:#1b1f27 !important;display:flex !important;align-items:center;background-color:transparent !important;background-image:radial-gradient(circle at 32px 50%,#f1f2ec 0,#f1f2ec 17.5px,rgba(241,242,236,0) 18.2px) !important;background-origin:border-box !important;background-clip:border-box !important;background-size:auto !important;background-position:0 0 !important;background-repeat:no-repeat !important;-webkit-tap-highlight-color:transparent}
html.layout-phone #mailboxlist li.mailbox > a::before{width:20px !important;margin:0 22px 0 8px !important;text-align:center;flex:none;color:#4a5160 !important;background-color:#4a5160 !important}
html.layout-phone #mailboxlist li.mailbox > a:active{background-color:#f6f7f1 !important}
html.layout-phone:not(.dark-mode) #layout-sidebar #mailboxlist li.mailbox.selected > a{background-color:#e6f4fb !important;background-image:radial-gradient(circle at 32px 50%,#36a9e1 0,#36a9e1 17.5px,rgba(54,169,225,0) 18.2px) !important;background-position:0 0 !important;background-origin:border-box !important;color:#176b9e !important;font-weight:650 !important}
html.layout-phone #layout-sidebar #mailboxlist li.mailbox.selected > a::before{color:#fff !important;background-color:#fff !important}
html.layout-phone #mailboxlist li.mailbox > a .unreadcount{position:static !important;margin:0 0 0 auto !important;flex:none;top:auto !important;right:auto !important;transform:none !important}
/* submappen springen in, het rondje schuift mee */
html.layout-phone #mailboxlist.treelist > li > ul > li > a{padding-left:36px !important;background-image:radial-gradient(circle at 54px 50%,#f1f2ec 0,#f1f2ec 15.5px,rgba(241,242,236,0) 16.2px) !important}
html.layout-phone #mailboxlist.treelist > li > ul > li.selected > a{background-image:radial-gradient(circle at 54px 50%,#36a9e1 0,#36a9e1 15.5px,rgba(54,169,225,0) 16.2px) !important}
html.layout-phone #layout-sidebar ul.treelist li div.treetoggle{right:16px !important;height:52px !important}
html.layout-phone #mailboxlist li:has(> div.treetoggle) > a .unreadcount{margin-right:30px !important}
html.layout-phone.dark-mode #mailboxlist li.mailbox > a{color:#f1f3ea !important;background-image:radial-gradient(circle at 32px 50%,#2a303b 0,#2a303b 17.5px,rgba(42,48,59,0) 18.2px) !important}
html.layout-phone.dark-mode #mailboxlist li.mailbox > a::before{color:#d7dbe2 !important;background-color:#d7dbe2 !important}

/* opslag onderaan: rustig, met ruimte boven de thuisbalk */
html.layout-phone #layout-sidebar > .footer{height:auto !important;min-height:52px;padding:10px 20px calc(10px + var(--ern-onder)) !important;align-items:center}
html.layout-phone #layout-sidebar #quotadisplay{font-size:12.5px !important;color:#7b8290 !important;gap:12px}
html.layout-phone:not(.dark-mode) #layout-sidebar #quotadisplay .bar{height:6px !important;background:#eef0e8 !important}
html.layout-phone:not(.dark-mode) #layout-sidebar #quotadisplay .count{color:#4a5160 !important}
/* mapregels: breedte binnen de marges, achtergrond-rondje op volle maat (oude regel gaf 24px brede tegel) */
html.layout-phone #layout-sidebar #mailboxlist li.mailbox > a{width:auto !important;max-width:none !important;box-sizing:border-box !important;background-size:auto !important}
html.layout-phone:not(.dark-mode) #layout-sidebar #mailboxlist li.mailbox.selected > a{background-size:auto !important}
/* zonder mailboxblok: het kopje "Mappen" valt samen met de grote titel, dus alleen "Overig" als kopje */
html.layout-phone #mailboxlist > li.mailbox.inbox::before{display:none !important}
html.layout-phone #folderlist-content > .ern-zb-titel{padding-bottom:12px}
/* tijd en datum helemaal rechts (16px van de rand); de paperclip staat rechts op de onderwerpregel */
html.layout-phone #messagelist tr.message td.subject{padding-right:16px !important}
html.layout-phone #messagelist tr.message td.subject span.subject{padding-right:26px !important;box-sizing:border-box}
html.layout-phone #messagelist td.flags{right:8px !important;width:28px !important;padding-bottom:13px !important;align-items:center}
/* zoekveld: vergrootglas en pijltje precies in het midden van de hoogte */
html.layout-phone #layout-list > .searchbar{align-items:center !important}
html.layout-phone #layout-list > .searchbar form{height:42px !important;align-items:center !important;display:flex !important}
html.layout-phone #layout-list > .searchbar form::before{height:42px !important;line-height:42px !important;margin-top:0 !important;margin-bottom:0 !important;align-self:center}
html.layout-phone #layout-list > .searchbar a.button.options{height:42px !important;line-height:42px !important;margin:0 !important;align-self:center}
html.layout-phone #layout-list > .searchbar a.button.options::before{height:42px !important;line-height:42px !important}

/* ---------- 13. Telefoon ronde 3 (Ayham 11-11): gloed bovenin (variant 1, geel duidelijker), ruimte boven de titel,
   compacte mappenkeuze onder de titel, opstelknop "Nieuwe mail" in ERN-stijl ---------- */
/* gloed achter kop, titel en zoekveld, zacht uitlopend in de lijst */
html.layout-phone:not(.dark-mode) #layout-list#layout-list{background-color:#fff !important;background-image:radial-gradient(440px 340px at 6% -10%,rgba(230,175,46,.62) 0%,rgba(230,175,46,.32) 38%,rgba(230,175,46,.1) 62%,rgba(230,175,46,0) 80%),radial-gradient(420px 320px at 104% -2%,rgba(54,169,225,.34) 0%,rgba(54,169,225,.16) 42%,rgba(54,169,225,0) 78%) !important;background-repeat:no-repeat !important}
html.layout-phone:not(.dark-mode) #layout-list > #messagelist-header.header,html.layout-phone:not(.dark-mode) #layout-list > .ern-titel{background:transparent !important;border-bottom-color:transparent !important;box-shadow:none !important}
html.layout-phone #layout-list > .ern-titel{padding-top:12px !important;padding-bottom:12px !important}
html.layout-phone:not(.dark-mode) #layout-list > .searchbar.searchbar{background:rgba(255,255,255,.62) !important;border:1px solid rgba(255,255,255,.7) !important;box-shadow:0 1px 2px rgba(27,31,39,.06),0 4px 14px rgba(27,31,39,.05) !important;-webkit-backdrop-filter:blur(10px) saturate(1.15);backdrop-filter:blur(10px) saturate(1.15);margin-bottom:14px !important}
/* geen harde rand: de gloed loopt over in het wit van de lijst (Ayham: premium in elkaar laten overvloeien) */
html.layout-phone:not(.dark-mode) #layout-list #messagelist-content{background:linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,.55) 70px,#fff 150px) !important;border-radius:0;box-shadow:none}
html.layout-phone:not(.dark-mode) #layout-list #messagelist-content .ern-filters{background:transparent !important}

/* pijltje naast de titel draait om als de keuze open is */
html.layout-phone #layout-list > .ern-titel .ern-map-pijl{transition:transform .18s ease}
html.layout-phone #layout-list > .ern-titel .ern-map.open .ern-map-pijl{transform:rotate(180deg)}

/* mappenkeuze: kaart onder de titel, regels van 44px, scrolt zelf als er veel mappen zijn */
.ern-keuze-achter{position:absolute;left:0;right:0;bottom:0;z-index:999;background:rgba(27,31,39,.16)}
.ern-keuze{position:absolute;left:12px;right:12px;z-index:1000;max-height:min(64vh,540px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:6px;background:#fff;border:1px solid #e6e8dc;border-radius:16px;box-shadow:0 16px 40px rgba(27,31,39,.22);transform-origin:top left;animation:ern-keuze-in .16s ease-out}
@keyframes ern-keuze-in{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ern-keuze{animation:none}html.layout-phone #layout-list > .ern-titel .ern-map-pijl{transition:none}}
.ern-keuze-kop{padding:10px 12px 4px;margin-top:4px;border-top:1px solid #eef0e8;font-size:10.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:#8a909b}
.ern-keuze-rij{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 10px 0 12px;border-radius:10px;color:#1b1f27;text-decoration:none;font-size:15px;-webkit-tap-highlight-color:transparent}
.ern-keuze-rij:active{background:#f1f2ec}
.ern-keuze-rij.ongelezen .ern-keuze-naam{font-weight:650}
.ern-keuze-rij.gekozen{background:#e6f4fb;color:#176b9e;font-weight:650}
.ern-keuze-naam{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ern-keuze-n{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 6px;border-radius:10px;background:#e6af2e;color:#1b1f27;font-size:11.5px;font-weight:700;box-sizing:border-box}
.ern-keuze-v{flex:none;width:16px;height:16px;background:#176b9e;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/16px no-repeat}
.ern-keuze-ic{flex:none;width:20px;height:20px;background:#4a5160;-webkit-mask:var(--ic) center/20px 20px no-repeat;mask:var(--ic) center/20px 20px no-repeat}
.ern-keuze-rij.gekozen .ern-keuze-ic{background:#176b9e}
.ern-keuze-rij.soort-map{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E")}
.ern-keuze-rij.soort-inbox{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1z'/%3E%3C/svg%3E")}
.ern-keuze-rij.soort-drafts{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.4 3.6a2 2 0 0 1 3 3L7.5 18.5 3 20l1.5-4.5z'/%3E%3C/svg%3E")}
.ern-keuze-rij.soort-sent{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 21.7a.5.5 0 0 0 .9 0l6.5-19a.5.5 0 0 0-.6-.6l-19 6.5a.5.5 0 0 0 0 .9l7.9 3.2a2 2 0 0 1 1.1 1.1z'/%3E%3Cpath d='m21.9 2.1-10.9 10.9'/%3E%3C/svg%3E")}
.ern-keuze-rij.soort-junk{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22c5.5 0 8-3.5 8-8 0-3-2-6-4-8 0 3-2 4-3 4-1.5 0-2-1.5-2-4-3 2-7 5.5-7 10 0 3.5 3 6 8 6z'/%3E%3C/svg%3E")}
.ern-keuze-rij.soort-trash{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E")}
.ern-keuze-rij.soort-archive{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='5' x='2' y='3' rx='1'/%3E%3Cpath d='M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8'/%3E%3Cpath d='M10 12h4'/%3E%3C/svg%3E")}
.ern-keuze-beheer{display:flex;align-items:center;min-height:42px;margin-top:4px;padding:0 12px;border-top:1px solid #eef0e8;color:#176b9e;font-size:14px;font-weight:600;text-decoration:none}
html.dark-mode .ern-keuze{background:#232933;border-color:#3a4354}
html.dark-mode .ern-keuze-rij{color:#f1f3ea}
html.dark-mode .ern-keuze-rij.gekozen{background:#2e3a4a;color:#6abfe9}
html.dark-mode .ern-keuze-ic{background:#d7dbe2}
html.dark-mode .ern-keuze-kop,html.dark-mode .ern-keuze-beheer{border-top-color:#3a4354}

/* opstelknop: donkere ERN-tegel met gele en blauwe gloed (zoals de menubalk), geel pennetje en de tekst "Nieuwe mail";
   bij omlaag scrollen klapt hij in tot alleen het pennetje, bij omhoog scrollen komt de tekst terug */
html.layout-phone #layout-list .floating-action-buttons{bottom:calc(58px + var(--ern-onder)) !important;right:16px !important}
html.layout-phone #layout-list .floating-action-buttons a.button.compose{width:auto !important;min-width:56px;height:56px !important;padding:0 20px 0 17px !important;display:flex !important;align-items:center;gap:10px;border-radius:18px !important;color:#fff !important;background-color:#1b1f27 !important;background-image:radial-gradient(70px 52px at 0% 0%,rgba(230,175,46,.6),rgba(230,175,46,0) 72%),radial-gradient(96px 64px at 100% 100%,rgba(54,169,225,.6),rgba(54,169,225,0) 72%),linear-gradient(135deg,#2e3a4a,#1b1f27) !important;box-shadow:0 10px 24px rgba(27,31,39,.32),inset 0 1px 0 rgba(255,255,255,.1) !important;text-decoration:none;transition:padding .18s ease,transform .12s ease;-webkit-tap-highlight-color:transparent}
html.layout-phone #layout-list .floating-action-buttons a.button.compose:active{transform:scale(.96)}
html.layout-phone #layout-list .floating-action-buttons a.button.compose::before{content:"" !important;flex:none;display:block !important;width:22px !important;height:22px !important;margin:0 !important;font-size:0 !important;background-color:#e6af2e !important;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.4 3.6a2 2 0 0 1 3 3L7.5 18.5 3 20l1.5-4.5z'/%3E%3C/svg%3E") center/22px 22px no-repeat !important;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.4 3.6a2 2 0 0 1 3 3L7.5 18.5 3 20l1.5-4.5z'/%3E%3C/svg%3E") center/22px 22px no-repeat !important}
html.layout-phone #layout-list .floating-action-buttons a.button.compose .inner{position:static !important;display:block !important;width:auto !important;height:auto !important;clip:auto !important;overflow:hidden;white-space:nowrap;max-width:140px;font-size:15px !important;font-weight:650;letter-spacing:.01em;color:#fff !important;opacity:1;transition:max-width .18s ease,opacity .12s ease}
html.layout-phone #layout-list .floating-action-buttons.ern-klein a.button.compose{padding:0 17px !important;gap:0}
html.layout-phone #layout-list .floating-action-buttons.ern-klein a.button.compose .inner{max-width:0;opacity:0}
@media (prefers-reduced-motion:reduce){html.layout-phone #layout-list .floating-action-buttons a.button.compose,html.layout-phone #layout-list .floating-action-buttons a.button.compose .inner{transition:none}}

/* mappenscherm (volledig scherm, als dat toch opent): compacter */
html.layout-phone #folderlist-content > .ern-zb-titel{font-size:22px !important;padding:2px 20px 8px !important}
html.layout-phone #layout-sidebar #mailboxlist li.mailbox > a{min-height:44px !important;height:44px !important;font-size:15px !important}