/*=========================================
		CONTAINERS & BLOCKS
===========================================*/
.zContainer {
	position:		relative;
	display:			flex;
	flex-shrink:	0;
	background-clip: padding-box;
	border-radius: var(--genericField-borderRadius_default);
}

.zContainer.zObj {
	margin: 0 var(--spacing_default) var(--spacing_default) 0;
}
.zContainer.zGrp {
	padding: var(--spacing_large) 0 0 var(--spacing_default);
}
.zContainer.zLbl {
	margin-top: var(--spacing_large);
}
.zContainer.zPad {
	padding-top: var(--spacing_large);
}
.zContainer.zMnu {
	padding-bottom: var(--spacing_large);
}
.zContainer[data-label]::after {
	content: "\00a0"attr(data-label)"\00a0";
	position: absolute;
	top: calc(-0.9*var(--generic-fontSize_small));
	left: var(--spacing_xsmall);
	font-size: var(--generic-fontSize_small);
	font-weight: bold;
	font-style: italic;
	background-color: var(--genericBlock-background_color);
	width: max-content;
	z-index: 10;
}
.zContainer.outlined {
	border: 1px solid var(--genericBorder-default_color);
	border-radius: var(--genericField-borderRadius_default);
}
.zContainer.column {
	flex-direction: column;
}

.zObjectContainer {
	position: relative;
	display: flex;
	margin: 0 var(--spacing_default) var(--spacing_default) 0;
}
.zObjectContainer.zLabelUp {
	flex-direction: column;
}
.zObjectContainer:not(.zLabelUp) {
	flex-direction: row;
	align-items: center;
}
.zObjectGroup {
	position: relative;
	padding: var(--spacing_large) 0 0 var(--spacing_default);
	margin: var(--spacing_default) var(--spacing_default) var(--spacing_default) 0;
}
.zObjectGroup.outlined {
	border: 1px solid var(--genericBorder-default_color);
	border-radius: var(--genericField-borderRadius_default);
}
.zMenuGroup {
	position: relative;
	padding: var(--spacing_large) 0 var(--spacing_default) var(--spacing_default);
	margin: var(--spacing_default) var(--spacing_default) var(--spacing_default) 0;
	border: 1px solid var(--genericBorder-default_color);
	border-radius: var(--genericField-borderRadius_default);
}

.zMenuGroup[data-label]::after {
	content: "\00a0"attr(data-label)"\00a0";
	position: absolute;
	top: calc(-0.9*var(--generic-fontSize_small));
	left: var(--spacing_xsmall);
	font-size: var(--generic-fontSize_small);
	font-weight: bold;
	font-style: italic;
	background-color: var(--genericBlock-background_color);
	width: max-content;
	z-index: 10;
}

.zObjectGroup[data-label]::after {
	content: "\00a0"attr(data-label)"\00a0";
	position: absolute;
	top: calc(-0.9*var(--generic-fontSize_small));
	left: var(--spacing_xsmall);
	font-size: var(--generic-fontSize_small);
	font-weight: bold;
	font-style: italic;
	background-color: var(--genericBlock-background_color);
	width: max-content;
	z-index: 10;
}
.zObjectCollection {
	position: relative;
	padding: var(--spacing_large) 0 0 var(--spacing_default);
	margin: var(--spacing_default) var(--spacing_default) var(--spacing_default) 0;
}
.zBlank {
	display: flex;
}

.zUploadContainer {
	display: flex;
	border: 2px dashed var(--genericBorder-default_color);
	border-radius: var(--genericField-borderRadius_large);
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
}
.zUploadContainer.dragover {
	border-color: #4caf50;
   color: #4caf50;
}

span.zLabel {
	font-family: var(--generic-fontFamily);
	font-size: var(--generic-fontSize_default);
	font-style: italic;
}
span.zLabel.left {
	padding-right: var(--spacing_default);
}
span.zLabel.right {
	padding-left: var(--spacing_small);
	
}
span.zLabel.up::after {
	content: "\00a0";
}
span.zLabel.down::after {
	content: "\00a0";
}

