.custom-checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #ff0000; /* This is a red color */
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.custom-checkbox input {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
}
 /* Create a custom checkbox */
.custom-checkbox .checkmark {
  position: relative;
  display: inline-block;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #FFF;
  border: 2px solid #cc15cd;
  z-index: -1;
}


/* Create the checkmark */
.custom-checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid #cc15cd;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/*

/* Show the checkmark when the checkbox is checked */
.custom-checkbox input:checked ~ .checkmark:after {
  display: block;
}

/* Change the background color when the checkbox is checked */
.custom-checkbox input:checked ~ .checkmark {
  background-color: #ffd2ff;
  border: solid black;
}

.custom-checkbox input:checked ~ .checkmark1 {
    color: #cc15cd;
    font-size: x-large;
}