/* ==========================================================================
SB2026 — serverbuilds.nl client area theme
--------------------------------------------------------------------------
Built on the WHMCS Nexus theme. Carries every feature of the etheron-2026
theme, restyled to the serverbuilds.nl 2026 design: dark surfaces, green
accent (#649900), Poppins headings, Open Sans body, sharp corners
everywhere (border-radius 0).
Sections
1. Tokens + base
2. Portal shell (logged in): sidebar, user card, content, topbar
3. Site shell (guest): header, footer
4. Shared components: cards, buttons, forms, tables, alerts, badges,
modals, dropdowns, pagination, tabs, sidebar cards
5. Dashboard
6. Auth pages (login, password reset, register)
7. Client area pages (tickets, invoices, services, domains, ...)
8. Order form pages (domains, configure, checkout, cart)
9. Responsive
10. Optional hides (announcements, downloads, addon upsell links)
========================================================================== */
/* ==========================================================================
1. TOKENS + BASE
========================================================================== */
:root {
/* serverbuilds.nl design tokens (app/assets/css/main.css) */
--sb-bg: #161616;
--sb-bg-alt: #1a1a1a;
--sb-bg-card: #1c1c1c;
--sb-bg-dark: #141414;
--sb-bg-inset: #232323;
--sb-bg-hover: #1f1f1f;
--sb-bg-accent-soft: #202812;
--sb-bg-info-soft: #1e2a33;
--sb-bg-warn-soft: #33281a;
--sb-bg-danger-soft: #331e1e;
--sb-border: #2c2c2c;
--sb-border-soft: #232323;
--sb-border-strong: #3a3a3a;
--sb-border-input: #333333;
--sb-border-accent: #3c5312;
--sb-green: #649900;
--sb-green-hover: #76b312;
--sb-green-light: #8fce2e;
--sb-blue: #a9dcf9;
--sb-blue-hover: #c7e9fc;
--sb-blue-deep: #3b8fd1;
--sb-red: #e05252;
--sb-red-light: #f08080;
--sb-amber: #e0a052;
--sb-amber-light: #f0c27a;
--sb-text: #e8e8e4;
--sb-text-soft: #c9c9c3;
--sb-text-muted: #b8b8b2;
--sb-text-dim: #8a8a84;
--sb-text-faint: #666660;
--sb-font-head: 'Poppins', 'Open Sans', sans-serif;
--sb-font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
/* Nexus theme variables, remapped onto the dark palette. theme.min.css
reads these, so most stock components pick up the design for free. */
--primary: var(--sb-green);
--primary-lifted: var(--sb-green-hover);
--primary-accented: #558200;
--secondary: var(--sb-text-dim);
--secondary-lifted: var(--sb-text-muted);
--secondary-accented: var(--sb-text-soft);
--success: var(--sb-green);
--success-lifted: var(--sb-green-hover);
--success-accented: var(--sb-green-light);
--info: var(--sb-blue-deep);
--info-lifted: #4f9fdc;
--info-accented: #2f78b3;
--notice: #9b7bff;
--notice-lifted: #ad92ff;
--notice-accented: #8460f5;
--warning: var(--sb-amber);
--warning-lifted: var(--sb-amber-light);
--warning-accented: #c98a3c;
--error: var(--sb-red);
--error-lifted: var(--sb-red-light);
--error-accented: #c43c3c;
--grayscale: var(--sb-bg-inset);
--grayscale-lifted: var(--sb-border);
--grayscale-accented: var(--sb-border-strong);
--neutral: var(--sb-text-dim);
--neutral-lifted: var(--sb-text-muted);
--neutral-accented: var(--sb-text-soft);
--text-inverted: var(--sb-bg);
--text-muted: var(--sb-text-dim);
--text-lifted: var(--sb-text-muted);
--text-accented: var(--sb-text-soft);
--text: var(--sb-text);
--border-muted: var(--sb-border-soft);
--border: var(--sb-border);
--border-lifted: var(--sb-border-strong);
--border-accented: #4a4a4a;
--bg: var(--sb-bg-card);
--bg-muted: var(--sb-bg-alt);
--bg-lifted: var(--sb-bg-inset);
--bg-accented: var(--sb-border);
--bg-inverted: var(--sb-text);
--yellow-200: var(--sb-amber-light);
--yellow-300: var(--sb-amber);
--teal-300: var(--sb-blue);
--teal-400: var(--sb-blue-deep);
--emerald-300: var(--sb-green-light);
--pink-400: #e56aa5;
/* the design uses sharp corners everywhere */
--rounding-sm: 0;
--rounding-md: 0;
--rounding-lg: 0;
}
html,
body {
background: var(--sb-bg);
color: var(--sb-text);
font-family: var(--sb-font-body);
font-size: 14px;
line-height: 1.55;
scroll-behavior: smooth;
}
body.sb-body {
background: var(--sb-bg) !important;
background-image: none !important;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
::selection {
background: var(--sb-green);
color: #fff;
}
a {
color: var(--sb-blue);
text-decoration: none;
}
a:hover,
a:focus {
color: var(--sb-blue-hover);
text-decoration: none;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--sb-font-head);
font-weight: 800;
color: #fff;
letter-spacing: -0.01em;
}
p {
color: var(--sb-text-muted);
}
hr {
border-top: 1px solid var(--sb-border);
}
img {
max-width: 100%;
-webkit-user-drag: none;
user-select: none;
}
code {
color: var(--sb-green-light);
background: var(--sb-bg-inset);
padding: 1px 5px;
border-radius: 0;
}
.text-muted,
.small.text-muted,
small.text-muted {
color: var(--sb-text-dim) !important;
}
.text-dark {
color: var(--sb-text) !important;
}
.text-primary { color: var(--sb-green-light) !important; }
.text-success { color: var(--sb-green-light) !important; }
.text-info { color: var(--sb-blue) !important; }
.text-warning { color: var(--sb-amber) !important; }
.text-danger { color: var(--sb-red-light) !important; }
.bg-primary { background-color: var(--sb-green) !important; }
.bg-success { background-color: var(--sb-green) !important; }
.bg-info { background-color: var(--sb-bg-info-soft) !important; color: var(--sb-blue) !important; }
.bg-light { background-color: var(--sb-bg-inset) !important; }
.bg-white { background-color: var(--sb-bg-card) !important; }
.bg-dark { background-color: var(--sb-bg-dark) !important; }
.border,
.border-top,
.border-bottom,
.border-left,
.border-right {
border-color: var(--sb-border) !important;
}
.border-primary { border-color: var(--sb-green) !important; }
/* Font Awesome glyphs inherit the text colour; a few accents below */
.fas, .far, .fal, .fad, .fab {
color: inherit;
}
.fa-spinner,
.fa-spin,
.fa-circle-notch {
color: var(--sb-green-light);
}
.fal.fa-folder,
.fal.fa-folder-open {
color: var(--sb-green-light);
}
.fal.fa-star {
color: var(--sb-amber);
}
/* stock Nexus header, breadcrumb bar and the nexus footer are replaced by
the shells below; make sure nothing of them shows */
#header.header,
.master-breadcrumb,
footer.footer {
display: none !important;
}
/* generic page heading (every page except the dashboard) */
.sb-page-title {
font-family: var(--sb-font-head);
font-size: 30px;
font-weight: 800;
color: #fff;
margin: 0 0 6px;
line-height: 1.2;
}
.sb-page-sub {
font-size: 15px;
color: var(--sb-text-dim);
margin: 0 0 24px;
}
.sb-body-portal .sb-content > .sb-page-title {
margin-bottom: 22px;
}
/* ==========================================================================
2. PORTAL SHELL (logged in)
========================================================================== */
.sb-portal {
display: grid;
grid-template-columns: 250px minmax(0, 1fr);
min-height: 100vh;
background: var(--sb-bg);
}
.sb-nav-toggle-cb,
.sb-topbar,
.sb-nav-backdrop {
display: none;
}
/* --- sidebar --- */
.sb-sidebar {
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
background: var(--sb-bg-dark);
border-right: 1px solid #262626;
padding: 24px 16px;
display: flex;
flex-direction: column;
gap: 6px;
scrollbar-width: thin;
scrollbar-color: var(--sb-border-strong) transparent;
}
.sb-logo-link {
display: block;
padding: 6px 12px 22px;
}
.sb-logo-img {
height: 26px;
width: auto;
display: block;
}
.sb-side-nav {
display: flex;
flex-direction: column;
gap: 4px;
}
.sb-nav-group {
display: flex;
flex-direction: column;
}
.sb-nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 14px;
font-size: 14.5px;
font-weight: 700;
color: var(--sb-text-dim);
background: transparent;
text-decoration: none;
cursor: pointer;
transition: background .15s, color .15s;
}
.sb-nav-item:hover,
.sb-nav-item:focus {
background: var(--sb-bg-hover);
color: var(--sb-text);
text-decoration: none;
}
.sb-nav-group.open > .sb-nav-item {
color: #fff;
}
.sb-nav-item.active {
color: #fff;
background: var(--sb-bg-accent-soft);
}
.sb-nav-icon {
width: 18px;
flex-shrink: 0;
text-align: center;
font-size: 15px;
}
.sb-nav-icon-dot {
font-size: 7px;
}
.sb-nav-label {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sb-nav-badge {
display: inline-block;
background: var(--sb-green);
color: #fff;
font-size: 11px;
font-weight: 800;
line-height: 1.4;
padding: 2px 7px;
min-width: 20px;
text-align: center;
border-radius: 0;
}
.sb-nav-chevron {
font-size: 11px;
color: var(--sb-text-faint);
transition: transform .2s;
}
.sb-nav-group.open .sb-nav-chevron {
transform: rotate(180deg);
}
.sb-subnav {
display: none;
flex-direction: column;
padding: 2px 0 6px;
}
.sb-nav-group.open > .sb-subnav {
display: flex;
}
.sb-subnav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px 8px 44px;
font-size: 13.5px;
font-weight: 600;
color: var(--sb-text-dim);
text-decoration: none;
transition: background .15s, color .15s;
}
.sb-subnav-item:hover,
.sb-subnav-item:focus {
background: var(--sb-bg-hover);
color: var(--sb-text);
text-decoration: none;
}
.sb-subnav-item.active {
color: var(--sb-green-light);
}
.sb-subnav-icon {
width: 16px;
text-align: center;
font-size: 12px;
}
.sb-nav-group-cart {
margin-top: 6px;
padding-top: 10px;
border-top: 1px solid #262626;
}
/* --- user card --- */
.sb-user-card {
margin-top: auto;
background: var(--sb-bg-card);
border: 1px solid var(--sb-border);
padding: 14px;
}
.sb-user-row {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.sb-user-avatar {
width: 34px;
height: 34px;
flex-shrink: 0;
border-radius: 50%;
background: var(--sb-bg-accent-soft);
color: var(--sb-green-light);
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 14px;
}
.sb-user-text {
min-width: 0;
}
.sb-user-name {
font-size: 13.5px;
font-weight: 800;
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sb-user-since {
font-size: 12px;
color: var(--sb-text-dim);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sb-user-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-top: 12px;
}
.sb-user-btn {
display: block;
text-align: center;
font-size: 12.5px;
font-weight: 700;
color: var(--sb-text-dim);
border: 1px solid var(--sb-border);
padding: 7px 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
transition: color .15s, border-color .15s;
}
.sb-user-btn:hover,
.sb-user-btn:focus {
color: var(--sb-text);
border-color: var(--sb-border-strong);
text-decoration: none;
}
.sb-admin-return {
grid-column: 1 / -1;
margin-top: 6px;
color: var(--sb-amber);
border-color: var(--sb-amber);
}
.sb-user-card .sb-admin-return {
display: block;
margin-top: 8px;
}
.sb-lang-switch {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 10px;
font-size: 12px;
font-weight: 700;
}
.sb-lang-link {
color: var(--sb-text-faint);
text-decoration: none;
}
.sb-lang-link:hover,
.sb-lang-link.active {
color: var(--sb-text);
text-decoration: none;
}
.sb-lang-sep {
color: var(--sb-text-faint);
}
/* --- content column --- */
.sb-content {
min-width: 0;
width: 100%;
max-width: 1180px;
/* centred in the space next to the sidebar (justify-self for the grid
shell on desktop, the margins for the block layout on phones) */
margin: 0 auto;
justify-self: center;
padding: 36px 44px 48px;
display: flex;
flex-direction: column;
}
.sb-body-cart .sb-content {
max-width: none;
}
.sb-content > #main-body {
flex: 1 0 auto;
}
.sb-body-portal #main-body > .container,
.sb-body-portal #main-body > .container-fluid {
max-width: none;
width: 100%;
padding-left: 0;
padding-right: 0;
margin: 0;
}
.sb-body-portal #main-body {
padding: 0;
}
/* admin masquerade bar */
.sb-masquerade {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
background: var(--sb-bg-warn-soft);
border: 1px solid var(--sb-amber);
color: var(--sb-amber-light);
font-size: 13.5px;
font-weight: 700;
padding: 12px 16px;
margin-bottom: 20px;
}
.sb-masquerade i {
font-size: 16px;
}
.sb-masquerade-btn {
margin-left: auto;
color: #fff;
background: var(--sb-amber);
padding: 6px 12px;
font-size: 12.5px;
font-weight: 800;
text-decoration: none;
}
.sb-masquerade-btn {
--sb-slide-color: var(--sb-amber-light);
position: relative;
overflow: hidden;
z-index: 0;
}
.sb-masquerade-btn::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: var(--sb-slide-color);
transform: translateX(-101%);
transition: transform .22s ease;
pointer-events: none;
}
.sb-masquerade-btn:hover::before {
transform: translateX(0);
}
.sb-masquerade-btn:hover {
color: #fff;
text-decoration: none;
}
/* client alerts (unpaid invoices, pending verifications, ...) */
.sb-alerts {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 20px;
}
.sb-alert {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: var(--sb-bg-card);
border: 1px solid var(--sb-border);
border-left-width: 4px;
color: var(--sb-text);
font-size: 13.5px;
font-weight: 600;
text-decoration: none;
transition: border-color .15s, background .15s;
}
.sb-alert:hover {
background: var(--sb-bg-hover);
color: #fff;
text-decoration: none;
}
.sb-alert-text {
flex: 1 1 auto;
}
.sb-alert-arrow {
color: var(--sb-text-faint);
font-size: 12px;
}
.sb-alert-danger { border-left-color: var(--sb-red); }
.sb-alert-danger > .fas:first-child { color: var(--sb-red-light); }
.sb-alert-warning { border-left-color: var(--sb-amber); }
.sb-alert-warning > .fas:first-child { color: var(--sb-amber); }
.sb-alert-info { border-left-color: var(--sb-blue-deep); }
.sb-alert-info > .fas:first-child { color: var(--sb-blue); }
.sb-alert-success { border-left-color: var(--sb-green); }
.sb-alert-success > .fas:first-child { color: var(--sb-green-light); }
/* verification banners (email, identity) and network issues */
.verification-banner {
background: var(--sb-bg-warn-soft);
border: 1px solid var(--sb-amber);
color: var(--sb-amber-light);
padding: 12px 0;
margin-bottom: 20px;
}
.verification-banner .container {
max-width: none;
padding: 0 16px;
}
.verification-banner .text {
color: var(--sb-amber-light);
font-weight: 600;
}
.verification-banner .btn.close {
color: var(--sb-amber-light);
opacity: .8;
text-shadow: none;
}
.verification-banner i {
color: var(--sb-amber);
margin-right: 8px;
}
.network-issue-alert {
margin: 0 0 20px !important;
border-radius: 0;
}
.network-issue-alert .container {
max-width: none;
padding: 0;
}
/* portal footer: the site footer as a full-width row under the sidebar
and the content column (see includes/sb-footer.tpl) */
.sb-portal > .sb-site-footer {
grid-column: 1 / -1;
}
/* ==========================================================================
3. SITE SHELL (guest)
========================================================================== */
.sb-site {
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--sb-bg);
}
.sb-site-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 20px 48px;
border-bottom: 3px solid var(--sb-green);
position: sticky;
top: 0;
background: rgba(22, 22, 22, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
z-index: 1040;
}
.sb-site-logo {
display: flex;
align-items: center;
flex-shrink: 0;
}
.sb-site-logo img {
height: 30px;
width: auto;
display: block;
}
.sb-site-nav {
display: flex;
align-items: center;
gap: 32px;
font-size: 15px;
font-weight: 600;
}
.sb-site-link {
color: var(--sb-text-muted);
}
.sb-site-link:hover,
.sb-site-link.active {
color: #fff;
}
.sb-site-actions {
display: flex;
align-items: center;
gap: 12px;
}
.sb-site-actions .sb-lang-switch {
margin: 0 4px 0 0;
}
.sb-site-menu-toggle,
.sb-site-mobile-menu {
display: none;
}
.sb-site-main {
flex: 1 0 auto;
padding: 28px 0 56px;
}
.sb-body-guest #main-body > .container {
max-width: 1160px;
padding-left: 48px;
padding-right: 48px;
}
.sb-body-guest.sb-body-cart #main-body > .container {
max-width: 1280px;
}
/* guest footer: the serverbuilds.nl footer (SiteFooter.vue): brand column
with tagline, link columns, bottom bar */
.sb-site-footer {
border-top: 1px solid var(--sb-border-soft);
background: var(--sb-bg-dark);
color: var(--sb-text-faint);
}
.sb-site-footer-main {
max-width: 1160px;
margin: 0 auto;
padding: 48px;
display: flex;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
}
.sb-site-footer-brand {
max-width: 280px;
}
.sb-site-footer-logo {
height: 26px;
width: auto;
display: block;
margin-bottom: 14px;
}
.sb-site-footer-tagline {
font-size: 13.5px;
line-height: 1.6;
color: var(--sb-text-dim);
}
.sb-site-footer-cols {
display: flex;
gap: 64px;
flex-wrap: wrap;
}
.sb-site-footer-col {
display: flex;
flex-direction: column;
gap: 10px;
font-size: 14px;
}
.sb-site-footer-col-title {
font-weight: 800;
color: #fff;
margin-bottom: 4px;
}
.sb-site-footer-link {
color: var(--sb-text-dim);
}
.sb-site-footer-link:hover {
color: var(--sb-blue);
}
.sb-site-footer-bottom {
border-top: 1px solid var(--sb-border-soft);
text-align: center;
padding: 18px;
font-size: 12.5px;
color: var(--sb-text-faint);
}
.sb-site-footer-social {
display: flex;
justify-content: center;
gap: 8px;
margin: 0;
padding: 0 24px 28px;
list-style: none;
}
.sb-site-footer-social .btn-icon {
color: var(--sb-text-dim);
border: 1px solid var(--sb-border);
width: 32px;
height: 32px;
padding: 0;
line-height: 30px;
}
.sb-site-footer-social .btn-icon:hover {
color: #fff;
border-color: var(--sb-green);
}
/* design buttons (used by the shells and the theme's own components).
Hover: the accent colour slides in from the left, like .btn on
serverbuilds.nl (no glow, no scale). The slide is a ::before layer between
the button background and its label; --sb-slide-color sets the colour. */
.sb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
position: relative;
overflow: hidden;
z-index: 0;
border-radius: 0;
font-family: var(--sb-font-body);
font-weight: 800;
font-size: 14px;
line-height: 1.2;
padding: 12px 22px;
cursor: pointer;
text-align: center;
text-decoration: none;
border: 1px solid transparent;
transition: border-color .18s, color .18s;
white-space: nowrap;
}
.sb-btn::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: var(--sb-slide-color, var(--sb-green));
transform: translateX(-101%);
transition: transform .22s ease;
pointer-events: none;
}
.sb-btn:hover::before {
transform: translateX(0);
}
.sb-btn:hover,
.sb-btn:focus {
text-decoration: none;
}
.sb-btn-primary {
--sb-slide-color: var(--sb-green-hover);
background: var(--sb-green);
color: #fff;
border-color: var(--sb-green);
}
.sb-btn-primary:hover,
.sb-btn-primary:focus {
border-color: var(--sb-green-hover);
color: #fff;
}
.sb-btn-outline {
background: transparent;
color: var(--sb-text);
border-color: var(--sb-border-strong);
}
.sb-btn-outline:hover,
.sb-btn-outline:focus {
border-color: var(--sb-green);
color: #fff;
}
.sb-btn-dark {
background: var(--sb-bg-inset);
color: var(--sb-text);
border-color: var(--sb-border-strong);
}
.sb-btn-dark:hover,
.sb-btn-dark:focus {
border-color: var(--sb-green);
color: #fff;
}
.sb-btn-sm {
font-size: 13.5px;
padding: 10px 18px;
}
.sb-btn-xs {
font-size: 12.5px;
padding: 8px 14px;
}
.sb-btn-md {
font-size: 14px;
padding: 12px 22px;
}
.sb-btn-login {
font-size: 15px;
font-weight: 600;
padding: 10px 18px;
}
.sb-btn-start {
font-size: 15px;
font-weight: 700;
padding: 10px 20px;
}
/* ==========================================================================
4. SHARED COMPONENTS
========================================================================== */
/* --- cards / panels --- */
.card,
.panel,
.sb-card {
background: var(--sb-bg-card);
border: 1px solid var(--sb-border);
border-radius: 0 !important;
box-shadow: none;
color: var(--sb-text);
}
.sb-card {
padding: 24px;
margin-bottom: 20px;
}
.card-header,
.panel-heading {
background: var(--sb-bg-dark) !important;
border-bottom: 1px solid var(--sb-border) !important;
color: #fff;
padding: 14px 20px;
}
.card-header .card-title,
.panel-heading .panel-title {
font-family: var(--sb-font-head);
font-size: 15px;
font-weight: 800;
color: #fff;
}
.card-body,
.panel-body {
color: var(--sb-text);
}
.primary-content .card-title,
.card-body .card-title,
#main-body .card-title {
font-family: var(--sb-font-head);
font-size: 20px;
font-weight: 800;
color: #fff;
}
.card-footer,
.panel-footer {
background: var(--sb-bg-dark) !important;
border-top: 1px solid var(--sb-border) !important;
color: var(--sb-text-muted);
}
.card-subtitle {
color: #fff;
}
body .primary-content .card {
margin-bottom: 20px;
}
body .primary-content .card .card-body {
padding: 24px;
}
.card .card {
background: var(--sb-bg-inset);
}
.card-accent-gold,
.card-accent-green,
.card-accent-red,
.card-accent-blue,
.card-accent-orange,
.card-accent-pink,
.card-accent-purple,
.card-accent-lime,
.card-accent-magenta,
.card-accent-teal,
.card-accent-turquoise,
.card-accent-emerald,
.card-accent-amethyst,
.card-accent-wet-asphalt,
.card-accent-midnight-blue,
.card-accent-sun-flower,
.card-accent-pomegranate,
.card-accent-silver,
.card-accent-asbestos {
border-top: 3px solid var(--sb-green);
}
.list-group-item {
background: var(--sb-bg-card);
border-color: var(--sb-border-soft);
color: var(--sb-text-muted);
border-radius: 0 !important;
}
.list-group-item-action:hover,
.list-group-item-action:focus {
background: var(--sb-bg-hover);
color: #fff;
}
.list-group-item.active {
background: var(--sb-bg-accent-soft) !important;
border-color: var(--sb-border-accent) !important;
color: #fff !important;
}
.list-group-item .badge {
background: var(--sb-green);
color: #fff;
}
/* WHMCS contextual sidebar cards (actions, filters, domain management ...) */
.sidebar .card-sidebar {
background: var(--sb-bg-card);
border: 1px solid var(--sb-border);
margin-bottom: 20px;
}
.sidebar .card-sidebar .card-header {
background: var(--sb-bg-dark) !important;
padding: 12px 16px;
}
.sidebar .card-sidebar .card-title {
font-size: 13px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--sb-text-dim);
}
.sidebar .card-sidebar .card-title i {
color: var(--sb-green-light);
margin-right: 6px;
}
.sidebar .list-group-item {
border: 0;
border-bottom: 1px solid var(--sb-border-soft);
padding: 11px 16px;
font-size: 13.5px;
font-weight: 600;
color: var(--sb-text-dim);
transition: background .15s, color .15s;
}
.sidebar .list-group-item:last-child {
border-bottom: 0;
}
.sidebar .list-group-item:hover {
background: var(--sb-bg-hover);
color: var(--sb-text);
}
.sidebar .list-group-item.active {
background: var(--sb-bg-accent-soft) !important;
color: #fff !important;
border-color: var(--sb-border-soft) !important;
}
.sidebar .list-group-item i {
color: var(--sb-green-light);
margin-right: 8px;
width: 18px;
text-align: center;
}
.sidebar .list-group-item.active i {
color: var(--sb-green-light);
}
.sidebar .list-group-item .badge {
background: var(--sb-bg-inset);
color: var(--sb-text);
font-weight: 800;
}
.sidebar .card-body {
padding: 16px;
color: var(--sb-text-muted);
font-size: 13.5px;
}
.sidebar .card-body .form-control {
margin-bottom: 8px;
}
.sidebar .card-footer,
.sidebar .ticket-sidebar-footer {
padding: 12px 16px;
}
.sidebar .card-sidebar .card-footer .btn,
.sidebar .card-sidebar .card-body .btn {
width: 100%;
}
.sidebar .card-sidebar .collapsable-card-body .card-body p:last-child {
margin-bottom: 0;
}
/* mobile select variant of the sidebar */
.sidebar .card-sidebar select.form-control {
margin: 0;
}
/* --- buttons --- */
/* Every WHMCS button hovers like serverbuilds.nl's .btn: the accent colour
slides in from the left (no glow, no scale). The ::before slide layer sits
between the button background and the label; --sb-slide-color sets the
colour per variant. cannot carry a pseudo-element,
so those keep a plain colour change (see the input.btn rules). */
.btn {
border-radius: 0 !important;
font-family: var(--sb-font-body);
font-weight: 700;
font-size: 14px;
padding: 10px 18px;
line-height: 1.3;
box-shadow: none !important;
transition: border-color .18s, color .18s;
}
.btn:not(.btn-return-to-admin) {
position: relative;
overflow: hidden;
z-index: 0;
}
.btn::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: var(--sb-slide-color, var(--sb-green));
transform: translateX(-101%);
transition: transform .22s ease;
pointer-events: none;
}
.btn:hover::before {
transform: translateX(0);
}
/* no slide on text links, disabled buttons, toolbar and field buttons */
.btn-link::before,
.btn.disabled::before,
.btn:disabled::before,
.btn-return-to-admin::before,
.md-editor .btn::before,
.btn-reveal-pw::before,
.input-group .btn::before {
display: none;
}
.btn:focus {
outline: none;
}
.btn:focus-visible,
.sb-btn:focus-visible {
outline: 2px solid var(--sb-green);
outline-offset: 2px;
}
.btn-primary,
.btn-success,
.btn-info {
--sb-slide-color: var(--sb-green-hover);
background: var(--sb-green) !important;
border-color: var(--sb-green) !important;
color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
background: var(--sb-green) !important;
border-color: var(--sb-green-hover) !important;
color: #fff !important;
}
input.btn-primary:hover,
input.btn-success:hover,
input.btn-info:hover,
.input-group .btn-primary:hover {
background: var(--sb-green-hover) !important;
}
.btn-default,
.btn-secondary,
.btn-light,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-light,
.btn-outline-dark,
.btn-outline-info,
.btn-outline-success {
background: var(--sb-bg-inset) !important;
border-color: var(--sb-border-strong) !important;
color: var(--sb-text) !important;
}
.btn-default:hover,
.btn-default:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-light:hover,
.btn-light:focus,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-light:hover,
.btn-outline-dark:hover,
.btn-outline-info:hover,
.btn-outline-success:hover {
border-color: var(--sb-green) !important;
color: #fff !important;
background: var(--sb-bg-inset) !important;
}
.btn-danger {
--sb-slide-color: #c43c3c;
background: var(--sb-red) !important;
border-color: var(--sb-red) !important;
color: #fff !important;
}
.btn-danger:hover,
.btn-danger:focus {
background: var(--sb-red) !important;
border-color: #c43c3c !important;
color: #fff !important;
}
input.btn-danger:hover {
background: #c43c3c !important;
}
.btn-outline-danger {
--sb-slide-color: var(--sb-red);
background: transparent !important;
border-color: var(--sb-red) !important;
color: var(--sb-red-light) !important;
}
.btn-outline-danger:hover {
color: #fff !important;
}
input.btn-outline-danger:hover {
background: var(--sb-red) !important;
}
.btn-warning {
--sb-slide-color: #c98a3c;
background: var(--sb-amber) !important;
border-color: var(--sb-amber) !important;
color: #1a1a1a !important;
}
.btn-outline-warning {
--sb-slide-color: var(--sb-amber);
background: transparent !important;
border-color: var(--sb-amber) !important;
color: var(--sb-amber) !important;
}
.btn-outline-warning:hover {
color: #1a1a1a !important;
}
.btn-dark {
background: var(--sb-bg-dark) !important;
border-color: var(--sb-border-strong) !important;
color: var(--sb-text) !important;
}
.btn-dark:hover {
border-color: var(--sb-green) !important;
color: #fff !important;
}
.btn-link {
color: var(--sb-blue) !important;
background: transparent !important;
border-color: transparent !important;
}
.btn-link:hover {
color: var(--sb-blue-hover) !important;
text-decoration: underline;
}
.btn-lg {
font-size: 15px;
padding: 13px 26px;
}
.btn-sm {
font-size: 13px;
padding: 7px 14px;
}
.btn-xs {
font-size: 12px;
padding: 4px 10px;
}
.btn.disabled,
.btn:disabled {
opacity: .45;
}
.btn-group .btn {
margin: 0;
}
.btn-return-to-admin {
--sb-slide-color: #c98a3c;
background: var(--sb-amber) !important;
color: #1a1a1a !important;
}
/* --- forms --- */
label,
.col-form-label,
.form-control-label,
.control-label {
color: var(--sb-text-dim);
font-size: 12.5px;
font-weight: 800;
margin-bottom: 6px;
}
.form-control,
.custom-select,
select.form-control,
textarea.form-control,
.intl-tel-input input.form-control {
background-color: var(--sb-bg-inset) !important;
border: 1px solid var(--sb-border-input) !important;
border-radius: 0 !important;
color: var(--sb-text) !important;
font-family: var(--sb-font-body);
font-size: 14px;
font-weight: 600;
padding: 11px 14px;
height: auto;
box-shadow: none !important;
transition: border-color .15s, box-shadow .15s;
}
.form-control:focus,
.custom-select:focus,
select.form-control:focus,
textarea.form-control:focus {
border-color: var(--sb-green) !important;
box-shadow: none !important;
outline: none;
}
.form-control::placeholder {
color: var(--sb-text-faint);
font-weight: 500;
}
.form-control:disabled,
.form-control[readonly] {
background-color: var(--sb-bg-dark) !important;
color: var(--sb-text-dim) !important;
opacity: 1;
}
.form-control-sm,
.input-sm {
padding: 7px 10px;
font-size: 13px;
}
select.form-control,
.custom-select,
#main-body select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 36px;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238a8a84'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 12px auto !important;
background-color: var(--sb-bg-inset) !important;
}
select.form-control[multiple],
select.form-control[size] {
background-image: none !important;
padding-right: 14px;
}
select option {
background: var(--sb-bg-inset);
color: var(--sb-text);
}
.input-group-text {
background: var(--sb-bg-dark);
border: 1px solid var(--sb-border-input);
color: var(--sb-text-dim);
border-radius: 0 !important;
}
.input-group .btn-reveal-pw,
.input-group .btn-reveal-pw:hover,
.input-group .btn-reveal-pw:active {
background: var(--sb-bg-dark) !important;
border-color: var(--sb-border-input) !important;
color: var(--sb-text-dim) !important;
}
.input-group .btn-reveal-pw:hover {
color: var(--sb-green-light) !important;
}
.form-text,
.field-help-text,
.help-block {
color: var(--sb-text-dim);
font-size: 12.5px;
}
.form-check-label {
font-weight: 600;
color: var(--sb-text-muted);
}
.intl-tel-input .country-list {
background: var(--sb-bg-card);
border: 1px solid var(--sb-border);
color: var(--sb-text);
border-radius: 0;
}
.intl-tel-input .country-list .country.highlight {
background: var(--sb-bg-hover);
}
.intl-tel-input .country-list .divider {
border-bottom-color: var(--sb-border);
}
.intl-tel-input .selected-flag {
background: transparent !important;
}
.intl-tel-input .country-list .dial-code {
color: var(--sb-text-dim);
}
/* native checkboxes and radios: design look, green when checked */
#main-body input[type="checkbox"]:not(.toggle-switch-success),
body #order-standard_cart input[type="checkbox"].no-icheck {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
margin: 0 6px 0 0;
border: 2px solid var(--sb-border-strong);
border-radius: 0;
background: var(--sb-bg-inset);
cursor: pointer;
position: relative;
vertical-align: middle;
flex-shrink: 0;
transition: background .15s, border-color .15s, box-shadow .15s;
outline: none;
}
#main-body input[type="checkbox"]:not(.toggle-switch-success):hover,
body #order-standard_cart input[type="checkbox"].no-icheck:hover {
border-color: var(--sb-green);
}
#main-body input[type="checkbox"]:not(.toggle-switch-success):focus-visible {
outline: 2px solid var(--sb-green);
outline-offset: 2px;
}
#main-body input[type="checkbox"]:not(.toggle-switch-success):checked,
body #order-standard_cart input[type="checkbox"].no-icheck:checked {
background: var(--sb-green);
border-color: var(--sb-green);
}
#main-body input[type="checkbox"]:not(.toggle-switch-success):checked::after,
body #order-standard_cart input[type="checkbox"].no-icheck:checked::after {
content: '';
position: absolute;
left: 5px;
top: 1px;
width: 6px;
height: 11px;
border: solid #fff;
border-width: 0 2.5px 2.5px 0;
transform: rotate(45deg);
}
#main-body input[type="radio"] {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
margin: 0 6px 0 0;
border: 2px solid var(--sb-border-strong);
border-radius: 50%;
background: var(--sb-bg-inset);
cursor: pointer;
position: relative;
vertical-align: middle;
flex-shrink: 0;
transition: border-color .15s, box-shadow .15s;
outline: none;
}
#main-body input[type="radio"]:hover { border-color: var(--sb-green); }
#main-body input[type="radio"]:focus-visible { outline: 2px solid var(--sb-green); outline-offset: 2px; }
#main-body input[type="radio"]:checked { border-color: var(--sb-green); }
#main-body input[type="radio"]:checked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--sb-green-light);
transform: translate(-50%, -50%);
}
/* iCheck skins (order form) */
#main-body .icheckbox_square-blue,
#main-body .iradio_square-blue {
background-image: none !important;
width: 20px;
height: 20px;
border: 2px solid var(--sb-border-strong) !important;
background-color: var(--sb-bg-inset) !important;
filter: none !important;
-webkit-filter: none !important;
position: relative;
transition: background-color .15s, border-color .15s;
}
#main-body .icheckbox_square-blue { border-radius: 0; }
#main-body .iradio_square-blue { border-radius: 50%; }
#main-body .icheckbox_square-blue.hover,
#main-body .iradio_square-blue.hover { border-color: var(--sb-green) !important; }
#main-body .icheckbox_square-blue.checked {
background-color: var(--sb-green) !important;
border-color: var(--sb-green) !important;
}
#main-body .icheckbox_square-blue.checked::after {
content: '';
position: absolute;
left: 5px;
top: 1px;
width: 6px;
height: 11px;
border: solid #fff;
border-width: 0 2.5px 2.5px 0;
transform: rotate(45deg);
}
#main-body .iradio_square-blue.checked { border-color: var(--sb-green) !important; }
#main-body .iradio_square-blue.checked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--sb-green-light);
transform: translate(-50%, -50%);
}
/* bootstrap-switch (Ja/Nee toggles): the design's pill toggle. The plugin's
own three sliding segments are hidden; track + knob are drawn from the
wrapper's state classes, which the plugin toggles. */
#main-body .bootstrap-switch {
position: relative;
width: 46px !important;
min-width: 46px !important;
height: 26px !important;
border: 0 !important;
border-radius: 999px !important;
background: var(--sb-border-strong) !important;
overflow: hidden;
cursor: pointer;
transition: background .2s, box-shadow .15s;
}
#main-body .bootstrap-switch.bootstrap-switch-on {
background: var(--sb-green) !important;
}
#main-body .bootstrap-switch.bootstrap-switch-focused {
box-shadow: none !important;
outline: 2px solid var(--sb-green);
outline-offset: 2px;
}
#main-body .bootstrap-switch .bootstrap-switch-container {
width: 100% !important;
height: 100% !important;
margin-left: 0 !important;
display: block !important;
}
#main-body .bootstrap-switch .bootstrap-switch-handle-on,
#main-body .bootstrap-switch .bootstrap-switch-handle-off {
display: none !important;
}
#main-body .bootstrap-switch .bootstrap-switch-label {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
color: transparent !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 999px !important;
font-size: 0 !important;
cursor: pointer;
z-index: 2;
}
#main-body .bootstrap-switch::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
transition: left .2s;
pointer-events: none;
}
#main-body .bootstrap-switch.bootstrap-switch-on::after {
left: 23px;
}
/* checkbox labels: keep the box inline next to its text */
#main-body .form-check {
display: inline-flex;
align-items: center;
gap: 8px;
padding-left: 0;
margin-bottom: 0;
color: var(--sb-text-muted);
}
#main-body .form-check-input {
position: relative !important;
margin: 0 6px 0 0 !important;
}
/* e-mail preferences: the container div carries .form-check; stack rows */
#main-body .controls.form-check {
display: flex !important;
flex-direction: column;
align-items: stretch;
gap: 8px;
text-align: left;
}
#main-body .controls.form-check label {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 0;
font-size: 13.5px;
font-weight: 600;
color: var(--sb-text-muted);
cursor: pointer;
}
#main-body .controls.form-check label input[type="checkbox"] {
flex-shrink: 0;
margin-top: 1px;
}
/* password strength + generator */
.password-strength-meter .progress {
height: 7px;
background: var(--sb-bg);
border-radius: 99px;
}
.password-strength-meter .progress-bar {
border-radius: 99px;
}
.progress {
background: var(--sb-bg);
border-radius: 0;
}
.progress-bar {
background: var(--sb-green);
}
.progress-bar-success { background: var(--sb-green); }
.progress-bar-warning { background: var(--sb-amber); }
.progress-bar-danger { background: var(--sb-red); }
.generate-password {
background: transparent !important;
border: 1px solid var(--sb-border-strong) !important;
color: var(--sb-text) !important;
}
.generate-password:hover {
border-color: var(--sb-green) !important;
}
#main-body .using-password-strength .alert-info {
margin: 10px 0 4px;
}
/* form action buttons: full width on phones (see responsive) */
/* --- alerts --- */
.alert {
border-radius: 0;
border: 1px solid transparent;
padding: 14px 18px;
font-size: 13.5px;
font-weight: 600;
}
.alert h2,
.alert h4 {
font-size: 16px;
margin-bottom: 8px;
}
.alert ul {
margin-bottom: 0;
padding-left: 18px;
}
.alert-success {
background: var(--sb-bg-accent-soft);
border-color: var(--sb-border-accent);
color: var(--sb-green-light);
}
.alert-info {
background: var(--sb-bg-info-soft);
border-color: #2a4050;
color: var(--sb-blue);
}
.alert-warning {
background: var(--sb-bg-warn-soft);
border-color: #5a4326;
color: var(--sb-amber-light);
}
.alert-danger {
background: var(--sb-bg-danger-soft);
border-color: #5a2f2f;
color: var(--sb-red-light);
}
.alert-secondary,
.alert-light,
.alert-dark {
background: var(--sb-bg-inset);
border-color: var(--sb-border);
color: var(--sb-text-muted);
}
.alert a,
.alert .alert-link {
color: inherit;
font-weight: 800;
text-decoration: underline;
}
.alert .close {
color: inherit;
text-shadow: none;
opacity: .7;
}
.slim-alert {
padding: 8px 12px;
}
/* --- badges, labels, status pills --- */
.badge,
.label {
display: inline-block;
border-radius: 0 !important;
font-size: 11.5px;
font-weight: 800;
letter-spacing: .02em;
line-height: 1.3;
padding: 4px 10px;
text-transform: none;
background: var(--sb-bg-inset);
color: var(--sb-text-muted);
}
.badge-primary, .label-primary,
.badge-success, .label-success,
.badge-info, .label-info {
background: var(--sb-bg-accent-soft) !important;
color: var(--sb-green-light) !important;
}
.badge-info, .label-info {
background: var(--sb-bg-info-soft) !important;
color: var(--sb-blue) !important;
}
.badge-warning, .label-warning {
background: var(--sb-bg-warn-soft) !important;
color: var(--sb-amber-light) !important;
}
.badge-danger, .label-danger {
background: var(--sb-bg-danger-soft) !important;
color: var(--sb-red-light) !important;
}
.badge-default, .label-default,
.badge-secondary, .badge-light, .badge-dark {
background: var(--sb-bg-inset) !important;
color: var(--sb-text-dim) !important;
}
.badge-pill {
border-radius: 0 !important;
}
/* design badges */
.sb-badge {
display: inline-block;
font-size: 12px;
font-weight: 800;
padding: 4px 10px;
border-radius: 0;
white-space: nowrap;
background: var(--sb-bg-inset);
color: var(--sb-text-dim);
}
.sb-badge-green { background: var(--sb-bg-accent-soft); color: var(--sb-green-light); }
.sb-badge-blue { background: var(--sb-bg-info-soft); color: var(--sb-blue); }
.sb-badge-amber { background: var(--sb-bg-warn-soft); color: var(--sb-amber-light); }
.sb-badge-red { background: var(--sb-bg-danger-soft); color: var(--sb-red-light); }
.sb-badge-neutral { background: var(--sb-bg-inset); color: var(--sb-text-dim); }
/* status classes WHMCS puts on tables, ticket lists and detail pages */
.status,
.label.status,
#main-body table .status,
#main-body table .label {
border-radius: 0 !important;
padding: 4px 10px !important;
font-size: 11.5px !important;
font-weight: 800 !important;
display: inline-block;
line-height: 1.3;
border: 0;
}
.status-paid, .status-active, .status-open, .status-completed, .status-accepted,
#main-body .status-paid, #main-body .status-active, #main-body .status-open,
#main-body .status-completed, #main-body .status-accepted {
background: var(--sb-bg-accent-soft) !important;
color: var(--sb-green-light) !important;
}
.status-answered, .status-customer-reply, .status-on-hold, .status-onhold,
.status-in-progress, .status-inprogress, .status-pending, .status-pending-transfer,
.status-pendingtransfer, .status-suspended, .status-payment-pending,
.status-pending-registration, .status-redemption, .status-grace,
#main-body .status-answered, #main-body .status-customer-reply, #main-body .status-on-hold,
#main-body .status-onhold, #main-body .status-in-progress, #main-body .status-inprogress,
#main-body .status-pending, #main-body .status-pending-transfer, #main-body .status-suspended,
#main-body .status-payment-pending, #main-body .status-redemption, #main-body .status-grace {
background: var(--sb-bg-warn-soft) !important;
color: var(--sb-amber-light) !important;
}
.status-unpaid, .status-overdue, .status-cancelled, .status-terminated, .status-expired,
.status-fraud, .status-collections, .status-transferred-away, .status-lost, .status-dead,
#main-body .status-unpaid, #main-body .status-overdue, #main-body .status-cancelled,
#main-body .status-terminated, #main-body .status-expired, #main-body .status-fraud,
#main-body .status-collections, #main-body .status-transferred-away {
background: var(--sb-bg-danger-soft) !important;
color: var(--sb-red-light) !important;
}
.status-closed, .status-refunded, .status-draft, .status-delivered,
#main-body .status-closed, #main-body .status-refunded, #main-body .status-draft {
background: var(--sb-bg-inset) !important;
color: var(--sb-text-dim) !important;
}
.status-custom {
color: #fff !important;
}
.requestor-type-operator { background: var(--sb-bg-info-soft) !important; color: var(--sb-blue) !important; }
.requestor-type-owner { background: var(--sb-bg-accent-soft) !important; color: var(--sb-green-light) !important; }
.requestor-type-authorizeduser,
.requestor-type-registereduser,
.requestor-type-subaccount,
.requestor-type-guest { background: var(--sb-bg-inset) !important; color: var(--sb-text-dim) !important; }
/* terminated services stand out in red on the services table */
.product-status-terminated {
background: var(--sb-bg-danger-soft) !important;
color: var(--sb-red-light) !important;
}
/* --- tables --- */
#main-body .table-container {
background: var(--sb-bg-card);
border: 1px solid var(--sb-border);
border-radius: 0;
padding: 8px 20px 14px;
overflow: hidden;
}
.table,
#main-body table.table-list,
#main-body .table {
color: var(--sb-text);
border: 0 !important;
margin-bottom: 8px;
background: transparent;
}
.table > thead > tr > th,
#main-body table.table-list thead th,
#main-body .table > thead > tr > th {
background: transparent !important;
color: var(--sb-text-dim) !important;
font-size: 12px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
border: 0 !important;
border-bottom: 1px solid var(--sb-border) !important;
padding: 14px 16px;
white-space: nowrap;
}
.table > tbody > tr > td,
#main-body table.table-list tbody td,
#main-body .table > tbody > tr > td {
border: 0 !important;
border-bottom: 1px solid var(--sb-border-soft) !important;
padding: 15px 16px;
vertical-align: middle;
font-size: 14px;
background: transparent;
color: var(--sb-text);
}
.table > tbody > tr:last-child > td,
#main-body .table > tbody > tr:last-child > td {
border-bottom: 0 !important;
}
.table-striped > tbody > tr:nth-of-type(odd),
#main-body .table-striped > tbody > tr {
background: transparent !important;
}
.table-hover > tbody > tr:hover,
#main-body table.table-list tbody tr:hover td,
.table-hover tbody tr:hover td {
background: var(--sb-bg-hover) !important;
color: var(--sb-text);
}
#main-body table.table-list tbody tr {
cursor: pointer;
}
#main-body table.table-list a {
color: var(--sb-blue);
font-weight: 700;
}
#main-body table.table-list a:hover {
color: var(--sb-blue-hover);
}
#main-body table.table-list td strong {
color: #fff;
font-weight: 800;
}
#main-body table.table-list thead th.sorting_asc,
#main-body table.table-list thead th.sorting_desc {
color: #fff !important;
}
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th {
border-color: var(--sb-border-soft) !important;
}
#main-body .panel .table,
#main-body .card .table {
margin-bottom: 0;
}
.table .thead-light th,
.table thead.thead-light th {
background: var(--sb-bg-dark) !important;
color: var(--sb-text-dim) !important;
}
.ticket-number {
color: var(--sb-text-dim);
font-weight: 700;
margin-right: 6px;
}
.ticket-subject.unread {
font-weight: 800;
color: #fff;
}
table.table-list a.border-left {
border-left: 0 !important;
padding-left: 0 !important;
}
/* DataTables chrome */
#main-body .dataTables_wrapper .listtable {
border: 0;
}
#main-body .dataTables_filter {
text-align: right;
margin: 8px 0;
}
#main-body .dataTables_filter label {
margin: 0;
width: 100%;
max-width: 320px;
position: relative;
}
#main-body .dataTables_filter label::before {
content: '\f002';
font-family: 'Font Awesome 5 Pro', 'Font Awesome 6 Pro', 'Font Awesome 5 Free', 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
left: 13px;
top: 50%;
transform: translateY(-50%);
color: var(--sb-text-faint);
font-size: 13px;
pointer-events: none;
}
#main-body .dataTables_filter input,
#main-body .dataTables_filter input[type="search"] {
width: 100%;
border: 1px solid var(--sb-border-input) !important;
border-radius: 0 !important;
background: var(--sb-bg-inset) !important;
padding: 10px 14px 10px 36px !important;
height: auto !important;
font-size: 13.5px;
color: var(--sb-text);
box-shadow: none !important;
}
#main-body .dataTables_filter input:focus {
border-color: var(--sb-green) !important;
box-shadow: none !important;
outline: none;
}
#main-body .dataTables_info {
color: var(--sb-text-dim) !important;
font-size: 12.5px;
padding: 10px 4px;
}
#main-body .dataTables_paginate {
padding-top: 10px;
}
#main-body .dataTables_paginate .paginate_button {
display: inline-block;
border: 1px solid var(--sb-border) !important;
border-radius: 0 !important;
background: var(--sb-bg-inset) !important;
color: var(--sb-text) !important;
padding: 7px 13px !important;
margin-left: 4px;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: border-color .15s, background .15s, color .15s;
}
#main-body .dataTables_paginate .paginate_button:hover {
border-color: var(--sb-green) !important;
color: #fff !important;
background: var(--sb-bg-inset) !important;
}
#main-body .dataTables_paginate .paginate_button.current,
#main-body .dataTables_paginate .paginate_button.current:hover {
background: var(--sb-green) !important;
border-color: var(--sb-green) !important;
color: #fff !important;
}
#main-body .dataTables_paginate .paginate_button.disabled,
#main-body .dataTables_paginate .paginate_button.disabled:hover {
opacity: .4;
cursor: default;
border-color: var(--sb-border) !important;
color: var(--sb-text-dim) !important;
background: var(--sb-bg-inset) !important;
}
#main-body .dataTables_paginate .paginate_button a,
#main-body .dataTables_paginate .paginate_button .page-link,
#main-body .dataTables_paginate a.paginate_button > * {
border: 0 !important;
background: transparent !important;
color: inherit !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: none !important;
outline: none !important;
}
#main-body .dataTables_length {
color: var(--sb-text-dim) !important;
font-size: 12.5px;
padding-top: 12px;
}
#main-body .dataTables_length select {
border: 1px solid var(--sb-border-input);
border-radius: 0;
padding: 6px 30px 6px 10px;
background-color: var(--sb-bg-inset);
color: var(--sb-text);
margin: 0 6px;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
background: var(--sb-green);
border-color: var(--sb-green);
box-shadow: none;
}
table.dataTable > tbody > tr.child ul.dtr-details > li {
border-bottom-color: var(--sb-border-soft);
}
table.dataTable > tbody > tr.child span.dtr-title {
color: var(--sb-text-dim);
}
/* --- pagination (non DataTables) --- */
.pagination .page-link {
background: var(--sb-bg-inset);
border: 1px solid var(--sb-border);
color: var(--sb-text);
border-radius: 0 !important;
margin: 0 2px;
font-weight: 700;
}
.pagination .page-link:hover {
border-color: var(--sb-green);
background: var(--sb-bg-inset);
color: #fff;
}
.pagination .page-item.active .page-link {
background: var(--sb-green);
border-color: var(--sb-green);
color: #fff;
}
.pagination .page-item.disabled .page-link {
background: var(--sb-bg-dark);
border-color: var(--sb-border);
color: var(--sb-text-faint);
}
/* --- tabs --- */
.nav-tabs {
border-bottom: 1px solid var(--sb-border);
}
.nav-tabs .nav-link,
.nav-tabs > li > a {
border: 0;
border-bottom: 2px solid transparent;
color: var(--sb-text-dim);
font-weight: 700;
background: transparent;
border-radius: 0;
}
.nav-tabs .nav-link:hover,
.nav-tabs > li > a:hover {
color: var(--sb-text);
border-color: transparent;
border-bottom-color: var(--sb-border-strong);
background: transparent;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav-tabs > li.active > a {
color: #fff;
background: transparent;
border-color: transparent;
border-bottom: 2px solid var(--sb-green);
}
.nav-pills .nav-link {
color: var(--sb-text-dim);
border-radius: 0;
font-weight: 700;
}
.nav-pills .nav-link.active {
background: var(--sb-bg-accent-soft);
color: #fff;
}
.tab-content {
color: var(--sb-text);
}
/* --- dropdowns --- */
.dropdown-menu {
background: var(--sb-bg-card);
border: 1px solid var(--sb-border);
border-radius: 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
color: var(--sb-text);
z-index: 1060;
}
.dropdown-item {
color: var(--sb-text-muted);
font-weight: 600;
}
.dropdown-item:hover,
.dropdown-item:focus {
background: var(--sb-bg-hover);
color: #fff;
}
.dropdown-item.active,
.dropdown-item:active {
background: var(--sb-bg-accent-soft);
color: #fff;
}
.dropdown-divider {
border-top-color: var(--sb-border);
}
.dropdown-header {
color: var(--sb-text-dim);
}
/* --- modals --- */
.modal-content {
background: var(--sb-bg-card);
border: 1px solid var(--sb-border);
border-radius: 0;
color: var(--sb-text);
}
.modal .modal-header {
background: var(--sb-bg-dark);
border-bottom: 1px solid var(--sb-border);
}
.modal-title {
color: #fff;
font-size: 16px;
}
.modal-body {
color: var(--sb-text);
}
.modal-footer {
border-top: 1px solid var(--sb-border);
}
.modal .close {
color: var(--sb-text);
text-shadow: none;
opacity: .7;
}
.modal .close:hover {
color: #fff;
opacity: 1;
}
.modal-backdrop {
background: #000;
}
.modal-backdrop.show {
opacity: .7;
}
.modal-localisation .modal-content {
background: var(--sb-bg-card);
}
.modal-localisation .modal-body {
background: var(--sb-bg-card);
}
.modal-localisation .item-selector .item {
border: 1px solid var(--sb-border-strong);
border-radius: 0;
color: var(--sb-text);
padding: 8px;
font-weight: 700;
}
.modal-localisation .item-selector .item:hover {
background: var(--sb-bg-inset);
color: #fff;
}
.modal-localisation .item-selector .item.active {
background: var(--sb-green);
border-color: var(--sb-green);
color: #fff;
}
/* --- popovers, tooltips --- */
.popover {
background: var(--sb-bg-card);
border: 1px solid var(--sb-border-strong);
border-radius: 0;
color: var(--sb-text);
}
.popover-header {
background: var(--sb-bg-dark);
border-bottom: 1px solid var(--sb-border);
color: #fff;
}
.popover-body {
color: var(--sb-text);
}
.bs-popover-bottom > .arrow::after,
.bs-popover-auto[x-placement^="bottom"] > .arrow::after {
border-bottom-color: var(--sb-bg-dark);
}
.bs-popover-top > .arrow::after,
.bs-popover-auto[x-placement^="top"] > .arrow::after {
border-top-color: var(--sb-bg-card);
}
.tooltip-inner {
background: #000;
color: #fff;
border-radius: 0;
font-weight: 600;
}
/* --- breadcrumb inside pages, misc --- */
.breadcrumb {
background: transparent;
padding: 0;
}
.breadcrumb-item a {
color: var(--sb-text-dim);
}
.breadcrumb-item.active {
color: var(--sb-text);
}
.breadcrumb-item + .breadcrumb-item::before {
color: var(--sb-text-faint);
}
.close {
color: var(--sb-text);
text-shadow: none;
}
.well,
.jumbotron {
background: var(--sb-bg-inset);
border: 1px solid var(--sb-border);
border-radius: 0;
color: var(--sb-text);
}
#fullpage-overlay {
background: rgba(22, 22, 22, .92);
color: var(--sb-text);
}
#fullpage-overlay .msg {
color: var(--sb-text);
font-weight: 700;
}
blockquote,
.blockquote {
border-left: 3px solid var(--sb-green);
color: var(--sb-text-muted);
padding-left: 14px;
}
pre {
background: var(--sb-bg-dark);
color: var(--sb-text);
border: 1px solid var(--sb-border);
padding: 12px;
}
kbd {
background: var(--sb-bg-inset);
color: var(--sb-text);
}
/* ==========================================================================
5. DASHBOARD
========================================================================== */
.sb-home {
display: flex;
flex-direction: column;
}
.sb-page-head {
margin-bottom: 8px;
}
.sb-page-head .sb-page-title {
margin-bottom: 4px;
}
.sb-page-head .sb-page-sub {
margin-bottom: 28px;
}
/* status strip */
.sb-home-status {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
margin-bottom: 20px;
color: var(--sb-text);
font-size: 14px;
font-weight: 700;
text-decoration: none;
}
.sb-home-status:hover {
color: #fff;
border-color: var(--sb-border-strong);
text-decoration: none;
}
.sb-home-status-dot {
width: 11px;
height: 11px;
border-radius: 50%;
flex-shrink: 0;
}
.sb-home-status-ok .sb-home-status-dot {
background: var(--sb-green-light);
}
.sb-home-status-degraded .sb-home-status-dot {
background: var(--sb-amber);
}
.sb-home-status-down .sb-home-status-dot {
background: var(--sb-red);
}
.sb-home-status-maintenance .sb-home-status-dot {
background: var(--sb-blue);
}
.sb-home-status-link {
margin-left: auto;
color: var(--sb-blue);
font-size: 13.5px;
font-weight: 800;
white-space: nowrap;
}
/* server card */
.sb-server-card {
padding: 26px;
margin-bottom: 20px;
}
.sb-server-head {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.sb-server-card:not(.sb-server-empty) .sb-server-head {
margin-bottom: 22px;
}
.sb-server-id {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.sb-server-icon {
width: 40px;
height: 40px;
object-fit: contain;
image-rendering: pixelated;
flex-shrink: 0;
}
.sb-status-dot {
width: 11px;
height: 11px;
border-radius: 50%;
flex-shrink: 0;
background: var(--sb-text-faint);
}
.sb-status-dot-green { background: var(--sb-green-light); }
.sb-status-dot-amber { background: var(--sb-amber); }
.sb-status-dot-red { background: var(--sb-red); }
.sb-status-dot-blue { background: var(--sb-blue); }
.sb-server-name {
font-size: 17px;
font-weight: 800;
color: #fff;
word-break: break-word;
}
.sb-server-meta {
font-size: 13px;
color: var(--sb-text-dim);
font-weight: 600;
}
.sb-status-text-green { color: var(--sb-green-light); }
.sb-status-text-amber { color: var(--sb-amber); }
.sb-status-text-red { color: var(--sb-red-light); }
.sb-status-text-blue { color: var(--sb-blue); }
.sb-status-text-neutral { color: var(--sb-text-muted); }
.sb-server-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.sb-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.sb-stat-tile {
background: var(--sb-bg-inset);
padding: 18px;
min-width: 0;
}
.sb-stat-label {
font-size: 12px;
color: var(--sb-text-dim);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 8px;
}
.sb-stat-value {
font-family: var(--sb-font-head);
font-size: 22px;
font-weight: 800;
color: #fff;
line-height: 1.2;
overflow-wrap: anywhere;
}
.sb-stat-value small {
font-family: var(--sb-font-body);
font-size: 13px;
color: var(--sb-text-dim);
font-weight: 600;
}
/* counters */
.sb-counter-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 20px;
}
.sb-counter {
display: flex;
align-items: center;
gap: 14px;
padding: 18px 20px;
margin: 0;
color: var(--sb-text);
text-decoration: none;
transition: border-color .15s, transform .15s;
}
.sb-counter:hover {
border-color: var(--sb-green);
color: #fff;
text-decoration: none;
transform: translateY(-2px);
}
.sb-counter-icon {
width: 44px;
height: 44px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--sb-bg-accent-soft);
color: var(--sb-green-light);
font-size: 17px;
}
.sb-counter-attention .sb-counter-icon {
background: var(--sb-bg-danger-soft);
color: var(--sb-red-light);
}
.sb-counter-number {
font-family: var(--sb-font-head);
font-size: 24px;
font-weight: 800;
color: #fff;
line-height: 1;
}
.sb-counter-label {
font-size: 12.5px;
color: var(--sb-text-dim);
font-weight: 700;
margin-top: 4px;
}
/* info cards */
.sb-two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.sb-info-card {
padding: 24px;
margin: 0;
display: flex;
flex-direction: column;
}
.sb-info-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.sb-info-title {
font-size: 15px;
font-weight: 800;
color: #fff;
}
.sb-info-amount {
display: block;
font-family: var(--sb-font-head);
font-size: 26px;
font-weight: 800;
color: #fff;
line-height: 1.1;
}
.sb-info-amount:hover {
color: var(--sb-green-light);
}
.sb-info-strong {
display: block;
font-size: 14.5px;
font-weight: 700;
color: var(--sb-text);
}
a.sb-info-strong:hover {
color: #fff;
}
.sb-info-meta {
font-size: 13px;
color: var(--sb-text-dim);
font-weight: 600;
margin-top: 4px;
}
.sb-info-link {
display: inline-block;
margin-top: 16px;
font-size: 13.5px;
font-weight: 800;
color: var(--sb-blue);
}
.sb-info-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: auto;
padding-top: 4px;
}
.sb-info-actions .sb-info-link {
margin-top: 12px;
}
.sb-home-list {
display: flex;
flex-direction: column;
border-top: 1px solid var(--sb-border-soft);
margin-top: 16px;
max-height: 230px;
overflow-y: auto;
}
.sb-home-list-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--sb-border-soft);
color: var(--sb-text-muted);
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: color .12s;
}
.sb-home-list-item:hover {
color: #fff;
text-decoration: none;
}
.sb-home-list-label {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sb-home-list-date {
color: var(--sb-text-dim);
white-space: nowrap;
}
.sb-home-list .sb-badge {
font-size: 11px;
padding: 3px 8px;
}
/* upgrade banner */
.sb-upgrade-banner {
margin-top: 20px;
background: linear-gradient(135deg, var(--sb-bg-accent-soft), var(--sb-bg-card) 65%);
border: 1px solid var(--sb-border-accent);
padding: 24px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.sb-upgrade-title {
font-size: 16px;
font-weight: 800;
color: #fff;
margin-bottom: 4px;
}
.sb-upgrade-sub {
font-size: 14px;
color: var(--sb-text-muted);
}
.sb-upgrade-btn {
white-space: nowrap;
}
/* knowledgebase search card */
.sb-kb-card {
margin-top: 20px;
padding: 28px;
}
.sb-kb-title {
font-size: 18px;
font-weight: 800;
color: #fff;
margin: 0 0 16px;
text-align: center;
}
.sb-kb-input-group {
position: relative;
display: flex;
align-items: center;
background: var(--sb-bg-inset);
border: 1px solid var(--sb-border-input);
padding: 6px 6px 6px 16px;
transition: border-color .15s, box-shadow .15s;
}
.sb-kb-input-group:focus-within {
border-color: var(--sb-green);
}
.sb-kb-icon {
color: var(--sb-text-faint);
font-size: 15px;
flex-shrink: 0;
}
.sb-kb-input {
flex: 1 1 auto;
min-width: 0;
border: 0;
background: transparent;
color: var(--sb-text);
font-family: var(--sb-font-body);
font-size: 15px;
font-weight: 600;
padding: 10px 12px;
outline: none;
}
.sb-kb-input::placeholder {
color: var(--sb-text-faint);
font-weight: 500;
}
.sb-kb-btn {
flex-shrink: 0;
padding: 11px 22px;
}
.sb-addon-panel {
margin-top: 20px;
}
.sb-addon-panel > *:last-child {
margin-bottom: 0;
}
/* account credit panel in the home sidebar (sb2026_home_credit.php) */
#main-body .sb-credit-side {
padding: 2px 0 0;
}
#main-body .sb-credit-side-balance {
font-family: var(--sb-font-head);
font-size: 26px;
font-weight: 800;
color: #fff;
margin-bottom: 10px;
}
#main-body .sb-credit-side p {
font-size: 12.5px;
line-height: 1.5;
color: var(--sb-text-dim);
margin: 0 0 8px;
}
#main-body .sb-credit-side a {
color: var(--sb-blue);
font-weight: 700;
}
#main-body .sb-credit-side-btn {
font-weight: 800;
}
/* ==========================================================================
6. AUTH PAGES: login, password reset, register
========================================================================== */
.sb-login {
display: flex;
justify-content: center;
padding: 24px 0 40px;
}
.sb-login-card {
display: grid;
grid-template-columns: 1.05fr 1fr;
width: 100%;
max-width: 1040px;
min-height: 600px;
background: var(--sb-bg-card);
border: 1px solid var(--sb-border);
overflow: hidden;
box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
}
.sb-pwreset .sb-login-card {
max-width: 900px;
min-height: 460px;
}
.sb-login-visual {
position: relative;
display: flex;
align-items: flex-end;
background:
url('../img/slime.webp') no-repeat right -60px bottom -70px / 360px auto,
linear-gradient(135deg, var(--sb-bg-accent-soft), var(--sb-bg-card) 60%);
border-right: 1px solid var(--sb-border-soft);
}
.sb-pwreset .sb-login-visual {
background:
url('../img/draak.webp') no-repeat right 16px top 60px / 340px auto,
linear-gradient(135deg, var(--sb-bg-accent-soft), var(--sb-bg-card) 60%);
}
.sb-login-visual::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(20, 20, 20, 0) 40%, rgba(20, 20, 20, .85) 100%);
pointer-events: none;
}
.sb-login-visual-content {
position: relative;
padding: 48px 44px;
color: #fff;
}
.sb-login-visual-content h2 {
font-size: 34px;
font-weight: 800;
margin: 0 0 10px;
color: #fff;
}
.sb-login-visual-content p {
font-size: 15px;
line-height: 1.6;
color: var(--sb-text-muted);
margin: 0;
max-width: 380px;
}
.sb-login-panel {
display: flex;
flex-direction: column;
justify-content: center;
padding: 52px 56px;
}
.sb-login-panel h1,
.sb-login-panel .h3 {
font-size: 28px;
font-weight: 800;
color: #fff;
margin: 0 0 6px;
}
.sb-login-sub,
.sb-login-panel .text-muted {
color: var(--sb-text-dim);
font-size: 15px;
margin: 0 0 24px;
}
.sb-login-panel .form-group {
margin-bottom: 18px;
}
.sb-login-pw-row {
display: flex;
align-items: baseline;
justify-content: space-between;
}
.sb-login-forgot {
font-size: 12.5px;
color: var(--sb-blue);
font-weight: 700;
}
.sb-login-panel .input-group {
position: relative;
display: flex;
width: 100%;
}
.sb-login-panel .input-group-prepend {
position: absolute;
left: 0;
top: 0;
bottom: 0;
display: flex;
align-items: center;
padding-left: 14px;
z-index: 4;
pointer-events: none;
}
.sb-login-panel .input-group-text {
background: transparent;
border: 0;
padding: 0;
color: var(--sb-text-faint);
font-size: 14px;
}
.sb-login-panel .form-control {
width: 100%;
padding: 13px 16px 13px 40px;
font-size: 15px;
}
.sb-login-panel .input-group-append {
position: absolute;
right: 4px;
top: 0;
bottom: 0;
display: flex;
align-items: center;
z-index: 4;
}
.sb-login-panel .btn-reveal-pw {
border: 0 !important;
background: transparent !important;
color: var(--sb-text-faint) !important;
padding: 8px 10px;
}
.sb-login-panel .btn-reveal-pw:hover {
color: var(--sb-green-light) !important;
}
.sb-login-remember {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
color: var(--sb-text-muted);
font-weight: 600;
margin: 2px 0 20px;
cursor: pointer;
}
.sb-login-submit,
.sb-login-panel button[type="submit"],
.sb-login-panel input[type="submit"] {
display: flex !important;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 14px 20px !important;
font-size: 15px !important;
font-weight: 800 !important;
}
.sb-login-divider {
display: flex;
align-items: center;
gap: 14px;
margin: 24px 0 18px;
color: var(--sb-text-faint);
font-size: 12.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
}
.sb-login-divider::before,
.sb-login-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--sb-border);
}
.sb-login-panel .social-signin-btns,
.sb-login-panel .providerLinkingFeedback {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.sb-login-register {
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--sb-border);
font-size: 14px;
color: var(--sb-text-dim);
text-align: center;
}
.sb-login-register a {
color: var(--sb-blue);
font-weight: 800;
}
.sb-login-panel .alert {
margin-bottom: 18px;
}
/* password reset inner templates */
.sb-pwreset .sb-login-panel h2,
.sb-pwreset .sb-login-panel h3 {
font-size: 24px;
margin-bottom: 8px;
}
.sb-pwreset .sb-login-panel p {
color: var(--sb-text-dim);
}
/* register */
#registration {
max-width: 880px;
margin: 8px auto 48px;
}
.sb-auth-hero {
position: relative;
overflow: hidden;
background:
url('../img/slime.webp') no-repeat right -50px center / 260px auto,
linear-gradient(135deg, var(--sb-bg-accent-soft), var(--sb-bg-card) 60%);
border: 1px solid var(--sb-border-accent);
padding: 48px 44px;
margin-bottom: 24px;
color: #fff;
}
.sb-auth-hero::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(20, 20, 20, .2) 45%, rgba(20, 20, 20, .85) 100%);
pointer-events: none;
}
.sb-auth-hero-content {
position: relative;
max-width: 560px;
}
.sb-auth-hero h1 {
font-size: 32px;
font-weight: 800;
color: #fff;
margin: 0 0 8px;
}
.sb-auth-hero p {
font-size: 15px;
color: var(--sb-text-muted);
margin: 0;
}
#registration .card {
margin-bottom: 20px;
}
#registration .card-title {
font-size: 18px;
margin-bottom: 18px;
}
#registration .prepend-icon {
position: relative;
}
#registration .field-icon,
#registration .prepend-icon .field-icon {
position: absolute;
left: 14px;
top: 50%;
width: auto;
height: auto;
line-height: 1;
transform: translateY(-50%);
color: var(--sb-text-faint);
margin: 0;
z-index: 4;
pointer-events: none;
text-align: left;
}
#registration .field-icon i {
color: var(--sb-text-faint);
font-size: 14px;
}
#registration .field {
width: 100%;
height: auto;
border: 1px solid var(--sb-border-input);
border-radius: 0;
background: var(--sb-bg-inset);
color: var(--sb-text);
font-size: 14.5px;
font-weight: 600;
padding: 12px 14px;
transition: border-color .15s, box-shadow .15s;
}
#registration .prepend-icon .field {
padding-left: 40px;
}
#registration .field:focus {
border-color: var(--sb-green);
box-shadow: none;
outline: none;
}
#registration select.field,
#registration #stateselect,
#registration #inputCountry {
height: auto !important;
padding: 12px 36px 12px 40px !important;
font-size: 14.5px;
line-height: 1.5;
}
#registration .intl-tel-input {
width: 100%;
position: relative;
z-index: 30;
}
/* phone field: WHMCS's phone-input script rebuilds the without the
.field class and with its own 36px height and 13px font, so it ended up
smaller than the other fields; give it the same metrics everywhere */
.intl-tel-input input.form-control,
#registration .intl-tel-input input.form-control,
body #order-standard_cart .intl-tel-input input.form-control,
#main-body .intl-tel-input input.form-control {
height: auto !important;
min-height: 0 !important;
font-size: 14.5px !important;
line-height: 1.5 !important;
padding: 12px 14px 12px 84px !important;
}
#registration .intl-tel-input .country-list {
z-index: 60;
max-height: 260px;
}
#registration .form-group:has(.intl-tel-input) {
position: relative;
z-index: 30;
}
#registration .card,
#registration .card-body {
overflow: visible !important;
}
#registration #inputStateIcon {
display: block !important;
}
#registration input[type="submit"] {
font-size: 15px;
font-weight: 800;
padding: 14px 56px;
}
#registration .sub-heading {
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 18px;
color: var(--sb-text-faint) !important;
font-size: 12.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
border: 0;
text-align: center;
}
#registration .sub-heading::before,
#registration .sub-heading::after {
content: '';
flex: 1;
height: 1px;
background: var(--sb-border);
}
#registration .sub-heading span {
background: transparent !important;
color: var(--sb-text-faint) !important;
padding: 0;
}
#registration .social-signin-btns {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-bottom: 24px;
}
#registration .form-check {
font-size: 14px;
color: var(--sb-text-muted);
}
#registration .form-check a {
color: var(--sb-blue);
font-weight: 800;
}
.sb-register-login {
margin-top: 10px;
padding-top: 20px;
border-top: 1px solid var(--sb-border);
font-size: 14px;
color: var(--sb-text-dim);
text-align: center;
}
.sb-register-login a {
color: var(--sb-blue);
font-weight: 800;
}
/* the leftover "already registered?" sidebar squeezed the hero; the page's
own footer link covers it */
#main-body .row > .col-lg-4.col-xl-3:has(+ .primary-content #registration) {
display: none;
}
#main-body .row:has(#registration) > .primary-content {
flex: 0 0 100%;
max-width: 100%;
}
/* company toggle (register + checkout) */
.sb-hide {
display: none !important;
}
.sb-company-toggle {
display: flex;
align-items: center;
gap: 10px;
margin: 2px 0 16px;
cursor: pointer;
font-size: 14px;
font-weight: 700;
color: var(--sb-text);
text-align: left;
}
.sb-company-toggle input {
margin: 0;
flex-shrink: 0;
}
/* theme.css styles "#registration label" as a dim field label; the toggle
is a real choice and must read as one */
#registration .sb-company-toggle,
body #order-standard_cart .sb-company-toggle {
font-size: 14.5px;
font-weight: 700;
color: var(--sb-text);
margin: 4px 0 18px;
}
/* social sign-in buttons (linkedaccounts include) */
.social-signin-btns .btn,
.btn-social {
background: var(--sb-bg-inset) !important;
border: 1px solid var(--sb-border-strong) !important;
color: var(--sb-text) !important;
}
.social-signin-btns .btn:hover {
border-color: var(--sb-green) !important;
}
/* reCAPTCHA badge: hidden, the attribution text lives on the auth pages */
.grecaptcha-badge {
visibility: hidden !important;
}
/* ==========================================================================
7. CLIENT AREA PAGES
========================================================================== */
/* --- tickets --- */
.sb-tickets-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.sb-tickets-head .sb-page-sub {
margin: 6px 0 16px;
}
.sb-dept-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px;
}
.sb-dept-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
padding: 26px 20px;
background: var(--sb-bg-inset);
border: 1px solid var(--sb-border);
color: var(--sb-text);
text-decoration: none;
transition: border-color .15s, transform .15s, box-shadow .15s;
}
.sb-dept-card:hover {
border-color: var(--sb-green);
color: #fff;
text-decoration: none;
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
}
.sb-dept-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: var(--sb-bg-accent-soft);
color: var(--sb-green-light);
font-size: 20px;
margin-bottom: 4px;
}
.sb-dept-name {
font-family: var(--sb-font-head);
font-size: 16px;
font-weight: 800;
color: #fff;
}
.sb-dept-desc {
font-size: 13px;
color: var(--sb-text-dim);
}
.sb-dept-empty {
grid-column: 1 / -1;
}
/* ticket view */
.view-ticket .btn,
.md-header .btn,
.btn-toolbar .btn {
border-radius: 0 !important;
}
.ticket-sidebar-footer.card-footer {
padding: 0 !important;
}
.ticket-sidebar-footer .btn-group,
.ticket-sidebar-footer > .btn-group {
display: flex !important;
width: 100% !important;
margin: 0 !important;
}
.ticket-sidebar-footer .btn {
flex: 1 1 50%;
padding: 12px 8px;
font-size: 13px;
white-space: nowrap;
margin: 0 !important;
}
#main-body .ticket-sidebar-footer .row {
display: flex !important;
flex-wrap: nowrap !important;
width: 100%;
margin: 0 !important;
gap: 0;
}
#main-body .ticket-sidebar-footer .row > [class*="col-"] {
flex: 1 1 0;
max-width: none;
width: auto !important;
padding: 0 !important;
margin: 0 !important;
}
#main-body .ticket-sidebar-footer .btn {
width: 100% !important;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
#main-body .ticket-sidebar-footer #containerAddCcEmail {
display: flex;
flex-direction: column;
width: 100%;
}
#main-body .ticket-sidebar-footer #inputAddCcEmail {
width: 100%;
padding: 10px 12px;
font-size: 13.5px;
}
#main-body .ticket-sidebar-footer .input-group-append,
#main-body .ticket-sidebar-footer .input-group-btn {
width: 100%;
display: block;
}
#main-body .ticket-sidebar-footer #btnAddCcEmail {
width: 100% !important;
min-height: 42px;
}
.ticket-reply,
.ticket-details,
.ticket-details-children {
color: var(--sb-text);
}
.ticket-reply .card-header,
.ticket-reply .card-body {
background: var(--sb-bg-card) !important;
}
.ticket-reply.staff-reply,
.ticket-reply.operator-reply {
border-left: 3px solid var(--sb-green);
}
.ticket-reply .name {
color: #fff;
font-weight: 800;
}
.ticket-reply .date {
color: var(--sb-text-dim);
}
.ticket-reply .attachments {
border-top: 1px solid var(--sb-border);
}
.ticket-reply-message,
.ticket-reply .message {
color: var(--sb-text);
}
.ticket-reply .message pre,
.ticket-reply .message code {
background: var(--sb-bg-dark);
}
#main-body .label[class*="requestor-type-"],
#main-body .ticket-details-children .label {
display: inline-block;
padding: 3px 10px;
font-size: 11px;
font-weight: 800;
}
/* markdown editor (ticket reply / submit) */
.markdown-editor,
#main-body textarea.markdown-editor {
background: var(--sb-bg-inset) !important;
border: 1px solid var(--sb-border-input) !important;
color: var(--sb-text) !important;
}
.md-editor {
border: 1px solid var(--sb-border-input);
background: var(--sb-bg-inset);
}
.md-editor > .md-header,
.md-editor .md-footer {
background: var(--sb-bg-dark);
border-color: var(--sb-border);
}
.md-editor > textarea {
background: var(--sb-bg-inset);
color: var(--sb-text);
border-top: 1px solid var(--sb-border);
}
.md-editor.active {
border-color: var(--sb-green);
}
.md-editor .btn-default,
.md-editor .btn-sm {
background: transparent !important;
border-color: transparent !important;
color: var(--sb-text-dim) !important;
}
.md-editor .btn-default:hover {
color: #fff !important;
}
.md-editor .md-preview {
background: var(--sb-bg-card);
color: var(--sb-text);
}
.CodeMirror {
background: var(--sb-bg-inset);
color: var(--sb-text);
}
.CodeMirror-cursor {
border-left-color: var(--sb-text);
}
.CodeMirror-gutters {
background: var(--sb-bg-dark);
border-right-color: var(--sb-border);
}
.attachment-row,
#fileUploadsContainer .input-group {
margin-bottom: 8px;
}
#main-body #btnTicketAttachmentsAdd {
border-radius: 0 !important;
}
.custom-file-label {
background: var(--sb-bg-inset);
border: 1px solid var(--sb-border-input);
color: var(--sb-text-dim);
border-radius: 0;
}
.custom-file-label::after {
background: var(--sb-bg-dark);
color: var(--sb-text);
border-left: 1px solid var(--sb-border-input);
border-radius: 0;
}
input[type="file"].form-control {
padding: 8px 14px;
}
input[type="file"]::file-selector-button {
background: var(--sb-bg-dark);
color: var(--sb-text);
border: 1px solid var(--sb-border-strong);
padding: 6px 12px;
margin-right: 10px;
font-weight: 700;
cursor: pointer;
}
/* ticket feedback and department select */
.ticket-feedback .btn-group .btn {
background: var(--sb-bg-inset) !important;
color: var(--sb-text) !important;
}
/* --- invoices --- */
.sb-doc-logo {
height: 30px;
width: auto;
display: inline-block;
}
.invoice-container {
background: var(--sb-bg-card);
border: 1px solid var(--sb-border);
padding: 28px 28px 20px;
color: var(--sb-text);
max-width: 1060px;
margin: 0 auto 16px;
}
.invoice-container h1,
.invoice-container h2,
.invoice-container h3,
.invoice-container h4 {
color: #fff;
}
.invoice-container .small-text,
.invoice-container .invoice-date,
.invoice-container address,
.invoice-container p,
.invoice-container .text-muted {
color: var(--sb-text-muted);
}
.invoice-container hr {
border-top-color: var(--sb-border);
}
.invoice-container .card-header.bg-info,
.invoice-container .card-header.bg-info h3,
#main-body .card-header.bg-info .card-subtitle,
#main-body .card-header.bg-info .card-subtitle strong,
#main-body .card-header.bg-info .card-title {
background: var(--sb-bg-dark) !important;
color: #fff !important;
}
#main-body .invoice-status span {
display: inline-block;
padding: 8px 20px;
font-family: var(--sb-font-head);
font-size: 16px;
font-weight: 800;
line-height: 1.3;
}
#main-body .invoice-status .unpaid,
#main-body .invoice-status .collections {
background: var(--sb-bg-danger-soft);
color: var(--sb-red-light) !important;
}
#main-body .invoice-status .paid {
background: var(--sb-bg-accent-soft);
color: var(--sb-green-light) !important;
}
#main-body .invoice-status .refunded,
#main-body .invoice-status .cancelled,
#main-body .invoice-status .draft {
background: var(--sb-bg-inset);
color: var(--sb-text-dim) !important;
}
#main-body .payment-btn-container input[type="submit"],
#main-body .payment-btn-container .btn {
background: var(--sb-green) !important;
border: 0 !important;
color: #fff !important;
font-weight: 800;
font-size: 14.5px;
padding: 12px 28px;
cursor: pointer;
}
#main-body .payment-btn-container input[type="submit"]:hover {
background: var(--sb-green-hover) !important;
}
#main-body .payment-btn-container .btn:hover {
--sb-slide-color: var(--sb-green-hover);
background: var(--sb-green) !important;
}
#main-body .sb-pay-hint {
font-weight: 800;
font-size: 13.5px;
color: var(--sb-text);
margin: 8px 0 6px;
}
#main-body .sb-credit-row {
display: flex;
gap: 8px;
max-width: 420px;
margin: 14px auto 0;
}
#main-body .sb-credit-row .form-control {
flex: 1 1 auto;
min-width: 0;
}
#main-body .sb-credit-row .btn {
white-space: nowrap;
flex: 0 0 auto;
}
#main-body .btn-group.d-print-none .btn {
border-radius: 0 !important;
}
.invoice-container .table > tbody > tr.total > td,
.invoice-container tr.total td {
color: #fff;
font-weight: 800;
}
.invoice-container .transactions-container {
color: var(--sb-text);
}
#main-body a[href*="whmcs.com"] {
color: var(--sb-text-faint) !important;
}
/* unpaid invoice banner button on service/domain details */
#main-body .sb-pay-invoice-btn {
font-size: 13.5px;
font-weight: 800;
padding: 9px 18px;
white-space: nowrap;
}
/* masspay, add funds, quotes */
.masspay-summary,
.addfunds-summary {
background: var(--sb-bg-inset);
padding: 16px;
}
/* --- services (product details) --- */
/* service overview: the dashboard service card on the details page */
.sb-service-card {
margin-bottom: 24px;
}
.sb-service-card .sb-server-actions {
flex-wrap: wrap;
justify-content: flex-end;
}
.sb-service-stats {
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.sb-stat-tile-alert .sb-stat-value {
color: var(--sb-red-light);
}
.sb-btn-danger {
--sb-slide-color: #c43c3c;
background: var(--sb-red);
color: #fff;
border-color: var(--sb-red);
}
.sb-btn-danger:hover,
.sb-btn-danger:focus {
border-color: #c43c3c;
color: #fff;
}
.sb-btn.disabled {
opacity: .45;
pointer-events: none;
}
#main-body .product-details .product-status:not(.product-status-terminated) {
background: var(--sb-bg-inset) !important;
border: 1px solid var(--sb-border);
overflow: hidden;
}
#main-body .product-details .product-icon {
padding: 24px 16px 14px;
}
#main-body .product-details .product-status:not(.product-status-terminated) .product-icon .fa-stack-2x,
.fa-stack .fa-circle {
color: var(--sb-green);
}
.fa-stack .fa-inverse {
color: #fff !important;
}
#main-body .product-details .product-status .product-icon h3 {
color: #fff;
font-weight: 800;
font-size: 20px;
margin: 12px 0 2px;
}
#main-body .product-details .product-status .product-icon h4 {
color: var(--sb-text-dim);
font-size: 14px;
margin: 0 0 4px;
}
#main-body .product-details .product-status:not(.product-status-terminated) .product-status-text {
background: var(--sb-green);
color: #fff;
font-weight: 800;
font-size: 12.5px;
letter-spacing: .06em;
text-transform: uppercase;
padding: 9px 8px;
}
#main-body .product-details .product-status-suspended .product-status-text,
#main-body .product-details .product-status-pending .product-status-text {
background: var(--sb-amber) !important;
color: #1a1a1a !important;
}
#main-body .product-details .product-status-terminated,
#main-body .product-details .product-status-cancelled {
background: var(--sb-bg-danger-soft) !important;
border: 1px solid #5a2f2f;
}
#main-body .product-details .product-status-terminated .product-status-text,
#main-body .product-details .product-status-cancelled .product-status-text {
background: var(--sb-red);
color: #fff;
text-transform: uppercase;
font-weight: 800;
padding: 9px 8px;
}
#main-body .product-details img {
border-radius: 0;
}
.product-details .product-actions-wrapper .btn {
margin-bottom: 8px;
}
#main-body .sb-upgrade-locked {
opacity: .45;
cursor: not-allowed;
position: relative;
pointer-events: auto !important;
}
#main-body .sb-upgrade-locked:hover::after {
content: attr(data-locked-note);
position: absolute;
left: 14px;
top: calc(100% - 4px);
z-index: 60;
background: #000;
color: #fff;
font-size: 12.5px;
font-weight: 600;
line-height: 1.45;
padding: 8px 12px;
width: max-content;
max-width: 250px;
white-space: normal;
box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
pointer-events: none;
}
/* services list: SSL/price columns, view filter buttons */
.view-filter-btns .list-group-item {
background: var(--sb-bg-card);
}
/* product usage stats, disk/bandwidth bars */
.usage-stats .progress {
height: 8px;
}
/* --- domains --- */
#main-body .btn-group .setBulkAction,
#main-body .btn-group:has(.setBulkAction) .btn {
border-radius: 0 !important;
}
.domain-details .nav-tabs {
margin-bottom: 20px;
}
/* domain search include (WHMCS homepage) */
.domain-search-container,
.domainchecker-homepage-captcha {
background: var(--sb-bg-card);
border: 1px solid var(--sb-border);
}
.domain-search-container h1,
.domain-search-container h2 {
color: #fff;
}
.domain-pricing .table-container {
border-radius: 0 !important;
}
/* domain pricing page (rp=/domain/pricing) */
#main-body .domain-pricing .bg-white {
background: var(--sb-bg-card) !important;
border-radius: 0 !important;
}
#main-body .domain-pricing .tld-filters a.badge {
font-size: 12.5px;
font-weight: 700;
padding: 8px 14px;
background: var(--sb-bg-inset) !important;
color: var(--sb-text-muted) !important;
margin: 0 4px 6px 0;
}
#main-body .domain-pricing .tld-filters a.badge-primary,
#main-body .domain-pricing .tld-filters a.badge-success,
#main-body .domain-pricing .tld-filters a.active {
background: var(--sb-green) !important;
color: #fff !important;
}
#main-body .domain-pricing .tld-pricing-header,
#main-body .domain-pricing .tld-pricing-header [class*="col-"] {
background: var(--sb-bg-dark) !important;
color: var(--sb-text-dim) !important;
border: 0 !important;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .06em;
}
#main-body .domain-pricing .tld-row {
border: 0;
border-bottom: 1px solid var(--sb-border-soft);
background: transparent;
padding: 12px 0;
color: var(--sb-text);
}
#main-body .domain-pricing .tld-row:hover {
background: var(--sb-bg-hover);
}
#main-body .domain-pricing .tld-row strong {
color: #fff;
}
#main-body .domain-pricing .tld-row small {
color: var(--sb-text-dim);
}
#main-body .domain-pricing .tld-row .two-row-center {
border-right: 0 !important;
}
#main-body .domain-pricing .featured-tld {
background: var(--sb-bg-card);
border: 1px solid var(--sb-border);
}
#main-body .domain-pricing .featured-tld .price {
background: var(--sb-bg-accent-soft) !important;
color: var(--sb-green-light) !important;
border: 0 !important;
}
/* --- affiliates --- */
#main-body .affiliate-stat {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
height: 100%;
min-height: 120px;
background: var(--sb-bg-inset);
border: 1px solid var(--sb-border);
padding: 18px 14px;
text-align: center;
color: var(--sb-text-dim);
font-size: 13px;
font-weight: 700;
}
#main-body .affiliate-stat i {
color: var(--sb-green-light);
font-size: 20px;
margin-bottom: 2px;
}
#main-body .affiliate-stat span {
font-family: var(--sb-font-head);
font-size: 26px;
font-weight: 800;
color: #fff;
line-height: 1.1;
}
#main-body table.table-rounded {
background: var(--sb-bg-inset);
border: 1px solid var(--sb-border);
border-collapse: separate;
border-spacing: 0;
}
#main-body table.table-rounded td {
border: 0;
border-bottom: 1px solid var(--sb-border-soft);
padding: 12px 16px;
}
#main-body table.table-rounded tr:last-child td {
border-bottom: 0;
}
/* --- user management, security, payment methods --- */
.btn-manage-permissions,
.btn-remove-user,
.btn-set-default,
a[data-role="edit-payment-method"] {
border-radius: 0 !important;
}
#main-body .label {
display: inline-block;
padding: 4px 10px;
font-weight: 800;
font-size: 11.5px;
}
.two-factor-auth .card,
.linked-accounts .card {
background: var(--sb-bg-inset);
}
.security-question,
.user-invite {
color: var(--sb-text);
}
.paymethod-card,
.existing-cc-grid .card {
background: var(--sb-bg-inset);
border-color: var(--sb-border);
}
#main-body p.text-center > a.btn.btn-default,
#main-body p.text-center > input[type="reset"].btn {
border-radius: 0 !important;
}
/* --- knowledgebase, downloads, announcements --- */
.primary-content .card.kb-category,
.kb-article-item,
.download-item {
background: var(--sb-bg-card);
border: 1px solid var(--sb-border);
border-radius: 0 !important;
}
.primary-content .card.kb-category:hover {
border-color: var(--sb-green);
}
.kb-category h4,
.kb-category .card-title {
color: #fff;
}
.kb-article-content,
.kb-article-body {
color: var(--sb-text);
}
.kb-article-content a {
color: var(--sb-blue);
}
.kb-article-content img {
border: 1px solid var(--sb-border);
}
.kb-tags a,
.kb-tags .badge {
background: var(--sb-bg-inset) !important;
color: var(--sb-text-muted) !important;
}
.kb-tags .badge-primary {
background: var(--sb-bg-accent-soft) !important;
color: var(--sb-green-light) !important;
}
.announcement-single,
.announcement-item {
border-bottom: 1px solid var(--sb-border);
color: var(--sb-text);
}
.announcement-single h3 a,
.announcement-item h3 a {
color: #fff;
}
.announcement-single .date,
.announcement-item .date {
color: var(--sb-text-dim);
}
.announcement-single .social-share a {
color: var(--sb-text-dim);
}
/* --- network status --- */
.network-issues .card,
.network-issue {
background: var(--sb-bg-card);
}
.network-issue-info .badge {
font-size: 11.5px;
}
/* --- contact, error pages, 2FA, misc --- */
.error-page,
.error {
color: var(--sb-text);
}
.error-page h1,
.error h1 {
color: #fff;
}
.error .fas.fa-exclamation-circle,
[class*="error"] .fas.fa-exclamation-circle {
color: var(--sb-red-light) !important;
}
.two-factor-challenge .card {
background: var(--sb-bg-inset);
}
.backup-code,
.two-factor-backup-code {
background: var(--sb-bg-dark);
color: var(--sb-green-light);
border: 1px solid var(--sb-border);
font-family: monospace;
padding: 10px 14px;
}
.qr-code img {
background: #fff;
padding: 8px;
}
/* upgrade / downgrade page */
.upgrade-products .card,
.upgrade-option {
background: var(--sb-bg-inset);
border: 1px solid var(--sb-border);
}
.upgrade-option.selected,
.upgrade-products .card.selected {
border-color: var(--sb-green);
}
/* WHMCS homepage (index.php) and Sitejet panel */
.homepage-panels .card,
.sitejet-panel .card {
background: var(--sb-bg-card);
}
/* MarketConnect store landing pages: light-touch dark treatment */
.store-page,
.store-page .container,
#store-landing {
color: var(--sb-text);
}
.store-page .card,
.store-page .panel,
.store-page .pricing-box,
.store-page .product-box {
background: var(--sb-bg-card);
border-color: var(--sb-border);
color: var(--sb-text);
}
.store-page h1,
.store-page h2,
.store-page h3,
.store-page h4 {
color: #fff;
}
.store-page .bg-white,
.store-page .bg-light {
background: var(--sb-bg-card) !important;
}
/* dedicated server manager */
#dServermanagerApp .btn,
#dServermanagerApp .btn-group {
border-radius: 0 !important;
}
/* generic form action buttons keep sharp corners */
#main-body .card-body input[type="submit"].btn,
#main-body .card-body button[type="submit"].btn,
#main-body .card-body input[type="reset"].btn,
#main-body .form-group.text-center .btn {
border-radius: 0 !important;
}
/* panel/card footers: flex rows, no floats */
#main-body .panel-footer,
#main-body .card-footer {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
#main-body .panel-footer .btn,
#main-body .card-footer .btn {
float: none !important;
margin: 0 !important;
flex: 1 1 auto;
white-space: nowrap;
}
#main-body .panel-footer::before,
#main-body .panel-footer::after,
#main-body .card-footer::before,
#main-body .card-footer::after {
display: none !important;
content: none !important;
}
#main-body .card-sidebar .card-footer,
#main-body .panel-sidebar .panel-footer {
flex-direction: column;
align-items: stretch;
}
#main-body .card-sidebar .card-footer > *,
#main-body .panel-sidebar .panel-footer > * {
flex: 1 1 auto;
min-width: 0;
float: none !important;
width: auto !important;
padding: 0 !important;
margin: 0 !important;
}
#main-body .card-sidebar .card-footer .btn,
#main-body .panel-sidebar .panel-footer .btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100% !important;
min-height: 42px;
white-space: normal;
}
/* ==========================================================================
8. ORDER FORM PAGES (templates/orderforms/sb2026_cart)
========================================================================== */
body #order-standard_cart {
color: var(--sb-text);
font-family: var(--sb-font-body);
}
body #order-standard_cart .cart-sidebar {
display: none !important;
}
body #order-standard_cart .cart-body {
float: none !important;
width: 100% !important;
}
body #order-standard_cart .header-lined h1 {
color: #fff;
border-bottom: 1px solid var(--sb-border);
font-size: 28px;
}
body #order-standard_cart .panel,
body #order-standard_cart .card {
background: var(--sb-bg-card);
border: 1px solid var(--sb-border);
box-shadow: none;
}
body #order-standard_cart .panel-heading,
body #order-standard_cart .panel-footer {
background: var(--sb-bg-dark);
border-color: var(--sb-border);
color: #fff;
}
/* Section headings on the order form (checkout, domains). The stock
standard_cart all.min.css draws these as a 0-height rule with the text
lifted onto the line, and it loads after this file with the same
specificity, so the rules below carry "body" to win: a left-aligned
Poppins title with a quiet line underneath instead of through it. */
body #order-standard_cart .sub-heading,
body #order-standard_cart .sub-heading-borderless {
height: auto;
border: 0;
border-bottom: 1px solid var(--sb-border);
margin: 26px 0 18px;
padding: 0 0 12px;
text-align: left;
line-height: 1.3;
}
body #order-standard_cart .sub-heading-borderless {
border-bottom: 0;
padding-bottom: 0;
}
body #order-standard_cart .sub-heading::before,
body #order-standard_cart .sub-heading::after,
body #order-standard_cart .sub-heading-borderless::before,
body #order-standard_cart .sub-heading-borderless::after {
display: none;
content: none;
}
body #order-standard_cart .sub-heading span,
body #order-standard_cart .sub-heading .primary-bg-color,
body #order-standard_cart .sub-heading-borderless span {
display: inline-block;
position: static;
top: auto;
background: transparent !important;
color: #fff !important;
font-family: var(--sb-font-head);
font-size: 18px;
font-weight: 800;
padding: 0 !important;
border-radius: 0 !important;
}
body #order-standard_cart .sub-heading small,
body #order-standard_cart .sub-heading i {
font-size: 13px;
font-weight: 400;
color: var(--sb-text-dim) !important;
}
body #order-standard_cart .sub-heading-borderless span {
color: var(--sb-text-faint) !important;
font-family: var(--sb-font-body);
font-size: 12.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
}
body #order-standard_cart .field,
body #order-standard_cart .form-control,
body #order-standard_cart select.form-control,
body #order-standard_cart .intl-tel-input input.form-control {
width: 100%;
height: auto;
border: 1px solid var(--sb-border-input) !important;
border-radius: 0 !important;
/* longhand on purpose: the shorthand would wipe the select chevron
(background-image) set by the generic select rule */
background-color: var(--sb-bg-inset) !important;
color: var(--sb-text) !important;
font-size: 14.5px;
font-weight: 600;
padding: 12px 14px;
box-shadow: none !important;
transition: border-color .15s, box-shadow .15s;
}
body #order-standard_cart .field:focus,
body #order-standard_cart .form-control:focus {
border-color: var(--sb-green) !important;
box-shadow: none !important;
outline: none;
}
body #order-standard_cart .prepend-icon {
position: relative;
}
body #order-standard_cart .prepend-icon .field,
body #order-standard_cart .prepend-icon select.form-control {
padding-left: 40px;
}
body #order-standard_cart .prepend-icon .field-icon,
body #order-standard_cart .field-icon {
position: absolute !important;
left: 14px !important;
top: 50% !important;
width: auto !important;
height: auto !important;
line-height: 1 !important;
transform: translateY(-50%) !important;
color: var(--sb-text-faint) !important;
margin: 0 !important;
text-align: left !important;
z-index: 4;
pointer-events: none;
}
body #order-standard_cart .prepend-icon .field-icon i {
font-size: 14px;
color: var(--sb-text-faint);
}
body #order-standard_cart .intl-tel-input input.form-control {
padding-left: 84px;
}
body #order-standard_cart .intl-tel-input {
width: 100%;
position: relative;
z-index: 30;
}
body #order-standard_cart .intl-tel-input .country-list {
z-index: 60;
max-height: 260px;
}
body #order-standard_cart label {
color: var(--sb-text-dim);
}
body #order-standard_cart .field-help-text {
color: var(--sb-text-dim);
font-size: 12.5px;
}
body #order-standard_cart .alert {
border-radius: 0;
}
body #order-standard_cart .btn {
border-radius: 0 !important;
}
body #order-standard_cart .btn-primary,
body #order-standard_cart .btn-success {
background: var(--sb-green) !important;
border-color: var(--sb-green) !important;
color: #fff !important;
}
body #order-standard_cart .btn-primary:hover,
body #order-standard_cart .btn-success:hover {
--sb-slide-color: var(--sb-green-hover);
background: var(--sb-green) !important;
border-color: var(--sb-green-hover) !important;
}
body #order-standard_cart .btn-default {
background: var(--sb-bg-inset) !important;
border-color: var(--sb-border-strong) !important;
color: var(--sb-text) !important;
}
body #order-standard_cart .btn-default:hover {
border-color: var(--sb-green) !important;
color: #fff !important;
}
body #order-standard_cart .label {
padding: 4px 10px;
}
body #order-standard_cart .account {
background: var(--sb-bg-inset);
border: 1px solid var(--sb-border);
color: var(--sb-text);
}
body #order-standard_cart .account.active {
border-color: var(--sb-green);
}
body #order-standard_cart .account .address {
color: var(--sb-text-muted);
}
body #order-standard_cart .account strong {
color: #fff;
}
body #order-standard_cart .account-select-container .account.border-bottom {
border-color: var(--sb-border) !important;
}
body #order-standard_cart .checkout-security-msg {
background: var(--sb-bg-inset);
border: 1px solid var(--sb-border);
color: var(--sb-text-dim);
}
body #order-standard_cart .checkout-security-msg i {
color: var(--sb-green-light);
}
/* sliders on the configure page */
body #order-standard_cart .irs-bar,
body #order-standard_cart .irs-bar-edge {
background: var(--sb-green) !important;
border-color: var(--sb-green) !important;
}
body #order-standard_cart .irs-line {
background: var(--sb-bg-inset) !important;
border-color: var(--sb-border) !important;
}
body #order-standard_cart .irs-single,
body #order-standard_cart .irs-from,
body #order-standard_cart .irs-to {
background: var(--sb-green) !important;
color: #fff !important;
}
body #order-standard_cart .irs-single::after,
body #order-standard_cart .irs-from::after,
body #order-standard_cart .irs-to::after {
border-top-color: var(--sb-green) !important;
}
body #order-standard_cart .irs-min,
body #order-standard_cart .irs-max,
body #order-standard_cart .irs-grid-text {
color: var(--sb-text-dim);
background: transparent;
}
body #order-standard_cart .irs-slider {
border: 2px solid var(--sb-green) !important;
background: #fff !important;
border-radius: 50%;
cursor: pointer;
width: 16px !important;
height: 16px !important;
top: 32px !important;
}
/* addon card single select: the real checkbox and iCheck skins are hidden */
body #order-standard_cart .addon-card > input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
margin: 0;
pointer-events: none;
}
body #order-standard_cart .addon-card .icheckbox_square-blue,
body #order-standard_cart .addon-card .iradio_square-blue,
body #order-standard_cart .addon-card ins.iCheck-helper {
display: none !important;
}
/* --- domain pages: register, transfer, configure domains --- */
body #order-standard_cart.sb-domain-page {
max-width: 1080px;
margin: 8px auto 48px;
float: none;
}
.sb-domain-hero {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, var(--sb-bg-accent-soft), var(--sb-bg-card) 60%);
border: 1px solid var(--sb-border-accent);
padding: 52px 48px;
margin-bottom: 28px;
color: #fff;
text-align: center;
}
.sb-domain-hero h1 {
font-size: 32px;
font-weight: 800;
color: #fff;
margin: 0 0 10px;
}
.sb-domain-hero p {
font-size: 15px;
color: var(--sb-text-muted);
margin: 0 auto;
max-width: 560px;
}
.sb-domain-hero-compact {
padding: 36px 40px;
}
.sb-domain-hero-compact h1 {
font-size: 28px;
}
.sb-domain-search {
position: relative;
display: flex;
align-items: center;
gap: 8px;
max-width: 640px;
margin: 26px auto 0;
background: var(--sb-bg-inset);
border: 1px solid var(--sb-border-strong);
padding: 6px;
}
.sb-domain-search:focus-within {
border-color: var(--sb-green);
}
.sb-domain-search-icon {
position: absolute;
left: 20px;
color: var(--sb-text-faint);
font-size: 15px;
pointer-events: none;
}
body #order-standard_cart.sb-domain-page .sb-domain-search .form-control {
flex: 1;
height: 48px;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
color: var(--sb-text) !important;
font-size: 16px;
padding: 0 12px 0 40px;
}
body #order-standard_cart.sb-domain-page .sb-domain-search .btn {
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 28px;
border: 0;
background: var(--sb-green) !important;
color: #fff !important;
font-size: 15px;
font-weight: 800;
white-space: nowrap;
}
body #order-standard_cart.sb-domain-page .sb-domain-search .btn:hover {
--sb-slide-color: var(--sb-green-hover);
background: var(--sb-green) !important;
}
.sb-domain-captcha {
max-width: 640px;
margin: 18px auto 0;
background: var(--sb-bg-inset);
padding: 14px;
color: var(--sb-text);
}
body #order-standard_cart.sb-domain-page .primary-domain-header {
background: transparent;
color: #fff;
font-family: var(--sb-font-head);
font-size: 20px;
font-weight: 800;
text-align: center;
padding: 0;
margin: 0 0 14px;
border: 0;
}
body #order-standard_cart.sb-domain-page #searchDomainInfo {
background: var(--sb-bg-card);
border: 1px solid var(--sb-border);
padding: 28px 24px;
margin-bottom: 26px;
text-align: center;
font-size: 17px;
color: var(--sb-text);
}
body #order-standard_cart.sb-domain-page .domain-checker-available { color: var(--sb-green-light); font-weight: 700; }
body #order-standard_cart.sb-domain-page .domain-checker-unavailable { color: var(--sb-red-light); font-weight: 700; }
body #order-standard_cart.sb-domain-page .domain-checker-invalid { color: var(--sb-amber); font-weight: 700; }
body #order-standard_cart.sb-domain-page .domain-lookup-loader { color: var(--sb-text-dim); }
body #order-standard_cart.sb-domain-page .domain-price .price {
display: block;
font-family: var(--sb-font-head);
font-size: 26px;
font-weight: 800;
color: #fff;
margin-bottom: 12px;
}
body #order-standard_cart .btn-add-to-cart,
body #order-standard_cart .domain-contact-support {
background: var(--sb-green) !important;
border: 0 !important;
color: #fff !important;
font-weight: 800;
padding: 10px 22px;
}
body #order-standard_cart .btn-add-to-cart:hover,
body #order-standard_cart .domain-contact-support:hover {
--sb-slide-color: var(--sb-green-hover);
background: var(--sb-green) !important;
}
body #order-standard_cart .btn-add-to-cart.added::before,
body #order-standard_cart .btn-add-to-cart.unavailable::before {
display: none;
}
body #order-standard_cart .btn-add-to-cart.added,
body #order-standard_cart .btn-add-to-cart.unavailable {
background: var(--sb-bg-inset) !important;
color: var(--sb-text-dim) !important;
}
body #order-standard_cart.sb-domain-page .spotlight-tlds {
background: transparent;
border: 0;
padding: 0;
margin-bottom: 26px;
}
body #order-standard_cart.sb-domain-page .spotlight-tlds-container {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
}
body #order-standard_cart.sb-domain-page .spotlight-tld-container {
float: none;
width: auto;
flex: 1 1 150px;
max-width: 200px;
padding: 0;
}
body #order-standard_cart.sb-domain-page .spotlight-tld {
background: var(--sb-bg-card);
border: 1px solid var(--sb-border);
padding: 18px 12px 16px;
text-align: center;
font-family: var(--sb-font-head);
font-size: 22px;
font-weight: 800;
color: #fff;
height: auto;
}
body #order-standard_cart.sb-domain-page .spotlight-tld .domain-lookup-result {
margin-top: 8px;
font-family: var(--sb-font-body);
font-size: 14px;
font-weight: 700;
color: var(--sb-green-light);
}
body #order-standard_cart.sb-domain-page .spotlight-tld .btn {
font-size: 13px;
padding: 7px 14px;
margin-top: 4px;
}
body #order-standard_cart.sb-domain-page .spotlight-tld .btn.unavailable,
body #order-standard_cart.sb-domain-page .spotlight-tld .btn.invalid {
background: var(--sb-bg-inset) !important;
color: var(--sb-text-dim) !important;
border: 0 !important;
}
body #order-standard_cart.sb-domain-page .suggested-domains {
background: var(--sb-bg-card);
border: 1px solid var(--sb-border);
overflow: hidden;
margin-bottom: 26px;
}
body #order-standard_cart.sb-domain-page .suggested-domains > .card-header {
background: var(--sb-bg-dark) !important;
border-bottom: 1px solid var(--sb-border);
font-size: 15px;
font-weight: 800;
color: #fff;
padding: 16px 24px;
}
body #order-standard_cart.sb-domain-page .domain-suggestion {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
border: 0;
border-bottom: 1px solid var(--sb-border-soft);
padding: 14px 24px;
font-size: 16px;
color: var(--sb-text);
background: transparent;
}
body #order-standard_cart.sb-domain-page .domain-suggestion.w-hidden {
display: none;
}
body #order-standard_cart.sb-domain-page .domain-suggestion .domain { font-weight: 700; color: #fff; }
body #order-standard_cart.sb-domain-page .domain-suggestion .extension { font-weight: 800; color: var(--sb-green-light); }
body #order-standard_cart.sb-domain-page .domain-suggestion .actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 14px;
}
body #order-standard_cart.sb-domain-page .domain-suggestion .actions .price {
font-weight: 800;
color: #fff;
}
body #order-standard_cart.sb-domain-page .suggested-domains .card-footer {
background: var(--sb-bg-dark) !important;
border-top: 1px solid var(--sb-border);
justify-content: center;
}
body #order-standard_cart.sb-domain-page .domain-suggestions-warning {
padding: 0 24px 16px;
color: var(--sb-text-dim);
font-size: 13px;
}
body #order-standard_cart.sb-domain-page .sales-group-hot,
body #order-standard_cart.sb-domain-page .sales-group-new,
body #order-standard_cart.sb-domain-page .sales-group-sale,
body #order-standard_cart.sb-domain-page .tld-sale-group {
display: inline-block;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .04em;
padding: 3px 10px;
margin-left: 8px;
background: var(--sb-bg-warn-soft);
color: var(--sb-amber-light);
}
body #order-standard_cart.sb-domain-page .featured-tld {
background: var(--sb-bg-card);
border: 1px solid var(--sb-border);
padding: 18px;
margin-bottom: 16px;
text-align: center;
}
/* registry logos are drawn for light backgrounds (.net is navy): white tile */
body #order-standard_cart.sb-domain-page .featured-tld .img-container {
background: #fff;
padding: 14px 18px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
min-height: 90px;
}
body #order-standard_cart.sb-domain-page .featured-tld .img-container img {
max-height: 60px;
width: auto;
}
body #order-standard_cart.sb-domain-page .featured-tld .price {
background: var(--sb-bg-accent-soft) !important;
color: var(--sb-green-light) !important;
font-weight: 800;
font-size: 16px;
margin-top: 8px;
border: 0 !important;
padding: 8px 12px;
}
.sb-domain-pricing-head {
text-align: center;
margin: 8px 0 18px;
}
.sb-domain-pricing-head h4 {
font-size: 20px;
font-weight: 800;
color: #fff;
margin: 0 0 14px;
}
body #order-standard_cart.sb-domain-page .tld-filters {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
body #order-standard_cart.sb-domain-page .tld-filters a.badge {
font-size: 12.5px;
font-weight: 700;
padding: 8px 14px;
background: var(--sb-bg-inset) !important;
color: var(--sb-text-muted) !important;
}
body #order-standard_cart.sb-domain-page .tld-filters a.badge:hover {
color: #fff !important;
}
body #order-standard_cart.sb-domain-page .tld-filters a.badge-primary,
body #order-standard_cart.sb-domain-page .tld-filters a.badge-success,
body #order-standard_cart.sb-domain-page .tld-filters a.active {
background: var(--sb-green) !important;
color: #fff !important;
}
body #order-standard_cart.sb-domain-page .domain-pricing .bg-white,
body #order-standard_cart.sb-domain-page .sb-tld-table {
background: var(--sb-bg-card) !important;
border: 1px solid var(--sb-border);
border-radius: 0 !important;
overflow: hidden;
margin-bottom: 34px;
}
body #order-standard_cart.sb-domain-page .tld-pricing-header {
background: var(--sb-bg-dark);
color: var(--sb-text-dim);
font-weight: 800;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .06em;
padding: 14px 0;
border: 0;
}
body #order-standard_cart.sb-domain-page .tld-pricing-header [class*="col-"],
body #order-standard_cart.sb-domain-page .tld-pricing-header div:nth-child(odd) {
background: transparent !important;
border: 0 !important;
height: auto !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
color: var(--sb-text-dim);
}
body #order-standard_cart.sb-domain-page .tld-pricing-header .tld-column {
text-align: left;
padding-left: 24px !important;
}
body #order-standard_cart.sb-domain-page .tld-row .two-row-center {
border-right: 0 !important;
}
body #order-standard_cart.sb-domain-page .tld-row {
border: 0;
border-bottom: 1px solid var(--sb-border-soft);
padding: 12px 0;
background: transparent;
color: var(--sb-text);
transition: background .15s;
}
body #order-standard_cart.sb-domain-page .tld-row:hover {
background: var(--sb-bg-hover);
}
body #order-standard_cart.sb-domain-page .tld-row strong {
font-size: 16px;
color: #fff;
}
body #order-standard_cart.sb-domain-page .tld-row small {
color: var(--sb-text-dim);
}
body #order-standard_cart.sb-domain-page .tld-row.no-tlds {
color: var(--sb-text-dim);
}
.sb-domain-promos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.sb-domain-promo {
background: var(--sb-bg-card);
border: 1px solid var(--sb-border);
padding: 30px 28px;
text-align: center;
}
.sb-domain-promo-icon {
width: 56px;
height: 56px;
margin: 0 auto 16px;
background: var(--sb-bg-accent-soft);
color: var(--sb-green-light);
font-size: 22px;
display: flex;
align-items: center;
justify-content: center;
}
.sb-domain-promo h3 {
font-size: 20px;
font-weight: 800;
color: #fff;
margin: 0 0 10px;
}
.sb-domain-promo p {
color: var(--sb-text-dim);
font-size: 14px;
margin: 0 0 18px;
}
body #order-standard_cart.sb-domain-page .sb-domain-promo-btn {
background: var(--sb-green) !important;
color: #fff !important;
border: 0 !important;
font-weight: 800;
padding: 11px 24px;
}
body #order-standard_cart.sb-domain-page .sb-domain-promo-btn:hover {
--sb-slide-color: var(--sb-green-hover);
background: var(--sb-green) !important;
}
.sb-domain-promo-note {
margin: 14px 0 0 !important;
font-size: 12px !important;
color: var(--sb-text-faint) !important;
}
.sb-transfer-card {
max-width: 560px;
margin: 0 auto;
background: var(--sb-bg-card);
border: 1px solid var(--sb-border);
padding: 32px 32px 28px;
}
.sb-transfer-card h3 {
font-size: 20px;
font-weight: 800;
color: #fff;
margin: 0 0 20px;
}
.sb-transfer-authlabel {
display: flex !important;
align-items: center;
justify-content: space-between;
width: 100%;
}
.sb-transfer-authlabel a {
font-size: 12.5px;
font-weight: 700;
color: var(--sb-blue);
cursor: help;
}
body #order-standard_cart.sb-domain-page .sb-transfer-submit {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: 8px;
padding: 14px 20px;
font-size: 15px;
font-weight: 800;
}
.sb-transfer-note {
text-align: center;
color: var(--sb-text-faint);
font-size: 12px;
margin: 16px 0 34px;
}
/* configure domains */
.sb-conf-errors {
border: 1px solid #5a2f2f;
background: var(--sb-bg-danger-soft);
color: var(--sb-red-light);
padding: 16px 20px;
margin-bottom: 20px;
}
.sb-conf-card {
background: var(--sb-bg-card);
border: 1px solid var(--sb-border);
padding: 26px 28px;
margin-bottom: 22px;
}
.sb-conf-card-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 16px;
}
.sb-conf-card-head h3 {
font-size: 20px;
font-weight: 800;
color: #fff;
margin: 0;
}
.sb-conf-chips {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.sb-conf-chip {
display: inline-block;
padding: 5px 12px;
font-size: 12px;
font-weight: 800;
background: var(--sb-bg-inset);
color: var(--sb-text-dim);
text-decoration: none;
}
.sb-conf-chip-ok {
background: var(--sb-bg-accent-soft);
color: var(--sb-green-light);
}
.sb-conf-chip-warn {
background: var(--sb-bg-warn-soft);
color: var(--sb-amber-light);
}
a.sb-conf-chip-warn:hover {
color: #fff;
text-decoration: none;
}
.sb-conf-sub {
color: var(--sb-text-dim);
font-size: 14px;
margin: -6px 0 16px;
}
body #order-standard_cart.sb-confdomains .form-group label {
font-size: 12.5px;
font-weight: 800;
color: var(--sb-text-dim);
}
body #order-standard_cart.sb-confdomains .panel-addon {
display: flex;
flex-direction: column;
height: 100%;
border: 1px solid var(--sb-border) !important;
background: var(--sb-bg-inset);
box-shadow: none;
overflow: hidden;
cursor: pointer;
transition: border-color .15s, box-shadow .15s;
margin: 0;
}
body #order-standard_cart.sb-confdomains .panel-addon:hover {
border-color: var(--sb-green) !important;
}
body #order-standard_cart.sb-confdomains .panel-addon.panel-addon-selected {
border-color: var(--sb-green) !important;
box-shadow: 0 0 0 1px var(--sb-green) inset;
}
body #order-standard_cart.sb-confdomains .panel-addon .panel-body {
flex: 1;
padding: 16px;
font-size: 13px;
color: var(--sb-text-dim);
background: transparent;
}
body #order-standard_cart.sb-confdomains .panel-addon .panel-body label {
font-size: 14.5px;
font-weight: 800;
color: #fff;
display: flex;
align-items: flex-start;
gap: 8px;
cursor: pointer;
margin-bottom: 6px;
}
body #order-standard_cart.sb-confdomains .panel-addon .panel-price {
padding: 10px 16px;
font-weight: 800;
color: #fff;
background: var(--sb-bg-card);
border-top: 1px solid var(--sb-border);
text-align: center;
}
body #order-standard_cart.sb-confdomains .panel-addon .panel-add {
padding: 10px 16px;
background: var(--sb-green);
color: #fff;
font-weight: 800;
font-size: 13.5px;
text-align: center;
transition: background .15s;
}
body #order-standard_cart.sb-confdomains .panel-addon:hover .panel-add,
body #order-standard_cart.sb-confdomains .panel-addon.panel-addon-selected .panel-add {
background: var(--sb-green-hover);
}
.sb-conf-field {
align-items: center;
color: var(--sb-text-muted);
font-size: 14px;
}
.sb-conf-submit-row {
padding: 8px 0 12px;
}
body #order-standard_cart.sb-confdomains .sb-conf-submit {
font-size: 15px;
font-weight: 800;
padding: 14px 44px !important;
}
/* configure product > choose domain */
body #order-standard_cart .domain-selection-options {
background: var(--sb-bg-card);
border: 1px solid var(--sb-border);
overflow: hidden;
}
body #order-standard_cart .domain-selection-options .option {
padding: 16px 20px;
border-bottom: 1px solid var(--sb-border-soft);
transition: background .2s;
}
body #order-standard_cart .domain-selection-options .option:last-child {
border-bottom: 0;
}
body #order-standard_cart .domain-selection-options .option-selected,
body #order-standard_cart .domain-selection-options .option:has(input[type="radio"]:checked) {
background: var(--sb-bg-accent-soft);
}
body #order-standard_cart .domain-selection-options .option > label {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
font-size: 14.5px;
font-weight: 700;
color: var(--sb-text);
cursor: pointer;
}
body #order-standard_cart .domain-selection-options .domain-input-group {
margin-top: 1rem;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
}
body #order-standard_cart .domain-selection-options .option-selected .domain-input-group,
body #order-standard_cart .domain-selection-options .option:has(input[type="radio"]:checked) .domain-input-group {
display: block;
}
body #order-standard_cart .domain-selection-options .domain-input-group > .row {
align-items: center;
}
body #order-standard_cart .domain-selection-options .form-control,
body #order-standard_cart .domain-selection-options .input-group-text {
height: 46px;
padding: 8px 14px;
font-size: 14.5px;
}
body #order-standard_cart .domain-selection-options .input-group-text {
background: var(--sb-bg-dark);
color: var(--sb-text-dim);
border: 1px solid var(--sb-border-input);
font-weight: 700;
white-space: nowrap;
}
body #order-standard_cart .domain-selection-options .btn-primary {
margin-left: 0;
height: 46px;
padding: 0 22px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
white-space: nowrap;
}
@media (min-width: 576px) {
body #order-standard_cart .domain-selection-options .domain-input-group .col-sm-2 {
flex: 0 0 auto;
width: auto;
max-width: none;
padding-left: 1.25rem;
}
body #order-standard_cart .domain-selection-options .btn-primary {
width: auto;
}
}
@media (max-width: 575.98px) {
body #order-standard_cart .domain-selection-options .domain-input-group .col-sm-2 {
margin-top: .75rem;
}
}
/* --- checkout --- */
body #order-standard_cart.sb-checkout {
max-width: 880px;
margin: 8px auto 48px;
float: none;
padding: 0;
}
body #order-standard_cart.sb-checkout .sb-auth-hero {
margin-bottom: 20px;
}
body #order-standard_cart.sb-checkout .sb-checkout-body {
background: var(--sb-bg-card);
border: 1px solid var(--sb-border);
padding: 28px 28px 32px;
}
body #order-standard_cart.sb-checkout .sub-heading:first-of-type {
margin-top: 4px;
}
body #order-standard_cart.sb-checkout #totalDueToday {
background: var(--sb-bg-accent-soft);
border: 1px solid var(--sb-border-accent);
color: var(--sb-green-light);
font-weight: 800;
font-size: 16px;
}
body #order-standard_cart.sb-checkout #btnCompleteOrder {
font-size: 15px;
font-weight: 800;
padding: 14px 44px;
}
.sb-order-items {
border: 1px solid var(--sb-border);
overflow: hidden;
margin-bottom: 22px;
}
.sb-order-item {
padding: 14px 16px;
border-bottom: 1px solid var(--sb-border-soft);
}
.sb-order-item-main {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.sb-order-item-name {
font-weight: 800;
color: #fff;
font-size: 15px;
}
.sb-order-item-price {
flex-shrink: 0;
font-weight: 800;
color: #fff;
font-size: 15px;
text-align: right;
}
.sb-order-item-price small {
display: block;
font-weight: 600;
font-size: 12px;
color: var(--sb-text-dim);
}
.sb-order-item-meta {
color: var(--sb-text-dim);
font-size: 13px;
margin-top: 2px;
}
.sb-order-item-sub {
color: var(--sb-text-muted);
font-size: 12.5px;
margin-top: 4px;
display: flex;
justify-content: space-between;
gap: 10px;
}
.sb-order-totals {
background: var(--sb-bg-inset);
padding: 12px 16px;
}
.sb-order-total-row {
display: flex;
justify-content: space-between;
gap: 12px;
color: var(--sb-text-muted);
font-size: 14px;
font-weight: 600;
padding: 3px 0;
}
.sb-order-total-row-final {
border-top: 1px solid var(--sb-border);
margin-top: 6px;
padding-top: 9px;
color: #fff;
font-weight: 800;
font-size: 16px;
}
.sb-order-total-row-discount,
.sb-order-total-row-discount span:last-child {
color: var(--sb-red-light);
}
body #order-standard_cart.sb-checkout .sb-account-toggle {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 6px;
}
body #order-standard_cart.sb-checkout .sb-account-toggle p {
margin: 0;
color: var(--sb-text-dim);
font-size: 14px;
flex: 1 1 260px;
}
body #order-standard_cart.sb-checkout .sb-account-toggle-btns {
flex-shrink: 0;
}
body #order-standard_cart.sb-checkout .sb-account-toggle-btns .btn {
background: var(--sb-bg-inset) !important;
border: 1px solid var(--sb-border-strong) !important;
color: var(--sb-text) !important;
font-weight: 800;
font-size: 13.5px;
padding: 10px 18px;
white-space: nowrap;
}
body #order-standard_cart.sb-checkout .sb-account-toggle-btns .btn:hover {
border-color: var(--sb-green) !important;
color: #fff !important;
}
body #order-standard_cart.sb-checkout .sb-pay-methods {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 14px 0 4px;
text-align: left;
}
body #order-standard_cart.sb-checkout .sb-pay-method {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
padding: 12px 14px;
border: 1px solid var(--sb-border-strong);
background: var(--sb-bg-inset);
cursor: pointer;
font-weight: 400;
color: var(--sb-text);
transition: border-color .15s, background .15s, box-shadow .15s;
}
body #order-standard_cart.sb-checkout .sb-pay-method:hover {
border-color: var(--sb-green);
}
body #order-standard_cart.sb-checkout .sb-pay-method .iradio_square-blue,
body #order-standard_cart.sb-checkout .sb-pay-method input.payment-methods {
position: absolute !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
overflow: hidden;
pointer-events: none;
margin: 0;
}
body #order-standard_cart.sb-checkout .sb-pay-method:has(input:checked) {
border-color: var(--sb-green);
background: var(--sb-bg-accent-soft);
box-shadow: 0 0 0 1px var(--sb-green) inset;
}
body #order-standard_cart.sb-checkout .sb-pay-logo {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 4px;
min-width: 40px;
height: 28px;
background: #fff;
padding: 3px 5px;
}
body #order-standard_cart.sb-checkout .sb-pay-logo:empty,
body #order-standard_cart.sb-checkout .sb-pay-logo:has(img[style*="display: none"]) {
display: none;
}
body #order-standard_cart.sb-checkout .sb-pay-logo img {
max-height: 22px;
max-width: 40px;
display: block;
}
body #order-standard_cart.sb-checkout .sb-pay-text {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
flex: 1 1 auto;
}
body #order-standard_cart.sb-checkout .sb-pay-name {
font-weight: 800;
font-size: 14px;
color: #fff;
}
body #order-standard_cart.sb-checkout .sb-pay-fee {
font-size: 12.5px;
color: var(--sb-text-dim);
}
body #order-standard_cart.sb-checkout .sb-pay-check {
flex: 0 0 auto;
font-size: 18px;
color: var(--sb-border-strong);
transition: color .15s;
}
body #order-standard_cart.sb-checkout .sb-pay-method:has(input:checked) .sb-pay-check {
color: var(--sb-green-light);
}
body #order-standard_cart.sb-checkout #wsservicesfee {
display: none !important;
}
body #order-standard_cart.sb-checkout .marketing-email-optin {
background: none;
border: 0;
padding: 0;
margin: 0 0 4px;
}
body #order-standard_cart.sb-checkout .checkbox-inline,
body #order-standard_cart.sb-checkout .radio {
color: var(--sb-text-muted);
font-weight: 600;
}
body #order-standard_cart.sb-checkout .apply-credit-container {
background: var(--sb-bg-inset);
border: 1px solid var(--sb-border);
padding: 14px 16px;
margin-bottom: 16px;
}
body #order-standard_cart.sb-checkout .existing-cc-grid .card {
background: var(--sb-bg-inset);
}
/* --- cart view (Nexus cart SPA) --- */
.sb-cart-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
min-height: 320px;
color: var(--sb-text-dim);
font-size: 15px;
font-weight: 600;
}
.sb-cart-spinner {
width: 42px;
height: 42px;
border: 3px solid var(--sb-border);
border-top-color: var(--sb-green);
border-radius: 50%;
animation: sb-cart-spin .8s linear infinite;
}
@keyframes sb-cart-spin {
to { transform: rotate(360deg); }
}
/* ==========================================================================
9. RESPONSIVE
========================================================================== */
@media (max-width: 1199.98px) {
.sb-content {
padding: 28px 28px 40px;
}
.sb-counter-row {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 991.98px) {
/* portal: sidebar becomes an off-canvas drawer behind a top bar */
.sb-portal {
grid-template-columns: 1fr;
}
.sb-topbar {
display: flex;
align-items: center;
gap: 12px;
position: sticky;
top: 0;
z-index: 1050;
padding: 12px 16px;
background: rgba(20, 20, 20, .95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 3px solid var(--sb-green);
}
.sb-topbar-logo img {
height: 24px;
width: auto;
display: block;
}
.sb-topbar-cart {
margin-left: auto;
display: flex;
align-items: center;
gap: 6px;
color: var(--sb-text);
font-size: 17px;
padding: 6px 8px;
}
.sb-topbar-toggle {
display: flex;
flex-direction: column;
gap: 5px;
padding: 8px;
margin: 0;
cursor: pointer;
}
.sb-topbar-toggle span {
width: 22px;
height: 2px;
background: var(--sb-text);
display: block;
transition: transform .2s, opacity .2s;
}
.sb-nav-toggle-cb:checked ~ .sb-topbar .sb-topbar-toggle span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.sb-nav-toggle-cb:checked ~ .sb-topbar .sb-topbar-toggle span:nth-child(2) {
opacity: 0;
}
.sb-nav-toggle-cb:checked ~ .sb-topbar .sb-topbar-toggle span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.sb-sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 290px;
max-width: 85vw;
height: 100vh;
z-index: 1100;
transform: translateX(-100%);
transition: transform .25s ease;
box-shadow: 0 0 40px rgba(0, 0, 0, .6);
}
.sb-nav-toggle-cb:checked ~ .sb-sidebar {
transform: translateX(0);
}
.sb-nav-toggle-cb:checked ~ .sb-nav-backdrop {
display: block;
position: fixed;
inset: 0;
z-index: 1090;
background: rgba(0, 0, 0, .65);
margin: 0;
}
.sb-content {
padding: 20px 16px 32px;
max-width: none;
}
.sb-page-title {
font-size: 24px;
}
.sb-two-col {
grid-template-columns: 1fr;
}
.sb-stats-grid {
grid-template-columns: 1fr;
}
.sb-login-card {
grid-template-columns: 1fr;
min-height: 0;
}
.sb-login-visual {
min-height: 200px;
order: 0;
background-size: 240px auto, auto;
background-position: right -40px bottom -50px, 0 0;
}
.sb-pwreset .sb-login-visual {
background-size: 220px auto, auto;
background-position: right 12px top 16px, 0 0;
}
.sb-login-visual-content {
padding: 28px 24px;
}
.sb-login-visual-content h2 {
font-size: 24px;
}
.sb-login-panel {
padding: 32px 24px;
order: 1;
}
/* guest header: hamburger + stacked menu */
.sb-site-header {
padding: 16px 24px;
flex-wrap: wrap;
}
.sb-site-nav,
.sb-site-actions {
display: none;
}
.sb-site-menu-toggle {
display: flex;
flex-direction: column;
gap: 5px;
background: none;
border: none;
padding: 8px;
margin: 0 0 0 auto;
cursor: pointer;
}
.sb-site-menu-toggle span {
width: 22px;
height: 2px;
background: var(--sb-text);
display: block;
}
.sb-site .sb-nav-toggle-cb:checked ~ .sb-site-header .sb-site-mobile-menu {
display: flex;
}
.sb-site-mobile-menu {
flex-direction: column;
gap: 4px;
width: 100%;
padding: 16px 0 8px;
}
.sb-site-mobile-link {
color: var(--sb-text-muted);
font-size: 16px;
font-weight: 700;
padding: 10px 0;
}
.sb-site-mobile-link:hover {
color: #fff;
}
.sb-site-mobile-actions {
display: flex;
gap: 12px;
padding-top: 12px;
}
.sb-site-mobile-menu .sb-lang-switch {
justify-content: flex-start;
margin-top: 14px;
}
.sb-body-guest #main-body > .container {
padding-left: 24px;
padding-right: 24px;
}
.sb-auth-hero {
padding: 36px 24px;
background-size: 180px auto, auto;
background-position: right -40px center, 0 0;
}
.sb-auth-hero h1 {
font-size: 26px;
}
}
@media (max-width: 767.98px) {
.sb-counter-row {
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.sb-counter {
padding: 14px;
gap: 10px;
}
.sb-counter-icon {
width: 38px;
height: 38px;
font-size: 15px;
}
.sb-counter-number {
font-size: 20px;
}
.sb-server-card,
.sb-info-card,
.sb-kb-card {
padding: 18px;
}
.sb-server-actions {
width: 100%;
}
.sb-server-actions .sb-btn {
flex: 1 1 auto;
}
.sb-upgrade-banner .sb-btn {
width: 100%;
}
.sb-kb-input-group {
flex-wrap: wrap;
background: transparent;
border: 0;
padding: 0;
box-shadow: none;
}
.sb-kb-input-group:focus-within {
box-shadow: none;
}
.sb-kb-icon {
display: none;
}
.sb-kb-input {
flex: 1 1 100%;
width: 100%;
background: var(--sb-bg-inset);
border: 1px solid var(--sb-border-input);
padding: 13px 14px;
}
.sb-kb-input:focus {
border-color: var(--sb-green);
}
.sb-kb-btn {
flex: 1 1 100%;
margin-top: 10px;
}
.sb-site-footer-main {
padding: 36px 24px;
gap: 32px;
}
.sb-site-footer-cols {
gap: 40px;
}
/* wide tables scroll inside their card */
#main-body .table-container,
#main-body .dataTables_wrapper,
#main-body .card-body:has(> table),
#main-body .card-body:has(> .table) {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
#main-body .dataTables_filter label {
max-width: none;
}
#main-body .dataTables_paginate,
#main-body .dataTables_paginate .pagination,
#main-body ul.pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
row-gap: 6px;
max-width: 100%;
}
#main-body .btn-group:has(> .setBulkAction) {
display: flex;
flex-direction: column;
width: 100%;
gap: 6px;
}
#main-body .btn-group > .setBulkAction {
width: 100%;
margin: 0 !important;
}
#main-body .card-body input[type="submit"].btn,
#main-body .card-body button[type="submit"].btn,
#main-body .card-body input[type="reset"].btn {
display: block;
width: 100%;
margin: 0 0 10px !important;
}
.sb-domain-hero {
padding: 32px 20px;
}
.sb-domain-hero h1 {
font-size: 26px;
}
.sb-domain-search {
flex-direction: column;
align-items: stretch;
}
.sb-domain-search-icon {
display: none;
}
body #order-standard_cart.sb-domain-page .sb-domain-search .form-control {
padding-left: 12px;
}
body #order-standard_cart.sb-domain-page .sb-domain-search .btn {
width: 100%;
}
body #order-standard_cart.sb-domain-page .domain-suggestion .actions {
margin-left: 0;
width: 100%;
justify-content: space-between;
}
body #order-standard_cart.sb-domain-page .tld-pricing-header .tld-column {
display: none;
}
.sb-transfer-card,
.sb-conf-card {
padding: 22px 18px;
}
body #order-standard_cart.sb-checkout .sb-checkout-body {
padding: 20px 16px 24px;
}
body #order-standard_cart.sb-checkout .sb-pay-methods {
grid-template-columns: 1fr;
}
}
@media (max-width: 575.98px) {
.sb-counter-row {
grid-template-columns: 1fr;
}
.sb-user-actions {
grid-template-columns: 1fr;
}
.sb-btn {
white-space: normal;
}
}
@media print {
.sb-sidebar,
.sb-topbar,
.sb-site-header,
.sb-site-footer,
.sb-alerts {
display: none !important;
}
.sb-portal {
display: block;
}
body,
.sb-body {
background: #fff !important;
color: #000;
}
}
/* ==========================================================================
10. OPTIONAL HIDES (carried over from etheron-2026)
Remove a block here to show the item again.
========================================================================== */
/* Announcements and Downloads links (the WHMCS knowledgebase stays) */
.sidebar .list-group-item[href*="announcements.php"],
.sidebar .list-group-item[href*="downloads.php"],
a[href*="announcements.php"],
a[href*="downloads.php"],
.sb-nav-group:has(> a[href*="announcements.php"]),
.sb-nav-group:has(> a[href*="downloads.php"]) {
display: none !important;
}
/* "View available options" (?gid=addons) upsell link wherever it appears */
a[href*="gid=addons"],
.sb-nav-group:has(> a[href*="gid=addons"]) {
display: none !important;
}
/* ==========================================================================
11. REVIEW FIXES (static review of 2026-09-07)
Later rules win on equal specificity, so these override the sections
above and the Nexus theme.min.css rules named in the comments.
========================================================================== */
/* the design token for faint text was below AA contrast for body-size text */
:root {
--sb-text-faint: #7d7d76;
}
/* theme.css paints section#main-body with --bg-lifted and gives it a tall
min-height, which made the cards darker than their surroundings */
.sb-content > #main-body,
.sb-site-main #main-body,
section#main-body {
background-color: transparent;
min-height: 0;
}
/* bare .btn (e.g. the change-password cancel) took Bootstrap's dark text */
.btn {
color: var(--sb-text);
}
/* admin masquerade button: dark text on amber for contrast */
.sb-masquerade-btn,
.sb-masquerade-btn:hover {
color: #1a1a1a;
}
.btn-return-to-admin:hover {
background: var(--sb-amber-light) !important;
color: #1a1a1a !important;
}
/* responsive tab strip (product details, domain contacts, bulk domains):
theme.css paints it white */
.nav-tabs.responsive-tabs-sm {
background: transparent !important;
border-color: var(--sb-border) !important;
}
.responsive-tabs-sm .nav-item {
border-bottom-color: var(--sb-border) !important;
}
.responsive-tabs-sm .nav-item a:hover,
.responsive-tabs-sm .nav-item a.active {
background-color: var(--sb-bg-hover) !important;
color: #fff !important;
}
.responsive-tabs-sm-connector .channel {
background: var(--sb-bg-card) !important;
border-right-color: var(--sb-border) !important;
}
.responsive-tabs-sm-connector .bottom-border {
border-bottom-color: var(--sb-border) !important;
}
/* markdown editor (ticket reply / submit): toolbar and preview are forced
white with !important in theme.css */
.md-editor > .md-header,
.md-editor > .btn-toolbar,
.md-editor .md-footer {
background: var(--sb-bg-dark) !important;
}
.md-editor > .md-preview,
.md-editor.md-fullscreen-mode,
.md-editor.md-fullscreen-mode .md-preview {
background: var(--sb-bg-card) !important;
color: var(--sb-text) !important;
}
.md-editor > textarea,
.md-editor > textarea:focus,
.md-editor.md-fullscreen-mode .md-input {
background: var(--sb-bg-inset) !important;
color: var(--sb-text) !important;
}
.md-preview table,
.markdown-content table,
.md-preview table th,
.md-preview table td,
.markdown-content table th,
.markdown-content table td {
background: var(--sb-bg-inset) !important;
border-color: var(--sb-border) !important;
color: var(--sb-text);
}
/* alerts that contain a form or a get a white background from
theme.css (.alert:has(form) / .alert:has(small)) */
.alert.alert-success {
background: var(--sb-bg-accent-soft) !important;
border-color: var(--sb-border-accent) !important;
color: var(--sb-green-light) !important;
}
.alert.alert-info {
background: var(--sb-bg-info-soft) !important;
border-color: #2a4050 !important;
color: var(--sb-blue) !important;
}
.alert.alert-warning {
background: var(--sb-bg-warn-soft) !important;
border-color: #5a4326 !important;
color: var(--sb-amber-light) !important;
}
.alert.alert-danger {
background: var(--sb-bg-danger-soft) !important;
border-color: #5a2f2f !important;
color: var(--sb-red-light) !important;
}
.alert.alert-secondary,
.alert.alert-light,
.alert.alert-dark {
background: var(--sb-bg-inset) !important;
border-color: var(--sb-border) !important;
color: var(--sb-text-muted) !important;
}
/* form validation state must stay visible despite the forced border above */
.form-control.is-invalid,
.was-validated .form-control:invalid,
body #order-standard_cart .field.is-invalid {
border-color: var(--sb-red) !important;
box-shadow: none !important;
}
.form-control.is-valid,
.was-validated .form-control:valid {
border-color: var(--sb-green) !important;
}
.invalid-feedback {
color: var(--sb-red-light);
}
.valid-feedback {
color: var(--sb-green-light);
}
/* popover arrows for the left/right placements */
.bs-popover-right > .arrow::after,
.bs-popover-auto[x-placement^="right"] > .arrow::after {
border-right-color: var(--sb-bg-card);
}
.bs-popover-left > .arrow::after,
.bs-popover-auto[x-placement^="left"] > .arrow::after {
border-left-color: var(--sb-bg-card);
}
/* verification banner icon (theme.css colours it grey at higher specificity) */
.verification-banner .fas,
.verification-banner .fal,
.verification-banner .far {
color: var(--sb-amber) !important;
}
/* toasts injected by core JS */
.toast {
background: var(--sb-bg-card);
border: 1px solid var(--sb-border);
color: var(--sb-text);
border-radius: 0;
}
.toast-header {
background: var(--sb-bg-dark);
color: var(--sb-text);
border-bottom-color: var(--sb-border);
}
/* register page: disabled/readonly .field inputs */
#registration .field[disabled],
#registration .field[readonly] {
background: var(--sb-bg-dark);
color: var(--sb-text-dim);
}
/* the knowledgebase search form must not add the UA's bottom margin */
.sb-kb-form {
margin: 0;
position: relative;
}
/* live suggestions from support.serverbuilds.com */
.sb-kb-results {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: 6px;
background: var(--sb-bg-card);
border: 1px solid var(--sb-border-strong);
box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
z-index: 1030;
max-height: 360px;
overflow-y: auto;
}
.sb-kb-results[hidden] {
display: none;
}
.sb-kb-result {
display: block;
padding: 12px 16px;
border-bottom: 1px solid var(--sb-border-soft);
color: var(--sb-text);
text-decoration: none;
}
.sb-kb-result:last-child {
border-bottom: 0;
}
.sb-kb-result:hover {
background: var(--sb-bg-hover);
color: #fff;
text-decoration: none;
}
.sb-kb-result-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 700;
}
.sb-kb-result-title i {
color: var(--sb-green-light);
}
.sb-kb-result-summary {
display: block;
font-size: 12.5px;
color: var(--sb-text-dim);
margin-top: 2px;
padding-left: 22px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sb-kb-no-results {
padding: 14px 16px;
color: var(--sb-text-dim);
font-size: 13.5px;
text-align: center;
}
/* modal header: theme.css sets its own background with !important */
.modal .modal-header {
background: var(--sb-bg-dark) !important;
}
/* sidebar list hover (theme.css is more specific) */
.sidebar .card-sidebar .list-group-item:hover {
background: var(--sb-bg-hover);
color: var(--sb-text);
}
/* configure product > choose domain: theme.css paints the option list white */
body #order-standard_cart .domain-selection-options {
background: var(--sb-bg-card);
}
/* password strength meter: sharp corners like everything else */
.password-strength-meter .progress,
.password-strength-meter .progress-bar {
border-radius: 0;
}
/* dashboard counters: the domains tile is conditional, so let the row fit
whatever number of tiles it holds */
.sb-counter-row {
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
/* guest pages: heading above the content */
.sb-guest-title {
max-width: 1160px;
padding-left: 48px;
padding-right: 48px;
}
.sb-guest-title .sb-page-title {
margin-bottom: 22px;
}
.sb-site-currency,
.sb-site-cart {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--sb-text-muted);
font-size: 15px;
font-weight: 700;
padding: 6px 4px;
white-space: nowrap;
}
.sb-site-currency:hover,
.sb-site-cart:hover {
color: #fff;
}
.sb-site-mobile-meta {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 12px;
border-top: 1px solid var(--sb-border-soft);
margin-top: 12px;
}
.sb-site-mobile-meta .sb-nav-badge {
margin-left: 6px;
}
/* MarketConnect store landing pages (store/*.tpl load store.css after this
file, hence !important): dark surfaces and light text */
.landing-page,
.landing-page.bg-white,
.landing-page .bg-white,
.landing-page .bg-light {
background: var(--sb-bg-card) !important;
color: var(--sb-text) !important;
}
.landing-page h1,
.landing-page h2,
.landing-page h3,
.landing-page h4,
.landing-page h5 {
color: #fff !important;
}
.landing-page p,
.landing-page li,
.landing-page .lead,
.landing-page .text-muted {
color: var(--sb-text-muted) !important;
}
.landing-page .card,
.landing-page .panel,
.landing-page .feature,
.landing-page .pricing,
.landing-page .well {
background: var(--sb-bg-inset) !important;
border-color: var(--sb-border) !important;
color: var(--sb-text) !important;
}
.landing-page .table,
.landing-page .table th,
.landing-page .table td {
background: transparent !important;
color: var(--sb-text) !important;
border-color: var(--sb-border) !important;
}
/* --- store product list (standard_cart products.tpl) ---------------------
The plan cards of serverbuilds.nl/minecraft. standard_cart's own all.min.css
loads after this file on cart pages, hence the !important on the surfaces. */
body #order-standard_cart .products .row-eq-height {
display: flex;
flex-wrap: wrap;
}
body #order-standard_cart .products .col-md-6 {
display: flex;
margin-bottom: 18px;
}
body #order-standard_cart .products .product,
body #order-standard_cart .product {
width: 100%;
display: flex;
flex-direction: column;
background: var(--sb-bg-card) !important;
border: 1px solid var(--sb-border) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 24px !important;
margin: 0 !important;
color: var(--sb-text);
transition: transform .18s, border-color .18s, box-shadow .18s;
}
body #order-standard_cart .product:hover {
transform: translateY(-4px);
border-color: var(--sb-green) !important;
box-shadow: 0 14px 30px rgba(0, 0, 0, .35) !important;
}
body #order-standard_cart .product header {
background: transparent !important;
border: 0 !important;
padding: 0 0 10px !important;
margin: 0 !important;
text-align: left;
}
body #order-standard_cart .product header span {
font-family: var(--sb-font-head);
font-size: 20px;
font-weight: 800;
color: #fff !important;
text-transform: none;
letter-spacing: -0.01em;
}
body #order-standard_cart .product .product-desc {
flex: 1 1 auto;
padding: 0 !important;
color: var(--sb-text-muted) !important;
font-size: 14px;
font-weight: 600;
text-align: left;
}
body #order-standard_cart .product .product-desc ul {
padding-left: 18px;
margin: 0 0 10px;
}
body #order-standard_cart .product .product-desc ul:empty {
display: none;
}
body #order-standard_cart .product footer {
background: transparent !important;
border: 0 !important;
border-top: 1px solid var(--sb-border-soft) !important;
padding: 16px 0 0 !important;
margin: 10px 0 0 !important;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
text-align: left;
}
body #order-standard_cart .product .product-pricing {
color: var(--sb-text-dim) !important;
font-size: 13.5px;
font-weight: 600;
line-height: 1.5;
padding: 0 !important;
margin: 0 !important;
text-align: left;
}
body #order-standard_cart .product .product-pricing .price {
display: inline-block;
font-family: var(--sb-font-head);
font-size: 32px;
font-weight: 800;
color: var(--sb-green-light) !important;
line-height: 1.1;
margin: 2px 0;
}
body #order-standard_cart .product .product-pricing .setup-fee {
color: var(--sb-text-dim) !important;
font-size: 12.5px;
}
body #order-standard_cart .product .btn-order-now {
background: var(--sb-green) !important;
border: 1px solid var(--sb-green) !important;
color: #fff !important;
font-size: 14px;
font-weight: 800;
padding: 11px 20px !important;
border-radius: 0 !important;
white-space: nowrap;
}
body #order-standard_cart .product .btn-order-now:hover {
--sb-slide-color: var(--sb-green-hover);
background: var(--sb-green) !important;
border-color: var(--sb-green-hover) !important;
}
body #order-standard_cart .header-lined {
margin-bottom: 22px;
}
body #order-standard_cart .header-lined h1 {
text-transform: capitalize;
padding-bottom: 12px;
margin: 0;
}
/* product group description under the heading */
body #order-standard_cart .group-description,
body #order-standard_cart .header-lined + p {
color: var(--sb-text-muted);
}
/* the mobile product-group selector: hidden like the desktop sidebar (the
store has one product group; the heading names it) */
body #order-standard_cart .sidebar-collapsed {
display: none !important;
}
/* product recommendation modal */
body #order-standard_cart .product-recommendation,
.product-recommendations .product-recommendation {
background: var(--sb-bg-inset) !important;
border: 1px solid var(--sb-border) !important;
color: var(--sb-text);
}
/* --- responsive corrections --------------------------------------------- */
@media (max-width: 991.98px) {
/* the portal grid must give way on phones: a grid item cannot be sticky
within its own auto row, and the row would stretch on short pages */
.sb-portal {
display: block;
}
/* the auth visuals use a two-layer background (image + gradient); the
responsive sizes and positions must address both layers */
.sb-login-visual {
background-size: 240px auto, auto;
background-position: right -40px bottom -50px, 0 0;
}
.sb-pwreset .sb-login-visual {
background-size: 220px auto, auto;
background-position: right 12px top 16px, 0 0;
}
.sb-auth-hero {
background-size: 180px auto, auto;
background-position: right -40px center, 0 0;
}
.sb-guest-title {
padding-left: 24px;
padding-right: 24px;
}
}
/* --- print ------------------------------------------------------------- */
@media print {
html,
body.sb-body {
background: #fff !important;
color: #000 !important;
}
.sb-content {
padding: 0 !important;
max-width: none !important;
}
.card,
.panel,
.sb-card,
.invoice-container,
.invoice-container .card {
background: #fff !important;
color: #000 !important;
border-color: #ccc !important;
}
.invoice-container h1,
.invoice-container h2,
.invoice-container h3,
.invoice-container p,
.invoice-container td,
.invoice-container th,
.invoice-container address {
color: #000 !important;
}
}
/* ==========================================================================
12. SERVERBUILDS.NL SYNC (site design updates of 7 Sept 2026)
========================================================================== */
/* launch promotion bar (PromoBanner.vue), shown while sb2026_launch_promo.php
says the promotion runs */
.sb-launch-banner {
display: block;
background: var(--sb-green);
color: #fff;
text-align: center;
padding: 10px 24px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
}
.sb-launch-banner:hover,
.sb-launch-banner:focus {
background: var(--sb-green-hover);
color: #fff;
text-decoration: none;
}
.sb-body-portal .sb-launch-banner {
margin: 0 0 24px;
}
/* creeper 404 (error.vue) */
.sb-err {
display: flex;
align-items: center;
justify-content: center;
padding: 60px 24px 80px;
}
.sb-err-scene {
position: relative;
text-align: center;
max-width: 560px;
padding: 0 24px;
}
.sb-err-debris {
position: absolute;
display: block;
animation: sb-zweven 3.2s ease-in-out infinite;
}
.sb-err-creeper {
width: 120px;
height: 120px;
display: block;
margin: 0 auto 28px;
shape-rendering: crispedges;
animation: sb-sissen 4s ease-in-out infinite;
}
.sb-err-code {
font-family: var(--sb-font-head);
font-size: 88px;
font-weight: 800;
line-height: 1;
color: var(--sb-green-light);
margin: 0 0 6px;
}
.sb-err-boom {
font-family: var(--sb-font-head);
font-size: 26px;
font-weight: 800;
color: #fff;
margin-bottom: 14px;
}
.sb-err-text {
font-size: 16px;
line-height: 1.7;
color: var(--sb-text-muted);
margin: 0 0 28px;
}
.sb-err-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.sb-err-actions .sb-btn {
font-size: 15px;
padding: 13px 24px;
}
.sb-err-hint {
margin-top: 26px;
font-size: 13px;
color: var(--sb-text-dim);
font-weight: 600;
}
.sb-err-referrer {
text-align: center;
font-size: 13px;
color: var(--sb-text-dim);
margin: -40px 0 60px;
word-break: break-all;
}
@keyframes sb-sissen {
0%, 78% { transform: scale(1); filter: brightness(1); }
84% { transform: scale(1.05); filter: brightness(1.5); }
88% { transform: scale(1); filter: brightness(1); }
93% { transform: scale(1.08); filter: brightness(1.9); }
100% { transform: scale(1); filter: brightness(1); }
}
@keyframes sb-zweven {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-12px) rotate(12deg); }
}
@media (prefers-reduced-motion: reduce) {
.sb-err-creeper,
.sb-err-debris {
animation: none;
}
.btn::before,
.sb-btn::before {
transition: none;
}
}