.circle {
      width: 24px;
      height: 24px;
      position: relative;
      border-radius: 50%;
      cursor: pointer;
      z-index: 2;
  }

  .circle-grey {
      background-color: var(--col-greys-l2);
  }
  .circle-green {
      background-color: var(--col-light-green);
  }
  .circle-red {
      background-color: var(--col-light-red);
  }

  .cross-a, .cross-b {
      content: '';
      position: absolute;
      width: 70%;
      right: 15%;
      height: 12%;
      top: 44%;
      background-color: var(--col-greys-l1);
      border-radius: 0;
      z-index: 0;
  }
  .cross-a {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      transform: rotate(45deg);
  }
  .cross-b {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      transform: rotate(-45deg);
  }

  .circle:hover {
      background-color: var(--col-greys-n);
  }
/*  .cross-a:hover, .cross-b:hover {
      background-color: var(--col-greys-n);
}*/