Checkbox usando mo.js

Olá :) tenho dois checkboxes que ao serem clicados, o da esquerda marca com "v"de check, o fundo e a borda ficam verdes e saem coisinhas verdes dele, usando o mo.js, ele está ok. Queria que o da direita, ao ser clicado, ficasse com o fundo vermelho e mostrasse um X e que as coisinhas que saem dele, fossem vermelhas :}

Como eu faço o css? hoje está assim

[...]
input[type="checkbox"] {
  position: absolute;
  visibility: hidden;
  width: 60px;
  height: 60px;
  z-index: 2;
}

.checkbox {
  position: relative;
  float:left;
}

input[type="checkbox"]:checked + label + {
  border: 10px solid #3d9970;
  animation: confirm 0.15s linear;
}

input[type="checkbox"]:checked + label:after {
  content: '\f00c';
  font-family: FontAwesome;
  font-size: 35px;
  line-height: 50px;
  width: 50px;
  height: 50px;
  background: #2ECC40;
  position: absolute;
  top: 0px;
  left: 0px;
  color: #ffffff;
}

@keyframes confirm {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.95)
  }

  75% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1);
  }
}

JS

const square = new mojs.Shape({
    radius: 70,
    radiusY: 70,
    shape: 'rect',
    stroke: '#2ECC40',
    strokeWidth: {10: 50},
    fill: 'none',
    scale: {0.45 : 0.55},
    opacity: {1: 0},
    duration: 350,
    easing: 'sin.out',
    isShowEnd: false,
});

const lines = new mojs.Burst({
  left: 0, top: 0,
  radius:   { 35: 75 },
  angle:    0,
  count: 8,
  children: {
    shape:        'line',
    radius:       10,
    scale:        1,
    stroke:       '#2Ecc40',
    strokeDasharray: '100%',
    strokeDashoffset: { '-100%' : '100%' },
    duration:     700,
    easing:       'quad.out',
  }
});
const check = document.querySelector('#check');
let checked = check.checked;

function fireBurst(e) {
  if (!checked) {
    const pos = this.getBoundingClientRect();

    const timeline = new mojs.Timeline({ speed: 1.5 });

    timeline.add(square, lines);

    square.tune({
      'left': pos.left + 35,
      'top': pos.top + 35
    });
    lines.tune({
      x: pos.left + 35,
      y: pos.top + 35
    });

    if ("vibrate" in navigator) {
      navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;

      navigator.vibrate([100, 200, 400]);
    }

    timeline.play();
  }
  checked = !checked;

} 

check.addEventListener('click', fireBurst);

Criei uma nova div pro checkbox da direita, com id e label diferentes e também um segundo burst pra quando for tudo vermelho, mas tá bem esquisito e claro, continua ficando verde, quando clico.

Obrigada!