/*
STYLESHEET USED ON THE index_disambiguation.php PAGE FOR
NOT-FOUND KEYWORDS OF THE SEARCH. THIS STYLESHEET SHOULD
BE LOADED AFTER THE ORIGINAL STYLESHEETS!
V1
9/12/2019
*/

.suggestionItem{
  /*change style of URLS with improved searchsuggestions!*/

}
/*The two DIVS making the X in the CLOSE button*/
.closeLine{
  height: 4px;
  width:14px;
  top: 11px;
  left: 7px;
  position: absolute;
  background-color: rgb(250,250,250);
  border-radius: 2px;
  z-index: 9002;
  transition: all .5s ease-in;
}
/*styling of the not found words; there's an ease-in applied matching
the duration of the JS timeOUT!!!!!! (1000MS = 1S)
*/
.errword{
  display: inline-block;
  padding: 3px 5px 3px 5px;
  
  transition: all 1.0s ease-in;
  background: linear-gradient(to right, rgba(128,21,21,50%) 50%, rgba(255,255,255,0) 50%);
  background-size: 200% 100%;
  background-position: right bottom;

}
.errword:hover{
  background-position: left bottom;

}

#searchSuggestions{
    overflow-y:scroll;
    max-height:250px;
}

/*Element to take focus after eventtrigger; this prevents other elements
from firing triggers
*/
#overlaySlave {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 9000;
}
/*Container of the data with suggestions.*/
#dataSlave{
  position: fixed;
  display: block;
  width: 25%;
  height: 50%;
  min-width: 175px;
  min-height: 200px;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
  background-color: rgba(255,255,255,0.9);
  border: 1px solid #a3382e;
  z-index: 9001;
  cursor: pointer;
  padding: 10px;
}
/*Button to close the suggestions*/
#closesuggestions{
  width: 28px;
  height: 28px;
  z-index: 9002;
  background-color: #a3382e;
  border-radius: 14px;
  position: absolute;
  right:-14px;
  top: -14px;
  margin: 2px;
}

/*LeftHigh leg of X*/
#lh{
  transform: rotate(45deg);
}
/*RightHigh leg of X*/
#rh{
  transform: rotate(-45deg);
}

#closesuggestions:hover #rh{
  transform: rotate(45deg);
  background-color: rgb(128,21,21);
}
#closesuggestions:hover #lh{
  transform: rotate(-45deg);
  background-color: rgb(128,21,21);
}
