/* !!!!!!!!!!!!!!!!!!
IMPORT rules must appear at the top, before any style declaration
RULES MATCHED by ORDER in CSS file here, no 'class order'!
!!!!!!!!!!!!!!!!!!!!!!!

@@@@@@@@@@@@@@@
CSS BEGIN
--------------
TAGS
aria: accesibility labels
.class comma: matches (OR)
plus: match ADJACENT
>: match ALL children
A ~ B: match ALL elm w/ A AND B
space: nested lf to rt inside
 ::before ::after insert content before/after an element
--------------
ATTR:
Sides: top, right, bottom left
Corners: top-left, top-right, bottom-right, bottom-left
--------------
TYPES HERE:
- Tz: Domain
- Ku: Panel
- Gwx: Separator (line)
- KeMe: Notify

- KeDru: Text
- JaPo: Image

- HriNe: Choices (Any)
	- HriNe_Tra: Action (button)
	- HriNe_HyHo: Bool (toggle)
	- HriNe_Vo: Number (slider)
	- HriNe_Ta: List/Grid (select)

- FX:
	- Focus(Use/Key)
	- Hover(Ptr)
	- KzTy: Disable(blur, fade)
--------------
RULES:
- glow: hilite/hover
- dotted: focus w/ keyboard/last-used;

@@@@@@@@@@@@@@@ */


/*@@@@@@@@@@@@@@@
VARIABLES
@@@@@@@@@@@@@@@*/
:root
{
	/* COLOR --------------------------*/

	/* FIXED COLORS for BUBBLE_TEXT & FX */
	--PoSzVoHo: #0000;
	--PoSzStz: #000F;
	--PoSzStzVo: #0008;
	--PoSzBreSta: #888F;
	--PoSzStx: #DDDE;
	--PoKeMeTo: #FFFE;


	/* OVERRIDEN COLORS for 404, ERR, no JS Pages! */
	--PoGwyFz: #000A; /* PANEL__OUTER_TOPIC */

	--PoSi: #FFF; /* ACTIVE */
	--PoSiVoHu: #FFF3; /* FADED TXT */
	--PoSiSpo: #FFFF; /* MAIN TXT */

	--PoKuDe: #222A; /* SECTION BG */
	--PoKuTz: #444F; /* DOMAIN BG */

	--PoSmo: #777; /* FONT 3D SHADOW */
	--PoSmuTra: #D22;

	/* SIZE GLYPH CHAR -------------------- */
	--GyDru_Kwe: 4ch;

	/* CHOICES ICON-BTN Length */
	/* Optimal CHARACTER READING Length says 50~75 but given Ideographs we'll stay low */
	--GyDru_NzNe_GwaHu: 24ch;
	--GyDru_NzNe_GwaHi: 48ch;
	--GyDru_KeDruSkx: 48ch;

	/* TOPIC  PANEL WIDTHS */
	--GyDru__NeGx: 48ch;
	--GyDru__NeGa: 64ch;
	--GyDru__ToGry: 96ch;

	/* SIZE ROOT LEGIBLE UNIT------------------- */
	--GyStz: 0.0rem;
	--GyBe: 0.125rem;
	--GyBo: 0.25rem;

	--GyBiHu: 0.50rem;
	--GyBiDe: 0.67rem;
	--GyBiHi: 0.75rem;

	--GyTreHu: 0.875rem;
	--GyTreDe: 1.0rem;
	--GyTreHi: 1.25rem;

	--GyDruBa: 1.125rem;
	--GyDruBz: 1.33rem;

	--GyKaHu: 1.5rem;
	--GyKaDe: 2.0rem;
	--GyKaHi: 3.0rem;

	--GyBzHu: 4.0rem;
	--GyBzDe: 6.0rem;
	--GyBzHi: 8.0rem;

	/* TIMING -------------------- */
	--GiDe: 0.25s;
	--GiHi: 1.0s;

	/* TAB HEADERS STRETCH -------------------- */
	/* Firefox <146 */
	@supports (width: -moz-available) {--stretch: -moz-available;}
	/* Safari & Firefox 146+ */
	@supports (width: -webkit-fill-available) {--stretch: -webkit-fill-available;}
	/* Chromium */
	@supports (width: stretch) {--stretch: stretch;	}

	/* LINES-------------------- */
	--GwxSpo: solid;
	--GwxKwo: dotted;
}


