:root{
	--emb-color: #00b4c1;
	--emb-color-rgb: 0, 180, 193;
	--mybrief-color: #35A936;
	--mybrief-color-rgb: 53, 169, 54;
	/* Custom colors vars from bootstrap colors */
	--bs-yellow: #ffc107;
	--bs-yellow-rgb: 255, 193, 7;
	--bs-orange: #fd7e14;
	--bs-orange-rgb: 253, 126, 20;
	--bs-red: #dc3545;
	--bs-red-rgb: 220, 53, 69;
}

/*** Override modal opacity for jquery ui dialogs ***/
.ui-widget-overlay {
	opacity: 0.5 !important;
}

body {
    margin: 0px;
    padding: 0px;
    font-size: 14px;
    font-weight: normal;
    overflow-y: scroll;
		z-index: 1;
}

/* Disable a underline text */
a {
		text-decoration: none;
}

.clear {
	clear: both;
}

.cursor-pointer {
	cursor: pointer;
}

/* Header */
.head_container {
    /*display: flex;*/
    justify-content: space-between;
		align-items: center;
		height: 50px;
}

.logo {
		width: 20%;
		height:100%;
		padding: 0px 5px;
		float:left;
}

.logo_img {
    padding: 5px;
}

.logo_txt {
    text-align: center;
    padding-left: 5px;
    font-size: 11px;
    font-style: italic;
    color: #2E74B5;
}

.div_title {
		width: 60%;
		height:100%;
		margin: 10px auto;
		margin-left:0;
    text-align: center;
    color: var(--main-color);
    font-size: 40px;
		padding: 0px 5px;
		float:left;
}

.div_logout{
	width: 20%;
	height:100%;
	padding: 0px 5px;
	text-align: center;
	float:left;
	position: relative;
}

.text_logout{
	position:absolute;
	bottom: 0;
	font-weight: bold;
}

.page_title {
    text-align: center;
    color: green;
    margin-bottom: 0px;
}


.frame {
    padding: 10px;
    background-color: #fff;
		margin: 5px;
}

.no_level{
	text-align: center;
	color: red;
	font-size: 18px;
	font-weight: bold;
}

/*** SECTIONS ***/

.section{
	border: 1px solid #9dd7b1;
	border-radius: 5px;
	position: relative;
	margin: 20px auto;
	margin-top: 0px;
}

.section_title{
	background-color:black;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	color:rgb(132, 226, 250);
	font-weight:bold;
	padding: 8px 10px;
}

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

.highlighted {
    font-weight: bold;
}

.array_table {
    border: 1px solid black;
    border-collapse: collapse;
    border-spacing: 0px;
    min-width: 30%;
}

.array_table td,
.array_table th {
    border: 1px solid black;
    padding: 5px 10px;
}

.array_table thead tr {
    background-color: #cccccc;
}

.array_table tbody tr:nth-child(even) {
    background-color: #c0d6e4;
}

.array_table tbody td:nth-child(n+2) {
    text-align: right;
}

.array_table tfoot tr {
    background-color: #e6fddf;
    font-weight: bold;
    text-transform: uppercase;
}

.array_table tfoot td:nth-child(n+2) {
    text-align: right;
}

@-moz-document url-prefix () {
    .array_table {
        border-collapse: separate;
        border: 0px solid black;
    }
    .array_table td,
    th {
        border: 1px solid black;
        border-bottom: 0px;
        border-right: 0px;
    }
    .array_table tfoot td {
        border-bottom: 1px solid black;
    }
    .array_table td:last-child,
    th:last-child {
        border-right: 1px solid black;
    }
}

.bottom_text {
    font-style: italic;
    font-size: 12px;
}

img {
    vertical-align: middle;
}


/****** NAVBAR ******/

.navbar{
	padding:0px;
}

.nav-link{
	padding: 1rem;
}

.nav-link.active {
	background-color: rgba(255, 255, 255, 0.2);
}

/* .navbar-nav li a {
	border-right: 1px solid rgba(0,0,0, 0.5);
} */

/* .navbar-nav li:first-child a {
	border-left: 1px solid rgba(0,0,0, 0.5);
} */

/* TO ADD BORDER LEFT AND RIGHT
.nav-item:nth-child(1){
	border-left: 1px solid grey;
}

.nav-item{
	border-right: 1px solid grey;
}
*/


/****** END NAVBAR ******/

.my_container {
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;
    /* OLD - Firefox 19- (buggy but mostly works) */
    display: -webkit-flex;
    /* NEW - Chrome */
    display: flex;
    /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-flex-direction: row;
    -moz-box-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    /*justify-content: space-between;*/
    justify-content: center;
}

/***** Form validation *****/

.inputError{
	border:1px solid red !important;
}

.home_welcome{
	text-align: center;
	color: red;
}

/*** FORM ***/

.relative{
	position:relative;
}

.top-submit{
	border-bottom: 4px solid var(--main-color);
	margin-bottom: 10px;
	padding: 5px;
}

.bottom-submit{
	border-top: 4px solid var(--main-color);
	padding: 5px;
}

.submit-title{
	font-size: 24px;
	font-weight: bold;
	padding-left: 10px;
	line-height: 40px;
}

.submit-button{
	/* padding-right: 10px; */
	line-height: 40px;
}

.submit-button span{
	display: inline-block;
	font-size:12px;
	font-style: italic;
	font-weight: bold;
	color:#aaaaaa;
	padding-right: 5px;
}

.table-border-right{
	border-right:1px solid #000000 !important;
}

.form-hrow{
	display: flex;
	flex-wrap: wrap;
	--bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
}

.form-hrow > *{
	padding-right: calc(var(--bs-gutter-x)* .5);
	padding-left: calc(var(--bs-gutter-x)* .5);
	margin-top: var(--bs-gutter-y);
}

.form-label{
	padding-right: 20px;
	font-size: 16px;
	font-weight: bold;
	color:#000000;
}

.form-padding{
	padding:10px 20px;
	margin:0;
}

.form-bg-grey{
	background-color: #eeeeee;
}

.radio-table{
	height: 100%;
}

.radio-table label{
	margin-bottom:0 !important;
}

.input150{
	max-width:150px;
}

.input400{
	max-width:400px;
}

.input700{
	max-width:700px;
}

/*** RADIO ***/
.radio_container {
  display: block;
  position: relative;
	padding-left: 26px;
	margin-right:10px;
  cursor: pointer;
	font-size: 16px;
	line-height: 18px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.radio_container_table {
	display: inline !important;
	margin-right: 0px !important;
	margin-left:45%;
}

/* Hide the browser's default radio button */
.radio_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 19px;
  width: 19px;
  background-color: #ccc;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio_container:hover input ~ .checkmark {
  background-color: #aaa;
}

/* When the radio button is checked, add a blue background */
.radio_container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio_container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radio_container .checkmark:after {
  top: 6px;
  left: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}



/*** Form validation ***/

.inputError {
	border-color: red;
}

/***** Drop files *****/
.dropfiles{
	border: 1px solid #ced4da;
	border-radius: 0.25em;
	padding:10px;
}

/***** Retour Campagnes *****/

.campagnes_table_left{
	width:20%;
}

.h50{
	height:50px;
	line-height:50px;
}

.campagnes_table_right{
	width:80%;
	display: flex;	
	align-items: center;
}

.int_row{
	display:flex;
	width:100%;
	flex-wrap: wrap;
}

.int_elem{
	flex:0 0 25%;
}

