html { -ms-text-size-adjust: 100%;  -webkit-text-size-adjust: 100%;}
body { background-color:#f5f5f5; margin:0; }
body, td, div, button {  font-family:Montserrat,Helvetica,Tahoma, Arial, Helvetica, sans-serif; font-size:12px;  color:#999; }
img { border:none;}
td { padding:5px 10px;}
iframe { border: none; width:950px; height:450px;}

a {color:#00c2d4;  text-decoration:none;}
a:hover { color:#00daee;}

h1 { color:#000; font-size:24px; margin:10px 20px; padding:0; font-weight:normal;}
h2 {  color:#000; font-size:20px; font-weight:normal; margin:5px; }
h3 { color:#00c2d4; font-size:16px; margin:5px 0 5px 0;font-weight:normal; }

input, textarea, select {  padding:3px 5px;border:1px solid #ddd;  font-size:12px; border-radius:5px;font-family:Montserrat,Helvetica,Tahoma, Arial, Helvetica, sans-serif; margin:2px; }
input:focus, textarea:focus, select:focus { outline:none;border-top-width:2px; border-top-color:#00c2d4;}
textarea {width:90%; min-height:100px;}

input.btn {background:#00c2d4; border:1px solid #00c2d4; text-align:center;  color:#fff;  cursor:pointer; margin-top:10px;padding:5px 10px;}
input.btn:hover {background:#00daee;  color:#fff;}

.label {padding:1px 3px; border-radius:5px; margin:5px 0; /*cursor: move;*/  }
.label:hover {padding:1px 3px; border-radius:5px; margin:5px 0; background:#fafafa; color:#333;}

.clear {clear:both;}

.bggrisclair {background:#f5f5f5 !important;}

.fleche-droite {width:20px; transform: rotate(270deg); margin: 0 8px 2px 6px !important; padding:0 !important; }

.bouton {
	background-color:#00c2d4;
	font-size:11px;
	color:#fff;
	font-weight:normal;
	float:right;
	align-items:center;  border-radius:5px; padding:4px 10px !important;
	display:flex;
	text-decoration:none;
	cursor:pointer;
	margin-left:8px !important; border:1px solid #00c2d4;
	}
.bouton:hover{background-color:#00daee;color:#fff;} 
.bouton img {filter: invert(100%);  height:16px; max-width:16px; display:flex; border:none; margin-right:6px;}

.icon { width:16px; height:16px;	 	float:right;  padding:4px!important; margin-left:6px; 	display:flex; 	text-decoration:none; cursor:pointer;	}

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

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

.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); }

.ico { max-width:12px; padding:6px; }
.align-items { align-items:center; display:flex;}
.invert {filter: invert(100%);}



#boite { visibility:hidden; width:100%; height:100%; position:absolute; z-index:100; background:rgba(0,0,0,.5);}
#boitedialogue {visibility:hidden;position:absolute; z-index:200; box-shadow:0 10px 10px -10px rgba(0,0,0,.5); width:600px; min-height:400px; background:#f5f5f5; border-radius:10px; top:50%; margin-top:-200px; left:50%; margin-left:-300px;}
#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;}

#login { position: absolute;  top: 50%; left: 50%; transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */ width:300px; height:350px; background:#ffffff; border-radius:10px; box-shadow:0 0 20px #ccc; padding:20px; text-align:center;}
.logo-login {height:120px; max-width:250px; margin:20px auto 40px auto;}
#login div { margin-bottom:10px;}


#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; }
#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; }


header { background:#fff;  height:50px; box-shadow:0 -5px 20px #ccc; position:fixed; margin-left:200px; top:0; right:0; left:0; display:flex; z-index:100; transition: margin-left 0.5s;}
header .left { min-width:55px; flex-grow:1; display:flex;}
header .right {margin-left:auto; display:flex; font-size:14px;  color:#000; align-items:center; margin-right:10px;}
header img { height:14px; padding:6px; }
header a {  border-radius:50%; margin:0 4px; padding:5px; cursor:pointer;}
header a:hover { border-radius:50%; margin:0 4px; padding:5px; background-color: #f5f5f5;}


#nav { width:200px; position: fixed; top:0; left:0; bottom:0; background: #3a3f44; z-index:200;  display:flex; flex-direction: column;
-webkit-transition: all .5s ease-in;
			-moz-transition: all .5s ease-in;
			transition: all .5s ease-in;}
#nav img { height:16px; padding:6px 10px; }
#nav ul {flex-grow:1;}
#nav li { display: list-item;cursor:pointer; font-size:12px;  list-style: none; margin-left:-40px; }
#nav a { color:#fff; text-decoration:none; font-weight:normal; background-color: #3a3f44; height: 30px; display:flex;  padding:6px;text-transform: uppercase; align-items: center;}
#nav a:hover { color:#fff; background-color: #292d30; }
#nav a.current-nav {  background-color: #292d30; color:#00c2d4;}


/*
@media screen and (max-width: 39.9375em) {
  #nav {
    width: 200px;
    transform: translateX(-200px);
    transition: transform 0.2s;
  }
}*/

#logo {height:50px; box-shadow:0 10px 10px -10px rgba(0,0,0,.5); background:#00c2d4; display:flex; }
#logo img { height:30px!important; padding:10px 0 10px 12px !important;}

.navflex { flex-grow:1; display:flex; flex-direction: column; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; transition:scrollbar-color .2s;}
.navflex::-webkit-scrollbar { width: .4rem;}
.navflex:hover::-webkit-scrollbar-thumb { background-color: #00c2d4;}
.navflex::-webkit-scrollbar-track { background-color: hsla(0,0%,100%,.2);}
.navlabel {white-space: nowrap; transition: opacity 0.5s ease 0.2s; }

#nav {width:200px; transition: width 0.5s;}
#nav a.fermer {padding:15px 0 15px 4px; white-space:nowrap; text-transform:uppercase; align-items: center; display:flex; background:#33373c;}
#nav a.fermer img {filter: invert(100%);  width:20px !important; height:12px !important;  display:flex; transform: rotate(90deg); }
#nav a.ouvrir {padding:15px 0 15px 4px;display: none; background:#33373c; }
#nav a.ouvrir img {filter: invert(100%);  width:20px !important; height:12px !important;  display:flex; transform: rotate(270deg); }
#nav a.fermer:hover, #nav a.ouvrir:hover { cursor:pointer; background: #444c54;}

main { padding:80px 50px; position:relative; display:block; transition: margin-left 0.5s; margin-left:200px; min-height: calc(100vh - 50px); z-index: 1;  z-index: var(--layout-index-main);}

/* code pour la fermeture */
#nav_clos:target a.fermer {display: none;}
#nav_clos:target a.ouvrir {display: block;}
#nav:target .navlabel {opacity:1; }
#nav_clos:target #nav {width: 54px;}
#nav_clos:target main, #nav_clos:target header { margin-left:54px;}
#nav_clos:target .navlabel { opacity:0; }
#nav_clos:target form { opacity:0; }

/*
@media screen and (min-width: 40em) {
  .aflex {
    overflow: hidden;
    opacity: 0;
  }
}
*/

#boutons {float:right;}

#form { background-color:#FFFFFF;  border-radius:10px;  padding-bottom:0; margin-bottom:20px; border-collapse:0; border-spacing:0px; }
#form td {color:#999;}

#tablo { background-color:#FFFFFF; border-radius:10px;  width:100%; padding-bottom:20px; margin-bottom:20px; margin-top:20px !important; border-collapse:0; border-spacing:0px; float:left;}
#tablocompact { background-color:#FFFFFF; width:100%; border-collapse:0; border-spacing:0px; float:left; margin-bottom:20px;}
#tablo td, #tablocompact td {border-bottom:1px solid #eee; color:#999;}
#tablo tr, #form tr { height:30px;}
#formcompact tr { height:20px !important;}
#formcompact td { padding:0px !important;}
#form th { padding:10px; font-weight:normal; text-transform: uppercase;  color:#FFF;  font-size:16px; }
#tablo th, #formcompact th{ border-bottom:1px solid #666; padding:10px; font-weight:normal; text-transform: uppercase;  color:#000;  font-size:13px !important;  }
#tablocompact th { border-bottom:1px solid #666; padding:3px; font-weight:normal; text-transform: uppercase;  color:#000;  font-size:13px !important;  }
#tablocompact td {padding:3px !important;}
#tablo tr:hover, #tablocompact tr:hover  {background:#fafafa; }
#tablo tr.head, #tablocompact tr.head {background:none;}

.degrade {background:linear-gradient(45deg, #a1aeaf, #cdd9da	);border-radius:10px 10px 0 0;}

.element {border-radius:5px; border:1px solid #ddd; padding:5px; margin:10px 10px 10px 0; float:left; min-width:200px; background:#fff;}
.ticket { border-radius:10px; padding:5px; margin:10px 0; float:left; width:100%; background-color:#fff; line-height:2; margin-bottom:30px;}
.ticket div {margin-right:50px; float:left;}
.ticket .description {margin:0 !important; display:block; width:100%; }
.consult { color:#000000;  font-size:14px; }
.noir { color:#000000;}


.draggable { cursor:move;}
#drop_zone {
  border: 5px solid blue;
  width:  200px;
  height: 100px;
}

/********************TRI TABLEAU*******************************/
/* Classe obligatoire pour les flèches */
.flecheDesc {
  width: 0; 
  height: 0; 
  float:right;
  margin: 10px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}
.flecheAsc {
  width: 0; 
  height: 0;
  float:right;
  margin: 10px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black;
}

/* Classe optionnelle pour le style */
.tableau {width:100%;table-layout: fixed;border-collapse: collapse;}
/*.tableau td {padding:.3rem}*/
.zebre tbody tr:nth-child(odd) {background-color: #d6d3ce;border-bottom:1px solid #ccc;color:#444;}
.zebre tbody tr:nth-child(even) {background-color: #c6c3bd;border-bottom:1px solid #ccc;color:#444;}
.zebre tbody tr:hover:nth-child(odd) {background-color: #999690;color:#008fb3;}
.zebre tbody tr:hover:nth-child(even) {background-color: #999690;color:#008fb3;}
.avectri th {text-align:center;padding:5px 0 0 5px;vertical-align: middle;background-color:#999690;color:#444;cursor:pointer;
	-webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.avectri th.selection {background-color:#5d625c;color:#008fb3;}
.avectri th.selection .flecheDesc {border-bottom-color: #008fb3;}
.avectri th.selection .flecheAsc {border-top-color: #008fb3;}
.zebre tbody td:nth-child(3) {text-align:center;}