.Header {
  background-color: #fff;
  height: 65px;
  z-index: 9;

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.HeaderContainer {
  max-width: 1400px;
  margin: auto;
  padding: 0 60px;
  height: 100%;

  display: flex;
  /* align-items: stretch; */
  /* justify-content: space-between; */
}

.AppBrand {
  height: 100%;

  display: flex;
  align-items: center;
}

.AppBrand img {
  height: 100%;
}

.Navbar {
  list-style: none;

  display: flex;
  align-items: stretch;
  gap: 16px;
}

.NavbarItem {
  display: flex;
  align-items: center;
}

.NavbarLink:link,
.NavbarLink:visited {
  color: #000;
  padding: 7px;
  border-radius: 6px;
  z-index: 99;

  display: flex;
  align-items: center;
  gap: 6px;
}

.NavbarLinkActive,
.NavbarLink:hover,
.NavbarLink:active {
  background-color: rgba(255, 255, 255, 0.06);
}

.NavbarItemHasSubMenu {
  position: relative;
}

.NavbarSubmenu {
  position: absolute;
  right: 0;
  top: 0;
  padding-top: 80px;

  width: 200px;

  display: none;
}

.NavbarSubmenuMenu {
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(119, 119, 119, 0.4);
}

.NavbarSubmenuLink ion-icon {
  display: block;
  width: 16px;
  height: 16px;
}

.NavbarSubmenuLink:link,
.NavbarSubmenuLink:visited {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 12px;
  color: #333333;
  background-color: #fff;
  font-weight: 500;
  border-left: 3px solid transparent;
}

.NavbarSubmenuLinkActive:link,
.NavbarSubmenuLinkActive:visited,
.NavbarSubmenuLink:hover,
.NavbarSubmenuLink:active {
  background-color: #f3f8ee;
  color: #659837;
  border-left: 3px solid #659837;
}

.NavbarItemHasSubMenu:hover .NavbarSubmenu {
  display: block;
}

.NavbarWalletBtns {
  /* margin-left: 48px; */

  display: flex;
  align-items: center;
  /* gap: 12px; */
}

.NavbarWalletBtn {
  display: inline-block;
  /* padding: 8px 16px; */
  border-radius: 6px;
}

.NavbarWalletBtn:first-child {
  color: #000;
}

.NavbarWalletBtn:nth-child(2) {
  background-color: #eeeeee;
  color: #000;
}

.NavbarWalletBtn:last-child {
  border: 1px solid #ffffff;
  background-color: transparent;
  color: #000;
}

.NavbarBtn {
  display: flex;
  align-items: center;
  display: none;
}

.NavbarBtn ion-icon {
  display: block;
  color: #fff;
  width: 28px;
  height: 28px;
}

.NavbarBtn ion-icon:first-child {
  display: block;
}

.NavbarBtn ion-icon:last-child {
  display: none;
}

.NavbarOpen .NavbarBtn ion-icon:first-child {
  display: none;
}

.NavbarOpen .NavbarBtn ion-icon:last-child {
  display: block;
}

.NavGrp{
  display: flex;
  padding: 1rem;
}

.NavGrp .NavbarWalletBtn{
  padding: 6px;
  display: flex;
  gap: .3rem;
  align-items: center;
}
.NavGrp .NavbarItem:first-child{
  border-right: 2px solid black;
}

@media (max-width: 1200px) {
  .NavbarBtn {
    display: flex;
  }

  .Navbar {
    position: fixed;
    top: 65px;
    left: 0;
    width: 100%;

    background-color: #fafafa;
    border-bottom: 1px solid #eee;

    display: none;
    flex-direction: column;
    gap: 0;
  }

  .NavbarItem {
    width: 100%;
  }

  .NavbarLink:link,
  .NavbarLink:visited {
    color: #000;
    padding-top: 16px;
    padding-bottom: 16px;
    background-color: #fff;
    border-left: 3px solid transparent;
    border-radius: 0;

    width: 100%;
  }

  .NavbarLinkActive:link,
  .NavbarLinkActive:visited,
  .NavbarLink:hover,
  .NavbarLink:active {
    background-color: transparent;
    color: #659837;
    border-left: 3px solid #659837;
  }

  .NavbarOpen .Navbar {
    display: flex;
  }

  .NavbarItemHasSubMenu {
    flex-direction: column;
  }

  .NavbarSubmenu {
    position: relative;

    padding: 12px 0 12px 24px;
    width: 90%;

    display: none;
  }

  .NavbarSubmenuMenu {
    border-radius: 0;
    box-shadow: none;
  }

  .NavbarSubmenuLink:link,
  .NavbarSubmenuLink:visited {
    background: transparent;
    color: #000;
    text-align: left;
  }

  .NavbarSubmenuItem:not(:last-child) .NavbarSubmenuLink {
    border-bottom: none;
  }

  .NavbarWalletBtns {
    margin-left: 0;
    padding: 12px;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* gap: 12px; */
  }

  .NavbarWalletBtn {
    text-align: center;
    padding: 16px;
  }

  .NavbarWalletBtn:first-child {
    grid-column: 1 / -1;
    color: #659837;
    font-size: 24px;
    padding: 0;
  }

  .NavbarWalletBtn:nth-child(2) {
    background-color: #397305;
    color: #fff;
  }

  .NavbarWalletBtn:last-child {
    border: 1px solid #397305;
    background-color: transparent;
    color: #397305;
  }
}

.searchContainer {
  width: 25rem;
  display: flex;
  align-items: center;
}

.SearchForm {
  width: 85%;
  height: 36px;
  /* background-color: #fff; */
  border: 1px solid #eaeaea;
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding: 4px 14px;
}

.searchInput{
  border: none;
}

/* .SearchForm button {
    display: block;
    width: 36px;

    display: flex;
    align-items: center;
    justify-content: center;
    } */

.SearchFormBtn {
  background-color: #7bb20e;
  color: #fff;
  height: 36px;
  padding: 4px 14px;
  margin-left: .6rem;
  border-radius: 5px;
}

.SearchForm button ion-icon {
  width: 16px;
  height: 16px;
  color: #808080;
  display: block;
}

.SearchForm input {
  width: 100%;
  color: #808080;
  font-family: "Karla", sans-serif;
  background-color: transparent;
  outline: none;
  font-size: 14px;
}