Instant Search Template Wordpress Category Level CSS

Hello. I am just getting started with Algolia in WordPress and looking for some guidance here. I am attempting to customize the Instant Search template by including the post category and then styling the category with a different color based on the category name. This styling works fine in my normal WP Search template, but the Instant Search template isn’t playing nice with the WP category-name class.

Yes, instant search.php is in my child theme and otherwise working fine.

Any suggestions? Thanks in advance.

 <span class="alg-cats" style="">{{ data.taxonomies.category }}</span>

CSS

  .category-blue .alg-cats::before {
  color: blue;
  content: ".";
  font-size: 14px;
  background-color: #DA552F;
  margin-right: 3px;
  max-width: 10px;
}

.category-red .alg-cats::before {
  color: red;
  content: ".";
  font-size: 14px;
  background-color: #DA552F;
  margin-right: 3px;
  max-width: 10px;
}


.category-green .alg-cats::before {
  color: green;
  content: ".";
  font-size: 14px;
  background-color: #DA552F;
  margin-right: 3px;
  max-width: 10px;
}