@import "/assets/css/file-list.css";
@import "/assets/css/signature-pad.css";
@import "/assets/css/separator.css";

/* DEFAULT BUTTONS */
:root {
    /* Colors: */
    --confirmacion-50: #E7F3E7;
    --optimista-100: #FFF2D2;
    --optimista-800: #805C0F;
    --error-50: #FAE8EB;
    --azul-seleccionado: #C8DEEF;
    --gris-5: #DDDDDD;
}

.app-button {
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
    border: none;
    font-family: Lato, Regular;
    height: 50px;
}

.app-button:disabled {
    background: #d9d8d6;
    color: #666666;
    cursor: default;
}

.app-button:disabled:hover {
    background: #d9d8d6;
    color: #666666;
    cursor: default;
}

.app-button-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* SIZE BUTTONS */
.app-button-s {
    width: 171px;
}

.app-button-m {
    width: 220px;
}

.app-button-l {
    width: 260px;
}

.display-none {
    display: none;
}

.display-inline {
    display: inline;
}

/* TYPE BUTTONS */
.app-button-primary {
    background: var(--amarillo-optimista);
    color: var(--azul-experto);
}

.app-button-primary:hover {
    background: var(--azul-experto);
    color: var(--blanco);
}

.app-button-secondary {
    background: var(--azul-experto);
    color: var(--blanco);
}

.app-button-secondary:hover {
    background: var(--azul-financiero);
}


.app-button-action-footer {
    background: var(--azul-experto);
    color: var(--blanco);
}

.app-button-action-footer:hover {
    background: var(--azul-financiero) !important;
}

.app-button-back {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--azul-experto);
}

.app-button-back-movil {
    background-color: var(--gris-fondo);
    color: var(--azul-experto);
}

.app-button-flat {
    background: transparent;
    color: #666666;
    height: auto;
}

.app-button-flat span.app-button-text {
    border-bottom: 1px solid #666666;
}

.app-button-flat:hover {
    background: transparent;
    color: #666666;
}

.app-button-special-flat {
    background: transparent;
    color: var(--azul-experto);
    height: auto;
}

.app-button-special-flat span {
    border-bottom: 1px solid var(--azul-experto);
}

.app-button-special-flat:hover {
    background: transparent;
    color: var(--azul-experto);
}

.app-button-outlined {
    background: transparent;
    color: var(--azul-experto);
    border: 1px solid var(--azul-experto);
    font-weight: 400;
}

.app-button-outlined:hover {
    background-color: color-mix(in srgb,
            var(--azul-financiero) 8%,
            transparent);
}

.app-button-outlined:disabled {
    border: none;
}

.app-button-clean {
    background: transparent;
    color: var(--azul-experto);
    font-weight: 400;
}

/* imprimir consulta */

.app-button-print {
    background: transparent;
    color: var(--azul-experto);
    height: auto;
    border-radius: 0;
    border-bottom: solid 1px transparent;
    min-height: 55px;
    position: absolute;
    left: 45.7% !important;
}

.app-button-print span:hover,
.app-button-inline span:hover {
    border-bottom: 1px solid var(--azul-financiero);
}

.app-button-print span,
.app-button-inline span {
    border-bottom: solid 1px transparent;
}

.app-button-print .app-button-content:hover,
.app-button-inline .app-button-content:hover {
    filter: brightness(0) saturate(100%) invert(53%) sepia(30%) saturate(853%) hue-rotate(142deg) brightness(84%) contrast(95%);
    color: var(--azul-financiero);
}

.app-button-inline {
    background: transparent;
    color: var(--azul-experto);
    height: auto;
    border-radius: 0;
    border-bottom: solid 1px transparent;
    min-height: 55px;
}

