/*
 * Taktaz client portal - app shell over coowhm-plus (loaded by includes/hooks/taktaz_client_ui.php
 * after client-ui.css). Scope: html.tz-shell = pages with the theme's sidebar + header.
 *   desktop (>= 992px): white sidebar with icon chips, slim header, flat background, card frame
 *   phones/tablets (< 992px): app bar, drawer menu, tab bar with raised home button (portal.js)
 *   dashboard: hero card + shortcut grid (portal.js)
 * Palette = admin skin / login page: turquoise #0099b8, gradient #22c3d6 -> #0a86a8.
 */

html.tz-shell {
    --tz-p: #0099b8;
    --tz-p-rgb: 0, 153, 184;
    --tz-p-dark: #0a7f93;
    --tz-grad: linear-gradient(135deg, #22c3d6 0%, #0a86a8 100%);
    --tz-bg: #f3f6f9;
    --tz-card: #ffffff;
    --tz-line: #e8ecf3;
    --tz-line-soft: #eef1f6;
    --tz-text: #0f172a;
    --tz-body: #334155;
    --tz-muted: #64748b;
    --tz-faint: #94a3b8;
    --tz-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -24px rgba(15, 23, 42, .35);
    --tz-sat: env(safe-area-inset-top, 0px);
    --tz-sab: env(safe-area-inset-bottom, 0px);
    --tz-side: 264px;
}

html.tz-shell body {
    background: var(--tz-bg) !important;
    background-image: none !important;
}

/* the theme's dark-mode switch only flips the current page and fights this skin */
html.tz-shell .ThemeColorModeContainer {
    display: none !important;
}

/* =====================================================================
   SIDEBAR (desktop) / DRAWER (mobile) - nav.coodiv-navbar
   ===================================================================== */
html.tz-shell nav.coodiv-navbar,
html.tz-shell nav.coodiv-navbar .navbar-wrapper,
html.tz-shell nav.coodiv-navbar .navbar-content {
    background-image: none !important;
}

html.tz-shell nav.coodiv-navbar {
    background: var(--tz-card) !important;
    border-inline-end: 1px solid var(--tz-line);
    box-shadow: none !important;
}

html.tz-shell nav.coodiv-navbar .navbar-brand.header-logo {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 64px !important;
    min-height: 64px;
    margin: 0 !important;
    padding: 0 18px !important;
    background: var(--tz-card) !important;
    border-bottom: 1px solid var(--tz-line-soft);
}

html.tz-shell nav.coodiv-navbar .header-logo img.logo {
    width: auto !important;
    max-width: 150px;
    max-height: 34px;
}

html.tz-shell nav.coodiv-navbar .navbar-content {
    padding: 8px 12px 18px !important;
}

/* the theme sizes the scroll area for its old 90px header */
@media (min-width: 992px) {
    html.tz-shell nav.coodiv-navbar .navbar-wrapper {
        display: flex !important;
        flex-direction: column;
        height: 100vh !important;
    }

    html.tz-shell nav.coodiv-navbar .navbar-brand.header-logo {
        flex: none;
    }

    html.tz-shell nav.coodiv-navbar .slimScrollDiv,
    html.tz-shell nav.coodiv-navbar .navbar-content {
        flex: 1 1 auto;
        height: auto !important;
        min-height: 0;
    }

    html.tz-shell nav.coodiv-navbar .navbar-content {
        overflow-y: auto !important;
        scrollbar-width: thin;
    }

    html.tz-shell nav.coodiv-navbar .slimScrollBar,
    html.tz-shell nav.coodiv-navbar .slimScrollRail {
        display: none !important;
    }
}

/* group captions */
html.tz-shell nav.coodiv-navbar .navigation-header {
    display: block !important;
    margin: 16px 10px 6px !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
}

html.tz-shell nav.coodiv-navbar .navigation-header::before,
html.tz-shell nav.coodiv-navbar .navigation-header::after,
html.tz-shell nav.coodiv-navbar .navigation-header i::before,
html.tz-shell nav.coodiv-navbar .navigation-header i::after {
    display: none !important;
}

html.tz-shell nav.coodiv-navbar .navigation-header i {
    position: static !important;
    padding: 0 !important;
    background: none !important;
    font-style: normal;
    font-size: 11.5px;
    color: var(--tz-faint) !important;
}

/* items */
html.tz-shell nav.coodiv-navbar .coodiv-inner-navbar > li {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

html.tz-shell nav.coodiv-navbar .navbar-wrapper {
    box-shadow: none !important;
}

/* submenu chevron (theme ::after) */
html.tz-shell nav.coodiv-navbar .coodiv-inner-navbar > li > a::after {
    top: 50% !important;
    transform: translateY(-50%);
    color: var(--tz-faint) !important;
}

.tz-drawer-close {
    display: none;
}

html.tz-shell nav.coodiv-navbar .coodiv-inner-navbar > li > a {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    margin: 2px 0 !important;
    padding: 6px 8px !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--tz-body) !important;
    font-size: 13.5px;
    line-height: 1.6;
    text-decoration: none !important;
    transition: background-color .15s, color .15s;
    cursor: pointer;
}

html.tz-shell nav.coodiv-navbar .coodiv-inner-navbar > li > a:hover {
    background: #f4f7fa !important;
    color: var(--tz-text) !important;
}

html.tz-shell nav.coodiv-navbar .coodiv-micon {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 11px;
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-size: 16px !important;
    transition: background .15s, color .15s, box-shadow .15s;
}

html.tz-shell nav.coodiv-navbar .coodiv-micon i {
    margin: 0 !important;
    font-size: 16px !important;
    color: inherit !important;
}

html.tz-shell nav.coodiv-navbar .coodiv-mtext {
    position: static !important;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* current page / open group */
html.tz-shell nav.coodiv-navbar .coodiv-inner-navbar > li.tz-active > a,
html.tz-shell nav.coodiv-navbar .coodiv-inner-navbar > li.coodiv-trigger > a {
    background: rgba(var(--tz-p-rgb), .08) !important;
    color: var(--tz-p-dark) !important;
}

html.tz-shell nav.coodiv-navbar .coodiv-inner-navbar > li.tz-active > a .coodiv-micon,
html.tz-shell nav.coodiv-navbar .coodiv-inner-navbar > li.coodiv-trigger > a .coodiv-micon {
    background: var(--tz-grad) !important;
    color: #fff !important;
    box-shadow: 0 8px 16px -10px rgba(var(--tz-p-rgb), .9);
}

/* the theme marks Home active on every page; portal.js sets the real one */
html.tz-shell nav.coodiv-navbar .coodiv-inner-navbar > li > a.active {
    font-weight: inherit;
}

/* "new" badges */
html.tz-shell nav.coodiv-navbar .template-new-menu {
    position: static !important;
    flex: none;
    margin: 0 !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    background: #e6f6f9 !important;
    color: var(--tz-p-dark) !important;
    font-size: 10.5px !important;
    line-height: 1.6 !important;
    box-shadow: none !important;
}

/* leave room for the submenu chevron */
html.tz-shell nav.coodiv-navbar .coodiv-hasmenu > a .template-new-menu {
    margin-inline-end: 20px !important;
}

html.tz-shell nav.coodiv-navbar .template-new-menu {
    top: auto !important;
    align-self: center !important;
    transform: none !important;
}

html.tz-shell nav.coodiv-navbar .template-new-menu.another-color {
    background: #fff4e0 !important;
    color: #b45309 !important;
}

/* submenus: timeline under the group's icon */
html.tz-shell nav.coodiv-navbar .coodiv-submenu {
    position: relative;
    margin: 2px 0 8px !important;
    padding: 2px 0 2px !important;
    padding-inline-start: 30px !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    list-style: none;
}

html.tz-shell nav.coodiv-navbar .coodiv-submenu::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    inset-inline-start: 24px;
    width: 1.5px;
    border-radius: 2px;
    background: #e5e9f0;
}

html.tz-shell nav.coodiv-navbar .coodiv-submenu > li {
    position: relative;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

html.tz-shell nav.coodiv-navbar .coodiv-submenu > li > a {
    display: block !important;
    margin: 1px 0 !important;
    padding: 7px 12px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--tz-muted) !important;
    font-size: 13px;
    line-height: 1.7;
    text-decoration: none !important;
    transition: background-color .15s, color .15s;
}

html.tz-shell nav.coodiv-navbar .coodiv-submenu > li > a::before,
html.tz-shell nav.coodiv-navbar .coodiv-submenu > li > a::after {
    display: none !important;
}

html.tz-shell nav.coodiv-navbar .coodiv-submenu > li::before {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-start: -8.5px;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid #cbd5e1;
    transition: border-color .15s, background .15s;
}

html.tz-shell nav.coodiv-navbar .coodiv-submenu > li > a:hover {
    background: #f4f7fa !important;
    color: var(--tz-text) !important;
}

html.tz-shell nav.coodiv-navbar .coodiv-submenu > li.tz-active > a {
    color: var(--tz-p-dark) !important;
    background: rgba(var(--tz-p-rgb), .06) !important;
}

html.tz-shell nav.coodiv-navbar .coodiv-submenu > li.tz-active::before {
    background: var(--tz-p);
    border-color: var(--tz-p);
}

/* collapsed rail (992-1200px, theme class): icons only */
@media (min-width: 992px) {
    html.tz-shell nav.coodiv-navbar.navbar-collapsed .navigation-header,
    html.tz-shell nav.coodiv-navbar.navbar-collapsed .coodiv-mtext,
    html.tz-shell nav.coodiv-navbar.navbar-collapsed .template-new-menu {
        display: none !important;
    }

    html.tz-shell nav.coodiv-navbar.navbar-collapsed .coodiv-inner-navbar > li > a {
        justify-content: center;
    }

    html.tz-shell nav.coodiv-navbar.navbar-collapsed .coodiv-inner-navbar > li > a::after {
        display: none !important;
    }

    html.tz-shell nav.coodiv-navbar.navbar-collapsed .header-logo img.logo {
        max-width: 48px;
    }
}

/* =====================================================================
   HEADER (desktop)
   ===================================================================== */
@media (min-width: 992px) {
    html.tz-shell header.coodiv-header {
        height: 64px !important;
        min-height: 64px !important;
        background: rgba(255, 255, 255, .94) !important;
        background-image: none !important;
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--tz-line);
        box-shadow: 0 1px 2px rgba(15, 23, 42, .03) !important;
    }

    html.tz-shell header.coodiv-header::before,
    html.tz-shell header.coodiv-header::after {
        display: none !important;
    }

    html.tz-shell header.coodiv-header .navbar-collapse {
        display: flex !important;
        align-items: center;
        height: 64px !important;
        padding: 0 20px !important;
        background: none !important;
    }

    html.tz-shell header.coodiv-header .navbar-nav {
        display: flex !important;
        align-items: center;
        gap: 6px;
        height: 64px;
    }

    html.tz-shell header.coodiv-header .navbar-nav > li {
        display: flex;
        align-items: center;
        height: 64px;
    }

    html.tz-shell .header-hight-fixed {
        height: 64px !important;
    }

    /* sidebar collapse toggle: neutral icon button instead of the orange disc */
    html.tz-shell header.coodiv-header #mobile-collapse {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        border-radius: 12px !important;
        background: #f1f5f9 !important;
        box-shadow: none !important;
    }

    html.tz-shell header.coodiv-header #mobile-collapse span,
    html.tz-shell header.coodiv-header #mobile-collapse span::before,
    html.tz-shell header.coodiv-header #mobile-collapse span::after {
        background-color: #475569 !important;
    }

    /* search */
    html.tz-shell header.coodiv-header .main-search {
        display: flex !important;
        align-items: center;
        width: min(420px, 34vw);
        height: 42px;
        margin: 0 !important;
        padding: 0 6px !important;
        border: 1px solid var(--tz-line) !important;
        border-radius: 13px !important;
        background: #f6f8fb !important;
        box-shadow: none !important;
        transition: border-color .15s, box-shadow .15s, background .15s;
    }

    html.tz-shell header.coodiv-header .main-search:focus-within {
        background: #fff !important;
        border-color: var(--tz-p) !important;
        box-shadow: 0 0 0 4px rgba(var(--tz-p-rgb), .12) !important;
    }

    html.tz-shell header.coodiv-header .main-search input {
        height: 40px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 13px;
    }

    /* icon buttons + avatar */
    html.tz-shell header.coodiv-header .navbar-nav a.f-15,
    html.tz-shell header.coodiv-header .navbar-nav .dropdown-toggle.f-15 {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-width: 40px;
        height: 40px;
        padding: 0 8px !important;
        border-radius: 12px;
        color: #64748b !important;
        line-height: 1 !important;
        transition: background .15s, color .15s;
    }

    html.tz-shell header.coodiv-header .navbar-nav a.f-15:hover,
    html.tz-shell header.coodiv-header .navbar-nav .dropdown-toggle.f-15:hover,
    html.tz-shell header.coodiv-header .navbar-nav .show > .dropdown-toggle.f-15 {
        background: #f1f5f9;
        color: var(--tz-p-dark) !important;
    }

    html.tz-shell header.coodiv-header .navbar-nav a.f-15 i.icon {
        font-size: 19px !important;
    }

    html.tz-shell header.coodiv-header .drp-user .dropdown-toggle img.gravatar {
        width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        object-fit: cover;
        box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #dbe7ee;
    }

    html.tz-shell header.coodiv-header .user-name-header-drop {
        font-size: 13px;
        color: var(--tz-body);
    }

    /* dropdown panels */
    html.tz-shell header.coodiv-header .dropdown-menu {
        border: 1px solid var(--tz-line) !important;
        border-radius: 18px !important;
        box-shadow: 0 24px 50px -24px rgba(15, 23, 42, .4) !important;
        overflow: hidden;
    }

    /* content frame */
    html.tz-shell .coodiv-content {
        padding: 24px 24px 8px !important;
    }

    html.tz-shell #footer {
        background: transparent !important;
        color: var(--tz-faint);
    }
}