/* SEMANTIC AREAS tight PACKING ---------------- */
/* header
, nav
, main
, footer
, div
{
	display: inline-flexbox;
	margin: var(--GyStz);
	padding: var(--GyStz);
	border-radius: var(--GyStz);
} */

/* ==================== */
/* ANIMATION */
/* ==================== */
.KzVo_StzDriStx{ animation:KzVo 4s }
@keyframes KzVo{0%{ opacity:0 } 67%{ opacity:50 } 100%{ opacity:1 } }

/*@@@@@@@@@@@@@@@
ANCESTOR
@@@@@@@@@@@@@@@*/
*
{
	/* LAYOUT SPACE */
	/* content-box WIDTH/HEIGHT ignore padding, margin, & border */
	/* border-box  WIDTH/HEIGHT ignore margin only */
	box-sizing: border-box;
	overflow: hidden;

	white-space: pre-wrap;
	overflow-wrap: anywhere;

	border-radius: var(--GyStz);
	margin: var(--GyStz);
	padding: var(--GyStz);

	/* ZOOM SIZE */
	/* content-visibility: auto; */
	font-size: var(--GyTreDe);

	/* COLOR & QUALITY */
	image-rendering: auto;
	color: var(--PoSiSpo);
	background-color: var(--PoSzVoHo);
	/* SLIDER & RADIO CLR	*/
	accent-color: var(--PoSmuTra);

	/* ANIMATION */
	transition: var(--GiDe);
}

/*@@@@@@@@@@@@@@@
ROOT ZOOM_SCALE
@@@@@@@@@@@@@@@*/
html
{
	@media (min-width: 320px) { font-size: 14px;}
	@media (min-width: 481px) { font-size: 15px;}
	@media (min-width: 641px) { font-size: 16px;}
	@media (min-width: 961px) { font-size: 17px;}
	@media (min-width: 1025px) { font-size: 18px;}
	@media (min-width: 1281px) { font-size: 19px;}
	@media (min-width: 1601px) { font-size: 20px;}
}

/*@@@@@@@@@@@@@@@
FONT:
- BRAND(Final Frontier)
- SLAB(Industrial)
- SANS(Helvetica)
- HAND(Comic Sans)
- FLAG(Language Selection)

WGT: light: 100, normal: 400, bold: 700

- Using 'font-stack' to support FAST load via OS
- & to support 'closest per SCRIPT' style.

KyAPPL: San Francisco
SkiWIN: Segoe UI
SkiLNX: Ubuntu, Cantarell, Noto Sans
SkiDRD: Roboto
- NOTE: Roboto Condensed uses name sans-serif-condensed under Android

NEOGROTESQUE
font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, system-ui, sans-serif;

@@@@@@@@@@@@@@@*/
@font-face
{
	font-family: "Final Frontier Old Style";
	src: url( "../../Mx01__SuKz_MEDIA/SuKz04_WaDru__FNT/WaDru00__Bz.woff2" ) format('woff2');
}

/* FACE[ 4 ] --------------------------- */
/* 00 BRAND UNIQUE */
.WaDru_BriDzDy
{
	font-family: "Final Frontier Old Style", Charcoal, Impact, "Roboto Slab", "Arial Black", sans-serif-black, sans-serif-condensed, ui-rounded, system-ui, sans-serif;
}

/* INDUSTRIAL */
/* 01 LABEL */
.WaDru_Va
/* 02 VALUE */
, .WaDru_Vu
{
	font-family: Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed, system-ui, sans-serif;
}

/* 03 HANDWRITTEN */
.WaDru_JeDo
{
	font-family: "Comic Sans MS", "Comic Sans", "Marker Felt", "Noteworthy", "Segoe Print", "Chalkboard SE", "Comic Neue", "Bradley Hand", Chilanka, TSCu_Comic, casual, sans-serif;
}

/* 04 FLAG */
.WaDru_Ku
{
	/* Originally used special font for FLAGS to show correctly @ Win11
	 *AND* No Lag on Apple
	 font-family: "Segoe UI Emoji", sans-serif; */
	font-family: sans-serif;
}

/* WEIGHT[4] --------------------------- */
/* NORMAL */
.WaDru_Vu
, .WaDru_JeDo
, .WaDru_Ku
{
	font-weight: 400;
}

