@media screen and (max-width: 414px) {
      .main-container{
        display: grid;
        grid-template-columns: repeat(1,1fr); 
        place-items: center;
        padding-left:10px;
        padding-left:10px;
        row-gap:5px;
       grid-template-areas:
       "first"
       "labelDiv"
       "navDiv"
       "leftPanel1"
       "bigTable"
       "leftPanel2"
       "midPanel"
       "letterSummary"
       "footer";
       
       
          }
#header1{
    grid-area: first;
    background:#8ebf42;
    height:15%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.square{
    width:40px;
    height:40px;
    margin-top: 10px;
    margin-left: 5px;
    position: relative;
    background: black;
}
.line{
    position :absolute;
    height:2px;
    width: 100%;
    background-color:#fff;
    border-radius: 1px;
    transition: all cubic-bezier(0.26,0.1,0.27,1.55) 0.35s;
}
.top{
    top:5%;
}
.middle{
    top:40%;
}
.bottom{
    top:78%;
}
.icon.close .top{
 transform: rotate(45deg);  
 top:48%;
}
.icon.close .middle{
  transform: rotate(-45deg);  
  top:48%;
}
.icon.close .bottom{
  transform: rotate(-45deg);  
  top:48%;
}
#defTitel{
    display:none;
}
#contactStripe{
    display:none;
}
.header2{
 display:none;   
}
#brandOut{
 grid-area:navDiv; 
 
 
}
.brand{
 padding-bottom: 10px;
 text-align: center;
 color:#02145a;
 text-align: center;
 font-weight: bold;
 font-size: 30px;
 font-family: "Times New Roman", Times, serif;
}
.navservice ul{  
     list-style-type: none;
     text-align: left;
     background-color:#f0b71a;
      
 border-bottom: 1px solid #ddd;
padding: 5px ;     
    
}
.navservice ul li{  
 padding: 5px ; 
border-bottom: 1px solid #ddd;   
}
.navservice ul li a{
    text-decoration: none;
     color: white;
}
nav{
 grid-area:secondNav;
  text-align: left; 
  background: #02145a;  
}
#anglais{
     color:black;
 }
 nav ul{  
     list-style-type: none;
     background-color:#f0b71a;
     text-align: left;
  border-bottom: 1px solid #ddd;
padding: 5px ; 
}
nav ul li{  
  padding: 5px ; 
border-bottom: 1px solid #ddd;
    
}
nav ul li a{
 text-decoration: none;
  color: white;
    
}
.leftpanel1{ 
  grid-area:leftPanel1 ;
  width: 100%;
  background-color:#7291c2;
  border-radius: 25px;
  
  padding-top: 20px;
  
}
#fileTable {
  padding: 1rem;
  text-align: center;
  width:100%;
  height:200px;
}
#fileTable td{
  border: 1px solid #999;
  padding-left: 0.5rem;
  background:  white;
  
}
#fileTable th{
  border: 1px solid #999;
  padding-left: 0.5rem;
}
#submitBtn{
    width: 80%;;
    border-radius: 15px;
}
label{
     background:white;
     border-radius: 15px;
    
}
#leftPanel2{
  grid-area: leftPanel2;
  padding-top: 15px;
  width: 100%;
  margin-top: 10px;
}
#captionTB2{
   color:red;
   font-size: 1em;
   font-weight: bold;  
   background-color:#000080;
   color:white;
}
#tableSummary{
   background-color:#000080;
   color:white;
   border: 1px solid;
   width: 100% ; 
   text-align: left;  
   font-family: Book Antiqua;
}
#tableSummary th{
   border: 1px solid #999;
  
}
#tableSummary  td{
   border: 2px solid #999; 
}
#leftTableDiv{
   grid-area:bigTable;
   margin-top: 10px;
}
#tableResult{
  border-width: 35px;
  width: 100% ; 
  font-size: 1em;
}
#tableResult th{
  border: 1px solid #999;
  padding: 0.5rem;
  background:#edf2ff; 
}
#tableResult td{
  border: 0.2px solid #999;
  padding: 0.5rem;
  
}
#myInput{
    width: 100%;
    background:#f0eded;
    border-style:solid; border-color:#8ebf42;
}
#rightTableDiv{ 
    grid-area:midPanel;
    text-align: center;
    padding-top: 20px;
}
#tableLetter{
 width: 100% ;
}
#tableLetter th{
 
  background-color:white;

}
#tableLetter td{
   font-size:10px;
   background:#f7bcc7;
}
#letterSummaryDiv{
    grid-area:letterSummary; 
   padding-top: 20px;
 margin-top: 10px;
 width:100%;
    
}
#captionTB1{
   font-weight: bold;
    background-color:#000080;
    color:white; 
}
letterSummarTable{
    
   border: 1px solid;
   width: 100% ; 
   text-align: left;  
   font-family: Book Antiqua;
   
}
#letterSummarTable th{
   border: 1px solid #999;
  
}
#letterSummarTable td{
   border: 1px solid #999;
   background-color:#000080;
   color:white;
   
}
#credits{
    display:none;
}
footer{
   
   background-color: black;
   color:white;
   text-align:center;
}
#messLabel2{
display:none;
background-color: yellow;  
}
#imLogo{
    display: none;
}


}