body { 
	margin : 0px;
	background-color: #FFF;
	color: #000;
	font-size: 14px;
	font-family: 'Manrope', sans-serif;
    font-weight: 300;
	line-height: 22px 
}

#haut {
    width: 60px;
    height: 100%;
    z-index: 4000;
    background-color: #00727f;
    position: fixed;
    top: 0;
    left: 0;
}
#haut .contenu {
    position: relative;
    height: 100%;
}

#menu {
    height: 100%;
    top: 0;
    padding-left: 60px;
}

nav {
    position: fixed;
    top: 50px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 50px);
    background: #00727f;
    z-index: 3000;
    box-sizing: content-box;
    padding-bottom: 50%;
    scrollbar-width: none;
    overflow-y: scroll;
}

 .sidebar {
        height: calc( 100% - 140px );
        right: 0;
        overflow-x: hidden;
        padding-top: 10px;
        position: fixed;
        top: 60px;
        transition: 0.5s;
        width: 0;
        z-index: 10001;
        text-align: left;
        background: #FFF;
    }

.material-symbols-outlined.md-18 { font-size: 18px; }
.material-symbols-outlined.md-24 { font-size: 24px; }
.material-symbols-outlined.md-36 { font-size: 36px; }
.material-symbols-outlined.md-48 { font-size: 48px; }


i { vertical-align: middle }

