@import url("https://use.typekit.net/fif1vnp.css");

/* *****************************************************

    ** Cultrix client area **

    Child theme of Nexus. This file REPLACES nexus/css/custom.css, which is where Nexus
    defines the design tokens its theme.css reads (353 var() references), so the full
    :root block below must stay complete.

    Brand source: www.cultrix.co.uk (templates/web/assets/style/default.css).
    The site sets html{font-size:62.5%}; WHMCS does not. Never copy the site's rem values.

    Sections
      1. Tokens            5. Cards, sidebar     9. Alerts, badges, status
      2. Base type         6. Buttons           10. Nav, pagination, misc Bootstrap blue
      3. Header            7. Forms             11. Page-specific
      4. Breadcrumb, body  8. Tables            12. Footer
                                                13. Invoice and quote pages

***************************************************** */

/* 1. Tokens ------------------------------------------------------------------------ */

:root {
    --white: #fff;

    /* Cultrix brand */
    --cx-teal: #004f5a;
    --cx-teal-dark: #003f48;
    --cx-teal-light: #00606d;
    --cx-teal-tint: #e8eff0;
    --cx-green: #7ac143;
    --cx-green-hover: #6aad37;
    --cx-green-light: #9fd66f;      /* green used as text on teal: 5.4:1 */
    --cx-green-ink: #3f7a1c;        /* green used as text on white: 5.2:1 */
    --cx-ground: #f8fbf4;
    --cx-ink: #2e3333;
    --cx-on-accent: #fff;           /* text on green buttons. White is the site's choice but only
                                       2.2:1; set to var(--cx-teal) (4.2:1) for legibility. */
    --cx-shadow: 0 0 10px rgba(0, 79, 90, .12);
    --cx-shadow-hover: 0 5px 15px -5px rgba(0, 79, 90, .4);
    --cx-font: "omnes-pro", "Nunito", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    /* Neutral shades (teal-tinted greys) */
    --neutral-50: #f7faf9;
    --neutral-100: #eef3f3;
    --neutral-200: #e1e9ea;
    --neutral-300: #c5d5d8;
    --neutral-400: #9fb1b4;
    --neutral-500: #6a7b7e;
    --neutral-600: #536366;
    --neutral-700: #3c4a4c;
    --neutral-800: #2e3333;
    --neutral-900: #1f2424;
    --neutral-950: #121616;

    /* Brand palette ramp */
    --primary-50: #eef5f6;
    --primary-100: #d6e6e8;
    --primary-200: #adcdd1;
    --primary-300: #7fb0b7;
    --primary-400: #4d8f98;
    --primary-500: #1f6f7a;
    --primary-600: #004f5a;
    --primary-700: #00434d;
    --primary-800: #003840;
    --primary-900: #002c33;
    --primary-950: #001e23;

    /* Primary colors */
    --primary: var(--primary-600);
    --primary-lifted: var(--primary-700);
    --primary-accented: var(--primary-800);

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors (fills carry white text, so darker than the brand green) */
    --success: #3f7a1c;
    --success-lifted: #356818;
    --success-accented: #2b5513;

    /* Info colors */
    --info: #1d6f8a;
    --info-lifted: #185d74;
    --info-accented: #134b5d;

    /* Notice colors */
    --notice: #6b4c9a;
    --notice-lifted: #5b3f85;
    --notice-accented: #4a336d;

    /* Warning colors */
    --warning: #b85c0a;
    --warning-lifted: #9c4d08;
    --warning-accented: #7f3f06;

    /* Error colors */
    --error: #d01317;
    --error-lifted: #bc1313;
    --error-accented: #9a0f12;

    /* Grayscale colors: Nexus uses these for primary buttons and dark chrome */
    --grayscale: var(--cx-teal);
    --grayscale-lifted: var(--cx-teal-light);
    --grayscale-accented: var(--cx-teal-dark);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-500);
    --text-lifted: #5b6b6e;
    --text-accented: var(--neutral-900);
    --text: var(--cx-ink);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--cx-teal);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--cx-ground);
    --bg-accented: var(--cx-teal-tint);
    --bg-inverted: var(--cx-teal);

    /* Additional colors */
    --yellow-200: #fbe7a1;
    --yellow-300: #e5c84d;
    --teal-300: #7fb0b7;
    --teal-400: #1f6f7a;
    --emerald-300: #9fd66f;
    --pink-400: #c2477f;

    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding: the site uses 10px and 15px surfaces */
    --rounding-sm: 6px;
    --rounding-md: 10px;
    --rounding-lg: 15px;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 45%;
}

/* 2. Base type ----------------------------------------------------------------------- */

body {
    font-family: var(--cx-font);
    font-weight: 500;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--cx-font);
    font-weight: 600;
    color: var(--cx-teal);
    line-height: 1.15;
}

.primary-content h1, .primary-content .h1 { font-size: 30px; }
.primary-content h2, .primary-content .h2 { font-size: 24px; }
.primary-content h3, .primary-content .h3 { font-size: 20px; }

b, strong, .font-weight-bold { font-weight: 700; }
.font-weight-light { font-weight: 500 !important; }  /* the kit has no light cut */

a {
    color: var(--cx-teal);
}

a:hover {
    color: var(--cx-teal-dark);
}

.primary-content a:not(.btn):not(.list-group-item):not(.dropdown-item):not(.nav-link):not(.page-link):hover {
    text-decoration: underline;
}

