Bootstrap Vue change active button color

I'm using bootstrap with Vue.js.

I have a form-checkbox-group like this

      <b-form-group label="Select flow" v-slot="{ ariaDescribedby }">
        <b-form-checkbox-group
          v-model="selected"
          :options="options"
          :aria-describedby="ariaDescribedby"
          buttons
          button-variant="primary"
          size="lg"
          name="buttons-2"
        ></b-form-checkbox-group>
      </b-form-group>

I would like the selected button to be set to a specific color (rathen than it being just a little bit darker).

I tried adding the code below but unfortunately it doesn't work

.active {
  background: rgb(243, 16, 0) !important;
}

Full code here:

<template>
  <div class="Overview">
          <b-form-group label="Select flow" v-slot="{ ariaDescribedby }">
        <b-form-checkbox-group
          v-model="selected"
          :options="options"
          :aria-describedby="ariaDescribedby"
          buttons
          button-variant="primary"
          size="lg"
          name="buttons-2"
        ></b-form-checkbox-group>
      </b-form-group>
    </div>
  </div>
</template>

<script>
export default {
  name: "Control",
  data() {
    return {
      selected: "F1_Water",
      options: [
        { value: "F1_Water", text: "Water" },
        { value: "F1_Clean", text: "Cleaning solution" },
        { value: "F1_None", text: "None" }
      ]
    };
  }
};
</script>

<style>
.active {
  background: rgb(243, 16, 0) !important;
}
</style>