body, body * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family:Arial;
}
body ol,ol,
body li{
	margin-left:16px;
}
body{
	height:100vh;
	width:100vw;
	overflow:hidden;
}
html { height: 100vh; }
body { position: fixed; height: 100%; }
.UI-iconI18n,
.UI-iconTxt{
	display:flex;
	align-items:center;
	gap:5px;
	&.UI-textblock{
		display:block;
		gap:0;
	}
}

.icon-is-colorizable{
	> .UI-icon > img{
		filter:var(--svgcolor, var(--svgcolor--none));
	}
}
.UI-icon{
	height:var(--icon__height, 100px);
	width:var(--icon__width, 100px);
}
.UI-text{
	font-size:  var(--fontSize, 40px);
	font-weight:var(--fontWeight, normal);
	color:      var(--color, var(--color--none));
}
.UI-button{
	padding:var(--padding, 100px);
	background  : var(--background     , var(--background--none));
	border-color: var(--borderColor    , var(--borderColor--none));
	border-width: var(--borderWidth    , 10px);
	border-style: var(--borderStyle    , solid);
	border-radius:var(--borderRadius   , 0);
}
.UI-title{
	background  : var(--background     , var(--background--none));
	border-color: var(--borderColor    , var(--borderColor--none));
	border-width: var(--borderWidth    , 10px);
	border-style: var(--borderStyle    , solid);
	border-radius:var(--borderRadius   , 0);
	font-weight:  var(--fontWeight     , normal);
	padding:var(--padding, 100px);
	margin:       var(--margin         , 0);
	display:flex;
}
.UI-icon{
	display:inline-flex;
	img{
		height:100%;width:100%;
	}
}
.UI-button{
	/* SEE https://codepen.io/thomasrosen/pen/GjJGMN*/
/*
	box-shadow: 
		var(--UI__BUTTON__shadow-x, 0) 
		var(--UI__BUTTON__shadow-y, 0) 
		var(--UI__BUTTON__shadow-blur, 0) 
		var(--UI__BUTTON__shadow-scale, 0) 
		var(--UI__BUTTON__shadow-color, transparent);
*/
}
.UI-help{
	.UI-text{
		display:block;
		.lang{ display:block;}
	}
}

