@CHARSET "UTF-8";
/* clases generales */
:root {
    --main-text-color-gray: #67676A;
    --main-text-color-gray-medium: #AFAFAF;
    --main-text-color-green: #438987;
    --main-text-color-red: #BD1E2D;
    --main-border-color-gold: #E9DDAA;
    --main-media-size: 90% 180px;
    --main-nexa-light: 'NexaLight';
    --main-nexa-bold: 'NexaBold';
    --main-size-box: 510px;
}
/* apply a natural box layout model to all elements, but allowing components to change */
html {
    box-sizing: border-box;
    font-size: 62.5%; /*1rem = 10px*/
}
*, *:before, *:after {
    box-sizing: inherit;
}
body{
    font-size: 1.6rem;
    font-family: NexaLight,sans-serif;
    background-color: #f2f2f2;
}
/* FUENTES */
@font-face {
    font-family: 'NexaLight';
    src: url('../fonts/NexaFreeLightwebfont.woff');
    src: local('NexaLight'), url('../fonts/NexaFreeLightwebfont.woff') format('woff'),
    url('../fonts/NexaFreeLightwebfont.ttf') format('truetype');
}

@font-face {
    font-family: 'NexaBold';
    src: url('../fonts/nexa-bold-webfont.woff');
    src: local('NexaBold'), url('../fonts/nexa-bold-webfont.woff') format('woff'),
    url('../fonts/nexa-free-bold-webfont.ttf') format('truetype');
}

@font-face {
    font-family: HalterFont;
    src: url('../fonts/CREDC___.ttf');
    src: local('HalterFont'), url('../fonts/CREDC___.ttf') format('ttf'),
    url('../fonts/CREDC___.ttf') format('truetype');
}

/* NEXA lIGHT */
.nexa-light-white {
    font-family: 'NexaLight' !important;
    color: white !important;
}

/* datos personales - personFisica*/
.nexa-light-black {
    font-family: 'NexaLight' !important;
    color: #495154 !important;
}
.bold-black {
    font-weight: bold;
    color: #495154 !important;
}

/* para el Bienvenido o similares*/
.nexa-light-gray {
    font-family: 'NexaLight' !important;
    color: var(--main-text-color-gray) !important;
}

.nexa-light-green {
    font-family: 'NexaLight' !important;
    color: var(--main-text-color-green) !important;
}

.nexa-light-blue {
    font-family: 'NexaLight' !important;
    color: #7F8082 !important;
}

.nexa-light-red {
    font-family: 'NexaLight' !important;
    color: #B27A13 !important;
}

/* PersonJuridica */
.nexa-light-white-F {
    font-family: 'NexaLight' !important;
    color: white !important;
}

.nexa-light-black-F {
    font-family: 'NexaLight' !important;
    color: #495154 !important;
}

.nexa-light-gray-F {
    font-family: 'NexaLight' !important;
    color: var(--main-text-color-gray) !important;
}
.nexa-light-gray-medium {
    font-family: 'NexaLight' !important;
    color: var(--main-text-color-gray-medium) !important;
}
.nexa-light-red-F {
    font-family: 'NexaLight' !important;
    /*color: #BD1E2D !important;*/ /* rojo oscuro */
    color: rgba(189, 81, 74, 1) !important;
}
/* NEXA REGULAR */
.nexa-regular-white {
    font-family: 'NexaRegular' !important;
    color: white !important;
}
.nexa-regular-gray {
    font-family: 'NexaLight' !important;
    color: var(--main-text-color-gray) !important;
}
/*.login-text-size{*/
/*    font-size: 1.5em;*/
/*    margin-top: 20px;*/
/*}*/
/* NEXA BOLD */
.nexa-bold-white {
    font-family: 'NexaBold' !important;
    color: white !important;
}

.nexa-bold-gray{
    font-family: 'NexaBold' !important;
    color: var(--main-text-color-gray) !important;
}
.nexa-bold-gray-medium{
    font-family: 'NexaBold' !important;
    color: var(--main-text-color-gray-medium) !important;
}
.nexa-bold-black {
    font-family: 'NexaBold' !important;
    color: #495154 !important;
}
.nexa-bold-gray {
    font-family: 'NexaBold' !important;
    color: var(--main-text-color-gray) !important;
}
.nexa-bold-blue {
    font-family: 'NexaBold' !important;
    color: #438987 !important;
}
.nexa-bold-red-F {
    font-family: 'NexaBold' !important;
    color: #B27A13 !important;
}
.nexa-bold-red {
    font-family: 'NexaBold' !important;
    color: #BD1E2D !important;
}
.nexa-bold-green {
    font-family: 'NexaBold' !important;
    color: #438987 !important;
}
/*Generales*/
a:hover{
    text-decoration: none;
    cursor: pointer;
}
.btn.iconos__btn:hover {
    /*background: #57b4b1;*/
    background: hsl(180, 20%, 85%);
}
p{
    margin: 0;
    padding: 0;
}
h1, h2, h3, h4, h5, h6{
    margin: 0;
    padding: 0;
}

