
<style type="text/css">


/*------------------------------------------- Defaut ------------------------------------------------------*/

.reset {

	

}
	

	
* {
margin:0;
padding:0;
outline: 0;
border: 0;
box-sizing: border-box;	
list-style-type: none;	
font-family: 'Inter', sans-serif;
color: #000;	
font-weight: 400;	
font-size:14px;	
}

::placeholder {
color: #ccc;
text-decoration: none!important;	
}

.none {
display:none!important;	
}		

.maj {
text-transform:uppercase!important;		
}	
	
.mobile {
display:none!important;	
}
	
	
	
b {
font-weight: bold!important;		
}		
	
body {
background-color: #f8f8f8;		
}	

a {
cursor: pointer;
}	
	
/* --------------------- LOGIN -------------------- */	
body.login  {	
display: flex; 
justify-content: center;
align-items: center;	
}
	
body.login form {	
width: 500px;
height: auto;
background-color: #fff;
border-radius: 20px;
padding: 30px;	
border: 1px solid #e6e1e1;
}	
	
body.login form input {	
width: 100%;
font-weight: bold;	
}	
	
body.login form .bloc_label {	
margin-bottom: 20px;
position: relative;
}	
	
body.login form .bloc_label label {	
margin-bottom: 10px;
font-size: 16px;
display: block;	
}	
	
body.login form #resultat {	
margin-bottom: 20px;
font-size: 14px;
display: block;	
}	
	
body.login form .bouton {		
display: table;
margin: 0 auto 20px auto;
}

body.login form .bouton:hover {		
background-color:#ff6c01;
}	
	
body.login form p.message_login {		
font-size: 14px;
color:red;	
text-align: center;	
margin-bottom: 20px;	
}	
	
body.login form p.message_login_valider {		
font-size: 18px;
color:green;	
text-align: center;	
margin-bottom: 20px;
font-weight: bold;	
}	
	
	
body.login form p.cocktail {		
font-size: 11px;
color:#434343;	
text-align: center;	
}
	
body.login form p.cocktail a:hover {		
color:#ff6c01;	
}	
	
body.login form p.mdp {		
font-size: 14px;
color:#000;	
text-align: center;
margin-bottom: 20px;	
}
		
body.login form p.mdp a:hover {		
color:#ff6c01;	
}	
	
body.login form p.cocktail a {		
font-size: 11px;
}	

body.login form p.titre_mdp  {		
margin-bottom: 20px;	
}	
	
body.login form p.titre_mdp span {		
font-size: 16px;
font-weight: bold;
color: #ff6c01;	
}	
	
body.login form .bloc_label i {
    position: absolute;
	color: #000;
    right: 14px;
    bottom: 12px;
    font-size: 20px;
}	
	
	
#interface {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}	
	
.reload {
display:none!important;		
}	
	
.fa-bars {
display:none;		
}	

.z_index4  {
z-index:4;		
}
	
.z_index5  {
z-index:5;		
}	
	
.z_index6  {
z-index:6;		
}		
	
/* --------------------- CHARGEMENT -------------------- */	
.loader_position {	
margin: auto;
width: 40px;
height: 45px;
top: 0;
bottom: 0;
position: absolute;
left: 0;
right: 0;	
opacity: 0;	
transition: 0.6s all;
margin-top:25px!important;		
}	

.loader_position_visible {
opacity: 1;			
}	
	

	
/* --------------------- SCROLLBAR -------------------- */
::-webkit-scrollbar {
  width: 2px;
  height: 0px;
}


::-webkit-scrollbar-track {
  background-color: transparent; 
  border-radius:50px;	
}


::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius:50px;	
}


::-webkit-scrollbar-thumb:hover {
  background: #000; 
}
	
/* --------------------- BALISE -------------------- */	
h1 {
font-size:26px; 

}	

h2 {
font-size:22px; 
text-transform: uppercase;
}	

h3 {
font-size:18px; 
font-weight: 600;
}	
	

input, select, .selectize-input, textarea {
box-sizing: border-box;
border-radius: 3px;
height: 40px;
min-height: 40px;
line-height: 40px;
padding: 0 5px 0 10px;
border: none;
font-size: 14px;
box-shadow: 0 0 0 0.5px #d8d9d9;
display: block;
position: relative;
}

