:root {
    --ion-color-primary: #8dc63f;
    --ion-color-primary-rgb: 56, 128, 255;
    --ion-color-primary-contrast: #fff;
    --ion-color-primary-contrast-rgb: 255, 255, 255;
    --ion-color-primary-shade: #3171e0;
    --ion-color-primary-tint: #4c8dff;
    --ion-color-secondary: #3dc2ff;
    --ion-color-secondary-rgb: 61, 194, 255;
    --ion-color-secondary-contrast: #fff;
    --ion-color-secondary-contrast-rgb: 255, 255, 255;
    --ion-color-secondary-shade: #36abe0;
    --ion-color-secondary-tint: #50c8ff;
    --ion-color-tertiary: #5260ff;
    --ion-color-tertiary-rgb: 82, 96, 255;
    --ion-color-tertiary-contrast: #fff;
    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
    --ion-color-tertiary-shade: #4854e0;
    --ion-color-tertiary-tint: #6370ff;
    --ion-color-success: #2dd36f;
    --ion-color-success-rgb: 45, 211, 111;
    --ion-color-success-contrast: #fff;
    --ion-color-success-contrast-rgb: 255, 255, 255;
    --ion-color-success-shade: #28ba62;
    --ion-color-success-tint: #42d77d;
    --ion-color-warning: #ffc409;
    --ion-color-warning-rgb: 255, 196, 9;
    --ion-color-warning-contrast: #000;
    --ion-color-warning-contrast-rgb: 0, 0, 0;
    --ion-color-warning-shade: #e0ac08;
    --ion-color-warning-tint: #ffca22;
    --ion-color-danger: #eb445a;
    --ion-color-danger-rgb: 235, 68, 90;
    --ion-color-danger-contrast: #fff;
    --ion-color-danger-contrast-rgb: 255, 255, 255;
    --ion-color-danger-shade: #cf3c4f;
    --ion-color-danger-tint: #ed576b;
    --ion-color-medium: #92949c;
    --ion-color-medium-rgb: 146, 148, 156;
    --ion-color-medium-contrast: #fff;
    --ion-color-medium-contrast-rgb: 255, 255, 255;
    --ion-color-medium-shade: #808289;
    --ion-color-medium-tint: #9d9fa6;
    --ion-color-light: #f4f5f8;
    --ion-color-light-rgb: 244, 245, 248;
    --ion-color-light-contrast: #000;
    --ion-color-light-contrast-rgb: 0, 0, 0;
    --ion-color-light-shade: #d7d8da;
    --ion-color-light-tint: #f5f6f9;
    --ion-font-family: Ubuntu-Light;
    --tufi-font-family: Ubuntu-Light;
    --tufi-font-family-Regular: Ubuntu-Regular;
    --tufi-font-family-Medium: Ubuntu-Medium;
    --tufi-font-family-bolt: Ubuntu-Bold;
    --tufi-font-character-spacing-0-33: 0.33px;
    --tufi-font-text-transform-uppercase: uppercase
}

.XCenter {
    display: flex
}

.btn-tufi,
.btn-tufi-green {
    --background: #8dc63f 0% 0% no-repeat padding-box;
    width: 135px;
    height: 39px;
    --box-shadow: none !important;
    --border-radius: 10px 10px !important
}

.btn-tufi-green {
    font: 12px/14px var(--tufi-font-family)
}

.padding-top-10 {
    padding-top: 10px !important
}

.padding-top-20 {
    padding-top: 20px !important
}

.padding-bottom-20 {
    padding-bottom: 20px !important
}

.text-small-tufi {
    border-width: 0;
    text-align: justify !important;
    font: regular 8px/12px var(--tufi-font-family) !important;
    letter-spacing: 0 !important;
    color: #606060 !important;
    opacity: 1 !important;
    line-height: normal
}

.text-large-tufi {
    color: #8ec63f !important;
    font: 700 16px/20px var(--tufi-font-family);
    letter-spacing: 0;
    opacity: 1;
    border-width: 0
}

.text-color-white {
    color: #fff !important
}

.text-align-center {
    text-align: center !important
}

.Toastify__toast--default {
    background: #fff;
    color: #aaa
}

.Toastify__toast--info {
    background: #3498db
}

.Toastify__toast--success {
    background: #8dc63f !important
}

.Toastify__toast--warning {
    background: #f1c40f
}

.Toastify__toast--error {
    background: #f7941d !important
}

.Toastify__toast-container--top-center {
    top: 0 !important;
    left: 0 !important;
    margin-left: 0 !important
}

.Toastify__toast,
.Toastify__toast-container {
    padding: 0 !important;
    box-sizing: border-box;
    color: #fff
}

.Toastify__toast {
    z-index: 9999;
    -webkit-transform: translateZ(9999px);
    position: fixed;
    width: 100vw !important;
    top: 0 !important;
    left: 0 !important;
    margin-left: 0 !important
}

.Toastify__toast--error {
    transform: none !important;
    padding: 12px !important
}

.cuentaNum-transfers,
.rucUserCuenta-transfers,
.valRucCuenta-transfers {
    letter-spacing: 0;
    opacity: 1
}

.padding-bottom-10 {
    padding-bottom: 12px !important
}

.XYCenter {
    display: flex;
    justify-content: center
}

.centerVertical,
.XYCenter {
    align-items: center
}

.Toastify__toast--warning {
    padding: 12px !important;
    transform: none !important
}

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

::-webkit-scrollbar {
    width: 12px;
    background-color: #f5f5f5
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #8dc63f
}

.css-1rv44po-control {
    border-radius: 10px !important
}

.colorBlancoTufi {
    color: #fff !important
}

.colorVerdeTufi {
    color: #8dc63f !important
}

.colorNaranjaTufi {
    color: #f7941e !important
}

.colorGrisTufi {
    color: #707070 !important
}

.XFlexEnd {
    display: flex;
    justify-content: flex-end
}

.XFlexStart {
    display: flex;
    justify-content: flex-start
}

.YFlexEnd {
    display: flex;
    align-items: flex-end
}

.XCenter {
    display: flex !important
}

.XCenter,
.XToCenter {
    justify-content: center
}

.XToCenter {
    display: flex;
    align-items: center
}

.XRight {
    display: flex;
    justify-content: right
}

.XLeft {
    display: flex;
    justify-content: left
}

.YCenter {
    display: flex;
    align-items: center
}

@font-face {
    font-family: "Ubuntu-Light";
    src: local("Ubuntu-Light"), url(../fonts/xUtj6595UW5H.ttf) format("truetype")
}

@font-face {
    font-family: "Ubuntu-Regular";
    src: local("Ubuntu-Regular"), url(/tufi-web/static/media/Ubuntu-Regular.768d480f.ttf) format("truetype")
}

@font-face {
    font-family: "Ubuntu-Medium";
    src: local("Ubuntu-Medium"), url(../fonts/jZ1M0Tcya8GP.ttf) format("truetype")
}

@font-face {
    font-family: "Ubuntu-Bold";
    src: local("Ubuntu-Bold"), url(/tufi-web/static/media/Ubuntu-Bold.4edf04ac.ttf) format("truetype")
}

body {
    font-family: var(--tufi-font-family) !important;
    font-size: 16px;
    background: #fff !important
}

.carousel .control-dots .dot,
.carousel .control-dots .dot .selected {
    transition: opacity .25s ease-in !important;
    filter: alpha(opacity=30) !important;
    background: #8dc63f !important;
    border-radius: 50% !important;
    width: 8px !important;
    height: 8px !important;
    cursor: pointer !important;
    display: inline-block !important;
    margin: 0 8px !important;
    box-shadow: none !important
}

@media screen and (max-width:768px) {
    .webGlobal {
        display: none !important
    }

    .mobileGlobal {
        display: block
    }

    .react-tabs__tab,
    .react-tabs__tab--selected {
        width: 50% !important
    }

    .anchoTotalMobile-Transfers,
    .modalExternalTransfers-Step1 {
        width: 100% !important
    }

    .codigoMobileFont-transfers {
        font-size: 12px !important
    }

    .react-pdf__Page {
        margin-top: 10px !important;
        width: 600px !important
    }

    .ult-acceso {
        text-align: left !important;
        font-size: .8125em !important
    }

    .padding-cardContainer {
        padding: 2.391629297458894vh 4.487654vw 0 !important
    }
}

@media screen and (max-width:995px) {
    .webGlobalAviso {
        display: none !important
    }
}

@media screen and (min-width:996px) {
    .webGlobalAviso {
        display: block
    }
}

@media screen and (min-width:769px) {
    .webGlobal {
        display: block
    }

    .mobileGlobal {
        display: none !important
    }

    .card-card {
        border-radius: 10px !important
    }
}

@media screen and (min-width:768px) {
    body {
        font-size: 15px !important
    }
}

@media screen and (min-width:992px) {
    body {
        font-size: 16px !important
    }
}

@media screen and (min-width:1200px) {
    body {
        font-size: 17px !important
    }
}

.BottomStandard {
    margin-bottom: 10px !important
}

.marginLRCol {
    margin: 0 10px
}

.block-ui {
    min-height: 100% !important
}

.button-solid {
    --background-activated: none !important;
    --background-focused: none !important;
    --background-hover: none !important
}

.button-clear {
    --color: none !important
}

.buscadorServicio-Step1PagoServicio {
    color: #000 !important
}

.modalCamera {
    width: 100%
}

.modalCamera,
.modalCameraWeb {
    position: absolute !important;
    background: #000;
    overflow: auto;
    border-radius: 10px;
    outline: none;
    overflow: hidden
}

.modalCameraWeb {
    width: 450px;
    min-height: 450px
}

.react-datepicker-popper {
    z-index: 90 !important
}

input[type=number] {
    -moz-appearance: textfield !important
}

.headerTitle-HomePhone {
    height: 34px;
    background: #fff 0 0 no-repeat padding-box;
    padding: 0 7.5px
}

.rowHeaderTitle-HomePhone {
    height: 100%
}

.gridHeader-HomePhone {
    padding: 10px 7px 0;
    background: #8dc63f 0 0 no-repeat padding-box
}

.headerFondo-HomePhone {
    background: #8dc63f 0 0 no-repeat padding-box;
    padding: 0 8px !important
}

.fotocontainer-HomePhone {
    display: flex;
    justify-content: center;
    width: 71px;
    height: 71px;
    opacity: 1;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%
}

.card-nuevo-cardcontainerPhone {
    background: #fbb034 0 0 no-repeat padding-box;
    width: 100%;
    height: 100%;
    float: left;
    margin: 0;
    cursor: pointer;
    border-radius: 10px
}

.mas-cardcontainerPhone {
    color: #fff;
    font-size: 20px
}

.row1-cardcontainerPhone {
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 5px
}

.row2-cardcontainerPhone {
    height: 35%;
    display: flex;
    justify-content: center;
    align-items: flex-start
}

.solicitar-cardcontainerPhone {
    color: #fff;
    font-size: 15px;
    margin-top: 0
}

.padding-cardcontainerPhone {
    padding: 25px 10px 10px
}

.ColCard-cardcontainerPhone {
    width: 26.234567901234566vw !important;
    margin-bottom: 10px
}

.vacioProducto-cardcontainerPhone {
    font: 10px/14px var(--tufi-font-family)
}

.carousel .control-dots {
    position: absolute;
    bottom: 0;
    margin: 16px 0 !important;
    text-align: center;
    width: 100%;
    height: 10px !important;
    padding: 0 !important
}

.cardPhone {
    background: #ededed 0 0 no-repeat padding-box;
    width: 100%;
    float: left;
    padding: 9px;
    border-radius: 10px
}

.row1-cardPhone,
.row3-cardPhone {
    font: 12px var(--tufi-font-family);
    letter-spacing: 0;
    color: #606060;
    opacity: 1
}

.row3-cardPhone {
    margin-top: .672645739910314vh
}

.lef-cardPhone {
    text-align: left;
    margin: 0;
    padding: 0
}

.center-cardPhone {
    text-align: center;
    margin: 0;
    padding: 0
}

.right-cardPhone {
    text-align: right;
    margin: 0;
    padding: 0
}

.row2-cardPhone {
    font: 16px var(--tufi-font-family);
    letter-spacing: 0;
    color: #000;
    opacity: 1;
    margin-top: .672645739910314vh
}

.gs-cardPhone {
    font: 12px var(--tufi-font-family);
    letter-spacing: 0;
    color: #606060;
    opacity: 1;
    display: inline;
    margin-right: 20px
}

.numero-cardPhone {
    color: #000
}

.verdetalle-cardPhone {
    font: 14px var(--tufi-font-family);
    letter-spacing: 0;
    color: #a0cf67;
    opacity: 1
}

.titulo-cardPhone {
    font: 10px/14px var(--tufi-font-family)
}

.titulo-cardPhone,
.valor-cardPhone {
    display: inline;
    letter-spacing: 0;
    color: #000
}

.valor-cardPhone {
    font: 12px var(--tufi-font-family)
}

.buttons-cardPhone {
    display: flex;
    justify-content: flex-end
}

.selecttufi {
    z-index: 5
}

.selecttufiCapa {
    z-index: 6
}

.select__control.css-yk16xz-control {
    background: #ededed 0 0 no-repeat padding-box !important;
    opacity: 1;
    border-radius: 0;
    border: none
}

.divline-selecttufi {
    background: #8dc63f;
    height: 2px;
    width: 100%
}

.divContainer-selecttufi {
    -webkit-padding-end: 16px;
    padding-inline-end: 16px;
    -webkit-padding-start: 16px;
    padding-inline-start: 16px
}

.card-card {
    border-radius: 10px;
    overflow: hidden
}

.card-card,
.card-normal {
    background: #ededed 0 0 no-repeat padding-box;
    width: 100%;
    float: left;
    margin: 0
}

.card-normal {
    height: 100%
}

.card-approved-loan {
    background: #8dc63f 0 0 no-repeat padding-box;
    color: #fff;
    width: 100%;
    height: 100%;
    float: left;
    margin: 0
}

.row1-card {
    font-size: .8125em;
    font-weight: bolder
}

.row1-card,
.row3-card {
    font-family: var(--tufi-font-family);
    color: #707070
}

.row3-card {
    font-size: .8125rem;
    margin-top: .672645739910314vh
}

.lef-card {
    text-align: left;
    margin: 0;
    padding: 0
}

.center-card {
    text-align: center;
    margin: 0;
    padding: 0
}

.right-card {
    text-align: right;
    margin: 0;
    padding: 0
}

.row2-card {
    font-size: 1.13em;
    font-family: var(--tufi-font-family);
    color: #707070;
    font-weight: bolder
}

.gs-card {
    font: .8125em;
    font-family: var(--tufi-font-family);
    letter-spacing: 0;
    color: #707070;
    opacity: 1;
    display: inline;
    margin-right: 20px
}

.numero-card {
    color: #000
}

.verdetalle-card {
    font-size: 1.2963em;
    font-family: var(--tufi-font-family);
    color: #fff
}

.titulo-card {
    font: 10px/14px var(--tufi-font-family)
}

.titulo-card,
.valor-card {
    display: inline;
    letter-spacing: 0;
    color: #000
}

.valor-card {
    font: .8125em;
    font-family: var(--tufi-font-family)
}

button {
    background: none
}

.fila2Label-card {
    font-size: .725em;
    color: #707070
}

.btn-ver-detalle,
.fila2Label-card {
    font-family: var(--tufi-font-family);
    font-weight: bolder
}

.btn-ver-detalle {
    width: 100%;
    background: #a0cf67;
    font-size: 14px;
    color: #fff;
    height: auto;
    padding: 5px;
    letter-spacing: 0
}

.btn-notification-main {
    font-weight: 600
}

.btn-notification {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    color: #606060;
    background-color: #fff;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700
}

.btn-sub-notification {
    margin-left: -1px
}

.loan {
    background: rgba(160, 207, 103, .7) 0 0 no-repeat padding-box;
    width: 100%;
    height: 100%;
    float: left;
    border-radius: 10px;
    overflow: hidden
}

.row1-loan {
    font-size: 1.1111em;
    font-family: var(--tufi-font-family);
    color: #fff
}

.row2-loan {
    font: 1.4815em;
    font-family: var(--tufi-font-family);
    color: #fff
}

.row3-loan {
    font-size: 1.1111em;
    font-family: var(--tufi-font-family);
    color: #fff;
    margin-top: .672645739910314vh
}

.gs-loan {
    font-size: .725em !important;
    font: normal normal 700 var(--tufi-font-family) !important;
    color: #fff;
    font-weight: bolder;
    letter-spacing: .33px !important
}

.numero-loan {
    margin-top: .4484304932735426vh;
    margin-bottom: 0;
    color: #fff
}

.button-loan {
    font-size: 14px;
    color: #fff;
    letter-spacing: .33px;
    font-family: var(--tufi-font-family);
    font-weight: bolder;
    letter-spacing: 0
}

.text-approved-loan {
    font-size: 1em !important;
    font: normal normal medium var(--tufi-font-family) !important;
    padding-top: 17px !important
}

.button-right-loan {
    text-align: right
}

.buttons-loan {
    display: flex;
    justify-content: flex-end;
    margin-top: 2.092675635276532vh
}

.modalPrincipal-Loan {
    position: absolute;
    top: 29.895366218236173vh;
    background: #fff;
    overflow: visible;
    outline: none;
    display: flex;
    border-radius: 10px
}

.centerHorizontal-Loan,
.centerXY-Loan {
    display: flex;
    justify-content: center
}

.centerXY-Loan {
    align-items: center
}

.columnuser-header {
    background: #8dc63f 0 0 no-repeat padding-box;
    opacity: .8;
    border-radius: 10px;
    font-family: var(--tufi-font-family)
}

.columnuser-header,
.fotocontainer-header,
.logo {
    align-items: center;
    display: flex;
    justify-content: center
}

.fotocontainer-header {
    float: left;
    margin-left: 1.8519em;
    width: 4.2em;
    height: 4.2em;
    border: .1852em solid #fff;
    opacity: 1
}

.fotocontainer-header,
.fotouser-header {
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%
}

.userinfo-header {
    align-items: center;
    display: flex
}

.div2 {
    text-align: left;
    margin: 0 0 0 1.3889em
}

.saludo {
    font-size: 1.0885em;
    font: regular 13px/16px var(--tufi-font-family);
    letter-spacing: 0
}

.nombre,
.saludo {
    margin: 0;
    color: #fff;
    opacity: 1
}

.nombre {
    letter-spacing: 1.7px;
    font-weight: bolder
}

