@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css?family=Comfortaa&display=swap');
html { -ms-text-size-adjust: 100%;  -webkit-text-size-adjust: 100%;}
body { background-color:#e7ebed; margin:0; }
body, td, div, button {  font-family:Montserrat,Helvetica,Tahoma, Arial, Helvetica, sans-serif; font-size:12px;  color:#666; }
img { border:none;}
td { padding:5px 10px;}
.thadd td {background:#e5f7ff !important;}

#loader { visibility:hidden; width:100%; height:100%; position:fixed; z-index:9999;  top:0; left:0; cursor : wait; }
#loaderinner { position:fixed; width:100px; min-height:100px; top:50%; margin-top:-50px; left:50%; margin-left:-50px; }

a {color:#24a9e1;  text-decoration:none; }
a:hover { color:#145c7a; cursor:pointer;}

.align_vertical_middle_gap15 {display: flex; align-items: center;  gap: 15px;}
.align_vertical_middle_gap5 {display: flex; align-items: center;  gap: 5px;}

.black {color:#000;}
.blue {color:#24a9e1 !important;}
.grey {color:#999;}
.red {color:red;}
.purple {color:#9933ff !important;}

.blackbold {color:#000 !important; font-weight:600;}
.bluebold {color:#24a9e1 !important; font-weight:600;}
.greenbold {color:#a1d70e !important; font-weight:600;}
.pinkbold {color:#ff1d71 !important; font-weight:600;}
.emeraldbold {color:#17b19d !important; font-weight:600;}
.purplebold {color:#9933ff !important; font-weight:600;}
.orangebold {color:#ff7d26 !important; font-weight:600;}
.redbold {color:red !important; font-weight:600;}
.whitebold {color:#fff !important; font-weight:600;}
.yellowbold {color:yellow !important; font-weight:600;}
.majorationbold {color:#9900cc !important; font-weight:600;}
.remisebold {color:#99cc00 !important; font-weight:600;}

.bgbleuciel {background:#f0f7fa !important;}
.bgbleu {background:#24a9e1 !important;}
.nowrap {white-space:nowrap;}
.bgrouge {background:#ea4335 !important;}
.bgrouge:hover {background:#de2925 !important;}
.bgstock { background-image:URL(img/bg-stock.png); background-repeat: no-repeat; background-size:30px 25px; background-position:50% 70%; height:30px; }

.borderleft {border-left:1px solid #666;}

.invert {filter: invert(100%); }

h1 { color:#fff !important; font-size:20px; margin:8px 20px 0 20px !important; padding:0 !important; font-weight:normal; }
h2 { color:#000; font-size:16; font-weight:normal; margin:0; padding:3px 10px 3px 0; float:left; }
h3 { color:#24a9e1; font-size:16px; font-weight:normal; margin:0; padding:3px 10px 3px 0; float:left; }
/*h1 { color:#000; font-size:24px; margin:20px 0px; padding:0; font-weight:normal;}*/
/*h2 {  color:#000; font-size:20px; font-weight:normal; margin:5px; }*/
/*h3 { color:#24a9e1; font-size:16px; margin:5px 0 5px 0;font-weight:normal; }*/
h4 { color:#24a9e1; font-size:12px; margin:0; padding:0; font-weight:normal; line-height:16px;}
h5 {  color:#000; font-size:16px !important; font-weight:600 !important; margin:0; padding:0; line-height:16px; }

header {background: #3a3f44; width:100%; height:40px;color:#fff;}
header .left { float:left;}
header .right { float:right; margin-right:10px;}
header img { height:14px; padding:6px;}

main { padding:15px 10px 15px 10px; position:relative; display:block;  z-index: 1;  z-index: var(--layout-index-main); }

input, textarea, select, button {  padding:2px 3px;border:1px solid #ddd;  font-size:12px; border-radius:5px;font-family:Montserrat,Helvetica,Tahoma, Arial, Helvetica, sans-serif; }
button {padding:3px 10px;  font-size:12px; color:#fff; border-radius:5px;font-family:Montserrat,Helvetica,Tahoma, Arial, Helvetica, sans-serif;background-color:#24a9e1; cursor:pointer; border:none;}
button:hover {background:#0d4dac;}
input:focus, textarea:focus, select:focus, button:focus { outline:none;border-top-width:2px; border-top-color:#24a9e1;}
textarea {width:90%; min-height:100px;}
input.nbtxt[type=number] {  -moz-appearance: textfield; appearance: textfield;}

input.btn {background:#24a9e1; border:none; text-align:center;  color:#fff;  cursor:pointer; margin-top:10px; padding:5px 10px;}
input.btn:hover {background:#0d4dac; color:#fff;}

input.btnlight {background:#eaeef2;   border:none; text-align:center;  color:#666;  cursor:pointer; margin-top:10px; padding:5px 10px;}
input.btnlight:hover {background:#dadfe4;  border:none; color:#333; }

input.btnred {background:#ff0000;   border:none; text-align:center;  color:#fff;  cursor:pointer; margin-top:10px; padding:5px 10px;}
input.btnred:hover {background:#e21717;  border:none; color:#fff; }

input.readonly {background:transparent;   border:none;  color:#666; padding:2px 3px; font-size:12px;}

/* Firefox */
input.nombre[type=number] {
    -moz-appearance: textfield;
}
 
/* Chrome */
input.nombre::-webkit-inner-spin-button,
input.nombre::-webkit-outer-spin-button { 
	-webkit-appearance: none;
	margin:0;
}

#boite { display:none; width:100%; height:100%; position:fixed; z-index:100; background:rgba(0,0,0,.5); top:0; left:0}
#boitedialogue {display:none; position:fixed; z-index:200; box-shadow:0 10px 10px -10px rgba(0,0,0,.5); width:600px; min-height:450px; background:#fff; border-radius:10px; top:50%; left:50%; transform: translate(-50%, -50%);}
#boite_iframe {    padding: 10px;    width: fit-content;    min-width: 400px;	width:100%;    height: fit-content;    min-height: 400px;box-sizing: border-box;}
/*#boitedialogue .croix { filter: grayscale(1); -webkit-filter: grayscale(1); -moz-filter: grayscale(1); -o-filter: grayscale(1); -ms-filter: grayscale(1); cursor:pointer; width:20px; margin:10px;}*/
.croix { color:#666; cursor:pointer; font-size:20px; position:absolute; top:0; right:5px;}
.croix:hover { color:#999; }



.switch {   position: relative;  display: inline-block;}
.switch-input {  display: none;}
.switch-label {  display: block;  width: 24px;  height: 12px;  text-indent: -300%;  clip: rect(0 0 0 0);  color: transparent;  user-select: none;}
.switch-label::before, .switch-label::after {  content: "";  display: block;  position: absolute;  cursor: pointer;}
.switch-label::before {  width: 100%;  height: 100%;  background-color: #dedede;  border-radius: 9999em;  -webkit-transition: background-color 0.25s ease;  transition: background-color 0.25s ease;}
.switch-label::after {  top: 0;  left: 0;  width: 12px;  height: 12px;  border-radius: 50%;  background-color: #fff;  box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);  -webkit-transition: left 0.25s ease;  transition: left 0.25s ease;}
.switch-input:checked + .switch-label::before {  background-color: #24a9e1;}
.switch-input:checked + .switch-label::after {  left: 12px;}

.bggrisclair {background:#f5f5f5 !important;}

.fleche-droite {width:15px; height:9px; transform: rotate(270deg); margin: 0 0px 2px 0px !important; padding:0 !important; filter: invert(100%);}
.clear { float:clear;}
#clear {clear:both;}

.bouton {
	background-color:#24a9e1;
	font-size:12px;
	color:#fff;
	font-weight:normal;
	float:right;
	align-items:center;  border-radius:5px; padding:7px 14px !important;
	display:flex;
	text-decoration:none;
	cursor:pointer;
	margin-left:8px !important;
	min-height:16px;
	border:none !important;
	}
.boutonleft {
	background-color:#24a9e1;
	font-size:12px;
	color:#fff;
	font-weight:normal;
	float:left;
	align-items:center;  border-radius:5px; padding:7px 14px !important;
	display:flex;
	text-decoration:none;
	cursor:pointer;
	margin-left:0px !important;
	min-height:16px;
	border:none !important;
	}
.bouton:hover, .boutonleft:hover{background:#0d4dac;color:#fff !important;} 
/*2793c0*/
.bouton img, .boutonleft img {filter: invert(100%);  height:16px; max-width:16px; display:flex; border:none; margin-right:6px;}

#total {
	background-color:#fff;
	font-size:12px;
	color:#24a9e1;
	font-weight:normal;
	float:right;
	align-items:center;  border-radius:5px; padding:5px 12px !important;
	display:flex;
	text-decoration:none;
	margin-left:8px !important;
	min-height:16px;
	border:2px solid #24a9e1;
	}

#msgerror { margin:20px 0; border:1px solid #ccc; color:#F00; padding:10px; border-radius:5px; background:#fff; border-left-width:3px; border-left-color:#F00; display:none;}
#msg { margin:20px 0; border:1px solid #ccc; color:#6acc00; padding:10px; border-radius:5px; background:#fff; border-left-width:3px; border-left-color:#6acc00; display:none; }
.msg_alerte_jaune {box-sizing:border-box; background:#ffcc33; text-align:center; padding:6px 12px; border-radius:15px; color:#000; font-weight:bold;}
.msg_alerte_vert {box-sizing:border-box; background:#33ffcc; text-align:center; padding:6px 12px; border-radius:15px; color:#000; font-weight:bold;}

#login { position: absolute;   top: 50%; left: 50%; 
  transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */ width:300px; height:400px; background:#ffffff; border-radius:10px; box-shadow:0 0 20px #ccc; padding:20px;}
.logo-login {float:left; height:60px; margin:20px 0 40px 0; }
.logo-login img {height:60px;}
.texte-login {float:left; height:60px;  margin:20px 0px 40px 15px; font-family:'Comfortaa',Montserrat,Tahoma, Arial, sans-serif; font-size:24px;  line-height:30px;}
.texte-login-1 {color:#24a9e1;}
.texte-login-2 {color:#283890;}
#login div { margin-bottom:20px;}


.menu {  margin:0;  padding:0;  list-style:none;  background:#3a3f44; border:none;  }
.menu ul {  margin:0;  padding:0; height:40px;  background:#3a3f44; list-style:none;}
.menu li { float:left; padding:0 10px; color:#fff; margin:0 10px; text-align:center; line-height:40px;}
.menu li:hover {color:#24a9e1;}
.menu li a{  background:#3a3f44; display:block;  white-space:nowrap;  color:#fff;  text-decoration:none; line-height:40px; text-align:center; margin:0; padding:0 20px;}
.menu li ul { position:absolute;  z-index:1000;  display:none; height:auto; padding:0; margin:0; border:none;  background:#3a3f44;}
.menu li:hover ul{ display:block;}
.menu li li {background:#3a3f44; display:block; float:none; width:auto; padding:0; margin:0;}
.menu li:hover li a {background:none;}
.menu li ul a { display:block; line-height:30px; text-align:left; margin:0; padding:0 10px 0 10px;}
.menu li ul a:hover, .menu li ul li:hover a { text-decoration:none; background:#626d79;}

.alerte { display:none !important; background-image:URL(img/ico-alert-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%;width:20px; height:40px;}
.alerte:hover {display:block;}
.alerte ul {top:40px !important; background:transparent  !important;}
.alerte li {background-image:linear-gradient(#ffe42c, #ffa700)  !important; line-height:12px !important; border-radius:0 0 5px 5px; }
.alerte table { background-color:none;  width:100%;  border-spacing:0px;}
.alerte td { padding:3px 5px; font-size:10px; color:#000; }

.selectedfilter {background-image:linear-gradient(#ffe42c, #ffa700)  !important; border-radius:0 0 5px 5px; font-weight: bold; padding:5px; }

.icon-cell-active24 { width:24px; height:24px; padding:0px!important;  display:flex; text-decoration:none; 	cursor:pointer;	}
.icon-cell-active30 { width:30px; height:30px; padding:0px!important;  display:flex; text-decoration:none; 	cursor:pointer;	}

.icon { width:16px; height:16px;	 	float:right;  padding:4px!important; margin-left:6px; display:flex; 	text-decoration:none; cursor:pointer;	}
.icon-center { width:16px; height:16px;	align-self:center;	 padding:4px!important; margin-left:6px;  	text-decoration:none; cursor:pointer;	}
.icon-cell { width:16px; height:16px; padding:0px 1px!important;  text-decoration:none; 	}
.icon-cell-active { width:16px; height:16px; padding:0px!important;  display:flex; text-decoration:none; 	cursor:pointer;	}
.icon-nav { width:16px; height:16px; margin:6px 6px 0 0;  text-decoration:none; float:left; padding:0!important; 	}

.icon-home { background-image:URL(img/ico_tableau-bord.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; height:30px; }
.icon-home:hover { background-image:URL(img/ico_tableau-bord_on.png); }


.icon-look { background-image:URL(img/ico-look.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%;  }
.icon-look:hover { background-image:URL(img/ico-look-on.png); }

.icon-user { background-image:URL(img/ico_user.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; height:30px; }
.icon-user:hover { background-image:URL(img/ico_user_on.png); }

.icon-deco { background-image:URL(img/ico_deconnexion.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; height:30px; }
.icon-deco:hover { background-image:URL(img/ico_deconnexion_on.png); }

.icon-commande { background-image:URL(img/ico_commande.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; }
.icon-commande:hover { background-image:URL(img/ico_commande_on.png); }

.icon-add { background:no-repeat 50% 50% / 16px 16px URL(img/ico-add.png) !important;  }
/*.icon-add { background-image:URL(img/ico-add-on.png) !important; background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; filter:grayscale(100%); }*/
.icon-add:hover {background:no-repeat 50% 50% / 16px 16px URL(img/ico-add-on.png) !important;}

.icon-del { background-image:URL(img/ico-del-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; filter:grayscale(100%); }
.icon-del:hover { filter:grayscale(0%); }

.icon-del-0 { background-image:URL(img/ico-del-0-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; filter:grayscale(100%); }
.icon-del-0:hover { filter:grayscale(0%); }

.icon-edit { background-image:URL(img/ico-edit.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%;  }
.icon-edit:hover { background-image:URL(img/ico-edit-on.png); }

.icon-pdf { background-image:URL(img/ico-pdf-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%;  filter:grayscale(100%) brightness(0); }
.icon-pdf:hover { filter:grayscale(0%);  }

.icon-pdf-rouge { background-image:URL(img/ico-pdf-rouge.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%;   }

.icon-xls { background-image:URL(img/ico-xls-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%;  filter:grayscale(100%) brightness(0); }
.icon-xls:hover { filter:grayscale(0%);  }

.icon-mail { background-image:URL(img/ico-mail-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; filter:grayscale(100%) brightness(0); }
.icon-mail:hover { filter:grayscale(0%);  }

.icon-mail-rouge { background-image:URL(img/ico-mail-rouge.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%;  }

.icon-export { background-image:URL(img/ico-export-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; filter:grayscale(100%) brightness(0); }
.icon-export:hover { filter:grayscale(0%);  }

.icon-liste { background-image:URL(img/ico-liste-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; filter:grayscale(100%) brightness(0); }
.icon-liste:hover { filter:grayscale(0%);  }

.icon-copy { background-image:URL(img/ico-copy-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; filter:grayscale(100%) brightness(0); }
.icon-copy:hover { filter:grayscale(0%);  }

.icon-transfer { background-image:URL(img/ico-transfer-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; filter:grayscale(100%) brightness(0); }
.icon-transfer:hover { filter:grayscale(0%);  }

.icon-report { background-image:URL(img/ico-report-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; filter:grayscale(100%) brightness(0); }
.icon-report:hover { filter:grayscale(0%);  }

.icon-promo-add { background-image:URL(img/ico-promo-add-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; filter:grayscale(100%) brightness(0); }
.icon-promo-add:hover { filter:grayscale(0%);  }

.icon-history { background-image:URL(img/ico-history-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; filter:grayscale(100%) brightness(0); }
.icon-history:hover { filter:grayscale(0%);  }

.icon-active { background-image:URL(img/ico-active-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; filter:grayscale(100%) brightness(0); }
.icon-active:hover { filter:grayscale(0%);  }

.icon-shop { background:no-repeat 50% 50% / 16px 16px URL(img/ico-shop.png) !important;   }
.icon-shop:hover {background:no-repeat 50% 50% / 16px 16px URL(img/ico-shop-on.png) !important;  }

.icon-calendar { background-image:URL(img/ico-calendar-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%;  filter:grayscale(100%) brightness(0); }
.icon-calendar:hover { filter:grayscale(0%);  }

.icon-current { background-image:URL(img/ico-current-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%;  filter:grayscale(100%) brightness(0); }
.icon-current:hover { filter:grayscale(0%);  }

.icon-weight { background-image:URL(img/ico-weight-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%;  filter:grayscale(100%) brightness(0); }
.icon-weight:hover { filter:grayscale(0%);  }

.icon-precedent { background-image:URL(img/ico-precedent.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%;  filter: invert(100%) }
.icon-precedent:hover { filter: invert(0%)  }

.icon-prixdegressif { background-image:URL(img/ico-prixdegressif-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%;  filter: invert(100%) }
.icon-prixdegressif:hover { filter: invert(0%)  }

.icon-exclure { background-image:URL(img/ico-exclure.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%;  filter:grayscale(100%) brightness(0);  }
.icon-exclure:hover { filter:grayscale(0%);  }

.icon-pj { background-image:URL(img/ico-pj-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; filter:grayscale(100%); }
.icon-pj:hover { filter:grayscale(0%); }

.icon-transformation { background-image:URL(img/ico-transformation.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; filter:grayscale(100%) brightness(0); }
.icon-transformation:hover { filter:grayscale(0%); }

.icon-appel { background-image:URL(img/ico-appel.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; filter:grayscale(100%) brightness(0); }
.icon-appel:hover { filter:grayscale(0%); }

.icon-stock-fournisseur { background-image:URL(img/ico_stock_fournisseur_ok.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; filter:grayscale(100%) brightness(0); }
.icon-stock-fournisseur:hover { filter:grayscale(0%); }

.icon-comment { background-image:URL(img/ico-comment-on.png); background-repeat: no-repeat; background-size:16px 16px; background-position:50% 50%; filter:grayscale(100%) brightness(0); }
.icon-comment:hover { filter:grayscale(0%); }

.icon-gratuit { width:16px; height:16px;	 }

#boutons {float:right; }

#form { background-color:#fff; margin-bottom:20px; margin-top:20px !important;  position:relative;border-spacing:0px; border-radius:5px; }
#form td {color:#666; }
#form th { font-size:12px;  padding:5px 10px; text-transform: uppercase;  color:#000;  font-weight:normal; background-color:#a0dff9;}

#tablo{ background-color:none;  width:100%;  border-spacing:0px; float:left;}
#tablo td, #tablocompact td {border-bottom:1px solid #eee; color:#666;}
#tablo tr{ height:30px;}
#tablo th { font-size:10px;  padding:3px; text-transform: uppercase;  color:#000;  font-weight:bold; background-color:#a0dff9 !important; }
#tablo td { padding:3px;}

#tablocompact{ background-color:none;  width:100%;  border-spacing:0px; border-collapse: collapse;}
#tablocompact tr{ height:20px;}
#tablocompact th {  padding:3px 3px; font-weight:normal; color:#000;  font-size:9px; text-transform: uppercase; position: -webkit-sticky;   position: sticky;  top: 0; background:#a0dff9;}
#tablocompact input, #tablocompact select {  padding:2px 2px !important;border:1px solid #ddd;  font-size:10px !important; }
#tablocompact td {font-size:10px !important; padding:2px 3px;}

#tablo tr, #tablocompact tr  {background:#ffffff; }
#tablo tr:hover, #tablocompact tr:hover  {background:#f5f5f5; }
#tablo thead tr, #tablocompact thead tr, #form thead tr { background-color:#f5f5f5 !important; color:#000;}

#tablo th:first-child, #tablocompact th:first-child, #form th:first-child { border-radius: 5px 0 0 0 !important;}
#tablo th:last-child, #tablocompact th:last-child, #form th:last-child { border-radius: 0 5px 0 0 !important;}
#tablo th span, #tablocompact th span {cursor:pointer; font-size:14px; padding:0 0 0 2px; line-height:10px;}
#tablo th span:hover, #tablocompact th span:hover {color:#24a9e1;}
#tablo th filtre, #tablocompact th filtre {cursor:pointer; padding:0 0 0 2px;}
#tablo th filtre:hover, #tablocompact th filtre:hover {color:#24a9e1;}

.table_stat {border-spacing:0px;}
.table_stat td {padding:3px 10px 3px 0px !important;   line-height: 24px; position: relative; }

.draggable { cursor:move;}

.result_filtre { width:480px; height:300px; overflow:auto; border:1px solid #ddd; border-radius:5px; background-color:#FFF; position:absolute; top:25px; padding:5px 0; z-index:200;}
.result_filtre div {width:465px; padding:2px 4px; text-align:left; background-color:none; line-height:16px; }
.result_filtre div:hover, .result_focus {background-color:#f0f7fa;color: #24a9e1 !important; cursor:pointer;}

.filtre_stat {float:left; padding:3px 5px; border-radius:3px; background:#24a9e1; color:#fff; margin:5px 5px 5px 0;}
.croix_stat { color:#fff; cursor:pointer; font-size:11px; padding:0px 3px;  margin-left:5px; }


.resultats {clear:both; line-height:24px;  /*margin-top:10px;*/ min-height:20px;}
.pages {float:left; line-height:24px; margin-right:10px; }
.stockArticle {display:none; position:absolute; top: 29px; left: 0px; background:#fff; border-radius:5px; padding:10px; z-index:100; border:1px solid #999;box-shadow:0 1px 2px rgb(0 0 0 / 20%);}

#results div, #results2 div {width: 300px; padding: 2px 4px; text-align: left; border: 0; background-color: #FFF;}
#results div:hover, #results2 div:hover, .result_focus {background-color: #24a9e1 !important; cursor:pointer;}

#totalcmd {float:left; margin-right:15px;}
#totalcmd .gauche {background-color:#a0dff9;  color:#000; text-align:left; padding:11px 5px; margin:0; width:80px;float:left; font-size:10px;text-transform: uppercase; border-radius:5px 0 0 5px;}
#totalcmd .droite {background-color:#fff;  color:#000; text-align:right; padding:9px 5px; margin:0; width:60px;float:left;border-radius: 0 5px 5px 0;}
#totalcmd .port {background-color:#fff;  color:#000; text-align:right; padding:6px; margin:0; width:60px;float:left;border-radius: 0 5px 5px 0;}
#totalcmd .fraisport { padding:2px 0px; margin:0 10px 0 0; float:left;}

#navclient { width:100%;}
#navclient ul { margin: 0 30px 0 -50px}
#navclient li { display:inline-block;  cursor:pointer; font-size:12px;  list-style: none; margin-left:10px;   }
#navclient a { color:#000; text-decoration:none;    display:flex;  padding:0px;text-transform: uppercase; align-items: center; border-bottom:4px solid transparent;}
#navclient a:hover {  border-bottom:1px solid #24a9e1; }
#navclient a.current-nav { color:#24a9e1;}


.listacocher, .listecat {display:none; position:absolute; top: 29px; right: 0px; background:#fff; border-radius:5px; padding:10px; z-index:100; border:1px solid #999;box-shadow:0 1px 2px rgb(0 0 0 / 20%);  }
#listacocher {width:100%; height:auto; column-count: 5; list-style:none; margin:0;  padding:0;}
#listacocher2 {width:100%; height:auto; column-count: 2; list-style:none; margin:0;  padding:0;}
#listecat {width:100%; height:auto; /*column-count: 2;*/ list-style:none; margin:0;  padding:0;}
#listacocher li, #listacocher2 li { display:block;  list-style: none; margin-left:0px; align-items:center; font-size:12px; width:220px; text-align:left; }
#listecat li { display:block;  list-style: none; margin-left:0px; align-items:center; font-size:12px; width:600px; text-align:left; }
#listacocher input, #listacocher2 input {cursor:pointer;}

.menu-deroulant {position:relative; float:left;}
.menu-deroulant div{
    position: absolute;
    left: 0;
    top: 190%;
    width: 400px;
	padding:2px 0;
    text-align: left;
    background: #fff;
    transition: .5s;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.15);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
}
.menu-deroulant:hover div{
    top: 130%;
    visibility: visible;
    opacity: 1;
}


#element {border-radius:5px; border:1px solid #ddd; padding:5px; margin:10px; float:left; min-width:200px; background:#fff; position:relative;}
.consult { color:#000000;  font-size:14px; }
.ico { max-width:12px; padding:6px; }
.align-items { align-items:center; display:flex;}


#pagination {cursor:pointer; font-size:10px; float:left; color:#666; line-height:20px; text-align:center; border:1px solid #bbb; min-width:12px; padding:0 5px; margin:0px 5px 5px 0; box-shadow:0 1px 2px rgb(0 0 0 / 20%); background:-webkit-linear-gradient(top,#fff 0%, #efefef 100%)}
#paginationactive { cursor:default; font-size:10px; float:left; color:#fff; line-height:20px; text-align:center; border:1px solid #444; min-width:12px; padding:0 5px; margin:0px 5px 5px 0; box-shadow:0 1px 0 rgb(255 255 255), 0 0 2px rgb (0 0 0 / 30%) inset; background:#3a3f44;}

::-webkit-scrollbar {  width: 10px;  height:10px;}
::-webkit-scrollbar-track {  box-shadow: inset 0 0 5px #ccc;   border-radius: 5px; background:#f5f5f5;}
::-webkit-scrollbar-thumb {  background: #b3b3b3;   border-radius: 5px;}
::-webkit-scrollbar-thumb:hover {  background: #999; }

.custom-sq {  line-height: 24px !important; position: relative;}
.custom-sq input[type=checkbox] {  position: absolute;  top: -1px;}
.custom-sq label {   cursor: pointer;  position: absolute;  top: -3px !important;  left: 20px;  white-space: nowrap;}

.custom-sq2 {  line-height: 24px !important; position: relative; white-space: nowrap;}
.custom-sq2 input[type=checkbox] { float:left; margin-top:4px; }
.custom-sq2 label {   cursor: pointer; white-space: nowrap; font-size:11px;}

.custom-sq3 {  line-height: 20px !important; position: relative; white-space: nowrap;}
.custom-sq3 input[type=checkbox] { float:left; margin-top:4px; }
.custom-sq3 label {   cursor: pointer; white-space: nowrap; font-size:10px !important;}

.custom-rad {  line-height: 24px; position: relative;}
.custom-rad input[type=radio] {  position: absolute;  top: 2px;}
.custom-rad label {   cursor: pointer;  position: absolute;  top: 0px;  left: 20px;  white-space: nowrap;}

.custom-rad2 {  line-height: 20px; position: relative;}
.custom-rad2 input[type=radio] {  float:left;  }
.custom-rad2 label {   cursor: pointer;   white-space: nowrap;}

/* Figer les 2 premières colonnes d'un tableau */
.col_1 { position:sticky;left:0;} 
.col_2 {position:sticky;left:33px;} 
.fixed_header { z-index:50;}

/* 1 ligne sur 2 d'une couleur différente
.trligne tr:nth-child(even) td[scope=row] {background-color:#f2f2f2;}
.trligne tr:nth-child(odd) td[scope=row] {background-color:#ffffff;}
*/
.trligne tr:nth-child(even) td[scope=row] {background-color:#f2f2f2;}
.trligne tr:nth-child(odd) td[scope=row] {background-color:#ffffff;}

.liste_suggestions {list-style: none; padding: 0; margin: 0; border: 1px solid #ccc; position: absolute; background: white; z-index: 1000; border-radius:5px;}
.liste_suggestions li {padding: 8px; cursor: pointer;}
.liste_suggestions li:hover {background-color: #e9e9e9;}

/* TABLEAU DE BORD */

.grid-cards350 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}
.grid-cards350 div  {
  background: white;
  /*border-radius: 10px;*/
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

@keyframes disappear {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}