.switch {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  margin: 3px 0;
}

.switch .ios-switch {
  height: 35px;
  width: 65px;
}

.switch .ios-switch .handle {
  height: 31px;
  width: 31px;
}

.switch.switch-primary .ios-switch .on-background {
  background: #ccc;
}

.switch.switch-success .ios-switch .on-background {
  background: #47a447;
}

.switch.switch-warning .ios-switch .on-background {
  background: #ed9c28;
}

.switch.switch-danger .ios-switch .on-background {
  background: #dc3545;
}

.switch.switch-info .ios-switch .on-background {
  background: #5bc0de;
}

.switch.switch-dark .ios-switch .on-background {
  background: #171717;
}

.switch.switch-lg .ios-switch {
  height: 45px;
  width: 75px;
}

.switch.switch-lg .ios-switch .handle {
  height: 41px;
  width: 41px;
}

.switch.switch-sm .ios-switch {
  height: 25px;
  width: 55px;
}

.switch.switch-sm .ios-switch .handle {
  height: 21px;
  width: 21px;
}

.ios-switch {
  height: 45px;
  width: 75px;
  position: relative;
  background-color: #e5e5e5;
  border-radius: 100px;
  backface-visibility: hidden;
}

.ios-switch .background-fill {
  width: 100%;
  height: 100%;
  border-radius: 100px;
  position: absolute;
  left: 0;
  top: 0;
}

.ios-switch .on-background {
  background-image: linear-gradient(#00e459, #00e158);
  opacity: 0;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  filter: alpha(opacity=0);
  z-index: 1;
  transition: 0.3s 0.2s;
}

.ios-switch .state-background {
  border-radius: 100px;
  z-index: 2;
  background-image: linear-gradient(#ffffff, #fdfdfd);
  border: 2px solid #e5e5e5;
  box-sizing: border-box;
  transform: scale(1);
  transition: 0.4s;
}

.ios-switch .handle {
  width: 41px;
  height: 41px;
  background-color: white;
  top: 2px;
  left: 2px;
  position: absolute;
  border-radius: 20px;
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.075), 0 3px 5px rgba(0, 0, 0, 0.15),
    1px 2px 2px rgba(0, 0, 0, 0.05);
  z-index: 3;
  transition: transform 0.3s 0.25s cubic-bezier(0.455, 0.03, 0.215, 1.33);
  box-sizing: content-box;
}

.ios-switch.off .handle {
  animation: expand-off 0.3s 0.2s;
  transform: translate(0px, 0);
  transform: translate3d(0px, 0, 0);
}

.ios-switch.off .on-background {
  transition: 0.3s 0s;
}

.ios-switch.off .state-background {
  transition: 0.4s 0.25s;
}

.ios-switch.on .handle {
  animation: expand-on 0.3s 0.2s;
  transform: translate(30px, 0);
  transform: translate3d(30px, 0, 0);
}

.ios-switch.on .on-background {
  opacity: 1;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);
}

.ios-switch.on .state-background {
  transform: scale(0);
}

@keyframes expand-on {
  0% {
    padding-right: 0;
  }

  40% {
    padding-right: 9px;
  }

  100% {
    padding-right: 0;
  }
}

@keyframes expand-off {
  0% {
    padding-right: 0;
    left: 2px;
  }

  40% {
    padding-right: 9px;
    left: -7px;
  }

  100% {
    padding-right: 0;
    left: 2px;
  }
}