.search-box{
  padding:10px 20px;
  border-top:1.5px solid #384153;
  border-left:1.5px solid #384153;
  border-bottom:1.5px solid #384153;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  background-color:#171b24;
  color:#f7f9ff;
}
.search-icon{
  border-top:1.5px solid #384153;
  border-right:1.5px solid #384153;
  border-bottom:1.5px solid #384153;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  background-color:#c2407c; color:#fff;
}
.search-icon:hover{
  border-top:1.5px solid #384153;
  border-right:1.5px solid #384153;
  border-bottom:1.5px solid #384153;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  background-color:#d75791; color:#fff;
}
.form-control:focus{
  box-shadow:none;
  border-top:1.5px solid #c2407c;
  border-left:1.5px solid #c2407c;
  border-bottom:1.5px solid #c2407c;
  border-right:0px;
  background-color:#171b24;
  color:#f7f9ff;
}
.box-result{
  border:1px solid #384153;
  background-color:#171b24;
  color:#d8deea;
}
.btn-category{
  padding:2px 5px 2px 5px;
  border:1px solid #384153;
  margin-bottom: 10px;
  color:#e8edf6;
}

.list-group-item{
  cursor: pointer;
  background-color:#171b24;
  border-color:#384153;
  color:#d8deea;
}

.btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.list-group-item.active {
    z-index: 2;
    color: var(--bs-list-group-active-color);
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

#loading{
  height:50vh;margin-top:10%;margin-bottom:10%;
  color: var(--accent-color);

}

.list-group-item {
  padding:4px 12px;
}

#Search::-ms-clear{
   margin-right:20px
}

@media (max-width: 767px) {
  .list-group-item {
      padding:2px 5px;
      font-size: 13px;
    }

}