.spix-hf-menu-wrap{
  min-height:40px;
  background:#99C336;
  padding:0 12px;
  box-sizing:border-box;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  font-family:"Mukta","Segoe UI",system-ui,sans-serif;
  font-size:13px;
  line-height:40px;
  color:#fff;
  overflow:visible;
  white-space:nowrap;
  flex-wrap:wrap;
}

.spix-hf-hello{
  color:rgba(255,255,255,.90);
  font-weight:500;
  font-size:13px;
  margin-right:4px;
  white-space:nowrap;
}

.spix-hf-nav-inline{
  display:flex;
  align-items:center;
  gap:0;
}

.spix-hf-nav-inline .spix-hf-item{
  position:relative;
  display:flex;
  align-items:center;
}

.spix-hf-nav-inline .spix-hf-link{
  display:flex;
  align-items:center;
  justify-content:center;
  height:40px;
  line-height:40px;
  padding:0 14px;
  border:0;
  background:transparent;
  color:#fff !important;
  text-decoration:none;
  font-weight:500;
  font-size:13px;
  letter-spacing:.1px;
  transition:background .12s ease, color .12s ease;
}

.spix-hf-nav-inline .spix-hf-link:hover,
.spix-hf-nav-inline .spix-hf-link:focus,
.spix-hf-nav-inline .spix-hf-link.active,
.spix-hf-nav-inline .spix-hf-item:hover > .spix-hf-link{
  background:#2CA946;
  color:#fff !important;
  outline:none;
}

.spix-hf-nav-inline .spix-hf-item.has-submenu > .spix-hf-link::after{
  content:"";
  display:inline-block;
  margin-left:8px;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  transform:translateY(1px);
}

.spix-hf-submenu{
  display:none;
  position:absolute;
  left:0;
  top:40px;
  min-width:220px;
  background:#2f2f2f;
  border:0;
  box-shadow:none;
  z-index:99999;
  padding:0;
  margin:0;
}

.spix-hf-submenu a{
  display:block;
  margin:0;
  padding:11px 14px;
  line-height:1.2;
  color:#fff !important;
  text-decoration:none;
  white-space:nowrap;
  background:transparent;
}

.spix-hf-submenu a:hover,
.spix-hf-submenu a:focus,
.spix-hf-submenu a.active{
  background:#2CA946;
  color:#fff !important;
}

.spix-hf-nav-inline .spix-hf-item:hover > .spix-hf-submenu{
  display:block;
}

.spix-hf-sep{
  align-self:center;
  width:1px;
  height:18px;
  margin:0 8px;
  background:rgba(255,255,255,.28);
  border-radius:1px;
  pointer-events:none;
}

.spix-hf-login,
.spix-hf-logout{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  min-height:40px;
  flex-wrap:nowrap;
}

.spix-hf-input{
  height:28px;
  line-height:28px;
  padding:0 8px;
  border-radius:0;
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
  color:#1a1d22;
  font-size:12.5px;
  outline:none;
  box-sizing:border-box;
}

.spix-hf-input.user{
  min-width:120px;
  max-width:145px;
}

.spix-hf-input.pass{
  min-width:110px;
  max-width:135px;
}

.spix-hf-input::placeholder{
  color:#6b7280;
}

.spix-hf-mini-btn,
a.spix-hf-mini-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  height:28px;
  padding:0 10px;
  border-radius:0;
  border:2px solid #23863a;
  background:#2ca946;
  color:#fff !important;
  cursor:pointer;
  font-size:12px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
  white-space:nowrap;
}

.spix-hf-mini-btn:hover,
a.spix-hf-mini-btn:hover{
  background:#27953e;
  border-color:#27953e;
  color:#fff !important;
  text-decoration:none;
}

.spix-hf-error-inline{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  background:#b91c1c;
  color:#fff;
  font-size:12px;
  line-height:1.2;
  white-space:normal;
}

.spix-hf-nav-dropdown{
  display:none;
  position:relative;
  margin-left:6px;
}

.spix-hf-nav-dropdown summary{
  list-style:none;
  cursor:pointer;
  min-width:150px;
  height:34px;
  line-height:34px;
  padding:0 14px;
  border:2px solid #23863a;
  background:#2ca946;
  color:#fff;
  font-size:13px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  transition:background .12s ease, border-color .12s ease;
}

.spix-hf-nav-dropdown summary:hover{
  background:#27953e;
  border-color:#27953e;
}

.spix-hf-nav-dropdown summary::-webkit-details-marker{
  display:none;
}

.spix-hf-nav-panel{
  position:absolute;
  right:0;
  top:40px;
  width:min(300px, calc(100vw - 24px));
  background:#2f2f2f;
  border:0;
  box-shadow:none;
  padding:0;
  margin:0;
  z-index:99999;
  display:flex;
  flex-direction:column;
}

.spix-hf-nav-panel .spix-hf-link{
  display:block;
  min-height:0;
  margin:0;
  padding:11px 14px;
  font-size:14px;
  line-height:1.2;
  color:#fff !important;
  text-decoration:none;
  background:transparent;
}

.spix-hf-nav-panel .spix-hf-link:hover,
.spix-hf-nav-panel .spix-hf-link.active{
  background:#2CA946;
}

.spix-hf-nav-heading{
  display:block;
  margin:0;
  padding:8px 14px 4px;
  font-size:12px;
  line-height:1.2;
  font-weight:700;
  color:rgba(255,255,255,.7);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.spix-hf-sync-frame,
.spix-hf-sync-pixel{
  position:absolute;
  left:-9999px;
  top:-9999px;
  width:1px;
  height:1px;
  border:0;
  opacity:0;
  pointer-events:none;
}

@media (max-width:768px){
  .spix-hf-menu-wrap{
    justify-content:space-between;
    padding:8px 10px;
    line-height:normal;
    gap:8px;
  }

  .spix-hf-nav-inline{
    display:none;
  }

  .spix-hf-nav-dropdown{
    display:block;
  }

  .spix-hf-login{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:6px;
    align-items:center;
  }

  .spix-hf-input.user,
  .spix-hf-input.pass{
    min-width:0;
    max-width:none;
    width:100%;
    height:34px;
    line-height:34px;
    font-size:12px;
  }

  .spix-hf-mini-btn{
    height:34px;
    padding:0 12px;
    font-size:12px;
  }

  .spix-hf-logout{
    min-height:34px;
  }

  .spix-hf-error-inline{
    width:100%;
    margin-top:6px;
    min-height:auto;
    padding:8px 10px;
    grid-column:1 / -1;
  }
}

@media (max-width:520px){
  .spix-hf-menu-wrap{
    justify-content:flex-start;
  }

  .spix-hf-hello{
    width:100%;
    margin-right:0;
    line-height:1.3;
  }

  .spix-hf-login{
    grid-template-columns:1fr;
  }

  .spix-hf-nav-dropdown{
    width:100%;
    margin-left:0;
  }

  .spix-hf-nav-dropdown summary{
    width:100%;
  }

  .spix-hf-nav-panel{
    left:0;
    right:auto;
    width:100%;
  }
}