.ult-acceso {
    text-align: right;
    padding: 2px;
    opacity: 1;
    color: #fff;
    margin: 0;
    font: regular, var(--tufi-font-family);
    letter-spacing: 0;
    font-size: 1.0078em
}

.fech-ult-acceso {
    text-align: center;
    font-size: .8em;
    color: #fff
}

.ionbuttons-header {
    margin: 0
}

.ionbutton-header {
    background: none;
    padding: 0;
    margin-left: .8487654320987654vw
}

.paddin-header {
    padding: 5.9790732436472345vh 3.150805vw 0
}

.dropdown-toggle:after {
    display: none !important
}

.btn-primary {
    border-color: #8dc63f !important
}

.btn-primary,
.btn-primary:hover {
    background-color: #8dc63f !important
}

.btn-primary.focus,
.btn-primary:focus {
    box-shadow: none !important;
    border-color: #8dc63f !important;
    outline: none !important
}

#configPic,
#logoutPic {
    width: 1.55321vw
}

#homePic {
    width: 1.75321vw
}

.icons-header {
    text-align: end
}

.dropdown-menu {
    background-color: #707070 !important;
    border-radius: 10px !important;
    font: 1.125em var(--tufi-font-family) !important
}

.dropdown-item {
    color: #fff !important;
    font-weight: bolder !important
}

.dropdown-item:hover {
    box-shadow: inset 0 80px rgba(142, 198, 63, .7529411764705882)
}

.dropdown-HeaderStaticMobile>button {
    padding: 0;
    border: none
}

.bkg-green {
    background: #8dc63f 0 0 no-repeat padding-box;
    opacity: 1;
    color: #fff
}

.button {
    text-transform: none
}

.filaPrinToolbar {
    background: #8dc63f 0 0 no-repeat padding-box;
    opacity: .8;
    height: 7.473841554559043vh;
    border-radius: 10px
}

.colToolbar,
.filaPrinToolbar {
    align-items: center;
    display: flex;
    justify-content: center
}

.colToolbar {
    height: 100%
}

.padding-Toolbar {
    padding: 2.9895366218236172vh 3.150805vw 0
}

.zIndex-Toolbar {
    z-index: 1
}

.button-Toolbar {
    font-size: 14px !important;
    font-family: var(--tufi-font-family) !important;
    color: #fff;
    width: 100%;
    height: 100% !important;
    text-transform: uppercase;
    opacity: 1;
    letter-spacing: .33px;
    font-weight: bolder !important
}

.colorSelect-Toolbar {
    background: hsla(0, 0%, 100%, .8)
}

.buttonColor-Toolbar {
    color: #8dc63f !important
}

.icon-toolbar {
    font-size: 1.9em !important
}

.center-element {
    display: grid !important;
    place-items: center !important
}

.login-box {
    border: 1px solid #d1d1d1;
    border-radius: 10px;
    opacity: .9;
    width: 321px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    box-shadow: none !important;
    --background: #fff
}

@media (max-width:768px) {
    .login-box {
        border-style: none;
        width: 270px
    }
}

.pass-box {
    border: 1px solid #d1d1d1;
    border-radius: 10px;
    opacity: .9;
    max-width: 321px;
    display: flex;
    grid-gap: 1rem;
    gap: 1rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: none !important;
    --background: #fff;
    padding: 1rem;
    margin: 0 auto
}

:root {
    --ion-color-green-tufi: #8dc63f;
    --ion-color-green-tufi-rgb: 141, 198, 63;
    --ion-color-green-tufi-contrast: #000;
    --ion-color-green-tufi-contrast-rgb: 0, 0, 0;
    --ion-color-green-tufi-shade: #7cae37;
    --ion-color-green-tufi-tint: #98cc52
}

.ion-color-green-tufi {
    --ion-color-base: var(--ion-color-green-tufi);
    --ion-color-base-rgb: var(--ion-color-green-tufi-rgb);
    --ion-color-contrast: var(--ion-color-green-tufi-contrast);
    --ion-color-contrast-rgb: var(--ion-color-green-tufi-contrast-rgb);
    --ion-color-shade: var(--ion-color-green-tufi-shade);
    --ion-color-tint: var(--ion-color-green-tufi-tint)
}

.text-color-white {
    text-align: center;
    font: Medium 12px/14px var(--tufi-font-family);
    letter-spacing: 0;
    color: #fff;
    opacity: 1
}

.bkg-responsive {
    height: 100vh;
    background-image: url(../img/ftQrhBDG1vcu.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-color: #464646;
    position: fixed
}

.bkg-responsive+.col-loginweb {
    margin-left: auto;
    margin-top: 5%
}

.input-loginweb {
    opacity: 1;
    --background: #d1d1d1 0% 0% no-repeat padding-box;
    --placeholder-font-style: var(--tufi-font-family);
    width: 250px;
    height: 39px;
    --background-focused-opacity: none;
    --background-hover: none;
    --background-hover-opacity: 0;
    --inner-box-shadow: none;
    --box-shadow: none !important;
    /* border-radius: 10px 0 0 10px !important; */
    --placeholder-color: #707070
}

.input-loginweb,
.input-loginweb-forfetpass {
    font-family: var(--tufi-font-family);
    padding-left: 15px !important;
    box-shadow: none !important;
    --background-focused-opacity: 0;
    --placeholder-opacity: 1
}

.input-loginweb-forfetpass {
    width: 100%;
    border: 1px solid #c1c5cb;
    border-radius: 8px;
    --placeholder-color: #606060
}

ion-input#userCI.input-loginweb,
ion-input#userCI.input-loginweb .native-input {
    /* border-radius: 10px 10px 10px 10px !important */
}

.ion-item-no-bkg {
    --background: hsla(0, 0%, 100%, 0);
    --background-focused: transparent !important;
    --background-activated: transparent !important
}

.input-back-orange {
    opacity: 1;
    --background: #f7941d 0% 0% no-repeat padding-box;
    border-radius: 0 0 !important;
    box-shadow: none !important;
    border: 1px solid #fff !important;
    color: #fff;
    --placeholder-font-style: regular 14px/17px var(--tufi-font-family);
    width: 200px;
    height: 35px;
    --border-color: #fff !important;
    --border-radius: 0px 0px !important;
    --box-shadow: none !important;
    --border-width: 1px !important
}

.item-interactive {
    --border-width: 0 0 0 0;
    --show-full-highlight: 0
}

.bienvenido-loginweb {
    color: #8ec63f !important;
    font: normal normal medium !important;
    font-family: var(--tufi-font-family) !important;
    font-size: 16px;
    font-weight: bolder;
    letter-spacing: 0;
    opacity: 1;
    border-width: 0;
    width: 135px;
    height: 44px
}

@media only screen and (max-width:600px) {
    .bienvenido-loginweb {
        display: flex;
        justify-content: start;
        margin-right: auto
    }
}

.ingresar-button-loginweb {
    font-family: var(--tufi-font-family);
    --background: #8dc63f 0% 0% no-repeat padding-box;
    width: 135px;
    height: 39px;
    font-weight: bolder !important;
    --box-shadow: none !important;
    background: #8dc63f;
    border-radius: 10px !important;
    font-size: 14px !important;
    letter-spacing: .33px !important;
    color: #fff !important;
    text-transform: uppercase !important;
    border-radius: 10px
}

.ingresar-button-siguienteNormal {
    font-family: var(--tufi-font-family);
    font-weight: bolder !important;
    border: 0;
    width: 100%;
    height: 39px;
    font: 12px/14px var(--tufi-font-family);
    text-transform: uppercase;
    --border-width: 0px !important;
    --border-style: solid !important;
    --box-shadow: none !important;
    --background-activated: transparent !important;
    --background-activated-opacity: 0 !important;
    --background-focused-opacity: 0 !important;
    --background-hover-opacity: 0 !important;
    --border-radius: 10px !important
}

.olvidepass-loginweb>a {
    color: #707070;
    font: 700 12px/14px var(--tufi-font-family)
}

.olvidepass-loginweb {
    font-size: 12px !important;
    font-family: var(--tufi-font-family) !important;
    color: #707070 !important;
    cursor: pointer
}

a:active {
    outline: none
}

a:focus {
    outline-color: #8dc63f;
    outline-width: 1px !important;
    outline-style: solid !important
}

.registrarse-loginweb {
    font-family: var(--tufi-font-family) !important
}

.col-loginweb {
    background-color: #ffffff !important;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0 !important;
    
}

.iconopass-loginweb {
    background: #ededed 0 0 no-repeat padding-box;
    height: 39px;
    padding-right: 10px;
    border-radius: 0 10px 10px 0
}

.ionItem-loginweb {
    margin-bottom: 8px
}

.divcentrado-loginweb {
    width: 321px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    flex-direction: column
}

.padding-5 {
    padding: 5px
}

.warning-message-bkg {
    background-color: #f7941d !important;
    color: #fff !important
}

.content-orange {
    --background: #f7941d !important;
    background-color: #f7941d !important;
    color: #fff !important;
    --padding-top: 10px
}

.error-detail,
.error-header {
    text-align: center;
    font-size: large;
    color: #fff !important
}

.bkgMobile-loginWeb {
    background-position: 50%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover
}

.cardMobile-login {
    margin-top: 4.310344827586207vh;
    margin-bottom: 26.724137931034484vh
}

.IonLabelVolverIngresar-LoginWeb {
    max-width: 100% !important
}

.registrarComoWeb-loginWeb {
    margin-top: 2.9895366218236172vh;
    color: #707070;
    font: 12px/14px var(--tufi-font-family);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer
}

.registrarComoWeb-loginWeb u {
    text-decoration: underline
}

.registrarComoWeb-loginWeb:hover {
    color: #707070;
    text-decoration: none
}

.itemBkg-loginWeb {
    --background: #d1d1d1 !important;
    border: 1px solid #ededed
}

.itemIconBkg-loginWeb,
.itemIconBkg-loginWeb-alternative {
    border: 1px solid #ededed;
    border-left: none !important;
    height: 39px !important;
    background: #d1d1d1 !important;
    border-radius: 0 10px 10px 0
}

.itemIconBkg-loginWeb-alternative {
    cursor: pointer
}

.noneBorderRight-loginWeb {
    border-right: none !important
}

.modalTufiCuida-loginWeb {
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
    --border-radius: 10px
}

.buttonXlogin {
    background: none;
    position: absolute;
    width: -webkit-min-content;
    width: min-content;
    height: auto;
    top: 1vh;
    right: 0;
    font-weight: 700;
    font-size: large;
    font-family: cursive
}

.HeaderModalTransfers-Step1 {
    border-radius: 10px 10px 0 0
}

.BodyModalTransfers-Step1 {
    border-radius: 0 0 10px 10px
}

.ErrorMsg,
.rowSeccMensaje-Step1,
.textAvisModalTansfers-Step1 {
    margin-left: auto;
    margin-right: auto
}

.input.pw {
    -webkit-text-security: disc !important
}

.input.normal {
    -webkit-text-security: none !important
}

::placeholder {
    color: #707070
}

.input-password-new {
    font-family: var(--tufi-font-family);
    opacity: 1 !important;
    background: #d1d1d1 0 0 no-repeat padding-box !important;
    --placeholder-color: #707070 !important;
    width: 250px;
    height: 39px;
    padding-left: 15px !important;
    outline: none;
    border: none;
    box-shadow: none !important
}

.content-loginWeb {
    --keyboard-offset: 0px !important
}

.input-password-new::-moz-placeholder {
    color: #707070 !important;
    opacity: 1 !important
}

.input-password-new::-webkit-input-placeholder {
    color: #707070 !important;
    opacity: 1 !important
}

#banner-info {
    font-family: var(--tufi-font-family-Medium);
    margin-bottom: 12px;
    padding: 25px 19px 20px 18px;
    color: #606060;
    background-color: #efefef;
    border-color: #efefef;
    font-size: 12px;
    font-weight: 900
}

.banner-header {
    cursor: pointer
}

.banner-header-shield-icon {
    display: flex;
    justify-content: start
}

.banner-dropdown-button {
    display: flex;
    justify-content: end;
    width: 48px
}

#banner-dropdown-button-icon {
    width: 24px
}

.banner-content {
    padding-left: 8px;
    font-size: 12px;
    margin-top: 15px;
    margin-bottom: 10px
}

.banner-content,
.banner-footer {
    font-family: var(--tufi-font-family);
    font-weight: 500
}

.banner-footer {
    font-size: 10px
}

.img-adjust {
    margin-left: auto;
    margin-top: 50px
}

.img-mobile {
    width: 48px
}

.text-version-style {
    color: #707070;
    font: normal 12px/14px var(--tufi-font-family)
}

.resetpass-button {
    --background: #8dc63f 0% 0% no-repeat padding-box;
    width: 200px;
    height: 39px
}

.input-resetpass {
    opacity: 1;
    --background: #ededed 0% 0% no-repeat padding-box;
    --placeholder-font-style: regular 14px/17px var(--tufi-font-family);
    font: regular 14px/17px var(--tufi-font-family);
    width: 270px;
    height: 39px;
    padding-left: 15px !important
}

.IonLabelVolverIngresar-resetpass {
    max-width: 100% !important
}

.tituloOlvide-ResetPass {
    font: 700 16px/19px var(--tufi-font-family);
    letter-spacing: 0;
    color: #8ec63f;
    opacity: 1
}

.textOlvide-ResetPass {
    text-align: left;
    font: 12px/14px var(--tufi-font-family) !important;
    letter-spacing: 0;
    color: #606060
}

.logo-registeruser {
    display: flex;
    justify-content: center;
    align-content: center;
    height: 100px
}

.crearusuario-registeruser {
    text-align: left;
    font-family: var(--tufi-font-family) !important;
    font-size: 20px;
    letter-spacing: 0;
    color: #8dc63f;
    opacity: 1
}

.crearusuario-registeruserPhone {
    font: 14px/14px var(--tufi-font-family);
    letter-spacing: 0;
    color: #8dc63f;
    opacity: 1
}

.aviso-registeruser {
    text-align: left;
    font-family: var(--tufi-font-family);
    font-size: 12px;
    letter-spacing: 0;
    color: #f7941e;
    opacity: 1
}

.textaviso-registeruser {
    text-align: left;
    font-size: 12px !important;
    font-family: var(--tufi-font-family) !important;
    letter-spacing: 0;
    opacity: 1
}

.item-registeruser {
    --background: #ededed 0% 0% no-repeat padding-box;
    width: 330px
}

.item-checkbox,
.item-registeruser {
    opacity: 1;
    border-radius: 10px 10px 10px 10px !important
}

.focus-registeruser,
.item-checkbox-contrato {
    width: 330px;
    opacity: 1;
    border-radius: 10px 10px 10px 10px !important
}

.focus-registeruser {
    --background: #fff 0% 0% no-repeat padding-box;
    --border-width: 1px;
    --border-color: #ededed
}

.item-registeremail {
    --background: #ededed 0% 0% no-repeat padding-box;
    width: 330px;
    opacity: 1;
    border-radius: 10px 10px 10px 10px !important
}

.focus-registeremail {
    --background: #fff 0% 0% no-repeat padding-box
}

.error-input,
.focus-registeremail {
    border-radius: 10px 10px 10px 10px !important;
    --border-width: 1px;
    --border-color: #ededed;
    width: 330px;
    opacity: 1
}

.error-input {
    --background: #f7941e 0% 0% no-repeat padding-box
}

.labelinput-registeruser {
    color: #606060 !important
}

.labelinput-registeruser,
.labelinputError-registeruser {
    text-align: left;
    font-family: var(--tufi-font-family) !important;
    font-size: 16px !important;
    letter-spacing: 0 !important;
    opacity: 1 !important
}

.labelinputError-registeruser {
    color: #fff !important
}

.input-registeruser {
    border-radius: 10px 10px 10px 10px !important;
    text-transform: uppercase;
    text-align: left;
    font-family: var(--tufi-font-family) !important;
    font-size: 16px !important;
    letter-spacing: 0;
    color: #000;
    opacity: 1
}

.divline-registeruser {
    background: #8dc63f;
    height: 2px;
    width: 330px
}

.labelinput-registeremail {
    text-align: left;
    font-family: var(--tufi-font-family) !important;
    font-size: 16px !important;
    letter-spacing: 0 !important;
    color: #606060 !important;
    opacity: 1 !important
}

.input-registeremail,
.input-tufi-register {
    border-radius: 10px 10px 10px 10px !important;
    text-align: left;
    font-family: var(--tufi-font-family) !important;
    font-size: 16px !important;
    letter-spacing: 0;
    color: #000;
    opacity: 1
}

.divline-registeremail {
    background: #8dc63f;
    height: 2px;
    width: 330px
}

.avisocol-registeruser {
    padding-left: 30px
}

.colcrear-registeruser {
    display: flex;
    margin-top: 1.195814648729447vh
}

.rowaviso-registeruser {
    padding-top: 5px
}

.userdata-registeruser {
    display: flex;
    align-items: center;
    justify-content: center
}

.mayorseg-registeruser {
    color: #8dc63f !important
}

.error-registeruser,
.mayorseg-registeruser {
    font-family: var(--tufi-font-family) !important;
    font-size: 12px !important;
    letter-spacing: 0;
    opacity: 1
}

.error-registeruser {
    color: #f7941e !important
}

.explicacion-registeruser {
    font-family: var(--tufi-font-family) !important;
    font-size: 12px !important;
    letter-spacing: 0;
    color: #606060 !important;
    opacity: 1
}

.divselect-registeruser {
    height: 70px;
    width: 330px;
    padding-top: 30px;
    background: #ededed 0 0 no-repeat padding-box;
    margin-bottom: 20px
}

.fotoitem-registeuser {
    text-align: center;
    width: 330px
}

.contimg-registeruser {
    background: #ededed 0 0 no-repeat padding-box;
    opacity: 1;
    height: 79px !important;
    width: 80px !important;
    margin: 10px 10px 0
}

.contimg-registeruser,
.cuadroimagen-registeruser {
    display: flex;
    justify-content: center;
    align-items: center
}

.fileContainer {
    padding: 0 !important;
    margin: 0 !important;
    height: 79px;
    border-radius: 0 !important;
    width: 50px
}

.uploadPictureContainer {
    padding: 0 !important;
    margin: 0 !important;
    height: 79px !important;
    width: 80px !important
}

.uploadPictureContainer>img {
    opacity: .4
}

.botonImagen-register {
    background-image: url(/tufi-web/static/media/Más.bceaaab9.svg) !important;
    background-repeat: no-repeat !important;
    background-position: 50% !important;
    width: 25px;
    height: 25px;
    padding: 0 !important;
    margin: 0 !important;
    background-color: #ededed !important;
    position: absolute !important
}

