.boolean-input {
	display: flex;
}
.boolean-input label {
	content: " ";
	display: inline-block;
	position: relative;
	width: 2.3em;
	height: 1.2em;
	border-radius: 1em;
	background: #e0e0e0;
	cursor: pointer;
}

.boolean-input input[type=checkbox] {
	display: none;
}

.boolean-input input[type=checkbox]+label::after {
	background: #ffffff;
	content: " ";
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	border-radius: 1em;
	position: absolute;
	left: 0.25em;
	top: 50%;
    transform: translateY(-50%);
	transition: all 0.3s ease;
}

.boolean-input input[type=checkbox]:checked+label {
	background: hsl(182, 58%, 42%);
	border-color: hsl(182, 58%, 42%);
	transition: all 0.3s ease;
}

.boolean-input input[type=checkbox]:checked+label::after {
	left: auto;
	right: 0.25em;
}