/**
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License version 3.0
* that is bundled with this package in the file LICENSE.txt
* It is also available through the world-wide-web at this URL:
* https://opensource.org/licenses/AFL-3.0
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade this module to a newer
* versions in the future. If you wish to customize this module for your
* needs please refer to CustomizationPolicy.txt file inside our module for more information.
*
* @author Webkul IN
* @copyright Since 2010 Webkul
* @license https://opensource.org/licenses/AFL-3.0 Academic Free License version 3.0
*/

.ui-autocomplete {
  width: 70vw !important;
  left: 15vw !important;
}
.ui-menu-item {float: left; width: 100%; margin-bottom: 5px;}
.ui-menu-item .product {font-size: 15px;}
.ui-corner-all {float: left; width: 100%;}
.wk-img-search {float: left; height: 80px; width: 10%; margin-right: 5px;}

.button-link-list{
    background: none;
    color: #e2520f;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
}

.button-link-list:hover{
    color: rgb(223, 70, 0) !important;
    text-decoration: underline;
}

.ui-autocomplete-input {
    display: inline;
    padding: 7px 60px 7px 13px;
    height: 40px;
    margin-right: 1px;
    border: none;
    background: initial;
    width: 100%;
}
.ui-form-elastic-element {
    margin-left: 20px;
    width: 100%;
    right: 20px;
    margin-top: 4px;
    z-index: 99;
    border: 1px solid #5a504c;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
.ui-btn-search-elastic {
    display: block;
    position: absolute;
    top: 5px;
    right: 15px;
    border: none;
    color: #8dc63f;
    width: 36px;
    text-align: center;
    padding: 5px 0 9px 0;
    background: initial;
}
.ui-autocomplete-input::placeholder {
  color: #8dc63f;
  opacity: 1; /* Firefox */
}
.ui-autocomplete-input::-ms-input-placeholder {
  /* Edge 12-18 */
  color: #8dc63f;
}




/* Next styles overwrite other prestashop or theme defined styles */

.product-miniature{
  padding: 16px;
  height: 100%;
  outline: solid 1px #f1f1f1 !important;
}
.product-miniature:hover{
  background-color: #fff8f0 !important;
}
.product-miniature:hover * {
  color: #333 !important;
}

.thumbnail-container{
  margin-bottom: 16px;
}

.product-description > * {
  margin-bottom: 4px !important;
}

.product-price{
  color: #333 !important;
  font-size: medium !important;
}

.btn-product-list{
  background-color: #FFC694 !important;
  color: #333333 !important;
  /* border: 1px solid #333 !important; */
}

.btn-product-list:hover{
  background-color: #8dc63f !important;
  color: white !important;
  /* border: 1px solid transparent !important; */
}

.product-miniature-grid .product-title{
  font-size: large !important;
}

.product-brand{
  font-size: medium !important;
}

.js-product-miniature-wrapper{
  margin-top: 16px;
}

.product-miniature-default .product-thumbnail img{
  width: 100%;
  object-fit: contain;
  margin: 0;
  padding-top: 20px;
  padding-bottom: 20px;
}

.ui-autocomplete-input:focus-visible {
  outline: none;
}

.ui-autocomplete-product-list-view{
  display: flex;
  flex-direction: column;
  align-items: baseline;
}

.ui-autocomplete-product-price{
  font-weight: bold;
  font-size: 15px;;
}

.ui-autocomplete-product-category{
  background-color: #eee;
  color: black;
  padding: 4px 8px;
}

.ui-menu .ui-menu-item{
  margin: 4px !important;
}
.ui-menu-item-category{
  width: auto !important;
  font-size: medium !important;
}


.ui-menu-item-title{
  margin-left: 4px !important;
  clear: both;
}
.ui-menu .ui-menu-item a{
  padding: 0px !important;
}

.ui-state-focus{
  background: #f0f0f0 !important;
}

.ui-state-focus-category{
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
}
.ui-state-focus-category:hover .ui-autocomplete-product-category{
  background-color: #333;
  color: white;
}

.ui-menu-item:hover{
  cursor: pointer;
}

/* Large devices (desktops, 1200px and up) */
@media (min-width: 1200px) {
  .ui-autocomplete {
    width: 960px !important;
    left: calc( ( 100vw - 960px ) / 2 + 30px ) !important;
  }
}

/* Medium devices (desktops, 980px and up) */
@media (min-width: 993px) and (max-width: 1199px) {
  .ui-autocomplete {
    width: 65vw !important;
    left: 20vw !important;
  }
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 992px) {
  .ui-autocomplete {
    width: 90vw !important;
    left: 5vw !important;
    top: 131px !important;
  }
}

/* Extra small devices (phones, less than 768px) */
@media (max-width: 767px) {
  .ui-autocomplete {
    width: 100vw !important;
    left: 0 !important;
  }
}