/* styles for the autofilling search suggesting box */
.search-suggestion {
  display: none;
}

.search-suggestion.active {
  left: 62px;
  right: 68px;
  display: flex; 
  position: fixed;
  width: auto;
  min-width: 200px;
  z-index: 997;
  background-color: var(--button-color);
  top: 56px;
  border-radius: var(--border-radius);
  flex-direction: column;
  justify-content: center;
  margin-bottom: calc(var(--padding));
  padding-bottom: calc(var(--padding) * 0.5); 
}
.search-option {
  margin-top: calc(var(--padding) * 0.5);
  padding-left: 8px;
  display: flex;
  width: 100%;
  border-radius: var(--border-radius);
  transition: 0.05s;
  cursor: pointer;
  padding-top: 4px;
  padding-bottom: 4px;
  border-radius: var(--border-radius);
  font-family: var(--font-family);
  /*margin-left: calc(var(--padding) * 0.5)*/
}
.search-option:hover {
  background-color: var(--button-hover-color);
}
.search-option:active {
  background-color: var(--button-color);
}
@media (min-width: 640px) { 
  .search-suggestion.active {
    left: 94px;
    right: 100px;
  }
}

/* Tablets */
@media (min-width: 768px) { 
  .search-suggestion.active {
    /*
    left: 223.1px;
    right: 284.51px;
    */
    left: 223.1px;
    right: 284.51px;
  }
}

/* Laptops and desktops */
@media (min-width: 974px) { 
  .search-suggestion.active {
    /*
    left: 223.1px;
    right: 284.51px;
    */
    left: calc(100% - 450px - 284.51px - (100% - 450px - 223.1px - 284.51px) / 2);
    right: calc(100% - 450px - 223.1px - (100% - 450px - 223.1px - 284.51px) / 2);
    max-width: 450px;
  }
}

/* Laptops and desktops */
@media (min-width: 1024px) { 
  .search-suggestion.active {
  }
}

/* Large screens and desktops */
@media (min-width: 1280px) { 
    
}

/* Ultra large screens and desktops */
@media (min-width: 1536px) { 
    
}