@charset "UTF-8";
*,
*:after,
*:before {
	box-sizing: border-box;
	white-space: normal;
}

form {
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
}

.logInInputs,
.logInInputsPsw {
	flex-flow: column;
	display: flex;
	align-items: end;
	width: 80%;
	padding: 10px 0px 47px 0px;
}

/*------ Prncipal -------*/
html,
body {
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	padding: 0px;
}

html {
	background: #e3e3e3;
}

body {
	line-height: 1;
	font: 400 14px/normal 'Roboto', sans-serif;
	color: #444;
	background: #e3e3e3;
	display:inline;
}

a,
a img,
img {
	border: none;
	outline: none;
	text-decoration: none;
	color: #444;
}

#logContainer img {
	width: 80%;
}

.bienvenido {
	text-align: center;
	font-size: 24px;
	font-family: Roboto, sans-serif;
	font-weight: bold;
	color: #383838;
	padding-top: 10px;
}

.ingresa {
	text-align: center;
	font-size: 16px;
	padding-bottom: 10px;
	color: #383838;
}

p {
	margin: 1% 0;
}

input,
button {
	outline: none;
}

button {
	cursor: pointer;
}

a,
.btn {
	transition: all 500ms ease-out;
}

.forgot {
	font-size: 14px;
	color: var(--maincolor);
	position: relative;
	float: right;
}

.terms {
	font-size: 14px;
	color: #9D9D9D;
	padding-top: 10px;
}

#wrapLoader {
	position: fixed;
	top: calc(50% - 1000px);
	left: calc(50% - 1000px);
	width: 2000px;
	height: 2000px;
	background: rgba(0, 0, 0, .7);
	z-index: 9999999;
}

#loader {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	width: 70px;
	height: 70px;
	margin: -35px 0 0 -35px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: #ff3535;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
	z-index: 1001;
}

#loader:before {
	content: "";
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: #ff3535;
	-webkit-animation: spin 3s linear infinite;
	animation: spin 3s linear infinite;
}

