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

/* This stylesheet is loaded last. It owns the measured SwiftModders-style
 * sidebar typography and utility topbar without changing Blesta behavior. */

/* Keep expandable-row controls inside the final table cell. Blesta's base
 * theme uses a negative margin that can push the arrow beyond panel edges. */
tr.expand td:last-of-type {
    position: relative !important;
    padding-right: 48px !important;
}
tr.expand td:last-of-type::after {
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    display: block !important;
    float: none !important;
    width: 14px !important;
    margin: 0 !important;
    text-align: center !important;
    transform: translateY(-50%) !important;
}

@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 {
        z-index: 1070 !important;
        transition: width .6s ease-in-out !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;
        z-index: 1050 !important;
        transition: width .6s ease-in-out !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;
        /* Center the control in the first 65px utility-bar lane. */
        left: calc(var(--ux-workspace-rail) + 10.5px) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 2px !important;
        background: #2790ae !important;
        color: #fff !important;
        font-size: 18px !important;
        line-height: 1 !important;
        box-shadow: none !important;
        transition: left .6s ease-in-out !important;
    }
    body:not([class*="client-client_login"]) .ux-sidebar-toggle > i {
        margin: 0 !important;
        line-height: 1 !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;
        transition: left .6s ease-in-out !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"]) .ux-topbar-language {
        position: fixed !important;
        z-index: 1060 !important;
        top: 10.5px !important;
        right: 164px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        width: 142px !important;
        height: 44px !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;
        white-space: nowrap !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: none !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;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    /* Keep the account target visually circular. Older navigation rules can
     * otherwise paint a dark rectangle behind the icon during hover. */
    body:not([class*="client-client_login"]) .nav-content .ux-account-nav .nav-item,
    body:not([class*="client-client_login"]) .nav-content .ux-account-nav .nav-link,
    body:not([class*="client-client_login"]) .nav-content .ux-account-nav .nav-link:hover,
    body:not([class*="client-client_login"]) .nav-content .ux-account-nav .nav-link:focus,
    body:not([class*="client-client_login"]) .nav-content .ux-account-nav .nav-link:focus-visible,
    body:not([class*="client-client_login"]) .nav-content .ux-account-nav.show .nav-link {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !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;
        flex: 0 0 40px !important;
        width: 40px !important;
        height: 40px !important;
        border: 1px solid rgba(255, 255, 255, .42) !important;
        border-radius: 50% !important;
        background: rgba(20, 73, 91, .18) !important;
        color: #fff !important;
        font-size: 24px !important;
        transition: border-color .25s ease, background-color .25s ease, transform .25s ease !important;
    }
    body:not([class*="client-client_login"]) .ux-account-trigger-icon i {
        color: #fff !important;
        font-size: 18px !important;
    }
    body:not([class*="client-client_login"]) .nav-content .ux-account-nav .nav-link:hover .ux-account-trigger-icon,
    body:not([class*="client-client_login"]) .nav-content .ux-account-nav .nav-link:focus-visible .ux-account-trigger-icon,
    body:not([class*="client-client_login"]) .nav-content .ux-account-nav.show .ux-account-trigger-icon {
        border-color: rgba(255, 255, 255, .75) !important;
        background: rgba(20, 73, 91, .34) !important;
        transform: translateY(-1px) !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: 0 250px 0 var(--ux-workspace-rail) !important;
        transform: translateY(65px) !important;
        background: #fff !important;
        transition: width .6s ease-in-out, margin-left .6s ease-in-out !important;
    }
    /* Only the dashboard renders the 250px client-information rail. Other
     * routes let the My Account title band use the full workspace width. */
    body:not(.client-client_main-index):not([class*="client-client_login"]) .ux-page-title {
        width: calc(100% - var(--ux-workspace-rail)) !important;
        margin-right: 0 !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: 65px 0 0 var(--ux-workspace-rail) !important;
        padding: 28px 28px 44px !important;
        transition: width .6s ease-in-out, margin-left .6s ease-in-out !important;
    }

    /* The account rail belongs directly under the utility bar, not below the
     * page-title band. Pull only this flex column upward and remove its grid
     * gutter so the 250px rail starts at the top and uses its full width. */
    body:not([class*="client-client_login"]) #my-info {
        margin-top: -132px !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    body:not([class*="client-client_login"]) #my-info > .card,
    body:not([class*="client-client_login"]) #my-info > .list-group {
        width: 100% !important;
    }
}