.campagnes_border_section{
	border: 1px solid #ced4da;
	border-radius: 0.25em;
	padding:10px;
}

.campagnes_row_bck{
	background-color: #ffffff;
	padding:10px;
}

.campagnes_row_bck.pair{
	background-color: #eeeeee;
}

/*** Commandes ***/

.instructions{
	font-size:10px;
	font-style: italic;
}

.submit-title-annotation{
	font-size:0.8em;
	font-style:italic;
	padding-left:10px;
}

.calendars, .timers{
	background-color: #ffffff !important;
	cursor: pointer;
}

.pair{
	background-color: #eeeeee;
}

.icon-anchor{
	text-decoration:none !important;
	color:#007BFF !important;
}


.commandes_table th {
	text-align: center;
	vertical-align: middle !important;
}

.commandes_table td {
	vertical-align: middle !important;
}

/** Tables with first 3 columns fixed **/

.scroll-table{
	overflow-y: hidden;
	overflow-x: scroll;
}

.commandes_table_fixed th {
	text-align: center;
	vertical-align: middle !important;
}

.commandes_table_fixed th div{
	white-space: nowrap;
}

.commandes_table_fixed td {
	vertical-align: middle !important;
}

.commandes_table_fixed {
	border-collapse: separate;
	border-spacing: 0;
}

.commandes_table_fixed td:first-child {
	position:sticky;
	left:0px;
	background-color:#f4f9ff;
	z-index: 2;
	min-width:70px;
}

.commandes_table_fixed td:nth-child(2) {
	position:sticky;
	left:70px;
	background-color:#f4f9ff;
	z-index: 2;
	min-width:150px;
}

.commandes_table_fixed td:nth-child(3) {
	position:sticky;
	left:220px;
	background-color:#f4f9ff;
	z-index: 2;
	min-width:250px;
}

.fl-scrolls {
	z-index:1000;
}

.table_results tr td:nth-child(2){
	font-weight: bold;
}

.sources_table td {	
	padding-right: 5px;
}

.pair_row {
	background-color: #eeeeee;
	--bs-table-bg: #eeeeee;
}

.closed_commande td {
	background-color: #7DFFCD !important;
}

/*** Buttons ***/

/** Buttons secondary greyed + colored on checked **/

.btn-status-sent:not(:disabled):not(.disabled):checked + .btn {
	background-color:#007bff;
}

.btn-status-sent:focus + .btn {
	box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.4);
}

.btn-status-pending:not(:disabled):not(.disabled):checked + .btn {
	background-color: rgba(255, 193, 7, 1);
	color: #000000;
}

.btn-status-pending:focus + .btn {
	box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.4);
}

.btn-status-accepted:not(:disabled):not(.disabled):checked + .btn {
	background-color: rgba(40, 167, 69, 1);
}

.btn-status-accepted:focus + .btn {
	box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.4);
}

.btn-status-refused:not(:disabled):not(.disabled):checked + .btn {
	background-color: rgba(220, 53, 69, 1);
}

.btn-status-refused:focus + .btn {
	box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.4);
}

.btn-secondary-emb:not(:disabled):not(.disabled):checked + .btn {
	background-color: var(--emb-color) !important;
}

.btn-secondary-emb:focus + .btn {
	box-shadow: 0 0 0 0.2rem rgb(146, 216, 237);
}

.btn-secondary-mybrief:not(:disabled):not(.disabled):checked + .btn{
	background-color:var(--mybrief-color) !important;
}

.btn-secondary-mybrief:focus + .btn {
	box-shadow: 0 0 0 0.2rem lightgreen;
}

.btn-secondary-client:not(:disabled):not(.disabled):checked + .btn {
	background-color: #198754 !important;
}

.btn-secondary-client:focus + .btn {
	box-shadow: 0 0 0 0.2rem #198754;
}

.btn-secondary-prospect:not(:disabled):not(.disabled):checked + .btn {
	background-color: #ffc107 !important;
	color: #000000;
}

.btn-secondary-prospect:focus + .btn {
	box-shadow: 0 0 0 0.2rem #ffc107;
	color: #000000;
}

.btn-secondary-dark:not(:disabled):not(.disabled):checked + .btn{
	background-color: var(--bs-dark) !important;
}

.btn-secondary-dark:focus + .btn {
	box-shadow: 0 0 0 0.2rem rgba(var(--bs-dark-rgb), 0.7);
}

.btn-secondary-warning:not(:disabled):not(.disabled):checked + .btn{
	background-color: var(--bs-warning) !important;
	color:#000000;
}

.btn-secondary-warning:focus + .btn {
	box-shadow: 0 0 0 0.2rem rgba(var(--bs-warning-rgb), 0.5);
	color: #000000;
}

.btn-secondary-be:not(:disabled):not(.disabled):checked + .btn{
	background-color: rgb(210, 173, 114) !important;
	color:#000000;
}

.btn-secondary-be:focus + .btn {
	box-shadow: 0 0 0 0.2rem rgba(210, 173, 114, 0.5);
	color: #000000;
}

.btn-secondary-md-amber-300:not(:disabled):not(.disabled):checked + .btn{
	background-color: #FFD54F !important;
	color:#000000;
}

.btn-secondary-md-amber-300:focus + .btn {
	box-shadow: 0 0 0 0.2rem #FFD54F; /* amber-500 */
	color: #000000;
}

.btn-secondary-md-orange-300:not(:disabled):not(.disabled):checked + .btn{
	background-color: #FFB74D !important;
	color:#000000;
}

.btn-secondary-md-orange-300:focus + .btn {
	box-shadow: 0 0 0 0.2rem #FF9800;
	color: #000000;
}

.btn-secondary-md-deep-orange-300:not(:disabled):not(.disabled):checked + .btn{
	background-color: #FF8A65 !important;
	color:#000000;
}

.btn-secondary-md-deep-orange-300:focus + .btn {
	box-shadow: 0 0 0 0.2rem #FF5722;
	color: #000000;
}

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

.btn-all-commandes, 
.btn-all-commandes:active,
.btn-all-commandes:focus,
.btn-all-commandes:hover {
	color:#ffffff;
	background-color: #0096B4 !important;
	--bs-btn-bg: #0096B4;
	border-color: #0096B4;
}

.btn-all-commandes:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #0096B4;
}

.btn-all-commandes.focus {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #0096B4;
}

.btn-closed,
.btn-closed:active,
.btn-closed:focus,
.btn-closed:hover {
	color: #000000;
	background-color: #7DFFCD !important;
	--bs-btn-bg: #7DFFCD;
	border-color: #7DFFCD;
}

.btn-closed:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #7DFFCD;
}

.btn-closed.focus {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #7DFFCD;
}

.btn-no-sv,
.btn-no-sv:active,
.btn-no-sv:focus,
.btn-no-sv:hover {
	color: #000000;
	background-color: #c8ca2a !important;
	--bs-btn-bg: #c8ca2a;
	border-color: #c8ca2a;
}

.btn-no-sv.focus {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #c8ca2a;
}

.btn-no-sv:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #c8ca2a;
}

.btn-no-stats,
.btn-no-stats:active,
.btn-no-stats:focus,
.btn-no-stats:hover {
	color: #000000;
	background-color: #a6b1e1 !important;
	--bs-btn-bg: #a6b1e1;
	border-color: #a6b1e1;
}

.btn-no-stats.focus {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #a6b1e1;
}

.btn-no-stats:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #a6b1e1;
}

