/* --------------------------------------------------------
					SPEZIALFALL Wechsel-Button
	-------------------------------------------------------- */

.myButton {

/* text */
	text-decoration: 		none;
	font: 					20px 'Arial', sans-serif;
	font-weight: 			bold;
	text-align: 			center;

	/* Soll anwählen des Textes verhindern, funktioniert nicht 100%ig: */
	user-select: 			none;


/* layout */
	padding: 				.1em .2em;
	margin: 					0;
	display: 				inline-block;
	position: 				relative;
	border-radius: 		10px;
	min-width:				2em;

/* effects */
	border-width:			2px;
	border-style:			solid;

	box-shadow:          4px 4px 6px rgba(0,0,0,0.4);
}


.myButton:hover {
	cursor: pointer;
}



.myButton[disabled],
.myButton[disabled]:hover {
	opacity: 			.5;
	cursor: 				default;
	color: 				rgba(0,0,0,0.6) !important;
	text-shadow: 		none !important;
	background-color: transparent;
}


/* Button hat Fokus (mit dickem Rand): */
.but_fokus {
	border-width:			6px;
}

/* Für Buttons und Info-Texte: Text-Schatten */
.myButton,
.info_text {
	text-shadow: 			rgba(0,0,0,1) 2px 2px 3px; /* color | offset-x | offset-y | blur-radius */
}

.info_text {
	color:					#fff !important;
}

/* Button für Tool-Leiste: */
.but_tool {
	margin: 					5px;		/* Abstand von Button zu Button */
}




/* Anwendung von hsl:
 * hsl(Farbton, Sättigung, Helligkeit) [Position %];
  */

/* ==== Farbvariante fava_0 ==== */

button.fava_0w:not(.erhellt):hover,a.fava_0w:not(.erhellt):hover,input:not(.erhellt).fava_0w:hover {
 	background-image: 	linear-gradient(to bottom, hsl(0, 20%, 10%) 40%, hsl(0, 20%, 5%) 60%);
}
.fava_0w {
	border-color:			hsl(0, 70%, 55%);
 	background-image: 	linear-gradient(to bottom, hsl(0, 20%, 20%) 40%, hsl(0, 20%, 15%) 60%);
	color: 					hsl(0, 50%, 55%);
}
.fava_0 {
	border-color:			hsl(0, 70%, 65%);
 	background-image: 	linear-gradient(to bottom, hsl(0, 40%, 40%) 40%, hsl(0, 40%, 35%) 60%);
	color: 					hsl(0, 40%, 95%) !important;
}
button.fava_0:hover,a.fava_0:hover,input.fava_0:hover,
.fava_0w.erhellt {
	border-color:			hsl(0, 40%, 75%);
 	background-image: 	linear-gradient(to bottom, hsl(0, 70%, 60%) 40%,	hsl(0, 70%, 55%) 60%);
	color: 					white;
}

/* ==== Farbvariante fava_XXX ==== */

button.fava_20w:not(.erhellt):hover,a.fava_20w:not(.erhellt):hover,input:not(.erhellt).fava_20w:hover {
 	background-image: 	linear-gradient(to bottom, hsl(20, 20%, 10%) 40%, hsl(20, 20%, 5%) 60%);
}
.fava_20w {
	border-color:			hsl(20, 70%, 55%);
 	background-image: 	linear-gradient(to bottom, hsl(20, 20%, 20%) 40%, hsl(20, 20%, 15%) 60%);
	color: 					hsl(20, 50%, 55%);
}
.fava_20 {
	border-color:			hsl(20, 70%, 65%);
 	background-image: 	linear-gradient(to bottom, hsl(20, 40%, 40%) 40%, hsl(20, 40%, 35%) 60%);
	color: 					hsl(20, 40%, 95%) !important;
}
button.fava_20:hover,a.fava_20:hover,input.fava_20:hover,
.fava_20w.erhellt {
	border-color:			hsl(20, 40%, 75%);
 	background-image: 	linear-gradient(to bottom, hsl(20, 70%, 60%) 40%,	hsl(20, 70%, 55%) 60%);
	color: 					white;
}

/* ==== Farbvariante fava_40 ==== */

