/*
    List of All Colors
    (sorted using: https://elektrobild.org/tools/sort-colors)
*/
.search {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: transparent !important;
}
.search__mglass {
  padding: 10.5px 13.875px 0 13.875px;
  cursor: pointer;
  /* display: flex;
  align-items: center;
  height: 100%;
  width: 27px; */
}
@media screen and (max-width: 1399px) {
  .search__mglass .icon {
    width: 22px;
  }
}
.search__mglass .icon {
  width: 15px;
  max-width: 22px;
}
.search__input, .form-control.search__input {
  margin: 10.5px 13.875px !important;
  height: 20px;
  width: 0;
}
.search__input::-webkit-search-cancel-button, .form-control.search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='8' fill='white' fill-opacity='0.25'/%3E%3Cpath d='M5 5L11 11M11 5L5 11' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  margin-right: 6px;
}
.search__input::-ms-clear, .form-control.search__input::-ms-clear {
  width: 16px;
  height: 16px;
  opacity: 0.45;
}
.search__input, .form-control.search__input {
  font-family: "open-sans-regular";
  font-size: 1rem;
  color: #FFFFFF;
  background: transparent;
  border-bottom: 1px solid #FFFFFF;
  opacity: 0;
  will-change: width;
  -webkit-transition: width 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.search__input.open {
  width: 200px;
  opacity: 1;
  -webkit-transition: width 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.search__close-icon {
  padding: 0;
  height: 100%;
  width: 0;
  cursor: pointer;
  opacity: 0;
  -webkit-transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), width 0.75s 0.1875s cubic-bezier(0.16, 1, 0.3, 1), padding 0.75s 0.1875s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), width 0.75s 0.1875s cubic-bezier(0.16, 1, 0.3, 1), padding 0.75s 0.1875s cubic-bezier(0.16, 1, 0.3, 1);
}
.search__close-icon.open {
  padding: 10.5px 13.875px 0 13.875px;
  width: 41.7667px;
  opacity: 1;
  -webkit-transition: opacity 0.75s 0.1875s cubic-bezier(0.16, 1, 0.3, 1), width 0.1875s cubic-bezier(0.16, 1, 0.3, 1), padding 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.75s 0.1875s cubic-bezier(0.16, 1, 0.3, 1), width 0.1875s cubic-bezier(0.16, 1, 0.3, 1), padding 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.search__input-wrapper .form-item {
  margin-bottom: 0 !important;
}

.form-control.search__input {
  padding: 0;
  margin: 10.5px 0 0 !important;
  border-top: none;
  border-right: none;
  border-left: none;
  border-radius: 0;
}
.form-control.search__input::-webkit-input-placeholder {
  color: #F4F4F4;
  opacity: 0.5;
}
.form-control.search__input::-moz-placeholder {
  color: #F4F4F4;
  opacity: 0.5;
}
.form-control.search__input:-ms-input-placeholder {
  color: #F4F4F4;
  opacity: 0.5;
}
.form-control.search__input::-ms-input-placeholder {
  color: #F4F4F4;
  opacity: 0.5;
}
.form-control.search__input::placeholder {
  color: #F4F4F4;
  opacity: 0.5;
}

form .form-control.search__input:focus {
  background-color: transparent;
  border-color: initial;
  -webkit-box-shadow: none;
          box-shadow: none;
}