:root {
    --bg-select: #fcfcfc;
    --fondoclaro: #fbfbfb;
    --blanco: #fff;
    --negro: #000;
    --guinda: #4e1726;
    --naranja: #f0141b;
    --rojo: #e6153b;
    --grisclaro: lightgray;
    --grisoscuro: #565657;
    --bordemenu: #d4d4d4;
    --bordes: lightgray;
    /* --primario: #f5f0ef; */
    --primario: #fbfbfb;
    --alerta: #e6153b;
    /* --alerta: #e08709; */
    --valido: #00cf91;
    --footer: #f4f0ef;
	--SSPR: #006ADC;
	--blackinput: #141414;
}

html {
    margin: 0;
    height: 100vh;
    box-sizing: border-box;
    font-size: 62.5%;
    /** Reset para REMS - 62.5% = 10 DE 1.6rem**/
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    height: 100vh;
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    line-height: 1.6rem;
	background-color: var(--footer);
}

.escondido {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
}

/* */

button, input, optgroup, select, textarea {
    padding: 1rem;
}
/* Globales */

img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 4rem;
    line-height: 4.4rem;
}

h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 3rem;
    line-height: 3.4rem;
}

h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    line-height: 2.7rem;
}

h4 {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.8rem;
    line-height: 2.4rem;
}

h5 {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.6rem;
    line-height: 2rem;
}

h1, h2, h3, h4, h5 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}
p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    size: 1.2rem;
    line-height: 1.6rem;
}

ol,
ul {
    list-style: none;
    margin-bottom: 1rem;
}

a {
    font-family: 'Open Sans', sans-serif;
    color: var(--negro);
    font-weight: 400;
    size: 1.5rem;
    line-height: 1.6rem;
    text-decoration: none;
}

.ir-registro {
    margin-top: 3rem;
    margin-bottom: 1rem;
    color: var(--guinda);
    font-size: 2rem;
    font-family: 'Poppins', sans-serif;
}



/* Snippets */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    transition: background-color 5000s ease-in-out 0s;
}


/** Contenedores principales **/

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--blanco); /* url('loader.gif') no-repeat center center; */
  z-index: 9999;
}

.contenedor {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 94vh;
    margin: 0;
    /* background-color: var(--footer); */
    resize:none;
    overflow: visible;
}

@media (min-width:38rem) {
    .contenedor {
		height: 100%;
        display: grid;
        grid-template-columns: 1.5fr 2.4fr;
        resize: unset;
    }
}

.cont-der {
    display: none;
}

@media (min-width:38rem) {
    .cont-der {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin: 0;
        height: 100%;
        min-height: 100%;
    }
}

.cont-izq {
	position: relative;
    width: 100%;
    height: 100vh;
    background-color: var(--blanco);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    overflow: visible;
}

/* @media only screen and (min-width: 38rem) {
    .cont-izq { */
		/* display: flex;
    	flex-direction: column;
    	width: 100%;
        height: device-height; */
		/* overflow: visible; */
    	/* background-color: var(--fondoclaro);
    	padding: 0; */
    /* }
} */

.cont-dark {
    background-color: var(--blanco);
    color: var(--blanco);
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}

@media (min-width: 64rem) {
    .cont-dark {
        background-color: #333333;
        display: grid;
        grid-template-columns: 1fr 36rem 1fr;
        padding: 1rem 0 3rem 0;
    }
}

.cont-waves {
    width: 100%;
    height: 100%;
    background-color: #e5e5e5;
    background-image: url('https://b2cstorageaccounts.blob.core.windows.net/juntosplusqa/waves.png');
    background-repeat: repeat-x;
    background-attachment: fixed;
    background-position: bottom;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 1rem 0 3rem 0;
}

.area-contenido {
    height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
}

@media (min-width: 64rem) {
    .area-contenido {
        justify-content: center;
    }
}

.error-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--blanco);
    border: .3rem solid var(--gris);
    border-radius: 1rem;
    box-shadow: .2rem .2rem .2rem .1rem rgba(0, 0, 0, 0.1);
    padding: 3rem;
    text-align: center;
    z-index: 10;
}

.error-box p {
    color: var(--grisoscuro);
}

.subt {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 2rem;
    color: #5B2235;
    margin: 1rem auto 1rem;
}

.helpLink {
    display: none;
}

.importante {
    font-family: 'Open Sans', sans-serif;
    color: #ff0000;
    font-weight: 600;
    size: 1.4rem;
    line-height: 1.8rem;
}


/* Utilidades */

.alerta {
    color: var(--alerta);
}

.rojo {
    color: var(--rojo);
}

.valido {
    color: var(--valido);
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.centered-text {
    text-align: center;
}

.contenido-centrado {
    max-width: 80rem;
}

.disappear {
    display: none;
}


/** Inputs **/

input {
    border-style: none;
    background-color: var(--blanco);
    display: inline-block;
    width: 29.6rem;
    height: 5rem;
    color: #000;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.8rem;
    border-radius: 1rem;
    border: .1rem solid var(--grisclaro);
}

input[type="checkbox"] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    /* Remove most all native input styles */
    appearance: none;
    /* For iOS < 15 */
    background-color: var(--form-background);
    /* Not removed via appearance */
    margin: 0;
    font: inherit;
    color: #00cf91;
    width: 1.8rem;
    height: 1.8rem;
    border: 0.15em solid #00CF91;
    border-radius: 0.4rem;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
}

input[type="checkbox"]::before {
    content: "";
    width: 1.2rem;
    height: 1.2rem;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transform-origin: bottom left;
    transition: 120ms transform ease-in-out;
    box-shadow: inset .5rem .5rem var(--form-control-color);
    /* Windows High Contrast Mode */
    background-color: #00cf91;
}

input[type="checkbox"]:checked::before {
    transform: scale(1);
}

#rememberMe_true:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    border: .2rem solid var(--bs-secondary);
}

input[type="checkbox"]+label {
    position: relative;
    left: 0;
    color: #000;
    font-size: 1.4rem;
    line-height: 1.8rem;
    margin-left: 1rem;
}

input[type="checkbox"]:disabled + label {
    opacity: 0.6;
  }