button.fava_40w:not(.erhellt):hover,a.fava_40w:not(.erhellt):hover,input:not(.erhellt).fava_40w:hover {
 	background-image: 	linear-gradient(to bottom, hsl(40, 20%, 10%) 40%, hsl(40, 20%, 5%) 60%);
}
.fava_40w {
	border-color:			hsl(40, 70%, 55%);
 	background-image: 	linear-gradient(to bottom, hsl(40, 20%, 20%) 40%, hsl(40, 20%, 15%) 60%);
	color: 					hsl(40, 50%, 55%);
}
.fava_40 {
	border-color:			hsl(40, 70%, 65%);
 	background-image: 	linear-gradient(to bottom, hsl(40, 40%, 40%) 40%, hsl(40, 40%, 35%) 60%);
	color: 					hsl(40, 40%, 95%) !important;
}
button.fava_40:hover,a.fava_40:hover,input.fava_40:hover,
.fava_40w.erhellt {
	border-color:			hsl(40, 40%, 75%);
 	background-image: 	linear-gradient(to bottom, hsl(40, 70%, 60%) 40%,	hsl(40, 70%, 55%) 60%);
	color: 					white;
}

/* ==== Farbvariante fava_60 ==== */

button.fava_60w:not(.erhellt):hover,a.fava_60w:not(.erhellt):hover,input:not(.erhellt).fava_60w:hover {
 	background-image: 	linear-gradient(to bottom, hsl(60, 20%, 10%) 40%, hsl(60, 20%, 5%) 60%);
}
.fava_60w {
	border-color:			hsl(60, 70%, 55%);
 	background-image: 	linear-gradient(to bottom, hsl(60, 20%, 20%) 40%, hsl(60, 20%, 15%) 60%);
	color: 					hsl(60, 50%, 55%);
}
.fava_60 {
	border-color:			hsl(60, 70%, 65%);
 	background-image: 	linear-gradient(to bottom, hsl(60, 40%, 40%) 40%, hsl(60, 40%, 35%) 60%);
	color: 					hsl(60, 40%, 95%) !important;
}
button.fava_60:hover,a.fava_60:hover,input.fava_60:hover,
.fava_60w.erhellt {
	border-color:			hsl(60, 40%, 75%);
 	background-image: 	linear-gradient(to bottom, hsl(60, 70%, 60%) 40%,	hsl(60, 70%, 55%) 60%);
	color: 					white;
}

/* ==== Farbvariante fava_80 ==== */

button.fava_80w:not(.erhellt):hover,a.fava_80w:not(.erhellt):hover,input:not(.erhellt).fava_80w:hover {
 	background-image: 	linear-gradient(to bottom, hsl(80, 20%, 10%) 40%, hsl(80, 20%, 5%) 60%);
}
.fava_80w {
	border-color:			hsl(80, 70%, 55%);
 	background-image: 	linear-gradient(to bottom, hsl(80, 20%, 20%) 40%, hsl(80, 20%, 15%) 60%);
	color: 					hsl(80, 50%, 55%);
}
.fava_80 {
	border-color:			hsl(80, 70%, 65%);
 	background-image: 	linear-gradient(to bottom, hsl(80, 40%, 40%) 40%, hsl(80, 40%, 35%) 60%);
	color: 					hsl(80, 40%, 95%) !important;
}
button.fava_80:hover,a.fava_80:hover,input.fava_80:hover,
.fava_80w.erhellt {
	border-color:			hsl(80, 40%, 75%);
 	background-image: 	linear-gradient(to bottom, hsl(80, 70%, 60%) 40%,	hsl(80, 70%, 55%) 60%);
	color: 					white;
}

/* ==== Farbvariante fava_100 ==== */

button.fava_100w:not(.erhellt):hover,a.fava_100w:not(.erhellt):hover,input:not(.erhellt).fava_100w:hover {
 	background-image: 	linear-gradient(to bottom, hsl(100, 20%, 10%) 40%, hsl(100, 20%, 5%) 60%);
}
.fava_100w {
	border-color:			hsl(100, 70%, 55%);
 	background-image: 	linear-gradient(to bottom, hsl(100, 20%, 20%) 40%, hsl(100, 20%, 15%) 60%);
	color: 					hsl(100, 50%, 55%);
}
.fava_100 {
	border-color:			hsl(100, 70%, 65%);
 	background-image: 	linear-gradient(to bottom, hsl(100, 40%, 40%) 40%, hsl(100, 40%, 35%) 60%);
	color: 					hsl(100, 40%, 95%) !important;
}
button.fava_100:hover,a.fava_100:hover,input.fava_100:hover,
.fava_100w.erhellt {
	border-color:			hsl(100, 40%, 75%);
 	background-image: 	linear-gradient(to bottom, hsl(100, 70%, 60%) 40%,	hsl(100, 70%, 55%) 60%);
	color: 					white;
}

