/* =============================================================
 * Outlook Dark — Roundcube skin (clean rewrite)
 * Warm cream on near-black. Monospace. Sharp edges.
 * Extends elastic via @import; overrides only what's needed.
 * Matches unlicensedstudio.com aesthetic.
 *
 * Layout:
 *   1.  Tokens + light mode
 *   2.  Base typography & global
 *   3.  Scrollbars
 *   4.  Layout containers
 *   5.  Far-left rail (#layout-menu / #taskmenu)
 *   6.  Folder sidebar (.treelist)
 *   7.  Toolbars (.menu.toolbar)
 *   8.  Search bar
 *   9.  Mail list (.messagelist)
 *   10. Reading pane
 *   11. Buttons
 *   12. Forms / inputs
 *   13. Popups / dropdowns / dialogs
 *   14. Login
 *   15. App launcher (rail popover)
 *   16. Alerts, badges, misc
 * ============================================================= */

@import url("../../elastic/styles/styles.min.css");

/* -------------------------------------------------------------
 * 1. Tokens
 * ------------------------------------------------------------- */
:root {
    /* Dark palette (default) */
    --od-bg:           #0a0a0a;
    --od-bg-nav:       #050505;
    --od-bg-sidebar:   #0d0d0d;
    --od-bg-toolbar:   #0e0e0e;
    --od-bg-elevated:  #141414;
    --od-bg-hover:     #1a1a1a;
    --od-bg-row-hover: #141414;
    --od-bg-selected:  #161b22;
    --od-bg-input:     #0d0d0d;

    --od-text:         #e8e6dd;
    --od-text-muted:   #9a958a;
    --od-text-subtle:  #5a564f;
    --od-text-disabled:#33312d;

    --od-accent:       #4a90d9;
    --od-accent-hover: #6ba7e8;
    --od-accent-soft:  rgba(74,144,217,.15);

    --od-border:       #1a1a1a;
    --od-border-soft:  #111111;

    --od-font: 'JetBrains Mono', 'IBM Plex Mono', 'Cascadia Code',
               'SF Mono', Menlo, Consolas, monospace;

    --od-dur: 120ms;
}

/* Light mode — kicks in when html doesn't have .dark-mode class */
html:not(.dark-mode) {
    --od-bg:           #efece3;
    --od-bg-nav:       #e8e5dc;
    --od-bg-sidebar:   #f2f0e8;
    --od-bg-toolbar:   #e8e5dc;
    --od-bg-elevated:  #faf9f3;
    --od-bg-hover:     #e0dccf;
    --od-bg-row-hover: #e8e4d8;
    --od-bg-selected:  #d4e0ed;
    --od-bg-input:     #ffffff;

    --od-text:         #1a1a1a;
    --od-text-muted:   #5a5550;
    --od-text-subtle:  #8a857d;
    --od-text-disabled:#b8b4ab;

    --od-accent:       #2c6cb8;
    --od-accent-hover: #1a4f8f;
    --od-accent-soft:  rgba(44,108,184,.15);

    --od-border:       #d4d0c6;
    --od-border-soft:  #e2ddd1;
}

/* -------------------------------------------------------------
 * 2. Base
 * ------------------------------------------------------------- */
html, body {
    background: var(--od-bg) !important;
    color: var(--od-text) !important;
    font-family: var(--od-font) !important;
    font-size: 13px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* { border-radius: 0 !important; }

a, a:visited { color: var(--od-accent); transition: color var(--od-dur) ease; }
a:hover { color: var(--od-accent-hover); text-decoration: none; }
::selection { background: var(--od-accent); color: #fff; }
hr { border-color: var(--od-border) !important; }

/* Icon pseudo-elements must use elastic's "Icons" font-family
   (renamed Font Awesome), NOT our monospace. */
html body .icon,
html body i.icon,
html body a.button::before,
html body button::before,
html body a.button.icon::before,
html body [class*="btn"]::before,
html body .menu a::before,
html body ul.treelist a::before {
    font-family: Icons !important;
    font-weight: 900;
    font-style: normal;
    line-height: 1;
}

/* -------------------------------------------------------------
 * 3. Scrollbars
 * ------------------------------------------------------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--od-border) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--od-border);
    transition: background var(--od-dur) ease;
}
*::-webkit-scrollbar-thumb:hover { background: var(--od-text-subtle); }

/* -------------------------------------------------------------
 * 4. Layout containers
 * ------------------------------------------------------------- */
html body #layout,
html body .layout-content,
html body .content {
    background: var(--od-bg) !important;
}
html body #layout-menu    { background: var(--od-bg-nav) !important; border-right: 1px solid var(--od-border-soft) !important; }
html body #layout-sidebar { background: var(--od-bg-sidebar) !important; border-right: 1px solid var(--od-border-soft) !important; }
html body #layout-list    { background: var(--od-bg) !important; border-right: 1px solid var(--od-border-soft) !important; }
html body #layout-content { background: var(--od-bg) !important; }

/* Header rows (above list / reading pane) */
html body #layout-content > .header,
html body #layout-list > .header,
html body #layout-sidebar > .header,
html body .header.uibox {
    background: var(--od-bg-toolbar) !important;
    border-bottom: 1px solid var(--od-border-soft) !important;
    box-shadow: none !important;
}

/* -------------------------------------------------------------
 * 5. Far-left rail (#layout-menu / #taskmenu)
 * ------------------------------------------------------------- */

/* Logo: replace the <img> content with our SVG via CSS `content`.
   Works even when iRedMail's <img src> 404s — the broken-image
   placeholder can never show. */
html body:not(.task-login) #logo,
html body:not(.task-login) img#logo {
    content: url("../images/logo.svg") !important;
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    background: transparent !important;
    border: none !important;
}

/* Center the logo (and any cancel button) inside the popover-header
   via flex, instead of relying on the <img>'s `margin: 10px auto`. */
html body #layout-menu .popover-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hide the mobile-only close button in the popover header */
html body #layout-menu .popover-header a.cancel,
html body #layout-menu .popover-header a.button.icon {
    display: none !important;
}

