.z-switch *, .z-switch *:before, .z-switch *:after { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; }
.z-switch.z-switch-sm .z-switch--container { font-size: 0.65em; }
.z-switch.z-switch-lg .z-switch--container { font-size: 1.34em; }
.z-switch:hover { cursor: pointer; }
.z-switch .z-switch--container { position: relative; top: 0.15em; display: inline-block; width: 2em; height: 1em; border-radius: 0.5em; background-color: #FF6059; overflow: hidden; transition: 0.2s background-color; box-shadow: 0 0 0.1em 0 rgba(0, 0, 0, 0.5); }
.z-switch .z-switch--container .z-switch--slider { position: absolute; top: 5%; left: 2.5%; width: 45%; height: 90%; border-radius: 0.5em; background-color: #FEFEFE; box-shadow: 0 0 0.2em 0 rgba(0, 0, 0, 0.5); transform: translateX(0); transition: 0.2s transform; }
.z-switch .z-switch--container .z-switch--slider:before, .z-switch .z-switch--container .z-switch--slider:after { content: attr(data-on); color: #FEFEFE; display: block; position: absolute; top: 50%; transform: translateY(-50%); font-size: 0.45em; width: 100%; right: 105%; text-align: center; text-shadow: 0.05em 0.05em 0.1em rgba(0, 0, 0, 0.5); }
.z-switch .z-switch--container .z-switch--slider:after { content: attr(data-off); right: auto; left: 105%; }
.z-switch input[type=checkbox] { display: none; }
.z-switch input[type=checkbox]:checked + .z-switch--container { background-color: #2ACB41; }
.z-switch input[type=checkbox]:checked + .z-switch--container .z-switch--slider { transform: translateX(1em); }
.z-switch input[type=checkbox]:disabled + .z-switch--container { opacity: 0.3; }
.z-switch input[type=checkbox]:disabled + .z-switch--container:hover { cursor: not-allowed; }
.z-switch.z-switch-color1 .z-switch--container { background-color: #CCCCCC; }
.z-switch.z-switch-color1 .z-switch--container .z-switch--slider { background-color: #F4F4F4; }
.z-switch.z-switch-color1 input[type=checkbox]:checked + .z-switch--container { background-color: #03A9F4; }
.z-switch.z-switch-color2 .z-switch--container { background-color: #454846; }
.z-switch.z-switch-color2 .z-switch--container .z-switch--slider { background-color: #B4B6B5; }
.z-switch.z-switch-color2 input[type=checkbox]:checked + .z-switch--container { background-color: #454846; }
.z-switch.z-switch-square .z-switch--container { border-radius: 0.1em; }
.z-switch.z-switch-square .z-switch--container .z-switch--slider { border-radius: 0.05em; }
.z-switch.z-switch-tictac .z-switch--container { border-radius: 0.5em 0.1em; }
.z-switch.z-switch-tictac .z-switch--container .z-switch--slider { border-radius: 0.45em 0.05em; }