/*=========================================
		MENU
===========================================*/
div.zMenuContainer {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	height: var(--genericField-height);
	font-family: var(--menu-fontFamily);
	font-size: var(--menu-fontSize);
	background: var(--menu-backgroundColor);
	border-radius: var(--menu-borderRadius);
	cursor: default;
}
div.zPrimaryOption {
	display: flex;
	align-items: center;
	height: var(--genericField-height);
	padding: 0 var(--spacing_default) 0;
	border-radius: var(--menu-borderRadius);
}
div.zPrimaryOption:hover, div.zPrimaryOption.active {
	background-color: var(--menuRootSelected-backgroundColor);
}
div.zSubMenuContainer {
	display: none;
	position: absolute;
	padding: var(--spacing_small) 0;
	width: 300px;
	z-index: 80;
	/*background: var(--genericBackground-default_color);*/
	box-shadow: var(--genericShadow-offsetX) var(--genericShadow-offsetY) var(--genericShadow-blurRadius) var(--genericShadow-default_color);
	border: 1px solid var(--menu-borderColor);
	border-radius: var(--menu-borderRadius);
}
div.zSubMenuContainer.visible {
	display: flex;
	flex-direction: column;
}

div.zMenuOption {
	display: flex;
	flex-direction: row;
	height: calc(0.8*var(--genericField-height));
	align-items: center;
	margin: 0 var(--spacing_small) 0;
	padding-right: var(--spacing_small);
	border-radius: var(--menu-borderRadius);
}
div.zMenuOption:not(.disabled).active, div.zMenuOption:not(.disabled):hover {
	background-color: var(--menuSelected-backgroundColor);
	color: white;
}
div.zMenuOption.disabled {
	color: var(--menuDisabled-fontColor);
}

div.zOptIcon {
	display: flex;
	width: calc(0.8*var(--genericField-height));
}
div.zOptLabel {
	display: flex;
	flex-grow: 1;
}
div.zOptShortcut {
	display: flex;
	font-size: var(--generic-fontSize_small);
	color: var(--menuShortcut-fontColor);
}
div.zSeparator {
	display: flex;
	width: 100%;
	margin: var(--spacing_small) 0;
	border-bottom: 1px solid grey;
}

/*=========================================
		MENU (box)
===========================================*/
span.zMenuBOption {
	display: flex;
	flex-grow: 1;
	height: calc(0.8*var(--genericField-height));
	border-radius: var(--menu-borderRadius);
	align-items: center;
	padding-left: var(--spacing_small);
	margin-right: var(--spacing_default);
	cursor: pointer;
}

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

/*=========================================
		BUTTON
===========================================*/
button.zButton {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	border: 1px solid var(--genericBorder-default_color);
	padding: 0 var(--spacing_default);
	border-radius: var(--genericButton-borderRadius);
	box-shadow: var(--buttonShadow-offsetX) var(--buttonShadow-offsetY) var(--buttonShadow-blurRadius) var(--genericShadow-default_color);
	font-family: var(--genericButton-fontFamily);
	font-size: var(--genericButton-fontSize);
}

button:hover {
	filter: brightness(90%) saturate(90%);
	cursor: pointer;
	-webkit-transition: filter .275ms ease-in-out;
	-ms-transition: filter .275ms ease-in-out;
	transition: filter .3s ease-in-out;
}
button:active {
	transform: translate(1px, 1px);
	box-shadow: none;
}

button.zButtonImageStd {
	font-family: var(--genericButton-fontFamily);
	font-size: var(--genericButton-fontSize);
	background-color: var(--genericButton-background_color);
	color: var(--genericButton-font_color);
	height: var(--genericField-height);
	padding: 0 var(--spacing_small);
}
button.zButtonMenuStd {
	font-family: var(--menuButton-fontFamily);
	font-size: var(--menuButton-fontSize);
	background-color: var(--menuButton_background_color);
	color: var(--menuButton-font_color);
	height: var(--menuButton-height);
}

button.zMore {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-family: var(--generic-fontFamily);
	font-size: var(--generic-fontSize_default);
	height: var(--genericField-height);
	border: 1px solid var(--genericInput-border_color);
	border-radius: var(--genericInput-borderRadius);
	background-color: var(--genericInput-background_color);
	color: var(--genericInput-font_color);
}

