:root {
  --nobs-bg: #0b0b0c;
  --nobs-panel: #141416;
  --nobs-panel-2: #1c1c20;
  --nobs-text: #f4f4f5;
  --nobs-muted: #b2b2ba;
  --nobs-line: #2a2a31;
  --nobs-accent: #ff4d00;
  --nobs-accent-2: #ffd166;
  --nobs-success: #2ec27e;
  --nobs-danger: #ff6b57;
  --nobs-radius: 18px;
  --nobs-shadow: 0 20px 60px rgba(0,0,0,.35);
  --primary: var(--nobs-accent);
  --primary-hover: #ff7a00;
  --link-color: #ff8d57;
  --heading-color: var(--nobs-text);
  --text-color: var(--nobs-text);
  --text-muted-color: var(--nobs-muted);
  --border-color: rgba(255,255,255,.08);
}

html, body {
  background:
    radial-gradient(circle at top right, rgba(255,77,0,.18), transparent 26%),
    linear-gradient(180deg, #0a0a0b 0%, #111114 100%) !important;
  color: var(--nobs-text);
}

body,
input,
select,
textarea,
button {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: var(--link-color); }
a:hover, a:focus { color: #ffb08a; }

#header,
header.header,
.main-header,
.primary-bg-color,
.navbar-main,
.navbar.navbar-main {
  background: rgba(11,11,12,.82) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: none;
}

.navbar-main .navbar-brand,
.navbar-main .navbar-brand span,
.navbar-main .nav-link,
.navbar-main .dropdown-toggle,
.navbar-main .btn-link,
.top-nav a,
header.header a {
  color: var(--nobs-text) !important;
}

.navbar-main .nav-link:hover,
.navbar-main .nav-link:focus,
.navbar-main .dropdown-item:hover,
.navbar-main .dropdown-item:focus,
.top-nav a:hover {
  color: #fff !important;
}

.navbar-main .dropdown-menu,
.dropdown-menu,
.account .dropdown-menu,
.language-dropdown .dropdown-menu {
  background: #121215;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  box-shadow: var(--nobs-shadow);
}

.dropdown-item,
.dropdown-item-text,
.dropdown-menu a {
  color: var(--nobs-text);
}

.master-breadcrumb,
.breadcrumb,
section#main-body,
.main-content,
#main-body {
  background: transparent !important;
}

.page-header,
section#main-body .page-header {
  margin-bottom: 1.25rem;
  border: 0;
}

.page-title,
.page-header h1,
.page-header .h1,
h1, h2, h3, h4, h5, h6,
.panel-title,
.card-title,
.domain-search-title,
.kb-article-title {
  color: var(--nobs-text) !important;
  letter-spacing: -.02em;
}

.text-muted,
.text-faded,
.text-secondary,
.page-subtitle,
small,
.help-block,
.marketing-text,
.client-home-panels p,
.panel-body,
.card-body,
.list-group-item-text {
  color: var(--nobs-muted) !important;
}

.card,
.panel,
.client-home-panels .panel,
.domain-checker-container,
.logincontainer,
.alert,
.tile,
.stat,
.dataTables_wrapper .dataTables_info,
.table-container,
.ticket-reply,
.knowledgebase-article,
.domain-pricing,
.package-card,
.product,
.box,
.well {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: var(--nobs-radius) !important;
  box-shadow: var(--nobs-shadow);
  color: var(--nobs-text);
}

.client-home-panels .panel,
.card,
.panel,
.tile,
.ticket-reply,
.knowledgebase-article,
.domain-checker-container,
.logincontainer {
  overflow: hidden;
}

.panel-heading,
.card-header,
.tile .tile-heading,
.panel > .panel-heading,
.list-group-item,
.panel-sidebar a.list-group-item {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: var(--nobs-text) !important;
}

.panel-footer,
.card-footer,
.well .btn,
.table-footer {
  background: rgba(255,255,255,.02) !important;
  border-color: rgba(255,255,255,.06) !important;
}

.btn,
button,
input[type="submit"],
input[type="button"] {
  border-radius: 999px !important;
  font-weight: 800;
  transition: .18s ease;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  transform: translateY(-1px);
}