/* =====================================================================
   CONTENT FRAME (all sizes)
   ===================================================================== */
html.tz-shell section#main-body {
    margin: 0 0 20px !important;
    padding: 6px 24px 24px !important;
    border: 1px solid var(--tz-line);
    border-radius: 22px;
    background: var(--tz-card) !important;
    box-shadow: var(--tz-shadow) !important;
}

html.tz-shell #main-body .header-lined {
    margin: 0 -24px 18px !important;
    padding: 14px 24px !important;
}

html.tz-shell #main-body .header-lined h1 {
    font-size: 17px !important;
}

html.tz-shell #main-body .header-lined h1::before {
    background: var(--tz-grad) !important;
}

/* dashboard: no frame, the hero + tiles + panels float on the background */
html.tz-shell.tcu-p-clientareahome section#main-body {
    padding: 0 !important;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
}

html.tz-shell.tcu-p-clientareahome #main-body .header-lined,
html.tz-shell.tcu-p-clientareahome #main-body .breadcrumb,
html.tz-shell.tcu-p-clientareahome .main-content > .row > .container-clientarea {
    display: none !important;
}

/* =====================================================================
   DASHBOARD - hero + shortcuts (built by portal.js)
   ===================================================================== */
.tz-hero {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 16px;
    padding: 22px 24px;
    border-radius: 24px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(110% 120% at 100% 0%, rgba(103, 232, 249, .45), transparent 55%),
        radial-gradient(90% 120% at 0% 100%, rgba(8, 112, 140, .55), transparent 60%),
        linear-gradient(135deg, #0b8fae 0%, #0099b8 45%, #0b5f7c 100%);
    box-shadow: 0 22px 44px -26px rgba(4, 80, 105, .75);
}

.tz-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 60% 90% at 15% 50%, #000 20%, transparent 80%);
    mask-image: radial-gradient(ellipse 60% 90% at 15% 50%, #000 20%, transparent 80%);
    pointer-events: none;
}

html[dir="rtl"] .tz-hero::before {
    -webkit-mask-image: radial-gradient(ellipse 60% 90% at 85% 50%, #000 20%, transparent 80%);
    mask-image: radial-gradient(ellipse 60% 90% at 85% 50%, #000 20%, transparent 80%);
}

.tz-hero > * {
    position: relative;
}

.tz-hero-avatar {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, .2);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .35), 0 12px 24px -12px rgba(0, 0, 0, .5);
}

.tz-hero-main {
    flex: 1 1 auto;
    min-width: 0;
}

.tz-hero-hello {
    margin: 0 0 4px;
    font-size: 13px;
    color: rgba(255, 255, 255, .8);
}

.tz-hero-name {
    margin: 0 0 12px;
    font-size: 22px;
    line-height: 1.5;
    color: #fff;
}

.tz-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tz-hero-chip,
.tz-hero-chip:hover,
.tz-hero-chip:focus {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff !important;
    font-size: 12.5px;
    text-decoration: none !important;
    transition: background .15s;
}

.tz-hero-chip:hover {
    background: rgba(255, 255, 255, .24);
}

.tz-hero-chip svg,
.tz-quick-ico svg,
.tz-ab svg,
.tz-tabbar svg,
.tz-drawer-extra svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tz-hero-chip svg {
    width: 15px;
    height: 15px;
}

.tz-hero-chip b {
    unicode-bidi: isolate;
}

.tz-hero-art {
    flex: 0 0 auto;
    width: 150px;
    opacity: .95;
}

.tz-hero-art svg {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .2));
}

/* shortcuts */
.tz-quick {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.tz-quick a,
.tz-quick a:hover,
.tz-quick a:focus {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 98px;
    padding: 14px 8px;
    border: 1px solid var(--tz-line);
    border-radius: 18px;
    background: var(--tz-card);
    box-shadow: var(--tz-shadow);
    color: var(--tz-body) !important;
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center;
    text-decoration: none !important;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}

.tz-quick a:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--tz-p-rgb), .35);
    box-shadow: 0 18px 34px -24px rgba(var(--tz-p-rgb), .6);
}

.tz-quick a:focus-visible {
    outline: 2px solid var(--tz-p);
    outline-offset: 2px;
}

.tz-quick-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    color: #fff;
    background: var(--tz-grad);
    box-shadow: 0 10px 18px -10px rgba(var(--tz-p-rgb), .9);
}

.tz-quick-ico svg {
    width: 22px;
    height: 22px;
}