@media only screen and (max-width: 76.8rem) {
    input[type="checkbox"]+label {
      /* Estilos específicos para dispositivos móviles */
      left: 0;
      /* top: -2.7rem; */
      font-size: 1.2rem;
      line-height: 1.5rem;
      margin-left: 3rem;
    }
}


input::placeholder {
    font-size: 1.4rem;
    line-height: 1.8rem;
    font-weight: 200;
    opacity: .5;
}

/* Estilo para el placeholder específico */
.custom-placeholder::placeholder {
    font-size: 1.3rem;
    /* Otros estilos que desees aplicar al placeholder */
}

input[type="checkbox"]+label {
    position: relative;
    left: 0;

    color: var(--labelchk);
    font-size: 1.4rem;
    line-height: 1.8rem;
    margin-left: 1rem;
}

/* Estilo para el placeholder específico con el texto "Lembre-se de ocultar essa informação" en dispositivos móviles */
input[placeholder="Lembre-se de ocultar essa informação"]::placeholder {
    font-size: 1.2rem;
    /* Otros estilos que desees aplicar al placeholder específico */
  }


label {
    color: var(--negro);
    font-weight: 400;
}

input:read-only {
    border-style: none;
    background: transparent;
    height: auto;
    margin-bottom: 1rem;
    color: var(--negro);
	font-weight: 400;
    font-size: 2rem;
}

input::-ms-reveal,
input::-ms-clear {
    display: none;
}

input:focus {
    border: block transparent;
}

input:focus, textarea:focus {
    outline: none;
}

.digit-input {
    width: 4rem;
    height: 4.5rem;
    margin-right: 1rem;
    display: block;
	text-align: center;
	border: 1px solid var(--blackinput);
    font-size: 2.5rem;
    font-weight: 400;

}

.digit-boxes-container{
	display: flex;
	justify-content: center;
}

.digit-box {
    width: 4rem;
    height: 4.5rem;
    margin-right: 1rem;
    display: block;
	text-align: center;
	border: 1px solid var(--blackinput);
	border-radius: 1rem;
    font-size: 2.5rem;
    font-weight: 400;
}

.digit-input.input-icono-invalido.\.textInput {
    border: 1px solid var(--alerta);
    color: var(--alerta);
  }

.digit-box.input-icono-invalido {
border: 2px solid var(--rojo);
color: var(--alerta);
}

.radio-input-flex {
    display: flex;
    flex-direction: row;
    align-items: center;
    accent-color: var(--verde);
    margin-bottom: 2rem;
}

.radio-input-flex input {
    /* margin-right: 1rem;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    background-color: var(--blanco); */
    display: none;
}

.radio-input-flex label {
    display: flex;
    align-items: center;
    gap: 2rem;
}

/*.radio-input-flex*/

 .radio-button {
    margin-right: 1rem;
    display: inline-block;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background-color: var(--blanco);
    background-image: url(https://cdn-login-cache-j4-qa-dad7hhg4ffg2aaf2.a01.azurefd.net/b2c-jaas/uncheck-icon.svg);
    /* border: .2rem solid var(--negro); */
    cursor: pointer;
    position: relative;
}

/*.radio-input-flex*/
.radio-button::after {
    content: '';
    position: absolute;
    height: 2.4rem;
    width: 2.4rem;
    background-color: var(--blanco);
    border-radius: 50%;
    background-image: url(https://cdn-login-cache-j4-qa-dad7hhg4ffg2aaf2.a01.azurefd.net/b2c-jaas/check-icon.svg);
    top: -1px;
    left: -1px;
    background-position: center;
    opacity: 0;
}

/* .radio-input-flex */
input:checked + label .radio-button::after {
    opacity: 1;
}


/** Pantalla principal **/

.item1 {
    grid-area: up;
    color: var(--blanco);
    display: flex;
    align-items: baseline;
    width: auto;
}

@media (min-width: 38rem) {
    .item1 {
        width: 100%;
        height: 35vh;
    }
}


/** Bloque que envuelve a flecha y texto de la pantalla de código **/

.bloqueCodigo {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-evenly;
    width: 26rem;
    height: fit-content;
    color: var(--blanco);
    margin: 1rem auto 1rem 2rem;
}

.visiCodigo {
    visibility: visible;
}

@media (min-width: 64rem) {
    .visiCodigo {
        visibility: hidden;
    }
}

#welcome {
    margin-top: 2rem;
}

#welcome h3 {
    font-weight: 700;
    text-align: center;
}
#register_welcome {
    margin-top: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

#register_welcome h3 {
    font-weight: 700;
}

#AuthMethod_welcome {
    margin-top: 2rem;
}

#AuthMethod_welcome h3 {
    font-weight: 700;
    text-align: center;
}

#welcome_pwdchange {
    margin-top: 2rem;
}

#welcome_pwdchange h3 {
    font-weight: 700;
    text-align: center;
}

#sspr_welcome {
    margin-top: 2rem;
}

#sspr_welcome h3 {
    font-weight: 700;
    text-align: center;
}

/***************/

.linea-superior {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    margin: 2rem 0;
    padding: 0 2rem;
    height: 3rem;
    overflow: visible;
}

.history-back {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 16px;
    text-decoration: underline;
    font-weight: 400;
    cursor: pointer;
}

.flecha {
    height: 4rem;
    padding-top: 2rem;
    cursor: pointer;
}

/** DIV del texto de inicio de sesión **/

.inicSesion {
    width: 24rem;
    margin: 2rem 0 0 2rem;
}

@media (min-width: 38rem) {
    .inicSesion {
        width: 30rem;
    }
}


/** DIV del texto del registro **/

.registroUser {
    width: 38rem;
    margin: 1rem;
}

#requiredfields{
	margin-left: 15rem;
}

@media (min-width: 38rem) {
    .registroUser {
        width: 30rem;
    }

	#requiredfields {
		margin-left: 15rem;
	}

}

#readonlyEmail_label {
    margin: 0 auto 1.5rem auto;

}

/** DIV country **/
#cityOne {
	width: 30.6rem;
	margin: 4rem 0 1rem 0;
	flex-direction: column;
	height: 6rem;
	justify-content: space-between;
	margin-bottom: 3rem;
}

