/*=============================================
=            Variables            =
=============================================*/

:root {

	/*----------  Couleurs  ----------*/
	--color-main: 0,0,0;
	--color-main-max: rgba(var(--color-main), 1);
	--color-main-high: rgba(var(--color-main),var(--opacity-text-high));
	--color-main-medium: rgba(var(--color-main),var(--opacity-text-medium));
	--color-main-disabled: rgba(var(--color-main),var(--opacity-text-disabled));

	--color-primary-50: #fafcfc;
	--color-primary-100: #f2f6f7;
	--color-primary-200: #d9f2fa;
	--color-primary-300: #a9cdd9;
	--color-primary-500: #4daac8;
	--color-primary-700: #2a9bbd;
	--color-primary-800: #2487ac;
	--color-primary-900: #1a6790;

	--color-secondary-50: #fcfcfa;
	--color-secondary-100: #f7f6f2;
	--color-secondary-200: #f9da92;
	--color-secondary-300: #f6ca67;
	--color-secondary-500: #e4ae3a;
	--color-secondary-700: #d3a51e;
	--color-secondary-800: #c19c1a;

	--color-alert-success: #5eba45;
	--color-alert-warning: #ff8a00;
	--color-alert-warning2: #ff5900;
	--color-alert-danger: #b00020;
	--color-alert-info: var(--color-main-medium);
	--color-alert-question: Steelblue;

	--color-printingtechnique-silkscreen: Tomato;
	--color-printingtechnique-digital: CornflowerBlue;
	--color-printingtechnique-silkscreenTransfer: MediumSeaGreen;
	--color-printingtechnique-embroidery: SandyBrown;
	--color-printingtechnique-engraving: SaddleBrown;
	--color-printingtechnique-sublimation: HotPink;
	--color-printingtechnique-transflex: LightSlateGray;

	--color-loader-content: white;

	/*----------  Opacités  ----------*/
	--opacity-text-high: .87;
	--opacity-text-medium: .70;
	--opacity-text-disabled: .38;
	
	/*----------  Polices  ----------*/
	--font-main: 'Heebo', sans-serif;
	--font-icons: "Font Awesome 5 Free";

	/*----------  Tailles  ----------*/
	--size-gap-main: 15px;
	--size-gap-main-double: calc(var(--size-gap-main) * 2);
	--size-container: 1200px;

	--size-header-height: 60px;
	--size-footer-height: 30px;
}

/*=============================================
=            Reset            =
=============================================*/
*, 
::after, 
::before {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
}

ul,
li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}




/*=============================================
=            TEMP            =
=============================================*/


#grille {
	display: none;
}
#debug-responsive {
	display: none;
}


#frontContainer {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lockIcon {
	margin-left: 0.5em;

}
.lockIcon.hidden {
	display: none;
}

input[disabled] {
	background: #aaa;
}



/*=============================================
=            Général            =
=============================================*/
html,
body {
	height: 100%;
	font-size: 15px;
	color: var(--color-main-medium);
}
#page {
	height: 100vh;
	overflow: hidden;

	display: grid;
	grid-template-rows: var(--size-header-height) auto var(--size-footer-height);
	
}

html, 
input, 
textarea, 
button {
	font-family: var(--font-main);
}

h1 {
	margin: 0 0 0;
	font-size: 1.5em;
	font-weight: 300;
	color: var(--color-primary-700);
}

h2 {
	font-size: 1.3em;
	font-weight: 700;
	color: var(--color-main-medium);
}

/*----------  Liens  ----------*/
a {
	color:inherit;
	text-decoration:none;
}
a:hover {
	text-decoration: underline;
}



.onlyPrint {
	display: none;
}


.alert-warning {
	display: inline-block;
	color: var(--color-alert-warning);
	/* transform: scale(1); */
	/* opacity: 1; */
	/* transition: all .25s ease-in-out; */
}
.alert-warning.user-supplier {
	color: var(--color-alert-warning2);
}
.user-admin .alert-warning,
.user-supplier .alert-warning {
	cursor: pointer;
}

.alert-warning.hidden {
	/* transform: scale(0); */
	/* opacity: 0; */
	display: none;
}

.mainWarning {
	display: block;
	color: var(--color-alert-warning);
	background: #ffedd8;
	padding: 1em;
	border-radius: 5px;
	margin-bottom: 1em;
}
.mainWarning.hidden {
	display: none;
}


/*=============================================
=            Boutons            =
=============================================*/

