.checkbox-ios {

	display: flex;
	align-items: center;
	gap: 10px;

	user-select: none;

}

.checkbox-ios .checkbox-ios-switch {

	position: relative;

	display: inline-block;

	box-sizing: border-box;

	min-width: 56px;

	height: 28px;

	border: 1px solid rgba(0, 0, 0, .1);

	border-radius: 25%/50%;

	vertical-align: top;

	background: #eeeeee29;

	transition: .2s;

}

.checkbox-ios .checkbox-ios-switch:before {

	content: '';

	position: absolute;

	top: 1px;

	left: 1px;

	display: inline-block;

	width: 24px;

	height: 24px;

	border-radius: 50%;

	background: white;

	box-shadow: 0 3px 5px rgba(0, 0, 0, .3);

	transition: .15s;

}

.checkbox-ios input[type=checkbox] {

	display: block;

	width: 0;

	height: 0;

	position: absolute;

	z-index: -1;

	opacity: 0;

}

.checkbox-ios input[type=checkbox]:not(:disabled):active + .checkbox-ios-switch:before {

	box-shadow: inset 0 0 2px rgba(0, 0, 0, .3);

}

.checkbox-ios input[type=checkbox]:checked + .checkbox-ios-switch {

	background: #598ff5ad;

}

.checkbox-ios input[type=checkbox]:checked + .checkbox-ios-switch:before {

	transform:translateX(28px);

}



/* Hover */

.checkbox-ios input[type="checkbox"]:not(:disabled) + .checkbox-ios-switch {

	cursor: pointer;

	border-color: rgba(0, 0, 0, .3);

}



/* Disabled */

.checkbox-ios input[type=checkbox]:disabled + .checkbox-ios-switch {

	filter: grayscale(70%);

	border-color: rgba(0, 0, 0, .1);

}

.checkbox-ios input[type=checkbox]:disabled + .checkbox-ios-switch:before {

	background: #eee;

}



/* Focus */

.checkbox-ios.focused .checkbox-ios-switch:before {

	box-shadow: inset 0px 0px 4px #ff5623;

}