body {
	--default-font-size: 12px;
	--default-font-family: "Roboto", Helvetica, Arial, sans-serif;
	--default-text-color: #5f5f5f;
	--link-text-color: #5f5f5f;
	--link-text-color-hover: #cd3b62;
	--title-text-color: #0f4873;
	--fields-height: 24px; /* excluding ext fields & fields of the login pages */
	--fields-max-width: 280px;
	--fields-y-padding: 4px; /* rather 4px for select ?? */
	--fields-x-padding: 7px;
	--fields-aside-icon-width: 24px;
	--fields-search-icon-width: 24px;
	--fields-text-color: #090f1f;
	--dds-gutter-x: 1.5rem; /* or 1.5rem like --bs-gutter-x ?? */
	--dds-half-gutter-x: calc(0.5 * var(--dds-gutter-x));
	--vertical-space-btw-blocks: 1.5rem;
	--table-td-padding-x: 4px;
	--table-td-padding-y: 2px;
	--table-th-padding-y: 5px;
	--table-header-bg-color: #43627c;
	--table-footer-bg-color: #e7e7e7; /* for pager/footer */

	/* overwrites bootstrap custom properties */
	--bs-body-color: var(--default-text-color);
	--bs-success: #09c87e;
	--bs-success-rgb: 9, 200, 126;
	--bs-danger: #e90c36;
	--bs-danger-rgb: 233, 12, 54;
	--bs-warning: #ff8025;
	--bs-warning-rgb: 255, 128, 37;
}

html /*, body*/ {
	height: 100%;
	width: 100%;
}
:root {
	font-size: 12px; /* must be equal to --default-font-size - pixel value required for rem values */
}
body {
	/* font-family: var(--default-font-family); */ /* already set in common.css */
	padding-top: 0; /* required for what ? */
}
/*
body, p, td, span, div {
	font-family: Arial;
}
*/

/* body, td, input, select, textarea, span */
body, td, input, select, textarea {
	font-size: var(--default-font-size);
}
span {
	font-size: inherit; /* overwrites INPUT, SELECT, TEXTAREA, SPAN (StyleBase.css) */
}

a {
	color: var(--link-text-color);
	cursor: pointer;
}
a:hover {
	/* color: #E55536 !important; */
	color: var(--link-text-color-hover);
}

iframe {
	width: 100%;
	height: 100%; /* TODO : TO BE CHECKED */
}

img {
	cursor: default; /* overwrites curso:pointer in common.css */
}

legend {
	float: unset; /* reset float:left set by bootstrap _reboot.scss */

	/* style for ext legend (fieldssets labels) */
	background: #ffffff;
	width: auto;
	padding: 0 4px;
	border-bottom: 0;
	margin-bottom: 5px !important;
}

select {
	border: 1px solid #cdcdcd;
	background-color: #ffffff;
	color: var(--fields-text-color);
	margin: 0;
	border-radius: 4px;
	width: 100%;
}
select:not(:disabled) {
	cursor: pointer;
}
select:not(:disabled):where(:hover, :focus) {
	border-color: #4b83b2;
}
select:focus-visible,
select:focus {
	outline: none;
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
select:disabled {
	border-color: #c8c8c8;
	background-color: #f8f8f8;
	color: #888888;
}
/* V6R3 - Au cas où (sur IE8 notamment) les select ne soient pas bootstrapisés */
body.ie select { /* ! TODO : to be checked */
	background: #FFF !important;
	border: 1px solid #93B5CE !important;
	height: var(--fields-height);
}

input {
	border: 1px solid #cdcdcd;
	color: var(--fields-text-color);
	border-radius: 4px;
}
input:focus-visible {
	outline: 0; /* remove default black outline */
}
input:not(:where([type="checkbox"],[type="radio"],[type="image"])) {
	padding: var(--fields-y-padding) var(--fields-x-padding);
}
input:not(:disabled):where(:hover, :focus) {
	border-color: #4b83b2;
}
input:not(:disabled):where(:focus-visible, :focus) {
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
/* https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete */
input:-webkit-autofill,
input:-webkit-autofill:where(:hover, :focus, :active) {
	-webkit-box-shadow: 0 0 0 var(--fields-height) white inset !important;
}
/* input:is(:disabled, :read-only) { => :read-only has some strange side effects and is applied on input[type="image"] such as big search button which is not even readonly... */
input:disabled {
	cursor: default;
	border-color: #c8c8c8;
	background-color: #f8f8f8;
	color: #888888;
}
input:not(.x-form-text,.x-form-field):where([type="text"], [type="password"], [type="email"], [type="number"], [type="date"]) { /* ⚠️ it is important to exclude ext fields, otherwise their dynamic width computing would be affected.. */
	width: 100%;
	height: var(--fields-height);
}
input:not(.x-form-text,.x-form-field,[type="image"]):has(+ img, + input[type="image"]) { /* ⚠️ the img may be search img : ctx-search.png, ctx-search-on.png, or datetimepicker field : calendar.png, or <input type="image"> with pencil-on.png, ... */ /* ⚠️ :not(.x-form-text,.x-form-field) plays a double role here : it increases the specificity of this declaration and make it stronger than .form-control→width:100%  +  it is required to make the ext fields not affected by this width, otherwise dynamic width computing would be affected.. */
	width: calc(100% - var(--fields-aside-icon-width)); /* just to prevent the button-image to pe pushed outside the common parent container (<td> most of the time) */
	margin-right: 2px;
}
input:not(.x-form-text,.x-form-field):has(+ img[src*="ctx-search"]) { /* ⚠️ may be ctx-search.png OR ctx-search-on.png on hover */
	width: calc(100% - var(--fields-search-icon-width)); /* just to prevent the search icon to pe pushed outside the common parent container (<td> most of the time) */
	margin-right: 2px;
}

input:where([type="checkbox"],[type="radio"]) {
	/* accent-color: #0f4873; */
}
input:where([type="checkbox"],[type="radio"]):not(:disabled) {
	cursor: pointer;
	accent-color: #0f4873;
}
input:where([type="checkbox"],[type="radio"]):disabled {
	cursor: default;
	accent-color: #757575;
	/* color seems to affected by something else there though.. */
}
input[type="checkbox"]:focus-visible,
input[type="checkbox"]:focus,
input[type="radio"]:focus-visible,
input[type="radio"]:focus {
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

textarea:disabled {
	cursor: default;
	border-color: #c8c8c8;
	background-color: #f8f8f8;
	color: #888888;
}

.form-control {
	border: 1px solid #cdcdcd;
	color: var(--fields-text-color);
	border-radius: 4px;
	padding: var(--fields-y-padding) var(--fields-x-padding);
}
.form-control:where(select) {
	background: red !important; /* the "form-control" bootstrap class should never be used on a select tag. Instead use the dedicated "form-select" class */
}
.form-control:where(input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"]) {
	width: 100%;
}
.form-control:focus-visible,
.form-control:focus {
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* .form-select not appliable to the following components : EXT dds:DDSSelectBox */
.form-select {
	height: var(--fields-height);
	line-height: calc(var(--fields-height) - (2 * var(--fields-y-padding) + 2px)); /* improve vertical centering - (+2px for borders) */
	color: var(--fields-text-color);
	border: 1px solid #cdcdcd;
	padding: var(--fields-y-padding) 2rem var(--fields-y-padding) var(--fields-x-padding); /* 1px/4px as for inputs - 2rem to prevent collision between text and chevron */
	background-position: right 0.5rem center; /* adjust the position of the chevron */

	width: 100%; /* not tested */
	display: inline-block; /* for uniformity with ".form-control" */
	margin-top: 1px; /* for uniformity with ".form-control" */
	margin-bottom: 1px; /* for uniformity with ".form-control" */
}
body .form-select:is(select) { /* body & :is() are only used here to increase specificity. required to overwrite box-sizing value "from div.x-panel *" */
	box-sizing: border-box; /* for height not be be increased because of vertical padding */
}
.form-select:not(:disabled):where(:hover, :focus) {
	border-color: #4b83b2;
}
.form-select:disabled {
	cursor: default;
	border-color: #c8c8c8;
	background-color: #f8f8f8;
	color: #888888;
	background-blend-mode: difference; /* makes the chevron icon lighter */
}


/* + cf .width-fields-max-width in "DDS utility classes" section */

/* CUSTOM MODIFIERS for form-control/form-select/input/select */
body :is(input, select, textarea):is(.form-control, .form-select).form-width-xs {
	width: 60px; /* 7 chars */
}
body :is(input, select, textarea):is(.form-control, .form-select).form-width-sm {
	width: 120px; /* OK for calendar_datetime - 16 chars */
}
body :is(input, select, textarea):is(.form-control, .form-select).form-width-md {
	width: 160px;
}
body :is(input, select, textarea):is(.form-control, .form-select).form-width-lg {
	width: 200px;
}
body :is(input, select, textarea):is(.form-control, .form-select).form-width-xl {
	width: 240px;
}
body :is(input, select, textarea):is(.form-control, .form-select).form-width-3 {
	width: 25%;
	max-width: unset; /* overwrites var(--fields-max-width) */
}
body :is(input, select, textarea):is(.form-control, .form-select).form-width-6 {
	width: 50%;
	max-width: unset; /* overwrites var(--fields-max-width) */
}
body :is(input, select, textarea):is(.form-control, .form-select).form-width-12 {
	width: 100%;
	max-width: unset; /* overwrites var(--fields-max-width) */
}


/* td.td_txt_def :is(input, select, textarea) { */ /* does not target fields in Common/Admin/itf_logs_detail.aspx */
td :is(input, select, textarea) {
	max-width: var(--fields-max-width); /* just to avoid super wide fields on some page with only 1 or 2 search criterias columns */
}
/* td :is(input, select):has(+ img[src*="ctx-search"]) { */
td :is(input, select):is(.form-control,.form-select,input,select):has(+ img, + input[type="image"]) {
	max-width: calc(var(--fields-max-width) - var(--fields-search-icon-width)); /* special case for fields aside a search img-button */
}

/* + cf disabled & readonly states line ~4000 */

td {
	/* padding: 2px 0 2px 8px; */
	padding: var(--table-td-padding-y) var(--table-td-padding-x);
}
th {
	padding: var(--table-th-padding-y) var(--table-td-padding-x);
	font-weight: bold;
}
td, th {
}
.x-panel :is(td, th) {
	/*padding: 0;*/ /* to get the effect of the old very generic reset in Identification/user.ascx. BUT problematic on too many pages.. */
}
:where(table, tr, thead, tfoot, tbody).no-vertical-padding :is(td, th) {
	padding-top: 0;
	padding-bottom: 0;
}
tfoot td {
	background-color: var(--table-footer-bg-color);
}




/* *** ext.axd SUPERCHARGE *** */

.ext-el-mask { /* overlay mask behind ext popins */
	background-color: #000000; /* grey by default */
	opacity: 0.5;
}
.x-btn button {
	font: normal var(--default-font-size) var(--default-font-family); /* overwrites : normal 11px tahoma, arial, helvetica, sans-serif; */
	color: var(--default-text-color);
}
.x-fieldset legend {
	font: bold var(--default-font-size) var(--default-font-family); /* overwrites : bold 11px tahoma, arial, helvetica, sans-serif; */
	/* color: var(--default-text-color); */
	color: var(--title-text-color);
}
.x-toolbar td, .x-toolbar span, .x-toolbar input, .x-toolbar div, .x-toolbar select, .x-toolbar label {
	font: normal var(--default-font-size) var(--default-font-family); /* overwrites : normal 11px arial, tahoma, helvetica, sans-serif; */
}
.x-form-cb-label {
	top: 1px; /* 1px instead of 2px */
}
.ext-webkit .x-small-editor .x-form-field,
.x-small-editor .x-form-field {
	font: normal var(--default-font-size) var(--default-font-family); /* overwrites : normal 11px arial,tahoma,helvetica,sans-serif; */
}
.x-tbar-page-number {
	width: 30px; /* re-apply default value from ext.axd (30px), overwritten by .form-control declarations */
}

/* used on DSD/Calendar/Calendar.aspx */
.x-date-inner a {
	cursor: pointer;
	font: normal 11px var(--default-font-family); /* overwrites : normal 11px arial,tahoma,helvetica,sans-serif; */
	text-decoration: none;
}
.x-date-inner a :where(span, em) {
	cursor: pointer; /* overwrites .x-unselectable * => cursor:default */
}



/* *** Scripts/Ext.Net.css SUPERCHARGE *** */

.x-form-cb-label {
	font-size: inherit;
}




/* *** DSD/Style/Ext.Net.css SUPERCHARGE *** */

body .x-form-field {
	font-size: inherit;
	font-family: var(--default-font-family);
}
body .x-form-item {
	font-size: inherit;
	font-family: var(--default-font-family);
}




/* *** Bootstrap SUPERCHARGE *** */

.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
	--bs-gutter-x: var(--dds-gutter-x); /* overwrites default BS 1.5rem */
	padding-left: var(--bs-gutter-x); /* instead of gutter/2 */
	padding-right: var(--bs-gutter-x); /* instead of gutter/2 */
}
.container-fluid:has(+ .container-fluid) {
	margin-bottom: var(--vertical-space-btw-blocks); /* IN TEST */
}
.row {
	--bs-gutter-x: var(--dds-gutter-x); /* overwrites default BS 1.5rem */
}


/* * Bootstrap modal - sizes * */
.modal {
	/* by default, .modal .modal-dialog has width:auto and max-width:var(--bs-modal-width);. The resulting width depends on the width of the device and on the presence or not of modifier classes such as "modal-sm", "modal-lg" or "modal-xl" */
}
.modal.modal-sm {}
.modal.modal-md {} /* custom */
.modal.modal-lg {}
.modal.modal-xl {}
@media (min-width: 576px) {
	.modal-md { /* custom */
		--bs-modal-width: 580px; /* arbitrary value - applied to .modal-dialog */
	}
}

/* 📝 bootstrap v5 HAS a modifier class called "modal-fullscreen" which has to be adeed on the .MODAL-DIALOG element ! (https://getbootstrap.com/docs/5.3/components/modal/#fullscreen-modal) */
/* let's create a custom version of the modal-fullscreen where the class has to be added at the .MODAL level !!! */

.modal.modal-fullscreen { /* custom class */
	--bs-modal-width: calc(100vw - var(--bs-modal-margin) * 2);
}
.modal.modal-fullscreen .modal-dialog {
	width: calc(100vw - var(--bs-modal-margin) * 2);
	height: calc(100vh - var(--bs-modal-margin) * 2);
	margin: var(--bs-modal-margin) auto;
	max-width: none; /* TO BE TESTED */
}
.modal.modal-fullscreen .modal-content {
	height: 100%;
	border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
	border-radius: var(--bs-modal-border-radius);
}
.modal.modal-fullscreen .modal-body {
	overflow-y: auto;
}

.modal.modal-padding-thick .modal-body {
	padding: calc(var(--bs-modal-padding) * 3);
}
.modal.modal-padding-y-thick .modal-body {
	padding: calc(var(--bs-modal-padding) * 3) var(--bs-modal-padding);
}

/* * Bootstrap modal - z-index * */
.modal {
	/* z-index: var(--bs-modal-zindex); */ /* 1055 : default z-index set by bootstrap */
	--bs-modal-zindex: 3001; /* Unfortunately, we have to change this default z-index value because bootstrap modals have to be displayed over ext windows, and ext windows have to be displayed over the main header (dds_header_and_navbar_2023) */
}
.modal[data-modal-rank="1"] { z-index: calc(var(--bs-modal-zindex) + 1); }
.modal[data-modal-rank="2"] { z-index: calc(var(--bs-modal-zindex) + 2); }
.modal[data-modal-rank="3"] { z-index: calc(var(--bs-modal-zindex) + 3); }
.modal[data-modal-rank="4"] { z-index: calc(var(--bs-modal-zindex) + 4); }
.modal[data-modal-rank="5"] { z-index: calc(var(--bs-modal-zindex) + 5); }

.modal-backdrop {
	/* --bs-backdrop-zindex: 1050; we do not change bootstrap value, instead we change z-index for .dds_header_and_navbar_2023 in order to move it above modal-backdrop */

	/* ⚠️ the problem of the solution described above is that it is not compatible with the constraint to have bootstrap modals always displayed over ext windows.. */
	--bs-backdrop-zindex: 3000; /* Unfortunately, we have to change this default z-index value because bootstrap modals have to be displayed over ext windows, and ext windows have to be displayed over the main header (dds_header_and_navbar_2023) */
}
/* below we use "~" and not "+" because elements such has <div class="modal"> may sometimes slip in between 2 modal-backdrop */
.modal-backdrop.show ~ .modal-backdrop.show,
.modal-backdrop.show ~ .modal-backdrop.show ~ .modal-backdrop.show {
	opacity: 0.01; /* trick to avoid visual modal-backdrops stacking (and getting darker) without breaking click event on it (Only works with modal-backdrops appended in the same html node, usually at the end of the body). Note that if a modal with unclickable backdrop is at the top, it will prevent click events on all backdrops under it */
}

/* * Bootstrap modal - content * */

.modal-dialog { /* auto vertical centering */
	display: flex;
	align-items: center;
	/* height: 100%; */
	min-height: 100%;
	margin-top: 0;
	margin-bottom: 0;
	padding: 1.5rem 0;
}

.modal-body > iframe {
	height: 75vh;
}

.modal-body > div:has(> table) { /* required for information ImageView popin wwhich appears on DSD/Shipment/Shipment_List.aspx when max line result is reached. The purpose is to prevent error message to overflow the modal-body */
	overflow: auto;
}
.modal-body > div > table td { /* required for information ImageView popin wwhich appears on DSD/Shipment/Shipment_List.aspx when max line result is reached. The purpose is to prevent error message to overflow the modal-body */
	word-break: break-word;
}

.modal .modal-header .btn-close {
	width: 2rem;
	height: 2rem;
}
.modal .modal-header.modal-header-empty { /* class added by the openModalWindow method when there is no (or empty) title and the modal is not draggable nor closable */
	display: none;
}

.modal .modal-content {
	box-shadow: 0 3px 13px 0px rgba(0,0,0,0.25);
}



.btn {}
.btn.btn-link {
	padding: 0;
	color: var(--link-text-color);
	vertical-align: baseline;
}
.btn.btn-link:hover {
	color: var(--link-text-color-hover);
}



/* V6R3 - Contenu des Datagrid */
table.GVBasicList td span,
table.GVBasicList td a,
table.GVBasicList td input {
	/* font-size: 11px !important; */
}


/* ------------------------------------------------ */
/* Pour utiliser une navbar bootstrap multi-niveaux */
/* ------------------------------------------------ */
.dropdown-submenu {
	position: relative;
}
.dropdown-submenu > .dropdown-menu {
	top: 0;
	left: 100%;
	margin-top: -6px;
	margin-left: -1px;
	-webkit-border-radius: 0 6px 6px 6px;
	-moz-border-radius: 0 6px 6px;
	border-radius: 0 6px 6px 6px; /**/
}
.dropdown-submenu:hover > .dropdown-menu {
	display: block;
}
.dropdown-submenu > a:after {
	display: block;
	content: " ";
	float: right;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 5px 0 5px 5px;
	border-left-color: #ccc;
	margin-top: 5px;
	margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
	border-left-color: #666666;
}
.dropdown-submenu.pull-left {
	float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
	left: -100%;
	margin-left: 10px;
	-webkit-border-radius: 6px 0 6px 6px;
	-moz-border-radius: 6px 0 6px 6px;
	border-radius: 6px 0 6px 6px; /*behavior: url(../Scripts/ie-compatibility/PIE.htc);*/
}
.dropdown-menu > li > a {
	padding-top: 3px;
	padding-bottom: 3px;
}
.dropdown-menu > li > a:is(:hover, :focus) {
	/* color: #262626; */
	/* text-decoration: none; */
	background-color: #f5f5f5;
	color: inherit;
}




/* Dégradé dans le fond du header */
form.x-border-layout-ct /* body:not(.Login) > form:first-of-type */ {
	/* simple dégradé de fond léger, en haut */
	/*
	background: -webkit-linear-gradient(top, #F1F4FB 0%, #FFFFFF 20px) !important;
	background: -o-linear-gradient(top, #F1F4FB 0%, #FFFFFF 20px) !important;
	background: linear-gradient(to bottom, #F1F4FB 0%, #FFFFFF 20px) !important;
	*/

	/* image de fond légère */
	/*
	background: url(../images/bg_screens/bg1_milky.jpg) !important;
	background-repeat: no-repeat !important;
	background-position: 'center top' !important;
	background-size: 100% !important;
	*/
}

div#PanelCenter > div > div,
div#PanelWest > div > div,
.x-fieldset-header,
div.dds_header_and_navbar,
div#PanelNorth .mytoolbar,
div#PanelNorth .x-panel-body {
	background: transparent !important;
}



/*
BODY {font-size: medium; }
TD {font-size: medium; }
INPUT,SELECT,TEXTAREA,SPAN {font-size: medium; }
*/

/* V6R3 - PAGE DE CONNEXION */
/*
body.Login {
		background-image: url(../images/connexion_background3.jpg);
	background-color: #E0E0F0;
	background-image: -webkit-linear-gradient(top, #F2F2F9 0%, #e0e0f0 100%);
	background-image: -o-linear-gradient(top, #F2F2F9 0%, #e0e0f0 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#F2F2F9), to(#e0e0f0));
	background-image: linear-gradient(to bottom, #F2F2F9 0%, #e0e0f0 100%);
}

	body.Login.ie8 {
		background: #E8E8F4;
	}
	*/

	/* fin V6R3 */


	body.Login tr.Logo img {
		opacity: 0.9;
	}

		body.Login tr.Logo img:hover {
			opacity: 1;
			cursor: pointer;
		}

body.Login input.form-control,
body.Login select
body.Login select.form-select
{
	/* width: 220px !important; */
	width: 220px;
}




.lbl_Info { /* label in .PageInformation */
	white-space: normal !important;
	/* font-size: 13px !important; */
}

#TbUserInfo {
	border: 0 !important;
	position: relative;
	top: 5px;
}
	/* boutons d'action permanents (en haut à droite, au-dessus de la navbar) */
	#TbUserInfo td.x-toolbar-left {
		width: auto;
	}
	#TbUserInfo td.x-toolbar-left button {
		color: #555;
		font-size: var(--default-font-size);
		/*
		padding-left: 4px;
		background-image: none !important;
		*/
	}
	#TbUserInfo td {
		padding: 0;
	}

.btnLogin {
	display: inline-block;
	background: #15467E;
	padding: 5px 18px;
	text-decoration: none !important;
	border-radius: 2px;
	margin-bottom: 10px;
}

	.btnLogin span {
		color: white !important;
		font-size: 14px;
		font-weight: bold;
	}

	.btnLogin:hover {
		background: #004DAA;
		color: white;
		text-decoration: none;
	}











/* *** Elements of PanelNorth *** */
/* (defined in DDSPortal.Master or other masters) */

/* * Navbar * */

/* dds_header_and_navbar has been replaced by dds_header_and_navbar_2023 - (see below in the code) */
div.dds_header_and_navbar {
	background: white;
	width: 100%;
	top: 0;
}
div.dds_header_and_navbar a {
	text-decoration: none !important;
}
div.dds_header_and_navbar .container-fluid {
	padding-right: 0;
	padding-left: 0;
}