.fileContainer .chooseFileButton:hover {
    background: none
}

.fileContainer .chooseFileButton {
    width: 55%;
    margin-left: 6px !important
}

.buttonImgHidden {
    background-image: url(/tufi-web/static/media/Check.6ad51db4.svg) !important;
    background-repeat: no-repeat !important;
    background-position: 50% !important;
    width: 25px;
    height: 25px;
    background-color: rgba(255, 71, 15, 0) !important;
    position: absolute !important
}

.buttonImgHidden,
.deleteImage {
    padding: 0 !important;
    margin: 0 !important;
    z-index: 5
}

.deleteImage {
    width: 25px !important;
    height: 25px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 19px !important;
    font-weight: 300 !important;
    color: #606060 !important;
    border: 1.3px solid #606060 !important;
    background: #ededed 0 0 no-repeat padding-box !important;
    display: none
}

.checkOcultar-registerUser {
    display: none
}

.check-registerUser {
    position: absolute;
    transform: rotate(-79deg)
}

.buttonMarginLeft-registerUser {
    margin-left: 69.44444444444444vw
}

.divCrearUserMarginLeft-registerUSer {
    margin-left: 40px
}

.divCrearUserwidth-registerUSer {
    width: 100%;
    border-bottom: 2px solid #ededed;
    padding-bottom: 9px
}

.marginChevronAtras-registerUser {
    margin-left: 6.172839506172839vw
}

.marginChevronAtras-registerUserPhone {
    margin-left: 6.172839506172839vw;
    position: absolute
}

.marginBottom-registerUser {
    margin-bottom: 20px
}

.itemErrorMessage-registerUser {
    align-items: center;
    display: flex !important;
    justify-content: center
}

.listMarginTop-registerUser {
    margin-top: 20px
}

.sizeInput-registerUser {
    width: 330px
}

.sizeInput-registerUser-alternative {
    margin-right: 75%
}

@media (max-width:991px) {
    .sizeInput-registerUser-alternative {
        margin-right: 0
    }
}

.font-sizeCont-registerUser {
    font-size: 12px;
    font-family: var(--tufi-font-family)
}

.linkContrato {
    color: #007bff;
    text-decoration: none;
    background-color: initial;
    cursor: pointer
}

.linkContrato:hover {
    color: #0056b3;
    text-decoration: underline;
    font-family: var(--tufi-font-family)
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: none
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
    -webkit-appearance: none
}

.headerCamera-RegisterUser {
    top: 0;
    height: 5%;
    width: 100%;
    background: rgba(0, 0, 0, .8);
    z-index: 10;
    display: -ms-flexbox;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    box-sizing: border-box
}

.button-next {
    font-family: var(--tufi-font-family);
    font-weight: bolder !important;
    border: 0;
    width: 135px;
    height: 39px;
    font: 12px/14px var(--tufi-font-family);
    text-transform: uppercase;
    --border-width: 0px !important;
    --border-style: solid !important;
    --box-shadow: none !important;
    --background-activated: transparent !important;
    --background-activated-opacity: 0 !important;
    --background-focused-opacity: 0 !important;
    --background-hover-opacity: 0 !important;
    --border-radius: 10px !important
}

.button-previous {
    --background: #707070;
    background: #707070;
    border-radius: 10px;
    color: #fff;
    --background-activated: transparent !important;
    --background-activated-opacity: 0 !important;
    --background-focused-opacity: 0 !important;
    --background-hover-opacity: 0 !important
}

.button-consult,
.button-previous {
    font-family: var(--tufi-font-family);
    font-weight: bolder !important;
    font: 12px/14px var(--tufi-font-family);
    width: 135px;
    height: 39px;
    letter-spacing: .33px;
    text-transform: uppercase;
    --border-width: 0px !important;
    --border-style: solid !important;
    --box-shadow: none !important;
    --border-radius: 10px !important
}

.button-consult {
    --background: #ecf5e1;
    background: #ecf5e1;
    border-radius: 10px;
    color: #8dc63f;
    border: 2px solid #8dc63f
}

.button-consult,
.send-button {
    --background-activated: transparent !important;
    --background-activated-opacity: 0 !important;
    --background-focused-opacity: 0 !important;
    --background-hover-opacity: 0 !important
}

.send-button {
    font-family: var(--tufi-font-family);
    font-weight: bolder !important;
    border: 0;
    width: 99%;
    height: 39px;
    font: 12px/14px var(--tufi-font-family);
    --border-width: 0px !important;
    --border-style: solid !important;
    --box-shadow: none !important;
    --border-radius: 10px !important
}

.logo-CabeceraRegistesUser {
    display: flex;
    justify-content: center;
    align-content: center;
    height: 100px
}

.colcrear-CabeceraRegistesUser {
    display: flex;
    align-items: center
}

.crearusuario-CabeceraRegistesUser {
    text-align: left;
    font-family: var(--tufi-font-family) !important;
    font-size: 20px;
    letter-spacing: 0;
    color: #8dc63f;
    opacity: 1;
    margin-left: 40px
}

.title-contrato {
    font: 700 16px/19px var(--tufi-font-family);
    letter-spacing: 0;
    color: #8dc63f;
    opacity: 1
}

.Text-contrato {
    color: #606060;
    text-align: justify
}

.buttonAceptar-contrato,
.Text-contrato {
    font: 12px/14px var(--tufi-font-family);
    letter-spacing: 0;
    opacity: 1
}

.buttonAceptar-contrato {
    --background: #8dc63f 0% 0% no-repeat padding-box;
    --border-radius: 0px;
    width: 135px;
    height: 39px;
    color: #fff
}

.buttonRechazar-contrato {
    border: 1px solid #8dc63f;
    width: 135px;
    height: 39px;
    font: 12px/14px var(--tufi-font-family);
    letter-spacing: 0;
    color: #8dc63f;
    opacity: 1;
    --background: #fff 0% 0% no-repeat padding-box
}

.margin-contrato {
    margin-top: 20px
}

.react-pdf__Page {
    margin-top: 10px;
    width: 800px
}

.react-pdf__Page__textContent {
    border: 1px solid #a9a9a9;
    box-shadow: 5px 5px 5px 1px #ccc;
    border-radius: 5px
}

.react-pdf__Page__annotations.annotationLayer {
    padding: 20px
}

.react-pdf__Page__canvas {
    margin: 0 auto
}

.all-page-container {
    height: 100%;
    max-height: 800px;
    overflow: auto
}

.mensaje-smsRegister {
    font: 700 12px/14px var(--tufi-font-family);
    letter-spacing: 0;
    color: #8dc63f;
    opacity: 1
}

.num-smsRegister {
    font: 16px/14px var(--tufi-font-family);
    letter-spacing: 0;
    color: #000
}

.textpass-smsRegister {
    color: #606060
}

.Button-smsRegister,
.textpass-smsRegister {
    font: 12px/14px var(--tufi-font-family);
    letter-spacing: 0
}

.Button-smsRegister {
    --background: #8dc63f 0% 0% no-repeat padding-box;
    width: 135px;
    height: 39px;
    --border-radius: 0px;
    margin-left: 69.44444444444444vw;
    color: #fff;
    opacity: 1
}

.row-smsRegisterUser {
    margin-top: 3.8580246913580245vw
}

.rowbutton-smsRegister {
    margin-top: 1.5432098765432098vw
}

.columnCenter-changePass {
    display: flex;
    justify-content: center
}

.separadorInputTufi {
    margin-bottom: 1.4947683109118086vh
}

.Button-ChangePass {
    --background: #8ec63f 0% 0% no-repeat padding-box;
    opacity: 1 !important;
    width: 135px;
    height: 39px;
    font: 12px/14px var(--tufi-font-family);
    letter-spacing: 0;
    color: #fff;
    margin-left: 69.44444444444444vw;
    margin-top: 3.8580246913580245vw;
    --border-radius: 0px
}

.hiddenButton {
    display: none
}

.change-pass-image-mobile-container {
    display: none
}

@media (max-width:768px) {
    .change-pass-image-mobile-container {
        display: flex;
        justify-content: center;
        align-content: center
    }
}

.change-pass-image-mobile {
    height: 75px
}

.ReactPasswordStrength-input:focus {
    box-shadow: none !important
}

.ReactPasswordStrength-strength-desc {
    width: 40% !important
}

.ReactPasswordStrength {
    width: 100% !important
}

.chevron-SelectCuenta {
    width: 1.0802469135802468vw;
    height: .8968609865470852vh;
    min-width: 12px;
    min-height: 4px
}

ion-content ion-toolbar {
    --background: translucent
}

.subtitle-transfers {
    font: 20px/14px var(--tufi-font-family);
    color: #8dc63f;
    margin-left: 50px
}

.ColSubtitle-transfers {
    display: flex;
    align-items: center
}

.gridSubtitle-transfers {
    margin-top: 2.9895366218236172vh
}

.divMonto-transfers {
    background: rgba(141, 198, 63, .15);
    height: 11.659192825112108vh;
    padding: 1px;
    margin-bottom: .4484304932735426vh
}

.colCuenta-transfers {
    z-index: 2
}

.listaCuenta-transfers {
    background: #fff 0 0 no-repeat padding-box;
    overflow-y: auto;
    border-radius: 0 0 10px 10px;
    padding: 1px 1px 50px
}

.listaCuenta-transfers,
.listaCuenta-transfers-b {
    height: 68.75934230194319vh;
    width: 45.833333333333336vw
}

.listaCuenta-transfers-b {
    background: #fff 0 0 no-repeat padding-box;
    height: 44.75934230194319vh;
    width: 100%;
    overflow-y: auto;
    border-radius: 0 0 10px 10px;
    padding: 1px 1px 50px
}

.gridStep1-Transfers {
    margin-left: 46px;
    margin-top: 17px
}

.divNombre-transfers {
    margin-top: 1.7937219730941705vh;
    margin-left: 1.0802469135802468vw
}

.nombreCuenta-transfers {
    font: 1.2345679012345678vw/.21914041595157688vh var(--tufi-font-family);
    color: #606060
}

.datosmonto-transfers {
    margin-left: .9259259259259259vw
}

.AHGS-tansfers {
    font: .9259259259259259vw/8.221225710014949vh var(--tufi-font-family);
    color: #606060
}

.leftGs-transfers {
    margin-left: 3.549382716049383vw
}

.MONTO-tansfers {
    font: 2.7777777777777777vw/8.221225710014949vh var(--tufi-font-family);
    color: #000
}

.divCtaDestino-transfers {
    background: hsla(0, 0%, 43.9%, .5);
    padding: .75em;
    cursor: pointer;
    border-radius: 10px
}

.divHijoCtaDestino-transfers {
    margin-top: 7.623318385650224vh
}

.selecDest-transfers {
    font-size: .9 em;
    font-family: var(--tufi-font-family);
    color: #fff;
    font-weight: bolder;
    text-transform: uppercase
}

.Modal-Transfers {
    position: relative;
    width: 100%;
    outline: none
}

.salirModal-transfers {
    display: flex;
    justify-content: flex-end;
    margin: 2.9895366218236172vh 1.5432098765432098vw
}

.cerrarIcon-transfers {
    cursor: pointer
}

.contentDivModal-transfers {
    display: flex;
    justify-content: center;
    width: 100%
}

.headerModal-transfers {
    border-radius: 10px 10px 0 0
}

.headerModal-transfers,
.sub-headerModal-transfers {
    background: #8dc63f 0 0 no-repeat padding-box;
    width: 45.833333333333336vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px
}

.sub-headerModal-transfers {
    padding-bottom: 15px
}

.headerModal-transfers-b {
    background: #8dc63f 0 0 no-repeat padding-box;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 10px 10px 0 0;
    padding-top: 10px;
    padding-left: 20px
}

.textAgendaHeader-Transfers {
    text-align: center;
    font: 12px/14px var(--tufi-font-family);
    color: #fff
}

.textAgendaHeader-Transfers-c {
    text-align: center;
    font: 16px/18px var(--tufi-font-family);
    color: #fff
}

.textAgendaHeader-Transfers-b {
    text-align: center;
    font: 16px var(--tufi-font-family);
    font-weight: 700;
    color: #fff
}

