/* Ajout par Greg pour cacher les éléments pour les mymerch */
body.myMerch .shopLink {
	display:none;
}
body.myMerch  #navPageLinks .sub {
	display:none;
} 
body.myMerch #navPageLinks li[data-link="preferences"] {
	display:none;
}
body.myMerch #navPageLinks li[data-link="shop"] {
	display:none;
}

/* Ajout par Greg */
#table tbody tr {
	cursor:pointer;
}

@media (max-width: 991px) {
	table.table.multiple tbody td:nth-of-type(1) { /* voir ligne 2121 (si ça à bougé, chercher ""#page-products table.table tbody td:nth-of-type(1) {") */
		display:none;
	
	}
	table.table.inSelection tbody td:nth-of-type(1) { /* voir ligne 2121 (si ça à bougé, chercher ""#page-products table.table tbody td:nth-of-type(1) {") */
		display:block;
		position:absolute;
		top: 50%;
		transform: translateY(-50%);
	}
}


/* Fin ajout par Greg */

: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-socials-facebook: #3b5998;
	--color-socials-pinterest: #bd081c;
	--color-socials-instagram: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
	--color-socials-twitter: #00acee;
	--color-socials-youtube: #FF0000;

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

	--color-loader-content: white;

	--color-order-pickup:LightSkyBlue;
	--color-order-shipping: Peru;

	/*----------  Opacités  ----------*/
	--opacity-text-high: .87;
	--opacity-text-medium: .70;
	--opacity-text-disabled: .38;
	
	/*----------  Polices  ----------*/
	--font-main: 'Roboto', 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: 75px;
	--size-nav-width: 16em;


	--font-fontawesome: "Font Awesome 5 Free";
	--colorMain:#3c93b5
}

/* LG */
@media (max-width: 1199px) { 
	:root {
		--size-container: 992px;
	}
}	
/* MD */
@media (max-width: 991px) {
	:root {
		--size-container: 768px;
		--size-header-height: 75px;
		--size-nav-width: 0px;
	}
}
/* SM */
@media (max-width: 767px) {
	:root {
		--size-container: 576px;
	}
}
/* XS */
@media (max-width: 575px) {
	:root {
		--size-gap-main: 10px;
	}
}
/* print */
@media print {
    :root {
       --size-container: 100%!important;
    }
}

/*----------  Responsive  ----------*/

/* XL */
@media (max-width: 1439px) { 

}	
/* LG */
@media (max-width: 1199px) { 

}	
/* MD */
@media (max-width: 991px) {

}
/* SM */
@media (max-width: 767px) {

}
/* XS */
@media (max-width: 575px) {

}


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





/*=============================================
=            Général            =
=============================================*/

body {
	font-size: 15px;
	color: var(--color-main-medium);
}

html, 
input, 
textarea, 
button {
	/* font-family: 'PT Sans', sans-serif; */
	font-family: var(--font-main);
}


/*----------  Titres  ----------*/
h1 {
	color: var(--color-main-high);
	font-size: 1.3em;
	color: var(--color-primary-800);
	text-transform: uppercase;
	font-weight: 700;
	margin: 1em 0 1em 0;
}
/* XS */
@media (max-width: 575px) { 
	h1 {
		text-align: center;
	}
}


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







/*=============================================
=            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: 500;
	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;
}



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


/*----------  Tag field  ----------*/

field {
	padding: 0.5em 0 0 0;
	position: relative;
	display: block;
	margin-bottom: 1.5em;
}

/* champ inline */
field.inline-checkbox {
	display: flex;
	align-items: flex-start;
	margin-bottom: 1em;
	flex-wrap: wrap;
}


/*----------  Label  ----------*/

field label {
	font-size: 1em;
	position: absolute;
	pointer-events: none;
	color: rgba(0,0,0,0.3);
	/* top: 4px; */
	top: 1.1em;
	left: 0;
	z-index: 2;

	transition:			.2s ease-in-out all;
	-moz-transition:	.2s ease-in-out all;
	-webkit-transition:	.2s ease-in-out all;
}

/* label quand focus sur champ */
field label.active, 
field select + label,
field textarea + label, 
field .FAKESELECT + label,
field input[type='date'] + label,
.ck-editor + label, 
input[type=checkbox]+label {
	font-size: .7rem;
	top: 0px;
	left:0;
	color: var(--color-primary-700);
}

/* label standard ou inline : annulation du .active */
field.standard label,
field.standard label.active,
field.inline label.active,
field.standard textarea+label,
field.inline textarea+label {
	font-size: 1em;
	position: relative;
	pointer-events: auto;
	top: 0;
	left: 0;
}


field.inline label {
	color: var(--color-primary-700);
}


/*----------  Champs  ----------*/

field *:focus {
	outline: none;
}

field input, 
field select, 
field textarea, 
field .ck-editor {
	font-family: var(--font-main);
	margin-top: 10px;
	font-size: 1em;
}

field input[type=text],
field input[type=password],
field input[type=email],
field input[type=number],
field select,
field textarea {
	transition:			.2s ease-in-out all;
	-moz-transition:	.2s ease-in-out all;
	-webkit-transition:	.2s ease-in-out all;
}

/* input */
field input[type=text],
field input[type=password],
field input[type=email],
field input[type=number] {
	width:100%;
	background: none;
	padding-bottom:0.2em;
	border:0;
	border-bottom: 1px solid  rgba(0,0,0,.3);
	position: relative;
}
field input[type=text]:hover,
field input[type=password]:hover,
field input[type=email]:hover,
field input[type=number]:hover {
	border-bottom-color: var(--color-main-medium);
}
field input[type=text]:focus,
field input[type=password]:focus,
field input[type=email]:focus,
field input[type=number]:focus {
	border-bottom-color: var(--color-primary-700);
}

field input[type=color] {
	width: 8em;
	height: 2em;
}

/* field-input : pour ajout de préfixe/suffixe */
field .field-input {
	position: relative;
}
field .field-input input {
	padding-right: 1em;
}

field .field-input .suffix {
	position: absolute;
	right: 0;
	font-size: 2em;
	font-weight: 300;
	color: var(--color-main-medium);
	top: 51%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	line-height: 1em;
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled,
field input[type="checkbox"]:disabled ~ label,
field input[type="radio"]:disabled + label {
	opacity: .38;
	cursor: default;
}

input[type="checkbox"]:disabled:checked {
	background: rgba(0,0,0,.38);;
	border-color: transparent;
}
input[type="radio"]:disabled:checked {
	border-color: rgba(0,0,0,.38);
}
input[type="radio"]:disabled:checked::before {
	background: rgba(0,0,0,.38);
}

/* textarea */

field textarea {
	width: 100%;
	min-height: 200px;
	padding: .5em;
	border: 1px solid rgba(0,0,0,.3);
}

/* select */

field select {
	width: 100%;
	padding: .2em;
}

field select[disabled] {
	opacity: .5;
}

/* select-css */
.select-css {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	max-width: 100%; /* useful when width is set to anything other than 100% */
	box-sizing: border-box;

	background-color: white;
	border: none;
	border-bottom: 1px solid rgba(0,0,0,.4);
	padding-right: .7em;
	
	/* background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); */
	background-image: url('../images/select-css-icon.svg');
	background-size: .7rem;
	background-repeat: no-repeat;
	background-position-y: center;
	background-position-x: calc(100% - 4px);

	cursor: pointer;
}

/* fieldset */
fieldset {
	padding: 0;
	margin: 0;
	border: none;
	margin-bottom: 2em;
}
fieldset:last-of-type {
	margin-bottom: 0;
}
legend {
	background: none;
	color: var(--color-primary-700);
	font-size: 1.1em;
	margin: 0 0 .5em;
	padding: 0;
}

/* Hide arrow icon in IE browsers */
.select-css::-ms-expand {
	display: none;
}
/* Hover style */
.select-css:hover {
	border-color: #888;
	background-color: var(--color-primary-100);
}
/* Focus style */
.select-css:focus {
	/* border-color: #aaa; */
	/* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
	/* box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7); */
	/* box-shadow: 0 0 0 3px -moz-mac-focusring; */
	box-shadow: none;
	color: #222; 
	outline: none;
}
/* options style */
select.select-css option {
	font-size: 1rem;
	color: var(--color-main-high);
	font-weight: 400;
	background: white;
}

/* checkbox */

/* Design des input, attention utilisé aussi dans les listes */
input[type=checkbox] {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	/*
	-border-radius: 4px;
	height: 15px;
	width: 15px;
	background: #fff;
	border: 1px solid #ccc;
	*/
	width: 1.2em;
	height: 1.2em;
	border: 2px solid #666;
	position: relative;
	border-radius: 2px;
	cursor: pointer;
	background: white;
	position: relative;
	outline: none !important;
	/* z-index: 2; */
}
input[type=checkbox]::before {
	content: '\f00c';
	font-family: var(--font-fontawesome);
	font-weight: 900;
	color: white;
	position: absolute;
	top: 0.1em;
	left: 0;
	font-size: .8em;
	line-height: 1em;
	opacity: 0;
	-moz-transform: scale(0);
	-webkit-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);

	-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;
}
input[type="checkbox"]:checked {
	background: #666;
}

input[type="checkbox"]:checked::before {
	
	opacity: 1;
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}


/* version tick vert quand checked */
table.table tbody tr td:not(:first-child) input[type=checkbox]:checked,
.editObject input[type=checkbox]:checked {
	background: var(--color-alert-success);
	border-color: var(--color-alert-success);
}

/* inline checkbox */

field.inline-checkbox input {
	margin-right: 1em;
	margin-top: 0;
}
field.inline.inline-checkbox label {
	color: var(--color-main-medium);
	flex: 1;
	cursor: pointer;
}
field.inline.inline-checkbox .hint {
	flex-basis: 100%;
	margin-left: 2em;
	margin-left: 3.55em;
}

/* input time */
input[type="time"]::-webkit-calendar-picker-indicator {
	background: none; 
	display:none;
}
input[type="time"]::-moz--datetime-reset-button {
	display:none
}
input[type="time"] {
	padding:0 0 0 1em;
	/* padding: 0 1em; Pour Chrome */
}
/* XS */
@media (max-width: 575px) {
	input[type="time"] {
		max-width: 6em;
	}
}


/* input erreur */
input.error {
	color: var(--color-alert-danger);
}

/* CK Editor */
field .ck-editor {
	margin-bottom:1.5em!important;
	margin-top:20px!important;
}
field input:invalid {
	box-shadow:none;
}


/*----------  Info champ  ----------*/

field .hint,
fieldset .hint {
	font-size: .7em;
	color: var(--color-main-disabled);
	margin-top: 0.3em;
}

field .hint a,
fieldset .hint a {
	color: var(--color-primary-700);
	cursor: pointer;
}
field .hint a:hover,
fieldset .hint a:hover {
	color: var(--color-primary-900);
}

/*----------  Champs masqués mobile  ----------*/

.hideXS .showFieldBtn {
	display: none;
}
/* XS */
@media (max-width: 575px) {
	.hideXS > *:not(.showFieldBtn) {
		display: none;
	}
	.hideXS .showFieldBtn {
		display: inline-block;
	}
	.hideXS.showField > * {
		display: block;
	}
	.hideXS.showField .showFieldBtn {
		display: none;
	}
	
}


/*=============================================
=            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 {
	-webkit-transition: all .05s ease-in-out;
	-moz-transition: 	all .05s ease-in-out;
	transition: 		all .05s ease-in-out;
	position: relative;
}

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


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

table.table th {
	font-weight: 500;
	text-align: center;
	/* padding: .8em 1em ; */
}

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) - 1px);
	z-index: 4;
	background: white;
	padding: 0;
	border-top: 1px solid rgba(0,0,0,.17);
	vertical-align: top;
}
/* 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;
}
table.table thead th > div {
	padding: .4em .5em ;
}

/* cellules avec tri */
table.table th:not([data-sortable=false]) {
	cursor: pointer;
}
table.table th i {
	margin-left: .5em;
}

#tableSort option {
	font-size: 1em;
}
#tableSortFilters {
	display: none;
	font-size: .8em;
}
#tableSortFilters > * {
	margin-bottom: 1em;
}
#tableFilters span {
	cursor: pointer;
}
#tableFilters span::after {
	content: '\f078';
	font-family: var(--font-icons);
	margin-left: 1em;
	font-weight: 900;
	color: var(--color-main-high);
	font-size: 1em;
}
#tableFilters span.active::after {
	content: '\f077';
}

/* MD */
@media (max-width: 991px) {
	#tableSortFilters {
		display: flex;
		flex-wrap: wrap;
	}
	#tableSort {
		margin-right: 2em;
	}

	table.table thead {
		display: none;
		font-size: .8em;
		padding: .5em 0;
		background: rgba(0,0,0,.05);
		flex-wrap: wrap;
		margin-bottom: 1em;
	}
	table.table thead.active {
		display: flex;
	}
	table.table thead th {
		display: none;
		border: none;
		background: transparent;
		position: relative;
		top: 0;
	}
	table.table thead th::after {
		display: none;
	}
	table.table thead th .order {
		display: none !important;
	}
	table.table thead th[data-filter] {
		display: inline-block;
	}
	table.table thead th > div {
		display: flex;
		align-items: center;
	}
	table.table thead th .title {
		margin-right: 1em;
	}
	filter[data-children-count]::after {
		display: none !important;
	}
}