/* Rail buttons: icon above a 9px lowercase label (monospace) */
html body #taskmenu a,
html body #layout-menu a.button {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    padding: 10px 2px !important;
    margin: 1px 0 !important;
    color: var(--od-text-muted) !important;
    background: transparent !important;
    border: none !important;
    text-align: center !important;
    font-family: var(--od-font) !important;
    transition: background var(--od-dur) ease, color var(--od-dur) ease;
}
html body #taskmenu a:hover,
html body #layout-menu a.button:hover {
    background: var(--od-bg-hover) !important;
    color: var(--od-text) !important;
}
html body #taskmenu a.selected,
html body #layout-menu a.button.selected {
    background: transparent !important;
    color: var(--od-accent) !important;
    box-shadow: inset 2px 0 0 var(--od-accent);
}

/* Rail icon (::before) — block, centered, above label */
html body #taskmenu a::before,
html body #layout-menu a.button::before {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 auto 3px auto !important;
    font-size: 18px !important;
    text-align: center !important;
    color: inherit !important;
}

/* Rail label (.inner) — 9px so "light mode" fits the ~78px rail */
html body #taskmenu .inner,
html body #taskmenu span.inner,
html body #layout-menu a.button .inner {
    display: block !important;
    width: 100% !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    text-transform: lowercase !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    letter-spacing: .01em !important;
}

/* -------------------------------------------------------------
 * 6. Folder sidebar (.treelist)
 * ------------------------------------------------------------- */
html body .menu,
html body ul.treelist,
html body ul.listing {
    background: transparent !important;
    color: var(--od-text-muted) !important;
    border: none !important;
}

html body ul.treelist li a,
html body ul.treelist li > div > a,
html body ul.listing li a,
html body .menu li a {
    color: var(--od-text-muted) !important;
    background: transparent !important;
    border: none !important;
    padding: 7px 14px !important;
    font-family: var(--od-font) !important;
    font-size: 13px;
    transition: background var(--od-dur) ease, color var(--od-dur) ease;
}

html body ul.treelist li a:hover,
html body ul.treelist li > div > a:hover,
html body ul.listing li a:hover,
html body .menu li a:hover {
    background: var(--od-bg-hover) !important;
    color: var(--od-text) !important;
}

html body ul.treelist li.selected > a,
html body ul.treelist li.selected > div > a,
html body .menu li.selected > a {
    background: var(--od-bg-selected) !important;
    color: var(--od-text) !important;
    box-shadow: inset 2px 0 0 var(--od-accent);
}

