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

.input-container {
  position: fixed;
  margin: $two-baselines 0 0 $doc-margin;

  form {
    display: inline;
  }
}


.input-bar {
  font-family: $base-font-family;
  color: $mid-grey;
  max-height: $three-baselines;
  width: 280px;
  padding: 6px 8px 5px 8px;
  border: 1px solid $mid-grey;
  @include rz-box-sizing-border;
  background: white;
  transition-property: width;
  transition-duration: 200ms;
  transition-timing-function: ease-in;
  &:focus {
    border: 1px solid $mid-grey;
    width: 520px;
    @include rz-box-shadow(0px, 1px, 6px, 0px, rgba(0,0,0,0.3) );
  }  
}

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

.add-button {
  float: right;
  background: url(../img/plus-button.png);
  background-position: center;
  background-repeat: no-repeat;
  background-color: $magenta;
  position:relative;
  height: 36px;
  width: 36px;
  left: -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: 2px 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;
}