.btn-no-invoice,
.btn-no-invoice:active,
.btn-no-invoice:focus,
.btn-no-invoice:hover {
	color: #ffffff;
	background-color: #F07210 !important;
	--bs-btn-bg: #F07210;
	border-color: #F07210;
}

.btn-no-invoice.focus {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #F07210;
}

.btn-no-invoice:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #F07210;
}

.btn-no-invoice-d,
.btn-no-invoice-d:active,
.btn-no-invoice-d:focus,
.btn-no-invoice-d:hover {
	color: #ffffff;
	background-color: #e34351 !important;
	--bs-btn-bg: #e34351;
	border-color: #e34351;
}

.btn-no-invoice-d.focus {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #e34351;
}

.btn-no-invoice-d:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #e34351;
}

.btn-pending-commandes.focus {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #198754;
}

.btn-pending-commandes:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #198754;
}

.btn-primary-custom.focus {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #007bff;
}

.btn-primary-custom:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #007bff;
}

.btn-warning-custom.focus {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #ffc107;
}

.btn-warning-custom:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #ffc107;
}

.btn-success-custom.focus {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #198754;
}

.btn-success-custom:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #198754;
}

.btn-danger-custom.focus {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #dc3545;
}

.btn-danger-custom:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #dc3545;
}

.btn-red-custom:not(:disabled):not(.disabled):checked + .btn {
	background-color:#bd2130 !important;
	border-color: #000000 !important;
}

.btn-red-custom:focus + .btn {
	box-shadow:0 0 0 0.2rem #b21f2d !important;
}

.ui-tooltip { 
	white-space: pre-line; 
}

.btn-s {
	font-size: 14px !important;
}

.btn-excel,
.btn-excel:active,
.btn-excel:focus,
.btn-excel:hover {
	background-color: #B1BC00 !important;
	--bs-btn-bg: #B1BC00;
	color: #000000;
}

.btn-excel:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #B1BC00;
}

.btn-excel.active {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #B1BC00;
}

.btn-vis-cumul,
.btn-vis-cumul:active,
.btn-vis-cumul:focus,
.btn-vis-cumul:hover {
	color: #000000;
	background-color: #a6b1e1 !important;
	--bs-btn-bg: #a6b1e1;
	border-color: #a6b1e1;
}

.btn-vis-cumul:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #a6b1e1;
}

.btn-vis-cumul.active {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #a6b1e1;
}

.btn-vis-men, 
.btn-vis-men:active, 
.btn-vis-men:focus, 
.btn-vis-men:hover {
	background-color: #7eb9de !important;
	--bs-btn-bg: #7eb9de;
	color: #000000;
}

.btn-vis-men:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #7eb9de;
}

.btn-vis-men.active {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #7eb9de;
}

.btn-secondary:not(:disabled):not(.disabled):checked + .btn {
	background-color:green;
}

.btn-secondary:focus + .btn {
	box-shadow: 0 0 0 0.2rem lightgreen;
}

.btn-light-blue {
	background-color: #A4FBE7;
	color: #000000;
}

.btn-light-blue:hover {
	background-color: #76c2b0;
	color: #000000;
	box-shadow: 0 0 0 0.2rem #A4FBE7;
}

/* Crm buttons */
.btn-crm-disabled,
.btn-crm-disabled:active,
.btn-crm-disabled:focus,
.btn-crm-disabled:hover {
	color: #000000;
	background-color: #c5ccdf !important;
	--bs-btn-bg: #c5ccdf;
	border-color: #c5ccdf;
}

.btn-crm-disabled.focus {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #c5ccdf;
}

.btn-crm-disabled:hover {
	border: 0.1rem solid #000000;
	box-shadow: 0 0 0 0.2rem #c5ccdf;
}

/*** End buttons ***/

.grey-text{
	color:grey !important;
}

