.site-header {
  background: #1e1e1e;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8));
  backdrop-filter: blur(2px);
  z-index: 2;
  position: relative;
}

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 3;
}

.box {
  width: 157px;
  height: 100%;
  cursor: pointer;
  position: absolute;
  left: 0;
  background-color: #FCEDF2;
  /* background-color: rgb(211 66 122); */
  transition: left 0.5s ease;
  z-index: 0;
}

.switch .active {
  left: calc(100% - 48%);
  /* left: 3px; */
}

.switch {
  position: relative;
  z-index: 1;
}

.text-switch {
  color: #777777;
  transition: color 0.5s ease;
  font-weight: bold;
}

.switch .text-active {
  /* color: white; */
}

#desktop-autocompleteContainer {
  top: calc(100% + 13px);
  width: calc(100% + 39px);
  left: -13px;
  background: white;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

#desktop-autocompleteContainer .location-items {
  max-height: 220px;
  overflow-y: scroll;
}

#desktop-autocompleteContainer #locations li {
  padding: 5px 16px;
  transition: 0.35s;
  cursor: pointer;
}

#desktop-autocompleteContainer #locations li:not(:last-child) {
  border-bottom: 1px solid #ededed;
}

#desktop-autocompleteContainer #locations li:hover {
  background-color: #ededed;
}

#desktop-autocompleteContainer #locations .location-items::-webkit-scrollbar {
  width: 5px;
}

#desktop-autocompleteContainer
  #locations
  .location-items::-webkit-scrollbar-track {
  /*background-color: 5f5f5f;*/
  box-shadow: inset 1px 1px 5px #e1e1e1;
  border-radius: 15px;
}

#desktop-autocompleteContainer
  #locations
  .location-items::-webkit-scrollbar-thumb {
  background-color: #d9d9d9;
  border-radius: 15px;
}

#desktop-autocompleteContainer
  #locations
  .location-items::-webkit-scrollbar-thumb:hover {
  background: #777;
}

@media screen and (max-width: 768px) {
  .mobile-nav #full_logo {
    display: block;
    width: 110px;
  }

  .mobile-nav #mini_logo {
    display: none;
  }

  .site-header {
    background: #000;
  }
}

@media screen and (min-width: 769px) {
  #mini_logo {
    display: none;
  }

  .header__navbar {
    gap: clamp(0.3125rem, -0.9847rem + 1.7296vw, 1rem);
  }
}

@media screen and (min-width: 768px) and (max-width: 1199.98px) {
  .header_logo {
    /* order: 1; */
    flex-grow: 1;
  }

  .businesses-btn {
    /* order: 2; */
  }

  .profile-user,
  .user-btn {
    /* order: 3; */
  }

  .search-form-container {
    /* order: 4; */
    width: 100%;
    margin-top: 1rem;
  }
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 768px) {
  .site-header {
    padding: 16px 20px 22px 20px;
  }

  .header-app {
    background-color: #121212;
    padding: 16px 20px 22px 20px;
  }

  .header-app .header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .notify-area {
    display: flex;
    gap: 0.75rem;
    align-items: center;
  }

  .header-wrap {
    min-height: 40px;
  }

  .header__navbar {
    margin: 0;
    padding: 0;
  }

  .header__navbar--wrap {
    min-height: unset;
  }

  .app_search_field {
    flex-grow: 1;
    border-radius: 8px;
    font-family: "Roboto";
    height: 40px;
    padding: 13px 15px;
    align-items: center;
    min-width: 250px;
    background-color: #212327;
    display: flex;
    margin-top: 1rem;
  }

  .search_field {
    flex-grow: 1;
    margin-left: 15px;
    border-radius: 8px;
    font-family: "Roboto";
    height: 40px;
    padding: 13px 15px;
  }
}