/*estilos de grid*/

html{
    height: 100%;
}

body{
    min-height: 100%;
    margin: 0;
}

			/*tamaño movil*/
.grid-container{
    display: grid;
    gap:10px;
    grid-template: 
    "header"    		100px  
	"mapa"      		auto
    "footer"    		60px;
}
/*creo todas las clases del grid donde se indica sus tamaños y la distribucion*/
.header{
    grid-area: header;
    display: grid;
    background-color:white;
	color:black;
	padding: 5px;
	overflow:hidden;
	font-family: azo-sans-web, sans-serif;
    grid-template: 
    "logo titulo subtitulo logodip" auto  /
    auto 6fr 4fr auto
    ;
}
.subtitulo{
    grid-area: subtitulo;
    align-self: center;
}

#header_logo {
	float: left;
	background-color: #fff;
	margin-left: 15px;
	height: 90px;
	width: 280px;
}
#logodip {
    grid-area: logodip;
	float: left;
	background-color: #fff;
	margin-left: 15px;
	height: 90px;
	width: 280px;
}


.logo{
    grid-area: logo;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
	background-color: #fff;
	margin-left: 15px;
}

.titulo{
    grid-area: titulo;
    margin-left: 15px;
    align-self: center;
}


#header a{color:white;}


.footer{
    grid-area: footer;
    display: grid;
    background-color: #e86e59;
	color:white;
	text-align: center;
	font-size: 0.9em;
	list-style-type:none;
    grid-template: 
    "logouja uja" auto  /
     auto auto 
    ;
}
.logouja{
    grid-area:logouja;
    justify-self: end;
}
.uja{
    grid-area: uja;
    justify-self: start;
    align-self: center;
    padding-left: 10px;

}

.importar{
    grid-area: importar;
    display: grid;
	gap:3px;
    align-items: center;
    margin: 5px;
    /* background-color: blueviolet; */
	grid-template: 
    "csv botoncsv" auto
	"gpx botongpx" auto
    "txt botontxt" auto  /
    200px auto 
    ;
}

.gpx{
    grid-area: gpx;
    display: flex;
    align-items: center;
}

.csv{
    grid-area: csv;
    display: flex;
    align-items: center;
}
.txt{
    grid-area: txt;
    display: flex;
    align-items: center;
}

.botongpx{
    grid-area: botongpx;
    display: flex;
    align-items: center;
}

.botoncsv{
    grid-area: botoncsv;
    display: flex;
    align-items: center;
}

.botontxt{
    grid-area: botontxt;
    display: flex;
    align-items: center;
}

.mapa{
    grid-area: mapa;
    display: grid;
	
    background-color:red;
    
}




.tabla{
    grid-area: tabla;
    margin: 5px;
    /* background-color: rgb(163, 255, 127); */
}


#customFile .custom-file-control:lang(en)::after {
	content: "Select file...";
  }
  
#customFile .custom-file-control:lang(en)::before {
	content: "Click me";
  }
  
  /*when a value is selected, this class removes the content */
.custom-file-control.selected:lang(en)::after {
	content: "" !important;
  }
  
.custom-file {
	overflow: hidden;
  }
.custom-file-control {
	white-space: nowrap;
  }