@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #6A1FC7;
--secondary: #BAFF94;
--accent: #BAFF94;
--success: #10b981;
--warning: #f59e0b;
--danger: #ef4444;
--dark: #fff;
--gray-50: #f8f9fc;
--gray-100: #f8f9fc;
--gray-200: #e8e7ed;
--gray-300: #d4d2db;
--gray-400: #b8b6c1;
--gray-500: #fff;
--gray-600: #fff;
--gray-700: #fff;
--gray-900: #fff;
--white: #fff;
}
:root {
--primary: #6A1FC7;
--secondary: #BAFF94;
--gray-100: #f8f9fc;
--gray-300: #d4d2db;
--gray-600: #fff;
--gray-900: #fff;
--white: #fff;
}
body {
font-family: "Inter", sans-serif;
color: var(--gray-900);
line-height: 1.6;
min-height: 100vh;
overflow-x: hidden;
background: #f8f9fc;
}
html {
background: #f8f9fc;
}
.portal-container {
display: flex;
min-height: 100vh;
background: #070011;
}
.sidebar {
width: 280px;
position: fixed;
left: 0;
top: 0;
bottom: 0;
z-index: 200;
overflow-y: auto;
transition: transform 0.4s ease;
background: radial-gradient(circle at 70% 20%, #140030 0%, #050012 70%, #000008 100%);
color: #ddd;
box-shadow: 20px 0 30px rgba(106, 31, 199, 0.05);
}
.sidebar.hide {
transform: translateX(-100%);
}
.sidebar-logo {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin: 0 auto;
}
.sidebar-logo {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 25px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}
.sidebar-logo img {
max-width: 100px;
border-radius: 50px;
background: linear-gradient(135deg, #6A1FC7, #6A1FC7);
padding: 10px;
box-shadow: 0 0 20px rgba(106, 31, 199, 0.4);
transition: all 0.3s ease;
}
.sidebar-logo img:hover {
transform: scale(1.07);
box-shadow: 0 0 25px rgba(106, 31, 199, 0.6);
}
.logo-icon {
width: 42px;
height: 42px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
font-weight: 900;
font-size: 1.3rem;
}
.logo-text {
color: #fff;
font-weight: 900;
font-size: 1.5rem;
margin: 0 auto;
}
.sidebar-toggle {
background: none;
border: none;
color: #fff;
font-size: 1.4rem;
cursor: pointer;
display: none;
}
.nav-section {
padding: 1rem;
}
.nav-section-title {
font-size: 0.7rem;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.4);
margin-bottom: 0.5rem;
}
#sidebar .nav-item {
display: flex;
align-items: center;
padding: 0.9rem 1rem;
color: rgba(255, 255, 255, 0.7);
border-radius: 10px;
cursor: pointer;
transition: 0.3s;
}
#sidebar .nav-item:hover {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
transform: translateX(6px);
}
#sidebar .nav-item.active {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
}
.nav-icon {
margin-right: 0.8rem;
}
.main-content {
flex: 1;
margin-left: 280px;
transition: margin 0.4s ease;
min-height: 100vh;
background-color: #080019;
background-image: radial-gradient( ellipse 65% 50% at 50% 50%, rgba(106, 31, 199, 0.28) 0%, rgba(106, 31, 199, 0.22) 25%, rgba(50, 10, 90, 0.14) 45%, rgba(25, 8, 55, 0.08) 60%, rgba(10, 2, 25, 0) 75% ), radial-gradient( ellipse 70% 90% at 0% 50%, rgba(5, 0, 16, 0) 30%, rgba(10, 2, 25, 0.75) 70%, #03000b 95% ), radial-gradient( ellipse 70% 90% at 100% 50%, rgba(5, 0, 16, 0) 30%, rgba(10, 2, 25, 0.75) 70%, #03000b 95% ), linear-gradient( to bottom, rgba(8, 0, 25, 0.9) 0%, rgba(8, 0, 25, 0.0) 35%, rgba(8, 0, 25, 0.0) 65%, rgba(5, 0, 16, 0.9) 100% );
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.topbar {
height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 48.5px 1.5rem;

top: 0;
z-index: 150;
color: #fff;
box-shadow: 0 0 25px rgba(106, 31, 199, 0.15);
}
.menu-btn {
background: none;
border: none;
font-size: 1.5rem;
color: var(--gray-700);
cursor: pointer;
display: none;
}
.search-container {
flex: 1;
margin: 0 1.5rem;
max-width: 500px;
}
.search-bar {
display: flex;
align-items: center;
background: #070011;
border-radius: 20px;
padding: 0.6rem 1rem;
background: rgba(20, 10, 40, 0.35);
border: 1px solid rgba(106, 31, 199, 0.3);
backdrop-filter: blur(12px);
transition: 0.4s ease;
box-shadow: 0 0 25px rgba(106, 31, 199, 0.15);
}
.search-bar i {
color: var(--gray-500);
margin-right: 0.6rem;
}
.search-bar input {
border: none;
background: none;
outline: none;
width: 100%;
color: #fff;
}
.topbar-actions {
display: flex;
align-items: center;
gap: 1rem;
}
.notification-btn {
width: 59px;
height: 59px;
border: none;
border-radius: 14px;
background: var(--white);
position: relative;
cursor: pointer;
transition: 0.3s;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
.notification-btn:hover {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
}
.notification-badge {
position: absolute;
top: 10px;
right: 10px;
width: 10px;
height: 10px;
background: var(--danger);
border-radius: 50%;
border: 2px solid var(--white);
}
.user-menu {
position: relative;
display: flex;
align-items: center;
gap: 0.7rem;
background: var(--white);
border-radius: 20px;
padding: 0.4rem 0.8rem;
cursor: pointer;
background: rgba(20, 10, 40, 0.35);
border: 1px solid rgba(106, 31, 199, 0.3);
backdrop-filter: blur(12px);
transition: 0.4s ease;
box-shadow: 0 0 25px rgba(106, 31, 199, 0.15);
}
.user-avatar {
width: 38px;
height: 38px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary), var(--accent));
color: #fff;
font-weight: 700;
}
.user-name {
font-weight: 700;
font-size: 0.95rem;
}
.user-plan {
font-size: 0.8rem;
color: var(--gray-600);
}
.dropdown {
position: absolute;
top: calc(100% + 10px);
right: 0;
z-index: 10;
background: var(--white);
border-radius: 14px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
list-style: none;
padding: 0.5rem 0;
display: none;
min-width: 260px;
width: max-content;
max-width: min(280px, calc(100vw - 24px));
margin: 0;
background: rgba(20, 10, 40, 1);
border: 1px solid rgba(106, 31, 199, 0.3);
backdrop-filter: blur(12px);
transition: 0.4s ease;
box-shadow: 0 0 25px rgba(106, 31, 199, 0.15);
}
.dropdown.show {
display: block;
animation: fadeIn 0.3s ease;
}
.dropdown li {
display: flex;
align-items: center;
gap: 0.6rem;
cursor: pointer;
color: var(--gray-700);
font-weight: 500;
transition: 0.3s;
}
.dashboard-content {
padding: 2rem;
max-width: 1800px;
margin: 0 auto;
}
.welcome-text {
font-size: 2rem;
font-weight: 900;
margin-bottom: 0.3rem;
}
.welcome-subtitle {
color: var(--gray-600);
margin-bottom: 2rem;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.stat-card {
background: #fff;
padding: 1.5rem;
border-radius: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
transition: 0.3s;
}
.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.stat-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.stat-label {
color: var(--gray-600);
font-weight: 600;
}
.stat-icon {
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.primary {
background: linear-gradient(135deg, var(--primary), var(--secondary));
}
.success {
background: linear-gradient(135deg, var(--success), #0d9663);
}
.secondary {
background: linear-gradient(135deg, var(--secondary), #6A1FC7);
}
.warning {
background: linear-gradient(135deg, var(--warning), #ef4444);
}
.stat-value {
font-size: 2rem;
font-weight: 900;
margin-bottom: 0.5rem;
}
.stat-change {
font-weight: 600;
font-size: 0.9rem;
padding: 0.4rem 0.8rem;
border-radius: 8px;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.positive {
background: rgba(16, 185, 129, 0.1);
color: var(--success);
}
.negative {
background: rgba(239, 68, 68, 0.1);
color: var(--danger);
}
.main-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
margin-bottom: 2rem;
}
.chart-card,
.quick-actions-card,
.sites-section {
background: var(--white);
border-radius: 24px;
padding: 2rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.chart-container {
height: 250px;
display: flex;
align-items: flex-end;
gap: 0.8rem;
}
.chart-bar {
flex: 1;
background: linear-gradient(180deg, var(--primary), var(--secondary));
border-radius: 12px 12px 0 0;
transition: 0.3s;
}
.chart-bar:hover {
transform: translateY(-8px);
}
.action-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.action-item {
display: flex;
align-items: center;
padding: 1rem;
background: var(--gray-50);
border-radius: 18px;
transition: 0.3s;
}
.action-icon {
width: 48px;
height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
font-size: 1.2rem;
margin-right: 1rem;
}
.action-title {
font-weight: 700;
font-size: 1rem;
color: var(--gray-900);
}
.sites-section table {
width: 100%;
border-collapse: separate;
border-spacing: 0 0.75rem;
}
.sites-section td,
th {
padding: 1rem;
text-align: left;
}
.site-info {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.site-icon {
width: 52px;
height: 52px;
border-radius: 16px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
}
.status-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.4rem 0.8rem;
border-radius: 20px;
font-weight: 600;
font-size: 0.9rem;
}
.status-badge.active {
background: rgba(16, 185, 129, 0.1);
color: var(--success);
}
.action-btn {
padding: 0.6rem 1rem;
background: var(--white);
border: 2px solid var(--gray-200);
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: 0.3s;
}
.action-btn:hover {
border-color: var(--primary);
color: var(--primary);
}
.action-btn.primary {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
border: none;
}
@media (max-width: 1200px) {
.main-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 992px) {
.sidebar {
transform: translateX(-100%);
}
.sidebar.show {
transform: translateX(0);
}
.main-content {
margin-left: 0;
}
.menu-btn {
display: block;
}
.sidebar-toggle {
display: block;
}
.search-container {
display: none;
}
.topbar {
padding: 0 1rem;
}
.dashboard-content {
padding: 1.2rem;
}
}
@media (max-width: 768px) {
.welcome-text {
font-size: 1.6rem;
}
.stat-value {
font-size: 1.6rem;
}
.stat-card {
padding: 1.2rem;
}
.chart-container {
height: 200px;
}
.sites-section table,
.sites-section thead {
display: block;
}
.sites-section tr {
display: block;
background: var(--white);
margin-bottom: 1rem;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.sites-section td {
display: flex;
justify-content: space-between;
align-items: center;
border: none;
padding: 0.8rem 1rem;
}
.sites-section th {
display: none;
}
.site-info {
flex-direction: column;
align-items: flex-start;
}
}
@media (max-width: 480px) {
.topbar-actions {
gap: 0.5rem;
}
.notification-btn {
width: 40px;
height: 40px;
}
.user-menu {
padding: 0.3rem 0.6rem;
}
.user-avatar {
width: 32px;
height: 32px;
font-size: 0.8rem;
}
.user-name {
font-size: 0.8rem;
}
.stats-grid {
gap: 1rem;
}
.stat-card {
padding: 1rem;
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
.sites-section {
padding: 1.5rem;
}
.sites-section table,
.sites-section thead,
.sites-section tbody,
.sites-section tr,
.sites-section td {
display: block;
width: 100%;
}
.sites-section thead {
display: none;
}
.sites-section tr {
background: var(--white);
border-radius: 16px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
margin-bottom: 1.2rem;
overflow: hidden;
padding: 1.2rem;
}
.sites-section td {
border: none;
padding: 0.6rem 0;
}
.site-info {
flex-direction: row;
align-items: center;
gap: 1rem;
}
.site-icon {
width: 54px;
height: 54px;
flex-shrink: 0;
border-radius: 14px;
}
.site-name {
font-size: 1.05rem;
font-weight: 700;
}
.site-url {
font-size: 0.9rem;
color: var(--gray-600);
}
.status-badge {
background: rgba(16, 185, 129, 0.1);
color: var(--success);
display: inline-block;
margin: 0.5rem 0;
}
.sites-section td:nth-child(3),
.sites-section td:nth-child(4) {
font-size: 1rem;
font-weight: 600;
color: var(--gray-900);
}
.action-btn {
width: 100%;
padding: 0.75rem 1rem;
border-radius: 10px;
text-align: center;
font-size: 0.95rem;
font-weight: 600;
margin-top: 0.8rem;
background: var(--gray-50);
}
.action-btn.primary {
width: auto;
padding: 0.8rem 1.2rem;
font-size: 0.95rem;
}
}
.time-btn {
background: none;
border: none;
padding: 0.45rem 0.9rem;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
color: var(--gray-600);
cursor: pointer;
transition: 0.3s;
}
.time-btn.active {
background: var(--white);
color: var(--primary);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.chart-container {
height: 200px;
display: flex;
align-items: flex-end;
gap: 0.8rem;
}
.chart-bar {
flex: 1;
background: linear-gradient(180deg, var(--secondary), var(--primary));
border-radius: 10px 10px 0 0;
height: 60%;
transition: 0.3s;
}
.chart-bar:hover {
transform: translateY(-4px);
}
.nav-item a {
color: #fff;
}
.nav-item a:hover {
color: #fff;
}
.tiles .tile-card {
position: relative;
display: block;
background: #fff;
border-radius: 22px;
padding: 1.8rem 1.5rem;
box-shadow: 0 0 30px rgba(106, 31, 199,0.03);
transition: 0.3s ease;
text-decoration: none;
color: #fff;
overflow: hidden;
background: #100028;
color: #fff;
background: rgba(20, 10, 40, 0.35);
border: 1px solid rgba(106, 31, 199, 0.3);
backdrop-filter: blur(12px);
transition: 0.4s ease;
box-shadow: 0 0 25px rgba(106, 31, 199, 0.15);
}
.tiles .tile-card:hover {
transform: translateY(-4px);
}
.tile-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.tile-title {
font-size: 0.95rem;
font-weight: 700;
color: #6b6979;
}
.tile-icon {
width: 38px;
height: 38px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.1rem;
}
.gradient-orange {
background: linear-gradient(135deg, #6A1FC7, #BAFF94);
}
.gradient-green {
background: #10b981;
}
.gradient-purple {
background: #6A1FC7;
}
.tile-stat {
font-size: 1.9rem;
font-weight: 900;
color: #fff;
margin-bottom: 0.6rem;
}
.tile-badge {
display: inline-block;
font-size: 0.9rem;
font-weight: 700;
border-radius: 10px;
padding: 0.4rem 0.8rem;
}
.tile-badge.positive {
background: rgba(16, 185, 129, 0.12);
color: #059669;
}
.tile-badge.negative {
background: rgba(239, 68, 68, 0.12);
color: #dc2626;
}
@media (max-width: 768px) {
.tile-card {
padding: 1.2rem 1rem;
border-radius: 18px;
}
.tile-stat {
font-size: 1.5rem;
}
.tile-icon {
width: 34px;
height: 34px;
font-size: 1rem;
}
}
.hostdiff-panels {
margin-top: 2rem;
}
.hostdiff-panels .main-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
}
.hostdiff-card {
background: #fff;
border-radius: 24px;
box-shadow: 0 0 30px rgba(106, 31, 199,0.03);
overflow: hidden;
transition: 0.3s ease;
}
.hostdiff-card:hover {
transform: translateY(-4px);
}
.hostdiff-card .card-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
padding: 1.2rem 1.5rem;
}
.hostdiff-card .card-title {
font-weight: 800;
color: #fff;
font-size: 1.15rem;
}
.hostdiff-card .card-header i {
color: #BAFF94;
}
.hostdiff-card .card-body {
padding: 1.8rem 1.5rem;
color: #4a4858;
font-size: 0.95rem;
line-height: 1.7;
}
.hostdiff-card .list-group {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.5rem;
}
.hostdiff-card .list-group-item {
background: #f8f9fc;
border: none;
border-radius: 16px;
padding: 1rem;
font-weight: 600;
display: flex;
align-items: center;
transition: 0.3s;
}
.hostdiff-card .list-group-item:hover {
background: #fff;
box-shadow: 0 8px 20px rgba(255, 140, 66, 0.15);
}
.hostdiff-card .card-footer {
background: #f8f9fc;
border-top: 1px solid rgba(0, 0, 0, 0.04);
padding: 1.2rem 1.5rem;
}
.hostdiff-card {
animation: fadeUp .5s ease both;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(25px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 992px) {
.hostdiff-panels .main-grid {
grid-template-columns: 1fr;
}
}
.hostdiff-dashboard,
.hostdiff-dashboard {
color: var(--gray-900);
animation: fadeIn 0.5s ease;
}
.tile-card {
display: block;
background: #fff;
border-radius: 22px;
padding: 1.5rem 1.2rem;
box-shadow: 0 0 30px rgba(106, 31, 199,0.03);
transition: 0.3s;
text-decoration: none;
color: var(--gray-900);
}
.tile-card:hover {
transform: translateY(-4px);
}
.tile-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.tile-title {
font-weight: 700;
color: var(--gray-600);
}
.tile-icon {
width: 38px;
height: 38px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.gradient-orange {
background: linear-gradient(135deg, var(--primary), var(--secondary));
}
.gradient-green {
background: linear-gradient(135deg, #10b981, #059669);
}
.gradient-purple {
background: linear-gradient(135deg, #6A1FC7, #6A1FC7);
}
.tile-stat {
font-size: 1.9rem;
font-weight: 900;
margin-top: 0.8rem;
}
.tile-badge {
display: inline-block;
margin-top: 0.4rem;
font-weight: 700;
font-size: 0.9rem;
border-radius: 10px;
padding: 0.4rem 0.8rem;
}
.tile-badge.positive {
background: rgba(16, 185, 129, 0.12);
color: #059669;
}
.tile-badge.negative {
background: rgba(239, 68, 68, 0.12);
color: #dc2626;
}
.main-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
margin-top: 2rem;
}
.chart-card,
.quick-actions-card {
background: var(--white);
border-radius: 24px;
box-shadow: 0 0 30px rgba(106, 31, 199,0.03);
overflow: hidden;
background: #100028;
color: #fff;
background: rgba(20, 10, 40, 0.35);
border: 1px solid rgba(106, 31, 199, 0.3);
backdrop-filter: blur(12px);
transition: 0.4s ease;
box-shadow: 0 0 25px rgba(106, 31, 199, 0.15);
}
.card-header {
display: flex;
justify-content: space-between;
}
.card-title {
font-weight: 800;
color: var(--gray-900);
}
.time-selector {
display: flex;
gap: 0.5rem;
}
.time-btn {
background: none;
border: none;
font-weight: 600;
color: var(--gray-600);
padding: 0.4rem 0.8rem;
border-radius: 8px;
cursor: pointer;
}
.time-btn.active {
background: var(--white);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
color: var(--primary);
}
.chart-container {
display: flex;
align-items: flex-end;
height: 240px;
padding: 1.5rem;
gap: 0.8rem;
}
.chart-bar {
flex: 1;
border-radius: 10px 10px 0 0;
background: linear-gradient(180deg, var(--secondary), var(--primary));
transition: 0.3s;
}
.chart-bar:hover {
transform: translateY(-6px);
}
.action-list {
display: flex;
flex-direction: column;
padding: 1.5rem;
gap: 1rem;
}
.action-item {
display: flex;
align-items: center;
background: var(--gray-100);
border-radius: 18px;
padding: 1rem;
transition: 0.3s;
background: rgba(20, 10, 40, 0.35);
border: 1px solid rgba(106, 31, 199, 0.3);
backdrop-filter: blur(12px);
transition: 0.4s ease;
box-shadow: 0 0 25px rgba(106, 31, 199, 0.15);
}
.action-icon {
width: 48px;
height: 48px;
border-radius: 14px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.2rem;
margin-right: 1rem;
}
.action-title {
font-weight: 700;
color: var(--gray-900);
}
.action-description {
font-size: 0.85rem;
color: var(--gray-600);
}
.sites-section {
margin-top: 2rem;
background: #fff;
border-radius: 24px;
box-shadow: 0 0 30px rgba(106, 31, 199,0.03);
overflow: hidden;
background: #100028;
color: #fff;
background: rgba(20, 10, 40, 0.35);
border: 1px solid rgba(106, 31, 199, 0.3);
backdrop-filter: blur(12px);
transition: 0.4s ease;
box-shadow: 0 0 25px rgba(106, 31, 199, 0.15);
}
.sites-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 0.75rem;
padding: 1.5rem;
}
.sites-table th {
text-align: left;
color: var(--gray-600);
font-weight: 600;
padding: 1rem;
}
.sites-table td {
padding: 1rem;
background: rgba(20, 10, 40, 0.35);
backdrop-filter: blur(12px);
transition: 0.4s ease;
}
.sites-section tbody tr {
background: transparent!important;
}
.site-info {
display: flex;
align-items: center;
gap: 1rem;
}
.site-icon {
width: 52px;
height: 52px;
border-radius: 16px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
}
.status-badge.active {
background: rgba(16, 185, 129, 0.1);
color: #059669;
border-radius: 20px;
padding: 0.4rem 0.8rem;
}
.action-btn {
border: none;
background: var(--gray-100);
padding: 0.6rem 1rem;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: 0.3s;
background: rgba(20, 10, 40, 0.35);
border: 1px solid rgba(106, 31, 199, 0.3);
backdrop-filter: blur(12px);
transition: 0.4s ease;
box-shadow: 0 0 25px rgba(106, 31, 199, 0.15);
}
.action-btn.primary {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
}
.action-btn:hover {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 992px) {
.main-grid {
grid-template-columns: 1fr;
}
.sites-section {
overflow-x: auto;
}
}
.performance-summary {
background: linear-gradient(135deg, #fcfcfc, #e6eefc);
border-radius: 20px;
padding: 1.2rem 1.5rem;
font-weight: 600;
color: #fff;
box-shadow: 0 0 30px rgba(106, 31, 199,0.03);;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
background: rgba(20, 10, 40, 0.35);
border: 1px solid rgba(106, 31, 199, 0.3);
backdrop-filter: blur(12px);
transition: 0.4s ease;
box-shadow: 0 0 25px rgba(106, 31, 199, 0.15);
}
.performance-summary i {
color: #6A1FC7;
font-size: 1.4rem;
}
.performance-summary strong {
color: #059669;
}
.notifications-wrapper {
position: relative;
}
.notif-dropdown {
display: none;
position: absolute;
right: 0;
top: 55px;
width: 320px;
z-index: 999;
border-radius: 16px;
background: rgba(25, 10, 45, 0.85);
backdrop-filter: blur(14px);
border: 1px solid rgba(106, 31, 199, 0.15);
box-shadow: 0 10px 40px rgba(106, 31, 199, 0.15);
overflow: hidden;
}
.notif-item {
display: flex;
align-items: center;
gap: 12px;
padding: 1rem;
border-bottom: 1px solid rgba(106, 31, 199, 0.08);
color: #e8e3ff;
text-decoration: none;
font-size: 0.95rem;
transition: all 0.25s ease;
}
.notif-item:hover {
background: rgba(106, 31, 199, 0.4);
box-shadow: inset 0 0 15px rgba(106, 31, 199, 0.25);
}
.notif-item i {
font-size: 1.1rem;
color: #6A1FC7;
}
.notif-empty {
padding: 1.2rem;
text-align: center;
color: #bfaeff;
font-size: 0.9rem;
background: rgba(20, 5, 45, 0.4);
}
.notif-footer {
padding: 0.8rem 1rem;
background: rgba(30, 10, 60, 0.4);
text-align: right;
border-top: 1px solid rgba(106, 31, 199, 0.1);
}
.notif-footer a {
color: #6A1FC7;
font-weight: 600;
text-decoration: none;
transition: color 0.2s ease;
}
.notif-footer a:hover {
color: #ffffff;
text-shadow: 0 0 8px rgba(106, 31, 199, 0.5);
}
.topbar-actions {
display: flex;
align-items: center;
gap: 1rem;
}
.cart-btn {
width: 59px;
height: 59px;
border: none;
border-radius: 14px;
background: var(--white);
position: relative;
cursor: pointer;
transition: 0.3s;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
color: var(--dark);
background: rgba(20, 10, 40, 0.35);
border: 1px solid rgba(106, 31, 199, 0.3);
backdrop-filter: blur(12px);
transition: 0.4s ease;
box-shadow: 0 0 25px rgba(106, 31, 199, 0.15);
}
.cart-btn:hover {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
}
.cart-badge {
position: absolute;
top: 10px;
right: 10px;
width: 10px;
height: 10px;
background: var(--danger);
border-radius: 50%;
border: 2px solid var(--white);
}
.notification-btn {
width: 59px;
height: 59px;
border: none;
border-radius: 14px;
background: var(--white);
position: relative;
cursor: pointer;
transition: 0.3s;
display: flex;
align-items: center;
justify-content: center;
color: var(--dark);
background: rgba(20, 10, 40, 0.35);
border: 1px solid rgba(106, 31, 199, 0.3);
backdrop-filter: blur(12px);
transition: 0.4s ease;
box-shadow: 0 0 25px rgba(106, 31, 199, 0.15);
font-size: 22px;
}
.notification-btn:hover {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: #fff;
}
.notification-badge {
position: absolute;
top: 10px;
right: 10px;
width: 10px;
height: 10px;
background: var(--danger);
border-radius: 50%;
border: 2px solid var(--white);
}
#order-standard_cart .cart-sidebar {
display: none;
}
#order-standard_cart .cart-body {
width: 100%!important;
}
.margin-bottom {
margin-bottom: 50px;
}
.breadcrumb-bar {
display: flex;
align-items: center;
gap: 0.6rem;
background: var(--white);
padding: 0.7rem 1.2rem;
border-radius: 14px;
box-shadow: 0 0 30px rgba(106, 31, 199,0.03);
margin-bottom: 1.2rem;
font-size: 0.95rem;
font-weight: 500;
color: var(--dark);
transition: all 0.3s ease;
background: #100028;
color: #fff;
transition: transform 0.3s ease, box-shadow 0.3s ease;
background: rgba(20, 10, 40, 0.35);
border: 1px solid rgba(106, 31, 199, 0.3);
backdrop-filter: blur(12px);
transition: 0.4s ease;
box-shadow: 0 0 25px rgba(106, 31, 199, 0.15);
}
.breadcrumb-bar a {
text-decoration: none;
color: var(--primary);
display: flex;
align-items: center;
gap: 0.3rem;
transition: color 0.2s ease;
}
.breadcrumb-bar a:hover {
color: var(--secondary);
}
.breadcrumb-bar i {
font-size: 1rem;
opacity: 0.8;
}
.breadcrumb-sep {
color: #999;
font-weight: 600;
font-size: 1rem;
}
.current {
color: #777;
font-weight: 600;
}
.breadcrumb{
background: transparent!important;
margin-bottom: 0px!important;
}
.dropdown li a {
color: var(--gray-700);
display: flex;
align-items: center;
gap: 0.6rem;
width: 100%;
padding: 0.7rem 1rem;
white-space: nowrap;
text-decoration: none;
}
.card {
color: #fff;
background: rgba(20, 10, 40, 0.35)!important;
border: 1px solid rgba(106, 31, 199, 0.3)!important;
backdrop-filter: blur(12px)!important;
transition: 0.4s ease!important;
box-shadow: 0 0 25px rgba(106, 31, 199, 0.15)!important;
}
.chart-card {
background: #ffffff;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.06);
padding: 1.5rem;
color: #222;
box-shadow: 0 0 30px rgba(106, 31, 199,0.03);
transition: all 0.3s ease;
background: #100028;
color: #fff;
background: rgba(20, 10, 40, 0.35);
border: 1px solid rgba(106, 31, 199, 0.3);
backdrop-filter: blur(12px);
transition: 0.4s ease;
box-shadow: 0 0 25px rgba(106, 31, 199, 0.15);
}
.chart-card .card-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
padding-bottom: 10px;
margin-bottom: 15px;
}
.chart-card .card-title {
font-weight: 700;
font-size: 18px;
color: #222;
}
.time-selector {
display: flex;
gap: 8px;
}
.time-btn {
background: #f6f6f9;
border: 1px solid rgba(0, 0, 0, 0.06);
padding: 6px 16px;
border-radius: 10px;
color: #444;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.04);
}
.time-btn:hover {
background: linear-gradient(135deg, #ff9966, #6A1FC7);
color: #fff;
border: none;
box-shadow: 0 4px 14px rgba(106, 31, 199, 0.4);
transform: translateY(-2px);
}
.time-btn.active {
background: linear-gradient(135deg, #ff7e5f, #6A1FC7);
color: #fff;
border: none;
box-shadow: 0 4px 16px rgba(106, 31, 199, 0.45);
transform: translateY(-1px);
}
.time-selector {
display: flex;
gap: 8px;
align-items: center;
}
.chart-container {
position: relative;
width: 100%;
height: 240px;
margin-top: 10px;
}
canvas#metricsChart {
background: transparent;
}
.chartjs-render-monitor text {
fill: #333 !important;
font-weight: 600;
}
.chartjs-render-monitor line {
stroke: rgba(0, 0, 0, 0.08) !important;
}
.chartjs-tooltip {
background: #fff !important;
color: #222 !important;
border-radius: 6px !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
font-size: 13px !important;
padding: 6px 10px !important;
}
.chart-card .chartjs-size-monitor,
.chart-card canvas {
border-radius: 12px;
}
.chart-card .chartjs-legend {
color: #222 !important;
}
.chart-card p,
.chart-card span,
.chart-card label {
color: #333 !important;
}
.chart-container-multi {
display: flex;
justify-content: space-between;
gap: 20px;
margin-top: 70px;
flex-wrap: wrap;
}
.chart-box {
flex: 1;
min-width: 280px;
background: #fff;
border-radius: 14px;
padding: 15px 20px;
box-shadow: 0 4px 15px rgba(0,0,0,0.04);
text-align: center;
transition: transform 0.3s ease;
}
.chart-box:hover {
transform: translateY(-4px);
box-shadow: 0 6px 22px rgba(0,0,0,0.08);
}
.chart-box h4 {
margin-bottom: 10px;
font-size: 0.95rem;
color: #333;
}
.chart-box canvas {
width: 100% !important;
height: 140px !important;
}
#frmDomainHomepage {
display: none!important;
}
#cPanelQuickShortcutsPanel .card-body{
padding:30px !important;
}
.cpanel-tools-grid{
display:grid !important;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr)) !important;
gap:16px !important;
}
.cpanel-tools-tile{
position:relative !important;
display:flex !important;
align-items:center !important;
gap:14px !important;
min-height:72px !important;
padding:18px 20px !important;
border:1px solid rgba(255,255,255,.08) !important;
border-radius:14px !important;
background:rgba(255,255,255,.03) !important;
text-decoration:none !important;
transition:all .25s ease !important;
overflow:hidden !important;
}
.cpanel-tools-tile:hover{
transform:translateY(-4px) !important;
background:rgba(106, 31, 199,.08) !important;
border-color:rgba(106, 31, 199,.45) !important;
box-shadow:
0 10px 30px rgba(106, 31, 199,.20) !important;
}
.cpanel-tools-tile__icon{
width:46px !important;
height:46px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:12px !important;
background:rgba(106, 31, 199,.12) !important;
flex-shrink:0 !important;
}
.cpanel-tools-tile__icon i{
font-size:18px !important;
color:#6A1FC7 !important;
}
.cpanel-tools-tile__label{
flex:1 !important;
color:#fff !important;
font-size:14px !important;
font-weight:600 !important;
line-height:1.4 !important;
text-align:left !important;
}
.cpanel-tools-tile__arrow{
opacity:.4 !important;
transition:.25s !important;
}
.cpanel-tools-tile__arrow i{
color:#fff !important;
font-size:12px !important;
}
.cpanel-tools-tile:hover .cpanel-tools-tile__arrow{
opacity:1 !important;
transform:translateX(4px) !important;
}
.cpanel-tools-help{
margin-top:25px !important;
padding-top:25px !important;
border-top:1px solid rgba(255,255,255,.08) !important;
display:flex !important;
justify-content:space-between !important;
align-items:center !important;
gap:20px !important;
}
.cpanel-tools-help__copy{
color:#c7c7d1 !important;
}
.cpanel-tools-help__copy strong{
color:#fff !important;
}
.cpanel-tools-help__accent{
color:#6A1FC7 !important;
}
.cpanel-tools-help__link{
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
padding:12px 18px !important;
border-radius:12px !important;
background:rgba(106, 31, 199,.12) !important;
color:#fff !important;
text-decoration:none !important;
transition:.25s !important;
}
.cpanel-tools-help__link:hover{
background:#6A1FC7 !important;
color:#fff !important;
}
@media(max-width:768px){
.cpanel-tools-grid{
grid-template-columns:1fr 1fr !important;
}
.cpanel-tools-help{
flex-direction:column !important;
text-align:center !important;
}
}
@media(max-width:480px){
.cpanel-tools-grid{
grid-template-columns:1fr !important;
}
}
.modal-footer {
background:transparent;
}
body:has(form.login-form) .welcome-section,
body:has(form.login-form) .breadcrumb-bar {
display: none !important;
}
.btn-reveal-pw:hover {
background: rgba(106, 31, 199, 0.3)!important;
}
#order-standard_cart .field-icon i {
color: #6A1FC7 !important;
}
select.form-control {
padding-bottom: 10px;
}
#order-standard_cart .form-control,
#order-standard_cart .field,
#order-standard_cart select.form-control,
#order-standard_cart input.form-control,
#order-standard_cart textarea.form-control{
height:56px !important;
min-height:56px !important;
background:#120025 !important;
border:1px solid rgba(106, 31, 199,.18) !important;
color:#fff !important;
border-radius:10px !important;
padding-left:48px !important;
padding-right:18px !important;
font-size:14px !important;
font-weight:500 !important;
box-shadow:none !important;
}
#order-standard_cart textarea.form-control{
height:120px !important;
padding-top:16px !important;
resize:vertical !important;
}
#order-standard_cart select.form-control{
appearance:none !important;
-webkit-appearance:none !important;
-moz-appearance:none !important;
color:#fff !important;
background-color:#120025 !important;
}
#order-standard_cart select.form-control option{
background:#120025 !important;
color:#fff !important;
}
#order-standard_cart .prepend-icon .field-icon{
left:16px !important;
top:50% !important;
transform:translateY(-50%) !important;
color:#6A1FC7 !important;
width:auto !important;
z-index:5 !important;
}
#order-standard_cart .form-group{
margin-bottom:14px !important;
}
#order-standard_cart input::placeholder,
#order-standard_cart textarea::placeholder{
color:rgba(255,255,255,.55) !important;
}
#order-standard_cart .field:focus,
#order-standard_cart .form-control:focus{
border-color:#6A1FC7 !important;
background:#16002e !important;
box-shadow:0 0 0 3px rgba(106, 31, 199,.15) !important;
}
#order-standard_cart #containerExistingUserSignin,
#order-standard_cart #containerNewUserSignup,
#order-standard_cart #containerNewUserSecurity{
background:rgba(255,255,255,.015) !important;
border:1px solid rgba(106, 31, 199,.12) !important;
border-radius:16px !important;
padding:20px !important;
}
#order-standard_cart .sub-heading{
margin:20px 0 22px !important;
text-align:center !important;
}
#order-standard_cart .sub-heading span{
padding:8px 18px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
line-height:1 !important;
}
#order-standard_cart .already-registered p{
margin:0 !important;
padding-top:10px !important;
text-align:left !important;
color:rgba(255,255,255,.85) !important;
}
#order-standard_cart .btn-info,
#order-standard_cart .btn-warning{
height:46px !important;
padding:0 22px !important;
border-radius:10px !important;
font-weight:600 !important;
}
#order-standard_cart .password-strength-meter{
margin-top:10px !important;
}
#order-standard_cart .password-strength-meter .progress{
height:10px !important;
border-radius:999px !important;
background:#1a0830 !important;
}
#order-standard_cart .checkout-security-msg{
margin-top:24px !important;
}
#order-standard_cart .radio-inline{
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
padding:8px 14px !important;
}
#order-standard_cart .alert-success{
font-size:15px !important;
font-weight:600 !important;
}
#order-standard_cart .marketing-email-optin{
margin-top:24px !important;
}
#order-standard_cart .marketing-email-optin p{
color:rgba(255,255,255,.75) !important;
}
#order-standard_cart .cart-sidebar{
display:none !important;
}
#order-standard_cart .cart-body{
width:100% !important;
max-width:100% !important;
flex:0 0 100% !important;
}
#order-standard_cart .row{
margin-left:-8px !important;
margin-right:-8px !important;
}
#order-standard_cart .row > div{
padding-left:8px !important;
padding-right:8px !important;
}
#order-standard_cart .sub-heading {
margin-top: 30px!important;
margin-bottom: 60px !important;
}
#containerExistingUserSignin{
padding:32px !important;
}
#containerExistingUserSignin .row{
margin-left:-10px !important;
margin-right:-10px !important;
}
#containerExistingUserSignin .row > div{
padding-left:10px !important;
padding-right:10px !important;
}
#containerExistingUserSignin .form-group{
margin-bottom:0 !important;
position:relative !important;
}
#containerExistingUserSignin .field-icon{
position:absolute !important;
left:18px !important;
top:50% !important;
transform:translateY(-50%) !important;
z-index:10 !important;
width:auto !important;
height:auto !important;
color:#6A1FC7 !important;
line-height:1 !important;
}
#containerExistingUserSignin .form-control,
#containerExistingUserSignin .field{
height:58px !important;
min-height:58px !important;
padding-left:52px !important;
padding-right:18px !important;
background:#120025 !important;
border:1px solid rgba(106, 31, 199,.20) !important;
border-radius:12px !important;
color:#fff !important;
font-size:14px !important;
box-shadow:none !important;
}
#containerExistingUserSignin .form-control:focus,
#containerExistingUserSignin .field:focus{
border-color:#6A1FC7 !important;
background:#170031 !important;
box-shadow:0 0 0 3px rgba(106, 31, 199,.15) !important;
}
#containerExistingUserSignin input:-webkit-autofill,
#containerExistingUserSignin input:-webkit-autofill:hover,
#containerExistingUserSignin input:-webkit-autofill:focus{
-webkit-text-fill-color:#fff !important;
-webkit-box-shadow:0 0 0 1000px #120025 inset !important;
}
#containerExistingUserSignin .text-center{
margin-top:24px !important;
}
#containerExistingUserSignin .btn-primary{
min-width:140px !important;
height:48px !important;
border-radius:12px !important;
}
#order-standard_cart .prepend-icon .field-icon{
top:50% !important;
transform:translateY(-50%) !important;
}
#order-standard_cart #containerExistingUserSignin {
padding: 34px 22px 30px !important;
background: rgba(18, 0, 38, .72) !important;
border: 1px solid rgba(106, 31, 199, .30) !important;
border-radius: 14px !important;
}
#order-standard_cart #containerExistingUserSignin .sub-heading {
margin: 0 0 30px !important;
}
#order-standard_cart #containerExistingUserSignin .row {
display: flex !important;
align-items: center !important;
margin-left: -8px !important;
margin-right: -8px !important;
}
#order-standard_cart #containerExistingUserSignin .col-sm-6 {
padding-left: 8px !important;
padding-right: 8px !important;
}
#order-standard_cart #containerExistingUserSignin .form-group {
position: relative !important;
margin: 0 !important;
height: 52px !important;
}
#order-standard_cart #containerExistingUserSignin .prepend-icon .field-icon {
position: absolute !important;
left: 18px !important;
top: 0 !important;
bottom: 0 !important;
width: 18px !important;
height: 52px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transform: none !important;
margin: 0 !important;
padding: 0 !important;
color: #6A1FC7 !important;
z-index: 20 !important;
pointer-events: none !important;
}
#order-standard_cart #containerExistingUserSignin .prepend-icon .field-icon i {
font-size: 13px !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
color: #6A1FC7 !important;
}
#order-standard_cart #containerExistingUserSignin input.form-control,
#order-standard_cart #containerExistingUserSignin input.field {
width: 100% !important;
height: 52px !important;
min-height: 52px !important;
line-height: 52px !important;
padding: 0 18px 0 48px !important;
margin: 0 !important;
background: #0b0018 !important;
border: 1px solid rgba(106, 31, 199, .42) !important;
border-radius: 7px !important;
color: #ffffff !important;
font-size: 14px !important;
font-weight: 500 !important;
box-shadow: none !important;
outline: none !important;
}
#order-standard_cart #containerExistingUserSignin input.form-control:focus,
#order-standard_cart #containerExistingUserSignin input.field:focus {
background: #100020 !important;
border-color: #6A1FC7 !important;
box-shadow: 0 0 0 3px rgba(106, 31, 199, .16) !important;
}
#order-standard_cart #containerExistingUserSignin input::placeholder {
color: rgba(255, 255, 255, .52) !important;
}
#order-standard_cart #containerExistingUserSignin input:-webkit-autofill,
#order-standard_cart #containerExistingUserSignin input:-webkit-autofill:hover,
#order-standard_cart #containerExistingUserSignin input:-webkit-autofill:focus,
#order-standard_cart #containerExistingUserSignin input:-webkit-autofill:active {
-webkit-text-fill-color: #ffffff !important;
caret-color: #ffffff !important;
transition: background-color 999999s ease-in-out 0s !important;
-webkit-box-shadow: 0 0 0 1000px #0b0018 inset !important;
box-shadow: 0 0 0 1000px #0b0018 inset !important;
}
#order-standard_cart #containerExistingUserSignin .text-center {
margin-top: 32px !important;
}
#order-standard_cart #containerExistingUserSignin #btnExistingLogin {
height: 46px !important;
min-width: 116px !important;
padding: 0 28px !important;
border-radius: 8px !important;
font-size: 15px !important;
font-weight: 700 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
@media (max-width: 767px) {
#order-standard_cart #containerExistingUserSignin .row {
display: block !important;
}
#order-standard_cart #containerExistingUserSignin .col-sm-6 + .col-sm-6 {
margin-top: 14px !important;
}
}
#order-standard_cart #containerExistingUserSignin .sub-heading {
margin-top: 30px!important;
margin-bottom: 60px!important;
}
#order-standard_cart .sub-heading span {
margin-top: 10px;
}
.iCheck-helper{
cursor:pointer !important;
}
.icheckbox_square-blue,
.iradio_square-blue{
background:#120025 !important;
border:1px solid rgba(106, 31, 199,.35) !important;
border-radius:6px !important;
box-shadow:none !important;
}
.icheckbox_square-blue.hover,
.iradio_square-blue.hover{
border-color:#6A1FC7 !important;
}
.icheckbox_square-blue.checked,
.iradio_square-blue.checked{
background:#6A1FC7 !important;
border-color:#6A1FC7 !important;
box-shadow:0 0 0 4px rgba(106, 31, 199,.15) !important;
}
.icheckbox_square-blue.checked::after{
content:"\f00c" !important;
font-family:"Font Awesome 6 Free" !important;
font-weight:900 !important;
color:#fff !important;
font-size:10px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
height:100% !important;
}
.iradio_square-blue.checked::after{
content:"" !important;
width:8px !important;
height:8px !important;
background:#fff !important;
border-radius:50% !important;
position:absolute !important;
top:50% !important;
left:50% !important;
transform:translate(-50%,-50%) !important;
}
.icheckbox_square-blue.disabled,
.iradio_square-blue.disabled{
opacity:.45 !important;
}
.login-form input.form-control::placeholder{
color:rgba(255,255,255,.48) !important;
}
.login-form input.form-control:-webkit-autofill,
.login-form input.form-control:-webkit-autofill:hover,
.login-form input.form-control:-webkit-autofill:focus,
.login-form input.form-control:-webkit-autofill:active{
-webkit-text-fill-color:#fff !important;
caret-color:#fff !important;
-webkit-box-shadow:0 0 0 1000px #0b0018 inset !important;
box-shadow:0 0 0 1000px #0b0018 inset !important;
transition:background-color 999999s ease-in-out 0s !important;
}
.login-form input.form-control:-moz-autofill,
.login-form input.form-control:-moz-autofill-preview{
filter:none !important;
box-shadow:0 0 0 1000px #0b0018 inset !important;
background-color:#0b0018 !important;
color:#fff !important;
}
.login-form input.form-control:focus{
border-color:#6A1FC7 !important;
box-shadow:0 0 0 3px rgba(106, 31, 199,.16) !important;
}
#registration .card{
background:rgba(16,0,32,.55) !important;
border:1px solid rgba(106, 31, 199,.18) !important;
border-radius:16px !important;
overflow:hidden !important;
}
#registration .card-body{
padding:28px !important;
}
#registration .card-title{
margin:0 0 24px !important;
font-size:28px !important;
font-weight:700 !important;
color:#fff !important;
}
#registration .row{
margin-left:-10px !important;
margin-right:-10px !important;
}
#registration .row > div{
padding-left:10px !important;
padding-right:10px !important;
}
#registration .form-group{
position:relative !important;
margin-bottom:18px !important;
}
#registration .field,
#registration .form-control,
#registration select.form-control{
width:100% !important;
height:56px !important;
min-height:56px !important;
padding:0 18px 0 52px !important;
background:#0b0018 !important;
border:1px solid rgba(106, 31, 199,.25) !important;
border-radius:10px !important;
color:#fff !important;
font-size:14px !important;
font-weight:500 !important;
box-shadow:none !important;
}
#registration textarea.form-control{
min-height:120px !important;
}
#registration .field:focus,
#registration .form-control:focus{
border-color:#6A1FC7 !important;
background:#120025 !important;
box-shadow:0 0 0 3px rgba(106, 31, 199,.14) !important;
}
#registration .field-icon{
position:absolute !important;
left:18px !important;
top:50% !important;
transform:translateY(-50%) !important;
width:auto !important;
height:auto !important;
color:#6A1FC7 !important;
z-index:5 !important;
margin:0 !important;
pointer-events:none !important;
}
#registration .field-icon i{
font-size:14px !important;
color:#6A1FC7 !important;
}
#registration input::placeholder,
#registration textarea::placeholder{
color:rgba(255,255,255,.45) !important;
}
#registration select{
appearance:none !important;
-webkit-appearance:none !important;
-moz-appearance:none !important;
}
#registration select option{
background:#0b0018 !important;
color:#fff !important;
}
#registration #containerPassword .col-sm-6{
display:flex !important;
flex-direction:column !important;
}
#registration #inputNewPassword1,
#registration #inputNewPassword2{
height:56px !important;
}
#registration .generate-password{
height:46px !important;
border-radius:10px !important;
padding:0 20px !important;
margin-top:4px !important;
}
#registration .password-strength-meter{
margin-top:8px !important;
}
#registration .password-strength-meter .progress{
height:10px !important;
border-radius:999px !important;
background:#140028 !important;
}
#registration .password-strength-meter p{
margin-top:10px !important;
color:rgba(255,255,255,.65) !important;
}
#registration .toggle-switch-success{
transform:scale(1.05) !important;
}
#registration .btn-primary.btn-lg,
#registration input[type="submit"].btn-primary{
height:56px !important;
min-width:180px !important;
border-radius:12px !important;
font-size:16px !important;
font-weight:700 !important;
}
#registration .card.mb-4:last-of-type{
margin-bottom:36px !important;
}
#registration input:-webkit-autofill,
#registration input:-webkit-autofill:hover,
#registration input:-webkit-autofill:focus{
-webkit-text-fill-color:#fff !important;
-webkit-box-shadow:0 0 0 1000px #0b0018 inset !important;
}
#welcome-section,
.welcome-section{
margin-bottom:28px !important;
}
.welcome-text{
font-size:42px !important;
font-weight:800 !important;
letter-spacing:-1px !important;
margin-bottom:18px !important;
}
.breadcrumb-bar{
min-height:56px !important;
padding:12px 18px !important;
}
#cPanelPackagePanel,
#cPanelUsagePanel,
#cPanelQuickShortcutsPanel,
#cPanelQuickEmailPanel,
#cPanelBillingOverviewPanel{
border:1px solid rgba(106, 31, 199,.15) !important;
border-radius:18px !important;
overflow:hidden !important;
background:rgba(12,0,24,.75) !important;
backdrop-filter:blur(20px) !important;
}
.card-header{
background:transparent !important;
border-bottom:1px solid rgba(106, 31, 199,.08) !important;
padding:22px 24px !important;
}
.card-title{
font-size:28px !important;
font-weight:700 !important;
color:#fff !important;
}
.card-body{
padding:26px !important;
}
.cpanel-package-details{
padding:30px 0 !important;
}
.cpanel-package-details em{
display:block !important;
font-size:14px !important;
color:rgba(255,255,255,.55) !important;
margin-bottom:8px !important;
}
.cpanel-package-details h4{
font-size:42px !important;
font-weight:800 !important;
line-height:1.1 !important;
margin-bottom:10px !important;
}
.cpanel-package-details a{
color:#6A1FC7 !important;
font-size:16px !important;
}
#cPanelPackagePanel .btn{
height:46px !important;
min-width:140px !important;
border-radius:12px !important;
}
.cpanel-usage-stats .col-md-6{
padding-top:10px !important;
padding-bottom:10px !important;
}
.cpanel-usage-stats strong{
display:block !important;
font-size:15px !important;
margin-bottom:12px !important;
}
.usage-dial{
transform:scale(1.15) !important;
}
.limit-near{
margin-top:20px !important;
font-size:13px !important;
opacity:.7 !important;
}
.cpanel-tools-grid{
gap:14px !important;
}
.cpanel-tools-tile{
min-height:86px !important;
border-radius:14px !important;
background:rgba(255,255,255,.02) !important;
border:1px solid rgba(106, 31, 199,.08) !important;
}
.cpanel-tools-tile:hover{
transform:translateY(-4px) !important;
}
.cpanel-tools-tile__icon{
width:38px !important;
height:38px !important;
border-radius:10px !important;
}
.cpanel-tools-tile__label{
font-size:14px !important;
font-weight:600 !important;
}
.cpanel-tools-help{
margin-top:24px !important;
padding-top:24px !important;
border-top:1px solid rgba(106, 31, 199,.08) !important;
}
.cpanel-tools-help__link{
min-width:120px !important;
justify-content:center !important;
}
#cPanelQuickEmailPanel .row{
align-items:center !important;
}
#cpanel-email-prefix,
#cpanel-email-password{
height:52px !important;
background:#0b0018 !important;
border:1px solid rgba(106, 31, 199,.18) !important;
color:#fff !important;
border-radius:12px !important;
}
#cPanelQuickEmailPanel .input-group-text{
height:52px !important;
background:#140028 !important;
border:1px solid rgba(106, 31, 199,.18) !important;
color:rgba(255,255,255,.7) !important;
}
#cPanelQuickEmailPanel .btn-primary{
height:52px !important;
border-radius:12px !important;
font-weight:700 !important;
}
#cPanelBillingOverviewPanel .row{
margin-bottom:14px !important;
}
#cPanelBillingOverviewPanel .text-right{
color:rgba(255,255,255,.55) !important;
font-weight:500 !important;
}
#cPanelBillingOverviewPanel .col-6:not(.text-right),
#cPanelBillingOverviewPanel .col-xl-7{
color:#fff !important;
font-weight:700 !important;
}
#cPanelBillingOverviewPanel .panel-body{
padding-top:34px !important;
padding-bottom:34px !important;
}
.btn-return-to-admin{
display:none !important;
}
.panel{
box-shadow:none !important;
}
@media (min-width:1400px){
.cpanel-package-details h4{
font-size:48px !important;
}
.card-body{
padding:32px !important;
}
}
#cpanel-email-prefix,
#cpanel-email-password,
#cPanelQuickEmailPanel input.form-control{
background:#0b0018 !important;
background-color:#0b0018 !important;
color:#fff !important;
border:1px solid rgba(106, 31, 199,.15) !important;
border-radius:0 !important;
box-shadow:none !important;
}
#cPanelQuickEmailPanel .input-group-text{
background:#0b0018 !important;
background-color:#0b0018 !important;
color:rgba(255,255,255,.75) !important;
border:1px solid rgba(106, 31, 199,.15) !important;
border-radius:0 !important;
}
#cPanelQuickEmailPanel .btn-primary{
border-radius:0 !important;
}
#cpanel-email-prefix:-webkit-autofill,
#cpanel-email-prefix:-webkit-autofill:hover,
#cpanel-email-prefix:-webkit-autofill:focus,
#cpanel-email-password:-webkit-autofill,
#cpanel-email-password:-webkit-autofill:hover,
#cpanel-email-password:-webkit-autofill:focus{
-webkit-text-fill-color:#fff !important;
-webkit-box-shadow:0 0 0 1000px #0b0018 inset !important;
box-shadow:0 0 0 1000px #0b0018 inset !important;
transition:background-color 999999s ease-in-out 0s !important;
}
#cPanelQuickEmailPanel .input-group{
overflow:hidden !important;
}
#cPanelQuickEmailPanel input::placeholder{
color:rgba(255,255,255,.45) !important;
}
#order-standard_cart .products .row{
row-gap:28px !important;
}
#order-standard_cart .product{
display:flex !important;
flex-direction:column !important;
height:100% !important;
background:linear-gradient(180deg,#100022 0%,#0b0018 100%) !important;
border:1px solid rgba(106, 31, 199,.14) !important;
border-radius:20px !important;
overflow:hidden !important;
transition:.25s ease !important;
position:relative !important;
}
#order-standard_cart .product:hover{
transform:translateY(-6px) !important;
border-color:rgba(106, 31, 199,.45) !important;
box-shadow:0 20px 60px rgba(0,0,0,.35) !important;
}
#order-standard_cart .product:before{
content:"POPULAR" !important;
position:absolute !important;
top:18px !important;
right:-35px !important;
width:140px !important;
text-align:center !important;
background:#6A1FC7 !important;
color:#fff !important;
font-size:11px !important;
font-weight:700 !important;
padding:6px 0 !important;
transform:rotate(45deg) !important;
z-index:10 !important;
}
#order-standard_cart .product header{
background:transparent !important;
border:0 !important;
padding:30px 30px 15px !important;
}
#order-standard_cart .product header span{
display:block !important;
color:#fff !important;
font-size:24px !important;
font-weight:800 !important;
line-height:1.2 !important;
}
#order-standard_cart .product .product-desc{
padding:0 30px 25px !important;
flex:1 !important;
}
#order-standard_cart .product .product-desc p{
color:rgba(255,255,255,.72) !important;
font-size:14px !important;
line-height:1.9 !important;
}
#order-standard_cart .product .product-desc p br{
display:block !important;
content:"" !important;
margin-bottom:4px !important;
}
#order-standard_cart .product footer{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:20px !important;
border-top:1px solid rgba(106, 31, 199,.10) !important;
padding:24px 30px !important;
margin-top:auto !important;
}
#order-standard_cart .product-pricing{
margin:0 !important;
text-align:left !important;
}
#order-standard_cart .product-pricing .price{
display:block !important;
color:#fff !important;
font-size:42px !important;
font-weight:800 !important;
line-height:1 !important;
}
#order-standard_cart .product-pricing .price:before{
content:"Starting at" !important;
display:block !important;
color:#6A1FC7 !important;
font-size:12px !important;
font-weight:600 !important;
margin-bottom:10px !important;
text-transform:uppercase !important;
letter-spacing:1px !important;
}
#order-standard_cart .product-pricing br{
display:none !important;
}
#order-standard_cart .product-pricing{
color:rgba(255,255,255,.55) !important;
font-size:14px !important;
}
#order-standard_cart .btn-order-now{
height:52px !important;
min-width:170px !important;
border-radius:14px !important;
background:#6A1FC7 !important;
color:#fff !important;
font-size:14px !important;
font-weight:700 !important;
letter-spacing:.3px !important;
text-transform:none !important;
box-shadow:none !important;
}
#order-standard_cart .header-lined{
max-width:900px !important;
margin-bottom:40px !important;
}
#order-standard_cart .header-lined h1{
font-size:52px !important;
line-height:1.1 !important;
font-weight:800 !important;
color:#fff !important;
margin-bottom:12px !important;
}
#order-standard_cart .header-lined p{
font-size:18px !important;
color:rgba(255,255,255,.65) !important;
}
#order-standard_cart .cart-sidebar{
display:none !important;
}
#order-standard_cart .cart-body{
width:100% !important;
max-width:none !important;
}
:root {
--primary: #6A1FC7!important;
--secondary: #BAFF94!important;
--accent: #BAFF94!important;
}
.user-avatar {
background: linear-gradient(135deg, var(--primary), var(--accent))!important;
}
.back-btn {
background: linear-gradient(135deg, #6A1FC7, #6A1FC7)!important;
}


#order-standard_cart{
max-width:100%;
}
#order-standard_cart .secondary-cart-body{
width:68% !important;
padding-right:30px !important;
}
#order-standard_cart .secondary-cart-sidebar{
width:32% !important;
}
@media(max-width:991px){
#order-standard_cart .secondary-cart-body,
#order-standard_cart .secondary-cart-sidebar{
width:100% !important;
padding-right:0 !important;
}
}
#order-standard_cart .header-lined{
margin-bottom:40px !important;
}
#order-standard_cart .header-lined h1{
font-size:32px !important;
line-height:1 !important;
font-weight:900 !important;
color:#fff !important;
text-align:left !important;
margin:0 !important;
letter-spacing:-2px !important;
}
#order-standard_cart .header-lined h1::after{
content:"Configure your hosting package";
display:block;
font-size:16px;
font-weight:500;
color:rgba(255,255,255,.55);
margin-top:14px;
letter-spacing:0;
}
#order-standard_cart .product-info{
background:
linear-gradient(
135deg,
rgba(106, 31, 199,.08),
rgba(186, 255, 148,.03)
) !important;
border:1px solid rgba(106, 31, 199,.20) !important;
border-radius:18px !important;
padding:35px !important;
margin-bottom:30px !important;
position:relative;
overflow:hidden;
}
#order-standard_cart .product-info:before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
135deg,
var(--primary),
var(--accent)
);
opacity:.04;
pointer-events:none;
}
#order-standard_cart .product-title{
font-size:34px !important;
font-weight:800 !important;
color:#fff !important;
margin-bottom:20px !important;
}
#order-standard_cart .product-info p{
line-height:2 !important;
color:rgba(255,255,255,.72) !important;
}
#order-standard_cart .field-container{
background:#110022 !important;
border:1px solid rgba(255,255,255,.06) !important;
border-radius:18px !important;
padding:25px !important;
margin-top:25px !important;
}
#order-standard_cart label{
color:#fff !important;
font-weight:700 !important;
font-size:15px !important;
margin-bottom:15px !important;
}
#inputBillingcycle{
height:60px !important;
border-radius:14px !important;
background:#17002f !important;
border:1px solid rgba(106, 31, 199,.18) !important;
color:#fff !important;
font-size:16px !important;
font-weight:700 !important;
}
#orderSummary{
position:sticky !important;
top:25px !important;
}
#order-standard_cart .order-summary{
background:
linear-gradient(
180deg,
#120025,
#0b0018
) !important;
border:1px solid rgba(106, 31, 199,.18) !important;
border-radius:22px !important;
overflow:hidden !important;
padding:30px !important;
}
#order-standard_cart .order-summary h2{
color:#fff !important;
font-size:28px !important;
font-weight:800 !important;
text-align:left !important;
margin-bottom:25px !important;
}
#order-standard_cart .summary-total,
#order-standard_cart .total-due-today{
color:#fff !important;
font-size:32px !important;
font-weight:900 !important;
}
#btnCompleteProductConfig{
width:100% !important;
height:64px !important;
border:none !important;
border-radius:14px !important;
font-size:18px !important;
font-weight:800 !important;