html body .unreadcount {
    background: transparent !important;
    color: var(--od-accent) !important;
    font-family: var(--od-font) !important;
    font-weight: 600;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------
 * 7. Toolbars (.menu.toolbar)
 * ------------------------------------------------------------- */

/* Kill elastic's max-width: 6rem cap that truncates labels */
html body .menu.toolbar a,
html body .menu.toolbar button {
    max-width: none !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 0 14px !important;
    font-family: var(--od-font) !important;
    color: var(--od-text-muted) !important;
    background: transparent !important;
    text-transform: none !important;
}

html body .menu.toolbar a:hover,
html body .menu.toolbar button:hover {
    background: var(--od-bg-hover) !important;
    color: var(--od-text) !important;
}

html body .menu.toolbar a.disabled,
html body .menu.toolbar a[aria-disabled="true"] {
    color: var(--od-text-disabled) !important;
    opacity: .55;
    pointer-events: none;
}

/* Toolbar inner labels: visible, full width */
html body .menu.toolbar a .inner,
html body .menu.toolbar button .inner {
    display: inline !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    color: inherit !important;
}

/* Dropbutton caret: icon-only, narrow (Reply-all/Forward ⌄) */
html body .menu.toolbar .dropbutton > a.dropdown .inner {
    display: none !important;
}
html body .menu.toolbar .dropbutton > a.dropdown {
    padding: 0 6px !important;
    max-width: 28px !important;
}

/* -------------------------------------------------------------
 * 8. Search bar
 * ------------------------------------------------------------- */
html body .searchbar,
html body #quicksearchbar,
html body form.searchform {
    background: var(--od-bg-input) !important;
    border: 1px solid var(--od-border) !important;
    color: var(--od-text) !important;
    transition: border-color var(--od-dur) ease;
}
html body .searchbar input,
html body #quicksearchbar input,
html body form.searchform input[type="text"] {
    background: transparent !important;
    color: var(--od-text) !important;
    border: none !important;
    box-shadow: none !important;
    font-family: var(--od-font) !important;
}
html body .searchbar:focus-within,
html body form.searchform:focus-within {
    border-color: var(--od-accent) !important;
}

/* -------------------------------------------------------------
 * 9. Mail list (.messagelist)
 * ------------------------------------------------------------- */
html body .messagelist,
html body table.messagelist {
    background: var(--od-bg) !important;
    color: var(--od-text-muted) !important;
    border: none !important;
}

html body .messagelist thead th {
    background: var(--od-bg) !important;
    color: var(--od-text-subtle) !important;
    border-bottom: 1px solid var(--od-border-soft) !important;
    font-family: var(--od-font) !important;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 400;
}

html body .messagelist tbody tr {
    background: transparent !important;
    color: var(--od-text-muted) !important;
    border: none !important;
    transition: background var(--od-dur) ease, color var(--od-dur) ease;
}
html body .messagelist tbody tr td {
    border: none !important;
    border-bottom: 1px solid var(--od-border-soft) !important;
    font-family: var(--od-font) !important;
    font-size: 12px;
}
html body .messagelist tbody tr:hover {
    background: var(--od-bg-row-hover) !important;
    color: var(--od-text) !important;
    cursor: pointer;
}
html body .messagelist tbody tr.selected {
    background: var(--od-bg-selected) !important;
    color: var(--od-text) !important;
    box-shadow: inset 2px 0 0 var(--od-accent);
}
html body .messagelist tbody tr.unread {
    color: var(--od-text) !important;
    font-weight: 500;
}

html body .messagelist .date {
    color: var(--od-text-subtle) !important;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
}
html body .messagelist tr.unread .date { color: var(--od-text) !important; }

/* -------------------------------------------------------------
 * 10. Reading pane
 * ------------------------------------------------------------- */
html body #messagebody,
html body #messagecontent,
html body .messagebody {
    background: var(--od-bg) !important;
    color: var(--od-text) !important;
    background-image: none !important;
}

html body #messageheader,
html body .message-header,
html body table.headers-table {
    background: var(--od-bg-toolbar) !important;
    color: var(--od-text) !important;
    border-bottom: 1px solid var(--od-border-soft) !important;
}
html body table.headers-table td { color: var(--od-text-muted) !important; font-family: var(--od-font) !important; }
html body table.headers-table td.header-title {
    color: var(--od-text-subtle) !important;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* HTML mail body: always a white card for readability */
html body .message-htmlpart {
    background: #fff !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    padding: 18px !important;
    border: none !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
}

/* Plain-text body + source view */
html body .message-partheaders,
html body .message-part pre,
html body pre.pre {
    background: var(--od-bg-elevated) !important;
    color: var(--od-text) !important;
    border: 1px solid var(--od-border-soft) !important;
    font-family: var(--od-font) !important;
}

/* -------------------------------------------------------------
 * 11. Buttons
 * ------------------------------------------------------------- */
html body .btn,
html body button.btn,
html body a.button,
html body input.button {
    background: transparent;
    color: var(--od-text);
    border: none;
    padding: 6px 14px;
    font-family: var(--od-font);
    font-size: 12px;
    text-transform: lowercase;
    transition: background var(--od-dur) ease, color var(--od-dur) ease;
}
html body .btn:hover,
html body button.btn:hover,
html body a.button:hover {
    background: var(--od-bg-hover);
    color: var(--od-text);
}

html body .btn-primary,
html body .mainaction,
html body button.mainaction,
html body .btn.btn-primary {
    background: var(--od-accent) !important;
    border-color: var(--od-accent) !important;
    color: #fff !important;
}
html body .btn-primary:hover,
html body .mainaction:hover,
html body .btn.btn-primary:hover {
    background: var(--od-accent-hover) !important;
    border-color: var(--od-accent-hover) !important;
}

/* -------------------------------------------------------------
 * 12. Forms / inputs
 * ------------------------------------------------------------- */
html body input[type="text"],
html body input[type="email"],
html body input[type="password"],
html body input[type="search"],
html body input[type="number"],
html body input[type="url"],
html body textarea,
html body select,
html body .form-control {
    background: var(--od-bg-input) !important;
    color: var(--od-text) !important;
    border: 1px solid var(--od-border) !important;
    font-family: var(--od-font) !important;
    padding: 8px 11px !important;
    transition: border-color var(--od-dur) ease;
}
html body input:focus,
html body textarea:focus,
html body select:focus,
html body .form-control:focus {
    border-color: var(--od-accent) !important;
    outline: none !important;
    box-shadow: none !important;
}
html body input::placeholder, html body textarea::placeholder {
    color: var(--od-text-disabled) !important;
}
html body label, html body fieldset legend {
    color: var(--od-text-muted) !important;
    font-family: var(--od-font) !important;
}
html body input[type="checkbox"], html body input[type="radio"] {
    accent-color: var(--od-accent);
}

/* Square toggle switch — overrides Bootstrap's form-switch pill
   with a flat rectangle + square thumb to match the theme's
   zero-radius aesthetic. Thumb is painted as a linear-gradient
   block (inputs can't host ::before/::after reliably), positioned
   left when unchecked and right when :checked. */
html body .form-switch .form-check-input,
html body input.form-check-input[role="switch"],
html body .custom-switch .custom-control-input,
html body input[type="checkbox"].form-check-input[role="switch"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
    width: 2.25em !important;
    height: 1.1em !important;
    border-radius: 0 !important;
    background-color: var(--od-bg-input) !important;
    border: 1px solid var(--od-border) !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    margin: 0 .4em 0 0 !important;
    padding: 0 !important;
    /* Square thumb: 2px inset, ~75% of track height */
    background-image:
        linear-gradient(var(--od-text-muted), var(--od-text-muted)) !important;
    background-repeat: no-repeat !important;
    background-size: calc(1.1em - 6px) calc(1.1em - 6px) !important;
    background-position: 2px center !important;
    transition:
        background-color var(--od-dur) ease,
        background-position var(--od-dur) ease,
        border-color var(--od-dur) ease !important;
}
html body .form-switch .form-check-input:checked,
html body input.form-check-input[role="switch"]:checked,
html body .custom-switch .custom-control-input:checked,
html body input[type="checkbox"].form-check-input[role="switch"]:checked {
    background-color: var(--od-accent-soft) !important;
    border-color: var(--od-accent) !important;
    background-image:
        linear-gradient(var(--od-accent), var(--od-accent)) !important;
    background-position: calc(100% - 2px) center !important;
}
html body .form-switch .form-check-input:focus,
html body input.form-check-input[role="switch"]:focus {
    outline: 1px solid var(--od-accent) !important;
    outline-offset: 1px !important;
    box-shadow: none !important;
}

/* Bootstrap 4 `.custom-switch` uses ::before (track) + ::after (thumb)
   on a sibling label. Flatten those too. */
html body .custom-switch .custom-control-label::before {
    border-radius: 0 !important;
    background-color: var(--od-bg-input) !important;
    border: 1px solid var(--od-border) !important;
}
html body .custom-switch .custom-control-label::after {
    border-radius: 0 !important;
    background-color: var(--od-text-muted) !important;
}
html body .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--od-accent-soft) !important;
    border-color: var(--od-accent) !important;
}
html body .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: var(--od-accent) !important;
}

