body{
    margin: 0;
    padding: 0;
    /* height: 100%; */
}

#map {
    height: 100% ;
    width: 100%;
    float: right;
    z-index: 1;
    /* position: absolute; */
}

#mainCross {
    position: absolute;
    width: 80px; /*the image width*/
    height: 80px; /*the image height*/
    left: 50%;
    top: 50%;
    margin-left: -40px; /*half the image width*/
    margin-top: -40px; /*half the image height*/
    z-index: 1000;
    display: none;
  }

#containerGeoid {
    position: absolute;
    width:350px; 
    max-width: 40%;
    max-height: 80%; 
    overflow-y: scroll;
   
    /* overflow-x: scroll; */
    background-color: rgb(79, 146, 79) ;
    float: right;
    top: 15%;
    left: 8px;
    border: 2px solid rgb(6, 12, 6);
    display: block;
    z-index: 99;
    padding: 9px;
    border-radius: 5%;
}


/* #mobile{

    position: absolute;
    max-width: 80%;
    background-color: rgb(79, 146, 79) ;
    top: 5%;
    right: 15%;
    border: 2px solid rgb(6, 12, 6);
    z-index: 99;
    padding: 9px;
    border-radius: 5%;
    display: none;
} */


#mobile{

    position: absolute;
    width:80%; /*the image width*/
    height: 23%; /*the image height*/
    background-color: rgb(79, 146, 79) ;
    left: 18%;
    top: 10%;
    margin-left: -40; /*half the image width*/
    margin-top: -20px; /*half the image height*/
    z-index: 1000;
    display: none;
    border-radius: 5%;
    padding: 9px;
    border: 2px solid rgb(6, 12, 6);
}


@media only screen and (max-width:600px){

    #mobile{
        display:block;
    }

    #containerGeoid{
        display:none;
    }

    #mainCross{
        display: block; 
    }

}

#N2 {
    position: relative;
    display: block;
    margin: 0 auto;   
    text-align: center;
    max-width: 70px; 
    background-color: rgb(13, 248, 248);    
}

/* #N3 {
    position: relative;
    display: block;
    margin: 0 auto;   
    text-align: center;
    max-width: 60px; 
    background-color: rgb(13, 248, 248);    
} */

/* @media only screen and (max-width:600px){
    #mobile{
        display:block;
    }
} */


#upload{

    position: absolute;
    max-width: 15%;
    /* max-height: 20%;*/
    background-color: rgb(79, 146, 79) ;
    top: 20%;
    left: 25%;
    border: 2px solid rgb(6, 12, 6);
    display: none;
    z-index: 99;
    padding: 9px;
    border-radius: 5%;

}

/* @media only screen and (max-width:600px){
    #upload{
        display:none;
    }
} */

#cbox{
    width: 100%;
    text-align: justify;
}

.inputs {
   
    text-align: center;
    width: 28%;
    font-size: 16px !important;
    
}

.headerings {
    text-align: left;
    font-size: 17px !important;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
}

#N {
    position: relative;
    display: block;
    margin: 0 auto;   
    text-align: center; 
    background-color: rgb(13, 248, 248);    
}


.btnForCalc {
    
    border: 1px solid #316ED6; 
    background-color: rgb(172, 192, 228); 
    font-size: 15px !important;   

}

input[type=checkbox] {
    transform: scale(1.3);
}

#geogr{
    text-align:center;
}

#f{
    float:left;
    font-size: 15px !important;
}

#l{ 
    vertical-align:middle; 
    font-size: 15px !important;   
    
}

#buttonOfN1{
    float:right;
}

#proj{
    text-align:center;
}

#x{
    float:left;
    font-size: 15px !important; 
}

#y{ 
    vertical-align:middle; 
    font-size: 15px !important;    
}

#buttonOfN2{
    float:right;
}

.inst{
    font-family: Arial, Helvetica, sans-serif;
    color: white;
}

a:hover {
    color: rgb(243, 12, 4);
}

#helpInfos{
    font-size: 15px;
    text-align: justify;
    display: none;
    font-family: Arial, Helvetica, sans-serif;
}

#helpingTitle{
    color: white;
    font-size: 15px;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
}

hr.new1 {
    border-top: 1px solid red;
  }