.navbar {
	height: 38px !important;
	min-height: inherit;
	margin-bottom: 0 !important;

	--bs-navbar-nav-link-padding-x: 15px; /* by default 0.5rem */
	--bs-navbar-color: #666677;
	--bs-navbar-hover-color: #00072d;
	--bs-navbar-active-color: #666677;
}
body.not-ie8 .navbar { /* pour que sous IE8, le temps que la page se charge (on est par défaut en mode width<768px), la navbar ne soit pas trop grosse (en hauteur)... */
	height: auto !important;
}
/* ...et qu'il n'y ait aucune transition dans le positionnement du contenu de la page */
body.ie8 .navbar-nav > li > a {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

.navbar-header {
}
.navbar-toggle {
	/*display: none;*/
	padding: 7px 8px;
	margin-top: 3px;
	margin-bottom: 3px;
}
.navbar-toggle .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


.navbar-default { /* .navbar */
	/* au cas où il y ait une image de fond */
	background-color: #FAFAFA;
	border-top: 1px solid #E2E2E7;
	border-bottom: 1px solid #E2E2E7;
	border-left: 0 none;
	border-right: 0 none;
}

.navbar-nav {
	--bs-nav-link-padding-y: 8px;
	--bs-nav-link-padding-x: 0.5rem;
	flex-wrap: wrap; /* required to allow a line break when there are too many items in the menu */
}

.navbar-nav .dropdown-menu {
	padding-top: 5px !important; /* !important tag required because of !important tag on Ext.Net.css ul > padding */
	padding-bottom: 5px !important; /* !important tag required because of !important tag on Ext.Net.css ul > padding */
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.navbar-nav .dropdown-menu:not(.dropdown-submenu > .dropdown-menu) {
	/* looks better BUT must NOT affect sub levels */
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	/* border-top-color: transparent; */
}
.navbar-nav .dropdown-menu > li > a {
	white-space: nowrap;
}


.nav-link { /* all links of a nav, top and nested levels */
	--bs-nav-link-font-size: 13px; /* a lil bigger than body font-size */
	padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
}
.navbar-nav .nav-link.active {
	background-color: #e0e4e8;
}


/* icônes dans la barre de menus */
ul.navbar-nav li a span {
	color: #ADB6BC !important;
}

ul.navbar-nav li.active a span {
	color: #475E84 !important;
}

div.banner ul.navbar-nav li a span {
	color: #AAA !important;
	font-weight: normal;
	position: relative;
	top: 2px;
}

/* lien actif dans la navbar (menu ou sous-menu) */
/* -> replaced by native .navbar-nav .nav-link.active
nav.navbar a.aActif {
	background: #E0E4E8 !important;
}
*/

.navbar-default .navbar-nav > li > a:hover,
ul.navbar-nav li a:hover span {
	color: #00072D !important;
}


/* liens tout en haut à droite de l'écran */
.dds-navbar-above {
	margin-top: 8px;
	padding-left: 0;
}
	.dds-navbar-above li a {
		color: #444 !important;
		font-size: 13px;
		margin-right: 10px;
		margin-left: 10px;
	}
	.dds-navbar-above .separ {
		color: #BBB;
	}

.navbar-default .navbar-brand.logo {
	padding-right: 20px;
	padding-top: 6px;
	padding-left: 6px;
}

.navbar-brand.logo_right {
	padding-right: 0;
}

.navbar-default .navbar-brand.app-title {
	font-size: 18px;
	font-weight: bold;
	color: var(--title-text-color) !important;
}


ul.dropdown-menu table td {
	padding: 4px;
}

ul.dds-navbar-above li {
	display: inline;
}

.navbar-collapse, .navbar-header {
	margin: 0 !important;
}

/* cacher les icônes dans la navbar ? */
ul.navbar-nav li a span[class^="icon-"] {
	/* display: none; */
}
/* exceptions */
ul.navbar-nav li.visible_icon a span[class^="icon-"] {
	display: inline-block;
}

ul.navbar-nav a.big-icon-container {
	padding-top: 4px !important;
	max-height: 36px;
	overflow: hidden;
}

ul.navbar-nav li a span.big-icon {
	font-size: 30px;
}
/* ainsi que dans la bannière */
.dds-navbar-above li a span {
	display: none;
}
/* ni les coches */
ul.navbar-nav li a span[class="caret"] {
	display: inline-block;
	color: #666 !important;
}

.nav-tabs {
	border-bottom: 1px solid #CCC;
}
ul.nav-tabs {
	margin-bottom: 5px;
}
	ul.nav-tabs li {
		border-color: #CCC !important;
	}
	.nav-tabs > li > a {
		text-decoration: none !important;
	}

.nav-tabs > li.active > :is(a, a:hover, a:focus) {
	border-color: #CCC #CCC transparent #CCC;
}

:is(li.dropdown, ul.dropdown-menu li) a {
	/* text-decoration: none; */
	/* background-position: 0 3px; */
	/* padding-left: 25px; */ /* increase the padding-left just to visually compensate the presence of the caret at the right side of the text */
}

/* navbar */
@media (min-width: 768px) {
	.navbar {
		border-radius: 0 !important;
		border-color: #D3D8DB !important;
		border-width: 1px 0 !important;
		/* margin: 0 15px 0 15px !important; */
		margin: 0 0 0 0 !important;
		min-height: inherit;
	}

	#dds-navbar-main-content ul.navbar-nav > li > a {
		/* padding-top: 8px; */
		/* padding-bottom: 8px; */
	}
}

@media (max-width: 991px) {
	.navbar-expand-lg .navbar-nav .dropdown-menu {
		border: 0 none;
		background-color: #ebeef1; /* (lighter than #e0e4e8 used for active link) */
	}
	.navbar-expand-lg .nav-item.dropdown .dropdown-menu {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
	.nav-link {
		padding-left: var(--dds-gutter-x);
		padding-right: var(--dds-gutter-x);
	}
}
@media (min-width: 992px) {
	.navbar-expand-lg .navbar-nav > .nav-item > .nav-link:has(.caret) {
		padding-left: calc(var(--bs-navbar-nav-link-padding-x) + 0.3em); /* increase the padding-left just to visually compensate the presence of the caret at the right side of the text */
	}
}

.dropdown-toggle {}
.dropdown-toggle::after {
	/* increase the size of the caret a lil bit */
	border-top: 0.34em solid;
	border-left: 0.34em solid transparent;
	border-right: 0.34em solid transparent;
	border-bottom: 0;
}


li.icon-right-dds {
	margin-left: 20px;
}

/* nom de la personne connectée */
.dds_top_welcome {
	color: #1B5289;
	font-weight: normal !important;
	margin-top: 8px;
	margin-right: 15px;
}

@media (max-width: 600px) {
	.app-title, .logo_right {
		display: none;
	}
}

div.banner .logo_right {
	margin-left: 20px;
}




#DivNavigation {
	/* width: 100%;/* /* inherited from common.css */
}
#DivNavigation.container-fluid, /* (does not happen anymore..) */
.container-fluid > #DivNavigation
{
	box-sizing: border-box; /* because of width:100% */
}

/* ⚠️ .StepsListTable may be hidden by common.js javascript IF breadrcrumb is empty */
#DivNavigation1 {
}

#DivSubNavigation {
	background-color: red !important; /* ! TODO : don't know what is this */
}

/* ⚠️ #TabNavigation2 may be hidden by common.js javascript */
/* ⚠️ #TabNavigation2 may be moved to first place in #DivNavigation1 by common.js javascript */
table#TabNavigation2 { /* used to navigate between steps of the .StepsListTable */
	float: right !important;
	margin-bottom: 10px;
}
table#TabNavigation2:not(.container-fluid table#TabNavigation2) { /* should not happen, at least on DDSPortal.Master */
	margin-right: var(--dds-gutter-x);
}
#TabNavigation2 {
	width: auto; /* overwrites 30% value from common.css */
}
#TabNavigation2 td:not(:has(*)) { /* cells with no element inside */
	padding: 0;
}
#TabNavigation2 td.txtStep {
	width: auto; /* overwrites 100px value from common.css */
}
#TabNavigation2 td.imgStep {
	width: auto; /* overwrites 35px value from common.css */
}
#TabNavigation2 td.imgStep input {
	/* margin-right: 10px; */ /* => replaced by padding on the cells */
}
#TabNavigation2 a {
	white-space: nowrap; /* overwrites same line from common.css - (could be changed to another value if nowrap is probmeatic !) */
}

#TabNavigation2:not(#TabNavigation1 + #TabNavigation2) { /* when #TabNavigation2 is NOT associated with #TabNavigation1. (Tab1+Tab2 : DDS.Web.DSD/Site.Master, DDS.Web.DSD/SiteViewPort_NCS.Master, DDS.Web.Portal/Homepage/MyJob/Master/Filter.Master, DDS.Web.Portal/Homepage/MyJob/Master/QuickSearch.Master) (Tab2 solo : DDSPortal.Master/
	/* */
}

/* kinda secondary steps breadcrumb with steps arrow-ban - used on DSD/UAT/UAT_pages */
/* ⚠️ .StepsListTable may be hidden by common.js javascript */
.StepsListTable {
	margin-bottom: var(--vertical-space-btw-blocks); /* ! IN TEST */
}
#DivNavigation.container-fluid .StepsListTable {
	/* if we want the StepsListTable to take all the width of the screen */
	margin-left: calc(-1 * var(--bs-gutter-x));
	margin-right: calc(-1 * var(--bs-gutter-x));
}
.StepsListTable td {
	padding: 0; /* overwrites default padding */
}
.StepsListTable a:hover {
	color: white !important;
}

div.StepsListTable > table {
}
td.Step_Actif, td.Step_NotActif,
td.Left_Step, td.Right_Step, td.Left_StepNotActif, td.Right_StepNotActif, td.Rail_Actif {
	background-image: none !important;
}
	td.Step_Actif, td.Step_NotActif,
	td.Step_Actif a, td.Step_NotActif a {
		width: 120px !important;
	}
		td.Step_Actif a, td.Step_NotActif a {
			display: table-cell;
			height: 32px;
			vertical-align: middle;
		}

td.Left_Step, td.Left_StepNotActif, td.Right_Step, td.Right_StepNotActif,
td.Rail_NotActif, td.Rail_Actif {
	width: 1px;
	display: none;
}
td.Step_Actif a, td.Step_NotActif a {
	background-color: #43627C;
	background-repeat: no-repeat !important;
	background-position: left -1px !important;
	white-space: nowrap;
}
td.Step_NotActif a {
	background-color: #8699A8;
}
	td.Step_NotActif a:hover {
		background-color: #43627C;
	}
td.Rail_NotActif, td.Rail_Actif {
	padding: 0 !important;
}

/* Dernière cellule des onglets "étapes" */
td.Rail_Empty,
div.StepsListTable > table > tbody > tr > td:last-of-type {
	background-color: #8699A8 !important;
}
td.Step_Actif + td + td + td + td.Step_NotActif a,
td.Step_NotActif:hover + td + td + td + td.Step_NotActif a {
	background-image: url('../images/step-tab-on-off.png') !important;
}
td.Step_NotActif + td + td + td + td.Step_Actif a,
td.Step_NotActif + td + td + td + td.Step_NotActif a:hover {
	background-image: url('../images/step-tab-off-on.png') !important;
}
td.Step_NotActif + td + td + td + td.Step_NotActif a {
	background-image: url('../images/step-tab-off-off.png') !important;
}
td.Step_Actif + td + td + td + td.Step_Actif a,
td.Step_Actif + td + td + td + td.Step_NotActif a:hover,
td.Step_NotActif:hover + td + td + td + td.Step_Actif a {
	background-image: url('../images/step-tab-on-on.png') !important;
}




/* *** Elements of PanelCenter *** */
/* (defined in the views) */


/* Sous-titre d'une page */
.PageInformation {
	margin-top: 0px !important;
	/* margin-left: 11px !important; */
	margin-bottom: var(--vertical-space-btw-blocks) !important;
	float: left;
	width: 750px; /* could maybe be wider */
}

/* Marge gauche uniforme pour tous les éléments d'une page */
/* easy way to apply a left margin equal to a gutter width on all elements which have to be aligned, when theyy have no .container-fluid as direct/indirect predecessor */
ol.breadcrumb:not(.container-fluid ol.breadcrumb),
.PageInformation:not(.container-fluid .PageInformation),
.PageInformation ~ table.DefaultTable:not(.container-fluid .PageInformation ~ table.DefaultTable),
.DefaultSummary ~ table.DefaultTable:not(.container-fluid .DefaultSummary ~ table.DefaultTable),
.DefaultSummary ~ .main_scrollable_zone > table:not(.container-fluid .DefaultSummary ~ .main_scrollable_zone > table), /* .DefaultTable */
.with-margin-left:not(.container-fluid .with-margin-left),
#header > table.DefaultTable:first-of-type:not(.container-fluid #header > table.DefaultTable:first-of-type) {
	/* margin-left: 15px !important; */
	margin-left: var(--dds-gutter-x);
}
	/* pour préserver un alignement parfait entre le .PageInformation et les titres des blocs formulaires de gauche  */
	.DefaultSummary ~ table.DefaultTable td.td_tab_title,
	.DefaultSummary ~ .main_scrollable_zone > table td.td_tab_title {
		padding-left: 0 !important; /* TODO : to be checked */
	}

div#ddstop .PageInformation:not(.container-fluid div#ddstop .PageInformation) { /* should not happen often because .container-fluid should always be present at the top level (or so) of each views + ddstop seems to be removable in most cases.. */
	/* margin-left: 15px !important; */
	margin-left: var(--dds-gutter-x);
}

/* les bandeaux contenus dans une zone décalée sur la droite doivent être décalés sur la gauche, afin qu'ils "collent" au bord gauche de la page */
.PageInformation ~ table.DefaultTable table.DefaultSummary {
	/* margin-left: -15px; */
	margin-left: calc(-1 * var(--dds-gutter-x));
}

/* Idem, au-dessus d'un formulaire Ext.net */
.PageInformationExt:not(.container-fluid .PageInformationExt) {
	/* margin-left: 16px !important; */
	margin-left: var(--dds-gutter-x); /* ! TODO : to be checked */
}


/* table banner at the top of the criterias, generated by components such as <uc1:UAT_band ID="UAT_band1" runat="server" /> */
.DefaultSummary {
}

/* usually criterias table */
table.DefaultTable {
	background-color: transparent !important;
	width: 100%; /* overwrites nasty 98% value from common.css */
	padding: 0; /* overwrites padding:2px from common.css - IN TEST */
}
table.DefaultTable:not(.container-fluid table.DefaultTable) { /* should not happen often because .container-fluid should always be present at the top level (or so) of each views */
	width: calc(100% - var(--dds-gutter-x) * 2);
}
.modal .modal-body table.DefaultTable:not(.container-fluid table.DefaultTable) {
	width: 100%; /* substracted gutters not required inside of modals */
}


/* tableau contenant tous les boutons d'action contextuels à la page */
table.DefaultButton {
	background-color: transparent !important;
	border-bottom: 0;
	border-top: 0;
	/* margin-right: 14px; */
	margin-bottom: 6px; /* IN TEST : add space between RightButtons and .DefaultSummary or .DefaultTable (6px and 10px or greater values because buttons images have some afe space around) */
}
table.DefaultButton:not(.container-fluid table.DefaultButton) { /* should not happen often because .container-fluid should always be present at the top level (or so) of each views */
	/* width: calc(100% - var(--dds-gutter-x) * 2); */
	margin-right: var(--dds-gutter-x);
}
	table.DefaultButton.big_margin_right {
		margin-right: 80px;
	}
	table.DefaultButton.raised {
		/* position: relative; */
		/* top: -8px; */
	}
table.DefaultButton td {
	padding-left: var(--table-td-padding-x); /* reduce default padding */
	/* padding-right: var(--table-td-padding-x); */ /* reduce default padding */
	padding-right: 0; /* reduce it even more ! */
}

table.RightButtons { /* modifier class for .DefaultButton */
	float: right;
	margin-top: 0; /* overwrites div.x-panel-body > div > table */
}
table.RightButtons:not(.container-fluid table.RightButtons) { /* should not happen often because .container-fluid should always be present at the top level (or so) of each views */
	margin-right: var(--dds-gutter-x);
}
.modal .modal-body table.RightButtons:not(.container-fluid table.RightButtons) { /* ":not(.container-fluid table.RightButtons)" required to get higher specificity than "table.RightButtons:not(.container-fluid table.RightButtons)" */
	margin-right: 0; /* margin not required inside of modals (neither above table criterias actually..) */
}
.iframe-popup table.RightButtons:not(.container-fluid table.RightButtons) { /* when the content of the modal is an iframe, the declaration above (.modal .modal-body table.RightButtons) does not work. So we need to use this special one - NOTE 1 : in CSS, it is not possible de determine if an element is inside of an iframe using "iframe .myElement", thid does NOT work, so the "iframe-popup" class has to be added as a first child of the partial for example - NOTE 2: ":not(.container-fluid table.RightButtons)" required to get higher specificity than "table.RightButtons:not(.container-fluid table.RightButtons)" */
	margin-right: 0; /* idem */
}

/* take off useless space taken by empty cells */
table.DefaultButton .tdBtnTabLnkBtn:empty, /* when absolutely nothing */
table.DefaultButton .tdBtnTabLnkBtn:not(:has(*)) /* it may have a space or any text value but no element inside */
{
	display: none;
}

/* on ext views like DSD/Invoice/Preinvoice_list.aspx */
#ActionToolbar .x-toolbar-cell:empty,
#ActionToolbar .x-toolbar-cell:has(.x-toolbar:empty),
/* #ActionToolbar .x-toolbar-cell:has(.x-toolbar:not(:has(*))), */
#ActionToolbar .x-toolbar-right-ct td:has(.x-toolbar-extras-row:empty)
{
	padding-left: 0;
	padding-right: 0;
}

.ButtonsWithMargin input[type="image"] {
	padding-left: 20px;
}


/* seem to be removable in most cases... */
div#ddstop {
	/* margin: 7px 4px; */
	margin: 7px 0; /* IN TEST */
}
/* "Title" class can be on the td or on the title (label) itlsef */
div#ddstop .Title, /* (#ddstop has been removed on many pages..) */
.Title:is(td, label) /* :is used to get stronger than "td.Title" from common.css */
{
	font-weight: 500;
	/* font-size: 1.35rem; */
	font-size: 1.25rem;
}
/* html:not(.x-viewport) is an (imperfect) trick used to target only ddstop in iframe modals.. */
html:not(.x-viewport) div#ddstop {
	/* margin: 0 0 0.5rem 0; */
	margin: 0 0 var(--vertical-space-btw-blocks) 0; /* IN TEST */
}

/* sometimes used instead of #ddstop ... */
div#top {}

div#header {
	margin: 0;
}

.ButtonsTable {
	background-color: transparent;
	color: #444444;
	border-bottom-color: transparent;
	width: auto;
}




/* HOMEPAGE */

#Jobs {
	float: none;
}

/* lignes alertes en homepage */
.GVBasicListAlternatingRowStyle {
	background-color: #F5F5F6;
}


/* Liens de type "My Jobs" en page d'accueil*/
.MyJobLinks td {
	padding: 0 2px !important;
}

td.JobItemBeginning {
	width: 60px !important;
	text-align: right;
}

td.JobItemBeginning {
	/*list-style-type: square;*/
}

.AlertAction {
	margin-bottom: 6px;
	cursor: pointer;
}

.alerts .AlertAction {
	position: relative;
	top: -2px;
}

.alerts .AlertButtons input[type="image"] {
	display: block;
	margin-right: 10px;
}

.alerts .AlertZone {
	margin-top: 15px;
	border: 1px solid #E5E5E5;
	background: #F4F4F4;
	padding: 3px;
}

.AlertAction span {
	text-decoration: underline;
	/* font-size: 12px !important; */
	font-size: var(--default-font-size) !important; /* NOT TESTED YET */
}
.AlertAction:hover span {
	color: #E55536;
	text-decoration: none;
}

div.AlertContent td.JobItemBeginning {
	width: 10px;
	padding-right: 4px;
}

.AlertContent {
	margin: 4px 0 10px 0;
}

.small {
	font-size: 11px !important;
}

/* reprise de la petite flèche Bootstrap accompagnant un lien de type "More criteria"  */
.area_witness {
	padding-left: 15px;
	padding-top: 1px;
	background-image: url(../images/ext-net_new.png) !important;
	background-position: 0 -60px !important;
}

.area_expanded {
	background-position: 0 -75px !important;
}

.area_expand_link {
	/* color: #15428b !important; */
	color: var(--title-text-color);
	/* font-weight: bold !important; */
	/* text-decoration: none !important; */
}

	.area_expand_link:hover {
		text-decoration: underline !important;
	}

td.tdBtnTabImgBtn {
	/* padding-left: 14px; */
	padding-left: var(--table-td-padding-x); /* overwrites common.css */
	margin-left: unset; /* overwrites common.css */
}
td.left_separ {
	padding-left: 14px;
}
td.right_separ {
	padding-right: 18px;
	border-right: 1px solid #CCC;
}


/***************************************************/
/* Compatibilité bootstrap des formulaires Ext.net */
/***************************************************/


/* pour que les formulaires Ext.net se comportent normalement */
div.x-panel, div.x-panel *,
div.x-window, div.x-window *,
div.x-layer, div.x-layer * {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

/* cas particulier pour le panneau "central", qui ne contient pas forcément des composants Ext.net */
div.x-panel#PanelCenter,
div.x-panel#PanelCenter * {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* + cas particulier pour le container-fluid qui n'applique pas la bonne largeur si content-box */
div.x-panel .container-fluid {
	box-sizing: border-box; /* overwrites "div.x-panel *" above */
}

/* ...mais qui peut lui-même en contenir ! (des composants Ext.net) */

div.x-panel#PanelCenter div.x-panel,
div.x-panel#PanelCenter div.x-panel *,
div.x-panel#PanelCenter div.x-window,
div.x-panel#PanelCenter div.x-window *,
div.x-panel#PanelCenter div.x-layer,
div.x-panel#PanelCenter div.x-layer *,
div#PanelWest-xcollapsed,
div#PanelWest-xcollapsed * {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

div#PanelSouth-xcollapsed,
div#PanelSouth-xcollapsed * {
	-webkit-box-sizing: content-box !important;
	-moz-box-sizing: content-box !important;
	box-sizing: content-box !important;
}

.above_more_criteria {
	padding-top: 20px !important;
}

.inline-block {
	display: inline-block;
}

.visibility-hidden {
	visibility: hidden;
}



/* Champs de formulaire ext.net */

/* ⚠️ ext components have box-sizing:contnt-box by default !!! */
/* ⚠️ We leave ext inputs with a box-sizing:content-box and height:14px for now */

.x-form-text {
	margin-top: 0 !important;
	border-radius: 4px;
	/* border: 1px solid #93B5CE; */
	padding: 4px 4px;

	/* height: var(--fields-height); */ /* we do not apply this height because of box-sizing:content-box, 14px must stay applied, we want to keep box-sizing:content-box on ext components for now */
	color: var(--fields-text-color);
	background-color: #ffffff !important; /* must be important in order to overwrite .x-form-text from Ext.Net.css */
}
/* particular case fo some ext inputs we can't set to 100% width. such as : pagination bottom toolbar's inputs (page size), ext autocomplete (= pagination in "x-combo-list") */
.x-form-text:not(.x-tbar-page-number) {
	/* width: 100%; */ /* TODO : we should probably not overwrite the width because of js computing on ext fields */
}
.x-form-text:hover {
	border: 1px solid #4B83B2;
}
.x-form-text:focus,
.x-form-text:focus-visible {
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.x-form-item,
label.x-form-item-label,
span.x-fieldset-header-text,
span.x-panel-header-text {
	/* font-size: 12px !important; */
	font-size: var(--default-font-size) !important; /* NOT TESTED YET */
}

.ext-strict .x-form-text {
	/* ⚠️ We leave ext inputs with a box-sizing:content-box and height:14px for now */
	/* height: 14px; (already set by Ext.Net.css ) */

	/* box-sizing: border-box; */
	/* height: var(--fields-height) !important; */ /* must be important in order to overwrite .ext-strict .x-form-text from Ext.Net.css */
}

.x-form-text:disabled,
textarea.x-form-field:disabled {
	border-color: #DDD !important;
	color: #777;
	cursor: default;
}


/* Petit flèche ("caret") à droite des dropdown lists */
.x-form-field-wrap .x-form-trigger {
	background-image: url(../images/ext_dropdown-caret.png);
}

.x-form-field-trigger-wrap .x-form-trigger {
	margin-top: 3px !important; /* \!important tag required to overwite inline style set by the component */
}

.x-editor-dropdown-list .x-form-field-wrap .x-form-trigger {
	position: relative !important;
}

.x-form-field-wrap img.x-form-arrow-trigger {
	height: 22px !important;
	/* height: var(--fields-height) !important; */ /* ⚠️ We leave ext inputs with a box-sizing:content-box for now */
	margin-top: 0 !important;
	border: 0 !important;
}

/* la classe suivante n'est pas native ext.net, mais est ajoutée en javascript */
.x-form-field-wrap.x-dropdown-list, 
.x-editor-dropdown-list .x-form-field-wrap {
	/*padding: 4px 4px;*/
	/* border: 1px solid #93B5CE; */
	/* border-radius: 4px; */

	border: 1px solid #cdcdcd;
	background-color: #ffffff;
	color: var(--fields-text-color);
	border-radius: 4px;
}

	.x-form-field-wrap.x-dropdown-list:hover,
	.x-form-field-wrap.x-dropdown-list:hover .x-form-field,
	.x-editor-dropdown-list .x-form-field-wrap:hover,
	.x-editor-dropdown-list .x-form-field-wrap:hover .x-form-field {
		/* background: #ECF1F5 !important; */
	}

	.x-form-field-wrap.x-dropdown-list .x-form-field,
	.x-editor-dropdown-list .x-form-field-wrap .x-form-field {
		border: 0 !important;
	}

form#aspnetForm div.x-dropdown-list:where(:hover, :focus),
form#aspnetForm div.x-editor-dropdown-list .x-form-field-wrap:where(:hover, :focus) {
	/* background-color: #ECF1F5 !important; */
	/* border: 1px solid #7998AF; */
	border-color: #4b83b2;
}
/* dans les dropdownlist ext.net, la bordure ne se met pas sur le champs de saisie, mais sur son conteneur */
form#aspnetForm div.x-dropdown-list input[type="text"]:hover,
form#aspnetForm div.x-dropdown-list input[type="text"]:focus,
form#aspnetForm div.x-editor-dropdown-list .x-form-field-wrap input[type="text"] {
	border-width: 0 !important;
}
form#aspnetForm div.x-dropdown-list:focus,
form#aspnetForm div.x-editor-dropdown-list .x-form-field-wrap:focus {
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* ext datepicker, generated by <ext:DateField> */
.x-form-field-wrap:has(.x-form-trigger.x-form-date-trigger) {
	/* ⚠️inline width of the .x-form-field-wrap (set by component) does take into account the margin-left defined below.. so we get a calendar img slightly out of the wrapper */
}
.x-form-field-wrap:has(.x-form-trigger.x-form-date-trigger) img.x-form-date-trigger{
	margin-left: 3px; /* add a lil more space between the datepicker input and its calendar img button */
}