/*----------  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) */
}

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

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,.03);
}
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,.04);
	border-right: 1px solid rgba(0,0,0,.04);
}

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


/*----------  Titre de la page / tableau  ----------*/

/* => déplacé en éléments communs */


/*----------  Actions à côté du titre (ex : nouveau produit)  ----------*/

/* => déplacé en éléments communs */

/*----------  Pager  ----------*/

#tablePager {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	color: rgba(0,0,0,var(--opacity-text-medium));
	margin-left: 1em;
}
#tablePager > div {
	margin-left: 1em;
}
#tablePager > div:nth-of-type(3) {
	display: none;
}
#tablePager > div:last-of-type {
	order: -1;
	font-size: .8em;
}


/*----------  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;
}

/* XS */
@media (max-width: 575px) {
	#tablePager { 
		justify-content: center;
		margin-left: 0;
	}
}


/*----------  Filtres  ----------*/

filter {
	position: relative;
	display: flex;
	align-items: center;
	margin-top: 0.2em;
}

filter input,
filter select.select-css,
filter .FAKESELECT {
	flex: 1;
	display: block;
	border: 1px solid rgba(0,0,0,.15);
	border-radius: 2px;
	width: 100%;
	padding-right: 2em;
	text-align: left;
	font-size:13.33px; /* Greg : Le texte des input est forcé par les navigateurs à une taille de 13.333px. Donc si je veux que mes fakesleect aient la même taille que les input, je suis obligé de forcer tout le monde à la même taille */
	height:1.5em; /* Greg : Même combat */
	background: white;
}
filter select.select-css option {
	font-size: 1em;
}
filter .FAKESELECT {
	min-width: 5em;
}

filter[data-children-count]::after {
	content: "\f0b0";
	font-family: var(--font-icons);
	display: block;
	/* right: .5em; */
	/* top: 50%; */
	/* transform: translateY(-50%); */
	font-weight: 900;
	/* position: absolute; */
	opacity: .3;
	font-size: .6em;
	margin-left: .7em;
}


/*----------  Actions groupées tableau (bulk)  ----------*/
#listActions {
	position: fixed;
	border-top: 4px solid var(--color-primary-500);
	bottom: -70px;
	width: 100%;
	/* display: grid; */
	background-color: var(--color-primary-100);
	padding: .5em var(--size-gap-main) var(--size-gap-main);
	/* height:48px; */
	box-sizing: border-box;

	transition: all .3s ease-in-out;

	/*display:none;*/
	z-index: 3;
}

#listActions.show {
	bottom: 0;
}

#listActions ul {
	margin: 0 0 0 6em;
	list-style-type: none;
	padding: 0;
	position:relative;

	top: 5em;

	transition: all .5s ease-in-out;
}
#listActions.show ul {
	top: 0;
}
#listActions ul::before {
	content: '\f04b';
	font-family: var(--font-icons);
	font-size: .5em;
	font-weight: 900;
	color: #666;
	display: block;
	width: 3rem;
	height: 1.4rem;
	position: absolute;
	left: -4.5rem;
	border-bottom: dotted 2px #666;
	border-left: dotted 2px #666;
	line-height: 2.7rem;
	text-align: right;
}
#listActions li {
	display:inline-block;
	margin-right: 0.5em;
	margin-top: 0.4em;
}


/*----------  Table en grille MD  ----------*/
/* MD */
@media (max-width: 991px) {
	table.table.gridMobile tbody tr {
		display: grid;
		border: 1px solid rgba(0,0,0,.1);
		border-radius: 5px;
		margin-bottom: .5em;
	}
	table.table.gridMobile tbody td {
		border: none;
		text-align: left! important;
		padding: .3em;
	}
	table.table.gridMobile tbody td:before {
		display: block;
		font-size: 0.8em;
		opacity: .6;
	}
}



/*----------  Icônes dans tables  ----------*/
table.table i.fa-exclamation-triangle {
	color: var(--color-alert-warning);
	margin-right: 0.5em;
}



/*=============================================
=            Template            =
=============================================*/

/*----------  Structure  ----------*/
header {
	height: var(--size-header-height);
	/* overflow: hidden; */
	z-index: 10;
}
#mainContainer {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--size-header-height));
}
#appMain {
	flex: 1;
	position: relative;
	display: flex;
}
nav {
	position: sticky;
	top: var(--size-header-height);
	min-height: calc(100vh - var(--size-header-height));
	z-index: 3;
}
main {
	flex: 1;
}
/* MD */
/*
@media (max-width: 991px) {
	.mobileMenuVisible header,
	.mobileMenuVisible main {
		display: none;
	}
}
*/

/*----------  Container  ----------*/
.container {
	width: 100%;

	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--size-gap-main-double);
	row-gap: var(--size-gap-main-double);
}

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

	grid-column: auto / span 12;
	align-self: start;
}

/* XS */
@media (max-width: 575px) {
	.container > section {
		padding: 0;
		border-radius: 0;
	}

}

/*=============================================
=            Eléments communs            =
=============================================*/


/*----------  Tooltip  ----------*/

#tooltip {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #000;
    color: #FFF;
    padding: 5px 10px;
    border-radius: 5px;
    display: none;
    z-index: 1000;
    font-size: 14px;
}





/*----------  Loader  ----------*/

.loader {
	font-size: 10px;
	margin: 50px auto;
	text-indent: -9999em;
	width: 11em;
	height: 11em;
	border-radius: 50%;
	background: var(--color-loader-content);
	background: -moz-linear-gradient(left, var(--color-loader-content) 10%, rgba(255,0,128, 0) 42%);
	background: -webkit-linear-gradient(left, var(--color-loader-content) 10%, rgba(255,0,128, 0) 42%);
	background: -o-linear-gradient(left, var(--color-loader-content) 10%, rgba(255,0,128, 0) 42%);
	background: -ms-linear-gradient(left, var(--color-loader-content) 10%, rgba(255,0,128, 0) 42%);
	background: linear-gradient(to right, var(--color-loader-content) 10%, rgba(255,0,128, 0) 42%);
	position: relative;
	-webkit-animation: load3 1.4s infinite linear;
	animation: load3 1.4s infinite linear;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
  }
  .loader:before {
	width: 50%;
	height: 50%;
	background: var(--color-loader-content);
	border-radius: 100% 0 0 0;
	position: absolute;
	top: 0;
	left: 0;
	content: '';
  }
  .loader:after {
	background: var(--color-primary-100);
	width: 75%;
	height: 75%;
	border-radius: 50%;
	content: '';
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
  }
  @-webkit-keyframes load3 {
	0% {
	  -webkit-transform: rotate(0deg);
	  transform: rotate(0deg);
	}
	100% {
	  -webkit-transform: rotate(360deg);
	  transform: rotate(360deg);
	}
  }
  @keyframes load3 {
	0% {
	  -webkit-transform: rotate(0deg);
	  transform: rotate(0deg);
	}
	100% {
	  -webkit-transform: rotate(360deg);
	  transform: rotate(360deg);
	}
  }


.loaderPrimary {
	--color-loader-content: var(--color-primary-300);
}

.loaderSecondary {
	--color-loader-content: var(--color-secondary-300);
}
.loaderPrimary::after,
.loaderSecondary::after {
	background: white;
}

/*----------  Titre de la page / tableau  ----------*/

#tableHeader,
.pageHeader,
.pageFooter {
	display: flex;
	align-items: center;
	margin-bottom: 1em;
	position: relative;
}
.pageFooter {
	margin-top: 1em;
}
#tableHeader h1,
.pageHeader h1 {
	flex: 1 0;
}
.pageHeader .prevBtn {
	margin-right: 0.5em;
}
/* XS */
@media (max-width: 575px) {
	#tableHeader h1,
	.pageHeader h1 {
		margin-bottom: 0;
	}
	#tableHeader,
	.pageHeader {
		flex-direction: column;
	}
	#tableHeader > *,
	.pageHeader > *{
		margin-top: 1em !important;
	}

	.pageHeader .prevBtn {
		position: absolute;
		top: 0;
		left: 0
	}
	.pageHeader .prevBtn ~ h1 {
		padding-left: 1.5em;
	}
}

/*----------  Actions à côté du titre (ex : nouveau produit)  ----------*/

#tableTools,
.pageTools {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
#tableTools > *:last-of-type {
	margin-right: 0;
}
#tableTools > div:not(:last-of-type),
.pageTools > div:not(:last-of-type) {
	margin-right: 1em;
}
#tableTools li:not(:last-of-type),
.pageTools li:not(:last-of-type) {
	margin-right: 1em;
}


/*----------  Edition d'objets  ----------*/

/*
Style de la page d'édition (boutique, article, etc.)
*/
.editObject {
	display:grid;
	grid-template-columns: repeat(2,1fr);
	column-gap: calc(var(--size-gap-main));
	row-gap: calc(var(--size-gap-main));
}


.editObject section {
	grid-column: auto / span 1;

	border: 1px solid rgba(0,0,0,.08);
	padding: var(--size-gap-main);
	border-radius: var(--size-gap-main);

}
.editObject h2 {
	color: rgba(0,0,0,.4);
	font-size: 1.5em;
	display: flex;
	align-items: center;
	margin-top: 0;
	font-weight: 300;
}

.editObject .sectionHint {
	font-size: .8em;
	margin-bottom: 2em;
	color: var(--color-main-medium);
}

/* MD */
@media (max-width: 991px) {
	.editObject {
		grid-template-columns: 1fr;
	}
	.editObject h2 {
		font-size: 1.4em;
	}
}	
/* SM */
@media (max-width: 767px) {
	.editObject h2 {
		font-size: 1.3em;
	}
}
/* XS */
@media (max-width: 575px) {
	.editObject > section {
		border: none;
		padding: 0;
		border-radius: none;
	}
	.editObject h2 {
		font-size: 1.2em;
	}
}


/* TEMP ? */
.fieldSizeMedium {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-column-gap: 20px;
}
.fieldSizeSmall {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-column-gap: 20px;
}
.fieldSizeXSmall {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-column-gap: 20px;
}



/*----------  Edition d'objet : upload d'images  ----------*/

/* container principal */
imageUpload {
	display:block;
	width:400px;
	text-align: center;
	/* padding:10px; */
	position:relative;
	overflow:hidden;

	margin: 0 1em 1em 0;
	cursor: zoom-in;
}
imageUpload.empty {
	display: none !important;
}
#imgVitrine imageUpload {
	width: 8em !important;
	
}
#imgVitrine .imageUploadContainer img {
	
}

/* contenu (image) */

.imageUploadContainer {
	position: relative;
	/* box-shadow: 0 0 5px rgba(0,0,0, 0.5); */
	margin-bottom:10px;
	border: 1px solid rgba(0,0,0,.15);
	overflow: hidden;
	height: 8em !important;
}
.imageUploadContainer:hover {
	border-color: rgba(0,0,0,.3);
}
imageUpload img {
	max-width: 100%;
	box-sizing: border-box;
	vertical-align: top;
	
	width: 100%;
	height: 100%;
	object-fit: cover;
}
imageUpload.solo img {
	object-fit: contain;
}

/* animation upload en cours */

.imageUploadLoader {
	width: 200px;
	border: 1px solid var(--color-primary-500);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%);
	background-color: white;
	outline: 1px solid #FFF;
	z-index: 1;
}
.imageUploadLoader > div {
	width: 0%;
	background-color: var(--color-primary-500);
	height: 13px;
	transition: width 0.1s linear;
	opacity: 0.9;
}
.imageUploadLoader {
	display:none;
}
imageUpload.uploading .imageUploadLoader {
	display:block;
}


/* bouton image par défaut */
imageUpload .default {
	position: absolute;
	top: .4em;
	right: .25em;
	width: 2em;
	height: 2em;
	line-height: 2em;
	text-align: center;
	border-radius: 50%;
	cursor: pointer;
	opacity: 0;

	transition: all .15s ease-in-out;
}
imageUpload:hover .default {
	opacity: .5;
	background: rgba(255,255,255,.5);
}
imageUpload .default:hover {
	
	opacity: 1;
}
imageUpload.solo .default {
	display: none;
}
imageupload.isDefault .default {
	opacity: 1 !important;
	cursor: auto;
	color: gold;
	background: rgba(0,0,0,.3);
}
imageUpload.isDefault .default:hover {
	background: none;
}
imageupload.isDefault .default i {
	/* content:"\f005"; */
	font-weight: 900;
}

/* boutons */
imageUpload .buttons {
	position:absolute;
	/* top:-33px; */
	top: -2.9em;
}
imageUpload .buttons > div {
	opacity: 0;
	transition: all 0.1s ease-in-out;
}
imageUpload .buttons>div:nth-child(3) {
	transition-delay:0.05s;
}
imageUpload:hover .buttons>div {
	margin-top:50px;
	opacity:1;
}
imageUpload .buttons > div {
	/* border:1px solid #FFF; */
	border:1px solid rgba(255,255,255,.5);
	width:32px;
	height:32px;
	border-radius:32px;
	background-color:var(--color-primary-700);
	color:white;
	text-align: center;
	line-height:32px;
	display:inline-block;
	vertical-align: top;
	margin-left:5px;
	cursor:pointer;
}