/*----------  Icônes boutons  ----------*/
.iconBtn i,
#tablePager i,
table.table td:last-of-type i {
	border-radius: 50%;
	line-height: 2em;
	width: 2em;
	height: 2em;
	text-align: center;
	cursor: pointer;
}
.iconBtn i,
.iconBtn i a,
#tablePager i,
table.table td:last-of-type i {
	color: rgba(0,0,0,var(--opacity-text-medium));
}
.iconBtn i:hover,
#tablePager i:hover,
table.table td:last-of-type i:hover  {
	background: rgba(0,0,0,.12);

	-webkit-transition: all .15s ease-in-out;
	-moz-transition: all .15s ease-in-out;
	-ms-transition: all .15s ease-in-out;
	-o-transition: all .15s ease-in-out;
	transition: all .15s ease-in-out;
}
.iconBtn i:active,
#tablePager i:active,
table.table td:last-of-type i:active {
	background: rgba(0,0,0,.2);
	transform: scale(.96);
}


.iconBtn-outline i {
	border : 1px solid rgba(0,0,0,.12);
}
.iconBtn-outline i:hover {
	border-color: rgba(0,0,0,0);
}

.iconBtn.disabled {
	opacity: var(--opacity-text-disabled);
}
.iconBtn.disabled i:hover {
	background: none;
	cursor: auto;
}
.iconBtn.iconBtn-noClick i:hover {
	background: none;
}


/*----------  Boutons normaux  ----------*/
.btn {
	display: inline-block;
	background: mediumaquamarine;
	padding: .5em 1em;
	border-radius: 2px;
	text-transform: uppercase;
	font-weight: 700;
	font-size: .9em;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	font-family: var(--font-main);
	border: 1px solid transparent;

	-webkit-transition: all .05s ease-in-out;
	-moz-transition: all .05s ease-in-out;
	-ms-transition: all .05s ease-in-out;
	-o-transition: all .05s ease-in-out;
	transition: all .05s ease-in-out;
	
}
.btn:hover {
	-webkit-box-shadow: 0 2px 10px 0 rgba(0,0,0,.15);
	box-shadow: 0 2px 10px 0 rgba(0,0,0,.15);
	text-decoration: none;
}
.btn:active {
	-moz-transform: translateY(1px);
	-webkit-transform: translateY(1px);
	-o-transform: translateY(1px);
	-ms-transform: translateY(1px);
	transform: translateY(1px);
	border-radius: 5px;
}
.btn.disabled:active {
	-moz-transform: none;
	-webkit-transform: none;
	-o-transform: none;
	-ms-transform: none;
	transform: none;
}

.btnMini {
	font-size: .7em;
}

.btn i {
	margin-left: .3em;
}
.btn.disabled:hover {
	background: none;
	cursor: auto;
}

.btnText {
	background: none;
	color: var(--color-primary-700);
	border: none;
}
.btnText:hover {
	background: var(--color-primary-100);
	box-shadow: none;
	-webkit-box-shadow: none;
}
.btnText:active {
	background: var(--color-primary-200);
}
.btnText.disabled {
	color: rgba(0,0,0,var(--opacity-text-disabled));
}

.btnPrimary {
	background: var(--color-primary-500);
	color: white;
}
.btnPrimary:hover {
	background: var(--color-primary-700);
	color: white;
}
.btnPrimary:active {
	background: var(--color-primary-800);
}



.btnPrimaryOutline {
	border: 1px solid var(--color-primary-700);

	color: var(--color-primary-700);
	background: none;
}
.btnPrimaryOutline:hover {
	background: var(--color-primary-100);
	color: var(--color-primary-700);
	-webkit-box-shadow: 0 2px 10px 0 rgba(0,0,0,.05);
	box-shadow: 0 2px 10px 0 rgba(0,0,0,.05);
}
.btnPrimaryOutline:active {
	background: var(--color-primary-200);
}



.btnSecondary {
	background: var(--color-secondary-500);
	color: white;
}
.btnSecondary:hover {
	background: var(--color-secondary-700);
	color: white;
}

.btnPopup {
	background: var(--color-main-medium);
	color: white;
}
.btnPopup:hover {
	background: var(--color-main-high);
}
.btnPopupOutline {
	background: transparent;
	color: var(--color-main-medium);
	border: 1px solid var(--color-main-disabled);
}
.btnPopupOutline:hover {
	color: var(--color-main-high);
	border: 1px solid var(--color-main-medium);
}

