/*
colorbackbody=255,255,255
colorbackvmenu1=248,248,248
colorbackhmenu1=38,60,92
colorbacktitle1=241,241,241
colorbacklineimpair1=255,255,255
colorbacklineimpair2=255,255,255
colorbacklinepair1=252,252,252
colorbacklinepair2=252,252,252
colorbacklinepairhover=240,242,249
colorbacklinepairchecked=240,242,249
$colortexttitlenotab=35,135,140
$colortexttitle=40,40,60
$colortext=0,0,0
$colortextlink=10,20,100
$colortextbackhmenu=FFFFFF
$colortextbackvmenu=222222
dol_hide_topmenu=
dol_hide_leftmenu=
dol_optimize_smallscreen=
dol_no_mouse_hover=
dol_screenwidth=
dol_screenheight=
fontsize=0.92em
nbtopmenuentries=2
fontsizesmaller=0.75em
topMenuFontSize=1.1em
toolTipBgColor=rgba(255, 255, 255, 0.96)
toolTipFontColor=#333
getDolGlobalString("THEME_SATURATE_RATIO")= (must be between 0 and 1)
*/
/* IDE Hack <style type="text/css"> */

/* ============================================================================== */
/* Default styles                                                                 */
/* ============================================================================== */

:root {
	--colorbackhmenu1: rgb(38,60,92);
	--colorbackvmenu1: rgb(248,248,248);
	--colorbacktitle1: rgb(241,241,241);
	--colorbacktabcard1: rgb(255,255,255);
	--colorbacktabactive: rgb(234,234,234);
	--colorbacklineimpair1: rgb(255,255,255);
	--colorbacklineimpair2: rgb(255,255,255);
	--colorbacklinepair1: rgb(252,252,252);
	--colorbacklinepair2: rgb(252,252,252);
	--colorbacklinepairhover: rgb(240,242,249);
	--colorbacklinepairchecked: rgb(240,242,249);
	--colorbacklinebreak: rgb(248,247,244);
	--colorbackbody: rgb(255,255,255);
	--colorbackmobilemenu: #f8f8f8;
	--colorbackgrey: #f0f0f0;
	--colortexttitlenotab: rgb(35,135,140);
	--colortexttitlenotab2: rgb(100,0,100);
	--colortexttitle: rgba(40,40,60, 0.9);
	--colortexttitlelink: rgba(10, 20, 100, 0.9);
	--colortext: rgb(0,0,0);
	--colortextlink: rgb(10,20,100);
	--colortextlink-h: 233;
	--colortextlink-l: 22%;
	--colortextlink-s: 82%;
	--colortextlink-a: 1;
	--colortextbackhmenu: #FFFFFF;
	--colortextbackvmenu: #222222;
	--colortopbordertitle1: rgb(215,215,215);
	--listetotal: #888888;
	--inputbackgroundcolor: #FFF;
	--inputbackgroundcolordisabled: #eee;
	--inputcolordisabled: rgb(80, 80, 80);
	--inputbordercolor: rgba(0,0,0,.15);
	--tooltipbgcolor: rgba(255, 255, 255, 0.96);
	--tooltipfontcolor : #333;
	--oddevencolor: #202020;
	--colorboxstatsborder: #e0e0e0;
	--dolgraphbg: rgba(255,255,255,0);
	--fieldrequiredcolor: #400030;
	--colortextbacktab: #000000;
	--colorboxiconbg: #eee;
	--refidnocolor:#444;
	--tableforfieldcolor:#888;
	--amountremaintopaycolor:#880000;
	--amountpaymentcomplete:#008855;
	--amountremaintopaybackcolor:none;
	--productlinestockod: #002200;
	--productlinestocktoolow: #884400;
	--infoboxmoduleenabledbgcolor : linear-gradient(0.4turn, #fff, #fff, #fff, #e4efe8);
	--tablevalidbgcolor: rgb(252, 248, 227);
	--colorblack: #000;
	--colorwhite: #fff;
	--heightrow: 155%;
}


body {
	font-size: 0.92em;
	line-height: 1.4;
	font-family: arial,tahoma,verdana,helvetica;
	margin-top: 0;
	margin-bottom: 0;
	margin-right: 0;
	margin-left: 0;
	font-weight: 400;
	background-color: var(--colorbackbody);
	direction: ltr;
	/*transform: scale(1.2);
	transform-origin: 0 0;*/
		/* zoom: 105%; */	/* not supported by all browsers. pb for popup position with select2. */
}

/* Style used to protect html content in output to avoid attack by replacing full page with js content */
.sensiblehtmlcontent * {
	position: static !important;
}

.thumbstat { font-weight: bold !important; }
th a { font-weight: normal !important; }
a.tab { font-weight: 500 !important; }

a:link, a:visited, a:hover, a:active, .classlink { color: var(--colortextlink); text-decoration: none;  }
a:hover { text-decoration: underline; color: var(--colortextlink); }
a.commonlink { color: var(--colortextlink) !important; text-decoration: none; }

th.liste_titre a div div:hover, th.liste_titre_sel a div div:hover { text-decoration: underline; }
tr.liste_titre th.liste_titre_sel:not(.maxwidthsearch), tr.liste_titre td.liste_titre_sel:not(.maxwidthsearch),
tr.liste_titre th.liste_titre:not(.maxwidthsearch), tr.liste_titre td.liste_titre:not(.maxwidthsearch) { opacity: 0.8; }
tr.liste_titre_filter th.liste_titre:not(.center), tr.liste_titre_filter th.liste_titre_sel:not(.center) {
	text-align: unset;
}
.liste_titre.trheight5em {
	height: 4em !important;
}

input {
	font-size: unset;
	box-sizing: border-box;
}
select.vmenusearchselectcombo {
	background-color: unset;
}

table.liste th.wrapcolumntitle.liste_titre:not(.maxwidthsearch), table.liste td.wrapcolumntitle.liste_titre:not(.maxwidthsearch),
table.liste th.wrapcolumntitle.liste_titre_sel:not(.maxwidthsearch), table.liste td.wrapcolumntitle.liste_titre_sel:not(.maxwidthsearch) {
	overflow: hidden;
	white-space: nowrap;
	max-width: 100px;
	text-overflow: ellipsis;
}
th.wrapcolumntitle dl dt a span.fas.fa-list {
	vertical-align: middle;
	padding-bottom: 1px;
}

/*.liste_titre input[name=month_date_when], .liste_titre input[name=monthvalid], .liste_titre input[name=search_ordermonth], .liste_titre input[name=search_deliverymonth],
.liste_titre input[name=search_smonth], .liste_titre input[name=search_month], .liste_titre input[name=search_emonth], .liste_titre input[name=smonth], .liste_titre input[name=month], .liste_titre select[name=month],
.liste_titre select[name=year],
.liste_titre input[name=month_lim], .liste_titre input[name=month_start], .liste_titre input[name=month_end], .liste_titre input[name=month_create],
.liste_titre input[name=search_month_lim], .liste_titre input[name=search_month_start], .liste_titre input[name=search_month_end], .liste_titre input[name=search_month_create],
.liste_titre input[name=search_month_update], .liste_titre input[name=search_month_start], .liste_titre input[name=search_month_end],
.liste_titre input[name=day_date_when], .liste_titre input[name=dayvalid], .liste_titre input[name=search_orderday], .liste_titre input[name=search_deliveryday],
.liste_titre input[name=search_sday], .liste_titre input[name=search_day], .liste_titre input[name=search_eday], .liste_titre input[name=sday], .liste_titre input[name=day], .liste_titre select[name=day],
.liste_titre input[name=day_lim], .liste_titre input[name=day_start], .liste_titre input[name=day_end], .liste_titre input[name=day_create],
.liste_titre input[name=search_day_lim], .liste_titre input[name=search_day_start], .liste_titre input[name=search_day_end], .liste_titre input[name=search_day_create],
.liste_titre input[name=search_day_create], .liste_titre input[name=search_day_start], .liste_titre input[name=search_day_end],
.liste_titre input[name=search_day_date_when], .liste_titre input[name=search_month_date_when], .liste_titre input[name=search_year_date_when],
.liste_titre input[name=search_dtstartday], .liste_titre input[name=search_dtendday], .liste_titre input[name=search_dtstartmonth], .liste_titre input[name=search_dtendmonth],
*/
.liste_titre input[name=search_month], .liste_titre input[name=search_month_start], .liste_titre input[name=search_month_end] {
	margin-right: 4px;
}

select#date_startday, select#date_startmonth, select#date_endday, select#date_endmonth, select#reday, select#remonth,
input, input.flat, form.flat select, select, select.flat, .dataTables_length label select {
	border: none;
}
input, input.flat, textarea, textarea.flat, form.flat select, select, select.flat, .dataTables_length label select {
	color: var(--colortext);
	border-radius: 3px;
	font-family: arial,tahoma,verdana,helvetica;
	outline: none;
	margin: 0px 0px 0px 0px;
	background-color: var(--inputbackgroundcolor);
			border: solid 1px var(--inputbordercolor);
	}

.liste_titre input, .liste_titre select {
	border: none;
	border: solid 1px var(--inputbordercolor);
	/* padding: 5px; */
}
.divadvancedsearchfieldcompinput,
div.tabBar input, div.tabBar input.flat, div.tabBar textarea, div.tabBar textarea.flat, div.tabBar form.flat select, div.tabBar select, div.tabBar select.flat, div.tabBar .dataTables_length label select
{
	border: solid 1px var(--inputbordercolor);
	}
.divadvancedsearchfieldcompinput {
	background: #fff;
	border-bottom: solid 1px var(--inputbordercolor);
	border-radius: 3px;
}
input[name=duration_value], input[name=durationhour]
{
	margin-right: 4px !important;
}
input[type=submit], input[type=submit]:hover {
	margin-left: 5px;
}
input[type=checkbox], input[type=radio] {
	margin: 0 5px 0 1px;
	transform: scale(1.25);
}
.kanban input.checkforselect {
	margin-right: 0px;
	margin-top: 5px;
}
input {
	padding: 4px;
	padding-left: 5px;
}
.liste_titre input {
	line-height: 1.3em;
}
.tableforfield input {
	padding-left: 2px;
}
.refidno input {
	margin-top: 0 !important;
	padding: 0;
}
.refidno .button.smallpaddingimp {
	padding: 3px !important;
	padding-left: 6px !important;
	padding-right: 6px !important;
}

select {
	padding-top: 4px;
	padding-right: 4px;
	padding-bottom: 5px;
	padding-left: 2px;
}
input, select {
	margin-left: 0px;
	margin-bottom: 1px;
	margin-top: 1px;
}
#mainbody input.button:not(.buttongen):not(.bordertransp), #mainbody a.button:not(.buttongen):not(.bordertransp) {
	background: var(--butactionbg);
	color: var(--textbutaction);
	border-radius: 4px;
	border-collapse: collapse;
	border: none;
}
#mainbody span.websitetools input.button:not(.buttongen):not(.bordertransp) {
	color: #000 !important;
}
#mainbody input.buttongen, #mainbody button.buttongen {
	padding: 3px 4px;
}
input.button:hover {
	box-shadow: 0px 0px 6px 1px rgb(50 50 50 / 40%), 0px 0px 0px rgb(60 60 60 / 10%);
}
input.button:focus {
	border-bottom: 0;
}

input.button.massactionconfirmed {
	margin: 4px;
}

input:invalid, select:invalid, input.--error , select.--error {
	border-color: #ea1212;
}

section.setupsection {
	padding: 20px;
	background-color: var(--colorbackgrey);
	border-radius: 5px;
}
section.setupsection:hover {
	box-shadow: 0 0 5px #aaa;
}


.field-error-icon { color: #ea1212 !important; }

/* Focus definitions must be after standard definition */
div.tabBar textarea:focus:not(.textarea-ai_feature):not(.cke_source) {
	border: 1px solid #aaa !important;
}
input:focus:not(.button):not(.buttonwebsite):not(.buttonreset):not(.select2-search__field):not(#top-bookmark-search-input):not(.search_component_input):not(.input-nobottom),
 select:focus, .select2-container--open [aria-expanded="false"].select2-selection--single,
 .select2-container--focus span.selection span.select2-selection {
	border-bottom: 1px solid #666 !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
textarea.cke_source:focus
{
	box-shadow: none;
}
div#cke_dp_desc {
	margin-top: 5px;
}
textarea {
	border-radius: 3px;
	border-top: solid 1px var(--inputbordercolor);
	border-left: solid 1px var(--inputbordercolor);
	border-right: solid 1px var(--inputbordercolor);
	border-bottom: solid 1px var(--inputbordercolor);

	padding:8px;
	margin-left:0px;
	margin-bottom:1px;
	margin-top:1px;
	}
input.removedassigned, input.removedassignedresource  {
	padding: 2px !important;
	vertical-align: text-bottom;
	margin-bottom: -3px;
}
input.smallpadd {	/* Used for timesheet input */
	padding-left: 0px !important;
	padding-right: 0px !important;
}
input.buttongen {
	vertical-align: middle;
}
input.buttonpayment, button.buttonpayment, div.buttonpayment {
	min-width: 290px;
	margin-bottom: 15px;
	margin-top: 15px;
	height: 60px;
	background-image: none;
	line-height: 24px;
	padding: 8px;
	background: none;
	text-align: center;
	border: 0;
	background-color: #9999bb;
	white-space: normal;
	box-shadow: 1px 1px 4px #bbb;
	color: #fff;
	border-radius: 4px;
	cursor: pointer;
	max-width: 350px;
}
input.short {
	width: 40px;
}
input.shortbis {
	width: 48px;
}
.nofocusvisible:focus-visible {
	outline: none;
}

div.buttonpayment input:focus {
	color: #008;
}
.buttonpaymentsmall {
	font-size: 0.65em;
	padding-left: 5px;
	padding-right: 5px;
}
div.buttonpayment input {
	background-color: unset;
	color: #fff;
	border-bottom: unset;
	font-weight: bold;
	text-transform: uppercase;
	cursor: pointer;
}
input.buttonpaymentcb {
	background-image: url(/theme/common/credit_card.png);
	background-size: 26px;
	background-repeat: no-repeat;
	background-position: 5px 11px;
}
input.buttonpaymentcheque {
	background-image: url(/theme/common/cheque.png);
	background-size: 24px;
	background-repeat: no-repeat;
	background-position: 5px 8px;
}
input.buttonpaymentpaypal {
	background-image: url(/paypal/img/object_paypal.png);
	background-repeat: no-repeat;
	background-position: 8px 11px;
}
input.buttonpaymentpaybox {
	background-image: url(/paybox/img/object_paybox.png);
	background-repeat: no-repeat;
	background-position: 8px 11px;
}
input.buttonpaymentstripe {
	background-image: url(/stripe/img/object_stripe.png);
	background-repeat: no-repeat;
	background-position: 8px 11px;
}
.logopublicpayment #dolpaymentlogo {
	max-height: 80px;
	max-width: 300px;
	image-rendering: -webkit-optimize-contrast;		/* better rendering on public page header */
	border-radius: 4px;
}

a.butStatus {
	padding-left: 5px;
	padding-right: 5px;
	background-color: transparent;
	color: var(--colortext) !important;
	border: 1px solid #888 !important;
	margin: 0 0.45em !important;
}

span.userimg.notfirst, div.userimg.notfirst {
	margin-left: -5px;
}
div.userimg.notfirst {
	display: block-inline;
}

/* Used by timesheets */
span.timesheetalreadyrecorded input {
	border: none;
	border-bottom: solid 1px rgba(0,0,0,0.4);
	margin-right: 1px !important;
}
td.onholidaymorning, td.onholidayafternoon {
	background-color: #fdf6f2;
}
td.onholidayallday {
	background-color: #f4eede;
}
td.onholidayallday:not(.weekend) input {
	background-color: #f8f7f0;
}
td.weekend {	/* must be after td.onholidayallday */
	background-color: #f8f4f4;
}
td.weekend input {
	/* background-color: #f8f8f8; */
}
tr:hover td.weekend {
	background: var(--colorbacklinepairhover) !important;
}

/*
td.leftborder, td.hide0 {
	border-left: 1px solid #ccc;
}
td.leftborder, td.hide6 {
	border-right: 1px solid #ccc;
}
*/
td.rightborder {
	border-right: 1px solid #ccc;
}

td.linecoldescription.bomline {
	width: 400px;
}

td.amount, span.amount, div.amount, b.amount {
	color: #006666;
}
td.amountneg, span.amountneg, div.amountneg, b.amountneg
{
	color: #660000;
}
td.amount.amountbadge, span.amount.amountbadge, div.amount.amountbadge, b.amount.amountbadge {
	background-color: #25a580;
	color: #FFF;
	padding: 4px;
	border-radius: 4px;
}
td.amountneg.amountbadge, span.amountneg.amountbadge, div.amountneg.amountbadge, b.amountneg.amountbadge
{
	background-color: #660000;
	color: #FFF;
	padding: 4px;
	border-radius: 4px;
}

td.amount, span.amount, div.amount, b.amount,
td.amountneg, span.amountneg, div.amountneg, b.amountneg,
span.amount, span.amountneg {
	white-space: nowrap;
}
td.actionbuttons a {
	padding-left: 6px;
}
select.flat, form.flat select, .pageplusone {
	font-weight: normal;
	font-size: unset;
}
input.pageplusone {
	padding-bottom: 4px;
	padding-top: 4px;
	margin-right: 4px;
	margin-left: 3px;
}
.paginationlastpage a {
	padding-left: 8px;
}

.saturatemedium {
	filter: saturate(0.8);
}

.optionblue {
	color: var(--colortextlink);
}
.optiongrey, .opacitymedium {
	opacity: 0.4;
}
.opacitymediumbycolor {
	color: rgba(0, 0, 0, 0.4);
}
.opacitylow {
	opacity: 0.6;
}
.opacityhigh {
	opacity: 0.24;
}
.opacitytransp {
	opacity: 0;
}
.colorwhite {
	color: var(--colorwhite);
}
.colorgrey {
	color: #888 !important;
}
.colorblack {
	color: var(--colorblack);
}
.colorblack.totalnboflines {
	font-size: 90%;
	opacity: 0.5;
}
.fontsizeunset {
	font-size: unset !important;
}
.vmirror {
	transform: scale(1, -1);
}
.hmirror {
	transform: scale(-1, 1);
}

select:invalid, select.--error {
	color: gray;
}
input:disabled, textarea:disabled, select[disabled='disabled']
{
	background: var(--inputbackgroundcolordisabled);
	color: var(--inputcolordisabled);
}

input.liste_titre {
	box-shadow: none !important;
}
input.removedfile {
	padding: 0px !important;
	border: 0px !important;
	vertical-align: text-bottom;
}
input[type=file]    {
	background-color: transparent;
	box-shadow: none;
		border: solid 1px var(--inputbordercolor);
}
input[type=checkbox] { background-color: transparent; border: none; box-shadow: none; }
input[type=radio]    { background-color: transparent; border: none; box-shadow: none; }
input[type=image]    { background-color: transparent; border: none; box-shadow: none; }
input:-webkit-autofill {
	background-color: #FDFFF0 !important;
	background-image:none !important;
	-webkit-box-shadow: 0 0 0 50px #FDFFF0 inset;
}

/* CSS for placeholder */
.placeholder { color: #ccc; }
select.placeholder { color: #ccc; }
.select2-selection__choice .placeholder { color: #aaa; }
::-webkit-input-placeholder { color: #ccc; }
input:-moz-placeholder { color: #ccc; }
select.placeholder option:not(.opacitymediumbycolor):not(.opacitymedium) {
	color: var(--colortext);
}

input[name=price], input[name=weight], input[name=volume], input[name=surface], input[name=sizeheight], input[name=net_measure], select[name=incoterm_id] { margin-right: 6px; }
fieldset {
	border: 1px solid #aaa !important;
	padding-inline-start: 2em;
	padding-inline-end: 2em;
	min-inline-size: auto;
}
#div_container_exportoptions fieldset, #div_container_sub_exportoptions fieldset {
	border: 1px solid #ccc !important;
}
.legendforfieldsetstep { padding-bottom: 10px; }
input#onlinepaymenturl, input#directdownloadlink {
	opacity: 0.7;
}


.formconsumeproduce {
	background: #f3f3f3;
	padding: 20px 0px 0px 0px;
	border-radius: 8px;
}

div#moretabsList, div#moretabsListaction {
	z-index: 5;
}

hr { border: 0; border-top: 1px solid #ccc; }
.tabBar hr { margin-top: 20px; margin-bottom: 17px; }


table.tableforfield .button:not(.bordertransp):not(.buttonpayment),
table.tableforfield .buttonDelete:not(.bordertransp):not(.buttonpayment) {
	margin-bottom: 2px;
	margin-top: 2px;
}

.button:not(.bordertransp):not(.buttonpayment),
.buttonDelete:not(.bordertransp):not(.buttonpayment) {
	margin-bottom: 3px;
	margin-top: 3px;
	margin-left: 5px;
	margin-right: 5px;
	font-family: arial,tahoma,verdana,helvetica;
	display: inline-block;
	padding: 8px 15px;
	min-width: 90px;
	text-align: center;
	cursor: pointer;
	text-decoration: none !important;
	background-color: #f5f5f5;
	background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
	background-repeat: repeat-x;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	border: 1px solid #aaa;
	border-radius: 4px;

	font-weight: bold;
	text-transform: uppercase;
	color: #444;
}
.valuefield .button, .valuefieldcreate .button, .refidno .button:not(.smallpaddingimp) {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	font-size: 0.85em !important;
	padding: 5px !important;
}
.button:focus, .buttonDelete:focus  {
	box-shadow: 0px 0px 5px 1px rgba(0, 0, 60, 0.2), 0px 0px 0px rgba(60,60,60,0.1);
}
.button:hover:not(.nohover), .buttonDelete:hover:not(.nohover)   {
	/* warning: having a larger shadow has side effect when button is completely on left of a table */
	box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.2), 0px 0px 0px rgba(60,60,60,0.1);
}
.button:disabled, .buttonDelete:disabled, .button.disabled, .buttonDelete.disabled {
	opacity: 0.4;
	box-shadow: none;
	cursor: auto;
	text-decoration: none;
}
.buttonRefused {
	pointer-events: none;
	   cursor: default;
	opacity: 0.4;
	box-shadow: none;
}
.button_search, .button_removefilter {
	border: unset;
	background-color: unset;
}
.button_search:hover, .button_removefilter:hover {
	cursor: pointer;
}
form {
	padding:0px;
	margin:0px;
}
form#addproduct {
	padding-top: 20px;
}
div.float, span.floatleft
{
	float:left;
}
div.floatright
{
	float:right;
}
.block
{
	display:block;
}
.inline
{
	display:inline;
}
.inline-block
{
	display:inline-block;
}
.inline-blockimp
{
	display:inline-block !important;
}
.largenumber {
	font-size: 1.4em;
}
button[name='button_search_x'] span.fa.fa-search {
	font-size: 1.3em;
}
button[name='button_removefilter_x'] span.fa.fa-remove {
	opacity: 0.5;
	font-size: 1.3em;
}
button:focus {
	outline: none;
}
.fa-info-circle {
	padding-left: 3px;
}
.line-height-large {
	line-height: 1.8em;
}

th .button {
	box-shadow: none !important;
	border-radius:0px !important;
}
.maxwidthsearch {		/* Max width of column with the search picto */
	width: 54px;
	min-width: 54px;
}
.valigntop {
	vertical-align: top;
}
.valignmiddle {
	vertical-align: middle;
}
.valignbottom {
	vertical-align: bottom;
}
.valigntextbottom {
	vertical-align: text-bottom;
}
.centpercent {
	width: 100%;
}
.centpercentimp {
	width: 100% !important;
}
.centpercentwithout1imp {
	width: calc(100% - 1px) !important;
}
.centpercentwithoutmenu {
	width: calc(100% - 200px);
}
.quatrevingtpercent, .inputsearch {
	width: 80%;
}
.maxquatrevingtpercent {
	max-width: 80%;
}
.soixantepercent {
	width: 60%;
}
.quatrevingtquinzepercent {
	width: 95%;
}
.quatrevingtpercentminusx {
	width: calc(80% - 52px);
}
.centpercentminusx {
	width: calc(100% - 52px);
}
textarea.centpercent {
	width: 96%;
}
.small, small {
	font-size: 85%;
}
.smallincombo {
	font-size: 95%;
	font-weight: bold;
}
.lineheightsmall {
	line-height: 1.2em;
}
.large {
	font-size: 125%;
}
.double {
	font-size: 2em;
}

.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small {
	font-size: 65%;
}
.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, .h4 .small, .h4 small, .h5 .small, .h5 small, .h6 .small, .h6 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small, h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small {
	font-weight: 400;
	line-height: 1;
	/* color: #777; */
}

.flip {
	transform: scaleX(-1) translate(2px, 0);
}
.rotate90 {
	transform: rotate(90deg) translate(2px, 4px);
}
.center {
	text-align: center;
	margin: 0px auto;
}
.centerimp {
	text-align: center !important;
}
.centergrid {
	display: grid;
	text-align: center;
	place-items: center;
}
.alignstart {
	text-align: start;
}
.start {
	text-align: start;
}
.end {
	text-align: end;
}
.left {
	text-align: left;
}
.right {
	text-align: right;
}
.justify {
	text-align: justify;
}
.pull-left {
	float: left !important;
}
.pull-right {
	float: right !important;
}
.nowrap {
	white-space: nowrap;
}
.nowraponsmartphone {
	white-space: normal;
}
.wraponsmartphone {
	white-space: nowrap;
}
.liste_titre .nowrap {
	white-space: nowrap;
}
.nowraponall {	/* no wrap on all devices */
	white-space: nowrap;
}
.nowrapfordate {	/* no wrap on all devices for dates */
	white-space: nowrap;
	display: inline-block;
}
.wrapimp, .wrapimp pre {
	white-space: normal !important;
}
.wordwrap {
	word-wrap: break-word;
}
.wordbreakimp {
	word-break: break-word !important;
}
.wordbreak {
	word-break: break-word;	/* cut first between word, inside word if not possible */
}
.wordbreakall {
	word-break: break-all;
}
td.wordbreak img, td.wordbreakimp img {
	max-width: 100%;
}
.bold {
	font-weight: bold !important;
}
.nobold {
	font-weight: normal !important;
}
.uppercase {
	text-transform: uppercase;
}
.marginpopup {
	margin: 20px;
}
.nounderline {
	text-decoration: none;
}
.nounderlineimp {
	text-decoration: none !important;
}
.nopadding {
	padding: 0;
}
.nopaddingleft {
	padding-left: 0;
}
.nopaddingright {
	padding-right: 0;
}
.nopaddingtop {
	padding-top: 0;
}
.nopaddingbottom {
	padding-bottom: 0;
}
.nopaddingleftimp {
	padding-left: 0 !important;
}
.nopaddingrightimp {
	padding-right: 0 !important;
}
.nopaddingtopimp {
	padding-top: 0 !important;
}
.nopaddingbottomimp {
	padding-bottom: 0 !important;
}
.paddingleft {
	padding-left: 4px;
}
.paddingleftimp {
	padding-left: 4px !important;
}
.paddingleft2 {
	padding-left: 2px;
}
.paddingleft2imp {
	padding-left: 2px !important;
}
.paddingright {
	padding-right: 4px;
}
.paddingrightimp {
	padding-right: 4px !important;
}
.paddingright2 {
	padding-right: 2px;
}
.paddingright2imp {
	padding-right: 2px !important;
}
.paddingtop {
	padding-top: 4px;
}
.paddingtopimp {
	padding-top: 4px !important;
}
.paddingtop2 {
	padding-top: 2px;
}
.paddingbottom {
	padding-bottom: 4px;
}
.paddingbottomimp {
	padding-bottom: 4px !important;
}
.paddingbottom2 {
	padding-bottom: 2px;
}
.marginleft2 {
	margin-left: 2px;
}
.marginright2 {
	margin-right: 2px;
}
.marginleftlarge {
	margin-left: 20px !important;
}
.paddinglarge {
	padding: 6px !important;
}
.nowidthimp {
	width: unset !important;
}
.cursordefault {
	cursor: default;
}
.cursorpointer {
	cursor: pointer;
}
.classfortooltiponclick .fa-question-circle {
	cursor: pointer;
}
.cursormove {
	cursor: move;
}
.cursornotallowed {
	cursor: not-allowed !important;
}
.cursorwait {
	cursor: wait;
}
.backgroundblank {
	background-color: #fff;
}
.nobackground, .nobackground tr {
	background: unset !important;
}
.checkboxattachfilelabel {
	font-size: 0.85em;
	opacity: 0.7;
}
.borderimp {
	border: 1px solid #888 !important;
}
.text-warning{
	color : #bc9526}
/* CSS used for long description and extrafield text */
.shortmessagecut {
	max-height: 125px;
	max-width: 100%;
	overflow-y: auto;
}
.longmessagecut {
	max-height: 250px;
	max-width: 100%;
	overflow-y: auto;
}
div.urllink {
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	/* border: 1px solid #ccc; */
	border-radius: 5px;
	/* width: fit-content; */
	background-color: #f0f0f8;
	opacity: 0.8;
}
div.urllink, div.urllink a {
	color: #339 !important;
}
div.urllink input {
	min-width: 30px !important;
}
.divsection {
	padding: 10px;
	border: 2px solid #DFDFDF;
	border-radius: 4px;
	margin-top: 5px;
	margin-bottom: 20px;
	/* background-color: rgba(0, 0, 0, 0.02); */
}

i.fa-mars::before, i.fa-venus::before, i.fa-genderless::before, i.fa-transgender::before  {
	color: #888 !important;
	opacity: 0.4;
	padding-left: 3px;
}
.stockmovemententry {
	color: #080;
	transform: rotate(0.25turn);
	font-size: 1.2em;
}
.stockmovementexit {
	color: #968822;
	transform: rotate(0.3turn);
	font-size: 1.2em;
}
.stockmovement {
	font-size: 1.4em;
}
.publisherlogoinline {
	vertical-align: middle;
	height: 14px;
	width: 14px;
	margin-left: 5px;
}

.linecolht {
	white-space: nowrap;
}


body[class*="colorblind-"] .text-warning{
	color : #bc9526}
.text-success{
	color : #28a745}
body[class*="colorblind-"] .text-success{
	color : #37de5d}

.text-danger{
	color : #af4705}

.editfielda span.fa-pencil-alt, .editfielda span.fa-pencil-ruler, .editfielda span.fa-trash, .editfielda span.fa-crop, .editfielda span.fa-eye, .editfielda span.fa-magic,
.editfieldlang {
	color: #ccc !important;
}
.editfielda span.fa-pencil-alt:hover, .editfielda span.fa-pencil-ruler:hover, .editfielda span.fa-trash:hover, .editfielda span.fa-crop:hover, .editfielda span.fa-magic:hover,
.editfieldlang:hover {
	color: var(--colortexttitle) !important;
}
a.editfielda.nohover *:hover:before {
	color: #ccc !important;
}

.fawidth30 {
	width: 20px;
}
.floatnone {
	float: none !important;
}

span.fa.fa-plus-circle.paddingleft {
	padding-right: 4px;
	padding-top: 3px;
	padding-bottom: 2px;
}

.size12x { font-size: 1.2em !important; }
.size15x { font-size: 1.5em !important; }
.size2x { font-size: 2em; }
.size4x { font-size: 4em !important; }
.fa-toggle-on, .fa-toggle-off { font-size: 2em; }
.websiteselectionsection .fa-toggle-on, .websiteselectionsection .fa-toggle-off,
.asetresetmodule .fa-toggle-on, .asetresetmodule .fa-toggle-off,
.tdwebsitesearchresult .fa-toggle-on, .tdwebsitesearchresult .fa-toggle-off {
	font-size: 1.5em;
	vertical-align: text-bottom;
}

.divoverflow {
	overflow: hidden;
	white-space: nowrap;
	vertical-align: middle;
	text-overflow: ellipsis;
}


/* Themes for badges */


/* IDE Hack <style type="text/css"> */

/* Badge style is based on bootstrap framework */

.badge {
	display: inline-block;
	padding: .1em .35em;
	font-size: 80%;
	font-weight: 700 !important;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: .25rem;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	border-width: 2px;
	border-style: solid;
	border-color: rgba(255,255,255,0);
	box-sizing: border-box;
}

.badge-status {
	font-size: 0.95em;
	padding: .19em .35em;			/* more than 0.19 generate a change into height of lines */
}
.tabBar .arearef .statusref .badge-status, .tabBar .arearefnobottom .statusref .badge-status {
	font-size: 1.1em;
	padding: .4em .4em;
}
/* Force values for small screen 767 */
@media only screen and (max-width: 767px)
{
	.tabBar .arearef .statusref .badge-status, .tabBar .arearefnobottom .statusref .badge-status {
		font-size: 0.95em;
		padding: .3em .2em;
	}
}

.tabs .badge {
	padding-right: .5em;
	padding-left: .5em;
	border-radius: 0.25rem;
}

.badge-pill{
	/* Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding). */
	padding-right: .8em;
	padding-left: 0.8em;
	border-radius: 0.5rem;
}

.badge-dot {
	padding: 0;
	border-radius: 50%;
	padding: 0.45em;
	vertical-align: text-top;
}

a.badge:focus, a.badge:hover {
	text-decoration: none;
}

.liste_titre .badge:not(.nochangebackground) {
	background-color: #aaaabb;
	color: #fff;
}

span.badgeneutral {
	padding: 2px 7px 2px 7px;
	background-color: #e4e4e4;
	color: #666;
	border-radius: 10px;
	white-space: nowrap;
}


/* PRIMARY */
.badge-primary{
	color: #fff !important;
	background-color: #007bff;
}
a.badge-primary.focus, a.badge-primary:focus {
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.5);
}
a.badge-primary:focus, a.badge-primary:hover {
	color: #fff !important;
	background-color: #0062e6;
}

/* SECONDARY */
.badge-secondary, .tabs .badge {
	color: #fff !important;
	background-color: #aaaabb;
}
a.badge-secondary.focus, a.badge-secondary:focus {
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(170,170,187,0.5);
}
a.badge-secondary:focus, a.badge-secondary:hover {
	color: #fff !important;
	background-color: #9191a2;
}

/* SUCCESS */
.badge-success {
	color: #fff !important;
	background-color: #55a580;
}
a.badge-success.focus, a.badge-success:focus {
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(85,165,128,0.5);
}
a.badge-success:focus, a.badge-success:hover {
	color: #fff !important;
	background-color: #3c8c67;
}

/* DANGER */
.badge-danger {
	color: #fff !important;
	background-color: #af4705;
}
a.badge-danger.focus, a.badge-danger:focus {
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(175,71,5,0.5);
}
a.badge-danger:focus, a.badge-danger:hover {
	color: #fff !important;
	background-color: #962e00;
}

/* WARNING */
.badge-warning {
	color: #fff !important;
	background-color: #bc9526;
}
a.badge-warning.focus, a.badge-warning:focus {
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(188,149,38,0.5);
}
a.badge-warning:focus, a.badge-warning:hover {
	color: #212529 !important;
	background-color: #a37c0d;
}

/* WARNING colorblind */
body[class*="colorblind-"] .badge-warning {
	  background-color: #e4e411;
  }
body[class*="colorblind-"] a.badge-warning.focus,body[class^="colorblind-"] a.badge-warning:focus {
	box-shadow: 0 0 0 0.2rem rgba(228,228,17,0.5);
}
body[class*="colorblind-"] a.badge-warning:focus, a.badge-warning:hover {
	background-color: #cbcb00;
}

/* INFO */
.badge-info {
	color: #fff !important;
	background-color: #aaaabb;
}
a.badge-info.focus, a.badge-info:focus {
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(170,170,187,0.5);
}
a.badge-info:focus, a.badge-info:hover {
	color: #fff !important;
	background-color: #9191a2;
}

/* LIGHT */
.badge-light {
	color: #212529 !important;
	background-color: #f8f9fa;
}
a.badge-light.focus, a.badge-light:focus {
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(248,249,250,0.5);
}
a.badge-light:focus, a.badge-light:hover {
	color: #212529 !important;
	background-color: #dfe0e1;
}

/* DARK */
.badge-dark {
	color: #fff !important;
	background-color: #343a40;
}
a.badge-dark.focus, a.badge-dark:focus {
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(52,58,64,0.5);
}
a.badge-dark:focus, a.badge-dark:hover {
	color: #fff !important;
	background-color: #1b2127;
}


@media only screen and (max-width: 570px)
{
	span.badge.badge-status {
		overflow: hidden;
		max-width: 130px;
		text-overflow: ellipsis;
	}
}


/* STATUS BADGES */

/* STATUS0 - 0 */
.badge-status0 {
        color: #999999 !important;
        border-color: #cbd3d3 !important;
        background-color: hsl(0, 0%, 0%, 0) !important;
}
.font-status0 {
        color: hsl(0, 0%, 0%, 0) !important;
}
.badge-status0.focus, .badge-status0:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,0,0,0.5) !important;
}
.badge-status0:focus, .badge-status0:hover {
    color: #999999 !important;
        border-color: #b2baba !important;
}

/* STATUS1 - 1 */
.badge-status1 {
        color: #ffffff !important;
        background-color: #bc9526 !important;
}
.font-status1 {
        color: #bc9526 !important;
}
.badge-status1.focus, .badge-status1:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(188,149,38,0.5) !important;
}
.badge-status1:focus, .badge-status1:hover {
    color: #ffffff !important;
}

/* COLORBLIND STATUS1 - 1 */
body[class*="colorblind-"] .badge-status1 {
        color: #000 !important;
        background-color: #e4e411 !important;
}
body[class*="colorblind-"] .font-status1 {
        color: #e4e411 !important;
}
body[class*="colorblind-"] .badge-status1.focus, body[class*="colorblind-"] .badge-status1:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(228,228,17,0.5) !important;
}
body[class*="colorblind-"] .badge-status1:focus, body[class*="colorblind-"] .badge-status1:hover {
    color: #000 !important;
}

/* STATUS2 - 2 */
.badge-status2 {
        color: #ffffff !important;
        background-color: #9c9c26 !important;
}
.font-status2 {
        color: #9c9c26 !important;
}
.badge-status2.focus, .badge-status2:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(156,156,38,0.5) !important;
}
.badge-status2:focus, .badge-status2:hover {
    color: #ffffff !important;
}

/* STATUS3 - 3 */
.badge-status3 {
        color: #9c850b !important;
        border-color: #bca52b !important;
        background-color: hsl(0, 0%, 0%, 0) !important;
}
.font-status3 {
        color: hsl(0, 0%, 0%, 0) !important;
}
.badge-status3.focus, .badge-status3:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,0,0,0.5) !important;
}
.badge-status3:focus, .badge-status3:hover {
    color: #9c850b !important;
        border-color: #a38c12 !important;
}

/* STATUS4 - 4 */
.badge-status4 {
        color: #ffffff !important;
        background-color: #25a580 !important;
}
.font-status4 {
        color: #25a580 !important;
}
.badge-status4.focus, .badge-status4:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(37,165,128,0.5) !important;
}
.badge-status4:focus, .badge-status4:hover {
    color: #ffffff !important;
}

/* COLORBLIND STATUS4 - 4 */
body[class*="colorblind-"] .badge-status4 {
        color: #000 !important;
        background-color: #37de5d !important;
}
body[class*="colorblind-"] .font-status4 {
        color: #37de5d !important;
}
body[class*="colorblind-"] .badge-status4.focus, body[class*="colorblind-"] .badge-status4:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(55,222,93,0.5) !important;
}
body[class*="colorblind-"] .badge-status4:focus, body[class*="colorblind-"] .badge-status4:hover {
    color: #000 !important;
}

/* STATUS5 - 5 */
.badge-status5 {
        color: #999999 !important;
        border-color: #cad2d2 !important;
        background-color: hsl(0, 0%, 0%, 0) !important;
}
.font-status5 {
        color: hsl(0, 0%, 0%, 0) !important;
}
.badge-status5.focus, .badge-status5:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,0,0,0.5) !important;
}
.badge-status5:focus, .badge-status5:hover {
    color: #999999 !important;
        border-color: #b1b9b9 !important;
}

/* STATUS6 - 6 */
.badge-status6 {
        color: #777777 !important;
        background-color: #cad2d2 !important;
}
.font-status6 {
        color: #cad2d2 !important;
}
.badge-status6.focus, .badge-status6:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(202,210,210,0.5) !important;
}
.badge-status6:focus, .badge-status6:hover {
    color: #777777 !important;
}

/* STATUS7 - 7 */
.badge-status7 {
        color: #25a580 !important;
        border-color: #25a580 !important;
        background-color: hsl(0, 0%, 0%, 0) !important;
}
.font-status7 {
        color: hsl(0, 0%, 0%, 0) !important;
}
.badge-status7.focus, .badge-status7:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,0,0,0.5) !important;
}
.badge-status7:focus, .badge-status7:hover {
    color: #25a580 !important;
        border-color: #0c8c67 !important;
}

/* COLORBLIND STATUS7 - 7 */
body[class*="colorblind-"] .badge-status7 {
        color: #25a580 !important;
        border-color: #37de5d !important;
        background-color: hsl(0, 0%, 0%, 0) !important;
}
body[class*="colorblind-"] .font-status7 {
        color: hsl(0, 0%, 0%, 0) !important;
}
body[class*="colorblind-"] .badge-status7.focus, body[class*="colorblind-"] .badge-status7:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,0,0,0.5) !important;
}
body[class*="colorblind-"] .badge-status7:focus, body[class*="colorblind-"] .badge-status7:hover {
    color: #25a580 !important;
        border-color: #1ec544 !important;
}

/* STATUS8 - 8 */
.badge-status8 {
        color: #ffffff !important;
        background-color: #993013 !important;
}
.font-status8 {
        color: #993013 !important;
}
.badge-status8.focus, .badge-status8:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(153,48,19,0.5) !important;
}
.badge-status8:focus, .badge-status8:hover {
    color: #ffffff !important;
}

/* STATUS9 - 9 */
.badge-status9 {
        color: #999999 !important;
        background-color: #e7f0f0 !important;
}
.font-status9 {
        color: #e7f0f0 !important;
}
.badge-status9.focus, .badge-status9:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(231,240,240,0.5) !important;
}
.badge-status9:focus, .badge-status9:hover {
    color: #999999 !important;
}

/* STATUS10 - 10 */
.badge-status10 {
        color: #999999 !important;
        border-color: #993013 !important;
        background-color: hsl(0, 0%, 0%, 0) !important;
}
.font-status10 {
        color: hsl(0, 0%, 0%, 0) !important;
}
.badge-status10.focus, .badge-status10:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,0,0,0.5) !important;
}
.badge-status10:focus, .badge-status10:hover {
    color: #999999 !important;
        border-color: #801700 !important;
}

/* STATUS1B - 1b */
.badge-status1b {
        color: #9c850b !important;
        border-color: #bc9526 !important;
        background-color: hsl(0, 0%, 0%, 0) !important;
}
.font-status1b {
        color: hsl(0, 0%, 0%, 0) !important;
}
.badge-status1b.focus, .badge-status1b:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,0,0,0.5) !important;
}
.badge-status1b:focus, .badge-status1b:hover {
    color: #9c850b !important;
        border-color: #a37c0d !important;
}

/* STATUS4B - 4b */
.badge-status4b {
        color: #25a580 !important;
        border-color: #25a580 !important;
        background-color: hsl(0, 0%, 0%, 0) !important;
}
.font-status4b {
        color: hsl(0, 0%, 0%, 0) !important;
}
.badge-status4b.focus, .badge-status4b:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,0,0,0.5) !important;
}
.badge-status4b:focus, .badge-status4b:hover {
    color: #25a580 !important;
        border-color: #0c8c67 !important;
}
/* IDE Hack <style type="text/css"> */

.flag-sprite {
	background:url(/theme/common/flags/flag-sprite.png) no-repeat top left; display:inline-block;
}
.flag-sprite.ad {
	background-position:0 -0px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ae {
	background-position:0 -11px;
	width: 16px;
	height: 11px;
}
.flag-sprite.af {
	background-position:0 -22px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ag {
	background-position:0 -33px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ai {
	background-position:0 -44px;
	width: 16px;
	height: 11px;
}
.flag-sprite.al {
	background-position:0 -55px;
	width: 16px;
	height: 11px;
}
.flag-sprite.am {
	background-position:0 -66px;
	width: 16px;
	height: 11px;
}
.flag-sprite.an {
	background-position:0 -77px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ao {
	background-position:0 -88px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ar {
	background-position:0 -99px;
	width: 16px;
	height: 11px;
}
.flag-sprite.as {
	background-position:0 -110px;
	width: 16px;
	height: 11px;
}
.flag-sprite.at {
	background-position:0 -121px;
	width: 16px;
	height: 11px;
}
.flag-sprite.au {
	background-position:0 -132px;
	width: 16px;
	height: 11px;
}
.flag-sprite.aw {
	background-position:0 -143px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ax {
	background-position:0 -154px;
	width: 16px;
	height: 11px;
}
.flag-sprite.az {
	background-position:0 -165px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ba {
	background-position:0 -176px;
	width: 16px;
	height: 11px;
}
.flag-sprite.bb {
	background-position:0 -187px;
	width: 16px;
	height: 11px;
}
.flag-sprite.bd {
	background-position:0 -198px;
	width: 16px;
	height: 11px;
}
.flag-sprite.be {
	background-position:0 -209px;
	width: 16px;
	height: 11px;
}
.flag-sprite.bf {
	background-position:0 -220px;
	width: 16px;
	height: 11px;
}
.flag-sprite.bg {
	background-position:0 -231px;
	width: 16px;
	height: 11px;
}
.flag-sprite.bh {
	background-position:0 -242px;
	width: 16px;
	height: 11px;
}
.flag-sprite.bi {
	background-position:0 -253px;
	width: 16px;
	height: 11px;
}
.flag-sprite.bj {
	background-position:0 -264px;
	width: 16px;
	height: 11px;
}
.flag-sprite.bm {
	background-position:0 -275px;
	width: 16px;
	height: 11px;
}
.flag-sprite.bn {
	background-position:0 -286px;
	width: 16px;
	height: 11px;
}
.flag-sprite.bo {
	background-position:0 -297px;
	width: 16px;
	height: 11px;
}
.flag-sprite.br {
	background-position:0 -308px;
	width: 16px;
	height: 11px;
}
.flag-sprite.bs {
	background-position:0 -319px;
	width: 16px;
	height: 11px;
}
.flag-sprite.bt {
	background-position:0 -330px;
	width: 16px;
	height: 11px;
}
.flag-sprite.bv {
	background-position:0 -341px;
	width: 16px;
	height: 11px;
}
.flag-sprite.bw {
	background-position:0 -352px;
	width: 16px;
	height: 11px;
}
.flag-sprite.by {
	background-position:0 -363px;
	width: 16px;
	height: 11px;
}
.flag-sprite.bz {
	background-position:0 -374px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ca {
	background-position:0 -385px;
	width: 16px;
	height: 11px;
}
.flag-sprite.catalonia {
	background-position:0 -396px;
	width: 16px;
	height: 11px;
}
.flag-sprite.cc {
	background-position:0 -407px;
	width: 16px;
	height: 11px;
}
.flag-sprite.cd {
	background-position:0 -418px;
	width: 16px;
	height: 11px;
}
.flag-sprite.cf {
	background-position:0 -429px;
	width: 16px;
	height: 11px;
}
.flag-sprite.cg {
	background-position:0 -440px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ch {
	background-position:0 -451px;
	width: 11px;
	height: 11px;
}
.flag-sprite.ci {
	background-position:0 -462px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ck {
	background-position:0 -473px;
	width: 16px;
	height: 11px;
}
.flag-sprite.cl {
	background-position:0 -484px;
	width: 16px;
	height: 11px;
}
.flag-sprite.cm {
	background-position:0 -495px;
	width: 16px;
	height: 11px;
}
.flag-sprite.cn {
	background-position:0 -506px;
	width: 16px;
	height: 11px;
}
.flag-sprite.co {
	background-position:0 -517px;
	width: 16px;
	height: 11px;
}
.flag-sprite.cr {
	background-position:0 -528px;
	width: 16px;
	height: 11px;
}
.flag-sprite.cs {
	background-position:0 -539px;
	width: 16px;
	height: 11px;
}
.flag-sprite.cu {
	background-position:0 -550px;
	width: 16px;
	height: 11px;
}
.flag-sprite.cv {
	background-position:0 -561px;
	width: 16px;
	height: 11px;
}
.flag-sprite.cx {
	background-position:0 -572px;
	width: 16px;
	height: 11px;
}
.flag-sprite.cy {
	background-position:0 -583px;
	width: 16px;
	height: 11px;
}
.flag-sprite.cz {
	background-position:0 -594px;
	width: 16px;
	height: 11px;
}
.flag-sprite.de {
	background-position:0 -605px;
	width: 16px;
	height: 11px;
}
.flag-sprite.dj {
	background-position:0 -616px;
	width: 16px;
	height: 11px;
}
.flag-sprite.dk {
	background-position:0 -627px;
	width: 16px;
	height: 11px;
}
.flag-sprite.dm {
	background-position:0 -638px;
	width: 16px;
	height: 11px;
}
.flag-sprite.do {
	background-position:0 -649px;
	width: 16px;
	height: 11px;
}
.flag-sprite.dz {
	background-position:0 -660px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ec {
	background-position:0 -671px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ee {
	background-position:0 -682px;
	width: 16px;
	height: 11px;
}
.flag-sprite.eg {
	background-position:0 -693px;
	width: 16px;
	height: 11px;
}
.flag-sprite.eh {
	background-position:0 -704px;
	width: 16px;
	height: 11px;
}
.flag-sprite.england {
	background-position:0 -715px;
	width: 16px;
	height: 11px;
}
.flag-sprite.en {
	background-position:0 -726px;
	width: 16px;
	height: 11px;
}
.flag-sprite.er {
	background-position:0 -737px;
	width: 16px;
	height: 11px;
}
.flag-sprite.es {
	background-position:0 -748px;
	width: 16px;
	height: 11px;
}
.flag-sprite.et {
	background-position:0 -759px;
	width: 16px;
	height: 11px;
}
.flag-sprite.eu {
	background-position:0 -770px;
	width: 16px;
	height: 11px;
}
.flag-sprite.fam {
	background-position:0 -781px;
	width: 16px;
	height: 11px;
}
.flag-sprite.fi {
	background-position:0 -792px;
	width: 16px;
	height: 11px;
}
.flag-sprite.fj {
	background-position:0 -803px;
	width: 16px;
	height: 11px;
}
.flag-sprite.fk {
	background-position:0 -814px;
	width: 16px;
	height: 11px;
}
.flag-sprite.fm {
	background-position:0 -825px;
	width: 16px;
	height: 11px;
}
.flag-sprite.fo {
	background-position:0 -836px;
	width: 16px;
	height: 11px;
}
.flag-sprite.fr {
	background-position:0 -847px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ga {
	background-position:0 -858px;
	width: 16px;
	height: 11px;
}
.flag-sprite.gb {
	background-position:0 -869px;
	width: 16px;
	height: 11px;
}
.flag-sprite.gd {
	background-position:0 -880px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ge {
	background-position:0 -891px;
	width: 16px;
	height: 11px;
}
.flag-sprite.gf {
	background-position:0 -902px;
	width: 16px;
	height: 11px;
}
.flag-sprite.gg {
	background-position:0 -913px;
	width: 16px;
	height: 11px;
}
.flag-sprite.gh {
	background-position:0 -924px;
	width: 16px;
	height: 11px;
}
.flag-sprite.gi {
	background-position:0 -935px;
	width: 16px;
	height: 11px;
}
.flag-sprite.gl {
	background-position:0 -946px;
	width: 16px;
	height: 11px;
}
.flag-sprite.gm {
	background-position:0 -957px;
	width: 16px;
	height: 11px;
}
.flag-sprite.gn {
	background-position:0 -968px;
	width: 16px;
	height: 11px;
}
.flag-sprite.gp {
	background-position:0 -979px;
	width: 16px;
	height: 11px;
}
.flag-sprite.gq {
	background-position:0 -990px;
	width: 16px;
	height: 11px;
}
.flag-sprite.gr {
	background-position:0 -1001px;
	width: 16px;
	height: 11px;
}
.flag-sprite.gs {
	background-position:0 -1012px;
	width: 16px;
	height: 11px;
}
.flag-sprite.gt {
	background-position:0 -1023px;
	width: 16px;
	height: 11px;
}
.flag-sprite.gu {
	background-position:0 -1034px;
	width: 16px;
	height: 11px;
}
.flag-sprite.gw {
	background-position:0 -1045px;
	width: 16px;
	height: 11px;
}
.flag-sprite.gy {
	background-position:0 -1056px;
	width: 16px;
	height: 11px;
}
.flag-sprite.hk {
	background-position:0 -1067px;
	width: 16px;
	height: 11px;
}
.flag-sprite.hm {
	background-position:0 -1078px;
	width: 16px;
	height: 11px;
}
.flag-sprite.hn {
	background-position:0 -1089px;
	width: 16px;
	height: 11px;
}
.flag-sprite.hr {
	background-position:0 -1100px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ht {
	background-position:0 -1111px;
	width: 16px;
	height: 11px;
}
.flag-sprite.hu {
	background-position:0 -1122px;
	width: 16px;
	height: 11px;
}
.flag-sprite.id {
	background-position:0 -1133px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ie {
	background-position:0 -1144px;
	width: 16px;
	height: 11px;
}
.flag-sprite.il {
	background-position:0 -1155px;
	width: 16px;
	height: 11px;
}
.flag-sprite.in {
	background-position:0 -1166px;
	width: 16px;
	height: 11px;
}
.flag-sprite.int {
	background-position:0 -1177px;
	width: 16px;
	height: 11px;
}
.flag-sprite.io {
	background-position:0 -1188px;
	width: 16px;
	height: 11px;
}
.flag-sprite.iq {
	background-position:0 -1199px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ir {
	background-position:0 -1210px;
	width: 16px;
	height: 11px;
}
.flag-sprite.is {
	background-position:0 -1221px;
	width: 16px;
	height: 11px;
}
.flag-sprite.it {
	background-position:0 -1232px;
	width: 16px;
	height: 11px;
}
.flag-sprite.jm {
	background-position:0 -1243px;
	width: 16px;
	height: 11px;
}
.flag-sprite.jo {
	background-position:0 -1254px;
	width: 16px;
	height: 11px;
}
.flag-sprite.jp {
	background-position:0 -1265px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ke {
	background-position:0 -1276px;
	width: 16px;
	height: 11px;
}
.flag-sprite.kg {
	background-position:0 -1287px;
	width: 16px;
	height: 11px;
}
.flag-sprite.kh {
	background-position:0 -1298px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ki {
	background-position:0 -1309px;
	width: 16px;
	height: 11px;
}
.flag-sprite.km {
	background-position:0 -1320px;
	width: 16px;
	height: 11px;
}
.flag-sprite.kn {
	background-position:0 -1331px;
	width: 16px;
	height: 11px;
}
.flag-sprite.kp {
	background-position:0 -1342px;
	width: 16px;
	height: 11px;
}
.flag-sprite.kr {
	background-position:0 -1353px;
	width: 16px;
	height: 11px;
}
.flag-sprite.kw {
	background-position:0 -1364px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ky {
	background-position:0 -1375px;
	width: 16px;
	height: 11px;
}
.flag-sprite.kz {
	background-position:0 -1386px;
	width: 16px;
	height: 11px;
}
.flag-sprite.la {
	background-position:0 -1397px;
	width: 16px;
	height: 11px;
}
.flag-sprite.lb {
	background-position:0 -1408px;
	width: 16px;
	height: 11px;
}
.flag-sprite.lc {
	background-position:0 -1419px;
	width: 16px;
	height: 11px;
}
.flag-sprite.li {
	background-position:0 -1430px;
	width: 16px;
	height: 11px;
}
.flag-sprite.lk {
	background-position:0 -1441px;
	width: 16px;
	height: 11px;
}
.flag-sprite.lr {
	background-position:0 -1452px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ls {
	background-position:0 -1463px;
	width: 16px;
	height: 11px;
}
.flag-sprite.lt {
	background-position:0 -1474px;
	width: 16px;
	height: 11px;
}
.flag-sprite.lu {
	background-position:0 -1485px;
	width: 16px;
	height: 11px;
}
.flag-sprite.lv {
	background-position:0 -1496px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ly {
	background-position:0 -1507px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ma {
	background-position:0 -1518px;
	width: 16px;
	height: 11px;
}
.flag-sprite.mc {
	background-position:0 -1529px;
	width: 16px;
	height: 11px;
}
.flag-sprite.md {
	background-position:0 -1540px;
	width: 16px;
	height: 11px;
}
.flag-sprite.me {
	background-position:0 -1551px;
	width: 16px;
	height: 12px;
}
.flag-sprite.mf {
	background-position:0 -847px;
	width: 16px;
	height: 12px;
}
.flag-sprite.mg {
	background-position:0 -1563px;
	width: 16px;
	height: 11px;
}
.flag-sprite.mh {
	background-position:0 -1574px;
	width: 16px;
	height: 11px;
}
.flag-sprite.mk {
	background-position:0 -1585px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ml {
	background-position:0 -1596px;
	width: 16px;
	height: 11px;
}
.flag-sprite.mm {
	background-position:0 -1607px;
	width: 16px;
	height: 11px;
}
.flag-sprite.mn {
	background-position:0 -1618px;
	width: 16px;
	height: 11px;
}
.flag-sprite.mo {
	background-position:0 -1629px;
	width: 16px;
	height: 11px;
}
.flag-sprite.mp {
	background-position:0 -1640px;
	width: 16px;
	height: 11px;
}
.flag-sprite.mq {
	background-position:0 -1651px;
	width: 16px;
	height: 11px;
}
.flag-sprite.mr {
	background-position:0 -1662px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ms {
	background-position:0 -1673px;
	width: 16px;
	height: 11px;
}
.flag-sprite.mt {
	background-position:0 -1684px;
	width: 16px;
	height: 11px;
}
.flag-sprite.mu {
	background-position:0 -1695px;
	width: 16px;
	height: 11px;
}
.flag-sprite.mv {
	background-position:0 -1706px;
	width: 16px;
	height: 11px;
}
.flag-sprite.mw {
	background-position:0 -1717px;
	width: 16px;
	height: 11px;
}
.flag-sprite.mx {
	background-position:0 -1728px;
	width: 16px;
	height: 11px;
}
.flag-sprite.my {
	background-position:0 -1739px;
	width: 16px;
	height: 11px;
}
.flag-sprite.mz {
	background-position:0 -1750px;
	width: 16px;
	height: 11px;
}
.flag-sprite.na {
	background-position:0 -1761px;
	width: 16px;
	height: 11px;
}
.flag-sprite.nc {
	background-position:0 -1772px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ne {
	background-position:0 -1783px;
	width: 16px;
	height: 11px;
}
.flag-sprite.nf {
	background-position:0 -1794px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ng {
	background-position:0 -1805px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ni {
	background-position:0 -1816px;
	width: 16px;
	height: 11px;
}
.flag-sprite.nl {
	background-position:0 -1827px;
	width: 16px;
	height: 11px;
}
.flag-sprite.no {
	background-position:0 -1838px;
	width: 16px;
	height: 11px;
}
.flag-sprite.np {
	background-position:0 -1849px;
	width: 9px;
	height: 11px;
}
.flag-sprite.nr {
	background-position:0 -1860px;
	width: 16px;
	height: 11px;
}
.flag-sprite.nu {
	background-position:0 -1871px;
	width: 16px;
	height: 11px;
}
.flag-sprite.nz {
	background-position:0 -1882px;
	width: 16px;
	height: 11px;
}
.flag-sprite.om {
	background-position:0 -1893px;
	width: 16px;
	height: 11px;
}
.flag-sprite.pa {
	background-position:0 -1904px;
	width: 16px;
	height: 11px;
}
.flag-sprite.pe {
	background-position:0 -1915px;
	width: 16px;
	height: 11px;
}
.flag-sprite.pf {
	background-position:0 -1926px;
	width: 16px;
	height: 11px;
}
.flag-sprite.pg {
	background-position:0 -1937px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ph {
	background-position:0 -1948px;
	width: 16px;
	height: 11px;
}
.flag-sprite.pk {
	background-position:0 -1959px;
	width: 16px;
	height: 11px;
}
.flag-sprite.pl {
	background-position:0 -1970px;
	width: 16px;
	height: 11px;
}
.flag-sprite.pm {
	background-position:0 -1981px;
	width: 16px;
	height: 11px;
}
.flag-sprite.pn {
	background-position:0 -1992px;
	width: 16px;
	height: 11px;
}
.flag-sprite.pr {
	background-position:0 -2003px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ps {
	background-position:0 -2014px;
	width: 16px;
	height: 11px;
}
.flag-sprite.pt {
	background-position:0 -2025px;
	width: 16px;
	height: 11px;
}
.flag-sprite.pw {
	background-position:0 -2036px;
	width: 16px;
	height: 11px;
}
.flag-sprite.py {
	background-position:0 -2047px;
	width: 16px;
	height: 11px;
}
.flag-sprite.qa {
	background-position:0 -2058px;
	width: 16px;
	height: 11px;
}
.flag-sprite.re {
	background-position:0 -2069px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ro {
	background-position:0 -2080px;
	width: 16px;
	height: 11px;
}
.flag-sprite.rs {
	background-position:0 -2091px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ru {
	background-position:0 -2102px;
	width: 16px;
	height: 11px;
}
.flag-sprite.rw {
	background-position:0 -2113px;
	width: 16px;
	height: 11px;
}
.flag-sprite.sa {
	background-position:0 -2124px;
	width: 16px;
	height: 11px;
}
.flag-sprite.sb {
	background-position:0 -2135px;
	width: 16px;
	height: 11px;
}
.flag-sprite.scotland {
	background-position:0 -2146px;
	width: 16px;
	height: 11px;
}
.flag-sprite.sc {
	background-position:0 -2157px;
	width: 16px;
	height: 11px;
}
.flag-sprite.sd {
	background-position:0 -2168px;
	width: 16px;
	height: 11px;
}
.flag-sprite.se {
	background-position:0 -2179px;
	width: 16px;
	height: 11px;
}
.flag-sprite.sg {
	background-position:0 -2190px;
	width: 16px;
	height: 11px;
}
.flag-sprite.sh {
	background-position:0 -2201px;
	width: 16px;
	height: 11px;
}
.flag-sprite.si {
	background-position:0 -2212px;
	width: 16px;
	height: 11px;
}
.flag-sprite.sj {
	background-position:0 -2223px;
	width: 16px;
	height: 11px;
}
.flag-sprite.sk {
	background-position:0 -2234px;
	width: 16px;
	height: 11px;
}
.flag-sprite.sl {
	background-position:0 -2245px;
	width: 16px;
	height: 11px;
}
.flag-sprite.sm {
	background-position:0 -2256px;
	width: 16px;
	height: 11px;
}
.flag-sprite.sn {
	background-position:0 -2267px;
	width: 16px;
	height: 11px;
}
.flag-sprite.so {
	background-position:0 -2278px;
	width: 16px;
	height: 11px;
}
.flag-sprite.sr {
	background-position:0 -2289px;
	width: 16px;
	height: 11px;
}
.flag-sprite.st {
	background-position:0 -2300px;
	width: 16px;
	height: 11px;
}
.flag-sprite.sv {
	background-position:0 -2311px;
	width: 16px;
	height: 11px;
}
.flag-sprite.sy {
	background-position:0 -2322px;
	width: 16px;
	height: 11px;
}
.flag-sprite.sz {
	background-position:0 -2333px;
	width: 16px;
	height: 11px;
}
.flag-sprite.tc {
	background-position:0 -2344px;
	width: 16px;
	height: 11px;
}
.flag-sprite.td {
	background-position:0 -2355px;
	width: 16px;
	height: 11px;
}
.flag-sprite.tf {
	background-position:0 -2366px;
	width: 16px;
	height: 11px;
}
.flag-sprite.tg {
	background-position:0 -2377px;
	width: 16px;
	height: 11px;
}
.flag-sprite.th {
	background-position:0 -2388px;
	width: 16px;
	height: 11px;
}
.flag-sprite.tj {
	background-position:0 -2399px;
	width: 16px;
	height: 11px;
}
.flag-sprite.tk {
	background-position:0 -2410px;
	width: 16px;
	height: 11px;
}
.flag-sprite.tl {
	background-position:0 -2421px;
	width: 16px;
	height: 11px;
}
.flag-sprite.tm {
	background-position:0 -2432px;
	width: 16px;
	height: 11px;
}
.flag-sprite.tn {
	background-position:0 -2443px;
	width: 16px;
	height: 11px;
}
.flag-sprite.to {
	background-position:0 -2454px;
	width: 16px;
	height: 11px;
}
.flag-sprite.trans {
	background-position:0 -2465px;
	width: 1px;
	height: 1px;
}
.flag-sprite.tr {
	background-position:0 -2466px;
	width: 16px;
	height: 11px;
}
.flag-sprite.tt {
	background-position:0 -2477px;
	width: 16px;
	height: 11px;
}
.flag-sprite.tv {
	background-position:0 -2488px;
	width: 16px;
	height: 11px;
}
.flag-sprite.tw {
	background-position:0 -2499px;
	width: 16px;
	height: 11px;
}
.flag-sprite.tz {
	background-position:0 -2510px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ua {
	background-position:0 -2521px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ug {
	background-position:0 -2532px;
	width: 16px;
	height: 11px;
}
.flag-sprite.uk {
	background-position:0 -2543px;
	width: 16px;
	height: 11px;
}
.flag-sprite.um {
	background-position:0 -2554px;
	width: 16px;
	height: 11px;
}
.flag-sprite.unknown {
	background-position:0 -2565px;
	width: 16px;
	height: 16px;
}
.flag-sprite.us {
	background-position:0 -2581px;
	width: 16px;
	height: 11px;
}
.flag-sprite.uy {
	background-position:0 -2592px;
	width: 16px;
	height: 11px;
}
.flag-sprite.uz {
	background-position:0 -2603px;
	width: 16px;
	height: 11px;
}
.flag-sprite.va {
	background-position:0 -2614px;
	width: 16px;
	height: 11px;
}
.flag-sprite.vc {
	background-position:0 -2625px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ve {
	background-position:0 -2636px;
	width: 16px;
	height: 11px;
}
.flag-sprite.vg {
	background-position:0 -2647px;
	width: 16px;
	height: 11px;
}
.flag-sprite.vi {
	background-position:0 -2658px;
	width: 16px;
	height: 11px;
}
.flag-sprite.vn {
	background-position:0 -2669px;
	width: 16px;
	height: 11px;
}
.flag-sprite.vu {
	background-position:0 -2680px;
	width: 16px;
	height: 11px;
}
.flag-sprite.wales {
	background-position:0 -2691px;
	width: 16px;
	height: 11px;
}
.flag-sprite.wf {
	background-position:0 -2702px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ws {
	background-position:0 -2713px;
	width: 16px;
	height: 11px;
}
.flag-sprite.xk {
	background-position:0 -2724px;
	width: 16px;
	height: 11px;
}
.flag-sprite.ye {
	background-position:0 -2735px;
	width: 16px;
	height: 11px;
}
.flag-sprite.yt {
	background-position:0 -2746px;
	width: 16px;
	height: 11px;
}
.flag-sprite.za {
	background-position:0 -2757px;
	width: 16px;
	height: 11px;
}
.flag-sprite.zm {
	background-position:0 -2768px;
	width: 16px;
	height: 11px;
}
.flag-sprite.zw {
	background-position:0 -2779px;
	width: 16px;
	height: 11px;
}

.borderrightlight
{
	border-right: 1px solid #DDD;
}
.borderleftlight
{
	border-left: 1px solid #DDD;
}
#formuserfile {
	margin-top: 4px;
}
#formuserfile input[type='file'] {
	font-size: 1em;
	/* opacity: 0.5em; */
}
/*#formuserfile input[type='file']:valid {
	color: #a00;
}
#formuserfile input[type='file']:empty {
	color: #0a0;
}*/

#formuserfile_link {
	margin-left: 1px;
}
#formuserfile_link input[type='text'] {
	font-size: 1em;
}
.listofinvoicetype {
	min-height: 1.8em;
	vertical-align: middle;
	padding-top: 7px;
	padding-bottom: 1px;
	display: flex;
	align-items: center;
}
.divsocialnetwork:not(:last-child) {
	padding-right: 20px;
}
div.divsearchfield {
	/* float: left; */
	display: inline-block;
	margin-right: 12px;
	margin-left: 2px;
	margin-top: 4px;
	margin-bottom: 4px;
	padding-left: 2px;
}
.divfilteralone {
	background-color: rgba(0, 0, 0, 0.08);
	border-radius: 5px;
	padding-left: 5px;
}
.divsearchfieldfilter {
	text-overflow: clip;
	overflow: auto;
	padding-bottom: 5px;
	opacity: 0.6;
	font-size: small;
}
.divadvancedsearchfield:first-child {
	margin-top: 3px;
}
.divadvancedsearchfield {
	float: left;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 2px;
	padding-top: 2px;
}

.search_component_params {
	/*display: flex; */
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	background: #fff;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 0;
	padding-right: 0;
	border-bottom: solid 1px var(--inputbordercolor);
	line-height: 24px;
	border-radius: 3px;
}
.search_component_searchtext {
	padding-top: 2px;
}
.search_component_params_text, .search_component_params_text:focus {
	border-bottom: none;
	width: auto;
	margin: 0 !important;
	padding: 3px;
}
.tagsearch .tagsearchdelete {
	height: 20px;
}
.tagsearch {
	padding: 2px;
	padding-right: 4px;
	padding-top: 0px;
	padding-bottom: 0px;
	background: #ddd;
	border-radius: 4px;
	display: inline-block;
}
.tagsearchdelete {
	color: #999;
	cursor: pointer;
	display: inline-block;
	font-weight: bold;
	margin-right: 2px;
	padding-left: 4px;
}

.caretleftaxis {
	margin-left: -13px;
	margin-top: -1px;
	position: absolute;
}
.caretdownaxis {
	margin-left: -12px;
	margin-top: 0;
	position: absolute;
}

.a-filter, .a-mesure {
	border-radius: 50px;
	background: var(--colortexttitlenotab);
	color: #fff;
	padding: 8px 10px 8px 6px;
}
.a-filter:before {
	content: "\f0b0";
}
.a-mesure:before {
	content: "\f080";
}
.a-filter:before, .a-mesure:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	padding-right: 5px;
	padding-left: 5px;
}
.a-filter-disabled, .a-mesure-disabled {
	border-radius: 50px;
	background: var(--colorbacktitle1);
	padding: 8px;
	opacity: 0.6;
}


/* ============================================================================== */
/* Styles for scan tool                                                           */
/* ============================================================================== */

div.div-for-modal {
	/* display: none; */
	position:absolute;
	top:calc(50% - 200px);
	left:calc(50% - 250px);
	width:500px;  /* adjust as per your needs */
	height:400px;   /* adjust as per your needs */
	background: #fff;
	border: 1px solid #bbb;
	box-shadow: 2px 2px 20px #ddd;
	z-index: 100;
}

#scantoolmessage {
	height: 3em;
	border: none;
	overflow-y: auto;
}

div.div-for-modal-topright {
	/* display: none; */
	position: fixed;
	top: 0;
	right: 0;
	width:50%;  /* adjust as per your needs */
	height:320px;   /* adjust as per your needs */
	background: #fff;
	border: 1px solid #bbb;
	box-shadow: 2px 2px 20px #ddd;
	z-index: 1100;
}


div.confirmmessage {
	padding-top: 6px;
}
ul.attendees {
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	margin-top: 0;
	margin-bottom: 0;
}
ul.attendees li {
	list-style-type: none;
	padding-top:1px;
	padding-bottom:1px;
	line-height: 1.6em;
}
.googlerefreshcal {
	padding-top: 4px;
	padding-bottom: 4px;
}
.paddingtopbottom {
	padding-top: 10px;
	padding-bottom: 10px;
}
.checkallactions {
	margin-left: 2px;		/* left must be same than right to keep checkbox centered */
	margin-right: 2px;		/* left must be same than right to keep checkbox centered */
	vertical-align: middle;
}
select.flat.selectlimit {
	width: 102px;
	text-align: end;
	border-bottom: 1px solid var(--inputbordercolor);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.marginrightonly {
	margin-right: 10px !important;
}
.marginleftonly {
	margin-left: 10px !important;
}
.marginleftonlyshort {
	margin-left: 4px !important;
}
.nomarginleft {
	margin-left: 0px !important;
}
.nomarginright {
	margin-right: 0px !important;
}
.marginrightonly {
	margin-right: 10px !important;
}
.marginrightonlyshort {
	margin-right: 4px !important;
}
.marginrightonlylarge {
	margin-right: 20px !important;
}
.margintoponly {
	margin-top: 10px !important;
}
.margintoponlyshort {
	margin-top: 3px !important;
}
.marginbottomonly {
	margin-bottom: 10px !important;
}
.marginbottomonlyshort {
	margin-bottom: 3px !important;
}
.nomargintop {
	margin-top: 0 !important;
}
.nomarginbottom {
	margin-bottom: 0 !important;
}
.selectlimit, .selectlimit:focus {
	border-left: none !important;
	border-top: none !important;
	border-right: none !important;
	outline: none;
}
.strikefordisabled {
	text-decoration: line-through;
}
.widthdate {
	width: 130px;
}
/* using a tdoverflowxxx make the min-width not working */
.tdnooverflowimp {
   text-overflow: unset;
}
.tdoverflow {
	max-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.spanoverflow {
	overflow-x: clip;
	text-overflow: ellipsis;
}
.tdoverflowmax50 {			/* For tdoverflow, the max-midth become a minimum ! */
	max-width: 50px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tdoverflowmax60 {			/* For tdoverflow, the max-midth become a minimum ! */
	max-width: 60px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tdoverflowmax80 {			/* For tdoverflow, the max-midth become a minimum ! */
	max-width: 80px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tdoverflowmax80imp {			/* For tdoverflow, the max-midth become a minimum ! */
	max-width: 80px !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tdoverflowmax100 {			/* For tdoverflow, the max-midth become a minimum ! */
	max-width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tdoverflowmax100imp {			/* For tdoverflow, the max-midth become a minimum ! */
	max-width: 100px !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tdoverflowmax125 {			/* For tdoverflow, the max-midth become a minimum ! */
	max-width: 125px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tdoverflowmax150 {			/* For tdoverflow, the max-midth become a minimum ! */
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tdoverflowmax200 {			/* For tdoverflow, the max-midth become a minimum ! */
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tdoverflowmax250 {			/* For tdoverflow, the max-midth become a minimum ! */
	max-width: 250px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tdoverflowmax300 {			/* For tdoverflow, the max-midth become a minimum ! */
	max-width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tdoverflowmax350 {			/* For tdoverflow, the max-midth become a minimum ! */
	max-width: 350px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tdoverflowmax400 {			/* For tdoverflow, the max-midth become a minimum ! */
	max-width: 400px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tdoverflowmax500 {			/* For tdoverflow, the max-midth become a minimum ! */
	max-width: 500px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tdoverflowauto {
	max-width: 0;
	overflow: auto;
}
.divintowithtwolinesmax {
	width: 75px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.twolinesmax, .twolinesmax-normallineheight {				/* To be used into a <div class="twolinesmax-normallineheight minwidth200onall"> into a td for example */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	height: auto !important;
	word-break: break-word;
}
.twolinesmax-normallineheight {
	line-height: normal;
}
.tenlinesmax {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 10;
	overflow: hidden;
}

.tablelistofcalendars {
	margin-top: 25px !important;
}
.navselectiondate {
	width: 250px;
}

/* Styles for amount on card */
table.paymenttable td.amountpaymentcomplete, table.paymenttable td.amountremaintopay, table.paymenttable td.amountremaintopayback {
	padding-top: 0px;
	padding-bottom: 0px;
}
.amountalreadypaid {
	white-space: nowrap;
}
.amountpaymentcomplete {
	color: var(--amountpaymentcomplete);
	font-weight: bold;
	font-size: 1.7em;
	white-space: nowrap;
}
.amountremaintopay {
	color: var(--amountremaintopaycolor);
	font-weight: bold;
	font-size: 1.7em;
	white-space: nowrap;
}
.amountremaintopayback {
	color: var(--amountremaintopaybackcolor);
	font-weight: bold;
	font-size: 1.7em;
	white-space: nowrap;
}
.amountpaymentneutral {
	font-weight: bold;
	font-size: 1.7em;
	white-space: nowrap;
}


.onlinepaymentbody .amountpaymentcomplete {
	background-color: var(--amountpaymentcomplete);
	color: #fff;
	padding: 10px;
	border-radius: 5px;
}

.savingdocmask {
	margin-top: 6px;
	margin-bottom: 12px;
}
#builddoc_form ~ .showlinkedobjectblock {
	margin-top: 20px;
}

/* For the long description of module */
.moduledesclong p img, .moduledesclong p a img {
	max-width: 90% !important;
	height: auto !important;
}
.imgdoc {
	margin: 18px;
	border: 1px solid #ccc;
	box-shadow: 1px 1px 25px #aaa;
	max-width: calc(100% - 56px);
}
.fa-file-text-o, .fa-file-code-o, .fa-file-powerpoint-o, .fa-file-excel-o, .fa-file-word-o, .fa-file-o, .fa-file-image-o, .fa-file-video-o, .fa-file-audio-o, .fa-file-archive-o, .fa-file-pdf-o {
	color: #055;
}

.fa-15 {
	font-size: 1.5em;
}

.fa-map-marked-alt:before {
	font-size: 0.85em;
}

.text-security {
	-webkit-text-security: disc;
}

/* DOL_XXX for future usage (when left menu has been removed). If we do not use datatable */
/*.table-responsive {
	width: calc(100% - 330px);
	margin-bottom: 15px;
	overflow-y: hidden;
	-ms-overflow-style: -ms-autohiding-scrollbar;
}*/

/* Style used for most tables */
div.fiche>div.tabBar>form>div.div-table-responsive {
	min-height: 392px;
}
.div-table-responsive, .div-table-responsive-no-min {
	overflow-x: auto;
	min-height: 0.01%;
}
.div-table-responsive {
	line-height: var(--heightrow);
}

/* Style used for full page tables with field selector and no content after table (priority before previous for such tables) */
div.fiche>form>div.div-table-responsive {
	min-height: 392px;
}
div.fiche>form>div.div-table-responsive, div.fiche>form>div.div-table-responsive-no-min {
	overflow-x: auto;
}

/* Style used for table in public ticket */
div.ticketpublicarealist>form>div.div-table-responsive {
	min-height: 392px;
}


.display-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.flex-item {
	flex:1;
}
.flex-item-uploadfile {
	border: 2px solid #888;
	border-radius: 5px;
	cursor: pointer;
	text-align: center;
	min-height: 40px;
	background: #f4f4f4;
	padding: 20px 10px 20px 10px;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
	width: 280px;
	margin: 20px 20px 20px 20px;
}
.flexcontainer {
		flex-flow: row wrap;
	justify-content: flex-start;
}
.thumbstat {
	min-width: 148px;
}
.thumbstat150 {
	min-width: 168px;
	max-width: 169px;
	/* width: 168px; If I use with, there is trouble on size of flex boxes solved with min+max that is a little bit higher than min */
}
.thumbstat, .thumbstat150 {
	flex-grow: 1;
	flex-shrink: 0;
}

select.selectarrowonleft {
	direction: rtl;
}
select.selectarrowonleft option {
	direction: ltr;
}

table[summary="list_of_modules"] .fa-cog {
	font-size: 1.5em;
}

.linkedcol-element {
	min-width: 100px;
}
.linkedcol-amount {
	white-space: nowrap;
}

.img-skinthumb {
	width: 160px;
	height: 100px;
}

maxscreenheightless200 {
	max-height: 700px;	/* we guarantee height of 500 */
}
.maxscreenheightless300 {
	max-height: 700px;	/* we guarantee height of 500 */
}




/* ============================================================================== */
/* Styles to hide objects                                                         */
/* ============================================================================== */

.clearboth  { clear:both; }

.hideobject { display: none; }
.showonsmartphone { display: none; }
.minwidth25 { min-width: 25px; }
.minwidth50 { min-width: 50px; }
.minwidth75 { min-width: 75px; }
.nominwidth { min-width: fit-content !important; }
/* rule for not too small screen only */
@media only screen and (min-width: 224px)	/* reduction 3 */
{
	.width20  { width: 20px; }
	.width25  { width: 25px; }
	.width50  { width: 50px; }
	.width75  { width: 75px; }
	.width100 { width: 100px; }
	.width200 { width: 200px; }
	.minwidth100 { min-width: 100px; }
	.minwidth150 { min-width: 150px; }
	.minwidth200 { min-width: 200px; }
	.minwidth250 { min-width: 250px; }
	.minwidth300 { min-width: 300px; }
	.minwidth400 { min-width: 400px; }
	.minwidth500 { min-width: 500px; }
	.minwidth50imp  { min-width: 50px !important; }
	.minwidth75imp  { min-width: 75px !important; }
	.minwidth100imp { min-width: 100px !important; }
	.minwidth150imp { min-width: 150px !important; }
	.minwidth200imp { min-width: 200px !important; }
	.minwidth250imp { min-width: 250px !important; }
	.minwidth300imp { min-width: 300px !important; }
	.minwidth400imp { min-width: 400px !important; }
	.minwidth500imp { min-width: 500px !important; }
}
.widthauto { width: auto; }
.width20  { width: 20px; }
.width25  { width: 25px; }
.width40  { width: 40px; }
.width50  { width: 50px; }
.width75  { width: 75px; }
.width100 { width: 100px; }
.width125 { width: 125px; }
.width150 { width: 150px; }
.width200 { width: 200px; }
.width250 { width: 250px; }
.width300 { width: 300px; }
.width400 { width: 400px; }
.width500 { width: 500px; }
.maxwidth25  { max-width: 25px; }
.maxwidth40  { max-width: 40px; }
.maxwidth50  { max-width: 50px; }
.maxwidth75  { max-width: 75px; }
.maxwidthdate  { max-width: 95px; }
.maxwidth100 { max-width: 100px; }
.maxwidth125 { max-width: 125px; }
.maxwidth150 { max-width: 150px; }
.maxwidth200 { max-width: 200px; }
.maxwidth250 { max-width: 250px; }
.maxwidth300 { max-width: 300px; }
.maxwidth400 { max-width: 400px; }
.maxwidth500 { max-width: 500px; }
.maxwidth750 { max-width: 750px; }
.maxwidth1000 { max-width: 1000px; }
.maxwidth50imp  { max-width: 50px !important; }
.maxwidth75imp  { max-width: 75px !important; }

.minwidth100onall { min-width: 100px !important; }
.minwidth125onall { min-width: 125px !important; }
.minwidth200onall { min-width: 200px !important; }
.minwidth250onall { min-width: 250px !important; }

.minheight20 { min-height: 20px; }
.minheight30 { min-height: 30px; }
.minheight40 { min-height: 40px; }
.titlefieldcreate { width: 20%; }
.titlefield       { /* width: 25%; */ min-width: 150px; width: 25%; }
.titlefieldmiddle { width: 45%; }
.titlefieldmax45 { max-width: 45%; min-width: 180px; }
.imgmaxwidth100 { max-width: 100px; }
.imgmaxwidth180 { max-width: 180px; }
.imgmaxheight50 { max-height: 50px; }

.width20p { width:20%; }
.width25p { width:25%; }
.width40p { width:40%; }
.width50p { width:50%; }
.width60p { width:60%; }
.width75p { width:75%; }
.width80p { width:80%; }
.width100p { width:100%; }


/* Force values for small screen 1440 */
@media only screen and (max-width: 1440px)
{
	.titlefield { /* width: 30% !important; */ }
	.titlefieldcreate { width: 30% !important; }
	.minwidth50imp  { min-width: 50px !important; }
	.minwidth75imp  { min-width: 75px !important; }
	.minwidth100imp { min-width: 100px !important; }
	.minwidth125imp { min-width: 125px !important; }
	.minwidth150imp { min-width: 150px !important; }
	.minwidth200imp { min-width: 200px !important; }
	.minwidth250imp { min-width: 250px !important; }
	.minwidth300imp { min-width: 300px !important; }
	.minwidth400imp { min-width: 300px !important; }
	.minwidth500imp { min-width: 300px !important; }

	.linkedcol-element {
		min-width: unset;
	}
}

/* Force values for small screen 1000 */
@media only screen and (max-width: 1000px)
{
	.titlefieldmax45 { min-width: 100px; }
	.maxwidthonsmartphone { max-width: 100px; }
	.minwidth50imp  { min-width: 50px !important; }
	.minwidth75imp  { min-width: 75px !important; }
	.minwidth100imp { min-width: 100px !important; }
	.minwidth125imp { min-width: 125px !important; }
	.minwidth150imp { min-width: 110px !important; }
	.minwidth200imp { min-width: 110px !important; }
	.minwidth250imp { min-width: 115px !important; }
	.minwidth300imp { min-width: 120px !important; }
	.minwidth400imp { min-width: 150px !important; }
	.minwidth500imp { min-width: 250px !important; }
}

select.widthcentpercentminusx, span.widthcentpercentminusx:not(.select2-selection):not(.select2-dropdown), input.widthcentpercentminusx {
	width: calc(100% - 52px) !important;
	display: inline-block;
	min-width: 100px;
}
select.widthcentpercentminusxx, span.widthcentpercentminusxx:not(.select2-selection):not(.select2-dropdown), input.widthcentpercentminusxx {
	width: calc(100% - 70px) !important;
	display: inline-block;
	min-width: 100px;
}

/* Disabled: Has no effect, even on chrome
datalist option {
			width: 300px;
		}
datalist {
			position: absolute;
			width: 200px;
			max-height: 150px;
			overflow-y: auto;
			background-color: white;
			border: 1px solid #ccc;
			border-radius: 4px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
*/


/* Force values for small screen 768 */
@media only screen and (max-width: 768px)
{
	div.refidno {
		font-size: 0.92em !important;
	}
	.divadvancedsearchfield {
		padding-left: 5px;
		padding-right: 5px;
	}

	div.divphotoref {
		padding-right: 10px !important;
	}

	.hideonsmartphone { display: none; }
	.hideonsmartphoneimp { display: none !important; }
	.showonsmartphone { display: block !important; }

	.margintoponsmartphone { margin-top: 6px; }

	span.pictotitle {
		margin-left: 0 !important;
	}
	div.fiche>table.table-fiche-title {
		margin-top: 7px !important;
		margin-bottom: 15px !important;
	}

	select.minwidth100imp, select.minwidth100, select.minwidth200, select.minwidth200imp, select.minwidth300 {
		width: calc(100% - 40px) !important;
		min-width: 100px;
		display: inline-block;
	}

	select.widthcentpercentminusx, span.widthcentpercentminusx:not(.select2-selection), input.widthcentpercentminusx {
		width: calc(100% - 52px) !important;
		display: inline-block;
		min-width: 100px;
	}
	select.widthcentpercentminusxx, span.widthcentpercentminusxx:not(.select2-selection), input.widthcentpercentminusxx {
		width: calc(100% - 70px) !important;
		display: inline-block;
		min-width: 100px;
	}

	input.maxwidthinputfileonsmartphone {
		width: 175px;
	}

	input.buttonpayment, button.buttonpayment, div.buttonpayment {
		min-width: 270px;
	}

	.smallonsmartphone {
		font-size: 0.8em;
	}

	.nopaddingtoponsmartphone {
		padding-top: 0 !important;
	}
	.nopaddingbottomonsmartphone {
		padding-bottom: 0 !important;
	}
}

/* Force values for small screen 570 */
@media only screen and (max-width: 570px)
{
	div.refidno {
		font-size: 0.92em !important;
	}

	div#login_left, div#login_right {
		min-width: 150px !important;
		max-width: 240px !important;
		padding-left: 5px !important;
		padding-right: 5px !important;
	}

	div.login_block {
		height: 64px !important;
	}

	.divmainbodylarge { margin-left: 10px !important; margin-right: 10px !important; }

	.tdoverflowmax100onsmartphone {			/* For tdoverflow, the max-midth become a minimum ! */
		max-width: 100px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.tdoverflowmax150onsmartphone {			/* For tdoverflow, the max-midth become a minimum ! */
		max-width: 100px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.border tbody tr, .border tbody tr td, div.tabBar table.border tr, div.tabBar table.border tr td,
	div.tabBar div.border .table-border-row, div.tabBar div.border .table-key-border-col, div.tabBar div.border .table-val-border-col {
		height: 40px !important;
	}
	div.tabBar .listofinvoicetype table tr, div.tabBar .listofinvoicetype table tr td {
		height: 2.2em !important;
	}


	div.tabs div.tab a.tab  {
		max-width: 180px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.quatrevingtpercent, .inputsearch {
		width: 95%;
	}

	select {
		padding-top: 4px;
		padding-bottom: 5px;
	}

	.login_table .tdinputlogin {
		min-width: unset !important;
	}
	input, input[type=text], input[type=password], select, textarea     {
		min-width: 20px;
	}
	.trinputlogin input[type=text], input[type=password] {
		max-width: 180px;
	}
	.vmenu .searchform input {
		max-width: 138px;	/* length of input text in the quick search box when using a smartphone and without dolidroid */
	}

	.noenlargeonsmartphone { width : 50px !important; display: inline !important; }
	.maxwidthonsmartphone, #search_newcompany.ui-autocomplete-input { max-width: 100px; }
	.maxwidth50onsmartphone { max-width: 40px; }
	.maxwidth75onsmartphone { max-width: 50px; }
	.maxwidth100onsmartphone { max-width: 70px; }
	.maxwidth125onsmartphone { max-width: 100px; }
	.maxwidth150onsmartphone { max-width: 120px; }
	.maxwidth150onsmartphoneimp { max-width: 120px !important; }
	.maxwidth200onsmartphone { max-width: 200px; }
	.maxwidth250onsmartphone { max-width: 250px; }
	.maxwidth300onsmartphone { max-width: 300px; }
	.maxwidth400onsmartphone { max-width: 400px; }
	.minwidth150 { min-width: 110px !important; }
	.minwidth50imp  { min-width: 50px !important; }
	.minwidth75imp  { min-width: 75px !important; }
	.minwidth100imp { min-width: 100px !important; }
	.minwidth125imp { min-width: 125px !important; }
	.minwidth150imp { min-width: 110px !important; }
	.minwidth200imp { min-width: 110px !important; }
	.minwidth250imp { min-width: 115px !important; }
	.minwidth300imp { min-width: 120px !important; }
	.minwidth400imp { min-width: 200px !important; }
	.minwidth500imp { min-width: 250px !important; }
	.titlefield { width: auto; min-width: 125px; }
	.titlefieldcreate { width: auto !important; min-width: 125px; }

	#tooltip {
		position: absolute;
		width: 300px;
	}

	/* input, input[type=text], */
	select {
		width: 98%;
		min-width: 40px;
	}

	div.divphotoref {
		padding-right: 5px;
		padding-bottom: 5px;
	}
	img.photoref, div.photoref {
		border: 1px solid rgba(0, 0, 0, 0.2);
		box-shadow: none;
		padding: 4px;
		height: 20px;
		width: 20px;
		object-fit: contain;
	}

	div.statusref {
		padding-right: 10px;
		max-width: 55%;
	   }
	div.statusref img, div.statusrefbis {
		padding-right: 3px !important;
   }
	/* TODO
	div.statusref {
		padding-top: 0px !important;
		padding-left: 0px !important;
		border: none !important;
	   }
	*/

	input.buttonpayment {
		min-width: 300px;
	}

	.colorblack.totalnboflines {
		margin-left: 4px !important;
	}
}

/* Force values for small screen 320 */
@media only screen and (max-width: 320px)
{
	.maxwidth300 { max-width: 260px; }
}


.linkobject { cursor: pointer; }

table.tableforfield tr:not(.liste_titre)>td:first-of-type:not(.nottitleforfield), tr.trforfield:not(.liste_titre)>td:first-of-type, div.tableforfield div.tagtr:not(.liste_titre)>div.tagtd:first-of-type {
	color: var(--tableforfieldcolor);
}



/* ============================================================================== */
/* Styles for dragging lines                                                      */
/* ============================================================================== */

.dragClass {
	color: #002255;
}
td.showDragHandle {
	cursor: move;
}
.tdlineupdown {
	white-space: nowrap;
	min-width: 10px;
}


/* ============================================================================== */
/* Styles de positionnement des zones                                             */
/* ============================================================================== */

#id-container {
	width: 100%;
		/* table-layout: fixed; */

}
#id-right, #id-left {
	display: table-cell;			/* DOL_XXX Empeche fonctionnement correct du scroll horizontal sur tableau, avec datatable ou CSS */
	float: none;
	vertical-align: top;
}
#id-left {
	padding-top: 20px;
	padding-bottom: 5px;
		padding-top: 18px;
	}
#id-right {	/* This must stay id-right and not be replaced with echo $right */
	padding-top: 14px;
	width: 100%;
	background: var(--colorbackbody);
	padding-bottom: 20px;
}
.bodyforlist #id-right {
	padding-bottom: 4px;
}
.bodyforlist.poslist #id-right {
	display: block;
}

.page-modulehelp div#id-right {
	display: flex;
}

/* DOL_XXX For having horizontal scroll into array (like with smartphone) */

.classforhorizontalscrolloftabs #id-container {
	width: 100%;
}
.classforhorizontalscrolloftabs .side-nav {
	display: block;
	float: left;
}
.classforhorizontalscrolloftabs #id-right {
	width: calc(100% - 270px);
	display: inline-block;
}

/*
.classforhorizontalscrolloftabs  .fiche .div-table-responsive
{
	transform:rotateX(180deg);
	-ms-transform:rotateX(180deg);
	-webkit-transform:rotateX(180deg);
}
.classforhorizontalscrolloftabs  .fiche .div-table-responsive-inside
{
	transform:rotateX(180deg);
	-ms-transform:rotateX(180deg);
	-webkit-transform:rotateX(180deg);
}
*/


.side-nav-vert {
	position: sticky;
	top: 0px;
	z-index: 1005;
}

@media screen and (prefers-color-scheme: dark) {
	.side-nav-vert {
		border-bottom: 1px solid #888;
	}
}

.side-nav {
	display: table-cell;
	border-right: 1px solid #ECECEC;
	box-shadow: 3px 0 6px -2px #eee;
	background: var(--colorbackvmenu1);
	transition: left 0.5s ease;
}

.side-nav, .login_block {
	transition: left 0.5s ease;
}

div.blockvmenulogo
{
	border-bottom: 0 !important;
}
.menulogocontainer {
	margin: 6px;
	margin-left: 11px;
	margin-right: 9px;
	padding: 0;
	height: 35px;
	/* width: 100px; */
	max-width: 100px;
	vertical-align: middle;
}
.menulogocontainer img.mycompany {
	object-fit: contain;
	width: inherit;
	height: inherit;
	image-rendering: -webkit-optimize-contrast;
	border-radius: 3px;
}
#mainmenutd_companylogo::after, #mainmenutd_menu::after {
	content: unset !important;
}
li#mainmenutd_companylogo .tmenucenter {
	width: unset;
}
li#mainmenutd_companylogo {
	min-width: unset !important;
}

div.blockvmenupair, div.blockvmenuimpair {
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
	border-bottom: 1px solid #eaeaea;
	padding-left: 0 !important;
}
div.blockvmenuend, div.blockvmenubookmarks {
	border: none !important;
	padding-left: 0 !important;
}
div.vmenu, td.vmenu {
	padding-right: 10px !important;
}
.blockvmenu .menu_titre {
	margin-top: 4px;
	margin-bottom: 1px;
}

/* Try responsive even not on smartphone
#id-container {
	width: 100%;
}
#id-right {
	width: calc(100% - 200px) !important;
}
*/


.menuhider { display: none !important; }
.menuhider .mainmenu.menu.topmenuimage {
	margin-top: 0px !important;
}


/* rule to reduce top menu - 3rd reduction: We hide the left menu */
@media only screen and (max-width: 224px)	/* reduction 3 */
{
	/* no side-nav */
	body.sidebar-collapse .side-nav {
		display: none;
	}

	/* if no side-nav, we don't need to have width forced to calc(100% - 210px); */
	.classforhorizontalscrolloftabs #id-right {
		width: 100%;
		/* width: unset; */
		/* display: unset; */
	}

	body.sidebar-collapse .login_block {
		display: none;
	}

	.menuhider { display: block !important; }
	.dropdown-user-image { display: none; }
	.user-header { height: auto !important; color: var(--colortextbackhmenu); }

	#id-container {
		display: table;					/* DOL_XXX Empeche fonctionnement correct du scroll horizontal sur tableau, avec datatable ou CSS */
		table-layout: fixed;
		width: 100%;
	}
	.side-nav {
		border-bottom: 1px solid #BBB;
		background: #FFF;
		padding-left: 20px;
		padding-right: 20px;
		position: absolute;
			z-index: 90;
	}
	div.blockvmenulogo
	{
		border-bottom: 0 !important;
	}
	div.blockvmenupair, div.blockvmenuimpair, div.blockvmenubookmarks, div.blockvmenuend {
		border-top: none !important;
		border-left: none !important;
		border-right: none !important;
		border-bottom: 1px solid #eaeaea;
		padding-left: 0 !important;
	}
	div.vmenu, td.vmenu {
		padding-right: 6px !important;
	}
	div.fiche {
		margin-left: 9px !important;
		margin-right: 10px !important;
	}

	.pagination .fa-chevron-left, .pagination .fa-chevron-right {
		font-size: 1.2em;
	}
}

@media only screen and (min-width: 768px) and (max-width: 224px)	/* reduction 3 */
{
	div.fiche {
		margin-left: 13px !important;
		margin-right: 14px !important;
	}
}


div.fiche {
	margin-left: 44px;
	margin-right: 38px;
		}
.dol_openinpopup div.fiche {
	margin-left: 24px;
	margin-top: 0px;
}

.page-modulehelp div.fiche {
	width: 100%;
}
body.onlinepaymentbody div.fiche {	/* For online payment page */
	margin: 20px !important;
}
div.fiche>table:first-child {
	margin-bottom: 15px;
}
div.fichecenter {
	width: 100%;
	clear: both;	/* This is to have div fichecenter that are true rectangles */
}
div.fichecenterbis {
	margin-top: 8px;
}
div.fichethirdleft {
	float: left;
	width: calc(50% - 20px);
	}
div.fichetwothirdright {
	float: right;
	width: calc(50% - 20px);
	}
div.fichehalfleft {
	float: left;
	width: calc(50% - 20px);
	margin-bottom: 20px;
}
div.fichehalfright {
	float: right;
	width: calc(50% - 20px);
}
div.fichehalfright {
	}

/*div.firstcolumn div.box {
	padding-right: 10px;
}
div.secondcolumn div.box {
	padding-left: 10px;
}*/
div.firstcolumn > table.noborder, div.secondcolumn > table.noborder, div.firstcolumn > div > table.noborder, div.secondcolumn > div > table.noborder {
	margin-bottom: 14px;
}

/* Force values on one column for small screen */
@media only screen and (max-width: 1024px)
{
	div.fiche {
		margin-left: 20px;
		margin-right: 6px;
	}
	div.fichecenter {
		width: 100%;
		clear: both;	/* This is to have div fichecenter that are true rectangles */
	}
	div.fichecenterbis {
		margin-top: 8px;
	}
	div.fichethirdleft {
		float: none;
		width: auto;
		padding-bottom: 6px;
	}
	div.fichetwothirdright {
		float: none;
		width: auto;
		padding-bottom: 6px;
	}
	div.fichehalfleft {
		float: none;
		width: auto;
	}
	div.fichehalfright {
		float: none;
		width: auto;
	}
	div.fichehalfright {
		margin-top: 10px;
	}
	div.firstcolumn div.box {
		padding-right: 0px;
	}
	div.secondcolumn div.box {
		padding-left: 0px;
	}
}

/* Force values on one column for small screen */
@media only screen and (max-width: 1440px)
{
	div.fichehalfleft-lg {
		float: none;
		width: auto;
	}
	div.fichehalfright-lg {
		float: none;
		width: auto;
	}

	.fichehalfright-lg .fichehalfright {
		padding-left:0;
	}
}

/* For table into table into card */
div.fichehalfright tr.liste_titre:first-child td table.nobordernopadding td {
	padding: 0 0 0 0;
}
div.nopadding {
	padding: 0 !important;
}

.containercenter {
	display : table;
	margin : 0px auto;
}

td.nobordernopadding.widthpictotitle.col-picto {
	color: var(--colortexttitlenotab);
	opacity: 0.85;
}
.table-list-of-attached-files .col-picto, .table-list-of-links .col-picto {
	opacity: 0.7 !important;
	font-size: 0.7em;
	width: 20px;
}
.table-list-of-attached-files .col-picto .widthpictotitle, .table-list-of-links .col-picto .widthpictotitle {
	width: unset;
	color: #999;
}

/*
span.widthpictotitle.pictotitle {
	background: var(--colortexttitlenotab);
	opacity: 0.8;
	color: #fff !important;
	padding: 7px;
	border-radius: 2px;
	min-width: 30px;
	text-align: center;
}
*/
.pictotitle {
	margin-right: 8px;
	/* margin-bottom: 4px; */
}

.pictoobjectwidth {
	width: 14px;
}
.pictosubstatus {
	padding-left: 2px;
	padding-right: 2px;
}
.pictostatus {
	width: 15px;
	vertical-align: middle;
	margin-top: -3px
}
.pictowarning, .pictoerror, .pictopreview, .pictonopreview, .picto.error {
	padding-left: 3px;
}
.pictowarning {
	/* vertical-align: text-bottom; */
	color: #bc9526;
}
.pictoerror {
	color: #af4705;
}
.pictomodule {
	width: 14px;
}
.pictomodule {
	width: 14px;
}
.fiche .arearef img.pictoedit, .fiche .arearef span.pictoedit,
.fiche .fichecenter img.pictoedit, .fiche .fichecenter span.pictoedit,
.tagtdnote span.pictoedit {
	opacity: 0.4;
}
.pictofixedwidth {
	text-align: start;
	width: 20px;	/* Do not use em unit here */
	/* padding-right: 0; */
}
img.pictofixedwidth {
	width: 18px;	/* Do not use em unit here */
	padding-right: 2px;
}

.colorthumb {
	padding-left: 1px !important;
	padding-right: 1px;
	padding-top: 1px;
	padding-bottom: 1px;
	width: 50px;
	text-align:center;
}
div.attacharea {
	padding-top: 18px;
	padding-bottom: 10px;
}
div.attachareaformuserfileecm {
	padding-top: 0;
	padding-bottom: 6px;
}

div.arearef {
	padding-top: 2px;
	margin-bottom: 10px;
	padding-bottom: 10px;
}
div.arearefnobottom {
	padding-top: 2px;
	padding-bottom: 4px;
}
div.heightref {
	min-height: 80px;
}
div.divphotoref:last-child {
	padding-right: 30px;
}
div.paginationref {
	padding-bottom: 10px;
}
/* TODO
div.statusref {
	   padding: 10px;
	   border: 1px solid #bbb;
	   border-radius: 6px;
} */
div.statusref {
	float: right;
	padding-left: 12px;
	margin-top: 8px;
	margin-bottom: 10px;
	clear: both;
	text-align: right;
}
div.statusref img {
	padding-left: 8px;
	padding-right: 9px;
	vertical-align: text-bottom;
	width: 18px;
}
div.statusrefbis {
	padding-left: 8px;
	padding-right: 9px;
	vertical-align: text-bottom;
}
img.photoref, div.photoref {
	/* border: 1px solid #DDD; */
	box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2);
	padding: 4px;
	height: 80px;
	width: 80px;
	object-fit: contain;
}
img.photokanban, div.photokanban {
	padding: 0;
	border: none;
	box-shadow: none;
	vertical-align: middle;
}
div.photoref .fa, div.photoref .fas, div.photoref .far {
	font-size: 2.5em;
}
img.fitcontain {
	object-fit: contain;
}
div.photoref {
	display:table-cell;
	vertical-align:middle;
	text-align:center;
}
.difforspanimgright {
	display: table-cell;
	padding-right: 10px;
}
img.photorefnoborder {
	padding: 2px;
	height: 48px;
	width: 48px;
	object-fit: contain;
	border: 1px solid #AAA;
	border-radius: 100px;
}
.underrefbanner {
}
.underbanner {
	border-bottom: 1px solid var(--colortopbordertitle1);
	/* border-bottom: 2px solid var(--colorbackhmenu1); */
}
.trextrafieldseparator td, .trextrafields_collapse_last td {
	/* border-bottom: 2px solid var(--colorbackhmenu1) !important; */
	/* border-bottom: 2px solid var(--colortopbordertitle1) !important; */
}

.tdhrthin {
	margin: 0 !important;
	padding-bottom: 0 !important;
}

/* ============================================================================== */
/* Menu top et 1ere ligne tableau                                                 */
/* ============================================================================== */

#id-top {
	background: var(--colorbackhmenu1);
		}

div#tmenu_tooltip {
	padding-right: 225px;

  -webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	 -khtml-user-select: none; /* Konqueror HTML */
	   -moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* Internet Explorer/Edge */
			user-select: none; /* Non-prefixed version, currently
								  supported by Chrome and Opera */


}

div.topmenuimage {
}

div.tmenudiv {
	position: relative;
	display: block;
	white-space: nowrap;
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
	padding: 0px 0px 0px 0px;	/* t r b l */
	margin: 0px 0px 0px 0px;	/* t r b l */
	font-size: 13px;
	font-weight: normal;
	text-decoration: none;
}
div.tmenudisabled, a.tmenudisabled {
	opacity: 0.6;
}
a.tmenu, a.tmenusel, a.tmenudisabled {
	/* font-weight: 300; */
}
a.tmenudisabled:link, a.tmenudisabled:visited, a.tmenudisabled:hover, a.tmenudisabled:active {
	padding: 0px 5px 0px 5px;
	white-space: nowrap;
	color: var(--colortextbackhmenu);
	text-decoration: none;
	cursor: not-allowed;
}
span.mainmenuaspan.tmenudisabled {
	color: var(--colortextbackhmenu);
	opacity: 0.5;
	cursor: not-allowed;
}

a.disabled, span.tmenu {
	color: #aaa;
	text-decoration: none !important;
	cursor: default;
}

a.tmenu:link, a.tmenu:visited, a.tmenu:hover, a.tmenu:active {
	padding: 0px 2px 0px 2px;
	margin: 0px 0px 0px 0px;
	white-space: nowrap;
	color: var(--colortextbackhmenu);
	text-decoration: none;
}
a.tmenusel:link, a.tmenusel:visited, a.tmenusel:hover, a.tmenusel:active {
	padding: 0px 2px 0px 2px;
	margin: 0px 0px 0px 0px;
	white-space: nowrap;
	color: var(--colortextbackhmenu);
	text-decoration: none !important;
}


ul.tmenu {	/* t r b l */
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	list-style: none;
	display: table;
}
ul.tmenu li {	/* We need this to have background color when menu entry wraps on new lines */
}
li#mainmenutd_home {
	margin-left: 5px;
}
li.tmenu, li.tmenusel {
	min-width: 66px;	text-align: center;
	vertical-align: bottom;
		float: left;
		position:relative;
	display: block;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	font-weight: normal;
}
li.menuhider:hover {
	background-image: none !important;
}

li.tmenusel::after, li.tmenu:hover::after{
	content: "";
	position:absolute;
	bottom:0px;
	left: 50%;
	left: calc(50% - 6px);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0px 6px 5px 6px;
	border-color:  transparent transparent #ffffff transparent;
}

.tmenuend .tmenuleft { width: 0px; }
.tmenuend { display: none; }
div.tmenuleft
{
	float: left;
	margin-top: 0px;
		width: 5px;
			height: 50px;
	}
div.tmenucenter
{
	padding-left: 2px;
	padding-right: 2px;
	color: var(--colortextbackhmenu);
		padding-top: 2px;
	height: 50px;
		/* width: 100%; */
}
#menu_titre_logo {
	padding-top: 0;
	padding-bottom: 0;
}
div.menu_titre {
	padding-top: 4px;
	padding-bottom: 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 238px;				/* required to have overflow working. must be same than menu_contenu */
}
.mainmenuaspan
{
	padding-left: 2px;
	padding-right: 2px;
	font-family: Roboto,arial,tahoma,verdana,helvetica;
	font-weight: 400;
	opacity: 0.9;
}

div.mainmenu {
	position : relative;
	background-repeat:no-repeat;
	background-position:center top;
	height: 28px;
	margin-left: 0px;
	min-width: 40px;
}

a.tmenuimage:focus, .mainmenu.topmenuimage:focus {
	outline: none;
}
button.ui-button.ui-corner-all.ui-widget:focus {
	outline: none;
}
.tmenuimage {
	color: var(--colortextbackhmenu);
}

/* For mainmenu, we always load the img */

div.mainmenu.menu {
	top: 10px}
#mainmenutd_menu a.tmenuimage {
	display: unset;
}
a.tmenuimage {
	display: block;
}

a.tmenuimage:hover{
	text-decoration: none;
}

/* To show text of top menu according to option THEME_TOPMENU_DISABLE_IMAGE */

/* Text hidden by default when option THEME_TOPMENU_DISABLE_IMAGE */

/* Test of picto visible on hover, for all picto */

/* Text of picto visible on hover the picto only */



/* Do not load menu img for other if hidden to save bandwidth */

	/* IDE Hack <style type="text/css"> */

.mainmenu::before, .mainmenu span::before {
	font-weight: 900;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 28px;
	-webkit-font-smoothing: antialiased;
	text-align:center;
	text-decoration:none;
}
.mainmenu:not(.fab)::before, .mainmenu:not(.fab) span:not(.fab)::before {
	font-family: "Font Awesome 5 Free";
}

div.mainmenu.menu {
	background-image: none;
}


div.mainmenu.generic1::before {
	content: "\f249";
}

div.mainmenu.generic2::before {
	content: "\f249";
}

div.mainmenu.generic3::before {
	content: "\f249";
}

div.mainmenu.generic4::before {
	content: "\f249";
}

/* Define color of some picto */

.fa-phone, .fa-mobile-alt, .fa-fax {
	opacity: 0.7;
	color: #440;
}
.fa-at, .fa-external-link-alt, .fa-share-alt {
	opacity: 0.7;
	color: #304;
}
.fa-trash {
	color: #666;
}
.fa-trash:hover:before {
	color: #800;
}
.fa-play {
	color: #444;
}
.fa-link, .fa-unlink {
	color: #555;
}
.fa-project-diagram:before {
	font-size: 0.9em;
}

/* Define square Dolibarr logo in pure CSS */

.fa-dolibarr-css{
	color: #235481;
	background: currentColor;
	height: 150px;
	width: 150px;
	position: relative;
}
.fa-dolibarr-css:before{
	content: '';
	position: absolute;
	left: 19%;
	top: 17%;
	width: 25%;
	height: 25%;
	border: solid 30px white;
	border-radius: 0% 200% 200% 0% / 0% 180% 180% 0%;
}
.fa-dolibarr-css:after{
	content: '';
	position: absolute;
	left: 19%;
	top: 17%;
	width: 5px;
	height: 25%;
	border-bottom: solid 60px currentColor;
	margin-left: 30px;
}
.tmenu span.fas, .tmenu span.far {
	color: unset !important;;
	line-height: 28px;
	text-align: center;
}

.em092 {
	font-size: 0.92em;
}

.em088 {
	font-size: 0.88em;
}

.em080 {
	font-size: 0.80em;
}

	div.mainmenu.subtotal {
	background-image: url(/custom/subtotal/img/subtotal.png);
 background-position-y: 3px;
 filter: saturate(0);
}
/* A mainmenu entry was found but img file emailcollector.png not found (check /emailcollector/img/emailcollector.png), so we use a generic one */
div.mainmenu.emailcollector span::before {
content: "\f249";
}
/* icon for module deployhelper is a fa icon */
/* icon for module facturx is a fa icon */
/* A mainmenu entry was found but img file advancedsubsidiaries.png not found (check /advancedsubsidiaries/img/advancedsubsidiaries.png), so we use a generic one */
div.mainmenu.advancedsubsidiaries span::before {
content: "\f249";
}
/* A mainmenu entry was found but img file loan.png not found (check /loan/img/loan.png), so we use a generic one */
div.mainmenu.loan span::before {
content: "\f249";
}
div.mainmenu.googlerecaptcha {
	background-image: url(/custom/googlerecaptcha/img/googlerecaptcha.png);
 background-position-y: 3px;
 filter: saturate(0);
}
/* A mainmenu entry was found but img file abricot.png not found (check /abricot/img/abricot.png), so we use a generic one */
div.mainmenu.abricot span::before {
content: "\f249";
}
/* A mainmenu entry was found but img file comptabilite.png not found (check /comptabilite/img/comptabilite.png), so we use a generic one */
div.mainmenu.comptabilite span::before {
content: "\f249";
}
div.mainmenu.attachments {
	background-image: url(/custom/attachments/img/attachments.png);
 background-position-y: 3px;
 filter: saturate(0);
}
div.mainmenu.breadcrumb {
	background-image: url(/custom/breadcrumb/img/breadcrumb.png);
 background-position-y: 3px;
 filter: saturate(0);
}

.tmenuimage {
	padding:0 0 0 0 !important;
	margin:0 0 0 0 !important;
	}



/* Login */

.bodylogin
{
	background: #f0f0f0;
	display: table;
	position: absolute;
	height: 100%;
	width: 100%;
	font-size: 1em;
}
.login_center {
	display: table-cell;
	vertical-align: middle;
}
.login_vertical_align {
	padding: 10px;
	padding-bottom: 80px;
}
form#login {
	padding-bottom: 30px;
	font-size: 14px;
	vertical-align: middle;
}
.login_table_title {
	max-width: 530px;
	color: #eee !important;
	padding-bottom: 20px;
	text-shadow: 1px 1px #444;
}
.login_table label {
	text-shadow: 1px 1px 1px #FFF;
}
.login_table {
	margin: 0px auto;  /* Center */
	padding-left:6px;
	padding-right:6px;
	padding-top:16px;
	padding-bottom:12px;
	max-width: 560px;
	background-color: var(--colorbackbody);	box-shadow: 0 2px 23px 2px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(60, 60, 60, 0.15);
	border-radius: 5px;
}
.login_table input#username, .login_table input#password, .login_table input#securitycode {
	border: none;
	border-bottom: solid 1px rgba(180,180,180,.4);
	padding: 5px;
	margin-left: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-right: 10px;
}
.login_table input#username:focus, .login_table input#password:focus, .login_table input#securitycode:focus {
	outline: none !important;
}
.login_table .trinputlogin {
	font-size: 1.2em;
	margin: 8px;
}
.login_table .tdinputlogin {
	background-color: transparent;
	/* border: 2px solid #ccc; */
	min-width: 220px;
	border-radius: 2px;
}
.login_table .tdinputlogin .fa {
	padding-left: 10px;
	width: 14px;
}
.login_table .tdinputlogin input#username, .login_table .tdinputlogin input#password, .login_table .tdinputlogin input#securitycode {
	font-size: 1.1em;
}
/* Serve as reference for icon that toggles showing the password */
.login_table #tdpasswordlogin {
	position: relative;
}
.login_table #tdpasswordlogin #togglepassword {
	position: absolute;
	top: 0.7em;
	right: 11px;
	background: none;
	border: none;
	opacity: 0.3;
}
.login_table #tdpasswordlogin #togglepassword .fa {
	padding: 0 3px;
	width: auto;
}
#togglepassword .fa::before {
	visibility: hidden;
}
.trinputlogin:hover #togglepassword .fa::before, input#password:focus + #togglepassword .fa::before {
	visibility: visible;
}



/* For the static info message */
.login_main_home {
	word-break: break-word;
	width: fit-content;
}
/* For the result or error message */
.login_main_message {
	text-align: center;
	max-width: 570px;
	margin-bottom: 22px;
}
.login_main_message .error {
	/* border: 1px solid #caa; */
	padding: 10px;
}
div#login_left, div#login_right {
	display: inline-block;
	min-width: 245px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 16px;
	padding-right: 16px;
	text-align: center;
	vertical-align: middle;
}
div#login_right select#entity {
	margin-top: 10px;
}
table.login_table tr td table.none tr td {
	padding: 2px;
}
table.login_table_securitycode {
	border-spacing: 0px;
}
table.login_table_securitycode tr td {
	padding-left: 0px;
	padding-right: 4px;
}
#securitycode {
	min-width: 60px;
}
#img_securitycode {
	border: 1px solid #DDDDDD;
}
#img_logo, .img_logo {
	max-width: 160px;
	max-height: 90px;
}

div.backgroundsemitransparent {
	background:rgba(255, 255, 255, 0.7);
	padding-left: 10px;
	padding-right: 10px;
}
div.login_block {
	position: absolute;
	text-align: right;
	right: 0;
	top: 0;
	line-height: 10px;
		}
div.login_block a {
	color: var(--colortextbackhmenu);
	display: inline-block;
}
div.login_block a .atoploginusername {
	display: inline-block;
	overflow: hidden;
	max-width: 60px;
	text-overflow: ellipsis;
}
div.login_block span.aversion {
	color: var(--colortextbackhmenu);
	filter: contrast(0.7);
}
div.login_block table {
	display: inline;
}
div.login {
	white-space:nowrap;
	font-weight: bold;
	float: right;
}
div.login a {
	color: var(--colortextbackvmenu);
}
div.login a:hover {
	color: var(--colortextbackvmenu);
	text-decoration:underline;
}
.login_block_elem a span.atoplogin, .login_block_elem span.atoplogin {
	vertical-align: middle;
}
div.login_block_tools {
	margin-right: 8px;
	display: inline-block;
	vertical-align: middle;
	line-height: 53px;
	height: 51px;
}
div.login_block_other {
	display: inline-block;
	vertical-align: middle;
	clear: both;
	padding-top: 0;
	text-align: right;
	max-width: 200px;
}
div.login_block_user {
	display: inline-block;
	vertical-align: middle;
	line-height: 51px;
	height: 51px;
}

.login_block_elem {
	float: right;
	vertical-align: top;
	padding: 0px 3px 0px 4px !important;
}
.login_block_other .login_block_elem {
	line-height: 25px;
	height: 25px;
}
.atoplogin, .atoplogin:hover {
	color: var(--colortextbackhmenu) !important;
}
.login_block_getinfo {
	text-align: center;
}
.login_block_getinfo div.login_block_tools, .login_block_getinfo div.login_block_user {
	display: block;
}
.login_block_getinfo .atoplogin, .login_block_getinfo .atoplogin:hover {
	color: #333 !important;
	font-weight: normal !important;
}
.alogin, .alogin:hover {
	font-weight: normal !important;
	padding-top: 2px;
}
.alogin:hover, .atoplogin:hover {
	text-decoration:underline !important;
}
span.fa.atoplogin, span.fa.atoplogin:hover {
	font-size: 16px;
	text-decoration: none !important;
}
.atoplogin #dropdown-icon-down, .atoplogin #dropdown-icon-up {
	font-size: 0.7em;
}
img.login, img.printer, img.entity {
	/* padding: 0px 0px 0px 4px; */
	/* margin: 0px 0px 0px 8px; */
	text-decoration: none;
	color: white;
	font-weight: bold;
}
.loginbuttonexternal {
	width: 300px;
	margin: auto;
	border: 1px solid #ccc;
	padding: 10px;
	border-radius: 5px;
}


.userimg.atoplogin img.userphoto, .userimgatoplogin img.userphoto {		/* size for user photo in login bar */
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-size: contain;
	border: 1px solid;
	border-color: rgba(255, 255, 255, 0.2);
}
img.userphoto {			/* size for user photo in lists */
	border-radius: 0.72em;
	width: 1.4em;
	height: 1.4em;
	background-size: contain;
	vertical-align: middle;
}
span.userimg div.userphoto {
	background-color: #eee;
	border-radius: 0.72em;
	width: 1.4em;
	height: 1.4em;
	padding-top: 1px;
	display: inline-block;
}
img.userphotosmall {			/* size for user photo in lists */
	border-radius: 0.6em;
	width: 1.2em;
	height: 1.2em;
	background-size: contain;
	vertical-align: middle;
	background-color: #FFF;
}
img.userphotopublicvcard {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-size: contain;
	border: 1px solid;
	border-color: rgba(128, 128, 128, 0.5);
	position: relative;
	top: 25px;
	left: -110px;
}
img.userphoto[alt="Gravatar avatar"], img.photouserphoto.dropdown-user-image[alt="Gravatar avatar"] {
	background: #fff;
}
form[name="addtime"] img.userphoto {
	border: 1px solid #444;
}
.span-icon-user {
	background-image: url(/theme/fusion/img/object_user.png);
	background-repeat: no-repeat;
}
.span-icon-password {
	background-image: url(/theme/fusion/img/lock.png);
	background-repeat: no-repeat;
}

/* ============================================================================== */
/* Menu gauche                                                                    */
/* ============================================================================== */

div.vmenu, td.vmenu {
	margin-right: 2px;
	position: relative;
	float: left;
	padding: 0px;
	padding-bottom: 0px;
	padding-top: 1px;
}

.vmenu {
	width: 240px;
	margin-left: 8px;
	}
.vmenudisabled {
	margin-left: 8px !important;
}

/* Force vmenusearchselectcombo with type=text differently than without because beautify with select2 affect vmenusearchselectcombo differently */
input.vmenusearchselectcombo[type=text] {
	width: 230px !important;
}
.vmenusearchselectcombo {
	width: 238px;
}

.menu_contenu {
	padding-top: 3px;
	padding-bottom: 3px;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 238px;				/* required to have overflow working. must be same than .menu_titre */
}
#menu_contenu_logo { /* padding-top: 0; */ }
.companylogo { }
.searchform { padding-top: 10px; }
.searchform input { font-size: 16px; }


a.vmenu:link, a.vmenu:visited, a.vmenu:hover, a.vmenu:active, span.vmenu, span.vsmenu {
	white-space: nowrap; font-family: arial,tahoma,verdana,helvetica; text-align: left;
}
a.vmenu:link, a.vmenu:visited, a.vmenu:hover, a.vmenu:active,
span.vmenu, span.vmenu:link, span.vmenu:visited, span.vmenu:hover, span.vmenu:active { font-weight: bold;  }	/* bold = 600, 500 is ko with Edge on 1200x960 */
span.vmenudisabled {
	/* bold = 600, 500 is ko with Edge on 1200x960 */
	font-family: arial,tahoma,verdana,helvetica; text-align: left; font-weight: bold; color: #aaa; margin-left: 4px; white-space: nowrap;
}
a.vmenu:link, a.vmenu:visited {
	color: var(--colortextbackvmenu);
}

a.vsmenu:link, a.vsmenu:visited, a.vsmenu:hover, a.vsmenu:active, span.vmenu, span.vsmenu {
	font-family: arial,tahoma,verdana,helvetica;
	text-align: left;
	color: var(--colortextbackvmenu);
	margin: 1px 1px 1px 6px;
}
span.vsmenudisabled, font.vsmenudisabled {
	font-family: arial,tahoma,verdana,helvetica;
	text-align: left;
	color: #aaa;
	white-space: nowrap;
}
a.vsmenu:link, a.vsmenu:visited {
	color: var(--colortextbackvmenu);
	white-space: nowrap;
}
span.vsmenudisabledmargin, font.vsmenudisabledmargin { margin: 1px 1px 1px 6px; }
li a.vsmenudisabled, li.vsmenudisabled { color: #aaa !important; }

a.help:link, a.help:visited, a.help:hover, a.help:active, span.help {
	text-align: left; color: #aaa; text-decoration: none;
}
.helppresent, .helppresent:hover {
	/* color: #f3e4ac !important; */
}
.helppresentcircle {
	/*
	color: var(--colorbackhmenu1);
	filter: invert(0.5);
	*/
	color: var(--colortextbackhmenu);
	margin-left: -4px;
	display: inline-block;
	font-size: x-small;
	vertical-align: super;
	opacity: 0.95;
	transform: rotate(55deg);
}

.vmenu div.blockvmenufirst, .vmenu div.blockvmenulogo, .vmenu div.blockvmenusearchphone, .vmenu div.blockvmenubookmarks
{
	border-top: 1px solid #BBB;
}
a.vsmenu.addbookmarkpicto {
	padding-right: 10px;
}
div.blockvmenusearchphone
{
	border-bottom: none !important;
}
.vmenu div.blockvmenuend, .vmenu div.blockvmenulogo
{
	margin: 0 0 8px 2px;
}
.vmenu div.blockvmenusearch {
	margin-top: 5px;
	margin-bottom: 15px;
}
/*
.vmenu div.blockvmenusearch {
	border: 1px solid #888;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 0;
	padding-right: 0;
	border-radius: 6px;
	box-sizing: border-box;
	margin-left: 3px;
	margin-left: 3px;
}
*/
.vmenu div.blockvmenuend
{
	padding-bottom: 5px;
}
.vmenu div.blockvmenulogo
{
	padding-bottom: 10px;
	padding-top: 0;
}
div.blockvmenubookmarks
{
	padding-top: 10px !important;
	padding-bottom: 16px !important;
}
div.blockvmenupair, div.blockvmenuimpair, div.blockvmenubookmarks, div.blockvmenuend
{
	font-family: arial,tahoma,verdana,helvetica;
	text-align: left;
	text-decoration: none;
	padding-left: 5px;
	padding-right: 1px;
	padding-top: 4px;
	padding-bottom: 7px;
	margin: 0 0 0 2px;

	color: var(--colortext);
	background: var(--colorbackvmenu1);

	border-left: 1px solid #AAA;
	border-right: 1px solid #BBB;
}

div.blockvmenusearch
{
	font-family: arial,tahoma,verdana,helvetica;
	color: #000000;
	text-align: left;
	text-decoration: none;
	margin: 1px 0px 0px 2px;
	background: var(--colorbackvmenu1);
}

div.blockvmenusearch > form > div {
	padding-top: 3px;
}
div.blockvmenusearch > form > div > label {
	padding-right: 2px;
}

div.blockvmenuhelp
{
	font-family: arial,tahoma,verdana,helvetica;
	color: #000000;
	text-align: center;
	text-decoration: none;
	padding-left: 0px;
	padding-right: 6px;
	padding-top: 3px;
	padding-bottom: 3px;
	margin: 4px 0px 0px 0px;
}


td.barre {
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	background: #b3c5cc;
	font-family: arial,tahoma,verdana,helvetica;
	color: #000000;
	text-align: left;
	text-decoration: none;
}

td.barre_select {
	background: #b3c5cc;
	color: #000000;
}

td.photo {
	background: #F4F4F4;
	color: #000000;
	border: 1px solid #bbb;
}

/* ============================================================================== */
/* Panes for Main                                                   */
/* ============================================================================== */

/*
 *  PANES and CONTENT-DIVs
 */

#mainContent, #leftContent .ui-layout-pane {
	padding:    0px;
	overflow:	auto;
}

#mainContent, #leftContent .ui-layout-center {
	padding:    0px;
	position:   relative; /* contain floated or positioned elements */
	overflow:   auto;  /* add scrolling to content-div */
}


/* ============================================================================== */
/* Toolbar for ECM or Filemanager                                                 */
/* ============================================================================== */

td.ecmroot {
	padding-bottom: 0 !important;
}

.largebutton {
	/* border-top: 1px solid #CCC !important; */
	padding: 0px 4px 14px 4px !important;
	min-height: 32px;
}


a.toolbarbutton {
	margin-top: 0px;
	margin-left: 4px;
	margin-right: 4px;
	height: 30px;
}
img.toolbarbutton {
	margin-top: 1px;
	height: 30px;
}

li.expanded > a.fmdirlia.jqft.ecmjqft {
	font-weight: bold !important;
}

.divfmdirlia {
	width: calc(100% - 100px);
}

a.fmdirlia {
	white-space: break-spaces;
	word-break: break-all;
}


/* ============================================================================== */
/* Tabs                                                                           */
/* ============================================================================== */
div.tabs {
	text-align: left;
	margin-top: 10px;
	/*padding-left: 6px;
	padding-right: 6px;*/
	clear:both;
	/* height: 100%; Disabled for fix #33965 */
}
div.tabsElem {
	margin-top: 1px;
}	/* To avoid overlap of tabs when not browser */
/*
div.tabsElem a.tabactive::before, div.tabsElem a.tabunactive::before {
	content: "\f0da";
	font-family: "Font Awesome 5 Free";
	padding-right: 2px;
	font-weight: 900;
}
*/
div.tabBar {
	color: var(--colortextbacktab);
	padding-top: 16px;
	padding-left: 0px; padding-right: 0px;
	padding-bottom: 2px;
	margin: 0px 0px 30px 0px;
	border-top: 1px solid #BBB;
	/* border-bottom: 1px solid #AAA; */
	width: auto;
	background: var(--colorbackbody);
}

div.tabBar tr.titre td {
	padding-top: 20px;
}
div.fiche table:not(.table-fiche-title) tr.titre td {
	padding-top: 10px;
}

div.tabBar.tabBarNoTop {
	padding-top: 0;
	border-top: 0;
}

/* tabBar used for creation/update/send forms */
div.tabBarWithBottom {
	padding-bottom: 18px;
	border-bottom: 1px solid #bbb;
}
div.tabBarWithBottom tr {
	background: unset !important;
}
div.tabBarWithBottom table.border>tbody>tr:last-of-type>td {
	border-bottom: none !important;
}

div.tabBar table.tableforservicepart2:last-child {
	border-bottom: 1px solid #aaa;
}
.tableforservicepart1 .tdhrthin {
	height: unset;
	padding-top: 0 !important;
}
/* Payment Screen : Pointer cursor in the autofill image */
.AutoFillAmount {
	cursor:pointer;
}

div.popuptabset {
	padding: 6px;
	background: #fff;
	border: 1px solid #888;
}
div.popuptab {
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 5px;
	padding-right: 5px;
}

/* ============================================================================== */
/* Buttons for actions                                                            */
/* ============================================================================== */

div.tabsAction {
	margin: 20px 0em 30px 0em;
	padding: 0em 0em;
	text-align: right;
}
div.tabsActionNoBottom {
	margin-bottom: 0px;
}
div.tabsAction > a {
	margin-bottom: 16px !important;
}

a.tabTitle {
	color: rgba(0,0,0,0.4) !important;
	text-shadow:1px 1px 1px #ffffff;
	font-family: arial,tahoma,verdana,helvetica;
	font-weight: normal !important;
	padding: 4px 6px 2px 0px;
	margin-right: 10px;
	text-decoration: none;
	white-space: nowrap;
}
.imgTabTitle {
	max-height: 14px;
}
/*
div.tabs div.tabsElem:first-of-type a.tab {
	margin-left: 0px !important;
}
*/
a.tabunactive {
	color: var(--colortextlink) !important;
}
a.tab:link, a.tab:visited, a.tab:hover, a.tab#active {
	font-family: arial,tahoma,verdana,helvetica;
	padding: 12px 14px 10px;
	margin: 0em 0.2em;
	text-decoration: none;
	white-space: nowrap;

	background-image: none !important;
}

.tabactive, a.tab#active {
	color: var(--colortextbacktab) !important;
	/* background: var(--colorbacktabcard1) !important; */
	margin: 0 0.2em 0 0.2em !important;

	border-right: 1px solid transparent;
	border-left: 1px solid transparent;
	border-top: 1px solid transparent;
	/*border-right: 1px solid #CCC !important;
	border-left: 1px solid #CCC !important; */

		border-bottom: 3px solid var(--colorbackhmenu1) !important;
	}
.tabunactive, a.tab#unactive {
	border-right: 1px solid transparent;
	border-left: 1px solid transparent;
	border-top: 1px solid transparent;
	border-bottom: 0px !important;
}
a.tab:hover
{
	/*
	background: var(--colorbacktabcard1), 0.5)  url(/theme/fusion/img/nav-overlay3.png) 50% 0 repeat-x;
	color: var(--colortextbacktab);
	*/
	text-decoration: underline;
}
a.tabimage {
	color: #434956;
	font-family: arial,tahoma,verdana,helvetica;
	text-decoration: none;
	white-space: nowrap;
}

td.tab {
	background: #dee7ec;
}

span.tabspan {
	background: #dee7ec;
	color: #434956;
	font-family: arial,tahoma,verdana,helvetica;
	padding: 0px 6px;
	margin: 0em 0.2em;
	text-decoration: none;
	white-space: nowrap;
	border-radius:4px 4px 0px 0px;

	border-right: 1px solid #555555;
	border-left: 1px solid #D8D8D8;
	border-top: 1px solid #D8D8D8;
}

/* ============================================================================== */
/* Buttons for actions                                                            */
/* ============================================================================== */

/* IDE Hack <style type="text/css"> */

:root {
			--btncolortext: rgb(10,20,100);
			--btncolorbg: #fbfbfb;
			--btncolorborderhover: none;
			--btncolorborder: #FFF;
			--butactiondeletebg: rgb(234,228,225);
			--butactionbg: rgb(150, 110, 162, 0.95);
			--textbutaction: rgb(255, 255, 255);
}



/* ============================================================================== */
/* Buttons for actions                                                            */
/* ============================================================================== */

/*div.divButAction {
	margin-bottom: 1.4em;
}*/
div.tabsAction > a.butAction, div.tabsAction > a.butActionRefused, div.tabsAction > a.butActionDelete,
div.tabsAction > span.butAction, div.tabsAction > span.butActionRefused, div.tabsAction > span.butActionDelete,
div.tabsAction > div.divButAction > span.butAction,
div.tabsAction > div.divButAction > span.butActionDelete,
div.tabsAction > div.divButAction > span.butActionRefused,
div.tabsAction > div.divButAction > a.butAction,
div.tabsAction > div.divButAction > a.butActionDelete,
div.tabsAction > div.divButAction > a.butActionRefused {
	margin-bottom: 1.4em !important;
	margin-right: 0px !important;
}
.divButAction {
	padding: 0 !important;
	margin: 0 !important;
}
div.tabsActionNoBottom > a.butAction, div.tabsActionNoBottom > a.butActionRefused {
	margin-bottom: 0 !important;
}

span.butAction, span.butActionDelete {
	cursor: pointer;
}
.paginationafterarrows .butAction {
	font-size: 0.9em;
}
.butAction {
	background: var(--butactionbg);
	color: var(--textbutaction) !important;
	/* background: rgb(230, 232, 239); */
}
.butActionRefused, .butAction, .butActionDelete {
	border-radius: 3px;
}
:not(.center) > .butActionRefused:last-child, :not(.center) > .butAction:last-child, :not(.center) > .butActionDelete:last-child {
	margin-right: 0px !important;
}
.butActionRefused, .butAction, .butAction:link, .butAction:visited, .butAction:hover, .butAction:active, .butActionDelete, .butActionDelete:link, .butActionDelete:visited, .butActionDelete:hover, .butActionDelete:active,
.divButAction
 {
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;

	margin: 0em 1em;
	padding: 0.6em 0.7em;
	display: inline-block;
	text-align: center;
	cursor: pointer;
	color: #444;
	border: 1px solid transparent;	/* So for buttonRefused with a border, it will not have any flash effect */

	/* border: 1px solid #aaa; */
	/* border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25); */

	/*border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;*/
}
.butActionNew, .butActionNewRefused, .butActionNew:link, .butActionNew:visited, .butActionNew:hover, .butActionNew:active {
	text-decoration: none;
	text-transform: uppercase;
	font-weight: normal;

	margin: 0em 0.3em 0 0.3em !important;
	padding: 0.2em 0.7em 0.3em;
	font-family: arial,tahoma,verdana,helvetica;
	display: inline-block;
	/* text-align: center; New button are on right of screen */
	cursor: pointer;
}

.tableforfieldcreate a.butActionNew>span.fa-plus-circle, .tableforfieldcreate a.butActionNew>span.fa-plus-circle:hover,
.tableforfieldedit a.butActionNew>span.fa-plus-circle, .tableforfieldedit a.butActionNew>span.fa-plus-circle:hover,
span.butActionNew>span.fa-plus-circle, span.butActionNew>span.fa-plus-circle:hover,
a.butActionNewRefused>span.fa-plus-circle, a.butActionNewRefused>span.fa-plus-circle:hover,
span.butActionNewRefused>span.fa-plus-circle, span.butActionNewRefused>span.fa-plus-circle:hover,
a.butActionNew>span.fa-list-alt, a.butActionNew>span.fa-list-alt:hover,
span.butActionNew>span.fa-list-alt, span.butActionNew>span.fa-list-alt:hover,
a.butActionNewRefused>span.fa-list-alt, a.butActionNewRefused>span.fa-list-alt:hover,
span.butActionNewRefused>span.fa-list-alt, span.butActionNewRefused>span.fa-list-alt:hover
{
	font-size: 1em;
	padding-left: 0px;
}

a.butActionNew>span.fa, a.butActionNew>span.fa:hover,
span.butActionNew>span.fa, span.butActionNew>span.fa:hover,
a.butActionNewRefused>span.fa, a.butActionNewRefused>span.fa:hover,
span.butActionNewRefused>span.fa, span.butActionNewRefused>span.fa:hover
{
	padding-left: 6px;
	font-size: 1.5em;
	border: none;
	box-shadow: none; webkit-box-shadow: none;
}

.butAction:hover, .dropdown-holder.open > .butAction   {
	/** TODO use css var with hsl from --colortextlink to allow create darken or lighten color */
	box-shadow: 0px 0px 6px rgba(50,50,50,0.4), inset 0px 0px 200px rgba(0,0,0,0.3); /* fix hover feedback : use "inset" background to easily darken background */
}
.butActionNew:hover   {
	text-decoration: underline;
	box-shadow: unset !important;
}

.butActionDelete, .butActionDelete:link, .butActionDelete:visited, .butActionDelete:hover, .butActionDelete:active, .buttonDelete {
	background: var(--butactiondeletebg) !important;
	/* border: 1px solid #633; */
	color: #633 !important;
}

.butActionDelete:hover {
	box-shadow: 0px 0px 6px 1px rgba(50, 50, 50, 0.4), 0px 0px 0px rgba(60,60,60,0.1);
}

/*
.butActionDelete#action-delete::before {
	content: "\f1f8";
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	width: 20px;
	visibility: visible;
}
.butActionDelete#action-delete span.textbutton {
	display: none;
}
*/

.butActionRefused {
	text-decoration: none !important;
	text-transform: uppercase;
	font-weight: bold !important;

	white-space: nowrap !important;
	cursor: not-allowed !important;
	font-family: arial,tahoma,verdana,helvetica !important;
	display: inline-block;
	text-align: center;
	cursor: pointer;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	color: #999 !important;

	border: 1px solid #ccc;
}
.butActionNewRefused, .butActionNewRefused:link, .butActionNewRefused:visited, .butActionNewRefused:hover, .butActionNewRefused:active {
	text-decoration: none !important;
	text-transform: uppercase;
	font-weight: normal !important;

	white-space: nowrap !important;
	cursor: not-allowed !important;
	margin: 0em 0.9em;
	padding: 0.2em 0.7em;
	font-family: arial,tahoma,verdana,helvetica !important;
	display: inline-block;
	/* text-align: center;  New button are on right of screen */
	cursor: pointer;
	color: #999 !important;
	padding-top: 0.2em;
	box-shadow: none !important;
}

.butActionTransparent {
	color: #222 ! important;
	background-color: transparent ! important;
}


/*
TITLE BUTTON
 */

.btnTitle, a.btnTitle {
	display: inline-block;
	padding: 6px;
	font-weight: 400;
	/* line-height: 1; */
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	box-shadow: var(--btncolorbg);
	text-decoration: none;
	position: relative;
	/* margin: 0 0 0 8px; */
	min-width: 60px;
	text-align: center;
	color: var(--btncolortext);
	border: none;
	font-size: 12px;
	font-weight: 300;
	/* background-color: var(--btncolorbg); */
	border: 1px solid var(--btncolorborder);
}

a.btnTitle.btnTitleSelected {
	border: 1px solid #ccc;
	border-radius: 3px;
}

.btnTitle > .btnTitle-icon{

}

.btnTitle > .btnTitle-label{
	color: #666666;
}

.btnTitle:hover, a.btnTitle:hover {
	border: 1px solid #bbb;
	border-radius: 3px;
	position: relative;
	text-align: center;
	font-size: 12px;
	text-decoration: none;
	box-shadow: none;
}
/* The buttonplus is growing on hover (don't know why). This is to avoid to have the cell growing too */
.btnTitlePlus:hover {
	/* max-width: 24px; */ /* max width is a problem when the button has a text under */
	max-height: 42px;
}

.btnTitle.refused, a.btnTitle.refused, .btnTitle.refused:hover, a.btnTitle.refused:hover {
	color: #8a8a8a;
	cursor: not-allowed;
	background-color: #fbfbfb;
	background: repeating-linear-gradient( 45deg, #ffffff, #f1f1f1 4px, #f1f1f1 4px, #f1f1f1 4px );
}

.btnTitle:hover .btnTitle-label {
	color: var(--btncolorborderhover);
}
.btnTitle.reposition:not(.btnTitleSelected) {
	background-color: unset;
	border: unset;
}

.btnTitle.refused .btnTitle-label, .btnTitle.refused:hover .btnTitle-label {
	color: #8a8a8a;
}

.btnTitle>.fa {
	font-size: 2em;
	display: block;
}

div.pagination li:first-child a.btnTitle, div.pagination li.paginationafterarrows a.btnTitle,
table.table-fiche-title tr.toptitle td.col-center div.nowraponall a.btnTitle,
table.table-fiche-title tr.titre td.col-center div.nowraponall a.btnTitle,
table.table-fiche-title tr.toptitle td.col-right a.btnTitle,
table.table-fiche-title tr.titre td.col-right a.btnTitle {
	margin-left: 10px;
}

.button-title-separator{
	display: inline-block;
	clear: both;
	width: 20px;
}

.imgforviewmode {
	color: #aaa;
}


/* rule to reduce top menu - 2nd reduction: Reduce width of top menu icons again */
@media only screen and (max-width: 268px)	/* reduction 2 */
{
	.butAction, .butActionRefused, .butActionDelete {
		font-size: 0.95em;
	}
}

/* rule to reduce top menu - 3rd reduction: The menu for user is on left */
@media only screen and (max-width: 224px)	/* reduction 3 */
{
	.butAction, .butActionRefused, .butActionDelete {
		font-size: 0.9em;
	}
}

/* smartphone */

@media only screen and (max-width: 767px)
{
	.butAction, .butActionRefused, .butActionDelete {
		font-size: 0.85em;
	}

	/* for small screen, we reduce the min with of button */
	.btnTitle, a.btnTitle {
		display: inline-block;
		padding: 4px 4px 4px 4px;
		min-width: unset;	/* if we unset the min-width here, we must also unset the font-size on .paginationafterarrows a.btnTitlePlus:hover span:before to avoid page content move */
	}
	.paginationafterarrows a.btnTitlePlus:hover span:before, .titre_right a.btnTitlePlus:hover span:before {
		font-size: unset !important;
	}
}


.butActionRefused, .butActionNewRefused, .btnTitle.refused {
	display: none !important;
}


/*
 * BTN LINK (used with <a/> tag in general but not with <button/>)
 */

.btn-link{
	margin-right: 5px;
	border: 1px solid #ddd;
	color: #333;
	padding: 5px 10px;
	border-radius:1em;
	text-decoration: none !important;
}

.btn-link:hover{
	background-color: #ddd;
	border: 1px solid #ddd;
}


/*
 * BUTTON With Low emphasis
 */

button.btn-low-emphasis{
	text-align: center;
	display: inline-block;
	border: none;
	outline: none;
	cursor: pointer;
	margin: 0;
	padding: 0;
	width: auto;
	min-width: 1.5em;
	min-height: 1.5em;
	line-height: 1.5em;

	overflow: visible;
	background: transparent;
	background-position: center; /* used for hover ripple effect */
	background-size: 0%;
	color: var(--colortextlink, inherit);
	font: inherit;
	line-height: normal;

	/* Corrects font smoothing for webkit */
	-webkit-font-smoothing: inherit;
	-moz-osx-font-smoothing: inherit;

	/* Corrects inability to style clickable input types in iOS */
	-webkit-appearance: none;


	transition: background 0.8s;/* used for hover ripple effect */
	background: transparent radial-gradient(circle, transparent 1%, hsla(var(--colortextlink-h),var(--colortextlink-s) ,var(--colortextlink-l) , 0.1) 1%, transparent 10%) center/15000%;
}

button.btn-low-emphasis.--btn-icon{
	border-radius: 100%;
}

button.btn-low-emphasis :is(.fa, .fas){
	color: var(--colortextlink, inherit);
	opacity: 0.4;
}

button.btn-low-emphasis:is(:focus,:hover) :is(.fa, .fas){
	opacity: 0.8;
}

button.btn-low-emphasis.--btn-icon:active {
	background-color:  hsla(var(--colortextlink-h),var(--colortextlink-s) ,var(--colortextlink-l) , 0.1);
	background-size: 100%;
	transition: background 0s;/* used for hover ripple effect */
}


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

.allwidth {
	width: 100%;
}

#undertopmenu {
	background-repeat: repeat-x;
	margin-top: 0px;
}


.paddingrightonly {
	border-collapse: collapse;
	border: 0px;
	margin-left: 0px;
	padding-left: 0px !important;
	padding-right: 4px !important;
}
.nocellnopadd {
	list-style-type:none;
	margin: 0px !important;
	padding: 0px !important;
}
.noborderspacing {
	border-spacing: 0;
}
tr.nocellnopadd td.nobordernopadding, tr.nocellnopadd td.nocellnopadd
{
	border: 0px;
}

.unsetcolor {
	color: unset !important;
}

.smallpaddingimp {
	padding: 4px !important;
	padding-left: 7px !important;
	padding-right: 7px !important;
}
input.button.smallpaddingimp, input.buttonreset.smallpaddingimp {
	font-size: 0.8em;
	font-weight: normal !important;
}
input.button[name="upload"] {
	padding: 5px !important;
	font-size: 0.9em;
}
input.buttonlink {
	color: var(--colortextlink);
	background-color: transparent;
	cursor: pointer;
}
input.buttonlink:hover {
	text-decoration: underline;
}
input.buttonreset {
	margin-top: 3px;
	margin-bottom: 3px;
	padding: 8px 15px;
	text-decoration: underline;
	color: var(--colortextlink);
	background-color: transparent;
	cursor: pointer;
}
.nopaddingleft {
	padding-left: 0px;
}
div.tabs.nopaddingleft {
	padding-left: 0px;
}
.nopaddingright {
	padding-right: 0px;
}
.nopaddingtopimp {
	padding-top: 0px !important;
}
.nopaddingbottomimp {
	padding-bottom: 0px !important;
}
.notopnoleft {
	border-collapse: collapse;
	border: 0px;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 16px;
	padding-bottom: 4px;
	margin-right: 0px;
}
.notopnoleftnoright {
	border-collapse: collapse;
	border: 0px;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 4px;
	margin: 0px 0px 0px 0px;
}

table.tableforemailform tr td {
	padding-top: 3px;
	padding-bottom: 3px;
}

table.border, table.bordernooddeven, table.dataTable, .table-border, .table-border-col, .table-key-border-col, .table-val-border-col, div.border {
	border-collapse: collapse !important;
	padding: 1px 2px 1px 3px;			/* t r b l */
}
table.borderplus {
	border: 1px solid #BBB;
}
.border tbody tr, .bordernooddeven tbody tr, .border tbody tr td, .bordernooddeven tbody tr td,
div.tabBar table.border tr, div.tabBar table.border tr td, div.tabBar div.border .table-border-row, div.tabBar div.border .table-key-border-col, div.tabBar div.border .table-val-border-col,
tr.liste_titre.box_titre td table td, .bordernooddeven tr td {
	height: 2.2em;
}

div.tabBar div.border .table-border-row, div.tabBar div.border .table-key-border-col, div.tabBar .table-val-border-col {
	vertical-align: middle;
}
div .tdtop:not(.tagtdnote) {
	vertical-align: top !important;
	/*padding-top: 10px !important;
	padding-bottom: 2px !important; */
	padding-top: 8px !important;
	padding-bottom: 0px !important;
	height: unset !important;
}

table.border td, table.bordernooddeven td, div.border div div.tagtd {
	padding: 2px 2px 2px 2px;
	border-collapse: collapse;
}
div.tabBar .fichecenter table.border>tbody>tr>td, div.tabBar .fichecenter div.border div div.tagtd, div.tabBar div.border div div.tagtd
{
	padding-top: 2px;
	border-bottom: 1px solid #E0E0E0;
}

td.border, div.tagtable div div.border {
	border-top: 1px solid #000000;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	border-left: 1px solid #000000;
}
.table-key-border-col {
	/* width: 25%; */
	vertical-align:top;
}
.table-val-border-col {
	width:auto;
}


.thsticky, .tdsticky {
	position: sticky;
	left: 0px;
}
.thstickyright, .tdstickyright {
	position: sticky;
	right: 0px;
}
.thstickygray, .tdstickygray {
	background-color: lightgray;
}
.thstickyghostwhite, .tdstickyghostwhite {
	background-color: ghostwhite;
}
.thstickyinherit, .tdstickyinherit {
	background-color: inherit;
}

/* To have left column sticky */
/*.tagtable td[data-key="ref"], .tagtable th[data-key="ref"] {
	position: sticky;
	left: 0;
	top: 0;
	max-width: 150px !important;
	//background-color: inherit;
	background-color: gainsboro;
	z-index: 2;
}
*/

/* To have right column sticky */
/*.tagtable td.actioncolumn, .tagtable th.actioncolumn {
	position: sticky-right;
	right: 0;
	top: 0;
	max-width: 150px !important;
	//background-color: inherit;
	background-color: gainsboro;
	z-index: 2;
}
*/


/* Main boxes */
.nobordertop, .nobordertop tr:first-of-type td {
	border-top: none !important;
}
.noborderbottom, .noborderbottom tr:last-of-type td {
	border-bottom: none !important;
}
.bordertop {
	border-top: 1px solid var(--colortopbordertitle1);
}
.borderbottom {
	border-bottom: 1px solid var(--colortopbordertitle1);
}

table.noborder {
	background: var(--colorbacktabcard1);
}

.fichehalfright table.noborder, .fichehalfleft table.noborder {
	margin: 0px 0px 0px 0px;
}
table.liste, table.noborder:not(.paymenttable):not(.margintable):not(.tableforcontact), table.formdoc, div.noborder:not(.paymenttable):not(.margintable):not(.tableforcontact) {
		border-left: 1px solid var(--colortopbordertitle1);
	border-right: 1px solid var(--colortopbordertitle1);
	}
table.liste, table.noborder, table.formdoc, div.noborder {
	width: 100%;
	border-collapse: separate !important;
	border-spacing: 0px;
	border-top-width: 1px;
	border-top-color: var(--colortopbordertitle1);
	border-top-style: solid;
	margin: 0px 0px 20px 0px;
}
#tablelines, #tablelinesservice {
	border-bottom-width: 1px;
	border-bottom-color: var(--colortopbordertitle1);
	border-bottom-style: solid;
}
table.liste tr:last-of-type td, table.noborder:not(#tablelines):not(#tablelinesservice) tr:last-of-type td, table.formdoc tr:last-of-type td, div.noborder tr:last-of-type td {
	border-bottom-width: 1px;
	border-bottom-color: var(--colortopbordertitle1);
	border-bottom-style: solid;
}
/* CSS to remove the interline border */
table.nointerlines tr:not(:last-child) td {
	border-bottom: unset !important;
	border-top: unset !important;
}


/* Management of border radius */
table.noborder:not(.cal_month, .paymenttable) {
	border-radius: 4px;
}
table.noborder.cal_month {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}
table.noborder:not(.listwithfilterbefore, .paymenttable, .margintable) tr.liste_titre:first-child td:first-child,
table.noborder:not(.listwithfilterbefore, .paymenttable, .margintable) tr.liste_titre:first-child th:first-child,
table.tagtable.liste:not(.listwithfilterbefore, .paymenttable, .margintable) tr.liste_titre:first-child td:first-child,
table.noborder:not(.listwithfilterbefore, .paymenttable, .margintable) tr.trfirstline td:first-child {
	border-top-left-radius: 4px;
}
table.noborder:not(.listwithfilterbefore, .paymenttable, .margintable) tr.liste_titre:first-child td:last-child,
table.noborder:not(.listwithfilterbefore, .paymenttable, .margintable) tr.liste_titre:first-child th:last-child,
table.tagtable.liste:not(.listwithfilterbefore, .paymenttable, .margintable) tr.liste_titre:first-child th:last-child,
table.noborder:not(.listwithfilterbefore, .paymenttable, .margintable) tr.trfirstline td:last-child {
	border-top-right-radius: 4px;
}
table.noborder:not(.listwithfilterbefore, .paymenttable, .margintable) tr:last-child td:first-child,
table.noborder:not(.listwithfilterbefore, .paymenttable, .margintable) tr:last-child th:first-child {
	border-bottom-left-radius: 4px;
}
table.noborder:not(.listwithfilterbefore, .paymenttable, .margintable) tr:last-child td:last-child,
table.noborder:not(.listwithfilterbefore, .paymenttable, .margintable) tr:last-child th:last-child {
	border-bottom-right-radius: 4px;
}
table.noborder thead tr:last-child td:first-child,
table.noborder thead tr:last-child th:first-child {
	border-bottom-left-radius: unset !important;
}
table.noborder thead tr:last-child td:last-child,
table.noborder thead tr:last-child th:last-child {
	border-bottom-right-radius: unset !important;
}

table.liste:not(.listwithfilterbefore) {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}
table.liste {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}
table.liste:not(.listwithfilterbefore) tr.liste_titre_filter:first-child td:first-child,
table.liste:not(.listwithfilterbefore) tr.liste_titre_filter:first-child th:first-child {
	border-top-left-radius: 4px;
}
table.liste:not(.listwithfilterbefore) tr.liste_titre_filter:first-child td:last-child,
table.liste:not(.listwithfilterbefore) tr.liste_titre_filter:first-child th:last-child {
	border-top-right-radius: 4px;
}
div.liste_titre_bydiv {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}
div.liste_titre_bydiv_nothingafter {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-width: 1px;
	border-bottom-color: var(--colortopbordertitle1);
	border-bottom-style: solid;
}
table.liste tr:last-child td:first-child,
table.liste tr:last-child th:first-child {
	border-bottom-left-radius: 4px;
}
table.liste tr:last-child td:last-child,
table.liste tr:last-child th:last-child {
	border-bottom-right-radius: 4px;
}

table#tablelines tr:last-of-type td:first-child, table#tablelines tr#trlinefordates, table#tablelines tr#trlinefordates td,
table#tablelinesservice tr:last-of-type td:first-child, table#tablelinesservice tr#trlinefordates, table#tablelinesservice tr#trlinefordates td {
	border-bottom-left-radius: 4px;
}
table#tablelines tr:last-of-type td:last-child, table#tablelines tr#trlinefordates, table#tablelines tr#trlinefordates td,
table#tablelinesservice tr:last-of-type td:last-child, table#tablelinesservice tr#trlinefordates, table#tablelinesservice tr#trlinefordates td {
	border-bottom-right-radius: 4px;
}


/*
div.tabBar div.fichehalfright table.noborder:not(.margintable):not(.paymenttable):not(.lastrecordtable):last-of-type {
	border-bottom: 1px solid var(--colortopbordertitle1);
}
*/
div.tabBar table:not(.nobottom).border>tbody>tr:last-of-type>td {
	border-bottom-width: 1px;
	border-bottom-color: var(--colortopbordertitle1);
	border-bottom-style: solid;
}
div.tabBar div.fichehalfright table.noborder {
	border-bottom: none;
}

table.paddingtopbottomonly tr td {
	padding-top: 1px;
	padding-bottom: 2px;
}
.liste_titre_filter {
	background: var(--colorbacktitle1) !important;
}
.liste_titre2 {
	background: var(--colorbackhmenu1) !important;
	color: #fff;
}
table:not(.listwithfilterbefore) tr.liste_titre_filter:first-of-type td.liste_titre {
	padding-top: 5px;
}

tr.liste_titre_filter td.liste_titre {
	/* border-bottom: 1px solid #ddd; */
	padding-top: 1px;
	padding-bottom: 0px;
}
.liste_titre_create td, .liste_titre_create th, .liste_titre_create .tagtd
{
	border-bottom-width: 0 !important;
	border-top-width: 1px;
	border-top-color: var(--colortopbordertitle1);
	border-top-style: solid;
}
tr.liste_titre_create td:not(.linecoldescription) {
	padding-right: 4px !important;
	padding-left: 4px !important;
}
tr#trlinefordates td {
	border-bottom: 0px !important;
}
.liste_titre_add td, .liste_titre_add th, .liste_titre_add .tagtd
{
	border-top-width: 1px;
	border-top-color: var(--colortopbordertitle1);
	border-top-style: solid;
}
table.liste tr, table.noborder tr, div.noborder form {
	border-top-color: #FEFEFE;
	min-height: 20px;
}
table.liste th, table.noborder th, table.noborder tr.liste_titre td, table.noborder tr.box_titre td {
	padding: 6px 10px 6px 12px;			/* t r b l */
}
td.linecoldescription {
	padding: 6px 10px 6px 12px !important;			/* t r b l */
}
table.tableforfield td, .tagtr.table-border-row .tagtd, table.border.margintable .trforfield td {
	padding: 2px 4px 2px 10px;			/* t r b l */
}
table.liste td, table.noborder td, div.noborder form div, table.tableforservicepart1 td, table.tableforservicepart2 td {
	padding: 8px 10px 8px 12px;			/* t r b l */
	/* line-height: 22px; This create trouble on cell login on list of last events of a contract */
	height: 32px;
}
table.liste tr.trkanban td {
	padding: 12px 15px 12px 15px;			/* t r b l */
}
div.liste_titre_bydiv .divsearchfield {
	padding: 2px 1px 2px 7px;			/* t r b l */
}

tr.box_titre .nobordernopadding td {
	padding: 0 ! important;
}
table.nobordernopadding {
	border-collapse: collapse !important;
	border: 0;
}
table.nobordernopadding tr {
	border: 0 !important;
	padding: 0 0 !important;
}
table.nobordernopadding tr td {
	border: 0 !important;
	padding: 0 3px 0 0;
}
table.border tr td table.nobordernopadding tr td {
	padding-top: 0;
	padding-bottom: 0;
}
td.borderright {
	border: none;	/* to erase value for table.nobordernopadding td */
	border-right-width: 1px !important;
	border-right-color: #BBB !important;
	border-right-style: solid !important;
}
td.borderleft {
	border: none;	/* to erase value for table.nobordernopadding td */
	border-left-width: 1px !important;
	border-left-color: #BBB !important;
	border-left-style: solid !important;
}


/* For table with no filter before */
table.listwithfilterbefore {
	border-top: none !important;
}


.tagtable, .table-border { display: table; }
.tagtr, .table-border-row  { display: table-row; }
.tagtd, .table-border-col, .table-key-border-col, .table-val-border-col { display: table-cell; }
.confirmquestions .tagtr .tagtd:not(:first-child)  { padding-left: 10px; }
.confirmquestions { margin-top: 5px; }

/* Pagination */
div.refidpadding  {
	/* padding-top: 3px; */
}
div.refid  {
	font-weight: bold;
	color: var(--colortexttitlenotab);
	font-size: 1.2em;
	word-break: break-word;
}
a.refid {
	color: var(--colortexttitlenotab) !important;
}
div.refidno  {
	padding-top: 3px;
	font-weight: normal;
	color: var(--refidnocolor);
	font-size: 0.92em;
	line-height: 1.5em;
}
div.refaddress div.address {
	line-height: 1.2em;
	font-size: 0.95em;
}
div.refidno form {
	display: inline-block;
}

div.pagination {
	float: right;
}
div.pagination a {
	font-weight: normal;
}
div.pagination ul
{
  list-style: none;
  display: inline-block;
  padding-left: 0px;
  padding-right: 0px;
  margin: 0;
}
div.pagination li {
  display: inline-block;
  padding-left: 0px;
  padding-right: 0px;
  /* padding-top: 10px; */
  /* padding-bottom: 5px; */
  /* font-size: 1.1em; */
}
li.pagination.paginationpage.paginationpageleft, li.pagination.paginationpage.paginationpageright {
	font-size: 1.1em;
}
.pagination {
  display: inline-block;
  padding-left: 0;
  border-radius: 4px;
}
div.pagination li.pagination a,
div.pagination li.pagination span {
  padding: 6px 12px;
  line-height: 1.42857143;
  text-decoration: none;
  background-repeat: repeat-x;
  color: var(--color-black);
}
div.pagination li.pagination span.inactive {
  cursor: default;
  color: #ccc;
}
li.noborder.litext, li.noborder.litext a,
div.pagination li a.inactive:hover,
div.pagination li span.inactive:hover {
	  box-shadow: none !important;
}
div.pagination li.litext a {
  border: none;
  padding-right: 10px;
  padding-left: 4px;
  font-weight: bold;
}
div.pagination li.litext a:hover {
	background-color: transparent;
	background-image: none;
}
div.pagination li.noborder a:hover {
  border: none;
  background-color: transparent;
}
div.pagination li a,
div.pagination li span {
  /* background-color: #fff; */
  /* border: 1px solid #ddd; */
}
div.pagination li:first-child a,
div.pagination li:first-child span {
  margin-left: 0;
  /*border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;*/
}

div.pagination li .active a,
div.pagination li .active span,
div.pagination li .active a:hover,
div.pagination li .active span:hover,
div.pagination li .active a:focus,
div.pagination li .active span:focus {
  z-index: 2;
  color: #fff;
  cursor: default;
  background-color: var(--colorbackhmenu1);
  border-color: #337ab7;
}
div.pagination .disabled span,
div.pagination .disabled span:hover,
div.pagination .disabled span:focus,
div.pagination .disabled a,
div.pagination .disabled a:hover,
div.pagination .disabled a:focus {
  color: #777;
  cursor: not-allowed;
  background-color: #fff;
  border-color: #ddd;
}
div.pagination li.pagination .active {
  text-decoration: underline;
  box-shadow: none;
}
.paginationafterarrows .nohover {
  box-shadow: none !important;
}

div.pagination li.paginationafterarrows {
	margin-left: 10px;
	padding-top: 0;
	/*padding-bottom: 10px;*/
}
.paginationatbottom {
	margin-top: 9px;
}
table.hidepaginationprevious .paginationprevious {
	display: none;
}
table.hidepaginationnext .paginationnext {
	display: none;
}
.tabBar .arearef .pagination.paginationref {
	max-width: calc(30%);
}
.paginationafterarrows a.btnTitlePlus, .titre_right  a.btnTitlePlus {
	/* border: 1px solid var(--btncolorborder); */
	border: unset;
	background-color: unset;
}
.paginationafterarrows a.btnTitlePlus:hover span:before, .titre_right a.btnTitlePlus:hover span:before {
	/* text-shadow: 0px 0px 5px #ccc; */
	/* filter: invert(0.3); */
	font-size: 1.1em;
}


/* Set the color for hover lines */
.oddeven:hover:not(.nohover), .evenodd:hover:not(.nohover), .oddevenimport:hover:not(.nohover), .evenoddimport:hover:not(.nohover), .impair:hover:not(.nohover), .pair:hover:not(.nohover) {
	background: var(--colorbacklinepairhover) !important;		/* Must be background to be stronger than background of odd or even */
}

.tredited, .tredited td {
	background: var(--colorbacklinepairchecked) !important;   /* Must be background to be stronger than background of odd or even */
	border-bottom: 0 !important;
}
.treditedlinefordate {
	background: var(--colorbacklinepairchecked) !important;   /* Must be background to be stronger than background of odd or even */
	border-bottom: 0px;
}
.highlight {
	background: var(--colorbacklinepairchecked) !important;   /* Must be background to be stronger than background of odd or even */
}

.nohoverborder:hover {
	border: unset;
	box-shadow: unset;
}
.oddeven, .evenodd, .impair, .pair, .nohover .impair:hover, tr.impair td.nohover, tr.pair td.nohover, .tagtr.oddeven {
	font-family: arial,tahoma,verdana,helvetica;
	margin-bottom: 1px;
	color: var(--oddevencolor);
}
.impair, .nohover .impair:hover, tr.impair td.nohover {
	background-color: var(--colorbacklineimpair2);
}
.pair, .nohover .pair:hover, tr.pair td.nohover {
	background-color: var(--colorbacklinepair2);
}
tr.oddeven.oddevendouble {
	height: 60px !important;
}

#GanttChartDIV {
	background-color: var(--colorbacklineimpair2);
}
table.dataTable tr.oddeven {
	background-color: var(--colorbacklinepair2) !important;
}

/* For no hover style */
td.oddeven, table.nohover tr.impair, table.nohover tr.pair, table.nohover tr.impair td, table.nohover tr.pair td, tr.nohover td, form.nohover, form.nohover:hover {
	background-color: var(--colorbacklineimpair2) !important;
	background: var(--colorbacklineimpair2) !important;
}
td.evenodd, tr.nohoverpair td, #trlinefordates td {
	background-color: var(--colorbacklinepair2) !important;
	background: var(--colorbacklinepair2) !important;
}
.trforbreak td {
	font-weight: 500;
	border-bottom: 1pt solid #aaa !important;
	background-color: var(--colorbacklinebreak) !important;
}
.trforbreak.nobold td a, .trforbreak.nobold span.secondary {
	font-weight: normal !important;
}
tr.trforbreaknobg:nth-of-type(n+3) td, form.trforbreaknobg div.tagtd {
	font-weight: 500;
	border-top: 1pt dashed #aaa !important;
}

table.dataTable td {
	padding: 5px 8px 5px 8px !important;
}
tr.pair td, tr.impair td, form.impair div.tagtd, form.pair div.tagtd, div.impair div.tagtd, div.pair div.tagtd, div.liste_titre div.tagtd {
	padding: 7px 8px 7px 8px;
	border-bottom: 1px solid #ddd;
}
form.tagtr:last-of-type div.tagtd, tr.pair:last-of-type td, tr.impair:last-of-type td {
	border-bottom: 0px !important;
}
tr.nobottom td {
	border-bottom: 0px !important;
}
div.tableforcontact form.tagtr:last-of-type div.tagtd {
	border-bottom: 1px solid #ddd !important;
}
tr.pair td .nobordernopadding tr td, tr.impair td .nobordernopadding tr td {
	border-bottom: 0px !important;
}
table.nobottomiftotal tr.liste_total td {
	background-color: var(--inputbackgroundcolor);
	}
table.nobottom, td.nobottom {
	border-bottom: 0px !important;
}
div.liste_titre .tagtd {
	vertical-align: middle;
}
div.liste_titre {
	min-height: 26px !important;	/* We can't use height because it's a div and it should be higher if content is more. but min-height does not work either for div */

	padding-top: 2px;
	padding-bottom: 2px;
}
div.liste_titre_bydiv {
	border-top-width: 1px;
	border-top-color: var(--colortopbordertitle1);
	border-top-style: solid;
		border-left: 1px solid var(--colortopbordertitle1);
	border-right: 1px solid var(--colortopbordertitle1);
	
	border-collapse: collapse;
	padding: 2px 0px 2px 0;
	box-shadow: none;
	/*width: calc(100% - 1px);	1px less because display is table and with 100%, it generated a right border 1px left compared to the div-table-responsive under */
	width: unset;
}
div.liste_titre_bydiv_inlineblock {
	display: inline-block;
	width: 100%;
}

tr.liste_titre, tr.liste_titre_sel, form.liste_titre, form.liste_titre_sel, table.dataTable.tr, tagtr.liste_titre
{
	height: 26px !important;
}
div.colorback	/* for the form "assign user" on time spent view */
{
	background: #f8f8f8;
	padding: 10px;
	margin-top: 5px;
	border: 1px solid #ddd;
}
div.liste_titre_bydiv, .liste_titre div.tagtr, tr.liste_titre, tr.liste_titre_sel, .tagtr.liste_titre, .tagtr.liste_titre_sel, form.liste_titre, form.liste_titre_sel, table.dataTable thead tr
{
	background: var(--colorbacktitle1);
	font-weight: normal;

	color: var(--colortexttitle);
	font-family: arial,tahoma,verdana,helvetica;
	text-align: left;
}
tr.liste_titre th, tr.liste_titre td, th.liste_titre
{
	border-bottom: 1px solid var(--colortopbordertitle1);
}
tr.liste_titre:first-child th, tr:first-child th.liste_titre {
/*    border-bottom: 1px solid #ddd ! important; */
	border-bottom: unset;
}
tr.liste_titre th, th.liste_titre, tr.liste_titre td, td.liste_titre, form.liste_titre div
{
	font-family: arial,tahoma,verdana,helvetica;
	font-weight: normal;
	vertical-align: middle;
	height: 2.2em;
}
tr.liste_titre th a, th.liste_titre a, tr.liste_titre td a, td.liste_titre a, form.liste_titre div a, div.liste_titre a {
	text-shadow: none !important;
	color: var(--colortexttitlelink);
}
tr.liste_titre_topborder td {
	border-top-width: 1px;
	border-top-color: var(--colortopbordertitle1);
	border-top-style: solid;
}
.liste_titre td a {
	text-shadow: none !important;
	color: var(--colortexttitle);
}
.liste_titre td a.notasortlink {
	color: var(--colortextlink);
}
.liste_titre td a.notasortlink:hover {
	background: transparent;
}
tr.liste_titre:last-child th.liste_titre, tr.liste_titre:last-child th.liste_titre_sel, tr.liste_titre td.liste_titre, tr.liste_titre td.liste_titre_sel, form.liste_titre div.tagtd {				/* For last line of table headers only */
	/* border-bottom: 1px solid #ddd; */
	border-bottom: unset;
}

div.liste_titre {
	padding-left: 3px;
}
tr.liste_titre_sel th, th.liste_titre_sel, tr.liste_titre_sel td, td.liste_titre_sel, form.liste_titre_sel div
{
	font-family: arial,tahoma,verdana,helvetica;
	font-weight: normal;
	border-bottom: 1px solid #FDFFFF;
	/* text-decoration: underline; */
}
input.liste_titre {
	background: transparent;
	border: 0px;
}
.listactionlargetitle .liste_titre {
	line-height: 24px;
}
.noborder tr.liste_total td, tr.liste_total td, form.liste_total div, .noborder tr.liste_total_wrap td, tr.liste_total_wrap td, form.liste_total_wrap div {
		color: var(--listetotal);
	font-weight: normal;
}
.noborder tr.liste_total td, tr.liste_total td, form.liste_total div {
	white-space: nowrap;
}
.noborder tr.liste_total_wrap td, tr.liste_total_wrap td, form.liste_total_wrap div {
	white-space: normal;
}
form.liste_total div {
	border-top: 1px solid #DDDDDD;
}
tr.liste_sub_total, tr.liste_sub_total td {
	border-bottom: 1px solid #aaa;
}
/* to avoid too much border on contract card */
.tableforservicepart1 .impair, .tableforservicepart1 .pair, .tableforservicepart2 .impair, .tableforservicepart2 .pair {
	background: #FFF;
}
.tableforservicepart1 tbody tr td, .tableforservicepart2 tbody tr td {
	border-bottom: none;
}
table.tableforservicepart1:first-of-type tr:first-of-type td {
	border-top: 1px solid #888;
}
table.tableforservicepart1 tr td {
	border-top: 0px;
}

.paymenttable, .margintable {
	border-top: none !important;
	margin: 0px 0px 0px 0px !important;
}
.bordertopimp {
	border-top: 1px solid var(--colortopbordertitle1) !important;
}
table.noborder.paymenttable {
	border-bottom: none !important;
}
.paymenttable tr td:first-child, .margintable tr td:first-child
{
	/*padding-left: 2px;*/
}
.paymenttable, .margintable tr td {
	height: 22px;
}

/* Disable-Enable shadows */
.noshadow {
	box-shadow: 0px 0px 0px #DDD !important;
}
.shadow {
	box-shadow: 1px 1px 7px #CCC !important;
}

.boxshadow {
	box-shadow: 0px 0px 5px #888;
}

div.tabBar .noborder {
	box-shadow: 0px 0px 0px #DDD !important;
}

#tablelines tr.liste_titre td, #tablelinesservice tr.liste_titre td, .paymenttable tr.liste_titre td, .margintable tr.liste_titre td, .tableforservicepart1 tr.liste_titre td {
	border-bottom: 1px solid var(--colortopbordertitle1) !important;
}
#tablelines tr td, #tablelinesservice tr td {
/*	height: unset; */
}

/* Prepare to remove class pair - impair */

.noborder:not(.editmode) > tbody > tr:nth-child(even):not(.liste_titre):not(.nooddeven):not(.liste_total), .liste > tbody > tr:nth-child(even):not(.liste_titre):not(.nooddeven):not(.liste_total),
div:not(.fichecenter):not(.fichehalfleft):not(.fichehalfright) > .border > tbody > tr:nth-of-type(even):not(.liste_titre):not(.nooddeven):not(.liste_total), .liste > tbody > tr:nth-of-type(even):not(.liste_titre):not(.nooddeven):not(.liste_total),
div:not(.fichecenter):not(.fichehalfleft):not(.fichehalfright) .oddeven.tagtr:nth-of-type(even):not(.liste_titre):not(.nooddeven):not(.liste_total)
{
	background: linear-gradient(bottom, var(----colorbacklineimpair2) 0%, var(--colorbacklineimpair2) 100%);
	background: -o-linear-gradient(bottom, var(--colorbacklineimpair2) 0%, var(--colorbacklineimpair2) 100%);
	background: -moz-linear-gradient(bottom, var(--colorbacklineimpair2) 0%, var(--colorbacklineimpair2) 100%);
	background: -webkit-linear-gradient(bottom, var(--colorbacklineimpair2) 0%, var(--colorbacklineimpair2) 100%);
}
.noborder > tbody > tr:nth-child(even):not(:last-of-type) td:not(.liste_titre), .liste > tbody > tr:nth-child(even):not(:last-of-type) td:not(.liste_titre),
.noborder .oddeven.tagtr:nth-child(even):not(:last-of-type) .tagtd:not(.liste_titre)
{
	border-bottom: 1px solid #f0f0f0;
}

.noborder:not(.editmode) > tbody > tr:nth-child(odd):not(.liste_titre):not(.nooddeven):not(.liste_total), .liste > tbody > tr:nth-child(odd):not(.liste_titre):not(.nooddeven):not(.liste_total),
div:not(.fichecenter):not(.fichehalfleft):not(.fichehalfright) > .border > tbody > tr:nth-of-type(odd):not(.liste_titre):not(.nooddeven):not(.liste_total), .liste > tbody > tr:nth-of-type(odd):not(.liste_titre):not(.nooddeven):not(.liste_total),
div:not(.fichecenter):not(.fichehalfleft):not(.fichehalfright) .oddeven.tagtr:nth-of-type(odd):not(.liste_titre):not(.nooddeven):not(.liste_total)
{
	background: linear-gradient(bottom, var(--colorbacklinepair2) 0%, var(--colorbacklinepair2) 100%);
	background: -o-linear-gradient(bottom, var(--colorbacklinepair2) 0%, var(--colorbacklinepair2) 100%);
	background: -moz-linear-gradient(bottom, var(--colorbacklinepair2) 0%, var(--colorbacklinepair2) 100%);
	background: -webkit-linear-gradient(bottom, var(--colorbacklinepair2) 0%, var(--colorbacklinepair2) 100%);
}
.noborder > tbody > tr:nth-child(odd):not(:last-child) td:not(.liste_titre), .liste > tbody > tr:nth-child(odd):not(:last-child) td:not(.liste_titre),
.noborder .oddeven.tagtr:nth-child(odd):not(:last-child) .tagtd:not(.liste_titre)
{
	border-bottom: 1px solid #f0f0f0;
}

ul.noborder li:nth-child(even):not(.liste_titre) {
	background-color: var(--colorbacklinepair2) !important;
}


/*
 *  Boxes
 */

.box {
	overflow-x: auto;
	min-height: 40px;
	padding-right: 0px;
	padding-left: 0px;
	/* padding-bottom: 10px; */
}
.boxstatsborder {
	/* border: 1px solid #CCC !important; */
}
.boxstats, .boxstats130 {
	display: inline-block;
	margin-left: 8px;
	margin-right: 8px;
	margin-top: 5px;
	margin-bottom: 5px;
	text-align: center;

	background: var(--colorbackbody);
	border: 1px solid var(--colorboxstatsborder);
	border-left: 6px solid var(--colorboxstatsborder);
	/* box-shadow: 1px 1px 8px var(--colorboxstatsborder); */
	border-radius: 4px;
}
.boxstats, .boxstats130, .boxstatscontent {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.boxstats130 {
	width: 100%;
	height: 59px;
	/* padding: 3px; */
}
.boxstats {
	padding-left: 6px;
	padding-right: 6px;
	padding-top: 2px;
	padding-bottom: 2px;
	width: 118px;
}

.boxtable:not(.widgetstats) td.tdboxstats .boxstats {
	box-shadow: 1px 1px 8px var(--colorboxstatsborder);
}

.tabBar .fichehalfright .boxstats {
	padding-top: 8px;
	padding-bottom: 4px;
}
.boxstatscontent {
	padding: 3px;
}
.boxstatsempty {
	width: 121px;
	padding-left: 3px;
	padding-right: 3px;
	margin-left: 8px;
	margin-right: 8px;
}
.boxstats150empty {
	width: 158px;
	padding-left: 3px;
	padding-right: 3px;
	margin-left: 8px;
	margin-right: 8px;
}


@media only screen and (max-width: 768px)
{
	.tabBar .arearef .pagination.paginationref {
		max-width: calc(50%);
	}

	div.pagination ul li {
		margin-top: 3px;
		margin-bottom: 3px;
	}
	div.pagination .button-title-separator {
		display: none;
	}

	.clearbothonsmartphone {
		clear: both;
		display: block !important;
	}

	div.tabs {
		padding-left: 0 !important;
		padding-right: 0!important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	table.liste tr.trkanban td {
		padding: 10px 6px 10px 6px;			/* t r b l */
	}

	a.tab:link, a.tab:visited, a.tab:hover, a.tab#active {
		padding: 12px 3px 13px;
	}
	a.tmenu:link, a.tmenu:visited, a.tmenu:hover, a.tmenu:active {
		padding: 0px 0px 0px 0px;
	}
	a.tmenusel:link, a.tmenusel:visited, a.tmenusel:hover, a.tmenusel:active {
		padding: 0px 0px 0px 0px;
	}

	td.tdwidgetstate {
		text-align: center;
	}

	.boxstats, .boxstats130 {
		margin: 3px;
	}
	.boxstats130 {
		text-align: left	}
	.thumbstat {
		flex: 1 1 110px;
		margin-bottom: 8px;
		min-width: 150px;	/* on screen < 320, we guaranty to have 2 columns */
	}
	.thumbstat150 {
		flex: 1 1 110px;
		margin-bottom: 8px;
		min-width: 160px;	/* on screen < 320, we guaranty to have 2 columns */
		max-width: 161px;	/* on screen < 320, we guaranty to have 2 columns */
		/* width: ...px; If I use with, there is trouble on size of flex boxes solved with min + (max that is a little bit higher than min) */
	}
	.dashboardlineindicator {
		float: left;
		padding-left: 5px;
	}
	.boxstats {
		width: 111px;
	}
	.boxstatsempty {
		width: 111px;
	}

}

.boxstats:hover {
	box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.20);
}
span.boxstatstext span:not(.fas) {
	opacity: 0.5;
}
span.boxstatstext {
	line-height: 18px;
	color: var(--colortext);
}
span.boxstatstext img, a.dashboardlineindicatorlate img {
	border: 0;
}
a img {
	border: 0;
}
.boxstatsindicator.thumbstat150 {	/* If we remove this, box position is ko on ipad */
	display: inline-flex;
}
span.boxstatsindicator {
	font-size: 130%;
	font-weight: normal;
	line-height: 29px;
	flex-grow: 1;

}
span.dashboardlineindicator, span.dashboardlineindicatorlate {
	font-size: 130%;
	font-weight: normal;
}
a.dashboardlineindicatorlate:hover {
	text-decoration: none;
}
.dashboardlineindicatorlate img {
	width: 16px;
}
span.dashboardlineok {
	color: #008800;
}
span.dashboardlineko {
	color: #FFF;
	font-size: 80%;
}
.dashboardlinelatecoin {
	float: right;
	position: relative;
	text-align: right;
	top: -27px;
	right: 2px;
	padding: 0px 5px 0px 5px;
	border-radius: .25em;

	background-color: #9f4705;
}
.imglatecoin {
	padding: 1px 3px 1px 1px;
	margin-left: 4px;
	margin-right: 2px;
	background-color: #8c4446;
	color: #FFFFFF ! important;
	border-radius: .25em;
	display: inline-block;
	vertical-align: middle;
}
.fichecenter .tableforfield:not(.margintable) tr td, .tagtr.table-border-row {
	background-color: var(--colorbacklineimpair2);
}
table.liste tr.oddeven:nth-of-type(odd) {
	background-color: var(--colorbacklineimpair2);
}
table.liste tr.oddeven:nth-of-type(even) {
	background-color: var(--colorbacklinepair2);
}

.boxtable {
	border-bottom-width: 1px;
	background: var(--colorbackbody);
	border-top: 1px solid var(--colortopbordertitle1);
	/* border-top: 2px solid var(--colorbackhmenu1) !important; */
}
.boxtable tr td.tdboxstats {
	background: var(--colorbackbody) !important;
}
.boxtable tr td.tdboxstats div.boxstats {
	background: var(--colorbacklineimpair2) !important;
}

table.noborder.boxtable tr td {
	height: unset;
}
.boxtablenotop {
	border-top-width: 0 !important;
}
.boxtablenobottom {
	border-bottom-width: 0 !important;
}
.boxtablenomarginbottom {
	margin-bottom: 0 !important;
}
.boxtable .fichehalfright, .boxtable .fichehalfleft {
	min-width: 275px;	/* increasing this, make chart on box not side by side on laptops */
}
.tdboxstats {
	text-align: center;
}
.boxworkingboard .tdboxstats {
	padding-left: 0px !important;
	padding-right: 0px !important;
}
a.valignmiddle.dashboardlineindicator {
	line-height: 30px;
}
.height30 {
	height: 30px !important;
}
.height50 {
	height: 50px !important;
}

tr.box_titre {
	height: 26px;

	/* TO MATCH BOOTSTRAP */
	/*background: #ddd;
	color: #000 !important;*/

	/* TO MATCH ELDY */
	background: var(--colorbacktitle1);
	color: var(--colortexttitle);
	font-family: arial,tahoma,verdana,helvetica, sans-serif;
	font-weight: normal;
	border-bottom: 1px solid #FDFFFF;
	white-space: nowrap;
}

tr.box_titre td.boxclose {
	width: 30px;
}
img.boxhandle, img.boxclose {
	padding-left: 5px;
}

.formboxfilter {
	vertical-align: middle;
	margin-bottom: 6px;
}
.formboxfilter input[type=image]
{
	top: 5px;
	position: relative;
}
.boxfilter {
	margin-bottom: 2px;
	margin-right: 1px;
}
.prod_entry_mode_free, .prod_entry_mode_predef {
	height: 26px !important;
	vertical-align: middle;
}

.modulebuilderbox {
	border: 1px solid #888;
	padding: 16px;
}

.star-selection {
	font-size: 1rem;
	cursor: pointer;
	display: flex;
	white-space: nowrap;
}
.star {
	color: #ccc;
	transition: color 0.4s;
}
.star:hover, .star.active {
	color: #bc9526;
}

.search-component-assistance {
	display: none;
	position: absolute;
	background: var(--colorbackbody);
	border-width: 1px 1px 2px;
	border-style: solid;
	border-color: rgb(204, 204, 204);
	border-image: none; padding: 9px;
	box-shadow: rgba(136, 136, 136, 0.267) 1px 2px 10px;
	border-radius: 2px;
	z-index: 1000;
	top: 208.933px;
	left: 352.683px;
}
.search-component-assistance .assistance-title {
	font-size: 15px;
	font-weight: bold;
	color: #333;
	margin: 5px
}
.search-component-assistance .separator {
	padding-left: 8px;
	margin-left: 5px
}
.search-component-assistance .end-separator {
	margin-left: 8px;
}
.search-component-assistance .assistance-errors {
	font-size: 12px;
	color: #333;
	margin: 5px 0px 5px 0px
}
.search-component-assistance .assistance-errors {
	margin-bottom: 0px;
	text-align: center;
}
.add-filter-btn {
	margin: 0 !important;
}
.search-component-assistance .operand, .search-component-assistance .operator, .search-component-assistance .value {
	display: inline-block;
}
.search-component-assistance .btn-div{
	margin-top: 10px;
	text-align: right;
}
@media only screen and (max-width: 620px) {
	.search-component-assistance .operand, .operator, .value {
		display: block !important;
	}
	.search-component-assistance .separator, .end-separator {
		padding: 0px;
		margin: 0px
	}
}


/*
 *   Ok, Warning, Error
 */

.ok      { color: #114466; }
.warning { color: #887711 !important; }
.error   { color: #660000 !important; font-weight: bold; }
.green   { color: #118822 !important; }

div.ok {
	color: #114466;
}

div.info, div.warning, div.error, div.green {
	padding-top: 16px;
	padding-left: 10px;
	padding-right: 4px;
	padding-bottom: 16px;
	margin: 1em 0em 1em 0em;
	border-radius: 5px;
}

/* Info admin */
div.info {
	border-left: solid 5px #87cfd2;
	background: #eff8fc;
	color: #558;
}
div.fiche div.info, div.fiche div.warning {
	box-shadow: 4px 4px 12px #e4e4e4;
	margin: 1em 0em 1.2em 0em;
}

/* Ok message */
div.green div.greenborder, section.green, section.greenborder {
	border-left: solid 5px #118822;
}
div.green, section.green {
	background: #e3f0e3;
}

/* Warning message */
div.warning, div.warningborder, section.warning, section.warningborder {
	border-left: solid 5px #f2cf87;
}
div.warning, section.warning {
	background: #fcf8e3;
}
div.warning a, div.info a, div.error a {
	color: var(--colortextlink);
}

/* Error message */
div.error {
	border-left: solid 5px #f28787;
	background: #EFCFCF;
}


/*
 * Paid/Unpaid Links
 */

a.normal:link { font-weight: normal }
a.normal:visited { font-weight: normal }
a.normal:active { font-weight: normal }
a.normal:hover { font-weight: normal }

a.impayee:link { font-weight: bold; color: #550000; }
a.impayee:visited { font-weight: bold; color: #550000; }
a.impayee:active { font-weight: bold; color: #550000; }
a.impayee:hover { font-weight: bold; color: #550000; }


/*
 *  External web site
 */

.framecontent {
	width: 100%;
	height: 100%;
}

.framecontent iframe {
	width: 100%;
	height: 100%;
}


/*
 *  Other
 */

.opened-dash-board-wrap {
	margin-bottom: 25px;
}

div.boximport {
	min-height: unset;
}

.product_line_stock_ok { color: var(--productlinestockok); }
.product_line_stock_too_low { color: var(--productlinestocktoolow); }

.fieldrequired { font-weight: bold; color: var(--fieldrequiredcolor) !important; }

td.widthpictotitle, .table-fiche-title img.widthpictotitle { width: 34px; text-align: left; }
span.widthpictotitle { font-size: 1.5em; }
table.titlemodulehelp tr td img.widthpictotitle { width: 80px; }

.dolgraphtitle { margin-top: 6px; margin-bottom: 4px; }
.dolgraphtitlecssboxes { /* margin: 0px; */ }
.dolgraphchart canvas {
	/* width: calc(100% - 20px) !important; */
}
.legendColorBox, .legendLabel { border: none !important; }
div.dolgraph div.legend, div.dolgraph div.legend div { background-color: var(--dolgraphbg) !important; }
div.dolgraph div.legend table tbody tr { height: auto; }
td.legendColorBox { padding: 2px 2px 2px 0 !important; }
td.legendLabel { padding: 2px 2px 2px 0 !important; }
td.legendLabel {
	text-align: left;
}

label.radioprivate {
	white-space: nowrap;
}

.photo {
	border: 0px;
}
.photowithmargin {
/*	margin-bottom: 2px;
	margin-top: 2px; */
}
div.divphotoref > div > .photowithmargin, div.divphotoref > img.photowithmargin, div.divphotoref > a > .photowithmargin {		/* Margin right for photo not inside a div.photoref frame only */
	margin-right: 15px;
}

.photowithborder {
	border: 1px solid #f0f0f0;
}
.photointooltip {
	margin-top: 6px;
	margin-bottom: 6px;
	text-align: center;
}
.photodelete {
	margin-top: 6px !important;
}

.logo_setup
{
	content:url(/theme/fusion/img/logo_setup.svg);	/* content is used to best fit the container */
	display: inline-block;
	opacity: 0.2;
}
.nographyet
{
	content:url(/theme/fusion/img/nographyet.svg);
	display: inline-block;
	opacity: 0.1;
	background-repeat: no-repeat;
}
.nographyettext
{
	opacity: 0.5;
}

/* height of top title */
.fiche > table.table-fiche-title tr.toptitle, .fiche > form > table.table-fiche-title tr.toptitle {
	height: 60px;
}
/* height of other title */
table.table-fiche-title tr.toptitle, table.table-fiche-title tr.toptitle {
	height: 44px;
}


div.titre {
	font-size: 1.1em;
	text-decoration: none;
	/* padding-top: 5px;
	padding-bottom: 5px; */
	font-weight: 400;
}
div.titre.small {
	font-size: 1em;
}
div.fiche > table.table-fiche-title:first-of-type div, div.fiche > form > table.table-fiche-title:first-of-type div {
	font-size: 1.1em;
}
div.fiche > table.table-fiche-title:first-of-type div {
	color: var(--colortexttitlenotab);
}
div.titre {
	color: var(--colortexttitlenotab);
}

td.subtitle {
	line-height: 1.1em;
}

.secondary {
	color: var(--colortexttitlenotab);
}
.tertiary {
	color: var(--colortexttitlenotab2);
}

table.table-fiche-title .col-title div.titre > span:not(.print-barre-liste) {
	line-height: normal;
}

table.table-fiche-title, div.fiche>table.table-fiche-title {
	margin-bottom: 12px;
}
.table-list-of-attached-files, .table-list-of-links {
	margin-bottom: 0 !important;
}
.fichehalfleft table.table-fiche-title, .fichehalfright table.table-fiche-title {
	margin-bottom: 8px;
}


div.backgreypublicpayment {
	background-color: var(--colorbackgrey);
	padding: 20px;
	border-bottom: 1px solid #ddd;
	text-align: center;
	position: sticky;
	top: 0;
	z-index: 1005;
}
.backgreypublicpayment a {
	color: var(--colorblack) !important;
	opacity: 0.9;
}
.poweredbypublicpayment {
	float: right;
	top: 8px;
	right: 12px;
	position: absolute;
	font-size: 0.8em;
	color: #222;
	opacity: 0.3;
}

#dolpublictable {
	min-width: 300px; font-size: 16px;
	padding: 6px;
}
#dolpaymenttable {
	min-width: 320px; font-size: 16px;
	max-width: 600px;
}	/* Width must have min to make stripe input area visible. Lower than 320 makes input area crazy for credit card that need zip code */

#tablepublicpayment {
	border: 1px solid #CCCCCC !important;
	width: 100%;
	padding: 20px;
	margin-bottom: 25px;
}
#tablepublicpayment .CTableRow1  { background-color: #F0F0F0 !important; }
#tablepublicpayment tr.liste_total { border-bottom: 1px solid #CCCCCC !important; }
#tablepublicpayment tr.liste_total td { border-top: none; }
input#cardholder-name {
	font-size: 1em;
}

.divmainbodylarge { margin-left: 40px; margin-right: 40px; }
.publicnewmemberform div.titre { font-size: 2em; }
#divsubscribe { max-width: 900px; }
#divsubscribe .eventlabel { font-size: 1.5em; }
#tablesubscribe { width: 100%; }
#tablesubscribe tr td { font-size: 1.15em; }
#tablesubscribe .price-registration { font-size: 1.5em; }


div#card-element {
	border: 1px solid #ccc;
}
div#card-errors {
	color: #fa755a;
	text-align: center;
	padding-top: 3px;
	/* max-width: 320px; */
}


/*
 * Effect Postit
 */
.effectpostit
{
  position: relative;
}
.effectpostit:before, .effectpostit:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effectpostit:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}



/* ============================================================================== */
/* Form confirmation (When Ajax JQuery is used) and Dialog popups                 */
/* ============================================================================== */

.ui-dialog-titlebar {
}
.ui-dialog-content {
	margin-bottom: 10px;	/* same than .ui-widget-header */
}
.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-draggable {
	z-index: 1005 !important;		/* Default 101 with ui-jquery, top menu have a z-index of 1000 */
}
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
	z-index:1006 !important; /* To always be over the dialog box */
}
.ui-dialog.ui-widget.ui-widget-content {
	border: 1px solid #e0e0e0;
	border-radius: 6px;
}
.ui-dialog {
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
}
.ui-widget-header {
	padding: 8px !important;
	background: unset;
	border: unset;
	border-bottom: 1px solid #AAA;
	margin-bottom: 12px;
}
button.ui-button-icon-only.ui-dialog-titlebar-close {
	padding: 12px;
	margin-top: -15px;
}
.ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-dialog-buttons.ui-draggable {
	box-shadow: 5px 5px 20px #AAA;
}
.ui-dialog .ui-dialog-buttonpane {
	padding: .5em 1em .3em .4em;
}
.ui-dialog .ui-dialog-content, .ui-dialog .ui-dialog-titlebar.ui-widget-header {
	padding-left: 1em !important;
}


/* ============================================================================== */
/* For content of image preview                                                   */
/* ============================================================================== */

/*
.ui-dialog-content.ui-widget-content > object {
	 max-height: none;
	 width: auto; margin-left: auto; margin-right: auto; display: block;
}
*/


/* ============================================================================== */
/* Formulaire confirmation (When HTML is used)                                    */
/* ============================================================================== */

table.valid {
	/* border-top: solid 1px #E6E6E6; */
	border-left: solid 5px #f2cf87;
	/* border-right: solid 1px #444444;
	border-bottom: solid 1px #555555; */
	padding-top: 8px;
	padding-left: 10px;
	padding-right: 4px;
	padding-bottom: 4px;
	margin: 0px 0px;
	background: var(--tablevalidbgcolor);
}

.validtitre {
	font-weight: bold;
}


/* ============================================================================== */
/* Tooltips                                                                       */
/* ============================================================================== */

/* For tooltip using dialog */
.ui-dialog.highlight.ui-widget.ui-widget-content.ui-front {
	z-index: 3000;
}

div.ui-tooltip {
	max-width: 700px !important;
}
div.ui-tooltip.mytooltip {
	border: none !important;
	padding: 20px 20px;
	border-radius: 4px;
	margin: 2px;
	font-stretch: condensed;
	box-shadow:        0.5px 0.5px 4px 0px rgba(0, 0, 0, 0.5);
	filter: progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=5);
	background: var(--tooltipbgcolor) !important;
	color: var(--tooltipfontcolor);
	line-height: 1.6em;
	min-width: 550px;
	pointer-events: none;
}


@media only screen and (max-width: 768px)
{
	div.ui-tooltip.mytooltip {
		max-width: 400px;
	}
}
@media only screen and (max-width: 480px)
{
	div.ui-tooltip.mytooltip {
		max-width: 300px;
	}
}
@media only screen and (max-width: 320px)
{
	div.ui-tooltip.mytooltip {
		max-width: 230px;
	}
}




/* ============================================================================== */
/* Calendar date picker                                                           */
/* ============================================================================== */

.ui-datepicker-calendar .ui-state-default, .ui-datepicker-calendar .ui-widget-content .ui-state-default,
.ui-datepicker-calendar .ui-widget-header .ui-state-default, .ui-datepicker-calendar .ui-button,
html .ui-datepicker-calendar .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active
{
	border: unset;
}

div#ui-datepicker-div {
	width: 300px;
	box-shadow: 2px 5px 15px #aaa;
	border: unset;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
}
.ui-datepicker .ui-datepicker table {
	font-size: unset;
}
.ui-datepicker .ui-widget-header {
	border: unset;
	background: unset;
}

/* the button Previous / Next month */
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
	width: 2.5em;
	height: 2.7em;
}


img.datecallink { padding-left: 2px !important; padding-right: 2px !important; }

select.ui-datepicker-year {
	margin-left: 2px !important;
}
.ui-datepicker-trigger {
	vertical-align: middle;
	cursor: pointer;
	padding-left: 2px;
	padding-right: 2px;
}

.bodyline {
	border-radius: 8px;
	border: 1px #E4ECEC outset;
	padding: 0px;
	margin-bottom: 5px;
}
table.dp {
	width: 180px;
	background-color: var(--inputbackgroundcolor);
	border-top: solid 2px #DDDDDD;
	border-left: solid 2px #DDDDDD;
	border-right: solid 1px #222222;
	border-bottom: solid 1px #222222;
	padding: 0px;
	border-spacing: 0px;
	border-collapse: collapse;
}
.dp td, .tpHour td, .tpMinute td{padding:2px; font-size:10px;}
/* Barre titre */
.dpHead,.tpHead,.tpHour td:Hover .tpHead{
	font-weight:bold;
	background-color:#b3c5cc;
	color:white;
	font-size:11px;
	cursor:auto;
}
/* Barre navigation */
.dpButtons,.tpButtons {
	text-align:center;
	background-color:#617389;
	color:#FFFFFF;
	font-weight:bold;
	cursor:pointer;
}
.dpButtons:Active,.tpButtons:Active{border: 1px outset black;}
.dpDayNames td,.dpExplanation {background-color:#D9DBE1; font-weight:bold; text-align:center; font-size:11px;}
.dpExplanation{ font-weight:normal; font-size:11px;}
.dpWeek td{text-align:center}

.dpToday,.dpReg,.dpSelected{
	cursor:pointer;
}
.dpToday{font-weight:bold; color:black; background-color:#DDDDDD;}
.dpReg:Hover,.dpToday:Hover{background-color:black;color:white}

/* Jour courant */
.dpSelected{background-color:#0B63A2;color:white;font-weight:bold; }

.tpHour{border-top:1px solid #DDDDDD; border-right:1px solid #DDDDDD;}
.tpHour td {border-left:1px solid #DDDDDD; border-bottom:1px solid #DDDDDD; cursor:pointer;}
.tpHour td:Hover {background-color:black;color:white;}

.tpMinute {margin-top:5px;}
.tpMinute td:Hover {background-color:black; color:white; }
.tpMinute td {background-color:#D9DBE1; text-align:center; cursor:pointer;}

/* Bouton X fermer */
.dpInvisibleButtons
{
	border-style:none;
	background-color:transparent;
	padding:0px;
	font-size: 0.85em;
	border-width:0px;
	color:#0B63A2;
	vertical-align:middle;
	cursor: pointer;
}
.datenowlink {
	color: var(--colortextlink);
	font-size: 0.8em;
	opacity: 0.7;
}


/* ============================================================================== */
/*  Show/Hide                                                                     */
/* ============================================================================== */

div.visible {
	display: block;
}

div.hidden, div.hiddenforpopup, header.hidden, tr.hidden, td.hidden,
img.hidden, span.hidden, br.hidden, div.showifmore {
	display: none;
}
.unvisible {
	visibility: hidden;
}
tr.visible {
	display: block;
}


/* ============================================================================== */
/*  Module website                                                                */
/* ============================================================================== */

.previewnotyetavailable {
	opacity: 0.5;
}

.websiteformtoolbar {
	position: sticky;
	top: 52px;
	z-index: 1002;	/* Dolibarr menu is 1001, Website menu is 1002 */
}

.exampleapachesetup {
	overflow-y: auto;
	height: 100px;
	font-size: 0.8em;
	border: 1px solid #aaa;
}

span[phptag] {
	background: #ddd; border: 1px solid #ccc; border-radius: 4px;
}

.nobordertransp {
	border: 0px;
	background-color: transparent;
	background-image: none;
}
.bordertransp {
	background-color: transparent;
	background-image: none;
	border: none;
	font-weight: normal;
}
.websitebar .button.bordertransp, .websitebar .fa-plus-circle.btnTitle-icon {
	color: unset;
	text-decoration: unset !important;
	margin: 0px 4px 0px 4px  !important
}

.websitebar {
	border-bottom: 1px solid #ccc;
	background: #e6e6e6;
	display: inline-block;
	z-index: 1000;
}
.centpercent.websitebar {
	width: calc(100% - 10px);
	padding: 5px 5px 5px 5px;
	font-size: 0.94em;
}
.websitebar .buttonDelete, .websitebar .button {
	text-shadow: none;
}
.websitebar .button, .websitebar .buttonDelete
{
	padding: 4px 5px 4px 5px !important;
	margin: 2px 4px 2px 4px  !important;
/*	line-height: normal; */
	background: #f5f5f5 !important;
	border: 1px solid #ccc !important;
}
.websiteselection {
	/* display: inline-block; */
	padding-right: 10px;
	vertical-align: middle;
	line-height: 2.2em;
}
.websiteselectionsection {
	font-size: 0.85em;
}
.websiteselection span {
	vertical-align: middle;
}
.websitetools {
	float: right;
}
.websiteselection, .websitetools {
	/* margin-top: 3px;
	padding-top: 3px;
	padding-bottom: 3px; */
}
.websiteinputurl {
	display: inline-block;
	vertical-align: middle;
	line-height: 26px;
}
.websiteiframenoborder {
	border: 0px;
}
span.websiteselection span.select2.select2-container.select2-container--default {
	margin: 0 0 0 4px;
}
span.websitebuttonsitepreview, a.websitebuttonsitepreview {
	vertical-align: middle;
}
span.websitebuttonsitepreview img, a.websitebuttonsitepreview img {
	width: 26px;
	display: inline-block;
}
span.websitebuttonsitepreviewdisabled img, a.websitebuttonsitepreviewdisabled img {
	opacity: 0.2;
}
.websitehelp {
	vertical-align: middle;
	float: right;
	padding-top: 8px;
}
.websiteselectionsection {
	border-left: 1px solid #bbb;
	border-right: 1px solid #bbb;
	margin-left: 0px;
	padding-left: 8px;
	margin-right: 5px;
}
.websitebar input#previewpageurl {
	line-height: 1em;
}

.websitebar input.bordertransp {
	line-height: normal !important;
}

#divbodywebsite section p {
	margin: unset;
}

#divbodywebsite #websitetemplateconfigpage{
	max-width: 1200px;
	margin: 50px auto 0;
}


/* ============================================================================== */
/*  Module agenda                                                                 */
/* ============================================================================== */

.dayevent .tagtr:first-of-type {
	height: 24px;
}

.agendacell { height: 60px; }
table.cal_month    { border-spacing: 0px;  }
table.cal_month td:first-child  { border-left: 0px; }
table.cal_month td:last-child   { border-right: 0px; }
table.cal_month td { padding-left: 1px !important; padding-right: 1px !important; }
table.cal_month.cal_peruser td { padding-left: 0 !important; padding-right: 0 !important; }
.cal_current_month { border-top: 0; border-left: solid 1px #E0E0E0; border-right: 0; border-bottom: solid 1px #E0E0E0; }
.cal_current_month_peruserleft { border-top: 0; border-left: solid 2px #6C7C7B; border-right: 0; border-bottom: solid 1px #E0E0E0; }
.cal_current_month_oneday { border-right: solid 1px #E0E0E0; }
.cal_other_month   { border-top: 0; border-left: solid 1px #C0C0C0; border-right: 0; border-bottom: solid 1px #C0C0C0; }
.cal_other_month_peruserleft { border-top: 0; border-left: solid 2px #6C7C7B !important; border-right: 0; }
.cal_current_month_right { border-right: solid 1px #E0E0E0; }
.cal_other_month_right   { border-right: solid 1px #C0C0C0; }
.cal_other_month   { /* opacity: 0.6; */ background: #FAFAFA; padding-left: 2px; padding-right: 1px; padding-top: 0px; padding-bottom: 0px; }
.cal_past_month    { /* opacity: 0.6; */ background: #EEEEEE; padding-left: 2px; padding-right: 1px; padding-top: 0px; padding-bottom: 0px; }
.cal_current_month { background: #FFFFFF; border-left: solid 1px #E0E0E0; padding-left: 2px; padding-right: 1px; padding-top: 0px; padding-bottom: 0px; }
.cal_current_month_peruserleft { background: #FFFFFF; border-left: solid 2px #6C7C7B; padding-left: 2px; padding-right: 1px; padding-top: 0px; padding-bottom: 0px; }
.cal_today         { background: #FDFDF0; border-left: solid 1px #E0E0E0; border-bottom: solid 1px #E0E0E0; padding-left: 2px; padding-right: 1px; padding-top: 0px; padding-bottom: 0px; }
.cal_today_peruser { background: #FDFDF0; border-right: solid 1px #E0E0E0; border-bottom: solid 1px #E0E0E0; padding-left: 2px; padding-right: 1px; padding-top: 0px; padding-bottom: 0px; }
.cal_today_peruser_peruserleft { background: #FDFDF0; border-left: solid 2px #6C7C7B; border-right: solid 1px #E0E0E0; border-bottom: solid 1px #E0E0E0; padding-left: 2px; padding-right: 1px; padding-top: 0px; padding-bottom: 0px; }
.cal_past          { }
.cal_peruser       { padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
.cal_impair        {
	background: linear-gradient(bottom, var(--colorbacklinepair2) 85%, var(--colorbacklinepair2) 100%);
	background: -o-linear-gradient(bottom, var(--colorbacklinepair2) 85%, var(--colorbacklinepair2) 100%);
	background: -moz-linear-gradient(bottom, var(--colorbacklinepair2) 85%, var(--colorbacklinepair2) 100%);
	background: -webkit-linear-gradient(bottom, var(--colorbacklinepair2) 85%, var(--colorbacklinepair2) 100%);
}
.cal_today_peruser_impair { background: #F8F8F0; }
.peruser_busy      { }
.peruser_notbusy   { opacity: 0.5; }
div.event { margin-left: 8px; margin-right: 8px; margin-bottom: 8px; margin-top: 4px; border-radius: 4px; box-shadow: 2px 2px 5px rgba(100, 100, 100, 0.2); }
table.cal_event    { border: none; border-collapse: collapse; margin-bottom: 1px; min-height: 20px; filter: saturate(0.8); border-radius: 3px; }
table.cal_event td { border: none; padding-left: 2px; padding-right: 2px; padding-top: 0px; padding-bottom: 0px; }
table.cal_event td.cal_event { padding: 4px 4px !important; padding-bottom: 2px !important; padding-top: 2px !important; }
table.cal_event td.cal_event_right { padding: 4px 4px !important; }
.cal_event              { font-size: 1em; }
.cal_event a:link       { color: #111111; font-weight: normal !important; }
.cal_event a:visited    { color: #111111; font-weight: normal !important; }
.cal_event a:active     { color: #111111; font-weight: normal !important; }
.cal_event_notbusy a.cal_event_title:hover { color: #111111; font-weight: normal !important; }
.cal_event_busy      { }
.cal_peruserviewname { max-width: 140px; height: 30px !important; }
.cal_event span.badge.badge-status { border: 1px solid #aaa; }
table.cal_month tr td table.nobordernopadding tr td { padding: 0 2px 0 2px; }
table.cal_month tr.liste_titre td.tdfordaytitle { min-width: 120px; }
a.dayevent-aday {
	margin-left: 8px;
}
td.small.cal_event {
	font-size: 0.9em;
}

.calendarviewcontainertr { height: 100px; }

td.cal_other_month {
	opacity: 0.7;
}
td.event-past span  {
	opacity: 0.5;
}
td.peruser_holiday_imp {
	background-color: #aaa !important;
}

.cal_available { background: #0060d450; }
.cal_chosen { background: #0060d4; }


/* ============================================================================== */
/*  Ajax - Combo list for autocompletion                                          */
/* ============================================================================== */

.ui-widget-content {
	border: solid 1px rgba(0,0,0,.3);
	background: var(--colorbackbody) !important;
	color: var(--colortext) !important;
}
/*.ui-widget-header {
	background: var(--colorbacktitle);
}*/

.ui-autocomplete-loading {
	background: white url(/theme/fusion/img/working.gif) right center no-repeat;
}
.ui-autocomplete {
		   position:absolute;
		   width:auto;
		   font-size: 1.0em;
		   background-color: var(--inputbackgroundcolor);
		   border:1px solid #888;
		   margin:0px;
/*	       padding:0px; This make combo crazy */
		 }
.ui-autocomplete ul {
		   list-style-type:none;
		   margin:0px;
		   padding:0px;
		 }
.ui-autocomplete ul li.selected {
	background-color: var(--inputbackgroundcolor);
}
.ui-autocomplete ul li {
		   list-style-type:none;
		   display:block;
		   margin:0;
		   padding:2px;
		   height:18px;
		   cursor:pointer;
		 }


/* ============================================================================== */
/*  jQuery - jeditable for inline edit                                            */
/* ============================================================================== */

.editkey_textarea, .editkey_ckeditor, .editkey_string, .editkey_email, .editkey_numeric, .editkey_select, .editkey_autocomplete {
	background: url(/theme/fusion/img/edit.png) right top no-repeat;
	cursor: pointer;
	margin-right: 3px;
	margin-top: 3px;
}

.editkey_datepicker {
	background: url(/theme/fusion/img/calendar.png) right center no-repeat;
	margin-right: 3px;
	cursor: pointer;
	margin-right: 3px;
	margin-top: 3px;
}

.editval_textarea.active:hover, .editval_ckeditor.active:hover, .editval_string.active:hover, .editval_email.active:hover, .editval_numeric.active:hover, .editval_select.active:hover, .editval_autocomplete.active:hover, .editval_datepicker.active:hover {
	background: white;
	cursor: pointer;
}

.viewval_textarea.active:hover, .viewval_ckeditor.active:hover, .viewval_string.active:hover, .viewval_email.active:hover, .viewval_numeric.active:hover, .viewval_select.active:hover, .viewval_autocomplete.active:hover, .viewval_datepicker.active:hover {
	background: white;
	cursor: pointer;
}

.viewval_hover {
	background: white;
}


/* ============================================================================== */
/* Admin Menu                                                                     */
/* ============================================================================== */

/* CSS for treeview */
.treeview ul { background-color: transparent !important; margin-top: 0 !important; /* margin-bottom: 4px !important; padding-top: 2px !important; */ }
.treeview li { background-color: transparent !important; padding: 0 0 0 20px !important; min-height: 30px; }
.treeview .hitarea { width: 20px !important; margin-left: -20px !important; margin-top: 3px; }
.treeview li table { min-height: 30px; }
.treeview .hover { color: var(--colortextlink) !important; text-decoration: underline !important; }


/* ============================================================================== */
/*  Show Excel tabs                                                               */
/* ============================================================================== */

.table_data
{
	border-style:ridge;
	border:1px solid;
}
.tab_base
{
	background:#C5D0DD;
	font-weight:bold;
	border-style:ridge;
	border: 1px solid;
	cursor:pointer;
}
.table_sub_heading
{
	background:#CCCCCC;
	font-weight:bold;
	border-style:ridge;
	border: 1px solid;
}
.table_body
{
	background:#F0F0F0;
	font-weight:normal;
	font-family:sans-serif;
	border-style:ridge;
	border: 1px solid;
	border-spacing: 0px;
	border-collapse: collapse;
}
.tab_loaded
{
	background:#222222;
	color:white;
	font-weight:bold;
	border-style:groove;
	border: 1px solid;
	cursor:pointer;
}


/* ============================================================================== */
/*  CSS for color picker                                                          */
/* ============================================================================== */

div.jPicker table.jPicker {
	padding-bottom: 20px;
	padding-right: 20px;
	padding-left: 20px;
}
table.jPicker tr:first-of-type td {
	height: 2px !important;
	line-height: 2px;
}
.jPicker .Move {
	background: unset !important;
	border: unset !important;
}
.jPicker .Preview div span {
	border: unset !important;
	width: unset !important;
	height: 50% !important;
}
.jPicker div[class="Map"] {
	max-width: 150px;
}
table.jPicker {
	border-radius: 5px;
	border: 1px solid #bbb !important;
	background-color: var(--colorbackbody) !important;
	box-shadow: 0px 0px 10px #ccc;
	width: 300px !important;
}
.jPicker .Grid {
	background-image: unset !important;
}
.jPicker .Grid span.QuickColor {
	border: unset !important;
}
.jPicker td.Radio {
	min-width: 34px;
}
.jPicker td.Text {
	white-space: nowrap;
}
.jPicker .Preview div {
	height: 36px !important;
}
.jPicker input[type="button"] {
	background: var(--butactionbg);
	color: var(--textbutaction);
	border-radius: 4px;
	border-collapse: collapse;
	border: none;
}

A.color, A.color:active, A.color:visited {
 position : relative;
 display : block;
 text-decoration : none;
 width : 10px;
 height : 10px;
 line-height : 10px;
 margin : 0px;
 padding : 0px;
 border : 1px inset white;
}
A.color:hover {
 border : 1px outset white;
}
A.none, A.none:active, A.none:visited, A.none:hover {
 position : relative;
 display : block;
 text-decoration : none;
 width : 10px;
 height : 10px;
 line-height : 10px;
 margin : 0px;
 padding : 0px;
 cursor : default;
 border : 1px solid #b3c5cc;
}
.tblColor {
 display : none;
}
.tdColor {
 padding : 1px;
}
.tblContainer {
 background-color : #b3c5cc;
}
.tblGlobal {
 position : absolute;
 top : 0px;
 left : 0px;
 display : none;
 background-color : #b3c5cc;
 border : 2px outset;
}
.tdContainer {
 padding : 5px;
}
.tdDisplay {
 width : 50%;
 height : 20px;
 line-height : 20px;
 border : 1px outset white;
}
.tdDisplayTxt {
 width : 50%;
 height : 24px;
 line-height : 12px;
 font-family : arial,tahoma,verdana,helvetica;
 font-size : 8pt;
 color : black;
 text-align : center;
}
.btnColor {
 width : 100%;
 font-family : arial,tahoma,verdana,helvetica;
 font-size : 10pt;
 padding : 0px;
 margin : 0px;
}
.btnPalette {
 width : 100%;
 font-family : arial,tahoma,verdana,helvetica;
 font-size : 8pt;
 padding : 0px;
 margin : 0px;
}
.colorselector {
	border: solid 1px #ddd !important;
}

/* Style to overwrites JQuery styles */
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
	/* border: 1px solid #888; */
	background: var(--colorbacktitle1);
	color: unset;
	font-weight: bold;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
	background: var(--colorbackhmenu1);
	color: #ffffff !important;
	border: 1px solid var(--colorbackhmenu1);
}
.ui-menu {
	padding: 5px;
/*
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	*/
}
.ui-menu .ui-menu-item a {
	text-decoration:none;
	display:block;
	padding:.5em .6em;
	line-height:1.5;
	font-weight: normal;
	font-family:arial,tahoma,verdana,helvetica;
	font-size:1em;
}
.ui-widget {
	font-family:arial,tahoma,verdana,helvetica;
}
/* .ui-button { margin-left: -2px;  } */
.ui-button { margin-left: -2px; }
.ui-button-icon-only .ui-button-text { height: 8px; }
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: 2px 0px 6px 0px; }
.ui-button-text
{
	line-height: 1em !important;
}
.ui-autocomplete-input { margin: 0; padding: 4px; }


/* ============================================================================== */
/*  CKEditor                                                                      */
/* ============================================================================== */

textarea.dolibarr_mailings > div.cke body.cke_show_borders {
	margin: 0 !important;
}
/*body.cke_show_borders {
	margin: 5px !important;
}*/
.cke_source {
	margin: 5px !important;
}
.cke_dialog {
	border: 1px #bbb solid ! important;
}
/*.cke_editor table, .cke_editor tr, .cke_editor td
{
	border: 0px solid #FF0000 !important;
}
span.cke_skin_kama { padding: 0 !important; }*/
.cke_wrapper { padding: 4px !important; }
a.cke_dialog_ui_button
{
	font-family: arial,tahoma,verdana,helvetica !important;
	background-image: url(/theme/fusion/img/button_bg.png) !important;
	background-position: bottom !important;
	border: 1px solid #C0C0C0 !important;
	border-radius:0px 5px 0px 5px !important;
	box-shadow: 3px 3px 4px #DDD !important;
}
.cke_dialog_ui_hbox_first {
	vertical-align: middle !important;
}
.cke_combo_text {
	width: 40px !important;
}
/*
.cke_editable
{
	line-height: 1.4 !important;
	margin: 6px !important;
}
*/
a.cke_dialog_ui_button_ok span {
	text-shadow: none !important;
	color: #333 !important;
}
a.cke_button, a.cke_combo_button {
	height: 18px !important;
}
div.cke_notifications_area .cke_notification_warning {
	visibility: hidden;
}

.cke.cke_reset {
	margin-top: 8px;
	margin-bottom: 8px;
}

/* CSS to round border */
.cke.cke_reset, .cke_inner.cke_reset, .cke_top.cke_reset_all {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}
.cke.cke_reset, .cke_inner.cke_reset, .cke_contents.cke_reset {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}

/* CSS To hide the picto menu on smartphone, except when maximize */
@media only screen and (max-width: 768px)
{
	.cke_inner:not(.cke_maximized) .cke_toolbar_separator,
	.cke_inner:not(.cke_maximized) .cke_combo,
	.cke_inner:not(.cke_maximized) .cke_button:not(.cke_button__maximize) {
		display: none;
	}
}


/* ============================================================================== */
/*  ACE editor                                                                    */
/* ============================================================================== */
.ace_editor {
	border: 1px solid #ddd;
	margin: 0;
}
.aceeditorstatusbar {
		margin: 0;
		padding: 0;
		padding-left: 10px;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #ebebeb;
		height: 2.2em;
		line-height: 2.2em;
}
.ace_status-indicator {
		color: gray;
		position: relative;
		right: 0;
		border-left: 1px solid;
		padding-left: 10px;
}
pre#editfilecontentaceeditorid {
	margin-top: 5px;
}


/* ============================================================================== */
/*  File upload                                                                   */
/* ============================================================================== */

.template-upload {
	height: 72px !important;
}


/* ============================================================================== */
/*  Custom reports                                                                */
/* ============================================================================== */

.customreportsoutput, .customreportsoutputnotdata {
	padding-top: 20px;
}
.customreportsoutputnotdata {
	text-align: center;
}


/* ============================================================================== */
/*  Holiday                                                                       */
/* ============================================================================== */

#types .btn {
	cursor: pointer;
}

#types .btn-primary {
	font-weight: bold;
}

#types form {
	padding: 20px;
}

#types label {
	display:inline-block;
	width:100px;
	margin-right: 20px;
	padding: 4px;
	text-align: right;
	vertical-align: top;
}

#types input.text, #types textarea {
	width: 400px;
}

#types textarea {
	height: 100px;
}


/* ============================================================================== */
/*  Comments                                                                   	  */
/* ============================================================================== */

#comment div {
	box-sizing:border-box;
}
#comment .comment {
	border-radius:7px;
	margin-bottom:10px;
	overflow:hidden;
}
#comment .comment-table {
	display:table;
	height:100%;
}
#comment .comment-cell {
	display:table-cell;
}
#comment .comment-info {
	font-size:0.8em;
	border-right:1px solid #dedede;
	margin-right:10px;
	width:160px;
	text-align:center;
	background:rgba(255,255,255,0.5);
	vertical-align:middle;
	padding:10px 2px;
}
#comment .comment-info a {
	color:inherit;
}
#comment .comment-right {
	vertical-align:top;
}
#comment .comment-description {
	padding:10px;
	vertical-align:top;
}
#comment .comment-delete {
	width: 100px;
	text-align:center;
	vertical-align:middle;
}
#comment .comment-delete:hover {
	background:rgba(250,20,20,0.8);
}
#comment .comment-edit {
	width: 100px;
	text-align:center;
	vertical-align:middle;
}
#comment .comment-edit:hover {
	background:rgba(0,184,148,0.8);
}
#comment textarea {
	width: 100%;
}



/* ============================================================================== */
/*  JSGantt                                                                       */
/* ============================================================================== */

div.scroll2 {
	width: 450px !important;
}

div#GanttChartDIVglisthead, div#GanttChartDIVgcharthead {
	line-height: 2;
}

.gtaskname div, .gtaskname, .gstartdate div, .gstartdate, .genddate div, .genddate {
	font-size: unset !important;
}

div.gantt, .gtaskheading, .gmajorheading, .gminorheading, .gminorheadingwkend {
	font-size: unset !important;
	font-weight: normal !important;
	color: #000 !important;
}
div.gTaskInfo {
	background: #f0f0f0 !important;
}
.gtaskblue {
	background: rgb(108,152,185) !important;
}
.gtaskgreen {
	background: rgb(160,173,58) !important;
}
td.gtaskname {
	overflow: hidden;
	text-overflow: ellipsis;
}
td.gminorheadingwkend {
	color: #888 !important;
}
td.gminorheading {
	color: #666 !important;
}
.glistlbl, .glistgrid {
	width: 582px !important;
}
/*.gtaskname div, .gtaskname {
	min-width: 250px !important;
	max-width: 250px !important;
	width: 250px !important;
}*/
.gtaskname div, .gtaskname {
	min-width: 250px !important;
	max-width: 500px !important;
	width: unset !important;
}
.gpccomplete div, .gpccomplete {
	min-width: 40px !important;
	max-width: 40px !important;
	width: 40px !important;
}
td.gtaskheading.gstartdate, td.gtaskheading.genddate {
	white-space: break-spaces;
}
.gtasktableh tr:nth-child(2) td:nth-child(2), .gtasktableh tr:nth-child(2) td:nth-child(3), .gtasktableh tr:nth-child(2) td:nth-child(4), .gtasktableh tr:nth-child(2) td:nth-child(5), .gtasktableh tr:nth-child(2) td:nth-child(6), .gtasktableh tr:nth-child(2) td:nth-child(7) {
	color: transparent !important;
	border-left: none;
	border-right: none;
	border-top: none;
}

/* ============================================================================== */
/*  jFileTree                                                                     */
/* ============================================================================== */

.ecmfiletree {
	width: 99%;
	height: 99%;
	padding-left: 2px;
	font-weight: normal;
}

.fileview {
	width: 99%;
	height: 99%;
	background: #FFF;
	padding-left: 2px;
	padding-top: 4px;
	font-weight: normal;
}

div.filedirelem {
	position: relative;
	display: block;
	text-decoration: none;
}

ul.filedirelem {
	padding: 2px;
	margin: 0 5px 5px 5px;
}
ul.filedirelem li {
	list-style: none;
	padding: 2px;
	margin: 0 10px 20px 10px;
	width: 160px;
	height: 120px;
	text-align: center;
	display: block;
	float: left;
	border: solid 1px #DDDDDD;
}

ul.ecmjqft {
	line-height: 32px;
	padding: 0px;
	margin: 0px;
	font-weight: normal;
}

ul.ecmjqft li {
	list-style: none;
	padding: 0px;
	padding-left: 20px;
	margin: 0px;
	white-space: nowrap;
	display: block;
}

ul.ecmjqft a {
	line-height: 24px;
	vertical-align: middle;
	color: unset;
	padding: 0px 0px;
	font-weight:normal;
	display: inline-block !important;
}
ul.ecmjqft > a {
	width: calc(100% - 100px);
	overflow: hidden;
	white-space: break-spaces;
	word-break: break-all;
}
ul.ecmjqft a:active {
	font-weight: bold !important;
}
ul.ecmjqft a:hover {
	text-decoration: underline;
}
div.ecmjqft {
	vertical-align: middle;
	display: inline-block !important;
	text-align: right;
	float: right;
	right:4px;
	clear: both;
	height: 16px;
}
#ecm-layout-north {
	min-height: 40px;
}
#ecm-layout-north div.attachareaformuserfileecm {
	padding-bottom: 0px;
}
div#ecm-layout-west {
	width: 380px;
	vertical-align: top;
}
div#ecm-layout-center {
	width: calc(100% - 405px);
	vertical-align: top;
	float: right;
}

.ecmjqft LI.directory { font-weight:normal; background: url(/theme/common/treemenu/folder2.png) left top no-repeat; background-position-y: 8px; }
.ecmjqft LI.expanded { font-weight:normal; background: url(/theme/common/treemenu/folder2-expanded.png) left top no-repeat; background-position-y: 8px; }
.ecmjqft LI.wait { font-weight:normal; background: url(/theme/fusion/img/working.gif) left top no-repeat; }


/* ============================================================================== */
/*  jNotify                                                                       */
/* ============================================================================== */

.jnotify-container {
	position: fixed !important;
	text-align: center;
	min-width: 480px;
	width: auto;
	max-width: 1024px;
	padding-left: 10px !important;
	padding-right: 10px !important;
	padding-top: 10px !important;
	word-wrap: break-word;
}
.jnotify-container .jnotify-notification .jnotify-message {
	font-weight: normal;
	text-align: start;
	word-break: break-word;
}
.jnotify-container .jnotify-notification-warning .jnotify-close, .jnotify-container .jnotify-notification-warning .jnotify-message {
	color: #a28918 !important;
}
.jnotify-container .jnotify-close {
	top: 4px !important;
	font-size: 1.6em !important;
}

/* use or not ? */
div.jnotify-background {
	opacity : 0.95 !important;
	box-shadow: 2px 2px 4px #8888 !important;
}

/* jnotify for the login page */
.bodylogin .jnotify-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100000;
	max-width: unset;
	padding-left: unset !important;
	padding-right: unset !important;
	padding-top: unset !important;
}
.bodylogin .jnotify-container .jnotify-notification {
	margin: unset !important;
}
.bodylogin .jnotify-container .jnotify-notification .jnotify-background {
	border-radius: unset !important;
}
.bodylogin .jnotify-container .jnotify-notification .jnotify-message {
	text-align: center;
	font-size: 1.1em;
	font-weight: bold;
}


/* ============================================================================== */
/*  blockUI                                                                      */
/* ============================================================================== */

/*div.growlUI { background: url(check48.png) no-repeat 10px 10px }*/
div.dolEventValid h1, div.dolEventValid h2 {
	color: #567b1b;
	background-color: #e3f0db;
	padding: 5px 5px 5px 5px;
	text-align: left;
}
div.dolEventError h1, div.dolEventError h2 {
	color: #a72947;
	background-color: #d79eac;
	padding: 5px 5px 5px 5px;
	text-align: left;
}

/* ============================================================================== */
/*  Maps                                                                          */
/* ============================================================================== */

.divmap, #google-visualization-geomap-embed-0, #google-visualization-geomap-embed-1, #google-visualization-geomap-embed-2 {
}


/* ============================================================================== */
/*  Datatable                                                                     */
/* ============================================================================== */

table.dataTable tr.odd td.sorting_1, table.dataTable tr.even td.sorting_1 {
  background: none !important;
}
.sorting_asc  { background: url('/theme/fusion/img/sort_asc.png') no-repeat center right !important; }
.sorting_desc { background: url('/theme/fusion/img/sort_desc.png') no-repeat center right !important; }
.sorting_asc_disabled  { background: url('/theme/fusion/img/sort_asc_disabled.png') no-repeat center right !important; }
.sorting_desc_disabled { background: url('/theme/fusion/img/sort_desc_disabled.png') no-repeat center right !important; }
.dataTables_paginate {
	margin-top: 8px;
}
.paginate_button_disabled {
  opacity: 1 !important;
  color: #888 !important;
  cursor: default !important;
}
.paginate_disabled_previous:hover, .paginate_enabled_previous:hover, .paginate_disabled_next:hover, .paginate_enabled_next:hover
{
	font-weight: normal;
}
.paginate_enabled_previous:hover, .paginate_enabled_next:hover
{
	text-decoration: underline !important;
}
.paginate_active
{
	text-decoration: underline !important;
}
.paginate_button
{
	font-weight: normal !important;
	text-decoration: none !important;
}
.paging_full_numbers {
	height: inherit !important;
}
.paging_full_numbers a.paginate_active:hover, .paging_full_numbers a.paginate_button:hover {
	background-color: var(--colorbackbody) !important;
}
.paging_full_numbers, .paging_full_numbers a.paginate_active, .paging_full_numbers a.paginate_button {
	background-color: var(--colorbackbody) !important;
	border-radius: inherit !important;
}
.paging_full_numbers a.paginate_button_disabled:hover, .paging_full_numbers a.disabled:hover {
	background-color: var(--colorbackbody) !important;
}
.paginate_button, .paginate_active {
  border: 1px solid #ddd !important;
  padding: 6px 12px !important;
  margin-left: -1px !important;
  line-height: 1.42857143 !important;
  margin: 0 0 !important;
}

/* For jquery plugin combobox */
/* Disable this. It breaks wrapping of boxes
.ui-corner-all { white-space: nowrap; } */

.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled, .paginate_button_disabled {
	opacity: .35;
	background-image: none;
}

div.dataTables_length {
	float: right !important;
	padding-left: 8px;
}
div.dataTables_length select {
	background: #fff;
}
.dataTables_wrapper .dataTables_paginate {
	padding-top: 0px !important;
}


/* ============================================================================== */
/*  Select2                                                                       */
/* ============================================================================== */

.heightofcombo {
	height: 28px;
}
.select2-container .select2-selection--single {
	height: 28px;
}

span.select2-selection--single.flat[aria-disabled="true"] span.select2-selection__rendered {
	opacity: 0.5;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--colorbackhmenu1);
	color: var(--colortextbackhmenu);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] span {
	color: #fff !important;
}

span.select2.select2-container.select2-container--default {
	text-align: initial;
	}

input.select2-input {
	border-bottom: none ! important;
}
.select2-choice {
	border: none;
	border-bottom: solid 1px var(--inputbordercolor) !important;	/* required to avoid to lose bottom line when focus is lost on select2. */
}
.select2-results .select2-highlighted.optionblue {
	color: #FFF !important;
}
.select2-container .select2-selection--multiple {
	min-height: 2em !important;
}
.tableforfield .select2-container .select2-selection--single {
	height: 25px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
	border: none;
}
.select2-container--focus span.select2-selection.select2-selection--single {
	border-bottom: 1px solid var(--inputbordercolor) !important;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.blockvmenusearch .select2-container--default .select2-selection--single,
.blockvmenubookmarks .select2-container--default .select2-selection--single
{
	background-color: var(--colorbackvmenu1);
}
.select2-container--default .select2-selection--single {
	background-color: var(--inputbackgroundcolor);
}
#blockvmenusearch .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--colortextbackvmenu);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--colortext);
	/* background-color: var(--inputbackgroundcolor); */
}
.select2-default {
	color: #999 !important;
}
.select2-choice, .select2-container .select2-choice {
	border-bottom: solid 1px rgba(0,0,0,.4);
}
.select2-container .select2-choice > .select2-chosen {
	margin-right: 23px;
}
.select2-container .select2-choice .select2-arrow {
	border-radius: 0;
	background: transparent;
}
.select2-container-multi .select2-choices {
	background-image: none;
}
.select2-container .select2-choice {
	color: var(--colortext);
	border-radius: 0;
}
.selectoptiondisabledwhite {
	background: #FFFFFF !important;
}
.select2-arrow {
	border: none;
	border-left: none !important;
	background: none !important;
}
.select2-choice
{
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
}
.select2-drop.select2-drop-above {
	box-shadow: none !important;
}
.select2-container--open .select2-dropdown--above {
	border-bottom: solid 1px var(--inputbordercolor);
}
.select2-drop.select2-drop-above.select2-drop-active {
	border-top: 1px solid #ccc;
	border-bottom: solid 1px var(--inputbordercolor);
}
.select2-container--default .select2-selection--single
{
	outline: none;
	
	border: solid 1px var(--inputbordercolor);

	box-shadow: none !important;
	border-radius: 3px;
}
.select2-container--focus .select2-container--default .select2-selection--single {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
	border-top: none;
	border-left: none;
	border-right: none;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.select2-container--default .select2-selection--multiple {
	border-bottom: solid 1px var(--inputbordercolor);
	border-top: none;
	border-left: none;
	border-right: none;
	border-radius: 3px;
	background: var(--inputbackgroundcolor);
	line-height: normal;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
	line-height: 1.4em;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
	background-color: #ddd;
	margin-top: 0.25em !important;
}
.select2-selection--multiple input.select2-search__field {
	border-bottom: none !important;
}

.select2-search__field
{
	outline: none;
	border-top: none !important;
	border-left: none !important;
	border-right: none !important;
	border-bottom: solid 1px var(--inputbordercolor) !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	/* color: black; */
}
.select2-container-active .select2-choice, .select2-container-active .select2-choices
{
	outline: none;
	border-top: none;
	border-left: none;
	border-bottom: none;
	box-shadow: none !important;
}
.select2-dropdown {
	/*background-color: var(--colorbackvmenu1);
	border: 1px solid var(--colorbackvmenu1); */
	box-shadow: 1px 2px 10px #8884;
	background-color: var(--colorbackbody);
	color: var(--colortext);
}
.select2-dropdown-open {
	background-color: var(--colorbackvmenu1);
}
.select2-dropdown-open .select2-choice, .select2-dropdown-open .select2-choices
{
	outline: none;
	border-top: none;
	border-left: none;
	border-bottom: none;
	box-shadow: none !important;
	background-color: var(--colorbackvmenu1);
}
.select2-disabled
{
	color: #888;
}
.select2-drop.select2-drop-above.select2-drop-active, .select2-drop {
	border-radius: 0;
}
.select2-drop.select2-drop-above {
	border-radius:  0;
}
.select2-dropdown-open.select2-drop-above .select2-choice, .select2-dropdown-open.select2-drop-above .select2-choices {
	background-image: none;
	border-radius: 0 !important;
}
div.select2-drop-above
{
	background: var(--colorbackvmenu1);
	box-shadow: none !important;
}
.select2-drop-active
{
	border: 1px solid #ccc;
	padding-top: 4px;
}
.select2-search input {
	border: none;
}
a span.select2-chosen
{
	font-weight: normal !important;
}
.select2-container .select2-choice {
	background-image: none;
	/* line-height: 24px; */
}
.select2-results .select2-no-results, .select2-results .select2-searching, .select2-results .select2-ajax-error, .select2-results .select2-selection-limit
{
	background: var(--colorbackvmenu1);
}
.select2-results {
	max-height:	400px;
}
.select2-results__option {
	word-break: break-word;
	text-align: left;
}
.select2-container.select2-container-disabled .select2-choice, .select2-container-multi.select2-container-disabled .select2-choices {
	background-color: var(--colorbackvmenu1);
	background-image: none;
	border: none;
	cursor: default;
}
.select2-container-disabled .select2-choice .select2-arrow b {
	opacity: 0.4;
}
.select2-container-multi .select2-choices .select2-search-choice {
	margin-bottom: 3px;
}
.select2-dropdown-open.select2-drop-above .select2-choice, .select2-dropdown-open.select2-drop-above .select2-choices, .select2-container-multi .select2-choices,
.select2-container-multi.select2-container-active .select2-choices
{
	border-bottom: 1px solid #ccc;
	border-right: none;
	border-top: none;
	border-left: none;

}
.select2-container--default .select2-results>.select2-results__options{
	max-height: 400px;
}

/* special case for some select2 component */

.selecttype span.select2-dropdown.ui-dialog {
	min-width: 200px;
}
span#select2-taskid-container[title^='--'] {
	opacity: 0.3;
}

/* Special case for the select2 add widget */

#addbox .select2-container .select2-choice > .select2-chosen, #actionbookmark .select2-container .select2-choice > .select2-chosen {
	text-align: left;
	opacity: 0.4;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--colortext);
	opacity: 0.4;
}
span#select2-boxbookmark-container, span#select2-boxcombo-container {
	text-align: left;
}
span#select2-boxbookmark-container {
	opacity: 0.4;
}
.select2-container .select2-selection--single .select2-selection__rendered {
	padding-left: 6px;
}
/* Style used before the select2 js is executed on boxcombo */
#boxbookmark.boxcombo, #boxcombo.boxcombo {
	text-align: left;
	opacity: 0.4;
	border-bottom: solid 1px rgba(0,0,0,.4) !important;
	height: 26px;
	line-height: 24px;
	padding: 0 0 2px 0;
	vertical-align: top;
}

/* To emulate select 2 style */
.select2-container-multi-dolibarr .select2-choices-dolibarr .select2-search-choice-dolibarr {
  padding: 3px 5px 3px 5px;
  margin: 0 0 2px 3px;
  position: relative;
  /* line-height: 1em; */
  color: #333;
  cursor: default;
  border: 1px solid #aaaaaa;
  border-radius: 3px;
  box-shadow: 0 0 2px var(--inputbackgroundcolor) inset, 0 1px 0 rgba(0, 0, 0, 0.05);
  background-clip: padding-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: var(--inputbackgroundcolor);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee));
  background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
  background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
  background-image: linear-gradient(to bottom, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
}
.mytooltip .select2-container-multi-dolibarr .select2-choices-dolibarr .select2-search-choice-dolibarr {
  padding: 1px 3px 1px 3px;
}
.select2-container-multi-dolibarr .select2-choices-dolibarr .select2-search-choice-dolibarr a {
	font-weight: normal;
}
.select2-container-multi-dolibarr .select2-choices-dolibarr li {
  float: left;
  list-style: none;
}
.select2-container-multi-dolibarr .select2-choices-dolibarr {
  height: auto !important;
  height: 1%;
  margin: 0;
  padding: 0 5px 0 0;
  position: relative;
  cursor: text;
  overflow: hidden;
}
.select2-results__option {
	padding: 8px;
}
span.select2-dropdown--below {
	margin-top: -1px;
	min-width: 100px;
}
span.select2-dropdown--above {
	margin-bottom: -1px;
	min-width: 100px;
}

.parentonrightofpage {
  direction: rtl;
}

select.multiselectononeline {
	padding: 0;
	vertical-align: middle;
	min-height: unset;
	height: 2.2em !important;
	opacity: 0;
	/* width: 1px !important; */
}

@media only screen and (min-width: 768px)
{
	/* CSS to have the dropdown boxes larger that the input search area */
	.select2-container.select2-container--open:not(.graphtype, .limit, .combolargeelem):not(.yesno) .select2-dropdown.ui-dialog {
		min-width: 230px !important;
	}
	.select2-container.select2-container--open:not(.graphtype, .limit, .combolargeelem):not(.yesno) .select2-dropdown--below:not(.onrightofpage),
	.select2-container.select2-container--open:not(.graphtype, .limit, .combolargeelem):not(.yesno) .select2-dropdown--above:not(.onrightofpage) {
		min-width: 230px !important;
	}
	.onrightofpage span.select2-dropdown.ui-dialog.select2-dropdown--below,
	.onrightofpage span.select2-dropdown.ui-dialog.select2-dropdown--above {
		min-width: 140px !important;
	}
	.combolargeelem.select2-container.select2-container--open .select2-dropdown.ui-dialog {
		min-width: 320px !important;
	}

	.select2-container--open .select2-dropdown--below {
		border-top: 1px solid var(--inputbordercolor);
		/* border-top: 1px solid #aaaaaa; */
	}
}

/* must be after the other .select2-container.select2-container--open .select2-dropdown.ui-dialog */
.limit.select2-container.select2-container--open .select2-dropdown.ui-dialog {
	min-width: 100px !important;
}


/* ============================================================================== */
/*  For categories                                                                */
/* ============================================================================== */

.noborderoncategories {
	border: none !important;
	border-radius: 5px !important;
	box-shadow: none;
	box-shadow: none !important;
	margin-top: 1px !important;
	margin-bottom: 0 !important;
}
span.noborderoncategories a, li.noborderoncategories a {
	line-height: normal;
	/* vertical-align: top; */
}
span.noborderoncategories {
	padding: 3px 5px 3px 5px;
	display: inline-block;
}
.categtextwhite, .treeview .categtextwhite.hover {
	color: #fff !important;
}
.categtextblack {
	color: #000 !important;
}


/* ============================================================================== */
/*  External lib multiselect with checkbox                                        */
/* ============================================================================== */

.multi-select-menu {
	z-index: 10;
}

.multi-select-container {
  display: inline-block;
  position: relative;
}

.multi-select-menu {
  position: absolute;
  left: 0;
  top: 0.8em;
  float: left;
  min-width: 100%;
  background: var(--inputbackgroundcolor);
  margin: 1em 0;
  padding: 0.4em 0;
  border: 1px solid #aaa;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  display: none;
}

div.multi-select-menu[role="menu"] {
	min-width: 220px !important;
}

.multi-select-menu input {
  margin-right: 0.3em;
  /* vertical-align: 0.1em; */
}

.multi-select-button {
  display: inline-block;
  max-width: 20em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  background-color: var(--inputbackgroundcolor);
  cursor: default;

  border: none;
  border-bottom: solid 1px var(--inputbordercolor);
  padding: 5px;
  padding-left: 6px;
  height: 17px;
  border-radius: 3px;

  text-align: start;
}
.multi-select-button:focus {
  outline: none;
  border-bottom: 1px solid #666;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.multi-select-button:after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.4em 0.3em 0em 0.3em;
  border-color: #888 transparent transparent transparent;
  margin-left: 0.4em;
  position: absolute;
  right: 10px;
  top: 12px;
}

.multi-select-container--open .multi-select-menu { display: block; }

.multi-select-container--open .multi-select-button:after {
  border-width: 0 0.4em 0.4em 0.4em;
  border-color: transparent transparent #888 transparent;
}

.multi-select-menuitem {
	clear: both;
	float: left;
	padding-left: 10px;
}
label.multi-select-menuitem {
	line-height: 32px;
	text-align: start;
}


/* ============================================================================== */
/*  Native multiselect with checkbox                                              */
/* ============================================================================== */

ul.ulselectedfields {
	z-index: 95;			/* To have the select box appears on first plan even when near buttons are decorated by jmobile */
}
dl.dropdown {
	margin:0px;
	margin-left: 2px;
	margin-right: 2px;
	padding:0px;
	vertical-align: middle;
	display: inline-block;
}
.dropdown dd, .dropdown dt {
	margin:0px;
	padding:0px;
}
.dropdown ul {
	margin: -1px 0 0 0;
	text-align: left;
}
.dropdown dd {
	position:relative;
}
.dropdown dt a {
	display:block;
	overflow: hidden;
	border:0;
}
.dropdown dt a span, .multiSel span {
	cursor:pointer;
	display:inline-block;
	padding: 0 3px 2px 0;
}
.maxwidthsearch .dropdown dt a span, .multiSel span {
	padding: 3px 3px 2px 3px;
}
.dropdown span.value {
	display:none;
}
.dropdown dd ul {
	background-color: var(--inputbackgroundcolor);
	box-shadow: 1px 1px 10px #aaa;
	display:none;
	right:0px;						/* pop is align on right */
	padding: 0 0 0 0;
	position:absolute;
	top:2px;
	list-style:none;
	max-height: 264px;
	overflow: auto;
	border-radius: 4px;
	z-index: 1;
}
.dropdown dd ul.selectedfieldsleft {
	right: auto;
}
.dropdown dd ul li {
	white-space: nowrap;
	font-weight: normal;
	padding: 7px 8px 7px 8px;
	/* color: var(--colortext); */
	color: var(--colortext);
}

dropdown dd ul li:hover:not(.linputsearch) {
	background: #eee;
}
.dropdown dd ul li input[type="checkbox"] {
	margin-right: 3px;
}
.dropdown dd ul li a, .dropdown dd ul li span {
	padding: 3px;
}
.dropdown dd ul li a {
	display: block;
}
.dropdown dd ul li span {
	color: #888;
}
/*.dropdown dd ul li a:hover {
	background-color: var(--inputbackgroundcolor);
}*/
dd.dropdowndd ul li {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

/* ============================================================================== */
/* Kanban                                                                         */
/* ============================================================================== */

.info-box-label {
	max-width: 180px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

div.kanban.column div.ui-sortable-helper {
	transform: rotate(4deg);
}

/* ============================================================================== */
/*  Markdown rendering                                                             */
/* ============================================================================== */

.imgmd {
	width: 90%;
}
.moduledesclong h1 {
	padding-top: 10px;
	padding-bottom: 20px;
}


/* ============================================================================== */
/*  JMobile - Android                                                             */
/* ============================================================================== */

.searchpage .tagtr .tagtd {
	padding-top: 2px;
	padding-bottom: 2px;
}
.searchpage .tagtr .tagtd .button {
	background: unset;
	border: unset;
}
.searchpage .searchform input {
	font-size: 1.15em;
}


li.ui-li-divider .ui-link {
	color: #FFF !important;
}
.ui-btn {
	margin: 0 2px;
}
a.ui-link, a.ui-link:hover, .ui-btn:hover, span.ui-btn-text:hover, span.ui-btn-inner:hover {
	text-decoration: none !important;
}
.ui-body-c {
	background: #fff;
}

.ui-btn-inner {
	min-width: .4em;
	padding-left: 6px;
	padding-right: 6px;
	font-size: 0.92em;
	/* white-space: normal; */		/* Warning, enable this break the truncate feature */
}
.ui-btn-icon-right .ui-btn-inner {
	padding-right: 30px;
}
.ui-btn-icon-left .ui-btn-inner {
	padding-left: 30px;
}
.ui-select .ui-btn-icon-right .ui-btn-inner {
	padding-right: 30px;
}
.ui-select .ui-btn-icon-left .ui-btn-inner {
	padding-left: 30px;
}
.ui-select .ui-btn-icon-right .ui-icon {
	right: 8px;
}
.ui-btn-icon-left > .ui-btn-inner > .ui-icon, .ui-btn-icon-right > .ui-btn-inner > .ui-icon {
	margin-top: -10px;
}
select {
	/* display: inline-block; */	/* We can't set this. This disable ability to make */
	overflow:hidden;
	white-space: nowrap;			/* Enabling this make behaviour strange when selecting the empty value if this empty value is '' instead of '&nbsp;' */
	text-overflow: ellipsis;
}
.fiche .ui-controlgroup {
	margin: 0px;
	padding-bottom: 0px;
}
div.ui-controlgroup-controls div.tabsElem
{
	margin-top: 2px;
}
div.ui-controlgroup-controls div.tabsElem a
{
	box-shadow: 0 -3px 6px rgba(0,0,0,.2);
}
div.ui-controlgroup-controls div.tabsElem a#active {
	box-shadow: 0 -3px 6px rgba(0,0,0,.3);
}

a.tab span.ui-btn-inner
{
	border: none;
	padding: 0;
}

.ui-link {
	color: var(--colortext);
}
.liste_titre .ui-link {
	color: var(--colortexttitle) !important;
}

a.ui-link {
	word-wrap: break-word;
}

/* force wrap possible onto field overflow does not works */
.formdoc .ui-btn-inner
{
	white-space: normal;
	overflow: hidden;
	text-overflow: clip; /* "hidden" : do not exists as a text-overflow value (https://developer.mozilla.org/fr/docs/Web/CSS/text-overflow) */
}

/* Warning: setting this may make screen not being refreshed after a combo selection */
/*.ui-body-c {
	background: #fff;
}*/

div.ui-radio, div.ui-checkbox
{
	display: inline-block;
	border-bottom: 0px !important;
}
.ui-checkbox input, .ui-radio input {
	height: auto;
	width: auto;
	margin: 4px;
	position: static;
}
div.ui-checkbox label+input, div.ui-radio label+input {
	position: absolute;
}
.ui-mobile fieldset
{
	padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid #AAAAAA !important;
}

ul.ulmenu {
	border-radius: 0;
}

.ui-field-contain label.ui-input-text {
	vertical-align: middle !important;
}
.ui-mobile fieldset {
	border-bottom: none !important;
}

/* Style for first level menu with jmobile */
.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
	padding: 1em 15px;
	display: block;
}
.ui-btn-up-c {
	font-weight: normal;
}
.ui-focus, .ui-btn:focus {
	box-shadow: none;
}
.ui-bar-b {
	/*border: 1px solid #888;*/
	border: none;
	background: none;
	text-shadow: none;
	color: var(--colortexttitlenotab) !important;
}
.ui-bar-b, .lilevel0 {
	background-repeat: repeat-x;
	border: none;
	background: none;
	text-shadow: none;
	color: var(--colortexttitlenotab) !important;
}
.alilevel0 {
	font-weight: normal !important;
}

.ui-li.ui-last-child, .ui-li.ui-field-contain.ui-last-child {
	border-bottom-width: 0px !important;
}
.alilevel0 {
	color: var(--colortexttitle) !important;
	background: var(--colorbackmobilemenu);
}
.ulmenu {
	box-shadow: none !important;
	border-bottom: 1px solid #ccc;
}
.ui-btn-icon-right {
	border-right: 1px solid #ccc !important;
}
.ui-body-c {
	border: 1px solid #ccc;
	text-shadow: none;
}
.ui-btn-up-c, .ui-btn-hover-c {
	/* border: 1px solid #ccc; */
	text-shadow: none;
}
.ui-body-c .ui-link, .ui-body-c .ui-link:visited, .ui-body-c .ui-link:hover {
	color: var(--colortextlink);
}
.ui-btn-up-c .vsmenudisabled {
	color: #888888 !important;
	text-shadow: none !important;
}
div.tabsElem a.tab {
	background: transparent;
}
.alilevel1 {
	color: var(--colortexttitlenotab) !important;
}
.lilevel1 {
	border-top: 2px solid #444;
	background: #fff ! important;
}
.lilevel1 div div a {
	font-weight: bold !important;
}
.lilevel2
{
	padding-left: 22px;
	background: #fff ! important;
}
.lilevel3
{
	padding-left: 44px;
	background: #fff ! important;
	font-size: 0.9em;
}
.lilevel4
{
	padding-left: 66px;
	background: #fff ! important;
	font-size: 0.9em;
}
.lilevel5
{
	padding-left: 88px;
	background: #fff ! important;
	font-size: 0.9em;
}



/* ============================================================================== */
/*  POS                                                                           */
/* ============================================================================== */

.menu_choix1,.menu_choix2 {
	font-size: 1.4em;
	text-align: left;
	border: 1px solid #666;
	margin-right: 20px;
}
.menu_choix1 a, .menu_choix2 a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding-top: 18px;
	padding-left: 10px;
	font-size: 14px;
	height: 38px;
}
.menu_choix1 a:hover,.menu_choix2 a:hover {
	color: #6d3f6d;
}
.menu li.menu_choix1 {
	padding-top: 6px;
	padding-right: 10px;
	padding-bottom: 2px;
}
.menu li.menu_choix2 {
	padding-top: 6px;
	padding-right: 10px;
	padding-bottom: 2px;
}
@media only screen and (max-width: 768px)
{
	.menu_choix1 a, .menu_choix2 a {
		background-size: 36px 36px;
		height: 30px;
		padding-left: 40px;
	}
	.menu li.menu_choix1, .menu li.menu_choix2 {
		padding-left: 4px;
		padding-right: 0;
	}
	.liste_articles {
		margin-right: 0 !important;
	}
}


/* ============================================================================== */
/*  Public                                                                        */
/* ============================================================================== */

/* The theme for public pages */
.public_body {
	margin: 20px;
}
.public_border {
	border: 1px solid #888;
}
.publicnewmemberform div.tabBarWithBottom {
	border: 2px solid #e8e8e8;
	padding: 30px;
	border-radius: 8px;
	/* background-color: var(--colorbackgrey); */
	box-shadow: 2px 2px 10px #ddd;
}

.publicnewmemberform #tablesubscribe {
	color: var(--colortextbackvmenu);
}

@media only screen and (max-width: 768px)
{
	.publicnewmemberform div.tabBarWithBottom {
		padding: 10px;
	}
}


/* ============================================================================== */
/* Ticket module                                                                  */
/* ============================================================================== */

#KWwithajax ul {
	padding-left: 20px;
}

.ticketpublictable td {
	height: 2.2em;
}

.ticketpublicarea {
	margin-left: 15%;
	margin-right: 15%;
}
.publicnewticketform {
	/* margin-top: 25px !important; */
}
.ticketlargemargin {
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 30px;
}
@media only screen and (max-width: 768px)
{
	.ticketlargemargin {
		padding-left: 5px; padding-right: 5px;
		padding-top: 10px;
	}
	.ticketpublicarea {
		margin-left: 10px;
		margin-right: 10px;
	}
}

#cd-timeline {
  position: relative;
  padding: 2em 0;
  margin-bottom: 2em;
}
#cd-timeline::before {
  /* this is the vertical line */
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  height: 100%;
  width: 4px;
  background: #d7e4ed;
}
@media only screen and (min-width: 1170px) {
  #cd-timeline {
	margin-bottom: 3em;
  }
  #cd-timeline::before {
	left: 50%;
	margin-left: -2px;
  }
}

.cd-timeline-block {
  position: relative;
  margin: 2em 0;
}
.cd-timeline-block:after {
  content: "";
  display: table;
  clear: both;
}
.cd-timeline-block:first-child {
  margin-top: 0;
}
.cd-timeline-block:last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-block {
	margin: 4em 0;
  }
  .cd-timeline-block:first-child {
	margin-top: 0;
  }
  .cd-timeline-block:last-child {
	margin-bottom: 0;
  }
}

.cd-timeline-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px white, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
  background: #d7e4ed;
}
.cd-timeline-img img {
  display: block;
  width: 24px;
  height: 24px;
  position: relative;
  left: 50%;
  top: 50%;
  margin-left: -12px;
  margin-top: -12px;
}
.cd-timeline-img.cd-picture {
  background: #75ce66;
}
.cd-timeline-img.cd-movie {
  background: #c03b44;
}
.cd-timeline-img.cd-location {
  background: #f0ca45;
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-img {
	width: 60px;
	height: 60px;
	left: 50%;
	margin-left: -30px;
	/* Force Hardware Acceleration in WebKit */
	-webkit-transform: translateZ(0);
	-webkit-backface-visibility: hidden;
  }
  .cssanimations .cd-timeline-img.is-hidden {
	visibility: hidden;
  }
  .cssanimations .cd-timeline-img.bounce-in {
	visibility: visible;
	-webkit-animation: cd-bounce-1 0.6s;
	-moz-animation: cd-bounce-1 0.6s;
	animation: cd-bounce-1 0.6s;
  }
}

@-webkit-keyframes cd-bounce-1 {
  0% {
	opacity: 0;
	-webkit-transform: scale(0.5);
  }

  60% {
	opacity: 1;
	-webkit-transform: scale(1.2);
  }

  100% {
	-webkit-transform: scale(1);
  }
}
@-moz-keyframes cd-bounce-1 {
  0% {
	opacity: 0;
	-moz-transform: scale(0.5);
  }

  60% {
	opacity: 1;
	-moz-transform: scale(1.2);
  }

  100% {
	-moz-transform: scale(1);
  }
}
@keyframes cd-bounce-1 {
  0% {
	opacity: 0;
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-ms-transform: scale(0.5);
	-o-transform: scale(0.5);
	transform: scale(0.5);
  }

  60% {
	opacity: 1;
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
  }

  100% {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
  }
}
.cd-timeline-content {
  position: relative;
  margin-left: 60px;
  background: white;
  border-radius: 0.25em;
  padding: 1em;
  background-image: -o-linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(230,230,230,0.4) 100%);
  background-image: -moz-linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(230,230,230,0.4) 100%);
  background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(230,230,230,0.4) 100%);
  background-image: linear-gradient(bottom, rgba(0,0,0,0.1) 0%, rgba(230,230,230,0.4) 100%);
}
.cd-timeline-content:after {
  content: "";
  display: table;
  clear: both;
}
.cd-timeline-content h2 {
  color: #303e49;
}
.cd-timeline-content .cd-date {
  font-size: 13px;
  font-size: 0.8125rem;
}
.cd-timeline-content .cd-date {
  display: inline-block;
}
.cd-timeline-content p {
  margin: 1em 0;
  line-height: 1.6;
}

.cd-timeline-content .cd-date {
  float: left;
  padding: .2em 0;
  opacity: .7;
}
.cd-timeline-content::before {
  content: '';
  position: absolute;
  top: 16px;
  right: 100%;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-right: 7px solid white;
}
@media only screen and (min-width: 768px) {
  .cd-timeline-content h2 {
	font-size: 20px;
	font-size: 1.25rem;
  }
  .cd-timeline-content {
	font-size: 16px;
	font-size: 1rem;
  }
  .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
	font-size: 14px;
	font-size: 0.875rem;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-timeline-content {
	margin-left: 0;
	padding: 1.6em;
	width: 43%;
  }
  .cd-timeline-content::before {
	top: 24px;
	left: 100%;
	border-color: transparent;
	border-left-color: white;
  }
  .cd-timeline-content .cd-read-more {
	float: left;
  }
  .cd-timeline-content .cd-date {
	position: absolute;
	width: 55%;
	left: 115%;
	top: 6px;
	font-size: 16px;
	font-size: 1rem;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content {
	float: right;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
	top: 24px;
	left: auto;
	right: 100%;
	border-color: transparent;
	border-right-color: white;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
	float: right;
  }
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
	left: auto;
	right: 115%;
	text-align: right;
  }

}


/* ============================================================================== */
/* CSS style for debugbar                                                         */
/* ============================================================================== */

div.phpdebugbar * {
	font-weight: unset;
}
span.phpdebugbar-tooltip.phpdebugbar-tooltip-extra-wide, span.phpdebugbar-tooltip.phpdebugbar-tooltip-wide {
	width: 250px !important;
}
.phpdebugbar-indicator span.phpdebugbar-tooltip {
	opacity: .95 !important;
}
a.phpdebugbar-tab.phpdebugbar-active {
	background-image: unset !important;
}
.phpdebugbar-fa-tags:before {
	content: "\f121";
	font-weight: 600 !important;
}
.phpdebugbar-fa-tasks:before {
	content: "\f550";
	font-weight: 600 !important;
}
.phpdebugbar-fa-tags, .phpdebugbar-fa-tasks, .phpdebugbar-indicator .fa {
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
}
div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-value.phpdebugbar-widgets-warning:before,
div.phpdebugbar-widgets-messages li.phpdebugbar-widgets-list-item span.phpdebugbar-widgets-value.phpdebugbar-widgets-error:before,
div.phpdebugbar-widgets-exceptions a.phpdebugbar-widgets-editor-link:before,
div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-database:before,
div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-duration:before,
div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-memory:before,
div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-row-count:before,
div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-copy-clipboard:before,
div.phpdebugbar-widgets-sqlqueries span.phpdebugbar-widgets-stmt-id:before,
div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-render-time:before,
div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-memory:before,
div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-param-count:before,
div.phpdebugbar-widgets-templates span.phpdebugbar-widgets-type:before,
div.phpdebugbar-widgets-templates a.phpdebugbar-widgets-editor-link:before
{
	font-family: "Font Awesome 5 Free" !important;
}

/* ============================================================================== */
/* CSS style used for jCrop                                                       */
/* ============================================================================== */

.jcrop-holder { background: unset !important; }


/* ============================================================================== */
/* CSS style used for jFlot                                                       */
/* ============================================================================== */

.dol-xaxis-vertical .flot-x-axis .flot-tick-label.tickLabel {
	text-orientation: sideways;
	font-weight: 400;
	writing-mode: vertical-rl;
	white-space: nowrap;
}


/* ============================================================================== */
/* For dolUIBlock() feature                                                       */
/* ============================================================================== */

#dol-block-ui {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: center;
}

#dol-block-ui .message {
	padding: 15px 20px 15px 50px;
	color: #fff;
	background: #000 no-repeat 10px center;
	border-radius: 10px;
	font-family: sans-serif;
}


/* ============================================================================== */
/* For copy-paste feature                                                         */
/* ============================================================================== */

span.clipboardCPValueToPrint, div.clipboardCPValueToPrint  {
	display: inline-block;
}
span.clipboardCPValue.hidewithsize {
	width: 0 !important;
	display: inline-block;	/* this will be modify on the fly by the copy-paste js code in lib_foot.js.php to have copy feature working */
	color: transparent;
	white-space: nowrap;
	overflow-x: hidden;
	vertical-align: middle;
}
div.clipboardCPValue.hidewithsize {
	width: 0 !important;
	display: none;
	color: transparent;
	white-space: nowrap;
}

.clipboardCPShowOnHover .clipboardCPButton {
	display: none;
}

/* To make a div popup, we must use a position absolute inside a position relative */
.clipboardCPText {
	position: relative;
}
.clipboardCPTextDivInside {
	position: absolute;
	background: #f8f8fa;
	color: #888;
	border: 1px solid #E0E0E0;
	opacity: 1;
	z-index: 20;
	padding: 2px;
	padding-left: 5px;
	padding-right: 5px;
	top: -5px;
	left: 0px;
	border-radius: 5px;
	white-space: nowrap;
	font-size: 0.9em;
	box-shadow: 1px 1px 6px #ddd;
}


/* ============================================================================== */
/* CSS style used for HRM skill/rank (may be we can remove this)                  */
/* ============================================================================== */

.radio_js_bloc_number {
	display:inline-block;
	padding:5px 7px;
	min-width:20px;
	border-radius:3px;
	border:1px solid #ccc;
	background:#eee;
	color:#555;
	cursor:pointer;
	margin:2px;
	text-align:center;
}
.radio_js_bloc_number.selected {
	transition:0.2s ease background;
	background:#888;
	color:#fff;
	border-color:#555;
}


/* ============================================================================== */
/* Virtual business card                                                          */
/* ============================================================================== */

.virtualcard-div {
	overflow: hidden;
	vertical-align: top;
	/* background: #aaa; */
}

#virtualcard-iframe {
	border: 1px solid #aaa;
	vertical-align: top;
	width: 10%;
	min-width: 100px;
	border-radius: 10px;
	aspect-ratio: 0.6;
	box-shadow: 0 0 5px #bbb;
}
.nopointervent {
	pointer-events: none;
}
.scalepreview {
	/* transform: scale(0.5); */
	zoom: 0.20;
	/* filter: blur(4px); */
}

/* ============================================================================== */
/* For drag and drop file feature                                                 */
/* ============================================================================== */

.cssDragDropArea{
	position: relative;
}
.highlightDragDropArea{
	border: 2px #000 dashed !important;
	background-color: #eee !important;
}
.highlightDragDropArea * :not(.dragDropAreaMessage *){
	opacity:0.8;
	filter: blur(1px) grayscale(90%);
}
.dragDropAreaMessage {
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	text-align:center;
	font-size: 2em;
}

/* ============================================================================== */
/* CSS style used for color jPicker                                               */
/* ============================================================================== */

table.jPicker {
	border: 1px solid #bbb !important;
}

/* ============================================================================== */
/* CSS style used for survey                                                      */
/* ============================================================================== */

.opensurveydescription * {
	width: 100%;
}
.imgopensurveywizard
{
	padding: 0 4px 0 4px;
}
.survey_borders {
	margin-left: 100px;
	margin-right: 100px;
	text-align: start;
}
.survey_intro {
	background-color: #f0f0f0;
	padding: 15px;
	border-radius: 8px;
}
.survey_borders .resultats .nom {
	text-align: left}
.survey_borders .resultats .sujet, .survey_borders .resultats .jour {
	min-width: 100px;
}

/* ============================================================================== */
/* CSS style used for BookCal                                                     */
/* ============================================================================== */

.center.bookingtab {
	margin-left: 20px;
}
#bookinghoursection {
	width: 145px;
	height: 320px;
	overflow-y: auto;
	overflow-x: hidden;
	text-align: left;
}
.bookcalform {
	border: 1px solid #000;
	padding: 15px;
	border-radius: 5px;
	margin-bottom: 15px;
}

.topmenuimage {
	background-size: 22px auto;
	top: 2px;
}


/* ============================================================================== */
/* CSS style used for AI                                                   */
/* ============================================================================== */

.ai_dropdown {
	min-width: 400px !important;
	padding: 12px;
	left: inherit !important;
	top: inherit !important;
	border-radius: 4px !important;
}
.ai_feature {
	background-color: var(--colorbackgrey);
	padding: 10px;
	padding-bottom: 6px;
	padding-top: 6px;
	border-radius: 4px;
}


/* ============================================================================== */
/* CSS style used for small screen                                                */
/* ============================================================================== */

/* nboftopmenuentries = 2, fontsize=0.92em */
/* rule to reduce top menu - 1st reduction: Reduce width of top menu icons */
@media only screen and (max-width: 520px)	/* reduction 1 */
{
	div.tmenucenter {
		width: 52px;	/* size of viewport */
		white-space: nowrap;
		  overflow: hidden;
		  text-overflow: ellipsis;

		  color: var(--colortextbackhmenu);
		  /* color: var(--colorbackhmenu1); */
	}
	.tmenuimage {
		color: var(--colortextbackhmenu);
	}

	.mainmenuaspan {
		  font-size: 0.9em;
		  padding-right: 0;
		  padding-left: 0;
	}
	.topmenuimage {
		background-size: 22px auto;
		margin-top: 0px;
	}

	li.tmenu, li.tmenusel {
		min-width: 36px;
	}
	div.mainmenu {
		min-width: auto;
	}
	div.tmenuleft {
		display: none;
	}

	.dropdown dd ul {
		max-width: 370px;
	}
}
/* rule to reduce top menu - 2nd reduction: Reduce width of top menu icons again (2 menu entries) */
@media only screen and (max-width: 268px)	/* reduction 2 */
{
	li.tmenucompanylogo {
		display: none;
	}
	div.mainmenu {
		height: 23px;
	}
	div.tmenucenter {
		max-width: 75px;	/* size of viewport */
		text-overflow: clip;
	}
	span.mainmenuaspan {
		margin-left: 1px;
	}
	.mainmenuaspan {
		font-size: 0.9em;
		padding-left: 0;
		padding-right: 0;
	}
	.topmenuimage {
		background-size: 20px auto;
		margin-top: 2px;
		left: 4px;
	}

	.dropdown dd ul {
		max-width: 300px;
	}
}
/* rule to reduce top menu - 3rd reduction: The menu for user is now on left */
@media only screen and (max-width: 224px)	/* reduction 3 */
{
	
	.side-nav {
		z-index: 200;
		background: var(--colorbackvmenu1);
		padding-top: 75px;
		/*position: relative;
		top: 75px;*/
		width: 245px; 	/* must be same than div.login_block */
		box-shadow: none;
	}
	#id-left {
		z-index: 201;
		background: var(--colorbackvmenu1);
	}
	#id-right {	/* This must stay id-right and not be replaced with echo $right */
		padding-top: 8px;
	}

	.login_vertical_align {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Reduce login top right info */
	.help {
		}
	div#tmenu_tooltip {
			padding-right: 0;
		}
	div.login_block_user {
		min-width: 0;
		width: 100%;
	}
	div.login_block_tools, div.login_block_user {
		line-height: unset;
		height: unset;
	}
	div.login_block a {
		color: unset;
	}
	div.login_block {
		/* Style when phone layout or when using the menuhider */
		padding-top: 10px;
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 16px;
		top: auto;
		left: 0 !important;
		text-align: center;
		vertical-align: middle;

		background: var(--colorbackvmenu1);

		height: 50px;

		z-index: 202;
		min-width: 245px;      /* must be width of menu + padding + padding of sidenav */
		max-width: 245px;      /* must be width of menu + padding + padding of sidenav */
		width: 245px;          /* must be width of menu + padding + padding of sidenav */
	}
	.loginbuttonexternal {
		width: 260px;
	}

	.side-nav-vert .user-menu .dropdown-menu, #topmenu-bookmark-dropdown .dropdown-menu, #topmenu-quickadd-dropdown .dropdown-menu {
		width: 285px !important;	/* must be width of menu + padding + padding of sidenav */
		min-width: unset !important;
	}

	div.login_block_other {
		margin-right: unset;
	}
	div.login_block_tools, div.login_block_user, div.login_block_other { clear: both; }

	.atoplogin, .atoplogin:hover
	{
		color:unset !important;
		padding-left: 4px;
		padding-right: 4px;
	}
	.login_block_elem {
		padding: 0 !important;
		height: 38px;
	}
	li.tmenu, li.tmenusel {
		min-width: 32px;
	}
	div.mainmenu {
		height: 23px;
	}
	div.tmenucenter {
		  text-overflow: clip;
	}
	.topmenuimage {
		background-size: 20px auto;
		margin-top: 2px !important;
		left: 2px;
	}
	div.mainmenu {
		min-width: 20px;
	}

	.titlefield {
		width: auto !important;		/* We want to ignore the 30%, try to use more if you can */
	}
	.tableforfield>tr>td:first-child, .tableforfield>tbody>tr>td:first-child, div.tableforfield div.tagtr>div.tagtd:first-of-type {
		/* max-width: 100px; */			/* but no more than 100px */
	}
	.tableforfield>tr>td:nth-child(2), .tableforfield>tbody>tr>td:nth-child(2), div.tableforfield div.tagtr>div.tagtd:nth-child(2) {
		word-break: break-word;
	}
	.badge {
		min-width: auto;
		font-size: 0.94em;
	}

	table.table-fiche-title .col-title div.titre{
		line-height: unset;
	}

	input#addedfile {
		width: 95%;
	}

	#divbodywebsite {
		word-break: break-word;
	}

	.websiteselectionsection {
		border-left: unset;
		border-right: unset;
		padding-left: 5px;
	}

	.a-mesure, .a-mesure-disabled {
		display: block;
		margin-bottom: 6px;
		padding-left: 12px;
		padding-right: 12px;
	}

	.a-mesure, .a-mesure-disabled {
		text-align: center;
	}


	.underbanner.underbanner-before-box {
		border-bottom: none;
	}

	.valuefield.fieldname_type span.badgeneutral {
		margin-top: 5px;
		display: inline-block;
	}

	tr.trextrafieldseparator td, tr.trextrafields_collapse_last td {
		/* border-bottom: 2px solid var(--colorbackhmenu1) !important; */
		border-bottom: 1px solid var(--colortopbordertitle1) !important;
	}

	div#card-errors {
		max-width: unset;
	}

	#dolpaymenttable {
		padding: 5px;
	}

	.lilevel1 span.paddingright {
		padding-right: 4px;
	}

	img.userphotopublicvcard {
		left: unset;
		top: unset;
		margin-top: 30px;
	}
}

@media only screen and (max-width: 1024px)
{
	div#ecm-layout-west {
		width: calc(100% - 4px);
		clear: both;
	}
	div#ecm-layout-center {
		width: 100%;
	}
}

@media only screen and (max-width: 768px)
{
	.pictofixedwidth {
		text-align: start;
		width: 1.5em;
		/* padding-right: 0; */
	}

	.ai_dropdown{
		min-width : 280px !important;
		width: calc(100% - 50px);
	}

	.imgopensurveywizard, .imgautosize { width:95%; height: auto; }

	.fiche > .listactionsfilter .table-fiche-title .col-title .titre {
		display: none;
	}

	.navselectiondate {
		width: 220px;
	}

	#tooltip {
		position: absolute;
		width: 350px;
	}

	div.tabBar {
		padding-left: 0px;
		padding-right: 0px;
		border-radius: 0px;
		border-right: none;
		border-left: none;
	}

	td.widthpictotitle { width: 30px; }

	.logopublicpayment #dolpaymentlogo {
		max-width: 260px;
	}
	#tablepublicpayment {
		width:	auto !important;
		border: none !important;
	}
	.poweredbypublicpayment {
		float: unset !important;
		top: unset !important;
		/* bottom: 8px; */
		right: -10px !important;
		position: relative !important;
	}
	.poweredbyimg {
		width: 48px;
	}

	.survey_borders {
		margin-left: 10px;
		margin-right: 10px;
		text-align: start;
	}

	.bookcalform.boxtable .minwidth75 {
		min-width: auto;
	}
	.center.bookingtab {
		margin-left: 6px;
	}
	#bookinghoursection {
		font-size: small;
		width: 122px;
	}

	#dolpublictable {
		padding: 10px;
	}

	input[type=checkbox], input[type=radio] {
		margin: 0 5px 0 1px;
		transform: scale(1.1);
	}
}

@media only screen and (max-width: 320px)
{
	.dropdown dd ul {
		max-width: 270px;	/* must always be 50 slower than width */
	}
}
@media only screen and (max-width: 300px)
{
	.dropdown dd ul {
		max-width: 250px;
	}
}
@media only screen and (max-width: 280px)
{
	.dropdown dd ul {
		max-width: 230px;
	}
}

/** For toggle Display of customer/Supplyer Invoices and Credit Notes on Payment Page */
:where(#fourn-invoices-paiments-list,#customer-invoices-paiments-list)[data-display-all-invoices="1"] tr[data-row-type="2"]{
	font-weight: bold;
}


/* IDE Hack <style type="text/css"> */

/*
 * Dropdown of user popup
 */

.bookmark-footer a.top-menu-dropdown-link {
	white-space: normal;
	word-break: break-word;
}

button.dropdown-item.global-search-item {
	outline: none;
}

.open>.dropdown-search, .open>.dropdown-bookmark, .open>.dropdown-quickadd, .open>.dropdown-menu, .dropdown dd ul.open {
	display: block;
}

#topmenu-bookmark-dropdown .dropdown-menu {
	min-width: 370px;
	max-width: 370px;
	width: 370px;
}


.dropdown-search {
	border-color: #eee;

	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 160px;
	margin: 2px 0 0;
	font-size: 14px;
	text-align: left;
	list-style: none;
	background-color: #fff;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	border: 1px solid #ccc;
	border: 1px solid rgba(0,0,0,.15);
	border-radius: 4px;
	box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.dropdown-bookmark {
	border-color: #eee;

	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 160px;
	margin: 2px 0 0;
	font-size: 14px;
	text-align: left;
	list-style: none;
	background-color: #fff;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	border: 1px solid #ccc;
	border: 1px solid rgba(0,0,0,.15);
	border-radius: 4px;
	box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.dropdown-quickadd {
	border-color: #eee;

	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 240px;
	margin: 2px 0 0;
	font-size: 14px;
	text-align: left;
	list-style: none;
	background-color: #fff;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	border: 1px solid #ccc;
	border: 1px solid rgba(0,0,0,.15);
	border-radius: 4px;
	box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 160px;
	margin: 2px 0 0;
	font-size: 14px;
	text-align: left;
	list-style: none;
	background-color: #fff;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
	border: 1px solid rgba(128, 128, 128, .15);
	border-radius: 4px;
	box-shadow: 0 6px 12px rgba(0,0,0,.175);
}


.dropdown-toggle{
	text-decoration: none !important;
}


/* CSS to hide the arrow to show open/close */
div#topmenu-global-search-dropdown a::after, div#topmenu-quickadd-dropdown a::after, div#topmenu-bookmark-dropdown a::after {
	display: none;
}


.dropdown-toggle::after {
	font-family: "Font Awesome 5 Free";
	font-size: 0.7em;
	font-weight: 900;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	text-align:center;
	text-decoration:none;
	margin:  auto 3px;
	display: inline-block;
	content: "\f078";

	-webkit-transition: -webkit-transform .2s ease-in-out;
	-ms-transition: -ms-transform .2s ease-in-out;
	transition: transform .2s ease-in-out;
}


.open>.dropdown-toggle::after {
	transform: rotate(180deg);
}

/*
 * MENU Dropdown
 */

.login_block.usedropdown .logout-btn{
	display: none;
}

.tmenu .open.dropdown, .tmenu .open.dropdown {
	background: rgba(0, 0, 0, 0.1);
}
.tmenu .dropdown-menu, .login_block .dropdown-menu, .topnav .dropdown-menu {
	position: absolute;
	right: 1px;
	left: auto;
	line-height:1.3em;
}
.tmenu .dropdown-menu, .login_block  .dropdown-menu .user-body {
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px;
}
.user-body {
	color: #333;
}
.side-nav-vert .user-menu .dropdown-menu, .topnav .user-menu .dropdown-menu {
	border-top-right-radius: 0;
	border-top-left-radius: 0;
	padding: 0 0 0 0;
	border-top-width: 0;
	width: 370px;
}
.topnav .user-menu .dropdown-menu {
	top: 50px;
}
.side-nav-vert .user-menu .dropdown-menu, .topnav .user-menu .dropdown-menu {
	margin-top: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.side-nav-vert .user-menu .dropdown-menu > .user-header, .topnav .user-menu .dropdown-menu > .user-header {
	min-height: 100px;
	padding: 10px;
	text-align: center;
	white-space: normal;
}

#topmenu-global-search-dropdown .dropdown-menu{
	width: 310px;
	max-width: 100%;
}

div#topmenu-global-search-dropdown, div#topmenu-bookmark-dropdown, div#topmenu-quickadd-dropdown {
			line-height: 46px;
	}
a.top-menu-dropdown-link {
	padding: 8px;
}

.dropdown-user-image {
	border-radius: 50%;
	vertical-align: middle;
	z-index: 5;
	height: 90px;
	width: 90px;
	border: 3px solid;
	border-color: transparent;
	border-color: rgba(255, 255, 255, 0.2);
	max-width: 100%;
	max-height :100%;
}

.dropdown-menu > .user-header{
	/* background: var(--colorbackhmenu1);
	color: var(--colortextbackhmenu); */
	background: #f9f9f9;
	color: #000;
}

.dropdown-menu .dropdown-header{
	padding: 8px 12px 8px 16px;
}

.dropdown-menu > .user-footer {
	border-top: 1px solid #f0f0f0;
	background-color: #f9f9f9;
	padding: 10px;
}

.user-footer:after {
	clear: both;
}

.dropdown-menu > .bookmark-footer {
	border-top: 1px solid #f0f0f0;
	background-color: #f9f9f9;
	padding: 10px;
	text-align: start;
}


.dropdown-menu > .user-body, .dropdown-body {
	padding: 15px;
	border-bottom: 1px solid #f4f4f4;
	border-top: 1px solid #f0f0f0;
	white-space: normal;
}

.dropdown-menu > .bookmark-body, .dropdown-body {
	overflow-y: auto;
	max-height: 60vh ; /* fallback for browsers without support for calc() */
	max-height: calc(90vh - 110px) ;
	white-space: normal;
}
#topmenu-quickadd-dropdown .dropdown-menu > .bookmark-body, #topmenu-quickadd-dropdown .dropdown-body,
#topmenu-bookmark-dropdown .dropdown-menu > .bookmark-body, #topmenu-bookmark-dropdown .dropdown-body {
	max-height: 60vh ; /* fallback for browsers without support for calc() */
	max-height: calc(90vh - 200px) ;
}


.dropdown-body::-webkit-scrollbar {
		width: 8px;
	}
.dropdown-body::-webkit-scrollbar-thumb {
	-webkit-border-radius: 0;
	border-radius: 0;
	/* background: rgb(38,60,92); */
	background: #aaa;
}
.dropdown-body::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	-webkit-border-radius: 0;
	border-radius: 0;
}


#topmenu-global-search-dropdown,
#topmenu-quickadd-dropdown,
#topmenu-bookmark-dropdown,
#topmenu-uploadfile-dropdown,
#topmenu-login-dropdown {
	padding: 0 5px 0 5px;
}
#topmenu-login-dropdown a:hover{
	text-decoration: none;
}

#topmenuloginmoreinfo-btn, #topmenulogincompanyinfo-btn {
	display: block;
	text-align: start;
	color:#666;
	cursor: pointer;
}

#topmenuloginmoreinfo, #topmenulogincompanyinfo {
	display: none;
	clear: both;
	font-size: 0.95em;
}

a.dropdown-item {
	text-align: start;
}

.button-top-menu-dropdown {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 3px;
}

.user-footer .button-top-menu-dropdown {
	color: #666666;
	box-shadow: none;
	border-width: 1px;
	background-color: #f4f4f4;
	border-color: #ddd;
}

.dropdown-menu a.top-menu-dropdown-link {
	color: rgb(10,20,100) !important;
	box-shadow: none;
	display: block;
	margin: 5px 0px;
}

.dropdown-item {
	display: block !important;
	box-sizing: border-box;
	width: 100%;
	padding: .5em 1.5em .5em 1em;
	clear: both;
	font-weight: 400;
	color: #212529  !important;
	text-align: inherit;
	background-color: transparent;
	border: 0;
	box-shadow: none;
}
.dropdown-item.bookmark-item {
	padding-left: 0;
	padding-right: 0;
}
.dropdown-item.bookmark-item:before {
	width: 20px;
	padding-left: 2px;
}


.dropdown-item::before {
	/* font part */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	text-align:center;
	text-decoration:none;
	margin-right: 5px;
	display: inline-block;
	content: "\f0da";
	/* color: rgba(0,0,0,0.3); */
}
.multicompany-item::before {
	content: none !important;
}

.dropdown-item.bookmark-item-external::before {
	content: "\f35d";
}

.dropdown-item.active, .dropdown-item:hover, .dropdown-item:hover span::before, .dropdown-item:focus, .dropdown-item:focus span::before {
	color: #FFFFFF !important;
	text-decoration: none;
	background: rgb(38,60,92);
}


/*
 * SELECT FIELDS
 */

li.liinputsearch {
	position: sticky;
	display: block;
	top: 0;
	background: var(--colorbackbody);
	z-index: 1;
}



/*
 * QUICK ADD
 */

#topmenu-quickadd-dropdown .dropdown-menu {
	width: 370px;
	color: #444;
}

.quickadd-body.dropdown-body {
	padding: unset;
	padding-top: 10px;
	padding-bottom: 10px;
}

.quickadd-item {
	font-size: 1.1em;
}

.quickadd-item:before {
	content: none;
}

.quickadd-header {
	color: #444 !important;
}

div.quickadd {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-content: center;
	-ms-flex-line-pack: center;
	align-content: center;
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
}

div.quickadd a {
	color: #444;
}

div.quickadd a:hover, div.quickadd a:active {
	color: #000000;
}

div.quickaddblock {
	width: 95px;
	height: 80px;
}

div.quickaddblock:hover,
div.quickaddblock:active,
div.quickaddblock:focus {
	background: #fcfcfc;
}


/* for the dropdown on action buttons */
.dropdown-holder {
	position: relative;
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	z-index: 5;
	width: 300px;
	right:0;	/* will be set with js */
	bottom: 0;
	transform: translateY(100%);

	background: #fff;
	border: 1px solid #bbb;
	text-align: left;
	box-shadow: 5px 5px 0px rgba(0,0,0,0.1);
}

/* dropdown --up variant */
.dropdown-holder.--up .dropdown-content{
	bottom: auto;
	top: 0;
	transform: translateY(-100%);
}

/* dropdown --left variant */
.dropdown-holder.--left .dropdown-content{
	right: auto;
	left: 12px;
}


.dropdown-content a {
	margin-right: auto !important;
	margin-left: auto !important;
}
.dropdown-content .butAction {
	background: none;
	color: #333 !important;
}
.dropdown-content a:is(.butAction,.butActionDelete,.butActionRefused) {
	display: flex;
	border-radius: 0;
}

.dropdown-content .butAction:hover {
	box-shadow: none;
	background-color: var(--butactionbg);
	color: var(--textbutaction) !important;
	text-decoration: none;
}

.dropdown-content .butActionDelete{
	background-color: transparent !important;
	color: #633 !important;
}
.dropdown-content .butActionDelete:hover {
	box-shadow: none;
	background-color: var(--butactiondeletebg) !important;
	color: #633 !important;
	text-decoration: none;
}

.dropdown-content .butActionRefused {
	margin-left: 0;
	margin-right: 0;
	border: none;
}

.dropdown-holder.open .dropdown-content {
	display: block;
}

/** dropdown arrow used to clearly identify parent button of dropdown*/
.dropdown-holder.open .dropdown-content::before {
	--triangleBorderSize : 5px;
	position: absolute;
	content: "";
	top: calc(var(--triangleBorderSize) * -1);
	right: 12px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 var(--triangleBorderSize) var(--triangleBorderSize) var(--triangleBorderSize);
	border-color: transparent transparent #ffff transparent;
	transform: rotate(0deg);
}

/* dropdown --up variant*/
.dropdown-holder.--up.open .dropdown-content::before{
	top: auto;
	bottom: calc(var(--triangleBorderSize) * -1);
	border-width: 0 var(--triangleBorderSize) var(--triangleBorderSize) var(--triangleBorderSize);
	transform: rotate(180deg);
}

/* dropdown --left variant*/
.dropdown-holder.--left.open .dropdown-content::before{
	right: auto;
	left: 12px;
}

.dropdown-search-input {
	border-radius: 4px;
}

/* smartphone */
@media only screen and (max-width: 767px)
{
	.dropdown-search-input,.search-tool-input {
		width: 100%;
	}

	.tmenu .dropdown-menu, .login_block .dropdown-menu, .topnav .dropdown-menu {
		margin-left: 8px;
		right: 0;
	}

	#topmenu-bookmark-dropdown .dropdown-menu, #topmenu-quickadd-dropdown .dropdown-menu {
		min-width: 220px;
		max-width: 360px;
	}

	.side-nav-vert .user-menu .dropdown-menu, .topnav .user-menu .dropdown-menu {
		width: 300px;
	}
	.dropdown-menu:not(.ai_dropdown) {
		border: none;
		box-shadow: none;
		border-bottom: 1px solid #888;
	}

}
/* IDE Hack <style type="text/css"> */

.template-container {
	display: flex;
	justify-content: space-between;
	padding: 10px;
	background: #f5f5f5;
	border: 1px solid #d3d3d3;
	border-radius: 5px;
	margin-bottom: 15px;
  }

  .template-option {
	text-align: center;
	padding: 10px;
	margin: 4px 5px;
	background: var(--colorbackgrey);
	border-radius: 5px;
	cursor: pointer;
	height: 60px;
	width: 60px;
	display: inline-block;
	align-items: center;
	justify-content: center;
  }

  .template-option:hover {
	font-weight: bold;
	background: var(--butactionbg);
	color: var(--textbutaction);
	border-radius: 8px;
	border-collapse: collapse;
  }

  .template-option[data-template="ai"] {
	background: #c5f7c5;
  }

  .template-option[data-template="ai"]:hover {
	font-weight: bold;
	background: var(--butactionbg);
	color: var(--textbutaction);
	border-radius: 8px;
	border-collapse: collapse;
	border: none;
  }

  .template-option.selected {
	font-weight: bold;
	background: var(--butactionbg);
	color: var(--textbutaction);
	border-radius: 8px;
	border-collapse: collapse;
	border: none;
}

  #template-selector {
	/* width: 100%;
	max-width: 80%; */
	height: auto;
	padding: 10px;
	border: 1px solid #d3d3d3;
	border-radius: 5px;
	margin-bottom: 10px;
	margin-top: 10px;
	width: fit-content;
  }

  .template-option[data-template="ai"] i {
	font-size: 42px;
	display: block;
	width: 80%;
	max-height: 80px;
	margin: 0 5px;
	padding-top: 5px;
	border-radius: 5px;

}

.template-option[data-template="ai"] span {
  padding-top: 30px;
  font-size: 14px;

}

.template-option-text {
  padding-top: 3px;
  font-size: 14px;
}

#ai_input {
  display: none;
}

.template-option img {
  display: block;
  width: 80%;
  max-height: 80px;
  margin: 0 5px;
  padding-top: 5px;
  border-radius: 7px;
}
/* IDE Hack <style type="text/css"> */

/*
 * Component: Info Box
 * -------------------
 */

.info-box-module.--external span.info-box-icon-version {
	background: rgba(0,0,0,0.2);
}

.info-box-module.--external.--need-update span.info-box-icon-version{
	background: #bc9525;
}

.info-box {
	display: block;
	position: relative;
	min-height: 94px;	/* must be same height than info-box-icon */
	background: var(--colorbacklineimpair2);
	width: 100%;
	box-shadow: 1px 1px 12px rgba(192, 192, 192, 0.2);
	border-radius: 2px;
	border: 1px solid #e9e9e9;
	margin-bottom: 15px;
}
.info-box.info-box-sm {
	min-height: 80px;
	margin-bottom: 10px;
	/* background: #fff; */
}
.opened-dash-board-wrap .info-box, .opened-dash-board-wrap .info-box .info-box-icon  {
	border-radius: 0 0 0 15px;
}
/*.opened-dash-board-wrap .box-flex-item {
	border-radius: 10px;
}*/

.info-box-more {
	float: right;
	top: 5px;
	position: absolute;
	right: 8px;
}

.info-box small {
	font-size: 14px;
}
.info-box:not(.info-box-kanban) .progress {
	background: rgba(0, 0, 0, 0.2);
	margin: 5px -10px 5px -10px;
	height: 2px;
}
.info-box .progress,
.info-box .progress .progress-bar {
	border-radius: 0;
}

.info-box:not(.info-box-kanban) .progress .progress-bar {
	float: left;
	width: 0;
	height: 100%;
	font-size: 12px;
	line-height: 20px;
	color: #fff;
	text-align: center;
	background-color: #337ab7;
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
	-webkit-transition: width .6s ease;
	-o-transition: width .6s ease;
	transition: width .6s ease;
}
.info-box-icon {
	border-top-left-radius: 2px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 2px;
	display: block;
	overflow: hidden;
	float: left;
	line-height: 94px;	/* must be same height as min-height of .info-box */
	height: 94px; 	    /* must be same height as min-height of .info-box */
	width: 88px;
	text-align: center;
	font-size: 2.8em;
	background: var(--colorbacktitle1) !important;
}

.info-box-module .info-box-icon {
	padding-top: 5px;
	padding-bottom: 5px;
}
.info-box-sm .info-box-icon, .info-box-sm .info-box-img {
	height: 98px !important;		/* must match height of info-box-sm .info-box-content */
	width: 78px;
	font-size: 25px;
	line-height: 92px;
}
.info-box-order {
	border-top-left-radius: 2px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 2px;
	display: block;
	overflow: hidden;
	float: left;
	height: 115px;
	width: 88px;
	text-align: center;
	font-size: 2.3em;
	line-height: 115px;
	margin-right: 10px;
	background: var(--colorbacktitle1) !important;
}
.opened-dash-board-wrap .info-box .info-box-icon {
	font-size: 2em;
}
.opened-dash-board-wrap .info-box-sm .info-box-icon {
	border-radius: 0 0 0 20px;
	line-height: 80px;
}
.info-box-module .info-box-icon {
	height: 98px;
}
.info-box-icon > img {
	max-width: 85%;
}
.info-box-module .info-box-icon > img {
	max-width: 60%;
}

a.info-box-text.info-box-text-a {
	/* display: table-cell; */
	display: contents;
}
a.info-box-text-a i.fa.fa-exclamation-triangle, span.badge i.fa.fa-exclamation-triangle {
	font-size: 0.9em;
}

.info-box-line {
	line-height: 1.35em;
}
.info-box-line-text {
	overflow: hidden;
	width: calc(100% - 92px);
	max-width: calc(100% - 82px);
	text-overflow: ellipsis;
}

.info-box-icon-text {
	box-sizing: border-box;
	display: block;
	position: absolute;
	width: 90px;
	bottom: 0px;
	color: #ffffff;
	background-color: rgba(0,0,0,0.1);
	cursor: default;

	font-size: 10px;
	line-height: 15px;
	padding: 0px 3px;
	text-align: center;
	opacity: 0;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 0.5s, visibility 0s 0.5s;
}

.info-box-icon-version {
	box-sizing: border-box;
	display: block;
	position: absolute;
	width: 90px;
	bottom: 0px;
	color: #ffffff;
	background-color: rgba(0,0,0,0.1);
	cursor: default;

	font-size: 10px;
	line-height: 1.5em;
	padding: 4px 3px;
	text-align: center;
	opacity: 1;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 0.5s, visibility 0s 0.5s;
}

.box-flex-item.info-box-module.--disabled {
	/* opacity: 0.6; */
}

.info-box-actions {
	position: absolute;
	right: 0;
	bottom: 0;
}

/* customize section img box on list of products */
.info-box-img {
	height: 105px !important;
	width: 88px;
	border-top-left-radius: 2px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 2px;
	display: block;
	overflow: hidden;
	float: left;
	text-align: center;
	font-size: 2.8em;
	line-height: 90px;
	margin-right: 5px;
	background: var(--colorbacktitle1) !important;
}
.info-box-img > img {
	width: 90%;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


.info-box-sm .info-box-icon-text, .info-box-sm .info-box-icon-version {
	overflow: hidden;
	width: 80px;
}
.info-box:hover .info-box-icon-text {
	opacity: 1;
}

.info-box-content {
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 5px;
	margin-left: 84px;
}
.info-box-sm .info-box-content {
	margin-left: 80px;
	height: 88px;   /* 96 - margins of .info-box-sm .info-box-content */
}
.info-box-sm .info-box-module-enabled {
	/* background: linear-gradient(0.35turn, #fff, #fff, #f6faf8, #e4efe8) */
	background: var(--infoboxmoduleenabledbgcolor);
}
.info-box-content-warning span.font-status4 {
	color: #bc9526 !important;
}

.info-box-number {
	display: block;
	font-weight: bold;
	font-size: 18px;
}
.progress-description,
.info-box-text,
.info-box-title{
	display: block;
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.info-box-title{
	text-transform: uppercase;
	font-weight: bold;
	margin-bottom: 3px;	/* not too much space so we can add another lines */
	opacity: 0.6;
	/* color: var(--colortexttitlenotab); */
}
.info-box-text{
	font-size: 0.92em;
}
/* Force values for small screen 480 */
@media only screen and (max-width: 480px)
{
	.info-box-text {
		font-size: 0.85em;
	}
	.info-box-line {
		line-height: 1.25em;
	}
}
.info-box-text:first-letter{text-transform: uppercase}
a.info-box-text{ text-decoration: none;}


.info-box-more {
	display: block;
}
.progress-description {
	margin: 0;
}





/* ICONS INFO BOX */
.info-box-icon {
		opacity: 0.95;
			filter: saturate(0.8);
	}

.nonature-back {
	background-color: #EEE;
	padding: 2px;
	margin: 2px;
	border-radius: 3px;
}
.prospect-back {
	background-color: #a7c5b0 !important;
	color: #FFF !important;
	padding: 2px;
	margin: 2px;
	border-radius: 3px;
}
.customer-back {
	background-color: #55955d !important;
	color: #FFF !important;
	padding: 2px;
	margin: 2px;
	border-radius: 3px;
}
.vendor-back {
	background-color: #599caf !important;
	color: #FFF !important;
	padding: 2px;
	margin: 2px;
	border-radius: 3px;
}
.user-back {
	background-color: #79633f !important;
	color: #FFF !important;
	padding: 2px;
	margin: 2px;
	border-radius: 3px;
}
.member-company-back {
	padding: 2px;
	margin: 2px;
	background-color: #e4e4e4;
	color: #666;
	border-radius: 3px;
	white-space: nowrap;
}
.member-individual-back {
	padding: 2px;
	margin: 2px;
	background-color: #e4e4e4;
	color: #666;
	border-radius: 3px;
	white-space: nowrap;
}


.bg-infobox-project{
	color: #6c6aa8 !important;
}
.bg-infobox-action{
	color: #906080 !important;
}
.bg-infobox-propal, .bg-infobox-facture, .bg-infobox-commande {
	color: #65953d !important;
}
.bg-infobox-supplier_proposal, .bg-infobox-invoice_supplier, .bg-infobox-order_supplier {
	color: #599caf !important;
}
.bg-infobox-contrat, .bg-infobox-ticket{
	color: #3bbfa8 !important;
}
.bg-infobox-bank_account{
	color: #b0bb39 !important;
}
.bg-infobox-adherent, .bg-infobox-member {
	color: #79633f !important;
}
.bg-infobox-expensereport{
	color: #79633f !important;
}
.bg-infobox-holiday{
	color: #755114 !important;
}
.bg-infobox-cubes{
	color: #b0a53e !important;
}

/* Disable colors on left vmenu */
a.vmenu span, span.vmenu, span.vmenu span {
	/* To force no color on picto in left menu */
	/* color: var(--colortextbackvmenu) !important; */
}

.infobox-adherent, .infobox-member {
	color: #79633f;
}
.infobox-project{
	color: #6c6aa8;
}
.infobox-action{
	color: #906080;
}
/* Color for customer object */
.infobox-propal:not(.error),
.infobox-facture:not(.error),
.infobox-commande:not(.error) {
	color: #65953d;
}
/* Color for vendor object */
.infobox-supplier_proposal:not(.error),
.infobox-invoice_supplier:not(.error),
.infobox-order_supplier:not(.error) {
	color: #599caf;
}
.infobox-contrat, .infobox-ticket{
	color: #3bbfa8;
}
.infobox-bank_account{
	color: #b0bb39;
}
.infobox-adherent, .infobox-member {
	color: #79633f;
}
.infobox-expensereport{
	color: #79633f;
}
.infobox-holiday{
	color: #755114;
}


.fa-dol-action:before {
	content: "\f073";
}
.fa-dol-propal:before,
.fa-dol-supplier_proposal:before {
	content: "\f573";
}
.fa-dol-facture:before,
.fa-dol-invoice_supplier:before {
	content: "\f571";
}
.fa-dol-project:before {
	content: "\f542";
}
.fa-dol-commande:before,
.fa-dol-order_supplier:before {
	content: "\f570";
}
.fa-dol-contrat:before {
	content: "\f0f2";
}
.fa-dol-ticket:before {
	content: "\f3ff";
}
.fa-dol-bank_account:before {
	content: "\f19c";
}
.fa-dol-member:before {
	content: "\f007";
}
.fa-dol-expensereport:before {
	content: "\f555";
}
.fa-dol-holiday:before {
	content: "\f5ca";
}
.fa-dol-cubes:before {
	content: "\f1b3";
}


/* USING FONTAWESOME FOR WEATHER */
.info-box-weather .info-box-icon{
	background: var(--colorbacktitle1) !important;
}
.fa-weather-level0:before{
	content: "\f185";
	color : #cfbf00;
}
.fa-weather-level1:before{
	content: "\f6c4";
	color : #bc9526;
}
.fa-weather-level2:before{
	content: "\f743";
	color : #b16000;
}
.fa-weather-level3:before{
	content: "\f740";
	color : #b04000;
}
.fa-weather-level4:before{
	content: "\f0e7";
	color : #b01000;
}


.box-flex-container{
	display: flex; /* or inline-flex */
	flex-direction: row;
	flex-wrap: wrap;
	width: calc(100% + 14px);
	margin: 0 -8px 0 -8px;
	/*justify-content: space-between;*/
}
.box-flex-container-columns {
	display: flex; /* or inline-flex */
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
}
.box-flex-container-column {
	flex-grow: 1;
	}
.box-flex-container-column:not(:last-of-type) {
	border-right: 1px solid #AAA;
}
.box-flex-container-column.kanban {
	flex: 1;
}
.kanban.kanbancollapsed {
	flex: unset;
	width: 80px;
	max-width: 80px;
	overflow: hidden;
}
.kanban.kanbancollapsed .kanbanlabel, .text-vertical {
	writing-mode: vertical-rl;
}

.box-flex-grow-zero {
	flex-grow: 0 !important;
}

.box-flex-item {
	flex-grow : 1;
	flex-shrink: 1;
	flex-basis: auto;
	width: 290px;
}
.box-flex-item.filler {
	height: 0;
}
.box-flex-item, .kanbanlabel {
	margin-top: 5px;
	margin-right: 20px;
	margin-bottom: 0px;
	margin-left: 10px;
}
.kanbanlabel {
	background: var(--colorbacktitle1);
	padding: 5px;
	margin-bottom: 10px;
	border-radius: 5px;
}
.kanban .box-flex-item {
	line-height: 1.4em;
}
.kanban .box-flex-item-5lines {
	line-height: 1.2em;
}

/* css for small kanban */
.box-flex-item-small {
	width: 200px !important;
}
.box-flex-item-small .info-box-sm .info-box-content {
	margin-left: 0;
}
.box-flex-item-small .info-box-icon.bg-infobox-action {
	display: none;
}


.info-box-title {
	width: calc(100% - 20px);
}
.info-box-module {
	min-width: 350px;
	max-width: 350px;
}
.fright {
	float:right;
}
@media only screen and (max-width: 1740px) {
	.info-box-module {
		min-width: 315px;
		max-width: 315px;
	}
}

@media only screen and (max-width: 768px) {
	.info-box-module {
		min-width: 260px;
	}
	.box-flex-item {
		width: 280px;
	}
}

@media only screen and (max-width: 570px)
{
	.box-flex-item {
		margin: 3px 8px 3px 8px !important;
	}
}

@media only screen and (max-width: 480px) {
	.info-box-module {
		min-width: 250px;
	}
	.box-flex-item {
		width: 250px;
	}
}




.info-box-module .info-box-content {
	height: 98px;
}
/* Disabled. This break the responsive on smartphone
.box{
	overflow: visible;
}
*/

@media only screen and (max-width: 768px)
{
	.box-flex-container {
		margin: 0 0 0 0px !important;
		width: 100% !important;
		/* justify-content: space-between; */
	}
	.info-box-module {
		width: 100%;
		max-width: unset;
	}

	.info-box-sm .info-box-icon-text, .info-box-sm .info-box-icon-version {
		width: 60px;
	}
	.info-box-sm .info-box-icon {
		width: 60px;
	}
	.info-box-sm .info-box-content {
		margin-left: 60px;
	}
	.info-box {
		border: 1px solid #e0e0e0;
	}

	.info-box-content {
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 10px;
		padding-right: 2px;
	}
	/*
	.info-box-line-text {
		width: calc(100% - 98px);
		max-width: calc(100% - 88px);
	}
	*/
}

/* IDE Hack <style type="text/css"> */

/*
 progress style is based on bootstrap and admin lte framework
 */


/*
 * Component: Progress Bar
 * -----------------------
 */

.progress * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.progress {
	height: 20px;
	overflow: hidden;
	background-color: #f5f5f5;
	background-color: rgba(128, 128, 128, 0.1);
	border-radius: 4px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress.spaced {
	margin-bottom: 20px;
}

.progress-bar {
	float: left;
	width: 0;
	height: 100%;
	font-size: 12px;
	line-height: 20px;
	color: #fff;
	text-align: center;
	background-color: #337ab7;
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
	-webkit-transition: width .6s ease;
	-o-transition: width .6s ease;
	transition: width .6s ease;
}



.progress-group > .progress{
	clear: both;
}

.progress,
.progress > .progress-bar {
	box-shadow: none;
}
.progress,
.progress > .progress-bar,
.progress .progress-bar,
.progress > .progress-bar .progress-bar {
	border-radius: 1px;
}
/* size variation */
.progress.sm,
.progress-sm {
	height: 10px;
}
.progress.sm,
.progress-sm,
.progress.sm .progress-bar,
.progress-sm .progress-bar {
	border-radius: 1px;
}
.progress.xs,
.progress-xs {
	height: 7px;
}
.progress.xs,
.progress-xs,
.progress.xs .progress-bar,
.progress-xs .progress-bar {
	border-radius: 1px;
}
.progress.xxs,
.progress-xxs {
	height: 3px;
}
.progress.xxs,
.progress-xxs,
.progress.xxs .progress-bar,
.progress-xxs .progress-bar {
	border-radius: 1px;
}


/* Vertical bars */
.progress.vertical {
	position: relative;
	width: 30px;
	height: 200px;
	display: inline-block;
	margin-right: 10px;
}
.progress.vertical > .progress-bar {
	width: 100%;
	position: absolute;
	bottom: 0;
}
.progress.vertical.sm,
.progress.vertical.progress-sm {
	width: 20px;
}
.progress.vertical.xs,
.progress.vertical.progress-xs {
	width: 10px;
}
.progress.vertical.xxs,
.progress.vertical.progress-xxs {
	width: 3px;
}
.progress-group .progress-text {
	/* font-weight: 600; */
}
.progress-group .progress-number {
	float: right;
}



/* Remove margins from progress bars when put in a table */
.table tr > td .progress {
	margin: 0;
}
.progress-bar-light-blue,
.progress-bar-primary {
	background-color: #3c8dbc;
}
.progress-striped .progress-bar-light-blue,
.progress-striped .progress-bar-primary {
	background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-green, .progress-bar-success {
	background-color: #55a580;
}
.progress-striped .progress-bar-green, .progress-striped .progress-bar-success {
	background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
body[class*="colorblind-"] .progress-bar-green, body[class*="colorblind-"] .progress-bar-success {
	background-color: #37de5d;
}
body[class*="colorblind-"] .progress-bar-red, body[class*="colorblind-"] .progress-bar-danger {
	background-color: #af4705;
}

.progress-bar-aqua,
.progress-bar-info {
	background-color: #00c0ef;
}
.progress-striped .progress-bar-aqua,
.progress-striped .progress-bar-info {
	background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-yellow,
.progress-bar-warning {
	background-color: #bc9526;
}
.progress-striped .progress-bar-yellow,
.progress-striped .progress-bar-warning {
	background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-red,
.progress-bar-danger {
	background-color: #af4705;
}
.progress-striped .progress-bar-red,
.progress-striped .progress-bar-danger {
	background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-consumed {
	background-color: rgb(0, 0, 0, 0.15);
}
.progress-bar-consumed-late {
	background-color: #ddd4cf;
}

/* IDE Hack <style type="text/css"> */


/*
* Component: Timeline
* -------------------
*/
.timeline {
	position: relative;
	margin: 0 0 30px 0;
	padding: 0;
	list-style: none;
}
.timeline:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 4px;
	background: #ddd;
	left: 25px;
	margin: 0;
	border-radius: 2px;
}
.timeline > li {
	position: relative;
	margin-right: 0;
	margin-bottom: 15px;
}
.timeline > li:before,
.timeline > li:after {
	content: " ";
	display: table;
}
.timeline > li:after {
	clear: both;
}
.timeline > li > .timeline-item {
	box-shadow:  0 1px 3px rgba(0, 0, 0, 0.1);
	border:1px solid #d2d2d2;
	border-radius: 3px;
	margin-top: 0;
	background: #fff;
	color: #444;
	margin-left: 50px;
	margin-right: 0px;
	padding: 0;
	position: relative;
}

.timeline > li.timeline-code-ticket_msg_private  > .timeline-item,
.timeline > li.timeline-code-ticket_msg_private_sentbymail > .timeline-item {
		background: #fffbe5;
		border-color: #d0cfc0;
}


.timeline > li > .timeline-item > .time{
	color: #6f6f6f;
	float: right;
	padding: 10px;
	font-size: 12px;
}


.timeline > li > .timeline-item > .timeline-header-action{
	color: #6f6f6f;
	float: right;
	padding: 7px;
	font-size: 12px;
}


a.timeline-btn:link,
a.timeline-btn:visited,
a.timeline-btn:hover,
a.timeline-btn:active
{
	display: inline-block;
	margin-bottom: 0;
	font-weight: 400;
	border-radius: 0;
	box-shadow: none;
	padding: 1px 5px;
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	touch-action: manipulation;
	cursor: pointer;
	user-select: none;
	background-image: none;
	text-decoration: none;
	background-color: #f4f4f4;
	color: #444;
	border: 1px solid #ddd;
}

a.timeline-btn:hover
{
	background-color: #e7e7e7;
	color: #333;
	border-color: #adadad;
}


.timeline > li > .timeline-item > .timeline-header {
	margin: 0;
	color: #333;
	border-bottom: 1px solid #f4f4f4;
	padding: 10px;
	font-size: 1em;
	font-weight: normal;
	line-height: 1.1;
}

.timeline > li > .timeline-item > .timeline-footer {
	border-top: 1px solid #f4f4f4;
}

.timeline > li.timeline-code-ticket_msg_private  > .timeline-item > .timeline-header, .timeline > li.timeline-code-ticket_msg_private  > .timeline-item > .timeline-footer {
	border-color: #ecebda;
}

.timeline > li > .timeline-item > .timeline-header > a {
	font-weight: 600;
}
.timeline > li > .timeline-item > .timeline-body,
.timeline > li > .timeline-item > .timeline-footer {
	padding: 10px;
}
.timeline > li > .fa,
.timeline > li > .fas,
.timeline > li > .glyphicon,
.timeline > li > .ion {
	width: 30px;
	height: 30px;
	font-size: 1em;
	line-height: 30px;
	position: absolute;
	color: #666;
	background: #d2d6de;
	border-radius: 50%;
	text-align: center;
	left: 12px;
	top: 5px;
}
.timeline > .time-label > span {
	font-weight: 600;
	padding: 5px;
	display: inline-block;
	background-color: #fff;
	border-radius: 4px;
}
.timeline-inverse > li > .timeline-item {
	background: #f0f0f0;
	border: 1px solid #ddd;
	box-shadow: none;
}
.timeline-inverse > li > .timeline-item > .timeline-header {
	border-bottom-color: #ddd;
}

.timeline-icon-todo,
.timeline-icon-in-progress,
.timeline-icon-done{
	color: #fff !important;
}

.timeline-icon-not-applicble{
	color: #000;
	background-color: #f7f7f7;
}

.timeline-icon-todo{
	background-color: #dd4b39 !important;
}

.timeline-icon-in-progress{
	background-color: #00c0ef !important;
}
.timeline-icon-done{
	background-color: #00a65a !important;
}


.timeline-badge-date{
	background-color: #0073b7 !important;
	color: #fff !important;
}

.timeline-item .messaging-title {
	word-break: break-all;
}

.timeline-documents-container{

}

.timeline-documents{
	margin-right: 5px;
}

.messaging-author {
	width: 100px;
}

.readmore-block.--closed .readmore-block__full-text, .readmore-block.--open .readmore-block__excerpt{
	display: none;
}

.read-less-link, .read-more-link{
	font-weight: bold;
}

.read-less-link{
	display: block;
	text-align: center;
}


	.read-less-link .fa, .read-more-link .fa{
	color: inherit;
}

/* Force values for small screen 767 */
@media only screen and (max-width: 767px)
{
	.messaging-author.inline-block {
		padding-bottom: 10px;
	}
}

/*
* SEARCH
*/

.search-tool-container{
	min-width: 70%;
	margin: 2em 0 2em 0;
	text-align: center;
}

.dropdown-search-input,
.search-tool-input,
input.search-tool-input:focus:not(.button):not(.buttonwebsite):not(.buttonreset):not(.select2-search__field):not(#top-bookmark-search-input):not(.search_component_input):not(.input-search-takepos) {
	width: 100%;
	padding: 10px 35px 10px 20px;

	background-color: transparent;
	font-size: 14px;
	line-height: 16px;
	box-sizing: border-box;

	color: #575756;
	background-color: transparent;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 16px 16px;
	background-position: 95% center;
	background-position: calc(100% - 16px) center;
	border: 1px solid #c4c4c2 !important;
	transition: all 250ms ease-in-out;
	backface-visibility: hidden;
	transform-style: preserve-3d;
	font-style: oblique;
	max-width: 600px;

}

:is(.dropdown-search-input,.search-tool-input)::placeholder {
	color: #888;
	letter-spacing: 1.5px;
}

.search-tool-no-results {
	opacity: 0.4;
	padding: 5px;
}

.hidden-search-result {
	display: none !important;
}

.search-dropdown-body {
	padding: unset;
}

.global-search-item {
	font-size: 1.1em;
}

.global-search-item:before {
	content: none;
}

.global-search-header {
	color: #444 !important;
}

div.extra_inline_chkbxlst, div.extra_inline_checkbox {
	min-width:150px;
}

/* Must be at end */
div.flot-text .flot-tick-label .tickLabel, .fa-color-unset {
	color: unset;

}

/* =======================================================================
 *  FUSION — unified responsive shell overrides
 *  Everything is scoped under html.fusion (class added by fusion.js as soon
 *  as it runs, so the legacy menus are hidden before they can flash).
 * ======================================================================= */

html.fusion{
	--fz-appname: "";   /* read by fusion.js */
	--fz-brand-label: "SCI DF' INVEST";
	--fz-logo-url: "/viewimage.php?cache=1&modulepart=mycompany&file=logos%2Fthumbs%2FSCI+DF+INVEST+LOGO_small.png";
	--fz-logo-square-url: "/viewimage.php?cache=1&modulepart=mycompany&file=logos%2Fthumbs%2FSCI+DF+INVEST+LOGO_small.png";
	--fz-logo-wide: 1;
	--fz-t-search: "Rechercher";
	--fz-t-menu: "Menu";
	--fz-t-user: "Utilisateur";
	--fz-t-mode-display: "Mode d'affichage";
	--fz-t-mode-light: "Clair";
	--fz-t-mode-auto: "Auto";
	--fz-t-mode-dark: "Sombre";
	--fz-t-dash-customize: "Personnaliser";
	--fz-t-dash-done: "Terminer";
	--fz-t-dash-move: "Déplacer ce widget";
	--fz-t-dash-expand: "Ouvrir dans une fenêtre";
	--fz-t-dash-delwidget: "Retirer ce widget";
	--fz-t-dash-reset: "Réinitialiser";
	--fz-t-dash-resetask: "Réinitialiser la disposition du tableau de bord ?";
	/* ---- geometry ---- */
	--fz-sb-w: 268px;            /* expanded sidebar width            */
	--fz-sb-w-collapsed: 66px;   /* icons-only sidebar width          */
	--fz-topbar-h: 54px;         /* portrait top bar height           */
	--fz-radius: 4px;

	/* Bridge Fusion shell colors to Dolibarr/Eldy theme options.
	   Dolibarr "top menu" color drives Fusion's main sidebar.
	   Dolibarr "left menu" color drives Fusion's opened submenus. */
	--fz-nav-bg: var(--colorbackhmenu1, #0f172a);
	--fz-nav-bg2: color-mix(in srgb, var(--fz-nav-bg) 82%, #000);
	--fz-nav-fg: var(--colortextbackhmenu, #dbe3ef);
	--fz-nav-fg-dim: color-mix(in srgb, var(--fz-nav-fg) 62%, transparent);
	--fz-nav-hover: var(--colorbacklinepairhover);
	--fz-nav-active-bg: var(--colorbacklinepairchecked);
	--fz-nav-hover-fg: var(--fz-text);
	--fz-nav-active-fg: var(--fz-text);
	--fz-menu-icon-normal: var(--fz-nav-fg);
	--fz-menu-icon-hover: var(--fz-nav-hover-fg);
	--fz-menu-icon-active: var(--fz-nav-active-fg);
	--fz-sub-bg: var(--colorbackvmenu1, color-mix(in srgb, var(--fz-nav-bg) 92%, #fff));
	--fz-sub-fg: var(--colortextbackvmenu, var(--fz-nav-fg));
	--fz-sub-fg-dim: color-mix(in srgb, var(--fz-sub-fg) 64%, transparent);
	--fz-sub-border: color-mix(in srgb, var(--fz-sub-fg) 22%, transparent);
	--fz-sub-hover: var(--colorbacklinepairhover);
	--fz-star: #f5b301;

	--fz-content-bg: var(--colorbackbody, #f4f6fb);
	--fz-surface: var(--colorbacktabcard1, var(--colorbacklinepair1, #ffffff));
	--fz-border: var(--inputbordercolor, var(--colorboxstatsborder, #e6e9f0));
	--fz-text: var(--colortext, #1f2733);
	--fz-text-dim: color-mix(in srgb, var(--fz-text) 62%, transparent);
	--fz-row-hover: var(--colorbacklinepairhover);
	--fz-row-checked: var(--colorbacklinepairchecked);
	--fz-topbar-bg: var(--colorbackhmenu1, var(--fz-surface));
	--fz-topbar-fg: var(--colortextbackhmenu, var(--fz-text));
}

/*
 * Dark palette — redefines BOTH the fusion shell vars (--fz-*) AND eldy's own
 * theme variables (--color*) so the WHOLE app switches, not just the sidebar.
 * It applies in two cases: the user forces dark, or picks "auto" and the OS is dark.
 * Both emit the very same declarations, so they live in ONE variable and cannot drift.
 */
html.fusion[data-fz-mode="dark"]{
	/* shell (sidebar keeps a subtle tint of the configured brand color) */
	--fz-nav-bg: color-mix(in srgb, var(--colorbackhmenu1, #0a0f1a) 22%, #0a0c12);
	--fz-nav-bg2: color-mix(in srgb, var(--fz-nav-bg) 84%, #000);
	--fz-nav-hover: rgba(255,255,255,.08);
	--fz-sub-bg: color-mix(in srgb, var(--colorbackvmenu1, #2b2c2e) 92%, #000);
	--fz-sub-hover: rgba(255,255,255,.08);
	--fz-content-bg:#1d1e20; --fz-surface:#26272b; --fz-border:#3a3b3e;
	--fz-text:#dcdcdc; --fz-text-dim:#9aa0a8; --fz-topbar-bg:#3d3e40; --fz-topbar-fg:rgb(220,220,220);
	/* eldy core */
	--colorbackhmenu1:#3d3e40; --colorbackvmenu1:#2b2c2e; --colorbacktitle1:#3b3c3e;
	--colorbacktabcard1:#1d1e20; --colorbacktabactive:rgb(220,220,220);
	--colorbacklineimpair1:#38393d; --colorbacklineimpair2:#2b2d2f;
	--colorbacklinepair1:#38393d; --colorbacklinepair2:#2b2d2f;
	--colorbacklinepairhover:#2b2d2f; --colorbacklinepairchecked:#0e5ccd;
	--colorbackbody:#1d1e20; --colorbackmobilemenu:#080808; --colorbackgrey:#0f0f0f;
	--tooltipbgcolor:#2b2d2f; --colortexttitlenotab:rgb(220,220,220);
	--colortexttitlenotab2:rgb(220,220,220); --colortexttitle:rgb(220,220,220);
	--colortext:rgb(220,220,220); --colortextlink:#4390dc; --colortexttitlelink:#4390dc;
	--colortextbackhmenu:rgb(220,220,220); --colortextbackvmenu:rgb(220,220,220);
	--tooltipfontcolor:rgb(220,220,220); --listetotal:rgb(245,83,158);
	--inputbackgroundcolor:rgb(70,70,70); --inputbackgroundcolordisabled:rgb(60,60,60);
	--inputcolordisabled:rgb(140,140,140); --inputbordercolor:rgb(120,120,120);
	--oddevencolor:rgb(220,220,220); --colorboxstatsborder:rgb(65,100,138);
	--dolgraphbg:#1d1e20; --fieldrequiredcolor:rgb(250,183,59);
	--colortextbacktab:rgb(220,220,220); --colorboxiconbg:rgb(36,38,39);
	--refidnocolor:rgb(220,220,220); --tableforfieldcolor:rgb(220,220,220);
	--colorblack:#fff; --colorwhite:#000;}
html.fusion[data-fz-mode="dark"] body,
html.fusion[data-fz-mode="dark"] button{ color:#bbb; }

/* Fusion's own light/auto/dark switch is the sole authority for dark mode: in
   "auto" we always follow the OS preference, regardless of Dolibarr's
   THEME_DARKMODEENABLED setting (which is redundant/contradictory with our switch). */
@media (prefers-color-scheme: dark){
	html.fusion[data-fz-mode="auto"]{
	/* shell (sidebar keeps a subtle tint of the configured brand color) */
	--fz-nav-bg: color-mix(in srgb, var(--colorbackhmenu1, #0a0f1a) 22%, #0a0c12);
	--fz-nav-bg2: color-mix(in srgb, var(--fz-nav-bg) 84%, #000);
	--fz-nav-hover: rgba(255,255,255,.08);
	--fz-sub-bg: color-mix(in srgb, var(--colorbackvmenu1, #2b2c2e) 92%, #000);
	--fz-sub-hover: rgba(255,255,255,.08);
	--fz-content-bg:#1d1e20; --fz-surface:#26272b; --fz-border:#3a3b3e;
	--fz-text:#dcdcdc; --fz-text-dim:#9aa0a8; --fz-topbar-bg:#3d3e40; --fz-topbar-fg:rgb(220,220,220);
	/* eldy core */
	--colorbackhmenu1:#3d3e40; --colorbackvmenu1:#2b2c2e; --colorbacktitle1:#3b3c3e;
	--colorbacktabcard1:#1d1e20; --colorbacktabactive:rgb(220,220,220);
	--colorbacklineimpair1:#38393d; --colorbacklineimpair2:#2b2d2f;
	--colorbacklinepair1:#38393d; --colorbacklinepair2:#2b2d2f;
	--colorbacklinepairhover:#2b2d2f; --colorbacklinepairchecked:#0e5ccd;
	--colorbackbody:#1d1e20; --colorbackmobilemenu:#080808; --colorbackgrey:#0f0f0f;
	--tooltipbgcolor:#2b2d2f; --colortexttitlenotab:rgb(220,220,220);
	--colortexttitlenotab2:rgb(220,220,220); --colortexttitle:rgb(220,220,220);
	--colortext:rgb(220,220,220); --colortextlink:#4390dc; --colortexttitlelink:#4390dc;
	--colortextbackhmenu:rgb(220,220,220); --colortextbackvmenu:rgb(220,220,220);
	--tooltipfontcolor:rgb(220,220,220); --listetotal:rgb(245,83,158);
	--inputbackgroundcolor:rgb(70,70,70); --inputbackgroundcolordisabled:rgb(60,60,60);
	--inputcolordisabled:rgb(140,140,140); --inputbordercolor:rgb(120,120,120);
	--oddevencolor:rgb(220,220,220); --colorboxstatsborder:rgb(65,100,138);
	--dolgraphbg:#1d1e20; --fieldrequiredcolor:rgb(250,183,59);
	--colortextbacktab:rgb(220,220,220); --colorboxiconbg:rgb(36,38,39);
	--refidnocolor:rgb(220,220,220); --tableforfieldcolor:rgb(220,220,220);
	--colorblack:#fff; --colorwhite:#000;	}
	html.fusion[data-fz-mode="auto"] body,
	html.fusion[data-fz-mode="auto"] button{ color:#bbb; }
}

/* ---------------------------------------------------------------------- *
 *  Hide the legacy menus (their useful nodes are moved into the sidebar)  *
 * ---------------------------------------------------------------------- */
html.fusion header#id-top,
html.fusion .side-nav,
html.fusion #id-left{
	display: none !important;
}
/* In case some pages keep a clearer div between header and container */
html.fusion body#mainbody > div[style*="clear"]{ display:none !important; }

/* ---------------------------------------------------------------------- *
 *  Content area : leave room for the fixed sidebar (landscape)            *
 * ---------------------------------------------------------------------- */
/* Offset the container by the sidebar width and constrain its width.
   Force block layout: with the left-menu cell removed, #id-right (a lone
   display:table-cell) would otherwise shrink-to-fit and leave a void at right. */
html.fusion body#mainbody #id-container{
	display: block !important;
	margin-left: var(--fz-sb-w) !important;
	width: calc(100% - var(--fz-sb-w)) !important;
	box-sizing: border-box !important;
	transition: margin-left .22s ease, width .22s ease;
	background: var(--fz-content-bg);
}
html.fusion.fz-collapsed body#mainbody #id-container{
	margin-left: var(--fz-sb-w-collapsed) !important;
	width: calc(100% - var(--fz-sb-w-collapsed)) !important;
}
/* hover-peek : the .fz-collapsed class is momentarily lifted so the rail renders
   expanded, but the content must NOT reflow — keep it at the collapsed offset so the
   expanded rail OVERLAYS it (an elevated shadow makes the overlay read as floating). */
html.fusion.fz-peek body#mainbody #id-container{
	margin-left: var(--fz-sb-w-collapsed) !important;
	width: calc(100% - var(--fz-sb-w-collapsed)) !important;
}
html.fz-peek #fz-sidebar{ box-shadow:0 0 40px rgba(0,0,0,.45); }
html.fusion body#mainbody #id-right{
	display: block !important;
	width: auto !important;
	float: none !important;
	margin-left: 0 !important;
	box-sizing: border-box;
	min-height: 100vh;
}
html.fusion body#mainbody{ background: var(--fz-content-bg); }

/* Neutralize 3rd-party module layout hacks that reserve the legacy left-menu
   width (e.g. TimeMoto on .page-index / .page-manager). The 2-id selectors
   above and below outrank their later !important declarations, while the
   orientation-aware rules keep the correct sidebar offset. */
html.fusion body#mainbody #id-container{ padding-left: 0 !important; padding-right: 0 !important; }
html.fusion body#mainbody #id-right{ width: auto !important; max-width: none !important; }

/* Dialogs are centered by fusion.js in the real content rectangle. These
   limits are a no-JS/first-frame safeguard against the sidebar overlap. */
html.fusion .ui-dialog[role="dialog"]{
	box-sizing: border-box;
	max-width: calc(100vw - var(--fz-sb-w) - 28px);
}
html.fusion.fz-collapsed .ui-dialog[role="dialog"],
html.fusion.fz-peek .ui-dialog[role="dialog"]{
	max-width: calc(100vw - var(--fz-sb-w-collapsed) - 28px);
}
@media only screen and (max-width: 920px){
	html.fusion .ui-dialog[role="dialog"]{
		max-width: calc(100vw - 28px);
	}
}

/* Compact TimeMoto header: two 40px control rows on desktop, while keeping
   every row constrained to the content column so narrow screens can wrap. */
html.fusion body#mainbody.page-index .tm-header-content,
html.fusion body#mainbody.page-manager .tm-header-content{
	min-height: 0;
	padding: 12px 14px;
}
html.fusion body#mainbody.page-index .tm-header-layout,
html.fusion body#mainbody.page-manager .tm-header-layout{
	grid-template-columns: minmax(520px, 1fr) minmax(0, 1.25fr);
	align-items: start;
	gap: 16px;
}
html.fusion body#mainbody.page-index .tm-header-title,
html.fusion body#mainbody.page-manager .tm-header-title{
	min-height: 40px;
	margin: 0 0 8px;
}
html.fusion body#mainbody.page-index .tm-header-title > .fas,
html.fusion body#mainbody.page-manager .tm-header-title > .fas{
	width: 32px;
	height: 32px;
}
html.fusion body#mainbody.page-index .tm-header-dropdowns,
html.fusion body#mainbody.page-manager .tm-header-dropdowns{
	flex-wrap: nowrap;
	gap: 8px;
}
html.fusion body#mainbody.page-index .tm-header-dropdowns .tm-nav-form-margin,
html.fusion body#mainbody.page-manager .tm-header-dropdowns .tm-nav-form-margin{
	flex: 1 1 140px;
	min-width: 120px;
	max-width: 240px;
	margin: 0;
}
html.fusion body#mainbody.page-index .tm-show-disabled-form,
html.fusion body#mainbody.page-manager .tm-show-disabled-form{
	flex: 0 0 auto;
	margin: 0;
}
html.fusion body#mainbody.page-index .tm-show-disabled-label,
html.fusion body#mainbody.page-manager .tm-show-disabled-label{
	min-height: 40px;
	padding: 0 2px;
	white-space: nowrap;
}
html.fusion body#mainbody.page-index .tm-header-right-cell,
html.fusion body#mainbody.page-manager .tm-header-right-cell,
html.fusion body#mainbody.page-index .tm-nav-panel,
html.fusion body#mainbody.page-manager .tm-nav-panel,
html.fusion body#mainbody.page-index .tm-nav-buttons-line1,
html.fusion body#mainbody.page-manager .tm-nav-buttons-line1,
html.fusion body#mainbody.page-index .tm-nav-buttons-line2,
html.fusion body#mainbody.page-manager .tm-nav-buttons-line2{
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}
html.fusion body#mainbody.page-index .tm-nav-panel,
html.fusion body#mainbody.page-manager .tm-nav-panel{
	gap: 8px;
}
html.fusion body#mainbody.page-index .tm-nav-buttons-line1,
html.fusion body#mainbody.page-manager .tm-nav-buttons-line1,
html.fusion body#mainbody.page-index .tm-nav-buttons-line2,
html.fusion body#mainbody.page-manager .tm-nav-buttons-line2{
	gap: 8px;
}
html.fusion body#mainbody.page-index .tm-nav-buttons-line2,
html.fusion body#mainbody.page-manager .tm-nav-buttons-line2{
	align-self: flex-end;
	width: fit-content;
	flex-wrap: nowrap;
	padding: 4px;
}
html.fusion body#mainbody.page-index .tm-header-content .button,
html.fusion body#mainbody.page-manager .tm-header-content .button{
	display: inline-flex !important;
	height: 40px !important;
	min-height: 40px !important;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	padding: 0 14px !important;
	line-height: 1 !important;
	white-space: nowrap;
}
html.fusion body#mainbody.page-index .tm-header-content .tm-nav-button-small,
html.fusion body#mainbody.page-manager .tm-header-content .tm-nav-button-small,
html.fusion body#mainbody.page-index .tm-header-content .tm-nav-arrow-button,
html.fusion body#mainbody.page-manager .tm-header-content .tm-nav-arrow-button{
	flex: 0 0 40px;
	width: 40px !important;
	min-width: 40px !important;
	max-width: 40px !important;
	padding: 0 !important;
}
html.fusion body#mainbody.page-index .tm-nav-buttons-line2 .tm-nav-inline-form,
html.fusion body#mainbody.page-manager .tm-nav-buttons-line2 .tm-nav-inline-form{
	display: flex;
	flex: 0 1 auto;
	flex-wrap: wrap;
	width: auto;
	min-width: 0;
	max-width: 100%;
	margin: 0;
}
html.fusion body#mainbody.page-index .tm-header-content select,
html.fusion body#mainbody.page-manager .tm-header-content select,
html.fusion body#mainbody.page-index .tm-header-content .select2-container,
html.fusion body#mainbody.page-manager .tm-header-content .select2-container,
html.fusion body#mainbody.page-index .tm-header-content .select2-selection--single,
html.fusion body#mainbody.page-manager .tm-header-content .select2-selection--single{
	height: 40px !important;
	min-height: 40px !important;
}
html.fusion body#mainbody.page-index .tm-header-content .select2-selection__rendered,
html.fusion body#mainbody.page-manager .tm-header-content .select2-selection__rendered{
	line-height: 38px !important;
}
html.fusion body#mainbody.page-index .tm-header-content .select2-selection__arrow,
html.fusion body#mainbody.page-manager .tm-header-content .select2-selection__arrow{
	height: 38px !important;
}

/* Compact remote-clocking card: clock, details and the two 40px actions share
   one horizontal grid instead of stacking each action below a tall column. */
html.fusion body#mainbody .tm-header-remote{
	padding: 8px;
}
html.fusion body#mainbody .tm-header-remote .tm-clock-wrapper{
	display: grid;
	grid-template-columns: 56px minmax(94px, 1fr) minmax(94px, 104px);
	grid-template-rows: repeat(2, minmax(40px, auto));
	align-items: center;
	gap: 4px 8px;
}
html.fusion body#mainbody .tm-header-remote .tm-clock-column{
	display: contents;
}
html.fusion body#mainbody .tm-header-remote .tm-clock-column:first-child .tm-clock-column-content{
	grid-column: 1;
	grid-row: 1 / 3;
}
html.fusion body#mainbody .tm-header-remote .tm-clock-column:nth-child(2) .tm-clock-column-content{
	grid-column: 2;
	grid-row: 1 / 3;
}
html.fusion body#mainbody .tm-header-remote .tm-clock-column:first-child .tm-button-form{
	grid-column: 3;
	grid-row: 1;
}
html.fusion body#mainbody .tm-header-remote .tm-clock-column:nth-child(2) .tm-button-form{
	grid-column: 3;
	grid-row: 2;
}
html.fusion body#mainbody .tm-header-remote .tm-clock-column-content{
	gap: 2px;
}
html.fusion body#mainbody .tm-header-remote .tm-analog-clock{
	width: 56px;
	height: 56px;
}
html.fusion body#mainbody .tm-header-remote .tm-hour-hand{
	height: 14px;
}
html.fusion body#mainbody .tm-header-remote .tm-minute-hand{
	height: 19px;
}
html.fusion body#mainbody .tm-header-remote .tm-second-hand{
	height: 22px;
}
html.fusion body#mainbody .tm-header-remote .tm-digital-clock{
	font-size: 22px;
	line-height: 1;
	letter-spacing: 0;
}
html.fusion body#mainbody .tm-header-remote .tm-current-date{
	font-size: 10px;
	line-height: 1.1;
	white-space: nowrap;
}
html.fusion body#mainbody .tm-header-remote .tm-workshift-info{
	max-width: 100%;
	box-sizing: border-box;
	padding: 3px 6px;
	font-size: 10px;
	white-space: nowrap;
}
html.fusion body#mainbody .tm-header-remote .tm-button-form{
	width: 100%;
}
html.fusion body#mainbody .tm-header-remote .tm-button{
	display: flex;
	width: 100%;
	height: 40px;
	min-height: 40px;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	padding: 0 6px;
}
@media only screen and (max-width: 1450px){
	html.fusion body#mainbody.page-index .tm-header-layout,
	html.fusion body#mainbody.page-manager .tm-header-layout{
		grid-template-columns: 1fr;
	}
}
@media only screen and (max-width: 720px){
	html.fusion body#mainbody.page-index .tm-header-dropdowns,
	html.fusion body#mainbody.page-manager .tm-header-dropdowns,
	html.fusion body#mainbody.page-index .tm-nav-buttons-line1,
	html.fusion body#mainbody.page-manager .tm-nav-buttons-line1,
	html.fusion body#mainbody.page-index .tm-nav-buttons-line2,
	html.fusion body#mainbody.page-manager .tm-nav-buttons-line2{
		flex-wrap: wrap;
		align-self: stretch;
		width: 100%;
	}
	html.fusion body#mainbody.page-index .tm-header-dropdowns .tm-nav-form-margin,
	html.fusion body#mainbody.page-manager .tm-header-dropdowns .tm-nav-form-margin{
		flex-basis: 100%;
		max-width: none;
	}
}

/* ====================================================================== *
 *  THE SIDEBAR (single unified menu)                                      *
 * ====================================================================== */
#fz-sidebar{
	position: fixed; top:0; left:0; bottom:0;
	width: var(--fz-sb-w);
	display: flex; flex-direction: column;
	background: var(--fz-nav-bg);
	color: var(--fz-nav-fg);
	z-index: 1200;
	box-shadow: 2px 0 14px rgba(10,16,32,.10);
	transition: width .22s ease, transform .22s ease;
	font-family: inherit;
}
html.fz-collapsed #fz-sidebar{ width: var(--fz-sb-w-collapsed); }
html.fz-shell-resizing #fz-sidebar{overflow:hidden}
html.fz-collapsing #fz-brand .fz-logo,
html.fz-collapsing #fz-tools,
html.fz-collapsing #fz-fav{display:none !important}
html.fz-shell-resizing #fz-sidebar .dropdown-menu{display:none !important}
/* never underline links anywhere in the menu (eldy underlines on hover) */
html.fusion #fz-sidebar a,html.fusion #fz-sidebar a:link,html.fusion #fz-sidebar a:visited,
html.fusion #fz-sidebar a:hover,html.fusion #fz-sidebar a:focus,html.fusion #fz-sidebar a:active,
html.fusion #fz-sidebar a *,html.fusion #fz-sidebar a:hover *,
html.fusion #fz-sidebar .dropdown-toggle,html.fusion #fz-sidebar .dropdown-toggle:hover,
html.fusion #fz-topbar a,html.fusion #fz-topbar a:hover{
	text-decoration:none !important;text-decoration-line:none !important}
/* THE fix: eldy does ".alogin:hover,.atoplogin:hover{text-decoration:underline!important}".
   The underline is set on the CONTAINER (#topmenu-login-dropdown / search / +/star all have
   class .atoplogin) and PROPAGATES to child text — a child text-decoration:none can't undo it.
   So we must neutralize it on the .atoplogin/.alogin element itself. */
html.fusion #fz-sidebar .atoplogin:hover,html.fusion #fz-sidebar .alogin:hover,
html.fusion #fz-sidebar .atoplogin:focus,html.fusion #fz-topbar .atoplogin:hover{
	text-decoration:none !important;text-decoration-line:none !important}
/* ultra-specific safety net for the user toggle (3 ids) */
html.fusion #fz-sidebar #fz-user a,html.fusion #fz-sidebar #fz-user a:hover,
html.fusion #fz-sidebar #fz-user a:focus,html.fusion #fz-sidebar #fz-user a:active,
html.fusion #fz-sidebar #fz-user a span,html.fusion #fz-sidebar #fz-user a:hover span,
html.fusion #fz-sidebar #fz-user .atoploginusername{
	text-decoration:none !important;text-decoration-line:none !important}
/* …and kill the underline drawn as a border, EXCEPT on the buttons of the panel footer:
   they are links too, and this selector (2 ids) outranks the one that styles them, so it
   used to erase their bottom edge — hence a bottom border that could not be set there. */
html.fusion #fz-sidebar #fz-user a:not(.button-top-menu-dropdown),
html.fusion #fz-sidebar #fz-user a:not(.button-top-menu-dropdown):hover,
html.fusion #fz-sidebar #fz-user a:not(.button-top-menu-dropdown):focus,
html.fusion #fz-sidebar #fz-user a:not(.button-top-menu-dropdown):active,
html.fusion #fz-sidebar #fz-user a span,html.fusion #fz-sidebar #fz-user a:hover span,
html.fusion #fz-sidebar #fz-user .atoploginusername{
	border-bottom:0 !important}

/* Brand + collapse button */
#fz-brand{
	height: var(--fz-topbar-h); flex:0 0 auto;
	display:flex; align-items:center; gap:10px; padding:0 15px 0 5px;
}
#fz-brand .fz-logo{
	width:32px;height:32px;border-radius:var(--fz-radius);flex:0 0 auto;
	display:flex;align-items:center;justify-content:center;overflow:hidden;
	background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;font-weight:800;
}
#fz-brand .fz-logo img{display:block;width:100%;height:100%;object-fit:contain}
/* A real logo (wide wordmark when expanded, square icon when collapsed): show it
   as-is, sized by HEIGHT so the width just follows the image. Both logos are framed
   to the same scale, so this single rule renders them consistently in both modes. */
#fz-brand .fz-logo.has-logo{width:auto;height:auto;background:none;border-radius:var(--fz-radius);overflow:hidden}
#fz-brand .fz-logo.has-logo img{width:auto;height:55px;max-width:none;border-radius:inherit}
#fz-brand .fz-brand-name{font-weight:700;color:var(--fz-nav-fg);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
/* Dolibarr version badge, pushed to the right edge (margin-left:auto), with room
   kept on the right for the floating collapse button */
#fz-brand .fz-version{flex:0 0 auto;align-self:center;margin-left:auto;margin-right:16px;
	transform:translateX(22px);
	color:var(--fz-nav-fg-dim);font-size:11px;font-weight:700;white-space:nowrap;letter-spacing:.02em}
/* Slide button = a small tab attached to the sidebar edge. The chevron points
   toward the action: left to retract, right to reopen. */
#fz-brand .fz-collapse{
	position:fixed;left:var(--fz-sb-w);top:10px;z-index:1300;
	border:0;cursor:pointer;color:var(--fz-nav-fg);
	background:var(--fz-nav-bg);
	width:18px;height:34px;border-radius:0 var(--fz-radius) var(--fz-radius) 0;font-size:11px;
	display:flex;align-items:center;justify-content:center;box-sizing:border-box;
	padding-left:1px;
	box-shadow:10px 0 18px -8px rgba(0,0,0,.28);
	clip-path:inset(-28px -28px -28px 0);
	transition:left .22s ease,background .15s ease,box-shadow .15s ease;
}
#fz-brand .fz-collapse:hover{
	background:color-mix(in srgb, var(--fz-nav-bg) 88%, #fff);
	box-shadow:12px 0 22px -8px rgba(0,0,0,.32);
}
html.fz-collapsed #fz-brand .fz-collapse{left:var(--fz-sb-w-collapsed)}
/* Double chevron left when expanded; double chevron right when retracted. */
#fz-brand .fz-collapse i{font-size:12px;line-height:1;transform:none;transition:opacity .18s ease}
#fz-brand .fz-collapse.is-unlocked i{font-size:13px}

/* Compact primary-menu tooltips shown only when the sidebar is retracted. */
div.ui-tooltip.mytooltip.fz-menu-tooltip{
	min-width:0 !important;
	max-width:190px !important;
	width:auto !important;
	padding:8px 11px !important;
	line-height:1.25 !important;
	white-space:normal;
}

/* collapsed brand: just center the (square) logo in the 66px rail. It keeps the
   height-based size from the rule above — no per-mode sizing. The collapse handle is
   fixed/out of flow, so it doesn't affect alignment. */
html.fz-collapsed #fz-brand{padding:0;gap:0;justify-content:center}
html.fz-collapsed #fz-brand .fz-logo{margin:0}


/* Tools row (search + quick add), reusing Dolibarr nodes */
#fz-tools{padding:10px 12px 6px;display:flex;flex-direction:column;gap:8px;align-items:stretch;flex:0 0 auto;position:relative}
#fz-tools .fz-tools-search{width:100%;min-width:0}
#fz-tools .fz-tools-search input,
#fz-tools .fz-tools-search .select2-container{width:100% !important}
/* ---- Native search (#blockvmenusearch): the select2 "Search into …" combo,
   or a plugin search (ATM) — themed to sit in the sidebar ------------------- */
#fz-tools #blockvmenusearch{position:relative;width:100% !important;box-sizing:border-box;
	background:none !important;border:0 !important;border-top:0 !important;padding:0 !important;margin:0 !important}
#fz-tools #blockvmenusearch::before{content:"\f002";font-family:"Font Awesome 5 Free";font-weight:900;
	position:absolute;left:11px;top:18px;transform:translateY(-50%);color:var(--fz-nav-fg-dim);font-size:13px;z-index:2;pointer-events:none}
#fz-tools #blockvmenusearch .select2-container,#fz-tools .vmenusearchselectcombo{width:100% !important;box-sizing:border-box}
#fz-tools .select2-container--default .select2-selection--single{
	height:36px !important;display:flex !important;align-items:center;border-radius:var(--fz-radius) !important;
	background:rgba(255,255,255,.10) !important;border:1px solid rgba(255,255,255,.10) !important}
#fz-tools .select2-container--default .select2-selection--single .select2-selection__rendered{
	color:var(--fz-nav-fg) !important;line-height:normal !important;padding-left:32px !important;padding-right:24px !important}
#fz-tools .select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--fz-nav-fg-dim) !important}
#fz-tools .select2-container--default .select2-selection--single .select2-selection__arrow{height:34px !important;right:6px}
/* old-search-form fallback (plain input) */
#fz-tools #blockvmenusearch input[type="text"]{width:100% !important;box-sizing:border-box;height:36px;
	border-radius:var(--fz-radius);padding:6px 10px 6px 32px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);color:var(--fz-nav-fg)}
/* icon row sits BELOW the search field */
#fz-tools .fz-tools-extra{display:flex;flex-direction:row;gap:6px;align-items:center;justify-content:space-evenly}
#fz-tools .fz-tools-extra a,
#fz-tools .fz-tools-extra .login_block_elem{color:var(--fz-nav-fg) !important}
/* loupe button : only shown when the sidebar is collapsed */
#fz-search-toggle{display:none;flex:0 0 auto;width:40px;height:40px;border:0;border-radius:var(--fz-radius);
	background:rgba(255,255,255,.10);color:var(--fz-nav-fg);cursor:pointer;align-items:center;justify-content:center;font-size:15px}
#fz-search-toggle:hover{background:var(--fz-nav-hover);color:var(--fz-nav-hover-fg)}

/* Scrollable nav */
#fz-nav{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:6px 8px 14px}
.fz-sec-label{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--fz-nav-fg-dim);
	padding:14px 12px 6px;white-space:nowrap;overflow:hidden}

/* A navigation group = one old top-menu section */
.fz-group{margin:1px 0}
.fz-head{
	display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--fz-radius);
	color:var(--fz-nav-fg);text-decoration:none;white-space:nowrap;cursor:pointer;position:relative;
	transition:padding .22s ease;
}
.fz-head:hover{background:var(--fz-nav-hover);color:var(--fz-nav-hover-fg)}
.fz-head .fz-ic{width:20px;flex:0 0 20px;text-align:center;font-size:15px;line-height:1;
	display:flex;align-items:center;justify-content:center;transition:font-size .22s ease}
.fz-head .fz-label{flex:1;overflow:hidden;text-overflow:ellipsis}
.fz-head .fz-chev{
	width:26px;height:26px;flex:0 0 26px;display:flex;align-items:center;justify-content:center;
	margin:-4px -6px -4px 0;border-radius:var(--fz-radius);font-size:11px;color:var(--fz-nav-fg-dim);
	cursor:pointer;transition:transform .18s ease,background .15s ease,color .15s ease}
.fz-group:not(.fz-has-sub):not(.fz-loading) > .fz-head .fz-chev{display:none}
.fz-head .fz-chev:hover{background:var(--fz-nav-hover);color:var(--fz-nav-hover-fg)}
.fz-group.fz-open > .fz-head .fz-chev{transform:rotate(90deg)}
/* on-demand submenu fetch: pulse the chevron while loading */
.fz-group.fz-loading > .fz-head .fz-chev{animation:fz-pulse .8s ease-in-out infinite}
@keyframes fz-pulse{50%{opacity:.25}}
.fz-group.fz-active > .fz-head{background:var(--fz-nav-active-bg);color:var(--fz-nav-active-fg)}
.fz-group.fz-active > .fz-head::before{content:"";position:absolute;left:-8px;top:6px;bottom:6px;width:3px;
	border-radius:0 var(--fz-radius) var(--fz-radius) 0;background:var(--fz-nav-active-fg)}

/* Fallback colors for synthetic icons. Native Dolibarr icons keep their own
   inline/class colors when THEME_MENU_COLORLOGO is enabled. */
.fz-group[data-code="home"]{--fz-menu-icon-color:var(--fz-nav-fg)}
.fz-group[data-code="companies"],.fz-group[data-code="thirdparties"],.fz-group[data-code="societe"],.fz-group[data-code="fournisseur"]{--fz-menu-icon-color:#6c6aa8}
.fz-group[data-code="products"],.fz-group[data-code="product"],.fz-group[data-code="produit"],.fz-group[data-code="service"],.fz-group[data-code="stock"],.fz-group[data-code="mrp"]{--fz-menu-icon-color:#a69944}
.fz-group[data-code="commercial"],.fz-group[data-code="contrat"],.fz-group[data-code="ficheinter"],.fz-group[data-code="ticket"]{--fz-menu-icon-color:#3bbfa8}
.fz-group[data-code="billing"],.fz-group[data-code="facture"],.fz-group[data-code="propale"],.fz-group[data-code="commande"],.fz-group[data-code="don"]{--fz-menu-icon-color:#65953d}
.fz-group[data-code="bank"],.fz-group[data-code="banque"],.fz-group[data-code="accountancy"],.fz-group[data-code="compta"],.fz-group[data-code="accounting"],.fz-group[data-code="tax"]{--fz-menu-icon-color:#b0bb39}
.fz-group[data-code="project"],.fz-group[data-code="projet"]{--fz-menu-icon-color:#6c6aa8}
.fz-group[data-code="hrm"],.fz-group[data-code="members"],.fz-group[data-code="adherent"]{--fz-menu-icon-color:#79633f}
.fz-group[data-code="agenda"],.fz-group[data-code="eventorganization"]{--fz-menu-icon-color:#906080}
.fz-group[data-code="holiday"]{--fz-menu-icon-color:#755114}
.fz-group[data-code="tools"],.fz-group[data-code="import"],.fz-group[data-code="export"],.fz-group[data-code="mailing"],.fz-group[data-code="cron"]{--fz-menu-icon-color:#999}
.fz-group[data-code="website"],.fz-group[data-code="externalsite"]{--fz-menu-icon-color:#304}
.fz-group[data-code="knowledgemanagement"],.fz-group[data-code="ecm"]{--fz-menu-icon-color:#3bbfa8}
.fz-head .fz-ic .fz-native-menu-icon{
	display:inline-flex !important;align-items:center;justify-content:center;width:20px !important;min-width:20px !important;
	height:20px !important;margin:0 !important;padding:0 !important;line-height:20px !important;text-align:center !important;
	vertical-align:middle !important;background-repeat:no-repeat !important;background-position:center center !important;
	/* contain, not a forced 20x20: a module logo that is not square keeps its ratio */
	background-size:contain !important;position:static !important;top:auto !important;left:auto !important}
.fz-head .fz-ic img.fz-native-menu-icon,.fz-head .fz-ic .fz-native-menu-icon img{
	display:block !important;max-width:20px !important;max-height:20px !important;width:auto !important;height:auto !important;
	object-fit:contain;margin:0 !important;padding:0 !important}
.fz-head .fz-ic .fz-native-menu-icon::before,
.fz-head .fz-ic .fz-native-menu-icon i::before,
.fz-head .fz-ic .fz-native-menu-icon span::before{line-height:20px !important;text-align:center !important}
.fz-head .fz-ic.fz-ic-native .fz-native-menu-icon{filter:saturate(0) grayscale(1) !important}

/* Submenu (old left-menu of the active section, moved here) */
.fz-sub{max-height:0;opacity:0;overflow:hidden;margin:2px 14px 2px 14px;
	border-left:2px solid var(--fz-sub-border);padding-left:4px;color:var(--fz-sub-fg);
	transition:max-height .24s ease,opacity .2s ease}
/* The open height is driven from JS (element scrollHeight) so any submenu length
   folds/unfolds smoothly — CSS cannot animate to/from max-height:auto. */
.fz-group.fz-open > .fz-sub{opacity:1;background:var(--fz-sub-bg)}

/* Re-skin + compact the Dolibarr left-menu nodes moved inside .fz-sub.
   eldy emits: .blockvmenu > .menu_titre(a.vmenu) + .menu_top + .menu_contenu(&nbsp;* a.vsmenu <br>)* + .menu_end
   The legacy <br> and decorative spacers are removed; each .menu_contenu becomes a tight row. */
.fz-sub .blockvmenu,.fz-sub .menu_titre,.fz-sub .menu_contenu,
.fz-sub .blockvmenuend,.fz-sub .blockvmenupair,.fz-sub .blockvmenuimpair{
	background:none !important;border:0 !important;margin:0 !important;width:auto !important;
	min-height:0 !important;line-height:1.3 !important;color:var(--fz-sub-fg) !important}
.fz-sub .menu_top,.fz-sub .menu_end{display:none !important}       /* decorative spacers */
.fz-sub br{display:none !important}                                /* legacy line breaks */

/* Section heading (.menu_titre) */
/* pull the section sub-titles (Products, Services, Warehouses…) left, out of the
   submenu indent, so they sit under the main group icon while children stay indented */
.fz-sub .menu_titre{position:relative;padding:7px 12px !important;margin-left:-15px !important;border-radius:var(--fz-radius)}
/* highlight the whole section-title row on hover, like the child rows */
.fz-sub .menu_titre:hover{background:var(--fz-sub-hover)}
.fz-sub .menu_titre a.vmenu::after{content:"";position:absolute;inset:0}
.fz-sub .menu_titre a.vmenu,.fz-sub .menu_titre span.vmenu{
	display:flex;align-items:center;gap:7px;color:var(--fz-sub-fg) !important;font-weight:600 !important;
	text-decoration:none;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fz-sub .menu_titre:hover a.vmenu,.fz-sub .menu_titre:hover .fas,
.fz-sub .menu_titre:hover .far,.fz-sub .menu_titre:hover .fa{color:var(--fz-sub-fg) !important}
.fz-sub .menu_titre .fas,.fz-sub .menu_titre .far,.fz-sub .menu_titre .fa{color:var(--fz-sub-fg-dim) !important}

/* Sub-item rows (.menu_contenu). a.vsmenu stays inline so the &nbsp; indentation
   keeps showing the hierarchy on the same line; ::after makes the whole row clickable. */
.fz-sub .menu_contenu{position:relative;display:block !important;padding:4px 10px 4px 30px !important;border-radius:var(--fz-radius)}
.fz-sub .menu_contenu:hover{background:var(--fz-sub-hover) !important}
.fz-sub .menu_contenu a.vsmenu,.fz-sub .menu_contenu span.vsmenu{
	display:inline !important;color:var(--fz-sub-fg-dim) !important;
	text-decoration:none;font-size:13px;font-weight:400 !important;white-space:nowrap}
.fz-sub .menu_contenu.fz-subhead a.vsmenu,.fz-sub .menu_contenu.fz-subhead span.vsmenu{
	color:var(--fz-sub-fg) !important;font-weight:600 !important}
.fz-sub .menu_contenu:hover a.vsmenu{color:var(--fz-sub-fg) !important}
.fz-sub .menu_contenu a.vsmenu::after{content:"";position:absolute;inset:0}
.fz-sub .vsmenudisabled{color:var(--fz-sub-fg-dim) !important;opacity:.6}
.fz-sub .menu_titre img,.fz-sub .menu_contenu img{filter:none}

/* Collapsible sub-menus (any depth) : fusion.js re-nests the left-menu rows so every
   node with deeper children becomes a .fz-subhead immediately followed by its
   .fz-subsub panel. The panel folds/unfolds (height + opacity) with the head's state;
   a chevron shows it. fz-subopen lives on the HEAD so nesting works. */
.fz-subsub{max-height:0;opacity:0;overflow:hidden;transition:max-height .24s ease,opacity .2s ease}
.fz-subhead.fz-subopen + .fz-subsub{opacity:1}
.fz-sub .fz-subhead{cursor:default}
.fz-sub .menu_titre.fz-subhead,.fz-sub .menu_contenu.fz-subhead{padding-right:30px !important}
.fz-subhead > .fz-subchev{
	position:absolute;right:4px;top:50%;z-index:2;display:flex;align-items:center;justify-content:center;
	width:24px;height:24px;border-radius:var(--fz-radius);transform:translateY(-50%);font-size:10px;
	color:var(--fz-sub-fg-dim);cursor:pointer;transition:transform .2s ease,background .15s ease,color .15s ease}
.fz-subhead > .fz-subchev:hover{background:var(--fz-sub-hover);color:var(--fz-sub-fg)}
.fz-subhead.fz-subopen > .fz-subchev{transform:translateY(-50%) rotate(90deg)}

/* Favorites (bookmark module) section */
#fz-fav .fz-head .fz-ic{color:var(--fz-star)}
#fz-fav a{display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:var(--fz-radius);
	color:var(--fz-nav-fg) !important;text-decoration:none;font-size:13px;white-space:nowrap;overflow:hidden}
#fz-fav a:hover{background:var(--fz-nav-hover);color:var(--fz-nav-hover-fg) !important}
#fz-fav a .fa-star,#fz-fav .fas{color:var(--fz-star) !important}

/* Footer (help/version + user) */
#fz-foot{flex:0 0 auto;padding:8px;position:relative}
#fz-foot .blockvmenuhelp,#fz-foot #blockvmenuhelp{background:none !important;border:0 !important;
	padding:0 6px 6px !important;font-size:11px}
#fz-foot a{color:var(--fz-nav-fg-dim) !important}
#fz-user{display:flex;align-items:center;gap:10px;padding:6px 0;border-radius:var(--fz-radius);min-width:0}
#fz-user .login_block_user,#fz-user .login_block_elem{
	display:flex;align-items:center;gap:10px;color:var(--fz-nav-fg) !important;
	width:100%;min-width:0;height:auto !important;line-height:normal !important;float:none !important}
/* toggle (on the sidebar colour) = white text, no underline */
#fz-user .login-dropdown-a,#fz-user .login-dropdown-a span,#fz-user .atoploginusername{
	color:var(--fz-nav-fg) !important;text-decoration:none !important}
/* dropdown popup (on a light surface) = dark text, including inner spans/labels */
#fz-user .dropdown-menu,#fz-user .dropdown-menu a,#fz-user .dropdown-menu span,
#fz-user .dropdown-menu b,#fz-user .dropdown-menu p,#fz-user .dropdown-menu small,
#fz-user .dropdown-menu .button-top-menu-dropdown{color:var(--fz-text) !important}
#fz-user img.photouserphoto,#fz-user .photologin{width:34px;height:34px;box-sizing:border-box;border-radius:50%;object-fit:cover}

/* ---------- collapsed (icons only) ---------- */
html.fz-collapsed #fz-brand .fz-brand-name,
html.fz-collapsed #fz-brand .fz-version,
html.fz-collapsed .fz-head .fz-label,
html.fz-collapsed .fz-head .fz-chev,
html.fz-collapsed .fz-sec-label,
html.fz-collapsed .fz-sub,
html.fz-collapsed #fz-fav a .fz-favlabel,
html.fz-collapsed #fz-foot .blockvmenuhelp,
html.fz-collapsed #fz-user .atoploginusername,
html.fz-collapsed #fz-user .hideonsmartphone{display:none !important}
/* Match every collapsed navigation hit area to the 40x40 search button. Hide
   only the scrollbar chrome (scrolling remains enabled), otherwise its gutter
   shifts the navigation boxes left while the tools stay centred. */
@media only screen and (min-width:921px){
	html.fusion.fz-collapsed #fz-nav{
		padding-left:0;padding-right:0;scrollbar-width:none;-ms-overflow-style:none}
	html.fusion.fz-collapsed #fz-nav::-webkit-scrollbar{width:0;height:0}
	html.fusion.fz-collapsed .fz-group{width:40px;margin:1px auto}
	html.fusion.fz-collapsed .fz-head{
		width:40px;height:40px;box-sizing:border-box;padding:0;gap:0;justify-content:center}
}
html.fz-collapsed .fz-head .fz-ic{font-size:17px}
/* Keep the avatar left edge fixed while the sidebar width animates; the 8px footer
   padding + 8px link padding naturally center the 34px image in the 66px rail. */
#fz-user,
#fz-user .login_block_user,
#fz-user .login_block_elem,
#fz-user #topmenu-login-dropdown{gap:0}
#fz-user .login_block_elem{padding:0 !important}
/* collapsed user : show ONLY the centered avatar (hide the name + any caret/arrow) */
html.fz-collapsed #fz-user .login-dropdown-a > *:not(img):not(.photo){display:none !important}
html.fz-collapsed #fz-user .dropdown-toggle::after,
html.fz-collapsed #fz-user .dropdown-toggle::before{content:none !important;display:none !important;border:0 !important}

/* collapsed tools : stack icons in the narrow rail; search becomes a flyout */
html.fz-collapsed #fz-tools{flex-direction:column;align-items:center;gap:6px;justify-content:center}
html.fz-collapsed #fz-search-toggle{display:flex}
html.fz-collapsed #fz-tools .fz-tools-extra{margin-left:0;flex-direction:column;gap:6px}
html.fz-collapsed #fz-tools .fz-tools-search{
	position:absolute;left:calc(100% + 6px);top:6px;width:0;opacity:0;overflow:visible;
	pointer-events:none;transition:width .22s ease,opacity .18s ease;z-index:1600}
html.fz-collapsed.fz-search-open #fz-tools .fz-tools-search{width:264px;opacity:1;pointer-events:auto}
/* search flyout and +/star dropdowns are mutually exclusive in collapsed mode */
html.fz-collapsed.fz-search-open #fz-tools .fz-tools-extra .dropdown-menu{display:none !important}
/* the flyout itself is the light card (content-agnostic: works for the select2
   combo or a plugin search) */
html.fz-collapsed.fz-search-open #fz-tools .fz-tools-search{
	background:var(--fz-surface);border:1px solid var(--fz-border);border-radius:var(--fz-radius);
	box-shadow:0 14px 36px rgba(0,0,0,.4);padding:8px;box-sizing:border-box;
	max-height:calc(100vh - var(--fz-topbar-h) - 20px);overflow:visible}
html.fz-collapsed #fz-tools .fz-tools-search #blockvmenusearch::before{color:var(--fz-text-dim)}
html.fz-collapsed #fz-tools .fz-tools-search .select2-selection--single,
html.fz-collapsed #fz-tools .fz-tools-search input{
	background:var(--fz-content-bg) !important;border:1px solid var(--fz-border) !important;color:var(--fz-text) !important}
html.fz-collapsed #fz-tools .fz-tools-search input::placeholder{color:var(--fz-text-dim) !important}
html.fz-collapsed #fz-tools .fz-tools-search .search-dropdown-header::before{color:var(--fz-text-dim) !important}
html.fz-collapsed #fz-tools .fz-tools-search .select2-selection__rendered{color:var(--fz-text) !important}
html.fz-collapsed #fz-tools .fz-tools-search .select2-selection__placeholder{color:var(--fz-text-dim) !important}
/* couple the input and its scope list as ONE panel inside the flyout card:
   keep the list ALWAYS in normal flow in collapsed mode (no display toggling), so
   the flyout's own opacity/width transition fades them in AND out TOGETHER — they
   never appear nor disappear one after the other. */
html.fz-collapsed #fz-tools .search-dropdown-body{
	display:block !important;position:static !important;left:auto !important;right:auto !important;top:auto !important;
	margin-top:6px !important;background:none !important;border:0 !important;box-shadow:none !important;
	padding:0 !important;max-height:50vh;overflow:auto}
/* +, star, import dropdowns fly out to the right when collapsed */
html.fz-collapsed #fz-tools .dropdown-menu{left:calc(100% + 6px) !important;right:auto !important;top:0 !important;width:260px !important}
/* ====================================================================== *
 *  PORTRAIT TOP BAR (only shown in narrow / portrait mode)               *
 * ====================================================================== */
#fz-topbar{
	display:none;
	position:fixed;top:0;left:0;right:0;height:var(--fz-topbar-h);z-index:1100;
	background:var(--fz-topbar-bg);border-bottom:1px solid var(--fz-border);
	align-items:center;gap:10px;padding:0 12px;color:var(--fz-topbar-fg);
}
#fz-topbar .fz-burger{background:none;border:0;font-size:18px;color:var(--fz-topbar-fg);cursor:pointer;
	width:38px;height:38px;border-radius:var(--fz-radius);display:flex;align-items:center;justify-content:center}
#fz-topbar .fz-burger:hover{background:rgba(127,127,127,.12)}
#fz-topbar .fz-tb-title{font-weight:700;color:var(--fz-topbar-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
#fz-scrim{position:fixed;inset:0;background:rgba(7,12,25,.5);opacity:0;visibility:hidden;
	transition:opacity .2s ease;z-index:1150}

/* ---------------------------------------------------------------------- *
 *  RESPONSIVE SWITCH  →  narrow / portrait : sidebar becomes a drawer     *
 * ---------------------------------------------------------------------- */
@media only screen and (max-width: 920px){
	html.fusion #fz-topbar{display:flex}
	/* The drawer is parked off-canvas, but a box-shadow paints OUTSIDE the box: its
	   right edge sits exactly on x=0, so a 40px halo was bleeding down the left of the
	   page all the time, drawer closed included. It belongs to the open drawer only. */
	html.fusion #fz-sidebar{transform:translateX(-100%);width:var(--fz-sb-w);box-shadow:none}
	html.fusion.fz-drawer #fz-sidebar{transform:translateX(0);box-shadow:0 0 40px rgba(0,0,0,.45)}
	html.fusion.fz-drawer #fz-scrim{opacity:1;visibility:visible}
	/* THE offset of the portrait layout: .fz-collapsed / .fz-peek keep the container at
	   the collapsed rail's width, and those selectors carry one class MORE than the
	   plain portrait one — so they won the cascade here, media query or not, and the
	   page sat 66px to the right of the screen with no rail to justify it. The state
	   classes survive in portrait because the collapsed preference is remembered. */
	html.fusion body#mainbody #id-container,
	html.fusion.fz-collapsed body#mainbody #id-container,
	html.fusion.fz-peek body#mainbody #id-container{
		margin-left:0 !important;width:100% !important;padding-top:var(--fz-topbar-h) !important}
	html.fusion body#mainbody #id-right,
	html.fusion.fz-collapsed body#mainbody #id-right,
	html.fusion.fz-peek body#mainbody #id-right{margin-left:0 !important}
	/* never use the icons-only mode in portrait */
	html.fusion.fz-collapsed #fz-sidebar{width:var(--fz-sb-w)}
	html.fusion.fz-collapsed #fz-brand .fz-brand-name,
	html.fusion.fz-collapsed .fz-head .fz-label,
	html.fusion.fz-collapsed .fz-head .fz-chev,
	html.fusion.fz-collapsed .fz-sec-label,
	html.fusion.fz-collapsed .fz-sub,
	html.fusion.fz-collapsed #fz-tools .fz-tools-search{display:block !important}
	html.fusion.fz-collapsed #fz-user .atoploginusername,
	html.fusion.fz-collapsed #fz-user .hideonsmartphone{display:inline-block !important}
	html.fz-collapsed .fz-head{justify-content:flex-start;padding:9px 12px}
	html.fusion.fz-collapsed #fz-user{padding:6px;justify-content:flex-start}
	html.fusion.fz-collapsed #fz-user #topmenu-login-dropdown{width:100%;padding:0 5px}
	html.fusion.fz-collapsed #fz-user #topmenu-login-dropdown > a{
		width:100%;height:auto;justify-content:flex-start}
	html.fusion #fz-brand .fz-collapse{display:none}
	/* tools always inline in the drawer (no loupe / no flyout in portrait) */
	html.fusion #fz-search-toggle{display:none !important}
	html.fusion #fz-tools{flex-direction:column !important;align-items:stretch !important}
	html.fusion #fz-tools .fz-tools-search{position:static !important;width:100% !important;opacity:1 !important;pointer-events:auto !important}
	html.fusion #fz-tools .fz-tools-search #topmenu-global-search-dropdown{background:none !important;border:0 !important;
		box-shadow:none !important;padding:0 !important;width:100% !important}
	html.fusion #fz-tools .fz-tools-extra{flex-direction:row !important;justify-content:space-evenly !important}
	/* Same leak as the container margin above: `fz-collapsed` survives in portrait, and
	   the folded-rail flyout pins the "search into …" scope list open IN FLOW
	   (`display:block !important; position:static !important`, by design there, so the
	   field and its list fade together). In the drawer that list was therefore
	   permanently sitting between the field and the menu, pushing everything down, with
	   its own 50vh scroll clipping its first entry. Portrait puts it back to what it is
	   everywhere else: hidden, and shown as a flyout only while the field has focus. */
	html.fz-collapsed #fz-tools .search-dropdown-body,
	html.fusion #fz-tools .search-dropdown-body{display:none !important}
	html.fusion #fz-tools #topmenu-global-search-dropdown:focus-within .search-dropdown-body{
		display:block !important;position:absolute !important;
		left:8px;right:8px;top:52px;margin-top:0 !important;z-index:1500;
		padding:12px 14px !important;background:var(--fz-surface) !important;
		border:1px solid var(--fz-border) !important;border-radius:var(--fz-radius);
		box-shadow:0 12px 34px rgba(0,0,0,.4) !important;
		max-height:40vh;overflow:auto}
	html.fusion #fz-tools .dropdown-menu{left:8px !important;right:8px !important;width:auto !important;top:calc(100% + 6px) !important}
}

/* On very small screens, drop the content side padding a bit */
@media only screen and (max-width: 480px){
	html.fusion #id-right{padding-left:6px !important;padding-right:6px !important}
}

/* ====================================================================== *
 *  Controls and dropdowns                                                *
 * ====================================================================== */

/* Contrast safety : force readable text on every nav entry */
.fz-head,.fz-head .fz-label{color:var(--fz-nav-fg) !important;opacity:1}
.fz-head .fz-ic{opacity:1}
.fz-head .fz-ic,.fz-head .fz-ic i,.fz-head .fz-ic span,.fz-head .fz-ic [class*="fa-"],
.fz-head .fz-ic::before,.fz-head .fz-ic i::before,.fz-head .fz-ic span::before{
	color:var(--fz-menu-icon-normal) !important;opacity:1}
.fz-group.fz-active > .fz-head,.fz-group.fz-active > .fz-head .fz-label{color:var(--fz-nav-active-fg) !important}
.fz-group.fz-active > .fz-head .fz-ic,
.fz-group.fz-active > .fz-head .fz-ic i,
.fz-group.fz-active > .fz-head .fz-ic span,
.fz-group.fz-active > .fz-head .fz-ic [class*="fa-"],
.fz-group.fz-active > .fz-head .fz-ic::before,
.fz-group.fz-active > .fz-head .fz-ic i::before,
.fz-group.fz-active > .fz-head .fz-ic span::before{color:var(--fz-menu-icon-active) !important}
.fz-head:hover,.fz-head:hover .fz-label{color:var(--fz-nav-hover-fg) !important}
.fz-head:hover .fz-ic,
.fz-head:hover .fz-ic i,
.fz-head:hover .fz-ic span,
.fz-head:hover .fz-ic [class*="fa-"],
.fz-head:hover .fz-ic::before,
.fz-head:hover .fz-ic i::before,
.fz-head:hover .fz-ic span::before{color:var(--fz-menu-icon-hover) !important}
.fz-group.fz-active > .fz-head .fz-chev{color:var(--fz-nav-active-fg) !important}
.fz-head:hover .fz-chev{color:var(--fz-nav-hover-fg) !important}

/* Color-mode segmented control */
.fz-modes{display:flex;gap:4px;margin:6px;padding:3px;border-radius:var(--fz-radius);background:rgba(255,255,255,.06)}
@media only screen and (min-width: 921px){
	html.fz-collapsed .fz-modes{
		display:block;position:relative;width:40px;height:40px;margin:4px auto 8px;padding:0;
		background:transparent;border-radius:var(--fz-radius);outline:none;overflow:visible;z-index:1510;cursor:pointer}
	html.fz-collapsed .fz-modes::before{
		content:"\f042";font-family:"Font Awesome 5 Free";font-weight:900;
		position:absolute;inset:0;display:grid;place-items:center;
		width:40px;height:40px;border-radius:var(--fz-radius);background:rgba(255,255,255,.10);
		color:var(--fz-nav-fg-dim);font-size:16px;line-height:1;box-sizing:border-box}
	html.fz-collapsed[data-fz-mode="light"] .fz-modes::before{content:"\f185"}
	html.fz-collapsed[data-fz-mode="dark"] .fz-modes::before{content:"\f186"}
	html.fz-collapsed .fz-modes:hover::before,
	html.fz-collapsed .fz-modes:focus-visible::before,
	html.fz-collapsed .fz-modes.fz-modes-open::before{background:var(--fz-nav-hover);color:var(--fz-nav-hover-fg)}
	html.fz-collapsed .fz-modes::after{
		content:"";position:absolute;left:calc(100% + 8px);bottom:0;width:124px;height:44px;
		background:var(--fz-surface);border:1px solid var(--fz-border);border-radius:var(--fz-radius);
		box-shadow:0 12px 34px rgba(0,0,0,.4);opacity:0;transform:translateX(-4px);
		pointer-events:none;transition:opacity .15s ease,transform .15s ease}
	html.fz-collapsed .fz-modes.fz-modes-open::after{opacity:1;transform:translateX(0)}
	html.fz-collapsed .fz-modes .fz-mode-btn{
		position:absolute;top:0;left:calc(100% + 12px);z-index:1;
		width:36px;height:36px;min-width:36px;display:block;padding:0;border-radius:var(--fz-radius);
		background:transparent;color:var(--fz-text-dim);opacity:0;transform:translateX(-4px);
		pointer-events:none;line-height:1;box-sizing:border-box;
		transition:opacity .15s ease,transform .15s ease,background .15s ease,color .15s ease}
	html.fz-collapsed .fz-modes .fz-mode-btn::before{
		content:"\f185";font-family:"Font Awesome 5 Free";font-weight:900;
		position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
		width:18px;height:18px;line-height:18px;text-align:center;font-size:16px}
	html.fz-collapsed .fz-modes .fz-mode-btn[data-mode="auto"]::before{content:"\f042"}
	html.fz-collapsed .fz-modes .fz-mode-btn[data-mode="dark"]::before{content:"\f186"}
	html.fz-collapsed .fz-modes .fz-mode-btn[data-mode="auto"]{left:calc(100% + 52px)}
	html.fz-collapsed .fz-modes .fz-mode-btn[data-mode="dark"]{left:calc(100% + 92px)}
	html.fz-collapsed .fz-modes.fz-modes-open .fz-mode-btn{opacity:1;transform:translateX(0);pointer-events:auto}
	html.fz-collapsed .fz-modes .fz-mode-btn:hover{background:var(--fz-row-hover);color:var(--fz-text)}
	html.fz-collapsed .fz-modes .fz-mode-btn.is-active{background:var(--fz-row-checked);color:var(--fz-text)}
	html.fz-collapsed .fz-modes .fz-mode-btn i{display:none !important}
	html.fz-collapsed .fz-modes .fz-mode-lbl{display:none}
}
.fz-mode-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
	border:0;background:none;color:var(--fz-nav-fg-dim);padding:6px 4px;border-radius:var(--fz-radius);font-size:12px;
	font-family:inherit;transition:background .15s ease,color .15s ease}
.fz-mode-btn:hover{color:var(--fz-nav-fg)}
.fz-mode-btn.is-active{background:var(--fz-nav-active-bg);color:var(--fz-nav-active-fg)}
.fz-mode-btn .fz-mode-lbl{font-size:12px}

/* ---- User dropdown : make it open UPWARD and inside the sidebar ------- */
#fz-user{position:relative}
#fz-user #topmenu-login-dropdown{position:static !important;width:100%;padding:0}
#fz-user #topmenu-login-dropdown > a{
	display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--fz-radius);width:100%;box-sizing:border-box;min-width:0;overflow:hidden;
	color:var(--fz-nav-fg) !important;text-decoration:none}
#fz-user #topmenu-login-dropdown > a:hover{background:var(--fz-nav-hover);color:var(--fz-nav-hover-fg) !important}
#fz-user #topmenu-login-dropdown > a:hover .atoploginusername{color:var(--fz-nav-hover-fg) !important}
#fz-user .photouserphoto,#fz-user .dropdown-user-image{width:34px !important;height:34px !important;
	box-sizing:border-box !important;border-radius:50% !important;object-fit:cover}
#fz-user .atoploginusername{
	color:var(--fz-nav-fg) !important;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
/* the panel itself */
#fz-user .dropdown-menu{
	position:absolute !important;left:0;right:0;bottom:54px;top:auto !important;box-sizing:border-box;
	/* exactly as wide as the rail: the left/right anchors give the width, so the panel
	   stays inside the sidebar instead of spilling over the content area. The footer
	   row below is tight enough for its three buttons to fit on one line at that width. */
	width:auto !important;min-width:0 !important;
	max-height:70vh;overflow:auto;
	display:none;background:var(--fz-surface);color:var(--fz-text);
	border:1px solid var(--fz-border);border-radius:var(--fz-radius);box-shadow:0 12px 34px rgba(0,0,0,.45);
	padding:10px;z-index:1500;font-size:13px}
#fz-user #topmenu-login-dropdown.open .dropdown-menu{display:block !important}
#fz-user .dropdown-menu a,#fz-user .dropdown-menu .button-top-menu-dropdown{color:var(--fz-text) !important}
/* eldy hard-codes light #f9f9f9 / #f4f4f4 backgrounds + black text on these blocks,
   which breaks the themed (esp. dark) panel — re-skin them with theme variables. */
#fz-user .dropdown-menu .user-header{text-align:center;border-bottom:1px solid var(--fz-border);padding-bottom:8px;margin-bottom:8px;
	background:transparent !important;color:var(--fz-text) !important}
/* Card / virtual card / logout stay on ONE row. eldy lays them out with floats
   (.pull-left ×2 + .pull-right + .clearboth), which in a panel this narrow drops
   the logout onto a second line: the row is a nowrap flex line instead, the two
   labelled buttons share the leftover width and the square virtual-card button
   keeps its size. Labels ellipsis rather than wrap if the panel gets narrower. */
#fz-user .dropdown-menu .user-footer{display:flex;gap:5px;flex-wrap:nowrap;align-items:center;
	border-top:1px solid var(--fz-border);
	/* the bundled base pads the footer by 10px all round; drop the side padding so the
	   row uses the full panel width and aligns with the header above it */
	padding:8px 0 0;margin-top:8px;background:transparent !important}
#fz-user .dropdown-menu .user-footer > div{flex:1 1 auto;min-width:0;margin:0 !important}
#fz-user .dropdown-menu .user-footer > .pull-left + .pull-left{flex:0 0 auto} /* icon-only virtual card */
#fz-user .dropdown-menu .user-footer .clearboth{display:none}                 /* float clearer, useless here */
#fz-user .dropdown-menu .user-footer .button-top-menu-dropdown{border:1px solid var(--fz-border) !important;
	background:var(--fz-content-bg) !important;color:var(--fz-text) !important;
	border-radius:var(--fz-radius);height:36px;min-width:32px;box-sizing:border-box;padding:0 8px;text-decoration:none;
	display:inline-flex;align-items:center;justify-content:center;gap:4px;line-height:1;
	width:100%;max-width:100%;white-space:nowrap;overflow:hidden;margin-left:0 !important}
#fz-user .dropdown-menu .user-footer .button-top-menu-dropdown > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
#fz-user .dropdown-menu .user-footer .button-top-menu-dropdown:hover{background:var(--fz-row-hover) !important;color:var(--fz-text) !important}
#fz-user .dropdown-menu .pull-left,#fz-user .dropdown-menu .pull-right{float:none !important;display:flex}
html.fz-collapsed #fz-user .dropdown-menu{
	/* floats next to the icon rail, so it has no anchors to size it: give it the width the
	   panel has when the rail is expanded (rail minus the 8px padding of #fz-foot) */
	left:calc(100% + 8px) !important;right:auto !important;bottom:0;
	width:calc(var(--fz-sb-w) - 16px) !important;
	max-width:calc(100vw - var(--fz-sb-w-collapsed) - 20px)}
@media only screen and (max-width: 920px){
	html.fusion.fz-collapsed #fz-user .dropdown-menu{
		left:6px !important;right:6px !important;bottom:54px;width:auto !important;max-width:none}
}

/* ---- Native global search, shown inline in the sidebar --------------- */
#fz-tools #topmenu-global-search-dropdown{position:static;width:100%;min-width:0;display:block}
#fz-tools #topmenu-global-search-dropdown > a.dropdown-toggle{display:none} /* hide magnifier toggle */
#fz-tools #topmenu-global-search-dropdown .dropdown-menu.dropdown-search{
	display:block !important;position:static !important;background:none !important;border:0 !important;
	box-shadow:none !important;padding:0 !important;margin:0 !important;width:auto !important;min-width:0 !important}
#fz-tools .search-dropdown-header{position:relative;padding:0}
#fz-tools .search-dropdown-header::before{content:"\f002";font-family:"Font Awesome 5 Free";font-weight:900;
	position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--fz-nav-fg-dim);font-size:13px;pointer-events:none}
#fz-tools #top-global-search-input{
	width:100%;box-sizing:border-box;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.06);
	border-radius:var(--fz-radius);padding:8px 10px 8px 32px;color:var(--fz-nav-fg);font-size:13px;outline:none}
#fz-tools #top-global-search-input::placeholder{color:var(--fz-nav-fg-dim)}
/* force every inner wrapper of the native search to span its full slot width
   (.fz-tools-search itself is excluded: its width is flex/flyout-controlled) */
#fz-tools #topmenu-global-search-dropdown,
#fz-tools #topmenu-global-search-dropdown .dropdown-menu.dropdown-search,
#fz-tools #top-menu-action-search,
#fz-tools .search-dropdown-header,
#fz-tools #top-global-search-input{width:100% !important;max-width:none !important;min-width:0 !important;box-sizing:border-box !important}
#fz-tools #top-menu-action-search,
#fz-tools .search-dropdown-header{margin:0 !important;padding:0 !important;display:block !important}
@media only screen and (max-width: 920px){
	html.fusion.fz-collapsed #fz-tools #top-global-search-input{
		background:rgba(255,255,255,.07);color:var(--fz-nav-fg);border-color:rgba(255,255,255,.06)}
	html.fusion.fz-collapsed #fz-tools #top-global-search-input::placeholder{color:var(--fz-nav-fg-dim)}
}
/* the per-type scope list appears only while the field is focused.
   It anchors to #fz-tools (position:relative): the inner search wrappers collapse
   to ~0 height (Bootstrap's .dropdown-menu is out of flow) so % offsets are
   unreliable. top is therefore a fixed offset = #fz-tools padding-top (10px) +
   search field height (~36px) + 6px gap = the field's bottom + 6px. It overlays
   the +/star row below the field, which is the wanted "just under the field" look. */
#fz-tools .search-dropdown-body{display:none}
#fz-tools #topmenu-global-search-dropdown:focus-within .search-dropdown-body{
	display:block;position:absolute;left:8px;right:8px;top:52px;z-index:1500;padding:12px 14px;
	background:var(--fz-surface);color:var(--fz-text);border:1px solid var(--fz-border);border-radius:var(--fz-radius);
	box-shadow:0 12px 34px rgba(0,0,0,.4);max-height:60vh;overflow:auto;width:auto !important;box-sizing:border-box}
@media only screen and (min-width: 921px){
	html.fz-collapsed #fz-tools #topmenu-global-search-dropdown:focus-within .search-dropdown-body{
		position:static !important;left:auto;right:auto;top:auto;margin-top:8px;padding:4px 0 0;
		background:transparent;border:0;border-radius:0;box-shadow:none;max-height:none;overflow:visible}
}
#fz-tools .global-search-item{display:flex !important;align-items:center;gap:8px;width:100%;text-align:left;
	background:none;border:0;cursor:pointer;padding:7px 10px;margin:0;border-radius:var(--fz-radius);color:var(--fz-text);font-size:13px}
#fz-tools .global-search-item .pictofixedwidth{
	flex:0 0 28px;width:28px !important;min-width:28px;max-width:28px;
	display:inline-flex !important;align-items:center;justify-content:center;text-align:center !important;
	margin:0 !important;padding:0 !important;line-height:1 !important}
#fz-tools .global-search-item img.pictofixedwidth,
#fz-tools .global-search-item svg.pictofixedwidth{
	height:20px !important;object-fit:contain}
#fz-tools .global-search-item:hover,#fz-tools .global-search-item:focus{background:var(--fz-row-hover)}

/* ---- Tool icons (quick-add +, bookmark star, module builder, …) --------
   eldy gives these wrappers assorted paddings (.atoplogin → 4px, .login_block_elem
   → 3/4px + inline style) and nests some one level deeper, so the buttons came out
   different widths and off-centre. Reset all that, keep every direct child shrink-
   wrapped, and make the clickable element a uniform 40x40 centred button — at any
   nesting depth. */
#fz-tools .fz-tools-extra > *{flex:0 0 auto}
#fz-tools .fz-tools-extra .dropdown{position:static}
#fz-tools .fz-tools-extra .atoplogin,
#fz-tools .fz-tools-extra .login_block_elem,
#fz-tools .fz-tools-extra .inline-block,
#fz-tools .fz-tools-extra .dropdown{margin:0 !important;padding:0 !important}
/* Dimmed: the icons inside these links are `color:inherit`, so THIS is what actually sets
   their colour (quick add, bookmarks, builder, print). Hover/open below light them back up. */
#fz-tools .fz-tools-extra a.dropdown-toggle,
#fz-tools .fz-tools-extra .login_block_elem > a{color:var(--fz-nav-fg-dim) !important;font-size:15px;
	width:40px;height:40px;display:flex;align-items:center;justify-content:center;
	border-radius:var(--fz-radius);text-decoration:none;box-sizing:border-box}
#fz-tools .fz-tools-extra a.dropdown-toggle:hover,
#fz-tools .fz-tools-extra .login_block_elem > a:hover{background:var(--fz-nav-hover);color:var(--fz-nav-hover-fg) !important}
#fz-tools .fz-tools-extra .open > a.dropdown-toggle{background:var(--fz-nav-hover);color:var(--fz-nav-hover-fg) !important}
/* Some top-right tools keep eldy's .atoplogin color, computed for the old top bar.
   Once moved into Fusion's sidebar they must follow the sidebar foreground. */
#fz-tools .fz-tools-extra .atoplogin,
#fz-tools .fz-tools-extra .atoplogin:hover,
#fz-tools .fz-tools-extra .open > a.dropdown-toggle [class*="fa"],
#fz-tools .fz-tools-extra a.dropdown-toggle [class*="fa"],
#fz-tools .fz-tools-extra .login_block_elem > a [class*="fa"]{
	color:inherit !important;opacity:1;text-decoration:none !important}
/* neutralize the per-glyph padding/margin eldy puts on the icon spans */
#fz-tools .fz-tools-extra a.dropdown-toggle > [class*="fa-"],
#fz-tools .fz-tools-extra .login_block_elem > a > [class*="fa-"]{margin:0 !important;padding:0 !important;line-height:1}
#fz-tools .fz-tools-extra .helppresentcircle{display:none !important} /* stray help arrow overlay */
#fz-tools .dropdown-menu{
	position:absolute !important;left:8px;right:8px;top:calc(100% + 6px) !important;bottom:auto;box-sizing:border-box;
	width:auto !important;min-width:0 !important;max-height:62vh;overflow:auto;padding:6px;
	background:var(--fz-surface);color:var(--fz-text);border:1px solid var(--fz-border);
	border-radius:var(--fz-radius);box-shadow:0 12px 34px rgba(0,0,0,.4);z-index:1500}
#fz-tools #topmenu-quickadd-dropdown .dropdown-menu{padding:0 !important}
/* compact every inner row */
#fz-tools .dropdown-menu br{display:none !important}
#fz-tools .dropdown-menu .dropdown-body,
#fz-tools .dropdown-menu .quickadd-body,
#fz-tools .dropdown-menu .bookmark-body{
	border-top:0 !important;border-bottom:0 !important}
/* eldy hard-codes light #f9f9f9 backgrounds on the bookmark header/footer, which
   breaks the themed (esp. dark) panel — blend them into the panel surface. */
#fz-tools .dropdown-menu .bookmark-header,
#fz-tools .dropdown-menu .dropdown-header,
#fz-tools .dropdown-menu .bookmark-footer{background:transparent !important;color:var(--fz-text) !important;border-color:var(--fz-border) !important}
#fz-tools #topmenu-quickadd-dropdown .dropdown-body,
#fz-tools #topmenu-quickadd-dropdown .quickadd-body,
#fz-tools #topmenu-quickadd-dropdown .dropdown-quickadd-list{
	border:0 !important;box-shadow:none !important;outline:0 !important}
#fz-tools #topmenu-quickadd-dropdown .quickadd-body{padding:12px 14px !important;box-sizing:border-box}
#fz-tools .dropdown-menu a,#fz-tools .dropdown-menu .top-menu-dropdown-link,
#fz-tools .dropdown-menu .dropdown-item,#fz-tools .dropdown-menu button.dropdown-item{
	display:flex !important;align-items:center;gap:8px;width:100%;box-sizing:border-box;text-align:left;
	padding:7px 10px !important;margin:0 !important;border:0;background:none;border-radius:var(--fz-radius);
	color:var(--fz-text) !important;text-decoration:none;font-size:13px;line-height:1.3 !important;cursor:pointer}
#fz-tools .dropdown-menu a:hover,#fz-tools .dropdown-menu .dropdown-item:hover{background:var(--fz-row-hover)}
#fz-tools .dropdown-menu .dropdown-search-input{width:100%;box-sizing:border-box;padding:8px 10px;margin:0 0 6px;
	border:1px solid var(--fz-border);border-radius:var(--fz-radius);background:var(--fz-surface);color:var(--fz-text);font-size:13px}
#fz-tools .dropdown-menu hr,#fz-tools .dropdown-menu .divider{margin:6px 0;border-color:var(--fz-border)}

/* Favorites links inherit readable color */
#blockvmenubookmarks a,#blockvmenubookmarks span{color:var(--fz-nav-fg) !important}

/* ====================================================================== *
 *  Custom thin scrollbars (sidebar, dropdowns, and whole app)            *
 * ====================================================================== */
/* Sidebar : light thumb on the dark navy */
#fz-nav,#fz-tools .dropdown-menu,#fz-tools .search-dropdown-body,#fz-user .dropdown-menu{
	scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
#fz-nav::-webkit-scrollbar,#fz-tools .dropdown-menu::-webkit-scrollbar,
#fz-tools .search-dropdown-body::-webkit-scrollbar,#fz-user .dropdown-menu::-webkit-scrollbar{width:8px;height:8px}
#fz-nav::-webkit-scrollbar-track{background:transparent}
#fz-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:var(--fz-radius);border:2px solid transparent;background-clip:padding-box}
#fz-nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.34);background-clip:padding-box;border:2px solid transparent}

/* Whole application content : themed thin scrollbars */
html.fusion #id-right,html.fusion #id-container,html.fusion body#mainbody,
html.fusion .div-table-responsive,html.fusion .div-table-responsive-no-min{
	scrollbar-width:thin;scrollbar-color:var(--fz-text-dim) transparent}
html.fusion ::-webkit-scrollbar{width:11px;height:11px}
html.fusion ::-webkit-scrollbar-track{background:transparent}
html.fusion ::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--fz-text-dim) 55%,transparent);
	border-radius:var(--fz-radius);border:3px solid transparent;background-clip:padding-box}
html.fusion ::-webkit-scrollbar-thumb:hover{background:var(--fz-text-dim);background-clip:padding-box;border:3px solid transparent}
/* keep the navy sidebar's own scrollbars on the light-thumb rule above */
#fz-sidebar ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);background-clip:padding-box;border:2px solid transparent}

/* ====================================================================== *
 *  DASHBOARD GRID (fusion-dashboard.js)                                   *
 *  Dolibarr's two hard-coded widget columns become rows of freely sized   *
 *  widgets: the board is 192 fine tracks wide and each widget carries its *
 *  width (--fz-cw tracks) and height (--fz-ch). Widgets flow and wrap, so *
 *  one sitting above another is just what the widths produce. Everything  *
 *  here only exists once the script has moved the widgets, so nothing     *
 *  below can affect a page where the grid did not take over.              *
 * ====================================================================== */

/* Hide the native columns while the grid is being built. fusion.js drops this
   class after 3s no matter what, so a failed script can never hide the page. */
html.fusion.fz-dash-boot .twocolumns{visibility:hidden}
/* The emptied native columns stay in the DOM: core's inline script still queries
   them, and removing them would break its "add widget" / "close widget" code. */
html.fusion .fz-dash-legacy{display:none !important}

html.fusion #fz-dash{
	--fz-dash-gap:16px;
	display:flex;flex-direction:column;gap:var(--fz-dash-gap);
	position:relative;padding-bottom:4px}
html.fusion #fz-dash .fz-dash-grid{
	display:grid;grid-template-columns:repeat(192,minmax(0,1fr));
	grid-auto-rows:8px;
	column-gap:0;row-gap:0;align-items:start;position:relative}
/* Edit-mode ruler: a fine 192-column / 8px grid plus the useful equal-width
   fractions. It is an inert overlay, so drag, resize and widget controls keep the
   whole pointer surface. Labels sit in the gap above the board. */
html.fusion #fz-dash .fz-dash-guides{display:none}
html.fusion #fz-dash.fz-dash-edit .fz-dash-guides{
	display:block;position:absolute;z-index:2;inset:0;overflow:visible;pointer-events:none;
	--fz-guide-fine:color-mix(in srgb,var(--fz-text-dim) 10%,transparent);
	--fz-guide-major:color-mix(in srgb,var(--fz-text-dim) 48%,transparent);
	background-image:
		repeating-linear-gradient(to right,var(--fz-guide-fine) 0,var(--fz-guide-fine) 1px,transparent 1px,transparent .5208333333%),
		repeating-linear-gradient(to bottom,var(--fz-guide-fine) 0,var(--fz-guide-fine) 1px,transparent 1px,transparent 8px)}
html.fusion #fz-dash .fz-dash-guide{
	position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--fz-guide-major)}
html.fusion #fz-dash .fz-dash-guide-label{
	position:absolute;top:-17px;left:0;transform:translateX(-50%);
	display:flex;align-items:center;justify-content:center;height:15px;min-width:24px;padding:0 3px;
	box-sizing:border-box;border:1px solid var(--fz-border);border-radius:4px;
	background:var(--fz-surface);color:var(--fz-text-dim);
	font-size:9px;font-weight:700;line-height:1;white-space:nowrap}
/* THE rule of the whole feature: a widget is a rectangle ON the board — a start and a
	span on both axes, straight out of the four numbers the layout stores. 192
	fluid tracks across, eight-pixel units down. minmax(0,1fr) above is what lets a wide
   table shrink instead of blowing the board apart, which is how the content keeps
   adapting to the width it is given even though the placement is explicit. */
html.fusion #fz-dash .fz-dash-cell{
	grid-column:calc(var(--fz-cx,0) + 1) / span var(--fz-cw,96);
	grid-row:calc(var(--fz-cy,0) + 1) / span var(--fz-cu,40);
	/* the stored height, minus the gap the next widget starts after */
	--fz-ch:calc(var(--fz-cu,40) * 8px - var(--fz-dash-gap));
	min-width:0;position:relative;
	margin:0 calc(var(--fz-dash-gap) / 2) var(--fz-dash-gap)}
/* Half a gap on each adjacent widget preserves the visual 16px gutter without
   making all 191 fine grid tracks carry a gap of their own. */
html.fusion #fz-dash .fz-dash-cell.fz-at-left-edge{margin-left:0}
html.fusion #fz-dash .fz-dash-cell.fz-at-right-edge{margin-right:0}
/* the widget being carried rides over the others, which are free to sit under it:
   an explicitly placed grid item may overlap, and the drop is what sorts it out */
html.fusion #fz-dash .fz-dash-cell.fz-dash-moving{z-index:7}
html.fusion #fz-dash.fz-dash-dragging{user-select:none}
html.fusion #fz-dash.fz-dash-dragging .fz-dash-cell{transition:none !important}
html.fusion #fz-dash.fz-dash-edit .fz-dash-grip{cursor:move}
html.fusion #fz-dash .fz-dash-cellinner{min-width:0}
/* A pinned height resizes THE WIDGET, not the slot holding it. The height has to be
   carried all the way down to `table.boxtable`: div.box has no background of its own,
   so stopping there stretches an invisible box and leaves the visible card floating
   at its natural height, with the resize handle stranded at the corner of the empty
   space below it. The table is made a flex child so it takes the remaining height,
   and the box scrolls whatever does not fit — inside the widget's frame, not beside
   it. The script also fires a window resize event afterwards, which is what chart
   libraries listen to in order to redraw at the new size. */
html.fusion #fz-dash .fz-dash-cell.fz-has-height{height:var(--fz-ch)}
html.fusion #fz-dash .fz-dash-cell.fz-has-height > .fz-dash-cellinner{height:100%;overflow:hidden}
html.fusion #fz-dash .fz-dash-cell.fz-has-height > .fz-dash-cellinner > .box{
	height:100%;overflow:auto;box-sizing:border-box;display:flex;flex-direction:column}
/* The native bottom border belongs to the table's last cell. A fixed-height chart
   can extend that cell past the clipped viewport, and a canvas can paint over a
   border placed on .box. Draw the frame last, on the grid cell itself. */
html.fusion #fz-dash .fz-dash-cell.fz-has-height.fz-dash-adaptive::after{
	content:"";position:absolute;z-index:6;inset:0;box-sizing:border-box;
	border:1px solid transparent;border-bottom-color:var(--fz-border);
	border-radius:var(--fz-radius);pointer-events:none}
/* An adaptive drawing uses the height offered by the card. Avoid a scrollbar on
   its outer box: rounding differences of one or two pixels would expose one even
   though the drawing itself already fits the viewport. */
html.fusion #fz-dash .fz-dash-cell.fz-has-height.fz-dash-adaptive > .fz-dash-cellinner > .box{
	overflow:hidden;box-sizing:border-box}
/* Keep Dolibarr's native table layout. The row containing the drawing absorbs
   the remaining height; summary rows below it retain their natural height. */
html.fusion #fz-dash .fz-dash-cell.fz-has-height.fz-dash-adaptive table.fz-dash-adaptive-table > tbody > tr.fz-dash-grow-row > td{
	box-sizing:border-box;height:100%;min-height:0;vertical-align:top}
html.fusion #fz-dash .fz-dash-cell.fz-has-height.fz-dash-adaptive table.fz-dash-adaptive-table > tbody > tr:not(.fz-dash-grow-row) > td{
	height:auto}
/* The height is passed down the marked chain (see buildCell) in percent, NOT by
   making the row's <td> a flex
   container: `display:flex` takes the cell out of table layout (the table then wraps it
   in an anonymous cell), its `height:100%` stops claiming the row, and the leftover
   height goes to the empty footer row instead — which is the band of white the chart
   was floating above. Chart.js is configured `responsive: true, maintainAspectRatio:
   false`, so it redraws into whatever height the chain ends up giving it. */
html.fusion #fz-dash .fz-dash-cell.fz-has-height.fz-dash-adaptive .fz-dash-grow-node{
	box-sizing:border-box;height:100%;min-height:0;max-height:none}
/* an intermediate wrapper passes the height on the same way it received it */
html.fusion #fz-dash .fz-dash-cell.fz-has-height.fz-dash-adaptive div.fz-dash-grow-node{
	position:relative;display:flex;flex-direction:column}
/* THE reason a chart grew but never shrank: a table row is never shorter than the
   content it holds, so the canvas propped the row open at its largest size ever, and
   Chart.js — which measures the canvas's PARENT — kept reading that floor. Taking the
   drawing out of flow removes the floor: the row is then sized by the table alone, and
   the canvas follows it down as well as up. `min-height` guards the collapse to zero
   this would otherwise allow on a row that holds nothing else. */
html.fusion #fz-dash .fz-dash-cell.fz-has-height.fz-dash-adaptive tr.fz-dash-grow-row > td{
	position:relative;min-height:60px}
html.fusion #fz-dash .fz-dash-cell.fz-has-height.fz-dash-adaptive canvas.fz-dash-grow-node,
html.fusion #fz-dash .fz-dash-cell.fz-has-height.fz-dash-adaptive .fz-dash-grow-node > canvas{
	position:absolute;inset:0;
	width:100% !important;height:100% !important;min-height:0 !important;max-height:none !important}
html.fusion #fz-dash .fz-dash-cell.fz-has-height > .fz-dash-cellinner > .box > table.boxtable{
	flex:1 1 auto;min-height:0;height:100%}

/* Remote Clocking in a narrow dashboard cell. Keep the native title and the
   Fusion window button on one line, then use the resized body height to center
   the complete clock/action group instead of leaving it attached to one edge. */
html.fusion #fz-dash .fz-dash-remoteclocking{container-type:inline-size}
html.fusion #fz-dash .fz-dash-cell.fz-dash-remoteclocking > .fz-dash-cellinner > .box{
	overflow-x:hidden}
html.fusion #fz-dash .fz-dash-remoteclocking table.boxtable{
	table-layout:fixed;width:100% !important;max-width:100%;min-width:0}
html.fusion #fz-dash .fz-dash-remoteclocking tr.box_titre{
	height:44px !important}
html.fusion #fz-dash .fz-dash-remoteclocking tr.box_titre > th{
	position:relative;box-sizing:border-box;max-width:0;overflow:hidden;
	vertical-align:middle;padding-right:38px !important}
html.fusion #fz-dash .fz-dash-remoteclocking tr.box_titre > th > .tdoverflowmax400{
	display:block;float:none !important;width:100%;max-width:none !important;min-width:0;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.fusion #fz-dash .fz-dash-remoteclocking tr.box_titre > th > .boxclose{
	position:absolute;top:50%;right:8px;transform:translateY(-50%);
	display:flex;align-items:center;justify-content:center;float:none !important;
	width:22px;min-width:22px;margin:0 !important;white-space:nowrap}
html.fusion #fz-dash .fz-dash-remoteclocking .fz-dash-expand{margin:0}
html.fusion #fz-dash .fz-dash-cell.fz-has-height.fz-dash-remoteclocking table.boxtable > tbody > tr:last-child > td{
	vertical-align:middle}
html.fusion body#mainbody #fz-dash .fz-dash-cell.fz-has-height.fz-dash-remoteclocking table.boxtable > tbody > tr:last-child > td > .tm-widget-container{
	display:flex;height:100%;min-height:0;width:100%;box-sizing:border-box;
	flex-direction:column;align-items:center;justify-content:center;justify-content:safe center;
	overflow-x:hidden;padding:12px 14px}
html.fusion #fz-dash .fz-dash-remoteclocking .tm-clock-wrapper{
	width:100%;max-width:280px;min-width:0;margin:0 auto;box-sizing:border-box}
html.fusion #fz-dash .fz-dash-remoteclocking .tm-analog-clock,
html.fusion #fz-dash .fz-dash-remoteclocking .tm-digital-clock,
html.fusion #fz-dash .fz-dash-remoteclocking .tm-current-date,
html.fusion #fz-dash .fz-dash-remoteclocking .tm-exit-time,
html.fusion #fz-dash .fz-dash-remoteclocking .tm-remaining-time{
	margin-left:auto;margin-right:auto;text-align:center}
html.fusion #fz-dash .fz-dash-remoteclocking .tm-button-container,
html.fusion #fz-dash .fz-dash-remoteclocking .tm-button-form{
	width:100%;max-width:100%;min-width:0 !important;box-sizing:border-box}
html.fusion #fz-dash .fz-dash-remoteclocking .tm-button{
	display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;min-width:0 !important;
	overflow:hidden;box-sizing:border-box;margin-left:0 !important;margin-right:0 !important}
@container (max-width:200px){
	html.fusion #fz-dash .fz-dash-remoteclocking tr.box_titre > th{
		padding-left:8px !important;padding-right:32px !important}
	html.fusion #fz-dash .fz-dash-remoteclocking tr.box_titre > th > .tdoverflowmax400{
		width:110px;max-width:110px !important}
	html.fusion #fz-dash .fz-dash-remoteclocking tr.box_titre > th > .boxclose{
		right:5px}
	html.fusion body#mainbody #fz-dash .fz-dash-cell.fz-has-height.fz-dash-remoteclocking table.boxtable > tbody > tr:last-child > td > .tm-widget-container{
		padding:10px 8px}
}
/* Inside that stretched table, the content row is the one that must absorb the extra
   height — the title row keeps its own. */
html.fusion #fz-dash .fz-dash-cell.fz-has-height table.boxtable > tbody > tr:last-child > td{
	height:100%;vertical-align:top}
/* Give a single content block the height of the row, so it can pass it on to what
   it contains. Do not apply this to every direct child: widgets may contain a KPI
   followed by a chart, and stretching the KPI to 100% would push the chart below
   the clipped card. A chart that sizes itself is excluded as well. */
html.fusion #fz-dash .fz-dash-cell.fz-has-height table.boxtable > tbody > tr:last-child > td > div:only-child:not(.is-stretched){
	display:flex;flex-direction:column;justify-content:flex-start;height:100%;min-height:0}
/* An inline SVG chart is a drawing with a fixed viewBox: CSS can scale it, never
   re-lay it out. Given the full width and capped at the height available, a widget
   shorter than the drawing scales it down whole instead of cropping it.
   A widget TALLER than the drawing is the module's business, not the theme's: only
   the code that drew the chart can fill that height without distorting its labels.
   A module can switch its chart to preserveAspectRatio="none" and counter-scale
   what must keep its shape; a chart that marks itself `.is-stretched` is therefore
   left entirely alone here.
   Scoped to the chart level (a direct child of the content cell) so the icons living
   deeper inside tables are left alone, and to .fz-has-height so a widget on automatic
   height is untouched. */
html.fusion #fz-dash .fz-dash-cell.fz-has-height table.boxtable > tbody > tr:last-child > td > svg,
html.fusion #fz-dash .fz-dash-cell.fz-has-height table.boxtable > tbody > tr:last-child > td > div:only-child:not(.is-stretched) > svg{
	width:100%;height:auto;min-height:0;max-height:100%}
html.fusion #fz-dash .fz-dash-cell > .fz-dash-cellinner > .box{margin:0;padding:0}
/* eldy spaces boxes with a margin on the inner table; the grid gap does that now. */
html.fusion #fz-dash .fz-dash-cell table.boxtable{margin-bottom:0}

/* ---- the widget header ----------------------------------------------- */
/* Dolibarr puts a move grip and a close cross in every widget header. The grip is
   driven by the sortable it sets on the two native columns — which no longer hold
   anything — so it is a dead control here. The cross is one misclick away from
   removing a widget: removal belongs to edit mode, where the widget toolbar offers
   it. Both are hidden but KEPT in the DOM: the cross is what core bound its own
   removal handler to, and that is what the toolbar button clicks.
   The script does not rely on these rules alone: it MOVES both controls into
   .fz-dash-native inside the widget, so they are out of the header whatever the
   context — the dialog, a stale stylesheet, a box from a third-party module. */
html.fusion .fz-dash-native{display:none !important}
html.fusion #fz-dash .boxhandle,
html.fusion #fz-dash [id^="imgclose"],
html.fusion .fz-dash-popup .boxhandle,
html.fusion .fz-dash-popup [id^="imgclose"],
html.fusion .fz-dash-popup .fz-dash-expand{display:none !important}
/* In their place, the button that opens the widget in a Dolibarr window. */
html.fusion #fz-dash .fz-dash-expand{
	display:inline-flex;align-items:center;justify-content:center;
	width:22px;height:22px;padding:0;margin-left:6px;vertical-align:middle;
	border:0;border-radius:var(--fz-radius);background:transparent;
	color:inherit;opacity:.55;cursor:pointer;font-size:12px;
	transition:opacity .15s ease,background .15s ease}
html.fusion #fz-dash .fz-dash-expand:hover,
html.fusion #fz-dash .fz-dash-expand:focus-visible{
	opacity:1;background:color-mix(in srgb,currentColor 14%,transparent)}
/* The widget rendered inside the dialog keeps its own scrolling, not the page's. */
html.fusion .fz-dash-popup{padding:0}
html.fusion .fz-dash-popup > .box{margin:0;padding:0;overflow-x:auto}
/* jQuery UI computes an absolute position from the document. Fusion's fixed side
   shell can offset that result, especially on very wide screens. Anchor widget
   dialogs to the viewport itself so their margins are genuinely symmetrical. */
html.fusion .fz-dash-widget-dialog{
	position:fixed !important;
	top:50% !important;
	left:50% !important;
	right:auto !important;
	bottom:auto !important;
	transform:translate(-50%,-50%);
	display:flex !important;
	flex-direction:column;
	box-sizing:border-box;
	margin:0 !important;
	overflow:hidden !important;
	width:min(90vw,1400px) !important;
	max-width:94vw !important;
	max-height:88vh !important}
html.fusion .fz-dash-widget-dialog > .ui-dialog-titlebar{
	flex:0 0 auto}
html.fusion .fz-dash-widget-dialog > .ui-dialog-content{
	flex:1 1 auto !important;
	min-height:0 !important;
	height:auto !important;
	box-sizing:border-box;
	padding-left:0 !important;
	max-height:calc(88vh - 48px) !important;
	overflow:auto !important}
@media (max-width:820px){
	html.fusion .fz-dash-widget-dialog{
		width:94vw !important;
		max-height:90vh !important}
	html.fusion .fz-dash-widget-dialog > .ui-dialog-content{
		max-height:calc(90vh - 48px) !important}
}

/* ---- controls, revealed only in edit mode ---------------------------- */
html.fusion #fz-dash .fz-dash-bar{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
/* The native "add widget" form, moved onto the toolbar line: sits left, buttons right */
html.fusion #fz-dash .fz-dash-bar #addbox{margin:0 auto 0 0;display:inline-flex;align-items:center;gap:6px}
html.fusion #fz-dash .fz-dash-bar #addbox .boxcombo{margin:0}
html.fusion #fz-dash .fz-dash-btn{
	display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;
	border:1px solid var(--fz-border);border-radius:var(--fz-radius);
	background:var(--fz-surface);color:var(--fz-text);font-size:12px;cursor:pointer;
	transition:background .15s ease,border-color .15s ease}
html.fusion #fz-dash .fz-dash-btn:hover{background:var(--fz-border)}
html.fusion #fz-dash.fz-dash-edit .fz-dash-toggle{
	background:var(--colorbackhmenu1,#2563eb);border-color:transparent;color:#fff}
html.fusion #fz-dash .fz-dash-reset,
html.fusion #fz-dash .fz-dash-done,
html.fusion #fz-dash .fz-dash-celltools{display:none}
html.fusion #fz-dash.fz-dash-edit .fz-dash-reset,
html.fusion #fz-dash.fz-dash-edit .fz-dash-done{display:inline-flex}

/* Edit mode lighting up every control of every widget at once is unreadable. The
   space is reserved (so nothing jumps), but a toolbar only becomes visible on the
   widget it acts upon — hovered, or holding the focus. */
html.fusion #fz-dash.fz-dash-edit .fz-dash-celltools{
	visibility:hidden;opacity:0;transition:opacity .12s ease}
html.fusion #fz-dash.fz-dash-edit .fz-dash-cell:hover > .fz-dash-celltools,
html.fusion #fz-dash.fz-dash-edit .fz-dash-cell:focus-within > .fz-dash-celltools{
	visibility:visible;opacity:1}

/* Four corner grips resize a widget while the opposite corner remains fixed.
   They straddle the frame so the top grips never cover the header toolbar. */
html.fusion #fz-dash .fz-dash-resize{display:none}
html.fusion #fz-dash.fz-dash-edit .fz-dash-resize{
	display:flex;align-items:center;justify-content:center;
	position:absolute;z-index:5;
	width:22px;height:22px;padding:0;border:0;background:transparent;
	color:var(--fz-text-dim);font-size:14px;
	touch-action:none;                       /* the drag must not scroll the page */
	visibility:hidden;opacity:0;transition:opacity .12s ease}
html.fusion #fz-dash.fz-dash-edit .fz-dash-resize-nw{top:-11px;left:-11px;cursor:nwse-resize}
html.fusion #fz-dash.fz-dash-edit .fz-dash-resize-ne{top:-11px;right:-11px;cursor:nesw-resize}
html.fusion #fz-dash.fz-dash-edit .fz-dash-resize-sw{bottom:-11px;left:-11px;cursor:nesw-resize}
html.fusion #fz-dash.fz-dash-edit .fz-dash-resize-se{right:-11px;bottom:-11px;cursor:nwse-resize}
html.fusion #fz-dash.fz-dash-edit .fz-dash-resize-nw i{transform:rotate(135deg)}
html.fusion #fz-dash.fz-dash-edit .fz-dash-resize-ne i{transform:rotate(-135deg)}
html.fusion #fz-dash.fz-dash-edit .fz-dash-resize-sw i{transform:rotate(45deg)}
html.fusion #fz-dash.fz-dash-edit .fz-dash-resize-se i{transform:rotate(-45deg)}
html.fusion #fz-dash.fz-dash-edit .fz-dash-cell:hover > .fz-dash-resize,
html.fusion #fz-dash.fz-dash-edit .fz-dash-cell:focus-within > .fz-dash-resize{
	visibility:visible;opacity:1}
html.fusion #fz-dash.fz-dash-edit .fz-dash-resize:hover,
html.fusion #fz-dash.fz-dash-edit .fz-dash-resize:focus{color:var(--fz-text)}
/* while a corner is being dragged: no text selection, and no animation racing the pointer */
html.fusion #fz-dash.fz-dash-resizing{user-select:none}
html.fusion #fz-dash.fz-dash-resizing .fz-dash-cell,
html.fusion #fz-dash.fz-dash-resizing .fz-dash-resize{transition:none !important}
html.fusion #fz-dash.fz-dash-resizing-nw,
html.fusion #fz-dash.fz-dash-resizing-se{cursor:nwse-resize}
html.fusion #fz-dash.fz-dash-resizing-ne,
html.fusion #fz-dash.fz-dash-resizing-sw{cursor:nesw-resize}
html.fusion #fz-dash.fz-dash-resizing *{cursor:inherit !important}

/* The widget toolbar sits ON the widget, in its header, where the expand button is
   the rest of the time — the controls belong to the widget, not to the slot around
   it, so they must not float outside its frame. */
html.fusion #fz-dash.fz-dash-edit .fz-dash-celltools{
	display:flex;gap:4px;align-items:center;
	position:absolute;top:7px;right:8px;z-index:4}
html.fusion #fz-dash.fz-dash-edit .fz-dash-expand{display:none}
html.fusion #fz-dash.fz-dash-edit .fz-dash-celltools button{
	display:flex;align-items:center;justify-content:center;
	width:26px;height:26px;padding:0;border:1px solid var(--fz-border);
	border-radius:var(--fz-radius);background:var(--fz-surface);color:var(--fz-text-dim);
	font-size:11px;cursor:pointer}
html.fusion #fz-dash.fz-dash-edit .fz-dash-celltools button:hover{color:var(--fz-text);border-color:var(--fz-text-dim)}
html.fusion #fz-dash.fz-dash-edit .fz-dash-grip{cursor:move}
html.fusion #fz-dash.fz-dash-edit .fz-dash-del:hover{
	color:#fff;background:var(--butactiondeletebg,#b0413e);border-color:transparent}
/* Only the widget being worked on is outlined, and the outline hugs it: at rest,
   edit mode is quiet. */
html.fusion #fz-dash.fz-dash-edit .fz-dash-cell:hover,
html.fusion #fz-dash.fz-dash-edit .fz-dash-cell:focus-within{
	outline:1px dashed var(--fz-border);outline-offset:2px;border-radius:var(--fz-radius)}
/* An emptied board must keep a surface to drop a widget back onto. */
html.fusion #fz-dash.fz-dash-edit .fz-dash-grid{min-height:56px}

/* ---- narrow / portrait ----------------------------------------------- */
/* Same breakpoint as the shell. Below it there is no room to place widgets side by
   side — and a stored y would only produce holes, since every widget is about to
   take the full width. So the board stops being a grid at all: it becomes a plain
   column, in the reading order the cells are rendered in (top to bottom, then left
   to right), each widget back to its natural height. Switching the container to flex
   is what makes grid-column / grid-row inert, rather than trying to override the two
   placements of every cell. */
@media only screen and (max-width:920px){
	/* align-items:stretch is NOT redundant: the landscape rule sets align-items:start
	   for the grid, and in a column flex container the cross axis is the horizontal
	   one — inherited as is, every card would be as wide as its own content instead
	   of the screen. */
	html.fusion #fz-dash .fz-dash-grid{
		display:flex;flex-direction:column;gap:var(--fz-dash-gap);align-items:stretch}
	html.fusion #fz-dash .fz-dash-guides{display:none !important}
	html.fusion #fz-dash .fz-dash-cell{
		margin:0;width:auto;min-width:0;max-width:none}
	/* The widget area must span the screen. The chain that wraps it — div.fiche, then
	   .fichecenter, then .twocolumns — carries the horizontal insets of a desktop
	   layout (div.fiche alone is indented by 44px, a quarter of a phone), and they add
	   up. Everything above the board is flattened, with one 8px gutter kept at the
	   outermost level. The "add a widget" select sits in the same chain, which is why
	   it was inset exactly like the cards. */
	/* the component base indents div.fiche by up to 44px, a tenth of a phone screen */
	html.fusion body#mainbody div.fiche{margin-left:8px !important;margin-right:8px !important}
	/* A widget made of text or rows is best left at its natural height here… */
	html.fusion #fz-dash .fz-dash-cell:not(.fz-dash-adaptive),
	html.fusion #fz-dash .fz-dash-cell.fz-has-height:not(.fz-dash-adaptive){height:auto !important}
	html.fusion #fz-dash .fz-dash-cell.fz-has-height:not(.fz-dash-adaptive) > .fz-dash-cellinner{
		height:auto;overflow:visible}
	/* …but a chart has NO natural height: released the same way it collapses into the
	   strip of squashed labels this rule exists to prevent. A chart widget therefore
	   keeps a definite box — the height it was given on the board, capped so one
	   pinned tall there cannot eat a whole phone screen. Its canvas keeps the
	   out-of-flow fill of the landscape rules, which is what lets it shrink. */
	html.fusion #fz-dash .fz-dash-cell.fz-dash-adaptive.fz-has-height{
		height:min(var(--fz-ch), 45vh) !important}
	/* placing is a landscape gesture: there is nothing to aim at in a single column */
	html.fusion #fz-dash .fz-dash-resize{display:none !important}
}