.buscarcuentaregion-transfers {
    background: #8dc63f 0 0 no-repeat padding-box;
    width: 45.833333333333336vw;
    height: 8.819133034379671vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.buscarcuentaregion-transfers-b,
.buscarcuentaregion-transfers-other {
    background: #8dc63f 0 0 no-repeat padding-box;
    width: 100%;
    height: 8.819133034379671vh;
    display: flex;
    justify-content: center;
    align-items: center
}

.buscarcuentaregion-transfers-other {
    border-radius: 10px 10px 0 0
}

.buscador-transfers {
    width: 43.51851851851852vw
}

.buscador-transfers,
.buscador-transfers-b {
    border: 1px solid #fff;
    border-radius: 19px;
    height: 5.829596412556054vh;
    --background: #8dc63f 0% 0% no-repeat padding-box;
    display: flex;
    align-items: center;
    font: 14px/17px var(--tufi-font-family);
    color: #fff
}

.buscador-transfers-b {
    width: 90%
}

.iconBuscar-transfers {
    color: #fff
}

.buttonAddCuenta-transfers {
    margin: 9px 5px;
    --border-radius: 0px;
    --border-radius: 100px;
    --background: #8dc63f 0% 0% no-repeat padding-box;
    --box-shadow: none !important;
    font: 12px var(--tufi-font-family)
}

.col1cuenta-transfers {
    display: flex;
    align-items: center
}

.col2cuenta-transfers {
    display: flex;
    justify-content: flex-end
}

.logoTufiImg-transfers {
    height: 40px
}

.logoTufiImgNo-transfers {
    display: none
}

.nombreUserCuenta-transfers {
    font: 16px/19px var(--tufi-font-family);
    color: #8dc63f;
    font-weight: bolder
}

.rucUserCuenta-transfers {
    font: 16px/19px var(--tufi-font-family);
    color: #606060;
    display: inline-flex;
    align-items: flex-end
}

.cuentaNum-transfers,
.valRucCuenta-transfers {
    font: 16px/19px var(--tufi-font-family);
    color: #000;
    font-weight: bolder
}

.cuentaNum-transfers {
    display: inline-flex;
    align-items: flex-end;
    margin-left: 2px
}

.gridCuenta-transfers {
    padding: 0 12px 12px
}

.divCuentaImpar-transfers {
    background: #ededed;
    cursor: pointer
}

.divCuentaPar-transfers {
    background: #fff 0 0 no-repeat padding-box;
    cursor: pointer
}

.divInputWidth-Transfers {
    margin: 0 10px
}

.MuiCheckbox-colorSecondary.Mui-checked {
    color: #8dc63f !important
}

.PrivateSwitchBase-root-7 {
    padding: 0 !important
}

.labelCheck-Transfers {
    font: 12px var(--tufi-font-family);
    color: #606060;
    margin-right: 11px
}

.divRightAlignCheck-Transfers {
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.debitoDestinoRegion-Transfers {
    background: #ededed 0 0 no-repeat padding-box;
    border-radius: 10px
}

.debitoDestinoRegion-Transfers.origin {
    width: 100%;
    height: auto
}

.debitoDestinoRegion-Transfers.origin,
.step3Box2-Transfers.origin {
    background: #ededed 0 0 no-repeat padding-box;
    border-radius: 10px 10px 0 0
}

.debitoDestinoRegion-Step2.origin {
    border-radius: 10px 10px 0 0
}

.debitoDestinoRegion-Transfers.destiny {
    width: 100%;
    height: auto;
    border-radius: 0 0 10px 10px
}

.debitoDestinoRegion-Transfers.destiny,
.step3Box2-Transfers.destiny {
    background: rgba(96, 96, 96, .2901960784313726) 0 0 no-repeat padding-box
}

.debitoDestinoRegion-CardDetail {
    height: 100%;
    background: #ededed 0 0 no-repeat padding-box;
    border-radius: 10px
}

.montoMensajeRow1-Transfers {
    background: #8dc63f 0 0 no-repeat padding-box;
    height: 50%;
    border-radius: 10px 10px 0 0
}

.montoMensajeRow1-Transfers-b {
    background: #8dc63f 0 0 no-repeat padding-box;
    height: 50%;
    border-radius: 10px
}

.montoMensajeRow2-Transfers {
    background: rgba(141, 198, 63, .2);
    height: 50%;
    border-radius: 0 0 10px 10px
}

.flexEndVertical-Transfers {
    display: flex;
    align-items: flex-end;
    justify-content: center
}

.textCuentaTitle-Transfers {
    font-size: .75em;
    font-family: var(--tufi-font-family);
    color: #606060
}

.textDataCuenta-Transfers {
    font-size: .875em;
    font-family: var(--tufi-font-family);
    color: #000
}

.paddingCuenta-Transfers {
    padding: 1.8834em 1.7593em
}

.MontoEnviarTitle-Transfers {
    font: 1.1111em;
    font-family: var(--tufi-font-family);
    color: #fff
}

.MontoDataEnviar-Transfers {
    font-size: 2.875em;
    font-family: var(--tufi-font-family);
    color: #fff;
    margin-right: .38580246913580246vw
}

.paddingRegionMontoSMS {
    padding: 5px 11px
}

.MensajeTitle-Transfers {
    font-size: .75em;
    font-family: var(--tufi-font-family);
    color: #606060
}

.MensajeText-Transfers {
    font-size: .875em;
    font-family: var(--tufi-font-family);
    color: #000
}

.paddingRegionSMS-Transfers {
    padding: 5px 11px
}

.atras-button-Transfers {
    --background: #fff 0% 0% no-repeat padding-box;
    border: 1px solid #8dc63f;
    width: 135px;
    height: 39px;
    --box-shadow: none !important;
    --border-radius: 10px !important;
    border-radius: 10px;
    font: normal normal medium .6875em, var(--tufi-font-family);
    letter-spacing: .33px;
    color: #8dc63f;
    text-transform: uppercase
}

.margintopbutton-Transfers {
    margin-top: 29px
}

.step3Box1-Transfers {
    margin: 0 10px;
    height: 8.9375em;
    border: 1px solid #dadada;
    border-radius: 10px
}

.step3Box2-Transfers,
.step3Box3-Transfers {
    background: #dadada 0 0 no-repeat padding-box
}

.step3Box3-Transfers {
    margin: 0 10px 5px;
    border-radius: 10px
}

.buttonStep3Box3-Transfers {
    height: 8.9375em;
    margin: 0;
    width: 100%;
    font: .75em;
    font-family: var(--tufi-font-family);
    color: #fff;
    cursor: pointer
}

.buttonStep3Box3-Transfers-olvide {
    height: 21.375186846038865vh;
    margin: 0;
    width: 100%;
    font: .8487654320987654vw var(--tufi-font-family);
    color: #fff;
    cursor: pointer;
    border-radius: 10px !important
}

.button1Step3Color-Transfers {
    background: rgba(141, 198, 63, .9);
    border-radius: 10px 0 0 10px
}

.button2Step3Color-Transfers {
    background: rgba(141, 198, 63, .8)
}

.button3Step3Color-Transfers {
    background: rgba(141, 198, 63, .7);
    border-radius: 0 10px 10px 0
}

.alignCenterXY-Transfers {
    justify-content: center
}

.alignCenterXY-others,
.alignCenterXY-Transfers {
    display: flex;
    align-items: center
}

.textOperacionExitosa-Transfers {
    margin-left: .9688em
}

.textOperacionExitosa2-Transfers,
.textOperacionExitosa-Transfers {
    font-size: .875em;
    font-family: var(--tufi-font-family);
    color: #606060
}

.logoExito-Transfers {
    width: 2.3125em;
    height: 2.5em
}

.textGenGreen-Transfers {
    font-size: .75em;
    font-family: var(--tufi-font-family);
    color: #8dc63f
}

.textMontoGreen-Transfers {
    font: 4.012345679012346vw var(--tufi-font-family);
    color: #8dc63f
}

.regionMontoExitoso-Transfers {
    background: #ededed 0 0 no-repeat padding-box
}

.regionSMSExitoso-Transfers {
    border: 1px solid #dadada;
    border-radius: 0 0 10px 10px
}

.smsTitleExitoso-Transfers {
    font-size: .75em;
    font-family: var(--tufi-font-family);
    color: #8dc63f
}

.paddingImgExito-Transfers {
    margin-bottom: 19px
}

.NumberFormat-Transfers {
    border: none;
    outline: none;
    padding-bottom: 8px;
    width: 100%
}

.divContainer-Transfers {
    background: #fff 0 0 no-repeat padding-box;
    border: 1px solid #ededed;
    height: 66px;
    display: flex;
    align-items: flex-end;
    -webkit-padding-end: 16px;
    padding-inline-end: 16px;
    -webkit-padding-start: 16px;
    padding-inline-start: 16px;
    border-radius: 10px
}

.divSecundContainer-Transfers {
    width: 100%
}

.divbottomNumber-Transfers {
    width: 100%;
    background-color: #8dc63f;
    height: 2px
}

.MontoText-Transfers {
    font: 12px var(--tufi-font-family);
    color: #606060
}

.selectTufiBorder-Transfers {
    border: 1px solid #ededed;
    border-radius: 10px;
    --border-radius: 10px
}

.imgExito-Transfers {
    width: 2.8125em;
    height: 2.625em
}

.buttonEliminar-transfers {
    color: #8dc63f
}

.buttonEliminar-transfers:hover {
    color: #fff;
    background: #8dc63f
}

.divButtonDelete-transfers {
    padding: 5px 5px 0
}

.espacio-abajo {
    padding-bottom: 10px
}

.react-tabs__tab-list {
    margin: 0 0 10px
}

.react-tabs__tab {
    list-style: none;
    cursor: pointer;
    background: #8dc63f;
    color: #fff
}

.react-tabs__tab,
.react-tabs__tab--selected {
    display: inline-block;
    width: 165px;
    height: 4.262295081967213vh;
    border: 2px solid #8dc63f;
    font: normal normal 700 var(--tufi-font-family) !important;
    font-size: .8em !important;
    font-weight: bolder;
    text-transform: uppercase !important
}

.react-tabs__tab--selected {
    background: hsla(0, 0%, 100%, .8);
    color: #8dc63f !important
}

.divTabsText-transfers {
    font-family: var(--tufi-font-family);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.react-tabs__tab-list {
    margin: 0 0 20px;
    padding: 7px
}

.seccionCuenta1-Step1 {
    height: 7.473841554559043vh;
    background: #eef7e2 0 0 no-repeat padding-box;
    opacity: 1;
    padding-left: 1.3117283950617284vw;
    padding-right: .6944444444444444vw;
    margin-bottom: 1.4947683109118086vh
}

.verticalCenter-Step1 {
    display: flex;
    align-items: center
}

.rowSeccionCuenta-Step1 {
    width: 100%
}

.colSeccionCuentaRight-Step1 {
    display: flex;
    justify-content: flex-end
}

.cuentaText-Step1 {
    font-size: 1.125em;
    font-family: var(--tufi-font-family);
    color: #8dc63f
}

.modalExternalTransfers-Step1 {
    width: 55.632716049382715vw
}

.HeaderModalTransfers-Step1 {
    height: 11.210762331838565vh;
    width: 100%;
    background: #f7941e 0 0 no-repeat padding-box;
    padding-bottom: 1.4947683109118086vh;
    padding-left: 2.0833333333333335vw;
}

.colModalTransfers-Step1 {
    display: flex;
    align-items: flex-end
}

.textAvisModalTansfers-Step1 {
    font-size: 1.25em;
    font-weight: 700;
    font-family: var(--tufi-font-family);
    color: #fff
}

.BodyModalTransfers-Step1 {
    background: #fff 0 0 no-repeat padding-box;
    padding-left: 2.0833333333333335vw;
    padding-right: 2.0833333333333335vw;
    font-size: .75em;
    font-family: var(--tufi-font-family)
}

.divPModalTransfers-Step1 {
    padding: 0 .7716049382716049vw
}

.AceptarModal-button-Step1 {
    background: #f7941e 0 0 no-repeat padding-box;
    width: 135px;
    height: 39px;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 10px 10px !important;
    font: 12px var(--tufi-font-family);
    color: #fff
}

.divCenterModalButton-Step1,
.divContainerModal-Step1 {
    display: flex;
    justify-content: center
}

.divContainerModal-Step1 {
    height: 100%;
    align-items: center
}

.buttonRow-Step1 {
    width: 100%;
    margin-bottom: 2.242152466367713vh
}

.rowSeccMensaje-Step1 {
    margin-top: 2.9895366218236172vh;
    margin-bottom: 1.4947683109118086vh
}

.smsAuth-modal {
    margin-left: 25%;
    margin-right: 25%
}

.smsAuth-modal-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    font-family: var(--tufi-font-family-Regular) !important;
    background-color: #fff;
    color: #707070;
    border-style: solid;
    border-color: #fbb034;
    border-radius: 5px;
    width: 600px;
    height: 450px
}

@media only screen and (max-width:760px) {
    .smsAuth-modal-container {
        width: 450px;
        height: 500px
    }
}

.smsAuth-modal-header {
    display: flex;
    justify-content: space-evenly;
    margin-top: 10px;
    margin-bottom: 20px
}

#smsAuth-modal-shield-icon {
    height: 30px;
    color: #606060
}

.smsAuth-modal-header-button {
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    position: absolute;
    left: 65%;
    margin-bottom: 20px
}

@media only screen and (min-width:1700px) {
    .smsAuth-modal-header-button {
        left: 60%
    }
}

.smsAuth-modal-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px
}

.smsAuth-modal-subtitle {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 20px
}

.smsAuth-modal-input {
    width: 270px;
    margin-bottom: 20px
}

#smsAuth-modal-continue-button {
    font-weight: 500;
    color: #fff;
    background-color: #fbb034;
    margin-bottom: 20px;
    border-radius: 10px;
    height: 50px;
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

#smsAuth-modal-subtitle-2 {
    font-weight: 500
}

#smsAuth-modal-subtitle-2-link {
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer
}

.smsAuth-modal-footer {
    margin-top: 20px;
    font-size: 10px;
    margin-bottom: 20px
}

.smsAuth-modal-subtitle-retry {
    margin-bottom: 0
}

#smsAuth-modal-container-exclude {
    display: flex;
    align-items: center;
    text-align: center;
    height: 180px;
    font-weight: 800;
    font-size: 18px
}

.Collapsible {
    background-color: #fff;
    height: 2.7921em;
    min-height: 18px;
    cursor: pointer
}

.contentInnerMobile {
    padding: 5px 10px
}

.contentInnerWeb {
    padding: 10px 16px
}

.triggerCustom,
.triggerCustomOpened {
    background: #fbb034 !important;
    color: #fff !important
}

.Collapsible__contentInner {
    border: 1px solid #d3d3d3;
    border-radius: 0 0 10px 10px;
    border-top: 0;
    margin-bottom: 50px
}

.Collapsible__contentInner p {
    margin-bottom: 10px;
    font-size: .7291666666666666vw;
    line-height: 20px
}

.Collapsible__contentInner p:last-child {
    margin-bottom: 0
}

.Collapsible__trigger {
    display: block;
    text-decoration: none;
    position: relative;
    border: 1px solid #fff;
    padding: 5px;
    background: #ededed;
    color: #fff;
    font: 700 .96em var(--tufi-font-family);
    color: #f7941e;
    border-radius: 10px
}

.Collapsible__trigger:after {
    font-family: "FontAwesome";
    font-size: 11px;
    transform: rotate(0deg);
    content: url(https://api.iconify.design/ic:round-expand-more.svg?color=rgb%28255%2C255%2C255%29&height=20);
    background-image: -moz-linear-gradient();
    position: absolute;
    right: 10px;
    top: 0;
    display: block;
    transition: transform .2s;
    font-stretch: expanded;
    margin-top: 5px;
    background: #fbb034 !important
}

.Collapsible__trigger.is-open:after {
    top: -3px;
    transform: rotate(180deg)
}

.Collapsible__trigger.is-disabled {
    opacity: .5;
    background-color: grey
}

.CustomTriggerCSS {
    background-color: #f08080;
    transition: background-color .2s ease
}

.CustomTriggerCSS--open {
    background-color: #483d8b
}

.Collapsible__custom-sibling {
    padding: 2.5px;
    font-size: .9259259259259259vw;
    background-color: #cbb700;
    color: #000
}

.avisoDetalle-AvisoImp {
    font: .9739em var(--tufi-font-family);
    letter-spacing: 0;
    color: #6d6b6b;
    margin-top: 5px
}

.vineta-AvisoImp {
    color: #f7941e !important
}

.regionColor1-Step2 {
    background: #ededed
}

.regionColor2-Step2 {
    background: rgba(96, 96, 96, .2901960784313726)
}

.montoTotalRow-Step2 {
    background: #8dc63f 0 0 no-repeat padding-box;
    height: 100% !important;
    border-radius: 10px
}

.transactions-disclaimer {
    margin-left: 7px;
    font-size: 12px !important;
    font-family: var(--tufi-font-family) !important;
    color: #707070 !important
}

.debitoOrigenRegion-Step3.origin {
    border-radius: 10px 10px 0 0
}

.color1DatosCuenta-Step3 {
    background: hsla(0, 0%, 92.9%, .5)
}

.color2DatosCuenta-Step3 {
    background: #ededed
}

.regionMontoExitoso-Step3.destiny,
.regionMontoExitoso-Step3.origin {
    border-radius: 0 0 10px 10px
}

.textFontSize-Step3-image {
    font-size: 12px;
    font-family: var(--tufi-font-family)
}

.regionAtras-ctaDt {
    padding: 1.159332vh 3.150805vw 0
}

.nameRegionAtras-ctaDt {
    margin-left: 3.6603221083455346vw;
    font: 1.4641288433382138vw/2.12443095599393vh var(--tufi-font-family);
    font-weight: bolder;
    color: #8dc63f
}

.centrarVertical-ctaDt {
    display: flex;
    align-items: center
}

.gridContCuentas-ctaDt {
    margin: 1.462822vh 3.150805vw 2.503793626707132vh
}

.datosCuentaUser-ctaDt {
    background: rgba(141, 198, 63, .15) 0 0 no-repeat padding-box;
    border-radius: 10px
}

.css-1u4rkvg-control {
    border-radius: 0 0 10px 10px !important
}

.nameUser-ctaDt {
    font-size: 1em;
    font-family: var(--tufi-font-family);
    color: #606060;
    font-weight: bolder
}

.saldoDisponible-ctaDt {
    font-size: 1em;
    font-family: var(--tufi-font-family);
    color: #606060
}

.colMontoCuentaUser-ctaDt {
    margin-top: .6069802731411229vh;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end
}

.gsSimbol-ctaDt {
    font-size: 16px;
    font-family: var(--tufi-font-family);
    color: #606060;
    padding-right: 6px;
    font-weight: 700
}

.montoCuentaUser-ctaDt {
    font-size: 24px;
    font-family: var(--tufi-font-family);
    color: #707070;
    font-weight: bolder
}

.separadorCuentaUser-ctaDt {
    border: .07320644216691069vw solid #8dc63f;
    opacity: 1;
    margin-right: .6588579795021962vw;
    margin-top: 1.062215477996965vh;
    margin-left: 4.978038067349927vw
}

.colAConfirmar-ctaDt {
    margin-top: 1.062215477996965vh;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end
}

.saldoConfirmar-ctaDt {
    font: .8784773060029283vw var(--tufi-font-family);
    letter-spacing: 0;
    color: #606060;
    opacity: 1
}

.montoConfirmar-ctaDt {
    font: 1.171303074670571vw var(--tufi-font-family);
    letter-spacing: 0;
    color: #000;
    opacity: 1;
    margin-left: 1.171303074670571vw;
    margin-right: 1.4641288433382138vw
}

.detalleMov-ctaDt {
    background: #fff;
    border: 1px solid #ededed;
    border-radius: 10px
}

.col1detalleMov-ctaDt {
    margin-top: 2.731411229135053vh;
    margin-left: 22.224012vw;
    display: flex;
    align-items: center
}

.Extracto-ctaDt {
    font-size: 1em;
    font-weight: 600;
    font-family: var(--tufi-font-family);
    color: #606060
}

.headerTable-ctaDt {
    padding: .75em 1.4375em 0
}

.derechaAnt-ctaDt {
    width: .4375em;
    height: .75em
}

.mes-ctaDt {
    font: .75em;
    font-family: var(--tufi-font-family);
    color: #000
}

.IzqSig-ctaDt {
    transform: rotate(180deg);
    width: .4375em;
    height: .75em
}

.buttonBuscar-ctaDt {
    background: none
}

.iconBuscar-ctaDt {
    color: #8dc63f;
    width: 1.4375em;
    height: 1.4375em
}

.col2detalleMox-ctaDt {
    margin-top: 2.731411229135053vh;
    margin-left: 6.215373352855051vw
}

.detalleTitulo-ctaDt {
    font: .8784773060029283vw var(--tufi-font-family);
    color: #606060
}

.textTitulo-ctaDt,
.textTitulo-ctaDt-b {
    font-size: .75em;
    font-family: var(--tufi-font-family);
    color: #606060
}

.textTitulo-ctaDt-b {
    cursor: pointer
}

.textTitulo-ctaDt-emphasis {
    font-size: .75em;
    font-family: var(--tufi-font-family);
    color: #606060;
    cursor: pointer;
    font-weight: 700
}

.contentTitulo-ctaDt {
    padding: .625em 1.375em .5em
}

.contentTitulo-ctaDt,
.contentTitulo-ctaDtNew {
    background: #efefef;
    border-bottom: 2px solid #a0cf67
}

.contentTitulo-ctaDtNew {
    padding: .625em 0 .5em 1.375em
}

.movimientoTitulo-ctaDt {
    font: .8784773060029283vw var(--tufi-font-family);
    letter-spacing: 0;
    color: #606060;
    opacity: 1;
    margin-left: 30.657247vw
}

.SeparadorMovimiento-ctaDt {
    margin-top: 1.669195751138088vh;
    margin-bottom: 1.062215477996965vh;
    background: #8dc63f;
    opacity: 1;
    height: .29895366218236175vh;
    width: 48.243045387994144vw
}

.col3detalleMov-ctaDt {
    height: 56.14567526555387vh;
    overflow-y: auto
}

.marginBlockUi-ctaDt {
    margin-left: .7320644216691069vw;
    margin-right: .7320644216691069vw
}

.fechaDetalle-ctaDt {
    font-size: .5625em
}

.fechaDetalle-ctaDt,
.text-ctaDt {
    font-family: var(--tufi-font-family);
    color: #606060
}

.text-ctaDt {
    font-size: .625em
}

.montoDebit-ctaDt {
    font-size: .685em;
    font-family: var(--tufi-font-family);
    color: #000;
    font-weight: 700
}

.montoCredit-ctaDt {
    font-size: .685em;
    font: var(--tufi-font-family);
    font-weight: 700;
    color: #8dc63f
}

.Moneda-ctaDt {
    font-size: .685em;
    color: #606060
}

.Moneda-ctaDt,
.verDetalle-ctaDt {
    font-family: var(--tufi-font-family)
}

.verDetalle-ctaDt {
    font-size: .625em;
    color: #a0cf67;
    visibility: hidden;
    cursor: pointer
}

.paddingRowDetalle-ctaDtNew {
    padding: .375em 0 .375em 1.375em
}

.paddingRowDetalle-ctaDt {
    padding: .375em 1.375em
}

.boldVisible-ctaDt {
    font-weight: 700;
    visibility: visible
}

.resaltarHover:hover .fechaDetalle-ctaDt,
.resaltarHover:hover .Moneda-ctaDt,
.resaltarHover:hover .montoCredit-ctaDt,
.resaltarHover:hover .montoDebit-ctaDt,
.resaltarHover:hover .text-ctaDt {
    font-weight: 700
}

.resaltarHover:hover .verDetalle-ctaDt {
    visibility: visible
}

.buscadorContenedor-ctaDt {
    background: #8dc63f 0 0 no-repeat padding-box;
    padding: .07320644216691069vw
}

.flechabuscador-ctaDt {
    margin: 0 2.7375em
}

.flechabuscador-ctaDt,
.flechabuscador-ctaDt-ExtractoPdf {
    width: 1.0625em;
    height: .625em;
    -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    background: #8dc63f 0 0 no-repeat padding-box
}

.flechabuscador-ctaDt-ExtractoPdf {
    margin: 0 6.375em
}

.tituloBuscador-ctaDt {
    margin-top: 1.062215477996965vh;
    margin-left: 2.7452415812591506vw
}

.fechaTitleBusc-ctaDt,
.movimientoTitleBusc-ctaDt {
    font-size: .75em;
    font-family: var(--tufi-font-family);
    color: #fff
}

.contenedorBuscadorSelect-ctaDt {
    margin-left: 1.390922401171303vw;
    margin-top: .5159332321699545vh;
    display: flex
}

.gridBkgDetalle-ctaDt {
    background: rgba(141, 198, 63, .15) 0 0 no-repeat padding-box
}

.tituloDetallecollapsible-ctaDt {
    font-size: .75em;
    font-family: var(--tufi-font-family);
    color: #606060;
    margin-top: 1.5174506828528074vh;
    text-transform: uppercase
}

.datosServicioDetalle-ctaDT {
    font-size: .875em;
    font-family: var(--tufi-font-family);
    color: #000
}

.datosServicioDetalle-ctaDT-btn-download {
    margin-top: 17px;
    font-weight: 900;
    font-size: 11px
}

.datosServicioDetalle-ctaDT-btn-download-icon {
    margin-left: 9px;
    width: 24px;
    height: 24px
}

.buscarRegionBuscar-ctaDt {
    outline: transparent;
    background: hsla(0, 0%, 100%, .8);
    border: 1px solid #fff;
    width: 8.4375em;
    height: 3.2375em;
    font-size: .75em;
    font-family: var(--tufi-font-family);
    color: #8dc63f
}

button:focus {
    outline-width: 1px !important
}

.card-nuevo-container-cuenta {
    background: #fbb034 0 0 no-repeat padding-box;
    cursor: pointer;
    border-radius: 10px;
    margin-top: 25px;
    margin-bottom: 5px;
    font-weight: bolder !important
}

@media screen and (max-width:450px) {
    .centerResponsive-ctaDt {
        display: flex;
        justify-content: center
    }
}

.refund-payment-dropdown,
.refund-payment-dropdown-b {
    width: 100%;
    border-top: 1px solid #fff;
    padding: 16px;
    font-size: 14px
}

.refund-payment-dropdow-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    cursor: pointer
}