.btnPrev {
	/* padding: .8em 0; */
}
.btnPrev::before {
	content: '\f053';
	display: inline-block;
	margin-right: 1em;
	font-family: var(--font-icons);
	font-weight: 900;
}
.btnNext::after {
	content: '\f054';
	display: inline-block;
	margin-left: 1em;
	font-family: var(--font-icons);
	font-weight: 900;
}

.actions .btn {
	margin-right: 1em;
}
.actions .btn:last-of-type {
	margin-right: 0;
}


/*=============================================
=            Tables            =
=============================================*/

/*----------  Général  ----------*/

table.table {
	border-collapse: collapse;
	width: 100%;
	text-align: left;
	color: rgba(0,0,0,var(--opacity-text-high));
	position: relative;
}
table.table tr {
	transition: all .05s ease-in-out;
	position: relative;
}

table.table .center {
	text-align: center;
}
table.table .number {
	text-align: right;
}

/*----------  cellules  ----------*/

table.table th {
	font-weight: 600;
	text-align: center;
	color: var(--color-main-medium);
}

table.table th a {
	color: rgba(0,0,0,var(--opacity-text-high));
	text-decoration: none;
}

table.table tbody td,
table.table tfoot td {
	padding: .5em;
}

/*----------  thead  ----------*/

table.table thead th {
	/* position:sticky; */
	/* top: calc(var(--size-header-height) + var(--size-nav-height) - 1px); */
	z-index: 4;
	background: white;
	padding: 0;
	border-top: 1px solid rgba(0,0,0,.17);
	vertical-align: center;
	position: relative;
}
/* hack bordure du dessous */
table.table thead th::after {
	content: "";
	display: block;
	background: rgba(0,0,0,.17);
	width: 100%;
	height: 1px;
	position: absolute;
	bottom: 0;

	/* display: none; */
}
table.table thead th > div {
	padding: .4em .5em ;
}

/*----------  tbody  ----------*/

table.table tbody th {
	text-align: left;
	padding: 0 .5em;
}
table.table tbody tr {
	border-top: 1px solid rgba(0,0,0,.07);
	border-bottom: 1px solid rgba(0,0,0,.07);
}
table.table tbody tr:first-of-type {
	border-top: none;
}
table.table tbody tr:hover {
	background: rgba(0,0,0,.1);
}
table.table tbody tr.selected,
table.table tbody tr.selected:hover	 {
	background: var(--color-secondary-200);
}


table.table tbody td {
	border-left: 1px solid rgba(0,0,0,.14); /* Nico, tu as vraiment un bon écran (ou très mauvais), mais chez moi 4% de noir, c'est invisible */
	border-right: 1px solid rgba(0,0,0,.14); /* Nico, tu as vraiment un bon écran (ou très mauvais), mais chez moi 4% de noir, c'est invisible */
}

table.table tr.noResults td {
	text-align: center;
	color: rgba(0,0,0,var(--opacity-text-medium));
}
table.table tr.noResults:hover,
table.table tr.noHover:hover {
	background: none;
}

/*----------  tfoot  ----------*/

table.table tfoot tr:first-of-type td,
table.table tfoot tr:first-of-type th {
	border-top: 1px solid rgba(0,0,0,.17);
}

table.table tfoot tr:last-of-type td,
table.table tfoot tr:last-of-type th {
	border-bottom: 1px solid rgba(0,0,0,.17);
}

table.table tfoot td,
table.table tfoot th {
	border-top: 1px solid rgba(0,0,0,.07);
	border-bottom: 1px solid rgba(0,0,0,.07);
}
table.table tfoot th {
	text-align: left;
}

table.table tfoot td.disabled {
	border-top: none;
	border-bottom: none !important;
	/* background: rgba(0,0,0,.02) */
}


/*----------  Pas de résultats  ----------*/
.tableNoData {
	text-align: center;
	/* font-size: 2em; */
	color: rgb(0,0,0,.3);
	margin-top: 1em;
}
.tableNoDataCreate {
	text-align: center;
	font-size: 1.5em;
	padding-bottom: 1em;
}
.tableNoDataCreate img {
	max-width: 200px;
	margin-bottom: 0.5em;
	opacity: .5;
}



/*----------  Actions  ----------*/
table.table td.actions ul li {
	display: inline-block;
}
table.table td.actions ul li i {
	font-size: 1.3em;
}


/*----------  Liens sur lignes  ----------*/
table.table tr[data-href] {
	cursor: pointer;
}



table.table input {
	margin-bottom: 0;
}


/*=============================================
=            Formulaires            =
=============================================*/

