/*
 © 2026 Société 2L-Ingenierie – Tous droits réservés
*/

body {font-family:"Times New Roman"; font-size:14px; font-weight:normal; background-color:white;overflow:auto;}
#entete_page1 { background: linear-gradient(180deg, rgba(94,113,98,1) 0%, rgba(82,169,91,1) 50%, rgba(14,106,78,0.908000700280112) 100%); color: white; width: 2060px; height: 40px; line-height: 30px; position:absolute; top: 5px;	left: 5px; text-align: center;font-size:30px;border-radius: 10px}
.entete {}
#textfooter0 {position : absolute; top :55px; left: 66px;font-size:10px; font-family: Arial, sans-serif; color: #444}
#textfooter1 {position : absolute; top :10px; left: 150px;font-size:8px; font-family: Arial, sans-serif; color: #444}

#entete_page2 {}
#page2  { display:block; pointer-events: auto; position : absolute; top : 850px; left: 300px;  width: 1350px;  height: 400px; background-color: white; border-width: 5px;}
/* table { table-layout:auto;width:100%;} */

pre {line-height:120%;}
p {	text-align:left; color:black; line-height:60%;}

#schema {position:absolute;	top: 55px;	left: 300px; border: 2px ; solid #9C9898; backgroundColor=gray;box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.5);border-radius: 5px}

#text1 { width: 200px;  position : absolute; top : 120px; left: 10px;} /* date du jour */
#date_jour { width: 120px;height: 20px;text-align:center;font-size:14px;font-family: Verdana, Geneva, Tahoma, sans-serif ;position : absolute; top : 110px; left: 100px; border: 2px solid #9C9898;} /* date jour */
#text2 { width: 200px;  position:absolute; top : 150px; left : 10px;} /* start project */
#start_date_project { width: 120px;height: 20px;text-align:center;font-size:12px;font-family: Verdana, Geneva, Tahoma, sans-serif ;position : absolute; top : 140px; left: 100px; border: 2px solid #9C9898;} /* date projet */
#text3 { width: 200px;  position:absolute; top : 180px; left : 10px;} /* file name */
#file_name_db{ width: 120px; height: 20px; font-family: Verdana, Geneva, Tahoma, sans-serif ;position:absolute; top : 170px; left : 100px; border: 2px solid #9C9898;
            background: lightgray;box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);} /* file name */

/* BP */
/* === */
#newproject {position:absolute; top : 205px; left : 112px; width: 100px; height: 40px;background: rgb(21,105, 126); font-size:12px;text-align: center;
            font-family: Verdana, Geneva, Tahoma, sans-serif ;border-radius: 10%;color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));}
#newproject:hover {box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);cursor: pointer;}
#display_datas {position:absolute; top : 205px; left : 10px; width: 100px; height: 40px;background: rgb(21,105, 126); font-size:12px;text-align: center;
                font-family: Verdana, Geneva, Tahoma, sans-serif ;border-radius: 10%;color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));}
#display_datas:hover {box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);cursor: pointer;}

/* choix parametres pour canvas largeur et couleur*/
/* ============================================== */

#text4 { width: 200px;  position:absolute; top : 255px; left : 10px;}  /* line display */
#Choicerows {position:absolute; top : 250px; left : 145px;}
#text5 { width: 200px;  position:absolute; top : 285px; left : 10px;} /* columnn display */
#Choicecol {position:absolute; top : 280px; left : 145px;}
#text16 { width: 200px;  position:absolute; top : 315px; left : 10px;} /* trace weekend */
#traceweekend {position:absolute; top : 310px; left : 145px;}
#text17 { width: 200px;  position:absolute; top : 345px; left : 10px;} /* trace semaine */
#tracesemaine {position:absolute; top : 340px; left : 145px;}
#text18 { width: 200px;  position:absolute; top : 375px; left : 10px;} /* text color day */
.color_week { width: 20px; height: 20px; position:absolute; top : 370px; left : 145px; border-width: 1px;border-style: ridge ; border-radius: 50px; border-color:red ;}
#text19 { width: 200px;  position:absolute; top : 405px; left : 10px;} /* text color week */
.color_days { width: 20px; height: 20px; position:absolute; top : 400px; left : 145px; border-width: 1px;border-style: ridge ; border-radius: 50px; border-color:red ;}
#text200 { width: 200px;  position:absolute; top : 435px; left : 10px;} /* text color day */
.color_month { width: 20px; height: 20px; position:absolute; top : 430px; left : 145px; border-width: 1px;border-style: ridge ; border-radius: 50px; border-color:red ;}
#text201{ width: 200px;  position:absolute; top : 465px; left : 10px;} /* text color week */
.color_year { width: 20px; height: 20px; position:absolute; top : 460px; left : 145px; border-width: 1px;border-style: ridge ; border-radius: 50px; border-color:red ;}