box-shadow:
0 20px 50px rgba(106, 31, 199,.25) !important;
}
#btnCompleteProductConfig:hover{
transform:translateY(-3px);
box-shadow:
0 30px 60px rgba(106, 31, 199,.35) !important;
}
#order-standard_cart .info-text-sm{
background:
rgba(106, 31, 199,.06) !important;
border:1px solid rgba(106, 31, 199,.15) !important;
border-radius:16px !important;
padding:18px 22px !important;
margin-top:25px !important;
}
#order-standard_cart .panel,
#order-standard_cart .card,
#order-standard_cart .sub-heading{
box-shadow:none !important;
border:none !important;
}
#order-standard_cart .header-lined{
margin-bottom:22px !important;
}
#order-standard_cart .header-lined h1{
font-size:32px !important;
line-height:1 !important;
font-weight:900 !important;
letter-spacing:-2px !important;
color:#fff !important;
margin-bottom:8px !important;
}
#order-standard_cart .header-lined p{
color:rgba(255,255,255,.60) !important;
font-size:16px !important;
margin:0 !important;
}
#order-standard_cart .secondary-cart-body{
width:68% !important;
padding-right:28px !important;
}
#order-standard_cart .secondary-cart-sidebar{
width:32% !important;
align-self:flex-start !important;
}
@media(max-width:991px){
#order-standard_cart .secondary-cart-body,
#order-standard_cart .secondary-cart-sidebar{
width:100% !important;
padding-right:0 !important;
}
}
#order-standard_cart .product-info{
background:
linear-gradient(
135deg,
rgba(106, 31, 199,.08),
rgba(106, 31, 199,.02)
) !important;
border:1px solid rgba(106, 31, 199,.15) !important;
border-radius:16px !important;
padding:34px !important;
position:relative !important;
overflow:hidden !important;
}
#order-standard_cart .product-info::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(
circle at top right,
rgba(106, 31, 199,.08),
transparent 60%
);
pointer-events:none;
}
#order-standard_cart .product-title{
font-size:46px !important;
line-height:1.1 !important;
font-weight:900 !important;
color:#fff !important;
margin-bottom:26px !important;
}
#order-standard_cart .product-info p{
color:rgba(255,255,255,.78) !important;
font-size:14px !important;
line-height:2 !important;
max-width:700px !important;
}
#order-standard_cart .field-container{
background:#120025 !important;
border:1px solid rgba(106, 31, 199,.10) !important;
border-radius:16px !important;
padding:26px !important;
margin-top:24px !important;
}
#order-standard_cart label{
color:#fff !important;
font-size:15px !important;
font-weight:700 !important;
margin-bottom:14px !important;
}
#inputBillingcycle{
height:58px !important;
border-radius:12px !important;
background:#0b0018 !important;
border:1px solid rgba(106, 31, 199,.15) !important;
color:#fff !important;
font-size:15px !important;
font-weight:700 !important;
box-shadow:none !important;
}
#inputBillingcycle:focus{
border-color:#6A1FC7 !important;
box-shadow:0 0 0 3px rgba(106, 31, 199,.12) !important;
}
#orderSummary{
position:sticky !important;
top:24px !important;
}
#order-standard_cart .order-summary{
background:#120025 !important;
border:1px solid rgba(106, 31, 199,.15) !important;
border-radius:16px !important;
padding:26px !important;
overflow:hidden !important;
}
#order-standard_cart .order-summary h2{
color:#fff !important;
font-size:32px !important;
font-weight:800 !important;
margin-bottom:24px !important;
}
#order-standard_cart .summary-container{
background:#0b0018 !important;
border:1px solid rgba(106, 31, 199,.10) !important;
border-radius:12px !important;
padding:22px !important;
}
#order-standard_cart .summary-total{
border-top:1px solid rgba(106, 31, 199,.10) !important;
margin-top:18px !important;
padding-top:18px !important;
}
#order-standard_cart .summary-total .amt,
#order-standard_cart .total-due-today{
font-size:42px !important;
font-weight:900 !important;
color:#fff !important;
line-height:1 !important;
}
#btnCompleteProductConfig,
#btnCompleteProductConfigContainer .btn{
width:100% !important;
height:62px !important;
border:none !important;
border-radius:12px !important;

