@charset "utf-8";
/* CSS Document */
.main-content.Firma > div[class*="cien"].box-input{
	min-height: 450px;
	height: auto;
	display: inline-flex;
    justify-content: center;
    align-items: center;
}

.main-content.Firma > div[class*="cien"].input_code{
	border-right: inset 2px var(--azul_log);
}

/*sub-container código*/
.main-content.Firma > div[class*="cien"].box-input .sub-container{
	width: 100%;
	height: auto;
	padding: 5px;
	box-sizing: border-box;
	font-size: 0px;
}
.main-content.Firma > div[class*="cien"].input_code h2{
	margin: 10px auto;
}
.main-content.Firma > div[class*="cien"].input_code div.box-input{
	border-radius: 5px;
}
.main-content.Firma > div[class*="cien"].input_code div.box-input:hover{
	background-color: var(--background-azul);
}
.main-content.Firma > div[class*="cien"].input_code div.box-input input{
	width: 100%;
	height: 55px;
	border-radius: 5px;
	outline: none;
	border: 1px solid var(--border-color);
	box-sizing: border-box;
	font-family: "Roboto";
	text-align: center;
	font-size: large;
}
.main-content.Firma > div[class*="cien"].input_code div.box-input input:valid{
	border: 1px solid var(--title-color);
	background-color: var(--input-valid);
}
.main-content.Firma > div[class*="cien"].input_code div.box-input input:invalid{
	border: 1px solid var(--title-color);
	background-color: var(--input-invalid);
}
.main-content.Firma > div[class*="cien"].input_code p{
	font-size: small;
	text-align: center;
	margin: 15px auto;
	color: var(--title-color) !important;
}
.main-content.Firma > div[class*="cien"].input_code p#respuestaCodigo{
	color: black !important;
}
.main-content.Firma > div[class*="cien"].input_code p strong{
	color: var(--naranja);
	margin: 0px auto !important;
}

/* vista firma */
.Firma > div[class*="cien"].box-input .title-page{
	font-weight: 600;
	font-size: x-large;
}
.Firma > div[class*="cien"].box-input .firma-content{
    width: 95%;
    height: 250px;
    margin: 20px auto;
    border-radius: 10px;
	background-repeat: no-repeat;
	background-position: center center;
    border: 3px dashed var(--title-color);
	background-image: url("../images/firma_pic.png");
}
.Firma > div[class*="cien"].box-input.firma_grafo .button-content{
	width: auto;
	display: table;
	margin: 0px auto;
}
.Firma > div[class*="cien"].box-input.firma_grafo button{
    display: inline-block;
    position: relative;
    vertical-align: top;
    margin: 5px;	
}
.Firma > div[class*="cien"].box-input.firma_grafo button.refresh_firma{
	background-color: var(--input-valid);
	color: var(--color-title);
}
.Firma > div[class*="cien"].box-input.firma_grafo button.refresh_firma:hover{
	background-color: var(--input-invalid);
}
/* @MEDIA 780 < */
@media screen and (max-width:780px){
	.main-content.Firma > div[class*="cien"].box-input{
		display: block;
		width: 100%;
		min-height: 100px;
	}
	.main-content.Firma > div[class*="cien"].input_code{
		border-right: none !important;
	}
}
/*ELEMENTOS OCULTOS*/
#divCanvasFirma{
	display: none;
}