/* LABEL */
.WaDru_Va
{
	font-weight: 700;
}

/* 3D FX */
.WaDru_BriDzDy
{
	font-weight: 900;
	/* 3D Shade FX skew slightly right and progressively down */

	/* text-shadow: <horizontal-offset> <vertical-offset> <blur-radius> <color>; */
    text-shadow:
		1px 1px 0 var(--PoSmo)
		, 1px 2px 0 var(--PoSmo)
		, 1px 3px 0 var(--PoSmo)
		, 1px 4px 0 var(--PoSmo)
	;
}

.Kz_BriDzDy
{
    box-shadow:
		1px 1px 0 var(--PoSmo)
		, 1px 2px 0 var(--PoSmo)
		, 1px 3px 0 var(--PoSmo)
		, 1px 4px 0 var(--PoSmo)
	;
}

/*@@@@@@@@@@@@@@@
DOMAIN AREAS^Tz
- Not Panels nor Status Bars
- Fullpage or Screen as Canvas spaces
@@@@@@@@@@@@@@@*/
.Tz00__Gry
{
	left: 0dvw;
	top: 0dvh;

	width: 100dvw;
	height: 100dvh;

	/* ARIA WCAG STD */
	min-width: 320px;
}

.Tz01__SpoKz
{
	display: block;
	position: absolute;

	border-radius: var(--GyStz);
	border: none;

	animation: none;
	transition: none;
}

.Tz02__MxPo
{
	left: 0dvw;
	top: 0dvh;

	width: 100dvw;
	height: 100dvh;
}

.Tz02__MxPo__Bri
{
	left: 0dvw;
	top: var(--GyKaHu);

	width: 100dvw;
	height: calc( 100dvh - var(--GyKaHi));
}

/*@@@@@@@@@@@@@@@
PANELS^Ku
5 Layers Deep
@@@@@@@@@@@@@@@*/

/* PANEL__OUTER_GUI_BG */
.Gz00__GwaFz
{
	display: block;
	position: absolute;
	/* Needed to keep Menu attached to Domain Body */
	white-space: normal;

	left: var(--GyTreDe);
	top: var(--GyTreDe);
	border-radius: var(--GyKaHu);
	padding: var(--GyBiHu);
	margin: var(--GyStz);

	/* GyKaDe is 2 * GyTreDe */
	width: calc( 100dvw - var(--GyKaDe) );
	max-height: calc( 100dvh - var(--GyKaDe) );

	background-color: var(--PoGwyFz);
	border: var(--GwxSpo) var(--GyBe) var(--PoBre);
	box-shadow: 0 -0.5em var(--GyBiHu) var(--PoSoSmo);

	/* ALLSCROLL ALL TOPIC AREA*/
	overflow: auto;
}

/* PANEL__TITLE_BAR */
.Gz01__BriDzVa
{
	display: flex;
	flex-wrap: wrap;

    justify-content: center;
    align-items: center;
	margin: var(--GyBe);
	padding: var(--GyStz);

	overflow: visible;
}

/* PANEL__DOMAIN as CLN MENU TABS @ TOP --------------------------------- */
.Gz01__TaTzVa
{
	display: flex;
	flex: auto;
	flex-wrap: nowrap;

	/* 0 bottom to align with topic section */
	margin: var(--GyStz);
	padding: var(--GyBiHi) var(--GyStz) var(--GyStz) var(--GyStz);
	place-items: var(--stretch) var(--stretch);

	cursor: cell;
	border-radius: var(--GyStz);
	overflow: visible;
	background-color: var(--PoSzVoHo);
}

/* PANEL__DOMAIN BODY @ BOTTOM ---------------------- */
.Gz01__TiTzKa
{
	display: flex;
	flex: auto;
	flex-wrap: nowrap;

	margin: var(--GyStz);
	padding: var(--GyBiHu);

	align-content: flex-start;
	justify-content: flex-start;

	/* TL TR BR BL */
	border-left: var(--GwxSpo) var(--GyBe) var(--PoSi);
	border-right: var(--GwxSpo) var(--GyBe) var(--PoSi);
	border-top: none;
	border-bottom: var(--GwxSpo) var(--GyBe) var(--PoSi);

	border-radius: var(--GyKaHu);
	border-radius: var(--GyStz) var(--GyStz) var(--GyKaHu) var(--GyKaHu);

	background-color: var(--PoKuTraHy);
}