.refund-payment-dropdow-body {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: space-evenly
}

.refund-payment-item-start {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.refund-payment-item-middle {
    display: flex;
    justify-content: center;
    align-items: center
}

.refund-payment-item-end {
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.refund-payment-icon {
    height: 16px;
    width: 16px
}

#refund-payment-element-title {
    color: #606060;
    font-weight: 700
}

#refund-payment-element-subtitle {
    color: #606060;
    font-weight: 400
}

#refund-payment-element-refund-icon {
    margin-right: 5px
}

#refund-payment-element-sub-title {
    color: #939393;
    margin-right: 5px;
    font-weight: 400
}

.refund-payment-input {
    background-color: #fff;
    border-radius: 8px;
    height: 40px;
    width: 150px;
    padding-left: 15px;
    cursor: pointer
}

.refund-payment-text {
    color: green
}

.refund-payment-title {
    font-size: 10px;
    font-weight: 400;
    color: #939393
}

.refund-payment-content {
    font-size: 12px;
    font-weight: 700;
    color: #606060
}

.refund-payment-content-edit-btn {
    font-size: 12px;
    font-weight: 700;
    color: #a0cf67;
    cursor: pointer
}

.refund-payment-element-chevron-icon {
    width: 10px;
    height: 10px
}

#refund-payment-container-1 {
    width: 150px
}

#refund-payment-container-1,
#refund-payment-container-2 {
    cursor: pointer;
    padding-left: 15px;
    background-color: #fff;
    height: 40px;
    border-radius: 10px
}

#refund-payment-container-2 {
    display: flex;
    justify-content: flex-start;
    width: 10px
}

#refund-payment-currency {
    margin-left: 3px
}

#refund-payment-input-1 {
    padding-top: 3px
}

#refund-payment-input-2 {
    width: 360px;
    padding-top: 3px
}

#refund-payment-button {
    display: flex;
    align-items: center;
    background-color: #8dc63f
}

#refund-payment-button>* {
    margin-left: -8px;
    height: 10px;
    padding: 0
}

#refund-payment-button-b {
    display: flex;
    align-items: center;
    background-color: #707070
}

#refund-payment-button-b>* {
    margin-left: -8px;
    height: 10px;
    padding: 0
}

#refund-payment-resumme>* {
    margin-left: 40px;
    height: 10px;
    width: auto;
    padding: 0
}

.seccionCuenta1-StepPhone1 {
    height: 7.473841554559043vh;
    background: #eef7e2 0 0 no-repeat padding-box;
    opacity: 1;
    padding-left: 1.3117283950617284vw;
    padding-right: .6944444444444444vw;
    margin-bottom: 1.4947683109118086vh
}

.verticalCenter-StepPhone1 {
    display: flex;
    align-items: center
}

.rowSeccionCuenta-StepPhone1 {
    width: 100%
}

.colSeccionCuentaRight-StepPhone1 {
    display: flex;
    justify-content: flex-end
}

.cuentaText-StepPhone1 {
    font: 18px var(--tufi-font-family);
    color: #8dc63f
}

.marginTopOtrosBank-StepPhone1 {
    margin-top: 4.484304932735426vh
}

.modalExternalTransfers-StepPhone1 {
    width: 100%
}

.HeaderModalTransfers-StepPhone1 {
    height: 11.210762331838565vh;
    width: 100%;
    background: #f7941e 0 0 no-repeat padding-box;
    padding-bottom: 1.4947683109118086vh;
    padding-left: 2.0833333333333335vw
}

.colModalTransfers-StepPhone1 {
    display: flex;
    align-items: flex-end
}

.textAvisModalTansfers-StepPhone1 {
    font: 700 20px var(--tufi-font-family);
    color: #fff
}

.BodyModalTransfers-StepPhone1 {
    background: #fff;
    padding-left: 2.0833333333333335vw;
    padding-right: 2.0833333333333335vw;
    font: 12px var(--tufi-font-family)
}

.divPModalTransfers-StepPhone1 {
    padding: 0 .7716049382716049vw
}

.AceptarModal-button-StepPhone1 {
    --background: #f7941e 0% 0% no-repeat padding-box;
    width: 135px;
    height: 39px;
    --box-shadow: none !important;
    --border-radius: 10px 10px !important;
    font: 12px var(--tufi-font-family);
    color: #fff
}

.divCenterModalButton-StepPhone1,
.divContainerModal-StepPhone1 {
    display: flex;
    justify-content: center
}

.divContainerModal-StepPhone1 {
    height: 100%;
    align-items: center
}

.buttonRow-StepPhone1 {
    width: 100%;
    margin-bottom: 2.242152466367713vh
}

.rowSeccMensaje-StepPhone1 {
    margin-top: 2.9895366218236172vh;
    margin-bottom: 1.4947683109118086vh
}

.chevron-SelectCuentaPhone {
    width: 20px;
    height: 8px
}

.regionColor1-Step2Phone {
    background: hsla(0, 0%, 92.9%, .5)
}

.regionColor2-Step2Phone {
    background: #ededed
}

.montoTotalRow-Step2Phone {
    background: #8dc63f 0 0 no-repeat padding-box;
    height: 100% !important
}

.textCuentaTitle-Step2Phone {
    font: 12px var(--tufi-font-family);
    color: #606060
}

.textDataCuenta-Step2Phone {
    font: 14px var(--tufi-font-family);
    color: #000
}

.MontoEnviarTitle-Step2Phone {
    font: 12px var(--tufi-font-family);
    color: #fff
}

.MensajeTitle-Step2Phone {
    font: 12px var(--tufi-font-family);
    color: #606060
}

.MontoDataEnviar-Step2Phone {
    font: 46px var(--tufi-font-family);
    color: #fff;
    margin-right: 5px
}

.paddingCuenta-Step2Phone {
    padding: 14px 18px
}

.debitoOrigenRegion-Step3 {
    width: 25.462962962962962vw;
    height: 21.375186846038865vh
}

.color1DatosCuenta-Step3 {
    background: #ededed 0 0 no-repeat padding-box
}

.color2DatosCuenta-Step3 {
    background: rgba(96, 96, 96, .2901960784313726) 0 0 no-repeat padding-box
}

.debitoDestinoRegion-Step3 {
    border-radius: 10px
}

.debitoDestinoRegion-Step3,
.debitoDestinoRegion-Step3-multi {
    width: 25.462962962962962vw;
    height: 100%
}

.regionMontoExitoso-Step3 {
    width: 25.462962962962962vw;
    height: 16.442451420029894vh
}

.textOperacionExitosa-Step3 {
    font: 14px var(--tufi-font-family);
    color: #606060;
    margin-left: 15px
}

.logoExito-Step3 {
    width: 37px;
    height: 40px
}

.step3Box1-Step3 {
    border: 1px solid #dadada;
    padding: 27px 0
}

.paddingCuenta-Step3 {
    padding: 14px 18px
}

.textGenGreen-Step3 {
    font: 12px var(--tufi-font-family);
    color: #8dc63f
}

.textDataCuenta-Step3 {
    font: 14px var(--tufi-font-family);
    color: #000
}

.textMontoGreen-Step3 {
    font: 52px var(--tufi-font-family);
    color: #8dc63f
}

.buttonStep3Box3-Step3 {
    height: 21.375186846038865vh;
    margin: 0;
    width: 100%;
    font: 12px var(--tufi-font-family);
    color: #fff;
    cursor: pointer
}

.step3Box2-Step3 {
    background: #dadada 0 0 no-repeat padding-box
}

.regionSMSExitoso-Step3 {
    border: 1px solid #dadada;
    padding: 24px 0
}

.textOperacionExitosa2-Step3 {
    font: 14px var(--tufi-font-family);
    color: #606060
}

.button-group {
    display: flex;
    text-align: center;
    justify-content: center
}

.button-toolbar-home {
    font-family: var(--tufi-font-family) !important;
    font-size: 10px !important;
    color: #707070;
    background: #efefef;
    border-radius: .38580246913580246vw;
    height: 3.3227848101265822vh !important;
    text-transform: var(--tufi-font-text-transform-uppercase);
    letter-spacing: var(--tufi-font-character-spacing-0-33);
    font-weight: 700 !important;
    padding: 5px
}

.borde-toolbar-home {
    border-right: 1px solid #8dc63f
}

.button-toolbar-home:hover,
.buttonSelected-toolbar-home {
    font-family: var(--tufi-font-family) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #fff;
    background: #8dc63f;
    height: 3.3227848101265822vh !important;
    padding: 5px
}

.buttonSelected-toolbar-home {
    border-radius: .38580246913580246vw;
    letter-spacing: var(--tufi-font-character-spacing-0-33);
    text-transform: var(--tufi-font-text-transform-uppercase)
}

.pipe-toolbar-home {
    font-size: 10px;
    text-align: left;
    color: #8dc63f;
    letter-spacing: 0;
    opacity: 1;
    background: #8dc63f;
    width: 1px;
    height: 13px
}

.padding-toolbarHome {
    padding: 2.9895366218236172vh 8.487654320987655vw 0
}

.card-nuevo-container {
    background: #fbb034 0 0 no-repeat padding-box;
    cursor: pointer;
    border-radius: 10px
}

.circulo {
    width: 30px;
    height: 30px;
    align-items: center;
    display: flex;
    justify-content: center;
    border: 2px solid #fff;
    opacity: 1;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%
}

.mas-cardcontainer {
    color: #fff;
    font-size: 20px
}

.row1-cardcontainer {
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 5px
}

.row2-cardcontainer {
    height: 35%;
    display: flex;
    justify-content: center;
    align-items: flex-start
}

.solicitar-cardcontainer {
    color: #fff;
    font-size: 14px;
    font-family: var(--tufi-font-family) !important;
    margin-top: 0;
    letter-spacing: .33px !important;
    font-weight: bolder
}

.padding-cardContainer {
    padding: 2.391629297458894vh 3.150805vw 0
}

.swiper-wrapper {
    width: 90vw !important
}

.card-vacio-container {
    background: #ededed 0 0 no-repeat padding-box;
    width: 100%;
    height: 100%;
    float: left;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px
}

.vacioProducto-cardContainer {
    font-size: .875em;
    font-family: var(--tufi-font-family)
}

.carousel-cardcontainer {
    border-radius: 10px;
    overflow: hidden
}

.carousel-cardcontainer .carousel .control-dots {
    position: relative;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: auto !important
}

.carousel-cardcontainer .carousel .control-dots .dot {
    outline: none !important
}

.carousel-cardcontainer .carousel .slider-wrapper {
    border-radius: 10px !important
}

.divIonSlide {
    width: 100%;
    margin-bottom: 27px
}

.swiper-pagination-bullet {
    opacity: 1 !important
}

.cnb-info-container {
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    margin-left: -15px
}

#cnb-info-container-link {
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer
}

.renew-loan-card {
    background: #ededed 0 0 no-repeat padding-box;
    width: 100%;
    height: 100%;
    float: left;
    border-radius: 10px;
    overflow: hidden
}

.row2-loan-renew {
    font: 1.4815em;
    font-family: var(--tufi-font-family);
    color: #863cff;
    padding: .5em .9375em;
    height: 70%;
    display: flex;
    align-items: center
}

.renew-loan-card-lef-card {
    font-size: .9375em;
    font-family: var(--tufi-font-family)
}

.renew-loan-card-title {
    font-size: 16px;
    font-weight: 900
}

.renew-loan-card-sub-title {
    font-size: 14px;
    font-weight: 600
}

.renew-loan-card-img {
    margin-top: -30px
}

.renew-loan-card-button {
    width: 100%;
    background-color: #863cff;
    height: auto;
    padding: 5px
}

.promo-banner {
    font-size: 1.7746913580246915vw;
    color: #603913;
    opacity: 1;
    font: 2.314814814814815vw/3.587443946188341vh var(--tufi-font-family);
    letter-spacing: 0;
    border-bottom: .5px solid hsla(0, 0%, 43.9%, .5);
    padding-bottom: 3.5px
}

.borrar-espacio {
    padding: 0;
    margin: 0
}

.padding-banner {
    padding: 12px 3.150805vw 0
}

.padding-foto {
    border-bottom: .5px solid #707070;
    padding-bottom: 3.5px;
    opacity: .5
}

.colapsePromo .Collapsible {
    width: 100%;
    height: 100%
}

.colapsePromo .Collapsible .Collapsible__trigger {
    border: none;
    padding: 0;
    border-radius: 0
}

.colapsePromo .Collapsible__contentInner {
    padding: .188em 1.975em;
    border: 0;
    border-radius: 0;
    border-top: 0;
    margin-bottom: 0
}

.colapsePromo .carousel .slide {
    background-color: #fff
}

.chevronBuscar-selectBuscador {
    width: 1.2445095168374818vw;
    height: 1.3657056145675266vh;
    min-width: 14px;
    min-height: 7px
}

.item-helpme {
    --background: #ededed 0% 0% no-repeat padding-box;
    width: 330px
}

.textarea-message {
    --background: #ededed 0% 0% no-repeat;
    border-radius: 10px
}

.focus-helpme {
    --background: #fff 0% 0% no-repeat padding-box;
    --border-width: 1px;
    --border-color: #ededed;
    width: 330px
}

.labelinput-helpme {
    font-family: var(--tufi-font-family);
    color: #606060 !important
}

.labelinput-helpme,
.labelinputError-helpme {
    text-align: left;
    font-family: var(--tufi-font-family) !important;
    font-size: 16px !important;
    letter-spacing: 0 !important;
    opacity: 1 !important
}

.labelinputError-helpme {
    color: #fff !important
}

.input-helpme {
    text-align: left;
    font-family: var(--tufi-font-family) !important;
    font-size: 16px !important;
    letter-spacing: 0;
    color: #000;
    opacity: 1
}

.divline-helpme {
    background: #8dc63f;
    height: 2px;
    width: 330px
}

.contactNumber {
    background: #f7941e 0 0 no-repeat padding-box;
    opacity: 1;
    padding: 10px;
    border-radius: 10px;
    color: #efefef;
    margin-top: 5px
}

.divcontactNumber {
    border-bottom: 1px solid #fff;
    padding: 10px 0
}

.titleTextContactNumber {
    font: 12px var(--tufi-font-family);
    font-weight: bolder
}

.textContactNumber,
.titleTextContactNumber {
    letter-spacing: 0;
    color: #fff;
    text-transform: uppercase;
    text-align: center
}

.textContactNumber {
    font: 25px var(--tufi-font-family);
    font-weight: bolder
}

.container-helpMe {
    opacity: .6
}

.container-helpMe,
.container-helpMe.select {
    background: #a0cf67 0 0 no-repeat padding-box;
    cursor: pointer;
    border-radius: 10px;
    margin: 0 5px 10px !important
}

.container-helpMe.select {
    opacity: 1
}

.detalleSucursales {
    background: #fff 0 0 no-repeat padding-box;
    border: .0878em solid #ededed;
    opacity: 1;
    margin: 0 10px;
    border-radius: 10px
}

.dato-sucu {
    font-size: .75rem;
    color: #606060
}

.negritas {
    font-weight: bolder
}

.contDiv {
    padding-top: 10px
}

.startitem {
    display: flex;
    justify-content: start;
    align-items: center
}

.ubicacionIcono {
    background-color: #fbb034;
    --background-color: #fbb034;
    border-radius: 100%;
    color: #fff;
    padding: 3px
}

.chevronBuscar-selectBuscador {
    width: 1.0625em;
    height: .5625em
}

.buttonSelectFecha {
    background: #8dc63f;
    width: 9.75em;
    height: 2.4375em;
    border: 1px solid #fff !important;
    font-family: 1em;
    font-size: var(--tufi-font-family);
    text-align: left;
    color: #fff;
    outline: transparent;
    display: flex;
    align-items: center
}

.chevronRegion-selectfecha {
    width: 100%;
    text-align: end
}

.chevronSize-SelectFecha {
    width: 1.0625em;
    height: .5625em
}

.elemntCond-DisbursementStep1 {
    background: #efefef;
    border-radius: 10px;
    padding: .625em .75em
}

.tituloCond-DisbursementStep1 {
    font-size: 1em;
    line-height: 1.1875em;
    font-family: var(--tufi-font-family);
    color: #707070;
    margin-left: .75em
}

.textDetalles-DisbursementStep1 {
    line-height: 1.375em;
    font-weight: 600
}

.textDetalles-DisbursementStep1,
.textSeg-DisbursementStep1 {
    font-size: .8125em;
    font-family: var(--tufi-font-family);
    color: #707070
}

.textSeg-DisbursementStep1 {
    line-height: 1.5625em
}

.textCondiciones-DisbursementStep1 {
    font-size: .8125em;
    line-height: 1.25em;
    font-family: var(--tufi-font-family);
    color: #707070
}

