/**
 * ============LICENSE_START=======================================================
 * org.onap.aai
 * ================================================================================
 * Copyright © 2017-2018 AT&T Intellectual Property. All rights reserved.
 * Copyright © 2017-2018 Amdocs
 * ================================================================================
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *       http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ============LICENSE_END=========================================================
 */
.auto-complete-search {
  display: inline-block;
  vertical-align: text-bottom;
}

.auto-complete-search-text {
  float: left;
}

.auto-complete-search-button-group {
  position: inherit !important;
  display: inline-block !important;
  vertical-align: bottom !important;
}

.auto-complete-search input.form-control {
  width: 350px;
}

.auto-complete-search-button, .auto-complete-search-button:focus {
  background-color: $search-button-background-color;
  width: 45px;
  height: 30px;
  border: solid 1px $search-border-color1;
}

.auto-complete-help-button, .auto-complete-help-button:focus {
  background-color: $white;
  width: 45px;
  height: 30px;
  border: solid 1px $search-border-color1;
}

.auto-complete-search button:hover {
  background-color: $search-background-color1;
}

.auto-complete-search .fa-lg {
  font-size: 1em;
  line-height: 1em;
  background-color: $search-button-background-color;
}

.auto-complete-search .fa-question-circle {
  font-size: 1em;
  line-height: 1em;
  background-color: $white;
}

.auto-complete-search button:hover .fa-search {
  color: $primary-background-color;
  background-color: $search-background-color1;
}

.auto-complete-search button:hover .fa-question-circle {
  color: $primary-background-color;
  background-color: $search-background-color1;
}

.auto-complete-search .btn-group .auto-complete-clear-button {
  border: none;
  margin-left: -35px !important;
  height: 30px;
  background-color: transparent;

  i {
    color: $search-text-color1;
    opacity: 0.3;
    filter: alpha(opacity=30);
    background-color: transparent;
  }
}

.auto-complete-search .auto-complete-clear-button:hover {
  background-color: transparent;

  i.fa-times {
    color: $search-text-color1;
    opacity: 1;
    background-color: transparent;
  }
}

.auto-complete-search button:hover .fa-times {
  color: $primary-background-color;
  background-color: $search-background-color1;
}

.react-autosuggest__container {
  display: inline-block;
  position: relative;
  padding-top: 3px;
}

.react-autosuggest__input {
  width: 655px;
  height: 30px;
  display: inline-block;
}

.react-autosuggest__input:focus {
  outline: none;
}

.react-autosuggest__container--open .react-autosuggest__input {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.react-autosuggest__suggestions-container {
  display: none;
  overflow-y: scroll;
  height: 200px;
  border:1px ;
}

.react-autosuggest__suggestions-containerCopy {
  display: none;
  display: block;
  position: absolute;
  top: 30px;
  width: 655px;
  border: 1px solid $search-border-color1;
  background-color: $primary-background-color;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  z-index: 90;
  overflow-y: hidden;
}

.react-autosuggest__container--open .react-autosuggest__suggestions-container {
  display: block;
  position: absolute;
  top: 30px;
  width: 655px;
  border: 1px solid $search-border-color1;
  background-color: $primary-background-color;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  z-index: 99;
  overflow-x: hidden;
}

.react-autosuggest__suggestions-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 646px;

}

.react-autosuggest__suggestion {
  cursor: pointer;
  padding: 10px 20px;
}

.react-autosuggest__suggestion--focused {
  background-color: $search-background-color3;
}

.react-autosuggest__section-title {
  padding: 10px 0 0 10px;
  font-size: 12px;
  color: $search-background-color2;
  border-top: 1px dashed $search-border-color1;
}

.react-autosuggest__section-container:first-child .react-autosuggest__section-title {
  border-top: 0;
}


.suggestionFlexContainer {
  display: flex;
  font-family: Arial;
}

.suggestionColumnOne {
  flex: 20;
}

.suggestionColumnTwo {
  flex: 80;
}

.highlight {
  font-weight: bolder;
  background-color:inherit;
  padding: 0px;
}

.modal-searchable {
  height: 500px !important;
  margin: 15px 0;
  overflow-y: scroll;
}
.modal-searchable:hover {
  overflow-y: scroll;
}