/**
 * /* Vars
 *
 * @format
 */

* {
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;
}

html,
body {
	width: 100vw;
	background-color: rgba(255, 255, 255, 0.925);
}

body {
	/* background-image: url('../img/body-bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover; */
	font-family: 'Hind';
	font-size: 16px;
	font-weight: 400;
	overflow-x: hidden;
	min-height: 100vh;
	line-height: 1;

	background-color: #f4f4f4;
}

body.user {
	background-image: none;
}

body.user .header {
	background-color: #f4f4f4;
	justify-content: space-between;
}

body.user .content-wrap.user {
	/* background-image: url('../img/body-bg.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover; */
	height: 100vh;
}

.header {
	align-items: center;
	border-bottom: 1px solid #ffffff00;
	display: flex;
	flex-flow: row wrap;
	left: 0px;
	height: 80px;
	justify-content: center;
	margin: auto;
	/* padding: 0px 5%; */
	position: fixed;
	top: 0px;
	width: 100%;
	z-index: 1000;
	display: flex;
	justify-content: space-evenly;
}

.header .user-menu {
	font-family: 'Hind';
	font-size: 15px;
	font-weight: normal;
	text-transform: capitalize;
}

@media screen and (min-width: 768px) {
	.header .user-menu {
		/* display: block; */
		display: flex;
		align-items: center;
	}
}

@media screen and (max-width: 768px) {
	.header .user-menu {
		/* backdrop-filter: blur(12px); */
		background: rgba(255, 255, 255, 0.925);
		border-radius: 0 0 10px 10px;
		border: 1px solid rgba(255, 255, 255, 0.925);
		display: none;
		left: 0px;
		position: absolute;
		padding-top: 30px;
		text-align: center;
		top: 80px;
		width: 100%;
		color: #000000;
	}
}

.header .user-menu img {
	margin-left: 7px;
	vertical-align: sub;
	width: 30px;
}

@media screen and (max-width: 768px) {
	.header .user-menu img {
		display: none;
	}
}

.header .user-menu #menu-resp {
	display: none;
	flex-flow: column wrap;
	justify-content: center;
	list-style: none;
}

.header .user-menu #menu-resp li {
	width: 100%;
}

.header .user-menu #menu-resp li a {
	border-bottom: 1px solid #a6a3a300;
	color: #232323;
	font-family: 'Hind';
	font-weight: bold;
	display: block;
	text-align: left;
	padding: 15px 20px;
	font-size: 21px;
	text-decoration: none;
	text-transform: none;
}

@media screen and (max-width: 768px) {
	.header .user-menu #menu-resp {
		display: flex;
		margin-top: 20px;
	}
}

.header .btn-resp {
	cursor: pointer;
	display: none;
	height: 30px;
	position: absolute;
	right: 10px;
	width: 40px;
	z-index: 1000;
	margin: 20px 0px 20px 0px;
}

.header .btn-resp:before,
.header .btn-resp span,
.header .btn-resp:after {
	background-color: #f2ad00;
	border-radius: 5px;
	content: '';
	display: block;
	height: 4px;
	opacity: 1;
	position: absolute;
	transition: all 0.4s ease;
	width: 100%;
}

.header .btn-resp:before {
	top: calc(50% - 10px);
}

.header .btn-resp span {
	top: calc(50% - 2px);
}

.header .btn-resp:after {
	bottom: calc(50% - 10px);
}

.header .btn-resp.active:before {
	top: calc(50% - 2px);
	transform: rotate(45deg);
}

.header .btn-resp.active span {
	opacity: 0;
}

.header .btn-resp.active:after {
	bottom: calc(50% - 2px);
	transform: rotate(-45deg);
}

@media screen and (max-width: 768px) {
	.header .btn-resp {
		display: block;
	}
}

.content-wrap.login {
	align-items: center;
	display: flex;
	flex-flow: column wrap;
	height: 100vh;
	justify-content: center;
	padding-top: 80px;
	position: relative;
	overflow: hidden;
	width: 100vw;
}

@media screen and (max-width: 768px) {
	.content-wrap.login {
		height: auto;
		padding: 70px 0px;
	}
}

.content-wrap.login .content {
	width: 100%;
}