/************************************* UTILIDADES ****************************************/
.fondo-color-{
    background-color: #F2F2F2;
    background-repeat: no-repeat;
    background-size: cover;
}
.fondo-blanco{
    background-color: white;
    border-radius: .6rem;
    padding: 1.5rem;
}
.mr-15 {
    margin-right: 1.5rem;
}
.btn-mas{
    background-color: #D9E7E7;
    border-radius: 10px;
    border-color: transparent;
}
.btn-mas:hover {
    background: var(--main-text-color-green);
}
.btn-mas:hover a {
    color: #D9E7E7;
}
.btn-mas:hover a img{
    filter: invert(98%) sepia(13%) saturate(356%) hue-rotate(149deg) brightness(93%) contrast(95%);
}
.btn-recordar:hover{
    color: var(--main-text-color-green);
}
.rounded-15 {
    border-radius: 15px;
}
.font-size-10{
    font-size: 0.9em;
}
.container-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.container-space-evenly{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
/*.table-cuentas {*/
/*    width: 100%;*/
/*    max-width: 100%;*/
/*    margin-bottom: 20px;*/
/*}*/
.text-center-margin-bot{
    text-align: center;
    margin: 0;
}

.column {
    float: left;
    width: 33.33%;
    padding: 5px;
}
.column-25 {
    float: left;
    width: 25%;
    padding: 5px;
}

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

.text-align-right{
    text-align: right;
}

.text-align-left{
    text-align: left;
    margin-right: 68px;
}

.vl-r {
    border-right: 1px solid white;
    height: 100%;
}

.hl-t {
    border-top: 1px solid var(--main-border-color-gold);
    witdh: 10%;
}

.notificafion{
    width: 25px;
    height: 25px;
}

.size-25{
    width: 25px;
    height: 25px;
}

.size-15{
    width: 15px;
    height: 15px;
}

.size-17{
    width: 17px;
    height: 17px;
}

.size-36{
    width: 3.6rem !important;
    height: 3.6rem !important;
}
.size-50{
    width: 5rem;
    height: 5rem;
}
.vh-80{
    height: 80vh;
}
.padding-left-20{
    padding: 0 20px 0 0;
}

.padding-left-10{
    padding: 0 10px 0 0;
}

.filter-green{
    filter: invert(31%) sepia(11%) saturate(5222%) hue-rotate(139deg) brightness(92%) contrast(84%);
}
.filter-white{
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}

.filter-gray{
    filter: invert(41%) sepia(5%) saturate(219%) hue-rotate(201deg) brightness(94%) contrast(87%);
}

.monto-disponible {
    padding-left: 0 !important;
    padding-right: 20px !important;
}

.moneda {
    padding: 8px 45px 8px 0 !important;
}

.scrolltabla {
    overflow-y: auto;
}

.box-header.with-border {
    padding-top: 20px;
    padding-bottom: 10px;
}

.flecha-size {
    width: 9px;
    height: 9px;

}

.logo-position {
    padding-top: 0;
    padding-right: 0;
    padding-left: 30px;
    padding-bottom: 0;
    margin-top: 16px;
}


#nuevaBanca {
    background-image: url("../images/nuevaBanca.png");
    background-repeat: no-repeat;
    background-size: 600px 500px;
}

#seriviosPopupImage {
    background-repeat: no-repeat;
    background-size: 650px 700px;
    width: 650px;
    height: 700px;
}

#seriviosPopupImageHome {
    /*background-image: url("../images/WEB-POPUP-HOME-102.jpg");*/
    background-repeat: no-repeat;
    background-size: 800px 800px;
}

#seriviosPopupContent{
    width: auto;
    height: auto;
}

@media only screen and (max-device-width: 700px) {
    #seriviosPopupImage {
        background-size: 100% 100%;
        width: 100%;
    }
    #seriviosPopupContent, #serviciosPopupHeader{
        width: 100%;
    }
}