color:#fff !important;
font-size:18px !important;
font-weight:800 !important;
box-shadow:
0 15px 40px rgba(106, 31, 199,.25) !important;
transition:.25s ease !important;
}
#btnCompleteProductConfig:hover,
#btnCompleteProductConfigContainer .btn:hover{
transform:translateY(-2px) !important;
box-shadow:
0 20px 50px rgba(106, 31, 199,.35) !important;
}
#order-standard_cart .alert,
#order-standard_cart .info-text-sm{
background:#120025 !important;
border:1px solid rgba(106, 31, 199,.10) !important;
border-radius:12px !important;
color:rgba(255,255,255,.70) !important;
padding:16px 20px !important;
}
#order-standard_cart .panel,
#order-standard_cart .card,
#order-standard_cart .sub-heading{
box-shadow:none !important;
}
#order-standard_cart .card,
#order-standard_cart .panel,
#order-standard_cart .product-info,
#order-standard_cart .order-summary,
#order-standard_cart .summary-container{
border-radius:16px !important;
}
.welcome-text,
.page-title,
.page-header h1{
letter-spacing:-1px !important;
}
#order-standard_cart .secondary-cart-body{
flex:0 0 calc(100% - 380px);
max-width:calc(100% - 380px);
}
#order-standard_cart .secondary-cart-sidebar{
flex:0 0 360px;
max-width:360px;
}
#order-standard_cart .view-cart-items{
background:transparent !important;
border:none !important;
padding:0 !important;
box-shadow:none !important;
}
#order-standard_cart .item{
background:#0f021f !important;
border:1px solid rgba(106, 31, 199,.12) !important;
border-radius:14px !important;
padding:26px !important;
margin-bottom:18px !important;
transition:.25s ease !important;
}
#order-standard_cart .item:hover{
border-color:rgba(106, 31, 199,.40) !important;
transform:translateY(-2px);
}
#order-standard_cart .item-title{
display:flex !important;
align-items:center !important;
gap:10px !important;
font-size:22px !important;
font-weight:800 !important;
color:#fff !important;
}
#order-standard_cart .item-group{
margin-top:8px !important;
color:rgba(255,255,255,.55) !important;
font-size:14px !important;
}
#order-standard_cart .item-price{
text-align:right !important;
}
#order-standard_cart .item-price span:first-child{
font-size:30px !important;
font-weight:900 !important;
color:#fff !important;
}
#order-standard_cart .cycle{
color:#6A1FC7 !important;
font-size:14px !important;
margin-top:5px !important;
}
#order-standard_cart .btn-link.btn-xs{
background:rgba(106, 31, 199,.12) !important;
border:none !important;
border-radius:10px !important;
padding:8px 14px !important;
color:#6A1FC7 !important;
text-decoration:none !important;
}
#order-standard_cart .btn-remove-from-cart{
width:42px !important;
height:42px !important;
border-radius:12px !important;
background:rgba(255,70,70,.10) !important;
color:#ff6262 !important;
}
#order-standard_cart .order-summary{
background:#120025 !important;
border:1px solid rgba(106, 31, 199,.15) !important;
border-radius:16px !important;
padding:24px !important;
position:sticky !important;
top:20px !important;
}
#order-standard_cart .order-summary h2{
color:#fff !important;
font-size:34px !important;
font-weight:900 !important;
text-align:left !important;
margin-bottom:20px !important;
}
#order-standard_cart .summary-container{
background:#0c0118 !important;
border:1px solid rgba(106, 31, 199,.10) !important;
border-radius:14px !important;
padding:22px !important;
}
#order-standard_cart .subtotal,
#order-standard_cart .recurring-totals{
padding:12px 0 !important;
border-bottom:1px solid rgba(255,255,255,.06) !important;
}
#order-standard_cart .total-due-today{
background:none !important;
margin-top:25px !important;
text-align:center !important;
}
#order-standard_cart .total-due-today .amt{
display:block !important;
font-size:58px !important;
font-weight:900 !important;
line-height:1 !important;
background:linear-gradient(
135deg,
var(--primary),
var(--accent)
);

}
#order-standard_cart .total-due-today span:last-child{
font-size:18px !important;
color:rgba(255,255,255,.60) !important;
}
#checkout{
width:100% !important;
height:62px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;

