$searchRouterInputWidth: 100%;
.mb-element-searchrouter {
  font-size: 11px;

  .dropdown, .inputWrapper {
    width: $searchRouterInputWidth;
    margin-bottom: $space/2;
  }
  .ui-helper-hidden-accessible {
    display: none;
  }
  .search-results {
    overflow: auto;
    > table {
      margin-top: 2px;
      margin-bottom: 5px;
      > thead {
        background-color: #c0c0c0;
        > th {
          padding-left: 3px;
          padding-right: 3px;
          text-align: left;
          font-weight: bold;
          white-space: nowrap;
        }
      }
      tr {
        border-bottom: 1px solid #d3d3d3;
        &:hover {
          color: $ciColor;
          background-color: $contentColor;
        }
        td {
          padding-left: 2px;
          padding-right: 2px;
        }
      }
    }
  }
  .search-action-buttons {
    text-align: right;
  }
  .popup & .search-action-buttons {
    display: none;
  }
  th {
    @extend .subTitle;
    text-align: left;
    padding-right: 3px;
  }
  td {
    padding-right: $space/2;
  }
  .result-counter {
    text-align: right;
    margin-bottom: 2px;
  }
}

// ui-autocomplete ui-front ui-menu ui-widget ui-widget-content search-router
// dublicate ! > components

.search-router.ui-autocomplete {
  z-index: 20000;
  background-color: #FFF;
  color: $secondColor;
  cursor: pointer;
  line-height: 1.8;
  max-height: 200px;
  overflow: auto;
  border: solid 1px lighten($thirdColor, 15%);
  font-size: $fontSize - 2;

  li {
    padding-left: 5px;
    &:hover, &.ui-state-focus {
      color: $ciColor;
      background-color: $contentColor;
    }
  }
}
