.toggle {
  display: inline-block;
  background-color: #5bb75b;
  background-image: -ms-linear-gradient(top,#62c462,#51a351);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#62c462),to(#51a351));
  background-image: -webkit-linear-gradient(top,#62c462,#51a351);
  background-image: -o-linear-gradient(top,#62c462,#51a351);
  background-image: -moz-linear-gradient(top,#62c462,#51a351);
  background-image: linear-gradient(top,#62c462,#51a351);
  border-radius: 4px;
  -moz-border-radius: 4px;
  border: 1px solid #555;
  border-color: #51a351 #51a351 #387038;
  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
  width: 40px;
  position: relative;
  bottom: -2px;
  height: 18px;
  margin-left: 30px; /* can be removed if wanted */
  float: right;
  margin: 10px;
}

.toggle:before {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}

.toggle.disabled {
  background-color: #f5f5f5;
  background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
  background-image: -ms-linear-gradient(top,#fff,#e6e6e6);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
  background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
  background-image: -o-linear-gradient(top,#fff,#e6e6e6);
  background-image: linear-gradient(top,#fff,#e6e6e6);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#e6e6e6',GradientType=0);
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
  *background-color: #e6e6e6;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

.toggle.disabled:after {
  color: #555;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}

.toggle.danger,
.toggle.disabled-danger {
  background-color: #da4f49;
  background-image: -moz-linear-gradient(top,#ee5f5b,#bd362f);
  background-image: -ms-linear-gradient(top,#ee5f5b,#bd362f);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#ee5f5b),to(#bd362f));
  background-image: -webkit-linear-gradient(top,#ee5f5b,#bd362f);
  background-image: -o-linear-gradient(top,#ee5f5b,#bd362f);
  background-image: linear-gradient(top,#ee5f5b,#bd362f);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b',endColorstr='#bd362f',GradientType=0);
  border-color: #bd362f #bd362f #802420;
  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
  *background-color: #bd362f;
}

.toggle.disabled.disabled-danger:after {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}

.toggle:before,
.toggle:after {
  padding-left: 12px;
  line-height: 18px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: .4px;
}

.toggle:before {
  content: "ON";
  content: attr(data-enabled);
  padding-left: 9px;
}

.toggle.disabled:before {
  content: "";
  padding-left: 60px;
}

.toggle.disabled:after {
  content: "OFF";
  content: attr(data-disabled);
}

.toggle .check {
  display: block;
  width: 20px;
  height: 18px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  background-color: #f5f5f5;
  background-image: -ms-linear-gradient(top,#fff,#e6e6e6);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
  background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
  background-image: -o-linear-gradient(top,#fff,#e6e6e6);
  background-image: linear-gradient(top,#fff,#e6e6e6);
  background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
  border: 1px solid #ccc;
  border-color: #ccc;
  border-color: rgba(0,0,0,0.02) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
  position: absolute;
  top: -1px;
  left: -1px;
}

.toggle .check:hover {
  cursor: pointer;
}

@-webkit-keyframes labelON {
	0% { top: -1px; left: -1px; }
	100% { top: -1px; left: 20px; }
}

@-webkit-keyframes labelOFF {
	0% { top: -1px; left: 20px; }
	100% { top: -1px; left: -1px; }
}

@-moz-keyframes labelON {
	0% { top: -1px; left: -1px; }
	100% { top: -1px; left: 20px; }
}

@-moz-keyframes labelOFF {
	0% { top: -1px; left: 20px; }
	100% { top: -1px; left: -1px; }
}

@keyframes labelON {
	0% { top: -1px; left: -1px; }
	100% { top: -1px; left: 20px; }
}

@keyframes labelOFF {
	0% { top: -1px; left: 20px; }
	100% { top: -1px; left: -1px; }
}

.toggle input[type=checkbox] {
  display: none
}

.toggle input[type=checkbox]:checked + label.check {
  top: -1px; left: 20px;
  -webkit-box-shadow: rgba(0,0,0,0.05) -1px 0 2px;

	-webkit-animation-name: labelON;
  -webkit-animation-duration: .2s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
}

.toggle input[type=checkbox] + label.check {
  top: -1px; left: -1px;
  -webkit-box-shadow: rgba(0,0,0,0.05) 1px 0 2px;

	-webkit-animation-name: labelOFF;
  -webkit-animation-duration: .2s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
}