@media (max-width: 991.98px) {
    body:not([class*="client-client_login"]) .ux-topbar-date,
    body:not([class*="client-client_login"]) .ux-topbar-language,
    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;
    }
}

/* Dashboard cards use the same compact rhythm and lift interaction as the
 * visual reference. The selectors stay inside .cards so ordinary panels are
 * unaffected by this presentation-only treatment. */
body:not([class*="client-client_login"]) .cards > [class*="col-"] {
    margin-bottom: 30px !important;
}
body:not([class*="client-client_login"]) .cards > [class*="col-"] > a {
    display: block !important;
    transition: transform .3s ease-in-out !important;
}
body:not([class*="client-client_login"]) .cards > [class*="col-"] > a:hover,
body:not([class*="client-client_login"]) .cards > [class*="col-"] > a:focus-visible {
    transform: translateY(-5px) !important;
    text-decoration: none !important;
}
body:not([class*="client-client_login"]) .cards .card {
    position: relative !important;
    display: flex !important;
    min-height: 130px !important;
    padding: 30px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    font-family: Montserrat, sans-serif !important;
    transition: box-shadow .3s ease-in-out !important;
}
body:not([class*="client-client_login"]) .cards > [class*="col-"] > a:hover .card,
body:not([class*="client-client_login"]) .cards > [class*="col-"] > a:focus-visible .card {
    box-shadow: 0 17px 50px rgba(0, 0, 0, .1), 0 12px 15px rgba(0, 0, 0, .1) !important;
}
body:not([class*="client-client_login"]) .cards .card-content {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    padding: 0 !important;
    text-align: left !important;
}
body:not([class*="client-client_login"]) .cards .card-value {
    margin: 0 0 5px !important;
    font-family: Montserrat, sans-serif !important;
    font-size: 48px !important;
    font-weight: 600 !important;
    line-height: 45px !important;
}
body:not([class*="client-client_login"]) .cards .card-label {
    margin: 0 !important;
    font-family: Montserrat, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
}
body:not([class*="client-client_login"]) .cards .card::before {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    content: "" !important;
    background: #000 !important;
    opacity: 0 !important;
}
body:not([class*="client-client_login"]) .cards .card::after {
    position: absolute !important;
    right: -10px !important;
    bottom: -10px !important;
    z-index: 1 !important;
    color: currentColor !important;
    font-family: "Font Awesome 5 Free" !important;
    font-size: 64px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    opacity: .6 !important;
    transition: transform .3s ease-in-out, opacity .3s ease-in-out !important;
}
body:not([class*="client-client_login"]) .cards > [class*="col-"] > a:hover .card::after,
body:not([class*="client-client_login"]) .cards > [class*="col-"] > a:focus-visible .card::after {
    transform: scale(3) !important;
    opacity: .3 !important;
}
body:not([class*="client-client_login"]) .cards #client_cards_get_services_count::before {
    opacity: .1 !important;
}
body:not([class*="client-client_login"]) .cards #client_cards_get_services_count::after { content: "\f49e" !important; opacity: .3 !important; }
body:not([class*="client-client_login"]) .cards #client_cards_get_invoices_count::after { content: "\f09d" !important; }
body:not([class*="client-client_login"]) .cards #domains_get_domain_count::after { content: "\f0ac" !important; }
body:not([class*="client-client_login"]) .cards #order_get_orders_count::after { content: "\f291" !important; }
body:not([class*="client-client_login"]) .cards #support_manager_get_open_tickets_count::after { content: "\f3ff" !important; }

/* Payment actions need a clear primary treatment; this scopes the cyan button
 * color to payment URLs and leaves unrelated light utility buttons unchanged. */
body:not([class*="client-client_login"]) a.btn[href*="/client/pay/"] {
    border-color: #2ca1c3 !important;
    background: #2ca1c3 !important;
    color: #fff !important;
    transition: all .3s ease-in-out !important;
}
body:not([class*="client-client_login"]) a.btn[href*="/client/pay/"]:hover,
body:not([class*="client-client_login"]) a.btn[href*="/client/pay/"]:focus-visible {
    border-color: #1e6d85 !important;
    background: #1e6d85 !important;
    color: #fff !important;
}

/* Blesta renders the payment workflow actions as generic light buttons. Keep
 * them scoped to this widget so other secondary controls retain their style. */
