

#searchbarParent {
  position: relative;
  width: 100vw;
  padding: 3.3em 1em 0.3em 1em;
  justify-self: center;
  margin-inline: auto auto;
}

#searchbar {
  position: relative;
  background-color: rgb(255, 255, 255);
  padding: 0.8em;
  width: 100%;
  border: 4px solid var( --borderColor);
  border-radius: 9px;
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 500;
  font-size: 1.5em;
  
}

#searchbar:focus {
  border-style: solid;
  border-color: var(--borderColor);
  outline: none;
  border-radius: 3px 3px 0px 0px;
}

#searchOutput {
  width: 100%;
  position: relative;
}

#searchOutput ul {
  position: absolute;
  z-index: 40;
  margin-top: 0;
  border: none;
  border-radius: 0px 0px 3px 3px;
  background-color: rgb(245, 248, 246);
  flex-direction: column;
  width: 100%;  
 
}

#searchOutput li {
  list-style: none;
  padding: 10px 10px;
  cursor: pointer;
  display:flex;
  flex-direction: row;
  font-size: 1.9em;
}

.StatDiv { 
 font-weight: 600;
 font-size: 1.5em;
 padding: 5px 10px;
 padding-left: 2%; 
}


@media (min-width: 769px) and (max-width: 1024px) {

  #searchbarParent {
    position: relative;
    width: 60vw;
    padding: 3.9em 1em 0.3em 1em;
  }

  .StatDiv { 
    font-size: 1.6em;
    padding-left: 15%; 
   }

   .checklistItem:first-child {
    border-top-style: none;
  }
  
  
}


/*........ Desktops ............*/
@media (min-width: 1025px) {
  #searchbarParent {
    position: relative;
    width: 51%;
    padding: 3.0em 1em 0.3em 1em;
  }

  .StatDiv { 
    font-size: 1.6em;
    padding-left: 25%; 
   }

}