fieldset {
	border: none;
	padding: 0;
}
.field-group {
	display: flex;
	gap: var(--size-gap-main);
}
.field-group > * {
	flex: 1;
}


label {
	font-size: .75em;
	display: block;
	font-weight: 300;
	margin-bottom: 0.5em;
	text-transform: uppercase;
	text-align: left;
}
input[type=text],
input[type=password],
input[type=email],
input[type=number],
select,
textarea {
	border: none;
	border-bottom: 1px solid rgba(var(--color-main), .18);
	width: 100%;
	background: transparent;
	margin-bottom: 1em;
	transition: .2s ease-in-out all;
	outline: none;
	position: relative;
}

/* input */
input[type=text]:hover,
input[type=password]:hover,
input[type=email]:hover,
input[type=number]:hover {
	border-bottom-color: var(--color-main-medium);
}
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus {
	border-bottom-color: var(--color-primary-500) !important;
}

input[disabled],
input[disabled]:hover,
select[disabled],
select[disabled]:hover,
textarea[disabled],
textarea[disabled]:hover {
	border-bottom: none !important;
}

input:invalid,
select:invalid {
	/* border-bottom-color: red; */
}


input:read-only {
	border-bottom: none;
}


/*=============================================
=            Popup            =
=============================================*/
.popup {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 100vh;
	background: rgba(255,255,255,.9);
	z-index: 80;
	display: none;
}
.popup.visible {
	display: block;
}
.popup.visible ~ #mainContainer #appMain main #content,
.hasPopupVisible {
	overflow: hidden;
	min-height: auto;
	max-height: calc(100vh - var(--size-header-height) - var(--size-gap-main-double));
}
.popupContainer {
	
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 100vh;
}
.popupContent {
	padding: 2em;
	border-radius: 5px;
	background: white;
	max-width: 50%;
	border: 1px solid rgba(0,0,0,.15);
}
.popup.alert .popupContent { 
	padding: 1em;
	max-width: 26em;
}
.popup .popupContent > .header {
	display: flex;
	align-items: center;
	margin-bottom: 1em;
}
.popup .popupContent > .header .title {
	font-size: 1.2em;
	font-weight: 700;
	color: var(--color-main-high);
	flex: 1 0;
}
.popup .popupContent > .header .close {
	font-size: 1.2em;
	transition: all .15s ease-in-out;
}
.popup .popupContent > .header .close:hover {
	transform: rotate(90deg);
	
}
.popup .popupContent > .header .close i:hover {
	background: none;
	color: var(--color-main-high);
}

.popup .icon {
	text-align: center;
	font-size: 3em;
}
.popup .icon .success {
	color: var(--color-alert-success);
}
.popup .icon .error {
	color: var(--color-alert-danger);
}
.popup .icon .warning {
	color: var(--color-alert-warning);
}
.popup .icon .info {
	color: var(--color-alert-info);
}
.popup .icon .question {
	color: var(--color-alert-question);
}

.popup .popupContent > .content {
	margin-bottom: 1em;
	margin-top: 0.5em;
}

.popup.alert .popupContent > .content {
	text-align: center;
	margin-bottom: 1.5em;
}
.popup.alert .popupContent > .content p {
	margin-top: 0;
}

.popup .popupContent .actions {
	margin: 1em 0 0;
	padding-left: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.popup .popupContent .actions li {
	padding: 0 .5em;
}


.popupData {
	display: none;
}


/*=============================================
=            Erreurs / confirmations            =
=============================================*/
main .mainMessages {
	color: white;
	padding: 1em;
	margin: 1em 0 2em;
	border-radius: 3px;
}
main .mainMessages a {
	color: white;
}
main .mainMessages .btn {
	background: rgba(255,255,255,.2);
}
main .mainMessages .btn:hover {
	background: rgba(255,255,255,.3);
}
main .errors {
	background: var(--color-alert-danger);
}
main .confirmations {
	background: var(--color-alert-success);
}


/*=============================================
=            Front            =
=============================================*/
#login {
	background: url('../img/indexBackground.jpg') no-repeat;
	background-size: cover;
}
#login #content {
	background: white;
	padding: 3em;
	border-radius: .5em;
}
#login .title {
	display: block;
	text-align: center;
	font-size: 2em;
	font-weight: 300;
	margin-bottom: .5em;
	color: var(--color-main-medium);
}
#login field {
	display: block;
	margin-bottom: 1em;
}
#login #connectBtn {
	padding: .5em 2em;
}
#login .copyright {
	margin-top: 2em;
	text-align: center;
	font-size: .7em;
}