body.client-client_pay-index #client_pay #edit_amounts,
body.client-client_pay-index #client_pay form.disable-on-submit > button[type="submit"] {
    border-color: #2ca1c3 !important;
    background: #2ca1c3 !important;
    color: #fff !important;
    box-shadow: 0 5px 14px rgba(44, 161, 195, .18) !important;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
body.client-client_pay-index #client_pay #edit_amounts:hover,
body.client-client_pay-index #client_pay #edit_amounts:focus-visible,
body.client-client_pay-index #client_pay form.disable-on-submit > button[type="submit"]:hover,
body.client-client_pay-index #client_pay form.disable-on-submit > button[type="submit"]:focus-visible {
    border-color: #217f9a !important;
    background: #217f9a !important;
    color: #fff !important;
    box-shadow: 0 7px 18px rgba(33, 127, 154, .25) !important;
    transform: translateY(-1px);
}
body.client-client_pay-index #client_pay form.disable-on-submit > button[type="submit"]:disabled {
    border-color: #80c6d9 !important;
    background: #80c6d9 !important;
    color: #fff !important;
    box-shadow: none !important;
    transform: none !important;
}

@media (max-width: 575.98px) {
    body:not([class*="client-client_login"]) .cards .card {
        min-height: 112px !important;
        padding: 24px !important;
    }
    body:not([class*="client-client_login"]) .cards .card-value {
        font-size: 40px !important;
        line-height: 40px !important;
    }
}

/* Lights-off is a complete surface theme. Blesta gives many components their
 * own white background, so each visible layer is mapped explicitly instead of
 * relying on body inheritance and leaving bright gaps around dark panels. */