.icon-blue{
	color:#007BFF;
}
.icon-ok      { color: #198754; display: inline-grid; }
.icon-warn    { color: #dc3545; display: inline-grid; }
.icon-pending { color: #ECC44C; display: inline-grid; }
.icon-disabled{ color: #6c757d; display: inline-grid; }
.icon-orange  { color: #FF8C00; display: inline-grid; }

.fs-05e{
	font-size: 0.5em !important;
}

.fs-06e{
	font-size: 0.6em !important;
}

.fs-07e{
	font-size: 0.7em !important;
}

.fs-08e{
	font-size: 0.8em !important;
}

.fs-09e{
	font-size: 0.9em !important;
}

.fs-10e{
	font-size: 1.0em !important;
}

.fs-11e{
	font-size: 1.1em !important;
}

.fs-12e{
	font-size: 1.2em !important;
}

.fs-13e{
	font-size: 1.3em !important;
}

.fs-14e{
	font-size: 1.4em !important;
}

.fs-15e{
	font-size: 1.5em !important;
}

.min-250{
	min-width:250px;
}

.floating-title-centered {
	position:absolute;
	top:-23px;
	left:50%;
	transform: translate(-50%);
	display:flex;
	justify-content: center;
	line-height:35px;
	width:130px;
	padding:1px;
	background-color:#ffffff;
	color:var(--main-color);
	font-size:25px;
	font-weight:bold;
}

.icon-input {
	position:absolute;
	right:12px;
	top:10px;
}

.search-total {
	position:absolute;
	bottom:0px;
	right:20px;
	font-style:italic;
	font-weight: 500;
}

.no-vertical-padding {
	padding-top:0px; 
	padding-bottom:0px;
}

.br-light-grey {
	border-right:1px solid #dee2e6;
}

.margin-v-form {
	margin-top: 10px;
	margin-bottom: 10px;
}

.force-border {
	border-radius:0.25rem !important;
}



.fixed-table{
	table-layout:fixed;
	width:100%;
}

.fixed-table td.col_emails, .fixed-table td.col_mobiles_tmkg, 
.fixed-table td.col_mobiles_sms, .fixed-table td.col_fixes, 
.fixed-table td.col_postal {
	width: 20%;
}

.tot-divs {
	border: 1px solid #ced4da;
	border-radius: 3px;
	width: 100%;
	text-align: right;
	padding:5px 10px;
}

.tot-divs:after{
	content: "\2800\20AC";
}

.tot-divs-no-border{
	width: 100%;
	text-align: right;
	padding:5px 10px;
}

.invoice-single-input{
	width:20%;
	float:left;
	height:100%;
	display:flex; 
	align-items: center;
}

.invoice-single-input-euro{
	float:left;
	height:100%;
	display:flex;
	align-items:center;
	font-weight:bold;
	font-size:16px;
}

.invoice-alert {
	float:left;
	height: 100%;
	display: flex;
	align-items: center;
	font-weight: bold;
	font-size: 16px;
	padding: 0px 20px;
	margin-left: 20px;
}

.border-alert {
	border: 2px solid red;
}

.invoice-remise-label {
	width:40%;
	height:100%;
	float:left;
	display:flex;
	align-items:center;
}

.valign-abs-middle{
	position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.valign-middle{
	vertical-align: middle;
}

.p-amounts{
	display: inline-block;
	font-size: 12px;
	color: #000000;
	padding:5px;
	margin:0;
	line-height:12px;
}

.alert-amounts-waiting {
	color:red !important;
}

.alert-amounts-paid{
	color:green !important;
}

.red-bck {
	background-color: #ff6969 !important;
}

.green-bck {
	background-color:#5ec69e !important;
}

.tot-bck {
	background-color: #9a7ac1 !important;
	--bs-table-bg: #9a7ac1;
}

.tot-comp {
	background-color: #36b5cf !important;
	--bs-table-bg: #36b5cf;
}

.tot-komp-alt {
	background-color: #d2cf72 !important;
	--bs-table-bg: #d2cf72;
}

.tot-country {
	background-color: #d2ad72 !important;
	--bs-table-bg: #d2ad72;
}

.bck-light-blue {
	background-color: rgb(173, 216, 230, 0.3) !important;
	--bs-table-bg: rgb(173, 216, 230, 0.3);
}

.bck-green {
	background-color: rgb(0, 128, 0, 0.5) !important;
	--bs-table-bg: rgb(0, 128, 0, 0.5);
}

.strikethrough {
	text-decoration: line-through;
}

.strikethrough td {
	text-decoration: line-through;
}

.header-nowrap th {
	white-space: nowrap;
}

.commande-name-emb{
	font-weight:bold;
	color:var(--emb-color) !important;
}

.commande-name-mybrief{
	font-weight:bold;
	color:var(--mybrief-color) !important;
}

.bg-light-blue{
	background-color: #54cde0 !important;
	--bs-table-bg: #54cde0;
}

.compta-month-button{
	color: darkblue;
	font-weight:bold;
}

.compta_table td {
	text-align: right;
	white-space: nowrap;
}

/*** DEVIS ***/


.label-vcenter-txtr {
	display: flex;
  align-items: center;
  justify-content: end;
}

.label-vend-txtr {
	display: flex;
  align-items: end;
  justify-content: end;
}

/* BE */
.bck-BE-full-opacity {
	background-color: rgb(210, 173, 114, 1);
	--bs-table-bg: rgb(210, 173, 114, 1);
}

.bck-BE {
	background-color: rgb(210, 173, 114, 0.7);
	--bs-table-bg: rgb(210, 173, 114, 0.7);
}

/* .bck-BE:hover {
	background-color: rgb(210, 173, 114, 1);
	cursor:pointer;
} */

.bck-BE.l3 {
	background-color: rgb(210, 173, 114, 0.3);
	--bs-table-bg: rgb(210, 173, 114, 0.3);
}

.bck-BE.l3:hover {
	background-color: rgb(210, 173, 114, 0.5);
	cursor:pointer;
}

.bck-BE.l4 {
	background-color: rgb(210, 173, 114, 0.1);
	--bs-table-bg: rgb(210, 173, 114, 0.1);
}

.bck-BE.l4:hover {
	background-color: rgb(210, 173, 114, 0.3);
	--bs-table-bg: rgb(210, 173, 114, 0.3);
}

.text-BE {
	color: rgb(210, 173, 114, 1);
}

/* FR */
.bck-FR-full-opacity {
	background-color: rgb(var(--emb-color-rgb), 1);
	--bs-table-bg: rgb(var(--emb-color-rgb), 1);
}

.bck-FR {
	background-color: rgb(var(--emb-color-rgb), 0.7);
	--bs-table-bg: rgb(var(--emb-color-rgb), 0.7);
}

/* .bck-FR:hover {
	background-color: rgb(var(--emb-color-rgb), 1);
	cursor:pointer;
} */

.bck-FR.l3 {
	background-color: rgb(var(--emb-color-rgb), 0.3);
	--bs-table-bg: rgb(var(--emb-color-rgb), 0.3);
}

.bck-FR.l3:hover {
	background-color: rgb(var(--emb-color-rgb), 0.5);
	cursor:pointer;
}

.bck-FR.l4 {
	background-color: rgb(var(--emb-color-rgb), 0.1);
	--bs-table-bg: rgb(var(--emb-color-rgb), 0.1);
}

.bck-FR.l4:hover {
	background-color: rgb(var(--emb-color-rgb), 0.3);
	--bs-table-bg: rgb(var(--emb-color-rgb), 0.3);
}

.text-FR {
	color: rgb(var(--emb-color-rgb), 1);
}

/* MC */
.bck-MC-full-opacity {
	background-color: rgb(var(--mybrief-color-rgb), 1);
	--bs-table-bg: rgb(var(--mybrief-color-rgb), 1);
}

.bck-MC {
	background-color: rgb(var(--mybrief-color-rgb), 0.7);
	--bs-table-bg: rgb(var(--mybrief-color-rgb), 0.7);
}

/* .bck-MC:hover {
	background-color: rgb(var(--mybrief-color-rgb), 1);
	cursor:pointer;
} */

.bck-MC.l3 {
	background-color: rgb(var(--mybrief-color-rgb), 0.3);
	--bs-table-bg: rgb(var(--mybrief-color-rgb), 0.3);
}

.bck-MC.l3:hover {
	background-color: rgb(var(--mybrief-color-rgb), 0.5);
	cursor:pointer;
}

.bck-MC.l4 {
	background-color: rgb(var(--mybrief-color-rgb), 0.1);
	--bs-table-bg: rgb(var(--mybrief-color-rgb), 0.1);
}

.bck-MC.l4:hover {
	background-color: rgb(var(--mybrief-color-rgb), 0.3);
	--bs-table-bg: rgb(var(--mybrief-color-rgb), 0.3);
}

.text-MC {
	color: rgb(var(--mybrief-color-rgb), 1);
}

.bck-b-hidden {
	background-color: #fae7ff;
	--bs-table-bg: #fae7ff;
}

.th-b-hidden {
	background-color: #fae7ff !important;
	--bs-table-bg: #fae7ff !important;
	color:#000000 !important;
	font-weight:bold;
	font-style:italic;
}

.bck-r-hidden {
	background-color: #bee2fc;
	--bs-table-bg: #bee2fc;
}

.th-r-hidden {
	background-color: #bee2fc !important;
	--bs-table-bg: #bee2fc !important;
	color:#000000 !important;
	font-weight:bold;
	font-style:italic;
}

.tot-bck-rgb{
	background-color: rgb(154, 122, 193, 0.3) !important;
}

.text-tot {
	color: rgb(154, 122, 193, 1);
}

.bck-white {
	background-color: #ffffff !important;
}

.draggable_icon{
	position:absolute;
	top:0;
	left:0;
	cursor:hand;
}

.devis_table_bck_EMB {
	background-color: rgb(var(--emb-color-rgb), 0.2);
}

.devis_table_bck_MB {
	background-color: rgb(var(--mybrief-color-rgb), 0.2);
}

.table_fix th {
	text-align: center;
	vertical-align: middle !important;
}

.table_fix th div{
	white-space: nowrap;
}

.table_fix td {
	vertical-align: middle !important;
}

.table_fix {
	border-collapse: separate;
	border-spacing: 0;
}

.badge-custom-1 {
	background-color: rgb(222, 81, 81, 0.3);
	color: #000000;
}

.badge-custom-commande {
	background-color: rgb(234, 125, 1);
	color: #ffffff;
	font-size: 0.7em;
	margin-top:5px;
}

.devis-sticky-tbl th {
	text-align: center;
	vertical-align: middle !important;
}

.devis-sticky-tbl th div{
	white-space: nowrap;
}

.devis-sticky-tbl td {
	vertical-align: middle !important;
}

.devis-sticky-tbl {
	border-collapse: separate;
	border-spacing: 0;
}

/* .devis-sticky-tbl td:first-child {
	position:sticky;
	left:0px;
	background-color:#f4f9ff;
	z-index: 2;
	min-width:180px;
}

.devis-sticky-tbl td:nth-child(2) {
	position:sticky;
	left:180px;
	background-color:#f4f9ff;
	z-index: 2;
	min-width:150px;
}

.devis-sticky-tbl td:nth-child(3) {
	position:sticky;
	left:330px;
	background-color:#f4f9ff;
	z-index: 2;
	min-width:250px;
} */

.bg-d-total {
	background-color: rgba(247, 241, 120, 0.3);
	color: #000000;
}

/*** Toggles ***/

.toggle-volume-offert { 
	white-space: nowrap;
}

.toggle-rounded {
  border-radius: 1rem;
}

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

.top-submit-buttons {
	position:relative;
	bottom:-20px;
	padding-right:0px;
}

/* Custom transform classes */
.ts-12{
	transform: scale(1.2);
}

.ts-15{
	transform: scale(1.5);
}

.ts-20{
	transform: scale(2);
}

.ts-25{
	transform: scale(2.5);
}

.ts-30{
	transform: scale(3);
}

.table-success-darker {
	--bs-table-bg: #28A745;
}

.danger-warning {
	border-color: var(--bs-form-invalid-border-color);
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.danger-warning:focus {
	border-color: var(--bs-form-invalid-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

/*** Custom table colors ***/
.table-blue {
  --bs-table-color: #fff;
  --bs-table-bg: #1e5eac;
  --bs-table-border-color: #0250b0;
  --bs-table-striped-bg: #1e5eac;
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: #608bc0;
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: #608bc0;
  --bs-table-hover-color: #fff;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-indigo {
  --bs-table-color: #fff;
  --bs-table-bg: #6610f2;
  --bs-table-border-color: #560ccd;
  --bs-table-striped-bg: #752de9;
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: #8950e3;
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: #8950e3;
  --bs-table-hover-color: #fff;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.custom-card-border {
	border-color: var(--main-color);
	border-radius: 5px;
}

.custom-card-border-thick {
	border-color: var(--main-color);
	border-width: 4px;
}

.border-emb {
	border-color: var(--emb-color);
}

.border-mybrief {
	border-color: var(--mybrief-color);
}

.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1000;
	left: 0px;
	opacity: 0.5;
	filter: alpha(opacity=50);
}

/*** CRM ***/

.bg-indigo {
	opacity: 1;
	background-color: var(--bs-indigo) !important
}

.border-indigo {
	opacity: 1;
	border-color: var(--bs-indigo) !important;
}

.bg-contact-commercial {
	opacity: 1;
	background-color: var(--bs-purple) !important
}

.border-contact-commercial {
	opacity: 1;
	border-color: var(--bs-purple) !important;
}

.btn-contact-commercial {
	color: #ffffff;
	background-color: var(--bs-purple) !important;
	--bs-btn-bg: var(--bs-purple);
	border-color: var(--bs-purple);
}

.text-contact-commercial {
	color: var(--bs-purple) !important;
}

.text-orange {
	color: var(--bs-orange) !important;
}

.form-check-input-comm:checked {
	background-color: var(--bs-purple) !important;
	border-color: var(--bs-purple) !important;
}

.bg-contact-tech {
	opacity: 1;
	background-color: #5ab7e8 !important
}

.border-contact-tech {
	opacity: 1;
	border-color: #5ab7e8 !important;
}

.btn-contact-tech {
	color: #ffffff;
	background-color: #5ab7e8 !important;
	--bs-btn-bg: #5ab7e8;
	border-color: #5ab7e8;
}

.text-contact-tech {
	color: #5ab7e8 !important;
}

.form-check-input-tech:checked {
	background-color: #5ab7e8 !important;
	border-color: #5ab7e8 !important;
}

.bg-contact-finance {
	opacity: 1;
	background-color: #42a780 !important
}

.border-contact-finance {
	opacity: 1;
	border-color: #42a780 !important;
}

.btn-contact-finance {
	color: #ffffff;
	background-color: #42a780 !important;
	--bs-btn-bg: #42a780;
	border-color: #42a780;
}

.text-contact-finance {
	color: #42a780 !important;
}

.form-check-input-finance:checked {
	background-color: #42a780 !important;
	border-color: #42a780 !important;
}

/* Newsletter color */
.bg-contact-ns {
	opacity: 1;
	background-color: var(--bs-pink) !important
}

.border-contact-ns {
	opacity: 1;
	border-color: var(--bs-pink) !important;
}

.btn-contact-ns {
	color: #ffffff;
	background-color: var(--bs-pink) !important;
	--bs-btn-bg: var(--bs-pink);
	border-color: var(--bs-pink);
}

.text-contact-ns {
	color: var(--bs-pink) !important;
}

.form-check-input-ns:checked {
	background-color: var(--bs-pink) !important;
	border-color: var(--bs-pink) !important;
}

.bg-contacts {
	opacity: 1;
	background-color: #ce834f !important
}

.border-contacts {
	opacity: 1;
	border-color: #ce834f !important;
}

.shadow-badge {
	box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.50) !important;
}

.crm-disabled-row td {
	background-color: #f8d7da !important;
}

.bg-md-amber-300 {
	background-color: #FFD54F !important;
	color:#000000;
}

.bg-md-orange-300 {
	background-color: #FFB74D !important;
	color:#000000;
}

.bg-md-deep-orange-300 {
	background-color: #FF8A65 !important;
	color:#000000;
}

/* Remove limit max-width for bootstrap tooltip */
.tooltip-inner {
	max-width: none !important;
}

input[readonly], input[readonly]:focus {
	background-color: #f7f9fc;
}

/* Submenu classes */
.dropdown-menu li {
	position: relative;
}
.dropdown-menu .dropdown-submenu {
	display: none;
	position: absolute;
	left: 100%;
	top: -7px;
}
.dropdown-menu .dropdown-submenu-left {
	right: 100%;
	left: auto;
}
.dropdown-menu > li:hover > .dropdown-submenu {
	display: block;
}

/* Table tr backgrounds */
.table-bg-danger-subtle {
	background-color: var(--bs-danger-bg-subtle) !important;
}

.table-bg-danger-subtle td {
	background-color: var(--bs-danger-bg-subtle) !important;
}

.bg-emb {
	background-color: var(--emb-color) !important;
}

.bg-mybrief {
	background-color: var(--mybrief-color) !important;
}

.bg-be {
	background-color: rgb(210, 173, 114) !important;
	color: #000000 !important;
}

/*** Popover custom classes ***/
.popover-dark {
  --bs-popover-bg: #000000;
  --bs-popover-body-color: #fff;
  --bs-popover-border-color: #2c2f33;
	--bs-popover-header-bg: #50545a;
  --bs-popover-header-color: #fff;
}

.popover-indigo {
	--bs-popover-bg: #6610f2;
	--bs-popover-body-color: #fff;
	--bs-popover-border-color: #560ccd;
	--bs-popover-header-bg: #7c3aed;
	--bs-popover-header-color: #fff;
}

.popover-blue {
	--bs-popover-bg: #1e5eac;
	--bs-popover-body-color: #fff;
	--bs-popover-border-color: #0250b0;
	--bs-popover-header-bg: #3577c9;
	--bs-popover-header-color: #fff;
}

/******** MATERIAL SYMBOLS ********/

/* To add fill to google symbols */
.material-symbols-filled {
	font-variation-settings:
		'FILL' 1,
		'wght' 400,
		'GRAD' 0,
		'opsz' 48;
}

/* Toggle Fill via hover (empty to filled) */
.material-symbols-toggle {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'opsz' 48;
	transition: font-variation-settings 0.3s ease;
}

.material-symbols-toggle:hover {
	font-variation-settings: 'FILL' 1, 'wght' 500, 'opsz' 48;
}

/* Different colors on hover */
.material-symbols-green-hover:hover {
	color: #42a780 !important;
}

/* Toggle Fill via reverse (filled to empty) */
.material-symbols-reverse-toggle {
	font-variation-settings: 'FILL' 1, 'wght' 400, 'opsz' 48;
	transition: font-variation-settings 0.3s ease;
}

.material-symbols-reverse-toggle:hover {
	font-variation-settings: 'FILL' 0, 'wght' 500, 'opsz' 48;
}

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

/*** DataTables fixes ***/
/* DT2 applies flex-direction:row-reverse on div.dt-column-header for numeric/date/right
   aligned columns, which puts the sort icon on the visual left.
   Target the actual flex container (div.dt-column-header) and force row direction.
   None of DT's flex-direction rules use !important so this wins. */
table.dataTable thead th div.dt-column-header,
table.dataTable thead td div.dt-column-header {
	flex-direction: row !important;
}
/*** End DataTables fixes ***/

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

/* ============================================================
   SIDEBAR LAYOUT
   ============================================================ */

:root {
	--sidebar-width: 230px;
	--sidebar-collapsed-width: 62px;
	--sidebar-bg: #1e2329;
	--sidebar-border: rgba(255,255,255,.08);
	--sidebar-text: rgba(255,255,255,.82);
	--sidebar-text-muted: rgba(255,255,255,.42);
	--sidebar-hover-bg: rgba(255,255,255,.07);
	--sidebar-active-bg: rgba(255,255,255,.13);
	--sidebar-transition: 0.22s ease;
}

/* ── Sidebar ── */
.app-sidebar {
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	width: var(--sidebar-width);
	background: var(--sidebar-bg);
	color: var(--sidebar-text);
	display: flex;
	flex-direction: column;
	transition: width var(--sidebar-transition);
	overflow: hidden;
	z-index: 1045;
	box-shadow: 2px 0 12px rgba(0,0,0,.35);
}

body.sidebar-collapsed .app-sidebar {
	width: var(--sidebar-collapsed-width);
}

/* ── Main content offset ── */
.main-wrapper {
	margin-left: var(--sidebar-width);
	transition: margin-left var(--sidebar-transition);
	min-height: 100vh;
}

body.sidebar-collapsed .main-wrapper {
	margin-left: var(--sidebar-collapsed-width);
}

/* ── Sidebar header ── */
.sidebar-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0 0.6rem 0 0.85rem;
	height: 54px;
	flex-shrink: 0;
	border-bottom: 1px solid var(--sidebar-border);
}

.sidebar-brand {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	flex: 1;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	min-width: 0;
}

.sidebar-logo-img {
	height: 28px;
	width: auto;
	flex-shrink: 0;
	/* filter: brightness(0) invert(1); */
	opacity: 0.9;
}

.sidebar-brand-text {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: .02em;
	white-space: nowrap;
	opacity: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: opacity var(--sidebar-transition), width var(--sidebar-transition);
}

body.sidebar-collapsed .sidebar-brand-text {
	opacity: 0;
	width: 0;
}

#sidebar-toggle {
	background: none;
	border: none;
	color: var(--sidebar-text);
	width: 32px;
	height: 32px;
	border-radius: 6px;
	cursor: pointer;
	flex-shrink: 0;
	font-size: 1.15rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--sidebar-transition);
}

#sidebar-toggle:hover {
	background: var(--sidebar-hover-bg);
	color: #fff;
}

/* ── Navigation ── */
.sidebar-nav {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0.4rem 0;
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,.15) transparent;
}

.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

/* ── Group button & direct link ── */
.sidebar-group-btn,
.sidebar-direct-link {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 0.55rem 0.9rem;
	background: none;
	border: none;
	border-left: 3px solid transparent;
	color: var(--sidebar-text);
	text-align: left;
	cursor: pointer;
	gap: 0.75rem;
	white-space: nowrap;
	overflow: hidden;
	font-size: 0.875rem;
	text-decoration: none;
	transition: background var(--sidebar-transition), border-color var(--sidebar-transition), color var(--sidebar-transition);
}

.sidebar-group-btn:hover,
.sidebar-direct-link:hover {
	background: var(--sidebar-hover-bg);
	color: #fff;
}

.sidebar-group.active > .sidebar-group-btn,
.sidebar-direct-link.active {
	background: var(--sidebar-active-bg);
	border-left-color: var(--main-color);
	color: #fff;
}

/* Icon */
.sidebar-group-btn > .bi:first-child,
.sidebar-direct-link > .bi:first-child,
.sidebar-icon-wrap { /* also handles the icon-wrap container */
	font-size: 1.05rem;
	flex-shrink: 0;
	width: 1.15rem;
	text-align: center;
}
.sidebar-direct-link > .bi:first-child {
	width: 1.15rem;
}

/* ── Icon wrapper for badge overlay ── */
.sidebar-icon-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.sidebar-icon-wrap .bi {
	font-size: 1.05rem;
}

/* ── Sidebar Bootstrap tooltip ── */
.sidebar-tooltip .tooltip-inner {
	background: #0d1117;
	color: #e6edf3;
	font-size: 0.8rem;
	font-weight: 500;
	padding: 0.35rem 0.7rem;
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(0,0,0,.45);
	max-width: 220px;
	letter-spacing: .01em;
}
.sidebar-tooltip.bs-tooltip-end .tooltip-arrow::before,
.sidebar-tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
	border-right-color: #0d1117;
}

/* ── Notification badge overlaid on icon ── */
.sidebar-badge {
	position: absolute;
	top: -6px;
	right: -8px;
	background: #0d6efd;
	color: #fff;
	font-size: 0.6rem;
	font-weight: 700;
	line-height: 1;
	min-width: 15px;
	height: 15px;
	padding: 0 3px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px var(--sidebar-bg);
	pointer-events: none;
}

/* Label */
.sidebar-item-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: opacity var(--sidebar-transition);
	flex: 1;
}