#text6 { width: 200px;  position:absolute; top : 505px; left : 10px;} /* width name task */
#w_task {width: 45px; height: 20px;    position:absolute; top : 495px; left : 150px; border: 2px solid #9C9898; font-size:12px;}
#text7 { width: 200px;  position:absolute; top : 535px; left : 10px;}
#l_size {width: 45px; height: 20px;    position:absolute; top : 525px; left : 150px; border: 2px solid #9C9898; font-size:12px;}
#text8 { width: 200px;  position:absolute; top : 565px; left : 10px;}
#g_columns {width: 45px; height: 20px; position:absolute; top : 555px; left : 150px; border: 2px solid #9C9898; font-size:12px;}
#text9 { width: 200px;  position:absolute; top : 595px; left : 10px;}
#g_rows {width: 45px; height: 20px;    position:absolute; top : 585px; left : 150px; border: 2px solid #9C9898; font-size:12px;}
#text20 { width: 200px;  position:absolute; top : 625px; left : 10px;}  /* choix nbr jour/semaine */
#nbr_jour_w {width: 45px; height: 20px;position:absolute; top : 620px; left : 150px; border: 2px solid #9C9898; font-size:12px;}

/* choix delay (jours, semaines, mois) */
/* ==================================== */
#boite_parametrage { position:absolute; top :54px; left :5px ;background-color:"#f3f1ed"; width:290px; height: 880px; border-radius:3px;text-align:left; border:1px solid gray;
 box-shadow: rgba(0, 0, 0, 0.01) 0px -100px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;}

/* choix delay (jours, semaines, mois) */
/* ==================================== */
#boite_choix_delay { position:absolute; top : 660px; left : 10px;background-color:"#f3f1ed"; width:150px; padding:24px; border-radius:3px;text-align:left; border:1px solid gray;
 box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;}

#text21 { width: 200px;  position:absolute; top : 650px; left : 20px;z-index: 1}
#text22 { width: 200px;  position:absolute; top : 680px; left : 25px;z-index: 1}
#text23 { width: 200px;  position:absolute; top : 680px; left : 80px;z-index: 1}
#text24 { width: 200px;  position:absolute; top : 680px; left : 145px;z-index: 1}
#Choix_jours { position:absolute; top : 690px; left : 25px;}
#Choix_semaines { position:absolute; top : 690px; left : 85px;}
#Choix_mois {position:absolute; top : 690px; left : 150px;}

/* ------- tableau affichage donnees taches----- */
/* ============================================== */
#tableau_tache {position:absolute; top : 720px; left : 10px;}
#entete_tableau_affichage_datas { background: green}
#th_numero_tache{ background: white; text-align:left;}
#th_n_tache_affichable{ background: white; text-align:center;}
#th_n_week{ background: white; text-align:center;}

#tableau_start{ background: white; text-align:left;}
#td_tableau_start{ background: white; text-align:center;}
#td_week_start{ background: white; text-align:center;}

#tableau_end{ background: white; text-align:left;}
#td_tableau_end{ background: white; text-align:center;}
#td_week_end{ background: white; text-align:center;}

#date_pointee{ background: blue; text-align:left;color:white;font-weight: 900}
#td_date_pointee{ background: blue; text-align:center; color:white;font-weight: 900}
#td_week_pointee{ background: blue; text-align:center; color:white;font-weight: 900}