/*=============================================
=            Header            =
=============================================*/
header {
	display: flex;
	align-items: center;
	justify-content: space-between;

	background: var(--color-primary-900);
	color: white;
	box-shadow: 0 0 10px rgba(var(--color-main),.1);
	padding: 0 var(--size-gap-main);
}
header a {
	color: white;
	text-decoration: none;
}
#siteName {
	font-size: 1.2em;
	font-weight: 700;
}
#siteName a:hover {
	text-decoration: none;
}
#userMenu {
	display: flex;
	align-items: center;
	gap: var(--size-gap-main);
}
#userType {
	font-weight: 700;
	font-size: .8em;
	background: white;
	color: var(--color-primary-900);
	padding: .1em 1em;
}
#userMenu i {
	font-size: 1.5em;
	color: white;
}


/*=============================================
=            MAIN : content           =
=============================================*/
main {
	overflow-y: auto;
	background: var(--color-primary-100);
}
#content {
	padding: var(--size-gap-main);
}




#content > section {
	background: white;
	padding: var(--size-gap-main);
	border-radius: calc(var(--size-gap-main) / 2);
}

/*----------  Titres des pages  ----------*/
.pageHeader {
	display: flex;
	align-items: center;
	margin-bottom: 1em;
	position: relative;
}
.pageHeader #title {
	flex: 1 0;
	display: flex;
	gap: 1em;
	align-items: center;
}
#statusbar {
	font-size: .8em;
}
#saveStatus {
	font-size: .8em;
}
#saveStatus > span {
	display: none;
}


/*=============================================
=            Home            =
=============================================*/
#orderRequestForm {
	min-width: 20em;
}






/*=============================================
=            Order Request            =
=============================================*/

th.hidden,
td.hidden,
section.hidden {
	display: none;
}

td.price input,
td.qty input {
	text-align: right;
}


#tabsMenu ul {
	display: flex;
	border-bottom: 1px solid rgba(var(--color-main), .18);
	margin-bottom: 1em;
}
#tabsMenu li {
	cursor: pointer;
	padding: .5em 2em;
	text-transform: uppercase;
	font-size: .85em;
	font-weight: 700;
	color : var(--color-main-disabled);
	position: relative;
	transition: all .1s ease-in-out;
}
#tabsMenu li::after {
	content:'';
	background:var(--color-primary-700);
	height: 2px;
	width: 100%;
	transform: scaleX(0);
	left:0;
	bottom: -1px;
	display: block;
	position: absolute;
	transition: all .15s ease-in-out;
}
#tabsMenu li.active::after {
	transform: scaleX(1);
}
#tabsMenu li.active {
	color: var(--color-primary-700);
	border-bottom-color: var(--color-primary-700);
	
}
#tabsMenu li:hover {
	background: var(--color-primary-100);
}

.tab.hidden {
	display: none;
}


/*----------  Résumé  ----------*/

#orderRequestSummary {
	margin-bottom: 2em;
}

#orderRequestSummary table {
	width: 50%;
}
#orderRequestSummary .qty,
#orderRequestSummary .price {
	text-align: right;
}
#orderRequestSummary input {
	width: auto;
}
/*----------  Action Navbar  ----------*/
#orderRequestActionNavbar ul {
	display: flex;
	gap: 1em;
}


/*----------  Navbar  ----------*/

#orNavbar {
	font-size: .85em;
}
#orNavbar *[data-sectionlink] {
	cursor: pointer;
}
#orNavbar ul {
	display: flex;
	gap: 1em;
}
#orNavbar > ul > li span {
	font-weight: 700;
	
}
#orNavbar > ul > li {
	/* gap: .5em !important; */
}
#orNavbar > ul > li:first-of-type::after {
	content:'';
	background: rgba(var(--color-main), .18);
	width: 1px;
	display: block;
	height: 100%;
}
#orNavbar ul li {
	display: flex;
	gap: 1em;
	align-items: center;
}
#orNavbar *[data-sectionlink] {
	background: var(--color-primary-200);
	color: var(--color-primary-500);
	text-transform: uppercase;
	font-weight: 700;
	padding: .1em 1em;
	border-radius: 2px;
}


#orderRequest section section {
	margin-bottom: 4em;
}