/*----------  Barre en bas pour sauvegarder les changements  ----------*/

#cancelOrSave {
	position: fixed;
	border-top: 4px solid var(--color-primary-500);
	width: calc(100% - 250px);
	bottom: -7em;
	right: 0;
	width: calc(100% - var(--size-nav-width));
	z-index: 2;

	background-color: var(--color-primary-100);
	padding: .5em var(--size-gap-main) var(--size-gap-main);

	/* height:48px; */
	box-sizing: border-box;
	transition: all .3s ease-in-out;

	text-align: center;

	animation: cancelOrSave 1s linear infinite;	
}
nav.hideDesktopShowMobile ~ main #cancelOrSave {
	width: 100%;
}

@keyframes cancelOrSave {
	0% {	border-top-color: var(--color-primary-200);}
	50% {	border-top-color: var(--color-primary-800);}
	100% {	border-top-color: var(--color-primary-200);}
}



#cancelOrSave.visible {
	bottom: 0;
}
#cancelOrSave ul {
	margin: 0;
	padding: 0;
	position: relative;
	top: 5em;
	transition: all .5s ease-in-out;
}
#cancelOrSave.visible ul {
	top: 0;
}
#cancelOrSave ul li {
	display: inline-block;
}

#cancelOrSave button {
	margin: 0 1em;
}
/* XS */
@media (max-width: 575px) {
	#cancelOrSave,
	#listActions {
		display: none;
	}
}


#cancelOrSaveMobile,
#listActionsMobile {
	display: none;
	transform: translateY(-5em);
	transition: all .3s ease-out;
	font-size: 18px;
}
#cancelOrSaveMobile ul,
#listActionsMobile ul {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 0;
	margin: 0;
}
#cancelOrSaveMobile li:not(:last-of-type),
#listActionsMobile li:not(:last-of-type) {
	margin-right: 1em;
}
#cancelOrSaveMobile .save i,
#listActionsMobile .delete i {
	background: var(--color-secondary-700);
	color: white;
	animation: btnSaveDeleteMobile .75s infinite linear;
}
@keyframes btnSaveDeleteMobile {
	0% { background: var(--color-secondary-300); }
	50% { background: var(--color-secondary-700); }
	100% { background: var(--color-secondary-300); }
  }

/* XS */
@media (max-width: 575px) {
	#cancelOrSaveMobile,
	#listActionsMobile {
		display: block;
		width: 0px;
		overflow: hidden;
	}
	#cancelOrSaveMobile.visible,
	#listActionsMobile.visible {
		transform: translateY(0em);
		width: auto;
		overflow: visible;
	}
}



/*----------  Tchat  ----------*/
#lhc_need_help_container {
	display: none;
}


/*=============================================
=            Header            =
=============================================*/

header {
	display: flex;
	align-items: center;
	padding: var(--size-gap-main);
	border-bottom: 1px solid rgba(0,0,0,.1);
	position: sticky;
	top: 0;
	background: white;
	box-shadow: 0 0 10px 0 rgba(1,1,1,.1);
}

header #toggleMenu .iconBtn {
	font-size: 24px;
}
/*----------  Titre  ----------*/

header .title {
	flex: 1;

	display: flex;
	align-items: center;
	padding: 0 2em;
}
header .title img {
	max-height: 44px;
	height: 44px;
	margin-right: 1em;
}
header .title .shopName {
	font-size: 1.5em;
	color: var(--color-main-medium);
}

header #saveProgress {
	font-size: .8em;
	color: var(--color-main-disabled);
	margin-left: 2em;

	display: none; /* TEMP */
}
header #saveProgress span {
	margin-left: 0.5em;
}

/*----------  Liens  ----------*/
header .links {
	display: flex;
	align-items: center;
}
header .links .shopLink {
	margin-right: 1em;
}
header .links #btnUserMenu > span {
	width: 2em;
	height: 2em;
	text-align: center;
	line-height: 2em;
	border: 1px solid rgba(0,0,0,.08);
	font-size: 24px;
	border-radius: 50%;
	color: rgba(0,0,0,.4);
	cursor: pointer;
	-webkit-transition: all .15s ease-in-out;
	-moz-transition: 	all .15s ease-in-out;
	transition: 		all .15s ease-in-out;
	display: block;
}
header .links #btnUserMenu span:hover {
	background: rgba(0,0,0,.08);
}
header #userMenu {
	position: absolute;
	right: var(--size-gap-main);
	bottom: 100;
	background: white;
	border-radius: 2px;
	padding: 1em;
	font-size: .8em;
	color: var(--color-main-medium);
	display: none;
	margin-top: var(--size-gap-main);;
	text-align: right;
	box-shadow: 0 5px 10px 0 rgba(0,0,0,.1);
}
header #userMenu ul,
header #userMenu li {
	margin: 0;
	padding: 0;
}
header #userMenu li a {
	padding: .5em 1em;
	display: block;
	margin-bottom: 0.5em;
}
header #userMenu li a:hover {
	color: var(--color-main-high);
	text-decoration: none;
}
header #userMenu li i {
	margin-left: 0.5em;
}
header #btnUserMenu.open #userMenu {
	display: block;
}

/* LG */
@media (max-width: 1199px) { 
	header .title .shopName {
		font-size: 1.3em;
	}
}
/* MD */
@media (max-width: 991px) {
	header .title {
		padding: 0 1em;
	}
	header .title .shopName {
		font-size: 1.2em;
	}
	header #saveProgress span {
		display: none;
	}
	header .links {
		display: none;
	}
}
/* XS */
@media (max-width: 575px) {
	header {
		height: auto;
	}
	header .shopName {
		display: none;
	}
	header #saveProgress {
		order: 1;
	}
	header .title {
		justify-content: space-between;
	}
	header .title img {
		order: 2;
		margin-right: 0;
		max-height: 32px;
		height: 32px;
	}
}


/*=============================================
=            Navbar            =
=============================================*/
nav {
	padding: var(--size-gap-main) 0;
	align-self: flex-start;

	-webkit-transition: all .5s ease-in-out;
	-moz-transition: 	all .5s ease-in-out;
	transition: 		all .5s ease-in-out;
	width: var(--size-nav-width);

	background: white;
	color: white;
	border-right: 1px solid rgba(0,0,0,.05);
}
nav.hideDesktopShowMobile {
	width: 0;
}
nav {
	width: var(--size-nav-width);
}
nav .header {
	display: none;
}
nav ul {
	transition-delay: .5s;
	opacity: 1;
}
nav.hideDesktopShowMobile ul {
	transition-delay: 0s;
	opacity: 0;
}

nav ul li * {
	-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;
}
nav ul li a {
	display: flex;
	align-items: center;
	padding: .8em var(--size-gap-main) .8em .8em;	
	font-size: .9em;
	color: rgba(0,0,0,.7);
}
nav ul li a::after {
	content:'\f054';
	font-family: var(--font-icons);
	color: rgba(0,0,0,.7);
	margin-left: .5rem;
	font-weight: 900;
	opacity: 0;	
}
nav ul li a span {
	flex: 1 0;

	display: flex;
	align-items: center;
}
nav ul li a span i {
	margin-right: .8em;
	width: 1.5em;
	text-align: center;
	opacity: .6;
}
nav ul li a:hover span i {
	opacity: 1;
}
nav ul li a:hover::after {
	opacity: 1;
}
nav ul li:hover a {
	color: rgba(0,0,0,.7);
	text-decoration: none;
}
nav ul li.sub {
	margin-left: 1.5em;
	font-size: .9em;
	position: relative;
	border-left: 2px dotted rgba(0,0,0,.2);
}
nav ul li.sub a {
	padding-left: 2.2em
}
nav ul li.sub i:first-of-type {
	font-size: .5em;
	opacity: .5;
	margin-right: 1em;
	display: none;
}
nav ul li.sub::before {
	/* content: ''; */
	/* display: block; */
}

nav #navUserLinks,
nav #navLogoutLink {
	display: none;
}

/* MD */
@media (max-width: 991px) {
	nav {
		width: 100vw;
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		overflow-x: hidden;
		overflow-y: scroll;
		min-height: 100vh;
		z-index: 50;
		color: var(--color-main-medium);
		padding: var(--size-gap-main);
		padding-bottom: 5em;
		margin-top: calc(var(--size-header-height) * (-1));

		background: var(--color-primary-700);
		color: white;

		
		grid-template-columns: repeat(2,1fr);
		grid-template-rows: var(--size-header-height) 1fr;
		column-gap: var(--size-gap-main-double);

		align-items: start;
		flex-direction: column;

	}
	nav.hideDesktopShowMobile {
		width: 100vw;
		/* display: grid; */
		display: flex;
		
	}
	nav.hideDesktopShowMobile ~ main {
		display: none;
	}
	nav .header {
		grid-column: auto / span 2;
		
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 1em;
		margin-top: 1em;
	}
	nav .header .btnToggleMenu {
		font-size: 24px;
	}
	nav .header .btnToggleMenu i {
		color: white;
	}
	nav .header img {
		max-height: 33%;
		margin-left: 1em;
		position: fixed;
		bottom: var(--size-gap-main);
		right: var(--size-gap-main);
		opacity: .2;
		z-index: 1;
	}
	nav.hideDesktopShowMobile ul {
		opacity: 1;
	}
	nav ul {
		position: relative;
		z-index: 2;

		/*
		column-count: 2;
		column-gap: var(--size-gap-main-double);
		*/

		border-bottom: 1px solid rgba(255,255,255,.2);
		padding-bottom: 1em;
		margin-bottom: 1em;
		width: 100%;
	}
	nav ul li a {
		font-size: 1em;
		color: white;
		display: inline-block;
	}

	nav ul li a::after {
		display: none;
	}
	nav ul li:hover a {
		color: inherit;
	}
	nav #navUserLinks {
		display: block;
	}

	nav #navLogoutLink {
		display: block;
		border-bottom: none;
		padding-bottom: 0;
		margin-bottom: 0;
	}
}
/* XS */
@media (max-width: 575px) {
	nav {
		display: none;
	}
	nav ul {
		position: relative;
		z-index: 2;
		padding-bottom: .5em;
		margin-bottom: .5em;

		-moz-column-count: 1;
		-webkit-column-count: 1;
		column-count: 1;
	}
	
}



/*=============================================
=            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: 2em;
	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: 0;
	padding-left: 0;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.popup .popupContent > .actions li {
	padding: 0 .5em;
}
/*
.popup .actions li:first-of-type {
	padding-left: 0;
}
.popup .actions li:last-of-type {
	padding-right: 0;
}
*/
/* MD */
@media (max-width: 991px) {
	.popupContent {
		max-width: 60%;
	}
}
/* SM */
@media (max-width: 767px) {
	.popupContent {
		max-width: 70%;
	}
}
/* XS */
@media (max-width: 575px) {
	.popupContent {
		max-width: calc(100% - 20px);
	}
}


/*=============================================
=            Main            =
=============================================*/
main {
	padding: var(--size-gap-main);
	background: var(--color-primary-100);
}
#content {
	min-height: 100%;
	background: var(--color-primary-100);
}

/* XS */
@media (max-width: 575px) {
	main,
	#content {
		background: white;
	}
}



/*=============================================
=            Produits (liste)            =
=============================================*/
/* MD */
@media (max-width: 991px) {
	#page-products table.table tbody tr,
	#page-products table.table tbody tr:first-of-type {
		grid-template-columns: 20% repeat(3,1fr);
	}
	#page-products table.table tbody td[data-fieldname="stock"]:before { content: "Stock : "; }
	#page-products table.table tbody td[data-fieldname="prices_TTC"]:before { content: "Prix de vente : "; }
	#page-products table.table tbody td[data-fieldname="reference"]:before { content: "Référence : "; }
	#page-products table.table tbody td[data-fieldname="family_name"]:before { content: "Famille : "; }

	#page-products table.table tbody td:nth-of-type(1) {
		/*display:none;*/ /* Désactivé par Greg, j'ai plutot ajouté une règle global pour cacher la case à cocher de sélection sur toutes les tables qui en contiennent une en mobile */
	}
	#page-products table.table tbody td[data-fieldname^="images"] {
		grid-column: auto / span 1;
		grid-row: 1 / 4;
		align-self: center;
		justify-self: center;
	}
	#page-products table.table tbody td[data-fieldname^="images"] img {
		max-width: 100%;
	}
	#page-products table.table tbody td[data-fieldname="title"] {
		grid-column: auto / span 3;
		grid-row: 1/2;
	}
	#page-products table.table tbody td[data-fieldname="stock"],
	#page-products table.table tbody td[data-fieldname="prices_TTC"],
	#page-products table.table tbody td[data-fieldname="reference"] {
		grid-column: auto / span 1;
		grid-row: 3/4;
	}
	#page-products table.table tbody td[data-fieldname="goodDeal"],
	#page-products table.table tbody td[data-fieldname="visible"],
	#page-products table.table tbody td:last-of-type {
		display: none;
	}
	#page-products table.table tbody td[data-fieldname="family_name"] {
		grid-column: auto / span 3;
		grid-row: 2/3;
	}
}




