.nav-side-menu {
    overflow: auto;
    font-family: verdana;
    font-size: 12px;
    font-weight: 200;
    background-color: #2e353d;
    position: fixed;
    top: 0px;
    width: 200px;
    height: 100%;
    color: #e1ffff;
}
.nav-side-menu .brand {
    background-color: #23282e;
    line-height: 50px;
    display: block;
    text-align: center;
    font-size: 14px;
}
.nav-side-menu .toggle-btn {
    display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
    list-style: none;
    padding: 0px;
    margin: 0px;
    line-height: 35px;
    cursor: pointer;
    /*
      .collapsed{
         .arrow:before{
                   font-family: FontAwesome;
                   content: "\f053";
                   display: inline-block;
                   padding-left:10px;
                   padding-right: 10px;
                   vertical-align: middle;
                   float:right;
              }
       }
  */
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
    font-family: FontAwesome;
    content: "\f078";
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    vertical-align: middle;
    float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
    border-left: 3px solid #d19b3d;
    background-color: #4f5b69;
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
    color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
    color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
    background-color: #181c20;
    border: none;
    line-height: 28px;
    border-bottom: 1px solid #23282e;
    margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
    background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
    font-family: FontAwesome;
    content: "\f105";
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    vertical-align: middle;
}
.nav-side-menu li {
    padding-left: 0px;
    border-left: 3px solid #2e353d;
    border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
    text-decoration: none;
    color: #e1ffff;
}
.nav-side-menu li a i {
    padding-left: 10px;
    width: 20px;
    padding-right: 20px;
}
.nav-side-menu li:hover {
    border-left: 3px solid #d19b3d;
    background-color: #4f5b69;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
@media (max-width: 767px) {
    .nav-side-menu {
        position: relative;
        width: 100%;
        margin-bottom: 10px;
    }
    .nav-side-menu .toggle-btn {
        display: block;
        cursor: pointer;
        position: absolute;
        right: 10px;
        top: 10px;
        z-index: 10 !important;
        padding: 3px;
     
          background-color: #ffffff;
        color: #000;
        width: 40px;
        text-align: center;
    }
    .brand {
        text-align: left !important;
        font-size: 22px;
        padding-left: 20px;
        line-height: 50px !important;
    }
}
@media (min-width: 767px) {
    .nav-side-menu .menu-list .menu-content {
        display: block;
    }

}
body {
    margin: 0px;
    padding: 0px;
}
.bleu{
    color: #3a62ff;
}


.entetetab{
    position: sticky;
    top: 0;
    font-weight:normal;   text-align: center;
}

.entetetabtck{
    position: sticky;
    top: 0;
    font-weight:normal;   text-align: center;
}


#tabstock td{
    padding: 0px;
}


