:root {
  --primary-color: #144a77;
  --secondary-color: #123958;
  --background-color: #8ba09162;
  /* TOPBAR */
  --topbar-background: #144a77;
  --sidebar-background: #264258;
  /* FONDO MENU OPCIONES */
  --navbar-background: #25313b;
  --text-color-light: rgba(255, 255, 255, 0.8);
  --text-color-dark: #155f9b;
  --box-shadow-light: inset 0px -2px 2px rgba(0, 0, 0, 0.16),
    inset 0px 2px 2px rgba(0, 0, 0, 0.18);
}

.topbar {
  background: var(--topbar-background);
}

.topbar .top-navbar .navbar-header .navbar-brand .dark-logo {
  display: none;
}

.topbar .top-navbar .navbar-header .navbar-brand .light-logo {
  display: inline-block;
  color: var(--text-color-light);
}

.topbar .navbar-nav .nav-item > a.nav-link {
  color: var(--text-color-light);
}

.topbar .navbar-nav .nav-item > a.nav-link:hover,
.topbar .navbar-nav .nav-item > a.nav-link:focus {
  color: #ffffff !important;
}

.topbar .top-navbar .navbar-nav > .nav-item > span {
  color: #ffffff;
}

.topbar .navbar-header {
  background: var(--topbar-background);
}

.logo-center .topbar .navbar-header {
  background: transparent;
  box-shadow: none;
}

.logo-center .topbar .top-navbar .navbar-header .navbar-brand .light-logo {
  display: inline-block;
  color: var(--text-color-light);
}

a {
  color: var(--primary-color);
}

a.link:hover,
a.link:focus {
  color: var(--primary-color) !important;
}

.bg-theme {
  background-color: var(--primary-color) !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.right-sidebar .rpanel-title {
  background: var(--primary-color);
}

.stylish-table tbody tr:hover,
.stylish-table tbody tr.active {
  border-left: 4px solid var(--primary-color);
}

.text-themecolor {
  color: var(--primary-color) !important;
}

.profile-tab li a.nav-link.active,
.customtab li a.nav-link.active {
  border-bottom: 2px solid var(--primary-color);
  color: var(--primary-color);
}

.profile-tab li a.nav-link:hover,
.customtab li a.nav-link:hover {
  color: var(--primary-color);
}

.btn-themecolor,
.btn-themecolor.disabled {
  background: var(--primary-color);
  color: #ffffff;
  border: 1px solid var(--primary-color);
}

.btn-themecolor:hover,
.btn-themecolor.disabled:hover {
  background: var(--primary-color);
  opacity: 0.7;
  border: 1px solid var(--primary-color);
}

.btn-themecolor.active,
.btn-themecolor:focus,
.btn-themecolor.disabled.active,
.btn-themecolor.disabled:focus {
  background: var(--secondary-color);
}

.ng-select.ng-select-focused:not(.ng-select-opened) > .ng-select-container {
  border-color: var(--secondary-color) !important;
}

.card-no-border .left-sidebar,
.card-no-border .sidebar-nav {
  background: var(--navbar-background);
}

.mini-sidebar .sidebar-nav {
  background: transparent;
}

@media (min-width: 768px) {
  .mini-sidebar .sidebar-nav #sidebarnav > li > ul {
    background: #1c2128;
  }
}

.user-profile .profile-text a {
  color: var(--text-color-dark) !important;
}

.card-no-border .sidebar-footer {
  background: #1c2128;
}

.label-themecolor {
  background: var(--primary-color);
}

.sidebar-nav > ul > li.user-profile > a {
  /* background-color: #34384d;
  box-shadow: var(--box-shadow-light); */
  border-bottom: 1px solid rgba(120, 130, 140, 0.13);
  padding-bottom: 1rem;
  padding-top: 1rem;
  margin-bottom: 1rem;
  color: white;
}

.sidebar-nav > ul > li.user-profile > a,
.sidebar-nav > ul > li.user-profile > a i {
  color: #ffffff;
}

.sidebar-nav > ul > li.active > a {
  color: white;
  background-color: var(--background-color);
  border-color: var(--primary-color);
}

.sidebar-nav > ul > li.active > a i {
  color: white;
}

.sidebar-nav ul li a.active {
  color: white;
  background-color: var(--background-color);
}

.sidebar-nav ul li a:hover {
  color: white;
}

.sidebar-nav ul li a.active i,
.sidebar-nav ul li a:hover i {
  color: white;
}

.sidebar-nav ul li.nav-small-cap {
  color: white;
}

@media (min-width: 768px) {
  .mini-sidebar .sidebar-nav #sidebarnav > li:hover > a {
    background: #1c2128;
  }
}