/* Search bar */

#searchBar {
  position: absolute;
  top: 22%;
  width: 100%;
  min-height: 40%;
/*  max-height: 40%;*/
  height: 45%; /* 72% = 100% - 28% (top) */
  margin: 0;
  z-index: 5;
/*  font-size: 0.833em;*/
}

#searchInputAndCloseButton {
  position: absolute;
  width: 100%;
  height: 6%;
}

#searchInput {
  background-image: url('icon/searchicon2.png');
  background-position: 2% 50%;
  background-repeat: no-repeat;
  background-size: auto 70%;
  position: absolute;
  width: 70%;
  height: auto;
  
  padding: 1% 15% 1% 15%;
  border: 1px solid #ddd;
  margin-bottom: 1%;
  border-radius: 4px;
  z-index: 5;
  outline: 0;
}

#searchInput.active {
  background-image: url('icon/searchicon2.png'), url('icon/closeicon2.png');
  background-position: 2% 50%, 98% 50%;
  background-size: auto 70%, auto 80%;
}

#searchInput, #searchInput::placeholder {
  font-family: "Liberation Sans", "Arial", sans-serif;
/*  font-size: 1.2vw;*/
/*  font-size: 1vw;*/
  font-size: clamp(8px, calc(var(--fontsizefactorform) * 1vw), 24px);
}
@media (min-aspect-ratio: 16/9) {
  #searchInput, #searchInput::placeholder {
    font-family: "Liberation Sans", "Arial", sans-serif;
/*    font-size: calc(1.2 * 16 / 9 * 1vh);*/
/*    font-size: calc(1 * 16 / 9 * 1vh);*/
    font-size: clamp(8px, calc(var(--fontsizefactorform) * var(--aspectratio) * 1vh), 24px)
  }
}

#searchCloseButton {
  background-image: url('icon/closeicon2.png'); /* Add a search icon to input */
  background-position: 0 0; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  background-size: 100% 100%;
  width: auto;
  height: 100%;
  aspect-ratio: 1/1;
  position: absolute;
  opacity: 0;
  outline: none;
  z-index: 10;
  top: 0%;
  right: 0%;
/*  transition: opacity 0.5s;*/
  visibility: hidden;
}
#searchCloseButton.active {
  visibility: visible;
}

.searchResults {
  position: absolute;
  width: 100%;
/*  height: 86%;*/
  height: 94%;
/*  top: 14%;*/
  top: 7%;
/*  display: none;*/
/*  background-color: white;*/
}
.searchResults.trans {
  transition: opacity 1s;
}
.searchResults.hidden {
  opacity: 0;
}

.searchResults.svg {
/*  top: unset;*/
/*  bottom: -22vw;*/
}

.searchResultsContainer {
  position: absolute;
  height: 100%;
  width: 100%;
/*  scrollbar-width: thin;*/
/*  scrollbar-color: #808080 #ffffff00;*/
}
.searchResultsContainer::-webkit-scrollbar {
/*    background-color: #ffffff00;*/
/*    width: 0.2em;*/
}
.searchResultsContainer::-webkit-scrollbar-thumb {
/*    background-color: #808080;*/
/*    height: 1em;*/
}

#searchUL {
  position: absolute;
  width: 100%;
  padding: 0;
  margin: 0;
  height: 100%;
  line-height: 1.3em;
  overflow-y: auto;
}

#searchUL li.liPerformer {
  display: block; /* Make it into a block element to fill the whole list */
  cursor: default;
  
  text-indent: -0.5em;
  padding-left: 10%;
  background-color: white;
}
#searchUL li:hover {
/*  color: rgb(255, 130, 0);*/
  font-weight: bold;
/*  text-decoration: underline;*/
}
#searchUL li.fake-hover {
/*  color: rgb(255, 130, 0);*/
  font-weight: bold;
/*  text-decoration: underline;*/
}
#searchUL li.noevents {
  font-weight: normal;
/*  text-decoration: none;*/
}
#searchUL li.selected {
/*  color: rgb(255, 70, 0);*/
  font-weight: bold;
/*  text-decoration: underline;*/
}

#noResults {
  position: relative;
/*  top: -100%;*/
  left: 1em;
}