/**************************************Calendrier*******************.categories{  margin-top:12px;}********/
.year{  color:#529101;  font-size:25px;}
.relative{  position:relative;}
.months {}
.month{  margin-top:12px;}
.months ul{  list-style:none;  margin:0px;  padding:0px;}
.months ul li a{  float:left;  margin:-1px;  padding:0px 15px 0px 0px;  color:#888888;  text-decoration:none;  font-size:12px;  font-weight:bold;  text-transform:uppercase;}
.months ul li a:hover, .months ul li a.active{  color:#529101;}

.annees{}
.annee{  margin-top:12px;}
.annees ul{  list-style:none;  margin:0px;  padding:0px;}
.annees ul li a{  float:left;  margin:-1px;  padding:0px 15px 0px 0px;  color:#888888;  text-decoration:none;  font-size:12px;  font-weight:bold;  text-transform:uppercase;}
.annees ul li a:hover, .annees ul li a.active{  color:#BF006C;}

#calendrier {  border-collapse:collapse;}
#calendrier td {  border:1px solid #A3A3A3;  width:40px;  height:40px;}
#calendrier td.today{  border:2px solid #529101;  width:40px;  height:40px;}
#calendrier td.padding{  border:none;}
#calendrier td:hover {  background:#DFDFDF;  cursor:pointer;}
#calendrier th{  font-weight:normal;  color:#A8A8A8;}
#calendrier td .day {  position:absolute;  color:#8C8C8C;text-decoration:none;  bottom:-20px;  right:5px;  font-weight:bold;  font-size:8pt;} /*date de jour*/




#calendrier td .events{  position:relative;  width:39px;  height:0px;  margin:-19px 0px 0px;  padding:0px;}
#calendrier td .events li{  width:5px;  height:5px;  float:left;  background: #9dce2c;  /* couleur du point +border-radius:10px;*/   border-radius:5px 5px 5px 5px;  margin-left:3px;  overflow:hidden;  text-indent:-1500px;}
#calendrier td .events .rouge {  width:5px;  height:5px;  float:left;  background:red;  /* couleur du point +border-radius:10px;*/   border-radius:5px 5px 5px 5px;  margin-left:3px;  overflow:hidden;  text-indent:-1500px;}
#calendrier td .events .orange {  width:5px;  height:5px;  float:left;  background: #ff8c11;  /* couleur du point +border-radius:10px;*/   border-radius:5px 5px 5px 5px;  margin-left:3px;  overflow:hidden;  text-indent:-1500px;}
#calendrier td .events .cloture {  width:5px;  height:5px;  float:left;  background:black;  /* couleur du point +border-radius:10px;*/   border-radius:5px 5px 5px 5px;  margin-left:3px;  overflow:hidden;  text-indent:-1500px;}







/*nom de l'évènement*/

#calendrier td:hover .events{  position:absolute;  left:330px;  top:10px;  width:800px;  list-style:none;  margin:0px;  padding:11px 0px 0px;}
#calendrier td:hover .events li{  height:20px;  line-height:20px;  font-weight:bold;font-size:8pt;  border-bottom:1px solid #D6D6D6;  padding-left:21px;  text-indent:0;  background:none;  width:600px;}
#calendrier td:hover .events li :first-child{  border-top:1px solid #D6D6D6;}

/*nom de l'évènement sur clic
table td:active .events{  position:absolute;  left:330px;  top:66px;  width:600px;  list-style:none;  margin:0px;  padding:11px 0px 0px;}
table td:active  .events li{  height:20px;  line-height:20px;  font-weight:bold;font-size:8pt;  border-bottom:1px solid #D6D6D6;  padding-left:21px;  text-indent:0;  background:none;  width:600px;}
table td:active  .events li :first-child{  border-top:1px solid #D6D6D6;}*/



/*date de jour ligne de droite*/
#calendrier td .daytitle{  display:none;}
#calendrier td:hover .daytitle{  position:absolute;  left:330px;  top:0px;  width:800px;  list-style:none;  margin:0px 0px 0px 0px;  padding:0px;  color: #529101;  font-size:20px;  display:block;  font-weight:bold;}
.clear{  clear:both;}


a.hyp
{
    float: left;
    height: auto;
    padding: 0 25px;
    color: #ff8c11;
    text-transform: uppercase;
    font: bold 14px/25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 0 1px 0 #000;
}
a.veh
{

    color: #000000;

    font: bold 14px/25px Arial, Helvetica;
    text-decoration: none;

}

.cardmobil{
    background: #fff;
    border-radius: 2px;
    display: inline-block;
    float: left;
    height: auto;
    width:auto;
    position: relative;

    padding:10px;
    margin: 30px auto;
}

#gris{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3000px;
    background-color: #000;
    display: none;
    z-index: 10000;
}

#dupl{
    display: none; /*--masqué par défaut--*/
    height: auto;
    width: 350px;
    background: #fff;
    padding: 20px;
    border: 10px solid #ddd;
    float: left;
    font-size: 1.2em;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    z-index: 20000;
    /*--Les différentes définitions de Box Shadow en CSS3--*/
    -webkit-box-shadow: 0px 0px 20px #000;
    /*---moz-box-shadow: 0px 0px 20px #000;--*/
    box-shadow: 0px 0px 20px #000;
    /*--Coins arrondis en CSS3--*/
    -webkit-border-radius: 10px;
    /*----moz-border-radius: 10px;--*/
    border-radius: 10px;
}
#impreception{
    display: none; /*--masqué par défaut--*/
    height: auto;
    width: 400px;
    background: #fff;
    padding: 20px;
    border: 10px solid #ddd;
    float: left;
    font-size: 1.2em;
    position: absolute;
    top: 50%;
    left: 30%;
    margin-top: -50px;
    margin-left: -50px;
    z-index: 20000;
    /*--Les différentes définitions de Box Shadow en CSS3--*/
    -webkit-box-shadow: 0px 0px 20px #000;
    /*---moz-box-shadow: 0px 0px 20px #000;--*/
    box-shadow: 0px 0px 20px #000;
    /*--Coins arrondis en CSS3--*/
    -webkit-border-radius: 10px;
    /*----moz-border-radius: 10px;--*/
    border-radius: 10px;
}

#assistant{
    display: none; /*--masqué par défaut--*/
    height: auto;
    width: auto;
    background: #fff;
    padding: 20px;
    border: 10px solid #ddd;
    float: left;
    font-size: 0.8em;
    position: absolute;
    top: 20%;
    left: 20%;
    margin-top: -50px;
    margin-left: -50px;
    z-index: 20000;
    /*--Les différentes définitions de Box Shadow en CSS3--*/
    -webkit-box-shadow: 0px 0px 20px #000;
    /*---moz-box-shadow: 0px 0px 20px #000;--*/
    box-shadow: 0px 0px 20px #000;
    /*--Coins arrondis en CSS3--*/
    -webkit-border-radius: 10px;
    /*----moz-border-radius: 10px;--*/
    border-radius: 10px;
}

#choixmvt{
    display: none; /*--masqué par défaut--*/
    height: 300px;
    width: 600px;
    background: #fff;
    padding: 20px;
    border: 10px solid #ddd;
    float: left;
    font-size: 1.2em;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    z-index: 20000;
    /*--Les différentes définitions de Box Shadow en CSS3--*/
    -webkit-box-shadow: 0px 0px 20px #000;
    /*---moz-box-shadow: 0px 0px 20px #000;--*/
    box-shadow: 0px 0px 20px #000;
    /*--Coins arrondis en CSS3--*/
    -webkit-border-radius: 10px;
    /*----moz-border-radius: 10px;--*/
    border-radius: 10px;
}

