.search {
  position: relative;
  width: 208px;
}
@media only screen and (max-width: 1439px) {
  .search {
    width: 28px;
    height: 28px;
  }
}
.search .form-control {
  line-height: 20px;
  padding: 10px 30px 10px 12px;
  border: none;
  background: #f3f3f3;
}
.search .form-control::-webkit-input-placeholder {
  color: #878687;
}
.search .form-control:-moz-placeholder {
  color: #878687;
}
.search .form-control:-ms-input-placeholder {
  color: #878687;
}
.search .form-control::placeholder {
  color: #878687;
}
.search .form-control:focus + .search__btn {
  color: #2e3d8c;
}
.search__btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  height: 100%;
  padding: 0;
  color: #b1b2b3;
  border: none;
  cursor: pointer;
  background: #f3f3f3;
  transition: color 0.1s ease-out;
}
@media only screen and (max-width: 1439px) {
  .search__btn {
    width: 28px;
    color: #ffffff;
    background: #2e3d8c;
  }
}
html:not(.bx-touch) .search__btn:hover, .bx-touch .search__btn:active {
  color: #2e3d8c;
}
@media only screen and (max-width: 1439px) {
  html:not(.bx-touch) .search__btn:hover, .bx-touch .search__btn:active {
    color: #ffffff;
  }
}
.search__btn .icon {
  font-size: 18px;
}
@media only screen and (max-width: 1439px) {
  .search__btn .icon {
    font-size: 23px;
  }
}