@import '../modules/mixins'; // For box-shadow

.input-container {
  width: 35%;

  form {
    display: inline;
  }
}


.input-bar {
  font-family: $base-font-family;
  color: $mid-grey;
  max-height: $three-baselines;
  padding: 6px 8px 5px 8px;
  border: 1px solid $mid-grey;
  @include rz-box-sizing-border;
  background: white;
  width: 100%;
  &:focus {
    border: 1px solid $mid-grey;
    @include rz-box-shadow(0px, 1px, 6px, 0px, rgba(0,0,0,0.3) );
  }  
}

#input-container__search {
  position: absolute;
  top: 40px;
  left: 24px;
}

#input-container__graph-input {
  position: absolute;
  top: 100px;
  left: 24px;
  &:focus {
    width: 80%;
  }
}

#merge-tool {
  position: absolute;
  top: 160px;
  left: 24px;
}

#textanalyser.ui-autocomplete-input {
  font-family: $base-font-family;
  color: $mid-grey;
}

#btn_add {
  float: right;
  background: url(../img/plus-button.png);
  background-position: center;
  background-repeat: no-repeat;
  background-color: red;
  position: absolute;
  height: 36px;
  width: 36px;
  top: 0px;
  right: 0px;
  border: 0;
}

#btn_search {
  float: right;
  background: url(../img/search-icon.png);
  background-position: center;
  background-repeat: no-repeat;
  background-color: lightgreen;
  position: absolute;
  top: 0px;
  right: 0px;
  height: 36px;
  width: 36px;
  border: 0;
}

.add-button:hover {
  background-color: $dark-magenta;
}

.add-button:focus {
  outline: none;
}

.suggestion{
  position: relative;
  color: $dark-grey;
  max-height: 580px;
  overflow-y: scroll;
  font-size: $h3-size;
  list-style-type: none;
  width: inherit;
  margin-top: 6px;
  border: 1px solid $mid-grey;
  @include rz-box-sizing-border;
  background: white;
  z-index: 100;
  @include rz-box-shadow(0px, 3px, 6px, 0px, rgba(0,0,0,0.3) );
}

.suggestion-item {
  padding: 6px 0px 6px 18px;
  cursor: pointer;
}

.suggestion-item.selected, .suggestion-item:hover {
  padding-left: 16px;
  background-color: $light-grey;
  border-left: 5px solid $cyan;
  @include rz-box-sizing-border;
}

.suggestion td{
  position:fixed;

}

.ui-helper-hidden-accessible{
  position:fixed;
  top: $three-baselines+$four-baselines+$four-baselines+35px+$three-baselines;
  left:$doc-margin+8px;
  text-shadow: -1px 1px 8px #E DE275, 1px -1px 8px #EDE275;
  font-size:16px;
}

.ui-helper-hidden-accessible > div {
    color: $dark-grey;
}