/* it slides in from the LEFT, where its toggle sits */
    .mk-drawer .mk-drawer-box { left: 0; right: auto; transform: translateX(-100%);
        box-shadow: 4px 0 15px rgba(0,0,0,.12); }
    .mk-drawer .mk-drawer-box.show { transform: translateX(0); }
    /* account rows in a select2 list: common.js */
    .mk-acc-opt { line-height: 1.35; }
    .mk-acc-opt .mk-acc-kh { opacity: .75; font-size: 12px; }
    .mk-drawer .drw-btn { cursor: pointer; }
    .mk-drawer .drw-btn-ico { width: 32px; height: 32px; object-fit: contain; }
    .mk-drawer .drw-btn-fa { font-size: 22px; color: var(--mk-white); width: 32px; text-align: center; }
    .mk-drawer .drw-label { display: none; color: var(--mk-white); font-weight: 600; margin-left: 6px;
        white-space: nowrap; font-size: 14px; }
    /* the header: the section's own mark and name, then × */
    .drw-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .drw-head-ico { display: inline-flex; align-items: center; justify-content: center;
        width: 26px; height: 26px; flex-shrink: 0; }
    .drw-head-ico img { width: 26px; height: 26px; object-fit: contain; }
    .drw-head-ico i { font-size: 20px; color: var(--mk-slate-600-2); }
    /* a count beside a row (ReportHub, Virtual Office, …) */
    .menu-sections-container [class$="menu-n"] { margin-left: auto; background: var(--mk-blue-100);
        color: var(--mk-slate-700); border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 700; }
    /* On a section's own pages the bar shows only its toggle with the section's name —
       and the page name too where the section keeps it (drawer-keep-title). The filter
       and action buttons out-specify the .tb-right rule (filter_style.html), so they stay. */
    body.drawer-focus-top #main-taskbar .tb-center,
    body.drawer-focus-top #main-taskbar .tb-left > *:not(.mk-drawer),
    body.drawer-focus-top #main-taskbar .tb-right > * { display: none !important; }
    body.drawer-focus-top #main-taskbar .mk-drawer { display: inline-flex !important; }
    body.drawer-focus-top #main-taskbar .mk-drawer .drw-label { display: inline-flex !important; }
    body.drawer-focus-top:not(.drawer-keep-title) #main-taskbar .tb-left > .tb-title { display: none !important; }
    body.drawer-keep-title #main-taskbar .tb-left > .tb-title { display: inline-block !important; }
    @media (max-width: 767px) {
        body.drawer-focus-top #main-taskbar .mk-drawer.hidden-xs { display: inline-flex !important; }
        .mk-drawer .mk-drawer-box { width: 86vw; max-width: 360px; }
    }

    /* The delete button on a line of the sale form (sale_pos/product_row.html). */
    .sell-line-delete { flex: 0 0 30px; width: 30px; height: 30px; margin-left: auto; padding: 0; border: 0;
        border-radius: 8px; background: var(--mk-rose-100, #ffe4e6); color: var(--mk-rose-600, #e11d48);
        cursor: pointer; font-size: 13px; transition: background .15s, color .15s; }
    .sell-line-delete:hover, .sell-line-delete:focus { background: var(--mk-rose-600, #e11d48); color: #fff; outline: none; }

    /* TAB MENUS (ul.mk-tabs: user details / create / edit, customer & supplier details,
       product detail; owner 2026-10-07: the old .app-vtabs system is gone). Bootstrap's
       tabs still switch the panes (ul > li > a[data-toggle=tab]); the look is the
       drawer's: rows, the section's coloured tile behind each icon (data-sec on the
       menu or a parent), the current tab in the theme colour. */
    ul.mk-tabs { list-style: none !important; margin: 0 !important; padding: 8px 0 !important;
        display: flex !important; flex-direction: column !important; gap: 0 !important;
        background: none !important; border: 0 !important; box-shadow: none !important; }
    ul.mk-tabs > li { float: none !important; margin: 0 !important; }
    ul.mk-tabs > li > a { display: flex !important; align-items: center !important; gap: 10px !important;
        margin: 2px 8px !important; padding: 9px 12px !important; border: 0 !important;
        border-radius: 12px !important; background: transparent !important;
        color: var(--mk-gray-800) !important; font-size: 14px !important; font-weight: 400 !important;
        line-height: 1.25 !important; text-decoration: none !important; }
    ul.mk-tabs > li > a:hover, ul.mk-tabs > li > a:focus {
        background: var(--mk-blue-100) !important; color: var(--mk-gray-950) !important; }
    ul.mk-tabs > li > a > i { flex: 0 0 28px; width: 28px !important; height: 28px !important;
        display: inline-flex !important; align-items: center; justify-content: center; margin: 0 !important;
        border-radius: 24%; font-size: 14px !important; color: #fff !important;
        background: var(--tile, var(--sec-default)); box-shadow: 0 1px 3px rgba(15,23,42,.25); }
    ul.mk-tabs > li > a[href="/desktop"] { font-weight: 600 !important; margin-bottom: 6px !important;
        padding-bottom: 12px !important; border-bottom: 1px solid var(--mk-slate-100-15) !important;
        border-radius: 12px 12px 0 0 !important; }
    ul.mk-tabs > li.active > a, ul.mk-tabs > li > a.active, ul.mk-tabs > li > a.is-current {
        background: linear-gradient(to right, #1e40af, #1e3a8a) !important;
        color: var(--mk-white) !important; font-weight: 600 !important; border-radius: 12px !important; }
    ul.mk-tabs > li.active > a > i, ul.mk-tabs > li > a.active > i, ul.mk-tabs > li > a.is-current > i {
        background: rgba(255,255,255,.22) !important; box-shadow: none !important; }
    ul.mk-tabs .mk-tab-badge { margin-left: auto; border: 1px solid #dc2626; color: #dc2626;
        border-radius: 999px; padding: 0 8px; font-size: 11px; line-height: 1.6; }
    /* a group inside a menu (customer details: Sales, Purchases) */
    ul.mk-tabs ul.mk-tabs { padding: 0 0 4px 14px !important; }
    ul.mk-tabs .nav-group-caret { margin-left: auto; }
    /* a menu beside its form (user create/edit, product detail): a white card that
       stays in view; inside a drawer it is just the list */
    ul.mk-tabs:not(.mk-tabs-drawer ul):not(ul.mk-tabs ul) { background: #fff !important; border-radius: 14px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,.08) !important; position: sticky; top: 10px;
        max-height: calc(100vh - 24px); overflow-y: auto; }
    /* the white card holding the panes */
    .mk-tabs-panel { background: #fff !important; border: 0 !important; border-radius: 14px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,.08) !important; margin-bottom: 0 !important; }
    .mk-tabs-panel .tab-content { background: #fff !important; border: 0 !important;
        border-radius: 14px !important; padding: 18px !important; }
    /* A tab that is a LIST (it has the global filter card) is laid out like a list page:
       the filter card and the table's own card each stand on the page, so the white
       panel steps back instead of wrapping both (employee / customer / product pages). */
    .mk-tabs-panel:has(> .tab-content > .tab-pane.active .compact-filter-card) {
        background: transparent !important; box-shadow: none !important; }
    .mk-tabs-panel:has(> .tab-content > .tab-pane.active .compact-filter-card) > .tab-content {
        background: transparent !important; padding: 8px 0 0 !important; }   /* the gap a list page leaves under the top bar */
    /* On a phone every drawer is a grid, three across: the whole set at once, a square to
       hit rather than a thin row (as Settings and the profile menu had). The module
       drawer (layouts/module_nav_items.html) follows the same rule. */
    @media (max-width: 640px) {
        .mk-drawer-box .menu-sections-container, #moduleDrawer .mtb-drawer-nav { padding: 8px; }
        .mk-drawer-box .menu-section, #moduleDrawer nav .menu-section {
            display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
        .mk-drawer-box .menu-section > a, #moduleDrawer nav .menu-section > a { grid-column: span 2; }
        .mk-drawer-box .menu-section > a, #moduleDrawer nav .menu-section > a {
            flex-direction: column; text-align: center; gap: 6px; margin: 0 !important;
            padding: 12px 4px; border-radius: 12px; background: var(--mk-blue-50);
            font-size: 11.5px; line-height: 1.25; min-height: 84px; justify-content: center; }
        .mk-drawer-box .menu-section > a .recommended-icon,
        #moduleDrawer nav .menu-section > a .recommended-icon { width: 34px !important; height: 34px !important; }
        .mk-drawer-box .menu-section > a .recommended-icon i,
        #moduleDrawer nav .menu-section > a .recommended-icon i { font-size: 20px !important; }
        .mk-drawer-box .menu-section > :not(a), #moduleDrawer nav .menu-section > :not(a) { grid-column: 1 / -1; }

        /* (tab menus in a drawer: the same grid, Home + the next tab on the first line) */
        .mk-tabs-drawer ul.mk-tabs { display: grid !important; grid-template-columns: repeat(6, 1fr);
            gap: 8px !important; padding: 8px !important; }
        /* Bootstrap's .nav clearfix (::before/::after) would be two grid cells */
        .mk-tabs-drawer ul.mk-tabs::before, .mk-tabs-drawer ul.mk-tabs::after { display: none !important; }
        .mk-tabs-drawer ul.mk-tabs > li { grid-column: span 2; }
        .mk-tabs-drawer ul.mk-tabs > li > a { flex-direction: column !important; text-align: center;
            gap: 6px !important; margin: 0 !important; padding: 12px 4px !important; height: 100%;
            background: var(--mk-blue-50) !important; font-size: 11.5px !important;
            min-height: 84px; justify-content: center !important; border: 0 !important; border-radius: 12px !important; }
        .mk-tabs-drawer ul.mk-tabs > li.active > a, .mk-tabs-drawer ul.mk-tabs > li > a.active {
            background: linear-gradient(to right, #1e40af, #1e3a8a) !important;
            color: var(--mk-white) !important; }
        .mk-tabs-drawer ul.mk-tabs > li > a > i { width: 34px !important; height: 34px !important;
            flex-basis: 34px; font-size: 18px !important; }
        .mk-tabs-drawer ul.mk-tabs > li.nav-group-header, .mk-tabs-drawer ul.mk-tabs > li.nav-group-body,
        .mk-tabs-drawer ul.mk-tabs > li:not(:has(> a)) { grid-column: 1 / -1; }
        /* a group header (customer: Sales, Purchases) is a row across, not a tile */
        .mk-tabs-drawer ul.mk-tabs > li.nav-group-header > a { flex-direction: row !important;
            justify-content: flex-start !important; min-height: 0; text-align: left;
            font-size: 13px !important; padding: 10px !important; }
        .mk-tabs-drawer ul.mk-tabs > li:has(> a[href="/desktop"]),
        .mk-tabs-drawer ul.mk-tabs > li:has(> a[href="/desktop"]) + li { grid-column: span 3; }
        .mk-tabs-drawer ul.mk-tabs > li:has(> a[href="/desktop"]) > a,
        .mk-tabs-drawer ul.mk-tabs > li:has(> a[href="/desktop"]) + li > a {
            flex-direction: row !important; justify-content: flex-start !important; min-height: 0;
            text-align: left; font-size: 13px !important; font-weight: 600 !important; padding: 10px !important;
            margin: 0 !important; }
        /* Home and the section's Dashboard (the row right after it) share the first line,
           half each, as rows rather than tiles (owner, 2026-10-07) */
        .mk-drawer-box .menu-section > a[href="/desktop"], #moduleDrawer nav .menu-section > a[href="/desktop"],
        .mk-drawer-box .menu-section > a[href="/desktop"] + a, #moduleDrawer nav .menu-section > a[href="/desktop"] + a {
            grid-column: span 3; flex-direction: row; justify-content: flex-start; min-height: 0;
            text-align: left; font-size: 13px; font-weight: 600; padding: 10px; border: 0 !important;
            border-radius: 12px !important; margin: 0 !important; }
    }
    /* The same first line on a wide screen (owner, 2026-10-31); every other row stays a row. */
    @media (min-width: 641px) {
        .mk-drawer-box .menu-section, #moduleDrawer nav .menu-section, .dwst-demo .menu-section {
            display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
        .mk-drawer-box .menu-section > *, #moduleDrawer nav .menu-section > *,
        .dwst-demo .menu-section > * { grid-column: 1 / -1; }
        .mk-drawer-box .menu-section > a[href="/desktop"]:has(+ a[href$="dashboard"]),
        #moduleDrawer nav .menu-section > a[href="/desktop"]:has(+ a[href$="dashboard"]),
        .dwst-demo .menu-section > a[href="/desktop"]:has(+ a[href$="dashboard"]),
        .mk-drawer-box .menu-section > a[href="/desktop"] + a[href$="dashboard"],
        #moduleDrawer nav .menu-section > a[href="/desktop"] + a[href$="dashboard"],
        .dwst-demo .menu-section > a[href="/desktop"] + a[href$="dashboard"] {
            grid-column: span 3; min-width: 0; font-weight: 400; padding: 9px 12px;
            border-bottom: 0; border-radius: 12px; margin: 2px 4px; }
        /* Their pictures are full colour and ignore the Drawer Style, so here they draw a symbol
           on the row's own coloured square, like every other row (owner, 2026-10-31). */
        .mk-drawer-box .menu-section > a[href="/desktop"] .recommended-icon > img,
        #moduleDrawer nav .menu-section > a[href="/desktop"] .recommended-icon > img,
        .mk-drawer-box .menu-section > a[href="/desktop"] + a[href$="dashboard"] .recommended-icon > img,
        #moduleDrawer nav .menu-section > a[href="/desktop"] + a[href$="dashboard"] .recommended-icon > img { display: none !important; }
        .mk-drawer-box .menu-section > a[href="/desktop"] .recommended-icon::before,
        #moduleDrawer nav .menu-section > a[href="/desktop"] .recommended-icon::before,
        .mk-drawer-box .menu-section > a[href="/desktop"] + a[href$="dashboard"] .recommended-icon::before,
        #moduleDrawer nav .menu-section > a[href="/desktop"] + a[href$="dashboard"] .recommended-icon::before {
            font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 15px; line-height: 1; }
        .mk-drawer-box .menu-section > a[href="/desktop"] .recommended-icon::before,
        #moduleDrawer nav .menu-section > a[href="/desktop"] .recommended-icon::before { content: "\f015"; }
        .mk-drawer-box .menu-section > a[href="/desktop"] + a[href$="dashboard"] .recommended-icon::before,
        #moduleDrawer nav .menu-section > a[href="/desktop"] + a[href$="dashboard"] .recommended-icon::before { content: "\f009"; }

        /* Settings > Drawer Style: the body says which one (drawerstyle-<key>); a card on the
           settings page carries its own class, so it shows that style whatever the body says. */
        :is(body.drawerstyle-compact .mk-drawer-box, body.drawerstyle-compact #moduleDrawer nav,
            .dwst-demo.drawerstyle-compact) .menu-section > a {
            padding: 4px 10px; margin: 0 4px; font-size: 13px; gap: 8px; }
        :is(body.drawerstyle-compact .mk-drawer-box, body.drawerstyle-compact #moduleDrawer nav,
            .dwst-demo.drawerstyle-compact) .recommended-icon {
            width: 22px !important; height: 22px !important; border-radius: 6px; }

        :is(body.drawerstyle-cards .mk-drawer-box, body.drawerstyle-cards #moduleDrawer nav,
            .dwst-demo.drawerstyle-cards) .menu-section > a {
            margin: 4px 6px; background: var(--mk-white); border: 1px solid var(--mk-slate-200);
            border-radius: 12px !important; box-shadow: 0 1px 3px rgba(15,23,42,.08); }

        :is(body.drawerstyle-tiles .mk-drawer-box, body.drawerstyle-tiles #moduleDrawer nav,
            .dwst-demo.drawerstyle-tiles,
            body.drawerstyle-grid .mk-drawer-box, body.drawerstyle-grid #moduleDrawer nav,
            .dwst-demo.drawerstyle-grid) .menu-section {
            grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 0 6px; }
        :is(body.drawerstyle-tiles .mk-drawer-box, body.drawerstyle-tiles #moduleDrawer nav,
            .dwst-demo.drawerstyle-tiles) .menu-section > a { grid-column: span 3; }
        /* An odd last tile fills its line rather than leaving a hole beside it. */
        :is(body.drawerstyle-tiles .mk-drawer-box, body.drawerstyle-tiles #moduleDrawer nav,
            .dwst-demo.drawerstyle-tiles) .menu-section > a:nth-of-type(odd):last-of-type { grid-column: 1 / -1; }
        :is(body.drawerstyle-grid .mk-drawer-box, body.drawerstyle-grid #moduleDrawer nav,
            .dwst-demo.drawerstyle-grid) .menu-section > a { grid-column: span 2; }
        /* Home and Dashboard fill the first line between them, half each. */
        :is(body.drawerstyle-grid .mk-drawer-box, body.drawerstyle-grid #moduleDrawer nav,
            .dwst-demo.drawerstyle-grid) .menu-section > a:is([href="/desktop"]:has(+ a[href$="dashboard"]), [href="/desktop"] + a[href$="dashboard"]) {
            grid-column: span 3; }
        :is(body.drawerstyle-tiles .mk-drawer-box, body.drawerstyle-tiles #moduleDrawer nav,
            .dwst-demo.drawerstyle-tiles,
            body.drawerstyle-grid .mk-drawer-box, body.drawerstyle-grid #moduleDrawer nav,
            .dwst-demo.drawerstyle-grid) .menu-section > a {
            flex-direction: column; justify-content: flex-start; text-align: center; gap: 6px; margin: 0;
            min-width: 0; min-height: 0; padding: 12px 6px 10px; font-size: 12.5px; line-height: 1.3;
            white-space: normal; overflow-wrap: break-word;
            border: 1px solid var(--mk-slate-200); border-radius: 12px; }
        :is(body.drawerstyle-tiles .mk-drawer-box, body.drawerstyle-tiles #moduleDrawer nav,
            .dwst-demo.drawerstyle-tiles,
            body.drawerstyle-grid .mk-drawer-box, body.drawerstyle-grid #moduleDrawer nav,
            .dwst-demo.drawerstyle-grid) .menu-section > a .recommended-icon {
            width: 40px !important; height: 40px !important; }

        /* The module drawer's first line is written with an id, so it needs the same weight. */
        body.drawerstyle-tiles #moduleDrawer nav .menu-section > a[href="/desktop"]:has(+ a[href$="dashboard"]), body.drawerstyle-tiles #moduleDrawer nav .menu-section > a[href="/desktop"] + a[href$="dashboard"],
        body.drawerstyle-grid #moduleDrawer nav .menu-section > a[href="/desktop"]:has(+ a[href$="dashboard"]), body.drawerstyle-grid #moduleDrawer nav .menu-section > a[href="/desktop"] + a[href$="dashboard"],
        body.drawerstyle-cards #moduleDrawer nav .menu-section > a[href="/desktop"]:has(+ a[href$="dashboard"]), body.drawerstyle-cards #moduleDrawer nav .menu-section > a[href="/desktop"] + a[href$="dashboard"] {
            border: 1px solid var(--mk-slate-200); }
        body.drawerstyle-tiles #moduleDrawer nav .menu-section > a[href="/desktop"]:has(+ a[href$="dashboard"]), body.drawerstyle-tiles #moduleDrawer nav .menu-section > a[href="/desktop"] + a[href$="dashboard"],
        body.drawerstyle-grid #moduleDrawer nav .menu-section > a[href="/desktop"]:has(+ a[href$="dashboard"]), body.drawerstyle-grid #moduleDrawer nav .menu-section > a[href="/desktop"] + a[href$="dashboard"] { margin: 0; padding: 12px 6px 10px; }
        /* The page you are on: a tint and a coloured edge, not a dark block. */
        :is(body.drawerstyle-tiles .mk-drawer-box, body.drawerstyle-tiles #moduleDrawer nav,
            .dwst-demo.drawerstyle-tiles,
            body.drawerstyle-grid .mk-drawer-box, body.drawerstyle-grid #moduleDrawer nav,
            .dwst-demo.drawerstyle-grid) .menu-section > a.is-current {
            background: var(--mk-blue-100) !important; color: var(--mk-blue-950) !important;
            border: 2px solid var(--mk-blue-500-2); padding: 11px 5px 9px; font-weight: 600; }
        :is(body.drawerstyle-tiles .mk-drawer-box, body.drawerstyle-tiles #moduleDrawer nav,
            .dwst-demo.drawerstyle-tiles,
            body.drawerstyle-grid .mk-drawer-box, body.drawerstyle-grid #moduleDrawer nav,
            .dwst-demo.drawerstyle-grid) .menu-section > a.is-current .recommended-icon {
            background: var(--tile, var(--sec-default)) !important;
            box-shadow: 0 1px 3px rgba(15,23,42,.25) !important; }

        body.drawerstyle-dark .mk-drawer-box, body.drawerstyle-dark .mk-drawer-box .menu-header,
        body.drawerstyle-dark .mk-drawer-box .menu-sections-container, body.drawerstyle-dark #moduleDrawer,
        .dwst-demo.drawerstyle-dark { background: #0f172a; }
        body.drawerstyle-dark .mk-drawer-box .menu-title { color: #f1f5f9; }
        body.drawerstyle-dark .mk-drawer-box .modal-close-btn { color: #cbd5e1; }
        :is(body.drawerstyle-dark .mk-drawer-box, body.drawerstyle-dark #moduleDrawer nav,
            .dwst-demo.drawerstyle-dark) .menu-section > a { color: #e2e8f0; }
        :is(body.drawerstyle-dark .mk-drawer-box, body.drawerstyle-dark #moduleDrawer nav,
            .dwst-demo.drawerstyle-dark) .menu-section > a:hover { background: #1e293b; color: #fff; }
        :is(body.drawerstyle-dark .mk-drawer-box, body.drawerstyle-dark #moduleDrawer nav,
            .dwst-demo.drawerstyle-dark) .menu-section-title { color: #94a3b8; }

        /* The colourful looks: one colour per row, six in turn. */
        :is(body.drawerstyle-colorful .mk-drawer-box, body.drawerstyle-colorful #moduleDrawer nav, .dwst-demo.drawerstyle-colorful, body.drawerstyle-rainbow .mk-drawer-box, body.drawerstyle-rainbow #moduleDrawer nav, .dwst-demo.drawerstyle-rainbow, body.drawerstyle-gradient .mk-drawer-box, body.drawerstyle-gradient #moduleDrawer nav, .dwst-demo.drawerstyle-gradient, body.drawerstyle-accent .mk-drawer-box, body.drawerstyle-accent #moduleDrawer nav, .dwst-demo.drawerstyle-accent) .menu-section > a:nth-of-type(6n+1) { --tile: #ef4444; --dw: #ef4444; }
        :is(body.drawerstyle-colorful .mk-drawer-box, body.drawerstyle-colorful #moduleDrawer nav, .dwst-demo.drawerstyle-colorful, body.drawerstyle-rainbow .mk-drawer-box, body.drawerstyle-rainbow #moduleDrawer nav, .dwst-demo.drawerstyle-rainbow, body.drawerstyle-gradient .mk-drawer-box, body.drawerstyle-gradient #moduleDrawer nav, .dwst-demo.drawerstyle-gradient, body.drawerstyle-accent .mk-drawer-box, body.drawerstyle-accent #moduleDrawer nav, .dwst-demo.drawerstyle-accent) .menu-section > a:nth-of-type(6n+2) { --tile: #f59e0b; --dw: #f59e0b; }
        :is(body.drawerstyle-colorful .mk-drawer-box, body.drawerstyle-colorful #moduleDrawer nav, .dwst-demo.drawerstyle-colorful, body.drawerstyle-rainbow .mk-drawer-box, body.drawerstyle-rainbow #moduleDrawer nav, .dwst-demo.drawerstyle-rainbow, body.drawerstyle-gradient .mk-drawer-box, body.drawerstyle-gradient #moduleDrawer nav, .dwst-demo.drawerstyle-gradient, body.drawerstyle-accent .mk-drawer-box, body.drawerstyle-accent #moduleDrawer nav, .dwst-demo.drawerstyle-accent) .menu-section > a:nth-of-type(6n+3) { --tile: #10b981; --dw: #10b981; }
        :is(body.drawerstyle-colorful .mk-drawer-box, body.drawerstyle-colorful #moduleDrawer nav, .dwst-demo.drawerstyle-colorful, body.drawerstyle-rainbow .mk-drawer-box, body.drawerstyle-rainbow #moduleDrawer nav, .dwst-demo.drawerstyle-rainbow, body.drawerstyle-gradient .mk-drawer-box, body.drawerstyle-gradient #moduleDrawer nav, .dwst-demo.drawerstyle-gradient, body.drawerstyle-accent .mk-drawer-box, body.drawerstyle-accent #moduleDrawer nav, .dwst-demo.drawerstyle-accent) .menu-section > a:nth-of-type(6n+4) { --tile: #0ea5e9; --dw: #0ea5e9; }
        :is(body.drawerstyle-colorful .mk-drawer-box, body.drawerstyle-colorful #moduleDrawer nav, .dwst-demo.drawerstyle-colorful, body.drawerstyle-rainbow .mk-drawer-box, body.drawerstyle-rainbow #moduleDrawer nav, .dwst-demo.drawerstyle-rainbow, body.drawerstyle-gradient .mk-drawer-box, body.drawerstyle-gradient #moduleDrawer nav, .dwst-demo.drawerstyle-gradient, body.drawerstyle-accent .mk-drawer-box, body.drawerstyle-accent #moduleDrawer nav, .dwst-demo.drawerstyle-accent) .menu-section > a:nth-of-type(6n+5) { --tile: #6366f1; --dw: #6366f1; }
        :is(body.drawerstyle-colorful .mk-drawer-box, body.drawerstyle-colorful #moduleDrawer nav, .dwst-demo.drawerstyle-colorful, body.drawerstyle-rainbow .mk-drawer-box, body.drawerstyle-rainbow #moduleDrawer nav, .dwst-demo.drawerstyle-rainbow, body.drawerstyle-gradient .mk-drawer-box, body.drawerstyle-gradient #moduleDrawer nav, .dwst-demo.drawerstyle-gradient, body.drawerstyle-accent .mk-drawer-box, body.drawerstyle-accent #moduleDrawer nav, .dwst-demo.drawerstyle-accent) .menu-section > a:nth-of-type(6n+6) { --tile: #ec4899; --dw: #ec4899; }
        :is(body.drawerstyle-rainbow .mk-drawer-box, body.drawerstyle-rainbow #moduleDrawer nav, .dwst-demo.drawerstyle-rainbow) .menu-section > a { margin: 3px 6px; border-radius: 12px;
            background: color-mix(in srgb, var(--dw) 13%, transparent); }
        :is(body.drawerstyle-rainbow .mk-drawer-box, body.drawerstyle-rainbow #moduleDrawer nav, .dwst-demo.drawerstyle-rainbow) .menu-section > a:hover { background: color-mix(in srgb, var(--dw) 24%, transparent); }
        :is(body.drawerstyle-gradient .mk-drawer-box, body.drawerstyle-gradient #moduleDrawer nav, .dwst-demo.drawerstyle-gradient) .menu-section > a { margin: 3px 6px; border-radius: 12px; color: #fff; font-weight: 600;
            background: linear-gradient(135deg, var(--dw), color-mix(in srgb, var(--dw) 62%, #312e81)); }
        :is(body.drawerstyle-gradient .mk-drawer-box, body.drawerstyle-gradient #moduleDrawer nav, .dwst-demo.drawerstyle-gradient) .menu-section > a:hover { color: #fff; filter: brightness(1.08); }
        :is(body.drawerstyle-gradient .mk-drawer-box, body.drawerstyle-gradient #moduleDrawer nav, .dwst-demo.drawerstyle-gradient) .recommended-icon { background: rgba(255,255,255,.22) !important; }
        :is(body.drawerstyle-gradient .mk-drawer-box, body.drawerstyle-gradient #moduleDrawer nav, .dwst-demo.drawerstyle-gradient) .recommended-icon i { color: #fff !important; }
        :is(body.drawerstyle-pills .mk-drawer-box, body.drawerstyle-pills #moduleDrawer nav, .dwst-demo.drawerstyle-pills) .menu-section > a { margin: 3px 8px; padding: 7px 14px 7px 8px; border-radius: 999px;
            background: var(--mk-slate-100-7); }
        :is(body.drawerstyle-pills .mk-drawer-box, body.drawerstyle-pills #moduleDrawer nav, .dwst-demo.drawerstyle-pills) .recommended-icon { border-radius: 999px; }
        :is(body.drawerstyle-accent .mk-drawer-box, body.drawerstyle-accent #moduleDrawer nav, .dwst-demo.drawerstyle-accent) .menu-section > a { margin: 3px 8px; border-radius: 8px; border-left: 4px solid var(--dw); }
        :is(body.drawerstyle-minimal .mk-drawer-box, body.drawerstyle-minimal #moduleDrawer nav, .dwst-demo.drawerstyle-minimal) .recommended-icon { background: transparent !important; box-shadow: none !important; }
        :is(body.drawerstyle-minimal .mk-drawer-box, body.drawerstyle-minimal #moduleDrawer nav, .dwst-demo.drawerstyle-minimal) .recommended-icon i { color: var(--mk-slate-600-2) !important; }
        :is(body.drawerstyle-minimal .mk-drawer-box, body.drawerstyle-minimal #moduleDrawer nav,
            .dwst-demo.drawerstyle-minimal) .recommended-icon::before {
            color: var(--mk-slate-600-2); }
        :is(body.drawerstyle-minimal .mk-drawer-box, body.drawerstyle-minimal #moduleDrawer nav, .dwst-demo.drawerstyle-minimal) .menu-section > a { padding: 8px 12px; border-radius: 8px; }
        body.drawerstyle-glass .mk-drawer-box, body.drawerstyle-glass #moduleDrawer {
            background: rgba(255,255,255,.62); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
        body.drawerstyle-glass .mk-drawer-box .menu-header,
        body.drawerstyle-glass .mk-drawer-box .menu-sections-container { background: transparent; }
        .dwst-demo.drawerstyle-glass { background: linear-gradient(135deg, #bfdbfe, #fbcfe8); }
        :is(body.drawerstyle-glass .mk-drawer-box, body.drawerstyle-glass #moduleDrawer nav, .dwst-demo.drawerstyle-glass) .menu-section > a { border-radius: 12px; background: rgba(255,255,255,.45); margin: 3px 6px; }

        /* The tab menus of a customer, supplier, user or product page (.mk-tabs-drawer) follow
           Drawer Style too. Their rows carry !important from "TAB MENUS" above. */
        .mk-tabs-drawer ul.mk-tabs { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px !important;
            box-sizing: border-box; width: 100% !important; margin: 0 !important; padding: 15px 21px !important; }
        /* The same frame as the section drawers (.mk-drawer-box): width, header, margins. */
        .mk-tabs-drawer ul.mk-tabs > li, .mk-tabs-drawer ul.mk-tabs > li > a { margin: 0 !important; }
        .mk-tabs-drawer.mk-tabs-drawer.mk-tabs-drawer { width: 400px !important; padding: 0 !important; }
        .mk-tabs-drawer > [class*="-show-search"] { margin: 0 !important; }
        .mk-tabs-drawer > .menu-header, .mk-tabs-drawer > [class*="-tabs-panel-header"] {
            box-sizing: border-box; height: 57px; margin: 0 !important; padding: 0 15px !important;
            display: flex; align-items: center; justify-content: space-between;
            background: var(--mk-slate-50-2) !important; border-bottom: 1px solid var(--mk-slate-200-6) !important; }
        .mk-tabs-drawer ul.mk-tabs::before, .mk-tabs-drawer ul.mk-tabs::after { display: none !important; }
        .mk-tabs-drawer ul.mk-tabs > li { grid-column: 1 / -1; min-width: 0; }
        .mk-tabs-drawer ul.mk-tabs > li:has(> a[href="/desktop"]), .mk-tabs-drawer ul.mk-tabs > li:has(> a[href="/desktop"]) + li { grid-column: span 3; }
        .mk-tabs-drawer ul.mk-tabs > li > a[href="/desktop"] { font-weight: 400 !important; margin-bottom: 2px !important; padding-bottom: 9px !important;
            border-bottom: 0 !important; border-radius: 12px !important; }
        body.drawerstyle-compact .mk-tabs-drawer ul.mk-tabs > li > a { padding: 4px 10px !important; font-size: 13px !important; }
        body.drawerstyle-compact .mk-tabs-drawer ul.mk-tabs > li > a > i { width: 22px !important; height: 22px !important; flex-basis: 22px; font-size: 12px !important; }
        body.drawerstyle-cards .mk-tabs-drawer ul.mk-tabs > li:not(.active) > a:not(.active) { background: var(--mk-white) !important; border: 1px solid var(--mk-slate-200) !important;
            box-shadow: 0 1px 3px rgba(15,23,42,.08); }
        body.drawerstyle-tiles .mk-tabs-drawer ul.mk-tabs > li { grid-column: span 3; }
        body.drawerstyle-grid .mk-tabs-drawer ul.mk-tabs > li { grid-column: span 2; }
        body.drawerstyle-tiles .mk-tabs-drawer ul.mk-tabs > li.nav-group-header,
        body.drawerstyle-grid .mk-tabs-drawer ul.mk-tabs > li.nav-group-header,
        body.drawerstyle-tiles .mk-tabs-drawer ul.mk-tabs > li.nav-group-body,
        body.drawerstyle-grid .mk-tabs-drawer ul.mk-tabs > li.nav-group-body,
        body.drawerstyle-tiles .mk-tabs-drawer ul.mk-tabs > li:not(.nav-group-header):not(.nav-group-body):nth-child(odd):last-child,
        body.drawerstyle-tiles .mk-tabs-drawer ul.mk-tabs > li:not(.nav-group-header):not(.nav-group-body):nth-child(odd):has(+ li.nav-group-header) { grid-column: 1 / -1; }
        body.drawerstyle-tiles .mk-tabs-drawer ul.mk-tabs > li.active > a > i, body.drawerstyle-tiles .mk-tabs-drawer ul.mk-tabs > li > a.active > i,
        body.drawerstyle-grid .mk-tabs-drawer ul.mk-tabs > li.active > a > i, body.drawerstyle-grid .mk-tabs-drawer ul.mk-tabs > li > a.active > i {
            background: var(--tile, var(--sec-default)) !important; color: #fff !important; }
        body.drawerstyle-grid .mk-tabs-drawer ul.mk-tabs > li:has(> a[href="/desktop"]),
        body.drawerstyle-grid .mk-tabs-drawer ul.mk-tabs > li:has(> a[href="/desktop"]) + li { grid-column: span 3; }
        body.drawerstyle-tiles .mk-tabs-drawer ul.mk-tabs > li:not(.nav-group-header) > a,
        body.drawerstyle-grid .mk-tabs-drawer ul.mk-tabs > li:not(.nav-group-header) > a {
            flex-direction: column !important; justify-content: flex-start !important; text-align: center;
            gap: 6px !important; height: 100%; margin: 0 !important; padding: 12px 6px 10px !important; font-size: 12.5px !important;
            line-height: 1.3 !important; white-space: normal; overflow-wrap: break-word;
            border: 1px solid var(--mk-slate-200) !important; border-radius: 12px !important; }
        body.drawerstyle-tiles .mk-tabs-drawer ul.mk-tabs > li:not(.nav-group-header) > a > i,
        body.drawerstyle-grid .mk-tabs-drawer ul.mk-tabs > li:not(.nav-group-header) > a > i {
            width: 40px !important; height: 40px !important; flex-basis: 40px; font-size: 18px !important; }
        body.drawerstyle-tiles .mk-tabs-drawer ul.mk-tabs > li.active > a,
        body.drawerstyle-grid .mk-tabs-drawer ul.mk-tabs > li.active > a,
        body.drawerstyle-tiles .mk-tabs-drawer ul.mk-tabs > li > a.active,
        body.drawerstyle-grid .mk-tabs-drawer ul.mk-tabs > li > a.active {
            background: var(--mk-blue-100) !important; color: var(--mk-blue-950) !important;
            border: 2px solid var(--mk-blue-500-2) !important; font-weight: 600 !important; }
        body.drawerstyle-dark .mk-tabs-drawer, body.drawerstyle-dark .mk-tabs-drawer .menu-header { background: #0f172a !important; }
        body.drawerstyle-dark .mk-tabs-drawer .menu-title { color: #f1f5f9; }
        body.drawerstyle-dark .mk-tabs-drawer ul.mk-tabs > li:not(.active) > a:not(.active) { background: transparent !important; color: #e2e8f0 !important; }
        body.drawerstyle-dark .mk-tabs-drawer ul.mk-tabs > li:not(.active) > a:not(.active):hover { background: #1e293b !important; color: #fff !important; }
        body.drawerstyle-colorful .mk-tabs-drawer ul.mk-tabs > li:nth-child(6n+1) > a,
        body.drawerstyle-rainbow .mk-tabs-drawer ul.mk-tabs > li:nth-child(6n+1) > a,
        body.drawerstyle-gradient .mk-tabs-drawer ul.mk-tabs > li:nth-child(6n+1) > a,
        body.drawerstyle-accent .mk-tabs-drawer ul.mk-tabs > li:nth-child(6n+1) > a { --dw: #ef4444; }
        body.drawerstyle-colorful .mk-tabs-drawer ul.mk-tabs > li:nth-child(6n+2) > a,
        body.drawerstyle-rainbow .mk-tabs-drawer ul.mk-tabs > li:nth-child(6n+2) > a,
        body.drawerstyle-gradient .mk-tabs-drawer ul.mk-tabs > li:nth-child(6n+2) > a,
        body.drawerstyle-accent .mk-tabs-drawer ul.mk-tabs > li:nth-child(6n+2) > a { --dw: #f59e0b; }
        body.drawerstyle-colorful .mk-tabs-drawer ul.mk-tabs > li:nth-child(6n+3) > a,
        body.drawerstyle-rainbow .mk-tabs-drawer ul.mk-tabs > li:nth-child(6n+3) > a,
        body.drawerstyle-gradient .mk-tabs-drawer ul.mk-tabs > li:nth-child(6n+3) > a,
        body.drawerstyle-accent .mk-tabs-drawer ul.mk-tabs > li:nth-child(6n+3) > a { --dw: #10b981; }
        body.drawerstyle-colorful .mk-tabs-drawer ul.mk-tabs > li:nth-child(6n+4) > a,
        body.drawerstyle-rainbow .mk-tabs-drawer ul.mk-tabs > li:nth-child(6n+4) > a,
        body.drawerstyle-gradient .mk-tabs-drawer ul.mk-tabs > li:nth-child(6n+4) > a,
        body.drawerstyle-accent .mk-tabs-drawer ul.mk-tabs > li:nth-child(6n+4) > a { --dw: #0ea5e9; }
        body.drawerstyle-colorful .mk-tabs-drawer ul.mk-tabs > li:nth-child(6n+5) > a,
        body.drawerstyle-rainbow .mk-tabs-drawer ul.mk-tabs > li:nth-child(6n+5) > a,
        body.drawerstyle-gradient .mk-tabs-drawer ul.mk-tabs > li:nth-child(6n+5) > a,
        body.drawerstyle-accent .mk-tabs-drawer ul.mk-tabs > li:nth-child(6n+5) > a { --dw: #6366f1; }
        body.drawerstyle-colorful .mk-tabs-drawer ul.mk-tabs > li:nth-child(6n+6) > a,
        body.drawerstyle-rainbow .mk-tabs-drawer ul.mk-tabs > li:nth-child(6n+6) > a,
        body.drawerstyle-gradient .mk-tabs-drawer ul.mk-tabs > li:nth-child(6n+6) > a,
        body.drawerstyle-accent .mk-tabs-drawer ul.mk-tabs > li:nth-child(6n+6) > a { --dw: #ec4899; }
        body.drawerstyle-colorful .mk-tabs-drawer ul.mk-tabs > li > a > i,
        body.drawerstyle-rainbow .mk-tabs-drawer ul.mk-tabs > li > a > i,
        body.drawerstyle-accent .mk-tabs-drawer ul.mk-tabs > li > a > i { background: var(--dw) !important; color: #fff !important; }
        body.drawerstyle-rainbow .mk-tabs-drawer ul.mk-tabs > li:not(.active) > a:not(.active) { background: color-mix(in srgb, var(--dw) 13%, transparent) !important; }
        body.drawerstyle-gradient .mk-tabs-drawer ul.mk-tabs > li:not(.active) > a:not(.active) { color: #fff !important; font-weight: 600 !important;
            background: linear-gradient(135deg, var(--dw), color-mix(in srgb, var(--dw) 62%, #312e81)) !important; }
        body.drawerstyle-gradient .mk-tabs-drawer ul.mk-tabs > li:not(.active) > a:not(.active) > i { background: rgba(255,255,255,.22) !important; color: #fff !important; }
        body.drawerstyle-pills .mk-tabs-drawer ul.mk-tabs > li > a { border-radius: 999px !important; }
        body.drawerstyle-pills .mk-tabs-drawer ul.mk-tabs > li:not(.active) > a:not(.active) { background: var(--mk-slate-100-7) !important; }
        body.drawerstyle-pills .mk-tabs-drawer ul.mk-tabs > li > a > i { border-radius: 999px !important; }
        body.drawerstyle-accent .mk-tabs-drawer ul.mk-tabs > li > a { border-left: 4px solid var(--dw) !important; border-radius: 8px !important; }
        body.drawerstyle-minimal .mk-tabs-drawer ul.mk-tabs > li > a > i { background: transparent !important; box-shadow: none !important; color: var(--mk-slate-600-2) !important; }
        body.drawerstyle-glass .mk-tabs-drawer { background: rgba(255,255,255,.62) !important;
            -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
        body.drawerstyle-glass .mk-tabs-drawer .menu-header { background: transparent !important; }
        body.drawerstyle-glass .mk-tabs-drawer ul.mk-tabs > li:not(.active) > a:not(.active) { background: rgba(255,255,255,.45) !important; }
    }