.text-muted { color: var(--text-lifted) !important; }
.text-primary { color: var(--cx-teal) !important; }
.text-success { color: var(--cx-green-ink) !important; }
.text-info { color: var(--info) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--error) !important; }

::selection {
    background: rgba(122, 193, 67, .35);
}

:focus-visible {
    outline: 2px solid var(--cx-green);
    outline-offset: 2px;
}

hr {
    border-top-color: var(--border-muted);
}

/* 3. Header -------------------------------------------------------------------------- */

header.header.cx-header {
    background-color: var(--cx-teal);
    color: #fff;
}

/* Logged-in strip */
header.header.cx-header .topbar {
    background-color: var(--cx-teal-dark);
    color: rgba(255, 255, 255, .75);
    font-size: 13px;
}

header.header.cx-header .topbar .btn,
header.header.cx-header .topbar .active-client .btn,
header.header.cx-header .topbar .active-client .input-group-text {
    color: rgba(255, 255, 255, .8);
    font-size: 13px;
}

header.header.cx-header .topbar .btn:hover {
    color: #fff;
}

header.header.cx-header .topbar .active-client .btn.btn-active-client span {
    border-bottom-color: rgba(255, 255, 255, .5);
}

/* Brand row */
header.header.cx-header .navbar {
    min-height: 0;
}

header.header.cx-header .cx-brandbar .container {
    min-height: 64px;
}

header.header.cx-header .cx-logo {
    display: block;
    height: 46px;
    width: auto;
}

header.header.cx-header .cx-utility a {
    color: rgba(255, 255, 255, .88);
    font-size: 15px;
    white-space: nowrap;
}

header.header.cx-header .cx-utility a:hover {
    color: var(--cx-green-light);
    text-decoration: none;
}

header.header.cx-header .cx-utility .fa-external-link-alt {
    opacity: .7;
}

/* Cart and menu buttons */
header.header.cx-header .toolbar .nav-link {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    padding: .45rem .8rem;
}

header.header.cx-header .toolbar .nav-link:hover,
header.header.cx-header .toolbar .nav-link:focus {
    color: var(--cx-teal);
    background-color: #fff;
    border-color: #fff;
}

header.header.cx-header .toolbar .nav-link .badge {
    background-color: var(--cx-green);
    color: var(--cx-teal);
    font-weight: 700;
    border: 2px solid var(--cx-teal);
}

/* Main nav row */
header.header.cx-header .cx-mainnav {
    border-top: 1px solid rgba(255, 255, 255, .12);
}

/* scripts.js moves items into "More" whenever #nav is 30px or taller, so the links keep a
   24px line box and the row's breathing room lives on the collapse wrapper instead. */
header.header.cx-header .cx-mainnav .navbar-collapse {
    padding-top: 13px;
    padding-bottom: 13px;
}

header.header.cx-header .cx-mainnav .navbar-nav {
    margin-top: 0;
    margin-bottom: 0;
}

header.header.cx-header .cx-mainnav .navbar-nav > li > a {
    display: inline-block;
    position: relative;
    padding: 0;
    line-height: 24px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

/* ::before, because ::after is Bootstrap's dropdown caret */
header.header.cx-header .cx-mainnav .navbar-nav > li > a::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -13px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background-color: var(--cx-green);
    transform: scaleX(0);
    transition: transform .15s ease;
}

header.header.cx-header .cx-mainnav .navbar-nav > li > a:hover,
header.header.cx-header .cx-mainnav .navbar-nav > li.show > a {
    color: #fff;
}

header.header.cx-header .cx-mainnav .navbar-nav > li > a:hover::before,
header.header.cx-header .cx-mainnav .navbar-nav > li.show > a::before {
    transform: scaleX(1);
}

header.header.cx-header .cx-mainnav .navbar-nav .badge {
    background-color: var(--cx-green);
    color: var(--cx-teal);
}

/* Dropdowns */
header.header.cx-header .dropdown-menu {
    margin-top: 0;
    padding: 6px 0;
    border: 1px solid var(--border-muted);
    border-radius: var(--rounding-md);
    box-shadow: 0 12px 30px -8px rgba(0, 79, 90, .35);
}

header.header.cx-header .dropdown-menu li.dropdown-item {
    padding: 0;
}

header.header.cx-header .dropdown-menu a.dropdown-item {
    display: block;
    padding: 7px 18px !important;
    color: var(--text);
    font-size: 15px;
}

header.header.cx-header .dropdown-menu a.dropdown-item:hover,
header.header.cx-header .dropdown-menu a.dropdown-item:focus {
    background-color: var(--cx-teal-tint);
    color: var(--cx-teal);
}

header.header.cx-header .dropdown-item.active,
header.header.cx-header .dropdown-item:active {
    background-color: var(--cx-teal-tint);
    color: var(--cx-teal);
}

header.header.cx-header .dropdown-divider {
    border-top-color: var(--border-muted);
}