#countryText {
  line-height: 3.5rem;
  display: flex;
}

/*********************/

.bloqueFrame {
    display: block;
    margin: auto 2rem 0 auto;
}

@media (min-width: 38rem) {
    .bloqueFrame {
        display: none;
    }
}

.item2 {
    grid-area: down;
    display: none;
    padding: 0;
    width: auto;
    height: 65vh;
    align-items: flex-end;
    justify-content: flex-start;
}

@media (min-width:38rem) {
    .item2 {
        display: flex;
        flex-direction: row;
    }
}

.alert-icon {
    background-image: url(https://staextb2cqaeus201.blob.core.windows.net/b2c-jaas/Union.svg);
    background-position: center;
    background-repeat: no-repeat;
}

.close-icon {
    background-image: url(https://staextb2cqaeus201.blob.core.windows.net/b2c-jaas/Close.svg);
    background-position: center;
    background-repeat: no-repeat;
}

.conejoDer {
    height: 100%;
    width: 100%;
    background-image: url("https://staextb2cqaeus201.blob.core.windows.net/juntosplus4qa/mult-rabbit.svg");
    background-repeat: no-repeat;
    background-color: var(--guinda);
    background-size: contain;
    background-position: right bottom;
}

.tresConejos {
    height: 100%;
    width: 100%;
    background-image: url("https://staextb2cqaeus201.blob.core.windows.net/juntosplus4qa/three-rabbits.svg");
    background-repeat: no-repeat;
    background-color: var(--guinda);
    background-size: contain;
    background-position: right bottom;
}

.conejoBusca {
    height: 100%;
    width: 100%;
    background-image: url("https://staextb2cqaeus201.blob.core.windows.net/juntosplus4qa/rabbit-search.svg");
    background-repeat: no-repeat;
    background-color: var(--guinda);
    background-size: contain;
    background-position: right bottom;
}

.conejoEscIzq {
    height: 100%;
    width: 100%;
    background-image: url("https://b2cstorageaccounts.blob.core.windows.net/juntosplusqa/Conejos Escalones.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-color: var(--guinda);
    background-position: left bottom;
}

.inputEditar {
	width: 29.6rem;
	height: 5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
}

#TextEdit {
	line-height: 2;
	height: auto;
}

.iconoEdit {
    background-image: url(https://staextb2cqaeus201.blob.core.windows.net/b2c-jaas/Edit.svg);
    background-position: center;
    background-repeat: no-repeat;
	width: 3rem;
	height: 3rem;
}

.iconoEmail {
    background-image: url(https://staextb2cqaeus201.blob.core.windows.net/b2c-jaas/iconoemail.svg);
    background-position: center;
    background-repeat: no-repeat;
 /* margin-top: 0.5rem; */
}

.rounded-square {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: var(--guinda);
    color: var(--blanco);
    text-align: left;
    border-radius: .8rem;
    padding: 1rem;
    margin: 1.4rem auto;
    width: 55%;
}

.cont-signin {
    height: 88vh;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
	position: relative;
    overflow: visible;
}

.formulario {
	flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    width: fit-content;
	height: fit-content;
    margin: 0 auto;
    padding: 1rem;
}

.formularioiOS {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
    padding: 1rem;
    margin-top: -5rem;
}

.formularioiOSRoll {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
    padding: 1rem;
    margin-top: 0rem;
}

.formularioiOSBlur {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
    padding: 1rem;
    margin-top: 5.9rem;
}

.formularioiOSBlurCOMX {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
    padding: 1rem;
    margin-top: 3rem;
}

.cuadro-validacion {
    line-height: 100%;
    width: 29.6rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: .4rem;
}

#requiredfields {
    width: 100%;
    margin-top: 1rem;
    color: var(--grisoscuro);
}

#attributeList ul {
    width: 29.6rem;
    padding-left: 0;
}

#attributeList ul .Readonly {
    margin-bottom: 0;
}

#attributeList ul .TextBox::marker {
    visibility: hidden;
}

#attributeList ul .TextBox .attEntry .error {
    display: none;
}

#attributeList ul .DropdownSingleSelect {
    display: none;
}

.DropdownSingleSelect.language_li {
  display: none !important;
}

#ErrorClientCode {
    font-family: 'Open Sans', sans-serif;
    color: #ff0000;
    font-weight: 400;
    size: 1.2rem;
    line-height: 1.6rem;
}

#verifying_blurb {
    display: none;
}

a .helpLink {
    visibility: hidden;
}

#continue {
    margin-left: auto;
    margin-right: auto;
}

.buttons {
    margin-top: 2.8rem;
    display: flex;
    flex-direction: column;
}

/** Errores sub input **/

#EmailError,
#PhoneError,
#DivErrorConfirmPassword {
    display: flex;
    margin-top: -2rem;
}

#condiciones {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

#claimVerificationServerError {
    width: 29.6rem;
}


/** Caja de errores **/

.msgerror {
	position: relative;
    display: flex;
    flex-direction: column;
	width: 100%;
    min-width: 34.2rem;
    border-radius: 1rem;
    margin: 1rem auto;
    align-items: center;
}

    .msgerror .alert-warning {
        position: absolute;
		left: 0;
        display: grid;
        grid-template-columns: 2rem auto 2rem;
        grid-gap: 1rem;
        width: 100%;
        padding: .5rem;
    }

    .msgerror .loginInvalidData {
        display: inline-block;
        color: #000000;
        background-color: #FFF0F1;
        mix-blend-mode: normal;
        border: 1.5px solid var(--modalerror);
        border-radius: 10px;
        opacity: .9;
        margin-bottom: 6rem;
    }

@media (min-width: 811px) {
    .msgerror .loginInvalidData {
        margin-top: -6rem;
    }
}

.msgerror .registered {
    display: inline-block;
    color: black;
    background-color: #FFFBEF;
    border: 1.5px solid #F7B500;
    border-radius: 1rem;
    opacity: .9;
    z-index: 10;
}

@media (min-width: 811px) {
    .msgerror .registered {
        margin-top: 0;
    }
}

