.search-bar {
  background: rgb(0, 0, 0, 0.8);
  display: flex;
  width: 350px;
  max-height: 0;
  border: 1px solid rgb(0, 0, 0, 0.8);
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  z-index: 0;
  position: relative;
  animation: search 0.2s linear forwards;
}
@keyframes search {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    max-height: 42px;
  }
}
.search-bar input {
  width: 88%;
  height: 42px;
  padding-left: 16px;
  padding-right: 48px;
}
.btn-clear {
  position: absolute;
  right: 62px;
  z-index: 999;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  height: 16px;
}
.btn-search {
  background: rgb(0, 0, 0, 0.8);
  cursor: pointer;
  display: flex;
  background: transparent;
  align-items: center;
  justify-content: center;
  width: 12%;
  height: 42px;
}
.fa-search {
  color: #fff;
}
.fa-circle-xmark {
  color: #808080;
}
.fa-circle-notch{
 color: #fff;
 font-size: 18px;
}

@media only screen and (max-width: 600px) {
  .search-bar {
    width: 100%;
    margin-top: 16px;
  }
  .base-search {
    display: flex;
    width: 100%;
  }
}
@media screen and (min-width: 480px) and (max-width: 600px){
  .btn-clear {
    right: 80px !important; 
  }
}