/* Hide the original checkbox */
input.check {
  display: none;
}

/* Style for the custom checkbox */
span.check {
  border-radius: 2px;
  border-style: solid;
  border-width: 2px;
  clear: both;
  content: "";
  display: inline-block;
  height: 16px;
  position: relative;
  vertical-align: -2px;
  width: 16px;
  margin-right: .5rem;
  transition: background-color 0.18s cubic-bezier(0.6,0,0.1,1), border-color 0.18s cubic-bezier(0.6,0,0.1,1);
}

/* Wrapper for checkbox */
.wrapper {
  position: relative;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

/* Label styling within wrapper */
.wrapper label {
  display: block;
  padding: 12px 0 12px 48px;
  cursor: pointer;
}

/* Hide original checkbox in wrapper */
.wrapper input {
  height: 40px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 40px;
}

/* Custom checkbox border styling */
.wrapper input + label::before {
  content: "";
  border-radius: 2px;
  border-style: solid;
  border-color: #b6cfdb;
  border-width: 2px;
  display: inline-block;
  height: 16px;
  width: 16px;
  position: absolute;
     left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* Center the element */
    text-align: center;
  margin-right: .5rem;
  transition: background-color 0.18s cubic-bezier(0.6,0,0.1,1), border-color 0.18s cubic-bezier(0.6,0,0.1,1);
}

/* Custom checkmark symbol */
.wrapper input + label::after {
  content: "\f00c"; /* Font Awesome checkmark */
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  font-size: .9rem;
  color: transparent;
  position: absolute;
  width: 16px;
  height: 16px;
  display: flex;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* Center the element */
    text-align: center;
  justify-content: center;
  align-items: center;
  transition: color 0.18s cubic-bezier(0.6,0,0.1,1);
  border-radius: 2px;
}

/* Change color when checked */
.wrapper input:checked + label::after {
  background-color: #b6cfdb;
  color: white;
}

/* Custom checkbox border color when checked */
.custom-checkbox:checked + label::before {
  background-color: transparent;
  border-color: #b6cfdb;
}

/* Add focus effect on checkbox */
.wrapper input:focus + label::before {
  box-shadow: 0 0 0 .5px #ffbf47;
  outline: .5px solid transparent;
}

/* Change color on hover when checked */
.wrapper input + label:hover::before, .wrapper input:checked + label:hover::after {
  border-color: #455A64;
}
.wrapper input:checked + label:hover::after {
  background-color: #455A64;
}