/*=============================================
=            Produit (édition)            =
=============================================*/

#page-product .editObject section:nth-of-type(1) {
	grid-row: 1/5;
}

#page-product #fieldProductTitle {
	font-size: 1.7em;
}


/*----------  Prix  ----------*/


#page-product #productPrices .content {
	display: flex;
	align-items: flex-end;
}
#page-product #productPrices .content field {
	flex: 1;
}

#page-product #productPrices input,
#page-product #productPrices select,
#page-product #productPrices .content .mathSymbol {
	font-size: 2em;
	font-weight: 300;
	color: var(--color-main-medium);
}
#page-product #productPrices field.standard label {
	color: var(--color-main-high);
}
#page-product #productStock table tr td:nth-of-type(1) {
	width: 33%;
}
#page-product #productStock field {
	margin-bottom: 0;
	padding-top: 0;
}
#page-product #productStock input {
	text-align: center;
	font-size: 1.2em;
	font-weight: 300;
	color: var(--color-main-medium);
	margin-top: 0;
}
#page-product #productPrices select {
	direction: rtl;
	padding-top: 0;
}
#page-product #productPrices .content .mathSymbol {
	padding: 0 .5em 1em .5em;
	opacity: .7;
}



/* XL */
@media (max-width: 1439px) { 
	#page-product .editObject > section:nth-of-type(1) {
		grid-column: auto / span 2;
		grid-row: 1/2;
	}
	#page-product #productPhotos {
		grid-column: auto / span 2;
	}
}
/* XL modifié */
@media (max-width: 1345px) { 
	#page-product #productPrices {
		grid-column: auto / span 2;
	}
	#page-product .editObject > section:nth-of-type(6) {
		grid-column: auto / span 2;
	}
}
/* SM */
@media (max-width: 767px) {
	#page-product .editObject > section {
		grid-column: auto / span 1 !important;
	}
	#page-product #fieldProductTitle {
		font-size: 1.4em;
	}
}
/* XS */
@media (max-width: 575px) {
	#page-product #productPrices .content {
		display: block;;
	}
	#page-product #productPrices field {
		font-size: 1em;
	}
	#page-product #fieldProductTitle {
		font-size: 1.2em;
	}
	#page-product #productPrices .content .mathSymbol {
		display: none;
	}
}




/*=============================================
=            Boutique            =
=============================================*/
#page-shop .hasPageDesignMarker {
	display: flex;
	align-items: center;
}
#page-shop .hasPageDesignMarker input {
	flex: 1 0;
}
#page-shop field.standard .hasPageDesignMarker label,
#page-shop .editObject .hasPageDesignMarker h2,
#page-shop .editObject .hasPageDesignMarker legend {
	margin-bottom: 0;
}
#page-shop .editObject .hasPageDesignMarker h2 {
	margin-right: 0.3em;
}
#page-shop div.hasPageDesignMarker {
	margin-bottom: 0.5em;
}
#page-shop .pageDesignMarker {
	height: 1.5em;
	width: 1.5em;
	line-height: 1.5em;
	border-radius: 50%;
	text-align: center;
	background: rgba(0,0,0,.25);
	font-size: .8em;
	cursor: pointer;
	margin-left: .5em;
	cursor: help;
}
#page-shop field.standard label:not(.ck-voice-label) {
	color: var(--color-main-high);
	margin-bottom: 0.5em;
	display: block;
}
#page-shop #fieldDomainName {
	margin-top: 3em;
}
#page-shop .editObject section:nth-of-type(3) {
	grid-row: 2/4;
}
#page-shop imageUpload[data-type="logo"] {
	width: 13em;
	height: 13em;
}
#page-shop imageUpload[data-type="logo"] .imageUploadContainer {
	height: 13em !important;
	padding: var(--size-gap-main);
}
#page-shop imageUpload[data-type="banner"] {
	width: 100%;	
}
#page-shop #shopColors {
	display: grid;
	grid-template-columns: repeat(2,1fr);
}
#page-shop #shopColors legend {
	grid-column: auto / span 2;
}
#page-shop .input-color {
	display: flex;
	align-items: center;
}
#page-shop .input-color input {
	margin-top: 0;
}
#page-shop field.standard .input-color label {
	margin-left: 1em;
	margin-bottom: 0;
}
#page-shop #shopColors .hint {
	margin-top: 1em;
}

#page-shop #diaporama .hint {
	margin-top: 0;
	margin-bottom: 1em;
}

#page-shop #diaporama imageUpload .default {
	display: none;
}

#page-shop #openingsHours {
	width: 100%;
}
#page-shop #openingsHours thead th span {
	font-weight: 400;
	font-size: .7em;
}
#page-shop #openingsHours th,
#page-shop #openingsHours td {
	text-align: center;
	padding: .5em .2em;
	border-top: 1px solid rgba(0,0,0,.1);
	border-bottom: 1px solid rgba(0,0,0,.1);
}
#page-shop #openingsHours th {
	border-top: none;
}
#page-shop #openingsHours tr:last-of-type td {
	border-bottom: none;
}
#page-shop #openingsHours td:first-of-type {
	text-align: left;
}
#page-shop #openingsHours tr.disabled {
	opacity: .5;
}
#page-shop #openingsHours tr td:nth-child(4),
#page-shop #openingsHours tr td:nth-child(6) {
	display: flex;
	align-items: center;
	justify-content: center;
}
#page-shop #openingsHours tr td:nth-child(4) input[type=checkbox],
#page-shop #openingsHours tr td:nth-child(6) input[type=checkbox] {
	margin-right: 1em;
}
#page-shop #openingsHours tr td:nth-child(5),
#page-shop #openingsHours tr td:nth-child(6) {
	opacity:1;
}

#page-shop #openingsHours tr.allDay td:nth-child(5),
#page-shop #openingsHours tr.allDay td:nth-child(6) {
	opacity:0!important;
}
#page-shop #openingsHours tr.disabled input {
	color: var(--color-main-disabled) !important;
}

#page-shop #shopDelivery {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	column-gap: var(--size-gap-main-double);
	align-items: end;
}
#page-shop #shopDelivery legend {
	grid-column: auto / span 2;
}
#page-shop #shopPickup {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	column-gap: var(--size-gap-main-double);
}
#page-shop #shopPickup legend {
	grid-column: auto / span 2;
}

#pageDesign img {
	cursor: pointer;
	max-width: 100%;
}

/* XL */
@media (max-width: 1439px) { 
	#page-shop .editObject section:nth-of-type(3) {
		grid-column: auto / span 2;
		grid-row: auto;
	}
	#page-shop .editObject section:nth-of-type(3) .content {
		display: grid;
		grid-template-columns: repeat(2,1fr);
		column-gap: var(--size-gap-main-double);
	}
	

	#page-shop .editObject section:nth-of-type(4),
	#page-shop .editObject section:nth-of-type(5),
	#page-shop .editObject section:nth-of-type(6),
	#page-shop .editObject section:nth-of-type(7) {
		grid-column: auto / span 2;
	}
}
/* LG */
@media (max-width: 1199px) { 
	#page-shop .editObject,
	#page-shop .editObject section:nth-of-type(3) .content {
		grid-template-columns: 1fr;
	}
	#page-shop .editObject > section {
		grid-column: auto / span 1 !important;
	}
}	
/* MD */
@media (max-width: 991px) {

}
/* SM */
@media (max-width: 767px) {
	#page-shop #shopPickup {
		grid-template-columns: 1fr;
	}
	#page-shop #shopPickup > * {
		grid-column: auto / span 1;
	}
}
/* XS */
@media (max-width: 575px) {
	#page-shop .editObject {
		row-gap: calc(var(--size-gap-main) * 3);
	}
	#page-shop #shopColors {
		display: block;
	}
	#page-shop #openingsHours thead {
		display: none;
	}
	#page-shop #openingsHours tbody tr {
		display: grid;
		grid-template-columns: 1fr 2fr;
	}
	#page-shop #openingsHours tbody td {
		text-align: left !important;
	}
	#page-shop #openingsHours tr td:nth-of-type(4)::before { content: "Matin"; }
	#page-shop #openingsHours tr td:nth-of-type(6)::before { content: "Après-midi"; }

	#page-shop #openingsHours tbody td:before {
		display: block;
		font-size: 0.8em;
		opacity: .6;
		flex-basis: 100%;
	}
	#page-shop #openingsHours tr td:nth-child(4),
	#page-shop #openingsHours tr td:nth-child(6) {
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	#page-shop #openingsHours tr td:nth-of-type(1) {
		grid-row: 1/3;
	}
	#page-shop #openingsHours tr td:nth-of-type(4) {
		grid-row: 1/2;
		border-bottom: none;
	}
	#page-shop #openingsHours tr td:nth-of-type(5) {
		display: none;
	}
	#page-shop #openingsHours tr td:nth-of-type(6) {
		grid-row: 2/3;
	}

	#page-shop #shopSocials .content {
		display: block;
	}
}

/*=============================================
=            Commandes (liste)            =
=============================================*/

#page-orders table.table tbody tr td:first-of-type,
#page-ordersFinalised table.table tbody tr td:first-of-type {
	color: var(--color-order-shipping);
	position: relative;
	text-indent: -9999px;
	/* color: var(--color-main-disabled); */
}
#page-orders table.table tbody tr td:first-of-type::before,
#page-ordersFinalised table.table tbody tr td:first-of-type::before {
	/* content: "\f111"; */
	content: '\f0d1';
	font-family: var(--font-icons);
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	font-weight: 700;
	text-indent: 0;
	transform: translate(-50%,-50%);
}
#page-orders table.table tbody tr.isPickup td:first-of-type::before,
#page-ordersFinalised table.table tbody tr.isPickup td:first-of-type::before {
	color: var(--color-order-pickup);
	content: '\f54e';
}
#page-orders table.table tbody tr.isEmail td:first-of-type::before,
#page-ordersFinalised table.table tbody tr.isEmail td:first-of-type::before {
	color: var(--color-order-pickup);
	content: '\f0e0';
}

/*
#page-orders #shipperTypeExplanation {
	display: flex;
	font-size: .75em;
	padding-left: 0;
}
#page-orders #shipperTypeExplanation li {
	margin-right: 2em;
}
#page-orders #shipperTypeExplanation li i {
	margin-right: .5em;
}
#page-orders #shipperTypeExplanation li.isShipping i {
	color: var(--color-order-shipping);
}
#page-orders #shipperTypeExplanation li.isPickup i {
	color: var(--color-order-pickup);
}
*/
#page-orders .pageFooter {
	display: none;
}

/* MD */
@media (max-width: 991px) {
	#page-orders table.table tbody tr {
		grid-template-columns: 15% repeat(2,1fr);
	}
	#page-orders table.table tbody td[data-fieldname="creationDate"]:before { content: "Date : "; }
	#page-orders table.table tbody td[data-fieldname="prices_TTC"]:before { content: "Montant : "; }

	#page-orders table.table tbody td[data-fieldname="shipper_type"] {
		grid-row: 1/4;
	}
	/* loupe */
	#page-orders table.table tbody td[data-rowactions] {
		display: none;
	}
	#page-orders table.table tbody td[data-fieldname="number"] {
		grid-column: auto / span 1;
		grid-row: 1/2;
		font-weight: 700;
		font-size: 1.2em;
	}
	#page-orders table.table tbody td[data-fieldname="customer_name"] {
		grid-column: auto / span 1;
		grid-row: 1/2;
		font-size: 1.2em;
	}
	#page-orders table.table tbody td[data-fieldname="creationDate"] {
		grid-column: auto / span 1;
		grid-row: 2/3;
	}
	#page-orders table.table tbody td[data-fieldname="prices_TTC"] {
		grid-column: auto / span 1;
		grid-row: 2/3;
	}
	#page-orders table.table tbody td[data-fieldname="status_text"] {
		grid-column: auto / span 2;
		grid-row: 3/4;
		font-size: .8em;
	}
}
/* SM */
@media (max-width: 767px) {
	#page-orders table.table tbody td[data-fieldname="shipper_type"] {
		grid-row: 1/5;
	}
	#page-orders table.table tbody td[data-fieldname="number"] {
		grid-column: auto / span 2;
		grid-row: 1/2;
		padding-bottom: 0;
	}
	#page-orders table.table tbody td[data-fieldname="customer_name"] {
		grid-column: auto / span 2;
		grid-row: 2/3;
		padding-top: 0;
		font-size: 1.05em;
	}
	#page-orders table.table tbody td[data-fieldname="creationDate"] {
		grid-column: auto / span 1;
		grid-row: 3/4;
	}
	#page-orders table.table tbody td[data-fieldname="prices_TTC"] {
		grid-column: auto / span 1;
		grid-row: 3/4;
	}
	#page-orders table.table tbody td[data-fieldname="status_text"] {
		grid-column: auto / span 2;
		grid-row: 4/5;
	}
}

