/* SecurePress Portal: the client area dressed as the website (same fonts, navy and green, buttons and cards), laid
   out like the app framework's dashboard: a top bar across the page with the logo above a left sidebar. Loaded after
   Twenty-One and Twenty-X, so it wins where they disagree */

@font-face { font-family: "Outfit"; src: url("../fonts/outfit-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
	--brand: #0f2a4a;
	--accent: #10b981;
	--brand-deep: #0b2038;
	--brand-soft: #f1f3f6;
	--accent-ink: #047857;
	--accent-soft: #e2f6ef;
	--ink: #0f1c2b;
	--text: #3a4753;
	--muted: #5c6b73;
	--line: #e2e7ec;
	--bg-soft: #f5f7f9;
	--radius: 14px;
	--shadow: 0 1px 2px rgba(15, 28, 43, .05), 0 8px 24px -12px rgba(15, 28, 43, .18);
	--head: "Outfit", "Inter", Arial, sans-serif;
	--body: "Inter", Arial, sans-serif;
	--sidebar: 250px;
	--topbar: 72px;
}

/* ---------------------------------------------------------------- typography and colours, everywhere */
body.sp-portal { background: var(--bg-soft) !important; color: var(--text); font: 15px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
.sp-portal h1, .sp-portal h2, .sp-portal h3, .sp-portal h4, .sp-portal h5, .sp-portal h6, .sp-portal .h1, .sp-portal .h2, .sp-portal .h3, .sp-portal .h4, .sp-portal .card-title {
	font-family: var(--head); color: var(--ink); letter-spacing: -.01em; font-weight: 650;
}
.sp-portal a { color: var(--brand); }
.sp-portal a:hover { color: var(--brand-deep); }
.sp-portal .text-primary { color: var(--brand) !important; }
.sp-portal .bg-primary, .sp-portal .badge-primary { background-color: var(--brand) !important; }
.sp-portal .btn { border-radius: 10px; font-weight: 600; font-family: var(--body); }
.sp-portal .btn-primary, .sp-portal .btn-success, .sp-portal .btn-info { background: var(--brand); border-color: var(--brand); color: #fff; }
.sp-portal .btn-primary:hover, .sp-portal .btn-primary:focus, .sp-portal .btn-success:hover, .sp-portal .btn-info:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.sp-portal .btn-default, .sp-portal .btn-secondary, .sp-portal .btn-outline-primary { background: #fff; border: 1.5px solid var(--line); color: var(--ink); }
.sp-portal .btn-default:hover, .sp-portal .btn-secondary:hover, .sp-portal .btn-outline-primary:hover { border-color: var(--brand); color: var(--brand); background: #fff; }
.sp-portal .form-control, .sp-portal .custom-select { border-radius: 10px; border-color: var(--line); }
.sp-portal .form-control:focus, .sp-portal .custom-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15, 42, 74, .08); }
.sp-portal .card, .sp-portal .panel { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); background: #fff; }
.sp-portal .card-header { background: #fff; border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0 !important; }
.sp-portal .card-header .card-title, .sp-portal .card-header h3 { font-size: 1.05rem; margin: 0; }
.sp-portal .list-group-item { border-color: var(--line); }
.sp-portal .list-group-item.active, .sp-portal .list-group-item-action.active { background: var(--brand-soft); border-color: var(--line); color: var(--brand); box-shadow: inset 3px 0 0 var(--accent); }
.sp-portal .label-success, .sp-portal .badge-success, .sp-portal .status-active, .sp-portal .status-paid { background: var(--accent-soft); color: var(--accent-ink); }
.sp-portal .table th { font-family: var(--head); color: var(--ink); font-weight: 600; border-top: 0; }
.sp-portal .alert { border-radius: 12px; border: 0; border-left: 3px solid var(--brand); }
.sp-portal .alert-success { border-left-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.sp-portal .pagination .page-item.active .page-link { background: var(--brand); border-color: var(--brand); }

/* ---------------------------------------------------------------- the "Hacked right now?" bar */
.sp-alertbar { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 20px; background: var(--brand-deep); color: #dbe4ee !important; font-size: .9rem; text-decoration: none !important; }
.sp-alertbar:hover { color: #fff !important; }
.sp-alertbar strong { color: #fff; font-weight: 600; }
.sp-alertbar-go { display: inline-flex; align-items: center; gap: 2px; color: var(--accent); font-weight: 600; }
.sp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: sp-pulse 2s infinite; flex: none; }
@keyframes sp-pulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .6); } 70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }

/* ---------------------------------------------------------------- the framework's top bar, with the website's menu */
.sp-topbar { position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; height: var(--topbar); background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(15, 28, 43, .02); padding: 0 !important; margin: 0 !important; }
.sp-brand { flex: 0 0 var(--sidebar); display: flex; align-items: center; height: 100%; padding: 0 24px; border-right: 1px solid var(--line); }
.sp-brand img { height: 32px; width: auto; }
.sp-sitenav { display: flex; align-items: center; gap: 2px; padding: 0 20px; flex: 1; }
.sp-sitenav a { padding: 8px 12px; border-radius: 8px; color: var(--ink) !important; text-decoration: none !important; font-weight: 500; font-size: .95rem; white-space: nowrap; }
.sp-sitenav a:hover { background: var(--brand-soft); color: var(--brand) !important; }
.sp-topbar-right { display: flex; align-items: center; gap: 14px; padding: 0 24px; margin-left: auto; }
.sp-phone { display: inline-flex; align-items: center; gap: 6px; color: var(--ink) !important; font-weight: 600; font-size: .95rem; text-decoration: none !important; white-space: nowrap; }
.sp-phone i { color: var(--accent-ink); font-size: 1.15rem; }
.sp-cart { position: relative; display: inline-flex; padding: 8px; border-radius: 10px; color: var(--ink) !important; font-size: 1.4rem; text-decoration: none !important; }
.sp-cart:hover { background: var(--brand-soft); }
.sp-cart-count { position: absolute; top: 0; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--accent); color: var(--brand-deep); font: 700 .7rem/18px var(--body); text-align: center; }
.sp-menu-toggle { display: none; margin-left: 12px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-size: 1.4rem; line-height: 1; }

/* the website's round account button */
.sp-account-button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 2.5px solid var(--accent); background: var(--brand); color: #fff; font: 600 1.05rem/1 var(--head); box-shadow: 0 0 0 2px #fff; cursor: pointer; }
.sp-account-button:hover, .sp-account-button[aria-expanded="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--accent-soft); }
.sp-account-menu { min-width: 260px; margin-top: 12px !important; padding: 8px; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 48px -16px rgba(15, 28, 43, .35); }
.sp-account-menu .dropdown-item { padding: 9px 12px; border-radius: 10px; color: var(--ink); font-size: .93rem; }
.sp-account-menu .dropdown-item:hover { background: var(--brand-soft); color: var(--brand); }
.sp-account-head { display: grid; justify-items: center; gap: 2px; padding: 14px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); text-align: center; }
.sp-account-head small { color: var(--muted); }
.sp-account-badge { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 50%; background: var(--brand); color: #fff; border: 3px solid var(--accent); font: 600 1.3rem var(--head); }

/* ---------------------------------------------------------------- the framework's sidebar */
.sp-shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: calc(100vh - var(--topbar)); }
.sp-sidebar { position: sticky; top: var(--topbar); height: calc(100vh - var(--topbar)); overflow-y: auto; display: flex; flex-direction: column; background: #fff; border-right: 1px solid var(--line); }
.sp-sidemenu { padding: 18px 0; }
.sp-sidemenu-title { margin: 6px 24px 10px; font: 600 .72rem var(--body); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.sp-sidemenu ul { list-style: none; margin: 0 0 14px; padding: 0; }
.sp-sidemenu a { display: flex; align-items: center; gap: 12px; padding: 11px 24px; border-radius: 0; color: var(--ink) !important; text-decoration: none !important; font-weight: 500; font-size: .94rem; transition: background .15s, color .15s; }
.sp-sidemenu a i.bx { font-size: 1.25rem; color: var(--muted); transition: color .15s; }
/* the framework's rollover: a soft grey, the icon turning navy */
.sp-sidemenu a:hover { background: #e9ecf0; color: var(--brand) !important; }
.sp-sidemenu a:hover i.bx { color: var(--brand); }
/* the current page: navy, like the framework's active item, with the website's green edge */
.sp-sidemenu a.is-active { background: var(--brand); color: #fff !important; box-shadow: inset 4px 0 0 var(--accent); }
.sp-sidemenu a.is-active i.bx { color: #fff; }
.sp-caret { margin-left: auto; font-size: 1.1rem !important; transition: transform .2s; }
.sp-has-sub.is-open > a .sp-caret { transform: rotate(180deg); }
.sp-sub { display: none; margin: 0 0 6px !important; padding-left: 0 !important; }
.sp-has-sub.is-open > .sp-sub { display: block; }
.sp-sub a { padding: 8px 24px 8px 56px; font-size: .9rem; color: var(--text) !important; }
.sp-sub a.is-active { background: var(--brand-soft); color: var(--brand) !important; box-shadow: inset 4px 0 0 var(--accent); }
.sp-badge { margin-left: auto; padding: 1px 8px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink); font-size: .75rem; font-weight: 700; }
.sp-sidebar-help { margin: auto 16px 16px; padding: 14px 16px; border-radius: 12px; background: var(--bg-soft); border-left: 3px solid var(--accent); font-size: .88rem; }
.sp-sidebar-help strong { display: block; color: var(--ink); font-family: var(--head); }
.sp-sidebar-help a { font-weight: 600; }
.sp-mobile-only { display: none; }

/* ---------------------------------------------------------------- the content area */
.sp-content { min-width: 0; padding: 24px 28px 40px; }
.sp-container { padding: 0; max-width: 1280px; margin: 0; }
.sp-portal #main-body { background: transparent !important; padding: 0 !important; }
.sp-breadcrumb { background: transparent !important; padding: 0 !important; margin: 0 0 18px; border: 0 !important; }
.sp-breadcrumb .breadcrumb { background: transparent; padding: 0; margin: 0; font-size: .88rem; }
.sp-breadcrumb .breadcrumb-item.active { color: var(--muted); }
.sp-client-alerts { display: grid; gap: 8px; margin-bottom: 18px; }
.sp-client-alert { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--brand); color: var(--ink) !important; text-decoration: none !important; font-size: .92rem; }
.sp-client-alert-danger { border-left-color: var(--red); }
.sp-client-alert-warning { border-left-color: var(--purple); }
.sp-client-alert-success, .sp-client-alert-info { border-left-color: var(--accent); }
.sp-client-alert i { font-size: 1.2rem; }

/* ---------------------------------------------------------------- the website's footer */
.sp-footer { position: relative; z-index: 1025; background: var(--brand-deep); color: #9fb1c4; font-size: .92rem; border-top: 3px solid var(--accent); }
.sp-footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 40px; padding: 48px 32px 32px; }
.sp-footer-about { padding-right: clamp(24px, 5vw, 80px); }
.sp-footer-logo { height: 28px; width: auto; filter: brightness(0) invert(1); margin-bottom: 14px; }
.sp-footer-contact { display: grid; gap: 8px; }
.sp-footer-contact a { color: #fff !important; text-decoration: none !important; display: inline-flex; align-items: center; gap: 8px; }
.sp-footer-contact i { color: var(--accent); }
.sp-footer h2 { font: 600 .8rem var(--body); letter-spacing: .08em; text-transform: uppercase; color: #fff; margin-bottom: 12px; }
.sp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sp-footer a { color: #c9d6e4 !important; text-decoration: none !important; }
.sp-footer a:hover { color: var(--accent) !important; }
.sp-footer-mid { text-align: center; }
.sp-footer-end { text-align: right; }
.sp-footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 18px 32px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .85rem; }
.sp-footer-base p { margin: 0; }
.sp-footer-locale { background: none; border: 0; color: #c9d6e4; font-size: .85rem; padding: 0; }

/* ---------------------------------------------------------------- smaller screens */
@media (max-width: 1240px) { .sp-sitenav { display: none; } .sp-mobile-only { display: block; } }
@media (max-width: 991px) {
	.sp-menu-toggle { display: block; }
	.sp-brand { flex: 0 0 auto; border-right: 0; padding-right: 0; }
	.sp-shell { grid-template-columns: minmax(0, 1fr); }
	.sp-sidebar { position: fixed; left: 0; top: var(--topbar); bottom: 0; z-index: 1020; width: 280px; height: auto; transform: translateX(-100%); transition: transform .25s; box-shadow: 0 20px 40px -10px rgba(15, 28, 43, .3); }
	.sp-nav-open .sp-sidebar { transform: none; }
	.sp-content { padding: 18px 16px 32px; }
	.sp-footer-grid { grid-template-columns: 1fr 1fr; }
	.sp-footer-about { grid-column: 1 / -1; padding-right: 0; }
	.sp-footer-mid, .sp-footer-end { text-align: left; }
}
@media (max-width: 560px) {
	.sp-alertbar-more, .sp-phone span { display: none; }
	.sp-topbar-right { padding: 0 14px; gap: 8px; }
	.sp-brand { padding: 0 0 0 14px; }
	.sp-brand img { height: 26px; }
	.sp-footer-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .sp-dot { animation: none; } }

/* ---------------------------------------------------------------- the breadcrumb, in the top bar where a menu would be */
.sp-topcrumb { flex: 1; min-width: 0; padding: 0 24px; background: transparent !important; border: 0 !important; margin: 0 !important; }
.sp-topcrumb .breadcrumb { margin: 0; padding: 0; background: transparent; flex-wrap: nowrap; overflow: hidden; font-size: .95rem; }
.sp-topcrumb .breadcrumb-item { white-space: nowrap; }
.sp-topcrumb .breadcrumb-item a { color: var(--muted) !important; text-decoration: none !important; font-weight: 500; }
.sp-topcrumb .breadcrumb-item a:hover { color: var(--brand) !important; }
.sp-topcrumb .breadcrumb-item.active { color: var(--ink); font-weight: 600; font-family: var(--head); overflow: hidden; text-overflow: ellipsis; }
.sp-topcrumb .breadcrumb-item + .breadcrumb-item::before { content: "\203A"; color: var(--line); padding: 0 10px; font-size: 1.1rem; line-height: 1; }

/* ---------------------------------------------------------------- the page's own menus (WHMCS panels) in the sidebar */
.sp-panels .card-sidebar { margin: 0 0 14px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; }
.sp-panels .card-sidebar > .card-header { padding: 6px 24px 10px !important; background: transparent !important; border: 0 !important; }
.sp-panels .card-sidebar .card-title { font: 600 .72rem var(--body) !important; letter-spacing: .09em; text-transform: uppercase; color: var(--muted) !important; margin: 0; }
.sp-panels .card-sidebar .card-title .badge { display: none; }
.sp-panels .card-minimise { display: none !important; }
.sp-panels .collapsable-card-body { display: block !important; }
.sp-panels .list-group { display: block !important; border-radius: 0; }
.sp-panels .list-group-item { display: block; padding: 10px 24px !important; border: 0 !important; border-radius: 0 !important; background: transparent; color: var(--ink) !important; font-weight: 500; font-size: .92rem; box-shadow: none; }
.sp-panels .list-group-item:hover { background: #e9ecf0; color: var(--brand) !important; }
.sp-panels .list-group-item.active { background: var(--brand) !important; color: #fff !important; box-shadow: inset 4px 0 0 var(--accent); }
.sp-panels .list-group-item.active .sidebar-menu-item-icon, .sp-panels .list-group-item.active .badge { color: #fff; }
.sp-panels .sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 12px; }
.sp-panels .sidebar-menu-item-icon-wrapper { width: 20px; text-align: center; color: var(--muted); }
.sp-panels .sidebar-menu-item-label { flex: 1; }
.sp-panels .sidebar-menu-item-badge .badge { background: var(--accent-soft); color: var(--accent-ink); border-radius: 99px; font-weight: 700; }
.sp-panels .card-body { padding: 0 24px 6px !important; font-size: .88rem; color: var(--text); }
.sp-panels .card-footer { padding: 8px 24px !important; background: transparent !important; border: 0 !important; }
.sp-panels .card-footer .btn { width: 100%; }
/* "Your info" and "Contacts" are on the account button's menu instead */
.sp-panels [menuItemName="Client Details"], .sp-panels [menuItemName="Client Contacts"] { display: none !important; }

/* ---------------------------------------------------------------- content boxes: the title above the white box, not in it */
.sp-content .card:not(.card-sidebar) { background: transparent !important; border: 0 !important; box-shadow: none !important; margin-bottom: 28px; }
.sp-content .card:not(.card-sidebar) > .card-header { padding: 0 2px 10px !important; background: transparent !important; border: 0 !important; }
.sp-content .card:not(.card-sidebar) > .card-header .card-title { font-size: 1.15rem; }
.sp-content .card:not(.card-sidebar) > .card-header .btn { font-size: .82rem; }
/* everything after the title is the white box: its parts joined, rounded at the top and bottom */
.sp-content .card:not(.card-sidebar) > :not(.card-header) { background: #fff; border: 1px solid var(--line); border-top-width: 0; border-bottom-width: 0; box-shadow: 0 10px 22px -18px rgba(15, 28, 43, .25); }
.sp-content .card:not(.card-sidebar) > :not(.card-header):first-child, .sp-content .card:not(.card-sidebar) > .card-header + * { border-top-width: 1px; border-radius: var(--radius) var(--radius) 0 0; }
.sp-content .card:not(.card-sidebar) > :not(.card-header):last-child { border-bottom-width: 1px; border-radius: 0 0 var(--radius) var(--radius); }
.sp-content .card:not(.card-sidebar) > .card-header + :last-child, .sp-content .card:not(.card-sidebar) > :only-child { border-radius: var(--radius) !important; }

/* ---------------------------------------------------------------- the page centred in the space beside the sidebar */
.sp-container { margin: 0 auto !important; }

/* the dashboard's panels: each item in a list its own white box, a little apart */
.sp-content .client-home-cards .card > .list-group { background: transparent !important; border: 0 !important; box-shadow: none !important; display: grid; gap: 8px; }
.sp-content .client-home-cards .card > .list-group > .list-group-item { background: #fff; border: 1px solid var(--line) !important; border-radius: 12px !important; box-shadow: 0 8px 18px -16px rgba(15, 28, 43, .3); margin: 0 !important; padding: 14px 18px; }
.sp-content .client-home-cards .card > .list-group > .list-group-item-action:hover { border-color: var(--brand) !important; background: #fff; }
.sp-content .client-home-cards .card > .card-footer { margin-top: 8px; border-top-width: 1px !important; border-radius: 12px !important; }

/* ---------------------------------------------------------------- headings at the site's weight: Twenty-X forced some to 400 */
.sp-portal .tiles .tile .title, .sp-portal .view-ticket .card-title { font-family: var(--head) !important; font-weight: 650 !important; color: var(--ink); }
/* and bold means bold again (Twenty-X had .font-weight-bold at 400) */
.sp-portal .font-weight-bold { font-weight: 700 !important; }

/* ---------------------------------------------------------------- the four colour palette, everywhere colour means something
   green (success, active, paid), navy (primary, info, open), red #E63946 (danger, unpaid, overdue), purple #6C5CE7
   (warning, pending), and greys for anything finished or neutral. No other colours */
:root { --red: #e63946; --red-pale: #fde8ea; --purple: #6c5ce7; --purple-pale: #ecebfc; --navy-pale: #eef1f5; --grey-pale: #eef0f2; }

/* Bootstrap's own colour words */
.sp-portal .text-success { color: var(--accent-ink) !important; }
.sp-portal .text-info { color: var(--brand) !important; }
.sp-portal .text-danger { color: var(--red) !important; }
.sp-portal .text-warning { color: var(--purple) !important; }
.sp-portal .bg-success, .sp-portal .badge-success { background-color: var(--accent) !important; color: #fff; }
.sp-portal .bg-info, .sp-portal .badge-info { background-color: var(--brand) !important; color: #fff; }
.sp-portal .bg-danger, .sp-portal .badge-danger { background-color: var(--red) !important; color: #fff; }
.sp-portal .bg-warning, .sp-portal .badge-warning { background-color: var(--purple) !important; color: #fff; }
.sp-portal .btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.sp-portal .btn-danger:hover { background: #c92f3b; border-color: #c92f3b; color: #fff; }
.sp-portal .btn-warning { background: var(--purple); border-color: var(--purple); color: #fff; }
.sp-portal .btn-warning:hover { background: #5a4bd6; border-color: #5a4bd6; color: #fff; }
.sp-portal .alert-info { background: var(--navy-pale); color: var(--brand); border-left-color: var(--brand); }
.sp-portal .alert-danger { background: var(--red-pale); color: #9b1c27; border-left-color: var(--red); }
.sp-portal .alert-warning { background: var(--purple-pale); color: #3d3291; border-left-color: var(--purple); }

/* WHMCS's labels and statuses */
.sp-portal .label { border-radius: 99px; font-weight: 600; }
.sp-portal .label-success, .sp-portal .status-active, .sp-portal .status-paid, .sp-portal .status-completed, .sp-portal .status-accepted, .sp-portal .status-delivered { background: var(--accent-soft) !important; color: var(--accent-ink) !important; }
.sp-portal .label-info, .sp-portal .status-open, .sp-portal .status-answered, .sp-portal .status-customer-reply, .sp-portal .status-inprogress { background: var(--navy-pale) !important; color: var(--brand) !important; }
.sp-portal .label-danger, .sp-portal .status-unpaid, .sp-portal .status-collections, .sp-portal .status-fraud, .sp-portal .status-redemption, .sp-portal .status-expired, .sp-portal .status-grace, .sp-portal .status-dead, .sp-portal .status-lost { background: var(--red-pale) !important; color: #9b1c27 !important; }
.sp-portal .label-warning, .sp-portal .status-pending, .sp-portal .status-payment-pending, .sp-portal .status-pending-registration, .sp-portal .status-pending-transfer, .sp-portal .status-suspended, .sp-portal .status-onhold { background: var(--purple-pale) !important; color: #3d3291 !important; }
.sp-portal .label-default, .sp-portal .status-cancelled, .sp-portal .status-closed, .sp-portal .status-terminated, .sp-portal .status-refunded, .sp-portal .status-transferred-away { background: var(--grey-pale) !important; color: var(--muted) !important; }

/* WHMCS's named colours (panel accents, the dashboard boxes' strips): each one onto the palette */
.sp-portal .bg-color-green, .sp-portal .bg-color-emerald, .sp-portal .bg-color-lime, .sp-portal .bg-color-turquoise { background-color: var(--accent) !important; }
.sp-portal .bg-color-blue, .sp-portal .bg-color-midnight-blue, .sp-portal .bg-color-teal, .sp-portal .bg-color-wet-asphalt { background-color: var(--brand) !important; }
.sp-portal .bg-color-red, .sp-portal .bg-color-pomegranate, .sp-portal .bg-color-pink { background-color: var(--red) !important; }
.sp-portal .bg-color-purple, .sp-portal .bg-color-amethyst, .sp-portal .bg-color-magenta, .sp-portal .bg-color-gold, .sp-portal .bg-color-orange, .sp-portal .bg-color-sun-flower { background-color: var(--purple) !important; }
.sp-portal .bg-color-asbestos, .sp-portal .bg-color-silver { background-color: var(--muted) !important; }
.sp-portal [class*="card-accent-"] { border-top-color: var(--brand) !important; }
.sp-portal .card-accent-green, .sp-portal .card-accent-emerald, .sp-portal .card-accent-lime, .sp-portal .card-accent-turquoise { border-top-color: var(--accent) !important; }
.sp-portal .card-accent-red, .sp-portal .card-accent-pomegranate, .sp-portal .card-accent-pink { border-top-color: var(--red) !important; }
.sp-portal .card-accent-purple, .sp-portal .card-accent-amethyst, .sp-portal .card-accent-magenta, .sp-portal .card-accent-gold, .sp-portal .card-accent-orange, .sp-portal .card-accent-sun-flower, .sp-portal .card-accent-brand-cpanel-orange { border-top-color: var(--purple) !important; }
.sp-portal .card-accent-asbestos, .sp-portal .card-accent-silver { border-top-color: var(--muted) !important; }

/* ---------------------------------------------------------------- nothing heavier than the sidebar menu (Inter, 500, ink):
   the current breadcrumb and the dashboard boxes' titles were bolder than it */
.sp-topcrumb .breadcrumb-item.active { font-family: var(--body); font-weight: 500; color: var(--ink); }
.sp-portal .tiles .tile .title { font-family: var(--body) !important; font-weight: 500 !important; color: var(--ink) !important; }

/* ---------------------------------------------------------------- the same rule for every heading: the site's Outfit, but no
   heavier or darker than the sidebar menu (500, ink). Bold inside sentences stays bold, that's emphasis not a heading */
.sp-portal h1, .sp-portal h2, .sp-portal h3, .sp-portal h4, .sp-portal h5, .sp-portal h6,
.sp-portal .h1, .sp-portal .h2, .sp-portal .h3, .sp-portal .h4, .sp-portal .h5, .sp-portal .h6,
.sp-portal .card-title, .sp-portal .view-ticket .card-title, .sp-portal .table th, .sp-portal thead th,
.sp-portal .sp-footer h2, .sp-portal .sp-sidemenu-title, .sp-portal .sp-panels .card-sidebar .card-title,
.sp-portal .sp-account-head strong, .sp-portal .sp-sidebar-help strong {
	font-weight: 500 !important;
	color: var(--ink) !important;
}
/* the small grey section labels in the sidebar keep their quieter grey, just not bolder */
.sp-portal .sp-sidemenu-title, .sp-portal .sp-panels .card-sidebar .card-title { color: var(--muted) !important; }
/* and the footer's headings stay white on navy */
.sp-portal .sp-footer h2 { color: #fff !important; }

/* headings in the heading stack (Outfit, then Inter, then Arial), the same rule as the website */
.sp-portal h1, .sp-portal h2, .sp-portal h3, .sp-portal h4, .sp-portal h5, .sp-portal h6,
.sp-portal .h1, .sp-portal .h2, .sp-portal .h3, .sp-portal .h4, .sp-portal .h5, .sp-portal .h6,
.sp-portal .card-title, .sp-portal .view-ticket .card-title, .sp-portal .table th,
.sp-portal .sp-account-head strong, .sp-portal .sp-sidebar-help strong { font-family: var(--head) !important; }

/* ---------------------------------------------------------------- content headings as the website draws them: Outfit at
   the site's heading weight in ink, sitting on the page with no box behind, any icon the same colour as the words.
   Twenty-X gave panel and page titles a tinted strip and a grey-blue icon */
.sp-content h1, .sp-content h2, .sp-content h3, .sp-content h4, .sp-content h5, .sp-content h6, .sp-content .card-title {
	font-family: var(--head) !important;
	font-weight: 600 !important;
	color: var(--ink) !important;
	letter-spacing: -.01em;
	background: transparent !important;
}
.sp-content .client-home-cards .card .card-title, .sp-content .sub-ticket .card-title, .sp-content .announcement-card .card-title,
.sp-content .card.mass-payment-card .card-body .card-title, .sp-content #order-standard_cart .header-lined h1,
.sp-content .card.card-accent-emerald, .sp-content .card.card-accent-emerald .card-header {
	background: transparent !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	border-radius: 0;
}
.sp-content h1 i, .sp-content h2 i, .sp-content h3 i, .sp-content h4 i, .sp-content .card-title i,
.sp-content .client-home-cards .card h3.card-title i, .sp-content .card.card-accent-emerald .card-header .card-title i { color: inherit !important; }
/* the footer's small headings stay in the website's own style (Inter capitals) */
.sp-portal .sp-footer h2 { font: 600 .8rem var(--body) !important; letter-spacing: .08em; }

/* ---------------------------------------------------------------- dashboard: "Your services", one simple card per service */
.sp-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sp-section-head h2 { font-size: 1.35rem; margin: 0; }
.sp-section-head a { color: var(--ink); font-weight: 500; text-decoration: none; }
.sp-section-head a:hover { color: var(--brand); text-decoration: underline; }
.sp-services { margin-bottom: 28px; }
.sp-service { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 14px; box-shadow: 0 8px 18px -16px rgba(15, 28, 43, .3); }
.sp-service-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 0; }
.sp-service-title { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sp-service-icon { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px; color: var(--brand); font-size: 1.35rem; }
.sp-content .sp-service h3 { font-size: 1.3rem; margin: 0; line-height: 1.25; overflow-wrap: anywhere; }
.sp-service-domain { display: block; color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; }
.sp-service-status { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; color: var(--muted); }
.sp-service-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sp-service-status-active { color: var(--accent-ink); }
.sp-service-status-suspended { color: var(--red); }
.sp-service-status-pending { color: var(--purple); }
.sp-service-renewal { padding: 16px 24px 20px; display: grid; gap: 4px; }
.sp-service-label, .sp-service-price { color: var(--muted); font-size: .88rem; }
.sp-service-date { color: var(--ink); }
.sp-service-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.sp-service-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-service-actions .btn { font-size: .9rem; padding: 8px 16px; }
.sp-service-empty { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 24px; }
.sp-service-empty p { margin: 0; }
@media (max-width: 575px) {
	.sp-service-main, .sp-service-renewal, .sp-service-foot { padding-left: 16px; padding-right: 16px; }
	.sp-service-actions, .sp-service-actions .btn { width: 100%; }
}

/* ---------------------------------------------------------------- dashboard: the welcome and the three figures in one strip */
.sp-welcome { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.sp-content .sp-welcome h1 { font-size: 2rem; margin: 0 0 4px; }
.sp-welcome p { margin: 0; color: var(--muted); }
.sp-stats { display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 30px; overflow: hidden; box-shadow: 0 8px 18px -16px rgba(15, 28, 43, .3); }
.sp-stat { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 22px 24px; color: var(--muted) !important; text-decoration: none !important; font-size: .9rem; }
.sp-stat + .sp-stat { border-left: 1px solid var(--line); }
.sp-stat:hover { background: #f7f9fb; }
.sp-stat > i { font-size: 1.3rem; color: var(--ink); margin-top: 8px; }
.sp-stat strong { display: block; font: 500 1.7rem/1.2 var(--head); color: var(--ink); }
.sp-stat-due { background: var(--red-pale); box-shadow: inset 4px 0 0 var(--red); }
.sp-stat-due:hover { background: #fbdde0; }
.sp-stat-due > i, .sp-stat-due strong { color: var(--red); }
.sp-stat-due span { color: #9b1c27; }
.sp-stat-go { position: absolute; right: 18px; bottom: 14px; font-weight: 600; color: var(--red) !important; }
@media (max-width: 767px) {
	.sp-stats { grid-template-columns: 1fr; }
	.sp-stat + .sp-stat { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------------------------------------------------------------- dashboard: Get support and Firewall, side by side */
.sp-help-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 10px; }
.sp-content .sp-help-title { font-size: 1.35rem; margin: 0 0 12px; }
.sp-help { display: flex; align-items: flex-start; gap: 20px; height: calc(100% - 44px); padding: 26px 24px; background: #fff; border: 1px solid var(--line); border-radius: 12px; color: var(--muted) !important; text-decoration: none !important; box-shadow: 0 8px 18px -16px rgba(15, 28, 43, .3); transition: border-color .15s; }
.sp-help:hover { border-color: var(--brand); }
.sp-help > i { flex: 0 0 auto; font-size: 3.2rem; line-height: 1; color: var(--brand); }
.sp-help strong { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 500; font-size: 1.05rem; }
.sp-help-go { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; color: var(--ink); font-weight: 500; }
.sp-help:hover .sp-help-go { color: var(--brand); text-decoration: underline; }
@media (max-width: 767px) {
	.sp-help-row { grid-template-columns: 1fr; }
	.sp-help { height: auto; }
}

/* ---------------------------------------------------------------- breadcrumb: links, separator and the current page on one
   line, centred. Twenty-X gave the links 17px, a taller line and letter spacing, so they sat lower than the current page */
.sp-topcrumb .breadcrumb { align-items: center; }
.sp-topcrumb .breadcrumb-item, .sp-topcrumb .breadcrumb-item a, .master-breadcrumb .breadcrumb li.breadcrumb-item a, .sp-topcrumb .breadcrumb-item.active {
	display: inline-flex; align-items: center; font-size: .95rem !important; line-height: 1.4 !important; letter-spacing: normal !important;
}
.sp-topcrumb .breadcrumb-item + .breadcrumb-item::before { display: inline-block; float: none; line-height: 1; }

/* Get support and Firewall: the same quiet hover as the figures strip (a faint tint), not a navy edge and underline */
.sp-help { transition: background-color .15s; }
.sp-help:hover { border-color: var(--line); background: #f7f9fb; }
.sp-help:hover .sp-help-go { color: var(--ink); text-decoration: none; }

/* service card buttons: the same quiet hover, a faint tint on the plain one and a touch lighter navy on the filled one,
   with nothing moving or glowing */
.sp-service-actions .btn { transition: background-color .15s, border-color .15s; box-shadow: none !important; transform: none !important; }
.sp-service-actions .btn-default:hover, .sp-service-actions .btn-default:focus { background: #f7f9fb; border-color: var(--line); color: var(--ink); }
.sp-service-actions .btn-primary:hover, .sp-service-actions .btn-primary:focus { background: #1a3658; border-color: #1a3658; color: #fff; }

/* ---------------------------------------------------------------- the quiet hover, everywhere: plain buttons tint faintly,
   filled ones go a touch lighter in their own colour, and nothing moves or glows. Keyboard users still get a clear ring */
.sp-portal .btn { transition: background-color .15s, border-color .15s, color .15s; }
.sp-portal .btn:hover, .sp-portal .btn:focus, .sp-portal .btn:active { box-shadow: none !important; transform: none !important; }
.sp-portal .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-portal .btn-default:hover, .sp-portal .btn-default:focus, .sp-portal .btn-secondary:hover, .sp-portal .btn-secondary:focus,
.sp-portal .btn-outline-primary:hover, .sp-portal .btn-outline-primary:focus, .sp-portal .btn-outline-secondary:hover, .sp-portal .btn-light:hover {
	background: #f7f9fb !important; border-color: var(--line) !important; color: var(--ink) !important;
}
.sp-portal .btn-primary:hover, .sp-portal .btn-primary:focus, .sp-portal .btn-success:hover, .sp-portal .btn-success:focus,
.sp-portal .btn-info:hover, .sp-portal .btn-info:focus {
	background: #1a3658 !important; border-color: #1a3658 !important; color: #fff !important;
}
.sp-portal .btn-danger:hover, .sp-portal .btn-danger:focus { background: #ea4f5b !important; border-color: #ea4f5b !important; color: #fff !important; }
.sp-portal .btn-warning:hover, .sp-portal .btn-warning:focus { background: #7d6eea !important; border-color: #7d6eea !important; color: #fff !important; }

/* the logo centred in its box above the sidebar (on phones it stays at the left, beside the menu button) */
.sp-brand a { display: flex; align-items: center; }
@media (min-width: 992px) {
	.sp-brand { justify-content: center; padding: 0 20px; }
}

/* ---------------------------------------------------------------- Services: search, and finished services quietened */
.sp-list-tools { margin-bottom: 16px; }
.sp-search { position: relative; display: block; max-width: 420px; margin: 0; }
.sp-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 1.1rem; }
.sp-search input { width: 100%; padding: 10px 14px 10px 40px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.sp-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--line); }
.sp-list-none { color: var(--muted); padding: 20px 0; }
.sp-service-ended { background: #fbfcfd; box-shadow: none; }
.sp-service-ended .sp-service-icon, .sp-content .sp-service-ended h3 { color: var(--muted) !important; }
.sp-service-status-cancelled, .sp-service-status-terminated, .sp-service-status-completed { color: var(--muted); }
.sp-service-status-fraud { color: var(--red); }

/* the sidebar is as tall as its menus and the page grows to fit them, rather than the sidebar scrolling on its own
   (pages with many filters made it scroll). On phones it's still the slide-in menu, which scrolls */
@media (min-width: 992px) {
	.sp-sidebar { position: static; height: auto; overflow: visible; }
}
@media (max-width: 991px) {
	.sp-sidebar { overflow-y: auto; }
}

/* ---------------------------------------------------------------- Invoices: what's owed, then a row per invoice in one box */
.sp-due { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; padding: 18px 24px; border-radius: 12px; background: var(--red-pale); box-shadow: inset 4px 0 0 var(--red); color: #9b1c27 !important; text-decoration: none !important; transition: background-color .15s; }
.sp-due:hover { background: #fbdde0; }
.sp-due > i { font-size: 1.4rem; color: var(--red); }
.sp-due strong { font: 500 1.25rem var(--head); color: var(--red); margin-right: 6px; }
.sp-due-go { margin-left: auto; font-weight: 600; color: var(--red); }
.sp-rows { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 8px 18px -16px rgba(15, 28, 43, .3); }
.sp-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 110px 110px 110px; align-items: center; gap: 16px; padding: 14px 20px; color: var(--muted) !important; text-decoration: none !important; transition: background-color .15s; }
.sp-row[hidden] { display: none; }
.sp-row + .sp-row { border-top: 1px solid var(--line); }
.sp-row:hover { background: #f7f9fb; }
.sp-row-icon { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; color: var(--brand); font-size: 1.2rem; }
.sp-row-main strong { display: block; color: var(--ink); font-weight: 500; }
.sp-row-main small { font-size: .85rem; }
.sp-row-amount { color: var(--ink); text-align: right; }
.sp-row-action { text-align: right; }
.sp-row-action .btn { font-size: .85rem; padding: 6px 14px; }
.sp-row-due { background: #fffafa; }
.sp-row-due .sp-row-amount { color: var(--red); }
.sp-row-due .sp-service-status { color: var(--red); }
.sp-service-status-paid { color: var(--accent-ink); }
.sp-service-status-unpaid, .sp-service-status-collections { color: var(--red); }
.sp-service-status-payment-pending { color: var(--purple); }
.sp-service-status-refunded { color: var(--muted); }
.sp-rows .sp-list-none { margin: 0; padding: 20px; }
.sp-more { display: block; margin: 16px auto 0; }
.sp-more[hidden] { display: none; }
@media (max-width: 767px) {
	.sp-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
	.sp-row .sp-service-status, .sp-row-action { display: none; }
}

/* ---------------------------------------------------------------- Support tickets: the invoice rows, with when and a new
   reply marker. Answered (our reply waiting for them) green, open and in progress navy, waiting on us or on hold purple */
.sp-ticket { grid-template-columns: 40px minmax(0, 1fr) 170px 130px 80px; }
.sp-row-when { text-align: right; font-size: .88rem; }
.sp-new { display: inline-block; margin-right: 8px; padding: 1px 8px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink); font-size: .75rem; font-weight: 600; }
.sp-row-unread .sp-row-main strong { font-weight: 600; }
.sp-row-ended .sp-row-icon, .sp-row-ended .sp-row-main strong { color: var(--muted); }
.sp-ticket-status-answered { color: var(--accent-ink); }
.sp-ticket-status-open, .sp-ticket-status-in-progress { color: var(--brand); }
.sp-ticket-status-customer-reply, .sp-ticket-status-on-hold { color: var(--purple); }
.sp-ticket-status-closed { color: var(--muted); }
@media (max-width: 767px) {
	.sp-ticket { grid-template-columns: 40px minmax(0, 1fr) auto; }
	.sp-ticket .sp-row-when { display: none; }
	.sp-ticket .sp-service-status { display: inline-flex; }
}

/* WHMCS's "Powered by" line (dev licence only, live has branding removal): room above it, quiet and small */
.sp-content p[style="text-align:center;"]:last-child { margin: 40px 0 0; font-size: .8rem; color: var(--muted); }
.sp-content p[style="text-align:center;"]:last-child a { color: var(--muted); }

/* ---------------------------------------------------------------- Payment methods: each one a card like a service */
.sp-welcome-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-paymethod-digits { color: var(--muted); font-weight: 400; font-size: 1rem; margin-left: 4px; }
.sp-paymethod-tags { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 12px; }
.sp-paymethod-default { padding: 2px 10px; border-radius: 99px; background: var(--navy-pale); color: var(--brand); font-size: .78rem; font-weight: 600; }
.sp-btn-delete:hover, .sp-btn-delete:focus { color: var(--red) !important; }

/* ---------------------------------------------------------------- Add funds: the form in one box, the limits below */
.sp-narrow { max-width: 640px; }
.sp-form-box { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px; box-shadow: 0 8px 18px -16px rgba(15, 28, 43, .3); }
.sp-form-box label { color: var(--ink); font-weight: 500; margin-bottom: 6px; }
.sp-form-note { margin: 14px 0 0; color: var(--muted); font-size: .85rem; }
.sp-content .sp-limits-title { margin-top: 28px; }
.sp-limits { display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.sp-limits > div { padding: 16px 20px; display: grid; gap: 4px; }
.sp-limits > div + div { border-left: 1px solid var(--line); }
.sp-limits span { color: var(--muted); font-size: .85rem; }
.sp-limits strong { color: var(--ink); font-weight: 500; font-size: 1.1rem; }
@media (max-width: 575px) {
	.sp-limits { grid-template-columns: 1fr; }
	.sp-limits > div + div { border-left: 0; border-top: 1px solid var(--line); }
}

/* ---------------------------------------------------------------- signed in as a client from admin: a bar back */
.sp-adminbar { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 8px 16px; background: var(--purple); color: #fff; font-size: .9rem; }
.sp-adminbar i { vertical-align: -2px; }
.sp-adminbar a { padding: 3px 12px; border-radius: 99px; background: #fff; color: var(--purple) !important; font-weight: 600; text-decoration: none !important; }
.sp-adminbar a:hover { background: #f3f1fe; }

/* ---------------------------------------------------------------- Manage Direct Debit (the GoCardless addon's own page,
   restyled from here so its updates don't undo it): the title on the page, the mandates in a white box, each detail as a
   label above its value. With no mandate yet, the message and button big and centred */
.in2c-nddgc-ca-mdd .panel { background: transparent; border: 0; box-shadow: none; margin: 0; }
.in2c-nddgc-ca-mdd .in2c-nddgc-panel-heading { background: transparent !important; border: 0 !important; padding: 0 !important; margin-bottom: 16px; }
.in2c-nddgc-ca-mdd .in2c-nddgc-panel-heading > .row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 0; }
.in2c-nddgc-ca-mdd .in2c-nddgc-panel-heading [class*="col-"] { flex: 0 1 auto; max-width: none; width: auto; padding: 0; }
.in2c-nddgc-ca-mdd .in2c-nddgc-panel-headpara { margin: 0; }
.in2c-nddgc-ca-mdd .in2c-nddgc-panel-headpara strong { font: 600 2rem/1.2 var(--head); color: var(--ink); letter-spacing: -.01em; }
.in2c-nddgc-ca-mdd .in2c-nddgc-panel-body { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px; box-shadow: 0 8px 18px -16px rgba(15, 28, 43, .3); }
.in2c-nddgc-ca-mdd .in2c-nddgc-row { margin: 0; }
.in2c-nddgc-ca-mdd .in2c-nddgc-hr { margin: 24px -24px; border-color: var(--line); }
.in2c-nddgc-ca-mdd .in2c-nddgc-form-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px 24px; width: 100%; }
.in2c-nddgc-ca-mdd .in2c-nddgc-form-group { display: grid; gap: 2px; margin: 0; }
.in2c-nddgc-ca-mdd .in2c-nddgc-form-group [class*="col-"] { max-width: none; width: auto; padding: 0; flex: none; }
.in2c-nddgc-ca-mdd .in2c-nddgc-control-label { margin: 0; color: var(--muted); font-size: .85rem; font-weight: 400; }
.in2c-nddgc-ca-mdd .in2c-nddgc-control-desc { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.in2c-nddgc-ca-mdd .in2c-nddgc-form-group:has(label:empty), .in2c-nddgc-ca-mdd .in2c-nddgc-form-group:has(.in2c-nddgc-control-label:only-child) { align-content: end; }
.in2c-nddgc-ca-mdd .in2c-nddgc-btn-default { margin-bottom: 18px; display: inline-flex; align-items: center; gap: 8px; }
.in2c-nddgc-ca-mdd .in2c-nddgc-btn-default img { display: none; }
.in2c-nddgc-ca-mdd .in2c-nddgc-btn-default > span { padding: 2px 10px; border-radius: 99px; background: var(--navy-pale); color: var(--brand); font-size: .78rem; font-weight: 600; }
.in2c-nddgc-ca-mdd .btn-success { background: var(--brand); border-color: var(--brand); color: #fff; }
.in2c-nddgc-ca-mdd .btn-danger { background: #fff; border: 1.5px solid var(--line); color: var(--red); }
.in2c-nddgc-ca-mdd .btn-danger:hover { background: var(--red-pale) !important; border-color: var(--line) !important; color: var(--red) !important; }
/* nothing set up yet */
.in2c-nddgc-ca-mdd .in2c-nddgc-panel-body:has(.col-sm-12.text-center) { padding: 64px 24px; text-align: center; }
.in2c-nddgc-ca-mdd .in2c-nddgc-panel-body:has(.col-sm-12.text-center) .in2c-nddgc-form-groups { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 22px; }
.in2c-nddgc-ca-mdd .in2c-nddgc-panel-body:has(.col-sm-12.text-center) .in2c-nddgc-control-desc { font: 500 1.35rem/1.4 var(--head); color: var(--ink); max-width: 520px; }
.in2c-nddgc-ca-mdd .in2c-nddgc-panel-body:has(.col-sm-12.text-center) .in2c-nddgc-control-desc::before { content: "\ea0b"; font-family: boxicons; display: block; font-size: 3.4rem; line-height: 1; margin-bottom: 14px; color: var(--brand); }
.in2c-nddgc-ca-mdd .in2c-nddgc-panel-body:has(.col-sm-12.text-center) .btn { padding: 12px 28px; font-size: 1rem; }

/* ---------------------------------------------------------------- Firewall unblocker (the Unblock IP addon's page): its
   heading on the page, the IP box and the button together in one padded white box */
form[name="ipaddresscheck"] { max-width: 640px; }
form[name="ipaddresscheck"] .panel { background: transparent; border: 0; box-shadow: none; margin: 0; }
form[name="ipaddresscheck"] .panel-heading { background: transparent !important; border: 0 !important; padding: 0 !important; margin-bottom: 14px; }
form[name="ipaddresscheck"] .panel-heading .panel-title { font: 600 2rem/1.2 var(--head); color: var(--ink); letter-spacing: -.01em; margin: 0; }
form[name="ipaddresscheck"] .panel-heading .panel-title::after { content: "If our firewall has blocked you, usually after a few wrong passwords, check your IP address below and we'll unblock it."; display: block; margin-top: 6px; font: 400 1rem/1.5 var(--body); color: var(--muted); letter-spacing: normal; }
form[name="ipaddresscheck"] .panel-body { background: #fff; border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; padding: 28px 28px 8px; }
form[name="ipaddresscheck"] .panel-body .form-control { height: auto; padding: 12px 14px; font-size: 1.1rem; border: 1px solid var(--line); border-radius: 10px; }
form[name="ipaddresscheck"] .panel-footer { background: #fff; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 12px 12px; padding: 8px 28px 28px; box-shadow: 0 8px 18px -16px rgba(15, 28, 43, .3); }
form[name="ipaddresscheck"] .panel-footer .btn { width: 100%; padding: 11px 20px; }

/* ---------------------------------------------------------------- a ticket: the subject as the heading, Reply and Close
   beside it, the conversation below */
.sp-content .sp-ticket-head h1 { font-size: 1.7rem; overflow-wrap: anywhere; }
.sp-ticket-head .sp-welcome-actions .btn i { vertical-align: -2px; }
.sp-content .view-ticket > .card-body:first-child { border-top-left-radius: 12px; border-top-right-radius: 12px; }

/* ---------------------------------------------------------------- Open a ticket: departments as boxes, two columns */
.sp-departments { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sp-department { height: auto; }
.sp-department > i { font-size: 2.6rem; }
@media (max-width: 767px) {
	.sp-departments { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- Affiliates: the link and the commissions side by side */
.sp-stats > div.sp-stat:hover { background: transparent; }
.sp-box { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px; height: calc(100% - 44px); box-shadow: 0 8px 18px -16px rgba(15, 28, 43, .3); }
.sp-box > p { color: var(--muted); }
.sp-copy { display: flex; gap: 10px; }
.sp-copy .form-control { flex: 1; min-width: 0; height: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); color: var(--ink); }
.sp-copy .btn { flex: 0 0 auto; }
.sp-sums { display: grid; gap: 10px; margin-bottom: 18px; }
.sp-sums > div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.sp-sums span { color: var(--muted); }
.sp-sums strong { color: var(--ink); font-weight: 500; }
.sp-content .sp-section-gap { margin-top: 32px; }
@media (max-width: 767px) {
	.sp-box { height: auto; }
}

/* ---------------------------------------------------------------- Domains: cards like services, bulk actions above */
.sp-domain-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sp-domain-tools .sp-search { flex: 1 1 260px; }
.sp-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.sp-bulk > span { color: var(--muted); font-size: .88rem; }
.sp-bulk .btn { font-size: .85rem; padding: 6px 12px; }
.sp-domain-dates { grid-template-columns: repeat(auto-fit, minmax(150px, max-content)); column-gap: 40px; }
.sp-domain-dates > div { display: grid; gap: 2px; }
.sp-soon { margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: var(--red-pale); color: #9b1c27; font-size: .75rem; font-weight: 600; }
.sp-on { color: var(--accent-ink); vertical-align: -2px; }
.sp-off { color: var(--red); vertical-align: -2px; }
.sp-select { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; color: var(--muted); }
.sp-domain-status-active { color: var(--accent-ink); }
.sp-domain-status-pending, .sp-domain-status-pending-registration, .sp-domain-status-pending-transfer { color: var(--purple); }
.sp-domain-status-grace, .sp-domain-status-redemption, .sp-domain-status-fraud { color: var(--red); }
.sp-domain-status-expired, .sp-domain-status-cancelled, .sp-domain-status-transferred-away { color: var(--muted); }
.sp-box .form-group label { color: var(--ink); font-weight: 500; margin-bottom: 6px; }

/* Return to admin, in the top bar beside the phone number (staff only, in place of the purple bar) */
.sp-toadmin { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--purple-pale); color: #3d3291 !important; font-size: .85rem; font-weight: 600; text-decoration: none !important; white-space: nowrap; }
.sp-toadmin:hover { background: #e2dffb; }
@media (max-width: 575px) {
	.sp-toadmin span { display: none; }
}

/* ---------------------------------------------------------------- forms everywhere in the client area: the website's
   fields (soft border, rounded, roomy), labels in ink, and a green ring on the field being typed in */
.sp-content .form-control, .sp-content .custom-select {
	height: auto; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background-color: #fff; color: var(--ink); font-size: .95rem; box-shadow: none;
}
.sp-content .custom-select { padding-right: 36px; }
.sp-content .form-control:focus, .sp-content .custom-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(16, 185, 129, .15); outline: 0; }
.sp-content .form-control[readonly], .sp-content .form-control:disabled { background-color: var(--bg-soft); }
.sp-content .input-group > .form-control:not(:last-child), .sp-content .input-group > .custom-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.sp-content .input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.sp-content .input-group-text { border: 1px solid var(--line); background: var(--bg-soft); color: var(--muted); border-radius: 10px; font-size: .88rem; }
.sp-content .input-group-append .input-group-text { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.sp-content .input-group-prepend .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.sp-content .control-label, .sp-content .col-form-label, .sp-content form label:not(.form-check):not(.form-check-label):not(.sp-select) { color: var(--ink); font-weight: 500; }
.sp-content .form-group { margin-bottom: 18px; }
.sp-content .form-check { color: var(--ink); margin-right: 18px; }
.sp-content .form-text, .sp-content .help-block { color: var(--muted); font-size: .85rem; }
.sp-content .invalid-feedback, .sp-content .text-danger { color: var(--red) !important; }
.sp-content .form-control.is-invalid { border-color: var(--red); }
/* a form's own box: a sensible width and room inside */
.sp-content .sp-form-card { max-width: 820px; }
.sp-content .sp-form-card > .card-body { padding: 28px; }
.sp-content .payment-method-add-card .card-title { border: 0; padding: 0; }

/* ---------------------------------------------------------------- Renew domains, laid out like the website's /cart (the
   order form's page, styled from here on that page alone): the heading, each domain a white line card with its status on
   the right and the renewal period under a thin rule, and beside them the navy summary with a green edge and button */
.domain-renewals-page #order-standard_cart .cart-sidebar, .domain-renewals-page #order-standard_cart .sidebar-collapsed { display: none !important; }
.domain-renewals-page #order-standard_cart > .row { display: block; margin: 0; }
.domain-renewals-page #order-standard_cart .cart-body { width: 100%; max-width: none; flex: none; float: none; padding: 0; }
.domain-renewals-page #order-standard_cart .header-lined { border: 0; padding: 0; margin: 0 0 28px; }
.domain-renewals-page #order-standard_cart .header-lined h1 { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font: 600 2rem/1.15 var(--head) !important; color: var(--ink); background: transparent !important; padding: 0 !important; margin: 0; }
.domain-renewals-page #order-standard_cart .header-lined h1 .float-right { float: none !important; }
.domain-renewals-page #order-standard_cart .domain-renewals-filter { width: 280px; max-width: 100%; font: 400 .95rem var(--body); }
.domain-renewals-page #order-standard_cart .cart-body > .row { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; margin: 0; }
.domain-renewals-page #order-standard_cart .secondary-cart-body, .domain-renewals-page #order-standard_cart .secondary-cart-sidebar { width: auto; max-width: none; flex: none; float: none; padding: 0; }
.domain-renewals-page #order-standard_cart .secondary-cart-sidebar { position: sticky; top: calc(var(--topbar) + 24px); }
/* each domain, a line card */
.domain-renewals-page #order-standard_cart .domain-renewals { display: grid; gap: 12px; margin: 0; }
.domain-renewals-page #order-standard_cart .domain-renewal { position: relative; margin: 0; padding: 22px 24px; background: #fff; border: 1px solid var(--line) !important; border-radius: 14px; box-shadow: none; }
.domain-renewals-page #order-standard_cart .domain-renewal > .float-right { float: none !important; position: absolute; top: 24px; right: 24px; }
.domain-renewals-page #order-standard_cart .domain-renewal h3 { font: 600 1.2rem/1.25 var(--head) !important; color: var(--ink) !important; margin: 0 0 4px !important; padding: 0 180px 0 0; overflow-wrap: anywhere; }
.domain-renewals-page #order-standard_cart .domain-renewal > p { margin: 0; color: var(--muted); font-size: .92rem; }
.domain-renewals-page #order-standard_cart .domain-renewal .form-horizontal { margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.domain-renewals-page #order-standard_cart .domain-renewal .form-group { display: grid; gap: 6px; margin: 0; }
.domain-renewals-page #order-standard_cart .domain-renewal .form-group > [class*="col-"] { max-width: 420px; width: 100%; flex: none; padding: 0; }
.domain-renewals-page #order-standard_cart .domain-renewal .control-label { text-align: left; padding: 0; }
.domain-renewals-page #order-standard_cart .domain-renewal .text-right { text-align: left !important; margin-top: 14px; }
.domain-renewals-page #order-standard_cart .domain-renewal .label { display: inline-flex; align-items: center; gap: 7px; padding: 0; background: transparent !important; font-size: .85rem; font-weight: 500; color: var(--muted) !important; white-space: nowrap; }
.domain-renewals-page #order-standard_cart .domain-renewal .label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.domain-renewals-page #order-standard_cart .domain-renewal .label-success { color: var(--accent-ink) !important; }
.domain-renewals-page #order-standard_cart .domain-renewal .label-warning, .domain-renewals-page #order-standard_cart .domain-renewal .label-danger { color: var(--red) !important; }
.domain-renewals-page #order-standard_cart .domain-renewal .label-info { color: var(--purple) !important; }
.domain-renewals-page #order-standard_cart .btn-add-renewal-to-cart { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; font-size: .9rem; padding: 8px 18px; border-radius: 10px; }
.domain-renewals-page #order-standard_cart .btn-add-renewal-to-cart:hover { background: #1a3658 !important; border-color: #1a3658 !important; }
/* the summary: the website's navy box */
.domain-renewals-page #order-standard_cart #orderSummary { padding: 26px; border-radius: 18px; background: var(--brand); color: #c9d6e4; border-top: 3px solid var(--accent); }
.domain-renewals-page #order-standard_cart .order-summary { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0; color: #c9d6e4; box-shadow: none; }
.domain-renewals-page #order-standard_cart .order-summary h2 { font: 600 1.2rem var(--head) !important; color: #fff !important; background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 0 16px; text-align: left; }
.domain-renewals-page #order-standard_cart .order-summary .summary-container, .domain-renewals-page #order-standard_cart .order-summary .summary-container * { color: #c9d6e4; background: transparent !important; border-color: rgba(255, 255, 255, .1) !important; }
.domain-renewals-page #order-standard_cart .order-summary .summary-container .item-name, .domain-renewals-page #order-standard_cart .order-summary .summary-container .item-group, .domain-renewals-page #order-standard_cart .order-summary .summary-container strong, .domain-renewals-page #order-standard_cart .order-summary .summary-container .amt { color: #fff !important; }
.domain-renewals-page #order-standard_cart .order-summary .total-due-today, .domain-renewals-page #order-standard_cart .order-summary .total-due-today * { color: #fff !important; }
.domain-renewals-page #order-standard_cart .order-summary .total-due-today .amt { font: 650 1.9rem var(--head) !important; }
.domain-renewals-page #order-standard_cart .order-summary .loader { background: rgba(15, 42, 74, .85) !important; color: #fff; border-radius: 12px; }
.domain-renewals-page #order-standard_cart #orderSummary > .text-center { margin-top: 20px; }
.domain-renewals-page #order-standard_cart #btnGoToCart { width: 100%; background: var(--accent) !important; border-color: var(--accent) !important; color: var(--brand-deep) !important; font-weight: 600; border-radius: 10px; }
.domain-renewals-page #order-standard_cart #btnGoToCart:hover { background: #34c796 !important; border-color: #34c796 !important; }
.domain-renewals-page #order-standard_cart .secondary-cart-body > .text-center small { color: var(--muted); }
@media (max-width: 991px) {
	.domain-renewals-page #order-standard_cart .cart-body > .row { grid-template-columns: 1fr; }
	.domain-renewals-page #order-standard_cart .secondary-cart-sidebar { position: static; }
}
@media (max-width: 575px) {
	.domain-renewals-page #order-standard_cart .domain-renewal > .float-right { position: static; margin-bottom: 8px; }
	.domain-renewals-page #order-standard_cart .domain-renewal h3 { padding-right: 0; }
}

/* ---------------------------------------------------------------- Register a domain (the order form's page, styled from
   here on that page alone): no Actions or currency menu, full width, the heading on the page, a plain search box, then
   the special offers and the price list each with a title above */
.domainregister-page #order-standard_cart .cart-sidebar, .domainregister-page #order-standard_cart .sidebar-collapsed { display: none !important; }
.domainregister-page #order-standard_cart > .row { display: block; margin: 0; }
.domainregister-page #order-standard_cart .cart-body { width: 100%; max-width: none; flex: none; float: none; padding: 0; }
.domainregister-page #order-standard_cart .header-lined { border: 0; padding: 0; margin: 0 0 6px; }
.domainregister-page #order-standard_cart .header-lined h1 { font: 600 2rem/1.2 var(--head) !important; color: var(--ink); background: transparent !important; padding: 0 !important; margin: 0; }
.domainregister-page #order-standard_cart .cart-body > p { color: var(--muted); margin-bottom: 18px; }
/* the search: one white box, the field and the button side by side */
.domainregister-page .domain-checker-container { background: #fff !important; border: 1px solid var(--line); border-radius: 12px; margin: 0 0 32px; box-shadow: 0 8px 18px -16px rgba(15, 28, 43, .3); }
.domainregister-page .domain-checker-bg { background: transparent !important; padding: 24px !important; margin: 0 !important; }
.domainregister-page .domain-checker-bg .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; margin: 0; padding: 0; }
.domainregister-page .domain-checker-bg .input-group-box { display: flex; gap: 10px; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.domainregister-page .domain-checker-bg .input-group-box .form-control { flex: 1; min-width: 0; height: 52px; font-size: 1.05rem; border-radius: 10px !important; }
.domainregister-page .domain-checker-bg .input-group-box .input-group-btn, .domainregister-page .domain-checker-bg .input-group-box .input-group-append { display: flex; }
.domainregister-page .domain-checker-bg .domain-check-availability { height: 52px; padding: 0 28px; border-radius: 10px !important; background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; font-size: 1rem; }
.domainregister-page .domain-checker-bg .domain-check-availability:hover { background: #1a3658 !important; border-color: #1a3658 !important; }
/* the special offers, titled */
.domainregister-page .featured-tlds-container { margin-bottom: 32px; }
.domainregister-page .featured-tlds-container::before { content: "Special offers"; display: block; margin: 0 0 12px; font: 600 1.35rem var(--head); color: var(--ink); }
.domainregister-page .featured-tld { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 8px 18px -16px rgba(15, 28, 43, .3); }
.domainregister-page .featured-tld .img-container { background: #fff !important; }
.domainregister-page .featured-tld .price { background: var(--bg-soft) !important; color: var(--ink) !important; font: 500 1.1rem var(--head); border-top: 1px solid var(--line); }
/* the price list, titled, in our table style */
/* WHMCS's "Browse extensions by category" becomes the list's title, "Domain prices" */
.domainregister-page .domain-pricing > h4 { font-size: 0 !important; margin: 0 0 12px; text-align: left; }
.domainregister-page .domain-pricing > h4::before { content: "Domain prices"; font: 600 1.35rem var(--head); color: var(--ink); }
.domainregister-page .tld-filters { margin-bottom: 14px; text-align: left; }
.domainregister-page .tld-filters a, .domainregister-page .tld-filters .badge { display: inline-block; margin: 0 6px 6px 0; padding: 5px 12px; border-radius: 99px; background: #fff !important; border: 1px solid var(--line); color: var(--ink) !important; font-size: .85rem; font-weight: 500; text-decoration: none !important; }
.domainregister-page .tld-filters a.badge-success, .domainregister-page .tld-filters a.active { background: var(--brand) !important; border-color: var(--brand); color: #fff !important; }
.domainregister-page .domain-pricing > .bg-white { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: 0 8px 18px -16px rgba(15, 28, 43, .3); }
.domainregister-page .tld-pricing-header { background: var(--bg-soft) !important; color: var(--muted) !important; font-weight: 500; font-size: .85rem; border-bottom: 1px solid var(--line); }
.domainregister-page .tld-pricing-header > div, .domainregister-page .tld-pricing-header [class*="col-"] { background: transparent !important; color: var(--muted) !important; border: 0 !important; padding-top: 12px; padding-bottom: 12px; }
.domainregister-page .tld-row { border-top: 1px solid var(--line); background: #fff !important; color: var(--ink); }
.domainregister-page .tld-row:hover { background: #f7f9fb !important; }
.domainregister-page .tld-row strong { color: var(--ink); font-weight: 500; }
.domainregister-page .tld-row small { color: var(--muted); }
.domainregister-page .tld-row .tld-sale-group, .domainregister-page .tld-row .label { background: var(--red-pale) !important; color: #9b1c27 !important; border-radius: 99px; padding: 2px 8px; font-size: .72rem; }

/* ---------------------------------------------------------------- the cart (cart.php?a=view), laid out like the website's
   /cart in the same way as Renew domains: no Actions or currency menu, the heading, each item a white line card with its
   price on the right, and the navy summary beside them. Styled from here on that page alone */
.viewcart-page #order-standard_cart .cart-sidebar, .viewcart-page #order-standard_cart .sidebar-collapsed { display: none !important; }
.viewcart-page #order-standard_cart > .row { display: block; margin: 0; }
.viewcart-page #order-standard_cart .cart-body { width: 100%; max-width: none; flex: none; float: none; padding: 0; }
.viewcart-page #order-standard_cart .header-lined { border: 0; padding: 0; margin: 0 0 28px; }
.viewcart-page #order-standard_cart .header-lined h1 { font: 600 2rem/1.15 var(--head) !important; color: var(--ink); background: transparent !important; padding: 0 !important; margin: 0; }
.viewcart-page #order-standard_cart .cart-body > .row { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; margin: 0; }
.viewcart-page #order-standard_cart .secondary-cart-body, .viewcart-page #order-standard_cart .secondary-cart-sidebar { width: auto; max-width: none; flex: none; float: none; padding: 0; }
.viewcart-page #order-standard_cart .secondary-cart-sidebar { position: sticky; top: calc(var(--topbar) + 24px); }
/* the items: no column headings, each a line card */
.viewcart-page #order-standard_cart .view-cart-items-header { display: none; }
.viewcart-page #order-standard_cart .view-cart-items { display: grid; gap: 12px; background: transparent !important; border: 0 !important; margin: 0; }
.viewcart-page #order-standard_cart .view-cart-items .item { position: relative; margin: 0; padding: 22px 24px; background: #fff !important; border: 1px solid var(--line) !important; border-radius: 14px; }
.viewcart-page #order-standard_cart .view-cart-items .item > .row { display: flex; align-items: flex-start; flex-wrap: nowrap; gap: 20px; margin: 0; }
.viewcart-page #order-standard_cart .view-cart-items .item > .row > div { padding: 0; }
.viewcart-page #order-standard_cart .view-cart-items .item > .row > div:first-child { flex: 1 1 auto; max-width: none; min-width: 0; }
.viewcart-page #order-standard_cart .view-cart-items .item-title { display: block; font: 600 1.2rem/1.25 var(--head); color: var(--ink); margin-bottom: 4px; }
.viewcart-page #order-standard_cart .view-cart-items .item-title .btn-link { font: 500 .85rem var(--body); color: var(--muted) !important; text-decoration: underline; padding: 0 0 0 8px; vertical-align: 1px; }
.viewcart-page #order-standard_cart .view-cart-items .item-title .btn-link i { display: none; }
.viewcart-page #order-standard_cart .view-cart-items .item-group, .viewcart-page #order-standard_cart .view-cart-items .item-domain { display: block; color: var(--muted); font-size: .92rem; }
.viewcart-page #order-standard_cart .view-cart-items .item-domain { color: var(--ink); }
.viewcart-page #order-standard_cart .view-cart-items .item small { display: block; margin-top: 6px; color: var(--muted); }
.viewcart-page #order-standard_cart .view-cart-items .item-price { flex: 0 0 auto; max-width: none; text-align: right; white-space: nowrap; color: var(--muted); font-size: .82rem; }
.viewcart-page #order-standard_cart .view-cart-items .item-price > span:first-child { display: block; font: 650 1.3rem var(--head); color: var(--ink); }
.viewcart-page #order-standard_cart .view-cart-items .item-price .cycle { display: block; color: var(--muted); font-size: .82rem; }
.viewcart-page #order-standard_cart .view-cart-items .item > .row > div:last-child:not(.item-price) { flex: 0 0 auto; max-width: none; }
.viewcart-page #order-standard_cart .btn-remove-from-cart { color: var(--muted) !important; padding: 2px 4px; }
.viewcart-page #order-standard_cart .btn-remove-from-cart:hover { color: var(--red) !important; }
.viewcart-page #order-standard_cart .view-cart-empty { padding: 40px; border: 1px dashed var(--line); border-radius: 14px; background: transparent !important; color: var(--muted); text-align: center; }
.viewcart-page #order-standard_cart .empty-cart { margin-top: 12px; text-align: left; }
.viewcart-page #order-standard_cart .empty-cart .btn-link { padding: 0; color: var(--muted) !important; font: 500 .85rem var(--body); text-decoration: underline; }
.viewcart-page #order-standard_cart .empty-cart .btn-link:hover { color: var(--red) !important; }
.viewcart-page #order-standard_cart .empty-cart .btn-link i { display: none; }
/* promo code and tax estimate: one plain white box */
.viewcart-page #order-standard_cart .view-cart-tabs { margin-top: 24px; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.viewcart-page #order-standard_cart .view-cart-tabs .nav-tabs { border-bottom: 1px solid var(--line); background: var(--bg-soft); padding: 0 12px; }
.viewcart-page #order-standard_cart .view-cart-tabs .nav-link { border: 0 !important; color: var(--muted) !important; font-weight: 500; background: transparent !important; padding: 12px 12px; }
.viewcart-page #order-standard_cart .view-cart-tabs .nav-link.active { color: var(--ink) !important; box-shadow: inset 0 -2px 0 var(--accent); }
.viewcart-page #order-standard_cart .view-cart-tabs .tab-content { padding: 20px 24px; background: #fff !important; border: 0 !important; }
/* the summary: the website's navy box */
.viewcart-page #order-standard_cart #orderSummary { padding: 26px; border-radius: 18px; background: var(--brand) !important; color: #c9d6e4; border: 0 !important; border-top: 3px solid var(--accent) !important; box-shadow: none; margin: 0; }
.viewcart-page #order-standard_cart #orderSummary h2 { font: 600 1.2rem var(--head) !important; color: #fff !important; background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 0 16px; text-align: left; }
.viewcart-page #order-standard_cart #orderSummary .summary-container { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0; }
.viewcart-page #order-standard_cart #orderSummary .summary-container, .viewcart-page #order-standard_cart #orderSummary .summary-container * { color: #c9d6e4; background: transparent !important; border-color: rgba(255, 255, 255, .1) !important; }
.viewcart-page #order-standard_cart #orderSummary .subtotal, .viewcart-page #order-standard_cart #orderSummary .recurring-totals, .viewcart-page #order-standard_cart #orderSummary .bordered-totals > div { padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); margin: 0; }
.viewcart-page #order-standard_cart #orderSummary #subtotal, .viewcart-page #order-standard_cart #orderSummary .cost, .viewcart-page #order-standard_cart #orderSummary #discount { color: #fff !important; font-weight: 600; }
.viewcart-page #order-standard_cart #orderSummary .total-due-today { padding: 18px 0 0; margin: 0; text-align: left; }
.viewcart-page #order-standard_cart #orderSummary .total-due-today .amt { display: block; font: 650 1.9rem var(--head) !important; color: #fff !important; }
.viewcart-page #order-standard_cart #orderSummary .total-due-today span:not(.amt) { color: #c9d6e4 !important; font-size: .95rem; }
.viewcart-page #order-standard_cart #orderSummary .loader { background: rgba(15, 42, 74, .85) !important; color: #fff; border-radius: 12px; }
.viewcart-page #order-standard_cart #orderSummary .text-right { text-align: left !important; margin-top: 22px; }
.viewcart-page #order-standard_cart #orderSummary .btn-checkout { display: block; width: 100%; background: var(--accent) !important; border-color: var(--accent) !important; color: var(--brand-deep) !important; font-weight: 600; border-radius: 10px; }
.viewcart-page #order-standard_cart #orderSummary .btn-checkout:hover { background: #34c796 !important; border-color: #34c796 !important; }
.viewcart-page #order-standard_cart #orderSummary .btn-checkout.disabled { opacity: .5; }
.viewcart-page #order-standard_cart #orderSummary .btn-continue-shopping { display: block; width: 100%; margin-top: 10px; border: 1.5px solid rgba(255, 255, 255, .25) !important; border-radius: 10px; color: #fff !important; text-decoration: none; }
.viewcart-page #order-standard_cart #orderSummary .btn-continue-shopping:hover { border-color: #fff !important; background: transparent !important; }
.viewcart-page #order-standard_cart #orderSummary .express-checkout-buttons .separator { color: #9fb1c4; }
.viewcart-page #order-standard_cart .product-recommendations-container { margin-top: 24px; }
@media (max-width: 991px) {
	.viewcart-page #order-standard_cart .cart-body > .row { grid-template-columns: 1fr; }
	.viewcart-page #order-standard_cart .secondary-cart-sidebar { position: static; }
}

/* Renew domains: until a renewal is added WHMCS leaves the summary empty, so say what will appear there */
.domain-renewals-page #order-standard_cart #producttotal:empty::before { content: "Nothing added yet. Pick a renewal period and press Add to cart, and your total shows here."; display: block; color: #c9d6e4; font-size: .92rem; line-height: 1.5; }
.domain-renewals-page #order-standard_cart #producttotal { min-height: 0 !important; }

/* ---------------------------------------------------------------- page numbers everywhere: plain white buttons, the current
   page navy (WHMCS gave it a pink) */
.sp-portal .pagination { gap: 6px; }
.sp-portal .page-item .page-link { border: 1px solid var(--line) !important; border-radius: 8px !important; background: #fff !important; color: var(--ink) !important; box-shadow: none !important; margin: 0; }
.sp-portal .page-item .page-link:hover { background: #f7f9fb !important; }
.sp-portal .page-item.active .page-link { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; }
.sp-portal .page-item.disabled .page-link { color: var(--muted) !important; opacity: .6; }
/* ---------------------------------------------------------------- the summary's lines at full size, laid out like the
   website's summary: item on the left, price on the right in white, thin rules between, then the big total */
.domain-renewals-page #order-standard_cart .summary-container { font-size: .95rem !important; line-height: 1.45; }
.viewcart-page #order-standard_cart .summary-container { font-size: .95rem !important; line-height: 1.45; }
.domain-renewals-page #order-standard_cart .summary-container .product-name { display: block; margin: 0 0 4px; font: 600 .75rem var(--body) !important; letter-spacing: .08em; text-transform: uppercase; color: #9fb1c4 !important; }
.viewcart-page #order-standard_cart .summary-container .product-name { display: block; margin: 0 0 4px; font: 600 .75rem var(--body) !important; letter-spacing: .08em; text-transform: uppercase; color: #9fb1c4 !important; }
.domain-renewals-page #order-standard_cart .summary-container .product-group { display: block; margin: 0 0 6px; font-style: normal; color: #9fb1c4 !important; font-size: .88rem; }
.viewcart-page #order-standard_cart .summary-container .product-group { display: block; margin: 0 0 6px; font-style: normal; color: #9fb1c4 !important; font-size: .88rem; }
.domain-renewals-page #order-standard_cart .summary-container > .clearfix, .domain-renewals-page #order-standard_cart .summary-container .summary-totals > .clearfix { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.viewcart-page #order-standard_cart .summary-container > .clearfix, .viewcart-page #order-standard_cart .summary-container .summary-totals > .clearfix { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.domain-renewals-page #order-standard_cart .summary-container .clearfix::after { display: none; }
.viewcart-page #order-standard_cart .summary-container .clearfix::after { display: none; }
.domain-renewals-page #order-standard_cart .summary-container .clearfix > .float-left, .domain-renewals-page #order-standard_cart .summary-container .clearfix > .float-right { float: none !important; }
.viewcart-page #order-standard_cart .summary-container .clearfix > .float-left, .viewcart-page #order-standard_cart .summary-container .clearfix > .float-right { float: none !important; }
.domain-renewals-page #order-standard_cart .summary-container > .clearfix > .float-left { color: #fff !important; overflow-wrap: anywhere; }
.viewcart-page #order-standard_cart .summary-container > .clearfix > .float-left { color: #fff !important; overflow-wrap: anywhere; }
.domain-renewals-page #order-standard_cart .summary-container .clearfix > .float-right { color: #fff !important; font-weight: 600; white-space: nowrap; text-align: right; }
.viewcart-page #order-standard_cart .summary-container .clearfix > .float-right { color: #fff !important; font-weight: 600; white-space: nowrap; text-align: right; }
.domain-renewals-page #order-standard_cart .summary-container .summary-totals { margin: 0; padding: 0; border: 0 !important; }
.viewcart-page #order-standard_cart .summary-container .summary-totals { margin: 0; padding: 0; border: 0 !important; }
.domain-renewals-page #order-standard_cart .summary-container .summary-totals > .clearfix > .float-left { color: #c9d6e4 !important; }
.viewcart-page #order-standard_cart .summary-container .summary-totals > .clearfix > .float-left { color: #c9d6e4 !important; }
.domain-renewals-page #order-standard_cart .summary-container a[id^="linkCartRemove"] { margin-left: 6px; color: #9fb1c4 !important; }
.viewcart-page #order-standard_cart .summary-container a[id^="linkCartRemove"] { margin-left: 6px; color: #9fb1c4 !important; }
.domain-renewals-page #order-standard_cart .summary-container a[id^="linkCartRemove"]:hover { color: #f29ca3 !important; }
.viewcart-page #order-standard_cart .summary-container a[id^="linkCartRemove"]:hover { color: #f29ca3 !important; }
.domain-renewals-page #order-standard_cart .summary-container .total-due-today { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding: 16px 0 0; }
.viewcart-page #order-standard_cart .summary-container .total-due-today { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding: 16px 0 0; }
.domain-renewals-page #order-standard_cart .summary-container .total-due-today span { display: inline; text-align: left; color: #c9d6e4 !important; font-size: .95rem; }
.viewcart-page #order-standard_cart .summary-container .total-due-today span { display: inline; text-align: left; color: #c9d6e4 !important; font-size: .95rem; }
.domain-renewals-page #order-standard_cart .summary-container .total-due-today .amt { font: 650 1.9rem var(--head) !important; color: #fff !important; }
.viewcart-page #order-standard_cart .summary-container .total-due-today .amt { font: 650 1.9rem var(--head) !important; color: #fff !important; }

/* each renewal in the summary on two rows, the domain (often long) above and its price below on the right, the rule
   between renewals keeping them apart */
.domain-renewals-page #order-standard_cart .summary-container > .clearfix[id^="cartDomainRenewal"],
.domain-renewals-page #order-standard_cart .summary-container > .clearfix[id^="cartServiceRenewal"],
.domain-renewals-page #order-standard_cart .summary-container > .clearfix[id^="cartServiceAddonRenewal"],
.viewcart-page #order-standard_cart .summary-container > .clearfix[id^="cartDomainRenewal"],
.viewcart-page #order-standard_cart .summary-container > .clearfix[id^="cartServiceRenewal"],
.viewcart-page #order-standard_cart .summary-container > .clearfix[id^="cartServiceAddonRenewal"] { flex-direction: column; align-items: stretch; gap: 4px; }
.domain-renewals-page #order-standard_cart .summary-container > .clearfix[id^="cart"] > .float-right,
.viewcart-page #order-standard_cart .summary-container > .clearfix[id^="cart"] > .float-right { align-self: flex-end; }
/* the renewal's period beside its price, lighter than the price */
.sp-summary-period { color: #c9d6e4; font-weight: 400; }
/* the renewal's domain right aligned, over its period and price */
.domain-renewals-page #order-standard_cart .summary-container > .clearfix[id^="cart"] > .float-left,
.viewcart-page #order-standard_cart .summary-container > .clearfix[id^="cart"] > .float-left { align-self: flex-end; text-align: right; }

/* ---------------------------------------------------------------- the cart's items: no separate "x" column squeezing the
   price against the edge, the price inside the card's padding, and the plain Remove link (WHMCS's phone one) shown always */
/* products and registrations have their Remove link in the title too, so their "x" column goes; a renewal's "x" is its
   only Remove, so it stays and drops onto its own row as the plain link */
.viewcart-page #order-standard_cart .view-cart-items .item > .row > .col-sm-1.d-none { display: none !important; }
.viewcart-page #order-standard_cart .view-cart-items .item > .row { flex-wrap: wrap; }
.viewcart-page #order-standard_cart .view-cart-items .item > .row > div:first-child { flex: 1 1 0 !important; min-width: 0; }
.viewcart-page #order-standard_cart .view-cart-items .item-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viewcart-page #order-standard_cart .view-cart-items .item > .row > .col-sm-1:not(.d-none) { flex: 0 0 100% !important; max-width: none; order: 3; margin-top: -14px; }
.viewcart-page #order-standard_cart .view-cart-items .item > .row > .col-sm-1:not(.d-none) .btn-remove-from-cart { padding: 0; font: 500 .85rem var(--body); color: var(--muted) !important; text-decoration: underline; }
.viewcart-page #order-standard_cart .view-cart-items .item > .row > .col-sm-1:not(.d-none) .btn-remove-from-cart:hover { color: var(--red) !important; }
.viewcart-page #order-standard_cart .view-cart-items .item > .row > .col-sm-1:not(.d-none) .btn-remove-from-cart i { display: none; }
.viewcart-page #order-standard_cart .view-cart-items .item > .row > .col-sm-1:not(.d-none) .btn-remove-from-cart span { display: inline !important; }
.viewcart-page #order-standard_cart .view-cart-items .item > .row { gap: 24px; }
.viewcart-page #order-standard_cart .view-cart-items .item-price { padding: 0 !important; margin: 0; }
.viewcart-page #order-standard_cart .view-cart-items .item-title .d-sm-none { display: inline !important; }
.viewcart-page #order-standard_cart .view-cart-items .item-title .btn-remove-from-cart { font: 500 .85rem var(--body); color: var(--muted) !important; text-decoration: underline; padding: 0 0 0 10px; vertical-align: 1px; }
.viewcart-page #order-standard_cart .view-cart-items .item-title .btn-remove-from-cart:hover { color: var(--red) !important; }
.viewcart-page #order-standard_cart .view-cart-items .item-title .btn-remove-from-cart i { display: none; }
.viewcart-page #order-standard_cart .view-cart-items .item-price .dropdown { margin-top: 6px; }
.viewcart-page #order-standard_cart .view-cart-items .item-price .dropdown .btn { font-size: .82rem; padding: 4px 10px; border-radius: 8px; }
.viewcart-page #order-standard_cart .view-cart-items .item-price .renewal { margin-top: 4px; }

/* the promo code: a titled white box with the code and an Apply button side by side (no floating ticket icon, no
   full width button). The tax estimate tab, when shown, sits beside the title as a second tab */
.viewcart-page #order-standard_cart .view-cart-tabs { padding: 0; }
.viewcart-page #order-standard_cart .view-cart-tabs .nav-tabs { display: flex; gap: 18px; padding: 16px 24px 0; background: #fff !important; border-bottom: 0 !important; }
.viewcart-page #order-standard_cart .view-cart-tabs .nav-link { padding: 0 0 6px !important; font: 600 1.05rem var(--head) !important; color: var(--muted) !important; }
.viewcart-page #order-standard_cart .view-cart-tabs .nav-link.active { color: var(--ink) !important; box-shadow: none; }
.viewcart-page #order-standard_cart .view-cart-tabs .nav-tabs .nav-item:only-child .nav-link { cursor: default; }
.viewcart-page #order-standard_cart .view-cart-tabs .tab-content { padding: 8px 24px 22px !important; }
.viewcart-page #order-standard_cart .view-cart-tabs .promo form { display: flex; gap: 10px; align-items: stretch; }
.viewcart-page #order-standard_cart .view-cart-tabs .promo .form-group { flex: 1; margin: 0; }
.viewcart-page #order-standard_cart .view-cart-tabs .promo .field-icon { display: none !important; }
.viewcart-page #order-standard_cart .view-cart-tabs .promo .form-control { padding-left: 14px !important; }
.viewcart-page #order-standard_cart .view-cart-tabs .promo .btn { width: auto !important; flex: 0 0 auto; padding: 0 22px; margin: 0; }
.viewcart-page #order-standard_cart .view-cart-tabs .view-cart-promotion-code { color: var(--ink); margin-bottom: 10px; }

/* ---------------------------------------------------------------- the cart summary's buttons, like the website's: a full
   width green Checkout and an outlined Continue Shopping under it, the same size, any express checkout (PayPal...) above
   them with a quiet "or". Anchored on the summary's ids to beat Twenty-X's and the cart's own button rules */
.viewcart-page #order-standard_cart #scrollingPanelContainer #orderSummary .express-checkout-buttons { margin: 20px 0 0; }
.viewcart-page #order-standard_cart #scrollingPanelContainer #orderSummary .express-checkout-buttons:empty { display: none; }
.viewcart-page #order-standard_cart #scrollingPanelContainer #orderSummary .express-checkout-buttons .separator { margin: 10px 0 0; padding: 0; color: #9fb1c4; font-size: .8rem; font-weight: 500; text-align: center; }
.viewcart-page #order-standard_cart #scrollingPanelContainer #orderSummary .text-right { display: grid; gap: 10px; margin-top: 22px; text-align: center !important; }
.viewcart-page #order-standard_cart #scrollingPanelContainer #orderSummary .text-right br { display: none; }
.viewcart-page #order-standard_cart #scrollingPanelContainer #orderSummary #checkout,
.viewcart-page #order-standard_cart #scrollingPanelContainer #orderSummary #continueShopping {
	display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 0; padding: 12px 18px !important;
	border-radius: 10px !important; font: 600 1rem/1.2 var(--body) !important; text-decoration: none !important; box-shadow: none !important;
}
.viewcart-page #order-standard_cart #scrollingPanelContainer #orderSummary #checkout { background: var(--accent) !important; border: 1.5px solid var(--accent) !important; color: var(--brand-deep) !important; }
.viewcart-page #order-standard_cart #scrollingPanelContainer #orderSummary #checkout:hover { background: #34c796 !important; border-color: #34c796 !important; }
.viewcart-page #order-standard_cart #scrollingPanelContainer #orderSummary #checkout i { font-size: .9em; }
.viewcart-page #order-standard_cart #scrollingPanelContainer #orderSummary #checkout.disabled { opacity: .5; pointer-events: none; }
.viewcart-page #order-standard_cart #scrollingPanelContainer #orderSummary #continueShopping { background: transparent !important; border: 1.5px solid rgba(255, 255, 255, .25) !important; color: #fff !important; font-weight: 500 !important; }
.viewcart-page #order-standard_cart #scrollingPanelContainer #orderSummary #continueShopping:hover { border-color: #fff !important; }

/* the promo code: its title on the page above the box (no box around the title), then a white box with a clear field and
   a proper button the same height beside it */
.viewcart-page #order-standard_cart .view-cart-tabs { background: transparent !important; border: 0 !important; border-radius: 0; overflow: visible; margin-top: 28px; }
.viewcart-page #order-standard_cart .view-cart-tabs .nav-tabs { padding: 0 !important; margin: 0 0 12px; background: transparent !important; }
.viewcart-page #order-standard_cart .view-cart-tabs .nav-link { padding: 0 !important; font: 600 1.2rem var(--head) !important; }
.viewcart-page #order-standard_cart .view-cart-tabs .tab-content { padding: 20px 24px !important; background: #fff !important; border: 1px solid var(--line) !important; border-radius: 14px; }
.viewcart-page #order-standard_cart .view-cart-tabs .promo .form-group.prepend-icon { position: static; }
.viewcart-page #order-standard_cart .view-cart-tabs .promo .form-control { height: 46px !important; min-height: 46px; padding: 10px 14px !important; border: 1px solid var(--line) !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important; font-size: .95rem; color: var(--ink); }
.viewcart-page #order-standard_cart .view-cart-tabs .promo .form-control:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(16, 185, 129, .15) !important; }
.viewcart-page #order-standard_cart .view-cart-tabs .promo .btn { height: 46px; padding: 0 24px !important; border-radius: 10px !important; background: var(--brand) !important; border: 1px solid var(--brand) !important; color: #fff !important; font: 600 .95rem var(--body) !important; box-shadow: none !important; }
.viewcart-page #order-standard_cart .view-cart-tabs .promo .btn:hover { background: #1a3658 !important; border-color: #1a3658 !important; }
@media (max-width: 575px) {
	.viewcart-page #order-standard_cart .view-cart-tabs .promo form { flex-direction: column; }
}

/* Renew domains: the search like the one on Invoices, a white rounded field with room inside and the search icon at the
   start (the cart's own grey picture and tight padding go) */
.domain-renewals-page #order-standard_cart .header-lined h1 .float-right { position: relative; }
.domain-renewals-page #order-standard_cart .header-lined h1 .float-right::before { content: "\ebf7"; font-family: boxicons; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 1.1rem; font-weight: 400; color: var(--muted); pointer-events: none; z-index: 1; }
.domain-renewals-page #order-standard_cart .header-lined .form-control.domain-renewals-filter {
	width: 320px !important; max-width: 100%; height: auto !important; min-height: 44px; padding: 10px 14px 10px 40px !important;
	background: #fff !important; border: 1px solid var(--line) !important; border-radius: 10px !important; box-shadow: none !important;
	font: 400 .95rem var(--body) !important; color: var(--ink);
}
.domain-renewals-page #order-standard_cart .header-lined .form-control.domain-renewals-filter:focus { border-color: var(--line) !important; outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------------------------------------------------------------- Register a domain: the two boxes at the bottom (add
   hosting, transfer a domain) built like the dashboard's Get support and Firewall boxes: a big navy icon on the left, the
   title and words beside it in grey, an arrow link, the whole box a link with the same faint hover. Twenty-X's padding,
   heights and floats are undone */
.domainregister-page #order-standard_cart .domain-promo-box {
	position: relative; display: grid !important; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-content: start;
	min-height: 0 !important; height: calc(100% - 20px); margin: 0 0 20px !important; padding: 26px 24px !important;
	background: #fff !important; border: 1px solid var(--line) !important; border-radius: 12px !important; box-shadow: 0 8px 18px -16px rgba(15, 28, 43, .3) !important;
	color: var(--muted); text-align: left; transition: background-color .15s;
}
.domainregister-page #order-standard_cart .domain-promo-box:hover { background: #f7f9fb !important; }
.domainregister-page #order-standard_cart .domain-promo-box .clearfix { display: contents; }
.domainregister-page #order-standard_cart .domain-promo-box .clearfix::after { display: none; }
.domainregister-page #order-standard_cart .domain-promo-box i.fas { grid-column: 1; grid-row: 1 / span 5; position: static !important; float: none !important; margin: 0 !important; padding: 0 !important; font-size: 3.2rem !important; line-height: 1; color: var(--brand) !important; }
.domainregister-page #order-standard_cart .domain-promo-box > *:not(.clearfix), .domainregister-page #order-standard_cart .domain-promo-box .clearfix > *:not(i) { grid-column: 2; }
.domainregister-page #order-standard_cart .domain-promo-box h3 { margin: 0 0 4px !important; padding: 0 !important; font: 500 1.05rem/1.35 var(--head) !important; color: var(--ink) !important; white-space: normal !important; }
.domainregister-page #order-standard_cart .domain-promo-box p { margin: 0 !important; padding: 0 !important; font: 400 .95rem/1.5 var(--body) !important; color: var(--muted) !important; }
.domainregister-page #order-standard_cart .domain-promo-box p + p, .domainregister-page #order-standard_cart .domain-promo-box .clearfix > p { margin-bottom: 2px !important; }
.domainregister-page #order-standard_cart .domain-promo-box p.small { margin: 10px 0 0 !important; font-size: .8rem !important; }
.domainregister-page #order-standard_cart .domain-promo-box .btn { justify-self: start; display: inline-flex !important; align-items: center; gap: 4px; margin: 12px 0 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: var(--ink) !important; font: 500 .95rem var(--body) !important; letter-spacing: normal !important; text-transform: none !important; }
.domainregister-page #order-standard_cart .domain-promo-box .btn::after { content: "\ebe6"; font-family: boxicons; font-size: 1.15rem; }
/* the whole box clicks through to the link */
.domainregister-page #order-standard_cart .domain-promo-box .btn::before { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.domainregister-page #order-standard_cart .domain-promo-box .btn:hover { text-decoration: none !important; }

/* ---------------------------------------------------------------- Transfer a domain (the order form's page, styled from
   here on that page alone): no Actions or currency menu, the heading on the page with the offer as its line underneath,
   then "Single Domain Transfer" as a title over one white form box, and the small print below */
.domaintransfer-page #order-standard_cart .cart-sidebar, .domaintransfer-page #order-standard_cart .sidebar-collapsed { display: none !important; }
.domaintransfer-page #order-standard_cart > .row { display: block; margin: 0; }
.domaintransfer-page #order-standard_cart .cart-body { width: 100%; max-width: none; flex: none; float: none; padding: 0; }
.domaintransfer-page #order-standard_cart .header-lined { border: 0; padding: 0; margin: 0 0 4px; }
.domaintransfer-page #order-standard_cart .header-lined h1 { font: 600 2rem/1.15 var(--head) !important; color: var(--ink); background: transparent !important; padding: 0 !important; margin: 0; }
.domaintransfer-page #order-standard_cart .cart-body > .text-center { text-align: left !important; margin-bottom: 26px; }
.domaintransfer-page #order-standard_cart .cart-body > .text-center h2 { display: none; }
.domaintransfer-page #order-standard_cart .cart-body > .text-center p { margin: 0; color: var(--muted); }
.domaintransfer-page #order-standard_cart .cart-body > br { display: none; }
.domaintransfer-page #order-standard_cart #frmDomainTransfer > .row { margin: 0; }
.domaintransfer-page #order-standard_cart #frmDomainTransfer > .row > [class*="col-"] { flex: none; max-width: 640px; width: 100%; margin: 0; padding: 0; }
.domaintransfer-page #order-standard_cart #frmDomainTransfer .panel { background: transparent !important; border: 0 !important; box-shadow: none !important; margin: 0; }
.domaintransfer-page #order-standard_cart #frmDomainTransfer .panel-heading { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 0 12px; }
.domaintransfer-page #order-standard_cart #frmDomainTransfer .panel-title { font: 600 1.35rem var(--head) !important; color: var(--ink) !important; margin: 0 !important; }
.domaintransfer-page #order-standard_cart #frmDomainTransfer .panel-body { background: #fff !important; border: 1px solid var(--line) !important; border-bottom: 0 !important; border-radius: 12px 12px 0 0; padding: 24px 24px 6px !important; }
.domaintransfer-page #order-standard_cart #frmDomainTransfer .panel-body label { display: flex !important; justify-content: space-between; align-items: center; color: var(--ink); font-weight: 500; font-size: .95rem; margin-bottom: 6px; }
.domaintransfer-page #order-standard_cart #frmDomainTransfer .panel-body label a { color: var(--muted); cursor: help; }
.domaintransfer-page #order-standard_cart #frmDomainTransfer .panel-footer { background: #fff !important; border: 1px solid var(--line) !important; border-top: 0 !important; border-radius: 0 0 12px 12px; padding: 6px 24px 24px !important; text-align: left !important; box-shadow: 0 8px 18px -16px rgba(15, 28, 43, .3); }
.domaintransfer-page #order-standard_cart #frmDomainTransfer .btn-transfer { width: 100%; padding: 12px 18px !important; border-radius: 10px !important; background: var(--brand) !important; border: 1px solid var(--brand) !important; color: #fff !important; font: 600 1rem var(--body) !important; box-shadow: none !important; }
.domaintransfer-page #order-standard_cart #frmDomainTransfer .btn-transfer:hover { background: #1a3658 !important; border-color: #1a3658 !important; }
.domaintransfer-page #order-standard_cart .cart-body > p.small { max-width: 640px; margin: 14px 0 0; text-align: left !important; color: var(--muted); font-size: .82rem; }

/* Register a domain: the search box slimmer top and bottom (the field and button 48px, less room around them, no
   leftover gaps under the field or the captcha) */
.domainregister-page #order-standard_cart .domain-checker-container { margin: 0 0 32px !important; }
.domainregister-page #order-standard_cart .domain-checker-container .domain-checker-bg { padding: 14px 16px !important; }
.domainregister-page #order-standard_cart .domain-checker-bg .input-group-box .form-control { height: 48px !important; min-height: 48px; margin: 0 !important; }
.domainregister-page #order-standard_cart .domain-checker-bg .domain-check-availability { height: 48px !important; }
.domainregister-page #order-standard_cart .domain-checker-bg .row { margin: 0 !important; }
.domainregister-page #order-standard_cart .domain-checker-container #captchaContainer { margin: 12px 0 0 !important; }
.domainregister-page #order-standard_cart .domain-checker-container #captchaContainer:empty { display: none; }

/* Transfer a domain: no navy box around the form (Twenty-X painted the whole form navy), no second title inside it, and
   the white form box centred with the small print under it */
.domaintransfer-page #order-standard_cart form#frmDomainTransfer { background: transparent !important; padding: 0 !important; border-radius: 0; }
.domaintransfer-page #order-standard_cart #frmDomainTransfer .panel-heading { display: none !important; }
.domaintransfer-page #order-standard_cart #frmDomainTransfer > .row > [class*="col-"] { margin: 0 auto !important; }
.domaintransfer-page #order-standard_cart #frmDomainTransfer .panel-body { border-bottom: 0 !important; border-radius: 12px 12px 0 0 !important; padding: 26px 26px 8px !important; }
.domaintransfer-page #order-standard_cart #frmDomainTransfer .panel-footer { padding: 8px 26px 26px !important; }
.domaintransfer-page #order-standard_cart #frmDomainTransfer .panel-body label { color: var(--ink) !important; font-size: .95rem !important; max-width: none !important; }
.domaintransfer-page #order-standard_cart #frmDomainTransfer .panel-body label a { color: var(--muted) !important; }
.domaintransfer-page #order-standard_cart #frmDomainTransfer .form-control { max-width: none !important; }
.domaintransfer-page #order-standard_cart #frmDomainTransfer #captchaContainer { padding: 0 0 8px !important; }
.domaintransfer-page #order-standard_cart #frmDomainTransfer #captchaContainer .default-captcha p { color: var(--ink) !important; }
.domaintransfer-page #order-standard_cart #frmDomainTransfer .btn-transfer:hover { color: #fff !important; }
.domaintransfer-page #order-standard_cart .cart-body > p.small { margin: 14px auto 0 !important; text-align: center !important; }

/* the ticket form's box the full width of the content */
.sp-content .sp-form-card.sp-form-card-wide { max-width: none; }
/* and every field in it the full width, one under another */
.sp-content .sp-form-card-wide .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
.sp-content .sp-form-card-wide .form-control, .sp-content .sp-form-card-wide .custom-select { width: 100%; max-width: none; }

/* ---------------------------------------------------------------- a domain's Overview: the details as label over value in
   one white box, then what can be done as separate boxes */
.sp-details { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px 28px; height: auto; margin-bottom: 8px; }
.sp-details > div { display: grid; gap: 4px; align-content: start; }
.sp-details > div > span { color: var(--muted); font-size: .85rem; }
.sp-details > div > strong { color: var(--ink); font-weight: 500; font-size: 1rem; overflow-wrap: anywhere; }
.sp-details > div > strong small { color: var(--muted); font-weight: 400; font-size: .85rem; }
.sp-details .sp-service-status { display: inline-flex; font-size: 1rem; }
.sp-details .sp-service-status.sp-domain-status-active { color: var(--accent-ink); }
.sp-content .tab-content > .tab-pane > .moduleoutput { margin-top: 16px; height: auto; }
.sp-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.sp-actions .sp-help { height: auto; }
.sp-actions .sp-help > i { font-size: 2.6rem; }
/* the domain page's tab area has no box of its own: each tab draws its own */
.sp-content .tab-content.margin-bottom { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
/* Twenty-X wraps the Overview tab in a white panel of its own, which put the card's border inside a white box */
.clientareadomaindetails-page .sp-content .tab-content.margin-bottom > #tabOverview { background: transparent !important; padding: 0 !important; border-radius: 0; margin: 0 !important; }

/* Register a domain's two boxes, from the screenshot: room above them (they touched the price list), their own height so
   the link isn't pressed against the bottom edge, and the transfer box's small print under its link */
.domainregister-page #order-standard_cart .domain-promo-box { height: auto !important; margin: 28px 0 0 !important; padding: 26px 24px !important; }
.domainregister-page #order-standard_cart .domain-pricing + .row, .domainregister-page #order-standard_cart .domain-promo-box { align-self: stretch; }
.domainregister-page #order-standard_cart .domain-promo-box .btn { order: 9; }
.domainregister-page #order-standard_cart .domain-promo-box p.small { order: 10; }
.domainregister-page #order-standard_cart .domain-promo-box i.fas { font-size: 2.6rem !important; }

/* ---------------------------------------------------------------- a domain's registrar lock: one plain statement with a
   big icon, red when it's off (a domain that can be moved away), green when it's on */
.sp-lock { display: flex; align-items: flex-start; gap: 22px; height: auto; padding: 28px; }
.sp-lock > i { flex: 0 0 auto; font-size: 3.2rem; line-height: 1; color: var(--red); }
.sp-lock.is-locked > i { color: var(--accent-ink); }
.sp-lock-label { display: block; color: var(--muted); font-size: .85rem; }
.sp-lock strong { display: block; margin: 2px 0 8px; color: var(--ink); font: 500 1.2rem var(--head); }
.sp-lock p { margin: 0 0 18px; color: var(--muted); }
@media (max-width: 575px) {
	.sp-lock { flex-direction: column; gap: 14px; }
}

/* Register a domain's two boxes, now the dashboard's own boxes (rebuilt by js/portal.js) */
.domainregister-page .sp-promo-row { margin-top: 32px; }
.domainregister-page .sp-promo-row .sp-help { height: 100%; }
.domainregister-page .sp-promo-row .sp-help small { display: block; margin-top: 10px; font-size: .8rem; color: var(--muted); }

/* ---------------------------------------------------------------- a domain's nameservers: the two choices like the
   website's cart billing options, then the fields two to a row, labels above */
.sp-ns { height: auto; padding: 28px; }
.sp-ns > p { color: var(--muted); margin: 0 0 18px; }
.sp-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
.sp-choice { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 16px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font-weight: 400 !important; }
.sp-choice:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 -3px 0 var(--accent); }
.sp-choice input { margin-top: 4px; accent-color: var(--brand); }
.sp-choice strong { display: block; color: var(--ink); font-weight: 500; }
.sp-choice small { display: block; color: var(--muted); font-size: .85rem; }
.sp-ns-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin-bottom: 6px; }
.sp-ns-fields .form-group { margin-bottom: 16px; }
.sp-ns-fields .form-control:disabled { background: var(--bg-soft); color: var(--muted); }
.sp-optional { color: var(--muted); font-weight: 400; font-size: .8rem; margin-left: 4px; }
@media (max-width: 767px) {
	.sp-choices, .sp-ns-fields { grid-template-columns: 1fr; }
}
/* Transfer a domain: the fields outlined like every other field (Twenty-X had taken their border off, made for its navy box) */
.domaintransfer-page #order-standard_cart #frmDomainTransfer .form-control { height: auto !important; min-height: 46px; padding: 10px 14px !important; border: 1px solid var(--line) !important; border-radius: 10px !important; background: #fff !important; color: var(--ink) !important; font-size: .95rem !important; box-shadow: none !important; }
.domaintransfer-page #order-standard_cart #frmDomainTransfer .form-control::placeholder { color: #9aa5ae; }
.domaintransfer-page #order-standard_cart #frmDomainTransfer .form-control:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(16, 185, 129, .15) !important; }
/* Transfer a domain: the small print centred under the box (Twenty-X made it an inline block, which can't centre) */
.domaintransfer-page #order-standard_cart .cart-body > p.small { display: block !important; width: 100%; max-width: 640px; margin: 14px auto 0 !important; text-align: center !important; }
/* Firewall unblocker: the full width of the content, like the other pages */
form[name="ipaddresscheck"] { max-width: none !important; }
.sp-content .primary-content > .alert { max-width: none; }

/* ---------------------------------------------------------------- a domain's contact details: the contacts as tabs over
   one white box, the two choices like the nameservers page, the details two to a row */
.sp-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; border: 0; list-style: none; }
.sp-tabs .nav-link { padding: 7px 16px !important; border: 1px solid var(--line) !important; border-radius: 99px !important; background: #fff !important; color: var(--ink) !important; font-weight: 500; font-size: .92rem; }
.sp-tabs .nav-link:hover { background: #f7f9fb !important; }
.sp-tabs .nav-link.active { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; }
.sp-contacts .sp-box { height: auto; padding: 28px; }
.sp-contacts-note { color: var(--muted); margin: 0 0 18px; }
.sp-contacts .tab-content { background: transparent !important; border: 0 !important; padding: 0 !important; }
.sp-contacts-existing { max-width: 420px; }
.sp-contacts-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin-top: 8px; }
.sp-contacts-fields .form-group { margin-bottom: 16px; }
.sp-contacts .form-control:disabled { background: var(--bg-soft); color: var(--muted); }
.sp-form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line); }
@media (max-width: 767px) {
	.sp-contacts-fields { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- Sign in and password reset: the heading and the box together, centred */
.sp-content .sp-login { max-width: 540px; margin-left: auto !important; margin-right: auto !important; }
.sp-content .sp-login .card { max-width: none; margin-left: 0; margin-right: 0; }
.sp-content .sp-help-title .sp-register-note { display: block; font: 400 .85rem var(--body, inherit); color: var(--muted); margin-top: 2px; }

/* ---------------------------------------------------------------- Create an account: Twenty-X paints the whole form white,
   so the page's background shows between the boxes here as it does everywhere else */
.clientregister-page #registration, .clientregister-page #frmCheckout div#containerNewUserSignup, .clientregister-page #frmCheckout div#containerNewUserSecurity, .clientregister-page #frmCheckout .text-center p { background: transparent !important; box-shadow: none !important; border: 0 !important; padding-left: 0; padding-right: 0; }
.clientregister-page #frmCheckout > p.text-center { margin: 18px 0 0; }
.clientregister-page #registration .sp-help-title { margin-top: 34px; }
.clientregister-page #containerNewUserSignup > .sp-help-title:first-child { margin-top: 0; }

/* ---------------------------------------------------------------- Checkout: the same as Create an account. Twenty-X
   joins every section into one white sheet with its titles as white bars; here the titles sit on the page and each
   section's fields are their own box */
#order-standard_cart #frmCheckout #containerNewUserSignup, #order-standard_cart #frmCheckout #containerNewUserSecurity, #order-standard_cart #frmCheckout #containerExistingUserSignin,
#order-standard_cart #frmCheckout .account-select-container, #order-standard_cart #frmCheckout .text-center p,
#order-standard_cart #frmCheckout div#containerNewUserSignup+.sub-heading+p+.row.margin-bottom+div>div#domainRegistrantInputFields { background: transparent !important; border: 0 !important; box-shadow: none !important; }
#order-standard_cart #frmCheckout .sub-heading { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 34px 0 12px !important; height: auto; text-align: left; }
#order-standard_cart #frmCheckout .sub-heading:first-of-type { margin-top: 6px !important; }
#order-standard_cart #frmCheckout .sub-heading span, #order-standard_cart #frmCheckout .sub-heading .primary-bg-color { position: static; top: 0; display: block; padding: 0 !important; background: transparent !important; font: 600 1.35rem/1.3 var(--head); color: var(--ink); text-align: left; }
#order-standard_cart #frmCheckout .sub-heading + .row, #order-standard_cart #frmCheckout #containerNewUserSecurity > .sub-heading ~ .row,
#order-standard_cart #frmCheckout #domainRegistrantInputFields, #order-standard_cart #frmCheckout #totalDueToday, #order-standard_cart #frmCheckout #applyCreditContainer:not(.w-hidden),
#order-standard_cart #frmCheckout #paymentGatewaysContainer, #order-standard_cart #frmCheckout #creditCardInputFields:not(.w-hidden), #order-standard_cart #frmCheckout .marketing-email-optin {
	background: #fff !important; border: 1px solid var(--line) !important; border-radius: 12px; box-shadow: 0 8px 18px -16px rgba(15, 28, 43, .3); margin: 0 0 12px !important; padding: 22px 12px 6px;
}
#order-standard_cart #frmCheckout #totalDueToday { color: var(--ink); font-size: 1.15rem; padding: 18px 22px; text-align: left !important; }
#order-standard_cart #frmCheckout #applyCreditContainer, #order-standard_cart #frmCheckout #paymentGatewaysContainer, #order-standard_cart #frmCheckout .marketing-email-optin { padding: 20px 22px; }
#order-standard_cart #frmCheckout .account-select-container div.account { background: #fff !important; border: 1px solid var(--line) !important; border-radius: 12px; margin-bottom: 12px; }
#order-standard_cart #frmCheckout > .text-center, #order-standard_cart #frmCheckout .text-center p { padding: 0; margin-top: 18px; }