/* ==== Farbvariante fava_120 ==== */

button.fava_120w:not(.erhellt):hover,a.fava_120w:not(.erhellt):hover,input:not(.erhellt).fava_120w:hover {
 	background-image: 	linear-gradient(to bottom, hsl(120, 20%, 10%) 40%, hsl(120, 20%, 5%) 60%);
}
.fava_120w {
	border-color:			hsl(120, 70%, 55%);
 	background-image: 	linear-gradient(to bottom, hsl(120, 20%, 20%) 40%, hsl(120, 20%, 15%) 60%);
	color: 					hsl(120, 50%, 55%);
}
.fava_120 {
	border-color:			hsl(120, 70%, 65%);
 	background-image: 	linear-gradient(to bottom, hsl(120, 40%, 40%) 40%, hsl(120, 40%, 35%) 60%);
	color: 					hsl(120, 40%, 95%) !important;
}
button.fava_120:hover,a.fava_120:hover,input.fava_120:hover,
.fava_120w.erhellt {
	border-color:			hsl(120, 40%, 75%);
 	background-image: 	linear-gradient(to bottom, hsl(120, 70%, 60%) 40%,	hsl(120, 70%, 55%) 60%);
	color: 					white;
}

/* ==== Farbvariante fava_140 ==== */

button.fava_140w:not(.erhellt):hover,a.fava_140w:not(.erhellt):hover,input:not(.erhellt).fava_140w:hover {
 	background-image: 	linear-gradient(to bottom, hsl(140, 20%, 10%) 40%, hsl(140, 20%, 5%) 60%);
}
.fava_140w {
	border-color:			hsl(140, 70%, 55%);
 	background-image: 	linear-gradient(to bottom, hsl(140, 20%, 20%) 40%, hsl(140, 20%, 15%) 60%);
	color: 					hsl(140, 50%, 55%);
}
.fava_140 {
	border-color:			hsl(140, 70%, 65%);
 	background-image: 	linear-gradient(to bottom, hsl(140, 40%, 40%) 40%, hsl(140, 40%, 35%) 60%);
	color: 					hsl(140, 40%, 95%) !important;
}
button.fava_140:hover,a.fava_140:hover,input.fava_140:hover,
.fava_140w.erhellt {
	border-color:			hsl(140, 40%, 75%);
 	background-image: 	linear-gradient(to bottom, hsl(140, 70%, 60%) 40%,	hsl(140, 70%, 55%) 60%);
	color: 					white;
}

/* ==== Farbvariante fava_160 ==== */

button.fava_160w:not(.erhellt):hover,a.fava_160w:not(.erhellt):hover,input:not(.erhellt).fava_160w:hover {
 	background-image: 	linear-gradient(to bottom, hsl(160, 20%, 10%) 40%, hsl(160, 20%, 5%) 60%);
}
.fava_160w {
	border-color:			hsl(160, 70%, 55%);
 	background-image: 	linear-gradient(to bottom, hsl(160, 20%, 20%) 40%, hsl(160, 20%, 15%) 60%);
	color: 					hsl(160, 50%, 55%);
}
.fava_160 {
	border-color:			hsl(160, 70%, 65%);
 	background-image: 	linear-gradient(to bottom, hsl(160, 40%, 40%) 40%, hsl(160, 40%, 35%) 60%);
	color: 					hsl(160, 40%, 95%) !important;
}
button.fava_160:hover,a.fava_160:hover,input.fava_160:hover,
.fava_160w.erhellt {
	border-color:			hsl(160, 40%, 75%);
 	background-image: 	linear-gradient(to bottom, hsl(160, 70%, 60%) 40%,	hsl(160, 70%, 55%) 60%);
	color: 					white;
}

/* ==== Farbvariante fava_180 ==== */