/* conteneurs généraux */

/*
table:is(.DefaultCriterias, .SOMEOTHERCLASSES) {
	width: 100%;
}
*/
table.table-wide {
	width: 100%;
}
table.table-datatable th { /* .table-datatable modifier class used on some ext pages to overwrite old reset still applying on td, th padding */
	padding: var(--table-th-padding-y) var(--table-td-padding-x);
}
table.table-datatable td {
	padding: var(--table-td-padding-y) var(--table-td-padding-x);
}
table td.cell-narrow { /* cell-fit */
	width: 0;
}
table.table-head-alt :where(thead td, th) {
	/* background-color: #555555; */
	/* background-color: #0f4873; */
	background-color: #15467e;
	color: #ffffff;
}

/* div.x-panel-body > div > table { */
table:where(div.x-panel-body > div > table) { /* we use :where just to make specificity not too high for this */
	margin: 10px 4px;
}

#UserLanguageSelector {
	margin: 0 4px !important;
}

.x-form-group-body > div {
	margin: 10px 10px;
}

div.x-panel-body input[type="radio"].x-form-radio,
div.x-panel-body input[type="checkbox"].x-form-checkbox,
input[type="checkbox"] {
	margin-top: 0;
}

/* x-form-radio-group-no-margin-bottom custom modifier class */
.x-form-radio-group.x-form-radio-group-no-margin-bottom .x-form-item {
	margin-bottom: 0;
}

/* .x-form-field-vertically-centered */
.x-form-field-vertically-centered {
	padding-top: 3px;
	padding-bottom: 3px;
}


div.x-panel-body label {
	margin-bottom: auto;
}

div.x-panel-body .x-panel-tbar > div {
	padding: 0;
}

div.x-panel-body > div > table > tbody > tr > td,
div.x-panel-body > div > .container-fluid > table > tbody > tr > td, /* when there is a new .container-fluid in between (ex : on Common/Admin/itf_logs_criterias.aspx) */
td.tdBtnTabImgBtn {
	/*padding: 2px 0 2px 8px;*/ /* we should get rid of this line which is overcomplicated */
}


.x-form-check-wrap input {
	vertical-align: middle;
}

.ext-webkit .x-small-editor .x-form-field-trigger-wrap .x-form-trigger {
	height: 19px !important;
}

div.x-panel [class*="icon-"] {
	font-family: inherit;
}

	div.x-panel [class*="icon-"]:before {
		content: none !important;
	}

/* V6R3 - mise en commentaire : */
/*div.x-panel .x-toolbar-left { width: auto !important; }*/

div.x-panel .x-toolbar-right {
	text-align: right !important;
	/* padding-right: 18px; */
	padding-right: 0;
}

div.x-panel td.x-toolbar-right table {
	width: 100% !important;
}
div.x-panel td.x-toolbar-right table td {
	text-align: right !important;
}
div.x-panel td.x-toolbar-right table td .xtb-text {
	padding-right: 10px !important;
}

/* fond de la barre de boutons d'action dans les popup Ext.net */
div.x-window table.x-toolbar-ct,
div.x-menu-floating table.x-toolbar-ct {
	background: white;
	padding-left: 1px;
}

div.x-window .x-toolbar,
div.x-menu-floating .x-toolbar {
	padding-bottom: 0;
	background-color: white !important;
}


/* ddsSearchGridToolBar : group of action buttons aligned right */

.ddsSearchGridToolBar .x-toolbar-ct {
	border-bottom: 0;
}

/* below 2 fixes for Common/User/SearchUserExt.aspx */
/* .ddsSearchGridToolBar .x-toolbar-right .x-toolbar-right-row .x-toolbar-cell:has(.x-inline-toolbar:not(:has(*))), */ /* does not work .. :/ */ 
.ddsSearchGridToolBar .x-toolbar-right .x-toolbar-right-row .x-toolbar-cell:has(.x-inline-toolbar:empty) {
	padding: 0;
}
.ddsSearchGridToolBar .x-toolbar-right .x-toolbar-right-ct td:has(table > tbody > .x-toolbar-right-row) {
	padding: 0;
}
.ddsSearchGridToolBar .x-toolbar-right .x-toolbar-right-ct td:has(table > tbody > .x-toolbar-extras-row:empty) {
	padding: 0;
}

/* boutons d'action Ext.net plus espacés */
tr.x-toolbar-right-row td.x-toolbar-cell {
	padding-left: 0px;
}

tr.x-toolbar-right-row td.x-toolbar-cell .x-form-file-wrap table.x-form-file-btn {
	/* trick to fix bad vertical alignment in this case (when a div.x-form-file-wrap is used instead of a table.x-btn.x-btn-text-icon) */
	top: 50%;
	transform: translateY(-50%);
}
/* used on : Common/Admin/global_parameters.aspx */
tr.x-toolbar-left-row td.x-toolbar-cell .x-form-file-wrap table.x-form-file-btn {
	/* trick to fix bad vertical alignment in this case (when a div.x-form-file-wrap is used instead of a table.x-btn.x-btn-text-icon) */
	top: 50%;
	transform: translateY(-50%);
}

/* Custom icônes incrustées dans les boutons Ext.net */
tr.x-toolbar-right-row table.x-btn-over [class^='x-btn-'],
#PanelCenter tr.x-toolbar-right-row table.x-btn-over [class^='x-btn-'],
#TbUserInfo td.x-toolbar-left [class^='x-btn-']:not(.x-btn-split) {
	background: transparent !important;
}

/* exception pour les boutons Ext.net munis d'une dropdown list */
#TbUserInfo td.x-toolbar-left .x-btn-mc em.x-btn-split {
	background-image: url(../images/ext_arrow-noline.gif) !important;
	cursor: pointer;
}

.x-menu-floating {
	border-color: #BCC4D3;
}

/* intérieur d'une dropdown list Ext.net */
.x-cycle-menu {
	background: #FAFAFA !important;
}
	.x-cycle-menu li.x-menu-list-item {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.x-cycle-menu .x-menu-item-active {
		background-image: none !important;
		background: #F2F2F5;
		border-color: transparent !important;
		margin: 0 !important;
	}
		.x-cycle-menu .x-menu-item-active a.x-menu-item {
			border-width: 0 !important;
			margin: 0 !important;
		}
	.x-cycle-menu .x-menu-item-checked {
		border: 1px transparent !important;
		background: #E0E4E8 !important;
	}

/* certains boutons ext.net doivent contenir un libellé permanent */
#TbUserInfo td.x-toolbar-left table.x-btn-over button {
	color: #000 !important;
}


td:is(.x-toolbar-left, .x-toolbar-right) {
	padding-left: 0;
	padding-right: 0;
}

.x-toolbar-right-row .x-toolbar-cell table.x-btn:has(tr:nth-child(3)) :where(tr:nth-child(1), tr:nth-child(3), tr:nth-child(2) td.x-btn-ml, tr:nth-child(2) td.x-btn-mr) {
	display: none; /* remove useless space due to table structure around ext buttons */
}
.x-toolbar-ct td.x-toolbar-cell table.x-btn.x-btn-icon:has(tr:nth-child(3)) { /* used on : Common/Admin/global_parameters.aspx + MUST NOT TARGET transport buttons inside of table footer */
}
.DefaultCriterias .x-toolbar-ct td.x-toolbar-cell table.x-btn.x-btn-icon:has(tr:nth-child(3)) :where(tr:nth-child(1), tr:nth-child(3), tr:nth-child(2) td.x-btn-ml, tr:nth-child(2) td.x-btn-mr) { /* used on : Common/Admin/global_parameters.aspx + MUST NOT TARGET transport buttons inside of table footer */
	display: none; /* remove useless space due to table structure around ext buttons */
}
tr.x-toolbar-right-row button[class*="icon-"] {
	padding-left: 36px !important;
	height: 36px !important;
	font-size: 11px;
}
tr.x-toolbar-right-row button[class*="icon-"].x-btn-text {
	width: 0; /* just to overwrite .x-btn-icon .x-btn-small .x-btn-text width: 16px from ext.axd (used in the "create an appointment" popin of calendar (CalendarCriterias.ascx)) */
}
tr.x-toolbar-right-row button.icon-zoom {
	/*
	background-image: url(../images/tiny-blue-icons/search.png) !important;
	background-image: url(../images/blue-icons/display.png) !important;
	height: 36px !important;
	*/

	/* grand format */
	background-image: url(../images/big-icons/search.png) !important;
	padding-left: 55px !important;
	height: 55px !important;
}

/* Finally we do not apply that style on .x-toolbar-left-row because it's not OK on #GPPagingToolbar or #TbUserInfo for example */
/*
.x-toolbar-left-row .x-toolbar-cell table.x-btn:has(tr:nth-child(3)) :where(tr:nth-child(1), tr:nth-child(3), tr:nth-child(2) td.x-btn-ml, tr:nth-child(2) td.x-btn-mr) {
	display: none;
}
*/


/*-------------------------------------------------*/
/*          BOUTONS DANS LES POPUP EXT.NET         */
/*-------------------------------------------------*/
.x-window-body tr.x-toolbar-left-row table.x-btn-text-icon button {
	height: 26px !important;
	padding-left: 28px !important;
}
	/*-------------------------------------------------*/

	.x-window-body tr.x-toolbar-left-row table.x-btn-text-icon button.icon-accept {
		background-image: url(../images/small-blue-icons/check2.png) !important;
	}

.x-window-body tr.x-toolbar-left-row table.x-btn-text-icon table.x-btn-over button.icon-accept {
	background-image: url(../images/small-blue-icons/check2-on.png) !important;
}
/*-------------------------------------------------*/

.x-window-body tr.x-toolbar-left-row table.x-btn-text-icon button.icon-cancel {
	background-image: url(../images/small-blue-icons/cancel.png) !important;
}

.x-window-body tr.x-toolbar-left-row table.x-btn-text-icon table.x-btn-over button.icon-cancel {
	background-image: url(../images/small-blue-icons/cancel-on.png) !important;
}
/*-------------------------------------------------*/



/*-------------------------------------------------*/
/*        AUTRES  BOUTONS D'ACTION EXT.NET         */
/*-------------------------------------------------*/
tr.x-toolbar-right-row button.icon-help {
	background-image: url(../images/small-gray-icons/info.png) !important;
	padding-left: 26px !important;
}

tr.x-toolbar-right-row table.x-btn-over button.icon-help {
	background-image: url(../images/small-gray-icons/info-on.png) !important;
}
/*-------------------------------------------------*/

tr.x-toolbar-right-row table.x-btn-over button.icon-zoom {
	background-image: url(../images/big-icons/search-on.png) !important;
}
/*-------------------------------------------------*/

tr.x-toolbar-right-row button.icon-disk {
	background-image: url(../images/blue-gray-icons/save.png) !important;
}

#PanelCenter tr.x-toolbar-right-row button.icon-disk {
	background-image: url(../images/blue-gray-icons/save.png) !important;
}

tr.x-toolbar-right-row table.x-btn-over button.icon-disk {
	background-image: url(../images/blue-gray-icons/save-on.png) !important;
}

#PanelCenter tr.x-toolbar-right-row table.x-btn-over button.icon-disk {
	background-image: url(../images/blue-gray-icons/save-on.png) !important;
}

/*-------------------------------------------------*/

tr.x-toolbar-right-row button.icon-cog {
	background-image: url(../images/blue-icons/generate.png) !important;
}

#PanelCenter tr.x-toolbar-right-row button.icon-cog {
	background-image: url(../images/blue-gray-icons/generate.png) !important;
}

tr.x-toolbar-right-row table.x-btn-over button.icon-cog {
	background-image: url(../images/blue-icons/generate-on.png) !important;
}

#PanelCenter tr.x-toolbar-right-row table.x-btn-over button.icon-cog {
	background-image: url(../images/blue-gray-icons/generate-on.png) !important;
}

/*-------------------------------------------------*/

tr.x-toolbar-right-row button.icon-arrowswitch {
	background-image: url(../images/blue-icons/split.png) !important;
}

#PanelCenter tr.x-toolbar-right-row button.icon-arrowswitch {
	background-image: url(../images/blue-gray-icons/split.png) !important;
}

tr.x-toolbar-right-row table.x-btn-over button.icon-arrowswitch {
	background-image: url(../images/blue-icons/split-on.png) !important;
}

#PanelCenter tr.x-toolbar-right-row table.x-btn-over button.icon-arrowswitch {
	background-image: url(../images/blue-gray-icons/split-on.png) !important;
}

/*-------------------------------------------------*/

tr.x-toolbar-right-row button.icon-decline {
	background-image: url(../images/blue-icons/erase.png) !important;
}

#PanelCenter tr.x-toolbar-right-row button.icon-decline {
	background-image: url(../images/blue-gray-icons/erase.png) !important;
}

tr.x-toolbar-right-row table.x-btn-over button.icon-decline {
	background-image: url(../images/blue-icons/erase-on.png) !important;
}

#PanelCenter tr.x-toolbar-right-row table.x-btn-over button.icon-decline {
	background-image: url(../images/blue-gray-icons/erase-on.png) !important;
}
/*-------------------------------------------------*/

tr.x-toolbar-right-row button.icon-printer {
	background-image: url(../images/blue-icons/printer.png) !important;
}

#PanelCenter tr.x-toolbar-right-row button.icon-printer {
	background-image: url(../images/blue-gray-icons/printer.png) !important;
}

tr.x-toolbar-right-row table.x-btn-over button.icon-printer {
	background-image: url(../images/blue-icons/printer-on.png) !important;
}

#PanelCenter tr.x-toolbar-right-row table.x-btn-over button.icon-printer {
	background-image: url(../images/blue-gray-icons/printer-on.png) !important;
}
/*-------------------------------------------------*/

tr.x-toolbar-right-row button.icon-pageexcel {
	background-image: url(../images/blue-icons/export-excel.png) !important;
}

#PanelCenter tr.x-toolbar-right-row button.icon-pageexcel {
	background-image: url(../images/blue-gray-icons/export-excel.png) !important;
}

tr.x-toolbar-right-row table.x-btn-over button.icon-pageexcel {
	background-image: url(../images/blue-icons/export-excel-on.png) !important;
}

#PanelCenter tr.x-toolbar-right-row table.x-btn-over button.icon-pageexcel {
	background-image: url(../images/blue-gray-icons/export-excel-on.png) !important;
}
/*-------------------------------------------------*/

tr.x-toolbar-right-row button.icon-pageattach {
	background-image: url(../images/blue-icons/download.png) !important;
}

#PanelCenter tr.x-toolbar-right-row button.icon-pageattach {
	background-image: url(../images/blue-gray-icons/download.png) !important;
}

tr.x-toolbar-right-row table.x-btn-over button.icon-pageattach {
	background-image: url(../images/blue-icons/download-on.png) !important;
}

#PanelCenter tr.x-toolbar-right-row table.x-btn-over button.icon-pageattach {
	background-image: url(../images/blue-gray-icons/download-on.png) !important;
}
/*-------------------------------------------------*/

tr.x-toolbar-right-row button.icon-user {
	background-image: url(../images/blue-icons/user.png) !important;
}

#PanelCenter tr.x-toolbar-right-row button.icon-user {
	background-image: url(../images/blue-gray-icons/user.png) !important;
}

tr.x-toolbar-right-row table.x-btn-over button.icon-user {
	background-image: url(../images/blue-icons/user-on.png) !important;
}

#PanelCenter tr.x-toolbar-right-row table.x-btn-over button.icon-user {
	background-image: url(../images/blue-gray-icons/user-on.png) !important;
}
/*-------------------------------------------------*/

tr.x-toolbar-right-row button.icon-bullettick {
	background-image: url(../images/blue-icons/check2.png) !important;
}

#PanelCenter tr.x-toolbar-right-row button.icon-bullettick {
	background-image: url(../images/blue-gray-icons/check2.png) !important;
}

tr.x-toolbar-right-row table.x-btn-over button.icon-bullettick {
	background-image: url(../images/blue-icons/check2-on.png) !important;
}

#PanelCenter tr.x-toolbar-right-row table.x-btn-over button.icon-bullettick {
	background-image: url(../images/blue-gray-icons/check2-on.png) !important;
}
/*-------------------------------------------------*/

tr.x-toolbar-right-row button.icon-lorry {
	background-image: url(../images/blue-icons/truck.png) !important;
}

#PanelCenter tr.x-toolbar-right-row button.icon-lorry {
	background-image: url(../images/blue-gray-icons/truck.png) !important;
}

tr.x-toolbar-right-row table.x-btn-over button.icon-lorry {
	background-image: url(../images/blue-icons/truck-on.png) !important;
}

#PanelCenter tr.x-toolbar-right-row table.x-btn-over button.icon-lorry {
	background-image: url(../images/blue-gray-icons/truck-on.png) !important;
}
/*-------------------------------------------------*/

tr.x-toolbar-right-row button.icon-lorryadd {
	background-image: url(../images/blue-icons/truck-add.png) !important;
}

#PanelCenter tr.x-toolbar-right-row button.icon-lorryadd {
	background-image: url(../images/blue-gray-icons/truck-add.png) !important;
}

tr.x-toolbar-right-row table.x-btn-over button.icon-lorryadd {
	background-image: url(../images/blue-icons/truck-add-on.png) !important;
}

#PanelCenter tr.x-toolbar-right-row table.x-btn-over button.icon-lorryadd {
	background-image: url(../images/blue-gray-icons/truck-add-on.png) !important;
}
/*-------------------------------------------------*/

tr.x-toolbar-right-row button.icon-brickadd {
	background-image: url(../images/blue-icons/box-new.png) !important;
}

#PanelCenter tr.x-toolbar-right-row button.icon-brickadd {
	background-image: url(../images/blue-gray-icons/box-new.png) !important;
}

tr.x-toolbar-right-row table.x-btn-over button.icon-brickadd {
	background-image: url(../images/blue-icons/box-new-on.png) !important;
}

#PanelCenter tr.x-toolbar-right-row table.x-btn-over button.icon-brickadd {
	background-image: url(../images/blue-gray-icons/box-new-on.png) !important;
}
/*-------------------------------------------------*/

tr.x-toolbar-right-row button.icon-packageadd {
	background-image: url(../images/blue-icons/box2-new.png) !important;
}

#PanelCenter tr.x-toolbar-right-row button.icon-packageadd {
	background-image: url(../images/blue-gray-icons/box2-new.png) !important;
}

tr.x-toolbar-right-row table.x-btn-over button.icon-packageadd {
	background-image: url(../images/blue-icons/box2-new-on.png) !important;
}

#PanelCenter tr.x-toolbar-right-row table.x-btn-over button.icon-packageadd {
	background-image: url(../images/blue-gray-icons/box2-new-on.png) !important;
}
/*-------------------------------------------------*/

tr.x-toolbar-right-row button.icon-add,
tr.x-toolbar-right-row button.icon-pageadd {
	background-image: url(../images/blue-icons/add.png) !important;
}

#PanelCenter tr.x-toolbar-right-row button.icon-add,
#PanelCenter tr.x-toolbar-right-row button.icon-pageadd {
	background-image: url(../images/blue-gray-icons/add.png) !important;
}

tr.x-toolbar-right-row table.x-btn-over button.icon-add,
tr.x-toolbar-right-row table.x-btn-over button.icon-pageadd {
	background-image: url(../images/blue-icons/add-on.png) !important;
}

#PanelCenter tr.x-toolbar-right-row table.x-btn-over button.icon-add,
#PanelCenter tr.x-toolbar-right-row table.x-btn-over button.icon-pageadd {
	background-image: url(../images/blue-gray-icons/add-on.png) !important;
}
/*-------------------------------------------------*/

tr.x-toolbar-right-row button.icon-pagegear {
	background-image: url(../images/blue-icons/batches.png) !important;
}

#PanelCenter tr.x-toolbar-right-row button.icon-pagegear {
	background-image: url(../images/blue-gray-icons/batches.png) !important;
}

tr.x-toolbar-right-row table.x-btn-over button.icon-pagegear {
	background-image: url(../images/blue-icons/batches-on.png) !important;
}

#PanelCenter tr.x-toolbar-right-row table.x-btn-over button.icon-pagegear {
	background-image: url(../images/blue-gray-icons/batches-on.png) !important;
}
/*-------------------------------------------------*/

tr.x-toolbar-right-row button.icon-doorout {
	background-image: url(../images/blue-icons/close.png) !important;
}

#PanelCenter tr.x-toolbar-right-row button.icon-doorout {
	background-image: url(../images/blue-gray-icons/close.png) !important;
}

tr.x-toolbar-right-row table.x-btn-over button.icon-doorout {
	background-image: url(../images/blue-icons/close-on.png) !important;
}

#PanelCenter tr.x-toolbar-right-row table.x-btn-over button.icon-doorout {
	background-image: url(../images/blue-gray-icons/close-on.png) !important;
}
/*-------------------------------------------------*/

tr.x-toolbar-right-row button.icon-delete {
	background-image: url(../images/blue-icons/delete.png) !important;
}

#PanelCenter tr.x-toolbar-right-row button.icon-delete {
	background-image: url(../images/blue-gray-icons/delete.png) !important;
}

tr.x-toolbar-right-row table.x-btn-over button.icon-delete {
	background-image: url(../images/blue-icons/delete-on.png) !important;
}

#PanelCenter tr.x-toolbar-right-row table.x-btn-over button.icon-delete {
	background-image: url(../images/blue-gray-icons/delete-on.png) !important;
}
/*-------------------------------------------------*/

tr.x-toolbar-right-row button.icon-pagewhitecopy {
	background-image: url(../images/blue-icons/copy.png) !important;
}

#PanelCenter tr.x-toolbar-right-row button.icon-pagewhitecopy {
	background-image: url(../images/blue-gray-icons/copy.png) !important;
}

tr.x-toolbar-right-row table.x-btn-over button.icon-pagewhitecopy {
	background-image: url(../images/blue-icons/copy-on.png) !important;
}

#PanelCenter tr.x-toolbar-right-row table.x-btn-over button.icon-pagewhitecopy {
	background-image: url(../images/blue-gray-icons/copy-on.png) !important;
}
/*-------------------------------------------------*/

tr.x-toolbar-right-row button.icon-reload {
	background-image: url(../images/blue-icons/refresh.png) !important;
}

#PanelCenter tr.x-toolbar-right-row button.icon-reload {
	background-image: url(../images/blue-gray-icons/refresh.png) !important;
}

tr.x-toolbar-right-row table.x-btn-over button.icon-reload {
	background-image: url(../images/blue-icons/refresh-on.png) !important;
}

#PanelCenter tr.x-toolbar-right-row table.x-btn-over button.icon-reload {
	background-image: url(../images/blue-gray-icons/refresh-on.png) !important;
}
/*-------------------------------------------------*/

tr.x-toolbar-right-row button.icon-cancel {
	background-image: url(../images/blue-gray-icons/cancel.png) !important;
}

#PanelCenter tr.x-toolbar-right-row button.icon-cancel {
	background-image: url(../images/blue-gray-icons/cancel.png) !important;
}

tr.x-toolbar-right-row table.x-btn-over button.icon-cancel {
	background-image: url(../images/blue-gray-icons/cancel-on.png) !important;
}

#PanelCenter tr.x-toolbar-right-row table.x-btn-over button.icon-cancel {
	background-image: url(../images/blue-gray-icons/cancel-on.png) !important;
}
/*-------------------------------------------------*/