.tz-quick li:nth-child(2) .tz-quick-ico { background: linear-gradient(135deg, #38bdf8, #0369a1); box-shadow: 0 10px 18px -10px rgba(3, 105, 161, .9); }
.tz-quick li:nth-child(3) .tz-quick-ico { background: linear-gradient(135deg, #34d399, #047857); box-shadow: 0 10px 18px -10px rgba(4, 120, 87, .9); }
.tz-quick li:nth-child(4) .tz-quick-ico { background: linear-gradient(135deg, #818cf8, #4338ca); box-shadow: 0 10px 18px -10px rgba(67, 56, 202, .9); }
.tz-quick li:nth-child(5) .tz-quick-ico { background: linear-gradient(135deg, #fb7185, #be123c); box-shadow: 0 10px 18px -10px rgba(190, 18, 60, .9); }
.tz-quick li:nth-child(6) .tz-quick-ico { background: linear-gradient(135deg, #fbbf24, #c2410c); box-shadow: 0 10px 18px -10px rgba(194, 65, 12, .9); }
.tz-quick li:nth-child(7) .tz-quick-ico { background: linear-gradient(135deg, #a78bfa, #6d28d9); box-shadow: 0 10px 18px -10px rgba(109, 40, 217, .9); }
.tz-quick li:nth-child(8) .tz-quick-ico { background: linear-gradient(135deg, #94a3b8, #334155); box-shadow: 0 10px 18px -10px rgba(51, 65, 85, .9); }

/* the old banner is replaced by the hero, the two big action cards by the shortcuts on phones */
@media (max-width: 1199.98px) {
    .tz-quick {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* =====================================================================
   PHONES / TABLETS (< 992px): app bar, drawer, tab bar
   ===================================================================== */
.tz-ab,
.tz-tabbar,
.tz-backdrop,
.tz-drawer-extra {
    display: none;
}

@media (max-width: 991.98px) {
    /* the closed drawer sits off-screen; without this phones zoom out to fit it */
    html.tz-shell,
    html.tz-shell body {
        overflow-x: hidden !important;
        max-width: 100%;
    }

    html.tz-shell body {
        padding-top: calc(60px + var(--tz-sat)) !important;
        padding-bottom: calc(84px + var(--tz-sab)) !important;
    }

    html.tz-shell header.coodiv-header,
    html.tz-shell .header-hight-fixed,
    html.tz-shell .mobile-footer,
    html.tz-shell #footer {
        display: none !important;
    }

    html.tz-shell .coodiv-main-container {
        margin: 0 !important;
    }

    html.tz-shell .coodiv-content {
        padding: 12px 12px 4px !important;
    }

    html.tz-shell .page-wrapper {
        padding: 0 !important;
    }

    html.tz-shell section#main-body {
        padding: 4px 14px 16px !important;
        border-radius: 22px;
    }

    html.tz-shell #main-body .header-lined {
        margin: 0 -14px 14px !important;
        padding: 12px 14px !important;
    }

    /* title and page options live in the app bar */
    html.tz-shell #main-body .header-lined {
        display: none !important;
    }

    html.tz-shell section#main-body {
        padding-top: 16px !important;
    }

    .tz-ab-opts {
        position: static !important;
    }

    .tz-ab-opts #show-more-sidebar {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 38px !important;
        height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 13px !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #475569 !important;
    }

    .tz-ab-opts #show-more-sidebar svg {
        width: 22px;
        height: 22px;
        fill: currentColor;
        stroke: none;
    }

    .tz-ab-opts > .dropdown-menu {
        position: fixed !important;
        top: calc(64px + var(--tz-sat)) !important;
        right: 12px !important;
        left: 12px !important;
        bottom: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: calc(100vh - 170px - var(--tz-sat) - var(--tz-sab));
        margin: 0 !important;
        padding: 8px !important;
        overflow-y: auto;
        transform: none !important;
        border: 1px solid var(--tz-line) !important;
        border-radius: 22px !important;
        background: #fff !important;
        box-shadow: 0 28px 60px -24px rgba(15, 23, 42, .45) !important;
    }

    .tz-ab-opts .item-drop-side {
        margin: 0 0 6px !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }

    .tz-ab-opts .item-drop-side .panel-heading {
        padding: 8px 10px 4px !important;
        border: 0 !important;
        background: none !important;
    }

    .tz-ab-opts .item-drop-side .panel-title {
        margin: 0;
        font-size: 12px !important;
        color: var(--tz-faint) !important;
    }

    html.tz-shell .tz-ab .tz-ab-opts .dropdown-menu .list-group {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        border: 0 !important;
    }

    html.tz-shell .tz-ab .tz-ab-opts .dropdown-menu .list-group .list-group-item {
        width: 100% !important;
        box-shadow: none !important;
        justify-content: flex-start !important;
        text-align: start !important;
        display: flex !important;
        align-items: center;
        min-height: 46px;
        margin: 0 !important;
        padding: 8px 12px !important;
        border: 0 !important;
        border-radius: 13px !important;
        background: none !important;
        color: var(--tz-body) !important;
        font-size: 14px;
    }

    html.tz-shell .tz-ab .tz-ab-opts .dropdown-menu .list-group .list-group-item.active,
    html.tz-shell .tz-ab .tz-ab-opts .dropdown-menu .list-group .list-group-item:active {
        background: rgba(var(--tz-p-rgb), .08) !important;
        color: var(--tz-p-dark) !important;
    }

    html.tz-shell #main-body .breadcrumb {
        display: none !important;
    }

    /* iOS zooms into fields under 16px */
    html.tz-shell input:not([type=checkbox]):not([type=radio]),
    html.tz-shell select,
    html.tz-shell textarea {
        font-size: 16px !important;
    }

    /* ---- app bar ---- */
    .tz-ab {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1040;
        display: flex;
        align-items: center;
        gap: 10px;
        height: calc(60px + var(--tz-sat));
        padding: var(--tz-sat) 12px 0;
        background: rgba(255, 255, 255, .92);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
        backdrop-filter: blur(16px) saturate(160%);
        border-bottom: .5px solid rgba(15, 23, 42, .1);
    }

    .tz-ab-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        padding: 0;
        border: 0;
        border-radius: 14px;
        background: var(--tz-grad);
        color: #fff;
        box-shadow: 0 10px 18px -12px rgba(var(--tz-p-rgb), .95);
        cursor: pointer;
    }

    .tz-ab-btn svg {
        width: 22px;
        height: 22px;
    }

    .tz-ab-title {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .tz-ab-emblem {
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        padding: 5px;
        border-radius: 11px;
        background: #fff;
        box-shadow: 0 0 0 1px var(--tz-line), 0 6px 14px -10px rgba(15, 23, 42, .5);
        object-fit: contain;
    }

    .tz-ab-text {
        min-width: 0;
        display: flex;
        flex-direction: column;
        line-height: 1.35;
    }

    .tz-ab-text b {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 15.5px;
        color: var(--tz-text);
    }

    .tz-ab-text small {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 11.5px;
        color: var(--tz-muted);
    }

    .tz-ab-actions {
        flex: none;
        display: flex;
        align-items: center;
        gap: 2px;
        padding: 3px;
        border-radius: 16px;
        background: #f1f5f9;
    }

    .tz-ab-actions a {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 13px;
        color: #475569 !important;
        text-decoration: none !important;
    }

    .tz-ab-actions a:active {
        background: #e2e8f0;
    }

    .tz-ab-actions svg {
        width: 21px;
        height: 21px;
    }

    .tz-ab-actions img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0 0 0 2px #fff;
    }

    .tz-ab-badge {
        position: absolute;
        top: 4px;
        inset-inline-end: 4px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 999px;
        background: #ef4444;
        color: #fff;
        font-size: 10px;
        line-height: 16px;
        text-align: center;
        box-shadow: 0 0 0 2px #f1f5f9;
    }

    /* ---- drawer (the theme's sidebar) ---- */
    html.tz-shell nav.coodiv-navbar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        right: 0 !important;
        left: auto !important;
        z-index: 1060 !important;
        width: min(320px, 86vw) !important;
        height: 100% !important;
        margin: 0 !important;
        border: 0;
        border-radius: 26px 0 0 26px;
        box-shadow: -24px 0 60px -20px rgba(15, 23, 42, .45) !important;
        transform: translateX(105%);
        transition: transform .3s cubic-bezier(.2, .8, .2, 1);
        overflow: hidden;
    }

    /* left-to-right languages: the theme sets dir only for RTL ones */
    html.tz-shell:not([dir="rtl"]) nav.coodiv-navbar {
        right: auto !important;
        left: 0 !important;
        border-radius: 0 26px 26px 0;
        box-shadow: 24px 0 60px -20px rgba(15, 23, 42, .45) !important;
        transform: translateX(-105%);
    }

    html.tz-shell nav.coodiv-navbar.mob-open {
        transform: none !important;
    }

    html.tz-shell nav.coodiv-navbar .navbar-wrapper {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100% !important;
    }

    html.tz-shell nav.coodiv-navbar .navbar-brand.header-logo {
        flex: none;
        justify-content: space-between;
        height: calc(64px + var(--tz-sat)) !important;
        padding: var(--tz-sat) 16px 0 !important;
    }

    html.tz-shell nav.coodiv-navbar .slimScrollDiv,
    html.tz-shell nav.coodiv-navbar .navbar-content {
        flex: 1 1 auto;
        height: auto !important;
        min-height: 0;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    html.tz-shell nav.coodiv-navbar .slimScrollBar,
    html.tz-shell nav.coodiv-navbar .slimScrollRail {
        display: none !important;
    }

    .tz-drawer-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 0;
        border-radius: 12px;
        background: #f1f5f9;
        color: #475569;
        cursor: pointer;
    }

    .tz-drawer-close svg {
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
    }

    .tz-drawer-extra {
        display: block;
        flex: none;
        padding: 12px 14px calc(14px + var(--tz-sab));
        border-top: 1px solid var(--tz-line-soft);
        background: #fafbfd;
    }

    .tz-drawer-user {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .tz-drawer-user img {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
    }

    .tz-drawer-user > span:not(.tz-ava) {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        line-height: 1.5;
    }

    .tz-drawer-user b {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 13.5px;
        color: var(--tz-text);
    }

    .tz-drawer-user small {
        font-size: 11.5px;
        color: var(--tz-muted);
    }

    .tz-drawer-extra a.tz-logout,
    .tz-drawer-extra button.tz-install {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 12px;
        background: #fdecec;
        color: #dc2626 !important;
        cursor: pointer;
    }

    .tz-drawer-extra button.tz-install {
        flex: none;
        width: 100%;
        gap: 8px;
        margin-bottom: 10px;
        background: var(--tz-grad);
        color: #fff !important;
        font: inherit;
        font-size: 13.5px;
    }

    .tz-drawer-extra svg {
        width: 19px;
        height: 19px;
    }

    .tz-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1055;
        background: rgba(15, 23, 42, .4);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s, visibility .25s;
    }

    html.tz-drawer-open .tz-backdrop {
        opacity: 1;
        visibility: visible;
    }

    html.tz-drawer-open,
    html.tz-drawer-open body {
        overflow: hidden !important;
    }

    /* ---- tab bar ---- */
    .tz-tabbar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1040;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: end;
        height: calc(66px + var(--tz-sab));
        padding: 0 6px var(--tz-sab);
        border-radius: 24px 24px 0 0;
        background: rgba(255, 255, 255, .96);
        -webkit-backdrop-filter: blur(16px) saturate(160%);
        backdrop-filter: blur(16px) saturate(160%);
        box-shadow: 0 -12px 34px -20px rgba(15, 23, 42, .4), 0 -.5px 0 rgba(15, 23, 42, .08);
    }

    .tz-tabbar a,
    .tz-tabbar button {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        height: 66px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--tz-faint) !important;
        font: inherit;
        font-size: 11px;
        line-height: 1.3;
        text-decoration: none !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .tz-tabbar svg {
        width: 23px;
        height: 23px;
    }

    .tz-tabbar .tz-on {
        color: var(--tz-p-dark) !important;
    }

    .tz-tabbar .tz-on::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        width: 22px;
        height: 3px;
        margin-left: -11px;
        border-radius: 0 0 4px 4px;
        background: var(--tz-p);
    }

    .tz-tabbar a:active,
    .tz-tabbar button:active {
        transform: scale(.94);
    }

    /* raised home button with a "notch" ring in the page colour */
    .tz-tabbar .tz-tab-home {
        justify-content: flex-start;
    }

    .tz-tab-home .tz-home-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 58px;
        height: 58px;
        margin-top: -22px;
        border-radius: 50%;
        background: var(--tz-grad);
        color: #fff;
        box-shadow: 0 0 0 6px var(--tz-bg), 0 16px 26px -12px rgba(var(--tz-p-rgb), .95);
    }

    .tz-tab-home .tz-home-btn svg {
        width: 26px;
        height: 26px;
    }

    .tz-tabbar .tz-tab-home.tz-on::before {
        display: none;
    }

    .tz-tab-home span:last-child {
        margin-top: 2px;
    }

    .tz-tabbar .tz-tab-home.tz-on span:last-child {
        color: var(--tz-p-dark);
    }

    /* ---- dashboard on phones ---- */
    .tz-hero {
        gap: 14px;
        margin-bottom: 12px;
        padding: 18px 16px;
        border-radius: 22px;
    }

    .tz-hero-avatar {
        flex-basis: 54px;
        width: 54px;
        height: 54px;
    }

    .tz-hero-name {
        margin-bottom: 10px;
        font-size: 18px;
    }

    .tz-hero-art {
        display: none;
    }

    .tz-quick {
        gap: 8px;
        margin-bottom: 12px;
        padding: 14px 10px;
        border: 1px solid var(--tz-line);
        border-radius: 22px;
        background: var(--tz-card);
        box-shadow: var(--tz-shadow);
    }

    .tz-quick a,
    .tz-quick a:hover,
    .tz-quick a:focus {
        min-height: 0;
        gap: 7px;
        padding: 4px 2px;
        border: 0;
        background: none;
        box-shadow: none;
        transform: none;
        font-size: 11.5px;
    }

    .tz-quick-ico {
        width: 50px;
        height: 50px;
        border-radius: 16px;
    }

    html.tz-shell .tqa-wrap {
        display: none !important;
    }

    /* stat tiles: compact on phones */
    html.tz-shell.tcu-p-clientareahome .cleinareahome-sevices-boxes {
        gap: 10px !important;
        margin: 0 0 12px !important;
    }

    html.tz-shell.tcu-p-clientareahome .cleinareahome-sevices-boxes > [class*="col-"] > a {
        grid-template-columns: 40px minmax(0, 1fr) !important;
        min-height: 68px !important;
        padding: 10px 12px !important;
        border-radius: 18px !important;
    }

    html.tz-shell.tcu-p-clientareahome .cleinareahome-sevices-boxes > [class*="col-"] > a > i {
        width: 40px !important;
        height: 40px !important;
        font-size: 19px !important;
        border-radius: 12px !important;
    }

    html.tz-shell.tcu-p-clientareahome .cleinareahome-sevices-boxes > [class*="col-"] > a > i::before {
        font-size: 19px !important;
    }

    html.tz-shell.tcu-p-clientareahome .cleinareahome-sevices-boxes > [class*="col-"] > a > .number {
        font-size: 18px !important;
    }
}

@media (max-width: 380px) {
    .tz-quick a {
        font-size: 10.5px !important;
    }

    .tz-quick-ico {
        width: 44px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.tz-shell nav.coodiv-navbar,
    .tz-backdrop,
    .tz-quick a {
        transition: none !important;
    }
}

/* letter avatar (portal.js) - most clients have no Gravatar, its placeholder is a logo */
.tz-ava {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border-radius: 50%;
    background: var(--tz-grad, linear-gradient(135deg, #22c3d6, #0a86a8));
    color: #fff;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
}

html.tz-shell header.coodiv-header .drp-user .dropdown-toggle .tz-ava {
    width: 34px;
    height: 34px;
    font-size: 14px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #dbe7ee;
}

.tz-hero .tz-ava.tz-hero-avatar {
    background: rgba(255, 255, 255, .2);
    font-size: 24px;
}

.tz-ab-actions .tz-ava {
    width: 32px;
    height: 32px;
    font-size: 13px;
    box-shadow: 0 0 0 2px #fff;
}

.tz-drawer-user .tz-ava {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    font-size: 15px;
}

/* =====================================================================
   PHONES: list pages without a frame, table rows as cards (labels set by portal.js)
   ===================================================================== */
@media (max-width: 767.98px) {
    html.tz-shell.tz-list-page section#main-body {
        padding: 0 !important;
        border: 0;
        background: transparent !important;
        box-shadow: none !important;
    }

    html.tz-shell.tz-list-page #main-body .header-lined {
        justify-content: flex-end;
        margin: 0 0 8px !important;
        padding: 0 !important;
        border: 0 !important;
    }

    html.tz-shell .main-content .dataTables_wrapper,
    html.tz-shell .main-content .table-container {
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html.tz-shell .main-content .dataTables_wrapper .dataTables_filter,
    html.tz-shell .main-content .dataTables_wrapper .dataTables_info {
        padding: 0 0 10px !important;
    }

    html.tz-shell .main-content .dataTables_wrapper .dataTables_filter label,
    html.tz-shell .main-content .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        margin: 0 !important;
    }

    html.tz-shell .main-content .dataTables_wrapper .dataTables_filter input {
        height: 46px !important;
        border-radius: 14px !important;
        background-color: #fff !important;
    }

    html.tz-shell .main-content .dataTables_wrapper .listtable,
    html.tz-shell .main-content .table-responsive {
        overflow: visible !important;
        border: 0 !important;
    }

    html.tz-shell .main-content table.tz-cards,
    html.tz-shell .main-content table.tz-cards > tbody,
    html.tz-shell .main-content table.tz-cards > tbody > tr,
    html.tz-shell .main-content table.tz-cards > tbody > tr > td {
        display: block !important;
        width: 100% !important;
        border: 0 !important;
    }

    html.tz-shell .main-content table.tz-cards > thead {
        display: none !important;
    }

    html.tz-shell .main-content table.tz-cards {
        background: transparent !important;
    }

    html.tz-shell .main-content table.tz-cards > tbody > tr {
        margin: 0 0 10px !important;
        padding: 4px 14px !important;
        border: 1px solid var(--tz-line) !important;
        border-radius: 18px !important;
        background: var(--tz-card) !important;
        box-shadow: var(--tz-shadow);
    }

    html.tz-shell .main-content table.tz-cards > tbody > tr > td {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 0;
        padding: 9px 0 !important;
        border-bottom: 1px dashed var(--tz-line-soft) !important;
        background: transparent !important;
        text-align: start !important;
        font-size: 13.5px;
    }

    html.tz-shell .main-content table.tz-cards > tbody > tr > td:last-child {
        border-bottom: 0 !important;
    }

    html.tz-shell .main-content table.tz-cards > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        flex: none;
        max-width: 45%;
        font-size: 12px;
        color: var(--tz-muted);
    }

    html.tz-shell .main-content table.tz-cards > tbody > tr > td > * {
        min-width: 0;
        text-align: end;
    }

    /* cells without a column title (icons, buttons) */
    html.tz-shell .main-content table.tz-cards > tbody > tr > td.tz-nolabel {
        justify-content: flex-start;
    }

    /* WHMCS's phone-only action cell ("view invoice", ...) */
    html.tz-shell .main-content table.tz-cards > tbody > tr > td.responsive-edit-button {
        padding: 10px 0 8px !important;
    }

    html.tz-shell .main-content table.tz-cards > tbody > tr > td.responsive-edit-button .btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 46px;
        border: 0 !important;
        border-radius: 14px !important;
        background: var(--tz-grad) !important;
        color: #fff !important;
        font-size: 14px;
        text-align: center;
        box-shadow: 0 12px 22px -16px rgba(var(--tz-p-rgb), .95);
    }

    html.tz-shell .main-content table.tz-cards > tbody > tr > td.tz-icon-only {
        display: none !important;
    }

    html.tz-shell .main-content table.tz-cards > tbody > tr > td.dataTables_empty {
        justify-content: center;
        padding: 26px 0 !important;
    }

    html.tz-shell .main-content table.tz-cards > tbody > tr > td.dataTables_empty::before {
        display: none;
    }

    html.tz-shell .main-content .dataTables_wrapper .dataTables_paginate,
    html.tz-shell .main-content .dataTables_wrapper .dataTables_length,
    html.tz-shell .main-content .dataTables_wrapper .table-container-footer {
        padding: 6px 0 !important;
        background: transparent !important;
    }
}

/* =====================================================================
   HEADER v2 (desktop): one 64px row, everything centred
   start: collapse toggle + search | end: cart, bell, user chip
   ===================================================================== */
@media (min-width: 992px) {
    /* the theme pins this row at 90px (body.body-style-2 ... !important) */
    html.tz-shell body header.coodiv-header .navbar-collapse.collapse {
        height: 64px !important;
    }

    /* Bootstrap clearfix pseudo-elements would become flex items and squeeze both groups inwards */
    html.tz-shell header.coodiv-header .navbar-collapse::before,
    html.tz-shell header.coodiv-header .navbar-collapse::after {
        display: none !important;
    }

    html.tz-shell header.coodiv-header .navbar-collapse {
        position: relative;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        height: 64px !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 20px !important;
    }

    html.tz-shell header.coodiv-header .navbar-collapse > ul.navbar-nav {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        height: 64px !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    html.tz-shell header.coodiv-header .navbar-collapse > ul.navbar-nav > li {
        display: flex !important;
        align-items: center;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        border: 0 !important;
    }

    /* collapse toggle */
    html.tz-shell header.coodiv-header #mobile-collapse {
        position: static !important;
        top: auto !important;
        flex: 0 0 40px;
        transform: none !important;
    }

    /* relative: the search icons are positioned inside the form */
    html.tz-shell header.coodiv-header .main-search {
        position: relative !important;
        margin: 0 !important;
    }

    /* cart + bell: matching tiles */
    html.tz-shell header.coodiv-header ul.ml-auto > li > a.f-15,
    html.tz-shell header.coodiv-header ul.ml-auto > li > .dropdown:not(.drp-user) > a.f-15 {
        position: relative;
        width: 40px !important;
        min-width: 40px;
        height: 40px !important;
        padding: 0 !important;
        border-radius: 12px !important;
        background: #f3f6f9;
    }

    html.tz-shell header.coodiv-header ul.ml-auto > li > a.f-15:hover,
    html.tz-shell header.coodiv-header ul.ml-auto > li > .dropdown:not(.drp-user) > a.f-15:hover {
        background: rgba(var(--tz-p-rgb), .1);
    }

    html.tz-shell header.coodiv-header ul.ml-auto i.icon {
        margin: 0 !important;
        font-size: 18px !important;
        line-height: 1 !important;
    }

    /* the bell's pulse becomes a small dot in the tile corner */
    html.tz-shell header.coodiv-header .dotted-animation {
        position: absolute !important;
        top: 8px !important;
        right: 9px !important;
        left: auto !important;
        width: 8px !important;
        height: 8px !important;
        margin: 0 !important;
    }

    html.tz-shell header.coodiv-header .dotted-animation .main-circle,
    html.tz-shell header.coodiv-header .dotted-animation .animate-circle {
        top: 0 !important;
        left: 0 !important;
        width: 8px !important;
        height: 8px !important;
        margin: 0 !important;
    }

    /* user chip: avatar + name + chevron */
    html.tz-shell header.coodiv-header .drp-user > a.dropdown-toggle {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        height: 44px !important;
        margin: 0 0 0 0 !important;
        padding: 0 6px 0 12px !important;
        border: 1px solid var(--tz-line);
        border-radius: 999px !important;
        background: #fff;
        color: var(--tz-body) !important;
        transition: border-color .15s, box-shadow .15s;
    }

    html[dir="rtl"].tz-shell header.coodiv-header .drp-user > a.dropdown-toggle {
        padding: 0 12px 0 6px !important;
    }

    html.tz-shell header.coodiv-header .drp-user > a.dropdown-toggle:hover,
    html.tz-shell header.coodiv-header .drp-user.show > a.dropdown-toggle {
        border-color: rgba(var(--tz-p-rgb), .4);
        box-shadow: 0 6px 16px -12px rgba(var(--tz-p-rgb), .8);
        background: #fff;
    }

    html.tz-shell header.coodiv-header .drp-user > a.dropdown-toggle::after {
        content: "";
        display: block !important;
        width: 7px;
        height: 7px;
        margin: -3px 2px 0 !important;
        border: 0 !important;
        border-right: 1.8px solid var(--tz-faint) !important;
        border-bottom: 1.8px solid var(--tz-faint) !important;
        transform: rotate(45deg);
        vertical-align: middle;
    }

    html.tz-shell header.coodiv-header .drp-user .tz-ava {
        order: -1;
        width: 32px !important;
        height: 32px !important;
        box-shadow: none !important;
    }

    html[dir="rtl"].tz-shell header.coodiv-header .drp-user .tz-ava {
        order: -1;
    }

    html.tz-shell header.coodiv-header .user-name-header-drop {
        max-width: 140px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 13px;
        line-height: 1;
        margin: 0 !important;
    }

    /* dropdowns open just under the bar */
    html.tz-shell header.coodiv-header .navbar-nav .dropdown-menu {
        margin-top: 10px !important;
    }
}

/* =====================================================================
   SIDEBAR colours: every item has its own hue (--chip-rgb, set by portal.js)
   ===================================================================== */
html.tz-shell nav.coodiv-navbar .coodiv-inner-navbar > li {
    --chip-rgb: 100, 116, 139;
}

html.tz-shell nav.coodiv-navbar .coodiv-inner-navbar > li > a .coodiv-micon {
    background: rgba(var(--chip-rgb), .12) !important;
    color: rgb(var(--chip-rgb)) !important;
}

html.tz-shell nav.coodiv-navbar .coodiv-inner-navbar > li > a:hover .coodiv-micon {
    background: rgba(var(--chip-rgb), .2) !important;
}

html.tz-shell nav.coodiv-navbar .coodiv-inner-navbar > li.tz-active > a,
html.tz-shell nav.coodiv-navbar .coodiv-inner-navbar > li.coodiv-trigger > a {
    background: rgba(var(--chip-rgb), .08) !important;
    color: var(--tz-text) !important;
}

html.tz-shell nav.coodiv-navbar .coodiv-inner-navbar > li.tz-active > a .coodiv-micon,
html.tz-shell nav.coodiv-navbar .coodiv-inner-navbar > li.coodiv-trigger > a .coodiv-micon {
    background: rgb(var(--chip-rgb)) !important;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)) !important;
    color: #fff !important;
    box-shadow: 0 8px 16px -10px rgba(var(--chip-rgb), .95) !important;
}

