.switch {
  -webkit-transition: 0.3s ease-out all;
  background:         #fff;
  border:             1px solid #dfdfdf;
  border-radius:      20px;
  box-shadow:         rgb(223, 223, 223) 0px 0px 0px 0px inset;
  box-sizing:         content-box;
  cursor:             pointer;
  display:            inline-block;
  height:             30px;
  margin:             0px;
  overflow:           visible;
  padding:            0px;
  position:           relative;
  top:                -1px;
  transition:         0.3s ease-out all;
  width:              52px;
}

.switch small {
  -webkit-transition: 0.3s ease-out all;
  background:         #fff;
  border-radius:      100%;
  box-shadow:         0 1px 3px rgba(0,0,0,0.4);
  height:             30px;
  left:               0px;
  position:           absolute;
  top:                0px;
  transition:         0.3s ease-out all;
  width:              30px;
}

.switch .off {
  color:    #A9A9A9;
  display:  block;
  position: absolute;
  right:    10%;
  top:      25%;
  z-index:  0;
}

.switch .on {
  color:    #fff;
  display:  none;
  left:     9%;
  position: absolute;
  top:      25%;
  z-index:  0;
}

.switch .switch-text {
  font-size: 13px;
}

.switch.checked {
  background:   rgb(100, 189, 99);
  border-color: rgb(100, 189, 99);
}

.switch.checked .off {
  display: none;
}

.switch.checked .on {
  display: block;
}

.switch.checked small {
  left: 22px;
}

.switch.disabled {
  cursor: default !important;
}

.switch.disabled.checked {
  background:   #dfdfdf;
  border-color: #dfdfdf;
}

/* adding a wide width for larger switch text */
.switch.wide {
  width: 80px;
}

/* wider switch text moves small further to the right */
.switch.wide.checked small {
  left: 52px;
}