@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --d9-font: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --d9-bg: #070a14;
  --d9-card: rgba(15, 23, 42, 0.75);
  --d9-border: rgba(255, 255, 255, 0.08);
  --d9-cyan: #00f2fe;
  --d9-purple: #7000ff;
  --d9-green: #10b981;
  --d9-amber: #f59e0b;
  --d9-rose: #f43f5e;
  --d9-text: #f8fafc;
  --d9-text-muted: #94a3b8;
  --d9-gradient-primary: linear-gradient(135deg, #00f2fe 0%, #7000ff 100%);
  --d9-gradient-text: linear-gradient(135deg, #ffffff 20%, #38bdf8 70%, #c084fc 100%);
}

* { box-sizing: border-box; }

/* FIX BROWSER AUTOFILL LIGHT BLUE OVERLAY (SCREENSHOT 2) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #0f172a inset !important;
  -webkit-text-fill-color: #f8fafc !important;
  caret-color: #f8fafc !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

body.member-dashboard, body.admin-dashboard, body.hold-transition {
  font-family: var(--d9-font) !important;
  background-color: var(--d9-bg) !important;
  color: var(--d9-text) !important;
}
.wrapper { background-color: var(--d9-bg) !important; }

.content-wrapper, .right-side {
  background-color: var(--d9-bg) !important;
  background-image: 
    radial-gradient(circle at 10% 15%, rgba(112, 0, 255, 0.09) 0%, transparent 40%),
    radial-gradient(circle at 90% 45%, rgba(0, 242, 254, 0.07) 0%, transparent 45%) !important;
  background-attachment: fixed !important;
  color: var(--d9-text) !important;
}

.content-header { padding: 18px 20px 10px 20px !important; }
.content-header > h1 {
  font-family: var(--d9-font) !important;
  font-weight: 800 !important;
  font-size: 24px !important;
  color: #ffffff !important;
}

/* MAIN HEADER */
.main-header {
  background: rgba(7, 11, 22, 0.95) !important;
  backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid var(--d9-border) !important;
}
.main-header .navbar { background: transparent !important; }
.main-header .logo, .skin-blue .main-header .logo {
  background: transparent !important;
  border-right: 1px solid var(--d9-border) !important;
  font-family: var(--d9-font) !important;
  font-weight: 800 !important;
  background: var(--d9-gradient-text) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 22px !important;
}
.main-header .logo::before {
  content: '⚡';
  font-size: 20px;
  -webkit-text-fill-color: initial;
  filter: drop-shadow(0 0 8px #00f2fe);
}

.main-header .sidebar-toggle, .skin-blue .main-header .navbar .sidebar-toggle {
  color: #cbd5e1 !important;
  background: transparent !important;
}

/* NAVBAR BADGES (NO EMOJIS, NO BAGS) */
.navbar-custom-menu .messages-menu > a {
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  border-radius: 50px !important;
  color: #34d399 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 5px 14px !important;
  margin-top: 10px !important;
  margin-right: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  text-decoration: none !important;
}
.navbar-custom-menu .messages-menu > a::before {
  display: none !important;
  content: "" !important;
}

/* USER MENU */
.main-header .navbar .nav > li > a > .user-image {
  border: 2px solid var(--d9-cyan) !important;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.4) !important;
}
.main-header .navbar .nav > li > a { color: #cbd5e1 !important; font-weight: 600; }
.navbar-nav > .user-menu > .dropdown-menu {
  background: rgba(13, 19, 36, 0.98) !important;
  border: 1px solid var(--d9-border) !important;
  border-radius: 16px !important;
  overflow: hidden;
}

/* SIDEBAR */
.main-sidebar, .left-side, .skin-blue .main-sidebar {
  background: rgba(9, 14, 27, 0.98) !important;
  border-right: 1px solid var(--d9-border) !important;
}
.sidebar-menu > li.header, .skin-blue .sidebar-menu > li.header {
  color: #64748b !important;
  background: transparent !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 14px 20px 6px 20px !important;
}
.sidebar-menu > li > a, .skin-blue .sidebar-menu > li > a {
  color: #cbd5e1 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  margin: 4px 12px !important;
  transition: all 0.2s ease !important;
  border-left: none !important;
}
.sidebar-menu > li:hover > a, .skin-blue .sidebar-menu > li:hover > a {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--d9-cyan) !important;
  transform: translateX(3px);
}
.sidebar-menu > li.active > a, .skin-blue .sidebar-menu > li.active > a {
  background: var(--d9-gradient-primary) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 20px rgba(0, 242, 254, 0.35) !important;
  border-left: none !important;
}

/* =========================================================================
   MODERN SAAS METRICS GRID (REPLACES 4 BULKY CUBES!)
   ========================================================================= */
.l9-metrics-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 25px;
}