/* choix parametres pour IFRAME */
/* ============================ */
#entete_iframe {background: linear-gradient(180deg, rgba(94,113,98,1) 0%, rgba(82,169,91,1) 50%, rgba(14,106,78,0.908000700280112) 100%);color: white; width: 1360px; height: 50px; line-height: 40px; position:absolute; top: 550px;left: 300px; z-index: 1;
        border-radius: 10px; border-style: none; box-shadow:black 0 -10px 10px inset;
        font-family: -apple-system,sans-serif;  font-size: 1.2rem;  font-weight: 700;  letter-spacing: -.24px; outline: none;
        text-align: center;  text-decoration: none;  user-select: none;  -webkit-user-select: none;  touch-action: manipulation;}
#entete_iframe:hover { background-color: green; box-shadow: black 0 -5px 30px inset; cursor: pointer;}
#entete_iframe:active {box-shadow: #black 0 -30px 20px inset;height: 60px; }

.label_name_task{ width: 250px; height: 20px; margin: 0px 0px 0px 0px; padding: 0px 20px 0px 20px;}
.name_task{ width: 200px; height: 20px; margin: 0px 0px 0px 0px;}
.start_task{ width: 50px; height: 20px;margin: 0px 0px 0px 0px;}
.delay_task{ width: 50px; height: 20px;margin: 0px 0px 0px 0px;}
.gap_with_upstream_task{ width: 50px; height: 20px;margin: 0px 0px 0px 0px;}
.milestone{ width: 50px; height: 15px; margin: 0px 0px 0px 0px;}
.downstream_task { width: 50px; height: 20px;margin: 0px 0px 0px 10px;}
.upstream_task { width: 50px; height: 20px;margin: 0px 0px 0px 0px;}
.principal_task { width: 50px; height: 15px;margin: 0px 0px 0px -10px;}
.bouton_delete {width: 42px; height: 20px;background: rgb(21,105, 126); font-size:11px;text-align: center;font-family: Verdana, Geneva, Tahoma, sans-serif ;
                border-radius: 10%;color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));margin: 0px 0px 0px 0px;}
.bouton_insert {width: 42px;height: 20px; background: rgb(21,105, 126); font-size:11px;text-align: center;font-family: Verdana, Geneva, Tahoma, sans-serif ;
                border-radius: 10%;color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));margin: 0px 0px 0px 0px;}
.color_task { width: 20px; height: 20px; margin: 0px 0px 0px 0px; border-width: 1px; border-style: ridge ; border-radius: 50px; border-color:red ;}
.selection  { width: 10px; height: 20px;  border-width: 1px; border-style: ridge ; border-radius: 50px;}
#T1{ width: 200px;  position:absolute; top : 30px; left : 150px;;} /* definition Iframe */
#T2{position:absolute; top : 30px; left : 320px; }
#T3{ position:absolute; top : 30px; left : 390px;} /* delay Iframe*/
#T4{ position:absolute; top : 30px; left : 450px;} /* Gap Iframe*/
#T5{ width: 50px; margin: 0px 0px 0px 0px;} /* milestone Iframe*/
#T6{ width: 50px; margin: 0px 0px 0px 0px;} /* downstream task Iframe*/
#T7{ width: 50px; margin: 0px 0px 0px 0px;} /* main task Iframe*/
#bouton_Iframe{ width: 100px; height: 25px; margin: 0px 0px 0px 0px;font-size:11px;text-align: center;font-family: Verdana, Geneva, Tahoma, sans-serif ;box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.5)}
#SET_start_tasks{ width: 150px; height: 25px; margin: 0px 0px 0px 320px;font-size:11px;text-align: center;font-family: Verdana, Geneva, Tahoma, sans-serif ;box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.5)}
#Optimisation { width: 150px; height: 25px; margin: 0px 0px 0px 450px;font-size:11px;text-align: center;font-family: Verdana, Geneva, Tahoma, sans-serif ;box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.5)}