html.tz-shell nav.coodiv-navbar .coodiv-inner-navbar > li .coodiv-submenu > li.tz-active > a {
    background: rgba(var(--chip-rgb), .08) !important;
    color: rgb(var(--chip-rgb)) !important;
}

html.tz-shell nav.coodiv-navbar .coodiv-inner-navbar > li .coodiv-submenu > li.tz-active::before {
    background: rgb(var(--chip-rgb)) !important;
    border-color: rgb(var(--chip-rgb)) !important;
}

html.tz-shell nav.coodiv-navbar .coodiv-inner-navbar > li .coodiv-submenu::before {
    background: rgba(var(--chip-rgb), .25) !important;
}

@media (min-width: 992px) {
    /* bell: its dropdown wrapper is 70px tall, centre it like the cart */
    html.tz-shell header.coodiv-header ul.ml-auto > li > .dropdown {
        display: flex !important;
        align-items: center;
        height: auto !important;
    }

    html.tz-shell header.coodiv-header .main-search input {
        padding-inline-end: 40px !important;
        text-overflow: ellipsis;
    }

    /* account dropdown: brand head, tidy summary */
    html.tz-shell header.coodiv-header .logined-user-drop-down {
        width: 320px !important;
        padding: 0 !important;
    }

    html.tz-shell header.coodiv-header .logined-user-drop-down .ligon-head {
        padding: 14px 18px !important;
        background: var(--tz-grad) !important;
        background-image: var(--tz-grad) !important;
        color: #fff !important;
    }

    html.tz-shell header.coodiv-header .logined-user-drop-down .ligon-head h6 {
        color: #fff !important;
        font-size: 14px;
    }

    html.tz-shell header.coodiv-header .logined-user-drop-down .ligon-head::before,
    html.tz-shell header.coodiv-header .logined-user-drop-down .ligon-head::after {
        display: none !important;
    }

    html.tz-shell header.coodiv-header .header-user-info-header {
        position: relative !important;
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 10px;
        height: auto !important;
        padding: 14px 18px !important;
        border-bottom: 1px solid var(--tz-line-soft);
    }

    html.tz-shell header.coodiv-header .header-user-info-header .header-user-info-header-avatar {
        display: none !important;
    }

    html.tz-shell header.coodiv-header .header-user-info-header .user-name {
        position: static !important;
        flex: 1 1 auto;
        font-size: 14px;
        color: var(--tz-text) !important;
    }

    html.tz-shell header.coodiv-header .header-user-info-header .user-info {
        position: static !important;
        padding: 3px 10px !important;
        border-radius: 999px !important;
        background: #e6f6f9 !important;
        color: var(--tz-p-dark) !important;
        font-size: 12px;
    }

    html.tz-shell header.coodiv-header .header-user-info-header .user-services,
    html.tz-shell header.coodiv-header .header-user-info-header .user-invoices {
        position: static !important;
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        width: auto !important;
        margin: 0 !important;
        padding: 5px 12px !important;
        border-radius: 10px !important;
        background: #f3f6f9 !important;
        color: var(--tz-body) !important;
        font-size: 12.5px;
    }

    html.tz-shell header.coodiv-header .header-user-info-header .user-services i,
    html.tz-shell header.coodiv-header .header-user-info-header .user-invoices i {
        color: var(--tz-p) !important;
    }
}

