/* ==================================================
	ELEMENTS HTML
==================================================	*/

* {
	margin: 0;				/* Par défaut, tout les élément n'ont plus de margin */
}

html {
	width:				100vw;													/* 100% de la largeur de l'espace d'affichage disponible */
	height:				100vh;													/* 100% de la hauteur de l'espace d'affichae disponible */
	min-width:			1080px;
	font-size:			var(--root-fontSize);								/* Taille de la police à la racine */
	font-family:		var(--generic-fontFamily);
	overflow:			hidden;
	background:			var(--genericBackground-default_color);
	color:				var(--genericFont-default_color);

	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

div, span, input {
	box-sizing:			border-box;
	background-color:	inherit;
}

a {
	display: flex;
	align-items: center;   /* Centre verticalement */
	justify-content: center; /* Centre horizontalement (optionnel) */	
}

/* ==================================================
	STRUCTURES DE LA PAGE
==================================================	*/
#zHeader {
	grid-area: 			header;
	display:				flex;
	flex-direction:	row;
	max-width:			100%;
}
#zMenuBar {
	grid-area:			menuBar;
	display:				flex;
	flex-direction:	row;
	max-width:			100%;
	margin:				0 var(--spacing_default) 0 0;
	padding:				var(--spacing_default) 0 0 var(--spacing_default);
}
#zMainBody {
	grid-area:			mainBody;
	display:				flex;
	flex-direction:	column;
	max-width:			100%;
	padding:				var(--spacing_default) 0 0 var(--spacing_default);
}
#zFooter {
	grid-area:			footer;
	display:				flex;
	flex-direction:	row;
}

/* ==================================================
	CONTENURS
==================================================	*/
div.zCollection {
	display:				flex;
	margin:				0 var(--spacing_default) var(--spacing_default) 0;
}

.zTitleStyle {
	font-family: var(--title-fontFamily);
	font-size: var(--generic-fontSize_xlarge);
	font-weight: bold;
}
.zSubtitleStyle {
	font-family: var(--title-fontFamily);
	font-size: var(--generic-fontSize_default);
	font-weight: bold;
	font-style: italic;
}
.zLabelStyle {
	font-family: var(--generic-fontFamily);
	font-size: var(--generic-fontSize_default);
	/*margin-left: var(--spacing_default);*/
}
.zCommentStyle {
	font-family: var(--generic-fontFamily);
	font-style: italic;
	font-size: var(--generic-fontSize_default)
}
.zInputLabelStyle {
	font-family: var(--generic-fontFamily);
	font-size: var(--generic-fontSize_small);
	font-style: italic;
	/*margin-left: var(--spacing_default);*/
}
.zNoteStyle {
	font-family: var(--generic-fontFamily);
	font-size: var(--generic-fontSize_small);
}

/* ============================================== */
.zTitleBlock {
	display: flex;
	flex-shrink: 0;
	overflow: hidden;
}
.zDataBlock {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--genericBlock-background_color);
	border: 1px solid var(--genericBorder-default_color);
	border-radius: var(--genericField-borderRadius_default);
	box-shadow: var(--genericShadow-offsetX) var(--genericShadow-offsetY) var(--genericShadow-blurRadius) var(--genericShadow-default_color);	padding: var(--spacing_default);
	margin:				0 var(--spacing_default) var(--spacing_default) 0;
	padding:				var(--spacing_default) 0 0 var(--spacing_default);
}
.zDataBlock.zDbRow {
	flex-direction: row;
}
.zDataBlock.zDbCol {
	flex-direction: column;
}

.zElementBlock {
	background-color: var(--genericBlock-background_color);
	border: 1px solid var(--genericBorder-default_color);
	border-radius: var(--genericField-borderRadius_default);
	box-shadow: var(--genericShadow-offsetX) var(--genericShadow-offsetY) var(--genericShadow-blurRadius) var(--genericShadow-default_color);	padding: var(--spacing_default);
	flex-shrink: 0;
	padding: var(--spacing_small);
}