/* donnees diverses (drapeaux, sigle LLA, etc .. */
/* ============================================= */
#message1 {	width: 100px;  position:absolute; top : 880px; left : 160px; border: 2px solid #9C9898;}
#message2 {	width: 100px;  position:absolute; top : 900px; left : 160px; border: 2px solid #9C9898;}
.dessin_lla img {display: block; margin: 0 auto; height : 50px; width : 50px; position : absolute; top : 58px; left : 12px;}
#drapeau_F {height:20px; width:30px;position : absolute; top : 15px; left : 20px;}
#drapeau_F:hover {box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);cursor: pointer;}
#drapeau_A {height:20px; width:30px;position : absolute; top : 15px; left :60px;}
#drapeau_A:hover {box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);cursor: pointer;}

/* ==== BP normalement inutile ===*/
/*================================*/
#essai_file {position:absolute; top : 860px; left : 10px;}
#test_divers {position:absolute; top : 890px; left : 10px;}
#inputfile { position:absolute; top : 920px; left : 10px; width: 280px; height: 22px;background: rgb(21,105, 126); font-size:12px;text-align: center;font-family: Verdana, Geneva, Tahoma, sans-serif ;border-radius: 10%;color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));}
#inputfile:hover {box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);cursor: pointer;}
#Sauvefichier {position:absolute; top : 920px; left : 10px; width: 130px; height: 30px;background: rgb(21,105, 126); font-size:12px;text-align: center;font-family: Verdana, Geneva, Tahoma, sans-serif ;border-radius: 10%;color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));}
#Sauvefichier:hover {box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);cursor: pointer;}
#lecturefichier {position:absolute; top : 920px; left : 140px; width: 130px; height: 30px;background: rgb(21,105, 126); font-size:12px;text-align: center;font-family: Verdana, Geneva, Tahoma, sans-serif ;border-radius: 10%;color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));}
#lecturefichier:hover {box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);cursor: pointer;}
#AbortFonctionAjax {position:absolute; top : 710px; left : 10px; width: 260px; height: 40px;background: rgb(21,105, 126); font-size:12px;text-align: center;font-family: Verdana, Geneva, Tahoma, sans-serif ;border-radius: 5%;color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));}
#AbortFonctionAjax:hover {box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);cursor: pointer;}

/* init pour tous les input */
/* ======================== */
input:enabled {color: black;}
input:disabled {color: black;background-color: lightgray}

/* ------------ barre de progression------------- */
/* ============================================== */
#pwidget { display: none;position:absolute; top : 762px; left : 10px;background-color:lightgray; width:260px; padding:5px; border-radius:3px; border-radius:3px; text-align:left; border:1px solid gray;}
#progressbar { width:255px; padding:1px; background-color:white; border:1px solid black; height:28px;}
#indicator { width:0px; background-image:url("barre_progression.png"); height:28px; margin:0;}
#progressnum { text-align:center; width:255px;}


/* ------------ pour menu deroulant ------------- */
/* ============================================== */
.dropbtn { background-color:green; color: white; border: none; font-size:15px;border-radius:10px;box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5) }
.dropdown {position : absolute; top : 12px; left : 220px; display: inline-block}
.dropdown-content {display: none; position:relative; width: 200px; background-color: #f1f1f1; min-width: 160px; z-index: 1;font-size:15px;
                   border-radius:10px;box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.5) }
.dropdown-content a {color: black; padding: 8px 16px; text-decoration: none; display: block;}
.dropdown-content a:hover {background-color:green;color:white; border-radius:10px;box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.5);font-size:15px}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}

.helpbtn { background-color:green; color: white; border: none; font-size:15px;border-radius:10px;box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5)}
.help {position : absolute; top : 12px; left : 120px; display: inline-block}
.help-content2 {display: none; position: relative; width: 100px;background-color: #f1f1f1;  z-index: 1;font-size:15px;
                   border-radius:10px;box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.5) }