@media (min-width: 992px) {
    html.tz-shell header.coodiv-header .header-user-info-header {
        margin: 0 !important;
    }

    html.tz-shell header.coodiv-header .header-user-info-header > * {
        margin: 0 !important;
        line-height: 1.6 !important;
        transform: none !important;
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        float: none !important;
    }

    html.tz-shell header.coodiv-header .header-user-info-header .user-name {
        flex: 1 1 60%;
        min-width: 0;
        margin: 0 !important;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    html.tz-shell header.coodiv-header .header-user-info-header .user-services i,
    html.tz-shell header.coodiv-header .header-user-info-header .user-invoices i {
        position: static !important;
        width: auto !important;
        height: auto !important;
        line-height: 1 !important;
        font-size: 14px;
    }
}

@media (min-width: 992px) {
    /* row 1: name + credit, row 2: the two count chips */
    html.tz-shell header.coodiv-header .header-user-info-header .user-name { order: 0; }
    html.tz-shell header.coodiv-header .header-user-info-header .user-info { order: 1; }
    html.tz-shell header.coodiv-header .header-user-info-header::after {
        content: "";
        order: 2;
        flex-basis: 100%;
        height: 0;
        display: block !important;
    }
    html.tz-shell header.coodiv-header .header-user-info-header .user-services { order: 3; }
    html.tz-shell header.coodiv-header .header-user-info-header .user-invoices { order: 4; }
}

/* =====================================================================
   v3: logos, sidebar footer, rail, flyouts, WHOIS, hero motion, table buttons, finer phones
   ===================================================================== */
.tz-rail-logo {
    display: none;
}

/* the login wordmarks are 450x150 with built-in margins: size by width */
html.tz-shell nav.coodiv-navbar .header-logo img.logo {
    width: 168px !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
}

/* sidebar footer on desktop: the same user card the phone drawer has */
@media (min-width: 992px) {
    html.tz-shell nav.coodiv-navbar .tz-drawer-extra {
        display: block;
        flex: none;
        padding: 12px 14px 14px;
        border-top: 1px solid var(--tz-line-soft);
        background: #fafbfd;
    }

    html.tz-shell nav.coodiv-navbar .tz-drawer-user {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    html.tz-shell nav.coodiv-navbar .tz-drawer-user > span:not(.tz-ava) {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        line-height: 1.5;
    }

    html.tz-shell nav.coodiv-navbar .tz-drawer-user b {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 13px;
        color: var(--tz-text);
    }

    html.tz-shell nav.coodiv-navbar .tz-drawer-user small {
        font-size: 11.5px;
        color: var(--tz-muted);
    }

    html.tz-shell nav.coodiv-navbar .tz-drawer-extra a.tz-logout,
    html.tz-shell nav.coodiv-navbar .tz-drawer-extra button.tz-install {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 11px;
        background: #fdecec;
        color: #dc2626 !important;
        cursor: pointer;
    }

    html.tz-shell nav.coodiv-navbar .tz-drawer-extra button.tz-install {
        width: 100%;
        gap: 8px;
        margin-bottom: 10px;
        background: var(--tz-grad);
        color: #fff !important;
        font: inherit;
        font-size: 12.5px;
    }

    html.tz-shell nav.coodiv-navbar .tz-drawer-extra button.tz-install[hidden] {
        display: none;
    }

    html.tz-shell nav.coodiv-navbar .tz-drawer-extra svg {
        width: 18px;
        height: 18px;
    }

    /* ---- collapsed rail (992-1200px): emblem at the top, avatar + log-out at the bottom ---- */
    html.tz-shell nav.coodiv-navbar.navbar-collapsed .header-logo img.logo {
        display: none !important;
    }

    html.tz-shell nav.coodiv-navbar.navbar-collapsed .tz-rail-logo {
        display: block;
        width: 38px;
        height: auto;
    }

    html.tz-shell nav.coodiv-navbar.navbar-collapsed .navbar-brand.header-logo {
        padding: 0 !important;
    }

    html.tz-shell nav.coodiv-navbar.navbar-collapsed .tz-drawer-extra {
        padding: 10px 0 12px;
    }

    html.tz-shell nav.coodiv-navbar.navbar-collapsed .tz-drawer-user {
        flex-direction: column;
        gap: 8px;
    }

    html.tz-shell nav.coodiv-navbar.navbar-collapsed .tz-drawer-user > span:not(.tz-ava),
    html.tz-shell nav.coodiv-navbar.navbar-collapsed .tz-install {
        display: none !important;
    }

    html.tz-shell nav.coodiv-navbar.navbar-collapsed .coodiv-inner-navbar > li > a {
        min-height: 48px;
        margin: 3px 0 !important;
    }

    html.tz-shell nav.coodiv-navbar.navbar-collapsed .coodiv-inner-navbar > li {
        border-bottom: 0 !important;
    }

    html.tz-shell nav.coodiv-navbar.navbar-collapsed .coodiv-inner-navbar > li::after,
    html.tz-shell nav.coodiv-navbar.navbar-collapsed .coodiv-inner-navbar > li > a::before {
        display: none !important;
    }
}

/* ---- rail flyouts (theme clones the submenu into <body>; portal.js adds the header) ---- */
.coodiv-submenu-clone-title.with-sub-menu {
    display: none !important;
}

.coodiv-submenu-clone {
    --chip-rgb: 0, 153, 184;
    width: 236px;
    padding: 6px !important;
    border: 1px solid var(--tz-line, #e8ecf3) !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 22px 48px -22px rgba(15, 23, 42, .45) !important;
}

html[dir="rtl"] .coodiv-submenu-clone {
    right: 84px !important;
}

.coodiv-submenu-clone .tz-fly-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    padding: 8px 10px;
    border-radius: 11px;
    background: rgba(var(--chip-rgb), .1);
    color: rgb(var(--chip-rgb));
    font-size: 13px;
}

.coodiv-submenu-clone .tz-fly-head::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgb(var(--chip-rgb));
}

.coodiv-submenu-clone ul.coodiv-submenu {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
    background: none !important;
}

.coodiv-submenu-clone ul.coodiv-submenu > li {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}

.coodiv-submenu-clone ul.coodiv-submenu > li + li {
    border-top: 1px solid #f1f4f8 !important;
}

.coodiv-submenu-clone ul.coodiv-submenu > li > a {
    display: block !important;
    margin: 1px 0 !important;
    padding: 7px 10px !important;
    border-radius: 9px !important;
    background: none !important;
    color: #334155 !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    text-decoration: none !important;
}

.coodiv-submenu-clone ul.coodiv-submenu > li > a::before,
.coodiv-submenu-clone ul.coodiv-submenu > li > a::after {
    display: none !important;
}

.coodiv-submenu-clone ul.coodiv-submenu > li > a:hover {
    background: rgba(var(--chip-rgb), .08) !important;
    color: rgb(var(--chip-rgb)) !important;
}

.coodiv-submenu-clone-title.without-sub-menu {
    padding: 6px 12px !important;
    border-radius: 9px !important;
    background: #0f172a !important;
    font-size: 12px !important;
}

/* ---- WHOIS box (domains page) ---- */
.tz-whois {
    margin: 0 0 16px;
    padding: 16px 18px;
    border: 1px solid var(--tz-line);
    border-radius: 18px;
    background:
        radial-gradient(90% 140% at 100% 0%, rgba(34, 195, 214, .12), transparent 60%),
        #fff;
    box-shadow: var(--tz-shadow);
}

.tz-whois-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.tz-whois-head > div {
    display: flex;
    flex-direction: column;
    line-height: 1.6;
}

.tz-whois-head b {
    font-size: 14.5px;
    color: var(--tz-text);
}

.tz-whois-head small {
    font-size: 12px;
    color: var(--tz-muted);
}

.tz-whois-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #38bdf8, #0369a1);
    color: #fff;
}