/* -------------------------------------------------------------
 * 13. Popups / dropdowns / dialogs
 * ------------------------------------------------------------- */
html body .popupmenu,
html body .popover,
html body .dropdown-menu,
html body .ui-dialog,
html body .ui-widget-content,
html body .ui-menu {
    background: var(--od-bg-elevated) !important;
    color: var(--od-text) !important;
    border: 1px solid var(--od-border) !important;
    box-shadow: none !important;
    font-family: var(--od-font) !important;
}

html body .popupmenu li a,
html body .dropdown-menu a {
    color: var(--od-text-muted) !important;
    background: transparent !important;
    padding: 8px 14px !important;
    font-size: 12px;
}
html body .popupmenu li a:hover,
html body .dropdown-menu a:hover {
    background: var(--od-bg-hover) !important;
    color: var(--od-text) !important;
}

html body .ui-dialog .ui-dialog-titlebar {
    background: var(--od-bg-toolbar) !important;
    color: var(--od-text) !important;
    border-bottom: 1px solid var(--od-border-soft) !important;
}
html body .ui-widget-overlay {
    background: rgba(0,0,0,.6) !important;
    opacity: 1 !important;
}

/* -------------------------------------------------------------
 * 14. Login
 * ------------------------------------------------------------- */
html body.task-login {
    background:
      radial-gradient(ellipse 800px 400px at 100% 30%, var(--od-accent-soft), transparent 60%),
      var(--od-bg) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    padding: 40px 24px !important;
}
html body.task-login #layout,
html body.task-login #layout-content {
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
html body.task-login form.propform.login,
html body.task-login #login-form {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
}
html body.task-login input[type="text"],
html body.task-login input[type="email"],
html body.task-login input[type="password"] {
    width: 100% !important;
    padding: 12px 14px !important;
    margin: 8px 0 !important;
    box-sizing: border-box;
}
html body.task-login button.mainaction,
html body.task-login input[type="submit"] {
    width: 100% !important;
    padding: 12px !important;
    margin-top: 16px !important;
}

/* Hide blank host field row */
html body.task-login tr:has(input[name="_host"]),
html body.task-login tr:has(select[name="_host"]) {
    display: none !important;
}

/* Auth messages: dock to bottom-right as a toast */
html body.task-login #message,
html body.task-login .alert,
html body.task-login [class*="boxerror"],
html body.task-login [class*="boxwarning"],
html body.task-login [class*="boxconfirmation"] {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    left: auto !important;
    top: auto !important;
    max-width: 340px !important;
    padding: 12px 16px !important;
    background: var(--od-bg-elevated) !important;
    border: 1px solid var(--od-border) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.3) !important;
    z-index: 9999 !important;
}

/* Replace "Roundcube Webmail" footer link text */
html body.task-login a[href*="roundcube" i] {
    font-size: 0 !important;
}
html body.task-login a[href*="roundcube" i]::after {
    content: "Unlicensed Studio Mail" !important;
    font-size: 11px !important;
    color: var(--od-text-subtle) !important;
    font-family: var(--od-font) !important;
    text-transform: lowercase !important;
    letter-spacing: .04em !important;
}

/* -------------------------------------------------------------
 * 15. App launcher (personal webapp shortcuts popover)
 * ------------------------------------------------------------- */

/* The <details> wrapper in the rail */
html body #layout-menu .app-launcher {
    display: block;
    position: relative;
    border-top: 1px solid var(--od-border-soft);
    margin-top: 4px;
    padding-top: 4px;
    anchor-name: --apps-anchor;
}

/* Summary = trigger button, styled as a rail button */
html body #layout-menu .app-launcher > summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 2px;
    text-align: center;
    color: var(--od-text-muted);
    transition: background var(--od-dur) ease, color var(--od-dur) ease;
}
html body #layout-menu .app-launcher > summary::-webkit-details-marker,
html body #layout-menu .app-launcher > summary::marker { display: none; content: ""; }
html body #layout-menu .app-launcher > summary:hover,
html body #layout-menu .app-launcher[open] > summary {
    background: var(--od-bg-hover);
    color: var(--od-text);
}

/* 3x3 dot-grid icon via inline SVG */
html body #layout-menu .app-launcher > summary::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    margin: 0 auto 3px auto;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239a958a'><circle cx='4' cy='4' r='2'/><circle cx='12' cy='4' r='2'/><circle cx='20' cy='4' r='2'/><circle cx='4' cy='12' r='2'/><circle cx='12' cy='12' r='2'/><circle cx='20' cy='12' r='2'/><circle cx='4' cy='20' r='2'/><circle cx='12' cy='20' r='2'/><circle cx='20' cy='20' r='2'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
html body #layout-menu .app-launcher > summary .inner {
    display: block;
    font-size: 9px;
    text-transform: lowercase;
    text-align: center;
    letter-spacing: .01em;
}