/* Chevron */
.sidebar-chevron {
	font-size: 0.7rem;
	flex-shrink: 0;
	transition: transform 0.2s ease, opacity var(--sidebar-transition);
}

.sidebar-group-btn[aria-expanded="true"] .sidebar-chevron {
	transform: rotate(180deg);
}

/* Collapsed state: hide labels, chevrons and sub-menus */
body.sidebar-collapsed .sidebar-item-label,
body.sidebar-collapsed .sidebar-chevron {
	opacity: 0;
	pointer-events: none;
}

body.sidebar-collapsed .sidebar-submenu {
	display: none !important;
}

/* Active accent in collapsed mode */
body.sidebar-collapsed .sidebar-group.active > .sidebar-group-btn {
	border-left-color: var(--main-color);
	background: var(--sidebar-active-bg);
}

/* ── Sub-menu ── */
.sidebar-submenu {
	padding: 0;
	background: rgba(0,0,0,.15);
}

.sidebar-subitem {
	display: flex;
	align-items: center;
	padding: 0.42rem 0.9rem 0.42rem 2.75rem;
	color: rgba(255,255,255,.68);
	text-decoration: none;
	font-size: 0.835rem;
	white-space: nowrap;
	overflow: hidden;
	transition: background var(--sidebar-transition), color var(--sidebar-transition);
}