input[type="checkbox"]	 {	
height: 20px!important;
min-height: 20px!important;
width: 20px!important;
border: none!important;	
}
	
input[type="checkbox"]:hover	 {	
box-shadow:none;
}	
	
input:hover, select:hover, textarea:hover, form.selectize-input:hover {
    box-shadow: 0 0 0 0.5px #ff6c01;
}	
	
input.warning {
box-shadow: 0 0 2px 1px red!important; /* Ombre de boîte rouge */	
}	
	
/* --------------------- MENU -------------------- */
nav {	
top: 0px;
left:0;	
width: 250px;
background-color: #f9fafa;
z-index: 1;
position: fixed;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
z-index: 3;
padding: 15px;
border-right: 1px solid #d8d9d9;	
}

nav a:not(.logo) {		
text-decoration: none;
display: block;
clear: both;
position: relative;
text-align: left;
line-height: 45px;
height: 45px;
text-overflow: ellipsis!important;
overflow: hidden!important;
font-size: 14px;
font-weight: bold;
margin-bottom: 5px;
cursor: pointer;	
}
	
	
nav a i {	
width: 60px;	
text-align: center;
font-size:20px;	
display: inline-block;	
}	
	
nav a i.fleche {
position: absolute;
right: 10px;
top: 12;	
}	

nav a.etat_select i.fleche {
transform: rotate(90deg);	
}
	
nav:hover a:not(.logo):hover, nav a.etat_select {	
background-color: rgba(0, 0, 0, 0.05);
border-radius: 10px;	
}	


nav .sous_menu {
max-height: 0;
transition: max-height 0.20s ease-out;
overflow: hidden;
display: none;	
background-color: #f9fafa;	
}

nav .sous_menu a {
margin-left: 15px;
}			
	
nav a span::first-letter {
text-transform: uppercase;		
}	

a.logo {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 20px;
    width: 100%;
    left: 0;
}


a.logo img {
max-width: 150px;
max-height: 150px;	
}	
	
	
.page {
margin-left: 250px;	
} 	
	
header {
height: 50px;
border-bottom: 1px solid #d8d9d9;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
padding: 0;
column-gap: 15px;
position: fixed;
top: 0;
left: 250px;
width: calc(100% - 250px);
background: #fff;
z-index: 3;		
}	
	
.barre_bouton {
height: 80px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
padding: 0 30px;
column-gap: 15px;
position: fixed;
top: 50px;
left: 250px;
width: calc(100% - 250px);
background: #eceded;
z-index: 2;
}	
	

.page section {

margin-top: 130px;
height: calc(100% - 130px);	
}	

.contenu {
padding: 20px 30px;

background: #fff;	
}
	
.flex {
display: flex;
align-items: center;	
}
	
.barre_bouton .flex {
column-gap: 15px;
}	
	
.bouton {
background-color: #000;
border-radius: 7px;
font-size: 14px;
padding: 12px 20px;
color: #fff;
text-decoration: none;
cursor: pointer;
position: relative;
border: 1px solid transparent;
}	
	
.bouton:hover {	
background-color:#ff6c01;	
}
	
.bouton.outline {
background-color: #fff;
border-color: #000;
color: #000;
}
	
.bouton.outline:hover {
background-color: #fff;
border-color: #ff6c01;
color: #ff6c01;
}	
	
	
.bouton.rouge {	
background-color: red;	
}
	
.bouton.rouge:hover {	
color: red;	
background-color: white;	
}	
	
.bouton.vert:hover {	
color: green;	
background-color: white;	
border:1px solid green;	
}	
.bouton.vert {	
color: white;	
background-color: green;	
}	

.bouton.bt_rec {	
display: table;
margin: 20px auto;
}	

.supr_item {
font-size: 18px;
color:red;
cursor: pointer;	
}	
.supr_item:hover {	
color:black;	
}
	
/* --------------------- MON COMPTE -------------------- */
.menu-container {
position: relative;
display: inline-block;
border-left:1px solid #000;	
}
.menu-title span {
text-transform: uppercase;
}
	
.menu-title {
padding: 15px;
cursor: pointer;
user-select: none;
}	
	
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.menu-container:hover .dropdown-content {
display: block;
}
.menu-container:hover .menu-title {

}
	
