/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* default component structure

*/

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* variables */
:root
{
	/* layout */
	--component-label-pos:							row;		/* label position (row=left, column=top, column-reverse=bottom) */
	--component-label-area-ratio:					1;			/* label area ratio (none: use width, not flexbox) */
	--component-inner-area-ratio:					4;			/* inner component area ratio */
	--component-label-area-size:					auto;		/* label area size (label width, auto: use flexbox) */
	--component-label-area-base-width: 				0;			/* label area flex base width (set to 100% for top labels, 0 for left labels) */
	--component-label-align: 						center;		/* label vertical alignment if label left, horizontal if label top (align-self) */
	--component-item-align: 						center;		/* component vertical alignment if label left, horizontal if label top (align-self) */
	--component-margin:								0 0 10px 0;	/* component margin */
	--component-gap: 								30px;		/* multi column gap */
	--component-inline-gap:							10px;		/* inline gap */
	--component-row-margin:							20px;		/* bottom margin for dialog component rows */
	--component-min-col-width: 						500px;		/* min. column width before column break for small screens */

	/* mobile layout */
	--component-mobile-label-pos:					column;		/* label position (row=left, column=top) */
	--component-mobile-label-area-ratio:			none;		/* label area ratio (none: use width, not flexbox) */
	--component-mobile-inner-area-ratio:			none;		/* inner component area ratio */
	--component-mobile-label-area-size:				auto;		/* label area size (label width, auto: use flexbox) */
	--component-mobile-label-area-base-width:		0;			/* label area flex base width (set to 100% for top labels, 0 for left labels) */
	--component-mobile-label-align: 				flex-start;	/* label vertical alignment (align-self) */
	--component-mobile-item-align: 					flex-start;	/* component vertical alignment (align-self) */
	--component-mobile-margin:						0 0 10px 0;	/* component margin */
	--component-mobile-gap: 						30px;		/* multi column gap */
	--component-mobile-inline-gap:					10px;		/* inline gap */
	--component-mobile-row-margin:					20px;		/* bottom margin for dialog component rows */

	/* basic styles */
	--component-font:								"Open Sans";/* default component font family */
	--component-font-size:							17px;		/* default component font size */
	--component-font-weight:						normal;		/* default component font weight */
	--component-font-style:							normal;		/* default component font style */
	--component-line-height: 						1;			/* default component line height */
	--component-text-color: 						black;		/* default component text color */
	--component-background-color:					white;		/* default component background color */
	--component-shadow:								none;		/* default component box shadow */
	--component-border-radius:						4px;		/* default component border radius */
	--component-border-size:						1px;		/* default component border size */
	--component-border-color:						#b3b3b3;	/* default component border color */
	--component-outline-size:						0;			/* default component outline size */
	--component-outline-color:						#b3b3b3;	/* default component outline color */
	--component-outline-offset:						0;			/* default component outline offset */
	--component-placeholder-font:					var(--component-font);/* default component placeholder font */
	--component-placeholder-font-size:				var(--component-font-size);/* default component placeholder font size */
	--component-placeholder-font-weight:			var(--component-font-weight);/* default component placeholder font weight */
	--component-placeholder-color:					#888888;	/* default component placeholder color */
	--component-padding:							10px 20px 10px 20px;/* default component padding */
	--error-msg-color: 								#fd0100;	/* error message color */

	--component-important-font-weight:				var(--component-font-weight);/* important: default component font weight */
	--component-important-font-style:				var(--component-font-style);/* important: default component font style */
	--component-important-text-color: 				var(--component-text-color);/* important: default component text color */
	--component-important-background-color:			var(--component-background-color);/* important: default component background color */
	--component-important-shadow:					var(--component-shadow);/* important: default component box shadow */
	--component-important-border-size:				2px;		/* important: default component border size */
	--component-important-border-color:				#002D72;	/* important: default component border color */
	--component-important-outline-size:				var(--component-outline-size);/* important: default component outline size */
	--component-important-outline-color:			var(--component-outline-color);/* important: default component outline color */
	--component-important-outline-offset:			var(--component-outline-offset);/* important: default component outline offset */
	--component-important-placeholder-font:			var(--component-font);/* important: default component placeholder font */
	--component-important-placeholder-font-size:	var(--component-font-size);/* important: default component placeholder font size */
	--component-important-placeholder-color:		var(--component-placeholder-color);/* important: default component placeholder color */

	--component-required-font-weight:				var(--component-font-weight);/* required: default component font weight */
	--component-required-font-style:				var(--component-font-style);/* required: default component font style */
	--component-required-text-color: 				var(--component-text-color);/* required: default component text color */
	--component-required-background-color:			var(--component-background-color);/* required: default component background color */
	--component-required-shadow:					var(--component-shadow);/* required: default component box shadow */
	--component-required-border-size:				var(--component-border-size);/* required: default component border size */
	--component-required-border-color:				var(--component-border-color);/* required: default component border color */
	--component-required-outline-size:				var(--component-outline-size);/* required: default component outline size */
	--component-required-outline-color:				var(--component-outline-color);/* required: default component outline color */
	--component-required-outline-offset:			var(--component-outline-offset);/* required: default component outline offset */
	--component-required-placeholder-font:			var(--component-font);/* required: default component placeholder font */
	--component-required-placeholder-font-size:		var(--component-font-size);/* required: default component placeholder font size */
	--component-required-placeholder-color:			var(--component-placeholder-color);	/* required: default component placeholder color */

	--component-empty-font-weight:					var(--component-font-weight);/* empty: default component font weight */
	--component-empty-font-style:					var(--component-font-style);/* empty: default component font style */
	--component-empty-text-color: 					var(--component-text-color);/* empty: default component text color */
	--component-empty-background-color:				var(--component-background-color);/* empty: default component background color */
	--component-empty-shadow:						var(--component-shadow);/* empty: default component box shadow */
	--component-empty-border-size:					var(--component-border-size);/* empty: default component border size */
	--component-empty-border-color:					var(--component-border-color);/* empty: default component border color */
	--component-empty-outline-size:					var(--component-outline-size);/* empty: default component outline size */
	--component-empty-outline-color:				var(--component-outline-color);/* empty: default component outline color */
	--component-empty-outline-offset:				var(--component-outline-offset);/* empty: default component outline offset */
	--component-empty-placeholder-font:				var(--component-font);/* empty: default component placeholder font */
	--component-empty-placeholder-font-size:		var(--component-font-size);/* empty: default component placeholder font size */
	--component-empty-placeholder-color:			var(--component-placeholder-color);/* empty: default component placeholder color */

	--component-invalid-font-weight:				normal;		/* invalid: default component font weight */
	--component-invalid-font-style:					normal;		/* invalid: default component font style */
	--component-invalid-text-color: 				black;		/* invalid: default component text color */
	--component-invalid-background-color:			white;		/* invalid: default component background color */
	--component-invalid-shadow:						none;		/* invalid: default component box shadow */
	--component-invalid-border-size:				1px;		/* invalid: default component border size */
	--component-invalid-border-color:				#fd0100;	/* invalid: default component border color */
	--component-invalid-outline-size:				0;			/* invalid: default component outline size */
	--component-invalid-outline-color:				#c4c4c4;	/* invalid: default component outline color */
	--component-invalid-outline-offset:				0;			/* invalid: default component outline offset */
	--component-invalid-placeholder-font:			var(--component-font);/* invalid: default component placeholder font */
	--component-invalid-placeholder-font-size:		var(--component-font-size);/* invalid: default component placeholder font size */
	--component-invalid-placeholder-color:			var(--component-placeholder-color);	/* invalid: default component placeholder color */

	--component-focus-font-weight:					normal;		/* focus: default component font weight */
	--component-focus-font-style:					normal;		/* focus: default component font style */
	--component-focus-text-color: 					black;		/* focus: default component text color */
	--component-focus-background-color:				white;		/* focus: default component background color */
	--component-focus-shadow:						inset 0 0 1px 2px #55c3f1;/* focus: default component box shadow */
	--component-focus-border-size:					1px;		/* focus: default component border size */
	--component-focus-border-color:					#c4c4c4;	/* focus: default component border color */
	--component-focus-outline-size:					0;			/* focus: default component outline size */
	--component-focus-outline-color:				#c4c4c4;	/* focus: default component outline color */
	--component-focus-outline-offset:				0;			/* focus: default component outline offset */
	--component-focus-placeholder-font:				var(--component-font);/* focus: default component placeholder font */
	--component-focus-placeholder-font-size:		var(--component-font-size);/* focus: default component placeholder font size */
	--component-focus-placeholder-color:			var(--component-placeholder-color);/* focus: default component placeholder color */

	--component-disabled-font-weight:				normal;		/* disabled: default component font weight */
	--component-disabled-font-style:				normal;		/* disabled: default component font style */
	--component-disabled-text-color: 				#111;		/* disabled: default component text color */
	--component-disabled-background-color:			#f8f8f8;	/* disabled: default component background color */
	--component-disabled-shadow:					none;		/* disabled: default component box shadow */
	--component-disabled-border-size:				1px;		/* disabled: default component border size */
	--component-disabled-border-color:				#d0d0d0;	/* disabled: default component border color */
	--component-disabled-outline-size:				0;			/* disabled: default component outline size */
	--component-disabled-outline-color:				#c4c4c4;	/* disabled: default component outline color */
	--component-disabled-outline-offset:			0;			/* disabled: default component outline offset */
	--component-disabled-placeholder-font:			var(--component-font);/* disabled: default component placeholder font */
	--component-disabled-placeholder-font-size:		var(--component-font-size);/* disabled: default component placeholder font size */
	--component-disabled-placeholder-color:			var(--component-placeholder-color);/* disabled: default component placeholder color */

	/* headlines */
	--component-h1-margin:							10px;		/* headline h1, bottom margin */
	--component-h2-margin:							10px;		/* headline h2, bottom margin */
	--component-h3-margin:							inherit;	/* headline h3, bottom margin */
	--component-h4-margin:							inherit;	/* headline h4, bottom margin */
	--component-h1-color:							inherit;	/* headline h1, color */
	--component-h2-color:							#a2a3a3;	/* headline h2, color */
	--component-h3-color:							inherit;	/* headline h3, color */
	--component-h4-color:							inherit;	/* headline h4, color */
	--component-h1-font-size:						40px;		/* headline h1, font size */
	--component-h2-font-size:						26px;		/* headline h2, font size */
	--component-h3-font-size:						30px;		/* headline h3, font size */
	--component-h4-font-size:						30px;		/* headline h4, font size */
	--component-h1-font-weight:						inherit;	/* headline h1, font weight */
	--component-h2-font-weight:						inherit;	/* headline h2, font weight */
	--component-h3-font-weight:						inherit;	/* headline h3, font weight */
	--component-h4-font-weight:						inherit;	/* headline h4, font weight */
	--component-h1-line-height:						inherit;	/* headline h1, line height */
	--component-h2-line-height:						inherit;	/* headline h2, line height */
	--component-h3-line-height:						inherit;	/* headline h3, line height */
	--component-h4-line-height:						inherit;	/* headline h4, line height */
	--component-h1-style:							normal;		/* h1 font style */
	--component-h2-style:							normal;		/* h2 font style */
	--component-h3-style:							normal;		/* h3 font style */
	--component-h4-style:							normal;		/* h4 font style */
	--component-h1-text-transform:					none;		/* h1 text transform */
	--component-h2-text-transform:					none;		/* h2 text transform */
	--component-h3-text-transform:					none;		/* h3 text transform */
	--component-h4-text-transform:					none;		/* h4 text transform */
	--component-h1-align:							left;		/* h1 alignment */
	--component-h2-align:							left;		/* h2 alignment */
	--component-h3-align:							left;		/* h3 alignment */
	--component-h4-align:							left;		/* h4 alignment */
	--component-h1-margin:							10px;		/* h1 bottom margin */
	--component-h2-margin:							10px;		/* h2 bottom margin */
	--component-h3-margin:							10px;		/* h3 bottom margin */
	--component-h4-margin:							10px;		/* h4 bottom margin */

	/* label/sublabel */
	--component-label-margin:						0 15px 0 0;	/* label margin */
	--component-label-textalign:					right;		/* label horizontal alignment */
	--component-label-font:							inherit;	/* label font family */
	--component-label-font-size:					16px;		/* label font size */
	--component-label-font-weight:					300;		/* label font weight */
	--component-label-font-style:					inherit;	/* label font style */
	--component-label-decoration: 					none;		/* label decoration */
	--component-label-line-height: 					calc(var(--component-label-font-size) * 1.4);/* label line height */
	--component-label-color: 						inherit;	/* label color */
	--component-sublabel-font-size:					14px;		/* sublabel font size */
	--component-sublabel-font-weight:				inherit;	/* sublabel font weight */
	--component-sublabel-font-style:				inherit;	/* sublabel font style */
	--component-sublabel-decoration: 				inherit;	/* sublabel decoration */
	--component-sublabel-line-height: 				inherit;	/* sublabel line height */
	--component-sublabel-color: 					none;		/* sublabel color */
	--component-small-label-font-size:				10px;		/* small label font size */
	--component-small-label-font-weight:			300;		/* small label font weight */
	--component-small-label-font-style:				inherit;	/* small label font style */
	--component-small-label-line-height: 			inherit;	/* small label line height */
	--component-small-label-decoration:				inherit;	/* small label decoration */
	--component-small-label-color: 					inherit;	/* small label color */
	--component-required-marker-font-size: 			12px;		/* required marker font size */
	--component-required-marker-font-weight: 		bold;		/* required marker font weight */
	--component-required-marker-offset: 			-4px;		/* required marker top offset */
	--component-required-marker-margin: 			0 0 0 3px;	/* required marker margin */
	--component-label-top-height: 					1.2em;		/* label top min. height */
	--component-label-top-margin: 					0 0 2px 5px;/* label top margin */

	--component-important-label-font-size:			var(--component-label-font-size);/* important field: label font size */
	--component-important-label-font-weight:		600;		/* important field: label font weight */
	--component-important-label-font-style:			var(--component-label-font-style);/* important field: label font style */
	--component-important-label-decoration: 		var(--component-label-decoration);/* important field: label decoration */
	--component-important-label-color: 				#002D72;	/* important field: label color */
	--component-important-sublabel-font-size:		var(--component-sublabel-font-size);/* important field: sublabel font size */
	--component-important-sublabel-font-weight:		var(--component-sublabel-font-weight);/* important field: sublabel font weight */
	--component-important-sublabel-font-style:		var(--component-sublabel-font-style);/* important field: sublabel font style */
	--component-important-sublabel-decoration: 		var(--component-sublabel-decoration);/* important field: sublabel decoration */
	--component-important-sublabel-color: 			var(--component-sublabel-color);/* important field: sublabel color */

	--component-required-label-font-size:			var(--component-label-font-size);/* required field: label font size */
	--component-required-label-font-weight:			var(--component-label-font-weight);/* required field: label font weight */
	--component-required-label-font-style:			var(--component-label-font-style);/* required field: label font style */
	--component-required-label-decoration: 			var(--component-label-decoration);/* required field: label decoration */
	--component-required-label-color: 				var(--component-label-color);/* required field: label color */
	--component-required-sublabel-font-size:		var(--component-sublabel-font-size);/* required field: sublabel font size */
	--component-required-sublabel-font-weight:		var(--component-sublabel-font-weight);/* required field: sublabel font weight */
	--component-required-sublabel-font-style:		var(--component-sublabel-font-style);/* required field: sublabel font style */
	--component-required-sublabel-decoration: 		var(--component-sublabel-decoration);/* required field: sublabel decoration */
	--component-required-sublabel-color: 			var(--component-sublabel-color);/* required field: sublabel color */

	--component-empty-label-font-size:				var(--component-label-font-size);/* empty field: label font size */
	--component-empty-label-font-weight:			var(--component-label-font-weight);/* empty field: label font weight */
	--component-empty-label-font-style:				var(--component-label-font-style);/* empty field: label font style */
	--component-empty-label-decoration: 			var(--component-label-decoration);/* empty field: label decoration */
	--component-empty-label-color: 					var(--component-label-color);/* empty field: label color */
	--component-empty-sublabel-font-size:			var(--component-sublabel-font-size);/* empty field: sublabel font size */
	--component-empty-sublabel-font-weight:			var(--component-sublabel-font-weight);/* empty field: sublabel font weight */
	--component-empty-sublabel-font-style:			var(--component-sublabel-font-style);/* empty field: sublabel font style */
	--component-empty-sublabel-decoration: 			var(--component-sublabel-decoration);/* empty field: sublabel decoration */
	--component-empty-sublabel-color: 				var(--component-sublabel-color);/* empty field: sublabel color */

	--component-invalid-label-font-size:			var(--component-label-font-size);/* invalid: label font size */
	--component-invalid-label-font-weight:			var(--component-label-font-weight);/* invalid: label font weight */
	--component-invalid-label-font-style:			var(--component-label-font-style);/* invalid: label font style */
	--component-invalid-label-decoration: 			var(--component-label-decoration);/* invalid: label decoration */
	--component-invalid-label-color: 				var(--component-label-color);/* invalid: label color */
	--component-invalid-sublabel-font-size:			var(--component-sublabel-font-size);/* invalid: sublabel font size */
	--component-invalid-sublabel-font-weight:		var(--component-sublabel-font-weight);/* invalid: sublabel font weight */
	--component-invalid-sublabel-font-style:		var(--component-sublabel-font-style);/* invalid: sublabel font style */
	--component-invalid-sublabel-decoration: 		var(--component-sublabel-decoration);/* invalid: sublabel decoration */
	--component-invalid-sublabel-color: 			var(--component-sublabel-color);/* invalid: sublabel color */

	--component-focus-label-font-size:				var(--component-label-font-size);/* focus: label font size */
	--component-focus-label-font-weight:			var(--component-label-font-weight);/* focus: label font weight */
	--component-focus-label-font-style:				var(--component-label-font-style);/* focus: label font style */
	--component-focus-label-decoration: 			var(--component-label-decoration);/* focus: label decoration */
	--component-focus-label-color: 					var(--component-label-color);/* focus: label color */
	--component-focus-sublabel-font-size:			var(--component-sublabel-font-size);/* focus: sublabel font size */
	--component-focus-sublabel-font-weight:			var(--component-sublabel-font-weight);/* focus: sublabel font weight */
	--component-focus-sublabel-font-style:			var(--component-sublabel-font-style);/* focus: sublabel font style */
	--component-focus-sublabel-decoration: 			var(--component-sublabel-decoration);/* focus: sublabel decoration */
	--component-focus-sublabel-color: 				var(--component-sublabel-color);/* focus: sublabel color */

	--component-disabled-label-font-size:			var(--component-label-font-size);/* disabled: label font size */
	--component-disabled-label-font-weight:			var(--component-label-font-weight);/* disabled: label font weight */
	--component-disabled-label-font-style:			var(--component-label-font-style);/* disabled: label font style */
	--component-disabled-label-decoration: 			var(--component-label-decoration);/* disabled: label decoration */
	--component-disabled-label-color: 				var(--component-label-color);/* disabled: label color */
	--component-disabled-sublabel-font-size:		var(--component-sublabel-font-size);/* disabled: sublabel font size */
	--component-disabled-sublabel-font-weight:		var(--component-sublabel-font-weight);/* disabled: sublabel font weight */
	--component-disabled-sublabel-font-style:		var(--component-sublabel-font-style);/* disabled: sublabel font style */
	--component-disabled-sublabel-decoration: 		var(--component-sublabel-decoration);/* disabled: sublabel decoration */
	--component-disabled-sublabel-color: 			var(--component-sublabel-color);/* disabled: sublabel color */

	/* mobile label */
	--component-mobile-label-margin:				var(--component-label-margin);/* mobile label margin */
	--component-mobile-label-textalign:				var(--component-label-textalign);/* mobile label horizontal alignment */
	--component-mobile-label-font:					var(--component-label-font);/* mobile label font family */
	--component-mobile-label-font-size:				var(--component-label-font-size);/* mobile label font size */
	--component-mobile-label-font-weight:			var(--component-label-font-weight);/* mobile label font weight */
	--component-mobile-label-font-style:			var(--component-label-font-style);/* mobile label font style */
	--component-mobile-label-decoration: 			var(--component-label-decoration);/* mobile label decoration */
	--component-mobile-label-line-height: 			var(--component-label-line-height);	/* mobile label line height */
	--component-mobile-label-color: 				var(--component-label-color);/* mobile label color */
	--component-mobile-sublabel-font-size:			var(--component-mobile-sublabel-font-size);/* mobile sublabel font size */
	--component-mobile-sublabel-font-weight:		var(--component-mobile-sublabel-font-weight);/* mobile sublabel font weight */
	--component-mobile-sublabel-font-style:			var(--component-mobile-sublabel-font-style);/* mobile sublabel font style */
	--component-mobile-sublabel-decoration: 		var(--component-mobile-sublabel-decoration);/* mobile sublabel decoration */
	--component-mobile-sublabel-line-height: 		var(--component-mobile-sublabel-line-height);/* mobile sublabel line height */
	--component-mobile-sublabel-color: 				var(--component-mobile-sublabel-color);	/* mobile sublabel color */
	--component-mobile-small-label-font-size:		var(--component-mobile-small-label-font-size);/* mobile small label font size */
	--component-mobile-small-label-font-weight:		var(--component-mobile-small-label-font-weight);/* mobile small label font weight */
	--component-mobile-small-label-font-style:		var(--component-mobile-small-label-font-style);/* mobile small label font style */
	--component-mobile-small-label-decoration:		var(--component-small-label-decoration);/* mobile small label decoration */
	--component-mobile-small-label-line-height: 	var(--component-mobile-small-label-line-height);/* mobile small label line height */
	--component-mobile-small-label-color: 			var(--component-mobile-small-label-color);/* mobile small label color */

	--component-required-mobile-label-font-size:		var(--component-mobile-label-font-size);/* required field: label font size */
	--component-required-mobile-label-font-weight:		var(--component-mobile-label-font-weight);/* required field: label font weight */
	--component-required-mobile-label-font-style:		var(--component-mobile-label-font-style);/* required field: label font style */
	--component-required-mobile-label-decoration: 		var(--component-mobile-label-decoration);/* required field: label decoration */
	--component-required-mobile-label-color: 			var(--component-mobile-label-color);/* required field: label color */
	--component-required-mobile-sublabel-font-size:		var(--component-mobile-sublabel-font-size);/* required field: sublabel font size */
	--component-required-mobile-sublabel-font-weight:	var(--component-mobile-sublabel-font-weight);/* required field: sublabel font weight */
	--component-required-mobile-sublabel-font-style:	var(--component-mobile-sublabel-font-style);/* required field: sublabel font style */
	--component-required-mobile-sublabel-decoration: 	var(--component-mobile-sublabel-decoration);/* required field: sublabel decoration */
	--component-required-mobile-sublabel-color: 		var(--component-mobile-sublabel-color);/* required field: sublabel color */

	--component-important-mobile-label-font-size:		var(--component-mobile-label-font-size);/* important field: label font size */
	--component-important-mobile-label-font-weight:		var(--component-mobile-label-font-weight);/* important field: label font weight */
	--component-important-mobile-label-font-style:		var(--component-mobile-label-font-style);/* important field: label font style */
	--component-important-mobile-label-decoration: 		var(--component-mobile-label-decoration);/* important field: label decoration */
	--component-important-mobile-label-color: 			var(--component-mobile-label-color);/* important field: label color */
	--component-important-mobile-sublabel-font-size:	var(--component-mobile-sublabel-font-size);/* important field: sublabel font size */
	--component-important-mobile-sublabel-font-weight:	var(--component-mobile-sublabel-font-weight);/* important field: sublabel font weight */
	--component-important-mobile-sublabel-font-style:	var(--component-mobile-sublabel-font-style);/* important field: sublabel font style */
	--component-important-mobile-sublabel-decoration: 	var(--component-mobile-sublabel-decoration);/* important field: sublabel decoration */
	--component-important-mobile-sublabel-color: 		var(--component-mobile-sublabel-color);/* important field: sublabel color */

	--component-empty-mobile-label-font-size:			var(--component-mobile-label-font-size);/* empty field: label font size */
	--component-empty-mobile-label-font-weight:			var(--component-mobile-label-font-weight);/* empty field: label font weight */
	--component-empty-mobile-label-font-style:			var(--component-mobile-label-font-style);/* empty field: label font style */
	--component-empty-mobile-label-decoration: 			var(--component-mobile-label-decoration);/* empty field: label decoration */
	--component-empty-mobile-label-color: 				var(--component-mobile-label-color);/* empty field: label color */
	--component-empty-mobile-sublabel-font-size:		var(--component-mobile-sublabel-font-size);/* empty field: sublabel font size */
	--component-empty-mobile-sublabel-font-weight:		var(--component-mobile-sublabel-font-weight);/* empty field: sublabel font weight */
	--component-empty-mobile-sublabel-font-style:		var(--component-mobile-sublabel-font-style);/* empty field: sublabel font style */
	--component-empty-mobile-sublabel-decoration: 		var(--component-mobile-sublabel-decoration);/* empty field: sublabel decoration */
	--component-empty-mobile-sublabel-color: 			var(--component-mobile-sublabel-color);/* empty field: sublabel color */

	--component-invalid-mobile-label-font-size:			var(--component-mobile-label-font-size);/* invalid: label font size */
	--component-invalid-mobile-label-font-weight:		var(--component-mobile-label-font-weight);/* invalid: label font weight */
	--component-invalid-mobile-label-font-style:		var(--component-mobile-label-font-style);/* invalid: label font style */
	--component-invalid-mobile-label-decoration: 		var(--component-mobile-label-decoration);/* invalid: label decoration */
	--component-invalid-mobile-label-color: 			var(--component-mobile-label-color);/* invalid: label color */
	--component-invalid-mobile-sublabel-font-size:		var(--component-mobile-sublabel-font-size);/* invalid: sublabel font size */
	--component-invalid-mobile-sublabel-font-weight:	var(--component-mobile-sublabel-font-weight);/* invalid: sublabel font weight */
	--component-invalid-mobile-sublabel-font-style:		var(--component-mobile-sublabel-font-style);/* invalid: sublabel font style */
	--component-invalid-mobile-sublabel-decoration: 	var(--component-mobile-sublabel-decoration);/* invalid: sublabel decoration */
	--component-invalid-mobile-sublabel-color: 			var(--component-mobile-sublabel-color);/* invalid: sublabel color */

	--component-focus-mobile-label-font-size:			var(--component-mobile-label-font-size);/* focus: label font size */
	--component-focus-mobile-label-font-weight:			var(--component-mobile-label-font-weight);/* focus: label font weight */
	--component-focus-mobile-label-font-style:			var(--component-mobile-label-font-style);/* focus: label font style */
	--component-focus-mobile-label-decoration: 			var(--component-mobile-label-decoration);/* focus: label decoration */
	--component-focus-mobile-label-color: 				var(--component-mobile-label-color);/* focus: label color */
	--component-focus-mobile-sublabel-font-size:		var(--component-mobile-sublabel-font-size);/* focus: sublabel font size */
	--component-focus-mobile-sublabel-font-weight:		var(--component-mobile-sublabel-font-weight);/* focus: sublabel font weight */
	--component-focus-mobile-sublabel-font-style:		var(--component-mobile-sublabel-font-style);/* focus: sublabel font style */
	--component-focus-mobile-sublabel-decoration: 		var(--component-mobile-sublabel-decoration);/* focus: sublabel decoration */
	--component-focus-mobile-sublabel-color: 			var(--component-mobile-sublabel-color);/* focus: sublabel color */

	--component-disabled-mobile-label-font-size:		var(--component-mobile-label-font-size);/* disabled: label font size */
	--component-disabled-mobile-label-font-weight:		var(--component-mobile-label-font-weight);/* disabled: label font weight */
	--component-disabled-mobile-label-font-style:		var(--component-mobile-label-font-style);/* disabled: label font style */
	--component-disabled-mobile-label-decoration: 		var(--component-mobile-label-decoration);/* disabled: label decoration */
	--component-disabled-mobile-label-color: 			var(--component-mobile-label-color);/* disabled: label color */
	--component-disabled-mobile-sublabel-font-size:		var(--component-mobile-sublabel-font-size);/* disabled: sublabel font size */
	--component-disabled-mobile-sublabel-font-weight:	var(--component-mobile-sublabel-font-weight);/* disabled: sublabel font weight */
	--component-disabled-mobile-sublabel-font-style:	var(--component-mobile-sublabel-font-style);/* disabled: sublabel font style */
	--component-disabled-mobile-sublabel-decoration: 	var(--component-mobile-sublabel-decoration);/* disabled: sublabel decoration */
	--component-disabled-mobile-sublabel-color: 		var(--component-mobile-sublabel-color);/* disabled: sublabel color */

	/* input field */
	--component-input-item-align: 					var(--component-item-align);/* input field vertical alignment (align-self) */
	--component-input-margin:						var(--component-margin);/* input field margin */
	--component-input-padding:						var(--component-padding);/* input field padding */
	--component-input-textarea-height:					5em;		/* min. textarea height */
	--component-input-font:							var(--component-font);/* input field font family */
	--component-input-font-size:					var(--component-font-size);/* input field font size */
	--component-input-font-weight:					var(--component-font-weight);/* input field font weight */
	--component-input-font-style:					var(--component-font-style);/* input field font style */
	--component-input-line-height: 					var(--component-line-height);/* input field line height */
	--component-input-textarea-line-height: 		1.3;			/* input field textarea line height */
	--component-input-text-color: 					var(--component-text-color);/* input field text color */
	--component-input-background-color:				var(--component-background-color);/* input field background color */
	--component-input-shadow:						var(--component-shadow);/* input field box shadow */
	--component-input-border-radius:				var(--component-border-radius);/* input field border radius */
	--component-input-border-size:					var(--component-border-size);/* input field border size */
	--component-input-border-color:					var(--component-border-color);/* input field border color */
	--component-input-outline-size:					var(--component-outline-size);/* input field outline size */
	--component-input-outline-color:				var(--component-outline-color);/* input field outline color */
	--component-input-outline-offset:				var(--component-outline-offset);/* input field outline offset */
	--component-input-placeholder-font:				var(--component-placeholder-font);/* input field placeholder font */
	--component-input-placeholder-font-size:		var(--component-placeholder-font-size);/* input field placeholder font size */
	--component-input-placeholder-font-weight:		var(--component-placeholder-font-weight);/* input field placeholder font weight */
	--component-input-placeholder-color:			var(--component-placeholder-color);/* input field placeholder color */

	--component-input-important-font-weight:		var(--component-important-font-weight);/* important: input field font weight */
	--component-input-important-font-style:			var(--component-important-font-style);/* important: input field font style */
	--component-input-important-text-color: 		var(--component-important-text-color);/* important: input field text color */
	--component-input-important-background-color:	var(--component-important-background-color);/* important: input field background color */
	--component-input-important-shadow:				var(--component-important-shadow);/* important: input field box shadow */
	--component-input-important-border-size:		var(--component-important-border-size);/* important: input field border size */
	--component-input-important-border-color:		var(--component-important-border-color);/* important: input field border color */
	--component-input-important-outline-size:		var(--component-important-outline-size);/* important: input field outline size */
	--component-input-important-outline-color:		var(--component-important-outline-color);/* important: input field outline color */
	--component-input-important-outline-offset:		var(--component-important-outline-offset);/* important: input field outline offset */
	--component-input-important-placeholder-font-weight:var(--component-important-placeholder-font-weight);/* input field placeholder font weight */
	--component-input-important-placeholder-font-size:var(--component-important-placeholder-font-size);/* input field placeholder font size */
	--component-input-important-placeholder-color:	var(--component-important-placeholder-color);/* input field placeholder color */

	--component-input-required-font-weight:			var(--component-required-font-weight);/* required: input field font weight */
	--component-input-required-font-style:			var(--component-required-font-style);/* required: input field font style */
	--component-input-required-text-color: 			var(--component-required-text-color);/* required: input field text color */
	--component-input-required-background-color:	var(--component-required-background-color);/* required: input field background color */
	--component-input-required-shadow:				var(--component-required-shadow);/* required: input field box shadow */
	--component-input-required-border-size:			var(--component-required-border-size);/* required: input field border size */
	--component-input-required-border-color:		var(--component-required-border-color);/* required: input field border color */
	--component-input-required-outline-size:		var(--component-required-outline-size);/* required: input field outline size */
	--component-input-required-outline-color:		var(--component-required-outline-color);/* required: input field outline color */
	--component-input-required-outline-offset:		var(--component-required-outline-offset);/* required: input field outline offset */
	--component-input-required-placeholder-font-weight:	var(--component-required-placeholder-font-weight);/* input field placeholder font-weight */
	--component-input-required-placeholder-font-size:var(--component-required-placeholder-font-size);/* input field placeholder font size */
	--component-input-required-placeholder-color:	var(--component-required-placeholder-color);/* input field placeholder color */

	--component-input-empty-font-weight:			var(--component-empty-font-weight);/* empty: input field font weight */
	--component-input-empty-font-style:				var(--component-empty-font-style);/* empty: input field font style */
	--component-input-empty-text-color: 			var(--component-empty-text-color);/* empty: input field text color */
	--component-input-empty-background-color:		var(--component-empty-background-color);/* empty: input field background color */
	--component-input-empty-shadow:					var(--component-empty-shadow);/* empty: input field box shadow */
	--component-input-empty-border-size:			var(--component-empty-border-size);/* empty: input field border size */
	--component-input-empty-border-color:			var(--component-empty-border-color);/* empty: input field border color */
	--component-input-empty-outline-size:			var(--component-empty-outline-size);/* empty: input field outline size */
	--component-input-empty-outline-color:			var(--component-empty-outline-color);/* empty: input field outline color */
	--component-input-empty-outline-offset:			var(--component-empty-outline-offset);/* empty: input field outline offset */
	--component-input-empty-placeholder-font-weight:var(--component-empty-placeholder-font-weight);/* input field placeholder font-weight */
	--component-input-empty-placeholder-font-size:	var(--component-empty-placeholder-font-size);/* input field placeholder font size */
	--component-input-empty-placeholder-color:		var(--component-empty-placeholder-color);/* input field placeholder color */

	--component-input-invalid-font-weight:			var(--component-invalid-font-weight);/* invalid: input field font weight */
	--component-input-invalid-font-style:			var(--component-invalid-font-style);/* invalid: input field font style */
	--component-input-invalid-text-color: 			var(--component-invalid-text-color);/* invalid: input field text color */
	--component-input-invalid-background-color:		var(--component-invalid-background-color);/* invalid: input field background color */
	--component-input-invalid-shadow:				var(--component-invalid-shadow);/* invalid: input field box shadow */
	--component-input-invalid-border-size:			var(--component-invalid-border-size);/* invalid: input field border size */
	--component-input-invalid-border-color:			var(--component-invalid-border-color);/* invalid: input field border color */
	--component-input-invalid-outline-size:			var(--component-invalid-outline-size);/* invalid: input field outline size */
	--component-input-invalid-outline-color:		var(--component-invalid-outline-color);/* invalid: input field outline color */
	--component-input-invalid-outline-offset:		var(--component-invalid-outline-offset);/* invalid: input field outline offset */
	--component-input-invalid-placeholder-font-weight:var(--component-invalid-placeholder-font-weight);/* input field placeholder font-weight */
	--component-input-invalid-placeholder-font-size:var(--component-invalid-placeholder-font-size);/* input field placeholder font size */
	--component-input-invalid-placeholder-color:	var(--component-invalid-placeholder-color);/* input field placeholder color */

	--component-input-focus-font-weight:			var(--component-focus-font-weight);/* focus: input field font weight */
	--component-input-focus-font-style:				var(--component-focus-font-style);/* focus: input field font style */
	--component-input-focus-text-color: 			var(--component-focus-text-color);/* focus: input field text color */
	--component-input-focus-background-color:		var(--component-focus-background-color);/* focus: input field background color */
	--component-input-focus-shadow:					var(--component-focus-shadow);/* focus: input field box shadow */
	--component-input-focus-border-size:			var(--component-focus-border-size);/* focus: input field border size */
	--component-input-focus-border-color:			var(--component-focus-border-color);/* focus: input field border color */
	--component-input-focus-outline-size:			var(--component-focus-outline-size);/* focus: input field outline size */
	--component-input-focus-outline-color:			var(--component-focus-outline-color);/* focus: input field outline color */
	--component-input-focus-outline-offset:			var(--component-focus-outline-offset);/* focus: input field outline offset */
	--component-input-focus-placeholder-font-weight:var(--component-focus-placeholder-font-weight);/* input field placeholder font-weight */
	--component-input-focus-placeholder-font-size:	var(--component-focus-placeholder-font-size);/* input field placeholder font size */
	--component-input-focus-placeholder-color:		var(--component-focus-placeholder-color);/* input field placeholder color */

	--component-input-disabled-font-weight:			var(--component-disabled-font-weight);/* disabled: input field font weight */
	--component-input-disabled-font-style:			var(--component-disabled-font-style);/* disabled: input field font style */
	--component-input-disabled-text-color: 			var(--component-disabled-text-color);/* disabled: input field text color */
	--component-input-disabled-background-color:	var(--component-disabled-background-color);/* disabled: input field background color */
	--component-input-disabled-shadow:				var(--component-disabled-shadow);/* disabled: input field box shadow */
	--component-input-disabled-border-size:			var(--component-disabled-border-size);/* disabled: input field border size */
	--component-input-disabled-border-color:		var(--component-disabled-border-color);/* disabled: input field border color */
	--component-input-disabled-outline-size:		var(--component-disabled-outline-size);/* disabled: input field outline size */
	--component-input-disabled-outline-color:		var(--component-disabled-outline-color);/* disabled: input field outline color */
	--component-input-disabled-outline-offset:		var(--component-disabled-outline-offset);/* disabled: input field outline offset */
	--component-input-disabled-placeholder-font-weight:var(--component-disabled-placeholder-font-weight);/* input field placeholder font-weight */
	--component-input-disabled-placeholder-font-size:var(--component-disabled-placeholder-font-size);/* input field placeholder font size */
	--component-input-disabled-placeholder-color:	var(--component-disabled-placeholder-color);/* input field placeholder color */

	--component-input-addon-padding:				var(--component-padding);/* input field addon padding */
	--component-input-addon-width:					32px;	/* input field addon width */
	--component-input-addon-font:					var(--component-font);/* input field addon font family */
	--component-input-addon-font-size:				var(--component-font-size);/* input field addon font size */
	--component-input-addon-font-weight:			var(--component-font-weight);/* input field addon font weight */
	--component-input-addon-font-style:				var(--component-font-style);/* input field addon font style */
	--component-input-addon-line-height: 			var(--component-line-height);/* input field addon line height */
	--component-input-addon-text-color: 			var(--component-text-color);/* input field addon text color */
	--component-input-addon-background-color:		var(--component-background-color);/* input field addon background color */

	--component-input-addon-important-font-weight:	var(--component-important-font-weight);/* important: input field addon font weight */
	--component-input-addon-important-font-style:	var(--component-important-font-style);/* important: input field addon font style */
	--component-input-addon-important-text-color: 	var(--component-important-text-color);/* important: input field addon text color */
	--component-input-addon-important-background-color: var(--component-important-background-color);/* important: input field addon background color */

	--component-input-addon-required-font-weight:	var(--component-required-font-weight);/* required: input field addon font weight */
	--component-input-addon-required-font-style:	var(--component-required-font-style);/* required: input field addon font style */
	--component-input-addon-required-text-color: 	var(--component-required-text-color);/* required: input field addon text color */
	--component-input-addon-required-background-color: var(--component-required-background-color);/* required: input field addon background color */

	--component-input-addon-empty-font-weight:		var(--component-empty-font-weight);/* empty: input field addon font weight */
	--component-input-addon-empty-font-style:		var(--component-empty-font-style);/* empty: input field addon font style */
	--component-input-addon-empty-text-color: 		var(--component-empty-text-color);/* empty: input field addon text color */
	--component-input-addon-empty-background-color: var(--component-empty-background-color);/* empty: input field addon background color */

	--component-input-addon-invalid-font-weight:	var(--component-invalid-font-weight);/* invalid: input field addon font weight */
	--component-input-addon-invalid-font-style:		var(--component-invalid-font-style);/* invalid: input field addon font style */
	--component-input-addon-invalid-text-color: 	var(--component-invalid-text-color);/* invalid: input field addon text color */
	--component-input-addon-invalid-background-color: var(--component-invalid-background-color);/* invalid: input field addon background color */

	--component-input-addon-focus-font-weight:		var(--component-focus-font-weight);/* focus: input field addon font weight */
	--component-input-addon-focus-font-style:		var(--component-focus-font-style);/* focus: input field addon font style */
	--component-input-addon-focus-text-color: 		var(--component-focus-text-color);/* focus: input field addon text color */
	--component-input-addon-focus-background-color:	var(--component-focus-background-color);/* focus: input field addon background color */

	--component-input-addon-disabled-font-weight:	var(--component-disabled-font-weight);/* disabled: input field addon font weight */
	--component-input-addon-disabled-font-style:	var(--component-disabled-font-style);/* disabled: input field addon font style */
	--component-input-addon-disabled-text-color: 	var(--component-disabled-text-color);/* disabled: input field addon text color */
	--component-input-addon-disabled-background-color: var(--component-disabled-background-color);/* disabled: input field addon background color */

	/* segmented field */
	--component-segmented-item-align: 				var(--component-item-align);/* segmented field vertical alignment (align-self) */
	--component-segmented-margin:					var(--component-margin);/* segmented field margin */
	--component-segmented-padding:					var(--component-padding);/* segmented field padding */
	--component-segmented-container-align: 			baseline;		/* item alignment in container */

	--component-segmented-font:						var(--component-font);/* segmented field font family */
	--component-segmented-font-size:				var(--component-font-size);/* segmented field font size */
	--component-segmented-font-weight:				var(--component-font-weight);/* segmented field font weight */
	--component-segmented-font-style:				var(--component-font-style);/* segmented field font style */
	--component-segmented-line-height: 				var(--component-line-height);/* segmented field line height */
	--component-segmented-text-color: 				var(--component-text-color);/* segmented field text color */
	--component-segmented-background-color:			var(--component-background-color);/* segmented field background color */
	--component-segmented-shadow:					var(--component-shadow);/* segmented field box shadow */
	--component-segmented-border-radius:			var(--component-border-radius);/* segmented field border radius */
	--component-segmented-border-size:				var(--component-border-size);/* segmented field border size */
	--component-segmented-border-color:				var(--component-border-color);/* segmented field border color */
	--component-segmented-outline-size:				var(--component-outline-size);/* segmented field outline size */
	--component-segmented-outline-color:			var(--component-outline-color);/* segmented field outline color */
	--component-segmented-outline-offset:			var(--component-outline-offset);/* segmented field outline offset */
	--component-segmented-placeholder-font:			var(--component-important-placeholder-font);/* segmented field placeholder font */
	--component-segmented-placeholder-font-weight:	var(--component-important-placeholder-font-weight);/* segmented field placeholder font-weight */
	--component-segmented-placeholder-font-size:	var(--component-important-placeholder-font-size);/* segmented field placeholder font size */
	--component-segmented-placeholder-color:		var(--component-important-placeholder-color);/* segmented field placeholder color */
	--component-segmented-segment-background-color:	var(--component-segmented-background-color);/* segmented field background color (single segment) */
	--component-segmented-segment-shadow:			var(--component-segmented-shadow);/* segmented field box shadow (single segment) */
	--component-segmented-segment-border-radius:	0;			/* segmented field border radius (single segment) */
	--component-segmented-segment-border-size:		0;			/* segmented field border size (single segment) */
	--component-segmented-segment-border-color:		var(--component-segmented-border-color);/* segmented field border color (single segment) */
	--component-segmented-segment-padding:			0 0 0 0;	/* segmented field padding (single segment) */
	--component-segmented-separator-font-size:		var(--component-font-size);/* segmented field font size (separators) */
	--component-segmented-separator-font-weight:	var(--component-font-weight);/* segmented field font weight (separators) */
	--component-segmented-separator-font-style:		var(--component-font-style);/* segmented field font style (separators) */
	--component-segmented-separator-line-height: 	var(--component-line-height);/* segmented field line height (separators) */
	--component-segmented-separator-text-color: 	var(--component-text-color);/* segmented field text color (separators) */
	--component-segmented-separator-background-color:var(--component-segmented-background-color);/* segmented field background color (separators) */
	--component-segmented-separator-shadow:			var(--component-segmented-shadow);/* segmented field box shadow (separators) */
	--component-segmented-separator-border-radius:	0;			/* segmented field border radius (separators) */
	--component-segmented-separator-border-size:	0;			/* segmented field border size (separators) */
	--component-segmented-separator-border-color:	var(--component-segmented-border-color);/* segmented field border color (separators) */
	--component-segmented-separator-padding:		0 7px 0 7px;/* segmented field padding (separators) */
	--component-segmented-separator-first-padding:	var(--component-segmented-separator-padding);/* segmented field padding (first separator) */
	--component-segmented-separator-last-padding:	var(--component-segmented-separator-padding);/* segmented field padding (last separator) */

	--component-segmented-important-font-weight:	var(--component-important-font-weight);/* important: segmented field font weight */
	--component-segmented-important-font-style:		var(--component-important-font-style);/* important: segmented field font style */
	--component-segmented-important-text-color: 	var(--component-important-text-color);/* important: segmented field text color */
	--component-segmented-important-background-color:var(--component-important-background-color);/* important: segmented field background color */
	--component-segmented-important-shadow:			var(--component-important-shadow);/* important: segmented field box shadow */
	--component-segmented-important-border-size:	var(--component-important-border-size);/* important: segmented field border size */
	--component-segmented-important-border-color:	var(--component-important-border-color);/* important: segmented field border color */
	--component-segmented-important-outline-size:	var(--component-important-outline-size);/* important: segmented field outline size */
	--component-segmented-important-outline-color:	var(--component-important-outline-color);/* important: segmented field outline color */
	--component-segmented-important-outline-offset:	var(--component-important-outline-offset);/* important: segmented field outline offset */
	--component-segmented-important-placeholder-font-weight:var(--component-important-placeholder-font-weight);/* segmented field placeholder font-weight */
	--component-segmented-important-placeholder-font-size:var(--component-important-placeholder-font-size);/* segmented field placeholder font size */
	--component-segmented-important-placeholder-color:var(--component-important-placeholder-color);/* segmented field placeholder color */
	--component-segmented-important-segment-background-color:var(--component-segmented-segment-background-color);/* important: segmented field background color (single segment) */
	--component-segmented-important-segment-shadow:	var(--component-segmented-segment-shadow);/* important: segmented field box shadow (single segment) */
	--component-segmented-important-segment-border-size:var(--component-segmented-segment-border-size);/* important: segmented field border size (single segment) */
	--component-segmented-important-segment-border-color:var(--component-segmented-segment-border-color);/* important: segmented field border color (single segment) */
	--component-segmented-important-separator-font-weight:var(--component-segmented-separator-font-weight);/* important: segmented field font weight (separators) */
	--component-segmented-important-separator-font-style:var(--component-segmented-separator-font-style);/* important: segmented field font style (separators) */
	--component-segmented-important-separator-text-color:var(--component-segmented-separator-text-color);/* important: segmented field text color (separators) */
	--component-segmented-important-separator-background-color:var(--component-segmented-separator-background-color);/* important: segmented field background color (separators) */
	--component-segmented-important-separator-shadow:var(--component-segmented-separator-shadow);/* important: segmented field box shadow (separators) */
	--component-segmented-important-separator-border-size:var(--component-segmented-separator-border-size);/* important: segmented field border size (separators) */
	--component-segmented-important-separator-border-color:var(--component-segmented-separator-border-color);/* important: segmented field border color (separators) */

	--component-segmented-required-font-weight:		var(--component-required-font-weight);/* required: segmented field font weight */
	--component-segmented-required-font-style:		var(--component-required-font-style);/* required: segmented field font style */
	--component-segmented-required-text-color: 		var(--component-required-text-color);/* required: segmented field text color */
	--component-segmented-required-background-color:var(--component-required-background-color);/* required: segmented field background color */
	--component-segmented-required-shadow:			var(--component-required-shadow);/* required: segmented field box shadow */
	--component-segmented-required-border-size:		var(--component-required-border-size);/* required: segmented field border size */
	--component-segmented-required-border-color:	var(--component-required-border-color);/* required: segmented field border color */
	--component-segmented-required-outline-size:	var(--component-required-outline-size);/* required: segmented field outline size */
	--component-segmented-required-outline-color:	var(--component-required-outline-color);/* required: segmented field outline color */
	--component-segmented-required-outline-offset:	var(--component-required-outline-offset);/* required: segmented field outline offset */
	--component-segmented-required-placeholder-font-weight:var(--component-required-placeholder-font-weight);/* segmented field placeholder font-weight */
	--component-segmented-required-placeholder-font-size:var(--component-required-placeholder-font-size);/* segmented field placeholder font size */
	--component-segmented-required-placeholder-color:var(--component-required-placeholder-color);/* segmented field placeholder color */
	--component-segmented-required-segment-background-color:var(--component-segmented-segment-background-color);/* required: segmented field background color (single segment) */
	--component-segmented-required-segment-shadow:	var(--component-segmented-segment-shadow);/* required: segmented field box shadow (single segment) */
	--component-segmented-required-segment-border-size:var(--component-segmented-segment-border-size);/* required: segmented field border size (single segment) */
	--component-segmented-required-segment-border-color:var(--component-segmented-segment-border-color);/* required: segmented field border color (single segment) */
	--component-segmented-required-separator-font-weight:var(--component-segmented-separator-font-weight);/* required: segmented field font weight (separators) */
	--component-segmented-required-separator-font-style:var(--component-segmented-separator-font-style);/* required: segmented field font style (separators) */
	--component-segmented-required-separator-text-color:var(--component-segmented-separator-text-color);/* required: segmented field text color (separators) */
	--component-segmented-required-separator-background-color:var(--component-segmented-separator-background-color);/* required: segmented field background color (separators) */
	--component-segmented-required-separator-shadow:var(--component-segmented-separator-shadow);/* required: segmented field box shadow (separators) */
	--component-segmented-required-separator-border-size:var(--component-segmented-separator-border-size);/* required: segmented field border size (separators) */
	--component-segmented-required-separator-border-color:var(--component-segmented-separator-border-color);/* required: segmented field border color (separators) */

	--component-segmented-empty-font-weight:		var(--component-empty-font-weight);/* empty: segmented field font weight */
	--component-segmented-empty-font-style:			var(--component-empty-font-style);/* empty: segmented field font style */
	--component-segmented-empty-text-color: 		var(--component-empty-text-color);/* empty: segmented field text color */
	--component-segmented-empty-background-color:	var(--component-empty-background-color);/* empty: segmented field background color */
	--component-segmented-empty-shadow:				var(--component-empty-shadow);/* empty: segmented field box shadow */
	--component-segmented-empty-border-size:		var(--component-empty-border-size);/* empty: segmented field border size */
	--component-segmented-empty-border-color:		var(--component-empty-border-color);/* empty: segmented field border color */
	--component-segmented-empty-outline-size:		var(--component-empty-outline-size);/* empty: segmented field outline size */
	--component-segmented-empty-outline-color:		var(--component-empty-outline-color);/* empty: segmented field outline color */
	--component-segmented-empty-outline-offset:		var(--component-empty-outline-offset);/* empty: segmented field outline offset */
	--component-segmented-empty-placeholder-font-weight:	var(--component-empty-placeholder-font-weight);/* segmented field placeholder font-weight */
	--component-segmented-empty-placeholder-font-size:var(--component-empty-placeholder-font-size);/* segmented field placeholder font size */
	--component-segmented-empty-placeholder-color:	var(--component-empty-placeholder-color);/* segmented field placeholder color */
	--component-segmented-empty-segment-background-color:var(--component-segmented-segment-background-color);/* empty: segmented field background color (single segment) */
	--component-segmented-empty-segment-shadow:		var(--component-segmented-segment-shadow);/* empty: segmented field box shadow (single segment) */
	--component-segmented-empty-segment-border-size:var(--component-segmented-segment-border-size);/* empty: segmented field border size (single segment) */
	--component-segmented-empty-segment-border-color:var(--component-segmented-segment-border-color);/* empty: segmented field border color (single segment) */
	--component-segmented-empty-separator-font-weight:var(--component-segmented-separator-font-weight);/* empty: segmented field font weight (separators) */
	--component-segmented-empty-separator-font-style:var(--component-segmented-separator-font-style);/* empty: segmented field font style (separators) */
	--component-segmented-empty-separator-text-color:var(--component-segmented-separator-text-color);/* empty: segmented field text color (separators) */
	--component-segmented-empty-separator-background-color:var(--component-segmented-separator-background-color);/* empty: segmented field background color (separators) */
	--component-segmented-empty-separator-shadow:	var(--component-segmented-separator-shadow);/* empty: segmented field box shadow (separators) */
	--component-segmented-empty-separator-border-size:var(--component-segmented-separator-border-size);/* empty: segmented field border size (separators) */
	--component-segmented-empty-separator-border-color:var(--component-segmented-separator-border-color);/* empty: segmented field border color (separators) */

	--component-segmented-invalid-font-weight:		var(--component-invalid-font-weight);/* invalid: segmented field font weight */
	--component-segmented-invalid-font-style:		var(--component-invalid-font-style);/* invalid: segmented field font style */
	--component-segmented-invalid-text-color: 		var(--component-invalid-text-color);/* invalid: segmented field text color */
	--component-segmented-invalid-background-color:	var(--component-invalid-background-color);/* invalid: segmented field background color */
	--component-segmented-invalid-shadow:			var(--component-invalid-shadow);/* invalid: segmented field box shadow */
	--component-segmented-invalid-border-size:		var(--component-invalid-border-size);/* invalid: segmented field border size */
	--component-segmented-invalid-border-color:		var(--component-invalid-border-color);/* invalid: segmented field border color */
	--component-segmented-invalid-outline-size:		var(--component-invalid-outline-size);/* invalid: segmented field outline size */
	--component-segmented-invalid-outline-color:	var(--component-invalid-outline-color);/* invalid: segmented field outline color */
	--component-segmented-invalid-outline-offset:	var(--component-invalid-outline-offset);/* invalid: segmented field outline offset */
	--component-segmented-invalid-placeholder-font-weight:	var(--component-invalid-placeholder-font-weight);/* segmented field placeholder font-weight */
	--component-segmented-invalid-placeholder-font-size:var(--component-invalid-placeholder-font-size);/* segmented field placeholder font size */
	--component-segmented-invalid-placeholder-color:var(--component-invalid-placeholder-color);/* segmented field placeholder color */
	--component-segmented-invalid-segment-background-color:var(--component-segmented-segment-background-color);/* invalid: segmented field background color (single segment) */
	--component-segmented-invalid-segment-shadow:	var(--component-segmented-segment-shadow);/* invalid: segmented field box shadow (single segment) */
	--component-segmented-invalid-segment-border-size:var(--component-segmented-segment-border-size);/* invalid: segmented field border size (single segment) */
	--component-segmented-invalid-segment-border-color:var(--component-segmented-segment-border-color);/* invalid: segmented field border color (single segment) */
	--component-segmented-invalid-separator-font-weight:var(--component-segmented-separator-font-weight);/* invalid: segmented field font weight (separators) */
	--component-segmented-invalid-separator-font-style:var(--component-segmented-separator-font-style);/* invalid: segmented field font style (separators) */
	--component-segmented-invalid-separator-text-color:var(--component-segmented-separator-text-color);/* invalid: segmented field text color (separators) */
	--component-segmented-invalid-separator-background-color:var(--component-segmented-separator-background-color);/* invalid: segmented field background color (separators) */
	--component-segmented-invalid-separator-shadow:var(--component-segmented-separator-shadow);/* invalid: segmented field box shadow (separators) */
	--component-segmented-invalid-separator-border-size:var(--component-segmented-separator-border-size);/* invalid: segmented field border size (separators) */
	--component-segmented-invalid-separator-border-color:var(--component-segmented-separator-border-color);/* invalid: segmented field border color (separators) */

	--component-segmented-focus-font-weight:		var(--component-focus-font-weight);/* focus: segmented field font weight */
	--component-segmented-focus-font-style:			var(--component-focus-font-style);/* focus: segmented field font style */
	--component-segmented-focus-text-color: 		var(--component-focus-text-color);/* focus: segmented field text color */
	--component-segmented-focus-background-color:	var(--component-focus-background-color);/* focus: segmented field background color */
	--component-segmented-focus-shadow:				var(--component-focus-shadow);/* focus: segmented field box shadow */
	--component-segmented-focus-border-size:		var(--component-focus-border-size);/* focus: segmented field border size */
	--component-segmented-focus-border-color:		var(--component-focus-border-color);/* focus: segmented field border color */
	--component-segmented-focus-outline-size:		var(--component-focus-outline-size);/* focus: segmented field outline size */
	--component-segmented-focus-outline-color:		var(--component-focus-outline-color);/* focus: segmented field outline color */
	--component-segmented-focus-outline-offset:		var(--component-focus-outline-offset);/* focus: segmented field outline offset */
	--component-segmented-focus-placeholder-font-weight:	var(--component-focus-placeholder-font-weight);/* segmented field placeholder font-weight */
	--component-segmented-focus-placeholder-font-size:var(--component-focus-placeholder-font-size);/* segmented field placeholder font size */
	--component-segmented-focus-placeholder-color:	var(--component-focus-placeholder-color);/* segmented field placeholder color */
	--component-segmented-focus-segment-background-color:var(--component-segmented-segment-background-color);/* focus: segmented field background color (single segment) */
	--component-segmented-focus-segment-shadow:	var(--component-segmented-segment-shadow);/* focus: segmented field box shadow (single segment) */
	--component-segmented-focus-segment-border-size:var(--component-segmented-segment-border-size);/* focus: segmented field border size (single segment) */
	--component-segmented-focus-segment-border-color:var(--component-segmented-segment-border-color);/* focus: segmented field border color (single segment) */
	--component-segmented-focus-separator-font-weight:var(--component-segmented-separator-font-weight);/* focus: segmented field font weight (separators) */
	--component-segmented-focus-separator-font-style:var(--component-segmented-separator-font-style);/* focus: segmented field font style (separators) */
	--component-segmented-focus-separator-text-color:var(--component-segmented-separator-text-color);/* focus: segmented field text color (separators) */
	--component-segmented-focus-separator-background-color:var(--component-segmented-separator-background-color);/* focus: segmented field background color (separators) */
	--component-segmented-focus-separator-shadow:var(--component-segmented-separator-shadow);/* focus: segmented field box shadow (separators) */
	--component-segmented-focus-separator-border-size:var(--component-segmented-separator-border-size);/* focus: segmented field border size (separators) */
	--component-segmented-focus-separator-border-color:var(--component-segmented-separator-border-color);/* focus: segmented field border color (separators) */

	--component-segmented-disabled-font-weight:		var(--component-disabled-font-weight);/* disabled: segmented field font weight */
	--component-segmented-disabled-font-style:		var(--component-disabled-font-style);/* disabled: segmented field font style */
	--component-segmented-disabled-text-color: 		var(--component-disabled-text-color);/* disabled: segmented field text color */
	--component-segmented-disabled-background-color:var(--component-disabled-background-color);/* disabled: segmented field background color */
	--component-segmented-disabled-shadow:			var(--component-disabled-shadow);/* disabled: segmented field box shadow */
	--component-segmented-disabled-border-size:		var(--component-disabled-border-size);/* disabled: segmented field border size */
	--component-segmented-disabled-border-color:	var(--component-disabled-border-color);/* disabled: segmented field border color */
	--component-segmented-disabled-outline-size:	var(--component-disabled-outline-size);/* disabled: segmented field outline size */
	--component-segmented-disabled-outline-color:	var(--component-disabled-outline-color);/* disabled: segmented field outline color */
	--component-segmented-disabled-outline-offset:	var(--component-disabled-outline-offset);/* disabled: segmented field outline offset */
	--component-segmented-disabled-placeholder-font-weight:var(--component-disabled-placeholder-font-weight);/* segmented field placeholder font-weight */
	--component-segmented-disabled-placeholder-font-size:var(--component-disabled-placeholder-font-size);/* segmented field placeholder font size */
	--component-segmented-disabled-placeholder-color:var(--component-disabled-placeholder-color);/* segmented field placeholder color */
	--component-segmented-disabled-segment-background-color:var(--component-segmented-segment-background-color);/* disabled: segmented field background color (single segment) */
	--component-segmented-disabled-segment-shadow:	var(--component-segmented-segment-shadow);/* disabled: segmented field box shadow (single segment) */
	--component-segmented-disabled-segment-border-size:var(--component-segmented-segment-border-size);/* disabled: segmented field border size (single segment) */
	--component-segmented-disabled-segment-border-color:var(--component-segmented-segment-border-color);/* disabled: segmented field border color (single segment) */
	--component-segmented-disabled-separator-font-weight:var(--component-segmented-separator-font-weight);/* disabled: segmented field font weight (separators) */
	--component-segmented-disabled-separator-font-style:var(--component-segmented-separator-font-style);/* disabled: segmented field font style (separators) */
	--component-segmented-disabled-separator-text-color:var(--component-segmented-separator-text-color);/* disabled: segmented field text color (separators) */
	--component-segmented-disabled-separator-background-color:var(--component-segmented-separator-background-color);/* disabled: segmented field background color (separators) */
	--component-segmented-disabled-separator-shadow:var(--component-segmented-separator-shadow);/* disabled: segmented field box shadow (separators) */
	--component-segmented-disabled-separator-border-size:var(--component-segmented-separator-border-size);/* disabled: segmented field border size (separators) */
	--component-segmented-disabled-separator-border-color:var(--component-segmented-separator-border-color);/* disabled: segmented field border color (separators) */

	--component-segmented-addon-padding:			var(--component-padding);/* segmented field addon padding */
	--component-segmented-addon-width:				32px;	/* segmented field addon width */
	--component-segmented-addon-font:				var(--component-font);/* segmented field addon font family */
	--component-segmented-addon-font-size:			var(--component-font-size);/* segmented field addon font size */
	--component-segmented-addon-font-weight:		var(--component-font-weight);/* segmented field addon font weight */
	--component-segmented-addon-font-style:			var(--component-font-style);/* segmented field addon font style */
	--component-segmented-addon-line-height: 		var(--component-line-height);/* segmented field addon line height */
	--component-segmented-addon-text-color: 		var(--component-text-color);/* segmented field addon text color */
	--component-segmented-addon-background-color:	var(--component-background-color);/* segmented field addon background color */

	--component-segmented-addon-important-font-weight: var(--component-important-font-weight);/* important: segmented field addon font weight */
	--component-segmented-addon-important-font-style: var(--component-important-font-style);/* important: segmented field addon font style */
	--component-segmented-addon-important-text-color: var(--component-important-text-color);/* important: segmented field addon text color */
	--component-segmented-addon-important-background-color: var(--component-important-background-color);/* important: segmented field addon background color */

	--component-segmented-addon-required-font-weight: var(--component-required-font-weight);/* required: segmented field addon font weight */
	--component-segmented-addon-required-font-style: var(--component-required-font-style);/* required: segmented field addon font style */
	--component-segmented-addon-required-text-color: var(--component-required-text-color);/* required: segmented field addon text color */
	--component-segmented-addon-required-background-color: var(--component-required-background-color);/* required: segmented field addon background color */

	--component-segmented-addon-empty-font-weight: var(--component-empty-font-weight);/* empty: segmented field addon font weight */
	--component-segmented-addon-empty-font-style: var(--component-empty-font-style);/* empty: segmented field addon font style */
	--component-segmented-addon-empty-text-color: var(--component-empty-text-color);/* empty: segmented field addon text color */
	--component-segmented-addon-empty-background-color: var(--component-empty-background-color);/* empty: segmented field addon background color */

	--component-segmented-addon-invalid-font-weight: var(--component-invalid-font-weight);/* invalid: segmented field addon font weight */
	--component-segmented-addon-invalid-font-style:	var(--component-invalid-font-style);/* invalid: segmented field addon font style */
	--component-segmented-addon-invalid-text-color: var(--component-invalid-text-color);/* invalid: segmented field addon text color */
	--component-segmented-addon-invalid-background-color: var(--component-invalid-background-color);/* invalid: segmented field addon background color */

	--component-segmented-addon-focus-font-weight: 	var(--component-focus-font-weight);/* focus: segmented field addon font weight */
	--component-segmented-addon-focus-font-style: 	var(--component-focus-font-style);/* focus: segmented field addon font style */
	--component-segmented-addon-focus-text-color: 	var(--component-focus-text-color);/* focus: segmented field addon text color */
	--component-segmented-addon-focus-background-color:	var(--component-focus-background-color);/* focus: segmented field addon background color */

	--component-segmented-addon-disabled-font-weight: var(--component-disabled-font-weight);/* disabled: segmented field addon font weight */
	--component-segmented-addon-disabled-font-style: var(--component-disabled-font-style);/* disabled: segmented field addon font style */
	--component-segmented-addon-disabled-text-color: var(--component-disabled-text-color);/* disabled: segmented field addon text color */
	--component-segmented-addon-disabled-background-color: var(--component-disabled-background-color);/* disabled: segmented field addon background color */

	/* signature field */
	--component-signature-item-align: 				var(--component-item-align);/* signature field vertical alignment (align-self) */
	--component-signature-margin:					var(--component-margin);/* signature field margin */
	--component-signature-padding:					var(--component-padding);/* signature field padding */
	--component-signature-height:					150px;		/* signature field height */
	--component-signature-background-color:			var(--component-background-color);/* signature field background color */
	--component-signature-shadow:					var(--component-shadow);/* signature field box shadow */
	--component-signature-border-radius:			var(--component-border-radius);/* signature field border radius */
	--component-signature-border-size:				var(--component-border-size);/* signature field border size */
	--component-signature-border-color:				var(--component-border-color);/* signature field border color */
	--component-signature-outline-size:				var(--component-outline-size);/* signature field outline size */
	--component-signature-outline-color:			var(--component-outline-color);/* signature field outline color */
	--component-signature-outline-offset:			var(--component-outline-offset);/* signature field outline offset */

	--component-signature-important-background-color:var(--component-important-background-color);/* important: signature field background color */
	--component-signature-important-shadow:			var(--component-important-shadow);/* important: signature field box shadow */
	--component-signature-important-border-size:	var(--component-important-border-size);/* important: signature field border size */
	--component-signature-important-border-color:	var(--component-important-border-color);/* important: signature field border color */
	--component-signature-important-outline-size:	var(--component-important-outline-size);/* important: signature field outline size */
	--component-signature-important-outline-color:	var(--component-important-outline-color);/* important: signature field outline color */
	--component-signature-important-outline-offset:	var(--component-important-outline-offset);/* important: signature field outline offset */

	--component-signature-required-background-color:var(--component-required-background-color);/* required: signature field background color */
	--component-signature-required-shadow:			var(--component-required-shadow);/* required: signature field box shadow */
	--component-signature-required-border-size:		var(--component-required-border-size);/* required: signature field border size */
	--component-signature-required-border-color:	var(--component-required-border-color);/* required: signature field border color */
	--component-signature-required-outline-size:	var(--component-required-outline-size);/* required: signature field outline size */
	--component-signature-required-outline-color:	var(--component-required-outline-color);/* required: signature field outline color */
	--component-signature-required-outline-offset:	var(--component-required-outline-offset);/* required: signature field outline offset */

	--component-signature-empty-background-color:	var(--component-empty-background-color);/* empty: signature field background color */
	--component-signature-empty-shadow:				var(--component-empty-shadow);/* empty: signature field box shadow */
	--component-signature-empty-border-size:		var(--component-empty-border-size);/* empty: signature field border size */
	--component-signature-empty-border-color:		var(--component-empty-border-color);/* empty: signature field border color */
	--component-signature-empty-outline-size:		var(--component-empty-outline-size);/* empty: signature field outline size */
	--component-signature-empty-outline-color:		var(--component-empty-outline-color);/* empty: signature field outline color */
	--component-signature-empty-outline-offset:		var(--component-empty-outline-offset);/* empty: signature field outline offset */

	--component-signature-invalid-background-color:	var(--component-invalid-background-color);/* invalid: signature field background color */
	--component-signature-invalid-shadow:			var(--component-invalid-shadow);/* invalid: signature field box shadow */
	--component-signature-invalid-border-size:		var(--component-invalid-border-size);/* invalid: signature field border size */
	--component-signature-invalid-border-color:		var(--component-invalid-border-color);/* invalid: signature field border color */
	--component-signature-invalid-outline-size:		var(--component-invalid-outline-size);/* invalid: signature field outline size */
	--component-signature-invalid-outline-color:	var(--component-invalid-outline-color);/* invalid: signature field outline color */
	--component-signature-invalid-outline-offset:	var(--component-invalid-outline-offset);/* invalid: signature field outline offset */

	--component-signature-focus-background-color:	var(--component-focus-background-color);/* focus: signature field background color */
	--component-signature-focus-shadow:				var(--component-focus-shadow);/* focus: signature field box shadow */
	--component-signature-focus-border-size:		var(--component-focus-border-size);/* focus: signature field border size */
	--component-signature-focus-border-color:		var(--component-focus-border-color);/* focus: signature field border color */
	--component-signature-focus-outline-size:		var(--component-focus-outline-size);/* focus: signature field outline size */
	--component-signature-focus-outline-color:		var(--component-focus-outline-color);/* focus: signature field outline color */
	--component-signature-focus-outline-offset:		var(--component-focus-outline-offset);/* focus: signature field outline offset */

	--component-signature-disabled-background-color: var(--component-disabled-background-color);/* disabled: signature field background color */
	--component-signature-disabled-shadow:			var(--component-disabled-shadow);/* disabled: signature field box shadow */
	--component-signature-disabled-border-size:		var(--component-disabled-border-size);/* disabled: signature field border size */
	--component-signature-disabled-border-color:	var(--component-disabled-border-color);/* disabled: signature field border color */
	--component-signature-disabled-outline-size:	var(--component-disabled-outline-size);/* disabled: signature field outline size */
	--component-signature-disabled-outline-color:	var(--component-disabled-outline-color);/* disabled: signature field outline color */
	--component-signature-disabled-outline-offset:	var(--component-disabled-outline-offset);/* disabled: signature field outline offset */

	--component-signature-button-container-pos:		row;		/* signature field: button container position (column: top/bottom, row: left/right) */
	--component-signature-button-pos:				column;		/* signature field: buttons position */
	--component-signature-button-container-margin:	20px; 		/* signature field: left (right) margin of the button container */
	--component-signature-button-gap:				20px; 		/* signature field: button gap */
	--component-signature-button-container-align:	normal; 	/* signature field: button container align (align-self) */
	--component-signature-button-width:				45px;		/* signature field button width */
	--component-signature-button-height:			auto;		/* signature field button height */

	/* static field */
	--component-static-item-align: 					var(--component-item-align);/* static field vertical alignment (align-self) */
	--component-static-margin:						var(--component-margin);/* static field margin */
	--component-static-padding:						var(--component-padding);/* static field padding */
	--component-static-font:						var(--component-font);/* static field font family */
	--component-static-font-size:					var(--component-font-size);/* static field font size */
	--component-static-font-weight:					var(--component-font-weight);/* static field font weight */
	--component-static-font-style:					var(--component-font-style);/* static field font style */
	--component-static-line-height: 				var(--component-line-height);/* static field line height */
	--component-static-text-color: 					var(--component-text-color);/* static field text color */
	--component-static-background-color:			transparent;/* static field background color */
	--component-static-shadow:						var(--component-shadow);/* static field box shadow */
	--component-static-border-radius:				0;			/* static field border radius */
	--component-static-border-size:					0;			/* static field border size */
	--component-static-border-color:				var(--component-border-color);/* static field border color */
	--component-static-outline-size:				var(--component-outline-size);/* static field outline size */
	--component-static-outline-color:				var(--component-outline-color);/* static field outline color */
	--component-static-outline-offset:				var(--component-outline-offset);/* static field outline offset */

	--component-static-disabled-font-weight:		var(--component-disabled-font-weight);/* disabled: static field font weight */
	--component-static-disabled-font-style:			var(--component-disabled-font-style);/* disabled: static field font style */
	--component-static-disabled-text-color: 		var(--component-disabled-text-color);/* disabled: static field text color */
	--component-static-disabled-background-color:	var(--component-disabled-background-color);/* disabled: static field background color */
	--component-static-disabled-shadow:				var(--component-disabled-shadow);/* disabled: static field box shadow */
	--component-static-disabled-border-size:		var(--component-disabled-border-size);/* disabled: static field border size */
	--component-static-disabled-border-color:		var(--component-disabled-border-color);/* disabled: static field border color */
	--component-static-disabled-outline-size:		var(--component-disabled-outline-size);/* disabled: static field outline size */
	--component-static-disabled-outline-color:		var(--component-disabled-outline-color);/* disabled: static field outline color */
	--component-static-disabled-outline-offset:		var(--component-disabled-outline-offset);/* disabled: static field outline offset */

	/* select field */
	--component-select-item-align: 					var(--component-item-align);/* select field vertical alignment (align-self) */
	--component-select-margin:						var(--component-margin);/* select field margin */
	--component-select-padding:						var(--component-padding);/* select field padding */
	--component-select-font:						var(--component-font);/* select field font family */
	--component-select-font-size:					var(--component-font-size);/* select field font size */
	--component-select-font-weight:					var(--component-font-weight);/* select field font weight */
	--component-select-font-style:					var(--component-font-style);/* select field font style */
	--component-select-line-height: 				var(--component-line-height);/* select field line height */
	--component-select-text-color: 					var(--component-text-color);/* select field text color */
	--component-select-background-color:			var(--component-background-color);/* select field background color */
	--component-select-shadow:						var(--component-shadow);/* select field box shadow */
	--component-select-border-radius:				var(--component-border-radius);/* select field border radius */
	--component-select-border-size:					var(--component-border-size);/* select field border size */
	--component-select-border-color:				var(--component-border-color);/* select field border color */
	--component-select-outline-size:				var(--component-outline-size);/* select field outline size */
	--component-select-outline-color:				var(--component-outline-color);/* select field outline color */
	--component-select-outline-offset:				var(--component-outline-offset);/* select field outline offset */
	--component-select-placeholder-font:			var(--component-placeholder-font);/* select field placeholder font */
	--component-select-placeholder-font-weight:		var(--component-placeholder-font-weight);/* select field placeholder font-weight */
	--component-select-placeholder-font-size:		var(--component-placeholder-font-size);/* select field placeholder font size */
	--component-select-placeholder-color:			var(--component-placeholder-color);/* select field placeholder color */

	--component-select-important-font-weight:		var(--component-important-font-weight);/* important: select field font weight */
	--component-select-important-font-style:		var(--component-important-font-style);/* important: select field font style */
	--component-select-important-text-color: 		var(--component-important-text-color);/* important: select field text color */
	--component-select-important-background-color:	var(--component-important-background-color);/* important: select field background color */
	--component-select-important-shadow:			var(--component-important-shadow);/* important: select field box shadow */
	--component-select-important-border-size:		var(--component-important-border-size);/* important: select field border size */
	--component-select-important-border-color:		var(--component-important-border-color);/* important: select field border color */
	--component-select-important-outline-size:		var(--component-important-outline-size);/* important: select field outline size */
	--component-select-important-outline-color:		var(--component-important-outline-color);/* important: select field outline color */
	--component-select-important-outline-offset:	var(--component-important-outline-offset);/* important: select field outline offset */
	--component-select-important-placeholder-font-weight:var(--component-important-placeholder-font-weight);/* select field placeholder font-weight */
	--component-select-important-placeholder-font-size:var(--component-important-placeholder-font-size);/* select field placeholder font size */
	--component-select-important-placeholder-color:	var(--component-important-placeholder-color);/* select field placeholder color */

	--component-select-required-font-weight:		var(--component-required-font-weight);/* required: select field font weight */
	--component-select-required-font-style:			var(--component-required-font-style);/* required: select field font style */
	--component-select-required-text-color: 		var(--component-required-text-color);/* required: select field text color */
	--component-select-required-background-color:	var(--component-required-background-color);/* required: select field background color */
	--component-select-required-shadow:				var(--component-required-shadow);/* required: select field box shadow */
	--component-select-required-border-size:		var(--component-required-border-size);/* required: select field border size */
	--component-select-required-border-color:		var(--component-required-border-color);/* required: select field border color */
	--component-select-required-outline-size:		var(--component-required-outline-size);/* required: select field outline size */
	--component-select-required-outline-color:		var(--component-required-outline-color);/* required: select field outline color */
	--component-select-required-outline-offset:		var(--component-required-outline-offset);/* required: select field outline offset */
	--component-select-required-placeholder-font-weight:var(--component-required-placeholder-font-weight);/* select field placeholder font-weight */
	--component-select-required-placeholder-font-size:var(--component-required-placeholder-font-size);/* select field placeholder font size */
	--component-select-required-placeholder-color:	var(--component-required-placeholder-color);/* select field placeholder color */

	--component-select-empty-font-weight:			var(--component-empty-font-weight);/* empty: select field font weight */
	--component-select-empty-font-style:			var(--component-empty-font-style);/* empty: select field font style */
	--component-select-empty-text-color: 			var(--component-empty-text-color);/* empty: select field text color */
	--component-select-empty-background-color:		var(--component-empty-background-color);/* empty: select field background color */
	--component-select-empty-shadow:				var(--component-empty-shadow);/* empty: select field box shadow */
	--component-select-empty-border-size:			var(--component-empty-border-size);/* empty: select field border size */
	--component-select-empty-border-color:			var(--component-empty-border-color);/* empty: select field border color */
	--component-select-empty-outline-size:			var(--component-empty-outline-size);/* empty: select field outline size */
	--component-select-empty-outline-color:			var(--component-empty-outline-color);/* empty: select field outline color */
	--component-select-empty-outline-offset:		var(--component-empty-outline-offset);/* empty: select field outline offset */
	--component-select-empty-placeholder-font-weight:var(--component-empty-placeholder-font-weight);/* select field placeholder font-weight */
	--component-select-empty-placeholder-font-size:	var(--component-empty-placeholder-font-size);/* select field placeholder font size */
	--component-select-empty-placeholder-color:		var(--component-empty-placeholder-color);/* select field placeholder color */

	--component-select-invalid-font-weight:			var(--component-invalid-font-weight);/* invalid: select field font weight */
	--component-select-invalid-font-style:			var(--component-invalid-font-style);/* invalid: select field font style */
	--component-select-invalid-text-color: 			var(--component-invalid-text-color);/* invalid: select field text color */
	--component-select-invalid-background-color:	var(--component-invalid-background-color);/* invalid: select field background color */
	--component-select-invalid-shadow:				var(--component-invalid-shadow);/* invalid: select field box shadow */
	--component-select-invalid-border-size:			var(--component-invalid-border-size);/* invalid: select field border size */
	--component-select-invalid-border-color:		var(--component-invalid-border-color);/* invalid: select field border color */
	--component-select-invalid-outline-size:		var(--component-invalid-outline-size);/* invalid: select field outline size */
	--component-select-invalid-outline-color:		var(--component-invalid-outline-color);/* invalid: select field outline color */
	--component-select-invalid-outline-offset:		var(--component-invalid-outline-offset);/* invalid: select field outline offset */
	--component-select-invalid-placeholder-font-weight:var(--component-invalid-placeholder-font-weight);/* select field placeholder font-weight */
	--component-select-invalid-placeholder-font-size:var(--component-invalid-placeholder-font-size);/* select field placeholder font size */
	--component-select-invalid-placeholder-color:	var(--component-invalid-placeholder-color);/* select field placeholder color */

	--component-select-focus-font-weight:			var(--component-focus-font-weight);/* focus: select field font weight */
	--component-select-focus-font-style:			var(--component-focus-font-style);/* focus: select field font style */
	--component-select-focus-text-color: 			var(--component-focus-text-color);/* focus: select field text color */
	--component-select-focus-background-color:		var(--component-focus-background-color);/* focus: select field background color */
	--component-select-focus-shadow:				var(--component-focus-shadow);/* focus: select field box shadow */
	--component-select-focus-border-size:			var(--component-focus-border-size);/* focus: select field border size */
	--component-select-focus-border-color:			var(--component-focus-border-color);/* focus: select field border color */
	--component-select-focus-outline-size:			var(--component-focus-outline-size);/* focus: select field outline size */
	--component-select-focus-outline-color:			var(--component-focus-outline-color);/* focus: select field outline color */
	--component-select-focus-outline-offset:		var(--component-focus-outline-offset);/* focus: select field outline offset */
	--component-select-focus-placeholder-font-weight:var(--component-focus-placeholder-font-weight);/* select field placeholder font-weight */
	--component-select-focus-placeholder-font-size:	var(--component-focus-placeholder-font-size);/* select field placeholder font size */
	--component-select-focus-placeholder-color:		var(--component-focus-placeholder-color);/* select field placeholder color */

	--component-select-disabled-font-weight:		var(--component-disabled-font-weight);/* disabled: select field font weight */
	--component-select-disabled-font-style:			var(--component-disabled-font-style);/* disabled: select field font style */
	--component-select-disabled-text-color: 		var(--component-disabled-text-color);/* disabled: select field text color */
	--component-select-disabled-background-color:	var(--component-disabled-background-color);/* disabled: select field background color */
	--component-select-disabled-shadow:				var(--component-disabled-shadow);/* disabled: select field box shadow */
	--component-select-disabled-border-size:		var(--component-disabled-border-size);/* disabled: select field border size */
	--component-select-disabled-border-color:		var(--component-disabled-border-color);/* disabled: select field border color */
	--component-select-disabled-outline-size:		var(--component-disabled-outline-size);/* disabled: select field outline size */
	--component-select-disabled-outline-color:		var(--component-disabled-outline-color);/* disabled: select field outline color */
	--component-select-disabled-outline-offset:		var(--component-disabled-outline-offset);/* disabled: select field outline offset */
	--component-select-disabled-placeholder-font-weight:var(--component-disabled-placeholder-font-weight);/* select field placeholder font-weight */
	--component-select-disabled-placeholder-font-size:var(--component-disabled-placeholder-font-size);/* select field placeholder font size */
	--component-select-disabled-placeholder-color:	var(--component-disabled-placeholder-color);/* select field placeholder color */

	--component-select-caret-padding:				var(--component-padding);/* select field caret padding */
	--component-select-caret-background-color:		var(--component-background-color);/* select field caret background color */
	--component-select-caret-border-radius:			var(--component-border-radius);/* select field caret border radius */
	--component-select-caret-border-size:			var(--component-border-size);/* select field caret border size */
	--component-select-caret-border-color:			var(--component-border-color);/* select field caret border color */
	--component-select-caret-outline-size:			var(--component-outline-size);/* select field caret outline size */
	--component-select-caret-outline-color:			var(--component-outline-color);/* select field caret outline color */
	--component-select-caret-outline-offset:		var(--component-outline-offset);/* select field caret outline offset */

	--component-select-caret-important-background-color:var(--component-important-background-color);/* important: select field caret background color */
	--component-select-caret-important-border-size:	var(--component-important-border-size);/* important: select field caret border size */
	--component-select-caret-important-border-color:var(--component-important-border-color);/* important: select field caret border color */
	--component-select-caret-important-outline-size:var(--component-important-outline-size);/* important: select field caret outline size */
	--component-select-caret-important-outline-color:var(--component-important-outline-color);/* important: select field caret outline color */
	--component-select-caret-important-outline-offset:var(--component-important-outline-offset);/* important: select field caret outline offset */

	--component-select-caret-required-background-color:var(--component-required-background-color);/* required: select field caret background color */
	--component-select-caret-required-border-size:	var(--component-required-border-size);/* required: select field caret border size */
	--component-select-caret-required-border-color:	var(--component-required-border-color);/* required: select field caret border color */
	--component-select-caret-required-outline-size:	var(--component-required-outline-size);/* required: select field caret outline size */
	--component-select-caret-required-outline-color:var(--component-required-outline-color);/* required: select field caret outline color */
	--component-select-caret-required-outline-offset:var(--component-required-outline-offset);/* required: select field caret outline offset */

	--component-select-caret-empty-background-color:var(--component-empty-background-color);/* empty: select field caret background color */
	--component-select-caret-empty-border-size:		var(--component-empty-border-size);/* empty: select field caret border size */
	--component-select-caret-empty-border-color:	var(--component-empty-border-color);/* empty: select field caret border color */
	--component-select-caret-empty-outline-size:	var(--component-empty-outline-size);/* empty: select field caret outline size */
	--component-select-caret-empty-outline-color:	var(--component-empty-outline-color);/* empty: select field caret outline color */
	--component-select-caret-empty-outline-offset:	var(--component-empty-outline-offset);/* empty: select field caret outline offset */

	--component-select-caret-invalid-background-color:var(--component-invalid-background-color);/* invalid: select field caret background color */
	--component-select-caret-invalid-border-size:	var(--component-invalid-border-size);/* invalid: select field caret border size */
	--component-select-caret-invalid-border-color:	var(--component-invalid-border-color);/* invalid: select field caret border color */
	--component-select-caret-invalid-outline-size:	var(--component-invalid-outline-size);/* invalid: select field caret outline size */
	--component-select-caret-invalid-outline-color:	var(--component-invalid-outline-color);/* invalid: select field caret outline color */
	--component-select-caret-invalid-outline-offset:	var(--component-invalid-outline-offset);/* invalid: select field caret outline offset */

	--component-select-caret-focus-background-color:var(--component-focus-background-color);/* focus: select field caret background color */
	--component-select-caret-focus-border-size:		var(--component-focus-border-size);/* focus: select field caret border size */
	--component-select-caret-focus-border-color:	var(--component-focus-border-color);/* focus: select field caret border color */
	--component-select-caret-focus-outline-size:	var(--component-focus-outline-size);/* focus: select field caret outline size */
	--component-select-caret-focus-outline-color:	var(--component-focus-outline-color);/* focus: select field caret outline color */
	--component-select-caret-focus-outline-offset:	var(--component-focus-outline-offset);/* focus: select field caret outline offset */

	--component-select-caret-disabled-background-color:var(--component-disabled-background-color);/* disabled: select field caret background color */
	--component-select-caret-disabled-border-size:	var(--component-disabled-border-size);/* disabled: select field caret border size */
	--component-select-caret-disabled-border-color:	var(--component-disabled-border-color);/* disabled: select field caret border color */
	--component-select-caret-disabled-outline-size:	var(--component-disabled-outline-size);/* disabled: select field caret outline size */
	--component-select-caret-disabled-outline-color:var(--component-disabled-outline-color);/* disabled: select field caret outline color */
	--component-select-caret-disabled-outline-offset:var(--component-disabled-outline-offset);/* disabled: select field caret outline offset */

	--component-select-list-max-height: 			30vh;		/* select field option list max. height */
	--component-select-list-padding:				4px 8px 4px 8px;/* select field option list padding */
	--component-select-list-font:					var(--component-font);/* select field option list font family */
	--component-select-list-font-size:				var(--component-font-size);/* select field option list font size */
	--component-select-list-font-weight:			var(--component-font-weight);/* select field option list font weight */
	--component-select-list-font-style:				var(--component-font-style);/* select field option list font style */
	--component-select-list-line-height: 			var(--component-line-height);/* select field option list line height */
	--component-select-list-text-color: 			var(--component-text-color);/* select field option list text color */
	--component-select-list-background-color:		var(--component-background-color);/* select field option list background color */
	--component-select-list-shadow:					var(--component-shadow);/* select field option list box shadow */
	--component-select-list-border-radius:			var(--component-border-radius);/* select field option list border radius */
	--component-select-list-border-size:			var(--component-border-size);/* select field option list border size */
	--component-select-list-border-color:			var(--component-border-color);/* select field option list border color */
	--component-select-list-outline-size:			var(--component-outline-size);/* select field option list outline size */
	--component-select-list-outline-color:			var(--component-outline-color);/* select field option list outline color */
	--component-select-list-outline-offset:			var(--component-outline-offset);/* select field option list outline offset */
	--component-select-option-padding:				4px 8px 4px 8px;/* select field option padding */
	--component-select-list-hover-text-color: 		var(--component-background-color);/* select field option hover text color */
	--component-select-list-hover-background-color:	#2c84ca;	/* select field option hover background color */
	--component-select-list-selected-text-color: 	var(--component-background-color);/* select field option selected item text color */
	--component-select-list-selected-background-color: #55c3f1;	/* select field option selected item background color */

	--component-select-tag-list-background-color:	var(--component-background-color);/* select field tag list background color */
	--component-select-tag-list-border-size:		var(--component-border-size);/* select field tag list border size */
	--component-select-tag-list-border-color:		var(--component-border-color);/* select field tag list border color */
	--component-select-tag-list-disabled-background-color:var(--component-background-color);/* disabled: select field tag list background color */
	--component-select-tag-list-disabled-border-size:var(--component-border-size);/* disabled: select field tag list border size */
	--component-select-tag-list-disabled-border-color:var(--component-border-color);/* disabled: select field tag list border color */

	--component-select-tag-margin:					3px 0 3px 4px;/* select field tag margin */
	--component-select-tag-padding:					4px 4px 4px 4px;/* select field tag padding */
	--component-select-tag-font:					var(--component-font);/* select field tag font family */
	--component-select-tag-font-size:				var(--component-font-size);/* select field tag font size */
	--component-select-tag-font-weight:				var(--component-font-weight);/* select field tag font weight */
	--component-select-tag-font-style:				var(--component-font-style);/* select field tag font style */
	--component-select-tag-line-height: 			var(--component-line-height);/* select field tag line height */
	--component-select-tag-text-color: 				var(--component-text-color);/* select field tag text color */
	--component-select-tag-background-color:		var(--component-background-color);/* select field tag background color */
	--component-select-tag-shadow:					var(--component-shadow);/* select field tag box shadow */
	--component-select-tag-border-radius:			var(--component-border-radius);/* select field tag border radius */
	--component-select-tag-border-size:				var(--component-border-size);/* select field tag border size */
	--component-select-tag-border-color:			var(--component-border-color);/* select field tag border color */
	--component-select-tag-hover-font-weight:		var(--component-font-weight);/* hover: select field tag font weight */
	--component-select-tag-hover-font-style:		var(--component-font-style);/* hover: select field tag font style */
	--component-select-tag-hover-text-color: 		var(--component-text-color);/* hover: select field tag text color */
	--component-select-tag-hover-background-color:	var(--component-background-color);/* hover: select field tag background color */
	--component-select-tag-hover-shadow:			var(--component-shadow);/* hover: select field tag box shadow */
	--component-select-tag-hover-border-color:		var(--component-border-color);/* hover: select field tag border color */

	--component-select-tag-x-padding:				0px 4px 0px 8px;/* select field tag x padding */
	--component-select-tag-x-offset_x:				0;				/* select field tag x offset in x direction */
	--component-select-tag-x-offset_y:				-1px;			/* select field tag x offset in y direction */
	--component-select-tag-x-font:					"Font Awesome 5 Pro";/* select field tag x font family */
	--component-select-tag-x-font-size:				14px;/* select field tag x font size */
	--component-select-tag-x-font-weight:			var(--component-font-weight);/* select field tag x font weight */
	--component-select-tag-x-font-style:			var(--component-font-style);/* select field tag x font style */
	--component-select-tag-x-text-color: 			var(--component-text-color);/* select field tag x text color */
	--component-select-tag-x-hover-font-weight:		var(--component-font-weight);/* hover: select field tag x font weight */
	--component-select-tag-x-hover-font-style:		var(--component-font-style);/* hover: select field tag x font style */
	--component-select-tag-x-hover-text-color: 		var(--component-text-color);/* hover: select field tag x text color */

	/* date field */
	--component-date-item-align: 					var(--component-segmented-item-align);/* date field vertical alignment (align-self) */
	--component-date-margin:						var(--component-segmented-margin);/* date field margin */
	--component-date-padding:						var(--component-segmented-padding);/* date field padding */
	--component-date-container-align: 				var(--component-segmented-container-align);		/* item alignment in container */

	--component-date-font:							var(--component-segmented-font);/* date field font family */
	--component-date-font-size:						var(--component-segmented-font-size);/* date field font size */
	--component-date-font-weight:					var(--component-segmented-font-weight);/* date field font weight */
	--component-date-font-style:					var(--component-segmented-font-style);/* date field font style */
	--component-date-line-height: 					var(--component-segmented-line-height);/* date field line height */
	--component-date-text-color: 					var(--component-segmented-text-color);/* date field text color */
	--component-date-background-color:				var(--component-segmented-background-color);/* date field background color */
	--component-date-shadow:						var(--component-segmented-shadow);/* date field box shadow */
	--component-date-border-radius:					var(--component-segmented-border-radius);/* date field border radius */
	--component-date-border-size:					var(--component-segmented-border-size);/* date field border size */
	--component-date-border-color:					var(--component-segmented-border-color);/* date field border color */
	--component-date-outline-size:					var(--component-segmented-outline-size);/* date field outline size */
	--component-date-outline-color:					var(--component-segmented-outline-color);/* date field outline color */
	--component-date-outline-offset:				var(--component-segmented-outline-offset);/* date field outline offset */
	--component-date-placeholder-font:				var(--component-segmented-placeholder-font);/* date- field placeholder font */
	--component-date-placeholder-font-weight:		var(--component-segmented-placeholder-font-weight);/* date- field placeholder font-weight */
	--component-date-placeholder-font-size:			var(--component-segmented-placeholder-font-size);/* date- field placeholder font size */
	--component-date-placeholder-color:				var(--component-segmented-placeholder-color);/* date- field placeholder color */
	--component-date-segment-background-color:		var(--component-segmented-segment-background-color);/* date field background color (single segment) */
	--component-date-segment-shadow:				var(--component-segmented-segment-shadow);/* date field box shadow (single segment) */
	--component-date-segment-border-radius:			var(--component-segmented-segment-border-radius);			/* date field border radius (single segment) */
	--component-date-segment-border-size:			var(--component-segmented-segment-border-size);			/* date field border size (single segment) */
	--component-date-segment-border-color:			var(--component-segmented-segment-border-color);/* date field border color (single segment) */
	--component-date-segment-padding:				var(--component-segmented-segment-padding);	/* date field padding (single segment) */
	--component-date-separator-font-size:			var(--component-segmented-separator-font-size);/* date field font size (separators) */
	--component-date-separator-font-weight:			var(--component-segmented-separator-font-weight);/* date field font weight (separators) */
	--component-date-separator-font-style:			var(--component-segmented-separator-font-style);/* date field font style (separators) */
	--component-date-separator-line-height: 		var(--component-segmented-separator-line-height);/* date field line height (separators) */
	--component-date-separator-text-color: 			var(--component-segmented-separator-text-color);/* date field text color (separators) */
	--component-date-separator-background-color:	var(--component-segmented-separator-background-color);/* date field background color (separators) */
	--component-date-separator-shadow:				var(--component-segmented-separator-shadow);/* date field box shadow (separators) */
	--component-date-separator-border-radius:		var(--component-segmented-separator-border-radius);			/* date field border radius (separators) */
	--component-date-separator-border-size:			var(--component-segmented-separator-border-size);			/* date field border size (separators) */
	--component-date-separator-border-color:		var(--component-segmented-separator-border-color);/* date field border color (separators) */
	--component-date-separator-padding:				var(--component-segmented-separator-padding);/* date field padding (separators) */
	--component-date-separator-first-padding:		var(--component-segmented-separator-first-padding);/* date field padding (first separator) */
	--component-date-separator-last-padding:		var(--component-segmented-separator-last-padding);/* date field padding (last separator) */

	--component-date-important-font-weight:			var(--component-segmented-important-font-weight);/* important: date field font weight */
	--component-date-important-font-style:			var(--component-segmented-important-font-style);/* important: date field font style */
	--component-date-important-text-color: 			var(--component-segmented-important-text-color);/* important: date field text color */
	--component-date-important-background-color:	var(--component-segmented-important-background-color);/* important: date field background color */
	--component-date-important-shadow:				var(--component-segmented-important-shadow);/* important: date field box shadow */
	--component-date-important-border-size:			var(--component-segmented-important-border-size);/* important: date field border size */
	--component-date-important-border-color:		var(--component-segmented-important-border-color);/* important: date field border color */
	--component-date-important-outline-size:		var(--component-segmented-important-outline-size);/* important: date field outline size */
	--component-date-important-outline-color:		var(--component-segmented-important-outline-color);/* important: date field outline color */
	--component-date-important-outline-offset:		var(--component-segmented-important-outline-offset);/* important: date field outline offset */
	--component-date-important-placeholder-font-weight:var(--component-segmented-important-placeholder-font-weight);/* date- field placeholder font-weight */
	--component-date-important-placeholder-font-size:var(--component-segmented-important-placeholder-font-size);/* date- field placeholder font size */
	--component-date-important-placeholder-color:	var(--component-segmented-important-placeholder-color);/* date- field placeholder color */
	--component-date-important-segment-background-color:var(--component-segmented-important-segment-background-color);/* important: date field background color (single segment) */
	--component-date-important-segment-shadow:		var(--component-segmented-important-segment-shadow);/* important: date field box shadow (single segment) */
	--component-date-important-segment-border-size:	var(--component-segmented-important-segment-border-size);/* important: date field border size (single segment) */
	--component-date-important-segment-border-color:var(--component-segmented-important-segment-border-color);/* important: date field border color (single segment) */
	--component-date-important-separator-font-weight:var(--component-segmented-important-separator-font-weight);/* important: date field font weight (separators) */
	--component-date-important-separator-font-style:var(--component-segmented-important-separator-font-style);/* important: date field font style (separators) */
	--component-date-important-separator-text-color:var(--component-segmented-important-separator-text-color);/* important: date field text color (separators) */
	--component-date-important-separator-background-color:var(--component-segmented-important-separator-background-color);/* important: date field background color (separators) */
	--component-date-important-separator-shadow:	var(--component-segmented-important-separator-shadow);/* important: date field box shadow (separators) */
	--component-date-important-separator-border-size:var(--component-segmented-important-separator-border-size);/* important: date field border size (separators) */
	--component-date-important-separator-border-color:var(--component-segmented-important-separator-border-color);/* important: date field border color (separators) */

	--component-date-required-font-weight:			var(--component-segmented-required-font-weight);/* required: date field font weight */
	--component-date-required-font-style:			var(--component-segmented-required-font-style);/* required: date field font style */
	--component-date-required-text-color: 			var(--component-segmented-required-text-color);/* required: date field text color */
	--component-date-required-background-color:		var(--component-segmented-required-background-color);/* required: date field background color */
	--component-date-required-shadow:				var(--component-segmented-required-shadow);/* required: date field box shadow */
	--component-date-required-border-size:			var(--component-segmented-required-border-size);/* required: date field border size */
	--component-date-required-border-color:			var(--component-segmented-required-border-color);/* required: date field border color */
	--component-date-required-outline-size:			var(--component-segmented-required-outline-size);/* required: date field outline size */
	--component-date-required-outline-color:		var(--component-segmented-required-outline-color);/* required: date field outline color */
	--component-date-required-outline-offset:		var(--component-segmented-required-outline-offset);/* required: date field outline offset */
	--component-date-required-placeholder-font-weight:var(--component-segmented-required-placeholder-font-weight);/* date- field placeholder font-weight */
	--component-date-required-placeholder-font-size:var(--component-segmented-required-placeholder-font-size);/* date- field placeholder font size */
	--component-date-required-placeholder-color:	var(--component-segmented-required-placeholder-color);/* date- field placeholder color */
	--component-date-required-segment-background-color:var(--component-segmented-required-segment-background-color);/* required: date field background color (single segment) */
	--component-date-required-segment-shadow:		var(--component-segmented-required-segment-shadow);/* required: date field box shadow (single segment) */
	--component-date-required-segment-border-size:	var(--component-segmented-required-segment-border-size);/* required: date field border size (single segment) */
	--component-date-required-segment-border-color:	var(--component-segmented-required-segment-border-color);/* required: date field border color (single segment) */
	--component-date-required-separator-font-weight:var(--component-segmented-required-separator-font-weight);/* required: date field font weight (separators) */
	--component-date-required-separator-font-style:	var(--component-segmented-required-separator-font-style);/* required: date field font style (separators) */
	--component-date-required-separator-text-color:	var(--component-segmented-required-separator-text-color);/* required: date field text color (separators) */
	--component-date-required-separator-background-color:var(--component-segmented-required-separator-background-color);/* required: date field background color (separators) */
	--component-date-required-separator-shadow:		var(--component-segmented-required-separator-shadow);/* required: date field box shadow (separators) */
	--component-date-required-separator-border-size:var(--component-segmented-required-separator-border-size);/* required: date field border size (separators) */
	--component-date-required-separator-border-color:var(--component-segmented-required-separator-border-color);/* required: date field border color (separators) */

	--component-date-empty-font-weight:				var(--component-segmented-empty-font-weight);/* empty: date field font weight */
	--component-date-empty-font-style:				var(--component-segmented-empty-font-style);/* empty: date field font style */
	--component-date-empty-text-color: 				var(--component-segmented-empty-text-color);/* empty: date field text color */
	--component-date-empty-background-color:		var(--component-segmented-empty-background-color);/* empty: date field background color */
	--component-date-empty-shadow:					var(--component-segmented-empty-shadow);/* empty: date field box shadow */
	--component-date-empty-border-size:				var(--component-segmented-empty-border-size);/* empty: date field border size */
	--component-date-empty-border-color:			var(--component-segmented-empty-border-color);/* empty: date field border color */
	--component-date-empty-outline-size:			var(--component-segmented-empty-outline-size);/* empty: date field outline size */
	--component-date-empty-outline-color:			var(--component-segmented-empty-outline-color);/* empty: date field outline color */
	--component-date-empty-outline-offset:			var(--component-segmented-empty-outline-offset);/* empty: date field outline offset */
	--component-date-empty-placeholder-font-weight: var(--component-segmented-empty-placeholder-font-weight);/* date- field placeholder font-weight */
	--component-date-empty-placeholder-font-size:	var(--component-segmented-empty-placeholder-font-size);/* date- field placeholder font size */
	--component-date-empty-placeholder-color:		var(--component-segmented-empty-placeholder-color);/* date- field placeholder color */
	--component-date-empty-segment-background-color:var(--component-segmented-empty-segment-background-color);/* empty: date field background color (single segment) */
	--component-date-empty-segment-shadow:			var(--component-segmented-empty-segment-shadow);/* empty: date field box shadow (single segment) */
	--component-date-empty-segment-border-size:		var(--component-segmented-empty-segment-border-size);/* empty: date field border size (single segment) */
	--component-date-empty-segment-border-color:	var(--component-segmented-empty-segment-border-color);/* empty: date field border color (single segment) */
	--component-date-empty-separator-font-weight:	var(--component-segmented-empty-separator-font-weight);/* empty: date field font weight (separators) */
	--component-date-empty-separator-font-style:	var(--component-segmented-empty-separator-font-style);/* empty: date field font style (separators) */
	--component-date-empty-separator-text-color:	var(--component-segmented-empty-separator-text-color);/* empty: date field text color (separators) */
	--component-date-empty-separator-background-color:var(--component-segmented-empty-separator-background-color);/* empty: date field background color (separators) */
	--component-date-empty-separator-shadow:		var(--component-segmented-empty-separator-shadow);/* empty: date field box shadow (separators) */
	--component-date-empty-separator-border-size:	var(--component-segmented-empty-separator-border-size);/* empty: date field border size (separators) */
	--component-date-empty-separator-border-color:	var(--component-segmented-empty-separator-border-color);/* empty: date field border color (separators) */

	--component-date-invalid-font-weight:			var(--component-segmented-invalid-font-weight);/* invalid: date field font weight */
	--component-date-invalid-font-style:			var(--component-segmented-invalid-font-style);/* invalid: date field font style */
	--component-date-invalid-text-color: 			var(--component-segmented-invalid-text-color);/* invalid: date field text color */
	--component-date-invalid-background-color:		var(--component-segmented-invalid-background-color);/* invalid: date field background color */
	--component-date-invalid-shadow:				var(--component-segmented-invalid-shadow);/* invalid: date field box shadow */
	--component-date-invalid-border-size:			var(--component-segmented-invalid-border-size);/* invalid: date field border size */
	--component-date-invalid-border-color:			var(--component-segmented-invalid-border-color);/* invalid: date field border color */
	--component-date-invalid-outline-size:			var(--component-segmented-invalid-outline-size);/* invalid: date field outline size */
	--component-date-invalid-outline-color:			var(--component-segmented-invalid-outline-color);/* invalid: date field outline color */
	--component-date-invalid-outline-offset:		var(--component-segmented-invalid-outline-offset);/* invalid: date field outline offset */
	--component-date-invalid-placeholder-font-weight:var(--component-segmented-invalid-placeholder-font-weight);/* date- field placeholder font-weight */
	--component-date-invalid-placeholder-font-size:	var(--component-segmented-invalid-placeholder-font-size);/* date- field placeholder font size */
	--component-date-invalid-placeholder-color:		var(--component-segmented-invalid-placeholder-color);/* date- field placeholder color */
	--component-date-invalid-segment-background-color:var(--component-segmented-invalid-segment-background-color);/* invalid: date field background color (single segment) */
	--component-date-invalid-segment-shadow:		var(--component-segmented-invalid-segment-shadow);/* invalid: date field box shadow (single segment) */
	--component-date-invalid-segment-border-size:	var(--component-segmented-invalid-segment-border-size);/* invalid: date field border size (single segment) */
	--component-date-invalid-segment-border-color:	var(--component-segmented-invalid-segment-border-color);/* invalid: date field border color (single segment) */
	--component-date-invalid-separator-font-weight:	var(--component-segmented-invalid-separator-font-weight);/* invalid: date field font weight (separators) */
	--component-date-invalid-separator-font-style:	var(--component-segmented-invalid-separator-font-style);/* invalid: date field font style (separators) */
	--component-date-invalid-separator-text-color:	var(--component-segmented-invalid-separator-text-color);/* invalid: date field text color (separators) */
	--component-date-invalid-separator-background-color:var(--component-segmented-invalid-separator-background-color);/* invalid: date field background color (separators) */
	--component-date-invalid-separator-shadow:		var(--component-segmented-invalid-separator-shadow);/* invalid: date field box shadow (separators) */
	--component-date-invalid-separator-border-size:	var(--component-segmented-invalid-separator-border-size);/* invalid: date field border size (separators) */
	--component-date-invalid-separator-border-color:var(--component-segmented-invalid-separator-border-color);/* invalid: date field border color (separators) */

	--component-date-focus-font-weight:				var(--component-segmented-focus-font-weight);/* focus: date field font weight */
	--component-date-focus-font-style:				var(--component-segmented-focus-font-style);/* focus: date field font style */
	--component-date-focus-text-color: 				var(--component-segmented-focus-text-color);/* focus: date field text color */
	--component-date-focus-background-color:		var(--component-segmented-focus-background-color);/* focus: date field background color */
	--component-date-focus-shadow:					var(--component-segmented-focus-shadow);/* focus: date field box shadow */
	--component-date-focus-border-size:				var(--component-segmented-focus-border-size);/* focus: date field border size */
	--component-date-focus-border-color:			var(--component-segmented-focus-border-color);/* focus: date field border color */
	--component-date-focus-outline-size:			var(--component-segmented-focus-outline-size);/* focus: date field outline size */
	--component-date-focus-outline-color:			var(--component-segmented-focus-outline-color);/* focus: date field outline color */
	--component-date-focus-outline-offset:			var(--component-segmented-focus-outline-offset);/* focus: date field outline offset */
	--component-date-focus-placeholder-font-weight:	var(--component-segmented-focus-placeholder-font-weight);/* date- field placeholder font-weight */
	--component-date-focus-placeholder-font-size:	var(--component-segmented-focus-placeholder-font-size);/* date- field placeholder font size */
	--component-date-focus-placeholder-color:		var(--component-segmented-focus-placeholder-color);/* date- field placeholder color */
	--component-date-focus-segment-background-color:var(--component-segmented-focus-segment-background-color);/* focus: date field background color (single segment) */
	--component-date-focus-segment-shadow:			var(--component-segmented-focus-segment-shadow);/* focus: date field box shadow (single segment) */
	--component-date-focus-segment-border-size:		var(--component-segmented-focus-segment-border-size);/* focus: date field border size (single segment) */
	--component-date-focus-segment-border-color:	var(--component-segmented-focus-segment-border-color);/* focus: date field border color (single segment) */
	--component-date-focus-separator-font-weight:	var(--component-segmented-focus-separator-font-weight);/* focus: date field font weight (separators) */
	--component-date-focus-separator-font-style:	var(--component-segmented-focus-separator-font-style);/* focus: date field font style (separators) */
	--component-date-focus-separator-text-color:	var(--component-segmented-focus-separator-text-color);/* focus: date field text color (separators) */
	--component-date-focus-separator-background-color:var(--component-segmented-focus-separator-background-color);/* focus: date field background color (separators) */
	--component-date-focus-separator-shadow:		var(--component-segmented-focus-separator-shadow);/* focus: date field box shadow (separators) */
	--component-date-focus-separator-border-size:	var(--component-segmented-focus-separator-border-size);/* focus: date field border size (separators) */
	--component-date-focus-separator-border-color:	var(--component-segmented-focus-separator-border-color);/* focus: date field border color (separators) */

	--component-date-disabled-font-weight:			var(--component-segmented-disabled-font-weight);/* disabled: date field font weight */
	--component-date-disabled-font-style:			var(--component-segmented-disabled-font-style);/* disabled: date field font style */
	--component-date-disabled-text-color: 			var(--component-segmented-disabled-text-color);/* disabled: date field text color */
	--component-date-disabled-background-color:		var(--component-segmented-disabled-background-color);/* disabled: date field background color */
	--component-date-disabled-shadow:				var(--component-segmented-disabled-shadow);/* disabled: date field box shadow */
	--component-date-disabled-border-size:			var(--component-segmented-disabled-border-size);/* disabled: date field border size */
	--component-date-disabled-border-color:			var(--component-segmented-disabled-border-color);/* disabled: date field border color */
	--component-date-disabled-outline-size:			var(--component-segmented-disabled-outline-size);/* disabled: date field outline size */
	--component-date-disabled-outline-color:		var(--component-segmented-disabled-outline-color);/* disabled: date field outline color */
	--component-date-disabled-outline-offset:		var(--component-segmented-disabled-outline-offset);/* disabled: date field outline offset */
	--component-date-disabled-placeholder-font-weight:var(--component-segmented-disabled-placeholder-font-weight);/* date- field placeholder font-weight */
	--component-date-disabled-placeholder-font-size:var(--component-segmented-disabled-placeholder-font-size);/* date- field placeholder font size */
	--component-date-disabled-placeholder-color:	var(--component-segmented-disabled-placeholder-color);/* date- field placeholder color */
	--component-date-disabled-segment-background-color:var(--component-segmented-disabled-segment-background-color);/* disabled: date field background color (single segment) */
	--component-date-disabled-segment-shadow:		var(--component-segmented-disabled-segment-shadow);/* disabled: date field box shadow (single segment) */
	--component-date-disabled-segment-border-size:	var(--component-segmented-disabled-segment-border-size);/* disabled: date field border size (single segment) */
	--component-date-disabled-segment-border-color:	var(--component-segmented-disabled-segment-border-color);/* disabled: date field border color (single segment) */
	--component-date-disabled-separator-font-weight:var(--component-segmented-disabled-separator-font-weight);/* disabled: date field font weight (separators) */
	--component-date-disabled-separator-font-style:	var(--component-segmented-disabled-separator-font-style);/* disabled: date field font style (separators) */
	--component-date-disabled-separator-text-color:	var(--component-segmented-disabled-separator-text-color);/* disabled: date field text color (separators) */
	--component-date-disabled-separator-background-color:var(--component-segmented-disabled-separator-background-color);/* disabled: date field background color (separators) */
	--component-date-disabled-separator-shadow:		var(--component-segmented-disabled-separator-shadow);/* disabled: date field box shadow (separators) */
	--component-date-disabled-separator-border-size:var(--component-segmented-disabled-separator-border-size);/* disabled: date field border size (separators) */
	--component-date-disabled-separator-border-color:var(--component-segmented-disabled-separator-border-color);/* disabled: date field border color (separators) */

	--component-date-addon-padding:					var(--component-segmented-addon-padding);/* date field addon padding */
	--component-date-addon-width:					var(--component-segmented-addon-width);	/* date field addon width */
	--component-date-addon-font:					var(--component-segmented-addon-font);/* date field addon font family */
	--component-date-addon-font-size:				var(--component-segmented-addon-font-size);/* date field addon font size */
	--component-date-addon-font-weight:				var(--component-segmented-addon-font-weight);/* date field addon font weight */
	--component-date-addon-font-style:				var(--component-segmented-addon-font-style);/* date field addon font style */
	--component-date-addon-line-height: 			var(--component-segmented-addon-line-height);/* date field addon line height */
	--component-date-addon-text-color: 				var(--component-segmented-addon-text-color);/* date field addon text color */
	--component-date-addon-background-color:		var(--component-segmented-addon-background-color);/* date field addon background color */

	--component-date-addon-important-font-weight: 	var(--component-segmented-addon-important-font-weight);/* important: date field addon font weight */
	--component-date-addon-important-font-style: 	var(--component-segmented-addon-important-font-style);/* important: date field addon font style */
	--component-date-addon-important-text-color: 	var(--component-segmented-addon-important-text-color);/* important: date field addon text color */
	--component-date-addon-important-background-color:var(--component-segmented-addon-important-background-color);/* important: date field addon background color */

	--component-date-addon-required-font-weight: 	var(--component-segmented-addon-required-font-weight);/* required: date field addon font weight */
	--component-date-addon-required-font-style: 	var(--component-segmented-addon-required-font-style);/* required: date field addon font style */
	--component-date-addon-required-text-color: 	var(--component-segmented-addon-required-text-color);/* required: date field addon text color */
	--component-date-addon-required-background-color:var(--component-segmented-addon-required-background-color);/* required: date field addon background color */

	--component-date-addon-empty-font-weight: 		var(--component-segmented-addon-empty-font-weight);/* empty: date field addon font weight */
	--component-date-addon-empty-font-style: 		var(--component-segmented-addon-empty-font-style);/* empty: date field addon font style */
	--component-date-addon-empty-text-color: 		var(--component-segmented-addon-empty-text-color);/* empty: date field addon text color */
	--component-date-addon-empty-background-color: 	var(--component-segmented-addon-empty-background-color);/* empty: date field addon background color */

	--component-date-addon-invalid-font-weight: 	var(--component-segmented-addon-invalid-font-weight);/* invalid: date field addon font weight */
	--component-date-addon-invalid-font-style:		var(--component-segmented-addon-invalid-font-style);/* invalid: date field addon font style */
	--component-date-addon-invalid-text-color: 		var(--component-segmented-addon-invalid-text-color);/* invalid: date field addon text color */
	--component-date-addon-invalid-background-color:var(--component-segmented-addon-invalid-background-color);/* invalid: date field addon background color */

	--component-date-addon-focus-font-weight: 		var(--component-segmented-addon-focus-font-weight);/* focus: date field addon font weight */
	--component-date-addon-focus-font-style: 		var(--component-segmented-addon-focus-font-style);/* focus: date field addon font style */
	--component-date-addon-focus-text-color: 		var(--component-segmented-addon-focus-text-color);/* focus: date field addon text color */
	--component-date-addon-focus-background-color:	var(--component-segmented-addon-focus-background-color);/* focus: date field addon background color */

	--component-date-addon-disabled-font-weight: 	var(--component-segmented-addon-disabled-font-weight);/* disabled: date field addon font weight */
	--component-date-addon-disabled-font-style: 	var(--component-segmented-addon-disabled-font-style);/* disabled: date field addon font style */
	--component-date-addon-disabled-text-color: 	var(--component-segmented-addon-disabled-text-color);/* disabled: date field addon text color */
	--component-date-addon-disabled-background-color:var(--component-segmented-addon-disabled-background-color);/* disabled: date field addon background color */

	--component-date-day-width: 					20px;		/* date field day/month fields width */
	--component-date-year-width: 					40px;		/* date field year field width */
	--component-date-time-width: 					20px;		/* date field time fields width */

	/* checkbox field */
	--component-checkbox-item-align: 				var(--component-item-align);/* checkbox field vertical alignment (align-self) */
	--component-checkbox-margin:					0 0 15px 0;/* checkbox field margin */
	--component-checkbox-padding:					var(--component-padding);/* checkbox field padding */
	--component-checkbox-font:						var(--component-font);/* checkbox field font family */
	--component-checkbox-font-size:					var(--component-font-size);/* checkbox field font size */
	--component-checkbox-font-weight:				var(--component-font-weight);/* checkbox field font weight */
	--component-checkbox-font-style:				var(--component-font-style);/* checkbox field font style */
	--component-checkbox-line-height: 				1.3;/* checkbox field line height */
	--component-checkbox-text-color: 				var(--component-text-color);/* checkbox field text color */
	--component-checkbox-outline-size:				var(--component-outline-size);/* checkbox field outline size */
	--component-checkbox-outline-color:				var(--component-outline-color);/* checkbox field outline color */
	--component-checkbox-outline-offset:			var(--component-outline-offset);/* checkbox field outline offset */

	--component-checkbox-important-font-weight:		var(--component-important-font-weight);/* important: checkbox field font weight */
	--component-checkbox-important-font-style:		var(--component-important-font-style);/* important: checkbox field font style */
	--component-checkbox-important-text-color: 		var(--component-important-text-color);/* important: checkbox field text color */
	--component-checkbox-important-outline-size:	var(--component-important-outline-size);/* important: checkbox field outline size */
	--component-checkbox-important-outline-color:	var(--component-important-outline-color);/* important: checkbox field outline color */
	--component-checkbox-important-outline-offset:	var(--component-important-outline-offset);/* important: checkbox field outline offset */

	--component-checkbox-required-font-weight:		var(--component-required-font-weight);/* required: checkbox field font weight */
	--component-checkbox-required-font-style:		var(--component-required-font-style);/* required: checkbox field font style */
	--component-checkbox-required-text-color: 		var(--component-required-text-color);/* required: checkbox field text color */
	--component-checkbox-required-outline-size:		var(--component-required-outline-size);/* required: checkbox field outline size */
	--component-checkbox-required-outline-color:	var(--component-required-outline-color);/* required: checkbox field outline color */
	--component-checkbox-required-outline-offset:	var(--component-required-outline-offset);/* required: checkbox field outline offset */

	--component-checkbox-empty-font-weight:			var(--component-empty-font-weight);/* empty: checkbox field font weight */
	--component-checkbox-empty-font-style:			var(--component-empty-font-style);/* empty: checkbox field font style */
	--component-checkbox-empty-text-color: 			var(--component-empty-text-color);/* empty: checkbox field text color */
	--component-checkbox-empty-outline-size:		var(--component-empty-outline-size);/* empty: checkbox field outline size */
	--component-checkbox-empty-outline-color:		var(--component-empty-outline-color);/* empty: checkbox field outline color */
	--component-checkbox-empty-outline-offset:		var(--component-empty-outline-offset);/* empty: checkbox field outline offset */

	--component-checkbox-invalid-font-weight:		var(--component-invalid-font-weight);/* invalid: checkbox field font weight */
	--component-checkbox-invalid-font-style:		var(--component-invalid-font-style);/* invalid: checkbox field font style */
	--component-checkbox-invalid-text-color: 		var(--component-invalid-text-color);/* invalid: checkbox field text color */
	--component-checkbox-invalid-outline-size:		var(--component-invalid-outline-size);/* invalid: checkbox field outline size */
	--component-checkbox-invalid-outline-color:		var(--component-invalid-outline-color);/* invalid: checkbox field outline color */
	--component-checkbox-invalid-outline-offset:	var(--component-invalid-outline-offset);/* invalid: checkbox field outline offset */

	--component-checkbox-focus-font-weight:			var(--component-focus-font-weight);/* focus: checkbox field font weight */
	--component-checkbox-focus-font-style:			var(--component-focus-font-style);/* focus: checkbox field font style */
	--component-checkbox-focus-text-color: 			var(--component-focus-text-color);/* focus: checkbox field text color */
	--component-checkbox-focus-outline-size:		var(--component-focus-outline-size);/* focus: checkbox field outline size */
	--component-checkbox-focus-outline-color:		var(--component-focus-outline-color);/* focus: checkbox field outline color */
	--component-checkbox-focus-outline-offset:		var(--component-focus-outline-offset);/* focus: checkbox field outline offset */

	--component-checkbox-disabled-font-weight:		var(--component-disabled-font-weight);/* disabled: checkbox field font weight */
	--component-checkbox-disabled-font-style:		var(--component-disabled-font-style);/* disabled: checkbox field font style */
	--component-checkbox-disabled-text-color: 		var(--component-disabled-text-color);/* disabled: checkbox field text color */
	--component-checkbox-disabled-outline-size:		var(--component-disabled-outline-size);/* disabled: checkbox field outline size */
	--component-checkbox-disabled-outline-color:	var(--component-disabled-outline-color);/* disabled: checkbox field outline color */
	--component-checkbox-disabled-outline-offset:	var(--component-disabled-outline-offset);/* disabled: checkbox field outline offset */

	--component-checkbox-label-padding:				25px;		/* checkbox field label left padding */
	--component-checkbox-box-size:					20px;		/* checkbox box size */
	--component-checkbox-box-border-size:			2px;		/* checkbox box border radius */
	--component-checkbox-box-border-radius:			4px;		/* checkbox box border radius */
	--component-checkbox-box-color:					#b3b3b3;	/* checkbox box color */
	--component-checkbox-box-background-color:		white;		/* checkbox box inner background color */
	--component-checkbox-dot-size:					10px;		/* checkbox dot size */
	--component-checkbox-dot-border-radius:			2px;		/* checkbox dot border radius */
	--component-checkbox-dot-color:					#002d72;	/* checkbox dot color */
	--component-checkbox-dot-speed:					.1s;		/* checkbox dot animation speed */

	--component-checkbox-box-important-color:		var(--component-important-border-color);/* checkbox box important color */
	--component-checkbox-box-important-background-color:var(--component-checkbox-box-background-color);/* checkbox box important inner background color */
	--component-checkbox-dot-important-color:		var(--component-checkbox-dot-color);/* checkbox dot important color */
	--component-checkbox-box-required-color:		var(--component-checkbox-box-color);/* checkbox box required color */
	--component-checkbox-box-required-background-color:var(--component-checkbox-box-background-color);/* checkbox box required inner background color */
	--component-checkbox-dot-required-color:		var(--component-checkbox-dot-color);/* checkbox dot required color */
	--component-checkbox-box-empty-color:			var(--component-checkbox-box-color);/* checkbox box empty color */
	--component-checkbox-box-empty-background-color:var(--component-checkbox-box-background-color);/* checkbox box empty inner background color */
	--component-checkbox-dot-empty-color:			var(--component-checkbox-dot-color);/* checkbox dot empty color */
	--component-checkbox-box-invalid-color:			var(--component-checkbox-box-color);/* checkbox box invalid color */
	--component-checkbox-box-invalid-background-color:var(--component-checkbox-box-background-color);/* checkbox box invalid inner background color */
	--component-checkbox-dot-invalid-color:			var(--component-checkbox-dot-color);/* checkbox dot invalid color */
	--component-checkbox-box-focus-color:			var(--component-checkbox-box-color);/* checkbox box focus color */
	--component-checkbox-box-focus-background-color:var(--component-checkbox-box-background-color);/* checkbox box focus inner background color */
	--component-checkbox-dot-focus-color:			var(--component-checkbox-dot-color);/* checkbox dot focus color */
	--component-checkbox-box-disabled-color:		#dddddd;	/* checkbox box disabled color */
	--component-checkbox-box-disabled-background-color:white;	/* checkbox box disabled inner background color */
	--component-checkbox-dot-disabled-color:		#dddddd;	/* checkbox dot disabled color */

	/* radio field */
	--component-radio-item-align: 					var(--component-item-align);/* radio field vertical alignment (align-self) */
	--component-radio-margin:						0 0 15px 0;	/* radio field margin */
	--component-radio-option-margin:				4px;		/* radio field option top/bottom margin */
	--component-radio-padding:						var(--component-padding);/* radio field padding */
	--component-radio-font:							var(--component-font);/* radio field font family */
	--component-radio-font-size:					var(--component-font-size);/* radio field font size */
	--component-radio-font-weight:					var(--component-font-weight);/* radio field font weight */
	--component-radio-font-style:					var(--component-font-style);/* radio field font style */
	--component-radio-line-height: 					1.3;/* radio field line height */
	--component-radio-text-color: 					var(--component-text-color);/* radio field text color */
	--component-radio-outline-size:					var(--component-outline-size);/* radio field outline size */
	--component-radio-outline-color:				var(--component-outline-color);/* radio field outline color */
	--component-radio-outline-offset:				var(--component-outline-offset);/* radio field outline offset */

	--component-radio-important-font-weight:		var(--component-important-font-weight);/* important: radio field font weight */
	--component-radio-important-font-style:			var(--component-important-font-style);/* important: radio field font style */
	--component-radio-important-text-color: 		var(--component-important-text-color);/* important: radio field text color */
	--component-radio-important-outline-size:		var(--component-important-outline-size);/* important: radio field outline size */
	--component-radio-important-outline-color:		var(--component-important-outline-color);/* important: radio field outline color */
	--component-radio-important-outline-offset:		var(--component-important-outline-offset);/* important: radio field outline offset */

	--component-radio-required-font-weight:			var(--component-required-font-weight);/* required: radio field font weight */
	--component-radio-required-font-style:			var(--component-required-font-style);/* required: radio field font style */
	--component-radio-required-text-color: 			var(--component-required-text-color);/* required: radio field text color */
	--component-radio-required-outline-size:		var(--component-required-outline-size);/* required: radio field outline size */
	--component-radio-required-outline-color:		var(--component-required-outline-color);/* required: radio field outline color */
	--component-radio-required-outline-offset:		var(--component-required-outline-offset);/* required: radio field outline offset */

	--component-radio-empty-font-weight:			var(--component-empty-font-weight);/* empty: radio field font weight */
	--component-radio-empty-font-style:				var(--component-empty-font-style);/* empty: radio field font style */
	--component-radio-empty-text-color: 			var(--component-empty-text-color);/* empty: radio field text color */
	--component-radio-empty-outline-size:			var(--component-empty-outline-size);/* empty: radio field outline size */
	--component-radio-empty-outline-color:			var(--component-empty-outline-color);/* empty: radio field outline color */
	--component-radio-empty-outline-offset:			var(--component-empty-outline-offset);/* empty: radio field outline offset */

	--component-radio-invalid-font-weight:			var(--component-invalid-font-weight);/* invalid: radio field font weight */
	--component-radio-invalid-font-style:			var(--component-invalid-font-style);/* invalid: radio field font style */
	--component-radio-invalid-text-color: 			var(--component-invalid-text-color);/* invalid: radio field text color */
	--component-radio-invalid-outline-size:			var(--component-invalid-outline-size);/* invalid: radio field outline size */
	--component-radio-invalid-outline-color:		var(--component-invalid-outline-color);/* invalid: radio field outline color */
	--component-radio-invalid-outline-offset:		var(--component-invalid-outline-offset);/* invalid: radio field outline offset */

	--component-radio-focus-font-weight:			var(--component-focus-font-weight);/* focus: radio field font weight */
	--component-radio-focus-font-style:				var(--component-focus-font-style);/* focus: radio field font style */
	--component-radio-focus-text-color: 			var(--component-focus-text-color);/* focus: radio field text color */
	--component-radio-focus-outline-size:			var(--component-focus-outline-size);/* focus: radio field outline size */
	--component-radio-focus-outline-color:			var(--component-focus-outline-color);/* focus: radio field outline color */
	--component-radio-focus-outline-offset:			var(--component-focus-outline-offset);/* focus: radio field outline offset */

	--component-radio-disabled-font-weight:			var(--component-disabled-font-weight);/* disabled: radio field font weight */
	--component-radio-disabled-font-style:			var(--component-disabled-font-style);/* disabled: radio field font style */
	--component-radio-disabled-text-color: 			var(--component-disabled-text-color);/* disabled: radio field text color */
	--component-radio-disabled-outline-size:		var(--component-disabled-outline-size);/* disabled: radio field outline size */
	--component-radio-disabled-outline-color:		var(--component-disabled-outline-color);/* disabled: radio field outline color */
	--component-radio-disabled-outline-offset:		var(--component-disabled-outline-offset);/* disabled: radio field outline offset */

	--component-radio-label-padding:				25px;		/* radio field label left padding */
	--component-radio-box-size:						20px;		/* radio box size */
	--component-radio-box-border-size:				2px;		/* radio box border radius */
	--component-radio-box-border-radius:			10px;		/* radio box border radius */
	--component-radio-box-color:					#b3b3b3;	/* radio box color */
	--component-radio-box-background-color:			white;		/* radio box inner background color */
	--component-radio-dot-size:						10px;		/* radio dot size */
	--component-radio-dot-border-radius:			5px;		/* radio dot border radius */
	--component-radio-dot-color:					#002d72;	/* radio dot color */
	--component-radio-dot-speed:					.1s;		/* radio dot animation speed */
	--component-radio-option-direction:				row;		/* radio option direction (row / column) */
	--component-radio-option-gap:					25px;		/* radio option distance */

	--component-radio-box-important-color:			var(--component-important-border-color);/* radio box important color */
	--component-radio-box-important-background-color:var(--component-radio-box-background-color);/* radio box important inner background color */
	--component-radio-dot-important-color:			var(--component-radio-dot-color);/* radio dot important color */
	--component-radio-box-required-color:			var(--component-radio-box-color);/* radio box required color */
	--component-radio-box-required-background-color:var(--component-radio-box-background-color);/* radio box required inner background color */
	--component-radio-dot-required-color:			var(--component-radio-dot-color);/* radio dot required color */
	--component-radio-box-empty-color:				var(--component-radio-box-color);/* radio box empty color */
	--component-radio-box-empty-background-color:	var(--component-radio-box-background-color);/* radio box empty inner background color */
	--component-radio-dot-empty-color:				var(--component-radio-dot-color);/* radio dot empty color */
	--component-radio-box-invalid-color:			var(--component-radio-box-color);/* radio box invalid color */
	--component-radio-box-invalid-background-color:	var(--component-radio-box-background-color);/* radio box invalid inner background color */
	--component-radio-dot-invalid-color:			var(--component-radio-dot-color);/* radio dot invalid color */
	--component-radio-box-focus-color:				var(--component-radio-box-color);/* radio box focus color */
	--component-radio-box-focus-background-color:	var(--component-radio-box-background-color);/* radio box focus inner background color */
	--component-radio-dot-focus-color:				var(--component-radio-dot-color);/* radio dot focus color */
	--component-radio-box-disabled-color:			#dddddd;	/* radio box disabled color */
	--component-radio-box-disabled-background-color:white;		/* radio box disabled inner background color */
	--component-radio-dot-disabled-color:			#dddddd;	/* radio dot disabled color */

	/* button */
	--component-button-item-align: 					var(--component-item-align);/* button field vertical alignment (align-self) */
	--component-button-margin:						var(--component-margin);/* button field margin */
	--component-button-padding:						var(--component-padding);/* button padding */
	--component-button-font:						var(--component-font);/* button font family */
	--component-button-font-size:					var(--component-font-size);/* button font size */
	--component-button-font-weight:					var(--component-font-weight);/* button font weight */
	--component-button-font-style:					var(--component-font-style);/* button font style */
	--component-button-line-height: 				var(--component-line-height);/* button line height */
	--component-button-text-color: 					white;		/* button text color */
	--component-button-background-color:			#002d72;	/* button background color */
	--component-button-shadow:						var(--component-shadow);/* button box shadow */
	--component-button-border-radius:				var(--component-border-radius);/* button border radius */
	--component-button-border-size:					var(--component-border-size);/* button border size */
	--component-button-border-color:				var(--component-border-color);/* button border color */
	--component-button-outline-size:				var(--component-outline-size);/* button outline size */
	--component-button-outline-color:				var(--component-outline-color);/* button outline color */
	--component-button-outline-offset:				var(--component-outline-offset);/* button outline offset */

	--component-button-disabled-font-weight:		var(--component-disabled-font-weight);/* disabled: button font weight */
	--component-button-disabled-font-style:			var(--component-disabled-font-style);/* disabled: button font style */
	--component-button-disabled-text-color: 		var(--component-disabled-text-color);/* disabled: button text color */
	--component-button-disabled-background-color:	var(--component-disabled-background-color);/* disabled: button background color */
	--component-button-disabled-shadow:				var(--component-disabled-shadow);/* disabled: button box shadow */
	--component-button-disabled-border-size:		var(--component-disabled-border-size);/* disabled: button border size */
	--component-button-disabled-border-color:		var(--component-disabled-border-color);/* disabled: button border color */
	--component-button-disabled-outline-size:		var(--component-disabled-outline-size);/* disabled: button outline size */
	--component-button-disabled-outline-color:		var(--component-disabled-outline-color);/* disabled: button outline color */
	--component-button-disabled-outline-offset:		var(--component-disabled-outline-offset);/* disabled: button outline offset */

	--component-button-focus-font-weight:			var(--component-focus-font-weight);/* focus: button font weight */
	--component-button-focus-font-style:			var(--component-focus-font-style);/* focus: button font style */
	--component-button-focus-text-color: 			white;		/* focus: button text color */
	--component-button-focus-background-color:		#002d72;	/* focus: button background color */
	--component-button-focus-shadow:				none;		/* focus: button box shadow */
	--component-button-focus-border-size:			var(--component-focus-border-size);/* focus: button border size */
	--component-button-focus-border-color:			var(--component-focus-border-color);/* focus: button border color */
	--component-button-focus-outline-size:			var(--component-focus-outline-size);/* focus: button outline size */
	--component-button-focus-outline-color:			var(--component-focus-outline-color);/* focus: button outline color */
	--component-button-focus-outline-offset:		var(--component-focus-outline-offset);/* focus: button outline offset */

	--component-button-hover-font-weight:			var(--component-font-weight);/* hover: button font weight */
	--component-button-hover-font-style:			var(--component-font-style);/* hover: button font style */
	--component-button-hover-text-color: 			white;		/* hover: button text color */
	--component-button-hover-background-color:		#2c84ca;	/* hover: button background color */
	--component-button-hover-shadow:				var(--component-shadow);/* hover: button box shadow */
	--component-button-hover-border-size:			var(--component-border-size);/* hover: button border size */
	--component-button-hover-border-color:			var(--component-border-color);/* hover: button border color */
	--component-button-hover-outline-size:			var(--component-outline-size);/* hover: button outline size */
	--component-button-hover-outline-color:			var(--component-outline-color);/* hover: button outline color */
	--component-button-hover-outline-offset:		var(--component-outline-offset);/* hover: button outline offset */

	--component-button-active-font-weight:			var(--component-font-weight);/* active: button font weight */
	--component-button-active-font-style:			var(--component-font-style);/* active: button font style */
	--component-button-active-text-color: 			white;		/* active: button text color */
	--component-button-active-background-color:		#2c84ca;	/* active: button background color */
	--component-button-active-shadow:				var(--component-shadow);/* active: button box shadow */
	--component-button-active-border-size:			var(--component-border-size);/* active: button border size */
	--component-button-active-border-color:			var(--component-border-color);/* active: button border color */
	--component-button-active-outline-size:			var(--component-outline-size);/* active: button outline size */
	--component-button-active-outline-color:		var(--component-outline-color);/* active: button outline color */
	--component-button-active-outline-offset:		var(--component-outline-offset);/* active: button outline offset */
	--component-button-active-offset-x:				0;			/* active: button offset x */
	--component-button-active-offset-y:				1px;		/* active: button offset y */

	/* primary button */
	--component-button-primary-padding:						var(--component-button-padding);/* primary button padding */
	--component-button-primary-font:						var(--component-button-font);/* primary button font family */
	--component-button-primary-font-size:					var(--component-button-font-size);/* primary button font size */
	--component-button-primary-font-weight:					var(--component-button-font-weight);/* primary button font weight */
	--component-button-primary-font-style:					var(--component-button-font-style);/* primary button font style */
	--component-button-primary-line-height: 				var(--component-button-line-height);/* primary button line height */
	--component-button-primary-text-color: 					white;	/* primary button text color */
	--component-button-primary-background-color:			#002d72;/* primary button background color */
	--component-button-primary-shadow:						var(--component-button-shadow);/* primary button box shadow */
	--component-button-primary-border-radius:				var(--component-button-border-radius);/* primary button border radius */
	--component-button-primary-border-size:					var(--component-button-border-size);/* primary button border size */
	--component-button-primary-border-color:				var(--component-button-border-color);/* primary button border color */
	--component-button-primary-outline-size:				var(--component-button-outline-size);/* primary button outline size */
	--component-button-primary-outline-color:				var(--component-button-outline-color);/* primary button outline color */
	--component-button-primary-outline-offset:				var(--component-button-outline-offset);/* primary button outline offset */

	--component-button-primary-disabled-font-weight:		var(--component-button-disabled-font-weight);/* disabled: primary button font weight */
	--component-button-primary-disabled-font-style:			var(--component-button-disabled-font-style);/* disabled: primary button font style */
	--component-button-primary-disabled-text-color: 		var(--component-button-disabled-text-color);/* disabled: primary button text color */
	--component-button-primary-disabled-background-color:	var(--component-button-disabled-background-color);/* disabled: primary button background color */
	--component-button-primary-disabled-shadow:				var(--component-button-disabled-shadow);/* disabled: primary button box shadow */
	--component-button-primary-disabled-border-size:		var(--component-button-disabled-border-size);/* disabled: primary button border size */
	--component-button-primary-disabled-border-color:		var(--component-button-disabled-border-color);/* disabled: primary button border color */
	--component-button-primary-disabled-outline-size:		var(--component-button-disabled-outline-size);/* disabled: primary button outline size */
	--component-button-primary-disabled-outline-color:		var(--component-button-disabled-outline-color);/* disabled: primary button outline color */
	--component-button-primary-disabled-outline-offset:		var(--component-button-disabled-outline-offset);/* disabled: primary button outline offset */

	--component-button-primary-focus-font-weight:			var(--component-button-focus-font-weight);/* focus: primary button font weight */
	--component-button-primary-focus-font-style:			var(--component-button-focus-font-style);/* focus: primary button font style */
	--component-button-primary-focus-text-color: 			var(--component-button-focus-text-color);/* focus: primary button text color */
	--component-button-primary-focus-background-color:		var(--component-button-focus-background-color);/* focus: primary button background color */
	--component-button-primary-focus-shadow:				var(--component-button-focus-shadow);/* focus: primary button box shadow */
	--component-button-primary-focus-border-size:			var(--component-button-focus-border-size);/* focus: primary button border size */
	--component-button-primary-focus-border-color:			var(--component-button-focus-border-color);/* focus: primary button border color */
	--component-button-primary-focus-outline-size:			var(--component-button-focus-outline-size);/* focus: primary button outline size */
	--component-button-primary-focus-outline-color:			var(--component-button-focus-outline-color);/* focus: primary button outline color */
	--component-button-primary-focus-outline-offset:		var(--component-button-focus-outline-offset);/* focus: primary button outline offset */

	--component-button-primary-hover-font-weight:			var(--component-button-hover-font-weight);/* hover: primary button font weight */
	--component-button-primary-hover-font-style:			var(--component-button-hover-font-style);/* hover: primary button font style */
	--component-button-primary-hover-text-color: 			var(--component-button-hover-text-color);/* hover: primary button text color */
	--component-button-primary-hover-background-color:		var(--component-button-hover-background-color);/* hover: primary button background color */
	--component-button-primary-hover-shadow:				var(--component-button-hover-shadow);/* hover: primary button box shadow */
	--component-button-primary-hover-border-size:			var(--component-button-hover-border-size);/* hover: primary button border size */
	--component-button-primary-hover-border-color:			var(--component-button-hover-border-color);/* hover: primary button border color */
	--component-button-primary-hover-outline-size:			var(--component-button-hover-outline-size);/* hover: primary button outline size */
	--component-button-primary-hover-outline-color:			var(--component-button-hover-outline-color);/* hover: primary button outline color */
	--component-button-primary-hover-outline-offset:		var(--component-button-hover-outline-offset);/* hover: primary button outline offset */

	--component-button-primary-active-font-weight:			var(--component-button-active-font-weight);/* active: primary button font weight */
	--component-button-primary-active-font-style:			var(--component-button-active-font-style);/* active: primary button font style */
	--component-button-primary-active-text-color: 			var(--component-button-active-text-color);/* active: primary button text color */
	--component-button-primary-active-background-color:		var(--component-button-active-background-color);/* active: primary button background color */
	--component-button-primary-active-shadow:				var(--component-button-active-shadow);/* active: primary button box shadow */
	--component-button-primary-active-border-size:			var(--component-button-active-border-size);/* active: primary button border size */
	--component-button-primary-active-border-color:			var(--component-button-active-border-color);/* active: primary button border color */
	--component-button-primary-active-outline-size:			var(--component-button-active-outline-size);/* active: primary button outline size */
	--component-button-primary-active-outline-color:		var(--component-button-active-outline-color);/* active: primary button outline color */
	--component-button-primary-active-outline-offset:		var(--component-button-active-outline-offset);/* active: primary button outline offset */
	--component-button-primary-active-offset-x:				var(--component-button-active-offset-x);/* active: primary button offset x */
	--component-button-primary-active-offset-y:				var(--component-button-active-offset-y);/* active: primary button offset y */

	/* icon button */
	--component-button-icon-item-align: 			var(--component-button-item-align);/* input field vertical alignment (align-self) */
	--component-button-icon-img-padding:			0 0 0 0;	/* icon button image padding (icon top) */
	--component-button-icon-left-img-padding:		0 0 0 0;	/* icon button image padding (icon left) */
	--component-button-icon-text-padding:			4px 0 0 0;	/* icon button text padding (icon top) */
	--component-button-icon-left-text-padding:		0 0 0 0;	/* icon button text padding (icon left) */
	--component-button-icon-padding:				8px 13px 8px 13px;/* icon button padding */
	--component-button-icon-only-padding:			13px 13px 13px 13px;/* icon button padding (no text) */
	--component-button-icon-font:					var(--component-button-font);/* icon button font family */
	--component-button-icon-font-size:				16px;		/* icon button icon font size */
	--component-button-icon-font-weight:			var(--component-button-font-weight);/* icon button font weight */
	--component-button-icon-font-style:				var(--component-button-font-style);/* icon button font style */
	--component-button-icon-color: 					var(--component-button-text-color);/* icon button icon color */
	--component-button-icon-text-font-size:			8px;		/* icon button text font size */
	--component-button-icon-text-font-weight:		var(--component-button-font-weight);/* icon button text font weight */
	--component-button-icon-text-font-style:		var(--component-button-font-style);/* icon button text font style */
	--component-button-icon-text-text-color: 		var(--component-button-text-color);/* icon button text color */
	--component-button-icon-line-height: 			var(--component-button-line-height);/* icon button line height */
	--component-button-icon-background-color:		var(--component-button-background-color);/* icon button background color */
	--component-button-icon-shadow:					var(--component-button-shadow);/* icon button box shadow */
	--component-button-icon-border-radius:			var(--component-button-border-radius);/* icon button border radius */
	--component-button-icon-border-size:			var(--component-button-border-size);/* icon button border size */
	--component-button-icon-border-color:			var(--component-button-border-color);/* icon button border color */
	--component-button-icon-outline-size:			var(--component-button-outline-size);/* icon button outline size */
	--component-button-icon-outline-color:			var(--component-button-outline-color);/* icon button outline color */
	--component-button-icon-outline-offset:			var(--component-button-outline-offset);/* icon button outline offset */

	--component-button-icon-disabled-font-weight:	var(--component-button-disabled-font-weight);/* disabled: icon button font weight */
	--component-button-icon-disabled-font-style:	var(--component-button-disabled-font-style);/* disabled: icon button font style */
	--component-button-icon-disabled-color:		 	var(--component-button-disabled-text-color);/* disabled: icon button icon color */
	--component-button-icon-disabled-text-font-weight:	var(--component-button-disabled-font-weight);/* disabled: icon button text font weight */
	--component-button-icon-disabled-text-font-style:	var(--component-button-disabled-font-style);/* disabled: icon button text font style */
	--component-button-icon-disabled-text-color: 	var(--component-button-disabled-text-color);/* disabled: icon button text color */
	--component-button-icon-disabled-background-color:var(--component-button-disabled-background-color);/* disabled: icon button background color */
	--component-button-icon-disabled-shadow:		var(--component-button-disabled-shadow);/* disabled: icon button box shadow */
	--component-button-icon-disabled-border-size:	var(--component-button-disabled-border-size);/* disabled: icon button border size */
	--component-button-icon-disabled-border-color:	var(--component-button-disabled-border-color);/* disabled: icon button border color */
	--component-button-icon-disabled-outline-size:	var(--component-button-disabled-outline-size);/* disabled: icon button outline size */
	--component-button-icon-disabled-outline-color:	var(--component-button-disabled-outline-color);/* disabled: icon button outline color */
	--component-button-icon-disabled-outline-offset:var(--component-button-disabled-outline-offset);/* disabled: icon button outline offset */

	--component-button-icon-focus-font-weight:		var(--component-button-focus-font-weight);/* focus: icon button font weight */
	--component-button-icon-focus-font-style:		var(--component-button-focus-font-style);/* focus: icon button font style */
	--component-button-icon-focus-color: 			var(--component-button-focus-text-color);/* focus: icon button icon color */
	--component-button-icon-focus-text-font-weight:	var(--component-button-focus-font-weight);/* focus: icon button text font weight */
	--component-button-icon-focus-text-font-style:	var(--component-button-focus-font-style);/* focus: icon button text font style */
	--component-button-icon-focus-text-color: 		var(--component-button-focus-text-color);/* focus: icon button text color */
	--component-button-icon-focus-background-color:	var(--component-button-focus-background-color);/* focus: icon button background color */
	--component-button-icon-focus-shadow:			var(--component-button-focus-shadow);/* focus: icon button box shadow */
	--component-button-icon-focus-border-size:		var(--component-button-focus-border-size);/* focus: icon button border size */
	--component-button-icon-focus-border-color:		var(--component-button-focus-border-color);/* focus: icon button border color */
	--component-button-icon-focus-outline-size:		var(--component-button-focus-outline-size);/* focus: icon button outline size */
	--component-button-icon-focus-outline-color:	var(--component-button-focus-outline-color);/* focus: icon button outline color */
	--component-button-icon-focus-outline-offset:	var(--component-button-focus-outline-offset);/* focus: icon button outline offset */

	--component-button-icon-hover-font-weight:		var(--component-button-hover-font-weight);/* hover: icon button font weight */
	--component-button-icon-hover-font-style:		var(--component-button-hover-font-style);/* hover: icon button font style */
	--component-button-icon-hover-color: 			var(--component-button-hover-text-color);/* hover: icon button text color */
	--component-button-icon-hover-text-font-weight:	var(--component-button-hover-font-weight);/* hover: icon button text font weight */
	--component-button-icon-hover-text-font-style:	var(--component-button-hover-font-style);/* hover: icon button text font style */
	--component-button-icon-hover-text-color: 		var(--component-button-hover-text-color);/* hover: icon button text color */
	--component-button-icon-hover-background-color:	var(--component-button-hover-background-color);/* hover: icon button background color */
	--component-button-icon-hover-shadow:			var(--component-button-hover-shadow);/* hover: icon button box shadow */
	--component-button-icon-hover-border-size:		var(--component-button-hover-border-size);/* hover: icon button border size */
	--component-button-icon-hover-border-color:		var(--component-button-hover-border-color);/* hover: icon button border color */
	--component-button-icon-hover-outline-size:		var(--component-button-hover-outline-size);/* hover: icon button outline size */
	--component-button-icon-hover-outline-color:	var(--component-button-hover-outline-color);/* hover: icon button outline color */
	--component-button-icon-hover-outline-offset:	var(--component-button-hover-outline-offset);/* hover: icon button outline offset */

	--component-button-icon-active-font-weight:		var(--component-button-active-font-weight);/* active: icon button font weight */
	--component-button-icon-active-font-style:		var(--component-button-active-font-style);/* active: icon button font style */
	--component-button-icon-active-color: 			var(--component-button-active-text-color);/* active: icon button icon color */
	--component-button-icon-active-text-font-weight: var(--component-button-active-font-weight);/* active: icon button text font weight */
	--component-button-icon-active-text-font-style:	var(--component-button-active-font-style);/* active: icon button text font style */
	--component-button-icon-active-text-color: 		var(--component-button-active-text-color);/* active: icon button text color */
	--component-button-icon-active-background-color: var(--component-button-active-background-color);/* active: icon button background color */
	--component-button-icon-active-shadow:			var(--component-button-active-shadow);/* active: icon button box shadow */
	--component-button-icon-active-border-size:		var(--component-button-active-border-size);/* active: icon button border size */
	--component-button-icon-active-border-color:	var(--component-button-active-border-color);/* active: icon button border color */
	--component-button-icon-active-outline-size:	var(--component-button-active-outline-size);/* active: icon button outline size */
	--component-button-icon-active-outline-color:	var(--component-button-active-outline-color);/* active: icon button outline color */
	--component-button-icon-active-outline-offset:	var(--component-button-active-outline-offset);/* active: icon button outline offset */
	--component-button-icon-active-offset-x:		var(--component-button-active-offset-x);/* active: icon button offset x */
	--component-button-icon-active-offset-y:		var(--component-button-active-offset-y);/* active: icon button offset y */

	--component-button-context-width: 				90px;		/* context icon button width */
	--component-button-context-height: 				90px;		/* context icon button height */
	--component-button-context-img-padding:			var(--component-button-icon-img-padding);	/* context icon button image padding (icon top) */
	--component-button-context-left-img-padding:	var(--component-button-icon-left-img-padding);	/* context icon button image padding (icon left) */
	--component-button-context-text-padding:		10px 0 0 0;	/* context icon button text padding (icon top) */
	--component-button-context-left-text-padding:	var(--component-button-icon-left-text-padding);	/* context icon button text padding (icon left) */
	--component-button-context-padding:				13px 13px 13px 13px;/* context icon button padding */
	--component-button-context-font-size:			24px;		/* context icon button icon font size */
	--component-button-context-text-font-size:		14px;		/* context icon button text font size */

	--component-button-function-width: 				120px;		/* function icon button width */
	--component-button-function-height: 			120px;		/* function icon button height */
	--component-button-function-img-padding:		var(--component-button-context-img-padding);	/* function icon button image padding (icon top) */
	--component-button-function-left-img-padding:	var(--component-button-context-left-img-padding);/* function icon button image padding (icon left) */
	--component-button-function-text-padding:		var(--component-button-context-text-padding);	/* function icon button text padding (icon top) */
	--component-button-function-left-text-padding:	var(--component-button-context-left-text-padding);/* function icon button text padding (icon left) */
	--component-button-function-padding:			var(--component-button-context-padding);		/* function icon button padding */
	--component-button-function-font-size:			45px;		/* function icon button icon font size */
	--component-button-function-text-font-size:		var(--component-button-context-text-font-size);	/* function icon button text font size */

	/* number plate field */
	--component-numberplate-item-align: 			var(--component-item-align);/* numberplate field vertical alignment (align-self) */
	--component-numberplate-margin:					var(--component-margin);/* numberplate field margin */
	--component-numberplate-width: 					180px;		/* numberplate field input field width */
	--component-numberplate-gap: 					20px;		/* numberplate field input - selector - gap width */
	--component-numberplate-padding:				10px 15px 10px 20px;/* numberplate field input padding */
	--component-numberplate-font:					"NumberPlate",sans-serif;/* numberplate field input font family */
	--component-numberplate-font-size:				20px;		/* numberplate field input font size */
	--component-numberplate-font-weight:			var(--component-font-weight);/* numberplate field font weight */
	--component-numberplate-font-style:				var(--component-font-style);/* numberplate field font style */
	--component-numberplate-line-height: 			var(--component-line-height);/* numberplate field line height */
	--component-numberplate-text-color: 			var(--component-text-color);/* numberplate field text color */
	--component-numberplate-background-color:		var(--component-background-color);/* numberplate field background color */
	--component-numberplate-shadow:					var(--component-shadow);/* numberplate field box shadow */
	--component-numberplate-border-radius:			var(--component-border-radius);/* numberplate field border radius */
	--component-numberplate-border-size:			2px;		/* numberplate field border size */
	--component-numberplate-border-color:			black;		/* numberplate field border color */
	--component-numberplate-outline-size:			var(--component-outline-size);/* numberplate field outline size */
	--component-numberplate-outline-color:			var(--component-outline-color);/* numberplate field outline color */
	--component-numberplate-outline-offset:			var(--component-outline-offset);/* numberplate field outline offset */

	--component-numberplate-important-font-weight:		var(--component-numberplate-font-weight);/* important: numberplate field font weight */
	--component-numberplate-important-font-style:		var(--component-numberplate-font-style);/* important: numberplate field font style */
	--component-numberplate-important-text-color: 		var(--component-important-text-color);/* important: numberplate field text color */
	--component-numberplate-important-background-color:	var(--component-important-background-color);/* important: numberplate field background color */
	--component-numberplate-important-shadow:			var(--component-important-shadow);/* important: numberplate field box shadow */
	--component-numberplate-important-border-size:		var(--component-important-border-size);/* important: numberplate field border size */
	--component-numberplate-important-border-color:		var(--component-important-border-color);/* important: numberplate field border color */
	--component-numberplate-important-outline-size:		var(--component-important-outline-size);/* important: numberplate field outline size */
	--component-numberplate-important-outline-color:	var(--component-important-outline-color);/* important: numberplate field outline color */
	--component-numberplate-important-outline-offset:	var(--component-important-outline-offset);/* important: numberplate field outline offset */

	--component-numberplate-required-font-weight:		var(--component-numberplate-font-weight);/* required: numberplate field font weight */
	--component-numberplate-required-font-style:		var(--component-numberplate-font-style);/* required: numberplate field font style */
	--component-numberplate-required-text-color: 		var(--component-required-text-color);/* required: numberplate field text color */
	--component-numberplate-required-background-color:	var(--component-required-background-color);/* required: numberplate field background color */
	--component-numberplate-required-shadow:			var(--component-required-shadow);/* required: numberplate field box shadow */
	--component-numberplate-required-border-size:		var(--component-required-border-size);/* required: numberplate field border size */
	--component-numberplate-required-border-color:		var(--component-required-border-color);/* required: numberplate field border color */
	--component-numberplate-required-outline-size:		var(--component-required-outline-size);/* required: numberplate field outline size */
	--component-numberplate-required-outline-color:		var(--component-required-outline-color);/* required: numberplate field outline color */
	--component-numberplate-required-outline-offset:	var(--component-required-outline-offset);/* required: numberplate field outline offset */

	--component-numberplate-empty-font-weight:		var(--component-numberplate-font-weight);/* empty: numberplate field font weight */
	--component-numberplate-empty-font-style:		var(--component-numberplate-font-style);/* empty: numberplate field font style */
	--component-numberplate-empty-text-color: 		var(--component-empty-text-color);/* empty: numberplate field text color */
	--component-numberplate-empty-background-color:	var(--component-empty-background-color);/* empty: numberplate field background color */
	--component-numberplate-empty-shadow:			var(--component-empty-shadow);/* empty: numberplate field box shadow */
	--component-numberplate-empty-border-size:		var(--component-empty-border-size);/* empty: numberplate field border size */
	--component-numberplate-empty-border-color:		var(--component-empty-border-color);/* empty: numberplate field border color */
	--component-numberplate-empty-outline-size:		var(--component-empty-outline-size);/* empty: numberplate field outline size */
	--component-numberplate-empty-outline-color:	var(--component-empty-outline-color);/* empty: numberplate field outline color */
	--component-numberplate-empty-outline-offset:	var(--component-empty-outline-offset);/* empty: numberplate field outline offset */

	--component-numberplate-invalid-font-weight:	var(--component-numberplate-font-weight);/* invalid: numberplate field font weight */
	--component-numberplate-invalid-font-style:		var(--component-numberplate-font-style);/* invalid: numberplate field font style */
	--component-numberplate-invalid-text-color: 	var(--component-invalid-text-color);/* invalid: numberplate field text color */
	--component-numberplate-invalid-background-color:var(--component-invalid-background-color);/* invalid: numberplate field background color */
	--component-numberplate-invalid-shadow:			var(--component-invalid-shadow);/* invalid: numberplate field box shadow */
	--component-numberplate-invalid-border-size:	var(--component-invalid-border-size);/* invalid: numberplate field border size */
	--component-numberplate-invalid-border-color:	var(--component-invalid-border-color);/* invalid: numberplate field border color */
	--component-numberplate-invalid-outline-size:	var(--component-invalid-outline-size);/* invalid: numberplate field outline size */
	--component-numberplate-invalid-outline-color:	var(--component-invalid-outline-color);/* invalid: numberplate field outline color */
	--component-numberplate-invalid-outline-offset:	var(--component-invalid-outline-offset);/* invalid: numberplate field outline offset */

	--component-numberplate-focus-font-weight:		var(--component-numberplate-font-weight);/* focus: numberplate field font weight */
	--component-numberplate-focus-font-style:		var(--component-numberplate-font-style);/* focus: numberplate field font style */
	--component-numberplate-focus-text-color: 		var(--component-focus-text-color);/* focus: numberplate field text color */
	--component-numberplate-focus-background-color:	var(--component-focus-background-color);/* focus: numberplate field background color */
	--component-numberplate-focus-shadow:			var(--component-focus-shadow);/* focus: numberplate field box shadow */
	--component-numberplate-focus-border-size:		var(--component-focus-border-size);/* focus: numberplate field border size */
	--component-numberplate-focus-border-color:		var(--component-focus-border-color);/* focus: numberplate field border color */
	--component-numberplate-focus-outline-size:		var(--component-focus-outline-size);/* focus: numberplate field outline size */
	--component-numberplate-focus-outline-color:	var(--component-focus-outline-color);/* focus: numberplate field outline color */
	--component-numberplate-focus-outline-offset:	var(--component-focus-outline-offset);/* focus: numberplate field outline offset */

	--component-numberplate-disabled-font-weight:	var(--component-numberplate-font-weight);/* disabled: numberplate field font weight */
	--component-numberplate-disabled-font-style:	var(--component-numberplate-font-style);/* disabled: numberplate field font style */
	--component-numberplate-disabled-text-color: 	var(--component-disabled-text-color);/* disabled: numberplate field text color */
	--component-numberplate-disabled-background-color:var(--component-disabled-background-color);/* disabled: numberplate field background color */
	--component-numberplate-disabled-shadow:		var(--component-disabled-shadow);/* disabled: numberplate field box shadow */
	--component-numberplate-disabled-border-size:	var(--component-disabled-border-size);/* disabled: numberplate field border size */
	--component-numberplate-disabled-border-color:	var(--component-disabled-border-color);/* disabled: numberplate field border color */
	--component-numberplate-disabled-outline-size:	var(--component-disabled-outline-size);/* disabled: numberplate field outline size */
	--component-numberplate-disabled-outline-color:	var(--component-disabled-outline-color);/* disabled: numberplate field outline color */
	--component-numberplate-disabled-outline-offset:var(--component-disabled-outline-offset);/* disabled: numberplate field outline offset */

	--component-numberplate-addon-padding:			0 0 0 0;	/* numberplate field addon padding */
	--component-numberplate-addon-offset: 			6px;		/* numberplate field addon bottom offset */
	--component-numberplate-addon-width:			22px;		/* numberplate field addon width */
	--component-numberplate-addon-font:				"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;/* numberplate field addon font family */
	--component-numberplate-addon-font-size:		10px;		/* numberplate field addon font size */
	--component-numberplate-addon-font-weight:		bold;		/* numberplate field addon font weight */
	--component-numberplate-addon-font-style:		normal;		/* numberplate field addon font style */
	--component-numberplate-addon-line-height: 		var(--component-line-height);/* numberplate field addon line height */
	--component-numberplate-addon-text-color: 		black;		/* numberplate field addon text color */
	--component-numberplate-addon-background-color:	white;		/* numberplate field addon background color */

	--component-numberplate-addon-important-font-size:		var(--component-numberplate-addon-font-size);/* numberplate field addon font size */
	--component-numberplate-addon-important-font-weight:	var(--component-numberplate-addon-font-weight);/* numberplate field addon font weight */
	--component-numberplate-addon-important-font-style:		var(--component-numberplate-addon-font-style);/* numberplate field addon font style */
	--component-numberplate-addon-important-text-color: 	var(--component-numberplate-addon-text-color);/* numberplate field addon text color */
	--component-numberplate-addon-important-background-color:var(--component-numberplate-addon-background-color);/* numberplate field addon background color */

	--component-numberplate-addon-required-font-size:		var(--component-numberplate-addon-font-size);/* numberplate field addon font size */
	--component-numberplate-addon-required-font-weight:		var(--component-numberplate-addon-font-weight);/* numberplate field addon font weight */
	--component-numberplate-addon-required-font-style:		var(--component-numberplate-addon-font-style);/* numberplate field addon font style */
	--component-numberplate-addon-required-text-color: 		var(--component-numberplate-addon-text-color);/* numberplate field addon text color */
	--component-numberplate-addon-required-background-color:var(--component-numberplate-addon-background-color);/* numberplate field addon background color */

	--component-numberplate-addon-empty-font-size:		var(--component-numberplate-addon-font-size);/* numberplate field addon font size */
	--component-numberplate-addon-empty-font-weight:	var(--component-numberplate-addon-font-weight);/* numberplate field addon font weight */
	--component-numberplate-addon-empty-font-style:		var(--component-numberplate-addon-font-style);/* numberplate field addon font style */
	--component-numberplate-addon-empty-text-color: 	var(--component-numberplate-addon-text-color);/* numberplate field addon text color */
	--component-numberplate-addon-empty-background-color:var(--component-numberplate-addon-background-color);/* numberplate field addon background color */

	--component-numberplate-addon-invalid-font-size:	var(--component-numberplate-addon-font-size);/* numberplate field addon font size */
	--component-numberplate-addon-invalid-font-weight:	var(--component-numberplate-addon-font-weight);/* numberplate field addon font weight */
	--component-numberplate-addon-invalid-font-style:	var(--component-numberplate-addon-font-style);/* numberplate field addon font style */
	--component-numberplate-addon-invalid-text-color: 	var(--component-numberplate-addon-text-color);/* numberplate field addon text color */
	--component-numberplate-addon-invalid-background-color:	var(--component-numberplate-addon-background-color);/* numberplate field addon background color */

	--component-numberplate-addon-focus-font-size:		var(--component-numberplate-addon-font-size);/* numberplate field addon font size */
	--component-numberplate-addon-focus-font-weight:	var(--component-numberplate-addon-font-weight);/* numberplate field addon font weight */
	--component-numberplate-addon-focus-font-style:		var(--component-numberplate-addon-font-style);/* numberplate field addon font style */
	--component-numberplate-addon-focus-text-color: 	var(--component-numberplate-addon-text-color);/* numberplate field addon text color */
	--component-numberplate-addon-focus-background-color:var(--component-numberplate-addon-background-color);/* numberplate field addon background color */

	--component-numberplate-addon-disabled-font-size:	var(--component-numberplate-addon-font-size);/* numberplate field addon font size */
	--component-numberplate-addon-disabled-font-weight:	var(--component-numberplate-addon-font-weight);/* numberplate field addon font weight */
	--component-numberplate-addon-disabled-font-style:	var(--component-numberplate-addon-font-style);/* numberplate field addon font style */
	--component-numberplate-addon-disabled-text-color: 	var(--component-numberplate-addon-text-color);/* numberplate field addon text color */
	--component-numberplate-addon-disabled-background-color:var(--component-numberplate-addon-background-color);/* numberplate field addon background color */

	--component-numberplate-city-font:				var(--component-font);/* number plate city text font */
	--component-numberplate-city-font-size:			9px;		/* number plate city text font size */
	--component-numberplate-city-font-weight:		normal;		/* number plate city text font weight */
	--component-numberplate-city-font-style:		normal;		/* number plate city text font style */
	--component-numberplate-city-text-color:		#aaaaaa; /* number plate city text color*/
	--component-numberplate-city-bottom:			6px;		/* number plate city text offset from bottom */
	--component-numberplate-city-left:				42px;		/* number plate city text offset from left */

	/* list-field */
	--component-list-margin:						var(--component-margin);/* list field margin */
	--component-list-add-pos:						row;		/* list field: add button position (column: top/bottom, row: left/right) */
	--component-list-add-margin:					0 0 0 25px; /* list field: margin of the add button */
	--component-list-add-align:						center; 	/* list field: add button align (justify-content) */
	--component-list-item-align:					normal; 	/* list field: item align (justify-content) */
	--component-list-item-padding:					0 0 0 0; 	/* list field: item padding */
	--component-list-item-content-padding:			0 0 0 0; 	/* list field: item content padding */
	--component-list-remove-margin:					20px; 		/* list field: left (right) margin of the remove button */
	--component-list-remove-align:					normal; 	/* list field: remove button align (align-self) */
	--component-list-add-button-width: 				auto;		/* list field: add button width */
	--component-list-add-button-height: 			auto;		/* list field: add button height */
	--component-list-remove-button-width: 			auto;		/* list field: remove button width */
	--component-list-remove-button-height: 			auto;		/* list field: remove button height */

	/* image field */
	--component-image-item-align: 					var(--component-item-align);/* image field vertical alignment (align-self) */
	--component-image-margin:						var(--component-margin);/* image field margin */
	--component-image-padding:						var(--component-padding);/* image field inner padding */
	--component-image-height:						150px;		/* image field height */
	--component-image-max-width: 					100%;		/* image field image max. width */
	--component-image-max-height: 					100%;		/* image field image max. height */

	--component-image-background-color:				var(--component-background-color);/* image field background color */
	--component-image-border-radius:				var(--component-border-radius);/* image field border radius */
	--component-image-border-size:					var(--component-border-size);/* image field border size */
	--component-image-border-color:					var(--component-border-color);/* image field border color */
	--component-image-outline-size:					var(--component-outline-size);/* image field outline size */
	--component-image-outline-color:				var(--component-outline-color);/* image field outline color */
	--component-image-outline-offset:				var(--component-outline-offset);/* image field outline offset */

	--component-image-hover-background-color: 		var(--component-image-background-color);/* hover: image field background color */
	--component-image-hover-border-size:			var(--component-image-border-size);/* hover: image field border size */
	--component-image-hover-border-color:			var(--component-image-border-color);/* hover: image field border color */

	--component-image-important-background-color:	var(--component-important-background-color);/* important: image field background color */
	--component-image-important-border-size:		var(--component-important-border-size);/* important: image field border size */
	--component-image-important-border-color:		var(--component-important-border-color);/* important: image field border color */
	--component-image-important-outline-size:		var(--component-important-outline-size);/* important: image field outline size */
	--component-image-important-outline-color:		var(--component-important-outline-color);/* important: image field outline color */
	--component-image-important-outline-offset:		var(--component-important-outline-offset);/* important: image field outline offset */

	--component-image-required-background-color:	var(--component-required-background-color);/* required: image field background color */
	--component-image-required-border-size:			var(--component-required-border-size);/* required: image field border size */
	--component-image-required-border-color:		var(--component-required-border-color);/* required: image field border color */
	--component-image-required-outline-size:		var(--component-required-outline-size);/* required: image field outline size */
	--component-image-required-outline-color:		var(--component-required-outline-color);/* required: image field outline color */
	--component-image-required-outline-offset:		var(--component-required-outline-offset);/* required: image field outline offset */

	--component-image-empty-background-color:		var(--component-empty-background-color);/* empty: image field background color */
	--component-image-empty-border-size:			var(--component-empty-border-size);/* empty: image field border size */
	--component-image-empty-border-color:			var(--component-empty-border-color);/* empty: image field border color */
	--component-image-empty-outline-size:			var(--component-empty-outline-size);/* empty: image field outline size */
	--component-image-empty-outline-color:			var(--component-empty-outline-color);/* empty: image field outline color */
	--component-image-empty-outline-offset:			var(--component-empty-outline-offset);/* empty: image field outline offset */

	--component-image-invalid-background-color:		var(--component-invalid-background-color);/* invalid: image field background color */
	--component-image-invalid-border-size:			var(--component-invalid-border-size);/* invalid: image field border size */
	--component-image-invalid-border-color:			var(--component-invalid-border-color);/* invalid: image field border color */
	--component-image-invalid-outline-size:			var(--component-invalid-outline-size);/* invalid: image field outline size */
	--component-image-invalid-outline-color:		var(--component-invalid-outline-color);/* invalid: image field outline color */
	--component-image-invalid-outline-offset:		var(--component-invalid-outline-offset);/* invalid: image field outline offset */

	--component-image-focus-background-color:		var(--component-focus-background-color);/* focus: image field background color */
	--component-image-focus-border-size:			var(--component-focus-border-size);/* focus: image field border size */
	--component-image-focus-border-color:			var(--component-focus-border-color);/* focus: image field border color */
	--component-image-focus-outline-size:			var(--component-focus-outline-size);/* focus: image field outline size */
	--component-image-focus-outline-color:			var(--component-focus-outline-color);/* focus: image field outline color */
	--component-image-focus-outline-offset:			var(--component-focus-outline-offset);/* focus: image field outline offset */

	--component-image-disabled-background-color:	var(--component-disabled-background-color);/* disabled: image field background color */
	--component-image-disabled-border-size:			var(--component-disabled-border-size);/* disabled: image field border size */
	--component-image-disabled-border-color:		var(--component-disabled-border-color);/* disabled: image field border color */
	--component-image-disabled-outline-size:		var(--component-disabled-outline-size);/* disabled: image field outline size */
	--component-image-disabled-outline-color:		var(--component-disabled-outline-color);/* disabled: image field outline color */
	--component-image-disabled-outline-offset:		var(--component-disabled-outline-offset);/* disabled: image field outline offset */

	--component-image-placeholder-background-color:	var(--component-image-background-color);/* placeholder: image field background color */
	--component-image-placeholder-outline-size:		0;			/* placeholder: image field outline size */
	--component-image-placeholder-outline-color:	var(--component-outline-color);/* placeholder: image field outline color */
	--component-image-placeholder-outline-offset:	var(--component-outline-offset);/* placeholder: image field outline offset */

	--component-image-button-container-pos:			row;		/* image field: button container position (column: top/bottom, row: left/right) */
	--component-image-button-pos:					column;		/* image field: buttons position */
	--component-image-button-container-margin:		20px; 		/* image field: left (right) margin of the button container */
	--component-image-button-gap:					20px; 		/* image field: button gap */
	--component-image-button-container-align:		normal; 	/* image field: button container align (align-self) */
	--component-image-button-width:					45px;		/* image field button width */
	--component-image-button-height:				auto;		/* image field button height */

	/* upload field */

	/* table-field */
	--table-field-margin:							var(--component-margin);/* table field margin */
	--table-field-padding: 							0 0 0 0;	/* table field padding */
	--table-field-border-color:						inherit;	/* table field border color */
	--table-field-border-size:						0;			/* table field border size */
	--table-field-tool-margin:						0;			/* table field tool area bottom margin */
	--table-field-tool-padding:						0 0 0 0;	/* table field tool area padding */
	--table-field-tool-input-filter-margin-left:	10px;		/* table field tool area filter input margin left */
	--table-field-tool-input-filter-margin-right:	10px;		/* table field tool area filter input margin right */
	--table-field-tool-input-filter-max-width: 		600px;		/* table field tool area filter input max. width */
	--table-field-tool-input-filter-flex: 			1 1 0;		/* table field tool area filter input flex value */
	--table-field-tool-select-filter-margin-left:	0;			/* table field tool area filter select margin left */
	--table-field-tool-select-filter-margin-right:	0;			/* table field tool area filter select margin right */
	--table-field-tool-select-filter-max-width: 	300px;		/* table field tool area filter select max. width */
	--table-field-tool-select-filter-flex: 			1 1 0;		/* table field tool area filter select flex value */
	--table-field-tool-button-margin-left:			5px;		/* table field tool area button margin left */
	--table-field-tool-button-margin-right:			5px;		/* table field tool area button margin right */
	--table-field-tool-button-width:				50px;		/* table field tool area button width */
	--table-field-tool-separator-width:				10px;		/* table field tool area separator width */
	--table-field-tool-long-separator-width:		25px;		/* table field tool area long separator width */

	--table-field-header-row-background-color:		#002d72;	/* table field header row background color */
	--table-field-row-background-color:				white;		/* table field row background color */
	--table-field-even-row-background-color:		#f6f6f6;	/* table field background color for even rows */
	--table-field-odd-row-background-color:			#e9e9e9;	/* table field background color for odd rows */
	--table-field-hover-row-background-color:		#ffffff;	/* table field background color for row hovering */

	--table-field-cell-padding: 					10px 25px 10px 25px;/* table field cell padding */
	--table-field-header-cell-padding: 				var(--table-field-cell-padding);/* table field header cell padding */
	--table-field-cell-height: 						37px;		/* table field cell default height (=min. height) */
	--table-field-cell-inner-hborder-color:			#c4c4c4;	/* table field cell inner horizontal border color */
	--table-field-cell-inner-hborder-size:			1px;		/* table field cell inner horizontal border size */
	--table-field-cell-inner-vborder-color:			inherit;	/* table field cell inner vertical border color */
	--table-field-cell-inner-vborder-size:			1px;		/* table field cell inner vertical border size */
	--table-field-cell-outer-border-color:			transparent;/* table field cell outer border color */
	--table-field-cell-outer-border-size:			0;			/* table field cell outer border size */
	--table-field-header-cell-inner-hborder-color:	var(--table-field-cell-inner-border-color);/* table field header cell inner horizontal border color */
	--table-field-header-cell-inner-hborder-size:	var(--table-field-cell-inner-border-size);/* table field header cell inner horizontal border size */
	--table-field-header-cell-inner-vborder-color:	white;		/* table field header cell inner vertical border color */
	--table-field-header-cell-inner-vborder-size:	1px;		/* table field header cell inner vertical border size */
	--table-field-header-cell-outer-border-color:	var(--table-field-cell-outer-border-color);/* table field header cell outer border color */
	--table-field-header-cell-outer-border-size:	var(--table-field-cell-outer-border-size);/* table field header cell outer border size */
	--table-field-header-cell-sorting-offset: 		10px;		/* x offset (from right) of the sorting icon */

	--table-field-font:								var(--component-font);/* table field font family */
	--table-field-font-size:						var(--component-font-size);/* table field font size */
	--table-field-font-weight:						var(--component-font-weight);/* table field font weight */
	--table-field-font-style:						var(--component-font-style);/* table field font style */
	--table-field-line-height: 						var(--component-line-height);/* table field line height */
	--table-field-text-color: 						var(--component-text-color);/* table field text color */
	--table-field-even-row-text-color: 				var(--component-text-color);/* table field text color for even rows */
	--table-field-odd-row-text-color: 				var(--component-text-color);/* table field text color for odd rows */
	--table-field-hover-row-text-color:				var(--component-text-color);/* table field text color for row hovering */

	--table-field-header-font:						var(--table-field-font);/* table field header font family */
	--table-field-header-font-size:					var(--table-field-font-size);/* table field header font size */
	--table-field-header-font-weight:				var(--table-field-font-weight);/* table field header font weight */
	--table-field-header-font-style:				var(--table-field-font-style);/* table field header font style */
	--table-field-header-line-height: 				var(--table-field-line-height);/* table field header line height */
	--table-field-header-text-color: 				white;		/* table field header text color */

	--table-field-title-margin:  					40px; 		/* right margin of title area */
	--table-field-title-font:						var(--table-field-header-font);/* table field header font family */
	--table-field-title-font-size:					var(--table-field-header-font-size);/* table field header font size */
	--table-field-title-font-weight:				var(--table-field-header-font-weight);/* table field header font weight */
	--table-field-title-font-style:					var(--table-field-header-font-style);/* table field header font style */
	--table-field-title-line-height: 				var(--table-field-header-line-height);/* table field header line height */
	--table-field-title-text-color: 				var(--table-field-header-text-color);/* table field header text color */

	--table-field-subtitle-font-size:				var(--table-field-title-font-size);/* table field header font size */
	--table-field-subtitle-font-weight:				var(--table-field-title-font-weight);/* table field header font weight */
	--table-field-subtitle-font-style:				var(--table-field-title-font-style);/* table field header font style */
	--table-field-subtitle-line-height: 			var(--table-field-title-line-height);/* table field header line height */
	--table-field-subtitle-text-color: 				var(--table-field-title-text-color);/* table field header text color */

	--table-field-multiselect-col-width:			40px;		/* width of the multiselection column */
	--table-field-multiselect-col-padding:			10px 10px 10px 10px;	/* padding for the multiselection column */
	--table-field-multiselect-icon-font: 			"Font Awesome 5 Pro";	/* icon font for multiselection selector */
	--table-field-multiselect-icon-font-size: 		inherit;	/* icon size for multiselection selector */
	--table-field-multiselect-icon-color: 			var(--table-field-text-color);/* icon color for multiselection selector */
	--table-field-multiselect-icon-unchecked:		"\f0c8";	/* icon for multiselection selector "unselected" */
	--table-field-multiselect-icon-checked:			"\f14a";	/* icon for multiselection selector "selected" */
	--table-field-multiselect-even-row-background-color:var(--table-field-even-row-background-color);/* table field background color for selected even rows */
	--table-field-multiselect-odd-row-background-color:var(--table-field-odd-row-background-color);/* table field background color for selected odd rows */
	--table-field-multiselect-even-row-text-color:	var(--table-field-even-row-text-color);/* table field text color for selected even rows */
	--table-field-multiselect-odd-row-text-color:	var(--table-field-odd-row-text-color);/* table field text color for selected odd rows */
	--table-field-multiselect-icon-select-all:		"\f560";	/* icon for multiselection header "select all" */
	--table-field-multiselect-icon-header-font-size:var(--table-field-multiselect-icon-font-size);	/* icon size for multiselection header */
	--table-field-multiselect-icon-header-color: 	var(--table-field-header-text-color);/* icon color for multiselection header */

	/* rating-field */
	--component-rating-item-align: 					var(--component-item-align);/* rating field vertical alignment (align-self) */
	--component-rating-margin:						var(--component-margin);/* rating field margin */
	--component-rating-star-padding:				0 0 0 0;	/* rating star padding */
	--component-rating-font-size:					var(--component-font-size);/* rating field font size */
	--component-rating-text-color: 					var(--component-text-color);/* rating field text color */
	--component-rating-outline-size:				var(--component-outline-size);/* rating field outline size */
	--component-rating-outline-color:				var(--component-outline-color);/* rating field outline color */
	--component-rating-outline-offset:				var(--component-outline-offset);/* rating field outline offset */

	--component-rating-important-text-color: 		var(--component-important-text-color);/* important: rating field text color */
	--component-rating-important-outline-size:		var(--component-important-outline-size);/* important: rating field outline size */
	--component-rating-important-outline-color:		var(--component-important-outline-color);/* important: rating field outline color */
	--component-rating-important-outline-offset:	var(--component-important-outline-offset);/* important: rating field outline offset */

	--component-rating-required-text-color: 		var(--component-required-text-color);/* required: rating field text color */
	--component-rating-required-outline-size:		var(--component-required-outline-size);/* required: rating field outline size */
	--component-rating-required-outline-color:		var(--component-required-outline-color);/* required: rating field outline color */
	--component-rating-required-outline-offset:		var(--component-required-outline-offset);/* required: rating field outline offset */

	--component-rating-empty-text-color: 			var(--component-empty-text-color);/* empty: rating field text color */
	--component-rating-empty-outline-size:			var(--component-empty-outline-size);/* empty: rating field outline size */
	--component-rating-empty-outline-color:			var(--component-empty-outline-color);/* empty: rating field outline color */
	--component-rating-empty-outline-offset:		var(--component-empty-outline-offset);/* empty: rating field outline offset */

	--component-rating-invalid-text-color: 			var(--component-invalid-text-color);/* invalid: rating field text color */
	--component-rating-invalid-outline-size:		var(--component-invalid-outline-size);/* invalid: rating field outline size */
	--component-rating-invalid-outline-color:		var(--component-invalid-outline-color);/* invalid: rating field outline color */
	--component-rating-invalid-outline-offset:		var(--component-invalid-outline-offset);/* invalid: rating field outline offset */

	--component-rating-focus-text-color: 			var(--component-focus-text-color);/* focus: rating field text color */
	--component-rating-focus-outline-size:			var(--component-focus-outline-size);/* focus: rating field outline size */
	--component-rating-focus-outline-color:			var(--component-focus-outline-color);/* focus: rating field outline color */
	--component-rating-focus-outline-offset:		var(--component-focus-outline-offset);/* focus: rating field outline offset */

	--component-rating-disabled-text-color: 		var(--component-disabled-text-color);/* disabled: rating field text color */
	--component-rating-disabled-outline-size:		var(--component-disabled-outline-size);/* disabled: rating field outline size */
	--component-rating-disabled-outline-color:		var(--component-disabled-outline-color);/* disabled: rating field outline color */
	--component-rating-disabled-outline-offset:		var(--component-disabled-outline-offset);/* disabled: rating field outline offset */

	--component-rating-hover-text-color: 			inherit;	/* rating field hover text color */

	/* file select field */
	--component-file-select-item-align: 			var(--component-item-align);/* file-select field vertical alignment (align-self) */
	--component-file-select-margin:					var(--component-margin);/* file-select field margin */
	--component-file-select-height:					45.5px;		/* file-select content min. height */
	--component-file-select-max-height:				150px;		/* file-select content max. height */
	--component-file-select-padding:				var(--component-padding);/* file-select field padding */
	--component-file-select-font:					var(--component-font);/* file-select field font family */
	--component-file-select-font-size:				var(--component-font-size);/* file-select field font size */
	--component-file-select-font-weight:			var(--component-font-weight);/* file-select field font weight */
	--component-file-select-font-style:				var(--component-font-style);/* file-select field font style */
	--component-file-select-line-height: 			var(--component-line-height);/* file-select field line height */
	--component-file-select-text-color: 			var(--component-text-color);/* file-select field text color */
	--component-file-select-background-color:		var(--component-background-color);/* file-select field background color */
	--component-file-select-shadow:					var(--component-shadow);/* file-select field box shadow */
	--component-file-select-border-radius:			var(--component-border-radius);/* file-select field border radius */
	--component-file-select-border-size:			var(--component-border-size);/* file-select field border size */
	--component-file-select-border-color:			var(--component-border-color);/* file-select field border color */
	--component-file-select-outline-size:			var(--component-outline-size);/* file-select field outline size */
	--component-file-select-outline-color:			var(--component-outline-color);/* file-select field outline color */
	--component-file-select-outline-offset:			var(--component-outline-offset);/* file-select field outline offset */
	--component-file-select-placeholder-font:		var(--component-placeholder-font);/* file-select field placeholder font */
	--component-file-select-placeholder-font-size:	var(--component-placeholder-font-size);/* file-select field placeholder font size */
	--component-file-select-placeholder-font-weight:var(--component-placeholder-font-weight);/* file-select field placeholder font weight */
	--component-file-select-placeholder-color:		var(--component-placeholder-color);/* file-select field placeholder color */
	--component-file-select-error-color:			var(--error-msg-color);/* file-select field error text color */

	--component-file-select-important-font-weight:	var(--component-important-font-weight);/* important: file-select field font weight */
	--component-file-select-important-font-style:	var(--component-important-font-style);/* important: file-select field font style */
	--component-file-select-important-text-color: 	var(--component-important-text-color);/* important: file-select field text color */
	--component-file-select-important-background-color:	var(--component-important-background-color);/* important: file-select field background color */
	--component-file-select-important-shadow:		var(--component-important-shadow);/* important: file-select field box shadow */
	--component-file-select-important-border-size:	var(--component-important-border-size);/* important: file-select field border size */
	--component-file-select-important-border-color:	var(--component-important-border-color);/* important: file-select field border color */
	--component-file-select-important-outline-size:	var(--component-important-outline-size);/* important: file-select field outline size */
	--component-file-select-important-outline-color:var(--component-important-outline-color);/* important: file-select field outline color */
	--component-file-select-important-outline-offset:var(--component-important-outline-offset);/* important: file-select field outline offset */
	--component-file-select-important-placeholder-font-weight:var(--component-important-placeholder-font-weight);/* file-select field placeholder font weight */
	--component-file-select-important-placeholder-font-size:var(--component-important-placeholder-font-size);/* file-select field placeholder font size */
	--component-file-select-important-placeholder-color:var(--component-important-placeholder-color);/* file-select field placeholder color */

	--component-file-select-required-font-weight:	var(--component-required-font-weight);/* required: file-select field font weight */
	--component-file-select-required-font-style:	var(--component-required-font-style);/* required: file-select field font style */
	--component-file-select-required-text-color: 	var(--component-required-text-color);/* required: file-select field text color */
	--component-file-select-required-background-color:var(--component-required-background-color);/* required: file-select field background color */
	--component-file-select-required-shadow:		var(--component-required-shadow);/* required: file-select field box shadow */
	--component-file-select-required-border-size:	var(--component-required-border-size);/* required: file-select field border size */
	--component-file-select-required-border-color:	var(--component-required-border-color);/* required: file-select field border color */
	--component-file-select-required-outline-size:	var(--component-required-outline-size);/* required: file-select field outline size */
	--component-file-select-required-outline-color:	var(--component-required-outline-color);/* required: file-select field outline color */
	--component-file-select-required-outline-offset:var(--component-required-outline-offset);/* required: file-select field outline offset */
	--component-file-select-required-placeholder-font-weight:var(--component-required-placeholder-font-weight);/* file-select field placeholder font-weight */
	--component-file-select-required-placeholder-font-size:var(--component-required-placeholder-font-size);/* file-select field placeholder font size */
	--component-file-select-required-placeholder-color:	var(--component-required-placeholder-color);/* file-select field placeholder color */

	--component-file-select-empty-font-weight:		var(--component-empty-font-weight);/* empty: file-select field font weight */
	--component-file-select-empty-font-style:		var(--component-empty-font-style);/* empty: file-select field font style */
	--component-file-select-empty-text-color: 		var(--component-empty-text-color);/* empty: file-select field text color */
	--component-file-select-empty-background-color:	var(--component-empty-background-color);/* empty: file-select field background color */
	--component-file-select-empty-shadow:			var(--component-empty-shadow);/* empty: file-select field box shadow */
	--component-file-select-empty-border-size:		var(--component-empty-border-size);/* empty: file-select field border size */
	--component-file-select-empty-border-color:		var(--component-empty-border-color);/* empty: file-select field border color */
	--component-file-select-empty-outline-size:		var(--component-empty-outline-size);/* empty: file-select field outline size */
	--component-file-select-empty-outline-color:	var(--component-empty-outline-color);/* empty: file-select field outline color */
	--component-file-select-empty-outline-offset:	var(--component-empty-outline-offset);/* empty: file-select field outline offset */
	--component-file-select-empty-placeholder-font-weight:var(--component-empty-placeholder-font-weight);/* file-select field placeholder font-weight */
	--component-file-select-empty-placeholder-font-size:var(--component-empty-placeholder-font-size);/* file-select field placeholder font size */
	--component-file-select-empty-placeholder-color:var(--component-empty-placeholder-color);/* file-select field placeholder color */

	--component-file-select-invalid-font-weight:	var(--component-invalid-font-weight);/* invalid: file-select field font weight */
	--component-file-select-invalid-font-style:		var(--component-invalid-font-style);/* invalid: file-select field font style */
	--component-file-select-invalid-text-color: 	var(--component-invalid-text-color);/* invalid: file-select field text color */
	--component-file-select-invalid-background-color:var(--component-invalid-background-color);/* invalid: file-select field background color */
	--component-file-select-invalid-shadow:			var(--component-invalid-shadow);/* invalid: file-select field box shadow */
	--component-file-select-invalid-border-size:	var(--component-invalid-border-size);/* invalid: file-select field border size */
	--component-file-select-invalid-border-color:	var(--component-invalid-border-color);/* invalid: file-select field border color */
	--component-file-select-invalid-outline-size:	var(--component-invalid-outline-size);/* invalid: file-select field outline size */
	--component-file-select-invalid-outline-color:	var(--component-invalid-outline-color);/* invalid: file-select field outline color */
	--component-file-select-invalid-outline-offset:	var(--component-invalid-outline-offset);/* invalid: file-select field outline offset */
	--component-file-select-invalid-placeholder-font-weight:var(--component-invalid-placeholder-font-weight);/* file-select field placeholder font-weight */
	--component-file-select-invalid-placeholder-font-size:var(--component-invalid-placeholder-font-size);/* file-select field placeholder font size */
	--component-file-select-invalid-placeholder-color:var(--component-invalid-placeholder-color);/* file-select field placeholder color */

	--component-file-select-focus-font-weight:		var(--component-focus-font-weight);/* focus: file-select field font weight */
	--component-file-select-focus-font-style:		var(--component-focus-font-style);/* focus: file-select field font style */
	--component-file-select-focus-text-color: 		var(--component-focus-text-color);/* focus: file-select field text color */
	--component-file-select-focus-background-color:	var(--component-focus-background-color);/* focus: file-select field background color */
	--component-file-select-focus-shadow:			var(--component-focus-shadow);/* focus: file-select field box shadow */
	--component-file-select-focus-border-size:		var(--component-focus-border-size);/* focus: file-select field border size */
	--component-file-select-focus-border-color:		var(--component-focus-border-color);/* focus: file-select field border color */
	--component-file-select-focus-outline-size:		var(--component-focus-outline-size);/* focus: file-select field outline size */
	--component-file-select-focus-outline-color:	var(--component-focus-outline-color);/* focus: file-select field outline color */
	--component-file-select-focus-outline-offset:	var(--component-focus-outline-offset);/* focus: file-select field outline offset */
	--component-file-select-focus-placeholder-font-weight:var(--component-focus-placeholder-font-weight);/* file-select field placeholder font-weight */
	--component-file-select-focus-placeholder-font-size:var(--component-focus-placeholder-font-size);/* file-select field placeholder font size */
	--component-file-select-focus-placeholder-color:var(--component-focus-placeholder-color);/* file-select field placeholder color */

	--component-file-select-disabled-font-weight:	var(--component-disabled-font-weight);/* disabled: file-select field font weight */
	--component-file-select-disabled-font-style:	var(--component-disabled-font-style);/* disabled: file-select field font style */
	--component-file-select-disabled-text-color: 	var(--component-disabled-text-color);/* disabled: file-select field text color */
	--component-file-select-disabled-background-color:var(--component-disabled-background-color);/* disabled: file-select field background color */
	--component-file-select-disabled-shadow:		var(--component-disabled-shadow);/* disabled: file-select field box shadow */
	--component-file-select-disabled-border-size:	var(--component-disabled-border-size);/* disabled: file-select field border size */
	--component-file-select-disabled-border-color:	var(--component-disabled-border-color);/* disabled: file-select field border color */
	--component-file-select-disabled-outline-size:	var(--component-disabled-outline-size);/* disabled: file-select field outline size */
	--component-file-select-disabled-outline-color:	var(--component-disabled-outline-color);/* disabled: file-select field outline color */
	--component-file-select-disabled-outline-offset:var(--component-disabled-outline-offset);/* disabled: file-select field outline offset */
	--component-file-select-disabled-placeholder-font-weight:var(--component-disabled-placeholder-font-weight);/* file-select field placeholder font-weight */
	--component-file-select-disabled-placeholder-font-size:var(--component-disabled-placeholder-font-size);/* file-select field placeholder font size */
	--component-file-select-disabled-placeholder-color:	var(--component-disabled-placeholder-color);/* file-select field placeholder color */

	--component-file-select-preview-img-margin: 	0 20px 0 0;	/* file-select field preview image margin */
	--component-file-select-preview-img-border-size: 0px;		/* file-select field preview image border size */
	--component-file-select-preview-img-border-color:var(--component-border-color);/* file-select field preview image border color */
	--component-file-select-preview-img-shadow:		none;		/* file-select field preview image box shadow */

	--component-file-select-size-font-size:			var(--component-file-select-font-size); /* file-select field preview file size font size */
	--component-file-select-size-font-weight:		var(--component-file-select-font-weight); /* file-select field preview file size font weight */
	--component-file-select-size-font-style:		italic; /* file-select field preview file size font style */
	--component-file-select-size-text-color:		var(--component-file-select-text-color); /* file-select field preview file size text color */
	--component-file-select-size-padding:			10px; 		/* file-select field preview file size left padding */
	--component-file-select-size-before:			"(";		/* file-select field preview file size before text */
	--component-file-select-size-after:				")";		/* file-select field preview file size after text */

	--component-file-select-dragover-text-color: 	var(--component-file-select-text-color);/* file-select field drag-over text color */
	--component-file-select-dragover-background-color:var(--component-file-select-background-color);/* file-select field drag-over background color */
	--component-file-select-dragover-shadow:		var(--component-file-select-shadow);/* file-select field drag-over box shadow */
	--component-file-select-dragover-border-radius:	var(--component-file-select-border-radius);/* file-select field drag-over border radius */
	--component-file-select-dragover-border-size:	var(--component-file-select-border-size);/* file-select field drag-over border size */
	--component-file-select-dragover-border-color:	var(--component-file-select-border-color);/* file-select field drag-over border color */
	--component-file-select-dragover-outline-size:	2px; /*var(--component-file-select-outline-size);*/ /* file-select field drag-over outline size */
	--component-file-select-dragover-outline-color:	#55c3f1;/*var(--component-file-select-outline-color);*//* file-select field drag-over outline color */
	--component-file-select-dragover-outline-offset:var(--component-file-select-outline-offset);/* file-select field drag-over outline offset */

	/* modal window */
	--modal-window-backdrop-color:					transparent;/* modal window backdrop background color */
	--modal-window-lowest-backdrop-color: 			rgba(0,0,0,0.25);/* modal window lowest backdrop background color */
	--modal-window-background-color:				#e5e5e5;	/* modal window background color */
	--modal-window-border-color:					#c4c4c4;	/* modal window border color */
	--modal-window-border-size:						1px;		/* modal window border size */
	--modal-window-border-radius:					8px;		/* modal window border radius */
	--modal-window-header-color:					white;		/* modal window header background color */
	--modal-window-footer-color:					white;		/* modal window header background color */
	--modal-window-body-color:						transparent;/* modal window body background color */
	--modal-window-shadow: 							0px 1px 12px 1px rgba(0,0,0,0.2);/* modal window box shadow */
	--modal-window-width-sm:						25vw;		/* modal window width, small size */
	--modal-window-width-sm2:						32vw;		/* modal window width, small size 2 (larger) */
	--modal-window-width-md:						40vw;		/* modal window width, medium size */
	--modal-window-width-md2:						55vw;		/* modal window width, medium size 2 (larger) */
	--modal-window-width-lg:						75vw;		/* modal window width, large size */
	--modal-window-width-lg2:						85vw;		/* modal window width, large size 2 (larger) */
	--modal-window-width-xl:						90vw;		/* modal window width, extra large size */
	--modal-window-min-width-sm:					500px;		/* modal window min. width, small size */
	--modal-window-min-width-sm2:					550px;		/* modal window min. width, small size 2 (larger) */
	--modal-window-min-width-md:					850px;		/* modal window min. width, medium size */
	--modal-window-min-width-md2:					900px;		/* modal window min. width, medium size 2 (larger) */
	--modal-window-min-width-lg:					1400px;		/* modal window min. width, large size */
	--modal-window-min-width-lg2:					1500px;		/* modal window min. width, large size 2 (larger) */
	--modal-window-min-width-xl:					1700px;		/* modal window min. width, extra large size */
	--modal-window-top:								35px;		/* modal window top position */
	--modal-window-max-height:						95vh;		/* modal window max. outer height */
	--modal-window-body-max-height:					calc(95vh - 175px);	/* modal window max. body height */

	--modal-window-header-padding:					20px 35px 20px 35px;/* modal window header padding */
	--modal-window-header-border-size:				1px;		/* modal window header bottom border size */
	--modal-window-header-border-color:				#e5e5e5;	/* modal window header bottom border color */
	--modal-window-footer-padding:					20px 35px 20px 35px;/* modal window header padding */
	--modal-window-footer-border-size:				1px;		/* modal window footer top border size */
	--modal-window-footer-border-color:				#e5e5e5;	/* modal window footer top border color */
	--modal-window-body-padding:					20px 35px 20px 35px;/* modal window body padding */

	--modal-window-title-font:						inherit;	/* modal window header title font family */
	--modal-window-title-font-size:					26px;		/* modal window header title font size */
	--modal-window-title-font-weight:				normal;		/* modal window header title font weight */
	--modal-window-title-font-style:				normal;		/* modal window header title font style */
	--modal-window-title-line-height: 				inherit;	/* modal window header title line height */
	--modal-window-title-color: 					black;		/* modal window header title color */
	--modal-window-title-margin: 					0;			/* modal window header title bottom margin */

	--modal-window-subtitle-font:					inherit;	/* modal window header subtitle font family */
	--modal-window-subtitle-font-size:				18px;		/* modal window header subtitle font size */
	--modal-window-subtitle-font-weight:			normal;		/* modal window header subtitle font weight */
	--modal-window-subtitle-font-style:				normal;		/* modal window header subtitle font style */
	--modal-window-subtitle-line-height: 			inherit;	/* modal window header subtitle line height */
	--modal-window-subtitle-color: 					black;		/* modal window header subtitle color */
	--modal-window-subtitle-margin: 				0;			/* modal window header subtitle bottom margin */

	--modal-window-button-gap:						15px;		/* modal window button distance */
	--modal-window-button-icon-width: 				30px;		/* modal window button icon width */
	--modal-window-button-icon-height: 				30px;		/* modal window button icon height */

	--modal-window-header-button-img-margin:		0 0 0 0;	/* modal window header button image margin (icon top) */
	--modal-window-header-button-padding:			0 0 0 0;/* modal window header button padding */
	--modal-window-header-button-font:				var(--component-button-font);/* modal window header button font family */
	--modal-window-header-button-font-size:			20px;		/* modal window header button font size */
	--modal-window-header-button-font-weight:		var(--component-button-font-weight);/* modal window header button font weight */
	--modal-window-header-button-font-style:		var(--component-button-font-style);/* modal window header button font style */
	--modal-window-header-button-line-height: 		var(--component-button-line-height);/* modal window header button line height */
	--modal-window-header-button-text-color: 		#666666;	/* modal window header button text color */
	--modal-window-header-button-background-color:	transparent;/* modal window header button background color */
	--modal-window-header-button-shadow:			none;		/* modal window header button box shadow */
	--modal-window-header-button-border-radius:		0;			/* modal window header button border radius */
	--modal-window-header-button-border-size:		0;			/* modal window header button border size */
	--modal-window-header-button-border-color:		var(--component-button-border-color);/* modal window header button border color */
	--modal-window-header-button-outline-size:		var(--component-button-outline-size);/* modal window header button outline size */
	--modal-window-header-button-outline-color:		var(--component-button-outline-color);/* modal window header button outline color */
	--modal-window-header-button-outline-offset:	var(--component-button-outline-offset);/* modal window header button outline offset */

	--modal-window-header-button-focus-font-weight:		var(--component-button-focus-font-weight);/* focus: modal window header button font weight */
	--modal-window-header-button-focus-font-style:		var(--component-button-focus-font-style);/* focus: modal window header button font style */
	--modal-window-header-button-focus-text-color: 		black;	/* focus: modal window header button text color */
	--modal-window-header-button-focus-background-color: transparent;/* focus: modal window header button background color */
	--modal-window-header-button-focus-shadow:			none;	/* focus: modal window header button box shadow */
	--modal-window-header-button-focus-border-size:		0;		/* focus: modal window header button border size */
	--modal-window-header-button-focus-border-color:	var(--component-button-focus-border-color);/* focus: modal window header button border color */
	--modal-window-header-button-focus-outline-size:	var(--component-button-focus-outline-size);/* focus: modal window header button outline size */
	--modal-window-header-button-focus-outline-color:	var(--component-button-focus-outline-color);/* focus: modal window header button outline color */
	--modal-window-header-button-focus-outline-offset:	var(--component-button-focus-outline-offset);/* focus: modal window header button outline offset */

	--modal-window-header-button-hover-font-weight:		var(--component-button-hover-font-weight);/* hover: modal window header button font weight */
	--modal-window-header-button-hover-font-style:		var(--component-button-hover-font-style);/* hover: modal window header button font style */
	--modal-window-header-button-hover-text-color: 		black;	/* hover: modal window header button text color */
	--modal-window-header-button-hover-background-color: transparent;/* hover: modal window header button background color */
	--modal-window-header-button-hover-shadow:			none;	/* hover: modal window header button box shadow */
	--modal-window-header-button-hover-border-size:		0;		/* hover: modal window header button border size */
	--modal-window-header-button-hover-border-color:	var(--component-button-hover-border-color);/* hover: modal window header button border color */
	--modal-window-header-button-hover-outline-size:	var(--component-button-hover-outline-size);/* hover: modal window header button outline size */
	--modal-window-header-button-hover-outline-color:	var(--component-button-hover-outline-color);/* hover: modal window header button outline color */
	--modal-window-header-button-hover-outline-offset:	var(--component-button-hover-outline-offset);/* hover: modal window header button outline offset */

	--modal-window-header-button-active-font-weight:	var(--component-button-active-font-weight);/* active: modal window header button font weight */
	--modal-window-header-button-active-font-style:		var(--component-button-active-font-style);/* active: modal window header button font style */
	--modal-window-header-button-active-text-color: 	black;	/* active: modal window header button text color */
	--modal-window-header-button-active-background-color: transparent;/* active: modal window header button background color */
	--modal-window-header-button-active-shadow:			none;	/* active: modal window header button box shadow */
	--modal-window-header-button-active-border-size:	0;		/* active: modal window header button border size */
	--modal-window-header-button-active-border-color:	var(--component-button-active-border-color);/* active: modal window header button border color */
	--modal-window-header-button-active-outline-size:	var(--component-button-active-outline-size);/* active: modal window header button outline size */
	--modal-window-header-button-active-outline-color:	var(--component-button-active-outline-color);/* active: modal window header button outline color */
	--modal-window-header-button-active-outline-offset:	var(--component-button-active-outline-offset);/* active: modal window header button outline offset */
	--modal-window-header-button-active-offset-x:		var(--component-button-active-offset-x);/* active: modal window header button offset x */
	--modal-window-header-button-active-offset-y:		var(--component-button-active-offset-y);/* active: modal window header button offset y */

	/* message window */
	--message-window-font:							inherit;	/* message window font family */
	--message-window-font-size:						inherit;	/* message window font size */
	--message-window-font-weight:					inherit;	/* message window font weight */
	--message-window-font-style:					inherit;	/* message window font style */
	--message-window-line-height: 					inherit;	/* message window line height */
	--message-window-color: 						inherit;	/* message window text color */
	--message-window-text-padding:					0 0 0 0;	/* message window text padding */
	--message-window-icon-width:					auto;		/* message window icon width */
	--message-window-icon-font-size:				60px;		/* message window icon font size */
	--message-window-icon-font-weight:				normal;		/* message window icon font weight */
	--message-window-icon-font-style:				normal;		/* message window icon font style */
	--message-window-icon-padding:					0 20px 0 0;	/* message window icon padding */
	--message-window-icon-color: 					#002d72;	/* message window icon color (info) */
	--message-window-icon-color-error: 				#fd0100;	/* message window icon color (error) */
	--message-window-icon-color-question: 			var(--message-window-icon-color);/* message window icon color (question) */

	/* security 2fa window */
	--security-code-font-size: 						30px;		/* security 2fa code window font size */

	/* layout-app */
	--layout-app-header-height:						inherit;	/* layout app header height */
	--layout-app-header-padding: 					0 0 0 0;	/* layout app header padding */
	--layout-app-header-background-color:			#e9e9e9;	/* layout app header background color */
	--layout-app-header-border:  					none;		/* layout app header border */
	--layout-app-header-top-height: 				inherit;	/* layout app header top area height */
	--layout-app-header-top-padding: 				10px 50px 10px 50px;/* layout app header top area padding */
	--layout-app-header-top-background-color:		white;		/* layout app header top background color */
	--layout-app-header-top-border:  				none;		/* layout app header top border */
	--layout-app-header-top-align: 					center;	 	/* layout app header top element alignment (align-items) */
	--layout-app-header-tool-height: 				inherit;	/* layout app header tool area height */
	--layout-app-header-tool-padding: 				10px 50px 0 50px;/* layout app header tool area padding */
	--layout-app-header-tool-background-color:		inherit;	/* layout app header tool area background color */
	--layout-app-header-tool-border:  				none;		/* layout app header tool area border */
	--layout-app-logo-width: 						inherit;	/* layout app logo width */
	--layout-app-logo-height: 						inherit;	/* layout app logo height */
	--layout-app-logo-background-color:				inherit;	/* layout app logo background color */
	--layout-app-logo-border:  						none;		/* layout app logo border */

	--layout-app-main-menu-height: 					inherit;	/* layout app main menu height */
	--layout-app-main-menu-padding: 				0 0 0 20px;	/* layout app main menu padding */
	--layout-app-main-menu-align: 					flex-start;	/* layout app main menu flex align (justify-content) */
	--layout-app-main-menu-background-color:		inherit;	/* layout app main menu background color */
	--layout-app-main-menu-border:  				none;		/* layout app main menu border */
	--layout-app-user-menu-height: 					inherit;	/* layout app user menu height */
	--layout-app-user-menu-padding: 				0 0 0 0;	/* layout app user menu padding */
	--layout-app-user-menu-align: 					flex-end;	/* layout app user menu flex align (justify-content) */
	--layout-app-user-menu-background-color:		inherit;	/* layout app user menu background color */
	--layout-app-user-menu-border:  				none;		/* layout app user menu border */

	--layout-app-breadcrumb-font:					inherit;	/* layout app breadcrumb font family */
	--layout-app-breadcrumb-font-size:				32px;		/* layout app breadcrumb font size */
	--layout-app-breadcrumb-font-weight:			inherit;	/* layout app breadcrumb font weight */
	--layout-app-breadcrumb-font-style:				inherit;	/* layout app breadcrumb font style */
	--layout-app-breadcrumb-line-height: 			inherit;	/* layout app breadcrumb line height */
	--layout-app-breadcrumb-color: 					inherit;	/* layout app breadcrumb text color */
	--layout-app-breadcrumb-height: 				inherit;	/* layout app breadcrumb height */
	--layout-app-breadcrumb-padding: 				10px 50px 0 50px;/* layout app breadcrumb padding */
	--layout-app-breadcrumb-align: 					flex-end;	/* layout app breadcrumb flex align (justify-content) */
	--layout-app-breadcrumb-background-color:		#e9e9e9;	/* layout app breadcrumb background color */
	--layout-app-breadcrumb-border:  				1px solid #aaa;	/* layout app breadcrumb border */
	--layout-app-toolbar-height: 					inherit;	/* layout app toolbar height */
	--layout-app-toolbar-padding: 					0 0 0 0;	/* layout app toolbar padding */
	--layout-app-toolbar-align: 					flex-end;	/* layout app toolbar flex align (justify-content) */
	--layout-app-toolbar-background-color:			inherit;	/* layout app toolbar background color */
	--layout-app-toolbar-border: 	 				none;		/* layout app toolbar border */

	--layout-app-status-icons-height: 				inherit;	/* layout app status icons height */
	--layout-app-status-icons-max-width: 			none;		/* layout app status icons max width */
	--layout-app-status-icons-padding: 				0 0 0 0;	/* layout app status icons padding */
	--layout-app-status-icons-align: 				flex-end;	/* layout app status icons flex align (justify-content) */
	--layout-app-status-icons-top: 					0;			/* layout app status icons position (from top) */
	--layout-app-status-icons-right: 				0;			/* layout app status icons position (from right) */
	--layout-app-status-icons-background-color:		inherit;	/* layout app status icons background color */
	--layout-app-status-icons-border: 				none;		/* layout app status icons border */

	--layout-app-body-padding: 						0 0 0 0;	/* layout app body padding */
	--layout-app-body-background-color:				inherit;	/* layout app body background color */
	--layout-app-body-border: 						none;		/* layout app body border */
	--layout-app-context-area-width: 				inherit;	/* layout app context area width */
	--layout-app-context-area-padding: 				0 0 0 0;	/* layout app context area padding */
	--layout-app-context-area-background-color:		#e9e9e9;	/* layout app context area background color */
	--layout-app-context-area-border: 				none;		/* layout app context area border */
	--layout-app-context-padding: 					20px 10px 20px 10px;/* layout app context padding */
	--layout-app-context-background-color:			inherit;	/* layout app context background color */
	--layout-app-context-align:		 				flex-end;	/* layout app context flex align (justify-content) */
	--layout-app-context-border: 					none;		/* layout app context border */
	--layout-app-context-footer-height: 			inherit;	/* layout app context footer height */
	--layout-app-context-footer-padding: 			5px 5px 5px 10px;/* layout app context footer padding */
	--layout-app-context-footer-background-color:	inherit;	/* layout app context footer background color */
	--layout-app-context-footer-align:				flex-start;	/* layout app context footer flex align (justify-content) */
	--layout-app-context-footer-border: 			none;		/* layout app context footer border */

	--layout-app-main-container-padding: 			0 0 0 0;	/* layout app main container padding */
	--layout-app-main-container-background-color:	inherit;	/* layout app main container background color */
	--layout-app-main-padding: 						50px 50px 50px 50px;/* layout app main area padding */
	--layout-app-main-background-color:				#e9e9e9;	/* layout app main area background color */
	--layout-app-main-border: 						none;		/* layout app main area border */
	--layout-app-footer-height: 					inherit;	/* layout app footer height */
	--layout-app-footer-padding: 					0 0 0 0;	/* layout app footer padding */
	--layout-app-footer-background-color:			inherit;	/* layout app footer background color */
	--layout-app-footer-align:						flex-start;	/* layout app footer flex align (justify-content) */
	--layout-app-footer-border: 					none;		/* layout app footer border */

	--layout-app-spacer-size:						15px;		/* layout app spacer width/height */

	/* horizontal line in dialogs */
	--hr-color: 									inherit;	/* horizontal line color */
	--hr-size: 										1px;		/* horizontal height */
	--hr-margin: 									20px 0 30px 0;/* horizontal margin */

	/* todo tooltip */
	/* todo info-tag (for all components) */
}


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* global and basic settings */

/* Every component can have different modes (also multiple modes at once):
	- normal: normal mode (no extra css class)
	- important: component input is important ("soft" required, css class: "important")
	- required: component input is required by the user ("hard" required, attribute "required")
	- empty: component input is curently empty (css class: "empty")
	- invalid: component input is invalid (e.g. wrong format, too few characters, css class: "invalid")
	- focus: component has keyboard/input focus (css class: "focus")
	- disable: component is disabled for user input (attribute "disabled")
   The css styles are addded in a specific order so that modes with higher priority can override styles with lower prio:

    	(lowest)										  (highest)
   		normal -> important -> required -> empty -> invalid -> focus -> disabled
*/

.field-inner, .field-group-inner { flex: var(--component-inner-area-ratio) var(--component-inner-area-ratio) 0;
								   font-family: var(--component-font); font-size: var(--component-font-size);
								   font-weight: var(--component-font-weight); font-style: var(--component-font-style);
								   line-height: var(--component-line-height); width: 100%; }

/* label */
.group-label { flex: var(--component-label-area-ratio) var(--component-label-area-ratio) var(--component-label-area-base-width);
			   font-family: var(--component-label-font); font-size: var(--component-label-font-size);
			   font-weight: var(--component-label-font-weight); font-style: var(--component-label-font-style);
			   text-decoration: var(--component-label-decoration); line-height: var(--component-label-line-height);
			   color: var(--component-label-color); width: var(--component-label-area-size); margin: var(--component-label-margin);
			   text-align: var(--component-label-textalign); align-self: var(--component-label-align); text-overflow: ellipsis; overflow: hidden;
			   min-height: var(--component-label-line-height); }

.label-top > .group-label { text-align: left; align-self: normal; overflow-y: visible; overflow-x: hidden; flex-basis: 100%;
						  min-height: var(--component-label-top-height);  margin: var(--component-label-top-margin); }

.group-mainlabel { display: block; }
.group-sublabel { display: block;
				  font-size: var(--component-sublabel-font-size); font-weight: var(--component-sublabel-font-weight);
				  font-style: var(--component-sublabel-font-style); text-decoration: var(--component-sublabel-decoration);
				  line-height: var(--component-sublabel-line-height); color: var(--component-sublabel-color); }
.label-small { font-size: var(--component-small-label-font-size); font-weight: var(--component-small-label-font-weight);
			   font-style: var(--component-small-label-font-style); line-height: var(--component-small-label-line-height);
			   color: var(--component-small-label-color); text-decoration: var(--component-small-label-decoration); }

.important > .group-label { font-size: var(--component-important-label-font-size); font-weight: var(--component-important-label-font-weight);
				font-style: var(--component-important-label-font-style); text-decoration: var(--component-important-label-decoration);
				color: var(--component-important-label-color); }
.important > .group-sublabel { font-size: var(--component-important-sublabel-font-size); font-weight: var(--component-important-sublabel-font-weight);
				font-style: var(--component-important-sublabel-font-style); text-decoration: var(--component-important-sublabel-decoration);
				color: var(--component-important-sublabel-color); }

*[required] > .group-label { font-size: var(--component-required-label-font-size); font-weight: var(--component-required-label-font-weight);
				font-style: var(--component-required-label-font-style); text-decoration: var(--component-required-label-decoration);
				color: var(--component-required-label-color); }
*[required] > .group-sublabel { font-size: var(--component-required-sublabel-font-size); font-weight: var(--component-required-sublabel-font-weight);
				font-style: var(--component-required-sublabel-font-style); text-decoration: var(--component-required-sublabel-decoration);
				color: var(--component-required-sublabel-color); }

.empty > .group-label { font-size: var(--component-empty-label-font-size); font-weight: var(--component-empty-label-font-weight);
				font-style: var(--component-empty-label-font-style); text-decoration: var(--component-empty-label-decoration);
				color: var(--component-empty-label-color); }
.empty > .group-sublabel { font-size: var(--component-empty-sublabel-font-size); font-weight: var(--component-empty-sublabel-font-weight);
				font-style: var(--component-empty-sublabel-font-style); text-decoration: var(--component-empty-sublabel-decoration);
				color: var(--component-empty-sublabel-color); }

.invalid > .group-label { font-size: var(--component-invalid-label-font-size); font-weight: var(--component-invalid-label-font-weight);
				font-style: var(--component-invalid-label-font-style); text-decoration: var(--component-invalid-label-decoration);
				color: var(--component-invalid-label-color); }
.invalid > .group-sublabel { font-size: var(--component-invalid-sublabel-font-size); font-weight: var(--component-invalid-sublabel-font-weight);
				font-style: var(--component-invalid-sublabel-font-style); text-decoration: var(--component-invalid-sublabel-decoration);
				color: var(--component-invalid-sublabel-color); }

.focus > .group-label { font-size: var(--component-focus-label-font-size); font-weight: var(--component-focus-label-font-weight);
				font-style: var(--component-focus-label-font-style); text-decoration: var(--component-focus-label-decoration);
				color: var(--component-focus-label-color); }
.focus > .group-sublabel { font-size: var(--component-focus-sublabel-font-size); font-weight: var(--component-focus-sublabel-font-weight);
				font-style: var(--component-focus-sublabel-font-style); text-decoration: var(--component-focus-sublabel-decoration);
				color: var(--component-focus-sublabel-color); }

*:disabled > .group-label { font-size: var(--component-disabled-empty-label-font-size); font-weight: var(--component-disabled-empty-label-font-weight);
				font-style: var(--component-disabled-empty-label-font-style); text-decoration: var(--component-disabled-empty-label-decoration);
				color: var(--component-disabled-empty-label-color); }
*:disabled > .group-sublabel { font-size: var(--component-disabled-empty-sublabel-font-size); font-weight: var(--component-disabled-empty-sublabel-font-weight);
				font-style: var(--component-disabled-empty-sublabel-font-style); text-decoration: var(--component-disabled-empty-sublabel-decoration);
				color: var(--component-disabled-empty-sublabel-color); }

/* mobile label */
.mobile-group-label { display: none;
			   flex: var(--component-mobile-label-area-ratio) var(--component-mobile-label-area-ratio) var(--component-mobile-label-area-base-width);
			   font-family: var(--component-mobile-label-font);
			   font-size: var(--component-mobile-label-font-size); font-weight: var(--component-mobile-label-font-weight);
			   font-style: var(--component-mobile-label-font-style); text-decoration: var(--component-mobile-label-decoration);
			   line-height: var(--component-mobile-label-line-height); color: var(--component-mobile-label-color);
			   width: var(--component-mobile-label-area-size); margin: var(--component-mobile-label-margin);
			   text-align: var(--component-mobile-label-textalign); align-self: var(--component-mobile-label-align);
			   text-overflow: ellipsis; overflow: hidden; }
.label-top > .mobile-group-label { flex-basis: 100%; }
.mobile-group-sublabel { font-size: var(--component-mobile-sublabel-font-size); font-weight: var(--component-mobile-sublabel-font-weight);
				  font-style: var(--component-mobile-sublabel-font-style); text-decoration: var(--component-mobile-sublabel-decoration);
				  line-height: var(--component-mobile-sublabel-line-height); color: var(--component-mobile-sublabel-color); }
.mobile-group-mainlabel {}
.mobile-label-small { font-size: var(--component-mobile-small-label-font-size); font-weight: var(--component-mobile-small-label-font-weight);
			   font-style: var(--component-mobile-small-label-font-style); line-height: var(--component-mobile-small-label-line-height);
			   color: var(--component-mobile-small-label-color); text-decoration: var(--component-mobile-small-label-decoration); }

.important > .mobile-group-label { font-size: var(--component-important-mobile-label-font-size);
				font-weight: var(--component-important-mobile-label-font-weight); font-style: var(--component-important-mobile-label-font-style);
				text-decoration: var(--component-important-mobile-label-decoration); color: var(--component-important-mobile-label-color); }
.important > .mobile-group-sublabel { font-size: var(--component-important-mobile-sublabel-font-size);
				font-weight: var(--component-important-mobile-sublabel-font-weight);
				font-style: var(--component-important-mobile-sublabel-font-style);
				text-decoration: var(--component-important-mobile-sublabel-decoration);
				color: var(--component-important-mobile-sublabel-color); }

*[required] > .mobile-group-label { font-size: var(--component-required-mobile-label-font-size);
				font-weight: var(--component-required-mobile-label-font-weight); font-style: var(--component-required-mobile-label-font-style);
				text-decoration: var(--component-required-mobile-label-decoration); color: var(--component-required-mobile-label-color); }
*[required] > .mobile-group-sublabel { font-size: var(--component-required-mobile-sublabel-font-size);
				font-weight: var(--component-required-mobile-sublabel-font-weight);
				font-style: var(--component-required-mobile-sublabel-font-style);
				text-decoration: var(--component-required-mobile-sublabel-decoration);
				color: var(--component-required-mobile-sublabel-color); }

.empty > .mobile-group-label { font-size: var(--component-empty-mobile-label-font-size);
				font-weight: var(--component-empty-mobile-label-font-weight); font-style: var(--component-empty-mobile-label-font-style);
				text-decoration: var(--component-empty-mobile-label-decoration); color: var(--component-empty-mobile-label-color); }
.empty > .mobile-group-sublabel { font-size: var(--component-empty-mobile-sublabel-font-size);
				font-weight: var(--component-empty-mobile-sublabel-font-weight);
				font-style: var(--component-empty-mobile-sublabel-font-style);
				text-decoration: var(--component-empty-mobile-sublabel-decoration);
				color: var(--component-empty-mobile-sublabel-color); }

.invalid > .mobile-group-label { font-size: var(--component-invalid-mobile-label-font-size);
				font-weight: var(--component-invalid-mobile-label-font-weight); font-style: var(--component-invalid-mobile-label-font-style);
				text-decoration: var(--component-invalid-mobile-label-decoration); color: var(--component-invalid-mobile-label-color); }
.invalid > .mobile-group-sublabel { font-size: var(--component-invalid-mobile-sublabel-font-size);
				font-weight: var(--component-invalid-mobile-sublabel-font-weight);
				font-style: var(--component-invalid-mobile-sublabel-font-style);
				text-decoration: var(--component-invalid-mobile-sublabel-decoration);
				color: var(--component-invalid-mobile-sublabel-color); }

.focus > .mobile-group-label { font-size: var(--component-focus-mobile-label-font-size);
				font-weight: var(--component-focus-mobile-label-font-weight); font-style: var(--component-focus-mobile-label-font-style);
				text-decoration: var(--component-focus-mobile-label-decoration); color: var(--component-focus-mobile-label-color); }
.focus > .mobile-group-sublabel { font-size: var(--component-focus-mobile-sublabel-font-size);
				font-weight: var(--component-focus-mobile-sublabel-font-weight);
				font-style: var(--component-focus-mobile-sublabel-font-style);
				text-decoration: var(--component-focus-mobile-sublabel-decoration);
				color: var(--component-focus-mobile-sublabel-color); }

*:disabled > .mobile-group-label { font-size: var(--component-disabled-mobile-label-font-size);
				font-weight: var(--component-disabled-mobile-label-font-weight); font-style: var(--component-disabled-mobile-label-font-style);
				text-decoration: var(--component-disabled-mobile-label-decoration); color: var(--component-disabled-mobile-label-color); }
*:disabled > .mobile-group-sublabel { font-size: var(--component-disabled-mobile-sublabel-font-size);
				font-weight: var(--component-disabled-mobile-sublabel-font-weight);
				font-style: var(--component-disabled-mobile-sublabel-font-style);
				text-decoration: var(--component-disabled-mobile-sublabel-decoration);
				color: var(--component-disabled-mobile-sublabel-color); }

/* required marker */
.input-field[required] .group-mainlabel:after, .radio-field[required] .group-mainlabel:after, .checkbox-field[required] .group-mainlabel:after,
	.date-field[required] .group-mainlabel:after, .select-field[required] .group-mainlabel:after, .rating-field[required] .group-mainlabel:after,
	.field-group[required] .group-mainlabel:after, .list-field[required] .group-mainlabel:after, .signature-field[required] .group-mainlabel:after,
	.number-plate-field[required] .group-mainlabel:after, .file-select-field[required] .group-mainlabel:after,
.input-field[required] .mobile-group-mainlabel:after, .radio-field[required] .mobile-group-mainlabel:after, .checkbox-field[required] .mobile-group-mainlabel:after,
	.date-field[required] .mobile-group-mainlabel:after, .select-field[required] .mobile-group-mainlabel:after, .rating-field[required] .mobile-group-mainlabel:after,
	.field-group[required] .mobile-group-mainlabel:after, .list-field[required] .mobile-group-mainlabel:after, .signature-field[required] .mobile-group-mainlabel:after,
	.number-plate-field[required] .mobile-group-mainlabel:after, .file-select-field[required] .mobile-group-mainlabel:after {
				content: "*"; display: inline-block; font-size: var(--component-required-marker-font-size);
				font-weight: var(--component-required-marker-font-weight); position: relative; top: var(--component-required-marker-offset);
				margin: var(--component-required-marker-margin); }
.no-required-marker .input-field[required] .group-mainlabel:after, .no-required-marker .radio-field[required] .group-mainlabel:after,
	.no-required-marker .checkbox-field[required] .group-mainlabel:after, .no-required-marker .date-field[required] .group-mainlabel:after,
	.no-required-marker .select-field[required] .group-mainlabel:after, .no-required-marker .rating-field[required] .group-mainlabel:after,
	.no-required-marker .field-group[required] .group-mainlabel:after, .no-required-marker .list-field[required] .group-mainlabel:after,
	.no-required-marker .signature-field[required] .group-mainlabel:after,
	.no-required-marker .number-plate-field[required] .group-mainlabel:after,
	.no-required-marker .file-select-field[required] .group-mainlabel:after,
.no-required-marker .input-field[required] .mobile-group-mainlabel:after, .no-required-marker .radio-field[required] .mobile-group-mainlabel:after,
	.no-required-marker .checkbox-field[required] .mobile-group-mainlabel:after, .no-required-marker .date-field[required] .mobile-group-mainlabel:after,
	.no-required-marker .select-field[required] .mobile-group-mainlabel:after, .no-required-marker .rating-field[required] .mobile-group-mainlabel:after,
	.no-required-marker .field-group[required] .mobile-group-mainlabel:after, .no-required-marker .list-field[required] .mobile-group-mainlabel:after,
	.no-required-marker .signature-field[required] .mobile-group-mainlabel:after,
	.no-required-marker .number-plate-field[required] .mobile-group-mainlabel:after,
	.no-required-marker .file-select-field[required] .mobile-group-mainlabel:after { content: ""; }

.no-required-marker.input-field[required] .group-mainlabel:after, .no-required-marker.radio-field[required] .group-mainlabel:after,
	.no-required-marker.checkbox-field[required] .group-mainlabel:after, .no-required-marker.date-field[required] .group-mainlabel:after,
	.no-required-marker.select-field[required] .group-mainlabel:after, .no-required-marker.rating-field[required] .group-mainlabel:after,
	.no-required-marker.field-group[required] .group-mainlabel:after, .no-required-marker.list-field[required] .group-mainlabel:after,
	.no-required-marker.signature-field[required] .group-mainlabel:after,
	.no-required-marker.number-plate-field[required] .group-mainlabel:after,
	.no-required-marker.file-select-field[required] .group-mainlabel:after,
.no-required-marker.input-field[required] .mobile-group-mainlabel:after, .no-required-marker.radio-field[required] .mobile-group-mainlabel:after,
	.no-required-marker.checkbox-field[required] .mobile-group-mainlabel:after, .no-required-marker.date-field[required] .mobile-group-mainlabel:after,
	.no-required-marker.select-field[required] .mobile-group-mainlabel:after, .no-required-marker.rating-field[required] .mobile-group-mainlabel:after,
	.no-required-marker.field-group[required] .mobile-group-mainlabel:after, .no-required-marker.list-field[required] .mobile-group-mainlabel:after,
	.no-required-marker.signature-field[required] .mobile-group-mainlabel:after,
	.no-required-marker.number-plate-field[required] .mobile-group-mainlabel:after,
	.no-required-marker.file-select-field[required] .mobile-group-mainlabel:after { content: ""; }

/* error message */
.error-msg { color: var(--error-msg-color); }
.error-msg-hidden { display: none; }
.send-error {}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* dialog row/col layout */

.dialog-row { display: flex; flex-direction: row; flex-wrap: wrap; column-gap: var(--component-gap); margin-bottom: var(--component-row-margin); }
.dialog-row:last-child { margin-bottom: 0; }
.dialog-col { flex: 1 1 0; min-width: var(--component-min-col-width); max-width: 100%; }
.dialog-col.align-right { text-align: right; }
.dialog-row.max-height, .dialog-col.max-height { height: 100%; }

/* horizontal line in dialogs */
hr.dialog, .dialog-row hr, .dialog-col hr, .layout-main hr, .modal-window-body hr {
		background-color: var(--hr-color); height: var(--hr-size); margin: var(--hr-margin); }

/* h1,... */
h1.dialog, .dialog-row h1, .dialog-col h1, .layout-main h1, .modal-window-body h1 {
	max-width: none; margin: 0 0 var(--component-h1-margin) 0; padding: 0; background-color: transparent; hyphens: none;
	font-size: var(--component-h1-font-size); font-weight: var(--component-h1-font-weight); color: var(--component-h1-color);
	line-height: var(--component-h1-line-height);
	font-style:	var(--component-h1-style); text-transform:	var(--component-h1-text-transform); text-align: var(--component-h1-align);
	margin-bottom: var(--component-h1-margin); }
h2.dialog, .dialog-row h2, .dialog-col h2, .layout-main h2, .modal-window-body h2 {
	max-width: none; margin: 0 0 var(--component-h2-margin) 0; padding: 0; background-color: transparent; hyphens: none;
	font-size: var(--component-h2-font-size); font-weight: var(--component-h2-font-weight); color: var(--component-h2-color);
	line-height: var(--component-h2-line-height);
	font-style:	var(--component-h2-style); text-transform:	var(--component-h2-text-transform); text-align: var(--component-h2-align);
	margin-bottom: var(--component-h2-margin); }
h3.dialog, .dialog-row h3, .dialog-col h3, .layout-main h3, .modal-window-body h3 {
	max-width: none; margin: 0 0 var(--component-h3-margin) 0; padding: 0; background-color: transparent; hyphens: none;
	font-size: var(--component-h3-font-size); font-weight: var(--component-h3-font-weight); color: var(--component-h3-color);
	line-height: var(--component-h3-line-height);
	font-style:	var(--component-h3-style); text-transform:	var(--component-h3-text-transform); text-align: var(--component-h3-align);
	margin-bottom: var(--component-h3-margin); }
h4.dialog, .dialog-row h4, .dialog-col h4, .layout-main h4, .modal-window-body h4 {
	max-width: none; margin: 0 0 var(--component-h4-margin) 0; padding: 0; background-color: transparent; hyphens: none;
	font-size: var(--component-h4-font-size); font-weight: var(--component-h4-font-weight); color: var(--component-h4-color);
	line-height: var(--component-h4-line-height);
	font-style:	var(--component-h4-style); text-transform:	var(--component-h4-text-transform); text-align: var(--component-h4-align);
	margin-bottom: var(--component-h4-margin); }



/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* field group:

field-group.field-group.[multiline].[important]
|
+--label.group-label.[label-small]
|  |
|  +--span.group-mainlabel
|  |
|  +--span.group-sublabel
|
+--label.mobile-group-label.[label-small]
|  |
|  +--span.mobile-group-mainlabel
|  |
|  +--span.mobile-group-sublabel
|
+--div.field-group-inner
   |
   +--{sub elements}
*/

/*normal -> important -> required -> empty -> invalid -> focus -> disabled*/
/*todo*/

.field-group { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-margin); }
.field-group.important {} /* todo */
.field-group.inline .field-group-inner { display: flex; flex-direction: row; column-gap: var(--component-inline-gap); }
.dialog-col.align-right .field-group.inline .field-group-inner { justify-content: flex-end; }
.field-group.multiline {}
.field-group .field-group-inner > * { margin-bottom: 0; flex-grow: 1; }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* buttons

button-field.button-field.[inline].[primary].[icon].[icon-only].[important].[focus].[context-button].[function-button]
|
+--label.group-label.[label-small]
|  |
|  +--span.group-mainlabel
|  |
|  +--span.group-sublabel
|
+--label.mobile-group-label.[label-small]
|  |
|  +--span.mobile-group-mainlabel
|  |
|  +--span.mobile-group-sublabel
|
+--div.field-inner
   |
   +--button.[button-icon-left]
      |
      +--span.button-icon
      |  |
      |  +--img
      |
      +--span.button-text
*/

/*normal -> important -> required -> empty -> invalid -> focus -> disabled*/
/*todo*/

.button-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-button-margin); }
.button-field.important {} /* todo */
.button-field.label-top { flex-direction: column; }
.button-field div.field-inner { align-self: var(--component-button-item-align); }
.button-field.label-top div.field-inner { align-self: normal; }
.button-field div button { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;
		padding: var(--component-button-padding); font-family: var(--component-button-font);
		font-size: var(--component-button-font-size); font-weight: var(--component-button-font-weight);
		font-style: var(--component-button-font-style); line-height: var(--component-button-line-height);
		color: var(--component-button-text-color); background-color: var(--component-button-background-color);
		box-shadow: var(--component-button-shadow); border-radius: var(--component-button-border-radius);
		border: var(--component-button-border-size) solid var(--component-button-border-color);
		outline: var(--component-button-outline-size) solid var(--component-button-outline-color);
		outline-offset: var(--component-button-outline-offset); }
.button-field div button:hover {
		font-weight: var(--component-button-hover-font-weight); font-style: var(--component-button-hover-font-style);
		color: var(--component-button-hover-text-color); background-color: var(--component-button-hover-background-color);
		box-shadow: var(--component-button-hover-shadow);
		border: var(--component-button-hover-border-size) solid var(--component-button-hover-border-color);
		outline: var(--component-button-hover-outline-size) solid var(--component-button-hover-outline-color);
		outline-offset: var(--component-button-hover-outline-offset); cursor: pointer; }
.button-field div button:focus { font-weight: var(--component-button-focus-font-weight); font-style: var(--component-button-focus-font-style);
		color: var(--component-button-focus-text-color); background-color: var(--component-button-focus-background-color);
		box-shadow: var(--component-button-focus-shadow);
		border: var(--component-button-focus-border-size) solid var(--component-button-focus-border-color);
		outline: var(--component-button-focus-outline-size) solid var(--component-button-focus-outline-color);
		outline-offset: var(--component-button-focus-outline-offset); }
.button-field div button:disabled { font-weight: var(--component-button-disabled-font-weight); font-style: var(--component-button-disabled-font-style);
		color: var(--component-button-disabled-text-color); background-color: var(--component-button-disabled-background-color);
		box-shadow: var(--component-button-disabled-shadow);
		border: var(--component-button-disabled-border-size) solid var(--component-button-disabled-border-color);
		outline: var(--component-button-disabled-outline-size) solid var(--component-button-disabled-outline-color);
		outline-offset: var(--component-button-disabled-outline-offset); }
.button-field div button:active {
		font-weight: var(--component-button-active-font-weight); font-style: var(--component-button-active-font-style);
		color: var(--component-button-active-text-color); background-color: var(--component-button-active-background-color);
		box-shadow: var(--component-button-active-shadow);
		border: var(--component-button-active-border-size) solid var(--component-button-active-border-color);
		outline: var(--component-button-active-outline-size) solid var(--component-button-active-outline-color);
		outline-offset: var(--component-button-active-outline-offset);
		position: relative; left: var(--component-button-active-offset-x); top: var(--component-button-active-offset-y); }

/* icon button */
.button-field.icon div .field-inner { align-self: var(--component-button-icon-item-align); }
.button-field.icon div button {
		padding: var(--component-button-icon-padding);
		font-family: var(--component-button-icon-font); font-size: var(--component-button-icon-font-size);
		font-weight: var(--component-button-icon-font-weight); font-style: var(--component-button-icon-font-style);
		line-height: var(--component-button-icon-line-height); color: var(--component-button-icon-color);
		background-color: var(--component-button-icon-background-color); box-shadow: var(--component-button-icon-shadow);
		border-radius: var(--component-button-icon-border-radius);
		border: var(--component-button-icon-border-size) solid var(--component-button-icon-border-color);
		outline: var(--component-button-icon-outline-size) solid var(--component-button-icon-outline-color);
		outline-offset: var(--component-button-icon-outline-offset);
		display: flex; flex-direction: column; align-items: center; justify-content: center; }
.button-field.icon.icon-only div button {
		padding: var(--component-button-icon-only-padding); }
.button-field.icon div button .button-text { font-size: var(--component-button-icon-text-font-size);
		font-weight: var(--component-button-icon-text-font-weight); font-style: var(--component-button-icon-text-font-style);
		color: var(--component-button-icon-text-text-color); padding: var(--component-button-icon-text-padding);
		white-space: nowrap; }

.button-field.icon div button:hover {
		font-weight: var(--component-button-icon-hover-font-weight); font-style: var(--component-button-icon-hover-font-style);
		color: var(--component-button-icon-hover-color); background-color: var(--component-button-icon-hover-background-color);
		box-shadow: var(--component-button-icon-hover-shadow);
		border: var(--component-button-icon-hover-border-size) solid var(--component-button-icon-hover-border-color);
		outline: var(--component-button-icon-hover-outline-size) solid var(--component-button-icon-hover-outline-color);
		outline-offset: var(--component-button-icon-hover-outline-offset); cursor: pointer; }
.button-field.icon div button:hover .button-text { font-weight: var(--component-button-icon-hover-text-font-weight);
		font-style: var(--component-button-icon-hover-text-font-style); color: var(--component-button-icon-hover-text-color); }

.button-field.icon div button:focus {
		font-weight: var(--component-button-icon-focus-font-weight); font-style: var(--component-button-icon-focus-font-style);
		color: var(--component-button-icon-focus-color); background-color: var(--component-button-icon-focus-background-color);
		box-shadow: var(--component-button-icon-focus-shadow);
		border: var(--component-button-icon-focus-border-size) solid var(--component-button-icon-focus-border-color);
		outline: var(--component-button-icon-focus-outline-size) solid var(--component-button-icon-focus-outline-color);
		outline-offset: var(--component-button-icon-focus-outline-offset); }
.button-field.icon div button:focus .button-text { font-weight: var(--component-button-icon-focus-text-font-weight);
		font-style: var(--component-button-icon-focus-text-font-style); color: var(--component-button-icon-focus-text-color); }

.button-field.icon div button:disabled {
		font-weight: var(--component-button-icon-disabled-font-weight); font-style: var(--component-button-icon-disabled-font-style);
		color: var(--component-button-icon-disabled-color); background-color: var(--component-button-icon-disabled-background-color);
		box-shadow: var(--component-button-icon-disabled-shadow);
		border: var(--component-button-icon-disabled-border-size) solid var(--component-button-icon-disabled-border-color);
		outline: var(--component-button-icon-disabled-outline-size) solid var(--component-button-icon-disabled-outline-color);
		outline-offset: var(--component-button-icon-disabled-outline-offset); }
.button-field.icon div button:disabled .button-text { font-weight: var(--component-button-icon-disabled-text-font-weight);
		font-style: var(--component-button-icon-disabled-text-font-style); color: var(--component-button-icon-disabled-text-color); }

.button-field.icon div button:active {
		font-weight: var(--component-button-icon-active-font-weight); font-style: var(--component-button-icon-active-font-style);
		color: var(--component-button-icon-active-color); background-color: var(--component-button-icon-active-background-color);
		box-shadow: var(--component-button-icon-active-shadow);
		border: var(--component-button-icon-active-border-size) solid var(--component-button-icon-active-border-color);
		outline: var(--component-button-icon-active-outline-size) solid var(--component-button-icon-active-outline-color);
		outline-offset: var(--component-button-icon-active-outline-offset);
		position: relative; left: var(--component-button-icon-active-offset-x); top: var(--component-button-icon-active-offset-y); }
.button-field.icon div button:active .button-text { font-weight: var(--component-button-icon-active-text-font-weight);
		font-style: var(--component-button-icon-active-text-font-style); color: var(--component-button-icon-active-text-color); }
.button-field.icon div img { flex: 1 1 auto; padding: var(--component-button-icon-img-padding); }
.button-field.icon div button.button-icon-left { flex-direction: row; justify-content: normal; }
.button-field.icon div button.button-icon-left img { padding: var(--component-button-icon-left-img-padding); }
.button-field.icon div button.button-icon-left .button-text { padding: var(--component-button-icon-left-text-padding); }

/* context button*/
.button-field.icon.context-button div button { padding: var(--component-button-context-padding);
		font-size: var(--component-button-context-font-size); width: var(--component-button-context-width);
		height: var(--component-button-context-height); }
.button-field.icon.context-button div button .button-text { font-size: var(--component-button-context-text-font-size);
		padding: var(--component-button-context-text-padding); }
.button-field.icon.context-button div button.button-icon-left .button-text { padding: var(--component-button-context-left-text-padding); }
.button-field.icon.context-button div img { flex: 1 1 auto; padding: var(--component-button-context-img-padding); }
.button-field.icon.context-button div button.button-icon-left img { padding: var(--component-button-context-left-img-padding); }

/* function button */
.button-field.icon.function-button div button { padding: var(--component-button-function-padding);
		font-size: var(--component-button-function-font-size); width: var(--component-button-function-width);
		height: var(--component-button-function-height); }
.button-field.icon.function-button div button .button-text { font-size: var(--component-button-function-text-font-size);
		padding: var(--component-button-function-text-padding); }
.button-field.icon.function-button div button.button-icon-left .button-text { padding: var(--component-button-function-left-text-padding); }
.button-field.icon.function-button div img { flex: 1 1 auto; padding: var(--component-button-function-img-padding); }
.button-field.icon.function-button div button.button-icon-left img { padding: var(--component-button-function-left-img-padding); }

/* primary button */
.button-field.primary div button {
		padding: var(--component-button-primary-padding);
		font-family: var(--component-button-primary-font); font-size: var(--component-button-primary-font-size);
		font-weight: var(--component-button-primary-font-weight); font-style: var(--component-button-primary-font-style);
		line-height: var(--component-button-primary-line-height); color: var(--component-button-primary-text-color);
		background-color: var(--component-button-primary-background-color); box-shadow: var(--component-button-primary-shadow);
		border-radius: var(--component-button-primary-border-radius);
		border: var(--component-button-primary-border-size) solid var(--component-button-primary-border-color);
		outline: var(--component-button-primary-outline-size) solid var(--component-button-primary-outline-color);
		outline-offset: var(--component-button-primary-outline-offset); }
.button-field.primary div button:hover {
		font-weight: var(--component-button-primary-hover-font-weight); font-style: var(--component-button-primary-hover-font-style);
		color: var(--component-button-primary-hover-text-color); background-color: var(--component-button-primary-hover-background-color);
		box-shadow: var(--component-button-primary-hover-shadow);
		border: var(--component-button-primary-hover-border-size) solid var(--component-button-primary-hover-border-color);
		outline: var(--component-button-primary-hover-outline-size) solid var(--component-button-primary-hover-outline-color);
		outline-offset: var(--component-button-primary-hover-outline-offset); cursor: pointer; }
.button-field.primary div button:focus {
		font-weight: var(--component-button-primary-focus-font-weight); font-style: var(--component-button-primary-focus-font-style);
		color: var(--component-button-primary-focus-text-color); background-color: var(--component-button-primary-focus-background-color);
		box-shadow: var(--component-button-primary-focus-shadow);
		border: var(--component-button-primary-focus-border-size) solid var(--component-button-primary-focus-border-color);
		outline: var(--component-button-primary-focus-outline-size) solid var(--component-button-primary-focus-outline-color);
		outline-offset: var(--component-button-primary-focus-outline-offset); }
.button-field.primary div button:disabled {
		font-weight: var(--component-button-primary-disabled-font-weight); font-style: var(--component-button-primary-disabled-font-style);
		color: var(--component-button-primary-disabled-text-color); background-color: var(--component-button-primary-disabled-background-color);
		box-shadow: var(--component-button-primary-disabled-shadow);
		border: var(--component-button-primary-disabled-border-size) solid var(--component-button-primary-disabled-border-color);
		outline: var(--component-button-primary-disabled-outline-size) solid var(--component-button-primary-disabled-outline-color);
		outline-offset: var(--component-button-primary-disabled-outline-offset); }
.button-field.primary div button:active {
		font-weight: var(--component-button-primary-active-font-weight); font-style: var(--component-button-primary-active-font-style);
		color: var(--component-button-primary-active-text-color); background-color: var(--component-button-primary-active-background-color);
		box-shadow: var(--component-button-primary-active-shadow);
		border: var(--component-button-primary-active-border-size) solid var(--component-button-primary-active-border-color);
		outline: var(--component-button-primary-active-outline-size) solid var(--component-button-primary-active-outline-color);
		outline-offset: var(--component-button-primary-active-outline-offset);
		position: relative; left: var(--component-button-primary-active-offset-x); top: var(--component-button-primary-active-offset-y); }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* input field:

input-field.input-field.[input-field-textarea].[inline].[segmented].[important].[empty].[focus].[invalid]
|
+--label.group-label.[label-small]
|  |
|  +--span.group-mainlabel
|  |
|  +--span.group-sublabel
|
+--label.mobile-group-label.[label-small]
|  |
|  +--span.mobile-group-mainlabel
|  |
|  +--span.mobile-group-sublabel
|
+--div.field-inner.[input-field-group-left].[input-field-group-right]
   |
   +--button/div.input-field-addon-left
   |  |
   |  +--span.{left-addon-class}
   |
   +--input/textarea
   |
   +--button/div.input-field-addon-right
      |
      +--span.{right-addon-class}
*/

.input-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-input-margin); }
.input-field.label-top { flex-direction: column; }
.input-field-textarea {}
.input-field div.field-inner { display: flex; flex-direction: row; align-items: stretch; align-self: var(--component-input-item-align);
					 outline: var(--component-input-outline-size) solid var(--component-input-outline-color);
					 outline-offset: var(--component-input-outline-offset); }
.input-field.label-top div.field-inner { align-self: normal; }
.input-field div input, .input-field div textarea, .input-field.ng-invalid div input.ng-untouched, .input-field div input.ng-invalid.ng-untouched,
	.input-field.ng-invalid div textarea.ng-untouched, .input-field div textarea.ng-invalid.ng-untouched {
					 -webkit-appearance: none; -moz-appearance: none; appearance: none; flex: 1 1 auto;
					 width: 100%; max-width: 100%; min-width: 1px; margin: 0;
					 font-family: var(--component-input-font); font-size: var(--component-input-font-size);
					 font-weight: var(--component-input-font-weight); font-style: var(--component-input-font-style);
					 color: var(--component-input-text-color);
					 background-color: var(--component-input-background-color); box-shadow: var(--component-input-shadow);
					 border-radius: var(--component-input-border-radius);
					 border: var(--component-input-border-size) solid var(--component-input-border-color);
					 padding: var(--component-input-padding); }
.input-field div input { line-height: var(--component-input-line-height); }
.input-field div textarea { min-height: var(--component-input-textarea-height); line-height: var(--component-input-textarea-line-height); }
.input-field div input[type=number]::-webkit-inner-spin-button, .input-field div input[type=number]::-webkit-outer-spin-button {
					-webkit-appearance: none; appearance: none; }
.input-field-number div input, .input-field div input[type=number], .input-field-number div input:focus, .input-field div input[type=number]:focus {
					-moz-appearance: textfield; appearance: textfield; text-align: right; }
.input-field input::placeholder, .input-field textarea::placeholder { font-family: var(--component-input-placeholder-font); font-size: var(--component-input-placeholder-font-size);
					font-weight: var(--component-input-placeholder-font-weight); color: var(--component-input-placeholder-color); }

.input-field.important div input, .input-field.important div textarea {
					font-weight: var(--component-input-important-font-weight); font-style: var(--component-input-important-font-style);
					color: var(--component-input-important-text-color); background-color: var(--component-input-important-background-color);
					box-shadow: var(--component-input-important-shadow);
					border: var(--component-input-important-border-size) solid var(--component-input-important-border-color); }
.input-field.important { outline: var(--component-input-important-outline-size) solid var(--component-input-important-outline-color);
					outline-offset: var(--component-input-important-outline-offset); }
.input-field.important input::placeholder, .input-field.important textarea::placeholder { font-weight: var(--component-input-important-placeholder-font-weight);
					font-size: var(--component-input-important-placeholder-font-size); color: var(--component-input-important-placeholder-color); }

.input-field[required] div input, .input-field[required] div textarea {
					font-weight: var(--component-input-required-font-weight); font-style: var(--component-input-required-font-style);
					color: var(--component-input-required-text-color); background-color: var(--component-input-required-background-color);
					box-shadow: var(--component-input-required-shadow);
					border: var(--component-input-required-border-size) solid var(--component-input-required-border-color); }
.input-field[required] { outline: var(--component-input-required-outline-size) solid var(--component-input-required-outline-color);
					 outline-offset: var(--component-input-required-outline-offset); }
.input-field[required] input::placeholder, .input-field[required] textarea::placeholder { font-weight: var(--component-input-required-placeholder-font-weight);
					font-size: var(--component-input-required-placeholder-font-size); color: var(--component-input-required-placeholder-color); }

.input-field.empty div input, .input-field.empty div textarea {
					font-weight: var(--component-input-empty-font-weight); font-style: var(--component-input-empty-font-style);
					color: var(--component-input-empty-text-color); background-color: var(--component-input-empty-background-color);
					box-shadow: var(--component-input-empty-shadow);
					border: var(--component-input-empty-border-size) solid var(--component-input-empty-border-color); }
.input-field.empty { outline: var(--component-input-empty-outline-size) solid var(--component-input-empty-outline-color);
					 outline-offset: var(--component-input-empty-outline-offset); }
.input-field.empty input::placeholder, .input-field.empty textarea::placeholder { font-weight: var(--component-input-empty-placeholder-font-weight);
					font-size: var(--component-input-empty-placeholder-font-size); color: var(--component-input-empty-placeholder-color); }

.input-field.invalid div input, .input-field.invalid div textarea {
					font-weight: var(--component-input-invalid-font-weight); font-style: var(--component-input-invalid-font-style);
					color: var(--component-input-invalid-text-color); background-color: var(--component-input-invalid-background-color);
					box-shadow: var(--component-input-invalid-shadow);
					border: var(--component-input-invalid-border-size) solid var(--component-input-invalid-border-color); }
.input-field.invalid { outline: var(--component-input-invalid-outline-size) solid var(--component-input-invalid-outline-color);
					 outline-offset: var(--component-input-invalid-outline-offset); }
.input-field.invalid input::placeholder, .input-field.invalid textarea::placeholder { font-weight: var(--component-input-invalid-placeholder-font-weight);
					font-size: var(--component-input-invalid-placeholder-font-size); color: var(--component-input-invalid-placeholder-color); }

.input-field.focus div input, .input-field.focus div textarea {
					font-weight: var(--component-input-focus-font-weight); font-style: var(--component-input-focus-font-style);
					color: var(--component-input-focus-text-color); background-color: var(--component-input-focus-background-color);
					box-shadow: var(--component-input-focus-shadow);
					border: var(--component-input-focus-border-size) solid var(--component-input-focus-border-color); }
.input-field.focus { outline: var(--component-input-focus-outline-size) solid var(--component-input-focus-outline-color);
					 outline-offset: var(--component-input-focus-outline-offset); }
.input-field.focus input::placeholder, .input-field.focus textarea::placeholder { font-weight: var(--component-input-focus-placeholder-font-weight);
					font-size: var(--component-input-focus-placeholder-font-size); color: var(--component-input-focus-placeholder-color); }

.input-field:disabled div input, .input-field:disabled div textarea {
					font-weight: var(--component-input-disabled-font-weight); font-style: var(--component-input-disabled-font-style);
					color: var(--component-input-disabled-text-color); background-color: var(--component-input-disabled-background-color);
					box-shadow: var(--component-input-disabled-shadow);
					border: var(--component-input-disabled-border-size) solid var(--component-input-disabled-border-color); }
.input-field:disabled { outline: var(--component-input-disabled-outline-size) solid var(--component-input-disabled-outline-color);
					 outline-offset: var(--component-input-disabled-outline-offset); }
.input-field:disabled input::placeholder, .input-field:disabled textarea::placeholder { font-weight: var(--component-input-disabled-placeholder-font-weight);
					font-size: var(--component-input-disabled-placeholder-font-size); color: var(--component-input-disabled-placeholder-color); }

/* left and right addon */
.input-field .input-field-addon-left, .input-field .input-field-addon-right {
		text-align: center; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block;
		padding: var(--component-input-addon-padding); font-family: var(--component-input-addon-font);
		font-size: var(--component-input-addon-font-size); font-weight: var(--component-input-addon-font-weight);
		font-style: var(--component-input-addon-font-style); line-height: var(--component-input-addon-line-height);
		color: var(--component-input-addon-text-color); background-color: var(--component-input-addon-background-color);
		min-width: var(--component-input-addon-width);
		border: var(--component-input-border-size) solid var(--component-input-border-color); }

.input-field.important .input-field-addon-left, .input-field.important .input-field-addon-right {
		font-weight: var(--component-input-addon-important-font-weight); font-style: var(--component-input-addon-important-font-style);
		color: var(--component-input-addon-important-text-color); background-color: var(--component-input-addon-important-background-color);
		border: var(--component-input-important-border-size) solid var(--component-input-important-border-color); }

.input-field[required] .input-field-addon-left, .input-field[required] .input-field-addon-right {
		font-weight: var(--component-input-addon-required-font-weight); font-style: var(--component-input-addon-required-font-style);
		color: var(--component-input-addon-required-text-color); background-color: var(--component-input-addon-required-background-color);
		border: var(--component-input-required-border-size) solid var(--component-input-required-border-color); }

.input-field.empty .input-field-addon-left, .input-field.empty .input-field-addon-right {
		font-weight: var(--component-input-addon-empty-font-weight); font-style: var(--component-input-addon-empty-font-style);
		color: var(--component-input-addon-empty-text-color); background-color: var(--component-input-addon-empty-background-color);
		border: var(--component-input-empty-border-size) solid var(--component-input-empty-border-color); }

.input-field.invalid .input-field-addon-left, .input-field.invalid .input-field-addon-right {
		font-weight: var(--component-input-addon-invalid-font-weight); font-style: var(--component-input-addon-invalid-font-style);
		color: var(--component-input-addon-invalid-text-color); background-color: var(--component-input-addon-invalid-background-color);
		border: var(--component-input-invalid-border-size) solid var(--component-input-invalid-border-color); }

.input-field.focus .input-field-addon-left, .input-field.focus .input-field-addon-right {
		font-weight: var(--component-input-addon-focus-font-weight); font-style: var(--component-input-addon-focus-font-style);
		color: var(--component-input-addon-focus-text-color); background-color: var(--component-input-addon-focus-background-color);
		border: var(--component-input-focus-border-size) solid var(--component-input-focus-border-color); }

.input-field:disabled .input-field-addon-left, .input-field:disabled .input-field-addon-right {
		font-weight: var(--component-input-addon-disabled-font-weight); font-style: var(--component-input-addon-disabled-font-style);
		color: var(--component-input-addon-disabled-text-color); background-color: var(--component-input-addon-disabled-background-color);
		border: var(--component-input-disabled-border-size) solid var(--component-input-disabled-border-color); }

.input-field .input-field-addon-left, .input-field.important .input-field-addon-left, .input-field[required] .input-field-addon-left,
	.input-field.empty .input-field-addon-left, .input-field.invalid .input-field-addon-left, .input-field.focus .input-field-addon-left
	.input-field:disabled .input-field-addon-left {
		border-right: none; border-top-left-radius: var(--component-input-border-radius);
		border-bottom-left-radius: var(--component-input-border-radius); }
.input-field .input-field-addon-right, .input-field.important .input-field-addon-right, .input-field[required] .input-field-addon-right,
	.input-field.empty .input-field-addon-right, .input-field.invalid .input-field-addon-right, .input-field.focus .input-field-addon-right
	.input-field:disabled .input-field-addon-right {
		border-left: none; border-top-right-radius: var(--component-input-border-radius);
		border-bottom-right-radius: var(--component-input-border-radius); }
.input-field .input-field-group-left input { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-field .input-field-group-right input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-field div button.input-field-addon-left, .input-field div button.input-field-addon-right { cursor: pointer; }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* segmented field:

segmented-field.segmented-field.[inline].[important].[empty].[focus].[invalid]
|
+--label.group-label.[label-small]
|  |
|  +--span.group-mainlabel
|  |
|  +--span.group-sublabel
|
+--label.mobile-group-label.[label-small]
|  |
|  +--span.mobile-group-mainlabel
|  |
|  +--span.mobile-group-sublabel
|
+--div.field-inner.[segmented-field-group-left].[segmented-field-group-right]
   |
   +--button/div.segmented-field-addon-left
   |  |
   |  +--span.{left-addon-class}
   |
   +--div.segment-container
   |  |
   |  +--span.segment-separator.segment-separator0.[separator-align-left|separator-align-right|separator-align-center]
   |  |
   |  +--div.segment.segment0.[segment-number]
   |  |  |
   |  |  +--[span.segment-label.segment-label-top]
   |  |  |
   |  |  +--input.[segment-align-left|segment-align-right|segment-align-center]
   |  |  |
   |  |  +--[span.segment-label.segment-label-bottom]
   |  |
   |  +--span.segment-separator.segment-separator1.[separator-align-left|separator-align-right|separator-align-center]
   |  |
   |  ...
   |  |
   |  +--div.segment.segment[n-1].[segment-number]
   |  |  |
   |  |  +--[span.segment-label.segment-label-top]
   |  |  |
   |  |  +--input.[segment-align-left|segment-align-right|segment-align-center]
   |  |  |
   |  |  +--[span.segment-label.segment-label-bottom]
   |  |
   |  +--span.segment-separator.segment-separator[n].[separator-align-left|separator-align-right|separator-align-center]
   |
   +--button/div.segmented-field-addon-right
      |
      +--span.{right-addon-class}
*/

.segmented-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-input-margin); }
.segmented-field.important {} /* todo */
.segmented-field.label-top { flex-direction: column; }
.segmented-field-textarea {}
.segmented-field div.field-inner { display: flex; flex-direction: row; align-items: stretch; align-self: var(--component-segmented-item-align);
					 outline: var(--component-segmented-outline-size) solid var(--component-segmented-outline-color);
					 outline-offset: var(--component-segmented-outline-offset); }
.segmented-field.label-top div.field-inner { align-self: normal; }
.segmented-field .segment-container { display: flex; flex-direction: row; align-items: var(--component-segmented-container-align);
					width: 100%; max-width: 100%; min-width: 1px; margin: 0;
					 font-family: var(--component-segmented-font); font-size: var(--component-segmented-font-size);
					 font-weight: var(--component-segmented-font-weight); font-style: var(--component-segmented-font-style);
					 line-height: var(--component-segmented-line-height);
					 background-color: var(--component-segmented-background-color); box-shadow: var(--component-segmented-shadow);
					 border-radius: var(--component-segmented-border-radius);
					 border: var(--component-segmented-border-size) solid var(--component-segmented-border-color);
					 padding: var(--component-segmented-padding); }
.segmented-field .segment-separator { margin: 0;
					 font-family: var(--component-segmented-font); font-size: var(--component-segmented-separator-font-size);
					 font-weight: var(--component-segmented-separator-font-weight); font-style: var(--component-segmented-separator-font-style);
					 line-height: var(--component-segmented-separator-line-height); color: var(--component-segmented-separator-text-color);
					 background-color: var(--component-segmented-separator-background-color); box-shadow: var(--component-segmented-separator-shadow);
					 border-radius: var(--component-segmented-separator-border-radius);
					 border: var(--component-segmented-separator-border-size) solid var(--component-segmented-separator-border-color);
					 padding: var(--component-segmented-separator-padding); }
.segmented-field .segment-separator:first-child { padding: var(--component-segmented-separator-first-padding); }
.segmented-field .segment-separator:last-child { padding: var(--component-segmented-separator-last-padding); }
.segmented-field .segment { flex: 1 1 auto; }
.segmented-field .segment-align-left, .segmented-field .separator-align-left { text-align: left; }
.segmented-field .segment-align-center, .segmented-field .separator-align-center { text-align: center; }
.segmented-field .segment-align-right, .segmented-field .separator-align-right { text-align: right; }
.segmented-field .segment-label {}
.segmented-field .segment-label-top {}
.segmented-field div input, .segmented-field div input.ng-untouched, .segmented-field div input.ng-untouched {
					 -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield;
					 width: 100%; max-width: 100%; min-width: 1px; margin: 0;
					 font-family: var(--component-segmented-font); font-size: var(--component-segmented-font-size);
					 font-weight: var(--component-segmented-font-weight); font-style: var(--component-segmented-font-style);
					 line-height: var(--component-segmented-line-height); color: var(--component-segmented-text-color);
					 background-color: var(--component-segmented-segment-background-color); box-shadow: var(--component-segmented-segment-shadow);
					 border-radius: var(--component-segmented-segment-border-radius);
					 border: var(--component-segmented-segment-border-size) solid var(--component-segmented-segment-border-color);
					 padding: var(--component-segmented-segment-padding); }
.segmented-field div input[type=number]::-webkit-inner-spin-button, .segmented-field div input[type=number]::-webkit-outer-spin-button {
					-webkit-appearance: none; appearance: none; }
.segmented-field div input[type=number], .segmented-field div input[type=number]:focus, .segmented-field div .segment-number input,
.segmented-field div .segment-number input:focus {
					-moz-appearance: textfield; appearance: textfield; text-align: right; }
.segmented-field input::placeholder { font-family: var(--component-segmented-placeholder-font); font-size: var(--component-segmented-placeholder-font-size);
					font-weight: var(--component-segmented-placeholder-font-weight); color: var(--component-segmented-placeholder-color); }

.segmented-field.important .segment-container {
					font-weight: var(--component-segmented-important-font-weight); font-style: var(--component-segmented-important-font-style);
					color: var(--component-segmented-important-text-color); background-color: var(--component-segmented-important-background-color);
					box-shadow: var(--component-segmented-important-shadow);
					border: var(--component-segmented-important-border-size) solid var(--component-segmented-important-border-color); }
.segmented-field.important .segment-separator {
					font-weight: var(--component-segmented-important-separator-font-weight); font-style: var(--component-segmented-important-separator-font-style);
					color: var(--component-segmented-important-separator-text-color); background-color: var(--component-segmented-important-separator-background-color);
					box-shadow: var(--component-segmented-important-separator-shadow);
					border: var(--component-segmented-important-separator-border-size) solid var(--component-segmented-important-separator-border-color); }
.segmented-field.important div input {
					font-weight: var(--component-segmented-important-font-weight); font-style: var(--component-segmented-important-font-style);
					color: var(--component-segmented-important-text-color); background-color: var(--component-segmented-important-segment-background-color);
					box-shadow: var(--component-segmented-important-segment-shadow);
					border: var(--component-segmented-important-segment-border-size) solid var(--component-segmented-important-segment-border-color); }
.segmented-field.important { outline: var(--component-segmented-important-outline-size) solid var(--component-segmented-important-outline-color);
						 outline-offset: var(--component-segmented-important-outline-offset); }
.segmented-field.important input::placeholder {font-size: var(--component-segmented-important-placeholder-font-size);
					font-weight: var(--component-segmented-important-placeholder-font-weight); color: var(--component-segmented-important-placeholder-color); }

.segmented-field[required] .segment-container {
					font-weight: var(--component-segmented-required-font-weight); font-style: var(--component-segmented-required-font-style);
					color: var(--component-segmented-required-text-color); background-color: var(--component-segmented-required-background-color);
					box-shadow: var(--component-segmented-required-shadow);
					border: var(--component-segmented-required-border-size) solid var(--component-segmented-required-border-color); }
.segmented-field[required] .segment-separator {
					font-weight: var(--component-segmented-required-separator-font-weight); font-style: var(--component-segmented-required-separator-font-style);
					color: var(--component-segmented-required-separator-text-color); background-color: var(--component-segmented-required-separator-background-color);
					box-shadow: var(--component-segmented-required-separator-shadow);
					border: var(--component-segmented-required-separator-border-size) solid var(--component-segmented-required-separator-border-color); }
.segmented-field[required] div input {
					font-weight: var(--component-segmented-required-font-weight); font-style: var(--component-segmented-required-font-style);
					color: var(--component-segmented-required-text-color); background-color: var(--component-segmented-required-segment-background-color);
					box-shadow: var(--component-segmented-required-segment-shadow);
					border: var(--component-segmented-required-segment-border-size) solid var(--component-segmented-required-segment-border-color); }
.segmented-field[required] { outline: var(--component-segmented-required-outline-size) solid var(--component-segmented-required-outline-color);
						 outline-offset: var(--component-segmented-required-outline-offset); }
.segmented-field[reqired] input::placeholder {font-size: var(--component-segmented-reqired-placeholder-font-size);
					font-weight: var(--component-segmented-reqired-placeholder-font-weight); color: var(--component-segmented-reqired-placeholder-color); }

.segmented-field.empty .segment-container {
					font-weight: var(--component-segmented-empty-font-weight); font-style: var(--component-segmented-empty-font-style);
					color: var(--component-segmented-empty-text-color); background-color: var(--component-segmented-empty-background-color);
					box-shadow: var(--component-segmented-empty-shadow);
					border: var(--component-segmented-empty-border-size) solid var(--component-segmented-empty-border-color); }
.segmented-field.empty .segment-separator {
					font-weight: var(--component-segmented-empty-separator-font-weight); font-style: var(--component-segmented-empty-separator-font-style);
					color: var(--component-segmented-empty-separator-text-color); background-color: var(--component-segmented-empty-separator-background-color);
					box-shadow: var(--component-segmented-empty-separator-shadow);
					border: var(--component-segmented-empty-separator-border-size) solid var(--component-segmented-empty-separator-border-color); }
.segmented-field.empty div input {
					font-weight: var(--component-segmented-empty-font-weight); font-style: var(--component-segmented-empty-font-style);
					color: var(--component-segmented-empty-text-color); background-color: var(--component-segmented-empty-segment-background-color);
					box-shadow: var(--component-segmented-empty-segment-shadow);
					border: var(--component-segmented-empty-segment-border-size) solid var(--component-segmented-empty-segment-border-color); }
.segmented-field.empty { outline: var(--component-segmented-empty-outline-size) solid var(--component-segmented-empty-outline-color);
						 outline-offset: var(--component-segmented-empty-outline-offset); }
.segmented-field.empty input::placeholder {font-size: var(--component-segmented-empty-placeholder-font-size);
					font-weight: var(--component-segmented-empty-placeholder-font-weight); color: var(--component-segmented-empty-placeholder-color); }

.segmented-field.invalid .segment-container {
					font-weight: var(--component-segmented-invalid-font-weight); font-style: var(--component-segmented-invalid-font-style);
					color: var(--component-segmented-invalid-text-color); background-color: var(--component-segmented-invalid-background-color);
					box-shadow: var(--component-segmented-invalid-shadow);
					border: var(--component-segmented-invalid-border-size) solid var(--component-segmented-invalid-border-color); }
.segmented-field.invalid .segment-separator {
					font-weight: var(--component-segmented-invalid-separator-font-weight); font-style: var(--component-segmented-invalid-separator-font-style);
					color: var(--component-segmented-invalid-separator-text-color); background-color: var(--component-segmented-invalid-separator-background-color);
					box-shadow: var(--component-segmented-invalid-separator-shadow);
					border: var(--component-segmented-invalid-separator-border-size) solid var(--component-segmented-invalid-separator-border-color); }
.segmented-field.invalid div input {
					font-weight: var(--component-segmented-invalid-font-weight); font-style: var(--component-segmented-invalid-font-style);
					color: var(--component-segmented-invalid-text-color); background-color: var(--component-segmented-invalid-segment-background-color);
					box-shadow: var(--component-segmented-invalid-segment-shadow);
					border: var(--component-segmented-invalid-segment-border-size) solid var(--component-segmented-invalid-segment-border-color); }
.segmented-field.invalid { outline: var(--component-segmented-invalid-outline-size) solid var(--component-segmented-invalid-outline-color);
						  outline-offset: var(--component-segmented-invalid-outline-offset);  }
.segmented-field.invalid input::placeholder {font-size: var(--component-segmented-invalid-placeholder-font-size);
					font-weight: var(--component-segmented-invalid-placeholder-font-weight); color: var(--component-segmented-invalid-placeholder-color); }

.segmented-field.focus .segment-container {
					font-weight: var(--component-segmented-focus-font-weight); font-style: var(--component-segmented-focus-font-style);
					color: var(--component-segmented-focus-text-color); background-color: var(--component-segmented-focus-background-color);
					box-shadow: var(--component-segmented-focus-shadow);
					border: var(--component-segmented-focus-border-size) solid var(--component-segmented-focus-border-color); }
.segmented-field.focus .segment-separator {
					font-weight: var(--component-segmented-focus-separator-font-weight); font-style: var(--component-segmented-focus-separator-font-style);
					color: var(--component-segmented-focus-separator-text-color); background-color: var(--component-segmented-focus-separator-background-color);
					box-shadow: var(--component-segmented-focus-separator-shadow);
					border: var(--component-segmented-focus-separator-border-size) solid var(--component-segmented-focus-separator-border-color); }
.segmented-field.focus div input {
					font-weight: var(--component-segmented-focus-font-weight); font-style: var(--component-segmented-focus-font-style);
					color: var(--component-segmented-focus-text-color); background-color: var(--component-segmented-focus-segment-background-color);
					box-shadow: var(--component-segmented-focus-segment-shadow);
					border: var(--component-segmented-focus-segment-border-size) solid var(--component-segmented-focus-segment-border-color); }
.segmented-field.focus { outline: var(--component-segmented-focus-outline-size) solid var(--component-segmented-focus-outline-color);
						 outline-offset: var(--component-segmented-focus-outline-offset); }
.segmented-field.focus input::placeholder {font-size: var(--component-segmented-focus-placeholder-font-size);
					font-weight: var(--component-segmented-focus-placeholder-font-weight); color: var(--component-segmented-focus-placeholder-color); }

.segmented-field:disabled .segment-container {
					font-weight: var(--component-segmented-disabled-font-weight); font-style: var(--component-segmented-disabled-font-style);
					color: var(--component-segmented-disabled-text-color); background-color: var(--component-segmented-disabled-background-color);
					box-shadow: var(--component-segmented-disabled-shadow);
					border: var(--component-segmented-disabled-border-size) solid var(--component-segmented-disabled-border-color); }
.segmented-field:disabled .segment-separator {
					font-weight: var(--component-segmented-disabled-separator-font-weight); font-style: var(--component-segmented-disabled-separator-font-style);
					color: var(--component-segmented-disabled-separator-text-color); background-color: var(--component-segmented-disabled-separator-background-color);
					box-shadow: var(--component-segmented-disabled-separator-shadow);
					border: var(--component-segmented-disabled-separator-border-size) solid var(--component-segmented-disabled-separator-border-color); }
.segmented-field:disabled div input {
					font-weight: var(--component-segmented-disabled-font-weight); font-style: var(--component-segmented-disabled-font-style);
					color: var(--component-segmented-disabled-text-color); background-color: var(--component-segmented-disabled-segment-background-color);
					box-shadow: var(--component-segmented-disabled-segment-shadow);
					border: var(--component-segmented-disabled-segment-border-size) solid var(--component-segmented-disabled-segment-border-color); }
.segmented-field:disabled { outline: var(--component-segmented-disabled-outline-size) solid var(--component-segmented-disabled-outline-color);
						outline-offset: var(--component-segmented-disabled-outline-offset);  }
.segmented-field:disabled input::placeholder {font-size: var(--component-segmented-disabled-placeholder-font-size);
					font-weight: var(--component-segmented-disabled-placeholder-font-weight); color: var(--component-segmented-disabled-placeholder-color); }

.segmented-field .segmented-field-addon-left, .segmented-field .segmented-field-addon-right {
		text-align: center; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block;
		padding: var(--component-segmented-addon-padding); font-family: var(--component-segmented-addon-font);
		font-size: var(--component-segmented-addon-font-size); font-weight: var(--component-segmented-addon-font-weight);
		font-style: var(--component-segmented-addon-font-style); line-height: var(--component-segmented-addon-line-height);
		color: var(--component-segmented-addon-text-color); background-color: var(--component-segmented-addon-background-color);
		min-width: var(--component-segmented-addon-width);
		border: var(--component-segmented-border-size) solid var(--component-segmented-border-color); }

.segmented-field.important .segmented-field-addon-left, .segmented-field.important .segmented-field-addon-right {
		font-weight: var(--component-segmented-addon-important-font-weight); font-style: var(--component-segmented-addon-important-font-style);
		color: var(--component-segmented-addon-important-text-color); background-color: var(--component-segmented-addon-important-background-color);
		border: var(--component-segmented-important-border-size) solid var(--component-segmented-important-border-color); }
.segmented-field[required] .segmented-field-addon-left, .segmented-field[required] .segmented-field-addon-right {
		font-weight: var(--component-segmented-addon-required-font-weight); font-style: var(--component-segmented-addon-required-font-style);
		color: var(--component-segmented-addon-required-text-color); background-color: var(--component-segmented-addon-required-background-color);
		border: var(--component-segmented-required-border-size) solid var(--component-segmented-required-border-color); }
.segmented-field.empty .segmented-field-addon-left, .segmented-field.empty .segmented-field-addon-right {
		font-weight: var(--component-segmented-addon-empty-font-weight); font-style: var(--component-segmented-addon-empty-font-style);
		color: var(--component-segmented-addon-empty-text-color); background-color: var(--component-segmented-addon-empty-background-color);
		border: var(--component-segmented-empty-border-size) solid var(--component-segmented-empty-border-color); }
.segmented-field.invalid .segmented-field-addon-left, .segmented-field.invalid .segmented-field-addon-right {
		font-weight: var(--component-segmented-addon-invalid-font-weight); font-style: var(--component-segmented-addon-invalid-font-style);
		color: var(--component-segmented-addon-invalid-text-color); background-color: var(--component-segmented-addon-invalid-background-color);
		border: var(--component-segmented-invalid-border-size) solid var(--component-segmented-invalid-border-color); }
.segmented-field:disabled .segmented-field-addon-left, .segmented-field:disabled .segmented-field-addon-right {
		font-weight: var(--component-segmented-addon-disabled-font-weight); font-style: var(--component-segmented-addon-disabled-font-style);
		color: var(--component-segmented-addon-disabled-text-color); background-color: var(--component-segmented-addon-disabled-background-color);
		border: var(--component-segmented-disabled-border-size) solid var(--component-segmented-disabled-border-color); }

.segmented-field .segmented-field-addon-left, .segmented-field.important .segmented-field-addon-left,
.segmented-field[required] .segmented-field-addon-left, .segmented-field.empty .segmented-field-addon-left,
.segmented-field.invalid .segmented-field-addon-left, .segmented-field.focus .segmented-field-addon-left,
.segmented-field:disabled .segmented-field-addon-left {
		border-right: none; border-top-left-radius: var(--component-segmented-border-radius);
		border-bottom-left-radius: var(--component-segmented-border-radius); }
.segmented-field .segmented-field-addon-right, .segmented-field.important .segmented-field-addon-right,
.segmented-field[required] .segmented-field-addon-right, .segmented-field.empty .segmented-field-addon-right,
.segmented-field.invalid .segmented-field-addon-right, .segmented-field.focus .segmented-field-addon-right,
.segmented-field:disabled .segmented-field-addon-right {
		border-left: none; border-top-right-radius: var(--component-segmented-border-radius);
		border-bottom-right-radius: var(--component-segmented-border-radius); }
.segmented-field .segmented-field-group-left input { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.segmented-field .segmented-field-group-right input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.segmented-field div button.segmented-field-addon-left, .segmented-field div button.segmented-field-addon-right { cursor: pointer; }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* signature field:

signature-field.signature-field.[inline].[important].[empty].[focus].[invalid]
|
+--label.group-label.[label-small]
|  |
|  +--span.group-mainlabel
|  |
|  +--span.group-sublabel
|
+--label.mobile-group-label.[label-small]
|  |
|  +--span.mobile-group-mainlabel
|  |
|  +--span.mobile-group-sublabel
|
+--div.field-inner
   |
   +--{div.signature-field-button-container.signature-field-buttons-left} attributes "remove-button" "clear-button" "ok-button" "buttons-left"
   |  |
   |  +--button-field.signature-field-clear
   |  |
   |  +--button-field.signature-field-revert
   |  |
   |  +--button-field.signature-field-ok
   |
   +--div.signature-container
   |  |
   |  +--{div.signature-field-date-location-container} attributes "with-date" "with-location"
   |  |  |
   |  |  +--input-field.signature-field-location
   |  |  |
   |  |  +--date-field.signature-field-date
   |  |
   |  +--div.signature
   |     |
   |     +--canvas
   |
   +--{div.signature-field-button-container} attributes "remove-button" "clear-button" "ok-button"
      |
      +--button-field.signature-field-clear
      |
      +--button-field.signature-field-revert
      |
      +--button-field.signature-field-ok
*/

.signature-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-signature-margin); }
.signature-field.important {} /* todo */
.signature-field.label-top { flex-direction: column; }
.signature-field .field-inner { display: flex; flex-direction: row; align-items: stretch; align-self: var(--component-signature-item-align);
					 outline: var(--component-signature-outline-size) solid var(--component-signature-outline-color);
					 outline-offset: var(--component-signature-outline-offset); }
.signature-field.label-top .field-inner { align-self: normal; }
.signature-field .signature-container { width: 100%; max-width: 100%; }
.signature-field .signature-field-date-location-container { display: flex; flex-direction: row; column-gap: var(--component-inline-gap); }
.signature-field .signature-field-location { }
.signature-field .signature-field-date { min-width: 190px; max-width: 400px; margin-bottom: 0; }

.signature-field .signature, .signature-field.ng-untouched .signature, .signature-field.ng-invalid.ng-untouched .signature,
.signature-field .signature.ng-untouched, .signature-field .signature.ng-invalid.ng-untouched {
					 width: 100%; max-width: 100%; min-height: 1px; height: var(--component-signature-height); margin: 0; padding: 0;
					 background-color: var(--component-signature-background-color); box-shadow: var(--component-signature-shadow);
					 border-radius: var(--component-signature-border-radius);
					 border: var(--component-signature-border-size) solid var(--component-signature-border-color);
					 padding: var(--component-signature-padding); }

.signature-field.important .signature {
					background-color: var(--component-signature-important-background-color); box-shadow: var(--component-signature-important-shadow);
					border: var(--component-signature-important-border-size) solid var(--component-signature-important-border-color); }
.signature-field.important { outline: var(--component-signature-important-outline-size) solid var(--component-signature-important-outline-color);
						  outline-offset: var(--component-signature-important-outline-offset);  }

.signature-field[required] .signature {
					background-color: var(--component-signature-required-background-color); box-shadow: var(--component-signature-required-shadow);
					border: var(--component-signature-required-border-size) solid var(--component-signature-required-border-color); }
.signature-field[required] { outline: var(--component-signature-required-outline-size) solid var(--component-signature-required-outline-color);
						  outline-offset: var(--component-signature-required-outline-offset);  }

.signature-field.empty .signature {
					background-color: var(--component-signature-empty-background-color); box-shadow: var(--component-signature-empty-shadow);
					border: var(--component-signature-empty-border-size) solid var(--component-signature-empty-border-color); }
.signature-field.empty { outline: var(--component-signature-empty-outline-size) solid var(--component-signature-empty-outline-color);
						  outline-offset: var(--component-signature-empty-outline-offset);  }

.signature-field.invalid .signature {
					background-color: var(--component-signature-invalid-background-color); box-shadow: var(--component-signature-invalid-shadow);
					border: var(--component-signature-invalid-border-size) solid var(--component-signature-invalid-border-color); }
.signature-field.invalid { outline: var(--component-signature-invalid-outline-size) solid var(--component-signature-invalid-outline-color);
						  outline-offset: var(--component-signature-invalid-outline-offset);  }

.signature-field.focus .signature {
					background-color: var(--component-signature-focus-background-color); box-shadow: var(--component-signature-focus-shadow);
					border: var(--component-signature-focus-border-size) solid var(--component-signature-focus-border-color); }
.signature-field.focus { outline: var(--component-signature-focus-outline-size) solid var(--component-signature-focus-outline-color);
						  outline-offset: var(--component-signature-focus-outline-offset);  }

.signature-field .signature:disabled {
					background-color: var(--component-signature-disabled-background-color); box-shadow: var(--component-signature-disabled-shadow);
					border: var(--component-signature-disabled-border-size) solid var(--component-signature-disabled-border-color); }
.signature-field:disabled { outline: var(--component-signature-disabled-outline-size) solid var(--component-signature-disabled-outline-color);
						outline-offset: var(--component-signature-disabled-outline-offset);  }

.signature-field .field-inner { display: flex; flex-direction: var(--component-signature-button-container-pos); }
.signature-field .signature { flex: 1 1 0; position: relative; }
.signature-field-button-container { margin-left: var(--component-signature-button-container-margin);
									align-self: var(--component-signature-button-container-align);
									display: flex; flex-direction: var(--component-signature-button-pos);
									gap: var(--component-signature-button-gap); }
.signature-field-button-container.signature-field-buttons-left { margin-left: 0; margin-right: var(--component-signature-button-container-margin); }
.signature-field-button-container .button-field { margin: var(--component-signature-button-margin); }
.signature-field canvas { width: 100%; height: 100%; }
.signature-field .button-field { width: var(--component-signature-button-width); height: var(--component-signature-button-height); }
.signature-field .button-field .field-inner, .signature-field .button-field button { width: 100%; }
.signature-field .signature-field-button-container .signature-field-ok { margin-top: auto; }


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* static field:

static-field.static-field.[inline].[important]
|
+--label.group-label.[label-small]
|  |
|  +--span.group-mainlabel
|  |
|  +--span.group-sublabel
|
+--label.mobile-group-label.[label-small]
|  |
|  +--span.mobile-group-mainlabel
|  |
|  +--span.mobile-group-sublabel
|
+--div.field-inner.[static-field-group-left].[static-field-group-right]
   |
   +--div.static-field-addon-left
   |  |
   |  +--span.{left-addon-class}
   |
   +--span
   |
   +--div.static-field-addon-right
      |
      +--span.{right-addon-class}
*/

.static-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-static-margin); }
.static-field.important {} /* todo */
.static-field.label-top { flex-direction: column; }
.static-field .field-inner { align-self: var(--component-static-item-align); }
.static-field.label-top .field-inner { align-self: normal; }
.static-field .field-inner > span { padding: var(--component-static-padding); font-family: var(--component-static-font);
									font-size: var(--component-static-font-size); font-weight: var(--component-static-font-weight);
									font-style: var(--component-static-font-style); line-height: var(--component-static-line-height);
									color: var(--component-static-text-color); background-color: var(--component-static-background-color);
									box-shadow: var(--component-static-shadow); border-radius: var(--component-static-border-radius);
									border: var(--component-static-border-size) solid var(--component-static-border-color);
									outline: var(--component-static-outline-size) solid var(--component-static-outline-color);
									outline-offset: var(--component-static-outline-offset); display: inline-block; }
.static-field .field-inner > span:after { content: "\00a0"; }	/* ensure that the element height is always the same, even if empty */
.static-field:disabled .field-inner > span {
									font-size: var(--component-static-disabled-font-weight);
									 font-weight: var(--component-static-disabled-font-style);
									 color: var(--component-static-disabled-text-color);
									 background-color: var(--component-static-disabled-background-color);
									 box-shadow: var(--component-static-disabled-shadow);
									 border: var(--component-static-disabled-border-size) solid var(--component-static-disabled-border-color);
									 outline: var(--component-static-disabled-outline-size) solid var(--component-static-disabled-outline-color);
									 outline-offset: var(--component-static-disabled-outline-offset); }


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* select field:

select-field.select-field.[inline].[important].[empty].[focus].[invalid]
|
+--label.group-label.[label-small]
|  |
|  +--span.group-mainlabel
|  |
|  +--span.group-sublabel
|
+--label.mobile-group-label.[label-small]
|  |
|  +--span.mobile-group-mainlabel
|  |
|  +--span.mobile-group-sublabel
|
+--div.field-inner
|  |
|  +--input
|  |
|  +--div.select-field-caret
|     |
|     +--span.{caret-class}
|
+--div.select-option-list
   |
   +--(multiple): select-option.select-option
   |  |
   |  +--div
   |
   +--select-option.new-value
      |
      +--div


* multiselect field:

select-field.select-field.select-field-multi.[inline].[important].[empty].[focus].[invalid]
|
+--label.group-label.[label-small]
|  |
|  +--span.group-mainlabel
|  |
|  +--span.group-sublabel
|
+--label.mobile-group-label.[label-small]
|  |
|  +--span.mobile-group-mainlabel
|  |
|  +--span.mobile-group-sublabel
|
+--div.field-inner
|  |
|  +--div.select-tag-container
|  |  |
|  |  +--div.select-tag-list
|  |  |  |
|  |  |  +--(multiple): div.select-tag
|  |  |     |
|  |  |     +--span.select-tag-value
|  |  |     |
|  |  |     +--span.select-tag-x
|  |  |
|  |  +--input
|  |
|  +--div.select-field-caret
|     |
|     +--span.{caret-class}
|
+--div.select-option-list
   |
   +--(multiple): select-option.select-option
   |  |
   |  +--div
   |
   +--select-option.new-value
      |
      +--div
*/

.select-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-select-margin); cursor: pointer; }
.select-field.important {} /* todo */
.select-field.label-top { flex-direction: column; }
.select-field .field-inner { display: flex; flex-direction: row; align-self: var(--component-select-item-align); }
.select-field.label-top .field-inner { align-self: normal; }

.select-field input, .select-field.ng-invalid.ng-untouched input, .select-field input.ng-invalid.ng-untouched {
					flex: 1 1 auto;
					-webkit-appearance: none; -moz-appearance: none; appearance: none;
					width: 100%; max-width: 100%; min-width: 1px; margin: 0;
					padding: var(--component-select-padding); font-family: var(--component-select-font);
					font-size: var(--component-select-font-size); font-weight: var(--component-select-font-weight);
					font-style: var(--component-select-font-style); line-height: var(--component-select-line-height);
					color: var(--component-select-text-color); background-color: var(--component-select-background-color);
					box-shadow: var(--component-select-shadow); border-top-left-radius: var(--component-select-border-radius);
					border-bottom-left-radius: var(--component-select-border-radius);
					border: var(--component-select-border-size) solid var(--component-select-border-color);
					outline: var(--component-select-outline-size) solid var(--component-select-outline-color);
					outline-offset: var(--component-select-outline-offset); display: inline-block; cursor: pointer; }
.select-field input::placeholder { font-family: var(--component-select-placeholder-font); font-size: var(--component-select-placeholder-font-size);
					font-weight: var(--component-select-placeholder-font-weight); color: var(--component-select-placeholder-color); }

.select-field.important input {
					font-weight: var(--component-select-important-font-weight); font-style: var(--component-select-important-font-style);
					color: var(--component-select-important-text-color); background-color: var(--component-select-important-background-color);
					box-shadow: var(--component-select-important-shadow);
					border: var(--component-select-important-border-size) solid var(--component-select-important-border-color);
					outline: var(--component-select-important-outline-size) solid var(--component-select-important-outline-color);
					outline-offset: var(--component-select-important-outline-offset); }
.select-field.important input::placeholder { font-size: var(--component-select-important-placeholder-font-size);
					font-weight: var(--component-select-important-placeholder-font-weight); color: var(--component-select-important-placeholder-color); }
.select-field[required] input {
					font-weight: var(--component-select-required-font-weight); font-style: var(--component-select-required-font-style);
					color: var(--component-select-required-text-color); background-color: var(--component-select-required-background-color);
					box-shadow: var(--component-select-required-shadow);
					border: var(--component-select-required-border-size) solid var(--component-select-required-border-color);
					outline: var(--component-select-required-outline-size) solid var(--component-select-required-outline-color);
					outline-offset: var(--component-select-required-outline-offset); }
.select-field[required] input::placeholder { font-size: var(--component-select-required-placeholder-font-size);
					font-weight: var(--component-select-required-placeholder-font-weight); color: var(--component-select-required-placeholder-color); }
.select-field.empty input {
					font-weight: var(--component-select-empty-font-weight); font-style: var(--component-select-empty-font-style);
					color: var(--component-select-empty-text-color); background-color: var(--component-select-empty-background-color);
					box-shadow: var(--component-select-empty-shadow);
					border: var(--component-select-empty-border-size) solid var(--component-select-empty-border-color);
					outline: var(--component-select-empty-outline-size) solid var(--component-select-empty-outline-color);
					outline-offset: var(--component-select-empty-outline-offset); }
.select-field.empty input::placeholder { font-size: var(--component-select-empty-placeholder-font-size);
					font-weight: var(--component-select-empty-placeholder-font-weight); color: var(--component-select-empty-placeholder-color); }
.select-field.invalid input {
					font-weight: var(--component-select-invalid-font-weight); font-style: var(--component-select-invalid-font-style);
					color: var(--component-select-invalid-text-color); background-color: var(--component-select-invalid-background-color);
					box-shadow: var(--component-select-invalid-shadow);
					border: var(--component-select-invalid-border-size) solid var(--component-select-invalid-border-color);
					outline: var(--component-select-invalid-outline-size) solid var(--component-select-invalid-outline-color);
					outline-offset: var(--component-select-invalid-outline-offset); }
.select-field.invalid input::placeholder { font-size: var(--component-select-invalid-placeholder-font-size);
					font-weight: var(--component-select-invalid-placeholder-font-weight); color: var(--component-select-invalid-placeholder-color); }
.select-field.focus input {
					font-weight: var(--component-select-focus-font-weight); font-style: var(--component-select-focus-font-style);
					color: var(--component-select-focus-text-color); background-color: var(--component-select-focus-background-color);
					box-shadow: var(--component-select-focus-shadow);
					border: var(--component-select-focus-border-size) solid var(--component-select-focus-border-color);
					outline: var(--component-select-focus-outline-size) solid var(--component-select-focus-outline-color);
					outline-offset: var(--component-select-focus-outline-offset); }
.select-field.focus input::placeholder { font-size: var(--component-select-focus-placeholder-font-size);
					font-weight: var(--component-select-focus-placeholder-font-weight); color: var(--component-select-focus-placeholder-color); }
.select-field:disabled input {
					font-weight: var(--component-select-disabled-font-weight); font-style: var(--component-select-disabled-font-style);
					color: var(--component-select-disabled-text-color); background-color: var(--component-select-disabled-background-color);
					box-shadow: var(--component-select-disabled-shadow);
					border: var(--component-select-disabled-border-size) solid var(--component-select-disabled-border-color);
					outline: var(--component-select-disabled-outline-size) solid var(--component-select-disabled-outline-color);
					outline-offset: var(--component-select-disabled-outline-offset); }
.select-field:disabled input::placeholder { font-size: var(--component-select-disabled-placeholder-font-size);
					font-weight: var(--component-select-disabled-placeholder-font-weight); color: var(--component-select-disabled-placeholder-color); }

.select-field .select-field-caret, .select-field.ng-invalid.ng-untouched .select-field-caret {
					padding: var(--component-select-caret-padding); border-top-right-radius: var(--component-select-caret-border-radius);
					border-bottom-right-radius: var(--component-select-caret-border-radius);
					border: var(--component-select-caret-border-size) solid var(--component-select-caret-border-color);
					outline: var(--component-select-caret-outline-size) solid var(--component-select-caret-outline-color);
					outline-offset: var(--component-select-caret-outline-offset); background-color: var(--component-select-caret-background-color);
					border-left: none; min-width: 32px; flex: none; text-align: center;
					display: flex; align-items: center; justify-content: center; }

.select-field.important .select-field-caret {
					border: var(--component-select-caret-important-border-size) solid var(--component-select-caret-important-border-color);
					outline: var(--component-select-caret-important-outline-size) solid var(--component-select-caret-important-outline-color);
					outline-offset: var(--component-select-caret-important-outline-offset);
					background-color: var(--component-select-caret-important-background-color); border-left: none; }

.select-field[required] .select-field-caret {
					border: var(--component-select-caret-required-border-size) solid var(--component-select-caret-required-border-color);
					outline: var(--component-select-caret-required-outline-size) solid var(--component-select-caret-required-outline-color);
					outline-offset: var(--component-select-caret-required-outline-offset);
					background-color: var(--component-select-caret-required-background-color); border-left: none; }

.select-field.empty .select-field-caret {
					border: var(--component-select-caret-empty-border-size) solid var(--component-select-caret-empty-border-color);
					outline: var(--component-select-caret-empty-outline-size) solid var(--component-select-caret-empty-outline-color);
					outline-offset: var(--component-select-caret-empty-outline-offset);
					background-color: var(--component-select-caret-empty-background-color); border-left: none; }

.select-field.invalid .select-field-caret {
					border: var(--component-select-caret-invalid-border-size) solid var(--component-select-caret-invalid-border-color);
					outline: var(--component-select-caret-invalid-outline-size) solid var(--component-select-caret-invalid-outline-color);
					outline-offset: var(--component-select-caret-invalid-outline-offset);
					background-color: var(--component-select-caret-invalid-background-color); border-left: none; }

.select-field.focus .select-field-caret {
					border: var(--component-select-caret-focus-border-size) solid var(--component-select-caret-focus-border-color);
					outline: var(--component-select-caret-focus-outline-size) solid var(--component-select-caret-focus-outline-color);
					outline-offset: var(--component-select-caret-focus-outline-offset);
					background-color: var(--component-select-caret-focus-background-color); border-left: none; }

.select-field:disabled .select-field-caret {
					border: var(--component-select-caret-disabled-border-size) solid var(--component-select-caret-disabled-border-color);
					outline: var(--component-select-caret-disabled-outline-size) solid var(--component-select-caret-disabled-outline-color);
					outline-offset: var(--component-select-caret-disabled-outline-offset);
					background-color: var(--component-select-caret-disabled-background-color); border-left: none; }


.select-option-list, .select-option-list-clone {
					padding: var(--component-select-list-padding); font-family: var(--component-select-list-font);
					font-size: var(--component-select-list-font-size); font-weight: var(--component-select-list-font-weight);
					font-style: var(--component-select-list-font-style); line-height: var(--component-select-list-line-height);
					color: var(--component-select-list-text-color); background-color: var(--component-select-list-background-color);
					box-shadow: var(--component-select-list-shadow); border-radius: var(--component-select-list-border-radius);
					border: var(--component-select-list-border-size) solid var(--component-select-list-border-color);
					outline: var(--component-select-list-outline-size) solid var(--component-select-list-outline-color);
					outline-offset: var(--component-select-list-outline-offset);
					max-height: var(--component-select-list-max-height);
					display: none; position: absolute; left: 0; top: 100%; width: 100%; overflow-y: auto; z-index: 60000; }
.select-option-list:focus, .select-option-list-clone:focus {
					outline: var(--component-select-list-outline-size) solid var(--component-select-list-outline-color); }
.select-option, .select-option-list-clone .select-option { padding: var(--component-select-option-padding); display: block; cursor: pointer; }
.select-option-list:hover .selected, .select-option-list-clone:hover .selected { background-color: inherit; color: inherit; }
.select-option:hover, .select-option.selected:hover, .select-option-list-clone .select-option:hover,
	.select-option-list-clone .select-option.selected:hover {
					color: var(--component-select-list-hover-text-color);
					background-color: var(--component-select-list-hover-background-color); }
.select-option.selected, .select-option-list-clone .select-option.selected {
					color: var(--component-select-list-selected-text-color);
					background-color: var(--component-select-list-selected-background-color); }

.select-field-multi .select-tag-container { width: 100%; height: 100%; display: flex; flex-direction: row; flex: 1 1 auto; }
.select-field-multi .select-tag-list {
					display: flex; flex-direction: row; flex: 1 1 auto; border-right: none; width: 100%; min-width: 1px;
					align-items: center;
					border: var(--component-select-tag-list-border-size) solid var(--component-select-tag-list-border-color);
					background-color: var(--component-select-tag-list-background-color); }
.select-field-multi[disabled] .select-tag-list {
					border: var(--component-select-tag-list-disabled-border-size) solid var(--component-select-tag-list-disabled-border-color);
					background-color: var(--component-select-tag-list-disabled-background-color); }
.select-field.select-field-multi input { visibility: hidden; width: 0; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0;
										 border-left-width: 0; border-right-width: 0;}
.select-field-multi .select-tag {
					margin: var(--component-select-tag-margin); padding: var(--component-select-tag-padding);
					font-family: var(--component-select-tag-font); font-size: var(--component-select-tag-font-size);
					font-weight: var(--component-select-tag-font-weight); font-style: var(--component-select-tag-font-style);
					line-height: var(--component-select-tag-line-height); color: var(--component-select-tag-text-color);
					background-color: var(--component-select-tag-background-color); box-shadow: var(--component-select-tag-shadow);
					border-radius: var(--component-select-tag-border-radius);
					border: var(--component-select-tag-border-size) solid var(--component-select-tag-border-color);
					display: inline-block; }
.select-field-multi .select-tag:hover {
					font-weight: var(--component-select-tag-hover-font-weight); font-style: var(--component-select-tag-hover-font-style);
					color: var(--component-select-tag-hover-text-color); background-color: var(--component-select-tag-hover-background-color);
					box-shadow: var(--component-select-tag-hover-shadow); border-color: var(--component-select-tag-hover-border-color); }
.select-field-multi .select-tag-x {
					height: auto;
					cursor: pointer;
					padding: var(--component-select-tag-x-padding); font-family: var(--component-select-tag-x-font);
					font-size: var(--component-select-tag-x-font-size); font-weight: var(--component-select-tag-x-font-weight);
					font-style: var(--component-select-tag-x-font-style); color: var(--component-select-tag-x-text-color);
					position: relative; left: var(--component-select-tag-x-offset_x); top: var(--component-select-tag-x-offset_y); }
.select-field-multi .select-tag-x:hover {
					font-weight: var(--component-select-tag-x-hover-font-weight); font-style: var(--component-select-tag-x-hover-font-style);
					color: var(--component-select-tag-x-hover-text-color); }
.select-field-multi .select-option.selected, .select-option-list-multiselect-clone .select-option.selected { display: none; }


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* date/time field:

date-field.date-field.[inline].[important].[empty].[focus].[invalid]
|
+--segmented-field
|  |
|  +--span.group-mainlabel
|  |
|  +--span.group-sublabel
|
+--label.mobile-group-label.[label-small]
|  |
|  +--span.mobile-group-mainlabel
|  |
|  +--span.mobile-group-sublabel
|
+--div.field-inner
   |
   +--button.date-field-button.date-field-button-left
   |  |
   |  +--span.{button-class}
   |
   +--input
   |
   +--button.date-field-button.date-field-button-right
   |  |
   |  +--span.{button-class}
   |
   +--div.date-field-time
      |
      +--input.date-field-hour
      |
      +--span ":"
      |
      +--input.date-field-minute
      |
      +--span ":"
      |
      +--input.date-field-second
*/

.date-field { margin: var(--component-input-margin); }
.date-field-textarea {}
.date-field div.field-inner { align-self: var(--component-date-item-align);
					 outline: var(--component-date-outline-size) solid var(--component-date-outline-color);
					 outline-offset: var(--component-date-outline-offset); }
.date-field .segment-container { align-items: var(--component-date-container-align);
					 font-family: var(--component-date-font); font-size: var(--component-date-font-size);
					 font-weight: var(--component-date-font-weight); font-style: var(--component-date-font-style);
					 line-height: var(--component-date-line-height);
					 background-color: var(--component-date-background-color); box-shadow: var(--component-date-shadow);
					 border-radius: var(--component-date-border-radius);
					 border: var(--component-date-border-size) solid var(--component-date-border-color);
					 padding: var(--component-date-padding); }
.date-field .segment-separator {
					 font-family: var(--component-date-font); font-size: var(--component-date-separator-font-size);
					 font-weight: var(--component-date-separator-font-weight); font-style: var(--component-date-separator-font-style);
					 line-height: var(--component-date-separator-line-height); color: var(--component-date-separator-text-color);
					 background-color: var(--component-date-separator-background-color); box-shadow: var(--component-date-separator-shadow);
					 border-radius: var(--component-date-separator-border-radius);
					 border: var(--component-date-separator-border-size) solid var(--component-date-separator-border-color);
					 padding: var(--component-date-separator-padding); }
.date-field .segment-separator:first-child { padding: var(--component-date-separator-first-padding); }
.date-field .segment-separator:last-child { padding: var(--component-date-separator-last-padding); }
.date-field div input, .date-field div input.ng-untouched, .date-field div input.ng-untouched {
					 font-family: var(--component-date-font); font-size: var(--component-date-font-size);
					 font-weight: var(--component-date-font-weight); font-style: var(--component-date-font-style);
					 line-height: var(--component-date-line-height); color: var(--component-date-text-color);
					 background-color: var(--component-date-segment-background-color); box-shadow: var(--component-date-segment-shadow);
					 border-radius: var(--component-date-segment-border-radius);
					 border: var(--component-date-segment-border-size) solid var(--component-date-segment-border-color);
					 padding: var(--component-date-segment-padding); }
.date-field input::placeholder { font-family: var(--component-date-placeholder-font); font-size: var(--component-date-placeholder-font-size);
					font-weight: var(--component-date-placeholder-font-weight); color: var(--component-date-placeholder-color); }

.date-field.important .segment-container {
					font-weight: var(--component-date-important-font-weight); font-style: var(--component-date-important-font-style);
					color: var(--component-date-important-text-color); background-color: var(--component-date-important-background-color);
					box-shadow: var(--component-date-important-shadow);
					border: var(--component-date-important-border-size) solid var(--component-date-important-border-color); }
.date-field.important .segment-separator {
					font-weight: var(--component-date-important-separator-font-weight); font-style: var(--component-date-important-separator-font-style);
					color: var(--component-date-important-separator-text-color); background-color: var(--component-date-important-separator-background-color);
					box-shadow: var(--component-date-important-separator-shadow);
					border: var(--component-date-important-separator-border-size) solid var(--component-date-important-separator-border-color); }
.date-field.important div input {
					font-weight: var(--component-date-important-font-weight); font-style: var(--component-date-important-font-style);
					color: var(--component-date-important-text-color); background-color: var(--component-date-important-segment-background-color);
					box-shadow: var(--component-date-important-segment-shadow);
					border: var(--component-date-important-segment-border-size) solid var(--component-date-important-segment-border-color); }
.date-field.important { outline: var(--component-date-important-outline-size) solid var(--component-date-important-outline-color);
						 outline-offset: var(--component-date-important-outline-offset); }
.date-field.important input::placeholder { font-size: var(--component-date-important-placeholder-font-size);
					font-weight: var(--component-date-important-placeholder-font-weight); color: var(--component-date-important-placeholder-color); }

.date-field[required] .segment-container {
					font-weight: var(--component-date-required-font-weight); font-style: var(--component-date-required-font-style);
					color: var(--component-date-required-text-color); background-color: var(--component-date-required-background-color);
					box-shadow: var(--component-date-required-shadow);
					border: var(--component-date-required-border-size) solid var(--component-date-required-border-color); }
.date-field[required] .segment-separator {
					font-weight: var(--component-date-required-separator-font-weight); font-style: var(--component-date-required-separator-font-style);
					color: var(--component-date-required-separator-text-color); background-color: var(--component-date-required-separator-background-color);
					box-shadow: var(--component-date-required-separator-shadow);
					border: var(--component-date-required-separator-border-size) solid var(--component-date-required-separator-border-color); }
.date-field[required] div input {
					font-weight: var(--component-date-required-font-weight); font-style: var(--component-date-required-font-style);
					color: var(--component-date-required-text-color); background-color: var(--component-date-required-segment-background-color);
					box-shadow: var(--component-date-required-segment-shadow);
					border: var(--component-date-required-segment-border-size) solid var(--component-date-required-segment-border-color); }
.date-field[required] { outline: var(--component-date-required-outline-size) solid var(--component-date-required-outline-color);
						 outline-offset: var(--component-date-required-outline-offset); }
.date-field[required] input::placeholder { font-size: var(--component-date-required-placeholder-font-size);
					font-weight: var(--component-date-required-placeholder-font-weight); color: var(--component-date-required-placeholder-color); }

.date-field.empty .segment-container {
					font-weight: var(--component-date-empty-font-weight); font-style: var(--component-date-empty-font-style);
					color: var(--component-date-empty-text-color); background-color: var(--component-date-empty-background-color);
					box-shadow: var(--component-date-empty-shadow);
					border: var(--component-date-empty-border-size) solid var(--component-date-empty-border-color); }
.date-field.empty .segment-separator {
					font-weight: var(--component-date-empty-separator-font-weight); font-style: var(--component-date-empty-separator-font-style);
					color: var(--component-date-empty-separator-text-color); background-color: var(--component-date-empty-separator-background-color);
					box-shadow: var(--component-date-empty-separator-shadow);
					border: var(--component-date-empty-separator-border-size) solid var(--component-date-empty-separator-border-color); }
.date-field.empty div input {
					font-weight: var(--component-date-empty-font-weight); font-style: var(--component-date-empty-font-style);
					color: var(--component-date-empty-text-color); background-color: var(--component-date-empty-segment-background-color);
					box-shadow: var(--component-date-empty-segment-shadow);
					border: var(--component-date-empty-segment-border-size) solid var(--component-date-empty-segment-border-color); }
.date-field.empty { outline: var(--component-date-empty-outline-size) solid var(--component-date-empty-outline-color);
						 outline-offset: var(--component-date-empty-outline-offset); }
.date-field.empty input::placeholder { font-size: var(--component-date-empty-placeholder-font-size);
					font-weight: var(--component-date-empty-placeholder-font-weight); color: var(--component-date-empty-placeholder-color); }

.date-field.invalid .segment-container {
					font-weight: var(--component-date-invalid-font-weight); font-style: var(--component-date-invalid-font-style);
					color: var(--component-date-invalid-text-color); background-color: var(--component-date-invalid-background-color);
					box-shadow: var(--component-date-invalid-shadow);
					border: var(--component-date-invalid-border-size) solid var(--component-date-invalid-border-color); }
.date-field.invalid .segment-separator {
					font-weight: var(--component-date-invalid-separator-font-weight); font-style: var(--component-date-invalid-separator-font-style);
					color: var(--component-date-invalid-separator-text-color); background-color: var(--component-date-invalid-separator-background-color);
					box-shadow: var(--component-date-invalid-separator-shadow);
					border: var(--component-date-invalid-separator-border-size) solid var(--component-date-invalid-separator-border-color); }
.date-field.invalid div input {
					font-weight: var(--component-date-invalid-font-weight); font-style: var(--component-date-invalid-font-style);
					color: var(--component-date-invalid-text-color); background-color: var(--component-date-invalid-segment-background-color);
					box-shadow: var(--component-date-invalid-segment-shadow);
					border: var(--component-date-invalid-segment-border-size) solid var(--component-date-invalid-segment-border-color); }
.date-field.invalid { outline: var(--component-date-invalid-outline-size) solid var(--component-date-invalid-outline-color);
						  outline-offset: var(--component-date-invalid-outline-offset);  }
.date-field.invalid input::placeholder { font-size: var(--component-date-invalid-placeholder-font-size);
					font-weight: var(--component-date-invalid-placeholder-font-weight); color: var(--component-date-invalid-placeholder-color); }

.date-field.focus .segment-container {
					font-weight: var(--component-date-focus-font-weight); font-style: var(--component-date-focus-font-style);
					color: var(--component-date-focus-text-color); background-color: var(--component-date-focus-background-color);
					box-shadow: var(--component-date-focus-shadow);
					border: var(--component-date-focus-border-size) solid var(--component-date-focus-border-color); }
.date-field.focus .segment-separator {
					font-weight: var(--component-date-focus-separator-font-weight); font-style: var(--component-date-focus-separator-font-style);
					color: var(--component-date-focus-separator-text-color); background-color: var(--component-date-focus-separator-background-color);
					box-shadow: var(--component-date-focus-separator-shadow);
					border: var(--component-date-focus-separator-border-size) solid var(--component-date-focus-separator-border-color); }
.date-field.focus div input {
					font-weight: var(--component-date-focus-font-weight); font-style: var(--component-date-focus-font-style);
					color: var(--component-date-focus-text-color); background-color: var(--component-date-focus-segment-background-color);
					box-shadow: var(--component-date-focus-segment-shadow);
					border: var(--component-date-focus-segment-border-size) solid var(--component-date-focus-segment-border-color); }
.date-field.focus { outline: var(--component-date-focus-outline-size) solid var(--component-date-focus-outline-color);
						 outline-offset: var(--component-date-focus-outline-offset); }
.date-field.focus input::placeholder { font-size: var(--component-date-focus-placeholder-font-size);
					font-weight: var(--component-date-focus-placeholder-font-weight); color: var(--component-date-focus-placeholder-color); }

.date-field:disabled .segment-container {
					font-weight: var(--component-date-disabled-font-weight); font-style: var(--component-date-disabled-font-style);
					color: var(--component-date-disabled-text-color); background-color: var(--component-date-disabled-background-color);
					box-shadow: var(--component-date-disabled-shadow);
					border: var(--component-date-disabled-border-size) solid var(--component-date-disabled-border-color); }
.date-field:disabled .segment-separator {
					font-weight: var(--component-date-disabled-separator-font-weight); font-style: var(--component-date-disabled-separator-font-style);
					color: var(--component-date-disabled-separator-text-color); background-color: var(--component-date-disabled-separator-background-color);
					box-shadow: var(--component-date-disabled-separator-shadow);
					border: var(--component-date-disabled-separator-border-size) solid var(--component-date-disabled-separator-border-color); }
.date-field:disabled div input {
					font-weight: var(--component-date-disabled-font-weight); font-style: var(--component-date-disabled-font-style);
					color: var(--component-date-disabled-text-color); background-color: var(--component-date-disabled-segment-background-color);
					box-shadow: var(--component-date-disabled-segment-shadow);
					border: var(--component-date-disabled-segment-border-size) solid var(--component-date-disabled-segment-border-color); }
.date-field:disabled { outline: var(--component-date-disabled-outline-size) solid var(--component-date-disabled-outline-color);
						outline-offset: var(--component-date-disabled-outline-offset);  }
.date-field:disabled input::placeholder { font-size: var(--component-date-disabled-placeholder-font-size);
					font-weight: var(--component-date-disabled-placeholder-font-weight); color: var(--component-date-disabled-placeholder-color); }

.date-field .date-field-addon-left, .date-field .date-field-addon-right {
		padding: var(--component-date-addon-padding); font-family: var(--component-date-addon-font);
		font-size: var(--component-date-addon-font-size); font-weight: var(--component-date-addon-font-weight);
		font-style: var(--component-date-addon-font-style); line-height: var(--component-date-addon-line-height);
		color: var(--component-date-addon-text-color); background-color: var(--component-date-addon-background-color);
		min-width: var(--component-date-addon-width);
		border: var(--component-date-border-size) solid var(--component-date-border-color); }

.date-field.important .date-field-addon-left, .date-field.important .date-field-addon-right {
		font-weight: var(--component-date-addon-important-font-weight); font-style: var(--component-date-addon-important-font-style);
		color: var(--component-date-addon-important-text-color); background-color: var(--component-date-addon-important-background-color);
		border: var(--component-date-important-border-size) solid var(--component-date-important-border-color); }
.date-field[required] .date-field-addon-left, .date-field[required] .date-field-addon-right {
		font-weight: var(--component-date-addon-required-font-weight); font-style: var(--component-date-addon-required-font-style);
		color: var(--component-date-addon-required-text-color); background-color: var(--component-date-addon-required-background-color);
		border: var(--component-date-required-border-size) solid var(--component-date-required-border-color); }
.date-field.empty .date-field-addon-left, .date-field.empty .date-field-addon-right {
		font-weight: var(--component-date-addon-empty-font-weight); font-style: var(--component-date-addon-empty-font-style);
		color: var(--component-date-addon-empty-text-color); background-color: var(--component-date-addon-empty-background-color);
		border: var(--component-date-empty-border-size) solid var(--component-date-empty-border-color); }
.date-field.invalid .date-field-addon-left, .date-field.invalid .date-field-addon-right {
		font-weight: var(--component-date-addon-invalid-font-weight); font-style: var(--component-date-addon-invalid-font-style);
		color: var(--component-date-addon-invalid-text-color); background-color: var(--component-date-addon-invalid-background-color);
		border: var(--component-date-invalid-border-size) solid var(--component-date-invalid-border-color); }
.date-field:disabled .date-field-addon-left, .date-field:disabled .date-field-addon-right {
		font-weight: var(--component-date-addon-disabled-font-weight); font-style: var(--component-date-addon-disabled-font-style);
		color: var(--component-date-addon-disabled-text-color); background-color: var(--component-date-addon-disabled-background-color);
		border: var(--component-date-disabled-border-size) solid var(--component-date-disabled-border-color); }

.date-field .date-field-addon-left, .date-field.important .date-field-addon-left,
.date-field[required] .date-field-addon-left, .date-field.empty .date-field-addon-left,
.date-field.invalid .date-field-addon-left, .date-field.focus .date-field-addon-left,
.date-field:disabled .date-field-addon-left {
		border-right: none; border-top-left-radius: var(--component-date-border-radius);
		border-bottom-left-radius: var(--component-date-border-radius); }
.date-field .date-field-addon-right, .date-field.important .date-field-addon-right,
.date-field[required] .date-field-addon-right, .date-field.empty .date-field-addon-right,
.date-field.invalid .date-field-addon-right, .date-field.focus .date-field-addon-right,
.date-field:disabled .date-field-addon-right {
		border-left: none; border-top-right-radius: var(--component-date-border-radius);
		border-bottom-right-radius: var(--component-date-border-radius); }
.date-field .date-field-group-left input { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.date-field .date-field-group-right input { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.date-field-day, .date-field-month, .date-field-month, .date-field-year2 { width: var(--component-date-day-width); }
.date-field-year { width: var(--component-date-year-width); }
.date-field-hour, .date-field-minute, .date-field-second { width: var(--component-date-time-width); }

/* todo date-field popup */


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* checkbox field:

checkbox-field.checkbox-field.[inline].[important].[empty].[focus].[invalid]
|
+--label.group-label.[label-small]
|  |
|  +--span.group-mainlabel
|  |
|  +--span.group-sublabel
|
+--label.mobile-group-label.[label-small]
|  |
|  +--span.mobile-group-mainlabel
|  |
|  +--span.mobile-group-sublabel
|
+--div.field-inner
   |
   +--input[checkbox]
   |
   +--label.checkbox-label
*/

.checkbox-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-checkbox-margin); }
.checkbox-field.important {} /* todo */
.checkbox-field.label-top { flex-direction: column; }
.checkbox-field .field-inner { align-self: var(--component-checkbox-item-align); }
.checkbox-field.label-top .field-inner { align-self: normal; }
.checkbox-field input + label span, .checkbox-field.ng-invalid input.ng-untouched + label span,
	.checkbox-field input.ng-invalid.ng-untouched + label span {
					padding: var(--component-checkbox-padding); font-family: var(--component-checkbox-font);
					font-size: var(--component-checkbox-font-size); font-weight: var(--component-checkbox-font-weight);
					font-style: var(--component-checkbox-font-style); line-height: var(--component-checkbox-line-height);
					color: var(--component-checkbox-text-color);
					outline: var(--component-checkbox-outline-size) solid var(--component-checkbox-outline-color);
					outline-offset: var(--component-checkbox-outline-offset); }

.checkbox-field.important input + label span {
					font-weight: var(--component-checkbox-important-font-weight); font-style: var(--component-checkbox-important-font-style);
					color: var(--component-checkbox-important-text-color);
					outline: var(--component-checkbox-important-outline-size) solid var(--component-checkbox-important-outline-color);
					outline-offset: var(--component-checkbox-important-outline-offset); }

.checkbox-field[required] input + label span {
					font-weight: var(--component-checkbox-required-font-weight); font-style: var(--component-checkbox-required-font-style);
					color: var(--component-checkbox-required-text-color);
					outline: var(--component-checkbox-required-outline-size) solid var(--component-checkbox-required-outline-color);
					outline-offset: var(--component-checkbox-required-outline-offset); }

.checkbox-field.empty input + label span {
					font-weight: var(--component-checkbox-empty-font-weight); font-style: var(--component-checkbox-empty-font-style);
					color: var(--component-checkbox-empty-text-color);
					outline: var(--component-checkbox-empty-outline-size) solid var(--component-checkbox-empty-outline-color);
					outline-offset: var(--component-checkbox-empty-outline-offset); }

.checkbox-field.focus input + label span {
					font-weight: var(--component-checkbox-focus-font-weight); font-style: var(--component-checkbox-focus-font-style);
					color: var(--component-checkbox-focus-text-color);
					outline: var(--component-checkbox-focus-outline-size) solid var(--component-checkbox-focus-outline-color);
					outline-offset: var(--component-checkbox-focus-outline-offset); }

.checkbox-field:disabled input + label span {
					font-weight: var(--component-checkbox-disabled-font-weight); font-style: var(--component-checkbox-disabled-font-style);
					color: var(--component-checkbox-disabled-text-color);
					outline: var(--component-checkbox-disabled-outline-size) solid var(--component-checkbox-disabled-outline-color);
					outline-offset: var(--component-checkbox-disabled-outline-offset); }

.checkbox-field input:not(:checked), .checkbox-field input:checked { position: absolute; left: -9999px; }
.checkbox-field input:not(:checked) + label, .checkbox-field input:checked + label {
					position: relative; cursor: pointer; display: inline-block!important; min-height: 1em;
					padding-left: var(--component-checkbox-label-padding); }
.checkbox-field input:not(:checked) + label:before, .checkbox-field input:checked + label:before {
					content: ''; position: absolute;
					width: var(--component-checkbox-box-size); height: var(--component-checkbox-box-size);
					border: var(--component-checkbox-box-border-size) solid var(--component-checkbox-box-color);
					border-radius: var(--component-checkbox-box-border-radius);
					background-color: var(--component-checkbox-box-background-color);
					left: 0; top: 50%; transform: translateY(-50%); }

.checkbox-field.important input:not(:checked) + label:before, .checkbox-field.important input:checked + label:before {
					border-color: var(--component-checkbox-box-important-color);
					background-color: var(--component-checkbox-box-important-background-color); }

.checkbox-field[required] input:not(:checked) + label:before, .checkbox-field[required] input:checked + label:before {
					border-color: var(--component-checkbox-box-required-color);
					background-color: var(--component-checkbox-box-required-background-color); }

.checkbox-field.empty input:not(:checked) + label:before, .checkbox-field.empty input:checked + label:before {
					border-color: var(--component-checkbox-box-empty-color);
					background-color: var(--component-checkbox-box-empty-background-color); }

.checkbox-field.invalid input:not(:checked) + label:before, .checkbox-field.invalid input:checked + label:before {
					border-color: var(--component-checkbox-box-invalid-color);
					background-color: var(--component-checkbox-box-invalid-background-color); }

.checkbox-field.focus input:not(:checked) + label:before, .checkbox-field.focus input:checked + label:before {
					border-color: var(--component-checkbox-box-focus-color);
					background-color: var(--component-checkbox-box-focus-background-color); }

.checkbox-field:disabled input:not(:checked) + label:before, .checkbox-field:disabled input:checked + label:before {
					border-color: var(--component-checkbox-box-disabled-color);
					background-color: var(--component-checkbox-box-disabled-background-color); }

.checkbox-field input:not(:checked) + label:after, .checkbox-field input:checked + label:after {
					content: ''; transition: all var(--component-checkbox-dot-speed); position: absolute;
					border-radius: var(--component-checkbox-dot-border-radius); background-color: var(--component-checkbox-dot-color);
					width: var(--component-checkbox-dot-size); height: var(--component-checkbox-dot-size);
					left: calc((var(--component-checkbox-box-size) - var(--component-checkbox-dot-size)) / 2);
					top: 50%; transform: translateY(-50%); }
.checkbox-field input:not(:checked) + label:after { opacity: 0; transform: translateY(-50%) scale(0); }
.checkbox-field input:checked + label:after { opacity: 1; transform: translateY(-50%) scale(1); }

.checkbox-field.important input:checked + label:after { background-color: var(--component-checkbox-dot-important-color); }
.checkbox-field[required] input:checked + label:after { background-color: var(--component-checkbox-dot-required-color); }
.checkbox-field.empty input:checked + label:after { background-color: var(--component-checkbox-dot-empty-color); }
.checkbox-field.invalid input:checked + label:after { background-color: var(--component-checkbox-dot-invalid-color); }
.checkbox-field.focus input:checked + label:after { background-color: var(--component-checkbox-dot-focus-color); }
.checkbox-field:disabled input:checked + label:after { background-color: var(--component-checkbox-dot-disabled-color); }


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* checkbox group:

checkbox-group.checkbox-group.[inline].[important].[empty].[focus].[invalid]
|
+--label.group-label.[label-small]
|  |
|  +--span.group-mainlabel
|  |
|  +--span.group-sublabel
|
+--label.mobile-group-label.[label-small]
|  |
|  +--span.mobile-group-mainlabel
|  |
|  +--span.mobile-group-sublabel
|
+--div.field-inner
   |
   +--{div.checkbox-group-button-container.checkbox-group-buttons-top}
   |  |
   |  +--button-field.checkbox-group-select-all
   |  |
   |  +--button-field.checkbox-group-select-none
   |  |
   |  +--button-field.checkbox-group-select-revert attribut "revert"
   |
   +--div.checkbox-group-container
   |  |
   |  +--{sub elements}
   |
   +--{div.checkbox-group-button-container.checkbox-group-buttons-bottom}
      |
      +--button-field.checkbox-group-select-all
      |
      +--button-field.checkbox-group-select-none
      |
      +--button-field.checkbox-group-select-revert attribut "revert"
*/

/*normal -> important -> required -> empty -> invalid -> focus -> disabled*/
/*todo*/

.checkbox-group { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-checkbox-margin); }
.checkbox-group.important {} /* todo */
.checkbox-group.label-top { flex-direction: column; }
.checkbox-group .field-inner { align-self: var(--component-checkbox-item-align); }
.checkbox-group.label-top .field-inner { align-self: normal; }
.checkbox-group input + label span, .checkbox-group.ng-invalid input.ng-untouched + label span,
	.checkbox-group input.ng-invalid.ng-untouched + label span {
					padding: var(--component-checkbox-padding); font-family: var(--component-checkbox-font);
					font-size: var(--component-checkbox-font-size); font-weight: var(--component-checkbox-font-weight);
					font-style: var(--component-checkbox-font-style); line-height: var(--component-checkbox-line-height);
					color: var(--component-checkbox-text-color); }
.checkbox-group input:focus + label span {
					font-weight: var(--component-checkbox-focus-font-weight); font-style: var(--component-checkbox-focus-font-style);
					color: var(--component-checkbox-focus-text-color); }
.checkbox-group input:disabled + label span {
					font-weight: var(--component-checkbox-disabled-font-weight); font-style: var(--component-checkbox-disabled-font-style);
					color: var(--component-checkbox-disabled-text-color); }
.checkbox-group.ng-invalid input + label span, .checkbox-group input.ng-invalid + label span {
					font-weight: var(--component-checkbox-invalid-font-weight); font-style: var(--component-checkbox-invalid-font-style);
					color: var(--component-checkbox-invalid-text-color);
					outline: var(--component-checkbox-invalid-outline-size) solid var(--component-checkbox-invalid-outline-color);
					outline-offset: var(--component-checkbox-invalid-outline-offset); }

.checkbox-group input:not(:checked), .checkbox-group input:checked { position: absolute; left: -9999px; }
.checkbox-group input:not(:checked) + label, .checkbox-group input:checked + label {
					position: relative; cursor: pointer; display: inline-block!important; min-height: 1em;
					padding-left: var(--component-checkbox-label-padding); }

.checkbox-group input:not(:checked) + label:before, .checkbox-group input:checked + label:before {
					content: ''; position: absolute;
					width: var(--component-checkbox-box-size); height: var(--component-checkbox-box-size);
					border: var(--component-checkbox-box-border-size) solid var(--component-checkbox-box-color);
					border-radius: var(--component-checkbox-box-border-radius);
					background-color: var(--component-checkbox-box-background-color);
					left: 0; top: 50%; transform: translateY(-50%); }
.checkbox-group input:disabled:not(:checked) + label:before, .checkbox-group input:disabled:checked + label:before {
					border-color: var(--component-checkbox-box-disabled-color);
					background-color: var(--component-checkbox-box-disabled-background-color); }
.checkbox-group input:not(:checked) + label:after, .checkbox-group input:checked + label:after {
					content: ''; transition: all var(--component-checkbox-dot-speed); position: absolute;
					border-radius: var(--component-checkbox-dot-border-radius); background-color: var(--component-checkbox-dot-color);
					width: var(--component-checkbox-dot-size); height: var(--component-checkbox-dot-size);
					left: calc((var(--component-checkbox-box-size) - var(--component-checkbox-dot-size)) / 2);
					top: 50%; transform: translateY(-50%); }
.checkbox-group input:not(:checked) + label:after { opacity: 0; transform: translateY(-50%) scale(0); }
.checkbox-group input:checked + label:after { opacity: 1; transform: translateY(-50%) scale(1); }
.checkbox-group input:disabled:checked + label:after { background-color: var(--component-checkbox-dot-disabled-color); }


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* radio field:

radio-field.radio-field.[inline].[important].[empty].[focus].[invalid]
|
+--label.group-label.[label-small]
|  |
|  +--span.group-mainlabel
|  |
|  +--span.group-sublabel
|
+--label.mobile-group-label.[label-small]
|  |
|  +--span.mobile-group-mainlabel
|  |
|  +--span.mobile-group-sublabel
|
+--div.radio-options
   |
   +--(multiple): radio-option.radio-option
      |
      +--div.field-inner
         |
         +--input[radio]
         |
         +--label.radio-option-label
*/

.radio-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-radio-margin); }
.radio-field.important {} /* todo */
.radio-field.label-top { flex-direction: column; }
.radio-options { align-self: var(--component-radio-item-align); flex: var(--component-inner-area-ratio) var(--component-inner-area-ratio) 0;
				 display: flex; flex-direction: var(--component-radio-option-direction);
				 column-gap: var(--component-radio-option-gap); min-width: 0; flex-wrap: wrap; }
.radio-field.label-top .radio-options { align-self: normal; }
.radio-field input + label span, .radio-field.ng-invalid input.ng-untouched + label span,
	.radio-field input.ng-invalid.ng-untouched + label span {
					padding: var(--component-radio-padding); font-family: var(--component-radio-font);
					font-size: var(--component-radio-font-size); font-weight: var(--component-radio-font-weight);
					font-style: var(--component-radio-font-style); line-height: var(--component-radio-line-height);
					color: var(--component-radio-text-color);
					outline: var(--component-radio-outline-size) solid var(--component-radio-outline-color);
					outline-offset: var(--component-radio-outline-offset); }

.radio-field.important input + label span {
					font-weight: var(--component-radio-important-font-weight); font-style: var(--component-radio-important-font-style);
					color: var(--component-radio-important-text-color);
					outline: var(--component-radio-important-outline-size) solid var(--component-radio-important-outline-color);
					outline-offset: var(--component-radio-important-outline-offset); }

.radio-field[required] input + label span {
					font-weight: var(--component-radio-required-font-weight); font-style: var(--component-radio-required-font-style);
					color: var(--component-radio-required-text-color);
					outline: var(--component-radio-required-outline-size) solid var(--component-radio-required-outline-color);
					outline-offset: var(--component-radio-required-outline-offset); }

.radio-field.empty input + label span {
					font-weight: var(--component-radio-empty-font-weight); font-style: var(--component-radio-empty-font-style);
					color: var(--component-radio-empty-text-color);
					outline: var(--component-radio-empty-outline-size) solid var(--component-radio-empty-outline-color);
					outline-offset: var(--component-radio-empty-outline-offset); }

.radio-field.invalid input + label span {
					font-weight: var(--component-radio-invalid-font-weight); font-style: var(--component-radio-invalid-font-style);
					color: var(--component-radio-invalid-text-color);
					outline: var(--component-radio-invalid-outline-size) solid var(--component-radio-invalid-outline-color);
					outline-offset: var(--component-radio-invalid-outline-offset); }

.radio-field.focus input + label span {
					font-weight: var(--component-radio-focus-font-weight); font-style: var(--component-radio-focus-font-style);
					color: var(--component-radio-focus-text-color);
					outline: var(--component-radio-focus-outline-size) solid var(--component-radio-focus-outline-color);
					outline-offset: var(--component-radio-focus-outline-offset); }

.radio-field:disabled input + label span {
					font-weight: var(--component-radio-disabled-font-weight); font-style: var(--component-radio-disabled-font-style);
					color: var(--component-radio-disabled-text-color);
					outline: var(--component-radio-disabled-outline-size) solid var(--component-radio-disabled-outline-color);
					outline-offset: var(--component-radio-disabled-outline-offset); }

.radio-field input:not(:checked), .radio-field input:checked { position: absolute; left: -9999px; }
.radio-field input:not(:checked) + label, .radio-field input:checked + label {
					position: relative; cursor: pointer; display: inline-block!important; min-height: 1em;
					padding-left: var(--component-radio-label-padding); }

.radio-field input:not(:checked) + label:before, .radio-field input:checked + label:before {
					content: ''; position: absolute;
					width: var(--component-radio-box-size); height: var(--component-radio-box-size);
					border: var(--component-radio-box-border-size) solid var(--component-radio-box-color);
					border-radius: var(--component-radio-box-border-radius);
					background-color: var(--component-radio-box-background-color);
					left: 0; top: 50%; transform: translateY(-50%); }

.radio-field.important input:not(:checked) + label:before, .radio-field.important input:checked + label:before {
					border-color: var(--component-radio-box-important-color);
					background-color: var(--component-radio-box-important-background-color); }

.radio-field[required] input:not(:checked) + label:before, .radio-field[required] input:checked + label:before {
					border-color: var(--component-radio-box-required-color);
					background-color: var(--component-radio-box-required-background-color); }

.radio-field.empty input:not(:checked) + label:before, .radio-field.empty input:checked + label:before {
					border-color: var(--component-radio-box-empty-color);
					background-color: var(--component-radio-box-empty-background-color); }

.radio-field.invalid input:not(:checked) + label:before, .radio-field.invalid input:checked + label:before {
					border-color: var(--component-radio-box-invalid-color);
					background-color: var(--component-radio-box-invalid-background-color); }

.radio-field.focus input:not(:checked) + label:before, .radio-field.focus input:checked + label:before {
					border-color: var(--component-radio-box-focus-color);
					background-color: var(--component-radio-box-focus-background-color); }

.radio-field:disabled input:not(:checked) + label:before, .radio-field:disabled input:checked + label:before {
					border-color: var(--component-radio-box-disabled-color);
					background-color: var(--component-radio-box-disabled-background-color); }

.radio-field input:not(:checked) + label:after, .radio-field input:checked + label:after {
					content: ''; transition: all var(--component-radio-dot-speed); position: absolute;
					border-radius: var(--component-radio-dot-border-radius); background-color: var(--component-radio-dot-color);
					width: var(--component-radio-dot-size); height: var(--component-radio-dot-size);
					left: calc((var(--component-radio-box-size) - var(--component-radio-dot-size)) / 2);
					top: 50%; transform: translateY(-50%); }
.radio-field input:not(:checked) + label:after { opacity: 0; transform: translateY(-50%) scale(0); }
.radio-field input:checked + label:after { opacity: 1; transform: translateY(-50%) scale(1); }

.radio-field.important input:checked + label:after { background-color: var(--component-radio-dot-important-color); }
.radio-field[required] input:checked + label:after { background-color: var(--component-radio-dot-required-color); }
.radio-field.empty input:checked + label:after { background-color: var(--component-radio-dot-empty-color); }
.radio-field.invalid input:checked + label:after { background-color: var(--component-radio-dot-invalid-color); }
.radio-field.focus input:checked + label:after { background-color: var(--component-radio-dot-focus-color); }
.radio-field:disabled input:checked + label:after { background-color: var(--component-radio-dot-disabled-color); }

.radio-field .radio-option { margin-bottom: var(--component-radio-option-margin); margin-top: var(--component-radio-option-margin); }


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* rating field:

rating-field.rating-field.[inline].[important].[empty].[focus].[invalid]
|
+--label.group-label.[label-small]
|  |
|  +--span.group-mainlabel
|  |
|  +--span.group-sublabel
|
+--label.mobile-group-label.[label-small]
|  |
|  +--span.mobile-group-mainlabel
|  |
|  +--span.mobile-group-sublabel
|
+--div.field-inner
   |
   +--(multiple): span.rating-X
*/

.rating-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-rating-margin); }
.rating-field.label-top { flex-direction: column; }
.rating-field .field-inner { align-self: var(--component-rating-item-align); }
.rating-field.label-top .field-inner { align-self: normal; }
.rating-field .field-inner span { display: inline-block ;cursor: pointer; padding: var(--component-rating-star-padding);
		font-size: var(--component-rating-font-size); color: var(--component-rating-text-color); }

.rating-field .field-inner { outline: var(--component-rating-outline-size) solid var(--component-rating-outline-color);
		outline-offset: var(--component-rating-outline-offset); }

.rating-field.important .field-inner { outline: var(--component-rating-important-outline-size) solid var(--component-rating-important-outline-color);
		outline-offset: var(--component-rating-important-outline-offset); }
.rating-field.important .field-inner span { color: var(--component-rating-important-text-color); }

.rating-field[required] .field-inner { outline: var(--component-rating-required-outline-size) solid var(--component-rating-required-outline-color);
		outline-offset: var(--component-rating-required-outline-offset); }
.rating-field[required] .field-inner span { color: var(--component-rating-required-text-color); }

.rating-field.empty .field-inner { outline: var(--component-rating-empty-outline-size) solid var(--component-rating-empty-outline-color);
		outline-offset: var(--component-rating-empty-outline-offset); }
.rating-field.empty .field-inner span { color: var(--component-rating-empty-text-color); }

.rating-field.invalid .field-inner { outline: var(--component-rating-invalid-outline-size) solid var(--component-rating-invalid-outline-color);
		outline-offset: var(--component-rating-invalid-outline-offset); }
.rating-field.invalid .field-inner span { color: var(--component-rating-invalid-text-color); }

.rating-field.focus .field-inner { outline: var(--component-rating-focus-outline-size) solid var(--component-rating-focus-outline-color);
		outline-offset: var(--component-rating-focus-outline-offset); }
.rating-field.focus .field-inner span { color: var(--component-rating-focus-text-color); }

.rating-field .field-inner span:hover { color: var(--component-rating-hover-text-color); }

.rating-field:disabled .field-inner { outline: var(--component-rating-disabled-outline-size) solid var(--component-rating-disabled-outline-color);
		outline-offset: var(--component-rating-disabled-outline-offset); }
.rating-field:disabled .field-inner span { color: var(--component-rating-disabled-text-color); }


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* file select field:

file-select-field.file-select-field.[inline].[important].[empty].[focus].[invalid]
|
+--label.group-label.[label-small]
|  |
|  +--span.group-mainlabel
|  |
|  +--span.group-sublabel
|
+--label.mobile-group-label.[label-small]
|  |
|  +--span.mobile-group-mainlabel
|  |
|  +--span.mobile-group-sublabel
|
+--div.field-inner
   |
   +--input.file-select-field-input
   |
   +--div.file-select-field-content
      |
      +--div.file-select-field-placeholder
      |
      +--div.file-select-field-preview
         |
         +--img.file-select-field-preview-img
         |
         +--div.file-select-field-preview-name[.file-select-field-error]
            |
            +--span.file-select-field-preview-name-file
            |
            +--span.file-select-field-preview-name-size
*/

.file-select-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-file-select-margin); }
.file-select-field.label-top { flex-direction: column; }
.file-select-field-textarea {}
.file-select-field div.field-inner { display: flex; flex-direction: row; align-items: stretch; align-self: var(--component-file-select-item-align);
					 outline: var(--component-file-select-outline-size) solid var(--component-file-select-outline-color);
					 outline-offset: var(--component-file-select-outline-offset); }
.file-select-field.label-top div.field-inner { align-self: normal; }
.file-select-field div input { opacity: 0; position: absolute; -webkit-appearance: none; -moz-appearance: none; appearance: none;
							   width: 1px; height: 1px; }
.file-select-field .file-select-field-content { flex: none; display: flex; flex-direction: row; align-items: center; cursor: pointer;
					 width: 100%; max-width: 100%; min-width: 1px; margin: 0; min-height: var(--component-file-select-height);
					 max-height: var(--component-file-select-max-height);
					 font-family: var(--component-file-select-font); font-size: var(--component-file-select-font-size);
					 font-weight: var(--component-file-select-font-weight); font-style: var(--component-file-select-font-style);
					 line-height: var(--component-file-select-line-height); color: var(--component-file-select-text-color);
					 background-color: var(--component-file-select-background-color); box-shadow: var(--component-file-select-shadow);
					 border-radius: var(--component-file-select-border-radius);
					 border: var(--component-file-select-border-size) solid var(--component-file-select-border-color);
					 padding: var(--component-file-select-padding); }
.file-select-field div.field-inner.dragover {
					 outline: var(--component-file-select-dragover-outline-size) solid var(--component-file-select-dragover-outline-color);
					 outline-offset: var(--component-file-select-dragover-outline-offset); }
.file-select-field div.field-inner.dragover .file-select-field-content { color: var(--component-file-select-dragover-text-color);
					 background-color: var(--component-file-select-dragover-background-color);
					 box-shadow: var(--component-file-select-dragover-shadow); border-radius: var(--component-file-select-dragover-border-radius);
					 border: var(--component-file-select-dragover-border-size) solid var(--component-file-select-dragover-border-color); }

.file-select-field .file-select-field-preview { display: none; height: 100%; max-height: 100%; flex-direction: row; align-items: center; }
.file-select-field .file-select-field-preview-name { cursor: pointer; flex: 1 1 100%; max-width: 100%; }
.file-select-field .file-select-field-preview-name.file-select-field-error { color: var(--component-file-select-error-color); }
.file-select-field .file-select-field-preview-name-size { font-size: var(--component-file-select-size-font-size);
					font-weight: var(--component-file-select-size-font-weight); font-style: var(--component-file-select-size-font-style);
					color: var(--component-file-select-size-text-color);
					padding-left:  var(--component-file-select-size-padding); }
.file-select-field .file-select-field-preview-name-size:before { content: var(--component-file-select-size-before); }
.file-select-field .file-select-field-preview-name-size:after { content: var(--component-file-select-size-after); }

.file-select-field .file-select-field-preview-img { cursor: pointer; flex: none; height: 100%; max-height: 100%; max-width: 100%;
					margin: var(--component-file-select-preview-img-margin);
					border: var(--component-file-select-preview-img-border-size) solid var(--component-file-select-preview-img-border-color);
					box-shadow: var(--component-file-select-preview-img-shadow); }

.file-select-field .file-select-field-placeholder { font-family: var(--component-file-select-placeholder-font); font-size: var(--component-file-select-placeholder-font-size);
					font-weight: var(--component-file-select-placeholder-font-weight); color: var(--component-file-select-placeholder-color);
					cursor: pointer; }

.file-select-field.important .file-select-field-content {
					font-weight: var(--component-file-select-important-font-weight); font-style: var(--component-file-select-important-font-style);
					color: var(--component-file-select-important-text-color); background-color: var(--component-file-select-important-background-color);
					box-shadow: var(--component-file-select-important-shadow);
					border: var(--component-file-select-important-border-size) solid var(--component-file-select-important-border-color); }
.file-select-field.important { outline: var(--component-file-select-important-outline-size) solid var(--component-file-select-important-outline-color);
					outline-offset: var(--component-file-select-important-outline-offset); }
.file-select-field.important .file-select-field-placeholder { font-weight: var(--component-file-select-important-placeholder-font-weight);
					font-size: var(--component-file-select-important-placeholder-font-size); color: var(--component-file-select-important-placeholder-color); }

.file-select-field[required] .file-select-field-content {
					font-weight: var(--component-file-select-required-font-weight); font-style: var(--component-file-select-required-font-style);
					color: var(--component-file-select-required-text-color); background-color: var(--component-file-select-required-background-color);
					box-shadow: var(--component-file-select-required-shadow);
					border: var(--component-file-select-required-border-size) solid var(--component-file-select-required-border-color); }
.file-select-field[required] { outline: var(--component-file-select-required-outline-size) solid var(--component-file-select-required-outline-color);
					 outline-offset: var(--component-file-select-required-outline-offset); }
.file-select-field[required] .file-select-field-placeholder { font-weight: var(--component-file-select-required-placeholder-font-weight);
					font-size: var(--component-file-select-required-placeholder-font-size); color: var(--component-file-select-required-placeholder-color); }

.file-select-field.empty .file-select-field-content {
					font-weight: var(--component-file-select-empty-font-weight); font-style: var(--component-file-select-empty-font-style);
					color: var(--component-file-select-empty-text-color); background-color: var(--component-file-select-empty-background-color);
					box-shadow: var(--component-file-select-empty-shadow);
					border: var(--component-file-select-empty-border-size) solid var(--component-file-select-empty-border-color); }
.file-select-field.empty { outline: var(--component-file-select-empty-outline-size) solid var(--component-file-select-empty-outline-color);
					 outline-offset: var(--component-file-select-empty-outline-offset); }
.file-select-field.empty .file-select-field-placeholder { font-weight: var(--component-file-select-empty-placeholder-font-weight);
					font-size: var(--component-file-select-empty-placeholder-font-size); color: var(--component-file-select-empty-placeholder-color); }

.file-select-field.invalid .file-select-field-content {
					font-weight: var(--component-file-select-invalid-font-weight); font-style: var(--component-file-select-invalid-font-style);
					color: var(--component-file-select-invalid-text-color); background-color: var(--component-file-select-invalid-background-color);
					box-shadow: var(--component-file-select-invalid-shadow);
					border: var(--component-file-select-invalid-border-size) solid var(--component-file-select-invalid-border-color); }
.file-select-field.invalid { outline: var(--component-file-select-invalid-outline-size) solid var(--component-file-select-invalid-outline-color);
					 outline-offset: var(--component-file-select-invalid-outline-offset); }
.file-select-field.invalid .file-select-field-placeholder { font-weight: var(--component-file-select-invalid-placeholder-font-weight);
					font-size: var(--component-file-select-invalid-placeholder-font-size); color: var(--component-file-select-invalid-placeholder-color); }

.file-select-field.focus .file-select-field-content {
					font-weight: var(--component-file-select-focus-font-weight); font-style: var(--component-file-select-focus-font-style);
					color: var(--component-file-select-focus-text-color); background-color: var(--component-file-select-focus-background-color);
					box-shadow: var(--component-file-select-focus-shadow);
					border: var(--component-file-select-focus-border-size) solid var(--component-file-select-focus-border-color); }
.file-select-field.focus { outline: var(--component-file-select-focus-outline-size) solid var(--component-file-select-focus-outline-color);
					 outline-offset: var(--component-file-select-focus-outline-offset); }
.file-select-field.focus .file-select-field-placeholder { font-weight: var(--component-file-select-focus-placeholder-font-weight);
					font-size: var(--component-file-select-focus-placeholder-font-size); color: var(--component-file-select-focus-placeholder-color); }

.file-select-field:disabled .file-select-field-content {
					font-weight: var(--component-file-select-disabled-font-weight); font-style: var(--component-file-select-disabled-font-style);
					color: var(--component-file-select-disabled-text-color); background-color: var(--component-file-select-disabled-background-color);
					box-shadow: var(--component-file-select-disabled-shadow);
					border: var(--component-file-select-disabled-border-size) solid var(--component-file-select-disabled-border-color); }
.file-select-field:disabled { outline: var(--component-file-select-disabled-outline-size) solid var(--component-file-select-disabled-outline-color);
					 outline-offset: var(--component-file-select-disabled-outline-offset); }
.file-select-field:disabled .file-select-field-placeholder { font-weight: var(--component-file-select-disabled-placeholder-font-weight);
					font-size: var(--component-file-select-disabled-placeholder-font-size); color: var(--component-file-select-disabled-placeholder-color); }


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* tooltip:
*/

/* todo */
/* todo +info-button/window */
/* todo +hint-window */

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* list field:

list-field.list-field.[inline].[important].[empty]
|
+--label.group-label.[label-small]
|  |
|  +--span.group-mainlabel
|  |
|  +--span.group-sublabel
|
+--label.mobile-group-label.[label-small]
|  |
|  +--span.mobile-group-mainlabel
|  |
|  +--span.mobile-group-sublabel
|
+--div.field-inner
   |
   +--{div.list-field-add-container.list-field-add-top} attribute "add-button add-button-top"
   |  |
   |  +--button-field.list-field-add
   |
   +--div.list-items
   |  |
   |  +--(multiple): list-item.list-item
   |     |
   |     +--{button-field.list-field-remove.list-field-remove-left} attribute "remove-button remove-button-left"
   |     |
   |     +--div.list-item-content
   |     |
   |     +--{button-field.list-field-remove} attribute "remove-button remove-button-right"
   |
   +--{div.list-field-add-container} attribute "add-button"
      |
      +--button-field.list-field-add
*/

.list-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-list-margin); }
.list-field.label-top { flex-direction: column; }
.list-field-add-container { margin: var(--component-list-add-margin); display: flex; flex-direction: row;
							justify-content: var(--component-list-add-align); }
.list-field .field-inner { display: flex; flex-direction: var(--component-list-add-pos); }
.list-field.label-top .field-inner { align-self: normal; }
.list-items { flex: 1 1 0; }
.list-item { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: var(--component-list-item-align);
			 padding: var(--component-list-item-padding); }
.list-item-content { padding: var(--component-list-item-content-padding); flex: 1 1 0; }
.list-field-remove { margin-left: var(--component-list-remove-margin); align-self: var(--component-list-remove-align); }
.list-field-remove.list-field-remove-left { margin-left: -0; margin-right: var(--component-list-remove-margin); }

.list-field-remove { width: var(--component-list-add-button-width); height: var(--component-list-add-button-height); }
.list-field-remove .field-inner, .list-field-remove button { width: 100%; }
.list-field-add { width: var(--component-list-remove-button-width); height: var(--component-list-remove-button-height); }
.list-field-add .field-inner, .list-field-add button { width: 100%; }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* number plate field:

number-plate-field.number-plate-field.[inline].[important].[empty].[focus].[invalid]
|
+--label.group-label.[label-small]
|  |
|  +--span.group-mainlabel
|  |
|  +--span.group-sublabel
|
+--label.mobile-group-label.[label-small]
|  |
|  +--span.mobile-group-mainlabel
|  |
|  +--span.mobile-group-sublabel
|
+--div.field-inner
   |
   +--input-field.number-plate-field-input
   |
   +--select-field.number-plate-field-country
*/

.number-plate-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-numberplate-margin); }
.number-plate-field.label-top { flex-direction: column; }
.number-plate-field {}

.number-plate-field .field-inner { display: flex; flex-direction: row; align-items: stretch; align-self: var(--component-numberplate-item-align);
					 outline: var(--component-numberplate-outline-size) solid var(--component-numberplate-outline-color);
					 outline-offset: var(--component-numberplate-outline-offset); position: relative; }
.number-plate-field.label-top div.field-inner { align-self: normal; }
.number-plate-field .input-field { width: var(--component-numberplate-width); max-width: var(--component-numberplate-width); margin: 0; }
.number-plate-field .select-field { margin: 0; margin-left: var(--component-numberplate-gap); }
.number-plate-field .number-plate-city-name { font-family: var(--component-numberplate-city-font); max-width: 100%; white-space: nowrap;
					font-size: var(--component-numberplate-city-font-size); font-weight: var(--component-numberplate-city-font-weight);
					font-style: var(--component-numberplate-city-font-style); color: var(--component-numberplate-city-text-color);
					position: absolute; bottom: var(--component-numberplate-city-bottom); left: var(--component-numberplate-city-left); }

.number-plate-field .input-field div input, .number-plate-field.ng-invalid .input-field div input.ng-untouched, .number-plate-field .input-field div input.ng-invalid.ng-untouched {
					 font-family: var(--component-numberplate-font); font-size: var(--component-numberplate-font-size);
					 font-weight: var(--component-numberplate-font-weight); font-style: var(--component-numberplate-font-style);
					 line-height: var(--component-numberplate-line-height); color: var(--component-numberplate-text-color);
					 background-color: var(--component-numberplate-background-color); box-shadow: var(--component-numberplate-shadow);
					 border-radius: var(--component-numberplate-border-radius); border-bottom-left-radius: 0; border-top-left-radius: 0;
					 border: var(--component-numberplate-border-size) solid var(--component-numberplate-border-color);
					 padding: var(--component-numberplate-padding); }

.number-plate-field.important .input-field div input, .number-plate-field.important div textarea {
					font-weight: var(--component-numberplate-important-font-weight); font-style: var(--component-numberplate-important-font-style);
					color: var(--component-numberplate-important-text-color); background-color: var(--component-numberplate-important-background-color);
					box-shadow: var(--component-numberplate-important-shadow);
					border: var(--component-numberplate-important-border-size) solid var(--component-numberplate-important-border-color); }
.number-plate-field.important { outline: var(--component-numberplate-important-outline-size) solid var(--component-numberplate-important-outline-color);
					 outline-offset: var(--component-numberplate-important-outline-offset); }

.number-plate-field[required] .input-field div input {
					font-weight: var(--component-numberplate-required-font-weight); font-style: var(--component-numberplate-required-font-style);
					color: var(--component-numberplate-required-text-color); background-color: var(--component-numberplate-required-background-color);
					box-shadow: var(--component-numberplate-required-shadow);
					border: var(--component-numberplate-required-border-size) solid var(--component-numberplate-required-border-color); }
.number-plate-field[required] { outline: var(--component-numberplate-required-outline-size) solid var(--component-numberplate-required-outline-color);
					 outline-offset: var(--component-numberplate-required-outline-offset); }


.number-plate-field.empty .input-field div input {
					font-weight: var(--component-numberplate-empty-font-weight); font-style: var(--component-numberplate-empty-font-style);
					color: var(--component-numberplate-empty-text-color); background-color: var(--component-numberplate-empty-background-color);
					box-shadow: var(--component-numberplate-empty-shadow);
					border: var(--component-numberplate-empty-border-size) solid var(--component-numberplate-empty-border-color); }
.number-plate-field.empty { outline: var(--component-numberplate-empty-outline-size) solid var(--component-numberplate-empty-outline-color);
					 outline-offset: var(--component-numberplate-empty-outline-offset); }

.number-plate-field.invalid .input-field div input {
					font-weight: var(--component-numberplate-invalid-font-weight); font-style: var(--component-numberplate-invalid-font-style);
					color: var(--component-numberplate-invalid-text-color); background-color: var(--component-numberplate-invalid-background-color);
					box-shadow: var(--component-numberplate-invalid-shadow);
					border: var(--component-numberplate-invalid-border-size) solid var(--component-numberplate-invalid-border-color); }
.number-plate-field.invalid { outline: var(--component-numberplate-invalid-outline-size) solid var(--component-numberplate-invalid-outline-color);
					 outline-offset: var(--component-numberplate-invalid-outline-offset); }

.number-plate-field.focus .input-field div input {
					font-weight: var(--component-numberplate-focus-font-weight); font-style: var(--component-numberplate-focus-font-style);
					color: var(--component-numberplate-focus-text-color); background-color: var(--component-numberplate-focus-background-color);
					box-shadow: var(--component-numberplate-focus-shadow);
					border: var(--component-numberplate-focus-border-size) solid var(--component-numberplate-focus-border-color); }
.number-plate-field.focus { outline: var(--component-numberplate-focus-outline-size) solid var(--component-numberplate-focus-outline-color);
					 outline-offset: var(--component-numberplate-focus-outline-offset); }

.number-plate-field:disabled .input-field div input {
					font-weight: var(--component-numberplate-disabled-font-weight); font-style: var(--component-numberplate-disabled-font-style);
					color: var(--component-numberplate-disabled-text-color); background-color: var(--component-numberplate-disabled-background-color);
					box-shadow: var(--component-numberplate-disabled-shadow);
					border: var(--component-numberplate-disabled-border-size) solid var(--component-numberplate-disabled-border-color); }
.number-plate-field:disabled { outline: var(--component-numberplate-disabled-outline-size) solid var(--component-numberplate-disabled-outline-color);
					 outline-offset: var(--component-numberplate-disabled-outline-offset); }

/* left addon with country name */
.number-plate-field .input-field-addon-left {
		text-align: center; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block;
		padding: var(--component-numberplate-addon-padding); font-family: var(--component-numberplate-addon-font);
		font-size: var(--component-numberplate-addon-font-size); font-weight: var(--component-numberplate-addon-font-weight);
		font-style: var(--component-numberplate-addon-font-style); line-height: var(--component-numberplate-addon-line-height);
		color: var(--component-numberplate-addon-text-color); background-color: var(--component-numberplate-addon-background-color);
		min-width: var(--component-numberplate-addon-width);
		border: var(--component-numberplate-border-size) solid var(--component-numberplate-border-color); }

.number-plate-field.important .input-field-addon-left {
		font-weight: var(--component-numberplate-addon-important-font-weight); font-style: var(--component-numberplate-addon-important-font-style);
		color: var(--component-numberplate-addon-important-text-color); background-color: var(--component-numberplate-addon-important-background-color);
		border: var(--component-numberplate-important-border-size) solid var(--component-numberplate-important-border-color); }

.number-plate-field[required] .input-field-addon-left {
		font-weight: var(--component-numberplate-addon-required-font-weight); font-style: var(--component-numberplate-addon-required-font-style);
		color: var(--component-numberplate-addon-required-text-color); background-color: var(--component-numberplate-addon-required-background-color);
		border: var(--component-numberplate-required-border-size) solid var(--component-numberplate-required-border-color); }

.number-plate-field.empty .input-field-addon-left {
		font-weight: var(--component-numberplate-addon-empty-font-weight); font-style: var(--component-numberplate-addon-empty-font-style);
		color: var(--component-numberplate-addon-empty-text-color); background-color: var(--component-numberplate-addon-empty-background-color);
		border: var(--component-numberplate-empty-border-size) solid var(--component-numberplate-empty-border-color); }

.number-plate-field.invalid .input-field-addon-left {
		font-weight: var(--component-numberplate-addon-invalid-font-weight); font-style: var(--component-numberplate-addon-invalid-font-style);
		color: var(--component-numberplate-addon-invalid-text-color); background-color: var(--component-numberplate-addon-invalid-background-color);
		border: var(--component-numberplate-invalid-border-size) solid var(--component-numberplate-invalid-border-color); }

.number-plate-field.focus .input-field-addon-left {
		font-weight: var(--component-numberplate-addon-focus-font-weight); font-style: var(--component-numberplate-addon-focus-font-style);
		color: var(--component-numberplate-addon-focus-text-color); background-color: var(--component-numberplate-addon-focus-background-color);
		border: var(--component-numberplate-focus-border-size) solid var(--component-numberplate-focus-border-color); }

.number-plate-field:disabled .input-field-addon-left {
		font-weight: var(--component-numberplate-addon-disabled-font-weight); font-style: var(--component-numberplate-addon-disabled-font-style);
		color: var(--component-numberplate-addon-disabled-text-color); background-color: var(--component-numberplate-addon-disabled-background-color);
		border: var(--component-numberplate-disabled-border-size) solid var(--component-numberplate-disabled-border-color); }

.number-plate-field .input-field-addon-left, .number-plate-field.important .input-field-addon-left, .number-plate-field[required] .input-field-addon-left,
	.number-plate-field.empty .input-field-addon-left, .number-plate-field.invalid .input-field-addon-left, .number-plate-field.focus .input-field-addon-left
	.number-plate-field:disabled .input-field-addon-left {
		border-right: none; border-top-left-radius: var(--component-numberplate-border-radius);
		border-bottom-left-radius: var(--component-numberplate-border-radius); }
.number-plate-field .input-field-group-left input { border-top-left-radius: 0; border-bottom-left-radius: 0; }


.number-plate-field .input-field-addon-left { position: relative; }
.number-plate-field .input-field-addon-left span { position: absolute; left: 0; text-align: center; width: 100%;
												   bottom: var(--component-numberplate-addon-offset); }
.number-plate-field .number-plate-field-input.format-type-eu .input-field-addon-left {
	background-image: url(../lib/number_plate/number_plate_eu.svg); background-repeat: no-repeat; background-size: auto 100%; color: white; }
.number-plate-field .number-plate-field-input.format-type-eu .input-field-group-left input { border-left: none; }

.number-plate-field .number-plate-field-input.country-nl .input-field-addon-left,
	.number-plate-field .number-plate-field-input.country-nl input { background-color: #fad20e; }
.number-plate-field .number-plate-field-input.country-lu .input-field-addon-left,
	.number-plate-field .number-plate-field-input.country-lu input { background-color: #fad20e; }
.number-plate-field .number-plate-field-input.country-gb .input-field-addon-left,
	.number-plate-field .number-plate-field-input.country-gb input { background-color: #fad20e; }

.number-plate-field .number-plate-field-input.country-xs .input-field-addon-left,
.number-plate-field .number-plate-field-input.country-me .input-field-addon-left,
.number-plate-field .number-plate-field-input.country-al .input-field-addon-left { color: white; background-color: #2142a4; }


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* image field:

image-field.image-field.[inline].[important].[empty].[focus].[invalid]
|
+--label.group-label.[label-small]
|  |
|  +--span.group-mainlabel
|  |
|  +--span.group-sublabel
|
+--label.mobile-group-label.[label-small]
|  |
|  +--span.mobile-group-mainlabel
|  |
|  +--span.mobile-group-sublabel
|
+--div.field-inner
   |
   +--{div.image-field-button-container.image-field-buttons-left} attributes "remove-button" "upload-button" "buttons-left"
   |  |
   |  +--button-field.image-field-upload
   |  |
   |  +--button-field.image-field-remove
   |
   +--div.image-field-container.[image-placeholder]
   |  |
   |  +--img.image-field-image
   |
   +--{div.image-field-button-container} attributes "remove-button" "upload-button"
      |
      +--button-field.image-field-upload
      |
      +--button-field.image-field-remove
*/

.image-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-image-margin); }
.image-field.label-top { flex-direction: column; }
.image-field .field-inner { }
.image-field.label-top .field-inner { align-self: normal; }
.image-field .field-inner { display: flex; flex-direction: flex-direction: var(--component-image-button-container-pos);
		align-items: stretch; align-self: var(--component-image-item-align);
		outline: var(--component-image-outline-size) solid var(--component-image-outline-color);
		outline-offset: var(--component-image-outline-offset); }

.image-field .image-field-container, .image-field.ng-invalid.ng-untouched .image-field-container { width: 100%; cursor: pointer;
		padding: var(--component-image-padding); background-color: var(--component-image-background-color);
		border: var(--component-image-border-size) solid var(--component-image-border-color);
		border-radius: var(--component-image-border-radius); flex: 1 1 0; justify-content: center; align-items: center; display: flex; }
.image-field .image-field-container:hover { background-color: var(--component-image-hover-background-color);
		border: var(--component-image-hover-border-size) solid var(--component-image-hover-border-color); }

.image-field.important .field-inner { outline: var(--component-image-important-outline-size) solid var(--component-image-important-outline-color);
		outline-offset: var(--component-image-important-outline-offset); }
.image-field.important .image-field-container {
		background-color: var(--component-image-important-background-color);
		border: var(--component-image-important-border-size) solid var(--component-image-important-border-color); }

.image-field[required] .field-inner { outline: var(--component-image-required-outline-size) solid var(--component-image-required-outline-color);
		outline-offset: var(--component-image-required-outline-offset); }
.image-field[required] .image-field-container {
		background-color: var(--component-image-required-background-color);
		border: var(--component-image-required-border-size) solid var(--component-image-required-border-color); }

.image-field.empty .field-inner { outline: var(--component-image-empty-outline-size) solid var(--component-image-empty-outline-color);
		outline-offset: var(--component-image-empty-outline-offset); }
.image-field.empty .image-field-container {
		background-color: var(--component-image-empty-background-color);
		border: var(--component-image-empty-border-size) solid var(--component-image-empty-border-color); }

.image-field.invalid .field-inner { outline: var(--component-image-invalid-outline-size) solid var(--component-image-invalid-outline-color);
		outline-offset: var(--component-image-invalid-outline-offset); }
.image-field.invalid .image-field-container {
		background-color: var(--component-image-invalid-background-color);
		border: var(--component-image-invalid-border-size) solid var(--component-image-invalid-border-color); }

.image-field.focus .field-inner { outline: var(--component-image-focus-outline-size) solid var(--component-image-focus-outline-color);
		outline-offset: var(--component-image-focus-outline-offset); }
.image-field.focus .image-field-container {
		background-color: var(--component-image-focus-background-color);
		border: var(--component-image-focus-border-size) solid var(--component-image-focus-border-color); }

.image-field:disabled .field-inner { outline: var(--component-image-disabled-outline-size) solid var(--component-image-disabled-outline-color);
		outline-offset: var(--component-image-disabled-outline-offset); }
.image-field:disabled .image-field-container {
		background-color: var(--component-image-disabled-background-color);
		border: var(--component-image-disabled-border-size) solid var(--component-image-disabled-border-color); }

.image-field-container.image-placeholder { outline: var(--component-image-placeholder-outline-size) solid var(--component-image-placeholder-outline-color);
		outline-offset: var(--component-image-placeholder-outline-offset); background-color: var(--component-image-placeholder-background-color); }
.image-field-image { max-width: var(--component-image-max-width); max-height: var(--component-image-max-height); display: block; }
.image-field-button-container { margin-left: var(--component-image-button-container-margin);
								align-self: var(--component-image-button-container-align);
								display: flex; flex-direction: var(--component-image-button-pos);
								gap: var(--component-image-button-gap); }
.image-field-button-container.image-field-buttons-left { margin-left: 0; margin-right: var(--component-image-button-container-margin); }
.image-field-button-container .button-field { margin: var(--component-image-button-margin); }
.image-field .button-field { width: var(--component-image-button-width); height: var(--component-image-button-height); }
.image-field .button-field .field-inner, .image-field .button-field button { width: 100%; }


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* upload field:

upload-field.upload-field.[inline].[important].[empty].[focus].[invalid]
|
+--label.group-label.[label-small]
|  |
|  +--span.group-mainlabel
|  |
|  +--span.group-sublabel
|
+--label.mobile-group-label.[label-small]
|  |
|  +--span.mobile-group-mainlabel
|  |
|  +--span.mobile-group-sublabel
|
+--div.field-inner
   |
   +--div.upload-field-container
   |  |
   |  +--input
   |
   +--{div.upload-field-preview-container} attributes "preview"
      |
      +--(multiple): div.upload-preview
*/

/*normal -> important -> required -> empty -> invalid -> focus -> disabled*/
/*todo*/

.upload-field { display: flex; flex-direction: var(--component-label-pos); margin: var(--component-image-margin); }
.upload-field.label-top { flex-direction: column; }
.upload-field .field-inner { }
.upload-field.label-top .field-inner { align-self: normal; }
.upload-field .field-inner { display: flex; flex-direction: flex-direction: var(--component-image-button-container-pos);
		align-items: stretch; align-self: var(--component-image-item-align);
		outline: var(--component-image-outline-size) solid var(--component-image-outline-color);
		outline-offset: var(--component-image-outline-offset); }
.upload-field:disabled .field-inner { outline: var(--component-image-disabled-outline-size) solid var(--component-image-disabled-outline-color);
		outline-offset: var(--component-image-disabled-outline-offset); }
.upload-field.ng-invalid .field-inner { outline: var(--component-image-invalid-outline-size) solid var(--component-image-invalid-outline-color);
		outline-offset: var(--component-image-invalid-outline-offset); }

.upload-field .upload-field-container, .upload-field.ng-invalid.ng-untouched .upload-field-container { width: 100%; cursor: pointer;
		padding: var(--component-image-padding); background-color: var(--component-image-background-color);
		border: var(--component-image-border-size) solid var(--component-image-border-color);
		border-radius: var(--component-image-border-radius); flex: 1 1 0; justify-content: center; align-items: center; display: flex; }
.upload-field .upload-field-container:hover { background-color: var(--component-image-hover-background-color);
		border: var(--component-image-hover-border-size) solid var(--component-image-hover-border-color); }
.upload-field .upload-field-container:focus { background-color: var(--component-image-focus-background-color);
		border: var(--component-image-focus-border-size) solid var(--component-image-focus-border-color); }
.upload-field .upload-field-container:disabled { background-color: var(--component-image-disabled-background-color);
		border: var(--component-image-disabled-border-size) solid var(--component-image-disabled-border-color); }
.upload-field.ng-invalid .upload-field-container, .upload-field .upload-field-container.ng-invalid {
		background-color: var(--component-image-invalid-background-color);
		border: var(--component-image-invalid-border-size) solid var(--component-image-invalid-border-color); }
.upload-field-container.image-placeholder { outline: var(--component-image-placeholder-outline-size) solid var(--component-image-placeholder-outline-color);
		outline-offset: var(--component-image-placeholder-outline-offset); background-color: var(--component-image-placeholder-background-color); }
.upload-field-image { max-width: var(--component-image-max-width); max-height: var(--component-image-max-height); display: block; }
.upload-field-button-container { margin-left: var(--component-image-button-container-margin);
								align-self: var(--component-image-button-container-align);
								display: flex; flex-direction: var(--component-image-button-pos);
								gap: var(--component-image-button-gap); }
.upload-field-button-container.upload-field-buttons-left { margin-left: 0; margin-right: var(--component-image-button-container-margin); }
.upload-field-button-container .button-field { margin: var(--component-image-button-margin); }
.upload-field .button-field { width: var(--component-image-button-width); height: var(--component-image-button-height); }
.upload-field .button-field .field-inner, .upload-field .button-field button { width: 100%; }


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* table field:

table-field.table-field.[important].[empty].[focus].[invalid]
|
+--div.table-field-tool-area
|  |
|  +--div.table-field-title-area
|  |  |
|  |  +--h1.table-field-title
|  |  |
|  |  +--h2.table-field-subtitle
|  |
|  +--div.table-field-tool-container
|     |
|     +--div.table-field-tool-line
|     |   |
|     |   +--{select-field.table-field-filter-select} attribute "select-filter"
|     |   |
|     |   +--{input-field.table-field-filter} attribute "input-filter"
|     |   |
|     |   +--{button-field.table-field-filter-button} attribute "filter-button"
|     |   |
|     |   +--{button-field.table-field-add-button} attribute "add-button"
|     |   |
|     |   +--{button-field.table-field-remove-button} attribute "remove-button"
|     |   |
|     |   +--{button-field.table-field-import-button} attribute "import-button"
|     |   |
|     |   +--{button-field.table-field-export-button} attribute "export-button"
|     |   |
|     |   +--{button-field.table-field-button1-button} attribute "button1"
|     |   |
|     |   +--... (more buttons)
|     |
|    (+--div.table-field-tool-line)    only if 2nd toolbar line
|        |
|        +--... (tool button / select)
|
+--div.table-field-outer
   |
   +--div.table-field-inner
      |
      +--div.table-field-table
         |
         +--table-field-head.table-field-head
         |  |
         |  +--div.table-field-thead-tr
         |     |
         |     +--(multiple): table-field-col.table-field-th.[center].[right]
         |        |
         |        +--div.table-field-th-inner
         |        |
         |        +--{span.table-field-th-sorting.[sort-descending].[sort-ascending]} attribute "sortable"
         |
         +--table-field-body.table-field-body
            |
            +--(multiple): table-field-row.table-field-tr
               |
               +--(multiple): table-field-cell.table-field-td.[center].[right]
*/

/*normal -> important -> required -> empty -> invalid -> focus -> disabled*/
/*todo*/

.table-field { display: flex; flex-direction: column; margin: var(--table-field-margin); height: 100%; }
.table-field.inline { display: inline-flex; height: auto; }
.table-field-tool-area { display: flex; flex-direction: row; align-items: flex-end; margin-bottom: var(--table-field-tool-margin);
						 padding: var(--table-field-tool-padding); }
.table-field-title-area { display: flex; flex-direction: column; margin-right: var(--table-field-title-margin); }
.table-field-title { font-family: var(--table-field-title-font); font-size: var(--table-field-title-font-size);
					 font-weight: var(--table-field-title-font-weight); font-style: var(--table-field-title-font-style);
					 line-height: var(--table-field-title-line-height); color: var(--table-field-title-text-color); }
.table-field-subtitle { font-family: var(--table-field-title-font); font-size: var(--table-field-subtitle-font-size);
						font-weight: var(--table-field-subtitle-font-weight); font-style: var(--table-field-subtitle-font-style);
						line-height: var(--table-field-subtitle-line-height); color: var(--table-field-subtitle-text-color); }

.table-field-tool-container { display: flex; flex-direction: column; flex: 1 1 0; }
.table-field-tool-line { display: flex; flex-direction: row; justify-content: end; }

.table-field-filter { flex: var(--table-field-tool-input-filter-flex); margin-left: var(--table-field-tool-input-filter-margin-left);
					  margin-right: var(--table-field-tool-input-filter-margin-right); max-width: var(--table-field-tool-input-filter-max-width); }
.table-field-filter-select, .table-field-filter-select2, .table-field-filter-select3, .table-field-filter-select4 {
					flex: var(--table-field-tool-select-filter-flex); margin-left: var(--table-field-tool-select-filter-margin-left);
					margin-right: var(--table-field-tool-select-filter-margin-right); max-width: var(--table-field-tool-select-filter-max-width); }

.table-field-add-button, .table-field-remove-button, .table-field-import-button, .table-field-export-button,
	.table-field-filter-button, .table-field-button1-button, .table-field-button2-button, .table-field-button3-button, .table-field-button4-button,
	.table-field-button5-button, .table-field-button6-button, .table-field-button7-button, .table-field-button8-button, .table-field-button9-button
 			{ margin-left: var(--table-field-tool-button-margin-left); margin-right: var(--table-field-tool-button-margin-right); }

.table-field-add-button button, .table-field-remove-button button, .table-field-import-button button, .table-field-export-button button,
	.table-field-filter-button button, .table-field-button1-button button, .table-field-button2-button button, .table-field-button3-button button,
	.table-field-button4-button button, .table-field-button5-button button, .table-field-button6-button button, .table-field-button7-button button,
	.table-field-button8-button button, .table-field-button9-button button
			{ width: var(--table-field-tool-button-width); }

.table-field-tool-separator { height: 1px; width: var(--table-field-tool-separator-width); }
.table-field-tool-long-separator { height: 1px; width: var(--table-field-tool-long-separator-width); }

.table-field-outer { display: flex; position: relative; overflow: hidden; flex-direction: column; flex-grow: 1; padding: var(--table-field-padding);
					 border: var(--table-field-border-size) solid var(--table-field-border-color); height: 100%; }
.table-field-inner { display: block; overflow-y: auto; flex-grow: 1; height: 100%; position: relative; }
.table-field-table { display: table; table-layout: fixed; border-spacing: 0; border-collapse: separate; width: 100%;
					 font-family: var(--table-field-font); font-size: var(--table-field-font-size); font-weight: var(--table-field-font-weight);
					 font-style: var(--table-field-font-style); line-height: var(--table-field-line-height); color: var(--table-field-text-color);
					 min-height: 2em; }
.table-field.inline .table-field-table { display: inline-table; width: auto; }
.table-field-thead { display: table-header-group; }
.table-field-thead-tr { display: table-row; cursor: pointer; }
.table-field-tbody { display: table-row-group; min-height: 1em; }
.table-field-tr { display: table-row; }
.table-field-th { display: table-cell; overflow: hidden; white-space: nowrap; position: -webkit-sticky; position: sticky; top: 0;
				  background-color: var(--table-field-header-row-background-color);
				  border-bottom: var(--table-field-header-cell-inner-hborder-size) solid var(--table-field-header-cell-inner-hborder-color);
				  border-top: var(--table-field-header-cell-outer-border-size) solid var(--table-field-header-cell-outer-border-color);
				  padding: var(--table-field-header-cell-padding); font-family: var(--table-field-header-font);
				  font-size: var(--table-field-header-font-size); font-weight: var(--table-field-header-font-weight);
				  font-style: var(--table-field-header-font-style); line-height: var(--table-field-header-line-height);
				  color: var(--table-field-header-text-color); line-height: var(--table-field-header-line-height); }
.table-field-th-sorting { position: absolute; right: var(--table-field-header-cell-sorting-offset); top: 50%; transform: translateY(-50%); }
.table-field-th-sorting.sort-ascending { margin-top: -4px; }
.table-field-th-sorting.sort-descending { margin-top: 2px; }
.table-field-td { display: table-cell; overflow: hidden; white-space: nowrap; background-color: var(--table-field-row-background-color);
				  padding: var(--table-field-cell-padding); cursor: pointer; height: var(--table-field-cell-height); }
.table-field-th.center .table-field-td.center { text-align: center; }
.table-field-th.right .table-field-td.right { text-align: right; }
.table-field-tr:nth-child(2n) .table-field-td { background-color: var(--table-field-even-row-background-color);
												color: var(--table-field-even-row-text-color); }
.table-field-tr:nth-child(2n+1) .table-field-td { background-color: var(--table-field-odd-row-background-color);
												  color: var(--table-field-odd-row-text-color); }
.table-field-tr:hover .table-field-td { background-color: var(--table-field-hover-row-background-color);
										color: var(--table-field-hover-row-text-color); }
.table-field-td + .table-field-td { border-left: var(--table-field-cell-inner-vborder-size) solid var(--table-field-cell-inner-vborder-color); }
.table-field-th + .table-field-th { border-left: var(--table-field-header-cell-inner-vborder-size) solid var(--table-field-header-cell-inner-vborder-color); }
.table-field-td:first-child { border-left: var(--table-field-cell-outer-border-size) solid var(--table-field-cell-outer-border-color); }
.table-field-td:last-child { border-right: var(--table-field-cell-outer-border-size) solid var(--table-field-cell-outer-border-color); }
.table-field-th:first-child { border-left: var(--table-field-header-cell-outer-border-size) solid var(--table-field-header-cell-outer-border-color); }
.table-field-th:last-child { border-right: var(--table-field-header-cell-outer-border-size) solid var(--table-field-header-cell-outer-border-color); }
.table-field-td { border-bottom: var(--table-field-cell-inner-hborder-size) solid var(--table-field-cell-inner-hborder-color); }
.table-field-tr:last-child .table-field-td { border-bottom: var(--table-field-cell-outer-border-size) solid var(--table-field-cell-outer-border-color); }

:root
{
}

.table-field .table-field-multiselect { display: none; }
.table-field.multiselect .table-field-multiselect { display: table-cell; text-align: center; width: var(--table-field-multiselect-col-width);
													padding: var(--table-field-multiselect-col-padding); }

.table-field.multiselect .table-field-col.table-field-multiselect span { cursor: pointer; }
.table-field.multiselect .table-field-col.table-field-multiselect span:before { content: var(--table-field-multiselect-icon-select-all);
		font-family: var(--table-field-multiselect-icon-font); font-size: var(--table-field-multiselect-icon-header-font-size);
		color: var(--table-field-multiselect-icon-header-color); cursor: pointer; }

.table-field.multiselect .table-field-td.table-field-multiselect span { cursor: pointer; }
.table-field.multiselect .table-field-td.table-field-multiselect span:before { content: var(--table-field-multiselect-icon-unchecked);
		font-family: var(--table-field-multiselect-icon-font); font-size: var(--table-field-multiselect-icon-font-size);
		color: var(--table-field-multiselect-icon-color); cursor: pointer; }
.table-field.multiselect .row-selected .table-field-td.table-field-multiselect span:before { content: var(--table-field-multiselect-icon-checked); }

.table-field.multiselect .row-selected .table-field-tr:nth-child(2n) .table-field-td {
		background-color: var(--table-field-multiselect-even-row-background-color); color: var(--table-field-multiselect-even-row-text-color); }
.table-field.multiselect .row-selected .table-field-tr:nth-child(2n+1) .table-field-td {
		background-color: var(--table-field-multiselect-odd-row-background-color); color: var(--table-field-multiselect-odd-row-text-color); }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* layout-app (app layout frame):

layout-app.layout-app
|
+--div.layout-header
|  |
|  +--div.layout-top-area
|  |  |
|  |  +--div.layout-logo
|  |  |
|  |  +--div.layout-main-menu
|  |  |
|  |  +--div.layout-user-menu
|  |
|  +--div.layout-tool-area
|     |
|     +--div.layout-breadcrumb
|     |
|     +--div.layout-toolbar
|     |
|     +--div.layout-status-icons
|
+--div.layout-body
   |
   +--div.layout-context-container
   |  |
   |  +--div.layout-context
   |  |
   |  +--div.layout-context-footer
   |
   +--div.layout-main-container
      |
      +--div.layout-main
      |
      +--div.layout-main-footer
*/

.layout-app { width: 100vw; height: 100vh; min-height: 100vh; display: flex; flex-direction: column; }
.layout-header { display: flex; flex-direction: column; height: var(--layout-app-header-height); padding: var(--layout-app-header-padding);
				 background-color: var(--layout-app-header-background-color); border: var(--layout-app-header-border); }
.layout-top-area { display: flex; flex-direction: row; align-items: var(--layout-app-header-top-align); height: var(--layout-app-header-top-height);
				   padding: var(--layout-app-header-top-padding); background-color: var(--layout-app-header-top-background-color);
				   border-bottom: var(--layout-app-header-top-border);}
.layout-logo { width: var(--layout-app-logo-width); height: var(--layout-app-logo-height);
			   background-color: var(--layout-app-logo-background-color); border: var(--layout-app-logo-border); }
.layout-main-menu { flex: 1 1 auto; display: flex; flex-direction: row; height: var(--layout-app-main-menu-height);
					padding: var(--layout-app-main-menu-padding); justify-content: var(--layout-app-main-menu-align);
					background-color: var(--layout-app-main-menu-background-color); border: var(--layout-app-main-menu-border); }
.layout-user-menu { display: flex; flex-direction: row; height: var(--layout-app-user-menu-height); padding: var(--layout-app-user-menu-padding);
					justify-content: var(--layout-app-user-menu-align);
					background-color: var(--layout-app-user-menu-background-color); border: var(--layout-app-user-menu-border); }
.layout-tool-area { display: flex; flex-direction: column; position: relative; height: var(--layout-app-header-tool-height);
					padding: var(--layout-app-header-tool-padding); background-color: var(--layout-app-header-tool-background-color);
					border-bottom: var(--layout-app-header-tool-border); }
.layout-breadcrumb { display: flex; flex-direction: column; height: var(--layout-app-breadcrumb-height);
					 padding: var(--layout-app-breadcrumb-padding); justify-content: var(--layout-app-breadcrumb-align);
					 background-color: var(--layout-app-breadcrumb-background-color); border-bottom: var(--layout-app-breadcrumb-border);
					 font-family: var(--layout-app-breadcrumb-font); font-size: var(--layout-app-breadcrumb-font-size);
					 font-weight: var(--layout-app-breadcrumb-font-weight); font-style: var(--layout-app-breadcrumb-font-style);
					 line-height: var(--layout-app-breadcrumb-line-height); color: var(--layout-app-breadcrumb-color); }
.layout-toolbar { display: flex; flex-direction: column; height: var(--layout-app-toolbar-height); padding: var(--layout-app-toolbar-padding);
				  justify-content: var(--layout-app-toolbar-align);
				  background-color: var(--layout-app-toolbar-background-color); border-bottom: var(--layout-app-toolbar-border); }
.layout-status-icons { display: flex; flex-direction: column; height: var(--layout-app-status-icons-height);
					   max-width: var(--layout-app-status-icons-max-width); padding: var(--layout-app-status-icons-padding);
					   justify-content: var(--layout-app-status-icons-align); top: var(--layout-app-status-icons-top);
					   right: var(--layout-app-status-icons-right); position: absolute;
					   background-color: var(--layout-app-status-icons-background-color); border: var(--layout-app-status-icons-border); }

.layout-body { flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: row; padding: var(--layout-app-body-padding);
			   background-color: var(--layout-app-body-background-color); border: var(--layout-app-body-border); }
.layout-context-container { display: flex; flex-direction: column; width: var(--layout-app-context-area-width);
							padding: var(--layout-app-context-area-padding); background-color: var(--layout-app-context-area-background-color);
							border: var(--layout-app-context-area-border); }
.layout-context { flex: 1 1 auto; padding: var(--layout-app-context-padding); background-color: var(--layout-app-context-background-color);
				  justify-content: var(--layout-app-context-align); border: var(--layout-app-context-border); overflow: auto; }
.layout-context-footer { height: var(--layout-app-context-footer-height); padding: var(--layout-app-context-footer-padding);
						 background-color: var(--layout-app-context-footer-background-color);
						 justify-content: var(--layout-app-context-footer-align); border-top: var(--layout-app-context-footer-border); }
.layout-context > * { display: flex; flex-direction: column; }

.layout-main-container { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column;	padding: var(--layout-app-main-container-padding);
						 background-color: var(--layout-app-main-container-background-color); }
.layout-main { flex: 1 1 auto; overflow: auto; padding: var(--layout-app-main-padding); background-color: var(--layout-app-main-background-color);
			   border: var(--layout-app-main-border);}
.layout-main-footer { background-color: #ff9999; height: var(--layout-app-footer-height); padding: var(--layout-app-footer-padding);
					  background-color: var(--layout-app-footer-background-color); justify-content: var(--layout-app-footer-align);
					  border-top: var(--layout-app-footer-border);}

.layout-spacer { width: var(--layout-app-spacer-size); height: var(--layout-app-spacer-size); }

@media only screen and (max-width: 768px)
{
	:root
	{
		--component-label-pos: column;
	}
	.group-label { display: none; }
	.mobile-group-label { display: block; }
	.layout-body { flex-direction: column-reverse; }
	.layout-context > * { flex-direction: row; justify-content: space-evenly; }
}


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* modal window:

body
|
+--div.modal-lowest-backdrop
|
+--div.modal-backdrop.#modal_backdrop_<id>
|
+--div.modal-window-container.#modal_window_<id>.modal-window-size-[sm/md/lg/xl]
   |
   +--modal-window.modal-window
      |
      +--form.modal-window-form
         |
         +--div.modal-window-header
         |  |
         |  +--div.modal-window-title-icon
         |  |
         |  +--div.modal-window-title-area
         |  |  |
         |  |  +--h1.modal-window-title
         |  |  |
         |  |  +--h2.modal-window-subtitle
         |  |
         |  +--div.modal-window-header-button-area
         |     |
         |     +--button-field.modal-button.modal-window-x
         |
         +--div.modal-window-body
         |
         +--div.modal-window-footer
            |
            +--div.modal-window-extra-area
            |  |
            |  +--button-field.modal-button.modal-window-remove
            |  |
            |  +--button-field.modal-button.modal-window-extra
            |
            +--div.modal-window-button-area
               |
               +--button-field.modal-button.modal-window-cancel
               |
               +--button-field.modal-button.modal-window-ok
*/

.modal-lowest-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--modal-window-lowest-backdrop-color); }
.modal-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--modal-window-backdrop-color); }
.modal-window-container { position: fixed; left: 0; right: 0; margin: 0 auto 0 auto; background-color: var(--modal-window-background-color);
				box-shadow: var(--modal-window-shadow); border: var(--modal-window-border-size) solid var(--modal-window-border-color);
				top: var(--modal-window-top); max-height: var(--modal-window-max-height); border-radius: var(--modal-window-border-radius);
				max-width: 99.5%; }
.modal-window-size-sm { width: var(--modal-window-width-sm); min-width: var(--modal-window-min-width-sm); }
.modal-window-size-sm2 { width: var(--modal-window-width-sm2); min-width: var(--modal-window-min-width-sm2); }
.modal-window-size-md { width: var(--modal-window-width-md); min-width: var(--modal-window-min-width-md); }
.modal-window-size-md2 { width: var(--modal-window-width-md2); min-width: var(--modal-window-min-width-md2); }
.modal-window-size-lg { width: var(--modal-window-width-lg); min-width: var(--modal-window-min-width-lg); }
.modal-window-size-lg2 { width: var(--modal-window-width-lg2); min-width: var(--modal-window-min-width-lg2); }
.modal-window-size-xl { width: var(--modal-window-width-xl); min-width: var(--modal-window-min-width-xl); }

.modal-window { position: relative; }
.modal-window-form {}
.modal-window-header { display: flex; flex-direction: row; align-items: center;
		background-color: var(--modal-window-header-color); padding: var(--modal-window-header-padding);
		border: var(--modal-window-header-border-size) solid var(--modal-window-header-border-color);
		border-top-left-radius: var(--modal-window-border-radius); border-top-right-radius: var(--modal-window-border-radius); }
.modal-window-title-icon {}
.modal-window-title-area { flex: 1 1 0;  }
.modal-window-title { font-family: var(--modal-window-title-font); font-size: var(--modal-window-title-font-size);
					  font-weight: var(--modal-window-title-font-weight); font-style: var(--modal-window-title-font-style);
					  line-height: var(--modal-window-title-line-height); color: var(--modal-window-title-color);
					  margin: 0 0 var(--modal-window-title-margin) 0; padding: 0; }
.modal-window-subtitle { font-family: var(--modal-window-subtitle-font); font-size: var(--modal-window-subtitle-font-size);
						 font-weight: var(--modal-window-subtitle-font-weight); font-style: var(--modal-window-subtitle-font-style);
						 line-height: var(--modal-window-subtitle-line-height); color: var(--modal-window-subtitle-color);
						 margin: 0 0 var(--modal-window-subtitle-margin) 0; padding: 0; }
.modal-window-body {
		background-color: var(--modal-window-body-color); padding: var(--modal-window-body-padding); position: relative;
		min-height: 1px; max-height: var(--modal-window-body-max-height); overflow: auto; }

.modal-window-footer { display: flex;
		background-color: var(--modal-window-footer-color); padding: var(--modal-window-footer-padding);
		border: var(--modal-window-footer-border-size) solid var(--modal-window-footer-border-color);
		border-bottom-left-radius: var(--modal-window-border-radius); border-bottom-right-radius: var(--modal-window-border-radius); }
.modal-button.icon { min-width: var(--modal-window-button-icon-width); min-height: var(--modal-window-button-icon-height); }

.modal-window-header-button-area .button-field.icon.icon-only div button { padding: 0; }

.modal-window-extra-area { column-gap: var(--modal-window-button-gap); }
.modal-window-button-area { flex: 1 1 auto; display: flex; justify-content: flex-end; column-gap: var(--modal-window-button-gap); }
.modal-window-button-area .button-field { margin-bottom: 0; }
.modal-button.modal-window-x.icon { min-width: 0; min-height: 0; margin: 0; }
.modal-button.modal-window-x.icon button {
		padding: var(--modal-window-header-button-padding);
		font-family: var(--modal-window-header-button-font); font-size: var(--modal-window-header-button-font-size);
		font-weight: var(--modal-window-header-button-font-weight); font-style: var(--modal-window-header-button-font-style);
		line-height: var(--modal-window-header-button-line-height); color: var(--modal-window-header-button-text-color);
		background-color: var(--modal-window-header-button-background-color); box-shadow: var(--modal-window-header-button-shadow);
		border-radius: var(--modal-window-header-button-border-radius);
		border: var(--modal-window-header-button-border-size) solid var(--modal-window-header-button-border-color);
		outline: var(--modal-window-header-button-outline-size) solid var(--modal-window-header-button-outline-color);
		outline-offset: var(--modal-window-header-button-outline-offset); }
.modal-button.modal-window-x.icon button:hover {
		font-weight: var(--modal-window-header-button-hover-font-weight); font-style: var(--modal-window-header-button-hover-font-style);
		color: var(--modal-window-header-button-hover-text-color); background-color: var(--modal-window-header-button-hover-background-color);
		box-shadow: var(--modal-window-header-button-hover-shadow);
		border: var(--modal-window-header-button-hover-border-size) solid var(--modal-window-header-button-hover-border-color);
		outline: var(--modal-window-header-button-hover-outline-size) solid var(--modal-window-header-button-hover-outline-color);
		outline-offset: var(--modal-window-header-button-hover-outline-offset); }
.modal-button.modal-window-x.icon button:focus {
		font-weight: var(--modal-window-header-button-focus-font-weight); font-style: var(--modal-window-header-button-focus-font-style);
		color: var(--modal-window-header-button-focus-text-color); background-color: var(--modal-window-header-button-focus-background-color);
		box-shadow: var(--modal-window-header-button-focus-shadow);
		border: var(--modal-window-header-button-focus-border-size) solid var(--modal-window-header-button-focus-border-color);
		outline: var(--modal-window-header-button-focus-outline-size) solid var(--modal-window-header-button-focus-outline-color);
		outline-offset: var(--modal-window-header-button-focus-outline-offset); }
.modal-button.modal-window-x.icon button:active {
		font-weight: var(--modal-window-header-button-active-font-weight); font-style: var(--modal-window-header-button-active-font-style);
		color: var(--modal-window-header-button-active-text-color); background-color: var(--modal-window-header-button-active-background-color);
		box-shadow: var(--modal-window-header-button-active-shadow);
		border: var(--modal-window-header-button-active-border-size) solid var(--modal-window-header-button-active-border-color);
		outline: var(--modal-window-header-button-active-outline-size) solid var(--modal-window-header-button-active-outline-color);
		outline-offset: var(--modal-window-header-button-active-outline-offset);
		position: relative; left: var(--modal-window-header-button-active-offset-x); top: var(--modal-window-header-button-active-offset-y); }
.modal-button.modal-window-x.icon img { margin: var(--modal-window-header-button-img-margin); }
.modal-window-remove {}
.modal-window-extra {}
.modal-window-cancel {}
.modal-window-ok {}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* message window:
*/
.message-window-body { display: flex; flex-direction: row; }
.message-window-body .message-icon { align-self: center; width: var(--message-window-icon-width); font-size: var(--message-window-icon-font-size);
		font-weight: var(--message-window-icon-font-weight); font-style: var(--message-window-icon-font-style);
		color: var(--message-window-icon-color); padding: var(--message-window-icon-padding); }
.message-window-body .message-icon.message-error { color: var(--message-window-icon-color-error); }
.message-window-body .message-icon.message-question { color: var(--message-window-icon-color-question); }
.message-window-body p { flex: 1 1 0; align-self: center; font-family: var(--message-window-font); font-size: var(--message-window-font-size);
		font-weight: var(--message-window-font-weight); font-style: var(--message-window-font-style);
		line-height: var(--message-window-line-height); color: var(--message-window-color); padding: var(--message-window-text-padding); }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* security code window:
*/
.security-code-window .input-field { font-size: var(--security-code-font-size)!important; }
.security-code-window .input-field input { text-align: center!important; }
.security-code-window .modal-window-extra-area { flex: 1 1 auto; display: flex; justify-content: center; }
.security-code-window .modal-window-button-area { flex: none; }

.security-code-window .modal-window-extra.modal-button.icon { width: auto; height: auto; }

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* address-field / address selector / address editor:
*/
.address-field input { cursor: pointer; }
.address-field.important {} /* todo */









/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* date picker (date-field) - todo */
.uib-datepicker ~ .dropdown-menu .btn-default { font-weight: normal; padding: 5px 10px; color: #333; background-color: #e6e6e6; border-color: #adadad; }
.uib-datepicker ~ .dropdown-menu .btn-default span { color: #333; }
.uib-datepicker ~ .dropdown-menu .btn-default.active span { font-weight: bold; }
.uib-datepicker button.btn-default { padding: 5px 10px 5px 10px; }
.uib-datepicker ~ .dropdown-menu table:focus { outline: none; }
.uib-datepicker ~ .dropdown-menu { padding: 10px; }
.uib-datepicker ~ .dropdown-menu li { padding-left: 0!important; padding-right: 0!important; }
.uib-datepicker[readonly] { background-color: white; }

.dropdown-menu
{
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

.dropdown-menu .btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
}

.dropdown-menu .btn-default {
    color: #333;
    background-color: #fff;
}

.dropdown-menu .btn-group-sm > .btn, .dropdown-menu .btn-sm {
    line-height: 1.5;
}

.dropdown-menu .text-center {
    text-align: center;
}

.dropdown-menu .btn.active, .dropdown-menu .btn:active {
    outline: 0;
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

.dropdown-menu .btn-info.active.focus, .dropdown-menu .btn-info.active:focus, .dropdown-menu .btn-info.active:hover, .dropdown-menu .btn-info:active.focus, .dropdown-menu .btn-info:active:focus,
.dropdown-menu .btn-info:active:hover, .dropdown-menu .open > .dropdown-toggle.btn-info.focus, .dropdown-menu .open > .dropdown-toggle.btn-info:focus,
.dropdown-menu .open > .dropdown-toggle.btn-info:hover {
    color: #fff;
    background-color: #269abc;
    border-color: #1b6d85;
}

.dropdown-menu .text-muted {
    color: #777;
}

.dropdown-menu .pull-left {
    float: left !important;
}

.dropdown-menu .pull-right {
    float: right !important;
}

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.dropdown-menu .small, .dropdown-menu small {
    font-size: 85%;
}




/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* responsive */
@media only screen and (max-width: 1920px)
{
}

@media only screen and (max-width: 1600px)
{
}

@media only screen and (max-width: 1200px)
{
}

@media only screen and (max-width: 1024px)
{
}

@media only screen and (max-width: 768px)
{
}

@media only screen and (max-width: 500px)
{
	.dialog-col { min-width: unset; max-width: 100%; width: 100%; flex: none; }
}

@media only screen and (max-width: 413px)
{
	.dialog-row { column-gap: var(--component-mobile-gap); margin-bottom: var(--component-mobile-row-margin); }
	.field-inner, .field-group-inner { flex: var(--component-mobile-inner-area-ratio) var(--component-mobile-inner-area-ratio) 0; }
	.field-group { flex-direction: var(--component-mobile-label-pos); }
	.field-group.inline .field-group-inner { column-gap: var(--component-mobile-inline-gap); }
	.button-field { flex-direction: var(--component-mobile-label-pos); }
	.input-field { flex-direction: var(--component-mobile-label-pos); }
	.static-field { flex-direction: var(--component-mobile-label-pos); }
	.select-field { flex-direction: var(--component-mobile-label-pos); }
	.date-field { flex-direction: var(--component-mobile-label-pos); }
	.checkbox-field { flex-direction: var(--component-mobile-label-pos); }
	.radio-field { flex-direction: var(--component-mobile-label-pos); }
	.radio-options { flex: var(--component-mobile-inner-area-ratio) var(--component-mobile-inner-area-ratio) 0; }
	.rating-field { flex-direction: var(--component-mobile-label-pos); }
}

@media only screen and (max-width: 375px)
{
}

@media only screen and (max-width: 320px)
{
}