.ff-small {
  width: 25px;
  height: 25px;
}

.ff-film {
  display:inline;
  -webkit-mask: url('../fonts/film.svg') no-repeat center / contain;
  mask: url('../fonts/film.svg') no-repeat center / contain;
  background-color: #121212; /* default */
}

.ff-film2 {
  display: block;
  width: 65px;
  height: 65px;
  background-color: var(--hq-primary-color);
  -webkit-mask: url('../fonts/film.svg') no-repeat center / contain;
  mask: url('../fonts/film.svg') no-repeat center / contain;
  z-index: 10;
}

.ff-film.green {
  background-color: #64D044; /* Your overlay color */
}

.ff-users {
  -webkit-mask: url('../fonts/users.svg') no-repeat center / contain;
  mask: url('../fonts/users.svg') no-repeat center / contain;
  background-color: #121212; /* default */
}

.ff-users.green {
  background-color: #64D044; /* Your overlay color */
}

.ff-locations {
  -webkit-mask: url('../fonts/map-pin.svg') no-repeat center / contain;
  mask: url('../fonts/map-pin.svg') no-repeat center / contain;
  background-color: #121212; /* default */
}

.ff-locations.blue {
  background-color: #00C2FF; /* Your overlay color */
}

.ff-clapperboard {
  -webkit-mask: url('../fonts/clapperboard.svg') no-repeat center / contain;
  mask: url('../fonts/clapperboard.svg') no-repeat center / contain;
  background-color: #121212; /* default */
}

.ff-clapperboard.yellow {
  background-color: #fec107; /* Your overlay color */
}