.h2 {
	height: calc(2*var(--genericField-height) + var(--spacing_default));
}
.h3 {
	height: calc(3*var(--genericField-height) + 2*var(--spacing_default));
}

/*=========================================
		IMAGE
===========================================*/
img.zIconzButtonImageLeft {
	 height: 1.4rem;
	 margin-right: var(--spacing_small);
}
img.zIconzButtonImageRight {
	 height: 1.4rem;
	 margin-left: var(--spacing_small);
}
img.zIconzButtonImage {
	 height: 1.4rem;
}

img.zButtonImage {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: calc(var(--genericButton-height) - 6px);
	background-color: var(--genericButton-background_color);
	border: 1px solid var(--genericBorder-default_color);
	padding: 2px;
	border-radius: var(--genericButton-borderRadius);
	box-shadow: var(--buttonShadow-offsetX) var(--buttonShadow-offsetY) var(--buttonShadow-blurRadius) var(--genericShadow-default_color);
}
img.zButtonImage:hover {
	filter: brightness(90%) saturate(90%);
	cursor: pointer;
}
img.zButtonImage:active {
	transform: translate(1px, 1px);
	box-shadow: none;
}

img.zTableIcon {
	height: calc(var(--tableRow-height)*0.9);
}

img.zTableBtnIcon {
	height: calc(var(--tableRow-height)*0.8);
}
img.zTableBtnIcon:hover {
	filter: brightness(140%) saturate(90%);
	cursor: pointer;
}


/*=========================================
		INPUT
===========================================*/
input {
	font-family: var(--generic-fontFamily);
	font-size: var(--generic-fontSize_default);
	height: var(--genericField-height);
	border: 1px solid var(--genericInput-border_color);
	border-radius: var(--genericInput-borderRadius);
	background-color: var(--genericInput-background_color);
	color: var(--genericInput-font_color);
}
input:read-only {
	font-style: italic;
	color: var(--genericFont-readonly_color);
}

input[type="text"] {
	padding-left: 4px;
}
input[type="date"] {
	text-align: center;
}
input[type=date]::-webkit-calendar-picker-indicator {
	background-image: url('../media/calender-16.png');
}
input:focus {
	border-color: var(--genericBorder-focused_color);
}
input[type='file'] {
	padding-left: 2px;
}
input::file-selector-button {
	margin-top: 1.5px;
	height: calc(var(--genericField-height)*.75);
	font-family: var(--generic-fontFamily);
	font-size: var(--generic-fontSize_small);
	color: var(--genericFont-alternate_color);
	border: 1px solid var(--genericInput-border_color);
	background-color: var(--genericInput-background_color);
	border-radius: 3px;
}


/*=========================================
		TEXTAREA
===========================================*/
textarea {
	font-family: var(--generic-fontFamily);
	font-size: var(--generic-fontSize_default);
	border: 1px solid var(--genericInput-border_color);
	border-radius: var(--genericInput-borderRadius);
	background-color: var(--genericInput-background_color);
	color: var(--genericInput-font_color);
}
textarea:focus {
	border-color: var(--genericBorder-focused_color);
}

/*=========================================
		SELECT
===========================================*/
select {
	font-family: var(--generic-fontFamily);
	font-size: var(--generic-fontSize_default);
	height: var(--genericField-height);
	border: 1px solid var(--genericBorder-default_color);
	border-radius: var(--genericInput-borderRadius);
	background-color: var(--genericInput-background_color);
	color: var(--genericInput-font_color);
	/*
	flex: 1;
	min-width: 0;
	width: auto;
	*/
	box-sizing: border-box;
}
/*
select option.placeholder {
	font-style: italic;
	color: var(--genericFont-alternate_color);
}
	*/
select option.realOption {
	font-style: normal;
	color: var(--genericFont-default_color);
}
select.placeholder-active {
	font-style: italic;
	color: var(--genericFont-alternate_color);
}

/*=========================================
		TABLE
===========================================*/
table {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: max-content;
}

