Custom color on checkbox button bootstrap

Question

Im trying to get custom colors on my checkbox buttons in bootstrap 4 and MBD 5. I've managed to change the color on some of the parts, but cannot manage to change the color when its toggled and when i toggled it once and tries to turn it off it doesn't change back to my primary color on the button until i click somewhere else on the page. My code for the buttons is below.

<div class="form-group">
  <h2>Heading</h2>                
    <div class="btn-group-toggle" data-toggle="buttons">
      <input type="checkbox" class="btn-check" id="risk1" autocomplete="off" onclick="myFunction(this.id)">
      <label class="btn btn-primary col" for="risk1">Checkbox 1</label>
    </div>

    <div class="btn-group-toggle" data-toggle="buttons">
      <input type="checkbox" class="btn-check" id="risk2" autocomplete="off" onclick="myFunction(this.id)">
      <label class="btn btn-primary col" for="risk2">Checkbox 2</label>
    </div>
</div>

The code i use in my CSS to change the color of the buttons is below.

.btn-primary{color:#fff;background-color:#007b4e;border-color:#007b4e}
.btn-primary:hover{color:#fff;background-color:#08402b;border-color:#08402b}
.btn-primary:focus,.btn-primary.focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}
.btn-primary.disabled,
.btn-primary:disabled{color:#fff;background-color:#08402b;border-color:#08402b}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#08402b}
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}

The onclick function is because every checkbox is going to show a text if its checked or not.

Here's a link where you can see my problem https://www.codeply.com/p/41wATHNgm8 . I want the dark green that you see when you hover to stay when its toggled not blue as it is now and back to the light green when you untoggle it.

Answer 1

Fixed it!

Added input[type=checkbox]:checked + label{ background-color: #08402b; } input[type=checkbox]:checked + label{ background-color: #08402b; } into the css file and changed from btn-primary to btn-custom.