html:not(.dark-mode) body #layout-menu .app-launcher > summary::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235a5550'><circle cx='4' cy='4' r='2'/><circle cx='12' cy='4' r='2'/><circle cx='20' cy='4' r='2'/><circle cx='4' cy='12' r='2'/><circle cx='12' cy='12' r='2'/><circle cx='20' cy='12' r='2'/><circle cx='4' cy='20' r='2'/><circle cx='12' cy='20' r='2'/><circle cx='20' cy='20' r='2'/></svg>");
}

/* Popover panel — fixed position next to the rail.
   Modern browsers use anchor() to pin to the summary; fallback
   centers vertically at the rail's right edge. */
html body #layout-menu .app-launcher[open] .app-launcher-panel {
    position: fixed;
    left: 82px;
    top: 50%;
    transform: translateY(-50%);
    width: 320px;
    max-width: calc(100vw - 100px);
    padding: 16px;
    background: var(--od-bg-elevated);
    border: 1px solid var(--od-border);
    box-shadow: 0 12px 32px rgba(0,0,0,.4);
    z-index: 9999;
    animation: od-launch-in 160ms ease-out;
}
@supports (anchor-name: --x) {
    html body #layout-menu .app-launcher[open] .app-launcher-panel {
        position-anchor: --apps-anchor;
        left: anchor(right);
        top: anchor(top);
        transform: none;
        margin-left: 8px;
    }
}
@keyframes od-launch-in {
    from { opacity: 0; transform: translate(-8px, -50%); }
    to   { opacity: 1; }
}
@supports (anchor-name: --x) {
    @keyframes od-launch-in {
        from { opacity: 0; margin-left: 0; }
        to   { opacity: 1; margin-left: 8px; }
    }
}

/* Grid of 4 columns */
html body #layout-menu .app-launcher-panel .app-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

/* Individual app tile */
html body #layout-menu .app-launcher-panel .app-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 4px;
    text-align: center;
    color: var(--od-text-muted);
    text-decoration: none;
    transition: background var(--od-dur) ease, color var(--od-dur) ease;
}
html body #layout-menu .app-launcher-panel .app-tile:hover {
    background: var(--od-bg-hover);
    color: var(--od-text);
}

html body #layout-menu .app-launcher-panel .app-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: 6px;
    color: #fff;
    font-family: Icons;
    font-weight: 900;
    font-size: 16px;
}
html body #layout-menu .app-launcher-panel .app-label {
    display: block;
    font-size: 10px;
    line-height: 1.3;
    text-transform: lowercase;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Per-app icon + color */
html body #layout-menu .app-launcher-panel .app-1 .app-icon { background: #5fc8d8; }
html body #layout-menu .app-launcher-panel .app-1 .app-icon::before { content: "\f005"; }
html body #layout-menu .app-launcher-panel .app-2 .app-icon { background: #6fcb5f; }
html body #layout-menu .app-launcher-panel .app-2 .app-icon::before { content: "\f135"; }
html body #layout-menu .app-launcher-panel .app-3 .app-icon { background: #ec5c8a; }
html body #layout-menu .app-launcher-panel .app-3 .app-icon::before { content: "\f0ac"; }
html body #layout-menu .app-launcher-panel .app-4 .app-icon { background: #4a90d9; }
html body #layout-menu .app-launcher-panel .app-4 .app-icon::before { content: "\f1b2"; }
html body #layout-menu .app-launcher-panel .app-5 .app-icon { background: #a98aef; }
html body #layout-menu .app-launcher-panel .app-5 .app-icon::before { content: "\f085"; }
html body #layout-menu .app-launcher-panel .app-6 .app-icon { background: #e8c25f; }
html body #layout-menu .app-launcher-panel .app-6 .app-icon::before { content: "\f02e"; }
html body #layout-menu .app-launcher-panel .app-7 .app-icon { background: #e85a5a; }
html body #layout-menu .app-launcher-panel .app-7 .app-icon::before { content: "\f167"; }
html body #layout-menu .app-launcher-panel .app-8 .app-icon { background: #9c7cd8; }
html body #layout-menu .app-launcher-panel .app-8 .app-icon::before { content: "\f09b"; }

/* -------------------------------------------------------------
 * 16. Alerts, badges, misc
 * ------------------------------------------------------------- */
html body .alert,
html body [class*="boxinformation"],
html body [class*="boxwarning"],
html body [class*="boxerror"],
html body [class*="boxconfirmation"] {
    border: 1px solid var(--od-border) !important;
    padding: 10px 14px !important;
    font-family: var(--od-font) !important;
    font-size: 12px;
}

html body .badge, html body .countdown {
    background: transparent !important;
    color: var(--od-text-muted) !important;
    border: 1px solid var(--od-border) !important;
    font-family: var(--od-font) !important;
    font-size: 10px;
    padding: 1px 7px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

html body blockquote {
    border-left: 2px solid var(--od-text-subtle) !important;
    color: var(--od-text-muted) !important;
    background: transparent !important;
    padding: 4px 12px !important;
    font-family: var(--od-font);
}

html body .progress, html body .quota-bg {
    background: var(--od-border-soft) !important;
    height: 3px;
    overflow: hidden;
}
html body .progress-bar, html body .quota-fg {
    background: var(--od-accent) !important;
    transition: width var(--od-dur) ease;
}

/* Print */
@media print {
    html, body, * { background: #fff !important; color: #000 !important; }
}

/* -------------------------------------------------------------
 * 17. Folder sidebar icon alignment
 *     (elastic floats ::before left; we re-flow as flex so the
 *     icon vertically centers with its label)
 * ------------------------------------------------------------- */
html body ul.treelist li a,
html body ul.treelist li > div > a,
html body .menu li a,
html body ul.listing li a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
html body ul.treelist li a::before,
html body ul.treelist li > div > a::before,
html body .menu li a::before,
html body ul.listing li a::before {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1 !important;
    flex: 0 0 18px !important;
    text-align: center !important;
}

/* -------------------------------------------------------------
 * 18. Bottom rail group (light mode / about / logout)
 *     Elastic sets .special-buttons { position:absolute; left:0 }
 *     but no positioning parent is declared — it escapes to the
 *     viewport.  Give #taskmenu a positioning context and the
 *     group will stay inside the rail and span its full width.
 * ------------------------------------------------------------- */
/* #layout-menu is the full-height rail; give IT the positioning
   context (not #taskmenu, which shrinks to content). Then
   .special-buttons with `bottom: 0` docks to the rail's bottom. */
html body #layout-menu {
    position: relative !important;
}
html body #taskmenu .special-buttons,
html body #layout-menu .special-buttons {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: transparent !important;
}

