html {    
  scrollbar-gutter: stable;
  @-moz-document url-prefix() { /*  no need for Firefox   */
    scrollbar-gutter: auto; 
  }
  @media only screen and (hover: none) and (pointer: coarse){/*  no need for mobile devices   */
  scrollbar-gutter: auto; 
  }
}
body { 
  color: rgb(0, 0, 0); /* to be overriden */
  margin: 0px; /* avoid the narrow empty vertical margin on the left side of the whole body */  
 /*  font-family: Arial; */   /* do not define a font size here it makes the autoresize width of the input boxes wrong */  
}
.htmlfull{
  height: 100%;
}
.bodygradient {    
  background: linear-gradient(white, rgb(198, 200, 201));
}
.bodygrey {
  background: linear-gradient(#f0f7f7, rgb(249, 252, 255)); 
}
.wp_daheim {
  background-image: url('/img/wallpapers/daheim.jpg'); 
  background-attachment: fixed; 
  background-size: cover;
  overflow-x: hidden;
}
.wp_create {
  background-image: url('/img/wallpapers/create.jpg'); 
  background-attachment: fixed;
  background-size: cover;
}
.wp_rmalist {
  background-image: url('/img/wallpapers/rmaliste.jpg'); 
  background-attachment: fixed;
  background-size: cover;
}
.wp_rma {
  background-image: url('/img/wallpapers/rma.jpg'); 
  background-attachment: fixed; 
  background-size: cover;  
}
.wp_suche {
  background-image: url('/img/wallpapers/suche.jpg');
  background-attachment: fixed;
  background-size: cover;
}
.wp_param {
  background-image: url('/img/wallpapers/param.jpg');
  background-attachment: fixed;
  background-size: cover;  
}

form.formulaire > div {
  display: flex;   
}

.formulaire { 
  
  /* --------- fieldset1 -> Daheim, RMA liste, Suche ; fieldset 2 -> RMA page, Parameters -----*/
  width: 1360px; /* en px mieux que 72% ? largeur du formulaire global (et fieldset !)par rapport à l'ecran, à voir apres */              
  margin: 115px auto auto auto;
  font-family: Arial;
  #calc { /* hidden on the page, only for measurement purpose */
  font-size: 16px; /* not necessary (by default) - highlight it must have the same font as the original */
  font-family: Arial ;
  margin: 0;
  padding: 0;
  position: absolute;
  z-index: -5;
  height: 0;
  overflow: hidden;
  white-space: pre; 
  }
  input, select {
  background-color: #ffffff; /* couleur des champs input texte area affichage donnees */
  border:1px solid #aca7a7;
  border-radius: 6px;  
  padding: 2px 2px 2px 4px; /* important pour la hauteur des cases */
  }
  .withbg select, .withbg input * { 
    font-size: 14px;
  }
  textarea {
  resize: vertical;
  min-height: 60px ;
  max-height: 2000px;
  height:60px;
  background-color: #ffffff; /* couleur des champs input texte area affichage donnees */
  border:1px solid #c2bbbb;
  border-radius: 3px;
  padding: 4px;   
  }
  textarea.kommentar {
  height:20px; 
  margin: 0px; 
  min-height: 20px;
  max-height: 800px;
  color:#272626;   
  }
  textarea:hover {
    border:1px solid #43598d; 
  }
  fieldset { 
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden; 
    font-family: Arial;
  }  
  legend {
    font-family: Verdana;          
    font-size: 15px; 
    font-weight: normal;      
    padding: 0px 2px;
    cursor:default; 
    user-select: none;
    color:#00362c; /* defaut color, overidden in some fieldsets */     
  }
  .legendbg {  /*  plus d'1h pour trouver comment effacer la line du Fieldset qui apparait en Bg de la légende qd on applique un linear-gradient sur la page; ->faire un autre linear gradient très étroit en fond de Legend */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 3px), rgb(255, 255, 255) calc(50%), rgba(167, 167, 167, 0) calc(50% + 5px));    
  }
}


/* ------------- .fieldset1 : auf Daheim & RMA list ----------------*/

