body {
  background-color: #ffffff; /* Le fond de la page sera presque blanc */
}

.container { 
  display: flex;
  flex-wrap: wrap;
  flex-direction:column ;
  justify-content:space-between;
  align-items: center;     
  width:80%;
  margin-left:auto ;
  margin-right: auto;/* pour centrer au milieu de l'ecran */
  margin-top: 101px;
  padding: 20px 30px 30px 30px;
  border-color: #009c80;
  border-width: 1px;
  border-radius: 3px;
  font-size: 16px;
  font-family: 'Motiva Sans', sans-serif ;
  color:#242424; 
  background-color: #d6d9da33;
  box-shadow: 0 20px 20px rgb(190, 190, 190);
  /* height: 50vh;  *//* Optional: this makes the container fill the entire viewport height */
}
.container .class_form {     
  position: relative;
  text-align: center;
  width:100%;      /*   defini la largeur du formulaire   */
  max-width: 800px;           
}    
.container .class_form > * {  
  display: flex;
  flex-wrap: wrap;
margin: 5px;
}
.container .class_form > * > input, select, textarea {  
  display: flex;
  margin: 7px;
  padding: 5px ;
  
  border-radius: 4px;
  font-size: 16px;    
  font-family: 'Motiva Sans', sans-serif ;  
  font-weight: 300;
  background-color: rgb(253, 254, 254) ;
}

#idpre, #idrue, #idema, #id_mod, #id_snr, #id_rfk, #rma_beleg {
  flex:1;
}

input[type="file"]::file-selector-button {   
  border: 1px solid;
  border-radius: 4px; 
  background-color: rgb(243, 243, 243);
  font-family: 'Motiva Sans', sans-serif ;  
  font-weight: 300;
  padding: 2px 5px;
  cursor: pointer;
}              
input[type=file]::file-selector-button:hover {
      background-color: #edf5ff;
      border: 1px solid #43598d;
}
#rma_beleg {
  padding : 1px 5px ;
}       
form.class_form textarea {           
  resize: vertical;    
  width: 100%;
  min-height: 100px ;
  max-height: 6000px;
  height:100px;  
}
form.class_form input:hover, form.class_form textarea:hover, form.class_form select:hover {
  border:1px solid #630000;    
}
form.class_form .boutons_cont {     
  display: flex;
  flex-wrap: wrap;
  flex-direction:column ;
  justify-content: center;
  align-items: center;   
  margin: 10px;
  padding : 10px ;
}       
form.class_form .buttonvalidation {   
  font-family: 'Motiva Sans', sans-serif ;  
  font-weight: 400;      
  color:#070b13;
  font-size: 16px;       
  background-color: #f3ebeb;
  border:1px solid #c290a5;   
  border-radius: 4px;     
  padding: 8px 30px;
  margin: 20px auto  ;
}    
form.class_form input.buttonvalidation:hover { 
  background-color: #dfd5c8;           
  border-color: rgb(182, 132, 132);
}
form.class_form input.boxes0:hover { 
  background-color: #fdf2dd;           
   border-color: rgb(201, 108, 108);
}
.bordbleu {
  border:1px solid #3a5379;
}
.bordvert {
  border:1px solid #007560;
}
.header {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index:2;
  overflow: hidden; 
  justify-content: center;
  align-items: center;
  height:100px;    
  background:#e6e6e6;
  border-bottom: solid medium;
  border-color: #46464633;
  min-width: 1100px;
  box-shadow: 0 12px 15px rgb(204, 204, 204) ;
}
.logo:hover {
  cursor:pointer ;
}    
.banner {            
  margin:auto ;   
  width: 70%;
  height: auto;  
  max-height: 100px;
  z-index: 1;   
  overflow: hidden;  
}
.logo {  
  position: absolute;
  left: 115px;
  width: 4.2%;
  height: auto;     
}
h2 {
 margin-bottom: 40px;
 font-weight:normal;
 font-size: 26px;
 color:#464141;
 user-select: none; 
}
.presentation {
  margin-bottom: 30px;
 font-size: 16px;
 font-weight: 300;
 color:#070b13; 
 user-select: none;
}
.privatsphere {    
  text-align: center;
  font-family: 'Motiva Sans', sans-serif ;
  font-size: 13px;
  font-weight: 200;
   color:#070b13; 
 margin: 50px auto 0px auto ;
  user-select: none;
}
.textend {    
  display: flex;
  flex-wrap: wrap;
  flex-direction:column ;
  justify-content: space-between;
  align-items: center;  
  height:40px ; 
  margin-top: 20px;
  font-size: 12px;
  font-weight: 300;
  color:#3b3b3b; 
  user-select: none;
}   
.boxes0 {         
  width: 55px;                                      
} 
.boxes1 {         
  width: 135px;                                      
} 
.boxes1_5 {         
  width: 147px;                                      
} 
.boxes1_7 {         
  width: 190px;                                      
}     
.boxes2 {
  width: 210px;
}


.class_form select {
  font-family: 'Segoe UI';
  font-size: 17px;
}

  /* animatiom spinner attente upload fichiers */
.loader {
  display: none;
  top: 50%;
  left: 50%;
  position: fixed;
  transform: translate(-50%, -50%);
}      
.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);
      }
}


/* AUTOCOMPLETE */

.field {
  display: flex;
  width: 100%;
  margin-top: 10px;
}  
.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: 70%; 
  position: relative;
  top: 45px;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  text-align: left;
  /*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: 13px;
   color:rgb(86, 96, 109);
}