button.fava_180w:not(.erhellt):hover,a.fava_180w:not(.erhellt):hover,input:not(.erhellt).fava_180w:hover {
 	background-image: 	linear-gradient(to bottom, hsl(180, 20%, 10%) 40%, hsl(180, 20%, 5%) 60%);
}
.fava_180w {
	border-color:			hsl(180, 70%, 55%);
 	background-image: 	linear-gradient(to bottom, hsl(180, 20%, 20%) 40%, hsl(180, 20%, 15%) 60%);
	color: 					hsl(180, 50%, 55%);
}
.fava_180 {
	border-color:			hsl(180, 70%, 65%);
 	background-image: 	linear-gradient(to bottom, hsl(180, 40%, 40%) 40%, hsl(180, 40%, 35%) 60%);
	color: 					hsl(180, 40%, 95%) !important;
}
button.fava_180:hover,a.fava_180:hover,input.fava_180:hover,
.fava_180w.erhellt {
	border-color:			hsl(180, 40%, 75%);
 	background-image: 	linear-gradient(to bottom, hsl(180, 70%, 60%) 40%,	hsl(180, 70%, 55%) 60%);
	color: 					white;
}

/* ==== Farbvariante fava_200 ==== */

button.fava_200w:not(.erhellt):hover,a.fava_200w:not(.erhellt):hover,input:not(.erhellt).fava_200w:hover {
 	background-image: 	linear-gradient(to bottom, hsl(200, 20%, 10%) 40%, hsl(200, 20%, 5%) 60%);
}
.fava_200w {
	border-color:			hsl(200, 70%, 55%);
 	background-image: 	linear-gradient(to bottom, hsl(200, 20%, 20%) 40%, hsl(200, 20%, 15%) 60%);
	color: 					hsl(200, 50%, 55%);
}
.fava_200 {
	border-color:			hsl(200, 70%, 65%);
 	background-image: 	linear-gradient(to bottom, hsl(200, 40%, 40%) 40%, hsl(200, 40%, 35%) 60%);
	color: 					hsl(200, 40%, 95%) !important;
}
button.fava_200:hover,a.fava_200:hover,input.fava_200:hover,
.fava_200w.erhellt {
	border-color:			hsl(200, 40%, 75%);
 	background-image: 	linear-gradient(to bottom, hsl(200, 70%, 60%) 40%,	hsl(200, 70%, 55%) 60%);
	color: 					white;
}

/* ==== Farbvariante fava_220 ==== */

button.fava_220w:not(.erhellt):hover,a.fava_220w:not(.erhellt):hover,input:not(.erhellt).fava_220w:hover {
 	background-image: 	linear-gradient(to bottom, hsl(220, 20%, 10%) 40%, hsl(220, 20%, 5%) 60%);
}
.fava_220w {
	border-color:			hsl(220, 70%, 55%);
 	background-image: 	linear-gradient(to bottom, hsl(220, 20%, 20%) 40%, hsl(220, 20%, 15%) 60%);
	color: 					hsl(220, 50%, 55%);
}
.fava_220 {
	border-color:			hsl(220, 70%, 65%);
 	background-image: 	linear-gradient(to bottom, hsl(220, 40%, 40%) 40%, hsl(220, 40%, 35%) 60%);
	color: 					hsl(220, 40%, 95%) !important;
}
button.fava_220:hover,a.fava_220:hover,input.fava_220:hover,
.fava_220w.erhellt {
	border-color:			hsl(220, 40%, 75%);
 	background-image: 	linear-gradient(to bottom, hsl(220, 70%, 60%) 40%,	hsl(220, 70%, 55%) 60%);
	color: 					white;
}

/* ==== Farbvariante fava_240 ==== */

button.fava_240w:not(.erhellt):hover,a.fava_240w:not(.erhellt):hover,input:not(.erhellt).fava_240w:hover {
 	background-image: 	linear-gradient(to bottom, hsl(240, 20%, 10%) 40%, hsl(240, 20%, 5%) 60%);
}
.fava_240w {
	border-color:			hsl(240, 70%, 55%);
 	background-image: 	linear-gradient(to bottom, hsl(240, 20%, 20%) 40%, hsl(240, 20%, 15%) 60%);
	color: 					hsl(240, 50%, 55%);
}
.fava_240 {
	border-color:			hsl(240, 70%, 65%);
 	background-image: 	linear-gradient(to bottom, hsl(240, 40%, 40%) 40%, hsl(240, 40%, 35%) 60%);
	color: 					hsl(240, 40%, 95%) !important;
}
button.fava_240:hover,a.fava_240:hover,input.fava_240:hover,
.fava_240w.erhellt {
	border-color:			hsl(240, 40%, 75%);
 	background-image: 	linear-gradient(to bottom, hsl(240, 70%, 60%) 40%,	hsl(240, 70%, 55%) 60%);
	color: 					white;
}