/* --------------------- BURGER FENETRE -------------------- */	
.popup .menu-container {
border:1px solid black;	
border-radius: 7px;	
min-width: 160px;	
}	
	
.popup .menu-container:hover  {
border-color:#ff6c01;		
}		
	
.popup .menu-container:hover .menu-title i {
color:#ff6c01;
}	

.popup .menu-container:hover .menu-title p {
color:#ff6c01;
}	
	
.popup .menu-container .menu-title i {
font-size: 22px;	
}	

.popup .menu-container .menu-title p {
font-size: 16px;	
}	
	
.popup .menu-container .menu-title {
padding: 10px;
display: flex;	
gap: 12px;	
}	
.popup .dropdown-content {
min-width: 160px;	
}	
	
	
	

/* --------------------- DATA TABLE -------------------- */
.dataTable {		
width:100%!important;	
}
	
table.dataTable > tbody {		
font-size: 14px;	
}
	
.tb_global {
padding: 20px 30px;
border: 1px solid ;
border-radius:10px;	
}	
	
.barre_recherche {
height: 60px;
display: flex;	
flex-direction: row;
flex-wrap: nowrap;
align-items: center;	
column-gap: 15px;	
}	
	
.ids_select {	
padding: 12px;	
background-color: #d8d9d9;
border-radius: 7px;		
}
	
.ids_select i {		
font-size: 20px;	
}
	
.icone.actif {		
background-color: red;
cursor: pointer;	
}	
	
.icone.actif:hover {	
opacity: 0.7;
}
	
.icone.rouge.actif {	
background-color: red;	
}		
.icone.vert.actif {	
background-color: #31E169;	
}		
	
	
.icone.actif i {	
color: #fff;	
}
	
#element_select {	
font-size: 11px;	
font-weight: bold;	
}	
	
#element_select span {		
color: #0036FF;		
}
	
	
	
table.dataTable > thead > tr > th, table.dataTable > thead > tr > td {	
border-bottom: 1px solid !important;	
}

table.dataTable tbody th, table.dataTable tbody td {
padding: 20px 10px!important;
}	
	
		
	
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
font-size: 12px!important;	
}	
	
table.dataTable.no-footer {
border-bottom: none!important;	
}	
	
table.dataTable tbody tr td span.gras {
font-weight:bold;!important;	
}	
	
table.dataTable tbody tr td.click, table.dataTable tbody tr td.action span {
cursor: pointer!important;	
}	

table.dataTable > thead > tr > th.droite, 	table.dataTable tbody tr td.droite {
text-align: right!important;		
}
	
table.dataTable tbody tr td.action span.ico_inactif {
cursor: default!important;	
pointer-events: none;	
}	
	
table.dataTable tbody tr td.action span.ico_inactif i {	
color: #cacaca!important;		
}
	
	
table.dataTable > thead > tr > th, table.dataTable > thead > tr > td {
font-size: 14px!important;		
}	
	
table.dataTable tbody tr:hover {
background-color: #f1f1f1!important;	
}
	
table.dataTable.no_hover tbody tr {
cursor: default!important;	
	
}	

/*	
table.dataTable tbody th.action, table.dataTable tbody td.action {
text-align: center;	
flex:1;	
}
	
table.dataTable tbody tr {
display: flex;
}	
	
table.dataTable > thead > tr > th, table.dataTable > thead > tr > td {
width: 150px;	
}	
	
table.dataTable tbody td span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 150px;	
}	
*/	
table.dataTable thead th.action, table.dataTable tbody td.action {	
width:70px!important;	
}	
	
table.dataTable thead th.action, table.dataTable tbody td.case {	
width:40px!important;	
}	
	
table.dataTable thead th.click, table.dataTable tbody td.click {	
max-width:150px!important;
min-width:100px!important;	
}
	
table.dataTable thead th.max, table.dataTable tbody td.max {	
width:auto!important;	
}	
	
	
table.dataTable tbody td {	
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 300px;	
}	
	
	
table.dataTable tbody th, table.dataTable tbody td.action span {	
margin:0 5px!important;	
}

table.dataTable tbody th, table.dataTable tbody td.action span i {	
font-size:18px!important;	
}	

table.dataTable tbody th, table.dataTable tbody td.action span.supprimer_tb i {	
color: #D85632!important;	
}	
	
table.dataTable tbody th, table.dataTable tbody td.action span:hover i {	
color: #0036FF!important;	
}	
	