@media (max-width: 1199.98px) {
    header.header.cx-header .cx-mainnav {
        border-top: 0;
    }

    header.header.cx-header .cx-mainnav .navbar-collapse.show,
    header.header.cx-header .cx-mainnav .navbar-collapse.collapsing {
        padding: 12px 0 16px;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    header.header.cx-header .cx-mainnav .navbar-nav {
        gap: 0;
    }

    header.header.cx-header .cx-mainnav .navbar-collapse {
        padding-top: 0;
        padding-bottom: 0;
    }

    header.header.cx-header .cx-mainnav .navbar-nav > li > a {
        padding: 8px 0;
    }

    header.header.cx-header .cx-mainnav .navbar-nav > li > a::before {
        display: none;
    }

    header.header.cx-header .cx-mainnav .dropdown-menu {
        box-shadow: none;
    }

    header.header.cx-header .search {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    header.header.cx-header .cx-logo {
        height: 38px;
    }
}

/* 4. Breadcrumb and body ------------------------------------------------------------- */

.master-breadcrumb {
    background-color: var(--cx-teal-tint);
    border-bottom: 1px solid var(--neutral-200);
}

.master-breadcrumb .breadcrumb {
    background-color: transparent;
    font-size: 14px;
}

.master-breadcrumb .breadcrumb a {
    color: var(--cx-teal);
}

.master-breadcrumb .breadcrumb-item.active {
    color: var(--text-lifted);
}

.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--neutral-400);
}

section#main-body {
    padding: 32px 0 48px;
    background-color: var(--cx-ground);
    /* the Cultrix footer is taller than stock's 140px */
    min-height: calc(100vh - 360px);
}

/* 5. Cards and sidebar --------------------------------------------------------------- */

.card {
    border-color: var(--border-muted);
    border-radius: var(--rounding-md);
    box-shadow: var(--cx-shadow);
}

.card-header,
.card-footer {
    background-color: var(--bg-muted);
    border-color: var(--border-muted);
}

.card-header:first-child {
    border-radius: calc(var(--rounding-md) - 1px) calc(var(--rounding-md) - 1px) 0 0;
}

.card-footer:last-child {
    border-radius: 0 0 calc(var(--rounding-md) - 1px) calc(var(--rounding-md) - 1px);
}

.primary-content .card-title {
    color: var(--cx-teal);
    font-weight: 600;
}

/* Sidebar headings echo the site's small caps section labels */
.sidebar .card-header {
    background-color: #fff;
    border-bottom: 1px solid var(--border-muted);
}

.sidebar .card-title,
.sidebar .card-sidebar .panel-title {
    color: var(--cx-teal);
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: none;
}

.sidebar .card-minimise {
    color: var(--neutral-400);
}

.sidebar .list-group-item {
    color: var(--text);
    font-size: 15px;
    border-left: 3px solid transparent;
}

.sidebar .list-group-item-action:hover,
.sidebar .list-group-item-action:focus {
    background-color: var(--bg-muted);
    color: var(--cx-teal);
}

.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus {
    background-color: var(--cx-teal-tint);
    border-left-color: var(--cx-green);
    color: var(--cx-teal);
    font-weight: 600;
}

.sidebar .list-group-item .badge,
.sidebar .list-group-item.active .badge {
    background-color: var(--cx-teal-tint);
    color: var(--cx-teal);
    font-weight: 700;
}

.sidebar .list-group-item.active .badge {
    background-color: #fff;
}

body .sidebar .btn-success {
    background: var(--cx-green);
    border-color: var(--cx-green);
    color: var(--cx-on-accent);
}

body .sidebar .btn-success:hover {
    background: var(--cx-green-hover);
    border-color: var(--cx-green-hover);
}

/* 6. Buttons ------------------------------------------------------------------------- */

.btn {
    font-family: var(--cx-font);
    font-weight: 600;
    border-radius: 999px;
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .11s ease-in;
}

.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 3px rgba(122, 193, 67, .35);
}

/* The brand treatment (larger, roomier, lifted) is for real calls to action only */
.btn-primary:not(.btn-sm):not(.btn-xs),
.btn-success:not(.btn-sm):not(.btn-xs),
.btn-lg {
    text-transform: none;
    letter-spacing: .01em;
    font-size: 14px;
    padding: .6rem 1.5rem;
}

.btn-lg {
    font-size: 15px;
    padding: .8rem 2rem;
}

.btn-primary:not(:disabled):not(.disabled):hover,
.btn-success:not(:disabled):not(.disabled):hover {
    box-shadow: var(--cx-shadow-hover);
    transform: scale(1.03);
}

.input-group .btn,
.btn-group .btn,
.btn-group-vertical .btn,
.table .btn {
    text-transform: none;
    letter-spacing: 0;
}

/* Buttons in a group don't lift on hover - but the staff "return to admin" tab
   lives in the topbar's button group and the stock theme rotates it onto the
   right edge, so it keeps its own transform in both the logged-in and the
   logged-out position. */
.input-group .btn:not(.btn-return-to-admin),
.btn-group .btn:not(.btn-return-to-admin),
.btn-group-vertical .btn:not(.btn-return-to-admin),
.table .btn {
    transform: none !important;
}

.btn-primary,
.btn-primary:focus {
    background: var(--cx-teal);
    border-color: var(--cx-teal);
    color: #fff;
    border-radius: 999px;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
    background: var(--cx-teal-light);
    border-color: var(--cx-teal-light);
    color: #fff;
}

.btn-success,
.btn-success:focus,
.btn.btn-success.btn-lg {
    background-color: var(--cx-green);
    border-color: var(--cx-green);
    color: var(--cx-on-accent);
    border-radius: 999px;
}

.btn-success:hover,
.btn-success:active,
.btn-success:not(:disabled):not(.disabled):active {
    background-color: var(--cx-green-hover);
    border-color: var(--cx-green-hover);
    color: var(--cx-on-accent);
}

.btn-default,
.btn-secondary,
.btn-light,
.btn-outline-secondary {
    background-color: #fff;
    border: 1px solid var(--neutral-300);
    color: var(--cx-teal);
    border-radius: 999px;
}