.UI-panel{
	height:100%;
	overflow:hidden;
	display:grid;
	grid-template-areas:"head" "body";
	grid-template-rows:min-content 1fr;
	gap:var(--UI__PANEL__gap);
	.UI-panel__head{grid-area:head;
		display:flex;
		justify-content:space-between;
		background: var(--UI__PANEL__HEAD__background);
		padding:    var(--UI__PANEL__HEAD__padding);
		align-items:center;
		.UI-button{
			--padding:          var(--UI__PANEL__HEAD__TOOLS__BUTTON__padding);
			--background:       var(--UI__PANEL__HEAD__TOOLS__BUTTON__background);
			--fontSize:         var(--UI__PANEL__HEAD__TOOLS__BUTTON__fontSize);
			--fontWeight:       var(--UI__PANEL__HEAD__TOOLS__BUTTON__fontWeight);
			--borderColor:      var(--UI__PANEL__HEAD__TOOLS__BUTTON__borderColor);
			--borderWidth:      var(--UI__PANEL__HEAD__TOOLS__BUTTON__borderWidth);
			--borderStyle:      var(--UI__PANEL__HEAD__TOOLS__BUTTON__borderStyle);
			--borderRadius:     var(--UI__PANEL__HEAD__TOOLS__BUTTON__borderRadius);
			--color:            var(--UI__PANEL__HEAD__TOOLS__BUTTON__color);
			--icon__height:     var(--UI__PANEL__HEAD__TOOLS__BUTTON__ICON__height);
			--icon__width:      var(--UI__PANEL__HEAD__TOOLS__BUTTON__ICON__width);
			--svgcolor:         var(--UI__PANEL__HEAD__TOOLS__BUTTON__svgcolor);
		}
		.UI-button:hover{
			--background: var(--UI__PANEL__HEAD__TOOLS__BUTTON-HOVER__background);
			--color:      var(--UI__PANEL__HEAD__TOOLS__BUTTON-HOVER__color);
			--svgcolor:   var(--UI__PANEL__HEAD__TOOLS__BUTTON-HOVER__svgcolor);
		}
		.UI-panel__title{
			--fontSize:   var(--UI__PANEL__HEAD__TITLE__fontSize);
			--color:      var(--UI__PANEL__HEAD__TITLE__color);
			--fontWeight: var(--UI__PANEL__HEAD__TITLE__fontWeight);
		}
		.UI-panel__tools{
			display:flex;
			gap:var(--UI__PANEL__HEAD__TOOLS__gap);
			align-items:center;
		}
	}
	.UI-panel__body{grid-area:body;
		height:100%;
		overflow:hidden;
	}
}
.UI-tabulation{
	> input{display:none;}
	height:100%;
	width:100%;
	overflow:hidden;
	display:grid;
	grid-template-areas:"head" "body";
	grid-template-rows:min-content 1fr;
	> .UI-tabulation__head{
		display:flex;
		width:100%;
		overflow:auto;
		scrollbar-width: thin;
		border-width: var(--UI__TABULATION__HEAD__borderWidth);
		border-color: var(--UI__TABULATION__HEAD__borderColor);
		border-style: var(--UI__TABULATION__HEAD__borderStyle);
		> .UI-tab{
			cursor:pointer;
			border-width :  var(--UI__TABULATION__HEAD__TAB__borderWidth);
			padding      :  var(--UI__TABULATION__HEAD__TAB__padding);
			--fontSize:     var(--UI__TABULATION__HEAD__TAB__fontSize);
			--fontWeight:   var(--UI__TABULATION__HEAD__TAB__fontWeight);
			--icon__height: var(--UI__TABULATION__HEAD__TAB__ICON__height);
			--icon__width:  var(--UI__TABULATION__HEAD__TAB__ICON__width);
			border-color:   var(--UI__TABULATION__HEAD__TAB__borderColor);
			background:     var(--UI__TABULATION__HEAD__TAB__background);
			--color:        var(--UI__TABULATION__HEAD__TAB__color);
			--svgcolor:     var(--UI__TABULATION__HEAD__TAB__ICON__svgcolor);
		}
	}
	> .UI-tabulation__body{
		height:100%;
		width:100%;
		overflow:hidden;
		> .UI-tab{
			display:grid;
			grid-template-areas:"head" "body";
			grid-template-rows:min-content 1fr;
			> .UI-head{grid-area:head;
				display:grid;
				grid-template-areas:"title" "help" "selection";
				grid-template-rows:min-content min-content 1fr;
				align-items: center;
				background: var(--UI__TABULATION__BODY__TAB__HEAD__background);
				gap       : var(--UI__TABULATION__BODY__TAB__HEAD__gap);
				padding   : var(--UI__TABULATION__BODY__TAB__HEAD__padding);
				> .UI-title{grid-area:title;
					--background:  var(--UI__TABULATION__BODY__TAB__HEAD__TITLE__background);
					--borderWidth: var(--UI__TABULATION__BODY__TAB__HEAD__TITLE__borderWidth);
					--color:       var(--UI__TABULATION__BODY__TAB__HEAD__TITLE__color);
					--fontSize:    var(--UI__TABULATION__BODY__TAB__HEAD__TITLE__fontSize);
					--fontWeight:  var(--UI__TABULATION__BODY__TAB__HEAD__TITLE__fontWeight);
					--padding:     var(--UI__TABULATION__BODY__TAB__HEAD__TITLE__padding);
				}
				> .UI-help{grid-area:help;
					background:#fff;
					padding:5px;
					p{
						margin:5px 0;
						color:#000;
						font-size:14px;
					}
				}
				> .selection{grid-area:selection;
					display:grid;
					grid-template-areas:"groups button";
					grid-template-columns:1fr max-content;
					align-items:center;
					> .byGroups{grid-area:groups;
						>.byGroup{
							.UI-icon{
								--icon__height:     var(--UI__TABULATION__BODY__TAB__HEAD__TOOLS__BUTTON__ICON__height);
								--icon__width:      var(--UI__TABULATION__BODY__TAB__HEAD__TOOLS__BUTTON__ICON__width);
								--svgcolor:         var(--UI__TABULATION__BODY__TAB__HEAD__TOOLS__BUTTON__svgcolor);
							}
						}
					}
					> .UI-button{grid-area:button;
						--padding:          var(--UI__TABULATION__BODY__TAB__HEAD__TOOLS__BUTTON__padding);
						--background:       var(--UI__TABULATION__BODY__TAB__HEAD__TOOLS__BUTTON__background);
						--fontSize:         var(--UI__TABULATION__BODY__TAB__HEAD__TOOLS__BUTTON__fontSize);
						--fontWeight:       var(--UI__TABULATION__BODY__TAB__HEAD__TOOLS__BUTTON__fontWeight);
						--borderColor:      var(--UI__TABULATION__BODY__TAB__HEAD__TOOLS__BUTTON__borderColor);
						--borderWidth:      var(--UI__TABULATION__BODY__TAB__HEAD__TOOLS__BUTTON__borderWidth);
						--borderStyle:      var(--UI__TABULATION__BODY__TAB__HEAD__TOOLS__BUTTON__borderStyle);
						--borderRadius:     var(--UI__TABULATION__BODY__TAB__HEAD__TOOLS__BUTTON__borderRadius);
						--color:            var(--UI__TABULATION__BODY__TAB__HEAD__TOOLS__BUTTON__color);
						--icon__height:     var(--UI__TABULATION__BODY__TAB__HEAD__TOOLS__BUTTON__ICON__height);
						--icon__width:      var(--UI__TABULATION__BODY__TAB__HEAD__TOOLS__BUTTON__ICON__width);
						--svgcolor:         var(--UI__TABULATION__BODY__TAB__HEAD__TOOLS__BUTTON__svgcolor);
					}
					.UI-button:hover{
						--background: var(--UI__TABULATION__BODY__TAB__HEAD__TOOLS__BUTTON-HOVER__background);
						--color:      var(--UI__TABULATION__BODY__TAB__HEAD__TOOLS__BUTTON-HOVER__color);
						--svgcolor:   var(--UI__TABULATION__BODY__TAB__HEAD__TOOLS__BUTTON-HOVER__svgcolor);
					}
				}
			}
			> .UI-body{grid-area:body;
				background: var(--UI__TABULATION__BODY__TAB__BODY__background);
				padding   : var(--UI__TABULATION__BODY__TAB__BODY__padding);
			}
			display:none;
			height:100%;
			width:100%;
			overflow:auto;
		}
	}
	input:checked{
		background:red;
	}
	> input:nth-child(1):checked ~ .UI-tabulation__head > .UI-tab:nth-child(1),
	> input:nth-child(2):checked ~ .UI-tabulation__head > .UI-tab:nth-child(2),
	> input:nth-child(3):checked ~ .UI-tabulation__head > .UI-tab:nth-child(3),
	> input:nth-child(4):checked ~ .UI-tabulation__head > .UI-tab:nth-child(4),
	> input:nth-child(5):checked ~ .UI-tabulation__head > .UI-tab:nth-child(5),
	> input:nth-child(6):checked ~ .UI-tabulation__head > .UI-tab:nth-child(6){
		border-color :  var(--UI__TABULATION__HEAD__TAB-CURRENT__borderColor);
		background   :  var(--UI__TABULATION__HEAD__TAB-CURRENT__background);
		--color:        var(--UI__TABULATION__HEAD__TAB-CURRENT__color);
		--svgcolor:     var(--UI__TABULATION__HEAD__TAB-CURRENT__ICON__svgcolor);
	}
	> input:nth-child(1):checked ~ .UI-tabulation__body > .UI-tab:nth-child(1),
	> input:nth-child(2):checked ~ .UI-tabulation__body > .UI-tab:nth-child(2),
	> input:nth-child(3):checked ~ .UI-tabulation__body > .UI-tab:nth-child(3),
	> input:nth-child(4):checked ~ .UI-tabulation__body > .UI-tab:nth-child(4),
	> input:nth-child(5):checked ~ .UI-tabulation__body > .UI-tab:nth-child(5),
	> input:nth-child(6):checked ~ .UI-tabulation__body > .UI-tab:nth-child(6){
		display:grid;
	}
}
.UI-dialog{
	width:var(--UI__DIALOG__width);
	height:var(--UI__DIALOG__height);
	margin-top :var(--UI__DIALOG__margin-top);
	margin-left:auto;
	margin-right:auto;
	max-height:calc(100% - var(--UI__DIALOG__margin-top) - 5px);
	overflow:hidden;
	border-radius:var(--UI__DIALOG__border-radius);
	border:
		var(--UI__DIALOG__border-color)
		var(--UI__DIALOG__border-width)
		var(--UI__DIALOG__border-style);
	outline:0;
	box-shadow: 
		var(--UI__DIALOG__shadow-x, 0) 
		var(--UI__DIALOG__shadow-y, 0) 
		var(--UI__DIALOG__shadow-blur, 0) 
		var(--UI__DIALOG__shadow-scale, 0) 
		var(--UI__DIALOG__shadow-color, transparent);
	> .UI-dialogInner{
		display:grid;
		grid-template-areas:"head" "body";
		grid-template-rows: min-content 1fr;
		height:100%;
		overflow:hidden;
		> .UI-head{
			display:grid;
			grid-template-areas:"title tools";
			grid-template-columns:1fr min-content;
			font-weight:bold;
			padding     : var(--UI__DIALOG__HEAD__padding);
			border-width:var(--UI__DIALOG__HEAD__border-width);
			border-color:var(--UI__DIALOG__HEAD__border-color);
			border-style:var(--UI__DIALOG__HEAD__border-style);
			background  :var(--UI__DIALOG__HEAD__background-color);
			> .UI-title{grid-area:title;
				font-size : var(--UI__DIALOG__HEAD__TITLE__TEXT__font-size);
				color     : var(--UI__DIALOG__HEAD__TITLE__TEXT__color);
			}
			> .UI-tools{grid-area:tools;
				display:flex;
				align-items:flex-start;
				gap: var(--UI__DIALOG__HEAD__TOOLS__gap);
			}
		}
		> .UI-body{
			padding     : var(--UI__DIALOG__BODY__padding);
			border-width: var(--UI__DIALOG__BODY__border-width);
			border-color: var(--UI__DIALOG__BODY__border-color);
			border-style: var(--UI__DIALOG__BODY__border-style);
			background  : var(--UI__DIALOG__BODY__background-color);
			iframe{
				width:100%;
				height:100%;
				border:0;
				overflow:hidden;
			}
		}
	}
}