#modifencaissement{
    display: none; /*--masqué par défaut--*/
    height: auto;
    width: auto;
    background: #fff;
    padding: 20px;
    border: 10px solid #ddd;
    float: left;
    font-size: 1.2em;
    position: absolute;
    top: 20%;
    left: 30%;
    margin-top: -50px;
    margin-left: -50px;
    z-index: 20000;
    /*--Les différentes définitions de Box Shadow en CSS3--*/
    -webkit-box-shadow: 0px 0px 20px #000;
    /*---moz-box-shadow: 0px 0px 20px #000;--*/
    box-shadow: 0px 0px 20px #000;
    /*--Coins arrondis en CSS3--*/
    -webkit-border-radius: 10px;
    /*----moz-border-radius: 10px;--*/
    border-radius: 10px;
}

#impdevis{
    display: none; /*--masqué par défaut--*/
    height: 200px;
    width: 400px;
    background: #fff;
    padding: 20px;
    border: 10px solid #ddd;
    float: left;
    font-size: 1.2em;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    z-index: 20000;
    /*--Les différentes définitions de Box Shadow en CSS3--*/
    -webkit-box-shadow: 0px 0px 20px #000;
    /*---moz-box-shadow: 0px 0px 20px #000;--*/
    box-shadow: 0px 0px 20px #000;
    /*--Coins arrondis en CSS3--*/
    -webkit-border-radius: 10px;
    /*----moz-border-radius: 10px;--*/
    border-radius: 10px;
}

#NewCombinaison{
    display: none; /*--masqué par défaut--*/
    height: 1100px;
    width: 1000px;
    background: #fff;
    padding: 20px;
    border: 10px solid #ddd;
    float: left;
    font-size: 1.2em;
    position: absolute;
    top: 3%; left: 10%;
    z-index: 20000;
    /*--Les différentes définitions de Box Shadow en CSS3--*/
    -webkit-box-shadow: 0px 0px 20px #000;
    /*---moz-box-shadow: 0px 0px 20px #000;--*/
    box-shadow: 0px 0px 20px #000;
    /*--Coins arrondis en CSS3--*/
    -webkit-border-radius: 10px;
    /*----moz-border-radius: 10px;--*/
    border-radius: 10px;
}

#gamme{
    display: none; /*--masqué par défaut--*/
    height: 600px;
    width: 800px;
    background: #fff;
    padding: 20px;
    border: 10px solid #ddd;
    float: left;
    font-size: 1.2em;
    position: absolute;
    top: 3%; left: 10%;
    z-index: 20000;
    /*--Les différentes définitions de Box Shadow en CSS3--*/
    -webkit-box-shadow: 0px 0px 20px #000;
    /*---moz-box-shadow: 0px 0px 20px #000;--*/
    box-shadow: 0px 0px 20px #000;
    /*--Coins arrondis en CSS3--*/
    -webkit-border-radius: 10px;
    /*----moz-border-radius: 10px;--*/
    border-radius: 10px;
}