.btn-default:hover,
.btn-secondary:hover,
.btn-light:hover,
.btn-outline-secondary:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active {
    background-color: var(--cx-teal-tint);
    border-color: var(--cx-teal);
    color: var(--cx-teal);
}

.btn-outline-primary {
    border-color: var(--cx-teal);
    color: var(--cx-teal);
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active {
    background-color: var(--cx-teal);
    border-color: var(--cx-teal);
    color: #fff;
}

.btn-info {
    background-color: var(--info);
    border-color: var(--info);
}

.btn-info:hover {
    background-color: var(--info-lifted);
    border-color: var(--info-lifted);
}

.btn-warning {
    background-color: var(--warning);
    border-color: var(--warning);
    color: #fff;
}

.btn-warning:hover {
    background-color: var(--warning-lifted);
    border-color: var(--warning-lifted);
    color: #fff;
}

.btn-danger {
    background-color: var(--error);
    border-color: var(--error);
    border-radius: 999px;
}

.btn-danger:hover {
    background-color: var(--error-lifted);
    border-color: var(--error-lifted);
}

.btn-link,
.btn-link:focus {
    color: var(--cx-teal);
    font-weight: 600;
}

.btn-link:hover {
    color: var(--cx-teal-dark);
    text-decoration: underline;
}

.btn-sm,
.btn-group-sm > .btn {
    padding: .25rem .8rem;
    font-size: 13px;
}

.btn-xs,
.btn-group-xs > .btn {
    border-radius: 999px;
    padding: 1px 8px;
}

/* Joined buttons keep square inner edges */
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > .input-group-prepend > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .input-group-append > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group .btn-reveal-pw {
    border-radius: 0 var(--rounding-sm) var(--rounding-sm) 0;
    border-color: var(--neutral-300);
}

.input-group .btn-reveal-pw:hover,
.input-group .btn-reveal-pw:active {
    color: var(--cx-teal);
    border-color: var(--neutral-300);
}

#btnDomainContinue {
    background: var(--cx-teal);
}

/* The one call to action per page that the site would paint green */
#login.btn-primary,
#resetPasswordButton.btn-primary,
#registration input[type="submit"].btn-primary,
#btnCompleteOrder,
#checkout.btn,
form[action*="action=accept"] .modal-footer .btn-primary,
.payment-btn-container .btn-primary {
    background: var(--cx-green);
    border-color: var(--cx-green);
    color: var(--cx-on-accent);
}

#login.btn-primary:not(:disabled):hover,
#resetPasswordButton.btn-primary:not(:disabled):hover,
#registration input[type="submit"].btn-primary:not(:disabled):hover,
#btnCompleteOrder:not(:disabled):hover,
#checkout.btn:not(:disabled):hover,
form[action*="action=accept"] .modal-footer .btn-primary:not(:disabled):hover,
.payment-btn-container .btn-primary:not(:disabled):hover {
    background: var(--cx-green-hover);
    border-color: var(--cx-green-hover);
    color: var(--cx-on-accent);
}

/* 7. Forms --------------------------------------------------------------------------- */

.form-control,
.custom-select,
body #registration .field,
body #registration .form-control {
    border-color: var(--neutral-300);
    border-radius: var(--rounding-sm);
    color: var(--text);
    font-weight: 500;
}

.form-control::placeholder {
    color: var(--neutral-500);
    opacity: 1;
}

.form-control:focus,
.custom-select:focus,
body .login-form .form-control:focus {
    border-color: var(--cx-green);
    box-shadow: 0 0 0 3px rgba(122, 193, 67, .25);
}

.form-control.is-invalid,
.has-error .form-control {
    border-color: var(--error);
    border-width: 2px;
}

.input-group-text {
    background-color: var(--cx-teal-tint);
    border-color: var(--neutral-300);
    color: var(--cx-teal);
    border-radius: var(--rounding-sm) 0 0 var(--rounding-sm);
}

label,
.col-form-label,
.control-label {
    color: var(--text);
    font-weight: 600;
}

.form-text,
small.text-muted {
    color: var(--text-lifted);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--cx-teal);
    border-color: var(--cx-teal);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(122, 193, 67, .3);
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--cx-green);
}

.custom-range::-webkit-slider-thumb { background-color: var(--cx-teal); }
.custom-range::-moz-range-thumb { background-color: var(--cx-teal); }

/* iCheck boxes: Nexus greys them out with a filter; tint them teal instead */
body .iradio_square-blue.checked,
body .icheckbox_square-blue.checked,
body .iradio_square-blue.hover,
body .icheckbox_square-blue.hover {
    filter: hue-rotate(-30deg) saturate(.9) brightness(.75);
}

.selected-flag {
    border-radius: var(--rounding-sm) 0 0 var(--rounding-sm);
}

/* 8. Tables -------------------------------------------------------------------------- */

.table {
    color: var(--text);
}

.table thead th,
.table-list thead th {
    border-top: 0;
    border-bottom: 1px solid var(--neutral-300);
    color: var(--text-lifted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: none;
    background-color: transparent;
}

.table td,
.table th {
    border-top-color: var(--border-muted);
    vertical-align: middle;
}

.table-hover tbody tr:hover,
.table-list > tbody > tr:hover > td {
    background-color: var(--bg-muted);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bg-muted);
}

.table-list > tbody > tr > td {
    border-bottom-color: var(--border-muted);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    color: var(--text-lifted);
}

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--neutral-300);
    border-radius: 999px;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--cx-green);
    outline: 0;
}