/*=============================================
=            Commandes à livrer (liste)            =
=============================================*/
/* MD */
@media (max-width: 991px) {
	#page-ordersShipping table.table tbody tr {
		grid-template-columns: repeat(2,1fr);
	}
	#page-ordersShipping table.table tbody td[data-fieldname="creationDate"]:before { content: "Date : "; }
	#page-ordersShipping table.table tbody td[data-fieldname="prices_TTC"]:before { content: "Montant : "; }

	/* loupe */
	#page-ordersShipping table.table tbody td[data-rowactions] {
		display: none;
	}
	#page-ordersShipping table.table tbody td[data-fieldname="number"] {
		grid-column: auto / span 1;
		font-weight: 700;
		font-size: 1.2em;
	}
	#page-ordersShipping table.table tbody td[data-fieldname="customer_name"] {
		grid-column: auto / span 1;
		font-size: 1.2em;
	}
	#page-ordersShipping table.table tbody td[data-fieldname="creationDate"] {
		grid-column: auto / span 1;
	}
	#page-ordersShipping table.table tbody td[data-fieldname="prices_TTC"] {
		grid-column: auto / span 1;
	}
	#page-ordersShipping table.table tbody td[data-fieldname="status_text"] {
		grid-column: auto / span 2;
		font-size: .8em;
	}
}
/* XS */
@media (max-width: 575px) {
	#page-ordersShipping table.table tbody td[data-fieldname="number"] {
		grid-column: auto / span 2;
		padding-bottom: 0;
	}
	#page-ordersShipping table.table tbody td[data-fieldname="customer_name"] {
		grid-column: auto / span 2;
		padding-top: 0;
		font-size: 1.05em;
	}
}

/*=============================================
=            Commandes retrait (liste)            =
=============================================*/
/* MD */
@media (max-width: 991px) {
	#page-ordersPickup table.table tbody tr {
		grid-template-columns: repeat(3,1fr);
	}
	/* #page-ordersPickup table.table tbody td[data-fieldname="number"]:before { content: "Numéro de commande : "; } */
	/* #page-ordersPickup table.table tbody td[data-fieldname="customer_name"]:before { content: "Client : "; } */
	#page-ordersPickup table.table tbody td[data-fieldname="creationDate"]:before { content: "Date : "; }
	#page-ordersPickup table.table tbody td[data-fieldname="prices_TTC"]:before { content: "Montant : "; }
	/* #page-ordersPickup table.table tbody td[data-fieldname="status_text"]:before { content: "Statut : "; } */
	#page-ordersPickup table.table tbody td[data-fieldname="pickup_dateTime"]:before { content: "Rendez-vous : "; }

	/* loupe */
	#page-ordersPickup table.table tbody td[data-rowactions] {
		display: none;
	}

	#page-ordersPickup table.table tbody td[data-fieldname="number"] {
		grid-column: auto / span 1;
		grid-row: 1/2;
		font-weight: 700;
		font-size: 1.2em;
	}
	#page-ordersPickup table.table tbody td[data-fieldname="customer_name"] {
		grid-column: auto / span 2;
		grid-row: 1/2;
		font-size: 1.2em;
	}
	#page-ordersPickup table.table tbody td[data-fieldname="creationDate"] {
		grid-column: auto / span 1;
		grid-row: 2/3;
	}
	#page-ordersPickup table.table tbody td[data-fieldname="prices_TTC"] {
		grid-column: auto / span 1;
		grid-row: 2/3;
	}
	#page-ordersPickup table.table tbody td[data-fieldname="status_text"] {
		grid-column: auto / span 3;
		font-size: .8em;
		grid-row: 3/4;
	}
	#page-ordersPickup table.table tbody td[data-fieldname="pickup_dateTime"] {
		grid-column: auto / span 1;
		grid-row: 2/3;
	}
}
/* XS */
@media (max-width: 575px) {
	#page-ordersPickup table.table tbody tr {
		grid-template-columns: repeat(2,1fr);
	}
	#page-ordersPickup table.table tbody td[data-fieldname="number"] {
		grid-column: auto / span 2;
		grid-row: 1/2;
		padding-bottom: 0;
	}
	#page-ordersPickup table.table tbody td[data-fieldname="customer_name"] {
		grid-column: auto / span 2;
		grid-row: 2/3;
		font-size: 1.05em;
		padding-top: 0;
	}
	#page-ordersPickup table.table tbody td[data-fieldname="creationDate"] {
		display: none;
	}
	#page-ordersPickup table.table tbody td[data-fieldname="prices_TTC"] {
		grid-row: 3/4;
	}
	#page-ordersPickup table.table tbody td[data-fieldname="status_text"] {
		grid-column: auto / span 2;
		grid-row: 4/5;
	}
	#page-ordersPickup table.table tbody td[data-fieldname="pickup_dateTime"] {
		grid-column: auto / span 1;
		grid-row: 3/4;
	}
}


/*=============================================
=            Commandes finalisées (liste)            =
=============================================*/
/* MD */
@media (max-width: 991px) {
	#page-ordersFinalised table.table tbody tr {
		grid-template-columns: 15% repeat(2,1fr);
	}
	/* #page-orders table.table tbody td[data-fieldname="number"]:before { content: "Numéro de commande : "; } */
	/* #page-orders table.table tbody td[data-fieldname="customer_name"]:before { content: "Client : "; } */
	#page-ordersFinalised table.table tbody td[data-fieldname="creationDate"]:before { content: "Date : "; }
	#page-ordersFinalised table.table tbody td[data-fieldname="prices_TTC"]:before { content: "Montant : "; }

	#page-ordersFinalised table.table tbody td[data-fieldname="shipper_type"] {
		grid-row: 1/4;
	}
	/* loupe */
	#page-ordersFinalised table.table tbody td[data-rowactions] {
		display: none;
	}
	#page-ordersFinalised table.table tbody td[data-fieldname="number"] {
		grid-column: auto / span 1;
		grid-row: 1/2;
		font-weight: 700;
		font-size: 1.2em;
	}
	#page-ordersFinalised table.table tbody td[data-fieldname="customer_name"] {
		grid-column: auto / span 1;
		grid-row: 1/2;
		font-size: 1.2em;
	}
	#page-ordersFinalised table.table tbody td[data-fieldname="creationDate"] {
		grid-column: auto / span 1;
		grid-row: 2/3;
	}
	#page-ordersFinalised table.table tbody td[data-fieldname="prices_TTC"] {
		grid-column: auto / span 1;
		grid-row: 2/3;
	}
}
/* SM */
@media (max-width: 767px) {
	#page-ordersFinalised table.table tbody td[data-fieldname="shipper_type"] {
		grid-row: 1/5;
	}
	#page-ordersFinalised table.table tbody td[data-fieldname="number"] {
		grid-column: auto / span 2;
		grid-row: 1/2;
		padding-bottom: 0;
	}
	#page-ordersFinalised table.table tbody td[data-fieldname="customer_name"] {
		grid-column: auto / span 2;
		grid-row: 2/3;
		padding-top: 0;
		font-size: 1.05em;
	}
	#page-ordersFinalised table.table tbody td[data-fieldname="creationDate"] {
		grid-column: auto / span 1;
		grid-row: 3/4;
	}
	#page-ordersFinalised table.table tbody td[data-fieldname="prices_TTC"] {
		grid-column: auto / span 1;
		grid-row: 3/4;
	}
}


/*=============================================
=            Commande            =
=============================================*/
#page-order .introduction {
	display: grid;
	grid-template-columns: 1fr 2fr;
	column-gap: var(--size-gap-main-double);
	row-gap: var(--size-gap-main);
	margin-bottom: var(--size-gap-main-double);
}
#page-order .introduction table {
	margin-bottom: 2em;
}
#page-order table:not(.table) th {
	text-align: left;
	padding-right: 1em;
	/* padding-top: .2em; */
	padding-bottom: .4em;
}
#page-order table:not(.table) th,
#page-order table:not(.table) td {
	vertical-align: top;
}
#page-order #btnPrintOrder {
	margin-top: 0.5em;
}
#page-order #customerComment .title {
	margin-bottom: 1em;
	font-weight: 700;
}
#page-order #customerComment .content {
	font-size: .9em;
}

#page-order #orderStatus ul {
	display: flex;
	margin-bottom: 2em;
	padding-left: 0;
	margin-top: 0;
}
#page-order #orderStatus ul li:first-of-type {
	display: none;
}
#page-order #orderStatus ul li {
	flex: 1 0;
	text-align: center;
	border-bottom: 2px solid rgb(0,0,0,var(--opacity-text-disabled));
	padding: 0 .5em 1em;
	font-size: .88em;
	position: relative;
}
#page-order #orderStatus ul li::after {
	content: '\f111';
	font-family: var(--font-icons);
	font-weight: 400;
	display: block;
	position: absolute;
	bottom: calc(1.15em / -2);
	line-height: 1em;
	left: calc(50% - 1em / 2);
	background: white;
}
#page-order #orderStatus ul li:not(.completed):not(.selected):hover {
	color: var(--color-main-high);
	font-weight: 700;
	cursor: pointer;
}
#page-order #orderStatus ul li.selected,
#page-order #orderStatus ul li.completed {
	border-bottom-color: var(--color-primary-700);
	color: var(--color-primary-700);
}
#page-order #orderStatus ul li.selected {
	font-weight: 700;
}
#page-order #orderStatus ul li.selected::after,
#page-order #orderStatus ul li:hover::after {
	content: '\f192';
}
#page-order #orderStatus ul li.completed::after {
	content: '\f058';
	color: var(--color-primary-700);
}
#page-order #orderStatusSelectContainer {
	display: none;
	font-size: .88em;
}

#page-order .editObject {
	column-gap: var(--size-gap-main-double);
	row-gap: var(--size-gap-main-double);
}
#page-order .editObject section {
	border: none;
	padding: 0 0 2em;
}
#page-order section h2 {
	font-size: 1.2em;
	color: var(--color-primary-700);
}
#page-order #orderContent {
	grid-column: auto / span 2;;
}

#page-order #orderContent tbody td:first-of-type {
	text-align: left;
}
#page-order #orderContent thead th div,
#page-order #orderContent tfoot th,
#page-order #orderContent td {
	padding: .8em 1em;
}
#page-order #orderContent table.table tbody td {
	border-left: none;
	border-right: none;
}
#page-order #orderContent tfoot tr:last-of-type td {
	font-weight: 700;
}
#page-order #orderContent thead th:nth-of-type(2),
#page-order #orderContent thead th:nth-of-type(3),
#page-order #orderContent thead th:nth-of-type(4) {
	width: 18%;
}
#page-order #orderContent tfoot th {
	text-align: right;
}
#page-order #transactionID td {
	word-break: break-all;
}

#page-order .unpaidOrderMessage {
	background: var(--color-alert-danger);
	color: white;
	padding: 1em 1.5em;
	border-radius: 5px;
	display: inline-flex;
	align-items: center;
}
#page-order .unpaidOrderMessage .illustration {
	font-size: 2em;
	margin-right: 0.5em;
}
#page-order .unpaidOrderMessage .title {
	font-size: 1.3em;
	font-weight: 700;
}

/* XL */
@media (max-width: 1439px) { 
	#page-order .introduction {
		grid-template-columns: 2fr 3fr;
	}
}
/* LG */
@media (max-width: 1199px) { 
	#page-order .introduction {
		grid-template-columns: 1fr;
	}
	#page-order #orderStatus {
		grid-row: 1/2;
	}
	#page-order #orderMainInfos {
		grid-row: 2/3;
		
		display: grid;
		grid-template-columns: repeat(2,1fr);
		column-gap: var(--size-gap-main-double);
	}
}
/* MD */
@media (max-width: 991px) {
	#page-order .introduction {
		display: flex;
	}
	#page-order #orderMainInfos {
		flex: 1 0;
		margin-right: 1em;
		display: block;
	}
	#page-order #orderStatus ul {
		flex-direction: column;
	}
	#page-order #orderStatus ul li {
		border-bottom: none;
		border-left: 2px solid rgb(0,0,0,var(--opacity-text-disabled));
		padding: .75em .5em .75em 2em;
		text-align: left;
	}
	#page-order #orderStatus ul li::after {
		left: calc(1.15em / -2);
		bottom: calc(50% - 1em / 2);
	}
	#page-order #orderStatus ul li.selected,
	#page-order #orderStatus ul li.completed {
		border-left-color: var(--color-primary-700);
	}
	#page-order .editObject {
		grid-template-columns: repeat(2,1fr);
	}
	#page-order #orderContent table thead th {
		display: table-cell;
	}
	#page-order #payment tr {
		display: block;
	}
	#page-order #payment tr:nth-of-type(2) td {
		display: block;
	}

	
}

