.switch {
	font-size:1.25em;	/* The only(!) value to be changed. This determins the size of the switch. */
	height:0.5em;
	width:1.75em;
	border-radius:0.75em;
	background:#ccc;
	position:relative;
	cursor:pointer;
	display:inline-block;
	vertical-align:middle;
	margin:0.5em;
}
.switch:before {
	content:'';
	width:1em;
	height:1em;
	border-radius:0.5em;
	position:absolute;
	top:-0.25em;
	box-shadow:0 0 0.3em -0.125em #000;
	transition:0.1s;
}
.switch-entry.active .switch:before,
.switch.active:before {
	background:#D30041;
	left:0;
}
.switch:before {
	background:#f2f2f2;
	right:0;
	/*left:0.75em;*/
}
.switch-entry {
	display:inline-block;
	padding:1em;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
.switch-entry,
.switch-entry * {
	cursor:pointer;
}
.switch-entry:hover {
	background:#00000007;
}

.switch.processing:before {
	width:1.25em;
	height:0.9em;
	top:-0.2em;
	/*background:#e08d00;/**/
}
.switch.processing:not(.active):before {
	/*background:#fa8c9d;*/
	background:#f4bebe;
}
.switch.processing.active:before {
	background:#eb4f7f;
}