.content-wrap.login .header .user-menu {
	display: none !important;
}

.content-wrap.login .wrap {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin: auto;
	width: 60%;
}

@media screen and (max-width: 1024px) {
	.content-wrap.login .wrap {
		width: 85%;
	}
}

@media screen and (max-width: 768px) {
	.content-wrap.login .wrap {
		flex-flow: column wrap;
	}
}

.content-wrap.login .wrap form {
	background-color: #ff980900;
	padding: 50px 80px;
	width: 70%;
}

@media screen and (max-width: 1024px) {
	.content-wrap.login .wrap form {
		padding: 30px 50px;
	}
}

@media screen and (max-width: 768px) {
	.content-wrap.login .wrap form {
		padding: 30px 50px;
		width: 100%;
	}
}

.content-wrap.login .wrap form .title {
	color: #f2ad00;
	font-family: 'Hind';
	font-weight: bold;
	font-size: 30px;
	text-align: center;
	text-transform: capitalize;
}

.content-wrap.login .wrap .text-col {
	align-items: center;
	background-color: #ffffff;
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	padding: 30px 20px;
	width: 30%;
}

@media screen and (max-width: 768px) {
	.content-wrap.login .wrap .text-col {
		width: 100%;
	}
}

.content-wrap.login .wrap .text-col p {
	color: #737373;
	margin: 5px auto;
}

.content-wrap.login .wrap .text-col p.title {
	font-family: 'Hind';
	font-weight: bold;
	font-size: 20px;
}

.content-wrap.login .wrap .text-col p.desc {
	font-family: 'Hind';
	font-weight: normal;
}

.content-wrap.login .wrap .text-col p:first-child {
	text-transform: capitalize;
}

.form-group {
	margin: 15px auto;
	width: 100%;
}
.form-group.error {
	color: red;
}

.form-group.btns {
	align-items: center;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	width: 100%;
}

@media screen and (max-width: 500px) {
	.form-group.btns {
		flex-flow: column wrap;
		justify-content: center;
	}
}

/* ? inputs del login */
.form-group .form-control {
	background-color: #fff;
	background-position: left 15px center;
	background-repeat: no-repeat;
	background-size: 30px;
	border-radius: 5px;
	border: 1px solid #05050500;
	font-family: 'Hind';
	font-size: 20px;
	font-weight: 300;
	outline: 0;
	color: #0d0d0d;
	padding: 10px 20px 10px 26px;
	width: 100%;
	height: 45px;
	margin-bottom: 30px;
}

/* .form-group .form-control#txtidcliente {
	background-image: url('../img/user.svg');
}

.form-group .form-control#txtdocuser {
	background-image: url('../img/num.svg');
} */

/* ?boton de inciio de sesion */
.form-group #btn_iniciar_sesion {
	background-color: #45b5cc;
	border-radius: 5px;
	border: none;
	color: #ffffff;
	cursor: pointer;
	font-family: 'Hind';
	font-size: 20px;
	padding: 12px 80px;
	margin-top: 30px;
	text-transform: capitalize;
}

.form-group #btn_iniciar_sesion:hover {
	background-color: #0a2bd0;
}

.form-group a {
	color: #737373;
	font-family: 'Hind';
	font-weight: normal;
	font-weight: bold;
	text-decoration: none;
}

.form-group a:hover,
.form-group a:active,
.form-group a:focus {
	text-decoration: underline;
}

@media screen and (max-width: 500px) {
	.form-group a {
		display: inline-block;
		margin-top: 20px;
	}
}

.content-wrap.user {
	padding-top: 80px;
}

.content-wrap.user.index .side-menu {
	display: none;
}

.content-wrap.user.index .content {
	display: flex;
	flex-flow: column;
	justify-content: center;
	height: 100%;
	margin: auto;
	padding: 0px;
	width: 90%;
}

.content-wrap.user .header .header-inner {
	justify-content: space-between;
}

.content-wrap.user .section-title {
	color: #1c2833;
	font-family: 'Hind';
	font-weight: bold;
	font-size: 22px;
	text-align: center;
}
.content-wrap.user h2#titulo-menu {
	color: #1c2833;
	font-family: 'Hind';
	font-weight: bold;
	font-size: 34px;
	text-align: center;
}