/* 9. Alerts, badges and status ------------------------------------------------------- */

.alert {
    border: 0;
    border-left: 4px solid;
    border-radius: var(--rounding-sm);
    color: var(--text);
}

.alert-info {
    background-color: var(--primary-50);
    border-left-color: var(--cx-teal);
}

.alert-success {
    background-color: #eff7e7;
    border-left-color: var(--cx-green);
}

.alert-warning {
    background-color: #fdf3e6;
    border-left-color: var(--warning);
}

.alert-danger {
    background-color: #fcebeb;
    border-left-color: var(--error);
}

.alert-secondary,
.alert-light {
    background-color: var(--bg-muted);
    border-left-color: var(--neutral-400);
}

.alert a:not(.btn),
.alert .alert-link {
    color: var(--cx-teal);
    font-weight: 600;
    text-decoration: underline;
}

.badge {
    font-weight: 700;
    letter-spacing: .01em;
}

.badge-primary { background-color: var(--cx-teal); }
.badge-success { background-color: var(--success); }
.badge-info { background-color: var(--info); }
.badge-warning { background-color: var(--warning); color: #fff; }
.badge-danger { background-color: var(--error); }
.badge-secondary { background-color: var(--neutral-500); }
.badge-dark { background-color: var(--cx-teal-dark); }
.badge-light { background-color: var(--cx-teal-tint); color: var(--cx-teal); }

.label,
.badge.status,
span.status {
    border-radius: 999px;
    font-weight: 700;
}

/* 10. Nav, pagination and remaining Bootstrap blue ----------------------------------- */

.nav-tabs {
    border-bottom-color: var(--neutral-300);
}

.nav-tabs .nav-link {
    color: var(--text-lifted);
    font-weight: 600;
}

.nav-tabs .nav-link:hover {
    color: var(--cx-teal);
    border-color: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--cx-teal);
    border-color: var(--neutral-300) var(--neutral-300) #fff;
    box-shadow: inset 0 3px 0 var(--cx-green);
}

.nav-pills .nav-link {
    border-radius: 999px;
    color: var(--cx-teal);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--cx-teal);
}

.page-link {
    color: var(--cx-teal);
    border-color: var(--neutral-200);
}

.page-link:hover {
    color: var(--cx-teal-dark);
    background-color: var(--cx-teal-tint);
    border-color: var(--neutral-300);
}

.page-link:focus {
    box-shadow: 0 0 0 3px rgba(122, 193, 67, .3);
}

.page-item.active .page-link {
    background-color: var(--cx-teal);
    border-color: var(--cx-teal);
}

.list-group-item.active {
    background-color: var(--cx-teal);
    border-color: var(--cx-teal);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--cx-teal-tint);
    color: var(--cx-teal);
}

.dropdown-menu {
    border-color: var(--border-muted);
    border-radius: var(--rounding-md);
    box-shadow: 0 12px 30px -8px rgba(0, 79, 90, .3);
}

.progress {
    background-color: var(--cx-teal-tint);
    border-radius: 999px;
}

.progress-bar {
    background-color: var(--cx-green);
}