#message{
    display: none; /*--masqué par défaut--*/
    height: auto;
    min-width: 500px;
    width: auto;
    background: #fff;
    padding: 20px;
    border: 10px solid #ddd;
    float: left;
    font-size: 1.2em;
    position: absolute;
    top: 40%; left: 10%;
    z-index: 20000;
    /*--Les différentes définitions de Box Shadow en CSS3--*/
    -webkit-box-shadow: 0px 0px 20px #000;
    /*---moz-box-shadow: 0px 0px 20px #000;--*/
    box-shadow: 0px 0px 20px #000;
    /*--Coins arrondis en CSS3--*/
    -webkit-border-radius: 10px;
    /*----moz-border-radius: 10px;--*/
    border-radius: 10px;
}
#messagecaisse{
    display: none; /*--masqué par défaut--*/
    height: auto;
    min-width: 500px;
    width: auto;
    background: #fff;
    padding: 20px;
    border: 10px solid #ddd;
    float: left;
    font-size: 1.0em;
    position: absolute;
    top: 20%; left: 10%;
    z-index: 20000;
    /*--Les différentes définitions de Box Shadow en CSS3--*/
    -webkit-box-shadow: 0px 0px 20px #000;
    /*---moz-box-shadow: 0px 0px 20px #000;--*/
    box-shadow: 0px 0px 20px #000;
    /*--Coins arrondis en CSS3--*/
    -webkit-border-radius: 10px;
    /*----moz-border-radius: 10px;--*/
    border-radius: 10px;
}

#messduplique{
    display: none; /*--masqué par défaut--*/
    height: auto;
    width: 500px;
    background: #fff;
    padding: 20px;
    border: 10px solid #ddd;
    float: left;
    font-size: 1.2em;
    position: absolute;
    top: 40%; left: 10%;
    z-index: 20000;
    /*--Les différentes définitions de Box Shadow en CSS3--*/
    -webkit-box-shadow: 0px 0px 20px #000;
    /*---moz-box-shadow: 0px 0px 20px #000;--*/
    box-shadow: 0px 0px 20px #000;
    /*--Coins arrondis en CSS3--*/
    -webkit-border-radius: 10px;
    /*----moz-border-radius: 10px;--*/
    border-radius: 10px;
}

#ficheproduit{
    display: none; /*--masqué par défaut--*/
    /*-- height: 1150px;--*/
    /*-- width: 1600px;--*/
     height: auto;
     width: auto;

     background: #fff;
     padding: 10px;
     border: 10px solid #ddd;
     float: left;
     font-size: 1.2em;
     position: absolute;
     top: 3%; left: 10%;
     z-index: 20000;
     /*--Les différentes définitions de Box Shadow en CSS3--*/
    -webkit-box-shadow: 0px 0px 20px #000;
    /*---moz-box-shadow: 0px 0px 20px #000;--*/
    box-shadow: 0px 0px 20px #000;
    /*--Coins arrondis en CSS3--*/
    -webkit-border-radius: 10px;
    /*----moz-border-radius: 10px;--*/
    border-radius: 10px;
}

#ttrb  /* couleur des h3 et des textes importants  */
{
    color : #04acec;
    font-size:12px;
    text-decoration: none;
}