/* Same for .action-buttons (wraps the Compose button at the top) */
html body #taskmenu .action-buttons,
html body #layout-menu .action-buttons {
    display: block !important;
    width: 100% !important;
}

/* Buttons inside both groups use the same full-width rail style */
html body #taskmenu .special-buttons a,
html body #taskmenu .action-buttons a {
    width: 100% !important;
    background: transparent !important;
}
html body #taskmenu .special-buttons a:hover,
html body #taskmenu .action-buttons a:hover {
    background: var(--od-bg-hover) !important;
}

/* -------------------------------------------------------------
 * 19. App-tile centering inside the launcher popover
 * ------------------------------------------------------------- */
html body #layout-menu .app-launcher-panel .app-tile {
    text-align: center !important;
    justify-content: center !important;
}
html body #layout-menu .app-launcher-panel .app-icon {
    margin-left: auto !important;
    margin-right: auto !important;
}
html body #layout-menu .app-launcher-panel .app-label {
    width: 100% !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* -------------------------------------------------------------
 * 20. Search-row trailing icons + input text baseline
 * ------------------------------------------------------------- */

/* Envelope + chevron next to the search bar: target by known IDs
   only (a#searchfilter-selector, a#searchmenulink) so we don't
   accidentally touch hidden mobile buttons. */
html body a#searchfilter-selector,
html body a#searchmenulink {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 12px !important;
    line-height: 1 !important;
}
html body a#searchfilter-selector::before,
html body a#searchmenulink::before {
    float: none !important;
    margin: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* Input text baseline: explicit line-height so text stays centered
   inside the box regardless of padding/border box sizing. */
html body input[type="text"],
html body input[type="email"],
html body input[type="password"],
html body input[type="search"],
html body input[type="number"],
html body input[type="url"],
html body input[type="tel"],
html body select,
html body .form-control {
    line-height: 1.5 !important;
    box-sizing: border-box !important;
    min-height: 36px !important;
}
html body textarea {
    line-height: 1.5 !important;
}

/* -------------------------------------------------------------
 * 21. Specific overflow/filter buttons — vertical center only
 *     No display:flex on broad selectors (learned from section 20
 *     revert). Uses padding-top on the ::before glyph instead.
 * ------------------------------------------------------------- */
html body a.toolbar-menu-button,
html body a.toolbar-list-button,
html body a.button.icon.toolbar-menu-button,
html body a.button.icon.toolbar-list-button,
html body button.toolbar-menu-button,
html body button.toolbar-list-button,
html body a.button.unread,
html body a#searchfilter-selector,
html body a#searchmenulink,
html body a.button.reset,
html body a.button.icon.sidebar-menu,
html body a.sidebar-menu {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

html body a.toolbar-menu-button::before,
html body a.toolbar-list-button::before,
html body a.button.icon.toolbar-menu-button::before,
html body a.button.icon.toolbar-list-button::before,
html body button.toolbar-menu-button::before,
html body button.toolbar-list-button::before,
html body a.button.unread::before,
html body a#searchfilter-selector::before,
html body a#searchmenulink::before,
html body a.button.reset::before,
html body a.button.icon.sidebar-menu::before,
html body a.sidebar-menu::before {
    float: none !important;
    margin: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    text-align: center !important;
}

/* Hide narrow-viewport overflow menus on desktop. Elastic designs
   .toolbar-menu-button and .toolbar-list-button as collapse-menus that
   surface hidden toolbar items when the viewport is too narrow to show
   them inline. At desktop widths the full toolbar is already visible
   so these kebabs are redundant. Our display:inline-flex above would
   otherwise force them visible at every width — reverse that here. */
@media (min-width: 1200px) {
    html body a.toolbar-menu-button,
    html body a.toolbar-list-button,
    html body a.button.icon.toolbar-menu-button,
    html body a.button.icon.toolbar-list-button,
    html body button.toolbar-menu-button,
    html body button.toolbar-list-button {
        display: none !important;
    }
}

/* -------------------------------------------------------------
 * 22. Logo header box — pick up the skin's nav background
 *     (elastic hardcodes `.popover-header { background: #2f3a3f }`)
 * ------------------------------------------------------------- */
html body #layout-menu .popover-header {
    background-color: var(--od-bg-nav) !important;
    background: var(--od-bg-nav) !important;
}

/* -------------------------------------------------------------
 * 23. Search-row chevron (real selector)
 *     a.button.options[data-target="searchmenu"]  or href="#search-filter"
 * ------------------------------------------------------------- */