#seriviosPopupImageHomeContent,#seriviosPopupImageHome  {
    width: 800px;
    height: 800px;
}


#nuevaBancaContent, #nuevaBanca {
    width: 600px;
    height: 500px;
}

.height-inherent {
    height: inherit;
}

.right-header {
    height: inherit;
    padding-top: 16px;
    text-align: left;
}

.noPadding {
    padding: 0 !important;
}

.noMargin {
    margin: 0 !important;
}

/*table.tablero > tbody > tr {*/
/*    height: 34px;*/
/*}*/

.background-J {
    background: #444444;
}

.background-F {
    background: white;
}

.footer {
    width: 960px;
    overflow: hidden;
    margin: 0 auto;

}

.box-empty {
    min-height: 485px;
}

.box-empty-whithout {
    min-height: auto;
}

.box-empty-service-white {
    min-height: 410px;
    text-align: center;
}

.box-empty-title {
    position: absolute;
    top: 50%;
    left: 25%;
    font-size: 3em;
}

.box-empty-title-product {
    position: absolute;
    top: 50%;
    left: 35%;
    font-size: 3em;
}

.box-empty-title-transac {
    position: absolute;
    top: 45%;
    left: 8%;
    font-size: 3em;
    text-align: center;
}

.box-empty-service {
    padding-top: 10%;
    font-size: 3em;
}


a.disabled {
    pointer-events: none;
    cursor: default;
}

b.caret.disabled {
    color: gray;
}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .active > a:hover {
    background-color: #B27A13;

}
.item-sub-menu {
    transition: all 0.3s ease-in-out 3s, visibility 4s linear 1.3s, z-index 0s linear 0.01s;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
}

.box-ms-info {
    background-color: rgba(67, 137, 135, 0.8);
    /*border-color: #438987 !important;*/
    width: 27%;
    position: absolute;
    right: 14px;
    z-index: 5;
    font-size: 15px;
    display: none;
}

.box-ms-error {
    background-color: rgba(128, 25, 19, 0.8) !important;
    /*border-color: #801913 !important;*/
    width: 27%;
    position: absolute;
    right: 14px;
    z-index: 5;
    font-size: 15px;
    display: none;
}

.box-ms-info {
    width: 27%;
    position: absolute;
    right: 14px;
    z-index: 5;
    font-size: 15px;
    display: none;
}

.box-ms-warning {
    background: #E9DDAA;
    margin-bottom: 1.5rem;
    border-radius: 1rem;
    padding: 1.5rem;
}

.box-ms-gray {
    background: rgba(234, 234, 234, 1);
    margin-bottom: 1.5rem;
    border-radius: 1rem;
    padding: 1.5rem;
}

.box-bg-info {
    background: rgba(217, 231, 231, 1);
    margin-bottom: 1.5rem;
    border-radius: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-left: 0px;
    margin-right: 0px;
}

.spinner-img {
    position: absolute;
    /*bottom: 50%;*/
    right: 50%;
    transform: translate(50%, 50%);
    z-index: 5;
    display: none;
}

.ball-spin-fade-loader {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 10 !important;
}

.loader {
    background-color: rgba(0, 0, 0, 0.18);
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1060;
    display: none;
}

.ball-spin-fade-loader > div {
    background-color: #438987 !important;
    margin: 2px;
}

td.td-empty {
    background: white;
}

.media-top.text-center {
    display: none;
}

.pdr0 {
    padding-right: 0;
}

.pdt0 {
    padding-top: 0;
}

.pdb0 {
    padding-bottom: 0;
}

.pdl0 {
    padding-left: 0;
}

/***************** LOGIN ************/

