/* BLOBS USING ADAPTATION OF "GOO" FILTER */
/* Copyright (c) 2021 by Lucas Bebber (https://codepen.io/lbebber/pen/OPjxZL) */


/* VERSION 18 OOP REWRITE OBJS // DEBUG SUN 02-JAN-22 (UPLOAD 040122) */


/* "GOO" FE_FILTER IS TEMPORARILY DIS-ABLED ON "STACK_PARENT" LINE #210# */
/* STATUS FOR FILTER_EFFECT ("GOO") IS "ON" */
			/* FIREFOX WILL NOT RE-DRAW CHANGE IN VISIBILITY FROM "BLOCK" TO "NONE
			WHEN IT AFFECTS "STACKPARENT" WHERE THE FILTER IS ATTACHED(!)
			THEREFORE UDATE ONLY HAPPENS ON "DISTANCE"-INPUT */
			/* CHROME IS OK WITH IT */
			/* SAFARI DOESNÄT DARW BLUR BUT VISIBILITY REGISTERS */


/* ### TBD ### */
			/*  MOVE SLIDER (HIDDEN CHECKBOX-) BTN TO SEPARATE DIV (AS "APP_TOP_MENU")  */





:root {
/* MAIN */
	--beginner:				rgba(255, 240, 230, 1);
	--intermed: 			rgba(240, 240, 250, 1);
	--advanced: 			rgba(245, 245, 220, 1);
	/* 	--badge: glitter; */
	--cvowel: 				rgba(255,  60, 255, 1);
	--cdblvowel: 			rgba(255, 175,  50, 1);
	--cvowelh: 				rgba(255, 215,   0, 1); /* NEW 271221 */
	--cdiphtong: 			rgba(180,  90, 255, 1);
	--cconsonant: 		rgba(255, 160, 255, 1);
	--csecondcon: 		rgba(200, 200, 200, 1);
	--cpositional: 		rgba( 80, 210, 230, 1);
	--cdblcon: 				rgba(130, 230, 150, 1);
	--ccomposite: 		rgba(140, 130, 255, 1);
/* SLIDER */
	--slidetrackcol:	rgba(220, 220, 230, 1);
	--slideprocol: 		rgba(  0, 255, 200, 1); /* FULL-ON MINT */
	--btncol: 				rgba(200, 200, 200, 1); /* HIDDEN CHECKBOX LBL */
	--btntxtcol: 			rgba(255, 255,   0, 1);
/* SWITCH */
	--off: 						rgba(200, 200, 210, 1);
	--on: 						rgba(100, 255,  50, 1);
	--thumb:					rgba(150, 150, 170, 1);
}


* {
  box-sizing: border-box;
}

body {
	margin: 0 0 0 0;
  background: rgba(250, 250, 250, 1);
/*
  width: 100%;
  height: 100%;
*/
}

/* CURRENT LINKS ONLY ON SOME DBL-VOW */
a {
	cursor: pointer;
}

		/* CONTINUE AFTER BKUP */
		/* WRAP (PUSH-DRAWER) VIEW-BTN IN DIV OUTSIDE "NAV"-CONTAINER */
#apptopmenu {
/*
	position: absolute;
	top: 0px;
  left: 0px;
  width: 100%;
  height: 30px;
  display: flex;
  border: 2px dotted pink;
*/
}

/* THE ALPHABET */
.contentcontainer {
	border: 0px dashed green;
}

/* (COLLAPSE-ABLE) SECTIONS IN ALPHABET */
.group {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	border: 0px dashed blue;
}

/* HORIZONTAL SLIDE DRAWER */
.contentmenu {
	border: 0px dashed red;
}





/* ========================  GRAPHIC  ======================== */

svg {
	width: 62px;
	height: 62px;
	float: left; 																																/* KEEPS CHILDREN RELATIV TO PARENT) */
}

/* TBD ENLARGE CIRCLE ON HOVER
	(LONG TOUCH) AND FIX CLIPPING */
/*
svg:hover {
	width: 80px;
	height: 80px;
	position: relative;
	left: -9px;		/ KEEP CENTERED /
	top: -9px;
}
*/

circle {
	cx: 31px;
	cy: 31px;
	r: 31px;
	stroke: black;
	stroke-width: 0;
}

circle:hover {
	cx: 31px;			/* KEEP CENTERD */
	cy: 31px;
	r: 41px;			/* ADJUST VIEW_BOX (?) */
	/*stroke: yellow;*/
	/*stroke-width: 10px;*/
}




/* ========================  LETTER LABELS  ======================== */

