:root {
  --urf-bg: #0b1220;
  --urf-panel: #131c2e;
  --urf-panel-2: #182338;
  --urf-border: #2a3854;
  --urf-text: #e6edf7;
  --urf-muted: #9fb0cc;
  --urf-accent: #4da3ff;
  --urf-accent-2: #7cc4ff;
  --urf-hover: #1d2a42;
  --urf-success: #1f6f54;
  --urf-warning: #8a5a16;
  --urf-shadow: 0 10px 30px rgba(0,0,0,.28);
}

html, body {
  background: linear-gradient(180deg, #0b1220 0%, #10192b 100%) !important;
  color: var(--urf-text) !important;
  font-family: Inter, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

body {
  padding-top: 56px;
  margin-bottom: 70px;
}

.navbar-inverse,
.navbar-fixed-top {
  background: rgba(8, 14, 24, 0.96) !important;
  border-bottom: 1px solid var(--urf-border) !important;
  box-shadow: var(--urf-shadow);
}

.navbar-brand {
  color: #fff !important;
  font-weight: 700;
  letter-spacing: .3px;
}

.navbar-info,
.navbar-inverse .navbar-nav > li > a {
  color: var(--urf-muted) !important;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
  color: #fff !important;
}

.sidebar {
  background: linear-gradient(180deg, #0f1727 0%, #121b2d 100%) !important;
  border-right: 1px solid var(--urf-border) !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.02);
}

.nav-sidebar {
  margin-top: 8px;
  padding-right: 10px;
}

.nav-sidebar > li {
  margin-bottom: 6px;
}

.nav-sidebar > li > a {
  color: var(--urf-text) !important;
  border-radius: 10px;
  margin-right: 10px;
  transition: all .18s ease;
  font-weight: 500;
}

.nav-sidebar > li > a:hover,
.nav-sidebar > li > a:focus {
  background: var(--urf-hover) !important;
  color: #fff !important;
}

.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
  color: #fff !important;
  background: linear-gradient(135deg, #245ea8 0%, #3278d6 100%) !important;
  box-shadow: 0 4px 14px rgba(50,120,214,.35);
}

.main,
.container-fluid,
.row,
.page-header,
.panel,
.well {
  background: transparent !important;
  color: var(--urf-text) !important;
}

.main {
  padding-top: 28px;
}

h1, h2, h3, h4, h5, h6 {
  color: #fff !important;
  font-weight: 700;
}

.page-header,
.sub-header {
  border-bottom: 1px solid var(--urf-border) !important;
  margin-bottom: 20px;
}

table,
.table,
.table-striped,
.table-bordered,
.table-hover {
  background: var(--urf-panel) !important;
  color: var(--urf-text) !important;
  border: 1px solid var(--urf-border) !important;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--urf-shadow);
}

.table > thead > tr > th {
  background: linear-gradient(180deg, #17233a 0%, #131e31 100%) !important;
  color: #fff !important;
  border-color: var(--urf-border) !important;
  font-weight: 700;
  letter-spacing: .2px;
}

.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  border-color: var(--urf-border) !important;
  color: var(--urf-text) !important;
  background-color: var(--urf-panel) !important;
  vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
  background-color: var(--urf-panel-2) !important;
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color: #1f2c44 !important;
}

.table a,
.table a:visited,
a,
a:visited {
  color: var(--urf-accent-2) !important;
}

a:hover {
  color: #fff !important;
}

.footer {
  background: rgba(10, 15, 24, 0.96) !important;
  border-top: 1px solid var(--urf-border) !important;
  color: var(--urf-muted) !important;
}

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

img.table-flag,
img.table-status {
  border-radius: 4px;
}

.tip:hover span {
  background: #05080f !important;
  color: #fff !important;
  border: 1px solid var(--urf-border) !important;
  box-shadow: var(--urf-shadow);
}

@media (max-width: 767px) {
  .main {
    padding-left: 16px;
    padding-right: 16px;
  }
}