#etatstk{
    display: none; /*--masqué par défaut  900px--*/
    height: auto;
    width: 800px;
    background: #fff;
    padding: 20px;
    border: 10px solid #ddd;
    float: left;
    font-size: 1.2em;
    position: absolute;
    top: 3%; left: 10%;
    z-index: 20000;
    /*--Les différentes définitions de Box Shadow en CSS3--*/
    -webkit-box-shadow: 0px 0px 20px #000;
    /*---moz-box-shadow: 0px 0px 20px #000;--*/
    box-shadow: 0px 0px 20px #000;
    /*--Coins arrondis en CSS3--*/
    -webkit-border-radius: 10px;
    /*----moz-border-radius: 10px;--*/
    border-radius: 10px;
}
#situation{
    display: none; /*--masqué par défaut  900px--*/
    height: auto;
    width: 800px;
    background: #fff;
    padding: 20px;
    border: 10px solid #ddd;
    float: left;
    font-size: 1.2em;
    position: absolute;
    top: 3%; left: 10%;
    z-index: 20000;
    /*--Les différentes définitions de Box Shadow en CSS3--*/
    -webkit-box-shadow: 0px 0px 20px #000;
    /*---moz-box-shadow: 0px 0px 20px #000;--*/
    box-shadow: 0px 0px 20px #000;
    /*--Coins arrondis en CSS3--*/
    -webkit-border-radius: 10px;
    /*----moz-border-radius: 10px;--*/
    border-radius: 10px;
}
#NewCombinaisonplg{
    display: none; /*--masqué par défaut--*/
    height: 1100px;
    width: 1000px;
    background: #fff;
    padding: 20px;
    border: 10px solid #ddd;
    float: left;
    font-size: 1.2em;
    position: absolute;
    top: 3%; left: 10%;
    z-index: 20000;
    /*--Les différentes définitions de Box Shadow en CSS3--*/
    -webkit-box-shadow: 0px 0px 20px #000;
    /*---moz-box-shadow: 0px 0px 20px #000;--*/
    box-shadow: 0px 0px 20px #000;
    /*--Coins arrondis en CSS3--*/
    -webkit-border-radius: 10px;
    /*----moz-border-radius: 10px;--*/
    border-radius: 10px;
}
#listecombinaison{
    height: 900px;
    width: 950px;
    overflow:auto;
}

.spapiece{
    float:right;
    color: #3a62ff;
}

#fermercombinaison{
    float:right;
}
#Validercombinaison{
    float:right;
}
.imageidentite {
    width:60px;
    clip-path:ellipse(50% 50%);
 }

 
.pavecommande{
	position: relative;
 	top: 0px;
    left: 0%;
    border-collapse: separate;
}
.pavecommande td
{
	text-align:center;
    padding: 10px;
    width: 100px;

    min-width: 80px;
    height:40px;
    /*max-height:60px;*/
    font-size:10px;
    cursor:pointer ;
    /*font-family: comic Sans MS,Verdana,Arial,Times,sans-serif;*/
    font-family:Arial;
    /*color:#FFFFFF;*/
    word-wrap: break-word;
    
	padding-top: 2px;
	padding-right: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
	
	border-collapse: separate;
}
/**************pavetouche*******************/

.pavetouche{
	position: relative;
  min-width: 100px;
 /*	top: 35px;*/
    left: 0%;
    border-collapse: separate;
}

/* Pour l'espacement des cases du tableau */
.pavetouche table {
	border-spacing: 30px 14px;
}

/*Forme de toutes les touches, curseur, polices et couleurs des touches normales*/
.pavetouche td
{
	text-align:center;
    padding: 10px;
    width: 100px;

    min-width: 80px;
    height:40px;
    /*max-height:60px;*/
    font-size:10px;
    cursor:pointer ;
    /*font-family: comic Sans MS,Verdana,Arial,Times,sans-serif;*/
    font-family:Arial;
    /*color:#FFFFFF;*/
    word-wrap: break-word;
    
	/*! -webkit-border-radius: 8px; */
	/*! -moz-border-radius: 8px; */
	/*! border-radius: 8px; */
 	
	/*background-image: linear-gradient(bottom, rgb(61,61,61) 26%, rgb(133,133,133) 63%, rgb(143,143,143) 82%);
	background-image: -o-linear-gradient(bottom, rgb(61,61,61) 26%, rgb(133,133,133) 63%, rgb(143,143,143) 82%);
	background-image: -moz-linear-gradient(bottom, rgb(61,61,61) 26%, rgb(133,133,133) 63%, rgb(143,143,143) 82%);
	background-image: -webkit-linear-gradient(bottom, rgb(61,61,61) 26%, rgb(133,133,133) 63%, rgb(143,143,143) 82%);
	 
	background-color: rgb(143,143,143);*/
 	
 	
 	
	/*! padding-top: 20px; */
	padding-top: 2px;
	padding-right: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
	/*! border-block: 2px; */
	border-collapse: separate;
}

/**************pavetouche*******************/
 /************************************** CLAVIER a remettre ***************************/
 #clavier{
	position: relative;
 	/*top: 40px;*/
    left: 0%;
    border-collapse: separate;
}


/* Pour l'espacement des cases du tableau */
#clavier table {
	border-spacing: 30px 14px;
}