.msgerror .notvalid {
    display: grid;
    width: 90%;
    color: var(--blanco);
    background-color: var(--alerta);
    margin: 1rem auto;
    padding: 1rem;
    z-index: 10;
    border-radius: 1rem;
    grid-template-columns: 2rem 4fr 2rem;
    column-gap: 2rem;
}



.msgerror .Iconnotvalid {
    display: block;
    position: absolute;
    margin: -.2rem 0rem 0rem -1.3rem;
}

.msgerror .IconRegistered {
    display: block;
    position: absolute;
    margin: -.2rem 0rem 0rem -1.3rem;
}

.msgerror .IconInputRegistered {
    /* position: absolute; */
    margin: -3.5rem 0rem 0rem 11rem;
}

.msgerror .IconInputNotValid {
    /* position: absolute; */
    margin: -3.5rem 0rem 0rem 11rem;
}

.msgerror .titulo {
    font-family: 'SF Pro Display', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: .5rem;
	line-height: 1.1;
}

.msgerror .description {
    font-family: 'SF Pro Display', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
	line-height: 1.2;
}

.alert-btn {
    position: relative;
    top: 0px;
    right: 0;
    z-index: 2;
    margin-bottom: 1rem;
}


.LoginErrorIcon {
    color: #FF0000;
    padding: 0rem 0rem 0rem 1rem;
    position: relative;
    z-index: 2;
    top: 9px;
    width: 40px;
    height: 0px;
}

.RegisterErrorInfoIcon {
    color: #5594E9;
    padding: 0rem 0rem 0rem 1rem;
    position: relative;
    z-index: 2;
    top: 9px;
    width: 40px;
    height: 0px;
}

.RegisterErrorExclaIcon {
    color: #F7B500;
    padding: 0rem 0rem 0rem 1rem;
    position: relative;
    z-index: 2;
    top: 9px;
    width: 40px;
    height: 0px;
}

.disable {
    display: none;
}

/********************************/

/** Barra de progreso **/

/* .cont-progress {
    margin: 2rem auto 1rem auto;
} */

#progress {
    width: 23.6rem;
    position: relative;
    margin: 3rem auto 4rem auto;
}

#progress-bar {
    position: absolute;
    background: #ff0000;
    height: .5rem;
    width: 100%;
    top: 2rem;
    left: 0;
    z-index: 0;
    display: none;
}

#progress-num {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 3;
}

#progress-num::before {
    content: "";
    background-color: lightgray;
    position: absolute;
    top: 2rem;
    left: 0rem;
    height: .5rem;
    width: 100%;
    z-index: 1;
    display: none;
}

#progress-num .step {
    border: .3rem solid lightgray;
    border-radius: 100%;
    width: 4rem;
    height: 4rem;
    line-height: 3rem;
    text-align: center;
    justify-content: flex-start;
    background-color: lightgray;
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    position: relative;
    z-index: 4;
    display: none;
    flex-direction: column;
    align-items: center;
}

#progress-num .step.active {
    border-color: #ff0000;
    background-color: #ff0000;
    color: var(--blanco);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    display: none;
}

.letraStep {
    margin-top: 1.5rem;
    width: 10rem;
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: var(--guinda);
    white-space: nowrap;
}

#stepOneCheck {
    color: var(--blanco);
}

.welcome-text {
	margin: 2rem 0 3rem 0;
	font-weight: 600;
	font-size: 2rem;
	line-height: 1.2;
}

/** Popup Help**/

.helpShow {
    display: block;
    z-index: 1;
    position: absolute;
    width: 23.7rem;
    height: 49rem;
    justify-content: center;
}

.helpFade {
    display: none;
}


/** API **/

#api {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* margin-top: rem; */
}

#codeVerification_Error {
    margin-bottom: 1rem;
    margin-right: 1rem;
}

#api .input-icono {
    display: grid;
    grid-template-columns: 1fr auto auto;
    border: .2rem solid var(--grisclaro);
    border-radius: 1rem;
    /* display: flex;
    flex-direction: row;
    justify-content: flex-start; */
    width: 30rem;
    height: 5.8rem;
    position: relative;
    align-items: center;
    /* padding-left: 0rem;
    padding-right: 1rem; */
}

#api .input-icono input {
    border: transparent;
    outline: none;
}

/* Estilo del input en estado válido */
.input-icono-valido .textInput {
    border: .2rem solid var(--valido); /* Borde verde (o el color que desees) */
  }

.input-icono-valido:focus {
    border: .2rem solid var(--valido);
    /* border-radius: 1rem; */
    /* margin-top: 1rem; */
}

/* Estilo del input en estado válido */
.input-icono-invalido .textInput {
    border: .2rem solid var(--alerta); /* Borde verde (o el color que desees) */
  }

.input-icono-invalido input[type="password"] {
    border: .2rem solid var(--alerta); /* Borde rojo (o el color que desees) */
    /* Otros estilos que desees aplicar al input en estado inválido */
  }

.input-icono-invalido:focus {
    border: .2rem solid var(--alerta);
    border-radius: 1rem;
    margin-top: 1rem;
}

.validInput {
    font-size: 2rem;
    color: var(--valido);

    /* Ajusta la posición del icono de "check" */
    position: absolute;
    top: 2.5rem;
    right: 2rem;
    transform: translateY(-50%);
}

.password-label {
	margin-bottom: 1rem;
}

.invalidInput {
    font-size: 2rem;
    color: var(--alerta);

     /* Ajusta la posición del icono de "check" */
     position: absolute;
     top: 2.5rem;
     right: 2rem;
     transform: translateY(-50%);
}

#api #passwordIcon {
    color: var(--negro);
    font-size: 1.6rem;
    display: inline-block;
    height: 5rem;
    width: 3rem;
    position: absolute;
    right: 1rem;
    padding-top: 1.7rem;
    margin-right: calc(100% - 30rem);
}