.tz-whois-ico svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.tz-whois-form {
    display: flex;
    gap: 8px;
    margin: 0;
}

.tz-whois-form input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--tz-line);
    border-radius: 12px;
    background: #f8fafc;
    font-size: 14px;
    text-align: left;
}

.tz-whois-form input:focus {
    background: #fff;
    border-color: var(--tz-p);
    box-shadow: 0 0 0 4px rgba(var(--tz-p-rgb), .12);
    outline: 0;
}

.tz-whois-form button {
    flex: none;
    height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 12px;
    background: var(--tz-grad);
    color: #fff;
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
}

.tz-whois.tz-busy .tz-whois-form button {
    opacity: .7;
    cursor: progress;
}

.tz-whois-result {
    margin-top: 12px;
}

.tz-whois-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.tz-whois-badge {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12.5px;
}

.tz-whois-free .tz-whois-badge { background: #e8f8ee; color: #15803d; }
.tz-whois-taken .tz-whois-badge { background: #fff4e0; color: #b45309; }
.tz-whois-err .tz-whois-badge { background: #fdecec; color: #b91c1c; }

.tz-whois-domain {
    font-size: 14px;
    color: var(--tz-text);
}

.tz-whois-go,
.tz-whois-go:hover,
.tz-whois-toggle {
    margin-inline-start: auto;
    padding: 6px 14px;
    border: 1px solid rgba(var(--tz-p-rgb), .35);
    border-radius: 10px;
    background: #fff;
    color: var(--tz-p-dark) !important;
    font: inherit;
    font-size: 12.5px;
    text-decoration: none !important;
    cursor: pointer;
}

.tz-whois-pre {
    max-height: 320px;
    margin: 10px 0 0;
    padding: 12px 14px;
    overflow: auto;
    border: 0;
    border-radius: 12px;
    background: #0f172a;
    color: #e2e8f0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    text-align: left;
}

/* ---- hero art in motion ---- */
.tz-hero-art .tz-art-leds path {
    animation: tz-led 2.4s ease-in-out infinite;
}

.tz-hero-art .tz-art-leds path:nth-child(2) { animation-delay: .4s; }
.tz-hero-art .tz-art-leds path:nth-child(3) { animation-delay: .8s; }

.tz-hero-art .tz-art-bars path {
    stroke-dasharray: 30;
    animation: tz-bars 3s ease-in-out infinite alternate;
}

.tz-hero-art .tz-art-bars path:nth-child(2) { animation-delay: .6s; }
.tz-hero-art .tz-art-bars path:nth-child(3) { animation-delay: 1.2s; }

.tz-hero-art .tz-art-shield {
    transform-box: fill-box;
    transform-origin: center;
    animation: tz-shield 4s ease-in-out infinite;
}

.tz-hero-art .tz-art-check {
    stroke-dasharray: 26;
    animation: tz-check 4s ease-in-out infinite;
}

@keyframes tz-led {
    0%, 100% { stroke: #fff; }
    50% { stroke: #5eead4; filter: drop-shadow(0 0 3px #5eead4); }
}

@keyframes tz-bars {
    from { stroke-dashoffset: 18; }
    to { stroke-dashoffset: 0; }
}

@keyframes tz-shield {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.03); }
}

@keyframes tz-check {
    0%, 15% { stroke-dashoffset: 26; }
    40%, 100% { stroke-dashoffset: 0; }
}

/* ---- buttons inside tables: compact, joined groups ---- */
html.tz-shell .main-content table .btn {
    padding: 5px 9px !important;
    min-height: 0 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    border-radius: 9px !important;
}

html.tz-shell .main-content table .btn-group {
    display: inline-flex !important;
    flex-wrap: nowrap;
}

html.tz-shell .main-content table .btn-group > .btn {
    float: none !important;
    margin: 0 !important;
}

html.tz-shell .main-content table .btn-group > .btn:not(:first-child) {
    border-start-start-radius: 0 !important;
    border-end-start-radius: 0 !important;
    margin-inline-start: -1px !important;
}

html.tz-shell .main-content table .btn-group > .btn:not(:last-child) {
    border-start-end-radius: 0 !important;
    border-end-end-radius: 0 !important;
}

html.tz-shell .main-content table .btn-group > .dropdown-toggle {
    padding: 5px 7px !important;
}

html.tz-shell .main-content table .btn i {
    font-size: 13px !important;
}

html.tz-shell .main-content table td:has(> .btn-group),
html.tz-shell .main-content table td:has(> .btn) {
    white-space: nowrap;
    width: 1%;
}

/* ---- phones: tighter spacing, finer type (bold kept for headings and actions) ---- */
@media (max-width: 767.98px) {
    html.tz-shell body {
        font-size: 13px;
    }

    html.tz-shell .main-content p,
    html.tz-shell .main-content td,
    html.tz-shell .main-content li,
    html.tz-shell .main-content label,
    html.tz-shell .main-content small,
    html.tz-shell .main-content .list-group-item,
    html.tz-shell .main-content .panel-body,
    html.tz-shell .tz-ab-text small,
    html.tz-shell .tz-hero-hello,
    html.tz-shell .tz-quick a,
    html.tz-shell .tz-tabbar span,
    html.tz-shell nav.coodiv-navbar .coodiv-submenu > li > a {
        font-family: iransans_medium, iransans, Tahoma, sans-serif !important;
    }

    html.tz-shell .coodiv-content {
        padding: 10px 10px 4px !important;
    }

    html.tz-shell section#main-body {
        padding: 12px 12px 14px !important;
        border-radius: 18px;
    }

    html.tz-shell .tz-ab {
        height: calc(56px + var(--tz-sat));
        gap: 8px;
        padding: var(--tz-sat) 10px 0;
    }

    html.tz-shell body {
        padding-top: calc(56px + var(--tz-sat)) !important;
    }

    html.tz-shell .tz-ab-btn {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }

    html.tz-shell .tz-ab-text b {
        font-size: 14.5px;
    }

    html.tz-shell .tz-ab-text small {
        font-size: 11px;
    }

    html.tz-shell .tz-ab-actions a {
        width: 36px;
        height: 36px;
    }

    .tz-ab-opts > .dropdown-menu {
        top: calc(60px + var(--tz-sat)) !important;
    }

    .tz-hero {
        gap: 12px;
        padding: 15px 14px;
        border-radius: 20px;
    }

    .tz-hero-hello {
        font-size: 12px;
    }

    .tz-hero-name {
        margin-bottom: 8px;
        font-size: 16.5px;
    }

    .tz-hero-chip,
    .tz-hero-chip:hover,
    .tz-hero-chip:focus {
        padding: 5px 11px;
        font-size: 11.5px;
    }

    .tz-quick {
        gap: 6px;
        padding: 12px 8px;
        border-radius: 20px;
    }

    .tz-quick a,
    .tz-quick a:hover,
    .tz-quick a:focus {
        font-size: 11px;
    }

    .tz-quick-ico {
        width: 46px;
        height: 46px;
        border-radius: 15px;
    }

    .tz-quick-ico svg {
        width: 21px;
        height: 21px;
    }

    html.tz-shell.tcu-p-clientareahome .client-home-panels .panel > .panel-heading {
        min-height: 48px !important;
        padding: 10px 14px !important;
    }

    html.tz-shell.tcu-p-clientareahome .client-home-panels .panel-title {
        font-size: 13.5px !important;
    }

    html.tz-shell.tcu-p-clientareahome .client-home-panels .panel > .list-group > .list-group-item {
        min-height: 50px;
        padding: 9px 14px !important;
        font-size: 12.5px !important;
    }

    html.tz-shell .main-content table.tz-cards > tbody > tr {
        margin-bottom: 8px !important;
        padding: 2px 12px !important;
        border-radius: 16px !important;
    }

    html.tz-shell .main-content table.tz-cards > tbody > tr > td {
        padding: 7px 0 !important;
        font-size: 12.5px;
    }

    html.tz-shell .main-content table.tz-cards > tbody > tr > td[data-label]::before {
        font-size: 11.5px;
    }

    .tz-tabbar span {
        font-size: 10.5px;
    }

    .tz-whois {
        padding: 14px;
        border-radius: 16px;
    }

    .tz-whois-head small {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tz-hero-art * {
        animation: none !important;
    }
}

/* ---- invoice list: "view" button per row (portal.js), opens in a new tab ---- */
html.tz-shell .main-content table td.tz-view-col,
html.tz-shell .main-content table th.tz-view-col {
    width: 1%;
    white-space: nowrap;
    text-align: center !important;
}

html.tz-shell .main-content table a.tz-view-btn,
html.tz-shell .main-content table a.tz-view-btn:hover,
html.tz-shell .main-content table a.tz-view-btn:focus {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid rgba(var(--tz-p-rgb), .35);
    border-radius: 9px;
    background: #fff;
    color: var(--tz-p-dark) !important;
    font-size: 12px;
    line-height: 1.5;
    text-decoration: none !important;
    transition: background .15s, color .15s, border-color .15s;
}

html.tz-shell .main-content table a.tz-view-btn:hover {
    background: var(--tz-p);
    border-color: var(--tz-p);
    color: #fff !important;
}

html.tz-shell .main-content table a.tz-view-btn svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* phones: full-width action at the bottom of the invoice card */
@media (max-width: 767.98px) {
    html.tz-shell .main-content table.tz-cards > tbody > tr > td.tz-view-col {
        justify-content: stretch;
        padding: 10px 0 8px !important;
    }

    html.tz-shell .main-content table.tz-cards > tbody > tr > td.tz-view-col a.tz-view-btn {
        justify-content: center;
        width: 100%;
        min-height: 42px;
        border: 0;
        border-radius: 12px;
        background: var(--tz-grad);
        color: #fff !important;
        font-size: 13px;
    }
}

@media (min-width: 768px) {
    /* the theme's DataTables CSS hides .responsive-edit-button outside its phone layout */
    html.tz-shell .main-content table th.tz-view-col,
    html.tz-shell .main-content table td.tz-view-col {
        display: table-cell !important;
    }
}

/* ---- in-place navigation (portal.js) ---- */
.tz-progress {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2000;
    height: 3px;
    pointer-events: none;
    background: linear-gradient(90deg, #22c3d6, #0a86a8);
    transform: scaleX(0);
    transform-origin: right center;
    opacity: 0;
}

html:not([dir="rtl"]) .tz-progress {
    transform-origin: left center;
}

html.tz-navigating .tz-progress {
    opacity: 1;
    animation: tz-progress 1.6s cubic-bezier(.2, .7, .3, 1) forwards;
}

@keyframes tz-progress {
    from { transform: scaleX(.05); }
    to { transform: scaleX(.85); }
}

html.tz-navigating .page-wrapper {
    opacity: .55;
    transition: opacity .2s;
    pointer-events: none;
}

.tz-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

#main-body h1[tabindex="-1"]:focus {
    outline: 0;
}

/* =====================================================================
   v4: sidebar scroll, logo, header search, language menu, page loader
   ===================================================================== */
/* sidebar: the menu scrolls between the brand and the footer card */
html.tz-shell nav.coodiv-navbar .slimScrollDiv {
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
}

html.tz-shell nav.coodiv-navbar .navbar-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #d5dde7 transparent;
}

html.tz-shell nav.coodiv-navbar .navbar-content::-webkit-scrollbar {
    width: 6px;
}

html.tz-shell nav.coodiv-navbar .navbar-content::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: #d5dde7;
}

html.tz-shell nav.coodiv-navbar .coodiv-inner-navbar {
    display: block !important;
}

/* logo: smaller, no box on click (keyboard focus keeps a soft ring) */
html.tz-shell nav.coodiv-navbar .header-logo img.logo {
    width: 136px !important;
}

html.tz-shell nav.coodiv-navbar .header-logo a,
html.tz-shell nav.coodiv-navbar .header-logo a:focus,
html.tz-shell nav.coodiv-navbar .header-logo a:active {
    outline: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

html.tz-shell nav.coodiv-navbar .header-logo a:focus-visible {
    border-radius: 12px;
    box-shadow: 0 0 0 3px rgba(var(--tz-p-rgb), .25) !important;
}

html.tz-shell a:focus:not(:focus-visible),
html.tz-shell button:focus:not(:focus-visible) {
    outline: 0 !important;
}

/* quick-action cards follow the page direction */
html:not([dir="rtl"]) .tqa-go svg {
    transform: scaleX(-1);
}

/* ---- header search results ---- */
html.tz-shell header.coodiv-header .main-search {
    overflow: visible !important;
}

.tz-sp {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    z-index: 1200;
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid #e8ecf3;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 28px 60px -26px rgba(15, 23, 42, .45);
    animation: tz-sp-in .16s ease both;
    scrollbar-width: thin;
}

.tz-sp[hidden] {
    display: none;
}

@keyframes tz-sp-in {
    from { opacity: 0; transform: translateY(-4px); }
}

.tz-sp.is-busy::before {
    content: "";
    position: sticky;
    top: -8px;
    display: block;
    height: 2px;
    margin: -8px -8px 6px;
    background: linear-gradient(90deg, transparent, #12b5c9, transparent);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    animation: tz-sp-bar 1s linear infinite;
}

@keyframes tz-sp-bar {
    from { background-position: -50% 0; }
    to { background-position: 150% 0; }
}

.tz-sp-group + .tz-sp-group,
.tz-sp-group + .tz-sp-kb,
.tz-sp-note + .tz-sp-kb {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid #f1f4f8;
}

.tz-sp-gh {
    padding: 6px 10px 4px;
    font-size: 11px;
    color: #94a3b8;
}

.tz-sp-item,
.tz-sp-item:hover,
.tz-sp-item:focus {
    --chip-rgb: 0, 153, 184;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    color: #0f172a !important;
    text-decoration: none !important;
    border: 0 !important;
}

.tz-sp-item.is-active {
    background: #f1f8fb;
}

.tz-sp-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    height: 34px;
    border-radius: 11px;
    background: rgba(var(--chip-rgb), .12);
    color: rgb(var(--chip-rgb));
}

.tz-sp-ico svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tz-sp-ticket { --chip-rgb: 217, 119, 6; }
.tz-sp-invoice { --chip-rgb: 225, 29, 72; }
.tz-sp-service { --chip-rgb: 79, 70, 229; }
.tz-sp-domain { --chip-rgb: 2, 132, 199; }
.tz-sp-kb { --chip-rgb: 234, 88, 12; }

.tz-sp-txt {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.5;
}

.tz-sp-txt b {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 600;
}

.tz-sp-txt small {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11.5px;
    color: #94a3b8;
}

.tz-sp-txt small:empty {
    display: none;
}

.tz-sp-pill {
    flex: none;
    padding: 2px 9px;
    border-radius: 999px;
    background: #f1f3f7;
    color: #64748b;
    font-size: 11px;
}

.tz-st-active, .tz-st-paid, .tz-st-open { background: #e8f8ee; color: #15803d; }
.tz-st-unpaid, .tz-st-pending, .tz-st-customer-reply, .tz-st-on-hold, .tz-st-in-proceed { background: #fff4e0; color: #b45309; }
.tz-st-answered { background: #e6f4fb; color: #0369a1; }
.tz-st-overdue, .tz-st-suspended, .tz-st-expired, .tz-st-cancelled, .tz-st-terminated { background: #fdecec; color: #b91c1c; }

.tz-sp-note {
    padding: 14px 10px;
    font-size: 12.5px;
    color: #94a3b8;
    text-align: center;
}

/* phones: search sheet over a blurred page */
.tz-ab-search svg {
    width: 21px;
    height: 21px;
}

.tz-sp-sheet {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: calc(10px + var(--tz-sat, 0px)) 10px 10px;
    background: rgba(15, 23, 42, .35);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    animation: tz-fade-in .16s ease both;
}

.tz-sp-sheet[hidden] {
    display: none;
}

@keyframes tz-fade-in {
    from { opacity: 0; }
}

html.tz-sheet-open,
html.tz-sheet-open body {
    overflow: hidden !important;
}

.tz-sp-sheet-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 20px - var(--tz-sat, 0px));
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 30px 70px -30px rgba(15, 23, 42, .6);
}

.tz-sp-sheet-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 10px;
    border-bottom: 1px solid #eef1f6;
}

.tz-sp-sheet-ico {
    display: flex;
    color: #94a3b8;
    padding: 0 4px;
}

.tz-sp-sheet-ico svg,
.tz-sp-sheet-close svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
}

.tz-sp-sheet-bar input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 16px !important;
}

.tz-sp-sheet-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: #f1f5f9;
    color: #475569;
}