tr.x-toolbar-right-row button.icon-accept {
	background-image: url(../images/blue-gray-icons/enable.png) !important;
}

#PanelCenter tr.x-toolbar-right-row button.icon-accept {
	background-image: url(../images/blue-gray-icons/enable.png) !important;
}

tr.x-toolbar-right-row table.x-btn-over button.icon-accept {
	background-image: url(../images/blue-icons/enable-on.png) !important;
}

#PanelCenter tr.x-toolbar-right-row table.x-btn-over button.icon-accept {
	background-image: url(../images/blue-gray-icons/enable-on.png) !important;
}
/*-------------------------------------------------*/
/* Icone Ouverture Entité sur les grilles Ext.Net */
.cell-imagecommand.icon-folderedit {
	background-image: url(../images/tiny-blue-icons/pencil.png) !important;
}
.cell-imagecommand.left-cell-imagecommand.icon-bulletgo {
	background-image: url(../images/tiny-blue-icons/dsi-shipment-pl-ok.png) !important;
}

.cell-imagecommand.left-cell-imagecommand.icon-buildingerror {
	background-image: url(../images/tiny-blue-icons/dsi-shipment-pl-ko.png) !important;
}

.cell-imagecommand.left-cell-imagecommand.icon-bulleteject {
	background-image: url(../images/tiny-blue-icons/dsi-shipment-pl-hasComments.png) !important;
}

.cell-imagecommand.left-cell-imagecommand.icon-bulletfeed {
	background-image: url(../images/tiny-blue-icons/dsi-shipment-pl-pending.png) !important;
}
/*-------------------------------------------------*/



/* bordures fieldsets */
/* (fieldsets used for (collapsible) criterias sections */

.x-fieldset {
	border: 0;
	border-top: 1px dotted #BBD;
	border-top: 0;
	padding-bottom: 5px !important;
	margin-bottom: 0px !important;
	
	padding-left: 0; /* IN TEST - for "User search criteria" section in SearchUserExt.aspx */
	padding-right: 0; /* IN TEST - for "User search criteria" section in SearchUserExt.aspx */
}
.x-fieldset.x-panel-collapsed {}
.x-fieldset:not(.x-form-label-right) > .x-fieldset-header { /* :not(.x-form-label-right) just to avoid affecting "real" fieldsets with dotted borders such as Result for/Filter for fieldsets in DSD/Provision/Provision_list.aspx */
	padding-left: 0; /* IN TEST - for "User search criteria" section in SearchUserExt.aspx */
}
.x-fieldset legend .x-tool-toggle {
	margin-top: -1px; /* slightly improve vertical alignement of collapsing caret with the legend text */
}

/* mini-icônes (flèches, fermeture, etc) */
.x-tool {
	background-image: url(../images/ext-net_new.png) !important;
}

.x-form-file-wrap {
	height: 24px !important; /* TODO */
}


/*****************************************/
/* Customisation des formulaires Ext.net */
/*****************************************/

.x-panel .x-panel-bwrap > .x-panel-tbar {
	/* prevent dynamically injected width (wider than the x-panel-bwrap container) to apply */
	max-width: 100%; /* trick : let's use a max-width instead of a width marked with "!important" tag */
}
.x-panel .x-panel-bwrap > .x-panel-tbar > .ddsSearchGridToolBar {
	/* prevent dynamically injected width (wider than the x-panel-bwrap container) to apply */
	max-width: 100%; /* trick : let's use a max-width instead of a width marked with "!important" tag */
}

/* barres de titre Ext.net */
.x-panel-header {
	background: #F1F1F7 !important;
	color: #445;
	font-weight: normal;
}
/* toutes les bordures initialement bleu pâles dans Ext.net */
.x-tab-panel-bbar .x-toolbar, .x-tab-panel-tbar .x-toolbar,
.x-form-check-group-label,
.x-grid-panel .x-panel-mc .x-panel-body,
.x-grid-group-hd,
.x-panel,
.x-panel-header,
.x-panel-body,
.x-panel-bbar .x-toolbar, .x-panel-tbar .x-toolbar,
.x-panel-tbar-noheader .x-toolbar, .x-panel-mc .x-panel-tbar .x-toolbar,
.x-panel-body-noheader, .x-panel-mc .x-panel-body,
.x-panel-tl, .x-panel-tr, .x-panel-bl, .x-panel-br,
.x-panel-ghost ul,
.x-panel-dd-spacer,
.x-window-proxy,
.x-window-mc,
.x-window-bbar .x-toolbar,
.x-panel-ghost .x-window-tl,
.x-html-editor-tb .x-btn-text,
.x-panel-noborder .x-panel-tbar-noborder .x-toolbar,
.x-panel-noborder .x-panel-bbar-noborder .x-toolbar,
.x-tab-panel-bbar-noborder .x-toolbar,
.x-tab-panel-tbar-noborder .x-toolbar,
.x-panel-noborder .x-panel-header-noborder {
	border-color: #DDDEDE;
}

.x-panel-noborder .x-panel-header-noborder {
	border-color: #D4D6D6;
}

.x-panel-header + .x-panel-bwrap:has(.x-panel-tbar > .ddsSearchGridToolBar) {
	padding-top: 0.5rem; /*a add spacing between bordered title in the x-panel-header and action buttons in the ddsSearchGridToolbar */
}

.x-form-group .x-form-group-header {
	border-color: #D9D9D9;
}
/* gros séparateur vertical central */
div.x-border-layout-ct {
	background-color: #E4E6E6;
}

/* entêtes de colonnes dans les grilles Ext.net */
#PanelWest div.x-grid3-header-inner {
	/* background-color: #43627C !important; */
	background-color: var(--table-header-bg-color);
}

div.x-grid3-header {
	background: transparent !important;
}
div.x-grid3-header .x-grid3-cell { /* for Common/User/SearchUserExt.aspx */
	background-color: var(--table-header-bg-color);
	color: #ffffff;
}
div.x-grid3-header .x-grid3-td-checker,
div.x-grid3-header div[class^="x-grid3-hd-"]:not(.x-grid3-hd-checker) {
	/* padding-top: 7px !important; */
	/* height: 18px !important; */
	background-image: none !important;
	/* background-color: #43627C !important; */
	background-color: var(--table-header-bg-color);
	color: #ffffff;
}
div.x-grid3-header .x-grid3-hd-row td {
	border-right-color: #6A869D !important;
	/* font-weight: normal !important; */ /* actually greater when it's bold, as set by .ddsSearchGrid .x-grid3-hd-row TD */
}

.x-grid3-cell { /* all cells */
}
.x-grid3-cell.x-grid3-hd { /* header cells */
}
.x-grid3-cell.x-grid3-col { /* body cells */
}
.x-grid3 .x-grid3-cell.x-grid3-hd,
.x-grid3 .x-grid3-cell.x-grid3-col {
	padding: 0; /* uniformize padding between head cells and body cells in order to avoid column shiftings - In this cas, the padding is worn by x-grid3-hd-inner or x-grid3-cell-inner which are divs inside the td - required for tables like those in /logs.aspx, Common/User/SearchUserExt.aspx, and more.. */
}
div.x-grid3-cell-inner {
	padding: 6px 4px;
	/* font-size: 11px; */
}
.x-grid3-hd-inner, /* div inside head tds */
.x-grid3-cell-inner {} /* div inside body tds */
.x-grid3-hd-inner { /* div inside head tds */
	padding: var(--table-th-padding-y) var(--table-td-padding-x); /* overwrite default "3px 3px 3px 5px" padding set by Ext */
}
.x-grid3-cell-inner { /* div inside body tds */
	padding: var(--table-td-padding-y) var(--table-td-padding-x); /* overwrite default "3px 3px 3px 5px" padding set by Ext */
}
div.x-grid3-cell-inner span {
	/* font-size: 11px; */
}

.x-grid3-hd-row td {
	font-size: var(--default-font-size); /* overwrites 11px font-size set by Ext */
}
.x-grid3-row td,
.x-grid3-summary-row td {
	font-size: var(--default-font-size); /* overwrites 11px font-size set by Ext */
}
:is(.x-grid3-row, .x-grid3-summary-row) td .btn.btn-link {
	line-height: normal; /* prevents button.btn.btn-link to increase table rows height on DSD/Provision/Provision_list.aspx for example */
}

/* au passage de la souris sur une entête de colonne */
div.x-grid3-header .x-grid3-hd-btn {
	background-color: #43627C !important;
	background-image: url(../images/ext-net_col-header-hover.png) !important;
}

/* menu layout > advanced dans grille ext.net  
	TODO: make it more generic (=> #GPSearch_AdvancedFitLayoutMenu)
*/
div#GPSearch_AdvancedFitLayoutMenu .x-menu-list .x-form-item {
	margin: 2px 2px 0 0;
}

/* V6R3 */
form.x-border-layout-ct {
	background-color: #FFFFFF;
}


div.x-panel-body input[type="radio"],
div.x-panel-body input[type="checkbox"] {
	margin-top: 0;
}

.x-toolbar .xtb-sep {
	background-image: none;
	border-left: 1px solid #CCC;
	margin: 0 4px; /* for #TbUserInfo */
	width: 0; /* for #TbUserInfo */
}


/* interligne dans les formulaires ext.net */
.x-form-item {
	margin-bottom: 6px;
}

/* champs de saisie de type texte classiques */

#PanelLanguage .x-form-text,
#PanelLanguage .x-form-focus,
.x-combo-list {
	border-color: #C4C4C4 !important;
}

/* Cellule modifiable dans les grilles Ext.Net */
.updField {
	background-image: url("../images/dirty1.gif") !important;
	background-repeat: no-repeat !important;
	background-color: transparent !important;
}

.x-grid3-dirty-cell {
	background-image: url("../images/dirty.gif") !important;
	background-repeat: no-repeat !important;
	background-color: transparent !important;
}

/* sidebar */
.x-layout-collapsed {
	/* background-color: #d2e0f2; */
	background-color: #DFE2E6;
	/* border-color: #98c0f4; */
	border-color: #CACFD2;
}
/* barre de titre munie de boutons */
.x-toolbar {
	background: #DDDEDE;
	border-top: 0 solid #CFCFCF !important;
	border-bottom: 0 solid #CCC !important;
}
.x-panel-bbar .x-toolbar { /* only table footers ?? example in DSD/Invoice/Preinvoice_publication.aspx */
	background-color: var(--table-footer-bg-color); /* IN TEST */
}
.x-panel-bbar .x-toolbar td { /* only table footers ?? */
	padding: 0;
}

/* message "Veuillez patienter..." */
.ext-el-mask-msg {
	border-color: #CCC;
	background-color: #FFF;
	background-image: none;
	padding: 20px;
}

	.ext-el-mask-msg div {
		background-color: inherit;
		border: 0;
		color: #222;
		/* font: 12px Arial; */
		font-family: var(--default-font-family);
		font-size: var(--default-font-size);
	}


/* lightboxs flottantes */
.x-resizable-pinned .x-window-body {
	background-color: #E5E8F2;
	background-color: white;
}

.x-resizable-pinned .x-panel-body {
	border: none !important;
}

/* champs de saisie Ext.net */
div.x-panel-body textarea {
	color: var(--fields-text-color) !important;
}

	/* -- moved below --
	div.x-panel-body input[readonly],
	div.x-panel-body input[disabled],
	div.x-panel-body textarea[readonly],
	div.x-panel-body textarea[disabled] {
		background-color: #FFFFFF;
		color: #666 !important;
	}
	*/

/* surbrillance sur champs en cours de saisie */
div.x-trigger-wrap-focus {
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6) !important;
}

/* comme on a passé la navbar Bootstrap en "fixed"... */
.navbar {
	margin-top: 45px !important;
}

.ext-strict .x-form-text {
	/* line-height: auto !important; */
	/* height: auto !important;*/
}

.x-box-inner {
	/* height: 24px !important; */ /* COMMENTED IN TEST - problematic on DSD/Invoice/Preinvoice_list.aspx */
}

/* V6R3 - pour que les éléments des formulaires ext.net (voire même la navbar) ne soient pas cachés */
#PanelNorth div[class^="x-panel-"] {
	/* 29/01/2015 - finalement, on rétablit le Layout="FitLayout" */
	overflow: visible;
}


/* drapeaux davantage dans le ton du logo DDS */
table#UserLanguageSelector td.x-btn-mc button[class*="icon-flag"] {
	background-position: 0px 2px;
}

table#UserLanguageSelector button.icon-flagfr {
	background-image: url(../images/ext_flag_fr.png) !important;
}

table#UserLanguageSelector button.icon-flaggb {
	background-image: url(../images/ext_flag_gb.png) !important;
}


/* ONGLETS */
ul.x-tab-strip-top {
	background-color: #E1E1E1;
	background-image: none;
	border-bottom-color: #B7B7B7;
	list-style: none !important;
}

.x-tab-panel-header, .x-tab-panel-footer {
	background-color: #F5F5F5;
	border-color: #E3E3E3;
}

.x-tab-strip-top .x-tab-right, .x-tab-strip-top .x-tab-left, .x-tab-strip-top .x-tab-strip-inner {
	background-image: url(../images/ext_tab_border.gif);
}

/* MESSAGES D'ERREUR */
body.x-body-masked .x-window-plain .x-window-mc {
	background-color: #D5D9DD;
}

.x-html-editor-wrap {
	border-color: #caced2;
}

.x-window-tl .x-window-header {
	color: #444;
}

.x-window-tc {
	background-image: url(../images/ext_msg_tc.png);
}

.x-window-tl {
	background-image: url(../images/ext_msg_tl.png);
}

.x-window-tr {
	background-image: url(../images/ext_msg_tr.png);
}

.x-window-bc {
	background-image: url(../images/ext_x-window-bc.png);
}

.x-window-bl {
	background-image: url(../images/ext_x-window-bl.png);
}

.x-window-br {
	background-image: url(../images/ext_x-window-br.png);
}

.x-window-mc {
	border-color: #A0A6AF;
	background-color: #D5D9DD;
}

.x-window-ml {
	background-image: url(../images/ext_x-window-ml.png);
}

.x-window-mr {
	background-image: url(../images/ext_x-window-mr.png);
}


/* BOUTON DE VALIDATION */
.x-btn-tl, .x-btn-tr, .x-btn-tc, .x-btn-ml, .x-btn-mr, .x-btn-mc, .x-btn-bl, .x-btn-br, .x-btn-bc {
	background-image: url(../images/ext_x-btn.gif) !important;
}

/* ENTÊTES DE COLONNES */
td.x-grid3-hd-over, td.sort-desc, td.sort-asc, td.x-grid3-hd-menu-open {
	border-left-color: #E0E8ED;
	border-right-color: #C4C4DD;
}

	td.x-grid3-hd-over .x-grid3-hd-inner, td.sort-desc .x-grid3-hd-inner, td.sort-asc .x-grid3-hd-inner, td.x-grid3-hd-menu-open .x-grid3-hd-inner {
		background-color: #F7F7F7;
		background-image: url(../images/ext_x-grid3-hd.gif);
	}

/* TOUS LES PETITS BOUTONS (FORMAT "SPRITES") */
.x-tool {
	background-image: url(../images/ext_x-tool-new.png);
}


/**********************************************************/
/*              Fin de la customisation Ext.net           */
/**********************************************************/



table.login_fields select {
	font-size: 13px;
}

table.login_fields input.txtB_def {
	width: 150px;
}

.ListTitle {
	/* background-color: #93ADB9 !important; */
	/* background-color: #DEE8E8 !important; */
	background-color: transparent !important;
	border-bottom: 1px solid #93ADB9;
	/* color: #445 !important; */
	color: var(--title-text-color) !important;
	text-align: left !important;
}

/* icône de recherche contextuelle */
.FOBTN {
	background-image: url(../images/tiny-gray-icons/ctx-search.png);
	cursor: pointer;
	/*margin: 0 4px;*/
}

	.FOBTN:hover {
		background-image: url(../images/tiny-gray-icons/ctx-search-on.png);
	}

td.TitleRepeater {
	padding: 10px;
	/* color: #343434; */
	color: var(--title-text-color); /* NOT TESTED YET */
}

td.TitleRepeater,
table.lightBG,
table.lightBG td {
	background-color: #E8EAEA !important;
}


table.dCadre {
	border: 0;
	padding: 0;
	margin: 0;
	margin-left: 10px;
}

	table.dCadre .dCrit {
		padding-top: 10px;
	}

.drawBorder td
/* ,tr */ /* remove in order to allow use of "border_bottom" utility class on tr */
{
	border: 0 !important;
}

.drawBorder td
/* , tr */ /* remove in order to allow use of "border_bottom" utility class on tr */
, .dCadre
, .dCrit
{
	border: 0 !important;
}

.MenuZone {
	border-top: 0 !important;
	border-bottom: 0 !important;
}

a.sortCol {
	color: white !important;
	font-size: 11px !important;
}

a.lnk_Default,
div#menuScreen span,
ul#menuDeroulant span {
	/* font-size: 12px !important; */
	font-size: var(--default-font-size) !important; /* NOT TESTED YET */
}

a.lnk_Default {
	text-decoration: underline !important;
}

	a.lnk_Default:hover {
		text-decoration: none !important;
	}


/* largeur par défaut des champs de saisie et de sélection dans les formulaire */
/* form#aspnetForm .form-control, form#aspnetForm button.dropdown-toggle, .bootstrap-select {
	width: 150px !important;
} */
form#aspnetForm .form-control {
	/* width: 150px !important; */ /* TODO : in Test : apply 100% width instead of 150px by default */
	/* width: 100%; */ /* => Now applied by default on .form-control:where(input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"]) */
}
form#aspnetForm select {
	/* width: 100%; */ /* Now applied by default on "select" */
}

	form#aspnetForm .form-control.c_3,
	form#aspnetForm button.dropdown-toggle.c_3, /* NOW USELESS (bootstrap-select component dropped) */
	.small_select .bootstrap-select.c_3 /* NOW USELESS (bootstrap-select component dropped) */
	{
		width: 180px !important;
	}

	form#aspnetForm .form-control.c_4,
	form#aspnetForm button.dropdown-toggle.c_4, /* NOW USELESS (bootstrap-select component dropped) */
	.small_select .bootstrap-select.c_4 /* NOW USELESS (bootstrap-select component dropped) */
	{
		width: 250px !important;
	}

/* TODO : "small_select", "tiny_select" and "medium_select" not found in views + button.dropdown-toogle was for bootstrap-select removed component.. so the 3 declarations below can be removed */
/*
.small_select .bootstrap-select,
form#aspnetForm .small_select button.dropdown-toggle {
	width: 130px !important;
}
.tiny_select .bootstrap-select,
form#aspnetForm .tiny_select button.dropdown-toggle {
	width: 80px !important;
}
.medium_select .bootstrap-select,
form#aspnetForm .medium_select button.dropdown-toggle {
	width: 150px !important;
}
*/


.ddl_def {
	background-color: transparent;
	width: unset; /* overwwrite StyleBase.css */
}



/*-------------------------*/
/* reprise de StyleBase.css, avec "préfixage" des classes afin qu'elles continuent à prévaloir (sinon, la largeur des champs sera trop homogêne) */

.lbl_def {
	width: unset; /* overwrites Width:150px from StyleBase.css */ /* required for alignement of labels aside checbkox [on Booking page for example] (but could be done another way if this has bad side efects) */
}

form#aspnetForm textarea.txtB_1000D {
	width: 500px !important;
}
form#aspnetForm textarea.txtB_800D {
	width: 400px !important;
}
form#aspnetForm input.form-control.txtB_2D,
form#aspnetForm input.form-control.txtB_2DRO,
form#aspnetForm input.form-control.txtB_d2D,
form#aspnetForm input.form-control.txtB_d2DRO {
	width: 35px !important;
}
form#aspnetForm input.form-control.txtB_3D,
form#aspnetForm input.form-control.txtB_3DRO,
form#aspnetForm input.form-control.txtB_d3D,
form#aspnetForm input.form-control.txtB_d3DRO {
	width: 50px !important;
}
form#aspnetForm input.form-control.txtB_4D,
form#aspnetForm input.form-control.txtB_4DRO,
form#aspnetForm input.form-control.txtB_d4D,
form#aspnetForm input.form-control.txtB_d4DRO {
	width: 70px !important;
}

form#aspnetForm input.form-control.txtB_5D {
	width: 80px !important;
}
form#aspnetForm input.form-control.txtB_5DRO {
	width: 80px !important;
}
form#aspnetForm input.form-control.txtB_d5D {
	width: 80px !important;
}
form#aspnetForm input.form-control.txtB_d5DRO {
	width: 80px !important;
}

form#aspnetForm input.form-control.txtB_13D,
form#aspnetForm input.form-control.txtB_d13D,
form#aspnetForm input.form-control.txtB_d13DRO,
form#aspnetForm input.txtB_13DRO {
	width: 100px !important;
}
form#aspnetForm input.form-control.txtB_16D,
form#aspnetForm input.form-control.txtB_d16D,
form#aspnetForm input.form-control.txtB_d16DRO,
form#aspnetForm input.txtB_16DRO {
	width: 120px !important;
}
form#aspnetForm input.form-control.txtB_70D,
form#aspnetForm input.form-control.txtB_d70D,
form#aspnetForm input.form-control.txtB_d70DRO,
form#aspnetForm input.txtB_70DRO {
	width: 250px !important;
}
form#aspnetForm input.form-control.txtB_80D,
form#aspnetForm input.form-control.txtB_d80D,
form#aspnetForm input.form-control.txtB_d80DRO,
form#aspnetForm input.txtB_80DRO {
	width: 300px !important;
}
form#aspnetForm input.form-control.txtB_100D,
form#aspnetForm input.form-control.txtB_d100D,
form#aspnetForm input.form-control.txtB_d100DRO,
form#aspnetForm input.txtB_100DRO {
	width: 300px !important;
}
form#aspnetForm input.form-control.txtB_600D,
form#aspnetForm input.form-control.txtB_d600D,
form#aspnetForm input.form-control.txtB_d600DRO,
form#aspnetForm input.txtB_600DRO {
	width: 600px !important;
}

form#aspnetForm .ddl_4D,
form#aspnetForm .ddl_4DRO {
	width: 30px !important;
}
form#aspnetForm .ddl_5D,
form#aspnetForm .ddl_5DRO {
	width: 50px !important;
}
form#aspnetForm .ddl_7D {
	width: 80px !important;
}
form#aspnetForm .ddl_10D,
form#aspnetForm .ddl_10DRO {
	width: 100px !important;
}
form#aspnetForm .ddl_20D,
form#aspnetForm .ddl_20DRO {
	width: 120px !important;
}
form#aspnetForm .ddl_35D,
form#aspnetForm .ddl_35DRO {
	width: 200px !important;
}
form#aspnetForm .ddl_40D,
form#aspnetForm .ddl_40DRO {
	width: 2250px !important;
}
form#aspnetForm .ddl_50D,
form#aspnetForm .ddl_50DRO {
	width: 245px !important;
}
form#aspnetForm .ddl_70D,
form#aspnetForm .ddl_70DRO {
	width: 320px !important;
}

/* pour que les selectpickers épousent la largeur de leur contenant */
form#aspnetForm [class*="ddl_"] button {
	width: inherit !important;
}