.ojo  {
    background-image: url(https://staextb2cqaeus201.blob.core.windows.net/b2c-jaas/eye.svg);
    background-position: center;
    background-repeat: no-repeat;
	margin-top: 0rem;
}

.ojo-slash {
    background-image: url(https://staextb2cqaeus201.blob.core.windows.net/b2c-jaas/eye-slash.png);
    background-position: center;
    background-repeat: no-repeat;
	margin-top: 0rem;
}

#emailCustomIcon {
    width: 3rem;
    position: absolute;
    right: 0;
    padding-top: 1.9rem;
}

#api #newPasswordIcon {
    width: 3rem;
    position: absolute;
    right: 0;
    padding-top: 1.9rem;
}

#api #reenterPasswordIcon {
    color: #5b2235;
    font-size: 1.6rem;
    display: inline-block;
    height: 5rem;
    ;
    width: 3rem;
    position: absolute;
    right: 0;
    padding-top: 2.3rem;
}

#api button {
    width: 29.6rem;
    height: 4.8rem;
    border: none;
    border-radius: 4rem;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.4rem;
    background-color: var(--grisclaro);
    color: var(--blanco);
}

#api button:disabled {
    background-color: var(--grisclaro);
    margin-right: 1rem;
}

#api button:enabled {
    background-color: var(--negro);
    margin-right: 1rem;
}

#api button:enabled:hover {
	cursor: pointer;
}

#api .intro {
    display: none;
}

#signInNamehelpIcon {
    outline: 0;
    background: transparent;
    border-style: none;
    color: #5B2135;
    font-size: 1.6rem;
    display: inline-block;
    height: 5rem;
    width: 3rem;
    position: absolute;
    right: 0;
    padding-top: 2.3rem;
}

#signInName::placeholder {
    font-size: 1.4rem;
}

.signInNameShort {
	width: 20.6rem;
}

#attributeList .ClientCodeAlert {
    border-color: #f7b500;
}

#attributeList .ClientCodeCancel {
    border-color: #ff0000;
}

#attributeList .ClientCodeCheckMark {
    border-color: #00cf91;
}

#ClientCodehelpIcon {
    outline: 0;
    background-color: transparent;
    border-style: none;
    color: #5B2135;
    font-size: 1.6rem;
    display: inline-block;
    height: 5rem;
    width: 3rem;
    position: absolute;
    right: 0;
    padding-top: 2.3rem;
}

#attributeList .ClientCodeAlertIcon {
    color: #f7b500;
}

#attributeList .ClientCodeCancelIcon {
    color: #ff0000;
}

#attributeList .ClientCodeCheckMarkIcon {
    color: #00cf91;
}


/** Password Reset **/

.verificationInfoText {
    color: transparent;
}

#forgotPassword {
    display: flex;
    flex-direction: row;
    color: var(--negro);
    margin-top: 2rem;
    text-decoration: underline;
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    align-items: center;
    justify-content: center;
}

.fgtpasstxt {
    margin: 1.4rem auto 0 auto;
}

.separador {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.sep-izq {
    width: 46%;
    height: .1rem;
    background-color: var(--grisclaro);
}

.sep-cen {
    text-align: center;
    font-size: 700;
    width: 8%;
}

.sep-der {
    width: 46%;
    height: .1rem;
    background-color: var(--grisclaro);
}


/** Local Account Form **/

.entry-item {
    display: flex;
    flex-direction: column;
}

#localAccountForm {
    align-self: center;
}

#divremenber {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: row;
    align-items: baseline;
  }

#localAccountForm .entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* margin-top: 3rem; */
}

#localAccountForm .entry .rememberMe {
    display: none;
}

#localAccountForm .intro {
    display: none;
}

#localAccountForm .divider {
    display: none;
}

#localAccountForm .entry .entry-item {
    margin-bottom: 0rem;
}

/* iPhone 12, 13, 14 Pro y Pro Max */
@media only screen and (device-width: 39rem) and (device-height: 84.4rem),
                (device-width: 42.8rem) and (device-height: 92.6rem),
                (device-width: 42.8rem) and (device-height: 92.6rem) and (-webkit-device-pixel-ratio: 3) {
  #localAccountForm .entry .entry-item {
    margin-bottom: 0rem; /* Ajusta este valor según el espacio deseado para estos dispositivos */
  }
}

/* Samsung Galaxy S21, S22, S23 Plus y Ultra */
@media only screen and (device-width: 36rem) and (device-height: 80rem),
                (device-width: 41.2rem) and (device-height: 86.9rem),
                (device-width: 41.2rem) and (device-height: 86.9rem) and (-webkit-device-pixel-ratio: 3.5) {
  #localAccountForm .entry .entry-item {
    margin-bottom: 0rem; /* Ajusta este valor según el espacio deseado para estos dispositivos */
  }
}

/* iPad Pro de 11 pulgadas y 12.5 pulgadas */
@media only screen and (device-width: 83.4rem) and (device-height: 119.4rem),
                (device-width: 102.4rem) and (device-height: 136.6rem),
                (device-width: 83.4rem) and (device-height: 119.4rem) and (-webkit-device-pixel-ratio: 2),
                (device-width: 102.4rem) and (device-height: 136.6rem) and (-webkit-device-pixel-ratio: 2) {
  #localAccountForm .entry .entry-item {
    margin-bottom: 0rem; /* Ajusta este valor según el espacio deseado para estos dispositivos */
  }
}

#localAccountForm .entry .button {
    margin-bottom: 0rem;
}

#createAccount::before {
    content: " ";
}

#localAccountForm .create {
    width: 29.6rem;
    margin-top: 3rem;
    padding: 3rem 0;
    border-top: .1rem solid var(--grisclaro);
}

#localAccountForm .create p {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-bottom: 1rem;
}

#localAccountForm .create a {
    margin-left: 0;
    margin-top: 1.5rem;
    background-color: var(--primario);
    border: .1rem solid var(--guinda);
    color: var(--guinda);
    font-size: 1.4rem;
    padding: 1.5rem 10rem;
    border-radius: 4rem;
    text-decoration: none;
}

#cancel {
    align-items: center;
    width: 6rem;
    background-color: transparent;
    color: var(--negro);
    font-size: 1.6rem;
    border: none;
    cursor: pointer;
    box-shadow: none;
}

/* #cancel:hover {

} */

#countryText img {
	margin: 0 1rem;
}

select#inputCountryCode {
    width: 5.6rem;
    height: 5rem;
}

