@charset "UTF-8";

html, body {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	display: grid;
	background-color:#F7F7F7 }

button {
	background-color: #FF0000;
	color: white;
	padding: 14px 20px;
	margin: 8px 0;
	border: none;
	cursor: pointer;
	width: 100%;
}
		button:hover {
		  opacity: 0.8;
		}
 img {
     max-width: 100%;
     display: block;
     height: auto;
     width: auto;
     image-rendering: -webkit-optimize-contrast;
    /* mejora la calidad renderizada de imagenes en chrome */
}

/* ------------------------------------ LOGIN ------------------------------------------ */



.login-container {
	background-color: #F7F7F7;
	height:100vh;
	width:100%;
	display: flex;	
	flex-direction: column;
	justify-content:flex-start; /* justificacion Vertical en flex column */
	align-items: center; /* justificacion Horizontal en flex column */
	font-family: 'Roboto', sans-serif;
	background-color:;
}
.login-form-container {
    display: flex;
    background-color: #F7F7F7;
    height: auto;
    width: 20%;
    min-width: 320px;

	background-color:;
    margin-top: 100px;
    flex-direction: column;
    justify-content: flex-start; /* justificacion Vertical en flex column */
    align-items: center; /* justificacion Horizontal en flex column */
}
.login-form-logo {
    display: flex;
    height: auto;
    width: 100%;




	background-color:;
    margin-top: 5px;
    flex-direction: column;
    justify-content: flex-start; /* justificacion Horizontal en flex column */
    margin-bottom: 5px;
}
.login-form-logo-image {
    height: auto;
    width: 50%;
    max-width: 400px;
}
.login-form-user {
    display: flex;
    height: auto;
    width: 100%;
    max-width: 400px;

	background-color:;
    flex-direction: column;
    justify-content: flex-start; /* justificacion Vertical en flex column */
    align-items: center;
	
}
.login-form-user-text {
	display: flex;	
	height:auto;
	width: 100%;	
	background-color:;
	flex-direction: column;
	justify-content:flex-start; /* justificacion Vertical en flex column */
	align-items: flex-start; /* justificacion Horizontal en flex column */	
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 5px;
}
.login-form-user-input-cont {
	display: flex;	
	height:auto;
	width: 100%;	
	background-color:;
	flex-direction: column;
	justify-content:flex-start; /* justificacion Vertical en flex column */
	align-items: center; /* justificacion Horizontal en flex column */	
}
.login-form-user-input-area {
    width: 100%;
    height: 45px;
    box-sizing: border-box;

	background-color:;
    border-left: 1px solid #E5E7ED;
    border-right: 1px solid #E5E7ED;
    border-bottom: 1px solid #E5E7ED;
    border-top: 1px solid #E5E7ED;
    padding-left: 15px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #bbbbbb;
    transition: 0.3s;
} 
.login-form-user-input-area:focus, input:focus {
    outline: 1px solid blue;
    color: #7E7E7E;
}
.login-form-password {
    display: flex;
    height: auto;
    width: 100%;
    max-width: 400px;

	background-color:;
    flex-direction: column;
    justify-content: flex-start; /* justificacion Vertical en flex column */
    align-items: center;
}
.login-form-password-text {
	display: flex;	
	height:auto;
	width: 100%;	
	background-color:;
	flex-direction: column;
	justify-content:flex-start; /* justificacion Vertical en flex column */
	align-items: flex-start; /* justificacion Horizontal en flex column */	
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 5px;
}
.login-form-password-input-cont {
	display: flex;	
	height:auto;
	width: 100%;	
	background-color:;
	flex-direction: column;
	justify-content:flex-start; /* justificacion Vertical en flex column */
	align-items: center; /* justificacion Horizontal en flex column */	
}
.login-form-button {
    display: flex;
    height: auto;
    width: 100%;
    max-width: 400px;

	background-color:;
    flex-direction: column;
    justify-content: flex-start; /* justificacion Vertical en flex column */
    align-items: center; /* justificacion Horizontal en flex column */
    margin-bottom: 5px;
    margin-top: 5px;
}
.button-login {
    background-color: #2652CF; /* Green */
    border-left: none;
    border-right: none;
    border-top: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    width: 100%;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: bold;
    height: 50px;
    border-bottom: 5px solid #2349B1;
    cursor: pointer;
}
.login-form-performed {		
	height:auto;
	width: 100%;
	max-width:400px;	
	background-color:;
	text-align: right;	
	justify-content:flex-start; /* justificacion Vertical en flex column */
	align-items: flex-end; /* justificacion Horizontal en flex column */
	font-size: 12px;
	font-family: 'Roboto', sans-serif;	
	font-weight:;
	color:#B2B5BA;
}


/* ----------------------------------- ADMIN DASHBOARD ------------------------------------- */
.wrapper {
	width: 100%;
	height: 100vh;
	background-color: white;
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
	justify-content: flex-start;
}

/* ---------------------------------------- Container GRID --------------------------------------- */
.grid-container {
  	display: grid;
	grid-template-columns: repeat(9, 1fr);	
	grid-template-rows: 1fr 6fr 2fr;
	grid-template-areas:
	'hd hd   hd   hd   hd   hd   hd   hd   hd'
	'sd main main main main main main main main'
	'ft ft   ft   ft   ft   ft   ft   ft   ft';
	gap: 0;
	background-color: #2196F3;
	background-color: white;
	padding: 0;
	height: 100vh;
}

/* --------------------------------------- Header GRID --------------------------------------- */
.header-gr {  
	grid-area: hd; 
	background-color: red;
	min-height:80px;
	background-color:#F7F7F7;
	border-bottom: 1px solid #CCD6F8;	
	display: grid;
	grid-template-columns: repeat(9, 1fr);	
	grid-template-areas:
	'lg inf inf inf inf inf inf inf ex';	
	gap: 0;	
	justify-content: space-between;
}

.header-logo {
	background-color:;
	display:flex;
	grid-area: lg; 
	min-width:160px;
	border-right: 1px solid #CCD6F8;
	justify-items:center; /* justificacion */
	align-items: center; /* justificacion */
	font-family: 'Raleway', sans-serif;
    font-weight: 700;
	font-size: 23px;
	padding-left: 40px;	

}   
.header-date {
	background-color:;
	grid-area: inf; 
	display:grid;		
	align-content: center;
	padding-top:7px;
} 
.header-date > div {
	background-color:;
	display:grid;
	align-items: center;
	justify-content: center;
	color:#1652F0;
	font-size: 15px;
}
.header-exit {
	background-color:;
	grid-area: ex; 
	display:flex;				  
	align-items: center; /* justificacion */
	justify-content: center;
	min-width:80px;
	max-width:120px;
	justify-self:end;
}


/* -------------------------------------- Sidebar GRID --------------------------------------- */
.sidebar-gr {  
	grid-area: sd; 
	background-color:hotpink;
	min-width:200px;
	display: flex;
	flex-direction: column;
	gap: 5px;	
	background-color:#F7F7F7;
	border-right: 1px solid #CCD6F8;
	padding-top:25px;
}

.sidebar-gr-links {
	height:30px;
	padding-left: 40px;	
	background-color:;    
	justify-items:start; /* justificacion */
	align-items: center; /* justificacion */
	font-family: 'Raleway', sans-serif;
    font-weight: 400;
	display:flex;
	flex-direction: row;
	min-width:200px;
}
.menu-icon { display:flex; height:20px; width:40px;}
.menu-text {font-size: 1rem;}

/* --------------------------------------- Content GRID --------------------------------------- */
.content-gr {  
	grid-area: main; 	
	background-color: ;	
	padding:0;	
	display: ;	
	flex-direction: row;	
	gap:0px;
	justify-content: center;	
}

/* ---------------------------------------- Footer GRID --------------------------------------- */
.footer-gr {  
	grid-area: ft; 
	background-color: cadetblue;
	background-color: black;
}

/* --------------------------------------- UPLOAD/UPDATE -------------------------------------- */
.content-gr-info {
    background-color: #FFFFFF;   
	height:100%;
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap:0px;
}
.upload-cuadro {
    background-color: #F7F7F7;     
    padding-top: 10px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 55px;
    padding-bottom: 25px;
    display: flex;
    flex-direction: column;
	border-right: 1px solid #CCD6F8;
	width: auto;
}
.upload-title-section {
    margin-bottom: 40px;
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
}
.upload-data-cont {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 7px;
    padding-bottom: 7px;
    border-bottom: 1px solid #d9d9d9;
	padding-top: 3px;
}
.upload-data-title {
    margin-right: 15px;
    font-size: 13px;
    width: 140px;
}
.upload-data-variable {
    font-size: 13px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.upload-data-variable div {
	margin-right:7px;	
	margin-bottom:5px;
}
.upload-data-info {
    font-size: 13px;
    margin-right: 15px;
    margin-left: 15px;		
}
.functionsbox {
    width: 600px;
    height: 300px;
}
.functionsbox2 {
    width: 600px;
    height: 90px;
}


.content-gr-info-photo{
	font-family: 'Raleway', sans-serif;
    font-size: 12px;
    width: 35%;
    height: auto;
    background-color: #F7F7F7;
	border-right: 1px solid #CCD6F8;
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(150px, 1fr));
    gap: 10px;
    padding: 10px;
    align-items: flex-start;
    align-content: flex-start;
	display: flex;
	flex-direction: column;
}

.minis{  
	
    display: flex;
	flex-direction: row;	
	flex-wrap:wrap;
	gap:10px;
}

.content-gr-info-photo-content {}
.content-gr-info-photo-photo {
	height: auto; width:150px;
}
.content-gr-info-photo-checkbox {} 

/* ---------------------------------------- Main ----------------------------------------- */
.main {
	background-color: ;			
	width: auto;			
	display: flex;



}
.main-menu {
	background-color:#F7F7F7;
	border-right: 1px solid #CCD6F8;
	padding-left:50px;				
	height:100%;				
	min-height:850px;
	grid-template-rows: auto;
	grid-template-columns: 1fr;
	justify-items:start; /* justificacion */
	align-items: center; /* justificacion */
	padding-top:50px;
	min-width: 200px;
}
.main-menu a{text-decoration: none;}
.main-menu a:hover{
color:blue;
transition:0.3s;}
.main-menu a:visited{
color:black;
transition:0.3s;}
.main-links {
	background-color:auto;					    
	min-height:40px;
	display: grid;
	grid-template-columns:35px auto;					    
	justify-items:start; /* justificacion */
	align-items: center; /* justificacion */
}

.main-info-container {
	padding-top:50px;
	padding-left:40px;
	background-color:white;
	height: 100%;				  
}
.container-box{
margin-top:20px;
display: flex;
flex-direction: row;					
flex-flow: wrap;					
gap:30px;
max-width:1200px;

}
.admin-box {
background-color:#F7F7F7;
height:200px;
width:200px; 
display: flex;
flex-direction: column;
justify-content:center;
align-items: center;							
}
.admin-box:hover {
background-color:#C2D0FF;
transition:0.3s;							
}
.container-box a:link {
text-decoration:none;							
}
.title-square{
margin-top:10px;
font-size:18px;								
}
.image-square{
width: 35px;
Height: 35px;
background-color: ;
display: flex;
flex-direction: column;								
}

/* ------------------------------ ADMIN VISITORS-BOTS-SUBS --------------------------------- */

                  
.main-info-title {						
background-color:auto;
height: auto;
font-size: 30px;
display:grid;
grid-template-rows: auto;
}
.main-info-cabecera {	
display: grid;
width:98%;
grid-template-columns:5% 10% 20% 15% 5% 80px 50px 55px 4%;
grid-template-rows: auto;								
gap:1%;
align-items: center; /* justificacion */
font-size: 15px;
color:#A8A8A8;
background-color:auto;
min-height: 40px;								
border-bottom: 1px solid #CCD6F8;
margin-top:30px;
} 

.main-info-datos {	/* datos de la pagina visitors */				
display: grid;
width:98%;
height:auto;
grid-template-columns:5% 10% 20% 15% 5% 80px 50px 55px 4% ;
grid-template-rows: auto;
align-items: center;
gap:1%;								 
font-size: 14px;
color:grey;
background-color:auto;
padding: 5px 0 5px 0;								
border-bottom: 1px solid #CCD6F8;


}
.main-info-cabecera-subs {	
display: grid;
width:98%;
grid-template-columns:3% 10% 18% 18% 8% 15% 50px 55px 4% 4%;
grid-template-rows: auto;								
gap:1%;
align-items: center; /* justificacion */
font-size: 15px;
color:#A8A8A8;
background-color:auto;
min-height: 40px;								
border-bottom: 1px solid #CCD6F8;
margin-top:30px;
} 

.main-info-datos-subs {	/* datos de la pagina visitors */				
display: grid;
width:98%;
height:auto;
grid-template-columns:3% 10% 18% 18% 8% 15% 50px 55px 4% 4%;
grid-template-rows: auto;
align-items: center;
gap:1%;								 
font-size: 14px;
color:grey;
background-color:auto;
padding: 5px 0 5px 0;								
border-bottom: 1px solid #CCD6F8;


}
.main-info-cabecera-bots {	
display: grid;
width:98%;
grid-template-columns:5% 10% 20% 15% 5% 80px 50px 55px 4%;
grid-template-rows: auto;
align-items: center;
gap:1%;
align-items: center; /* justificacion */
font-size: 15px;
color:#A8A8A8;
background-color:auto;
min-height: 40px;								
border-bottom: 1px solid #CCD6F8;
margin-top:30px;
} 

.main-info-datos-bots {	/* datos de la pagina visitors */		
	display: grid;
	width:98%;
	height:auto;
	align-items: center;
	grid-template-columns:5% 10% 20% 15% 5% 80px 50px 55px 4%;
	grid-template-rows: auto;
	gap:1%;								
	font-size: 14px;
	color:grey;
	background-color:auto;
	padding: 5px 0 5px 0;								
	border-bottom: 1px solid #CCD6F8;
}	
.button-bot {
background-color: #D9D9D9;
border-radius: 5px;
border: 0px solid #18ab29;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 3px 20px;
text-decoration: none;
}
.button-bot:hover {
background-color:#F01619;
transition:0.3s;
}

.button-delete {
background-color:#D9D9D9;
border-radius:5px;
border:0px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:12px;
padding:3px 14px;
text-decoration:none;
}
.button-delete:hover {
background-color: #1652F0;
transition:0.3s;
}
.button-block {
background-color: #D9D9D9;
border-radius: 5px;
border: 0px solid #18ab29;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 3px 14px;
text-decoration: none;
}
.button-block:hover {
background-color: #1652F0;
transition:0.3s;
}	

@media (max-width: 650px) {
	
	.login-form-container {		
		width: 20%;
		min-width: 350px;
	}
	.login-form-logo {		
		width: 20%;
		min-width: 350px;
	}
	.login-form-user {		
		width: 20%;
		min-width: 350px;
	}
	.login-form-password {		
		width: 20%;
		min-width: 350px;
	}
	.login-form-performed {		
		width: 20%;
		min-width: 350px;
	}
	
     
}