/* champs de saisie */
form#aspnetForm .txtB {
	width: 150px !important;
}
/*
form#aspnetForm .txtB_def {
	width: 150px !important;
}
*/
form#aspnetForm .txtB_def:has(+ img) { /* too generic */
	/* width: 150px; */
}
form#aspnetForm .txtB_defRO {
	width: 150px !important;
}
form#aspnetForm .txtB_35D {
	width: 200px !important;
}
form#aspnetForm .txtB_35DRO {
	width: 200px !important;
}
form#aspnetForm .txtB_70D {
	width: 250px !important;
}
form#aspnetForm .txtB_70DRO {
	width: 250px !important;
}
form#aspnetForm .txtB_75D {
	width: 250px !important;
}
form#aspnetForm .txtB_75DRO {
	width: 250px !important;
}
form#aspnetForm .txtB_80D {
	width: 300px !important;
}
form#aspnetForm .txtB_80DRO {
	width: 300px !important;
}
form#aspnetForm .txtB_100D {
	width: 400px !important;
}
form#aspnetForm .txtB_150D {
	width: 388px !important;
}
form#aspnetForm .txtB_100DRO {
	width: 400px !important;
}
form#aspnetForm .txtB_150DRO {
	width: 388px !important;
}
form#aspnetForm .txtB_1000D {
	width: 500px !important;
}
form#aspnetForm .txtB_800D {
	width: 400px !important;
}
form#aspnetForm .txtB_1000DRO {
	width: 500px !important;
}
form#aspnetForm .txtB_1500D {
	width: 750px !important;
}
form#aspnetForm .txtB_2D,
form#aspnetForm .txtB_2DRO,
form#aspnetForm .txtB_d2D,
form#aspnetForm .txtB_d2DRO {
	width: 35px !important;
}
form#aspnetForm .txtB_3D,
form#aspnetForm .txtB_3DRO,
form#aspnetForm .txtB_d3D,
form#aspnetForm .txtB_d3DRO {
	width: 50px !important;
}
form#aspnetForm .txtB_4D,
form#aspnetForm .txtB_4DRO,
form#aspnetForm .txtB_d4D,
form#aspnetForm .txtB_d4DRO {
	width: 70px !important;
}
form#aspnetForm .txtB_5D {
	width: 80px !important;
}
form#aspnetForm .txtB_5DRO {
	width: 80px !important;
}
form#aspnetForm .txtB_d5D {
	width: 80px !important;
}
form#aspnetForm .txtB_d5DRO {
	width: 80px !important;
}
form#aspnetForm .txtB_13D,
form#aspnetForm .txtB_d13D,
form#aspnetForm .txtB_d13DRO,
form#aspnetForm .txtB_13DRO {
	width: 100px !important;
}
form#aspnetForm .txtB_16D,
form#aspnetForm .txtB_d16D,
form#aspnetForm .txtB_d16DRO,
form#aspnetForm .txtB_16DRO {
	width: 120px !important;
}



/* just to overwrite old background/border set by "txtB_xxx" classes line 184 in colors.css */
form#aspnetForm input[class^=txtB] {
	border: 1px solid #cdcdcd;
	background: #ffffff;
}
/* just to overwrite old background/border set by "ddl_xxx" classes line 162 in colors.css */
form#aspnetForm select:where([class^=ddl], [class^=txtB]) {
	border: 1px solid #cdcdcd;
	background-color: #ffffff;
}


/*-------------------------*/

textarea.description,
form#aspnetForm textarea.description {
	width: 380px !important;
	height: 45px !important;
}

form#aspnetForm .form-control.txtB_100P {
	width: 100% !important;
	height: 70px !important;
}

/* recherche articles dans Sourcing */
form#aspnetForm div.form-a-criterias input[type="text"].form-control,
form#aspnetForm div.form-a-criterias .form-select /* NOT TESTED YET */
{
	width: 200px !important;
	display: inline;
}

form#aspnetForm div.form-a-criterias td.td_txt_def {
	white-space: nowrap;
}

/* cellules dédiées aux icônes "loupe" */
td.td_search {
	width: 30px;
	white-space: nowrap;
}

form {
	/*margin-bottom: 0;*/
}

div.dCrit input.form-control, input.form-control-crit {
	display: inline;
	width: 185px;
}

span.l120 {
	width: 100px;
	white-space: normal;
	line-height: 12px;
}

.dCrit_special span.l120 {
	width: 131px;
}



/* on change de mode de scroll sur les table body */
#tbROA .rqof_header {
	top: 0;
	background-color: #959FB5;
}

div.dCrit span {
	font-size: var(--default-font-size);
}


div.art_list div.item_list {
	margin-left: 10px !important;
}


/* Liste : 100% de largeur */
#tbROA {
	width: 100% !important;
}

.wrapper {
	width: 98.5% !important;
}

/* popup offer.request */
.modal-body-little-padding { /* only on modals generated by the old version of getLightboxHTML */
	padding: 10px !important;
}
.modal .lightbox-header::after {
	content: '';
	display: block;
	clear: both;
}

/* 📝 button.close should not exist anymore in the code.. Bootstrap v5 now uses "btn-close" class */
.modal button.close {
	float: right;
	background-color: transparent;
	border: 0;
	padding: 0.5rem;
	opacity: 0.2;
}
.modal button.close span {
	/* font-size: 21px !important; */
	line-height: 0.66; /* makes hoverable area square */
}
button.close span {
	font-size: 30px !important;
}

/* for error/information modal */
.modal .modal-body .list-item #Ximg + #XmsgTitle:empty {
	display: none;
}

/* au sein des popup de recherche */
table.PopupTable {
	margin-top: 10px;
	border: 0 !important;
	background-color: transparent !important; /*color: #3151A5;*/
	color: unset; /* overwrites #3151A5 from colors.css */
}

/* Titre / sous-titre d'une lightbox */
.Popup_Intro {
	text-align: left;
	padding-top: 10px;
}


table.PopupTable td input[type="text"] {
	display: inline;
	margin-bottom: 7px;
}
/* icône de recherche */
table.PopupTable td img.FOBTN {
	margin-left: 4px;
}

div.gridview_separator {
	height: 30px;
	background: #F1F1F7;
	background: #FFFFFF;
	background-image: -webkit-linear-gradient(top, #BBBBBB 0%, #FFFFFF 30%, #FFFFFF 100%);
	background-image: -o-linear-gradient(top, #BBBBBB 0%, #FFFFFF 30%, #FFFFFF 100%);
	background-image: linear-gradient(to bottom, #BBBBBB 0%, #FFFFFF 30%, #FFFFFF 100%);
	background-image: -webkit-gradient(linear, top, bottom, from(#D6D6D6), to(#FFFFFF));
}

/*
@screen-xs-max: 767px;
@screen-sm-min: 768px;
@screen-sm-max: 991px;
@screen-md-min: 992px;
@screen-md-max: 1199px;
@screen-lg-min: 1200px;
*/

/*
@font-face
{
	font-family: 'bonvenocflight';
	src: url('bonvenocf_light_macroman/BonvenoCF-Light-webfont.eot');
	src: url('bonvenocf_light_macroman/BonvenoCF-Light-webfont.eot?#iefix') format('embedded-opentype'), url('bonvenocf_light_macroman/BonvenoCF-Light-webfont.woff') format('woff'), url('bonvenocf_light_macroman/BonvenoCF-Light-webfont.ttf') format('truetype'), url('bonvenocf_light_macroman/BonvenoCF-Light-webfont.svg#bonvenocflight') format('svg');
	font-weight: normal;
	font-style: normal;
}
*/

.select-height {
	height: 24px; /* TODO */
	background-color: red !important; /* ! TODO - test color to be removed, just used to find instances of this class in the views.. */
}

div.banner {
	width: 100%;
	margin-top: 5px;
	margin-right: 0;
	margin-bottom: 6px;
	margin-left: 0;
}

	div.banner .logo img {
		margin: 0 4px;
	}

	div.banner span {
		font-size: 14px;
		font-weight: bold;
	}

/* fil d'Ariane */
ol.breadcrumb {
	margin-top: 0 !important;
	margin-bottom: 10px !important;
	/* margin-left: 15px !important; */
	padding-left: 0 !important;
	padding-bottom: 0 !important;
	padding-top: 0 !important;
	background-color: transparent;
}

/* V6R3 */
ol.breadcrumb {
	height: 20px;
}

/* On contourne un bug avec bootstrap+IE8 */
body.ie8 .breadcrumb > li {
	/*display: inline-block;*/
	display: inline;
}

ol.breadcrumb li a {
	font-size: 13px;
	text-decoration: underline !important;
}

ol.breadcrumb li.active a {
	text-decoration: none !important;
}

/* titre de la page courante */
ol.breadcrumb li.active:last-child a {
	/* color: #4F4F4F; */
	color: color-mix(in srgb, var(--link-text-color), black 15%);
	font-weight: bold;
}

.transparent-breadcrumb { /* still used on ReportMasterControl.cs & ShipmentMasterControl.cs */
	background: transparent;
}
.little-bottom-breadcrumb { /* still used on ReportMasterControl.cs & ShipmentMasterControl.cs */
	margin-bottom: 0 !important;
}

.breadcrumb .breadcrumb-item {
	--bs-breadcrumb-divider-color: #cccccc;
}
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {}


form#aspnetForm-search-request {
	max-width: 870px;
}

	form#aspnetForm-search-request .row {
		padding-bottom: 6px;
	}

form#aspnetForm-create-request input[type="text"],
form#aspnetForm-create-request select /* NOT TESTED YET */
{
	padding-left: 0;
}

.inline {
	display: inline !important;
}

.form-horizontal .control-label { /* .form-horizontal has be removed from botstrap on V4 + form-horizontal class does not seem to be used in the solution anymore */
	padding-top: 0;
}

/* pas de retour à la ligne autorisé dans les lignes de formulaire */
div.form-group div[class*="col-"] {
	white-space: nowrap;
}


/* sous les onglets d'une Request/Offer/Article */

ul.request-form-tabs ~ table {
	margin-top: 15px;
}

	ul.request-form-tabs ~ table > tbody > tr > td {
		padding: 0 !important;
	}

/* sous-titre du contenu d'un onglet Request/Offer/Article */
td.tab_content_intro {
	white-space: nowrap;
	padding-left: 60px;
	width: 400px;
}

tr.desc img#help {
	margin-left: 10px;
}

/* cartouche d'infos communes aux différents onglets d'une Request/Offer/Article */
div.common_infos {
	position: fixed;
	width: 100%;
	z-index: 1000;
	background: #005C95;
	background: #8598A7;
	margin: 0 0 15px 0;
	border-radius: 4px;
	behavior: url(../Scripts/ie-compatibility/PIE.htc);
}

div.common_infos-header {
	height: 65px;
}

body.ie8 div.common_infos-header {
	height: 75px;
}

div.common_infos td {
	padding: 4px;
}
	div.common_infos td span {
		font-size: var(--default-font-size);
	}

div.common_infos td, div.common_infos label {
	color: white;
}

	div.common_infos td input {
		margin-top: 0;
		position: relative;
		top: 2px;
	}

	div.common_infos td.B span {
		white-space: nowrap;
	}

.border_b {
	border-bottom: 1px solid #CCC;
	margin-bottom: 10px;
}



/* contenu boutons */
.btn,
.btn span,
.btn a {
	/* font-size: 14px !important; */
}

a.btn {
	text-decoration: none;
}
a.btn:hover {
	/* border: var(--bs-btn-border-width) solid var(--bs-btn-border-color); */
	border: var(--bs-btn-border-width) solid var(--bs-btn-hover-border-color);
}


.btn-circle-action {
	color: #E8EAEE;
	border-color: transparent;
	padding: 3px 0;
	text-align: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	overflow: hidden;
}

.common_infos .btn-circle-action {
	font-size: 16px;
	width: 32px;
	height: 32px;
	margin-left: 4px;
}

.icon2 {
	width: auto;
	height: auto;
	cursor: pointer;
}

/* attention, ":not()" pas compatible IE8 */
.btn-circle-action:not(.btn-primary) {
	color: #525961;
}
/* attention, ":not()" pas compatible IE8 */
.btn-circle-action:hover:not(.btn-primary), .btn-circle-action:focus:not(.btn-primary) {
	color: #000;
}

.btn-circle-action:hover, .btn-circle-action:focus {
	/*   background: #286090; */
	color: white;
	border-color: transparent;
}

.above-btn {
	margin-left: 6px;
	padding-top: 6px;
}

.req_list li.sort-button {
	margin-left: 12px;
	margin-right: 5px;
}

body.chrome .req_list li.sort-button {
	margin-left: 8px;
}

.padding-left {
	padding-left: 30px !important;
}

.little-padding-left {
	padding-left: 10px !important;
}

.padding-right {
	padding-right: 30px !important;
}

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


ul.request-form-tabs > li > a:hover {
	border-bottom-color: #CCC;
}

ul.request-form-tabs > li > a {
	font-size: 14px;
	padding: 4px 7px;
}
/* attention, ":not()" pas compatible IE8 */
ul.request-form-tabs > li:not(.active) > a {
	color: #999 !important;
}

div.left-box {
	padding-left: 0 !important;
}


/* labels à largeur fixe */
@media (min-width: 1200px) {
	.fixed-label {
		width: 165px !important;
	}
}


form#aspnetForm label.control-label {
	font-weight: normal;
	font-size: 14px;
	padding-right: 10px;
}

/* libellés de champs dans les formulaires de recherche */
.lbl_def {
	/* padding-right: 11px; */
	padding-right: 0; /* overwrites .lbl_def (common.css) - spacing now managed by padding on <td> */
}

span.lbl_def {
	vertical-align: baseline;
}

.warning_label {
	color : red !important;
}

/* cellules de tableau contenant des calendriers */
td.td_calendar {
	white-space: nowrap;
}
/* cellules de tableau contenant des champs de saisie */
td.td_input, td.td_calendar {
	padding-top: 4px !important;
	padding-bottom: 4px !important;
}

/* champs de type date */
input.calendar {
	text-align: left;
}

input.calendar_date {
	/* width: 90px !important; */
}
input.calendar_datetime {
	/* width: 130px !important; */
}

form#aspnetForm td.td_calendar input.calendar_date {
	width: 75px !important;
}
form#aspnetForm td.td_calendar input.calendar_datetime {
	width: 125px !important;
}
body.ie form#aspnetForm td.td_calendar input.calendar_date {
	width: 100px !important;
}
body.ie form#aspnetForm td.td_calendar input.calendar_datetime {
	width: 125px !important;
}

/* Bordures séparatrices entre certaines sous-parties dans un formulaire */
.border_right, .border_top, .border_left, .border_bottom, .border_all {
	border-style: dotted;
	border-color: #43627C;
}
.border_left {
	border-width: 0 0 0 1px;
}
.border_top {
	border-width: 1px 0 0 0;
}
.border_right {
	border-width: 0px 1px 0px 0px;
}
.border_bottom {
	border-width: 0px 0px 1px 0px;
}

.border_all {
	border-width: 1px 1px 1px 1px;
}

.border_top:is(td) {
	padding-top: calc(var(--table-td-padding-y) * 2.5);
}

td.td_separ {
	width: 30px;
}
	td.td_separ.border_left {
		width: 80px;
	}
	td.td_separ.border_right {
		width: 80px;
	}

td.td_separ_large {
	/*Largeur separ(30) + largeur icone calandrier(16)*/
	width: 46px;
}

/* Cellules de tableau centrées verticalement */
table.GVBasicList td {
	vertical-align: middle;
}

/* Cellules de tableau sans padding */
td.no_padding {
	padding: 0 !important;
}

/* Totaux dans une datagrid */
.GVBasicListFooterStyle {
	background-color: #DDD;
	color: #444;
}



/* zones autrefois à fond jaunâtre */
.lbl_d2D, .lbl_d5D, .lbl_d13D {
	background-color: inherit;
}

/* champs obligatoires */
/* libellés */
form#aspnetForm label.control-label.required,
span.MandatoryLabel {
	/* 17/12/2015 : choix acté en réunion = police de ces libellés en rouge */
	/* color: #000 !important; */
	color: var(--default-text-color);
}

tr.TitleRepeater .MandatoryLabel {
	color: #333 !important;
}

tr.TitleRepeater .mandatory_star {
	color: #E60000 !important;
}

/* astérisque rouge pour les champs obligatoires */
.mandatory_star {
	padding-left: 2px;
	font-size: 15px !important;
	color: #E60000;
}

/* dans les formulaires header et Cie */
table.Critere {
	background-color: transparent;
}

	table.Critere input[type="checkbox"] {
		margin-top: 0;
		margin-right: 3px;
	}

	table.Critere > tbody > tr > td {
		padding-top: 5px;
	}

	/* libellés des checkboxs dans les formulaires header et Cie */
	table.Critere td.Normal2 label, div.dCrit label, span.NW label {
		font-weight: normal;
		color: #000;
	}

		table.Critere td.Normal2 label[for] {
			cursor: pointer;
		}
	/* toute cellule de libellé suivant une autre dans les formulaires header et Cie */
	table.Critere td.Normal2 ~ td.Normal2, td.little_padding_left {
		padding-left: 5px;
	}

/* zone définie comme devant être scrollable (cf. common.js) */
.main_scrollable_zone {
	width: 100%;
}

.p98 {
	width: 98%;
}

.p99 {
	width: 99%;
}

.p90 {
	width: 90%;
}

.no_wrap {
	white-space: nowrap;
}

.padding_bottom {
	padding-bottom: 10px;
}

.centered {
	text-align: center;
}

/* sous-titres au sein d'un tableau de données */
td.Highlight {
	background: #8598A7;
	color: white;
	padding: 8px 2px 3px 6px;
}

/* valeurs */
input.Mandatory,
textarea.Mandatory,
select.Mandatory
{
	/* 17/12/2015 : choix acté en réunion = fond blanc, et libellé suivi d'un astérisque rouge */
	/* background-color: #FFF; */

	/* border: 1px solid #8B90B7 !important; */
	/* color: #463B62 !important; */

	border: 1px solid #999999; /* a little darker than non-mandatory fields */
	/* anyway, overwritten by :  body:not(.Login_2023) form#form1 input[type="text"].form-control, form#aspnetForm input[type="text"].form-control, form#SearchPopupForm input[type="text"].form-control, body:not(.Login_2023) form#form1 input[type="password"].form-control, body:not(.Login_2023) form#form1 select, body:not(.Login_2023) button.dropdown-toggle, body:not(.Login_2023) form#form1 textarea, form#aspnetForm textarea */
}
table.GVBasicList input.Mandatory {
	background-color: #EDF5FA;
}

form#aspnetForm label.control-label.required:after {
	/*content: "*";*/
	color: #D90000 !important;
	font-weight: bold;
	font-size: 18px;
}

form#aspnetForm div.form-group {
	margin-bottom: 4px;
}

#form1 {
	margin-bottom: 0;
}
	#form1 td.rh_lbl {
		padding-right: 5px;
	}
		#form1 td.rh_lbl span {
			font-size: var(--default-font-size);
			color: inherit !important;
			font-weight: inherit !important;
			padding: inherit !important;
		}

td.Left_Ong {
	background-image: none;
	display: none;
}

td.Title {
	background-image: none;
	background-color: transparent;
	border-top: 0;
	text-indent: 0;
	padding-left: 0;
	/* color: black; */
	color: inherit; /* overwrites td.Title from colors.css */
}

td.Right_Ong {
	background-image: none;
}

.form_block {
	margin-top: 20px;
}

body:not(.Login_2023) #form1 input[type="text"] {
	display: inline; /* the following declaration is so bad... but applying almost everywhere for a long time, so can't be quickly and simply deleted. It has to be overwritten using higher-specificity declarations everywhere it is required (ex :  body.Login.Login_2023 #form1 input[type="text"] ) */
}

	body:not(.Login_2023) #form1 input[type="text"].c_0_2 {
		width: auto;
	}

body:not(.Login_2023) form#form1 input[type="text"].form-control,
form#aspnetForm input[type="text"].form-control,
form#SearchPopupForm input[type="text"].form-control,
body:not(.Login_2023) form#form1 input[type="password"].form-control,
body:not(.Login_2023) form#form1 select,
body:not(.Login_2023) form#form1 textarea,
form#aspnetForm textarea {
	padding: 1px 4px;
	/* font-size: 14px; why 14px here ? it is 12px almost everywhere */
	/* color: #131E77; */
	color: var(--fields-text-color);
	/* border: 1px solid #93B5CE; */
	border: 1px solid #cdcdcd;
	margin-top: 1px;
	margin-bottom: 1px;
}

body:not(.Login_2023) form#form1 input[type="text"].form-control,
body:not(.Login_2023) form#form1 input[type="password"].form-control,
body:not(.Login_2023) form#form1 select,
form#aspnetForm input[type="text"].form-control,
form#SearchPopupForm input[type="text"].form-control,
body:not(.Login_2023) select
{
	/* height: auto; */
	height: var(--fields-height);
}

form#aspnetForm div.obj_list ul.nav-tabs {
	position: relative;
	top: 0;
	border-bottom: 0;
	margin-right: 3px !important;
	margin-bottom: 6px;
}


form#SearchPopupForm div#ddstop {
	margin-top: 0;
}


/* V6R3 - idem, mais pour la page de connexion */
body.Login .form-control
/* ,body.Login select, */
{
	/* height: auto !important; */ /* ? not sure it leads to something good + fields style now managed globally at the beginning of this file */
	/* padding: 4px 7px !important; */ /* ? not sure it leads to something good + fields style now managed globally at the beginning of this file */
}
body.Login select {
	/* height: auto; */ /* ? not sure it leads to something good + fields style now managed globally at the beginning of this file */
	/* padding: 4px 3px; */ /* initially reduced horizontal padding because native select already apply kinda inner spacing BUT not required anymore because form-select has been added this select tag then */
}

/* idem, mais pour les formulaires Ext.Net */
#form1 div.x-panel-body input[type="text"].form-control,
form#aspnetForm div.x-panel-body input[type="text"].form-control,
#form1 div.x-panel-body input[type="password"].form-control,
#form1 div.x-panel-body select, /* ! TODO : to be checked */
#form1 div.x-panel-body textarea,
form#aspnetForm div.x-panel-body textarea,
.x-form-field, .x-form-item-label {
	font-size: var(--default-font-size);
	font-family: var(--default-font-family);
}
/* libellés : pas en gras, et en noir */
.x-form-item-label {
	/* font-weight: normal !important; */
	/* COULEUR LIBELLÉS */
	/* color: #333 !important; */
	/* padding-right: 5px !important; */
	box-sizing: border-box !important;
}
.x-form-item label.x-form-item-label { /* overwrites ext.axd */
	padding-right: 5px;
	/* padding-top: 5px !important; */ /* let padding:3px apply from ext.axd */
}

/* indicatifs téléphoniques */
form#aspnetForm input[type="text"].form-control.intcode {
	display: inline !important;
	width: 35px !important;
}

/* V6R3 - tous les champs sont par défaut en "display: inline;"... comme ça, c'est mieux ! */
form#aspnetForm .form-control {
	/* display: inline; */
	display: inline-block;
}

/* V6R3 - les lignes de résultats dans les autocomplete */
tr.list-item td {
	border: 1px solid transparent;
	padding-right: 4px;
}


form#aspnetForm div.row {
	margin-bottom: 2px;
	margin-bottom: 8px;
}

h1, h2, h3, h4, h5, h6 {
	/* color: #475B72; */
	color: var(--title-text-color); /* NOT TESTED YET */
}

h4 {
	margin-left: 15px;
	margin-bottom: 10px;
}

div.container {
	width: auto;
	margin: 10px 15px;
	padding: 0;
}


form.form-inline {
	margin: 20px 15px;
}


/* boutons tout en haut à droite de la nav */
button.btn-dds-header {
	padding: 3px 8px 2px 8px !important;
	font-size: 15px !important;
	font-weight: bold !important;
}

button.btn-dds_blue {
	background: #5392D5 !important;
	color: white !important;
}

	button.btn-dds_blue:hover {
		background: #335f8d !important;
	}

button.btn-dds_darkgray {
	background: #333333 !important;
	color: white !important;
}

	button.btn-dds_darkgray:hover {
		color: #999 !important;
	}

button.btn-dds-header[class^="icon-"] {
	font-size: 24px !important;
}

button.btn-dds-header-not-first {
	margin-left: 15px;
}

span.btn-dds-header-container {
	display: inline;
}

.left_logos {
}



/* interligne dans un formulaire */
td.inside_form div.row,
div.form-container div.form-group {
	margin-top: 4px !important;
}

/* labels */
label {
	white-space: nowrap;
	/* color: #666; */
}

.Border_B label {
	white-space: normal;
}

.Border_B span.NW label {
	white-space: nowrap;
}

td.rh_lbl span.label {
	/* color: #363636; (commented but not tested yet) */
}

.btn:not(.btn-primary):not(.btn-dds_blue):not(.dropdown-toggle) {
	/* background: #D6D6DA; */
}
	.btn:not(.btn-primary):not(.btn-dds_blue):not(.dropdown-toggle):hover {
		/* background: #CCCCCC; */
	}

body.ie8 button.btn_blue,
body.ie8 button.btn_gray,
body.ie8 a.btnLogin {
	position: relative;
	border-radius: 3px !important;
	behavior: url(../Scripts/ie-compatibility/PIE.htc) !important;
}

body.ie8 button.btn_gray {
	background: #D6D6DA !important;
}

body.ie8 .btn:not(.dropdown-toggle):hover {
	background: #CCCCCC;
}

body.ie8 textarea {
	border: 1px solid #93B5CE;
}
/*
--- Supprime les retours chariots... ce n'est pas ce qu'on souhaite dans une textarea multiligne
textarea
{
	white-space: normal;
}
*/

.btn-primary {
	background: #005C95;
	background: #0079FF;
	background: #0064D6 !important;
	border: 1px solid transparent;
}

	.btn-primary:hover {
		background: #2B64A4 !important;
	}


