.switch-box {
  margin-top: 2px;
  margin-right: 20px;
}

  .switch-box .toggle {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 20px;
  }

    .switch-box .toggle input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .switch-box .toggle span {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: transparent;
      border: 1px solid white;
      -webkit-transition: .2s;
      transition: .2s;
      border-radius: 34px;
    }

      .switch-box .toggle span:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: -1px;
        top: -1px;
        background-color: transparent;
        border: 1px solid white;
        -webkit-transition: .2s;
        transition: .2s;
        border-radius: 50%;
      }

    .switch-box .toggle input:checked + span {
      background-color: transparent;
    }

      .switch-box .toggle input:checked + span:before {
        -webkit-transform: translateX(22px);
        -ms-transform: translateX(22px);
        transform: translateX(22px);
        background-color: white;
      }