html body a.button.options[data-target="searchmenu"],
html body a.button.options[href="#search-filter"],
html body a.button[data-target="searchmenu"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}
html body a.button.options[data-target="searchmenu"]::before,
html body a.button.options[href="#search-filter"]::before,
html body a.button[data-target="searchmenu"]::before {
    float: none !important;
    margin: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* -------------------------------------------------------------
 * 25. Theme switcher dropdown (replaces single Light toggle)
 *     Styled like unlicensedstudio.com "// THEME" selector
 * ------------------------------------------------------------- */

/* The <details> wrapper inside the rail */
html body #layout-menu .theme-switcher {
    display: block !important;
    position: relative;
    width: 100% !important;
}

/* Summary (trigger button) — same as the other rail buttons */
html body #layout-menu .theme-switcher > summary {
    list-style: none !important;
    cursor: pointer;
    display: block !important;
    width: 100% !important;
    padding: 10px 2px !important;
    text-align: center !important;
    color: var(--od-text-muted) !important;
    transition: background var(--od-dur) ease, color var(--od-dur) ease;
}
html body #layout-menu .theme-switcher > summary::-webkit-details-marker,
html body #layout-menu .theme-switcher > summary::marker {
    display: none !important;
    content: "" !important;
}
html body #layout-menu .theme-switcher > summary:hover,
html body #layout-menu .theme-switcher[open] > summary {
    background: var(--od-bg-hover) !important;
    color: var(--od-text) !important;
}

/* Trigger icon — palette glyph */
html body #layout-menu .theme-switcher > summary::before {
    content: "\f53f" !important;   /* fa-palette */
    font-family: Icons !important;
    font-weight: 900;
    display: block !important;
    margin: 0 auto 3px auto !important;
    font-size: 18px !important;
    text-align: center !important;
}
html body #layout-menu .theme-switcher > summary .inner {
    display: block !important;
    font-size: 9px !important;
    text-transform: lowercase !important;
    letter-spacing: .01em !important;
    color: inherit !important;
}

/* Popover panel — terminal-style "// THEME" card */
html body #layout-menu .theme-panel { display: none; }
html body #layout-menu .theme-switcher[open] .theme-panel {
    display: block !important;
    position: fixed !important;
    left: 82px !important;
    bottom: 80px !important;
    width: 200px !important;
    padding: 12px 14px !important;
    background: var(--od-bg-elevated) !important;
    border: 1px solid var(--od-border) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.45) !important;
    z-index: 9999 !important;
    animation: od-theme-in 140ms ease-out;
}
@keyframes od-theme-in {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Anchor-positioned if the browser supports it */
@supports (anchor-name: --x) {
    html body #layout-menu .theme-switcher { anchor-name: --theme-anchor; }
    html body #layout-menu .theme-switcher[open] .theme-panel {
        position-anchor: --theme-anchor;
        left: anchor(right) !important;
        top: anchor(top) !important;
        bottom: auto !important;
        margin-left: 8px !important;
    }
}

/* "// theme" header */
html body #layout-menu .theme-panel .theme-header {
    font-family: var(--od-font) !important;
    font-size: 10px !important;
    letter-spacing: .08em !important;
    color: var(--od-text-subtle) !important;
    text-transform: lowercase !important;
    padding-bottom: 10px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px dashed var(--od-border) !important;
}

/* Option row */
html body #layout-menu .theme-panel .theme-option {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 8px 6px !important;
    background: transparent !important;
    border: none !important;
    color: var(--od-text-muted) !important;
    font-family: var(--od-font) !important;
    font-size: 12px !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: background var(--od-dur) ease, color var(--od-dur) ease;
}
html body #layout-menu .theme-panel .theme-option:hover {
    background: var(--od-bg-hover) !important;
    color: var(--od-text) !important;
}
html body #layout-menu .theme-panel .theme-option.selected {
    color: var(--od-text) !important;
}

/* Radio indicator — circle, filled when .selected
   (override the global `* { border-radius: 0 }` rule) */
html body #layout-menu .theme-panel .theme-option .radio {
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    border: 1px solid var(--od-text-muted) !important;
    border-radius: 50% !important;
    position: relative !important;
    flex: 0 0 auto !important;
}
html body #layout-menu .theme-panel .theme-option.selected .radio {
    border-color: var(--od-text) !important;
}
html body #layout-menu .theme-panel .theme-option.selected .radio::after {
    content: "" !important;
    position: absolute !important;
    inset: 2px !important;
    background: var(--od-text) !important;
    border-radius: 50% !important;
}

html body #layout-menu .theme-panel .theme-option .label {
    flex: 1 1 auto !important;
}

/* -------------------------------------------------------------
 * 24. Outlook palette (html.outlook-mode)
 *     Modeled after outlook.live.com: white surfaces + blue
 *     accents (signature #0078d4), not a blue rail.
 * ------------------------------------------------------------- */
/* Double class selector boosts specificity above html:not(.dark-mode).
   !important on custom properties ensures outlook tokens win when
   both outlook-mode and not-dark-mode match (light rule uses
   :not(.dark-mode) which also matches on outlook-mode pages). */
html.outlook-mode.outlook-mode {
    --od-bg:           #faf9f8 !important;
    --od-bg-nav:       #ffffff !important;
    --od-bg-sidebar:   #faf9f8 !important;
    --od-bg-toolbar:   #ffffff !important;
    --od-bg-elevated:  #ffffff !important;
    --od-bg-hover:     #f3f2f1 !important;
    --od-bg-row-hover: #f3f2f1 !important;
    --od-bg-selected:  #deecf9 !important;
    --od-bg-input:     #ffffff !important;

    --od-text:         #252423 !important;
    --od-text-muted:   #605e5c !important;
    --od-text-subtle:  #a19f9d !important;
    --od-text-disabled:#c8c6c4 !important;

    --od-accent:       #0078d4 !important;
    --od-accent-hover: #106ebe !important;
    --od-accent-soft:  rgba(0,120,212,.15) !important;

    --od-border:       #edebe9 !important;
    --od-border-soft:  #f3f2f1 !important;

    /* Outlook uses Segoe UI in its own UI; keep monospace for
       consistency across our 3 themes, or uncomment below to
       switch to system UI font in Outlook mode only. */
    /* --od-font: 'Segoe UI', system-ui, sans-serif; */
}

