/* ##STYLES RECPLAY## PART OF "HIRAGANA#01" (SAMESAME UPLOAD 04-MAR-25) CONTD BASIC INFOSYSTEM // 09-MAR-25 */
/* !!"ROOT" IN "STYLESTOUCHRENDER" */





/* ------------------------------- CONTAINERS RECPLAY ------------------------------- */

/* CONTAINER SEGMENTS//ALIGN BOTTOM */
/* SHRINK TO FIT TO AVOID OVERLAP WITH TOUCH-FUNCTIONS */
.modulerecorderplayer {
	position: fixed; /*absolute;*/
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: 100vw;
	border-color: red;
	border-style: dotted;
	border-width: var(--DBborder);
}

/* "SUB-MODULES" */
.segment-speak {
	display: flex;
	/* flex-direction: row; */
	width: 100vw;
	height: 20vw;
	border-color: cyan;
	border-style: dashed;
	border-width: var(--DBborder);
	border: 0px dashed cyan;
}
.segment-listen {
	display: flex;
	/* flex-direction: row; */
	width: 100vw;
	height: 20vw;
	border-color: lime;
	border-style: dashed;
	border-width: var(--DBborder);
	border: 0px dashed lime;
}
.segment-control {
	display: flex;
	/* flex-direction: row; */
	width: 100vw;
	height: 20vw;
	border-color: orange;
	border-style: dashed;
	border-width: var(--DBborder);
	border: 0px dashed orange;
}
.btnunit {
	width: 20vw;
	height: 20vw;
}




/* ---------------------------------- RECORDING WIDGETS ---------------------------------- */

	 	/* MAX WIDTH PROGRESS/LEVEL BAR */
	 	/* (RECORDING/PLAYBACK RECORDING/PLAY TEMPLATE) */

/* WAS (PARENT) "TRACK-CONTAINER" */
.audiotemplatecontainer {
	display: flex;
	flex-direction: row;
	width: 80vw;
	border-color: gray;
	border-style: dashed;
	border-width: var(--DBborder);
	border: 0px dashed gray;
}



/* WAS (PARENT) "TRACK-CONTAINER" */
/* FOR 2 ELEMS "LEVEL" AND "BTN" */
.inputlevelcontainer {
/* 
	display: flex;
	flex-direction: row;
 */
	width: 80vw;
	border-color: gray;
	border-style: dashed;
	border-width: var(--DBborder);
	border: 0px dashed gray;
}


/* NEW ADDITIONAL CONTAINER */
/* FOR 2 ELEMS "TRACK" AND "BTN" */
.recscrubbercontainer {
/* 
	display: flex;
	flex-direction: row;
 */
	width: 80vw;
	border-color: gray;
	border-style: dashed;
	border-width: var(--DBborder);
	border: 0px dashed gray;
}

		/* LIVE INPUT LEVEL (YELLOW BAR) */
/* WAS "RECORDING-LEVEL" */
.inputlevelbar {
	background-color: rgba(255 255 0 / 1);
	border-radius: 10vw;
	width: 50%;
	height: 20vw;
}

		/* OUTPUT TRACK (GREEN BAR) */
/* WAS "PLAYBACK-TRACK" */
.recscrubberbar {
	background-color: rgba(100 255 100 / .8);
	border-radius: 10vw;
	width: 75%; 																						/* ###TBD### SET WIDTH-TO-TIME BY SCRIPT */
	height: 20vw;
}




/* ------------------------------------ TEMPLATE WIDGETS --------------------------------- */
		/* PROMPT (BLUE BAR) */
.audiotemplatetrack {
	background-color: rgba(100 100 255 / .8);
	border-radius: 10vw;
	width: 35%; 																						/* ###TBD### SET WIDTH-TO-TIME BY SCRIPT */
	height: 20vw;
}