.bg-primary { background-color: var(--cx-teal) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-info { background-color: var(--info) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-danger { background-color: var(--error) !important; }
.border-primary { border-color: var(--cx-teal) !important; }

.modal-content {
    border: 0;
    border-radius: var(--rounding-lg);
    box-shadow: 0 20px 50px -15px rgba(0, 40, 46, .45);
}

.modal .modal-header {
    background-color: var(--cx-teal-tint);
    border-bottom-color: var(--neutral-200);
    border-radius: var(--rounding-lg) var(--rounding-lg) 0 0;
}

.modal .modal-title {
    color: var(--cx-teal);
    font-weight: 600;
}

.modal-localisation .modal-content {
    background-color: var(--cx-teal-dark);
}

.popover {
    border-color: var(--border-muted);
    border-radius: var(--rounding-md);
    box-shadow: 0 12px 30px -8px rgba(0, 79, 90, .3);
    font-family: var(--cx-font);
}

.tooltip {
    font-family: var(--cx-font);
}

/* 11. Page-specific ------------------------------------------------------------------ */

/* Client home tiles */
.tiles .tile {
    background-color: #fff;
    border-right-color: var(--border-muted);
}

.tiles .tile:hover {
    background-color: var(--bg-muted);
}

.tiles .tile .stat {
    color: var(--cx-teal);
    font-weight: 700;
}

.tiles .tile .title {
    color: var(--text-lifted);
    letter-spacing: .01em;
}

.tiles .tile i {
    color: var(--cx-teal-tint);
}

.tiles .tile:hover i {
    color: var(--primary-200);
}

.tiles .tile .highlight {
    background-color: var(--cx-green) !important;
}

.client-home-cards .card-header {
    background-color: #fff;
}

body .primary-content .client-home-cards .card .card-body {
    padding: 16px 20px;
}

.client-home-cards .card-body p {
    margin: 0;
    padding: 0;
}

.client-home-cards .card-footer {
    padding: 8px 20px 12px;
    background-color: #fff;
}

/* Nexus styles these buttons through
   `body .primary-content .client-home-cards .card .card-header .btn`, which outweighs any
   shorter rule - that is why "My Services" and "View All" kept square corners and grey text
   while every other button was a pill. Match its weight. */
body .primary-content .client-home-cards .card .card-header .btn.btn,
body .primary-content .client-home-cards .mc-promo-login .card-header .btn.btn,
body .primary-content .client-home-cards .mc-promo-manage .card-header .btn.btn {
    border-radius: 999px;
    color: var(--cx-teal);
    border-color: var(--border);
}

/* Overdue invoices: the panel's Pay Now is the page's call to action */
body .primary-content .client-home-cards .card.card-accent-red .card-header .btn.btn {
    background-color: var(--cx-green);
    border-color: var(--cx-green);
    color: var(--cx-on-accent);
    font-weight: 700;
}

body .primary-content .client-home-cards .card.card-accent-red .card-header .btn.btn:hover {
    background-color: var(--cx-green-hover);
    border-color: var(--cx-green-hover);
    color: var(--cx-on-accent);
}

.client-home-cards .card-title {
    color: var(--cx-teal);
}

.client-home-cards .list-group,
.client-home-cards .list-group .list-group-item {
    border-color: var(--border-muted) !important;
}

.client-home-cards small {
    color: var(--text-lifted);
}

/* Login and registration */
.login-form .card-body h6,
.login-form .h3 {
    color: var(--cx-teal);
}

.login-form .card-footer {
    background-color: var(--bg-muted);
}

/* Knowledgebase and announcements */
.primary-content .card.kb-category {
    border-radius: var(--rounding-md);
}

.kb-article-title,
.announcement-single h3 {
    color: var(--cx-teal);
}

/* Stock Nexus colours the article preview with a background token, so it vanishes */
.kb-article-item small {
    color: var(--text-lifted);
}

/* Domain search band on the homepage */
.home-domain-search {
    background-color: var(--cx-teal-dark) !important;
}

/* Shared "loading" overlay */
#fullpage-overlay .msg {
    font-family: var(--cx-font);
}

/* 12. Footer ------------------------------------------------------------------------- */
/* The website's footer, mirrored. Its own rules are written against 1rem = 10px, so the
   sizes below are the px equivalents, not the site's rem values. */

footer.footer.cx-footer {
    padding: 35px 0 40px;
    background-color: var(--cx-teal);
    color: #fff;
    font-size: 15px;
}

footer.footer.cx-footer a {
    color: #fff;
}

footer.footer.cx-footer a:hover,
footer.footer.cx-footer a:focus {
    color: var(--cx-green-light);
    text-decoration: none;
}

footer.footer.cx-footer .cx-footer-heading {
    margin: 0 0 8px;
    padding-bottom: .6em;
    border-bottom: 1px solid var(--cx-teal-tint);
    color: #fff;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.25;
}

footer.footer.cx-footer .cx-footer-heading a:hover,
footer.footer.cx-footer .cx-footer-heading a:focus {
    color: #fff;
    text-decoration: underline;
}

footer.footer.cx-footer .cx-footer-col {
    margin-bottom: 20px;
}

footer.footer.cx-footer .cx-footer-list {
    margin-bottom: 0;
}

footer.footer.cx-footer .cx-footer-list li {
    line-height: 1.6;
}

footer.footer.cx-footer .cx-footer-list a {
    display: inline-block;
    padding: 5px 10px 5px 0;
}

/* Social row: the site's own white 24px icons */
footer.footer.cx-footer .cx-footer-social {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0 0;
}

footer.footer.cx-footer .cx-footer-social li {
    margin: 0 6px 6px 0;
    line-height: 0;
}

footer.footer.cx-footer .cx-footer-social img {
    width: 24px;
    height: 24px;
    opacity: .85;
    transition: opacity .15s ease;
}

footer.footer.cx-footer .cx-footer-social a:hover img,
footer.footer.cx-footer .cx-footer-social a:focus img {
    opacity: 1;
}

/* Bottom bar: legal links and the copyright run as one line, terms underneath */
footer.footer.cx-footer .cx-footer-bottom {
    clear: both;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .55);
    font-size: 14px;
}

footer.footer.cx-footer .cx-footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 4px;
    line-height: 1.5;
}

footer.footer.cx-footer .cx-footer-legal-links > li:not(:last-child)::after {
    content: "|";
    padding: 0 .5em;
    color: rgba(255, 255, 255, .6);
}

footer.footer.cx-footer .cx-footer-copyright,
footer.footer.cx-footer .copyright {
    margin: 0;
    font-size: 14px;
    color: #fff;
    text-align: inherit;
}

footer.footer.cx-footer .cx-footer-terms p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .8);
}

