body {
	background: linear-gradient(to top, #004e92, #000428); /* Fallback for old browsers */
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Source Sans Pro', sans-serif;
	padding: 1em;
	position: relative;
	z-index: 1;
	overflow: hidden; /* Evita barras de desplazamiento */
	margin: 0;
}

body::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url('/img/fondo.jpg') no-repeat center center/cover;
	opacity: 0.2; /* Ajusta la opacidad de la imagen de fondo */
	z-index: -1;
}



#img {
	position: absolute;
	left:52%;
	top: 25%;
	transform: translate(-50%, -50%);
	width: 20%; /* Ajusta según necesidad */
	height: 10%;
	z-index: 10;
	margin-bottom: 500px !important;
}


.alert {
	color: #eb2f06;
	font-size: 14px;
	padding: 0px;
	margin-top: -30px;
	margin-bottom: 7px;
}

.login-container {
	padding: 9em 4.5em;
	width: 450px;
	height: 600px;
	overflow: hidden;
	text-align: center;
}

.title {
	margin-left: -1em;
}

/*img {
	width: 90% !important;
	height: 70% !important;
	margin-left: 1px !important;
	margin-bottom: 20px;
}*/

.fa-fingerprint {
	font-size: 1.5em;
	color: #0fbcf9;
	margin-right: 5px;
}


.welcome {
	/*margin-bottom: -35px;*/
	font-size: 18px;
	color: #0fbcf9;
	text-decoration: none;
}

.form {
	padding: 1.5em 0.5em;
}

/*select, button {
	border-top-left-radius: 50px !important;
	border-bottom-left-radius: 50px !important;
	border-top-right-radius: 50px !important;
	border-bottom-right-radius: 50px !important;
}*/

.inputLogin, .btnLogin {
	border-top-left-radius: 50px !important;
	border-bottom-left-radius: 50px !important;
	border-top-right-radius: 50px !important;
	border-bottom-right-radius: 50px !important;
}

.text-warning, .validation-summary-errors {
	font-size: 13px;
	color: red;
}

#check {
	margin-left: -65px !important;
	color: white;
	font-size: 14px;
}

.form-check-input {
	margin-left: -50px !important;
	font-size: 16px;
	margin-top: 12px !important;
}

input, select {
	padding-left: 1.3em !important;
	color: black !important;
}

.btnLogin {
	font-size: 17px !important;
	letter-spacing: 3px;
	border: solid 1px #0fbcf9 !important;
	color: #0fbcf9 !important;
	box-shadow: 1px 1px 10px #0fbcf9;
}

.btnLogin:hover {
	color: white !important;
	background-color: #0fbcf9;
	font-weight: 500;
}



/*****************************************/
/************* Estilos Modal ************/
/*****************************************/
.v360-modal {
	box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.3);
}

	.v360-modal .modal-header {
		/*box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.3);*/
		background-color: #192a56;
		color: white;
	}

	.v360-modal .closeModal {
		color: white !important;
	}
/*****************************************/
/********** Fin estilos Modal ************/
/*****************************************/


/*****************************************/
/************* Estilos Button ************/
/*****************************************/
.v360-button {
	color: silver;
	background-color: #192a56 !important;
	box-shadow: 4px 4px 3px 0px rgba(0,0,0,0.3);
}

.v360-button:hover {
	color: white;
}

.recoverPasswordLink {
	color: white;
	font-size: 14px;
}

.recoverPasswordLink:hover {
	color: silver;
	font-size: 14px;
}
/*****************************************/
/************* Estilos Button ************/
/*****************************************/

	/* Estilos para dispositivos pequeños */
	@media (min-width: 375px) and (max-width: 767.98px) { /* 768px - 1px */
		.login-container {
			padding: 20em 4.5em;
			width: 470px;
			height: 1000px;
			overflow: hidden;
			text-align: center;
		}

		#img {
			top: 32%;
			margin-left: -10px;
			width: 45% !important; /* Ajusta según necesidad */
			height: 9%;
		}

		.welcome {
			margin-bottom: 10px;
			font-size: 16px;
		}

		.box {
			height: 33px;
			font-size: 16px !important;
		}
		
		.form-check-input {
			margin-top: 7px !important;
			margin-left: -30px !important;
			font-size: 13px;
		}

		#check {
			font-size: 13px;
			margin-left: -55px !important;
		}

		.btnLogin {
			font-size: 15px !important;
		}
	}

	/* Estilos para dispositivos Tablet */
	@media (min-width: 768px) and (max-width: 991.98px) {
		.login-container {
			padding: 17em 4.5em;
			width: 470px;
			height: 1000px;
			overflow: hidden;
			text-align: center;
		}

		#img {
			top: 28%;
			margin-left: -20px;
			width: 35%; /* Ajusta según necesidad */
			height: 10%;
		}

		.welcome {
			margin-bottom: 10px;
			font-size: 26px;
		}

		.alert {
			font-size: 19px;
		}

		.box {
			height: 45px;
			font-size: 21px !important;
		}

		.field-validation-error {
			font-size: 18px;
		}

		.form-switch {
			/*border: solid 1px yellow;*/
			margin-top: 5px;
		}

		.form-check-input {
			margin-top: 7px !important;
			margin-left: -25px !important;
			font-size: 16px;
		}

		#check {
			font-size: 19px;
			margin-left: -100px !important;
		}

		.btnLogin {
			font-size: 23px !important;
		}
	}

	/* Estilos para dispositivos laptop */
	@media (min-width: 992px) and (max-width: 1600px) {
		.login-container {
			width: 430px;
			height: 700px;
			overflow: hidden;
			text-align: center;
		}

		#img {
			position: absolute;
			left: 50%;
			top: 26%;
			transform: translate(-50%, -50%);
			width: 17%; /* Ajusta según necesidad */
			height: 11%;
			z-index: 10;
		}

		.welcome {
			/*margin-bottom: -23px;*/
			font-size: 18px;
		}

		.form-switch {
			margin-top: 4px;
		}

		.form-check-input {
			margin-top: 6px !important;
			margin-left: -25px !important;
			font-size: 14px;
		}

		#check {
			font-size: 15px;
			margin-left: -120px !important;
		}
	}

	/* Estilos para dispositivos extra grandes */
	@media (min-width: 1600px) {
		.login-container {
			padding: 9em 4.5em;
			width: 450px;
			height: 700px;
			overflow: hidden;
			text-align: center;
		}

		#img {
			top:30%;
			margin-left: -30px;
			width: 16.5%; /* Ajusta según necesidad */
			height: 8%;
		}

		.welcome {
			margin-bottom: 10px;
			font-size: 18px;
		}

		.form-switch {
			margin-top: 4px;
		}

		.form-check-input {
			margin-top: 6px !important;
			margin-left: -25px !important;
			font-size: 14px;
		}

		#check {
			font-size: 15px;
			margin-left: -130px !important;
		}
	}