table, td, th {
	border: none;
	border-collapse: collapse;
	box-sizing: border-box;
}
th,td {
	display: flex;
	align-items: center;
}
th {
	min-height: var(--tableHeader-height);
	justify-content: center;
}
td {
	min-height: var(--tableRow-height);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

thead, tbody, tr {
	display: flex;
	width: 100%;
}

tbody {
	flex-direction: column;
	max-width: 100%;
}

thead {
	position: sticky; /* Garde les en-têtes fixes */
	top: 0; /* Place les en-têtes en haut */
	font-family: var(--tableHeader-fontFamily);
	background-color: var(--tableHeader-background_color);
	color: var(--tableHeader-font_color);
	z-index: 1; /* S'assure que l'en-tête est au-dessus des cellules */
}

table.zCompact  tbody {
	font-size: var(--generic-fontSize_small);
}

/* ----------------------------------- */
th.tsort {
	cursor: pointer;
}

tr.alternateColor:nth-child(odd) {
	background-color: var(--tableLine-odd_color);
}
tr.alternateColor:nth-child(even) {
	background-color: var(--tableLine-even_color);
}

tr.lignePaire {
	background-color: var(--tableLine-even_color);
}
tr.ligneImpaire {
	background-color:var(--tableLine-odd_color);
}
tr.selectable:hover {
	background-color:var(--tableSelection-background_color);
	color: var(--genericFont-selected_color);
}

td.tdCenter {
	justify-content: center;
}
td.tdRight {
	justify-content: right;
}
td.tdGrow {
	flex-grow: 1;
}

span.sort {
	font-size: 12px;
}
span.sort:not(.up)::after, span.sort:not(.down)::after {
	color: var(--font-tableHeader-color);
	content: "\0025BF";
}
span.sort.down::after {
	color: var(--genericFont-highlight_color);
	content: "\0025BC";
}
span.sort.up::after {
	color: var(--genericFont-highlight_color);
	content: "\0025B2";
	cursor: pointer;
}
span.sortingRank {
	width: 10px;
	font-weight: normal;
	font-size: 8px;
}

.zPagingContainer {
	display: flex;
	flex-direction: row;
	margin-bottom: var(--spacing_default);
}
.zPagingCmd {
	display: flex;
	flex-direction: row;
	justify-content: center;
	/*align-items: center;*/
	height: var(--pagingCmd-height);
	width: var(--pagingCmd-width);
	background-color: var(--background-field-color);
	color: var(--font-field-color);
	border: 1px solid var(--genericInput-border_color);
	border-radius: var(--genericInput-borderRadius);
	margin-right: var(--spacing_small);
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.zPagingCmd:hover {
	filter: brightness(90%) saturate(90%);
	cursor: pointer;
}
.zPagingInput  {
	display: flex;
	flex-direction: row;
	text-align: center;
	height: var(--pagingCmd-height);
	width: var(--pagingInput-width);
	margin-right: var(--spacing_small);
}

/*=========================================
		DIALOG
===========================================*/
dialog {
	/*display: flex;
	flex-direction: column;*/
	min-width: fit-content;
	margin: 0;
	padding: 0;
	border: 2px solid var(--genericBorder-default_color);
	border-radius: 6px;
	background-clip: padding-box;
}
dialog.info {
	box-shadow: 0 0 10px 1px cyan;
}
dialog.query {
	box-shadow: 0 0 10px 1px greenyellow;
}
dialog.alert {
	box-shadow: 0 0 10px 1px red;
}
dialog:modal {
	overflow: unset;
}
dialog::backdrop {
	background-color: Black;
	filter: opacity(50%)
}

div.zDialTitleBar {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	height: var(--dialogTitlebar-height);
	padding-left: var(--spacing_default);
	background-color: var(--dialogHeader-background_color);
}
img.zDialIcon {
	height: calc(0.8*var(--dialogTitlebar-height));
	margin-right: var(--spacing_default);
}

span.zDialTitle {
	flex-grow: 1;
	color: var(--dialogHeader-font_color);
	font-family: Roboto, Arial, sans-serif;
	font-size: var(--generic-fontSize_large);
	margin-right: var(--spacing_default);
}
.draggable {
	cursor: move;
}

img.zDialSign {
	height: calc(1.6* var(--genericField-height));
}

img.zDialSysClose {
	height: calc(var(--dialogTitlebar-height) - 2px);
	margin-right: 1px;
}
img.zDialSysClose:hover {
	filter: brightness(115%) saturate(110%);
	cursor: pointer;
}

div.zDialPrimeContainer {
	display: flex;
	flex-flow: row;
	height: min-content;
	padding: var(--spacing_default) 0 0 var(--spacing_default);
	background-color: var(--genericBlock-background_color);
	color: var(--genericFont-default_color);
	overflow: auto;
}

/* == MISCELLANOUS =================================== */
.z_color-inblock {
	background-color: var(--background-field-color);
	color: var(--font-field-color);
}

input.currencyInput {
	text-align: right;
	padding-right: var(--spacing_small);
}

/* == SPEC =========================================== */
/* Checkbox avec slider */
:root {
	--switch-scale: 0.4;
	--switch-shadow: 2px;
}

.switch {
	position: relative;
	display: inline-block;
	width: calc(60px*var(--switch-scale));
	height: calc(34px*var(--switch-scale));
	/*margin: 9px;*/
}

.switch input { 
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s cubic-bezier(0,1,0.5,1);
	border-radius: 4px;
}

.slider:before {
	position: absolute;
	content: "";
	height: calc(26px*var(--switch-scale));
	width: calc(26px*var(--switch-scale));
	left: calc(4px*var(--switch-scale));
	bottom: calc(4px*var(--switch-scale));
	background-color: white;
	-webkit-transition: .2s;
	transition: .2s cubic-bezier(0,1,0.5,1);
	border-radius: 3px;
}

input:checked + .slider {
	background-color: #52c944;
}

input:focus + .slider {
	box-shadow: 0 0 var(--switch-shadow) #7efa70;
}

input:checked + .slider:before {
	-webkit-transform: translateX(calc(26px*var(--switch-scale)));
	-ms-transform: translateX(calc(26px*var(--switch-scale)));
	transform: translateX(calc(26px*var(--switch-scale)));
}

/* Rounded sliders */
.slider.round {
	border-radius: calc(34px*var(--switch-scale));
}

.slider.round:before {
	border-radius: 50%;
}

input:checked + .slider.red {
	background-color: crimson;
}

input:focus + .slider.red {
	box-shadow: 0 0 var(--switch-shadow) crimson;
}

input:checked + .slider.red {
	background-color: crimson;
}

#round {
	border-radius: calc(34px*var(--switch-scale));
}

#round:before {
	border-radius: 50%;
}