/* SM */
@media (max-width: 767px) {
	#page-order #orderMainInfos {
		font-size: .88em;
	}
	#page-order #orderMainInfos table {
		margin-bottom: .5em;
	}
	#page-order #orderMainInfos tr {
		display: flex;
		flex-direction: column;
		margin-bottom: 0.5em;
	}
	#page-order #orderMainInfos th {
		padding-bottom: 0;
	}
	#page-order #customerComment .title {
		margin-bottom: 0.5em;
	}
	#page-order #orderContent {
		grid-column: auto / span 1;
	}
	#page-order #orderContent table thead th {
		display: none;
	}
	#page-order #orderContent table tbody tr {
		border-top: 1px solid rgba(0,0,0,.07);
		display: grid;
		grid-template-columns: repeat(3,1fr);
	}
	#page-order #orderContent table tbody td:nth-of-type(1) {
		grid-column: auto / span 3;
		padding-bottom: 0;
	}
	#page-order #orderContent table tbody td:nth-of-type(2)::before { content: "P.U TTC"; }
	#page-order #orderContent table tbody td:nth-of-type(3)::before { content: "Qté"; }
	#page-order #orderContent table tbody td:nth-of-type(4)::before { content: "Total TTC"; }
	
	#page-order #orderContent table tbody td::before {
		display: block;
		font-size: 0.8em;
		opacity: .6;
	}

	#page-order #orderContent table tfoot tr {
		display: flex;
		justify-content: flex-end;
	}
	#page-order #orderContent table tfoot th,
	#page-order #orderContent table tfoot td {
		border: none;
		padding: 0.5em 1em;
	}
	#page-order #orderContent table tfoot td {
		min-width: 20%;
	}
	#page-order #orderContent table tfoot td.disabled {
		display: none;
	}
	#page-order .editObject {
		grid-template-columns: 1fr;
	}
	#page-order .editObject section {
		padding-bottom: 0;
	}
	
}

/* XS */
@media (max-width: 575px) {
	#page-order .introduction {
		flex-direction: column;
	}
	
	#page-order #orderMainInfos tr {
		display: table-row;
	}
	#page-order #orderStatus > div ul {
		display: none;
	}
	#page-order #orderStatusSelectContainer {
		display: block;
	}
	#page-order #orderStatusSelectContainer span {
		font-weight: 700;
		margin: 0 0.5em 0.5em 0;
		display: inline-block;
	}
	#page-order #orderStatusSelectContainer select {
		padding-right: 2em;
	}
	#page-order #orderStatusSelectContainer option {
		font-size: 1em;
	}
	
}
/* print */
@media print {
    
}


/*=============================================
=            Clients (liste)            =
=============================================*/

/* MD */
@media (max-width: 991px) {
	#page-customers table.table tbody tr {
		grid-template-columns: 3fr 2fr;
		
	}
	#page-customers table.table tbody td[data-fieldname="name"] {
		grid-row: 1/3;
		font-weight: 700;
		font-size: 1.05em;
	}
}
/* XS */
@media (max-width: 575px) {
	#page-customers table.table tbody tr {
		grid-template-columns: 1fr;
		
	}
	#page-customers table.table tbody td[data-fieldname="name"] {
		grid-row: 1/2;
	}
	#page-customers table.table tbody td[data-fieldname="login"]::before { content: "E-mail"; }
	#page-customers table.table tbody td[data-fieldname="phone"]::before { content: "Téléphone"; }
}



/*=============================================
=            Catégories (liste)           =
=============================================*/
#page-productFamilies .pageIntroduction {
	margin-bottom: 2em;
}
#page-productFamilies .content ul {
	padding-left: 0;
	/* display: table; */
	border-collapse: collapse;
	display: flex;
	flex-direction: column;
	align-content: center;
}
#page-productFamilies ul#rootFamily {
	overflow: hidden;
}
#page-productFamilies .content ul ul {
	margin-left: 2em;
}
#page-productFamilies .content li {
	border-top: 1px solid rgba(0,0,0,.2);
	position: relative;
}
#page-productFamilies ul#rootFamily > li:last-of-type {
	border-bottom: 1px solid rgba(0,0,0,.2);
}
#page-productFamilies .content li:nth-of-type(odd) {
	background: rgba(0,0,0,.02);
}
#page-productFamilies .content li > div {
	padding: 1em;
	display: flex;
	align-items: center;
}
#page-productFamilies .content li img {
	border-radius: 50%;
	margin-right: 1em;
	max-width: 2em;
}
#page-productFamilies .name {
	flex: 1 0;
}
#page-productFamilies .content li > div:hover {
	background: rgba(0,0,0,.05);
}
#page-productFamilies .content li[draggable=true] > div:active {
	background: var(--color-secondary-200);
}
#page-productFamilies .btnMove {
	margin-right: 1em;
	cursor: pointer;
}
#page-productFamilies li .actions {
	font-size: .8em;
	display: flex;
	justify-content: flex-end;
}
#page-productFamilies li .actions span {
	margin: 0 .5em;
	color: var(--color-primary-700);
	cursor: pointer;
	padding: .5em;
	text-align: center;
}
#page-productFamilies li .actions span:hover {
	color: var(--color-primary-900);
}

/* SM */
@media (max-width: 767px) {
	#page-productFamilies .pageIntroduction {
		font-size: .8em;
	}
	#page-productFamilies .content li > div {
		flex-wrap: wrap;
		padding: .5em;
	}
	#page-productFamilies .name {
		flex: 1 1;
	}
	#page-productFamilies li .actions {
		flex-basis: 100%;
	}
	
}
/* XS */
@media (max-width: 575px) {
	#page-productFamilies .pageIntroduction {
		display: none;
	}
	#page-productFamilies li .actions {
		font-size: .7em;
	}
}

/*=============================================
=            Catégorie (édition)            =
=============================================*/
#page-family .editObject {
	grid-template-columns: 2fr 1fr;
}
#page-family #fieldFamilyTitle {
	font-size: 1.7em;
}
#page-family imageUpload {
	width: 18.5em;
	height: 18.5em;
}
#page-family .imageUploadContainer {
	height: 100% !important;
	padding: .5em;
}
#page-family imageUpload img {
	border-radius: 50%;
}
/* LG */
@media (max-width: 1199px) { 
	#page-family .editObject {
		grid-template-columns: 3fr 2fr;
	}
}
/* MD */
@media (max-width: 991px) {
	#page-family .editObject {
		grid-template-columns: repeat(2,1fr);
	}
	#page-family .editObject > section:first-of-type {
		grid-column: auto / span 2;
	}
}
/* SM */
@media (max-width: 767px) {
	#page-family .editObject {
		grid-template-columns: 1fr 2fr;
	}
	#page-family #fieldFamilyTitle {
		font-size: 1.4em;
	}
	#page-family imageUpload {
		width: 100%;
		height: 100%;
	}
}
/* XS */
@media (max-width: 575px) {
	#page-family .editObject {
		grid-template-columns: 1fr;
	}
	#page-family .editObject > section:first-of-type {
		grid-column: auto / span 1;
	}
	#page-family #fieldFamilyTitle {
		font-size: 1.2em;
	}
	#page-family imageUpload {
		width: 15em;
		height: 15em;
	}
}


/*=============================================
=            Paiements            =
=============================================*/

#page-payment.container {
	grid-template-rows: repeat(2,1fr);
}

#page-payment #paymentList {
	grid-column: auto / span 8;
}
#page-payment #paymentList table tbody td:nth-of-type(2),
#page-payment #paymentList table tbody td:nth-of-type(4){
	text-align: center;
}


#page-payment #paymentInfos {
	grid-column: auto / span 4;
}
#page-payment .editObject > section {
	grid-column: auto / span 2;
	border: none;
	padding: 1em 0;
}
#page-payment .editObject ul {
	padding-left: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
}
#page-payment #paymentAmount li {
	flex: 1 0;
	display: flex;
	flex-direction: column;
}
#page-payment #paymentAmount li legend {
	flex: 1 0;
}
#page-payment #paymentAmount li:not(.total) {
	font-size: .6em;
}
#page-payment #paymentAmount li:not(.total) legend {
	color: rgba(0,0,0,.5);
}
#page-payment #paymentAmount li.total {
	flex: 1 0 100%;
}
#page-payment .paymentValue {
	font-size: 2.5em;
	margin-bottom: .5em;
}
#page-payment .warning {
	background: var(--color-secondary-200);
	padding: 1em;
	margin-top: 2em;
	display: flex;
	font-size: .9em;
}
#page-payment .warning i {
	margin-right: .8em;
	position: relative;
	top: 0.1em;
}



/*=============================================
=            Mon profil / user            =
=============================================*/

#page-user #frameworkRelation .content fieldset .fields {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	column-gap: var(--size-gap-main-double);
}
#page-user #frameworkRelation ul {
	padding-left: 0;
}
#page-user #frameworkRelation fieldset .hint {
	margin-top: 0;
	margin-bottom: 1em;
}
#page-user #subscriptionValidation li {
	margin-bottom: 0.3em;
}
#page-user #subscriptionValidation li::before {
	content: "\f058";
	font-family: var(--font-icons);
	margin-right: 1em;
	display: inline-block;
}
#page-user #subscriptionValidation li.success::before {
	content: "\f058";
	color: var(--color-alert-success)
}
#page-user #subscriptionValidation li.error::before {
	content: "\f057";
	color: var(--color-alert-danger);
}

/* XS */
@media (max-width: 575px) {
	#page-user #frameworkRelation .content fieldset .fields {
		display: block;
	}
}



/*=============================================
=            Dashboard            =
=============================================*/
#page-dashboard > section {
	/* text-align: center; */
	display: flex;
	/* align-items: center; */
	justify-content: center;
	flex-wrap: wrap;
	height: 100%;
	flex-direction: column;
}
#page-dashboard > section h2 {
	font-weight: 300;
	margin: .5em 0;
	font-size: 1.2em;
	color: rgba(0,0,0,.5);
}

#page-dashboard #welcome {
	grid-column: auto / span 12;
	position: relative;
	border: 1px solid var(--color-primary-300);
	box-shadow: 0 0 5px 0 rgba(0,0,0,.1);
}
#page-dashboard #welcome .close {
	position: absolute;
	right: 1em;
	top: 1em;
}
#page-dashboard .content {
	display: flex;
	align-items: center;
}
#page-dashboard .illustration {
	flex: 0;
	margin-right: 2em;
}
#page-dashboard .illustration img {
	width: 200px;
}
#page-dashboard .description {
	flex: 1 0;
}
#page-dashboard > section#welcome h2 {
	font-size: 2em;
}
#page-dashboard ul {
	padding: 0;
}
#page-dashboard li {
	margin-bottom: 0.5em;
	display: flex;
}
#page-dashboard li i {
	margin-right: 1em;
	width: 1em;
	text-align: center;
}
#page-dashboard #welcome a {
	cursor: pointer;
	color: var(--color-primary-700);
	transition: all .1s ease-in-out;
}
#page-dashboard #welcome a:hover {
	color: var(--color-primary-900);
	text-decoration: none;
}
/* SM */
@media (max-width: 767px) {
	#page-dashboard > section#welcome h2 {
		font-size: 1.4em;
	}
}
/* XS */
@media (max-width: 575px) {
	#page-dashboard .content {
		flex-direction: column;
	}
	#page-dashboard .illustration {
		margin-top: 1em;
	}
	#page-dashboard .illustration img {
		max-width: 100px;
	}
	#page-dashboard > section#welcome {
		padding: 1em;
	}
	#page-dashboard > section#welcome h2 {
		text-align: center;
	}
}

#page-dashboard .kpi {
	grid-column: auto / span 3;
	display: flex;
	flex-direction: row;
	align-items: center;
	overflow: hidden;
}
#page-dashboard .kpi * {
	transition: all .35s ease-out;
}

#page-dashboard .kpi .illustration {
	flex-basis: 33%;
}
#page-dashboard.hideBeforeLoad .kpi .illustration i {
	transform: scale(.8) rotate3d(0, 1, 0, 180deg);
}
#page-dashboard .kpi .illustration i {
	font-size: 2em;
	color: var(--color-primary-500);
	background: white;
	width: 2.5em;
	height: 2.5em;
	line-height: 2.5em;
	margin: 0 0.5em;
	border-radius: 50%;
	text-align: center;
	border: 2px solid var(--color-primary-500);
	transform: scale(1) rotate3d(0, 1, 0, 0deg)
}
#page-dashboard section.kpi:nth-of-type(even) .illustration  i {
	color: var(--color-secondary-500);
	border-color: var(--color-secondary-500);
}
#page-dashboard.hideBeforeLoad .kpi .content {
	transform: translateX(10em);	
	opacity: .5;
}
#page-dashboard .kpi .content,
#page-dashboard .kpi .content .page {
	flex: 1 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	transform: translateX(0);
	opacity: 1;
	color: var(--color-primary-500);
}

#page-dashboard section.kpi:nth-of-type(even) .content {
	color: var(--color-secondary-500);
}

#page-dashboard .kpi .number {
	font-size: 2.5em;
	font-weight: 700;
	color: var(--color-main-medium);
}

#page-dashboard .kpi .pager {
	margin: 0 2em 0;
	padding-left: 0;
	font-size: .3em;
}
#page-dashboard .kpi .pager li {
	margin: .5em 0;
	cursor: pointer;
	opacity: .3;
	color: rgba(0,0,0,.4);
	padding: 1em;
}
#page-dashboard .kpi .pager li.active {
	opacity: 1;
	color: var(--color-primary-500);
}

#page-dashboard section#ordersDate .content {
	height: 5.5em;
	overflow: hidden;
	position: relative;
}
#page-dashboard section#ordersDate .content .page {
	position: absolute;
	width: 100%;
	opacity: 0;
	margin-top: -15em;
	transition: all .75s linear;
	cursor: pointer;
}
#page-dashboard section#ordersDate .content .page.active {
	opacity: 1;
	transition: all .75s ease-out;
	margin-top: 0;
}
#page-dashboard section#ordersDate .turnover {
	font-size: .8em;
	margin-top: 0.3em;
}


