/* Style for the custom checkbox container */
.checkbox-container {
	display: inline-block;
	position: relative;
	width: 20px;
	height: 20px;
	background-color: white;
	border-radius: 4px;
}

/* Style for the actual checkbox input (hidden) */
.checkbox-container input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Style for the custom checkbox appearance */
.checkbox-container .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	background-color: white; /* Default background color */
	border-radius: 3px;
	border: 2px solid black;
}

/* Change the custom checkbox background to blue when checked */
.checkbox-container input[type="checkbox"]:checked ~ .checkmark {
	background-color: #0065DC;
	border: 2px solid #0065DC;
}

/* Optionally, you can add a checkmark symbol when checked */
.checkbox-container .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox-container input[type="checkbox"]:checked ~ .checkmark:after {
  display: block;
}

.checkbox-container .checkmark:after {
  left: 7px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}