/* Forms variables */
:root {
	--ax-readonly-background-color: rgb(233, 236, 239);
	--ax-text-color: rgb(73, 80, 87);
	--ax-border-color: rgb(206, 212, 218);
	--ax-focused-border-color: rgb(128, 189, 255);
	--ax-focused-shadow-color: rgba(0, 123, 255, 0.25);
	/**/
	--ax-popup-background-color: rgba(250, 250, 252, 0.8);
	--ax-popup-border-color: rgb(190, 190, 190);
	--ax-popup-header-background-color: rgba(244, 244, 246, 0.6);
	--ax-popup-body-background-color: rgba(250, 250, 252, 0.6);
	/**/
	--ax-state-unchanged: transparent;
	--ax-state-updated: rgba(246, 158, 53, 0.5);
	--ax-state-new: rgba(66, 255, 55, 0.5);
	--ax-state-deleted: rgba(255, 55, 66, 0.5);
	/* Required marker */
	--ax-required-invalid-background-color: rgb(255, 243, 205);
	--ax-required-invalid-color: rgb(133, 100, 4);
	--ax-required-valid-background-color: rgb(212, 237, 218);
	--ax-required-valid-color: rgb(21, 87, 36);
	/* Input */
	--ax-invalid-border-color: rgb(253, 212, 83);
	--ax-input-height: calc(1.5em + 0.75rem + 2px);
}

/* Set default */
#formContainer * {
	border-width: 1px;
}

/* Compute components before drawing */
.AxInitHidden {
	display: none;
}

.AxTextInherit {
	font: inherit;
	background-color: inherit;
	color: inherit;
}

/* AxPopup */
.AxPopup {
	margin: 0;
	padding: 0;
	background-color: var(--ax-popup-background-color);
	border-radius: .25rem;
	z-index: 5;
}

	.AxPopup .hdr {
		padding: 2px;
		width: 100%;
		background-color: var(--ax-popup-header-background-color);
	}

	.AxPopup .bdy {
		width: 100%;
		background-color: var(--ax-popup-body-background-color);
	}

.AxToast {
	border: solid 1px var(--ax-popup-border-color);
}

