slide-toggle {
  box-sizing: border-box;
  background: #f0f0f0;
  border: 0.05em solid #e0e0e0;
  cursor: pointer;
  width: 1.75em;
  height: 1em;
  position: static;
  display: inline-block;
  font-size: 2em;
  border-radius: 0.5em;
}

slide-toggle > .slideToggleButton {
  background: #f8f8f8;
  border-radius: 0.5em;
  height: 1em;
  position: relative;
  left: 0;
  top: -0.05em;
  width: 1em;
  box-shadow: 1px 0 2px 0 #bbb;
  transition: 0.1s ease-out;
}

slide-toggle.isOn {
  background: #37b737 linear-gradient(to bottom, #2c922c 0, #2c922c 20%, #37b737 100%);
  border-color: #37b737;
}

slide-toggle.isOn > .slideToggleButton {
  -ms-transform: translate(0.75em, 0);
  transform: translate(0.75em, 0);
  -webkit-transform: translate(0.75em, 0);
  -moz-transform: translate(0.75em, 0);
  -o-transform: translate(0.75em, 0);
  box-shadow: -1px 0 2px 0 #3f7952;
}