/**********************************************************************/
/**********************************************************************/



/**********************************************************************/
/* DEFAULTS */

	/******************************************************************/
	/* GENERAL */

		:root {
			--bubble-size: 3.4rem;
			--fnt-clr-main: #3E3E3E;
			/* PRIMARY **************************/
				--clr-P0: white;
				--clr-P1: #373F51;
				--clr-P2: #778DA9;
				--clr-P3: #A6B1E1;
				--clr-P4: #D8DBE2;
				--clr-P5: #F6F6F8;
				--clr-P6: #876F42;
			/* FLAVOURS *************************/
				--clr-F0: #7397B9;
				--clr-F1: #BA737E;
				--clr-F2: #9973BA;
				--clr-F3: #73AFBA;
				--clr-F4: #73BA8C;
				--clr-F5: #AFBA73;
			/* FLAVOURS (LIGHT) *****************/
				--clr-F0-L: #9AAABA;
				--clr-F1-L: #C68C95;
				--clr-F2-L: #AB8CC6;
				--clr-F3-L: #8CBDC6;
				--clr-F4-L: #8CC6A0;
				--clr-F5-L: #BDC68C;
			/* FLAVOURS (DARK) ******************/
				--clr-F0-D: #5F7C98;
				--clr-F1-D: #AA6973;
				--clr-F2-D: #8C69AA;
				--clr-F3-D: #69A0AA;
				--clr-F4-D: #69AA80;
				--clr-F5-D: #A0AA69;
			/* FLAVOURS (BOLD) ******************/
				--clr-F0-B: transparent;
				--clr-F1-B: #BA5766;
				--clr-F2-B: #8C57BA;
				--clr-F3-B: #57ABBA;
				--clr-F4-B: #57BA7A;
				--clr-F5-B: #ABBA57;
			/* WIDTH / HEIGHT *******************/
				--dialogue-mw: 33vw;
		}

		* { 
			position: relative; 
			margin: 0; 
			padding: 0; 
			box-sizing: border-box; 
		}
		html {
			font-family: "Font Awesome 5 Free", Helvetica, Arial;
			font-size: calc(14px + (19 - 14) * (100vw - 320px) / (1920 - 320));
			font-weight: 300;
			max-width: 100vw;
			color: var(--fnt-clr-main);
			-moz-osx-font-smoothing:   grayscale !important;
			 -webkit-font-smoothing: antialiased !important;
		}
		body {
			position: relative;
			overflow: hidden;
			overflow-y: scroll;
			max-width: 100vw;
				width: 100vw;
		}
		html, body, .gridMain, .gridItemCopy {
			scroll-behavior: smooth;
			scroll-snap-type: y proximity;
		}
		
		/**************************************************************/
		/* COLOR SCHEME */

			/* PRIMARY  ***********************************************/

				/* P0: WHITE                */
					/* BACKGROUND         */
						label.input,
						label.input .fill,
						label.input > .tags,
						label.input > label.tgl,
						label.input.glyph::before,
						label.input[data-rel]::after,
						label.input[data-nfo]::after, 
						label.input > span,
						label.input > div.scaffold,
						span.mono.key::before,
						span.mono.bold::before,
						.gridStub,
						.gridTabs .loaded::before,
						.gridDrop > .drop > .menu > a,
						.gridDrop > .drop > .menu > button,
						.gridDrop > .drop > .menu > form > button,
						.gridItemThreads > .bubble:hover::after { 
							background-color: white;
						}
						label.tgl, 
						label.tgl::after, 
						label.tgl::before,
						label.input,
						.gridMain.jumbo .gridItemHeader .title {
							border-color: white;
						}
						input:-webkit-autofill, 
						select:-webkit-autofill, 
						textarea:-webkit-autofill { 
							-webkit-box-shadow: 0 0 0px 1000px white inset;
									box-shadow: 0 0 0px 1000px white inset;
						}
					/* COLOR              */
						.threadCont .threadBubble.you,
						/* label.input[data-rel=" "]::after, */
						.gridMain.cover .gridItemName  h1,
						.gridMain.cover .gridItemName .h1,
						.gridMain.cover .gridItemName  h1 > *,
						.gridMain.cover .gridItemName .h1 > *,
						.gridMain:not(.jumbo) .gridItemName.d  h1,
						.gridMain:not(.jumbo) .gridItemName.d .h1,
						.gridMain:not(.jumbo) .gridItemName.d  h1 > *,
						.gridMain:not(.jumbo) .gridItemName.d .h1 > *,
						.dialog.header > .heading > span.current,
						.gridTabs.compact > *,
						.dflt, .norm, .good, .info, .warn, .nope, .mayb,
						.dflt-b::before, .dflt-a::after, .dflt-y::before, .dflt-n::after,
						.norm-b::before, .norm-a::after, .norm-y::before, .norm-n::after,
						.good-b::before, .good-a::after, .good-y::before, .good-n::after,
						.info-b::before, .info-a::after, .info-y::before, .info-n::after,
						.warn-b::before, .warn-a::after, .warn-y::before, .warn-n::after,
						.nope-b::before, .nope-a::after, .nope-y::before, .nope-n::after,
						.mayb-b::before, .mayb-a::after, .mayb-y::before, .mayb-n::after,
						.dflt:not(.heading):not(.help):not(.alert) *,  
						.norm:not(.heading):not(.help):not(.alert) *,  
						.good:not(.heading):not(.help):not(.alert) *,  
						.info:not(.heading):not(.help):not(.alert) *,  
						.warn:not(.heading):not(.help):not(.alert) *,  
						.nope:not(.heading):not(.help):not(.alert) *,
						.mayb:not(.heading):not(.help):not(.alert) *,
						input.rdo[type="radio"]:checked + label.input.rdo > span,
						.gridTabs.buttons>input.reveal.open:not(.trade):not(:checked)+label {
							color: white;
						}
					/* MANDATE BACKGROUND */
						.notused { background-color: white !important; }
					/* MANDATE COLOR      */
						.heading.dflt, .heading.dflt *,
						.heading.norm, .heading.norm *,
						.heading.nope, .heading.nope *,
						.heading.mayb, .heading.mayb *,
						.heading.info, .heading.info *,
						.heading.good, .heading.good *,
						.heading.warn, .heading.warn *,
						.gridMain.jumbo .gridItemHeader .title {
							color: white !important;
						}
				/* P1: CHARCOAL             */
					/* BACKGROUND         */
						html,
						.dialog.header,
                        .gridMain.jumbo .gridHeader,
						.gridMain.jumbo .gridItemContent,
						.gridMain.jumbo .gridItemDivide::after,
						.gridMain.jumbo .gridItemContent,
						.gridMain:not(.jumbo) .gridItemHeader {
							background-color: #373F51;
						}
					/* COLOR              */
						.gridDrop > .drop > .menu > a,
						.gridDrop > .drop > .menu > button,
						.gridDrop > .drop > .menu > form > button,
						.gridTabs.compact > * > label:hover,
						.gridTabs.compact > .gridDrop:focus-within > label,
						.gridSearch:focus-within ~ header.gridHeader label#btnSearch {
							color: #373F51;
						}
					/* MANDATE BACKGROUND */
						.notused { background-color: #373F51 !important; }
					/* MANDATE COLOR      */
						.notused { color: #373F51 !important; }
				/* P2: AIR SHADOW BLUE      */
					/* BACKGROUND         */
						input.rdo[type="radio"]:checked + label.input.rdo > span { 
							background-color: #778DA9; 
						}
						.tags > input.tag:checked + label.tag::before {
							border-color: #778DA9;
						}
					/* COLOR              */
						.notused { color: #778DA9; }
					/* MANDATE BACKGROUND */
						.notused { background-color: #778DA9 !important; }
					/* MANDATE COLOR      */
						.notused { color: #778DA9 !important; }
				/* P3: MAXIMUM BLUE-PURPLE  */
					/* BACKGROUND         */
						input[type="radio"][name="pmethod"]:checked + .ccard,
						.tags > input.tag:checked + label.tag::before { 
							background-color: #A6B1E1; 
						}
						.gridStub:hover {
							border-color: #A6B1E1; 
						}
					/* COLOR              */
						.notused { color: #A6B1E1; }
					/* MANDATE BACKGROUND */
						.notused { background-color: #A6B1E1 !important; }
					/* MANDATE COLOR      */
						.notused { color: #A6B1E1 !important; }
				/* P4: GAINSBORO            */
					/* BACKGROUND         */
						.ccard,
						.gridDrop > .drop > .menu > a:hover,
						.gridDrop > .drop > .menu > button:hover,
						.gridDrop > .drop > .menu > form > button:hover,
						.gridItemChatBox > .threadCont,
						.threadMsg > .threadDate > span, 
						.tags > input.tag:checked + label.tag::before,
						.gridDrop > .drop > .menu input[type="radio"].ctrl:focus + *,
						.gridDrop > .drop > .menu input[type="radio"].ctrl:checked + * {
							background-color: #D8DBE2;
						}
						.tags > label.tag::before,
						.gridItemThreads > .bubble:hover::after {
							border-color: #D8DBE2;
						}
					/* COLOR              */
						label.rating:not(.thumbs)[data-cnt="100"]>div>label { 
							color: #D8DBE2; 
						}
					/* MANDATE BACKGROUND */
						.notused { background-color: #D8DBE2 !important; }
					/* MANDATE COLOR      */
						.notused { color: #D8DBE2 !important; }
				/* P5: WHITE SMOKE          */
					/* BACKGROUND         */
						.cutout,
						.dialog.box,
						.loaded::before,
						.shield>i::after,
						.tags > label.tag::before,
						.gridMain:not(.jumbo) .gridItemContent,
						.gridTabs label.input,
						.gridTabs label.input .fill,
						.gridTabs label.input > .tags,
						.gridTabs label.input > label.tgl,
						.gridTabs label.input.glyph::before,
						.gridTabs label.input[data-rel]::after,
						.gridTabs label.input[data-nfo]::after, 
						.gridTabs label.input > span:first-child,
						.gridTabs label.input > div.scaffold,
						.gridTabs.compact > * > label:hover,
						.threadCont .threadBubble.them,
						.gridTabs.compact > .gridDrop:focus-within > label,
						.gridTabs.compact > * > input[type="radio"].reveal:focus:checked + label,
						.gridSearch:focus-within ~ header.gridHeader label#btnSearch {
							background-color: #F6F6F8;
						}
						.gridTabs label.input > input:-webkit-autofill, 
						.gridTabs label.input > select:-webkit-autofill, 
						.gridTabs label.input > textarea:-webkit-autofill {
							-webkit-box-shadow: 0 0 0px 1000px #F6F6F8 inset;
									box-shadow: 0 0 0px 1000px #F6F6F8 inset;
						}
					/* COLOR              */
						.gridTabs label.input[data-rel=" "]::after { 
							color: #F6F6F8; 
						}
					/* MANDATE BACKGROUND */
						.notused { background-color: #F6F6F8 !important; }
						.cutout {
							border-color: #F6F6F8 !important;
						}
					/* MANDATE COLOR      */
						.notused { color: #F6F6F8 !important; }
				/* P6: FRENCH BISTRE       */
					/* BACKGROUND         */
						.notused { background-color: #876F42; }
						.notused { border-color: #876F42; }
					/* COLOR              */
						label.rating:not(.thumbs)[data-cnt="50" ]>div>label { 
							color: #876F42; 
						}
					/* MANDATE BACKGROUND */
						.notused { background-color: #876F42 !important; }
						.notused { border-color: #876F42 !important; }
					/* MANDATE COLOR      */
						.notused { color: #876F42 !important; }


			/* FLAVOURS (MAIN)  ***************************************/

				/* F0: AIR SUPERIORITY BLUE       */
					/* BACKGROUND         */
						.heading.good,
						.wait.show > div,
						.gridTabs.buttons > label:hover,
						.norm, .norm-b::before, .norm-a::after,
						label.input:not(.rating):not(.toggle):not(.slc):focus-within { 
							background-color: #7397B9; 
						}
						label.input > label.tgl:focus-within,
						label.input.slc-txt:focus-within>select~.tags,
						label.input.slc-txt:focus-within>select~input,
						input[type="radio"][name="pmethod"]:checked + .ccard,
						label.input:not(.rating):not(.toggle):not(.slc):focus-within,
						input.rdo[type="radio"]:checked + label.input.rdo > span {
							border-color: #7397B9; 
						}
					/* COLOR              */
						.lock,
						#title,
						#settings > form > .auth:hover,
						#settings > form > button#appdrawer:hover,
						#settings > form > #logoutLbl > span#user a:hover,
						label.input>select:focus+span { 
							color: #7397B9; 
						}
					/* MANDATE BACKGROUND */
						.notused { background-color: #7397B9 !important; }
					/* MANDATE COLOR      */
						.notused { color: #7397B9 !important; }
				/* F1: TURKISH ROSE (RED)         */
					/* BACKGROUND         */
						.heading.nope,
						label.input .validate,
						.nope, .nope-b::before, .nope-a::after { 
							background-color: #BA737E; 
						}
					/* COLOR              */
						.notused { color: #AA6973; }
					/* MANDATE BACKGROUND */
						.notused { border-color: #AA6973 !important; }
					/* MANDATE COLOR      */
						.notused { color: #AA6973 !important; }
				/* F2: PURPLE MOUNTAIN MAJESTY    */
					/* BACKGROUND         */
						.heading.mayb,
						.mayb, .mayb-b::before, .mayb-a::after { 
							background-color: #9973BA; 
						}
					/* COLOR              */
						label.rating > div > label {
							color: #9973BA; 
						}
					/* MANDATE BACKGROUND */
						.notused { border-color: #9973BA !important; }
					/* MANDATE COLOR      */
						.notused { color: #9973BA !important; }
				/* F3: MOONSTONE BLUE (TURQUOISE) */
					/* BACKGROUND         */
						.heading.info,
						.info, .info-b::before, .info-a::after { 
							background-color: #73AFBA; 
						}
					/* COLOR              */
						.notused { color: #73AFBA; }
					/* MANDATE BACKGROUND */
						.notused { border-color: #73AFBA !important; }
					/* MANDATE COLOR      */
						.notused { color: #73AFBA !important; }
				/* F4: IGUANA GREEN               */
					/* BACKGROUND         */
						.heading.good,
						.good, .good-b::before, .good-a::after { 
							background-color: #73BA8C; 
						}
					/* COLOR              */
						.notused { color: #73BA8C; }
					/* MANDATE BACKGROUND */
						.notused { border-color: #73BA8C !important; }
					/* MANDATE COLOR      */
						.notused { color: #73BA8C !important; }
				/* F5: MISTY MOSS (YELLOW)        */
					/* BACKGROUND         */
						.heading.warn,
						.warn, .warn-b::before, .warn-a::after { 
							background-color: #AFBA73; 
						}
					/* COLOR              */
						.notused { color: #AFBA73; }
					/* MANDATE BACKGROUND */
						.notused { border-color: #AFBA73 !important; }
					/* MANDATE COLOR      */
						.notused { color: #AFBA73 !important; }
			/* FLAVOURS (LIGHT) ***************************************/

				/* F0: AIR SUPERIORITY BLUE       */
					/* BACKGROUND         */
						.notused { background-color: #9AAABA; }
					/* COLOR              */
						.notused { color: #9AAABA; }
					/* MANDATE BACKGROUND */
						.notused { background-color: #9AAABA !important; }
					/* MANDATE COLOR      */
						.notused { color: #9AAABA !important; }
				/* F1: TURKISH ROSE (RED)         */
					/* BACKGROUND         */
						.notused { background-color: #C68C95; }
					/* COLOR              */
						.notused { color: #C68C95; }
					/* MANDATE BACKGROUND */
						.notused { background-color: #C68C95 !important; }
					/* MANDATE COLOR      */
						.notused { color: #C68C95 !important; }
				/* F2: PURPLE MOUNTAIN MAJESTY    */
					/* BACKGROUND         */
						.threadCont .threadBubble.you { 
							background-color: #AB8CC6; 
						}
					/* COLOR              */
						.notused { color: #AB8CC6; }
					/* MANDATE BACKGROUND */
						.notused { background-color: #AB8CC6 !important; }
					/* MANDATE COLOR      */
						.notused { color: #AB8CC6 !important; }
				/* F3: MOONSTONE BLUE (TURQUOISE) */
					/* BACKGROUND         */
						.notused { background-color: #8CBDC6; }
					/* COLOR              */
						.notused { color: #8CBDC6; }
					/* MANDATE BACKGROUND */
						.notused { background-color: #8CBDC6 !important; }
					/* MANDATE COLOR      */
						.notused { color: #8CBDC6 !important; }
				/* F4: IGUANA GREEN               */
					/* BACKGROUND         */
						.notused { background-color: #8CC6A0; }
					/* COLOR              */
						.notused { color: #8CC6A0; }
					/* MANDATE BACKGROUND */
						.notused { background-color: #8CC6A0 !important; }
					/* MANDATE COLOR      */
						.notused { color: #8CC6A0 !important; }
				/* F5: MISTY MOSS (YELLOW)        */
					/* BACKGROUND         */
						.notused { background-color: #BDC68C; }
					/* COLOR              */
						.notused { color: #BDC68C; }
					/* MANDATE BACKGROUND */
						.notused { background-color: #BDC68C !important; }
					/* MANDATE COLOR      */
						.notused { color: #BDC68C !important; }

			/* FLAVOURS (DARK)  ***************************************/

				/* F0: AIR SUPERIORITY BLUE       */
					/* BACKGROUND         */
						.heading.reveal.norm:hover,
						.heading.reveal.norm:hover+.heading,
						.norm:not(.heading):not(.tgl):not(.help):not(.alert):hover,
						.norm:not(.heading):not(.tgl):not(.help):not(.alert):active,
						.norm:not(.heading):not(.tgl):not(.help):not(.alert):focus,
						.gridTabs.buttons > input.reveal.open:not(.trade):not(:checked) + label:not(:hover)  { 
							background-color: #5F7C98; 
						}
					/* COLOR              */
						a { 
							color: #5F7C98; 
						}
					/* MANDATE BACKGROUND */
						.notused { border-color: #5F7C98 !important; }
					/* MANDATE COLOR      */
						.notused { color: #5F7C98 !important; }
				/* F1: TURKISH ROSE (RED)         */
					/* BACKGROUND         */
						.counter,
						.heading.reveal.nope:hover,
						.heading.reveal.nope:hover+.heading,
						.nope:not(.heading):not(.tgl):not(.help):not(.alert):hover,
						.nope:not(.heading):not(.tgl):not(.help):not(.alert):active,
						.nope:not(.heading):not(.tgl):not(.help):not(.alert):focus  { 
							background-color: #AA6973; 
						}
						label.input .validate { 
							border-color: #AA6973; 
						}
					/* COLOR              */
						.notused { color: #AA6973; }
					/* MANDATE BACKGROUND */
						.notused { border-color: #AA6973 !important; }
					/* MANDATE COLOR      */
						.notused { color: #AA6973 !important; }
				/* F2: PURPLE MOUNTAIN MAJESTY    */
					/* BACKGROUND         */
						.heading.reveal.mayb:hover,
						.heading.reveal.mayb:hover+.heading,
						.mayb:not(.heading):not(.tgl):not(.help):not(.alert):hover,
						.mayb:not(.heading):not(.tgl):not(.help):not(.alert):active,
						.mayb:not(.heading):not(.tgl):not(.help):not(.alert):focus  { 
							background-color: #8C69AA; 
						}
					/* COLOR              */
						.notused { color: #8C69AA; }
					/* MANDATE BACKGROUND */
						.notused { border-color: #8C69AA !important; }
					/* MANDATE COLOR      */
						.notused { color: #8C69AA !important; }
				/* F3: MOONSTONE BLUE (TURQUOISE) */
					/* BACKGROUND         */
						.heading.reveal.info:hover,
						.heading.reveal.info:hover+.heading,
						.info:not(.heading):not(.tgl):not(.help):not(.alert):hover,
						.info:not(.heading):not(.tgl):not(.help):not(.alert):active,
						.info:not(.heading):not(.tgl):not(.help):not(.alert):focus  { 
							background-color: #69A0AA; 
						}
					/* COLOR              */
						.notused { color: #69A0AA; }
					/* MANDATE BACKGROUND */
						.notused { border-color: #69A0AA !important; }
					/* MANDATE COLOR      */
						.notused { color: #69A0AA !important; }
				/* F4: IGUANA GREEN               */
					/* BACKGROUND         */
						.heading.reveal.good:hover,
						.heading.reveal.good:hover+.heading,
						.good:not(.heading):not(.tgl):not(.help):not(.alert):hover,
						.good:not(.heading):not(.tgl):not(.help):not(.alert):active,
						.good:not(.heading):not(.tgl):not(.help):not(.alert):focus  { 
							background-color: #69AA80; 
						}
					/* COLOR              */
						.notused { color: #69AA80; }
					/* MANDATE BACKGROUND */
						.notused { border-color: #69AA80 !important; }
					/* MANDATE COLOR      */
						.notused { color: #69AA80 !important; }
				/* F5: MISTY MOSS (YELLOW)        */
					/* BACKGROUND         */
						.heading.reveal.warn:hover,
						.heading.reveal.warn:hover+.heading,
						.warn:not(.heading):not(.tgl):not(.help):not(.alert):hover,
						.warn:not(.heading):not(.tgl):not(.help):not(.alert):active,
						.warn:not(.heading):not(.tgl):not(.help):not(.alert):focus  { 
							background-color: #A0AA69; 
						}
					/* COLOR              */
						.notused { color: #A0AA69; }
					/* MANDATE BACKGROUND */
						.notused { border-color: #A0AA69 !important; }
					/* MANDATE COLOR      */
						.notused { color: #A0AA69 !important; }

			/* FLAVOURS (BOLD)  ***************************************/

				/* F0: AIR SUPERIORITY BLUE       */
					/* BACKGROUND         */
						.notused { background-color: transparent; }
					/* COLOR              */
						.notused { color: transparent; }
					/* MANDATE BACKGROUND */
						.notused { background-color: transparent !important; }
					/* MANDATE COLOR      */
						.notused { color: transparent !important; }
				/* F1: TURKISH ROSE (RED)         */
					/* BACKGROUND         */
						.notused { background-color: #BA5766; }
					/* COLOR              */
						label.input[data-rel="*"]::after { 
							color: #BA5766; 
						}
					/* MANDATE BACKGROUND */
						.notused { background-color: #BA5766 !important; }
					/* MANDATE COLOR      */
						label.rating:not(.thumbs)>div>[data-strike] { 
							color: #BA5766 !important; 
						}
				/* F2: PURPLE MOUNTAIN MAJESTY    */
					/* BACKGROUND         */
						.notused { background-color: #8C57BA; }
					/* COLOR              */
						.notused { color: #8C57BA; }
					/* MANDATE BACKGROUND */
						.notused { background-color: #8C57BA !important; }
					/* MANDATE COLOR      */
						.notused { color: #8C57BA !important; }
				/* F3: MOONSTONE BLUE (TURQUOISE) */
					/* BACKGROUND         */
						.notused { background-color: #57ABBA; }
					/* COLOR              */
						.shield.credential>i::before { color: #57ABBA; }
					/* MANDATE BACKGROUND */
						.notused { background-color: #57ABBA !important; }
					/* MANDATE COLOR      */
						.notused { color: #57ABBA !important; }
				/* F4: IGUANA GREEN               */
					/* BACKGROUND         */
						.notused { background-color: #57BA7A; }
					/* COLOR              */
						.shield.identified>i::before { color: #57BA7A; }
					/* MANDATE BACKGROUND */
						.notused { background-color: #57BA7A !important; }
					/* MANDATE COLOR      */
						.notused { color: #57BA7A !important; }
				/* F5: MISTY MOSS (YELLOW)        */
					/* BACKGROUND         */
						.notused { background-color: #ABBA57; }
					/* COLOR              */
						label.input[data-rel="~"]::after,
						label.rating:not(.thumbs)[data-cnt="500"]>div>label { 
							color: #ABBA57; 
						}
					/* MANDATE BACKGROUND */
						.notused { background-color: #ABBA57 !important; }
					/* MANDATE COLOR      */
						.notused { color: #ABBA57 !important; }

		/**************************************************************/
		/* MODAL */

			body > div#modal-root {
				position: fixed;
				display: flex;
				justify-content: center;
				align-items: center;
				top: 0; left: 0;
				height: 100vh;
				width: 100vw;
				pointer-events: none;
			}
			body > div#modal-root:not(:empty) {
				background-color: rgba(0,0,0,.40);
				pointer-events: all;
			}
			body > div#modal-root > * {
				margin-bottom: 15vh;
				border-radius: .5em;
			}

			.dialog {
				display: grid;
				grid-gap: 0 0;
				max-width: var(--dialogue-mw);
			}
				.dialog.header {
					width: min-content;
					min-width: 100%;
					grid-template-columns: auto 1.75em;
					grid-template-areas: "heading close";
					border-radius: .5em .5em 0 0;
					padding: .5em;
					padding-left: .75em;
					z-index: 1;
				}
					.dialog.header > .heading {
						grid-area: heading;
						display: grid;
						justify-content: start;
						margin-right: 1em;
					}

						.dialog.header > .heading > span.current {
							min-width: max-content;
							cursor: default;
						}
						.dialog.header > .heading > span::before,
						.dialog.header > .heading > span:not(.current) {
							color: rgb(165, 165, 165);
						}
						.dialog.header > .heading > span {
							display: flex;
							justify-content: space-around;
							align-items: center;
						}
						.dialog.header > .heading > span:not(:first-of-type)::before {
							content: "\f054";
							margin: 0 .5em;
						}
						.dialog.header > button.close {
							border-radius: .25em;
						}
					.dialog.header > .close {
						grid-area: close;
						width: 2em !important;
					}
				.dialog.box {
					padding: 1.5em 1em;
					padding-top: 1em;
					border-radius: 0 0 .5em .5em;
					overflow: hidden;
				}
					.dialog.box > div {
						overflow: hidden;
					}
					.dialog.box > div:not(.show) {
						opacity: 0;
						max-width: 0;
						max-height: 0;
						transition: opacity     .5s ease,
									padding    .25s ease,
									max-height  .5s ease .6s,
									max-width   .5s ease;
					}
					.dialog.box > div.show {
						opacity: 1;
						max-width:  33vw;
						max-height: 50vh;
						padding: 0 .25em;
						transition: padding    .25s ease,
									max-height  .5s ease,
									max-width   .5s ease;
					}
						.dialog.box > div > * {
							width:  max-content;
							height: max-content;
							max-width: calc(var(--dialogue-mw) - 3rem);
						}

		/**************************************************************/
		/* SCROLL-SNAP */

			.gridItemSearch,
			.gridItemContent  	 { scroll-snap-margin-top: -4.76rem; scroll-margin-top: -4.76rem; }
			.gridItemCopy > *    { scroll-snap-margin-top:     3rem; scroll-margin-top:     3rem; }
			.gridItemCopy .block:not(.tkn) { 
				scroll-snap-margin-top: 3rem; 
				scroll-margin-top: 3rem; 
			}
			.gridItemSearch   	 { scroll-snap-align:   end; }
			.panel.slab,
			.gridItemContent,
			.gridItemCopy > *,
			.gridItemCopy>.panel>.body>.block { scroll-snap-align: start; }
	
		/**************************************************************/
		/* HEADINGS */

			h1, .h1 { font-size: 1.90rem; /* font-size: calc(1.2 * 1.2  * 1.2  * 1.2 * 1.2 * 1rem); */ }
			h2, .h2 { font-size: 1.60rem; /* font-size: calc(1.2 * 1.2  * 1.2  * 1.2 * 1rem); */ }
			h3, .h3 { font-size: 1.40rem; /* font-size: calc(1.2 * 1.2  * 1.2 * 1rem); */ }
			h4, .h4 { font-size: 1.25rem; /* font-size: calc(1.2 * 1.2 * 1rem); */ }
			h5, .h5 { font-size: 1.12rem; /* font-size: calc(1.2 * 1rem); */ }
			h6, .h6 { font-size: 1.00rem; }
			h1, .h1, h2, .h2, h3, .h3, 
			h4, .h4, h5, .h5, h6, .h6 {
				font-family: inherit;
				font-weight: 400;
				color: #444444;
				/* margin: .27em 0; */
				padding: .27em 0;
			}
			h1 .small, .h1 .small, h1 small, .h1 small,
			h2 .small, .h2 .small, h2 small, .h2 small,
			h3 .small, .h3 .small, h3 small, .h3 small,
			h4 .small, .h4 .small, h4 small, .h4 small,
			h5 .small, .h5 .small, h5 small, .h5 small,
			h6 .small, .h6 .small, h6 small, .h6 small { font-size: 65%; }

		/**************************************************************/
		/* TEXT */

			caption { text-align: right; margin-bottom: 1rem; }

			hr {
				border: none;
				border-top-style: inset;
				border-top-width: 1px;
			}
            hr.dashed {
                border-top-style: dashed;
            }

			ol:not(.bare) > li,
			ul:not(.bare) > li { 
				padding-inline-start: 1em;
				margin-bottom: 1em; 
			}
			li > ol:not(.bare), 
			li > ul:not(.bare) { margin-top: 1em; }
			ol:not(.bare), 
			ul:not(.bare) { 
				font-size: .85em; 
				font-weight: 400; 
				margin-left: 3em; 
			}
			
			dt { font-weight: 700; }
			dd, dt { line-height: 1.42857143; }

			i.fas:first-child:not(:only-child) { margin-right: .25em; }
			i.fas:last-child:not(:only-child)  { margin-left:  .25em; }

			a, button { cursor: pointer !important; }
			button:disabled { cursor: not-allowed !important; }
			a { /*color: #337ab7;*/ text-decoration: none; font-weight: 400; }
			a.flat { color: inherit; }

			p.text { font-size: .9em; }
			p.mini-text { font-size: .8em; }
			.legal { text-align: justify; font-family: Adobe Garamond; }

			p, ol, ul { line-height: 1.5; }
			ol, ul, p, address:not(.flat) { margin-bottom: 1em; }

			.accounting {
				width: 100%;
				display: flex;
				justify-content: space-between;
			}
			.accounting::before { content: '$'; }
			.accounting[data-cur]::before { content: attr(data-cur); }
			span.example {
				font-style: italic;
			}
			span.example::before {
				content: 'i.e.';
				margin-right: .5em;
				font-weight: bold;
			}

			.bracket { display: inline; }
			.bracket::before { content: '('; }
			.bracket::after  { content: ')'; }
			.bracket > span:not(:last-child)::after {
				content: ',';
				font: "Font Awesome 5 Free", Helvetica, Arial;
				font-weight: normal;
			}
			.bracket > span[data-delim]:not(:last-child)::after {
				content: attr(data-delim);
			}
			.bracket.space > span:not(:last-child)::after {
				padding-right: .25em; 
			}

			blockquote {
				border-left: .2rem solid #666;
				color: #666;
				font-style: italic;
				padding: .25rem .5rem;
			}

			sup {
				color: inherit;
				font-size: .6em;
				margin: 0 .5rem;
			}

		/**************************************************************/
		/* CODE */

			.code {
				position:   relative;
					width:  100%;
				/**/ background-color: #f8f8f8;
				border: solid 1px #cacaca;
				border-radius: .15em;
				-webkit-overflow-scrolling: touch;
						overflow: auto;
			}
			.code > div {
				position: relative;
				width:    100%;
				position: absolute;
				padding:  0 1em;
			}
			code {
				display: block;
				position: relative;
				font-family: monospace;
				font-size: .65rem;
				white-space: pre;
				margin: 0 !important;
				padding: 0 .5em;
				-webkit-margin-before: 0 !important;
				-webkit-margin-after:  0 !important;
				-webkit-margin-start:  0 !important;
				-webkit-margin-end:    0 !important;
			}

		/**************************************************************/
		/* LOCALE */

			address {
				-webkit-user-select: all;
				   -moz-user-select: all;
					-ms-user-select: all;
					 -o-user-select: all;
						user-select: all;
			}
			address > * {
				margin-bottom: .125em;
				font-weight: 400;
			}
			address > .name {
				font-weight: 600;
				margin-bottom: .25em;
			}
			address > .name,
			address > .street,
			address > .country { 
				display: block; 
			}
			address > .city,
			address > .region,
			address > .postal,
			address.flat > .name,
			address.flat > .street,
			address.flat > .country { 
				display: inline-block; 
			}
			address > *:empty {
				display: none;
				visibility: hidden;
			}
			address.collapse,
			address.flat > * {
				margin-bottom: 0;
			}
			address > *:not(:empty) ~ .region:not(:empty)::before,
			address > *:not(:empty) ~ .postal:not(:empty)::before,
			address.flat > *:not(:empty) ~ *:not(:empty)::before { 
				content: '\00a0';
			}
			address > .city:not(:empty)::after,
			address.flat > .name:not(:empty)::after,
			address.flat > .street:not(:empty)::after,
			address.flat > .city:not(:empty)::after, 
			address.flat > .postal:not(:empty)::after, 
			address.flat > .region:not(:empty) + .postal:empty::after { 
				content: ',';
			}
			address.flat {
				display: inline;
			}

			time { font-weight: bold; }

		/**************************************************************/
		/* MISC */

			.shield>i::before,
			.gridSearch::before,
			select+span:empty::before,
			label.input.glyph::before,
			label.input[data-rel]::after,
			label.rating:not(.thumbs)>div>label,
			label.input[data-nfo]>div.help::before {
				font-weight: 900;
				font-family: "Font Awesome 5 Free" !important;
				font-style:   normal !important;
				font-variant: normal !important;
				text-rendering: auto !important;
				/* line-height: 1; */
				-moz-osx-font-smoothing: grayscale   !important;
				-webkit-font-smoothing: antialiased !important;
			}
			.invisible {
				position: relative;
				top: 0; left: 0;
				opacity: 0;
				position: absolute;
			}

			.code,
			.ccard,
			label.tgl,
			.gridStub,
			.dialog.header,
			.tkn:not(.heading):not(.small),
			button:not(.clear):not(.tkn.small),
			[data-full]::before,
			.table .column.left,
			label.input:not(.toggle), 
			.gridTabs.buttons > label,
			.gridTabs.buttons > div.default,
			body > div#modal-root > *,
			.gridDrop > .drop > .menu > a, 
			.gridDrop > .drop > .menu > button, 
			.gridDrop > .drop > .menu > form > button,
			.gridItemChatBox > .threadCont,
			.threadCont .threadBubble,
			.gridItemThreads > .bubble:hover::after {
				box-shadow:  0px 4px 6px -1px rgba(0, 0, 0, 0.15);
			}
			.table .column:not(.left) {
				box-shadow: -4px 0px 0px  0px white, 
							 0px 4px 6px -1px rgba(0, 0, 0, 0.15);
			}
			.panel.slab > label.heading:first-of-type {
				box-shadow:  0px 4px 6px -1px rgba(0, 0, 0, 0.15),
							38px 4px 6px -1px rgba(0, 0, 0, 0.15);
			}
			.shield>i, 
			label.rating:not(.thumbs)>div>label::before,
			label.rating:not(.thumbs)>div>label[data-rating-half]::before,
			label.rating:not(.thumbs)[data-cnt]>div>[data-rating-half]::before {
				text-shadow:  0px 4px 6px rgba(0, 0, 0, 0.15);
			}
			span.mono.key::before {
				box-shadow:  1px 1px 0px 0px rgba(0, 0, 0, 0.15);
			}
			input.rdo[type="radio"]:checked + label.input.rdo > span {
				box-shadow:  0px 4px 3px -1px rgba(0, 0, 0, 0.15) inset;
			}
			input.rdo[type="radio"]:checked + label.input.rdo {
				box-shadow: none;
			}
			
			/* Don't show shadows when selecting text */
			/*::-moz-selection { background: #5af; color: #fff; text-shadow: none; }*/
			/*::selection { background: #5af; color: #fff; text-shadow: none; }*/

	/******************************************************************/
	/* FORMS */

		/**************************************************************/
		/* INPUTS */

			input {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			input[type="value"] {
				background: inherit !important;
				-webkit-appearance: attachment;
				font-size: inherit;
				font-weight: inherit;
				flex-grow: 1;
				flex-shrink: 1;
				text-align: end;
				border: none;
			}

			label { 
				white-space: nowrap; 
				font-weight: 400; 
				-webkit-user-select: none;
				   -moz-user-select: none;
					-ms-user-select: none;
						user-select: none;
			}
			label[role="menuitem"] {
				cursor: pointer;
			}

			label.input,
			label.toggle, 
			label.tgl, 
			label.rating,
			label.rating > div {
				position: relative;
				display: flex !important;
				flex-wrap: nowrap;
				flex-flow: row;
				align-items: center;
				/* min-height: 2rem; */
				/* background-color: #cccccc; */
			}

			label.input {
				justify-content: stretch;
				width: 100%;
				line-height: 1.5;
				color: var(--fnt-clr-main);
				font-size: .9rem !important;
				font-weight: 400;
				border-collapse: collapse;
				border-style: solid;
				border-width: 1px;
				border-radius: .15em;
				transition: border .125s ease-in-out;
			}
			label.input:not(.toggle):not(.rating)>*,
			label.input::after, label.input::before {
				position: relative;
				display: block;
			}
			label.input::after,
			label.input.glyph::before {
				z-index: 9;
			}
			label.input::after {
				width: .8em;
				/* max-height: 2rem; */
				align-self: stretch;
				border-radius: 0 .15em .15em 0; 
				content: '';
			}
			label.input:not([data-rel]):not([data-nfo])::after {
				width: .4em;
			}

			label.input * {
				border: none;
				border-collapse: collapse;
				border-radius: 0;
			}
			label.input .fill,
			label.input > span,
			input.rdo + label.input.rdo > span {
				padding: .5em .75em;
				color: inherit;
				font: inherit;
				font-size: .8em /* !important */;
				resize: none;
			}
			label.input .grow:not([type="radio"]), 
			label.input.slc-txt>select[data-restrict] {
				max-width: calc(100% - .5em);
				min-width: 5em;
				flex-basis: 5em;
			}
			label.input .grow, 
			label.input.slc-txt>select[data-restrict] {
				flex-grow: 1;
				flex-shrink: 1;
			}

			label.input > textarea:focus {
				resize: vertical;
			}
			label.input > label.input {
				border: none;
			}

			label.input > span,
			input.rdo + label.input.rdo > span {
				flex-shrink: 2;
				flex-grow:   0;
				font-weight: 600;
			}
			label.input > span { flex-basis: 25%; }
			label.input > span:first-child { padding-right: .5em; }
			label.input > span:last-child  { padding-left:  .5em; z-index: 10; }
			input.rdo + label.input.rdo > *,
			label.input.rating > span:first-child,
			label.input.toggle > span:first-child {
				background: inherit;
			}

			input.rdo,
			input[type="checkbox"].hoc,
			label.input > label.tgl > input[type="checkbox"] {
				-webkit-appearance: none;
						appearance: none;
			}

			label.input.compact {
				width: auto;
			}

		/**************************************************************/
		/* TAGS */

			label.input > .tags {
				display: 	flex !important;
				flex-flow: 	row wrap;
				padding: 0 .25em 0 0 !important;
				font: inherit;
			}

			.tags > input.tag {
				-webkit-appearance: none;
				   -moz-appearance: none;
						appearance: none;
				position: absolute !important;
				z-index: 0;
				opacity: 0;
			}

			.tags > label.tag {
				font-size: .8em;
				line-height: 1.5;
				padding: .5em .6em;
				background: inherit;
				z-index: 1;
			}
			.tags > label.tag > span.more {
				font-size: .7em;
				font-style: italic;
				line-height: 1em;
				vertical-align: super;
			}
			.tags > label.tag > span.more::before {
				content: ' (';
			}
			.tags > label.tag > span.more::after {
				content: ')';
			}

			.tags > label.tag::before {
				content:  ' ';
				display:  block;
				position: relative;
				top: 0; left: 0;
				margin: .3em .3em;
				width: calc(100% - .6em);
				height: 1.8em;
				position: absolute;
				border-style: solid;
				border-width: 1px;
				border-radius: .15em;
			}

		/**************************************************************/
		/* SUGGEST/VALIDATE */

			label.input .suggest,
			label.input .validate,
			.gridItemSearchBox .suggest {
				position: relative;
				display: flex !important;
				left: 0;
				width: 100%;
				position: absolute !important;
				display: flex;
				flex-flow: column nowrap;
			}
			label.input .validate {
				opacity: 0;
			}
			label.input .suggest,
			.gridItemSearchBox .suggest { top: 100%;}
			
			label.input .validate,
			label.input .suggest:not(:empty),
			.gridItemSearchBox .suggest:not(:empty) {
				margin-top: .5em;
				box-shadow: -3px 4px 5px -3px rgba(0, 0, 0, .25);
				border-style: solid;
				border-width: 1px;
				border-radius: .15em;
			}
			
			label.input .suggest:not(:empty),
			.gridItemSearchBox .suggest:not(:empty) {
				background: #fcfcfc;
				border-color: #acacac;
			}
			label.input .validate {
				bottom: 100%; left: -5px;
				margin-bottom: -2px;
			}
			label.input .suggest.open,
			.gridItemSearchBox .suggest.open {
				z-index: 9997;
			}
			label.input [name]:not(:invalid) ~ .validate,
			label.input .StripeElement:not([class*="invalid"]):not([class*="empty"]) ~ .validate,
			.submit:not(:hover) ~ * label.input input:not([form]):placeholder-shown ~ .validate  {
				pointer-events: none;
				visibility: hidden;
			}
			label.input [name]:invalid ~ .validate:hover,
			label.input .StripeElement--empty ~ .validate:hover,
			label.input .StripeElement--invalid ~ .validate:hover,
			.submit:hover ~ * label.input [name]:not([form]):invalid ~ .validate,
			.submit:hover ~ * label.input .StripeElement--empty ~ .validate,
			.submit:hover ~ * label.input .StripeElement--invalid ~ .validate,
			label.input input:focus:invalid:not(:placeholder-shown) ~ .validate,
			label.input input:hover:invalid:not(:placeholder-shown) ~ .validate {
				pointer-events: auto;
				visibility: visible;
				z-index: 9996;
				opacity: 1;
			}
			label.input .suggest > input,
			.gridItemSearchBox .suggest > input {
				position: absolute;
				opacity: 0;
			}
			label.input .suggest:not(.open),
			.gridItemSearchBox .suggest:not(.open) {
				pointer-events: none !important;
				visibility: hidden;
			}
			label.input .suggest > label,
			label.input .validate > label,
			.gridItemSearchBox .suggest > label {
				position: relative;
				padding: .5em;
				font-size: .9em;
				background: inherit;
				cursor: pointer;
				border-top:    solid 1px transparent;
				border-bottom: solid 1px transparent;
				color: #464646;
			}
			label.input .validate > label {
				border: none;
				color: white;
				font-size: .65rem;
				padding: .25em .5rem;
			}
			label.input .suggest > label > .more,
			.gridItemSearchBox .suggest > label > .more {
				vertical-align: super;
				font-style: italic;
				font-size: .9em;
				line-height: 1em;
				color: #7C7C7C;
			}
			label.input .suggest > label > .more::before,
			.gridItemSearchBox .suggest > label > .more::before {
				margin-left: .25em;
				content: ' (';
			}
			label.input .suggest > label > .more::after,
			.gridItemSearchBox .suggest > label > .more::after {
				content: ')';
			}
			label.input .validate > label:hover {
				cursor: help;
			}
			label.input .suggest > label:hover,
			label.input .validate > label:hover,
			.gridItemSearchBox .suggest > label:hover,
			form:invalid .submit:hover ~ * label.input > .validate > label {
				white-space: normal;
			}
			label.input .suggest > label > *,
			.gridItemSearchBox .suggest > label > * {
				pointer-events: none !important;
			}
			label.input .suggest > label:hover,
			label.input .suggest > input:checked + label,
			.gridItemSearchBox .suggest > label:hover,
			.gridItemSearchBox .suggest > input:checked + label {
				background:   #f0f0f0;
				border-color: #dbdbdb;
			}
			label.input .suggest > label:first-of-type:hover,
			label.input .suggest > input:first-of-type:checked + label,
			.gridItemSearchBox .suggest > label:first-of-type:hover,
			.gridItemSearchBox .suggest > input:first-of-type:checked + label {
				border-top-color:    transparent;
			}
			label.input .suggest > label:last-of-type:hover,
			label.input .suggest > input:last-of-type:checked + label,
			.gridItemSearchBox .suggest > label:last-of-type:hover,
			.gridItemSearchBox .suggest > input:last-of-type:checked + label {
				border-bottom-color: transparent;
			}

		/**************************************************************/
		/* GLYPHS */

			label.input.slc-txt>select[data-restrict],
			label.input.glyph:not(.slc-txt)>:not(span):not(label):not(.tag):not(.validate):not(.scaffold) { 
				max-width: calc(100% - 2.7em) !important; 
			}
			label.input.glyph::before {
				flex-basis: 2em;
				flex-grow: 1;
				border-radius: .15em 0 0 .15em;
				/* font-size: 1rem; */
				font-size: 1em;
			}

		/**************************************************************/
		/* SELECTS */
		
			label.input>select {
				cursor: context-menu;
				font-weight: 400 !important;
				-webkit-appearance: none;
				   -moz-appearance: none;
						appearance: none;
			}
			label.input>select+span:empty {
				flex-grow:   0;
				flex-shrink: 0;
				max-width:   0;
				pointer-events: none;
			}
			label.input>select+span:empty::before { 
				position: relative;
				content: '\f0d7'; 
				/* line-height: 2rem; */
				/* line-height: 2em; */
				margin-right: 1em;
				left: -.75em;
			}
			label.input[data-rel="*"].slc-txt.rev>select+span:empty::before,
			label.input[data-rel="*"]:not(.slc-txt)>select+span:empty::before { 
				left: -1em;
			}

			label.input.slc-txt>select:not([data-restrict]) { width: 5rem; }
			label.input.slc-txt.rev>select[data-restrict]~input { display: none; }

			label.input.slc-txt>select~.tags,
			label.input.slc-txt>select~input { 
				border-left: solid 1px #cacaca; 
			}
			label.input.slc-txt>select~input { 
				width: calc(100% - 7.5em);
				border-radius: 0;
				margin: 0 !important;
			}
			label.input.slc-txt>select~input[type="number"] {
				padding-left: 0;
				text-align: left;
			}

			label.input.slc-txt.rev::after { order: 5; }
			label.input.slc-txt.rev>select+span { order: 4; }
			label.input.slc-txt.rev>select { order: 3; }
			label.input.slc-txt.rev>select~input[type="number"] { order: 2; }
			label.input.slc-txt.rev::before { order: 1; }
			label.input.slc-txt.rev>select~input { 
				text-align:   right;
				border-right: solid 1px #cacaca; 
				border-left:  none;
			}

		/**************************************************************/
		/* DATES */

			label.input.date { 
				justify-content: flex-start; 
				/* width: 12em; */
			}
			label.input.date>i,
			label.input.date>[type="number"] { 
				font-size: 1.1em !important; 
				min-width: 0;
				line-height: 1 !important;
			}
			label.input.date>i,
			label.input.date>input {
				/* min-height: 2rem; */
				padding-top:    .41em !important;
				padding-bottom: .41em !important;
				padding-left:    0;
				padding-right:   0;
			}
			label.input.date>input::placeholder {
				font-size: .75em;
				line-height: 1.5;
				font-weight: 100;
			}
			label.input.date>				 { min-width: 1.5em; }
			label.input.date>input[size="4"] { min-width: 2.5em; }
			label.input.date>i 				 { min-width:  .5em; text-align: center; }
			label.input.date>input:nth-last-of-type(2)  		 { padding-right: .25em; }
			label.input.date.time>input[size="4"]:nth-of-type(3),
			label.input.date[data-rel]>input:nth-last-of-type(2) { padding-left:  .2em; padding-right: .5em; }
			label.input.date[data-rel]>input:nth-last-of-type(3) { padding-right: .2em; }

			label.input.date>input[size="2"]:nth-of-type(2)      { text-align: center; }
			label.input.date>input[size="2"]:nth-of-type(1),
			label.input.date.time>input[size="2"]:nth-of-type(4) { text-align:    end; }
			label.input.date>input[size="4"],
			label.input.date.time>input[size="2"]:nth-of-type(5) { text-align:  start; }

			label.input.date>i::before { content: '/'; }

			label.input.date.time { width: 15em; }
			label.input.date.time>input[size="4"]:nth-of-type(3) { 
				padding-left:  .2em;
				padding-right: .5em;
			}
			label.input.date.time>i:last-of-type { min-width: .25em; }
			label.input.date.time>i:last-of-type::before { content: ':'; }

			label.input.date>[type=number]::-webkit-inner-spin-button, 
			label.input.date>[type=number]::-webkit-outer-spin-button { 
				margin: 0; 
				-webkit-appearance: none; 
						appearance: none; 
			}

		/**************************************************************/
		/* RADIO GROUP */

			label.input.rdo {
				font-weight: 500;
				width: auto;
			}
			label.input.rdo,
			label.input.rdo > span {
				border-radius: 2em;
			}

			input.rdo,
			label.input.rdo {
				padding: 0;
			}
			input.rdo[type="radio"]:checked + label.input.rdo {
				line-height: initial;
			}
			input[type="radio"]:not(:checked) + label.input.rdo {
				cursor: pointer;
			}
			input[type="radio"]:not(:checked) + label.input.rdo:hover {
				filter: brightness(90%);
			}

		/**************************************************************/
		/* CHECKBOX TOGGLE */

			/* GENERAL    *************************************************/

				label.toggle {
					border: none;
					-webkit-user-select: none;
					 -khtml-user-select: none;
					   -moz-user-select: none;
						 -o-user-select: none;
							user-select: none;
				}
				label.rating,
				label.input.toggle {
					background-color: transparent;
					/* height: calc(2rem + 2px); */
					justify-content: flex-end;
				}

				label.input > label.tgl {
					flex-grow: 0;
					margin-left: .5em;
					border-left-style: solid;
					border-right-style: solid;
					border-width: 1px;
					border-color: #e4e4e4;
					overflow: hidden;
					cursor: ew-resize;
				}
				label.input > span:first-child {
					text-align: right;
				}

				input[type="checkbox"].hoc {
					position: absolute;
				}
				label.input > label.tgl > input[type="checkbox"],
				input[type="checkbox"].hoc+label.input>label.tgl>div {
					order: 1;
					-webkit-transition: all .15s ease-out;
							transition: all .15s ease-out;
				}
				label.input > label.tgl > input[type="checkbox"]:checked,
				input[type="checkbox"].hoc:checked+label.input>label.tgl>div { 
					max-width: 100%;
					min-width: 100%;
						width: 100%;
				}
				label.input > label.tgl > input[type="checkbox"]:not(:checked),
				input[type="checkbox"].hoc:not(:checked)+label.input>label.tgl>div { 
					max-width: 0;
					min-width: 0;
						width: 0;
				}
				input[type="checkbox"].hoc+.input+.reveal {
					overflow: hidden;
					transition: max-height .5s ease, padding-bottom .25s ease, opacity .5s ease;
					max-height: 0;
					opacity: 0;
				}
				input[type="checkbox"].hoc+.input {
					transition: margin .5s ease;
				}
				input[type="checkbox"].hoc:checked+.input,
				input[type="checkbox"].hoc:not(:checked)+.input+.reveal {
					padding-bottom: 0 !important;
				}
				input[type="checkbox"].hoc:checked+.input+.reveal {
					max-height: 100vh;
					opacity: 1;
				}
				
				label.input > label.tgl::after,
				label.input > label.tgl::before {
					line-height: 2.1;
					text-align: center;
				}
				label.input > label.tgl::before {
					max-width: calc(100% - .5rem);
					min-width: calc(100% - .5rem);
				}
				label.input > label.tgl::after {
					max-width: calc(100% + 1px - .5rem);
					min-width: calc(100% + 1px - .5rem);
				}
				label.input > label.tgl::before { order: 2; content: 'YES'; }
				label.input > label.tgl::after  { order: 3; content:  'NO'; }
				label.input > label.tgl[data-yes]::before { 
					content: attr(data-yes) attr(data-ycon); 
				}
				label.input > label.tgl[data-no ]::after  { 
					content: attr(data-no)  attr(data-ncon);  
				}
				label.input > label.tgl>span {
					text-align: right;
				}

				label.input > label.tgl>input,
				label.input > label.tgl::after,
				label.input > label.tgl::before {
					position: relative;
					display: inline-table;
					flex-grow: 0;
					flex-shrink: 0;
					left: -100%;
				}
				label.input > label.tgl,
				label.input > label.tgl > input[type="checkbox"] {
					border-radius: .25em;
				}

				.tgl::before {
					margin-right: .5rem;
					background-color: #e7e7e7;
					border-right-style: solid;
					border-right-width: 1px;
				}
				.tgl::after {
					margin-left:  .5rem;
					background-color: #cccccc;
					border-left-style: solid;
					border-left-width: 1px;
				}

			/* BACKGROUND *************************************************/

				.norm-y.tgl::before                                      { background-color: #286090; }
				.norm-n.tgl::after                                       { background-color: #548fc0; }
				.norm-y.tgl:not(:hover):not(:focus):not(:active)::before { background-color: #337ab7; }
				.norm-n.tgl:not(:hover):not(:focus):not(:active)::after  { background-color: #7e9eb9; }
				
				.good-y.tgl::before                                      { background-color: #449d44; }
				.good-n.tgl::after                                       { background-color: #97ce6a; }
				.good-y.tgl:not(:hover):not(:focus):not(:active)::before { background-color: #5cb85c; }
				.good-n.tgl:not(:hover):not(:focus):not(:active)::after  { background-color: #afd193; }
				
				.info-y.tgl::before                                      { background-color: #31b0d5; }
				.info-n.tgl::after                                       { background-color: #67bdcc; }
				.info-y.tgl:not(:hover):not(:focus):not(:active)::before { background-color: #5bc0de; }
				.info-n.tgl:not(:hover):not(:focus):not(:active)::after  { background-color: #87c8d4; }
				
				.warn-y.tgl::before                                      { background-color: #ec971f; }
				.warn-n.tgl::after                                       { background-color: #ddb66f; }
				.warn-y.tgl:not(:hover):not(:focus):not(:active)::before { background-color: #f0ad4e; }
				.warn-n.tgl:not(:hover):not(:focus):not(:active)::after  { background-color: #e4cda1; }
				
				.nope-y.tgl::before                                      { background-color: #c9302c; }
				.nope-n.tgl::after                                       { background-color: #cf6b7b; }
				.nope-y.tgl:not(:hover):not(:focus):not(:active)::before { background-color: #d9534f; }
				.nope-n.tgl:not(:hover):not(:focus):not(:active)::after  { background-color: #d69aa4; }

		/**************************************************************/
		/* RATING */

			label.rating { 
				flex-flow: column; 
				background-color: transparent; 
				height: auto;
				font-size: .9rem !important;
			}
			label.rating:not(.input) { 
				flex-flow: row; 
				justify-content: center;
				align-items: center;
			}

			label.rating > span { font-weight: 400; }
			label.rating:not(.input)::after { 
				width: 2.5rem;
				margin-left: .25em;
				font-weight: 600; 
				font-size: 1.1em;
				text-align: right;
				line-height: 2;
				content: '';
			}
			label[data-cnt].rating:not(.input)::after {
				content: attr(data-cnt) '+';
			}

			label.rating > div { 
				flex-direction: row-reverse;
				background-color: inherit; 
			}
			label.rating > div > input[type="radio"] { display: none; }
			label.rating > div > label { 
				width: auto;
				font-size: 1.5em; 
				margin: 0 !important;
				opacity: .4;
				line-height: 1.5;
			}
			label.rating.input > div > label { 
				cursor: pointer;
			}

			label.rating>div>[type="radio"]+label:hover,
			label.rating:not(.thumbs)>div>[type="radio"]+label:hover~label {
				opacity: .7;
			}
			label.rating>div>[type="radio"]:checked+label,
			label.rating:not(.thumbs)>div>[data-rating],
			label.rating:not(.thumbs)>div>[data-rating]~label,
			label.rating:not(.thumbs)>div>[data-rating-half],
			label.rating:not(.thumbs)>div>[data-rating-half]~label,
			label.rating:not(.thumbs)>div>[type="radio"]:checked~label {
				opacity: 1 !important;
			}

			label.rating:not(.thumbs)>div>label::before {
				content: "\f005";
			}
			label.rating:not(.thumbs)>div>label[data-rating-half]::before {
				content: "\f5c0";
			}
			label.rating:not(.thumbs)[data-cnt]>div>[data-rating-half]::before {
				content: "\f089";
			}

			label.rating.thumbs>div {
				font-size: 2rem;
				justify-content: space-evenly;
				max-width: 70%;
				min-width: 70%;
			}
			label.rating.thumbs>div>label {
				line-height: 1.2;
			}
			label.rating.thumbs>div>:first-of-type::before { content: "\f165"; }
			label.rating.thumbs>div>:last-of-type::before  { content: "\f164"; }
			label.rating.thumbs>div>label:first-of-type {
				-webkit-transform: scaleX(-1);
						transform: scaleX(-1);
			}

			label.rating.input>div,
			label.rating.thumbs>div {
				margin-top: .25rem;
			}

			label.input.rating::after,
			label.input.toggle::after { content: unset; }

		/**************************************************************/
		/* CARDS */

			.ccard {
				display: table;
				padding: .5rem;
				height: 6rem;
				border-radius: .5rem;
				border-style: solid;
				border-width: 1px;
				border-color: #C1C5D1;
				color: #484F62;
				overflow: hidden;
				transform-style: preserve-3d;
				text-align: left;
			}
				.ccard::before {
					content: "";
					position: relative;
					width: 150%;
					height: 100%;
					pointer-events: none;
					border-radius: 50%;
					background-color: white;
					transform: rotate(-21deg) translateX(-20%) translateY(-55%);
					transform-style: preserve-3d;
					transform-origin: bottom;
					z-index: 0;
					opacity: 0.1;
					position: absolute;
				}
				.ccard:hover::before {
					opacity: 0.25;
				}
			.ccard > div {
				display: grid;
				row-gap: .25rem;
				column-gap: .5rem;
				grid-template: repeat(2,1em) repeat(2,auto) / repeat(6,1fr);
				grid-template-areas: "name name name name name edit"
									 "num  num  num  num  num  num "
									 "hold hold hold hold hold hold"
									 "exp  exp  exp  none iss  iss ";
				align-items: stretch;
				justify-items: stretch;
				align-content: space-between;
				justify-content: space-between;
				height: 100%;
				width: 100%;
				z-index: 2;
			}

				.ccard .cname { 
					grid-area: name; 
				}
				.ccard .chold { 
					grid-area: hold; 
				}
				.ccard .cedit { 
					grid-area: edit; 
					font-weight: 900;
					-moz-osx-font-smoothing: grayscale;
					-webkit-font-smoothing: antialiased;
					display: inline-block;
					font-style: normal;
					font-variant: normal;
					text-rendering: auto;
					text-align: center;
					line-height: 1;
					visibility: hidden;
					cursor: pointer;
				}
					.ccard:hover .cedit { visibility: visible; }
					.ccard .cedit::before { content: "\f044"; }
				.ccard .cnum  { 
					grid-area:  num;
					font-size: .9em;
					font-family: 'Courier New', Courier, monospace;
				}
					.ccard .cnum::before { 
						content: 'XXXX\00a0XXXX\00a0XXXX\00a0'; 
						opacity: .75;
					}
				.ccard .cexp  { 
					grid-area:  exp; 
					align-self: end;
				}
					.ccard .cexp > span:first-child:after {
						content: '/';
						padding: 0 .25em;
					}
				.ccard .ciss  { 
					grid-area:  iss; 
					text-align: right;
				}
				.ccard .ciss > i  { 
					font-size: 1.4em;
					line-height: .9;
					margin-right: .2em;
					border-radius: 0.1em;
					overflow: hidden;
					display: inline-table;
				}

				.ccard .cname, .ccard .cedit {
					font-size: .75em;
				}
				.ccard .chold {
					font-size: .55em;
				}
				.ccard .cnum, .ccard .cexp {
					font-weight: bold;
					text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.5);
				}
					.ccard:hover .cnum, .ccard:hover .cexp {
						text-shadow: 1px -1px 0px rgba(255, 255, 255, 0.75);
					}
				.ccard .cnum, .ccard .cexp, .ccard:hover::before {
					transition: opacity        .15s ease-in,
								text-shadow    .15s ease-in,
								border-radius  .15s ease-in,
								opacity        .15s ease-in;
				}

				.ccard .fa-cc-visa::before {
					background-color: #1A1F71;
					color: white;
				}
				.ccard .fa-cc-mastercard::before {
					background-color: #FF5F00;
					color: white;
				}
				.ccard .fa-cc-discover::before {
					visibility: visible;
				}
				.ccard .fa-cc-diners::before {
					visibility: visible;
				}
				.ccard .fa-cc-amex::before {
					background-color: white;
					color: #2E77BB;
				}
				.ccard .fa-cc-jcb::before {
					visibility: visible;
				}

				input[type="radio"][name="pmethod"] {
					position: absolute;
					opacity: 0;
					z-index: 0;
				}
				input[type="radio"][name="pmethod"]:not(:checked) + .ccard {
					cursor: pointer;
				}

		/**************************************************************/
		/* SHIELDS */

			.shield {
				display: flex;
				flex-flow: column;
				align-items: center;
			}
			.shield>i::before { 
				content: '\f3ed'; 
				font-size: 1rem;
				text-align: center;
				cursor: help;
			}
			
			.shield>span { margin-top: .5em; }
			.shield.identified>span::before { content: 'Identified'; }
			.shield.credential>span::before { content: 'Accredited'; }

			.shield.large>i::before { font-size:  3rem; }

		/**************************************************************/
		/* SHINY */

			.shield,
			label.rating { 
				overflow: hidden !important; 
			}

			.shield>i::after,
			label.rating:not(.thumbs)[data-cnt]>div>[data-rating]::after,
			label.rating:not(.thumbs)[data-cnt]>div>[data-rating]~label::after,
			label.rating:not(.thumbs)[data-cnt]>div>[data-rating-half]::after,
			label.rating:not(.thumbs)[data-cnt]>div>[data-rating-half]~label::after {
				content: "";
				position: relative;
				top: -110%; left: -128%;
				width: 200%; height: 200%;
				position: absolute;
				transform: rotate(30deg);
				opacity: 0.1;
				pointer-events: none;
			}

			.shield, .rating {
				-webkit-user-select: none;
				   -moz-user-select: none;
					-ms-user-select: none;
						user-select: none;
			}

		/**************************************************************/
		/* PRIORITY / INFO */

			label.input[data-rel]::after {
				/* font-size: .7rem; */
				font-size: .7em;
				pointer-events: none;
			}
			label.input[data-rel=" "]::after { content: '\00a0' !important; }
			label.input[data-rel="~"]::after { content: '\f1ce' !important; }
			label.input[data-rel="*"]::after { content: '\f069' !important; }
			label.input.rdo[data-rel]::after { content:    none !important; }

			label.input[data-nfo]::after { 
				right: .5rem;
				font-size: .8em;
				font-weight: 400 !important;
				line-height: 2em;
				content: '\f059' !important;
				cursor: help;
			}
			label.input[data-rel]::after,
			label.input[data-nfo]::after { 
				display: flex;
				flex-shrink: 0;
				flex-grow: 1;
				max-width: fit-content;
				align-self: stretch;
				align-items: center;
				right: .6em;
				padding: 0 .5em;
				border-radius: 0;
			}
			label.input[data-nfo][data-rel=" "]::after { content:       '\f059' !important; }
			label.input[data-nfo][data-rel="~"]::after { content: '\f1ce\00a0\f059' !important; }
			label.input[data-nfo][data-rel="*"]::after { content: '\f069\00a0\f059' !important; }
			label.input.toggle[data-rel]::after,
			label.input.toggle[data-nfo]::after {
				content: none !important;
			}

			div.tags > .clear { 
				display: flex;
				flex-shrink: 0;
				flex-grow: 0;
				align-self: stretch;
				align-items: center;
				right: -1em;
				padding: 0 .5em;
				border-radius: 0;
				border: none;
				background: inherit;
				line-height: 2em;
				font-size: .8em;
				color: var(--fnt-clr-main);
				content: '\f057' !important;
				cursor: help;
			}
			div.tags > .clear > i:not(:hover) { 
				opacity: .5; 
			}
			div.tags > [type="hidden"][value=""] ~ .clear > i { 
				opacity: 0; 
			}

			div.help {
				display: block !important;
				position: relative;
				/* min-height: min-content; */

				padding: 1em 1em;
				border: 1px solid #e2e2e2;
				border-radius: .15em;
				box-shadow: -3px 4px 5px -3px rgba(0, 0, 0, .1);

				font-size: .65rem;
				color: inherit;
				white-space: normal;
				line-height: 1.4;
			}
			div.help + * {
				margin-top: 1em;
			}

			label.input[data-nfo]>div.help {
				top: -50%; left: calc(100% + .5rem);
				max-width: 20vw;
				width: 15vw;

				overflow: hidden;
				z-index: 9999;
				opacity: 0;
				transition: visibility .25s ease-in-out .25s,
							opacity    .25s ease-in-out .25s;
				
				position: absolute;
				visibility: hidden;
			}
			label.input[data-nfo]>div.help>* {
				text-shadow: 0px 0px 13px #e2e2e2;
				z-index: 1;
			}
			label.input[data-nfo]>div.help::before {
				position: relative;
				content: '\f05a';
				top: 10%; left: 20%;
				font-size: 20em;
				color: white;
				opacity: .5;
				z-index: 0;
				position: absolute;
			}

			label.input[data-nfo]>div.help:hover,
			label.input[data-nfo]:hover>div.help,
			label.input[data-nfo]>div.help:hover>*,
			label.input[data-nfo]:hover>div.help>* {
				opacity: 1 !important;
				visibility: visible;
			}

		/**************************************************************/
		/* BUTTONS */

			.btn, button {
				font-family: inherit;
				font-size: inherit;
				line-height: inherit;
				cursor: pointer;
			}
			.btn, button, select { text-transform: none; }
			.btn, button { overflow: visible; }

			form:invalid button[type="submit"] {
				pointer-events: none;
			}
			form:invalid .submit {
				cursor: not-allowed !important;
				opacity: .25;
			}
			form:invalid .submit > button * {
				color: var(--fnt-clr-main) !important;
			}

		/**************************************************************/
		/* LOADER */

			.loaded::before {
				position: relative;
				top: 0; left: 0;
				width: 100%; height: 100%;
				display: block; content: " ";
				opacity: .75; z-index: 9998;
				visibility: hidden; 
				position: absolute;
			}
			.loaded::after {
				position: relative;
				display: block; content: " ";
				opacity: 0; z-index: 9999;
				pointer-events: none;
				position: absolute;
			}
			.slab .loaded::before {
				background-color: #f5f5f5;
			}

			@keyframes loaded {
				0%   { transform: rotate(0deg);   }
				100% { transform: rotate(360deg); }
			}
			@keyframes stated-b4 {
				0%   { opacity: .75; visibility: visible; }
				70%  { opacity: .75; visibility: visible; }
				100% { opacity:   0; visibility:  hidden; }
			}
			@keyframes stated-af {
				0%   { opacity: 1; }
				70%  { opacity: 1; }
				100% { opacity: 0; }
			}

			.loadit:checked + form.loaded {
				cursor: progress;
			}
			.loadit:checked + form.loaded input,
			.loadit:checked + form.loaded select,
			.loadit:checked + form.loaded textarea,
			.loadit:checked + form.loaded button {
				pointer-events: none;
				-webkit-user-select: none;
				   -moz-user-select: none;
					-ms-user-select: none;
						user-select: none;
			}

			.loadit:checked + form.loaded::before {
				visibility: visible; 
			}
			.loadit[value="load"]:checked+form.loaded::before {
				background-image: url('/public/images/Logo.stock.png');
				background-position: center;
				background-repeat: no-repeat;
				background-size: 24px;
			}
			.loadit[value="done"]:not(:checked)+form.loaded::before,
			.loadit[value="time"]:not(:checked)+form.loaded::before {
				animation: stated-b4 1s ease-out;
			}

			.loadit[value="load"]:checked+form.loaded::after {
				position: relative;
				top: calc(50% - 35px); 
				left: calc(50% - 35px);
				width: 48px; height: 48px;
				border-radius: 50%;
				border: 10px double transparent;
				border-top-color: #7397B9;
				border-bottom-color: #7397B9;
				position: absolute;
				animation: loaded 1.2s ease-in-out infinite;
				opacity: 1;
			}
			.loadit[value="done"]:not(:checked)+form.loaded::after,
			.loadit[value="time"]:not(:checked)+form.loaded::after {
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				top: 0; left: 0;
				width: 100%; height: 100%;
				font-weight: bold;
				font-size: 1.2em;
				position: absolute;
				animation: stated-af 1s ease-out;
			}
			.loadit[value="done"]:not(:checked)+form.loaded::after {
				content: 'Done!';
				color: #3c763d;
			}
			.loadit[value="done"]:not(:checked)+form.loaded[data-done]::after {
				content: attr(data-done);
			}
			.loadit[value="time"]:not(:checked)+form.loaded::after {
				content: 'Sorry, but this request has Timed-out!';
				color: #a94442;
			}

		/**************************************************************/
		/* MISCELLANEOUS */

			label.input.glyph::before,
			label.input>select+span:empty::before {
				display: flex;
				flex-shrink: 0;
				flex-grow: 0;
				align-self: stretch;
				align-items: center;
				justify-content: center;
			}

			input[type="number"] { text-align: center; }
			input, textarea, datalist 	{ cursor: auto !important; }

			textarea { white-space: pre-line; }
			
			:focus { outline: none !important; }
			.tags > :disabled {
				display: none;
				background: #f8f8f8 !important;
			}
			:disabled {
				background: #ECECEC !important;
			}

			label.input>input[type="file"] {
				line-height: 1;
				padding: .6em .75em;
			}

			label.input > div.card   { 
				align-self: stretch;
				/* background-color: #f8f8f8 !important;  */
				font-size: 1em;
			}
			label.input > div.number { width: 60%; padding-right: .375em; }
			label.input > div.expiry { width: 20%; padding-right: .375em; padding-left: .375em; }
			label.input > div.cvcnum { width: 15%; padding-left:  .375em; }

			label.input > div.scaffold { 
				overflow: hidden !important;
				width: 1px !important;
				min-width: 1px !important;
				max-width: 1px !important; 
				padding: .5em 0;
			}

			.autofills {
				position: absolute;
				border: none;
				color: transparent;
				background: transparent;
			}

			/*  DO NOT REMOVE 'opacity: 1' -- Needed for FireFox
				SEE: https://w3schools.com/howto/howto_css_placeholder.asp */
			::placeholder {opacity:1; color: rgb(156, 156, 156); font-weight: 400; }
			:-ms-input-placeholder  { color: rgb(156, 156, 156); font-weight: 400; }
			::-ms-input-placeholder { color: rgb(156, 156, 156); font-weight: 400; }

	/******************************************************************/
	/* REFERENCE GUIDE */

		label.refs, input.refs {
			position: fixed;
		}
		label.refs {
			left: 0;
			top: calc(100vh - 5rem);
			z-index: 9999;
			padding: .25em 1em .25em .5em;
			border: solid 1px #cccccc;
			border-radius: 0 2em 2em 0;
			box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, .1);
			background-color: #ebebeb;
		}

		input.refs { visibility: hidden; }
		input.refs:checked + label.refs:hover {
			background-color: #949494 !important;
				border-color: #727272 !important;
		}
		input.refs:not(:checked) + label.refs:hover {
			background-color: #dddddd;
				border-color: #b8b8b8;
		}
		input.refs:checked + label.refs::after {
			content: ' On';
		}
		input.refs:not(:checked) + label.refs::after {
			content: ' Off';
		}
		input.refs:checked + label.refs {
			background-color: #555555;
				border-color: #3b3b3b;
			color: white;
		}

		input.refs:checked ~ main .guide:hover { 
			position: relative; 
			overflow: visible; 
		}
		input.refs:checked ~ main .guide:hover::before { 
			height: 100%;
			width: 100%; 
			border-radius: .15rem;
			border: 1px dashed rgb(153, 153, 153);
			content: '';
		}
		input.refs:checked ~ main .guide:hover::after  { 
			min-width: 100%; 
			padding: .2em 1em;
			font-size: .8em; 
			font-weight: 900; 
			white-space: nowrap;
			content: '[ ' attr(data-guide) ' ]';
			color: black;
			z-index: 9999;
			text-shadow: 
				   0px -0.1em 2em #fff, 
				   0px  0.1em 2em #fff, 
				-0.1em    0px 2em #fff, 
				 0.1em    0px 2em #fff;
		}
		input.refs:checked ~ main .guide:hover::before,
		input.refs:checked ~ main .guide:hover::after  { 
			box-sizing: border-box;
			position: relative;
			display: block;
			pointer-events: none;
			position: absolute;
		}
		input.refs:checked ~ main .guide:hover::before,
		input.refs:checked ~ main ::after:not(main):not(article):not(section):not(aside):not(div):not(dl):not(.input) {
			top: 0; left: 0; 
		}
		input.refs:checked ~ main main.guide:hover::after,
		input.refs:checked ~ main article.guide:hover::after,
		input.refs:checked ~ main section.guide:hover::after,
		input.refs:checked ~ main aside.guide:hover::after,
		input.refs:checked ~ main div.guide:hover::after,
		input.refs:checked ~ main dl.guide:hover::after {
			bottom: 0; 
			text-align: right;
		}

	/******************************************************************/
	/* COLORS */

		#profile .string, .jsonp li.string  .value 	{ color: rgb(53, 158, 79); 	}
		#profile .number, .jsonp li.number 	.value,
		#profile .date,   .jsonp li.date 	.value,
		#profile .boolean,.jsonp li.boolean .value 	{ color: #BE5CD5; 			}
		#profile .numeric,.jsonp li.numeric .value 	{ color: rgb(165, 140, 48); }
		#profile .null,   .jsonp li.null 	.value 	{ color: #BF5353; 			}
		#profile .link,   .jsonp li.null 	.value	{ color: rgb(0, 0, 238); 	}
		.socketLink, .exlink 				{ color: #666; 	}
		.socketLink *, .exlink *			{ cursor: pointer !important; 	}
		/*.sck.prm 							{ color: #C8A2C8; 	}*/
		.sck 								{ color: blue; 	}
		.sck.pnt::before,
		.sck.prm::before 					{ content: '/'; color: #666; }
		.sck.prm span::after 				{ content: ';'; color: #666; }
		.sck.qry::before 					{ content: '?'; color: #75717B;}
		.sck.qry .k::after 					{ content: '='; color: #666; }
		.sck.qry .v::after 					{ content: '&'; color: #75717B;}
		.sck.prm > span:last-child::after,
		.sck.qry > span:last-child::after,
		.sck:last-child::after				{ content: '' !important; }
		.phone span.num:not(:first-child)::before {
			content: '.';
		}
		.phone span.ext:not(:first-child)::before {
			content: 'x';
			margin: 0 .25em;
		}
		.email span.special,
		.phone span.num:not(:first-child)::before,
		.phone span.ext:not(:first-child)::before {
			font-weight: bold;
			color: #666;
		}

/**********************************************************************/
/* FUNCTIONS */

	/******************************************************************/
	/* GENERAL */

		.gpu,
		label.rating,
		label.shield {
			-webkit-font-smoothing: antialiased;
			-webkit-transform-origin: 0 0;
					transform-origin: 0 0;
			-webkit-transform: translate3d(0, 0, 0);
			   -moz-transform: translate3d(0, 0, 0);
				-ms-transform: translate3d(0, 0, 0);
				 -o-transform: translate3d(0, 0, 0);
					transform: translate3d(0, 0, 0);
			-webkit-backface-visibility: hidden;
			   -moz-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
					backface-visibility: hidden;
			-webkit-perspective: 1000;
			   -moz-perspective: 1000;
				-ms-perspective: 1000;
					perspective: 1000;
		}
		.gpuLite {
			-webkit-font-smoothing: antialiased;
			-webkit-transform-origin: 0 0;
					transform-origin: 0 0;
			-webkit-backface-visibility: hidden;
			   -moz-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
					backface-visibility: hidden;
			-webkit-perspective: 1000;
			   -moz-perspective: 1000;
				-ms-perspective: 1000;
					perspective: 1000;
		}

		hr,
		.noSelect,
		label.input {
			cursor: default;
			-webkit-user-select: none;
			   -moz-user-select: none;
				-ms-user-select: none;
					user-select: none;
		}
		.hideDisp { display: none; }
		.trunc {
			position: relative;
			display: block;
			top: 0; left: 0;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.trunc.inline {
			display: inline-block;
		}
		.trunc.more:hover {
			white-space: normal;
		}
		.mirror { float: right; }
		.nowrap,
		.column.nowrap > * { 
			white-space: nowrap; 
		}
		.small { font-size: .85em; }
		.muted { color: #777; }

		.pull-right { float: right; }
		.pull-left  { float:  left; }

		.fao, 
		.fao::after,
		.fao::before { font-weight: 400 !important; }

		
		[data-full]::before {
			content: attr(data-full);
			position: relative;
			padding: .5em;
			margin-left: 1em;
			top: calc(100% + 5px);
			/**/ background-color: #f8f8f8; 
			border: solid 1px #e2e2e2;
			border-radius: .15em;
			white-space: pre;
			position: absolute;
			visibility: hidden;
			transition: visibility 0s ease;
		}
		[data-full]:hover::before {
			visibility: visible;
			transition: visibility 0s ease 1s;
		}

	/******************************************************************/
	/* GRID */

		/******************************************************************/
		/* GRID MAIN ******************************************************/

			main#app-root { 
				background: inherit; 
				max-width: 100vw;
			}

			.gridL { justify-self:   left; }
			.gridC { justify-self: center; }
			.gridR { justify-self:  right; }

			.gridMain {
				background: white;
				z-index:  0;
			}
			.gridMain.stock {
				grid-template-rows: 3.4rem 3.4rem 1rem 3.4rem 1px auto 15vh 1px;
				grid-template-areas: 
					"header  header  header  header  header " 
					"search  search  search  search  search " 
					"chat1   gap     gap     none    right1 " 
					"chat2   name    name    none    right2 " 
					"chat3   divide  divide  divide  right3 " 
					"content content content content content" 
					"footer  footer  footer  footer  footer " 
					"dim     dim     dim     dim     dim    ";
			}
			.gridMain.cover {
				grid-template-rows: 3.4rem 3.4rem calc(41vmin - 3.4rem) 3.4rem 3.4rem auto 15vh 1px;
				grid-template-areas: 
					"header  header  header  header  header " 
					"search  search  search  search  search " 
					"cover   cover   cover   cover   cover  " 
					"chat1   pic     name    join    right1 " 
					"chat2   pic     info    join    right2 " 
					"content content content content content" 
					"footer  footer  footer  footer  footer " 
					"dim     dim     dim     dim     dim    ";
			}
			.gridMain.jumbo {
				grid-template-rows: 3.4rem 1.7rem 1px auto 15vh 1px;
				grid-template-areas: 
					"header  header  header  header  header " 
					"gap     gap     gap     gap     gap    " 
					"divide  divide  divide  divide  divide " 
					"chat1   content content content right2 " 
					"footer  footer  footer  footer  footer " 
					"dim     dim     dim     dim     dim    ";
			}

		/******************************************************************/
		/* GRID HEADER ****************************************************/

			.gridItemHeader { 
				grid-area: header; 
				position: -webkit-sticky;
				position: 		  sticky;
				top: 0;
				padding: 0 2rem;
			}
			.gridHeader {
				display: grid;
				grid-template-columns: 	 2fr auto;
				grid-template-areas: 	"branding navigation";
			}
				.gridMain:not(.jumbo) .searchDim {
					grid-area: dim;
				}
				.gridMain:not(.jumbo) .searchDim::before {
					position: absolute;
					display: table;
					background-color: black;
					width: 100vw; height: 0;
					z-index: 8888;
					top: -100vh; left: 0px;
					content: '';
					transition: opacity .25s ease-in-out, visibility 0s; 
					visibility: hidden;
					opacity: 0;
				}
				
			.gridMain:not(.jumbo) .gridItemHeader {
				box-shadow: 0px 11px 3px -8px rgba(0, 0, 0, 0.15);
			}
				.gridMain.jumbo .gridItemHeader .title {
					border-left-style: solid;
					border-left-width: 1px;
					margin-left:  .5em; 
					padding-left: .5em; 
				}
				.gridItemBranding {
					grid-area: branding;
				}
				.gridItemNav {
					grid-area: navigation;
				}
				.gridItemDivide {
					grid-area: divide;
					z-index: 3;
					display: block;
					width: 100%;
				}
				.gridMain.jumbo .gridItemDivide {
					border-color: transparent;
				}
				.gridMain.jumbo .gridItemDivide::after {
					position: relative;
					content: ' ';
					top: -2rem;
					display: table;
					width: 100%;
					height: 2rem;
					position: absolute;
					box-shadow: 0px 3px 4px 1px rgba(0, 0, 0, 0.35);
				}

		/******************************************************************/
		/* GRID SEARCH ****************************************************/

			.gridItemSearch {
				grid-area: search; 
				background-color: white;
			}
				div.gridItemSearch  { z-index: 3; }
				form.gridItemSearch { box-shadow: inset 0px 0px 6px 3px rgba(0,0,0,0.25); }
				
			.gridMain.cover .gridItemSearch { 
				border-bottom: solid 1px #949494;
			}
			.gridSearch {
				display:  grid;
				grid-gap: 0;
				grid-template-rows:    100%;
				grid-template-columns: 20vmin auto 20vmin;
				grid-template-areas: "icon box go";
				align-items: center
			}
				.gridSearch>div:first-of-type {
					grid-area: icon;
					justify-content: flex-end;
					content: '\f002';
					font-size: 1rem;
					width: 100%;
					cursor: zoom-in;
				}
				.gridItemSearchBox {
					grid-area: box;
					justify-content: flex-start;
					align-items: center;
					position: relative;
					padding: .5rem 2em;
					min-height: 100%;
					font-size: .9rem;
					border: none;
					-webkit-appearance: none;
							appearance: none;
				}
					@-webkit-keyframes flash {
						0%   {background-color: transparent;}
						50%  {background-color: rgba(68, 157, 68, 0.25);}
						100% {background-color: transparent;}
					}
					@-moz-keyframes    flash {
						0%   {background-color: transparent;}
						50%  {background-color: rgba(68, 157, 68, 0.25);}
						100% {background-color: transparent;}
					}
					@keyframes         flash {
						0%   {background-color: transparent;}
						50%  {background-color: rgba(68, 157, 68, 0.25);}
						100% {background-color: transparent;}
					}
					.gridItemSearchBox:focus {
						animation-name: flash;
						animation-timing-function: ease;
						animation-duration: .25s;
					}
					.gridItemSearchBox {
						display: flex;
						flex-flow: row;
					}
					.gridItemSearchBox > input[type="text"],
					.gridItemSearchBox > input[type="search"] {
						-webkit-appearance: textfield;
						font-size: .8em;
						border: 0;
						border-collapse: collapse;
						border-radius: 0;
						align-self: center;
						justify-self: stretch;
						width: 100%;
					}
					.gridItemSearchBox > input[type="text"] {
						padding: 0 .5em;
					}
				.gridSearch>button {
					font-size: 1.1rem;
					font-weight: 600;
				}

				.gridSearch>div:first-of-type,
				.gridSearch>button {
					display: flex;
					align-items: center;
					height: 100%;
					opacity: .65;
					border-radius: 0; 
				}
				.gridSearch>button>a {
					display: flex;
					font-size: .5em;
					color: black !important;
					font-style: italic;
				}
				.gridSearch>button>a:hover {
					color: white !important;
				}

			.gridSearch:focus-within {
				z-index: 9999;
				position: sticky;
				top: 3.4rem;
			}
				.gridSearch:focus-within ~ * {
					pointer-events: none;
				}
				.gridSearch:focus-within ~ header.gridHeader {
					z-index: 5;
				}
				.gridSearch:focus-within ~ .searchDim::before {
					transition: opacity .25s ease-in-out, visibility 0s; 
					visibility: visible;
					opacity: 0.5;
					height: 100vh;
				}
				.gridSearch:focus-within ~ section.gridContent {
					margin-bottom: 0;
					overflow: hidden;
				}
				.gridMain.cover .gridSearch:focus-within ~ section.gridContent {
					max-height: calc(100vh - 3.4rem - 3.4rem - 41vmin);
					min-height: calc(100vh - 3.4rem - 3.4rem - 41vmin);
				}
				.gridMain.stock .gridSearch:focus-within ~ section.gridContent {
					max-height: calc(100vh - 3.4rem - 3.4rem);
					min-height: calc(100vh - 3.4rem - 3.4rem);
				}

		/******************************************************************/
		/* GRID COVER *****************************************************/

			.gridItemCover {
				position: -webkit-sticky;
				position: sticky;
				top: 3.4rem;
				grid-area: cover / cover / chat1 / right1;
				background-color: black;
			}

			.gridItemCover > div {
				width: 	100%;
				height: 100%;
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;
				background-color: #E6E6E6;
				opacity: 0.7;
			}
			.coverForm {
				position: relative;
				width: 	100%;
				height: 100%;
				top: 0; left: 0;
				background-color: black;
				position: absolute;
			}
				.coverForm > input[type="file"] {
					display: none;
				}
			.coverLbl {
				position: relative;
				display: table;
				top: 1.5em;
				right: 1.5em;
				position: absolute;
			}
			.coverForm, .coverLbl {
				opacity: 0;
				transition: opacity .5s ease;
			}
			.gridItemCover.edit:hover .coverForm {
				opacity: .25;
			}
			.gridItemCover.edit:hover .coverLbl {
				opacity: 1;
			}

		/******************************************************************/
		/* GRID STUB ******************************************************/

			.cutout {
				display: table;
				position: relative;
				border: solid .3em;
				box-shadow: 0px -11px 10px -6px rgba(0,0,0,.25);
			}

			/* GRID STUB        *******************************************/

				.gridStub {
					display:  grid;
					grid-gap: 0 .5rem;
					grid-template-rows: 2rem 2rem 2rem;
					grid-template-columns: 6rem 15rem auto;
					grid-template-areas: 
						"pic name    uname  "
						"pic locale  age    "
						"pic matches matches";
					justify-items: start;
					align-items:   center;
					border: 1px solid transparent;
					border-radius: 6rem; 
					padding: .15rem;
					margin-bottom: 2rem;
					overflow: hidden;
				}
					.gridStub > h3 { 
						display: flex;
						flex-flow: row nowrap;
						margin-bottom: 0 !important;
					}
					.gridStub > h6 { 
						max-width: 16rem;
					}
					.gridStub > h6 > span { 
						display: inline-block;
						max-width: 100%
					}
					.gridStub > :nth-child(1) { 
						grid-area: 	   pic; 
						margin-left:   .25em;
					}
					.gridStub > :nth-child(2) { grid-area:    name; }
					.gridStub > :nth-child(3) { grid-area:   uname; }
					.gridStub > :nth-child(4) { grid-area:  locale; }
					.gridStub > :nth-child(5) { grid-area:     age; }
					.gridStub > :nth-child(6) { 
						grid-area: matches;
						overflow: hidden;
						max-height: 1.5em;
						border-radius: 1em;
						min-width: 24em;
						max-width: 24em;
					}
						.gridStub > :nth-child(6) > div {
							display: flex;
							flex-flow: row nowrap;
							justify-content: flex-start;
							align-items: center;
							overflow: hidden;
							overflow-x: auto;
							scroll-snap-type: x proximity;
							max-width:  100%;
						}
						.gridStub > :nth-child(6) > div > .multi { 
							scroll-snap-align: start;
							margin-bottom: 2em; 
						}
						.gridStub > :nth-child(6) > div:after { 
							content: ' ';
							display: table;
							min-width: 20em;
							min-height: 1.5em;
						}

					
					.gridStub > :nth-child(4),
					.gridStub > :nth-child(5) { color: #747474; }
					.gridStub > :nth-child(3),
					.gridStub > :nth-child(5) { justify-self: right; }
					.gridStub > :nth-child(3),
					.gridStub > :nth-child(5),
					.gridStub > :nth-child(6) { margin-right: 1rem; }

			/* GRID STUB PIC    *******************************************/

				.gridItemPic {
					grid-area: pic;
					justify-self: right;
				}
				.gridItemPic.d {
					top: .5vh;
				}
					.gridItemPic > .bubble.huge {
						opacity: 1;
					}
			
			/* GRID STUB NAME   *******************************************/
	
				.gridItemName {
					grid-area: name;
					white-space: nowrap;
					display: flex;
					flex-flow: row;
					align-items: center;
				}
				.gridItemName:not(.d) {
					pointer-events: none;
				}
					.gridItemName > * {
						border: none;
						background-color: transparent;
						padding: 0 1em 0 .75em;
					}
					.gridItemName  h1,
					.gridItemName .h1 { 
						margin: .1em 0 .2em 0;
						text-shadow: 0px 0px 10px black;
						display: flex;
					}
					.gridItemName  h1 > span,
					.gridItemName .h1 > span {
						padding: 0 .25rem;
					}
					.gridItemName sup {
						margin-top: .2em;
					}
					.gridItemName sup > .badge {
						margin-left: .25rem; 
						box-shadow: 0px 0px 20px 0px rgba(0,0,0,.5);
						text-shadow: none;
					}
					.gridItemName sup, 
					.gridItemName sup > .badge:first-child { 
						margin-left: .5rem; 
					}

				.gridItemName.d { top: 0; }
					.gridItemName.d  h1,
					.gridItemName.d .h1,
					.gridItemName.d  h1 > *,
					.gridItemName.d .h1 > *,
					.gridMain:not(.cover) .gridItemName  h1,
					.gridMain:not(.cover) .gridItemName .h1,
					.gridMain:not(.cover) .gridItemName  h1 > *,
					.gridMain:not(.cover) .gridItemName .h1 > * { 
						text-shadow: none;
					}

					.gridItemName.d sup > .badge { 
						box-shadow: none;
					}

			/* GRID STUB INFO   *******************************************/

				.gridItemInfo {
					grid-area: info;
				}
					.gridItemInfo h6 > * { text-align: left; }
					.gridItemInfo h4, 
					.gridItemInfo h6 {
						margin-bottom: 0;
					}
			
			/* GRID STUB JOIN   *******************************************/

				.gridItemJoin {
					display: flex;
					grid-area: join;
				}
					.gridItemJoin > * {
						background-color: white;
					}
					.gridItemJoin > *,
					.gridItemJoin > * > * {
						border-radius: 2em !important;
					}
					.gridItemJoin > *:not(:last-child) {
						margin-right: .5em;
					}

			/* GRID STUB GLOBAL *******************************************/

				.gridItemPic.d,
				.gridItemName.d {
					position: -webkit-sticky;
					position:         sticky;
				}

		/******************************************************************/
		/* GRID CONTENT ***************************************************/
				
			.gridItemContent {
				grid-area: chat2 / chat2 / dim / dim;
				position: relative;
				margin-bottom: 18vh;
				padding-bottom: 2rem;
			}
			.gridMain.jumbo .gridItemContent,
			.gridMain.stock .gridItemContent { 
				grid-area: chat1 / chat1 / dim / dim;
			}
			.gridMain.jumbo .gridItemContent { 
				min-height:  65vh;
			}
			.gridMain:not(.jumbo) .gridItemContent {
				min-height: 100vh;
			}

			.gridContent {
				grid-template-rows:     8rem calc(100% - 8rem);
				grid-template-areas: 	
					"left   pic     stub   join   right "
					"left   sidebar copy   other  right "
			}
			.gridMain.jumbo .gridContent {
				background-position: center;
				background-size: cover;
				background-blend-mode: luminosity;
				grid-template-rows:     50px 100%;
				grid-template-areas: 	
					"left pic  stub join right "
					"left copy copy copy right "
			}
				.gridItemSidebar {
					grid-area: sidebar;
					align-self: start;
					position: -webkit-sticky;
					position:         sticky;
					top: 3.585rem;
					max-height: 88vh;
					overflow: auto;
					padding: .5em 0; 
				}
					.gridMenu {
						display: grid;
						grid-auto-rows: min-content;
						justify-content: right;
						text-align: right;
					}
					.gridMenu > label {
						padding: 0;
						margin: 0; 
						font-size: 1.1em;
					}
					.gridMenu > label > a {
						display: block;
						padding: .5em;
						margin: 0; 
					}
					.gridMenu > label.sub {
						font-size: .7em;
						font-weight: 300;
					}
					.gridMenu > label.sub > a {
						padding-top: 0; 
						padding-right: 1em; 
						white-space: pre-wrap;
					}
					.gridMenu > label:not(:hover) > a {
						color: inherit !important;
					}

				.gridItemCopy { 
					grid-area: copy; 
					display: table;
					width: 100%;
					background-color: inherit;
					border-left: 1px solid #aaa;
				}
				.gridMain.jumbo .gridItemCopy {
					border: none;
					background-color: transparent;
				}
					.gridItemCopy > .panel { 
						margin-bottom: 2em; 
						background-color: inherit;
					}
					.gridItemCopy > .panel.full {
						min-height: 100vh;
					}
					.gridItemCopy > .panel.trail {
						min-height: 50vh;
					}
				.gridItemOther {
					grid-area: other;
				}
				.gridContent > .gridItemSidebar {
					padding-top: 2rem !important;
				}

		/******************************************************************/
		/* GRID FOOTER ****************************************************/

			.gridItemFooter { 
				position: relative;
				grid-area: footer / footer / dim / dim;
				justify-self: center;
				position: fixed;
				bottom: 0;
				width: 100%;
				height: 16vh;
				background-color: #7397b9;
				overflow: visible;
			}
				.gridFooter {
					display:  grid;
					grid-gap: 0 20vmin;
					grid-template-rows: 100%;
					grid-template-columns: 10vmin 1fr 1.3fr 10vmin;
					grid-template-areas: "GL contact credits GR";
					justify-items: center;
					align-items:   center;

					width: 100%;
					height: 300%;
					top: -18vh;

					background-color: #7397b9;
					background-position: 42vw center;
					background-repeat: no-repeat;
					background-size: 16vh;

					font-family: "Font Awesome 5 Free", Helvetica, Arial;
					font-size: .75rem;
					text-shadow: 0px 0px 30px rgba(255,255,255,.25);
					overflow: visible;
				}
				.gridFooter a,
				.gridFooter span { 
					color: #f8f8f8; 
					font-weight: bold;
				}
				.gridFooter a {
					font-weight: bold;
					text-decoration: none !important;
				}
					.gridItemCredits {
						grid-area: credits;
						justify-self: left; 
					}
						.gridItemCredits p { margin: 0; }
						.gridItemCredits p::after,
						.gridItemCredits p > span::before { 
							font-weight: 300; 
							color: #2b2b2b; 
						}
						.gridItemCredits p > span#copyright::before {
							content: 'Copyright' '\00A0' '\f1f9' '\00A0';
						}
						.gridItemCredits p > span#author::before {
							content: '\00A0' 'by' '\00A0';
						}
						.gridItemCredits p > span#company::before {
							content: '\00A0' 'for' '\00A0';
						}
						.gridItemCredits p::after {
							content: ' All right reserved.';
						}
					.gridItemContact {
						grid-area: contact;
						justify-self: right;
					}
						.gridContact {
							display:  grid;
							grid-gap: 0;
							grid-auto-flow: column;
						}
							.gridContact > a {
								border-right: solid 1px var(--fnt-clr-main);
								padding: 0 1em;
							}
							.gridContact>a:last-of-type  { border-right: none; }
		
		/******************************************************************/
		/* GRID CHAT ******************************************************/
			
			.gridItemChat { 
				position: sticky;
				top: 3.4rem;
				left: 0;
				grid-area: cover / chat1 / chat3 / chat1; 
				width: calc((100vw - 75rem) / 2);
			}
			.gridMain.stock .gridItemChat {
				grid-area: chat1 / chat1 / content / chat1; 
			}
			.gridThreads {
				display: grid;
				grid-gap: 0 1.5rem;
				grid-template-columns: 3vh auto;
				background: transparent;
				margin-right: auto;
				max-height: calc(100vh - (3.4rem * 2));
			}
				.gridItemThreads, .gridItemChatBox {
					margin-top: 1em;
				}
				.gridItemThreads { 
					grid-area: 1 / 1 / 1 / 1;
					display: grid;
					grid-gap: 1rem 0;
					grid-template-rows: repeat(auto-fill,var(--bubble-size));
					grid-template-columns: var(--bubble-size);
					width: 3vh;
					overflow: visible;
				}
					.gridItemThreads > .bubble {
						left: -3vh;
						grid-column: 1;
						box-shadow: -2px 3px 6px 1px rgba(0,0,0,0.5);
					}
					.gridThreads .bubble.open { 
						transform: translateX(4vh);
					}
					.gridItemThreads:hover .bubble:not(.open) { 
						transform: translateX(2vh);
					}
					.gridItemThreads:not(:hover) .bubble { 
						-webkit-transition: transform .1s ease-out .5s !important;
						   -moz-transition: transform .1s ease-out .5s !important;
							-ms-transition: transform .1s ease-out .5s !important;
							 -o-transition: transform .1s ease-out .5s !important;
								transition: transform .1s ease-out .5s !important;
					}
					.gridItemThreads > .bubble.user:not(:hover):not(.open) {
						background-blend-mode: soft-light;
					}
					.gridItemThreads > .bubble:not(.open):hover::after {
						position: relative;
						content: attr(data-name);
						left: calc(100% + 1em);
						border-radius: .25rem;
						border-width: 1px;
						border-style: solid;
						padding: .5em;
						font-size: .75rem;
						color: var(--fnt-clr-main);
						white-space: nowrap;
						position: absolute;
					}
					.gridItemThreads > .bubble.multiple:not(.open):hover::after {
						content: attr(data-name) '\2003+' attr(data-cnt);
					}
					
				.gridItemChatBox {
					grid-area: 1 / 2 / 1 / 2;
					justify-self: stretch;
					align-self: stretch;
					width: 12vw;
				}
					.gridItemChatBox > .threadCont {
						position: relative;
						display: flex;
						flex-direction: column;
						flex-wrap: nowrap;
						top: 0; left: 0;
						transform: translateX(-130%);
						width: 130%; 
						min-width: 275px;
						height: 95%;
						padding: .5em;
						position: absolute;
						border-radius: 1em;
						border-style: solid;
						border-width: 1px;
						border-color: #bbc0cc;
						-webkit-transition: transform .25s ease-in !important;
						   -moz-transition: transform .25s ease-in !important;
							-ms-transition: transform .25s ease-in !important;
							 -o-transition: transform .25s ease-in !important;
								transition: transform .25s ease-in !important;
					}
					.gridItemChatBox > .threadCont.open {
						transform: translateX(0);
						-webkit-transition: transform .25s ease-out !important;
						   -moz-transition: transform .25s ease-out !important;
							-ms-transition: transform .25s ease-out !important;
							 -o-transition: transform .25s ease-out !important;
								transition: transform .25s ease-out !important;
					}
						.threadCont > .threadName {
							margin-bottom: .25em;
							flex-shrink: 0;
						}
						.threadCont > .threadMsg {
							align-self: stretch;
							flex-grow: 1;
							padding-bottom: .25em;
							border-radius: .75em;
							margin-bottom: 1em;
							overflow: auto;
							display: flex;
							flex-direction: column-reverse;
							flex-wrap: nowrap;
						}
							.threadMsg > .threadBubble {
								padding: .75em;
								font-size: .7em;
								/* font-weight: 400; */
								border-radius: 1em;
								margin-bottom: .5em;
								-webkit-hyphens: auto;
										hyphens: auto;
								-webkit-hyphenate-limit-after: 20;
								-webkit-user-select: text;
								-moz-user-select: text;
									-ms-user-select: text;
										user-select: text;
							}
                                @-webkit-keyframes Msg-Pop-R { 0% { opacity: 0; padding: 0; } 80% { margin-right: 22.5%; } 100% { opacity: 1; padding: .75em; margin-right: 25%; } }
                                   @-moz-keyframes Msg-Pop-R { 0% { opacity: 0; padding: 0; } 80% { margin-right: 22.5%; } 100% { opacity: 1; padding: .75em; margin-right: 25%; } }
                                     @-o-keyframes Msg-Pop-R { 0% { opacity: 0; padding: 0; } 80% { margin-right: 22.5%; } 100% { opacity: 1; padding: .75em; margin-right: 25%; } }
                                        @keyframes Msg-Pop-R { 0% { opacity: 0; padding: 0; } 80% { margin-right: 22.5%; } 100% { opacity: 1; padding: .75em; margin-right: 25%; } }
                                .threadMsg > .threadBubble.them.new {
									-webkit-animation: Msg-Pop-R .25s ease;
									   -moz-animation: Msg-Pop-R .25s ease;
										-ms-animation: Msg-Pop-R .25s ease;
											animation: Msg-Pop-R .25s ease;
                                }
                                @-webkit-keyframes Msg-Pop-L { 0% { opacity: 0; padding: 0; } 80% { margin-left:  22.5%; } 100% { opacity: 1; padding: .75em; margin-left:  25%; } }
                                   @-moz-keyframes Msg-Pop-L { 0% { opacity: 0; padding: 0; } 80% { margin-left:  22.5%; } 100% { opacity: 1; padding: .75em; margin-left:  25%; } }
                                     @-o-keyframes Msg-Pop-L { 0% { opacity: 0; padding: 0; } 80% { margin-left:  22.5%; } 100% { opacity: 1; padding: .75em; margin-left:  25%; } }
                                        @keyframes Msg-Pop-L { 0% { opacity: 0; padding: 0; } 80% { margin-left:  22.5%; } 100% { opacity: 1; padding: .75em; margin-left:  25%; } }
                                .threadMsg > .threadBubble.you.new {
									-webkit-animation: Msg-Pop-L .25s ease;
									   -moz-animation: Msg-Pop-L .25s ease;
										-ms-animation: Msg-Pop-L .25s ease;
											animation: Msg-Pop-L .25s ease;
                                }
                                @-webkit-keyframes Msg-Pop-Child { 0% { opacity: 0; font-size: 0; } 80% { opacity: 0; font-size: 1.15em; } 100% { opacity: 1; font-size: 1em; } }
                                   @-moz-keyframes Msg-Pop-Child { 0% { opacity: 0; font-size: 0; } 80% { opacity: 0; font-size: 1.15em; } 100% { opacity: 1; font-size: 1em; } }
                                     @-o-keyframes Msg-Pop-Child { 0% { opacity: 0; font-size: 0; } 80% { opacity: 0; font-size: 1.15em; } 100% { opacity: 1; font-size: 1em; } }
                                		@keyframes Msg-Pop-Child { 0% { opacity: 0; font-size: 0; } 80% { opacity: 0; font-size: 1.15em; } 100% { opacity: 1; font-size: 1em; } }
                                .threadMsg > .threadBubble.new > * {
									-webkit-animation: Msg-Pop-Child .25s ease;
									   -moz-animation: Msg-Pop-Child .25s ease;
										-ms-animation: Msg-Pop-Child .25s ease;
                                    		animation: Msg-Pop-Child .25s ease;
                                }

							.threadMsg > .threadBubble.you {
								margin-left: 25%;
								border-bottom-right-radius: 0;
								align-self: flex-end;
							}
							.threadMsg > .threadBubble.them {
								margin-right: 25%;
								border-bottom-left-radius: 0;
								align-self: flex-start;
							}
								.threadBubble.them > .nme {
									font-size: .75em;
									margin-top: .5em;
									max-width: 15em;
									font-weight: 600 !important;
								}
								.threadBubble.them > .nme > a {
									font-weight: 600 !important;
								}
                            .threadMsg > .threadDate {
                                font-size: .6em;
                                text-align: center;
								margin: 1em 0;
								opacity: .75;
							}
								/* .threadMsg > .threadDate::before {
									content: "";
									display: table;
									position: relative;
									top: 50%;
									left: 0;
									width: 100%;
									max-height: 0px;
									border-top: solid 1px;
									position: absolute;
									opacity: .5;
								} */
                                .threadMsg > .threadDate > span {
                                    padding: 0 1em;
                                }

						.threadCont > .threadInput {
							align-self: auto;
							flex-grow: 0;
						}
						.threadCont > .threadInput label.input {
							margin-bottom: 1em !important;
						}

		/******************************************************************/
		/* GRID SLICES ****************************************************/

			.gridPair {
				display:  grid;
				grid-gap: 1em;
				grid-template-rows: auto;
				grid-template-columns: repeat(2, auto);
			}
				.gridPair > .spread {
					grid-column: span 2;
				}
				.gridPair > .S1,  .gridPair > .one    { grid-column-start:       1; }
				.gridPair > .S2,  .gridPair > .two    { grid-column-start:       2; }

			.gridSlice {
				display:  grid;
				grid-gap: 1em;
				grid-template-rows: auto;
				grid-template-columns: repeat(12, 1fr);
			}
			.gridSlice > *.center {
				align-self: center;
			}

			/* POSITION  **************************************************/

				.gridSlice > .S1,  .gridSlice > .one    { grid-column-start:       1; }
				.gridSlice > .S2,  .gridSlice > .two    { grid-column-start:       2; }
				.gridSlice > .S3,  .gridSlice > .three  { grid-column-start:       3; }
				.gridSlice > .S4,  .gridSlice > .four   { grid-column-start:       4; }
				.gridSlice > .S5,  .gridSlice > .five   { grid-column-start:       5; }
				.gridSlice > .S6,  .gridSlice > .six    { grid-column-start:       6; }
				.gridSlice > .S7,  .gridSlice > .seven  { grid-column-start:       7; }
				.gridSlice > .S8,  .gridSlice > .eight  { grid-column-start:       8; }
				.gridSlice > .S9,  .gridSlice > .nine   { grid-column-start:       9; }
				.gridSlice > .S10, .gridSlice > .ten    { grid-column-start:      10; }
				.gridSlice > .S11, .gridSlice > .eleven { grid-column-start:      11; }
				.gridSlice > .S12, .gridSlice > .twelve { grid-column-start:      12; }
				
			/* ALIGNMENT **************************************************/

				.gridSlice > .C1,  .gridSlice > .sliver { grid-column-end:   span  1; }
				.gridSlice > .C2,  .gridSlice > .slice  { grid-column-end:   span  2; }
				.gridSlice > .C3,  .gridSlice > .quart  { grid-column-end:   span  3; }
				.gridSlice > .C4,  .gridSlice > .third  { grid-column-end:   span  4; }
				.gridSlice > .C5,  .gridSlice > .some   { grid-column-end:   span  5; }
				.gridSlice > .C6,  .gridSlice > .half   { grid-column-end:   span  6; }
				.gridSlice > .C7,  .gridSlice > .more   { grid-column-end:   span  7; }
				.gridSlice > .C8,  .gridSlice > .most   { grid-column-end:   span  8; }
				.gridSlice > .C9,  .gridSlice > .mostly { grid-column-end:   span  9; }
				.gridSlice > .C10, .gridSlice > .needy  { grid-column-end:   span 10; }
				.gridSlice > .C11, .gridSlice > .greedy { grid-column-end:   span 11; }
				.gridSlice > .C12, .gridSlice > .spread { grid-column-end:   span 12; }

			/* SPACING   **************************************************/

				.gridSlice > .reach  { 
					grid-row-start: 1;
					grid-row-end: last-line;
				}
				.gridSlice.spaced {
					grid-gap: 1em 2em;
				}
		
		/******************************************************************/
		/* GRID TABS ******************************************************/

			.gridTabs {
				display:  grid;
				grid-gap: 0 .5em;
				grid-template-rows: auto;
				grid-auto-flow: column;
				justify-items: center;
			}
				.gridTabs.buttons {
					grid-gap: .5em 1em;
					grid-auto-columns: 1fr;
					grid-template-columns: repeat(auto-fill, 1fr [mid]);
					grid-template-rows: [btn] 3em [ctn] auto [end];
					align-items: start;
					font-size: .8em;
					margin-bottom: .5em;
				}
					.gridTabs.buttons > label {
						grid-row: btn / ctn;
						width: 100%;
						border-radius: .25em;
						line-height: 3em;
						text-align: center;
						cursor: pointer;
					}
					.gridTabs.buttons > input.reveal.open:not(.trade):checked + label {
						height: calc(100% + .6em);
						border-radius: .25em .25em 0 0;
						background-color: white;
						pointer-events: none;
						cursor: default;
					}
					.gridTabs.buttons > input.reveal.open:not(.trade):checked + label::after,
					.gridTabs.buttons > input.reveal.open:not(.trade):checked + label::before {
						content: ' ';
						position: relative;
						bottom: 0; width: 1em; height: 1em;
						background-color: transparent;
					}
					.gridTabs.buttons > input.reveal.open:not(.trade):checked + label::after {
						right: -1em;
						border-radius: 0 50%;
						box-shadow: -6px 0 0 0 #fff;
						position: absolute;
					}
					.gridTabs.buttons > input.reveal.open:not(.trade):checked + label::before {
						left: -1em;
						border-radius: 50% 0;
						box-shadow: 6px 0 0 0 #fff;
						position: absolute;
					}
					.gridTabs.buttons > label.end::after,
					.gridTabs.buttons > label.start::before {
						content: none !important;
					}
					.gridTabs.buttons > div {
						width: 100%;
						grid-column-start: 1;
						grid-row: ctn / end;
					}
					.gridTabs.buttons > div.default {
						background-color: white;
						padding: 2em;
						border-radius: .5em;
					}
				
				.gridTabs.compact {
					position: relative;
					grid-template-columns: 1fr;
					align-items: center;
					font-size: .9em;
				}
					.gridTabs.compact > * > label {
						height: 100%;
						line-height: 1em;
						text-align: center;
						border-radius: .15em;
						padding: .5em;
					}

				.gridDrop {
					display:  grid;
					grid-template-rows: 1fr;
					grid-auto-flow: row;
					max-height: 2em;
					position: relative;
				}
					.gridDrop > .drop {
						position: relative;
						display: flex;
						justify-content: center;
						color: inherit;
						transition: visibility  0s ease-in-out .2s,
									opacity    .1s ease-in-out .2s;
					}
					.gridDrop > .drop > .menu {
						display:  grid;
						grid-gap: .5em 0;
						grid-template-rows: auto;
						grid-template-rows: 1fr;
						grid-auto-flow: row;
						justify-items: center;
						align-items: center;
						color: inherit;
						font-size: .8em;

						position: relative;
						top: 0; padding: 0;
						margin-top: calc(1em + .5rem);
						min-width: 100%;
						max-width: 20vw;
							width: max-content;
						position: absolute;
					}
					.gridDrop > .drop > .menu > a,
					.gridDrop > .drop > .menu > button,
					.gridDrop > .drop > .menu > form > button {
						cursor: pointer;
						position: relative;
						width: 100%;
						padding: 1em 1em;
						text-align: left;
						border: none;
						border-radius: .25em;
					}
					.gridDrop > .drop > .menu > a > label,
					.gridDrop > .drop > .menu > button > label,
					.gridDrop > .drop > .menu > form > button > label {
						font-size: 1.15em;
						pointer-events: none;
					}
					.gridDrop > .drop > .menu > form {
						width: 100%;
					}

		/******************************************************************/
		/* GRID GLOBAL ****************************************************/

			.gridMain, .gridContent {
				display:  grid;
				grid-gap: 0 1rem;
				grid-template-columns: auto 15rem 40rem 20rem auto;
			}

			.gridMain, 
			.gridItemHeader, 
			.gridItemContent, 
			.gridItemCover, 
			.gridItemFooter {
				width: 100vw;
				max-width: 100vw;
			}

			.gridItemPic, .gridItemStub, .gridItemJoin {
				align-self: center;
			}

			.invade:not(.noShadow),
			.gridMain .gridContent {
				box-shadow: 0px 0px 3px 4px rgba(0,0,0,.25);
			}

			.gap { grid-gap: 1em; }

		/******************************************************************/
		/* GRID ORDER *****************************************************/

			.gridItemHeader { z-index: 4; }
			.gridItemChat   { z-index: 5; }
			.gridItemCover  { z-index: 1; }
			.gridContent    { z-index: 2; }
			.gridItemPic    { z-index: 5; } 
			.gridItemName   { z-index: 5; } 
			.gridItemName.d { z-index: 5; } 
			.gridItemInfo   { z-index: 3; } 
			.gridItemJoin   { z-index: 3; }


	/******************************************************************/
	/* PADDING */

		.PA   { padding: 		1em    !important; }
		.PTB  { padding:  		1em 0  !important; }
		.PLR  { padding:  	  0 1em    !important; }
		
		.PT   { padding-top: 	1em    !important; }
		.PR   { padding-right: 	1em    !important; }
		.PB   { padding-bottom: 1em    !important; }
		.PL   { padding-left: 	1em    !important; }

		.PU   { padding: 0 1em 1em 1em !important; }
		.PN   { padding: 1em 1em 0 1em !important; }
		.PC   { padding: 1em 0 1em 1em !important; }
		.PD   { padding: 1em 1em 1em 0 !important; }

	/******************************************************************/
	/* MARGINS */

		.MS *:first-child { margin-left:  0 !important; }
		.MS *:last-child  { margin-right: 0 !important; }

		.MA   { margin: 		1em    !important; }
		.MTB  { margin:  		1em 0  !important; }
		.MLR  { margin:  	  0 1em    !important; }
		
		.MT   { margin-top: 	1em    !important; }
		.MR   { margin-right: 	1em    !important; }
		.MB   { margin-bottom:  1em    !important; }
		.ML   { margin-left: 	1em    !important; }

		.MU   { margin:  0 1em 1em 1em !important; }
		.MN   { margin:  1em 1em 0 1em !important; }
		.MC   { margin:  1em 0 1em 1em !important; }
		.MD   { margin:  1em 1em 1em 0 !important; }

	/******************************************************************/
	/* MONO-TEXT */

		span.mono {
			font-family: 	monospace 		!important;
			font-weight: 	bold 			!important;
			font-style: 	normal 			!important;
			white-space: 	pre 			!important;
		}

		span.mono.key,
		span.mono.bold {
			padding: 0 .25em;
		}
		span.mono.key::before,
		span.mono.bold::before {
			position: relative;
			content: ' ';
			width: 100%; height: 110%;
			top: 0; left: 0;
			border-radius: .25em !important;
			z-index: -1;
			opacity: .8;
			position: absolute;
		}

		span.mono.quote {
			font-weight: 	bold 			!important;
			background: 	transparent 	!important;
			border-radius: 	none 			!important;
		}

	/******************************************************************/
	/* REVEAL */

		label.reveal { cursor: pointer; }
		input.reveal, input.ctrl {
			position: absolute;
			z-index: -9999;
			opacity: 0;
		}
		@supports (position: sticky) {
			.gridDrop:not(:focus-within) > .drop {
				display: none;
			}
		}
		@supports not (position: sticky) {
			.gridItemPic.d {
				top: .5vh;
				margin-right: calc(8.585rem / 3);
			}
			.gridDrop:not(:hover) > .drop:not(:hover) {
				opacity: 0;
				visibility: hidden;
				transition:    opacity .1s ease-in-out .1s,
							visibility  0s ease-in-out .5s; 
			}
		}
		.gridTabs > input.reveal.open:not(.trade):not(:checked) + label + 
		.reveal:not([type="checkbox"]):not([type="radio"]):not(label),
		:not(.gridTabs) > input.reveal.open:not(.trade):not(:checked) ~ 
		.reveal:not([type="checkbox"]):not([type="radio"]):not(label) {
			display: none;
		}
		input.reveal ~ .reveal {
			max-height: 100vh;
		}
		.reveal.top, .reveal.btm {
			overflow: hidden;
			overflow-x: visible;
			padding: 0 3px;
			/* overflow-y: hidden; */
		}
		input.reveal.trade:checked ~ .reveal.top,
		input.reveal.trade:not(:checked) ~ .reveal.btm {
			opacity: 0;
			max-height: 0;
		}
		input.reveal.trade:checked ~ .reveal.top,
		input.reveal.trade:checked ~ .label,
		input.reveal.trade:not(:checked) ~ .reveal.btm {
			transition: max-height .5s, 
						padding    .5s, 
						border     .5s,
						opacity    .25s;
		}
		input.reveal.trade:checked ~ .reveal.btm,
		input.reveal.trade:not(:checked) ~ .label,
		input.reveal.trade:not(:checked) ~ .reveal.top {
			transition: max-height .5s .25s, 
						padding    .5s .25s, 
						border     .5s .25s,
						opacity    1s;
		}
		input.reveal.trade:checked ~ .reveal.top input ~ .validate,
		input.reveal.trade:not(:checked) ~ .reveal.btm input ~ .validate  {
			visibility: hidden;
			transform: translateZ(-1);
		}

		input.reveal.trade:checked ~ .label {
			padding-bottom: 1rem; 
		}
		input.reveal.trade:not(:checked) ~ .label {
			padding-top: 1rem; 
		}
		input.reveal.trade.divide:checked ~ .label {
			border-bottom: solid 1px #e4e4e4;
		}
		input.reveal.trade.divide:not(:checked) ~ .label {
			border-top: solid 1px #e4e4e4;
		}
		input.reveal.trade:checked ~ .label>label>[data-top]::before { 
			content: attr(data-tcon) attr(data-top); 
		}
		input.reveal.trade:not(:checked) ~ .label>label>[data-btm]::before { 
			content: attr(data-bcon) attr(data-btm); 
		}

		label.reveal.heading h1,
		label.reveal.heading h2,
		label.reveal.heading h3,
		label.reveal.heading h4,
		label.reveal.heading h5,
		label.reveal.heading h6 {
			font-weight: 400 !important;
			margin: 0 !important;
		}

		label.reveal.heading {
			text-align: left;
			/* border: solid 1px; */
			width: 100%;
			padding: 0 1em;
		}

		.swap>label.reveal.heading { 
			display: inline-block; 
			height: 2.23rem;
		}
		.swap>label.reveal.heading:nth-of-type(1) { 
			width: 95%; 
			border-radius: .15em 0 0 .15em; 
			border-right: none; 
		}
		.swap>label.reveal.heading:nth-of-type(2) { 
			width:  5%; 
			border-radius: 0 .15em .15em 0; 
			padding: 0; 
			overflow: hidden;
		}
		.swap>label.reveal.heading:nth-of-type(2) > * { 
			font-size: .75rem;
			line-height: 1.5;
			padding: .5rem 0;
		}
		.swap>label.reveal.heading:nth-of-type(2)>* { text-align: center; }
		.swap>label.reveal.heading:nth-of-type(2)>*::before {
			position: relative;
			display: block;
		}
		input.reveal.open:checked~label.heading+label.heading>[data-close]::before { 
			content: attr(data-close); 
		}
		input.reveal.open:not(:checked)~label.heading+label.heading>[data-open]::before { 
			content: attr(data-open);
		}
		input.reveal.open:not(:checked)~label.heading+label.heading {
			pointer-events: none;
		}

		.tabs {
			border-radius: .15em;
		}
		.tabBody {
			font-size: .8em;
		}

		.message > header {
			margin-bottom: .5em;
		}
		.message > div {
			color: #444444;
		}

		.notification {
			min-width: 18vw;
			font-size: 1.1em;
			font-weight: 400;
		}

		.divide {
			border-bottom: 1px solid  #e0e0e0;;
		}

		.badge {
			display: inline-block;
			border-radius: 1em; 
		}
		.badge.sm { 
			font-size: 1rem; 
			min-width: 1.75rem;
			vertical-align: middle;
			text-align: center;
		}
		.badge.sm > i { 
			line-height: 1.5em;
		}
		.badge, .badge > * {
			font-weight: 900 !important;
		}
		.badge:not(:first-child) {
			margin-left: .25em;
		}

		ul.bare {
			list-style-type: none;
		}

	/******************************************************************/
	/* BUBBLE */

		.bubble {
			position: relative;
			display: 				inline-grid;
			grid-template-columns: 	100%;
			grid-template-rows: 	100%;
			grid-template-areas: 	"point";
			/* grid-row: 				1; */
			align-items: 			center;
			height: 	inherit;
			/* overflow: 	hidden; */
			text-align: center;
			font-size: 	2.5vh !important;
			color: 		white;
			cursor: 	pointer;
			background-color: #75717B;
			background-repeat: no-repeat;
			background-position: center;
			-webkit-border-radius: 50%;
			   -moz-border-radius: 50%;
					border-radius: 50%;
			-webkit-transition: opacity .1s ease-out, border .1s ease-out, transform .1s ease-out;
			   -moz-transition: opacity .1s ease-out, border .1s ease-out, transform .1s ease-out;
				-ms-transition: opacity .1s ease-out, border .1s ease-out, transform .1s ease-out;
				 -o-transition: opacity .1s ease-out, border .1s ease-out, transform .1s ease-out;
					transition: opacity .1s ease-out, border .1s ease-out, transform .1s ease-out;
		}
		.bubble:hover {
			opacity: 1 !important;
			border-width: thick !important;
		}
		.bubble.cutout:hover {
			border-width: .5em !important;
		}

		.bubble.small.er{ width:  2.75rem; height:  2.75rem; background-size:  2.75rem; }
		.bubble.small	{ width:   3.4rem;  height:  3.4rem;  background-size:  3.4rem; }
		.bubble.medium 	{ width:   5.5rem; height:   5.5rem; background-size:   5.5rem; }
		.bubble.large 	{ width:     7rem; height:     7rem; background-size:     7rem; }
		.bubble.huge  	{ width: 8.585rem; height: 8.585rem; background-size: 8.585rem; }

		.bubble.lite  	{ border: solid 1px #D0D0D0; }
		.bubble.dark  	{ border: solid 1px #646269; }

		.bubble.user > i[data-initial]::before { 
			font-family: Helvetica, Arial;
			content: attr(data-initial) !important; 
		}
		.bubble.user.multiple:not(:hover)::before {
			content: ' ';
			width: 100%;
			height: 100%;
			margin-left: .25em;
			box-shadow: #75717B 5px 0px 0px -2px;
			-webkit-border-radius: 50%;
			   -moz-border-radius: 50%;
					border-radius: 50%;
		}


		.bubble > .initial {
			position: relative;
			display: table;
			width: 100%;
			font-size: 5em;
		}
		.bubble > *:not(.counter) {
			grid-area: point;
			border: none;
			width: 100%;
		}


		.bubble > .counter {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			top: -.25em;
			right: -.25em;
			width: 1.5em;
			height: 1.5em;
			font-size: .5em;
			font-weight: bold;
			border-radius: 50%;
			border: 1px solid #75717B;
			position: absolute;
		}
			.bubble > .counter:after {
				content: attr(data-cnt);
				line-height: 1.5em;
			}
		.bubble:hover > .counter {
			top: -.5em;
			right: -.5em;
		}


		.bubble.edit:hover::after {
			content: "EDIT";
			font-size: smaller;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,.35);
			border-radius: inherit;
		}
		.bubble.edit + form > input[type="file"] {
			display: none;
		}

	/******************************************************************/
	/* TABLE */

		.table {
			display: grid;
			grid-gap: .5rem 0;
			grid-template-rows: auto;
			font-size: .75rem;
			-webkit-justify-items: stretch;
					justify-items: stretch;
			-webkit-align-items: stretch;
					align-items: stretch;
		}

		.table .column p:last-child {
			margin-bottom: 0;
		}
		.table > .column {
			line-height: 1.5;
		}
		.table.edit > .column:not(.head) {
			line-height: 2;
		}
		.table.edit:not(form) > .column > * > button {
			line-height: 1.9;
		}

		.table .column .tkn:not(.block) {
			display: inline-flex;
			line-height: 1.7;
		}
		.table .column .tkn:not(.block):not(:last-child) {
			margin-right: .5em;
		}
		.table .column .tkn > * {
			padding: .25em 0;
			margin:  0 .5em;
			/* line-height: 2; */
		}
		.column label.input {
			margin: 0 !important;
			font-size: .8rem !important;
		}

		.table .column {
			display: flex;
			align-items: stretch;
			justify-content: stretch;
			background-color: white;
			padding: .5em 1em;
			overflow: hidden;
		}
		.table .column.head {
			align-items: flex-end;
		}
		.column.head.left {
			border-radius: .5em 0 0 0;
		}
		.column.head.right {
			border-radius: 0 .5em 0 0;
		}
		.table > .column > *:not(.trunc) {
			display: contents;
		}

		.column.L { justify-content:  flex-start; }
		.column.R { justify-content:    flex-end; }
		.column.C,
		.column.head.R { justify-content: center; }

		.gridTabs.buttons > label.start + div.default,
		.gridTabs.buttons > label.start + .reveal > .table > .column.head.left {
			border-top-left-radius: 0;
		}
		.gridTabs.buttons > label.end   + div.default,
		.gridTabs.buttons > label.end   + .reveal > .table > .column.head.right {
			border-top-right-radius: 0;
		}
		.table .column > div.bold {
			font-weight: bold;
		}
		.table .column > * > span {
			white-space: pre-line;
		}
		.table .column.head > * {
			font-weight: 600;
		}

	/******************************************************************/
	/* TABLE-LIST */

		.tblLst,
		.tblLst > * {
			display: 	 -webkit-flex;
			display: 		 -ms-flexbox;
			display: 		 	 flex;
			-webkit-align-items: stretch;
			align-items: stretch;
			-webkit-flex-grow:   1;
			flex-grow:   1;
			-webkit-flex-shrink: 1;
			flex-shrink: 1;
		}
		.tblLst {
			-webkit-flex-flow:   column;
					flex-flow:   column;
		}
		.tblLst > * {
			position: relative;
			-webkit-flex-flow:   row;
			flex-flow:   row;
			-webkit-justify-content: flex-start;
			justify-content: space-between;
			-webkit-flex-wrap:   wrap;
			flex-wrap: 	 wrap;
		}
		.tblLst > * > * {
			position: relative;
		}
		.tblLst > * > *:nth-child(odd)  {
			-webkit-flex: 0 2 10%;
			flex: 0 2 10%;
		}
		.tblLst > * > *:nth-child(even) {
			-webkit-flex: 2 2 60%;
			flex: 2 2 60%;
		}


	/******************************************************************/
	/* TAGS */

		/**************************************************************/
		.taggr > .tags,
		.taggr > .tags > .tag,
		.taggr > .tags > .tag > label,
		.taggr > input.taggee {
			position: relative;
			display: 	 -webkit-flex;
			display: 		 -ms-flexbox;
			display: 		 	 flex;
			-webkit-flex-flow:   row;
					flex-flow:   row;
			-webkit-justify-content: flex-end;
					justify-content: flex-end;
		}
		.taggr {
			text-align: center;
			padding: .2125rem .5rem !important;
			overflow: hidden !important;
		}

		/**************************************************************/
		.taggr > input.taggee {
			position: relative;
			line-height: 1.5;
			margin: .25rem !important;
			padding: 0 !important;
			border: none !important;
			min-width: 25% !important;
			height: inherit !important;
			background-color: inherit !important;
			/*display: table;*/
			/*min-width: 100% !important;*/
			/*font-family: monospace !important;*/
			/*word-spacing: .5em;*/
			/*position: absolute;*/
			-webkit-align-self: stretch; align-self: stretch;
			-webkit-flex-grow: 		  1; flex-grow: 	   1;
		}
		.taggr > input.taggee,
		.taggr > .tags > .tag {
			font-size: 1rem;
		}

		/**************************************************************/
		.taggr > .tags {
			z-index: 100;
			background-color: transparent;
			-webkit-align-self: auto; align-self: auto;
			-webkit-flex-flow: 	 row; flex-flow:   row;
		}
		.taggr > .tags > .tag {
			padding: 0;
			margin-right: .25rem;
		}

		/**************************************************************/
		.taggr > .tags > .tag > input {
			position: relative;
			opacity: 0;
			top: 0;
			left: 0;
			z-index: 0;
			position: absolute;
		}

		/**************************************************************/
		.taggr > .tags > .tag > label {
			position: relative;
			z-index: 1;
			white-space: nowrap;
			background-color: #F1F2F1;
			border-width: 0 3px;
			border-style: solid;
			border-color: #F1F2F1 #D2D2D2;
			letter-spacing: .1em;
			font-size: 1rem;
			height: 2rem;
			color: #666666;
			overflow: hidden;
			-webkit-border-radius: 3rem;
			-moz-border-radius: 3rem;
			border-radius: 3rem;
			-webkit-align-items: stretch;
			align-items: stretch;
		}

		.taggr > .tags > .tag > label:hover {
			background-color: 	#ECF2FD !important;
			border-color: 		#D8E5FB !important;
		}
		.taggr > .tags > .tag > label:hover > .field {
			background-color: 	#D8E5FB !important;
		}

		.taggr > .tags > .tag > input.focal:checked ~ label {
			background-color: 	#D8E5FB !important;
			border-color: 		#B2CAF6 !important;
		}
		.taggr > .tags > .tag > input.focal:checked ~ label > .field {
			background-color: 	#B2CAF6 !important;
			/* color: #2D6FE6 !important; */
		}

		/**************************************************************/
		.taggr > .tags > .tag > label > .field {
			position: relative;
			left: -1px;
			font-weight: 100;
			font-size: 1rem;
			text-align: right;
			color: rgba(102, 102, 102, .75) !important;
			background: #D2D2D2;
			-webkit-border-radius: 3rem 0 0 3rem;
			-moz-border-radius: 3rem 0 0 3rem;
			border-radius: 3rem 0 0 3rem;
			line-height: 2rem;
		}
		.taggr > .tags > .tag > label > .field::before {
			/*padding: 0 .25rem;*/
			vertical-align: middle;
			text-align: right;
			/* line-height: 1.5; */
		}
		.taggr > .tags > .tag > input.matcher.brand:checked 	~ label > .field::before {
			content: '\00A0 brand\00A0';
		}
		.taggr > .tags > .tag > input.matcher.ctid:checked 		~ label > .field::before {
			content: '\00A0 ctid\00A0';
		}
		.taggr > .tags > .tag > input.matcher.code:checked 		~ label > .field::before {
			content: '\00A0 code\00A0';
		}
		.taggr > .tags > .tag > input.matcher.navision:checked 	~ label > .field::before {
			content: '\00A0 navision\00A0';
		}
		.taggr > .tags > .tag > input.matcher.name:checked 		~ label > .field::before {
			content: '\00A0 name\00A0';
		}

		/**************************************************************/
		.taggr > .tags > .tag > label > .option {
			font-family: "Font Awesome 5 Free";
			color: rgba(102, 102, 102, .75);
			line-height: 2rem;
			margin-right: .25rem;
		}
		.taggr > .tags > .tag > label > .option::before {
			vertical-align: middle;
		}
		.taggr > .tags > .tag > input.modifier.must:checked 	~ label > .option::before {
			content: '\f06a';
		}
		.taggr > .tags > .tag > input.modifier.and:checked 		~ label > .option::before {
			content: '\f055';
		}
		.taggr > .tags > .tag > input.modifier.not:checked 		~ label > .option::before {
			content: '\f056';
		}

		/**************************************************************/
		.taggr > .tags > .tag.plus:not(:last-child) {
			margin-right: 0 !important;
		}
		.taggr > .tags > .tag.plus:not(:last-child) > label {
			border-top-right-radius: 	 0 !important;
			border-bottom-right-radius:  0 !important;
		}
		.taggr > .tags > .tag.plus + .tag > label,
		.taggr > .tags > .tag.plus + .tag > input.focal:checked ~ label {
			border-left: 			  none !important;
			border-top-left-radius: 	 0 !important;
			border-bottom-left-radius:   0 !important;
		}
		.taggr > .tags > .tag.plus + .tag > label > .field {
			-webkit-border-radius: 0;
			-moz-border-radius: 0;
					border-radius: 0;
		}

		/**************************************************************/
		.taggr > .tags > .tag > label > input {
			padding: 0 !important;
			margin: 0 !important;
			border: none !important;
			background: transparent !important;
			font-family: monospace !important;
			text-align: center !important;
		}
		.taggr > .tags > .tag > input.matcher.none:checked  	~ label > input {
			margin-left: 	.25rem !important;
		}
		.taggr > .tags > .tag > input.modifier.none:checked 	~ label > input {
			margin-right: 	.25rem !important;
		}
		/* .taggr > .tags > .tag > label > input:not([disabled]) {
			background-color: white !important;
		} */
		.taggr > .tags > .tag > label > input::selection {
			background: 	#CCC !important;
			color: 			#000 !important;
			text-shadow: 	none !important;
		}
		.taggr > .tags > .tag > label > input::-moz-selection {
			background: 	#CCC !important;
			color: 			#000 !important;
			text-shadow: 	none !important;
		}


	/******************************************************************/
	/* FLEX */

		.flex 		 { display: -webkit-flex; display: -ms-flexbox; display: flex; float: none !important; }
		/* FLEX.FLOW */
		.flexDirCol  { -webkit-flex-flow: 		   	   column; flex-flow: 			   column; }
		.flexDirColR { -webkit-flex-flow: 	   column-reverse; flex-flow: 	   column-reverse; }
		.flexDirRow  { -webkit-flex-flow: 				  row; flex-flow: 				  row; }
		.flexDirRowR { -webkit-flex-flow: 		  row-reverse; flex-flow: 		  row-reverse; }
		/* FLEX.WRAP */
		.flexWrap 	 { -webkit-flex-wrap: 		  		 wrap; flex-wrap: 				 wrap; }
		.flexWrapR 	 { -webkit-flex-wrap: 		 wrap-reverse; flex-wrap: 		 wrap-reverse; }
		/* FLEX.ALIGN */
		.flexAlignL  { -webkit-align-items: 	   flex-start; align-items: 	   flex-start; }
		.flexAlignB  { -webkit-align-items: 		 baseline; align-items: 		 baseline; }
		.flexAlignC  { -webkit-align-items: 		   center; align-items: 		   center; }
		.flexAlignS  { -webkit-align-items: 		  stretch; align-items: 		  stretch; }
		.flexAlignR  { -webkit-align-items: 		 flex-end; align-items: 		 flex-end; }
		/* FLEX.SPACE */
		.flexSpaceS  { -webkit-justify-content:    flex-start; justify-content:    flex-start; }
		.flexSpaceC  { -webkit-justify-content: 	   center; justify-content: 	   center; }
		.flexSpaceE  { -webkit-justify-content: 	 flex-end; justify-content: 	 flex-end; }
		.flexSpaceA  { -webkit-justify-content:  space-around; justify-content:  space-around; }
		.flexSpaceB  { -webkit-justify-content: space-between; justify-content: space-between; }


	/******************************************************************/
	/* WAITER */

		.wait {
			padding: 	47vmin 48.75vmax;
			text-align: center;
			font-size: 	1rem;
			opacity: 	0;
			z-index: 	9999;
			background: white;
			-webkit-transition: opacity .25s ease-out;
			-moz-transition: opacity .25s ease-out;
				-ms-transition: opacity .25s ease-out;
				-o-transition: opacity .25s ease-out;
					transition: opacity .25s ease-out;
		}
		.wait.show > div {
			height: 100%;
			width: 6px;
			margin: 0 .5px;
			display: inline-block;
		}
		/* .wait:not(.show) {
			opacity: 0;
			pointer-events: none !important;
		} */

		.wait.show > div {
			-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
					animation: sk-stretchdelay 1.2s infinite ease-in-out;
		}
		.wait.show .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
		.wait.show .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }
		.wait.show .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
		.wait.show .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }

		@-webkit-keyframes sk-stretchdelay {
			0%, 40%, 100% 	{ -webkit-transform: scaleY(0.4) }
			20% 			{ -webkit-transform: scaleY(1.0) }
		}
		@keyframes sk-stretchdelay {
			0%, 40%, 100% { -webkit-transform: scaleY(0.4); transform: scaleY(0.4); }
			20% 		  { -webkit-transform: scaleY(1.0); transform: scaleY(1.0); }
		}


	/******************************************************************/
	/* SUNKEN BORDERS */

		.sunk, .sunk:hover {
			-webkit-border-radius: 	   0 	!important;
			-moz-border-radius: 	   0 	!important;
					border-radius: 	   0 	!important;
					border-top: 	none 	!important;
					border-bottom: 	none 	!important;
					border-right: 	1px solid rgba(0,0,0,0.15) 		 !important;
					border-left:  	1px solid rgba(255,255,255,0.15) !important;
		}
		.sunk.fst:hover,
		.sunk.fst { border-left: 	none 	!important; }
		.sunk.lst:hover,
		.sunk.lst { border-right: 	none 	!important; }
		.sunk:not(.fst):hover, .sunk:not(.fst) {
					padding-left:  1rem !important;
		}
		.sunk:not(.lst):hover, .sunk:not(.lst) {
					padding-right: 1rem !important;
		}

	/******************************************************************/
	/* PANELS */

		.panel {
			margin-bottom: 1rem;
		}

		/**************************************************************/
		/* PANEL.HEAD */

			.panel > .heading {
				text-align: right;
			}
			.panel > .heading i {
				margin-left: .5em;
			}
			.panel:not(.side) > .heading:not(.reveal) {
				border-bottom: 1px solid #aaa;
			}
			.panel > .heading.fixed {
				position: -webkit-sticky;
				position: sticky;
				top: 5.9vh;
				display: table;
				width: 100%;
				background-color: inherit;
				z-index: 2;
			}
			.code .panel > .heading.fixed {
				top: 0;
				/**/ background-color: #f8f8f8;
			}

		/**************************************************************/
		/* PANEL.BODY */

			.panel > .body {
				padding: 1em;
			}
			.panel > .body.broad {
				padding: 1em 0;
			}
			.panel > .body.spaced > * {
				margin-bottom: 1em;
			}
			.panel > .body.accordian {
				padding: 1em 0;
			}

			/* .panel.slab > .body {
				border: solid 1px #e4e4e4;
				border-top: none;
			} */

			.panel > .body h1,
			.panel > .body h2,
			.panel > .body h3,
			.panel > .body h4,
			.panel > .body h5,
			.panel > .body h6 {
				font-weight: 500;
				margin-bottom: .5em;
			}

			.panel > .body.accordian h1,
			.panel > .body.accordian h2,
			.panel > .body.accordian h3,
			.panel > .body.accordian h4,
			.panel > .body.accordian h5,
			.panel > .body.accordian h6 {
				margin-top: 0;
			}

		/**************************************************************/
		/* PANEL.SIDE */
		
			.panel.side > .body {
				font-size: .8rem;
				border-left: 1px solid #aaa;
			}
			.panel.side > .heading ~ .body {
				border-top: 1px solid #aaa;
				border-top-left-radius: .25em;
			}

	/******************************************************************/
	/* STUBS */

		.stub {
			white-space: nowrap;
		}
		.stub > .bubble {
			margin: 0;
		}
		a.stub {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
		}
		a.stub > .bubble.small ~ dt { 
			margin-left: .5em;
			text-overflow: ellipsis;
		}

	/******************************************************************/
	/* MULTIS */

		.tkn {
			display: flex;
			flex-flow: row nowrap;
			justify-content: center;
			font-size: .8rem;
			font-weight: 500;
			text-align: center;
			white-space: nowrap;
			vertical-align: middle;
			cursor: pointer;
			background-image: none;
			border: 0 solid transparent;
			border-radius: .15em;
			-webkit-user-select: none;
			   -moz-user-select: none;
				-ms-user-select: none;
					user-select: none;
			-ms-touch-action: manipulation;
				touch-action: manipulation;
		}
		.tkn > * {
			display: block;
			padding: .5em 0;
			margin: 0 1em;
			background-color: inherit;
			z-index: 2;
		}

		.tkn.block {
			display: block;
			width: 100%;
			font-size: 1rem;
		}
			.tkn .edge {
				position: relative;
				padding: inherit;
				top: 0; left: 0; 
				width: 100%; height: 100%;
				position: absolute;
				text-align: left;
			}
			.tkn.after .edge { text-align: right; }
		.tkn.block.inline {
			font-size: .9rem;
		}
		.tkn.large {
			font-size: 1em;
			font-weight: 400;
			line-height: 1.3333333;
			border-radius: .2em;
		}

		p .tkn {
			display: inline-block;
			font-size: .75em;
		}
		p .tkn > * {
			margin: 0 .5em;
		}

		.dflt:not(.heading):not(.tgl):not(.help):not(.alert):hover,
		.dflt:not(.heading):not(.tgl):not(.help):not(.alert):active,
		.dflt:not(.heading):not(.tgl):not(.help):not(.alert):focus  { background-color: #555555; }
		.dflt, .dflt-b::before, .dflt-a::after                      { background-color: #747474; }

		.good.alert,.good.help { color: #3c763d !important; background-color: #dff0d8; }
		.info.alert,.info.help { color: #31708f !important; background-color: #d9edf7; }
		.warn.alert,.warn.help { color: #8a6d3b !important; background-color: #fcf8e3; }
		.nope.alert,.nope.help { color: #a94442 !important; background-color: #f2dede; }
		.alert, .help { font-weight: 400; }

		.tlfd { color: #494949; }
		.mron { color: #2e6da4; }
		.doog { color: #4cae4c; }
		.ofni { color: #46b8da; }
		.nraw { color: #eea236; }
		.epon { color: #d43f3a; }

		.multi {
			margin-bottom: 1em;
			border-radius: 2em;
		}
		.multi.small {
			font-size: .6rem;
		}
		.multi.collapse {
			margin: 0 !important;
		}
		.multi > *:first-child {
			border-top-left-radius: inherit;
			border-bottom-left-radius: inherit;
		}
		.multi > *:last-child {
			border-top-right-radius: inherit;
			border-bottom-right-radius: inherit;
		}
		.results .multi, .results .tkn {
			margin-bottom: 0;
		}
		.results > [class*="col-"] {
			padding: 0;
		}

		.multi > .lvl,
		.multi > [data-more]::after {
            display: inline-block;
			max-width: 0;
			min-width: 0;
            z-index: 1;
			transition: max-width .225s ease-in .7s,
						min-width .225s ease-in .7s,
						border       0s ease-in .625s;
			overflow: hidden;
		}
		.multi > .lvl {
			margin: 0;
			/* padding: .5em 1em .5em .5em; */
			background-color: transparent;
			border-left-color: white;
			border-left-style: solid;
			border-left-width: 0px;
			will-change: transform;
		}
		.multi > [data-more]::after {
            content: '\a0(' attr(data-more) ')';
            font-style: italic;
            font-size: x-small;
			vertical-align: super;
			line-height: 0.9;
			will-change: max-width;
		}

		.multi:hover > .lvl,
		.multi:hover > [data-more]:after {
			transition: max-width .125s ease-out   .5s,
						min-width .125s ease-out   .5s,
						border       0s ease-out .625s;
		}
		.multi:hover > .lvl { 
			max-width:   5em; 
			min-width: 2.5em; 
			border-left-width: 1px;
		}
		.multi:hover > [data-more]::after { 
			max-width: 10em; 
		}

		.multi.peek {
			position: relative;
			background: transparent;
			padding: 0; border: none;
			white-space: nowrap;
			line-height: calc(2em + 2px);
			margin-right: 0;
			/* margin-bottom: 1.5em; */
			transition-property: margin;
		}
		.multi.peek > :first-child {
			position: relative;
			margin-right: 0;
			min-width: 100%;
			text-align: left;
			z-index: 3000;
			transition-property: min-width, padding;
		}
		.multi.peek > .peeks  {
			position: relative;
			border-left: 0; margin-left: 0;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			position: absolute; right: 0;
			transition-property: transform;
		}
		.multi.peek > .peeks > * {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
		.multi.peek > .peeks > .more {
			border-left: 0;
			padding: 6px;
		}
		.multi.peek > .peeks > .more:not(:last-child) {
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
			border-right: 0;
		}
		.multi.peek > .peeks > .more ~ .lvl {
			padding: 6px;
		}
		.multi.peek > .peeks > .more > sup {
			font-size: .8em;
		}
		.multi.peek, .multi.peek > :first-child, .multi.peek > .peeks {
			transition-timing-function: ease-in-out;
			transition-duration: .25s;
		}
		.multi:not(:last-child) {
			margin-right: .25em;
		}

		.results > .multi {
			margin-right: 10px;
		}
		.results {
			width:		100%;
			max-width: 	100%;
			overflow: 	hidden;
			overflow-x: auto;
		}

		.eStub.hasSvc .tkn.norm { background-color: #fbfbfb; }
		.eStub.hasSvc .results .multi:first-child {
			color: #fff;
			background-color: #7c97d5;
			border-color: #728bc4;
			font-weight: 500;
		}

		/**************************************************************/
		/* HOVER */

			.multi.peek:hover > :first-child {
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
			}
			.multi.peek.more:hover > :first-child 	 {
				border-right: 0;
				padding-right: 0;
			}
			/*.multi.peek:hover .norm:not(.lvl) 	 { 	 color: #000000; }*/

			.multi.peek[data-x1]:hover 				 { 		   margin-right: 2.0em;  }
			.multi.peek[data-x1]:hover > :last-child { transform: translateX(2.0em); }
			.multi.peek[data-x2]:hover 				 { 		   margin-right: 3.0em;  }
			.multi.peek[data-x2]:hover > :last-child { transform: translateX(3.0em); }
			.multi.peek[data-x3]:hover 				 { 		   margin-right: 3.5em;  }
			.multi.peek[data-x3]:hover > :last-child { transform: translateX(3.5em); }
			.multi.peek[data-x4]:hover 				 { 		   margin-right: 4.5em;  }
			.multi.peek[data-x4]:hover > :last-child { transform: translateX(4.5em); }
			.multi.peek[data-x5]:hover 				 { 		   margin-right: 5.0em;  }
			.multi.peek[data-x5]:hover > :last-child { transform: translateX(5.0em); }
			.multi.peek[data-x6]:hover 				 { 		   margin-right: 6.0em;  }
			.multi.peek[data-x6]:hover > :last-child { transform: translateX(6.0em); }

			/*.multi.peek:hover .norm 		 {		  border-color: #494949; }*/
			.multi.peek:hover .danger 		 {		  border-color: #ac2925; }
			.multi.peek:hover .warning 		 {		  border-color: #d58512; }
			.multi.peek:hover .info 		 {		  border-color: #269abc; }
			.multi.peek:hover .success 		 {		  border-color: #398439; }

			/*.multi.peek:hover .norm:not(.lvl)  { 	  background-color: #bcbcbc; }*/
			.multi.peek:hover .danger:not(.lvl)  { 	  background-color: #c9302c; }
			.multi.peek:hover .warning:not(.lvl) { 	  background-color: #ec971f; }
			.multi.peek:hover .info:not(.lvl) 	 { 	  background-color: #31b0d5; }
			.multi.peek:hover .success:not(.lvl) { 	  background-color: #449d44; }

			.multi.peek.sm[data-x1]:hover 		 		{ 		  margin-right: 1.5em;  }
			.multi.peek.sm[data-x1]:hover>:last-child 	{ transform: translateX(1.5em); }
			.multi.peek.sm[data-x2]:hover 		 		{ 		  margin-right: 2.5em;  }
			.multi.peek.sm[data-x2]:hover>:last-child 	{ transform: translateX(2.5em); }
			.multi.peek.sm[data-x3]:hover 		 		{ 		  margin-right: 3.5em;  }
			.multi.peek.sm[data-x3]:hover>:last-child 	{ transform: translateX(3.5em); }
			.multi.peek.sm[data-x4]:hover 		 		{ 		  margin-right: 4.0em;  }
			.multi.peek.sm[data-x4]:hover>:last-child 	{ transform: translateX(4.0em); }
			.multi.peek.sm[data-x5]:hover 		 		{ 		  margin-right: 5.5em;  }
			.multi.peek.sm[data-x5]:hover>:last-child 	{ transform: translateX(5.5em); }
			.multi.peek.sm[data-x6]:hover 		 		{ 		  margin-right: 6.5em;  }
			.multi.peek.sm[data-x6]:hover>:last-child 	{ transform: translateX(6.5em); }

/**********************************************************************/
/* TOP/BOTTOM */

	/******************************************************************/
	/* GENERAL */

		#banner, #logo {
			position: relative;
			height: 100%;
			min-height: 100%;
		}
		/* #banner {
			max-width: 60%;
			min-width: 40%;
		} */
		#logo {
			max-width: 25vmin;
			min-width: 15vmin;
			background-image: url('/public/images/Logo.stock.png');
			background-position: left center;
			background-repeat: no-repeat;
			background-size: contain;
		}
		.jumbo #logo {
			background-image: url('/public/images/Logo.jumbo.png');
		}
		#title {
			position: relative;
			margin-left: 1rem;
			font-size: 3rem;
			font-weight: 100;
			line-height: .25;
			white-space: nowrap;
			/* padding-bottom: .5rem; */
		}
		#title span {/* vertical-align: initial; *//* line-height: inherit; */line-height: .75;}


	/******************************************************************/
	/* HEADER */

		/**************************************************************/
			#settings {
				/* max-width: 50%; */
				padding: 0 .25rem;
				overflow: hidden;
			}
			#settings,
			#settings #profile,
			#settings > form > #logoutLbl > span#user {
				-webkit-border-radius: .25rem;
				-moz-border-radius: .25rem;
						border-radius: .25rem;
			}

		/**************************************************************/
			#settings > form > *:not(#profile)  {
				/* padding: 		0 .5rem; */
				/* line-height: 	3rem; */
				/* margin: 		0; */
				/* font-size: 		2rem; */
				background-color: transparent !important;
			}

		/**************************************************************/

			#settings > form > .auth { display: table; }
			#settings > form > .auth,
			#settings > form > .auth > * { position: relative; }
			#settings > form > .auth > input,
			#settings > form > label > span#user {
				cursor: pointer !important;
			}
			#settings > form > .auth > i {
				vertical-align: middle;
				z-index: 0;
			}
			#settings > form > .auth > input {
				top: 0; left: 0;
				width: 100%; height: 100%;
				margin: 0; padding: 0;
				background: transparent;
				z-index: 1;
				border: none;
				position: absolute;
			}
			#settings > form > #logoutLbl > span {
				font-size: 1.5rem;
			}
			#settings > form > #logoutLbl > span#user {
				padding: .25rem .5rem;
				background: #F1F2F1;
				border: solid 1px #DCDCDC;
				margin-left: .25em;
			}
			#settings > form > #logoutLbl > span#user a {
				color: #666;
			}
			#settings > form > #logoutLbl > span#user i {
				margin-left: .5rem;
			}
			#settings > form > span > input {
				margin: 0;
				vertical-align: bottom;
			}


	/******************************************************************/
	/* PROFILE */

		#settings .proShow {
			display: none;
		}
		#settings form > * {
			z-index: 1;
		}
		#settings #profile {
			position: relative;
			max-width: 20vw;
			top: 6vh;
			right: 0;
			z-index: 0 !important;
			margin: .5rem 1.5rem;
			position: absolute;
			background: white;
			overflow: hidden;
			border: solid 1px #DFD8EB;
			-webkit-font-smoothing: subpixel-antialiased;
			-webkit-transition: opacity .125s ease-out .7s, transform .25s ease-out .5s;
			-moz-transition: opacity .125s ease-out .7s, transform .25s ease-out .5s;
				-ms-transition: opacity .125s ease-out .7s, transform .25s ease-out .5s;
				-o-transition: opacity .125s ease-out .7s, transform .25s ease-out .5s;
					transition: opacity .125s ease-out .7s, transform .25s ease-out .5s;
		}
		#settings label#logoutLbl:not(:hover) ~ #profile:not(:hover) {
			opacity: 0;
			-webkit-transform: translate3d(0, -56vh, 0);
			-moz-transform: translate3d(0, -56vh, 0);
				-ms-transform: translate3d(0, -56vh, 0);
				-o-transform: translate3d(0, -56vh, 0);
					transform: translate3d(0, -56vh, 0);
			-webkit-transition: opacity .125s ease-in .45s, transform .25s ease-in .5s;
			-moz-transition: opacity .125s ease-in .45s, transform .25s ease-in .5s;
				-ms-transition: opacity .125s ease-in .45s, transform .25s ease-in .5s;
				-o-transition: opacity .125s ease-in .45s, transform .25s ease-in .5s;
					transition: opacity .125s ease-in .45s, transform .25s ease-in .5s;
		}
		#settings #profile #user {
			padding: 1rem;
			background: #75717B;
			box-sizing: content-box;
			position: relative;
			z-index: 1;
			-webkit-flex-grow: 0;
			flex-grow: 0;
			height: 7rem;
		}
		#settings #profile #about {
			-webkit-flex-grow:  2;
					flex-grow:  2;
			-webkit-flex-basis: 50%;
					flex-basis: 50%;
		}
		#settings #profile #name {
			font-size: 2rem;
			color: white;
		}
		#settings #profile #jobtitle {
			white-space: normal;
			color: #E2E2E2;
		}
		#settings #profile #info {
			position: relative;
			-webkit-flex-grow: 2;
					flex-grow: 2;
			-webkit-align-self: stretch;
					align-self: stretch;
			-webkit-overflow-scrolling: touch;
			overflow: hidden;
			overflow-y: auto;
			background: white;
		}
		#settings #profile a {
			font-weight: bold;
			text-decoration: none;
		}
		#settings #profile #demograph {
			position: relative;
			margin: 1rem 0;
			-webkit-align-self: stretch;
					align-self: stretch;
		}

		#settings #profile #demograph > table {
			width: 100%;
			border-spacing: 0 1rem;
		}
		#settings #profile #demograph caption {
			font-size: 1.5rem;
			margin-right: 1rem;
			padding: .25rem .5rem;
			margin-bottom: 0;
			background: #F1F2F1;
		}
		#settings #profile #demograph td {
			vertical-align: top;
		}
		#settings #profile #demograph > table > tbody > tr > td > *:not(table) {
			padding: .5rem;
		}
		#settings #profile #demograph > table > tbody > tr > td > table {
			border-spacing: .5rem;
		}
		#settings #profile #demograph > table > tbody > tr > td:first-child {
			position: relative;
			background: #E2E2E2;
			font-weight: bold;
			text-align: right;
			width: 30%;
		}
		#settings #profile #demograph > table > tbody > tr > td:last-child {
			background: transparent;
		}
		#settings #profile #demograph caption,
		#settings #profile #demograph > table > tbody > tr > td:first-child {
			border-radius: 0 .25rem .25rem 0;
		}


		#settings #profile #demograph figure > figcaption {
			margin-bottom: .5rem;
		}
		#settings #profile #demograph figure > p {
			margin: .5rem .5rem .5rem 1rem;
		}
		#settings #profile #demograph figure > p::before {
			content: '\02022';
			margin-right: .5rem;
			color: #666;
		}
		#settings #profile #demograph td:last-child ul > li {
			margin: .25rem 0;
		}


	/******************************************************************/
	/* DISPLAY */

		/* #content > *:not(.wait), .sections, .jsonp, #box { */
			/* -webkit-transition: opacity .25s ease-out;
			   -moz-transition: opacity .25s ease-out;
				-ms-transition: opacity .25s ease-out;
				 -o-transition: opacity .25s ease-out;
					transition: opacity .25s ease-out; */
		/* } */
		/* #content:not(.ready) > *:not(.wait) { opacity: 0; } */
		#content.ready > .wait 				{ opacity: 0; pointer-events: none !important; }
		#content.ready.pause > * 			{ opacity: .5; }
		#content.ready.pause 	 			{ cursor: wait !important; }
		#content.ready.loggedOut #main 		{ cursor: not-allowed !important; }
		#content.ready.pause #main * 		{ pointer-events: none !important; }
		#content.loggedOut 	 #main input,
		#content.loggedOut 	 #main select,
		#content.loggedOut 	 #main textarea,
		#content.loggedOut 	 #main datalist,
		#content.loggedOut 	 #main .taggr,
		#content.pause 		 #main input,
		#content.pause 		 #main select,
		#content.pause 		 #main textarea,
		#content.pause 		 #main datalist,
		#content.pause 		 #main .taggr,
		#content:not(.ready) #main input,
		#content:not(.ready) #main select,
		#content:not(.ready) #main textarea,
		#content:not(.ready) #main datalist,
		#content:not(.ready) #main .taggr {
			cursor: not-allowed !important;
			background: #ECECEC !important;
			color: rgba(211, 211, 211,0.5) !important;
			text-shadow: 1px 4px 6px #ECECEC, 0 0 0 #000000, 1px 4px 6px #ECECEC !important;
		}
		#content.loggedOut   #main .tag > label > input {
			background: inherit !important;
		}
		#content.loggedOut 	 #main input::-webkit-input-placeholder,
		#content.loggedOut 	 #main input:-moz-placeholder,
		#content.loggedOut 	 #main input::-moz-placeholder,
		#content.loggedOut 	 #main input:-ms-input-placeholder,
		#content.pause 		 #main input::-webkit-input-placeholder,
		#content.pause 		 #main input:-moz-placeholder,
		#content.pause 		 #main input::-moz-placeholder,
		#content.pause 		 #main input:-ms-input-placeholder,
		#content:not(.ready) #main input::-webkit-input-placeholder,
		#content:not(.ready) #main input:-moz-placeholder,
		#content:not(.ready) #main input::-moz-placeholder,
		#content:not(.ready) #main input:-ms-input-placeholder 		{ color: rgba(211, 211, 211,0.5) !important; }

		#content #header #settings input:not([type="submit"]),
		#content #header #settings select,
		#content #header #settings textarea,
		#content #header #settings datalist {
			cursor: text !important;
			color: initial !important;
			text-shadow: none !important;
			background: rgb(242, 242, 242);
		}

		/* #content.loggedOut * { -webkit-overflow-scrolling: auto !important; } */
		#content.ready.loggedOut #main > *:not(.lock)  { opacity: .75 !important; }
		#content.ready.loggedOut .jsonp > * { opacity:   0 !important; }
		#content #nav { display: none; }
		#content #stat { display: none; }


	/******************************************************************/
	/* LOCK */

		.lock {
			z-index: 8999;
			opacity: 0;
			font-size: 4rem;
			text-align: center;
			pointer-events: none;
			background: rgba(0,0,0,0.25);
			-webkit-transition: opacity .125s ease-out 1s;
			-moz-transition: opacity .125s ease-out 1s;
				-ms-transition: opacity .125s ease-out 1s;
				-o-transition: opacity .125s ease-out 1s;
					transition: opacity .125s ease-out 1s;
		}
		.lock > div {
			display: none;
			position: relative;
			border-top: 	1px solid;
			border-bottom: 	1px solid;
			width: 		100%;
			background-color: white;
			max-height: 0 !important;
			padding: 	0 !important;
			-webkit-transition: opacity 	.125s ease-out .5s,
								max-height 	.125s ease-out .5s,
								padding 	.125s ease-out .5s;
			-moz-transition: opacity 	.125s ease-out .5s,
								max-height 	.125s ease-out .5s,
								padding 	.125s ease-out .5s;
				-ms-transition: opacity 	.125s ease-out .5s,
								max-height 	.125s ease-out .5s,
								padding 	.125s ease-out .5s;
				-o-transition: opacity 	.125s ease-out .5s,
								max-height 	.125s ease-out .5s,
								padding 	.125s ease-out .5s;
					transition: opacity 	.125s ease-out .5s,
								max-height 	.125s ease-out .5s,
								padding 	.125s ease-out .5s;
		}
		.lock, .lock > div { opacity: 0; }


		.loggedOut .lock {
			pointer-events: auto !important;
			-webkit-transition: opacity .125s ease-out;
			-moz-transition: opacity .125s ease-out;
				-ms-transition: opacity .125s ease-out;
				-o-transition: opacity .125s ease-out;
					transition: opacity .125s ease-out;
		}
		.loggedOut .lock > div {
			max-height: 2rem !important;
			padding: 1rem 0 !important;
		}
		.loggedOut .lock,
		.loggedOut .lock > div { opacity: 1 !important; }

		.lock>div:nth-child(1) { color: rgb( 55, 181,  71); }
		.lock>div:nth-child(2) { color: rgb(100, 149, 237); }
		.lock>div:nth-child(3) { color: rgb(193, 137,   4); }
		.lock>div:nth-child(4) { color: rgb(237,  42,  95); }

		#stat[data-value="1"]~#main>.lock>div:nth-child(1) { display: table; }
		#stat[data-value="2"]~#main>.lock>div:nth-child(2) { display: table; }
		#stat[data-value="3"]~#main>.lock>div:nth-child(3) { display: table; }
		#stat[data-value="4"]~#main>.lock>div:nth-child(4) { display: table; }


	/******************************************************************/
	/* LOADER */

		#content.ready #loader {
			opacity: 0; z-index: 9999;
			padding: calc(50vmin - 7.5px) 40vmin;
			text-align: center;
			pointer-events: none;
			background: transparent;
			-webkit-transition: opacity .125s ease-out .5s;
			-moz-transition: opacity .125s ease-out .5s;
				-ms-transition: opacity .125s ease-out .5s;
				-o-transition: opacity .125s ease-out .5s;
					transition: opacity .125s ease-out .5s;
		}
		#content.ready.pause #loader {
			opacity: 1;
			-webkit-transition: opacity .1s ease-out;
			-moz-transition: opacity .1s ease-out;
				-ms-transition: opacity .1s ease-out;
				-o-transition: opacity .1s ease-out;
					transition: opacity .1s ease-out;
		}
		#content.ready #bar {
			background: white;
			width: 100%;
			padding: .5rem;
			-webkit-border-radius: .5rem;
			-moz-border-radius: .5rem;
			border-radius: .5rem;
			background-color: #75717B;
			border: solid 1px #d5cee0;
		}
		#content.ready #progress {
			text-align: left;
			width: 0;
			min-width: 0;
			padding: .125rem;
			color: #75717B;
			background: white;
			-webkit-border-radius: .25rem;
			-moz-border-radius: .25rem;
					border-radius: .25rem;
			-webkit-transition: min-width .125s ease-out;
			-moz-transition: min-width .125s ease-out;
				-ms-transition: min-width .125s ease-out;
				-o-transition: min-width .125s ease-out;
					transition: min-width .125s ease-out;
		}
		#content.ready.pause #progress {
			-webkit-transition: min-width .5s ease-out;
			-moz-transition: min-width .5s ease-out;
				-ms-transition: min-width .5s ease-out;
				-o-transition: min-width .5s ease-out;
					transition: min-width .5s ease-out;
		}


	/******************************************************************/
	/* FOOTER */

/**********************************************************************/
/**********************************************************************/