border:none !important;
border-radius:14px !important;
font-size:18px !important;
font-weight:800 !important;
margin-top:25px !important;
}
#checkout:hover{
transform:translateY(-2px);
}
#order-standard_cart .view-cart-tabs{
background:#120025 !important;
border:1px solid rgba(106, 31, 199,.12) !important;
border-radius:16px !important;
overflow:hidden !important;
}
#order-standard_cart .tab-content{
background:transparent !important;
padding:24px !important;
}
#inputPromotionCode{
height:58px !important;
background:#0c0118 !important;
border:1px solid rgba(106, 31, 199,.10) !important;
border-radius:12px !important;
}
#order-standard_cart button[name="validatepromo"]{
height:58px !important;
margin-top:12px !important;

border:none !important;
border-radius:12px !important;
}
#btnEmptyCart{
background:rgba(255,70,70,.10) !important;
color:#ff6262 !important;
padding:10px 16px !important;
border-radius:12px !important;
}
#order-standard_cart .view-cart-items-header{
background:#120025 !important;
border:1px solid rgba(106, 31, 199,.12) !important;
border-radius:14px !important;
height:60px !important;
display:flex !important;
align-items:center !important;
}
#order-standard_cart .view-cart-items-header div{
color:#fff !important;
font-weight:700 !important;
}
#order-standard_cart .cart-sidebar{
display:none !important;
}
#order-standard_cart .cart-body{
width:100% !important;
max-width:100% !important;
flex:0 0 100% !important;
}
.header-lined h1,
#order-standard_cart .font-size-36{
font-size:54px !important;
line-height:1.05 !important;
font-weight:800 !important;
letter-spacing:-2px !important;
margin-bottom:8px !important;
color:#fff !important;
}
#order-standard_cart .subtitle,
#order-standard_cart p{
font-size:14px !important;
color:rgba(255,255,255,.55) !important;
}
#order-standard_cart .item{
padding:20px 24px !important;
min-height:auto !important;
}
#order-standard_cart .item-title{
font-size:18px !important;
font-weight:700 !important;
color:#fff !important;
}
#order-standard_cart .item-group{
font-size:13px !important;
margin-top:4px !important;
color:rgba(255,255,255,.45) !important;
}
#order-standard_cart .item-price span:first-child{
font-size:18px !important;
font-weight:800 !important;
}
#order-standard_cart .cycle{
font-size:12px !important;
margin-top:2px !important;
}
#order-standard_cart .btn-link.btn-xs{

