.switch {
	width: 60px; height: 34px; display: inline-block; position: relative;
}
.switch input {
	display: none;
}
.slider {
	transition:0.4s; left: 0px; top: 0px; right: 0px; bottom: 0px; position: absolute; cursor: pointer; background-color: rgb(204, 204, 204); -webkit-transition: .4s;
}
.slider::before {
	transition:0.4s; left: 4px; width: 26px; height: 26px; bottom: 4px; position: absolute; content: ""; background-color: white; -webkit-transition: .4s;
}
input:checked + .slider {
	background-color: rgb(33, 242, 67);
}
input:checked + .slider {
	background-color: rgb(33, 150, 243);
}
input:focus + .slider {
	box-shadow: 0px 0px 1px #21f243;
}
input:checked + .slider::before {
	transform: translateX(26px); -webkit-transform: translateX(26px);
}
.round.slider {
	border-radius: 34px;
}
.round.slider::before {
	border-radius: 50%;
}