fieldset.fieldset1 { /* pour centrer la table au milieu de l'ecran */ 
  align-items: center; /* centre horizontalement la table dans le fieldset */
  padding: 5px 25px 20px 25px;
  /*  max-width: 1350px; */ /* pour que sa matche la latrgeur de la table (du moins pour l'instant...) */
  margin-top: 50px;  
  font-weight: bold;
  color:#4d4d4d; /* by default, will be overriden */
  border-radius: 4px;
  border-width: 1px;   
  box-shadow: 0px 20px 15px rgba(0, 0, 0, 0.20), 20px 4px 15px rgba(0, 0, 0, 0.15), -20px 4px 15px rgba(0, 0, 0, 0.15);   
  /* height: 50vh;  *//* Optional: this makes the container fill the entire viewport height */
}
.fieldset1.daheim { 
  background: linear-gradient(#f7f5f4, #bdd3c8); 
  border-color: #009c80;   
  thead tr { background-color: #009c80; }  
}
.fieldset1.rmalistbg3 {
  background: linear-gradient(rgb(255, 255, 254), rgb(206, 207, 200));
  border-color: #7e7d74; 
  thead tr { background-color: #7e7d74; } /* Bg of subjects */
  tbody tr { color: #22220c; }  /* color of words list */
  tbody td:nth-child(7) { /* styling Fault description with trailing opacity */
      background: linear-gradient(to right, #22220c 0%, #22220c 82%, rgba(34, 34, 12, 0.8) 85%, rgba(34, 34, 12, 0.5) 90%, rgba(41, 41, 27, 0) 95%); 
  }
}
.fieldset1.rmalistbg7 {
  background: linear-gradient(rgb(252, 252, 252), rgb(178, 202, 201));
  border-color: #5c8680; 
  thead tr { background-color: #5c8680; }
  tbody tr { color: #0a302a; }  
  tbody td:nth-child(7) {
    background: linear-gradient(to right, #0a302a 0%, #0a302a 82%, rgba(10, 48, 42, 0.8) 85%, rgba(10, 48, 42, 0.5) 90%, rgba(20, 48, 44, 0) 95%); 
  }
}
.fieldset1.rmalistbg9 {
  background: linear-gradient(rgb(251, 251, 253), rgb(206, 218, 228));
  border-color: #5d8599; 
  thead tr { background-color: #5d8599; }
  tbody tr { color: #0a222e; }  
  tbody td:nth-child(7) {
    background: linear-gradient(to right, #0a222e 0%, #0a222e 82%, rgba(10, 34, 46, 0.8) 85%, rgba(10, 34, 46, 0.5) 90%, rgba(20, 48, 44, 0) 95%); 
  }
}
.fieldset1.rmalistbg11 {
  background: linear-gradient(rgb(255, 254, 255), rgb(219, 207, 230));
  border-color: #7f7a83;  
  thead tr { background-color: #7f7a83; }
  tbody tr { color: #240713; }  
  tbody td:nth-child(7) {
    background: linear-gradient(to right, #240713 0%, #240713 82%, rgba(36, 7, 19, 0.8) 85%, rgba(36, 7, 19, 0.5) 90%, rgba(53, 9, 28, 0) 95%); 
  }
}
.fieldset1.rmalistbg11.suche {
  margin-top: 20px;
  padding-top: 20px;
}
.fieldset1.rmalistbg13 {
  background: linear-gradient(rgb(253, 252, 252), rgb(236, 213, 213));
  border-color: #807175;  
  thead tr { background-color: #807175; }
  tbody tr { color: #240707; }  
  tbody td:nth-child(7) {
    background: linear-gradient(to right, #240707 0%, #240707 82%, rgba(36, 7, 7, 0.8) 85%, rgba(36, 7, 7, 0.5) 90%, rgba(36, 7, 7, 0) 95%); 
  }
}    
.fieldset1.rmalistbg15 {
  background: linear-gradient(rgb(255, 255, 255), rgb(209, 224, 209));
  border-color: #6a8163;
  thead tr { background-color: #6a8163; }
  tbody tr { color: #112e0b; }  
  tbody td:nth-child(7) {
    background: linear-gradient(to right, #0c2e04 0%, #0c2e04 82%, rgba(12, 46, 4, 0.8) 85%, rgba(12, 46, 4, 0.5) 90%, rgba(12, 46, 4, 0) 95%); 
  }
}
.fieldset1.rmalistbg16 {
  background: linear-gradient(rgb(255, 255, 255), rgb(221, 221, 201));
  border-color: #838374;
  thead tr { background-color: #838374; }
  tbody tr { color: #252904; }  
  tbody td:nth-child(7) {
    background: linear-gradient(to right, #252904 0%, #252904 82%, rgba(37, 41, 4, 0.8) 86%, rgba(37, 41, 4, 0.5) 90%, rgba(42, 46, 4, 0) 95%); 
  }
}
.fieldset1.rmalistbg17 {
  background: linear-gradient(rgb(247, 246, 246), rgb(201, 201, 201));
  border-color: #7a7a7a;  
  thead tr { background-color: #7a7a7a; }
  tbody tr { color: #242424; }  
  tbody td:nth-child(8) {
    background: linear-gradient(to right, #242424 0%, #242424 82%, rgba(36, 36, 36, 0.8) 86%, rgba(36, 36, 36, 0.5) 90%, rgba(36, 36, 36, 0) 95%); 
    margin: 0;
    padding: 0;  
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
    tbody td:nth-child(7) {
    color: #242424 !important; /* to overtake the transparent rule of 7th <td> applied to all other status */
  } 
}
.fieldset1 .styled-table tbody td:nth-child(7) {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
#discover_ek {
  width:550px;
  margin-bottom: 10px;
  color:MidnightBlue;
  font-size:14px;
  border:none; 
  background:transparent;
}

/* ---------- fieldset2 : fieldsets in Create RMA, main RMA page ---------- */
fieldset.fieldset2 {  
  display: flex; 
  flex-wrap: wrap;
  flex-direction: column;                   
  justify-content:space-between;
  width: 100%;  
  margin-bottom: 16px;  
  border-width: 1px;
  border-radius: 3px; 
  legend {
    -webkit-transform: translateY(-2px); /* text shifted up for a bit better lisibility due to dark background */
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);  
    background-color: #e5e9e450; ; 
  }  
}
fieldset.fieldset2.withbg.customer { /* target the customer fieldset of Create RMA, bec of dropdown list of adresses suggestions when unfold  */
    overflow: visible; 
}
fieldset.fieldset2.customer *, fieldset.fieldset2.rmagerat * {
  font-size: 15px;
}
fieldset.fieldset2.rmafehl textarea, fieldset.fieldset2.rmakomm textarea {
  font-size: 15px;
  font-family: Arial; /* alternatif: Verdana avec 14px bien lisible pour les textarea */
}
fieldset.fieldset2 select, fieldset.fieldset2 input[type="text"] { /* added to fieldsets page RMA, not Suche */
  background-color: transparent;
  border: none; 
} 
fieldset.fieldset2 select:hover, fieldset.fieldset2 input[type="text"]:hover {
  background-color: #f1f1f1;  
  border-radius: 4px;
}
fieldset.fieldset2 input[type="text"]:focus, fieldset.fieldset2 select:focus { 
  background-color:#fcfcfc;
}
fieldset.fieldset2.withbg select, fieldset.fieldset2.withbg input[type="text"] { /* added to fieldsets page Create RMA, params and Suche*/
  background-color: rgb(250, 249, 249);
  border: 1px solid rgb(202, 202, 202);    
}
.transition_box {
  transition: all 0.3s ease-out;
}
#rmarefkunde, #EKemail {
  min-width: 80px;    
}
#EKinfo_vorname, #EKinfo_nachname {
min-width: 60px;
}
#handleradressnr, #EKinfo_pzl, #EKinfo_ort, #rmaserialnr, #handleremail, #EKinfo_strasse  {
  min-width: 40px;
}   
#EKemail:hover, #handleremail:hover { 
transition: all 0.1s ease-out;
  background-color: rgb(248, 246, 243);
  color: #004f94;
  border-radius: 8px;
}

fieldset.fieldset2.customer { 
  background-color: #e7eaee;
  padding: 10px 20px 7px 20px;   
  border-color: #55746e; 
  legend { color:#2b5850; } 
  .address { 
    color: #1b381b;
  }
  .name_hdl, .name_ek {
    color: #090d11;
  }  
  .email {
    color: #093f85;   
  }
  .email:hover {
    cursor: pointer;
  }
  #rmakunde {
    display: block; 
    margin-top: 2px; 
    margin-bottom: 5px;
    margin-right: 10px;
  } 
  #handleradressnr {   
    display:block; 
    padding-left: 5px;
    margin-top:2px;
    color: #6b0d15;      
  }
  #karte1, #karte2 {
    padding: 0px 1px 0px 0px;     
    background-color: #f8f4f4;
    border: 1px solid rgb(168, 149, 149);
    border-radius: 6px;
    margin-right: 5px;    
  } 
  #karte1:hover, #karte2:hover {     
    background-color: #ffffff;
    border: 1px solid rgb(108, 117, 141);      
  }     
  #rmaanrede {
    min-width: 40px;
  }   
  #EK_select {
    min-width: 80px;
    color: #4a2d52;
  }
  #EK_select:hover {
    background-color: #fdfafa;
  }  
  .contact_hdl {    
    color: #27303d;
  }
  .line1 {   
    width:100%; 
    height:2px;
    border-bottom: 1px solid #8d96a3;
    margin: 0px auto 10px auto;
  }
}
fieldset.fieldset2.rmagerat { 
  background-color:#e9ebe3; 
  padding: 10px 20px 7px 20px;  
  border-color: #455016;
  legend { color:#363d12; }
  #marque, #rmamodell, #rmafarbe {    
      color: #002658;
  }
  #rmafarbe {
    min-width: 70px;
  }
  #rmaserialnr { 
    color: #0e360e;
  }
  #rmagarantie { 
    color: #6b0d15;
    padding-left: 4px;
    padding-right: 5px;    
  }
  #rmarefkunde {
    color:#1a1a03;
  }
  #kauf {
    display:block; 
    margin-top:2px; 
    margin-left: 2px;
    color:#251b30;
    width: 60px;
    padding-left:0 !important;
    background-color: #eef0f3;
    border: solid 1px rgb(190, 175, 175);     
    font-size:13px
  }
  #kauf:hover {
    background-color: #f5f8fa;
    border: solid 1px #8f7f7f;
    margin-top: 2px;
  }
  #rmastatuts {
    width: 150px;
    font-size: 14px;
    background-color: #f3f3f3;
    color: #122541;   
    border: 1px solid rgb(185, 185, 185)  
  }
  #rmastatuts:hover {
    background-color: #fffcfc;
    border: 1px solid rgb(218, 218, 218);  
  }
  input[type="date"] { 
    background: rgb(250, 252, 255);
    border: 1px solid #cdc9e2;
    color: rgb(37, 37, 37); 
    font-size:14px;
    padding-top:2px;
    padding-bottom: 2px;
    @-moz-document url-prefix() { /* with FF we don't need the extra padding (it is originally ok) */
      padding-top:0px ;
      padding-bottom: 0px;
    }
  } 
  .icon_copy {  
    display: inline-block; /* to allow height of span autofit to height of the content (svg) */
    margin-right:25px;    
    }              
  .icon_copy:hover {           
    background-color: #f1faff;   
    border-radius: 6px;                
  }
  .icon_copy:active { 
    background-color: #f0ecc8;
  }
  #wrapkfstn { /* sales infos opacity at start up in between none s/n (0.5) and s/n fund (1) then ramp up/down with JS  */
    display: inline-block; 
    margin: 0px 10px 5px 10px;
    opacity: 0.8;
    }    
  }
fieldset.fieldset2.rmafehl { 
  background-color:#c2d4e7; 
  padding: 1px 7px 7px 7px;
  border-color: #46566d; 
  legend { color:#28313d;}   
}
fieldset.fieldset2.rmafehl.half {   
width:auto;  
}
fieldset.fieldset2.rmafehl.half.rep  {
  margin-left: 6px;   
}
fieldset.fieldset2.rmakomm { 
  background-color: #cacaca;
  padding: 1px 7px 7px 7px;
  border-color: #686767; 
  legend { color:#292929;}  
}
fieldset.fieldset2.rmaadmin { 
  background-color: #d7dbdf;
  flex-direction: row;   
  padding:12px 50px;
  border-color: #53372f;
  legend { 
    color:#553831;
  } 
  #belegnummer {
    display:block; 
    margin-top:2px; 
    border-radius:4px;
    color: #1a1a1a;
    background-color:#f5f0f0;
    border: 1px solid rgb(173, 165, 165);
  }
   #belegnummer:hover {
    background-color: #fdfcf5 !important;
  }
  #belegnummer:focus {
    background-color: #ffffff !important;
  }
}
fieldset.fieldset2.rmadocs { 
  background-color: #dfe2e2;
  padding: 15px 20px;  
  height:auto; 
  border-color: #3e5f5a;
  legend { color:#233532;} 
  }
fieldset.fieldset2 .block { /* to keep the label on top of the input box, when exists */
  display:block;
}
fieldset.fieldset2 .marge { 
  margin-left:-2px;
}
fieldset.fieldset2 .ce { 
  text-align: center;
}

/* ---------- END of fieldset2 : fieldsets in Create RMA, main RMA page ---------- */


/* ------------------------------------------------------- PAGE : DAHEIM -----------------------------------------------------*/
.bodydaheim {     
  background: linear-gradient(white, rgb(135, 138, 139));
}
.contient3table {
  display:flex; 
  justify-content:space-between; 
  /* margin:auto; */
}
.styled-table2 {
  width: 300px;
  border-collapse: collapse;
  font-size: 15px;
  max-height: 300px;
  border:1px solid #838383;   
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  color: #000000;
  font-weight: normal ;
  user-select: none;
  thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
  }
  th, td { padding: 6px 18px; /* padding top&bottom + right&left */}
  tbody tr {
    border-bottom: 1px solid #dddddd;
    pointer-events:none;
  }
  tbody tr:nth-child(even) {
      background-color:Snow  }
  tbody tr:nth-child(odd) {
    background-color:WhiteSmoke   ;}
  tbody tr:last-of-type {
    border-bottom: 3px solid #009879;}
}
/*  met des couleurs sur le texte */
.gradacc { 
  background: linear-gradient(to right, #00504cff 0%, #00504cff 84%, rgba(0, 80, 76, 0.8) 88%, rgba(0, 80, 76, 0.5) 92%, rgba(0, 80, 76, 0) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.gradrec { 
  background: linear-gradient(to right, #364d8dff 0%, #364d8dff 84%, rgba(54, 77, 141, 0.8) 88%, rgba(54, 77, 141, 0.5) 92%, rgba(0, 0, 0, 0) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.gradkva { 
  background: linear-gradient(to right, #661515ff 0%, #661515ff 84%, rgba(102, 21, 21, 0.8) 88%, rgba(102, 21, 21, 0.5) 92%, rgba(0, 0, 0, 0) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.gradfix { 
  background: linear-gradient(to right, #1a5f17ff 0%, #1a5f17ff 84%, rgba(25, 95, 23, 0.8) 88%, rgba(25, 95, 23, 0.5) 92%, rgba(0, 0, 0, 0) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.gradready { 
  background: linear-gradient(to right, #064904ff 0%, #064904ff 84%, rgba(6, 73, 4, 0.8) 88%, rgba(6, 73, 4, 0.5) 92%, rgba(0, 0, 0, 0) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.gradrepa { 
  background: linear-gradient(to right, #602b92ff 0%, #602b92ff 84%, rgba(96, 43, 146, 0.8) 88%, rgba(96, 43, 146, 0.5) 92%, rgba(0, 0, 0, 0) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.gradship { 
  background: linear-gradient(to right, #201e1eff 0%, #201e1eff 84%, rgba(32, 30, 30, 0.8) 88%, rgba(32, 30, 30, 0.5) 92%, rgba(0, 0, 0, 0) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.grad {
  margin: 0;
  padding: 0;  
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.styled-table5 { 
  margin:20px auto;
  border-collapse: collapse;
 /*  font-family:Arial; */
  font-size: 16px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.35);
  color: #000000; 
  user-select: none; 
  th, td {
    width: 45px; 
    padding: 5px 14px; 
    text-align: center;   
    font-weight: normal;
  }
  thead tr {
    width: 45px;
    background-color: #648881; 
    color: #ffffff; 
    text-align: center;
  }
}
.fieldset1.bgtable {   
  width: 20%;  
  margin-bottom: 50px;  
  border-color: #009c80;   
  background: linear-gradient(white, #92a4c5);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.35);
}
.fieldset1.bgtable.tabl1{
  background: linear-gradient(rgb(245, 245, 242), rgb(197, 197, 175));
  box-shadow: 0px 20px 15px rgba(9, 19, 37, 0.20), 20px 4px 15px rgba(9, 19, 37, 0.20), -20px 4px 15px rgba(9, 19, 37, 0.20);   
}
.fieldset1.bgtable.tabl2 {     
  background: linear-gradient(rgb(244, 242, 245), rgb(208, 201, 214));
  box-shadow: 0px 20px 15px rgba(63, 46, 10, 0.20), 20px 4px 15px rgba(63, 46, 10, 0.20), -20px 4px 15px rgba(63, 46, 10, 0.20);   
}
.fieldset1.bgtable.tabl3 {   
  background: linear-gradient(rgb(245, 242, 244), rgb(214, 201, 208));
  box-shadow: 0px 20px 15px rgba(33, 6, 37, 0.20), 20px 4px 15px rgba(33, 6, 37, 0.20), -20px 4px 15px rgba(33, 6, 37, 0.20);
  padding-bottom: 10px;
  padding-top: 10px;
}
#aj {
  background-color:white;
  border: 1px solid rgb(119, 119, 65);
  border-radius: 4px;
  padding: 2px 5px;
}
#aj:hover {
  border: 1px solid rgb(23, 35, 202);
  color: rgb(0, 0, 92);
  background-color: rgb(249, 250, 238);
}
.history {
   background-color:rgb(246, 255, 250) !important;  
}
.history:hover {
  background-color:rgb(244, 248, 255) !important;  
}
.windowmodal {
  border: 2px solid rgb(93, 110, 93);
  margin: 150px auto; 
  width: 1100px; 
  background: white; 
  animation: fadeInAnimation ease 0.3s; /* fade-in affichage du tableau de nb de RMAs par mois sur Daheim */
  animation-iteration-count: 1;
}
.bcm {
 background-color: #b5c4c1; 
}
.modal-header3 {  
  font-family:Verdana;
  padding: 6px 16px;
  height: 30px;
  line-height: 30px; /* center vertically */
  background-color: #c9daba;
  font-size:14px;
  font-weight:bold; 
  text-align:center;
  color:rgb(65, 65, 65); 
  user-select: none; 
}
.legendbg2 {  
  background: linear-gradient(rgba(44, 44, 44, 0) calc(50% - 10px), rgb(255, 255, 255) calc(50%), rgba(146, 146, 146, 0) calc(50% + 4px));    
}
#clos:hover {
  cursor: pointer;
}
footer {
  user-select: none;
}
footer .ftxt1 {
  text-align: center; 
  font-size:13px; 
  color: rgb(99, 99, 98); 
  margin-top:10px
}
footer .ftxt2 {
  margin:10px auto 30px auto;
  text-align:center; 
  font-size:14px;  
  a { color: rgb(85, 120, 155) }
}

/* ------------------------------------------ END OF PAGE : DAHEIM -------------------------------------------------------------*/



/* ---------------------------------------------- PAGE : CREATE A RMA ----------------------------------------------------------*/
.changerma:hover .andererma_hovertext{
  visibility: visible;
  transition-delay:0.2s;
}
.andererma_hovertext {
  visibility: hidden;
  width: auto;  /*   font-size:14px; */
  background-color: rgb(88, 124, 103);
  border:1px solid #755858;
  color: #fff;
  text-align: center;
  padding: 6px ;
  /* Position the tooltip */
  position: absolute;
  margin-top: -35px;
  margin-left: -200px;
  z-index: 1;
}
.clear {
  color:rgb(90, 74, 74);
  background-color: rgb(255, 248, 246) !important; 
  border-width: 1px;
  border-color: rgb(179, 151, 151);
  border-radius: 4px;
  font-size: 13px !important;
  user-select: none;  
  padding:3px 5px;
}
form.formulaire input.buttonvalidation {     
  font-weight:bold;
  color:rgb(85, 65, 57);
  font-size: 15px;       
  background-color: #f5f6f8;
  padding: 7px 25px; 
  /*  height : 40px ; */
  margin:auto;  
  border:1px solid #ad728b;   
  border-radius: 4px;
  font-family: Arial           
}
form.formulaire input.buttonvalidation:hover { 
  background-color: #f6f7f3;         
  border-color: #315029;
}
form.formulaire input.buttonvalidation.deux { /* buttons KVA accepted, schicken etc other bg color than update */
   background-color: #f3f3ee;
   padding: 7px 15px;   
}
form.formulaire input.buttonvalidation.deux:hover { /* buttons KVA accepted, schicken etc other bg color than update */
   background-color: #e9f3ea;  
}
.labels.docs {
  position: absolute;
  margin-top: 1px;   
}

/* ---------------------------------------------- END OF PAGE : CREATE A RMA --------------------------------------------------*/



/* ------------------------------------------------------ PAGE : RMA ----------------------------------------------------------*/
.flechecontainer { 
  margin: 102px auto auto auto;  
  height: 45px; /* define a larger container (and center the arrow inside it) to enlarge the active clicking zone */
  width: 45px;
  text-align: center;
}
.flechecontainer .fleche {
  height:100%;
  margin:auto;
}
.flechecontainer:hover {
  cursor: pointer;    
  .fleche path {
  fill: #669187;    
  }    
} 
.main_title:hover .title3hovertext {
    visibility: visible;
    transition-delay: 0.22s; /*  slight delay to avoid the sporadic rgb(104, 125, 145) artefact tiny rectangle at start up while the info of technician is not yet loaded */
    animation: fadeInAnimation ease-in 0.40s;            
}                
.title3hovertext {
  visibility: hidden;
  width: auto;  
  font-size:13px;
  background-color: rgb(104, 125, 145);
  border-radius: 4px;
  color: #fff;
  /* text-align: center; */
  padding: 6px 8px;
  /* Position the tooltip */
  position:absolute;
  top:155px; 
  z-index: 1;
}
.ohnearrow {  /*  makes the select arrow disappear on certain Select boxes of the RMA page */
  -moz-appearance: none;    /* for Firefox */
  -webkit-appearance: none;   /* for Chrome */
}
.ohnearrow:hover {
  -moz-appearance: auto;    /* for Firefox */
  -webkit-appearance: auto;   /* for Chrome */
}
.iconetel {      
  display:  inline-block; /* translateY only works with block  */            
   height: 23px;
   margin-right: 5px;
   margin-left: 5px;
  -webkit-transform: translateY(4px);
  -ms-transform: translateY(4px);
  transform: translateY(4px);
}
#snr_click:hover { /* fiche RMA, pour mettre en valeur le clique sur le label serial-nr pour avoir l'historique du sn */
  background-color:rgb(196, 226, 236);
}
#EK_zeigen:hover  {
  background-color:rgb(163, 200, 214);
  transition-delay:0.1s;
}
#EK_zeigen:hover .EKzeigen_hovertext {
  background-color:rgb(109, 162, 182);
  transition-delay:0.2s;
  visibility: visible;
}
.EKzeigen_hovertext {
  visibility: hidden;
  width: auto;           
  font-size:13px;           
  color: #ffffff;
  text-align: center;
  padding: 6px ;          
  /* Position */
  position: absolute;
  margin-top: -15px;
  margin-left: 30px;
  z-index: 1;           
}
/* .iconetel:hover {       
  border-color: rgb(108, 121, 161);     
  /* background-color: #e4e6f7;   */   

form.formulaire input.buttonsverwalt {        
  font-weight:normal;
  color:rgb(40, 44, 39);
  background-color: #f7fcf8;
  padding: 7px 10px; 
  margin-top:auto; 
  margin-bottom:auto; 
  border:1px solid #ad728b;    
  border-radius: 4px;  
}
form.formulaire input.buttonsverwalt:hover { 
background-color: #fffff9;   
border-color: #315029; 
color:rgb(50, 54, 49);
}  

.click_sn:hover .snhovertext{
  visibility: visible;
  transition-delay:0.4s;
}
.snhovertext{
  visibility: hidden;
  width: auto;
  margin-top: 8px;
  margin-left:-100px ;
  font-size:13px;
  background-color: rgb(103, 150, 121);
  border:1px solid #755858;
  color: #fff;
  text-align: center;
  padding: 5px ;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.erhalten_meldung:hover .meldunghovertext{
  visibility: visible;
  transition-delay:0.4s;
}
.meldunghovertext{
  visibility: hidden;
  width: auto;
  margin-top: -50px;
  margin-left:-350px ;
  font-size:13px;
  background-color: rgb(103, 150, 121);
  border:1px solid #755858;
  color: #fff;
  text-align: center;
  padding: 5px ;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}
.hover_akt:hover .akthovertext{
  visibility: visible;
  transition-delay:1s;
}
.akthovertext{
  visibility: hidden;
  width: auto;
  margin-top: -75px;
  margin-left:-210px ;
  font-size:13px;
  background-color: rgb(146, 170, 156);
  border:1px solid #755858;
  color: #fff;
  text-align: center;
  padding: 5px ;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}
#bemerkungen:hover {
  background-color: rgb(247, 235, 252);
  color:#005157 !important;
}
.enlargeCB2 {
  padding: 12px 3px;
  display: inline-block;
}
/* autocomplete expressions labels change on hover textarea legends */
fieldset .detect .lghover2 {
  display:none;
}
fieldset .detect:hover .lghover1 { 
  animation: fadeInAnimation ease 0.2s; 
  display:none;
}
fieldset .detect:hover .lghover2 {
  animation: fadeInAnimation ease 0.2s; 
  display:inline;
  background-color:#dfebf5 ;
  color:#112504;
  font-weight: normal;
  border: 1px solid #7e7878;
  border-radius: 4px;
  margin: -1px; /* to avoid fiedlset shifting due to extra border created*/
  font-size: 13px;
  margin: auto; /* resize the space to fit the new text (avoid line break) */
  padding: 0 6px;
}
fieldset .repa .lghover4 {
  animation: fadeInAnimation ease 0.2s; 
  display:none;
}
fieldset .repa:hover .lghover3 { 
  animation: fadeInAnimation ease 0.2s; 
    display:none;
}
fieldset .repa:hover .lghover4 {
  animation: fadeInAnimation ease 0.2s; 
  display:inline;
  background-color:#dfebf5 ;
  color:#112504;
  font-weight: normal;
  border: 1px solid #7e7878;
  border-radius: 4px;
  margin: -1px; /* to avoid fiedlset shifting due to extra border created*/
  font-size: 13px;
  margin: auto; /* resize the space to fit the new text (avoid line break) */
  padding: 0 6px;
}
fieldset.fieldset2 .boxcutright { 
  border-radius: 6px 0px 0px 6px;
  margin-top:2px;  
  /* margin-right:-2px; */
}
fieldset.fieldset2 .boxcutleft {
  border-radius: 0px 6px 6px 0px;
  margin-top:2px;  
 /*  margin-left:-2px; */
}
fieldset.fieldset2 .boxcutboth {
  border-radius: 0px; 
  margin-top:2px;
}

/* styling the country flags on dealer and EK at main RMA page */
.fieldset2.customer {  
  .flag {   
  opacity: 0.9;
  margin-left:-2px; 
  border-left:none; 
  border-radius: 0px 6px 6px 0px;
  }  
  #EKinfo_land {
    width: 44px;
  }
  #handlerland {
   text-align:center; 
   width: 20px;
  }
}  
.error_title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 430px;  
  height: 30px;
  color: #422320;
  font-size:18px;
  padding: 6px;
  border: solid;
  border-color: #a5484c;
  border-width: 3px;
  border-radius: 6px;
  background-color: #e1e1f533;
  margin-top: 50px ;
  margin-bottom: 20px;
  margin-left:auto ;
  margin-right: auto;
  user-select: none;
}    
/* The Modal for the autocomplete expressions */
 .modal-content1 {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  margin-top:120px;
  padding: 0;
  border: 1px solid #888;
  width: 800px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.4s
}  
/* Add Animation */
@keyframes animatetop {
  from {top: -300px; opacity: 0}
  to {top: 0; opacity: 1}
} 
/* Add quick preview thumbmails after selecting files to be uploaded */
.previewthumb { 
  animation: fadeInAnimation2 ease 3s; 
  animation-iteration-count: 1; 
  height: 90px;
  opacity: 0.35;
  margin-top: 20px;
  margin-right: 20px;  
} 
.mp {
  margin-bottom: 15px;
}
@keyframes fadeInAnimation2 {
  0% {opacity: 0; }
  40% {opacity: 0.2; }  
}
/* --- Modal Thumbnail add a comment on thumbnails--*/
#modthumb {
  display: none; 
  position:absolute; 
  width:130px; 
  height:22px;
  z-index:2
}
#modthumbframe {
  margin: 0 auto; 
  background: #fffef8ff;
  border: none; 
  border-radius: 0; 
  padding:3px; 
  opacity: 0.90;
}
.xcloseth {
  color: #aaaaaa;
  float: right;  
  font-weight: bold;
  cursor:pointer;
  color: #3D5872;
  font-size: 15px;
  padding:5px
}
#commenthumb {
  font-size:13px; 
  color:rgb(20, 24, 27); 
  border: 1px solid #47473e;
  padding:4px
}
#clickedcom {
  font-weight:bold;
  color:rgb(11, 12, 71);
  cursor: pointer;
}
/* - Modal Thumbnail display the comment --*/
#modalthumbcom {
  display: none; 
  position:absolute; 
  width:300px;
}
.commentpic {/*  create the modal tootip */
  width:auto;
  font-size:13px; 
  color:rgb(12, 14, 15);
  text-align: center;
  border: 1px solid #012b00;
  border-radius: 4px; 
  background:rgb(251, 253, 255);
  padding: 3px 5px;
  position: absolute;
  margin: 0 auto;   
  opacity: 0.95;
}
.commentpic::after { /* create the little pointing arrow */
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%; 
  transform: translateX(-50%); /* had to resort to this line bec with only left:50% the triangle was not perfectly centered (shifting sligthly L or R acc. to the width of the pic */
  margin-top: -7px;
  border-width: 7px;
  border-style: solid;
  border-color: transparent transparent #013d00 transparent;
}
/* ------  Modal Karte -------  */
#modinfokarte {
  margin: 113px auto; 
  width: 68%;background: white;
  border: none; 
  border-radius: 0;
}
#here {
  width:100%; 
  height:75vh; 
  border:none;
}
#endereco {
  margin-top:8px;
  margin-left: 15px;
  float:left;
  font-size: 14px;
  font-weight: normal;
  color: #16314b;
}
.xclose {
  color: #aaaaaa;
  float: right;
  font-weight: bold;
  cursor:pointer;
  color: #3D5872; 
  font-size: 24px;
}
#telChange {
  cursor: pointer;
}

