:root {
    --main-bg-color:rgba(15, 15, 20, 1);
    --main-color:rgba(212, 167, 41, 1);
    --plano-color:rgba(25, 25, 25, 1);
    --plano-bg-color:rgba(240, 240, 240, 1); 
    --siguiente-bg-color: rgba(0,150,0,0.5);
    --siguiente-color: rgba(240,240,240,1);
    --dibujar-bg-color: rgba(0,150,0,0.5);
    --dibujar-color: rgba(240,240,240,1);
    --imprimir-bg-color: rgba(0,0,150,0.5);
    --imprimir-color: rgba(240,240,240,1);
    --fuente: Verdana, Geneva, Tahoma, sans-serif; 
    --letra-formulario: 0.8em;   
    --letra-item-menu: rgba(10,10,10,1);
    --letra-bg-item-menu:  rgba(230,230,230,1);
  }

* {
    box-sizing: border-box;
  }

  html{
      height:100%;
      padding:0;
      margin:0;
  }

  body{
    background-color: var(--main-bg-color);
    color:var(--main-color);
      padding:0;
      margin:0;
      /* height: 100%; */
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      font-family: var(--fuente);
      /* background-size: cover; */
  }

  #cuerpoPrincipal{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: rgba(10,10,10,1);
    opacity: 1;
    /* height: 100%;
    background-size: cover; */
  }

  header{
      padding-top: 5px;
      padding-bottom: 5px;
      display: flex;
      background-color: var(--main-bg-color);
      color:var(--main-color);
      background: rgba(26,26,26,1);
      background: -moz-linear-gradient(top, rgba(26,26,26,1) 0%, rgba(31,31,31,1) 12%, rgba(36,36,36,1) 25%, rgba(26,26,26,1) 39%, rgba(15,15,15,1) 50%, rgba(0,0,0,1) 51%, rgba(5,5,5,1) 60%, rgba(15,15,15,1) 76%, rgba(10,10,10,1) 91%, rgba(5,5,5,1) 100%);
      background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(26,26,26,1)), color-stop(12%, rgba(31,31,31,1)), color-stop(25%, rgba(36,36,36,1)), color-stop(39%, rgba(26,26,26,1)), color-stop(50%, rgba(15,15,15,1)), color-stop(51%, rgba(0,0,0,1)), color-stop(60%, rgba(5,5,5,1)), color-stop(76%, rgba(15,15,15,1)), color-stop(91%, rgba(10,10,10,1)), color-stop(100%, rgba(5,5,5,1)));
      background: -webkit-linear-gradient(top, rgba(26,26,26,1) 0%, rgba(31,31,31,1) 12%, rgba(36,36,36,1) 25%, rgba(26,26,26,1) 39%, rgba(15,15,15,1) 50%, rgba(0,0,0,1) 51%, rgba(5,5,5,1) 60%, rgba(15,15,15,1) 76%, rgba(10,10,10,1) 91%, rgba(5,5,5,1) 100%);
      background: -o-linear-gradient(top, rgba(26,26,26,1) 0%, rgba(31,31,31,1) 12%, rgba(36,36,36,1) 25%, rgba(26,26,26,1) 39%, rgba(15,15,15,1) 50%, rgba(0,0,0,1) 51%, rgba(5,5,5,1) 60%, rgba(15,15,15,1) 76%, rgba(10,10,10,1) 91%, rgba(5,5,5,1) 100%);
      background: -ms-linear-gradient(top, rgba(26,26,26,1) 0%, rgba(31,31,31,1) 12%, rgba(36,36,36,1) 25%, rgba(26,26,26,1) 39%, rgba(15,15,15,1) 50%, rgba(0,0,0,1) 51%, rgba(5,5,5,1) 60%, rgba(15,15,15,1) 76%, rgba(10,10,10,1) 91%, rgba(5,5,5,1) 100%);
      background: linear-gradient(to bottom, rgba(26,26,26,1) 0%, rgba(31,31,31,1) 12%, rgba(36,36,36,1) 25%, rgba(26,26,26,1) 39%, rgba(15,15,15,1) 50%, rgba(0,0,0,1) 51%, rgba(5,5,5,1) 60%, rgba(15,15,15,1) 76%, rgba(10,10,10,1) 91%, rgba(5,5,5,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a1a1a', endColorstr='#050505', GradientType=0 );
  }

 #encabezado{
  background-color: var(--main-bg-color);
  color:var(--main-color);
  border-top: solid 2px var(--main-color); 
  border-bottom: solid 2px var(--main-color); 
  /* position:fixed; */
  left:0px;
  top:0;
  width: 100%;
  display: flexbox;
  flex-direction: column;
  flex-wrap: nowrap;
}

  #portaLogo{
    width: 100%;
    display:flex;
    flex-direction:row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-left: 5px;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-right: 5px;

   
  }

  h1{
      padding:3px;
      margin:0;
      font-family: Arial, Helvetica, sans-serif;
      font-stretch: semi-condensed;
      font-size: 2em;
   }


  nav{
    display: flex;
    background-color: var(--main-color);
    color:var(--main-bg-color);   
    font-size: 1em;
    padding-left: 5px;
    padding-top: 5px;
    background: rgba(241,231,103,1);
    background: -moz-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(252,183,8,1) 72%, rgba(252,183,8,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(241,231,103,1)), color-stop(72%, rgba(252,183,8,1)), color-stop(100%, rgba(252,183,8,1)));
    background: -webkit-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(252,183,8,1) 72%, rgba(252,183,8,1) 100%);
    background: -o-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(252,183,8,1) 72%, rgba(252,183,8,1) 100%);
    background: -ms-linear-gradient(top, rgba(241,231,103,1) 0%, rgba(252,183,8,1) 72%, rgba(252,183,8,1) 100%);
    background: linear-gradient(to bottom, rgba(241,231,103,1) 0%, rgba(252,183,8,1) 72%, rgba(252,183,8,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#fcb708', GradientType=0 );
    height: 30px;

    }

  aside{
    display: flex;
    background-color: var(--main-color);
    color:var(--main-bg-color);  
  }


main{
  
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    background-color: var(--main-bg-color);
    color:var(--main-color);
    border: solid 1px rgba(50,50,50,0.5);
    padding-right: 1em;
    padding-left: 1em;
    padding-bottom: 25px;
    margin-bottom: 0;
}


#datosYEstaciones{
  background-color: var(--main-bg-color);
  color:var(--main-color);
    padding:0;
    margin:3px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 350px;
}