/* style par défaut d'un bouton */
.btn-primary {
	background: #15467E !important;
	color: white;
	border: none !important;
}

	.btn-primary a {
		color: white !important;
		text-decoration: none !important;
	}

#action_buttons {
	display: inline-block;
	padding-top: 6px;
}

	#action_buttons a {
		/*background-color: #F5F5F5;*/
	}

.common_infos .btn-primary {
	background: #43627C !important;
}

	.common_infos .btn-primary:hover {
		background: #244D6F !important;
	}

/* boutons bleus avec libellés (+ dropdown menus) */
div.obj_list .btn-primary,
.above-btn .btn-primary,
.top-buttons .btn-primary {
	background: #0F4873 !important;
}

	div.obj_list .btn-primary:hover,
	.above-btn .btn-primary:hover,
	.top-buttons .btn-primary:hover {
		background: #0D558E !important;
	}

/* gros bouton dans liste request/offers "LIGHT" */
div.req_list_light .btn-primary {
	background: #43627C !important;
}

	div.req_list_light .btn-primary:hover {
		background: #244D6F !important;
	}

ul.search-buttons li button {
	background: #0F4873 !important;
}

/*
.jumbotron-container
{
	width: auto;
	margin-left: 15px;
	margin-right: 15px;
}
.jumbotron
{
	padding: 20px 40px 30px 40px !important;
}

.jumbotron-transparent-container .jumbotron
{
	background: transparent;
	padding: 0 20px 3px 0 !important;
}
.jumbotron h1
{
	margin-top: 10px;
	margin-bottom: 20px;
	font-size: 35px;
}
.jumbotron p
{
	font-size: 17px;
}
.jumbotron-transparent-container .jumbotron p
{
	color: #5B7592 !important;
}
*/



/* ****************************************** */
/* CRITÈRES DE RECHERCHE */
/* ****************************************** */

/* pour que d'un tableau de critères à l'autre, les champs et libellés soient bien alignés verticalement */
table.DefaultCriterias .td_lbl_def {
	/* width: 160px; */ /* we do not limit the width of the td (for label) anymore, we now limit the width of the fields using max-width property */
}
table.DefaultCriterias .td_lbl_def > :where(span, label) { /* IN TEST */
	display: inline-block; /* to make max-width effective */
	max-width: var(--fields-max-width);
	white-space: normal; /* to prevent cropped text in the case of long text value */
}

table.DefaultCriterias .td_txt_def {
	/* width: 140px; */ /* we do not limit the width of the td (for field) anymore, we now limit the width of the fields using max-width property */
}

.td_lbl_def, .td_txt_def {
	/* padding-top: 4px; */ /* why ? */
}

/* libellés des cases à cocher et radio buttons */
label.lbl_def, label[for] {
	font-weight: normal;
	margin-left: 4px;
	padding-left: 0;
}
input[type="checkbox"] + label[for] {
	cursor: pointer;
}

input[type="radio"] {
	margin-top: 0;
}

div.radio-or-checkbox {
	/* does not look good on DSD/Reports/DeliveryReport_criterias.aspx => too much vertical space betwwen lines */
	/* padding-top: 2px;
	padding-bottom: 4px; */
	
	padding: 1px 0;
}
.radio-or-checkbox label[for]:not([for=""]) {
	cursor: pointer;
}

td.pad_rl5 label {
	margin-top: 4px;
	margin-bottom: 0;
}

.td_txt_def.td_with_buttons a {
	border-radius: 4px;
	border: 0px solid #444488;
	background: #15467E;
	color: #FFF;
	text-decoration: none;
	padding: 5px 10px;
}

	.td_txt_def.td_with_buttons a:hover {
		background: #0048A0;
		color: #FFF !important;
	}

/* ****************************************** */

/* quand il faut laisser, sur la droite, la place correspondant à une icône de recherche contextuelle */
.search_icon_ghost {
	margin-right: 16px;
}


.square-box {
	background: #FBFBFD;
	/* border: 1px solid #D6D6DA; */
	/* border: 1px solid #E4E4E8; */
	border: 1px solid #C6D6DE;
	padding: 10px;
	border-radius: 4px;
}

.square-box-title {
	padding: 9px 8px 7px 10px;
	/* background-color: #D6D6DA; */
	/* background-color: #E4E4E8; */
	background-color: #C6D6DE;
	border-radius: 2px 2px 0 0;
}
	.square-box-title span {
		font-size: var(--default-font-size);
	}

.square-box-body {
	width: 100%;
	border-top: 0;
	overflow: auto;
	border-radius: 0 0 4px 4px;
}

.box_container {
	margin-bottom: 15px;
}

.square-box-active {
	border: 1px solid transparent !important;
}

/* Homepage - liens permettant de contracter/déployer le contenu de chaque boi-boîte */
div.closeOrOpenBox {
	padding-right: 10px;
}

a.closeOrOpenBox {
	font-size: 20px;
	text-decoration: none;
	background: #EDEDF0;
	color: #666 !important;
	border: 1px solid #D6D6D8;
	padding: 1px 10px;
	position: relative;
	top: -3px;
}

.home_boxes a.closeOrOpenBox {
	top: 3px;
}

a.closeOrOpenBox:hover {
	background: #F5F5F5;
}

.GVBasicListHeaderStyle {
	/* background-color: #646977; */
	/* background-color: #43627C; */
	background-color: var(--table-header-bg-color);
}


/* ---------------------------------------------------------- */
/* Version "fond bleu foncé" des barres de titre en homepage */
.square-box-title {
	padding-top: 6px;
	padding-bottom: 4px;
	background-color: #15467E;
}

	.square-box-title span {
		color: white;
	}

	.square-box-title .square-box-body span {
		color: #222;
	}

.parent-square-box-title {
	padding-right: 4px;
	padding-left: 4px;
}

.child-square-box-title {
	background-color: #D6D6D6 !important;
}

	.child-square-box-title span {
		color: #333 !important;
		font-weight: bold !important;
	}
/* ---------------------------------------------------------- */


.MainFilterBox {
	margin-top: 7px;
	margin-bottom: 3px;
}

.square-box-title > div.closeOrOpenBox {
	padding-right: 3px;
}

div.closeOrOpenBox > a.closeOrOpenBox {
	font-size: 15px;
}

.box_container > div.closeOrOpenBox > a.closeOrOpenBox,
.simple-square-box-title > div.closeOrOpenBox > a.closeOrOpenBox {
	background: #15467E;
	color: #AAA !important;
	border: 1px solid #779;
}

	.box_container > div.closeOrOpenBox > a.closeOrOpenBox:hover,
	.simple-square-box-title > div.closeOrOpenBox > a.closeOrOpenBox:hover {
		background: #124D93;
	}

/* quand une box contient une datagrid */
.square-box-body .GVBasicListHeaderStyle {
	background-color: #15467E;
}

.square-box-body table.GVBasicList > tbody > tr > td,
.square-box-body table.GVBasicList > tr > td,
.square-box-body tr.GVBasicListHeaderStyle th {
	padding: 3px 4px;
}
/* zone qui devient "fantôme" après application du pluggin jquery.fixedHeaderTable */
.square-box-body div.fht-tbody tr.GVBasicListHeaderStyle th {
	padding: 2px 4px;
}

.fht-table,
.fht-table thead,
.fht-table tfoot,
.fht-table tbody,
.fht-table tr,
.fht-table th,
.fht-table td {} /* overwrites defaultTheme.css */

.fht-table thead th {
	font-weight: bold; /* overwrites defaultTheme.css */
}


/* ---------------------------------------------------------- */

/* Depuis que l'appel à la fonction DDSGridViewComputeSize() a été désactivée, il faut compenser la perte de largeur des tableaux */
table.GVBasicList {
	--gvbasiclist-cell-padding-x: 4px;

	width: 100%;

	color: inherit; /* IN TEST - overwrites #ffffff form Scripts/colors.css - required beause placeholder "No data available." does not get visible on a white background (ex : Quotations > Pending quotations -> details of a quotation) */
}

	table.GVBasicList th a:hover,
	tr.GVBasicListPagerStyle a:hover {
		color: #EEE !important;
	}

	table.GVBasicList > tbody > tr > td,
	table.GVBasicList > tfoot > tr > td, /* required for Common/Admin/dynamicArray_edit.aspx */
	table.GVBasicList > tr > td {
		border: 1px solid #CCC;
		padding: 6px var(--gvbasiclist-cell-padding-x);
	}

tr.GVBasicListHeaderStyle th {
	padding: 6px var(--gvbasiclist-cell-padding-x);
	font-size: var(--default-font-size);
	/* font-weight: normal !important; */
	border-color: transparent;
}

tr.GVBasicListHeaderStyle th {
}

table.GVBasicList tr.GVBasicListHeaderStyle th.frozenTop {
	/* font-weight: normal !important; */
	border-color: transparent;
}

table.GVBasicList tr.MouseOver td {
	background-color: #E5E5E5;
	color: #000;
}


table.GVBasicList tr.GVBasicListHeaderStyle th,
div.dataTableContainer tr.fht-table.GVBasicListHeaderStyle th.frozenTop,
th.frozenTop {
	color: white !important;

	/* technique to get the head cells aligned with body cells (reduced x-padding OR border) */
	padding-left: calc(var(--gvbasiclist-cell-padding-x) - 1px);
	padding-right: calc(var(--gvbasiclist-cell-padding-x) - 1px);
	/* border: 1px solid #43627C !important; */
}

/* zone qui devient "fantôme" après application du pluggin jquery.fixedHeaderTable */
div.fht-tbody tr.GVBasicListHeaderStyle th {
	padding: 5px var(--gvbasiclist-cell-padding-x);
}



/* pagination des datagrid alignée à droite */
tr.GVBasicListPagerStyle table {
}

	tr.GVBasicListPagerStyle table td {
		padding: 3px 0 1px 0;
	}



/* liste des offres */
div.obj_list .nb_offers {
	color: #0D144C;
}

div.obj_list li.active a, div.offers {
	background: #FBFBFD;
}

div.offers {
	border: 1px solid #CCC;
	border-radius: 0 0 4px 4px;
	behavior: url(../Scripts/ie-compatibility/PIE.htc);
	border-width: 0 1px 1px 1px;
}

.btn_noteDiv {
	width: 60px;
	padding: 0 !important;
	margin-top: 1px;
	margin-bottom: 5px;
	height: auto;
	font-size: 11px;
	color: #444;
}

.btn_noteDiv_OK {
	font-weight: bold;
}


/* Listes de Requests/Offers, etc */
.bordersList {
	border-color: #888 !important;
	border-color: #CCCCCC !important;
}

div.req_list a, ul.search-buttons a {
	text-decoration: none;
}

tr.SelectedRowStyle a {
	color: white !important;
}

/* colonnes des lignes ayant le "focus" dans la liste request/offers "LIGHT" */
div.req_list_light tr.SelectedRowStyle td,
div.req_list_light tr.SelectedRowStyle td a {
	color: #000 !important;
}

div.req_list_light tr.SelectedRowStyle td {
	background: #E3E3E3 !important;
}

	div.req_list_light tr.SelectedRowStyle td.T,
	div.req_list_light tr.SelectedRowStyle td.S {
		background: #CCCCCC !important;
	}

	div.req_list_light tr.SelectedRowStyle td.O {
		background: #BFBFBF !important;
	}

tr.desc {
	background-color: transparent;
}

	tr.desc td {
		color: #555;
	}

/* Couleurs de fond des colonnes dans les listes de Requests/Offers, etc */
#tbROA tr {
	background-color: white;
	background-color: #F1F1F4;
}

	#tbROA tr tr {
		background-color: inherit;
	}

#tbROA .T, .T, td.RO_bur {
	background-color: #cbcbcb;
	background-color: white;
	background-color: #E4E4E4;
}

.ofcomps, #tbROA .S, .S, .GvTablePopup, .StatCell1, .td.RO_fou {
	background-color: #b9b9b9;
	background-color: white;
	background-color: #C6C6C6;
	background-color: #BEBEBE;
	background-color: #D8D8D8;
}

.O, #tbROA .O, .OFd {
	background-color: #b8c8e0;
	background-color: white;
	background-color: #CAD6E8;
	background-color: #B1B1B1;
	background-color: #BEBEBE;
	background-color: #D8D8D8;
}


div.request {
	padding: 18px 0;
	border-top: 1px solid #CCC;
	margin-left: 10px;
	margin-right: 10px;
}

label.item_checkbox {
	position: relative;
	top: 2px;
	margin-right: 4px;
}

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

form#aspnetForm div.row,
div#page_create_request div.tab-pane div.row {
	/* margin-left: 0; */
	margin-bottom: 0 !important;
}

body.not-ie table.main_form {
	display: none;
}

div.request:first-of-type {
	padding-top: 30px;
	border-top: 0;
}

div.offers div.request:nth-child(even) {
	background: #FBFBFD;
}

div.req_list div.item_list div {
	margin-left: 0;
	overflow: hidden;
	font-size: 12px;
}

div.req_list div.request_id, div.art_list div.art_link, div.req_list div.offer_id, div.req_list div.supplier_code, div.req_list div.trading_code {
	width: 90px;
	background: #2A6B8F;
	padding-top: 7px;
	padding-bottom: 6px;
	margin-left: 0;
}

div.art_list div.art_link {
	overflow: hidden;
	font-size: 11px;
}

div.req_list div.request_id, div.art_list div.art_link {
	background: #337AC5;
	background: #141F78;
	background: #1D62AF;
}

	div.req_list div.request_id:hover, div.art_list div.art_link:hover {
		background: #1D5E9E;
		background: #0E6DD7;
	}

a.product_code {
	width: 90px;
	background: #1D62AF;
	background: #15467E;
	display: inline-block;
	text-decoration: none;
	font-weight: normal;
	border: 0;
	color: #FFF;
	padding: 5px 10px 3px 10px;
	border-radius: 4px;
}

	a.product_code:hover {
		background: #0E6DD7;
		background: #2B64A4;
		color: #FFF !important;
	}

div.req_list div.trading_code {
	background: #778899;
	background: #90959A;
	background: #8598A6;
	background: #5F7382;
	background: #98A0AF;
	text-shadow: 1px 1px #778;
}

div.req_list div.supplier_code {
	background: #777;
	background: #777E90;
	width: 80px;
	width: auto;
}

div.req_list div.offer_id {
	background: #337AC5;
	background: #245089;
	background: #1E9700;
	background: #233848;
}

div.req_list div.offer_id, td.td_Offer .status_code {
	width: 105px;
}

div.offer_id_container {
	margin-left: 0 !important;
	padding-left: 0 !important;
}

div.offer_id:hover {
	background: #033962 !important;
}

div.req_list div.code_INI {
	background: #8598A6;
}

	div.req_list div.code_INI:hover {
		background: #6D8595;
	}

div.req_list div.code_OK {
	background: #268024;
}

	div.req_list div.code_OK:hover {
		background: #169F0F;
	}

div.req_list div.code_NOK {
	background: #712424;
}

	div.req_list div.code_NOK:hover {
		background: #8F0606;
	}


div.req_list div.request_thumb_container {
	margin-left: 10px;
	width: 60px;
	text-align: center;
}

div.req_list div.request_offer_label {
	display: none;
	margin-left: 10px;
	font-size: var(--default-font-size);
	width: 140px;
	line-height: 13px;
}

div.req_list div.offer_currency {
	width: 120px;
}

div.req_list img.request_thumb {
	max-height: 40px;
}

div.req_list div.request_title, div.art_list .art_title {
	width: 80px;
	font-size: 14px;
	font-weight: bold;
}

div.art_list .art_title {
	font-size: 13px;
}

div.req_list div.request_desc, div.art_list div.art_desc {
	width: 212px;
}

div.req_list div.request_collection {
	width: 210px;
}

div.req_list div.request_currency {
	width: 130px;
}

span.col_content_title {
	font-style: italic;
	color: #888;
}

div.req_list div.request_total_resp {
	margin-left: 30px;
	width: 150px;
	position: relative;
	top: -3px;
}

	div.req_list div.request_total_resp a {
		font-weight: bold;
		font-size: 14px;
	}

div.offer {
	margin-bottom: 5px;
}

	div.offer div.offer_thumb {
		width: 35px;
	}

	div.offer img.offer_thumb {
		max-height: 30px;
	}

.all_offers_header {
	margin-left: 10px;
}

.request_offers_header {
	margin-top: 10px;
	margin-bottom: 4px;
	margin-left: 15px;
}

.offers_header a {
	font-size: 14px !important;
}

.offers_header {
	display: block;
}

	.offers_header a {
		font-size: 13px;
	}

div.offers_body {
	margin-top: 6px;
}

div.inc_level {
	margin-top: 0;
	margin-right: 4px;
	margin-left: 4px !important;
	float: left;
	width: 36px;
	height: 20px;
	background: url('../images/sub_comment_dark_blue.png') no-repeat 14px -9px;
}

	div.inc_level div {
		padding-top: 10px !important;
	}

div.supplier_inc_level {
	margin-left: 60px !important;
}

div.offer_inc_level {
	margin-left: 114px !important;
}

div.direct_offer_inc_level {
	margin-left: 60px !important;
	width: 90px;
}

/* contenu d'un onglet */
.tab-pane {
	padding-top: 10px;
}

:is(.hasTips, .tipsInfoIcon, img[data-bs-toggle="tooltip"]):not(input, [onclick]) { /* (not sure if `img[data-bs-toggle="tooltip"]` happens..) */
	cursor: help;
}

/* Bootstrap tooltip */

/* structure :
<div class="tooltip bs-tooltip-auto fade show" role="tooltip" id="tooltip580279" data-popper-placement="top" data-popper-reference-hidden="" data-popper-escaped="" style="position: absolute; inset: auto auto 0px 0px; margin: 0px; transform: translate(994px, -252px);">
	<div class="tooltip-arrow" style="position: absolute; left: 0px; transform: translate(45px, 0px);"></div>
	<div class="tooltip-inner">tooltip text value got from the title attribute of the hovered element</div>
</div>
*/

.tooltip {
	--bs-tooltip-max-width: 250px; /* original value : 200px */
	
	background: transparent; /* overwrites colors.css - (background color of the tooltip is worn by the tooltip-inner element) */
	border: 0; /* overwrites common.css */
	/*z-index: 100001 !important;*/ /* sinon, les popup ext.net passent devant - NOT REALLY TESTED, HARD TO REPRODUCE*/
}
.tooltip-inner {
	/* max-width: 250px; */
	text-align: left;
}
.tooltip-inner img {
	max-width: 230px;
}

.tip_internal_id {
	padding-top: 5px;
	font-size: 10px;
	color: #DDD;
	font-style: italic;
}

div.row_customer {
	padding: 5px 0 !important;
}
	/* couleuyrs de fonds intermittentes */
	div.row_customer:nth-child(2n+1) {
		background-color: white;
	}

	div.row_customer:nth-child(2n+2) {
		background-color: #E5E5E5;
		border-top: 1px solid #DDDDDD;
	}

	div.row_customer:hover {
		background-color: #D9D9D9;
	}

/* champs en lecture seule */
/* 17/12/2015 : choix acté en réunion = champs en lecture seule davantage grisé */
.form-control[readonly],
form#aspnetForm input[class^=txtB][readonly],
form#aspnetForm select:where([class^=ddl], [class^=txtB])[readonly],
form#aspnetForm input[type="text"].form-control[readonly],
div.x-panel-body input[readonly],
div.x-panel-body textarea[readonly] {
	border-color: #c8c8c8;
	background-color: #f8f8f8;
	/* color: #888; */
}
/* (the only difference betwwen disabled and readonly fields is that readonly fields value is still selectable) */
.form-control:is([disabled], :disabled),
form#aspnetForm input[class^=txtB]:is([disabled], :disabled),
form#aspnetForm select:where([class^=ddl], [class^=txtB]):is([disabled], :disabled),
form#aspnetForm input[type="text"].form-control:is([disabled], :disabled),
fieldset[disabled] .form-control,
div.x-panel-body input:is([disabled], :disabled),
div.x-panel-body textarea:is([disabled], :disabled) {
	border-color: #c8c8c8;
	background-color: #f8f8f8;
	color: #888888;
}

/* ⚠️les liste déroulantes "version ext.net" disposent de l'attribut "readonly" mais ne sont pas vraiment readonly.. elles restent modifiables.. */
div.x-dropdown-list input.x-form-text[readonly],
div.x-editor-dropdown-list .x-form-field-wrap input.x-form-text[readonly] {
	border: 1px solid #93B5CE;
	background-color: #FFFFFF;
	color: inherit;
}
/* required on DSD/Chartering/Chartering_RDV2.aspx */
form#aspnetForm div.x-dropdown-list input.x-form-field.form-control:is([disabled], :disabled) { /* overwrites form#aspnetForm input[type="text"].form-control:is([disabled] */
	background-color: #FFFFFF;
}
/*
div.x-dropdown-list input.x-form-text,
div.x-editor-dropdown-list .x-form-field-wrap input.x-form-text {
	border: 1px solid #93B5CE;
	background-color: #FFFFFF;
	color: var(--fields-text-color);
}
div.x-dropdown-list:hover input.x-form-text,
div.x-editor-dropdown-list:hover .x-form-field-wrap input.x-form-text {
	border-color: #4b83b2;
}
*/

.btn.disabled, [disabled].btn, fieldset[disabled] .btn {
	border-color: #C8C8C8 !important;
	background-color: #F8F8F8 !important;
	color: #888 !important;
	opacity: 1;
}



/* champs de saisie : couleur de bordure plus marquée au passage de la souris et au focus */
form#aspnetForm input[type="text"]:not(:disabled):where(:hover, :focus) {
	/* border: 1px solid #4B83B2 !important; */ /* TODO : probably not required anymore.. already set by input:not(:disabled):where(:hover, :focus) at the top of the file */
	border-color: #4b83b2;
}
form#aspnetForm select:not(:disabled):where(:hover, :focus) {
	/* border: 1px solid #4B83B2 !important; */ /* TODO : probably not required anymore.. already set by select:not(:disabled):where(:hover, :focus) at the top of the file */
	border-color: #4b83b2;
}

.Mandatory {
	background-color: #C9D3DB;
	background-color: #FFF;
}

table.Mandatory {
	background-color: transparent;
}

select.Mandatory {
	/* color: #000; */
}

textarea.Mandatory {
	/* color: #222222; */
}

.menu_control {
	background: #43627C;
}

td.Border_BL {
	border-bottom: #555555 1px dotted;
	border-right: #888 1px solid;
}


div.introduction {
	margin: 15px 10px 25px 10px;
}


.CTPH_Site {
	height: 400px;
}

td.TitleRepeater_lr5 {
	background-color: #484B4B;
	color: White;
	padding-left: 10px;
}

table.little-cell-padding td {
	padding: 3px;
}


.dvAsyncPB_sub {
	border: 0;
}

/* petit cartouche avec valeurs contextuelles */
table.DefaultStep, table.DefaultCriterias, table.DefaultSummary {
	border-color: #AAA !important;
	border: 0;
}

table.DefaultSummary {
	background-color: #F1F1F7;
}
/*
table.DefaultSummary + table.DefaultTable,
table.DefaultSummary + .dataTableContainer,
table.DefaultTable + .dataTableContainer {
	margin-top: var(--vertical-space-btw-blocks);
}
*/
:is(table.DefaultSummary, table.DefaultTable) + :is(table.DefaultTable, .dataTableContainer) {
	margin-top: var(--vertical-space-btw-blocks);
}

/* used on Preinvoice_list.aspx */
.x-panel-noborder:not(.x-column, #PanelNorth, #PanelCenter):has(+ .x-panel-noborder) {
	margin-bottom: var(--vertical-space-btw-blocks);
}

table.DefaultSummary :is(.td_lbl_def, .td_txt_def) {
	/* padding: 3px 0px; */ /* commented because should not overwrite var(--table-td-padding-y) var(--table-td-padding-x) on DSD/UAT/UAT_uatv.aspx */
}

table.header_summary {
	min-height: 56px;
}

	table.header_summary td {
		vertical-align: center;
	}

	table.header_summary span {
		white-space: nowrap;
	}

/* pour éviter qu'un contenu de page ne s'insère entre le texte d'intro et les boutons */
table.header {
	width: 100%;
}

td.td_tab_title {
	/* background-color: #43627C; */
	background-color: transparent; /* overwrites bg color from colors.css */
	text-align: left;
	/* padding: 20px 4px 4px 4px; */
	padding: 4px; /* spacing on top not required anymore */
}

	td.td_tab_title .lbl_title {
		/* color: #141F78; */ /* overwrites td.td_tab_title color from colors.css */
		color: var(--title-text-color); /* overwrites td.td_tab_title color from colors.css */
	}