#page-dashboard section#canvasMiniStatsSection {
	grid-column: auto / span 4;
	min-width:0;
}

#page-dashboard #mostSoldProducts {
	grid-column: auto / span 4;
	justify-content: flex-start;
}

#page-dashboard section#mostViewedProducts {
	grid-column: auto / span 4;
	justify-content: flex-start;
}
#page-dashboard .noData {
	width: 100%;
	opacity: .25;
	padding: 1em 0;
}
#page-dashboard table.dashboardTable {
	width: 100%;
}
#page-dashboard table.dashboardTable thead th {
	font-size: .8em;
	padding-bottom: .8em;
}
#page-dashboard table.dashboardTable tbody tr:nth-of-type(odd) {
	background: rgba(0,0,0,.025);
}
#page-dashboard table.dashboardTable td {
	padding: .5em 1em;
}
#page-dashboard table.dashboardTable td.product {
	display: flex;
	align-items: center;
}
#page-dashboard table.dashboardTable td.product img {
	margin-right: 1em;
	border: 1px solid rgba(0,0,0,.1);
	border-radius: 5px;
}
#page-dashboard table.dashboardTable td.nbView {
	text-align: center;
}


#page-dashboard #averageCart {
	grid-column: auto / span 4;
	align-items: center;
}
#page-dashboard #averageCart .illustration {
	font-size: 2em;
	color: var(--color-primary-500);
}
#page-dashboard #averageCart .amount {
	font-size: 2em;
	font-weight: 700;
	padding: 0.2em 0 .1em;
}
#page-dashboard #averageCart .amount .tax {
	font-size: .5em;
}
#page-dashboard #averageCart .legend {
	font-size: .8em;
	color: var(--color-main-disabled);
}


#page-dashboard #currentSubscription {
	grid-column: auto / span 4;
	align-items: flex-start;
	justify-content: flex-start;
}
#page-dashboard #currentSubscription .content {
	width: 100%;
	display: grid;
	justify-content: center;
	grid-template-columns: repeat(2,1fr);
	gap: var(--size-gap-main-double);
}
#page-dashboard #currentSubscription .current {
	border: 1px solid var(--color-primary-500);
	padding: 1em;
	border-radius: .5em;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	color: var(--color-primary-700);
}
#page-dashboard #currentSubscription .offerTitle {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 1.5em;
	text-align: center;
}
#page-dashboard #currentSubscription .offerPeriod {
	font-size: .8em;
	text-align: center;
}
#page-dashboard #currentSubscription .next .title {
	font-weight: 700;
	text-align: center;
}
#page-dashboard #currentSubscription .next .price {
	font-size: .85em;
	margin-bottom: 1em;
	text-align: center;
}
#page-dashboard #currentSubscription .specifications {
	margin: 0;
	padding: 0;
	margin-bottom: 1em;
}
#page-dashboard #currentSubscription .specifications li {
	display: flex;
	font-size: .8em;
}
#page-dashboard #currentSubscription .specifications li::before {
	content: '\f04b';
	font-family: var(--font-icons);
	font-weight: 900;
	margin-right: 1em;
	font-size: .5em;
	margin-top: 0.5em;
}

#page-dashboard #currentSubscription .next .btn {
	display: block;
}


/* temp */
#page-dashboard > section.col1 {
	grid-column: auto / span 1;
}
#page-dashboard > section.col2 {
	grid-column: auto / span 2;
}
#page-dashboard > section.col3 {
	grid-column: auto / span 3;
}
#page-dashboard > section.col4 {
	grid-column: auto / span 4;
}
#page-dashboard > section.col5 {
	grid-column: auto / span 5;
}
#page-dashboard > section.col6 {
	grid-column: auto / span 6;
}
#page-dashboard > section.col7 {
	grid-column: auto / span 7;
}
#page-dashboard > section.col8 {
	grid-column: auto / span 8;
}
#page-dashboard > section.col9 {
	grid-column: auto / span 9;
}
#page-dashboard > section.col10 {
	grid-column: auto / span 10;
}
#page-dashboard > section.col11 {
	grid-column: auto / span 11;
}
#page-dashboard > section.col12 {
	grid-column: auto / span 12;
}

/* XL modifié */
@media (max-width: 1700px) {
	#page-dashboard .kpi .illustration {
		flex-basis: 28%;
	}
	#page-dashboard .kpi .illustration i {
		font-size: 1.5em;
	}
	#page-dashboard .kpi .number {
		font-size: 2em;
	}
	#page-dashboard .kpi .legend {
		font-size: .9em;
	}
	#page-dashboard section#ordersDate .content {
		height: 5em;
	}
	#page-dashboard table.dashboardTable {
		font-size: .9em;
	}
}
/* XL */
@media (max-width: 1439px) { 
	#page-dashboard .kpi .illustration {
		flex-basis: 25%;
	}
	#page-dashboard .kpi .illustration i {
		font-size: 1.2em;
	}
	#page-dashboard .kpi .number {
		font-size: 1.5em;
	}
	#page-dashboard .kpi .legend {
		font-size: .8em;
	}
	#page-dashboard section#canvasMiniStatsSection,
	#page-dashboard section#mostSoldProducts,
	#page-dashboard section#mostViewedProducts,
	#page-dashboard #currentSubscription {
		grid-column: auto / span 6;
	}
	#page-dashboard #averageCart {
		grid-column: auto / span 3;
	}
	
	
}
/* LG */
@media (max-width: 1199px) { 
	#page-dashboard.container {
		column-gap: var(--size-gap-main);
		row-gap: var(--size-gap-main);
	}
	#page-dashboard .kpi {
		grid-column: auto / span 6;
	}
	#page-dashboard .kpi .illustration {
		flex-basis: 33%;
	}
	#page-dashboard .kpi .illustration i {
		font-size: 2em;
	}
	#page-dashboard .kpi .number {
		font-size: 2.5em;
	}
	#page-dashboard .kpi .legend {
		font-size: 1em;
	}
	#page-dashboard section#ordersDate .content {
		height: 5.5em;
	}
}
/* MD */
@media (max-width: 991px) {
	#page-dashboard .kpi .illustration i {
		font-size: 1.5em;
	}
	#page-dashboard .kpi .number {
		font-size: 2em;
	}
	#page-dashboard .kpi .legend {
		font-size: .9em;
	}
	#page-dashboard section#ordersDate .content {
		height: 5em;
	}
}
/* SM */
@media (max-width: 767px) {
	#page-dashboard > section {
		grid-column: auto / span 12 !important;
	}
}
/* XS */
@media (max-width: 575px) {
	#page-dashboard.container {
		row-gap: var(--size-gap-main-double);
	}
	
	#page-dashboard .kpi .illustration {
		flex-basis: auto;
		margin-right: 1em;
	}
}



/*=============================================
=            Changement d'offre            =
=============================================*/

#page-subscriptionChange .actions {
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding-left: 0;
}

#page-subscriptionChange #isDowngrade div {
	background: var(--color-secondary-500);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1em;
	margin-top: 1em;
	border-radius: .5em;
}
#page-subscriptionChange #isDowngrade div i {
	margin-right: .5em;
	font-size: 1.5em;;
}

#page-subscriptionChange #currentPlanDetails {
	width: 33%;
	border: 1px solid rgba(0,0,0,.2);;
	padding: 1em;
	margin-bottom: 1em;
	border-radius: .5em;
}
#page-subscriptionChange #currentPlanDetails table {
	font-size: .88em;
}
#page-subscriptionChange #currentPlanDetails th {
	text-align: left;
	padding-right: 1em;
}
#page-subscriptionChange #currentPlanDetails th,
#page-subscriptionChange #currentPlanDetails td {
	vertical-align: top;
}
#page-subscriptionChange #currentPlanDetails .planName {
	text-transform: uppercase;
	font-weight: 700;
}
/* XL modifié */
@media (max-width: 1490px) {
	#page-subscriptionChange #currentPlanDetails {
		width: 50%;
	}
}
/* LG */
@media (max-width: 1199px) { 
	#page-subscriptionChange #currentPlanDetails {
		width: 66%;
	}
}	
/* MD */
@media (max-width: 991px) {
	#page-subscriptionChange #currentPlanDetails {
		width: 100%;
	}
}

#page-subscriptionChange .title {
	display: flex;
	font-size: 1.2em;
	align-content: center;
	font-weight: 700;
	color: var(--color-main-high);
}
#commitmentChoice .title {
	width: 34.2%;
}
.subscriptionChangeTableTitle {
	margin-bottom: 1em;
}
#page-subscriptionChange .title::before {
	content: '\f0da';
	font-family: var(--font-icons);
	margin-right: 0.5em;
	font-size: 1.5em;
	color: var(--color-secondary-500);
	font-weight: 900;
}
#page-subscriptionChange .title span {
	margin-top: 0.3em;
}

#page-subscriptionChange .planSelectContainer {
	display: none;
	margin-bottom: 2em;
	text-align: center;
	
}

#page-subscriptionChange select {
	width: 50%;
	font-size: 1em;
}

.subscriptionChangeTable {
	width: 100%;
	border-collapse: collapse;
}

.subscriptionChangeTable thead th:not(:first-of-type) span.currentPlanLabel {
	font-size: .7em;
	padding: 0em 1em;
	background: var(--color-secondary-500);
	color: white;
	display: inline-block;
	border-radius: 1em;
	text-transform: uppercase;
}

.subscriptionChangeTable th,
.subscriptionChangeTable td {
	padding: .75em .5em;
}
.subscriptionChangeTable td,
.subscriptionChangeTable thead th {
	cursor: pointer;
}
.subscriptionChangeTable thead th input {
	margin-right: 0.5em;
}

.subscriptionChangeTable tr th:first-of-type {
	/* width: 34.2%; */
}
.subscriptionChangeTable thead th:first-of-type {
	text-align: left;
}
.subscriptionChangeTable thead th:not(:first-of-type) {
	width: calc(66% / 5);

	text-transform: uppercase;
	line-height: 1em;
	color: var(--color-main-high);
}
.subscriptionChangeTable thead th:not(:first-of-type) span {
	font-size: .76em;
	display: block;
}
.subscriptionChangeTable thead tr:nth-of-type(2),
.subscriptionChangeTable tbody tr {
	border-bottom: 1px solid rgba(0,0,0,.14);
}
.subscriptionChangeTable thead tr:nth-of-type(2) th:nth-of-type(even),
.subscriptionChangeTable tbody td:nth-of-type(odd),
.subscriptionChangeTable tfoot tr:not(:last-of-type) td:nth-of-type(odd) {
	background: rgba(0,0,0,.04);
}
.subscriptionChangeTable thead tr:nth-of-type(1) th {
	padding: 0.3em 0 0;
}
.subscriptionChangeTable thead tr:nth-of-type(1) th.selected {
	border-top: 1px solid var(--color-secondary-500);
	border-left: 1px solid var(--color-secondary-500);
	border-right: 1px solid var(--color-secondary-500);

	padding: 0.3em 0 0;

	box-shadow: 0px 10px 1em 0px rgba(0, 0, 0, 0.3);
	clip-path: inset(-1em -1em 0 -1em);
}
.subscriptionChangeTable thead tr:nth-of-type(2) .selected {
	border-left: 1px solid var(--color-secondary-500);
	border-right: 1px solid var(--color-secondary-500);
}
.subscriptionChangeTable tbody .selected {
	border-left: 1px solid var(--color-secondary-500);
	border-right: 1px solid var(--color-secondary-500);
}
.subscriptionChangeTable tfoot .selected {
	border-left: 1px solid var(--color-secondary-500);
	border-right: 1px solid var(--color-secondary-500);
}
.subscriptionChangeTable tfoot tr:not(:last-of-type) {
	display: none;
}
.subscriptionChangeTable tfoot tr.show {
	display: table-row;
}
.subscriptionChangeTable tfoot tr:last-of-type td {
	padding: 0;
}
.subscriptionChangeTable tfoot tr:last-of-type td.selected {
	padding: 0 0 0.3em 0;

	border-bottom: 1px solid var(--color-secondary-500);
	box-shadow: 0px -10px 1em 0px rgba(0, 0, 0, 0.3);
	clip-path: inset(0 -1em -1em -1em);
}

.subscriptionChangeTable tbody {
	font-size: .88em;
}
.subscriptionChangeTable tbody td {
	text-align: center;
}
.subscriptionChangeTable tbody span,
.subscriptionChangeTable tfoot th span {
	font-weight: 400;
	font-size: .76em;
	display: block;
}
.subscriptionChangeTable tbody th,
.subscriptionChangeTable tfoot th {
	text-align: left;
}
.subscriptionChangeTable tfoot th {
	font-size: .88em;
}
.subscriptionChangeTable tfoot td {
	font-size: 1.29em;
	color: var(--color-main-high);
	text-transform: uppercase;
	font-weight: 700;
	text-align: center;
}
.subscriptionChangeTable tfoot td span {
	font-size: .6em;
	font-weight: normal;
	text-transform: none;
}