#loader:after {
	content: "";
	position: absolute;
	top: 15px;
	left: 15px;
	right: 15px;
	bottom: 15px;
	border-radius: 50%;
	border: 3px solid transparent;
	border-top-color: #ff3535;
	-webkit-animation: spin 1.5s linear infinite;
	animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes spin {
	0% {
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/*------ Containers -------*/
.form,
form {
	width: 100%;
}

form label {
	display: block;
	width: 49%;
	background: #f5f5f5;
	padding: 5px;
	border-radius: 5px;
	overflow: hidden;
	padding-bottom: 5%;
}

form label p {
	font-size: 12px;
	font-weight: bold;
}

form label input,
form label select,
form label textarea {
	display: inline-block;
	width: 95%; 
	font-family: regular 'Roboto';
	background: none;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	border: 1px solid #9D9D9D;
	padding: 15px 10px 15px 10px;
}

.divPadre{
	position: absolute;
	top: 0;
	width: 100%;
	width: -moz-available;			/* WebKit-based browsers will ignore this. */
	width: -webkit-fill-available;	/* Mozilla-based browsers will ignore this. */
	width: fill-available;
	height: 100%;
	background: rgba(255, 255, 255, 1);
	display: flex;
	flex-direction: row;
	z-index: 5;
}

.login {
	flex: 1;
	height: 100%;
	padding: 0px;
	z-index: 3;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
}

.login:after {
	content: '';
	width: 50%;
	height: 100%;
	opacity: .7;
	top: 0;
	left: 0;
	z-index: 1;
	color: #eee;
}

.login .logo {
	width: auto;
	height: auto;
	display: block;
	max-width: 100%;
	position: relative;
	z-index: 2;
	margin: 20px auto 40px;
}

.login form {
	padding: 30px 80px;
	width: -webkit-fill-available;
	height: 100%;
	border-radius: 4px;
	position: relative;
	float: right;
	margin: 0 auto;
	max-width: 100%;
	z-index: 3;
	background: #FFF;
	margin: auto;
	width: 50%; /* Ajusta este valor para controlar el ancho del formulario */
}

.animation {
	flex: 1;
	background-color: var(--maincolorlighter);
	width: 50%;
	height: 100%;
	top: 0px;
	border-top-right-radius: 48px;
	border-bottom-right-radius: 48px;
	overflow: hidden;
	position: fixed;
	margin: 0 auto;
	max-width: 100%;
	z-index: 4;
}

.animation .animationText {
	display: flex;
	flex-direction: column;
	font-size: 50px;
	font-weight: bold;
	color: #FFF;
	position: absolute;
	padding-left: 30px;
	padding-right: 50%;
	padding-top: 30px;
	z-index: 2;
}

.animation .obj1 {
	box-shadow: 0 10px 5px rgba(0, 0, 0, .4);
	background-color: var(--maincolorlighter2);
	height: 90%;
	width: 90%;
	border-top-left-radius: 50% 75%;
	border-bottom-right-radius: 450%;
	border-bottom-left-radius: 100% 48%;
	overflow: hidden;
	top: -50px;
	left: -100px;
	animation-name: animation1;
	animation-duration: 20s;
	animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
	animation-iteration-count: infinite;
	position: absolute;
	z-index: 1;
}

.animation .obj2 {
	box-shadow: 0 10px 5px rgba(0, 0, 0, .4);
	background-color: var(--maincolor);
	height: 90%;
	width: 85%;
	border-top-left-radius: 75% 50%;
	border-top-right-radius: 60% 40%;
	border-bottom-right-radius: 25%;
	border-bottom-left-radius: 120% 100%;
	overflow: hidden;
	top: -100px;
	left: 200px;
	animation-name: animation2;
	animation-duration: 17s;
	animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
	animation-iteration-count: infinite;
	position: absolute;
	z-index: 0.5;
}

@keyframes animation1 {
	0% {
		transform: translate(0, 0);
	}
	10% {
		transform: translate(-15px, -15px);
	}
	20% {
		transform: translate(-30px, -30px);
	}
	30% {
		transform: translate(-15px, -15px);
	}
	40% {
		transform: translate(15px,-15px);
	}
	50% {
		transform: translate(0,0);
	}
	60% {
		transform: translate(15px, 15px);
	}
	70% {
		transform: translate(30px, 30px);
	}
	80% {
		transform: translate(15px, 15px);
	}
	90% {
		transform: translate(-15px,15px);
	}
	100% {
		transform: translate(0, 0);
	}
}

@keyframes animation2 {
	0% {
		transform: translate(0, 0);
	}
	10% {
		transform: translate(15px, 30px);
	}
	20% {
		transform: translate(30px, 60px);
	}
	30% {
		transform: translate(15px, 30px);
	}
	40% {
		transform: translate(-15px,30px);
	}
	50% {
		transform: translate(0,0);
	}
	60% {
		transform: translate(-15px, -15px);
	}
	70% {
		transform: translate(-30px, -30px);
	}
	80% {
		transform: translate(-15px, -15px);
	}
	90% {
		transform: translate(15px,-15px);
	}
	100% {
		transform: translate(0, 0);
	}
}

.login form label {
	background: #fff;
	width: 100%;
}

.login .password {
	display: block;
	line-height: 40px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	border: 1px solid rgba(0, 0, 0, .4);
	border-radius: 16opx;
	margin-top: 60px;
	font-size: 16px;
	width: 400px;
	max-width: 100%;
	box-shadow: 0 0 30px rgba(0, 0, 0, .3);
	position: relative;
	z-index: 2;
}

.login form button {
	left: 20px;
	right: 20px;
	width: calc(100% - 40px);
	width: 80%;
	display: block;
	font: bold 16px/40px 'Roboto';
	border-radius: 50px;
	border: none;
	font-size: 16px;
	padding: 5px 6px;
}

/* hover y active para botones de login */
.login-button:hover {
	background-color: var(--secondcolor);
}
/* Fin de hover y active para botones de login */

.lightbox {
	display: none;
	width: 50%;
	background: #fff;
	padding: 40px;
	box-shadow: 0 0 40px rgba(0, 0, 0, 1), 0 0 100px rgba(0, 0, 0, 1), 0 0 200px rgba(0, 0, 0, 1);
	margin-bottom: 30px;
}

.lightbox h1 {
	font-size: 32px;
	margin-bottom: 30px;
	width: 100%;
	height: 30px;
}

.jconfirm-box {
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 10px;
	box-shadow: 0px 5px 15px -3px rgba(0,0,0,0.25);
	backdrop-filter: blur(10.9px);
	-webkit-backdrop-filter: blur(10.9px);
	border: 1px solid rgba(255, 255, 255, 1);
	width: 100%;
	display: flex;
	flex-direction: column;
	text-overflow: initial;
	max-width: 35%;
	min-width: 300px;
	left: 25.5%;
}

.jconfirm-box input {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	border: 1px solid #9D9D9D;
	border-radius: 8px;
	width: 100%;
	height: 40px;
}

.jconfirm-box .confirmedForgot {
	text-align: center;
	font-size: 16px;
	font-family: Roboto, sans-serif;
	font-weight: normal;
	color: #383838;
	padding-top: 10px;
	text-overflow: ellipsis;
	overflow: hidden;
	max-height: 80px;
}

.jconfirm-box h3 {
	font: bold 28px 'Roboto';
	text-overflow: clip ellipsis;
	text-overflow: initial;
	max-height: 80px;
}

.jconfirm-box .img-container {
	text-align: center;
}

.jconfirm-box p {
	font: 16px 'Roboto';
	margin-bottom: 10px;
}

.jconfirm-box input {
	padding-left: 10px;
}

.jconfirm-box-container button {
	border-radius: 160px;
	border: none;
	color: #fff;
	background-color: #D8161F;
	font-size: 12px;
	float: right;
}

.buttonDivPsw input {
	font: bold 20px/40px 'Roboto';
	border-radius: 160px;
	border: none;
	color: #fff;
	background-color: #D8161F;
	font-size: 16px;
	width: 80%;
	cursor: pointer;
}

#btn-pass,
#btn-pass1,
#btn-pass2 {
	top: 50%;
	color: var(--maincolor);
	cursor: pointer;
	font-size: 16px;
	margin-right: 10px;
}

.input-wrapper {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	border: 1px solid #9D9D9D;
	border-radius: 8px;
}

.input-wrapper input {
	border: none;
	width: calc(100%-40px);
	background-color: #FFF !important;
	color: #383838;
}

.la {
	padding-right: 10px;
}

.titleChange {
	text-align: center;
	font-size: 45px;
	font-family: 'Poppins Bold', sans-serif;
	font-weight: bold;
	color: #383838;
	height: 25px;
}

.changeText {
	text-align: center;
	font-size: 16px;
	font-family: Roboto, sans-serif;
	font-weight: normal;
	padding-bottom: 30px;
}

.close {
	position: absolute;
	top: 0;
	text-align: center;
	line-height: 40px;
	width: 40px;
	font-size: 32px;
	right: 0;
	z-index: 2;
	background: #eee;
}

.buttonDiv {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.buttonDivPsw {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.titleTextPsw {
	width: 100%;
	padding-top: 70px;
}

@-webkit-keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/*////////// responsive ///////////////*/
/******* large *****/
@media screen and (min-width: 1640px) {}

/******* tablet landscape *****/
@media screen and (min-height: 600px) and (max-height: 800px) and (orientation: landscape) {}

/******* tablet landscape *****/
@media screen and (min-width: 1000px) and (max-width: 1250px) {}

/******* tablet landscape *****/
@media screen and (min-width: 850px) and (max-width: 1050px) {}

/******* tablet portrait *****/
@media screen and (max-width: 1020px) and (min-width: 737px) {}

/******* mobile portrait *****/
@media screen and (max-width: 1024px) {
	html {
		height: initial;
		overflow-x: hidden;
	}

	.animation {
		opacity: 0;
		display: none;
	}

	.login form {
		height: 100%;
		width: 100%;
		padding: 15px 60px 15px 60px;
		position: fixed;
	}

	.jconfirm-box {
		max-width: 70%;
		left: 0px;
	}

	html,
	body {
		height: initial;
		overflow: initial;
		overflow-x: hidden;
	}

	body {
		background: linear-gradient(135deg, #f10000 0%, #000000 100%);
		background: #e3e3e3;
		font-size: 12px;
	}

	.login {
		padding: 0px;
		height: auto;
	}

	.login .logo {
		max-width: 70%;
	}

	.lightbox {
		padding: 0 20px 20px;
		height: 100% !important;
		top: 0 !important;
		bottom: 0 !important;
		position: fixed !important;
		width: 100%;
	}

	.lightbox h1 {
		font-size: 24px;
		margin-top: 10px;
		padding-right: 21px;
		white-space: normal;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.lightbox .content_lightbox {
		position: absolute;
		left: 0;
		bottom: 0;
		top: 50px;
		padding: 20px;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		display: flex;
		justify-content: center;
	}

	.lightbox.previewer {
		padding: 0;
	}

	.lightbox.previewer section {
		height: 100% !important;
		padding: 0;
	}

	.lightbox.previewer section div {
		padding: 0;
	}
}

@media screen and (max-height: 540px) and (max-width: 736px) {
	.login form {
		position: absolute;
	}
}

/******* mobile landscape *****/
@media screen and (max-width: 736px) and (orientation:landscape) {
	html,
	body {
		-webkit-text-size-adjust: none;
	}
}