select#inputCountryCode::after {
    content: "(+52)";
    visibility: visible;
}


/** Segunda pantalla **/

#api ul li {
    margin-bottom: 2rem;
}

#verificationCode {
    visibility: hidden;
	height: 0;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    font-weight: 100;
    width: 16rem;
    font-size: 1.8rem;
    letter-spacing: 1rem;
    text-align: center;
    background: transparent;
    border: .3rem solid darkgray;
    border-radius: 1.4rem;
    color: #5B2135;
}

#errorDiv {
    display: flex;
    width: 100%;
    align-items: center;
}

#clientCodeError {
    display: none;
}

#ClientCode {
    display: none;
}

label[for="ClientCode"] {
    display: none;
}

#close {
    float: right;
    display: inline-block;
    padding: .2rem .5rem;
    background: white;
    font-family: 'Open Sans', sans-serif;
    font-size: x-large;
}

.error {
    color: var(--rojo);
    display: none;
}

.Paragraph {
    display: none;
}

#attributeVerification {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#attributeList .attrEntry {
    display: flex;
    flex-direction: column;
}

#attributeList .attrEntry

.aceptar-pol {
    display: flex;
    flex-direction: row;
}

.aceptar-pol #chkTnCos,
.aceptar-pol #chkTnCosPriv,
.aceptar-pol #chkTnCosPrivBr,
.aceptar-pol #chkTnCosTerms,
.aceptar-pol #chkTnCosTermsBr,
.aceptar-pol #chkTnCosTermsMx {
    width: 1.8rem;
    height: 1.8rem;
    border: .2rem solid #00cf91;
}

.aceptar-pol #tnCos,
.aceptar-pol #tnCosPriv,
.aceptar-pol #tnCosPrivBr,
.aceptar-pol #tnCosTerm,
.aceptar-pol #tnCosTermBr,
.aceptar-pol #tnCosTermMx {
    display: flex;
}

#divClienteFemsa {
    margin-top: 2rem;
}

#stepText {
    width: 29.6rem;
    margin: 0 auto;
    color: #ff0000;
}

.dropdown_single {
    height: 5rem;
    background: transparent;
    font-size: 1.4rem;
    border: none;
    text-indent: 3rem;
    border: .1rem solid var(--grisclaro);
    border-radius: .6rem;
    -webkit-appearance: none;
}

/* Estilos para el cuadro desplegable seleccionado en todos los navegadores */
.dropdown_single option:checked {
    background-color: var(--grisclaro);
    color: black;
    outline: none;
}

/* Estilos para el cuadro desplegable cuando está enfocado (seleccionado) */
.dropdown_single:focus {
    outline: none;
    border-color: var(--grisclaro); /* Cambiar el color del borde al enfocar (seleccionar) */
}

/* Estilos específicos para WebView en iOS */
@media screen and (device-width: 76.8rem) and (device-height: 102.4rem) {
    .dropdown_single {
        text-indent: 3.5rem;
    }

    /* Cambiar el color del borde de resaltado al seleccionar en WebView en iOS */
    .dropdown_single:focus {
        -webkit-tap-highlight-color: var(--grisclaro);
    }
}

.border-mexico,
.border-brasil {
    border-color: var(--valido);
}


/** Formulario Validar Código**/

.SMSCodeError {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.8rem;
    color: var(--rojo);
}

.SMSCodeError span {
    font-size: 3rem;
}

.phoneNumbers {
    margin-top: -2rem;
    margin-bottom: 3rem;
    text-align: center;
}

#retryCode {
    display: none;
}

#verifyCode, #readonlyEmail_ver_but_resend {
    margin: 3rem 0;
}

#sendCode,
#sendButton,
#readonlyEmail_ver_but_resend {
    order: 3;
    color: var(--guinda) !important;
    background-color: var(--primario) !important;
    border: .1rem solid var(--guinda) !important;
}

#currentCodeCountDown {
    color: var(--alerta);
    padding: 1rem;
	font-size: 1.2rem;
}

.showSendCode {
    display: inline !important;
}

.heading {
  display: none;
}

#codeNotReceived {
    border-top: .1rem solid var(--grisclaro);
    margin: 3rem 0 1rem 0;
}

#readonlyEmail_success {
    text-align: center;
    font-size: 4rem;
    line-height: 6rem;
    color: var(--valido);
}

.col1 {
    display: none;
}

@media (min-width: 38rem) {
    .col1 {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 3rem;
    }
}

.col2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.col3 {
    display: none;
}

@media (min-width: 38rem) {
    .col3 {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 3rem;
    }
}

.code-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    min-height: 100%;
    color: #000;
    background-color: var(--blanco);
    padding: 1rem;
}

@media (min-width: 38rem) {
    .code-box {
        width: 36rem;
        height: fit-content;
        border-radius: 3%;
        padding: 1rem;
    }
}

.data-box {
    background-color: transparent;
    color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.imagen {
    width: 100%;
    height: auto;
    background-color: #5B2135;
    border-radius: 1rem;
}

.codeText {
    margin: 1rem auto 0 auto;
}

.codeline {
    height: 4rem;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: .5rem;
    margin: .4rem;
    align-self: center;
}

.code {
    width: 4rem;
    outline: none;
    border: solid .1rem #73ddb3;
    border-radius: .5rem;
    background-color: rgb(0, 0, 0);
    color: #000;
}

.base-timer {
    margin: 1rem auto;
    position: relative;
    width: 4rem;
    height: 4rem;
}

.base-timer__svg {
    transform: scaleX(-1);
}

.base-timer__circle {
    fill: none;
    stroke: none;
}

.base-timer__path-elapsed {
    stroke-width: .7rem;
    stroke: grey;
}

.base-timer__path-remaining {
    stroke-width: .7rem;
    stroke-linecap: round;
    transform: rotate(90deg);
    transform-origin: center;
    transition: 1s linear all;
    fill-rule: nonzero;
    stroke: currentColor;
}

.base-timer__path-remaining.green {
    color: rgb(65, 184, 131);
}

.base-timer__path-remaining.orange {
    color: orange;
}

.base-timer__path-remaining.red {
    color: red;
}

.base-timer__label {
    position: absolute;
    width: 4rem;
    height: 4rem;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.acciones {
    line-height: 20%;
}

#api .actionLabel {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#api .actionLabel label {
    display: none;
}

.actionLabelDisabled {
    color: #CCB3AC;
    text-decoration: underline;
}

.actionLabelEnabled {
    font-weight: 700;
    color: #FF0000;
    text-decoration: underline;
    cursor: pointer;
    padding-bottom: 1rem;
}

.cajaCodigo {
    display: flex;
    flex-direction: column;
    margin: 2rem auto;
    font-weight: 100;
    width: 16rem;
    font-size: 1.8rem;
    letter-spacing: 1rem;
    text-align: center;
    background: transparent;
    border: .3rem solid darkgray !important;
    border-radius: 1.4rem;
    color: #5B2135;
}


/** Formulario Validar Código SSPR**/

#readonlyMobile {
    display: none;
}

