Custom css style for elementor form checkbox

custom-checkbox-style.scss

<style>
.elementor-form-fields-wrapper {
    

/* Style for normal state */
input[type="checkbox"] {
  -webkit-appearance: none; /* Removes default checkbox style */
  -moz-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
top: 3px;
display: inline-block!important;
  border-radius: 3px; /* Rounded corners */
  cursor: pointer;
  outline: none;
  background-color: #EBEBEB; /* White background */
  position: relative;
}

/* Style for checked state */
input[type="checkbox"]:checked {
  
  background-color: #2CC4BD; /* Purple background */
}

input[type="checkbox"]:checked::after {
  content: ""; /* Add a checkmark or styling effect */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: white; /* White checkmark background */
  border-radius: 2px; /* Rounded checkmark */
}
}
</style>