.navMenuFrame {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: fixed;
  width: 100%;
  border: 0;
  background-color: var(--menubar_bg-color);
  z-index: 8; }
  .navMenuFrame li:not(.navMenuDrop) {
    float: left; }
  .navMenuFrame > li > a {
    font-size: 15px; }
  .navMenuFrame li > a {
    display: block;
    text-align: center;
    text-decoration: none;
    padding-top: 9px;
    padding-bottom: 9px;
    color: var(--menubar_color1);
    font-weight: 400; }

.navMenuFrame:not(.guestmode) li a:not(#navMenuLogo) {
  transition: border-color 0.4s;
  border-color: transparent;
  padding-left: 16px;
  padding-right: 16px;
  font-family: Assistant, sans-serif; }
@media only screen and (max-width: 860px) {
  .navMenuFrame:not(.guestmode) li a:not(#navMenuLogo) {
    padding-left: 10px;
    padding-right: 10px; } }
.navMenuFrame:not(.guestmode) li a:not(#navMenuLogo):hover {
  border-bottom: 2px solid var(--menubar_border-color_hover1); }

.navMenuFrame.guestmode li.guestmode-button > a {
  transition: background-color 0.2s, color 0.2s;
  margin-top: 6px;
  padding: 7px 35px;
  cursor: pointer;
  border-radius: 16px;
  border-bottom: 0;
  font-weight: 600;
  box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.1);
  background-color: #fbfbfb;
  color: black; }
  .navMenuFrame.guestmode li.guestmode-button > a:hover {
    background-color: var(--appColor_purple1);
    color: white; }

.navMenuDrop {
  float: right;
  margin-right: 4px;
  transform: translate3d(0, 0, 0); }

#navMenuUserName {
  padding-left: 27px; }
@media only screen and (max-width: 860px) {
  #navMenuUserName {
    padding-left: 17px;
    padding-right: 7px !important; } }
#navMenuUserName svg {
  height: 11px;
  width: 11px;
  fill: var(--menubar_fill-color_dropdown-svg1); }

.navMenuDropFrame {
  display: none;
  position: fixed;
  top: 40px;
  right: 0px;
  width: 205px;
  text-align: right;
  border-radius: 2px;
  padding-top: 8px;
  padding-bottom: 40px;
  background-color: rgba(0, 0, 0, 0.88);
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  animation-name: animateMenu;
  animation-duration: 0.3s; }
  .navMenuDropFrame a {
    display: block;
    font-size: 16px;
    float: none;
    color: white;
    padding: 12px 28px;
    text-decoration: none;
    text-align: left;
    cursor: pointer; }
    .navMenuDropFrame a:hover {
      font-weight: 600;
      background-color: white;
      color: black; }

.navMenuDrop:hover .navMenuDropFrame, .navMenuDrop:focus .navMenuDropFrame {
  display: list-item; }

#navMenuLogo {
  transition: all 0.2s;
  padding-left: 40px;
  padding-right: 40px;
  cursor: pointer;
  font-family: Assistant, sans-serif;
  font-size: 15px;
  font-weight: 700; }
@media only screen and (max-width: 860px) {
  #navMenuLogo {
    padding-left: 12px;
    padding-right: 13px; } }
#navMenuLogo span {
  padding: 0;
  transition: all 0.2s; }
  #navMenuLogo:hover span {
    border-bottom: 2px solid var(--menubar_border-color_hover1); }
  @media only screen and (min-width: 861px) {
    #navMenuLogo:hover {
      padding-left: 31px;
      padding-right: 31px; }
      #navMenuLogo:hover span {
        padding: 0 9;
        padding-bottom: 3; } }

body.no-scroll .navMenuFrame, .navMenuFrame.scrolling-toward-bottom {
  background-color: var(--menubar_bg-color_scrollingTowardBottom); }