table.messages td {
	font-size: 14px !important;
	color: #000;
	padding: 4px;
}

/* used on DSD/Chartering/Chartering_RDV2_Liv.aspx */
.MenuStaticSelectedStyle,
.MenuDynamicSelectedStyle,
.SelectedRowStyle,
.MenuDynamicHoverStyle,
.MenuStaticHoverStyle {
	background-color: #8598A7;
	color: #ffffff;
}
.GVBasicListSelectedRowStyle {
	background-color: #8598A7;
	color: #ffffff;
}
.GVBasicListSelectedRowStyle td a {
	color: #ffffff;
}

.rcdt2 {
	background-color: #565656;
}

.popupWindow, .tinyPopup {
	padding: 10px;
	background-color: #8A9CAE;
	border: 1 !important;
	background-color: #F7F7FC;
	border-color: #EEEEF2 !important;
	/* ombrage */
	-moz-box-shadow: 2px 4px 6px #BBBBBB; /* mozilla */
	-webkit-box-shadow: 2px 4px 6px #BBBBBB; /* chrome + safari */
	box-shadow: 2px 4px 6px #BBBBBB; /* opéra */
	display: none;
}

.popupWindow {
	z-index: 1001;
	border-color: #BCC1C4 !important;
	background-color: #F7F7FC;
	background-color: #FFD6C5;
}

td.GCTitle {
	padding: 3px;
	background: #CE674E;
	color: white;
}

.border_lbr {
	border-width: 0 !important;
	width: 100%;
}

.UserInfoDiv {
	background-color: #8598A7;
	border: 0 !important;
	width: auto;
	height: auto;
	position: absolute;
	z-index: 100;
	left: 250px;
	top: 10px;
	border: 1px solid;
}

	.UserInfoDiv, .UserInfoDiv td, .UserInfoDiv span {
		color: white !important;
	}

.UserVersionDiv {
	width: auto;
	height: auto;
	position: absolute;
	z-index: 100;
	left: 250px;
	top: 10px;
	border: 1px solid;
}

.UserInfoDiv, .UserVersionDiv {
	/* ombrage */
	-moz-box-shadow: 2px 4px 6px #BBBBBB; /* mozilla */
	-webkit-box-shadow: 2px 4px 6px #BBBBBB; /* chrome + safari */
	box-shadow: 2px 4px 6px #BBBBBB; /* opéra */
}
	.UserInfoDiv table td {
		padding: 4px 10px;
	}
		.UserInfoDiv table td span, .UserVersionDiv table td span {
			font-size: var(--default-font-size);
			font-weight: normal;
		}

#top_floatting_message {
	position: absolute;
	z-index: 10000;
	border: 1px solid #DDDDDD;
	font-size: var(--default-font-size);
	background: white;
	padding: 10px 30px 30px 30px;
	/* ombrage */
	-o-box-shadow: 0 2px 20px #CCCCCC;
	-webkit-box-shadow: 0 2px 20px #CCCCCC;
	-moz-box-shadow: 0 2px 20px #CCCCCC;
}

	#top_floatting_message a {
		text-decoration: underline;
	}

		#top_floatting_message a:hover {
			text-decoration: none;
		}

		#top_floatting_message a.btn_close {
			float: right;
			position: relative;
			top: -10px;
			left: 12px;
			font-family: var(--default-font-family);
			margin-top: 10px;
			font-size: 14px;
			font-weight: bold;
			color: #777;
		}


/* custom calendrier JQuery (datetimepicker) */
body .xdsoft_datepicker .xdsoft_option {
	font-size: var(--default-font-size);
}
body .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today { /* cell of the day */
	color: #0f4873;
	font-weight: bold;
	background-color: rgba(0, 0, 0, 0.05);
	box-shadow: inset 0 0 0px 1px #0f4873;
}
body .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today:hover {
	box-shadow: inset 0 0 0px 1px #0f4873 !important;
}
body .xdsoft_datetimepicker .xdsoft_calendar td:hover,
body .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div:hover {
	background: rgba(0,0,0,0.1) !important;
	color: inherit !important;
}
body .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
body .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
body .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current { /* selected cell - must be defined after td.xdsoft_today */
	background: #0f4873;
	box-shadow: #0f4873 0 1px 3px 0 inset;
	color: #ffffff;
	/* font-weight: 700; */
}

td.notFirstCol {
	border-left: 1px solid #E5E5E5;
}

td.tdMessageTitle {
	padding: 10px;
	color: white;
}

td.tdMessageTitle,
tr.rqof_header td.TitleRepeater {
	/* background-color: #868989; */
	background-color: #667480 !important;
}

.ddl_35D, .ddl_10D {
	border: 0 !important;
}

.menuIcon a {
	background-repeat: no-repeat;
	background-position: 0 5px; /*padding-left: 20px;*/
}

.menuIcon_add a {
	background-image: url('../images/menu-icons/add.png');
}

.menuIcon_attach a {
	background-image: url('../images/menu-icons/attach.png');
}

.menuIcon_calendar a {
	background-image: url('../images/menu-icons/calendar.png');
}

.menuIcon_collection a {
	background-image: url('../images/menu-icons/collection.png');
}

.menuIcon_compare a {
	background-image: url('../images/menu-icons/compare.png');
}

.menuIcon_changeStatus a {
	background-image: url('../images/menu-icons/change-status.png');
}

.menuIcon_delete a {
	background-image: url('../images/menu-icons/delete.png');
}

.menuIcon_display a {
	background-image: url('../images/menu-icons/display.png');
}

.menuIcon_duplicate a {
	background-image: url('../images/menu-icons/duplicate2.png');
}

.menuIcon_export a {
	background-image: url('../images/menu-icons/export.png');
}

.menuIcon_followUp a {
	background-image: url('../images/menu-icons/follow-up.png');
}

.menuIcon_leaflet a {
	background-image: url('../images/menu-icons/cloth.png');
}

.menuIcon_quantities a {
	background-image: url('../images/menu-icons/collection.png');
	background-image: url('../images/menu-icons/stats.png');
}

.menuIcon_packaging a {
	background-image: url('../images/menu-icons/cube.png');
}

.menuIcon_page a {
	background-image: url('../images/menu-icons/page.png');
}

.menuIcon_preSelect a {
	background-image: url('../images/menu-icons/pre-select.png');
}

.menuIcon_price a {
	background-image: url('../images/menu-icons/price.png');
}

.menuIcon_costsheet a {
	background-image: url('../images/menu-icons/prices.png');
}

.menuIcon_edit a {
	background-image: url('../images/menu-icons/edit.png');
}

.menuIcon_valid a {
	background-image: url('../images/menu-icons/enable.png');
}

.menuIcon_invalid a {
	background-image: url('../images/menu-icons/disable.png');
}

.menuIcon_prepare a {
	background-image: url('../images/menu-icons/dsi-prepare.png');
}

.menuIcon_prepare_light a {
	background-image: url('../images/menu-icons/dsi-prepare-light.png');
}

.menuIcon_calculate a {
	background-image: url('../images/menu-icons/dsi-calculate.png');
}

.menuIcon_generate a {
	background-image: url('../images/menu-icons/dsi-generate.png');
}

.menuIcon_split a {
	background-image: url('../images/menu-icons/split.png');
}

.menuIcon_extract a {
	background-image: url('../images/menu-icons/extract.png');
}


.highlighted, .objNOK {
	padding: 3px 10px;
	color: white;
	border-radius: 2px;
	/* ombrage */
	-moz-box-shadow: 2px 4px 6px #557189; /* mozilla */
	-webkit-box-shadow: 2px 4px 6px #557189; /* chrome + safari */
	box-shadow: 2px 4px 6px #557189; /* opéra */
	behavior: url(../Scripts/ie-compatibility/PIE.htc);
}

.highlighted, .objNOK {
	background-color: #CBAA00;
	background-color: #0079E0;
	background-color: #F37760;
}

.highlighted_box {
	background: #14A014;
}

.objNOK {
	background-color: #FF0000;
	margin-left: 4px;
}

td.Border_BL, td.Border_B {
	padding: 4px;
}

span.NW label {
	margin-right: 10px;
	margin-bottom: 0;
	margin-left: 2px;
}

span.NW input[type="radio"], span.NW input[type="checkbox"] {
	margin-top: 0;
}

/* un script JS va afficher les cases du listing Request/Offers en temps et en heure, après repositionnement de celles-ci */
.req_list .general_checkboxes {
	display: none;
}

.general_checkboxes, .general_checkboxes div {
	position: absolute;
	z-index: 1000;
}

.general_checkboxes {
	left: 0;
	top: 32px;
}

.general_checkbox_request {
	left: 20px;
}

.general_checkbox_request {
	left: 14px;
}

.art_checkbox_request {
	left: 10px;
	top: -4px;
}

.general_checkbox_trading {
	left: 562px;
}

body.firefox .general_checkbox_trading {
	left: 558px;
}

.general_checkbox_supplier {
	left: 668px;
}

body.firefox .general_checkbox_supplier {
	left: 660px;
}

.general_checkbox_offer {
	left: 821px;
}

body.firefox .general_checkbox_offer {
	left: 804px;
}

body.ie8 .general_checkbox_offer {
	left: 817px;
}

/* toutes les cellules */
.item_list tbody#scrollable_tbody_1 > tr > td {
	border-top: 1px solid #CCC;
	padding-top: 7px !important;
}

/* toutes les cellules de la PREMIÈRE ligne de chaque Request */
.item_list tbody#scrollable_tbody_1 > tr.first_request_row > td {
	border-top: 2px solid #CCC;
	padding-top: 12px !important;
}

/* toutes les cellules de la DERNIÈRE ligne de chaque Request */
.item_list tbody#scrollable_tbody_1 > tr.last_request_row > td {
	padding-bottom: 10px !important;
}

/* toutes les cellules de la liste des articles */
tr.article_row > td {
	padding-bottom: 7px !important;
}


/* pour éviter les "width: 100%" sur les dernières colonnes (pas terrible en dehors d'IE...) */
td.td_lastcol {
	width: auto;
}

.item_list .sel_item {
	float: left;
	margin: 0 4px;
}

/* pour éviter bug de positionnement du calque vectoriel apposé par CCS3Pie */
body.ie8 .code_container {
	margin: 0 !important;
	padding: 0 !important;
}

body.ie8 div.code_container,
body.ie8 .status_code, body.ie8 .origin_code {
	position: relative;
}

.status_code, .origin_code {
	background: #E4E4E4;
	text-align: center;
	font-weight: bold;
	font-size: 10px;
	display: block;
	margin: 2px 0 0 24px;
	width: 90px;
	overflow: hidden;
	padding: 2px;
	border: 1px solid #D1D1D1;
	border-radius: 3px;
}


.art_list .art_supplier_ref {
	display: block;
	height: 21px;
	margin-bottom: 4px;
}

.art_list .status_code, .art_list .origin_code, div.art_list div.art_link {
	padding-right: 1px;
	padding-left: 1px;
	margin-left: 10px;
	width: 110px;
}

.art_list .status_code {
	margin-top: 5px;
}

.status_code span, .origin_code span {
	font-size: 10px !important;
	font-weight: bold;
}

.SupplierRequestStatus {
	margin-bottom: 6px;
}

.OfferStatus {
	margin: 3px 0 0 0;
	width: 95px;
}

.item_list .bold_info {
	font-weight: bold !important;
}

.item_list .req_title {
	font-weight: bold;
	font-size: 14px; /* ! TODO */
}

.preselection {
	font-weight: bold;
}

.item_list .offer_title {
	font-weight: bold;
	font-size: var(--default-font-size);
}

.item_list .info_label,
.art_list .info_label {
	font-style: italic;
	font-size: 11px; /* ! TODO */
	color: #888;
}

.item_list .info_value,
.art_list .info_value {
	font-size: 11px; /* ! TODO */
	color: #222;
}

.item_list td.td_req_id {
	background-color: #F1F1F4;
	width: 100px;
}

.item_list td.td_req_img {
	width: 120px;
}

	.item_list td.td_req_img img.req_img {
		-moz-box-shadow: 2px 4px 6px #C8C8C8; /* mozilla */
		-webkit-box-shadow: 2px 4px 6px #C8C8C8; /* chrome + safari */
		box-shadow: 2px 4px 6px #C8C8C8; /* opéra */
		/*
	behavior: url(../Scripts/ie-compatibility/PIE.htc);
	*/
	}

.item_list td.td_Offer td.offer_img_container {
	width: 88px;
}

.item_list td.td_Offer img.offer_img,
div.art_list img.art_img {
	width: 78px;
	height: 60px;
	-moz-box-shadow: 2px 4px 6px #AAAAAA; /* mozilla */
	-webkit-box-shadow: 2px 4px 6px #AAAAAA; /* chrome + safari */
	box-shadow: 2px 4px 6px #AAAAAA; /* opéra */
	/*
	behavior: url(../Scripts/ie-compatibility/PIE.htc);
	*/
}

.item_list td.td_Offer img.offer_img {
	margin-right: 10px;
}

.item_list td.td_req_infos {
	width: 310px;
}

	.item_list td.td_req_infos table.req_infos_inside {
		width: 300px;
		margin: 6px 10px;
		border: 0 solid red;
	}

		.item_list td.td_req_infos table.req_infos_inside td {
			padding: 1px 0;
		}

.item_list td.td_Trading {
	background-color: #E4E4E8;
	width: 110px;
}

.item_list td.td_Offer {
	background-color: #D8D8DC;
}

.item_list td.td_Supplier {
	background-color: #D8D8DC;
	width: 160px;
}

.item_list td.empty {
	background-color: #E4E4E8;
}

.item_list td.td_Offer {
	min-width: 130px;
	border-left: 1px dotted #BBB;
}

	.item_list td.td_Offer.empty {
		min-width: 130px;
	}

.item_list td.empty {
	border-left-color: transparent;
	border-right-color: transparent;
}

span.TradingRequestStatus {
	margin-bottom: 6px;
}

/* request/offers non lues */
#tbROA .UR, a.UR {
	color: inherit;
}

div.req_list tr.UR td.td_req_id, div.req_list td.td_Offer.UR {
	border-left: 6px solid #db3f3f;
}

div.req_list #tbROA span.UR {
	color: #444;
}

img.notes {
	cursor: pointer;
	margin-left: 3px;
}

.div_notes {
	background: #596C7B;
	border-radius: 3px;
	border-width: 0 !important;
	-moz-box-shadow: 2px 4px 6px #BBBBBB; /* mozilla */
	-webkit-box-shadow: 2px 4px 6px #BBBBBB; /* chrome + safari */
	box-shadow: 2px 4px 6px #BBBBBB; /* opéra */
	behavior: url(../Scripts/ie-compatibility/PIE.htc);
}

/* articles */
#tbROA .rowEven {
	background-color: #F1F1F1;
	border: 0;
}

#tbROA .rowOdd {
	background-color: #EBEBEB;
	border: 0;
}


/* pieds de page Datadrids */
.GVBasicListPagerStyle {
	background-color: var(--table-footer-bg-color);
}
	.GVBasicListPagerStyle td table td a,
	.GVBasicListPagerStyle td table span,
	td.CellNumber a {
		margin-left: 4px;
		padding: 2px 8px;
		background-color: #999;
		font-size: var(--default-font-size);
		color: white;
		text-decoration: none !important;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 6px;
	}

.btn-little {
	text-decoration: none !important;
	background: #D6D6D6 !important;
	color: #444 !important;
	padding: 3px 8px 2px 8px;
	font-weight: normal;
	display: inline-block;
	border-radius: 3px;
}

	.btn-little:hover {
		background: #CCCCCC !important;
		color: #222 !important;
	}

.btn-little-blue {
	background: #15467E !important;
	color: #EEE !important;
}

	.btn-little-blue:hover {
		background: #2B64A4 !important;
		color: #FFF !important;
	}

.btn-sharp {
	border-radius: 0;
}

.innerTipHeader {
	padding: 10px;
	background: #333;
	margin-bottom: 5px;
	border-bottom: 1px dotted #DDD;
	font-weight: bold;
	font-style: italic;
}

.GVBasicListPagerStyle td table span {
	background-color: #666;
}

.GVBasicListPagerStyle td table a:hover,
td.CellNumber a:hover {
	background-color: #888;
}


td.CellNumber a {
	background-color: #43627C;
	padding: 2px 10px 4px 10px;
}
td.CellNumber a:hover {
	background-color: #366A93;
}

	td.CellNumber a[disabled] {
		background-color: #0F4873;
	}
	td.CellNumber a:hover {
		color: white !important;
	}

.GVGroupStyle {
	background-color: #DAEAEF;
}


/* pour compenser le fait qu'avec Bootstrap, les "cellspacing" et les "cellpadding" ne sont plus pris en compte... */
table.little_padding > tbody > tr > td {
	padding-right: 3px;
	padding-left: 3px;
}

.ListTable {
	border: 0 !important;
}

#scrollzoneMsg > table > tbody > tr > td {
	padding: 4px;
}

.my_tooltip {
	background-color: #EFF1F1;
	border: 1px solid #D4D9D9;
	margin: 0 0 0 15px;
	padding: 5px;
	/* ombrage */
	-moz-box-shadow: 2px 4px 6px #C4C8C8; /* mozilla */
	-webkit-box-shadow: 2px 4px 6px #C4C8C8; /* chrome + safari */
	box-shadow: 2px 4px 6px #C4C8C8; /* opéra */
	filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color=#C4C8C8);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

/*Div de CONFIRMATION*/
.DivConfirm {
	border: 0 !important;
	background-color: #5E7698;
	/* ombrage */
	-moz-box-shadow: 2px 4px 6px #AAA; /* mozilla */
	-webkit-box-shadow: 2px 4px 6px #AAA; /* chrome + safari */
	box-shadow: 2px 4px 6px #AAA; /* opéra */
	filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color=#AAA);
}

	.DivConfirm * {
		color: #EEE !important;
	}

.DivConfirm_lightbox {
	padding: 15px;
	text-align: center;
	white-space: normal !important;
}

/* titres de critères dans écran type "Assign DA Code" */
.tr_group {
	/* background-color: #43627C; */
	background-color: var(--table-header-bg-color); /* Not tested yet */
}

/* libellés dans écran d'export PDF */
a.lnk_Default2 {
	color: #000 !important;
}


/* conteneur de l'UpdateProgress "old school" doit être caché par défaut */
.WaitPanel {
	display: none;
}


/* Custo E-CATALOG */
#ECataFilter {
	margin-right: 20px;
}

.FilterZone, .lbl_FilterTitle {
	background-color: transparent;
	border: 0;
}

div.FilterTitle span {
	font-weight: normal;
}

td.selFilter {
	padding-top: 4px;
	padding-bottom: 4px;
	background-color: #DEE5ED;
}

	td.selFilter * {
		font-weight: bold;
		color: #000;
		font-style: normal;
	}

.ECatTB {
	background-color: transparent;
	color: #FFFFFF;
}

table.ECataSItem {
	border: 0 !important;
}

.ECataLItem li, #action_buttons,
li.dropdown, ul.dropdown-menu li {
	list-style: none;
}

/* un code produit peut avoir un suffixe du type "_001" */
#ECataPdtList a.product_code,
#CartPdtList a.product_code {
	width: 135px;
	text-align: center;
}

#ECataPdtList div#PdtList.border_top {
	margin-top: 12px !important;
	padding-top: 10px !important;
	border-style: solid;
	border-color: #C6D6DE;
}

.ECataLItem .ECatLICP {
	vertical-align: top;
}

/* séparation entre titre produit et sa description */
td.ECatLILS {
	padding-top: 5px !important;
}

.lbl_Price {
	color: #F66 !important;
}

.ECataLItem .ECatLICP, .ECataLItem .ECatLILP, .ECataLItem .ECatLIPr, .ECataSItem .ECatLICP, .ECataSItem .ECatLILP,
.ECataSItem .ECatLIPr, .CartItem .ECatLICP, .CartItem .ECatLILP, .CartItem .ECatLIPS1, .CartItem .ECatLIPS2 {
	background-color: transparent;
	color: #39506B;
}

.ECataLItem {
	border: 1px solid #C6D6DE;
}

	.ECataLItem td {
		padding: 1px 3px;
	}

/* Pagination */
div#PdtPager {
	text-align: center;
}

table.TbPager {
	display: inline-block;
	width: auto;
}

/* Chaque item d'une liste détaillée de produits */
.ECataSItem, .ECataLItem, .CartItem {
	border-color: transparent !important;
	border-top: 1px solid #C6D6D6 !important;
	padding-bottom: 10px;
	margin-top: 10px;
}

#CartPdtList .square-box-body {
	padding-bottom: 25px;
}

#PdtHeader {
	padding-top: 5px;
	padding-bottom: 20px;
}

/* libellés + valeurs dans les produits de ECatalog */
.lbl_PL_lib {
	font-style: italic;
	color: #888;
	font-size: 11px;
	font-weight: normal;
	text-align: right;
}

.lbl_PL_Dat {
	font-weight: normal;
	color: #222;
	font-size: var(--default-font-size);
	font-style: normal;
	text-align: left;
}



.TbPager {
	background-color: transparent;
}

/* -------*/
/* Upload */
/* -------*/
.UploadArea input {
	width: 350px;
}

.UploadList {
	float: left;
	width: 80%;
}

/* -------------------------------*/
/* Réglage de largeur des tables */
/* ------------------------------*/
Table td.w_half {
	width: 50%;
}

Table.w_95 {
	width: 95%;
}

table.w_70 {
	width: 70% !important;
}

table.w_75 {
	width: 75% !important;
}

/* ----------------------*/
/* Définition du largeur */
/* ----------------------*/
.w_200 {
	width: 200px;
}

span.audit_report, span.test_report {
	padding: 2px 8px;
	color: white;
	text-decoration: none;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

span.audit_report {
	background-color: #92CDDC;
	color: #27435D;
}

span.test_report {
	background-color: rgb(255, 128, 0);
	text-shadow: 1px 1px #778;
}

/* -------------------------------------------*/
/* Réglage de la hauteur de la zone de click  */
/* pour les boites modales draggable          */
/* -------------------------------------------*/
.lightbox-header {
	width: 100%;
	min-height: 20px;
}

.draggable-header {
	cursor: move;
}

/* for all draggable components - insitalized using 'draggable' method */
.ui-draggable .ui-draggable-handle {
	cursor: grab;
}
.ui-draggable.ui-draggable-dragging .ui-draggable-handle {
	cursor: grabbing;
}

/* Vue planning pour la prise de RV */
.planningRDVheader {
	margin: 4px;
	font-weight: bold;
}

/* Textbox de type Time 00:00 */
input.time-box {
	text-align: center !important;
	padding-left: 1px !important;
}

/* Aligner label de td en haut */
td.atTop {
	vertical-align: top !important;
}

/* Link dans un td du GV */
a.td_nb_sum {
	color: #337ab7;
	float: right;
	text-decoration: none;
}

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

a.td_nb {
	color: var(--default-text-color);
	float: right;
	text-decoration: none;
}

	a.td_nb:hover {
		color: var(--default-text-color) !important;
		text-decoration: none;
	}


/* Suppression de la croix "Clear Field" sur IE10/11 */
input::-ms-clear {
	display: none;
}

td#Ximg div.icon-information {
	background-image: url(../images/tiny-gray-icons/green-light.png) !important;
	margin-right: 0px !important;
}

td#Ximg div.icon-error {
	background-image: url(../images/tiny-gray-icons/orange-light.png) !important;
	margin-right: 0px !important;
}

td#Ximg div.icon-exclamation {
	background-image: url(../images/tiny-gray-icons/red-light.png) !important;
	margin-right: 0px !important;
}

.w_gv_100 {
	padding: 2px 0 2px 0 !important;
}

.tbGridView_2 {
	margin: 10px 0 10px 0 !important;
}

.wrapWhiteSpace {
	white-space: pre-wrap !important;
}

.x-form-empty-field {
	text-transform: capitalize !important;
}

/* début style pour les tabs */
ul.x-tab-strip-top,
.x-toolbar {
	/* background-color: #FFF !important; */
	background-color: #ffffff; /* IN TEST */
}

.x-tab-panel-header {
	border-color: #FFF !important;
}

.x-tab-strip-top .x-tab-right {
	background-image: none !important;
	background-color: #8699A8;
	border-radius: 5px 10px 0px 0px;
}

.x-tab-strip-top .x-tab-left {
	background-image: none !important;
	padding-left: 10px;
}

.x-tab-strip-top .x-tab-strip-inner {
	background-image: none !important;
}

.x-tab-strip-top .x-tab-strip-active .x-tab-right {
	background-color: #43627C !important;
}

