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

}

/*padrão cores  azul   background-color: #1565C0;
cinza rodape 	#2F4F4F */

html, body{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  
    height: 100%;
   
}

html{
  background-color: rgba(210, 208, 215, 0.248);
 

}



#titulo{
  color: #1565C0;
  font-size: 50px;
  text-align: center;
  margin-top: 50px;
  margin: 10px;
}



#contener-geral{
  width: 80%;
  padding: 20px;
  background-color: rgb(255, 255, 255);
  margin: auto;
  margin-top: 100px;
 
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.134);
  border-radius: 5px;
}

label{
 color: rgb(34, 36, 36);
 font-size: 14px;
 margin-right: 10px;

}




#contener-informacao input{
width: 400px;
height: 35px;
border-color: solid 1px rgb(137, 136, 136);
outline: none !important;

}

input:focus {
  outline: none;
  border-color: solid 1px rgb(137, 136, 136);

}


input{
  outline: none !important;
  border: solid 1px rgb(119, 119, 119);
  margin-top: 5px;
  padding: 5px;
}



input:hover{
  background-color: rgb(255, 253, 199); 
  outline: none !important;


}



/*chome*/
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/*mozila*/
input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}



input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input::placeholder{
  color: rgb(129, 135, 141);
  font-size: 14PX;
  padding-left: 5px;

}




#contener-adicionar{
  width: 100%;
 display: flex;

 align-items: flex-end; /* Alinha os itens pela base (bottom) */
 margin-top: 10px;

}



#contener-adicionar input{
  width: 183px;
  height: 30px;
  margin-right: 3px;
}

#contener-adicionar button{
  width: 200px;
  height: 30px;
 

 
}


#contener-label{
  width: 100%;
  background-color: rgba(164, 164, 172, 0.659);
  display: flex;
  margin-top: 30px;
  border-radius: 7px;
}




.label-resultados{
  width: 150%;

padding: 10px 10px 10px 10px;
margin-right: 20px;
font-size: 14px;
text-align: center;
font-weight: 500;


}


#contener-resultado{
  width: 100%;  



}

#contener-geral-dados{
  display: flex;
  width: 100%;
  
}

#contener-dados{
  display: inline-block;
  width: 150px;

font-size: 14px;
color: rgb(31, 32, 32);


margin-right: 20px;
text-align: center;
}



#contener-dados2{
  display: inline-block;
  padding: 10px 10px 10px 10px;
margin-right: 30px;

}




#contener-dados button{
background-color: transparent;
border: none;
cursor: pointer;
}


#contener-acao{
 display: flex;
}

#contener-total{
  display: flex;
  width: 100%;
  height: 35px;
  justify-content:space-between;
  background-color: rgba(227, 227, 228, 0.659);
  border-radius: 5px;
  align-items: center; /* Alinha os itens pela base (bottom) */
  padding-right: 10px;
  margin-bottom: 50px;
  margin-top: 50px;
  padding: 10px;
  

 
}

#span-total-metros{
  color: rgb(43, 41, 41);
  
}

#span-total {
  color: red;
  font-weight: 700;


}

#contener-btn-projeto-salvo{
  display: flex;
}



#btn-salvar, #btn-historico{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 40px;
  background-color: #1565C0;
  color: white;
  border: none;
  margin: 5px;
  font-size: 18px;
  border-radius: 5px;
  font-size: 14px;
}



#btn-historico a{
 display: flex;
 justify-content: center;
 align-items: center;
  text-decoration: none;
  color: white;
  font-size: 14px;

 


}

#btn-copiar, #btn-copiar2{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 40px;
  background-color: #e98913;
  color: white;
  border: none;
  margin: 5px;
  font-size: 18px;
  border-radius: 5px;
  font-size: 14px;
}

#btnShare, #btnShare2{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 40px;
  background-color: #0be248;
  color: white;
  border: none;
  margin: 5px;
  font-size: 18px;
  border-radius: 5px;
  font-size: 14px;

}

button:hover{
  opacity: 80%;
  cursor: pointer;
}




img{
  margin: 5px;
}

#ajuda{
  width: 600px;
  background-color: rgba(246, 235, 152, 0.707);
  padding: 5px;
  font-size: 13px;
  border-radius: 5px;
  color: #292b2b;
  margin: auto;
  margin-top: 10px;
}