.l9-metric-item {
  background: rgba(15, 23, 42, 0.75) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  padding: 16px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  transition: all 0.25s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
.l9-metric-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  opacity: 0.8;
}
.l9-metric-views::before { background: linear-gradient(90deg, #f59e0b, transparent); }
.l9-metric-earnings::before { background: linear-gradient(90deg, #00f2fe, transparent); }
.l9-metric-referral::before { background: linear-gradient(90deg, #10b981, transparent); }
.l9-metric-cpm::before { background: linear-gradient(90deg, #a855f7, transparent); }

.l9-metric-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45) !important;
  background: rgba(22, 33, 60, 0.85) !important;
  border-color: rgba(0, 242, 254, 0.3) !important;
}

.l9-metric-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.l9-metric-views .l9-metric-icon {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.l9-metric-earnings .l9-metric-icon {
  background: rgba(0, 242, 254, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(0, 242, 254, 0.3);
}
.l9-metric-referral .l9-metric-icon {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.l9-metric-cpm .l9-metric-icon {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.l9-metric-info {
  flex: 1;
  min-width: 0;
}
.l9-metric-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #94a3b8;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.l9-metric-value {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.l9-metric-views .l9-metric-value { color: #fbbf24; }
.l9-metric-earnings .l9-metric-value { color: #38bdf8; }
.l9-metric-referral .l9-metric-value { color: #34d399; }
.l9-metric-cpm .l9-metric-value { color: #c084fc; }

/* MONTH SELECTOR STYLING */
.content select.form-control, #month {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 50px !important;
  color: #f8fafc !important;
  font-weight: 600 !important;
  padding: 8px 24px !important;
  height: 44px !important;
  margin-bottom: 20px !important;
  text-align: center !important;
}

/* FIX WHITE COPY ICON BOX */
.input-group-addon {
  background-color: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: var(--d9-cyan) !important;
}
.input-group-addon.copy-it {
  background-color: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(0, 242, 254, 0.35) !important;
  border-left: none !important;
  color: var(--d9-cyan) !important;
  cursor: pointer !important;
}
.input-group-addon.copy-it:hover {
  background-color: rgba(0, 242, 254, 0.25) !important;
  color: #ffffff !important;
}
.input-group-addon.copy-it i { color: inherit !important; }

/* BOX / CARDS */
.box {
  background: var(--d9-card) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid var(--d9-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  margin-bottom: 25px !important;
}
.box-header {
  border-bottom: 1px solid var(--d9-border) !important;
  padding: 16px 20px !important;
  color: #ffffff !important;
}
.box-header .box-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}
.box-body { padding: 20px !important; color: #cbd5e1 !important; }

/* CAMPAIGN CARD PROGRESS WIDGETS */
.l9-camp-card {
  background: rgba(15, 23, 42, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
}

/* TABLES */
.table { color: #cbd5e1 !important; }
.table > thead > tr > th {
  background: rgba(255, 255, 255, 0.03) !important;
  border-bottom: 1px solid var(--d9-border) !important;
  color: #94a3b8 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.table > tbody > tr > td {
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: 12px 16px !important;
}

/* FORM INPUTS */
.form-control {
  background: rgba(10, 15, 29, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
}
.form-control:focus {
  border-color: var(--d9-cyan) !important;
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.3) !important;
}

/* BUTTONS */
.btn-primary {
  background: var(--d9-gradient-primary) !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 18px rgba(0, 242, 254, 0.35) !important;
}

/* AUTH PAGES (SCREENSHOT 2) */
body.login-page {
  background-color: #060913 !important;
  background-image: 
    radial-gradient(circle at 50% 25%, rgba(112, 0, 255, 0.22) 0%, transparent 50%),
    radial-gradient(circle at 20% 70%, rgba(0, 242, 254, 0.15) 0%, transparent 45%) !important;
  background-attachment: fixed !important;
}
.login-box { width: 420px !important; margin: 6% auto !important; }
@media (max-width: 480px) {
  .login-box { width: 92% !important; margin: 10% auto !important; }
}
.login-logo a {
  font-family: var(--d9-font);
  font-weight: 800;
  font-size: 32px;
  background: var(--d9-gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.login-logo a::before {
  content: '⚡';
  font-size: 26px;
  -webkit-text-fill-color: initial;
  filter: drop-shadow(0 0 10px #00f2fe);
}
.login-box-body {
  background: rgba(15, 23, 42, 0.88) !important;
  backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(0, 242, 254, 0.3) !important;
  border-radius: 22px !important;
  padding: 35px 28px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 50px rgba(0, 242, 254, 0.12) !important;
  color: #cbd5e1 !important;
}
.login-box-body .form-control {
  background: #0e172a !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  height: 48px !important;
  padding: 12px 18px !important;
}
.login-box-body .form-control:focus {
  border-color: #00f2fe !important;
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.35) !important;
}
.login-box-body button.btn-primary {
  height: 48px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
}

/* RESPONSIVE METRICS FOR MOBILE & TABLET */
@media (max-width: 991px) {
  .l9-metrics-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
@media (max-width: 600px) {
  .l9-metrics-container {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .l9-metric-item {
    padding: 14px 16px !important;
  }
  .l9-metric-value {
    font-size: 19px !important;
  }
}
@media (max-width: 767px) {
  .main-header .navbar-custom-menu { float: right; }
  .navbar-custom-menu .navbar-nav > li { float: left; }
  .navbar-custom-menu .messages-menu > a {
    padding: 4px 10px !important;
    font-size: 12px !important;
    margin-top: 12px !important;
    margin-right: 6px !important;
  }
}
/* CLEAN NAVBAR PILLS (NO BAGS, NO MESSAGES-MENU OVERRIDE) */
.l9-admin-link {
  background: rgba(0, 242, 254, 0.08) !important;
  border: 1px solid rgba(0, 242, 254, 0.3) !important;
  border-radius: 50px !important;
  color: #38bdf8 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 6px 16px !important;
  margin-top: 10px !important;
  margin-right: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
.l9-admin-link:hover {
  background: rgba(0, 242, 254, 0.18) !important;
  color: #ffffff !important;
}

.l9-balance-link {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(0, 242, 254, 0.1)) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  border-radius: 50px !important;
  color: #34d399 !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 6px 16px !important;
  margin-top: 10px !important;
  margin-right: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
.l9-balance-link:hover {
  background: rgba(16, 185, 129, 0.28) !important;
  color: #ffffff !important;
}

/* Force hide any old messages-menu money bags */
.navbar-custom-menu .messages-menu > a::before,
.l9-admin-link::before,
.l9-balance-link::before {
  display: none !important;
  content: "" !important;
}

/* COOKIE CONSENT BANNER MODERN GLASS STYLING */
.cc-window.cc-banner {
  background: rgba(10, 16, 32, 0.96) !important;
  border-top: 1px solid rgba(0, 242, 254, 0.3) !important;
  backdrop-filter: blur(20px) !important;
  color: #cbd5e1 !important;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5) !important;
}
.cc-window.cc-banner .cc-btn {
  background: linear-gradient(135deg, #00f2fe 0%, #7000ff 100%) !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  border: none !important;
  padding: 8px 24px !important;
  box-shadow: 0 4px 15px rgba(0, 242, 254, 0.35) !important;
}
.cc-window.cc-banner a {
  color: #00f2fe !important;
  text-decoration: underline !important;
}

/* =========================================================================
   CRITICAL FIX: REMOVE WHITE BACKGROUND ON STRIPED/HOVER TABLES (SCREENSHOT 1)
   ========================================================================= */
.table,
.table-striped,
.table-hover {
  background-color: transparent !important;
  color: #cbd5e1 !important;
}

.table-striped > tbody > tr,
.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(even),
.table > tbody > tr,
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
  background-color: transparent !important;
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-bottom: none !important;
  color: #cbd5e1 !important;
}

.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: rgba(255, 255, 255, 0.025) !important;
  color: #f8fafc !important;
}

.table-striped > tbody > tr:nth-of-type(even),
.table-striped > tbody > tr:nth-of-type(even) > td {
  background-color: transparent !important;
  color: #cbd5e1 !important;
}

.table-hover > tbody > tr:hover,
.table-hover > tbody > tr:hover > td,
.table > tbody > tr:hover,
.table > tbody > tr:hover > td {
  background-color: rgba(0, 242, 254, 0.08) !important;
  color: #ffffff !important;
}

.table > thead > tr > th {
  background-color: rgba(15, 23, 42, 0.9) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.8px !important;
  padding: 12px 14px !important;
}

/* =========================================================================
   CRITICAL FIX: REMOVE GREY BREADCRUMB BOX ON MOBILE (SCREENSHOT 2)
   ========================================================================= */
.content-header > .breadcrumb,
.breadcrumb {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
@media (max-width: 767px) {
  .content-header > .breadcrumb,
  .breadcrumb {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 4px 0 !important;
    position: relative !important;
    float: none !important;
  }
}
.content-header > .breadcrumb > li,
.content-header > .breadcrumb > li > a {
  color: #94a3b8 !important;
  font-weight: 500 !important;
}
.content-header > .breadcrumb > li.active {
  color: #cbd5e1 !important;
}
.content-header > .breadcrumb > li + li:before {
  color: #64748b !important;
}

/* =========================================================================
   ADMIN METRICS STYLING (.l9-metric-owner, .l9-metric-publisher)
   ========================================================================= */
.l9-metric-owner::before { background: linear-gradient(90deg, #00f2fe, transparent) !important; }
.l9-metric-publisher::before { background: linear-gradient(90deg, #10b981, transparent) !important; }

.l9-metric-owner .l9-metric-icon {
  background: rgba(0, 242, 254, 0.15) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(0, 242, 254, 0.3) !important;
}
.l9-metric-publisher .l9-metric-icon {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.l9-metric-owner .l9-metric-value { color: #38bdf8 !important; }
.l9-metric-publisher .l9-metric-value { color: #34d399 !important; }

/* MONTH FILTER PILL */
.content .text-center select.form-control,
.content select#month {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 50px !important;
  color: #f8fafc !important;
  font-weight: 600 !important;
  padding: 8px 24px !important;
  height: 44px !important;
  margin-bottom: 22px !important;
  text-align: center !important;
  display: inline-block !important;
  max-width: 320px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}
.content select#month:focus {
  border-color: #00f2fe !important;
  box-shadow: 0 0 15px rgba(0, 242, 254, 0.3) !important;
}


/* =========================================================================
   COMPREHENSIVE FIX: ELIMINATE ALL WHITE BACKGROUNDS IN TABLES (MOBILE & DESKTOP)
   ========================================================================= */
table.l9-stat-table,
.table-striped,
.table-hover,
.table,
.box-body table {
  background: transparent !important;
  background-color: transparent !important;
  color: #cbd5e1 !important;
  border-collapse: separate !important;
}

table.l9-stat-table tr,
table.l9-stat-table td,
table.l9-stat-table th,
.table-striped > tbody > tr,
.table-striped > tbody > tr > td,
.table-striped > tbody > tr > th,
.table > tbody > tr > td,
.table > tbody > tr > th,
.box-body .table > tbody > tr > td,
.box-body .table-striped > tbody > tr > td {
  background: transparent !important;
  background-color: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  color: #cbd5e1 !important;
  padding: 10px 12px !important;
}

/* ODD ROWS (Subtle elegant dark tint, NOT pure white) */
table.l9-stat-table > tbody > tr:nth-of-type(odd),
table.l9-stat-table > tbody > tr:nth-of-type(odd) > td,
table.l9-stat-table > tbody > tr:nth-child(odd),
table.l9-stat-table > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd),
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th,
.table-striped > tbody > tr:nth-child(odd),
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th,
.box-body .table-striped > tbody > tr:nth-of-type(odd),
.box-body .table-striped > tbody > tr:nth-of-type(odd) > td {
  background: rgba(255, 255, 255, 0.025) !important;
  background-color: rgba(255, 255, 255, 0.025) !important;
  color: #f1f5f9 !important;
}

/* EVEN ROWS */
table.l9-stat-table > tbody > tr:nth-of-type(even),
table.l9-stat-table > tbody > tr:nth-of-type(even) > td,
table.l9-stat-table > tbody > tr:nth-child(even),
table.l9-stat-table > tbody > tr:nth-child(even) > td,
.table-striped > tbody > tr:nth-of-type(even),
.table-striped > tbody > tr:nth-of-type(even) > td,
.table-striped > tbody > tr:nth-of-type(even) > th,
.table-striped > tbody > tr:nth-child(even),
.table-striped > tbody > tr:nth-child(even) > td,
.table-striped > tbody > tr:nth-child(even) > th,
.box-body .table-striped > tbody > tr:nth-of-type(even),
.box-body .table-striped > tbody > tr:nth-of-type(even) > td {
  background: transparent !important;
  background-color: transparent !important;
  color: #cbd5e1 !important;
}

/* HOVER ROW */
table.l9-stat-table > tbody > tr:hover,
table.l9-stat-table > tbody > tr:hover > td,
.table-hover > tbody > tr:hover,
.table-hover > tbody > tr:hover > td,
.table > tbody > tr:hover,
.table > tbody > tr:hover > td {
  background: rgba(0, 242, 254, 0.08) !important;
  background-color: rgba(0, 242, 254, 0.08) !important;
  color: #38bdf8 !important;
}

/* TABLE HEADERS */
table.l9-stat-table > thead > tr > th,
.table > thead > tr > th,
.table-striped > thead > tr > th {
  background: #0f172a !important;
  background-color: #0f172a !important;
  color: #94a3b8 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  border-bottom: 2px solid rgba(0, 242, 254, 0.25) !important;
  padding: 12px 14px !important;
  white-space: nowrap !important;
}

/* BREADCRUMB MOBILE FIX */
@media (max-width: 767px) {
  .content-header > .breadcrumb,
  .content-header > .breadcrumb > li,
  .breadcrumb,
  body .content-header > .breadcrumb,
  body .breadcrumb {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 4px 0 !important;
    margin-top: 4px !important;
  }
}