#readonlyMobile_label {
    display: none;
}

#verifyEmailOrPhoneControl_success_message>label {
    display: none;
}

#verificationCode_label {
    display: none;
}

.verificationSuccessText {
    display: none;
}

#attributeList ul li.mobile_li {
    display: none;
}

#attributeList ul li.CheckboxMultiSelect {
    height: 0;
}

/*** Condiciones ***/

#condiciones {
    margin-top: 1rem;
    margin-bottom: 3rem;
}

#condiciones p {
    line-height: 80%;
}

#length .passvalid {
    display: flex;
    flex-direction: column;
}

#length .passvalid .dot {
    color: #00CF91;
    height: 2.5rem;
    width: 2.5rem;
    background-color: #00CF91;
    border-color: green;
    border-radius: 50%;
}

#length .passvalid p {
    color: #00CF91;
    font-size: small;
}

.invalid .condiciones {
    display: flex;
    flex-direction: column;
}

.invalid .dot {
    color: #00CF91;
    height: 2.5rem;
    width: 2.5rem;
    background-color: #00CF91;
    border-color: green;
    border-radius: 50%;
}

.invalid p {
    color: #00CF91;
    font-size: small;
}

.help-close-icon {
    position: absolute;
    padding: 0 0 0 8rem;
    color: #ff0000;
    size: 2.1rem;
}


/* IEMA */

div#attributeList .EmailError {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 80%;
    color: #FF0000;
}

div#attributeList .PhoneError {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 80%;
    color: #FF0000;
    margin-left: 9rem;
}


/* IEMA */

div#attributeList .newPasswordError {
    width: 13rem;
    height: 2rem;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 2rem;
    color: #44C69F;
}


/* IEMA This is the space for the spinner to appear, applied to the button */

button#continue .spin {
    padding-left: 2.5em;
    display: block;
}

/* IEMA position of the spinner when it appears, you might have to change these values */

#continue .spin .spinner {
    width: 2.5em;
    display: block;
}

/* IEMA spinner animation */

@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/*IEMA  The actual spinner element is a pseudo-element */

.spin .spinner::before {
    content: "";
    width: 1.5em;
    /* Size of the spinner */
    height: 1.5em;
    /* Change as desired */
    position: absolute;
    border-radius: 50%;
    border: solid .35em #999;
    /* Thickness/color of spinner track */
    border-bottom-color: #555;
    /* Color of variant spinner piece */
    animation: .8s linear infinite spinner;
    /* speed of spinner */
    transform: translate(-50%, -50%);
    will-change: transform;
}


/** Caja inferior**/

.inf-box {
    width: 29.6rem;
}

.inf-box p {
    padding-top: 3rem;
    margin-top: 3rem;
    margin-bottom: 1rem;
    border-top: .1rem solid var(--grisclaro);
    text-align: center;
}

.inf-box button {
    width: 29.6rem;
    height: 4.8rem;
}


/** Footer **/

.footer {
	display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    height: 12vh;
    background-color: var(--bg-footer);
    padding: 1rem;
    text-align: center;
    border-top: solid .1rem var(--negro);
}

.footer p {
	margin: .6rem auto;
}

.footer a {
    text-decoration: none;
    color: var(--negro);
    font-weight: bold;
}

.footer .datos {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: baseline;
	flex-wrap: wrap;
}


@media (max-width: 64rem) {
    .footer a.underline  {
		text-decoration: underline !important;
    }
}

/** Footers alternos **/

/* .footeriOS{
    margin-top: 16rem;
    width: 100%;
    background-color: var(--footer);
    padding: 1rem;
    text-align: center;
}

.footeriOSBlur{
    margin-top: 18rem;
    width: 100%;
    background-color: var(--footer);
    padding: 1rem;
    text-align: center;
}

.footeriOSCOMX{
    margin-top: 8rem;
    width: 100%;
    background-color: var(--footer);
    padding: 1rem;
    text-align: center;
}

.footeriOSCOMXBlur{
    margin-top: 15rem;
    width: 100%;
    background-color: var(--footer);
    padding: 1rem;
    text-align: center;
}

.footeriOS p {
	margin: .6rem auto;
}

.footeriOSBlur p {
	margin: .6rem auto;
}

.footeriOSCOMX p {
	margin: .6rem auto;
}

.footeriOSCOMXBlur p {
	margin: .6rem auto;
} */

/**Hogar**/

.hogar {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
}

.noclient {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
}

/* Estilos para el texto "¿No eres un negocio?" */
.hogar span {
    /* Agrega los estilos que desees para este texto */
    font-size: 1.4rem;
    font-weight: bold;
    /* Otros estilos */
  }

.hogar span:nth-child(3) {
    font-weight: normal !important; /* Anular el bold para el tercer <span> */
}

.contact {
    font-weight: normal !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
}


  /* Estilos para el enlace "Compra productos para tu hogar" */
  .noclient a.underline{
    color: var(--rojo);
    font-size: 1.6rem;
    font-weight: bold;
    justify-content: center;

    /* Otros estilos */
  }

  .hogar a.underline {
    /* Agrega los estilos que desees para el enlace */
    color: var(--guinda) !important;
    font-size: 1.6rem;
    border-bottom: .1rem solid var(--guinda);
    font-weight: bold;

    /* Otros estilos */
  }