.barre_recherche .icone {
    padding: 10px;
    background-color: #d8d9d9;
    border-radius: 50%;
}	
	
	
.ids_select  {
	pointer-events: none;
}	
	
.ids_select.actif {
	pointer-events: all;
	 cursor: pointer;
}
	
.rouge.ids_select.actif {
 background-color: red;	
}	

.bleu.ids_select.actif {
 background-color: #ff6c01;	
}	
	
.badge {
    background-color: transparent !important;
    border-color: #d8d9d9 !important;
    color: #d8d9d9 !important;
    border-radius: 7px;
    font-size: 14px;
    padding: 5px 10px;
    color: #fff;
    position: relative;
    border: 1px solid transparent;
}	
	
.badge-rouge {
    border-color: #D85632 !important;
    color: #D85632 !important;
}	
	
.badge-bleu {
    border-color: #005eef !important;
    color: #005eef !important;
}	
	
.badge-vert {
    border-color: #39B298 !important;
    color: #39B298 !important;
}	
	

/* --------------------- FICHE -------------------- */	
.fiche {
    width: calc(100% - 250px);
	height: calc(100% - 50px);
    position: fixed;
    background-color: rgba(0, 0, 0, 0.75);
    left: -100%;
    top: 0px;

}		
.fiche.visible {
    left: 250px;
	top:0px;
}		
.fiche section {
position: relative;	
}	
	
.fiche .form {
widows: 50%;
align-items: inherit;	
}	

.fiche section .contenu {	
max-height:100vh;	
overflow-y: auto;
position: relative;	
height: calc(100% - 0px);	
}	
	
.fiche .barre_bouton {
top:0;
}
		
.fiche .bottom_fixe {
bottom: 0px;
left: 250px;
width: calc(100% - 250px);
background-color: #eceded;
position: fixed;
z-index: 1;	
}
	
	
/* --------------------- POPUP -------------------- */	
.popup {
    width: 100%;
    position: fixed;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    left: -100%;
    top: 0px;
	display: flex;
	justify-content: space-around;
    align-items: center;
}	
.popup.visible {
    left: 0px;
}	
	
.popup .barre_bouton {
top:0;
left:0;
width:100%;	
}
	
.popup section {
position: relative;	
}	
	
.popup section .contenu {	
max-height: calc(100vh - 80px);
height: auto;		
overflow-y: auto;
position: relative;	
}
	
.bouton.fermer {	
position: absolute;
right:20px;	
}	
	
.popup .bouton {	
padding:12px;
}	
	
.bouton.rouge.fermer i {	
color: white;	
font-size: 18px;	
}	
	
.bouton.rouge.fermer:hover {	
background-color: black;	
}
	
.popup h2 {
text-align: center;
padding: 30px 0;
font-size: 22px;	
}	
	
span.etoile {
color:red;		
}	
	
/* --------------------- COLONNE -------------------- */	
.colonne {	
flex-direction: row-reverse;
align-items: normal;	
justify-content: flex-start;	
}	
	
.colonne section .contenu {
border-radius: 0;
width:400px;
max-height: max-content;
height: 100%;	
}	
	
.colonne.visible {
right: 0px;
}	
	
	
/* --------------------- FORM LABEL INPUT -------------------- */	
.ligne_form {
gap: 20px;	
margin-bottom: 20px;	
}	
.ligne_form .bloc_label {
flex:1;		
}	

.ligne_form .bloc_label label {
font-size: 14px;
line-height: 30px;	
}	
	
.ligne_form .bloc_label input, .ligne_form .bloc_label select, .ligne_form .bloc_label .selectize-input, .ligne_form .bloc_label textarea {
width:100%;	
}	
	
.input-container {
    display: flex;
    align-items: center;
}

.input-container .champ {
    flex: 1; /* Allow input to take available space */
    padding-right: 20px; /* Add space for the euro symbol */
}

.input-container .euro-symbol {
    position: absolute; /* Position it absolutely */
    right: 10px; /* Position it inside the input field */
    pointer-events: none; /* Make sure it doesn't block clicks */
    color: #000; /* Color of the euro symbol */
}

/* Ensure the container is positioned relatively to position the euro symbol correctly */
.input-container {
    position: relative;
}	
	
</style>	

	