.AxPopupScreenCentered {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.AxPopupContainer {
	display: none;
	/* OVERLAY ??
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 1;
	*/
}

	.AxPopupContainer .AxPopup {
		position: center;
	}

.AxLoadPopup {
	position: fixed;
	top: 15%;
	left: 50%;
	transform: translate(-50%, 0);
	opacity: 0.65;
}

	.AxLoadPopup progress {
	}

	.AxLoadPopup progress[value] {
	}

.AxBusyPopup {
	position: fixed;
	top: 4%;
	left: 98%;
	transform: translate(-100%, 0);
	opacity: 0.70;
}
	.AxBusyPopup span {
		white-space: nowrap;
	}

/* Box */
.AxBox {
	padding: 0;
}

/* As one "input" */
.AxInputBox {
	padding: 0;
	width: 100%;
	display: flex !important;	/* d-flex */
}

.AxPanel {
	margin: 0;
	padding: 0;
}

/* Icon */
.AxInline {
	line-height: var(--ax-input-height);
}

/* Error provider */
.AxInlineAlert {
	position: relative;
	padding: 0.25rem 0.15rem;
	height: var(--ax-input-height);
	border: 1px solid transparent;
	border-radius: 0.25rem;
}

/* List */
.AxList {
	margin-top: 3px;
	padding: 4px 4px;
	line-height: 1.5rem;
	overflow: auto auto;
	border: 1px solid var(--ax-popup-border-color);
}

	.AxList .selected {
		background-color: var(--ax-focused-border-color);
	}

ul.AxList {
	list-style-type: none;
}

	ul.AxList li {
		white-space: pre;
		padding: 0 1px; /* Eviter élargissement lors du focus */
	}

		ul.AxList li:empty {
			height: 1.5rem;
		}

		ul.AxList li:focus {
			border-color: var(--ax-focused-border-color);
			outline: 0;
			outline: thin dotted \9;
			-moz-box-shadow: 0 0 0 0.2rem var(--ax-focused-shadow-color);
			box-shadow: 0 0 0 0.2rem var(--ax-focused-shadow-color) !important;
		}

		ul.AxList li:hover {
			padding: 0; /* Eviter élargissement lors du focus */
			border: 1px solid var(--ax-focused-border-color);
		}

/* Anchors */
a.AxLink {
	/* height: var(--ax-input-height); */
	padding: 0.375rem 0.75rem;
}

/* Images */
img.AxImg {
	border-width: 1px;
}

/* Commands */
.AxCmd {
	background-color: #fffdf9;
	border: 1px solid var(--ax-border-color);
	border-radius: 0.25rem;
}

	.AxCmd:focus {
		border-color: var(--ax-focused-border-color);
		outline: 0;
		outline: thin dotted \9;
		-moz-box-shadow: 0 0 0 0.2rem var(--ax-focused-shadow-color);
		box-shadow: 0 0 0 0.2rem var(--ax-focused-shadow-color) !important;
	}

	.AxCmd i {
		font-size: larger;
	}

.AxCmds_H, .AxCmds_V {
	display: flex;
	flex: 0 0 auto;
	align-items: start;
	font-size: 12px;
}

.AxCmds_H {
	flex-direction: row;
}

	.AxCmds_H .AxCmd {
		margin: 0 0.25rem;
		padding: 0.1rem 0.2rem;
	}

.AxCmds_V {
	flex-direction: column;
}

	.AxCmds_V .AxCmd {
		margin: 0.25rem 0;
		padding: 0.2rem 0.1rem;
		width: 2.25rem;
	}

/* Buttons */
.AxBtn {
	padding: 0.1rem 0.2rem;
	color: #007bff;
	background-color: #fffdf9;
	border-radius: 0.25rem;
}

	.AxBtn:focus {
		border-color: var(--ax-focused-border-color);
		outline: 0;
		outline: thin dotted \9;
		-moz-box-shadow: 0 0 0 0.2rem var(--ax-focused-shadow-color);
		box-shadow: 0 0 0 0.2rem var(--ax-focused-shadow-color) !important;
	}

	.AxBtn i {
		font-size: larger;
	}

/* Checkbox */
.AxCheckbox {
	display: inline-block;
	background: none;
	text-align: left;
	outline: 0 !important;
	border: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;
}

.AxCheckbox:focus {
	outline: 0 !important;
	border: none !important;
}

.AxCheckbox:hover {
}

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

	.AxCheckbox .cr {
		float: left;
		width: 1.7rem;
		height: 1.7rem;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: .5rem;
		border: 1px solid var(--ax-border-color);
		border-radius: .25rem;
	}

	.AxCheckbox:focus > .cr {
		border-color: var(--ax-focused-border-color);
		outline: 0;
		outline: thin dotted \9;
		-moz-box-shadow: 0 0 0 0.2rem var(--ax-focused-shadow-color);
		box-shadow: 0 0 0 0.2rem var(--ax-focused-shadow-color);
	}

		.AxCheckbox .cr .cr-icon {
		}

		.AxCheckbox input[type="checkbox"] + .cr > .cr-icon {
			opacity: 0;
		}

		.AxCheckbox input[type="checkbox"]:checked + .cr > .cr-icon {
			opacity: 1;
		}

		.AxCheckbox input[type="checkbox"]:disabled + .cr {
			background-color: var(--ax-readonly-background-color);
			opacity: 0.65;
		}

/* RadioButton */
.AxRadioButton {
	display: inline-block;
	background: none;
	text-align: left;
	outline: 0 !important;
	border: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;
}

.AxRadioButton:focus {
	outline: 0 !important;
	border: none !important;
}

.AxRadioButton:hover {
}

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

	.AxRadioButton .cr {
		float: left;
		width: 1.7rem;
		height: 1.7rem;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: .5rem;
		border: 1px solid var(--ax-border-color);
		border-radius: 1em;
	}

	.AxRadioButton:focus > .cr {
		border-color: var(--ax-focused-border-color);
		outline: 0;
		outline: thin dotted \9;
		-moz-box-shadow: 0 0 0 0.2rem var(--ax-focused-shadow-color);
		box-shadow: 0 0 0 0.2rem var(--ax-focused-shadow-color);
	}

	.AxRadioButton .cr .cr-icon {
	}

		.AxRadioButton input[type="radio"] + .cr > .cr-icon {
			opacity: 0;
		}

		.AxRadioButton input[type="radio"]:checked + .cr > .cr-icon {
			opacity: 1;
		}

		.AxRadioButton input[type="radio"]:disabled + .cr {
			background-color: var(--ax-readonly-background-color);
			opacity: 0.65;
		}

/* Combobox */
div.AxCombobox {
	display: flex;
	flex: 1 1 content;
	position: relative; /* Pour popup */
	margin: 0;
	padding: 0;
	background-color: transparent;
	border: none;
}

	.AxCombobox .text {
		width:100%;
		margin: 0;
		padding: 0.375rem 0.75rem;
		background: none;
		border: 1px solid var(--ax-border-color);
		border-radius: .25em;
		font: inherit;
		font-size: inherit;
		line-height: inherit;
		white-space: pre;
		text-overflow: ellipsis;
		overflow: hidden;
		transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
	}

		.AxCombobox input.text:focus {
			outline: 0;
			outline: thin dotted \9;
			box-shadow: none;
		}

	.AxCombobox.grid-control .text {
		padding: 2px 0.5rem;
	}

.AxComboPopup {
	position: fixed;
}

	.AxComboPopup .hdr {
		display: flex;
		align-items: center;
	}

		.AxComboPopup .hdr .fltr {
			flex: 1 1 auto;
			width: 100%;
			height: 1.75rem;
			margin: 0;
			font-weight: normal;
			white-space: pre;
			border: 1px solid var(--ax-border-color);
			transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
		}

		.AxComboPopup .hdr input.fltr:focus {
			border-color: var(--ax-focused-border-color);
			outline: 0;
			outline: thin dotted \9;
			/*
			-moz-box-shadow: 0 0 0 0.2rem var(--ax-focused-shadow-color);
			box-shadow: 0 0 0 0.2rem var(--ax-focused-shadow-color) !important;
			*/
		}

		.AxComboPopup .hdr .lbl {
			flex: 0 0 auto;
			margin: 0 0.5rem;
			line-height: 0;
		}

	.AxComboPopup .AxList {
		min-height: calc(1.5rem); /* 1 * line-height */
		max-height: calc(10 * 1.5rem); /* 10 * line-height */
	}

		.AxComboPopup .AxList .selected {
			background-color: var(--ax-focused-border-color);
		}

/* Required Marker */
.AxRequiredMarker {
	padding: 0.25rem 0.15rem;
	height: var(--ax-input-height);
	border: 1px solid transparent;
	border-radius: 0.25rem;
}

	.AxRequiredMarker i {
		font-size: xx-small;
	}

input:required:invalid + .AxRequiredMarker,
textarea:required:invalid + .AxRequiredMarker,
select:required:invalid + .AxRequiredMarker,
div .AxInputBox.invalid + .AxRequiredMarker {
	background-color: var(--ax-required-invalid-background-color);
	color: var(--ax-required-invalid-color);
}

input:required:valid + .AxRequiredMarker,
textarea:required:valid + .AxRequiredMarker,
select:required:valid + .AxRequiredMarker,
div .AxInputBox.valid + .AxRequiredMarker {
	background-color: var(--ax-required-valid-background-color);
	color: var(--ax-required-valid-color);
}

#formContainer input:optional:invalid, #formContainer textarea:optional:invalid, #formContainer select:optional:invalid {
	border-bottom: 2px dashed var(--ax-invalid-border-color);
}

