/* --- MAIN --- */
:root {
	--blanco-transparente: #ffffff70;
	--amarillo-claro: #f1f1ec;
	--amarillo: #ffea86;
	--azul-claro: #b9e6f7;
	--azul: #44ccff;
	--english: #06c0b0;
	--french: #f0748f;
	--spanish: #ffd166;
	--italian: #a989f8;
	--german: #3399ff;
	--azul-oscuro: #183d7c;
	--azul-medio: #2a6bd8;
	--negro: #000000;
	--blanco: #fff;
	--gris: #c0d1e1;
	--gris-claro: #e9e9e9;
	--transparente: #fff0;
	--rosa: #e6adec;
	--esquina: 10px;
	--sombra-distancia: 6px;
	--borde-blanco: 1px solid var(--blanco);
	--borde-negro: 1px solid var(--negro);
	--distancia-letras: 2px;
	--distancia-carousel: 30px;
}

.mh-100 {
	height: auto;
}

/*Sign Up*/

body.sign-sec-nav {
	background:
		url(../imagenes/patron-1.svg),
		linear-gradient(90deg, var(--azul-oscuro), var(--azul-medio));
	background-position: top 10% center;
	background-repeat: repeat;
	background-size: 100%;
}

#sign-sec-1 {
	margin-top: 75px;
	background-image: url(../imagenes/patron-2.svg);
	background-position: top center;
	background-repeat: repeat;
}

#signupForm .form-label,
#contact_us_form .form-label,
#support_form .form-label {
	margin-bottom: 5px;
	font-size: 0.8rem;
	letter-spacing: 0.8px;
	font-weight: 900 !important;
	font-family: "Urbanist";
}

#signupForm .form-label span.require,
#signupForm .form-label span.not-match,
#contact_us_form .form-label span.require,
#contact_us_form .form-label span.not-match,
#support_form .form-label span.require,
#support_form .form-label span.not-match {
	margin-bottom: 0.5rem;
	font-size: 0.8rem;
	letter-spacing: 1px;
	font-weight: 600 !important;
}

.require-red {
	color: #ff000093;
}

#sign-v2-sec-1 {
	overflow-x: hidden;
}

#sign-sec-1 h1 {
	font-size: 1.7rem;
	font-weight: 700;
}

#sign-sec-1 p.sub-parrafo {
	font-size: 0.8rem;
	font-weight: 500;
	font-family: "Inter Tight";
	letter-spacing: 0.5px;
}

.form-container {
	background-color: var(--blanco);
	padding: 35px 40px;
	border-radius: 0 0 10px 0;
	max-width: 98%;
	margin: 50px auto;
	border: 1px solid var(--negro);
}

.form-control,
.form-select {
	display: block;
	width: 100%;
	padding: 5px 10px;
	font-size: 0.9em;
	font-weight: 500;
	line-height: 2;
	color: var(--negror);
	-webkit-appearance: none;
	-moz-appearance: none;
	font-family: "Urbanist";
	appearance: none;
	background-color: #e6e6e6;
	border-radius: 10px;
	border: 1px solid var(--negro);
	letter-spacing: 0.5px;
}

#sign-sec-1 .form-control {
	margin-bottom: 10px;
}

#sign-sec-1 .form-select {
	margin-bottom: 25px;
}

.form-control.error {
	border: solid 1px #f199c0;
	background: #f5def7;
}

.form-select.error {
	border: solid 1px #f199c0;
	background: #f5def7;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 16px 12px;
}

.form-label span.require.error {
	color: var(--french);
}

textarea.form-control {
	min-height: 100px;
	margin-bottom: 30px !important;
}

.select-english {
	background-color: var(--english) !important;
}

.select-spanish {
	background-color: var(--spanish) !important;
}

.select-german {
	background-color: var(--german) !important;
}

.select-italian {
	background-color: var(--italian) !important;
}

.select-french {
	background-color: var(--french) !important;
}

option {
	background-color: var(--blanco) !important;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 5px;
}

#next[type="submit"] {
	display: block;
	position: relative;
	text-align: center;
	right: auto;
	width: auto;
	min-width: 180px;
	font-weight: 700;
	font-size: 0.9em;
}

