body {
  font-family: "Roboto", sans-serif;
  text-align: center;
}

h5 {
  margin-bottom: 15px;
}

.chb {
  visibility: hidden;
}

.chb + label {
  position: relative;
  padding-left: 5px;
}

.chb-1 + label::before {
  position: absolute;
  
  width: 16px;
  height: 16px;
  background-color: #16a085;
  border-radius: 3px;
  content: "";
  
  top: 4px;
  left: -20px;
  padding-bottom: 5px;
  
  font-size: 11px;
  text-align: center;
  font-weight: bolder;
}

.chb-2 + label::before {
  position: absolute;
  width: 30px;
  height: 30px;
  
  background-image: url(https://img.icons8.com/bubbles/100/000000/unchecked-checkbox.png);
  background-size: cover;
/*   backgroun-position: center center; */
  content: " ";
  
  left: -28px;
  top: -2px;
  
}

.chb-1:checked + label::before {
  color: white;
  content: '\2713';
}

.chb-2:checked + label::before {
  background-image: url(https://img.icons8.com/bubbles/100/000000/checked-checkbox.png)
}

.chb-3 + label::before {
  position: absolute;
  left: -20px;
  top: 4px;
/*   text-align: center; */
  
  border: 2px solid #3498db;
  content: " ";
  width: 16px;
  height: 16px;
  
  transition: all 0.1s ease-in,  border-color 0.05s ease-in;
}

.chb-3:checked + label::before {
  transform: rotate(40deg);
  border-top-color: transparent;
  border-left-color: transparent;
  
  top: 2px;
  left: -15px;
  width: 7px;
  height: 14px;
}