.mb-element-simplesearch {
  .autocompleteWrapper {
    position: relative;
    .autocompleteList {
      display: none;  // suppress border; will be shown via script when populated
      z-index: 20000;
      background-color: #FFF;
      color: #858585;
      cursor: pointer;
      width: 100%;
      overflow: auto;
      overflow-x: hidden;
      border: solid 1px #c8c8c8;
      border-top: none;
      // Make it look like a .dropdown without really being a dropdown
      line-height: $inputHeight;
      @extend .smallText;
      li {
        display: block;
        padding-left: 5px;
        width: 100%;
        text-align: left;
        &:hover {
          background-color: darken(#FFF, 10%);
        }
      }
    }
  }
}

.sidePane {
  .mb-element-simplesearch {
    .autocompleteWrapper {
      width: 100%;
      .autocompleteList {
        max-width: 100%;
        li {
          &:hover {
            color: #5b932a;
          }
        }
      }
    }
  }
}

.toolBar {
  .mb-element-simplesearch {
    .autocompleteWrapper {
      .autocompleteList {
        position: absolute;
        max-height: 250px;
      }
    }
  }
  &.bottom .autocompleteList {
    // "drop up"
    bottom: 0;
    margin-bottom: $inputHeight;
  }
}

.mobilePane .mb-element-simplesearch {
  .autocompleteWrapper {
    width:100%;
  }
  .autocompleteList li {
    padding:$space/2;
    display:block;
    line-height: 2.5;
    &:nth-child(2n){background-color: lighten($ciColor2, 15%);}
  }
}