#plano{
  display: flex;
  justify-content: center; 
  width: 62%;
  border: solid 1px var(--main-color); 
  background-color: rgba(250,250,250,1);
  margin: 3px;
  margin-top:15px;
  }

#datos{
    display: flex;
   
  
   
    margin: 3px;
  
}

#estaciones{
    display: flex;
   


    margin: 3px;
   
}


  #fincaMatriz{

  }

#matrizPeque{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.entradaMatriz{
  display:flex;
  font-size: 0.8em;
  margin-top: 1px;
}

#inputMatrizNumero{

}

#inputMatrizFolio{

}

#inputMatrizLibro{

}

.entrada{
  min-width: 40%;
  width: 100%;
  font-size: var(--letra-formulario);
}

#fincaDe{
  font-size: 0.8em;
  width: 100%;
}

#cajaNaturaleza{
  margin-top: 5px;
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 0.9em;
}

#cajaRustica, #cajaUrbana{
  display:flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

#tiposPosicion{
  margin-top: 5px;
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 0.9em;
  margin-bottom: 5px;
}

.puntoEstacion{
  min-width: 40%;
  width: 45%;
  font-size: var(--letra-formulario);
  margin: 1px;
}
@media only screen and (max-width:1000px) {
    /* For mobile phones: */
    #plano {
     width: 97%;
    }
    #datosYEstaciones{
     width: 97%;
     flex-direction: row;
    }

    #datos{
    width: 47%;
    }

    #estaciones{
     width: 47%;
    }
  }

  @media only screen and (max-width:700px) {
    /* For mobile phones: */
    #plano {
  
    }
    #datosYEstaciones{
      flex-direction: column;
    }

    #datos{
    width: 100%;
    }

    #estaciones{
     width: 100%;
    }

    #formularioRegistro{
      width: 90%;
    }

    #formularioOlvido{
      width: 90%;
    }

    #formularioLogin{
      width: 90%;
    }

  }


  @media only screen and (max-width:350px) { 
  h1{
    padding:3px;
    margin:0;
    font-family: Arial, Helvetica, sans-serif;
    font-stretch: semi-condensed;
    font-size: 1.5em;
 }

 img{
   height: 30px;
 }

}