.tz-sp.tz-sp-inline {
    position: static;
    flex: 1 1 auto;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation: none;
}

/* ---- language menu ---- */
.tz-lang {
    position: relative;
}

.tz-lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    min-width: 40px;
    padding: 0 10px;
    border: 0;
    border-radius: 12px;
    background: #f3f6f9;
    color: #64748b;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.tz-lang-btn:hover,
.tz-lang-btn[aria-expanded="true"] {
    background: rgba(var(--tz-p-rgb), .1);
    color: var(--tz-p-dark);
}

.tz-lang-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.tz-lang-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1300;
    min-width: 150px;
    padding: 6px;
    border: 1px solid #e8ecf3;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 22px 48px -22px rgba(15, 23, 42, .45);
}

html:not([dir="rtl"]) .tz-lang-list {
    left: auto;
    right: 0;
}

.tz-lang-list[hidden] {
    display: none;
}

.tz-lang-list a,
.tz-lang-list a:hover {
    display: block;
    padding: 8px 12px;
    border-radius: 9px;
    color: #334155 !important;
    font-size: 13px;
    text-align: start;
    text-decoration: none !important;
    border: 0 !important;
}

.tz-lang-list a:hover {
    background: #f1f5f9;
}

.tz-lang-list a.is-on {
    background: #e6f6f9;
    color: var(--tz-p-dark) !important;
}

