input[type="checkbox"] {
  display: block;
  visibility: hidden;
  height: 0;
  width: 0;
  position: absolute;
  overflow: hidden;
}

input[type="checkbox"]:hover + svg path {
  fill: none;
}

input[type="checkbox"]:hover + svg rect {
  fill: rgba(217, 217, 217, 0.4);
  stroke: black;
}

input[type="checkbox"]:checked + svg path {
  fill: white;
}

input[type="checkbox"]:checked + svg rect {
  fill: #ff9e3e;
  stroke: #ff9e3e;
}

input[type="checkbox"]:checked:hover + svg path,
input[type="checkbox"]:checked:active + svg path {
  fill: white;
}

input[type="checkbox"]:checked:hover + svg rect,
input[type="checkbox"]:checked:hover + svg rect {
  fill: #ffa954;
  stroke: #ffa954;
}