.sidebar-subitem:hover,
.sidebar-subitem.active {
	background: var(--sidebar-hover-bg);
	color: #fff;
}

/* Sub-menu section labels */
.sidebar-submenu-header {
	display: block;
	font-size: 0.63rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--sidebar-text-muted);
	padding: 0.65rem 0.9rem 0.2rem 2.75rem;
	white-space: nowrap;
}

/* ── Sidebar footer ── */
.sidebar-footer {
	flex-shrink: 0;
	border-top: 1px solid var(--sidebar-border);
	padding: 0.35rem 0;
}

.sidebar-env-badge {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.4rem 0.9rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: #ffc107;
	white-space: nowrap;
	overflow: hidden;
}

.sidebar-env-badge .bi {
	font-size: 1rem;
	flex-shrink: 0;
	width: 1.15rem;
	text-align: center;
}

/* ── frame_title ── */
.frame_title {
	padding: 4px 16px 6px;
	font-size: 1.05rem;
	font-weight: 600;
	color: #1e293b;
	border-bottom: 1px solid #e9ecef;
	background: #fff;
}
.frame_title h2 {
	color: #1e293b;
	font-weight: 700;
	letter-spacing: -0.2px;
	position: relative;
	display: inline-block;
}
.frame_title h2::after {
	content: '';
	display: block;
	width: 3rem;
	height: 3px;
	background: var(--main-color);
	border-radius: 2px;
	margin: 3px auto 0;
}
/* Breadcrumb inside frame_title */
.page-breadcrumb {
	margin-bottom: 0;
}
.page-breadcrumb .breadcrumb {
	font-size: 0.72rem;
	margin-bottom: 0;
	padding: 3px 0 0;
	justify-content: center;
	--bs-breadcrumb-divider: '›';
}
.page-breadcrumb .breadcrumb-item {
	color: #94a3b8;
}
.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
	color: #cbd5e1;
}
.page-breadcrumb .breadcrumb-item a {
	color: var(--main-color);
	text-decoration: none;
}
.page-breadcrumb .breadcrumb-item a:hover {
	text-decoration: underline;
}
.page-breadcrumb .breadcrumb-item.active {
	color: #64748b;
	font-weight: 500;
}

