.buttons .btn.active{
   background-color: var(--btn-bg);
    color: var(--primary-color);
    border: 1px solid var(--btn-border);
 }

.btn-outline-secondary {
   color: var(--primary-color);
    border: 1px solid var(--btn-border);
    font-size: var(--font-size-18);
}

.input-group .btn-outline-secondary {
   background-color: var(--btn-bg);
    color: var(--primary-color);
    border: 1px solid var(--btn-border);
}
.custom-search-bar {
  display: flex;
  align-items: center;
  background-color: var(--nav-active) !important;
    color: var(--primary-color);
    border: 1px solid var(--btn-border);
    border-radius: var(--border-radius-6);
  padding: 5px 8px;
  width: 300px;
  border-radius: var(--border-radius-6);
  background-color: var(--nav-active) !important;
}
.search-box {
  flex: 1;
  background-color: transparent;
  border: none;
  outline: none;
    color: var(--primary-color);
    font-size: var(--font-size-14);
  width: 30%;
}
.custom-search-bar:focus {
  border-color: white;     
  outline: none; 
}

.search-icon,
.clear-icon {
  font-size: 18px;
    color: var(--primary-color);
  cursor: pointer;
}
.buttons .btn{
    color: var(--primary-color);
}