.x-tab-strip-active span.x-tab-strip-text, span.x-tab-strip-text {
	color: #FFF !important;
}

.x-tab-panel-body, ul.x-tab-strip-top {
	border-color: #DDDEDE !important;
}
/* fin style pour les tabs */











/* *************************** */
/* *** DDS utility classes *** */

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

.height-150-important,
.height-150-important-x-box-inner > .x-box-inner {
	height: 150px !important;
}

.height-100-important {
	height: 100px !important;
}

/* to be applied on a flex div wrapping fields for exemple */
.width-fields-max-width {
	width: var(--fields-max-width);
}

.min-width-xs {
	min-width: 60px; /* 7 chars */
}
.min-width-sm {
	min-width: 120px; /* 16 chars */
}
.min-width-md {
	min-width: 160px;
}
.min-width-lg {
	min-width: 200px;
}
.min-width-xl {
	min-width: 240px;
}
.min-width-fields-max {
	min-width: var(--fields-max-width);
}

.visibility-hidden {
	visibility: hidden;
}

.font-size-0 {
	font-size: 0 !important;
}
.font-size-xs, .fs-xs {
	font-size: 0.8rem !important;
}
.font-size-s, .fs-s {
	font-size: 0.9rem !important;
}

.italic {
	font-style: italic;
}

.font-weight-bold {
	font-weight: bold;
}

.clear::after {
	content: "";
	display: block;
	clear: both;
}
.clear-container {
	clear: both;
	/* overflow: hidden; */
	overflow: auto; /* prevents cropped stuff */
}

/* when a label needs to be displayed above its associated field */
.label-block {
	display: block;
	margin-bottom: 0.25rem;
}

/* when a label needs to be displayed aside its associated field AND vertically centered */
.label-inline-block {
	display: inline-block;
	line-height: 1rem;
	vertical-align: middle;
	padding-top: 6px;
	padding-bottom: 6px;
}

.field-group {
}

.field-group-flex {
	display: flex;
	gap: 1rem;
}

.field {
	display: block;
	margin-bottom: 0.75rem;
}

.field-group-flex .field {
	flex-grow: 1;
}

.field .field-label {
	/* font-weight: bold; */
}

.field .field-control {
}

.field .field-select {
}

.field .field-select form#aspnetForm .form-control,
.field .field-select form#aspnetForm .form-select /* NOT TESTED YET */
{
	width: 100% !important;
}

.form-group-checkbox {
	margin-bottom: 1rem; /* like .form-group */
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
}
.form-group-checkbox input {
	cursor: pointer;
}
.form-group-checkbox label {
	margin-bottom: 0;
	margin-left: 0;
	cursor: pointer;
	color: inherit;
}

.svg-icon {
	display: inline-block;
	max-width: 100%;
	width: 2rem;
}
.svg-icon-em {
	width: 1em;
}
.svg-icon-rem {
	width: 1rem;
}
.svg-icon-xs {
	width: 12px;
}
.svg-icon-sm {
	width: 18px;
}
.svg-icon-md {
	width: 2rem; /* default size */
}
.svg-icon-lg {
	width: 3rem;
}
.svg-icon-xl {
	width: 4rem;
}
.svg-icon-2xl {
	width: 6rem;
}





/* *************************** */
/* *** Overwrite BS3 rules *** */

.form-group {
	margin-bottom: 1rem;
}



/* ********************************** */
/* *** Extend BS5 utility classes *** */

.sr-only { /* trick to hide stuff from Bootstrap v3 */
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* add gap utility classes */
.flex-gap-0 {
	gap: 0;
}
.flex-gap-1 {
	gap: 0.25rem;
}
.flex-gap-2 {
	gap: 0.5rem;
}
.flex-gap-3 {
	gap: 0.75rem;
}
.flex-gap-4 {
	gap: 1rem;
}
.flex-gap-inline-block {
	gap: 3px;
}
.flex-gap-gutter {
	gap: var(--dds-gutter-x);
}
.flex-gap-half-gutter {
	gap: var(--dds-half-gutter-x);
}



/* infoUserModal */
/* Additional css for V6 to make the modal looks almost like V7 modal */

#infoUserModal {
	padding: 15px;
}
#infoUserModal span {
	font-weight: normal;
	font-size: 13px;
}
#infoUserModal .modal-header {
	display: flex;
	/* align-items: flex-start; */
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1rem;
	border-bottom: 1px solid #dee2e6;
	/* border-top-left-radius: calc(0.3rem - 1px);
	border-top-right-radius: calc(0.3rem - 1px); */
	border-top-left-radius: var(--bs-modal-border-radius);
	border-top-right-radius: var(--bs-modal-border-radius);
	position: relative;
	background-color: #1971B1;
	color: #ffffff;
	border: 0;
	padding: 15px 15px;
	flex-shrink: 0;
}
#infoUserModal .modal-header .modal-title {
	font-weight: 700;
	font-size: 1.4rem;
	/* line-height: 1.42857; */
	margin-left: auto;
	margin-right: auto;
	max-width: 80%;
	padding-left: 1rem;
	text-align: center;
	margin-top: 0;
	margin-bottom: 0;
	color: inherit;
}
#infoUserModal .modal-header .btn-close {
	cursor: pointer;
	/* padding: 1rem 1rem; */
	/* margin: -1rem -1rem -1rem auto; */
	/* margin-left: -1rem; */
	margin-left: unset;
	background-color: unset;
	font-size: 1.2rem;
	/* font-weight: 700; */
	/* color: inherit; */
	border: none 0;
	line-height: 1.42857;
	/* height: 1.71429rem; */
	opacity: 1;

	filter: invert(); /* to make it white */
}
#infoUserModal .modal-header .btn-close:hover {
	opacity: 0.8;
}
/*
-- Bootstrap v5 now uses an svg as background-image --
#infoUserModal .modal-header .btn-close span {
	line-height: 0;
	font-size: 1em !important;
}
#infoUserModal .modal-header .btn-close span::after {
	content: '✖';
}
#infoUserModal .modal-header .btn-close:hover span::after {
	opacity: 0.8;
}
*/
#infoUserModal .modal-content {
	border: 0;
}
#infoUserModal .modal-body {
	position: relative;
	flex: 1 1 auto;
	padding: 1rem;
	position: relative;
	background-color: #1971B1;
	color: #ffffff;
	border: 0;
	padding: 15px 15px;
	flex-shrink: 0;
	background-color: transparent;
	color: #4c4c4c;
	padding-top: 15px;
	padding-bottom: 15px;
	flex-shrink: 1;
}
#infoUserModal .modal-body hr {
	margin-top: 15px;
	margin-bottom: 15px;
	border: 0;
	border-top: 1px solid rgba(135, 135, 135, 0.4);
}
#infoUserModal .modal-body table {
	width: auto;
}
#infoUserModal .modal-body table td {
	background-color: transparent;
	color: #4c4c4c;
	border: 0;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 8px;
	padding-right: 8px;
}
#infoUserModal .modal-body table td:last-child {
	padding-right: 0;
}
#infoUserModal .modal-body table td:first-child {
	padding-left: 0;
}
#infoUserModal .modal-body table td:first-child span {
	font-weight: 700;
}




/* new modern code for header/nav. prevent header content to pull the DivNavigation content up + remove floats + remove nasty javascript code applying margin-top to DivNavigation */
.dds_header_and_navbar_2023 {
	position: sticky;
	margin-bottom: 1rem;

	background-color: #ffffff;
	background-image: linear-gradient(to right, #f0f3f8 5%, #ffffff 85%);

	z-index: 1051; /* First we had set this value of 1051 in order to have the bootstrap modals (z-index:1055) displayed over the header while their backdrop (z-index:1050) displayed under the header */
	/* Then, because we also had to get the bootstrap modals over the ext windows and the ext windows over the header, we had to change the default values for bootstrap modals/backdrop z-index. So bootstrap modals z-index is now 3001 and bootstrap modals backdrop 3000. As a consequence, the bootstrap backdrop is now OVER the header.. (EXCEPT for modals which html is INSIDE OF .dds_header_and_navbar_2023, such as the "infoUserModal". see details below for that particular case) */
}
body:has(.dds_header_and_navbar_2023 .modal.show) > .modal-backdrop {
	/* particular case for bootstrap modals which have the main header as a parent (such as the "infoUserModal"). since the modal body is a child of the header, it kinda inherits the z-index of the header and so, makes the modal displayed behind its backdrop (which is appended at the <body> level). No matter the z-index we give to .dds_header_and_navbar_2023 .modal (because the z-index of the header always win) */
	--bs-backdrop-zindex: 1049; /* in that particular scenario, z-index of the modal backdrop (3000) HAS TO BE CHANGED in order to be lower than z-index of the .dds_header_and_navbar_2023 (1051) */
}
.dds_header_and_navbar_2023 a {
	text-decoration: none !important;
}
.dds_header_and_navbar_2023 .banner {
	width: auto;
	/* padding: 0 9px; */
	padding: 0 var(--dds-gutter-x);
	height: 45px;
	margin: 0;

	display: flex;
	justify-content: space-between;
	align-items: center;
}
.dds_header_and_navbar_2023 .banner .banner-right-side {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.dds_header_and_navbar_2023 .banner .banner-right-side .logo {
	margin-left: 1rem;
	cursor: pointer;
}
.dds_header_and_navbar_2023 .banner .logo img {
	height: 25px;
	margin: 0;
}
.dds_header_and_navbar_2023 .banner span {
	font-size: inherit;
}
.dds_header_and_navbar_2023 #ConnectedAs,
.dds_header_and_navbar_2023 #TbUserInfo_Container {
	display: inline-block;
	vertical-align: middle
}
.dds_header_and_navbar_2023 #TbUserInfo {
	top: unset;
}
.dds_header_and_navbar_2023 .navbar {
	position: static;
	margin-top: 0 !important; /* overwrites default "45px !important" set to .navbar */
	height: auto !important; /* overwrites multiple default values set to [xxx] .navbar */
	display: static; /* overwrites default "fixed" set to .navbar */

	padding: 0;
}
.dds_header_and_navbar_2023 .navbar > .container-fluid {
	padding: 0;
}
.dds_header_and_navbar_2023 .navbar-toggle {
	background-color: #ffffff;
	padding: 6px;
	margin: 6px var(--dds-gutter-x); /* horizontal spacing equal to .dds_header_and_navbar_2023 .banner padding */
}
.dds_header_and_navbar_2023 .navbar-collapse {
	padding-right: 0; /* remove useless spacing. vertical scrollbar does not seem to require this padding */
	padding-left: 0;
}



/* change background image only for the connection pages */
body.Login.Login_2023 {
	--fields-height: 30px; /* different height for login pages */
}
body.Login.Login_2023 {
	background-color: #090f1f;
	background-image: linear-gradient(to bottom, #090f1f 0%, #0c093a 100%);
	background-image: url(../images/bg_screens/bg-dds-13.jpg);
	/* background-size: cover; -> PB : do not cover the bottom part of the screen when viewport gets scrollable, only on small devices.. */
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;

	color: #ffffff; /* cause dark bg */

	height: 100%; /* required to vertically align the login_connection_panel */
}
body.Login.Login_2023 .login_form { /* may be #form1 or #form2 (on SSOSAMLLogoutIdP.aspx) */
	display: flex;
	justify-content: center;
	align-items: center;
	/* height: 100%; */
	min-height: 100%; /* requires html{height:100%} and body{min-height:100%}. Better using min-height rather than height here cause it keeps content higher than the viewport accessible */
}


body.Login.Login_2023 a {
	/* color: #090f1f; */
	color: #ffffff;
}
body.Login.Login_2023 a:hover {
	color: #cd3b62;
}

body.Login.Login_2023 #form1 input[type="text"] {
	display: inline-block; /* overwrites the nasty  #form1 input[type="text"] { display:inline; } */
	/* TODO: maybe rather "block" .. ? */
}
body.Login.Login_2023 input {
	text-transform: none; /* overwrites text-transform:uppercase in common.css */
}
body.Login.Login_2023 input.form-control,
body.Login.Login_2023 select
{
	width: 100%; /* overwrites body.Login input.form-control, body.Login .bootstrap-select { width:220px; } */
	min-width: 100%;
}
@media (min-width: 768px) {
	body.Login.Login_2023 input.form-control,
	body.Login.Login_2023 select
	{
		min-width: 270px; /* ? IN TEST - arbitrary value (must be wide enough to display email address) */
	}
}
body.Login.Login_2023 input[type="text"].form-control,
body.Login.Login_2023 input[type="password"].form-control,
body.Login.Login_2023 select,
body.Login.Login_2023 textarea {
	/* border: 1px solid #cdcdcd; */ /* ? Now applied globally on all fields at the beginning of this file */
	/* background-color: #ffffff; */ /* ? Now applied globally on all fields at the beginning of this file */
	/* color: var(--fields-text-color); */ /* ? Now applied globally on all fields at the beginning of this file */
	margin: 0;
}
body.Login.Login_2023 .form-control,
body.Login.Login_2023 select,
body.Login.Login_2023 .form-select {
	height: var(--fields-height) !important; /* overwrites auto !important */
	/* padding: 4px 7px !important; */
}
body.Login.Login_2023 .form-select {
	padding-left: 7px; /* same as body.Login.Login_2023 input.form-control */
}

body.Login.Login_2023 .btn:active,
body.Login.Login_2023 .btn.active {
	border: 1px solid #bbbbbb;
	box-shadow: inset 0 2px 3px rgba(9,15,31, 0.2);
}
body.Login.Login_2023 hr {
	margin-top: 15px;
	margin-bottom: 15px;
	border: 0;
	border-top: 1px solid rgba(135, 135, 135, 0.4);
}



.login_connection_panel_wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
	
	padding: 3rem 2rem 9rem 2rem; /* safe space (bottom greater for login_footer) */
}
@media (min-height: 520px) {
	.login_connection_panel_wrapper {
		gap: 3rem; /* add more vertical spacing on high screens */
	}
}
@media (min-width: 768px) {
	.login_connection_panel_wrapper {
		padding-bottom: 6rem;

		padding-left: 3rem;
		padding-right: 3rem;
	}
}

.login_connection_panel_wrapper .login_header_logo a img {
	height: 50px !important; /* overwrite main DDDS logo height */
	max-width: 80vw;
}

.login_connection_panel {
	/* border-radius: 6px; */
	border-radius: 12px ;
	box-shadow: 0 0 2rem rgba(0,0,0,0.75);
	background: rgba(255,255,255,0.97);
	
	color: #090f1f; /* default text color */
	
	width: unset; /* make container width depends on its content width (note that fields width is currently limited to 270px. also note that login_connection_panel content width is limited (or not) using the "inner_width_tight" class below) */
	/* max-width: 90vw; */
	/* min-width: 18vw; */
	min-width: 260px;
}
.login_connection_panel_content {
	/* padding-bottom: 1rem; */
	padding: 1.5rem 1.5rem 0.75rem 1.5rem;
}

/* note that .login_connection_panel_wrapper already have lateral padding for safe space */
/* "inner_width_free", "inner_width_tight" or "inner_width_large" help controlling the width of the main panel */
.inner_width_free {
}
.inner_width_tight {
	/* width: 330px; */
}
@media (min-width: 576px) {
	.inner_width_tight {
		width: 330px; /* arbitrary value */
	}
}
.inner_width_large {
	/* width: 500px; */
}
@media (min-width: 320px) {
	.inner_width_large {
		width: calc(100vw - (2 * 2rem + 2 * 1.5rem));
	}
}
@media (min-width: 576px) {
	.inner_width_large {
		width: 500px; /* arbitrary value */
	}
}
/*
.inner_width_tight {
	max-width: 80vw; -> no need cause .login_connection_panel_wrapper already have lateral padding for safe space
}
@media (min-width: 320px) {
	.inner_width_tight {
		max-width: 310px;
	}
}
@media (min-width: 576px) {
	.inner_width_tight {
		max-width: 330px;
	}
}
@media (min-width: 768px) {
	.inner_width_tight {
		max-width: 350px;
	}
}
@media (min-width: 1080px) {
	.inner_width_tight {
		max-width: 370px;
	}
}
*/

body.Login.Login_2023 .login_connection_panel a {
	color: #090f1f;
}
body.Login.Login_2023 .login_connection_panel a:hover {
	color: #cd3b62;
}
body.Login.Login_2023 .login_connection_panel .form-label { /* (we use the class "form-label" and not just "label" cause label already exists in BS3.4) */
	display: block;
	font-weight: bold;
}
body.Login.Login_2023 .login_connection_panel .form-label-wrapper { /* wraps a span.label when it has a sibling element such as asp:requiredfieldvalidator for example */
	display: flex;
	justify-content: flex-start;
	gap: 0.35rem;
}
body.Login.Login_2023 .login_connection_panel .form-label {
	margin-bottom: 0.35rem;
}
body.Login.Login_2023 .login_connection_panel .form-group > .form-label,
body.Login.Login_2023 .login_connection_panel .form-group > .form-label-wrapper {
	/* margin-bottom: 0.35rem; */
}
body.Login.Login_2023 .login_connection_panel .form-group > .form-label-wrapper .form-label {
	/* margin-bottom: 0; */
}
body.Login.Login_2023 .login_connection_panel .form-label.form-label-border { /* must be defined after body.Login.Login_2023 .login_connection_panel .form-group > .form-label */
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(135, 135, 135, 0.4);
}
body.Login.Login_2023 .login_connection_panel .lbl_def { /* asp:Label with SkinID="Default" produces that lbl_def class. Important note : any potential class or CssClass will be ignored.. So better NOT USING that SkinID="Default" on asp:LABEL !! */
	vertical-align: baseline; /* overwrites .lbl_def (dds-new.css) */
	padding-right: 0; /* overwrites .lbl_def (dds-new.css) */
	padding-left: 0; /* overwrites .lbl_def (common.css & StyleBase.css) */
	text-align: left; /* overwrites .lbl_def (common.css & StyleBase.css) */
	white-space: normal; /* overwrites .lbl_def (common.css & StyleBase.css) */
	width: unset; /* overwrites .lbl_def (StyleBase.css) */
}


body.Login.Login_2023 .login_portal_title {
	display: block;
	margin: 0;
	/* background-image: none; */
	/* background: #7DABBB; */
	/* background: #15467E; */
	/* background-color: #090f1f; */
	background-color: #cd3b62;
	background: linear-gradient(352deg, #cb284f, #e54f73);
	text-align: center;
	padding: 0.5rem;
	/* border-radius: 5px 5px 0 0; */
	border-radius: 10px 10px 0 0;
	color: #ffffff !important; /* impretant mark to verwrite "h1, h2, h3, h4" */
	font-weight: bold;
	line-height: inherit;
	font-size: 2rem;
}

/* error message which appears as a first child in main panel (.connection_panel), above field groups (login.aspx & validEmail.aspx) */
body.Login.Login_2023 .validation_summary_error_message {
	/* v1 */
	/*
	color: #e90c35 !important;
	font-weight: bold;
	margin-bottom: 1.5rem;
	
	background: #ffdce2;
	padding: 10px;
	border: 1px solid #e90c35;
	border-radius: 3px;
	*/

	/* v2 */
	display: block;
	color: #e90c35 !important; /* !important to overwrites inline color:Red */
	font-weight: bold;
	padding: 0 1.5rem;
	border-left: 4px solid #e90c35;
	margin-bottom: 1.5rem;
}

/* error message at the BOTTOM of the login_connection_panel_content (login.aspx & validEmail.aspx) */
body.Login.Login_2023 .custom_validator_message {
	display: block;
	border: 1px solid #e90c35;
	background: #ffdce2;
	padding: 10px;
	color: #e90c35 !important; /* !important to overwrites inline color:Red */
	font-weight: bold;
	border-radius: 3px;
	margin-top: 1.5rem; /* normally useless - merge with the marginbottom of the actions-block above */
	margin-bottom: 1rem; /* 1rem instead of 1.5rem cause last block */
}

/* error message at the BOTTOM of the login_connection_panel_content (login.aspx & validEmail.aspx) */
body.Login.Login_2023 .login_error_message {
	text-align: center;
	max-width: 270px; /* Equal to max-width of fields (body.Login.Login_2023 input.form-control, body.Login.Login_2023 .bootstrap-select). Must absolutely be less wide (or equal) than .inner_width_tight width. Otherwise it can leads to problems of alignement between login_error_message and  */

	/* margin-top: 1.5rem; */
	margin-bottom: 1.5rem;
	color: #e90c36; /* = $color-danger */

	margin-left: auto;
	margin-right: auto;
}

body.Login.Login_2023 .export_trad_container { /* only on validEmail.aspx ... */
	position: absolute;
	top: 0;
	right: 0;
	padding: 1rem;
}
body.Login.Login_2023 .export_trad_container a { /* only on validEmail.aspx ... */
	cursor: pointer;
}


body.Login.Login_2023 .login_connection_panel .actions-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
	text-align: center;
}
body.Login.Login_2023 .login_connection_panel .border-top-block {
	border-top: 1px solid rgba(135, 135, 135, 0.4);
	padding-top: 2rem;
	margin-top: 2rem;
	margin-bottom: 1.5rem;
	text-align: center;
}
body.Login.Login_2023 .login_connection_panel .spacing-block {
	margin-top: 2rem;
	margin-bottom: 2rem;
	text-align: center;
}

body.Login.Login_2023 .login_connection_panel .btnMain {
	display: inline-block;
	background: #090f1f;
	color: #ffffff;
	padding: 0.5rem 3rem;
	text-decoration: none !important; /* todo : required ?*/
	border-radius: 4px;
	/* margin-bottom: 0.5rem; */
	margin-bottom: 0;
}
body.Login.Login_2023 .login_connection_panel .btnMain:hover {
	background: #1a2f66;
	color: white; /* required when .btnMain is a <a> */
	/* text-decoration: none; */
}
body.Login.Login_2023 .login_connection_panel .btnMain span {
	/* color: white !important; */
	/* font-size: 14px; */
	font-weight: bold;
}

body.Login.Login_2023 .company_list { /* ul */
	overflow: auto; /* (already set in common.css) */
	height: unset; /* overwrites height:100px in common.css */
	/* min-height: 20vh; */
	max-height: 33vh;
	/* width: 360px; */

	/* display: flex; */
	/* flex-wrap: wrap; */

	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 1rem;
	row-gap: 1rem;

	list-style: none;
}
body.Login.Login_2023 .company_list .company {
	background-color: #ebebeb;
	border-radius: 6px;
	padding: 0.5rem;
	text-align: center;
}
/* used for button hover effect */
@keyframes backgroundPositionLooping {
	0% {	background-position: 0% 0%; }
	50% {	background-position: 50% 50%; }
	100% {	background-position: 100% 100%; }
}
body.Login.Login_2023 .company_list .company:hover {
	/* color: #cd3b62; */
	text-decoration: none;
	cursor: pointer;
	
	background-color: transparent;
	background-image: linear-gradient(75deg, rgba(235,235,235,0.33), rgba(235,235,235,0.33), rgba(235,235,235,0.75), rgba(235,235,235,0.75), rgba(235,235,235,0.33), rgba(235,235,235,0.33));
	background-size: 600%; /* fixed value - best results with that value */
	background-position: 50% 50%;
	animation: backgroundPositionLooping 2s linear infinite;
	transition: all ease-in-out 0.2s;
}
body.Login.Login_2023 .company_list .company .company_name {
	display: block;
	font-size: 0.85em;
	word-break: break-word; /* make all company cells have the same width */
}


body.Login.Login_2023 .login_footer {
	position: fixed;
	z-index: 1; /* pull it over button.dropdown-toggle */
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	padding: 10px;
	background-color: rgba(9,15,31,0.8);
	color: #ffffff;
	text-align: center;
	user-select: none;

	/* flex display help to manage vertical spacing between optional blocks (#browser_messages, #footer_messages, #footer_hotline) */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem; /* arbitrary value */

	/* avoid footer with lot of content to cover the page main content */
	overflow-y: auto;
	max-height: 9rem;
}
body.Login.Login_2023 .login_footer > div:not(:has(> div)) {
	display: none; /* trick to make empty divs take no vertical space. condition for this to work is that every flex item inside of .login_footer has a div children as first wrapper */
}
body.Login.Login_2023 .login_footer a:not(:hover) {
	color: #ffffff;
}
body.Login.Login_2023 .login_footer table caption {
	color: #ffffff;
	text-align: center;
	padding-top: 0;
	padding-bottom: 0.5rem;
}
body.Login.Login_2023 .login_footer table th {
	border-bottom: 1px solid #ffffff;
}
body.Login.Login_2023 .login_footer table td {
	/* border-color: #ffffff; */
	padding: 5px 0.5rem 0 0.5rem;
}