details.filter{
	border-color: var(--UI__FILTER__borderColor, var(--borderColor--none));
	border-width: var(--UI__FILTER__borderWidth, 1);
	border-style: var(--UI__FILTER__borderStyle, solid);
	background:   var(--UI__FILTER__background, var(--background--none));
	margin:       var(--UI__FILTER__margin, 40px 0);
	> .filter__head{
		cursor:pointer;
		display:flex;
		align-items:center;
		justify-content:space-between;
		padding:var(--UI__FILTER__HEAD__padding, 40px);
		> .filter__title{
			--fontSize:    var(--UI__FILTER__HEAD__TITLE__fontSize, 40px);
			--fontWeight:  var(--UI__FILTER__HEAD__TITLE__fontWeight, bold);
			--icon__height: var(--UI__FILTER__HEAD__TITLE__ICON__height, 50px);
			--icon__width : var(--UI__FILTER__HEAD__TITLE__ICON__width, 50px);
			--color:        var(--UI__FILTER__HEAD__TITLE__color, var(--color--none));
			--svgcolor :    var(--UI__FILTER__HEAD__TITLE__svgcolor, var(--svgcolor--none));
		}
	}
	> .filter__body{
		border-top-width: var(--UI__FILTER__BODY__borderTopWidth, 4px);
		border-top-color: var(--UI__FILTER__BODY__borderTopColor, var(--borderColor--none));
		border-top-style: var(--UI__FILTER__BODY__borderTopStyle, solid);
		padding:          var(--UI__FILTER__BODY__padding, 40px);
		> .filter__tools{
			display:none;
			> .filter__clear{
				
			}
		}
		.UI-choice{
			display:inline-flex;
			gap:     var(--UI__FILTER__BODY__CHOICE__gap, 40px);
			padding: var(--UI__FILTER__BODY__CHOICE__padding, 40px);
			margin:  var(--UI__FILTER__BODY__CHOICE__margin, 40px);
			
			--fontWeight:bold;
			border-width: var(--UI__FILTER__BODY__CHOICE__borderWidth, 5px);
			border-style: var(--UI__FILTER__BODY__CHOICE__borderStyle, solid);
			border-color: var(--UI__FILTER__BODY__CHOICE__borderColor, var(--svgcolor--none));
			border-radius:4px;
			.UI-choice__label{
				--color:        var(--UI__FILTER__BODY__CHOICE__LABEL__color,        var(--color--none));
				--padding:      var(--UI__FILTER__BODY__CHOICE__LABEL__padding,      40px);
				--fontSize:     var(--UI__FILTER__BODY__CHOICE__LABEL__fontSize,     40px);
				--icon__height: var(--UI__FILTER__BODY__CHOICE__LABEL__ICON__height, 100px);
				--icon__width:  var(--UI__FILTER__BODY__CHOICE__LABEL__ICON__width,  100px);
				--svgcolor:     var(--UI__FILTER__BODY__CHOICE__LABEL__svgcolor,     var(--svgcolor--none));
			}
			.UI-choice__input:checked + label{
				--color:        var(--UI__FILTER__BODY__CHOICE-ACTIVE__LABEL__color,    var(--color--none));
				--svgcolor:    var(--UI__FILTER__BODY__CHOICE-ACTIVE__LABEL__svgcolor, var(--svgcolor--none));
			}
			&:hover{
				border-style: var(--UI__FILTER__BODY__CHOICE-HOVER__borderStyle, solid);
				border-color: var(--UI__FILTER__BODY__CHOICE-HOVER__borderColor, var(--svgcolor--none));
				label{
					--color:       var(--UI__FILTER__BODY__CHOICE-HOVER__LABEL__color,    var(--color--none));
					--svgcolor:    var(--UI__FILTER__BODY__CHOICE-HOVER__LABEL__svgcolor, var(--svgcolor--none));
				}
				
			}
		}
	}
	&.has-choice{
		border-color: var(--UI__FILTER-ACTIVE__borderColor, var(--borderColor--none));
		> .filter__head{
			> .filter__title{
				--color:     var(--UI__FILTER-ACTIVE__HEAD__TITLE__color, var(--color--none));
				--svgcolor : var(--UI__FILTER-ACTIVE__HEAD__TITLE__svgcolor, var(--svgcolor--none));
			}
			> .filter__choice{
				font-style:italic;
				display: inline-flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-content: stretch;
				align-items: flex-end;
				gap:var(--UI__FILTER__HEAD__CHOICE__gap, 20px);
				--fontSize:    var(--UI__FILTER__HEAD__CHOICE__fontSize, 40px);
				--fontWeight:  var(--UI__FILTER__HEAD__CHOICE__fontWeight, bold);
				--color:       var(--UI__FILTER__HEAD__CHOICE__color, var(--color--none));
			}
		}
		> .filter__body{
			border-top-color: var(--UI__FILTER-ACTIVE__BODY__borderTopColor, var(--borderColor--none));
			> .filter__tools{
				display:flex;
				justify-content:flex-end;
				> .UI-button{
					--padding:          var(--UI__FILTER__BODY__TOOLS__BUTTON__padding);
					--background:       var(--UI__FILTER__BODY__TOOLS__BUTTON__background);
					--fontSize:         var(--UI__FILTER__BODY__TOOLS__BUTTON__fontSize);
					--fontWeight:       var(--UI__FILTER__BODY__TOOLS__BUTTON__fontWeight);
					--borderColor:      var(--UI__FILTER__BODY__TOOLS__BUTTON__borderColor);
					--borderWidth:      var(--UI__FILTER__BODY__TOOLS__BUTTON__borderWidth);
					--borderStyle:      var(--UI__FILTER__BODY__TOOLS__BUTTON__borderStyle);
					--borderRadius:     var(--UI__FILTER__BODY__TOOLS__BUTTON__borderRadius);
					--color:            var(--UI__FILTER__BODY__TOOLS__BUTTON__color);
					--icon__height:     var(--UI__FILTER__BODY__TOOLS__BUTTON__ICON__height);
					--icon__width:      var(--UI__FILTER__BODY__TOOLS__BUTTON__ICON__width);
					--svgcolor:         var(--UI__FILTER__BODY__TOOLS__BUTTON__svgcolor);
				}
				.UI-button:hover{
					--background: var(--UI__FILTER__BODY__TOOLS__BUTTON-HOVER__background);
					--color:      var(--UI__FILTER__BODY__TOOLS__BUTTON-HOVER__color);
					--svgcolor:   var(--UI__FILTER__BODY__TOOLS__BUTTON-HOVER__svgcolor);
				}
			}
		}
	}
}