/* https://codepen.io/andreasstorm/pen/rKboqY */

.toggle {
	position: relative;
	display: block;
  float: left;
	width: 42px;
	height: 24px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transform: translate3d(0, 0, 0);
}

.toggle:before {
	content: "";
	position: relative;
	top: 1px;
	left: 1px;
	width: 40px;
	height: 22px;
	display: block;
	background: #c8ccd4;
	border-radius: 12px;
	transition: background 0.2s ease;
}

.toggle span {
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	display: block;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(154,153,153,0.75);
	transition: all 0.2s ease;
}

.toggle span svg {
	margin: 7px;
	fill: none;
}

.toggle span svg path {
	stroke: #c8ccd4;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 24;
	stroke-dashoffset: 0;
	transition: all 0.5s linear;
}

.cbx:checked + .toggle:before {
	background: #52d66b;
}

.cbx:checked + .toggle span {
	transform: translateX(18px);
}

.cbx:checked + .toggle span path {
	stroke: #52d66b;
	stroke-dasharray: 25;
	stroke-dashoffset: 25;
}