/* ***************************************************** ** Custom Stylesheet ** Any custom styling you want to apply should be defined here. ***************************************************** */ /* Custom CSS for Nexus Theme * * This file allows you to customize the theme colors and styles for the entire Nexus template. * * To customize colors: * - Replace the var() references with your own hex colors or other CSS values. * - For example, instead of --primary: #4b5563; use --primary: #your-color; * - You can also override any CSS properties here. */ :root { --white: #fff; /* Neutral shades */ --neutral-50: #fbf9fa; --neutral-100: #f4f5f7; --neutral-200: #e4e4e7; --neutral-300: #d0d5dd; --neutral-400: #9ca3af; --neutral-500: #6b7280; --neutral-600: #4b5563; --neutral-700: #374151; --neutral-800: #1f2937; --neutral-900: #111827; --neutral-950: #030712; /* Neutral shades */ /* define own pallet with brand colors */ --primary-50: var(--neutral-50); --primary-100: var(--neutral-100); --primary-200: var(--neutral-200); --primary-300: var(--neutral-300); --primary-400: var(--neutral-400); --primary-500: var(--neutral-500); --primary-600: var(--neutral-600); --primary-700: var(--neutral-700); --primary-800: var(--neutral-800); --primary-900: var(--neutral-900); --primary-950: var(--neutral-900); /* Primary colors */ /* Use shades from comments if `primary` colors use other colors, then neutral */ --primary: var(--neutral-900); /* var(--primary-600) */ --primary-lifted: var(--neutral-800); /* var(--primary-700) */ --primary-accented: var(--neutral-700); /* var(--primary-800) */ /* Secondary colors */ --secondary: var(--neutral-500); --secondary-lifted: var(--neutral-600); --secondary-accented: var(--neutral-700); /* Success colors */ --success: #00a63e; --success-lifted: #008236; --success-accented: #016630; /* Info colors */ --info: #155dfc; --info-lifted: #1447e6; --info-accented: #193cb8; /* Notice colors */ --notice: #7f22fe; --notice-lifted: #7008e7; --notice-accented: #5d0ec0; /* Warning colors */ --warning: #f54a00; --warning-lifted: #ca3500; --warning-accented: #9f2d00; /* Error colors */ --error: #e7000b; --error-lifted: #c10007; --error-accented: #9f0712; /* Grayscale colors */ --grayscale: var(--neutral-900); --grayscale-lifted: var(--neutral-800); --grayscale-accented: var(--neutral-700); /* Neutral colors */ --neutral: var(--neutral-500); --neutral-lifted: var(--neutral-600); --neutral-accented: var(--neutral-700); /* Text neutral colors */ --text-inverted: var(--white); --text-muted: var(--neutral-400); --text-lifted: var(--neutral-500); --text-accented: var(--neutral-600); --text: var(--neutral-900); /* Border neutral colors */ --border-muted: var(--neutral-200); --border: var(--neutral-300); --border-lifted: var(--neutral-400); --border-accented: var(--neutral-600); /* Background neutral colors */ --bg: var(--white); --bg-muted: var(--neutral-50); --bg-lifted: var(--neutral-100); --bg-accented: var(--neutral-200); --bg-inverted: var(--neutral-900); /* Additional colors */ --yellow-200: #fff085; --yellow-300: #ffdf20; --teal-300: #46edd5; --teal-400: #00d5be; --emerald-300: #5ee9b5; --pink-400: #fb64b6; /* Additional custom properties */ /* Font sizes */ --text-xs: 0.625rem; --text-sm: 0.75rem; --text-md: 0.875rem; --text-lg: 1rem; /* Spacing */ --outline-sm: 1px; --outline-md: 2px; --outline-lg: 3px; /* Rounding */ --rounding-sm: 0.25rem; --rounding-md: 0.5rem; --rounding-lg: 0.75rem; /* Other */ --letter-spacing: 0em; --disabled-opacity: 25%; } /* ===================================================================================================================== STABLE FOUNDATION for Nexus (nexusstable). Nexus standard: brand through the design tokens above, not through selectors. Values are the ones measured on stablecluster.com (same as stabletemplate's --sc-* tokens). Every Nexus component (and the Nexus Cart, which reads --primary/--border/... through its --vl-* variables) follows these. ===================================================================================================================== */ @font-face { font-family: "Euclid Circular A"; font-style: normal; font-weight: 300; font-display: swap; src: url("../stable/fonts/EuclidCircularA-Light.woff2") format("woff2"); } @font-face { font-family: "Euclid Circular A"; font-style: normal; font-weight: 400; font-display: swap; src: url("../stable/fonts/EuclidCircularA-Regular.woff2") format("woff2"); } @font-face { font-family: "Euclid Circular A"; font-style: normal; font-weight: 500; font-display: swap; src: url("../stable/fonts/EuclidCircularA-Medium.woff2") format("woff2"); } @font-face { font-family: "Euclid Circular A"; font-style: normal; font-weight: 600; font-display: swap; src: url("../stable/fonts/EuclidCircularA-SemiBold.woff2") format("woff2"); } @font-face { font-family: "Euclid Circular A"; font-style: normal; font-weight: 700; font-display: swap; src: url("../stable/fonts/EuclidCircularA-Bold.woff2") format("woff2"); } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../stable/fonts/Figtree-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } :root { --sc-font: "Euclid Circular A", "Figtree", system-ui, -apple-system, "Segoe UI", arial, sans-serif; --font-family-sans-serif: var(--sc-font); /* neutral scale: cool, slightly indigo (ink #25265e) */ --neutral-50: #f8faff; --neutral-100: #f1f4fc; --neutral-200: #e5e7eb; --neutral-300: #d3d8ea; --neutral-400: #9aa0c0; --neutral-500: #6b6f97; --neutral-600: #4a4d7a; --neutral-700: #353868; --neutral-800: #25265e; --neutral-900: #1b1c4a; --neutral-950: #12132e; /* primary = brand blue */ --primary-50: #eff6ff; --primary-100: #dbeafe; --primary-200: #bfdbfe; --primary-300: #93c5fd; --primary-400: #60a5fa; --primary-500: #3b82f6; --primary-600: #2563eb; --primary-700: #1d4ed8; --primary-800: #1e40af; --primary-900: #1e3a8a; --primary-950: #172554; --primary: var(--primary-600); --primary-lifted: var(--primary-700); --primary-accented: var(--primary-800); --success: #16a34a; --success-lifted: #15803d; --success-accented: #166534; --info: #2563eb; --notice: #4f46e5; --notice-lifted: #4338ca; --notice-accented: #3730a3; --text: var(--neutral-800); --text-accented: var(--neutral-700); --text-lifted: var(--neutral-600); --text-muted: var(--neutral-500); --border-muted: var(--neutral-200); --border: var(--neutral-200); --bg-muted: var(--neutral-50); --bg-lifted: var(--neutral-100); --bg-inverted: var(--neutral-800); /* radii: 8 / 12 / 16 like the site */ --rounding-sm: .5rem; --rounding-md: .75rem; --rounding-lg: 1rem; --letter-spacing: -.005em; } /* Stable-specific tokens (not part of Nexus) */ :root { --sc-ink: #25265e; --sc-body: rgba(37, 38, 94, .70); --sc-muted: rgba(37, 38, 94, .62); --sc-blue: #2563eb; --sc-blue-dark: #1d4ed8; --sc-indigo: #4f46e5; --sc-page: #f8faff; --sc-card: #ffffff; --sc-line: #e5e7eb; --sc-line-indigo: #e0e7ff; --sc-tint: #f3f6ff; --sc-gradient-text: linear-gradient(to right, #0556f3, #3b17c1, #06b6d4); --sc-gradient-topbar: linear-gradient(90deg, #5b3df5 0%, #4f46e5 42%, #3b2bbf 100%); --sc-gradient-band: linear-gradient(257.85deg, #451ce3 6.18%, #20097d 65.39%); --sc-gradient-support: linear-gradient(255.09deg, #3f1dc4 17.2%, #2a128e 75.48%); --sc-bg-hero: radial-gradient(circle at 14% 18%, rgba(56, 189, 248, .18), transparent 24%), radial-gradient(circle at 86% 20%, rgba(59, 130, 246, .12), transparent 22%), linear-gradient(#fff 0%, #f5f8ff 62%, #edf3ff 100%); --sc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05); --sc-shadow-lg: 0 20px 40px -12px rgba(37, 38, 94, .18); --bg: var(--sc-card); --bg-muted: var(--sc-page); } /* Dark palette: Nexus has none, so it is expressed through the same semantic tokens (derived from the brand hues) */ :root[data-bs-theme="dark"] { --sc-ink: #e8e9ff; --sc-body: rgba(232, 233, 255, .75); --sc-muted: rgba(232, 233, 255, .55); --sc-page: #0b0c1f; --sc-card: #12132b; --sc-line: rgba(255, 255, 255, .10); --sc-line-indigo: rgba(255, 255, 255, .08); --sc-tint: #181a3d; --sc-gradient-text: linear-gradient(to right, #60a5fa, #a5b4fc, #22d3ee); --sc-bg-hero: radial-gradient(circle at 14% 18%, rgba(56, 189, 248, .10), transparent 24%), radial-gradient(circle at 86% 20%, rgba(99, 102, 241, .14), transparent 22%), linear-gradient(#0b0c1f 0%, #0d0f27 62%, #10122e 100%); --sc-shadow-sm: none; --sc-shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, .6); --sc-blue: #3b82f6; --sc-blue-dark: #60a5fa; --primary: #3b82f6; --primary-lifted: #60a5fa; --primary-accented: #93c5fd; --text: var(--sc-ink); --text-accented: rgba(232, 233, 255, .85); --text-lifted: rgba(232, 233, 255, .75); --text-muted: rgba(232, 233, 255, .55); --border: rgba(255, 255, 255, .14); --border-muted: rgba(255, 255, 255, .08); --bg: var(--sc-card); --bg-muted: var(--sc-page); --bg-lifted: #181a3d; --bg-accented: #20224d; --bg-inverted: #e8e9ff; } /* ===================================================================================================================== R1 BASE: typography, page surface, container (stablecluster.com: 16 px / 24 px Euclid, medium-weight headings, stepped container) ===================================================================================================================== */ html { font-size: 16px; } body { font-family: var(--sc-font); font-size: 1rem; line-height: 1.5; color: var(--sc-body); background-color: var(--sc-page); -webkit-font-smoothing: antialiased; } button, input, select, textarea, .btn, .form-control { font-family: inherit; } h1, h2 { font-weight: 500; letter-spacing: -.02em; color: var(--sc-ink); } h3, h4, h5, h6 { font-weight: 600; letter-spacing: -.01em; color: var(--sc-ink); } a { color: var(--sc-blue); } a:hover { color: var(--sc-blue-dark); } :focus-visible { outline: 2px solid var(--sc-blue); outline-offset: 2px; } .container { width: 100%; max-width: 1920px; margin-inline: auto; padding-inline: 16px; } @media (min-width: 768px) { .container { padding-inline: 32px; } } @media (min-width: 1280px) { .container { padding-inline: 80px; } } @media (min-width: 1536px) { .container { padding-inline: 8.3333%; } } #main-body { padding: 32px 0 64px; background: transparent; } body:not(.sc-page-home) #main-body { min-height: 50vh; } /* skip link (keyboard) */ .sc-skip { position: fixed; top: 8px; left: 8px; z-index: 100000; padding: 12px 20px; border-radius: 10px; background: var(--sc-ink); color: var(--sc-card); font-weight: 700; text-decoration: none; transform: translateY(-200%); } .sc-skip:focus { transform: none; color: var(--sc-card); } /* two logo files (light / dark wordmark) */ .sc-logo-dark { display: none; } :root[data-bs-theme="dark"] .sc-logo-light { display: none; } :root[data-bs-theme="dark"] .sc-logo-dark { display: inline-block; } /* reusable pieces */ .sc-hero-bg { background: var(--sc-bg-hero); } .sc-gradient-text { background: var(--sc-gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* ===================================================================================================================== R2 CHROME: top strip, header, menus, page band, footer. Markup is Nexus's own (.topbar, .navbar, #mainNavbar, .toolbar, .cart-btn, .navbar-nav) plus the .sc-* hooks added in header.tpl / includes/stable/*. ===================================================================================================================== */ /* ---- top strip (guests: includes/stable/topbar.tpl; clients: Nexus's .topbar with notifications) ---- */ .header .topbar { height: 36px; padding: 0; border: 0; color: #fff; font-size: 14px; font-weight: 400; background: radial-gradient(circle at 18% 50%, rgba(129, 140, 248, .18), transparent 18%), radial-gradient(circle at 78% 28%, rgba(99, 102, 241, .22), transparent 24%), var(--sc-gradient-topbar); } .header .topbar > .container > .d-flex { align-items: center; height: 36px; } .header .topbar a, .header .topbar .btn, .header .topbar .btn:hover, .header .topbar .btn:focus { color: #fff; background: transparent; border: 0; box-shadow: none; font-size: 14px; padding: 0 6px; } .header .topbar a:hover { color: #fff; text-decoration: underline; } .sc-top-phone { display: inline-flex; align-items: center; gap: 8px; } .sc-top-promo { flex: 1 1 auto; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-top-chip { display: inline-block; padding: 1px 6px; border: 1px dashed rgba(255, 255, 255, .85); border-radius: 4px; line-height: 1.3; } .sc-top-right { gap: 12px; } .sc-top-cur { display: inline-flex; align-items: center; gap: 6px; color: #fff; } .sc-top-cur i { font-size: 10px; opacity: .8; } @media (max-width: 767.98px) { .sc-top-phone span { display: none; } } /* light / dark switch */ .sc-theme-switch { display: inline-flex; align-items: center; padding: 0; border: 0; background: transparent; border-radius: 999px; cursor: pointer; } .sc-theme-track { position: relative; display: inline-block; width: 48px; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .45); transition: background-color .25s ease; } .sc-theme-knob { position: absolute; top: 2px; left: 2px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); font-size: 11px; transition: transform .25s cubic-bezier(.22, 1, .36, 1); } .sc-i-sun { color: #f59e0b; } .sc-i-moon { display: none; color: #3b82f6; } :root[data-bs-theme="dark"] .sc-theme-knob { transform: translateX(22px); background: #0b0c1f; } :root[data-bs-theme="dark"] .sc-i-sun { display: none; } :root[data-bs-theme="dark"] .sc-i-moon { display: inline; } .sc-theme-switch:focus-visible .sc-theme-track { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sc-blue); } /* ---- header: one white row, logo + menu + toolbar ---- */ .header { background: var(--sc-card); box-shadow: var(--sc-shadow-sm); position: relative; z-index: 1030; } .header .navbar.sc-navbar { background: var(--sc-card); padding: 0; border: 0; } .header .sc-navbar > .container { display: flex; align-items: center; flex-wrap: wrap; min-height: 80px; } .header .navbar-brand { display: inline-flex; align-items: center; margin: 0 16px 0 0; padding: 0; } .header .navbar-brand .logo-img { height: 40px; width: auto; } @media (min-width: 1200px) { .header .navbar-brand .logo-img { height: 48px; } } .header .navbar-collapse { flex-grow: 1; } .header .navbar-nav .nav-link, .header .navbar-nav > li > a { color: var(--sc-ink); font: 500 16px/1.5 var(--sc-font); } @media (min-width: 1200px) { .header .navbar-collapse { display: flex !important; align-items: center; } .header #nav { margin-left: 24px; } .header .navbar-nav > li > a.nav-link, .header .navbar-nav > li > .nav-link { padding: 8px 12px; border-radius: 8px; } .header .navbar-nav > li > a.nav-link:hover, .header .navbar-nav > li.show > a.nav-link, .header .navbar-nav > li > a.nav-link.show { background: #f3f4f6; color: var(--sc-ink); } :root[data-bs-theme="dark"] .header .navbar-nav > li > a.nav-link:hover, :root[data-bs-theme="dark"] .header .navbar-nav > li.show > a.nav-link { background: rgba(255, 255, 255, .08); } } .header .navbar-nav .dropdown-menu { margin-top: 8px; padding: 8px; border: 1px solid var(--sc-line); border-radius: 12px; background: var(--sc-card); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); } .header .navbar-nav .dropdown-item { padding: 10px 12px; border-radius: 8px; color: var(--sc-ink); font-weight: 500; } .header .navbar-nav .dropdown-item:hover, .header .navbar-nav .dropdown-item:focus { background: #eff6ff; color: var(--sc-blue); } :root[data-bs-theme="dark"] .header .navbar-nav .dropdown-item:hover { background: rgba(59, 130, 246, .16); } /* Log in / Register (WHMCS secondary navbar for visitors) as ghost + pill */ .header .navbar-nav.ml-auto > li > a[href$="clientarea.php"], .header .navbar-nav.ml-auto > li > a[href*="/login"] { color: var(--sc-ink); } .header .navbar-nav.ml-auto > li > a[href*="register"] { display: inline-flex; align-items: center; height: 40px; padding: 0 20px !important; border-radius: 999px; background: var(--sc-blue); color: #fff; font-size: 14px; font-weight: 500; letter-spacing: .35px; } .header .navbar-nav.ml-auto > li > a[href*="register"]:hover { background: var(--sc-blue-dark); color: #fff; } /* toolbar: cart + burger */ .header .toolbar { flex-direction: row; align-items: center; margin-left: auto; } .header .cart-btn { position: relative; padding: 8px 10px; color: var(--sc-ink); } .header .cart-btn .badge { position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--sc-blue); color: #fff; font-size: 11px; line-height: 18px; } .header .toolbar .btn:hover { background: #f3f4f6; } @media (max-width: 1199.98px) { .header .sc-navbar > .container { min-height: 64px; } .header .navbar-nav .nav-link { padding: 12px 4px; } .header .navbar-nav.ml-auto { margin-top: 8px; } } /* ---- mega menu for visitors (desktop) ---- */ .ph-mega { flex: 0 1 auto; gap: 4px; margin: 0 16px 0 24px; padding: 0; } .ph-mega-item { position: static; } .ph-mega-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--sc-ink); font: 500 16px/1.5 var(--sc-font); white-space: nowrap; cursor: pointer; transition: background-color .2s ease; } .ph-mega-btn:hover, .ph-mega-btn[aria-expanded="true"] { background: #f3f4f6; color: var(--sc-ink); } :root[data-bs-theme="dark"] .ph-mega-btn:hover, :root[data-bs-theme="dark"] .ph-mega-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .08); } .ph-mega-btn i { font-size: 10px; transition: transform .3s ease; } .ph-mega-btn[aria-expanded="true"] i { transform: rotate(180deg); } .sc-mega .sc-mega-item:not(.sc-mega-wide) { position: relative; } .ph-mega-panel { display: none; position: absolute; top: calc(100% + 8px); left: 0; width: 420px; padding: 24px; z-index: 1100; background: var(--sc-card); border: 1px solid #f3f4f6; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); transform-origin: top center; } .sc-mega .sc-mega-wide .ph-mega-panel { width: 900px; } .ph-mega-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px; } .ph-mega-panel.show { display: block; animation: scMegaIn .22s cubic-bezier(.22, 1, .36, 1) both; } .ph-mega-panel.show.is-closing { animation: scMegaOut .18s ease both; } @keyframes scMegaIn { from { opacity: 0; transform: translateY(-10px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes scMegaOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-10px) scale(.985); } } @media (prefers-reduced-motion: reduce) { .ph-mega-panel.show, .ph-mega-panel.show.is-closing { animation-duration: .01ms; } } :root[data-bs-theme="dark"] .ph-mega-panel { border-color: var(--sc-line); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .6); } .sc-mega-grid { display: grid; gap: 32px; } .sc-mega-grid.sc-cols-1 { grid-template-columns: 1fr; } .sc-mega-grid.sc-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sc-mega-col:not(:last-child) { border-right: 1px solid #f3f4f6; } :root[data-bs-theme="dark"] .sc-mega-col:not(:last-child) { border-right-color: var(--sc-line); } .sc-mega-head { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #3b82f6; } .sc-mega-link { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 12px; color: inherit; text-decoration: none; transition: background-color .15s ease; } .sc-mega-link:hover, .sc-mega-link:focus-visible { background: #eff6ff; text-decoration: none; } .sc-mega-chip { display: flex; flex: 0 0 40px; align-items: center; justify-content: center; width: 40px; height: 40px; margin-top: 2px; border-radius: 8px; background: #f3f4f6; color: #2563eb; transition: background-color .15s ease; } .sc-mega-link:hover .sc-mega-chip { background: #dbeafe; } .sc-mega-chip svg, .sc-mega-chip img { width: 20px; height: 20px; } .sc-mega-text { min-width: 0; } .sc-mega-text strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--sc-ink); } .sc-mega-text small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--sc-muted); } .sc-mega-link:hover .sc-mega-text strong { color: #1d4ed8; } :root[data-bs-theme="dark"] .sc-mega-link:hover, :root[data-bs-theme="dark"] .sc-mega-link:focus-visible { background: rgba(59, 130, 246, .14); } :root[data-bs-theme="dark"] .sc-mega-chip { background: rgba(255, 255, 255, .08); color: #93c5fd; } :root[data-bs-theme="dark"] .sc-mega-link:hover .sc-mega-chip { background: rgba(59, 130, 246, .25); } :root[data-bs-theme="dark"] .sc-mega-link:hover .sc-mega-text strong, :root[data-bs-theme="dark"] .sc-mega-head { color: #93c5fd; } @media (max-width: 1399.98px) { .sc-mega .sc-mega-wide .ph-mega-panel { width: calc(100vw - 400px); } .sc-mega-grid { gap: 20px; } } /* visitors: WHMCS's own primary navbar is replaced by the mega menu on desktop, kept for the mobile sheet */ /* visitors see only the global (marketing) menu, desktop mega menu or mobile accordion; WHMCS's own navbar (Home, Store, News ...) is for logged-in clients */ .sc-guest-nav { display: none !important; } @media (max-width: 1199.98px) { .sc-mega { display: none !important; } } /* ---- mobile accordion (visitors) ---- */ .ph-mobile-toggle { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 12px 4px; border-bottom: 1px solid var(--sc-line); color: var(--sc-ink); font-size: 18px; font-weight: 600; text-decoration: none; } .ph-mobile-toggle:hover { color: var(--sc-blue); text-decoration: none; } .ph-mobile-toggle i { font-size: 12px; transition: transform .3s ease; } .ph-mobile-toggle:not(.collapsed) i { transform: rotate(180deg); } .ph-mobile-sub { margin: 0; padding: 6px 0 10px; } .ph-mobile-sub a { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 12px; color: inherit; } .ph-mobile-sub a:hover { background: #eff6ff; text-decoration: none; } .ph-mobile-sub .sc-mega-chip { width: 36px; height: 36px; flex-basis: 36px; margin-top: 0; } .ph-mobile-sub .sc-mega-text strong { font-size: 16px; } .sc-mobile-nav { margin-bottom: 12px; } /* Nexus breadcrumb bar (shopping cart / auth pages) */ .master-breadcrumb { background: transparent; border-bottom: 1px solid var(--sc-line); } .master-breadcrumb .breadcrumb { margin: 0; padding: 12px 0; background: transparent; font-size: 14px; } /* ---- footer ---- */ .sc-footer { margin-top: 0; padding: 64px 0 24px; background: var(--sc-bg-hero); border-top: 1px solid var(--sc-line-indigo); color: var(--sc-body); font-size: 16px; } .sc-footer h2, .sc-footer h3 { letter-spacing: normal; } .sc-foot-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; } .sc-legal { padding: 20px; background: var(--sc-card); border: 1px solid var(--sc-line); border-radius: 16px; box-shadow: var(--sc-shadow-sm); } .sc-legal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .sc-legal-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: #ecfdf5; color: #059669; } .sc-legal-icon svg { width: 22px; height: 22px; } .sc-legal-head h2 { margin: 0; font-size: 20px; font-weight: 600; color: var(--sc-ink); } .sc-legal-grid { display: grid; grid-template-columns: 1fr 1fr; } .sc-legal-grid > div + div { margin-left: 24px; padding-left: 24px; border-left: 1px solid var(--sc-line); } .sc-legal-grid h3 { margin: 0 0 12px; font-size: 16px; font-weight: 600; color: var(--sc-ink); } .sc-legal-grid dl { margin: 0; } .sc-legal-grid dt { margin-top: 12px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-muted); } .sc-legal-grid dd { margin: 2px 0 0; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--sc-ink); overflow-wrap: anywhere; } .sc-legal-grid dd a { color: inherit; } .sc-legal-grid dd a:hover { color: var(--sc-blue); } .sc-pay { margin-top: 28px; padding: 0 4px; } .sc-pay h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--sc-ink); } .sc-pay p { margin: 0 0 14px; font-size: 14px; color: var(--sc-muted); } .sc-pay-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0; padding: 0; list-style: none; } .sc-pay-logos img { display: block; height: 24px; width: auto; max-width: 84px; object-fit: contain; } :root[data-bs-theme="dark"] .sc-pay-logos li { padding: 4px 8px; border-radius: 8px; background: #fff; } .sc-foot-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .sc-foot-col h2 { margin: 0 0 20px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-muted); } .sc-foot-col ul { margin: 0; padding: 0; list-style: none; } .sc-foot-col li { margin-bottom: 12px; line-height: 1.5; } .sc-foot-col a { color: var(--sc-ink); font-size: 16px; font-weight: 500; text-decoration: none; } .sc-foot-col a:hover { color: var(--sc-blue); } .sc-foot-brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: 40px; padding: 24px 0; border-top: 1px solid var(--sc-line); border-bottom: 1px solid var(--sc-line); } .sc-foot-logo img { height: 40px; width: auto; } .sc-foot-products { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--sc-muted); } .sc-foot-products > div { display: flex; align-items: center; gap: 24px; } .sc-foot-products img { display: block; height: 28px; width: auto; } .sc-foot-products a:first-child img { height: 40px; } .sc-foot-social { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; } .sc-foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--sc-card); border: 1px solid var(--sc-line); color: var(--sc-body); box-shadow: var(--sc-shadow-sm); } .sc-foot-social a:hover { color: var(--sc-blue); border-color: var(--sc-blue); } .sc-foot-social svg { width: 18px; height: 18px; } .sc-foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 20px; font-size: 14px; color: var(--sc-muted); } .sc-foot-bottom p { margin: 0; } .sc-foot-bottom a { margin-left: 16px; color: var(--sc-muted); font-weight: 500; } .sc-foot-bottom a:first-child { margin-left: 0; } .sc-foot-bottom a:hover { color: var(--sc-blue); } @media (max-width: 1199.98px) { .sc-foot-top { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 767.98px) { .sc-footer { padding-top: 40px; } .sc-foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sc-legal-grid { grid-template-columns: 1fr; gap: 16px; } .sc-legal-grid > div + div { margin-left: 0; padding-left: 0; border-left: 0; padding-top: 16px; border-top: 1px solid var(--sc-line); } .sc-foot-brand, .sc-foot-bottom { flex-direction: column; align-items: flex-start; } .sc-foot-products { align-items: flex-start; } } @media (max-width: 479.98px) { .sc-foot-links { grid-template-columns: 1fr; } } /* ---- toolbar: Log in / Register (guests), notification bell (clients), mobile call-to-action ---- */ .sc-btn-login, .sc-btn-register { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px; border-radius: 999px; font-size: 14px; line-height: 1; font-weight: 500; letter-spacing: .35px; text-decoration: none; } .sc-btn-login { color: var(--sc-ink); background: transparent; } .sc-btn-login:hover { background: var(--sc-tint); color: var(--sc-ink); text-decoration: none; } .sc-btn-register { background: var(--sc-blue); color: #fff; margin-left: 4px; } .sc-btn-register:hover { background: var(--sc-blue-dark); color: #fff; text-decoration: none; } @media (max-width: 575.98px) { .sc-btn-register { display: none; } .sc-btn-login { padding: 0 12px; } } .header .toolbar > .nav-item { display: flex; align-items: center; } .sc-notification { position: relative; } .sc-notification .btn { color: var(--sc-ink); } .sc-notification-dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px var(--sc-card); } .sc-top-admin { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .16); } .sc-mobile-cta { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; } .sc-mobile-cta a { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 8px; font-size: 18px; font-weight: 500; text-decoration: none; } .sc-mobile-cta .sc-cta-primary { background: var(--sc-blue); color: #fff; } .sc-mobile-cta .sc-cta-secondary { background: var(--sc-card); color: var(--sc-ink); border: 1px solid var(--sc-line); } /* toolbar buttons are bare icons (no Nexus button frame) */ .header .toolbar .btn, .header .toolbar .btn:focus { border: 0; background: transparent; box-shadow: none; } .header .toolbar .btn:hover { background: var(--sc-tint); } /* small rotated-corner caret on the menu items (stablecluster.com) */ @media (min-width: 1200px) { .header #nav > li > a.dropdown-toggle::after, .header .navbar-nav.ml-auto > li > a.dropdown-toggle::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: -3px 3px 0 8px; border: 0; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; vertical-align: middle; transform: rotate(45deg); transition: transform .3s ease; } .header #nav > li.show > a.dropdown-toggle::after, .header .navbar-nav.ml-auto > li.show > a.dropdown-toggle::after { transform: rotate(225deg); margin-top: 1px; } } /* ===================================================================================================================== R3 COMPONENTS: shared contracts for forms, buttons, surfaces, tables, dropdowns, alerts (generic Bootstrap/Nexus classes). --ui-* tokens are aliases of the Nexus tokens so dark mode follows automatically. ===================================================================================================================== */ :root { --ui-text: var(--sc-ink); --ui-text-secondary: var(--sc-body); --ui-text-muted: var(--sc-muted); --ui-surface: var(--sc-card); --ui-surface-subtle: #f8fafc; --ui-page: var(--sc-page); --ui-border: var(--sc-line); --ui-border-strong: #cfd6ee; --ui-primary: var(--primary); --ui-primary-hover: var(--primary-lifted); --ui-primary-soft: #eff6ff; --ui-success: #15805e; --ui-success-hover: #116a4e; --ui-danger: #dc2626; --ui-danger-hover: #b91c1c; --ui-danger-soft: #fef2f2; --ui-warning: #a16207; --ui-warning-hover: #854d0e; --ui-warning-soft: #fffbeb; --ui-focus: rgba(37, 99, 235, .18); --ui-radius-control: 8px; --ui-radius-card: 12px; --ui-shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .035); --ui-shadow-raised: 0 12px 32px rgba(15, 23, 42, .10); --ui-control-height: 46px; --ui-transition: 180ms ease; } :root[data-bs-theme="dark"] { --ui-surface-subtle: #181a3d; --ui-border-strong: rgba(255, 255, 255, .22); --ui-primary-soft: rgba(59, 130, 246, .16); --ui-success: #34d399; --ui-success-hover: #10b981; --ui-danger: #f87171; --ui-danger-hover: #fca5a5; --ui-danger-soft: #3a1d25; --ui-warning-soft: #3a2e12; --ui-warning: #fbbf24; --ui-focus: rgba(96, 165, 250, .22); --ui-shadow-card: none; } p, li, td, th, label, .form-control { overflow-wrap: anywhere; } .text-muted { color: var(--ui-text-muted) !important; } /* Lucide-compatible inline outline icon contract. */ .sc-icon { display: inline-block; flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; } .btn .sc-icon, a .sc-icon { margin-right: 7px; } .btn-icon .sc-icon, .btn.close .sc-icon, .verification-banner-icon .sc-icon { margin: 0; } .sc-icon-spinner { animation: sc-ui-spin .8s linear infinite; } @keyframes sc-ui-spin { to { transform: rotate(360deg); } } /* Form contract. */ .form-group { margin-bottom: 20px; } .form-group > label:not(.field-icon), .control-label { margin-bottom: 7px; color: var(--ui-text); } .form-control, .custom-select, select.form-control { min-height: var(--ui-control-height); padding: 10px 13px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-control); background-color: var(--ui-surface); color: var(--ui-text); box-shadow: none; transition: border-color var(--ui-transition), box-shadow var(--ui-transition), background-color var(--ui-transition); } .form-control::placeholder { color: var(--ui-text-muted); opacity: .85; } .form-control:hover:not(:disabled) { border-color: #94a3b8; } .form-control:focus, .custom-select:focus { border-color: var(--ui-primary); outline: 0; box-shadow: 0 0 0 3px var(--ui-focus); } .form-control:disabled, .form-control[readonly], .custom-select:disabled { cursor: not-allowed; border-color: var(--ui-border); background: var(--ui-surface-subtle); color: var(--ui-text-muted); opacity: .72; } .invalid-feedback, .field-error-msg { margin-top: 6px; color: var(--ui-danger); } .help-block, .form-text { color: var(--ui-text-muted); } /* Button contract. */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 16px; border: 1px solid transparent; border-radius: var(--ui-radius-control) !important; white-space: normal; box-shadow: none; transition: color var(--ui-transition), background-color var(--ui-transition), border-color var(--ui-transition), box-shadow var(--ui-transition), opacity var(--ui-transition); } .btn:hover, .btn:focus { transform: none; text-decoration: none; } .btn-primary { border-color: var(--ui-primary); background: var(--ui-primary); background-image: none; color: #fff; } .btn-primary:hover, .btn-primary:focus { border-color: var(--ui-primary-hover); background: var(--ui-primary-hover); color: #fff; } .btn-success { border-color: var(--ui-success); background: var(--ui-success); background-image: none; color: #fff; } .btn-success:hover, .btn-success:focus { border-color: var(--ui-success-hover); background: var(--ui-success-hover); color: #fff; } .btn-default, .btn-secondary, .btn-outline-primary, .btn-info { border-color: var(--ui-border-strong); background: var(--ui-surface); background-image: none; color: var(--ui-text-secondary); } .btn-default:hover, .btn-secondary:hover, .btn-outline-primary:hover, .btn-info:hover { border-color: #94a3b8; background: var(--ui-surface-subtle); color: var(--ui-text); } .btn-danger { border-color: var(--ui-danger); background: var(--ui-danger); background-image: none; color: #fff; } .btn-danger:hover { border-color: var(--ui-danger-hover); background: var(--ui-danger-hover); color: #fff; } .btn-warning { border-color: #e9d49d; background: var(--ui-warning-soft); background-image: none; color: var(--ui-warning); } .btn-warning:hover { border-color: #d9bc72; background: #fef3c7; color: var(--ui-warning-hover); } .btn-link { min-height: 44px; padding-inline: 8px; color: var(--ui-primary); background: transparent; } .btn-link:hover { color: var(--ui-primary-hover); } .btn-sm { min-height: 40px; padding: 7px 13px; } .btn-lg { min-height: 50px; padding: 12px 20px; } .btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--ui-primary) !important; outline-offset: 3px; } .btn:disabled, .btn.disabled, .btn[aria-disabled="true"] { cursor: not-allowed; pointer-events: none; opacity: .5; box-shadow: none; } .btn[aria-busy="true"], .btn.is-loading { cursor: wait; } .btn[aria-busy="true"] .sc-icon:not(.sc-icon-spinner), .btn.is-loading .sc-icon:not(.sc-icon-spinner) { opacity: .5; } /* Surface, navigation and data contracts. */ .card, .panel, .modal-content, .dropdown-menu { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-card); background: var(--ui-surface); box-shadow: var(--ui-shadow-card); } .card-header, .panel-heading, .modal-header { padding: 16px 20px; border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text); } .card-body, .panel-body { padding: 20px; } .list-group-item { min-height: 44px; border-color: var(--ui-border); line-height: 1.45; } .table-responsive { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table { color: var(--ui-text-secondary); } .table th { border-color: var(--ui-border); background: var(--ui-surface-subtle); color: var(--ui-text-muted); } .table td { border-color: var(--ui-border); vertical-align: middle; } .dropdown-menu { padding: 8px; } .dropdown-item { min-height: 40px; padding: 9px 12px; border-radius: 7px; } .dropdown-item:hover, .dropdown-item:focus { background: var(--ui-primary-soft); color: var(--ui-text); } .alert { border-width: 1px; border-radius: var(--ui-radius-control); box-shadow: none; } /* Auth and reset screens consume the same contracts. */ .ph-reset-body .input-group { min-height: var(--ui-control-height); border-color: var(--ui-border-strong); border-radius: var(--ui-radius-control); } .ph-reset-body .input-group-text { color: var(--ui-text-muted); } .ph-reset-body .form-group > .form-control { height: var(--ui-control-height); border-color: var(--ui-border-strong); border-radius: var(--ui-radius-control); } .ph-reset-body .btn-primary, .ph-reset-body input[type="submit"].btn-primary, .ph-reset-body input[type="reset"].btn-default { min-height: var(--ui-control-height); border-radius: var(--ui-radius-control) !important; } .ph-reset-body .sc-form-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 0; } .ph-reset-body .sc-form-actions .btn, .ph-reset-body .sc-form-actions input { width: 100%; margin: 0; } .ph-reset-links a { display: inline-flex; align-items: center; min-height: 44px; } .ph-reset-links a .sc-icon { margin-right: 6px; } /* Keep verification notices on the shared surface contract despite older dashboard overrides. */ aside.verification-banner.email-verification { border-color: var(--ui-border) !important; border-radius: var(--ui-radius-card) !important; background: var(--ui-surface) !important; color: var(--ui-text-secondary) !important; } aside.verification-banner.email-verification .verification-banner-inner { padding: 12px 16px !important; } aside.verification-banner.email-verification .verification-banner-icon { width: 36px; height: 36px; border-radius: var(--ui-radius-control); background: var(--ui-primary-soft); color: var(--ui-primary); } aside.verification-banner.email-verification .btn.btn-action { border-color: var(--ui-border-strong) !important; border-radius: var(--ui-radius-control) !important; background: var(--ui-surface) !important; color: var(--ui-primary); } :root[data-bs-theme="dark"] aside.verification-banner.email-verification { background: var(--ui-surface) !important; border-color: var(--ui-border) !important; } :root[data-bs-theme="dark"] aside.verification-banner.email-verification .btn.btn-action { background: var(--ui-surface-subtle) !important; border-color: var(--ui-border-strong) !important; } @media (max-width: 575.98px) { .card-header, .panel-heading, .modal-header, .card-body, .panel-body { padding-inline: 16px; } .btn:not(.btn-icon):not(.close) { max-width: 100%; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; animation-iteration-count: 1 !important; } /* motion-sickness safe: no scroll animation or looping; short fades/colour transitions stay */ } /* R4-R6 STABLE DESIGN IMPORT (generated by tools/nexusstable-css/make.sh from stabletemplate/css/custom.css) */ @keyframes scFaqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @keyframes sc-ui-spin { to { transform: rotate(360deg); } } :root { --ph-blue: #1e7bc1; --ph-blue-dark: #166aa6; --ph-orange: #f97316; --ph-orange-dark: #ea580c; --ph-navy: #0b2a5b; --ph-ink: #111827; --ph-text: #1f2937; --ph-text-2: #374151; --ph-text-3: #4b5563; --ph-muted: #6b7280; --ph-border-strong: #cbd5e1; --ph-line: #e3ebf6; --ph-line-soft: #eef2f7; --ph-tint: #f6f9fc; --ph-page: #faf7f4; } html { font-size: 14px; } :root { --white: #fff; --neutral-50: #fbf9fa; --neutral-100: #f4f5f7; --neutral-200: #e4e4e7; --neutral-300: #d0d5dd; --neutral-400: #9ca3af; --neutral-500: var(--ph-muted); --neutral-600: var(--ph-text-3); --neutral-700: var(--ph-text-2); --neutral-800: var(--ph-text); --neutral-900: var(--ph-ink); --neutral-950: #030712; --primary-50: var(--neutral-50); --primary-100: var(--neutral-100); --primary-200: var(--neutral-200); --primary-300: var(--neutral-300); --primary-400: var(--neutral-400); --primary-500: var(--neutral-500); --primary-600: var(--neutral-600); --primary-700: var(--neutral-700); --primary-800: var(--neutral-800); --primary-900: var(--neutral-900); --primary-950: var(--neutral-900); --primary: var(--neutral-900); --primary-lifted: var(--neutral-800); --primary-accented: var(--neutral-700); --secondary: var(--neutral-500); --secondary-lifted: var(--neutral-600); --secondary-accented: var(--neutral-700); --success: #00a63e; --success-lifted: #008236; --success-accented: #016630; --info: #155dfc; --info-lifted: #1447e6; --info-accented: #193cb8; --notice: #7f22fe; --notice-lifted: #7008e7; --notice-accented: #5d0ec0; --warning: #f54a00; --warning-lifted: #ca3500; --warning-accented: #9f2d00; --error: #e7000b; --error-lifted: #c10007; --error-accented: #9f0712; --grayscale: var(--neutral-900); --grayscale-lifted: var(--neutral-800); --grayscale-accented: var(--neutral-700); --neutral: var(--neutral-500); --neutral-lifted: var(--neutral-600); --neutral-accented: var(--neutral-700); --text-inverted: var(--white); --text-muted: var(--neutral-400); --text-lifted: var(--neutral-500); --text-accented: var(--neutral-600); --text: var(--neutral-900); --border-muted: var(--neutral-200); --border: var(--neutral-300); --border-lifted: var(--neutral-400); --border-accented: var(--neutral-600); --bg: var(--white); --bg-muted: var(--neutral-50); --bg-lifted: var(--neutral-100); --bg-accented: var(--neutral-200); --bg-inverted: var(--neutral-900); --yellow-200: #fff085; --yellow-300: #ffdf20; --teal-300: #46edd5; --teal-400: #00d5be; --emerald-300: #5ee9b5; --pink-400: #fb64b6; --text-xs: 0.625rem; --text-sm: 0.75rem; --text-md: 0.875rem; --text-lg: 1rem; --outline-sm: 1px; --outline-md: 2px; --outline-lg: 3px; --rounding-sm: 0.25rem; --rounding-md: 0.5rem; --rounding-lg: 0.75rem; --letter-spacing: 0em; --disabled-opacity: 25%; } :root { --primary: #0066CC; --primary-dark: #0054AA; --primary-darker: #064476; --success: #16A34A; --info: #0891B2; --worning: var(--ph-orange); --danger: #DC2626; --gray: #5B6474; --gray-light: var(--ph-page); --custom-radius: 18px; --primary-light: #E0EEFE; --danger-light: #FEE2E2; --warning-light: #FFEDD5; --success-light: #DCFCE7; --body-color: #4D5766; --heading-color: #1A2033; --border-color: #E9E2DC; --border-dark-color: #E9E2DC; --border-primary-light: #0066CC; --font-family-sans-serif: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-family-monospace: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --accent: #2563eb; --accent-dark: #D95317; --accent-soft: #FFF1E8; --cream: var(--ph-page); --card-shadow: 0 14px 35px rgba(23,32,51,0.09), 0 2px 8px rgba(23,32,51,0.05); --gradient-orange: linear-gradient(81deg, var(--ph-orange), #FB923C 50%, #F88705); --gradient-blue: linear-gradient(-81deg, #0054AA, #0066CC 50%, #0080FF); } :root[data-bs-theme="dark"] { --primary: #3B9BFF; --primary-dark: #0066CC; --primary-darker: #0B2A4A; --success: #83D617; --info: #2FD9EF; --worning: #F9951B; --danger: #E83737; --gray: #2f3260; --gray-light: #181a3d; --dark: #0b0c1f; --custom-radius: 18px; --primary-light: #0B2A4A; --danger-light: #FDE4D7; --warning-light: #FEF2D1; --success-light: #F1FCCF; --body-color: #a4a7d6; --heading-color: #e8e9ff; --border-color: #64748b; --border-dark-color: #08188C; --border-primary-light: #1430D0; } html { scroll-behavior: smooth; } body { background-color: var(--cream); color: var(--body-color); font-size: 15px; -webkit-font-smoothing: antialiased; } :root[data-bs-theme="dark"] body, :root[data-bs-theme="dark"] .sc-body-wrapper { background-color: var(--dark, #0b0c1f); } h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.01em; } a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus-visible { outline: 3px solid rgba(243, 107, 35, 0.42) !important; outline-offset: 3px; } .container { width: 100%; max-width: 1440px; padding-left: 16px; padding-right: 16px; } @media (min-width: 640px) { .container { padding-left: 24px; padding-right: 24px; } } @media (min-width: 1024px) { .container { padding-left: 32px; padding-right: 32px; } } :root[data-bs-theme="dark"] .ph-topbar-static { color: #c9cbf0; } :root[data-bs-theme="dark"] .ph-theme-track { background: #2f3260; border-color: #3b3f73; } :root[data-bs-theme="dark"] .ph-theme-knob { transform: translateX(22px); background: #0b0c1f; } :root[data-bs-theme="dark"] .ph-i-sun { display: none; } :root[data-bs-theme="dark"] .ph-i-moon { display: inline; } :root[data-bs-theme="dark"] .ph-mobile-theme { color: #e8e9ff; } .ph-mega { flex: 0 1 auto; gap: 4px; margin: 0 16px; } .ph-mega-item { position: static; } .ph-mega-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border: 0; border-radius: 12px; background: transparent; color: var(--ph-text-2); font: 600 16px/24px var(--font-family-sans-serif); white-space: nowrap; cursor: pointer; transition: color .2s ease, background-color .2s ease; } .ph-mega-btn:hover { color: var(--ph-orange); background: #f9fafb; } .ph-mega-btn i { font-size: 11px; transition: transform .3s ease; } .ph-mega-panel { display: none; position: absolute; top: 100%; left: 0; width: 100%; z-index: 1100; background: #fff; border: 1px solid #e9e2dc; border-top: 0; border-bottom: 3px solid #2563eb; border-radius: 0 0 12px 12px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); transform-origin: top center; } .sc-notification button { color: var(--ph-text-2); } .ph-mobile-toggle { display: flex; align-items: center; justify-content: space-between; padding: 12px 4px; border-bottom: 1px solid var(--border-color); color: var(--ph-text); font-weight: 600; } .ph-mobile-toggle i { font-size: 11px; transition: transform .3s ease; } .ph-mobile-sub { padding: 6px 0 6px 8px; } .ph-mobile-sub a { display: flex; align-items: center; gap: 10px; padding: 8px 4px; color: var(--ph-text-3); font-weight: 500; } .ph-mobile-nav { margin-bottom: 16px; } :root[data-bs-theme="dark"] .ph-topbar-links img { filter: brightness(0) invert(0.8); } :root[data-bs-theme="dark"] .sc-toolbar-wrap .toolbar li a.cart-btn, :root[data-bs-theme="dark"] .sc-toolbar-wrap .toolbar li button.btn, :root[data-bs-theme="dark"] .sc-notification button { color: #e8e9ff; } :root[data-bs-theme="dark"] .sc-header .main-navbar-wrapper #nav > li > a { color: #e8e9ff; } :root[data-bs-theme="dark"] .sc-header, :root[data-bs-theme="dark"] .sc-header:not(.sc-double-header) { background: rgba(15, 23, 42, 0.94); border-bottom-color: rgba(255, 255, 255, 0.08); } :root[data-bs-theme="dark"] .ph-topbar { background: #12132b; border-bottom-color: rgba(255, 255, 255, 0.08); color: #c9cbf0; } :root[data-bs-theme="dark"] .ph-topbar a { color: #c9cbf0; } :root[data-bs-theme="dark"] .ph-topbar-links li { border-right-color: rgba(255, 255, 255, 0.1); } :root[data-bs-theme="dark"] .ph-mega-btn, :root[data-bs-theme="dark"] .ph-mobile-toggle { color: #e8e9ff; } :root[data-bs-theme="dark"] .ph-mega-btn:hover { background: #181a3d; } :root[data-bs-theme="dark"] .ph-mega-panel { background: #12132b; border-color: rgba(255, 255, 255, 0.1); } .btn { border-radius: 999px; font-weight: 600; letter-spacing: 0; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } .btn:hover { transform: translateY(-1px); } .btn-primary, .btn-primary.disabled { background: var(--gradient-blue); border-color: var(--primary); color: #fff; } .btn-primary:hover, .btn-primary:active, .btn-primary:focus { background: var(--primary-dark) !important; border-color: var(--primary-dark) !important; box-shadow: 0 8px 20px rgba(0, 102, 204, 0.28) !important; } .btn-success, .btn-checkout { background: var(--gradient-orange); border-color: var(--accent); color: #fff; } .btn-success:hover, .btn-checkout:hover { background: var(--accent-dark) !important; border-color: var(--accent-dark) !important; color: #fff; box-shadow: 0 8px 20px rgba(243, 107, 35, 0.3) !important; } .btn-default, .btn-outline-primary { background: #fff; color: var(--primary); border: 1px solid var(--primary); } .btn-default:hover, .btn-outline-primary:hover { background: var(--primary-light); border-color: var(--primary); color: var(--primary-dark); } .card, .panel { border-radius: 18px; border: 1px solid var(--border-color); box-shadow: var(--card-shadow); } .card-sidebar { border-radius: 18px; } .card:hover { border-bottom-color: var(--accent); } .form-control { border-radius: 12px; background-color: #fff; } .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15); } .page-link, .pagination .active .page-link { border-radius: 10px; } :root[data-bs-theme="dark"] .form-control { background-color: #181a3d; } .sc-page-header { background: linear-gradient(135deg, var(--primary-darker), var(--primary-dark) 55%, var(--primary)); } .bg-gradient { background: radial-gradient(circle at 92% 0%, rgba(243, 107, 35, .30), transparent 340px), radial-gradient(circle at 6% 130%, rgba(0, 128, 255, .30), transparent 380px), linear-gradient(135deg, var(--ph-navy) 0%, #0a3f8f 55%, #0054aa 100%); } .sc-page-header.bg-gradient { box-shadow: inset 0 -3px 0 #2563eb; } .sc-page-header h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; } .sc-page-header-info p { color: #d6e4f7; } .sc-breadcrumb { border-radius: 12px 12px 0 0; } .ph-page-auth section#main-body.sc-auth-wrap { display: block; min-height: 100vh !important; padding: 0 !important; background: #fff !important; } .ph-page-auth #main-body > .container { max-width: none; width: 100%; padding: 0; } .ph-page-auth #main-body > .container > .row { margin: 0; } .ph-login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; background: #fff; } .ph-login-main { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 32px 48px 28px; background: #fff; } .ph-login-logo { display: inline-block; align-self: flex-start; } .ph-login-logo img { display: block; width: auto; height: 38px; } .ph-login-center { width: 100%; max-width: 436px; margin: auto; padding: 40px 0; } .ph-login-head { margin-bottom: 36px; text-align: center; } .ph-login-badge { display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; margin-bottom: 28px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 22px; box-shadow: 0 0 0 12px rgba(0, 102, 204, .10), 0 0 0 24px rgba(0, 102, 204, .05); } .ph-login-head h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--ph-ink); } .ph-login-head p { margin: 10px 0 0; font-size: 15px; color: #5b6474; } .ph-login .form-group { margin-bottom: 20px; } .ph-login .form-control-label { margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--ph-text); } .ph-login .input-group { flex-wrap: nowrap; align-items: center; min-height: 48px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; } .ph-login .input-group:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 102, 204, .15); } .ph-login .input-group-prepend, .ph-login .input-group-append { display: flex; align-items: center; } .ph-login .input-group-text { padding: 0 0 0 14px; border: 0; background: transparent; color: var(--ph-muted); font-size: 18px; } .ph-login .input-group .form-control { flex: 1 1 auto; height: 46px; padding: 0 14px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--ph-ink); font-size: 15px; } .ph-login .input-group .form-control::placeholder { color: #9ca3af; } .ph-login .input-group .form-control:focus, .ph-login .input-group .form-control:focus-visible { outline: none !important; box-shadow: none; } .ph-login .alert { margin-bottom: 20px; border-radius: 12px; font-size: 14px; } .ph-login .btn-reveal-pw { padding: 0 14px; border: 0; background: transparent; color: var(--ph-text-3); font-size: 18px; cursor: pointer; } .ph-login .btn-reveal-pw:hover { color: var(--primary); } .ph-eye-hide { display: none; } .ph-forgot { font-size: 12.5px; font-weight: 600; color: var(--primary); } .ph-forgot:hover { color: var(--primary-dark); text-decoration: underline; } .ph-remember { display: flex; align-items: center; gap: 10px; margin: 4px 0 22px; font-size: 14.5px; color: var(--ph-text-2); cursor: pointer; } .ph-remember input { position: static; width: 18px; height: 18px; margin: 0; accent-color: var(--primary); } .ph-login-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 12px; font-size: 15.5px; font-weight: 600; } .ph-login-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 24px; font-size: 14px; color: #5b6474; } .ph-login-links p { margin: 0; } .ph-login-links a { font-weight: 600; color: var(--primary); } .ph-login-lang { padding: 0; border: 0; background: none; font-size: 13px; color: #5b6474; cursor: pointer; } .ph-login-note { max-width: 420px; margin: 0 auto; font-size: 12px; line-height: 1.6; text-align: center; color: var(--ph-muted); } .ph-login-note a { color: inherit; text-decoration: underline; } .ph-register .ph-login-main { padding-bottom: 28px; } .ph-register-center { max-width: 600px; padding: 32px 0 24px; } .ph-register .ph-login-head { margin-bottom: 28px; } .ph-register #containerNewUserSignup > .text-center > h1 { display: none; } .ph-register #registration { padding: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none; } .ph-register #registration .card { border: 0; border-radius: 0; background: transparent; box-shadow: none; } .ph-register #registration .card-body { overflow: visible; } .ph-register #registration h3.h6 { margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid #eef0f3; font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ph-muted); } .ph-register #registration .prepend-icon { display: block; margin-bottom: 16px; } .ph-register #registration .form-group { margin-bottom: 16px; } .ph-register #registration .field, .ph-register #registration select.form-control, .ph-register #registration .form-control { height: 48px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; box-shadow: none; color: var(--ph-ink); font-size: 14.5px; transition: border-color .2s ease, box-shadow .2s ease; } .ph-register #registration .prepend-icon .field { padding-left: 44px; } .ph-register #registration .field::placeholder, .ph-register #registration .form-control::placeholder { color: #9ca3af; font-size: 14.5px; } .ph-register #registration .field:focus-visible, .ph-register #registration .form-control:focus-visible { outline: none !important; } .ph-register #registration .field:focus, .ph-register #registration .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 102, 204, .15); outline: none; } .ph-register #registration .prepend-icon .field-icon { height: 48px; width: 44px; border: 0; line-height: 48px; } .ph-register #registration .field-icon i { color: var(--ph-muted); font-size: 16px; } .ph-register #registration .prepend-icon:focus-within .field-icon i { color: var(--primary); } .ph-register #registration .intl-tel-input { display: block; width: 100%; } .ph-register #registration label:not(.field-icon):not(.form-check) { font-size: 13.5px; font-weight: 600; color: var(--ph-text-2); } .ph-register #registration .generate-password { border-radius: 10px; font-weight: 600; } .ph-register #registration .password-strength-meter .progress { height: 8px; border-radius: 999px; background: #eef0f3; } .ph-register #registration .password-strength-meter .progress-bar { border-radius: 999px; } .ph-register #registration .password-strength-meter p { margin: 6px 0 0; font-size: 12.5px; } .ph-register #registration .form-check { display: flex; align-items: flex-start; gap: 10px; padding-left: 0; font-size: 14px; color: var(--ph-text-2); } .ph-register #registration .form-check input[type="checkbox"] { position: static; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--primary); } .ph-register #registration a { color: var(--primary); font-weight: 600; } .ph-register #registration input[type="submit"].btn-primary, .ph-register #registration input[type="submit"].btn-primary:hover, .ph-register #registration input[type="submit"].btn-primary:focus { color: #fff !important; } .ph-register #registration input[type="submit"].btn-primary { width: 100%; min-height: 52px; border-radius: 12px; font-size: 15.5px; font-weight: 600; } .ph-register #registration .d-flex.justify-content-between { flex-direction: column; align-items: stretch !important; gap: 14px; } .ph-register #registration .d-flex.justify-content-between ul { align-self: center; margin: 0; float: none !important; } .ph-register #registration .d-flex.justify-content-between .btn { font-size: 13px; color: #5b6474; } .ph-register #registration .auth-footer { margin-top: 22px; font-size: 14px; color: #5b6474; text-align: center; } .ph-register .alert { border-radius: 12px; font-size: 14px; } .ph-register .ph-login-panel { position: sticky; top: 0; align-self: start; height: 100vh; } @media (max-width: 991.98px) { .ph-register .ph-login-panel { display: none; } .ph-register-center { padding: 24px 0; } } :root[data-bs-theme="dark"] .ph-register #registration .field, :root[data-bs-theme="dark"] .ph-register #registration .form-control { background: #12132b; border-color: #23264f; color: #e8e9ff; } :root[data-bs-theme="dark"] .ph-register #registration h3.h6, :root[data-bs-theme="dark"] .ph-register #registration h3.card-title { border-color: #23264f; color: #a4a7d6; } :root[data-bs-theme="dark"] .ph-register #registration label:not(.field-icon):not(.form-check), :root[data-bs-theme="dark"] .ph-register #registration .form-check, :root[data-bs-theme="dark"] .ph-register #registration .auth-footer { color: #c9cbf0; } :root[data-bs-theme="dark"] .ph-register #registration .field-icon i { color: #a4a7d6; } .ph-reset .ph-login-head { margin-bottom: 28px; } .ph-reset-body > .mb-4 { margin-bottom: 24px !important; text-align: center; } .ph-reset-body > .mb-4 > h6 { display: none; } .ph-reset-body > .mb-4 > p { margin: 0 0 24px; font-size: 15px; line-height: 1.6; text-align: center; color: #5b6474; } .ph-reset-body label { margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--ph-text); } .ph-reset-body .form-group { margin-bottom: 20px; } .ph-reset-body .btn-primary { display: block; width: 100%; min-height: 50px; border-radius: 12px; font-size: 15.5px; font-weight: 600; } .ph-reset-links { flex-direction: column; align-items: center; gap: 10px; text-align: center; } .ph-reset-links a { font-weight: 600; color: var(--primary); } :root[data-bs-theme="dark"] .ph-reset-body .progress, :root[data-bs-theme="dark"] .ph-register #registration .password-strength-meter .progress { background: #181a3d; } :root[data-bs-theme="dark"] .ph-reset-body > .mb-4 > p, :root[data-bs-theme="dark"] .ph-reset-body > p { color: #a4a7d6; } :root[data-bs-theme="dark"] .ph-reset-body label { color: #c9cbf0; } :root[data-bs-theme="dark"] .ph-reset-body .form-group > .form-control { background: #12132b; border-color: #23264f; color: #e8e9ff; } :root[data-bs-theme="dark"] .ph-reset-body input[type="reset"].btn-default { background: #12132b; border-color: #23264f; color: #c9cbf0; } .ph-login-panel { position: relative; overflow: hidden; min-width: 0; background: radial-gradient(circle at 92% 4%, rgba(30, 123, 193, .20), transparent 440px), radial-gradient(circle at 8% 96%, rgba(249, 115, 22, .12), transparent 400px), linear-gradient(160deg, var(--ph-page) 0%, #f1f6fb 55%, #e6f0f9 100%); } .ph-login-panel-inner { position: relative; z-index: 2; padding: 72px 64px 0; } .ph-login-panel h2 { max-width: 520px; margin: 0 0 32px; font-size: clamp(28px, 2.6vw, 38px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; color: var(--ph-ink); } .ph-login-points li { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font-size: 15px; color: var(--ph-text-2); } .ph-login-point-icon { display: inline-flex; flex: 0 0 36px; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(23, 32, 51, .08); color: var(--primary); font-size: 16px; } .ph-login-mock { position: absolute; right: -70px; bottom: -64px; display: flex; gap: 16px; width: 700px; padding: 18px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 24px; background: rgba(255, 255, 255, .72); box-shadow: 0 30px 70px rgba(23, 32, 51, .16); transform: rotate(-7deg); transform-origin: bottom right; } .ph-mock-side { display: flex; flex: 0 0 150px; flex-direction: column; gap: 12px; padding: 14px; border-radius: 16px; background: #fff; } .ph-ms-dot { width: 22px; height: 22px; border-radius: 7px; background: var(--primary); } .ph-ms-bar { height: 10px; border-radius: 6px; background: #d1d5db; } .ph-ms-bar-dark { width: 70%; background: #374151; } .ph-ms-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; } .ph-ms-row i { width: 10px; height: 10px; border-radius: 3px; background: var(--ph-border-strong); } .ph-ms-row b { flex: 1; height: 8px; border-radius: 5px; background: #e5e7eb; } .ph-ms-row.is-active { background: #e8efff; } .ph-ms-row.is-active i { background: var(--primary); } .ph-ms-row.is-active b { background: #9db8f5; } .ph-mock-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; } .ph-mm-title { width: 38%; height: 14px; border-radius: 8px; background: var(--ph-text-2); } .ph-mm-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .ph-mm-tile { display: flex; flex-direction: column; gap: 22px; padding: 14px; border-radius: 14px; background: #fff; box-shadow: 0 1px 3px rgba(23, 32, 51, .06); } .ph-mm-tile i { width: 24px; height: 24px; border-radius: 8px; } .ph-mm-tile i.is-blue { background: #dbe6ff; } .ph-mm-tile i.is-green { background: #c9f4dc; } .ph-mm-tile i.is-yellow { background: #fdeeb4; } .ph-mm-tile b { width: 55%; height: 10px; border-radius: 6px; background: var(--ph-text-2); } .ph-mm-chart { display: flex; align-items: flex-end; gap: 14px; height: 140px; padding: 16px; border-radius: 14px; background: #fff; } .ph-mm-chart span { flex: 1; border-radius: 8px 8px 0 0; background: #dbe6ff; } .ph-mm-chart span.is-hot { background: var(--primary); } .ph-mm-chart span:nth-child(1) { height: 34%; } .ph-mm-chart span:nth-child(2) { height: 52%; } .ph-mm-chart span:nth-child(3) { height: 44%; } .ph-mm-chart span:nth-child(4) { height: 70%; } .ph-mm-chart span:nth-child(5) { height: 92%; } .ph-mm-chart span:nth-child(6) { height: 58%; } .ph-mm-chart span:nth-child(7) { height: 40%; } @media (max-width: 991.98px) { .ph-login { grid-template-columns: 1fr; } .ph-login-panel { display: none; } .ph-login-main { min-height: 100vh; padding: 24px 20px; } } @media (max-width: 575.98px) { .ph-login-head h1 { font-size: 24px; } .ph-login-links { flex-direction: column; align-items: flex-start; } } @media (prefers-reduced-motion: reduce) { .ph-login .input-group { transition: none; } } :root[data-bs-theme="dark"] .ph-page-auth section#main-body.sc-auth-wrap, :root[data-bs-theme="dark"] .ph-login, :root[data-bs-theme="dark"] .ph-login-main { background: #0b0c1f !important; } :root[data-bs-theme="dark"] .ph-login-head h1, :root[data-bs-theme="dark"] .ph-login .form-control-label, :root[data-bs-theme="dark"] .ph-login .input-group .form-control { color: #e8e9ff; } :root[data-bs-theme="dark"] .ph-login-head p, :root[data-bs-theme="dark"] .ph-login-links, :root[data-bs-theme="dark"] .ph-login-lang, :root[data-bs-theme="dark"] .ph-login-note, :root[data-bs-theme="dark"] .ph-remember { color: #a4a7d6; } :root[data-bs-theme="dark"] .ph-login .input-group { background: #12132b; border-color: #23264f; } :root[data-bs-theme="dark"] .ph-login .input-group-text, :root[data-bs-theme="dark"] .ph-login .btn-reveal-pw { color: #a4a7d6; } :root[data-bs-theme="dark"] .ph-login-panel { background: linear-gradient(160deg, #0b0c1f 0%, #111d3a 55%, #12244d 100%); } :root[data-bs-theme="dark"] .ph-login-panel h2 { color: #e8e9ff; } :root[data-bs-theme="dark"] .ph-login-points li { color: #c9cbf0; } :root[data-bs-theme="dark"] .ph-login-mock { background: rgba(17, 24, 39, .75); border-color: rgba(255, 255, 255, .08); } :root[data-bs-theme="dark"] .ph-mock-side, :root[data-bs-theme="dark"] .ph-mm-tile, :root[data-bs-theme="dark"] .ph-mm-chart { background: #181a3d; } :root[data-bs-theme="dark"] .ph-review-intro h2, :root[data-bs-theme="dark"] .ph-tp, :root[data-bs-theme="dark"] .ph-tp:hover, :root[data-bs-theme="dark"] .ph-tp-score strong { color: #e8e9ff; } :root[data-bs-theme="dark"] .ph-review-intro > p, :root[data-bs-theme="dark"] .ph-tp-score { color: #a4a7d6; } :root[data-bs-theme="dark"] .ph-review-kicker { color: #fb923c; } :root[data-bs-theme="dark"] .ph-faq { background: linear-gradient(180deg, #0b0c1f, #0b0c1f); } :root[data-bs-theme="dark"] .ph-faq::before { opacity: .15; } :root[data-bs-theme="dark"] .ph-faq-head h2, :root[data-bs-theme="dark"] .ph-support-header h3, :root[data-bs-theme="dark"] .ph-faq-q { color: #e8e9ff; } :root[data-bs-theme="dark"] .ph-support-card, :root[data-bs-theme="dark"] .ph-faq-item, :root[data-bs-theme="dark"] .ph-contact-link { background: #12132b; border-color: rgba(255, 255, 255, .1); } :root[data-bs-theme="dark"] .ph-support-header, :root[data-bs-theme="dark"] .ph-support-actions { background: #12132b; } :root[data-bs-theme="dark"] .ph-support-art { background: #0f1b2e; } :root[data-bs-theme="dark"] .ph-support-art::after { background: linear-gradient(180deg, transparent, #12132b); } :root[data-bs-theme="dark"] .ph-support-header p, :root[data-bs-theme="dark"] .ph-faq-a p, :root[data-bs-theme="dark"] .ph-connect span { color: #a4a7d6; } :root[data-bs-theme="dark"] .ph-contact-link, :root[data-bs-theme="dark"] .ph-support-secondary { color: #e8e9ff !important; } :root[data-bs-theme="dark"] .ph-support-secondary { background: #181a3d; border-color: rgba(255, 255, 255, .12); } :root[data-bs-theme="dark"] .ph-faq-icon { background: #181a3d; color: #e8e9ff; } :root[data-bs-theme="dark"] .ph-faq-item[open] .ph-faq-icon { background: #0066cc; color: #fff; } :root[data-bs-theme="dark"] .ph-faq-a { border-top-color: rgba(255, 255, 255, .08); } :root[data-bs-theme="dark"] .ph-connect::before, :root[data-bs-theme="dark"] .ph-connect::after { background: rgba(255, 255, 255, .15); } .verification-banner { padding: 12px 0; border-bottom: 1px solid #fde2b8; background: #fff8eb; color: #5b3a05; font-weight: 500; } .verification-banner .text { display: inline; padding: 0; font-size: 14.5px; line-height: 1.5; vertical-align: middle; } .verification-banner .btn { margin: 0; padding: 0 22px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: normal; } .verification-banner .btn.close { min-width: 44px; margin: 0; padding: 0; border-radius: 50%; color: #7c5a1d; font-size: 24px; line-height: 1; } .verification-banner .btn.close:hover { background: rgba(180, 83, 9, .1); color: #5b3a05; } .verification-banner.email-verification .btn.btn-action, .verification-banner.email-verification .btn.btn-action:active { border: 2px solid var(--primary); background: #fff; color: var(--primary); } .verification-banner.email-verification .btn.btn-action:hover { background: var(--primary); color: #fff; } .verification-banner .btn:focus-visible { outline: 3px solid rgba(0, 102, 204, .45); outline-offset: 2px; } @media (min-width: 768px) { .verification-banner .btn { padding: 0 24px; } } :root[data-bs-theme="dark"] .verification-banner { border-bottom-color: #4a3a12; background: #2a2208; color: #f6e3b4; } :root[data-bs-theme="dark"] .verification-banner .fas { color: #fbbf24; } :root[data-bs-theme="dark"] .verification-banner .btn.close { color: #f6e3b4; } :root[data-bs-theme="dark"] .verification-banner.email-verification .btn.btn-action { border-color: #60a5fa; background: transparent; color: #93c5fd; } :root[data-bs-theme="dark"] .verification-banner.email-verification .btn.btn-action:hover { background: #60a5fa; color: #0b0c1f; } @media (max-width: 1199.98px) { html.ph-menu-open, html.ph-menu-open body { overflow: hidden; } .ph-mobile-nav { margin-bottom: 0; } .ph-mobile-toggle { min-height: 52px; padding: 12px 0; font-size: 17px; } .ph-mobile-toggle:hover { color: var(--ph-orange); text-decoration: none; } .ph-mobile-sub { padding: 4px 0 10px; } .ph-mobile-sub a { min-height: 44px; padding: 8px 10px; border-radius: 10px; font-size: 15px; } .ph-mobile-sub a:hover { background: #fff7ed; color: #c2410c; text-decoration: none; } :root[data-bs-theme="dark"] .offcanvas-collapse { background: #0b0c1f; box-shadow: 8px 0 32px rgba(0, 0, 0, .5); } :root[data-bs-theme="dark"] .ph-offcanvas-head { background: #0b0c1f; } :root[data-bs-theme="dark"] .ph-offcanvas-close { color: #e8e9ff; } :root[data-bs-theme="dark"] .ph-offcanvas-close:hover { background: #181a3d; } :root[data-bs-theme="dark"] #mainNavbar .ph-client-nav > li > a { color: #e8e9ff; } :root[data-bs-theme="dark"] .ph-mobile-sub a, :root[data-bs-theme="dark"] #mainNavbar .ph-client-nav .dropdown-item, :root[data-bs-theme="dark"] #mainNavbar .ph-client-nav .dropdown-item > a { color: #c9cbf0; } :root[data-bs-theme="dark"] .ph-mobile-sub a:hover, :root[data-bs-theme="dark"] #mainNavbar .ph-client-nav .dropdown-item:hover, :root[data-bs-theme="dark"] #mainNavbar .ph-client-nav .dropdown-item > a:hover { background: #181a3d; color: #fdba74; } } @media (max-width: 1199.98px) { :root[data-bs-theme="dark"] #mainNavbar .ph-client-nav .collapsable-dropdown-menu > li.dropdown-item > a { color: #e8e9ff; } } body:has(> .invoice-container) { background: var(--ph-page); font-family: "Euclid Circular A", "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ph-text); } .invoice-container { max-width: 880px; margin: 32px auto 16px; padding: 48px 56px 56px; border: 1px solid #e9e2dc; border-radius: 18px; background: #fff; box-shadow: 0 12px 32px rgba(23, 32, 51, .06); font-size: 15px; line-height: 1.6; } .invoice-container .invoice-header { align-items: center; } .invoice-container .invoice-header .invoice-col:last-child { text-align: right; } .invoice-container .ph-inv-logo { margin: 0 0 14px; } .invoice-container .ph-inv-logo img { display: block; height: 44px; width: auto; } .invoice-container .invoice-header h5 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--ph-ink); } .invoice-container hr { margin: 24px 0; border-top: 1px solid #eef0f3; } .invoice-container .invoice-status { margin: 0 0 10px; font-size: 13px; letter-spacing: .08em; } .invoice-container .invoice-status span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; background: #f3f4f6; color: var(--ph-text-2); font-weight: 800; line-height: 1.2; } .invoice-container .invoice-status span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .invoice-container .invoice-status .unpaid { background: #fff1e6; color: #9a3412; } .invoice-container .invoice-status .paid { background: #e7f6ec; color: #166534; } .invoice-container .invoice-header .small-text { font-size: 14px; color: var(--ph-text-3); } .invoice-container .payment-btn-container:not(:empty) { margin-top: 14px; padding: 14px 18px; border: 1px solid var(--ph-line); border-radius: 14px; background: #f8fbff; font-size: 14px; line-height: 1.8; text-align: left !important; color: var(--ph-text-2); } .invoice-container .payment-btn-container .btn { display: block; width: 100%; min-height: 48px; border-radius: 12px; font-weight: 700; } .invoice-container .invoice-col > strong { display: block; margin-bottom: 6px; color: var(--ph-muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .invoice-container address, .invoice-container .small-text { font-size: 15px; line-height: 1.7; color: var(--ph-text); } .invoice-container address { margin-bottom: 18px; } .invoice-container [data-role="paymethod-info"] { display: block; } .invoice-container select.custom-select { min-height: 44px; padding: 0 36px 0 14px; border: 1.5px solid var(--ph-border-strong); border-radius: 12px; background-color: #fff; font-size: 15px; font-weight: 600; color: var(--ph-text); } .invoice-container select.custom-select:focus { border-color: var(--ph-blue); box-shadow: 0 0 0 3px rgba(30, 123, 193, .18); outline: none; } .invoice-container .card { overflow: hidden; border: 1px solid var(--ph-line); border-radius: 16px; background: #fff; box-shadow: none; } .invoice-container .card-header { padding: 16px 22px; border: 0; border-bottom: 1px solid var(--ph-line); background: var(--ph-tint); } .invoice-container .card .table { margin: 0; font-variant-numeric: tabular-nums; } .invoice-container .card .table td { padding: 14px 22px; border-top: 1px solid var(--ph-line-soft); vertical-align: top; } .invoice-container .card .table thead td { border-top: 0; border-bottom: 1px solid var(--ph-line); background: transparent; color: var(--ph-muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; } .invoice-container .card .table thead td strong { font-weight: 800; } .invoice-container .card .table tbody tr:not(.total-row):hover { background: #fafcff; } .invoice-container .card .table td.text-right, .invoice-container .card .table td:last-child { white-space: nowrap; } .invoice-container .card .table td.total-row, .invoice-container .card .table tr:has(> td.total-row) { background: #fff; } .invoice-container .card .table td.total-row { border-top: 1px solid var(--ph-line-soft); color: var(--ph-text-3); } .invoice-container .card .table td.total-row strong { font-weight: 700; } .invoice-container .card .table tbody tr:last-child td.total-row { padding-top: 18px; padding-bottom: 18px; border-top: 2px solid #dbe7f5; background: #eef5fd; color: var(--ph-navy); font-size: 17px; font-weight: 800; } .invoice-container .card .table tbody tr:last-child td.total-row strong { font-weight: 800; } .invoice-container > .row ~ p { margin: 8px 0 20px; font-size: 13px; color: var(--ph-muted); } .invoice-container .btn-group { margin-top: 24px; } .invoice-container .btn-group .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1.5px solid var(--ph-blue); background: #fff; color: var(--ph-blue); font-size: 14px; font-weight: 700; } .invoice-container .btn-group .btn:first-child { border-radius: 12px 0 0 12px; } .invoice-container .btn-group .btn:last-child { margin-left: -1.5px; border-radius: 0 12px 12px 0; } .invoice-container .btn-group .btn:hover, .invoice-container .btn-group .btn:focus-visible { background: var(--ph-blue); color: #fff; text-decoration: none; } body:has(> .invoice-container) > p.text-center { margin: 8px 0 32px; font-size: 15px; font-weight: 600; } body:has(> .invoice-container) > p.text-center a { color: var(--ph-blue); } @media (max-width: 767.98px) { .invoice-container { margin: 12px; padding: 28px 20px 32px; border-radius: 16px; } .invoice-container .invoice-header .invoice-col:last-child { margin-top: 16px; text-align: center; } .invoice-container .invoice-header .invoice-col:first-child { text-align: center; } .invoice-container .ph-inv-logo img { margin: 0 auto; } .invoice-container .card .table td { padding: 12px 14px; } } @media print { body:has(> .invoice-container) { background: #fff; } .invoice-container { margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; max-width: none; } .invoice-container .card { break-inside: avoid; } } .invoice-container { display: flow-root; } .invoice-container .invoice-col > strong + br { display: none; } @media (min-width: 768px) { .invoice-container .invoice-header .invoice-col:last-child { text-align: right !important; } .invoice-container .invoice-header .invoice-status { text-align: right; } } @media (max-width: 575.98px) { .invoice-container .row > .invoice-col.right { order: 2; text-align: left; float: none; } .invoice-container .row > .invoice-col:not(.right) { order: 1; } .invoice-container .invoice-col.right > br { display: none; } .invoice-container .invoice-col.right [data-role="paymethod-info"] { float: none !important; } .invoice-container .transactions-container .table td:not(.text-right):not(.total-row) { white-space: normal !important; } .invoice-container .card .table thead td { letter-spacing: .03em; } } .invoice-container { width: auto; } @media (max-width: 575.98px) { .invoice-container .transactions-container .table td { padding: 12px 8px; font-size: 14px; } .invoice-container .transactions-container .table thead td { font-size: 10.5px; letter-spacing: 0; } .invoice-container .transactions-container .table td:first-child { padding-left: 14px; } .invoice-container .transactions-container .table td:last-child { padding-right: 14px; } } @media (max-width: 575.98px) { .invoice-container .transactions-container .table td { padding: 12px 4px; font-size: 13px; } .invoice-container .transactions-container .table thead td { font-size: 9.5px; letter-spacing: 0; } .invoice-container .transactions-container .table td:first-child { padding-left: 10px; } .invoice-container .transactions-container .table td:last-child { padding-right: 10px; } .invoice-container .transactions-container .table td.total-row { font-size: 14px; } } .invoice-container .payment-btn-container { margin: 24px 0 0; } .invoice-container .payment-btn-container:not(:empty) { margin-top: 24px; } .invoice-container .payment-btn-container:has(.payment-wrapper, .mailin-card, .fonepay-card) { padding: 0; border: 0; background: transparent; } .invoice-container .payment-btn-container:not(:has(.payment-wrapper, .mailin-card, .fonepay-card)) { max-width: 520px; margin-left: auto; margin-right: auto; text-align: center !important; } .invoice-container .payment-btn-container .payment-wrapper { box-shadow: none; } .invoice-container .invoice-header .invoice-col:last-child .small-text { margin-top: 4px; } .ph-inv-aside { max-width: 880px; margin: 0 auto 16px; padding: 20px 24px; border: 1px solid #e9e2dc; border-radius: 18px; background: #fff; box-shadow: 0 12px 32px rgba(23, 32, 51, .06); font-size: 14px; } .ph-inv-aside h2 { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: var(--ph-ink); } .ph-inv-aside p { margin: 0 0 14px; color: var(--ph-text-3); line-height: 1.5; } .ph-inv-aside ul { margin: 0; padding: 0; } .ph-inv-aside li + li { margin-top: 4px; } .ph-inv-aside a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: 12px; color: var(--ph-text); font-weight: 600; text-decoration: none; } .ph-inv-aside a:hover, .ph-inv-aside a:focus-visible { background: #f3f8fe; color: var(--ph-blue); text-decoration: none; } .ph-inv-aside a > img, .ph-inv-aside a > svg { flex: none; width: 20px; height: 20px; font-size: 18px; line-height: 20px; text-align: center; color: var(--ph-blue); } .ph-inv-aside a span { display: flex; flex-direction: column; line-height: 1.3; word-break: break-word; } .ph-inv-aside small { color: var(--ph-muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } @media (max-width: 767.98px) { .ph-inv-aside { margin: 0 12px 16px; } } @media (min-width: 1500px) { .ph-inv-aside { position: fixed; top: 32px; left: calc(50% + 464px); width: 280px; max-width: none; margin: 0; } } .ph-inv-aside a > svg { color: #5b6573; } .ph-inv-aside a:hover > svg { color: var(--ph-blue); } .sc-page-header.py-5 { padding-top: 28px !important; padding-bottom: 36px !important; } .tiles .tile { position: relative; min-height: 104px; padding: 18px 20px; border: 1px solid var(--ph-line) !important; border-radius: 16px; background: #fff; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .tiles .tile i { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #eaf3fc; color: var(--ph-blue); font-size: 20px; } .tiles .tile .stat { margin: 0; color: var(--ph-ink); font-family: inherit; font-size: 32px; font-weight: 800; line-height: 1.1; } .tiles .tile .title { margin-top: 4px; color: var(--ph-text-3); font-size: 14px; font-weight: 600; text-transform: none; } .tiles .tile:hover, .tiles .tile:focus-visible { border-color: var(--ph-blue) !important; background: #fff; box-shadow: 0 10px 24px rgba(23, 32, 51, .08); transform: translateY(-2px); text-decoration: none; } .tiles .tile:hover i, .tiles .tile:focus-visible i { font-size: 20px; color: var(--ph-blue); } .tiles .tile:hover .stat { color: var(--ph-ink); } .tiles .tile.ph-tile-attn { border-color: #f6c58a !important; background: #fff7ed; } .tiles .tile.ph-tile-attn i { background: #ffedd5; color: var(--ph-orange-dark); } .tiles .tile.ph-tile-attn .stat { color: #c2410c; } .tiles .tile.ph-tile-attn:hover i { color: var(--ph-orange-dark); } .client-home-cards .card, .client-home-cards .card[class*="card-accent-"] { margin-bottom: 20px; border: 1px solid var(--ph-line); border-radius: 16px; background: #fff; box-shadow: none; overflow: hidden; } .client-home-cards.client-home-cards .card-header { padding: 14px 20px; border-bottom: 1px solid var(--ph-line); background: var(--ph-tint); } .client-home-cards .card-header h3.card-title { display: flex; align-items: center; gap: 8px; font-size: 15px !important; font-weight: 800; color: var(--ph-ink); } .client-home-cards .card-header h3.card-title > i { color: var(--ph-blue); font-size: 15px; width: 18px; text-align: center; } .client-home-cards .card-header .float-right { order: 3; margin-left: auto; float: none !important; } .client-home-cards .card-header .float-right a.btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1.5px solid var(--ph-blue); border-radius: 999px; background: #fff; color: var(--ph-blue); font-size: 13px; font-weight: 700; text-decoration: none; } .client-home-cards .card-header .float-right a.btn:hover, .client-home-cards .card-header .float-right a.btn:focus-visible { background: var(--ph-blue); color: #fff; } .client-home-cards.client-home-cards .card-body { max-height: none; padding: 20px 22px; color: var(--ph-text-2); font-size: 15px; line-height: 1.6; } .client-home-cards .card-body p:last-child { margin-bottom: 0; } .client-home-cards .card-footer { padding: 12px 20px; border-top: 1px solid var(--ph-line-soft); background: #fff; } .client-home-cards .card-footer .btn-view-more { color: var(--ph-text-3); font-size: 14px; font-weight: 600; text-decoration: none; } .client-home-cards .card-footer .btn-view-more.disabled { color: var(--ph-muted); opacity: 1; pointer-events: none; } .client-home-cards .card-footer.ph-card-cta .btn { min-height: 44px; padding: 0 22px; border-radius: 12px; font-weight: 700; } .client-home-cards.client-home-cards .list-group .list-group-item { padding: 14px 22px; border: 0; border-top: 1px solid var(--ph-line-soft); font-size: 15px; font-weight: 600; color: var(--ph-text); } .client-home-cards.client-home-cards .list-group .list-group-item:first-child { border-top: 0; } .client-home-cards .list-group-item .text-last-updated { display: block; margin-top: 2px; color: var(--ph-muted); font-size: 13px; font-weight: 500; } #registerDomainPanel .input-group { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 !important; padding: 0 !important; } #registerDomainPanel .input-group > .form-control { flex: 1 1 200px; width: auto; min-width: 0; height: 52px; padding: 0 16px; border: 1.5px solid var(--ph-border-strong); border-radius: 12px; background: #fff; font-size: 16px; } #registerDomainPanel .input-group > .form-control:focus { border-color: var(--ph-blue); box-shadow: 0 0 0 1px var(--ph-blue); outline: none !important; } #registerDomainPanel .input-group-btn { display: flex; gap: 8px; margin: 0; } #registerDomainPanel .input-group-btn .btn { min-height: 52px; padding: 0 22px; border: 1.5px solid var(--ph-blue); border-radius: 12px; font-size: 15px; font-weight: 700; } #registerDomainPanel .input-group-btn .btn-success { background: var(--ph-blue); color: #fff; } #registerDomainPanel .input-group-btn .btn-success:hover { background: var(--ph-blue-dark); border-color: var(--ph-blue-dark); } #registerDomainPanel .input-group-btn .btn-default { background: #fff; color: var(--ph-blue); } #registerDomainPanel .input-group-btn .btn-default:hover { background: var(--ph-blue); color: #fff; } #registerDomainPanel .recaptcha-content-domain-checker { flex: 0 0 100%; margin-top: 4px; } #registerDomainPanel .recaptcha-content-domain-checker .row, #registerDomainPanel .recaptcha-content-domain-checker [class*="col-md"] { margin: 0; padding: 0; max-width: 100%; flex: 0 0 100%; justify-content: flex-start !important; } #registerDomainPanel #default-captcha-domainchecker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 0 !important; text-align: left !important; } #registerDomainPanel #default-captcha-domainchecker .col-6 { flex: 0 0 auto; max-width: none; width: auto; padding: 0; } #registerDomainPanel #default-captcha-domainchecker img { height: 48px; width: auto; border-radius: 8px; } #registerDomainPanel #default-captcha-domainchecker .form-control { width: 150px; height: 48px; padding: 0 12px; border: 1.5px solid var(--ph-border-strong); border-radius: 12px; font-size: 20px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; } .sidebar .card-sidebar { margin-bottom: 20px !important; border: 1px solid var(--ph-line); border-radius: 16px; background: #fff; box-shadow: none; overflow: hidden; } .sidebar .card-sidebar .card-header { padding: 14px 20px; border-bottom: 1px solid var(--ph-line); background: var(--ph-tint); } .sidebar .card-sidebar .card-header .card-title { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ph-ink); font-size: 15px; font-weight: 800; } .sidebar .card-sidebar .card-header .card-title > i:not(.card-minimise) { color: var(--ph-blue); font-size: 15px; width: 18px; text-align: center; } .sidebar .card-sidebar .card-header .card-minimise { margin-left: auto; float: none !important; color: var(--ph-muted); font-size: 12px; cursor: pointer; } .sidebar .list-group { font-family: inherit; font-size: 15px; } .sidebar .list-group-item { min-height: 46px; padding: 11px 20px; border: 0; border-top: 1px solid var(--ph-line-soft); border-left: 3px solid transparent; background: #fff; color: var(--ph-text); font-weight: 500; } .sidebar .list-group-item:first-child { border-top: 0; } .sidebar .list-group-item .sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 10px; } .sidebar .list-group-item .sidebar-menu-item-icon { width: 18px; color: var(--ph-muted); text-align: center; } .sidebar .list-group-item.list-group-item-action:hover, .sidebar .list-group-item.list-group-item-action:focus-visible { background: #f3f8fe; color: var(--ph-blue) !important; text-decoration: none; } .sidebar .list-group-item:hover .sidebar-menu-item-icon { color: var(--ph-blue); } .sidebar .list-group-item.active, .sidebar .list-group-item.active:hover, .sidebar .list-group-item.active:focus { border-color: var(--ph-line-soft); border-left-color: var(--ph-blue); background: #eaf3fc; color: var(--ph-blue); font-weight: 700; } .sidebar .list-group-item.active .sidebar-menu-item-icon { color: var(--ph-blue); } .sidebar .card-sidebar .card-body { padding: 16px 20px; font-size: 15px; line-height: 1.6; } .sidebar .card-sidebar .card-footer { padding: 12px 16px 16px; border-top: 1px solid var(--ph-line-soft); background: #fff; } .sidebar .card-sidebar .card-footer .btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--ph-blue); border-radius: 12px; font-size: 14px; font-weight: 700; } .sidebar .card-sidebar .btn-success { background: var(--ph-blue); color: #fff; } .sidebar .card-sidebar .btn-success:hover { background: var(--ph-blue-dark); border-color: var(--ph-blue-dark); } .sidebar .card-sidebar .btn-default { background: #fff; color: var(--ph-blue); } .sidebar .card-sidebar .btn-default:hover { background: var(--ph-blue); color: #fff; } @media (prefers-reduced-motion: reduce) { .tiles .tile { transition: none; transform: none !important; } } @media (max-width: 575.98px) { .client-home-cards.client-home-cards .card-body { padding: 16px; } #registerDomainPanel .input-group-btn { flex: 1 1 100%; } #registerDomainPanel .input-group-btn .btn { flex: 1; } } :root[data-bs-theme="dark"] .tiles .tile { border-color: #23264f !important; background: #12132b; } :root[data-bs-theme="dark"] .tiles .tile .stat { color: #e8e9ff; } :root[data-bs-theme="dark"] .tiles .tile .title { color: #c9cbf0; } :root[data-bs-theme="dark"] .tiles .tile i { background: #181a3d; color: #60a5fa; } :root[data-bs-theme="dark"] .tiles .tile:hover, :root[data-bs-theme="dark"] .tiles .tile:focus-visible { background: #12132b; border-color: #60a5fa !important; } :root[data-bs-theme="dark"] .tiles .tile.ph-tile-attn { border-color: #9a5b21 !important; background: #2a1c10; } :root[data-bs-theme="dark"] .tiles .tile.ph-tile-attn .stat { color: #fdba74; } :root[data-bs-theme="dark"] .tiles .tile.ph-tile-attn i { background: #3a2412; color: #fb923c; } :root[data-bs-theme="dark"] .client-home-cards .card, :root[data-bs-theme="dark"] .sidebar .card-sidebar { border-color: #23264f; background: #12132b; } :root[data-bs-theme="dark"] .client-home-cards.client-home-cards .card-header, :root[data-bs-theme="dark"] .sidebar .card-sidebar .card-header { border-bottom-color: #23264f; background: #181a3d; } :root[data-bs-theme="dark"] .client-home-cards .card-header h3.card-title, :root[data-bs-theme="dark"] .sidebar .card-sidebar .card-header .card-title { color: #e8e9ff; } :root[data-bs-theme="dark"] .client-home-cards .card-header .float-right a.btn { border-color: #60a5fa; background: transparent; color: #93c5fd; } :root[data-bs-theme="dark"] .client-home-cards .card-header .float-right a.btn:hover { background: #60a5fa; color: #0b0c1f; } :root[data-bs-theme="dark"] .client-home-cards.client-home-cards .card-body { color: #c9cbf0; } :root[data-bs-theme="dark"] .client-home-cards .card-body a:not(.btn) { color: #93c5fd; } :root[data-bs-theme="dark"] .client-home-cards .card-footer, :root[data-bs-theme="dark"] .sidebar .card-sidebar .card-footer { border-top-color: #23264f; background: #12132b; } :root[data-bs-theme="dark"] .client-home-cards .card-footer .btn-view-more { color: #a4a7d6; } :root[data-bs-theme="dark"] .client-home-cards.client-home-cards .list-group .list-group-item, :root[data-bs-theme="dark"] .sidebar .list-group-item { border-top-color: #23264f; background: #12132b; color: #e8e9ff; } :root[data-bs-theme="dark"] .sidebar .list-group-item.list-group-item-action:hover { background: #181a3d; color: #93c5fd !important; } :root[data-bs-theme="dark"] .sidebar .list-group-item.active, :root[data-bs-theme="dark"] .sidebar .list-group-item.active:hover { background: #1e3a5f; color: #93c5fd; border-left-color: #60a5fa; } :root[data-bs-theme="dark"] .client-home-cards .list-group-item .text-last-updated, :root[data-bs-theme="dark"] .sidebar .list-group-item .sidebar-menu-item-icon { color: #a4a7d6; } :root[data-bs-theme="dark"] #registerDomainPanel .input-group > .form-control, :root[data-bs-theme="dark"] #registerDomainPanel #default-captcha-domainchecker .form-control { border-color: #3b3f73; background: #0b0c1f; color: #e8e9ff; } :root[data-bs-theme="dark"] #registerDomainPanel #default-captcha-domainchecker > p { color: #c9cbf0; } :root[data-bs-theme="dark"] #registerDomainPanel .input-group-btn .btn-default { border-color: #60a5fa; background: transparent; color: #93c5fd; } :root[data-bs-theme="dark"] .sidebar .card-sidebar .btn-default { border-color: #60a5fa; background: transparent; color: #93c5fd; } :root[data-bs-theme="dark"] .sidebar .card-sidebar .btn-success { border-color: #3b82f6; background: #2563eb; color: #fff; } .client-home-cards .card-footer.ph-card-cta .btn { display: inline-flex; align-items: center; justify-content: center; border: 0; background: var(--ph-blue); color: #fff; } .client-home-cards .card-footer.ph-card-cta .btn:hover { background: var(--ph-blue-dark); color: #fff; } .client-home-cards .card-footer:has(> .btn-view-more.disabled) { display: none; } #registerDomainPanel #default-captcha-domainchecker img { height: 44px; } #registerDomainPanel #default-captcha-domainchecker .form-control { height: 44px; } .client-home-cards .list-group { border: 0; } @media (max-width: 575.98px) { .sidebar.sidebar-secondary { padding: 0 16px; } .sidebar.sidebar-secondary .card-sidebar { width: 100%; max-width: none; } } .bootstrap-switch.bootstrap-switch-wrapper { position: relative; display: inline-block; width: 64px !important; height: 34px; margin: 4px 0 0; padding: 0; overflow: hidden; border: 0; border-radius: 999px; background: var(--ph-border-strong); vertical-align: middle; transition: background-color .2s ease, box-shadow .2s ease; } .bootstrap-switch.bootstrap-switch-wrapper.bootstrap-switch-on { background: var(--ph-blue); } .bootstrap-switch.bootstrap-switch-wrapper::after { content: ""; position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .3); transition: transform .2s ease; pointer-events: none; } .bootstrap-switch.bootstrap-switch-wrapper.bootstrap-switch-on::after { transform: translateX(30px); } .bootstrap-switch.bootstrap-switch-wrapper .bootstrap-switch-container { position: absolute; inset: 0; width: 100% !important; height: 100%; margin: 0 !important; cursor: pointer; } .bootstrap-switch.bootstrap-switch-wrapper .bootstrap-switch-container > span { opacity: 0; width: 50% !important; height: 100%; } .bootstrap-switch.bootstrap-switch-wrapper:focus-within { box-shadow: 0 0 0 3px rgba(30, 123, 193, .35); } :root[data-bs-theme="dark"] .bootstrap-switch.bootstrap-switch-wrapper { background: #3b3f73; } :root[data-bs-theme="dark"] .bootstrap-switch.bootstrap-switch-wrapper.bootstrap-switch-on { background: #2563eb; } .bootstrap-switch.bootstrap-switch-wrapper, .bootstrap-switch.bootstrap-switch-wrapper::after { transition: none; } .bootstrap-switch.bootstrap-switch-wrapper { box-sizing: border-box; min-width: 0; max-width: 64px; border: 0 !important; box-shadow: none; } .bootstrap-switch.bootstrap-switch-wrapper:focus-within { box-shadow: 0 0 0 3px rgba(30, 123, 193, .35); } .dataTables_wrapper { font-size: 14px; color: var(--ph-text-2); } .dataTables_wrapper .dataTables_info { padding-top: 0; color: var(--ph-text-3); font-size: 14px; } .dataTables_wrapper .dataTables_filter { margin-bottom: 14px; } .dataTables_wrapper .dataTables_filter label { margin: 0; } .dataTables_wrapper .dataTables_filter input { width: 260px; max-width: 100%; height: 44px; margin: 0; padding: 0 14px 0 42px; border: 1.5px solid var(--ph-border-strong); border-radius: 12px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 14px center / 18px no-repeat; font-size: 15px; } .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--ph-blue); box-shadow: 0 0 0 1px var(--ph-blue); outline: none !important; } .dataTables_wrapper .dataTables_length select { height: 40px; padding: 0 28px 0 12px; border: 1.5px solid var(--ph-border-strong); border-radius: 10px; background-color: #fff; font-size: 14px; } .dataTables_wrapper table.table-list { width: 100% !important; margin: 0 0 16px; border: 1px solid var(--ph-line); border-collapse: separate; border-spacing: 0; border-radius: 16px; background: #fff; overflow: hidden; } .dataTables_wrapper table.table-list thead th { padding: 14px 16px; border: 0; border-bottom: 1px solid var(--ph-line); background: var(--ph-tint) !important; color: var(--ph-muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-align: left !important; text-transform: uppercase; white-space: nowrap; } .dataTables_wrapper table.table-list thead th:first-child { border-top-left-radius: 15px; } .dataTables_wrapper table.table-list thead th:last-child { border-top-right-radius: 15px; } .dataTables_wrapper table.table-list tbody td { padding: 16px; border: 0; border-left: 0 !important; border-top: 1px solid var(--ph-line-soft); color: var(--ph-text); font-size: 15px; text-align: left !important; vertical-align: middle; } .dataTables_wrapper table.table-list tbody tr:first-child td { border-top: 0; } .dataTables_wrapper table.table-list tbody tr { transition: background-color .15s ease; } .dataTables_wrapper table.table-list tbody tr:hover td { background: #f8fbff; } .dataTables_wrapper table.table-list tbody td a { color: var(--ph-blue); font-weight: 600; } .dataTables_wrapper table.table-list .ph-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; } .dataTables_wrapper table.table-list td small, .dataTables_wrapper table.table-list td .text-muted { color: var(--ph-muted) !important; font-size: 13px; } table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before { opacity: .3; } table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:after { opacity: .9; } .label.status { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; background: #eef0f3; color: var(--ph-text-2); font-size: 12.5px; font-weight: 700; line-height: 1.3; text-transform: none; white-space: nowrap; } .label.status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .label.status > span { color: inherit !important; } .label.status-active, .label.status-paid, .label.status-answered { background: #e7f6ec; color: #166534; } .label.status-pending, .label.status-unpaid { background: #fff1e6; color: #9a3412; } .dataTables_wrapper .pagination { margin: 0; gap: 4px; } .dataTables_wrapper .pagination .page-link { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--ph-line); border-radius: 10px !important; background: #fff; color: var(--ph-text-2); font-size: 14px; font-weight: 600; } .dataTables_wrapper .pagination .page-link:hover { border-color: var(--ph-blue); background: #f3f8fe; color: var(--ph-blue); } .dataTables_wrapper .pagination .active .page-link { border-color: var(--ph-blue); background: var(--ph-blue); color: #fff; } .dataTables_wrapper .pagination .disabled .page-link { background: var(--ph-tint); color: #9aa4b2; } @media (max-width: 575.98px) { .dataTables_wrapper .dataTables_filter input { width: 100%; } .dataTables_wrapper table.table-list thead th, .dataTables_wrapper table.table-list tbody td { padding: 12px 10px; } .dataTables_wrapper .dataTables_paginate { margin-top: 8px; } } :root[data-bs-theme="dark"] .dataTables_wrapper { color: #c9cbf0; } :root[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info { color: #a4a7d6; } :root[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input, :root[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length select { border-color: #3b3f73; background-color: #0b0c1f; color: #e8e9ff; } :root[data-bs-theme="dark"] .dataTables_wrapper table.table-list { border-color: #23264f; background: #12132b; } :root[data-bs-theme="dark"] .dataTables_wrapper table.table-list thead th { border-bottom-color: #23264f; background: #181a3d !important; color: #a4a7d6; } :root[data-bs-theme="dark"] .dataTables_wrapper table.table-list tbody td { border-top-color: #23264f; background: #12132b; color: #e8e9ff; } :root[data-bs-theme="dark"] .dataTables_wrapper table.table-list tbody tr:hover td { background: #181a3d; } :root[data-bs-theme="dark"] .dataTables_wrapper table.table-list tbody td a { color: #93c5fd; } :root[data-bs-theme="dark"] .dataTables_wrapper table.table-list td small, :root[data-bs-theme="dark"] .dataTables_wrapper table.table-list td .text-muted { color: #a4a7d6 !important; } :root[data-bs-theme="dark"] .label.status { background: #181a3d; color: #c9cbf0; } :root[data-bs-theme="dark"] .label.status-active, :root[data-bs-theme="dark"] .label.status-paid, :root[data-bs-theme="dark"] .label.status-completed, :root[data-bs-theme="dark"] .label.status-answered { background: #12301f; color: #86efac; } :root[data-bs-theme="dark"] .label.status-pending, :root[data-bs-theme="dark"] .label.status-unpaid, :root[data-bs-theme="dark"] .label.status-payment-pending, :root[data-bs-theme="dark"] .label.status-customer-reply, :root[data-bs-theme="dark"] .label.status-on-hold { background: #3a2412; color: #fdba74; } :root[data-bs-theme="dark"] .label.status-overdue, :root[data-bs-theme="dark"] .label.status-terminated, :root[data-bs-theme="dark"] .label.status-collections, :root[data-bs-theme="dark"] .label.status-fraud, :root[data-bs-theme="dark"] .label.status-expired { background: #3b1414; color: #fca5a5; } :root[data-bs-theme="dark"] .label.status-open, :root[data-bs-theme="dark"] .label.status-in-progress, :root[data-bs-theme="dark"] .label.status-refunded { background: #14263f; color: #93c5fd; } :root[data-bs-theme="dark"] .label.status-suspended { background: #3a2f10; color: #fcd34d; } :root[data-bs-theme="dark"] .dataTables_wrapper .pagination .page-link { border-color: #23264f; background: #12132b; color: #c9cbf0; } :root[data-bs-theme="dark"] .dataTables_wrapper .pagination .page-link:hover { background: #181a3d; color: #93c5fd; border-color: #60a5fa; } :root[data-bs-theme="dark"] .dataTables_wrapper .pagination .active .page-link { border-color: #3b82f6; background: #2563eb; color: #fff; } :root[data-bs-theme="dark"] .dataTables_wrapper .pagination .disabled .page-link { background: #0b0c1f; color: #3b3f73; } @media (max-width: 575.98px) { .dataTables_wrapper table.table-list { border: 0; background: transparent; overflow: visible; } .dataTables_wrapper table.table-list thead { display: none; } .dataTables_wrapper table.table-list tbody, .dataTables_wrapper table.table-list tbody tr { display: block; } .dataTables_wrapper table.table-list tbody tr { margin-bottom: 12px; border: 1px solid var(--ph-line); border-radius: 14px; background: #fff; overflow: hidden; } .dataTables_wrapper table.table-list tbody td { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 16px; border-top: 1px solid var(--ph-line-soft); text-align: right !important; } .dataTables_wrapper table.table-list tbody td:first-child { border-top: 0; } .dataTables_wrapper table.table-list tbody td::before { content: attr(data-label); flex: none; max-width: 45%; color: var(--ph-muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-align: left; text-transform: uppercase; } .dataTables_wrapper table.table-list tbody td[data-label=""]::before { content: none; } .dataTables_wrapper table.table-list .ph-num { text-align: right !important; } } :root[data-bs-theme="dark"] .dataTables_wrapper table.table-list tbody tr { border-color: #23264f; background: #12132b; } .alert { padding: 14px 18px; border: 1px solid transparent; border-radius: 12px; font-size: 15px; line-height: 1.55; } .alert-warning { border-color: #f6c58a; background: #fff7ed; color: #9a3412; } .alert-info { border-color: #cfe2f7; background: #eef5fd; color: #1e5a96; } .alert-success { border-color: #b7e3c6; background: #e7f6ec; color: #166534; } .alert-danger { border-color: #f9c4c4; background: #fef2f2; color: #991b1b; } .alert .btn-xs { min-height: 40px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 700; } .alert .btn-default { border: 1.5px solid var(--ph-blue); background: #fff; color: var(--ph-blue); } .alert .btn-default:hover { background: var(--ph-blue); color: #fff; } .label[style*="background-color"] { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.3; color: #fff; } .primary-content .btn-success, .sidebar .btn-success { border: 1.5px solid var(--ph-blue); background: var(--ph-blue); color: #fff; } .primary-content .btn-success:hover, .sidebar .btn-success:hover { border-color: var(--ph-blue-dark); background: var(--ph-blue-dark); color: #fff; } .primary-content .btn-danger { border: 1.5px solid #dc2626; background: #fff; color: #b91c1c; } .primary-content .btn-danger:hover { background: #dc2626; color: #fff; } .primary-content .btn-sm, .sidebar .btn-sm { min-height: 40px; padding: 0 16px; border-radius: 12px; font-size: 14px; font-weight: 700; } .primary-content .btn-default { border: 1.5px solid var(--ph-blue); background: #fff; color: var(--ph-blue); } .primary-content .btn-default:hover { background: var(--ph-blue); color: #fff; } .nav-tabs { border-bottom: 1px solid var(--ph-line); } .nav-tabs .nav-link { margin-bottom: -1px; padding: 12px 18px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--ph-text-3); font-weight: 600; } .nav-tabs .nav-link:hover { color: var(--ph-blue); } .nav-tabs .nav-link.active { border-bottom-color: var(--ph-blue); background: transparent; color: var(--ph-blue); font-weight: 700; } .tab-content { padding-top: 8px; } .md-editor { border: 1.5px solid var(--ph-border-strong); border-radius: 12px; overflow: hidden; } .md-editor .md-header { padding: 8px; background: var(--ph-tint); } .md-editor .md-header .btn, .md-editor .md-header .btn-primary { min-height: 34px; border: 1px solid var(--ph-border-strong); border-radius: 8px; background: #fff !important; color: var(--ph-text-2) !important; } .md-editor .md-header .btn:hover { border-color: var(--ph-blue); color: var(--ph-blue) !important; } .md-editor .md-header .btn-primary { border-color: var(--ph-blue); color: var(--ph-blue) !important; } :root[data-bs-theme="dark"] .alert-warning { border-color: #9a5b21; background: #2a1c10; color: #fdba74; } :root[data-bs-theme="dark"] .alert-info { border-color: #1e3a5f; background: #14263f; color: #93c5fd; } :root[data-bs-theme="dark"] .alert-success { border-color: #1f5a37; background: #12301f; color: #86efac; } :root[data-bs-theme="dark"] .alert-danger { border-color: #7f1d1d; background: #3b1414; color: #fca5a5; } :root[data-bs-theme="dark"] .label.requestor-type-owner { background: #12301f; color: #86efac; } :root[data-bs-theme="dark"] .product-status { border-color: #23264f; background: #12132b; } :root[data-bs-theme="dark"] .product-status .product-icon h3 { color: #e8e9ff; } :root[data-bs-theme="dark"] .product-status .product-icon h4 { color: #a4a7d6; } :root[data-bs-theme="dark"] .nav-tabs { border-bottom-color: #23264f; } :root[data-bs-theme="dark"] .nav-tabs .nav-link { color: #a4a7d6; } :root[data-bs-theme="dark"] .nav-tabs .nav-link.active { color: #93c5fd; border-bottom-color: #60a5fa; } :root[data-bs-theme="dark"] .primary-content .btn-default, :root[data-bs-theme="dark"] .alert .btn-default { border-color: #60a5fa; background: transparent; color: #93c5fd; } :root[data-bs-theme="dark"] .primary-content .btn-danger { border-color: #ef4444; background: transparent; color: #fca5a5; } :root[data-bs-theme="dark"] .view-ticket { border-color: #23264f; } :root[data-bs-theme="dark"] .view-ticket .card-body.bg-primary-light { background: #181a3d !important; } :root[data-bs-theme="dark"] .md-editor { border-color: #3b3f73; } :root[data-bs-theme="dark"] .md-editor .md-header { background: #181a3d; } :root[data-bs-theme="dark"] .md-editor .md-header .btn { border-color: #3b3f73; background: #0b0c1f !important; color: #e8e9ff !important; } .alert .btn-xs { display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; } .primary-content .btn-primary { border: 1.5px solid var(--ph-blue); background: var(--ph-blue); color: #fff; } .primary-content .btn-primary:hover { border-color: var(--ph-blue-dark); background: var(--ph-blue-dark); color: #fff; } .primary-content .btn-primary:not(.btn-sm):not(.btn-xs) { min-height: 48px; padding: 0 26px; border-radius: 12px; font-weight: 700; } .card { border: 1px solid var(--ph-line); border-radius: 16px; background: #fff; box-shadow: none; } .primary-content input[readonly], .primary-content input:disabled { border-color: var(--ph-line); background: var(--ph-tint); color: var(--ph-text-2); } .custom-file, .custom-file-input { height: 48px; } .custom-file-label { display: flex; align-items: center; height: 48px; padding: 0 120px 0 16px; border: 1.5px solid var(--ph-border-strong); border-radius: 12px; background: #fff; color: var(--ph-text-3); font-size: 15px; } .custom-file-label::after { top: 0; right: 0; bottom: 0; display: flex; align-items: center; height: auto; padding: 0 20px; border-left: 1.5px solid var(--ph-border-strong); border-radius: 0 10px 10px 0; background: #eaf3fc; color: var(--ph-blue); font-weight: 700; } @media (max-width: 575.98px) { .custom-file-label { padding-right: 96px; } } :root[data-bs-theme="dark"] .card { border-color: #23264f; background: #12132b; } :root[data-bs-theme="dark"] .card.bg-success-light { border-color: #1f5a37; background: #12301f; } :root[data-bs-theme="dark"] .card.bg-success-light strong { color: #bbf7d0; } :root[data-bs-theme="dark"] .card.bg-success-light p { color: #86efac; } :root[data-bs-theme="dark"] .card.bg-success-light .alert-link { color: #93c5fd; } :root[data-bs-theme="dark"] .primary-content input[readonly], :root[data-bs-theme="dark"] .primary-content input:disabled { border-color: #23264f; background: #181a3d; color: #c9cbf0; } :root[data-bs-theme="dark"] .custom-file-label { border-color: #3b3f73; background: #0b0c1f; color: #c9cbf0; } :root[data-bs-theme="dark"] .custom-file-label::after { border-left-color: #3b3f73; background: #181a3d; color: #93c5fd; } :root[data-bs-theme="dark"] .view-ticket > .card-body:not(.bg-primary-light) { border-top-color: #23264f; } :root[data-bs-theme="dark"] .ticket-reply .posted-by { border-bottom-color: #23264f; background: #181a3d; color: #a4a7d6; } :root[data-bs-theme="dark"] .ticket-reply .posted-by-name { color: #e8e9ff; } :root[data-bs-theme="dark"] .ticket-reply .message { color: #e8e9ff; } :root[data-bs-theme="dark"] .ticket-reply.staff { box-shadow: inset 4px 0 0 #60a5fa; } :root[data-bs-theme="dark"] .ticket-reply.staff .posted-by { background: #14263f; } :root[data-bs-theme="dark"] .primary-content .btn-primary { border-color: #3b82f6; background: #2563eb; } :root[data-bs-theme="dark"] .label.requestor-type-operator { background: #181a3d; color: #c9cbf0; } .primary-content .btn-primary:not(.btn-sm):not(.btn-xs) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.2; } .primary-content #default-captcha-domainchecker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 !important; padding: 0 !important; text-align: left !important; } .primary-content #default-captcha-domainchecker > p { flex: 0 0 100%; margin: 0; color: var(--ph-text-3); font-size: 14px; } .primary-content #default-captcha-domainchecker .col-6, .primary-content #default-captcha-domainchecker .captchaimage { flex: 0 0 auto; width: auto; max-width: none; padding: 0; } .primary-content #default-captcha-domainchecker img { height: 44px; width: auto; border-radius: 8px; } .primary-content #default-captcha-domainchecker .form-control { width: 150px; height: 44px; padding: 0 12px; border: 1.5px solid var(--ph-border-strong); border-radius: 12px; font-size: 20px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; } .primary-content .recaptcha-content-domain-checker .row, .primary-content .recaptcha-content-domain-checker [class*="col-md"] { margin: 0; padding: 0; max-width: 100%; flex: 0 0 100%; justify-content: flex-start !important; } :root[data-bs-theme="dark"] .primary-content #default-captcha-domainchecker > p { color: #c9cbf0; } :root[data-bs-theme="dark"] .primary-content #default-captcha-domainchecker .form-control { border-color: #3b3f73; background: #0b0c1f; color: #e8e9ff; } .sc-page-header.py-5 { padding-top: 30px !important; padding-bottom: 30px !important; } .sc-page-header-info { display: flex; flex-direction: column; gap: 6px; max-width: 860px; } .sc-page-header h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: #fff; overflow-wrap: anywhere; } .sc-page-header-info > p { margin: 0; color: rgba(255, 255, 255, .86); font-size: 16px; line-height: 1.5; } .sc-page-header .sc-breadcrumb { position: static; display: block !important; margin: 8px 0 0; border-radius: 0; background: transparent; } .sc-page-header .sc-triangle-right { display: none !important; } .sc-page-header .sc-breadcrumb ol.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; border: 0; background: transparent !important; font-size: 14px; line-height: 1.4; } .sc-page-header .sc-breadcrumb .breadcrumb-item { display: inline-flex; align-items: center; color: #fff; font-size: 14px; font-weight: 700; } .sc-page-header .sc-breadcrumb .breadcrumb-item a { padding: 4px 0; color: rgba(255, 255, 255, .86); font-family: inherit; font-size: 14px; font-weight: 500; text-decoration: none; } .sc-page-header .sc-breadcrumb .breadcrumb-item a:hover, .sc-page-header .sc-breadcrumb .breadcrumb-item a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .sc-page-header .sc-breadcrumb .breadcrumb-item.active { font-family: inherit; font-size: 14px; } .sc-page-header .sc-breadcrumb .breadcrumb-item + .breadcrumb-item { padding-left: 0; } .sc-page-header .sc-breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "\f105"; padding: 0 10px; color: rgba(255, 255, 255, .55); font-size: 12px; font-weight: 400; } @media (max-width: 768px) { .sc-page-header .sc-breadcrumb { display: block !important; } .sc-page-header.py-5 { padding-top: 22px !important; padding-bottom: 22px !important; } .sc-page-header h1 { font-size: 24px; } .sc-page-header-info > p { font-size: 15px; } .sc-page-header .sc-breadcrumb ol.breadcrumb { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; } .sc-page-header .sc-breadcrumb ol.breadcrumb::-webkit-scrollbar { display: none; } } :root[data-bs-theme="dark"] .sc-page-header .sc-breadcrumb ol.breadcrumb { background: transparent !important; } .sc-page-header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px; } .sc-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-left: auto; } .sc-page-action { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1.5px solid transparent; border-radius: 12px; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none !important; white-space: nowrap; transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease; } .sc-page-action svg { flex: none; } .sc-page-action-secondary { background: #fff; color: #0b1b3a !important; } .sc-page-action-secondary:hover, .sc-page-action-secondary:focus-visible { background: #eef5fd; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); transform: translateY(-1px); } .sc-page-action-primary { background: var(--ph-orange); color: #0b1b3a !important; } .sc-page-action-primary:hover, .sc-page-action-primary:focus-visible { background: #fb8a3c; box-shadow: 0 8px 20px rgba(249, 115, 22, .35); transform: translateY(-1px); } .sc-page-action:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } @media (max-width: 767.98px) { .sc-page-header-row { gap: 14px; } .sc-page-actions { width: 100%; margin-left: 0; } .sc-page-action { flex: 1 1 calc(50% - 6px); min-width: 0; padding: 0 14px; font-size: 14px; white-space: normal; text-align: center; } .sc-page-actions .sc-page-action:only-child { flex-basis: 100%; } } @media (prefers-reduced-motion: reduce) { .sc-page-action { transition: none; transform: none !important; } } .sc-page-header-info { flex: 1 1 320px; min-width: 0; max-width: 100%; } @media (min-width: 768px) { .sc-page-header-info { max-width: 860px; } } .sc-page-header.bg-gradient { background: #0b2a5b; box-shadow: none; } :root[data-bs-theme="dark"] .sc-page-header.bg-gradient { background: #0b0c1f; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); } .sc-page-action-secondary { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .45); } .sc-page-action-secondary:hover, .sc-page-action-secondary:focus-visible { border-color: #fff; background: rgba(255, 255, 255, .1); box-shadow: none; transform: none; } .client-home-cards .card-header .float-right a.btn, :root[data-bs-theme="dark"] .client-home-cards .card-header .float-right a.btn { min-height: 36px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent; color: #1e7bc1; font-size: 14px; font-weight: 600; gap: 6px; } .client-home-cards .card-header .float-right a.btn i.fa-arrow-right { order: 2; font-size: 12px; } .client-home-cards .card-header .float-right a.btn:hover, .client-home-cards .card-header .float-right a.btn:focus-visible { background: transparent; color: var(--ph-blue-dark); text-decoration: underline; text-underline-offset: 3px; } .client-home-cards .card-header .float-right a.btn:hover i.fa-arrow-right { transform: translateX(3px); } :root[data-bs-theme="dark"] .client-home-cards .card-header .float-right a.btn { color: #93c5fd; } :root[data-bs-theme="dark"] .client-home-cards .card-header .float-right a.btn:hover { background: transparent; color: #bfdbfe; } .sidebar .card-sidebar .btn-success, .sidebar .card-sidebar .btn-default { border: 1.5px solid var(--ph-border-strong); background: #fff; color: var(--ph-text); } .sidebar .card-sidebar .btn-success:hover, .sidebar .card-sidebar .btn-default:hover { border-color: var(--ph-blue); background: #f3f8fe; color: var(--ph-blue); } :root[data-bs-theme="dark"] .sidebar .card-sidebar .btn-success, :root[data-bs-theme="dark"] .sidebar .card-sidebar .btn-default { border-color: #3b3f73; background: transparent; color: #e8e9ff; } :root[data-bs-theme="dark"] .sidebar .card-sidebar .btn-success:hover, :root[data-bs-theme="dark"] .sidebar .card-sidebar .btn-default:hover { border-color: #60a5fa; background: #181a3d; color: #93c5fd; } .div-service-item { display: flex; align-items: center; gap: 16px; } .div-service-item .div-service-name { flex: 1 1 auto; min-width: 0; } .div-service-item .div-service-buttons { display: flex; align-items: center; gap: 8px; flex: none; } .div-service-item .btn-view-details { min-height: 40px; padding: 0 8px; border: 0 !important; background: transparent !important; color: var(--ph-blue) !important; font-weight: 600; } .div-service-item .btn-view-details:hover { text-decoration: underline; text-underline-offset: 3px; } .label.label-success, .label.label-info, .label.label-default { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.3; } .label.label-success { background: #e7f6ec; color: #166534; } .label.label-info { background: #e8f1fb; color: #1e5a96; } .label.label-default { background: #eef0f3; color: var(--ph-text-3); } :root[data-bs-theme="dark"] .label.label-success { background: #12301f; color: #86efac; } :root[data-bs-theme="dark"] .label.label-warning { background: #3a2412; color: #fdba74; } :root[data-bs-theme="dark"] .label.label-danger { background: #3b1414; color: #fca5a5; } :root[data-bs-theme="dark"] .label.label-info { background: #14263f; color: #93c5fd; } :root[data-bs-theme="dark"] .label.label-default { background: #181a3d; color: #c9cbf0; } :root[data-bs-theme="dark"] .div-service-item .btn-view-details { color: #93c5fd !important; } @media (max-width: 575.98px) { .div-service-item { flex-wrap: wrap; } .div-service-item .div-service-buttons { width: 100%; } } #registerDomainPanel .input-group-btn .btn-default, :root[data-bs-theme="dark"] #registerDomainPanel .input-group-btn .btn-default { border: 0; background: transparent; color: #1e7bc1; padding: 0 8px; } #registerDomainPanel .input-group-btn .btn-default:hover { background: transparent; color: var(--ph-blue-dark); text-decoration: underline; text-underline-offset: 3px; } :root[data-bs-theme="dark"] #registerDomainPanel .input-group-btn .btn-default { color: #93c5fd; } #registerDomainPanel .recaptcha-content-domain-checker { margin-left: 0 !important; margin-right: 0 !important; } .sidebar .card-sidebar .card-footer .btn.btn-default, .sidebar .card-sidebar .card-footer .btn.btn-success { border: 1.5px solid var(--ph-border-strong); background: #fff; color: var(--ph-text); } .sidebar .card-sidebar .card-footer .btn.btn-default:hover, .sidebar .card-sidebar .card-footer .btn.btn-success:hover { border-color: var(--ph-blue); background: #f3f8fe; color: var(--ph-blue); } :root[data-bs-theme="dark"] .sidebar .card-sidebar .card-footer .btn.btn-default, :root[data-bs-theme="dark"] .sidebar .card-sidebar .card-footer .btn.btn-success { border-color: #3b3f73; background: transparent; color: #e8e9ff; } :root[data-bs-theme="dark"] .sidebar .card-sidebar .card-footer .btn.btn-default:hover, :root[data-bs-theme="dark"] .sidebar .card-sidebar .card-footer .btn.btn-success:hover { border-color: #60a5fa; background: #181a3d; color: #93c5fd; } .div-service-item .div-service-status { width: auto !important; min-width: 80px; flex: none; } .div-service-item .div-service-status .label { white-space: nowrap; } .div-service-item .label-placeholder { display: none; } .div-service-item .div-service-status .label { flex: none; max-width: none; overflow: visible; text-overflow: clip; width: auto; } button.btn-custom-action[data-identifier="cpanel"]::before, li.btn-custom-action[data-identifier="cpanel"]::before { content: ""; display: inline-block; width: 26px; height: 15px; margin-right: 9px; vertical-align: -3px; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 407.66 240%22%3E%3Cpath fill=%22%236b7280%22 d=%22M89.69 59.1h67.8L147 99.3a25.38 25.38 0 0 1-9 13.5 24.32 24.32 0 0 1-15.3 5.1H91.19a30.53 30.53 0 0 0-19 6.3 33 33 0 0 0-11.55 17.1 31.91 31.91 0 0 0-.45 15.3A33.1 33.1 0 0 0 66 169.35a30.29 30.29 0 0 0 10.8 8.85 31.74 31.74 0 0 0 14.4 3.3h19.2a10.8 10.8 0 0 1 8.85 4.35 10.4 10.4 0 0 1 2 9.75l-12 44.4h-21a84.77 84.77 0 0 1-39.75-9.45 89.78 89.78 0 0 1-30.21-25.05A88.4 88.4 0 0 1 1.94 170 87.51 87.51 0 0 1 3 129l1.2-4.5a88.69 88.69 0 0 1 31.64-47.25 89.91 89.91 0 0 1 25-13.35 87 87 0 0 1 28.85-4.8ZM123.89 240 183 18.6a25.38 25.38 0 0 1 9-13.5A24.28 24.28 0 0 1 207.29 0H270a84.8 84.8 0 0 1 39.75 9.45 89.21 89.21 0 0 1 46.65 60.6 83.8 83.8 0 0 1-1.2 41l-1.2 4.5a89.88 89.88 0 0 1-12 26.55 87.65 87.65 0 0 1-73.2 39.15h-54.3l10.8-40.5a25.38 25.38 0 0 1 9-13.2 24.32 24.32 0 0 1 15.3-5.1H267a31.56 31.56 0 0 0 30.6-23.7A29.5 29.5 0 0 0 298 84a33.1 33.1 0 0 0-5.85-12.75 31.85 31.85 0 0 0-10.8-9A30.61 30.61 0 0 0 267 58.8h-33.6l-43.8 162.9a25.38 25.38 0 0 1-9 13.2 23.88 23.88 0 0 1-15 5.1ZM361.18 32.31h-3.71V3.71h-10.1V.42h23.91v3.29h-10.1ZM390.19 32.31 379.37 4h-.17q.3 3.36.3 8v20.31h-3.42V.42h5.58l10.1 26.3h.18L402.12.42h5.54v31.89H404V11.76c0-2.36.11-4.91.31-7.68h-.17l-10.96 28.23Z%22/%3E%3C/svg%3E") center / contain no-repeat; } :root[data-bs-theme="dark"] button.btn-custom-action[data-identifier="cpanel"]::before, :root[data-bs-theme="dark"] li.btn-custom-action[data-identifier="cpanel"]::before, :root[data-bs-theme="dark"] a.btn-custom-action[data-identifier="cpanel"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 407.66 240%22%3E%3Cpath fill=%22%2394a3b8%22 d=%22M89.69 59.1h67.8L147 99.3a25.38 25.38 0 0 1-9 13.5 24.32 24.32 0 0 1-15.3 5.1H91.19a30.53 30.53 0 0 0-19 6.3 33 33 0 0 0-11.55 17.1 31.91 31.91 0 0 0-.45 15.3A33.1 33.1 0 0 0 66 169.35a30.29 30.29 0 0 0 10.8 8.85 31.74 31.74 0 0 0 14.4 3.3h19.2a10.8 10.8 0 0 1 8.85 4.35 10.4 10.4 0 0 1 2 9.75l-12 44.4h-21a84.77 84.77 0 0 1-39.75-9.45 89.78 89.78 0 0 1-30.21-25.05A88.4 88.4 0 0 1 1.94 170 87.51 87.51 0 0 1 3 129l1.2-4.5a88.69 88.69 0 0 1 31.64-47.25 89.91 89.91 0 0 1 25-13.35 87 87 0 0 1 28.85-4.8ZM123.89 240 183 18.6a25.38 25.38 0 0 1 9-13.5A24.28 24.28 0 0 1 207.29 0H270a84.8 84.8 0 0 1 39.75 9.45 89.21 89.21 0 0 1 46.65 60.6 83.8 83.8 0 0 1-1.2 41l-1.2 4.5a89.88 89.88 0 0 1-12 26.55 87.65 87.65 0 0 1-73.2 39.15h-54.3l10.8-40.5a25.38 25.38 0 0 1 9-13.2 24.32 24.32 0 0 1 15.3-5.1H267a31.56 31.56 0 0 0 30.6-23.7A29.5 29.5 0 0 0 298 84a33.1 33.1 0 0 0-5.85-12.75 31.85 31.85 0 0 0-10.8-9A30.61 30.61 0 0 0 267 58.8h-33.6l-43.8 162.9a25.38 25.38 0 0 1-9 13.2 23.88 23.88 0 0 1-15 5.1ZM361.18 32.31h-3.71V3.71h-10.1V.42h23.91v3.29h-10.1ZM390.19 32.31 379.37 4h-.17q.3 3.36.3 8v20.31h-3.42V.42h5.58l10.1 26.3h.18L402.12.42h5.54v31.89H404V11.76c0-2.36.11-4.91.31-7.68h-.17l-10.96 28.23Z%22/%3E%3C/svg%3E"); } .client-home-cards .card, .client-home-cards .card[class*="card-accent-"] { overflow: visible; box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05); } .client-home-cards .card > .card-header { border-radius: 15px 15px 0 0; } .client-home-cards .card > :last-child:not(.card-header) { border-radius: 0 0 15px 15px; } .client-home-cards .card { position: relative; z-index: 0; } .div-service-buttons .btn.dropdown-toggle:focus, .div-service-buttons .btn.dropdown-toggle:active { border-color: var(--ph-blue) !important; background: #eaf3fc !important; color: var(--ph-blue) !important; box-shadow: none !important; } .div-service-buttons .dropdown-menu { min-width: 230px; margin-top: 6px; padding: 6px; border: 1px solid var(--ph-line); border-radius: 14px; background: #fff; box-shadow: 0 16px 32px rgba(15, 23, 42, .14); z-index: 1060; } .div-service-buttons .dropdown-item { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--ph-text); font-size: 14.5px; font-weight: 600; cursor: pointer; } .div-service-buttons .dropdown-item:hover, .div-service-buttons .dropdown-item:focus { background: #f3f8fe; color: var(--ph-blue); } .div-service-buttons .dropdown-item .loading { margin-right: 8px; } .client-home-cards.client-home-cards .card-header { background: #fff; padding: 16px 20px; } .client-home-cards .card-header h3.card-title > i { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: #eaf3fc; color: var(--ph-blue); font-size: 14px; } .client-home-cards .card-accent-red .card-header h3.card-title > i { background: #fff1e6; color: var(--ph-orange-dark); } .client-home-cards .card-accent-emerald .card-header h3.card-title > i { background: #e7f6ec; color: #16a34a; } .client-home-cards .card-accent-asbestos .card-header h3.card-title > i { background: #eef0f3; color: var(--ph-text-3); } .client-home-cards .card-accent-midnight-blue .card-header h3.card-title > i { background: #ede9fe; color: #6d28d9; } #servicesPanel .list-group-item { border-bottom: 1px solid var(--ph-line-soft) !important; padding: 16px 22px; } #servicesPanel .list-group-item:hover { background: #fafcff; } .div-service-item .div-service-name .font-weight-bold { color: var(--ph-ink); font-size: 15px; font-weight: 700 !important; } .div-service-item .div-service-name .text-domain { color: var(--ph-muted); font-size: 14px; } .tiles .col-6:nth-child(2) .tile:not(.ph-tile-attn) i { background: #e6f6f4; color: #0f766e; } .tiles .tile .stat { font-size: 34px; } .sc-page-header-info > p { letter-spacing: .005em; } :root[data-bs-theme="dark"] .client-home-cards.client-home-cards .card-header { background: #12132b; } :root[data-bs-theme="dark"] .client-home-cards .card-header h3.card-title > i { background: #181a3d; color: #60a5fa; } :root[data-bs-theme="dark"] .client-home-cards .card-accent-red .card-header h3.card-title > i { background: #3a2412; color: #fb923c; } :root[data-bs-theme="dark"] .client-home-cards .card-accent-emerald .card-header h3.card-title > i { background: #12301f; color: #4ade80; } :root[data-bs-theme="dark"] .client-home-cards .card-accent-midnight-blue .card-header h3.card-title > i { background: #2a1f4d; color: #c4b5fd; } :root[data-bs-theme="dark"] .div-service-buttons .dropdown-menu { border-color: #23264f; background: #12132b; box-shadow: 0 16px 32px rgba(0, 0, 0, .5); } :root[data-bs-theme="dark"] .div-service-buttons .dropdown-item { color: #e8e9ff; } :root[data-bs-theme="dark"] .div-service-buttons .dropdown-item:hover { background: #181a3d; color: #93c5fd; } :root[data-bs-theme="dark"] .div-service-buttons .btn-group.show > .btn.dropdown-toggle { background: #181a3d !important; color: #93c5fd !important; border-color: #60a5fa !important; } :root[data-bs-theme="dark"] #servicesPanel .list-group-item { border-bottom-color: #23264f !important; } :root[data-bs-theme="dark"] #servicesPanel .list-group-item:hover { background: #181a3d; } :root[data-bs-theme="dark"] .div-service-item .div-service-name .font-weight-bold { color: #e8e9ff; } :root[data-bs-theme="dark"] .tiles .col-6:nth-child(2) .tile:not(.ph-tile-attn) i { background: #12302d; color: #5eead4; } :root[data-bs-theme="dark"] .tiles .col-6:nth-child(3) .tile:not(.ph-tile-attn) i { background: #2a1f4d; color: #c4b5fd; } .sidebar .card-sidebar .card-header { background: #fff; } .sidebar .card-sidebar .card-header .card-title > i:not(.card-minimise) { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: #eaf3fc; font-size: 13px; } :root[data-bs-theme="dark"] .sidebar .card-sidebar .card-header { background: #12132b; } :root[data-bs-theme="dark"] .sidebar .card-sidebar .card-header .card-title > i:not(.card-minimise) { background: #181a3d; color: #60a5fa; } .card, .card.card { border-color: var(--ph-line); } .card .card-body > h3.card-title { margin-bottom: 8px; font-size: 18px; font-weight: 800; color: var(--ph-ink); } .card .card-body > p { color: var(--ph-text-3); } .card .form-check-inline { margin: 0 8px 8px 0; padding: 10px 14px 10px 36px; border: 1.5px solid var(--ph-border-strong); border-radius: 12px; background: #fff; color: var(--ph-text); font-size: 15px; font-weight: 600; cursor: pointer; } .card .form-check-inline .form-check-input { accent-color: var(--ph-blue); } .card .form-check-inline:has(input:checked) { border-color: var(--ph-blue); background: #eaf3fc; color: #1e5a96; } .card .form-check-inline:focus-within { box-shadow: 0 0 0 3px rgba(30, 123, 193, .25); } .card .well { padding: 16px 18px; border: 1px solid var(--ph-line); border-radius: 12px; background: var(--ph-tint); box-shadow: none; } .card .well .form-check-inline { margin: 4px 0; padding: 4px 0 4px 28px; border: 0; background: transparent; font-weight: 500; } :root[data-bs-theme="dark"] .primary-content > h3.card-title { color: #e8e9ff; } :root[data-bs-theme="dark"] .primary-content > h3.card-title + p, :root[data-bs-theme="dark"] .card .card-body > p { color: #a4a7d6; } :root[data-bs-theme="dark"] .card > table.table th, :root[data-bs-theme="dark"] .card > table.table td { border-top-color: #23264f; color: #e8e9ff; } :root[data-bs-theme="dark"] .card > table.table tr:first-child > th { border-bottom-color: #23264f; background: #181a3d; color: #a4a7d6; } :root[data-bs-theme="dark"] .card > table.table tr:hover td { background: #181a3d; } :root[data-bs-theme="dark"] .card > table.table td small, :root[data-bs-theme="dark"] .card > p.text-muted { color: #a4a7d6 !important; } :root[data-bs-theme="dark"] .card > p.text-muted { border-top-color: #23264f; } :root[data-bs-theme="dark"] .card > table.table td .btn-manage-permissions { border-color: #60a5fa; background: transparent; color: #93c5fd; } :root[data-bs-theme="dark"] .card > table.table td .btn-remove-user, :root[data-bs-theme="dark"] .card > table.table td .btn-cancel-invite { border-color: #7f1d1d; background: transparent; color: #fca5a5; } :root[data-bs-theme="dark"] .card > table.table td .btn.disabled { border-color: #23264f !important; background: #181a3d !important; color: #64748b !important; } :root[data-bs-theme="dark"] .card .card-body > h3.card-title { color: #e8e9ff; } :root[data-bs-theme="dark"] .card .form-check-inline { border-color: #3b3f73; background: #0b0c1f; color: #e8e9ff; } :root[data-bs-theme="dark"] .card .form-check-inline:has(input:checked) { border-color: #60a5fa; background: #14263f; color: #93c5fd; } :root[data-bs-theme="dark"] .card .well { border-color: #23264f; background: #181a3d; } :root[data-bs-theme="dark"] .card .well .form-check-inline { background: transparent; border: 0; } .card .form-check-inline { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; } .card .form-check-inline .form-check-input { position: static; flex: none; width: 18px; height: 18px; margin: 0; } .card .well .form-check-inline { display: inline-flex; align-items: flex-start; padding: 4px 0; } .card .well .form-check-inline .form-check-input { margin-top: 3px; } @media (max-width: 575.98px) { .card .form-group > .form-check-inline { display: flex; width: 100%; margin-right: 0; } } .card .well .form-check-inline { display: block; position: relative; margin: 0; padding: 6px 0 6px 30px; } .card .well .form-check-inline .form-check-input { position: absolute; left: 0; top: 8px; margin: 0; } .card .well .form-check-inline .text-muted { color: var(--ph-muted) !important; } :root[data-bs-theme="dark"] .card .well .form-check-inline .text-muted { color: #a4a7d6 !important; } .primary-content .btn, .modal .btn { border-radius: 12px; font-weight: 700; } .primary-content .btn:not(.btn-sm):not(.btn-xs):not(.btn-lg):not(.btn-link), .modal .btn:not(.btn-sm):not(.btn-xs):not(.btn-lg):not(.btn-link) { min-height: 44px; } .primary-content .btn-lg { min-height: 52px; padding: 0 28px; font-size: 16px; } .primary-content .btn-xs { min-height: 36px; padding: 0 12px; font-size: 13px; } .primary-content .btn-info { border: 1.5px solid var(--ph-border-strong); background: #fff; color: var(--ph-text); } .primary-content .btn-info:hover { border-color: var(--ph-blue); background: #f3f8fe; color: var(--ph-blue); } .primary-content .btn-block { display: flex; align-items: center; justify-content: center; gap: 8px; } .primary-content .btn.disabled, .primary-content .btn:disabled { opacity: .55; } .form-control:focus, .custom-select:focus, .form-control:focus-visible, .custom-select:focus-visible { border-color: var(--ph-blue); box-shadow: 0 0 0 1px var(--ph-blue); outline: none !important; } select.form-control:not([multiple]), select.custom-select, .primary-content select:not([multiple]):not(.input-sm) { appearance: none; -webkit-appearance: none; padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") right 14px center / 16px no-repeat; } input[type="checkbox"], input[type="radio"] { accent-color: var(--ph-blue); } .field-error-msg { display: block; margin-top: 6px; color: #b91c1c; font-size: 13px; font-weight: 600; } .col-form-label, .primary-content label { font-size: 14px; font-weight: 600; color: var(--ph-text-2); } .primary-content label.form-check { font-weight: 500; } .modal-content { overflow: hidden; border: 0; border-radius: 16px; box-shadow: 0 24px 60px rgba(15, 23, 42, .28); } .modal-header { padding: 18px 22px; border-bottom: 1px solid var(--ph-line); background: #fff; } .modal-title { font-size: 18px; font-weight: 800; color: var(--ph-ink); } .modal-header .close { padding: 8px; margin: -8px -8px -8px auto; border-radius: 10px; color: var(--ph-text-3); opacity: 1; text-shadow: none; } .modal-header .close:hover { background: #f3f4f6; color: var(--ph-ink); } .modal-body { padding: 22px; color: var(--ph-text-2); font-size: 15px; line-height: 1.6; } .modal-footer { padding: 14px 22px 18px; border-top: 1px solid var(--ph-line-soft); background: #fff; gap: 8px; } .dropdown-menu { padding: 6px; border: 1px solid var(--ph-line); border-radius: 14px; background: #fff; box-shadow: 0 16px 32px rgba(15, 23, 42, .12); } .dropdown-menu .dropdown-item { border-radius: 10px; color: var(--ph-text); font-weight: 500; } .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { background: #f3f8fe; color: var(--ph-blue); } .dropdown-menu .dropdown-divider { margin: 6px 4px; border-color: var(--ph-line-soft); } .primary-content .panel { border: 1px solid var(--ph-line); border-radius: 16px; background: #fff; box-shadow: none; overflow: hidden; } .primary-content .panel-heading.card-header, .primary-content .card > .card-header { padding: 14px 20px; border-bottom: 1px solid var(--ph-line); background: var(--ph-tint); } .primary-content .panel-title, .primary-content .card > .card-header .card-title { font-size: 15px; font-weight: 800; color: var(--ph-ink); } .primary-content .btn-block.btn-primary { min-height: 48px; } .cpanel-package-details h4 { margin: 4px 0 2px !important; font-size: 20px; font-weight: 800; color: var(--ph-ink); } .cpanel-package-details em { color: var(--ph-muted); font-style: normal; font-size: 14px; } .cpanel-usage-stats strong { color: var(--ph-text-2); font-size: 14px; } .primary-content .tab-pane > .row > [class*="col-"] > .panel { height: calc(100% - 1rem); } .primary-content h2.card-title { margin-bottom: 6px; } .primary-content > h2.card-title { margin: 0 0 14px; font-size: 22px; font-weight: 800; color: var(--ph-ink); } .sc-news-wrap { overflow: hidden; border: 1px solid var(--ph-line); border-radius: 16px; background: #fff; } .sc-news-single { padding: 22px 24px !important; border-top: 1px solid var(--ph-line-soft); } .sc-news-single:first-child { border-top: 0; } .sc-news-single h2.h6 { margin: 0 0 6px; font-size: 19px; font-weight: 800; } .sc-news-single h2.h6 a { color: var(--ph-ink); text-decoration: none; } .sc-news-single h2.h6 a:hover { color: var(--ph-blue); } .sc-news-single .list-inline { margin: 0 0 10px; } .sc-news-single .list-inline-item { color: var(--ph-muted); font-size: 13px; } .sc-news-single article { color: var(--ph-text-2); font-size: 15px; line-height: 1.7; } .sc-read-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--ph-blue); font-weight: 700; text-decoration: none; } .sc-read-more:hover { text-decoration: underline; text-underline-offset: 3px; } .sc-contact-form { max-width: 640px; } .sc-contact-form .form-control { height: 48px; } .sc-contact-form textarea.form-control { height: auto; min-height: 160px; padding-top: 12px; } .kb-article-item, .kb-category a { border-radius: 12px; } .kb-article-item { display: block; padding: 14px 16px; margin-bottom: 8px; border: 1px solid var(--ph-line); background: #fff; color: var(--ph-ink); font-weight: 700; text-decoration: none; } .kb-article-item:hover { border-color: var(--ph-blue); background: #f3f8fe; text-decoration: none; } .kb-article-item small { padding-left: 0; margin-top: 4px; color: var(--ph-muted); font-weight: 500; } .kb-article-item .fa-fw { color: inherit; } .kb-search { margin-bottom: 20px; } :root[data-bs-theme="dark"] .modal-content, :root[data-bs-theme="dark"] .modal-header, :root[data-bs-theme="dark"] .modal-footer { background: #12132b; } :root[data-bs-theme="dark"] .modal-header, :root[data-bs-theme="dark"] .modal-footer { border-color: #23264f; } :root[data-bs-theme="dark"] .modal-title { color: #e8e9ff; } :root[data-bs-theme="dark"] .modal-body { color: #c9cbf0; } :root[data-bs-theme="dark"] .modal-header .close { color: #c9cbf0; } :root[data-bs-theme="dark"] .dropdown-menu { border-color: #23264f; background: #12132b; box-shadow: 0 16px 32px rgba(0, 0, 0, .5); } :root[data-bs-theme="dark"] .dropdown-menu .dropdown-item { color: #e8e9ff; } :root[data-bs-theme="dark"] .dropdown-menu .dropdown-item:hover { background: #181a3d; color: #93c5fd; } :root[data-bs-theme="dark"] .primary-content .card:not(.card):not(.view-ticket), :root[data-bs-theme="dark"] .primary-content .panel { border-color: #23264f; background: #12132b; } :root[data-bs-theme="dark"] .primary-content .panel-heading.card-header, :root[data-bs-theme="dark"] .primary-content .card > .card-header { border-bottom-color: #23264f; background: #181a3d; } :root[data-bs-theme="dark"] .primary-content .panel-title, :root[data-bs-theme="dark"] .primary-content .card > .card-header .card-title, :root[data-bs-theme="dark"] .cpanel-package-details h4 { color: #e8e9ff; } :root[data-bs-theme="dark"] select.form-control:not([multiple]), :root[data-bs-theme="dark"] select.custom-select { background-color: #0b0c1f; } :root[data-bs-theme="dark"] .col-form-label, :root[data-bs-theme="dark"] .primary-content label { color: #c9cbf0; } :root[data-bs-theme="dark"] .sc-overview .row.mb-3 { border-bottom-color: #23264f; } :root[data-bs-theme="dark"] .sc-overview .row.mb-3 > div, :root[data-bs-theme="dark"] .primary-content .card-body .col-md-6 > h4.mb-1 + p, :root[data-bs-theme="dark"] .sc-overview > h3.card-title { color: #e8e9ff; } :root[data-bs-theme="dark"] .sc-overview > ul > li a { border-color: #60a5fa; color: #93c5fd; } :root[data-bs-theme="dark"] .sc-overview > ul > li a:hover { background: #60a5fa; color: #0b0c1f; } :root[data-bs-theme="dark"] table.table.border { border-color: #23264f !important; background: #12132b; } :root[data-bs-theme="dark"] table.table.border thead th { border-bottom-color: #23264f; background: #181a3d; color: #a4a7d6; } :root[data-bs-theme="dark"] table.table.border td { border-top-color: #23264f; color: #e8e9ff; } :root[data-bs-theme="dark"] table.table.border td.bg-default { background: #181a3d !important; color: #e8e9ff; } :root[data-bs-theme="dark"] table.table.border tr.masspay-total td { background: #12132b; color: #c9cbf0; } :root[data-bs-theme="dark"] table.table.border tr.masspay-total:last-child td { background: #14263f; color: #bfdbfe; } :root[data-bs-theme="dark"] .sc-news-wrap { border-color: #23264f; background: #12132b; } :root[data-bs-theme="dark"] .sc-news-single { border-top-color: #23264f; } :root[data-bs-theme="dark"] .sc-news-single h2.h6 a, :root[data-bs-theme="dark"] .primary-content > h2.card-title { color: #e8e9ff; } :root[data-bs-theme="dark"] .sc-news-single article, :root[data-bs-theme="dark"] .kb-article-content, :root[data-bs-theme="dark"] .kb-article-content p { color: #c9cbf0; } :root[data-bs-theme="dark"] .kb-article-item { border-color: #23264f; background: #12132b; color: #e8e9ff; } :root[data-bs-theme="dark"] .kb-article-item:hover { border-color: #60a5fa; background: #181a3d; } .sc-contact-form.ptb-60 { padding-top: 8px !important; padding-bottom: 8px !important; } .sc-contact-form { padding: 28px; border: 1px solid var(--ph-line); border-radius: 16px; background: #fff; } .sc-contact-form form > .margin-bottom { margin-bottom: 20px !important; } .sc-contact-form #default-captcha-domainchecker { margin-bottom: 4px; } .sc-contact-form .btn-primary { margin-top: 4px; } :root[data-bs-theme="dark"] .sc-contact-form { border-color: #23264f; background: #12132b; } :root[data-bs-theme="dark"] .cpanel-usage-stats strong, :root[data-bs-theme="dark"] #cPanelQuickEmailPanel label { color: #c9cbf0; } :root[data-bs-theme="dark"] .cpanel-usage-stats .usage-dial { color: #e8e9ff !important; } :root[data-bs-theme="dark"] .primary-content .input-group-text, :root[data-bs-theme="dark"] .primary-content .input-group-addon, :root[data-bs-theme="dark"] .primary-content .input-group-append > .input-group-text { border-color: #3b3f73; background: #181a3d; color: #c9cbf0; } :root[data-bs-theme="dark"] .primary-content .input-group > .form-control { background: #0b0c1f; color: #e8e9ff; border-color: #3b3f73; } :root[data-bs-theme="dark"] form.form-stacked fieldset > .text-left { border-top-color: #23264f; } form[action="clientarea.php?action=masspay"] .card.bg-default { border: 1px solid var(--ph-line); border-radius: 16px; background: #fff; box-shadow: none; overflow: hidden; } form[action="clientarea.php?action=masspay"] .card.bg-default .card-body { padding: 22px 24px; } form[action="clientarea.php?action=masspay"] fieldset > .col-md-12 { padding: 0; } form[action="clientarea.php?action=masspay"] #paymentmethod { max-width: 420px; } form[action="clientarea.php?action=masspay"] label.col-form-label + br { display: none; } form[action="clientarea.php?action=masspay"] label.col-form-label { display: block; margin-bottom: 6px; padding: 0; } form[action="clientarea.php?action=masspay"] #btnMassPayMakePayment { display: inline-flex; width: auto; min-width: 200px; min-height: 52px; padding: 0 32px; font-size: 16px; } form[action="clientarea.php?action=masspay"] fieldset .form-group:last-child { display: flex; justify-content: flex-end; margin: 0; padding-top: 18px; border-top: 1px solid var(--ph-line-soft); } @media (max-width: 575.98px) { form[action="clientarea.php?action=masspay"] #btnMassPayMakePayment { width: 100%; } } :root[data-bs-theme="dark"] form[action="clientarea.php?action=masspay"] .card-body.p-0 > h3.card-title { color: #e8e9ff; } :root[data-bs-theme="dark"] form[action="clientarea.php?action=masspay"] .card-body.p-0 > p.text-muted { color: #a4a7d6 !important; } :root[data-bs-theme="dark"] form[action="clientarea.php?action=masspay"] .card.bg-default { border-color: #23264f; background: #12132b; } :root[data-bs-theme="dark"] form[action="clientarea.php?action=masspay"] fieldset .form-group:last-child { border-top-color: #23264f; } .sc-contact-form.ptb-60 { padding: 28px !important; } .sc-contact-form .form-group.row { margin-left: -8px; margin-right: -8px; } .sc-contact-form .form-group.row > [class*="col-"] { padding-left: 8px; padding-right: 8px; } .sc-contact-form label { display: block; margin-bottom: 6px; } .sc-contact-form form > .margin-bottom { margin: 4px 0 24px !important; } .sc-contact-form .btn-primary { min-width: 160px; } .sc-contact-info { display: flex; align-items: center; justify-content: center; } .sc-contact-info img { max-height: 520px; width: auto; max-width: 100%; } @media (max-width: 991.98px) { .sc-contact-info { display: none; } .sc-contact-form { max-width: none; } } .primary-content #default-captcha-domainchecker { gap: 12px 16px; margin-bottom: 20px !important; } .primary-content #default-captcha-domainchecker > p { font-size: 14px; } .primary-content #default-captcha-domainchecker img { height: 52px; width: auto; border-radius: 10px; } .primary-content #default-captcha-domainchecker .form-control { width: 190px; height: 52px; font-size: 22px; letter-spacing: .3em; text-align: center; } @media (max-width: 575.98px) { .primary-content #default-captcha-domainchecker .form-control { flex: 1 1 140px; width: auto; } } :root[data-bs-theme="dark"] .sc-submit-btns { border-top-color: #23264f; } .sc-captcha-info #default-captcha-domainchecker { display: block !important; padding: 0 0 4px !important; } .sc-captcha-info #default-captcha-domainchecker > p { margin: 0 0 12px; color: var(--ph-text-3); font-size: 14px; } .sc-captcha-info .d-flex { gap: 12px; align-items: center; } .sc-captcha-info #inputCaptchaImage { float: none; height: 52px; width: auto; border-radius: 10px; } .sc-captcha-info #inputCaptcha { width: 190px; max-width: 100%; height: 52px; margin: 0 !important; padding: 0 12px; border: 1.5px solid var(--ph-border-strong); border-radius: 12px; font-size: 22px; font-weight: 700; letter-spacing: .3em; text-align: center; text-transform: uppercase; } @media (max-width: 575.98px) { .sc-captcha-info .d-flex { flex-wrap: wrap; } .sc-captcha-info #inputCaptcha { flex: 1 1 140px; width: auto; } } :root[data-bs-theme="dark"] .sc-captcha-info #default-captcha-domainchecker > p { color: #c9cbf0; } :root[data-bs-theme="dark"] .sc-captcha-info #inputCaptcha { border-color: #3b3f73; background: #0b0c1f; color: #e8e9ff; } #default-captcha-domainchecker #inputCaptcha.form-control, .sc-captcha-info #default-captcha-domainchecker #inputCaptcha.form-control { width: 190px; max-width: 100%; height: 52px; } @media (max-width: 575.98px) { #default-captcha-domainchecker #inputCaptcha.form-control, .sc-captcha-info #default-captcha-domainchecker #inputCaptcha.form-control { width: auto; flex: 1 1 140px; } } .primary-content .btn-sm, .primary-content .btn-xs { display: inline-flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.2; } .primary-content .card > .card-body > h2.h5 { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 0 8px; color: var(--ph-ink); font-size: 26px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; } .primary-content .card > .card-body > h2.h5 > a.btn { order: 2; flex: none; float: none !important; margin-top: 2px; border: 1.5px solid var(--ph-border-strong); background: #fff; color: var(--ph-text-2); font-size: 14px; font-weight: 700; } .primary-content .card > .card-body > h2.h5 > a.btn:hover { border-color: var(--ph-blue); background: #f3f8fe; color: var(--ph-blue); } .primary-content .card > .card-body > h2.h5 > a.btn i { color: var(--ph-muted); font-size: 14px; } .primary-content .card > .card-body > ul.list-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 4px; padding: 0; } .primary-content .card > .card-body > ul.list-inline .list-inline-item { margin: 0; padding: 0 !important; color: var(--ph-muted); font-size: 14px; } .primary-content .card > .card-body > ul.list-inline .list-inline-item i { margin-right: 6px !important; color: #16a34a; } .primary-content .card > .card-body > hr { margin: 18px 0; border-top: 1px solid var(--ph-line-soft); } .primary-content .card > .card-body > article { max-width: 760px; color: var(--ph-text); font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; } .primary-content .card > .card-body > article p { margin: 0 0 16px; } .primary-content .card > .card-body > article ul { margin: 0 0 18px; padding-left: 24px; } .primary-content .card > .card-body > article li { margin-bottom: 6px; padding-left: 4px; } .primary-content .card > .card-body > article li::marker { color: var(--ph-blue); } .primary-content .card > .card-body > h5 { margin: 0 0 12px; color: var(--ph-ink); font-size: 17px; font-weight: 800; } .primary-content .card > .card-body form.d-flex > div { display: flex; gap: 10px; } .primary-content .card > .card-body form.d-flex .btn { min-height: 44px; padding: 0 22px; border: 1.5px solid var(--ph-border-strong); background: #fff; color: var(--ph-text); font-size: 15px; font-weight: 700; } .primary-content .card > .card-body form.d-flex .btn.bg-success-light:hover, .primary-content .card > .card-body form.d-flex .btn.bg-success-light:focus-visible { border-color: #16a34a; background: #e7f6ec; color: #166534; } .primary-content .card > .card-body form.d-flex .btn.bg-danger-light:hover, .primary-content .card > .card-body form.d-flex .btn.bg-danger-light:focus-visible { border-color: #dc2626; background: #fee2e2; color: #991b1b; } .primary-content .card > .card-body form.d-flex .btn.bg-success-light i { color: #16a34a; } .primary-content .card > .card-body form.d-flex .btn.bg-danger-light i { color: #dc2626; } .primary-content .card > .card-body > h3.card-title { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 800; color: var(--ph-ink); } .primary-content > a.btn.btn-default.btn-sm { min-height: 44px; padding: 0 18px; border: 1.5px solid var(--ph-border-strong); background: #fff; color: var(--ph-text); font-weight: 700; } .primary-content > a.btn.btn-default.btn-sm:hover { border-color: var(--ph-blue); background: #f3f8fe; color: var(--ph-blue); } @media (max-width: 575.98px) { .primary-content .card > .card-body > h2.h5 { flex-direction: column; font-size: 22px; } .primary-content .card > .card-body form.d-flex > div { width: 100%; } .primary-content .card > .card-body form.d-flex .btn { flex: 1; } } :root[data-bs-theme="dark"] .primary-content .card > .card-body > h2.h5, :root[data-bs-theme="dark"] .primary-content .card > .card-body > h5, :root[data-bs-theme="dark"] .primary-content .card > .card-body > h3.card-title { color: #e8e9ff; } :root[data-bs-theme="dark"] .primary-content .card > .card-body > h2.h5 > a.btn, :root[data-bs-theme="dark"] .primary-content .card > .card-body form.d-flex .btn, :root[data-bs-theme="dark"] .primary-content > a.btn.btn-default.btn-sm { border-color: #3b3f73; background: transparent; color: #e8e9ff; } :root[data-bs-theme="dark"] .primary-content .card > .card-body > h2.h5 > a.btn:hover, :root[data-bs-theme="dark"] .primary-content > a.btn.btn-default.btn-sm:hover { border-color: #60a5fa; background: #181a3d; color: #93c5fd; } :root[data-bs-theme="dark"] .primary-content .card > .card-body > hr { border-top-color: #23264f; } :root[data-bs-theme="dark"] .primary-content .card > .card-body > article, :root[data-bs-theme="dark"] .primary-content .card > .card-body > article h2, :root[data-bs-theme="dark"] .primary-content .card > .card-body > article h3 { color: #e8e9ff; } :root[data-bs-theme="dark"] .primary-content .card > .card-body > article a { color: #93c5fd; } :root[data-bs-theme="dark"] .primary-content .card > .card-body > article pre, :root[data-bs-theme="dark"] .primary-content .card > .card-body > article code { background: #181a3d; } :root[data-bs-theme="dark"] .primary-content .card > .card-body > article table th, :root[data-bs-theme="dark"] .primary-content .card > .card-body > article table td { border-color: #23264f; } :root[data-bs-theme="dark"] .primary-content .card > .card-body form.d-flex .btn.bg-success-light:hover { background: #12301f; color: #86efac; } :root[data-bs-theme="dark"] .primary-content .card > .card-body form.d-flex .btn.bg-danger-light:hover { background: #3b1414; color: #fca5a5; } .card.d-block.d-md-none { overflow: hidden; border: 1px solid var(--ph-line); border-radius: 16px; background: #fff !important; box-shadow: none; } .card.d-block.d-md-none > .card-header { padding: 14px 20px; border-bottom: 1px solid var(--ph-line); background: #fff; } .card.d-block.d-md-none > .card-header .card-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 800; color: var(--ph-ink); } :root[data-bs-theme="dark"] .card.d-block.d-md-none { border-color: #23264f; background: #12132b !important; } :root[data-bs-theme="dark"] .card.d-block.d-md-none > .card-header { border-bottom-color: #23264f; background: #12132b; } :root[data-bs-theme="dark"] .card.d-block.d-md-none > .card-header .card-title { color: #e8e9ff; } @media (min-width: 1200px) { :root[data-bs-theme="dark"] .sc-header .main-navbar-wrapper #nav .dropdown-menu, :root[data-bs-theme="dark"] .sc-header .sc-toolbar-wrap .sc-secondary-list .dropdown-menu { background: #12132b; border-color: rgba(255, 255, 255, .1); border-bottom-color: #2563eb; } :root[data-bs-theme="dark"] .sc-header #nav .dropdown-menu li.dropdown-item > a, :root[data-bs-theme="dark"] .sc-header .sc-secondary-list .dropdown-menu li.dropdown-item > a { color: #e8e9ff; } :root[data-bs-theme="dark"] .sc-header #nav .dropdown-menu li.dropdown-item > a:hover, :root[data-bs-theme="dark"] .sc-header .sc-secondary-list .dropdown-menu li.dropdown-item > a:hover { color: #fdba74; background: #181a3d; } :root[data-bs-theme="dark"] .sc-header .main-navbar-wrapper #nav > li > a:hover, :root[data-bs-theme="dark"] .sc-header .main-navbar-wrapper #nav > li.show > a, :root[data-bs-theme="dark"] .sc-header .sc-toolbar-wrap .sc-secondary-list > li.dropdown > a:hover { background: #181a3d; color: #fdba74; } :root[data-bs-theme="dark"] .sc-header .dropdown-menu .dropdown-divider { border-top-color: rgba(255, 255, 255, .1); } } @media (min-width: 1200px) { :root[data-bs-theme="dark"] .sc-header .main-navbar-wrapper #nav .dropdown-menu, :root[data-bs-theme="dark"] .sc-header .sc-toolbar-wrap .sc-secondary-list .dropdown-menu { border-bottom: 3px solid #2563eb !important; } :root[data-bs-theme="dark"] .sc-header #nav .dropdown-menu li.dropdown-item > a, :root[data-bs-theme="dark"] .sc-header .sc-secondary-list .dropdown-menu li.dropdown-item > a { color: #e8e9ff !important; } :root[data-bs-theme="dark"] .sc-header #nav .dropdown-menu li.dropdown-item > a:hover, :root[data-bs-theme="dark"] .sc-header .sc-secondary-list .dropdown-menu li.dropdown-item > a:hover { color: #fdba74 !important; } } @media (min-width: 1200px) { :root[data-bs-theme="dark"] .sc-header .main-navbar-wrapper #nav > li > a:hover::before, :root[data-bs-theme="dark"] .sc-header .main-navbar-wrapper #nav > li.show > a::before { background: #181a3d; } } body:not(.modal-open) .tooltip { z-index: 1029; } :root[data-bs-theme="dark"] .sc-header, :root[data-bs-theme="dark"] .sc-header:not(.sc-double-header) { background: rgba(15, 23, 42, 0.98); } #nav .collapsable-dropdown:not(:has(.collapsable-dropdown-menu > li)) { display: none !important; } #tableServicesList td:first-child, #tableDomainsList td:nth-child(2) { width: 44px; padding-left: 20px; padding-right: 4px; } #tableServicesList td.ssl-info img, #tableDomainsList td.ssl-info img { width: 20px; height: auto; opacity: .9; } #tableServicesList td:nth-child(2) { display: table-cell; line-height: 1.45; } #tableServicesList td:nth-child(2) > strong { display: block; color: var(--ph-ink); font-size: 16px; font-weight: 700; } #tableServicesList td:nth-child(2) > br { display: none; } #tableServicesList td:nth-child(2) > a { display: inline-block; margin-top: 2px; color: var(--ph-muted); font-size: 14px; font-weight: 500; text-decoration: none; } #tableServicesList td:nth-child(2) > a:hover { color: var(--ph-blue); text-decoration: underline; text-underline-offset: 3px; } .ph-row-action { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; margin-left: 12px; padding: 0 16px; border: 1.5px solid var(--ph-blue); border-radius: 999px; color: var(--ph-blue); font-size: 14px; font-weight: 700; text-decoration: none !important; white-space: nowrap; transition: background-color .2s ease, color .2s ease; } .ph-row-action:hover, .ph-row-action:focus-visible { background: var(--ph-blue); color: #fff; } .dataTables_wrapper table.table-list td:last-child { white-space: nowrap; } @media (max-width: 575.98px) { .dataTables_wrapper table.table-list tbody td:last-child .ph-row-action { flex: 1 0 100%; margin: 8px 0 0; } .dataTables_wrapper table.table-list tbody td:last-child { flex-wrap: wrap; } #tableServicesList td:first-child { width: auto; padding: 0; } } :root[data-bs-theme="dark"] .ph-row-action { border-color: #60a5fa; color: #93c5fd; } :root[data-bs-theme="dark"] .ph-row-action:hover { background: #60a5fa; color: #0b0c1f; } :root[data-bs-theme="dark"] #tableServicesList td:nth-child(2) > strong { color: #e8e9ff; } @media (max-width: 575.98px) { #tableServicesList tbody tr { position: relative; } #tableServicesList tbody td:first-child { position: absolute; top: 14px; right: 14px; z-index: 1; display: block; width: auto; padding: 0; border: 0; background: transparent; } #tableServicesList tbody td:first-child::before { content: none; } #tableServicesList tbody td:nth-child(2) { display: block; padding: 16px 52px 12px 16px; text-align: left !important; } #tableServicesList tbody td:nth-child(2)::before { content: none; } #tableServicesList tbody td:nth-child(2) > strong { font-size: 18px; } } .invoice-container .card-header h3, .invoice-container .card-header .card-title { margin: 0; font-size: 16px; font-weight: 800; color: var(--ph-ink); } .invoice-container .card-body { padding: 18px 22px; color: var(--ph-text); font-size: 15px; line-height: 1.7; } .invoice-container .payment-btn-container .btn-success { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 260px; min-height: 48px; border: 0; border-radius: 12px; background: var(--ph-blue); color: #fff; font-weight: 700; } .invoice-container .payment-btn-container .btn-success:hover { background: var(--ph-blue-dark); } .invoice-container .btn-group .btn { margin-top: 0; } .invoice-container .card > .card-title[class*="bg-"] { margin: 0; padding: 12px 22px !important; border-bottom: 1px solid var(--ph-line); border-radius: 0; font-size: 15px; font-weight: 800 !important; } .invoice-container .card > .card-title.bg-warning { background: #fff7ed !important; color: #9a3412 !important; } .invoice-container .card > .card-title.bg-info { background: #eef5fd !important; color: #1e5a96 !important; } .invoice-container .card > .card-text { margin: 0 !important; padding: 16px 22px; color: var(--ph-text); font-size: 15px; line-height: 1.7; } .invoice-container .row.w-100 > .card { overflow: hidden; } :root[data-bs-theme="dark"] .primary-content .col-md-8.offset-md-2 > .card > table.table-striped td { border-top-color: #23264f; color: #e8e9ff; } :root[data-bs-theme="dark"] .primary-content .col-md-8.offset-md-2 > .card > table.table-striped td:last-child { color: #e8e9ff; } :root[data-bs-theme="dark"] .primary-content .col-md-8.offset-md-2 > .card > .card-footer { border-top-color: #23264f; background: #181a3d; color: #a4a7d6; } .btn.disabled.btn-default { border-color: var(--ph-line); background: var(--ph-tint) !important; color: #9aa4b2 !important; opacity: 1; } :root[data-bs-theme="dark"] .affiliate-stat, :root[data-bs-theme="dark"] table.table-rounded { border-color: #23264f; background: #12132b !important; } :root[data-bs-theme="dark"] .affiliate-stat span { color: #e8e9ff; } :root[data-bs-theme="dark"] .affiliate-stat i { background: #181a3d; } :root[data-bs-theme="dark"] .card.my-3 .card-body input.form-control[readonly] { border-color: #2f3260; background: #0b0c1f; color: #c9cbf0; } :root[data-bs-theme="dark"] .ph-copy-ref { border-color: #60a5fa; background: transparent; color: #93c5fd; } :root[data-bs-theme="dark"] table.table-rounded td { border-top-color: #23264f !important; color: #e8e9ff; } :root[data-bs-theme="dark"] table.table-rounded td strong { color: #e8e9ff; } :root[data-bs-theme="dark"] .ph-error h1.display-1, :root[data-bs-theme="dark"] .ph-error h3 { color: #e8e9ff !important; } :root[data-bs-theme="dark"] .ph-error-links a { border-color: #2f3260; background: rgba(30, 41, 59, .7); color: #e8e9ff; } :root[data-bs-theme="dark"] .ph-error .buttons .btn-info { border-color: #3b3f73; background: transparent; color: #e8e9ff; } :root[data-bs-theme="dark"] .text-center > .card.py-3 { border-color: #23264f; background: #12132b; } :root[data-bs-theme="dark"] .text-center > .card.py-3 h1 { color: #e8e9ff; } #main-body:focus { outline: none; } :root:not([data-bs-theme="dark"]) .sidebar-menu-item-label, :root:not([data-bs-theme="dark"]) .sc-read-more { color: var(--ph-blue-dark); } :root[data-bs-theme="dark"] .sidebar-menu-item-label, :root[data-bs-theme="dark"] .sidebar .truncate { color: #93c5fd; } :root[data-bs-theme="dark"] .text-muted, :root[data-bs-theme="dark"] .small.text-muted { color: #9ca3af !important; } :root[data-bs-theme="dark"] .sc-read-more { color: #60a5fa; } :root[data-bs-theme="dark"] .kb-article-item small { color: #9ca3af; } :root[data-bs-theme="dark"] .ph-theme-switch:focus-visible .ph-theme-track { box-shadow: 0 0 0 2px #0b0c1f, 0 0 0 4px #60a5fa; } #alertOverdueInvoice { display: flex; align-items: center; justify-content: space-between; gap: 16px; } #alertOverdueInvoice .float-right { order: 2; float: none !important; flex: none; margin-left: auto; } @media (max-width: 575.98px) { #alertOverdueInvoice { flex-direction: column; align-items: flex-start; } #alertOverdueInvoice .float-right { order: 0; margin-left: 0; } } .primary-content .tab-content .panel, .primary-content .tab-content .card { display: flow-root; } :root { --sc-ink: #25265e; --sc-body: rgba(37, 38, 94, .70); --sc-muted: rgba(37, 38, 94, .68); --sc-blue: #2563eb; --sc-blue-dark: #1d4ed8; --sc-blue-soft: #3b82f6; --sc-indigo: #4f46e5; --sc-indigo-deep: #3b2bbf; --sc-cyan: #06b6d4; --sc-page: #f8faff; --sc-card: #ffffff; --sc-line: #e5e7eb; --sc-line-indigo: #e0e7ff; --sc-star: #fbbf24; --sc-ok: #16a34a; --sc-gradient-text: linear-gradient(to right, #0556f3, #3b17c1, #06b6d4); --sc-gradient-topbar: linear-gradient(90deg, #5b3df5 0%, #4f46e5 42%, #3b2bbf 100%); --sc-gradient-band: linear-gradient(257.85deg, #451ce3 6.18%, #20097d 65.39%); --sc-gradient-support: linear-gradient(255.09deg, #3f1dc4 17.2%, #2a128e 75.48%); --sc-bg-hero: radial-gradient(circle at 14% 18%, rgba(56, 189, 248, .18), transparent 24%), radial-gradient(circle at 86% 20%, rgba(59, 130, 246, .12), transparent 22%), linear-gradient(#fff 0%, #f5f8ff 62%, #edf3ff 100%); --sc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .05); --sc-shadow-lg: 0 20px 40px -12px rgba(37, 38, 94, .18); --sc-radius: 12px; --sc-radius-lg: 16px; --sc-font: "Euclid Circular A", "Figtree", system-ui, -apple-system, "Segoe UI", arial, sans-serif; --ph-blue: var(--sc-blue); --ph-blue-dark: var(--sc-blue-dark); --ph-orange: var(--sc-blue); --ph-orange-dark: var(--sc-blue-dark); --ph-navy: var(--sc-ink); --ph-ink: var(--sc-ink); --ph-text: var(--sc-ink); --ph-text-2: rgba(37, 38, 94, .85); --ph-text-3: rgba(37, 38, 94, .75); --ph-muted: rgba(37, 38, 94, .62); --ph-border-strong: #cfd6ee; --ph-line: var(--sc-line); --ph-line-soft: #eef0fb; --ph-tint: #f3f6ff; --ph-page: var(--sc-page); --primary: var(--sc-blue); --primary-dark: var(--sc-blue-dark); --primary-darker: #1e40af; --primary-light: #dbeafe; --heading-color: var(--sc-ink); --body-color: var(--sc-body); --border-color: var(--sc-line); --custom-radius: var(--sc-radius); --accent: var(--sc-indigo); --accent-dark: var(--sc-indigo-deep); --font-family-sans-serif: var(--sc-font); --font-family-monospace: var(--sc-font); --gradient-blue: linear-gradient(81deg, #2563eb, #3b82f6 50%, #1d4ed8); --gradient-orange: var(--gradient-blue); } :root[data-bs-theme="dark"] { --sc-ink: #e8e9ff; --sc-body: rgba(232, 233, 255, .75); --sc-muted: rgba(232, 233, 255, .55); --sc-blue: #3b82f6; --sc-blue-dark: #60a5fa; --sc-blue-soft: #93c5fd; --sc-page: #0b0c1f; --sc-card: #12132b; --sc-line: rgba(255, 255, 255, .10); --sc-line-indigo: rgba(255, 255, 255, .08); --sc-gradient-text: linear-gradient(to right, #60a5fa, #a5b4fc, #22d3ee); --sc-bg-hero: radial-gradient(circle at 14% 18%, rgba(56, 189, 248, .10), transparent 24%), radial-gradient(circle at 86% 20%, rgba(99, 102, 241, .14), transparent 22%), linear-gradient(#0b0c1f 0%, #0d0f27 62%, #10122e 100%); --sc-shadow-sm: none; --sc-shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, .6); --ph-blue: #60a5fa; --ph-blue-dark: #93c5fd; --ph-orange: #60a5fa; --ph-orange-dark: #93c5fd; --ph-navy: #e8e9ff; --ph-ink: #e8e9ff; --ph-text: #e8e9ff; --ph-text-2: rgba(232, 233, 255, .85); --ph-text-3: rgba(232, 233, 255, .75); --ph-muted: rgba(232, 233, 255, .62); --ph-border-strong: rgba(255, 255, 255, .18); --ph-line: rgba(255, 255, 255, .10); --ph-line-soft: rgba(255, 255, 255, .06); --ph-tint: #12132b; --ph-page: #0b0c1f; --primary: #3b82f6; --primary-dark: #2563eb; --primary-darker: #1d4ed8; --heading-color: #e8e9ff; --body-color: rgba(232, 233, 255, .75); --border-color: rgba(255, 255, 255, .10); } html { font-size: 16px; } body { font-family: var(--sc-font); font-size: 16px; line-height: 1.5; color: var(--sc-body); background-color: var(--sc-page); -webkit-font-smoothing: antialiased; } h1, h2 { font-weight: 500; letter-spacing: -.02em; color: var(--sc-ink); } h3, h4, h5, h6 { font-weight: 600; letter-spacing: -.01em; color: var(--sc-ink); } a { color: var(--sc-blue); } a:hover { color: var(--sc-blue-dark); } button, input, select, textarea { font-family: inherit; } .container { width: 100%; max-width: 1920px; margin-inline: auto; padding-inline: 16px; } @media (min-width: 768px) { .container { padding-inline: 32px; } } @media (min-width: 1280px) { .container { padding-inline: 80px; } } @media (min-width: 1536px) { .container { padding-inline: 8.3333%; } } .sc-hero-bg { background: var(--sc-bg-hero); } .sc-gradient-text { background: var(--sc-gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .btn-primary, .btn-primary:focus { background: var(--sc-blue); border-color: var(--sc-blue); color: #fff; background-image: none; } .btn-primary:hover { background: var(--sc-blue-dark); border-color: var(--sc-blue-dark); color: #fff; } :root[data-bs-theme="dark"] .btn-primary { color: #fff; } :focus-visible { outline-color: var(--sc-blue); } .sc-page-action-primary { color: #fff !important; } .sc-topbar { display: block !important; height: 36px; border: 0; color: #fff; font-size: 14px; font-weight: 400; background: radial-gradient(circle at 18% 50%, rgba(129, 140, 248, .18), transparent 18%), radial-gradient(circle at 78% 28%, rgba(99, 102, 241, .22), transparent 24%), var(--sc-gradient-topbar); } .sc-topbar a { color: #fff; } .sc-topbar a:hover { color: #fff; text-decoration: underline; } .sc-top-phone { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; } .sc-top-phone i { font-size: 14px; } .sc-top-promo { flex: 1 1 auto; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-top-chip { display: inline-block; padding: 1px 6px; border: 1px dashed rgba(255, 255, 255, .85); border-radius: 4px; line-height: 1.3; } .sc-top-right { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } :root[data-bs-theme="dark"] .sc-topbar .ph-theme-track { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); } :root[data-bs-theme="dark"] .sc-topbar .ph-theme-knob { background: #0f172a; } @media (max-width: 991.98px) { .sc-top-phone span { display: none; } .sc-top-phone { min-width: 44px; min-height: 36px; } .sc-top-promo { text-align: center; } } :root[data-bs-theme="dark"] .sc-header, :root[data-bs-theme="dark"] .sc-header:not(.sc-double-header) { background: var(--sc-card); border-bottom-color: var(--sc-line); } :root[data-bs-theme="dark"] .sc-topbar, :root[data-bs-theme="dark"] .ph-topbar.sc-topbar { background: radial-gradient(circle at 18% 50%, rgba(129, 140, 248, .18), transparent 18%), radial-gradient(circle at 78% 28%, rgba(99, 102, 241, .22), transparent 24%), linear-gradient(90deg, #4a2fd8 0%, #3f38c4 42%, #2f2299 100%); border-bottom: 0; } .sc-logo-dark { display: none; } :root[data-bs-theme="dark"] .sc-logo-light { display: none; } :root[data-bs-theme="dark"] .sc-logo-dark { display: inline-block; } :root[data-bs-theme="dark"] .sc-topbar .ph-topbar-links img { filter: none; } .sc-mega { position: relative; flex: 0 1 auto; gap: 4px; margin: 0 16px; } .sc-mega .sc-mega-item { position: static; } .sc-mega .sc-mega-item:not(.sc-mega-wide) { position: relative; } .sc-mega .ph-mega-btn { padding: 8px 12px; border-radius: 8px; color: var(--sc-ink); font: 500 16px/1.5 var(--sc-font); } .sc-mega .ph-mega-btn:hover { background: #f3f4f6; color: var(--sc-ink); } :root[data-bs-theme="dark"] .sc-mega .ph-mega-btn:hover, :root[data-bs-theme="dark"] .sc-mega .ph-mega-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .08); color: var(--sc-ink); } .sc-mega .ph-mega-btn i { font-size: 10px; } .sc-mega .sc-mega-panel { top: calc(100% + 8px); left: 0; width: 420px; padding: 24px; background: var(--sc-card); border: 1px solid #f3f4f6; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); } .sc-mega .sc-mega-wide .sc-mega-panel { width: 900px; } .sc-mega .sc-mega-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px; } :root[data-bs-theme="dark"] .sc-mega .sc-mega-panel { border-color: var(--sc-line); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .6); } .sc-mega-grid { display: grid; gap: 32px; } .sc-mega-grid.sc-cols-1 { grid-template-columns: 1fr; } .sc-mega-grid.sc-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sc-mega-col:not(:last-child) { border-right: 1px solid #f3f4f6; } :root[data-bs-theme="dark"] .sc-mega-col:not(:last-child) { border-right-color: var(--sc-line); } .sc-mega-head { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #3b82f6; } .sc-mega-link { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 12px; color: inherit; text-decoration: none; transition: background-color .15s ease; } .sc-mega-link:hover, .sc-mega-link:focus-visible { background: #eff6ff; text-decoration: none; } .sc-mega-chip { display: flex; flex: 0 0 40px; align-items: center; justify-content: center; width: 40px; height: 40px; margin-top: 2px; border-radius: 8px; background: #f3f4f6; color: #2563eb; transition: background-color .15s ease; } .sc-mega-link:hover .sc-mega-chip, .sc-mega-link:focus-visible .sc-mega-chip { background: #dbeafe; } .sc-mega-chip svg, .sc-mega-chip img { width: 20px; height: 20px; } .sc-mega-text { min-width: 0; } .sc-mega-text strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.35; color: #111827; } .sc-mega-text small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.6; color: #6b7280; } .sc-mega-link:hover .sc-mega-text strong { color: #1d4ed8; } :root[data-bs-theme="dark"] .sc-mega-link:hover, :root[data-bs-theme="dark"] .sc-mega-link:focus-visible { background: rgba(59, 130, 246, .14); } :root[data-bs-theme="dark"] .sc-mega-chip { background: rgba(255, 255, 255, .08); color: #93c5fd; } :root[data-bs-theme="dark"] .sc-mega-link:hover .sc-mega-chip { background: rgba(59, 130, 246, .25); } :root[data-bs-theme="dark"] .sc-mega-text strong { color: #e8e9ff; } :root[data-bs-theme="dark"] .sc-mega-text small { color: rgba(232, 233, 255, .6); } :root[data-bs-theme="dark"] .sc-mega-link:hover .sc-mega-text strong { color: #93c5fd; } :root[data-bs-theme="dark"] .sc-mega-head { color: #60a5fa; } .sc-mega { margin-left: 48px; margin-right: auto; } @media (max-width: 1399.98px) { .sc-mega .sc-mega-wide .sc-mega-panel { width: calc(100vw - 400px); } .sc-mega-grid { gap: 20px; } } @media (max-width: 1199.98px) { :root[data-bs-theme="dark"] .offcanvas-collapse { background: var(--sc-page); } :root[data-bs-theme="dark"] .ph-offcanvas-head { background: var(--sc-card); } :root[data-bs-theme="dark"] .ph-offcanvas-close { border-color: var(--sc-line); color: var(--sc-ink); } :root[data-bs-theme="dark"] .ph-offcanvas-close:hover { background: rgba(255, 255, 255, .08); } .sc-mobile-nav { padding-top: 8px; } .ph-mobile-toggle { min-height: 56px; padding: 12px 0; border-bottom: 0; font-size: 20px; font-weight: 700; color: var(--sc-ink); } .ph-mobile-toggle:hover { color: var(--sc-blue); } .ph-mobile-toggle i { font-size: 13px; } :root[data-bs-theme="dark"] .ph-mobile-toggle { color: var(--sc-ink); } .ph-mobile-sub { padding: 0 0 8px; } .ph-mobile-sub a { display: flex; align-items: flex-start; gap: 12px; min-height: 56px; padding: 10px; border-radius: 12px; font-size: 16px; color: inherit; } .ph-mobile-sub a:hover { background: #eff6ff; color: inherit; } :root[data-bs-theme="dark"] .ph-mobile-sub a:hover { background: rgba(59, 130, 246, .14); } .ph-mobile-sub .sc-mega-chip { width: 36px; height: 36px; flex-basis: 36px; margin-top: 0; } .ph-mobile-sub .sc-mega-text strong { font-size: 16px; color: var(--sc-ink); } .ph-mobile-sub .sc-mega-text small { font-size: 14px; } :root[data-bs-theme="dark"] .ph-mobile-sub .sc-mega-text strong { color: #e8e9ff; } } @media (max-width: 1199.98px) { :root[data-bs-theme="dark"] .ph-offcanvas-logo .sc-logo-light { display: none; } :root[data-bs-theme="dark"] .ph-offcanvas-logo .sc-logo-dark { display: block; } #mainNavbar .sc-mobile-nav .ph-mobile-toggle { color: var(--sc-ink); } #mainNavbar .sc-mobile-nav .ph-mobile-toggle:hover { color: var(--sc-blue); } #mainNavbar .sc-mobile-nav .ph-mobile-sub a { display: flex; flex-direction: row; align-items: flex-start; gap: 12px; } #mainNavbar .sc-mobile-nav .ph-mobile-sub li { margin: 0; } } .sc-footer { margin-top: 0; padding: 64px 0 24px; background: var(--sc-bg-hero); border-top: 1px solid var(--sc-line-indigo); color: var(--sc-body); font-size: 16px; } .sc-footer h2, .sc-footer h3 { letter-spacing: normal; } .sc-foot-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; } .sc-legal { padding: 20px; background: var(--sc-card); border: 1px solid var(--sc-line); border-radius: 16px; box-shadow: var(--sc-shadow-sm); } .sc-legal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .sc-legal-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: #ecfdf5; color: #059669; } .sc-legal-icon svg { width: 22px; height: 22px; } .sc-legal-head h2 { margin: 0; font-size: 20px; font-weight: 600; color: var(--sc-ink); } .sc-legal-grid { display: grid; grid-template-columns: 1fr 1fr; } .sc-legal-grid > div + div { margin-left: 24px; padding-left: 24px; border-left: 1px solid var(--sc-line); } .sc-legal-grid h3 { margin: 0 0 12px; font-size: 16px; font-weight: 600; color: var(--sc-ink); } .sc-legal-grid dl { margin: 0; } .sc-legal-grid dt { margin-top: 12px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-muted); } .sc-legal-grid dd { margin: 2px 0 0; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--sc-ink); overflow-wrap: anywhere; } .sc-legal-grid dd a { color: inherit; } .sc-legal-grid dd a:hover { color: var(--sc-blue); } .sc-pay { margin-top: 28px; padding: 0 4px; } .sc-pay h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--sc-ink); } .sc-pay p { margin: 0 0 14px; font-size: 14px; color: var(--sc-muted); } .sc-pay-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0; padding: 0; } .sc-pay-logos img { display: block; height: 24px; width: auto; max-width: 84px; object-fit: contain; } :root[data-bs-theme="dark"] .sc-pay-logos li { padding: 4px 8px; border-radius: 8px; background: #fff; } .sc-foot-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .sc-foot-col h2 { margin: 0 0 20px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-muted); } .sc-foot-col ul { margin: 0; padding: 0; } .sc-foot-col li { margin-bottom: 12px; line-height: 1.5; } .sc-foot-col a { color: var(--sc-ink); font-size: 16px; font-weight: 500; text-decoration: none; } .sc-foot-col a:hover { color: var(--sc-blue); text-decoration: none; } .sc-foot-brand { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; margin-top: 40px; padding: 24px 0; border-top: 1px solid var(--sc-line); border-bottom: 1px solid var(--sc-line); } .sc-foot-logo img { height: 40px; width: auto; } .sc-foot-products { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--sc-muted); } .sc-foot-products > div { display: flex; align-items: center; gap: 24px; } .sc-foot-products img { display: block; height: 28px; width: auto; } .sc-foot-products a:first-child img { height: 40px; } .sc-foot-social { display: flex; gap: 8px; margin: 0; padding: 0; } .sc-foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--sc-card); border: 1px solid var(--sc-line); color: var(--sc-body); box-shadow: var(--sc-shadow-sm); transition: color .15s ease, border-color .15s ease; } .sc-foot-social a:hover { color: var(--sc-blue); border-color: var(--sc-blue); } .sc-foot-social svg { width: 18px; height: 18px; } .sc-foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 20px; font-size: 14px; color: var(--sc-muted); } .sc-foot-bottom p { margin: 0; } .sc-foot-bottom a { margin-left: 16px; color: var(--sc-muted); font-weight: 500; } .sc-foot-bottom a:first-child { margin-left: 0; } .sc-foot-bottom a:hover { color: var(--sc-blue); } @media (max-width: 1199.98px) { .sc-foot-top { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 767.98px) { .sc-footer { padding-top: 40px; } .sc-foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sc-legal-grid { grid-template-columns: 1fr; gap: 16px; } .sc-legal-grid > div + div { margin-left: 0; padding-left: 0; border-left: 0; padding-top: 16px; border-top: 1px solid var(--sc-line); } .sc-foot-brand { flex-direction: column; align-items: flex-start; } .sc-foot-products { align-items: flex-start; } .sc-foot-bottom { flex-direction: column; align-items: flex-start; } } @media (max-width: 479.98px) { .sc-foot-links { grid-template-columns: 1fr; } } .sc-page-header.py-5.bg-gradient, .sc-page-header.bg-gradient { padding-top: 40px !important; padding-bottom: 40px !important; background: linear-gradient(135deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(45deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(258.38deg, #532be9 24.08%, #1b076e 91.93%); box-shadow: none; } :root[data-bs-theme="dark"] .sc-page-header.bg-gradient { background: linear-gradient(135deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(45deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(258.38deg, #3d22b0 24.08%, #14064f 91.93%); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); } .sc-page-header h1 { font-size: 36px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; color: #fff; } .sc-page-header-info > p { color: rgba(255, 255, 255, .82); font-size: 16px; letter-spacing: 0; } @media (max-width: 767.98px) { .sc-page-header h1 { font-size: 28px; } .sc-page-header.bg-gradient { padding-top: 28px !important; padding-bottom: 28px !important; } } .sc-page-action { height: 40px; min-height: 40px; padding: 0 20px; border-radius: 999px; font-size: 14px; font-weight: 500; letter-spacing: .35px; } .sc-page-action-primary { background: #fff; color: #25265e !important; box-shadow: none; } .sc-page-action-primary:hover, .sc-page-action-primary:focus-visible { background: #eef2ff; color: #25265e !important; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); } .sc-page-action-secondary { background: transparent; color: #fff !important; border: 1px solid rgba(255, 255, 255, .5); } .sc-hero { padding: 64px 0 72px; } .sc-hero-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; } .sc-hero-copy { max-width: 700px; } .sc-badge { display: inline-flex; align-items: center; padding: 6px 14px; border: 1px solid rgba(191, 219, 254, .7); border-radius: 999px; background: rgba(255, 255, 255, .85); box-shadow: var(--sc-shadow-sm); font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--sc-body); } .sc-hero h1 { margin: 24px 0 20px; font-size: 60px; line-height: 1; font-weight: 500; letter-spacing: -1.5px; color: var(--sc-ink); } .sc-hero h1 > span { display: block; padding-bottom: .05em; } .sc-hero-text { max-width: 512px; margin: 0 0 32px; font-size: 18px; line-height: 1.5; color: var(--sc-body); } .sc-search-form { max-width: 576px; } .sc-search { display: flex; align-items: center; gap: 8px; height: 56px; padding: 6px; background: var(--sc-card); border-radius: 6px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .10), 0 2px 4px -2px rgba(0, 0, 0, .10); } .sc-search:focus-within { box-shadow: 0 0 0 2px var(--sc-blue), 0 4px 6px -1px rgba(0, 0, 0, .10); } .sc-search input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 18px; border: 0; outline: 0 !important; background: transparent; font-size: 16px; color: var(--sc-ink); box-shadow: none; } .sc-search input::placeholder { color: rgba(37, 38, 94, .5); } :root[data-bs-theme="dark"] .sc-search input::placeholder { color: rgba(232, 233, 255, .5); } .sc-search-btn { flex: 0 0 auto; height: 44px; padding: 0 24px; border: 0; border-radius: 4px; background: var(--sc-blue); color: #fff; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color .15s ease; } .sc-search-btn:hover, .sc-search-btn:focus-visible { background: var(--sc-blue-dark); } .sc-search-form .domainchecker-homepage-captcha { margin-top: 12px; font-size: 14px; } .sc-tlds { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 28px 0 0; padding: 0; } .sc-tlds li { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border: 1px solid rgba(191, 219, 254, .9); border-radius: 999px; background: rgba(255, 255, 255, .8); box-shadow: var(--sc-shadow-sm); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .sc-tlds strong { font-size: 14px; font-weight: 600; color: var(--sc-ink); } .sc-tlds span { font-size: 12px; color: var(--sc-muted); } :root[data-bs-theme="dark"] .sc-badge, :root[data-bs-theme="dark"] .sc-tlds li { background: rgba(255, 255, 255, .06); border-color: var(--sc-line); } .sc-hero-art { display: flex; flex-direction: column; align-items: center; gap: 36px; } .sc-hero-art img { display: block; width: 328px; max-width: 100%; height: auto; } .sc-tech { display: flex; gap: 28px; margin: 0; padding: 0; color: var(--sc-blue); } .sc-tech li { display: block; line-height: 0; } .sc-tech svg { width: 40px; height: 40px; } @media (max-width: 1023.98px) { .sc-hero-in { grid-template-columns: 1fr; } .sc-hero-art { display: none; } .sc-hero h1 { font-size: 48px; } } @media (max-width: 575.98px) { .sc-hero { padding: 40px 0 48px; } .sc-hero h1 { font-size: 36px; letter-spacing: -1px; } .sc-hero-text { font-size: 16px; } .sc-search { height: 52px; } } .sc-search-form .text-center.row { justify-content: flex-start !important; margin: 0; text-align: left !important; } .sc-search-form .domainchecker-homepage-captcha, .sc-search-form .domainchecker-homepage-captcha .col-md-8 { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; margin: 12px 0 0; } .sc-search-form #default-captcha-domainchecker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0; padding: 0 !important; text-align: left !important; } .sc-search-form #default-captcha-domainchecker .col-6 { flex: 0 0 auto; width: auto; max-width: none; padding: 0; } .sc-search-form #default-captcha-domainchecker .captchaimage img { display: block; height: 44px; width: auto; border-radius: 6px; } .sc-search-form #default-captcha-domainchecker #inputCaptcha.form-control { width: 160px; height: 44px; padding: 0 14px; border: 1px solid var(--ph-border-strong); border-radius: 6px; background: var(--sc-card); color: var(--sc-ink); font-size: 16px; letter-spacing: .12em; box-shadow: none; } .sc-search-form #default-captcha-domainchecker #inputCaptcha.form-control:focus { border-color: var(--sc-blue); outline: 0 !important; box-shadow: 0 0 0 2px rgba(37, 99, 235, .25); } :root[data-bs-theme="dark"] .sc-search { border: 1px solid var(--sc-line); background: #15173a; } .sc-plans { padding: 64px 0; background: var(--sc-page); } .sc-section-head { max-width: 900px; margin: 0 auto 48px; text-align: center; } .sc-section-head h2 { margin: 0 0 16px; font-size: 48px; line-height: 1; font-weight: 500; letter-spacing: -.02em; color: var(--sc-ink); } .sc-section-head p { margin: 0; font-size: 16px; line-height: 2; color: var(--sc-body); } .sc-plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; align-items: start; } .sc-plan { position: relative; display: flex; flex-direction: column; background: var(--sc-card); border: 1px solid var(--sc-line); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow-sm); overflow: hidden; } .sc-plan.is-popular { border: 2px solid #3b82f6; box-shadow: 0 10px 30px -10px rgba(37, 99, 235, .35); } .sc-plan-flag { padding: 8px 12px; background: #3b82f6; color: #fff; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .sc-plan-top { padding: 24px; } .sc-plan-top h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sc-ink); } .sc-plan-tag { min-height: 42px; margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--sc-muted); } .sc-plan-strike { min-height: 24px; margin: 0; font-size: 14px; color: var(--sc-muted); } .sc-plan-strike del { color: var(--sc-muted); } .sc-save { display: inline-block; margin-left: 6px; padding: 2px 8px; border: 1px solid #bbf7d0; border-radius: 999px; background: #f0fdf4; color: #15803d; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .sc-plan-price { margin: 0 0 8px; color: var(--sc-ink); } .sc-plan-price strong { font-size: 36px; line-height: 1.1; font-weight: 600; letter-spacing: -.01em; } .sc-plan-price span { font-size: 14px; color: var(--sc-muted); } .sc-plan-note { margin: 0 0 20px; font-size: 12px; line-height: 1.5; color: var(--sc-muted); } .sc-plan-cta { display: flex; align-items: center; justify-content: center; height: 50px; border: 1px solid #3b82f6; border-radius: 8px; background: transparent; color: #2563eb; font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); transition: background-color .15s ease, color .15s ease; } .sc-plan-cta:hover, .sc-plan-cta:focus-visible { background: #2563eb; border-color: #2563eb; color: #fff; text-decoration: none; } .sc-plan.is-popular .sc-plan-cta { background: #2563eb; border-color: #2563eb; color: #fff; } .sc-plan.is-popular .sc-plan-cta:hover { background: #1d4ed8; border-color: #1d4ed8; } .sc-plan-lve { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 24px; padding: 14px 0; border-top: 1px solid var(--sc-line); border-bottom: 1px solid var(--sc-line); font-size: 14px; color: var(--sc-ink); } .sc-plan-lve span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-muted); } .sc-plan-lve i { display: inline-flex; color: #6366f1; } .sc-plan-lve i svg { width: 14px; height: 14px; } .sc-plan-lve strong { font-weight: 500; } .sc-plan-ticks { margin: 0; padding: 16px 24px 8px; } .sc-plan-ticks li { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 16px; line-height: 1.4; color: var(--sc-body); } .sc-plan-ticks li svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--sc-ok); } .sc-plan-ticks li span { border-bottom: 1px dashed rgba(37, 38, 94, .35); } .sc-feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px; margin-top: 48px; } .sc-feat { padding: 24px; background: var(--sc-card); border-radius: var(--sc-radius); box-shadow: 0 1px 3px rgba(37, 38, 94, .08), 0 8px 24px -12px rgba(37, 38, 94, .12); } .sc-feat h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 24px; font-weight: 400; letter-spacing: 0; color: var(--sc-ink); } .sc-feat-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: #f3f4f6; color: #2563eb; flex: none; } .sc-feat-ico svg { width: 22px; height: 22px; } .sc-feat p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--sc-muted); } :root[data-bs-theme="dark"] .sc-plan { background: var(--sc-card); } :root[data-bs-theme="dark"] .sc-plan.is-popular { border-color: #3b82f6; box-shadow: none; } :root[data-bs-theme="dark"] .sc-plan-cta { color: #93c5fd; border-color: #60a5fa; box-shadow: none; } :root[data-bs-theme="dark"] .sc-plan-cta:hover, :root[data-bs-theme="dark"] .sc-plan.is-popular .sc-plan-cta { background: #3b82f6; border-color: #3b82f6; color: #fff; } :root[data-bs-theme="dark"] .sc-plan-ticks li span { border-bottom-color: rgba(232, 233, 255, .3); } :root[data-bs-theme="dark"] .sc-save { background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .3); color: #86efac; } :root[data-bs-theme="dark"] .sc-feat { box-shadow: none; border: 1px solid var(--sc-line); } :root[data-bs-theme="dark"] .sc-feat-ico { background: rgba(255, 255, 255, .08); color: #93c5fd; } @media (max-width: 1279.98px) { .sc-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sc-feat-grid { gap: 24px; } } @media (max-width: 991.98px) { .sc-feat-grid { grid-template-columns: 1fr; } .sc-section-head h2 { font-size: 36px; } } @media (max-width: 639.98px) { .sc-plan-grid { grid-template-columns: 1fr; } .sc-plans { padding: 48px 0; } .sc-section-head h2 { font-size: 30px; line-height: 1.1; } .sc-plan-tag { min-height: 0; } } body.bg-gray-light > section#main-body { display: none; } .sc-btn { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .sc-btn-blue { background: var(--sc-blue); color: #fff; border: 1px solid var(--sc-blue); } .sc-btn-blue:hover { background: var(--sc-blue-dark); border-color: var(--sc-blue-dark); color: #fff; text-decoration: none; } .sc-btn-line { background: var(--sc-card); color: var(--sc-ink); border: 1px solid var(--sc-line); } .sc-btn-line:hover { border-color: var(--sc-blue); color: var(--sc-blue); text-decoration: none; } .sc-clients { padding: 32px 0 8px; background: var(--sc-page); } .sc-clients-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .sc-clients-head h2 { margin: 0; font-size: 20px; font-weight: 500; color: var(--sc-ink); } .sc-clients-head span { flex: 1; max-width: 640px; height: 1px; background: var(--sc-line); } .sc-clients-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; } .sc-clients-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; margin: 0; padding: 0; } .sc-clients-logos img { display: block; height: 32px; width: auto; max-width: 128px; object-fit: contain; } .sc-clients-contact { display: flex; align-items: center; gap: 24px; padding-left: 32px; border-left: 1px solid var(--sc-line); font-size: 14px; } .sc-clients-contact a { display: inline-flex; align-items: center; gap: 8px; color: var(--sc-ink); text-decoration: none; } .sc-clients-contact a:hover { color: var(--sc-blue); } @media (max-width: 991.98px) { .sc-clients-contact { padding-left: 0; border-left: 0; } } :root[data-bs-theme="dark"] .sc-clients-logos li { padding: 4px 10px; border-radius: 8px; background: #fff; } .sc-stories { position: relative; padding: 72px 0; color: #fff; background: linear-gradient(135deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 64px 64px, linear-gradient(257.85deg, #451ce3 6.18%, #20097d 65.39%); } .sc-stories h2 { margin: 0 0 16px; font-size: 48px; line-height: 1.1; font-weight: 500; letter-spacing: -.02em; color: #fff; } .sc-stories-lead { max-width: 640px; margin: 0 0 40px; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .8); } .sc-stories-stage { display: flex; gap: 16px; align-items: stretch; } .sc-story { display: flex; gap: 32px; height: 100%; margin: 0; padding: 40px; background: #fff; border-radius: 24px; color: var(--sc-ink); } .sc-story-logo { flex: 0 0 356px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: #f9fafb; min-height: 240px; } .sc-story-logo img { max-width: 70%; max-height: 120px; width: auto; height: auto; object-fit: contain; } .sc-story-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; } .sc-quote { width: 40px; height: 40px; margin-bottom: 12px; color: #a5b4fc; } .sc-story blockquote { margin: 0 0 24px; font-size: 24px; line-height: 1.5; font-weight: 500; color: var(--sc-ink); } @media (max-width: 1199.98px) { .sc-story { flex-direction: column; padding: 28px; } .sc-story-logo { flex-basis: auto; min-height: 140px; } .sc-story blockquote { font-size: 20px; } } @media (max-width: 991.98px) { .sc-stories { padding: 48px 0; } .sc-stories h2 { font-size: 34px; } .sc-stories-stage { flex-direction: column; } } .sc-why { padding: 72px 0 40px; background: var(--sc-page); } .sc-why-head { max-width: 760px; margin: 0 0 40px; } .sc-why-head h2 { margin: 0 0 12px; font-size: 48px; line-height: 1.1; font-weight: 500; letter-spacing: -.02em; color: var(--sc-ink); } .sc-why-head p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--sc-body); } .sc-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; } .sc-span-4 { grid-column: span 4; } .sc-span-5 { grid-column: span 5; } .sc-span-7 { grid-column: span 7; } .sc-span-12 { grid-column: span 12; } .sc-bc { padding: 32px; background: var(--sc-card); border: 1px solid var(--sc-line); border-radius: 16px; box-shadow: var(--sc-shadow-sm); overflow: hidden; } .sc-bc-tint { background: #f3f7ff; border-color: #e0e9fb; } :root[data-bs-theme="dark"] .sc-bc-tint { background: #151838; border-color: var(--sc-line); } .sc-bc h3 { margin: 0 0 12px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--sc-ink); } .sc-bc p { margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: var(--sc-body); } .sc-mini { margin-top: 24px; } .sc-mini-status { position: relative; padding: 16px 18px; border-radius: 12px; background: var(--sc-card); box-shadow: var(--sc-shadow-sm); } .sc-mini-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-muted); } .sc-bars { position: absolute; top: 14px; right: 16px; display: inline-flex; align-items: flex-end; gap: 3px; height: 20px; } .sc-bars i { width: 5px; border-radius: 2px; background: #c7d2fe; } .sc-bars i:nth-child(1) { height: 8px; } .sc-bars i:nth-child(2) { height: 13px; } .sc-bars i:nth-child(3) { height: 20px; background: var(--sc-ink); } .sc-mini-status ul { margin: 10px 0 0; padding: 0; } .sc-mini-status li { position: relative; padding-left: 16px; margin-bottom: 4px; font-size: 14px; font-weight: 600; color: var(--sc-ink); } .sc-mini-status li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: #10b981; } .sc-mini-support { text-align: center; } .sc-avatars { display: inline-flex; gap: 12px; margin: 0 0 14px; padding: 0; } .sc-avatars li { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sc-card); border: 1px solid var(--sc-line); box-shadow: var(--sc-shadow-sm); } .sc-avatars svg { width: 26px; height: 26px; } .sc-resp { display: inline-block; margin: 0 !important; padding: 10px 24px; border-radius: 8px; background: #1b1d3f; color: #fff !important; font-size: 15px !important; font-weight: 500; } .sc-resp strong { color: #22d3ee; } .sc-mini-scale { margin-top: 56px; } .sc-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .sc-seg i { height: 6px; border-radius: 3px; background: #e5e7eb; } .sc-seg i.on { background: #059669; } :root[data-bs-theme="dark"] .sc-seg i { background: rgba(255, 255, 255, .15); } :root[data-bs-theme="dark"] .sc-seg i.on { background: #10b981; } .sc-mini-scale small { display: block; margin-top: 12px; font-size: 12px; color: var(--sc-muted); } .sc-term { margin: 24px 0 0; padding: 18px 20px; border-radius: 12px; background: #04061c; color: #e5e7eb; font: 13px/1.8 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; box-shadow: 0 12px 30px -10px rgba(4, 6, 28, .5); } .sc-term b { color: #22d3ee; font-weight: 400; } .sc-term .dots { display: flex; gap: 6px; margin-bottom: 12px; } .sc-term .dots i { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; } .sc-term .dots i:nth-child(2) { background: #f59e0b; } .sc-term .dots i:nth-child(3) { background: #10b981; } .sc-bc-split { display: flex; gap: 24px; align-items: stretch; padding: 0; } .sc-bc-split .sc-bc-text { flex: 1 1 55%; padding: 32px; } .sc-bc-split img { flex: 0 0 38%; align-self: stretch; width: 38%; object-fit: cover; background: linear-gradient(160deg, #eef2ff, #dbeafe); } .sc-bc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; } .sc-bc-orbit { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center; padding: 0; background: linear-gradient(90deg, #eaf2ff 0, #f3f7ff 60%, #fff 60%); } :root[data-bs-theme="dark"] .sc-bc-orbit { background: linear-gradient(90deg, #151838 0, #151838 60%, var(--sc-card) 60%); } .sc-bc-orbit .sc-bc-text { padding: 40px 32px 40px 40px; } .sc-orbit { position: relative; min-height: 300px; } .sc-orbit-mark { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%); object-fit: cover; object-position: left center; } .sc-orbit ul { position: absolute; inset: 0; margin: 0; padding: 0; } .sc-orb { position: absolute; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sc-card); box-shadow: 0 6px 16px rgba(37, 38, 94, .18); color: var(--sc-blue); } .sc-orb svg { width: 24px; height: 24px; } .sc-orb-a { left: 14%; top: 56%; } .sc-orb-b { left: 38%; top: 12%; } .sc-orb-c { left: 62%; top: 12%; } .sc-orb-d { left: 80%; top: 56%; } .sc-orb-e { left: 30%; top: 72%; } @media (max-width: 1199.98px) { .sc-span-4 { grid-column: span 6; } .sc-span-5, .sc-span-7 { grid-column: span 12; } .sc-bento { gap: 24px; } } @media (max-width: 767.98px) { .sc-why { padding: 48px 0 24px; } .sc-why-head h2 { font-size: 34px; } .sc-span-4, .sc-span-5, .sc-span-7 { grid-column: span 12; } .sc-bc { padding: 24px; } .sc-bc-split, .sc-bc-orbit { display: block; } .sc-bc-split img { width: 100%; height: 220px; } .sc-bc-split .sc-bc-text, .sc-bc-orbit .sc-bc-text { padding: 24px; } .sc-bc-orbit { background: #f3f7ff; } .sc-orbit { min-height: 220px; } } .sc-reviews { padding: 72px 0; background: var(--sc-page); } .sc-reviews .sc-section-head h2 { font-size: 48px; } .sc-rev-score { display: inline-flex; align-items: center; gap: 12px; margin-top: 16px !important; font-size: 14px !important; line-height: 1 !important; } .sc-rev-score strong { font-size: 28px; font-weight: 600; color: var(--sc-ink); } .sc-rev-stars { display: inline-flex; gap: 2px; color: #d1d5db; } .sc-rev-stars svg { width: 16px; height: 16px; display: block; } .sc-rev-score .sc-rev-stars { color: var(--sc-star); } .sc-rev-stars i { display: inline-flex; font-style: normal; } .sc-rev-stars i.on { color: var(--sc-star); } .sc-rev-grid { column-count: 3; column-gap: 24px; } .sc-rev { display: inline-block; width: 100%; margin: 0 0 24px; padding: 24px; background: var(--sc-card); border: 1px solid var(--sc-line); border-radius: 20px; box-shadow: var(--sc-shadow-sm); break-inside: avoid; } .sc-rev-top { display: flex; align-items: center; justify-content: space-between; min-height: 24px; margin-bottom: 12px; } .sc-rev-src { padding: 2px 8px; border: 1px solid #bfdbfe; border-radius: 6px; background: #eff6ff; color: #2563eb; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .sc-rev h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--sc-ink); } .sc-rev p { margin: 0 0 20px; font-size: 14px; line-height: 1.7; color: var(--sc-body); } .sc-rev footer { display: flex; align-items: center; gap: 12px; } .sc-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #818cf8, #6366f1); color: #fff; font-size: 12px; font-weight: 600; } .sc-rev footer strong { font-size: 14px; font-weight: 600; color: var(--sc-ink); } .sc-rev footer a { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sc-muted); } .sc-rev footer a:hover { color: var(--sc-blue); } .sc-rev-more { text-align: center; } .sc-rev-more summary { display: inline-flex; align-items: center; height: 40px; padding: 0 22px; border: 1px solid var(--sc-line); border-radius: 999px; background: var(--sc-card); color: var(--sc-ink); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; box-shadow: var(--sc-shadow-sm); } .sc-rev-more summary::-webkit-details-marker { display: none; } .sc-rev-more .sc-rev-close { display: none; } .sc-rev-more .sc-rev-grid { margin-top: 24px; text-align: left; } :root[data-bs-theme="dark"] .sc-rev-src { background: rgba(59, 130, 246, .15); border-color: rgba(59, 130, 246, .35); color: #93c5fd; } @media (max-width: 1023.98px) { .sc-rev-grid { column-count: 2; } } @media (max-width: 639.98px) { .sc-rev-grid { column-count: 1; } .sc-reviews { padding: 48px 0; } .sc-reviews .sc-section-head h2 { font-size: 32px; } } .sc-orbit-mark { position: absolute; left: 50%; top: 50%; width: 38px; height: 42px; transform: translate(-50%, -50%); background: url("../stable/img/stablecluster-logo.svg") left center / auto 42px no-repeat; } :root[data-bs-theme="dark"] .sc-orbit-mark { background-image: url("../stable/img/stablecluster-logo-dark.svg"); } .sc-bc-split img { object-fit: contain; object-position: center; padding: 0; background: #f5f7ff; } .sc-pill { display: inline-flex; align-items: center; height: 40px; padding: 0 22px; border-radius: 999px; background: #fff; color: #25265e; font-size: 14px; font-weight: 600; text-decoration: none; } .sc-pill:hover { background: #eef2ff; color: #25265e; text-decoration: none; } .sc-btn-light { background: #f3f4f6; color: #111827; border: 1px solid transparent; } .sc-btn-light:hover { background: #fff; color: #111827; text-decoration: none; } .sc-btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .6); } .sc-btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; text-decoration: none; } .sc-band { position: relative; isolation: isolate; padding: 88px 0 72px; color: #fff; background: linear-gradient(to top, rgba(26, 7, 110, .95), rgba(69, 34, 201, .65) 55%, rgba(26, 7, 110, .85)), url("../stable/img/home/datacenter.webp") center / cover no-repeat, #1a066e; overflow: hidden; } .sc-band-top { display: flex; align-items: center; gap: 40px; margin-bottom: 64px; } .sc-band-logo { flex: 0 0 auto; padding: 36px 48px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 20px; background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .sc-band-logo img { display: block; height: 40px; width: auto; } .sc-band-arrow { flex: 0 0 56px; height: 1px; background: rgba(255, 255, 255, .7); position: relative; } .sc-band-arrow::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); } .sc-band-lines { margin: 0; display: flex; flex-direction: column; font-size: 52px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; } .sc-band-lines span { color: rgba(255, 255, 255, .55); } .sc-band-lines .l2 { color: #fff; } .sc-band-lines .l1, .sc-band-lines .l3 { color: rgba(255, 255, 255, .78); } .sc-stat-card { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 32px 0; border: 1px solid rgba(255, 255, 255, .22); border-radius: 24px; background: rgba(255, 255, 255, .10); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .sc-stat-card li { padding: 8px 24px; text-align: center; } .sc-stat-card li + li { border-left: 1px solid rgba(255, 255, 255, .2); } .sc-stat-card strong { display: block; font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; } .sc-stat-card span { display: block; margin-top: 6px; font-size: 14px; color: rgba(255, 255, 255, .8); } .sc-stat-card small { display: block; font-size: 12px; color: rgba(255, 255, 255, .6); } @media (max-width: 991.98px) { .sc-band { padding: 56px 0; } .sc-band-top { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 40px; } .sc-band-arrow { display: none; } .sc-band-lines { font-size: 34px; } .sc-stat-card { grid-template-columns: repeat(2, 1fr); row-gap: 16px; } .sc-stat-card li:nth-child(3) { border-left: 0; } } .sc-products { padding: 56px 0 24px; background: var(--sc-page); } .sc-prod-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; } .sc-prod-hero { grid-column: span 4; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px; border-radius: 20px; color: #fff; background: linear-gradient(257.85deg, #451ce3 6.18%, #20097d 65.39%); overflow: hidden; } .sc-prod-hero h2 { margin: 0 0 16px; font-size: 32px; line-height: 1.2; font-weight: 400; color: #fff; } .sc-prod-hero p { margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .88); } .sc-prod-hero img { flex: 0 0 160px; width: 160px; height: auto; } .sc-prod { grid-column: span 2; display: flex; flex-direction: column; padding: 24px; background: var(--sc-card); border: 1px solid var(--sc-line); border-radius: 20px; box-shadow: var(--sc-shadow-sm); } .sc-prod-first { grid-column: span 2; } .sc-prod-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px; background: #eef2ff; } :root[data-bs-theme="dark"] .sc-prod-ico { background: rgba(255, 255, 255, .1); } .sc-prod h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; color: var(--sc-ink); } .sc-prod p { margin: 0 0 20px; font-size: 16px; line-height: 1.6; color: var(--sc-muted); flex: 1; } .sc-prod-link { display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border: 1px solid var(--sc-line); border-radius: 999px; background: var(--sc-card); color: var(--sc-ink); font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: var(--sc-shadow-sm); transition: border-color .15s ease, color .15s ease; } .sc-prod-link:hover { border-color: var(--sc-blue); color: var(--sc-blue); text-decoration: none; } @media (max-width: 1199.98px) { .sc-prod-hero { grid-column: span 6; } .sc-prod { grid-column: span 3; } } @media (max-width: 639.98px) { .sc-prod { grid-column: span 6; } .sc-prod-hero { flex-direction: column; align-items: flex-start; } .sc-prod-hero h2 { font-size: 26px; } } .sc-support { padding: 32px 0 56px; background: var(--sc-page); } .sc-support-card { padding: 48px; border-radius: 12px; color: #fff; background: var(--sc-gradient-support); } .sc-support-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 40px; } .sc-support-head h2 { margin: 0 0 14px; font-size: 48px; line-height: 1.1; font-weight: 500; letter-spacing: -.02em; color: #fff; } .sc-support-head p { max-width: 680px; margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .85); } .sc-support-chat { display: inline-flex; align-items: center; height: 48px; padding: 0 20px; border-radius: 8px; background: #6d3be0; color: #fff; font-size: 16px; text-decoration: none; } .sc-support-chat:hover { background: #7c4cf0; color: #fff; text-decoration: none; } .sc-support-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } .sc-support-ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; color: #25265e; } .sc-support-ico svg { width: 16px; height: 16px; } .sc-support-num { display: block; margin: 12px 0 6px; font-size: 48px; line-height: 1.1; font-weight: 700; } .sc-support-label { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, .25); font-size: 16px; font-weight: 500; } .sc-support-label i { width: 8px; height: 8px; border-radius: 50%; background: #34d399; } .sc-support-label small { font-size: 14px; font-weight: 400; color: rgba(255, 255, 255, .7); } .sc-support-col ul { margin: 0; padding: 0; } .sc-support-col li { margin-bottom: 4px; font-size: 14px; color: rgba(255, 255, 255, .8); } .sc-support-col li b { color: #fff; font-weight: 600; } .sc-support-foot { margin: 32px 0 0; font-size: 14px; color: rgba(255, 255, 255, .7); } .sc-support-foot a { color: #fff; margin-left: 8px; } @media (max-width: 991.98px) { .sc-support-card { padding: 28px; } .sc-support-head h2 { font-size: 32px; } .sc-support-grid { grid-template-columns: 1fr; gap: 28px; } .sc-support-num { font-size: 40px; } } .sc-faq { padding: 40px 0 72px; background: var(--sc-page); } .sc-faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 64px; align-items: start; } .sc-faq-list h2 { margin: 0 0 24px; font-size: 48px; line-height: 1.1; font-weight: 500; letter-spacing: -.02em; color: var(--sc-ink); } .sc-faq-item { padding: 16px 0; border-bottom: 1px solid var(--sc-line); } .sc-faq-item summary { position: relative; padding-right: 32px; cursor: pointer; font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--sc-ink); list-style: none; } .sc-faq-item summary::-webkit-details-marker { display: none; } .sc-faq-item summary::after { content: ""; position: absolute; right: 4px; top: 8px; width: 8px; height: 8px; border-right: 1.5px solid var(--sc-muted); border-bottom: 1.5px solid var(--sc-muted); transform: rotate(45deg); transition: transform .2s ease; } .sc-faq-item[open] summary::after { transform: rotate(225deg); } .sc-faq-item p { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--sc-body); } .sc-faq-card { position: sticky; top: 112px; overflow: hidden; border-radius: 8px; background: #20097d; color: #fff; } .sc-faq-card img { display: block; width: 100%; height: 300px; object-fit: cover; object-position: top; opacity: .75; } .sc-faq-card .sc-btn { height: 36px; padding: 0 16px; border-radius: 6px; } @media (max-width: 1023.98px) { .sc-faq-grid { grid-template-columns: 1fr; gap: 32px; } .sc-faq-card { position: static; max-width: 420px; } .sc-faq-list h2 { font-size: 34px; } } .sc-steps { padding: 56px 0 72px; background: var(--sc-page); border-bottom: 1px solid var(--sc-line); } .sc-steps-row { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 24px 0 0; padding: 0; text-align: center; } .sc-steps-row::before { content: ""; position: absolute; left: 22%; right: 22%; top: 60px; height: 70px; border-top: 2px dashed rgba(37, 38, 94, .35); border-radius: 50% 50% 0 0 / 100% 100% 0 0; transform: translateY(-20px); } .sc-steps-row li { position: relative; } .sc-step-ico { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 112px; height: 112px; border-radius: 50%; background: #3a17c4; color: #fff; box-shadow: 0 0 0 6px var(--sc-page); } .sc-step-ico svg { width: 48px; height: 48px; } .sc-step-ico b { position: absolute; top: 4px; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #4f46e5; font-size: 12px; font-weight: 700; box-shadow: 0 0 0 3px var(--sc-page); } .sc-steps-row h3 { margin: 16px 0 6px; font-size: 18px; font-weight: 600; color: var(--sc-ink); } .sc-steps-row p { margin: 0 auto; max-width: 180px; font-size: 14px; color: var(--sc-muted); } @media (max-width: 767.98px) { .sc-steps-row { grid-template-columns: 1fr; } .sc-steps-row::before { display: none; } } @media (min-width: 1200px) { :root[data-bs-theme="dark"] .sc-header .main-navbar-wrapper #nav > li > a:hover::before, :root[data-bs-theme="dark"] .sc-header .main-navbar-wrapper #nav > li.show > a::before { background: rgba(255, 255, 255, .08); } :root[data-bs-theme="dark"] .sc-header .main-navbar-wrapper #nav .dropdown-menu, :root[data-bs-theme="dark"] .sc-header .sc-toolbar-wrap .sc-secondary-list .dropdown-menu { border: 1px solid var(--sc-line) !important; background: var(--sc-card); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .6); } :root[data-bs-theme="dark"] .sc-header #nav .dropdown-menu li.dropdown-item > a, :root[data-bs-theme="dark"] .sc-header .sc-secondary-list .dropdown-menu li.dropdown-item > a { color: var(--sc-ink) !important; } :root[data-bs-theme="dark"] .sc-header #nav .dropdown-menu li.dropdown-item > a:hover, :root[data-bs-theme="dark"] .sc-header .sc-secondary-list .dropdown-menu li.dropdown-item > a:hover { color: #93c5fd !important; background: rgba(59, 130, 246, .14); } } .primary-content .card, .primary-content .panel, .sidebar .card-sidebar, .sidebar .panel, .tiles .tile, .client-home-cards .card, .card, .card.d-block.d-md-none, .primary-content .dataTables_wrapper table.table-list, .sc-contact-form, .client-home-cards .card-accent-red { border-radius: 12px; } .primary-content .card > .card-header:first-child, .client-home-cards .card > .card-header:first-child, .sidebar .card-sidebar > .card-header:first-child { border-top-left-radius: 11px; border-top-right-radius: 11px; } .primary-content .card, .primary-content .panel, .sidebar .card-sidebar, .client-home-cards .card, .tiles .tile { box-shadow: var(--sc-shadow-sm); border-color: var(--sc-line); } :root[data-bs-theme="dark"] .primary-content .card, :root[data-bs-theme="dark"] .primary-content .panel, :root[data-bs-theme="dark"] .sidebar .card-sidebar, :root[data-bs-theme="dark"] .client-home-cards .card, :root[data-bs-theme="dark"] .tiles .tile { box-shadow: none; border-color: var(--sc-line); } .primary-content h2, .primary-content h3, .primary-content h4, .primary-content h5, .primary-content h6, .card-title, .client-home-cards .card-header h3, .sidebar .card-title, .sidebar .card-header h3, .card-header .card-title, .panel-title, .card h3 { font-weight: 600; letter-spacing: -.01em; } .primary-content h2 { font-weight: 500; } .dataTables_wrapper table.table-list thead th, .primary-content table thead th { font-weight: 600; letter-spacing: .06em; } .primary-content .form-control, .primary-content select.form-control, .primary-content .custom-select, .modal .form-control, .dataTables_filter input, .dataTables_length select, .sc-contact-form .form-control { border-radius: 8px; } .primary-content .btn, .modal .btn, .sidebar .btn, .primary-content .btn-default, .primary-content .btn-primary, .primary-content .btn-success, .primary-content .btn-danger { border-radius: 8px; font-weight: 600; } .primary-content .btn-sm, .modal .btn-sm { border-radius: 8px; } .primary-content .input-group > .form-control:not(:last-child), .primary-content .input-group > .form-control:not(:first-child) { border-radius: 8px; } .primary-content .input-group > .form-control:not(:last-child):not(:only-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .primary-content .input-group > .form-control:not(:first-child):not(:only-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .alert { border-radius: 8px; } .modal-content, .dropdown-menu { border-radius: 12px; } .tiles .tile .stat { font-weight: 600; } .sc-page-header .sc-breadcrumb { font-weight: 500; } .client-home-cards .card, .client-home-cards .card-accent-red, .client-home-cards .card-accent-blue { border-radius: 12px !important; } .client-home-cards .card-header h3, .client-home-cards .card-header h3.card-title, .client-home-cards .card-title, .sidebar .card-header h3, .sidebar .card-title { font-weight: 600 !important; } .primary-content h1, .primary-content h2, .primary-content h3, .primary-content h4, .primary-content h5, .primary-content h6 { font-weight: 600 !important; } .primary-content h2 { font-weight: 500 !important; } .primary-content .btn-default, .primary-content a.btn-default, .primary-content button.btn-default, .sidebar .btn-default, .sidebar .btn, .modal .btn-default { border-radius: 8px !important; } .primary-content .btn, .primary-content button[type="submit"], .primary-content input[type="submit"], .modal .btn { border-radius: 8px !important; font-weight: 600 !important; } .dataTables_filter input, .dataTables_filter input.form-control, .dataTables_length select, .dataTables_length select.form-control { border-radius: 8px !important; } .primary-content textarea, .primary-content textarea.form-control { border-radius: 8px !important; } :root[data-bs-theme="dark"] .dataTables_wrapper .dataTables_filter input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a4a7d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 14px center; background-size: 18px; background-color: #0b0c1f; } .ph-login-panel, :root[data-bs-theme="dark"] .ph-login-panel { background: linear-gradient(135deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(258.38deg, #532be9 24.08%, #1b076e 91.93%); } :root[data-bs-theme="dark"] .ph-login-panel { background: linear-gradient(135deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(258.38deg, #3d22b0 24.08%, #14064f 91.93%); } .ph-login-panel h2, :root[data-bs-theme="dark"] .ph-login-panel h2 { color: #fff; font-weight: 500; } .ph-login-panel li, .ph-login-panel-inner li span { color: rgba(255, 255, 255, .92); } .ph-login-panel-inner li { color: rgba(255, 255, 255, .92); } .ph-login-panel .ph-login-point-icon, .ph-login-panel .ph-login-point-icon i { color: var(--sc-blue) !important; } .ph-login-panel .ph-login-point-icon { background: #fff; } .ph-login-logo .sc-logo-dark { display: none !important; } :root[data-bs-theme="dark"] .ph-login-logo .sc-logo-light { display: none !important; } :root[data-bs-theme="dark"] .ph-login-logo .sc-logo-dark { display: block !important; } .invoice-container { border-radius: 12px; box-shadow: var(--sc-shadow-sm); } .invoice-container .payment-wrapper { border-radius: 12px; border-color: var(--sc-line); } .invoice-container .invoice-number { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; } .invoice-container .copy-ref { border-color: var(--sc-blue); color: var(--sc-blue); border-radius: 8px; } .invoice-container .copy-ref:hover, .invoice-container .copy-ref:focus-visible { background: var(--sc-blue); color: #fff; } .invoice-container .whatsapp-btn { border-radius: 8px; } .invoice-container .payment-amount strong { color: var(--sc-ink); } .invoice-container .payment-head { background: #f3f6ff; } .invoice-container h3 { font-weight: 600; } .verification-banner .btn { height: 40px; min-height: 40px; border: 1px solid var(--sc-blue); border-radius: 8px; font-weight: 600; } :root[data-bs-theme="dark"] .sc-btn-blue, :root[data-bs-theme="dark"] .sc-search-btn, :root[data-bs-theme="dark"] .sc-header .sc-toolbar-wrap a.btn-sm.sc-btn-register, :root[data-bs-theme="dark"] .sc-plan.is-popular .sc-plan-cta, :root[data-bs-theme="dark"] .sc-plan-cta:hover, :root[data-bs-theme="dark"] .btn-primary, :root[data-bs-theme="dark"] .sc-cta-primary, :root[data-bs-theme="dark"] .sc-plan-flag { background: #2563eb; border-color: #2563eb; color: #fff; } :root[data-bs-theme="dark"] .sc-btn-blue:hover, :root[data-bs-theme="dark"] .sc-search-btn:hover, :root[data-bs-theme="dark"] .btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; } .sc-plan.is-popular .sc-plan-flag { background: #2563eb; } .sc-story, .sc-story blockquote { color: #25265e; } .ph-login-note, .ph-login-note a { color: rgba(37, 38, 94, .75); } :root[data-bs-theme="dark"] .ph-login-note, :root[data-bs-theme="dark"] .ph-login-note a { color: rgba(232, 233, 255, .75); } @media (max-width: 1023.98px) { .sc-hero-in { grid-template-columns: minmax(0, 1fr); } .sc-hero-copy { min-width: 0; } } @media (max-width: 359.98px) { .sc-hero h1 { font-size: 30px; } .sc-search-btn { padding: 0 14px; } .sc-search input { padding: 0 10px; } } .sc-stories-stage { display: flex; gap: 16px; align-items: stretch; height: 420px; } .sc-story { position: relative; display: block; flex: 0 0 126px; min-width: 0; height: 100%; margin: 0; padding: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .18); border-radius: 24px; background: rgba(255, 255, 255, .10); color: #fff; cursor: pointer; transition: flex-basis .45s cubic-bezier(.22, 1, .36, 1), background-color .3s ease; } .sc-story.is-active { flex: 1 1 auto; background: #fff; border-color: #fff; cursor: default; color: #25265e; } .sc-story:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } .sc-story-mini { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 24px 12px; opacity: 1; transition: opacity .2s ease; } .sc-story.is-active .sc-story-mini { opacity: 0; pointer-events: none; } .sc-story-mini img { max-width: 92px; max-height: 32px; width: auto; height: auto; filter: brightness(0) invert(1); opacity: .9; } .sc-story-vname { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; gap: 10px; font-size: 18px; white-space: nowrap; } .sc-story-vname strong { font-weight: 600; color: #fff; } .sc-story-vname em { font-style: normal; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .65); } .sc-story-full { display: flex; gap: 32px; height: 100%; padding: 40px; opacity: 0; visibility: hidden; transition: opacity .3s ease .1s; } .sc-story.is-active .sc-story-full { opacity: 1; visibility: visible; } .sc-story-full .sc-story-logo { flex: 0 0 356px; min-height: 0; } .sc-story-full .sc-story-body { align-items: flex-start; } .sc-story-full .sc-quote { align-self: center; } .sc-story-by { margin: 0; } .sc-story-by strong { display: block; font-size: 16px; font-weight: 600; color: #25265e; } .sc-story-by span { font-size: 14px; color: rgba(37, 38, 94, .68); } .sc-story blockquote { font-size: 20px; line-height: 1.6; } @media (max-width: 991.98px) { .sc-stories-stage { flex-direction: column; height: auto; } .sc-story { flex: 0 0 auto; height: auto; min-height: 76px; } .sc-story-mini { position: static; flex-direction: row; justify-content: space-between; padding: 18px 20px; } .sc-story-vname { writing-mode: horizontal-tb; transform: none; } .sc-story-mini img { order: 2; } .sc-story-full { display: none; padding: 24px; flex-direction: column; gap: 20px; } .sc-story.is-active .sc-story-full { display: flex; } .sc-story.is-active .sc-story-mini { display: none; } .sc-story-full .sc-story-logo { flex-basis: auto; min-height: 120px; } } @media (prefers-reduced-motion: reduce) { .sc-story, .sc-story-mini, .sc-story-full { transition: none; } } .sc-foot-top { grid-template-columns: 510px minmax(0, 1fr); gap: 40px; } .sc-legal { padding: 24px; } .sc-legal-head h2 { font-size: 20px; font-weight: 700; } .sc-legal-grid h3 { font-size: 16px; font-weight: 700; } .sc-legal-grid dt { font-size: 11px; font-weight: 600; letter-spacing: .08em; } .sc-legal-grid dd { font-size: 14px; font-weight: 600; } .sc-pay h2 { font-size: 15px; font-weight: 700; } .sc-pay p { font-size: 14px; } .sc-foot-links { gap: 24px; } .sc-foot-col h2 { margin-bottom: 20px; font-size: 12px; font-weight: 600; letter-spacing: .1em; color: rgba(37, 38, 94, .62); } .sc-foot-col li { margin-bottom: 12px; line-height: 1.55; } .sc-foot-col a { font-size: 15px; font-weight: 500; color: rgba(37, 38, 94, .78); } .sc-foot-col a:hover { color: var(--sc-blue); } :root[data-bs-theme="dark"] .sc-foot-col a { color: rgba(232, 233, 255, .78); } :root[data-bs-theme="dark"] .sc-foot-col h2 { color: rgba(232, 233, 255, .6); } .sc-foot-bottom, .sc-foot-bottom a { font-size: 14px; font-weight: 500; } @media (max-width: 1199.98px) { .sc-foot-top { grid-template-columns: 1fr; } } .sc-legal-grid dd { font-weight: 500; } .sc-legal-grid h3, .sc-legal-head h2 { font-weight: 600; } .sc-pay h2 { font-weight: 600; } .sc-clients-contact a { white-space: nowrap; font-size: 14px; } .sc-clients-contact svg { flex: 0 0 18px; width: 18px; height: 18px; } .sc-clients-row { flex-wrap: nowrap; } @media (max-width: 1199.98px) { .sc-clients-row { flex-wrap: wrap; } .sc-clients-logos { gap: 16px 28px; } } .sc-clients-head span { max-width: none; } .sc-clients-row { justify-content: space-between; } .sc-clients-logos { flex: 1 1 auto; justify-content: space-between; gap: 16px 32px; max-width: 760px; } .sc-search-form .sc-tlds { margin: 20px 0 0; } .sc-search-form .domainchecker-homepage-captcha { margin-top: 20px; } @media (max-width: 1199.98px) { .sc-clients-logos { max-width: none; justify-content: flex-start; gap: 16px 28px; } } .sc-search-form { max-width: none; } .sc-search-form .sc-search { max-width: 576px; } .sc-search-form .sc-tlds { flex-wrap: wrap; gap: 8px; max-width: 700px; } .sc-search-form .sc-tlds li { padding: 5px 10px; } .sc-search-form .domainchecker-homepage-captcha { max-width: 576px; } .sc-story { flex: 0 0 126px; transition: flex-grow .9s cubic-bezier(.65, 0, .35, 1), background-color .7s ease, border-color .7s ease; flex-grow: 0; } .sc-story.is-active { flex: 1 1 126px; flex-grow: 1; } .sc-story-mini { transition: opacity .35s ease .15s; } .sc-story.is-active .sc-story-mini { transition: opacity .25s ease; } .sc-story-full { min-width: 760px; transition: opacity .5s ease 0s, visibility 0s linear .5s; } .sc-story.is-active .sc-story-full { transition: opacity .6s ease .45s, visibility 0s linear 0s; } @media (max-width: 991.98px) { .sc-story-full { min-width: 0; } .sc-story { transition: background-color .5s ease; } } @media (prefers-reduced-motion: reduce) { .sc-story, .sc-story-mini, .sc-story-full, .sc-story.is-active .sc-story-full { transition: none; } } .sc-faq { padding: 56px 0 72px; } .sc-faq-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; align-items: start; } .sc-faq-list h2 { margin: 0 0 8px; font-size: 44px; } .sc-faq-lead { margin: 0 0 28px; font-size: 16px; color: var(--sc-body); } .sc-faq-item { margin: 0 0 12px; padding: 0; border: 1px solid var(--sc-line); border-radius: 12px; background: var(--sc-card); box-shadow: var(--sc-shadow-sm); transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease; } .sc-faq-item:hover { border-color: #bfdbfe; } .sc-faq-item[open] { border-color: #93c5fd; background: var(--sc-card); box-shadow: 0 8px 24px -12px rgba(37, 99, 235, .25); } :root[data-bs-theme="dark"] .sc-faq-item:hover, :root[data-bs-theme="dark"] .sc-faq-item[open] { border-color: rgba(96, 165, 250, .5); } .sc-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--sc-ink); } .sc-faq-item summary::after { position: static; flex: 0 0 32px; width: 32px; height: 32px; margin: 0; border: 1px solid var(--sc-line); border-radius: 50%; background: #f3f6ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat; transform: none; transition: transform .3s ease, background-color .2s ease; content: ""; } .sc-faq-item[open] summary::after { transform: rotate(180deg); background-color: #dbeafe; } :root[data-bs-theme="dark"] .sc-faq-item summary::after { background-color: rgba(255, 255, 255, .08); } .sc-faq-item summary:focus-visible { outline: 2px solid var(--sc-blue); outline-offset: -2px; border-radius: 12px; } .sc-faq-item p { margin: 0; padding: 0 20px 20px; font-size: 15px; line-height: 1.75; color: var(--sc-body); animation: scFaqIn .35s ease; } .sc-faq-card { position: sticky; top: 112px; padding: 32px 28px; border-radius: 16px; text-align: center; color: #fff; background: radial-gradient(circle at 80% 0%, rgba(129, 140, 248, .35), transparent 55%), linear-gradient(257.85deg, #451ce3 6.18%, #20097d 65.39%); box-shadow: 0 20px 40px -16px rgba(32, 9, 125, .55); } .sc-faq-card img { display: block; width: 132px; height: 132px; margin: 0 auto 20px; padding: 0; border: 4px solid rgba(255, 255, 255, .85); border-radius: 50%; object-fit: cover; object-position: center 20%; opacity: 1; } .sc-faq-card h3 { margin: 0 0 6px; font-size: 24px; font-weight: 600; color: #fff; } .sc-faq-card p { margin: 0 0 24px; font-size: 16px; color: rgba(255, 255, 255, .85); } .sc-faq-card-actions { display: flex; flex-direction: column; gap: 10px; } .sc-faq-card .sc-btn { width: 100%; height: 44px; border-radius: 8px; } @media (max-width: 1023.98px) { .sc-faq-grid { grid-template-columns: 1fr; gap: 32px; } .sc-faq-card { position: static; max-width: none; } .sc-faq-list h2 { font-size: 32px; } } @media (prefers-reduced-motion: reduce) { .sc-faq-item p { animation: none; } } @media (min-width: 1536px) { .container { padding-inline: 128px; } } @media (min-width: 1920px) { .container { padding-inline: 160px; } } .sc-foot-top { grid-template-columns: minmax(0, 33fr) minmax(0, 47fr); gap: 40px; } .sc-foot-links { gap: 40px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .sc-footer { padding-top: 64px; } .sc-legal-head h2, .sc-legal-grid h3, .sc-pay h2 { line-height: 1.5; } .sc-legal-head { margin-bottom: 24px; } .sc-legal-grid h3 { margin-bottom: 14px; } .sc-legal-grid dt { margin-top: 14px; font-size: 12px; line-height: 1.35; color: rgba(37, 38, 94, .45); } .sc-legal-grid dd { margin-top: 3px; line-height: 1.6; color: rgba(37, 38, 94, .8); } .sc-legal-grid dd a { color: inherit; } .sc-pay { margin-top: 32px; padding: 0; } .sc-pay h2 { font-size: 16px; } .sc-pay p { color: rgba(37, 38, 94, .55); } .sc-foot-col h2 { color: rgba(37, 38, 94, .45); line-height: 1.35; } .sc-foot-col a { font-size: 16px; font-weight: 500; color: rgba(37, 38, 94, .7); } .sc-foot-products { font-weight: 500; color: rgba(37, 38, 94, .6); } .sc-foot-bottom { color: rgba(37, 38, 94, .55); } .sc-foot-bottom a { color: rgba(37, 38, 94, .6); } :root[data-bs-theme="dark"] .sc-legal-grid dt, :root[data-bs-theme="dark"] .sc-foot-col h2 { color: rgba(232, 233, 255, .55); } :root[data-bs-theme="dark"] .sc-legal-grid dd, :root[data-bs-theme="dark"] .sc-foot-col a { color: rgba(232, 233, 255, .8); } :root[data-bs-theme="dark"] .sc-pay p, :root[data-bs-theme="dark"] .sc-foot-bottom, :root[data-bs-theme="dark"] .sc-foot-bottom a, :root[data-bs-theme="dark"] .sc-foot-products { color: rgba(232, 233, 255, .6); } @media (max-width: 1199.98px) { .sc-foot-top { grid-template-columns: minmax(0, 1fr); } .sc-foot-links { gap: 24px; } } @media (max-width: 767.98px) { .sc-foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 479.98px) { .sc-foot-links { grid-template-columns: 1fr; } } .sc-legal-grid h3 { margin-bottom: 16px; } .sc-legal-grid dt { margin-top: 17px; } .sc-foot-col h2 { margin-bottom: 16px; } .sc-foot-col li { margin-bottom: 4px; line-height: 32px; } .sc-foot-col a { display: inline-block; line-height: 1.55; vertical-align: middle; } @media (min-width: 768px) { .sc-foot-bottom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; } .sc-foot-bottom p:nth-child(2) { text-align: center; } .sc-foot-bottom p:nth-child(3) { text-align: right; } } .sc-foot-brand { margin-top: 52px; padding-bottom: 20px; } .sc-footer { padding-bottom: 42px; } .sc-legal-grid { grid-template-columns: minmax(0, 1.11fr) minmax(0, 1fr); } .sc-legal-grid > div + div { margin-left: 0; padding-left: 24px; border-left: 1px solid var(--sc-line); } .sc-legal-grid dt { letter-spacing: .05em; margin-top: 16px; white-space: nowrap; } .sc-legal-grid h3 { margin-bottom: 15px; } @media (max-width: 767.98px) { .sc-legal-grid { grid-template-columns: 1fr; } .sc-legal-grid > div + div { padding-left: 0; border-left: 0; } .sc-legal-grid dt { white-space: normal; } } .sc-legal-grid dd { margin-bottom: 1px; } @media (min-width: 1700px) { .sc-legal-grid { grid-template-columns: minmax(0, 1.27fr) minmax(0, 1fr); } } .sc-legal-grid dt { margin-top: 17px; } .sc-legal-grid > div > dl > dt:first-child { margin-top: 16px; } @media (min-width: 1700px) { .sc-legal-grid { grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr); } } @media (max-width: 767.98px) { .sc-plan-grid, #order-standard_cart .sc-cart-plans { display: flex; flex-wrap: nowrap; gap: 14px; margin-inline: -16px; padding: 4px 16px 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; touch-action: pan-x pan-y; align-items: stretch; } .sc-plan-grid::-webkit-scrollbar, #order-standard_cart .sc-cart-plans::-webkit-scrollbar { display: none; } .sc-plan-grid > .sc-plan, #order-standard_cart .sc-cart-plans .sc-plan { flex: 0 0 82%; max-width: 340px; scroll-snap-align: center; user-select: none; -webkit-user-select: none; } #order-standard_cart .sc-cart-plans > [class*="col-"] { flex: 0 0 82%; max-width: 340px; scroll-snap-align: center; } #order-standard_cart .sc-cart-plans > [class*="col-"] .sc-plan { width: 100%; } } .sc-dots { display: none; justify-content: center; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; } @media (max-width: 767.98px) { .sc-dots { display: flex; } } .sc-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #c7d2fe; transition: width .25s ease, background-color .25s ease; } .sc-dots button[aria-current="true"] { width: 24px; border-radius: 4px; background: var(--sc-blue); } :root[data-bs-theme="dark"] .sc-dots button { background: rgba(255, 255, 255, .25); } .sc-dash-banner { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; padding: 14px 18px; border: 1px solid #c7d2fe; border-radius: 12px; background: linear-gradient(90deg, #eef2ff 0%, #e0e7ff 55%, #ddd6fe 100%); color: var(--sc-ink); } .sc-dash-banner.is-overdue { border-color: #fecaca; background: linear-gradient(90deg, #fef2f2 0%, #fee2e2 60%, #fde8e8 100%); } .sc-dash-banner-ico { display: inline-flex; flex: 0 0 28px; width: 28px; height: 28px; align-items: center; justify-content: center; color: #4f46e5; } .sc-dash-banner.is-overdue .sc-dash-banner-ico { color: #dc2626; } .sc-dash-banner-ico svg { width: 22px; height: 22px; } .sc-dash-banner p { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 15px; line-height: 1.5; } .sc-dash-banner p span { color: rgba(37, 38, 94, .72); } .sc-dash-banner-cta { flex: 0 0 auto; display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 8px; background: var(--sc-blue); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; } .sc-dash-banner.is-overdue .sc-dash-banner-cta { background: #dc2626; } .sc-dash-banner-cta:hover { color: #fff; text-decoration: none; filter: brightness(.92); } :root[data-bs-theme="dark"] .sc-dash-banner { border-color: rgba(129, 140, 248, .35); background: linear-gradient(90deg, rgba(79, 70, 229, .22), rgba(124, 58, 237, .16)); color: var(--sc-ink); } :root[data-bs-theme="dark"] .sc-dash-banner.is-overdue { border-color: rgba(248, 113, 113, .4); background: linear-gradient(90deg, rgba(220, 38, 38, .2), rgba(220, 38, 38, .1)); } :root[data-bs-theme="dark"] .sc-dash-banner p span { color: rgba(232, 233, 255, .72); } @media (max-width: 767.98px) { .sc-dash-banner { flex-wrap: wrap; } .sc-dash-banner-cta { width: 100%; justify-content: center; } } .tiles .tile { position: relative; display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 112px; padding: 18px 20px; border-radius: 12px; } .tiles .tile > i { position: static; flex: 0 0 36px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; font-size: 16px; } .tiles .tile .title { order: 1; font-size: 14px; font-weight: 500; color: var(--sc-body); } .tiles .tile .stat { order: 2; margin: 2px 0; font-size: 32px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; color: var(--sc-ink); } .tiles .tile .sub { order: 3; font-size: 13px; font-weight: 500; color: var(--sc-muted); } .tiles .tile .sub.is-warn { color: #b45309; } .tiles .tile .sub.is-bad { color: #b91c1c; } :root[data-bs-theme="dark"] .tiles .tile .sub.is-ok { color: #86efac; } :root[data-bs-theme="dark"] .tiles .tile .sub.is-warn { color: #fcd34d; } :root[data-bs-theme="dark"] .tiles .tile .sub.is-bad { color: #fca5a5; } .tiles .tile:hover { border-color: #bfdbfe; box-shadow: 0 10px 24px -14px rgba(37, 99, 235, .35); transform: translateY(-2px); } .tiles .tile { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } @media (prefers-reduced-motion: reduce) { .tiles .tile { transition: none; } .tiles .tile:hover { transform: none; } } .client-home-cards .card { border-radius: 12px; overflow: hidden; margin-bottom: 20px; } .client-home-cards .card-header { padding: 14px 20px; background: #f6f8ff; border-bottom: 1px solid var(--sc-line); } :root[data-bs-theme="dark"] .client-home-cards .card-header { background: rgba(255, 255, 255, .04); } .client-home-cards .card-header h3 { font-size: 15px; font-weight: 600; } .client-home-cards .list-group-item { padding: 14px 20px; border-color: var(--sc-line); } .client-home-cards .list-group-item:hover { background: #f6f8ff; } :root[data-bs-theme="dark"] .client-home-cards .list-group-item:hover { background: rgba(255, 255, 255, .05); } .client-home-cards .card-body { padding: 18px 20px; } .client-home-cards .card-footer { padding: 12px 20px; background: transparent; border-top: 1px solid var(--sc-line); } .ph-login.sc-login-minimal { --login-ink: #172033; --login-muted: #64748b; --login-line: #e2e8f0; display: block; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .sc-login-minimal .ph-login-main { min-height: 100vh; min-height: 100dvh; padding: 40px 24px 24px; } .sc-login-minimal .ph-login-logo { align-self: center; } .sc-login-minimal .ph-login-logo img { height: 32px; } .sc-login-minimal .ph-login-center { max-width: 380px; margin: auto; padding: 56px 0; } .sc-login-minimal .ph-login-head { margin-bottom: 32px; text-align: left; } .sc-login-minimal .ph-login-head h1 { color: var(--login-ink); font-size: 28px; font-weight: 650; letter-spacing: -.035em; } .sc-login-minimal .ph-login-head p { color: var(--login-muted); font-size: 14px; line-height: 1.6; } .sc-login-minimal .form-control-label { color: var(--login-ink); font-size: 13px; font-weight: 500; } .sc-login-minimal .input-group { min-height: 46px; border-color: var(--login-line); border-radius: 7px; } .sc-login-minimal .input-group .form-control { height: 44px; min-width: 0; color: var(--login-ink); font-size: 16px; border-radius: 7px; } .sc-login-minimal .input-group:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .1); } .sc-login-minimal .btn-reveal-pw { min-width: 44px; min-height: 44px; color: var(--login-muted); font-size: 16px; } .sc-login-minimal .ph-forgot { color: var(--login-muted); font-size: 12px; font-weight: 400; } .sc-login-minimal .ph-forgot:hover { color: #2563eb; } .sc-login-minimal .ph-remember { margin: 0 0 20px; min-height: 32px; font-size: 13px; color: var(--login-muted); } .sc-login-minimal .ph-remember input { width: 16px; height: 16px; accent-color: #2563eb; } .sc-login-minimal .ph-login-btn { min-height: 46px; border-radius: 7px !important; background: #2563eb; border-color: #2563eb; color: #fff; font-size: 14px; letter-spacing: 0; text-transform: none; box-shadow: none; } .sc-login-minimal .ph-login-btn:hover { background: #1d4ed8; border-color: #1d4ed8; transform: none; box-shadow: none; } .sc-login-minimal .ph-login-links { flex-direction: column; align-items: center; gap: 20px; padding-top: 24px; border-top: 1px solid var(--login-line); color: var(--login-muted); font-size: 13px; text-align: center; } .sc-login-minimal .ph-login-links a { color: #2563eb; font-weight: 500; } .sc-login-minimal .ph-login-lang { min-height: 44px; color: var(--login-muted); font-size: 12px; } .sc-login-minimal .ph-login-note { color: var(--login-muted); font-size: 12px; max-width: 380px; } .sc-login-minimal :is(a, button, input[type="checkbox"]):focus-visible { outline: 2px solid #2563eb; outline-offset: 4px; } :root[data-bs-theme="dark"] .sc-login-minimal { --login-ink: #f1f5f9; --login-muted: #94a3b8; --login-line: #334155; } :root[data-bs-theme="dark"] .ph-login.sc-login-minimal, :root[data-bs-theme="dark"] .sc-login-minimal .ph-login-main { background: #0f172a !important; } :root[data-bs-theme="dark"] .sc-login-minimal .input-group { background: #182234; border-color: var(--login-line); } :root[data-bs-theme="dark"] .sc-login-minimal .ph-login-links a { color: #93c5fd; } @media (max-width: 575.98px) { .sc-login-minimal .ph-login-main { padding: 28px 24px 20px; } .sc-login-minimal .ph-login-center { padding: 40px 0; } .sc-login-minimal .ph-login-head h1 { font-size: 26px; } } .ph-login.sc-login-split { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 0; padding: 24px; min-height: 100vh; min-height: 100dvh; } .sc-login-split .sc-login-story { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; padding: 36px 40px 48px; background: var(--sc-gradient-band); border-radius: 10px; overflow: hidden; color: #fff; } .sc-login-brand { display: inline-flex; align-self: flex-start; } .sc-login-brand img { width: 200px; height: auto; filter: brightness(0) invert(1); } .sc-login-split .ph-login-main { min-height: calc(100vh - 48px); min-height: calc(100dvh - 48px); padding: 36px 48px 8px; } .sc-login-split .ph-login-main > .ph-login-logo { display: none; } .sc-login-split .ph-login-center { max-width: 420px; padding: 56px 0; } .sc-login-split .ph-login-head { text-align: center; margin-bottom: 36px; } .sc-login-split .ph-login-head h1 { font-size: clamp(26px, 2.2vw, 34px); } .sc-login-split .input-group { min-height: 52px; border-radius: 8px; } .sc-login-split .input-group .form-control { height: 50px; padding-inline: 16px; } .sc-login-split .ph-login-btn { min-height: 52px; background: var(--sc-blue); border-color: var(--sc-blue); } .sc-login-split .ph-login-links { border: 0; padding-top: 4px; } .sc-login-split .ph-login-note { max-width: 440px; } .sc-login-art { position: relative; width: 100%; max-width: 430px; margin: 64px auto 48px; padding: 0 18px 26px 0; } .sc-login-console { padding: 24px; border: 1px solid rgba(255,255,255,.7); border-radius: 16px; background: #fff; color: #172033; box-shadow: 0 24px 64px rgba(14,32,118,.22); transform: rotate(-3deg); } .sc-console-top { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; font-size: 13px; } .sc-console-mark { display: grid; place-items: center; width: 28px; height: 28px; background: #f0edff; border-radius: 7px; color: var(--sc-blue); font-weight: 700; } .sc-console-dots { margin-left: auto; color: #94a3b8; } .sc-console-label { font-size: 9px; font-weight: 600; letter-spacing: .12em; color: #64748b; } .sc-console-heading { margin-top: 8px; font-size: 20px; font-weight: 600; letter-spacing: -.035em; } .sc-console-metrics { display: flex; justify-content: space-between; margin-top: 24px; } .sc-console-metrics span { display: block; color: #64748b; font-size: 11px; margin-bottom: 4px; } .sc-console-metrics strong { font-size: 24px; font-weight: 600; } .sc-console-metrics strong.sc-console-live { font-size: 14px; color: #15805e; } .sc-console-chart { display: block; width: 100%; height: auto; margin: 22px 0 14px; } .sc-console-service { display: flex; align-items: center; gap: 8px; padding: 12px 0; border-top: 1px solid #eef1f6; font-size: 11px; } .sc-console-service > span:last-child { margin-left: auto; color: #64748b; } .sc-console-status { width: 6px; height: 6px; border-radius: 50%; background: #16a077; } .sc-login-float { position: absolute; right: -10px; bottom: 4px; display: flex; gap: 12px; align-items: center; padding: 18px 22px; border-radius: 12px; background: #fff; color: #172033; box-shadow: 0 12px 40px rgba(14,32,118,.2); } .sc-login-float > span { display: grid; place-items: center; width: 36px; height: 36px; background: #e9faf2; border-radius: 50%; color: #16805d; font-size: 20px; } .sc-login-float strong { font-size: 13px; font-weight: 600; } .sc-login-float small { display: block; margin-top: 4px; font-size: 11px; color: #64748b; } .sc-login-story-copy { text-align: center; } .sc-login-story-copy h2 { margin: 0 0 16px; color: #fff; font-size: clamp(28px, 2.8vw, 42px); line-height: 1.15; font-weight: 600; letter-spacing: -.04em; } .sc-login-story-copy p { margin: 0; color: #dce5ff; font-size: 14px; line-height: 1.7; } @media (max-width: 991.98px) { .ph-login.sc-login-split { display: block; padding: 0; } .sc-login-split .sc-login-story { display: none; } .sc-login-split .ph-login-main { min-height: 100vh; min-height: 100dvh; padding: 32px 24px 24px; } .sc-login-split .ph-login-main > .ph-login-logo { display: inline-block; } .sc-login-split .ph-login-center { padding: 48px 0; } } .ph-page-auth footer.sc-footer { display: none !important; } .sc-login-minimal .ph-forgot { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; color: #4b5563; } .sc-login-minimal .ph-forgot:hover { color: #2563eb; text-decoration: underline; } .sc-login-minimal .ph-remember { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; cursor: pointer; } .sc-login-minimal .ph-remember input { flex: none; width: 20px; height: 20px; } .sc-login-minimal .ph-login-links p a, .sc-login-minimal .ph-login-note a { display: inline-block; padding: 12px 2px; margin: -12px 0; } .sc-login-minimal .ph-login-lang { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--sc-line, #e5e7eb); border-radius: 999px; background: #fff; font-size: 14px; color: #374151; transition: border-color .2s ease, background-color .2s ease; } .sc-login-minimal .ph-login-lang:hover, .sc-login-minimal .ph-login-lang:focus-visible { border-color: #93c5fd; background: #eff6ff; } .sc-login-minimal .ph-login-note { font-size: 13px; } :root[data-bs-theme="dark"] .sc-login-minimal .ph-forgot { color: #cbd5e1; } :root[data-bs-theme="dark"] .sc-login-minimal .ph-login-lang { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .15); color: #e2e8f0; } :root[data-bs-theme="dark"] .sc-login-minimal .ph-login-lang:hover { background: rgba(59, 130, 246, .16); border-color: rgba(59, 130, 246, .4); } body:has(#order-standard_cart) .verification-banner.email-verification { padding-block: 8px; background: #fffbf3; border-bottom-color: #f1e6cf; font-size: 13px; } body:has(#order-standard_cart) .verification-banner.email-verification .btn.btn-action { width: auto; max-width: 100%; margin-left: auto; min-height: 44px; height: auto; padding: 8px 14px; border: 1px solid #e4d7ba; border-radius: 7px; background: transparent; color: #78551d; font-size: 12px; box-shadow: none; } body:has(#order-standard_cart) .verification-banner.email-verification .btn.btn-action:hover { background: #f6ecd9; } body:has(#order-standard_cart) .verification-banner.email-verification .btn.close { width: 44px; height: 44px; min-height: 44px; border: 0; border-radius: 7px; background: transparent; } body:has(#order-standard_cart) .verification-banner.email-verification .fas { font-size: 18px; } :root[data-bs-theme="dark"] body:has(#order-standard_cart) .verification-banner.email-verification { background: #292316; border-color: #514329; } :root[data-bs-theme="dark"] body:has(#order-standard_cart) .verification-banner.email-verification .btn.btn-action { color: #f5dba6; border-color: #665537; } :root[data-bs-theme="dark"] body:has(#order-standard_cart) .verification-banner.email-verification .btn.btn-action:hover { background: #3b301e; } @media (max-width: 575.98px) { body:has(#order-standard_cart) .verification-banner.email-verification .btn.btn-action { margin-left: 0; } } .verification-banner.email-verification { padding: 10px 0; border: 0; border-bottom: 1px solid #dbe7fb; background: #f7faff; color: #334155; font-weight: 400; } .verification-banner.email-verification .verification-banner-inner { display: flex; align-items: center; gap: 12px; min-height: 48px; } .verification-banner.email-verification .verification-banner-icon { display: inline-flex; flex: 0 0 36px; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; background: #eaf2ff; color: #2563eb; } .verification-banner.email-verification .text { flex: 1 1 auto; min-width: 0; color: #334155; font-size: 14px; font-weight: 500; line-height: 1.5; } .verification-banner.email-verification .verification-banner-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; } .verification-banner.email-verification .btn.btn-action, .verification-banner.email-verification .btn.btn-action:active, body:has(#order-standard_cart) .verification-banner.email-verification .btn.btn-action { width: auto; min-height: 40px; margin: 0; padding: 0 14px; border: 1px solid #cbdcf7; border-radius: 7px; background: #fff; color: #1d4ed8; font-size: 13px; font-weight: 600; line-height: 1.3; box-shadow: none; } .verification-banner.email-verification .btn.btn-action:hover, body:has(#order-standard_cart) .verification-banner.email-verification .btn.btn-action:hover { border-color: #9dbcf0; background: #eff6ff; color: #1d4ed8; } .verification-banner.email-verification .btn.close, body:has(#order-standard_cart) .verification-banner.email-verification .btn.close { display: inline-flex; align-items: center; justify-content: center; width: 40px; min-width: 40px; height: 40px; min-height: 40px; margin: 0; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #64748b; font-size: 15px; opacity: 1; } .verification-banner.email-verification .btn.close:hover { background: #eaf2ff; color: #1d4ed8; } .verification-banner.email-verification .btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } :root[data-bs-theme="dark"] .verification-banner.email-verification, :root[data-bs-theme="dark"] body:has(#order-standard_cart) .verification-banner.email-verification { border-bottom-color: #293b59; background: #111c2f; color: #dbeafe; } :root[data-bs-theme="dark"] .verification-banner.email-verification .verification-banner-icon { background: #1d3152; color: #93c5fd; } :root[data-bs-theme="dark"] .verification-banner.email-verification .text { color: #dbeafe; } :root[data-bs-theme="dark"] .verification-banner.email-verification .btn.btn-action, :root[data-bs-theme="dark"] body:has(#order-standard_cart) .verification-banner.email-verification .btn.btn-action { border-color: #37527a; background: #172640; color: #bfdbfe; } :root[data-bs-theme="dark"] .verification-banner.email-verification .btn.btn-action:hover { border-color: #4d70a4; background: #1d3152; color: #fff; } :root[data-bs-theme="dark"] .verification-banner.email-verification .btn.close { color: #94a3b8; } :root[data-bs-theme="dark"] .verification-banner.email-verification .btn.close:hover { background: #1d3152; color: #dbeafe; } @media (max-width: 575.98px) { .verification-banner.email-verification { padding: 10px 0; } .verification-banner.email-verification .verification-banner-inner { align-items: flex-start; flex-wrap: wrap; gap: 10px; } .verification-banner.email-verification .text { padding-top: 7px; } .verification-banner.email-verification .verification-banner-actions { flex: 0 0 100%; padding-left: 48px; } .verification-banner.email-verification .btn.btn-action { flex: 1 1 auto; } } .ph-reset-body .sc-form-content > .text-center, .ph-reset-body .text-center.margin-bottom { margin: 4px 0 20px; text-align: left !important; } .ph-reset-body .text-center.margin-bottom > .row { margin: 0; } .ph-reset-body #default-captcha-domainchecker { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: center; margin: 0; padding: 0; text-align: left; } .ph-reset-body #default-captcha-domainchecker > [class*="col-"] { flex: none; width: auto; max-width: none; padding: 0; } .ph-reset-body .col-md-8.mx-auto { flex: 0 0 100%; max-width: 100%; padding: 0; } .ph-reset-body #inputCaptchaImage { display: block; height: 52px; width: auto; border-radius: 8px; } .ph-reset-body #inputCaptcha { height: 52px; max-width: 220px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; } @media (max-width: 420px) { .ph-reset-body #default-captcha-domainchecker { grid-template-columns: minmax(0, 1fr); } .ph-reset-body #inputCaptcha { max-width: none; } } @media (max-width: 1199.98px) { .dataTables_wrapper { max-width: 100%; overflow-x: auto; } } .col-lg-4 > .sidebar, .d-lg-none.sidebar { margin: 0 0 16px; padding: 10px 10px 8px; border: 1px solid var(--sc-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); } .sidebar > .card.card-sidebar { margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible; } .sidebar > .card.card-sidebar + .card.card-sidebar { margin-top: 8px !important; padding-top: 8px; border-top: 1px solid var(--sc-line) !important; } .sidebar .card-sidebar > .card-header { padding: 10px 12px 6px !important; border: 0 !important; background: transparent !important; } .sidebar .card-sidebar > .card-header .card-title { gap: 8px; font-size: 12px !important; font-weight: 600 !important; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8 !important; } .sidebar .card-sidebar > .card-header .card-title > i:not(.card-minimise) { display: none !important; } .sidebar .card-sidebar > .card-header .card-minimise { color: #cbd5e1; font-size: 12px; } .sidebar .card-sidebar .list-group { margin: 0; padding: 0; border: 0; border-radius: 0; gap: 2px; display: grid; } .sidebar .card-sidebar .list-group-item { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; padding: 0 12px !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; box-shadow: none !important; color: var(--sc-body) !important; font-size: 15px; font-weight: 500; line-height: 1.3; text-decoration: none; transition: background-color .15s ease, color .15s ease; } .sidebar .card-sidebar .list-group-item > i { flex: none; width: 20px; margin: 0 !important; color: #64748b; text-align: center; } .sidebar .card-sidebar a.list-group-item:hover { background: #f1f5f9 !important; color: var(--sc-ink) !important; } .sidebar .card-sidebar .list-group-item.active, .sidebar .card-sidebar a.list-group-item.active:hover { background: #eff6ff !important; color: var(--sc-blue) !important; font-weight: 600; border-left: 0 !important; } .sidebar .card-sidebar .list-group-item .badge { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: #eff6ff; color: var(--sc-blue); font-size: 12px; font-weight: 600; } .sidebar .card-sidebar .card-body { padding: 6px 12px 12px !important; } .sidebar .card-sidebar .card-footer { padding: 8px 12px 12px !important; border: 0 !important; background: transparent !important; } .sidebar .card-sidebar > .card-footer .btn { min-height: 44px; border-radius: 10px; } .sidebar .card-sidebar a.list-group-item:focus-visible { outline: 2px solid var(--sc-blue); outline-offset: -2px; } :root[data-bs-theme="dark"] .col-lg-4 > .sidebar, :root[data-bs-theme="dark"] .d-lg-none.sidebar { background: rgba(255, 255, 255, .04); border-color: #334155; box-shadow: none; } :root[data-bs-theme="dark"] .sidebar > .card.card-sidebar + .card.card-sidebar { border-top-color: #334155 !important; } :root[data-bs-theme="dark"] .sidebar .card-sidebar .list-group-item { color: #cbd5e1 !important; } :root[data-bs-theme="dark"] .sidebar .card-sidebar .list-group-item > i { color: #94a3b8; } :root[data-bs-theme="dark"] .sidebar .card-sidebar a.list-group-item:hover { background: rgba(255, 255, 255, .06) !important; color: #f1f5f9 !important; } :root[data-bs-theme="dark"] .sidebar .card-sidebar .list-group-item.active, :root[data-bs-theme="dark"] .sidebar .card-sidebar a.list-group-item.active:hover { background: rgba(59, 130, 246, .18) !important; color: #93c5fd !important; } :root[data-bs-theme="dark"] .sidebar .card-sidebar .list-group-item.active > i { color: #93c5fd; } @media (prefers-reduced-motion: reduce) { .sidebar .card-sidebar .list-group-item { transition: none; } } .col-lg-4 > .sidebar .card-sidebar a.list-group-item:not(.active), .d-lg-none.sidebar .card-sidebar a.list-group-item:not(.active) { color: var(--sc-body) !important; } .col-lg-4 > .sidebar .card-sidebar a.list-group-item:not(.active):hover { color: var(--sc-ink) !important; } :root[data-bs-theme="dark"] .col-lg-4 > .sidebar .card-sidebar a.list-group-item:not(.active) { color: #cbd5e1 !important; } :root[data-bs-theme="dark"] .col-lg-4 > .sidebar .card-sidebar a.list-group-item:not(.active):hover { color: #f1f5f9 !important; } :root { --sc-gut: 16px; } @media (min-width: 768px) { :root { --sc-gut: 32px; } } @media (min-width: 1280px) { :root { --sc-gut: 80px; } } @media (min-width: 1536px) { :root { --sc-gut: 128px; } } @media (min-width: 1920px) { :root { --sc-gut: 160px; } } .verification-banner { width: calc(100% - 2 * var(--sc-gut)); max-width: calc(1920px - 2 * var(--sc-gut)); margin: 24px auto 0; padding: 0; border: 1px solid #c7d2fe; border-radius: 16px; background: #eef2ff; color: var(--sc-ink); } .verification-banner .verification-banner-inner { max-width: none; padding: 14px 20px; } .verification-banner .text { font-size: 15px; font-weight: 500; } :root[data-bs-theme="dark"] .verification-banner { background: rgba(99, 102, 241, .12); border-color: rgba(129, 140, 248, .35); color: #e2e8f0; } .sc-page-clientareahome .col-lg-4 > .sidebar { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; } .sc-page-clientareahome .sidebar > .card.card-sidebar { margin: 0 0 20px !important; padding: 0; border: 1px solid var(--sc-line) !important; border-radius: 16px !important; background: #fff !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important; } .sc-page-clientareahome .sidebar > .card.card-sidebar + .card.card-sidebar { margin-top: 0 !important; padding-top: 0; border-top: 1px solid var(--sc-line) !important; } .sc-page-clientareahome .sidebar .card-sidebar > .card-header { padding: 18px 22px 14px !important; border-bottom: 1px solid var(--sc-line) !important; } .sc-page-clientareahome .sidebar .card-sidebar .card-body { padding: 18px 22px 22px !important; font-size: 15px; line-height: 1.6; color: var(--sc-body); } .sc-page-clientareahome .sidebar .card-sidebar .card-body strong { font-size: 17px; font-weight: 600; color: var(--sc-ink); } .sc-page-clientareahome .sidebar .card-sidebar .list-group { padding: 8px; } .sc-page-clientareahome .sidebar .card-sidebar a.list-group-item[href*="logout"] { color: #b91c1c !important; } .sc-page-clientareahome .sidebar .card-sidebar a.list-group-item[href*="logout"]:hover { background: #fef2f2 !important; } .sc-dash-banner.is-overdue { border-color: #fecaca; background: #fef2f2; } .sc-dash-banner.is-overdue .sc-dash-banner-cta, .btn-danger-solid { background: #991b1b !important; border-color: #991b1b !important; color: #fff !important; } .sc-dash-banner.is-overdue .sc-dash-banner-cta:hover, .btn-danger-solid:hover { background: #7f1d1d !important; border-color: #7f1d1d !important; } .sc-dash-banner strong { font-variant-numeric: tabular-nums; } .tiles .tile { position: relative; padding-bottom: 18px; } .tiles .tile::after { content: ""; position: absolute; right: 18px; bottom: 18px; width: 16px; height: 16px; background: currentColor; color: #64748b; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12M11 5l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12M11 5l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s ease; } .tiles .tile:hover::after { transform: translateX(3px); } .tiles .tile.ph-tile-attn:has(.sub.is-bad) { border-color: #fca5a5 !important; background: #fff; } .tiles .tile.ph-tile-attn:has(.sub.is-bad) .stat, .tiles .tile.ph-tile-attn:has(.sub.is-bad)::after { color: #b91c1c; } .tiles .tile.ph-tile-attn:not(:has(.sub.is-bad)) { border-color: #fcd34d !important; background: #fff; } .tiles .tile.ph-tile-attn:not(:has(.sub.is-bad)) .stat, .tiles .tile.ph-tile-attn:not(:has(.sub.is-bad))::after { color: #b45309; } .client-home-cards .card > .card-header { padding: 18px 22px 14px; border-bottom: 1px solid var(--sc-line); } .client-home-cards .card > .card-header .card-title { font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--sc-ink); } .client-home-cards .card .card-body { padding: 18px 22px; font-size: 15px; line-height: 1.65; } .client-home-cards .card .card-footer.ph-card-cta { display: flex; justify-content: flex-end; padding: 14px 22px 18px; border-top: 1px solid var(--sc-line); background: transparent; } .client-home-cards .card .card-footer.ph-card-cta .btn { min-height: 46px; padding: 0 22px; border-radius: 10px; font-weight: 600; } .client-home-cards .label-success { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid #bbf7d0; background: #f0fdf4; color: #15803d; font-size: 12px; font-weight: 600; } .client-home-cards .label-success::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; } :root[data-bs-theme="dark"] .sc-page-clientareahome .sidebar > .card.card-sidebar { background: rgba(255, 255, 255, .04) !important; border-color: #334155 !important; box-shadow: none !important; } :root[data-bs-theme="dark"] .sc-page-clientareahome .sidebar .card-sidebar > .card-header, :root[data-bs-theme="dark"] .client-home-cards .card > .card-header, :root[data-bs-theme="dark"] .client-home-cards .card .card-footer.ph-card-cta { border-color: #334155 !important; } :root[data-bs-theme="dark"] .sc-page-clientareahome .sidebar .card-sidebar .card-body strong { color: #f1f5f9; } :root[data-bs-theme="dark"] .sc-dash-banner.is-overdue { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .35); } :root[data-bs-theme="dark"] .tiles .tile.ph-tile-attn:has(.sub.is-bad) { background: transparent; border-color: rgba(248, 113, 113, .5) !important; } :root[data-bs-theme="dark"] .tiles .tile.ph-tile-attn:not(:has(.sub.is-bad)) { background: transparent; border-color: rgba(252, 211, 77, .45) !important; } :root[data-bs-theme="dark"] .client-home-cards .card-title { color: #f1f5f9; } @media (prefers-reduced-motion: reduce) { .tiles .tile::after { transition: none; } } .sc-page-clientareahome .sc-page-header-info { display: flex; flex-direction: column; } .sc-page-clientareahome .sc-page-header-info .sc-breadcrumb { order: -1; margin: 0 0 8px; } .sc-amt-bad { font-weight: 700; color: #b91c1c; font-variant-numeric: tabular-nums; } :root[data-bs-theme="dark"] .sc-amt-bad { color: #fca5a5; } .sc-page-clientareahome .col-lg-4 .sidebar [menuitemname="Client Shortcuts"] a.list-group-item:not([href*="logout"]) { color: var(--sc-blue) !important; } .sc-page-clientareahome .col-lg-4 .sidebar [menuitemname="Client Shortcuts"] a.list-group-item { border-bottom: 1px solid var(--sc-line-soft, #eef2f7) !important; border-radius: 0 !important; } .sc-page-clientareahome .col-lg-4 .sidebar [menuitemname="Client Shortcuts"] a.list-group-item:last-child { border-bottom: 0 !important; } :root[data-bs-theme="dark"] .sc-page-clientareahome .col-lg-4 .sidebar [menuitemname="Client Shortcuts"] a.list-group-item:not([href*="logout"]) { color: #93c5fd !important; } :root[data-bs-theme="dark"] .sc-page-clientareahome .col-lg-4 .sidebar [menuitemname="Client Shortcuts"] a.list-group-item { border-bottom-color: #334155 !important; } .sc-page-clientareahome .col-lg-4 > .sidebar .card-sidebar a.list-group-item[href*="logout"]:not(.active) { color: #b91c1c !important; } :root[data-bs-theme="dark"] .sc-page-clientareahome .col-lg-4 > .sidebar .card-sidebar a.list-group-item[href*="logout"]:not(.active), :root[data-bs-theme="dark"] .sc-page-clientareahome .col-lg-4 > .sidebar .card-sidebar a.list-group-item[href*="logout"]:not(.active) > i { color: #fca5a5 !important; } .verification-banner, .verification-banner .verification-banner-inner { box-shadow: none; } .verification-banner .verification-banner-inner { border: 0; } .verification-banner::after, .verification-banner::before { display: none; } .verification-banner .verification-banner-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: rgba(79, 70, 229, .1); color: #4338ca; } .verification-banner .btn.btn-action { min-height: 38px; border-radius: 8px; border: 1px solid rgba(79, 70, 229, .25); background: transparent; color: #4338ca; font-size: 13px; font-weight: 600; } .verification-banner .btn.close { color: #64748b; opacity: 1; } .sc-dash-banner.is-overdue .sc-dash-banner-ico { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px; background: #fee2e2; } .sc-dash-banner.is-overdue { padding: 18px 20px; gap: 16px; } .sc-dash-banner.is-overdue .sc-dash-banner-cta { min-height: 40px; padding: 0 20px; border-radius: 8px; font-size: 13px; font-weight: 600; } .tiles .tile { padding: 20px; } .tiles .tile .title { margin: 0 0 14px; } .tiles .tile .stat { margin: 0; font-size: 30px; line-height: 36px; font-weight: 700; } .tiles .tile .sub { margin-top: 8px; } .tiles .tile > i { width: 36px; height: 36px; border-radius: 8px; } .sc-page-clientareahome .sidebar .card-sidebar > .card-header { margin: 0 22px; padding: 20px 0 14px !important; } .sc-page-clientareahome .sidebar .card-sidebar .card-body { padding: 16px 22px 22px !important; } .sc-page-clientareahome .sidebar .card-sidebar .list-group { padding: 4px 22px 14px; } .sc-page-clientareahome .sidebar .card-sidebar .list-group-item { padding: 0 !important; min-height: 46px; border-radius: 0 !important; } .sc-who { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .sc-who strong { font-size: 17px; font-weight: 700; color: var(--sc-ink); } .sc-vbadge { padding: 2px 8px; border: 1px solid #fde68a; border-radius: 6px; background: #fffbeb; color: #b45309; font-size: 11px; font-weight: 600; } .sc-cid { margin: 2px 0 14px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; font-weight: 500; color: #64748b; } .sc-addr { font-size: 15px; line-height: 1.6; color: var(--sc-body); } .sc-addr::first-line { color: var(--sc-body); } .sc-page-clientareahome [menuitemname="Client Contacts"] [menuitemname="No Contacts"] { flex-direction: column; justify-content: center; gap: 10px; min-height: 0; padding: 20px 0 6px !important; font-size: 13px; text-align: center; color: #64748b !important; } .sc-page-clientareahome [menuitemname="Client Contacts"] [menuitemname="No Contacts"]::before { content: ""; width: 40px; height: 40px; border-radius: 50%; background: #e5eeff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.8-3.4 3.2-5 6.5-5s5.7 1.6 6.5 5M17 5l4 4M21 5l-4 4'/%3E%3C/svg%3E") center / 22px no-repeat; } .sc-page-clientareahome [menuitemname="Client Contacts"] .card-footer .btn { width: 100%; border: 1px dashed #94a3b8; background: #fff; border-radius: 10px; min-height: 44px; } .sc-page-clientareahome [menuitemname="Client Contacts"] .card-footer { padding: 6px 22px 22px !important; } .sc-page-clientareahome [menuitemname="Client Contacts"] .card-footer .btn:hover { border-style: solid; border-color: var(--sc-blue); color: var(--sc-blue); } :root[data-bs-theme="dark"] .sc-vbadge { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .35); color: #fcd34d; } :root[data-bs-theme="dark"] .sc-vbadge.is-ok { background: rgba(16, 185, 129, .12); border-color: rgba(16, 185, 129, .35); color: #6ee7b7; } :root[data-bs-theme="dark"] .sc-who strong { color: #f1f5f9; } :root[data-bs-theme="dark"] .sc-addr { color: #cbd5e1; } :root[data-bs-theme="dark"] .sc-cid { color: #94a3b8; } :root[data-bs-theme="dark"] .sc-page-clientareahome [menuitemname="Client Contacts"] .card-footer .btn { background: transparent; border-color: #475569; } :root[data-bs-theme="dark"] .verification-banner .verification-banner-icon { background: rgba(129, 140, 248, .18); color: #c7d2fe; } :root[data-bs-theme="dark"] .verification-banner .btn.btn-action { color: #c7d2fe; border-color: rgba(129, 140, 248, .4); } :root[data-bs-theme="dark"] .sc-dash-banner.is-overdue .sc-dash-banner-ico { background: rgba(239, 68, 68, .18); } aside.verification-banner.email-verification { padding: 0 !important; border: 1px solid #dbe4ff !important; border-radius: 16px !important; background: #eff4ff !important; box-shadow: none !important; } aside.verification-banner.email-verification .verification-banner-inner { padding: 14px 20px !important; } aside.verification-banner.email-verification .btn.btn-action { background: #fff !important; } :root[data-bs-theme="dark"] aside.verification-banner.email-verification { background: rgba(99, 102, 241, .12) !important; border-color: rgba(129, 140, 248, .35) !important; } :root[data-bs-theme="dark"] aside.verification-banner.email-verification .btn.btn-action { background: transparent !important; } .client-home-cards .card > .card-header { background: #fbfcff !important; border-radius: 16px 16px 0 0; } .client-home-cards .card { border-radius: 16px; } :root[data-bs-theme="dark"] .client-home-cards .card > .card-header { background: rgba(255, 255, 255, .03) !important; } :root[data-bs-theme="dark"] .tiles .tile.ph-tile-attn:has(.sub.is-bad) .stat, :root[data-bs-theme="dark"] .tiles .tile.ph-tile-attn:has(.sub.is-bad)::after { color: #f87171; } :root[data-bs-theme="dark"] .tiles .tile.ph-tile-attn:not(:has(.sub.is-bad)) .stat, :root[data-bs-theme="dark"] .tiles .tile.ph-tile-attn:not(:has(.sub.is-bad))::after { color: #fbbf24; } .sc-band-domain { margin: 6px 0 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 15px; color: rgba(255, 255, 255, .85); text-transform: none; } .sc-page-clientareaproductdetails .sc-page-header h1 { text-transform: none; } .sc-page-clientareaproductdetails #alertOverdueInvoice { display: flex; flex-direction: row; align-items: center; gap: 14px; margin: 0 0 20px; padding: 14px 20px; border: 1px solid #fecaca; border-radius: 14px; background: #fef2f2; color: var(--sc-ink); font-size: 15px; font-weight: 600; } .sc-page-clientareaproductdetails #alertOverdueInvoice > .float-right { float: none !important; order: 3; margin-left: auto; } .sc-page-clientareaproductdetails #alertOverdueInvoice .btn { min-height: 40px; padding: 0 20px; border-radius: 8px; border: 0; background: #b91c1c; color: #fff !important; font-size: 13px; font-weight: 600; } .sc-page-clientareaproductdetails #alertOverdueInvoice .btn:hover { background: #991b1b; } .sc-page-clientareaproductdetails #alertOverdueInvoice::before { content: ""; order: 0; flex: none; width: 34px; height: 34px; border-radius: 8px; background: #fee2e2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b91c1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l10 18H2zM12 10v5M12 18h.01'/%3E%3C/svg%3E") center / 20px no-repeat; } .sc-page-clientareaproductdetails #tabOverview .card.panel { margin-bottom: 24px !important; border: 1px solid var(--sc-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .04); overflow: hidden; } .sc-page-clientareaproductdetails #tabOverview .card.panel > .card-header { padding: 16px 24px 14px; border-bottom: 1px solid var(--sc-line); background: #fbfcff; } .sc-page-clientareaproductdetails #tabOverview .card.panel > .card-header .card-title { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #64748b; } .sc-page-clientareaproductdetails #tabOverview .card.panel > .card-body { padding: 22px 24px; } .sc-page-clientareaproductdetails #tabOverview > .row { align-items: stretch; } .sc-page-clientareaproductdetails #tabOverview > .row > [class*="col-"] { display: flex; } .sc-page-clientareaproductdetails #tabOverview > .row > [class*="col-"] > .card { flex: 1; } .sc-page-clientareaproductdetails #cPanelPackagePanel > .card-body { text-align: left !important; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; } .sc-page-clientareaproductdetails .cpanel-package-details em { display: block; font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #64748b; } .sc-page-clientareaproductdetails .cpanel-package-details h4 { margin: 4px 0 8px !important; font-size: 30px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--sc-ink); } .sc-page-clientareaproductdetails .cpanel-package-details a { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; font-weight: 500; color: var(--sc-blue); word-break: break-all; } .sc-page-clientareaproductdetails #cPanelPackagePanel p { margin: 0; } .sc-page-clientareaproductdetails #cPanelPackagePanel .btn { min-height: 44px; padding: 0 20px; border: 1px solid var(--sc-blue); border-radius: 8px; background: #fff; color: var(--sc-blue); font-weight: 600; } .sc-page-clientareaproductdetails #cPanelPackagePanel .btn:hover { background: var(--sc-blue); color: #fff; } .sc-page-clientareaproductdetails .cpanel-usage-stats > .row > [class*="col-"] { font-size: 14px; color: var(--sc-body); } .sc-page-clientareaproductdetails .cpanel-usage-stats strong { font-size: 16px; font-weight: 600; color: var(--sc-ink); } .sc-page-clientareaproductdetails .cpanel-usage-stats input.usage-dial { font-family: inherit !important; font-size: 20px !important; font-weight: 700 !important; color: var(--sc-ink) !important; } .sc-page-clientareaproductdetails .cpanel-usage-stats .limit-near { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--sc-line); font-size: 13px; color: #64748b !important; } .sc-page-clientareaproductdetails .cpanel-feature-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 0; } .sc-page-clientareaproductdetails .cpanel-feature-row > [class*="col-"] { flex: none; width: auto; max-width: none; padding: 0; } .sc-page-clientareaproductdetails .cpanel-feature-row a.d-block { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; min-height: 120px; margin: 0 !important; padding: 16px 12px; border: 1px solid var(--sc-line); border-radius: 14px; background: #fff; color: var(--sc-ink); font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color .15s ease, background-color .15s ease, transform .15s ease; } .sc-page-clientareaproductdetails .cpanel-feature-row a.d-block img { width: 44px; height: 44px; object-fit: contain; } .sc-page-clientareaproductdetails .cpanel-feature-row a.d-block:hover, .sc-page-clientareaproductdetails .cpanel-feature-row a.d-block:focus-visible { border-color: #93c5fd; background: #f8fbff; color: var(--sc-blue); transform: translateY(-2px); } .sc-page-clientareaproductdetails #frmCreateEmailAccount .form-control, .sc-page-clientareaproductdetails #frmCreateEmailAccount .input-group-text { min-height: 46px; border-radius: 10px; } .sc-page-clientareaproductdetails #frmCreateEmailAccount .input-group > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; } .sc-page-clientareaproductdetails #frmCreateEmailAccount .input-group-text { border-top-left-radius: 0; border-bottom-left-radius: 0; background: #f1f5f9; } .sc-page-clientareaproductdetails #frmCreateEmailAccount .btn { min-height: 46px; border-radius: 10px; font-weight: 600; } .sc-page-clientareaproductdetails #cPanelBillingOverviewPanel > .card-body > .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px 24px; margin: 0; } .sc-page-clientareaproductdetails #cPanelBillingOverviewPanel > .card-body > .row > [class*="col-"] { display: contents; } .sc-page-clientareaproductdetails #cPanelBillingOverviewPanel .row[id] { display: flex; flex-direction: column; gap: 2px; margin: 0; } .sc-page-clientareaproductdetails #cPanelBillingOverviewPanel .row[id] > [class*="col-"] { flex: none; width: auto; max-width: none; padding: 0; text-align: left !important; } .sc-page-clientareaproductdetails #cPanelBillingOverviewPanel .row[id] > :first-child { font-size: 13px; color: #64748b; } .sc-page-clientareaproductdetails #cPanelBillingOverviewPanel .row[id] > :last-child { font-size: 16px; font-weight: 600; color: var(--sc-ink); } body:has(#alertOverdueInvoice).sc-page-clientareaproductdetails #cPanelBillingOverviewPanel #nextDueDate > :last-child { color: #b91c1c; } body:has(#alertOverdueInvoice).sc-page-clientareaproductdetails #cPanelBillingOverviewPanel #nextDueDate > :last-child::after { content: " (Overdue)"; font-weight: 500; } .sc-page-clientareaproductdetails #cPanelConfigurableOptionsPanel > .card-body { display: grid; gap: 12px; } .sc-page-clientareaproductdetails #cPanelConfigurableOptionsPanel .row { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--sc-line-soft, #eef2f7); } .sc-page-clientareaproductdetails #cPanelConfigurableOptionsPanel .row:last-child { border-bottom: 0; padding-bottom: 0; } .sc-page-clientareaproductdetails #cPanelConfigurableOptionsPanel .row > [class*="col-"] { flex: none; width: auto; max-width: none; padding: 0; text-align: left !important; } .sc-page-clientareaproductdetails #cPanelConfigurableOptionsPanel .row > :last-child { font-weight: 600; color: var(--sc-ink); } .sc-page-clientareaproductdetails [id$="Service_Details_Actions-cpanel"] { border: 1px solid #c7d2fe !important; background: #eef2ff !important; color: #3730a3 !important; font-weight: 600; border-radius: 10px !important; } .sc-page-clientareaproductdetails [id$="Service_Details_Actions-Cancel"] { margin-top: 8px; border-top: 1px solid var(--sc-line) !important; border-radius: 0 !important; color: #b91c1c !important; } .sc-page-clientareaproductdetails [id$="Service_Details_Actions-Cancel"] .sidebar-menu-item-icon { color: #b91c1c !important; } .sc-page-clientareaproductdetails .sidebar .card-sidebar .list-group-item { text-decoration: none; } .sc-page-clientareaproductdetails .sidebar .card-sidebar .sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 12px; width: 100%; } :root[data-bs-theme="dark"] .sc-page-clientareaproductdetails #tabOverview .card.panel { background: rgba(255, 255, 255, .04); border-color: #334155; box-shadow: none; } :root[data-bs-theme="dark"] .sc-page-clientareaproductdetails #tabOverview .card.panel > .card-header { background: rgba(255, 255, 255, .03); border-color: #334155; } :root[data-bs-theme="dark"] .sc-page-clientareaproductdetails .cpanel-package-details h4, :root[data-bs-theme="dark"] .sc-page-clientareaproductdetails .cpanel-usage-stats strong, :root[data-bs-theme="dark"] .sc-page-clientareaproductdetails #cPanelBillingOverviewPanel .row[id] > :last-child, :root[data-bs-theme="dark"] .sc-page-clientareaproductdetails #cPanelConfigurableOptionsPanel .row > :last-child { color: #f1f5f9; } :root[data-bs-theme="dark"] .sc-page-clientareaproductdetails .cpanel-package-details a { color: #93c5fd; } :root[data-bs-theme="dark"] .sc-page-clientareaproductdetails #cPanelPackagePanel .btn { background: transparent; border-color: #60a5fa; color: #93c5fd; } :root[data-bs-theme="dark"] .sc-page-clientareaproductdetails .cpanel-usage-stats input.usage-dial { color: #f1f5f9 !important; } :root[data-bs-theme="dark"] .sc-page-clientareaproductdetails .cpanel-feature-row a.d-block { background: rgba(255, 255, 255, .04); border-color: #334155; color: #e2e8f0; } :root[data-bs-theme="dark"] .sc-page-clientareaproductdetails .cpanel-feature-row a.d-block img { background: #fff; border-radius: 10px; padding: 4px; box-sizing: content-box; } :root[data-bs-theme="dark"] .sc-page-clientareaproductdetails .cpanel-feature-row a.d-block:hover { background: rgba(59, 130, 246, .12); border-color: #60a5fa; color: #93c5fd; } :root[data-bs-theme="dark"] .sc-page-clientareaproductdetails #frmCreateEmailAccount .input-group-text { background: rgba(255, 255, 255, .06); } :root[data-bs-theme="dark"] .sc-page-clientareaproductdetails #alertOverdueInvoice { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .35); color: #f1f5f9; } :root[data-bs-theme="dark"] .sc-page-clientareaproductdetails #alertOverdueInvoice::before { background-color: rgba(239, 68, 68, .2); } :root[data-bs-theme="dark"] .sc-page-clientareaproductdetails [id$="Service_Details_Actions-cpanel"] { background: rgba(99, 102, 241, .16) !important; border-color: rgba(129, 140, 248, .4) !important; color: #c7d2fe !important; } :root[data-bs-theme="dark"] .sc-page-clientareaproductdetails [id$="Service_Details_Actions-Cancel"] { color: #fca5a5 !important; border-top-color: #334155 !important; } @media (prefers-reduced-motion: reduce) { .sc-page-clientareaproductdetails .cpanel-feature-row a.d-block { transition: none; transform: none !important; } } .sidebar .list-group-item i:is(.fa-address-card, .fa-arrow-left, .fa-ban, .fa-calendar-alt, .fa-circle, .fa-cog, .fa-comments, .fa-credit-card, .fa-cubes, .fa-download, .fa-folder, .fa-globe, .fa-info, .fa-info-circle, .fa-key, .fa-life-ring, .fa-list, .fa-plus, .fa-rocket, .fa-rss, .fa-share, .fa-shopping-cart, .fa-sign-in, .fa-sign-in-alt, .fa-sync, .fa-ticket-alt, .fa-university, .fa-user) { display: inline-block; flex: none; width: 20px; height: 20px; margin: 0 !important; font-size: 0 !important; line-height: 0; background-color: currentColor; -webkit-mask: var(--sc-ico, none) center / 20px 20px no-repeat; mask: var(--sc-ico, none) center / 20px 20px no-repeat; } .sidebar .list-group-item i:is(.fa-address-card, .fa-arrow-left, .fa-ban, .fa-calendar-alt, .fa-circle, .fa-cog, .fa-comments, .fa-credit-card, .fa-cubes, .fa-download, .fa-folder, .fa-globe, .fa-info, .fa-info-circle, .fa-key, .fa-life-ring, .fa-list, .fa-plus, .fa-rocket, .fa-rss, .fa-share, .fa-shopping-cart, .fa-sign-in, .fa-sign-in-alt, .fa-sync, .fa-ticket-alt, .fa-university, .fa-user)::before { content: none !important; } .sidebar .list-group-item i.fa-circle { width: 16px; height: 16px; -webkit-mask-size: 16px 16px; mask-size: 16px 16px; } .sidebar .list-group-item .loading { display: none !important; } .sidebar .list-group-item .sidebar-menu-item-icon-wrapper { display: inline-flex; align-items: center; } .sidebar .list-group-item i.fa-sign-in { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M10 17l5-5-5-5M15 12H4M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4%22/%3E%3C/svg%3E"); } .sidebar .list-group-item i.fa-key { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%228%22 cy=%2215%22 r=%224%22/%3E%3Cpath d=%22M11 12l9-9M16 7l3 3M14 9l2 2%22/%3E%3C/svg%3E"); } .sidebar .list-group-item i.fa-ban { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M5.6 5.6l12.8 12.8%22/%3E%3C/svg%3E"); } .sidebar .list-group-item i.fa-shopping-cart { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%229%22 cy=%2220%22 r=%221.5%22/%3E%3Ccircle cx=%2218%22 cy=%2220%22 r=%221.5%22/%3E%3Cpath d=%22M2 3h3l2.4 12h11l2-8H6%22/%3E%3C/svg%3E"); } .sidebar .list-group-item i.fa-cubes { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M12 3l8 4.5v9L12 21l-8-4.5v-9z%22/%3E%3Cpath d=%22M4 7.5l8 4.5 8-4.5M12 12v9%22/%3E%3C/svg%3E"); } .sidebar .list-group-item i.fa-sync { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M4 12a8 8 0 0 1 13.7-5.6L20 9M20 4v5h-5M20 12a8 8 0 0 1-13.7 5.6L4 15M4 20v-5h5%22/%3E%3C/svg%3E"); } .sidebar .list-group-item i.fa-globe { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M3 12h18M12 3c3 3.2 3 14.8 0 18M12 3c-3 3.2-3 14.8 0 18%22/%3E%3C/svg%3E"); } .sidebar .list-group-item i.fa-share { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M15 5l5 5-5 5M20 10H9a5 5 0 0 0-5 5v4%22/%3E%3C/svg%3E"); } .sidebar .list-group-item i.fa-ticket-alt { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M5 6h14a1 1 0 0 1 1 1v3a2 2 0 0 0 0 4v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3a2 2 0 0 0 0-4V7a1 1 0 0 1 1-1z%22/%3E%3C/svg%3E"); } .sidebar .list-group-item i.fa-list { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01%22/%3E%3C/svg%3E"); } .sidebar .list-group-item i.fa-info-circle { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 11v5M12 8h.01%22/%3E%3C/svg%3E"); } .sidebar .list-group-item i.fa-download { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M12 4v11M7 11l5 5 5-5M5 20h14%22/%3E%3C/svg%3E"); } .sidebar .list-group-item i.fa-rocket { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M3 12h4l2.5-7 5 14 2.5-7h4%22/%3E%3C/svg%3E"); } .sidebar .list-group-item i.fa-comments { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M5 5h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-6l-5 4v-4H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z%22/%3E%3C/svg%3E"); } .sidebar .list-group-item i.fa-rss { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M5 19h.01M5 12a7 7 0 0 1 7 7M5 5a14 14 0 0 1 14 14%22/%3E%3C/svg%3E"); } .sidebar .list-group-item i.fa-arrow-left { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M9 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h3M16 8l4 4-4 4M20 12H9%22/%3E%3C/svg%3E"); } .sidebar .list-group-item i.fa-circle { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%226.5%22/%3E%3C/svg%3E"); } .sidebar .card-sidebar a.list-group-item .sidebar-menu-item-label { color: inherit !important; font-weight: inherit; } .sc-page-clientareaproductdetails .sidebar .card-sidebar a.list-group-item[id$="Service_Details_Actions-cpanel"] { border: 1px solid #c7d2fe !important; background: #eef2ff !important; color: #3730a3 !important; font-weight: 600; border-radius: 10px !important; padding: 0 12px !important; margin-bottom: 4px; } .sc-page-clientareaproductdetails .sidebar .card-sidebar a.list-group-item[id$="Service_Details_Actions-Cancel"] { margin-top: 8px; border-top: 1px solid var(--sc-line) !important; border-radius: 0 !important; color: #b91c1c !important; } .sc-page-clientareaproductdetails .sidebar .card-sidebar a.list-group-item[id$="Service_Details_Actions-Cancel"] i { color: #b91c1c !important; } .sidebar .card-sidebar a.list-group-item:not(.active) { color: var(--sc-body) !important; } .sidebar .card-sidebar a.list-group-item:not(.active):hover { color: var(--sc-ink) !important; } :root[data-bs-theme="dark"] .sidebar .card-sidebar a.list-group-item:not(.active) { color: #cbd5e1 !important; } :root[data-bs-theme="dark"] .sc-page-clientareaproductdetails .sidebar .card-sidebar a.list-group-item[id$="Service_Details_Actions-cpanel"] { background: rgba(99, 102, 241, .16) !important; border-color: rgba(129, 140, 248, .4) !important; color: #c7d2fe !important; } :root[data-bs-theme="dark"] .sc-page-clientareaproductdetails .sidebar .card-sidebar a.list-group-item[id$="Service_Details_Actions-Cancel"], :root[data-bs-theme="dark"] .sc-page-clientareaproductdetails .sidebar .card-sidebar a.list-group-item[id$="Service_Details_Actions-Cancel"] i { color: #fca5a5 !important; } .sidebar .card-sidebar a.list-group-item.active, .sidebar .card-sidebar a.list-group-item.active:hover { color: var(--sc-blue) !important; } .sidebar .card-sidebar .btn i:is(.fa-pencil-alt, .fa-plus) { display: inline-block; width: 18px; height: 18px; margin-right: 6px; font-size: 0 !important; line-height: 0; background-color: currentColor; -webkit-mask: var(--sc-ico, none) center / 18px 18px no-repeat; mask: var(--sc-ico, none) center / 18px 18px no-repeat; } .sidebar .card-sidebar .btn i:is(.fa-pencil-alt, .fa-plus)::before { content: none !important; } .sidebar .card-sidebar .btn i.fa-pencil-alt { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M4 20h4L19 9a2.1 2.1 0 0 0-4-4L4 16z%22/%3E%3Cpath d=%22M13.5 6.5l4 4%22/%3E%3C/svg%3E"); } .sidebar .card-sidebar .btn i.fa-plus { --sc-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d=%22M12 5v14M5 12h14%22/%3E%3C/svg%3E"); } .sc-band-badge { display: inline-flex; align-items: center; margin-left: 12px; padding: 4px 12px; border: 1px solid rgba(110, 231, 183, .45); border-radius: 999px; background: rgba(16, 185, 129, .16); color: #a7f3d0; font-size: 13px; font-weight: 600; letter-spacing: 0; vertical-align: middle; } .sidebar .card-sidebar a.list-group-item i.fa-circle { -webkit-mask-image: none; mask-image: none; background: transparent; border: 0; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; } .sidebar .card-sidebar a.list-group-item[menuitemname="Active"] i.fa-circle, .sidebar .card-sidebar a.list-group-item[menuitemname="Paid"] i.fa-circle, .sidebar .card-sidebar a.list-group-item[menuitemname="Answered"] i.fa-circle { background: #22c55e; box-shadow: none; } .sidebar .card-sidebar a.list-group-item[menuitemname="Pending"] i.fa-circle, .sidebar .card-sidebar a.list-group-item[menuitemname="Unpaid"] i.fa-circle, .sidebar .card-sidebar a.list-group-item[menuitemname="Customer-Reply"] i.fa-circle { background: #f59e0b; box-shadow: none; } .sidebar .card-sidebar a.list-group-item[menuitemname="Suspended"] i.fa-circle, .sidebar .card-sidebar a.list-group-item[menuitemname="Open"] i.fa-circle { background: #ef4444; box-shadow: none; } .sidebar .card-sidebar a.list-group-item[menuitemname="Terminated"] i.fa-circle, .sidebar .card-sidebar a.list-group-item[menuitemname="Closed"] i.fa-circle { background: #cbd5e1; box-shadow: none; } .sidebar .card-sidebar a.list-group-item[menuitemname="Cancelled"] i.fa-circle, .sidebar .card-sidebar a.list-group-item[menuitemname="Refunded"] i.fa-circle { background: #64748b; box-shadow: none; } .sidebar .card-sidebar a.list-group-item .badge, .sidebar .card-sidebar a.list-group-item .sidebar-menu-item-badge .badge { min-width: 26px; padding: 2px 8px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 12px; font-weight: 600; text-align: center; } .sc-page-clientareaproducts #tableServicesList_wrapper { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "filter length" "table table" "info paginate"; gap: 14px 16px; align-items: center; } .sc-page-clientareaproducts #tableServicesList_wrapper > .listtable { display: contents; } .sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_filter { grid-area: filter; float: none; margin: 0; } .sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_filter label, .sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_filter input { width: 100%; } .sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_filter input { min-height: 48px; padding-left: 44px; border-radius: 12px; border: 1px solid var(--sc-line); background: #fff; font-size: 15px; box-shadow: none; } .sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_length { grid-area: length; margin: 0; } .sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_length select { min-height: 44px; border-radius: 10px; } .sc-page-clientareaproducts #tableServicesList_wrapper > .listtable > table { grid-area: table; width: 100%; } .sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_info { grid-area: info; margin: 0; padding: 0; font-size: 14px; color: #64748b; } .sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_paginate { grid-area: paginate; margin: 0; justify-self: end; } .sc-page-clientareaproducts #tableServicesList td[data-label="Product/Service"] { position: relative; padding-left: 74px !important; } .sc-page-clientareaproducts #tableServicesList td[data-label="Product/Service"]::before { content: ""; position: absolute; left: 16px; top: 50%; width: 42px; height: 42px; transform: translateY(-50%); border-radius: 12px; background: #eef2ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234338ca' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='7' rx='2'/%3E%3Crect x='4' y='13' width='16' height='7' rx='2'/%3E%3Cpath d='M8 7.5h.01M8 16.5h.01'/%3E%3C/svg%3E") center / 22px no-repeat; } .sc-page-clientareaproducts #tableServicesList td[data-label="Product/Service"] strong { font-size: 16px; font-weight: 600; color: var(--sc-ink); } .sc-page-clientareaproducts #tableServicesList td[data-label="Product/Service"] a { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; font-weight: 500; color: #475569; word-break: break-all; } .sc-page-clientareaproducts #tableServicesList td[data-label="Product/Service"] a:hover { color: var(--sc-blue); } .sc-page-clientareaproducts #tableServicesList .ph-row-action { border: 1px solid #c7d2fe; background: #eef2ff; color: #3730a3; border-radius: 8px; font-weight: 600; } .sc-page-clientareaproducts #tableServicesList .ph-row-action:hover { background: #3730a3; border-color: #3730a3; color: #fff; } .sc-addons-note { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 16px 20px; border: 1px dashed #cbd5e1; border-radius: 14px; background: transparent; color: var(--sc-body); font-size: 14px; } .sc-addons-note > svg { flex: none; color: #4338ca; } .sc-addons-note p { margin: 0; flex: 1; } .sc-addons-note a { flex: none; font-weight: 600; color: #3730a3; text-decoration: underline; text-underline-offset: 3px; } :root[data-bs-theme="dark"] .sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_filter input { background: rgba(255, 255, 255, .05); border-color: #334155; } :root[data-bs-theme="dark"] .sc-page-clientareaproducts #tableServicesList td[data-label="Product/Service"]::before { background-color: rgba(99, 102, 241, .18); } :root[data-bs-theme="dark"] .sc-page-clientareaproducts #tableServicesList td[data-label="Product/Service"] strong { color: #f1f5f9; } :root[data-bs-theme="dark"] .sc-page-clientareaproducts #tableServicesList td[data-label="Product/Service"] a { color: #94a3b8; } :root[data-bs-theme="dark"] .sc-page-clientareaproducts #tableServicesList .ph-row-action { background: rgba(99, 102, 241, .16); border-color: rgba(129, 140, 248, .4); color: #c7d2fe; } :root[data-bs-theme="dark"] .sidebar .card-sidebar a.list-group-item .badge { background: rgba(255, 255, 255, .08); color: #cbd5e1; } :root[data-bs-theme="dark"] .sidebar .card-sidebar a.list-group-item.active .badge { background: #6366f1; color: #fff; } :root[data-bs-theme="dark"] .sc-addons-note { border-color: #475569; } :root[data-bs-theme="dark"] .sc-addons-note a, :root[data-bs-theme="dark"] .sc-addons-note > svg { color: #a5b4fc; } @media (max-width: 767.98px) { .sc-page-clientareaproducts #tableServicesList_wrapper { grid-template-columns: minmax(0, 1fr); grid-template-areas: "filter" "length" "table" "info" "paginate"; } .sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_paginate { justify-self: start; } .sc-addons-note { flex-wrap: wrap; } } .sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_filter label { position: relative; display: block; margin: 0; } .sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_filter label::before { content: ""; position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); background: #94a3b8; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; } .sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_filter input { background-image: none !important; } .sc-page-clientareaproducts #tableServicesList td.ssl-info { width: 56px; padding-left: 16px; padding-right: 0; } .sc-page-clientareaproducts #tableServicesList td[data-label="Product/Service"] a { word-break: normal; overflow-wrap: anywhere; } @media (min-width: 992px) { .sc-page-clientareaproducts #tableServicesList td[data-label="Product/Service"] { min-width: 320px; } } :root[data-bs-theme="dark"] .sidebar .card-sidebar .list-group-item.ticket-details-children { color: #f1f5f9 !important; } :root[data-bs-theme="dark"] .sidebar .card-sidebar .ticket-cc-email .delete-cc-email i, :root[data-bs-theme="dark"] .sidebar .card-sidebar .ticket-cc-email .delete-cc-email { color: #fca5a5; } .md-editor { border: 1px solid var(--sc-line); border-radius: 12px; background: #fff; overflow: hidden; box-shadow: none; } .md-editor:focus-within { border-color: var(--sc-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); } .md-editor > .md-header { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 4px; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--sc-line); background: #f8fafc; } .md-editor > .md-header .btn-group { display: inline-flex; align-items: center; gap: 2px; margin: 0 6px 0 0; padding-right: 8px; border-right: 1px solid var(--sc-line); } .md-editor > .md-header .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 36px; min-height: 36px; padding: 0 8px; border: 0 !important; border-radius: 8px !important; background: transparent; color: #475569; box-shadow: none !important; font-size: 14px; } .md-editor > .md-header .btn:hover, .md-editor > .md-header .btn:focus-visible { background: #e2e8f0; color: var(--sc-ink); } .md-editor > .md-header .btn[data-handler="bootstrap-markdown-cmdPreview"] { padding: 0 12px; font-weight: 600; color: var(--sc-blue); } .md-editor > .md-header .btn[data-handler="bootstrap-markdown-cmdPreview"]:hover { background: #dbeafe; } .md-editor > textarea.markdown-editor, .md-editor > textarea { display: block; width: 100%; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #fff; padding: 16px 18px; font-size: 15px; line-height: 1.6; resize: vertical; } .md-editor > .md-footer { padding: 8px 14px; border: 0; border-top: 1px solid var(--sc-line); background: #f8fafc; font-size: 12px; color: #64748b; } .md-editor .md-fullscreen-controls a { color: #64748b; } :root[data-bs-theme="dark"] .md-editor { background: rgba(255, 255, 255, .03); border-color: #334155; } :root[data-bs-theme="dark"] .md-editor > .md-header, :root[data-bs-theme="dark"] .md-editor > .md-footer { background: rgba(255, 255, 255, .04); border-color: #334155; } :root[data-bs-theme="dark"] .md-editor > .md-header .btn { color: #cbd5e1; } :root[data-bs-theme="dark"] .md-editor > .md-header .btn:hover, :root[data-bs-theme="dark"] .md-editor > .md-header .btn.active { background: rgba(255, 255, 255, .1); color: #f1f5f9; } :root[data-bs-theme="dark"] .md-editor > textarea { background: transparent; color: #f1f5f9; } :root[data-bs-theme="dark"] .md-editor > .md-header .btn-group { border-right-color: #334155; } .md-editor > .md-header .btn:not(:hover):not(:focus-visible):not(.active) { background-color: transparent !important; } .md-editor > textarea.markdown-editor, .md-editor > textarea { font-family: inherit !important; } .attachment-group { display: flex; align-items: stretch; gap: 12px; flex-wrap: nowrap; } .attachment-group > .custom-file { flex: 1 1 auto; min-width: 0; } .attachment-group .custom-file-label { height: 48px; overflow: hidden; border-radius: 10px !important; } .attachment-group .custom-file-label::after { height: 100%; border-radius: 0 9px 9px 0; display: flex; align-items: center; } .attachment-group > .input-group-append { flex: none; margin-left: 0; } .attachment-group .btn { min-height: 48px; border-radius: 10px !important; } @media (max-width: 575.98px) { .attachment-group { flex-wrap: wrap; } .attachment-group > .input-group-append { width: 100%; } .attachment-group > .input-group-append .btn { width: 100%; } } .sc-article { border: 1px solid var(--sc-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .04); } .sc-article > .card-body { padding: 32px 36px 36px; } .sc-article-title { margin: 0 0 10px; font-size: clamp(26px, 1.4vw + 18px, 34px); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; color: var(--sc-ink); } .sc-article-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 22px; padding: 0 0 20px; border-bottom: 1px solid var(--sc-line); } .sc-article-meta li { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 12px; border: 1px solid var(--sc-line); border-radius: 999px; background: #f8fafc; font-size: 13px; font-weight: 500; color: #64748b !important; } .sc-article-meta svg { flex: none; color: #94a3b8; } .sc-article-body { max-width: 74ch; font-size: 16px; line-height: 1.8; color: var(--sc-body); } .sc-article-body > * + * { margin-top: 1.1em; } .sc-article-body p { margin: 0; } .sc-article-body a { color: var(--sc-blue); text-decoration: underline; text-underline-offset: 3px; } .sc-article-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; } .sc-article-actions .sc-read-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--sc-line); border-radius: 10px; background: #fff; color: var(--sc-ink); font-size: 14px; font-weight: 600; text-decoration: none; float: none !important; transition: border-color .15s ease, color .15s ease, background-color .15s ease; } .sc-article-actions .sc-read-more:hover, .sc-article-actions .sc-read-more:focus-visible { border-color: #93c5fd; background: #f8fbff; color: var(--sc-blue); } :root[data-bs-theme="dark"] .sc-article { background: rgba(255, 255, 255, .04); border-color: #334155; box-shadow: none; } :root[data-bs-theme="dark"] .sc-article-meta { border-bottom-color: #334155; } :root[data-bs-theme="dark"] .sc-article-meta li { background: rgba(255, 255, 255, .05); border-color: #334155; color: #94a3b8 !important; } :root[data-bs-theme="dark"] .sc-article-title, :root[data-bs-theme="dark"] .sc-article-body h2, :root[data-bs-theme="dark"] .sc-article-body h3, :root[data-bs-theme="dark"] .sc-article-body h4 { color: #f1f5f9; } :root[data-bs-theme="dark"] .sc-article-body { color: #cbd5e1; } :root[data-bs-theme="dark"] .sc-article-body a { color: #93c5fd; } :root[data-bs-theme="dark"] .sc-article-body pre { background: rgba(255, 255, 255, .05); border-color: #334155; } :root[data-bs-theme="dark"] .sc-article-actions .sc-read-more { background: transparent; border-color: #334155; color: #e2e8f0; } @media (max-width: 575.98px) { .sc-article > .card-body { padding: 22px 18px 24px; } .sc-article-actions { flex-wrap: wrap; } } .sc-article .sc-article-title { margin: 0 0 14px !important; } .sc-article ul.sc-article-meta { margin: 0 0 24px !important; padding: 0 0 22px !important; } .sc-article .sc-article-body p + p, .sc-article .sc-article-body * + p { margin-top: 1.1em; } .sc-article .sc-article-body p { line-height: 1.8; } .sc-article ul.sc-article-meta > li { min-height: 30px; padding: 4px 12px !important; line-height: 1.4; margin: 0 !important; overflow: visible; } .sc-band-badge.is-warn { border-color: rgba(253, 186, 116, .55); background: rgba(249, 115, 22, .18); color: #fed7aa; } [menuitemname="My Invoices Summary"] .card-header .card-title::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, .18); } [menuitemname="My Invoices Summary"] .card-body { padding-top: 14px !important; font-size: 14px; line-height: 1.6; color: #64748b; } .sc-due-amt { display: block; margin: 6px 0 0; font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--sc-ink); font-variant-numeric: tabular-nums; } [menuitemname="My Invoices Summary"] .card-footer { } [menuitemname="My Invoices Summary"] .card-footer .btn { width: 100%; min-height: 48px; border: 1px solid #c7d2fe; border-radius: 12px; background: #eef2ff; color: #3730a3; font-weight: 600; } [menuitemname="My Invoices Summary"] .card-footer .btn:hover { background: #3730a3; border-color: #3730a3; color: #fff; } [menuitemname="My Invoices Status Filter"] a.list-group-item[menuitemname="Unpaid"]:hover { background: #fffbeb !important; color: #92400e !important; } .sc-page-clientareainvoices #tableInvoicesList td.sc-overdue { color: #b45309; font-weight: 600; } .sc-page-clientareainvoices #tableInvoicesList tbody td:last-child, .sc-page-clientareainvoices #tableInvoicesList td[data-label="Status"] { white-space: nowrap; } .sc-page-clientareainvoices #tableInvoicesList .ph-row-action { border: 1px solid #c7d2fe; background: #eef2ff; color: #3730a3; border-radius: 8px; font-weight: 600; } .sc-page-clientareainvoices #tableInvoicesList .ph-row-action:hover { background: #3730a3; border-color: #3730a3; color: #fff; } .sc-page-clientareainvoices #tableInvoicesList .ph-row-action.sc-pay { border-color: #4338ca; background: #4338ca; color: #fff; } .sc-page-clientareainvoices #tableInvoicesList .ph-row-action.sc-pay:hover { background: #3730a3; border-color: #3730a3; } .sc-page-clientareainvoices #tableInvoicesList tbody tr:hover { background: #f8faff; } .sc-page-clientareainvoices #tableInvoicesList_wrapper { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); grid-template-areas: "info filter" "table table" "length paginate"; gap: 14px 16px; align-items: center; } .sc-page-clientareainvoices #tableInvoicesList_wrapper > .listtable { display: contents; } .sc-page-clientareainvoices #tableInvoicesList_wrapper .dataTables_filter { grid-area: filter; float: none; margin: 0; } .sc-page-clientareainvoices #tableInvoicesList_wrapper .dataTables_filter label { position: relative; display: block; margin: 0; } .sc-page-clientareainvoices #tableInvoicesList_wrapper .dataTables_filter input { width: 100%; min-height: 46px; padding-left: 44px; border: 1px solid var(--sc-line); border-radius: 12px; background-image: none !important; box-shadow: none; } .sc-page-clientareainvoices #tableInvoicesList_wrapper .dataTables_filter label::before { content: ""; position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); background: #94a3b8; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat; pointer-events: none; } .sc-page-clientareainvoices #tableInvoicesList_wrapper .dataTables_info { grid-area: info; margin: 0; padding: 0; font-size: 14px; color: #64748b; } .sc-page-clientareainvoices #tableInvoicesList_wrapper > .listtable > table { grid-area: table; width: 100%; } .sc-page-clientareainvoices #tableInvoicesList_wrapper .dataTables_length { grid-area: length; margin: 0; } .sc-page-clientareainvoices #tableInvoicesList_wrapper .dataTables_paginate { grid-area: paginate; margin: 0; justify-self: end; } :root[data-bs-theme="dark"] .sc-due-amt { color: #f1f5f9; } :root[data-bs-theme="dark"] [menuitemname="My Invoices Summary"] .card-body { color: #94a3b8; } :root[data-bs-theme="dark"] [menuitemname="My Invoices Summary"] .card-footer .btn, :root[data-bs-theme="dark"] [menuitemname="My Invoices Summary"] .card-body .btn { background: rgba(99, 102, 241, .16); border-color: rgba(129, 140, 248, .4); color: #c7d2fe; } :root[data-bs-theme="dark"] [menuitemname="My Invoices Status Filter"] a.list-group-item[menuitemname="Unpaid"].active { background: rgba(245, 158, 11, .14) !important; color: #fcd34d !important; } :root[data-bs-theme="dark"] .sc-page-clientareainvoices #tableInvoicesList td.sc-overdue { color: #fbbf24; } :root[data-bs-theme="dark"] .sc-page-clientareainvoices #tableInvoicesList .ph-row-action { background: rgba(99, 102, 241, .16); border-color: rgba(129, 140, 248, .4); color: #c7d2fe; } :root[data-bs-theme="dark"] .sc-page-clientareainvoices #tableInvoicesList .ph-row-action.sc-pay { background: #6366f1; border-color: #6366f1; color: #fff; } :root[data-bs-theme="dark"] .sc-page-clientareainvoices #tableInvoicesList tbody tr:hover { background: rgba(255, 255, 255, .04); } :root[data-bs-theme="dark"] .sc-page-clientareainvoices #tableInvoicesList_wrapper .dataTables_filter input { background: rgba(255, 255, 255, .05); border-color: #334155; } @media (max-width: 767.98px) { .sc-page-clientareainvoices #tableInvoicesList_wrapper { grid-template-columns: minmax(0, 1fr); grid-template-areas: "filter" "info" "table" "length" "paginate"; } .sc-page-clientareainvoices #tableInvoicesList_wrapper .dataTables_paginate { justify-self: start; } } .sc-page-clientareainvoices #tableInvoicesList tbody td:last-child { display: table-cell; } .sc-page-clientareainvoices #tableInvoicesList tbody td:last-child .label { vertical-align: middle; } .sc-page-clientareainvoices #tableInvoicesList tbody td:last-child .ph-row-action { vertical-align: middle; margin: 0 0 0 10px; min-height: 34px; padding: 0 14px; font-size: 13px; } .sc-page-clientareainvoices #tableInvoicesList tbody td { padding-top: 18px; padding-bottom: 18px; } @media (max-width: 767.98px) { .sc-page-clientareainvoices #tableInvoicesList tbody td:last-child .ph-row-action { margin: 8px 0 0; } } .client-home-cards .card { overflow: visible !important; } .client-home-cards .card > .card-header { border-radius: 12px 12px 0 0; } .client-home-cards .card > :last-child { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; } .client-home-cards .list-group-item { padding: 16px 22px !important; } .div-service-item { gap: 18px; } .div-service-item .div-service-buttons { gap: 12px; } .div-service-item .div-service-buttons .btn-group { align-items: stretch; } .div-service-item .div-service-buttons .btn-group > .btn { min-height: 44px; } .div-service-item .div-service-buttons .btn-group > .dropdown-toggle { min-width: 40px; border-radius: 0 10px 10px 0 !important; } .div-service-item .div-service-buttons .btn-group > .btn:not(.dropdown-toggle) { border-radius: 10px 0 0 10px; } .div-service-item .dropdown-menu { min-width: 220px; margin-top: 8px; padding: 6px; border: 1px solid var(--sc-line); border-radius: 12px; background: #fff; box-shadow: 0 16px 32px -12px rgba(15, 23, 42, .25); z-index: 1060; } .div-service-item .dropdown-menu .dropdown-item { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--sc-ink); cursor: pointer; white-space: nowrap; } .div-service-item .dropdown-menu .dropdown-item:hover { background: #eff6ff; color: var(--sc-blue); } :root[data-bs-theme="dark"] .div-service-item .dropdown-menu { background: #151a33; border-color: #334155; } :root[data-bs-theme="dark"] .div-service-item .dropdown-menu .dropdown-item { color: #e2e8f0; } :root[data-bs-theme="dark"] .div-service-item .dropdown-menu .dropdown-item:hover { background: rgba(59, 130, 246, .16); color: #bfdbfe; } :root { --ui-text: #172033; --ui-text-secondary: #475569; --ui-text-muted: #64748b; --ui-surface: #fff; --ui-surface-subtle: #f8fafc; --ui-page: #f6f8fc; --ui-border: #e2e8f0; --ui-border-strong: #cbd5e1; --ui-primary: #2563eb; --ui-primary-hover: #1d4ed8; --ui-primary-soft: #eff6ff; --ui-success: #15805e; --ui-success-hover: #116a4e; --ui-danger: #dc2626; --ui-danger-hover: #b91c1c; --ui-danger-soft: #fef2f2; --ui-warning: #a16207; --ui-warning-hover: #854d0e; --ui-warning-soft: #fffbeb; --ui-focus: rgba(37, 99, 235, .18); --ui-radius-control: 8px; --ui-radius-card: 12px; --ui-shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .035); --ui-shadow-raised: 0 12px 32px rgba(15, 23, 42, .10); --ui-control-height: 46px; --ui-transition: 180ms ease; } :root[data-bs-theme="dark"] { --ui-text: #f1f5f9; --ui-text-secondary: #cbd5e1; --ui-text-muted: #94a3b8; --ui-surface: #111c2f; --ui-surface-subtle: #17243a; --ui-page: #0b1220; --ui-border: #2b3b53; --ui-border-strong: #40536f; --ui-primary: #60a5fa; --ui-primary-hover: #3b82f6; --ui-primary-soft: #172f51; --ui-success: #34d399; --ui-success-hover: #10b981; --ui-danger: #f87171; --ui-danger-hover: #fca5a5; --ui-danger-soft: #3a1d25; --ui-focus: rgba(96, 165, 250, .22); --ui-shadow-card: none; } p, li, td, th, label, .form-control { overflow-wrap: anywhere; } .text-muted { color: var(--ui-text-muted) !important; } .sc-icon { display: inline-block; flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.18em; } .btn .sc-icon, a .sc-icon { margin-right: 7px; } .btn.close .sc-icon, .verification-banner-icon .sc-icon { margin: 0; } .sc-icon-spinner { animation: sc-ui-spin .8s linear infinite; } .form-group { margin-bottom: 20px; } .form-group > label:not(.field-icon), .control-label { margin-bottom: 7px; color: var(--ui-text); } .form-control, .custom-select, select.form-control { min-height: var(--ui-control-height); padding: 10px 13px; border: 1px solid var(--ui-border-strong); border-radius: var(--ui-radius-control); background-color: var(--ui-surface); color: var(--ui-text); box-shadow: none; transition: border-color var(--ui-transition), box-shadow var(--ui-transition), background-color var(--ui-transition); } .form-control::placeholder { color: var(--ui-text-muted); opacity: .85; } .form-control:hover:not(:disabled) { border-color: #94a3b8; } .form-control:focus, .custom-select:focus { border-color: var(--ui-primary); outline: 0; box-shadow: 0 0 0 3px var(--ui-focus); } .form-control:disabled { cursor: not-allowed; border-color: var(--ui-border); background: var(--ui-surface-subtle); color: var(--ui-text-muted); opacity: .72; } .field-error-msg { margin-top: 6px; color: var(--ui-danger); } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 9px 16px; border: 1px solid transparent; border-radius: var(--ui-radius-control) !important; white-space: normal; box-shadow: none; transition: color var(--ui-transition), background-color var(--ui-transition), border-color var(--ui-transition), box-shadow var(--ui-transition), opacity var(--ui-transition); } .btn:hover, .btn:focus { transform: none; text-decoration: none; } .btn-primary { border-color: var(--ui-primary); background: var(--ui-primary); background-image: none; color: #fff; } .btn-primary:hover, .btn-primary:focus { border-color: var(--ui-primary-hover); background: var(--ui-primary-hover); color: #fff; } .btn-success { border-color: var(--ui-success); background: var(--ui-success); background-image: none; color: #fff; } .btn-success:hover, .btn-success:focus { border-color: var(--ui-success-hover); background: var(--ui-success-hover); color: #fff; } .btn-default, .btn-outline-primary, .btn-info { border-color: var(--ui-border-strong); background: var(--ui-surface); background-image: none; color: var(--ui-text-secondary); } .btn-default:hover, .btn-outline-primary:hover, .btn-info:hover { border-color: #94a3b8; background: var(--ui-surface-subtle); color: var(--ui-text); } .btn-danger { border-color: var(--ui-danger); background: var(--ui-danger); background-image: none; color: #fff; } .btn-danger:hover { border-color: var(--ui-danger-hover); background: var(--ui-danger-hover); color: #fff; } .btn-link { min-height: 44px; padding-inline: 8px; color: var(--ui-primary); background: transparent; } .btn-link:hover { color: var(--ui-primary-hover); } .btn-sm { min-height: 40px; padding: 7px 13px; } .btn-lg { min-height: 50px; padding: 12px 20px; } .btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--ui-primary) !important; outline-offset: 3px; } .btn:disabled, .btn.disabled { cursor: not-allowed; pointer-events: none; opacity: .5; box-shadow: none; } .card, .panel, .modal-content, .dropdown-menu { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-card); background: var(--ui-surface); box-shadow: var(--ui-shadow-card); } .card-header, .panel-heading, .modal-header { padding: 16px 20px; border-bottom: 1px solid var(--ui-border); background: var(--ui-surface); color: var(--ui-text); } .card-body, .panel-body { padding: 20px; } .list-group-item { min-height: 44px; border-color: var(--ui-border); line-height: 1.45; } .table-responsive { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table { color: var(--ui-text-secondary); } .table th { border-color: var(--ui-border); background: var(--ui-surface-subtle); color: var(--ui-text-muted); } .table td { border-color: var(--ui-border); vertical-align: middle; } .dropdown-menu { padding: 8px; } .dropdown-item { min-height: 40px; padding: 9px 12px; border-radius: 7px; } .dropdown-item:hover, .dropdown-item:focus { background: var(--ui-primary-soft); color: var(--ui-text); } .alert { border-width: 1px; border-radius: var(--ui-radius-control); box-shadow: none; } .ph-reset-body .input-group { min-height: var(--ui-control-height); border-color: var(--ui-border-strong); border-radius: var(--ui-radius-control); } .ph-reset-body .input-group-text { color: var(--ui-text-muted); } .ph-reset-body .btn-primary { min-height: var(--ui-control-height); border-radius: var(--ui-radius-control) !important; } .ph-reset-body .sc-form-actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 0; } .ph-reset-body .sc-form-actions .btn { width: 100%; margin: 0; } .ph-reset-links a { display: inline-flex; align-items: center; min-height: 44px; } .ph-reset-links a .sc-icon { margin-right: 6px; } aside.verification-banner.email-verification { border-color: var(--ui-border) !important; border-radius: var(--ui-radius-card) !important; background: var(--ui-surface) !important; color: var(--ui-text-secondary) !important; } aside.verification-banner.email-verification .verification-banner-inner { padding: 12px 16px !important; } aside.verification-banner.email-verification .verification-banner-icon { width: 36px; height: 36px; border-radius: var(--ui-radius-control); background: var(--ui-primary-soft); color: var(--ui-primary); } aside.verification-banner.email-verification .btn.btn-action { border-color: var(--ui-border-strong) !important; border-radius: var(--ui-radius-control) !important; background: var(--ui-surface) !important; color: var(--ui-primary); } :root[data-bs-theme="dark"] aside.verification-banner.email-verification { background: var(--ui-surface) !important; border-color: var(--ui-border) !important; } :root[data-bs-theme="dark"] aside.verification-banner.email-verification .btn.btn-action { background: var(--ui-surface-subtle) !important; border-color: var(--ui-border-strong) !important; } @media (max-width: 575.98px) { .card-header, .panel-heading, .modal-header, .card-body, .panel-body { padding-inline: 16px; } .btn:not(.btn-icon):not(.close) { max-width: 100%; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } .sc-page-clientareaproducts .primary-content, .sc-page-clientareaproducts .table-container, .sc-page-clientareaproducts #tableServicesList_wrapper, .sc-page-clientareaproducts #tableServicesList_wrapper > .listtable, .sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_filter, .sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_filter label { min-width: 0; max-width: 100%; } .sc-page-clientareaproducts .table-container { width: 100%; overflow: hidden; } .sc-page-clientareaproducts #tableServicesList_wrapper { width: 100%; overflow: visible; grid-template-columns: minmax(0, 1fr) max-content; } .sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_filter input { display: block; width: 100% !important; min-width: 0; margin: 0; box-sizing: border-box; } .sc-page-clientareaproducts #tableServicesList { width: 100% !important; max-width: 100%; table-layout: auto; } .sc-page-clientareaproducts #tableServicesList th, .sc-page-clientareaproducts #tableServicesList td { min-width: 0 !important; } .sc-page-clientareaproducts #tableServicesList th:first-child, .sc-page-clientareaproducts #tableServicesList td:first-child { width: 52px !important; max-width: 52px; } .sc-page-clientareaproducts #tableServicesList th:nth-child(2), .sc-page-clientareaproducts #tableServicesList td:nth-child(2) { width: auto !important; } .sc-page-clientareaproducts #tableServicesList th:nth-child(3), .sc-page-clientareaproducts #tableServicesList td:nth-child(3) { width: 18%; } .sc-page-clientareaproducts #tableServicesList th:nth-child(4), .sc-page-clientareaproducts #tableServicesList td:nth-child(4) { width: 18%; } .sc-page-clientareaproducts #tableServicesList th:nth-child(5), .sc-page-clientareaproducts #tableServicesList td:nth-child(5) { width: 24%; } .sc-page-clientareaproducts #tableServicesList td[data-label="Product/Service"] { min-width: 0 !important; overflow-wrap: anywhere; } .sc-page-clientareaproducts #tableServicesList td:last-child { white-space: normal; } .sc-page-clientareaproducts #tableServicesList td:last-child .ph-row-action { margin-left: 10px; vertical-align: middle; } @media (max-width: 991.98px) and (min-width: 576px) { .sc-page-clientareaproducts #tableServicesList_wrapper { display: block; } .sc-page-clientareaproducts #tableServicesList_wrapper > .listtable { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_filter { margin-bottom: 12px; } .sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_length, .sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_info, .sc-page-clientareaproducts #tableServicesList_wrapper .dataTables_paginate { margin-top: 12px; } .sc-page-clientareaproducts #tableServicesList { min-width: 720px; } } @media (max-width: 575.98px) { .sc-page-clientareaproducts .table-container { overflow: visible; } .sc-page-clientareaproducts #tableServicesList th:first-child, .sc-page-clientareaproducts #tableServicesList td:first-child { width: auto !important; } .sc-page-clientareaproducts #tableServicesList td:last-child .ph-row-action { margin: 8px 0 0; } } .div-service-item .div-service-buttons .sc-service-menu-toggle { flex: 0 0 40px; width: 40px; min-width: 40px !important; height: 44px; min-height: 44px !important; padding: 0 !important; border: 1px solid var(--ui-border-strong) !important; border-radius: 0 8px 8px 0 !important; background: var(--ui-surface) !important; color: var(--ui-text-muted) !important; box-shadow: none !important; } .div-service-item .div-service-buttons .sc-service-menu-toggle::after { display: none !important; } .div-service-item .div-service-buttons .sc-service-menu-toggle:hover, .div-service-item .div-service-buttons .sc-service-menu-toggle:focus-visible { border-color: var(--ui-primary) !important; background: var(--ui-primary-soft) !important; color: var(--ui-primary) !important; } .div-service-item .div-service-buttons .sc-service-menu-icon { display: block; width: 16px; height: 16px; margin: auto; transition: transform var(--ui-transition); } .div-service-item .div-service-buttons .btn-group-primary > .sc-service-menu-toggle { border-radius: 8px !important; } .div-service-item .div-service-buttons .btn-group-secondary > .btn-custom-action { border-radius: 8px 0 0 8px !important; } :root[data-bs-theme="dark"] .div-service-item .div-service-buttons .sc-service-menu-toggle { border-color: var(--ui-border-strong) !important; color: var(--ui-text-muted) !important; } [menuitemname="My Invoices Summary"] .card-header .card-title::before { display: none; } [menuitemname="My Invoices Summary"] .card-body { padding-top: 6px !important; } .sc-due-amt { font-size: 30px; margin-top: 4px; } [menuitemname="My Invoices Summary"] .card-footer { margin-top: 4px; } [menuitemname="My Invoices Summary"] .card-footer .btn { min-height: 44px; border: 0; background: #4338ca; color: #fff; } [menuitemname="My Invoices Summary"] .card-footer .btn:hover { background: #3730a3; color: #fff; } .sc-page-clientareainvoices #tableInvoicesList_wrapper .listtable { background: transparent; } .sc-page-clientareainvoices #tableInvoicesList { border: 0; background: transparent; } .sc-page-clientareainvoices #tableInvoicesList thead th { padding: 10px 14px; border: 0 !important; border-bottom: 1px solid var(--sc-line) !important; background: transparent !important; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; } .sc-page-clientareainvoices #tableInvoicesList thead th.sorting::after, .sc-page-clientareainvoices #tableInvoicesList thead th.sorting::before { opacity: .25; } .sc-page-clientareainvoices #tableInvoicesList tbody tr { background: transparent; } .sc-page-clientareainvoices #tableInvoicesList tbody td { padding: 16px 14px; vertical-align: middle; border-top: 0; border-bottom: 1px solid var(--sc-line-soft, #eef2f7); font-size: 15px; } .sc-page-clientareainvoices #tableInvoicesList tbody tr:last-child td { border-bottom: 0; } .sc-page-clientareainvoices #tableInvoicesList td[data-label="Total"], .sc-page-clientareainvoices #tableInvoicesList td:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; } .sc-page-clientareainvoices #tableInvoicesList thead th:nth-child(4) { text-align: right; } .sc-page-clientareainvoices #tableInvoicesList tbody td:last-child { display: flex; align-items: center; justify-content: flex-start; gap: 10px; } .sc-page-clientareainvoices #tableInvoicesList tbody td:last-child .label { margin: 0; } .sc-page-clientareainvoices #tableInvoicesList tbody td:last-child .ph-row-action { margin: 0; } .sc-page-clientareainvoices #tableInvoicesList .ph-row-action { min-height: 32px; padding: 0 12px; font-size: 13px; } .sc-page-clientareainvoices #tableInvoicesList .ph-row-action:not(.sc-pay) { border-color: transparent; background: transparent; color: #4338ca; text-decoration: underline; text-underline-offset: 3px; padding: 0 6px; } .sc-page-clientareainvoices #tableInvoicesList .ph-row-action:not(.sc-pay):hover { background: #eef2ff; color: #3730a3; } .sc-page-clientareainvoices #tableInvoicesList .ph-row-action.sc-pay { border-color: #c7d2fe; background: #eef2ff; color: #3730a3; } .sc-page-clientareainvoices #tableInvoicesList .ph-row-action.sc-pay:hover { background: #4338ca; border-color: #4338ca; color: #fff; } .sc-page-clientareainvoices #tableInvoicesList tbody tr:hover { background: #f8faff; } :root[data-bs-theme="dark"] .sc-page-clientareainvoices #tableInvoicesList tbody td { border-bottom-color: #334155; } :root[data-bs-theme="dark"] .sc-page-clientareainvoices #tableInvoicesList thead th { border-bottom-color: #334155 !important; } :root[data-bs-theme="dark"] .sc-page-clientareainvoices #tableInvoicesList .ph-row-action.sc-pay { background: rgba(99, 102, 241, .16); border-color: rgba(129, 140, 248, .4); color: #c7d2fe; } :root[data-bs-theme="dark"] .sc-page-clientareainvoices #tableInvoicesList .ph-row-action.sc-pay:hover { background: #6366f1; color: #fff; } :root[data-bs-theme="dark"] .sc-page-clientareainvoices #tableInvoicesList .ph-row-action:not(.sc-pay) { color: #a5b4fc; background: transparent; } :root[data-bs-theme="dark"] [menuitemname="My Invoices Summary"] .card-footer .btn, :root[data-bs-theme="dark"] [menuitemname="My Invoices Summary"] .card-body .btn { background: #6366f1; color: #fff; border: 0; } @media (max-width: 767.98px) { .sc-page-clientareainvoices #tableInvoicesList tbody td:last-child { justify-content: flex-start; } } [menuitemname="My Invoices Summary"] .btn, [menuitemname="My Invoices Summary"] a.btn { width: 100%; min-height: 44px; border: 0 !important; border-radius: 10px; background: #4338ca !important; color: #fff !important; font-weight: 600; } [menuitemname="My Invoices Summary"] .btn:hover { background: #3730a3 !important; } .sc-page-clientareainvoices #tableInvoicesList tbody td:last-child .ph-row-action:not(.sc-pay) { align-self: center; } .sc-page-clientareainvoices #tableInvoicesList { table-layout: fixed; width: 100%; } .sc-page-clientareainvoices #tableInvoicesList tbody td:last-child { display: table-cell !important; } .sc-page-clientareainvoices #tableInvoicesList th:nth-child(1), .sc-page-clientareainvoices #tableInvoicesList td:nth-child(1) { width: 11%; } .sc-page-clientareainvoices #tableInvoicesList th:nth-child(2), .sc-page-clientareainvoices #tableInvoicesList td:nth-child(2), .sc-page-clientareainvoices #tableInvoicesList th:nth-child(3), .sc-page-clientareainvoices #tableInvoicesList td:nth-child(3) { width: 17%; } .sc-page-clientareainvoices #tableInvoicesList th:nth-child(4), .sc-page-clientareainvoices #tableInvoicesList td:nth-child(4) { width: 20%; text-align: right; padding-right: 36px; } .sc-page-clientareainvoices #tableInvoicesList th:nth-child(5), .sc-page-clientareainvoices #tableInvoicesList td:nth-child(5) { width: 35%; text-align: left; padding-left: 28px; } .sc-status-cell { display: flex; align-items: center; gap: 12px; min-height: 36px; } .sc-status-cell .label, .sc-status-cell .ph-row-action { margin: 0 !important; } .sc-page-clientareainvoices #tableInvoicesList thead th { white-space: nowrap; position: relative; } .sc-page-clientareainvoices #tableInvoicesList thead th.sorting, .sc-page-clientareainvoices #tableInvoicesList thead th.sorting_asc, .sc-page-clientareainvoices #tableInvoicesList thead th.sorting_desc { padding-right: 28px; } .sc-page-clientareainvoices #tableInvoicesList thead th:nth-child(4) { padding-right: 52px; } @media (max-width: 767.98px) { .sc-page-clientareainvoices #tableInvoicesList { table-layout: auto; } .sc-page-clientareainvoices #tableInvoicesList td:nth-child(n) { width: auto; padding-left: 0; padding-right: 0; text-align: left; } .sc-status-cell { flex-wrap: wrap; } } :root[data-bs-theme="dark"] .social-signin-btns > div:has(iframe), :root[data-bs-theme="dark"] .social-signin-btns .g_id_signin { color-scheme: light; } .ph-login.ph-register .ph-login-center.ph-register-center { max-width: 760px; } .ph-register #registration .card-body:has(> input[name="marketingoptin"], > .bootstrap-switch) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; padding: 16px 20px !important; border: 1px solid var(--sc-line, #e3e8f4); border-radius: 12px; background: var(--sc-card, #fff); } .ph-register #registration .card-body:has(> input[name="marketingoptin"], > .bootstrap-switch) > h3 { grid-column: 1 / -1; margin-bottom: 8px; } .ph-register #registration .card-body:has(> input[name="marketingoptin"], > .bootstrap-switch) > p { grid-column: 1; margin: 0; font-size: 14px; line-height: 1.55; } .ph-register #registration .card-body:has(> input[name="marketingoptin"], > .bootstrap-switch) > .bootstrap-switch { grid-column: 2; grid-row: 2; margin: 0; } .ph-register #registration label.form-check { align-items: center; gap: 12px; margin: 4px 0 20px; padding: 14px 16px; border: 1px solid var(--sc-line, #e3e8f4); border-radius: 12px; background: var(--sc-card, #fff); font-size: 14.5px; cursor: pointer; } .ph-register #registration label.form-check:hover { border-color: var(--sc-blue, #2563eb); } .ph-register #registration label.form-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 2px solid #94a3b8; border-radius: 6px; background: #fff center / 14px no-repeat; cursor: pointer; transition: background-color .15s, border-color .15s; } .ph-register #registration label.form-check input[type="checkbox"]:focus-visible { outline: 3px solid rgba(37, 99, 235, .35) !important; outline-offset: 2px; } @media (max-width: 575px) { .ph-register #registration .card-body:has(> input[name="marketingoptin"], > .bootstrap-switch) { grid-template-columns: 1fr; row-gap: 12px; } .ph-register #registration .card-body:has(> input[name="marketingoptin"], > .bootstrap-switch) > .bootstrap-switch { grid-column: 1; grid-row: 3; } } :root[data-bs-theme="dark"] .ph-register #registration label.form-check, :root[data-bs-theme="dark"] .ph-register #registration .card-body:has(> .bootstrap-switch) { background: #12132b; border-color: #23264f; } :root[data-bs-theme="dark"] .ph-register #registration label.form-check input[type="checkbox"]:not(:checked) { background-color: #12132b; border-color: #6b7099; } :root[data-bs-theme="dark"] .ph-register #registration label.form-check:has(input:checked) { background: #1a1d4a; } .ph-login.ph-register { grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); } .ph-register #registration #default-captcha-domainchecker { margin-left: 0; margin-right: auto; } @media (max-width: 991px) { .ph-login.ph-register { grid-template-columns: minmax(0, 1fr); } } .sc-strip { position: relative; } .sc-strip-btn { position: absolute; top: 42%; z-index: 3; display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--sc-line); border-radius: 50%; background: var(--sc-card); color: var(--sc-ink); box-shadow: 0 8px 20px -6px rgba(37, 38, 94, .35); cursor: pointer; transition: background-color .15s ease, color .15s ease, opacity .2s ease; } .sc-strip-btn:hover, .sc-strip-btn:focus-visible { background: var(--sc-blue); border-color: var(--sc-blue); color: #fff; } .sc-strip-btn svg { width: 20px; height: 20px; } .sc-strip-btn.is-prev { left: -14px; } .sc-strip-btn.is-next { right: -14px; } .sc-strip-btn[disabled] { opacity: 0; pointer-events: none; } @media (min-width: 768px) { .sc-strip.has-overflow .sc-strip-btn { display: inline-flex; } .sc-strip.has-overflow .sc-dots { display: flex; } } @media (max-width: 767.98px) { .sc-strip-btn, .sc-strip::after { display: none !important; } } .sc-strip-btn { top: calc(var(--sc-strip-h, 100%) / 2); transform: translateY(-50%); width: 40px; height: 40px; } .sc-strip-btn.is-prev { left: -20px; } .sc-strip-btn.is-next { right: -20px; } .sc-strip-btn[disabled] { visibility: hidden; } .sc-strip:not(.has-overflow) .sc-strip-btn, .sc-strip:not(.has-overflow) .sc-dots { display: none !important; } @media (max-width: 1279px) { .sc-strip-btn.is-prev { left: -8px; } .sc-strip-btn.is-next { right: -8px; } } .invoice-container .transactions-container { padding: 0 !important; } .invoice-container .transactions-container table { width: 100%; margin: 0; table-layout: fixed; } .invoice-container .transactions-container thead td, .invoice-container .transactions-container tbody td { padding: 14px 22px; } .invoice-container .transactions-container :is(thead, tbody) td:nth-child(1) { width: 26%; text-align: left !important; } .invoice-container .transactions-container :is(thead, tbody) td:nth-child(2) { width: 22%; text-align: left !important; } .invoice-container .transactions-container :is(thead, tbody) td:nth-child(3) { width: 28%; text-align: left !important; } .invoice-container .transactions-container :is(thead, tbody) td:nth-child(4) { width: 24%; text-align: right !important; } .invoice-container .transactions-container tbody td[colspan] { text-align: center !important; width: auto; color: var(--ph-muted); } .invoice-container .transactions-container tbody tr:last-child td.total-row { text-align: right !important; } .invoice-container .btn-group { display: flex; justify-content: flex-end; gap: 10px; } .invoice-container .btn-group .btn:first-child, .invoice-container .btn-group .btn:last-child { margin: 0; border-radius: 10px; } /* ===================================================================================================================== HOME: support band "Experts are always here to help." + quick-link dock (Announcements, Network Status, Knowledgebase, Downloads, Submit a Ticket). Slow aurora + dot grid behind the figures, counters that count up once, and a frosted-glass dock that floats over the bottom edge of the band. Motion is off for prefers-reduced-motion. ===================================================================================================================== */ .sc-support { padding: 32px 0 72px; } .sc-support-card { position: relative; isolation: isolate; overflow: hidden; padding: 48px 48px 112px; border-radius: 20px; background: var(--sc-gradient-support); box-shadow: 0 30px 60px -30px rgba(42, 18, 142, .55); } .sc-support-card > *:not(.sc-aurora) { position: relative; z-index: 1; } .sc-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit; background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .35) 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .35) 70%, transparent 100%); } .sc-aurora::before, .sc-aurora::after { content: ""; position: absolute; width: 56%; aspect-ratio: 1; border-radius: 50%; filter: blur(60px); opacity: .55; } .sc-aurora::before { top: -30%; left: -10%; background: radial-gradient(circle, #6d5dfc 0%, transparent 65%); animation: scAuroraA 18s ease-in-out infinite alternate; } .sc-aurora::after { right: -12%; bottom: -45%; background: radial-gradient(circle, #22d3ee 0%, transparent 65%); opacity: .35; animation: scAuroraB 22s ease-in-out infinite alternate; } @keyframes scAuroraA { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(18%, 12%, 0) scale(1.18); } } @keyframes scAuroraB { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-16%, -10%, 0) scale(.92); } } /* stat columns: glass cells instead of bare columns */ .sc-support-grid { gap: 20px; } .sc-support-col { padding: 22px 24px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px; background: linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .25s ease, border-color .25s ease, background-color .25s ease; } .sc-support-col:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .34); } .sc-support-num { font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff 30%, #c7d2fe); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .sc-support-label i { box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: scPulse 2.4s ease-out infinite; } @keyframes scPulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); } } .sc-support-chat { box-shadow: 0 10px 24px -10px rgba(109, 59, 224, .9); transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; } .sc-support-chat:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(124, 76, 240, 1); } .sc-support-foot { margin-top: 28px; } /* the dock */ .sc-dock { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: -64px 32px 0; } .sc-dock-item { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 148px; padding: 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .7); border-radius: 18px; color: var(--sc-ink); text-decoration: none; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: 0 18px 40px -18px rgba(37, 38, 94, .45), 0 1px 0 rgba(255, 255, 255, .8) inset; transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, border-color .3s ease; } .sc-dock-item::before { content: ""; position: absolute; inset: 0; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(99, 102, 241, .16), transparent 60%); opacity: 0; transition: opacity .3s ease; pointer-events: none; } .sc-dock-item:hover, .sc-dock-item:focus-visible { transform: translateY(-8px); border-color: #c7d2fe; box-shadow: 0 28px 50px -18px rgba(79, 70, 229, .5); color: var(--sc-ink); text-decoration: none; } .sc-dock-item:hover::before, .sc-dock-item:focus-visible::before { opacity: 1; } .sc-dock-ico { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #4f46e5, #2563eb); box-shadow: 0 10px 20px -8px rgba(37, 99, 235, .7); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); } .sc-dock-ico svg { width: 24px; height: 24px; } .sc-dock-announcement .sc-dock-ico { background: linear-gradient(135deg, #0ea5e9, #2563eb); } .sc-dock-status .sc-dock-ico { background: linear-gradient(135deg, #10b981, #0ea5e9); } .sc-dock-kb .sc-dock-ico { background: linear-gradient(135deg, #f59e0b, #f97316); } .sc-dock-download .sc-dock-ico { background: linear-gradient(135deg, #8b5cf6, #6366f1); } .sc-dock-ticket .sc-dock-ico { background: linear-gradient(135deg, #ec4899, #8b5cf6); } .sc-dock-item:hover .sc-dock-ico { transform: rotate(-8deg) scale(1.1); } .sc-dock-text strong { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; } .sc-dock-text small { display: block; margin-top: 3px; font-size: 13px; color: var(--sc-muted); } .sc-dock-go { position: absolute; top: 18px; right: 18px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sc-ink); color: #fff; opacity: 0; transform: translate(-6px, 6px) scale(.8); transition: opacity .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1); } .sc-dock-go svg { width: 14px; height: 14px; } .sc-dock-item:hover .sc-dock-go, .sc-dock-item:focus-visible .sc-dock-go { opacity: 1; transform: none; } :root[data-bs-theme="dark"] .sc-dock-item { background: rgba(18, 19, 43, .72); border-color: rgba(255, 255, 255, .12); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .06) inset; } :root[data-bs-theme="dark"] .sc-dock-item:hover { border-color: rgba(129, 140, 248, .6); } :root[data-bs-theme="dark"] .sc-dock-go { background: #e8e9ff; color: #12132b; } /* entrance: dock tiles rise in one after another when the band scrolls into view (class added by js/stable.js) */ .js-reveal .sc-dock-item { opacity: 0; transform: translateY(28px); } .js-reveal .sc-dock.is-in .sc-dock-item { opacity: 1; transform: none; transition: opacity .6s ease, transform .7s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, border-color .3s ease; } .sc-dock.is-in .sc-dock-item:nth-child(1) { transition-delay: 0s, 0s, 0s, 0s; } .sc-dock.is-in .sc-dock-item:nth-child(2) { transition-delay: .08s, .08s, 0s, 0s; } .sc-dock.is-in .sc-dock-item:nth-child(3) { transition-delay: .16s, .16s, 0s, 0s; } .sc-dock.is-in .sc-dock-item:nth-child(4) { transition-delay: .24s, .24s, 0s, 0s; } .sc-dock.is-in .sc-dock-item:nth-child(5) { transition-delay: .32s, .32s, 0s, 0s; } .sc-dock.is-in .sc-dock-item:hover { transition-delay: 0s; } @media (max-width: 1199.98px) { .sc-dock { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-inline: 16px; } } @media (max-width: 767.98px) { .sc-support-card { padding: 28px 24px 96px; } .sc-dock { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: -56px 8px 0; } .sc-dock-item { min-height: 132px; padding: 16px; } .sc-dock-ticket { grid-column: 1 / -1; } .sc-support-col { padding: 18px; } } @media (prefers-reduced-motion: reduce) { .sc-aurora::before, .sc-aurora::after, .sc-support-label i { animation: none; } .js-reveal .sc-dock-item { opacity: 1; transform: none; } .sc-dock-item, .sc-dock-ico, .sc-support-col { transition: none; } .sc-dock-item:hover { transform: none; } } /* support band, card version: Support Ticket / Knowledgebase / Uptime are whole-card links; the dock keeps the remaining quick links */ a.sc-support-col, a.sc-support-col:hover { display: flex; flex-direction: column; color: #fff; text-decoration: none; } .sc-support-cardlink { cursor: pointer; } .sc-support-cardlink:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .45); background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05)); } .sc-support-cardlink:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .sc-support-num.is-word { font-size: 34px; line-height: 1.15; letter-spacing: -.02em; } .sc-support-text { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .82); } .sc-support-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-size: 14px; font-weight: 600; color: #fff; } .sc-support-cta svg { width: 16px; height: 16px; transition: transform .25s ease; } .sc-support-cardlink:hover .sc-support-cta svg { transform: translateX(5px); } .sc-dock { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 767.98px) { .sc-dock { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sc-dock-item:last-child:nth-child(odd) { grid-column: 1 / -1; } } .sc-support-num { display: flex; align-items: center; min-height: 56px; margin: 10px 0 8px; } .sc-support-foot a { margin-left: 4px; text-decoration: underline; text-underline-offset: 3px; } /* homepage product groups (dynamic): "From" price + footer link */ .sc-prod-from { display: inline-flex; align-self: flex-start; align-items: baseline; gap: 4px; margin: -6px 0 16px; padding: 4px 12px; border-radius: 999px; background: #eef2ff; color: var(--sc-muted); font-size: 13px; } .sc-prod-from strong { color: var(--sc-ink); font-size: 15px; font-weight: 700; } :root[data-bs-theme="dark"] .sc-prod-from { background: rgba(255, 255, 255, .08); } .sc-prod-from-lg { margin: -8px 0 20px; font-size: 15px; color: rgba(255, 255, 255, .85); } .sc-prod-from-lg strong { font-size: 24px; font-weight: 700; color: #fff; } .sc-prod-all { margin: 20px 0 0; text-align: right; } .sc-prod-all a { font-weight: 600; } /* fewer than four cards next to the featured one: the last row stretches to the full width */ .sc-prod-n2 .sc-prod:nth-child(3) { grid-column: span 6; } .sc-prod-n3 .sc-prod:nth-child(n+3) { grid-column: span 3; } @media (max-width: 991.98px) { .sc-prod-n2 .sc-prod:nth-child(3), .sc-prod-n3 .sc-prod:nth-child(n+3) { grid-column: span 6; } } /* ===================================================================================================================== R9 NEXUS FIXES: corrections where Nexus markup differs from the Kohost markup the imported rules were written for. ===================================================================================================================== */ section#main-body { padding-top: 60px; padding-bottom: 60px; } /* focused auth screens: no chrome (same intent as the Stable rule, Nexus class names) */ .ph-page-auth .topbar, .ph-page-auth header.header, .ph-page-auth .master-breadcrumb, .ph-page-auth .sc-page-header { display: none !important; } .ph-page-auth section#main-body { padding: 0; } .ph-page-auth #main-body > .container { max-width: none; width: 100%; padding: 0; } .ph-page-auth #main-body > .container > .row { margin: 0; } .ph-page-auth #main-body .primary-content { flex: 0 0 100%; max-width: 100%; padding: 0; } /* order form pages: .cart-body has no gutter in Nexus's wrapper, so Bootstrap's negative-margin rows inside it overflowed on phones */ @media (max-width: 991.98px) { #order-standard_cart .cart-body { padding-left: 15px; padding-right: 15px; } } /* bulk-action button groups wrap instead of overflowing on phones */ @media (max-width: 575.98px) { .primary-content .btn-group.btn-group-sm { display: flex; flex-wrap: wrap; max-width: 100%; } .primary-content .btn-group.btn-group-sm > .btn, .primary-content .btn-group.btn-group-sm > .dropdown-menu { max-width: 100%; } } /* order form pages carry no sidebar column: remove the row gutter pair so the cart aligns with the header container */ #main-body .row:has(> .primary-content > #order-standard_cart) { margin-left: 0; margin-right: 0; } #main-body .row > .primary-content:has(> #order-standard_cart) { padding-left: 0; padding-right: 0; } /* toolbar icon buttons: no frame in either mode (imported Nexus button rules re-add one) */ .header .navbar-nav.toolbar > li > .btn.nav-link, .header .navbar-nav.toolbar > li > .btn.nav-link:focus { border: 0 !important; background: transparent; box-shadow: none; } .header .navbar-nav.toolbar > li > .btn.nav-link:hover { background: var(--sc-tint); } .header .cart-btn .badge { background: var(--sc-blue); color: #fff; } /* ---- header geometry: container gutters, icon buttons, cart badge ---- */ .header .sc-navbar > .container, .header .topbar > .container { padding-left: 16px; padding-right: 16px; } @media (min-width: 768px) { .header .sc-navbar > .container, .header .topbar > .container { padding-left: 32px; padding-right: 32px; } } @media (min-width: 1280px) { .header .sc-navbar > .container, .header .topbar > .container { padding-left: 80px; padding-right: 80px; } } @media (min-width: 1536px) { .header .sc-navbar > .container, .header .topbar > .container { padding-left: 8.3333%; padding-right: 8.3333%; } } .header .navbar-nav.toolbar { gap: 4px; } .header .navbar-nav.toolbar > li > .btn.nav-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 12px; font-size: 20px; line-height: 1; } .header .navbar-nav.toolbar > li > .btn.nav-link i { font-size: 20px; width: auto; } .header .navbar-nav.toolbar .cart-btn { position: relative; } .header .navbar-nav.toolbar .cart-btn .badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 18px; transform: none; } .header .sc-notification-dot { top: 9px; right: 11px; } .sc-btn-login, .sc-btn-register { flex: none; } /* breadcrumb separators in the title band: FA glyph needs its family (rendered as tofu otherwise) */ .sc-page-header .sc-breadcrumb .breadcrumb-item + .breadcrumb-item::before { font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-weight: 400; content: "\f105"; } /* ---- mobile menu sheet ---- */ @media (max-width: 1199.98px) { .header .navbar-collapse .input-group.search { margin: 8px 0 12px; } .header .navbar-nav .nav-link, .header #nav > li > a { display: flex; align-items: center; min-height: 48px; padding: 10px 4px; font-size: 18px; font-weight: 600; } .header .navbar-nav .dropdown-menu { position: static; float: none; margin: 0 0 8px; border: 0; box-shadow: none; background: transparent; padding: 0 0 0 12px; } } /* ---- smooth transitions everywhere an interaction changes state ---- */ a, .btn, .form-control, .custom-select, .dropdown-item, .nav-link, .list-group-item, .card, .tile, .panel, .page-link, .close, .badge, .label, .input-group-text { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .2s ease, transform .2s ease, opacity .2s ease; } .card:hover, .tile:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, .08); } .tile:hover { transform: translateY(-2px); } .btn:active { transform: translateY(1px); } /* dropdowns and popovers fade + slide in */ .dropdown-menu.show { animation: scDropIn .16s cubic-bezier(.22, 1, .36, 1) both; transform-origin: top; } @keyframes scDropIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } } .popover.show, .tooltip.show { transition: opacity .15s ease; } .fade { transition: opacity .2s linear; } .modal.fade .modal-dialog { transition: transform .25s cubic-bezier(.22, 1, .36, 1), opacity .2s ease; transform: translateY(-16px); } .modal.show .modal-dialog { transform: none; } .collapsing { transition: height .3s cubic-bezier(.22, 1, .36, 1) !important; } /* alerts and menus that are removed/added by scripts */ .alert { animation: scFadeIn .25s ease both; } @keyframes scFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .dropdown-menu.show, .alert { animation: none; } .modal.fade .modal-dialog { transform: none; } .tile:hover { transform: none; } } .header #nav { gap: 4px; } @media (max-width: 1199.98px) { .header #nav { gap: 0; } .header .navbar-nav { gap: 0; } } /* WHMCS's autoCollapse() moves items into "More" when #nav is >= 30px tall, so the items stay 24px high and the 40px hover pill is drawn behind them */ @media (min-width: 1200px) { .header #nav > li > a, .header .navbar-nav.ml-auto > li > a { position: relative; z-index: 0; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 8px; font-size: 16px; line-height: 24px; font-weight: 500; background: transparent !important; } .header #nav > li > a::before, .header .navbar-nav.ml-auto > li > a::before { content: ""; position: absolute; inset: -8px 0; z-index: -1; border-radius: 8px; background: transparent; transition: background-color .18s ease; } .header #nav > li > a:hover::before, .header #nav > li.show > a::before, .header .navbar-nav.ml-auto > li > a:hover::before, .header .navbar-nav.ml-auto > li.show > a::before { background: #f3f4f6; } :root[data-bs-theme="dark"] .header #nav > li > a:hover::before, :root[data-bs-theme="dark"] .header #nav > li.show > a::before, :root[data-bs-theme="dark"] .header .navbar-nav.ml-auto > li > a:hover::before { background: rgba(255, 255, 255, .08); } .header #nav .dropdown-menu { margin-top: 16px; } .header .navbar-nav.ml-auto { margin-right: 8px; } } /* desktop: menu centred on the logo's axis (the client menu sat 6px higher: the collapse box had stray vertical padding) */ @media (min-width: 1200px) { .header .navbar-collapse { align-items: center; padding-top: 0; padding-bottom: 0; min-height: 48px; } .header .navbar-collapse > ul, .header .navbar-collapse > .ph-mega { align-self: center; margin-top: 0; margin-bottom: 0; } .header #nav { margin-left: 24px; } } /* mobile: the menu is an overlay under the header (no page reflow while it opens/closes) and has no vertical padding on the collapsing box (padding jumped 0 -> 28px at the first frame and back at the last: that was the flicker) */ @media (max-width: 1199.98px) { .header .sc-navbar { position: relative; } .header .navbar-collapse { position: absolute; top: 100%; left: 0; right: 0; z-index: 1040; order: initial; flex-basis: auto; padding: 0 16px; background: var(--sc-card); border-top: 1px solid var(--sc-line); box-shadow: 0 24px 40px -16px rgba(15, 23, 42, .28); max-height: calc(100vh - 100px); overflow-y: auto; overscroll-behavior: contain; } .header .navbar-collapse.collapsing { overflow: hidden; } .header .navbar-collapse > :first-child { margin-top: 12px; } .header .navbar-collapse > :last-child { margin-bottom: 20px; } .header .navbar-nav.ml-auto { margin-top: 8px; } :root[data-bs-theme="dark"] .header .navbar-collapse { box-shadow: 0 24px 40px -16px rgba(0, 0, 0, .6); } } /* Nexus gives #main-body a grey fill; the Stable pages sit on the page tone */ html body section#main-body { background: transparent; } /* Nexus fills with the footer navy (shows when a page is shorter than the window or at overscroll: a navy strip above the footer): use the page tone */ html { background-color: var(--sc-page); } /* header link rule (header.header .navbar a { color:#444 }) outranked the pill buttons: white text on the blue Register pill, ink on Log in */ html body header.header .sc-navbar a.sc-btn-register, html body header.header .sc-navbar a.sc-btn-register:hover, html body header.header .sc-navbar a.sc-btn-register:focus { color: #fff; } html body header.header .sc-navbar a.sc-btn-login { color: var(--sc-ink); } html body header.header .sc-mobile-cta a.sc-cta-primary { color: #fff; } html body header.header .sc-mobile-cta a.sc-cta-secondary { color: var(--sc-ink); } /* contrast (WCAG AA 4.5:1 for text): muted headings / table heads / switch / pagination used #94a3b8-like greys and Bootstrap green */ .card-title.m-0, .sidebar .card-title, .card-sidebar .card-title { color: var(--sc-muted); } table.dataTable thead th, table.dataTable thead td, .table thead th { color: var(--sc-muted); } .page-item.disabled .page-link, .page-link { color: var(--sc-body); } .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success, .bootstrap-switch-handle-on { background: var(--sc-blue); color: #fff; } :root[data-bs-theme="dark"] .bootstrap-switch-handle-off { background: #20224d; color: #e8e9ff; } :root[data-bs-theme="dark"] a.btn-primary, :root[data-bs-theme="dark"] .btn-primary { background: #2563eb; border-color: #2563eb; color: #fff; } html body h3.card-title, html body .card .card-title, html body .sidebar .card-header .card-title { color: var(--sc-muted); } html body .sidebar .card-sidebar > .card-header .card-title, html body .sidebar .card-sidebar > .card-header h3.card-title { color: var(--sc-muted) !important; } html body table.dataTable thead th, html body table.dataTable thead th.sorting, html body .table-list thead th { color: var(--sc-muted) !important; } /* homepage: Nexus's own content area is empty (the Stable sections are included above it), so it only added a blank band before the footer */ body.sc-page-homepage section#main-body { display: none; } /* top strip announcement: chip + text (cut at the max length set in the data block) + link; one line, never wraps */ .sc-top-promo { display: flex; align-items: center; justify-content: center; gap: 4px; } .sc-top-promo-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .sc-top-link { flex: none; margin-left: 6px; font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .sc-top-link:hover { color: #fff; text-decoration-thickness: 2px; } @media (max-width: 991.98px) { .sc-top-promo-text { display: none; } } .sc-top-promo { min-width: 0; overflow: hidden; } .sc-top-promo-text { flex: 0 1 auto; } .sc-top-chip { flex: none; } .sc-top-promo > a.sc-top-link { flex: none; } @media (max-width: 1279.98px) { .sc-top-promo-text { display: none; } } /* top strip, minimal: plain centred message + quiet link; optional chip is a soft filled pill (set 'chip' in the data block) */ .sc-top-promo { gap: 10px; font-size: 13.5px; letter-spacing: .01em; } .sc-top-promo-text { color: rgba(255, 255, 255, .92); } .sc-top-chip { padding: 2px 9px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .sc-top-link { margin-left: 2px; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .55); padding-bottom: 1px; transition: border-color .2s ease; } .sc-top-link:hover { text-decoration: none; border-bottom-color: #fff; } .sc-top-link span { display: inline-block; transition: transform .2s ease; } .sc-top-link:hover span { transform: translateX(3px); } /* phone number stays visible on phones (it was hidden below 768/992px, leaving a bare icon); it is a tap-to-call link */ @media (max-width: 991.98px) { .sc-topbar .sc-top-phone span, .header .topbar .sc-top-phone span { display: inline; } .sc-top-phone { min-height: 36px; gap: 8px; font-size: 14px; white-space: nowrap; } .sc-top-promo-text { display: none; } } @media (max-width: 575.98px) { .sc-top-phone { font-size: 13.5px; } .sc-top-right { gap: 8px; } } /* homepage on phones: client logos in an even 3-column grid (they wrapped 4 + 2 at random widths), calmer line heights, tighter hero tail */ @media (max-width: 767.98px) { .sc-clients { padding-top: 28px; } .sc-clients-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; align-items: center; justify-items: center; margin: 0 0 20px; padding: 0; } .sc-clients-logos li { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; margin: 0; } .sc-clients-logos img { max-width: 100%; max-height: 36px; width: auto; height: auto; object-fit: contain; } .sc-clients-contact { display: flex; flex-wrap: wrap; gap: 10px 24px; } .sc-plans p, .sc-plans-sub { line-height: 1.6; } .sc-hero { padding-bottom: 32px; } } /* stories + footer on phones/tablets: the later desktop rules (flex-basis: 126px) were also applied to the stacked cards, so the open story was cut at 126px high and the closed ones were empty 126px boxes. Stacked cards size to their content. */ @media (max-width: 991.98px) { .sc-stories-stage { flex-direction: column; height: auto; } .sc-story, .sc-story.is-active { flex: 0 0 auto; flex-grow: 0; height: auto; } .sc-story { min-height: 0; } .sc-story:not(.is-active) .sc-story-mini { padding: 16px 20px; } .sc-story:not(.is-active) .sc-story-mini img { max-height: 26px; } .sc-story-full { min-width: 0; height: auto; padding: 22px; } .sc-story-full .sc-story-logo { min-height: 96px; padding: 16px; } .sc-story-full .sc-story-logo img { max-height: 72px; } .sc-story blockquote { font-size: 17px; line-height: 1.6; } } @media (max-width: 767.98px) { .sc-footer { padding-top: 36px; } .sc-foot-col h2 { margin-bottom: 12px; } .sc-foot-col li { margin-bottom: 8px; } .sc-foot-col a { font-size: 15px; } .sc-foot-links { gap: 28px 20px; } .sc-foot-brand { gap: 16px; padding: 20px 0; margin-top: 28px; } .sc-foot-bottom { gap: 6px 16px; font-size: 13px; } .sc-foot-bottom a { margin-left: 0; margin-right: 16px; } } @media (max-width: 767.98px) { .sc-foot-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sc-foot-col a { font-size: 14.5px; line-height: 1.4; display: inline-block; } .sc-story:not(.is-active) .sc-story-mini { gap: 12px; } .sc-story:not(.is-active) .sc-story-mini img { flex: 0 1 auto; min-width: 0; max-width: 84px; } .sc-story:not(.is-active) .sc-story-vname { min-width: 0; flex: 1 1 auto; flex-wrap: wrap; gap: 2px 8px; } } /* guest mobile sheet: accordion + Register / Log in only */ @media (max-width: 1199.98px) { .header .navbar-collapse .sc-mobile-nav { margin: 0 0 8px; } .header .navbar-collapse .ph-mobile-toggle { min-height: 52px; font-size: 18px; } .header .navbar-collapse .ph-mobile-sub { padding-bottom: 12px; } .header .navbar-collapse .ph-mobile-sub a { min-height: 52px; font-size: 15px; } .sc-mobile-cta { padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--sc-line); } .sc-mobile-cta a { min-height: 48px; font-size: 16px; font-weight: 600; text-decoration: none; } body:not(.sc-loggedin) .header .navbar-collapse > form.d-xl-none { display: none; } } /* mobile header: logo left, Log in / cart / burger right on one row (the row wrapped onto two lines once the Log in link was added) */ @media (max-width: 1199.98px) { .header .sc-navbar > .container { flex-wrap: nowrap; } .header .navbar-brand { flex: 0 1 auto; min-width: 0; margin-right: 8px; } .header .navbar-brand .logo-img { height: 34px; width: auto; max-width: 100%; } .header .toolbar { flex: 0 0 auto; flex-wrap: nowrap; } } @media (max-width: 359.98px) { .header .navbar-brand .logo-img { height: 28px; } .sc-btn-login { padding: 0 8px; } } /* footer on phones: each link group is a block (heading, then its links in two balanced columns); the old 2-column group grid left a long left column next to a short right one */ @media (max-width: 767.98px) { .sc-foot-links { grid-template-columns: 1fr; gap: 26px; } .sc-foot-col h2 { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--sc-line); } .sc-foot-col ul { columns: 2; column-gap: 20px; } .sc-foot-col li { break-inside: avoid; margin-bottom: 10px; } .sc-foot-col a { font-size: 14.5px; } .sc-foot-brand { align-items: flex-start; } .sc-foot-bottom { align-items: flex-start; } } @media (max-width: 359.98px) { .sc-foot-col ul { columns: 1; } } /* footer on phones, centred: brand block (logo, "Product of", partner logos, social icons) and the copyright row use the full width and are centred */ @media (max-width: 767.98px) { .sc-foot-brand { flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; } .sc-foot-logo { display: flex; justify-content: center; } .sc-foot-products { align-items: center; width: 100%; text-align: center; } .sc-foot-products > div { justify-content: center; gap: 28px; } .sc-foot-social { justify-content: center; width: 100%; } .sc-foot-bottom { flex-direction: column; align-items: center; justify-content: center; width: 100%; gap: 8px; text-align: center; } .sc-foot-bottom p { width: 100%; text-align: center; } .sc-foot-bottom > div, .sc-foot-bottom nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; width: 100%; } .sc-foot-bottom a { margin: 0; } .sc-foot-col, .sc-pay { text-align: left; } .sc-pay-logos { justify-content: flex-start; } } @media (max-width: 767.98px) { .sc-foot-bottom p a { display: inline-block; margin: 0 9px; } } /* ---- Dashboard design fixes (2026-10-16) --------------------------------------------------------------------------------------------- 1. The stat tiles sat edge to edge (the row is .no-gutters), so the amber / red "needs attention" borders ran into their neighbours. 2. Panels showed an empty 24px bordered strip at the bottom (an empty .card-footer WHMCS prints for every home panel). (the cart badge showing "0" is fixed in header.tpl + stable.js) */ .tiles > .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin: 0; } .tiles > .row > [class*="col-"] { width: auto; max-width: none; flex: none; padding: 0; } @media (max-width: 575.98px) { .tiles > .row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } } .card-footer:not(:has(*)) { display: none; } /* footer payment logos: ConnectIPS and the bank-transfer icon have a lot of padding in their artwork and read as tiny next to the others */ .sc-pay-logos img[src*="connectips"], .sc-pay-logos img[src*="bank-transfer"] { height: 32px; } /* ---- Domains list (and every DataTables list): toolbar + search box (2026-10-16) --------------------------------------------------------- 1. The bulk-action toolbar (.btn-group.mb-3) had its buttons glued together (-1px margins, no gap) and its icons touching the label. 2. The search box showed an empty square: Nexus (WHMCS 9) draws the magnifier with .dataTables_filter::after in the font "Font Awesome 6 Pro", which does not exist on this 8.13 install (only Font Awesome 5 Pro), and a later Nexus rule wiped the SVG magnifier of our own list styles. */ .primary-content .btn-group.btn-group-sm.mb-3 { display: flex; flex-wrap: wrap; gap: 8px; } .primary-content .btn-group.btn-group-sm.mb-3 > .btn, .primary-content .btn-group.btn-group-sm.mb-3 > .btn-group > .btn { margin: 0 !important; display: inline-flex; align-items: center; gap: 8px; border-radius: 8px !important; } .primary-content .btn-group.btn-group-sm.mb-3 > .btn-group { display: inline-flex; } .primary-content .btn-group.btn-group-sm.mb-3 .btn i, .primary-content .btn-group.btn-group-sm.mb-3 .btn svg { margin: 0 !important; } .primary-content .btn-group.btn-group-sm.mb-3 .dropdown-toggle::after { margin-left: 2px; } body .dataTables_wrapper .dataTables_filter::after { content: none !important; display: none !important; } body .dataTables_wrapper .dataTables_filter label .form-control { height: 44px; padding: 0 14px 0 42px !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 14px center / 18px no-repeat; } :root[data-bs-theme="dark"] body .dataTables_wrapper .dataTables_filter label .form-control { background: #12132b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a4a7d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 14px center / 18px no-repeat; } /* toolbar buttons keep their natural width (Bootstrap's .btn-group > .btn { flex: 1 1 auto } stretched them across the row) */ .primary-content .btn-group.btn-group-sm.mb-3 > .btn, .primary-content .btn-group.btn-group-sm.mb-3 > .btn-group { flex: 0 0 auto; } /* domains list: the checkbox and lock columns are narrow, the domain name never breaks in the middle of a word */ #tableDomainsList th:nth-child(1), #tableDomainsList td:nth-child(1), #tableDomainsList th:nth-child(2), #tableDomainsList td:nth-child(2) { width: 1%; } #tableDomainsList th:nth-child(3), #tableDomainsList td:nth-child(3) { min-width: 230px; } #tableDomainsList td:nth-child(3) a { overflow-wrap: normal; word-break: keep-all; } /* Row action pills (Manage / Pay) in every DataTables list: the generic cell-link rule `.dataTables_wrapper table.table-list tbody td a` (blue text) out-ranked `.ph-row-action:hover`, leaving blue text on a blue fill. Hover/focus = white on the brand blue; dark = dark text on light blue. */ .dataTables_wrapper table.table-list tbody td a.ph-row-action:hover, .dataTables_wrapper table.table-list tbody td a.ph-row-action:focus-visible { background: var(--ph-blue); border-color: var(--ph-blue); color: #fff; } :root[data-bs-theme="dark"] .dataTables_wrapper table.table-list tbody td a.ph-row-action:hover, :root[data-bs-theme="dark"] .dataTables_wrapper table.table-list tbody td a.ph-row-action:focus-visible { background: #93c5fd; border-color: #93c5fd; color: #0b0c1f; } /* Quiet outline buttons in card footers/sidebars ("Update", "New Contact"): hover = light tint + blue text (several later generic .btn-success:hover rules painted an indigo fill under blue text, 1.8:1). */ body .card-footer .btn.btn-success:hover, body .card-footer .btn.btn-success:focus-visible, body .sidebar .card-sidebar .btn.btn-success:hover, body .sidebar .card-sidebar .btn.btn-success:focus-visible, body .card-footer .btn.btn-default:hover, body .card-footer .btn.btn-default:focus-visible { background: #eef2ff !important; border-color: var(--ph-blue); color: var(--ph-blue-dark) !important; } :root[data-bs-theme="dark"] body .card-footer .btn.btn-success:hover, :root[data-bs-theme="dark"] body .sidebar .card-sidebar .btn.btn-success:hover, :root[data-bs-theme="dark"] body .card-footer .btn.btn-default:hover { background: rgba(99, 102, 241, .22) !important; border-color: #93c5fd; color: #dbeafe !important; } /* ---- Sidebar: empty mobile copy, recent-ticket item ---- */ .sidebar:not(:has(*)) { display: none; } .sidebar .recent-ticket { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: center; width: 100%; padding: 2px 0; } .sidebar .recent-ticket .truncate { grid-column: 1 / -1; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ph-text, #1f2937); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar .recent-ticket small { display: contents; } .sidebar .recent-ticket small > span:not(.pull-right) { grid-row: 2; grid-column: 1; justify-self: start; padding: 2px 10px; border-radius: 999px; background: #eef2ff; font-size: 12px; font-weight: 600; line-height: 1.5; color: #3730a3 !important; } .sidebar .recent-ticket small > .pull-right { grid-row: 2; grid-column: 2; float: none !important; font-size: 12px; color: var(--ph-muted, #6b7280); white-space: nowrap; } .sidebar .card-sidebar .list-group-item:has(.recent-ticket) { padding: 12px 16px; } :root[data-bs-theme="dark"] .sidebar .recent-ticket .truncate { color: #e5e7eb; } :root[data-bs-theme="dark"] .sidebar .recent-ticket small > span:not(.pull-right) { background: rgba(99,102,241,.2); color: #c7d2fe !important; } /* ---- Open ticket form: full-width grid, calmer fields ---- */ form[action*="submitticket.php?step=3"] > .card { border-radius: 16px; } form[action*="submitticket.php?step=3"] .card-body { padding: 32px; } form[action*="submitticket.php?step=3"] .card-title { margin: 0 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--ph-line, #e3ebf6); font-size: 20px; font-weight: 700; } form[action*="submitticket.php?step=3"] .card-body > .row { display: grid; gap: 20px; margin: 0 0 20px; } form[action*="submitticket.php?step=3"] .card-body > .row > .form-group { width: auto; max-width: none; flex: none; padding: 0; margin: 0; } form[action*="submitticket.php?step=3"] .card-body > .row:nth-of-type(1) { grid-template-columns: repeat(2, minmax(0, 1fr)); } form[action*="submitticket.php?step=3"] .card-body > .row:nth-of-type(2) { grid-template-columns: 1fr; } form[action*="submitticket.php?step=3"] .card-body > .row:nth-of-type(3) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); } form[action*="submitticket.php?step=3"] label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--ph-text, #1f2937); } form[action*="submitticket.php?step=3"] .form-control { min-height: 48px; border-radius: 10px; } form[action*="submitticket.php?step=3"] .form-control.disabled, form[action*="submitticket.php?step=3"] .form-control:disabled { background: #f3f4f8; color: #4b5563; opacity: 1; cursor: not-allowed; } @media (max-width: 767px) { form[action*="submitticket.php?step=3"] .card-body { padding: 20px; } form[action*="submitticket.php?step=3"] .card-body > .row:nth-of-type(1), form[action*="submitticket.php?step=3"] .card-body > .row:nth-of-type(3) { grid-template-columns: 1fr; } } :root[data-bs-theme="dark"] form[action*="submitticket.php?step=3"] .form-control.disabled, :root[data-bs-theme="dark"] form[action*="submitticket.php?step=3"] .form-control:disabled { background: rgba(255,255,255,.05); color: #9ca3af; } /* ---- Markdown editor, dark mode (was a white box with invisible toolbar icons) ---- */ :root[data-bs-theme="dark"] .md-editor { background: transparent; border-color: rgba(255,255,255,.14); } :root[data-bs-theme="dark"] .md-editor > .md-header { background: rgba(255,255,255,.04); border-bottom-color: rgba(255,255,255,.12); } :root[data-bs-theme="dark"] .md-editor > .md-header .btn { background: transparent; border-color: transparent; color: #cbd5e1; } :root[data-bs-theme="dark"] .md-editor > .md-header .btn:hover { background: rgba(255,255,255,.08); color: #fff; } :root[data-bs-theme="dark"] .md-editor > textarea.markdown-editor, :root[data-bs-theme="dark"] .md-editor > textarea, :root[data-bs-theme="dark"] .md-editor > .md-preview { background-color: #0f1226 !important; color: #e5e7eb !important; border-color: transparent; } :root[data-bs-theme="dark"] .md-editor > .md-footer { background: rgba(255,255,255,.04); border-top-color: rgba(255,255,255,.12); color: #9ca3af; } .md-editor > textarea { min-height: 240px; } :root[data-bs-theme="dark"] .md-editor > .md-header, :root[data-bs-theme="dark"] .md-editor .md-header.btn-toolbar { background-color: #161a36 !important; } :root[data-bs-theme="dark"] .md-editor > .md-header .btn, :root[data-bs-theme="dark"] .md-editor > .md-header .btn-group .btn { color: #cbd5e1 !important; background: transparent !important; } :root[data-bs-theme="dark"] .md-editor > .md-header .btn:hover { color: #fff !important; background: rgba(255,255,255,.1) !important; } /* ticket form actions + attachment row polish */ form[action*="submitticket.php?step=3"] .btn-add-file, form[action*="submitticket.php?step=3"] #btnAddAttachment, form[action*="submitticket.php?step=3"] .btn-outline-primary { gap: 8px; display: inline-flex; align-items: center; justify-content: center; } form[action*="submitticket.php?step=3"] .text-center:has(> .btn-primary) { display: flex; gap: 12px; justify-content: flex-end; padding-top: 20px; margin-top: 8px; border-top: 1px solid var(--ph-line, #e3ebf6); } form[action*="submitticket.php?step=3"] .text-center:has(> .btn-primary) .btn { min-width: 120px; min-height: 48px; margin: 0 !important; } form[action*="submitticket.php?step=3"] .text-center:has(> .btn-primary) .btn-primary { order: 2; } /* ---- Knowledgebase landing ---- */ .primary-content > .sc-rounded:has(.kb-search) { padding: 32px !important; border: 1px solid var(--ph-line, #e3ebf6); background: linear-gradient(135deg, #eef2ff 0%, #f6f9fc 100%); border-radius: 16px; } .kb-search.sc-kb-search { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 12px; width: 100%; max-width: 760px; margin: 0 auto; } .kb-search .sc-search-field { position: relative; flex: 1 1 auto; min-width: 0; display: block; } .kb-search .sc-search-field > i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 16px; pointer-events: none; z-index: 1; } .kb-search .sc-search-field .form-control { width: 100% !important; height: 56px; min-height: 56px; padding: 0 18px 0 48px; border-radius: 12px; font-size: 16px; } .kb-search > .btn { flex: 0 0 auto; min-height: 56px; padding: 0 32px; border-radius: 12px; } .primary-content > .row:has(.kb-category) { margin-bottom: 8px; } .kb-category.card { height: calc(100% - 24px); border-radius: 14px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .kb-category.card:hover { border-color: var(--ph-blue, #2563eb); box-shadow: 0 8px 24px rgba(37,99,235,.12); transform: translateY(-2px); } .kb-category .card-body { display: block; padding: 20px 22px; text-decoration: none; } .kb-category .card-body > .h6 { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; font-size: 17px; font-weight: 700; color: var(--ph-blue, #2563eb); } .kb-category .card-body > .h6 .badge { order: 3; margin-left: auto; float: none !important; padding: 4px 10px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 12px; font-weight: 600; } .kb-category .card-body > p { margin-top: 6px !important; font-size: 14px; color: var(--ph-muted, #6b7280) !important; } .primary-content > .card:has(.kb-article-item) > .card-body { padding: 20px 24px; border-bottom: 1px solid var(--ph-line, #e3ebf6); } .kb-article-item { display: block; padding: 16px 24px 16px 56px !important; font-size: 16px; font-weight: 600; line-height: 1.4; position: relative; } .kb-article-item > i { position: absolute; left: 24px; top: 19px; color: var(--ph-blue, #2563eb) !important; opacity: .8; } .kb-article-item small { display: block; margin-left: 0 !important; padding-left: 0 !important; text-indent: 0; margin-top: 4px; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--ph-muted, #6b7280); } .kb-article-item:hover { background: #f6f9fc; } @media (max-width: 575px) { .kb-search.sc-kb-search { flex-direction: column; } .kb-search > .btn { width: 100%; } .primary-content > .sc-rounded:has(.kb-search) { padding: 20px !important; } } :root[data-bs-theme="dark"] .primary-content > .sc-rounded:has(.kb-search) { background: linear-gradient(135deg, rgba(99,102,241,.16), rgba(255,255,255,.03)); border-color: rgba(255,255,255,.12); } :root[data-bs-theme="dark"] .kb-category .card-body > .h6 { color: #93c5fd; } :root[data-bs-theme="dark"] .kb-category .card-body > .h6 .badge { background: rgba(99,102,241,.22); color: #c7d2fe; } :root[data-bs-theme="dark"] .kb-article-item:hover { background: rgba(255,255,255,.05); } /* ---- Sidebar typography: one scale for client-area and cart sidebars ---- heading 13px/700 caps, items 16px/500 (cart was 13px, client area 15px/70% opacity), readable colours, 48px rows, 18px icons, 13px meta text. */ body .sidebar .card-sidebar .card-title, body .cart-sidebar .card-sidebar .panel-title { font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: #475569; } body .sidebar .card-sidebar .card-title i:not(.card-minimise), body .cart-sidebar .card-sidebar .panel-title i:not(.card-minimise) { display: none; } body .sidebar .card-sidebar .list-group-item, body .cart-sidebar .card-sidebar .list-group-item { font-size: 16px; font-weight: 500; line-height: 1.4; color: #1e2a4a; min-height: 48px; display: flex; align-items: center; gap: 12px; padding-top: 12px; padding-bottom: 12px; } body .sidebar .card-sidebar .list-group-item .sidebar-menu-item-label { font-size: inherit; line-height: inherit; color: inherit; } body .sidebar .card-sidebar .list-group-item .sidebar-menu-item-icon, body .cart-sidebar .card-sidebar .list-group-item i { font-size: 18px; width: 22px; text-align: center; color: #64748b; flex: 0 0 22px; } body .sidebar .card-sidebar .list-group-item:hover, body .cart-sidebar .card-sidebar .list-group-item:hover { color: var(--ph-blue-dark, #1d4ed8); } body .sidebar .card-sidebar .list-group-item.active, body .cart-sidebar .card-sidebar .list-group-item.active, body .sidebar .card-sidebar .list-group-item.active .sidebar-menu-item-icon, body .cart-sidebar .card-sidebar .list-group-item.active i { font-weight: 600; color: var(--ph-blue, #2563eb); } body .sidebar .card-sidebar .badge, body .cart-sidebar .card-sidebar .badge { font-size: 12px; font-weight: 600; } body .sidebar .card-sidebar small, body .sidebar .recent-ticket small { font-size: 13px; } body .sidebar .recent-ticket .truncate { font-size: 15px; } body .sidebar .card-sidebar .card-body, body .sidebar .card-sidebar address, body .sidebar .card-sidebar .card-body p { font-size: 15px; line-height: 1.6; color: #334155; } :root[data-bs-theme="dark"] body .sidebar .card-sidebar .card-title, :root[data-bs-theme="dark"] body .cart-sidebar .card-sidebar .panel-title { color: #94a3b8; } :root[data-bs-theme="dark"] body .sidebar .card-sidebar .list-group-item, :root[data-bs-theme="dark"] body .cart-sidebar .card-sidebar .list-group-item { color: #e2e8f0; } :root[data-bs-theme="dark"] body .sidebar .card-sidebar .list-group-item .sidebar-menu-item-icon, :root[data-bs-theme="dark"] body .cart-sidebar .card-sidebar .list-group-item i { color: #94a3b8; } :root[data-bs-theme="dark"] body .sidebar .card-sidebar .list-group-item.active, :root[data-bs-theme="dark"] body .cart-sidebar .card-sidebar .list-group-item.active, :root[data-bs-theme="dark"] body .sidebar .card-sidebar .list-group-item.active .sidebar-menu-item-icon, :root[data-bs-theme="dark"] body .cart-sidebar .card-sidebar .list-group-item.active i { color: #93c5fd; } :root[data-bs-theme="dark"] body .sidebar .card-sidebar .card-body, :root[data-bs-theme="dark"] body .sidebar .card-sidebar address { color: #cbd5e1; } /* Sidebar typography: win over the earlier !important / id-scoped rules */ :root:root body .sidebar .card-sidebar > .card-header .card-title { font-size: 13px !important; font-weight: 700 !important; letter-spacing: .08em !important; color: #475569 !important; } :root:root body .sidebar .card-sidebar .list-group-item .sidebar-menu-item-label { color: #1e2a4a !important; } :root:root body .sidebar .card-sidebar .list-group-item.active .sidebar-menu-item-label { color: var(--ph-blue, #2563eb) !important; } :root:root body #order-standard_cart#order-standard_cart#order-standard_cart .cart-sidebar .list-group-item, :root:root body #order-standard_cart#order-standard_cart#order-standard_cart.sc-store-modern .cart-sidebar .list-group-item { font-size: 16px !important; font-weight: 500; line-height: 1.4 !important; color: #1e2a4a !important; min-height: 48px; } :root:root body #order-standard_cart#order-standard_cart#order-standard_cart .cart-sidebar .list-group-item.active { color: var(--ph-blue, #2563eb) !important; font-weight: 600; } :root:root body #order-standard_cart#order-standard_cart#order-standard_cart .cart-sidebar .panel-title, :root:root body #order-standard_cart#order-standard_cart#order-standard_cart .cart-sidebar .card-header .panel-title { font-size: 13px !important; font-weight: 700 !important; letter-spacing: .08em !important; color: #475569 !important; text-transform: uppercase; } :root:root body #order-standard_cart#order-standard_cart#order-standard_cart .cart-sidebar .list-group-item i { font-size: 18px !important; } :root:root[data-bs-theme="dark"] body .sidebar .card-sidebar > .card-header .card-title { color: #94a3b8 !important; } :root:root[data-bs-theme="dark"] body .sidebar .card-sidebar .list-group-item .sidebar-menu-item-label { color: #e2e8f0 !important; } :root:root[data-bs-theme="dark"] body .sidebar .card-sidebar .list-group-item.active .sidebar-menu-item-label { color: #93c5fd !important; } :root:root[data-bs-theme="dark"] body #order-standard_cart#order-standard_cart#order-standard_cart .cart-sidebar .list-group-item { color: #e2e8f0 !important; } :root:root[data-bs-theme="dark"] body #order-standard_cart#order-standard_cart#order-standard_cart .cart-sidebar .list-group-item.active { color: #93c5fd !important; } :root:root[data-bs-theme="dark"] body #order-standard_cart#order-standard_cart#order-standard_cart .cart-sidebar .panel-title { color: #94a3b8 !important; } /* ---- Service row split button (dashboard): caret click opened the service page instead of the menu ---- WHMCS's row click handler (js/whmcs.js `.div-service-item` click) only lets the click through when event.target IS the .dropdown-toggle; the caret SVG inside it became the target, so the row redirect ran. Making the icon transparent to the pointer keeps the button as the target. */ .sc-service-menu-toggle svg, .sc-service-menu-toggle svg * { pointer-events: none; } /* Menu anchored under the caret, right-aligned with it, never covering the toggle */ .div-service-item .div-service-buttons .btn-group { position: relative; } .div-service-item .div-service-buttons .btn-group > .dropdown-menu { position: absolute !important; inset: calc(100% + 6px) 0 auto auto !important; transform: none !important; margin: 0 !important; min-width: 220px; z-index: 1060; } .div-service-item .div-service-buttons .btn-group > .dropdown-menu .dropdown-item { cursor: pointer; } .div-service-item .div-service-buttons .btn-group > .dropdown-menu .dropdown-item.disabled { cursor: not-allowed; opacity: .55; } @media (max-width: 767px) { .div-service-item .div-service-buttons .btn-group > .dropdown-menu { inset: calc(100% + 6px) auto auto 0 !important; min-width: 200px; max-width: calc(100vw - 32px); } } /* the card holding an open service menu must paint above the cards below it */ .card:has(.div-service-buttons .dropdown-menu.show), .tt-client-home-cards > *:has(.div-service-buttons .dropdown-menu.show), .client-home-cards .card:has(.dropdown-menu.show) { position: relative; z-index: 30; overflow: visible; } /* ---- Notifications popover (header bell) ---- */ .popover-user-notifications { max-width: none; width: 380px; border: 1px solid var(--ph-line, #e3ebf6); border-radius: 16px; background: #fff; box-shadow: 0 18px 48px rgba(30, 27, 75, .16), 0 2px 6px rgba(30, 27, 75, .06); overflow: hidden; } .popover-user-notifications .popover-header { display: none; } .popover-user-notifications .arrow { display: none; } .popover-user-notifications .popover-body { padding: 0; } .popover-user-notifications .sc-alerts-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid var(--ph-line, #e3ebf6); } .popover-user-notifications .sc-alerts-head strong { font-size: 16px; font-weight: 700; color: var(--ph-ink, #111827); } .popover-user-notifications .sc-alerts-count { min-width: 24px; padding: 2px 8px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 12px; font-weight: 700; text-align: center; } .popover-user-notifications .client-alerts { margin: 0; padding: 6px; list-style: none; max-height: min(420px, 70vh); overflow-y: auto; } .popover-user-notifications .client-alerts li { margin: 0; padding: 0; border: 0; background: none; } .popover-user-notifications .client-alerts li + li { margin-top: 2px; } .popover-user-notifications .client-alerts li a { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px; color: var(--ph-text, #1f2937); text-decoration: none; background: transparent !important; transition: background-color .15s ease; } .popover-user-notifications .client-alerts li a:hover, .popover-user-notifications .client-alerts li a:focus-visible { background: #f3f4fb !important; } .popover-user-notifications .sc-alert-icon { flex: 0 0 36px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: #eef2ff; color: #4338ca; font-size: 16px; } .popover-user-notifications .sc-alert-icon i { font-size: 16px; color: inherit; } .popover-user-notifications .sc-alert-danger .sc-alert-icon { background: #fee2e2; color: #b91c1c; } .popover-user-notifications .sc-alert-warning .sc-alert-icon { background: #fef3c7; color: #b45309; } .popover-user-notifications .sc-alert-info .sc-alert-icon { background: #e0f2fe; color: #0369a1; } .popover-user-notifications .sc-alert-success .sc-alert-icon { background: #dcfce7; color: #166534; } .popover-user-notifications .client-alerts .message { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 14px; line-height: 1.5; color: var(--ph-text, #1f2937); } .popover-user-notifications .sc-alert-go { flex: 0 0 auto; align-self: center; font-size: 12px; color: #94a3b8; } .popover-user-notifications .client-alerts li a:hover .sc-alert-go { color: var(--ph-blue, #2563eb); transform: translateX(2px); } .popover-user-notifications .client-alerts li.none { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 20px; font-size: 14px; color: var(--ph-muted, #6b7280); } .popover-user-notifications .client-alerts li.none .sc-alert-icon { background: #f3f4f6; color: #6b7280; } @media (max-width: 575px) { .popover-user-notifications { width: calc(100vw - 24px); } } :root[data-bs-theme="dark"] .popover-user-notifications { background: #151834; border-color: rgba(255,255,255,.12); box-shadow: 0 18px 48px rgba(0,0,0,.5); } :root[data-bs-theme="dark"] .popover-user-notifications .sc-alerts-head { border-bottom-color: rgba(255,255,255,.1); } :root[data-bs-theme="dark"] .popover-user-notifications .sc-alerts-head strong, :root[data-bs-theme="dark"] .popover-user-notifications .client-alerts .message { color: #e5e7eb; } :root[data-bs-theme="dark"] .popover-user-notifications .sc-alerts-count { background: rgba(99,102,241,.22); color: #c7d2fe; } :root[data-bs-theme="dark"] .popover-user-notifications .client-alerts li a:hover, :root[data-bs-theme="dark"] .popover-user-notifications .client-alerts li a:focus-visible { background: rgba(255,255,255,.06) !important; } :root[data-bs-theme="dark"] .popover-user-notifications .sc-alert-icon { background: rgba(99,102,241,.22); color: #c7d2fe; } :root[data-bs-theme="dark"] .popover-user-notifications .sc-alert-danger .sc-alert-icon { background: rgba(239,68,68,.2); color: #fca5a5; } :root[data-bs-theme="dark"] .popover-user-notifications .sc-alert-warning .sc-alert-icon { background: rgba(245,158,11,.2); color: #fcd34d; } :root[data-bs-theme="dark"] .popover-user-notifications .sc-alert-info .sc-alert-icon { background: rgba(14,165,233,.2); color: #7dd3fc; } :root[data-bs-theme="dark"] .popover-user-notifications .client-alerts li.none { color: #9ca3af; } /* ---- Header dropdown children: weight hierarchy ---- Top-level items 500; child items were also 500 (no hierarchy, heavy next to the 16px size). Children: 15px/400 in a softer ink, current page 600, hover only changes colour/tint (no weight change, so nothing shifts). Dividers and the account menu share the same scale. */ :root:root body .header .navbar-nav .dropdown-menu .dropdown-item, :root:root body .header .navbar-nav .dropdown-menu a { font-size: 15px; font-weight: 400; line-height: 1.4; color: #374151; letter-spacing: 0; } :root:root body .header .navbar-nav .dropdown-menu .dropdown-item:hover, :root:root body .header .navbar-nav .dropdown-menu .dropdown-item:focus-visible, :root:root body .header .navbar-nav .dropdown-menu a:hover { font-weight: 400; color: var(--sc-blue, #2563eb); text-decoration: none; } :root:root body .header .navbar-nav .dropdown-menu .dropdown-item.active, :root:root body .header .navbar-nav .dropdown-menu .active > a { font-weight: 600; color: var(--sc-blue, #2563eb); background: #eef2ff; } :root:root body .header .navbar-nav .dropdown-menu .dropdown-header { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; } :root:root body .header .navbar-nav .dropdown-toggle:hover, :root:root body .header .navbar-nav .dropdown-toggle:focus { text-decoration: none; } :root:root[data-bs-theme="dark"] body .header .navbar-nav .dropdown-menu .dropdown-item, :root:root[data-bs-theme="dark"] body .header .navbar-nav .dropdown-menu a { color: #d1d5db; } :root:root[data-bs-theme="dark"] body .header .navbar-nav .dropdown-menu .dropdown-item:hover, :root:root[data-bs-theme="dark"] body .header .navbar-nav .dropdown-menu a:hover, :root:root[data-bs-theme="dark"] body .header .navbar-nav .dropdown-menu .dropdown-item.active { color: #93c5fd; } :root:root[data-bs-theme="dark"] body .header .navbar-nav .dropdown-menu .dropdown-item.active { background: rgba(99,102,241,.2); } /* ---- Choose-a-domain row (www. + name + TLD + Check): one flex line with even 12px gaps ---- Bootstrap's col-sm-8/9/3/2 gutters left 13px between name and TLD, the Check button had a -15px margin that overlapped the TLD select, and the inputs were 46px against a 48px button. */ #order-standard_cart .domain-input-group > .row { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 12px; margin: 0; } #order-standard_cart .domain-input-group > .row > .col-sm-8 { flex: 1 1 auto; min-width: 0; max-width: none; width: auto; margin: 0; padding: 0; } #order-standard_cart .domain-input-group > .row > .col-sm-2 { flex: 0 0 auto; width: auto; max-width: none; margin: 0; padding: 0; } #order-standard_cart .domain-input-group .domains-row { display: flex; flex-wrap: nowrap; gap: 12px; margin: 0; } #order-standard_cart .domain-input-group .domains-row > [class*="col-"] { padding: 0; margin: 0; max-width: none; width: auto; } #order-standard_cart .domain-input-group .domains-row > .col-9 { flex: 1 1 auto; min-width: 0; } #order-standard_cart .domain-input-group .domains-row > .col-3 { flex: 0 0 150px; } #order-standard_cart .domain-input-group .input-group { flex-wrap: nowrap; height: 100%; } #order-standard_cart .domain-input-group .input-group-prepend { margin-right: 0; } #order-standard_cart .domain-input-group .input-group-text, #order-standard_cart .domain-input-group .form-control, #order-standard_cart .domain-input-group select.form-control { height: 52px; min-height: 52px; } #order-standard_cart .domain-input-group #btnCheckAvailability { width: auto; min-width: 132px; height: 52px; margin: 0; padding: 0 28px; } @media (max-width: 767px) { #order-standard_cart .domain-input-group > .row, #order-standard_cart .domain-input-group .domains-row { flex-wrap: wrap; } #order-standard_cart .domain-input-group > .row > .col-sm-8, #order-standard_cart .domain-input-group > .row > .col-sm-2 { flex: 1 1 100%; } #order-standard_cart .domain-input-group .domains-row > .col-9 { flex: 1 1 100%; } #order-standard_cart .domain-input-group .domains-row > .col-3 { flex: 1 1 100%; } #order-standard_cart .domain-input-group #btnCheckAvailability { width: 100%; } } #order-standard_cart#order-standard_cart .domain-input-group .input-group-text, #order-standard_cart#order-standard_cart .domain-input-group .input-group > .form-control, #order-standard_cart#order-standard_cart .domain-input-group select.form-control, #order-standard_cart#order-standard_cart .domain-input-group #btnCheckAvailability { height: 52px !important; min-height: 52px !important; box-sizing: border-box; } #order-standard_cart#order-standard_cart .domain-input-group .domains-row > .col-3 { flex: 0 0 150px !important; width: 150px !important; } #order-standard_cart#order-standard_cart .domain-input-group .input-group > .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; } #order-standard_cart#order-standard_cart .domain-input-group .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; } @media (max-width: 767px) { #order-standard_cart#order-standard_cart .domain-input-group > .row { align-content: flex-start; } #order-standard_cart#order-standard_cart .domain-input-group .domains-row { align-content: flex-start; height: auto; } #order-standard_cart#order-standard_cart .domain-input-group .domains-row > .col-3 { flex: 1 1 100% !important; width: 100% !important; } #order-standard_cart#order-standard_cart .domain-input-group > .row > .col-sm-8, #order-standard_cart#order-standard_cart .domain-input-group > .row > .col-sm-2 { flex: 0 0 100%; } } /* ---- Client area additions: usage bars, dismissible banner, empty states (2026-10-16) ---- */ .sc-usage { padding: 4px 0 18px; text-align: left; } .sc-usage-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: 15px; color: var(--ph-text, #1f2937); } .sc-usage-head strong { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; } .sc-usage-bar { height: 10px; border-radius: 999px; background: #e5e7eb; overflow: hidden; } .sc-usage-bar > span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--ph-blue, #4f46e5); transition: width .5s ease; } .sc-usage-bar.is-warn > span { background: #d97706; } .sc-usage-bar.is-bad > span { background: #dc2626; } .sc-usage-num { margin: 8px 0 0; font-size: 14px; color: #4b5563; font-variant-numeric: tabular-nums; } :root[data-bs-theme="dark"] .sc-usage-head { color: #e5e7eb; } :root[data-bs-theme="dark"] .sc-usage-bar { background: #334155; } :root[data-bs-theme="dark"] .sc-usage-num { color: #9ca3af; } @media (prefers-reduced-motion: reduce) { .sc-usage-bar > span { transition: none; } } .sc-dash-banner[hidden] { display: none; } .sc-dash-banner-x { flex: 0 0 auto; width: 44px; height: 44px; margin: -8px -8px -8px 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: transparent; color: inherit; opacity: .7; cursor: pointer; } .sc-dash-banner-x:hover { opacity: 1; background: rgba(0,0,0,.06); } .sc-dash-banner-x:focus-visible { outline: 2px solid var(--ph-blue, #4f46e5); outline-offset: 2px; opacity: 1; } .sc-empty { text-align: center; padding-top: 28px; padding-bottom: 28px; color: #4b5563; } .sc-empty > p { margin-bottom: 0; } .sc-empty-ico { display: block; margin: 0 auto 10px; font-size: 30px; color: #a5b4fc; } td.dataTables_empty { text-align: center; padding: 36px 16px !important; color: #4b5563; } td.dataTables_empty .sc-empty-ico { margin-bottom: 8px; } .sc-empty-act { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; font-weight: 600; color: var(--ph-blue, #4f46e5); } :root[data-bs-theme="dark"] .sc-empty, :root[data-bs-theme="dark"] td.dataTables_empty { color: #9ca3af; } :root[data-bs-theme="dark"] .sc-empty-ico { color: #6366f1; } :root:root .dataTables_wrapper table.table-list td.dataTables_empty { text-align: center !important; } :root:root .dataTables_wrapper table.table-list td.dataTables_empty::before { content: none !important; } /* List rows: status pill and the action button sat side by side, so the button's left edge moved with the pill's width (Pending vs Active). Fixed pill width = the buttons line up in every row. */ :root:root #tableServicesList td:last-child > .label.status, :root:root #tableDomainsList td:last-child > .label.status, :root:root #tableInvoicesList td .sc-status-cell > .label.status { display: inline-flex; align-items: center; justify-content: center; min-width: 92px; box-sizing: border-box; } :root:root #tableServicesList td:last-child .ph-row-action, :root:root #tableDomainsList td:last-child .ph-row-action, :root:root #tableInvoicesList td .sc-status-cell .ph-row-action { min-width: 80px; margin-left: 8px; box-sizing: border-box; } :root:root #tableServicesList td:last-child, :root:root #tableDomainsList td:last-child { white-space: nowrap; } /* Phone card rows: the desktop column widths (td:nth-child(n){width:18%}) still applied, so each field shrank to ~93px and the labels overlapped the values. Cards need full-width cells. */ @media (max-width: 575.98px) { :root:root .dataTables_wrapper table.table-list tbody td { width: auto !important; min-width: 0 !important; max-width: none !important; box-sizing: border-box; } :root:root #tableServicesList td:last-child, :root:root #tableDomainsList td:last-child { white-space: normal; } } /* Status filter dots were 22x10 ovals (the sidebar-typography rule gave every icon a 22px width). True 12px circles, same 22px footprint. */ :root:root body .sidebar .card-sidebar a.list-group-item i.fa-circle { width: 12px !important; height: 12px !important; flex: 0 0 12px !important; margin: 0 5px; border-radius: 50%; } /* Services list: the lock/SSL icons came in 20px and 25px sizes and sat off-centre; one 24px box, centred in the first column. */ :root:root #tableServicesList td:first-child, :root:root #tableDomainsList td:first-child { text-align: center; } :root:root #tableServicesList td:first-child img, :root:root #tableDomainsList td:first-child img { display: inline-block; width: 24px; height: 24px; object-fit: contain; vertical-align: middle; } /* ---- Account (profile) dropdown ---- Each row was an
  • wrapping , so both carried padding: 60px rows in a 189px menu. Now: the li is a plain wrapper, the link is the 44px row (icon + label, 15px), menu 248px wide, same hover/active as the other header menus. */ :root:root body .header .navbar-nav.ml-auto .dropdown-menu { min-width: 248px; padding: 8px 6px; } :root:root body .header .navbar-nav.ml-auto .dropdown-menu li.dropdown-item { padding: 0; background: transparent; } :root:root body .header .navbar-nav.ml-auto .dropdown-menu li.dropdown-item > a.dropdown-item { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; padding: 0 12px !important; border-radius: 8px; white-space: nowrap; } :root:root body .header .navbar-nav.ml-auto .dropdown-menu li.dropdown-item > a.dropdown-item::before { flex: 0 0 20px; width: 20px; font-family: "Font Awesome 5 Pro"; font-weight: 300; font-size: 16px; line-height: 1; text-align: center; color: #6b7280; content: "\f007"; } :root:root body .header .navbar-nav.ml-auto .dropdown-menu li.dropdown-item > a.dropdown-item:hover { background: #f3f4ff; } :root:root body .header .navbar-nav.ml-auto .dropdown-menu li.dropdown-item > a.dropdown-item:hover::before { color: var(--sc-blue, #2563eb); } :root:root body .header .navbar-nav.ml-auto .dropdown-menu li[menuitemname="Edit Account Details"] > a.dropdown-item::before { content: "\f2c2"; } :root:root body .header .navbar-nav.ml-auto .dropdown-menu li[menuitemname="User Management"] > a.dropdown-item::before { content: "\f509"; } :root:root body .header .navbar-nav.ml-auto .dropdown-menu li[menuitemname="Contacts"] > a.dropdown-item::before { content: "\f2b9"; } :root:root body .header .navbar-nav.ml-auto .dropdown-menu li[menuitemname="Email History"] > a.dropdown-item::before { content: "\f0e0"; } :root:root body .header .navbar-nav.ml-auto .dropdown-menu li[menuitemname="Account Security"] > a::before, :root:root body .header .navbar-nav.ml-auto .dropdown-menu li[menuitemname="Security Settings"] > a.dropdown-item::before { content: "\f3ed"; } :root:root body .header .navbar-nav.ml-auto .dropdown-menu li[menuitemname="Your Profile"] > a.dropdown-item::before { content: "\f007"; } :root:root body .header .navbar-nav.ml-auto .dropdown-menu li[menuitemname="Switch Account"] > a.dropdown-item::before { content: "\f074"; } :root:root body .header .navbar-nav.ml-auto .dropdown-menu li[menuitemname="Change Password"] > a.dropdown-item::before { content: "\f084"; } :root:root body .header .navbar-nav.ml-auto .dropdown-menu li[menuitemname="Logout"] > a.dropdown-item::before { content: "\f2f5"; } :root:root body .header .navbar-nav.ml-auto .dropdown-menu .dropdown-divider { margin: 6px 8px; } :root:root[data-bs-theme="dark"] body .header .navbar-nav.ml-auto .dropdown-menu li.dropdown-item > a.dropdown-item::before { color: #9ca3af; } :root:root[data-bs-theme="dark"] body .header .navbar-nav.ml-auto .dropdown-menu li.dropdown-item > a.dropdown-item:hover { background: rgba(99,102,241,.18); } :root:root[data-bs-theme="dark"] body .header .navbar-nav.ml-auto .dropdown-menu li.dropdown-item > a.dropdown-item:hover::before { color: #93c5fd; } /* ---- Logged-in main menu dropdowns: same row design as the account menu, with an icon per item (>= 1200px) ---- */ @media (min-width: 1200px) { :root:root body .header #nav .dropdown-menu { min-width: 248px; padding: 8px 6px; } :root:root body .header #nav .dropdown-menu li.dropdown-item { padding: 0; background: transparent; } :root:root body .header #nav .dropdown-menu li.dropdown-item > a.dropdown-item { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; padding: 0 12px !important; border-radius: 8px; white-space: nowrap; } :root:root body .header #nav .dropdown-menu li.dropdown-item > a.dropdown-item::before { flex: 0 0 20px; width: 20px; font-family: "Font Awesome 5 Pro"; font-weight: 300; font-size: 16px; line-height: 1; text-align: center; color: #6b7280; content: "\f105"; } :root:root body .header #nav .dropdown-menu li.dropdown-item > a.dropdown-item:hover { background: #f3f4ff; } :root:root body .header #nav .dropdown-menu li.dropdown-item > a.dropdown-item:hover::before { color: var(--sc-blue, #2563eb); } :root:root body .header #nav .dropdown-menu li[menuitemname="My Services"] > a.dropdown-item::before { content: "\f233"; } :root:root body .header #nav .dropdown-menu li[menuitemname="Order New Services"] > a.dropdown-item::before { content: "\f217"; } :root:root body .header #nav .dropdown-menu li[menuitemname="View Available Addons"] > a.dropdown-item::before { content: "\f12e"; } :root:root body .header #nav .dropdown-menu li[menuitemname="My Domains"] > a.dropdown-item::before { content: "\f0ac"; } :root:root body .header #nav .dropdown-menu li[menuitemname="Renew Domains"] > a.dropdown-item::before { content: "\f2f1"; } :root:root body .header #nav .dropdown-menu li[menuitemname="Register a New Domain"] > a.dropdown-item::before { content: "\f055"; } :root:root body .header #nav .dropdown-menu li[menuitemname="Transfer a Domain to Us"] > a.dropdown-item::before { content: "\f362"; } :root:root body .header #nav .dropdown-menu li[menuitemname="Domain Search"] > a.dropdown-item::before { content: "\f002"; } :root:root body .header #nav .dropdown-menu li[menuitemname="My Invoices"] > a.dropdown-item::before { content: "\f571"; } :root:root body .header #nav .dropdown-menu li[menuitemname="My Quotes"] > a.dropdown-item::before { content: "\f15c"; } :root:root body .header #nav .dropdown-menu li[menuitemname="Mass Payment"] > a.dropdown-item::before { content: "\f09d"; } :root:root body .header #nav .dropdown-menu li[menuitemname="Add Funds"] > a.dropdown-item::before { content: "\f555"; } :root:root body .header #nav .dropdown-menu li[menuitemname="Tickets"] > a.dropdown-item::before { content: "\f3ff"; } :root:root body .header #nav .dropdown-menu li[menuitemname="Announcements"] > a.dropdown-item::before { content: "\f0a1"; } :root:root body .header #nav .dropdown-menu li[menuitemname="Knowledgebase"] > a.dropdown-item::before { content: "\f02d"; } :root:root body .header #nav .dropdown-menu li[menuitemname="Downloads"] > a.dropdown-item::before { content: "\f019"; } :root:root body .header #nav .dropdown-menu li[menuitemname="Network Status"] > a.dropdown-item::before { content: "\f012"; } :root:root[data-bs-theme="dark"] body .header #nav .dropdown-menu li.dropdown-item > a.dropdown-item::before { color: #9ca3af; } :root:root[data-bs-theme="dark"] body .header #nav .dropdown-menu li.dropdown-item > a.dropdown-item:hover { background: rgba(99,102,241,.18); } :root:root[data-bs-theme="dark"] body .header #nav .dropdown-menu li.dropdown-item > a.dropdown-item:hover::before { color: #93c5fd; } } /* ---- Dashboard: one border system + typography pass (ui-ux-pro-max review, 2026-10-16) ---- Found: home panels had no border (shadow only) while the sidebar cards had a 1px border and 16px radius; the panel header rule (#e5e7eb) and Bootstrap's list-group top border (#ddd) stacked into a double line; inner dividers used three different greys; the last service row kept an inline #ddd bottom border; panel text sat 32px in while the header sat 22px in; empty card footers left a gap; the service domain line was 600-weight like the name. System: outer border #e5e7eb, inner divider #eef0f5, containers 16px, tiles/banners 12px, text edge 22px. */ :root:root body .client-home-cards .card { border: 1px solid #e5e7eb; border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); } :root:root body .client-home-cards .card > .card-header { border-bottom: 1px solid #eef0f5; border-radius: 16px 16px 0 0; } :root:root body .client-home-cards .card > .list-group { border-top: 0 !important; border-radius: 0 0 16px 16px; } :root:root body .client-home-cards .list-group-item { border-bottom: 1px solid #eef0f5 !important; } :root:root body .client-home-cards .list-group-item:last-child { border-bottom: 0 !important; } :root:root body .client-home-cards .card > .card-body { padding: 20px 22px; } :root:root body .client-home-cards .card > .card-footer { border-top: 1px solid #eef0f5; } :root:root body .client-home-cards .card > .card-footer:not(:has(*)) { display: none; } :root:root body .client-home-cards .card > .card-footer.ph-card-cta { border-top: 1px solid #eef0f5; } :root:root body .sidebar .card-sidebar .card-header { border-bottom-color: #eef0f5; } :root:root body .sidebar .card-sidebar .list-group-item { border-bottom-color: #eef0f5; } :root:root body .client-home-cards .div-service-name .text-domain { font-size: 14px; font-weight: 400; color: #6b7280; } :root:root body .tiles .tile .title { color: rgba(37, 38, 94, .78); } :root:root body .tiles .tile .sub:not(.is-warn):not(.is-bad):not(.is-ok) { color: rgba(37, 38, 94, .76); } :root:root[data-bs-theme="dark"] body .client-home-cards .card { border-color: #23264f; box-shadow: none; } :root:root[data-bs-theme="dark"] body .client-home-cards .card > .card-header, :root:root[data-bs-theme="dark"] body .client-home-cards .card > .card-footer, :root:root[data-bs-theme="dark"] body .client-home-cards .list-group-item, :root:root[data-bs-theme="dark"] body .sidebar .card-sidebar .card-header, :root:root[data-bs-theme="dark"] body .sidebar .card-sidebar .list-group-item { border-color: #1c1e42 !important; } :root:root[data-bs-theme="dark"] body .client-home-cards .list-group-item:last-child { border-bottom: 0 !important; } :root:root[data-bs-theme="dark"] body .client-home-cards .div-service-name .text-domain { color: #9ca3af; } :root:root[data-bs-theme="dark"] body .tiles .tile .title, :root:root[data-bs-theme="dark"] body .tiles .tile .sub:not(.is-warn):not(.is-bad):not(.is-ok) { color: #b6b8e0; } /* second pass: text inside panel bodies had its own 10px 15px padding (text edge 37px vs header 22px); sidebar footer buttons stuck out 10px; CTA footer was white in dark mode */ :root:root body .client-home-cards .card > .card-body > p { padding: 0; margin: 0 0 8px; } :root:root body .client-home-cards .card > .card-body > p:last-child { margin-bottom: 0; } :root:root body .sidebar .card-sidebar .card-footer { padding-left: 22px; padding-right: 22px; } :root:root body .client-home-cards .list-group-item .small, :root:root body .client-home-cards .list-group-item small { padding-left: 0; } :root:root[data-bs-theme="dark"] body .client-home-cards .card > .card-footer { background: transparent; } :root:root body .client-home-cards .card > .list-group { border-bottom: 0 !important; } :root:root body .sidebar .card-sidebar .card-footer { padding-left: 22px !important; padding-right: 22px !important; } /* ---- Menu position = stablecluster.com (measured live at 1280/1366/1440/1600/1920/2200) ---- The marketing header is: logo | menu centred in the free space | fixed ~420px right cluster (search, Log In, Register). First button = logo end + (free space - menu width) / 2 (e.g. 355 at 1440, 595 at 1920), buttons 103px wide with 8px gaps. WHMCS had a different right cluster width, so its menu sat elsewhere and jumped when moving between the two sites. Now the right cluster is a fixed 420px (items right-aligned) and the menu (visitor mega menu and client menu) is centred in what is left, with the marketing button width and gap. */ @media (min-width: 1440px) { :root:root body .header .sc-navbar > .container > .sc-toolbar { flex: 0 0 420px; justify-content: flex-end; } :root:root body .header #mainNavbar { display: flex; flex: 1 1 auto; justify-content: center; } :root:root body .header #mainNavbar #nav { margin: 0 !important; } :root:root body .header #mainNavbar .ph-mega { gap: 8px; } :root:root body .header #mainNavbar .ph-mega .ph-mega-btn { padding-left: 13.5px; padding-right: 13.5px; } } @media (min-width: 1440px) { :root:root body .header #mainNavbar .ph-mega { margin: 0 !important; } } /* Logged-in clients: the account menu (Hello, ...) lives inside #mainNavbar next to the menu, so it was pushed around by the centring. Let #mainNavbar dissolve (display: contents) so logo | menu | account | bell+cart are siblings; account + toolbar = the same 420px right cluster. */ @media (min-width: 1440px) { :root:root body .header .sc-navbar #mainNavbar:has(> ul.ml-auto) { display: contents !important; } :root:root body .header .sc-navbar #mainNavbar:has(> ul.ml-auto) > #nav { flex: 1 1 auto; justify-content: center; margin: 0 !important; } :root:root body .header .sc-navbar #mainNavbar:has(> ul.ml-auto) > ul.ml-auto { flex: 0 0 328px; justify-content: flex-end; margin: 0 !important; padding-right: 12px; } :root:root body .header .sc-navbar > .container > .sc-toolbar:has(+ *), :root:root body .header .sc-navbar:has(#mainNavbar > ul.ml-auto) > .container > .sc-toolbar { flex: 0 0 auto; } } /* "More Features" toggle on the homepage plan cards: same fix as the cart (24px side padding like the tick list, no native marker, chevron, 44px target). */ :root:root body .sc-plan .sc-plan-more { margin: 0; padding: 0 24px 6px; border-top: 1px solid #eef0f5; } :root:root body .sc-plan .sc-plan-more > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--sc-blue, #2563eb); user-select: none; } :root:root body .sc-plan .sc-plan-more > summary::-webkit-details-marker { display: none; } :root:root body .sc-plan .sc-plan-more > summary::marker { content: ""; } :root:root body .sc-plan .sc-plan-more > summary::after { content: ""; width: 8px; height: 8px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .18s ease, margin .18s ease; } :root:root body .sc-plan .sc-plan-more[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); } :root:root body .sc-plan .sc-plan-more > summary:hover { color: #1d4ed8; } :root:root body .sc-plan .sc-plan-more .sc-plan-ticks { padding: 4px 0 8px; } :root:root[data-bs-theme="dark"] body .sc-plan .sc-plan-more { border-top-color: #23264f; } :root:root[data-bs-theme="dark"] body .sc-plan .sc-plan-more > summary { color: #93c5fd; } @media (max-width: 767.98px) { :root:root body .sc-plan .sc-plan-more { padding-inline: 20px; } } @media (prefers-reduced-motion: reduce) { :root:root body .sc-plan .sc-plan-more > summary::after { transition: none; } }