.ui-switch { margin: 7px auto;-webkit-appearance: none;outline: 0;border: none;cursor: pointer;position: relative;display: block;width: 51px;height: 31px;border-radius: 15px;background-color: #ddd;transition: .6s ease; }
.ui-switch:before { content: "";z-index: 100;display: block;width: 47px;height: 27px;position: absolute;right: 2px;top: 2px;border-radius: 15px;background-color: white;transition: .4s ease; }
.ui-switch:after { content: "";z-index: 200;position: absolute;left: 2px;top: 2px;width: 27px;height: 27px;background-color: white;border-radius: 29px;box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.35), 0px 4px 5px rgba(0, 0, 0, 0.15);transition: .4s ease; }
.ui-switch:checked { background-color: #43b33f; }
.ui-switch:checked.default { background-color: #43b33f; }
.ui-switch:checked:before { width: 12px;height: 0px;top: 15px;right: 15px; }
.ui-switch:checked:after { left: 22px; }
.ui-switch:checked:active:after { margin-left: -5px; }
.ui-switch:active:after { padding-left: 5px; }
.ui-switch:hover:after { width:32px;padding-left: 5px; }
.ui-switch:checked:hover:after { margin-left: -5px; }