.contacts-search-form {

  .flex();

  &.fg-line:not([class*=has-]):after {
    background: @accentColor;
  }

  .contacts-search-input {
    z-index: 2;
    top: 0;
    height: @searchInputHeight;
    background: rgba(0, 0, 0, 0);
    input[type="text"] {
      font-size: 18px;
      padding: 8px 0 0 30px;
      width: 90%;
      border: 0;
      border-radius: 0;
      color: @m-white;
      background: rgba(0, 0, 0, 0);
    }
    i {
      padding-top: 5px;
      font-size: x-large;
      color: @m-white;
      position: absolute;
    }

    .mdi-close {
      color: @m-white;
    }

    &.form-control:not(.fc-alt) {
      border-bottom: 1px solid @textPrimaryColor;
    }
  }

  .contacts-search-input:before {
    font-family: 'MaterialDesignIcons';
    content: "\f349";
    position: absolute;
    padding: 2px 10px 0 5px;
    font-size: x-large;
    color: @m-white;
  }

  @media (max-width: @screen-md-min) {
    .contacts-search-input {
      flex-grow: 1;
    }
  }
}

/* This class changes some classes used inside contactListItem for the template of contact search provider */
.contact-globalsearch-item {

  & > span {
    position: absolute;
    top: 45px;
    right: 30px;
  }

  .esn-avatar {
    height: 64px;
    width: 64px !important; // To override the same !important style of esn-avatar
  }

  .contact-list-item-attrs {
    margin: 0;

    .p-t-5 {
      padding-top: 0 !important; // To override another !important of p-t-5
    }
  }
}

#sub-header {
  .contacts-search-input {
    i.mdi.mdi-close {
      color: @textPrimaryColor;
      right: 5px;
    }
  }
}