/* cmsopen.master header sync — matches homeheaderhtml_withoutslider navbar rules */
#navbar {
  height: 63px;
  border-bottom: 1px solid #000;
  line-height: 60px;
  background: #000;
  width: 100%;
  z-index: 30;
  overflow: visible;
  position: relative;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

#navbar .nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 98%;
  margin: 0 17px;
}

#nav-left {
  height: 56px;
  width: auto;
  border-right: 0;
}

#nav-logo {
  width: auto;
  height: 60px;
  margin-left: 0;
  padding: 0.2rem;
  display: inline-flex;
  align-items: center;
}

#nav-logo a {
  display: block;
  height: 100%;
}

#main-header .logoimage,
#nav-logo a img.logoimage {
  width: auto !important;
  max-width: 183px;
  height: 100% !important;
  object-fit: contain;
}

#nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}

#navbar .hdr-nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  height: 28px;
  padding-right: 14px;
}

#navbar .hdr-nav-actions > .grouplogo-div,
#navbar .hdr-nav-actions > #navuser,
#navbar .hdr-nav-actions > .navuser,
#navbar .hdr-nav-actions > a.hdr-nav-icon-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center;
  float: none !important;
  height: 28px;
  margin: 0;
  padding: 0;
}

#navbar .hdr-nav-icon-img {
  width: 21px !important;
  height: 21px !important;
  max-width: 21px !important;
  max-height: 21px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1);
}

#navbar .hdr-nav-icon-img--add {
  width: 25px !important;
  height: 25px !important;
  max-width: 25px !important;
  max-height: 25px !important;
}

#navbar a.hdr-nav-icon-link .fa-login {
  color: #fff;
  font-size: 21px;
  line-height: 1;
}

#nav-buttons a,
#nav-buttons a:hover,
a#nav-trigger,
a#nav-trigger:hover,
#navbar a.fullnav-toggler {
  color: #fff;
}

#navbar #navuser a#userthumb .avatar,
#navbar .navuser a.hdr-nav-icon-link .avatar,
#navbar .navuser a[id$="userthumb"] .avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50%;
  object-fit: cover;
}

@media only screen and (min-width: 310px) and (max-width: 650px) {
  #nav-logo {
    display: inline-block !important;
    margin-left: 0;
  }
}