bi-search {
  display: inline-flex;
  position: relative; }
  bi-search .bi-input {
    padding-right: 32px; }
    bi-search .bi-input.bs-has-context-icon {
      padding-left: 34px; }
  bi-search .bi-icon {
    font-size: 22px; }
  bi-search .bs-search,
  bi-search .bs-close,
  bi-search .bs-context {
    transition: color .3s;
    position: absolute;
    top: 50%;
    margin-top: -11px; }
  bi-search .bs-search {
    right: 6px; }
  bi-search .bs-close {
    right: 5px;
    margin-top: -14px; }
    bi-search .bs-close .bi-icon {
      color: #FC4A6A !important; }
  bi-search .bs-context {
    left: 6px; }
  bi-search.bs-focused .bs-search,
  bi-search.bs-hovered bi-search.bs-has-text .bs-search {
    color: #FC4A6A !important; }
  bi-search.bs-has-text .bi-input {
    border-color: #64B5F6 !important; }
  bi-search.bi-search--rnd .bi-input, bi-search.bi-search--borderless .bi-input {
    height: 42px !important;
    font-weight: 600; }
    bi-search.bi-search--rnd .bi-input.bs-has-context-icon, bi-search.bi-search--borderless .bi-input.bs-has-context-icon {
      padding-left: 40px; }
  bi-search.bi-search--rnd .bs-context, bi-search.bi-search--borderless .bs-context {
    left: 12px; }
  bi-search.bi-search--rnd .bs-search, bi-search.bi-search--borderless .bs-search {
    right: 14px; }
  bi-search.bi-search--rnd .bs-close, bi-search.bi-search--borderless .bs-close {
    right: 12px; }
  bi-search.bi-search--rnd {
    border-radius: 100px; }
    bi-search.bi-search--rnd .bi-input {
      padding: 0 40px 0 20px;
      border-radius: 100px; }
  bi-search.bi-search--borderless .bi-input {
    padding-left: 0;
    border: 0; }
    bi-search.bi-search--borderless .bi-input.bs-has-context-icon {
      padding-left: 29px; }
  bi-search.bi-search--borderless .bs-context {
    left: 0; }
  bi-search.bi-search--borderless .bs-search,
  bi-search.bi-search--borderless .bs-close {
    right: 0; }