/* PANEL__DOMAIN_LAYOUT ------------------------ */
.Gz02__HreJo_To
, .Gz02__HreJo_Ne
{
	display: grid;
	vertical-align: top;
	align-content: flex-start;
	justify-content: flex-start;

	overflow: auto;
	gap: var(--GyTreHu);

	margin: var(--GyBo);
}

/* PANEL__DOMAIN_LAYOUT INFO_ONLY */
.Gz02__HreJo_To
{
	/* auto-fit USE ALL SPACE auto-fill PACKS */
	grid-template-columns: repeat( auto-fit, minmax( var(--GyDru__ToGry), 1fr ));
}

/* PANEL__DOMAIN_LAYOUT CHOICES */
.Gz02__HreJo_Ne
{
	/* WIDE */
	@media (min-aspect-ratio: 1/1)
	{
		grid-template-columns: repeat( auto-fit, minmax( var(--GyDru__NeGx), 1fr ));
	}
	/* TALL */
	@media (max-aspect-ratio: 1/1)
	{
		grid-template-columns: repeat( auto-fit, minmax( var(--GyDru__NeGa), 1fr ));
	}
}


/* PANEL__TOPIC SURFACE--------------------------------- */
.Gz03__NzGwa
{
	display: block;
	position: relative;
	overflow-y: auto;

	padding: var(--GyBo);

	color: var(--PoBre);
	background-color: var(--PoKuDe);

	border-left: none;
	border-right: none;
	border-top: var(--GwxSpo) var(--GyBe) var(--PoKuTz);
	border-bottom: none;
	border-radius: var(--GyTreDe);
}

/* TOPIC_CHOICES ------------------*/

/* TOPIC_CHOICES HIDDEN */
.Gz04__NzNe_Smo
{
	display: block;
	overflow: hidden;
	width: 0;
	height: 0;
}

/* TOPIC_CHOICES SHARED */
.Gz04__NzNe_Gwx
, .Gz04__NzNe_GwaHu
, .Gz04__NzNe_GwaHi
{
	overflow-y: auto;
	flex-wrap: wrap;

	vertical-align: top;
	text-align: start;
	align-content: flex-start;
	justify-content: flex-start;

	margin: var(--GyBo);
	padding: var(--GyBo);
	border-radius: var(--GyTreDe);

	gap: var(--GyBe);
}

/* TOPIC_CHOICES TEXT-LINES */
.Gz04__NzNe_Gwx
{
	display: inline-flex;
}

/* TOPIC_CHOICES SURF SM */
.Gz04__NzNe_GwaHu
{
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( var(--GyDru_NzNe_GwaHu), 1fr ));

	overflow: visible;
}

.Gz04__NzNe_GwaHi
{
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( var(--GyDru_NzNe_GwaHi), 1fr ));

	overflow: visible;
}

/* BODY of INFO  --------------------------- */
.Gz05__KaTo
{
	display: inline-flex;
	flex-wrap: wrap;

	vertical-align: top;
	text-align: start;
	align-content: flex-start;
	justify-content: flex-start;

	margin: var(--GyBe);
	padding: var(--GyBe);

	border-radius: var(--GyTreHu);
	background-color: var(--PoKuTraHy);
	/* border: var(--GwxSpo) var(--GyBe); border-color: blue; */
}

/* BODY of CHOICES ---- */
.Gz05__KaNe
{
	display: inline-flex;
	overflow: visible;

	text-align: start;
	align-items: center;
}

/*@@@@@@@@@@@@@@@
NOTIFY^KeMe
@@@@@@@@@@@@@@@ */

/* STATUS BAR--------------------- */
.KeMe_De
{
	cursor: help;
	left: 0dvw;
	width: 100dvw;
	height: var(--GyKaHu);
	font-size: var(--GyTreDe);

	text-align: start;
	justify-content: start;
	align-items: center;

	/* Black bar*/
	background-color: var(--PoSzStz);
}

/* TOP/BOTTOM STATUS BAR PLACEMENT */
.KeMe_Bz
{
	top: 0dvh;
}