#div_mull {
  display: flex;
  justify-content:center;
  align-content: center;                        
  margin-left: auto;
  margin-bottom: auto ;                                         
  width: 100%;                    
  width: 42px;
  height: 42px;                                                
  border: 1px solid #7e7878;
  border-radius: 5px;
  background-color: #e1e9f3;
}

.blinktext {
  font-size: 13px;
  color: #965500;
  animation: blinktexte 1s infinite;
}
@keyframes blinktexte {
  0% {
      opacity: 1;
  }
  10% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

/* ---------------------------------------- END OF PAGE : RMA ---------------------------------------------*/



/* ---------------------------------------- PAGE : PARAMETERS ---------------------------------------------*/
/* Fieldsets colors in parameters.php */
fieldset.fieldset2.handler {
  border-color: rgb(88, 90, 90);
  background-color: rgb(222, 228, 228);  
}
fieldset.fieldset2.gerate {  
  border-color: rgb(133, 125, 56); 
  background-color: rgb(236, 234, 213);  
}
fieldset.fieldset2.marke {
  border-color: rgb(57, 105, 34);
  background-color: rgb(212, 224, 206);  
}
fieldset.fieldset2.abwes {
  border-color: rgb(151, 88, 70);
  background-color: rgb(233, 220, 216); 
}
fieldset.fieldset2.sonstiges {
  border-color: rgb(180, 111, 149);
  background-color: rgb(236, 222, 230);  
}
fieldset.fieldset2.admintool {
  border-color: rgb(149, 149, 190);
  background-color:  rgb(228, 228, 241);
}
fieldset.fieldset2.fieldactif {
  background-color: #dbd9d9d5; 
  border-color: #007560;
}
/* End */
form.formulaire input.buttonlosch {    
 /*  font-size: 14px ; */
  font-weight: normal;
  padding: 3px 6px;
  color:rgb(80, 64, 57);
  background-color: #f7f4f4; 
  border-width: 1px;
  border-color: rgb(179, 151, 151);
  border-radius: 4px;
}
form.formulaire input.buttonlosch:hover {
  background-color: rgb(233, 207, 207);
  border-color: rgb(156, 122, 122);                  
}
.labels_speech {
  color: rgb(32, 31, 31); 
  font-weight:normal;  
  font-size: 12px;   
  font-family: Verdana;
  user-select: none;                                
}
.text1 {
  color: rgb(60, 60, 60); 
  font-weight:normal;  
  font-size: 13px;   
  font-family: Verdana;
  user-select: none;                                                
}  
.drag-list {
  list-style: none;
  padding: 0;
  width: 212px;
}
.drag-item {
  font-weight: normal;
  color:#242424; 
  background-color: #f5faff;
  border:1px solid #727272;  
  border-radius: 4px;    
  width: 200px;
  padding: 6px;
  margin-bottom: 5px;
  cursor: move;
} 
.nurintern {
background-color:rgb(223, 245, 179)
}

.enlargeCB {
  padding: 6px 1px 6px 5px;
  display: inline-block;
}
.settings_explained {
  display: flex;
  justify-content:center;                 
  margin: 30px auto;                               
  width:fit-content;       
  background-color: rgb(255, 253, 253);                                       
  border: 2px dotted #687067;
  border-radius: 5px;
  font-size: 14px;
  color:#3d72a7;
  padding: 15px 50px;
  color:rgb(38, 46, 39);
}
/* toggle switch message absence - The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 49px; 
height: 18px; 
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
#abwesendheit {
  font-family: Georgia;
  margin-bottom:10px; 
  white-space:pre-line; 
  width:60%;
  font-size: 14px;
}
.color_checkbox {
  font-size: 14px;
  font-weight:normal ;
  color:rgb(0, 38, 88)
}
.beispiel {
  font-size: 13px;
  font-weight:normal ;
  color:rgb(0, 38, 88)
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 14px;
background-color: #a2afaa;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {
  background-color: #b17781;
}
input:focus + .slider {
  box-shadow: 0 0 1px #b17781;
}
input:checked + .slider:before {
  -webkit-transform: translateX(30px);
  -ms-transform: translateX(30px);
  transform: translateX(30px);
}
.slideback {
  transition: 2s;
}

.loaderanalyse {
  display: none;
  top: 40%;
  left: 60%;
  position: fixed;
  transform: translate(-50%, -50%);
  z-index: 3;  
  border: 1px solid #77343c;
  border-radius: 4px;
  background-color: #e6e1d4;
  padding: 8px 20px;
}
.waitingtext {
  font-size: 17px;
  font-weight:bold;
  color:#004079;
  animation: clignote 1s infinite .3s;
}
@keyframes clignote {
  25% {  
    opacity: 0.2;
  }
  50% {   
     opacity: 0.5;
  }
  75% {  
     opacity: 0.7;
  }
  100% {   
     opacity: 1;
  }
}
/* Excel Sheet import for s/n update: the Modal */
.modal-content2 {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  margin-top:250px;
  padding: 0;
  border: 1px solid #888;
  width: 470px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.4s
}
.modal-header {
  padding: 10px 16px;
  height: 50px;
  background-color: #c9daba;
  color: #353535;
}
.modal-body {
  height: 70px;
  padding: 2px 16px;
}
.modal-footer {
  padding: 10px 16px;
  background-color: #c9daba;
  color: #2c2c2c;
  height: 48px;
}
.close:hover, .close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
/* the Modal Verwalten von Benutzerkonten */
.modal-content3 {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  margin-top:160px;
  padding: 0;
  border: 1px solid #888;
  width: 1140px;
  height:auto;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.4s;
}
.modal-header3-title1 {
  color: #272626;
  font-size: 18px;
  margin-left: 360px;
  user-select: none;
}
.modal-header3-title2 {
  float:right;
  color: #303133;
  font-size: 12px;
  user-select: none;
}
.modal-body3 {
  height:auto; /* height of the body modal table Benutzerverwaltung */
  padding: 30px 30px;
  margin-top: 5px;
  margin-bottom: 10px;
}
.modal-footer3 {
  padding: 10px 16px;
  background-color: #c9daba;
  color: #25262b;
  height: 30px;
}
/* table of Benutzerverwaltung */
.styled-table4 { 
  width: 100%;
  margin-top: 30px;
  border-collapse: collapse;
  font-family:Verdana;
  font-size: 14px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  color: #000000;
  font-weight: normal;
  user-select: none; 
  thead tr, th {
    background-color: #648881;
    color: #ffffff;
    font-weight: normal;
    text-align: left;
    user-select: none; 
  }
  th, td { padding: 6px 18px; /* padding top&bottom + right&left */}
  thead th:nth-child(1) {
    padding: 6px 4px;
    text-align: center;    
  }
  thead th:nth-child(2) {
    padding: 6px 4px;  
    text-align: center;
  }
  tbody tr {
    border-bottom: 1px solid #dddddd;}
  tbody tr:nth-child(even) {
      background-color:Snow  }
  tbody tr:nth-child(odd) {
    background-color:WhiteSmoke   ;}
  tbody tr:last-of-type {
    border-bottom: 3px solid #009879;}
}
/* buttons on modal Benutzerverwaltung */
.userchg {
  margin-right: 20px;
}
input.buttonsend2 {    
  font-size: 14px ;
  padding: 3px 6px;
  border-width: 1px;
  border-radius: 4px;
}
.hovere:hover {
   color:rgb(29, 23, 21); 
  background-color: #e2e2e2;
  border-color: rgb(0, 25, 248);
}

.logerror {
  color:rgb(78, 67, 0);
  background-color: #f0f1e8; 
  border-color: rgb(150, 151, 86);
}
.adduser {
  color:rgb(23, 82, 11);
  background-color: #e8f1ea; 
  border-color: rgb(97, 151, 86);
}
.deluser {
  color:rgb(82, 22, 11);
  background-color: #f1e8e8; 
  border-color: rgb(145, 63, 63);
}
.passchg {
  color:rgb(82, 11, 70);
  background-color: #f7f0f6; 
  border-color: rgb(127, 86, 151);
}
.resetcntr {
  color:rgb(26, 25, 25);
  background-color: #f0f0f0; 
  border-color: rgb(122, 122, 116);
}
.useropa {
  opacity: 0.4;
}
.exite { 
  font-size: 14px;
  padding: 3px 30px;
  color:rgb(17, 34, 126);
  background-color: #e8ecf1; 
  border-width: 1px;
  border-color: rgb(77, 112, 182);
  border-radius: 4px;
}
.exite:hover { 
  color:rgb(88, 53, 41); 
  background-color: #e2e2e2;
  border-color: rgb(80, 0, 37);
}
.neu1 {
  color:rgb(26, 25, 25);
  background-color: #fdf1e2; 
  border-color: rgb(75, 75, 72);
}
.neu2 {
  color:rgb(26, 25, 25);
  background-color: #fff0fb; 
  border-color: rgb(75, 75, 72);
}
.neu1:hover .neu2:hover{  
  background-color: #fafac8 !important; /* override the original */
}
/* arroyDown pour simuler une fleche de menu Select dans un Input field   */ 
.arrowDown {
  position: relative;
  display: inline-block;    
}
.arrowDown::after {
  position: absolute;
  content: " \02C5";
  font-weight: normal;
  font-size:14px;
  color: rgb(36, 36, 36);
  -webkit-transform:scale(1.2,0.7); /* Safari and Chrome */
  -moz-transform:scale(1.2,0.7); /* Firefox */
  -ms-transform:scale(1.2,0.7); /* IE 9 */
  -o-transform:scale(1.2,0.7); /* Opera */
  transform:scale(1.2,0.7); /* W3C */
  bottom: -5px;
  left: 340px;
  height: 20px;
  width: 20px;
}
.ntinp {
  width:321px;
  padding-left: 28px !important; /* otherwise is overriden by form.formulaire input, form.formulaire select { */
  margin-left: -5px;
  margin-top: 4px;
}
.seinput {
  width: 353px;
  padding-left: 28px !important;
  margin-right: 0px;
  margin-top: 4px; 
}      


/* ---------------------------------------- END OF PAGE : PARAMETERS ---------------------------------------------*/



/* ---------------------------------------- PAGE : RMA LISTE -----------------------------------------------*/ 

#sort_ruck:hover, #sort_repnr:hover{ /* Hover th verschickt de rma liste statut 17 */
  background-color:#24531d;
}
/* ---------------------------------------- END OF PAGE : RMA LISTE -----------------------------------------------*/ 


/* ---------------------------------------- PAGE : SUCHE -----------------------------------------------*/ 

#table_result {
  margin-top: 15px;
  display: flex;   
}     
.id_tbody_suche {  
  tbody tr:hover {
    background-color:LightGray; 
    cursor: pointer;                    
  }                                     
}
.sucheselects {
  display: inline-block;
  margin-right: 5px; 
  margin-bottom: 5px;
}   
.sucheresbg {
  text-decoration: none; 
  color: inherit; 
  background-color:transparent; 
  border: none;
}

/* ---------------------------------------- END OF PAGE : SUCHE -----------------------------------------------*/



/* ---------------------------------------- PAGE : EMAILS -----------------------------------------------*/

#ecran_email_modif {
  animation: fadeInAnimation ease-in 1.7s; /* pour un bon fade-in carTinyMCE à charger */
  animation-iteration-count: 1;
}
@keyframes fadeInAnimation {
  0% {opacity: 0; }
  100% {opacity: 1; }  
}
form.formulaire input.buttontest {    
  /* font-size: 14px ; */
  font-weight: bold;
  padding: 6px;
  color:rgb(80, 64, 57);
  background-color: #e8ecf1; 
  border-width: 1px;
  border-color: rgb(179, 151, 151);
  border-radius: 4px;
  padding-left:10px; 
  padding-right:10px;
}
form.formulaire input.buttontest:hover {        
  background-color: #d9dee6;
  border-color: rgb(156, 122, 122);                    
}   
form.formulaire input.buttonsendxxs {    
  font-size: 12px ;
  font-weight: bold;
  padding: 2px 6px;
  color:rgb(80, 64, 57);
  background-color: #f1e9e8; 
  border-width: 1px;
  border-color: rgb(179, 151, 151);
  border-radius: 4px;
  margin-bottom: 15px;
}
form.formulaire input.buttonsendxxs:hover {
  background-color: #dfd9d1;
  border-color: rgb(156, 122, 122);                  
}   
.labelxs {
  color: rgb(51, 51, 51); 
  font-weight:600;  
  font-size: 11px;   
  font-family: Verdana;
  user-select: none;                                                
}          