/* DrawBox */
canvas.AxDrawBox {
	border-color: rgb(206, 212, 218);
	border-width: 1px;
	border-style: solid;
}

.AxScan {
	position: relative; /* Pour popup */
}

	.AxScan span {
		margin: 0px 0.1rem;
		padding: 0px 0.1rem;
		border: 2px none var(--ax-border-color);
		border-left-style: solid;
		border-right-style: solid;
		transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
	}

.AxScanPopup {
	position: fixed;
}

	.AxScanPopup input {
		/*width: 100%;*/
		height: 1.75rem;
		margin: 0;
		font-weight: normal;
		white-space: pre;
		border: 1px solid var(--ax-border-color);
		transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
	}

	.AxScanPopup input:focus {
		border-color: var(--ax-focused-border-color);
		outline: 0;
		outline: thin dotted \9;
	}

	.AxScanPopup input:valid {
		border: 3px solid var(--ax-required-valid-color);
	}

	.AxScanPopup input:invalid {
		border: 3px solid var(--ax-required-invalid-color);
	}

/* DataGrid */
.AxDataGrid {
}

/* GridView */
.AxGrid {
}

table.AxGrid {
	width: 100%;
}

.AxGrid th, .AxGrid td {
	padding: 0.50em 0.1em;
	vertical-align: middle;
}

	.AxGrid th.row-menu {
		max-width: 7rem;
	}
	.AxGrid td.row-menu {
		padding: 0;
		text-align: center;
	}

	.AxGrid td.row-menu button {
		margin: 2px;
	}

	.AxGrid tr[data-state=""], tr[data-state="0"] > .row-menu {
	}

	.AxGrid tr[data-state="1"] > .row-menu {
		background-color: var(--ax-state-updated);
	}

	.AxGrid tr[data-state="2"] > .row-menu {
		background-color: var(--ax-state-new);
	}

	.AxGrid tr[data-state="3"] > .row-menu {
		background-color: var(--ax-state-deleted);
	}

	.AxGrid .AxBtn {
		margin-left: 0.25rem;
		margin-right: 0.25rem;
		border: 1px solid var(--ax-border-color);
	}

