* {
                        margin: 0 0 ;
                        padding: 0;

                     
                }

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

                        font-family: Arial, Helvetica, sans-serif;
                        font-weight:300;
                        font-size: 1.2rem;
                        line-height: 1.7;
                        color: #3c4245;
                        background-color:#ffffff;
                     
                }

                                     
                      ::placeholder {
                        font-size: 1rem;
                      }
                h1{
                        text-align: center;
               }
                h2{
                       
                        text-align: center;
       }
                h3{
                        text-align: center;
                   }
                h5{
                        text-align: center;
                }   
               
                p{
                        margin:auto;
                        font-size: 1.2rem;
                        font-family: Arial, Helvetica, sans-serif;
                        padding: 1rem;
                }
               
               
                .box {
                        width:98VW;                                        
                        background-color:#EFF2F9 ;
                        overflow:hidden;
                        display:inline-block;
                        border-radius: .6rem; 
                        color:#3c4245 ;
                        border:1px solid #dce0e4;
                        z-index: 2;
                        margin: auto;
                        padding: .3rem;
                        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: ltr;
                }

                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: left;
                        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; 
                }

                .about {
                        background-color:#6A6B81 ;
                        color: #ffffff;	
                        
                        font-size:1rem;
                        font-family: Arial, Helvetica, sans-serif;
                        padding:2rem ;
                        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:2rem;
                        }   
               .credit p{
                       font-size: 1rem;
                       text-align: center;      
               }

            

                .cost_benfit_present{
                        flex: 1;
                        width:30vw;
                        padding: 2rem;
                        text-align: left;
                        color:#ffffff; 
                        background-color:#6A6B81;
                        border-radius: .5rem;
                        font-size: 1.5rem;
                      
                        }
                .cost_benfit_present p{
                         width: 90%;     
                        font-size: 1.5rem;
                        font-weight: 300;
                               
                                }        
                .img_blance {
                        display: inline-flex;
                        border:1px solid #dce0e4;
                        width:30%; 
                        justify-content: center;
                      
                        border-radius: .5rem;

                                }         
        
                .img_blance img {
                     
                        
                        width:100%;
                
                
                        }
                .eggs_prices{
                       display: none;
                  
                      
                              
                        }

              
               .tbl_eggs_prices{
                        width: 70vw;                
                     
                        background-color: #EFF2F9;
                        font-size: 1.2rem;
                        height: 3rem;
                        margin: auto ;
                        text-align: center;
                        border:1px solid #dce0e4;
                      
               }
               .tbl_eggs_prices td {
                        border:1px solid  #dce0e4;
                        height: 2.8rem;
               }
                
                .input_table {
                        -webkit-text-fill-color: rgba(0, 0, 0, 1); 
                        width: 20vw;
                        height: 2.8rem;
                        padding:.3rem;
                    
                        font-size: 1.4rem;
                        border:1px solid  #dce0e4;
                        direction: ltr;
                        text-align: center;
                

                        } 
                        
                select {
                        width: 65vw;
                        color:#3c4245; 
                        padding:.3rem;
                        height:2.8 ;
                        font-size: 1rem;
                        border-radius: .3rem;
                        direction: ltr;
                        text-align: center;
                 
                }  
                
                .update_input{
                        -webkit-text-fill-color: rgba(0, 0, 0, 1); 
                        width: 50vw;
                        height: 2.8rem;
                        color:#3c4245; 
                        padding:.3rem;
                        border-radius: .3rem;
                        font-size: 1rem;
                        border: 1px solid rgba(126, 141, 120, 0.9);
                        direction: ltr;
                        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: ltr;
                        text-align: center;
                        text-decoration-line: underline;
                        cursor:pointer;
                    
                    
                }  
                .load_btn:hover {
                   
                        color: #044713;
                       }                                

                .update_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: ltr;
                        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: 30vw;
                        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: ltr;
                        text-align: center;
                        margin-top: 1rem;
                        cursor:pointer;
                }       

                .inputX_disable {
                     
                     
                        width: 50vw;
                        background-color: #FFFFFF;
                        
                     
                        font-weight:600;
                        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;        
                
                                 } 
                .beeppe_btn {

                        width: 25vw;
                        background-color: #ffffff;
                        padding:.1rem;
                        height:2.3rem;
                        font-family: Arial, Helvetica, sans-serif;
                        font-size:1rem;
                        border-radius: 0.5rem;
                        direction: ltr;
                        text-align: center;
                        border: 1px solid rgba(126, 141, 120, 0.9);
                        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: ltr;
                        text-align: center;
                        text-decoration-line: underline;
                        cursor:pointer;
                    
                 } 

                

                .exbox-container {

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

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

                }	
    
 @media (min-width: 56rem) {
                nav li {
                        float: left;
                        font-size: 1.3rem;
                        }
                nav li a {
                        padding: 1.3rem 2.6rem;
                          }
                nav .menu {
                        clear: none;
                        float: left;
                        max-height: none;
                           }
                nav .menu-icon {
                        display: none;
                           }
                 .exbox-container{
                        display: flex;
                        justify-content: space-between;
                        }                                        
                                                             
                                     }
                        
   /* במסך טלפון */
   @media (max-width:56rem)
                 {
       
                 nav {
                        width: 100vw;
                        margin-top: 0;
          
                     } 
                .load_btn   {
                        border: none;
                        width: 35vw;
                       
                       
                   
                }  

                p {
                        font-size: 1.2rem;
                }
                .cost_benfit_present {
                              
                       padding: 1rem;
                       
                        }                 
                .cost_benfit_present p{
                              
                        font-size: 1.2rem;
                       
                        }                                  

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


                .img_blance {
                        display: none;
                                }            

                .eggs_prices{
                        width: 80vw;                
                    
                       
                        font-size: 1.2rem;
                        margin: auto ;
                        text-align: center;
                        display: block;
                      
                              
                        }      
           
                .tbl_eggs_prices{
                        width: 90vw;                
                 
                        background-color: #ffffff;
                        font-size: 1rem;
                        
                        margin: auto ;
                        text-align: center;
                       
                      
               }
                .tbl_eggs_prices td {
                        border:0.1px solid #dce0e4;
                        
               } 
                     
                .input_table {
                        -webkit-text-fill-color: rgba(0, 0, 0, 1); 
                       
                 
                        font-size: 1rem;
                        border: none;
                
                        } 
                    
                 .calculate_btn {

                        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;
               }  
               
               .tbl_cost_benfit td{
                        border:0.1px solid   #ced7df;
                      
               }

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

                footer {
                     
                        bottom: 0;
                        width: 100vw;
                      
                        color: #3c4245;
                        text-align: center;
                             
                        }            

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