body:not([class*="client-client_login"]).ux-lights-off {
    --ux-dark-canvas: #212121;
    --ux-dark-panel: #323232;
    --ux-dark-raised: #424242;
    --ux-dark-control: #292929;
    --ux-dark-border: rgba(255, 255, 255, .125);
    --ux-dark-text: #eeeeee;
    --ux-dark-muted: #bdbdbd;
    background: var(--ux-dark-canvas) !important;
    color: var(--ux-dark-text) !important;
}
body:not([class*="client-client_login"]).ux-lights-off .ux-page-title,
body:not([class*="client-client_login"]).ux-lights-off .ux-page-title + .container-md,
body:not([class*="client-client_login"]).ux-lights-off main,
body:not([class*="client-client_login"]).ux-lights-off .content {
    background: var(--ux-dark-canvas) !important;
    color: var(--ux-dark-text) !important;
}
body:not([class*="client-client_login"]).ux-lights-off .ux-page-title h1,
body:not([class*="client-client_login"]).ux-lights-off .ux-page-title h2,
body:not([class*="client-client_login"]).ux-lights-off .ux-page-title h3,
body:not([class*="client-client_login"]).ux-lights-off h1,
body:not([class*="client-client_login"]).ux-lights-off h2,
body:not([class*="client-client_login"]).ux-lights-off h3,
body:not([class*="client-client_login"]).ux-lights-off h4,
body:not([class*="client-client_login"]).ux-lights-off h5,
body:not([class*="client-client_login"]).ux-lights-off h6,
body:not([class*="client-client_login"]).ux-lights-off label,
body:not([class*="client-client_login"]).ux-lights-off legend,
body:not([class*="client-client_login"]).ux-lights-off address,
body:not([class*="client-client_login"]).ux-lights-off p {
    color: var(--ux-dark-text) !important;
}
body:not([class*="client-client_login"]).ux-lights-off .text-muted,
body:not([class*="client-client_login"]).ux-lights-off small,
body:not([class*="client-client_login"]).ux-lights-off .help-block,
body:not([class*="client-client_login"]).ux-lights-off .form-text {
    color: var(--ux-dark-muted) !important;
}
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 .modal-content,
body:not([class*="client-client_login"]).ux-lights-off .dropdown-menu,
body:not([class*="client-client_login"]).ux-lights-off #my-info .card {
    border-color: var(--ux-dark-border) !important;
    background: var(--ux-dark-panel) !important;
    color: var(--ux-dark-text) !important;
    box-shadow: none !important;
}
body:not([class*="client-client_login"]).ux-lights-off .card-blesta .card-header,
body:not([class*="client-client_login"]).ux-lights-off .card-blesta .card-footer,
body:not([class*="client-client_login"]).ux-lights-off .panel .panel-heading,
body:not([class*="client-client_login"]).ux-lights-off .panel .panel-footer,
body:not([class*="client-client_login"]).ux-lights-off #my-info .card-header,
body:not([class*="client-client_login"]).ux-lights-off #my-info .card-footer,
body:not([class*="client-client_login"]).ux-lights-off .modal-header,
body:not([class*="client-client_login"]).ux-lights-off .modal-footer {
    border-color: var(--ux-dark-border) !important;
    background: var(--ux-dark-raised) !important;
    color: var(--ux-dark-text) !important;
}
body:not([class*="client-client_login"]).ux-lights-off .card-body,
body:not([class*="client-client_login"]).ux-lights-off .panel-body,
body:not([class*="client-client_login"]).ux-lights-off .list-group-item,
body:not([class*="client-client_login"]).ux-lights-off .dropdown-item,
body:not([class*="client-client_login"]).ux-lights-off .modal-body {
    border-color: var(--ux-dark-border) !important;
    background: var(--ux-dark-panel) !important;
    color: var(--ux-dark-text) !important;
}
body:not([class*="client-client_login"]).ux-lights-off .list-group-item:hover,
body:not([class*="client-client_login"]).ux-lights-off .list-group-item:focus,
body:not([class*="client-client_login"]).ux-lights-off .dropdown-item:hover,
body:not([class*="client-client_login"]).ux-lights-off .dropdown-item:focus {
    background: var(--ux-dark-raised) !important;
    color: #fff !important;
}
body:not([class*="client-client_login"]).ux-lights-off .table-responsive,
body:not([class*="client-client_login"]).ux-lights-off table,
body:not([class*="client-client_login"]).ux-lights-off .table {
    border-color: var(--ux-dark-border) !important;
    background: transparent !important;
    color: var(--ux-dark-text) !important;
}
body:not([class*="client-client_login"]).ux-lights-off .table thead th,
body:not([class*="client-client_login"]).ux-lights-off .table thead td {
    border-color: var(--ux-dark-border) !important;
    background: var(--ux-dark-canvas) !important;
    color: #e0e0e0 !important;
}
body:not([class*="client-client_login"]).ux-lights-off .table thead a {
    color: #e0e0e0 !important;
}
body:not([class*="client-client_login"]).ux-lights-off .table tbody td,
body:not([class*="client-client_login"]).ux-lights-off .table tbody th,
body:not([class*="client-client_login"]).ux-lights-off .table-striped tbody tr:nth-of-type(odd) td,
body:not([class*="client-client_login"]).ux-lights-off .table-striped tbody tr:nth-of-type(even) td,
body:not([class*="client-client_login"]).ux-lights-off .table-striped-alt tbody tr:nth-of-type(odd) td,
body:not([class*="client-client_login"]).ux-lights-off .table-striped-alt tbody tr:nth-of-type(even) td {
    border-color: var(--ux-dark-border) !important;
    background: var(--ux-dark-raised) !important;
    color: var(--ux-dark-text) !important;
}
body:not([class*="client-client_login"]).ux-lights-off .table-hover tbody tr:hover td {
    background: #4b4b4b !important;
    color: #fff !important;
}
body:not([class*="client-client_login"]).ux-lights-off .form-control,
body:not([class*="client-client_login"]).ux-lights-off .custom-select,
body:not([class*="client-client_login"]).ux-lights-off input,
body:not([class*="client-client_login"]).ux-lights-off select,
body:not([class*="client-client_login"]).ux-lights-off textarea {
    border-color: #616161 !important;
    background: var(--ux-dark-control) !important;
    color: #e0e0e0 !important;
}
body:not([class*="client-client_login"]).ux-lights-off .form-control::placeholder,
body:not([class*="client-client_login"]).ux-lights-off input::placeholder,
body:not([class*="client-client_login"]).ux-lights-off textarea::placeholder {
    color: #9e9e9e !important;
}
body:not([class*="client-client_login"]).ux-lights-off .form-control:focus,
body:not([class*="client-client_login"]).ux-lights-off input:focus,
body:not([class*="client-client_login"]).ux-lights-off select:focus,
body:not([class*="client-client_login"]).ux-lights-off textarea:focus {
    border-color: #2ca1c3 !important;
    box-shadow: 0 0 0 3px rgba(44, 161, 195, .22) !important;
}
body:not([class*="client-client_login"]).ux-lights-off .btn-light,
body:not([class*="client-client_login"]).ux-lights-off .btn-default {
    border-color: #616161 !important;
    background: var(--ux-dark-control) !important;
    color: var(--ux-dark-text) !important;
}
body:not([class*="client-client_login"]).ux-lights-off .btn-light:hover,
body:not([class*="client-client_login"]).ux-lights-off .btn-light:focus,
body:not([class*="client-client_login"]).ux-lights-off .btn-default:hover,
body:not([class*="client-client_login"]).ux-lights-off .btn-default:focus {
    background: var(--ux-dark-raised) !important;
    color: #fff !important;
}