#commitmentChoice {
	display: flex;
	margin-top: 2em;
	width: 100%;
}
#commitmentChoice ul {
	flex: 1 0;
	padding-left: 0;
	margin: .3em 0 0;
}
#commitmentChoice ul li {
	display: inline-block;
	margin-right: 5em;
}
#commitmentChoice label,
#commitmentChoice input {
	cursor: pointer;
}
#commitmentChoice input {
	margin-right: 0.5em;
}

/* XL */
@media (max-width: 1439px) { 
	#page-subscriptionChange thead th {
		font-size: .9em;
	}
	#page-subscriptionChange .currentPlanLabel {
		font-size: .6em;
	}
}
/* LG */
@media (max-width: 1199px) { 
	.subscriptionChangeTable thead th:not(:first-of-type) {
		width: calc(80% / 5);
	}
	#commitmentChoice .title {
		width: auto;
		margin-right: 1em;
	}
	#commitmentChoice ul li {
		margin-right: 2em;
	}
}	
/* MD */
@media (max-width: 991px) {
	
	
}
/* SM */
@media (max-width: 767px) {

	#page-subscriptionChange .planSelectContainer {
		display: block;
	}

	.subscriptionChangeTable thead th input {
		display: none;
	}

	.subscriptionChangeTable th,
	.subscriptionChangeTable td {
		border: none !important;
		box-shadow: none !important;
	}
	.subscriptionChangeTable th:not(:first-of-type),
	.subscriptionChangeTable td:not(:first-of-type) {
		background: rgba(0,0,0,.04) !important;
	}
	.subscriptionChangeTable tfoot tr:last-of-type {
		display: none;
	}
	
	.subscriptionChangeTable thead th:not(.selected),
	.subscriptionChangeTable td:not(.selected) {
		display: none;
	}
	.subscriptionChangeTable thead th:first-of-type {
		display: table-cell;
	}
	.subscriptionChangeTable thead th {
		width: 50% !important;
	}

	#commitmentChoice .title {
		width: 50%;
	}
	#commitmentChoice ul li {
		display: block;
		margin-right: 0;
		margin-bottom: 0.5em;
	}

}
/* XS */
@media (max-width: 575px) {
	#page-subscriptionChange .planSelectContainer select {
		width: 66%;
	}
	#commitmentChoice {
		flex-direction: column;
	}
	#commitmentChoice .title {
		width: 100%;
	}
}



#migrationSummary table {
	margin: 1em 0;
}
#migrationSummary table thead th:not(:first-of-type) {
	width: 18%;
}
#migrationSummary table tbody td {
	border-left: none;
	border-right: none;
}
#migrationSummary table tbody td:first-of-type {
	text-align: left;
}
#migrationSummary table tfoot tr:last-of-type td {
	font-weight: 700;
}
#migrationSummary table tfoot th {
	text-align: right;
}
#migrationSummary .acceptCGVContainer {
	display: table;
	margin-bottom: 3em;
	margin-top: 2em;
}
#migrationSummary .acceptCGVContainer > * {
	display: table-cell;
}
#migrationSummary .acceptCGVContainer input[type=checkbox]:checked {
	background: var(--color-alert-success);
	border-color: var(--color-alert-success);
}
#migrationSummary .acceptCGVContainer label {
	font-size: .8em;
	color: var(--color-main-medium);
	margin-left: 1em;
	cursor: pointer;
}




/*=============================================
=            Préférences            =
=============================================*/
#page-preferences .shippingAllowedMain,
#page-preferences div.prefOnlyWhenShippingAllowed {
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-column-gap: var(--size-gap-main-double);
}

#page-preferences input#shippingPrice,
#page-preferences input#freeShippingAmount {
	width: 50%;
}

#page-preferences #shippingDistanceMap {
	/*
	display:grid;
	grid-template-columns: auto;
	grid-column-gap:20px;
	*/
}

/* XL modifié */
@media (max-width: 1270px) { 
	#page-preferences .shippingAllowedMain,
	#page-preferences div.prefOnlyWhenShippingAllowed {
		grid-template-columns: 1fr 1fr;
	}
	#page-preferences input#shippingPrice,
	#page-preferences input#freeShippingAmount {
		width: 100%;
	}
}




/*=============================================
=            Retour Paiement            =
=============================================*/
.page-paymentReturn section {
	text-align: center;
	padding: 2em;
}
.page-paymentReturn .title {
	text-align: center;
	font-size: 1.41em;
	color: var(--color-main-high);
	margin-bottom: 1em;
}
.page-paymentReturn .title i {
	font-size: 2.7em;
	margin-bottom: 0.2em;
}
#page-paymentReturnNOK .title i {
	color: var(--color-alert-danger);
}
#page-paymentReturnOK .title i {
	color: var(--color-alert-success);
}
.page-paymentReturn .description li {
	display: flex;
}
.page-paymentReturn li > div {
	flex: 1 0;
}
.page-paymentReturn li .label {
	margin-right: var(--size-gap-main);
	text-align: right;
}
.page-paymentReturn li .data {
	margin-left: var(--size-gap-main);
	text-align: left;
}



/*=============================================
=            Debug Reponsive            =
=============================================*/
/* ------
	GRILLE
   ----------- */
#grille {
	position: fixed;
	top: 0;
	z-index: 6000;
	width: calc(100% - var(--size-nav-width) - var(--size-gap-main-double));
	display: none;
	cursor: pointer;

	right: var(--size-gap-main);

}

#grille .element {
	background: rgb(255,0,0,.5);
	height: 500px;
	/* float: left; */
	/* width: 8.33333%; */
	box-sizing: border-box;
}
#grille .element .content {
	background: rgb(255,255,255,.5);
	height: 500px;
	margin: 0 var(--size-margin-default);
}
#grille.showGrid {
	display: block;
}

/* 	-----
	breakpoints
	-----
*/
#debug-responsive  {
	position: fixed;
	bottom: 50px;
	left: var(--size-margin-default);
	color: #333;
	z-index: 2000;
	font-size: 33px;
	cursor: pointer;

	/* display: none; */
}
#debug-responsive .container {
	width: 100px;
	height: 100px;
	background: #a2a2a2;
	text-align: center;
	border-radius: 100px;
	line-height: 2.9em;
	opacity: .3;
	display: block;
}

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

#debug-responsive .container div#sm,
#debug-responsive .container div#md, 
#debug-responsive .container div#lg,
#debug-responsive .container div#xl {
	display: none;
}
	
#debug-responsive .container div#xs {
	display: block;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 576px) {
	#debug-responsive .container div#xs, 
	#debug-responsive .container div#md, 
	#debug-responsive .container div#lg,
	#debug-responsive .container div#xl {
		display: none;
	}
		
	#debug-responsive .container div#sm {
		display: block;
	}	
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 768px) {
	#debug-responsive .container div#xs,
	#debug-responsive .container div#sm, 
	#debug-responsive .container div#lg,
	#debug-responsive .container div#xl {
		display: none;
	}
		
	#debug-responsive .container div#md {
		display: block;
	}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 992px) { 
	#debug-responsive .container div#xs, 
	#debug-responsive .container div#sm, 
	#debug-responsive .container div#md,
	#debug-responsive .container div#xl {
		display: none;
	}
		
	#debug-responsive .container div#lg {
		display: block;
	}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
	#debug-responsive .container div#xs, 
	#debug-responsive .container div#sm, 
	#debug-responsive .container div#md,
	#debug-responsive .container div#lg {
		display: none;
	}
		
	#debug-responsive .container div#xl {
		display: block;
	}
}













/* ################################################################################################################################################## */
/* ################################################################################################################################################## */
/* ################################################################################################################################################## */










/*
Style du wysiwyg */
.ck-editor {
	/* TEMP */
	/* min-width: 10% !important;  */
}
.ck-editor .ck.ck-toolbar.ck-toolbar_grouping > .ck-toolbar__items {
	flex-wrap: wrap;
}
.ckTitle1, .ckTitle2, .ckTitle3, .ckTitle4 {
	margin:0.5em 0;
}
.ckTitle1 {
	font-size:28px;
	font-weight:bold;
}
.ckTitle2 {
	font-size:24px;
	font-weight:bold;
}
.ckTitle3 {
	font-size:20px;
	font-weight:bold;	
}
.ckTitle4 {
	font-size:18px;
	font-weight:bold;
}

.ck-content ul li {
	list-style-type: disc;
}
.ck-content ol li {
	list-style-type: decimal;
}


/* Les tables */

/*
table {
	border-collapse: collapse;
	width: 100%;
	color:#333;
	position:relative;
	margin-bottom:48px;
}
table th {
	font-weight: bold;
	padding:0;
	position:sticky;
	top:0;
	background-color:white;
	z-index:10;
}
table tbody td {
	padding: 0.2em 10px;
	border-right:#FAFAFA;
	border-right: 1px solid #EAEAEA;
}
table tbody tr {
	border-top: 1px solid rgba(0,0,0,.07);
	border-bottom: 1px solid rgba(0,0,0,.07);
}
table tbody tr:hover {
	background: rgba(0,0,0,.03);
}
th div {
	border-top: 1px solid rgba(0,0,0,.17);
	border-bottom: 1px solid rgba(0,0,0,.17);
	border-right: 1px solid #EAEAEA;
	padding: .8em 1em ;
}
tr.selected td {
	background-color:#FAA;
}
tbody tr {
	
}
*/
/*
filter {
	display:block;
	height:2em;
}
*/




/* FAKESELECT */
.FAKESELECT ul, .FAKESELECT li {
	padding:0;
	margin:0;
	white-space:nowrap;
	text-align: left;
	width:100%;
}
.FAKESELECT_TREE > ul {
    margin-right: 20px;
}
.FAKESELECT li span {
	padding:5px;
	display:inline-block;
}
.FAKESELECT li.hover {
	background-color:var(--color-primary-700);
	color:#FFF;
	cursor:pointer;
}

.FAKESELECT {
	display:inline-block;
	border-bottom:1px solid #888;
	position:relative;
	vertical-align: middle;
	cursor:pointer;
}
.FAKESELECT i {
	position:absolute;
	right:5px;
}

.FAKESELECT_TEXT {
	padding:0 5px;
}
.FAKESELECT_TREE {
	position:absolute;
	display:none;
	min-width:100%;
	background-color:#FFF;
	z-index:10;
}
.FAKESELECT_TREE.visible {
	display:block;
	border:1px solid #AAA;
	max-height:200px;
	overflow-y: auto;
	overflow-x: hidden;
}

warning {
	background-color:#b00020;
	color:#FFF;
	padding:10px;
	display:block;
}



@media print {
	*,
	*:before,
	*:after,
	*:first-letter,
	p:first-line,
	div:first-line,
	blockquote:first-line,
	li:first-line {
		background: transparent !important;
		color: #000 !important;
		box-shadow: none !important;
		text-shadow: none !important;
	}

	nav,
	#debug-responsive,
	#devt,
	#cancelOrSave,
	#listActions,
	#loading {
		display: none;
	}

	body {
		font-size: 12pt;
	}	

	header {
		height: auto ;
		padding: 0 0 .5em 0;
		margin-bottom: .5em;
		box-shadow: 0;
		border-bottom: 1px solid #ccc;
	}

	#toggleMenu,
	header .title > div,
	header .links {
		display: none;
	}

	header .title {
		justify-content: center;
	}
	header .shopName {
		display: block;
	}

	main {
		padding: 0;
		height: auto;
	}
	main::before {
		/* content:"Bon de livraison"; */
		/* display: block; */
		/* color: #777 !important; */
	}
	main #content {
		min-height: unset;
	}
	main #content .container {
		display: block;
	}
	main #content .container > section {
		margin: 0;
		padding: 0;
	}
	h1 {
		margin: .5em 0;
		padding: 0 !important;
		text-align: left;
	}
	.prevBtn {
		display: none;
	}
	#tableHeader, 
	.pageHeader, 
	.pageFooter {
		margin: 0;
		display: block;
	}

	
	#page-order #orderMainInfos {
		display: flex;
	}
	#page-order #orderStatus {
		display: none;
	}
	#page-order #orderMainInfos tr {
		display: table-row;
	}
	#page-order #btnPrintOrder {
		display: none;
	}
	#page-order .editObject {
		grid-template-columns: repeat(2,1fr);
		row-gap: 1em;
		column-gap: 1em;
	}
	#page-order section h2 {
		font-size: 1em;
	}
	#page-order #orderContent {
		grid-column: auto / span 2;
	}
	#page-order table {
		font-size: .8em;
	}
	#page-order table thead {
		display: table-header-group;
	}
	#page-order #orderContent table thead th {
		display: table-cell;
		text-align: center;
	}
	table.table thead th > div {
		display: inline-block;
		padding: .5em 0;
	}
	#page-order #orderContent thead th div, 
	#page-order #orderContent tfoot th, 
	#page-order #orderContent td,
	#page-order #orderContent table tfoot th, 
	#page-order #orderContent table tfoot td {
		padding: .5em;
	}
	
	#page-order #orderContent table tbody tr,
	#page-order #orderContent table tfoot tr {
		display: table-row;
	}
	#page-order #orderContent table tfoot td.disabled {
		display: table-cell;
	}
	#page-order #orderContent table tbody td::before {
		display: none;
	}
	#page-order #payment {
		display: none;
	}

}