padding:0 12px !important;
font-size:11px !important;
border-radius:8px !important;
}
#order-standard_cart .btn-remove-from-cart{
width:34px !important;
height:34px !important;
border-radius:10px !important;
}
#order-standard_cart .order-summary{
padding:20px !important;
}
#order-standard_cart .order-summary h2{
font-size:18px !important;
font-weight:700 !important;
text-align:center !important;
margin-bottom:18px !important;
}
#order-standard_cart .summary-container{
padding:16px !important;
}
#order-standard_cart .subtotal,
#order-standard_cart .recurring-totals{
font-size:13px !important;
}
#order-standard_cart .total-due-today{
padding:16px !important;
}
#order-standard_cart .total-due-today .amt{
font-size:34px !important;
line-height:.95 !important;
font-weight:900 !important;
}
#order-standard_cart .total-due-today span:last-child{
font-size:14px !important;
margin-top:4px !important;
}
#checkout{
height:48px !important;
font-size:15px !important;
font-weight:700 !important;
border-radius:10px !important;
}
#continueShopping{
font-size:12px !important;
margin-top:10px !important;
}
#inputPromotionCode{
height:48px !important;
font-size:14px !important;
}
#order-standard_cart button[name="validatepromo"]{
height:44px !important;
font-size:14px !important;
font-weight:700 !important;
}
#order-standard_cart .view-cart-items-header{
height:50px !important;
padding:0 18px !important;
}
#order-standard_cart .view-cart-items-header div{
font-size:13px !important;
font-weight:600 !important;
}
#order-standard_cart .view-cart-tabs{
margin-top:20px !important;
}
#order-standard_cart .view-cart-items{
margin-top:12px !important;
}
#order-standard_cart .item + .item{
margin-top:14px !important;
}
#order-standard_cart .view-cart-items-header {
display: none!important;
}
#order-standard_cart .products .row{
--bs-gutter-x: 32px !important;
--bs-gutter-y: 32px !important;
margin-bottom: 0 !important;
}
#order-standard_cart .products .col-md-6{
margin-bottom: 32px !important;
}
#order-standard_cart .products .product{
margin-bottom: 0 !important;
height: 100% !important;
}
#order-standard_cart .products .product footer {
width: 100%!important;
}