.help-content2 a {color: black; padding: 8px 16px; text-decoration: none; display: block;}
.help-content2 a:hover {background-color:green;color:white; border-radius:10px;box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.5);font-size:15px}
.help:hover .help-content2 {display: block;}
.help:hover .helpbtn {background-color: #3e8e41;}

/*---------------#region Alert--------------- */
/* ========================================== */
#dialogbox{ display: none; position: absolute; background: rgb(0, 47, 43); border-radius:7px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.575); transition: 0.3s; width: 50%; z-index: 10; }
#dialogbox:hover {box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.911);}
.pure-material-button-ok {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 0 16px;
  min-width: 100px;
  height: 36px;
  vertical-align: middle;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
  background-color: rgb(var(--pure-material-primary-rgb, 0, 77, 70));
  /* background-color: rgb(1, 47, 61) */
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
  font-size: 14px;
  font-weight: 500;
  line-height: 36px;
  overflow: hidden;
  outline: none;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.pure-material-button-Nok {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 0 16px;
  min-width: 100px;
  height: 36px;
  vertical-align: middle;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
  background-color: rgb(var(--pure-material-primary-rgb, 0, 77, 70));
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
  font-size: 14px;
  font-weight: 500;
  line-height: 36px;
  overflow: hidden;
  outline: none;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.pure-material-button-Nok:hover{height: 40px; }

#dialogbox { display: none}
#dialogbox > div{ background:#FFF; }
#dialogbox > div > #dialogboxhead{ background: rgb(0, 77, 70); font-size:19px; padding:10px; color:rgb(255, 255, 255); font-family: Verdana, Geneva, Tahoma, sans-serif ;}
#dialogbox > div > #dialogboxbody{ background:rgb(0, 47, 43); padding:20px; color:#FFF; font-family: Verdana, Geneva, Tahoma, sans-serif ;}
#dialogbox > div > #dialogboxfoot{  background: rgb(0, 47, 43); padding:10px; text-align:right;}
#Ok_help {position:absolute; top : 10px; left : 750px; width: 100px; height: 30px;background: rgb(21,105, 126); font-size:12px;text-align: center;
            font-family: Verdana, Geneva, Tahoma, sans-serif ;border-radius: 10%;color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));}
#Ok_help:hover {box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);cursor: pointer;}

/* demande nom de la société */
/* ========================= */
#dialogbox1{ display: none;position : absolute; top : 120px;left : 500px; height:250px;width:1000px; background: rgb(0, 47, 43); border-radius:7px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.575); transition: 0.3s; width: 50%; z-index: 10; }
#dialogbox1:hover {box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.911);}
#dialogbox1 > div{ background:#FFF; }
#dialogbox1 > div > #dialogboxhead1{ background: rgb(0, 77, 70); font-size:19px; padding:20px; color:rgb(255, 255, 255); font-family: Verdana, Geneva, Tahoma, sans-serif ;}
#dialogbox1 > div > #dialogboxbody1{ background:rgb(0, 47, 43); padding:40px; color:#FFF; font-family: Verdana, Geneva, Tahoma, sans-serif ;}
#dialogbox1 > div > #dialogboxfoot1{  background: rgb(0, 47, 43); padding:40px; text-align:right;}