/*----------  Verrous  ----------*/
.lockIcon {
	cursor: pointer;
	opacity: .7;
	transition: all .15s ease-in-out;
	width: 1.2em;
	display: inline-block;
}
.lockIcon:hover {
	opacity: 1;
}
.lockIcon::before {
	content: '\f3c1';
	display: inline-block;
	font-family: var(--font-icons);
	font-weight: 900;
}
.lockIcon[data-accessvalue='false']::before {
	content: '\f023';
}


/*----------  Tableau  ----------*/

.linesTable {
	font-size: .9em;
}
.linesTable th.dispatchSize {
	text-transform: uppercase;
}
.linesTable td {
	outline: 0px solid var(--color-primary-500);
}
.linesTable td.focus {
	outline: 2px solid var(--color-primary-500);
	outline-offset: 0;
	transition: all .05s ease-in-out;
}
.linesTable .inputCell {
	text-align: center;
}
.linesTable .totalQtyCell {
	min-width: 7em;
}
.linesTable .selectCell select {
	margin-bottom: 0;
}
.linesTable input {
	max-width: 7em;
	text-align: center;
}
.linesTable input.totalQty {
	max-width: 4em;
	text-align: center;
}
.linesTable input[data-fieldname='dispatch'] {
	max-width: 4em;
	min-width: 3em;
}
.linesTable input[data-fieldname='dispatch']:read-only {
	background: rgba(var(--color-main),.1);
	border-bottom: none;
}
.linesTable input[data-fieldname='unitpriceht'] {
	max-width: 4em;
	min-width: 3em;
}
.linesTable input.totalPriceHT {
	max-width: 4em;
	min-width: 3em;
}
.linesTable td.bool {
	text-align: center;
}

.linesTable tr.hasWarnings {
	background: rgba(255,138,0,.15);
	transition: background-color .5s ease-in-out;
}


table.table.linesTable td.actions ul li i {
	font-size: 1em;
}

table.table.linesTable tfoot th {
	text-align: right;
}
table.table.linesTable tfoot td {
	text-align: center;
}

table.table.linesTable tfoot tr:last-of-type td,
table.table.linesTable tfoot tr:last-of-type th {
	border-bottom: none;
}
.linesTableActions {
	/* margin-top: 1em; */
}

table.linesTable .totalPriceCell {
	width: 8em;
}
table.linesTable .totalPriceCell input {
	max-width: 6em;
}

.printingTechniqueIcon {
	display: inline-flex;
	font-size: .8em;
	color: white;
	font-weight: 700;
	width: 1.5em;
	height: 1.5em;
	padding-top: .2em;
	align-items: center;
	justify-content: center;
	line-height: 1em;
	border-radius: 50%;
	background: var(--color-main-medium);
	cursor: default;
}
.printingTechniqueIcon.technique-silkscreen {
	background: var(--color-printingtechnique-silkscreen);
}
.printingTechniqueIcon.technique-digital {
	background: var(--color-printingtechnique-digital);
}
.printingTechniqueIcon.technique-silkscreenTransfer {
	background: var(--color-printingtechnique-silkscreenTransfer);
}
.printingTechniqueIcon.technique-embroidery {
	background: var(--color-printingtechnique-embroidery);
}
.printingTechniqueIcon.technique-engraving {
	background: var(--color-printingtechnique-engraving);
}
.printingTechniqueIcon.technique-sublimation {
	background: var(--color-printingtechnique-engraving);
}
.printingTechniqueIcon.technique-transflex {
	background: var(--color-printingtechnique-transflex);
}



/*----------  Formulaire  ----------*/
#productForm {
	min-width: 50em;
}
#productForm .hidden,
#printingZonesTable .printingDimensions.hidden {
	display: none;
}
#productForm #productSelection .hidden {
	opacity: 0;
}
#printingZonesTable .disabled {
	display: none;
}

#productForm .fieldValue {
	display: flex;
	gap: 2em;
}
#productForm .fieldValue > * {
	max-width: 50%;
}

#printingZonesTable {
	margin: 2em 0;
}
#printingZonesTable th,
#printingZonesTable td {
	width: 33.33%
}
#printingZonesTable tbody th {
	height: 4em;
}
#printingZonesTable .printingDimensions  {
	display: flex;
	gap: 1em;
}
#printingZonesTable .printingDimensions input {
	max-width: 5em;
	text-align: center;
}



/*=============================================
=            Footer            =
=============================================*/
footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: white;
	border-top: 1px solid rgba(0,0,0,.05);
	padding: 0 var(--size-gap-main);
	font-size: .75em;
}
footer img {
	max-width: 16px;
}
footer #copyright {
	display: flex;
	align-items: center;
	gap: .75em;
	line-height: 1em;
}