#qSearch {}
#srxForm {}
#srxEng {}
#srxEngImg {}
#srxBar {}
#srxClr {}
#srxBtn {}
#srxAuto {}


#qSearch {
  padding-top: 1%;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 1%;
  background-color: transparent;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 4;
}

#qSearch img {
  max-width: 100%;
  max-height: 100%;
}


#qSearch button {
  box-shadow: none;
}


#qSearch input, #qSearch button {
  border: none;
  border-radius: 0px;
  font-size: medium;
}

#srxForm {
  width: 800px;
  height: 45px;

  max-width: 100%;

  display: flex;
  align-items: center;

  overflow: hidden;
  border-radius: 5px;
  background-color: white;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

#srxEng img, #srxEngImg img, #srxBar img, #srxClr img, #srxBtn img {
  max-width: 100%;
  max-height: 100%;
}

#srxEng, #srxClr, #srxBtn {
  width: 70px;
  height: 100%;
}
#srxBtn { padding: 10px; }

#srxEng { background-color: transparent; padding: 5px; }
#srxEng:hover { background-color: crimson; }
#srxEng:active { background-color: crimson; }

#srxBtn { background-color: #802800; }
#srxBtn:hover { background-color: #802800; }
#srxBtn:active { background-color: #a16951; }

#srxClr {
  opacity: 0;
  padding: 15px;
  filter: invert(50%);
  background-color: transparent;
}

#srxBar {
  width: 100%;
  height: 100%;
  
  padding: 0px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: transparent;
}


/* =========================================== */
/* Search Engines Dropdown */
/* =========================================== */

#srxList {
  overflow: hidden;
  list-style: none;
  position: absolute;
  background-color: #43454a;

  width: 50px;
  max-width: 100%;
  transition: 0.15s;

  margin: 0px;
  padding: 0px;
  margin-top: 0.5rem;
  border-radius: 0.5rem;
}

#srxList li img {
  width:  100%;
  height: 100%;
  border-radius: 5rem;
  border: solid 2px white;
  background-color: transparent;
}

#srxList li {
  max-width: 100%;
  padding: 0.5rem;
  transition: 0.15s;
}

#srxList li:hover {
  background-color: #43454a;
}


/* =========================================== */
/* Autocomplete */
/* =========================================== */
#srxAuto {
  z-index: 1;
  
  width: 100%;
  margin: 0px;
  padding: 0px;
  max-height: 100%;
  
  list-style: none;
  position: fixed;

  overflow: hidden;
  margin-top: 0.25rem;
  border-radius: 0.25rem;
  background-color: white;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.srxAutoItem {
  text-align: left;
  font-size: medium;
  
  width: 100%;
  color: #371005;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0px;
  background-color: transparent;
  color: #2f4858;
}

.srxAutoItem .autoIcon {
  filter: invert(50%) brightness(50%) hue-rotate(335deg) saturate(300%) contrast(80%);
}

.autoIcon {
  width: 20px;
  height: 100%;
  padding: 0.5rem;
  vertical-align: middle;
  margin-right: 0.5rem;
}

.srxAutoItem:focus, .srxAutoItem:hover, 
.srxAutoItemNow .srxAutoItem, .srxAutoItemNow {
  background-color: #371005;
  cursor: pointer;
  color: white;
}

.srxAutoItem:focus, .srxAutoItem:hover .autoIcon,
.srxAutoItemNow .autoIcon {
  filter: invert(0%);
}

@media only screen and (max-width: 1050px) {
  #srxForm {
    width: 100%;
  }

  #qSearch {
    width: calc(100% - 2rem);
    padding: 1rem;
    display: inherit;
  }
}