/*Forme de toutes les touches, curseur, polices et couleurs des touches normales*/
#clavier td
{
	text-align:center;
    padding: 20px;
    width: 100px;
    min-width: 60px;
    max-width: 100px;
    height:50px;
    /*max-height:60px;*/
    font-size:20px;
    cursor:pointer ;
    font-family: Arial;
    color:#FFFFFF;
    word-wrap: break-word;
 	
    background-color: #716c6c;
    border: 3px solid #625e5e;
 	
 	
	/*! padding-top: 20px; */
	padding-top: 2px;
	padding-right: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
	/*! border-block: 2px; */
	border-collapse: separate;
}

/*Touche annuler du clavier*/
#clavier #annul{

    background-color: #b80b0b;
    border: 3px solid #625e5e;

}


/*Touche corriger du clavier*/
#clavier #corr{
	

    background-color: #e6d40e;
    border: 3px solid #625e5e;
}


/*Touche valider du clavier*/
#clavier #val{
	
    background-color: #0fa314;
    border: 3px solid #625e5e;
}

/*Touche menu du clavier*/
#clavier #btn_menu{	
    background-color: #8a2481;
    border: 3px solid #625e5e;
}
.go{
	background-color:transparent;
	border:none;
	font-size:18px;
    cursor:pointer ;
    font-family: comic Sans MS,Verdana,Arial,Times,sans-serif;
    color:#FFFFFF;
     height: 50px;
    width: 60px;
	
}
/************************************** CLAVIER ***************************/
/************************************** CLAVIER_modif ***************************/
.radiotactile{
    -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  border-radius: 50%;
  width: 36px;
  height: 36px;

  border: 2px solid #a39e9e;
  transition: 0.2s all linear;
  margin-right: 5px;

  position: relative;
  top: 4px;
}
.radiotactile:checked{
    background-color: #8a2481;
    border: 6px solid #8a2481;
  outline: unset !important /* I added this one for Edge (chromium) support */
}


#clavierart{
	position: relative;
 	/*top: 40px;*/
    left: 20%;
    border-collapse: separate;
}

/* Pour l'espacement des cases du tableau */
#clavierart table {
	border-spacing: 30px 14px;
}

/*Forme de toutes les touches, curseur, polices et couleurs des touches normales*/
#clavierart td
{
	text-align:center;
    padding: 20px;
    width: 100px;
    min-width: 60px;
    max-width: 100px;
    height:60px;
    /*max-height:60px;*/
    font-size:20px;
    cursor:pointer ;
    font-family: Arial;
    color:#FFFFFF;
    word-wrap: break-word;
 	
    background-color: #716c6c;
    border: 3px solid #625e5e;
 	
 	
	/*! padding-top: 20px; */
	padding-top: 2px;
	padding-right: 2px;
	padding-bottom: 2px;
	padding-left: 2px;
	/*! border-block: 2px; */
	border-collapse: separate;
}

/*Touche annuler du clavier*/
#clavierart #annul{

    background-color: #b80b0b;
    border: 3px solid #625e5e;

}


/*Touche corriger du clavier*/
#clavierart #corr{
	

    background-color: #e6d40e;
    border: 3px solid #625e5e;
}


/*Touche valider du clavier*/
#clavierart #val{
	
    background-color: #0fa314;
    border: 3px solid #625e5e;
}

/*Touche menu du clavier*/
#clavierart #btn_menu{	
    background-color: #8a2481;
    border: 3px solid #625e5e;
}
/************************************** CLAVIER_modif ***************************/

.entetetab{
    position: sticky;
    top: 0;
    font-weight:normal;   text-align: center;
    background: #fff;
}
#volet:target a.ouvrir {
	display: none;
}
#volet:target a.fermer {
	display: block;
}


#volet {
	 width: 450px;
    height: 450px;
	padding: 10px;
	background: #f2b707; color: #fff;	

    position: fixed;
   /* left: 0;*/
    top: 30%;

	left: -470px; 
  
    -webkit-transition: all .5s ease-in;
	transition: all .5s ease-in;
    z-index: 20;
    bottom: 0;

}

#volet:target {
	left: 0;
}

#volet_clos:target #volet {
	/* retourne à ta place */
    left: -470px;
    height: 50px;
}
#volet_clos {
	
    height: 10px;
}

