
.toggleswitchlabel {
    vertical-align: center;
    height: 24px;
    line-height: 24px;
}


 /* Der eigentliche Schalter - Box um den Slider herum */
.toggleswitch {
	position: relative;
	display: inline-block;
/*	width: 60px;	Slider-Gesamtbreite
    height: 34px;	Slider-Gesamthoehe
*/
	width: 40px;
	height: 24px;
    vertical-align: top;
}

/* Standard-HTML-Checkbox verstecken */
.toggleswitch input {
	opacity: 0;
	width: 0;
	height: 0;
}

/* Der eigentliche Slider innerhalb des Schalters */
.toggleswitch > span.slider {
/* 	border-radius: 34px;	Abrundung des Sliders, muss mit Slider-Gesamthoehe uebereinstimmen
*/
	border-radius: 24px;
	position: absolute;
	cursor: pointer;
	margin: 0;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.toggleswitch > span.slider:before {
	border-radius: 50%;
	position: absolute;
	content: "";
/*	height: 26px;		Eigentlicher Slider-Knopf
	width: 26px;		Hoehe und Breite muessen Slider-Gesamthoehe entsprechen
*/
	height: 16px;
	width: 16px;
	left: 4px;		/*	Abstand des Slider-Knopfes zum Slider-Container */
	bottom: 4px;	/*	Abstand des Slider-Knopfes zum Slider-Container */
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

/* Hintergrundfarbe des Sliders bei gecheckter Checkbox anpassen */
.toggleswitch input:checked + span.slider {
	background-color: #dc0032;
}

/* Schlagschatten des Sliders bei Fokus anpassen */
/*.toggleswitch input:focus + span.slider {
	box-shadow: 0 0 1px #dc0032;
}*/

/* Slide-Animation */
.toggleswitch input:checked + span.slider:before {
/*	-webkit-transform: translateX(26px);	Animation beim (de-)aktivieren
	-ms-transform: translateX(26px);		Anzahl Pixel = Breite bzw. Hoehe des Slider-Knopfes - 2 * Abstand des Slider-Knopfes zum Slider-Container
	transform: translateX(26px);
*/
	-webkit-transform: translateX(16px);
	-ms-transform: translateX(16px);
	transform: translateX(16px);
}