#mensagem, #mensagem2{
  display: none;
  width: 200px;
  background-color: #0be248;
  padding: 5PX;
  font-size: 13PX;
  color: #333737;
  border-radius: 5px;
 align-items: center;
 justify-content: center;
 

}

#icone-hist{
  width: 35px;
 margin-right: 20px;
}



#icones{
  width: 20px;
 margin-right: 20px;
}

#contener-projeto-salvo-geral{
  background-color: white;
  width: 80%;
  margin: auto;
  padding: 20px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.134);
  border-radius: 5px;
  padding-bottom: 50px;
 

}

#h1{
  color: #333737;
  font-size: 30px;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 50px;
}


#contener-projeto-salvo{
  width: 100%;
  margin: auto;
  background-color: white;
  border-radius: 5px;
}

#contener-dados-salvo{
  display: flex;
 
}

#contener-dados-h{
  width: 16.66%;
  font-size: 14px;
  margin-right: 20px;
  text-align: center;
}

#span-total-metros2{
  color: #292b2b;
}

#span-total2{
  font-weight: 500;

}

#contener-total2{
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 20px;
  background-color: rgba(227, 227, 228, 0.659);

  padding: 10px;
}

#anuncio{
  height: 10px;
  margin-top: 50px;

}

#contener-conteudo{
  width: 80%;
  margin: auto;
}


@media screen and (max-width: 1025px) {
  /* Redefina estilos ou adicione estilos específicos para dispositivos de tela pequena */

  #contener-adicionar input{
    width: 150px;
   
  }


}

@media screen and (max-width: 880px) {
  /* Redefina estilos ou adicione estilos específicos para dispositivos de tela pequena */

  #contener-adicionar input{
    width: 130px;
   
  }


}



  /* Estilos para dispositivos de tela pequena */

  @media screen and (max-width: 768px) {
    /* Redefina estilos ou adicione estilos específicos para dispositivos de tela pequena */

    #contener-geral{
      width: 95%;
    }

    #contener-adicionar input{
      width: 100%;
     
    }

    label{
      padding-right: 5px;
      margin: 0px;
    }


    .label-resultados{
      display: flex; 
      font-size: 11px;    
    
      margin: 1px;
    }

    #contener-dados{
      display: flex;     
    
      margin: 1px;
     
    }
    #contener-projeto-salvo-geral{
      width: 95%;
    }
 
  #ajuda{
    width: 100%;
  }
 
  }






  /* Estilos para dispositivos de tela pequena */

  @media screen and (max-width: 582px) {
    /* Redefina estilos ou adicione estilos específicos para dispositivos de tela pequena */
    #contener-informacao input{
      width: 300px;
      }

      #contener-adicionar input{
        width: 70px;
       
      }
      #ajuda{
        width: 90%;
      }

      #contener-projeto-salvo-geral {
        width: 95%;
      }

      #contener-dados-h{
        width: 100%;
        font-size: 11px;
        margin: 1px;
        text-align: center;
       
      }

      #btn-copiar, #btn-copiar2{
        font-size: 14px;
      
      }
      
      #btnShare, #btnShare2, #btn-salvar{
       font-size: 14px;
      
      }
      a{
        font-size: 14px;
      
      }

      #mensagem, #mensagem2{
        margin: auto;
        margin-top: 10px;      
         
         }

   
  }

  @media screen and (max-width: 701px) {
    /* Redefina estilos ou adicione estilos específicos para dispositivos de tela pequena */
    #contener-adicionar{
      width: 100%;
      flex-wrap: wrap;
     
    
    }
 
      #contener-adicionar input{
        width: 100%;
        flex: 0 0 calc(50% - 10px); /* Para dividir em duas colunas e considerar margens */
        margin-bottom: 5px;
        
       
      }
      
#contener-projeto-salvo-geral {
  width: 95%;
}

label{
  width: 50%;
  padding-right: 10px;

}

#contener-dados-h{
text-align: left;
padding: 5px;
 
 
}