.KeMe_Bo
{
	top: calc(100dvh - var(--GyKaHu));
}

/* TOOLTIP --------------------------------- */
/* TOOLTIP BUBBLE TEXT */
.KeMe_To
, .KeMe_ToKeDru
{
	font-size: var(--GyTreHu);
	color: var(--PoSzStz);
}

/* TOOLTIP BUBBLE BOX */
.KeMe_To
{
	position: relative;
	cursor: help;
	/* NEED OVERFLOW for 'before' below */
	overflow: visible;

	text-align: center;
	padding: var(--GyBiHu);
	margin: var(--GyBiHu);

	width: fit-content;
	height: fit-content;
	min-width: var(--GyBzHi);
	border-radius: var(--GyKaHu);

	background-color: var(--PoKeMeTo);
	opacity: 1.0;
}

/* TOOLTIP TRIANGLE GUIDE */
.KeMe_To::before
{
	position: absolute;
	cursor: help;
	content: "";

	padding: var(--GyStz);
	margin: var(--GyStz);

	/* use 0 for width/height to make border diagonal for triangle */
	width: var(--GyStz);
	height: var(--GyStz);
	border-radius: var(--GyStz);
	border-style: var(--GwxSpo);

	/* Triangle Size & Location */
	border-width: var(--GyBiHu);
	inset-inline-start: var(--GyKaHu);
	/* -1.0 * Self Border-Width Half-Height...need to gap sliver */
	inset-block-end: -0.98rem;

	/* Top Border ONLY faces down */
	border-color: var(--PoKeMeTo) transparent transparent transparent;
}


/*@@@@@@@@@@@@@@@
TEXT
@@@@@@@@@@@@@@@*/

/* TEXT__MENU_TITLE --------------------------------- */
.KeDru_NzVa__TraKz
{
	display: flex;
    justify-content: center;
    align-items: center;

	width: var(--stretch);
	padding: var(--GyBiHu);
	margin: var(--GyStz);
	margin-top: var(--GyTreDe);

	border: var(--GwxSpo) var(--GyBe) var(--PoSi);
	border-radius: var(--GyKaHu) var(--GyKaHu) 0 0;

	color: var(--PoSoSmo);
	background-color: var(--PoKuTraHo);
}

/* TEXT__MENU_SELECTED */
.KeDru_NzVa_Se__TraKz
{
	font-size: var(--GyDruBa);

	padding: var(--GyBiHi);
	border-bottom:none;

	outline: none;
	box-shadow: 0 -0.5em var(--GyBiHu) var(--PoSoSmo);

	color: var(--PoSi);
	background-color: var(--PoKuTraHy);
}

/* TEXT__CHOICE_ITEMS--------------------------------------------- */

/* TEXT_INFO__LABEL */
.KeDru_NeVa
{
	display: inline-flex;

	margin: var(--GyBe);
	padding: var(--GyBe);

	color: var(--PoSi);
	/* border: var(--GwxSpo) var(--GyBe);	border-color: yellow; */
}

/* TEXT_INFO__VALUE */
.KeDru_ToVu
{
	display: inline-flex;
	overflow-y: auto;

	margin: var(--GyBe);
	padding: var(--GyBe);

	font-size: var(--GyBiHi);
	line-height: var(--GyDruBz);

	color: var(--PoSeVu);
	/* background-color: var(--PoKuTraHy); */
	/* border: var(--GwxSpo) var(--GyBe);border-color: red; */
}

/* TEXT_INFO__VERTICAL*/
.KeDru_GoGa
{
	display: flex;
	font-size: var(--GyBiHi);
	padding: var(--GyBe);

	width: fit-content;
	height: fit-content;

	writing-mode: sideways-lr;
	text-orientation: sideways;
}

/* TEXT TOOLTIP and SHOWHIDE TOGGLE */
.KeDru_TraGyHu
{
	margin: var(--GyStz);
	padding: var(--GyStz);
	border-radius: var(--GyBiHu);
}

/* TEXT__DOC_PGRAF--------------------------------------------- */

/* TEXT_DOC_PGRAF HEADER */
.KeDruBz
{
	font-size: var(--GyDruBz);
}

