.switch {
	width: 85px; height: 35px; 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 {
	border-radius: 50%; 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(51, 122, 183);
}
input:focus + .slider {
	box-shadow: 0px 0px 1px #21f243;
}
input:checked + .slider::before {
	transform: translateX(50px); -webkit-transform: translateX(50px);
}
.slider::after {
	left: 65%; top: 50%; color: black; font-family: Verdana, sans-serif; font-size: 10px; display: block; position: absolute; content: "Inactive"; transform: translate(-50%, -50%);
}
input:checked + .slider::after {
	left: 30%; top: 50%; color: white; content: "Active";
}
.round.slider {
	border-radius: 20px;
}
.round.slider::before {
	border-radius: 50%;
}