/* ==== Farbvariante fava_260 ==== */

button.fava_260w:not(.erhellt):hover,a.fava_260w:not(.erhellt):hover,input:not(.erhellt).fava_260w:hover {
 	background-image: 	linear-gradient(to bottom, hsl(260, 20%, 10%) 40%, hsl(260, 20%, 5%) 60%);
}
.fava_260w {
	border-color:			hsl(260, 70%, 60%);
 	background-image: 	linear-gradient(to bottom, hsl(260, 20%, 20%) 40%, hsl(260, 20%, 15%) 60%);
	color: 					hsl(260, 50%, 60%);
}
.fava_260 {
	border-color:			hsl(260, 70%, 65%);
 	background-image: 	linear-gradient(to bottom, hsl(260, 40%, 40%) 40%, hsl(260, 40%, 35%) 60%);
	color: 					hsl(260, 40%, 95%) !important;
}
button.fava_260:hover,a.fava_260:hover,input.fava_260:hover,
.fava_260w.erhellt {
	border-color:			hsl(260, 40%, 75%);
 	background-image: 	linear-gradient(to bottom, hsl(260, 70%, 60%) 40%,	hsl(260, 70%, 55%) 60%);
	color: 					white;
}

/* ==== Farbvariante fava_280 ==== */

button.fava_280w:not(.erhellt):hover,a.fava_280w:not(.erhellt):hover,input:not(.erhellt).fava_280w:hover {
 	background-image: 	linear-gradient(to bottom, hsl(280, 20%, 10%) 40%, hsl(280, 20%, 5%) 60%);
}
.fava_280w {
	border-color:			hsl(280, 70%, 55%);
 	background-image: 	linear-gradient(to bottom, hsl(280, 20%, 20%) 40%, hsl(280, 20%, 15%) 60%);
	color: 					hsl(280, 50%, 55%);
}
.fava_280 {
	border-color:			hsl(280, 70%, 65%);
 	background-image: 	linear-gradient(to bottom, hsl(280, 40%, 40%) 40%, hsl(280, 40%, 35%) 60%);
	color: 					hsl(280, 40%, 95%) !important;
}
button.fava_280:hover,a.fava_280:hover,input.fava_280:hover,
.fava_280w.erhellt {
	border-color:			hsl(280, 40%, 75%);
 	background-image: 	linear-gradient(to bottom, hsl(280, 70%, 60%) 40%,	hsl(280, 70%, 55%) 60%);
	color: 					white;
}

/* ==== Farbvariante fava_300 ==== */

button.fava_300w:not(.erhellt):hover,a.fava_300w:not(.erhellt):hover,input:not(.erhellt).fava_300w:hover {
 	background-image: 	linear-gradient(to bottom, hsl(300, 20%, 10%) 40%, hsl(300, 20%, 5%) 60%);
}
.fava_300w {
	border-color:			hsl(300, 70%, 55%);
 	background-image: 	linear-gradient(to bottom, hsl(300, 20%, 20%) 40%, hsl(300, 20%, 15%) 60%);
	color: 					hsl(300, 50%, 55%);
}
.fava_300 {
	border-color:			hsl(300, 70%, 65%);
 	background-image: 	linear-gradient(to bottom, hsl(300, 40%, 40%) 40%, hsl(300, 40%, 35%) 60%);
	color: 					hsl(300, 40%, 95%) !important;
}
button.fava_300:hover,a.fava_300:hover,input.fava_300:hover,
.fava_300w.erhellt {
	border-color:			hsl(300, 40%, 75%);
 	background-image: 	linear-gradient(to bottom, hsl(300, 70%, 60%) 40%,	hsl(300, 70%, 55%) 60%);
	color: 					white;
}

/* ==== Farbvariante fava_320 ==== */

button.fava_320w:not(.erhellt):hover,a.fava_320w:not(.erhellt):hover,input:not(.erhellt).fava_320w:hover {
 	background-image: 	linear-gradient(to bottom, hsl(320, 20%, 10%) 40%, hsl(320, 20%, 5%) 60%);
}
.fava_320w {
	border-color:			hsl(320, 70%, 55%);
 	background-image: 	linear-gradient(to bottom, hsl(320, 20%, 20%) 40%, hsl(320, 20%, 15%) 60%);
	color: 					hsl(320, 50%, 55%);
}
.fava_320 {
	border-color:			hsl(320, 70%, 65%);
 	background-image: 	linear-gradient(to bottom, hsl(320, 40%, 40%) 40%, hsl(320, 40%, 35%) 60%);
	color: 					hsl(320, 40%, 95%) !important;
}
button.fava_320:hover,a.fava_320:hover,input.fava_320:hover,
.fava_320w.erhellt {
	border-color:			hsl(320, 40%, 75%);
 	background-image: 	linear-gradient(to bottom, hsl(320, 70%, 60%) 40%,	hsl(320, 70%, 55%) 60%);
	color: 					white;
}