/* ── Floating breadcrumb pill (bottom-left, appears on scroll) ── */
#breadcrumb-pill {
	position: fixed;
	bottom: 1.1rem;
	left: calc(var(--sidebar-width) + 1rem);
	transition: left var(--sidebar-transition), opacity 0.25s ease, transform 0.25s ease;
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	z-index: 1039;
}
#breadcrumb-pill.bc-pill-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
body.sidebar-collapsed #breadcrumb-pill {
	left: calc(var(--sidebar-collapsed-width) + 1rem);
}
#breadcrumb-pill .bc-pill-inner {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	background: rgba(30, 41, 59, 0.88);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #f1f5f9;
	font-size: 0.72rem;
	font-weight: 500;
	padding: 0.3rem 0.75rem;
	border-radius: 99px;
	box-shadow: 0 2px 8px rgba(0,0,0,.2);
	white-space: nowrap;
	max-width: calc(100vw - var(--sidebar-width) - 2rem);
	overflow: hidden;
	text-overflow: ellipsis;
}
#breadcrumb-pill .bc-pill-inner a {
	color: var(--main-color);
	text-decoration: none;
}
#breadcrumb-pill .bc-pill-inner a:hover {
	text-decoration: underline;
}
#breadcrumb-pill .bc-pill-sep {
	color: #94a3b8;
	font-size: 0.65rem;
}
@media (max-width: 768px) {
	#breadcrumb-pill { display: none; }
}

/* ── Sticky filter bar: offset for sidebar ── */
#filter-sticky-bar {
	left: var(--sidebar-width) !important;
	width: calc(100% - var(--sidebar-width)) !important;
	transition: left var(--sidebar-transition), width var(--sidebar-transition) !important;
}
body.sidebar-collapsed #filter-sticky-bar {
	left: var(--sidebar-collapsed-width) !important;
	width: calc(100% - var(--sidebar-collapsed-width)) !important;
}

/* ── Backdrop (mobile only) ── */
.sidebar-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.5);
	z-index: 1044;
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
	cursor: pointer;
}
body.sidebar-mobile-open .sidebar-backdrop {
	display: block;
}

/* ── Mobile top bar ── */
.mobile-topbar {
	display: none;
	align-items: center;
	height: 48px;
	padding: 0 0.85rem;
	background: var(--sidebar-bg);
	color: #fff;
	gap: 0.75rem;
	position: sticky;
	top: 0;
	z-index: 1000;
	flex-shrink: 0;
}
.mobile-topbar-toggle {
	background: none;
	border: none;
	color: #fff;
	font-size: 1.35rem;
	cursor: pointer;
	padding: 0.25rem;
	display: flex;
	align-items: center;
	border-radius: 6px;
	transition: background 0.2s;
}
.mobile-topbar-toggle:hover { background: rgba(255,255,255,.1); }
.mobile-topbar-title {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: .03em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}
.mobile-topbar-logo {
	height: 22px;
	width: auto;
	filter: brightness(0) invert(1);
	opacity: .85;
}

/* ── Tablet (769 – 900px): push-collapsed ── */
@media (min-width: 769px) and (max-width: 900px) {
	.app-sidebar {
		width: var(--sidebar-collapsed-width);
	}
	body.sidebar-collapsed .app-sidebar {
		width: var(--sidebar-collapsed-width);
	}
	.main-wrapper {
		margin-left: var(--sidebar-collapsed-width);
	}
	body.sidebar-collapsed .main-wrapper {
		margin-left: var(--sidebar-collapsed-width);
	}
	#filter-sticky-bar,
	body.sidebar-collapsed #filter-sticky-bar {
		left: var(--sidebar-collapsed-width) !important;
		width: calc(100% - var(--sidebar-collapsed-width)) !important;
	}
}

/* ── Mobile portrait: disable sticky columns ── */
@media (max-width: 768px) and (orientation: portrait) {
	.commandes_table_fixed td:first-child,
	.commandes_table_fixed td:nth-child(2),
	.commandes_table_fixed td:nth-child(3) {
		position: static !important;
		z-index: auto !important;
		left: auto !important;
	}
}

/* ── Mobile (≤ 768px): off-canvas overlay ── */
@media (max-width: 768px) {
	.mobile-topbar { display: flex; }

	/* Sidebar hides off-screen; always full-width when open (overlays content) */
	.app-sidebar {
		width: var(--sidebar-width) !important;
		transform: translateX(-100%);
		transition: transform var(--sidebar-transition);
	}
	body.sidebar-mobile-open .app-sidebar {
		transform: translateX(0);
	}

	/* Sidebar collapsed class has no effect on mobile */
	body.sidebar-collapsed .app-sidebar {
		width: var(--sidebar-width) !important;
		transform: translateX(-100%);
	}
	body.sidebar-collapsed.sidebar-mobile-open .app-sidebar {
		transform: translateX(0);
	}

	/* Full-width content, no left margin */
	.main-wrapper,
	body.sidebar-collapsed .main-wrapper {
		margin-left: 0 !important;
	}

	/* Sticky bar: full width on mobile */
	#filter-sticky-bar,
	body.sidebar-collapsed #filter-sticky-bar {
		left: 0 !important;
		width: 100% !important;
	}

	/* Show submenu labels (they're always visible when open on mobile) */
	body.sidebar-collapsed .sidebar-item-label,
	body.sidebar-collapsed .sidebar-chevron {
		opacity: 1;
		pointer-events: auto;
	}
	body.sidebar-collapsed .sidebar-submenu {
		display: block !important;
	}
}