.content-wrap.user .section-description {
	color: #737373;
	font-family: 'Hind';
	font-weight: 500;
	font-size: 18px;
	margin: 15px auto;
	text-align: center;
	width: 60%;
}

@media screen and (max-width: 900px) {
	.content-wrap.user .section-description {
		width: 100%;
	}
}

.content-wrap.user .top-text {
	align-items: center;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	width: 100%;
}

@media screen and (max-width: 1024px) {
	.content-wrap.user .top-text {
		flex-flow: column wrap;
	}
}

.content-wrap.user .top-text .section-title {
	text-align: center;
	width: 25%;
}

@media screen and (max-width: 1024px) {
	.content-wrap.user .top-text .section-title {
		width: 100%;
	}
}

.content-wrap.user .top-text .section-description {
	font-weight: 500;
	padding-left: 5%;
	padding-right: 5%;
	width: 73%;
}

@media screen and (max-width: 1024px) {
	.content-wrap.user .top-text .section-description {
		width: 100%;
	}
}

.cards {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	text-align: center;
	width: 100%;
}

.cards .item {
	background-color: #ffffff;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	outline: 0;
	position: relative;
	width: -ms-calc(25% - 20px);
	width: -o-calc(25% - 20px);
	width: calc(25% - 20px);
}

.cards .item#one .image {
	background-image: url(../img/comprobante-identidad.png);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.cards .item#two .image {
	background-image: url(../img/comprobante-direccion.png);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.cards .item#three .image {
	background-image: url(../img/resultados.webp);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.cards .item#four .image {
	background-image: url(../img/otros-documentos.webp);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

@media screen and (max-width: 900px) {
	.cards .item {
		width: -ms-calc(50% - 20px);
		width: -o-calc(50% - 20px);
		width: calc(50% - 20px);
		margin: 10px auto;
	}
}

@media screen and (max-width: 500px) {
	.cards .item {
		width: 100%;
		margin: 10px auto;
	}
}

.cards .item .btn {
	bottom: 0px;
	left: 0px;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 10;
}

.cards .item .image {
	align-items: center;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	height: auto;
	padding-bottom: 60%;
	position: relative;
	width: 100%;
}

.cards .item .image img {
	left: 50%;
	max-height: 50%;
	max-width: 170px;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

@media screen and (max-width: 1024px) {
	.cards .item .image img {
		max-width: 100%;
	}
}

.cards .item .info {
	color: #737373;
	font-family: 'Hind';
	font-size: 18px;
	font-weight: 500;
	min-height: 125px;
	padding: 20px;
	overflow: hidden;
}

.cards .item .info .title {
	font-family: 'Hind';
	font-size: 20px;
	font-weight: bold;
	color: #1c2833;
	margin-bottom: 10px;
	text-transform: capitalize;
}

.tabs_wrapper {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin: 0 auto;
	width: 100%;
}

.user.direccion ul.tabs li,
.user.direccion ul.tabs li a,
.user.direccion .tab_drawer_heading,
.user.direccion .tab-row .video-col {
	border-radius: 10px 10px 0 0;
	background-color: #fff;
	color: #232323;
	box-shadow: 0 5px 5px #0000003a;
	margin-bottom: 6px;
}
.user.direccion .button {
	color: #232323;
}

.user.identidad ul.tabs li,
.user.identidad .tab_drawer_heading,
.user.identidad .tab-row .video-col {
	border-radius: 10px 10px 0 0;
	background-color: #fff;
	color: #232323;
	box-shadow: 0 5px 5px #0000003a;
	margin-bottom: 6px;
}
.user.identidad .button {
	color: #232323;
}

.user.resultados ul.tabs li,
.user.resultados ul.tabs li a,
.user.resultados .tab_drawer_heading,
.user.resultados .tab-row .video-col {
	border-radius: 10px 10px 0 0;
	background-color: #fff;
	color: #232323;
	box-shadow: 0 5px 5px #0000003a;
	margin-bottom: 6px;
}

.user.resultados .button {
	color: #232323;
}
.user.otros ul.tabs li,
.user.otros ul.tabs li a,
.user.otros .tab_drawer_heading,
.user.otros .tab-row .video-col {
	border-radius: 10px 10px 0 0;
	background-color: #fff;
	color: #232323;
	box-shadow: 0 5px 5px #0000003a;
	margin-bottom: 6px;
}

.user.otros .button {
	color: #232323;
}

@media screen and (max-width: 1024px) {
	.user.otros ul.tabs li,
	.user.otros ul.tabs li a,
	.user.otros .tab_drawer_heading,
	.user.otros .tab-row .video-col {
		display: flex;
		gap: 20px;
	}

	.user.resultados ul.tabs li,
	.user.resultados ul.tabs li a,
	.user.resultados .tab_drawer_heading,
	.user.resultados .tab-row .video-col {
		display: flex;
		gap: 20px;
	}

	.user.identidad ul.tabs li,
	.user.identidad .tab_drawer_heading,
	.user.identidad .tab-row .video-col {
		display: flex;
		gap: 20px;
	}

	.user.direccion ul.tabs li,
	.user.direccion ul.tabs li a,
	.user.direccion .tab_drawer_heading,
	.user.direccion .tab-row .video-col {
		display: flex;
		gap: 20px;
	}
}

/* BOTON ENVIAR FOTOS DE CREDISAFE */
#subir-fotoLicencia,
#subir-fotoBill,
#subir-fotoStatement,
#subir-fotoColillaPago,
#subir-fotoSsn,
#subir-fotoFormaW2,
#subir-fotoForma1040,
#subir-fotoResultadoExperian,
#subir-fotoResultadoEquifax,
#subir-fotoResultadoTransunion,
#subir-fotoCartaCobro,
#subir-fotoCitacionesCorte,
#subir-fotoOtros {
	background-color: #1c2833;
	color: #f4f4f4;
}