input:checked + .slider.red {
	background-color: crimson;
}

input:focus + .slider.blue {
	box-shadow: 0 0 var(--switch-shadow) #424bf5;
}

input:checked + .slider.blue {
	background-color: #424bf5;
}

/*=====================================*/

.input[type="checkbox"] {
	display: none;
}

/* Style for the custom checkbox */
.custom-checkbox {
	display: inline-block;
	width: var(--genericField-height);
	height: var(--genericField-height);
	/*border: 1px solid #333;*/
	border: 1px solid var(--genericInput-border_color);
	border-radius: 4px;
	position: relative;
	cursor: pointer;
}

/* Style for the custom checkmark */
.custom-checkbox::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(var(--genericField-height)*0.6);
	height: calc(var(--genericField-height)*0.6);
	background-color: var(--genericFont-default_color);
	border-radius: 2px;
	opacity: 0;
}

	/* Show the checkmark when checkbox is checked */
.input[type="checkbox"]:checked + .custom-checkbox::after {
	opacity: 1;
}

div.zDropList {
	position: absolute;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--genericInput-border_color);
	/*border-radius: var(--genericInput-borderRadius);*/
	border-radius: 8px;
	background-color: var(--genericInput-background_color);
	z-index: 101;
}
div.zDropList.hidden {
	display: none;
}
div.zDropList:not(.hidden) {
	display: flex;
}

div.zDropListOption {
	display: flex;
	align-items: center;
	height: var(--genericField-height);
	width: 100%;
	padding-left: var(--spacing_small);
	vertical-align: middle;
	cursor: default;
}

div.zDropListOption.selected {
	background-color:var(--genericInput-selected_color);
	color: var(--genericFont-selected_color);
}

div.zFieldContainer {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-right: var(--spacing_default);
	margin-bottom: var(--spacing_small);
}

textarea.frozen {
	resize: none;
	overflow: auto;
}