.btn-primary,
.btn-success,
.btn-info,
.primary-bg-color.btn,
button.btn-primary {
  background: linear-gradient(135deg, var(--nobs-accent), #ff7a00) !important;
  border-color: transparent !important;
  color: #111 !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
button.btn-primary:hover {
  filter: brightness(1.04);
}

.btn-default,
.btn-secondary,
.btn-outline,
.btn-link.btn-default {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #fff !important;
}

.alert,
.alert-info,
.alert-success,
.alert-warning,
.alert-danger {
  color: var(--nobs-text) !important;
}

.alert-success { border-left: 4px solid var(--nobs-success) !important; }
.alert-warning { border-left: 4px solid var(--nobs-accent-2) !important; }
.alert-danger { border-left: 4px solid var(--nobs-danger) !important; }
.alert-info { border-left: 4px solid var(--nobs-accent) !important; }

.form-control,
.form-select,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
.input-group-text {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  color: var(--nobs-text) !important;
  box-shadow: none !important;
}

.form-control:focus,
.form-select:focus,
select:focus,
textarea:focus,
input:focus {
  border-color: rgba(255,77,0,.65) !important;
  box-shadow: 0 0 0 .2rem rgba(255,77,0,.16) !important;
}

::placeholder { color: #9e9ea6 !important; opacity: 1; }

.table,
.dataTable,
.table-striped,
.table-list,
#tableServicesList,
#tableDomainsList,
#tableInvoicesList,
#tableTicketsList {
  color: var(--nobs-text) !important;
  border-color: rgba(255,255,255,.06) !important;
}

.table > :not(caption) > * > *,
.dataTable td,
.dataTable th,
.table td,
.table th {
  background: transparent !important;
  border-color: rgba(255,255,255,.06) !important;
}

.table thead th,
.dataTable thead th {
  background: rgba(255,255,255,.03) !important;
  color: #fff !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > *,
.dataTable tbody tr:nth-child(odd) > * {
  background: rgba(255,255,255,.02) !important;
}

.table-hover tbody tr:hover > * {
  background: rgba(255,77,0,.08) !important;
}

.list-group-item,
.list-group-item-action {
  background: rgba(255,255,255,.03) !important;
  color: var(--nobs-text) !important;
  border-color: rgba(255,255,255,.06) !important;
}

.list-group-item.active,
.panel-sidebar a.list-group-item.active,
.list-group-item-action:hover {
  background: rgba(255,77,0,.14) !important;
  color: #fff !important;
  border-color: rgba(255,77,0,.36) !important;
}

.client-home-panels .panel > .panel-heading,
.client-home-panels .panel-heading {
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

.client-home-panels .panel-title,
.client-home-panels .panel-title a {
  color: #fff !important;
  font-weight: 800;
}

.client-home-panels .panel-body .btn,
.client-home-panels .panel-footer .btn {
  margin-top: .4rem;
}

.tile .tile-stat,
.stat .value,
.client-home-panels .panel .count,
.product-status,
.domain-status {
  color: #fff !important;
  font-weight: 900;
}

.label,
.badge,
.status,
.domain-status.status-active,
.product-status.status-active,
.label-success,
.badge-success {
  border-radius: 999px !important;
  padding: .4rem .7rem;
  font-weight: 800;
}

.label-success,
.badge-success,
.status-active {
  background: rgba(46,194,126,.15) !important;
  color: #76efb5 !important;
}

.label-warning,
.badge-warning,
.status-pending {
  background: rgba(255,209,102,.16) !important;
  color: #ffe28d !important;
}

.label-danger,
.badge-danger,
.status-cancelled,
.status-terminated {
  background: rgba(255,107,87,.18) !important;
  color: #ffb1a3 !important;
}

.pagination > li > a,
.pagination > li > span,
.page-item .page-link {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: var(--nobs-text) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.page-item.active .page-link {
  background: var(--nobs-accent) !important;
  border-color: var(--nobs-accent) !important;
  color: #111 !important;
}

.domain-checker-bg,
.domain-search-container,
.domain-search-form-container,
.landing-page,
.marketconnect-banner,
.search-box {
  background: linear-gradient(135deg, rgba(255,77,0,.14), rgba(255,209,102,.08)) !important;
  border-radius: var(--nobs-radius);
  border: 1px solid rgba(255,255,255,.08);
}

.domain-search-form .btn,
.domain-checker-container .btn,
.landing-page .btn {
  min-height: 46px;
}

.logincontainer .login-form,
.logincontainer .social-signin-btns,
.password-strength-meter,
.announcements .announcement-single {
  color: var(--nobs-text);
}

.kb-rate-article,
.view-ticket-toolbar,
.invoice-summary,
.credit-balance,
.balance-box,
.mass-pay-box {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 16px !important;
}

.footer,
footer.footer,
section#footer,
#footer {
  background: transparent !important;
  border-top: 1px solid rgba(255,255,255,.08);
  color: var(--nobs-muted) !important;
}

.footer a,
#footer a,
footer a {
  color: var(--nobs-muted) !important;
}

.footer a:hover,
#footer a:hover,
footer a:hover {
  color: #fff !important;
}

.panel-sidebar,
.sidebar {
  gap: 1rem;
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
  border-radius: 999px;
  border: 3px solid #111114;
}
::-webkit-scrollbar-track { background: #111114; }

@media (max-width: 991px) {
  .navbar-main .navbar-collapse,
  .navbar-main .dropdown-menu {
    background: #121215 !important;
  }

  .card,
  .panel,
  .client-home-panels .panel,
  .domain-checker-container {
    border-radius: 16px !important;
  }
}