@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

/* UX Modern client portal
 * This file only changes presentation. Blesta's existing Bootstrap markup,
 * forms, permissions, CSRF protection, and widgets remain the source of truth.
 */
:root {
    --ux-sidebar: #20252d;
    --ux-sidebar-soft: #2a3039;
    --ux-topbar: #4da3c4;
    --ux-topbar-dark: #3f91b2;
    --ux-page: #f4f6f8;
    --ux-panel: #ffffff;
    --ux-border: #e6eaee;
    --ux-text: #333a43;
    --ux-muted: #87909a;
    --ux-radius: 4px;
    --ux-shadow: 0 5px 18px rgba(34, 45, 56, .06);
}

html, body { min-height: 100%; }
body {
    background: var(--ux-page);
    color: var(--ux-text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
}

a, a:hover, a:focus { color: var(--ux-topbar); }
a:focus, button:focus, .btn:focus, .form-control:focus {
    outline: 3px solid rgba(77, 163, 196, .28);
    outline-offset: 2px;
}

/* The header becomes the fixed brand rail used by the reference layout. */
.header {
    position: fixed;
    z-index: 1030;
    inset: 0 auto auto 0;
    width: 250px;
    height: 66px;
    padding: 0;
    background: var(--ux-sidebar);
    border: 0;
}
.header .container-md { height: 66px; padding: 0 20px; }
.header .logo { display: flex; align-items: center; height: 66px; }
.header .logo img { max-width: 190px; max-height: 40px; object-fit: contain; }
.header .top-nav { display: none; }

/* The existing navbar is intentionally kept so all server-provided links and
 * active states continue to work, but it is presented as a navigation rail. */
.nav-content {
    position: fixed;
    z-index: 1020;
    inset: 66px auto 0 0;
    width: 250px;
    overflow-y: auto;
    background: var(--ux-sidebar);
    box-shadow: 8px 0 24px rgba(17, 24, 39, .08);
}
.nav-content nav.navbar {
    /* Blesta's base stylesheet pins this navbar to the viewport; UX Modern
     * owns the rail position so the menu cannot spill into the workspace. */
    box-sizing: border-box;
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    min-height: 100%;
    padding: 20px 0 28px;
    background: transparent;
}
.nav-content nav.navbar .container-md {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    padding: 0;
}
.nav-content .navbar-collapse { width: 100%; }
.nav-content nav.navbar .container-md {
    display: flex !important;
    flex-direction: column !important;
    /* The navbar has 20px top and 28px bottom spacing, so subtract that
     * spacing from the rail height and keep account actions above the footer. */
    min-height: calc(100vh - 66px - 48px);
    box-sizing: border-box;
}
.nav-content .navbar-nav { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
.nav-content .navbar-toggler { display: none; }
.nav-content .navbar-nav + .navbar-nav {
    /* Keep account actions available without competing with the primary menu. */
    display: block;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.nav-content .navbar-nav:before {
    display: block;
    padding: 0 16px 10px;
    color: #818a95;
    content: "MENU";
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
}
.nav-content .nav-item { width: 100%; }
.nav-content nav.navbar .navbar-nav > li > a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 11px 18px;
    color: #b7bec7 !important;
    border-left: 3px solid transparent;
    font-weight: 500;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.nav-content nav.navbar .navbar-nav > li > a i { width: 25px; color: #84909c; }
.nav-content nav.navbar .navbar-nav > li > a:hover,
.nav-content nav.navbar .navbar-nav > li.active > a {
    color: #fff !important;
    background: var(--ux-sidebar-soft);
    border-left-color: var(--ux-topbar);
}
.nav-content nav.navbar .navbar-nav > li.active > a i,
.nav-content nav.navbar .navbar-nav > li > a:hover i { color: var(--ux-topbar); }
.nav-content .dropdown-menu { position: static; margin: 0; border: 0; border-radius: 0; background: #181c22; }
.nav-content .dropdown-menu .dropdown-item { padding: 9px 18px 9px 46px; color: #aeb6bf; }
.nav-content .dropdown-menu .dropdown-item:hover { background: var(--ux-sidebar-soft); color: #fff; }

.title {
    height: 66px;
    margin-left: 250px;
    width: calc(100% - 250px);
    padding: 0;
    background: var(--ux-topbar);
    border: 0;
}
.title .container-md { display: flex; align-items: center; height: 66px; }
.title h3 { margin: 0; color: #fff; font-size: 20px; font-weight: 500; }

/* Main workspace starts after the navigation rail. */
.title + .container-md {
    width: calc(100% - 250px);
    max-width: none;
    margin-left: 250px;
    padding: 32px 30px 10px;
}
.title + .container-md > .row { margin: 0; }
.title + .container-md > .row > [class*="col-"] { padding-right: 12px; padding-left: 12px; }
.right_content { min-width: 0; }

/* Keep client details in a wider left column while the main page content stays
 * on the right. This only changes presentation; the server-rendered fields,
 * links, permissions, and form behavior remain untouched. */
@media (min-width: 768px) {
    .title + .container-md > .row { display: flex; align-items: flex-start; }
    .title + .container-md > .row > #my-info {
        order: 1;
        flex: 0 0 330px;
        width: 330px;
        max-width: 330px;
    }
    .title + .container-md > .row > .right_content {
        order: 2;
        flex: 1 1 auto;
        width: auto;
        max-width: calc(100% - 330px);
    }
}

.card-blesta, .panel, .list-group, .modal-content, .table-responsive {
    background: var(--ux-panel);
    border: 1px solid var(--ux-border);
    border-radius: var(--ux-radius);
    box-shadow: var(--ux-shadow);
}
.card-blesta > .card-header, .panel-heading {
    padding: 16px 20px;
    color: var(--ux-text);
    background: #fff;
    border-bottom: 1px solid var(--ux-border);
    font-weight: 600;
}
.card-blesta > .card-body, .panel-body { padding: 20px; }
.table { color: var(--ux-text); }
.table thead th { color: #69737e; background: #f8fafb; border-top: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.table td, .table th { vertical-align: middle; border-color: var(--ux-border); }
.table-hover tbody tr:hover { background: #f7fbfc; }
.btn { border-radius: var(--ux-radius); font-weight: 600; }
.btn-primary, .bg-primary { background-color: var(--ux-topbar) !important; border-color: var(--ux-topbar) !important; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--ux-topbar-dark) !important; border-color: var(--ux-topbar-dark) !important; }
.form-control, .custom-select { border-color: #dfe5ea; border-radius: var(--ux-radius); }
.alert { border: 0; border-radius: var(--ux-radius); box-shadow: var(--ux-shadow); }
.footer { color: var(--ux-muted); }

/* Shared form rhythm: labels lead each field, controls have a predictable
 * touch height, and related fields remain visually grouped. */
.form-group { margin-bottom: 18px; }
.form-group > label,
.form-check-label {
    color: #4f5965;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 7px;
}
.form-control,
.custom-select,
select.form-control {
    min-height: 42px;
    padding: 9px 12px;
    color: var(--ux-text);
    background-color: #fff;
}
textarea.form-control { min-height: 110px; }
input[type="file"].form-control { height: auto; min-height: 42px; padding: 7px 9px; }
.form-control::placeholder { color: #9aa3ad; opacity: 1; }
.form-control:focus,
.custom-select:focus {
    border-color: var(--ux-topbar);
    box-shadow: 0 0 0 .2rem rgba(77, 163, 196, .14);
}
.card-blesta .nav-tabs,
.panel .nav-tabs {
    gap: 4px;
    padding: 0 4px;
    border-bottom: 1px solid var(--ux-border);
}
.card-blesta .nav-tabs .nav-link,
.panel .nav-tabs li a {
    margin: 0;
    padding: 11px 14px;
    color: #727d88;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    font-weight: 600;
}
.card-blesta .nav-tabs .nav-link:hover,
.panel .nav-tabs li a:hover,
.card-blesta .nav-tabs .nav-link.active,
.panel .nav-tabs li.active a {
    color: var(--ux-text);
    background: #fff;
    border-color: var(--ux-border);
    border-bottom-color: #fff;
}
.card-blesta form > .row:last-child,
.panel form > .row:last-child { margin-top: 8px; }
.card-blesta form .btn,
.panel form .btn { min-height: 40px; padding: 8px 16px; }

/* UX Modern uses the compact title bar as the page context, so the duplicate
 * breadcrumb trail is hidden without changing the underlying route markup. */
.breadcrumbs,
.breadcrumb { display: none !important; }

/* The compact topbar already identifies the active area, so remove the
 * duplicate blue page-title strip and let the workspace start beneath it. */
.title { display: none !important; }

/* Make the dashboard cards read as a compact, colorful overview. */
.cards > [class*="col-"] { margin-bottom: 24px; }
.cards .card { min-height: 128px; border: 0; border-radius: var(--ux-radius); box-shadow: var(--ux-shadow); }
.cards .card-content { padding: 25px 30px; }
.cards .card-value { font-size: 34px; font-weight: 700; line-height: 1; }
.cards .card-label { margin-top: 10px; font-size: 14px; }

@media (max-width: 767.98px) {
    .header { position: relative; width: 100%; height: 58px; }
    .header .container-md, .header .logo { height: 58px; }
    .header .container-md { padding: 0 16px; }
    .header .logo img { max-height: 34px; max-width: 160px; }
    .nav-content { position: relative; inset: auto; width: 100%; overflow: visible; }
    .nav-content nav.navbar { min-height: 0; padding: 0; }
    .nav-content nav.navbar .container-md { width: 100% !important; }
    .nav-content nav.navbar .container-md { min-height: 0; }
    .nav-content .navbar-nav { flex-direction: column; }
    .nav-content .navbar-toggler { display: block; margin: 10px 16px; }
    .nav-content .navbar-collapse { background: var(--ux-sidebar); }
    .nav-content .navbar-nav:before { display: none; }
    .nav-content .nav-item { width: auto; }
    .nav-content .navbar-nav + .navbar-nav { margin-top: 0; }
    .nav-content nav.navbar .navbar-nav > li > a { border-left: 0; border-bottom: 2px solid transparent; }
    .nav-content nav.navbar .navbar-nav > li.active > a { border-bottom-color: var(--ux-topbar); }
    .title { width: 100%; height: 62px; margin-left: 0; }
    .title .container-md { height: 62px; padding: 0 16px; }
    .title h3 { font-size: 18px; }
    .title + .container-md { width: 100%; margin-left: 0; padding: 20px 8px 8px; }
    .title + .container-md > .row > [class*="col-"] { padding-right: 7px; padding-left: 7px; }
    .cards .card-content { padding: 20px; }
}

/* -------------------------------------------------------------------------
 * Reference-matched client sidebar
 *
 * The expanded rail mirrors the supplied SwiftModders navigation proportions.
 * The compact state remains functional and preserves the customer's choice.
 * ---------------------------------------------------------------------- */
@media (min-width: 992px) {
    body:not([class*="client-client_login"]) {
        --ux-workspace-rail: 280px;
        --ux-workspace-bar: 58px;
    }

    body:not([class*="client-client_login"]) .header {
        height: 92px !important;
        background: #202020 !important;
        transition: width .2s ease;
    }
    body:not([class*="client-client_login"]) .header .container-md {
        height: 92px !important;
        padding: 0 20px !important;
    }
    body:not([class*="client-client_login"]) .header .logo,
    body:not([class*="client-client_login"]) .header .logo a {
        min-width: 0;
        height: 92px !important;
    }
    body:not([class*="client-client_login"]) .header .logo img {
        max-width: 205px !important;
        max-height: 48px !important;
    }
    body:not([class*="client-client_login"]) .header .badge {
        top: 68px;
        left: 20px;
        max-width: 205px;
    }
    body:not([class*="client-client_login"]) .ux-sidebar-toggle {
        position: absolute;
        z-index: 2;
        top: 31px;
        right: -14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        padding: 0;
        border: 2px solid #f5f7f9;
        border-radius: 50%;
        background: #303030;
        color: #bcbcbc;
        box-shadow: 0 2px 7px rgba(0, 0, 0, .18);
        cursor: pointer;
    }
    body:not([class*="client-client_login"]) .ux-sidebar-toggle:hover,
    body:not([class*="client-client_login"]) .ux-sidebar-toggle:focus-visible {
        background: #3495ae;
        color: #fff;
        outline: 0;
    }

    body:not([class*="client-client_login"]) .nav-content {
        inset: 92px auto 0 0 !important;
        background: #2b2b2b !important;
        transition: width .2s ease;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar {
        padding: 0 0 34px !important;
    }
    body:not([class*="client-client_login"]) .nav-content .navbar-nav:not(.ux-account-nav)::before {
        display: none !important;
        content: none !important;
    }
    body:not([class*="client-client_login"]) .ux-sidebar-section-title {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 54px;
        padding: 0 22px;
        color: #898989;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .04em;
        line-height: 1;
        text-transform: uppercase;
    }
    body:not([class*="client-client_login"]) .ux-sidebar-menu-title {
        background: #303030;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a {
        position: relative;
        min-height: 48px;
        padding: 11px 22px 11px 32px !important;
        border: 0 !important;
        background: transparent !important;
        color: #c4c4c4 !important;
        font-size: 17px !important;
        font-weight: 300 !important;
        line-height: 26px;
        transition: background-color .15s ease, color .15s ease;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a i {
        flex: 0 0 34px;
        width: 34px !important;
        color: #777 !important;
        font-size: 20px;
        text-align: left;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li.active > a,
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a:hover,
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a:focus {
        background: #202020 !important;
        color: #f0f0f0 !important;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li.active > a i,
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a:hover i,
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a:focus i {
        color: #3495ae !important;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li.active > a i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 24px;
        width: 24px !important;
        height: 24px;
        margin-right: 10px;
        border-radius: 50%;
        background: #287f96;
        color: #d9f1f5 !important;
        font-size: 12px;
    }
    body:not([class*="client-client_login"]) .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-toggle::after {
        position: absolute;
        top: 50%;
        right: 23px;
        margin: -3px 0 0;
    }
    body:not([class*="client-client_login"]) .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-menu {
        background: #232323;
    }
    body:not([class*="client-client_login"]) .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-item {
        padding: 10px 20px 10px 66px !important;
        color: #bdbdbd !important;
        font-size: 14px;
    }

    body:not([class*="client-client_login"]) .ux-sidebar-settings {
        width: 100%;
        margin-top: 48px;
    }
    body:not([class*="client-client_login"]) .ux-sidebar-settings .ux-sidebar-section-title {
        min-height: 43px;
        padding-left: 22px;
    }
    body:not([class*="client-client_login"]) .ux-lights-toggle {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 58px;
        padding: 7px 22px;
        border: 0;
        background: transparent;
        color: #c4c4c4;
        cursor: pointer;
    }
    body:not([class*="client-client_login"]) .ux-lights-toggle:focus-visible {
        outline: 2px solid #3495ae;
        outline-offset: -3px;
    }
    body:not([class*="client-client_login"]) .ux-switch-track {
        position: relative;
        flex: 0 0 57px;
        width: 57px;
        height: 30px;
        border-radius: 18px;
        background: #9bc62b;
        transition: background-color .15s ease;
    }
    body:not([class*="client-client_login"]) .ux-switch-thumb {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .16);
        transition: transform .15s ease;
    }
    body:not([class*="client-client_login"]) .ux-switch-label {
        margin-left: 13px;
        font-size: 17px;
        font-weight: 300;
    }
    body:not([class*="client-client_login"]) .ux-lights-toggle[aria-checked="false"] .ux-switch-track {
        background: #686868;
    }
    body:not([class*="client-client_login"]) .ux-lights-toggle[aria-checked="false"] .ux-switch-thumb {
        transform: translateX(-27px);
    }

    /* Compact mode keeps navigation functional through icon labels and flyout menus. */
    body:not([class*="client-client_login"]).ux-sidebar-collapsed {
        --ux-workspace-rail: 82px;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .header .container-md {
        justify-content: center;
        padding: 0 14px !important;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .header .logo {
        width: 42px;
        overflow: hidden;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .header .logo a {
        justify-content: flex-start;
        width: 190px;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .header .logo img {
        width: 190px !important;
        max-width: none !important;
        object-fit: contain;
        object-position: left center;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .header .badge {
        display: none;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .ux-sidebar-section-title,
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .ux-switch-label {
        justify-content: center;
        overflow: hidden;
        padding-right: 0;
        padding-left: 0;
        color: transparent;
        font-size: 0;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .ux-sidebar-section-title::before {
        color: #777;
        content: "\2022\2022\2022";
        font-size: 10px;
        letter-spacing: 3px;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content {
        overflow: visible;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li {
        position: relative;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a {
        justify-content: center;
        padding: 11px 0 !important;
        color: transparent !important;
        font-size: 0 !important;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a i {
        flex-basis: auto;
        width: auto !important;
        font-size: 21px;
        text-align: center;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a::before {
        position: absolute;
        z-index: 1080;
        top: 50%;
        left: calc(100% + 10px);
        display: none;
        min-width: max-content;
        padding: 7px 10px;
        border-radius: 3px;
        background: #202020;
        color: #fff;
        content: attr(data-sidebar-label);
        font-size: 13px;
        line-height: 1;
        transform: translateY(-50%);
        box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a:hover::before,
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a:focus::before {
        display: block;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-toggle::after {
        display: none;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-menu {
        position: absolute !important;
        top: 0 !important;
        left: 82px !important;
        width: 220px;
        padding: 6px 0;
        box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-item {
        padding: 10px 16px !important;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .ux-sidebar-settings {
        margin-top: 38px;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .ux-lights-toggle {
        justify-content: center;
        padding: 7px 0;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .ux-switch-track {
        flex-basis: 43px;
        width: 43px;
        height: 24px;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .ux-switch-thumb {
        top: 3px;
        right: 3px;
        width: 18px;
        height: 18px;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .ux-lights-toggle[aria-checked="false"] .ux-switch-thumb {
        transform: translateX(-19px);
    }

    body:not([class*="client-client_login"]).ux-lights-off {
        background: #252a30;
        color: #d8dde2;
    }
    body:not([class*="client-client_login"]).ux-lights-off .title + .container-md {
        background: #252a30;
    }
    body:not([class*="client-client_login"]).ux-lights-off .card-blesta,
    body:not([class*="client-client_login"]).ux-lights-off .panel,
    body:not([class*="client-client_login"]).ux-lights-off .list-group,
    body:not([class*="client-client_login"]).ux-lights-off .table-responsive {
        border-color: #3d444c !important;
        background: #30363d;
        color: #e0e4e8;
    }
}

@media (max-width: 991.98px) {
    body:not([class*="client-client_login"]) .ux-sidebar-toggle {
        display: none !important;
    }
    body:not([class*="client-client_login"]) .ux-sidebar-section-title {
        padding: 13px 12px 8px;
        color: #84909b;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
    }
    body:not([class*="client-client_login"]) .ux-sidebar-settings {
        margin-top: 8px;
    }
    body:not([class*="client-client_login"]) .ux-lights-toggle {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 10px 12px;
        border: 0;
        background: transparent;
        color: #d6dde4;
    }
    body:not([class*="client-client_login"]) .ux-switch-track {
        position: relative;
        width: 44px;
        height: 24px;
        border-radius: 14px;
        background: #9bc62b;
    }
    body:not([class*="client-client_login"]) .ux-switch-thumb {
        position: absolute;
        top: 3px;
        right: 3px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: #fff;
    }
    body:not([class*="client-client_login"]) .ux-switch-label {
        margin-left: 11px;
    }
}

/* Exact desktop typography and utility-bar owner.
 * These values were measured from the selected SwiftModders reference in
 * Chrome, so keep this block last when refining the signed-in workspace. */
@media (min-width: 992px) {
    body:not([class*="client-client_login"]) {
        --ux-workspace-bar: 65px !important;
        font-family: Montserrat, sans-serif !important;
        font-size: 16px !important;
        font-weight: 300 !important;
        line-height: 24px !important;
    }
    body:not([class*="client-client_login"]) .header,
    body:not([class*="client-client_login"]) .header .container-md,
    body:not([class*="client-client_login"]) .header .logo,
    body:not([class*="client-client_login"]) .header .logo a {
        height: 65px !important;
    }
    body:not([class*="client-client_login"]) .header .container-md {
        padding: 0 15px !important;
    }
    body:not([class*="client-client_login"]) .header .logo img {
        max-width: 205px !important;
        max-height: 44px !important;
    }
    body:not([class*="client-client_login"]) .header .badge {
        top: 43px !important;
        left: 15px !important;
        z-index: 5 !important;
        max-width: 220px !important;
        font-family: Montserrat, sans-serif !important;
        font-size: 9px !important;
        line-height: 14px !important;
    }
    body:not([class*="client-client_login"]) .nav-content {
        inset: 65px auto 0 0 !important;
    }
    body:not([class*="client-client_login"]) .ux-sidebar-section-title {
        min-height: 58px !important;
        padding: 0 15px !important;
        font-family: Montserrat, sans-serif !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a {
        min-height: 40px !important;
        padding: 8px 16px !important;
        font-family: Montserrat, sans-serif !important;
        font-size: 16px !important;
        font-weight: 300 !important;
        line-height: 24px !important;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a i {
        flex: 0 0 30px !important;
        width: 30px !important;
        height: 16px !important;
        margin-right: 4px !important;
        font-size: 16px !important;
        line-height: 16px !important;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li.active > a i {
        border-radius: 0 !important;
        background: transparent !important;
        color: #2ca1c3 !important;
        font-size: 16px !important;
    }
    body:not([class*="client-client_login"]) .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-item,
    body:not([class*="client-client_login"]) .ux-switch-label {
        font-family: Montserrat, sans-serif !important;
        font-weight: 300 !important;
    }
    body:not([class*="client-client_login"]) .ux-sidebar-toggle {
        position: fixed !important;
        z-index: 1060 !important;
        top: 10.5px !important;
        right: auto !important;
        left: calc(var(--ux-workspace-rail) + 30px) !important;
        width: 44px !important;
        height: 44px !important;
        border: 0 !important;
        border-radius: 2px !important;
        background: #2790ae !important;
        color: #fff !important;
        font-size: 18px !important;
        box-shadow: none !important;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .ux-sidebar-toggle {
        left: calc(var(--ux-workspace-rail) + 30px) !important;
    }
    body:not([class*="client-client_login"]) .title {
        position: fixed !important;
        z-index: 1040 !important;
        inset: 0 0 auto var(--ux-workspace-rail) !important;
        height: 65px !important;
        background: #2ca1c3 !important;
    }
    body:not([class*="client-client_login"]) .title .ux-topbar-shell {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        max-width: none !important;
        height: 65px !important;
        padding: 0 30px 0 88px !important;
    }
    body:not([class*="client-client_login"]) .ux-topbar-date {
        color: rgba(255, 255, 255, .7) !important;
        font-family: Montserrat, sans-serif !important;
        font-size: 14px !important;
        font-weight: 300 !important;
        line-height: 21px !important;
    }
    body:not([class*="client-client_login"]) .ux-topbar-cart {
        position: fixed !important;
        z-index: 1060 !important;
        top: 10.5px !important;
        right: 106px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        color: #fff !important;
        font-size: 18px !important;
    }
    body:not([class*="client-client_login"]) .header .top-nav {
        position: fixed !important;
        z-index: 1060 !important;
        top: 10.5px !important;
        right: 164px !important;
        display: block !important;
        height: 44px !important;
        font-family: Montserrat, sans-serif !important;
        font-size: 14px !important;
        font-weight: 300 !important;
        line-height: 21px !important;
    }
    body:not([class*="client-client_login"]) .header .top-nav > ul,
    body:not([class*="client-client_login"]) .header .top-nav > ul > li,
    body:not([class*="client-client_login"]) .header .top-nav > ul > li > a {
        height: 44px !important;
    }
    body:not([class*="client-client_login"]) .header .top-nav > ul > li > a {
        display: flex !important;
        align-items: center !important;
        padding: 0 15px !important;
        color: rgba(255, 255, 255, .7) !important;
        font-family: Montserrat, sans-serif !important;
        font-size: 14px !important;
        font-weight: 300 !important;
        line-height: 21px !important;
    }
    body:not([class*="client-client_login"]) .nav-content .ux-account-nav {
        top: 10.5px !important;
        right: 30px !important;
        z-index: 1060 !important;
        width: 61px !important;
        height: 44px !important;
    }
    body:not([class*="client-client_login"]) .nav-content .ux-account-nav .nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 61px !important;
        height: 44px !important;
        padding: 0 !important;
        color: #fff !important;
        font-family: Montserrat, sans-serif !important;
        font-size: 16px !important;
        font-weight: 300 !important;
        line-height: 24px !important;
    }
    body:not([class*="client-client_login"]) .ux-account-trigger-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 2px !important;
        background: #1d64c8 !important;
        font-size: 24px !important;
    }
    body:not([class*="client-client_login"]) .nav-content .ux-account-nav .dropdown-toggle::after {
        margin-left: 5px !important;
        border-top-color: #fff !important;
    }
    body:not([class*="client-client_login"]) .nav-content .ux-account-nav .dropdown-menu {
        top: 49px !important;
    }
    body:not([class*="client-client_login"]) .ux-page-title {
        width: calc(100% - var(--ux-workspace-rail) - 250px) !important;
        min-height: 104px !important;
        margin: 65px 250px 0 var(--ux-workspace-rail) !important;
        background: #fff !important;
    }
    body:not([class*="client-client_login"]) .ux-page-title .container-md {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 104px !important;
        padding: 0 30px !important;
    }
    body:not([class*="client-client_login"]) .ux-page-title h3 {
        margin: 0 !important;
        color: #30343b !important;
        font-family: Montserrat, sans-serif !important;
        font-size: 32px !important;
        font-weight: 300 !important;
        line-height: 48px !important;
    }
    body:not([class*="client-client_login"]) .ux-page-title + .container-md {
        width: calc(100% - var(--ux-workspace-rail)) !important;
        max-width: none !important;
        min-height: calc(100vh - 169px) !important;
        margin: 0 0 0 var(--ux-workspace-rail) !important;
        padding: 28px 28px 44px !important;
    }
}

@media (max-width: 991.98px) {
    body:not([class*="client-client_login"]) .ux-topbar-date,
    body:not([class*="client-client_login"]) .ux-topbar-cart {
        display: none !important;
    }
    body:not([class*="client-client_login"]) .ux-page-title {
        background: #fff !important;
    }
    body:not([class*="client-client_login"]) .ux-page-title .container-md {
        padding: 18px 16px !important;
    }
    body:not([class*="client-client_login"]) .ux-page-title h3 {
        margin: 0 !important;
        font-family: Montserrat, sans-serif !important;
        font-size: 24px !important;
        font-weight: 300 !important;
    }
}

/* UX Modern keeps the original Blesta navigation placement: the brand is
 * above a full-width horizontal menu, leaving the workspace unobstructed. */
@media (min-width: 768px) {
    .header {
        position: relative;
        inset: auto;
        width: 100%;
        height: 66px;
        background: var(--ux-sidebar);
    }
    .header .container-md {
        display: flex;
        align-items: center;
        width: 100%;
        max-width: none;
        padding: 0 30px;
    }
    .header .logo { height: 66px; }
    .header .top-nav { display: block; margin-left: auto; }

    .nav-content {
        position: relative;
        inset: auto;
        width: 100%;
        overflow: visible;
        background: var(--ux-sidebar-soft);
        box-shadow: 0 2px 12px rgba(17, 24, 39, .08);
    }
    .nav-content nav.navbar {
        min-height: 42px;
        font-size: 14px;
        padding: 0;
    }
    .nav-content nav.navbar .container-md {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        min-height: 42px;
        max-width: none;
        padding: 0 24px;
    }
    .nav-content .navbar-collapse {
        display: flex !important;
        align-items: stretch;
        width: 100%;
    }
    .nav-content .navbar-nav {
        flex-direction: row;
        align-items: stretch;
        width: auto;
    }
    .nav-content .navbar-nav + .navbar-nav {
        margin-top: 0;
        margin-left: auto;
        padding-top: 0;
        border-top: 0;
    }
    .nav-content .navbar-nav:before { display: none; }
    .nav-content .navbar-toggler { display: none; }
    .nav-content .nav-item { width: auto; }
    .nav-content nav.navbar .navbar-nav > li > a {
        min-height: 42px;
        padding: 11px 12px;
        border-left: 0;
        border-bottom: 2px solid transparent;
        line-height: 20px;
    }
    .nav-content nav.navbar .navbar-nav > li > a i {
        width: auto;
        margin-right: 6px;
    }
    .nav-content nav.navbar .navbar-nav > li > a .caret,
    .nav-content nav.navbar .navbar-nav > li > a b.caret {
        display: inline-block;
        margin-left: 6px;
    }
    /* Bootstrap draws dropdown arrows with ::after, so give those markers
     * the same breathing room as the legacy Blesta navigation. */
    .nav-content .dropdown-toggle::after {
        margin-left: 6px !important;
        vertical-align: .15em;
    }
    .nav-content nav.navbar .navbar-nav > li.active > a,
    .nav-content nav.navbar .navbar-nav > li > a:hover {
        border-bottom-color: var(--ux-topbar);
    }
    .nav-content .dropdown-menu {
        position: absolute;
        margin-top: 0;
        background: var(--ux-sidebar);
        box-shadow: 0 8px 20px rgba(17, 24, 39, .18);
        border-radius: var(--ux-radius);
        overflow: hidden;
    }
    .nav-content .dropdown-menu .dropdown-item { padding: 10px 18px; }
    /* Keep the account panel inside the topbar container instead of touching
     * the browser edge when the right-side account menu is opened. */
    .nav-content .navbar-nav + .navbar-nav .dropdown-menu {
        right: 24px;
        left: auto;
    }

    .title {
        width: 100%;
        height: 66px;
        margin-left: 0;
    }
    .title + .container-md {
        width: 100%;
        margin-left: 0;
        padding: 32px 30px 10px;
    }
}

/* Final auth-canvas overrides sit last so Bootstrap's legacy .row.login
 * sizing cannot reintroduce the narrow 1,040px shell. */
/* The important flags keep this final presentation stable even when the
 * earlier legacy-compatible auth rules are loaded in the same stylesheet. */
body[class*="client-client_login"] .auth-layout {
    display: block !important;
    width: min(100%, 760px) !important;
    margin: 0 auto !important;
    background: #fff !important;
}
body[class*="client-client_login"] .auth-pane {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    padding: 0 28px !important;
    align-items: center !important;
    justify-content: flex-start !important;
}
body[class*="client-client_login"] .auth-intro,
body[class*="client-client_login"] .auth-form {
    width: 100% !important;
    max-width: 700px !important;
}
body[class*="client-client_login"] .auth-visual { display: none !important; }
body[class*="client-client_login"] .row.login {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
}
body[class*="client-client_login"] .auth-layout {
    width: 100% !important;
    min-height: 100vh;
}
body[class*="client-client_login"] .auth-pane {
    flex: 0 0 38%;
    width: 38%;
    max-width: 620px;
    box-sizing: border-box;
}
@media (max-width: 767.98px) {
    body[class*="client-client_login"] .auth-pane {
        width: 100%;
        max-width: none;
    }
}

/* Final signed-in sidebar owner. Keep this at the end of the stylesheet so
 * older auth and workspace experiments cannot override the live sidebar. */
@media (min-width: 992px) {
    body:not([class*="client-client_login"]) {
        --ux-workspace-rail: 260px !important;
        --ux-workspace-bar: 58px !important;
        background: #f2f4f6 !important;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed {
        --ux-workspace-rail: 84px !important;
    }

    body:not([class*="client-client_login"]) .header {
        position: fixed !important;
        inset: 0 auto auto 0 !important;
        width: var(--ux-workspace-rail) !important;
        height: 96px !important;
        background: #202020 !important;
        box-shadow: none !important;
    }

    body:not([class*="client-client_login"]) .header .container-md,
    body:not([class*="client-client_login"]) .header .logo,
    body:not([class*="client-client_login"]) .header .logo a {
        height: 96px !important;
    }

    body:not([class*="client-client_login"]) .header .container-md {
        position: relative;
        align-items: center !important;
        max-width: none !important;
        padding: 0 18px !important;
    }

    body:not([class*="client-client_login"]) .header .logo img {
        max-width: 190px !important;
        max-height: 42px !important;
    }

    body:not([class*="client-client_login"]) .header .badge {
        top: 68px !important;
        left: 18px !important;
        max-width: 218px !important;
    }

    body:not([class*="client-client_login"]) .ux-sidebar-toggle {
        top: 33px !important;
        right: -15px !important;
        display: inline-flex !important;
        width: 30px !important;
        height: 30px !important;
        border: 2px solid #f2f4f6 !important;
        background: #303030 !important;
        color: #b9b9b9 !important;
    }

    body:not([class*="client-client_login"]) .ux-sidebar-toggle:hover,
    body:not([class*="client-client_login"]) .ux-sidebar-toggle:focus-visible {
        background: #3495ae !important;
        color: #fff !important;
        outline: 0 !important;
    }

    body:not([class*="client-client_login"]) .nav-content {
        position: fixed !important;
        inset: 96px auto 0 0 !important;
        width: var(--ux-workspace-rail) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: #2d2d2d !important;
        box-shadow: none !important;
    }

    body:not([class*="client-client_login"]) .nav-content nav.navbar {
        min-height: 0 !important;
        padding: 0 0 24px !important;
        background: transparent !important;
    }

    body:not([class*="client-client_login"]) .nav-content nav.navbar .container-md,
    body:not([class*="client-client_login"]) .nav-content .navbar-collapse {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        padding: 0 !important;
    }

    body:not([class*="client-client_login"]) .nav-content .navbar-nav:not(.ux-account-nav)::before,
    body:not([class*="client-client_login"]) .nav-content .navbar-toggler {
        display: none !important;
        content: none !important;
    }

    body:not([class*="client-client_login"]) .ux-sidebar-section-title {
        display: flex !important;
        align-items: center !important;
        min-height: 42px !important;
        padding: 0 18px !important;
        color: #8f8f8f !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: .04em !important;
        text-transform: uppercase !important;
    }

    body:not([class*="client-client_login"]) .ux-sidebar-menu-title {
        background: #303030 !important;
    }

    body:not([class*="client-client_login"]) .nav-content .navbar-nav {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:not([class*="client-client_login"]) .nav-content .nav-item {
        width: 100% !important;
    }

    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a {
        display: flex !important;
        align-items: center !important;
        min-height: 52px !important;
        padding: 0 26px !important;
        border: 0 !important;
        background: transparent !important;
        color: #c5c5c5 !important;
        font-size: 17px !important;
        font-weight: 300 !important;
        letter-spacing: 0 !important;
    }

    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a i {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 26px !important;
        width: 26px !important;
        height: 26px !important;
        margin-right: 13px !important;
        color: #777 !important;
        font-size: 16px !important;
        text-align: center !important;
    }

    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li.active > a,
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a:hover,
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a:focus {
        background: #202020 !important;
        color: #f5f5f5 !important;
    }

    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li.active > a i {
        border-radius: 50% !important;
        background: #2f7f97 !important;
        color: #d9f0f5 !important;
        font-size: 12px !important;
    }

    body:not([class*="client-client_login"]) .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-toggle::after {
        position: absolute !important;
        top: 50% !important;
        right: 24px !important;
        margin: -3px 0 0 !important;
        border-top-color: #b8b8b8 !important;
    }

    body:not([class*="client-client_login"]) .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-menu {
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 5px 0 8px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #242424 !important;
        box-shadow: none !important;
    }

    body:not([class*="client-client_login"]) .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-item {
        min-height: 36px !important;
        padding: 7px 24px 7px 65px !important;
        color: #b8b8b8 !important;
        font-size: 13px !important;
        font-weight: 300 !important;
    }

    body:not([class*="client-client_login"]) .ux-sidebar-settings {
        display: block !important;
        width: 100% !important;
        margin-top: 30px !important;
    }

    body:not([class*="client-client_login"]) .ux-lights-toggle {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 48px !important;
        padding: 7px 22px !important;
        color: #c5c5c5 !important;
    }

    body:not([class*="client-client_login"]) .ux-switch-label {
        margin-left: 16px !important;
        color: #c5c5c5 !important;
        font-size: 15px !important;
        font-weight: 300 !important;
    }

    body:not([class*="client-client_login"]) .title {
        inset: 0 0 auto var(--ux-workspace-rail) !important;
        height: var(--ux-workspace-bar) !important;
        background: #55a7c6 !important;
    }

    body:not([class*="client-client_login"]) .nav-content .ux-account-nav {
        position: fixed !important;
        top: 0 !important;
        right: 24px !important;
        flex-direction: row !important;
        align-items: center !important;
        width: auto !important;
        height: var(--ux-workspace-bar) !important;
    }

    body:not([class*="client-client_login"]) .nav-content .ux-account-nav .nav-item {
        width: auto !important;
    }

    body:not([class*="client-client_login"]) .nav-content .ux-account-nav .nav-link {
        height: 42px !important;
        padding: 0 12px !important;
        color: #fff !important;
        font-size: 13px !important;
    }

    body:not([class*="client-client_login"]) .nav-content .ux-account-nav .dropdown-menu {
        position: absolute !important;
        top: 46px !important;
        right: 0 !important;
        left: auto !important;
        min-width: 236px !important;
        padding: 8px !important;
        border: 1px solid #e0e5e9 !important;
        border-radius: 4px !important;
        background: #fff !important;
        box-shadow: 0 12px 28px rgba(26, 36, 46, .14) !important;
    }

    body:not([class*="client-client_login"]) .title + .container-md {
        width: calc(100% - var(--ux-workspace-rail)) !important;
        max-width: none !important;
        min-height: 100vh !important;
        margin: 0 0 0 var(--ux-workspace-rail) !important;
        padding: calc(var(--ux-workspace-bar) + 28px) 28px 44px !important;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .header .badge {
        display: none !important;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .ux-sidebar-section-title,
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .ux-switch-label {
        justify-content: center !important;
        overflow: hidden !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        color: transparent !important;
        font-size: 0 !important;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .ux-sidebar-section-title::before {
        color: #777 !important;
        content: "..." !important;
        font-size: 15px !important;
        letter-spacing: 2px !important;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content {
        overflow: visible !important;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li {
        position: relative !important;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a {
        justify-content: center !important;
        min-height: 52px !important;
        padding: 0 !important;
        color: transparent !important;
        font-size: 0 !important;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a i {
        margin: 0 !important;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a::before {
        position: absolute;
        z-index: 1080;
        top: 50%;
        left: calc(100% + 10px);
        display: none;
        min-width: max-content;
        padding: 8px 10px;
        border-radius: 3px;
        background: #202020;
        color: #fff;
        content: attr(data-sidebar-label);
        font-size: 13px;
        line-height: 1;
        transform: translateY(-50%);
        box-shadow: 0 7px 18px rgba(0, 0, 0, .24);
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a:hover::before,
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a:focus::before {
        display: block !important;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-toggle::after {
        display: none !important;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-menu {
        position: absolute !important;
        top: 0 !important;
        left: 84px !important;
        width: 228px !important;
        padding: 7px 0 !important;
        box-shadow: 0 10px 26px rgba(0, 0, 0, .26) !important;
    }
}

@media (max-width: 991.98px) {
    body:not([class*="client-client_login"]) .header {
        background: #202020 !important;
    }

    body:not([class*="client-client_login"]) .nav-content {
        background: #2d2d2d !important;
    }

    body:not([class*="client-client_login"]) .ux-sidebar-menu-title {
        background: #303030 !important;
    }

    body:not([class*="client-client_login"]) .nav-content .nav-link {
        min-height: 48px !important;
        color: #d0d0d0 !important;
        font-size: 16px !important;
    }
}

/* True EOF owner for the selected Montserrat navigation and 65px utility bar. */
@media (min-width: 992px) {
    body:not([class*="client-client_login"]) {
        --ux-workspace-bar: 65px !important;
        font-family: Montserrat, sans-serif !important;
        font-size: 16px !important;
        font-weight: 300 !important;
        line-height: 24px !important;
    }
    body:not([class*="client-client_login"]) .header,
    body:not([class*="client-client_login"]) .header .container-md,
    body:not([class*="client-client_login"]) .header .logo,
    body:not([class*="client-client_login"]) .header .logo a { height: 65px !important; }
    body:not([class*="client-client_login"]) .header .container-md { padding: 0 15px !important; }
    body:not([class*="client-client_login"]) .header .logo img {
        max-width: 205px !important;
        max-height: 44px !important;
    }
    body:not([class*="client-client_login"]) .header .badge {
        top: 43px !important;
        left: 15px !important;
        z-index: 5 !important;
        max-width: 220px !important;
        font-family: Montserrat, sans-serif !important;
        font-size: 9px !important;
        line-height: 14px !important;
    }
    body:not([class*="client-client_login"]) .nav-content { inset: 65px auto 0 0 !important; }
    body:not([class*="client-client_login"]) .ux-sidebar-section-title {
        min-height: 58px !important;
        padding: 0 15px !important;
        font-family: Montserrat, sans-serif !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 18px !important;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a {
        min-height: 40px !important;
        padding: 8px 16px !important;
        font-family: Montserrat, sans-serif !important;
        font-size: 16px !important;
        font-weight: 300 !important;
        line-height: 24px !important;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a i {
        flex: 0 0 30px !important;
        width: 30px !important;
        height: 16px !important;
        margin-right: 4px !important;
        font-size: 16px !important;
        line-height: 16px !important;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li.active > a i {
        border-radius: 0 !important;
        background: transparent !important;
        color: #2ca1c3 !important;
        font-size: 16px !important;
    }
    body:not([class*="client-client_login"]) .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-item,
    body:not([class*="client-client_login"]) .ux-switch-label {
        font-family: Montserrat, sans-serif !important;
        font-weight: 300 !important;
    }
    body:not([class*="client-client_login"]) .ux-sidebar-toggle,
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .ux-sidebar-toggle {
        position: fixed !important;
        z-index: 1060 !important;
        top: 10.5px !important;
        right: auto !important;
        left: calc(var(--ux-workspace-rail) + 30px) !important;
        width: 44px !important;
        height: 44px !important;
        border: 0 !important;
        border-radius: 2px !important;
        background: #2790ae !important;
        color: #fff !important;
        font-size: 18px !important;
        box-shadow: none !important;
    }
    body:not([class*="client-client_login"]) .title {
        position: fixed !important;
        z-index: 1040 !important;
        inset: 0 0 auto var(--ux-workspace-rail) !important;
        height: 65px !important;
        background: #2ca1c3 !important;
    }
    body:not([class*="client-client_login"]) .title .ux-topbar-shell {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        max-width: none !important;
        height: 65px !important;
        padding: 0 30px 0 88px !important;
    }
    body:not([class*="client-client_login"]) .ux-topbar-date {
        color: rgba(255, 255, 255, .7) !important;
        font-family: Montserrat, sans-serif !important;
        font-size: 14px !important;
        font-weight: 300 !important;
        line-height: 21px !important;
    }
    body:not([class*="client-client_login"]) .ux-topbar-cart {
        position: fixed !important;
        z-index: 1060 !important;
        top: 10.5px !important;
        right: 106px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        color: #fff !important;
        font-size: 18px !important;
    }
    body:not([class*="client-client_login"]) .header .top-nav {
        position: fixed !important;
        z-index: 1060 !important;
        top: 10.5px !important;
        right: 164px !important;
        display: block !important;
        height: 44px !important;
        font-family: Montserrat, sans-serif !important;
        font-size: 14px !important;
        font-weight: 300 !important;
        line-height: 21px !important;
    }
    body:not([class*="client-client_login"]) .header .top-nav > ul,
    body:not([class*="client-client_login"]) .header .top-nav > ul > li,
    body:not([class*="client-client_login"]) .header .top-nav > ul > li > a { height: 44px !important; }
    body:not([class*="client-client_login"]) .header .top-nav > ul > li > a {
        display: flex !important;
        align-items: center !important;
        padding: 0 15px !important;
        color: rgba(255, 255, 255, .7) !important;
        font-family: Montserrat, sans-serif !important;
        font-size: 14px !important;
        font-weight: 300 !important;
        line-height: 21px !important;
    }
    body:not([class*="client-client_login"]) .nav-content .ux-account-nav {
        top: 10.5px !important;
        right: 30px !important;
        z-index: 1060 !important;
        width: 61px !important;
        height: 44px !important;
    }
    body:not([class*="client-client_login"]) .nav-content .ux-account-nav .nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 61px !important;
        height: 44px !important;
        padding: 0 !important;
        color: #fff !important;
        font-family: Montserrat, sans-serif !important;
        font-size: 16px !important;
        font-weight: 300 !important;
        line-height: 24px !important;
    }
    body:not([class*="client-client_login"]) .ux-account-trigger-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 2px !important;
        background: #1d64c8 !important;
        font-size: 24px !important;
    }
    body:not([class*="client-client_login"]) .nav-content .ux-account-nav .dropdown-toggle::after {
        margin-left: 5px !important;
        border-top-color: #fff !important;
    }
    body:not([class*="client-client_login"]) .nav-content .ux-account-nav .dropdown-menu { top: 49px !important; }
    body:not([class*="client-client_login"]) .ux-page-title {
        width: calc(100% - var(--ux-workspace-rail) - 250px) !important;
        min-height: 104px !important;
        margin: 65px 250px 0 var(--ux-workspace-rail) !important;
        background: #fff !important;
    }
    body:not([class*="client-client_login"]) .ux-page-title .container-md {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 104px !important;
        padding: 0 30px !important;
    }
    body:not([class*="client-client_login"]) .ux-page-title h3 {
        margin: 0 !important;
        color: #30343b !important;
        font-family: Montserrat, sans-serif !important;
        font-size: 32px !important;
        font-weight: 300 !important;
        line-height: 48px !important;
    }
    body:not([class*="client-client_login"]) .ux-page-title + .container-md {
        width: calc(100% - var(--ux-workspace-rail)) !important;
        max-width: none !important;
        min-height: calc(100vh - 169px) !important;
        margin: 0 0 0 var(--ux-workspace-rail) !important;
        padding: 28px 28px 44px !important;
    }
}

/* -------------------------------------------------------------------------
 * UX Modern workspace shell
 *
 * This final layer implements the selected refined-sidebar direction across
 * signed-in client pages. It intentionally leaves authentication pages alone.
 * ---------------------------------------------------------------------- */
@media (min-width: 992px) {
    body:not([class*="client-client_login"]) {
        --ux-workspace-rail: 210px;
        --ux-workspace-bar: 58px;
        min-height: 100vh;
        padding: 0;
        background: #f5f7f9;
        color: #343b45;
    }

    body:not([class*="client-client_login"]) .header {
        position: fixed !important;
        z-index: 1040;
        inset: 0 auto auto 0;
        width: var(--ux-workspace-rail) !important;
        height: 72px !important;
        border: 0 !important;
        background: #1f2731 !important;
        box-shadow: none !important;
    }
    body:not([class*="client-client_login"]) .header .container-md {
        display: flex;
        align-items: center;
        width: 100% !important;
        height: 72px !important;
        padding: 0 22px !important;
    }
    body:not([class*="client-client_login"]) .header .logo,
    body:not([class*="client-client_login"]) .header .logo a {
        display: flex;
        align-items: center;
        height: 72px !important;
    }
    body:not([class*="client-client_login"]) .header .logo img {
        width: auto;
        max-width: 160px !important;
        max-height: 38px !important;
        object-fit: contain;
    }
    body:not([class*="client-client_login"]) .header .badge {
        position: absolute;
        top: 54px;
        left: 18px;
        max-width: 174px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body:not([class*="client-client_login"]) .nav-content {
        position: fixed !important;
        z-index: 1035;
        inset: 72px auto 0 0 !important;
        width: var(--ux-workspace-rail) !important;
        height: auto !important;
        overflow-x: hidden;
        overflow-y: auto;
        border: 0 !important;
        background: #1f2731 !important;
        box-shadow: none !important;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar {
        min-height: 0 !important;
        padding: 18px 0 28px !important;
        background: transparent !important;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar .container-md,
    body:not([class*="client-client_login"]) .nav-content .navbar-collapse {
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 0 !important;
    }
    body:not([class*="client-client_login"]) .nav-content .navbar-toggler {
        display: none !important;
    }
    body:not([class*="client-client_login"]) .nav-content .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        margin: 0 !important;
    }
    body:not([class*="client-client_login"]) .nav-content .navbar-nav:not(.ux-account-nav)::before {
        display: block !important;
        padding: 0 22px 11px;
        color: #778390;
        content: "MENU";
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .12em;
    }
    body:not([class*="client-client_login"]) .nav-content .nav-item {
        width: 100% !important;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a {
        display: flex;
        align-items: center;
        min-height: 43px;
        padding: 10px 21px !important;
        border: 0 !important;
        border-left: 3px solid transparent !important;
        color: #b9c2cc !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.35;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a i {
        width: 27px !important;
        color: #788694 !important;
        text-align: left;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li.active > a,
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a:hover,
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a:focus {
        border-left-color: #55a7c6 !important;
        background: #29333e !important;
        color: #fff !important;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li.active > a i,
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a:hover i {
        color: #55a7c6 !important;
    }
    body:not([class*="client-client_login"]) .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        margin: 0;
        padding: 4px 0;
        border: 0;
        border-radius: 0;
        background: #19212a;
        box-shadow: none;
    }
    body:not([class*="client-client_login"]) .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-item {
        padding: 9px 20px 9px 50px !important;
        color: #a9b4bf !important;
        font-size: 13px;
    }

    body:not([class*="client-client_login"]) .title {
        position: fixed !important;
        z-index: 1030;
        inset: 0 0 auto var(--ux-workspace-rail) !important;
        display: block !important;
        height: var(--ux-workspace-bar) !important;
        border: 0 !important;
        background: #55a7c6 !important;
        box-shadow: none !important;
    }
    body:not([class*="client-client_login"]) .title .container-md {
        display: flex;
        align-items: center;
        width: 100% !important;
        max-width: none !important;
        height: var(--ux-workspace-bar);
        padding: 0 28px !important;
    }
    body:not([class*="client-client_login"]) .title h3 {
        margin: 0 !important;
        color: rgba(255, 255, 255, .94) !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        letter-spacing: -.01em;
    }

    /* The account menu belongs in the utility bar, not in the navigation rail. */
    body:not([class*="client-client_login"]) .nav-content .navbar-nav + .navbar-nav {
        position: fixed !important;
        z-index: 1045;
        top: 0;
        right: 20px;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: auto !important;
        height: var(--ux-workspace-bar);
        margin: 0 !important;
    }
    body:not([class*="client-client_login"]) .nav-content .navbar-nav + .navbar-nav::before {
        display: none !important;
    }
    body:not([class*="client-client_login"]) .nav-content .navbar-nav + .navbar-nav .nav-item {
        width: auto !important;
    }
    body:not([class*="client-client_login"]) .nav-content .navbar-nav + .navbar-nav .nav-link {
        display: flex;
        align-items: center;
        height: 42px;
        padding: 0 12px !important;
        border: 0 !important;
        color: #fff !important;
        font-size: 13px !important;
        font-weight: 500 !important;
    }
    body:not([class*="client-client_login"]) .nav-content .navbar-nav + .navbar-nav .dropdown-menu {
        position: absolute !important;
        top: 46px !important;
        right: 0 !important;
        left: auto !important;
        min-width: 230px;
        margin: 0;
        padding: 8px;
        border: 1px solid #e0e5e9;
        border-radius: 5px;
        background: #fff;
        box-shadow: 0 12px 28px rgba(26, 36, 46, .14);
    }
    body:not([class*="client-client_login"]) .nav-content .navbar-nav + .navbar-nav .dropdown-item {
        padding: 9px 11px !important;
        border-radius: 3px;
        color: #4a5561 !important;
        font-size: 13px;
    }

    body:not([class*="client-client_login"]) .title + .container-md {
        width: calc(100% - var(--ux-workspace-rail)) !important;
        max-width: none !important;
        min-height: 100vh;
        margin: 0 0 0 var(--ux-workspace-rail) !important;
        padding: calc(var(--ux-workspace-bar) + 28px) 28px 44px !important;
    }
    body:not([class*="client-client_login"]) .title + .container-md > .row {
        margin-right: -10px;
        margin-left: -10px;
    }
    body:not([class*="client-client_login"]) .title + .container-md > .row > [class*="col-"] {
        padding-right: 10px;
        padding-left: 10px;
    }

    /* Dashboard: primary workspace first, account context in a narrow rail. */
    body:not([class*="client-client_login"]) #my-info {
        order: 2 !important;
        display: block !important;
        flex: 0 0 250px !important;
        width: 250px !important;
        max-width: 250px !important;
    }
    body:not([class*="client-client_login"]) #my-info + .right_content,
    body:not([class*="client-client_login"]) .right_content {
        order: 1 !important;
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0;
    }
}

/* Shared signed-in component language. */
body:not([class*="client-client_login"]) .card-blesta,
body:not([class*="client-client_login"]) .panel,
body:not([class*="client-client_login"]) .list-group,
body:not([class*="client-client_login"]) .table-responsive {
    border: 1px solid #e1e6ea !important;
    border-radius: 4px !important;
    background: #fff;
    box-shadow: 0 2px 8px rgba(32, 43, 54, .035) !important;
}
body:not([class*="client-client_login"]) .card-blesta,
body:not([class*="client-client_login"]) .panel {
    margin-bottom: 20px !important;
    overflow: hidden;
}
body:not([class*="client-client_login"]) .card-blesta > .card-header,
body:not([class*="client-client_login"]) .panel-heading,
body:not([class*="client-client_login"]) .panel > .card-header {
    min-height: 49px;
    padding: 14px 17px !important;
    border-bottom: 1px solid #e6eaed !important;
    background: #fff !important;
    color: #343b45 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}
body:not([class*="client-client_login"]) .card-blesta > .card-body,
body:not([class*="client-client_login"]) .panel-body {
    padding: 17px !important;
}
body:not([class*="client-client_login"]) .card-footer,
body:not([class*="client-client_login"]) .panel-footer {
    padding: 13px 16px !important;
    border-top: 1px solid #e6eaed !important;
    background: #fafbfc !important;
}
body:not([class*="client-client_login"]) .table {
    margin-bottom: 0;
    color: #4d5661;
    font-size: 13px;
}
body:not([class*="client-client_login"]) .table thead th {
    padding: 12px 14px;
    border-top: 0;
    border-bottom: 1px solid #dde3e7;
    background: #f5f7f8;
    color: #4a535e;
    font-weight: 600;
}
body:not([class*="client-client_login"]) .table td {
    padding: 13px 14px;
    border-top-color: #e9edf0;
    vertical-align: middle;
}
body:not([class*="client-client_login"]) .alert {
    padding: 14px 16px;
    border: 0;
    border-radius: 3px;
    font-size: 13px;
    line-height: 1.5;
}
body:not([class*="client-client_login"]) .alert-info {
    background: #e8f5f8;
    color: #345c67;
}
body:not([class*="client-client_login"]) .form-control {
    min-height: 42px;
    padding: 9px 11px;
    border-color: #d8e0e5;
    border-radius: 4px;
    background: #fff;
    box-shadow: none;
    font-size: 14px;
}
body:not([class*="client-client_login"]) .form-control:focus {
    border-color: #55a7c6;
    box-shadow: 0 0 0 3px rgba(85, 167, 198, .14);
}
body:not([class*="client-client_login"]) .btn {
    min-height: 38px;
    padding: 8px 13px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
}
body:not([class*="client-client_login"]) .btn-primary,
body:not([class*="client-client_login"]) .btn-info {
    border-color: #4b9ab8;
    background: #55a7c6;
}

/* Dashboard summary cards stay colorful, but no longer overpower the work. */
body:not([class*="client-client_login"]) .cards {
    margin-right: -10px;
    margin-left: -10px;
}
body:not([class*="client-client_login"]) .cards > [class*="col-"] {
    margin-bottom: 20px !important;
    padding-right: 10px;
    padding-left: 10px;
}
body:not([class*="client-client_login"]) .cards .card {
    min-height: 112px !important;
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(28, 39, 50, .08) !important;
}
body:not([class*="client-client_login"]) .cards .card-content {
    padding: 22px 24px !important;
}
body:not([class*="client-client_login"]) .cards .card-value {
    font-size: 33px !important;
    font-weight: 600 !important;
    line-height: 1;
}
body:not([class*="client-client_login"]) .cards .card-label {
    margin-top: 9px !important;
    font-size: 13px !important;
    font-weight: 500;
}

body:not([class*="client-client_login"]) #my-info .card,
body:not([class*="client-client_login"]) #my-info .list-group {
    margin-bottom: 16px !important;
}
body:not([class*="client-client_login"]) #my-info address,
body:not([class*="client-client_login"]) #my-info .list-group-item-text {
    margin-bottom: 0;
    color: #59636e;
    font-size: 13px;
    line-height: 1.52;
}
body:not([class*="client-client_login"]) #my-info .alert {
    margin-bottom: 0;
}
body:not([class*="client-client_login"]) .row.footer {
    display: none !important;
}

@media (max-width: 991.98px) {
    body:not([class*="client-client_login"]) {
        background: #f5f7f9;
    }
    body:not([class*="client-client_login"]) .header {
        position: relative !important;
        width: 100% !important;
        height: 62px !important;
        background: #1f2731 !important;
    }
    body:not([class*="client-client_login"]) .header .container-md,
    body:not([class*="client-client_login"]) .header .logo,
    body:not([class*="client-client_login"]) .header .logo a {
        height: 62px !important;
    }
    body:not([class*="client-client_login"]) .header .container-md {
        padding: 0 18px !important;
    }
    body:not([class*="client-client_login"]) .header .logo img {
        max-width: 150px !important;
        max-height: 34px !important;
    }
    body:not([class*="client-client_login"]) .nav-content {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible;
        background: #252e38 !important;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar {
        padding: 0 !important;
        background: transparent !important;
    }
    body:not([class*="client-client_login"]) .nav-content .navbar-toggler {
        display: block !important;
        margin: 8px 14px;
    }
    body:not([class*="client-client_login"]) .nav-content .navbar-collapse {
        width: 100%;
        padding: 0 14px 14px !important;
    }
    body:not([class*="client-client_login"]) .nav-content .navbar-nav,
    body:not([class*="client-client_login"]) .nav-content .navbar-nav + .navbar-nav {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }
    body:not([class*="client-client_login"]) .nav-content .nav-item {
        width: 100% !important;
    }
    body:not([class*="client-client_login"]) .nav-content .nav-link {
        padding: 10px 12px !important;
        color: #d6dde4 !important;
    }
    body:not([class*="client-client_login"]) .nav-content .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        border: 0;
        background: #1d252e;
        box-shadow: none;
    }
    body:not([class*="client-client_login"]) .nav-content .dropdown-item {
        color: #c0c8d0 !important;
    }
    body:not([class*="client-client_login"]) .title {
        display: none !important;
    }
    body:not([class*="client-client_login"]) .title + .container-md {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 22px 18px 36px !important;
    }
    body:not([class*="client-client_login"]) #my-info {
        display: none !important;
    }
    body:not([class*="client-client_login"]) .right_content {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 575.98px) {
    body:not([class*="client-client_login"]) {
        overflow-x: hidden;
    }
    body:not([class*="client-client_login"]) .title + .container-md {
        padding: 18px 12px 30px !important;
    }
    body:not([class*="client-client_login"]) .cards > [class*="col-"] {
        flex: 0 0 50%;
        width: 50%;
        max-width: 50%;
        margin-bottom: 12px !important;
        padding-right: 6px;
        padding-left: 6px;
    }
    body:not([class*="client-client_login"]) .cards {
        margin-right: -6px;
        margin-left: -6px;
    }
    body:not([class*="client-client_login"]) .cards .card {
        min-height: 98px !important;
    }
    body:not([class*="client-client_login"]) .cards .card-content {
        padding: 18px !important;
    }
    body:not([class*="client-client_login"]) .cards .card-value {
        font-size: 28px !important;
    }
    body:not([class*="client-client_login"]) .card-blesta > .card-body,
    body:not([class*="client-client_login"]) .panel-body {
        padding: 14px !important;
    }
    body:not([class*="client-client_login"]) .table-responsive {
        border-radius: 3px !important;
    }
}

/* Authentication pages are a single viewport canvas. Hide Blesta's empty
 * client footer and prevent its wrapper from adding a second scrollable row. */
@media (min-width: 768px) {
    body[class*="client-client_login"] {
        height: 100vh !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    body[class*="client-client_login"] > .container-md,
    body[class*="client-client_login"] .row.login,
    body[class*="client-client_login"] .auth-layout,
    body[class*="client-client_login"] .auth-pane,
    body[class*="client-client_login"] .auth-visual {
        height: 100vh !important;
        min-height: 0 !important;
    }
    body[class*="client-client_login"] .row.footer,
    body[class*="client-client_login"] .row.footer + * {
        display: none !important;
    }
}

/* Small screens may need vertical movement when CAPTCHA or validation
 * messages increase the form height, but never inherit the empty footer. */
@media (max-width: 767.98px) {
    body[class*="client-client_login"] {
        min-height: 100vh !important;
        overflow-x: hidden !important;
    }
    body[class*="client-client_login"] .row.footer {
        display: none !important;
    }
}

/* SwiftModders-inspired auth canvas: keep the form calm on the left and use
 * the supplied workspace photograph as the full-height visual on the right. */
body[class*="client-client_login"] {
    background: #fff !important;
    color: #343a40;
}
body[class*="client-client_login"] .auth-layout {
    display: flex !important;
    width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    background: #fff;
}
body[class*="client-client_login"] .auth-pane {
    display: flex !important;
    flex: 0 0 30.5% !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    width: 30.5% !important;
    max-width: none !important;
    min-height: 100vh !important;
    padding: clamp(110px, 16vh, 180px) 2.8vw 48px !important;
    box-sizing: border-box !important;
    background: #fff;
}
body[class*="client-client_login"] .auth-intro,
body[class*="client-client_login"] .auth-form {
    width: 100% !important;
    max-width: none !important;
}
body[class*="client-client_login"] .auth-intro {
    margin: 0 0 28px !important;
}
body[class*="client-client_login"] .auth-intro h2 {
    margin: 0 0 52px !important;
    color: #343a40 !important;
    font-size: 29px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}
body[class*="client-client_login"] .auth-intro h4 i {
    color: #c7c9ca !important;
    margin-right: 7px;
    font-size: .86em !important;
}
body[class*="client-client_login"] .auth-intro h4 {
    margin: 0 0 10px !important;
    color: #555 !important;
    font-size: 20px !important;
    font-weight: 400 !important;
}
body[class*="client-client_login"] .auth-intro p {
    max-width: none !important;
    margin: 0 !important;
    color: #b4b6b8 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}
body[class*="client-client_login"] .auth-intro hr {
    display: none !important;
}
body[class*="client-client_login"] .auth-form .panel {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
body[class*="client-client_login"] .auth-form .panel-body {
    padding: 0 !important;
}
body[class*="client-client_login"] .auth-form .panel-footer {
    display: flex !important;
    justify-content: space-between !important;
    gap: 20px !important;
    padding: 15px 0 0 !important;
    border: 0 !important;
    background: transparent !important;
}
body[class*="client-client_login"] .auth-form .panel-footer a {
    color: #74c5e5 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}
body[class*="client-client_login"] .auth-form .form-group {
    margin-bottom: 17px !important;
}
body[class*="client-client_login"] .auth-form .form-group > label {
    display: block !important;
    margin-bottom: 8px !important;
    color: #858585 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}
body[class*="client-client_login"] .auth-form .form-control {
    min-height: 48px !important;
    padding: 12px !important;
    border: 1px solid #e4e4e4 !important;
    border-radius: 2px !important;
    color: #777 !important;
    background: #fff !important;
    box-shadow: none !important;
}
body[class*="client-client_login"] .auth-form .checkbox {
    margin: 2px 0 29px !important;
    color: #b4b6b8 !important;
    font-size: 13px !important;
}
body[class*="client-client_login"] .auth-form .checkbox label {
    gap: 8px !important;
}
body[class*="client-client_login"] .auth-form .g-recaptcha,
body[class*="client-client_login"] .auth-form iframe[src*="recaptcha"] {
    max-width: 100% !important;
}
body[class*="client-client_login"] .auth-form .btn-success {
    min-height: 47px !important;
    border-color: #95c12b !important;
    border-radius: 2px !important;
    background: #95c12b !important;
    color: #1e2a08 !important;
    font-weight: 700 !important;
}
body[class*="client-client_login"] .auth-form .btn-success:hover,
body[class*="client-client_login"] .auth-form .btn-success:focus {
    border-color: #82ad20 !important;
    background: #82ad20 !important;
}
body[class*="client-client_login"] .auth-visual {
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 100vh !important;
    background: #1d2c2c url('../assets/images/auth-visual.png') center center / cover no-repeat !important;
}

/* -------------------------------------------------------------------------
 * Sidebar redesign: SwiftModders-style rail
 *
 * This layer is intentionally last. Older experiments above are kept for
 * history, but these rules own the signed-in client sidebar presentation.
 * ---------------------------------------------------------------------- */
@media (min-width: 992px) {
    body:not([class*="client-client_login"]) {
        --ux-workspace-rail: 300px;
        --ux-workspace-bar: 58px;
        background: #f2f4f6 !important;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed {
        --ux-workspace-rail: 84px;
    }

    body:not([class*="client-client_login"]) .header {
        position: fixed !important;
        z-index: 1040;
        inset: 0 auto auto 0 !important;
        width: var(--ux-workspace-rail) !important;
        height: 118px !important;
        border: 0 !important;
        background: #202020 !important;
        box-shadow: none !important;
        transition: width .18s ease;
    }

    body:not([class*="client-client_login"]) .header .container-md {
        position: relative;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        height: 118px !important;
        max-width: none !important;
        padding: 0 22px !important;
    }

    body:not([class*="client-client_login"]) .header .logo,
    body:not([class*="client-client_login"]) .header .logo a {
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
        width: 100% !important;
        height: 118px !important;
    }

    body:not([class*="client-client_login"]) .header .logo img {
        width: auto !important;
        max-width: 232px !important;
        max-height: 54px !important;
        object-fit: contain;
        object-position: left center;
    }

    body:not([class*="client-client_login"]) .header .badge {
        position: absolute;
        top: 82px;
        left: 22px;
        max-width: 252px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body:not([class*="client-client_login"]) .ux-sidebar-toggle {
        position: absolute;
        z-index: 1050;
        top: 42px;
        right: -15px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        padding: 0;
        border: 2px solid #f2f4f6;
        border-radius: 50%;
        background: #303030;
        color: #b9b9b9;
        box-shadow: 0 5px 16px rgba(0, 0, 0, .24);
        cursor: pointer;
    }

    body:not([class*="client-client_login"]) .ux-sidebar-toggle:hover,
    body:not([class*="client-client_login"]) .ux-sidebar-toggle:focus-visible {
        background: #3495ae;
        color: #fff;
        outline: 0;
    }

    body:not([class*="client-client_login"]) .nav-content {
        position: fixed !important;
        z-index: 1035;
        inset: 118px auto 0 0 !important;
        width: var(--ux-workspace-rail) !important;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        border: 0 !important;
        background: #2d2d2d !important;
        box-shadow: none !important;
        transition: width .18s ease;
    }

    body:not([class*="client-client_login"]) .nav-content nav.navbar {
        min-height: 0 !important;
        padding: 0 0 34px !important;
        background: transparent !important;
    }

    body:not([class*="client-client_login"]) .nav-content nav.navbar .container-md,
    body:not([class*="client-client_login"]) .nav-content .navbar-collapse {
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        max-width: none !important;
        padding: 0 !important;
    }

    body:not([class*="client-client_login"]) .nav-content .navbar-toggler,
    body:not([class*="client-client_login"]) .nav-content .navbar-nav:not(.ux-account-nav)::before {
        display: none !important;
        content: none !important;
    }

    body:not([class*="client-client_login"]) .ux-sidebar-section-title {
        display: flex !important;
        align-items: center;
        width: 100%;
        min-height: 54px;
        margin: 0 !important;
        padding: 0 22px !important;
        color: #8f8f8f !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: .04em !important;
        line-height: 1;
        text-transform: uppercase;
    }

    body:not([class*="client-client_login"]) .ux-sidebar-menu-title {
        background: #303030 !important;
    }

    body:not([class*="client-client_login"]) .nav-content .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body:not([class*="client-client_login"]) .nav-content .nav-item {
        width: 100% !important;
    }

    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a {
        position: relative;
        display: flex !important;
        align-items: center !important;
        min-height: 42px !important;
        padding: 0 22px !important;
        border: 0 !important;
        background: transparent !important;
        color: #c5c5c5 !important;
        font-size: 15px !important;
        font-weight: 300 !important;
        letter-spacing: 0 !important;
        line-height: 1.2 !important;
        transition: background-color .15s ease, color .15s ease;
    }

    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a i {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 22px !important;
        width: 22px !important;
        height: 22px !important;
        margin-right: 11px !important;
        color: #777 !important;
        font-size: 14px !important;
        text-align: center !important;
    }

    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li.active > a,
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a:hover,
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a:focus {
        background: #202020 !important;
        color: #f5f5f5 !important;
    }

    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li.active > a i {
        border-radius: 50%;
        background: #2f7f97 !important;
        color: #d9f0f5 !important;
        font-size: 11px !important;
    }

    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a:hover i,
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a:focus i {
        color: #55a7c6 !important;
    }

    body:not([class*="client-client_login"]) .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-toggle::after {
        position: absolute;
        top: 50%;
        right: 24px;
        margin: -3px 0 0 0 !important;
        border-top-color: #b8b8b8;
    }

    body:not([class*="client-client_login"]) .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100%;
        margin: 0 !important;
        padding: 5px 0 8px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #242424 !important;
        box-shadow: none !important;
    }

    body:not([class*="client-client_login"]) .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-item {
        display: flex;
        align-items: center;
        min-height: 42px;
        padding: 8px 24px 8px 78px !important;
        color: #b8b8b8 !important;
        font-size: 15px !important;
        font-weight: 300;
        line-height: 1.2;
    }

    body:not([class*="client-client_login"]) .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-item:hover,
    body:not([class*="client-client_login"]) .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-item:focus {
        background: #202020 !important;
        color: #fff !important;
    }

    body:not([class*="client-client_login"]) .ux-sidebar-settings {
        display: block !important;
        width: 100%;
        margin-top: 44px !important;
    }

    body:not([class*="client-client_login"]) .ux-sidebar-settings .ux-sidebar-section-title {
        min-height: 44px;
        padding-left: 22px !important;
        background: transparent !important;
    }

    body:not([class*="client-client_login"]) .ux-lights-toggle {
        display: flex !important;
        align-items: center;
        width: 100%;
        min-height: 58px;
        padding: 7px 22px !important;
        border: 0;
        background: transparent;
        color: #c5c5c5;
        cursor: pointer;
    }

    body:not([class*="client-client_login"]) .ux-lights-toggle:focus-visible {
        outline: 2px solid #55a7c6;
        outline-offset: -4px;
    }

    body:not([class*="client-client_login"]) .ux-switch-track {
        position: relative;
        flex: 0 0 57px;
        width: 57px;
        height: 30px;
        border-radius: 18px;
        background: #9cc52d;
        transition: background-color .15s ease;
    }

    body:not([class*="client-client_login"]) .ux-switch-thumb {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
        transition: transform .15s ease;
    }

    body:not([class*="client-client_login"]) .ux-switch-label {
        margin-left: 16px;
        color: #c5c5c5;
        font-size: 18px;
        font-weight: 300;
    }

    body:not([class*="client-client_login"]) .ux-lights-toggle[aria-checked="false"] .ux-switch-track {
        background: #686868;
    }

    body:not([class*="client-client_login"]) .ux-lights-toggle[aria-checked="false"] .ux-switch-thumb {
        transform: translateX(-27px);
    }

    body:not([class*="client-client_login"]) .title {
        position: fixed !important;
        z-index: 1030;
        inset: 0 0 auto var(--ux-workspace-rail) !important;
        height: var(--ux-workspace-bar) !important;
        border: 0 !important;
        background: #55a7c6 !important;
        box-shadow: none !important;
        transition: left .18s ease;
    }

    body:not([class*="client-client_login"]) .title .container-md {
        display: flex !important;
        align-items: center;
        width: 100% !important;
        max-width: none !important;
        height: var(--ux-workspace-bar) !important;
        padding: 0 30px !important;
    }

    body:not([class*="client-client_login"]) .title h3 {
        margin: 0 !important;
        color: #fff !important;
        font-size: 16px !important;
        font-weight: 500 !important;
    }

    body:not([class*="client-client_login"]) .nav-content .ux-account-nav {
        position: fixed !important;
        z-index: 1045;
        top: 0;
        right: 24px;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: auto !important;
        height: var(--ux-workspace-bar);
        margin: 0 !important;
        padding: 0 !important;
    }

    body:not([class*="client-client_login"]) .nav-content .ux-account-nav .nav-item {
        width: auto !important;
    }

    body:not([class*="client-client_login"]) .nav-content .ux-account-nav .nav-link {
        display: flex !important;
        align-items: center;
        height: 42px;
        padding: 0 12px !important;
        border: 0 !important;
        color: #fff !important;
        font-size: 13px !important;
        font-weight: 500 !important;
    }

    body:not([class*="client-client_login"]) .nav-content .ux-account-nav .dropdown-toggle::after {
        margin-left: 8px !important;
    }

    body:not([class*="client-client_login"]) .nav-content .ux-account-nav .dropdown-menu {
        position: absolute !important;
        top: 46px !important;
        right: 0 !important;
        left: auto !important;
        min-width: 236px;
        margin: 0 !important;
        padding: 8px !important;
        border: 1px solid #e0e5e9 !important;
        border-radius: 4px !important;
        background: #fff !important;
        box-shadow: 0 12px 28px rgba(26, 36, 46, .14) !important;
    }

    body:not([class*="client-client_login"]) .nav-content .ux-account-nav .dropdown-item {
        padding: 9px 11px !important;
        border-radius: 3px;
        color: #4a5561 !important;
        font-size: 13px;
    }

    body:not([class*="client-client_login"]) .title + .container-md {
        width: calc(100% - var(--ux-workspace-rail)) !important;
        max-width: none !important;
        min-height: 100vh;
        margin: 0 0 0 var(--ux-workspace-rail) !important;
        padding: calc(var(--ux-workspace-bar) + 28px) 28px 44px !important;
        transition: width .18s ease, margin-left .18s ease;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .header .container-md {
        justify-content: center;
        padding: 0 14px !important;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .header .logo {
        width: 44px !important;
        overflow: hidden;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .header .logo a {
        justify-content: flex-start !important;
        width: 230px !important;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .header .logo img {
        max-width: none !important;
        width: 230px !important;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .header .badge {
        display: none !important;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .ux-sidebar-section-title,
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .ux-switch-label {
        justify-content: center;
        overflow: hidden;
        padding-right: 0 !important;
        padding-left: 0 !important;
        color: transparent !important;
        font-size: 0 !important;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .ux-sidebar-section-title::before {
        color: #777;
        content: "...";
        font-size: 15px;
        letter-spacing: 2px;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content {
        overflow: visible !important;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li {
        position: relative;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a {
        justify-content: center !important;
        min-height: 60px !important;
        padding: 0 !important;
        color: transparent !important;
        font-size: 0 !important;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a i {
        flex-basis: 32px !important;
        margin: 0 !important;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a::before {
        position: absolute;
        z-index: 1080;
        top: 50%;
        left: calc(100% + 10px);
        display: none;
        min-width: max-content;
        padding: 8px 10px;
        border-radius: 3px;
        background: #202020;
        color: #fff;
        content: attr(data-sidebar-label);
        font-size: 13px;
        line-height: 1;
        transform: translateY(-50%);
        box-shadow: 0 7px 18px rgba(0, 0, 0, .24);
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a:hover::before,
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a:focus::before {
        display: block;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-toggle::after {
        display: none !important;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-menu {
        position: absolute !important;
        top: 0 !important;
        left: 84px !important;
        width: 228px;
        padding: 7px 0 !important;
        box-shadow: 0 10px 26px rgba(0, 0, 0, .26) !important;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-item {
        padding: 10px 17px !important;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .ux-sidebar-settings {
        margin-top: 36px !important;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .ux-lights-toggle {
        justify-content: center;
        padding: 7px 0 !important;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .ux-switch-track {
        flex-basis: 44px;
        width: 44px;
        height: 24px;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .ux-switch-thumb {
        top: 3px;
        right: 3px;
        width: 18px;
        height: 18px;
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .ux-lights-toggle[aria-checked="false"] .ux-switch-thumb {
        transform: translateX(-20px);
    }
}

@media (max-width: 991.98px) {
    body:not([class*="client-client_login"]) .header {
        background: #202020 !important;
    }

    body:not([class*="client-client_login"]) .nav-content {
        background: #2d2d2d !important;
    }

    body:not([class*="client-client_login"]) .ux-sidebar-menu-title {
        background: #303030 !important;
    }

    body:not([class*="client-client_login"]) .nav-content .nav-link {
        min-height: 48px;
        color: #d0d0d0 !important;
        font-size: 16px !important;
    }

    body:not([class*="client-client_login"]) .nav-content .nav-link i {
        width: 28px;
        margin-right: 10px;
        color: #8b8b8b;
    }
}

/* Keep the reference-matched sidebar as the final signed-in cascade layer. */
@media (min-width: 992px) {
    body:not([class*="client-client_login"]) {
        --ux-workspace-rail: 280px;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed {
        --ux-workspace-rail: 82px;
    }
    body:not([class*="client-client_login"]) .header {
        height: 92px !important;
        background: #202020 !important;
    }
    body:not([class*="client-client_login"]) .header .container-md,
    body:not([class*="client-client_login"]) .header .logo,
    body:not([class*="client-client_login"]) .header .logo a {
        height: 92px !important;
    }
    body:not([class*="client-client_login"]) .header .container-md {
        padding: 0 20px !important;
    }
    body:not([class*="client-client_login"]) .header .logo img {
        max-width: 205px !important;
        max-height: 48px !important;
    }
    body:not([class*="client-client_login"]) .header .badge {
        top: 68px;
        left: 20px;
        max-width: 205px;
    }
    body:not([class*="client-client_login"]) .nav-content {
        inset: 92px auto 0 0 !important;
        background: #2b2b2b !important;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar {
        padding: 0 0 34px !important;
    }
    body:not([class*="client-client_login"]) .nav-content .navbar-nav:not(.ux-account-nav)::before {
        display: none !important;
        content: none !important;
    }
    body:not([class*="client-client_login"]) .ux-sidebar-section-title {
        display: flex;
        align-items: center;
        min-height: 54px;
        padding: 0 22px;
        color: #898989;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
    }
    body:not([class*="client-client_login"]) .ux-sidebar-menu-title {
        background: #303030;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a {
        position: relative;
        min-height: 48px;
        padding: 11px 22px 11px 32px !important;
        border: 0 !important;
        background: transparent !important;
        color: #c4c4c4 !important;
        font-size: 17px !important;
        font-weight: 300 !important;
        line-height: 26px;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a i {
        flex: 0 0 34px;
        width: 34px !important;
        color: #777 !important;
        font-size: 20px;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li.active > a,
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a:hover,
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a:focus {
        background: #202020 !important;
        color: #f0f0f0 !important;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li.active > a i,
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a:hover i,
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a:focus i {
        color: #3495ae !important;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li.active > a i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 24px;
        width: 24px !important;
        height: 24px;
        margin-right: 10px;
        border-radius: 50%;
        background: #287f96;
        color: #d9f1f5 !important;
        font-size: 12px;
    }
    body:not([class*="client-client_login"]) .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-toggle::after {
        position: absolute;
        top: 50%;
        right: 23px;
        margin: -3px 0 0;
    }
    body:not([class*="client-client_login"]) .ux-sidebar-settings {
        margin-top: 48px;
    }
    body:not([class*="client-client_login"]) .ux-sidebar-settings .ux-sidebar-section-title {
        min-height: 43px;
    }
    body:not([class*="client-client_login"]) .nav-content .ux-account-nav {
        position: fixed !important;
        z-index: 1045;
        top: 0;
        right: 20px;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: auto !important;
        height: var(--ux-workspace-bar);
        margin: 0 !important;
    }
    body:not([class*="client-client_login"]) .nav-content .ux-account-nav .nav-item {
        width: auto !important;
    }
    body:not([class*="client-client_login"]) .nav-content .ux-account-nav .nav-link {
        display: flex;
        align-items: center;
        height: 42px;
        padding: 0 12px !important;
        border: 0 !important;
        color: #fff !important;
        font-size: 13px !important;
        font-weight: 500 !important;
    }
    body:not([class*="client-client_login"]) .nav-content .ux-account-nav .dropdown-menu {
        position: absolute !important;
        top: 46px !important;
        right: 0 !important;
        left: auto !important;
        min-width: 230px;
        padding: 8px;
        border: 1px solid #e0e5e9;
        border-radius: 5px;
        background: #fff;
        box-shadow: 0 12px 28px rgba(26, 36, 46, .14);
    }

    body:not([class*="client-client_login"]).ux-sidebar-collapsed .header .container-md {
        justify-content: center;
        padding: 0 14px !important;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .header .logo {
        width: 42px;
        overflow: hidden;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .header .logo a {
        justify-content: flex-start;
        width: 190px;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .header .logo img {
        width: 190px !important;
        max-width: none !important;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a {
        justify-content: center;
        padding: 11px 0 !important;
        color: transparent !important;
        font-size: 0 !important;
    }
}
@media (max-width: 991.98px) {
    body:not([class*="client-client_login"]) .nav-content .ux-account-nav {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
    }
    body:not([class*="client-client_login"]) .nav-content .navbar-nav:not(.ux-account-nav) > li.active > a {
        border: 0 !important;
        background: #202020 !important;
    }
}
body[class*="client-client_login"] .auth-visual::before,
body[class*="client-client_login"] .auth-visual::after,
body[class*="client-client_login"] .auth-visual-copy {
    display: none !important;
}
@media (max-width: 767.98px) {
    body[class*="client-client_login"] .auth-layout { display: block !important; }
    body[class*="client-client_login"] .auth-pane {
        width: 100% !important;
        min-height: 100vh !important;
        padding: 42px 28px !important;
    }
    body[class*="client-client_login"] .auth-visual { display: none !important; }
}

/* Final centered auth presentation: keep the login task quiet and focused. */
body[class*="client-client_login"] {
    background: #fff;
}
body[class*="client-client_login"] .auth-layout {
    display: block;
    width: min(100%, 760px) !important;
    min-height: 100vh;
    margin: 0 auto;
    background: #fff;
}
body[class*="client-client_login"] .auth-pane {
    display: flex;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    padding: 0 28px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
body[class*="client-client_login"] .auth-intro,
body[class*="client-client_login"] .auth-form { width: 100%; max-width: 700px; }
body[class*="client-client_login"] .auth-intro h2 { margin-bottom: 14px; font-size: 38px; }
body[class*="client-client_login"] .auth-intro h4 { font-size: 30px; }
body[class*="client-client_login"] .auth-intro p { font-size: 18px; }
body[class*="client-client_login"] .auth-intro hr { max-width: none; margin-bottom: 16px; }
body[class*="client-client_login"] .auth-form .panel {
    border: 1px solid #d8e0e6;
    border-radius: 8px;
    box-shadow: 0 16px 34px rgba(36, 49, 61, .08);
}
body[class*="client-client_login"] .auth-form .panel-body { padding: 30px 44px 28px; }
body[class*="client-client_login"] .auth-form .panel-footer { padding: 18px 36px; }
body[class*="client-client_login"] .auth-visual { display: none; }
@media (max-width: 767.98px) {
    body[class*="client-client_login"] .auth-pane { display: block; min-height: 0; padding: 40px 20px 32px; }
    body[class*="client-client_login"] .auth-intro { margin-bottom: 26px; }
    body[class*="client-client_login"] .auth-intro h2 { font-size: 30px; }
    body[class*="client-client_login"] .auth-intro h4 { font-size: 24px; }
    body[class*="client-client_login"] .auth-intro p { font-size: 16px; }
    body[class*="client-client_login"] .auth-form .panel-body { padding: 24px 20px 20px; }
    body[class*="client-client_login"] .auth-form .panel-footer { padding: 16px 20px; }
}

/* Final centered auth presentation: keep the login task quiet and focused,
 * with no decorative panel competing with the form. */
body[class*="client-client_login"] {
    background: #fff;
}
body[class*="client-client_login"] .auth-layout {
    display: block;
    width: min(100%, 760px) !important;
    min-height: 100vh;
    margin: 0 auto;
    background: #fff;
}
body[class*="client-client_login"] .auth-pane {
    display: flex;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    padding: 0 28px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
body[class*="client-client_login"] .auth-intro,
body[class*="client-client_login"] .auth-form {
    width: 100%;
    max-width: 700px;
}
body[class*="client-client_login"] .auth-intro h2 { margin-bottom: 14px; font-size: 38px; }
body[class*="client-client_login"] .auth-intro h4 { font-size: 30px; }
body[class*="client-client_login"] .auth-intro p { font-size: 18px; }
body[class*="client-client_login"] .auth-intro hr { max-width: none; margin-bottom: 16px; }
body[class*="client-client_login"] .auth-form .panel {
    border: 1px solid #d8e0e6;
    border-radius: 8px;
    box-shadow: 0 16px 34px rgba(36, 49, 61, .08);
}
body[class*="client-client_login"] .auth-form .panel-body { padding: 30px 44px 28px; }
body[class*="client-client_login"] .auth-form .panel-footer { padding: 18px 36px; }
body[class*="client-client_login"] .auth-visual { display: none; }
@media (max-width: 767.98px) {
    body[class*="client-client_login"] .auth-pane {
        display: block;
        min-height: 0;
        padding: 40px 20px 32px;
    }
    body[class*="client-client_login"] .auth-intro { margin-bottom: 26px; }
    body[class*="client-client_login"] .auth-intro h2 { font-size: 30px; }
    body[class*="client-client_login"] .auth-intro h4 { font-size: 24px; }
    body[class*="client-client_login"] .auth-intro p { font-size: 16px; }
    body[class*="client-client_login"] .auth-form .panel-body { padding: 24px 20px 20px; }
    body[class*="client-client_login"] .auth-form .panel-footer { padding: 16px 20px; }
}

/* Centered auth presentation: a quiet white canvas keeps the login task
 * prominent and matches the supplied reference more closely than a split
 * image panel. The recovery templates inherit the same treatment. */
body[class*="client-client_login"] {
    background: #fff;
}
body[class*="client-client_login"] .auth-layout {
    display: block;
    width: min(100%, 760px) !important;
    min-height: 100vh;
    margin: 0 auto;
    background: #fff;
}
body[class*="client-client_login"] .auth-pane {
    display: flex;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    padding: 0 28px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
body[class*="client-client_login"] .auth-intro,
body[class*="client-client_login"] .auth-form {
    width: 100%;
    max-width: 700px;
}
body[class*="client-client_login"] .auth-intro h2 {
    margin-bottom: 14px;
    font-size: 38px;
}
body[class*="client-client_login"] .auth-intro h4 { font-size: 30px; }
body[class*="client-client_login"] .auth-intro p { font-size: 18px; }
body[class*="client-client_login"] .auth-intro hr { max-width: none; margin-bottom: 16px; }
body[class*="client-client_login"] .auth-form .panel {
    border: 1px solid #d8e0e6;
    border-radius: 8px;
    box-shadow: 0 16px 34px rgba(36, 49, 61, .08);
}
body[class*="client-client_login"] .auth-form .panel-body { padding: 30px 44px 28px; }
body[class*="client-client_login"] .auth-form .panel-footer { padding: 18px 36px; }
body[class*="client-client_login"] .auth-visual { display: none; }

@media (max-width: 767.98px) {
    body[class*="client-client_login"] .auth-pane {
        display: block;
        min-height: 0;
        padding: 40px 20px 32px;
    }
    body[class*="client-client_login"] .auth-intro { margin-bottom: 26px; }
    body[class*="client-client_login"] .auth-intro h2 { font-size: 30px; }
    body[class*="client-client_login"] .auth-intro h4 { font-size: 24px; }
    body[class*="client-client_login"] .auth-intro p { font-size: 16px; }
    body[class*="client-client_login"] .auth-form .panel-body { padding: 24px 20px 20px; }
    body[class*="client-client_login"] .auth-form .panel-footer { padding: 16px 20px; }
}

/* Split authentication canvas inspired by the reference portal. The visual
 * side is deliberately CSS-only so no third-party image or tracking asset is
 * introduced into the login flow. */
body[class*="client-client_login"] .row.login {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}
body[class*="client-client_login"] > .container-md,
body[class*="client-client_login"] .row.login {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}
body[class*="client-client_login"] .auth-layout {
    display: flex;
    width: 100%;
    min-height: 100vh;
    background: #fff;
}
body[class*="client-client_login"] .auth-pane {
    display: flex;
    flex: 0 0 38%;
    flex-direction: column;
    justify-content: center;
    width: 38%;
    max-width: 620px;
    box-sizing: border-box;
    min-height: 100vh;
    padding: 56px clamp(32px, 5vw, 92px);
    background: #fff;
}
body[class*="client-client_login"] .auth-intro,
body[class*="client-client_login"] .auth-form { width: 100%; }
body[class*="client-client_login"] .auth-intro { max-width: 440px; }
body[class*="client-client_login"] .auth-form { max-width: 440px; }
body[class*="client-client_login"] .auth-intro h2 { font-size: 30px; }
body[class*="client-client_login"] .auth-intro h4 { font-size: 21px; }
body[class*="client-client_login"] .auth-intro p { font-size: 15px; }
body[class*="client-client_login"] .auth-form .panel {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
body[class*="client-client_login"] .auth-form .panel-body { padding: 0; }
body[class*="client-client_login"] .auth-form .panel-footer {
    padding: 16px 0 0;
    border-top: 0;
    background: transparent;
}
body[class*="client-client_login"] .auth-visual {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: flex-end;
    min-height: 100vh;
    overflow: hidden;
    padding: 72px;
    color: rgba(255, 255, 255, .94);
    background:
        radial-gradient(circle at 75% 25%, rgba(116, 215, 219, .38), transparent 22%),
        radial-gradient(circle at 18% 78%, rgba(83, 144, 190, .35), transparent 28%),
        linear-gradient(135deg, #122c37 0%, #214e5d 48%, #10262f 100%);
}
body[class*="client-client_login"] .auth-visual::before,
body[class*="client-client_login"] .auth-visual::after {
    position: absolute;
    display: block;
    border: 1px solid rgba(184, 236, 235, .18);
    border-radius: 50%;
    content: "";
}
body[class*="client-client_login"] .auth-visual::before {
    width: 560px;
    height: 560px;
    right: -150px;
    top: 12%;
}
body[class*="client-client_login"] .auth-visual::after {
    width: 760px;
    height: 760px;
    right: -260px;
    top: 2%;
}
body[class*="client-client_login"] .auth-visual-copy {
    position: relative;
    z-index: 1;
    max-width: 470px;
}
body[class*="client-client_login"] .auth-visual-copy span {
    display: block;
    margin-bottom: 14px;
    color: #8ad4d5;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
body[class*="client-client_login"] .auth-visual-copy strong {
    display: block;
    font-size: clamp(30px, 3vw, 52px);
    line-height: 1.05;
    letter-spacing: -.03em;
}

@media (max-width: 767.98px) {
    body[class*="client-client_login"] .auth-layout { display: block; }
    body[class*="client-client_login"] .auth-pane {
        display: block;
        width: 100%;
        max-width: none;
        min-height: 0;
        padding: 40px 20px 36px;
    }
    body[class*="client-client_login"] .auth-intro,
    body[class*="client-client_login"] .auth-form { max-width: none; }
    body[class*="client-client_login"] .auth-intro { margin-bottom: 28px; }
    body[class*="client-client_login"] .auth-visual { display: none; }
}

@media (max-width: 767.98px) {
    .header .container-md { max-width: none; }
    .nav-content nav.navbar .container-md {
        display: block !important;
        min-height: 0;
        padding: 0;
    }
    .nav-content .navbar-collapse { width: 100%; }
    .nav-content .navbar-nav { flex-direction: column; width: 100%; }
    .nav-content .navbar-nav + .navbar-nav { margin-left: 0; }
    .nav-content .navbar-nav:before { display: none; }
    .nav-content .dropdown-menu { position: static; box-shadow: none; }
}

/* Unauthenticated screens share one focused shell. The existing login,
 * reset, username-recovery, OTP, and confirmation templates supply the
 * security-sensitive fields; this layer only improves their presentation. */
body[class*="client-client_login"] {
    min-height: 100vh;
    background: #f3f6f8;
}
body[class*="client-client_login"] .container-md {
    max-width: none;
}
body[class*="client-client_login"] .row.login {
    display: flex;
    align-items: center;
    max-width: 1040px;
    min-height: calc(100vh - 64px);
    margin: 0 auto;
    padding: 56px 24px 40px;
}
body[class*="client-client_login"] .row.login > [class*="col-"] {
    width: 50%;
    max-width: 50%;
    flex: 0 0 50%;
    margin: 0;
    padding: 24px 28px;
}
body[class*="client-client_login"] .row.login > [class*="col-"]:first-child {
    padding-right: 56px;
}
body[class*="client-client_login"] .row.login > [class*="col-"]:first-child h2 {
    margin: 0 0 12px;
    color: var(--ux-text);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.02em;
}
body[class*="client-client_login"] .row.login > [class*="col-"]:first-child h2 i {
    color: var(--ux-topbar);
    font-size: .85em;
}
body[class*="client-client_login"] .row.login > [class*="col-"]:first-child h4 {
    margin: 0 0 10px;
    color: var(--ux-text);
    font-size: 22px;
    font-weight: 700;
}
body[class*="client-client_login"] .row.login > [class*="col-"]:first-child p {
    max-width: 390px;
    margin-bottom: 24px;
    color: #66717d;
    font-size: 16px;
    line-height: 1.65;
}
body[class*="client-client_login"] .row.login > [class*="col-"]:first-child hr {
    max-width: 390px;
    margin: 0;
    border-top-color: #dce3e8;
}
body[class*="client-client_login"] .row.login .panel {
    margin: 0;
    overflow: hidden;
    border: 1px solid #dfe6eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(36, 49, 61, .08);
}
body[class*="client-client_login"] .row.login .panel-body {
    padding: 26px 28px 22px;
}
body[class*="client-client_login"] .row.login .panel-footer {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 22px;
    border-top: 1px solid var(--ux-border);
    background: #f8fafb;
}
body[class*="client-client_login"] .row.login .panel-footer a {
    color: var(--ux-topbar);
    font-size: 13px;
    font-weight: 600;
}
body[class*="client-client_login"] .row.login .form-group { margin-bottom: 18px; }
body[class*="client-client_login"] .row.login .form-group > label {
    display: block;
    margin-bottom: 7px;
    color: #4f5965;
    font-size: 13px;
    font-weight: 700;
}
body[class*="client-client_login"] .row.login .form-control {
    min-height: 46px;
    border-radius: 7px;
}
body[class*="client-client_login"] .row.login .checkbox {
    margin: 4px 0 18px;
    color: #66717d;
    font-size: 13px;
}
body[class*="client-client_login"] .row.login .checkbox label {
    display: flex;
    align-items: center;
    gap: 8px;
}
body[class*="client-client_login"] .row.login .checkbox input { margin: 0; }
body[class*="client-client_login"] .row.login .btn-block {
    min-height: 44px;
    border-radius: 7px;
    font-weight: 700;
}
body[class*="client-client_login"] .row.login .btn-success {
    background: var(--ux-topbar) !important;
    border-color: var(--ux-topbar) !important;
}
body[class*="client-client_login"] .row.login .btn-success:hover,
body[class*="client-client_login"] .row.login .btn-success:focus {
    background: var(--ux-topbar-dark) !important;
    border-color: var(--ux-topbar-dark) !important;
}

@media (max-width: 767.98px) {
    body[class*="client-client_login"] .row.login {
        display: block;
        min-height: 0;
        padding: 32px 16px 28px;
    }
    body[class*="client-client_login"] .row.login > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        padding: 20px 0;
    }
    body[class*="client-client_login"] .row.login > [class*="col-"]:first-child {
        padding-right: 0;
    }
    body[class*="client-client_login"] .row.login > [class*="col-"]:first-child h2 { font-size: 27px; }
    body[class*="client-client_login"] .row.login > [class*="col-"]:first-child h4 { font-size: 20px; }
    body[class*="client-client_login"] .row.login .panel-body { padding: 22px 20px 18px; }
    body[class*="client-client_login"] .row.login .panel-footer {
        flex-direction: column;
        gap: 10px;
    }
}

/* Final auth-canvas overrides sit last so Bootstrap's legacy .row.login
 * sizing cannot reintroduce the narrow 1,040px shell. */
body[class*="client-client_login"] .row.login {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
}
body[class*="client-client_login"] .auth-layout {
    width: 100% !important;
    min-height: 100vh;
}
body[class*="client-client_login"] .auth-pane {
    flex: 0 0 38%;
    width: 38%;
    max-width: 620px;
    box-sizing: border-box;
}
@media (max-width: 767.98px) {
    body[class*="client-client_login"] .auth-pane {
        width: 100%;
        max-width: none;
    }
}

/* EOF sidebar owner: this must stay after every auth and workspace block. */
@media (min-width: 992px) {
    body:not([class*="client-client_login"]) {
        --ux-workspace-rail: 250px !important;
        --ux-workspace-bar: 58px !important;
        background: #f2f4f6 !important;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed {
        --ux-workspace-rail: 84px !important;
    }
    body:not([class*="client-client_login"]) .header {
        position: fixed !important;
        inset: 0 auto auto 0 !important;
        width: var(--ux-workspace-rail) !important;
        height: 96px !important;
        background: #202020 !important;
        box-shadow: none !important;
    }
    body:not([class*="client-client_login"]) .header .container-md,
    body:not([class*="client-client_login"]) .header .logo,
    body:not([class*="client-client_login"]) .header .logo a {
        height: 96px !important;
    }
    body:not([class*="client-client_login"]) .header .container-md {
        position: relative;
        max-width: none !important;
        padding: 0 22px !important;
    }
    body:not([class*="client-client_login"]) .header .logo img {
        max-width: 184px !important;
        max-height: 44px !important;
    }
    body:not([class*="client-client_login"]) .header .badge {
        top: 67px !important;
        left: 18px !important;
        max-width: 204px !important;
    }
    body:not([class*="client-client_login"]) .ux-sidebar-toggle {
        top: 33px !important;
        right: -15px !important;
        display: inline-flex !important;
        width: 30px !important;
        height: 30px !important;
        border: 2px solid #f2f4f6 !important;
        background: #303030 !important;
        color: #b9b9b9 !important;
    }
    body:not([class*="client-client_login"]) .nav-content {
        position: fixed !important;
        inset: 96px auto 0 0 !important;
        width: var(--ux-workspace-rail) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: #2d2d2d !important;
        box-shadow: none !important;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar {
        min-height: 0 !important;
        padding: 0 0 24px !important;
        background: transparent !important;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar .container-md,
    body:not([class*="client-client_login"]) .nav-content .navbar-collapse {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        padding: 0 !important;
    }
    body:not([class*="client-client_login"]) .nav-content .navbar-nav:not(.ux-account-nav)::before,
    body:not([class*="client-client_login"]) .nav-content .navbar-toggler {
        display: none !important;
        content: none !important;
    }
    body:not([class*="client-client_login"]) .ux-sidebar-section-title {
        display: flex !important;
        align-items: center !important;
        min-height: 27px !important;
        padding: 0 16px !important;
        color: #8f8f8f !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: .04em !important;
        text-transform: uppercase !important;
    }
    body:not([class*="client-client_login"]) .ux-sidebar-menu-title {
        background: #303030 !important;
    }
    body:not([class*="client-client_login"]) .nav-content .navbar-nav {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body:not([class*="client-client_login"]) .nav-content .nav-item {
        width: 100% !important;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a {
        display: flex !important;
        align-items: center !important;
        min-height: 40px !important;
        padding: 0 16px !important;
        border: 0 !important;
        background: transparent !important;
        color: #c5c5c5 !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a i {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 24px !important;
        width: 24px !important;
        height: 24px !important;
        margin-right: 12px !important;
        color: #777 !important;
        font-size: 16px !important;
        text-align: center !important;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li.active > a,
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a:hover,
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a:focus {
        background: #202020 !important;
        color: #f5f5f5 !important;
    }
    body:not([class*="client-client_login"]) .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li.active > a i {
        border-radius: 50% !important;
        background: #2f7f97 !important;
        color: #d9f0f5 !important;
        font-size: 11px !important;
    }
    body:not([class*="client-client_login"]) .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-toggle::after {
        position: absolute !important;
        top: 50% !important;
        right: 18px !important;
        margin: -3px 0 0 !important;
        border-top-color: #b8b8b8 !important;
    }
    body:not([class*="client-client_login"]) .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-menu {
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 5px 0 8px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #242424 !important;
        box-shadow: none !important;
    }
    body:not([class*="client-client_login"]) .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-item {
        min-height: 32px !important;
        padding: 6px 20px 6px 55px !important;
        color: #b8b8b8 !important;
        font-size: 12px !important;
        font-weight: 300 !important;
    }
    body:not([class*="client-client_login"]) .ux-sidebar-settings {
        display: block !important;
        width: 100% !important;
        margin-top: 24px !important;
    }
    body:not([class*="client-client_login"]) .ux-lights-toggle {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 42px !important;
        padding: 6px 18px !important;
        color: #c5c5c5 !important;
    }
    body:not([class*="client-client_login"]) .ux-switch-label {
        margin-left: 12px !important;
        color: #c5c5c5 !important;
        font-size: 14px !important;
        font-weight: 300 !important;
    }
    body:not([class*="client-client_login"]) .title {
        inset: 0 0 auto var(--ux-workspace-rail) !important;
        height: var(--ux-workspace-bar) !important;
        background: #55a7c6 !important;
    }
    body:not([class*="client-client_login"]) .nav-content .ux-account-nav {
        position: fixed !important;
        top: 0 !important;
        right: 24px !important;
        flex-direction: row !important;
        align-items: center !important;
        width: auto !important;
        height: var(--ux-workspace-bar) !important;
    }
    body:not([class*="client-client_login"]) .nav-content .ux-account-nav .nav-item {
        width: auto !important;
    }
    body:not([class*="client-client_login"]) .nav-content .ux-account-nav .nav-link {
        height: 42px !important;
        padding: 0 12px !important;
        color: #fff !important;
        font-size: 13px !important;
    }
    body:not([class*="client-client_login"]) .nav-content .ux-account-nav .dropdown-menu {
        position: absolute !important;
        top: 46px !important;
        right: 0 !important;
        left: auto !important;
        min-width: 236px !important;
        padding: 8px !important;
        border: 1px solid #e0e5e9 !important;
        border-radius: 4px !important;
        background: #fff !important;
        box-shadow: 0 12px 28px rgba(26, 36, 46, .14) !important;
    }
    body:not([class*="client-client_login"]) .title + .container-md {
        width: calc(100% - var(--ux-workspace-rail)) !important;
        max-width: none !important;
        min-height: 100vh !important;
        margin: 0 0 0 var(--ux-workspace-rail) !important;
        padding: calc(var(--ux-workspace-bar) + 28px) 28px 44px !important;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .header .badge {
        display: none !important;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .ux-sidebar-section-title,
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .ux-switch-label {
        justify-content: center !important;
        overflow: hidden !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        color: transparent !important;
        font-size: 0 !important;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .ux-sidebar-section-title::before {
        color: #777 !important;
        content: "..." !important;
        font-size: 15px !important;
        letter-spacing: 2px !important;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content {
        overflow: visible !important;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li {
        position: relative !important;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a {
        justify-content: center !important;
        min-height: 42px !important;
        padding: 0 !important;
        color: transparent !important;
        font-size: 0 !important;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a i {
        margin: 0 !important;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a::before {
        position: absolute;
        z-index: 1080;
        top: 50%;
        left: calc(100% + 10px);
        display: none;
        min-width: max-content;
        padding: 8px 10px;
        border-radius: 3px;
        background: #202020;
        color: #fff;
        content: attr(data-sidebar-label);
        font-size: 13px;
        line-height: 1;
        transform: translateY(-50%);
        box-shadow: 0 7px 18px rgba(0, 0, 0, .24);
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a:hover::before,
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content nav.navbar .navbar-nav:not(.ux-account-nav) > li > a:focus::before {
        display: block !important;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-toggle::after {
        display: none !important;
    }
    body:not([class*="client-client_login"]).ux-sidebar-collapsed .nav-content .navbar-nav:not(.ux-account-nav) .dropdown-menu {
        position: absolute !important;
        top: 0 !important;
        left: 84px !important;
        width: 228px !important;
        padding: 7px 0 !important;
        box-shadow: 0 10px 26px rgba(0, 0, 0, .26) !important;
    }
}

@media (max-width: 991.98px) {
    body:not([class*="client-client_login"]) .header {
        background: #202020 !important;
    }
    body:not([class*="client-client_login"]) .nav-content {
        background: #2d2d2d !important;
    }
    body:not([class*="client-client_login"]) .ux-sidebar-menu-title {
        background: #303030 !important;
    }
    body:not([class*="client-client_login"]) .nav-content .nav-link {
        min-height: 48px !important;
        color: #d0d0d0 !important;
        font-size: 16px !important;
    }
}