.contDes-DisbursementStep1 {
    background: #a0cf67;
    padding: 1.0625em 1.1725em;
    border-radius: .625em
}

.textDes-DisbursementStep1 {
    font-size: 1em;
    line-height: 1.1875em;
    font-family: var(--tufi-font-family);
    margin-left: .25em;
    color: #fff;
    font-weight: bolder
}

.lineaDes-DisbursementStep1 {
    height: 1px;
    width: 100%;
    margin-top: .8438em;
    background: #fff
}

.monedaDes-DisbursementStep1 {
    font-size: .5625em;
    font-family: var(--tufi-font-family);
    margin-right: .6875em;
    color: #fff
}

.montoLiquid-DisbursementStep1 {
    font-size: 2.25em;
    font-family: var(--tufi-font-family);
    color: #fff
}

.CuentaDepositar-DisbursementStep1 {
    line-height: 1.1875em
}

.CuentaDepositar-DisbursementStep1,
.nombreUserCD-DisbursementStep1 {
    font-size: 1em;
    font-family: var(--tufi-font-family);
    color: #606060
}

.paddingContCD-DisbursementStep1 {
    padding: 1.0625em 1.1725em 0
}

.colCuentaDpCD-DisbursementStep1 {
    padding-bottom: .8438em;
    padding-left: .25em;
    border-bottom: 2px solid #a0cf67
}

.titleCuenta-DbFinal {
    font: .75em var(--tufi-font-family);
    color: #606060
}

.dataCuenta-DbFinal {
    font: .875em var(--tufi-font-family);
    color: #000
}

.colCondicionPrestamo-DbFinal {
    display: flex;
    justify-content: flex-start
}

.regionColor1-DbFinal {
    background: hsla(0, 0%, 92.9%, .5)
}

.regionColor2-DbFinal {
    background: #ededed
}

.montoTotalRow-DbFinal {
    background: #8dc63f 0 0 no-repeat padding-box
}

.divContentCondiciones-DbFinal {
    width: 100%
}

.recordatorioRegion-TransactionalKey {
    background: #f7941e 0 0 no-repeat padding-box;
    opacity: 1;
    padding: 13px;
    border-radius: 10px;
    margin: 0 auto;
    letter-spacing: var(--tufi-font-character-spacing-0-33);
    line-height: normal
}

.textRecordatorio-TransactionalKey {
    font: 12px var(--tufi-font-family);
    letter-spacing: var(--tufi-font-character-spacing-0-33);
    color: #fff;
    font-weight: bolder
}

.divrecordatorio-TransactionalKey {
    padding-left: 2px;
    padding-bottom: 6px;
    letter-spacing: var(--tufi-font-character-spacing-0-33);
    box-sizing: initial;
    width: 100%
}

.divrecordatorio-TransactionalKey-info {
    border-top: 1px solid #fff
}

.divrecordatorio-TransactionalKey .textRecordatorio-TransactionalKey {
    font-weight: bolder
}

.avisoImportanteRegion-TransactionalKey {
    background: #a0cf67 0 0 no-repeat padding-box;
    opacity: 1;
    padding: 13px;
    border-radius: 10px;
    margin: 0 auto;
    letter-spacing: var(--tufi-font-character-spacing-0-33)
}

.textavisoImportante-TransactionalKey {
    font: 12px var(--tufi-font-family);
    line-height: 15pt;
    letter-spacing: var(--tufi-font-character-spacing-0-33);
    color: #fff;
    font-weight: bolder
}

.avisoImportante-TransactionalKey {
    padding-left: 2px;
    padding-bottom: 6px;
    letter-spacing: var(--tufi-font-character-spacing-0-33);
    box-sizing: initial;
    width: 100%
}

.divavisoImportante-TransactionalKey-info {
    border-top: 1px solid #fff;
    line-height: normal
}

.avisoImportante-TransactionalKey .textavisoImportante-TransactionalKey {
    font-weight: bolder
}

.divInput-TransactionalKey {
    width: 100% !important;
    height: 39px
}

.endVerticalHorizontal {
    align-items: flex-end
}

.centerHorizontal,
.centerVerticalHorizontal,
.endVerticalHorizontal {
    display: flex;
    justify-content: center
}

.centerVerticalHorizontal {
    align-items: center;
    margin-left: auto;
    margin-right: auto
}

.rowMarginTop-TransactionalKey {
    margin-top: 20px
}

.avisoSms-TransactionalKey {
    font: 14px var(--tufi-font-family);
    letter-spacing: 0;
    color: #606060
}

.operacionExistosa-TransactionalKey {
    height: 143px;
    border: 1px solid #dadada;
    opacity: 1;
    border-radius: 10px
}

.textDetailLoan-PayLoan {
    font-size: .8em;
    font-family: var(--tufi-font-family);
    color: #606060
}

.textDetailLoan-PayLoan-b {
    font-weight: 600
}

.textDetailLoan-PayLoan-b,
.textDetailLoan-PayLoan-c {
    font-size: .8em;
    font-family: var(--tufi-font-family);
    color: #707070;
    line-height: 10.34px
}

.textDetailLoan-PayLoan-c {
    font-weight: 500
}

.detailLoan-PayLoan {
    background: #efefef 0 0 no-repeat padding-box;
    padding: 10px;
    border-bottom: 5px solid #8dc63f;
    border-radius: 10px
}

.marginBottom-PayLoan {
    margin-bottom: 5px
}

.paddingLR-PayLoan {
    padding: 0 10px
}

.paddingLR-PayLoan-b {
    padding: 0 10px;
    color: #8dc63f;
    font-size: 14px;
    font-weight: 600;
    line-height: 13.79px
}

.loanSummaryHead {
    margin-bottom: 8px;
    margin-top: 5px;
    cursor: pointer
}

.borderDetail-PayLoan {
    border-left: 3px solid #8dc63f;
    padding: 0 10px;
    height: 100%
}

@media (max-width:991px) {
    .borderDetail-PayLoan {
        border-left: none
    }
}

.borderDetail-PayLoan-b {
    padding: 0 10px;
    height: 100%;
    display: flex;
    align-content: center;
    justify-content: flex-end
}

.borderDetail-PayLoan-b>* {
    height: 13px;
    width: 13px
}

.boxExtruct-PayLoan {
    background: #ededed 0 0 no-repeat padding-box;
    margin: 0 10px 10px
}

.main-header-loan-detail {
    height: 60px;
    display: flex;
    align-content: center;
    font-size: 10px;
    padding-right: 3%;
    padding-left: 3%
}

.main-header-loan-detail>:first-child {
    display: flex;
    align-content: center;
    justify-content: flex-start;
    width: 50%;
    font-size: 16px;
    font-weight: 600;
    color: #606060
}

.main-header-loan-detail>:last-child {
    display: flex;
    align-content: center;
    justify-content: flex-end;
    width: 50%
}

.main-header-loan-detail-download-button {
    color: #8dc63f;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-content: center;
    text-decoration: underline
}

.main-header-loan-detail-download-icon {
    height: 15px;
    width: 15px;
    margin-left: 5px
}

.boxExtruct-PayCard-Account {
    background: #ededed 0 0 no-repeat padding-box !important
}

.boxExtruct-PayCard,
.boxExtruct-PayCard-Account {
    margin: 0 10px;
    height: 100%;
    border-radius: 10px;
    padding-bottom: 20px
}

.boxExtruct-PayCard {
    background: #8dc63f 0 0 no-repeat padding-box !important
}

.montoMensajeRow1-PayCard {
    padding: 20px
}

.flexEndVertical-PayCard {
    padding-top: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center
}

.centerXY-PayCard {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important
}

.data-card-new {
    background: #ededed 0 0 no-repeat padding-box;
    opacity: 1;
    padding: 10px;
    border-radius: 10px;
    color: #efefef;
    display: inline-block;
    width: -webkit-fill-available
}

.textRecordatorio-data-card-new {
    font: 1rem var(--tufi-font-family);
    letter-spacing: 0;
    color: #606060;
    font-weight: bolder
}

.textRecordatorio-data-card-new-info {
    font: .6875rem var(--tufi-font-family);
    letter-spacing: 0;
    color: #606060
}

.divrecordatorio-data-card-new {
    padding-left: 10px;
    box-sizing: initial
}

.divrecordatorio-data-card-new-info {
    border-bottom: 2px solid #fbb034;
    margin-bottom: 8px
}

.divrecordatorio-data-debt-new-info {
    border-bottom: 2px solid #a0cf67
}

.divCard-data {
    border-bottom: 1px solid #707070;
    border-radius: 0 !important
}

.textTarjetaData-Card {
    font: .875em var(--tufi-font-family);
    letter-spacing: 0;
    color: #606060;
    opacity: 1;
    margin: 5px 0
}

.cardShadow {
    background-color: #fffdfd;
    border-radius: 5px;
    font-weight: bolder;
    height: 1.5625em
}

.inlineDataCard {
    display: inline-block;
    font-size: .7813em;
    font-weight: bolder
}

.marginTitle {
    margin: 3px
}

.verticalAlingData,
.verticalAlingDeuda {
    align-content: center;
    height: 25px
}

.cardData {
    color: #000;
    border-radius: 5px;
    height: 17px;
    font-size: 15px;
    align-items: flex-end
}

.noMargin {
    margin-top: 0;
    margin-bottom: 0
}

.montoCardUser-Card {
    font: 2.1875em var(--tufi-font-family);
    letter-spacing: 0;
    color: #000;
    align-items: end;
    height: 1.3125em
}

.saldoConfirmar-card {
    font: .75em var(--tufi-font-family);
    font-weight: bolder;
    color: #606060;
    text-align: end;
    margin-right: 15px
}

.datosCardUser-cardDt {
    background: rgba(160, 207, 103, .2901960784313726) no-repeat padding-box;
    border-radius: 10px
}

.card-nuevo-container-card {
    background: #fbb034 0 0 no-repeat padding-box;
    cursor: pointer;
    border-radius: 10px;
    margin-top: 25px;
    margin-bottom: 5px
}

.fotocontainer-Profile {
    float: left;
    justify-content: center;
    width: 8.52017937219731vh;
    height: 8.52017937219731vh;
    opacity: 1;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: .625rem
}

.marginBottom-Profile {
    margin-bottom: 20px
}

.textoFoto-Profile {
    font: 8px var(--tufi-font-family);
    float: left
}

.centerDiv-Profile {
    display: flex;
    justify-content: center
}

.divsizeFoto-Profile {
    width: 100%
}

.extractoCorreo-Profile {
    background: rgba(141, 198, 63, .15) 0 0 no-repeat padding-box;
    border-radius: 10px
}

.buttonModificar-Profile {
    color: #8dc63f;
    font-size: 20px
}

.titleExtracto-Profile {
    text-align: center;
    font: 700 12px/14px var(--tufi-font-family);
    letter-spacing: 0;
    color: #fbb034;
    opacity: 1
}

.datosExtracto-Profile {
    font: 12px/14px var(--tufi-font-family);
    letter-spacing: 0;
    color: #6d6b6b;
    margin-top: 5px
}

.centrarContenidoXY-Profile {
    display: flex;
    justify-content: center;
    align-items: center
}

.vineta-profile {
    font: 12px/14px var(--tufi-font-family);
    letter-spacing: 0;
    color: #8dc63f
}

.fileContainer-cp {
    padding: 0 !important;
    margin: 0 !important;
    height: 79px;
    border-radius: 0 !important;
    width: 50px;
    background: #fff 0 0 no-repeat padding-box !important
}

.fileContainer-cp .chooseFileButton-cp {
    padding: 28px 23px !important;
    width: 100% !important;
    background-color: #fff !important
}

.botonImagen-User {
    background-image: url(/tufi-web/static/media/imagen_cargar.e3921549.svg) !important;
    background-repeat: no-repeat !important;
    background-position: 50% !important;
    width: 65px;
    height: 57px;
    padding: 0 !important;
    background-color: #fff !important;
    position: absolute !important
}

.button-upload-photo-perfile {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important
}

.img-upload-photo-perfile {
    border: none;
    margin-right: 6p;
    vertical-align: "top";
    height: 80px;
    width: 80px;
    background: rgba(141, 198, 63, .7);
    border-radius: 50%;
    overflow: hidden
}

.divCamera-upload-photo-perfile {
    background: #fff;
    bottom: 0;
    position: absolute;
    right: 0;
    overflow: visible;
    height: 32px;
    width: 32px;
    border-radius: 50%
}

.img-camera-upload-photo-perfile {
    margin: 0 2.5px 3px;
    outline: 0;
    position: absolute;
    right: 0;
    height: 26px;
    width: 26px;
    bottom: 0
}

.ImageUploader-upload-photo-perfile {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    height: 86px;
    width: 86px
}

.modalCrop-customer {
    position: absolute;
    width: 43vw;
    height: 88vh;
    background: #fff;
    overflow: auto;
    border-radius: 10px;
    outline: none
}

.ReactModal__Overlay--after-open {
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, .6) !important
}

@media screen and (max-width:700px) {
    .modalCrop-customer {
        position: absolute;
        width: 100% !important;
        height: 100% !important;
        background: #fff;
        overflow: auto;
        border-radius: 0 !important;
        outline: none
    }
}

.extractoIcono {
    background-color: #fbb034;
    --background-color: #fbb034;
    border-radius: 100%;
    color: #fff;
    padding: 8px;
    height: 10px;
    width: 10px
}

.crearusuario-InputTufi {
    text-align: left;
    font-family: var(--tufi-font-family) !important;
    font-size: 20px;
    letter-spacing: 0;
    color: #8dc63f;
    opacity: 1
}

.labelinputError-InputTufi {
    color: #fff !important
}

.labelinput-InputTufi,
.labelinputError-InputTufi {
    text-align: left;
    font-family: var(--tufi-font-family) !important;
    font-size: 16px !important;
    letter-spacing: 0 !important;
    opacity: 1 !important
}

.labelinput-InputTufi {
    color: #606060 !important
}

.input-InputTufi {
    text-align: left;
    font-family: var(--tufi-font-family) !important;
    font-size: 16px !important;
    letter-spacing: 0;
    color: #000;
    opacity: 1
}

.focus-InputTufi {
    --background: #fff 0% 0% no-repeat padding-box;
    --border-width: 1px !important;
    --border-color: #ededed;
    opacity: 1;
    --border-radius: 10px;
    border-radius: 10px
}

.item-InputTufi {
    --background: #ededed 0% 0% no-repeat padding-box;
    opacity: 1;
    --border-radius: 10px !important;
    border-radius: 10px
}

.error-InputTufi {
    --background: #f7941e 0% 0% no-repeat padding-box;
    --border-width: 1px;
    --border-color: #ededed
}

.itemErrorMessage-InputTufi {
    align-items: center;
    display: flex !important;
    justify-content: center
}

.error-InputTufi {
    font-family: var(--tufi-font-family) !important;
    font-size: 12px !important;
    letter-spacing: 0;
    color: #f7941e !important;
    opacity: 1;
    border-radius: 10px
}

.marginBottom-InputTufi {
    margin-bottom: 20px
}

.divline-InputTufi {
    background: #8dc63f;
    width: 100%;
    height: 2px
}

.divInput-SolicitudCaja {
    width: 330px
}

.anchoDiv-SolicitudCaja {
    height: 100%
}

.padding-SolicitudCaja {
    padding-left: 23.14814814814815vw
}

.divInputAnoMeses-SolicitudCaja {
    width: 144px
}

.divMarginLeft-SolicitudCaja {
    margin-left: 10px
}

.marginTopCaja-SolicitudCaja {
    margin-top: 20px
}

.divInput2-SolicitudCaja {
    width: 660px
}

.divAntiguedad-SolicitudCaja {
    background: #fff 0 0 no-repeat padding-box;
    border: 1px solid #ededed;
    -webkit-padding-end: 16px;
    padding-inline-end: 16px;
    -webkit-padding-start: 16px;
    padding-inline-start: 16px
}

.subTitle-PayServices {
    font-size: 1.757em;
    font-family: var(--tufi-font-family);
    font-weight: bolder
}

@media screen and (max-width:500px) {
    .subTitle-PayServices {
        font-size: 1.457em
    }
}

.boxSize-PayServices {
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 10px;
    padding: 10px !important;
    font: 15px/14px var(--tufi-font-family) !important
}

.colorBox0-Payservices {
    background: #a0cf67
}

.colorBox1-Payservices,
.colorBox2-Payservices {
    background: #a0cf67;
    opacity: .5
}

.colorBox4-Payservices {
    background-color: #f7941e
}

.marginTop-PayServices {
    margin: 10px 30px 0
}

.gridSelectPrestamo-PrestamosDetalle {
    padding: 14px 15px 0
}

.detalleMov-PrestamosDetalle {
    background: #fff 0 0 no-repeat padding-box;
    opacity: 1;
    border-radius: .625em
}

.datosCuentaPrestamo-PrestamosDetalle {
    background: rgba(141, 198, 63, .15) 0 0 no-repeat padding-box;
    border-radius: .625em;
    letter-spacing: .33px !important
}

.nameUser-PrestamosDetalle {
    font-size: 1em;
    font-family: var(--tufi-font-family);
    color: #606060;
    font-weight: bolder
}

.totalPrestamo-PrestamosDetalle {
    font-size: .75em;
    font-family: var(--tufi-font-family);
    color: #606060
}

.colMontoCuentaUser-PrestamosDetalle {
    margin-top: .3684em;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end
}

.gsSimbol-PrestamosDetalle {
    font-size: .75em;
    font-family: var(--tufi-font-family);
    color: #606060;
    padding-right: .625em
}

.montoCuentaUser-PrestamosDetalle {
    font-size: 2em;
    font-family: var(--tufi-font-family);
    color: #000
}

.PagarPrestamos-PrestamosDetalle {
    color: #fff;
    font-size: .6875em;
    margin-top: 0;
    font: normal normal 700 var(--tufi-font-family) !important;
    letter-spacing: .33px !important;
    font-weight: bolder
}

.detalleTitulo-PrestamosDetalle {
    font-size: .75em;
    font-family: var(--tufi-font-family);
    letter-spacing: 0;
    color: #606060;
    opacity: 1
}

.card-nuevo-PrestamosDetalle {
    background: #fbb034 0 0 no-repeat padding-box;
    cursor: pointer;
    border-radius: 10px;
    margin: 0;
    padding: .875em;
    font: normal normal 700 var(--tufi-font-family) !important;
    letter-spacing: .33px !important;
    font-weight: bolder
}

