/* 
    Created on : 18 mar. 2026, 16:17:01
    Author     : mario.moreno
*/

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

/* Create a custom checkbox base */
.checkmark {
  display: inline-block;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border-radius: 4px;
  border: 2px solid #FF8301;
  vertical-align: middle;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
  background-color: #ddd;
}

/* Style the background when checked */
.checkbox-container input:checked ~ .checkmark {
  background-color: #FF8301; /* Green color */
  border-color: #FF8301;
}

/* Create the checkmark (hidden when not checked) */
.checkmark:after {
  content: "";
  display: none;
}

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

/* Style the checkmark (the "L" shape) */
.checkbox-container .checkmark:after {
  margin-left: 6px;
  margin-top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}