/* ==== Farbvariante fava_340 ==== */

button.fava_340w:not(.erhellt):hover,a.fava_340w:not(.erhellt):hover,input:not(.erhellt).fava_340w:hover {
 	background-image: 	linear-gradient(to bottom, hsl(340, 20%, 10%) 40%, hsl(340, 20%, 5%) 60%);
}
.fava_340w {
	border-color:			hsl(340, 70%, 55%);
 	background-image: 	linear-gradient(to bottom, hsl(340, 20%, 20%) 40%, hsl(340, 20%, 15%) 60%);
	color: 					hsl(340, 50%, 55%);
}
.fava_340 {
	border-color:			hsl(340, 70%, 65%);
 	background-image: 	linear-gradient(to bottom, hsl(340, 40%, 40%) 40%, hsl(340, 40%, 35%) 60%);
	color: 					hsl(340, 40%, 95%) !important;
}
button.fava_340:hover,a.fava_340:hover,input.fava_340:hover,
.fava_340w.erhellt {
	border-color:			hsl(340, 40%, 75%);
 	background-image: 	linear-gradient(to bottom, hsl(340, 70%, 60%) 40%,	hsl(340, 70%, 55%) 60%);
	color: 					white;
}

/* ==== Farbvariante fava_Grau ==== */

button.fava_Grauw:not(.erhellt):hover,a.fava_Grauw:not(.erhellt):hover,input:not(.erhellt).fava_Grauw:hover {
 	background-image: 	linear-gradient(to bottom, hsl(80, 20%, 10%) 40%, hsl(80, 20%, 5%) 60%);
}
.fava_Grauw {
	border-color:			hsl(80, 5%, 55%);
 	background-image: 	linear-gradient(to bottom, hsl(80, 5%, 20%) 40%, hsl(80, 5%, 15%) 60%);
	color: 					hsl(80, 5%, 55%);
}
.fava_Grau {
	border-color:			hsl(80, 5%, 70%);
 	background-image: 	linear-gradient(to bottom, hsl(80, 5%, 40%) 40%, hsl(80, 5%, 35%) 60%);
	color: 					white;
}
button.fava_Grau:hover,a.fava_Grau:hover,input.fava_Grau:hover,
.fava_Grauw.erhellt {
	border-color:			hsl(80, 100%,100%) !important;
 	background-image: 	linear-gradient(to bottom, hsl(80, 0%, 60%) 40%, hsl(80, 0%, 50%) 60%);
	color: 					white;
}




/* --------------------------------------------------------
							Sliders
	-------------------------------------------------------- */

.switch input {
   display: none;
}

.switch {
   display: inline-block;
   width: 60px;
   height: 26px;
   margin-top: 0px;				/* Beeinflusst Y-Position! In separater Klasse setzen! */
	margin-left:10px;				/* Abstand zum vorherigen Element */
	margin-right:10px;			/* Abstand zum nachfolgenden Element */
   transform: translateY(50%);
   position: relative;
   border-radius: 30px;
	box-shadow: rgba(0,0,0,0.3) 0 .3em 8px;
 	background-image: 	linear-gradient(to bottom, hsl(80, 5%, 40%) 40%, hsl(80, 5%, 35%) 60%);
}

.slider {
   position: absolute;
   top: 0px;
   bottom: 0;
   left: 0;
   right: 0;
   border-radius: 30px;
   box-shadow: 0 0 0 2px #444;
   cursor: pointer;
   border: 4px solid transparent;
   overflow: hidden;
   transition: 0.2s;
}

.slider:before {
   position: absolute;
   content: "";
   width: 100%;
   height: 100%;
   background-color: #444;
   border-radius: 30px;
   transform: translateX(-30px);
   transition: 0.2s;
}

input:checked + .slider:before {
   transform: translateX(30px);
   background-color: #8f7;
}

input:checked + .slider {
   box-shadow: 0 0 0 2px #7f7;
}