.sf-checkbox {
    display: inline-block;
    position: relative;
    cursor: pointer;
    user-select: none;
  }
  
  /* Hide the default checkbox */
  .sf-checkbox input[type="checkbox"] {
    visibility: hidden;
    position: absolute;
  }
  
  .sf-checkbox .sf-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    background-color:  rgb(250, 250, 250);
    /*border: 0.5px solid #ddd;  Border of the outer square */
  }
  
  /* Style for when the checkbox is checked */
  .sf-checkbox input[type="checkbox"]:checked ~ .sf-checkmark{
    background-color: #2195f30e;
  }
  .sf-checkmark:hover{
    background-color: #63636411;
  }
  .sf-checkbox input[type="checkbox"] ~ .sf-checkmark>.sf-checkmark-inner {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    padding: 0px;
    border: 1.7px solid #ddd; /* Border color of the inner square */
  }
  .sf-checkbox input[type="checkbox"]:checked ~ .sf-checkmark>.sf-checkmark-inner {
    background: #005194;
    border: 1.7px solid #86abfb; /* Border color of the inner square */
  }