.form-switch {
	display: inline-block;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.form-switch i {
	position: relative;
	display: inline-block;
	margin-right: .5rem;
	width: 44px;
	height: 22px;
	background-color: #ccc;
	border-radius: 23px;
	vertical-align: text-bottom;
	transition: all 0.1s linear;
	vertical-align:middle;
}

.form-switch i::before {
	content: "";
	position: absolute;
	left: 0;
	width: 42px;
	height: 20px;
	background-color: #ccc;
	border-radius: 11px;
	transform: translate3d(1px, 1px, 0) scale3d(1, 1, 1);
	transition: all 0.1s linear;
}

.form-switch i::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px;
	height: 19px;
	background-color: #fff;
	border-radius: 11px;
	/*box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);*/
	transform: translate3d(1px, 1px, 0);
	transition: all 0.1s ease-in-out;
}

.form-switch:active i::after {
	width: 26px;
	transform: translate3d(1px, 1px, 0);
}

.form-switch:active input:checked+i::after {
	transform: translate3d(16px, 1px, 0);
}

.form-switch input {
	display: none;
}

.form-switch input:checked+i {
	background-color: var(--color1);
}

.form-switch input:checked+i::before {
	transform: translate3d(22px, 1px, 0) scale3d(0, 0, 0);
}

.form-switch input:checked+i::after {
	transform: translate3d(22px, 1px, 0);
}