/* HostDiff polish: keep the layout familiar while tightening the WHMCS client-area look. */
:root {
--primary: #4B129F !important;
--secondary: #2B117C !important;
--accent: #BAFF94 !important;
--hd-bg: #0A0612;
--hd-panel: rgba(17, 8, 31, .72);
--hd-border-glow: rgba(75, 18, 159, .28);
}
.sidebar {
background:
radial-gradient(circle at 50% 0%, rgba(75, 18, 159,.18), transparent 32%),
linear-gradient(180deg, #10001e 0%, #0A0612 58%, #030007 100%) !important;
border-right: 1px solid var(--hd-border-glow);
}
.sidebar-logo {
padding: 18px 20px !important;
align-items: flex-start !important;
}
.sidebar-logo a {
display: inline-flex;
align-items: center;
margin: 0 auto;
}
.sidebar-logo img {
max-width: 168px !important;
width: 168px !important;
height: auto !important;
border-radius: 0 !important;
background: transparent !important;
padding: 0 !important;
box-shadow: none !important;
}
.sidebar-logo img:hover {
transform: translateY(-1px) !important;
box-shadow: none !important;
}
.nav-section {
padding: .8rem 1rem !important;
}
.nav-section-title {
letter-spacing: .08em;
color: rgba(255,255,255,.38) !important;
}
#sidebar .nav-item {
padding: .78rem .9rem !important;
border: 1px solid transparent;
border-radius: 8px !important;
}
#sidebar .nav-item:hover {
background: rgba(75, 18, 159,.16) !important;
border-color: var(--hd-border-glow);
transform: translateX(4px) !important;
}
#sidebar .nav-item.active {
background: rgba(75, 18, 159,.22) !important;
border-left: 2px solid #BAFF94;
border-color: var(--hd-border-glow);
transform: translateX(4px) !important;
}
#sidebar .nav-item.active .nav-icon,
#sidebar .nav-item.active a {
color: #BAFF94 !important;
}
.nav-icon {
width: 18px;
color: rgba(255,255,255,.6);
}
.topbar {
height: 64px !important;
position: relative;
padding: 0 1.25rem !important;
}
.search-bar,
.user-menu,
.cart-btn,
.notification-btn {
background: rgba(255,255,255,.045) !important;
border: 1px solid rgba(255,255,255,.09) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
.cart-btn,
.notification-btn {
color: #fff !important;
}
.cart-btn:hover,
.notification-btn:hover {
background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
}
.user-avatar {
border-radius: 8px !important;
background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
}
.dropdown,
.notif-dropdown {
background: #11081f !important;
border: 1px solid var(--hd-border-glow) !important;
border-radius: 10px !important;
}
.dropdown li a,
.dropdown li {
color: rgba(255,255,255,.82) !important;
}
.main-content {
background-color: var(--hd-bg) !important;
background-image:
radial-gradient(ellipse 60% 48% at 50% 5%, rgba(75, 18, 159,.19), transparent 62%),
radial-gradient(ellipse 45% 50% at 0% 22%, rgba(75, 18, 159,.10), transparent 68%),
linear-gradient(180deg, #0b0017 0%, #0A0612 46%, #030007 100%) !important;
}
.chart-card,
.quick-actions-card,
.sites-section,
.tiles .tile-card,
.action-item {
background: var(--hd-panel) !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 8px !important;
box-shadow: 0 16px 55px rgba(0,0,0,.20) !important;
}
.action-btn,
.back-btn {
border-radius: 8px !important;
}
@media (max-width: 480px) {
.user-menu > div:not(.user-avatar),
.user-menu > i {
display: none;
}
.sidebar-logo img {
width: 150px !important;
}
}

/* HostDiff visual direction */
.portal-container {
background:
radial-gradient(ellipse 46% 36% at 50% 0%, rgba(106, 31, 199,.14), transparent 68%),
linear-gradient(180deg, #100019 0%, #050009 100%) !important;
}
.sidebar {
width: 254px !important;
background:
linear-gradient(180deg, rgba(18,7,32,.92), rgba(8,2,18,.94)),
radial-gradient(circle at 50% 0%, rgba(106, 31, 199,.18), transparent 44%) !important;
box-shadow: 0 28px 90px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.sidebar-logo {
border-bottom: 1px solid rgba(255,255,255,.07) !important;
gap: 8px;
}
.sidebar-tagline {
font-size: 11px;
line-height: 1.5;
color: rgba(255,255,255,.48);
max-width: 175px;
display: none;
}
.sidebar-nav {
padding: 8px 6px 18px;
}
.nav-section + .nav-section {
border-top: 1px solid rgba(255,255,255,.045);
}
#sidebar .nav-item a {
display: flex;
align-items: center;
width: 100%;
font-size: 15px;
font-weight: 650;
letter-spacing: 0;
color: rgba(255,255,255,.76) !important;
}
#sidebar .nav-item:hover a {
color: #fff !important;
}
.main-content {
margin-left: 254px !important;
width: calc(100% - 254px) !important;
padding: 14px 16px 0 24px !important;
box-sizing: border-box !important;
}
.topbar {
margin: 0 auto;
border-radius: 12px !important;
min-height: 62px;
}
.topbar-nav {
display: flex;
align-items: center;
gap: 6px;
margin-left: 6px;
padding: 4px;
background: rgba(255,255,255,.035);
border: 1px solid rgba(255,255,255,.065);
border-radius: 999px;
}
.topbar-nav a {
display: inline-flex;
align-items: center;
height: 30px;
padding: 0 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
color: rgba(255,255,255,.68);
text-decoration: none;
}
.topbar-nav a:hover,
.topbar-nav a:first-child {
background: rgba(255,255,255,.10);
color: #fff;
}
.search-container {
max-width: 360px !important;
margin-left: auto !important;
}
.dashboard-content {
padding: 28px 0 44px !important;
}

.hd-dashboard-grid {
display: grid;
gap: 20px;
}

.hd-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}

.hd-stat-card,
.hd-quick-card {
display: block;
padding: 22px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 12px;
background: linear-gradient(180deg, rgba(22,10,38,.76), rgba(9,2,20,.82));
box-shadow: 0 18px 50px rgba(0,0,0,.18);
color: #fff !important;
text-decoration: none !important;
}

.hd-stat-card:hover,
.hd-quick-card:hover {
border-color: rgba(75, 18, 159,.35);
transform: translateY(-2px);
text-decoration: none !important;
}

.hd-stat-label {
color: rgba(255,255,255,.55) !important;
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}

.hd-stat-value {
margin-top: 10px;
font-size: 2rem;
font-weight: 800;
line-height: 1;
color: #fff !important;
}

.hd-addfunds-meta,
.hd-quick-card p {
margin-top: 10px;
margin-bottom: 0;
color: rgba(255,255,255,.62) !important;
line-height: 1.7;
}

.hd-quick-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}

.hd-quick-card h3 {
margin: 0;
font-size: 1.15rem;
color: #fff !important;
}



.vx-client-home__hero,
.vx-client-home__actions-panel,
.vx-client-home__panel {
border: 1px solid rgba(255,255,255,.08);
border-radius: 16px;
background: linear-gradient(180deg, rgba(18,8,32,.86), rgba(10,4,20,.94));
box-shadow: 0 20px 60px rgba(0,0,0,.18);
}