/* TEXT_DOC_PGRAF BODY */
.KeDruBa, .KeDruSkx
{
	/* NEED 100% width for FIREFOX 2026 */
	width: 100%;
	max-width: calc( 100% - var(--GyTreDe) );
	font-size: var(--GyTreHu);
	line-height: var(--GyDruBz);

	margin: var(--GyBiHu);
	padding: var(--GyBiHu);
	border-radius: var(--GyTreDe);

	background-color: var(--PoKuTraHy);
	overflow-x: auto;
	overflow-y: auto;
}

/* TEXT_DOC_PGRAF COLUMNS */
.KeDruSkx
{
	/* Requires BLOCK to split columns */
	column-rule: var(--GyBo) var(--GwxKwo) var(--PoKuDe);
	column-width: var(--GyDru_KeDruSkx);
	column-gap: var(--GyDru_Kwe);
}

/* TEXT__SECTION */
.KeDruNz
{
	font-size: var(--GyTreHi);
	margin: var(--GyBe);
	padding: var(--GyBe);

	/* Small Pad for curve */
    padding-bottom: var(--GyBiHu);

	border: none;
	border-radius: var(--GyBiHu);
	border-bottom: var(--GwxSpo) var(--GyBe) var(--PoKuTz);
}

/* TEXT__PAGE_NOTICES --------------------------------------------- */

/* TEXT__TITLE_WORDSIZE */
.BriDz_FzVa
{
	font-size: var(--GyKaHi);
	text-align: center;
	margin: var(--GyStz) var(--GyBo);
}


/* TEXT__FOCUS */
.BriDz__Se
{
	display: block;
	place-items: center center;
	text-align: center;

	font-size: var(--GyBzDe);
	width: auto;
	height: var(--GyBzHi);

	margin: var(--GyBo);
	padding: var(--GyBo);
}

/* TEXT__DBG --------------------------------------------- */

/* TEXT__DBG ERR */
.BriDz_TrxKz
{
	font-size: var(--GyKaHu);
	text-align: center;
}

/* TEXT__DBG EMAIL */
.BriDz_TrxMe
{
	font-size: var(--GyTreHu);
	text-align: center;
}

/*@@@@@@@@@@@@@@@
IMAGES
@@@@@@@@@@@@@@@*/

/* DEFAULT_ICONS --------------------------------------*/

/* 2x2 MD */
.JaPo__Va
, .JaPo__Va_Kwu
{
	height: var(--GyKaDe);
	margin: var(--GyBo);
	padding: var(--GyStz);
	text-align: center;
}

/* ROUNDED EDGE */
.JaPo__Va_Kwu
{
	/* filter: invert(100%); */
	background-color: var(--PoSzStx);
	border-radius: var(--GyBiHu);
	padding: var(--GyBe);
}

/* 4x4 LG */
.JaPo__GyBzHu
, .JaPo__GyBzHu_Kwu
{
	position: relative;
	height: var(--GyBzHu);
	margin: var(--GyBo);
	padding: var(--GyStz);

	text-align: center;
}

/* ROUNDED EDGE */
.JaPo__GyBzHu_Kwu
{
	border-radius: var(--GyKaHu);
	border: var(--GwxSpo) var(--GyBe) var(--PoSiSpo);
}

/* TITLE IMG */
.JaPo__GyBzDe_Kwu
{
	height: var(--GyBzDe );
	padding: var(--GyBo);

	border-radius: var(--GyBiHu);
	border: var(--GwxSpo) var(--GyBe) var(--PoSzStz);
	background-color: var(--PoSzStx);
}

/*@@@@@@@@@@@@@@@
ELM CHOICES
@@@@@@@@@@@@@@@*/

/* TEXT__LIST */
.HriNeTi
/* TEXT__TYPING */
, .KeDru_MiPo
/* TEXT__BTN */
, .HriNe_Tra
{
	display: inline-flex;
	text-align: start;

	margin: var(--GyBo);
	padding: var(--GyBo);

	color: var(--PoSi);
	background-color: var(--PoKuTz);

	border-radius: var(--GyKaHu);
	border: var(--GwxSpo) var(--GyBe) var(--PoSi);
}

/*@@@@@@@@@@@@@@@
CHOICE BUTTON
@@@@@@@@@@@@@@@*/

/* TEXT__BTN */
.HriNe_Tra
{
	text-align: center;
	margin: var(--GyBo);
	padding: var(--GyBo) var(--GyBiHi);
	line-height: var(--GyKaDe);

}