#volet a.ouvrir,#volet a.fermer {
	padding: 10px 15px;
	background: #555;
	color: #fff;
	text-decoration: none;

    position: absolute;
	right: -85px;
	top: 150px;

	/* quelques styles CSS3 */
	-ms-transform: rotate(270deg);
	-moz-transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	transform: rotate(270deg);

	border-radius: 0 0 8px 8px;
}
 
#volet a.fermer {
	display: none;
}

/*affichage de caisse */



#tabtck th{
    padding: 0px;
}
#tabtck td{
    padding-top:0px;
    padding-bottom: 0px;
}

#tab_decompte th{
    padding: 0px;
}
#tab_decompte td{
    padding-top:0px;
    padding-bottom: 0px;
}

#tab_cb th{
    padding: 0px;
}
#tab_cb td{
    padding-top:0px;
    padding-bottom: 0px;
}
#tab_ch th{
    padding: 0px;
}
#tab_ch td{
    padding-top:0px;
    padding-bottom: 0px;
}
#tab_autre th{
    padding: 0px;
}
#tab_autre td{
    padding-top:0px;
    padding-bottom: 0px;
}

#tablistetck td{
    padding-top:5px;
    padding-bottom: 5px;
     font-size: 12px;
}
#tablistetck th{
    padding: 0px;
}
#tablistetck tr{
    padding: 0px;
}

#tablisteregl td{
    padding-top:5px;
    padding-bottom: 5px;
}
#tablisteregl th{
    padding: 0px;
    font-size: 0.8em;
}
#tablisteregl tr{
    padding: 0px;
}

#fchoix{
    padding: 0px;
    padding-bottom: 5px;
    padding-top: 5px;
}
.cardclavier {
    background: transparent;
    border-radius: 2px;
    display: block;
    float: left;
    height: 350px;

    position: relative;
    width: 200px;
   /* box-shadow: 0 29px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);*/
   /* padding:10px;
    margin: 30px auto;*/
}
#clock{
    color : #421348;
    font: bold 20px Arial, Helvetica;
    text-decoration: none;
    padding-left: 20px;
}
#cadretime{
 
    padding-top: 5px;
}

#div_montant{
    width: 100%;
}
#div_montantart{
    width: 100%;
}
#res{
    width: 100%;
    max-width: 303px;
    min-width: 188px;
}

#resart{
    width: 100%;
    max-width: 303px;
    min-width: 188px;
}

.active {
  /*  background-color: #d8d0c8;*/
  }

  .activeligne {
    background-color: #d8d0c8;
  }

  #detailtck{
    height: 100%;
    max-height: 380px;
    overflow-y: scroll; 
}
#detailtckgl .col-sm-8{
     max-height: calc(100vh - 390px); /* Hauteur écran moins tes bandeaux haut et bas */
    height: calc(100vh - 390px);
    overflow: hidden; 
    height: 100% !important;
  overflow-y: auto !important;
  padding-top: 5px;
}
 #affichagecaisse{
    /*height: 100%;*/
    /*max-height: 50vh;*/
     max-height: calc(100vh - 400px);
    overflow-y: scroll; 
    height: auto;
}
#affichagecaisse{
    width: auto;
    height: auto;
    margin-left: 15px;
     margin-right: 15px;
   /* min-height: 100px;*/
}
#detailaff{
    height: 100%;
    max-height: 320px;
    overflow-y: scroll; 
}
#detailaffregl{
    height: 100%;
    max-height: 320px;
    overflow-y: scroll; 
}
#tabtck{
    font-size: 10px;
    overflow-y: scroll; 
    max-height: 300px;
}
#tablisteregl{
    overflow-y: scroll; 
    max-height: 40px;
}

#tablistetck{
    overflow-y: scroll; 
    max-height: 340px;
}

/*:focus {
  outline: 0;
  border-color: #2260ff;
  box-shadow: 0 0 0 4px #b5c9fc;
}*/

.mydict div {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    justify-content: center;
  }
  
  .mydict input[type="radio"] {
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
  
  .mydict input[type="radio"]:checked + span {
    box-shadow: 0 0 0 0.0625em #0043ed;
    background-color: #dee7ff;
    z-index: 1;
    color: #0043ed;
  }
  
  .btopt {
    display: block;
    cursor: pointer;
    background-color: #fff;
    padding: 0.375em .75em;
    position: relative;
    margin-left: .0625em;
    box-shadow: 0 0 0 0.0625em #b5bfd9;
    letter-spacing: .05em;
    color: #3e4963;
    text-align: center;
    transition: background-color .5s ease;
  }
  .rouge {
    color: #e1081a;
  }

  #zoneTotal{
    padding: 0 0rem 0 1rem ;
  }

  #bascaisse{
     position:absolute;
    bottom: 0;
    padding-bottom: 5px;
    margin-left: 15px;
    margin-right: 15px;
}
  