.gridContCuentas-ctaDtPhone {
    margin: 5.462822458270106vh 9.150805270863836vw 2.503793626707132vh
}

.coldatosCuentaUser-ctaDtPhone {
    margin-top: 1.125em;
    margin-left: 1.25em
}

.saldoDisponible-ctaDtPhone {
    font: .75em var(--tufi-font-family);
    color: #606060
}

.colMontoCuentaUser-ctaDtPhone {
    margin-top: .25em;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end
}

.separadorCuentaUser-ctaDtPhone {
    border: .0625em solid #8dc63f;
    margin-right: .5625em;
    margin-top: .4375em;
    margin-left: 4.25em
}

.colAConfirmar-ctaDtPhone {
    margin-top: .4375em;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end
}

.detalleMov-ctaDtPhone {
    background: #fff;
    border: .0625em solid #ededed
}

.Extracto-ctaDtPhone {
    font: .75em var(--tufi-font-family);
    color: #606060
}

.mes-ctaDtPhone {
    font: 1em var(--tufi-font-family);
    color: #000
}

.iconBuscar-ctaDtPhone {
    color: #8dc63f
}

.detMovTitulo-ctaDtPhone {
    font: .75em var(--tufi-font-family);
    color: #606060
}

.SeparadorMovimiento-ctaDtPhone {
    margin-top: 1.669195751138088vh;
    margin-bottom: 1.062215477996965vh;
    background: #8dc63f;
    opacity: 1;
    height: .125em;
    width: 100%
}

.text-ctaDtPhone {
    font: .875em var(--tufi-font-family);
    color: #000
}

.fechaMonedaDetalle-ctaDtPhone {
    font: .75em var(--tufi-font-family);
    color: #606060
}

.verDetalle-ctaDtPhone {
    font: .625em var(--tufi-font-family);
    color: #a0cf67
}

.montoDebit-ctaDtPhone {
    font: .875em var(--tufi-font-family);
    color: #f7941e
}

.centrarItem {
    display: flex;
    justify-content: center;
    align-items: center
}

.col3detalleMov-ctaDtPhone {
    margin-top: .7587253414264037vh;
    height: 56.14567526555387vh;
    overflow-y: auto
}

.marginBlockUi-ctaDtPhone {
    margin-left: .7320644216691069vw;
    margin-right: .7320644216691069vw
}

.montoCredit-ctaDtPhone {
    font: .875em var(--tufi-font-family);
    color: #8dc63f
}

.paddingRowDetalle-ctaDtPhone {
    padding-left: .5856515373352855vw;
    padding-right: .5856515373352855vw
}

.boldVisible-ctaDtPhone {
    font-weight: 700;
    visibility: visible
}

.buscadorContenedor-ctaDtPhone {
    background: #8dc63f 0 0 no-repeat padding-box;
    padding: .07320644216691069vw
}

.flechabuscador-ctaDtPhone {
    width: 1.25em;
    height: .875em;
    -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    background: #8dc63f 0 0 no-repeat padding-box
}

.movimientoTitleBusc-ctaDtPhone {
    font: .75em var(--tufi-font-family);
    color: #fff;
    margin-bottom: .25em
}

.contenedorBuscadorSelect-ctaDtPhone {
    padding: .3125em 1.1875em
}

.alejandro2 {
    display: none
}

.gridBkgDetalle-ctaDtPhone {
    background: rgba(141, 198, 63, .15) 0 0 no-repeat padding-box
}

.separadorDetalle-cta-Dt {
    width: 100%;
    height: .15174506828528073vh;
    background: #8dc63f
}

.tituloDetallecollapsible-ctaDtPhone {
    font: .75em var(--tufi-font-family);
    color: #606060;
    margin-top: 1.5174506828528074vh
}

.datosServicioDetalle-ctaDTPhone {
    font: .875em var(--tufi-font-family);
    letter-spacing: 0;
    color: #000;
    opacity: 1
}

.descargarComprobanteDetalle-ctaDt {
    margin-top: 1.5174506828528074vh;
    margin-left: 32.94289897510981vw
}

.DivSelects-ctaDt {
    margin-left: 1.390922401171303vw;
    display: flex
}

.buscarRegionBuscar-ctaDtPhone {
    --background: hsla(0, 0%, 100%, 0.8);
    border: .0625em solid #fff;
    width: 8.4375em;
    height: 2.4375em;
    font: .75em var(--tufi-font-family);
    margin-top: .625em;
    color: #8dc63f
}

.rowSaldoConfirmar-ctaDt {
    margin-bottom: 2.12443095599393vh
}

button:focus {
    outline-color: #8dc63f;
    outline-width: .0625em !important;
    outline-style: solid !important
}

.chevronAtras-cuentasDetalle {
    width: .8487654320987654vw;
    height: 2.9895366218236172vh
}

.flip-HorizontalDer-fwd {
    animation: flip-HorizontalDer-fwd .4s cubic-bezier(.455, .03, .515, .955) both
}

@keyframes flip-HorizontalDer-fwd {
    to {
        transform: translateX(0)
    }

    0% {
        transform: translateX(10000px)
    }
}

.flip-HorizontalIzq-fwd {
    animation: flip-HorizontalIzq-fwd .4s cubic-bezier(.455, .03, .515, .955) both
}

@keyframes flip-HorizontalIzq-fwd {
    to {
        transform: translateX(0)
    }

    0% {
        transform: translateX(10000px)
    }
}

.scrollRegion-Step3SelectPagoServicio {
    overflow-x: scroll
}

.contenedorDetalleCuentas {
    display: flex;
    flex-direction: column;
    grid-gap: .5rem;
    gap: .5rem
}

.buscadorServicio-Step1PagoServicio {
    border: .0625em solid #fff;
    border-radius: 1.1875em;
    width: 100%;
    height: 100%;
    --background: #efefef;
    display: flex;
    align-items: center;
    font: .875em var(--tufi-font-family);
    color: #707070
}

.boxServicios {
    background: #efefef;
    width: 60%;
    height: 17.298937784522003vh;
    padding: .7320644216691069vw;
    color: #000;
    cursor: pointer;
    border-radius: 10px;
    text-align: center;
    justify-content: center
}

.category-name {
    font-size: 1em !important;
    letter-spacing: .39px !important
}

.iconBuscar-psv {
    color: #a0cf67 !important;
    width: 23px;
    height: 23px
}

.NumberFormat-PSV {
    border: none;
    outline: none;
    width: 100%
}

.divContainer-PSV {
    background: #fff 0 0 no-repeat padding-box;
    border: 1px solid #ededed;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    padding: 8px 14px;
    height: 74px
}

.divSecundContainer-PSV {
    width: 100%
}

.divbottomNumber-PSV {
    width: 100%;
    background-color: #8dc63f;
    height: 2px
}

.MontoText-PSV {
    font: 12px var(--tufi-font-family);
    color: #606060
}

@media (max-width:768px) {
    .custom-col {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: calc(100% - 16px);
        max-width: calc(100% - 16px);
        margin: 8px
    }
}

@media (min-width:768px) {
    .custom-col {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: calc(50% - 16px);
        max-width: calc(50% - 16px);
        margin: 8px
    }
}

@media (min-width:992px) {
    .custom-col {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: calc(33.333% - 16px);
        max-width: calc(33.333% - 16px);
        margin: 8px
    }
}

.sectionTitle {
    font-size: 16px;
    font-weight: 700;
    line-height: 18.38px
}

.sectionParagraph,
.sectionTitle {
    font-family: var(--tufi-font-family);
    padding: 0;
    margin: 0;
    color: #606060
}

.sectionParagraph {
    font-size: 14px;
    font-weight: 400;
    line-height: 16.09px
}

.align-right {
    display: flex;
    justify-content: flex-end
}

.cajasMediosDePagoUser_datosMedioDePagoUser__1fLBV {
    background: #efefef 0 0 no-repeat padding-box;
    border-radius: 10px
}

.cajasMediosDePagoUser_datosMedioDePagoUser__1fLBV.cajasMediosDePagoUser_medioDePagoSeleccionado__1LQn5 {
    background: rgba(141, 198, 63, .15) 0 0 no-repeat padding-box;
    border-radius: 10px
}

.SelectCuenta_selectWrapper__2DT8b {
    position: relative;
    width: 100%
}

.SelectCuenta_select__32THC {
    background: #939393;
    border: 1px solid #fff;
    border-radius: 0 0 10px 10px;
    color: #fff;
    font-size: .825em;
    font-family: var(--tufi-font-family);
    font-weight: bolder;
    cursor: pointer;
    min-height: 18px;
    height: 2.1181em;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 1.5em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 1rem;
    justify-content: center
}

.SelectCuenta_medioDePagoSeleccionado__1DJla {
    background: #8dc63f
}

.SelectCuenta_select__32THC:hover {
    border-color: #ccc
}

.SelectCuenta_select__32THC:focus {
    outline: none;
    border-color: #aaa
}

.SelectCuenta_optionsList__KfVvJ {
    position: absolute;
    top: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    z-index: 100;
    background-color: #efefef;
    transition: max-height .3s ease, opacity .3s ease;
    border-radius: 0 0 10px 10px
}

.SelectCuenta_optionsList__KfVvJ.SelectCuenta_open__2Wcv1 {
    max-height: 500px;
    opacity: 1
}

.SelectCuenta_option__2Wd4H {
    font-family: var(--tufi-font-family);
    padding: 2px;
    color: #000;
    cursor: pointer;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    background-color: #efefef
}

.SelectCuenta_option__2Wd4H:hover {
    background-color: #8dc63f;
    color: #fff
}

.SelectCuenta_chevron__1FGAF {
    position: absolute;
    pointer-events: none;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px
}

.SelectCuenta_selectedOption__2GT2_ {
    background-color: #8dc63f;
    color: #fff
}

.divContainer {
    background: #fff 0 0 no-repeat padding-box;
    border: 1px solid #ededed;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    padding: 8px 14px;
    height: 74px
}

.divSecundContainer {
    width: 100%
}

.text {
    font: 12px var(--tufi-font-family);
    color: #606060
}

.format {
    border: none;
    outline: none;
    width: 100%;
    background: #fff !important
}

.errorInput-text {
    color: #f7941e !important;
    font-size: 12px !important;
    margin-top: 0;
    padding: 0
}

.divbottom {
    width: 100%;
    background-color: #8dc63f;
    height: 2px
}

.error-Input {
    background: #f7941e 0 0 no-repeat padding-box;
    border: 1px solid #ededed;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 74px;
    border-radius: 10px;
    color: #fff;
    font: 16px var(--tufi-font-family);
    font-weight: 700;
    cursor: pointer
}

.wrapper {
    position: relative;
    width: 100%
}

.divContainer,
.errorContainer {
    transition: visibility .3s, opacity .3s;
    opacity: 1;
    display: block
}

.hidden {
    opacity: 0;
    display: none
}

.errorContainer {
    background-color: #f7941e;
    font-size: 14px;
    padding: 5px
}

.divSecundContainer {
    display: flex;
    flex-direction: column
}

ion-radio {
    width: 20px;
    height: 20px;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 2px solid var(--ion-color-step-400, #999) !important
}

.inbox-request-button {
    background: #a0cf67 0 0 no-repeat padding-box;
    cursor: pointer;
    border-radius: 10px;
    margin-top: 25px;
    font-weight: bolder !important;
    margin-bottom: -15px
}

.trayAccountCard {
    border-radius: 8px;
    color: #fff;
    background-color: #8dc63f;
    height: 344px
}

.trayAccountCardHeader {
    padding: 24px 16px 0
}

#trayAccountTitle {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 13.79px
}

#trayAccountSearchbar {
    border: 1px solid #fff;
    margin-bottom: 15px;
    border-radius: 54px;
    height: 40px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: start;
    padding-left: 5%
}

#trayAccountSearchbarInput {
    all: unset;
    color: #fff;
    font-size: 12px;
    font-weight: 300;
    width: 95%
}

::placeholder {
    color: #fff;
    opacity: 1
}

.trayAccountCardBody {
    border-radius: 0 0 8px 8px;
    border: 1px solid #ebebeb;
    color: #000;
    height: 100%
}

.trayAccountCardBody,
.trayAccountCardBody>div:nth-child(odd) {
    background-color: #fff
}

.trayAccountCardBody>div:nth-child(2n) {
    background-color: #f4f4f4
}

.trayAccountItem {
    display: flex;
    justify-content: space-between
}

.trayAccountItemInner {
    display: flex
}

.trayAccountItemAccountBody {
    color: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    cursor: pointer
}

.trayAccountItemAccountBody>div:nth-child(2) {
    display: flex
}

.trayAccountItemAccountBody-User {
    color: #a0cf67;
    font-size: 14px;
    font-weight: 700
}

.trayAccountItemAccountBody-Document {
    color: #606060
}

.trayAccountItemAccountBody-Entity {
    color: #939393;
    font-size: 14px;
    display: flex;
    justify-content: flex-end
}

.trayAccountItemAccountBody-Account {
    color: #606060;
    font-size: 12px;
    display: flex;
    justify-content: flex-end
}

.trayAccountItemAccountBody-Logo {
    margin-left: 20px;
    display: flex;
    align-items: center;
    justify-content: center
}

.trayAccountItemAccountBody-Logo-img {
    height: 32px
}

.trayAccountItem-dinamic-bacground-1 {
    background-color: #f4f4f4
}

.trayAccountItem-dinamic-bacground-2 {
    background-color: #fff
}

.trayAccountItem-dinamic-bacground-selected {
    background-color: #ecf5e1
}

.payment-request-adjust-col {
    padding-left: 10px;
    padding-right: 10px
}

.payment-request-flow-helper {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-start;
    font-size: 14px;
    color: #606060
}

.payment-request-flow-helper-number {
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    font-size: 16px
}

.payment-request-flow-helper-title {
    color: #606060
}

.payment-request-flow-helper-sub-title {
    color: #939393
}

.PaymentRequestSelAccount-content {
    padding-right: 10px;
    padding-left: 10px
}

.PaymentRequestSelAccount-btn-group {
    display: flex;
    justify-content: space-evenly;
    font-size: 12px;
    color: #939393;
    height: 36px;
    border-radius: 7px;
    margin-bottom: 12px;
    border: 1px solid #a0cf67 !important
}

.PaymentRequestSelAccount-btn-group>:first-child {
    border-top-left-radius: 7px !important;
    border-bottom-left-radius: 7px !important
}

.PaymentRequestSelAccount-btn-group>:last-child {
    border-top-right-radius: 7px !important;
    border-bottom-right-radius: 7px !important
}

.PaymentRequestSelAccount-btn-selected {
    color: #606060;
    font-weight: 700;
    background-color: #ecf5e1
}

.PaymentRequestSelAccount-btn-item {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 100%
}

.PaymentRequestSelAccount-title-option {
    font-size: 14px;
    margin-bottom: 20px
}

.PaymentRequestSelAccount-search-card {
    display: flex;
    margin-bottom: 22px
}

.PaymentRequestSelAccount-type-alias {
    margin-right: 20px;
    padding: 0 64px 0 8px
}

.PaymentRequestSelAccount-type-alias-dropdown,
.PaymentRequestSelAccount-type-count-dropdown {
    all: unset;
    margin-right: 20px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url(/tufi-web/static/media/chevron-down.755ab751.svg);
    background-repeat: no-repeat;
    background-position: right .7rem top 50%;
    background-size: 2rem auto
}

.PaymentRequestSelAccount-type-alias-dropdown {
    padding: 0 64px 0 8px
}

.PaymentRequestSelAccount-type-count-dropdown {
    padding: 0 64px 0 0;
    color: #606060;
    font-size: 14px;
    font-weight: 700
}

.PaymentRequestSelAccount-card-title {
    color: #939393;
    font-size: 10px
}

.PaymentRequestSelAccount-card-sub-title {
    all: unset;
    cursor: pointer
}

.PaymentRequestSelAccount-card-sub-title,
.PaymentRequestSelAccount-card-sub-title::placeholder {
    color: #606060;
    font-size: 14px;
    font-weight: 700
}

.PaymentRequestSelAccount-verify-btn {
    background-color: #a0cf67;
    cursor: pointer
}

.PaymentRequestSelAccount-disable-verify-btn,
.PaymentRequestSelAccount-verify-btn {
    color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    margin-bottom: 22px;
    font-weight: 700
}

.PaymentRequestSelAccount-disable-verify-btn {
    background-color: #606060
}

.PaymentRequestSelAccount-back-btn {
    cursor: pointer
}

.PaymentRequestSelAccount-back-btn,
.PaymentRequestSelAccount-disable-btn-flow {
    background-color: #606060;
    color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    margin-bottom: 22px;
    font-weight: 700
}

.PaymentRequestSelAccount-result-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 46px;
    padding-left: 5px
}

.PaymentRequestSelAccount-result-card-data {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #939393;
    line-height: 13.79px
}

.PaymentRequestSelAccount-result-card-logo {
    margin-right: 12px;
    width: 46px;
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center
}

.PaymentRequestSelAccount-result-card-owner {
    font-size: 14px;
    color: #a0cf67;
    line-height: 16.09px;
    font-weight: 700
}

.PaymentRequestSelAccount-result-card-radio-btn {
    width: 32px;
    height: 32px
}

.PaymentRequestSelAccount-result-card-save-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px
}

.PaymentRequestSelAccount-result-card-save-title {
    font-weight: 700;
    font-size: 14px;
    color: #606060
}

.PaymentRequestSelAccount-helper-input {
    margin-bottom: 50px
}

.PaymentRequestSelAccount-saved-account {
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 15px 2px
}

.PaymentRequestSelAccount-saved-icon {
    width: 24px;
    height: 24px
}

.alias-component-card-container {
    display: flex;
    justify-content: space-evenly
}

.alias-card-option {
    height: 304px;
    width: 285px;
    border-radius: 16px;
    color: #939393;
    background-color: #f4f4f4;
    grid-gap: 14px;
    gap: 14px
}

@media only screen and (max-width:930px) {
    .alias-card-option {
        margin-right: 5px;
        margin-left: 5px;
        margin-bottom: 18px;
        justify-content: flex-start
    }
}

.alias-card-header {
    padding: 24px
}

.alias-card-header-option {
    color: #939393;
    font-size: 16px;
    font-weight: 600;
    line-height: 18.38px
}

.alias-card-header-data {
    color: #939393;
    font-size: 14px;
    font-weight: 400;
    line-height: 16.09px
}

.alias-card-warning-message {
    color: #f09;
    font-size: 12px;
    line-height: 13.79px;
    font-weight: 400;
    display: flex;
    justify-content: flex-start
}