#btn-adicionar{
  margin-top: 10px;
}


  }

  @media screen and (max-width: 501px) {
    /* Redefina estilos ou adicione estilos específicos para dispositivos de tela pequena */
    #contener-adicionar{
      width: 100%;
      flex-wrap: wrap;
     
    
    }

    #contener-informacao input{
      width: 100%;
      }

 
      #contener-adicionar input{
        width: 100%;
        flex: 0 0 calc(50% - 10px); /* Para dividir em duas colunas e considerar margens */
        margin-bottom: 5px;
        
       
      }

      #mensagem, #mensagem2{
     margin: auto;
     margin-top: 10px;      
      
      }

      
#btn-copiar, #btn-copiar2{
  font-size: 14px;

}

#btnShare, #btnShare2, #btn-salvar{
 font-size: 14px;

}
a{
  font-size: 14px;

}

#contener-dados-h{
  width: 16.66%;
  font-size: 11px;
  margin: 1px;
 
 
}



#contener-dados-salvo{
  display: flex;

}

#contener-btn-projeto-salvo, #contener-acao{
  display: block;
}

#btn-salvar, #btn-historico, #btn-copiar, #btn-copiar2, #btnShare, #btnShare2{
  width: 90%;
  margin: auto;
  margin-top: 10px;
}


#contener-projeto-salvo-geral {
  width: 95%;
}

.label-resultados{
  width: 14.28%;

 }

 #contener-dados{
  width: 14.28%;
 padding: 10px;

 }




}




   
  @media screen and (max-width: 415px) {
    /* Redefina estilos ou adicione estilos específicos para dispositivos de tela pequena */
   
    #contener-informacao input{
      width: 100%;
      }
  }
  
  @media screen and (max-width: 401px) {
    /* Redefina estilos ou adicione estilos específicos para dispositivos de tela pequena */

    #contener-adicionar{
      width: 100%;
      flex-wrap: wrap;
     
    
    }

    
    #contener-informacao input{
      width: 100%;
      }

      #contener-adicionar input{
        width: 100%;
        flex: 0 0 calc(50% - 10px); /* Para dividir em duas colunas e considerar margens */
        margin-bottom: 5px;
        
       
      }


  }



  @media screen and (max-width: 425px) {
    /* Redefina estilos ou adicione estilos específicos para dispositivos de tela pequena */
    #contener-adicionar{
      width: 100%;
      flex-wrap: wrap;
     
    
    }
 
      #contener-adicionar input{
        width: 100%;
        flex: 0 0 calc(50% - 10px); /* Para dividir em duas colunas e considerar margens */
        margin-bottom: 5px;
        
       
      }

      #contener-geral {
        width: 95%;
      overflow-x: auto;
      white-space: nowrap; /* Isso impede que o conteúdo quebre para a próxima linha */
      }

      #contener-total{
        width: 200%;
      }
      #contener-resultado{
        width: 200%;
      }
      #contener-acao{
        width: 200%;
      }
      #ajuda{
        width: 200%;
      }

     

      #contener-projeto-salvo-geral {
        width: 95%;
      overflow-x: auto;
      white-space: nowrap; /* Isso impede que o conteúdo quebre para a próxima linha */
      }

      #contener-label {
        width: 200%;
    
      }

      #contener-dados-salvo{
        width: 200%;
        
      }
      #contener-total2{
        width: 200%;
      }

      #contener-btn-projeto-salvo{
        width: 200%;
      }

      #mensagem, #mensagem2{
       margin-left: 50%;
      }

      
      label{
        width: 50%;
        padding-right: 5px;
      }   
    
         }



  @media screen and (max-width: 391px) {
    /* Redefina estilos ou adicione estilos específicos para dispositivos de tela pequena */

 
      #contener-adicionar input{
        width: 100%;
        flex: 0 0 calc(50% - 10px); /* Para dividir em duas colunas e considerar margens */
        margin-bottom: 5px;       
      }

      label{
        width: 100%;
        padding: 0px;
      }       
 

  }



  @media screen and (max-width: 376px) {
    /* Redefina estilos ou adicione estilos específicos para dispositivos de tela pequena */

 
      #contener-adicionar input{
        width: 100%;
        flex: 0 0 calc(50% - 10px); /* Para dividir em duas colunas e considerar margens */
        margin-bottom: 5px;   
       
      }
      label{
        width: 100%;
        padding: 0px;
      }
  }