a:link, a:visited { color: #e8983e }
a:hover { color: #000 }
strong { font-weight: 800 }

.sortable_item { cursor: pointer; padding: 10px 0; border-bottom: 1px dotted #c0c0c0 }

.bouton_ok { cursor: pointer; padding: 5px; border: 2px solid #e8983e; color: #e8983e; background: #FFF; border-radius: 10px; margin: 3px 5px; width: 70px; font-size: 80%; font-weight: 900; }
.bouton_ko { cursor: pointer; padding: 5px; border: 2px solid #c0c0c0; color: #c0c0c0; background: #FFF; border-radius: 10px; margin: 3px 5px; width: 70px; font-size: 80%; font-weight: 900; }
.div_tableau { position: relative; width: 95%; padding: 0 2.5%; box-shadow: 0 0 25px rgba(0,0,0,0.1); border: 10px solid #FFFFFF; }
.div_bloc { float: left; padding: 30px 2%; width: 27%; margin: 0 1% 20px 1%; background: #00727f; text-align: center; border-radius: 0 20px 0 0 }
a:link.bloc , a:visited.bloc{ color: #FFF; font-weight: 700; font-size: 150% }
a:hover.bloc{ color: #e8983e; font-weight: 700; font-size: 150% }

.stat { float: left; padding: 30px 2%; width: 27%; margin: 0 2% 20px 0; background: #00727f; text-align: center; }
.intitule_stat { font-size: 200%; color: #FFF }
.chiffre_stat { font-size: 400%; color: #FFF; font-weight: 800 }
.label_input { line-height: 40px; }

#header_pictos { position: absolute; right: 20px; margin-top: 20px }
#ticket { float: right; margin: 10px 20px; font-size: 100%; text-align: center }
#box { float: right; margin: 10px 20px; font-size: 100%; text-align: center }
#user { float: right; margin: 10px 20px; font-size: 100%; text-align: center }
#deconnect { float: right; margin: 10px 20px; font-size: 100%; text-align: center }
#ticket a:link, #ticket a:visited, #box a:link, #box a:visited, #user a:link, #user a:visited, #deconnect a:link, #deconnect a:visited { color: #000; text-decoration: none }
#ticket a:hover, #box a:hover, #user a:hover, #deconnect a:hover { color: #00727f; text-decoration: none }

.message_ok { padding: 5px 10px; border-radius: 10px; color: #FFF; background-color: #81b135; display: table }
.icon_align { vertical-align: bottom; }

hr { content:url('../medias/res/hr.png'); max-width:100%; border: none; margin:20px auto; }

/* LOGIN */
#ident { clear: both; }
    #ident h1 {
        font-family: 'Tajawal', sans-serif; color: #e8983e; font-size: 340%;
        font-weight: normal; margin: 30px 0 15px 0
    }
    #ident h2 {
        font-family: 'Tajawal', sans-serif; color: #e8983e; font-size: 200%;
        font-weight: normal; margin: 20px 0 15px 0
    }
    #ident h3 {
        font-family: 'Tajawal', sans-serif; color: #e8983e; font-size: 150%;
        font-weight: normal; margin: 15px 0 15px 0
    }

    #ident a:link, #ident a:visited {
        font-family: 'Tajawal', sans-serif; color: #000000; font-size: 115%;
        font-weight: normal; margin: 15px 0 15px 0
    }
    #ident a:hover {
        font-family: 'Tajawal', sans-serif; color: #e8983e; font-size: 115%;
        font-weight: normal; margin: 15px 0 15px 0
    }
    
    .erreur { color: #FF0000; font-weight: bold; font-size: 150% }
    
    #valider_ident { position: relative;
    color: #FFF;
    background-color: #e8983e;
    padding: 15px 20px 10px 20px;
    border-radius: 0 10px 0 0;
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
    text-align: center;
    border: none;
    font-size: 150%;
    right: 0; top: 0
    }

/* ACCUEIL */

#header_accueil0 { width: 100%; height: 100vh; margin: 0 auto; }
#header_accueil { width: 1200px; margin: 0 auto; text-align: left }
#header_accueil ul { padding: 0 }
#header_accueil li { list-style: none }
#header_accueil li:before{
    font-family: "Font Awesome 5 Pro";
    content: "\f00c";
    font-size: 120%; 
    font-weight: 400;
    padding-right: 5px;
}

#header_accueil h1 { font-size: 250%; font-family: 'Tajawal', sans-serif; color: #e8983e; font-weight: 800; }

.bloc_connexion { position: absolute; bottom: 20px }
.intitule_accueil { line-height: 50px; font-size: 125% }
a.lien_accueil1:link, a.lien_accueil1:visited { font-size: 125%;  font-family: 'Manrope', sans-serif; text-decoration: none; font-weight: 700; line-height: 30px; background: #016cb2; color: #FFF; padding: 10px 10px 8px 10px; border-radius: 0 0 10px 0; }
a.lien_accueil1:hover { color: #016cb2; background: #FFF; }

.logo_out { padding-top: 50px; width: 300px }

/* FIN ACCUEIL */


#header {  width: 100%; padding-left: 60px; height: 100px; background: #e7e7e7; box-sizing: border-box; }

#centre { width: 100%; padding-left: 60px; box-sizing: border-box; }
#contenu { width: 1100px; margin: 0 50px; padding-bottom: 100px; }
#contenu_accueil { width: 100%; margin: 0 auto; padding-bottom: 100px; }

#accueilG {  width: 400px; left: -200px; margin: 0 50%; position: relative }

.ligne1 { background: #FFFFFF; border-top: 1px dotted #c0c0c0; padding: 10px; }
.ligne2 { background: #F7F7F7; border-top: 1px dotted #c0c0c0; padding: 10px; }
.droite { text-align: right }
.centre { text-align: center }
.center { text-align: center }
.gauche { text-align: left }
.action { clear: both; padding-top: 30px }
.vert { color: #81b135 }
.rouge { color: #FF0000 }

a.lien_action:link, a.lien_action:visited, a.lien_action:hover  { font-weight: 800; text-decoration: none; color: #016cb2 }

#colonneG { float: left; width: 55%; margin-right: 5% }
#colonneD { float: left; width: 35%; margin-right: 5% }

#colonneG2 { float: left; width: 45%; margin-right: 5% }
#colonneD2 { float: left; width: 45%; margin-right: 5% }

.tableau { width: 100%; box-shadow: 0 0 25px rgba(0,0,0,0.1); border: 10px solid #FFFFFF }
td.lign1 { border-bottom: 1px dotted #c0c0c0 }
td.lign2 { border-bottom: 1px dotted #c0c0c0 }

.titre { position: relative; }
#contenu h1, #contenu_accueil h1 { font-size: 260%; font-family: 'Tajawal', sans-serif; font-weight: 700; color: #00727f; border: 6px solid #00727f; border-radius: 0 20px 0 0;
    display: inline-block; padding: 30px 20px 20px 20px;
}
#contenu h2, #contenu_accueil h2 {
    font-family: 'Tajawal', sans-serif; color: #e8983e; font-size: 200%;
    font-weight: normal; margin: 15px 0 15px 0; line-height: 30px;
}
#contenu h3, #contenu_accueil h3 {
    font-family: 'Tajawal', sans-serif; color: #e8983e; font-size: 150%;
    font-weight: normal; margin: 15px 0 15px 0; line-height: 30px;
}
#contenu_accueil p {
    font-size: 125%; line-height: 24px
}

input[type="submit"] {
    font-family: FontAwesome;
}
input:required, textarea:required { border: 1px solid #fff; }
input:invalid, textarea:invalid { border: 1px solid #ff0000; }
input:valid, textarea:valid { border: 1px solid #81b135; }

input[type="text"], input[type="date"], input[type="password"], select { background: #FFF;
    border: none; padding: 5px 10px; font-size: 115%;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    color: #444;
    line-height: 30px;
    font-weight: 400;
    width: 95%;
    margin-bottom: 5px;
    border-radius: 10px; 
}

#valider_client {
  position: relative;
  color: #FFF;
  background-color: #e8983e;
  padding: 15px 20px 7px 20px;
  border-radius: 0 10px 0 0;
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
  text-align: center;
  border: none;
  font-size: 150%;
  right: 0;
  top: 0;
}

.titre1 { clear: both; font-size: 150%;  font-family: 'Tajawal', sans-serif; font-weight: 700; line-height: 30px }
.titre2 { clear: both; font-size: 125%;  font-family: 'Tajawal', sans-serif; line-height: 30px; padding-top: 10px }
.surligne { padding: 5px 10px; border-radius: 5px; color: #000; background-color: #00727f; } 
.detail_produit { font-size: 80%; line-height: 16px; padding: 0; margin: 0 }

.surligne_vert { padding: 5px 10px; border-radius: 5px; color: #000; background-color: #81b135; } 
.surligne_orange { padding: 5px 10px; border-radius: 5px; color: #000; background-color: #ff8b00; } 
.surligne_rouge { padding: 5px 10px; border-radius: 5px; color: #000; background-color: #ff0000; } 
.surligne_bleu { padding: 5px 10px; border-radius: 5px; color: #000; background-color: #016cb2; } 
.surligne_gris { padding: 5px 10px; border-radius: 5px; color: #000; background-color: #bbbbbb; } 

#valider { color: #00727f; padding: 5px 10px; border-radius: 9999px; position: absolute; right: 10px; top: 3px; }
.ajouter { position: relative; left: -10px; color: #000; background-color: #00727f; padding: 10px; border-radius: 9999px; font-family: 'Tajawal', sans-serif; font-weight: 700; text-align: center }
.ajouter_on { background-color: #5e9b00; }
.design-input { border-radius: 10px; background-color: #f1f3f5; border: none; padding: 15px 25px 15px 25px }

.valid_doc, .refus_doc { float: left; width: 50%; text-align: center; color: #808080; font-weight: 800; cursor: pointer }
.valid_doc_on { color: #81b135; font-weight: 800; text-align: center }
.refus_doc_on { color: #ff0000; font-weight: 800; text-align: center }

#valider2 { position: relative;
    color: #000;
    background-color: #00727f;
    padding: 10px 20px;
    border-radius: 10px;
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
    text-align: center;
    border: none;
    font-size: 150%;
    right: 0; top: 0;
    cursor: pointer
    }
    
.b25{ width: 25px; }
.b50 { width: 50px; }
.b75 { width: 75px; }
.b100 { width: 100px; }
.b150 { width: 150px; }
.b200 { width: 200px; }
.b250 { width: 250px; }
.b80PC { width: 80% }

.bouton { cursor: pointer; float: left; margin-right: 5px; margin-bottom: 5px; background: #f7f7f7; color: #000; padding: 5px 10px; border-radius: 5px; font-weight: 700 }
.bouton_on { background: #000; color: #00727f; padding: 5px 10px; border-radius: 5px }

.visuel { display: none; clear: both; width: 100% }
.visuel_show { display: inline-block; clear: both; width: 100% }

.cadre_client { float: left; margin: 0 0 20px 0; width: 80%; background-color: #e7e7e7; border: 2px solid #FFF; border-radius: 20px; padding: 20px }
.cadre_imagidee { float: right; margin: 0 0 20px 0; width: 80%; background-color: #fff; border-radius: 20px; border: 2px solid #e7e7e7; padding: 20px }

.PV { color: #00727f; font-family: 'Tajawal', sans-serif; font-weight: 700; font-size: 300% }
.PV2 { color: #00727f; font-family: 'Tajawal', sans-serif; font-weight: 700; font-size: 200% }

.invalide { background: #FF6347; color: #FFF; padding: 10px 20px; border-radius: 10px; }
.valide { background: #5e9b00; color: #FFF; padding: 10px 20px; border-radius: 10px; }

#quantite { left: -10px; position: relative; }
.quantite { font-weight: 700 }
.quantite::before {
    font-family: "Font Awesome 6 Pro";
    font: var(--fa-font-light);
    content: "\e19e";
    font-size: 300%; 
}

.logo { margin: 20px 0 0 20px; }

#bas { clear: both; width: 100%; text-aliggn: center; padding: 50px 0 }

.affiche { display: inline-block }
.masque { display: none }

.fichier_down {
  position: relative;
  float: left;
  margin: 10px 2% 0 0;
  width: 19%;
  padding: 2%;
  color: #FFF;
  text-align: center;
  border-radius: 0 20px 0 0;
  box-shadow: 0 0 25px rgba(0,0,0,0.1);
}

.fichier_down:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

a.lien_fichier_down {
  color: #FFF;
  font-weight: 700;
  font-size: 125%;
}

.fichier_down .content {
  position: absolute;
  width: 83%;
  height: 83%;
}