#alias-card-warning-message {
    height: 24px;
    width: 24px;
    margin-right: 8px
}

.alias-card-account-option-header {
    font-size: 14px;
    line-height: 16.09px;
    font-weight: 400;
    color: #939393
}

.alias-card-account-option-body {
    margin-top: 8px;
    font-size: 14px;
    line-height: 16.09px;
    color: #606060;
    display: flex;
    justify-content: space-between
}

.alias-card-account-option-name {
    font-weight: 700
}

.alias-card-account-option-account {
    font-weight: 500
}

.alias-card-icon {
    width: 46px;
    height: 46px
}

.alias-card-label {
    display: flex;
    justify-content: space-between
}

.alias-card-body {
    padding: 24px;
    font-size: 12px;
    font-weight: 400;
    line-height: 13.79px
}

.alias-card-section-line {
    border: unset;
    border-top: 1px solid #ebebeb
}

input[type=radio] {
    --s: 1em;
    --c: #a0cf67;
    height: 24px;
    aspect-ratio: 1;
    border: 2px solid #939393;
    padding: calc(var(--s)/8);
    background: radial-gradient(farthest-side, var(--c) 94%, transparent) 50%/0 0 no-repeat content-box;
    border-radius: 50%;
    outline-offset: calc(var(--s)/10);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    font-size: inherit;
    transition: .3s
}

input[type=radio]:checked {
    border-color: #939393;
    background-size: 100% 100%
}

input[type=radio]:disabled {
    background: linear-gradient(#939393 0 0) 50%/100% 20% no-repeat content-box;
    opacity: .5;
    cursor: not-allowed
}

@media print {
    input[type=radio] {
        -webkit-appearance: auto;
        appearance: auto;
        background: none
    }
}

label {
    display: inline-flex;
    align-items: center;
    grid-gap: 10px;
    gap: 10px;
    margin: 5px 0;
    cursor: pointer
}

.alias-confirm-modal {
    margin-left: 25%;
    margin-right: 25%
}

.alias-confirm-modal-container {
    padding: 30px;
    font-family: var(--tufi-font-family-Regular) !important;
    background-color: #fff;
    color: #707070;
    border-style: solid;
    border-color: #a0cf67;
    border-radius: 5px;
    width: 590px;
    height: 242px
}

.alias-confirm-modal-header {
    margin-left: 50%;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.alias-confirm-modal-title {
    font-size: 20px;
    font-weight: 600;
    text-align: center
}

.alias-confirm-modal-subtitle {
    font-size: 14px;
    font-weight: 600;
    text-align: center
}

#alias-confirm-modal-header-icon {
    height: 30px;
    width: 30px;
    color: #606060
}

.alias-confirm-header-button {
    font-size: 12px;
    font-weight: 600;
    cursor: pointer
}

.alias-confirm-modal-message-body {
    margin-bottom: 20px
}

.alias-confirm-modal-button-container {
    display: flex;
    justify-content: space-between;
    margin-left: 15%;
    margin-right: 15%;
    width: 70%
}

.alias-confirm-modal-continue-button {
    font-weight: 700;
    margin-bottom: 20px;
    border-radius: 10px;
    height: 50px;
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px
}

.button-delete-alias {
    border: 1px solid #ebebeb
}

.button-cancel-delete-alias {
    background-color: #606060;
    color: #fff
}

.button-change-alias {
    background-color: #a0cf67;
    color: #fff
}

.button-cancel-change-alias {
    border: 1px solid #ebebeb;
    color: #939393
}

.alias-success-modal-container {
    padding: 30px;
    font-family: var(--tufi-font-family-Regular) !important;
    background-color: #a0cf67;
    color: #fff;
    border-style: solid;
    border-color: #a0cf67;
    border-radius: 5px;
    width: 590px;
    height: 242px
}

.button-success-change-alias {
    background-color: #f4f4f4;
    color: #737373
}

.alias-success-modal-button-container {
    display: flex;
    justify-content: center;
    margin-left: 15%;
    margin-right: 15%;
    width: 70%
}

.alias-success-modal-title {
    font-size: 20px;
    font-weight: 500;
    text-align: center
}

.payment-request-modal-container {
    background-color: #a0cf67;
    color: #fff;
    border-color: #a0cf67
}

.payment-request-modal-container,
.payment-request-modal-container-b {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    font-family: var(--tufi-font-family-Regular) !important;
    border-style: solid;
    border-radius: 5px;
    width: 591px;
    height: 244px
}

.payment-request-modal-container-b {
    background-color: #fff;
    color: #606060;
    border-color: #fff
}

#payment-request-modal-icon-container {
    margin-bottom: 20px
}

#payment-request-modal-icon {
    height: 35px;
    width: 35px
}

#payment-request-modal-header {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 8px
}

#payment-request-modal-body {
    font-size: 14px;
    margin-bottom: 20px
}

#payment-request-modal-button {
    background-color: #fff;
    color: #606060
}

#payment-request-modal-button,
.payment-request-modal-button-b {
    cursor: pointer;
    display: flex;
    justify-content: center;
    font-size: 12px;
    padding: 16px 40px;
    border-radius: 10px;
    width: 285px;
    font-weight: 500
}

.payment-request-modal-button-b {
    background-color: #a0cf67;
    color: #fff;
    white-space: nowrap
}

.otpContainer {
    margin: 5% auto;
    display: flex;
    justify-content: space-evenly
}

.otpInput {
    width: 53px !important;
    height: 53px;
    margin: .25rem;
    font-size: 2rem;
    text-align: center;
    border-radius: 10px;
    color: #606060;
    background-color: #efefef;
    border: 1px solid hsla(0, 0%, 43.9%, .30196078431372547)
}

@media screen and (max-width:768px) {
    .otpInput {
        width: 3.6875rem !important;
        height: 3.6875rem;
        font-size: 1.5rem;
        padding: 4px;
        margin: .25rem 0
    }
}

@media screen and (max-width:449px) {
    .otpInput {
        width: 42px !important;
        height: 42px
    }
}

#payment-request-otp-title {
    color: #606060;
    font-size: 16px;
    font-weight: 700
}

#payment-request-otp-sub-title {
    color: #606060;
    font-size: 12px
}

#payment-request-otp-img {
    height: 46px
}

#payment-request-otp-disclaimer {
    margin-left: 7px;
    font-size: 10px !important;
    font-family: var(--tufi-font-family) !important;
    color: #707070 !important
}

.payment-request-data-content {
    background: #ededed 0 0 no-repeat padding-box;
    border-radius: 10px;
    border-radius: 10px 10px 0 0
}

.payment-request-data-content,
.payment-request-data-content-b {
    flex-direction: row;
    justify-content: flex-start;
    align-items: start;
    height: 8.9375em;
    padding: 1.8834em 1.7593em
}

.payment-request-data-content-b {
    border: 1px solid #dadada;
    border-radius: 10px;
    border-radius: 8px
}

.payment-request-reference-transaction {
    cursor: pointer;
    font-size: 12px
}

.payment-request-reference-transaction>div:first-child {
    font-weight: 700;
    color: #a0cf67;
    line-height: 13.79px
}

.payment-request-reference-transaction>div:nth-child(2) {
    font-weight: 500;
    color: #606060;
    line-height: 13.79px
}

.payment-request-title-sumary-col1 {
    background-color: #a0cf67
}

.payment-request-title-sumary-col2 {
    background-color: #b8db8d
}

.payment-request-title-sumary-col3 {
    background-color: #cfe7b3
}

.payment-request-title-sumary {
    font-size: 12px;
    font-weight: 700
}

.payment-request-title-sumary-helper {
    margin-bottom: -20px
}

.payment-request-title-sumary-helper-inner {
    margin-bottom: -7px
}

.current-loan-card {
    border: 1px solid #ebebeb;
    border-radius: 8px
}

.current-loan-card,
.current-loan-card-selected {
    padding: 16px 24px;
    margin-bottom: 10px;
    cursor: pointer
}

.current-loan-card-selected {
    border: 1px solid #a0cf67;
    border-radius: 8px
}

.renovation-loan-card {
    border: 1px solid #ebebeb;
    border-radius: 8px;
    padding: 16px 24px;
    margin-bottom: 10px
}

.renovation-loan-card-focused {
    border: 1px solid #a0cf67;
    border-radius: 8px;
    padding: 16px 24px;
    margin-bottom: 10px
}

.renovation-loan-card-focused-warning {
    border: 1px solid #fbb034;
    border-radius: 8px;
    padding: 16px 24px;
    margin-bottom: 10px;
    background-color: #fbb034
}

.current-loan-card-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 16px;
    color: #606060;
    font-weight: 700
}

.current-loan-card-container-section,
.current-loan-card-warning {
    margin-left: 10px
}

.current-loan-card-mark-input {
    margin: 10px
}

.renovation-loan-card-sub-text-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 16.09px;
    color: #fbb034;
    margin-top: -7px;
    margin-bottom: 3px
}

.current-loan-card-container>:nth-child(3) {
    justify-content: flex-end;
    margin-left: auto
}

.current-loan-card-subtitle {
    font-size: 14px;
    font-weight: 500
}

.renovation-loan-card-title {
    font-size: 10px;
    line-height: 11.49px;
    color: #939393
}

.renovation-loan-card-title-warning {
    font-size: 10px;
    line-height: 11.49px;
    color: #fff
}

.renovation-loan-card-sub-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 16.09px;
    color: #606060
}

.renovation-loan-card-sub-title-warning {
    font-size: 14px;
    font-weight: 700;
    line-height: 16.09px;
    color: #fff
}

.renovation-loan-card-sub-input-field {
    border: none
}

.renovation-loan-card-sub-input-field::-webkit-input-placeholder {
    color: #606060
}

.renovation-loan-card-sub-input-field-disabled {
    border: none
}

.renovation-loan-card-sub-input-field-disabled::-webkit-input-placeholder {
    color: #939393
}

.renovation-loan-card-sub-input-field-warning {
    border: none;
    color: #fff;
    background-color: #fbb034
}

.renovation-loan-card-sub-input-field-warning::-webkit-input-placeholder {
    color: #fff;
    background-color: #fbb034;
    border: #fbb034;
    text-shadow: none
}

.checkbox {
    position: relative;
    display: flex;
    align-items: center;
    grid-gap: 4px;
    gap: 4px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    margin-top: 10px
}

.checkbox input {
    position: absolute;
    width: 0;
    left: 50px;
    height: 0;
    opacity: 0;
    cursor: pointer
}

.checkbox .checkmark {
    position: relative;
    display: block;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 3px;
    outline: 1px solid #acacac;
    transition: all .2s ease
}

.checkbox:hover .checkmark {
    background: #f4f4f5;
    transition: all .2s ease
}

.checkbox input:checked~.checkmark {
    background: #a0cf67;
    outline: 1px solid #a0cf67
}

.checkbox input[type=radio]~.checkmark {
    border-radius: 50%
}

.checkbox .checkmark:after {
    position: absolute;
    display: block;
    content: "";
    left: 50%;
    top: 40%;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    -moz-transform: translate(-50%, -50%) rotate(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    opacity: 0;
    transition: all .2s ease
}

.checkbox input:checked~.checkmark:after {
    opacity: 1;
    transition: all .2s ease
}

.renovation-loan-dropdown {
    all: unset;
    width: 100%;
    margin-right: 20px;
    padding: 0 64px 0 8px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url(/tufi-web/static/media/chevron-down.755ab751.svg);
    background-repeat: no-repeat;
    background-position: right .7rem top 50%;
    background-size: 2rem auto
}

.renewal-calculate-loan-fees,
.renewal-calculate-loan-fees-disable {
    background-color: #a0cf67;
    color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    cursor: pointer;
    margin-bottom: 22px;
    font-weight: 700;
    margin-top: 10px
}

.renewal-calculate-loan-fees-disable {
    opacity: 1%
}

.renewal-summarized-loan-fee {
    background-color: #e9e9e9;
    padding: 16px 24px;
    color: #606060;
    height: 117px;
    border-radius: 8px;
    margin-bottom: 20px
}

.summarize-renewal-loan-title {
    font-size: 16px;
    line-height: 18.38px;
    padding-bottom: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid #939393
}

.summarize-renewal-loan-amount-currency {
    font-size: 14px;
    line-height: 22.98px;
    font-weight: 500
}

.summarize-renewal-loan-amount {
    font-size: 20px;
    line-height: 22.98px;
    font-weight: 700;
    align-items: flex-end
}

.summarize-renewal-loan-amount,
.summarize-renewal-loan-amount>* {
    display: flex;
    justify-content: flex-end
}

.summarize-renewal-loan-adjust-col {
    padding-left: 10px;
    padding-right: 10px
}

.summarize-renewal-loan-back-btn {
    background-color: #606060;
    color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    cursor: pointer;
    margin-bottom: 22px;
    font-weight: 700
}

.summarize-renewal-loan-verify-btn,
.summarize-renewal-loan-verify-btn-disabled {
    background-color: #a0cf67;
    color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    cursor: pointer;
    margin-bottom: 22px;
    font-weight: 700
}

.summarize-renewal-loan-verify-btn-disabled {
    opacity: 1%
}

.renewal-loan-summary-card {
    background-color: #ebebeb;
    padding: 16px 24px;
    border-radius: 8px
}

.renewal-loan-summary-card-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: #939393;
    margin-bottom: 5px
}

.renewal-loan-summary-card-item-custom {
    color: #606060
}

.renewal-loan-summary-conditions-card {
    margin-top: 20px
}

.renewal-loan-summary-conditions-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 16.09px
}

.renewal-loan-summary-conditions-section {
    display: flex;
    padding-top: 6px
}

.renewal-loan-summary-conditions-body {
    font-size: .8125em;
    line-height: 1.25em;
    font-family: var(--tufi-font-family);
    color: #707070
}

ion-content.maintenance-page {
    --background: #80cf00
}

ion-content.maintenance-page::part(scroll) {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 15px;
    box-sizing: border-box
}

.maintenance-card {
    background-color: #fff;
    position: relative;
    width: 100%;
    max-width: 1558px;
    padding: 40px 20px;
    border-radius: 24px;
    box-shadow: 16px 36px 36px 0 rgba(0, 0, 0, .25)
}

.card-content-wrapper {
    display: flex;
    flex-direction: column;
    grid-gap: 20px;
    gap: 20px;
    width: 100%;
    height: 100%
}

.card-left-section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    order: 1
}

.card-right-section {
    order: 2
}

.card-left-section,
.card-right-section {
    flex: 1 1
}

.logo {
    max-width: 48px;
    max-height: 62.4px
}

.illustration {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain
}

.gear-icon {
    display: none
}

.header-icon-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 24px
}

.header-icon-wrapper img {
    width: 48px;
    height: 48px
}

.main-title {
    font-size: 32px;
    font-weight: 800
}

.main-title,
.subtitle {
    line-height: 1;
    text-align: center;
    color: #05152d
}

.subtitle {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 48px
}

.list-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #05152d;
    margin-bottom: 12px
}

.info-list ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0 0 16px
}

.final-message,
.info-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 6px;
    grid-gap: 12px;
    gap: 12px
}

.final-message span,
.info-list li span {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #000
}

.list-icon {
    width: 16px;
    height: 16px;
    margin-top: 4px
}

@media (min-width:480px) {
    .maintenance-card {
        padding: 50px 40px;
        width: 90%
    }
}

@media (min-width:768px) {
    ion-content.maintenance-page::part(scroll) {
        align-items: center
    }

    .maintenance-card {
        padding: 50px 40px;
        width: 85%
    }

    .card-content-wrapper {
        flex-direction: row;
        grid-gap: 40px;
        gap: 40px
    }

    .card-left-section,
    .card-right-section {
        order: 0
    }

    .logo {
        max-width: 100px;
        max-height: 130px
    }

    .gear-icon {
        display: block;
        position: absolute;
        max-width: 150px;
        min-height: 110px;
        right: -30px;
        bottom: -30px
    }

    .illustration {
        width: 100%;
        margin-left: 0;
        margin-right: 0
    }

    .header-icon-wrapper img {
        width: 70px;
        height: 70px
    }
}

@media (min-width:1024px) {
    .card-content-wrapper {
        grid-gap: 100px;
        gap: 100px
    }

    .header-icon-wrapper img {
        width: 100px;
        height: 100px
    }
}

@media (min-width:1440px) {
    .gear-icon {
        max-width: 225.15px;
        min-height: 164.35px;
        right: -80px;
        bottom: -60px
    }

    .main-title {
        font-size: 56px
    }

    .subtitle {
        font-size: 40px
    }

    .final-message span,
    .info-list li span,
    .list-title {
        font-size: 24px
    }

    .list-icon {
        width: 24px;
        height: 24px
    }
}

.mainContainer {
    background-color: #f5f5f5;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--tufi-font-family);
    padding: 1rem;
    box-sizing: border-box
}

.textCenter {
    text-align: center
}

.loadingHeader {
    color: #8ec63f;
    font: 700 18px/22px var(--tufi-font-family);
    letter-spacing: 0;
    margin-bottom: .5rem
}

.loadingText {
    font: 14px/18px var(--tufi-font-family);
    color: #606060
}

.errorContainer {
    background-color: #fff;
    border-left: 4px solid #f7941d;
    color: #606060;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1);
    max-width: 32rem;
    width: 100%
}

.errorHeader {
    color: #f7941d;
    font: 700 16px/20px var(--tufi-font-family);
    margin-bottom: .5rem
}

.errorMessage {
    font-family: monospace;
    background-color: #fdf5e8;
    padding: .5rem;
    border-radius: 8px;
    word-wrap: break-word;
    color: #d97706
}

.downloadingContainer {
    text-align: center;
    background-color: #fff;
    padding: 2.5rem;
    border-radius: 10px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1)
}

.downloadingIcon {
    width: 4rem;
    height: 4rem;
    color: #8dc63f;
    margin: 0 auto 1rem
}

.downloadingHeader {
    font: 700 18px/22px var(--tufi-font-family);
    color: #000;
    margin-bottom: .5rem
}

.downloadingText {
    color: #606060;
    font-size: 14px
}

.downloadingSubtext {
    font: 12px/16px var(--tufi-font-family);
    color: #a0aec0;
    margin-top: 1rem
}

.renderingContainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1);
    overflow: hidden
}

.renderingHeader {
    background-color: #606060;
    color: #fff;
    padding: .75rem;
    text-align: center;
    font: 700 14px/18px var(--tufi-font-family)
}

.iframe {
    width: 100%;
    height: 100%;
    border: none
}