#tab_composantdispo {
    font-size: 12px;
}
  
  /*label:first-child span {
    border-radius: .375em 0 0 .375em;
  }
  
  label:last-child span {
    border-radius: 0 .375em .375em 0;
  }*/

   /* Fixer les colonnes de gauche */
.sticky-col-1 {
    position: sticky !important;
    left: 0;
    z-index: 10;
    background-color: white !important; /* Couleur de fond obligatoire */
}

.sticky-col-2 {
    position: sticky !important;
    left: 50px; /* À ajuster selon la largeur de la col 1 */
    z-index: 10;
    background-color: white !important;
}

/* Fixer la dernière colonne */
.sticky-col-last {
    position: sticky !important;
    right: 0;
    z-index: 10;
    background-color: white !important;
    border-left: 2px solid #dee2e6 !important;
}

/* Ajustement pour le header (pour éviter que le texte passe au dessus) */
thead th.sticky-col-1, 
thead th.sticky-col-2, 
thead th.sticky-col-last {
    z-index: 11; /* Un cran au dessus des cellules du body */
}
  
  .display th{
    font-size:0.8em;
}

.entetetab{
     font-size:0.8em;
}


.entetetabtck{
     font-size:0.8em;
}


#tablisteregl {
     font-size:0.8em;
}
#tablistetck {
     font-size:0.8em;
}

#tab_composantdispo{
    font-size:0.8em;
}
#tab_composantdispo_paginate{
    font-size:0.8em;
}
#tab_composantdispo_info{
    font-size:0.8em;
}
#tab_composantdispo_filter{
    font-size:0.8em;
}

.titre2 {
    font-size: 1.2rem;
}

#listerem {
   max-width: 500px;
  }

  #deconnectmenu{
    float:right;
    color: #040404;
    padding-right: 40px;
}
/* 1. On force le conteneur principal à faire la taille exacte restante sans déborder */
#detailaff {
    max-height: calc(100vh - 390px); /* Hauteur écran moins tes bandeaux haut et bas */
    height: calc(100vh - 390px);
    overflow: hidden; /* EMPÊCHE TOUT L'ÉCRAN DE SCROLLER */
}

#detailtck {
    max-height: calc(100vh - 390px); /* Hauteur écran moins tes bandeaux haut et bas */
    height: calc(100vh - 390px);
    overflow: hidden; /* EMPÊCHE TOUT L'ÉCRAN DE SCROLLER */
}

/* Uniquement la ligne `.row` qui est DANS `#detailaff` devient un conteneur fixe */
#detailaff .row {
    height: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important; /* Empêche les colonnes de passer l'une sous l'autre */
    align-items: stretch !important;
}

/* Uniquement la colonne gauche DANS `#detailaff` */
#detailaff .col-sm-4 {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Uniquement la colonne droite DANS `#detailaff` */
#detailaff .col-sm-8 {
    height: 100% !important;
    overflow-y: auto !important;
    padding-top: 5px;
}
/* C'est cette nouvelle div qui gère le scroll du tableau */
.zone-table-scroll {
    flex: 1 !important; /* Prend tout l'espace restant au-dessus du total */
    overflow-y: auto !important; /* Le scroll se fait UNIQUEMENT ici */
}

#tabtck {
    width: 100%;
    margin-bottom: 0;
}

/* --- LA ZONE TOTAL (FIXE EN BAS) --- */
#zoneTotal {
    height: 80px; /* Ajuste la hauteur si nécessaire */
    background-color: #f8f9fa; /* Fond légèrement grisé pour le faire ressortir */
    border-top: 2px solid #ddd;
    padding: 10px;
    width: 100%;
    font-size: 12px;
    flex-shrink: 0; /* Empêche le total de s'écraser */
}

#zoneTotal table {
    width: 100%;
}

#loader-patience {
    display: none; /* Caché par défaut */
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Fond sombre transparent */
    z-index: 9999; /* Toujours au-dessus du reste */
    color: white;
    text-align: center;
    padding-top: 45vh; /* Centre le texte verticalement */
    font-family: sans-serif;
    font-size: 20px;
    font-weight: bold;
}