/* Selected rail button: blue accent pill instead of grey */
html.outlook-mode body #layout-menu a.button.selected,
html.outlook-mode body #taskmenu a.selected {
    color: var(--od-accent) !important;
    background: var(--od-accent-soft) !important;
    box-shadow: inset 2px 0 0 var(--od-accent);
}

/* Logo header box in outlook mode: signature Outlook blue (top strip) */
html.outlook-mode body #layout-menu .popover-header {
    background: var(--od-accent) !important;
    border-bottom: none !important;
}

/* Top header strips of each panel: signature Outlook blue.
   Descendant selectors (not `>`) to catch nested headers like
   the account row in sidebar, which isn't always a direct child. */
html.outlook-mode body #layout-content .header,
html.outlook-mode body #layout-list .header,
html.outlook-mode body #layout-sidebar .header,
html.outlook-mode body .header.uibox,
html.outlook-mode body .popover-header,
html.outlook-mode body .boxtitle {
    background: var(--od-accent) !important;
    border-bottom: 1px solid #106ebe !important;
    color: #ffffff !important;
}

/* Buttons inside blue header strips — section 11's `.btn`/`a.button`
   rule paints them with `var(--od-bg-elevated)` (#ffffff in outlook),
   which masks the header blue. Force them transparent here so the
   blue parent shows through. Hover gets a subtle white tint. */
html.outlook-mode body .header .btn,
html.outlook-mode body .header button.btn,
html.outlook-mode body .header a.button,
html.outlook-mode body .header input.button,
html.outlook-mode body .popover-header .btn,
html.outlook-mode body .popover-header a.button,
html.outlook-mode body .boxtitle .btn,
html.outlook-mode body .boxtitle a.button {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    color: #ffffff !important;
}
html.outlook-mode body .header .btn:hover,
html.outlook-mode body .header a.button:hover,
html.outlook-mode body .popover-header a.button:hover {
    background: rgba(255,255,255,.15) !important;
    background-color: rgba(255,255,255,.15) !important;
    border-color: transparent !important;
}

/* Kill the white slivers between blue header strips. The panel seams
   let the body/layout bg show through — paint the whole #layout blue
   so any gap between panels shows blue instead of near-white. Panels
   themselves have their own bg so the rest of the UI is unaffected. */
html.outlook-mode body #layout {
    background-color: var(--od-accent) !important;
    background: var(--od-accent) !important;
}
html.outlook-mode body #layout > *,
html.outlook-mode body #layout-menu,
html.outlook-mode body #layout-sidebar,
html.outlook-mode body #layout-list,
html.outlook-mode body #layout-content {
    border-color: var(--od-accent) !important;
}
/* Rail top: blue logo header + blue continuation (no separator line) */
html.outlook-mode body #layout-menu .popover-header {
    border-bottom: 1px solid var(--od-accent) !important;
    box-shadow: none !important;
}

/* Ensure the top-of-panel regions pick up blue everywhere the
   sidebar folder-chooser / account selector may render */
html.outlook-mode body #layout-sidebar .folderlist-header,
html.outlook-mode body #layout-sidebar .jumper-navigation,
html.outlook-mode body #layout-sidebar .popover-header,
html.outlook-mode body #layout-sidebar .header-title {
    background: var(--od-accent) !important;
    color: #ffffff !important;
}

/* Text + icons on the blue header strips */
html.outlook-mode body .header .menu.toolbar a,
html.outlook-mode body .header .menu.toolbar button,
html.outlook-mode body .header a,
html.outlook-mode body .header button {
    color: #ffffff !important;
}
html.outlook-mode body .header .menu.toolbar a:hover,
html.outlook-mode body .header .menu.toolbar button:hover {
    background: rgba(255,255,255,.15) !important;
    color: #ffffff !important;
}

/* Search bar when inside a blue header: translucent white */
html.outlook-mode body .header .searchbar,
html.outlook-mode body .header #quicksearchbar,
html.outlook-mode body .header form.searchform {
    background: rgba(255,255,255,.15) !important;
    border: 1px solid rgba(255,255,255,.3) !important;
}
html.outlook-mode body .header .searchbar input,
html.outlook-mode body .header #quicksearchbar input {
    color: #ffffff !important;
}
html.outlook-mode body .header .searchbar input::placeholder {
    color: rgba(255,255,255,.7) !important;
}

/* Account name / folder chooser row in sidebar header */
html.outlook-mode body #layout-sidebar .header .account,
html.outlook-mode body #layout-sidebar .header > span,
html.outlook-mode body #layout-sidebar .header a,
html.outlook-mode body #layout-sidebar .header .username,
html.outlook-mode body #layout-sidebar .header .folder-name {
    color: #ffffff !important;
}

/* Selected message row: clearer Outlook blue tint */
html.outlook-mode body .messagelist tbody tr.selected {
    background: #cfe4fa !important;
    color: var(--od-text) !important;
    box-shadow: inset 3px 0 0 var(--od-accent) !important;
}

/* Primary action buttons stay blue */
html.outlook-mode body .btn-primary,
html.outlook-mode body .mainaction,
html.outlook-mode body button.mainaction,
html.outlook-mode body .btn.btn-primary {
    background: var(--od-accent) !important;
    border-color: var(--od-accent) !important;
    color: #ffffff !important;
}