.vx-client-home__hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(220px, 360px) auto;
align-items: center;
gap: 24px;
padding: 28px;
overflow: hidden;
position: relative;
background:
radial-gradient(circle at 16% 0%, rgba(106, 31, 199,.16), transparent 34%),
radial-gradient(circle at 72% 50%, rgba(106, 31, 199,.22), transparent 28%),
linear-gradient(180deg, rgba(20,8,36,.92), rgba(10,4,20,.96));
}

.vx-client-home__hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(255,255,255,.02), transparent 28%, transparent 72%, rgba(255,255,255,.015));
pointer-events: none;
}

.vx-client-home__hero-copy,
.vx-client-home__hero-actions,
.vx-client-home__hero-art {
position: relative;
z-index: 1;
}

.vx-client-home__eyebrow {
display: inline-block;
margin-bottom: 14px;
font-size: 11px;
font-weight: 800;
letter-spacing: .2em;
color: rgba(255,255,255,.45);
}

.vx-client-home__hero h2 {
margin: 0;
font-size: clamp(2rem, 3vw, 3rem);
line-height: 1.02;
font-weight: 900;
color: #fff;
}

.vx-client-home__hero p {
max-width: 520px;
margin: 14px 0 0;
color: rgba(255,255,255,.64);
font-size: 15px;
line-height: 1.8;
}

.vx-client-home__hero-art {
min-height: 160px;
display: flex;
align-items: center;
justify-content: center;
}

.vx-client-home__hero-crate {
position: relative;
z-index: 2;
width: 200px;
height: auto;
filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35));
transition: transform 0.2s ease;
}

.vx-client-home__hero-crate:hover {
transform: translateY(-2px);
}

.vx-client-home__orb {
position: absolute;
border-radius: 50%;
filter: blur(0);
}

.vx-client-home__orb--lg {
width: 180px;
height: 180px;
background: radial-gradient(circle, rgba(106, 31, 199,.58), rgba(106, 31, 199,.18) 58%, transparent 76%);
}

.vx-client-home__orb--sm {
width: 94px;
height: 94px;
top: 18px;
right: 34px;
background: radial-gradient(circle, rgba(106, 31, 199,.48), transparent 74%);
}

.vx-client-home__stack {
position: relative;
display: grid;
gap: 10px;
width: 170px;
}

.vx-client-home__stack span {
display: block;
height: 34px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.08);
background: linear-gradient(135deg, rgba(106, 31, 199,.94), rgba(27,11,52,.92));
box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 12px 30px rgba(0,0,0,.22);
}

.vx-client-home__stack span:nth-child(2) {
transform: translateX(22px);
}

.vx-client-home__stack span:nth-child(3) {
transform: translateX(44px);
}

.vx-client-home__hero-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 12px;
}

.vx-client-home__primary,
.vx-client-home__secondary,
.vx-client-home__ghost-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 46px;
padding: 0 18px;
border-radius: 12px;
text-decoration: none !important;
font-weight: 700;
transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}

.vx-client-home__primary {
background: #BAFF94;
color: #19083F !important;
}

.vx-client-home__primary:hover {
background: #CCFFB0;
}

.vx-client-home__secondary,
.vx-client-home__ghost-link {
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.03);
color: #fff !important;
}

.vx-client-home__primary:hover,
.vx-client-home__secondary:hover,
.vx-client-home__ghost-link:hover {
transform: translateY(-1px);
text-decoration: none !important;
}

.vx-client-home__status-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 12px rgba(34,197,94,.8);
}

.vx-client-home__stats,
.vx-client-home__actions-grid,
.vx-client-home__bottom-grid {
display: grid;
gap: 16px;
}

.vx-client-home__stats {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vx-client-home__stat-card,
.vx-client-home__action-card,
.vx-client-home__list-row {
text-decoration: none !important;
}

.vx-client-home__stat-card {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 16px;
padding: 22px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 16px;
background: linear-gradient(180deg, rgba(18,8,32,.82), rgba(10,4,20,.94));
color: #fff !important;
box-shadow: 0 16px 44px rgba(0,0,0,.16);
}

.vx-client-home__stat-card:hover,
.vx-client-home__action-card:hover,
.vx-client-home__list-row:hover {
border-color: rgba(106, 31, 199,.24);
transform: translateY(-2px);
}

.vx-client-home__stat-icon,
.vx-client-home__action-icon,
.vx-client-home__list-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
border-radius: 16px;
font-size: 1.35rem;
}

.vx-client-home__stat-card--services .vx-client-home__stat-icon,
.vx-client-home__list-icon--service {
background: rgba(106, 31, 199,.16);
color: #6A1FC7;
}

.vx-client-home__stat-card--tickets .vx-client-home__stat-icon {
background: rgba(186, 255, 148,.16);
color: #BAFF94;
}

.vx-client-home__stat-card--invoices .vx-client-home__stat-icon,
.vx-client-home__list-icon--invoice {
background: rgba(59,130,246,.15);
color: #60a5fa;
}

.vx-client-home__stat-card--balance .vx-client-home__stat-icon {
background: rgba(34,197,94,.14);
color: #4ade80;
}

.vx-client-home__stat-label {
font-size: 12px;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.56);
}

.vx-client-home__stat-value {
margin-top: 8px;
font-size: 2.2rem;
font-weight: 900;
line-height: 1;
color: #fff;
}

.vx-client-home__stat-value--balance {
font-size: 1.9rem;
}

.vx-client-home__stat-meta {
margin-top: 10px;
color: rgba(255,255,255,.6);
line-height: 1.6;
}

.vx-client-home__stat-arrow,
.vx-client-home__action-arrow {
color: rgba(255,255,255,.7);
}

.vx-client-home__actions-panel,
.vx-client-home__panel {
padding: 18px;
}

.vx-client-home__panel-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: 14px;
}

.vx-client-home__panel-header h3 {
margin: 0;
font-size: 1.05rem;
font-weight: 800;
color: #fff;
}

.vx-client-home__panel-header a {
color: #BAFF94 !important;
font-weight: 700;
text-decoration: none !important;
}

.vx-client-home__actions-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vx-client-home__action-card {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 16px;
padding: 18px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px;
background: rgba(255,255,255,.02);
color: #fff !important;
}

.vx-client-home__action-icon {
background: rgba(106, 31, 199,.16);
color: #6A1FC7;
}

.vx-client-home__action-copy h4 {
margin: 0 0 6px;
font-size: 1rem;
color: #fff;
}

.vx-client-home__action-copy p {
margin: 0;
color: rgba(255,255,255,.62);
line-height: 1.55;
}

.vx-client-home__bottom-grid {
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.05fr) minmax(320px, .9fr);
}

.vx-client-home__list {
display: grid;
gap: 12px;
}

.vx-client-home__list-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 16px;
border: 1px solid rgba(255,255,255,.06);
border-radius: 14px;
background: rgba(255,255,255,.02);
color: #fff !important;
}

.vx-client-home__list-main {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}

.vx-client-home__list-title {
font-weight: 700;
color: #fff;
}

.vx-client-home__list-subtitle,
.vx-client-home__list-side small,
.vx-client-home__empty {
display: block;
margin-top: 4px;
color: rgba(255,255,255,.58);
line-height: 1.55;
}

.vx-client-home__list-side {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
text-align: right;
}

.vx-client-home__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 28px;
padding: 0 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
}

.vx-client-home__badge--success {
background: rgba(34,197,94,.14);
color: #4ade80;
}

.vx-client-home__badge--danger {
background: rgba(239,68,68,.14);
color: #fb7185;
}

.vx-client-home__badge--info {
background: rgba(59,130,246,.14);
color: #60a5fa;
}

.vx-client-home__support {
display: grid;
grid-template-columns: 160px 1fr;
gap: 18px;
align-items: center;
}

.vx-client-home__support-chart {
position: relative;
width: 160px;
height: 160px;
border-radius: 50%;
background: conic-gradient(#6A1FC7 0deg 360deg);
display: flex;
align-items: center;
justify-content: center;
}

.vx-client-home__support-chart::after {
content: "";
position: absolute;
inset: 16px;
border-radius: 50%;
background: #12091f;
border: 1px solid rgba(255,255,255,.06);
}

.vx-client-home__support-chart-inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
}

.vx-client-home__support-chart-inner strong {
font-size: 2.2rem;
line-height: 1;
}

.vx-client-home__support-chart-inner span {
margin-top: 6px;
color: rgba(255,255,255,.56);
}

.vx-client-home__support-legend {
display: grid;
gap: 12px;
}

.vx-client-home__support-item {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 10px;
color: rgba(255,255,255,.72);
}

.vx-client-home__legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}

.vx-client-home__legend-dot--open {
background: #6A1FC7;
}

.vx-client-home__legend-dot--progress {
background: #6A1FC7;
}

.vx-client-home__legend-dot--awaiting {
background: #3b82f6;
}

.vx-client-home__legend-dot--closed {
background: #22c55e;
}

.vx-client-home__support-item strong {
color: #fff;
}

.vx-client-home__support-cta {
margin-top: 16px;
}

@media (max-width: 1280px) {
.vx-client-home__hero {
grid-template-columns: minmax(0, 1fr);
}

.vx-client-home__hero-actions {
justify-content: flex-start;
}

.vx-client-home__stats,
.vx-client-home__actions-grid,
.vx-client-home__bottom-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 840px) {
.vx-client-home__stats,
.vx-client-home__actions-grid,
.vx-client-home__bottom-grid,
.vx-client-home__support {
grid-template-columns: 1fr;
}

.vx-client-home__hero,
.vx-client-home__actions-panel,
.vx-client-home__panel {
padding: 16px;
}

.vx-client-home__stat-card,
.vx-client-home__action-card,
.vx-client-home__list-row {
grid-template-columns: auto 1fr;
}

.vx-client-home__stat-arrow,
.vx-client-home__action-arrow {
display: none;
}

.vx-client-home__list-row {
flex-direction: column;
align-items: stretch;
}

.vx-client-home__list-side {
align-items: flex-start;
text-align: left;
}

.vx-client-home__support-chart {
margin: 0 auto;
}
}

.topbar {
justify-content: flex-end !important;
background: transparent !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

.topbar > .topbar-actions {
margin-left: auto !important;
justify-content: flex-end !important;
}

.topbar > .menu-btn {
margin-right: auto !important;
}
.welcome-section {
margin-bottom: 18px !important;
}
.welcome-text {
font-size: 34px !important;
line-height: 1.1 !important;
}
.hd-portal-hero {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
padding: 32px;
margin-bottom: 18px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 12px;
background:
radial-gradient(circle at 16% 0%, rgba(106, 31, 199,.18), transparent 34%),
linear-gradient(180deg, rgba(22,10,38,.76), rgba(9,2,20,.78));
box-shadow: 0 24px 80px rgba(0,0,0,.24);
}
.hd-kicker {
display: block;
margin-bottom: 10px;
font-size: 11px;
font-weight: 800;
letter-spacing: .18em;
color: rgba(255,255,255,.40);
}
.hd-portal-hero h2 {
margin: 0 0 10px;
font-size: 36px;
line-height: 1.05;
font-weight: 900;
color: #fff;
}
.hd-portal-hero h2::first-letter {
color: #6A1FC7;
}
.hd-portal-hero p {
max-width: 560px;
margin: 0;
color: rgba(255,255,255,.58);
font-size: 14px;
line-height: 1.8;
}
.hd-hero-actions {
display: flex;
gap: 10px;
flex-shrink: 0;
}
.hd-primary-action,
.hd-ghost-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 42px;
padding: 0 16px;
border-radius: 8px;
font-size: 13px;
font-weight: 800;
text-decoration: none !important;
}
.hd-primary-action {
color: #fff !important;
background: linear-gradient(135deg, #6A1FC7, #6A1FC7);
box-shadow: 0 12px 36px rgba(106, 31, 199,.24);
}
.hd-ghost-action {
color: #fff !important;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.045);
}
.performance-summary {
background: rgba(255,255,255,.045) !important;
border: 1px solid rgba(255,255,255,.08) !important;
border-radius: 8px !important;
box-shadow: none !important;
color: rgba(255,255,255,.74) !important;
}
.tiles .row {
row-gap: 18px;
}
.tiles .tile-card,
.chart-card,
.quick-actions-card,
.sites-section {
border-radius: 12px !important;
}
.tile-title,
.action-description,
.sites-table th {
color: rgba(255,255,255,.54) !important;
}
.sites-table td {
border: 1px solid rgba(255,255,255,.06) !important;
border-radius: 8px !important;
}
.breadcrumb-bar {
background: rgba(255,255,255,.035) !important;
border: 1px solid rgba(255,255,255,.07) !important;
border-radius: 8px !important;
}
@media (max-width: 992px) {
.sidebar {
left: 0 !important;
top: 0 !important;
bottom: 0 !important;
border-radius: 0 12px 12px 0 !important;
}
.main-content {
margin-left: 0 !important;
padding: 0 !important;
}
.topbar {
margin: 0 !important;
border-radius: 0 !important;
}
.topbar-nav {
display: none;
}
.dashboard-content {
padding: 18px 14px 34px !important;
}
.hd-portal-hero {
align-items: flex-start;
flex-direction: column;
padding: 24px;
}
.hd-portal-hero h2 {
font-size: 30px;
}
}
@media (min-width: 993px) and (max-width: 1180px) {
.topbar-nav {
display: none;
}
.search-container {
max-width: 300px !important;
}
}
@media (max-width: 640px) {
.hd-hero-actions {
width: 100%;
flex-direction: column;
}
.hd-primary-action,
.hd-ghost-action {
width: 100%;
}
}

.vx-client-home__content-grid {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(320px, .9fr);
gap: 32px;
align-items: start;
}

.vx-client-home__content-main,
.vx-client-home__content-side {
display: grid;
gap: 32px;
}

.vx-client-home__panel-heading p {
margin: 6px 0 0;
color: rgba(255,255,255,.56);
line-height: 1.6;
}

.vx-client-home__table-wrap {
overflow-x: auto;
}

.vx-client-home__table {
width: 100%;
border-collapse: collapse;
color: #fff;
}

.vx-client-home__table thead th {
padding: 0 0 12px;
border-bottom: 1px solid rgba(255,255,255,.08);
font-size: 12px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(255,255,255,.52);
}

.vx-client-home__table tbody td {
padding: 16px 0;
border-bottom: 1px solid rgba(255,255,255,.06);
vertical-align: middle;
}

.vx-client-home__table tbody tr:last-child td {
border-bottom: 0;
}

.vx-client-home__table-empty,
.vx-client-home__table-note {
color: rgba(255,255,255,.58);
}

.vx-client-home__table-note {
margin-top: 6px;
line-height: 1.5;
}

.vx-client-home__table-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.vx-client-home__table-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 0 12px;
border: 1px solid rgba(255,255,255,.1);
border-radius: 999px;
background: rgba(255,255,255,.03);
color: #fff !important;
font-size: 13px;
font-weight: 700;
text-decoration: none !important;
transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}