.grid-control {
	margin: 0;
	padding: 1px 2px;
	max-width: 100%;
	/* height: var(--ax-input-height); */
	background: none;
	/* background-clip: padding-box; */
	border: none;
	font-size: inherit;
	font-weight: normal;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

	label.grid-control {
		display: inherit;
		justify-content: start;
		/*overflow-wrap: break-word;*/
	}

	select.grid-control {
		border: 1px solid var(--ax-border-color);
		/*min-width: 100%;
		width: auto;*/
	}

	input.grid-control, textarea.grid-control {
		border-bottom: 1px outset var(--ax-border-color);
	}

	input[type=text].grid-control, textarea.grid-control {
		width: 100%;
	}

	input[type=number].grid-control {
		width: 8em;
		-moz-appearance: textfield;
	}
	input[type="number"].grid-control::-webkit-outer-spin-button, input[type="number"].grid-control::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	input[type=date].grid-control::-webkit-calendar-picker-indicator {
		margin-left: -1rem;
	}
	input[type=time].grid-control::-webkit-calendar-picker-indicator {
		margin-left: 2rem;
	}

	input.grid-control:focus, textarea.grid-control:focus, select.grid-control:focus {
		border-color: var(--ax-focused-border-color);
		outline: 0;
		outline: thin dotted \9;
		-moz-box-shadow: 0 0 0 0.2rem var(--ax-focused-shadow-color);
		box-shadow: 0 0 0 0.2rem var(--ax-focused-shadow-color) !important;
	}

	input.grid-control:read-only, textarea.grid-control:read-only {
		border: none;
		opacity: 0.65;
	}

.AxGanttBox {
	width: 100%;
}

.AxSchedulerBox {
	width: 100%;
}

.AxCalendarBox {
	width: 100%;
}
.AxMonthlyCalendarBox {
	width: 100%;
}

/* Debug Bar */
#debugbar {
	width: 100%;
	background-color: antiquewhite;
	padding-bottom: .5rem;
}

	#debugbar h3 {
		margin-top: 0;
		margin-bottom: .5rem;
	}

	#debugbar .search-input {
		background-color: beige;
	}

	#debugbar .bootstrap-table {
		margin: 0.5rem 15px;
	}

.debugtable th, .debugtable td {
	border-color: dimgray;
}

.debugtable th {
	background-color: darkgray;
	border-bottom-width: 1px !important;
	border-bottom-color: dimgray !important;
}

/*
.debugtable td {
	white-space: pre
}
*/

.debugtable .header {
	font-weight: bold;
	background-color: lightgray;
}

.debugtable .varinfo {
	color: var(--purple);
}