/* BTN SUBMIT ===> LAUNCH BTN RED */
.HriNe_TraKwi
{
	font-size: var(--GyKaHu);
	background-color: var(--PoSmuTra);

	display: inline-block;
	text-align: center;
	place-items: center center;

	width:fit-content;
	min-width: 12.0rem;
	margin: var(--GyBo) var(--GyBiHu);
	padding: var(--GyBo) var(--GyTreHu);

	border-radius: var(--GyKaHu);
	border: var(--GwxSpo) var(--GyBe) var(--PoSi);
}

/* BTN SUBMIT HOVER BG Po ==> GREEN */
.HriNe_TraKwi:hover
{
	/* GLOW */
	font-size: var(--GyKaDe);
	box-shadow: 0 0 var(--GyTreDe) var(--PoSmuSe );
	background-color: var(--PoSmuSe);
}

/*@@@@@@@@@@@@@@@
TOGGLE_SWITCH
Ka is Body, Vu is Value, & Mz is BG & Glow
@@@@@@@@@@@@@@@*/

/* TOGGLE CONTAINER & BG/CIRCLE OVERLAPS */
.HriNe_HyHo_Ka .HriNe_HyHo_Mz
{
	width: var(--GyStz);
	height: var(--GyStz);
	opacity: var(--GyStz);

	margin: var(--GyStz);
	padding: var(--GyStz);
}

/* TOGGLE CONTAINER */
.HriNe_HyHo_Ka
{
	display: inline-flex;
	position: relative;

	width: var(--GyKaHi);
	height: var(--GyKaHu);
	border-radius: var(--GyKaHu);
}

/* TOGGLE OFF BG */
.HriNe_HyHo_Vu
{
	position: absolute;
	margin: var(--GyStz);
	padding: var(--GyStz);

	top: var(--GyStz);
	left: var(--GyStz);
	right: var(--GyStz);
	bottom: var(--GyStz);

	height: var(--GyKaHu);
	border-radius: var(--GyKaHu);

	background-color: var(--PoKuStuVo);
}

/* TOGGLE OFF CIRCLE */
.HriNe_HyHo_Vu:before
{
	position: absolute;
	content: "";
	text-align: center;
	align-items: center;

	left: var(--GyBe);
	bottom: var(--GyBe);

	/* Note: Wid/Height = Total Size minus left/bot-offsets *2 */
	width: var(--GyTreHi);
	height: var(--GyTreHi);
	border-radius: var(--GyTreHi);

	background-color: var(--PoSeVu);
	transition: var(--GiHi);
}

/* TOGGLE ON BG */
.HriNe_HyHo_Mz:checked + .HriNe_HyHo_Vu
{
	background-color: var(--PoSmuTra);
	transition: var(--GiHi);
}

/* TOGGLE ON CIRCLE */
.HriNe_HyHo_Mz:checked + .HriNe_HyHo_Vu:before
{
	transform: translateX( var(--GyKaHu) );
	transition: var(--GiHi);
}

/*@@@@@@@@@@@@@@@
SLIDER
@@@@@@@@@@@@@@@ */
.HriNe_Vo
{
	display: inline-flex;
	text-align:center;

	margin: var(--GyBe);
	padding: var(--GyBe);

	border-radius: var(--GyTreDe);
	border: none;

	color: var(--PoSiSpo);
}

/*@@@@@@@@@@@@@@@
CLN LIST
@@@@@@@@@@@@@@@*/

/* CLN ZONE */
.HriNe_Ta__KuDo
{
	display: inline-flex;
	flex-wrap: wrap;

	margin: var(--GyTreDe) var(--GyBiHu);
	padding: var(--GyStz);
}

/* CLN CURRENT IMAGE */
.HriNe_Ta__Fe
{
	display: inline-flex;
	place-items: center center;
	text-align: center;
	margin: var(--GyBo);
	padding: var(--GyBo);

	font-size: var(--GyBzDe);
	width: auto;
	height: var(--GyBzHi);

	border-radius: var(--GyTreDe);
}

/* CLN SELECTOR BOX */
.HriNe_Ta__NeKu
{
	display: inline-flex;
	flex-wrap: wrap;

	border-radius: var(--GyStz);
	border: var(--GwxSpo) var(--GyBe) var(--PoBreSpo);

	height: var(--GyBzHi);
	overflow-y: auto;

	margin: var(--GyBo);
	padding: var(--GyStz);
}

