/* Hide the default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom checkbox container */
.checkbox-container {
  position: relative;
  display: inline-block;
  font-size: 18px; /* Make the checkbox slightly bigger */
  margin-bottom: 12px;
  cursor: pointer;
}

/* Style the checkmark */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px; /* Make the checkbox slightly bigger */
  width: 30px; /* Make the checkbox slightly bigger */
  border: 2px solid #2196f3; /* Default color for the box */
  border-radius: 6px; /* Round the corners */
  background-color: #2196f3; /* Default color for the box */
  transition: all 0.3s ease; /* Add smooth transition */
}

/* Show the checkmark when checkbox is checked */
.checkbox-container input:checked ~ .checkmark:after {
  display: block;
  animation: checkboxExpand 0.3s ease forwards;
}

/* Style the checkmark/indicator */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%) rotate(45deg) scale(0); /* Center and hide initially, then scale to appear */
  width: 8px; /* Adjust size */
  height: 15px; /* Adjust size */
  border: solid #fff; /* Change color of the tick to white */
  border-width: 0 3px 3px 0; /* Adjust thickness and direction */
}

/* On hover, add a lighter blue background color */
.checkbox-container:hover .checkmark {
  background-color: #64b5f6;
}

/* When the checkbox is checked, add a black background */
.checkbox-container input:checked ~ .checkmark {
  background-color: #000;
  border-color: #000; /* Change border color */
}

/* When the checkbox is checked, change the tick color to blue */
.checkbox-container input:checked ~ .checkmark:after {
  border-color: #2196f3; /* Change tick color to blue */
}

/* Keyframes for expanding animation */
@keyframes checkboxExpand {
  0% {
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
  }
}