.container1 { display: block; position:absolute; top : 120px; left : 0px;border-radius:10px; flex-direction: column; height: 100px; max-width: 1600px; padding: 0 15px; margin: 0 auto;z-index: 999}
.name-style-input {position: relative;display: flex; flex-direction: row; border-radius: 5px; background: $input-background;}
.name-style-input input {color: $input-text-active; font-size: 15px; line-height: 1.0rem; vertical-align: middle; }
.name-style-input button { color:  $input-text-inactive; font-size: 15px; line-height: 2.0rem; vertical-align: middle; transition: color .25s; &:hover {color: $input-text-active; }}
.container2 { display: none; position:absolute; top : 160px; left : 0px;border-radius:10px; flex-direction: column; height: 100px; max-width: 1600px; padding: 0 15px; margin: 0 auto;z-index: 999}
.name-style-input1 {position: relative;display: flex; flex-direction: row; border-radius: 5px; background: $input-background;}
.name-style-input1 input {color: $input-text-active; font-size: 15px; line-height: 1.0rem; vertical-align: middle; }
.name-style-input1 button { color:  $input-text-inactive; font-size: 15px; line-height: 2.0rem; vertical-align: middle; transition: color .25s; &:hover {color: $input-text-active; }}
.container3 { display: none; position:absolute; top : 200px; left : 0px;border-radius:10px; flex-direction: column; height: 100px; max-width: 1600px; padding: 0 15px; margin: 0 auto;z-index: 999}
.name-style-input2 {position: relative;display: flex; flex-direction: row; border-radius: 5px; background: $input-background;}
.name-style-input2 input {color: $input-text-active; font-size: 15px; line-height: 1.0rem; vertical-align: middle; }
.name-style-input2 button { color:  $input-text-inactive; font-size: 15px; line-height: 2.0rem; vertical-align: middle; transition: color .25s; &:hover {color: $input-text-active; }}
.container4 { display: none; position:absolute; top : 200px; left :0px;border-radius:10px; flex-direction: column; height: 100px; max-width: 1600px; padding: 0 15px; margin: 0 auto;z-index: 999}
.name-style-input3 {position: relative;display: flex; flex-direction: row; border-radius: 5px; background: $input-background;}
.name-style-input3 input {color: $input-text-active; font-size: 15px; line-height: 1.0rem; vertical-align: middle; }
.name-style-input3 button { color:  $input-text-inactive; font-size: 15px; line-height: 2.0rem; vertical-align: middle; transition: color .25s; &:hover {color: $input-text-active; }}
.container6 { display: none; position:absolute; top : 200px; left :0px;border-radius:10px; flex-direction: column; height: 100px; max-width: 1600px; padding: 0 15px; margin: 0 auto;z-index: 999}
.name-style-input4 {position: relative;display: flex; flex-direction: row; border-radius: 5px; background: $input-background;}
.name-style-input4 input {color: $input-text-active; font-size: 15px; line-height: 1.0rem; vertical-align: middle; }
.name-style-input4 button { color:  $input-text-inactive; font-size: 15px; line-height: 2.0rem; vertical-align: middle; transition: color .25s; &:hover {color: $input-text-active; }}
.container5 { display: none; position:absolute; top : 120px; left :250px;border-radius:10px; flex-direction: column; height: 100px; max-width: 1600px; padding: 0 15px; margin: 0 auto;z-index: 999}

#text50 { width: 300px;  position:absolute; top : 5px; left :250px; color:red;font-size: 20px }

/* affichage de la liste */
.file-content {display: none; position:absolute; top : 70px; left : 500px; width: 300px;background-color: #f1f1f1;  z-index: 999;font-size:12px;
                   border-radius:10px;box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.5) }
.file-content a {color: white; padding: 2px 10px; text-decoration: none; display: block;}
.file-content a:hover {background-color:green;color:white; border-radius:10px;box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.5);font-size:15px}

.file-directory a:hover {color:white}

/* info bulle pour remarque tache sur canvas */
/* ========================================= */
.bubble-text{font-family: sans-serif;font-size:8px; background:#139ee0; color:#fff; padding:0px 15px; border-radius:3px; width:200px;position: absolute;top : 0px; left :0px;z-index: 999 }
.bubble-text::after{content:""; border-left:20px solid transparent;border-right:20px solid transparent ;border-top: 20px solid #139ee0;position: absolute;}
#bubble{ display: none;}
#titre_bulle {font-family: sans-serif;font-size:12px;}
#texte_bulle {font-family: sans-serif;font-size:12px;}
#input_texte_bulle{font-family: sans-serif;font-size:15px;background:#139ee0;color:#000;}


/* infor bulle pour delete liaison sur canvas */
/* ========================================== */
.delete_link-text{font-family: sans-serif;font-size:8px; background:#139ee0; color:#fff; padding:5px 15px; border-radius:3px; width:180px;position: absolute;top : 0px; left :0px;z-index: 999 }
.delete_link-text::after{content:""; height:100px; border-left:20px solid transparent;border-right:20px solid transparent;border-top: 20px solid #139ee0;position: absolute;}
#delete_link{ display: none;}
#titre_delete_link {font-family: sans-serif;font-size:15px;}
.delete_link #delete_amont {border: 0px solid white;font-family: sans-serif;font-size:12px;background:#139ee0;color:#fff;}
.delete_link #delete_aval  {border: 0px solid white;font-family: sans-serif;font-size:12px;background:#139ee0;color:#fff;}
#pos1 {position: absolute; top= 0px; left: -105px}
#pos2 {position: absolute; top= 0px; left: 215px}
#delete_amont {display: inline-block; box-sizing: border-box; border-radius: 4px; padding: 0 16px; min-width: 100px; height: 36px; vertical-align: middle; text-align: center;text-overflow: ellipsis;
   text-transform: uppercase;  color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255)); }
#delete_aval {display: inline-block; box-sizing: border-box; border-radius: 4px; padding: 0 16px; min-width: 80px; height: 36px; vertical-align: middle; text-align: center;text-overflow: ellipsis;
   text-transform: uppercase;  color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255)); }
