.custom-switch {
    display: inline-block;
    position: relative;
    cursor: pointer;
  }

  .custom-switch-input {
    display: none;
  }

  .custom-switch-label {
    position: relative;
    display: block;
    width: 40px; /* width of the switch */
    height: 20px; /* height of the switch */
    background-color: #ccc; /* background color of the switch */
    border-radius: 20px; /* roundness of the switch */
    transition: background-color 0.3s;
    cursor: pointer;
  }

  .custom-switch-input:checked + .custom-switch-label {
    background-color: #1bb99a; /* background color when switch is on */
  }

  .custom-switch-label::before {
    content: '';
    position: absolute;
    top: 1px; /* vertical positioning */
    left: 1px; /* horizontal positioning */
    width: 18px; /* width of the knob */
    height: 18px; /* height of the knob */
    background-color: white; /* color of the knob */
    border-radius: 50%; /* roundness of the knob */
    transition: transform 0.3s;

  }

  .custom-switch-input:checked + .custom-switch-label::before {
    transform: translateX(20px);
  }