/* ---------------------------------------- END OF PAGE : EMAILS ---------------------------------------------*/



/* ---------------------------------------- OF PAGE : LOGIN -----------------------------------------------*/
.form_login {
  margin: 0 ;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%) ;
  margin-left: -180px;
  border: solid;
  border-width: 2px;
  border-color: rgb(161, 161, 161);
  border-radius: 3px;
  width: 300px;
  padding: 30px 25px;
  background: rgb(255, 251, 251); /* change la couleur du fond ici */
  box-shadow: 0 0 20px 20px rgb(231, 238, 232); 
    input:-webkit-autofill,  /* pour empecher le vilain fond jaune avec auto-complete detecté */
  input:-webkit-autofill:hover, 
  input:-webkit-autofill:focus, 
  input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: #1f3119; /* change la couleur du texte ici */
    transition: background-color 5000s ease-in-out 0s;                    
  }
}
h1.login-title {
    color: #424242;
    margin: 0px auto 25px;
    font-size: 25px;
    font-weight: 500;
    text-align: center;
    user-select: none;
}
.login-input {
    font-size: 16px;
    border: 2px solid #dddcdc;
    border-radius: 3px;
    padding: 10px;
    margin-bottom: 25px;
    height: 25px;
    width: calc(100% - 23px);
}
.login-input:focus {
    border-color:#6e8095;
    outline: none;
}
.login-button {
    color: #fff;
    background: #009879;
    border-radius: 3px;
    border: 0;
    outline: 0;
    width: 100%;
    height: 50px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}