@media only screen and (max-width:310px) { 
  h1{
    padding:2px;
    margin:0;
    font-family: Arial, Helvetica, sans-serif;
    font-stretch: semi-condensed;
    font-size: 1.1em;
 }

 img{
   height: 20px;
 }


}
}


  #contenedorTextArea{
    display: inline-block;
    width: 100%;
    min-height: 25px;
    border: solid 1px var(--main-bg-color);
    font-size: 0.7em;
    background-color: var(--plano-bg-color);
    color: var(--main-bg-color);  
    width: 100%;
    line-height: 10pt;
  }
  

  #contenedorValidar{
    background-color: var(--siguiente-bg-color);
    color: var(--siguiente-color);
    border:solid 1px var(--siguiente-bg-color);
    width: 40%;
    margin-left:auto;
    margin-right: 0;
    text-align: center;
    font-size: 0.8em;
    border-radius: 5px;
    padding-bottom: 2px;
    margin-top: 10px;

  }

  #siguienteDibujar{
    background-color: var(--dibujar-bg-color);
    color: var(--dibujar-color);
    border:solid 1px var(--dibujar-bg-color);
    width: 40%;
    margin-left:auto;
    margin-right: 0;
    margin-bottom: 3px;
    text-align: center;
    font-size: 0.8em;
    border-radius: 5px;
    padding-bottom: 2px;
    display: inline-block;
  }

  #siguienteImprimir{
    background-color: var(--imprimir-bg-color);
    color: var(--siguiente-color);
    border:solid 1px var(--imprimir-bg-color);
    width: 40%;
    margin-left:0;
    margin-right: auto;
    margin-bottom: 3px;
    text-align: center;
    font-size: 0.8em;
    border-radius: 5px;
    padding-bottom: 2px;
    display: inline-block;
  }

  #textoEstaciones{
      padding:5px;
      width: 100%;       
    
  }

  .tiposRadio{
      display: block;
  }

  #impresionCanvas{
      display:block;
  }



  footer{
    background-color: var(--main-color);
    color:var(--main-bg-color);   
    /*border-top: solid 1px var(--main-color); */
    position:fixed;
    left:0px;
    bottom:0px;
    width: 100%;
   }





#portaPlano{
  background-color: var(--plano-bg-color);
  color: var(--plano-color);
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center; 
  width: 100%;
  padding: 0px;
  margin-top:3px;
}

 
#imagenPlano{
  display: block;
  background-color: var(--plano-bg-color);
  color: var(--plano-color);
  margin-right: 0;
  margin-left: auto;
  padding-right: 0px;


}

#imagenInicio{
  display: block;
  width: 100%;
  border-bottom: solid 3px var(--main-color);
  opacity: 0.15;
}

.itemMenu{
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
  font-size: 1.1em;
  border-right: solid 1px var(--main-bg-color);
  display: flex;
  align-items: center;
  cursor:pointer;
  font-weight: normal;
  font-family: "Oswald", "Helvetica Neue", sans-serif;
  color: var(--letra-item-menu);
  opacity:1;
}

.itemMenu:hover{
  color: var(--imprimir-color);
}


p {
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
   
}

#itemInicio{

}

#inicio{
  width: 100%;

}


#espacioSuperior{
  display: block;
  width: 100%;
  margin-top:70px;

}

#obtenerGPS{
  background-color: var(--imprimir-bg-color);
  color: var(--siguiente-color);
  border:solid 2px var(--imprimir-bg-color);
  width: 45%;
  margin-left:0;
  margin-right: auto;
  margin-bottom: 3px;
  text-align: center;
  font-size: 0.8em;
  border-radius: 5px;
  padding-bottom: 2px;
  display: inline-block; 
  cursor:pointer;
}

#mensajeInicio{
  position: relative;
  display:block;
  vertical-align: middle;
  text-align: center;
  font-size: 1em;
  background-color: var(--main-color);
  color: var(--main-bg-color);
  padding: 10px;
  margin-top: 50px;
  margin-bottom: 5px;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 30px;
  border: solid 1px rgba(50,50,50,0.2);
  opacity: 0.8;
  height: auto;
}


#tituloPlano{
  display:block;
  width: 100%;
  color: var(--dibujar-color);
  margin-top: 0px;
  text-align: center;
  font-size: 1.5rem;
  vertical-align: middle;
}


#ayuda{
  display: none;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;

}

#funcionOrigen{
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--dibujar-color);
  background-color: rgba(0,0,255,0.4);
  margin-right: 10px;
  border-radius: 10px;
  height: 30px;
  font-size: 1em;
  align-items: center;
  justify-content: center;
  padding-left: 10px;
  padding-right: 10px;
  border: solid 1px rgba(0,0,255,0.7);
  margin-top: 30px;
  margin-bottom: 30px;
  width: 200px;
}

#portaAyuda{
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--dibujar-color);
  background-color: rgba(0,0,255,0.1);
  margin-right: 10px;
  border-radius: 5px;
  height: 30px;
  font-size: 1em;
  align-items: center;
  justify-content: center;
  padding-left: 10px;
  padding-right: 10px;
  border: solid 1px rgba(0,0,255,0.7);
  margin-top: 10px;
  margin-bottom: 10px;
  min-width: 80%;
}

#sesion{
  display: none;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

#postM{
  font-size: 1em;
}

.tituloFormulario{
  background-color: rgba(150,150,150,1);
  margin-top: -10px;
  margin-left: -10px;
  margin-right: -10px;
  font-size: 1.5em;
  padding-bottom: 10px;
  padding-left: 10px;
}