/* Payment totals use Bootstrap's light card utility. Give this summary its own
 * dark surface so the label and amount never become light text on white. */
body:not([class*="client-client_login"]).ux-lights-off .ux-payment-total {
    border-color: var(--ux-dark-border) !important;
    background: var(--ux-dark-raised) !important;
    color: var(--ux-dark-text) !important;
}
body:not([class*="client-client_login"]).ux-lights-off .ux-payment-total strong,
body:not([class*="client-client_login"]).ux-lights-off .ux-payment-total .currency_value {
    color: #fff !important;
}
body:not([class*="client-client_login"]).ux-lights-off .alert-info {
    border-color: #245967 !important;
    background: #173e49 !important;
    color: #9bdce8 !important;
    box-shadow: none !important;
}
body:not([class*="client-client_login"]).ux-lights-off .alert-warning {
    border-color: #ad6700 !important;
    background: #995b00 !important;
    color: #ffb13d !important;
    box-shadow: none !important;
}
body:not([class*="client-client_login"]).ux-lights-off .alert-danger {
    border-color: #8e3636 !important;
    background: #642828 !important;
    color: #ffb3b3 !important;
    box-shadow: none !important;
}
body:not([class*="client-client_login"]).ux-lights-off .alert-success {
    border-color: #356b42 !important;
    background: #244b2e !important;
    color: #a9dfb6 !important;
    box-shadow: none !important;
}
body:not([class*="client-client_login"]).ux-lights-off hr,
body:not([class*="client-client_login"]).ux-lights-off .nav-tabs,
body:not([class*="client-client_login"]).ux-lights-off .dropdown-divider {
    border-color: var(--ux-dark-border) !important;
}
body:not([class*="client-client_login"]).ux-lights-off .nav-tabs .nav-link {
    color: var(--ux-dark-muted) !important;
}
body:not([class*="client-client_login"]).ux-lights-off .nav-tabs .nav-link.active,
body:not([class*="client-client_login"]).ux-lights-off .nav-tabs li.active a {
    border-color: var(--ux-dark-border) !important;
    border-bottom-color: var(--ux-dark-panel) !important;
    background: var(--ux-dark-panel) !important;
    color: #fff !important;
}

/* Keep the colorful summary cards and primary payment actions intact in dark
 * mode; generic panel and light-button rules above must not mute them. */
body:not([class*="client-client_login"]).ux-lights-off .cards .card {
    color: inherit;
}
body:not([class*="client-client_login"]).ux-lights-off a.btn[href*="/client/pay/"] {
    border-color: #2ca1c3 !important;
    background: #2ca1c3 !important;
    color: #fff !important;
}

/* The primary navigation already communicates the current area. Removing the
 * repeated page-title band gives that space back to the actual page content. */
body:not([class*="client-client_login"]) .ux-page-title {
    display: none !important;
}

/* Signed-in actions use color throughout the portal, including buttons that
 * plugins render with Bootstrap's white `btn-light` or legacy `btn-default`
 * classes. Semantic success, warning, and danger actions keep their meaning. */