#signupForm p.form-terms,
#contact_us_form p.form-terms,
#support_form p.form-terms {
	font-size: 0.7rem;
	font-weight: 600;
}

/*SIGN-UP-2*/

#sign-v2-sec-1 p {
	font-size: 0.9rem;
}

#sign-v2-sec-1 p.title {
	letter-spacing: 2.5px;
	font-family: "Urbanist";
	font-size: 1rem;
	font-weight: 600;
}

#sign-v2-sec-1 h1 {
	font-size: 2.2rem;
}

#sec-form-1 .col-sec-1 {
	height: auto;
	padding: 3% 12% 0%;
	overflow-y: auto;
	overflow-x: hidden;
}

#sec-form-1 .col-sec-2 {
	height: auto;
	min-height: 200px;
	padding: 0% 12%;
}

#sec-form-2 .col-sec-1 {
	height: auto !important;
	padding: 0% 10% 0% 10%;
	margin-left: 0%;
	overflow-y: scroll;
	overflow-x: hidden;
}

#sec-form-2 .col-sec-2 {
	height: auto;
	padding: 3% 10%;
}

#sec-form-3 .col-sec-1 {
	height: 100%;
	padding: 2% 8% 0;
	overflow-y: auto;
	overflow-x: hidden;
}

#sign-v2-sec-1 .cont-form {
	border-radius: 0px 0px 0px 0px;
	border: none;
}

form#signupExt {
	width: 100%;
}

#signupExt label.form-label,
#signupExt p.form-text {
	font-weight: 800;
	font-family: "Urbanist";
	font-size: 1rem;
	letter-spacing: 0.3px;
}

#signupExt #sec-form-2 label span.form-parafo {
	font-weight: 600;
	font-family: "Inter Tight";
	font-size: 1rem;
	letter-spacing: 0px;
	line-height: 20px;
}

#signupExt p.form-text span {
	padding: 0px 7px 3px;
	background-color: #e6e6e6;
	border-radius: 50px;
	color: var(--negro);
	border: 1px solid var(--negro);
	font-size: 1.6em;
	line-height: 2;
	font-family: "Inter Tight";
	font-weight: 600;
}

#signupExt p.form-text button {
	border-radius: 50px;
	background-color: var(--transparente);
	color: var(--negro);
	border: none;
	font-size: 1.2em;
	font-family: "Inter Tight";
	font-weight: 600;
	text-decoration: underline;
}

#signupExt .form-control,
#signupExt .form-select {
	display: block;
	width: 100%;
	padding: 0.375rem 0.75rem;
	font-size: 1em;
	font-weight: 800;
	line-height: 2;
	color: var(--negror);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #e6e6e6;
	border-radius: 10px;
	border: 1px solid var(--negro);
	letter-spacing: 0.5px;
}

#signupExt #sec-form-2 textarea.form-control {
	line-height: 16px;
	padding: 0.5rem 0.3rem;
	font-family: "Inter Tight";
	font-weight: 500;
}

div.info-german div.row div.col-6 textarea.form-control:focus {
	background: var(--german) !important;
}

div.info-spanish div.row div.col-6 textarea.form-control:focus {
	background-color: var(--spanish) !important;
}

div.info-itali div.row div.col-6 textarea.form-control:focus {
	background-color: var(--italian) !important;
}

div.info-english div.row div.col-6 textarea.form-control:focus {
	background-color: var(--english) !important;
}

div.info-french div.row div.col-6 textarea.form-control:focus {
	background-color: var(--french) !important;
}

#sec-form-2 .form-control {
	height: 70px;
}

#signupExt .table td,
#signupExt .table th {
	vertical-align: middle;
	border: none;
	padding: 3px 0;
	position: relative;
	font-size: 1.1em;
	font-weight: 900;
	font-family: "Urbanist";
}

#signupExt td.sub-text {
	font-size: 0.9em;
	font-family: "Inter Tight";
}

#signupExt th.total {
	font-weight: 900;
	font-size: 1.1rem;
	border: none;
	font-family: "Urbanist";
	letter-spacing: 0.6px;
}

#signupExt th.subtotal {
	font-weight: 900;
	font-size: 0.9rem;
	border: none;
	font-family: "Urbanist";
	letter-spacing: 0.5px;
}