#formularioLogin{
  background-color: var(--main-color);
  color: var(--imprimir-color);
  padding: 10px;
  display:flex;
  flex-direction:column;
  min-width: 50%;
  height: 325px;
  opacity: 0.9;
  opacity: 0.9;
  border: solid 1px  rgba(150,150,150,1);
}


#formularioOlvido{
  background-color: var(--main-color);
  color: var(--imprimir-color);
  padding: 10px;
  display:none;
  flex-direction:column;
  min-width: 50%;
  height: 325px;
  opacity: 0.9;
  border: solid 1px  rgba(150,150,150,1);
}


#formularioRegistro{
  height: 325px;
  background-color: var(--main-color);
  color: var(--imprimir-color);
  padding: 10px;
  display: none;
  flex-direction:column;
  min-width: 50%;
  opacity: 0.9;
  border: solid 1px  rgba(150,150,150,1);
}
#inputUsername{
  font-size: 1.3em;
  margin-top: 10px;
}

#inputPassword{
  font-size: 1.3em; 
  margin-top: 10px;
}



#apiArea{
  margin-top: 20px;
  background-color: var(--main-color);
  color: rgba(0,0,0,1);
  padding: 10px;
  display:flex;
  flex-direction:column;
  min-width: 600px;
  max-width: 800px;
  height: 250px;
}


#emailInputRegister{
  font-size: 1.3em; 
  margin-top: 10px;
}

#inputRecuperar{
  font-size: 1.3em; 
  margin-top: 10px;
}

#phonenumberRegister{
  font-size: 1.3em; 
  margin-top: 10px;
}

#passwordInputRegister{
  font-size: 1.3em; 
  margin-top: 10px;
}

#confirmationpassword{
  font-size: 1.3em; 
  margin-top: 10px;
}

#paisTelefono{
  display: inline-block;
  width: 60px;
  font-size: 1.3em; 
  margin-top: 10px;
}

#ucPadre {
  display: flex;
  align-items: center;
}


#desplegadoUsuario{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  color: var(--siguiente-color);
  border-radius: 10px;
  /* border: solid 1px rgba(150,150,150,0.3); */
  background-color: var(--main-bg-color);
  margin-left: 5px;
  margin-right: 10px;
  font-size: 0.8em;

}
#usuarioConectado{
  display: flex;
  font-size: 1.5em;
  color: rgba(0,255,0,1);
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 3px;
}
               
#botonIniciarSesion{
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
  background: rgba(10,150,255,1);
  color: rgba(255,255,255,1);
  height: 22px;
  border-radius: 5px;
  border: solid 1px blue;
  font-weight: 600px;
  margin-left: 5px;
  cursor: pointer;
  font-size: 0.8em;
  padding-left: 3px;
  padding-right: 3px;
  opacity: 1;
  min-width: 100px;
}


#grupoEntrar{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top:20px;
  justify-content: space-between;


}
#botonEntrar{
  display:flex;
  cursor: pointer;
  color: var(--dibujar-color);
  background-color: var(--dibujar-bg-color);
  margin-right: 10px;
  border-radius: 10px;
  height: 30px;
  font-size: 1.2em;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  border: solid 1px green;
}


#botonRecuperar{
  display:flex;
  cursor: pointer;
  color: var(--dibujar-color);
  background-color: var(--dibujar-bg-color);
  margin-right: 10px;
  border-radius: 10px;
  height: 30px;
  font-size: 1.2em;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  border: solid 1px green;
  max-width: 100px;
}

#botonOlvido{
  display:flex;
  cursor:pointer;
  font-size: 0.8em;
  font-style: oblique;
  text-decoration: underline;
}

#regresarDeOlvido{
  display:flex;
  cursor:pointer;
  font-size: 0.8em;
  font-style: oblique;
  text-decoration: underline;
}


#grupoRegistrarse{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top:20px;
  justify-content: space-between;


}
#mainbutton{
  display:flex;
  cursor: pointer;
  color: var(--dibujar-color);
  background-color: var(--dibujar-bg-color);
  margin-right: 10px;
  border-radius: 10px;
  height: 30px;
  font-size: 1.2em;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
  border: solid 1px green;
}
#regresarRegistrarse{
  display:flex;
  cursor:pointer;
  font-size: 0.8em;
  font-style: oblique;
  text-decoration: underline;

}


#invitacionRegistrarse{
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--dibujar-color);
  background-color: var(0,0,0,0);
  margin-right: 10px;
  border-radius: 10px;
  height: 30px;
  font-size: 1em;
  align-items: center;
  justify-content: center;
  padding-left: 10px;
  padding-right: 10px;
  border: solid 1px rgba(0,0,255,0.2);
  margin-top: 30px;
  width: 100%;
}

#hipo{
  display:flex;
  overflow: hidden;
  border: solid 1px green;
  height: auto;
}