input[type="checkbox"]::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='transparent'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

input[type="checkbox"]:checked::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='%23222831'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

.edit-btn {
  background-color: rgba(217, 119, 6, 25%);
}

.del-btn {
  background-color: rgba(220, 38, 38, 25%);
}

#del-all-btn {
  background-color: rgba(220, 38, 38, 25%);
}

#del-all-btn:hover {
  background-color: rgba(220, 38, 38, 50%);
}

#add-btn {
  background-color: rgba(0, 173, 181, 25%);
}

#add-btn:hover {
  background-color: #00adb5;
}

.sub-task::after {
  content: "";
  position: absolute;
  border-top: 2px solid #00adb5;
  padding: 15px 10px 10px 10px;
  top: 8px;
  left: -20px;
}