.float-search-icon {
  width: 33px;
  height: 33px;
  background: url("../../images/black-search.svg") center center no-repeat;
  background-size: 15px;
  padding: 0;
  border-radius: 100%;
  position: absolute;
  top: 0;
  right: 0;
}
@media (min-width: 576px) {
  .float-search-icon {
    width: 60px;
    height: 60px;
    right: 0;
    left: auto;
    background: #fde85e url("../../images/black-search.svg") center center no-repeat;
    background-size: 19px 19px;
  }
}

.float-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: #f1f6fb url("../../images/close-search.png") center center no-repeat;
  background-size: 7px;
  opacity: 0;
  pointer-events: none;
}
@media (min-width: 576px) {
  .float-search-input::-webkit-search-cancel-button {
    background-size: 12px;
    width: 24px;
    height: 24px;
  }
}
.float-search-input:focus::-webkit-search-cancel-button {
  opacity: 1;
  pointer-events: all;
  cursor: pointer;
}

@media (min-width: 768px) {
  body:not(.scroll) .float-search-container.hover-state {
    width: 100%;
  }
}

.float-search-container {
  position: fixed;
  z-index: 5;
  bottom: 0;
  left: 0;
  right: 0;
  height: 45px;
  border-radius: 25px 25px 0 0;
}
@media (min-width: 768px) {
  .float-search-container {
    width: 60px;
    height: 60px;
    max-width: 430px;
    left: 29px;
    right: auto;
    bottom: 30px;
    box-shadow: 0 14px 20px 0 rgba(120, 154, 187, 0.4);
    border-radius: 60px;
    overflow: hidden;
    transition: width 0.4s ease-in-out;
  }
  .float-search-container.hover-state {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .float-search-icon {
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 33px;
    height: 33px;
    background-color: transparent;
  }
}
.float-search-input {
  cursor: pointer;
  background: #fde85e;
  color: #232323;
  border: none;
  height: 45px;
  border-radius: 25px 25px 0 0;
  padding-top: 13px;
  padding-left: 50px;
  padding-bottom: 12px;
  padding-right: 16px;
  font: 14px/20px "arimobold", sans-serif;
}
.float-search-input::-webkit-input-placeholder {
  color: #232323;
}
.float-search-input:-moz-placeholder {
  color: #232323;
}
.float-search-input::-moz-placeholder {
  color: #232323;
}
.float-search-input:-ms-input-placeholder {
  color: #232323;
}
@media (min-width: 768px) {
  .float-search-input {
    height: 60px;
    background: #ffffff;
    padding-top: 20px;
    padding-left: 29px;
    padding-bottom: 20px;
    padding-right: 73px;
    border-radius: 0;
  }
}
.float-search-input:focus, .float-search-input:active {
  box-shadow: none;
  border: none;
  background: #fde85e;
}
@media (min-width: 768px) {
  .float-search-input:focus, .float-search-input:active {
    background: #ffffff;
  }
}

/*# sourceMappingURL=data:application/json;charset=utf-8,%7B%22version%22:3,%22sourceRoot%22:%22%22,%22sources%22:%5B%22file:///C:/Projects/idf_core/Idf.Web/wwwroot/scss/base/_mixins.scss%22,%22file:///C:/Projects/idf_core/Idf.Web/wwwroot/scss/base/float-search.scss%22,%22file:///C:/Projects/idf_core/Idf.Web/wwwroot/scss/base/_varibales.scss%22%5D,%22names%22:%5B%5D,%22mappings%22:%22AA8FA;EA3EI,OA4EoB;EA3EpB,QA2E0B;EAC1B;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAVJ;IA3EI,OAsFwB;IArFxB,QAqF8B;IAC1B;IACA;IACA;IACA;;;;AAKJ;EACI;EAhGJ,OAiGwB;EAhGxB,QAgG8B;EAC1B;EACA;EACA;EACA;EACA;;AAEA;EATJ;IAUQ;IAzGR,OA0G4B;IAzG5B,QAyGkC;;;AAM9B;EACI;EACA;EACA;;;AC/HA;EAEI;IACI;;;;AAQhB;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EATJ;IDCA,OCS4B;IDR5B,QCQkC;IAC1B;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACI;;;AAQR;EAHJ;IAIQ;IACA;IACA;ID/BR,OCgC4B;ID/B5B,QC+BkC;IAC1B;;;AAIR;EACI;EACA,YCvCU;EDyCV,OCrCW;EDsCX;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADtBJ;ECyBQ,OChDO;;AFwBf;ECwBQ,OChDO;;AFyBf;ECuBQ,OChDO;;AF0Bf;ECsBQ,OChDO;;ADmDX;EAlBJ;IAmBQ;IACA,YC3EJ;ID4EI;IACA;IACA;IACA;IACA;;;AAGJ;EAEI;EACA;EACA,YCrEM;;ADuEN;EANJ;IAOQ,YC1FR%22%7D */