.is-visible {
	display: block!important
}
.is-hidden {
	display: none!important
}
.switch {
	height: 2rem;
	position: relative;
	margin-bottom: 1rem;
	outline: 0;
	font-size: .875rem;
	font-weight: 700;
	color: #fefefe;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}
.switch-input {
	position: absolute;
	margin-bottom: 0;
	opacity: 0
}
.switch-paddle {
	position: relative;
	display: block;
	width: 4rem;
	height: 2rem;
	border-radius: 3px;
	background: #cacaca;
	transition: all .25s ease-out;
	font-weight: inherit;
	color: inherit;
	cursor: pointer
}
input+.switch-paddle {
	margin: 0
}
.switch-paddle:after {
	position: absolute;
	top: .25rem;
	left: .25rem;
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	transform: translateZ(0);
	border-radius: 3px;
	background: #fefefe;
	transition: all .25s ease-out;
	content: ""
}
input:checked~.switch-paddle {
	/* original background: #2ba6cb; */
	background: var(--accent1);
}
input:checked~.switch-paddle:after {
	left: 2.25rem
}
[data-whatinput=mouse] input:focus~.switch-paddle {
	outline: 0
}
.switch-active, .switch-inactive {
	position: absolute;
	top: 50%;
	transform: translateY(-50%)
}
.switch-active {
	left: 8%;
	display: none;
	color: #fefefe!important;
}
input:checked+label>.switch-active {
	display: block
}
.switch-inactive {
	right: 8%;
	color: #fefefe!important;
}
input:checked+label>.switch-inactive {
	display: none
}
.switch.tiny {
	height: 1.5rem
}
.switch.tiny .switch-paddle {
	width: 3rem;
	height: 1.5rem;
	font-size: .625rem
}
.switch.tiny .switch-paddle:after {
	top: .25rem;
	left: .25rem;
	width: 1rem;
	height: 1rem
}
.switch.tiny input:checked~.switch-paddle:after {
	left: 1.75rem
}
.switch.small {
	height: 1.75rem
}
.switch.small .switch-paddle {
	width: 3.5rem;
	height: 1.75rem;
	font-size: .75rem
}
.switch.small .switch-paddle:after {
	top: .25rem;
	left: .25rem;
	width: 1.25rem;
	height: 1.25rem
}
.switch.small input:checked~.switch-paddle:after {
	left: 2rem
}
.switch.large {
	height: 2.5rem
}
.switch.large .switch-paddle {
	width: 5rem;
	height: 2.5rem;
	font-size: 1rem
}
.switch.large .switch-paddle:after {
	top: .25rem;
	left: .25rem;
	width: 2rem;
	height: 2rem
}
.switch.large input:checked~.switch-paddle:after {
	left: 2.75rem
}