footer.footer.cx-footer .btn-outline-light {
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

footer.footer.cx-footer .btn-outline-light:hover {
    background-color: #fff;
    color: var(--cx-teal);
}

footer.footer.cx-footer .btn-icon {
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
}

/* 13. Invoice and quote pages (viewinvoice.tpl, viewquote.tpl) ------------------------ */
/* Standalone pages: they load this file but not header.tpl, so they take the brand from here only. */

body:has(> .invoice-container) {
    background-color: var(--cx-ground);
}

.invoice-container {
    border: 1px solid var(--border-muted);
    border-radius: var(--rounding-lg);
    box-shadow: var(--cx-shadow);
    color: var(--text);
}

/* The logo. WHMCS prints either an uploaded logo or the company name here; the Cultrix mark
   replaces both. print-color-adjust keeps it when the page is printed. */
.invoice-container .invoice-header > .invoice-col:first-child > p:first-child,
.invoice-container .invoice-header > .invoice-col:first-child > h2 {
    display: none;
}

.invoice-container .invoice-header > .invoice-col:first-child::before {
    content: "";
    display: block;
    width: 150px;
    height: 58px;
    margin: 0 auto 14px 0;
    background: url("../assets/img/logo-colour.svg") no-repeat left center / contain;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* viewquote.tpl has the same page but a plain .row header (no .invoice-header) */
.invoice-container:not(:has(.invoice-header)) > .row:first-child > .col-sm-7:first-child > p:first-child,
.invoice-container:not(:has(.invoice-header)) > .row:first-child > .col-sm-7:first-child > h2 {
    display: none;
}

.invoice-container:not(:has(.invoice-header)) > .row:first-child > .col-sm-7:first-child::before {
    content: "";
    display: block;
    width: 150px;
    height: 58px;
    margin: 0 0 14px;
    background: url("../assets/img/logo-colour.svg") no-repeat left center / contain;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.invoice-container:not(:has(.invoice-header)) > .row:first-child h3 {
    color: var(--cx-teal);
    font-weight: 800;
    font-size: 26px;
}

/* On a quote, "Delivered" reuses the unpaid class; it is not an alarm */
.invoice-container:not(:has(.invoice-header)) .invoice-status .unpaid {
    background-color: var(--cx-teal);
}

/* The proposal text is shown in a "warning" panel; on a quote it is the main content, not a warning */
.invoice-container:not(:has(.invoice-header)) .card > .card-title.bg-warning {
    background-color: var(--cx-teal) !important;
    color: #fff;
    border-radius: calc(var(--rounding-md) - 1px) calc(var(--rounding-md) - 1px) 0 0;
    padding: 8px 14px !important;
    letter-spacing: .01em;
}

.invoice-container:not(:has(.invoice-header)) .card > .card-text {
    padding: 14px 18px;
    line-height: 1.6;
}

/* Stock sets width:100% (container-fluid) plus a 15px margin below 895px, which overflows the screen */
@media (max-width: 895px) {
    .invoice-container {
        width: auto;
    }
}

@media (max-width: 575.98px) {
    .invoice-container {
        margin: 12px;
        padding: 28px 18px 40px;
    }

    .invoice-container .invoice-header > .invoice-col:first-child::before {
        margin: 0 auto 14px;
        background-position: center;
    }
}

.invoice-container .invoice-header h3 {
    color: var(--cx-teal);
    font-weight: 800;
    font-size: 26px;
}

.invoice-container hr {
    border-top: 2px solid var(--cx-teal);
    opacity: 1;
}

/* Status as a pill */
.invoice-container .invoice-status {
    margin: 4px 0 8px;
}

.invoice-container .invoice-status span {
    display: inline-block;
    padding: 4px 16px;
    border-radius: 999px;
    color: #fff;
    background-color: var(--neutral-500);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.invoice-container .invoice-status .unpaid { background-color: var(--error); }
.invoice-container .invoice-status .paid { background-color: var(--success); }
.invoice-container .invoice-status .collections { background-color: var(--cx-teal); }
.invoice-container .invoice-status .refunded,
.invoice-container .invoice-status .cancelled,
.invoice-container .invoice-status .draft { background-color: var(--neutral-500); }

.invoice-container .invoice-col strong {
    color: var(--cx-teal);
    font-size: 12px;
    letter-spacing: .01em;
    text-transform: none;
}

.invoice-container .small-text {
    color: var(--text);
    font-size: 14px;
}

/* Line items */
.invoice-container .card-header .card-title {
    font-size: 16px !important;
    color: var(--cx-teal);
}

.invoice-container .table thead td {
    border-bottom: 2px solid var(--cx-teal);
    color: var(--text-lifted);
    font-size: 12px;
    letter-spacing: .01em;
    text-transform: none;
}

.invoice-container .table td {
    border-top-color: var(--border-muted);
}

.invoice-container .table td small.text-muted {
    font-size: 11px;
    color: var(--neutral-500) !important;
}

/* Partner invoices: zero-amount "CUSTOMER NAME:" lines, which the SKU hook wraps in <strong> */
.invoice-container tbody tr:has(> td:first-child:not(.total-row) > strong:only-child) > td {
    background-color: var(--cx-teal-tint);
    color: var(--cx-teal);
    font-size: 12px;
    letter-spacing: .01em;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.invoice-container .total-row {
    background-color: var(--bg-muted);
    color: var(--text);
}

.invoice-container tbody tr:has(> .total-row):last-child > td {
    background-color: var(--cx-teal);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.invoice-container tbody tr:has(> .total-row):last-child > td strong {
    color: #fff;
}

/* Ledger */
.invoice-container .transactions-container,
.invoice-container .card-title.bg-info {
    border-radius: 0;
}

.invoice-container .card > .card-title.bg-info {
    background-color: var(--cx-teal) !important;
    border-radius: calc(var(--rounding-md) - 1px) calc(var(--rounding-md) - 1px) 0 0;
    padding: 8px 14px !important;
    letter-spacing: .01em;
}

.invoice-container .payment-btn-container {
    margin-top: 12px;
}

@media print {
    body:has(> .invoice-container) {
        background-color: #fff;
    }

    .invoice-container {
        border: 0;
        box-shadow: none;
    }
}

/* 14. Button shape and coloured surfaces ---------------------------------------------- */
/* Nexus sets its own radius on several button variants, sizes and groups, some with more
   weight than a plain .btn rule carries. The website's buttons are pills, so every button
   here is a pill - the doubled class is what it takes to win those selectors. */

body .btn.btn,
body button.btn.btn,
body a.btn.btn,
body input.btn.btn {
    border-radius: 999px;
}

/* A button is one line: module buttons sit in narrow flex rows with a fixed
   min-width (the Sitejet panel's "Edit website" beside its dropdown), and our
   uppercase treatment is wide enough to wrap them onto three lines, which made
   the button twice the height of the field next to it. */
.btn {
    white-space: nowrap;
}

/* Bootstrap gives a select a fixed height, so it cannot match the button beside
   it in a flex row - let it stretch instead. */
.d-flex > select.form-control,
.d-flex > .custom-select {
    height: auto;
}

/* Grouped buttons: the ends of the group are round, the joins are square */
body .btn-group > .btn.btn:not(:last-child):not(.dropdown-toggle),
body .btn-group > .btn-group:not(:last-child) > .btn.btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

body .btn-group > .btn.btn:not(:first-child),
body .btn-group > .btn-group:not(:first-child) > .btn.btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

body .btn-group > .btn.btn:first-child {
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}

body .btn-group > .btn.btn:last-child,
body .btn-group > .btn.btn.dropdown-toggle-split {
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
    padding-right: 1rem;
}

/* A button on the end of an input group keeps the round outer edge */
body .input-group > .input-group-append:last-child > .btn.btn {
    border-top-right-radius: 999px;
    border-bottom-right-radius: 999px;
}

body .input-group > .input-group-prepend:first-child > .btn.btn {
    border-top-left-radius: 999px;
    border-bottom-left-radius: 999px;
}

/* A coloured surface decides its own text colour: our headings are teal by default,
   which turned the Apply Credit heading teal on green. */
.text-white,
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white .card-title,
.text-white .card-subtitle,
.text-white strong,
.text-white a {
    color: #fff;
}

/* 15. Invoice page: ways to pay ------------------------------------------------------- */
/* viewinvoice.tpl: all the payment options side by side, Direct Debit first, with the
   chosen option's details (bank details, card button, mandate setup) underneath. */

.invoice-container .cx-pay {
    margin: 0 0 24px;
    padding: 18px 20px 20px;
    background: var(--cx-teal-tint);
    border-radius: var(--rounding-md);
}

.invoice-container .cx-pay-title {
    margin: 0 0 12px;
    color: var(--cx-teal);
    font-size: 17px;
    font-weight: 600;
}

.invoice-container .cx-pay-options {
    display: grid;
    /* Two across, or all in one row once the invoice column is wide enough - never 3 + 1 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width: 992px) {
    .invoice-container .cx-pay-options {
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }
}

.invoice-container .cx-pay-option {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    background: #fff;
    border: 2px solid transparent;
    border-radius: var(--rounding-md);
    box-shadow: 0 0 6px rgba(0, 79, 90, .12);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.invoice-container .cx-pay-option:hover,
.invoice-container .cx-pay-option:focus-visible {
    border-color: var(--cx-green);
    box-shadow: var(--cx-shadow-hover);
    outline: 0;
}

.invoice-container .cx-pay-option.is-selected {
    border-color: var(--cx-teal);
}

.invoice-container .cx-pay-name {
    color: var(--cx-teal);
    font-size: 15px;
    font-weight: 700;
}

.invoice-container .cx-pay-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--cx-green);
    color: var(--cx-on-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: none;
    vertical-align: 1px;
}

.invoice-container .cx-pay-blurb {
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-lifted);
}

.invoice-container .cx-pay-action {
    margin-top: 14px;
    padding: 14px 16px;
    background: #fff;
    border-radius: var(--rounding-md);
    text-align: center;
    font-size: 14px;
}

.invoice-container .cx-pay-action:empty {
    display: none;
}

/* "Use this for future invoices too?" - cultrix_invoice_default_gateway.php */
.invoice-container .cx-default {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin: -12px 0 24px;
    padding: 14px 18px;
    background: var(--cx-green-tint, #f8fbf4);
    border: 1px solid var(--cx-green);
    border-radius: var(--rounding-md);
    font-size: 14px;
}

.invoice-container .cx-default-text {
    flex: 1 1 320px;
}

.invoice-container .cx-default-text strong {
    display: block;
    color: var(--cx-teal);
    font-size: 15px;
}

.invoice-container .cx-default-text span {
    color: var(--text-lifted);
}

.invoice-container .cx-default--saved {
    display: block;
    color: var(--text);
}

.invoice-container .cx-pay-lead {
    margin: 0 0 10px;
    color: var(--text-lifted);
}

.invoice-container .cx-pay-marks {
    display: block;
    margin-bottom: 4px;
    color: var(--cx-teal);
    font-size: 26px;
    line-height: 1;
}

.invoice-container .cx-pay-marks i {
    margin: 0 4px;
}

/* Arriving from the PDF's Direct Debit link (?pay=dd): point at the option */
.invoice-container .cx-pay-hint {
    margin: -4px 0 12px;
    font-size: 14px;
    color: var(--text);
}

.invoice-container .cx-pay-option.is-suggested {
    border-color: var(--cx-green);
    box-shadow: 0 0 0 4px rgba(122, 193, 67, .25);
}

/* Invoice header: status and due date sit to the right, level with the logo and
   invoice number, instead of centred in their column above a gap. */
@media (min-width: 576px) {
    .invoice-container .invoice-header {
        align-items: center;
    }

    .invoice-container .invoice-header .invoice-status {
        margin-bottom: 6px;
        text-align: right;
    }

    .invoice-container .invoice-header .invoice-status span {
        margin-left: auto;
        margin-right: 0;
    }
}