#delete_amont:hover {box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.5);font-size:14px;}
#delete_aval:hover  {box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.5);font-size:14px;}
#delete_amont:active {border: 1px solid blue;box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5);}
#delete_aval:active  {border: 1px solid blue;box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5);}

/* appel URL */
/* ========= */
#new_url {position:absolute; top : 205px; left : 215px; width: 80px; height: 40px;background: rgb(21,105, 126); font-size:12px;text-align: center;
            font-family: Verdana, Geneva, Tahoma, sans-serif ;border-radius: 10%;color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));}
#new_url:hover {box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);cursor: pointer;}

/* bulle d'info quand le pointeur passe au dessus */
/* ========== */
.tooltip {position: relative; display: inline-block; border-bottom: 1px dotted black;}
.tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute;
  z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s;}
.tooltip .tooltiptext::after {content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent;}
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1;}

/* =============menu entrant ============ */
#drapeau_F1 {height:20px; width:30px;position: absolute; top:10px;left:0px;}
#drapeau_F1:hover {cursor: pointer; }
#drapeau_A1 {height:20px; width:30px;position: absolute; top:10px;left:50px;}
#drapeau_A1:hover {cursor: pointer;}

#dialogbox_entrant{ display: block;width:700px;position: absolute; top:150px;left:480px;  width=100px; height: 300px; background: rgb(0, 47, 43); border-radius:10px; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.911); transition: 0.3s;  z-index: 10; }
#text104 {position: absolute; top: 10px; left:300px; font-size:25px;font-family: Verdana, Geneva, Tahoma, sans-serif ;color:white }
.button_active_entrant {position: relative;top:50px;left:80px;
  width:250px;
  display: inline-block;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 0 16px;
  min-width: 80px;
  height: 38px;
  vertical-align: top;
  text-align: center;
  color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
  background-color: rgb(var(--pure-material-primary-rgb, 0, 77, 70));
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
  font-size: 20px;
  font-weight: 500;
  line-height: 36px;
  overflow: hidden;
  outline: none;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.button_active_entrant:hover {box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.911);  font-size: 22px;}
#dialogboxhead_entrant{ background: rgb(0, 77, 70); border-radius:10px;height: 30px; font-size:19px; padding:10px; color:rgb(255, 255, 255); font-family: Verdana, Geneva, Tahoma, sans-serif ;}
#dialogboxbody_entrant{ background:rgb(0, 47, 43); border-radius:10px;height: 160px;padding:20px; color:#FFF; font-family: Verdana, Geneva, Tahoma, sans-serif ;}
#dialogboxfoot_entrant{ background: rgb(0, 77, 70); border-radius:10px;height: 30px; font-size:19px; padding:10px; color:rgb(255, 255, 255); font-family: Verdana, Geneva, Tahoma, sans-serif ;}
#nombre_tache_entrant {display: none; position: absolute;  top:170px;left:140px;font-size:19px; height: 20px;color:white }
#nombre_tache {display: none; position: absolute; top:200px;left:170px; width:70px;height=50px; font-size:25px;}
#text103 {display: none;position: absolute; top: 185px; left:355px;font-size:14px; height: 50px;width:250px;border-radius: 4px;}
#text103:hover {box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.911);  font-size: 15px;}
/* pour "new project" (dans gestionDiv.js function CustomConfirm */
#nombre_tache_entrant_1 {display: block; position: absolute;  top:100px;left:20px;font-size:19px; height: 20px;color:white }
#nombre_tache_1 {display: block; position: absolute; top:130px;left:60px; width:50px; height=50px; font-size:25px;}
#text103_1 {display: block;position: absolute; top: 110px; left:190px;font-size:15px; height: 60px;border-radius: 4px;}
#text103_1:hover {box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.911); height: 62px; font-size: 15px;}