p {
	font-family: "Arial", sans-serif;
	font-weight: normal;
  font-size: 20px;
  line-height: 23px;
  color: rgba(255, 255, 255, 1);
  position: absolute; /* ABS TO ITEM (CIRCLE) */
  
								/*  TBD // (ADJUST) CLASSES FÜR SINGLE AND DBL AND "DASH" GRAPHEMS  */
	margin: 8px 0 0 24px; /* TRBL (TROUBLE) */
	text-align: center;
	border: 0px solid green;
	cursor: pointer; /* NEW 14-DEZ-21 */
}

									/*  ### TBD // CLICK ON P-EL MUST *BUBBLE* TO CIRCLE-EL ###  */
p:hover {
  color: rgba(100, 100, 100, .75);
}

																/*  "M"-STYLES = MOVE SPACING  */
	/*  STYLES MUST BE IN "ABS" P-TAG TO BE CORRECTLY PARSED AS "REL" // WILL NOT WORK IN SPAN  */

/* DBL WIDTH COMPOSITES */
.mdblw {
	left: -5px;
}

/* TRIPL GRAPHEMES */
.mtrplw {
	left: -10px;
}

/* (SINGLE) LTRS WITH LOWERCASE ONLY // COMBINED WITH DBLCON SELECTOR */
.mdown {
	top: 12px;	/* (INHERITS FROM "POS ABS"?) */
}

.mleft {
	left: -5px;
}

/* REPET "POS REL" WORKS INDEPENDANTLY IN SPAN */
.mright {
	position: relative;			  
	left: 2px;
}

/* GLYPH-VARIANT WILL BE INHERITED BY ALL FROM FIRST SELECTION */
/* STYLE HAS OWN POS REL // WORKS IN <SPAN> */
.super {
  font-size: 16px;
  line-height: 23px; 													
  position: relative;
  top: -8px;/* BASELINE SHIFT */
  left: 3px; 													/* SPACING */
}




/* ========================  ITEM STACK  ======================== */

.stackparent {
  /*filter: url("#goo");*/																							/*  x x x x x x x  FILTER  x x x x x x x x  */
  /* filter: url("#gooeyCottonCandy"); */
	position: relative; 																														/* REL TO FLEX-CONTAINER "GROUP" */
			/* MUST HAVE DIMENSION ="SVG" ELSE WILL 
					COLLAPSE WHEN "DISPLAY NONE" */
	width: 62px;
	height: 62px;
	border: 0px dashed red;
	background: rgba(255, 255, 255, 0);
	margin: 8px;																/* INITIAL BLOB SPACING */
	/*z-index: 0;*/
}

/* (DUMMY)CLASS TO POSITION LOWEST LAYER OF STACK */
.zerochild {
	/* DUMMY "NO-CLASS"-CLASS TO MOVE FIRST/SECOND/THIRD_CHILD
	  TO BOTTOM LAYER WITH NO OFFSET */
	/*display: block;*/
}

.firstchild {
	position: absolute;
	/*visibility: visible;*/
	/*display: block;*/
	border: 0px solid blue;
	/* margin: -8px 0 0 8px; */																											/* POSITIONAL SHIFT IN STACK */
	z-index: 20;
}

.secondchild {
	position: absolute;
	/*visibility: visible;*/
	/*display: block;*/
	border: 0px solid red;
	/* margin: -16px 0 0 16px; */
	z-index: 30;
}

.thirdchild {
	position: absolute;
	/*visibility: visible;*/
	/*display: block;*/
	border: 0px solid cyan;
	/* margin: -24px 0 0 24px; */
	z-index: 40;
}



/* ========================  LTR-TYPE ATTRIBUTES  ======================== */
/* CLASS_NAMES (OF CIRCLES) */

.vowels {
	fill: var(--cvowel);
}

/* SINGLE INSTANCE */
.schwa {
	fill: var(--cvowel);
	stroke: red;
	stroke-width: 0px;
	stroke-dasharray: 4;
}

/* SINGLE INSTANCE */
.langie {
	fill: var(--cvowel);
	stroke: red;
	stroke-width: 0px;
	stroke-dasharray: 4;
}

.umlauts {
	fill: var(--cvowel);
}

.dblvowels {
	fill: var(--cdblvowel);
}

.vowelh {
	fill: var(--cvowelh); /* NEW COLOR 271221 */
}

.consonants {
	fill: var(--cconsonant);
}

.secondcons {
	fill: var(--csecondcon);
}

/* SINGLE INSTANCE */
.qugroup {
	fill: var(--csecondcon);
	stroke: red;
	stroke-width: 0px;
	stroke-dasharray: 4;
}

/* SINGLE INSTANCE */
.unvoiceds {
	fill: var(--cconsonant);
	stroke: red;
	stroke-width: 0px;
	stroke-dasharray: 4;
}

/* SINGLE INSTANCE */
.silenth {
	fill: var(--cconsonant);
	stroke: red;
	stroke-width: 0px;
	stroke-dasharray: 4;
}