.zExpandBlock {
	height: 100%;
	max-height: 100%;
}
.zRootTableContainer {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--spacing_default);

}
.zTableContainer {
	display: flex;
	flex-direction: column;
	width: 100%;
	flex-grow: 0;
	overflow: auto;
	/*height: calc(100% - 24px);*/
}
.zScrollingBlock {
	/*padding-right: 4px;*/
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	overflow-y: auto;
	scrollbar-gutter: auto;
}
.zGroupBlock {
	position: relative;
	border: 1px solid var(--genericBorder-default_color);
	border-radius: var(--genericField-borderRadius_default);
	padding: var(--spacing_large) 0 0 var(--spacing_default);
	margin-top: var(--spacing_default);
}
.zGroupBlockX {
	position: relative;
	/*
	border: 1px solid var(--genericBorder-default_color);
	border-radius: var(--genericField-borderRadius_default);
	*/
	padding: var(--spacing_large) var(--spacing_default);
	margin-top: calc(var(--spacing_default)+2px);
}
.zGroupBlock[data-label]::after {
	content: "\00a0"attr(data-label)"\00a0";
	position: absolute;
	top: -8px;
	left: 4px;
	font-size: var(--generic-fontSize_small);
	font-style: italic;
	/*background-color: inherit;*/
	background-color: var(--genericBlock-background_color);
	width: max-content;
	z-index: 10;
}
.zGroupBlockLabel {
	font-size: var(--generic-fontSize_small);
	font-style: italic;
	background-color: var(--genericBlock-background_color);
	width: max-content;
	transform: translateX(6px);
	z-index: 10;
}
.zOutlinedBlock {
	padding: var(--spacing_small);
	border: 1px solid var(--genericBorder-default_color);
	border-radius: var(--genericField-borderRadius_default);
}

/* == FORMATTING ================================ */
/* flex */
.zFlexRow {
	display: flex;
	flex-direction: row;
}
.zFlexCol {
	display: flex;
	flex-direction: column;
}
.zFWrap {
	flex-wrap: wrap;
}
.zFGrow {
	flex-grow: 1;
}
.zFShrink {
	flex-shrink: 1;
}
.relative {
	position: relative;
}
/* margin */
.zMgR {
	margin-right: var(--spacing_default);
}
.zMgRs {
	margin-right: var(--spacing_small);
}
.zMgRxs {
	margin-right: var(--spacing_xsmall);
}
.zMgRl {
	margin-right: var(--spacing_large);
}
.zMgRxl {
	margin-right: var(--spacing_xlarge);
}
.zMgL {
	margin-left: var(--spacing_default);
}
.zMgLs {
	margin-left: var(--spacing_small);
}
.zMgLxs {
	margin-left: var(--spacing_xsmall);
}
.zMgLl {
	margin-left: var(--spacing_large);
}
.zMgLxl {
	margin-left: var(--spacing_xlarge);
}
.zMgT {
	margin-top: var(--spacing_default);
}
.zMgB {
	margin-bottom: var(--spacing_default);
}
.zMgBs {
	margin-bottom: var(--spacing_small);
}
.zMgBxs {
	margin-bottom: var(--spacing_xsmall);
}
.zMgBl {
	margin-bottom: var(--spacing_large);
}
.zMgBxl {
	margin-bottom: var(--spacing_xlarge);
}

.zHCenter {
	justify-content: center;
}
.zVCenter{
	align-items: center;
}

/* Tooltip container */
[data-tooltip] {
	position: relative;
	cursor: default;
}
  
[data-tooltip]::after {
	font-family: var(-font-default-family);
	font-size: var(--generic-fontSize_small);
	font-style: italic;
	color: white;
	position: absolute;
	opacity: 0;
	pointer-events: none;
	content: attr(data-tooltip);
	white-space: pre;
	right: -5px;
	top: calc(100% + 10px);
	border-radius: 3px;
	box-shadow: 0 0 5px 2px var(--genericShadow-default_color);
	background-color: var(--genericTooltips_background-color);
	z-index: 10;
	padding: 0.2em 0.6em;
	width: auto;
	transform: translateY(-20px);
	transition: all 150ms cubic-bezier(.25, .8, .25, 1);
}
  
:not(.tooltipHidden)[data-tooltip]:hover::after {
	opacity: 1;
	transform: translateY(0);
	transition-duration: 500ms;
}

/* == MISCELLANOUS ============================== */
.unselectable {
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.strikethrough {
	text-decoration: line-through;
}

span.state {
	font-family: RobotoBold, sans-serif;
	font-size: var(--generic-fontSize_small);
}
span.state.on, span.state.open, span.state.connected {
	color: var(--genericStatus-on_color);
	cursor: default;
}
span.state.off, span.state.disconnected, span.state.closed {
	color: var(--genericStatus-off_color);
	cursor: pointer;
}
span.state.unknown, span.state.error {
	color: orange;
	cursor: default;
}

/* Menu */

span.menu {
	cursor: pointer;
	height:20px;
}

span.menu:hover {
	/*font-weight: bold;*/
	background-color:var(--genericInput-selected_color);
	color:var(--genericFont-selected_color);
}