/** Botones **/

.boton {
    color: #b2b2b2;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.6rem;
    padding: 1rem 2rem;
    margin-top: 0;
    display: block;
    text-align: center;
    border: none;
    flex: 0 0 100%;
}

@media (min-width:81.1rem) {
    .boton {
        display: inline-block;
        flex: 0 0 auto;
    }
}

.boton:hover {
    cursor: pointer;
}

.boton-amarillo {
    background-color: #e08709;
}

.boton-verde {
    background-color: #71b100;
}

.boton-rojo {
    width: 29.6rem;
    height: 4.8rem;
    border: none;
    border-radius: 4rem;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.4rem;
    background-color: var(--rojo);
    color: var(--blanco);
}

.footer .phone {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.boton-guinda {
    background-color: var(--primario);
    color: var(--guinda);
    border: .1rem solid var(--guinda);
    padding: 1rem 4rem;
    font-size: 1.2rem;
    line-height: 1.4rem;
    border-radius: 2rem;
}

.divCteFemsaFade {
    display: none;
}

/* Pop-Up Privacy & Terms */
.popUp {
    width: 100%;
    height: 100%;
    background-color: var(--guinda);
    display: none;
    z-index: 5;
}

.popUpContenido {
    background-color: #F5F0EF;
    padding: 1rem 1.5rem;
    margin: 1.5rem;
    width: 100% auto;
    border-radius: 0.5rem;
}

.popUpContenido iframe {
    border: 0;
    margin: 0;
    margin-top: 1rem;
    width: 100%;
    height: 100%;
}

.cerrarPopUpButton {
    float: right;
    width: 2rem;
    line-height: 2rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
}

.cerrarPopUpButton:hover {
    background-color: darkgray;
}

.mostrarPopUp {
    opacity: 1;
    display: block;
    transform: scale(1.0);
    transition: display 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

/* Non-mobile */
@media (min-width:74rem) {
    .popUp {
        grid-area: up;
    }
}

/* Mobile */
@media (max-width:74rem) {
    .popUp {
        position: fixed;
        top: 0;
        left: 0;
        height: 95%;
    }

    .popUpContenido iframe {
        height: 95vh;
    }
}


#displaypass_label {
    display: none;
}


#displaypass {
    display: none;
}

#label_city {
    display: block;
}

.container {
    margin-top: 2rem;
    /* Ajusta el valor según sea necesario para el espacio entre el mensaje de error y el contenido */
    transition: margin-top 0.3s ease;
    /* Agrega una transición suave al desplazamiento hacia abajo */
}

.container.error-visible {
    margin-top: 6rem;
    /* Ajusta el valor según sea necesario para el espacio entre el mensaje de error y el contenido */
}

input#idPais {
    display: none;
}

label#idPais_label {
    display: none;
}

.error.custom-message:before {
    content: "Número de teléfono o correo incorrecto.";
    display: block;
    text-align: center;
    font-weight: bold;
    /* Otros estilos que quieras aplicar */
}

.custom-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* Slider automático y manual */

.slider {
    width: 100%;
    max-width: 100vw;
    height: 100%;
    margin: 0;
    position: relative;
    overflow: hidden;
}

.slider .list {
    position: absolute;
    width: 800%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    transition: 1s;
}

.slider .list .item {
    width: 100%;
}

.slider .list .item img {
    width: 100%;
    /*max-width: 100vw;*/
    height: 100%;
    object-fit: cover;
}

.slider .buttons {
    position: absolute;
    top: 45%;
    left: 5%;
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.slider .buttons button {
    display: flex;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: transparent;
    color: rgba(153, 204, 255, .7);
    border: none;
    font-family: monospace;
    font-weight: bold;
    font-size: 4rem;
}

.slider .dots {
    position: absolute;
    bottom: 1rem;
    left: 0;
    color: #fff;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

.slider .dots li {
    list-style: none;
    width: 2.4rem;
    height: .4rem;
    background-color: #9D9D9D;
    opacity: .5;
    /* background-color: rgba(100, 100, 100, 0.5); */
    margin: 1rem;
    /* border-radius: 2rem; */
    transition: 0.5s;
}

.slider .dots li.active {
    background-color: #6F6E6E;
    opacity: .5;
}

.custom-dropdown {
    background-color: var(--blanco);
    display: inline-block;
    height: 5rem;
    width: 10rem;
    padding: 1rem;
    color: #000;
    font-size: 1.4rem;
    line-height: 1.8rem;
    border-style: solid none solid solid;
    border-radius: 1rem 0 0 1rem;
    font-weight: 200;
}

.dropdown {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 14rem;
}

@media (min-width: 38rem) {
    .dropdown {
        align-items: flex-start;
    }
}

.dropdown img {
    width: 2rem;
    object-fit: none;
}

.select {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-select);
    color: var(--negro);
    border: .1rem #2a2f3b solid;
    border-radius: 1.5rem;
    padding: .5rem;
    cursor: pointer;
    transition: 0.3s;
}

#languageSelect .selected {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.caret {
    display: flex;
    width: 1.5rem;
    height: 2rem;
    transition: 0.3s;
}

.caret-rotate {
    transform: rotate(180deg);
}

.menu {
    list-style: none;
    padding: 0 0 1rem 0;
    background: #323741;
    border: .1rem solid var(--bordemenu);
    box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    color: var(--negro);
    width: 24rem;
    opacity: 0;
    display: none;
    transition: 0.2s;
    z-index: 1;
}

.menu-open {
    display: block;
    background-color: var(--blanco);
    opacity: 1;
	margin-top: .5rem;
}

.menu .pick-lang {
    padding: 1rem;
    border-bottom: .1rem solid var(--negro)
}

.menu .pick-lang h4 {
    font-weight: 700;
}

.menu li {
    color: var(--negro);
    font-size: 1.6rem;
    text-align: left;
    cursor: pointer;
    padding: 0rem 1rem;
}

.menu li .cont-lang {
    height: 4rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid var(--bordemenu);
}

.menu li:last-of-type .cont-lang {
    border: none;
}

.menu li:hover {
    background: var(--grisclaro);
}

.active {
    background: transparent;
}