/* CLN LIST */
.HriNe_Ta__Va
{
	font-size: 1.925rem;
	margin: 0.075rem;
	padding: var(--GyStz);
	background-color: var(--PoSzVoHo);

	border-radius: var(--GyBo);
}

/* FLAG NOT READY */
.HriNe_Ta__VaRu
{
	filter: brightness( 25% );
}

 /* FLAG AVAILABLE */
.HriNe_Ta__VaGri
{
	padding: var(--GyBe);
}

.HriNe_Ta__VaGri:Hover
{
	background-color: var(--PoSi);
}

/* OVERLAY EXACT*/
.HriNe_Ta__To
{
	position: absolute;
	text-align: center;

	margin: var(--GyStz);
	padding: var(--GyStz);

	left: var(--GyStz);
	right: 100%;
	top: var(--GyStz);
	bottom: 100%;
}

 /* EMOJI to GRAYSCALE */
.HriNe_Ta__VaVo
{
	padding: var(--GyBe);
	filter: grayscale( 80% );
}

.HriNe_Ta__VaVo:Hover
{
	background-color: var(--PoSi);
	filter: grayscale( 0% );
}


/*@@@@@@@@@@@@@@@
ELM HOVER GLOW
@@@@@@@@@@@@@@@*/

/* AVG BTN */
.TreHy:hover
{
	box-shadow: 0.0 0 var(--GyTreDe) var(--PoSi);
}

/* SM BTN */
.HriNe_Vo:hover
, .KruTra:hover
{
	overflow: visible;
	background-color: var(--PoSiVoHu);
	box-shadow: 0 0 var(--GyTreHu) var(--PoSi);
}

/* TOGGLE BTN */
.HriNe_HyHo_Ka:hover
{
	box-shadow: 0 0 var(--GyKaHu) var(--PoSi);
}

/* TEXT__MENU_TITLE---HOVER PTR  */
.KeDru_NzVa__TraKz:hover
{
	font-size: var(--GyTreHi);
	outline: none;

	box-shadow: 0 -0.5em var(--GyTreDe) var(--PoSeVu);
}

/*@@@@@@@@@@@@@@@
ELM FOCUS DOTTED OUTLINE
@@@@@@@@@@@@@@@*/

.KeDru_NzVa__TraKz:focus
, .KeDru_NzVa_Se__TraKz:focus
, .TreHy:focus
, .HriNe_TraKwi:focus
, .HriNe_Vo:focus
, .KruTra:focus
{
	outline: dotted var(--GyBe) var(--PoSi);
}

.HriNe_HyHo_Mz:focus + .HriNe_HyHo_Vu:before
{
	overflow: visible;
	outline: dotted var(--GyBe) var(--PoSi);
}

.HriNe_HyHo_Mz:focus + .HriNe_HyHo_Ka
{
	overflow: visible;
	outline: dotted var(--GyBe) var(--PoSi);
}

HriNe_HyHo_Ka


.KeDru_NzVa__TraKz:focus
.KeDru_NzVa_Se__TraKz:focus
{
	font-size: var(--GyTreHi);
}

/*@@@@@@@@@@@@@@@
ELM DISABLE
@@@@@@@@@@@@@@@*/

/* HIDDEN or SHOWN ICON */
.NzKa_HryVoHo
{
	transform: rotate( 0deg );
}

.NzKa_HryVoHy
{
	transform: rotate( 90deg );
}

/* ELM__FADED__NOT_IN_USE ------------------ */
.HriNe_TraHo
{
	cursor: not-allowed;

	color: var(--PoSiSpo);
	background-color: var(--PoSmuTra);
}
/* ELM__BLURRED__NOT_IN_USE */
.HriNe_HryHo
{
	cursor: not-allowed;

	color: var(--PoKuTraHy);
	background-color: var(--PoBreVo);

	filter: blur( 4px );
	/* filter: brightness( 25% ); */
}

/* ELM__HIDDEN */
.HriNe__SmoTy
{
	display:none;
}

/* @@@@@@@@@@@@@@@
CSS END
@@@@@@@@@@@@@@@ */