/********************************************************************************************/
/** FirmaUSAL: AplicaciOn de automatizaciOn del proceso de generaciOn de firmas digitales **/
/** Hoja de estilos general **/
/********************************************************************************************/

/* Estilo Corporativo - IdUsal */
/****************************************************************/
/****************************************************************/
/* Aspectos Generales */
body { margin: 0px; background-color: #eaeaea; }
/* Etiquetas e inputs */
label { padding-top: 16px; text-align: right; }
input, textarea, select
{

	/* Estructura */
	width: 100%;
	margin: 5px 0px;
    padding: 10px 0px;
	padding-left: 10px;

	/* DecoraciOn */
	background-color: transparent;
	transition: background-color 0.5s ease;
    border: 0px;
	border-bottom: solid 1px #d4d4d4;

}
input { width: 95%; background-color: #f3f3f3; }
label, select, option { padding-right: 10px; }
label { display: block; margin-bottom: 6px; }
select { width: 97%; background-color: #f3f3f3; }
select { cursor: pointer; }
.tipo_container::before { content: "\2335"; position: absolute; top: 13px; left: 20px; pointer-events: none; }
input:focus, select:focus, input:focus-visible, select:focus-visible
{
	/* DecoraciOn */
	outline: none;
	background-color: #e7f0f7;
	border: solid 1px #4f5a6428;
	-webkit-focus-ring-color: transparent;
}
hr { opacity: 0.4; }
/* Botones e Iconos */
.btn {
	border: 0;
	background: transparent;
	padding: 10px 14px;
	border-radius: 6px;
	color: #4d4d4d;
	cursor: pointer;
	font-weight: 700;
	transition: .18s ease;
}
.btn.cross { position: absolute; right: 0px; padding: 15px; text-decoration: none; }
button, #lang_icon img
{
	background: none;
	transform: scale(1);
  	transition: transform 0.5s ease;
	cursor: pointer;
	z-index: 1;
}
button:hover { background: none; }
button:hover, #lang_icon img:hover { transform: scale(1.2); }
/* Clases de posicionamiento */
.row, #contenido{ display: flex; }
.row { position: relative; }
.col { width: 100%; }
.contenedor { display: flex; justify-content: center; margin: 0px 50px; }
/****************************************************************/
/* Cabecera */
#header { display: flex; width: 100%;  align-items: center; justify-content: space-between; }
#app_logo { width: 325px; height: auto; margin: 50px 100px; margin-right: 0px; margin-bottom: 50px !important; z-index: 1; }
#lang_icon { display: flex; width: 100%; justify-content: right; align-items: center; margin: 50px 85px; margin-left: 0px; margin-bottom: 50px !important; }
#lang_icon img { width: 60px; height: auto; z-index: 1; }
/****************************************************************/
/* Contenido */
#formulario_firma_container { position: relative; margin-left: 100px; margin-bottom: 75px; background-color: #eaeaea; }
#formulario_firma .col { margin-right: 30px; }
#formulario_firma .col:first-child { width: 300px; }
#formulario_firma { width: 100%; }
#preview_container { margin-right: 100px; margin-bottom: 75px; }
#firma { border: solid 2px #d22020; }
#button_clean_container, #button_download_container { width: 100%; display: flex; justify-content: right; margin-top: 15px; }
#button_download_container { right: 20px; margin-top: -55px; }
#instrucciones_container { margin-top: 20px;}
#instrucciones_title p{ font-size: 14px !important; font-weight: bold; color:  #d22020; }
#instrucciones_body p{ font-size: 14px !important;  color:  #4d4d4d; padding-left: 20px; }
/****************************************************************/
/* Pie de pAgina */
#footer { width: 100%; text-align: center; background-color: #eaeaea; }
#footer hr { width: 75%; margin: 0px auto; }
#footer .logo { width: 275px; height: auto; padding: 40px; }
#footer .aviso_legal { text-transform: uppercase; margin-top: -20px; margin-bottom: 30px; }
#footer .aviso_legal a { font-weight: normal; text-decoration: none; color: #808080; }
#footer .aviso_legal a:hover { color: #d22020; }
#footer .copyright { background-color: #d22020; padding: 5px 0px; }
#footer .copyright, #footer .copyright a { color: #ffffff !important; text-decoration: none; }
/****************************************************************/
/* Responsive */
@media (max-width: 1080px)
{
	#contenido { display: block; }
	.contenedor { margin: 0px !important; }
	#formulario_firma, #firma { margin: 0px 50px !important; }
	#formulario_firma { margin-bottom: 40px !important; }
	#button_download_container { right: 70px; }
}
@media (max-width: 650px)
{
	* { font-size: 14px !important; }
	#app_logo { width: 300px; margin: 30px; margin-right: 0px; }
	#lang_icon { margin: 20px; margin-left: 0px; }
	#lang_icon img { width: 50px; }
}
@media (max-width: 500px)
{
	* { font-size: 12px !important; }
	#app_logo { width: 220px; }
	#lang_icon img { width: 40px; }
	#firma { padding: 20px !important; }
	#firma_logo { width: 200px !important; }
	#footer .logo { width: 150px; }
	#instrucciones_title { padding-left: 10px; padding-top: 10px;}
}
@media (max-width: 410px)
{
	#firma { margin: 0px 20px !important; }
	#button_download_container { right: 40px; }
}
/****************************************************************/