#signupExt .divider {
	border-top: 2px solid var(--gris);
}

.btn-sec-form {
	width: 250px;
	margin: 0 auto;
}

#sec-form-2 p.banda-form b.fs-3 {
	font-size: 1.45rem !important;
}

.banda-form::before {
	content: "";
	position: absolute;
	top: 0px;
	left: -10%;
	width: 150vw;
	height: 100%;
	z-index: -2;
}

.banda-form.banda-german::before {
	background-color: var(--german);
}
.banda-form.banda-spanish::before {
	background-color: var(--spanish);
}
.banda-form.banda-itali::before {
	background-color: var(--italian);
}
.banda-form.banda-english::before {
	background-color: var(--english);
}
.banda-form.banda-french::before {
	background-color: var(--french);
}

p#btn-sub-texto {
	font-size: 0.8em;
}

#sec-form-3 img {
	mix-blend-mode: multiply;
	height: 100px;
	width: auto;
	position: absolute;
	right: 5%;
	top: 3%;
}

#sec-form-3 div.form-control.card-form {
	min-height: 200px;
	margin-top: 20px;
	position: relative;
}

#sec-form-3 div.form-control.card-form {
	min-height: auto;
	border: 1px solid var(--negro);
}

#sec-form-3 div.form-control.card-form:hover {
	background-color: var(--amarillo);
}

#sec-form-3 h4 {
	font-size: 2rem;
	font-weight: 500;
	margin-top: 10px;
	line-height: 29px;
	word-spacing: -2.5px;
}

#sec-form-3 div.form-control.card-form p.form-parafo {
	font-size: 0.9rem;
	font-weight: 600;
	margin-top: 10px;
	letter-spacing: -0.4px;
	line-height: 17px;
	font-family: "Inter Tight";
}

span.small {
	font-size: 0.8em;
	font-family: "Inter Tight";
	font-weight: 500;
}

/*scrollbar*/
.scroll-style::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	background-color: #f5f5f5;
}

.scroll-style::-webkit-scrollbar {
	width: 8px;
	background-color: transparent;
}

.scroll-style::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(115, 115, 115, 0.3);
	background-color: var(--azul-oscuro);
}

/*Steps*/

#steps {
	margin-bottom: -13px;
	background: linear-gradient(0deg, var(--blanco) 77%, var(--transparente) 77%);
}

.step-circle {
	width: 50px;
	height: 50px;
	background-color: var(--gris);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	position: relative;
	z-index: 2;
	cursor: pointer;
}

#step-01.step-circle::before,
#step-02.step-circle::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -150%;
	width: 125%;
	height: 0;
	border: 1px solid var(--spanish);
	z-index: -2;
}

#steps p {
	font-size: 0.9em;
	color: var(--negro);
	font-weight: 900;
	letter-spacing: -0.5px;
	cursor: pointer;
}

.step-active {
	background-color: var(--spanish);
	color: var(--negro);
	border: 1px solid var(--blanco);
	cursor: pointer;
}

.step-number {
	font-size: 24px;
	font-weight: bold;
	cursor: pointer;
}

