:root {
--hpro-purple: #4c0fb8;
--hpro-purple-dark: #37107f;
--hpro-purple-soft: #f3efff;
--hpro-navy: #0b1020;
--hpro-navy-dark: #050711;
--hpro-bg: #f5f6fb;
--hpro-white: #ffffff;
--hpro-text: #1f2937;
--hpro-text-soft: #374151;
--hpro-muted: #6b7280;
--hpro-border: #e5e7eb;
--hpro-border-purple: #c9b2f5;
--hpro-danger: #dc2626;
}
html {
scroll-behavior: smooth;
}
body.hpro-whmcs-template {
background: var(--hpro-bg) !important;
color: var(--hpro-text) !important;
font-family: Inter, Outfit, Arial, sans-serif !important;
font-size: 14px !important;
line-height: 1.5 !important;
margin: 0 !important;
min-height: 100vh !important;
}
body.hpro-whmcs-template *,
body.hpro-whmcs-template *::before,
body.hpro-whmcs-template *::after {
box-sizing: border-box;
}
body.hpro-whmcs-template a {
color: var(--hpro-purple) !important;
text-decoration: none !important;
}
body.hpro-whmcs-template a:hover,
body.hpro-whmcs-template a:focus {
color: var(--hpro-purple-dark) !important;
text-decoration: none !important;
}
body.hpro-whmcs-template .container {
background: transparent !important;
max-width: 1180px !important;
width: 1180px !important;
}
body.hpro-whmcs-template .elementor,
body.hpro-whmcs-template .elementor-location-header,
body.hpro-whmcs-template .elementor-location-footer,
body.hpro-whmcs-template [data-elementor-type="header"],
body.hpro-whmcs-template [data-elementor-type="footer"],
body.hpro-whmcs-template .hpro-brandbar {
display: none !important;
height: 0 !important;
margin: 0 !important;
overflow: hidden !important;
padding: 0 !important;
}
body.hpro-whmcs-template #header.header {
background: var(--hpro-navy) !important;
border: 0 !important;
box-shadow: 0 8px 22px rgba(17, 24, 39, 0.16) !important;
position: relative !important;
z-index: 50 !important;
}
body.hpro-whmcs-template .topbar {
background: var(--hpro-navy-dark) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
color: var(--hpro-white) !important;
font-size: 12px !important;
min-height: 30px !important;
}
body.hpro-whmcs-template .topbar .container {
background: transparent !important;
}
body.hpro-whmcs-template .topbar .btn,
body.hpro-whmcs-template .topbar a,
body.hpro-whmcs-template .topbar .input-group-text {
background: transparent !important;
border: 0 !important;
color: var(--hpro-white) !important;
font-size: 12px !important;
padding: 6px 10px !important;
}
body.hpro-whmcs-template .topbar .btn:hover,
body.hpro-whmcs-template .topbar .btn:focus,
body.hpro-whmcs-template .topbar a:hover,
body.hpro-whmcs-template .topbar a:focus {
background: rgba(255, 255, 255, 0.08) !important;
color: var(--hpro-white) !important;
}
body.hpro-whmcs-template .topbar .btn-active-client {
font-weight: 800 !important;
}
body.hpro-whmcs-template .hpro-publicbar {
background: var(--hpro-navy) !important;
background-color: var(--hpro-navy) !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
body.hpro-whmcs-template .hpro-publicbar .container {
background: transparent !important;
}
body.hpro-whmcs-template .hpro-publicbar-inner {
align-items: center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
display: flex !important;
gap: 18px !important;
justify-content: space-between !important;
margin: 0 !important;
min-height: 58px !important;
padding: 8px 0 !important;
}
body.hpro-whmcs-template .hpro-public-logo {
align-items: center !important;
background: var(--hpro-white) !important;
border: 0 !important;
border-radius: 8px !important;
box-shadow: none !important;
display: inline-flex !important;
flex: 0 0 auto !important;
height: 42px !important;
justify-content: center !important;
min-width: 285px !important;
padding: 5px 14px !important;
}
body.hpro-whmcs-template .hpro-public-logo img {
display: block !important;
height: auto !important;
max-height: 32px !important;
max-width: 255px !important;
object-fit: contain !important;
width: auto !important;
}
body.hpro-whmcs-template .hpro-public-nav,
body.hpro-whmcs-template nav.hpro-public-nav {
align-items: center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
display: flex !important;
flex: 1 1 auto !important;
gap: 6px !important;
justify-content: flex-end !important;
}
body.hpro-whmcs-template .hpro-public-nav a,
body.hpro-whmcs-template nav.hpro-public-nav a {
background: var(--hpro-purple) !important;
background-color: var(--hpro-purple) !important;
background-image: none !important;
border: 0 !important;
border-radius: 7px !important;
box-shadow: none !important;
color: var(--hpro-white) !important;
display: inline-flex !important;
font-size: 12px !important;
font-weight: 800 !important;
line-height: 1 !important;
padding: 9px 13px !important;
text-decoration: none !important;
white-space: nowrap !important;
}
body.hpro-whmcs-template .hpro-public-nav a:hover,
body.hpro-whmcs-template .hpro-public-nav a:focus,
body.hpro-whmcs-template nav.hpro-public-nav a:hover,
body.hpro-whmcs-template nav.hpro-public-nav a:focus {
background: var(--hpro-purple-dark) !important;
background-color: var(--hpro-purple-dark) !important;
color: var(--hpro-white) !important;
}
body.hpro-whmcs-template .navbar-light {
display: none !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body.hpro-whmcs-template .navbar.main-navbar-wrapper,
body.hpro-whmcs-template .main-navbar-wrapper,
body.hpro-whmcs-template .main-navbar-wrapper .container,
body.hpro-whmcs-template #mainNavbar,
body.hpro-whmcs-template #mainNavbar.navbar-collapse,
body.hpro-whmcs-template .main-navbar-wrapper .navbar-collapse,
body.hpro-whmcs-template .main-navbar-wrapper .navbar-nav,
body.hpro-whmcs-template .main-navbar-wrapper .navbar-nav.toolbar,
body.hpro-whmcs-template .main-navbar-wrapper .navbar-nav > li,
body.hpro-whmcs-template .main-navbar-wrapper .navbar-nav > li.nav-item {
background: var(--hpro-purple) !important;
background-color: var(--hpro-purple) !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
}
body.hpro-whmcs-template .navbar.main-navbar-wrapper,
body.hpro-whmcs-template .main-navbar-wrapper {
height: 50px !important;
margin: 0 !important;
min-height: 50px !important;
padding: 0 !important;
}
body.hpro-whmcs-template .main-navbar-wrapper .container {
background: transparent !important;
}
body.hpro-whmcs-template .main-navbar-wrapper .navbar-nav > li > a,
body.hpro-whmcs-template .main-navbar-wrapper .navbar-nav > li > a.nav-link,
body.hpro-whmcs-template .main-navbar-wrapper .navbar-nav > li > .nav-link,
body.hpro-whmcs-template .main-navbar-wrapper .navbar-nav > li.active > a,
body.hpro-whmcs-template .main-navbar-wrapper .navbar-nav > li.active > .nav-link,
body.hpro-whmcs-template .main-navbar-wrapper .navbar-nav > li.show > a,
body.hpro-whmcs-template .main-navbar-wrapper .navbar-nav > li.show > .nav-link,
body.hpro-whmcs-template .main-navbar-wrapper .navbar-nav > li.open > a,
body.hpro-whmcs-template .main-navbar-wrapper .navbar-nav > li.open > .nav-link,
body.hpro-whmcs-template #mainNavbar a,
body.hpro-whmcs-template #mainNavbar .nav-link {
align-items: center !important;
background: var(--hpro-purple) !important;
background-color: var(--hpro-purple) !important;
background-image: none !important;
border: 0 !important;
box-shadow: none !important;
color: var(--hpro-white) !important;
display: flex !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: 0.01em !important;
min-height: 50px !important;
padding: 15px 15px !important;
text-shadow: none !important;
}
body.hpro-whmcs-template .main-navbar-wrapper .navbar-nav > li > a:hover,
body.hpro-whmcs-template .main-navbar-wrapper .navbar-nav > li > a:focus,
body.hpro-whmcs-template .main-navbar-wrapper .navbar-nav > li > .nav-link:hover,
body.hpro-whmcs-template .main-navbar-wrapper .navbar-nav > li > .nav-link:focus,
body.hpro-whmcs-template #mainNavbar a:hover,
body.hpro-whmcs-template #mainNavbar a:focus,
body.hpro-whmcs-template #mainNavbar .nav-link:hover,
body.hpro-whmcs-template #mainNavbar .nav-link:focus {
background: var(--hpro-purple-dark) !important;
background-color: var(--hpro-purple-dark) !important;
color: var(--hpro-white) !important;
}
body.hpro-whmcs-template .main-navbar-wrapper .navbar-nav > li > a.dropdown-toggle::after,
body.hpro-whmcs-template .main-navbar-wrapper .navbar-nav > li > .nav-link.dropdown-toggle::after {
border-top-color: var(--hpro-white) !important;
}
body.hpro-whmcs-template .main-navbar-wrapper .cart-btn,
body.hpro-whmcs-template .main-navbar-wrapper .btn.nav-link.cart-btn,
body.hpro-whmcs-template #mainNavbar .cart-btn {
background: var(--hpro-purple) !important;
background-color: var(--hpro-purple) !important;
border: 1px solid rgba(255, 255, 255, 0.30) !important;
border-radius: 8px !important;
color: var(--hpro-white) !important;
margin-left: 8px !important;
min-height: 40px !important;
padding: 10px 14px !important;
}
body.hpro-whmcs-template .main-navbar-wrapper .cart-btn:hover,
body.hpro-whmcs-template .main-navbar-wrapper .btn.nav-link.cart-btn:hover,
body.hpro-whmcs-template #mainNavbar .cart-btn:hover {
background: var(--hpro-purple-dark) !important;
background-color: var(--hpro-purple-dark) !important;
color: var(--hpro-white) !important;
}
body.hpro-whmcs-template .cart-btn .badge {
background: var(--hpro-white) !important;
border-radius: 999px !important;
color: var(--hpro-purple) !important;
font-size: 11px !important;
font-weight: 800 !important;
line-height: 1 !important;
margin-left: 4px !important;
padding: 4px 6px !important;
}
body.hpro-whmcs-template .main-navbar-wrapper .dropdown-menu,
body.hpro-whmcs-template .main-navbar-wrapper ul.dropdown-menu,
body.hpro-whmcs-template .main-navbar-wrapper .collapsable-dropdown-menu {
background: var(--hpro-navy) !important;
background-color: var(--hpro-navy) !important;
background-image: none !important;
border: 1px solid rgba(255, 255, 255, 0.14) !important;
border-radius: 10px !important;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32) !important;
margin-top: 0 !important;
min-width: 230px !important;
padding: 7px !important;
z-index: 99999 !important;
}
body.hpro-whmcs-template .main-navbar-wrapper .dropdown-menu li,
body.hpro-whmcs-template .main-navbar-wrapper .dropdown-menu li.dropdown-item {
background: transparent !important;
border: 0 !important;
color: var(--hpro-white) !important;
display: block !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
body.hpro-whmcs-template .main-navbar-wrapper .dropdown-menu li > a,
body.hpro-whmcs-template .main-navbar-wrapper .dropdown-menu li.dropdown-item > a,
body.hpro-whmcs-template .main-navbar-wrapper .dropdown-menu a.dropdown-item,
body.hpro-whmcs-template .main-navbar-wrapper .dropdown-menu .dropdown-item {
background: transparent !important;
border-radius: 7px !important;
color: var(--hpro-white) !important;
display: block !important;
font-size: 13px !important;
font-weight: 800 !important;
line-height: 1.35 !important;
margin: 0 !important;
min-height: 0 !important;
padding: 10px 12px !important;
text-align: left !important;
white-space: nowrap !important;
}
body.hpro-whmcs-template .main-navbar-wrapper .dropdown-menu li > a:hover,
body.hpro-whmcs-template .main-navbar-wrapper .dropdown-menu li > a:focus,
body.hpro-whmcs-template .main-navbar-wrapper .dropdown-menu a.dropdown-item:hover,
body.hpro-whmcs-template .main-navbar-wrapper .dropdown-menu a.dropdown-item:focus,
body.hpro-whmcs-template .main-navbar-wrapper .dropdown-menu .dropdown-item:hover,
body.hpro-whmcs-template .main-navbar-wrapper .dropdown-menu .dropdown-item:focus {
background: var(--hpro-purple) !important;
background-color: var(--hpro-purple) !important;
color: var(--hpro-white) !important;
}
body.hpro-whmcs-template .dropdown-divider {
border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
margin: 7px 0 !important;
}
body.hpro-whmcs-template .master-breadcrumb {
background: var(--hpro-white) !important;
border-bottom: 1px solid var(--hpro-border-purple) !important;
border-top: 0 !important;
box-shadow: none !important;
margin: 0 !important;
padding: 10px 0 !important;
}
body.hpro-whmcs-template .breadcrumb {
background: transparent !important;
font-size: 13px !important;
font-weight: 700 !important;
margin: 0 !important;
padding: 0 !important;
}
body.hpro-whmcs-template #main-body {
background: var(--hpro-bg) !important;
min-height: 620px !important;
padding: 28px 0 44px !important;
}
body.hpro-whmcs-template .primary-content {
background: transparent !important;
}
body.hpro-whmcs-template .card,
body.hpro-whmcs-template .client-home-cards .card,
body.hpro-whmcs-template .card-sidebar {
background: var(--hpro-white) !important;
border: 1px solid var(--hpro-border) !important;
border-radius: 12px !important;
box-shadow: 0 10px 24px rgba(17, 24, 39, 0.06) !important;
overflow: hidden !important;
}
body.hpro-whmcs-template .card-header,
body.hpro-whmcs-template .client-home-cards .card-header {
background: var(--hpro-white) !important;
border-bottom: 1px solid var(--hpro-border-purple) !important;
color: var(--hpro-text) !important;
padding: 13px 16px !important;
}
body.hpro-whmcs-template .custom-bg-primary,
body.hpro-whmcs-template .card.custom-bg-primary,
body.hpro-whmcs-template .card-header.custom-bg-primary,
body.hpro-whmcs-template .card.border.custom-bg-primary > .card-header,
body.hpro-whmcs-template .sidebar .card-sidebar .card-header {
background: var(--hpro-purple) !important;
background-color: var(--hpro-purple) !important;
background-image: none !important;
border-color: var(--hpro-purple) !important;
color: var(--hpro-white) !important;
}
body.hpro-whmcs-template .card-header h1,
body.hpro-whmcs-template .card-header h2,
body.hpro-whmcs-template .card-header h3,
body.hpro-whmcs-template .card-header h4,
body.hpro-whmcs-template .card-header h5,
body.hpro-whmcs-template .card-header h6,
body.hpro-whmcs-template .custom-bg-primary h1,
body.hpro-whmcs-template .custom-bg-primary h2,
body.hpro-whmcs-template .custom-bg-primary h3,
body.hpro-whmcs-template .custom-bg-primary h4,
body.hpro-whmcs-template .custom-bg-primary h5,
body.hpro-whmcs-template .custom-bg-primary h6,
body.hpro-whmcs-template .sidebar .card-sidebar .card-header h3,
body.hpro-whmcs-template .sidebar .card-sidebar .card-header h4 {
color: var(--hpro-white) !important;
}
body.hpro-whmcs-template .custom-text-primary {
color: var(--hpro-purple) !important;
}
body.hpro-whmcs-template .card-body,
body.hpro-whmcs-template .card-body h1,
body.hpro-whmcs-template .card-body h2,
body.hpro-whmcs-template .card-body h3,
body.hpro-whmcs-template .card-body h4,
body.hpro-whmcs-template .card-body h5,
body.hpro-whmcs-template .card-body h6,
body.hpro-whmcs-template .card-body p,
body.hpro-whmcs-template .card-body div,
body.hpro-whmcs-template .card-body span,
body.hpro-whmcs-template .card-body small,
body.hpro-whmcs-template .card-body strong,
body.hpro-whmcs-template .card-body label,
body.hpro-whmcs-template .card-body .font-weight-bold,
body.hpro-whmcs-template .card-body .col-form-label,
body.hpro-whmcs-template .card-body .form-check-label,
body.hpro-whmcs-template .card-body .text-muted,
body.hpro-whmcs-template .card-body .help-block,
body.hpro-whmcs-template .card-body .form-text,
body.hpro-whmcs-template .card-body td,
body.hpro-whmcs-template .card-body th,
body.hpro-whmcs-template .card-body li,
body.hpro-whmcs-template .form-group label,
body.hpro-whmcs-template .form-group .form-check-label,
body.hpro-whmcs-template .form-group .col-form-label {
color: var(--hpro-text) !important;
}
body.hpro-whmcs-template .card-body a {
color: var(--hpro-purple) !important;
}
body.hpro-whmcs-template .card-body a:hover,
body.hpro-whmcs-template .card-body a:focus {
color: var(--hpro-purple-dark) !important;
}
body.hpro-whmcs-template .card-body .text-danger,
body.hpro-whmcs-template .card-body .text-danger *,
body.hpro-whmcs-template .text-danger {
color: var(--hpro-danger) !important;
}
body.hpro-whmcs-template input,
body.hpro-whmcs-template textarea,
body.hpro-whmcs-template select,
body.hpro-whmcs-template .form-control,
body.hpro-whmcs-template .custom-select {
background: #f3f4f6 !important;
border: 1px solid var(--hpro-border-purple) !important;
border-radius: 7px !important;
box-shadow: none !important;
color: #2b2b2b !important;
font-size: 14px !important;
min-height: 38px !important;
-webkit-text-fill-color: #2b2b2b !important;
}
body.hpro-whmcs-template input::placeholder,
body.hpro-whmcs-template textarea::placeholder,
body.hpro-whmcs-template .form-control::placeholder {
color: #7a7a7a !important;
opacity: 1 !important;
}
body.hpro-whmcs-template input:focus,
body.hpro-whmcs-template textarea:focus,
body.hpro-whmcs-template select:focus,
body.hpro-whmcs-template .form-control:focus,
body.hpro-whmcs-template .custom-select:focus {
background: var(--hpro-white) !important;
border-color: var(--hpro-purple) !important;
box-shadow: 0 0 0 0.15rem rgba(76, 15, 184, 0.18) !important;
color: #1f1f1f !important;
outline: 0 !important;
-webkit-text-fill-color: #1f1f1f !important;
}
body.hpro-whmcs-template input[readonly],
body.hpro-whmcs-template textarea[readonly],
body.hpro-whmcs-template select[readonly],
body.hpro-whmcs-template .form-control[readonly],
body.hpro-whmcs-template input:disabled,
body.hpro-whmcs-template textarea:disabled,
body.hpro-whmcs-template select:disabled,
body.hpro-whmcs-template .form-control:disabled {
background: #eceff3 !important;
color: #5a5a5a !important;
opacity: 1 !important;
-webkit-text-fill-color: #5a5a5a !important;
}
body.hpro-whmcs-template .input-group-text {
background: #eceff3 !important;
border-color: var(--hpro-border-purple) !important;
color: #2b2b2b !important;
}
body.hpro-whmcs-template table.table,
body.hpro-whmcs-template table.dataTable,
body.hpro-whmcs-template .table-list {
background: var(--hpro-white) !important;
border: 1px solid var(--hpro-border) !important;
border-radius: 10px !important;
box-shadow: 0 8px 20px rgba(17, 24, 39, 0.04) !important;
overflow: hidden !important;
}
body.hpro-whmcs-template table.table thead th,
body.hpro-whmcs-template .table thead th,
body.hpro-whmcs-template table.dataTable thead th,
body.hpro-whmcs-template .dataTables_wrapper table thead th,
body.hpro-whmcs-template .table-list thead th,
body.hpro-whmcs-template .table-list > thead > tr > th,
body.hpro-whmcs-template #tableServicesList thead th,
body.hpro-whmcs-template #tableInvoicesList thead th,
body.hpro-whmcs-template #tableQuotesList thead th,
body.hpro-whmcs-template #tableDomainsList thead th,
body.hpro-whmcs-template #tableTicketsList thead th {
background: var(--hpro-purple) !important;
background-color: var(--hpro-purple) !important;
background-image: none !important;
border-color: var(--hpro-purple) !important;
color: var(--hpro-white) !important;
font-size: 12px !important;
font-weight: 900 !important;
text-transform: none !important;
vertical-align: middle !important;
}
body.hpro-whmcs-template table.table thead th a,
body.hpro-whmcs-template .table thead th a,
body.hpro-whmcs-template table.dataTable thead th a,
body.hpro-whmcs-template .dataTables_wrapper table thead th a,
body.hpro-whmcs-template .table-list thead th a {
color: var(--hpro-white) !important;
}
body.hpro-whmcs-template table.table tbody td,
body.hpro-whmcs-template .table tbody td,
body.hpro-whmcs-template table.dataTable tbody td {
border-color: #edf0f5 !important;
color: var(--hpro-text) !important;
font-size: 13px !important;
vertical-align: middle !important;
}
body.hpro-whmcs-template table.table tbody tr:nth-child(even),
body.hpro-whmcs-template table.dataTable tbody tr:nth-child(even) {
background: #faf9ff !important;
}
body.hpro-whmcs-template .table-full-width {
font-size: 14px !important;
line-height: 1.4 !important;
table-layout: auto !important;
width: 100% !important;
}
body.hpro-whmcs-template .table-full-width th,
body.hpro-whmcs-template .table-full-width td {
overflow: hidden !important;
padding: 8px 10px !important;
text-overflow: ellipsis !important;
vertical-align: middle !important;
white-space: nowrap !important;
}
body.hpro-whmcs-template .btn-primary,
body.hpro-whmcs-template .custom-btn-primary,
body.hpro-whmcs-template .hpro-btn-primary {
background: var(--hpro-purple) !important;
background-color: var(--hpro-purple) !important;
border-color: var(--hpro-purple) !important;
color: var(--hpro-white) !important;
font-weight: 800 !important;
}
body.hpro-whmcs-template .btn-primary:hover,
body.hpro-whmcs-template .custom-btn-primary:hover,
body.hpro-whmcs-template .hpro-btn-primary:hover {
background: var(--hpro-purple-dark) !important;
background-color: var(--hpro-purple-dark) !important;
border-color: var(--hpro-purple-dark) !important;
color: var(--hpro-white) !important;
}
body.hpro-whmcs-template .btn-default {
background: var(--hpro-white) !important;
border-color: #d7dce5 !important;
color: var(--hpro-text) !important;
}
body.hpro-whmcs-template .btn-default:hover,
body.hpro-whmcs-template .btn-default:focus {
background: var(--hpro-purple-soft) !important;
border-color: var(--hpro-border-purple) !important;
color: var(--hpro-purple) !important;
}
body.hpro-whmcs-template .label,
body.hpro-whmcs-template .badge {
font-weight: 800 !important;
}
body.hpro-whmcs-template .proxy-help-table td,
body.hpro-whmcs-template .vpn-help-table td,
body.hpro-whmcs-template .alert,
body.hpro-whmcs-template .help-block,
body.hpro-whmcs-template .text-muted,
body.hpro-whmcs-template .form-text {
font-size: 13px !important;
line-height: 1.3 !important;
}
body.hpro-whmcs-template .tiles .tile {
background: var(--hpro-white) !important;
border: 1px solid var(--hpro-border) !important;
border-radius: 12px !important;
box-shadow: 0 8px 18px rgba(31, 41, 55, 0.05) !important;
}
body.hpro-whmcs-template .tiles .tile .stat {
color: var(--hpro-purple) !important;
}
body.hpro-whmcs-template .hpro-footer {
background: var(--hpro-navy) !important;
border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow: none !important;
color: #d1d5db !important;
padding: 28px 0 !important;
}
body.hpro-whmcs-template .hpro-footer .container {
background: transparent !important;
}
body.hpro-whmcs-template .hpro-footer-inner {
align-items: center !important;
display: flex !important;
gap: 18px !important;
justify-content: space-between !important;
}
body.hpro-whmcs-template .hpro-footer-brand {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
}
body.hpro-whmcs-template .hpro-footer-brand strong,
body.hpro-whmcs-template .hpro-footer-links a {
color: var(--hpro-white) !important;
font-weight: 800 !important;
}
body.hpro-whmcs-template .hpro-footer-brand span,
body.hpro-whmcs-template .hpro-footer-copy {
color: #d1d5db !important;
font-size: 13px !important;
}
body.hpro-whmcs-template .hpro-footer-links {
display: flex !important;
flex-wrap: wrap !important;
gap: 14px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.hpro-whmcs-template .hpro-footer-links a:hover {
color: #c4b5fd !important;
}
body.hpro-whmcs-template .hpro-footer-locale {
margin-top: 16px !important;
text-align: center !important;
}
body.hpro-whmcs-template .modal-content {
border: 0 !important;
border-radius: 12px !important;
overflow: hidden !important;
}
body.hpro-whmcs-template .modal-header,
body.hpro-whmcs-template .modal-header.bg-primary {
background: var(--hpro-purple) !important;
border-color: var(--hpro-purple) !important;
color: var(--hpro-white) !important;
}
body.hpro-whmcs-template .modal-header h1,
body.hpro-whmcs-template .modal-header h2,
body.hpro-whmcs-template .modal-header h3,
body.hpro-whmcs-template .modal-header h4,
body.hpro-whmcs-template .modal-header h5 {
color: var(--hpro-white) !important;
}
body.hpro-whmcs-template .modal-body {
color: var(--hpro-text) !important;
}
@media (max-width: 1199.98px) {
body.hpro-whmcs-template .container {
max-width: 96% !important;
width: 96% !important;
}
body.hpro-whmcs-template .navbar-light {
background: var(--hpro-purple) !important;
display: block !important;
height: auto !important;
padding: 8px 0 !important;
}
body.hpro-whmcs-template .navbar-light .btn.nav-link {
background: rgba(255, 255, 255, 0.14) !important;
border-radius: 8px !important;
color: var(--hpro-white) !important;
margin: 0 !important;
}
body.hpro-whmcs-template .hpro-publicbar-inner {
align-items: flex-start !important;
flex-direction: column !important;
gap: 10px !important;
}
body.hpro-whmcs-template .hpro-public-nav {
flex-wrap: wrap !important;
justify-content: flex-start !important;
}
body.hpro-whmcs-template .navbar.main-navbar-wrapper,
body.hpro-whmcs-template .main-navbar-wrapper {
height: auto !important;
min-height: 50px !important;
}
}
@media (max-width: 767.98px) {
body.hpro-whmcs-template .hpro-public-logo {
min-width: 230px !important;
}
body.hpro-whmcs-template .hpro-public-logo img {
max-width: 200px !important;
}
body.hpro-whmcs-template .hpro-footer-inner {
align-items: flex-start !important;
flex-direction: column !important;
}
body.hpro-whmcs-template .table-full-width {
display: block !important;
overflow-x: auto !important;
white-space: nowrap !important;
}
body.hpro-whmcs-template table.table {
display: block !important;
overflow-x: auto !important;
white-space: nowrap !important;
}
}
.btn-return-to-admin {
    color: #5b21b6 !important;
    background: #f3e8ff !important;
    border: 1px solid #7e22ce !important;
}
.btn-return-to-admin span {
    color: #5b21b6 !important;
}
.btn-return-to-admin:hover,
.btn-return-to-admin:focus {
    color: #ffffff !important;
    background: #5b21b6 !important;
    border-color: #5b21b6 !important;
}
.btn-return-to-admin {
    color: #ffffff !important;
    background: #4c00b0 !important;
    border: 1px solid #4c00b0 !important;
}
.btn-return-to-admin span {
    color: #ffffff !important;
}
.btn-return-to-admin:hover,
.btn-return-to-admin:focus {
    color: #ffffff !important;
    background: #2f006e !important;
    border-color: #2f006e !important;
}