.switch { position: relative; display: inline-block; width: 33px; height: 17px; margin-right: 0.4em; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: 0.5s; transition: 0.5s; border-radius: 18px; display:inline; }
.slider::before { position: absolute; content: ""; height: 10px; width: 10px; left: 4px; bottom: 4px; background-color: #fff; -webkit-transition: 0.5s; transition: 0.5s; border-radius: 50%; }
input:checked + .slider { background-color: #b12222; }
input:focus + .slider { box-shadow: 0 0 1px #b12222; }
input:checked + .slider::before { -webkit-transform: translateX(16px); -ms-transform: translateX(16px); transform: translateX(16px); }