// :root {
//   --#{$database-prefix}top-header-bg: var(--#{$variable-prefix}chinese-blue);
//   --#{$database-prefix}top-header-tc: #fff;
// }

.bg-user-color {
  background-color: var(--#{$database-prefix}top-header-bg);
  background: var(--#{$database-prefix}top-header-bg);
}

.bg-user-color:hover, .bg-user-color:active, .bg-user-color:focus {
  background-color: var(--#{$database-prefix}top-header-bg);
  background: var(--#{$database-prefix}top-header-bg);
}

.top-header-tc {
  color: var(--#{$database-prefix}top-header-tc);
}

.top-header-tc:hover {
  color: var(--#{$database-prefix}top-header-tc);
}

.top-header-wrapper{
  position: relative;
  z-index: 1040;
  padding: 16px 18px 15px;
  background-color: var(--#{$database-prefix}top-header-bg);
  @media(max-width: 767px) {
    display: none;
  }
  a, button{
    color: var(--#{$database-prefix}top-header-tc) !important;
    &:hover,
    &:focus,
    &:active{
      color: var(--#{$database-prefix}top-header-tc) !important;
    }
  }
  .ui-nav-divider{
    height: 25px;
    opacity: .4;
  }
  .navbar-nav{
    a {
      display: flex;
      padding: 0;
    }
    &.navbar-icons{
      gap: 29px;
    }
  }
}