mat-toolbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  display: block;
}

.search-box-container {
  border: none;
  border-radius: 100px;
  padding-left: 5px;
  padding-top: 8px;
  max-width: 520px;
}

.search-box {
  border: none;
  -webkit-appearance: none;
  outline: none;
  height: 100%;
  width: 100%;
  transform: translateY(-25%);
  background-color: rgba(0, 0, 0, 0.2);
  padding: 0 44px 2px 50px;
  border-radius: 3px;
  color: #fff;
}

.search-form {
  height: 38px;
  position: absolute;
  background: #4a86cf;
  left: 15px;
  right: 15px;
  transform: translateY(-64px);
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
  z-index: 5;
}

.search-form.active {
  transform: translateY(0px);
}

.search-box::placeholder {
  color: #fff;
}

.search-box-mobile {
  border: none;
  background-color: #fafafa;
  outline: none;
  height: 90%;
  width: 70%;
  top: 30%;
  transform: translateY(-30%);
}

.search-box-icon {
  left: 16px;
  top: 4px;
  color: #fff;
  z-index: 1;
  position: absolute;
  font-size: 20px;
  cursor: pointer;
}

.toolbar-content {
  display: flex;
  flex: 1 1 auto;
}

.flex-fill-remaining-space {
  // This fills the remaining space, by using flexbox.
  // Every toolbar row uses a flexbox row layout.
  flex: 1 1 auto;
}

.mat-menu-item {
  font-weight: 400;
}

.show-md {
  display: block;
}

.hide-md {
  display: none;
}

.toolbar-nav>button{
  margin: 14px 0;
}

@media (min-width: 1220px) {
  .fixed-toolbar-spacer,
  mat-toolbar {
    height: 64px;
  }

  .store-logo-button {
    margin: 14px 0;
  }

  .show-md {
    display: none;
  }

  .hide-md {
    display: block;
  }

  .search-form {
    position: relative;
    left: 0px;
    right: 0px;
    transform: none;
    top: 1px;
  }

  .search-box-container{
    margin: 9px auto;
  }
}

@media (max-width: 1220px) {
  .fixed-toolbar-spacer,
  mat-toolbar {
    height: 56px;
  }

  .store-logo-button {
    margin: 10px 0;
  }

  .mat-icon-button {
    margin: 8px 0;
  }

  .search-box-container{
    margin: 6px auto;
  }
}