.app-button-inline:disabled {
    background-color: transparent;
    filter: brightness(0) saturate(100%) invert(90%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(93%) contrast(91%);
    color: var(--gris-5);
    cursor: default
}

.app-button-inline:disabled:hover {
    background-color: transparent;
    color: var(--gris-5);
    cursor: default;
}

.app-button-inline:disabled span:hover {
    border-bottom: solid 1px transparent;
}

.icon-button {
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-button:hover {
    filter: invert(53%) sepia(91%) saturate(2633%) hue-rotate(1deg) brightness(103%) contrast(103%);
}

@media screen and (max-width: 768px) {

    .app-button-s,
    .app-button-m,
    .app-button-l {
        width: 100%;
    }

    .app-button-modal {
        width: 150px;
    }

    .app-button-special-flat {
        width: 190px;
    }

    .app-button-modal-l {
        width: 180px;
    }

    .app-button-action-footer {
        background: var(--amarillo-optimista);
        color: var(--azul-experto);
    }

    .app-button-action-footer:hover {
        background: var(--azul-experto)!important;
        color: var(--blanco);
    }

    .app-button--small {
        width: 113px;
        height: 35px;
        font-size: 15px;
    }
}

@media screen and (max-width: 480px) {
    .app-button-back {
        display: none;
    }
}

@media screen and (max-width: 1200px) {
    .app-button-print {
        position: static;
    }
}

@media screen and (max-width: 360px),
screen and (max-height: 512px) {
    .app-button {
        font-size: 16px;
        padding: 17px 0;
    }

    .app-modal-content-icon {
        margin-top: 10px !important;
    }
}

/* MODALS STYLES */

.app-modal-background,
.loading-overlay-backdrop {
    background-color: rgb(140, 140, 140, 0.73);
    backdrop-filter: blur(7px);
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.loading-overlay-backdrop {
    gap: 16px;
    z-index: 1700;
}

.loading-img {
    width: 10%;
    z-index: 1800;
    user-select: none;
}

@media screen and (max-width: 480px) {
    .loading-img {
        width: 30%;
    }
}

.loading-text {
    font-size: 16px;
    font-weight: 400;
    color: var(--azul-experto);
    margin: 0;
    text-align: center;
    text-wrap: balance;
    z-index: 1800;
    user-select: none;
}

.app-modal-content {
    width: 630px;
    background: var(--blanco);
    border-radius: 20px;
    box-shadow: 0px 3px 6px #00000029;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 52px 55px 50px 55px;
    text-align: center;
    display: flex;
    flex-direction: column;
    word-break: break-word;
}

.app-modal-content-body {
    padding: 30px 0 0;
    gap: 30px;
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 360px),
screen and (max-height: 512px) {
    .app-modal-content-body {
        max-height: 350px;
        overflow-y: auto;
    }
}

.app-modal-content-icon {
    position: absolute;
    top: -54px;
}

.app-modal-content-icon img {
    width: 104px;
}

.app-modal-content-title {
    color: var(--azul-experto);
    text-align: center;
    font-family: Lato;
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-wrap: balance;
}

.app-modal-content-subphrase {
    font-family: Lato;
    font-size: 16px;
    line-height: 19.2px;
    text-align: center;
    color: var(--azul-experto);
}

.app-modal-content-titile.digital {
    color: var(--azul-digital);
}

.app-modal-content-subtitle {
    color: var(--azul-experto);
    text-align: center;
    font-family: Lato;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.app-modal-content-subtitle.digital {
    color: var(--azul-digital);
}

.app-modal-content-description {
    color: var(--azul-experto);
    text-align: center;
    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.app-modal-content-description.digital {
    color: var(--azul-digital);
}

.app-modal-content-buttons {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-direction: column;
}

.app-modal-help-number {
    color: var(--azul-experto);
    text-align: center;
    font-family: Lato;
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.app-modal-description-special-gray {
    color: #666666;
    font-weight: 400;
}

.app-modal-description-special-outlined-blue {
    color: var(--azul-experto);
    border-bottom: 1px solid var(--azul-experto);
    font-weight: 400;
}

.app-modal-validate-content {
    padding-top: 20px;
    gap: 15px;
}

.app-modal-validate-subtitle-money {
    font-size: 40px;
}

@media screen and (max-width: 768px) {
    .app-modal-content {
        width: 302px;
        padding: 40px 41.5px 50px 41.5px;
    }

    .app-modal-content-icon {
        top: -40px;
    }

    .app-modal-content-icon img {
        width: 80px;
    }

    .app-modal-content-title {
        font-size: 20px;
    }

    .app-modal-content-subtitle {
        font-size: 18px;
    }

    .app-modal-content-description {
        font-size: 16px;
    }

    .app-modal-help-number {
        font-size: 34px;
    }

    .app-modal-content-buttons {
        flex-direction: column;
        gap: 23.62px;
    }

    .app-modal-content-token {
        padding: 20px 0 0;
        gap: 20px;
    }

    .app-modal-validate-content {
        gap: 15px;
    }

    .app-modal-validate-subtitle {
        font-size: 16px;
    }

    .app-modal-validate-subtitle-money {
        font-size: 24px;
    }
}

/*? COMPONENTE DE TARJETA DETECTADA (CUANDO PIDE PIN): */

@media screen and (max-height: 719px) {
    .app-pinpad-gif-wrapper>img {
        max-width: 45%;
    }
}

@media screen and (min-height: 720px) and (max-height: 871px) {
    .app-pinpad-gif-wrapper>img {
        max-width: 50%;
    }
}

@media screen and (min-height: 872px) and (max-height: 1024px) {
    .app-pinpad-gif-wrapper>img {
        max-width: 55%;
    }
}

@media screen and (min-height: 1025px) and (max-height: 1199px) {
    .app-pinpad-gif-wrapper>img {
        max-width: 80%;
    }
}

@media screen and (min-height: 1200px) {
    .app-pinpad-gif-wrapper>img {
        max-width: 95%;
    }
}

.text-experto {
    color: var(--azul-experto) !important;
}

.text-32 {
    font-size: 32px !important;
}

.text-bold {
    font-weight: bold !important;
}

.app-detected-card-body {
    margin: 40.5px 0 56px 0;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.app-detected-card-icon {
    width: 56px !important;
    height: 56px !important;
    margin: 0 0 8px 0;
}

.app-detected-card-title {
    color: var(--verde);
    font-size: 34px;
    margin: 0 0 32.49px 0;
}

.app-detected-card-subtitle {
    color: var(--azul-experto);
    font-size: 22px;
    margin: 0 0 23.2px 0;
}

.app-detected-card-form {
    display: flex;
    gap: 34.9px;
}

.app-detected-card-input {
    border: 1px solid var(--gris-4) !important;
    border-radius: 7px !important;
    height: 70.95px;
    width: 76.79px;
    background-image: url('./icons/asterisk.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 23.7px;
    color: transparent;
}

.app-detected-card-input:focus {
    border: 1px solid var(--gris-4) !important;
    color: transparent;
}

.app-detected-card-input-value {
    border: 1px solid var(--azul-digital) !important;
    background-image: url('./icons/asterisk-active.svg');
}

.app-detected-card-input-value:focus {
    border: 1px solid var(--azul-digital) !important;
}

@media screen and (max-width: 768px) {
    .app-detected-card-body {
        margin: 31px 0 60px 0;
    }

    .app-detected-card-icon {
        width: 32px !important;
        height: 32px !important;
        margin: 0 0 4px 0;
    }

    .app-detected-card-title {
        font-size: 24px;
        margin: 0 0 31px 0;
    }

    .app-detected-card-subtitle {
        font-size: 16px;
        margin: 0 0 16px 0;
    }

    .app-detected-card-form {
        gap: 25.82px;
    }

    .app-detected-card-input {
        height: 52.48px;
        width: 56.8px;
        background-size: 17.53px;
    }
}

/* HEADER ESTANDARIZACION */

.app-header {
    height: 70px;
    background: #f4f4f4;
    display: flex;
    width: 100%;
    height: 70px;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 50;
}

.app-header-logo {
    height: 50px;
}

@media screen and (max-width: 768px) {
    .app-header {
        height: 65px;
        padding: 0 27px;
        background: #f7f7f7;
    }

    .app-header-logo {
        height: 25px;
        width: 29px;
    }

    .app-header-home {
        width: 26px;
        height: 26px;
    }

    .app-header-hamburger {
        width: 32px;
        height: 16px;
    }
}

.app-header-search {
    font-size: 16px;
    color: var(--gris-3);
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    line-height: 1.5;
    border: none;
    background-image: url('icons/lupa.svg');
    background-repeat: no-repeat;
    background-position: 15px 10px;
    background-size: 20px 20px;
    border-radius: 25px;
    width: 330px;
    height: 50px;
    padding: 10px 15px 10px 24px;
    background: #fafaf9;
    -webkit-appearance: none;
    -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2) inset;
    margin-top: 10px;
}

.app-header-search::placeholder {
    color: #838d99;
}

.app-header-search:focus {
    outline: none;
}

.app-header-operations {
    position: fixed;
    top: 70px;
    z-index: 50;
    padding: 64px 30px 35px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: var(--blanco);
}

@media screen and (max-width: 768px) {
    .app-header-operations {
        top: 65px;
        background: var(--gris-fondo);
        padding: 22px 30px 22px;
        width: 100%;
    }

    .app-header-shadow {
        box-shadow: 0px 2px 3px #0000000d;
    }
}

.app-card-home-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.app-card-home-icon i {
    width: 65px;
    height: 65px;
}

.icon-modulo-remesas {
    content: url('/templates/default/images/transaccionesproductos/cf-remesas.svg');
}

.icon-modulo-depositos {
    content: url('/templates/default/images/transaccionesproductos/depositos/dp-menu-principal.svg');
}

.icon-modulo-depositos-efectivo {
    content: url('/templates/default/images/transaccionesproductos/depositos/dp-efectivo.svg');
}

.icon-modulo-depositos-tarjeta {
    content: url('/templates/default/images/transaccionesproductos/depositos/dp-tarjeta-debito.svg');
}

.icon-modulo-retiros {
    content: url('/templates/default/images/transaccionesproductos/retiros-menu-principal.svg');
}

.icon-modulo-luz {
    content: url('/templates/default/images/transaccionesproductos/luz-electrica.svg');
}

.icon-modulo-telefonias {
    content: url('/templates/default/images/transaccionesproductos/telefonias.svg');
}

.icon-modulo-convenios {
    content: url('/templates/default/images/transaccionesproductos/convenios.svg');
}

.icon-modulo-tmoviles-pago {
    content: url('/templates/default/images/transaccionesproductos/transferencias_moviles_pago.svg');
}

.icon-modulo-tmoviles-envio {
    content: url('/templates/default/images/transaccionesproductos/transferencias_moviles_envio.svg');
}

.icon-modulo-tmoviles {
    content: url('/templates/default/images/transaccionesproductos/transferencias_moviles.svg');
}

.icon-modulo-tmoviles-pago {
    content: url('/templates/default/images/transaccionesproductos/transferencias_moviles_pago.svg');
}

.icon-modulo-tmoviles-envio {
    content: url('/templates/default/images/transaccionesproductos/transferencias_moviles_envio.svg');
}

.icon-modulo-prestamo {
    content: url('/templates/default/images/transaccionesproductos/prestamo.svg');
}

.icon-modulo-tarcredito {
    content: url('/templates/default/images/transaccionesproductos/pagotarjetacredito.svg');
}

.icon-modulo-reimpresion {
    content: url('/templates/default/images/reimpresion-voucher.svg');
}

.icon-modulo-tiempoaire {
    content: url('/templates/default/images/venta-de-aire.svg');
}

.icon-modulo-cierredia {
    content: url('/templates/default/images/transaccionesproductos/cierrededia.svg');
}

.icon-modulo-reimpresion {
    content: url('/templates/default/images/transaccionesproductos/reimpresion.svg.svg');
}

.icon-default {
    content: url('/templates/default/images/transaccionesproductos/depositos/dp-menu-principal.svg');
}

.icon-modulo-retiros-debito-prepago {
    content: url('/templates/default/images/transaccionesproductos/retiros-debito-prepago.svg');
}

.icon-modulo-retiros-credito {
    content: url('/templates/default/images/transaccionesproductos/retiros-tarjeta-credito.svg');
}

.icon-default {
    content: url('/templates/default/images/transaccionesproductos/depositos/dp-menu-principal.svg');
}

.icon-modulo-remesas-acceso-pago {
    content: url('/templates/default/images/transaccionesproductos/cf-pago.svg');
}

.icon-modulo-remesas-acceso-cliente-frecuente {
    content: url('/templates/default/images/transaccionesproductos/cf-cliente-frecuente.svg');
}

.icon-modulo-remesas-acceso-actualizacion-datos {
    content: url('/templates/default/images/transaccionesproductos/cf-actualizacion-datos.svg');
}

.icon-modulo-remesas-acceso-premiacion {
    content: url('/templates/default/images/transaccionesproductos/premiacion.svg');
}

.icon-modulo-consultas {
    content: url('/templates/default/images/transaccionesproductos/consultas-icon-modulo.svg');
}.i-icon-export{
    height: 18px;
    width: 22px;
    content: url('icons/export.svg');
}

.app-button-inline :hover .i-icon-export{
    content: url('icons/export-hover.svg');
}

.icon-modulo-tmoviles-envio {
    content: url('/templates/default/images/transaccionesproductos/transferencias_moviles_envio.svg');
}

.icon-modulo-tmoviles-pago {
    content: url('/templates/default/images/transaccionesproductos/transferencias_moviles_pago.svg');
}
.icon-modulo-zigi{
    content:url('/templates/default/images/transaccionesproductos/Zigi.svg');
}


.icon-modulo-tarjeta-credito {
    content: url('/templates/default/images/transaccionesproductos/pagotarjetacredito.svg');
}

.icon-modulo-reimpresion {
    content: url('/templates/default/images/reimpresion-voucher.svg');
}

.icon-modulo-recargas {
    content: url('/templates/default/images/venta-de-aire.svg');
}

.icon-modulo-configuracion-usuario {
    content: url('/templates/default/images/transaccionesproductos/user-settings.svg');
}

.icon-modulo-configuracion-usario-eliminar {
    content: url('/templates/default/images/transaccionesproductos/user-delete.svg');
}

.icon-modulo-configuracion-usario-horario {
    content: url('/templates/default/images/transaccionesproductos/user-horario.svg');
}

.icon-modulo-configuracion-usario-edicion {
    content: url('/templates/default/images/transaccionesproductos/user-edicion.svg');
}

.icon-modulo-pagosgl {
    content: url('/templates/default/images/transaccionesproductos/icon-modulo-pagosgl.svg');
}

.icon-modulo-pagos-municipales {
    content: url('/templates/default/images/transaccionesproductos/icon-modulo-pagosgl.svg');
}

.icon-modulo-afiliacion-movil {
    content: url('/templates/default/images/afiliacion-movil.svg');
}

.icon-afiliacion-etapa {
    content: url('/templates/default/icons/afiliacion-crear-caso.svg');
}

.icon-afiliacion-caso-en-proceso {
    content: url('/templates/default/images/afiliacion-caso-en-proceso.svg');
}

.icon-afiliacion-caso-creado {
    content: url('/templates/default/images/afiliacion-caso-creado.svg');
}

.icon-afiliacion-caso-borrador {
    content: url('/templates/default/images/afiliacion-caso-borrador.svg');
}

.icon-modulo-configuracion-usuario {
    content: url('/templates/default/images/transaccionesproductos/user-settings.svg');
}

.icon-modulo-configuracion-usario-eliminar{
    content: url('/templates/default/images/transaccionesproductos/user-delete.svg');
}

.icon-modulo-configuracion-usario-horario{
    content: url('/templates/default/images/transaccionesproductos/user-horario.svg');
}

.icon-afiliacion-borradores {
    content: url('/templates/default/icons/afiliacion-borradores.svg');
}

.icon-afiliacion-clientes-no-autorizados {
    content: url('/templates/default/icons/afiliacion-clientes-no-autorizados.svg');
}

.icon-recarga-claro {
    content: url('/templates/default/images/recarga-claro.svg');
    width: 100px !important;

}

.icon-recarga-tigo {
    content: url('/templates/default/images/recarga-tigo.svg');
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--gris-2);
}

.grid {
    display: grid;
}

.cols-sm-12 {
    grid-template-columns: repeat(1, 1fr);
}

.gap-36 {
    gap: 36px;
}

.app-remittance-searcher-gap {
    gap: 20px;
}

@media only screen and (min-width: 768px) {
    .cols-md-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .app-remittance-searcher-spaces {
        padding-right: 50px;
        margin-top: 50px;
        border-right: 1px solid #dddddd;
    }

    .app-remittance-searcher-spaces-award {
        padding: 60px 50px 60px 15px;
        margin-top: 50px;
        border-right: 1px solid #dddddd;
    }

    .app-remittance-searcher-result-spaces {
        padding-left: 50px;
        margin-top: 50px;
    }

    .app-remittance-searcher-gap {
        gap: 40px;
    }

    .app-remittance-form-spaces {
        margin: 50px 0 50px 0;
    }
}

.app-remittance-logo {
    width: 112px;
    height: 112px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 100%;
    border: 1px solid #dddddd;
    padding: 5px;
}

.app-remittance-info-logo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}

.app-remittance-info-items {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.app-remittance-info-label {
    font-size: 20px;
    color: var(--azul-digital);
    font-weight: 500;
}

.app-remittance-info-value {
    font-size: 28px;
    color: var(--azul-experto);
    font-weight: 500;
    text-transform: capitalize;
    line-height: 28px;
    margin-left: -0.8px;
}

.app-remittance-info-logo-value {
    font-size: 28px;
    color: var(--azul-experto);
    font-weight: 500;
    text-transform: capitalize;
    line-height: 28px;
    margin-left: -0.8px;
}

.app-remittance-info-benefi-value {
    font-size: 34px;
    color: var(--azul-experto);
    font-weight: 500;
    text-transform: capitalize;
    line-height: 28px;
    margin-left: -0.8px;
}

.app-remittance-info-label-amount {
    font-size: 28px;
    color: var(--azul-digital);
    font-weight: 500;
}

.app-remittance-info-value-amount {
    font-size: 52px;
    color: var(--azul-experto);
    font-weight: 500;
    text-transform: capitalize;
    line-height: 52px;
    margin-left: -4px;
}

@media only screen and (max-width: 768px) {
    .app-remittance-info-items {
        gap: 16px;
    }

    .app-remittance-logo {
        width: 74px;
        height: 74px;
    }

    .app-remittance-info-label,
    .app-remittance-info-label-amount,
    .app-remittance-info-logo-value {
        font-size: 16px;
    }

    .app-remittance-info-value,
    .app-remittance-info-benefi-value,
    .app-remittance-info-value-amount {
        font-size: 24px;
    }

    .app-remittance-info-value-amount {
        line-height: normal;
        margin-left: -2px;
    }

    .app-remittance-info-logo {
        width: 100%;
    }

    .app-remittance-info-logo-mobile {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .app-remittance-info-logo-mobile-award {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.rp-info-remittance .rp-info-remittance-logo img {
    width: 72px;
    height: 72px;
}

.rp-info-remittance .rp-info-remittance-number p:first-child {
    font-size: 14px;
}

.rp-info-remittance .rp-info-remittance-number p:last-child,
.rp-info-remittance .rp-info-remittance-logo p {
    font-size: 16px;
}

.icon-modulo-zigi {
    content: url('/templates/default/images/transaccionesproductos/Zigi.svg');
}

.i-icon-export {
    height: 18px;
    width: 22px;
    content: url('icons/export.svg');
}

.app-button-inline :hover .i-icon-export {
    content: url('icons/export-hover.svg');
}

.alert-remesas-wu {
    font-size: 17px;
    padding-top: 10px;
}

@media screen and (max-width: 768px) {
    .alert-remesas-wu {
        font-size: 15px;
    }
}

.my-6 {
    margin: 6rem 0;
}

.app-card-counter {
    position: absolute;
    border-radius: 100%;
    width: 31px;
    height: 31px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--blanco);
    top: -15.5px;
    right: -15.5px;
    line-height: 14px;
}

.app-card-counter-color-1 {
    background-color: var(--azul-experto);
}

.app-card-counter-color-2 {
    background-color: var(--azul-digital);
}

.app-card-counter-color-3 {
    background-color: var(--azul-financiero);
}

.app-card-counter-color-4 {
    background-color: var(--amarillo-optimista);
}

.app-section-item {
    display: flex;
    align-items: center;
    border-right: 1px solid #DDDDDD;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.app-section-item-icon {
    width: 30px;
}

.app-section-item>span {
    font-size: 15px;
    font-weight: 600;
    color: #003865;
}

/* Afiliacion movil: Icono seccion datos personales */
.afiliacion-icono-datos-personales {
    content: url('/templates/default/icons/afiliacion-datos-personales.svg');
}

/* Afiliacion movil: Icono seccion datos comerciales */
.afiliacion-icono-datos-comerciales {
    content: url('/templates/default/icons/afiliacion-datos-comerciales.svg');
}

/* Afiliacion movil: Icono seccion datos adicionales */
.afiliacion-icono-datos-adicionales {
    content: url('/templates/default/icons/afiliacion-datos-adicionales.svg');
}

/* Afiliacion movil: Icono seccion datos comisiones */
.afiliacion-icono-datos-comisiones {
    content: url('/templates/default/icons/afiliacion-datos-comisiones.svg');
}

/* Afiliacion movil: Icono seccion datos despachos */
.afiliacion-icono-datos-despachos {
    content: url('/templates/default/icons/afiliacion-datos-despachos.svg');
}

/* Afiliacion movil: Icono seccion datos docs */
.afiliacion-icono-datos-documents {
    content: url('/templates/default/icons/afiliacion-datos-documentos.svg');
}

.afiliacion-icono-editar-campo {
    content: url('/templates/default/icons/afiliacion-icono-editar-campo.svg');
}

.afiliacion-icono-editar-campo:hover {
    content: url('/templates/default/icons/afiliacion-icono-editar-campo-amarillo.svg');
}

.afiliacion-icono-editar-campo-confirm {
    content: url('/templates/default/icons/afiliacion-icono-editar-campo-confirm.svg');
}

.afiliacion-icono-observaciones {
    content: url('/templates/default/icons/afiliacion-icono-observaciones.svg');
}

.afiliacion-movil-icon-active {
    filter: invert(59%) sepia(35%) saturate(4370%) hue-rotate(146deg) brightness(99%) contrast(101%);
}

.section-error-active {
    filter: invert(26%) sepia(90%) saturate(7463%) hue-rotate(341deg) brightness(88%) contrast(102%);
}

.section-error {
    color: #CB2533 !important;
}

.app-section-item-icon-wrapper {
    position: relative;
    top: -6px;
    right: -9px;
    color: #CB2533 !important;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    pointer-events: none;
}

.i-icon-afiliacion-tooltip {
    height: 18px;
    width: 18px;
    content: url('icons/afiliacion-tooltip.svg');
}

.linea-divisora {
    background: var(--azul-digital);
    border: 1px;
    height: 2px !important;

}

.linea-divisora-titulo {
    color: var(--azul-experto);
    font-size: 14px;
    font-weight: 700;
    padding-left: 0;
}

.my-30px {
    margin: 30px 0;
}

.mt-30px {
    margin-top: 30px;
}

.mb-30px {
    margin-bottom: 30px;
}

.gap-30px {
    gap: 30px;
}

/* progress indicator component */
.app-progress-indicator {
    width: 52px;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.app-progress-indicator_text {
    font-size: 20px;
    line-height: 20px;
    color: var(--azul-experto);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.app-progress-indicator_title {
    font-size: 16px;
    font-weight: 700;
    color: var(--azul-experto);
}

.app-border-right-0 {
    border-right: none;
}

.app-afiliacion-title {
    font-size: 18px;
    font-weight: 400;
    color: var(--azul-experto);
}

.app-checkbox {
    width: 24px;
    height: 24px;
    color: var(--azul-experto);
    accent-color: var(--azul-experto);
    cursor: pointer;
}

.app-checkbox:hover {
    accent-color: var(--azul-experto);
    background-color: var(--azul-experto);
}

.app-checkbox_label {
    position: relative;
    transform: none !important;
    padding: 0 !important;
    top: -0.1rem !important;
}

.app-tooltip {
    position: relative;
    display: inline-block;
    opacity: 100;
}

.app-tooltip .app-tooltip_text {
    visibility: hidden;
    font-size: 12px;
    font-weight: 400;
    background-color: #666666;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    width: 120px;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    color: #FFFFFF;
    position: absolute;
    z-index: 1;
}

.app-tooltip:hover .app-tooltip_text {
    visibility: visible;
}

.app-input-amount {
    text-align: center !important;
    font-weight: bold;
    color: var(--azul-experto) !important;
}

.app-input-amount::placeholder {
    text-align: center;
    font-weight: bold;
    color: var(--azul-experto) !important;
}

.app-radio-no-backgroud:checked+label {
    background-color: #F7F7F7 !important;
}

/* Afiliacion movil float menu styles */

.overlay-afiliacion-float-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: none;
    z-index: 500;
}

.afiliacion-float-menu {
    position: relative;
    bottom: 50px;
    width: 171px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    z-index: 1000;
}

.afiliacion-float-menu-wrapper {
    max-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: max-height 0.3s ease-in-out;
    margin-bottom: 8px;
}

.afiliacion-float-menu-item {
    display: flex;
    justify-content: space-between;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    cursor: pointer;
}

.afiliacion-float-menu-wrapper.open .afiliacion-float-menu-item {
    visibility: visible;
    opacity: 1;
}

.afiliacion-float-menu-item-icon {
    position: absolute;
    width: 50px;
    height: 50px;
    background: var(--azul-digital);
    border-radius: 100%;
    right: 0;
    transition: all 0.3s ease;
    content: url('/templates/default/icons/afiliacion/arrow-right-default.svg');
}

.afiliacion-float-menu-item-label {
    display: flex;
    align-items: center;
    color: var(--azul-experto);
    width: 171px;
    height: 50px;
    background: white;
    border-radius: 30px;
    padding-left: 16px;
    font-size: 20px;
}

.afiliacion-float-menu-toggle {
    position: absolute;
    bottom: -50px;
    width: 48px;
    height: 48px;
    background: var(--amarillo-optimista);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    cursor: pointer;
    z-index: 50;
    transition: all 0.3s ease;
}

@media (max-width: 1200px) {
    .afiliacion-float-menu {
        bottom: 0;
        right: -20px;
    }

}

.afiliacion-float-menu-toggle-open {
    transition: all 0.3s ease;
    content: url('/templates/default/icons/afiliacion/icono-actions-menu-open.svg');
}

.afiliacion-float-menu-toggle-close {
    transition: all 0.3s ease;
    content: url('/templates/default/icons/afiliacion/icono-actions-menu-close.svg');
}




.app-section-item.active .app-section-item-bar {
    background: #00C1D4;
    border-radius: 10px;
    width: 100%;
    height: 5px;
    position: absolute;
    bottom: -15px;
    left: 0;
    z-index: 2;
}

.app-section-item-bar-inactive {
    background: #ddd;
    border-radius: 10px;
    width: 100%;
    height: 5px;
    position: absolute;
    bottom: -15px;
    left: 0;
    z-index: 1;
}

.app-section-item span {
    color: var(--gris-6);
}

.app-section-item.active span {
    color: var(--azul-experto);
}

.button-action-right #app-button-action {
    float: right;
}

.icon-afiliacion-movil-dashboard {
    content: url('/templates/default/images/afiliacion-movil.svg');
}

.icon-precalif {
    content: url('/templates/default/images/precalif.svg');
}

.icon-precalif-visualizador {
    content: url('/templates/default/icons/icon-eye-visualiza.svg');
}
.icon-precalif-visualizador:hover {
    cursor: pointer;
}

.icon-precalif-retry {
    content: url('/templates/default/icons/retry.svg');
}

.icon-alert {
    content: url('/templates/default/icons/icon-alert.svg');
}

.app-mtable {
    color: var(--azul-experto);
    font-size: 14px;
    font-weight: 400;
    border: 1px solid #D2D2D2;
    border-radius: 15px;
    border-collapse: separate;
    border-spacing: 0;
}

.app-mtable thead {
    display: none;
}

.app-mtable>tbody>tr:first-child>td>div:first-child {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.app-mtable>tbody>tr:last-child>td>div:last-child {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.app-mtable_first {
    background-color: var(--azul-experto);
    color: var(--blanco);
}

.app-mtable_bordered {
    border-bottom: 1px solid #D2D2D2;
}

.app-mtable_text_underline {
    text-decoration: underline;
    text-underline-offset: 2.5px;
    font-weight: 700;
}

.pagination {
    gap: 5px !important;
    margin: 0;
}

.paginate_button a {
    height: 19px !important;
    width: 19px !important;
    font-size: 12px !important;
    color: #666666 !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    background-color: transparent !important;
    border: none !important;
}

.paginate_button.active a {
    background-color: #2C8B9E !important;
    color: white !important;
    border-radius: 2px !important;
}

.paginate_button:disabled {
    cursor: default !important;
}

.paginate_button.disabled {
    opacity: .5 !important;
}

.table-footer-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    font-size: 12px;
    color: #666666;
    margin: 24px 0;
}

.pagination .pagination-action.inactive {
    opacity: .5;
    cursor: default;
}

.pagination .pagination-prev {
    content: url('/templates/default/icons/arrow-left.svg');
}

.pagination .pagination-next {
    content: url('/templates/default/icons/arrow-right.svg');
}

.app-card-home-icon img {
    width: 65px;
    height: 65px;
}

.app-top-50vh {
    top: 50vh;
}

.app-footer-absolute {
    position: absolute;
    bottom: 0;
    left: 0;
}

@media screen and (max-height: 460px) {
    .app-footer-absolute {
        position: static;
    }
}

/* Estilos para la card de historial de transacciones */

.history-transactions-card-wrapper {
    border-radius: 15px;
}

.history-transactions-card-header {
    background-color: rgba(0, 164, 180, 1);
    color: white;
    text-align: center;
    padding: 10px;
    font-size: 20px;
    font-weight: 700;
    border-radius: 15px 15px 0 0;
}

.history-transactions-card-body {
    padding: 16px 28px;
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: center;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 15px 15px;
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: rgba(221, 221, 221, 1);
}

.history-transactions-card-body-title {
    font-size: 14px;
    font-weight: 500;
    color: rgba(140, 140, 140, 1);
}

.history-transactions-card-body-total {
    font-size: 36px;
    font-weight: 800;
    color: var(--azul-experto);
}

.history-transactions-card-body-movs {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    border-top: 1px solid rgba(221, 221, 221, 1);
    gap: 5px;
}

.history-transactions-card-body-mov {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    margin-top: 8px;
    min-width: 0;
}

.history-transactions-card-body-mov-detail {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.history-transactions-card-body-mov-label {
    font-size: 12px;
    color: rgba(140, 140, 140, 1);
}

.history-transactions-card-body-mov-value {
    font-size: 16px;
    color: rgba(102, 102, 102, 1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-transactions-card-body-mov-entries {
    content: url('/templates/default/icons/historial-transacciones/arrow-entradas.svg');
}

.history-transactions-card-body-mov-salidas {
    content: url('/templates/default/icons/historial-transacciones/arrow-salidas.svg');
}

.history-transactions-card-body-mov-entries,
.history-transactions-card-body-mov-salidas {
    margin-bottom: 4px;
}

/* Estilos para los filtros de historial de transacciones */

.history-transactions-filters-wrapper {
    border: 1px solid rgba(221, 221, 221, 1);
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.history-transactions-filters-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    cursor: pointer;
}

.history-transactions-filters-item-detail {
    display: flex;
    flex-direction: column;
}

.history-transactions-filters-item-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(140, 140, 140, 1);
}

.history-transactions-filters-item-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--azul-experto);
    line-height: 16px;
}

.history-transactions-filters-divider {
    width: 1px;
    background-color: rgba(221, 221, 221, 1);
}

.history-transactions-filters-icon {
    content: url('/templates/default/icons/historial-transacciones/filters.svg');
}

.modal-below {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 99;
}

.modal-below-content {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 70%;
    background-color: white;
    border-radius: 10px 10px 0 0;
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.2);
    padding: 10px 0px 10px 0px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: height 0.3s ease-out;
}

.modal-below-content-header {
    display: flex;
    justify-content: space-between;
    padding: 10px 0px 10px 0px;
}

.modal-below-content-header h3 {
    color: rgba(0, 193, 212, 1);
    font-weight: 900;
    font-size: 20px;
}

.modal-below-close-icon {
    content: url('/templates/default/icons/historial-transacciones/modal-close.svg');
}

.modal-below-horizontal-divider {
    height: 1px;
    width: 100%;
    background-color: rgba(221, 221, 221, 1);
}

/**Componente elementos checkbox - historial transacciones*/
.historial-transaccion_dropdown-checkbox {
    overflow-y: auto;
    height: 18rem;
    padding-left: 0px !important;

}

.historial-transaccion_underline {
    display: block;
    width: 100%;
    border-bottom: 1px solid #DDDDDD;
    margin-top: 5px;
}

@media screen and (max-height: 512px) {
    .historial-transaccion_dropdown-checkbox {
        overflow-y: auto;
        height: 12rem
    }
}

/**Componente elementos checkbox- historial transacciones */
/* Estilos para las tabs de historial de transacciones  */

.historial-transacciones-tabs-wrapper {
    display: flex;
    padding: 3px;
    border-radius: 40px;
    background-color: rgba(235, 235, 235, 1);
    justify-content: space-around;
}

.historial-transacciones-tabs-item {
    background-color: rgba(235, 235, 235, 1);
    border-radius: 40px;
    font-size: 14px;
    padding: 7px 10px;
    color: rgba(102, 102, 102, 1);
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

.historial-transacciones-tabs-item.active {
    background-color: var(--azul-experto);
    color: white;
}

.historial-transacciones-tabs-icon-total {
    content: url('/templates/default/icons/historial-transacciones/tabs-total.svg');
}

.historial-transacciones-tabs-icon-total.active {
    content: url('/templates/default/icons/historial-transacciones/tabs-total-active.svg');
}

.historial-transacciones-tabs-icon-inflows {
    content: url('/templates/default/icons/historial-transacciones/tabs-entradas.svg');
}

.historial-transacciones-tabs-icon-inflows.active {
    content: url('/templates/default/icons/historial-transacciones/tabs-entradas-active.svg');
}

.historial-transacciones-tabs-icon-outflows {
    content: url('/templates/default/icons/historial-transacciones/tabs-salidas.svg');
}

.app-drawer_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 100;
}

.app-drawer_close_button {
    width: 12.72px;
    height: 12.73px;
    cursor: pointer;
}

.app-drawer_title {
    font-size: 20px;
    font-weight: 900;
    line-height: 24px;
    color: var(--azul-digital);
}

.app-drawer_divider {
    height: 1px;
    width: 100%;
    background-color: #DDDDDD;
}

.app-bottom-drawer {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background: var(--blanco);
    padding: 16px 24px;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    transition: .2s;
    z-index: 110;
}

.app-bottom-drawer:not(.app-bottom-drawer_open) {
    transform: translate(0, 61vh);
}

.app-drawer_subtitle {
    font-size: 15px;
    font-weight: 700;
    line-height: 18px;
    color: var(--azul-experto);
}

.historial-transacciones-tabs-icon-outflows.active {
    content: url('/templates/default/icons/historial-transacciones/tabs-salidas-active.svg');
}

/* Estilos para la tabla de historial de transacciones */

.history-transactions-table-wrapper {
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);
    /* border: 1px solid rgba(235, 235, 235, 1); */
    border-radius: 14px;
}

.history-transactions-table-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-top: 1px solid rgba(235, 235, 235, 1);
    font-size: 16px;
    color: var(--azul-experto);
}

.history-transactions-table-footer div {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.history-transactions-table-footer span:last-child {
    border-bottom: 1px solid var(--azul-experto);
}

.history-transactions-table-footer-icon {
    content: url('/templates/default/icons/historial-transacciones/impresion.svg');
}

.history-transactions-table-wrapper table {
    width: 100%;
}

.history-transactions-table-wrapper table th {
    font-size: 16px;
    font-weight: 700;
    color: var(--azul-experto);
}

.history-transactions-table-wrapper table th:last-child,
.history-transactions-table-wrapper table td:last-child {
    text-align: right;
}

.history-transactions-table-wrapper table th:first-child,
.history-transactions-table-wrapper table td:first-child {
    max-width: 100px;
}

.history-transactions-table-wrapper table thead th:nth-child(2),
.history-transactions-table-wrapper table tbody td:nth-child(2) {
    width: 50px;
    text-align: right;
}

.history-transactions-table-wrapper table td,
th {
    padding: 10px 16px;
}

.history-transactions-table-wrapper table tbody td span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-transactions-table-wrapper table tbody tr:nth-child(odd) {
    background-color: rgba(235, 235, 235, 1);
    border-width: 0px, 1px, 1px, 1px;
    border-style: solid;
    border-color: rgba(235, 235, 235, 1);
}

.history-transactions-table-wrapper table tbody td:first-child {
    color: rgba(102, 102, 102, 1);
    font-size: 14px;
    font-weight: 400;
}

.history-transactions-table-wrapper table tbody td:not(:first-child) {
    color: rgba(102, 102, 102, 1);
    font-weight: 700;
    font-size: 14px;
}

.history-transactions-table-wrapper table tbody td:last-child {
    display: flex;
    gap: 3px;
    justify-content: space-between;
}

.app-label-gris {
    color: #666666;
    font-size: 15px;
    font-weight: 400;
    line-height: 18px;
}

.app-label--azul-experto {
    color: var(--azul-experto);
    font-size: 1.3rem;
    font-weight: 100;
}

.precalif-crear-gestion-icon {
    content: url('/templates/default/icons/precalif-crear-gestion.svg');
}

.font-24 {
    font-size: 24px;
    font-weight: 700;
}

.font-experto {
    color: var(--azul-experto);
}

.gap-12 {
    gap: 12px;
}

.gap-24 {
    gap: 24px;
}

.gap-32 {
    gap: 32px;
}

.gap-48 {
    gap: 48px;
}

/* Firma digital clases */
.icon-firma-digital {
    content: url('/templates/default/icons/firma-digital/icon-firma-digital.svg');
}

.full-vhheight-topbar {
    height: calc(100vh - 65px);
}

.onboarding1 {
    content: url('/templates/default/icons/firma-digital/onboarding/onboarding1.svg');
    width: 60%;
}

.onboarding2 {
    content: url('/templates/default/icons/firma-digital/onboarding/onboarding2.svg');
    width: 60%;
}

.onboarding3 {
    content: url('/templates/default/icons/firma-digital/onboarding/onboarding3.svg');
    width: 60%;
}

@media (min-height: 560px) {

    .onboarding1,
    .onboarding2,
    .onboarding3 {
        width: 70%;
    }
}

.onboarding-steps-indicator {
    display: flex;
    gap: 8px;
}

.onboarding-steps-indicator span {
    width: 55px;
    height: 10px;
    border-radius: 32px;
    background-color: var(--gris-7);
}

.onboarding-steps-indicator span.active {
    background-color: var(--azul-digital);
}

/* Componente indicador de nivel */
.app-level-indicator__container {
    height: 24px;
    padding: 0 24px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-level-indicator__text {
    font-weight: 600;
    font-size: 14px;
}

.app-level-indicator__container_high {
    background-color: var(--error-50);
}

.app-level-indicator__container_mid {
    background-color: var(--optimista-100);
}

.app-level-indicator__container_low {
    background-color: var(--confirmacion-50);
}

.app-level-indicator__text_high {
    color: var(--rojo);
}

.app-level-indicator__text_mid {
    color: var(--optimista-800);
}

.app-level-indicator__text_low {
    color: var(--verde);
}

.w-max-content {
    width: max-content;
}

.icon-check-buro {
    content: url('/templates/default/icon/check-buro.svg');
}

.icon-x-buro {
    content: url('/templates/default/icon/x-buro.svg');
}

/* FIN Componente indicador de nivel */

.my-6 {
    margin: 6rem 0;
}

.app-card-counter {
    position: absolute;
    border-radius: 100%;
    width: 31px;
    height: 31px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--blanco);
    top: -15.5px;
    right: -15.5px;
    line-height: 14px;
}

.app-card-counter-color-1 {
    background-color: var(--azul-experto);
}

.app-card-counter-color-2 {
    background-color: var(--azul-digital);
}

.app-card-counter-color-3 {
    background-color: var(--azul-financiero);
}

.app-card-counter-color-4 {
    background-color: var(--amarillo-optimista);
}

.app-section-item {
    display: flex;
    align-items: center;
    border-right: 1px solid #DDDDDD;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.app-section-item-icon {
    width: 30px;
}

.app-section-item>span {
    font-size: 15px;
    font-weight: 600;
    color: #003865;
}

/* Afiliacion movil: Icono seccion datos personales */
.afiliacion-icono-datos-personales {
    content: url('/templates/default/icons/afiliacion-datos-personales.svg');
}

/* Afiliacion movil: Icono seccion datos comerciales */
.afiliacion-icono-datos-comerciales {
    content: url('/templates/default/icons/afiliacion-datos-comerciales.svg');
}

/* Afiliacion movil: Icono seccion datos adicionales */
.afiliacion-icono-datos-adicionales {
    content: url('/templates/default/icons/afiliacion-datos-adicionales.svg');
}

/* Afiliacion movil: Icono seccion datos comisiones */
.afiliacion-icono-datos-comisiones {
    content: url('/templates/default/icons/afiliacion-datos-comisiones.svg');
}

/* Afiliacion movil: Icono seccion datos despachos */
.afiliacion-icono-datos-despachos {
    content: url('/templates/default/icons/afiliacion-datos-despachos.svg');
}

/* Afiliacion movil: Icono seccion datos docs */
.afiliacion-icono-datos-documents {
    content: url('/templates/default/icons/afiliacion-datos-documentos.svg');
}

.afiliacion-icono-editar-campo {
    content: url('/templates/default/icons/afiliacion-icono-editar-campo.svg');
}

.afiliacion-icono-editar-campo:hover {
    content: url('/templates/default/icons/afiliacion-icono-editar-campo-amarillo.svg');
}

.afiliacion-icono-editar-campo-confirm {
    content: url('/templates/default/icons/afiliacion-icono-editar-campo-confirm.svg');
}

.afiliacion-icono-observaciones {
    content: url('/templates/default/icons/afiliacion-icono-observaciones.svg');
}

.afiliacion-movil-icon-active {
    filter: invert(59%) sepia(35%) saturate(4370%) hue-rotate(146deg) brightness(99%) contrast(101%);
}

.section-error-active {
    filter: invert(26%) sepia(90%) saturate(7463%) hue-rotate(341deg) brightness(88%) contrast(102%);
}

.section-error {
    color: #CB2533 !important;
}

.app-section-item-icon-wrapper {
    position: relative;
    top: -6px;
    right: -6px;
    margin-left: -14px;
    color: #CB2533 !important;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    pointer-events: none;
}

.section-error {
    color: #CB2533 !important;
}

.i-icon-afiliacion-tooltip {
    height: 18px;
    width: 18px;
    content: url('icons/afiliacion-tooltip.svg');
}

.linea-divisora {
    background: var(--azul-digital);
    border: 1px;
    height: 2px !important;

}

.linea-divisora-titulo {
    color: var(--azul-experto);
    font-size: 14px;
    font-weight: 700;
    padding-left: 0;
}

.my-30px {
    margin: 30px 0;
}

.mt-30px {
    margin-top: 30px;
}

.mb-30px {
    margin-bottom: 30px;
}

.gap-30px {
    gap: 30px;
}

/* progress indicator component */
.app-progress-indicator {
    width: 52px;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.app-progress-indicator_text {
    font-size: 20px;
    line-height: 20px;
    color: var(--azul-experto);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.app-progress-indicator_title {
    font-size: 16px;
    font-weight: 700;
    color: var(--azul-experto);
}

.app-border-right-0 {
    border-right: none;
}

.app-border-right-1 {
    border-right: 1px solid #DDDDDD;
}

.app-border-left-1 {
    border-left: 1px solid #DDDDDD;
}

.app-border-bottom {
    border-bottom: 1px solid #DDDDDD;
}

@media (min-width: 992px) {
    .app-border-right-lg-1 {
        border-right: 1px solid #DDDDDD;
    }

    .app-border-bottom-lg-1 {
        border-bottom: 1px solid #DDDDDD;
    }
}

@media (max-width: 1200px) {
    .app-border--sm-none {
        border: none;
    }
}

.app-afiliacion-title {
    font-size: 18px;
    font-weight: 400;
    color: var(--azul-experto);
}

.app-checkbox {
    width: 24px;
    height: 24px;
    color: var(--azul-experto);
    accent-color: var(--azul-experto);
    cursor: pointer;
}

.app-checkbox:hover {
    accent-color: var(--azul-experto);
    background-color: var(--azul-experto);
}

.app-checkbox_label {
    position: relative;
    transform: none !important;
    padding: 0 !important;
    top: -0.1rem !important;
}

.app-tooltip {
    position: relative;
    display: inline-block;
    opacity: 100;
}

.app-tooltip .app-tooltip_text {
    visibility: hidden;
    font-size: 12px;
    font-weight: 400;
    background-color: #666666;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    width: 120px;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    color: #FFFFFF;
    position: absolute;
    z-index: 1;
}

.app-tooltip:hover .app-tooltip_text {
    visibility: visible;
}

.app-input-amount {
    text-align: center !important;
    font-weight: bold;
    color: var(--azul-experto) !important;
}

.app-input-amount::placeholder {
    text-align: center;
    font-weight: bold;
    color: var(--azul-experto) !important;
}

.app-radio-no-backgroud:checked+label {
    background-color: #F7F7F7 !important;
}

/* Afiliacion movil float menu styles */

.overlay-afiliacion-float-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: none;
    z-index: 500;
}

.afiliacion-float-menu {
    position: relative;
    bottom: 50px;
    width: 171px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    z-index: 1100;
}

.afiliacion-float-menu-wrapper {
    max-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: max-height 0.3s ease-in-out;
    margin-bottom: 8px;
}

.afiliacion-float-menu-item {
    display: flex;
    justify-content: space-between;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    cursor: pointer;
}

.afiliacion-float-menu-wrapper.open .afiliacion-float-menu-item {
    visibility: visible;
    opacity: 1;
}

.afiliacion-float-menu-item-icon {
    position: absolute;
    width: 50px;
    height: 50px;
    background: var(--azul-digital);
    border-radius: 100%;
    right: 0;
    transition: all 0.3s ease;
    content: url('/templates/default/icons/afiliacion/arrow-right-default.svg');
}

.afiliacion-float-menu-item-label {
    display: flex;
    align-items: center;
    color: var(--azul-experto);
    width: 171px;
    height: 50px;
    background: white;
    border-radius: 30px;
    padding-left: 16px;
    font-size: 20px;
}

.afiliacion-float-menu-toggle {
    position: absolute;
    bottom: -70px;
    width: 48px;
    height: 48px;
    background: var(--amarillo-optimista);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    cursor: pointer;
    z-index: 50;
    transition: all 0.3s ease;
}

@media (min-width: 768px) {
    .afiliacion-float-menu {
        bottom: 110px;
        right: -240px;
    }
}

@media (max-width: 768px) {
    .afiliacion-float-menu {
        bottom: 0px;
        right: -80px;
    }
}

.afiliacion-float-menu-toggle-open {
    transition: all 0.3s ease;
    content: url('/templates/default/icons/afiliacion/icono-actions-menu-open.svg');
}

.afiliacion-float-menu-toggle-close {
    transition: all 0.3s ease;
    content: url('/templates/default/icons/afiliacion/icono-actions-menu-close.svg');
}

.app-section-item.active .app-section-item-bar {
    background: #00C1D4;
    border-radius: 10px;
    width: 100%;
    height: 5px;
    position: absolute;
    bottom: -15px;
    left: 0;
    z-index: 2;
}

.app-section-item-bar-inactive {
    background: #ddd;
    border-radius: 10px;
    width: 100%;
    height: 5px;
    position: absolute;
    bottom: -15px;
    left: 0;
    z-index: 1;
}

.app-section-item span {
    color: var(--gris-6);
}

.app-section-item.active span {
    color: var(--azul-experto);
}

.button-action-right #app-button-action {
    float: right;
}

.icon-afiliacion-movil-dashboard {
    content: url('/templates/default/images/afiliacion-movil.svg');
}

.app-top-50vh {
    top: 50vh;
}

.app-footer-absolute {
    position: absolute;
    bottom: 0;
    left: 0;
}

@media screen and (max-height: 600px) {
    .app-footer-absolute {
        position: static;
    }
}

/**CARD-COMPONENT-PAGOS-GL**/
.card-component {
    border: 1px solid #DDDDDD;
    border-radius: 10px !important;
    box-shadow: 0px 4px 4px 0px #00000026;
    height: 150px;
    width: 100%;
    cursor: pointer !important;
}

/* Ajustar posición del checkbox para que sea visible */
.card-checkbox-component {
    border: 1px solid var(--azul-experto) !important;
    background-color: #fff;
    width: 24px;
    height: 24px;
    margin-top: 5px;
    cursor: pointer !important;
}

.card-header-component {
    background-color: rgba(0, 0, 0, 0);
    ;
    border-bottom: none;
    margin-top: 5px;
}

.card-header-title-component p {
    margin-bottom: -1px;
    /* Reduce el margen superior e inferior */
    padding: 0;
    /* Elimina cualquier relleno */
    font-size: 14px;
    color: var(--azul-experto);
    font-weight: 700;
}

.card-body-component {
    margin-top: -20px;
    /*overflow-y: auto;*/
}

.card-body-component p {
    margin-bottom: -1px;
}

.table-layout-component {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 5px;
    font-size: 14px;
    color: #666666;
    font-weight: 400;
}

.table-layout-component td {
    vertical-align: middle;
}

.table-layout-component tr {
    line-height: 1;
}

.title-column-component {
    text-align: left;
    width: 70%;
}

.signo-column-component {
    text-align: center;
    width: 10%;
    color: var(--azul-experto);
}

.value-column-component {
    text-align: right;
    width: 20%;
}

.total-style-component {
    font-weight: 700;
    color: var(--azul-experto);
}

.card-checkbox-component:checked {
    background-color: #64168c !important;
    /* Azul cuando está marcado */
    border-color: #007bff;
}

.fixed-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid #CCC;
    padding: 16px 27px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background-color: #FFF;
}

.counter-total-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.counter-label {
    font-size: 16px;
    font-weight: 500;
    color: var(--azul-digital)
}

.total-label {
    font-size: 24px;
    font-weight: 500;
    color: var(--azul-experto)
}

.preview-title {
    font-size: 24px;
    font-weight: 500;
    line-height: 19.2px;
    color: var(--azul-digital);
    margin: 0;
}

.preview-text-content {
    font-size: 28px;
    font-weight: 500;
    line-height: 28.8px;
    color: var(--azul-experto);
}

.card-componente-subtitle {
    font-size: 16px;
    color: var(--azul-experto);
}

/* === Card Radio Button Styles === */
.radio-component-data {
    margin-top: 20px;
    margin-bottom: 10px;
    margin-left: 20px;

}

.radio-component-data {
    margin-top: 0px !important;
    margin-bottom: 10px !important;
    margin-left: 20px;
    width: 300px;
    font-size: 18px;
    font-weight: 500;
    height: 150px !important;
}

.radio-component-data {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0px;
}

.radio-component-data * {
    flex: 1;
    display: flex;
    align-items: center;
    margin: 0;
    color: var(--gris-3);
    min-height: 22px;
    font-weight: bold;
    cursor: pointer;
}

.radio-component-item {
    position: relative;
    background-color: var(--blanco);
}

.radio-component-item input[type=radio] {
    position: absolute;
    display: none;
    opacity: 0;
    top: 5px;
    right: 0;
    margin: 0;
    transform: translate(-50%, 50%);
    z-index: 1;
}

.radio-component-item input[type=radio]+.radio-component-item-label:before {
    content: "";
    background: var(--blanco);
    border-radius: 100%;
    border: 1px solid #b4b4b4;
    display: inline-block;
    height: 24px;
    width: 24px;
    position: absolute;
    margin-left: 5%;
    margin-top: 30px;
    cursor: pointer;
    text-align: center;
    transition: all 250ms ease;
    border: 2px dashed red;

}

.radio-component-item-label {
    display: block;
    line-height: 1.2;
    font-size: 14px;
    font-weight: 400;
    color: var(--azul-experto);
    height: 100%;
    padding-top: 0px;
    -webkit-box-shadow: 0px 3px 6px 0px rgba(217, 216, 214, 1);
    -moz-box-shadow: 0px 3px 6px 0px rgba(217, 216, 214, 1);
    box-shadow: 0px 3px 6px 0px rgba(217, 216, 214, 1);
    border-radius: 10px;
}

.radio-component-item-label>small {
    margin-left: 3rem;
    font-size: 14px;
    font-weight: 400;
    padding-top: 0px;
}

.radio-component-item-label>.label-precio {
    font-size: 14px;
    font-weight: 700;
    margin-top: 10px;
    padding-bottom: 0px !important;
}

.radio-component-item>input[type="radio"]:checked+label {
    background-color: #C8DEEF !important;
}

.radio-component-item input[type=radio]:checked+.radio-component-item-label:before {
    background-color: var(--azul-experto);
    border: 1px solid var(--azul-experto);
    box-shadow: inset 0 0 0 4px var(--blanco);
    margin-top: 4rem;
}

.radio-component-item input[type=radio]:not(:checked)+.radio-component-item-label:before {
    border: 1px solid var(--azul-experto);
    box-shadow: inset 0 0 0 4px var(--blanco);
    margin-top: 4rem;
}

.radio-component-item input[type=radio]:focus+.radio-component-item-label:before {
    outline: none;
    border-color: var(--azul-experto);
}

.radio-component-item input[type="radio"]:checked+label {
    color: var(--azul-experto) !important;
    background-color: var(--blanco);
}

.radio-component-item input[type="radio"]:checked+label>small {
    color: var(--azul-experto) !important;
}

.radio-component-item-label {
    background-color: var(--blanco);
}

.label-precio-custom-mb {
    margin-bottom: -0.7rem !important;
}

.monto-grid-container {
    display: grid;
    grid-template-columns: 1fr 0.1fr 1fr;
    /* Tres columnas: label, símbolo Q y valor */
    gap: 0px;
    margin-left: 3rem;
    margin-top: 11px;
    font-size: 14px;
    color: #666666;
    font-weight: 400;
    line-height: 0;
    border-collapse: collapse;
    /* Colapsar bordes entre celdas */

}

.monto-grid-item {
    display: contents;
    /* Asegura que cada columna se muestre correctamente dentro del grid */
}

.monto-label,
.monto-symbol,
.monto-value {
    padding: 0px;
    text-align: center;
}

.monto-grid-container> :last-child {
    text-align: right !important;
}

.monto-value-label {
    font-size: 14px;
    color: #666666;
    font-weight: 400;
}

.monto-value {
    justify-content: right;
    /* Alinear solo la última columna a la derecha */
    padding-right: 50px;
}

.monto-value-sign {
    justify-content: center;
}

.total-style-component {
    font-weight: 700;
    color: var(--azul-experto);
}

.monto-value-label-selected {
    color: var(--azul-experto) !important;
}

/* === Card Radio Button Styles === */
.input-radio-button {
    position: absolute;
    display: none;
    opacity: 0;
}

.input-radio-button+.input-radio-button-label:before {
    content: "";
    background: var(--blanco);
    border-radius: 100%;
    border: 1px solid #b4b4b4;
    display: inline-block;
    width: 24px;
    height: 24px;
    position: relative;
    vertical-align: top;
    cursor: pointer;
    text-align: center;
    transition: all 250ms ease;
}

.input-radio-button-label,
.radio-card-button span {
    z-index: 10;
}

.input-radio-button:checked+.input-radio-button-label:before {
    background-color: var(--azul-experto);
    box-shadow: inset 0 0 0 4px var(--blanco);
}

.input-radio-button:focus+.input-radio-button-label:before {
    outline: none;
    border-color: var(--azul-experto);
}

.input-radio-button:active+.input-radio-button-label:before {
    box-shadow: inset 0 0 0 4px #f4f4f4;
    border-color: var(--gris-1);
    background: var(--gris-1);
}

.radio-card-button {
    display: flex;
    width: 100%;
    gap: 17px;
    border-radius: 10px;
    padding: 0;
    cursor: pointer;
    border: 1px solid #D9D8D6;
    padding: 35px 18px;
    box-shadow: 0px 3px 4px 0px #D9D8D680;
    align-items: center;
    color: var(--azul-experto);
    font-weight: bold;
    margin-bottom: 10px;
    position: relative;
}

.radio-button-checked-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    border-radius: 10px;
}

.radio-card-button .input-radio-button:checked~.radio-button-checked-bg {
    background-color: #C8DEEF !important;
}

.main-text {
    color: var(--azul-experto);
}

.label-divider {
    color: var(--azul-experto);
    border-bottom: 1px solid #DDDDDD;
    font-weight: bold;
}

.divider-top-movil {
    @media (max-width: 768px) {
        width: 100%;
        height: 1px;
        background-color: #DDDDDD;
        margin-bottom: 1.5rem;
    }
}

.info-badge {
    width: 100%;
    position: relative;
    background-color: #00C1D41A;
    border-radius: 16px;
    padding: 16px 16px;
}

.info-badge__icon {
    width: 32px;
    height: 32px;
    position: absolute;
    top: -16px;
    left: calc(50% - 16px);
}

.info-badge__text {
    text-wrap: pretty;
    color: var(--azul-experto);
    margin: 0;
    text-align: center;
    font-weight: 500;
    padding-left: 10px;
    padding-right: 10px;
}

.info-badge__text--highlighted {
    font-weight: 700;
}

.radio-rounded-label-button {
    background-color: var(--gris-1);
    border-radius: 25px;
    padding: 8px 22px;
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 8px;
    position: relative;
}

.radio-rounded-label-button--full-size {
    padding: 13px 22px;
    width: 100%;
}


.radio-rounded-label-button-text {
    color: var(--azul-experto);
    font-weight: 700;
    font-size: 16px;
    z-index: 10;
}

.radio-rounded-label-button .input-radio-button:checked~.radio-button-checked-bg {
    background-color: var(--azul-seleccionado) !important;
    border-radius: 25px;
}


@media (min-width: 768px) {
    .radio-rounded-label-button--full-size {
        padding: 11.25px 22px;
        width: 470px;
        border-radius: 40px;
        gap: 16px;
    }

    .radio-rounded-label-button--full-size>.radio-button-checked-bg {
        border-radius: 40px !important;
    }

    .radio-rounded-label-button--full-size>.radio-rounded-label-button-text {
        font-size: 25px;
        font-weight: 700;
    }

}

@media (min-width: 992px) {
    .max-width-350px-xl {
        max-width: 350px;
    }
}

.help-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--azul-experto);
    text-align: center;
}

@media (min-width: 768px) {
    .help-title {
        font-size: 25px;
        font-weight: 400;
    }

    .help-title--sm {
        font-size: 20px;
        font-weight: 400;
    }
}

.tabs {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.tab-buttons {
    background-color: var(--gris-1);
    border-radius: 25px;
    padding: 3px;
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
}

.tab-button {
    padding: 12px 27px;
    cursor: pointer;
    font-size: 14px;
    text-align: center;
    color: var(--gris-6);
    min-width: max-content;
    flex: 1 1 0;
}

.tab-button.active {
    background-color: var(--azul-experto);
    border-radius: 25px;
    color: var(--blanco);
}

.tab-content {
    display: none;
    width: 100%;
}

.tab-content.active {
    display: block;
}

@media (max-width: 768px) {
    .tab-buttons {
        width: 100%;
    }

    .tab-button {
        padding: 12px 15px;
        min-width: max-content;
        flex: 1;
        white-space: nowrap ;
    }
}

.radio-card-lg-button {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 16px;
    position: relative;
    box-shadow: 0px 3px 6px 0px #D9D8D6;
    border-radius: 10px;
    height: 115px;
    cursor: pointer;
    padding-right: 8px;
}

.radio-card-lg-button-title {
    font-size: 16px;
    color: var(--azul-experto);
    font-weight: 700;
    z-index: 10;
}

@media (min-width: 1000px) {
    .radio-card-lg-button .input-radio-button-label {
        position: absolute;
        right: 16px;
        top: 16px;
    }

    .radio-card-lg-button-title {
        font-size: 20px;
    }

    .radio-card-lg-button {
        height: 140px;
        align-items: start;
    }
}

.radio-card-lg-button-subtitle {
    font-size: 14px;
    color: var(--gris-6);
    font-weight: 400;
    z-index: 10;
    margin: 0;
    word-break: break-word;
}

.radio-card-lg-button-vigencia {
    font-size: 14px;
    color: var(--azul-financiero);
    font-weight: 700;
    z-index: 10;
}

@media (max-width: 768px) {
    .radio-card-lg-button-title {
        font-size: 16px;
    }
}

.radio-card-lg-button .input-radio-button:checked~.radio-button-checked-bg {
    background-color: var(--azul-seleccionado) !important;
    border-radius: 10px;
}

.stepper-text {
    font-size: 16px;
    color: var(--azul-experto);
    font-weight: 700;
}

@media (min-width: 768px) {
    .stepper-text {
        font-size: 20px;
        color: var(--azul-experto);
        font-weight: 700;
    }
}

.info-banner {
    background-color: var(--azul-experto);
    border-bottom-right-radius: 16px;
    border-top-left-radius: 16px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--blanco);
    gap: 8px;
}

.info-banner__img {
    height: 64px;
}

@media (min-width: 768px) {
    .info-banner {
        font-size: 16px;
        color: var(--blanco);
    }
}

.my-16 {
    margin: 16px 0;
}

.py-16 {
    padding: 16px 0;
}

.list-style-none {
    list-style: none;
}

.fs-16 {
    font-size: 16px;
}

.fs-18 {
    font-size: 18px;
}

.account-label {
    color: var(--gris-3);
}

.account-label div {
    font-size: 18px;
}

.account-label span {
    font-size: 16px;
}

.input-radio-button:checked~label.account-label div {
    color: var(--azul-experto);
    font-weight: 700;
}

.input-radio-button:checked~label.account-label span {
    color: var(--azul-digital);
    font-weight: 700;
}

.gap-16 {
    gap: 16px;
}

@media (min-width: 768px) {
    .w-lg-100 {
        width: 100%;
    }
}

.tooltip-inner {
    background-color: var(--gris-4);
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    border-top-color: var(--gris-4);
}

@media (max-width: 768px) {
    .divider-movil {
        border-bottom: 1px solid #DDDDDD;
    }
}

.section-aproved {
    color: var(--verde) !important;
}

.afiliacion-movil-icon-validate-active {
    filter: none !important;
    filter: invert(62%) sepia(86%) saturate(545%) hue-rotate(92deg) brightness(92%) contrast(101%) !important;
}

@media (max-width: 768px) {
    .afiliacion-float-menu-toggle {
        position: relative;
        bottom: 0;
        right: 0;
    }
}

@media (max-width: 768px) {
    .mt-4-movil {
        margin-top: 20px;
    }
}

@media (min-width: 768px) {
    .ms-2-desktop {
        margin-left: 20px;
    }
}

.app-putton-descargar-todo {
    font-size: 17px !important;
    margin-left: auto;
}

.app-button-validar-caso {
    font-size: 17px !important;
    margin-left: auto;
}

.div-control-alertas-inputs {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    gap: 16px;
}

.div-control-alertas-inputs .err-input {
    width: auto;
}

.contador-textArea {
    font-size: 15px;
    color: rgb(0, 56, 101);
}

.i-icon-download {
    content: url('icons/icon-descargar.svg');
}

.i-icon-pencil {
    content: url('icons/icon-lapiz.svg');
}

.icon-bg {
    padding: 8px;
    background-color: #F2F5F7;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-bg-icon {
    width: 24px;
}

.i-icon-image {
    content: url('icons/icon-foto.svg');
}

.i-icon-pdf {
    content: url('icons/icon-archivo.svg');
}

.i-icon-eye {
    content: url('icons/icon-ojo.svg');
}

.detalle-text-informative {
    font-size: 20px;
    font-weight: 700;
    color: var(--azul-experto);
}

.border-separator-bottom {
    border-bottom: 1px solid #DDDDDDed;
    padding: 2px;
}

.card_component___wrapper {
    width: 316px;
    border-style: solid;
    border-color: #D3D5D5;
    border-width: 1px 1px 0px 1px;
    border-radius: 8px;
    background-color: #ffffff;
    height: 304px;
    box-shadow: 0px 3px 5px 0px #00000026;
}

.card_component___body {
    padding: 24px;
    overflow: overlay;
}

.card_component___text {
    font-size: 14px;
    color: var(--azul-experto);
    font-weight: 800;
    margin-bottom: 8px;
    line-height: 2;
}

.card_component___value {
    font-weight: 400;
    color: var(--azul-experto);
}

.card_component___footer {
    width: 100%;
    height: 56px;
    border-top: 1px solid #D3D5D5;
    border-bottom: 1px solid #D3D5D5;
    background-color: #fff;
    padding: 0;
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    gap: 6px;
    cursor: pointer;

}

.card_component___icon {
    color: var(--bs-primary);
    font-size: 16px;
}

.card_component___footer_text {
    color: var(--azul-experto);
    font-weight: 400;
    font-size: 14px;
    user-select: none;
}

.card_component___body {
    scrollbar-width: thin;
    scrollbar-color: #999 #eee;
}

.card_component___body::-webkit-scrollbar {
    width: 6px;
}

.card_component___body::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 6px;
}

.i-icon-visualiza-eye {
    content: url('icons/icon-eye-visualiza.svg');
}

.modal_custom_text_title {
    color: #666666 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-bottom: -1.5rem !important;

}

.modal_custom_text_descript {
    color: var(--azul-experto) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

@media (min-width: 992px) {
    .flex-lg-1 {
        flex: 1 !important;
    }
}

.afiliacion__casos_proceso_container {
    padding: 1rem !important;
}


.afiliacion__casos_proceso_container_custom {
    display: block;
    width: 95%;
    margin: 0 auto;
    margin-bottom: 1rem;
    margin-top: 1rem;

}

.text--16 {
    font-size: 16px;
}

.spanRiesgo {
    color: var(--azul-experto);
    font-family: Lato;
    font-size: 16px;
    font-weight: 900;
    line-height: 19.2px;
    text-align: left;
}

.nivel-riesgo {
    border-top: 1px solid #EBEBEB;
    border-bottom: 1px solid #EBEBEB;
    padding: 16px 0;
    color: var(--azul-experto);
    font-weight: 900;
    margin: 16px 0;
    display: flex;
    justify-content: space-between;
}

.help-text {
    font-family: Lato;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: var(--azul-experto);
    margin: 0;
}