ul.tabs {
	display: inline-block;
	margin: 0px;
	padding: 0;
	position: relative;
	list-style: none;
	transition: all 0.3s ease;
	vertical-align: top;
	min-width: 175px;
	width: 25%;
	z-index: 10;
}

ul.tabs li,
ul.tabs a {
	border-radius: 10px;
	cursor: pointer;
	color: #ffffff;
	font-family: 'Hind';
	font-size: 16px;
	font-weight: bold;
	margin: 20px auto;
	padding: 12px 15px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: all 0.3s ease;
}

ul.tabs li:first-child,
ul.tabs a:first-child {
	margin-top: 0px;
}

ul.tabs li:last-child,
ul.tabs a:last-child {
	margin-bottom: 0px;
}

ul.tabs li:hover,
ul.tabs a:hover {
	background-color: #ff9a09;
	color: white;
	transition: all 0.3s ease;
}

ul.tabs li.active,
ul.tabs a.active {
	background-color: #ff9a09;
	color: #ffffff;
	transition: all 0.3s ease;
}

.tab_container {
	display: inline-block;
	padding-left: 20px;
	position: relative;
	text-align: left;
	vertical-align: top;
	width: 73%;
	z-index: 20;
}

@media screen and (max-width: 1024px) {
	.tab_container {
		padding-left: 0px;
		width: 100%;
	}
}

.tab_content {
	display: none;
}

@media screen and (max-width: 1024px) {
	.tab_content {
		height: auto;
	}
}

.tab_drawer_heading {
	display: none;
}

.tab-row {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	width: 100%;
}

@media screen and (max-width: 1024px) {
	.tab-row {
		flex-flow: column;
	}
}

.tab-row .video-col {
	background-color: #ff9a09;
	padding: 30px;
	position: relative;
	width: 60%;
}

@media screen and (max-width: 1024px) {
	.tab-row .video-col {
		width: 100%;
	}
}

.tab-row .video-col h1 {
	color: #ffffff;
	font-family: 'Hind';
	font-size: 22px;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 15px;
}

.tab-row .text-col {
	background-color: #ffffff;
	display: flex;
	color: #737373;
	flex-flow: column wrap;
	font-family: 'Hind';
	font-size: 18px;
	font-weight: 500;
	justify-content: space-between;
	padding: 30px;
	width: 40%;
}

@media screen and (max-width: 1024px) {
	.tab-row .text-col {
		flex-flow: column-reverse;
		width: 100%;
	}

	.tab-row .text-col .buttons {
		margin-bottom: 20px;
	}
}

