* {
                        margin: 0 0 ;
                        padding: 0;
                        box-sizing: border-box;
                     
                }

                body{
                        padding-top: 4rem;
                        width: 100vw;

                        font-family: Arial, sans-serif;
                        font-weight:300;
                        font-size: 1.2rem;
                        line-height: 1.7;
                        color: #333;
                        background-color:#f9f9f9;
                     
                }

                                     
                      ::placeholder {
                        font-size: 0.8rem;
                      }
                h1, h2, h3, h5 {
                        text-align: center;
                        margin-bottom: 0.5rem;
               }
              
         
               
                p{
                        margin:auto;
                        font-size: 1.2rem;
                        font-family: Arial, Helvetica, sans-serif;
                        padding: 1rem;
                }
                th {
                        font-size: 1.3;

                }
                    
                input[type="number"] {
                        -moz-appearance: textfield;
                      }
                      input[type="number"]::-webkit-inner-spin-button, 
                      input[type="number"]::-webkit-outer-spin-button { 
                        -webkit-appearance: none; 
                        margin: 0; 
                      }        
                table, td {
                                                        
                        text-align: center;
                        font-size: 1.5 rem;
                        font-weight: 300;
                        color:#000 ;
                        border:0.1px solid #ced7df;       
                           }
               
                .box {
                        width:96VW;                                        
                        background-color:#EFF2F9 ;
                        overflow:hidden;
                        display:block;
                        border-radius: .6rem; 
                        color:#3c4245 ;
                        border:1px solid #dce0e4;
                       
                        margin: auto;
                        padding: 1rem;
                        margin-top: 1.3rem; 
                       }   


   /* navigator */
                a {
                        color: #3c4245;
                        font-size: 1.2rem;
                        font-family: Arial, Helvetica, sans-serif;         
                        text-align: center;
                        }



                nav {
                        background-color:#ffffff;
                    
                        position: fixed;
                        width: 100vw;
                        top:0;
                        z-index: 3;
                        text-align: center;
                        
                        


                }

                nav ul {
                        margin: 0;
                        padding: 0;
                        list-style: none;
                        overflow: hidden;
                        background-color:#ffffff;
                        font-size: 1.2rem;
                        

                }

                nav li a {
                        display: block;
                        padding: 1rem 1rem;
                
                        text-decoration: none;
                        direction: rtl;
                }

                nav li a:hover,
                nav .menu-btn:hover {
                        background-color:#e1e6f4;
                }



/* menu in phone*/

                nav .menu {
                        clear: both;
                        max-height: 0;
                        transition: max-height .2s ease-out;
                        
                }


/* menu icon */

                nav .menu-icon {
                        cursor: pointer;
                        float: right;
                        padding: 1.3rem 1.3rem;
                        position: relative;
                        user-select: none;
                }

                nav .menu-icon .nav-icon {
                        background: #333;
                        display: block;
                        height: .1rem;
                        width: 1.4rem;
                        position: relative;


                }

                nav .menu-icon .nav-icon:before,
                nav .menu-icon .nav-icon:after {
                        background: #333;
                        content: '';
                        display: block;
                        height: 100%;
                        position: absolute;
                        transition: all .2s ease-out;
                        width: 100%;

                }

                nav .menu-icon .nav-icon:before {
                        top: .4rem;
                }

                nav .menu-icon .nav-icon:after {
                        top: -.4rem;
                }