.vx-client-home__table-link:hover,
.vx-client-home__account-item:hover,
.vx-client-home__stack-card:hover {
border-color: rgba(106, 31, 199,.28);
transform: translateY(-1px);
text-decoration: none !important;
}

.vx-client-home__badge--primary {
background: rgba(106, 31, 199,.14);
color: #d8b4fe;
}

.vx-client-home__badge--muted {
background: rgba(255,255,255,.08);
color: rgba(255,255,255,.72);
}

.vx-client-home__account-grid {
display: grid;
gap: 12px;
}

.vx-client-home__account-item {
display: block;
padding: 16px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px;
background: rgba(255,255,255,.02);
color: #fff !important;
text-decoration: none !important;
transition: border-color .2s ease, transform .2s ease;
}

.vx-client-home__account-item span,
.vx-client-home__stack-card span {
display: block;
color: rgba(255,255,255,.56);
}

.vx-client-home__account-item strong,
.vx-client-home__stack-card strong {
display: block;
margin-top: 8px;
font-size: 1.05rem;
line-height: 1.4;
color: #fff;
}

.vx-client-home__account-item small {
display: block;
margin-top: 8px;
color: rgba(255,255,255,.5);
line-height: 1.5;
}

.vx-client-home__actions-grid--stacked {
grid-template-columns: 1fr;
}

.vx-client-home__stack-list {
display: grid;
gap: 12px;
}

.vx-client-home__stack-card {
display: block;
padding: 16px;
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px;
background: rgba(255,255,255,.02);
color: #fff !important;
text-decoration: none !important;
transition: border-color .2s ease, transform .2s ease;
}

.vx-client-home__stack-card span {
margin-top: 8px;
line-height: 1.55;
}

@media (max-width: 1380px) {
.vx-client-home__hero {
grid-template-columns: minmax(0, 1fr);
}

.vx-client-home__hero-art {
min-height: 120px;
}

.vx-client-home__hero-actions {
justify-content: flex-start;
}

.vx-client-home__stats,
.vx-client-home__actions-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vx-client-home__content-grid {
grid-template-columns: 1fr;
gap: 24px;
}

.vx-client-home__content-main,
.vx-client-home__content-side {
gap: 24px;
}
}

@media (max-width: 991px) {
.vx-client-home__stats,
.vx-client-home__actions-grid,
.vx-client-home__bottom-grid {
grid-template-columns: 1fr;
}

.vx-client-home__stat-card,
.vx-client-home__action-card,
.vx-client-home__list-row {
padding: 20px;
}

.vx-client-home__hero,
.vx-client-home__panel,
.vx-client-home__actions-panel {
padding: 20px;
}

.vx-client-home__table {
min-width: 720px;
}

.vx-client-home__content-grid,
.vx-client-home__content-main,
.vx-client-home__content-side,
.vx-client-home__stats,
.vx-client-home__actions-grid {
gap: 24px;
}
}

@media (max-width: 767px) {
.portal-container {
width: 100%;
overflow-x: hidden;
}

.main-content {
margin-left: 0 !important;
width: 100% !important;
max-width: 100% !important;
padding: 10px 8px 0 !important;
overflow-x: hidden;
}

.topbar {
width: 100% !important;
max-width: 100% !important;
padding-left: 10px !important;
padding-right: 10px !important;
border-radius: 10px !important;
}

.dashboard-content {
padding-left: 0 !important;
padding-right: 0 !important;
overflow-x: hidden;
}

.vx-client-home,
.vx-client-home__content-grid,
.vx-client-home__content-main,
.vx-client-home__content-side,
.vx-client-home__stats,
.vx-client-home__actions-grid,
.vx-client-home__account-grid,
.vx-client-home__stack-list {
gap: 20px !important;
}

.vx-client-home__hero h2 {
font-size: 2rem;
}

.vx-client-home__hero-actions,
.vx-client-home__table-actions {
width: 100%;
}

.vx-client-home__primary,
.vx-client-home__secondary,
.vx-client-home__table-link {
width: 100%;
}

.vx-client-home__panel-header {
align-items: flex-start;
flex-direction: column;
}
}




.responsive-tabs-sm .nav-item a:hover{
	background: transparent!important;
	border: 0px!important;
}

@media (max-width: 767px) {
.dashboard-content {
padding: 0 16px 20px !important;
}

.vx-client-home {
display: grid;
gap: 18px !important;
}

.vx-client-home > section,
.vx-client-home__content-main > section,
.vx-client-home__content-side > section {
margin: 0 !important;
}

.vx-client-home__hero,
.vx-client-home__panel,
.vx-client-home__actions-panel,
.vx-client-home__stat-card,
.vx-client-home__account-item,
.vx-client-home__stack-card,
.vx-client-home__action-card,
.vx-client-home__list-row,
.vx-client-home__table tbody tr {
border-radius: 18px !important;
}

.vx-client-home__stats,
.vx-client-home__content-grid,
.vx-client-home__content-main,
.vx-client-home__content-side,
.vx-client-home__account-grid,
.vx-client-home__stack-list,
.vx-client-home__actions-grid {
gap: 16px !important;
}

.vx-client-home__hero,
.vx-client-home__panel,
.vx-client-home__actions-panel {
padding: 16px !important;
}

.vx-client-home__hero-copy,
.vx-client-home__panel-heading,
.vx-client-home__action-copy,
.vx-client-home__list-main > div {
min-width: 0;
}

.vx-client-home__hero h2,
.vx-client-home__panel-header h3,
.vx-client-home__list-title,
.vx-client-home__action-copy h4,
.vx-client-home__account-item strong,
.vx-client-home__stack-card strong {
overflow-wrap: anywhere;
word-break: break-word;
text-wrap: balance;
}

.vx-client-home__hero p,
.vx-client-home__panel-heading p,
.vx-client-home__list-subtitle,
.vx-client-home__action-copy p,
.vx-client-home__table-note,
.vx-client-home__stat-meta,
.vx-client-home__account-item small,
.vx-client-home__stack-card span {
font-size: 14px !important;
line-height: 1.6 !important;
overflow-wrap: anywhere;
word-break: break-word;
}

.vx-client-home__hero-actions,
.vx-client-home__table-actions {
gap: 12px !important;
}

.vx-client-home__primary,
.vx-client-home__secondary,
.vx-client-home__table-link {
min-height: 48px !important;
font-size: 16px !important;
}

.vx-client-home__stat-card {
display: grid !important;
grid-template-columns: 56px minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 14px !important;
min-height: 96px;
padding: 16px !important;
}

.vx-client-home__stat-icon {
width: 56px !important;
height: 56px !important;
}

.vx-client-home__stat-label {
font-size: 11px !important;
letter-spacing: .12em !important;
}

.vx-client-home__stat-value {
font-size: 2rem !important;
line-height: 1 !important;
}

.vx-client-home__stat-meta {
margin-top: 6px !important;
font-size: 13px !important;
}

.vx-client-home__list {
display: grid !important;
gap: 12px !important;
}

.vx-client-home__list-row {
display: grid !important;
grid-template-columns: 1fr !important;
align-items: stretch !important;
gap: 12px !important;
padding: 16px !important;
}

.vx-client-home__list-main {
display: grid !important;
grid-template-columns: 48px minmax(0, 1fr) !important;
align-items: start !important;
gap: 12px !important;
}

.vx-client-home__list-icon,
.vx-client-home__action-icon {
width: 48px !important;
height: 48px !important;
flex: 0 0 48px !important;
}

.vx-client-home__list-title {
font-size: 16px !important;
line-height: 1.35 !important;
}

.vx-client-home__list-subtitle {
margin-top: 6px !important;
font-size: 13px !important;
}

.vx-client-home__list-side {
display: grid !important;
grid-template-columns: 1fr !important;
align-items: start !important;
justify-items: start !important;
gap: 8px !important;
text-align: left !important;
width: 100% !important;
}

.vx-client-home__badge {
min-height: 28px !important;
font-size: 12px !important;
}

.vx-client-home__table-wrap {
overflow: visible !important;
}

.vx-client-home__table,
.vx-client-home__table tbody,
.vx-client-home__table tr,
.vx-client-home__table td {
display: block !important;
width: 100% !important;
}

.vx-client-home__table {
min-width: 0 !important;
}

.vx-client-home__table thead {
display: none !important;
}

.vx-client-home__table tbody {
display: grid !important;
gap: 12px !important;
}

.vx-client-home__table tbody tr {
padding: 16px !important;
border: 1px solid rgba(255,255,255,.06) !important;
background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.015)) !important;
}

.vx-client-home__table tbody td {
padding: 0 !important;
border-bottom: 0 !important;
font-size: 13px !important;
line-height: 1.55 !important;
}

.vx-client-home__table tbody td + td {
margin-top: 10px !important;
}

.vx-client-home__table tbody td::before {
display: block;
margin-bottom: 4px;
color: rgba(255,255,255,.5);
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}

.vx-client-home__table tbody td:nth-child(1)::before { content: "Subject"; }
.vx-client-home__table tbody td:nth-child(2)::before { content: "Department"; }
.vx-client-home__table tbody td:nth-child(3)::before { content: "Status"; }
.vx-client-home__table tbody td:nth-child(4)::before { content: "Last Reply"; }
.vx-client-home__table tbody td:nth-child(5)::before { content: "Action"; }

.vx-client-home__table-actions {
width: auto !important;
}

.vx-client-home__table-link {
display: inline-flex !important;
width: auto !important;
padding: 0 14px !important;
font-size: 13px !important;
}

.vx-client-home__account-item,
.vx-client-home__stack-card {
padding: 16px !important;
}

.vx-client-home__account-item span,
.vx-client-home__stack-card span {
font-size: 12px !important;
}

.vx-client-home__account-item strong,
.vx-client-home__stack-card strong {
font-size: 16px !important;
}

.vx-client-home__action-card {
display: grid !important;
grid-template-columns: 48px minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 12px !important;
padding: 16px !important;
min-height: 88px;
}

.vx-client-home__action-copy h4 {
margin-bottom: 4px !important;
font-size: 16px !important;
line-height: 1.35 !important;
}

.vx-client-home__action-copy p {
font-size: 13px !important;
line-height: 1.5 !important;
}
}

@media (max-width: 575px) {
.dashboard-content {
padding-left: 16px !important;
padding-right: 16px !important;
}

.vx-client-home {
gap: 16px !important;
}

.vx-client-home__hero,
.vx-client-home__panel,
.vx-client-home__actions-panel,
.vx-client-home__stat-card,
.vx-client-home__list-row,
.vx-client-home__table tbody tr,
.vx-client-home__account-item,
.vx-client-home__stack-card,
.vx-client-home__action-card {
padding: 16px !important;
}

.vx-client-home__stat-card {
grid-template-columns: 52px minmax(0, 1fr) !important;
}

.vx-client-home__stat-arrow,
.vx-client-home__action-arrow {
display: none !important;
}

.vx-client-home__action-card {
grid-template-columns: 48px minmax(0, 1fr) !important;
min-height: 84px;
}
}


.vx-client-home__hero {
	margin-bottom: 25px;
	
}


.vx-client-home__stats {
	margin-bottom: 25px;
}

.vx-page-hero {
	
		margin-bottom: 25px;
	
}

.alert a {
	text-decoration: none!important;
	
}

.vx-page-actions {
	
			margin-top: 10px;
}


.modal .modal-header {
	background: transparent;
	
}


pre {
	
	color: #fff;
	
}


#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"], #order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"] {
  background: transparent !important;
  border-color: transparent !important;
}


#order-standard_cart .total-due-today .amt {
	background: transparent!important;
	
}




#order-standard_cart .view-cart-items .item-domain {
	color: #fff!important;
	
}


#order-standard_cart .item-group {
color: #fff!important;
	
}


#order-standard_cart .order-summary .recurring-charges {
	
	color: #fff!important;

	
}


#order-standard_cart .empty-cart .btn {
	
	margin-top: 15px!important;
}



#order-standard_cart .domain-selection-options .option {
	
	background: #0f051c !important;
}


#frmProductDomain .btn {
	
	padding-top: 15px;
	padding-bottom: 15px;
	
}