/* ============================================================
   END SIDEBAR LAYOUT
   ============================================================ */

		 /* ── Calc montants ── */
		 .montants-calc {
		 	display: flex;
		 	align-items: stretch;
		 	gap: 0;
		 	padding: 12px 20px;
		 	border-bottom: 1px solid #f3f4f6;
		 }
	
		 .montants-calc .calc-block {
		 	flex: 1;
		 	display: flex;
		 	flex-direction: column;
		 	align-items: center;
		 	gap: 0.3rem;
		 	padding: 10px 14px;
		 	border: 1px solid #dee2e6;
		 	border-radius: 8px;
		 	background: #fff;
		 }
	
		 .montants-calc .calc-block.calc-result {
		 	background: #f0fdf4;
		 	border-color: #86efac;
		 }
	
		 .montants-calc .calc-separator {
		 	display: flex;
		 	align-items: center;
		 	padding: 0 6px;
		 	color: #adb5bd;
		 	font-size: 1.3rem;
		 	font-weight: 300;
		 	align-self: center;
		 }
	
		 .montants-calc .calc-label {
		 	font-size: 0.72rem;
		 	font-weight: 700;
		 	text-transform: uppercase;
		 	letter-spacing: 0.05em;
		 	color: #6c757d;
		 }
	
		 .montants-calc .calc-input-wrap {
		 	width: 100%;
		 }
	
		 .montants-calc .calc-input-wrap .input-group {
		 	width: 100%;
		 }
	
		 .montants-calc .calc-input-wrap input {
		 	min-width: 80px;
		 }
	
		 .montants-calc .calc-actions {
		 	display: flex;
		 	align-items: center;
		 	padding-left: 10px;
		 	align-self: center;
		 	flex-direction: column;
		 	gap: 6px;
		 }
	
		 .pdf-preview-card {
		 	transition: background 0.15s, box-shadow 0.15s;
		 	cursor: pointer;
		 }
	
		 .pdf-preview-card:hover {
		 	background: #e9ecef !important;
		 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		 }

		/* ── Invoice receipt summary card ── */
		.invoice-receipt-card {
			margin: 6px 20px 14px calc(210px + 20px);
			border: 1px solid #dee2e6;
			border-radius: 8px;
			overflow: hidden;
			max-width: 480px;
		}
		.invoice-receipt-card .receipt-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 7px 14px;
			border-bottom: 1px solid #f3f4f6;
			gap: 0.5rem;
		}
		.invoice-receipt-card .receipt-row:last-child {
			border-bottom: none;
		}
		.invoice-receipt-card .receipt-label {
			font-size: 0.84rem;
			font-weight: 600;
			color: #374151;
			display: flex;
			align-items: center;
			gap: 0.4rem;
			flex-shrink: 0;
		}
		.invoice-receipt-card .receipt-op-sign {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background: #f3f4f6;
			font-size: 0.8rem;
			font-weight: 700;
			color: #6b7280;
			flex-shrink: 0;
		}
		.invoice-receipt-card .receipt-value {
			display: flex;
			align-items: center;
			gap: 6px;
		}
		.invoice-receipt-card .receipt-currency {
			font-size: 0.84rem;
			color: #6b7280;
			font-weight: 500;
			flex-shrink: 0;
		}
		.invoice-receipt-card .receipt-input-readonly {
			max-width: 120px;
			border: none;
			background: transparent;
			font-size: 0.9rem;
			font-weight: 500;
			color: #374151;
			box-shadow: none;
		}
		.invoice-receipt-card .receipt-input-readonly:focus {
			box-shadow: none;
			outline: none;
		}
		.invoice-receipt-card .receipt-input-editable {
			max-width: 120px;
			font-size: 0.9rem;
		}
		.invoice-receipt-card .receipt-label-input {
			max-width: 170px;
			font-size: 0.82rem;
			height: 28px;
			padding: 2px 6px;
		}
		.invoice-receipt-card .receipt-separator {
			height: 0;
			border-top: 1px dashed #dee2e6;
			margin: 0 14px;
		}
		.invoice-receipt-card .receipt-separator.solid {
			border-top: 2px solid #dee2e6;
			border-top-style: solid;
		}
		.invoice-receipt-card .receipt-row-result {
			background: #f0fdf4;
			border-top: 2px solid #198754;
			border-bottom: none;
		}
		.invoice-receipt-card .receipt-label-result {
			font-size: 0.9rem;
			font-weight: 700;
			color: #15803d;
		}
		.invoice-receipt-card .receipt-input-result {
			max-width: 130px;
			border: none;
			background: transparent;
			font-size: 1rem;
			font-weight: 700;
			color: #15803d;
			box-shadow: none;
		}
		.invoice-receipt-card .receipt-input-result:focus {
			box-shadow: none;
		}
		.invoice-receipt-card .receipt-alert-row {
			padding: 4px 14px 6px;
			background: #fef2f2;
		}
		.invoice-receipt-ttc {
			border-color: #198754;
			margin-top: 10px;
		}
		.invoice-receipt-ttc .receipt-row-result {
			border-top: none;
		}
		/* border-alert override for receipt card */
		.invoice-receipt-card.border-alert {
			border-color: #dc3545;
		}

/* ============================================================
   FORM MODERNIZATION UTILITIES
   (sticky bar, section headers, 2-col grid, chips)
   ============================================================ */

/* ── Sticky action bar ── */
.sticky-action-bar {
	position: sticky;
	top: 0;
	z-index: 1020;
	background: rgba(255,255,255,0.97);
	backdrop-filter: blur(4px);
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* ── Section divider header ── */
.form-section-header {
	background: #f8f9fa;
	border-top: 1px solid #dee2e6;
	border-bottom: 1px solid #dee2e6;
	padding: 0.35rem 1rem;
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #6c757d;
}

/* ── 2-column grid form rows ── */
.frow-2col {
	display: grid;
	grid-template-columns: 210px 1fr;
	align-items: center;
	padding: 7px 20px;
	border-bottom: 1px solid #f3f4f6;
	min-height: 42px;
}
.frow-2col.align-top {
	align-items: start;
	padding-top: 10px;
	padding-bottom: 10px;
}
.form-label-2col {
	text-align: right !important;
	padding-right: 1.1rem !important;
	padding-left: 0 !important;
	font-size: 0.84rem !important;
	font-weight: 600 !important;
	color: #374151 !important;
	line-height: 1.35;
	margin-bottom: 0;
	word-break: break-word;
	border-right: 1px solid #dee2e6;
}
.fcol-right {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.fcol-right.align-top {
	align-items: flex-start;
}

/* ── Radio chip (btn-check + label) ── */
.ratt-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.85rem;
	border-radius: 999px;
	border: 2px solid #dee2e6;
	background: #fff;
	color: #374151;
	font-weight: 500;
	font-size: 0.88rem;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
	cursor: pointer;
}
.ratt-chip .chip-cc {
	display: inline-block;
	width: 20px;
	height: 15px;
	border-radius: 2px;
	overflow: hidden;
	flex-shrink: 0;
	vertical-align: middle;
}
.btn-check:checked + .ratt-chip {
	background: #198754;
	border-color: #198754;
	color: #fff;
}
.ratt-chip:hover {
	border-color: #adb5bd;
	background: #f8f9fa;
}
.btn-check:checked + .ratt-chip:hover {
	background: #157347;
	border-color: #157347;
	color: #fff;
}