.checkbox-switch-wrapper .checkbox-switch {
    appearance: none;
    background-color: #dfe1e4;
    border-radius: 72px;
    border-style: none;
    flex-shrink: 0;
    height: 20px;
    margin: 0;
    position: relative;
    width: 30px;
  }

  .checkbox-switch-wrapper .checkbox-switch::before {
    bottom: -6px;
    content: "";
    left: -6px;
    position: absolute;
    right: -6px;
    top: -6px;
  }

  .checkbox-switch-wrapper .checkbox-switch,
  .checkbox-switch-wrapper .checkbox-switch::after {
    transition: all 100ms ease-out;
  }

  .checkbox-switch-wrapper .checkbox-switch::after {
    background-color: #fff;
    border-radius: 50%;
    content: "";
    height: 14px;
    left: 3px;
    position: absolute;
    top: 3px;
    width: 14px;
  }

  .checkbox-switch-wrapper input[type=checkbox] {
    cursor: default;
  }

  .checkbox-switch-wrapper .checkbox-switch:hover {
    background-color: #c9cbcd;
    transition-duration: 0s;
  }

  .checkbox-switch-wrapper .checkbox-switch:checked {
    background-color: #6e79d6;
  }

  .checkbox-switch-wrapper .checkbox-switch:checked::after {
    background-color: #fff;
    left: 13px;
  }

  .checkbox-switch-wrapper :focus:not(.focus-visible) {
    outline: 0;
  }

  .checkbox-switch-wrapper .checkbox-switch:checked:hover {
    background-color: #535db3;
  }