@media screen and (min-width: 767px) {
	.mh-100 {
		height: 100vh;
	}

	/*Sign Up*/

	.form-container {
		background-color: var(--blanco);
		padding: 35px 40px;
		border-radius: 0 0 10px 0;
		max-width: 100%;
		margin: 50px auto;
		border: 1px solid var(--negro);
	}

	#sign-sec-1 h1 {
		font-size: 2.9rem;
		font-weight: 700;
		font-family: "Urbanist";
	}

	#sign-sec-1 p.sub-parrafo {
		font-size: 1.2rem;
		font-weight: 400;
		font-family: "Inter Tight";
		letter-spacing: -0.5px;
	}

	#start-sec-1 div.row .col-12 {
		background-image: url(../imagenes/call.svg);
		background-position: left 5% bottom 5%;
		background-size: 200px auto;
		background-repeat: no-repeat;
	}

	#start-sec-2 div.row div.col-11 {
		border-radius: 20px 20px 20px 0;
		border: 3px solid var(--gris);
		background-color: var(--blanco);
		background-image:
			url(../imagenes/item-sign-01.svg), url(../imagenes/item-sign-02.svg);
		background-position:
			bottom left 5%,
			bottom right 5%;
		background-size:
			auto 92%,
			auto 95%;
		background-repeat: no-repeat, no-repeat;
	}

	#signupForm p.form-terms,
	#contact_us_form p.form-terms,
	#support_form p.form-terms {
		font-size: 0.65em;
		font-weight: 500;
		letter-spacing: 0.2px;
	}

	/*SIGN-UP-2*/

	#sign-v2-sec-1 p {
		font-size: 1.2rem;
	}

	#sign-v2-sec-1 p.title {
		letter-spacing: 1px;
		font-family: "Urbanist";
		font-size: 0.9rem;
		font-weight: 800;
	}

	#sign-v2-sec-1 h1 {
		font-size: 3em;
	}

	#sec-form-1 .col-sec-1 {
		height: 68%;
		padding: 3% 13% 0% 16%;
		overflow-y: auto;
		overflow-x: hidden;
	}

	#sec-form-1 .col-sec-2 {
		height: 18%;
		min-height: 200px;
		padding: 0% 13% 30% 16%;
	}

	#sec-form-2 .col-sec-1 {
		padding: 0% 8% 0% 18%;
		margin-left: -10px;
		overflow-y: scroll;
		overflow-x: hidden;
		height: calc(97% - 80px) !important;
	}

	#sec-form-2 .col-sec-2 {
		padding: 3% 10% 1%;
		min-height: 80px;
		height: calc(2% + 80px);
	}

	#sec-form-3 .col-sec-1 {
		height: 100%;
		padding: 2% 14% 0;
		overflow-y: auto;
		overflow-x: hidden;
	}

	#sign-v2-sec-1 .col-12.col-lg-6 {
		max-height: 95vh;
		margin-top: 5vh;
		overflow-x: hidden;
	}

	#sign-v2-sec-1 .cont-form {
		border-radius: 25px 0px 0px 0px;
		border: 1px solid var(--negro);
		border-bottom: none;
	}

	form#signupExt {
		width: 100%;
		font-size: 14px;
	}

	#signupExt label.form-label,
	#signupExt p.form-text {
		font-weight: 800;
		font-family: "Urbanist";
		font-size: 0.9em;
		letter-spacing: 1.3px;
		line-height: 1em;
	}

	#signupExt #sec-form-2 label span.form-parafo {
		font-weight: 500;
		font-family: "Inter Tight";
		font-size: 1em;
		letter-spacing: -0.1px;
		line-height: 18px;
	}

	#signupExt p.form-text span {
		background-color: #e6e6e6;
		border-radius: 50px;
		color: var(--negro);
		border: 1px solid var(--negro);
		font-size: 1.1rem;
		line-height: 0;
		font-family: "Inter Tight";
		font-weight: 900;
		margin-top: 20px;
		padding: 0px 5px 1px;
	}

	#signupExt p.form-text button {
		border-radius: 50px;
		background-color: var(--transparente);
		color: var(--negro);
		border: none;
		font-size: 1em;
		font-family: "Urbanist";
		font-weight: 800;
		text-decoration: underline;
		text-transform: uppercase;
	}

	#signupExt .form-control,
	#signupExt .form-select,
	#signupExt textarea {
		display: block;
		width: 100%;
		padding: 6px 20px;
		font-size: 0.9em;
		font-weight: 800;
		line-height: 2;
		color: var(--negror);
		-webkit-appearance: none;
		-moz-appearance: none;
		font-family: "Urbanist";
		appearance: none;
		background-color: #e6e6e6;
		border-radius: 10px;
		border: 1px solid var(--negro);
		letter-spacing: 0.5px;
	}

	#signupExt #sec-form-2 textarea.form-control {
		line-height: 20px;
		padding: 8px 20px;
		font-family: "Inter Tight";
		font-weight: 500;
	}

	#signupExt select.form-select::before {
		content: "▼";
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		pointer-events: none;
		font-size: 12px;
		color: #333;
	}

	#signupExt .table td,
	#signupExt .table th {
		vertical-align: middle;
		border: none;
		padding: 3px 0;
		position: relative;
		font-size: 0.9em;
		font-weight: 800;
		font-family: "Urbanist";
		letter-spacing: 1.5px;
	}

	#signupExt td.sub-text {
		font-size: 0.8em;
		font-family: "Inter Tight";
		font-weight: 500;
		letter-spacing: 0px;
	}

	#signupExt th.total {
		font-weight: 800;
		font-size: 1.08em;
		border: none;
		font-family: "Urbanist";
		letter-spacing: 1.5px;
	}

	#signupExt th.subtotal.total-2 {
		font-weight: 800;
		font-size: 1.2em;
		border: none;
		font-family: "Urbanist";
		letter-spacing: 1.5px;
	}

	#signupExt th.subtotal {
		font-weight: 800;
		font-size: 0.9em;
		border: none;
		font-family: "Urbanist";
		letter-spacing: 1.5px;
	}

	#sec-form-2 p.banda-form b.fs-3 {
		font-size: 1.4em !important;
	}

	#signupExt .divider {
		border-top: 2px solid var(--gris);
	}

	.banda-form::before {
		content: "";
		position: absolute;
		top: 0px;
		left: -100vw;
		width: 150vw;
		height: 100%;
		z-index: -2;
	}

	p#btn-sub-texto {
		font-size: 0.7em;
	}

	#sec-form-3 img {
		mix-blend-mode: multiply;
		height: 80px;
		width: auto;
		position: static;
	}

	#sec-form-3 div.form-control.card-form {
		min-height: 290px;
	}

	#sec-form-3 h4 {
		font-size: 1.85rem;
		font-weight: 500;
		margin-top: 10px;
		line-height: 30px;
	}

	#sec-form-3 div.form-control.card-form p.form-parafo {
		font-size: 0.8rem;
		font-weight: 500;
		margin-top: 10px;
		line-height: 17px;
		font-family: "Inter Tight";
	}

	span.small {
		font-size: 0.75em;
		font-family: "Inter Tight";
		font-weight: 500;
	}

	.form-check-label {
		font-size: 0.8rem;
	}

	/*scrollbar*/
	.scroll-style::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		background-color: #f5f5f5;
	}

	.scroll-style::-webkit-scrollbar {
		width: 8px;
		background-color: transparent;
	}

	.scroll-style::-webkit-scrollbar-thumb {
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 6px rgba(115, 115, 115, 0.3);
		background-color: var(--azul-oscuro);
	}

	/*Steps*/

	#steps {
		margin-bottom: auto;
		background: transparent;
	}

	.step-circle {
		width: 50px;
		height: 50px;
		background-color: var(--gris);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: auto;
		position: relative;
		z-index: 2;
		border: 1px solid var(--blanco);
		cursor: pointer;
	}

	#step-01.step-circle::before,
	#step-02.step-circle::before {
		content: "";
		position: absolute;
		top: 50%;
		left: -200%;
		width: 150%;
		height: 0;
		border: 1px solid var(--spanish);
		z-index: -2;
	}

	#steps p {
		font-size: 0.9em;
		color: var(--blanco);
		font-weight: 500;
		letter-spacing: -0.3px;
		cursor: pointer;
	}

	.step-active {
		background-color: var(--spanish);
		color: var(--negro);
		border: 1px solid var(--blanco);
		cursor: pointer;
	}

	.step-number {
		font-size: 24px;
		font-weight: bold;
		cursor: pointer;
	}

	/* Countries combobox style */
	.combobox-container {
		position: relative;
		display: inline-block;
		width: 100%;
	}

	.combobox-button {
		display: block;
		width: 100%;
		padding: 8px 10px;
		font-size: 0.9em;
		font-weight: 500;
		font-family: "Urbanist";
		background-color: #e6e6e6;
		border-radius: 10px;
		border: 1px solid var(--negro);
		text-align: left;
		cursor: pointer;
	}

	.combobox-dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background: white;
		border: 1px solid #ccc;
		box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		z-index: 10;
	}

	.combobox-input {
		width: calc(100% - 10px);
		padding: 8px;
		border: none;
		border-bottom: 1px solid #ccc;
		font-size: 0.9em;
		outline: none;
		display: block;
		margin: 5px auto;
	}

	.combobox-item {
		padding: 8px;
		cursor: pointer;
		font-size: 0.9em;
	}

	.combobox-item:hover {
		background-color: #f0f0f0;
	}
}