@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Poppins&subset=latin-ext');
@import "reset.css";

:root
{
	--colorFondo: #FFF;
	--colorPrincipal: #24418F;	
	--colorFuente: #FFF;
	--colorEditFoco: #003;
	--colorFuenteEditFoco: #FFF;
	--colorBotonComprobar: #003;
	--colorFuenteBotonComprobarFoco: #003;
	--colorBotonesInOutFoco: #FFF;
	--colorFuenteBotonesInFoco: #003;
	--colorFuenteBotonesOutFoco: #003;
}

body
{
	color: var(--colorFondo); 
	font-family: Poppins, Helvetica, sans-serif; 
	overflow: hidden; 
	margin: 0px; 
	padding: 0px;
}

#cabecera 
{ 
	position: fixed; 
	top: 0px;
	width: 100%; 
	height: auto;  
}

#cabecera #logo
{
	position: absolute; 
	width: 340px;
	height: 70px; 
}

#Cuerpo
{
	background-color: var(--colorPrincipal);  	
	position: absolute; 
	font-size: 16px; 
	top: 69px; 
	text-align: center; 
	width: 320px;
	height: 270px;
	padding: 5px 10px;
	border-radius: 0px 0px 15px 0px; 
	border-top: 0px;
}

#FormAccesoTrab
{
	position: relative; 
	margin: 0px auto; 
	text-align: start; 
	border: 0px solid;
}

#FormAccesoTrab #IconoUsuario
{
	font-size: 54px; 
	float: left; 
	margin-top:10px;
}

#FormAccesoTrab #DatosAcceso
{
	position: relative; 
	margin: 0px 5px 0px 50px;
}

#FormAccesoTrab #DatosAcceso .CeldaEdicion
{
	position: relative; 
	margin: 0px; 
}

#Reloj
{
	position: absolute;
	top: 126px;
	left: 0px;
	width: 100%;
	margin: 10px auto; 
	text-align: center;
}

#Reloj #FechaHora
{
	height: auto; 
	overflow: hidden; 
}
	
#Reloj #FechaHora #Fecha
{
	font-size: 14px; 
}

#Reloj #FechaHora #Hora
{
	font-size: 36px; 
	line-height: 38px;
}

#Reloj #FechaHora #Minutos
{
	font-size: 36px; 
	line-height: 38px;	
}	

label
{
	padding: 1px; 
	margin-left: 1px; 
	font-size: 14px;
}

input[type='text'], input[type='password']
{
	border: 1px solid; 
	margin-top: 2px; 
	font-size: 16px; 
	width: 100%; 
	color: var(--colorFuente); 
	background: transparent; 
	border-radius: 5px; 
	padding: 2px 0px 2px 2px; 
	text-transform: none;
}

input[type='text']:focus, input[type='password']:focus, input[type='text']:hover, input[type='password']:hover
{
	outline: 0;  
	background-color: var(--colorEditFoco);
	color: var(--colorFuenteEditFoco);
}

input[type='submit'], input[type='button']
{
	border: 0px; 
	color: var(--colorFuente); 
	background-color: var(--colorBotonComprobar); 
	border-radius: 10px; 
	padding:2px 10px; 
	margin: 5px 0px 0px;
}

input[type='submit']:hover, input[type='submit']:focus, input[type='button']:hover, input[type='button']:focus
{
	outline: 0; 
	background-color: var(--colorFuenteEditFoco); 
	color: var(--colorFuenteBotonComprobarFoco); 
	cursor: pointer;
    -moz-box-shadow: 0px 0px 20px var(--colorFuenteEditFoco); 
    -webkit-box-shadow: 0px 0px 20px var(--colorFuenteEditFoco); 
    box-shadow: 0px 0px 20px var(--colorFuenteEditFoco);
}

#CtrlForm
{
	position: absolute;
	top: 180px;
	left: 0px;
	width: 100%;
}   

#CtrlForm button   
{
	position: relative; 
	margin: 0px 0px; 
	font-size: 20px;
	border: 0px solid; 
	padding: 0px 0px;	
	border-radius: 10px;
	background-color: var(--colorPrincipal);
	color: var(--colorFuente);
	float: left; 
	width: 80px; 
	height: 70px;
	text-align: center; 
}

#CtrlForm #Entrada:hover
{
	cursor: pointer; 
	background-color: var(--colorBotonesInOutFoco); 
	color: var(--colorFuenteBotonesInFoco);
    -moz-box-shadow: 0px 0px 20px var(--colorFuenteEditFoco); 
    -webkit-box-shadow: 0px 0px 20px var(--colorFuenteEditFoco); 
    box-shadow: 0px 0px 20px var(--colorFuenteEditFoco);	
}

#CtrlForm #Salida:hover
{
	cursor: pointer; 
	background-color: var(--colorBotonesInOutFoco); 
	color: var(--colorFuenteBotonesOutFoco);
    -moz-box-shadow: 0px 0px 20px var(--colorFuenteEditFoco); 
    -webkit-box-shadow: 0px 0px 20px var(--colorFuenteEditFoco); 
    box-shadow: 0px 0px 20px var(--colorFuenteEditFoco);	
}

#CtrlForm button i
{
	font-size: 32px;
}


#CtrlForm #Mensajes
{
	float: left;
	width: 100%;
	font-size: 12px;
	color: var(--colorFuente);
	background-color: var(--colorPrincipal);
	border: 0px; 
	text-align: center;
}