/* menu btn */

                nav .menu-btn {
                        display: none;
                }

                nav .menu-btn:checked ~ .menu {
                        max-height:25rem;
                }

                nav .menu-btn:checked ~ .menu-icon .nav-icon {
                        background: transparent;
                }

                nav .menu-btn:checked ~ .menu-icon .nav-icon:before {
                        transform: rotate(-45deg);
                        top:0;
                }

                nav .menu-btn:checked ~ .menu-icon .nav-icon:after {
                        transform: rotate(45deg);
                        top:0;
                }

                .logo {
                        height: 10rem;
                        display: -webkit-flex;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-pack: center;
                        -ms-flex-pack: center;
                        justify-content:center;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: baseline;

                
                }
                .logo.img {
                
                
                max-width: 10VH; 
                }
                .box_fix {
                        position: relative;
                        width:96vw;
                        background-color:#c4f09b; 
                        overflow:hidden;
                        display:block;
                        border: 1px solid rgb(78, 76, 76); 
                        border-radius: .6rem; 
                        color:#3c4245 ;
                        font-size: 1.1rem ;
                        z-index: 2;
                        margin: auto;
                        padding: .3rem;
                        margin-top: 0.8rem;
                        margin-bottom: 0.8rem;
                }

                .about {
                        background-color:#6A6B81 ;
                        color: #ffffff;	
                        
                        font-size:1rem;
                        font-family: Arial, Helvetica, sans-serif;
                        padding:1.5rem ;
                        position: relative;
                        margin: auto;
                        border: 1px solid #dce0e4;
                      
                                }  

               .about img {
                       width: 15%;
                       float: left;
                      
               }
               .hagit_info p {
                        background-color: #f7f7f7;
                        color: #3c4245;
                        width: 70vw;
                        font-size: 1.2rem;                                      
                        text-align: center;
                        padding:1rem;
                        }   
               .credit p{
                       font-size: 1rem;
                       text-align: center;      
               }

                      
                    
               
                .img_blance {
                        display: inline-flex;
                        border:1px solid #dce0e4;
                        width:30%; 
                        justify-content: center;
                      
                        border-radius: .5rem;

                                }         
        
                .img_blance img {
                     
                        
                        width:100%;
                
                
                        }
                       #showEggPr{
                       display: none;
                  
                              
                        }
     
                            
                .input_table {
                        -webkit-text-fill-color: rgba(0, 0, 0, 1); 
                        width:95%;
                        height: 2.8rem;
                        padding:.3rem;
                        display: block;
                        color: black;
                        font-size: 1.5rem;
                        font-weight: 300;
                        border:1px solid  #eef1f3;
                        direction: ltr;
                        text-align: center;
                        margin: auto;

                        } 
             

                .input_table_disable {
                  
                        width: 90%;
                        background-color: #f4f6fa ;
                        color: black;
                        padding:.3rem;
                        height:2.8rem;
                        font-family: Arial, Helvetica, sans-serif;
                        font-size:1.5rem;
                        border-radius: .3rem;
                        direction: ltr;
                        text-align: center;
                        border: 1px solid  #dce0e4;        
                        
                                         }  
                .input_table_small_disable {
                        -webkit-text-fill-color: rgba(0, 0, 0, 1); 
                        width: 95%;
                        background-color: #FFFFFF;
                        color: black;
                        padding:.3rem;
                        height:2.8rem;
                        font-family: Arial, Helvetica, sans-serif;
                        font-size:1.5rem;
                        border-radius: .3rem;
                        direction: ltr;
                        text-align: center;
                        border: 1px solid  #dce0e4;        
                                                
                                                                 }                         

                select {
                        width: 65vw;
                        color:#3c4245; 
                        padding:.3rem;
                        height:2.8 ;
                        font-size: 1rem;
                        border-radius: .3rem;
                        direction: rtl;
                        text-align: center;
                 
                }  
            
                .load_btn   {
                    
                        width: 25vw;
                        background-color:#ffffff;
                        float: right;
                        color:#3c4245;
                        padding:.1rem;
                        height:2.8rem;
                        margin-right: 2rem;
                        font-size: 1rem;
                        border: none;
                        direction: rtl;
                        text-align: center;
                        text-decoration-line: underline;
                        cursor:pointer;
                    
                    
                }  
                .load_btn:hover {
                   
                        color: #044713;
                       }                                
                .refresh_btn   {
                    
                        width: 25vw;
                        background-color:#ffffff;
                        float: right;
                        color:#3c4245;
                        padding:.1rem;
                        height:2.8rem;
                        margin-right: 2rem;
                        font-size: 1rem;
                        border: none;
                        direction: rtl;
                        text-align: center;
                        text-decoration-line: underline;
                        cursor:pointer;
                    
                    
                }  
                .refresh_btn:hover {
                   
                        color: #050447;
                       }                       


                .update_mobile_btn{
                        width: 20vw;
                        background-color: #e76f1f;
                        color: #ffffff;
                        border: 1px solid rgba(126, 141, 120, 0.9);
                        padding:.1rem;
                        height:2.8rem;
                        font-weight: 400;
                        font-size: 1rem;
                        border-radius: .5rem;
                        direction: rtl;
                        text-align: center;
                        margin-top: 1rem;
                        cursor:pointer;
                }
               
                #caline 	{
                        width: 98vw;
                        position: -webkit-sticky;
                        position: sticky;
                        z-index: 1;
                        top:3.5rem;
                        margin-bottom: 1rem;
                        margin:auto ;
                        background-color:#6A6B81;
                        padding:0.5rem;
                     
                        border-radius: .5rem; 
                        color: #ffffff;
                        } 

                .calculate_btn {

                        width: 20vw;
                        background-color: #e76f1f;
                        color: #ffffff;
                        border:1px solid  #dce0e4;
                        padding:.1rem;
                        height:2.8rem;
                        font-weight: 400;
                        font-size: 1rem;
                        border-radius: .5rem;
                        direction: rtl;
                        text-align: center;
                        margin-top: 1rem;
                        cursor:pointer;
                }       

                
                .beeppe_btn {

                        width: 25vw;
                        background-color: #ffffff;
                        padding:.1rem;
                        height:2.3rem;
                        font-family: Arial, Helvetica, sans-serif;
                        font-size:1.4rem;
                        border-radius: 0.5rem;
                        direction: rtl;
                        text-align: center;
                        border:1px solid  #dce0e4;
                        margin-left: 3rem;
                }                                     
                    
                .reset_btn{
                        display: none;
                }                   
                                    
                .cost_benfit{
                        display: none;       
                        }                

               
                                 
                .dropdown {
                        position: relative;
                        display: inline-block;
                        }      
                                        
                .dropdown-content {
                        display: none;
                        position: absolute;
                        right: 0.9rem;
                        font-family: Arial, Helvetica, sans-serif;
                        font-size: 0.9rem;
                        background-color: #f9f9f9;
                        min-width: 6.5rem;
                        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                        padding: 0.5rem 0.5rem;
                        z-index: 1;
                        text-align: center;
                        }
                        
                .dropdown:hover .dropdown-content {
                        display: block;
                        }  

               
                .beeppe  {
                        width: 4.5vw;
                        height: 2.3rem;                
                        border-radius:0.4rem;
                        background-color: rgba(180, 248, 157, 0.5);
                        border: 1px solid rgba(116, 153, 102, 0.9);
                               
                        }  

                
                        
                .beeppe:hover { 
                        -moz-box-shadow: 0 0 10px #aaa;
                        -webkit-box-shadow: 0 0 10px #aaa;
                        box-shadow: 0 0 10px #aaa; 
                        background-color: rgba(80, 163, 54, 0.75);
                        } 

                .tbl_cost_benfit{
                        width: 70vw;                
                        background-color: #EFF2F9;
                        color:#3c4245;
                        font-family: Arial, Helvetica, sans-serif;
                        margin: auto ;
                        text-align: center;
                        padding: .3rem;
                        border-radius: .3rem; 
                        border: 1px solid #dce0e4;
                        border-bottom: 1px solid #6A6B81; 
                      
                      
               }
               .tbl_cost_benfit td {
                        border:1px solid  #dce0e4;
                        height: 1.5rem;
               }        
               
                
                .reset0_btn {
                        width: 45vw;
                                            
                        color:#3c4245;
                        padding:.1rem;
                        background-color:#EFF2F9 ;
                        float: right;
                        font-size: 1rem;
                        border: none;
                        direction: rtl;
                        text-align: center;
                        text-decoration-line: underline;
                        cursor:pointer;
                    
                 } 

                 Styling for the Modal Window */
                 .modal {
                     display: none; /* Hidden by default */
                     position: absolute; /* Stay in place */
                     z-index: 1000; /* Sit on top */
                     left: 0;
                     top: 0;
                     width: 100vw; /* Full width */
                     height: 100vh; /* Full height */
                     overflow: auto; /* Enable scroll if needed */
                     background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */
                 }
                 
                 /* Modal Content Box */
                 .modal-content {
                     background-color: #fefefe;
                     margin: 30vh auto; /* 30% from the top and centered */
                     padding: 2rem;
                     border: 1px solid #888;
                     width: 85vw;
                     max-width: 400px;
                     border-radius: 0.6rem;
                     text-align: center;
                     position: relative;
                 }
                 
                 /* The Close Button (x) */
                 .close {
                     color: #aaa;
                     position: absolute;
                     left: 1rem;
                     top: 0.5rem;
                     font-size: 28px;
                     font-weight: bold;
                 }
                 
                 .close:hover,
                 .close:focus {
                     color: black;
                     text-decoration: none;
                     cursor: pointer;
                 }
                 
                 /* Make readonly input fields look clickable */
                 .input_table[readonly] {
                     cursor: pointer;
                     background-color: #ffffff; /* Ensures it doesn't look disabled */
                 }         

                .exbox-container {

                      
                        width:  95vw;
                        padding: .5rem;
                        background-color: #f4f4f4;
                        
                        border-radius: .3rem;
                        }
                .exbox {
                        flex: 1;
                        direction: rtl;
                        background-color: #FFFFFF;
                        text-align: right;
                        padding: 0.5rem;
                        border: 1px solid #dce0e4;
                        }

                .exbox p {
                        font-family: Arial, Helvetica, sans-serif;
                        font-size: 1rem;
                        direction: rtl;	

                }
                
                .update_btn   {
                        width: 35vw;
                        display: block;
                        min-width:5rem;
                        margin-right: 3rem;
                        background-color:#97beeb;
                        color:black;
                        padding: 0.3rem;
                        height:2.5rem;
                        font-family: Arial, Helvetica, sans-serif;
                        font-size: 0.9rem;
                        border-radius: .4rem;
                        direction: rtl;
                        text-align: center;
                        border: 1px solid  #dce0e4;  
                                }                 
    
 @media (min-width: 56rem) {
                nav li {
                        float: right;
                        font-size: 1.3rem;
                        }
                nav li a {
                        padding: 1.3rem 2.6rem;
                          }
                nav .menu {
                        clear: none;
                        float: right;
                        max-height: none;
                           }
                nav .menu-icon {
                        display: none;
                           }
                 .exbox-container{
                        display: flex;
                        justify-content: space-between;
                        }                                        
                                                             
                                     }
    
               
                table {
                        width: 95vw;
                        font-size: 1rem;
                        color:black;
                    
                        margin: auto ;
                        padding: .3rem;
                        border-radius: .3rem; 
                        border: 0.5px solid  #dce0e4;  
                                     
                                      
                                }                        
                        
                     

      /* נתוני להקות */

                .app_present{
                        flex: 1;               
                        padding: 2rem;
                        text-align: right;
                        color:#ffffff; 
                        background-color:#6A6B81;
                        border-radius: .5rem;
                   
                        }
                .app_predent p{
                        width: 90%;     
                        font-size: 1.4rem;
                        font-weight: 300;
                        
                                }  
               
                #tableAge {
                        width: 70%;
                        display: none;
                        background-color:#6A6B81 ;
                        color: #fff;
                        margin: auto;
                        padding: 1rem;
                        margin-top: 1rem;
                        border: 1px solid  #dce0e4;  
                                
                                }             
                                                      
                .comlogo-container {

                        display: flex;
                        justify-content: space-evenly;
                        width: 95%; 
                        height:14rem;             
                        padding: .3rem;
                        margin: auto;
                      
                        
                       
                }
                .comlogo {
                        flex:1;
                        width:20%;
                        padding: 0.3rem;
                        border: 1px solid #aaaaaa;
                        border-radius: 1.5rem; 
                        background-color: #ffffff;
                        margin:.1rem .1rem .1rem .1rem;
                        cursor: pointer;
                 }
 
               .comlogo img {
                       max-height: 12rem;
                       max-width: 100%;
                       padding: 0.1rem;
                       margin: auto;
               }
 
                .info_img {
                     
                        width:20%;
                    
                        height:15%;
                       
                        border: 1px solid #aaaaaa;
                        background-color: #ffffff;
                        margin:1rem 1rem 1rem 1rem;
                      
                        cursor: pointer;
                 }
              
   /* במסך טלפון */
   @media (max-width:56rem)
                 {
       
                nav {
                        width: 100vw;
                        margin-top: 0;
                      } 

                h1{
                        font-size: 1.6rem;
                        text-align: center;
                     }
                h2{
                        font-size: 1.5rem;
                        text-align: center;
                    }
                h3{
                        font-size: 1.2rem;
                        text-align: center;
                    }
                h5{
                        font-size: 1rem;
                        text-align: center;
                    }   
                                
                p {
                        font-size: 1.2rem;
                }
                
                .box {
                        width:96VW;                                        
                        background-color:#EFF2F9 ;
                        overflow:hidden;
                        display:block;
                        border-radius: .6rem; 
                        color:#3c4245 ;
                        border:1px solid #dce0e4;
                        z-index: 2;
                        margin: auto;
                        padding: .3rem;
                        margin-top: 1.3rem; 
                        font-size: 0.9rem;
                       }   
                table {
                      
                     touch-action: manipulation;
                
                     
                                     
                                      
                                }                 

                table, td {
                                                        
                        text-align: center;
                        font-size: 0.9rem;
                        font-weight: 300;
                        color:#000 ;
                        border:0.1px solid #ced7df;
                           }

                table, th {
                      				
                        
                        font-weight: 300; 
                        font-size: 1.1rem;
                        color:#3c4245;
                        border-bottom: 1px solid #ced7df;
                           }
                tr {
                        height: 3rem;
                         }            
                   			
                .load_btn   {
                        border: none;
                        width: 35vw;
                     }  

                       

                .update_mobile_btn{
                        width: 30vw;
                        background-color: #e76f1f;
                 }  


                .img_blance {
                        display: none;
                                }            

             
              
           
        
                .input_table {
                        -webkit-text-fill-color: rgba(0, 0, 0, 1); 
                        font-size: 1.1rem;
                        font-weight: 400;
                  
                        } 
                .input_table_small_disable {
                        -webkit-text-fill-color: rgba(0, 0, 0, 1); 
                        width: 95%;
                        font-size:1.1rem;
                        font-weight: 400;
                         }                  
             
                 .calculate_btn {
                        margin: auto;
                        width: 25vw;
                        font-size:1rem;
                       
                }              
                .cost_benfit{
                        width: 80vw;                
                
                        color:#3c4245;
                        font-size: 1.2rem;
                        margin: auto ;
                        text-align: center;
                        display: block;
                      
                              
                        } 
               .tbl_cost_benfit{
                        width: 95vw;                
                        background-color: #ffffff;
                        color:#282e31;
                        font-size: 1rem;
                        
                        margin: auto ;
                        text-align: center;
               }  
            
               #CBTbl {
                display: none;
                } 

                .reset_btn {
                        width: 45vw;
                        display: block;                    
                        color:#3c4245;
                        padding:.1rem;
                        background-color:#EFF2F9 ;
                        float: right;
                        font-size: 1rem;
                        border: none;
                        direction: rtl;
                        text-align: center;
                        text-decoration-line: underline;
                        cursor:pointer;
                    
                        } 
                .reset_btn:hover {
                   
                        color: #044713;
                        }

              
                 .Egg_Dis_present {
                              
                        padding: 1rem;
                        
                         }              
                 .Egg_Dis_present p{
                               
                        font-size: 1.2rem;
                        
                         } 
                
                 .app_present {
                                       
                              padding: 0.3rem;
                                        
                                         }              
                  
                .app_present p{
                        color: #ffffff;              
                        font-size: 1.2rem;
                                
                                 }    
                .box_fix {
                   
                        font-size: 0.9rem;
                      
                        padding: .1rem;
                     
                                }                
                                 
                 }

                #EggSort{
                        width: 95%;
                        display: block;
                        margin: auto;
                        text-align: center;
                       }
                footer {
                     
                        bottom: 0;
                        width: 100vw;
                      
                        color: #3c4245;
                        text-align: center;
                             
                        }            

     
       
                footer p {
                        
                       
                        font-size: 1rem;
                        color: #3c4245;
                        text-align: center;
                                
                        
                        }