.login-button:hover {
  background: #007c63 !important;
}
.linke {
    color: #505050;
    font-size: 16px;
    text-align: center;
    margin-bottom: 0px;
}
.linke a {
    color: #4e4e4e;
}
h3 {
    font-weight: normal;
    text-align: center;
}          

/* ---------------------------------------- END OF PAGE : LOGIN -----------------------------------------------*/



/* ---------------------------------------- PAGE : NAVBAR -----------------------------------------------*/
.navbar {
  z-index:4; /* sinon y'a des boutons input qui se voient encore par dessus la navbar et '4' plutot que 2 (3 est ok) car sinon le menu TinyMCE passe encore dessus*/
  display: flex;
  flex-shrink: 1;
  justify-content: center;
  vertical-align: middle;
  position: fixed;
  top: 0;
  flex-wrap: wrap;
  width: 100%;
  height: 74px;
  background: linear-gradient(to bottom, #9fa3ac 0%, #f0f5f0 100%); 
  overflow: hidden; 
  border-bottom: solid 2px;
  border-color: rgb(100, 106, 128);
  font-family:Verdana ;
  box-shadow: 0 12px 16px rgb(188, 195, 197);
}
/* Navbar links */
.navbar a {
  float: left;  
  padding: 28px 16px;
  min-width: 52px;  
  max-width: 68px;
  text-align: center;
  background-color: #f1eef1;  /* #e6e4e4; */
  text-decoration: none;
  font-size: 15px;
  user-select: none;  
  border-left: 1px solid #b6b6b6; 

} 
.firstdiv { /* bec only left border on main styling navbar // a:last-of-type doesnt work bec the <a> don't have the same parent ?? */
  box-shadow: -15px 0px 40px #9fa3ac; 
}
.lastdiv { 
  border-right: 1px solid #8b897f;
  box-shadow: 15px 0px 40px #aaaeb8; 
  a {  background-color: #e9e4e9; } /* styling separately bec strange, logout seems to have brighter bg color than the others <a> */
} 
/* Navbar links on mouse-over */
.navbar a:hover {
  height: 40px;
  background-color: #b8cfcb;
}
/* Current/active navbar link */
.active {
  height: 40px;
  background-color: #dad5d6 !important;
  border-left: 1px solid #747474 !important;  
 /* only left border because the right is not aligned on the one already existing from the right <a> neighbor 
  (half pixel difference, couldn't solve it) so will create another left border on the right neighbor with JS */
}
.texticon {   /* couleur du texte de la navbar */
  color:  #362a2a;
  margin-top: 1px; 
  display: flex;  /*  text-align: center; doesnt work (text off-center when max-width is applied onto <a>) */
  justify-content: center;
}
.texticon_red {   /* couleur du texte de la navbar */
  color:  #a30000 !important; /* override the .active color */
  margin-top: 2px !important;
}
.active .texticon{
  color:  rgb(1, 44, 97)  ;
  margin-top: 1px;
}
.justierticon {
  position: relative;
  bottom: 20px;
}
.justiertexticon {
  position: relative;
  top: 10px;
  display: flex; /*  text-align: center; doesnt work (text off-center when max-width is applied onto <a>) */
  justify-content: center; 
}
.justierlogo {
  position: absolute;
  margin-right: 1460px;
  margin-top: 2px ;
}
.fadein_navbar {  
  animation: fadeInAnimation ease 1.5s; 
  animation-iteration-count: 1; 
}
.wraplg { 
  margin-top: 10px;
  margin-left:22px;
  height: 23px; 
  cursor: default; /* avoid text cursor on the leerraum between adjacent divs, better than margin-right:-3px (flags too reactive when cursor at the border of two divs) */
}
.invis {
  visibility: hidden;
}
.langues {
  z-index: 3; 
  display: inline-block;
  height: 23px;  
  width: 21px;
  font-size: 12px;
  font-family: Arial;
  color: #585858;  
}
.langues:hover span { 
  display: none; 
}
.langues:hover { 
  animation: fadeInFlag ease-in 0.17s; /* the transition is otherwise too fast, brutal */
}
.wraplg:hover .langues:not(:hover) {
  animation: fadeInFlag2 ease-in 0.1s; 
  opacity: 0.7; 
}
.wraplg:hover .souligne {
  animation: fadeInFlag2 ease-in 0.2s; 
  opacity: 0.7; 
}
.langues.lgen:hover:before { 
  font-size: 16px;
  content: "🇬🇧";
}
.langues.lgde:hover:before {
  font-size: 16px;
  content: "🇩🇪";
}
.langues.lgfr:hover:before { 
  font-size: 16px;
  content: "🇨🇵";
}
@keyframes fadeInFlag {
  0% {opacity: 0; }
  100% {opacity: 1; }  
}
@keyframes fadeInFlag2 {
  0% {opacity: 1; }
  100% {opacity: 0.7; }  
}
.souligne { 
  z-index: 4;  
  transform: translateY(-8px);
  height:2px;
  width:72px;
  border-bottom: 1px solid #8d8d8d;
}

/* ---------------------------------------- END OF PAGE : NAVBAR -----------------------------------------------*/


/* ---------------------------------------- AUTOCOMPLETE Function -----------------------------------------------*/
.field {
display: flex;
width: 100%;
margin-top: 10px;
}
.modal-header1 { /* The Modal for the autocomplete expressions */
/*   font-size:14px; */
  font-weight:bold; 
  margin-bottom:8px; 
  color:rgb(76, 76, 83);
  padding: 6px 16px;
  height: 20px;
  background-color: #c9daba;
  color: #353535;
}
.endereco {
  display: flex;
  align-items: center; 
  border-color: #009c80;
  border-width: 1px;
  border-radius: 3px;
  background-color: rgb(253, 254, 254) ; 
  height: 40px;
  /*  padding-left: 26px; */
  text-indent: 6px;
/*   font-size: 14px; */
}
.autocomplete {
/*the container must be positioned relative:*/
  width: 100%;
  position: relative;
}
.autocomplete-items {
  position: absolute;
  background-color: rgb(253, 254, 254) ; 
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 10;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 5px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}
.autocomplete-items div:hover {
/*when hovering an item:*/
background-color: #e6e8f3;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: rgb(184, 220, 255) !important;
  color: #ffffff;
}

.autocomplete-suggestion-name {
  font-size: 12px;
  color:rgb(86, 96, 109);
  user-select: none;
}

.subtitle_auto {
  color: rgb(62, 69, 102);
  margin-right: 72px;
  margin-left: 7px;
  font-size: 15px;
}
.inputsauto {
  margin: 3px 5px;
  font-size: 15px !important;
}
.button_add_input {
  width:105px;    
  background-color: rgb(58, 114, 58) !important;
  color:#ffffff;
  border: 1px solid #47473e;
  text-align: center;
  font-weight: bold;
  font-size: 12px !important; 
  padding: 5px !important;
  margin-left: 5px;
}
.button_add_input:hover {
  background-color: rgb(15, 121, 15);
  border: 1px solid rgb(39, 39, 35);
}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* ---------------------------------------- END of AUTOCOMPLETE Function -----------------------------------------------*/
      


fieldset.emails {  /* auf Emails page */
  padding: 15px;
  width: 100%;                                        
  border-color: #009c80;
  border-width: 1px;
  border-radius: 3px;
  font-size: 15px;
  font-family: Verdana;
  font-weight: bold;
  color:#007560;
  background-color: #43525533;                       
  margin-bottom: 20px;       
  font-family: Arial;              
}

.modal-body1 {  /*  modal Daheim & RMA */
  height:auto;
  padding: 2px 16px;
  margin-top: 5px;
  margin-bottom: 10px;
}

.main_titlecontainer {
  display: flex;
  justify-content: space-between; 
  width: 72%;  
  margin:auto;
}
.main_title {   /*  auf Suche, RMA page, params, create RMA */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center; 
  flex-shrink: 0;
  height: 35px;    
  width: 350px;     
  color: #363649;
  font-size:18px;
  font-family: Verdana;
  border: solid;
  border-color: #98a8a5;
  border-width: 2px;
  border-radius: 6px;
  background-color: #f5f5f8;
  margin: 105px auto 15px auto ;
  cursor: pointer;
  user-select: none;
} 
.main_title:hover .title2hovertext{
    visibility: visible;    
    transition-delay:0.3s;               
}                
.title2hovertext {
  visibility: hidden;
  position: absolute;
  z-index: 2;
  width: auto;
  margin-top: 80px;
  font-size:13px;
  background-color: rgb(109, 158, 129);
  color: #fff;
  text-align: center;
  padding: 5px ;
  /* Position the tooltip */
}

.labels {
  color: #414040; 
  font-weight:normal;  
  font-size: 12px !important;   
  font-family: Verdana;
  user-select: none;  
  padding-left: 4px;                              
}
.labels2 {
  color: #1a1a1a; 
  font-weight:normal;  
  font-size: 12px;   
  font-family: Verdana;
  user-select: none;  
  padding-left: 4px;                              
}

  
.labels0 {
  color: #3c3c3c; 
  font-weight:600;  
  font-size: 12px;   
  font-family: Verdana;
  user-select: none;                                                
}   
  
.boxes07 {        
  width: 75px;        
} 
.boxes1 {        
  width: 95px;        
}      
.boxes1_5 {         
  width: 130px;                                      
} 
.boxes1_8 {         
  width: 150px;                                      
} 
.boxes2 {         
  width: 185px;                                     
} 
.boxes2_5 {         
  width: 200px;                                 
} 
.boxes2_8 {         
  width: 240px;                                 
} 
.boxes3 {        
  width: 260px;                              
} 
.boxes3_5 {        
  width: 290px;                              
} 
.boxes4 {        
  width: 323px;                              
} 
.boxes_10 {        
  width: 780px;                              
} 
.boxes0col {        
  width: 75px;        
} 
.boxes1col {        
  width: 95px;        
} 
.boxes1_5col {         
  width: 130px;                                      
} 
.boxes2col {         
  width: 185px;                                     
} 
.boxes2_5col {         
  width: 230px;                                 
} 
.boxes3col {        
  width: 260px;                              
} 
.boxes4col {        
  width: 320px;                            
} 

.color_opt { 
  font-weight:normal ;
  color:rgb(0, 38, 88);
}

form.formulaire input.buttonsend {   /*  auf Params und Suche */
  font-size: 13px ;
  font-weight: bold;
  padding: 2px 6px;
  color:rgb(95, 77, 69);
  background-color: #f1e9e8; 
  border-width: 1px;
  border-color: rgb(179, 151, 151);
  border-radius: 4px;
}
form.formulaire input.buttonsend:hover {
  color:rgb(82, 66, 59);
  background-color: #dfd9d1;
  border-color: rgb(156, 122, 122);                
}


/* ---------- auf Params, RMA, Create RMA (style the input file button while retaining display of the files selected) ---------- */
input[type="file"].fileinpstyl {  
  display:inline-block;
  padding: 2px; 
  height:21px; 
  width: 280px;
  margin-right:0px;
  font-size: 13px;
  font-weight: normal;
  color:rgb(26, 26, 26);
}
input[type="file"].fileinpstyl::file-selector-button {
  width: 110px;
  border: 1px solid #496d8f;
  padding: 2px 4px;
  border-radius: 3px;
  background-color: rgb(236, 243, 237);
}
.labelinpstyl {
font-size: 13px !important;
font-weight: normal;
position: absolute;
margin-left: 6px;
padding-left: 3px;
width: 102px;
height: 16px;
background-color: #ecf3ed;
color:rgb(39, 39, 39);
} 
.labelinpstyl2 {
font-size: 13px !important;
font-weight: normal;
position: absolute;
margin-left: 115px;
padding-left: 4px;
width: 160px;
height: 17px;
color:rgb(37, 37, 63);
background-color: rgb(255, 255, 255);
} 
.shift6px {
  margin-top: 6px;
}
.shift7px {/*  for main RMA page */
  margin-top: 7px;
}
.shift8px {/*  for main RMA page */
  margin-top: 8px;
}


/* ------------------ END OF -------------------------- */

.countryflag {   /* add class at start up if font-family:'NotoColorEmojiLimited' is required (on Chromium, not FF or mobile OS) */
    font-family:'Noto Color Emoji Flagsonly';  /* encoded directly to base64 in url of @font-face, finally found a way to prevent any loading time (fetch 900Ko) at start up, the browser can cache the css file :)  */
    opacity: 0.75; /* final opacity, otherwise flags too flashy */   
}

.styled-table {  /* auf Suche & RMA list   */
  table-layout: fixed;
  border-collapse: collapse;                  
  font-family:Arial;
  font-size: 15px;  
  width: 1300px;    
  border-left:2px solid #838383;  
  border-right:2px solid #838383;            
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);  
  font-weight: normal;
  user-select: none; 
  thead tr { 
    color: #ffffff;
    text-align: left;                
  }
  th, td {
    padding: 6px 14px; /* padding top&bottom + right&left */     
    white-space: nowrap; 
    overflow: hidden;     
      } 
  tbody tr {                           
    border-bottom: 1px solid #dddddd;
        }  
  thead th:nth-child(1) {
   padding-left: 20px; /* pour décaler un peu la 1ere cell qui était trop à gauche */
  }
  tbody td:nth-child(1) {
   padding-left: 20px;
   color:#47668a; 
   font-weight:bold;
  }
  tbody tr:last-of-type {
    border-bottom: 3px solid #008f72;
  }
  tbody tr:nth-child(even) {
      background-color:Snow;
    }
  tbody tr:nth-child(odd) {
      background-color:WhiteSmoke;
    }
    tbody tr:hover {
      background-color:LightGray; 
      cursor: pointer;                    
    }   
  a { text-decoration: none;
      color: inherit;    
  }                  
}
                 
.waitNotifier { /* best way found to change mouse cursor on ALL elements of the window during waiting time */
  height: 100%;
  pointer-events: none;
  cursor:wait;
  * {
  cursor: wait;              
  } 
}
  /* animatiom spinner attente upload fichiers */
.loader {
  display: none;
  top: 50%;
  left: 50%;
  position: fixed;
  transform: translate(-50%, -50%);
  z-index: 3;
}        
.loading {
  border: 5px solid #ccc;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border-top-color: #1ecd97;
  border-left-color: #b8806a;
  animation: spin 0.8s infinite ease-in;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% { 
    transform: rotate(360deg);
  }
}

/* <div id="map"></div> from map.php */
#map { 
  height: 98vh; 
}

