.right-nav .search_button {
  margin: 15px 0 0 0;
  cursor: pointer;
  transition: 0.2s;
  z-index: 1001;
}

.right-nav .search_button span {

}

.right-nav .search_button:hover {
  color: #313132;
  transition: 0.2s;
}

div#search_widget {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 100vh;
  background: rgba(245, 245, 247, .8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 1002;
}

.pineapple .item div.ps_thumb {
  background: #fff;
  border-radius: 15px;
}

div#search_widget.opened {
  height: 100vh;
}

.ui-autocomplete.searchbar-autocomplete {
  position: fixed !important;
  top: 80px !important;
  height: auto;
  background: transparent !important;
  width: calc(100% - 60px) !important;
  left: 30px !important;
  font-family: "Raleway", sans-serif !important;
}

ul#ui-id-1 {
  overflow-y: auto;
}

#search_widget {
  display: none;
  margin-bottom: .625rem;
  overflow: auto;
}
#search_widget form {
  position: relative;
  margin: 10px 30px 0;
}
#search_widget form i {
  position: absolute;
  padding: .5rem;
}
#search_widget form i.clear {
  right: 45px;
  display: none;
}

#search_widget form i.close {
  right: 15px;
  display: block;
}

i.material-icons.close {
  top: 0;
}

#search_widget form input {
  width: 100%;
  padding: 10px 20px 18px 40px;
  outline: none;
  border: none;
  color: #313132;
  font-weight: 500;
  background: inherit !important;
}


ul#ui-id-1 .ui-menu .ui-menu-item {

  width: inherit;
}

.ui-autocomplete.searchbar-autocomplete {
  width: 100%;
 /* min-height: 100%;*/
  border: none;
}

.ui-autocomplete.searchbar-autocomplete li a, .ui-autocomplete.searchbar-autocomplete li a.ui-state-focus {
  padding: 8px 15px;
  overflow: auto;
  border: none;
  background: none;
  margin: auto;
  border-radius: 0;
}

.ui-autocomplete.searchbar-autocomplete li a:hover {
  background-color: #f1f1f1;
  cursor: pointer;
}

.ui-autocomplete.searchbar-autocomplete li a .autocomplete-thumbnail {
  float: left;
  width: 50px;
  height: auto;
  margin-right: 8px;
}

.pineapple.ui-menu-item {
  border-radius: 3px;
  padding: 30px !important;
}


.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
  border: none !important;
  border-radius: 10px !important;
  background: #fff !important;
  transition: 0.2s;
  box-shadow: 0 6px 30px 0 rgba(0, 0, 0, .10);
}

.pineapple.ui-menu-item:hover {
  transform: scale(1.08);
  transition: transform 0.2s ease;
}

img.autocomplete-thumbnail {
  width: 100%;
}

#search_widget .material-icons.search {
  color: #313132;
}

.pineapple.ui-menu-item .product {
  height: 30px;
  overflow: hidden;
  margin: 20px 0 0 0;
  font-weight: 300;
  color: #7a7a7a;
}

.pineapple.ui-menu-item .price_container {
  height: 30px;
}

.price_container_centered {
  width: min-content;
  /*margin: 0 auto;*/
  display: block;
}

.pineapple .item.ui-state-focus img.autocomplete-thumbnail {
  margin: 5px 0 0 0;
}

.pineapple.ui-menu-item img.autocomplete-thumbnail {
  border-radius: 15px;
/*margin: 3px 0 0 0;
  padding: 20px;*/
}

.pineapple.ui-menu-item:hover, .pineapple.ui-menu-item:active, .pineapple.ui-menu-item:focus {
  cursor: pointer;
}

.price {
  color: #222;
  font-weight: 700;
}

.price.crossed {
  text-decoration: line-through;
  color: rgb(43, 46, 49);
  font-size: 85%;
  font-weight: 700;
}

.search_button {
  color: #313132;
}


ul#ui-id-1 {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100% - 140px);
  margin: 10px 0 0px 0px;
}

.pineapple ul.product-flags.js-product-flags.ui-menu.ui-widget.ui-widget-content.ui-corner-all {
  display: block !important;
  padding: 50px 0px 0px 30px;
  background: none;
  border: none;
}

.pineapple span.price {
  margin: 0 10px 0 0px;
}

.pineapple li.product-flag {
  margin: 0px 0px 0px 7px;
}

.ui-menu .ui-menu-item a {
  /*border: 1px solid #ededed;*/
}

@media only screen and (min-width: 768px) {

  .ui-autocomplete.searchbar-autocomplete {
    width: 400px;
    min-height: auto;
    left: auto;
  }

  ul#ui-id-1 {
    overflow-y: auto;
    margin: 10px 0 0px 0px;
  }
  div#ps_loading_spinner {

    left: calc(50% - 40px) !important;
    top: calc(50% - 40px) !important;

  }
}

@media (max-width: 767px) {

  #header .header-nav #menu-icon {
    position: fixed;
    right: 25px;
    margin:0;
  }

  .right-nav .search_button {
    cursor: pointer;
    position: fixed;
    right: 6.5rem;
    top: 0.9rem;
    margin: 0;
  }
}



div#ps_loading_spinner {
  position: fixed;
  left: calc(50vw - 40px) !important;
  top: calc(50vh - 200px) !important;
  display: none;
  z-index: 999999;
}

.lds-ring {
  z-index: 999999;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #313132;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #313132 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

div#search_widget_footer {
  position: fixed;
  top: calc(100vh - 50px);
  left: 0;
  right: 0;
  color: #fff;
  text-align: center;
  background: #006732;
  height: 50px;
  display: none;
}

div#search_widget_footer a {
  color: #fff;
  transition: 0.2s;
}

div#search_widget_footer:hover, div#search_widget_footer:active, div#search_widget_footer:focus {
  transition: 0.2s;
  background: #fff;
  color: #313132;
}

div#search_widget_footer div {
  line-height: 50px;
}

#search_widget_footer span.material-symbols-outlined {
  position: absolute;
  margin: 13px 0 0 10px;
}