body:not([class*="client-client_login"]) .btn-light,
body:not([class*="client-client_login"]) .btn-default,
body:not([class*="client-client_login"]) .btn-secondary,
body:not([class*="client-client_login"]) .btn-primary,
body:not([class*="client-client_login"]) .btn-info,
body:not([class*="client-client_login"]) .btn-outline-primary,
body:not([class*="client-client_login"]) .btn-outline-secondary,
body:not([class*="client-client_login"]) .btn-outline-info,
body:not([class*="client-client_login"]) .btn-outline-light,
body:not([class*="client-client_login"]) .btn:not([class*="btn-"]) {
    border-color: #2ca1c3 !important;
    background: #2ca1c3 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(44, 161, 195, .16) !important;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
body:not([class*="client-client_login"]) .btn-light:hover,
body:not([class*="client-client_login"]) .btn-light:focus-visible,
body:not([class*="client-client_login"]) .btn-default:hover,
body:not([class*="client-client_login"]) .btn-default:focus-visible,
body:not([class*="client-client_login"]) .btn-secondary:hover,
body:not([class*="client-client_login"]) .btn-secondary:focus-visible,
body:not([class*="client-client_login"]) .btn-primary:hover,
body:not([class*="client-client_login"]) .btn-primary:focus-visible,
body:not([class*="client-client_login"]) .btn-info:hover,
body:not([class*="client-client_login"]) .btn-info:focus-visible,
body:not([class*="client-client_login"]) .btn-outline-primary:hover,
body:not([class*="client-client_login"]) .btn-outline-primary:focus-visible,
body:not([class*="client-client_login"]) .btn-outline-secondary:hover,
body:not([class*="client-client_login"]) .btn-outline-secondary:focus-visible,
body:not([class*="client-client_login"]) .btn-outline-info:hover,
body:not([class*="client-client_login"]) .btn-outline-info:focus-visible,
body:not([class*="client-client_login"]) .btn-outline-light:hover,
body:not([class*="client-client_login"]) .btn-outline-light:focus-visible,
body:not([class*="client-client_login"]) .btn:not([class*="btn-"]):hover,
body:not([class*="client-client_login"]) .btn:not([class*="btn-"]):focus-visible {
    border-color: #217f9a !important;
    background: #217f9a !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(33, 127, 154, .24) !important;
    transform: translateY(-1px);
}
body:not([class*="client-client_login"]) .btn-success,
body:not([class*="client-client_login"]) .btn-outline-success {
    border-color: #249a52 !important;
    background: #28a95a !important;
    color: #fff !important;
}
body:not([class*="client-client_login"]) .btn-warning,
body:not([class*="client-client_login"]) .btn-outline-warning {
    border-color: #e3a500 !important;
    background: #f0b400 !important;
    color: #20252d !important;
}
body:not([class*="client-client_login"]) .btn-danger,
body:not([class*="client-client_login"]) .btn-outline-danger {
    border-color: #c9434c !important;
    background: #d94b55 !important;
    color: #fff !important;
}
body:not([class*="client-client_login"]) .btn-success:hover,
body:not([class*="client-client_login"]) .btn-success:focus-visible,
body:not([class*="client-client_login"]) .btn-outline-success:hover,
body:not([class*="client-client_login"]) .btn-outline-success:focus-visible {
    border-color: #1d7d42 !important;
    background: #208e4b !important;
    color: #fff !important;
}
body:not([class*="client-client_login"]) .btn-warning:hover,
body:not([class*="client-client_login"]) .btn-warning:focus-visible,
body:not([class*="client-client_login"]) .btn-outline-warning:hover,
body:not([class*="client-client_login"]) .btn-outline-warning:focus-visible {
    border-color: #c78f00 !important;
    background: #d99f00 !important;
    color: #20252d !important;
}
body:not([class*="client-client_login"]) .btn-danger:hover,
body:not([class*="client-client_login"]) .btn-danger:focus-visible,
body:not([class*="client-client_login"]) .btn-outline-danger:hover,
body:not([class*="client-client_login"]) .btn-outline-danger:focus-visible {
    border-color: #a9363e !important;
    background: #bd3d46 !important;
    color: #fff !important;
}
body:not([class*="client-client_login"]) .btn-dark,
body:not([class*="client-client_login"]) .btn-outline-dark {
    border-color: #3d4652 !important;
    background: #46515e !important;
    color: #fff !important;
}
body:not([class*="client-client_login"]) .btn-dark:hover,
body:not([class*="client-client_login"]) .btn-dark:focus-visible,
body:not([class*="client-client_login"]) .btn-outline-dark:hover,
body:not([class*="client-client_login"]) .btn-outline-dark:focus-visible {
    border-color: #29313a !important;
    background: #323b46 !important;
    color: #fff !important;
}
body:not([class*="client-client_login"]) .btn:disabled,
body:not([class*="client-client_login"]) .btn.disabled {
    box-shadow: none !important;
    opacity: .58 !important;
    transform: none !important;
}
body:not([class*="client-client_login"]) .btn-link {
    border-color: transparent !important;
    background: transparent !important;
    color: #2b92b0 !important;
    box-shadow: none !important;
}