.tz-lang-list a.is-on::after {
    content: "\2713";
    float: inline-end;
}

html.tz-shell header.coodiv-header ul.ml-auto > li.tz-lang-li {
    display: flex !important;
    align-items: center;
}

.tz-lang-mob {
    display: none;
}

@media (max-width: 991.98px) {
    .tz-lang-mob {
        display: block;
    }

    .tz-lang-mob .tz-lang-btn {
        width: 38px;
        min-width: 0;
        height: 38px;
        padding: 0;
        border-radius: 13px;
        background: transparent;
        color: #475569;
    }

    .tz-lang-mob .tz-lang-code {
        display: none;
    }

    .tz-lang-mob .tz-lang-list {
        position: fixed;
        top: calc(60px + var(--tz-sat, 0px));
        left: 12px;
        right: auto;
    }

    html:not([dir="rtl"]) .tz-lang-mob .tz-lang-list {
        left: auto;
        right: 12px;
    }

    /* app bar: search, language, cart (the avatar lives in the menu footer) */
    .tz-ab-actions > a[href*="action=details"] {
        display: none !important;
    }
}

/* ---- page loader: blurred content + animated server card ---- */
.tz-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.96);
    transition: opacity .2s, transform .2s, visibility .2s;
}

html.tz-navigating .tz-loader {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

html.tz-navigating .page-wrapper {
    filter: blur(5px) saturate(.9);
    opacity: .55 !important;
    transition: filter .2s, opacity .2s;
}

.tz-ld-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 26px 16px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 24px;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 30px 60px -30px rgba(4, 60, 80, .55);
}

.tz-ld-card svg {
    width: 96px;
    height: 96px;
}

.tz-ld-card span {
    font-size: 12.5px;
    color: #475569;
}

.tz-ld-ring {
    stroke: #12b5c9;
    transform-origin: 60px 60px;
    animation: tz-ld-spin 1.1s linear infinite;
}

.tz-ld-rack rect {
    fill: #e6f6f9;
    stroke: #0a86a8;
    stroke-width: 2;
}

.tz-ld-leds circle {
    fill: #0a86a8;
    animation: tz-ld-led 1s ease-in-out infinite;
}

.tz-ld-leds circle:nth-child(2) { animation-delay: .2s; }
.tz-ld-leds circle:nth-child(3) { animation-delay: .4s; }

.tz-ld-bars path {
    fill: none;
    stroke: #7cc9d8;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 30;
    animation: tz-ld-bars 1.2s ease-in-out infinite alternate;
}

.tz-ld-bars path:nth-child(2) { animation-delay: .25s; }
.tz-ld-bars path:nth-child(3) { animation-delay: .5s; }

@keyframes tz-ld-spin {
    to { transform: rotate(360deg); }
}

@keyframes tz-ld-led {
    0%, 100% { fill: #0a86a8; }
    50% { fill: #22e3a5; }
}

@keyframes tz-ld-bars {
    from { stroke-dashoffset: 22; }
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tz-ld-ring,
    .tz-ld-leds circle,
    .tz-ld-bars path,
    .tz-sp,
    .tz-sp-sheet {
        animation: none !important;
    }
}

/* header styles must not reach into the results panel */
.tz-sp,
.tz-sp * {
    line-height: 1.5 !important;
    letter-spacing: normal !important;
}

.tz-sp .tz-sp-group,
.tz-sp .tz-sp-gh {
    margin: 0 !important;
}

.tz-sp .tz-sp-item {
    height: auto !important;
    min-height: 0 !important;
    margin: 1px 0 !important;
    float: none !important;
}

.tz-sp .tz-sp-pill {
    display: inline-block !important;
    align-self: center !important;
    height: auto !important;
    margin: 0 !important;
    white-space: nowrap;
}

.tz-sp .tz-sp-txt b,
.tz-sp .tz-sp-txt small {
    display: block !important;
    margin: 0 !important;
}

/* ---- language menu: same tile as cart/bell, compact list (header link styles reset) ---- */
html.tz-shell header.coodiv-header ul.ml-auto > li.tz-lang-li {
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.tz-shell header.coodiv-header .tz-lang-desk .tz-lang-btn {
    height: 40px !important;
    min-width: 40px;
    margin: 0 !important;
    padding: 0 11px !important;
    border-radius: 12px !important;
    line-height: 1 !important;
    vertical-align: middle;
}

.tz-lang-btn .tz-lang-code {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.tz-lang-list,
.tz-lang-list * {
    line-height: 1.5 !important;
    letter-spacing: normal !important;
}

.tz-lang .tz-lang-list a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: auto !important;
    min-height: 0 !important;
    margin: 1px 0 !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    background: transparent;
}

.tz-lang .tz-lang-list a.is-on::after {
    float: none;
    font-size: 12px;
}

.tz-lang .tz-lang-list a:hover {
    background: #f4f7fa !important;
}

.tz-lang .tz-lang-list a.is-on {
    background: #e6f6f9 !important;
}

.tz-lang .tz-lang-list a[lang="fa"],
.tz-lang .tz-lang-list a[lang="ar"] {
    font-family: iransans_bold, iransans, Tahoma, sans-serif !important;
}

/* Latin language names: the panel's Persian font has no ü/ç glyphs */
.tz-lang .tz-lang-list a[lang="en"],
.tz-lang .tz-lang-list a[lang="de"],
.tz-lang .tz-lang-list a[lang="tr"],
.tz-lang-btn .tz-lang-code {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

.tz-lang .tz-lang-list a[lang="en"],
.tz-lang .tz-lang-list a[lang="de"],
.tz-lang .tz-lang-list a[lang="tr"] {
    font-weight: 600 !important;
}

/* loader: no card of its own, just the animation over a strongly blurred page */
.tz-ld-card {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

.tz-ld-card svg {
    width: 110px;
    height: 110px;
    filter: drop-shadow(0 10px 22px rgba(4, 80, 105, .25));
}

.tz-ld-card span {
    color: #0a5f73 !important;
    font-size: 13px !important;
}

html.tz-navigating .page-wrapper {
    filter: blur(12px) saturate(.85) !important;
    opacity: .45 !important;
}

/* same style + weight as each theme face, or the browser picks this face for all text.
   IRANSans has no accented Latin letters (ö ü ä ß ş ğ ç ı …): borrow them from Jost, per glyph,
   under the theme's own font names - nothing else changes, icon fonts are untouched */
@font-face { font-family: "iransans_bold"; src: url("/templates/coowhm-plus/fonts/jost/Jost-VariableFont_wght.woff2") format("woff2"); font-style: normal; font-weight: bold; unicode-range: U+00C0-024F, U+1E00-1EFF; font-display: swap; }
@font-face { font-family: "iransans_medium"; src: url("/templates/coowhm-plus/fonts/jost/Jost-VariableFont_wght.woff2") format("woff2"); font-style: normal; font-weight: 500; unicode-range: U+00C0-024F, U+1E00-1EFF; font-display: swap; }
@font-face { font-family: "iransans"; src: url("/templates/coowhm-plus/fonts/jost/Jost-VariableFont_wght.woff2") format("woff2"); font-style: normal; font-weight: normal; unicode-range: U+00C0-024F, U+1E00-1EFF; font-display: swap; }
@font-face { font-family: "iransans_light"; src: url("/templates/coowhm-plus/fonts/jost/Jost-VariableFont_wght.woff2") format("woff2"); font-style: normal; font-weight: 300; unicode-range: U+00C0-024F, U+1E00-1EFF; font-display: swap; }

/* other languages: the page stays behind the loader until its text is translated */
/* one loader for page load + translation; the theme's own loader is not used on portal pages */
html.tz-shell #loading-bg {
    display: none !important;
}

html.tz-booting .page-wrapper,
html.tz-booting .tz-ab-text,
html.tz-booting header.coodiv-header .main-search {
    visibility: hidden !important;
}

/* centre of the content area before portal.js has measured it */
@media (min-width: 992px) {
    html.tz-booting:not([dir="rtl"]) .tz-loader {
        left: calc(50% + var(--tz-side, 264px) / 2);
    }

    html[dir="rtl"].tz-booting .tz-loader {
        left: calc(50% - var(--tz-side, 264px) / 2);
    }
}

html.tz-booting .tz-loader {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* while a swapped page is being translated the old blur stays; new text never shows untranslated */
html.tz-navigating .page-wrapper {
    pointer-events: none;
}

/* page title tagline: wraps inside the box (2 lines max) instead of running out of it */
html.tz-shell #main-body .header-lined h1 {
    flex-wrap: wrap;
    min-width: 0;
    white-space: normal !important;
}

html.tz-shell #main-body .header-lined h1 small {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    flex-basis: 100%;
    max-width: 100%;
    overflow: hidden;
    white-space: normal !important;
    line-height: 1.7 !important;
}

html.tz-shell #main-body .header-lined {
    min-width: 0;
    overflow: hidden;
}

html.tz-shell #main-body .header-lined > h1 {
    flex: 1 1 auto;
}