form.header-search-bar {
  width: 48%;
  position: relative;
  justify-content: start !important;
}

form.header-search-bar .input-group {
  width: 90%;
}

form.header-search-bar button.cancel-search {
  padding: 0.5vw;
  position: absolute;
  z-index: 2;
  left: 1vw;
  background: transparent;
  font-size: 1.25vw;
  display: none;
}

form.header-search-bar button.cancel-search i {
  pointer-events: none;
}

form.header-search-bar button.cancel-search:hover {
  color: #ff003b;
}

form.header-search-bar .input-group input {
  padding-right: 4vw;
}

form.header-search-bar .input-group input::placeholder {
  font-weight: 500;
}

form.header-search-bar
  .input-group
  input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

form.header-search-bar .search-magnifier-cont {
  width: 1.8vw;
  height: 1.8vw;
  position: absolute;
  right: 1.2vw;
}

form.header-search-bar .search-magnifier-cont svg {
  width: 100%;
  pointer-events: none;
}

form.header-search-bar .search-magnifier-cont svg path {
  fill: var(--green) !important;
}

form.header-search-bar .search-result-window {
  padding: 1vw;
  width: 90%;
  position: absolute;
  height: 0;
  top: 101%;
  right: 0;
  z-index: 2;
  box-shadow: 0 0 1vw rgba(0, 0, 0, 0.25);
  border-radius: 0.85vw;
  transition: all 0.3s ease-in-out;
  background-color: var(--light-bg);
  visibility: hidden;
  opacity: 0;
  justify-content: start !important;
}

form.header-search-bar .search-result-window.show {
  visibility: visible;
  opacity: 1;
  height: 15vw;
}

@media (max-width: 450px) {
  form.header-search-bar {
    width: 80%;
    align-items: center !important;
  }
  form.header-search-bar .input-group input::placeholder {
    font-size: 2.65vw;
    color: var(--green);
    opacity: 0.9;
  }
  form.header-search-bar .input-group input {
    padding-right: 9vw;
    border: 0.1vw solid #dce2eaff;
  }
  form.header-search-bar button.cancel-search i {
    font-size: 3.2vw;
  }
  form.header-search-bar .search-magnifier-cont {
    width: 5vw;
    height: 5vw;
    margin-right: 1vw;
  }
}