.positionals {
	fill: var(--cpositional);
}

.dblcons {
	fill: var(--cdblcon);
}

/* SINGLE INSTANCE */
.sslig {
	fill: var(--cdblcon);
	stroke: red;
	stroke-width: 0px;
	stroke-dasharray: 4;
}

		/* NO CHILDREN IN THESE GROUPS */
.gleitlauts {
	fill: var(--cdiphtong);
}

.aigroup {
	fill: var(--cdiphtong);
}

.composites {
	fill: var(--ccomposite);
}

.clusters {										/* WAS "STOLPER" 261221 */
	fill: var(--ccomposite);
	stroke: red;
	stroke-width: 0px;
	stroke-dasharray: 4;
}

.aussprache {
	fill: var(--ccomposite);
}

.lehn {
	fill: var(--ccomposite);
}


/* ========================  SETTINGS INTERFACE  ======================== */

			/* USED FOR SLIDER-NAMES ONLY */
			/* TRICKY ALIGNMENT WITH INPUT-BOXES */
.title {
	font-family: "Arial", sans-serif;
	font-weight: normal;
  font-size: 19px;
  line-height: 23px;
  text-align: left;
  color: rgba(100, 100, 100, 1);
				/* KEEP BORDER FOR BASELINE SHIFT */
  border: 1px solid transparent;
				/* TBD ADJUST FOR WEBKIT */
				/* BASELINE SHIFT ALIGN WITH INPUT-TEXT */
  padding: 2px 0 0 0; /* TRBL */
}

/* PARTIAL COPY OF MENUUI */
.sliderui {
	width: 100%;
	display: flex;
	flex-direction: row; /* DEFAULT */
	flex-wrap: wrap;
	padding: 0 0 20px 25px; /* VERTICAL SPACING OF SLIDER-EL */
	border: 0px dashed red;
}

/* LABELS FOR HIDDEN CHECKBOX #ONLY# */
label {
  line-height: 25px; /* ### TEMP ### ADJUST TO V-ALIGN CENTER */
	border: 0px dashed red;
}



/* ========================  MENU INTERFACE  ======================== */

/* FOLD-ABLE ELEMENTS IN MENU *AND* BLOBS */
section {
	display: none; /* INIT AT 'NONE' */
}

/* ALLOW BG-COLOR CHANGE FOR RECOMMENDED
		LEARNER-"LEVELS" DIVIDING SECTIONS */
.levelbgcol {
	/* SET INLINE-STYLE= BG-COL ...*/
}

/* WYSIWYG-TITEL IN "LESSONS"-MENU */
.lessons {
	font-family: "Arial", sans-serif;
	font-weight: normal;
  font-size: 19px;
  line-height: 50px; 													/* VERTICAL SPACING */
  text-align: left;
  color: rgba(100, 100, 100, 1);
  border: 0px dashed green;
}

.menuitem {																		/* REPLACED "LI"-TAG" */
	/*width: 100%;*/
  padding: 15px 20px 15px 20px; /* TRBL */
	border: 0px dashed blue;
}

.sectionbtn {
	cursor: pointer;
	margin: none;
  padding-left: 15px;
  border: 0px dotted green;
}

/* STYLE WILL #NOT# WORK ON "LABEL" */
.lbltxt {
	overflow: hidden;
	white-space: pre;
	text-overflow: ellipsis;									  /* OR "CLIP" // OK IN CHROME */
}

/* NOT ACTIVE
	ASSIGN TO SWITCH-EL FOR CASES = "OPTION" */
.opt {
	padding-left: 5px; 												/* "OPTIONS" ADDITIONAL INDENT LBLTXT SUB-SELECTORS */
}






/* ========================  SWITCH-WIDGET  ======================== */

.switch {
	box-sizing: content;													/* STROKE OUTSIDE (GLOBAL IS INSIDE) */
	float: right;
	margin-top: 4px;															/* VERTICAL-ALIGN WITH TEXT */
	height: 40px;
	width: 80px;
	border-radius: 20px;													/* PRESERVE SEMI-CIRCULAR CAPS */
	background-color: var(--off);
	transition: 0.5s; /* DEFAULT = ALL */
}

.handle {
	box-sizing: border-box;												/* STROKE INSIDE (GLOBAL IS INSIDE)L */
	height: 34px;
	width: 34px;
	margin: 3px; /* SUM = 40PX */
	border-radius: 17px;
	background-color: var(--thumb);
	transition: transform 0.2s;
			/* cubic-bezier(0.32, 0.58, 0.12, 0.97); */
			/* ease-in-out */
}

.move {
	transform: translateX(40px);
}

.hilite {
	background-color: var(--on);
}