:root	{
        --safe-area-inset-top:          env(safe-area-inset-top, 0px);
        --safe-area-inset-bottom:       env(safe-area-inset-bottom, 0px);
        --safe-area-inset-left:		env(safe-area-inset-left, 0px);
        --safe-area-inset-right:	env(safe-area-inset-right, 0px);
	--safe-area-inset-horizontal:	calc( var(--safe-area-inset-left) + var(--safe-area-inset-right) );
	--safe-area-inset-vertical:	calc( var(--safe-area-inset-top) + var(--safe-area-inset-bottom) );
	--default-dialog-inset:		20px;	
        --ag-wrapper-border:		0px;
        --ag-wrapper-border-radius:	0px;



	--body-background:			linear-gradient(180deg,rgba(122, 165, 251, 1) 0%, rgba(194, 182, 255, 1) 77%);

	--text-color:				oklch(0.25 0 0 / 1);
	--box-shadow:				5px 5px 15px rgba(0,0,0,0.5);
	--label-width:				300px;


	--dialog-modal-color:			oklch(0 0 0 / 0.5);

	--dialog-title-background:		linear-gradient(180deg,rgba(166, 194, 237, 1) 0%, rgba(144, 162, 214, 1) 100%);
	--dialog-title-color:			#ffffff;
	--dialog-title-shadow:			1px 1px 1px #000000;
	--dialog-title-height:			2em;
	--dialog-title-weight:			800;
	--dialog-title-align:			left;
	--dialog-border-radius:			16px;
	--dialog-background:			oklch(0.95 0 0 / 1);
	--dialog-background:			linear-gradient(180deg,rgba(238, 238, 238, 1) 0%, rgba(221, 221, 221, 1) 100%);
	--dialog-background:			linear-gradient(90deg,rgba(238, 238, 238, 1) 0%, rgba(221, 221, 221, 1) 50%, rgba(238, 238, 238, 1) 100%);
	--dialog-border-color:			var(--dialog-background); /*hsl(0   0%   100% / 20%);*/
	--dialog-internal-margin:		2px;
	--dialog-panel-background:		rgba(238,238,238,1);

	--dialog-message-color:			#ffffff;
	--dialog-message-text-shadow:		1px 1px 1px #000000;
	--dialog-message-background:		hsl(0   100% 33% / 1);
	--dialog-message-background-yellow:	hsl(60  100% 33% / 1);
	--dialog-message-background-green:	hsl(120 100% 33% / 1);

	--button-text-color:			#444444;
	--button-text-color-hover:		#000000;
	--button-border-color:			#bbbbbb;
	--button-border-color-hover:		#3c7bb1;
	--button-border-color-disabled:		#cccccc;
	--button-border-radius:			99999px;
	--button-background:			linear-gradient(180deg, #FFFFFF 0%, #CFCFCF 100%);
	--button-background-hover:		linear-gradient(180deg, #EAF6FD 0%, #A7D9F5 100%);

	--input-background:			#ffffff;
	--input-border-color:			#cccccc;
	--input-border-radius:			4px;
	--input-text-color:			#222222;
	--input-text-shadow:			none;
	--input-placeholder-color:		#cccccc;
	--input-font-size:			1.5em;
	--input-placeholder-size:		0.8em;

	--input-border-color-focus:		#6994e9;
	--input-background-disabled:		#eeeeee;
	--input-text-color-disabled:			#888888;
	--input-text-shadow-disabled:		1px 1px 1px #ffffff;

	--select-picker-background:		rgba(240,240,240,0.75);
	--select-picker-selected-background:	#cccccc;
	--select-picker-text-color:		#444444;
	--select-picker-selected-text-color:	#000000;
	--select-picker-group-text-color:	#888888;
	--select-picker-empty-text-color:	#cccccc;

	--popover-background:			#eeeeee;
	--popover-item-color:			#000000;
	--popover-separator-top-color:		#cccccc;
	--popover-separator-bottom-color:	#ffffff;
	--popover-header-border-color:		#888888;
	--popover-item-disabled-color:		#888888;
	--popover-item-disabled-text-shadow:	1px 1px 1px #ffffff;
	--popover-hover-color:			var(--dialog-title-color);

	--toggle-on-border-color:		#5993d3;

	--transition-duration:			0.5s;
	--fa-family:				"Font Awesome 7 Free";
	}



@media (prefers-color-scheme: dark) {
:root	{
	--body-background:			#222222;
	--text-color:				#888888;
	--box-shadow:				0px 0px 10px rgb(63 124 255 / 50%);

	--dialog-modal-color:			rgba(0,0,15,0.2);

	--dialog-title-background:		oklch(0.4 0.08 261.71 / 1);
	--dialog-title-color:			#aaaaaa;
	--dialog-title-shadow:			1px 1px 1px #000000;
	--dialog-border-radius:			8px;
	--dialog-background:			linear-gradient(90deg,rgba(34, 34, 34, 1) 0%, rgba(28, 28, 28, 1) 50%, rgba(34, 34, 34, 1) 100%);
	--dialog-border-color:			#111111;
	--dialog-padding:			0px;
	--dialog-panel-background:		rgba(34,34,34,1);

	--dialog-message-background:		hsl(0   100% 20% / 1);
	--dialog-message-background-yellow:	hsl(60  100% 20% / 1);
	--dialog-message-background-green:	hsl(120 100% 20% / 1);

	--button-text-color:			#888888;
	--button-text-color-hover:		#cccccc;
	--button-border-color:			#333333;
	--button-border-color-hover:		#335566;
	--button-border-color-disabled:		#333333;
	--button-border-radius:			99999px;
	--button-background:			linear-gradient(0deg, #111111 0%, #222222 100%);
	--button-background-hover:		linear-gradient(0deg, #223355 0%, #445588 100%);

	--input-background:			#000000;
	--input-border-color:			#333333;
	--input-border-color-focus:		#6994e9;
	--input-text-color:			#888888;
	--input-text-shadow:			none;
	--input-placeholder-color:		#333333;

	--select-picker-background:		rgba(16,16,16,0.75);
	--select-picker-selected-background:	#444444;
	--select-picker-text-color:		#888888;
	--select-picker-selected-text-color:	#ffffff;
	--select-picker-group-text-color:	#444444;
	--select-picker-empty-text-color:	#cccccc;


	--popover-background:			#222222;
	--popover-item-color:			#cccccc;
	--popover-item-disabled-color:		#888888;
	--popover-item-disabled-text-shadow:	1px 1px 1px #000000;
	--popover-separator-top-color:		#444444;
	--popover-separator-bottom-color:	#000000;
	--popover-hover-color:			#ffffff;
	--popover-header-border-color:		#00000000;
	}

}




/*
@media(prefers-reduced-motion: no-preference)
{
@view-transition { navigation:	auto; }
::view-transition-group(root) { animation-duration:	0.5s; }
::view-transition-old(root) { animation-name:		slide-page-out; }
::view-transition-new(root) { animation-name:		slide-page-in; }
@keyframes slide-page-out { to { translate: 100vw; } }
@keyframes slide-page-in { from { translate: -100vw; } }
}
*/

























body[theme="01"]
	{
	--dialog-title-height:			0px;
	--bevel-size:				2px;
	--bevel-highlight:			rgba(255,255,255, 0.8);
	--bevel-lowlight:			rgba(0,0,0, 0.5);
	--dialog-border-radius:			24px;
	--box-shadow:				inset var(--bevel-size) var(--bevel-size) var(--bevel-size) var(--bevel-highlight),			/* white highlight */
						inset calc(var(--bevel-size)*-1) calc(var(--bevel-size)*-1) var(--bevel-size) var(--bevel-lowlight),	/* dark highlight */
						5px 5px 5px rgba(0,0,0,0.5);			/* actual shadow */
	--dialog-border-color:			rgba(0,0,0,0);
	--dialog-internal-margin:		calc(var(--bevel-size) + 2px);
	}

body[theme="02"]	/* GLASS */
	{
	--dialog-border-radius:			20px;
	--dialog-background:			oklch(1 0 0 / 0.4);
	--box-shadow:				0px 0px 5px rgb(63 124 255 / 50%);
	--dialog-modal-color:			rgba(0, 0, 0, 0.1);
	--dialog-internal-margin:		5px;
	--dialog-title-height:			2em;
	--dialog-title-weight:			400;
	--dialog-title-background:		transparent;
	--dialog-title-align:			center;
	--dialog-title-color:			#000000;
	--dialog-title-shadow:			none;
	}








*	{
	box-sizing:				border-box;
	}

body	{
	left:				0px;
	top:				0px;
	width:				100%;
	height:				100%;
	background:			var(--body-background);
	color:				var(--text-color);
	transition:			all var(--transition-duration);
	margin:				0px;
	margin-bottom:			10%;
	overflow:			hidden;
	position:			fixed;
	padding-top:			max(var(--default-dialog-inset), var(--safe-area-inset-top));
	padding-left:			max(var(--default-dialog-inset), var(--safe-area-inset-left));
	padding-right:			max(var(--default-dialog-inset), var(--safe-area-inset-right));
	padding-bottom:			max(var(--default-dialog-inset), var(--safe-area-inset-bottom));

	}


div.box-shadow
	{
	box-shadow:			var(--box-shadow);
	}



div.app-dialog-modal
	{
	position:		absolute;
	display:                flex;
	align-items:            center;
	justify-content:        center;
	top:			0px;
	left:			0px;
	width:			100vw;
	height:			100vh;
	pointer-events:		none;

	&:has(> div.app-modal)
		{
		background:		var(--dialog-modal-color);
		backdrop-filter:	blur(5px);
		pointer-events:		all;
		}

	&:has(.dialog-hidden)
		{
		display:	none;
		}
	}


div.app-dialog
        {
	--dialog-width:			500px;
	--dialog-height:		500px;
	--dialog-button-height:		3em;
	--dialog-toolbar-height:	3em;
	--dialog-internal-margin:	10px;
	--dialog-z-index:		0;
	--field-wrapper-padding:	20px;
	--max-dialog-width:		min(100vw - calc( 2 * var(--default-dialog-inset)), calc(100vw - var(--safe-area-inset-horizontal)));
	--max-dialog-height:		min(100vh - calc( 2 * var(--default-dialog-inset)), calc(100vh - var(--safe-area-inset-vertical)));

        border-radius:		var(--dialog-border-radius);
        background:		var(--dialog-background);
	backdrop-filter:	blur(5px);
        width:          	min( var(--dialog-width), var(--max-dialog-width) );
        height:         	min( var(--dialog-height), var(--max-dialog-height) );
	outline:		none;
	pointer-events:		all;

	display:		grid;
	grid-template-rows:	var(--dialog-title-height) var(--dialog-toolbar-height) auto var(--dialog-button-height);
	grid-template-areas:	"dialogTitle" "dialogToolbar" "dialogContent" "dialogButtons";
	grid-template-columns:	100%;
	overflow-x:		hidden;
	user-select:		none;
	-webkit-user-select:	none;
	-webkit-touch-callout:	none;
	-webkit-tap-highlight-color:	transparent;
	position:		absolute;
	transition:		background var(--transition-duration);
	z-index:		var(--dialog-z-index);

	div.app-dialogtitle
		{
		grid-area:		dialogTitle;
		background:		var(--dialog-title-background);
		color:			var(--dialog-title-color);
		text-shadow:		var(--dialog-title-shadow);
		display:		flex;
		font-weight:		var(--dialog-title-weight);
		justify-content:	var(--dialog-title-align);
		align-items:		center;
		padding:		0px 1em;
		position:		relative;
		overflow:		hidden;
		text-overflow:		ellipsis;
		white-space:		nowrap;
		}

	div.app-dialogtoolbar
		{
		grid-area:	dialogToolbar;
		display:	flex;
		position:	relative;
		overflow:	hidden;
		border:		0px;
		align-items:	center;
		white-space:	nowrap;
		padding:	0px var(--dialog-internal-margin);
		margin:		0px;
		}


	div.app-dialogbuttons
		{
		grid-area:	dialogButtons;
		display:	flex;
		justify-content:space-evenly;
		align-items:	center;
		position:	relative;
		overflow:	hidden;
		border:		0px;
		border-bottom-left-radius:	var(--dialog-border-radius);
		border-bottom-right-radius:	var(--dialog-border-radius);
		}

	&:has(div.app-dialogcontent.app-overflowing)
		{
		div.app-dialogtoolbar { border-bottom: 1px solid rgba(127,127,127,0.5); }
		div.app-dialogbuttons { border-top: 1px solid rgba(127,127,127,0.5); }
		}


	div.app-dialogcontent
		{
		grid-area:			dialogContent;
		display:			block;
		height:				calc( 100% - var(--dialog-internal-margin) * 2 );
		position:			relative;
		overflow:			hidden auto;
		margin:				var(--dialog-internal-margin);
		border-radius:			calc( var(--dialog-border-radius) - var(--dialog-internal-margin) );

		&.no-v-padding
			{
			height:			calc( 100% - var(--dialog-internal-margin) * 0 );
			margin:			0px var(--dialog-internal-margin);
			}

		&.app-overflowing
			{
			height:			calc( 100% - var(--dialog-internal-margin) * 0 );
			margin:			0px var(--dialog-internal-margin);
			}

		div.app-fieldswrapper,
		div.fields-wrapper
			{
			}

		div.app-formmaint-group
			{
			padding:		var(--field-wrapper-padding);
			margin:			0px;
			border-radius:		var(--dialog-border-radius);
			background:		var(--dialog-panel-background);
			box-shadow:		0px 0px 10px rgba(0,0,0,0.2);
			&:focus-within,
			&:hover { box-shadow:	0px 0px 10px rgba(0,0,127,0.5);}
			transition:		box-shadow 0.5s;
			&:before
				{
				content:	attr(heading);
				color:		var(--text-color);
				position:	relative;
				top:		calc(var(--field-wrapper-padding) * -0.5);
				font-weight:	bold;
				}

			div.app-formmaint-groupinner
				{


				&.column-flex
					{
					display:		flex;
					flex-direction:		column;
					gap:			1px;
					}
				}
			}

		&.app-formmaint-wrapper
			{
			display:		flex;
			flex-direction:		column;
			gap:			1em;
			padding:		calc( var(--field-wrapper-padding) / 2);
			}
		}

	div.app-dialogmessage
        	{
        	position:               absolute;
        	bottom:                 1em;
        	height:                 2em;
        	width:                  100%;
        	display:                flex;
        	align-items:            center;
        	justify-content:        center;
        	letter-spacing:         1px;
        	font-size:              1em;
		pointer-events:		none;
		white-space:		nowrap;
		overflow:		hidden;
		text-overflow:		ellipsis;
        	}

	div.app-dialogmessage:not(:empty)
        	{
        	background:             var(--dialog-message-background);
        	color:                  var(--dialog-message-color);
        	text-shadow:            var(--dialog-message-text-shadow);
        	}
	div.app-dialogmessage[color="yellow"]:not(:empty)
        	{
        	background:             var(--dialog-message-background-yellow);
        	}
	div.app-dialogmessage[color="green"]:not(:empty)
        	{
        	background:             var(--dialog-message-background-green);
        	}
        }



div.app-dialog:not(:has(div.app-dialogtitle))
	{
	grid-template-rows:	0px var(--dialog-toolbar-height) auto var(--dialog-button-height);
	div.app-dialogcontent
		{
		border-top:			1px solid var(--dialog-border-color);
		border-top-left-radius:		var(--dialog-border-radius);
		border-top-right-radius:	var(--dialog-border-radius);
		}
	}


div.app-dialog:not(:has(div.app-dialogbuttons))
	{
	--dialog-button-height:		0px;
	}
div.app-dialog:not(:has(div.app-dialogtoolbar))
	{
	--dialog-toolbar-height:		0px;
	}












div.app-groupheading
	{
	background:	var(--dialog-title-background);
	color:		var(--dialog-title-color);
	text-shadow:	var(--dialog-title-shadow);
	display:	flex;
	font-weight:	800;
	align-items:	center;
	padding:	0.5em 1em;
	overflow:	hidden;
	text-overflow:	ellipsis;
	white-space:	nowrap;
	margin:		1em 0em 1em 0em;
	border-radius:	10px;
	}



div.app-toggle-wrapper
	{
	--size:			1em;
	--speed:		0.4s;
	--slider-color:		var(--input-border-color);
	--slider-border:	var(--input-border-color);
	--slider-background:	var(--input-background);

	border:			1px solid var(--slider-border);
	border-radius:		500px;
	height:			var(--size);
	width:			calc(var(--size) * 2);
	background:		var(--slider-background);
	position:		relative;
	display:		inline-flex;
	vertical-align:		middle;
	cursor:			pointer;
	transition:		all var(--speed);

	div.app-toggle-slider
		{
		position:		absolute;
		top:			1px;
		left:			1px;
		height:			calc( var(--size) - 4px);
		width:			calc( var(--size) - 4px);
		border-radius:		500px;
		background:		var(--slider-color);
		transition:		all var(--speed);
		}
	&:has(input:checked) { div.app-toggle-slider { left: calc( var(--size) - 0px); } }

	input[type="checkbox"]
		{
		position:		absolute;
		height:			100%;
		width:			100%;
		margin:			0px;
		padding:		0px;
		appearance:		none;
		opacity:		0;
		cursor:			pointer;
		}

	&.highlight-hover
		{
		&:has(input:not(:disabled)):hover 
			{
			--slider-border:	var(--button-border-color-hover);
			}
		&:has(input:checked:not(:disabled)):hover 
			{
		/*	--slider-color:		var(--toggle-on-border-color);	*/
			}
		}
	&.highlight-focus
		{
		&:has(input:focus:not(:disabled))
			{
			--slider-border:	var(--button-border-color-hover);
			}
		}
	&.highlight-checked
		{
		&:has(input:checked:not(:disabled))
			{
			--slider-border:	var(--toggle-on-border-color);
			}
		}

	&:has(input:checked:not(:disabled))
		{
		--slider-color:		var(--toggle-on-border-color);
		}

	&:has(input:not(:checked):disabled)
		{
		--slider-background:	var(--input-background-disabled);
		--slider-color:		var(--input-border-color);
		}
	&:has(input:checked:disabled)
		{
		--slider-background:	var(--input-background-disabled);
		--slider-color:		#999999;
		}
	}
	




















button.app-button
	{
	font-size:	1em;
	margin:		0px 1px;
	padding:	5px 15px;
	border-radius:	var(--button-border-radius);
	border:		1px solid var(--button-border-color);
	background:	var(--button-background);
	cursor:		pointer;
	color:		var(--button-text-color);
	white-space:	nowrap;

	&.left { text-align:left; }
	i
		{
		}

	span.app-buttontext
		{
		padding-left:	1em;
		font-size:	1em;
		}

	&:hover:not(:disabled)
		{
		border:		1px solid var(--button-border-color-hover);
		background:	var(--button-background-hover);
		color:		var(--button-text-color-hover);
		}
	&[hover="red"]:hover:not(:disabled)
		{
		border:		1px solid #880000;
		background:	linear-gradient(180deg, #ffa3a3 0%, #d94444 100%);
		color: 		#880000;
    		text-shadow:	1px 1px 0px #f88;
		}
	&:disabled
		{
		
		cursor:		default;
		border-color:	var(--button-border-color-disabled);
		opacity:	0.5;
		}
	}
	




























div.app-field div.app-inputwrapper
	{
	border:			1px solid;
	border-color:		var(--input-border-color);
	outline:		0;
	border-radius:		var(--input-border-radius);
	overflow:		hidden;
	background:		var(--input-background);
	display:		inline-flex;
	align-items:		center;
	margin:			1px 0px;
	transition:		background, border-color var(--transition-duration);
	height:			max-content;
	position:		relative;
	cursor:			default;
	text-shadow:		var(--input-text-shadow);
	font-size:		var(--input-font-size);

	&[data-type="country"] 
		{
		container-type:		inline-size;
		}


	&:has(input[type="search"])
		{
		border-radius:	100px;
		&:before	
			{
			content:	'\1F50D';
			position:	absolute;
			left:		5px;
			transition:	filter,opacity 0.5s;
			filter:		grayscale(1);
			opacity:	0.25;
			}
		input	{
			padding-left:	1.5em !important;
			}

		}
	&:has(input[type="search"]:focus)
		{
		&:before	
			{
			filter:		grayscale(0);
			opacity:	1;
			}
		}


	&:has(:disabled)
		{
		--input-background:	var(--input-background-disabled);

		input:disabled, select:disabled, textarea:disabled
			{
			--input-text-color:	var(--input-text-color-disabled);
			--input-text-shadow:	var(--input-text-shadow-disabled);
			}

		i	{
			opacity:		0.2;
			pointer-events:		none;
			}
		}
	


	& > input:not([type="checkbox"]),
	& > select,
	& > textarea
		{
		font-size:		1.0em;
		border:			0px;
		background:		transparent;/* !important;*/
		outline:		0;
		padding:		0.2em 0.5em;
		margin:			0px;
		flex:			1 1 auto;
		color:			var(--input-text-color);
		transition:		color var(--transition-duration);
		cursor:			default;
		appearance:		none;
		min-height:		var(--input-font-size);
		}


	input::placeholder,
	textarea::placeholder 
		{
		font-size:		var(--input-placeholder-size);
		color:			var(--input-placeholder-color);
		}
	input,select,textarea
		{
		height:			100%;
		}
	textarea 
		{
		resize:			none;
		}


	&:has(>i) > input[type="text"]
		{
		padding-right:		40px;
		}



	& > i	{
		height:			100%;
		width:			32px;
		position:		absolute;
		right:			1px;
		display:		flex;
		align-items:		center;
		justify-content:	center;
		cursor:			pointer;
		}

	&[data-type="country"]
		{
		& > i
			{
			pointer-events:	none;
			}
		}
	&[data-type="select"]
		{
		& > i
			{
			pointer-events:	none;
			}
		}

	&[data-type="password"]
		{
		& > i
			{
			font-size:	0.8em;
			}
		& > input[type="password"]
			{
			&::-ms-reveal { display:none; }
			}
		}



	&[data-type="date"]
		{
		& > input[type="date"]::-webkit-calendar-picker-indicator
			{
			display:		none;
			-webkit-appearance:	none;
			}
		}




	&.invisible
		{
		background:		none;
		border:			0px;
		}


	&.width-narrow:has(label.app-checkboxclick)
		{
		flex:	0 0 auto;
		label.app-checkboxclick:after { width:100%; padding:0px; }
		}






	label.app-checkboxclick
		{
		--tick-color:		var(--input-text-color);
		--tick-shadow:		1px 1px 1px #888888;

		position:		relative;
		left:			0px;
		top:			0px;
		width:			100%;
		height:			100%;

		input { opacity: 0; height:2em; width:3em; margin:3px; }
		&:has(input:checked:focus:not(:disabled))
			{
			--tick-color:	var(--input-border-color-focus);
			}
		&:has(input:checked:disabled)
			{
			--tick-color:	var(--input-text-color-disabled);
			--tick-shadow:	var(--input-text-shadow-disabled);
			}

		&:has(input:checked):after
			{
			--fa:		"\f00c";
			content:	var(--fa);
			font-family:	var(--fa-family);
			font-size:	2.0em;
			font-weight:	900;
			color:		var(--tick-color);
			text-shadow:	var(--tick-shadow);
			position:	absolute;
			top:		0px;
			left:		0px;
			height:		100%;
			width:		auto%;
			padding:	0px 0.5em;
			display:	flex;
			justify-content:	center;
			align-items:	center;
			}
		}







		select	
			{
			&, &::picker(select) { appearance: base-select; }

			optgroup	
				{
				margin:		0.5em 0em 0.5em 1.5em;
				padding:	0.5em 0em;
				border-top:	1px dashed #888888;
				border-bottom:	1px dashed #888888;
				color:		var(--select-picker-group-text-color);
				font-weight:	normal;
				}
			option	{
				appearance:	base-select;
				margin:		3px 2px;
				border-radius:	calc( var(--dialog-border-radius) - 2px );
				cursor:		pointer;
				}
			option.not-an-option
				{
				font-style:	italic;
				font-weight:	normal;
				&::checkmark { content:''; }
				}
			option.not-an-option:not(:checked):not(:hover)
				{
				color:		var(--select-picker-empty-text-color);
				}


			option:checked
				{
				font-weight:	bold;
				background:	var(--select-picker-selected-background);
				color:		var(--select-picker-selected-text-color);
				}
			option:not(:checked)
				{
				color:		var(--select-picker-text-color);
				}
			option:hover
				{
				background:	var(--dialog-title-background);
				color:		var(--dialog-title-color);
				text-shadow:	var(--dialog-title-shadow);
				}
			option::checkmark
				{

				}
			&::picker(select)
				{
				box-shadow:		0px 0px 10px rgba(0,0,0,0.75);
				border-radius:		calc( var(--dialog-border-radius) );
				padding:		2px;
				xax-height:		200px;
				margin-top:		5px;
				background:		var(--select-picker-background);
				backdrop-filter:	blur(5px);
				position-anchor:	auto; 
				top:			anchor(bottom);
				left:			anchor(left);
				
				scrollbar-width:	0px;
				scrollbar-color:	#88888880 transparent;
				border:			0px;
				}
			&::picker-icon
				{
				display:		none;
				width:			32px;
				transition:		transform 0.3s;
				text-align:		center;
				}
			&:open::picker-icon
				{
				transform:		rotate(180deg);
				}

			}

		
/* QUIRKS */
	input::-webkit-date-and-time-value { text-align:		left; }


	}
div.app-field div.app-inputwrapper:focus-within { border-color: var(--input-border-color-focus, --input-border-color); }
div.app-field.vertical
	{
	display:		flex;
	flex-direction:		column;

	div.app-inputwrapper
		{
		width:			100%;
		}
	
	input,select,textarea
		{
		width:			100%;
		}
	}


@media (orientation: portrait)
	{
	div.app-field
		{
		display:		flex;
		flex-direction:		column;
		align-items:		flex-start;
		height:			inherit;

		div.app-inputwrapper
			{
			width:			100%;
			}
		
		input,select,textarea
			{
			width:			100%;
			}
		}
	}


@media (orientation: landscape)
	{
	div.app-field:not(.vertical)
		{
		display:		flex;
		align-items:		center;
		height:			inherit;
		> label	{
			display:	inline-block;
			width:		var(--label-width, 300px)
			}
		div.app-inputwrapper
			{
			flex:		1;
			}
		}
	}






div.app-country-selector
	{
	height:			100%;
	border:			0px;
        outline:		0;
        padding:		0.2em 2px 0.2em 0.5em;
        flex:			1 1 auto;
        color:			var(--input-text-color);
        transition:		color var(--transition-duration);
        font-size:		1.0em;
	display:		grid;
	grid-template-columns:	50px auto calc(1.0em + 32px);
	grid-template-areas:	"country-flag country-name country-code";
	cursor:			pointer;
	border-radius:		8px;

@container (max-width: 300px)
{
	grid-template-columns:	50px auto 0em 1.5em;
}

	div.app-country-flag 
		{
		grid-area:		country-flag;
		height:			28px;
		div.country-flag 
			{ 
			position:	absolute;
			transform:	scale(40%) translateY(-0.6em);
			transform-origin:	top left;
			}
		}

	&.selected
		{
		outline:		1px dashed #888888;
		background:		#ccddff;
		}
	input.app-country-name
		{
		grid-area:		country-name;
		background:		transparent;
		color:			var(--input-text-color);
		border:			0px;
		outline:		0px;
		font-size:		1em;
		padding:		0px;
		margin:			0px;
		cursor:			pointer; 
@container (max-width: 300px)
{
		font-size:		10pt;
}
		}
	div.app-country-code { grid-area: "country-code"; font-size:0.8em; color:#888888; display:flex; align-items:center; overflow:hidden;}
	div.app-country-open-selector 
		{
		grid-area:	country-opener;
		text-align:	center;
		i.fa-chevron-up-down
			{
			height:		100%;
			display:	inline-block;
			font-size:	0.7em;
			}
		}
	&:has(input:disabled)
		{
		pointer-events:		none;
		* { opacity:		0.5; }
		}
	}


div#app-country-selector
	{
	position:		absolute;
	top:			10px;
	left:			200px;
	width:			500px;
	background:		var(--dialog-background);
	border:			0px;
	border-radius:		17px;
	font-size:		1.2em;
	height:			50%;
	color:			var(--input-text-color);
	display:		none;
	flex-direction:		column;
	z-index:		20000;
	overflow:		hidden;
	transform:		translateY(-50%);

	&.show
		{
		display:	flex;
		}

	input	{
		cursor:			default;
		background:		var(--input-background);
		margin:			3px;
		border-radius:		1em;
		padding:		0px 15px;
		border:			1px solid var(--input-border-color-focus);
		font-size:		1.5em;
		font-size:		24px;
		outline:		0px;
		&::placeholder
			{
			color:		#cccccc;
			font-size:	0.7em;
			}
		}

	div.app-country-selector
		{
		grid-template-columns:	50px auto 1.5em 0px;
		}

	div.app-country-options
		{
		overflow-y:		scroll;
		overflow-x:		hidden;
		padding:		3px;
		height:			100%;
		position:		relative;
		margin:			5px;
                scroll-behavior:        smooth;
                scrollbar-color:        transparent transparent;
                scrollbar-width:        auto;
                }
        div.app-country-options:hover
                {
                scrollbar-width:                auto;
                scrollbar-color:                white transparent;
		}

	&.hover_highlight div.app-country-selector:hover
		{
		background:		#ccddff;
		}

	div.app-country-name
		{
		white-space:		nowrap;
		overflow:		hidden;
		text-overflow:		ellipsis;
		display:		flex;
		align-items:		center;
		}
	div.app-country-code
		{
		justify-content:	center;
		}
	div.app-country-selector
		{
		height:			38px;
		overflow:		hidden;
		transition:		height 0.2s;
		}
	div.app-country-selector.hide
		{
		display:		none;
		}



	}


div#app-tooltip
	{
	border:				1px solid #777777;
	background-color:		#eeeeff;
	background-image:		linear-gradient(bottom, rgb(228,228,240) 0%, rgb(255,255,255) 77%);
	background-image:		-o-linear-gradient(bottom, rgb(228,228,240) 0%, rgb(255,255,255) 77%);
	background-image:		-moz-linear-gradient(bottom, rgb(228,228,240) 0%, rgb(255,255,255) 77%);
	background-image:		-webkit-linear-gradient(bottom, rgb(228,228,240) 0%, rgb(255,255,255) 77%);
	background-image:		-ms-linear-gradient(bottom, rgb(228,228,240) 0%, rgb(255,255,255) 77%);
	background-image:		-webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(228,228,240)), color-stop(0.77, rgb(255,255,255)));
	padding:			2px 5px;
	opacity:			0.95;
	font-size:			8pt;
	margin:				0px;
	color:				#585858;
	z-index:			200000;
	box-shadow:			2px 2px 2px rgba(0,0,0,0.5);
	border-radius:			3px;
	position:			absolute;
	left:				50%;
	top:				50%;
	max-width:			600px;
	min-height:			10px;
	pointer-events:			none;
	white-space:			pre-wrap;
	/*transition:			0.1s left, 0.1s top;*/

	* { font-size:8pt; }
	}




div.app-pageslidercontainer
	{
	width:			100%;
	height:			100%;
	position:		relative;
	white-space:		nowrap;
	overflow-x:		hidden;


	div.app-pageslider
		{
		position:	absolute;
		left:		0px;
		width:		100%;
		height:		100%;
		transition:	left 0.5s;


		div.app-pageslide
			{
			width:			100%;
			height:			100%;
			display:		inline-block;
			overflow:		hidden;
			scroll-snap-align:	start;
			vertical-align:		top;
			}
		}
	}

div.app-pageslidercontainer.slideable
	{
	overflow-x:		auto;
	scroll-snap-type:	x mandatory;
	scroll-behavior:	smooth;
	overscroll-behavior-x:	contain;
	}


div.app-pageslidercontainer[page="0"] div.app-pageslider { left: calc(100% * -0); }
div.app-pageslidercontainer[page="1"] div.app-pageslider { left: calc(100% * -1); }
div.app-pageslidercontainer[page="2"] div.app-pageslider { left: calc(100% * -2); }
div.app-pageslidercontainer[page="3"] div.app-pageslider { left: calc(100% * -3); }
div.app-pageslidercontainer[page="4"] div.app-pageslider { left: calc(100% * -4); }
div.app-pageslidercontainer[page="5"] div.app-pageslider { left: calc(100% * -5); }
div.app-pageslidercontainer[page="6"] div.app-pageslider { left: calc(100% * -6); }
div.app-pageslidercontainer[page="7"] div.app-pageslider { left: calc(100% * -7); }
div.app-pageslidercontainer[page="8"] div.app-pageslider { left: calc(100% * -8); }
div.app-pageslidercontainer[page="9"] div.app-pageslider { left: calc(100% * -9); }









div.app-popover
	{
	--popover-hover-background:	#5e7fb5;

	width:			max-content;
	min-width:		150px;
/*	border:			1px solid #ccc;*/
	border-radius:		3px;
	padding:		1px;
	background:		var(--popover-background);
	box-shadow:		5px 5px 15px rgba(0,0,0,0.8);
	position:		absolute;
	display:		none;
	font-size:		0.9em;
	cursor:			pointer;
	max-height:		calc(100% - 15);
	user-select:		none;
	text-shadow:		none;
	transition:		transform 1s;
	user-select:		none;
	pointer-events:		all;

	div.app-popoveritem
		{
		padding:	5px 10px;
		padding-right:	20px;
		border-radius:	3px;
		color:		var(--popover-item-color);
		position:	relative;

		> div	{
			display:	inline-block;
			}
		div.app-popoveritemicon
			{
			width:		30px;
			}

		&.has_submenu:after
			{
			position:		absolute;
			right:			5px;
			top:			50%;
			transform:		translateY(-50%);
			content:		var(--fa);
			--fa:			"\f0da";
			-webkit-font-smoothing: antialiased;
			display:                var(--fa-display, inline-block);
			font-style:             normal;
			font-variant:           normal;
			line-height:            1;
			text-rendering:         auto;
			font-family:            var(--fa-family);
			font-weight:            900;
			content:                var(--fa);
			font-size:              0.8em;
			}

		div.app-popover-submenu
			{
			display:		none;
			left:			calc(100% - 2px);
			top:			0px;
			z-index:		1;
			}

		&.has_submenu.active_submenu > div.app-popover-submenu
			{
			display:		block;
			}
		
		}
	div.app-popoverseparator
		{
		margin:		10px;
		border-top:	1px solid var(--popover-separator-top-color);
		border-bottom:	1px solid var(--popover-separator-bottom-color);
		}
	div.app-popoverheader
		{
		background:	var(--dialog-title-background);
		color:		var(--dialog-title-color);
		text-shadow:	var(--dialog-title-shadow);
		font-weight:	bold;
		text-align:	center;
		font-size:	1em;
		padding:	5px;
		border-bottom:	1px solid var(--popover-header-border-color);
		margin:		5px;
		border-radius:	5px;
		}

	div.app-popoveritem.active_submenu,
	div.app-popoveritem.is_active
		{
		background:	var(--dialog-title-background);
		color:		var(--dialog-title-color);
		text-shadow:	var(--dialog-title-shadow);
		}
	div.app-popoveritem.is_disabled
		{
		color:		var(--popover-item-disabled-color);
		text-shadow:	var(--popover-item-disabled-text-shadow);
		}
	div.app-popoveritem.is_red:not(.is_disabled) { color: #880000; --popover-hover-background: #880000; }

	
	div.app-popoveritem:hover:not(.active_submenu):not(.is_active):not(.is_disabled)
		{
		background:	var(--popover-hover-background);
		color:		var(--popover-hover-color);
		text-shadow:	var(--dialog-title-shadow);
		}
	}
div.app-popover:popover-open
	{

	}
div.app-popover::backdrop
	{
	background: rgba(0,0,0,0.5);
	}


div#app-popoverbody
	{
	position:		absolute;
	display:		none;
	left:			0px;
	top:			0px;
	width:			100%;
	height:			100%;
	pointer-events:		none;
	inset:			0px;
	z-index:		2000;
	pointer-events:		none;
	}
/*div#app-popoverbody:has(> [style*="display: block"])*/
div#app-popoverbody:has(div.app-popover.is_open)
	{
	display:		block;
	/*pointer-events:		all;*/
	pointer-events:		none;
	}




div.guide-lines
        {
        position:               absolute;
        border:                 5px solid;
        box-sizing:             border-box;
        z-index:100;

        &.vf    {
                top:                    0px;
                left:                   80px;
                width:                  30px;
                height:                 100%;
                border-color:           blue;
                }
        &.vs    {
                top:                    var(--safe-area-inset-top); /*0px;*/
                left:                   120px;
                width:                  30px;
                height:                 calc( 100% - var(--safe-area-inset-top));
                border-color:           magenta;
                }
        &.h     {
                bottom:                 90px;
                left:                   0px;
                height:                 30px;
                width:                  100dvw;
                border-color:           red;
                }
        }




i.fa-spinner
	{
	animation:		spin 2s linear infinite;
	}




@keyframes spin
	{
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
	}




div.align_right { text-align:right; }
div.align_center { text-align:center; }



i.fa-chevron-up-down
	{
	position:		relative;
	display:		inline-block;
	font-size:		0.7em;
	--fa-up:		"\f077";
	--fa-down:		"\f078";
	--left-offset:		0.25em;
	&:before { position:absolute; content: var(--fa-up);	top:0.3em;	}
	&:after {  position:absolute; content: var(--fa-down);	bottom:0.3em;	}
	}