body {
  background-color: #0f0f0f;
  font-family: "Roboto", "Arial", sans-serif;
}

#search-field-wrapper {
  width: 500px;
  max-width: 100%;
}

.badge {
  cursor: pointer;
}

.create {
  background-color: #484848;
  padding: 10px;
}

.create:hover {
  background-color: #5f5e5e;
  padding: 10px;
}

.fa-microphone {
  border-radius: 50%;
  background-color: #484848;
  padding: 10px;
}

.fa-microphone:hover {
  border-radius: 50%;
  background-color: #5f5e5e;
  padding: 10px;
}

.fa-bell {
  padding: 10px;
}

.fa-bell:hover {
  border-radius: 50%;
  background-color: #5f5e5e;
  padding: 10px;
}

.frosted-glass {
  background-color: rgba(15, 15, 15, 0.7);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}

#button-addon2 {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

@media screen and (max-width: 768px) {
  #search-field-wrapper {
    width: 95%;
    padding: 0 10px;
    margin: auto;
  }
}

/* Replacing bootstrap class styles */
.bg-body-tertiary {
  background-color: #0f0f0f !important;
}