/* -------- view the documents on a new page in a <div> ----------- */
.view {
  height: 100vh;
  padding: 0; 
  display: flex; 
  justify-content: center; 
  align-items: center;
  background-color: #f0f0f0;   
}



       
/* 

.color_opt2 { 
  font-weight:bolder ;
  color:rgb(95, 117, 145);
}

form.formulaire select:not(:checked).boxes1col, .boxes1_5col, .boxes2col, .boxes2_5col, .boxes3col {
  color: #474747;
  font-weight:bold;
  border-color: #a39696;
}
 */


/* #img:hover { 
  cursor: grab;        
} 
 */


 /* class useful ?? */
/* .modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  } */



/* plus utile apparemment ?
.slider2 {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 14px;
background-color: #a2afaa;
-webkit-transition: .4s;
transition: .4s;
}
 .slider2:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider2 {
  background-color:rgb(58, 114, 58);
}
input:focus + .slider2 {
  box-shadow: 0 0 1px rgb(58, 114, 58);
}
input:checked + .slider2:before {
  -webkit-transform: translateX(30px);
  -ms-transform: translateX(30px);
  transform: translateX(30px);
}   */


/* n'est plus utilisé apparemment n'est plus utilisé apparemment
.farbe_option:hover { 
  visibility: visible;
  transition-delay:0.2s;
  background-color:rgb(163, 200, 214);  
}

.farbe_option:hover .farbe_hovertext { 
  visibility: visible;
  transition-delay:0.1s;           
}

.farbe_hovertext {
  visibility: hidden;
  width: auto;
  margin-top: 60px;
  margin-left:-140px;
  font-size:13px;
  background-color: rgb(109, 158, 129);
  border:1px solid #755858;
  color: #fff;
  text-align: center;
  padding: 5px ;          
  position: absolute;
  z-index: 1;
} 

  select:not(:checked).boxes2status {
    color: #004706 ;    
  } 
 */