.fondo-imagen-login {
    background-image: url("../images/fondo-login-2.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}


.login-title-a {
    padding-right: 15px;
    padding-top: 5px;
    padding-left: 10px;
}

.login-title-b {
    padding: 5px 10px 0 15px;
}

.login-title-c {
    padding-right: 15px;
    padding-top: 5px;
    padding-left: 10px;
}

.login-a-tab {
    width: 100% !important;

}

.nav-tabs > li > a.list-b.login-a-tab {
    border-radius: 10px 10px 0 0;
}

.nav-tabs > li > a.list-c.login-a-tab {
    border-radius: 15px 4px 0 0;
}

.div-title-login {
    position: relative;
    left: 25%;
    right: 0;
}

.div-title-password-recovery{
	position: relative;
	left: 10%;
	right: 0;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

.square-div {
    padding-right: 0;
}

.div-recordar-usu {
    /*margin-top: 5px;*/
    padding-left: 10px;
}

.pdl15{
    padding-left: 15px;
}

.login-pass-btn {
    width: 60px;
    height: 63px;
    font-size: 21px;
    padding: 4px 6px 0 6px;
}

.teclado.col-md-4 {
    width: 28.333333% !important;
}

.pass-forgot {
    text-decoration: underline;
    text-decoration-color: #9e9e9e;

}

.login-ruc {
    margin-top: 15px;
}

.login-user {
    margin-top: 100px;
}

.login-user-legal {
    margin-top: 15px;
}

.login-pass {
    margin-top: 25px;
}


.login-tab {
    height: 447px;
}

.content-login {
    width: 400px;
    height: 600px;
    border-radius: 0px 10px 10px 0px;
    background-color: white;
}

.content-login-aside {
    width: 450px;
    height: 600px;
    border-radius: 10px 0px 0px 10px;
}

.shadowBox {
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.35);
}

.borderRadiusTopLeftRight {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.borderRadiusBottomLeftRight {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

ul.ul-poli li {
    color: red;
    margin-bottom: 9px;
}

.position-relative {
    position: relative;
}

.disabled-menu {
    pointer-events: none;
}

.cursor-disabled {
    cursor: no-drop;
}

a.a-hover.disabled-menu > span.nexa-light-white {
    color: #b7b3b3 !important;
}

.exitMenu {
    position: absolute !important;
    right: 0;
    background-color: #B27A13;
}

.exitMenu > a:hover {
    height: 57px !important;
}


.exitLabel {
    position: relative;
    top: 2px;
    margin-top: 5px;
}


.keyboard-margin {
    margin-left: 50px !important;
}

.login-opacity {
    opacity: 0.85;
}

.background-opacity {
    opacity: 0.8;
}

.mdl-footer {
    display: inline-block;
    margin: 0 5px;
}

.btn-mdl-sesion-green {
    text-decoration: none;
    background-color: #438987;
}

.mgl-0 {
    margin-left: 0 !important;
}

.pd-5 {
    padding: 5px;
}

.disclaimer-box {
    background: #438987;
    border: 0;
    color: #fff;
    /*margin: 10px 55px 0;*/
    border-radius: .6rem;
}

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

.disclaimer-confirmation-box {
    background: #B27A13;
    border: 0;
    color: #fff;
    margin: 0 15px 0;
}

.pdb-25 {
    padding-bottom: 25px;
}

.sipap-tranf-receive-container-row {
    display: flex;
}

.sipap-tranf-receive-tab-content {
    min-height: 450px;
}

.sipap-tranf-receive-see-more {
	color: var(--main-text-color-gray) !important;
}

.password-recovery-pd{
	padding: 10px 0 0 0;
    color: var(--main-text-color-gray) !important;
}
.btn-formularios{
    height: 3rem; border-radius: .8rem; font-weight: bold;
    width: 90%;
}

.btn-op-prepactado{
    height: 3.5rem; border-radius: .8rem; font-weight: bold;
    width: 100%; font-size: 1.3rem;
}

@media only screen and (min-width: 480px){
    .btn-formularios{
        width: 40%;
    }
}
.btn-formularios-pagos{
    height: 2.5rem; font-weight: bold;
    width: 100%;
}
@media only screen and (min-width: 480px){
    .btn-formularios-pagos{
        width: 70%;
    }
}
.contenedor_boton-pagos{
    display: flex;
    align-items: end;
    justify-content: end;
}
@media only screen and (max-width: 768px){
    .contenedor_boton-pagos{
        align-items: center;
        justify-content: center;
    }
}
/**  Transferencias **/
.operacion-exitosa-cabecera{
    background-color: var(--main-text-color-green);
    height: 15rem;
    color: white;
    border-radius: .6rem;
}
.operacion-fallida-cabecera{
    background-color: var(--main-text-color-gray);
    height: 15rem;
    color: white;
    border-radius: .6rem;
}
.operacion-exitosa-detalles{
    width: 100%;
    color: var(--main-text-color-gray);
    font-size: 1.4rem;
    margin: 0 auto;
}
@media only screen and (min-width: 778px){
    .operacion-exitosa-detalles{

    }
}

/*  MODAL  */

.modal-header {
    align-items: end;
}

.modal-header-session {
    border-bottom-color: #438987 !important;
    margin-left: 5px;
    margin-right: 5px;
}

.close {
    font-size: 3rem;
}

.modal-footer{
    justify-content: center;
}

.modal-footer button{
    width: 50%;
    border-radius: 5px;
    height: 3rem;
}

input[type="radio"], input[type="checkbox"] {
    accent-color: var(--main-text-color-green);
}
.input_container {
    position: relative;
    width: 100%;
}
/*@media only screen and (max-width: 400px){*/
/*    .input_container {*/
/*        width: 90%;*/
/*    }*/
/*}*/
.icon {
    position: absolute;
    bottom: 0px !important;
    right: 1rem;
    width: 24px;
    height: 100%;
    color: var(--main-text-color-gray-medium) !important;
}

input[type="date"] {
    height: 36px;
    color: #67676A;
}

.borde-detalle{
    border: 1px solid #EAEAEA;
    border-radius: .8rem;
}
.font-responsive{
    font-size: 1.4rem;
}
@media only screen and (max-width: 480px){
    .font-responsive{
        font-size: 1.2rem!important;
    }
}
@media only screen and (min-width: 992px){
    .borde-derecho{
        border-right: 1px solid #EAEAEA;
    }

    .borde-izquierdo {
        border-left: 1px solid #EAEAEA;
    }
}
@media only screen and (max-width: 992px){
    .borde-bottom{
        border-bottom: 1px solid #EAEAEA;
        padding-top: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .borde-top{
        border-top: 1px solid #EAEAEA;
        padding-top: 1.5rem;
        margin-top: 2rem;
    }

    .custom-div {
        display: flex;
        justify-content: center;
    }
}

.imgContrasena-responsive{
    position:absolute!important;
    bottom: 15px!important;
}

/* error style */
span.help-block.input-error, span.help-block.form-error {
    font-family: 'NexaLight';
    color: #801913;
    font-size: 0.9em;
    text-align:left;
}

.table-container {
    max-height: 300px; /* Tamaño máximo deseado */
    overflow-y: auto; /* Habilitar el scroll vertical */
}

.header-fijo.tablas thead {
    position: sticky;
    top: 0;
    z-index: 1;
}
.btn.btn-primary.text-uppercase.w-100.nexa-bold-green:hover {
    color: var(--main-text-color-green);
}

.text-itoken {
    max-width: 175px !important;
    font-size: 1rem;
}

.tabla-modal-personalizada th,
.tabla-modal-personalizada td{
    padding: 10px;
}

.tabla_autorizaciones-body th,
.tabla_autorizaciones-body td,
.tabla_autorizaciones-header th{
    padding: 3px;
}
.form-check-input {
    border-color: #ced4da; /* Un gris claro, similar al de los inputs de Bootstrap por defecto */
    /* Puedes usar un código hexadecimal como #E0E0E0, #F0F0F0, o un color RGB(220, 220, 220) */
}

.checkbox-grande-nativo {
    width: 25px;
    height: 25px;
    background-color: #fff;
    border: 1px solid;
    border-color: #ced4da;
}
.checkbox-grande-nativo:checked {
    background-color: #fff;
    border-color: #00a65a;
}
.form-check {
    display: flex; /* Confirmar que es un contenedor flex */
    align-items: center; /* Alinear verticalmente los items */
}

/*!* Estilos para la paginación circular con fondo verde y números ocultos *!*/
/*.dataTables_paginate .paginate_button {*/
/*    border-radius: 50%;*/
/*    width: 15px;*/
/*    height: 15px;*/
/*    line-height: 36px;*/
/*    text-align: center;*/
/*    background-color: #438987;*/
/*    color: white;*/
/*    font-weight: bold;*/
/*    cursor: pointer;*/
/*    text-indent: -9999px; !* Ocultar el texto dentro del botón *!*/
/*    margin: 1px;*/
/*}*/

/*.dataTables_paginate .paginate_button.current {*/
/*    background-color: #2ecc71; !* Color verde oscuro para la página actual *!*/
/*}*/

/*.paginate_button .page-link {*/
/*    display: none;*/
/*}*/

/*.dataTables_paginate .paging_simple_numbers {*/
/*    padding-right: 5px;*/
/*}*/

/*.dataTables_paginate .paginate_button.current {*/
/*    background-color: #2ecc71; !* Color verde oscuro para la página actual *!*/
/*}*/


/* Icon calendar */
.datepicker {
    background: url(../images/icon/calendar.svg) no-repeat right center;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 98% 50%;
}

input {
    padding-left: 1rem;
    padding-right: 1rem;
}

.crsr-pntr {
    cursor: pointer;
}