@media screen and (max-width: 1024px) {
	ul.tabs {
		display: none;
	}

	.tab_drawer_heading {
		border-radius: 10px;
		cursor: pointer;
		display: block;
		color: #ffffff;
		font-size: 18px;
		font-weight: bold;
		margin: 20px auto;
		padding: 15px 15px;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		transition: all 0.3s ease;
	}

	.tab_drawer_heading:hover {
		background-color: #ff9a09;
		color: white;
		transition: all 0.3s ease;
	}

	.tab_drawer_heading.active {
		background-color: #ff9a09;
		color: #ffffff;
		transition: all 0.3s ease;
	}
}

.video-container {
	max-width: 100%;
	max-height: 100%;
	position: relative;
}

.player {
	background-color: #000000;
	height: 280px;
	width: 100%;
}

.button {
	border-radius: 5px;
	border: 0px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-family: 'Hind';
	font-size: 20px;
	font-weight: 500;
	outline: none;
	text-decoration: underline;
	text-align: center;
	width: 100%;
}

.button:active {
	background-color: #00ff00;
}

.button img {
	height: 35px;
	vertical-align: middle;
	margin-top: -6px;
}

.buttons .hidden {
	display: none;
}

.modal {
	background-color: #fff;
	border-radius: 5px;
	padding: 25px;
	display: none;
	left: 50%;
	position: fixed;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 90%;
	z-index: 10000;
}

.output {
	/* ORIGINAL width: 550px; */
	width: 550px;
	height: 400px;
}

@media screen and (min-width: 768px) {
	.modal {
		max-width: 600px;
	}
}

@media screen and (max-height: 500px) {
	body.user .content-wrap.user {
		height: auto;
		padding-top: 120px;
		padding-bottom: 70px;
	}
}

@media screen and (max-width: 1024px) {
	body.user .content-wrap.user {
		height: auto;
		padding-top: 120px;
		padding-bottom: 70px;
		background-color: #f4f4f4;
	}
}

@media screen and (max-width: 768px) {
	.modal {
		max-width: 500px;
	}
}

@media screen and (max-width: 500px) {
	.modal {
		max-width: 380px;
	}
	.output {
		height: 240px;
		width: 320px;
	}
}

.swal2-container {
	z-index: 1600 !important;
}

/* CSS ADICIONAL -  */

#btnRegresarMenu {
	color: #eb9b27;
	background: none;
	box-shadow: none;
}

@media screen and (max-width: 1024px) {
	#btnRegresarMenu {
		color: #eb9b27;
		background: none;
		box-shadow: none;
		margin-top: 25%;
		display: flex;
		align-items: baseline;
		justify-content: center;
		gap: 20px;
	}
}

/* ESTILO DE LOGIN PARA EL RE DISEÑO */
body .login-principal {
	background-image: linear-gradient(to right, rgba(20, 9, 176, 0.774) 0% 100%), url('../img/icons_logo/gif_login_home.gif');
	width: 100%;
	height: 100vh;
	background-position-x: 45%;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
}

img#logo-header {
	/* margin: 20px 0px 20px 0px; */
	height: 100%;
	/* margin-top: 15px; */
	width: 204px;
	object-fit: cover;
}
img.logo-login {
	height: 100%;
	margin-top: 10%;
	width: 200px;
	object-fit: cover;
}
.nombre-usuario-header {
	text-align: center;
	font-size: 32px;
	color: #000000;
}

.icon-google-back {
	font-size: 30px;
	border-radius: 50px;
	color: #262626;
	margin-right: 10px;
}

.texto {
	text-align: center;
}

.terminosCondicines {
	color: #262626;
	margin-top: 40px;
}
div .terminosCondiciones {
	text-align: center;
	color: #f2ad00
}
div .terminosCondiciones > a{
	color: #f2ad00
}

.olvide-mi-info {
	margin-top: 30px;
	text-align: center;
}

.texto-drecha {
	text-align: left;
	margin-left: 2%;
}

.dropdown-menu {
	border-radius: 20px;
	box-shadow: 10px 10px 50% rgb(14, 14, 14);
}