/*#region Fuente Roboto -------------*/
.roboto-thin {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.roboto-light {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.roboto-medium {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.roboto-bold {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.roboto-black {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.roboto-thin-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 100;
    font-style: italic;
}

.roboto-light-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.roboto-regular-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.roboto-medium-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.roboto-bold-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.roboto-black-italic {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
    font-style: italic;
}

/*#endregion Fuente Roboto ----------*/

html {
    font-size: 14px;
}
html {
    position: relative;
    min-height: 100%;
}
body {
    font-family: 'Roboto', sans-serif;
    font-size: var(--FontSize);
    margin-bottom: 60px;
    background-color: var(--Fondo);
    scrollbar-gutter: stable;
}
.texto_cortado {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--Color2);
}
.btn-primary {
    font-size: var(--FontSizeBtn);
    color: var(--Btn_Primary_Texto);
    background: var(--Btn_Primary);
    border-color: var(--Btn_Primary_Borde);
}
.btn-primary:hover {
    color: var(--Btn_Primary_Texto_hover);
    background-color: var(--Btn_Primary_hover);
    border-color: var(--Btn_Primary_hover);
    opacity: 0.7;
}
.btn-outline-primary {
    font-size: var(--FontSizeBtn);
    color: var(--btn_outline_primary);
    border-color: var(--btn_outline_primary);
}
.btn-outline-primary:hover {
    color: var(--Btn_Primary_Texto);
    background-color: var(--btn_outline_primary);
    border-color: var(--btn_outline_primary);
}
.btn-secondary {
    font-size: var(--FontSizeBtn);
    color: var(--Btn_Secondary_Texto);
    background: var(--Btn_Secondary);
    border-color: var(--Btn_Secondary_Borde);
}
.btn-secondary:hover {
    color: var(--Btn_Secondary_Texto_hover);
    background-color: var(--Btn_Secondary_hover);
    border-color: var(--Btn_Secondary_hover);
    opacity: 0.7;
}
.btn-success {
    font-size: var(--FontSizeBtn);
    color: var(--Btn_Primary_Texto);
    border-color: var(--btn_success);
}
.btn-success:hover {
    font-size: var(--FontSizeBtn);
    color: var(--Btn_Primary_Texto);
    background-color: var(--btn_success_hover);
    border-color: var(--btn_success_hover);
}
.ocultar {
    display: none !important;
}
.input_error {
    border-color: var(--ErrorInput) !important;
    box-shadow: 0 0 0 1px var(--ErrorInput);
}
.form-control.input_error:focus, .form-select.input_error:focus {
    border-color: var(--ErrorInput) !important;
    box-shadow: 0 0 0 1px var(--ErrorInput);
}
.form-text.error_text {
    color: var(--TextoError);
}
.text_left {
    text-align: left;
}
.text_right {
    text-align: right;
}
.text_center {
    text-align: center;
}
.text_justify {
    text-align: justify;
}
#ModalCargando .modal-dialog-centered {
    justify-content: center;
}
#ModalCargando .modal-content {
    width: 200px;
    background-color: transparent;
    border: none;
}
.spinner-border {
    width: 3rem;
    height: 3rem;
}
.spinner-border.text-primary {
    color:var(--Color1);
}
div:where(.swal2-container) .swal2-html-container {
    overflow: hidden;
}
/*#region Grid Layout -------------*/
.gridLayout {
    display: grid;
    grid-template-columns: auto;
}
.first_container {
    display: none;
}
.second_container {
    display: flex;
    flex-direction: column;
    padding: 12px;
}
@media (width >= 400px) {
    .gridLayout {
        justify-content: center;
    }

    .second_container {
        width: 400px;
    }
}
@media (width >= 768px) {
    html {
        font-size: 16px;
    }
}
@media (width >= 1024px) {
    .gridLayout.active_banners {
        justify-items: center;
        grid-template-areas: 'first secund';
        grid-template-columns: 1fr 1fr;
    }
    .gridLayout.active_banners .first_container {
        grid-area: first;
    }
    .gridLayout.active_banners .second_container {
        grid-area: secund;
    }
    .first_container {
        display: flex;
        flex-direction: column;
        padding: 12px;
    }
}
/*#endregion  Grid Layout ----------*/
/*#region Carrusel -------------*/
.carousel.slide {
    max-width: 550px;
}
.logo_coop_carrusel {
    display: flex;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--Separador);
}
.carousel_item_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.carousel_item_container .carousel_titulo {
    width: 460px;
    color: var(--Color1);
}
.carousel_item_container .carousel_subtitulo {
    font-size: 25px;
    color: var(--SubTitulo);
}
.carousel_item_imagen {
    display: flex;
    justify-content: center;
}
.carousel_item_imagen img {
    width: 80%;
}
.carousel_item_imagen h4 {
    position: absolute;
    right: 0px;
    bottom: 30px;
}
/*#endregion  Carrusel ----------*/
/*#region Login Juriscoop -------------*/
.login_jur .header_jur {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80px;
    background: var(--BG_Header);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.login_jur .header_jur_titulo {
    color: #FFF;
    font-size: 32px;
    font-weight: bold;
}
.login_jur .titulo_jur {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 10px 10px;
    border-bottom: 2px solid var(--Separador);
}
.login_jur .titulo_jur h2 {
    color: var(--Color1);
    margin-bottom: 0;
    margin-left: 10px;
    font-size: 22px;
    font-weight: 700;
}
#frmLoginJur h2 {
    color: var(--SubTitulo);
    text-align: center;
    margin-bottom: 20px;
    margin-left: 10px;
    font-size: 20px;
    font-weight: 700;
}
/*#endregion  Login Juriscoop ----------*/
/*#region pago de producto -------------*/
.pago_productos .second_container {
    width: 100%;
}
.header_pago_producto {
}
.pago_productos .div_tbl_facturacion {
    margin-top: 30px;
}
.pago_productos .div_tbl_facturacion h4 {
    font-size: 20px;
}
.pago_productos .titulo_tabla {
    color: var(--Color1);
    font-size: 18px;
    margin-bottom: 5px;
}
.div_tbl_facturacion td .form-check-input {
    width: 25px;
    height: 25px;
}

@media (width > 768px) {
    .pago_productos .tbl_resposive th.th_accion {
        width: 76px;
    }
    .pago_productos .tbl_resposive th.th_producto,
    .pago_productos .tbl_resposive td.td_producto {
        width: 290px;
    }
    .pago_productos .tbl_resposive th.th_valores,
    .pago_productos .tbl_resposive td.td_valores {
        width: 110px;
    }
    .pago_productos .tbl_resposive th.th_tipo_pago,
    .pago_productos .tbl_resposive td.td_tipo_pago {
        width: 232px;
    }
    .pago_productos .tbl_resposive .form-control,
    .pago_productos .tbl_resposive .form-select {
        font-size: 15px;
    }
    .pago_productos .tbl_resposive .tooltip.left .tiptext {
        width: 110px;
        right: 60px;
        top: 0;
    }
    .pago_productos .sec_totales {
        display: flex;
        justify-content: flex-end;
    }
    .pago_productos .sec_totales .card {
        width: 370px;
        align-items: center;
        justify-content: center;
    }
    .pago_productos .sec_totales .card-body {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .pago_productos .card-body p.TextTotal {
        font-size: 16px;
    }
    .pago_productos .card-body p.TextTotal span {
        font-weight: 700;
        color: red;
        padding-left: 10px;
    }
    .pago_productos .card-body .container_btnAccion {
        flex-direction: row;
    }
    .pago_productos .card-body .container_btnAccion .btn {
        width: 110px;
    }
}
/*#endregion Tooltip ----------*/
/*#region Tooltip -------------*/
.tooltip {
    position: relative;
    display: inline-block;
    opacity: 1;
    font-size: 14px;
    text-align: center;
    z-index: auto;
}
.tooltip .tiptext {
    visibility: hidden;
    width: 200px;
    background-color: #FFF;
    color: #20293f;
    border-radius: 3px;
    padding: 6px 3px;
    position: absolute;
    z-index: 1;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    border: 1px solid;
}
.tooltip .tiptext::after {
    content: "";
    position: absolute;
    border-width: 5px;
    border-style: solid;
}
.tooltip:hover .tiptext {
    visibility: visible;
}
.tooltip.top .tiptext {
    margin-left: -70px;
    bottom: 100%;
    left: 0;
}
.tooltip.top .tiptext::after {
    margin-left: -5px;
    top: 100%;
    left: 50%;
    border-color: #2E2E2E transparent transparent transparent;
}
.tooltip.bottom .tiptext {
    margin-left: -80px;
    top: 100%;
    left: 0;
}
.tooltip.bottom .tiptext::after {
    margin-left: -5px;
    bottom: 100%;
    left: 50%;
    border-color: transparent transparent #2E2E2E transparent;
}
.tooltip.left .tiptext {
    top: -5px;
    right: 110%;
}
.tooltip.left .tiptext::after {
    margin-top: -5px;
    top: 50%;
    left: 100%;
    border-color: transparent transparent transparent #2E2E2E;
}
.tooltip.right .tiptext {
    top: -5px;
    left: 110%;
}
.tooltip.right .tiptext::after {
    margin-top: -5px;
    top: 50%;
    right: 100%;
    border-color: transparent #2E2E2E transparent transparent;
}
/*#endregion Tooltip ----------*/
/*#region header opcion -------------*/
.header_opcion {
    display: flex;
    align-items: center;
    border: 1px solid var(--Color1);
    border-radius: var(--BorderRadio);
    margin-bottom: 20px;
}
.header_opcion.login {
    background: var(--BG_Header);
    border: none;
}
.header_opcion img {
    padding: 4px;
}
.header_opcion h2 {
    color: var(--Color1);
    padding: 4px;
    margin-bottom: 0;
    font-size: 16px;
    font-weight: 800;
    height: 30px;
    border-left: 1px solid var(--Separador);
}
.header_opcion.login h2 {
    color: #FFF;
    border-left: none;
    font-weight: 500;
    margin-left: 10px;
    font-size: 15px;
    line-height: 22px;
}
.container_subopcion {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.container_subopcion .btn_subopcion {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    border-bottom: 1px solid var(--BorderInput2);
    border-radius: 0;
    color: var(--BorderInput2);
    font-size: 12px;
}
.container_subopcion .btn_subopcion:hover {
    cursor: pointer;
}
.container_subopcion .btn_subopcion:focus {
    box-shadow: none;
}
.container_subopcion .btn_subopcion img {
    width: 16px;
    filter: grayscale(200%);
}
.container_subopcion .btn_subopcion.activeOpcion img{
     filter: none;
}
.container_subopcion .btn_subopcion.activeOpcion {
    color: var(--Color1);
    font-weight: 700;
    margin-bottom: 10px;
    border-bottom-color: var(--Separador);
}
.container_subopcion h1 {
    font-size: 20px;
    border-bottom: 2px solid var(--Separador);
    width: 100%;
    text-align: center;
    color: var(--Color1);
}
.container_subopcion.usuario {
    border-bottom: 2px solid var(--Separador);
}
.container_subopcion.usuario h1 {
    font-size: 20px;
    text-align: left;
    border-bottom: none;
}
.container_subopcion.usuario h1 > span {
    font-weight: 400;
}
.container_subopcion.usuario img {
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
}

@media (width >= 400px) {
    .container_subopcion h1 {
        font-size: 24px;
    }
    .container_subopcion .btn_subopcion {
        font-size: 14px;
    }
    .container_form p {
        font-size: 16px;
    }
}
@media (width >= 768px) {
    .container_subopcion.usuario h1 {
        font-size: 24px;
        text-align: left;
        border-bottom: none;
    }
}
/*#endregion header opcion ----------*/
/*#region container form -------------*/
.container_form {
    display: flex;
    flex-direction: column;
}
.container_form p {
    font-size: 15px;
    font-weight: 500;
    color: var(--SubTitulo);
}
.container_form .form-label {
    color: var(--Color1);
    font-weight: 500;
    margin-bottom: 0;
}
.container_form .form-select {
    background-image:url(../img/Flecha.svg);
}
.container_form .form-select,
.container_form .form-control {
    font-size: var(--FontSizeInput);
    border-color: var(--BorderInput);
    border-radius: var(--BorderRadio);
    color: var(--TextoInput);
}
.container_form .form-select option { 
    font-size: 12px;
}
.container_form #olvidoUsuario,
.container_form #olvidoClave {
    margin-top: -10px;
}
.container_form .lbl_registro {
    display: flex;
    justify-content: center;
    color: var(--Color1);
    padding: 10px;
    cursor: default;
}
.container_form .lbl_registro .link_form  {
    color: var(--Color1);
    margin-left: 5px;
}
.container_form .link_form {
    color: var(--Link_Form);
}
.container_form .link_form:hover {
    color: var(--Color1);
    text-decoration: none;
}
.container_form .EstadoTrn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}
.container_form .EstadoTrn img {
    width: 100px;
}
.container_form .EstadoTrn h2 {
    color: var(--Color1);
    font-weight: 800;
    font-size: 24px;
}
.container_form .EstadoTrn p {
    text-align: center;   
}
.btn_mas,
.btn_menos {
    color: var(--Separador);
    border-radius: var(--BorderRadio);
    width: 40px;
    padding: 0 7px;
}
/*#endregion container form ----------*/
/*#region Filtro -------------*/
.txt_buscar {
    border-right: none;
}
.txt_buscar:focus,
.btn_buscar:focus {
    box-shadow: none;
}
.btn_buscar {
    color: var(--Color1);
    border-left: none;
    padding: 0px;
}
.btn_buscar:hover {
    background: #FFF;
    color: var(--Color1);
    opacity: .8;
}
.btn_buscar div {
    border-left: 1px solid #6c757d;
    height: 28px;
    padding: 0px .35rem;
}
.section_items_filtro {
    height: 400px;
    overflow-y: auto;
    padding: 0 9px;
}
.section_items_filtro::-webkit-scrollbar {
    width: 5px;     /* Tamaño del scroll en vertical */
}
.section_items_filtro::-webkit-scrollbar-thumb {
    background: var(--Color1);
    border-radius: 10px;
}
.section_items_filtro::-webkit-scrollbar-track {
    background: var(--Separador);
    border-radius: 4px;
}
.section_items_filtro_as {
    height: 170px;
    overflow-y: auto;
    padding: 0 9px;
}

.section_items_filtro_as::-webkit-scrollbar {
    width: 5px; /* Tamaño del scroll en vertical */
}

.section_items_filtro_as::-webkit-scrollbar-thumb {
    background: var(--Color1);
    border-radius: 10px;
}

.section_items_filtro_as::-webkit-scrollbar-track {
    background: var(--Separador);
    border-radius: 4px;
}

.item_filtro {
    border: 1px solid var(--BorderInput);
    border-radius: 6px;
    padding: 10px;
    cursor: pointer;
    margin-bottom: 5px;
    user-select: none;
}
.item_filtro:hover {
    background: #dfdfdf;
    border-color: var(--Separador);
}
.item_filtro p {
    margin-bottom: 0;
}
.item_filtro .filtro_subtitulo {
    font-weight: 400;
}
.selected_opcion_filtro {
    border: 1px solid var(--BorderInput);
    border-radius: var(--BorderRadio);
    color: var(--TextoInput);
    display: flex;
    flex-direction: column;
    height: 55px;
    justify-content: center;
    padding: 10px;
}


@media (width >= 400px) {
    .section_items_filtro {
        height: 430px;
    }
    .section_items_filtro_as {
        height: 170px;
    }
}
/*#endregion Filtro ----------*/
/*#region select2 -------------*/
.select2-container {
    margin-top: 10px;
    width: 100% !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-right: 0;
    width: 270px;
}
.container_form .select2-container--default .select2-selection--single{
    height: 40px;
    color: var(--TextoInput);
    border-color: var(--BorderInput);
    border-radius: var(--BorderRadio);
    font-size: 16px;    
    padding: 0.375rem 0;
}
.container_form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
    right: 10px;
}
.container_form .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--Separador) transparent transparent transparent;
    background-image: url(../img/Flecha.svg);
    background-color: transparent;
    background-size: 16px 12px;
    background-repeat: no-repeat;
    border: none !important;
    height: 20px !important;
    width: 20px !important;
    margin: auto !important;
    top: 30%;
    left: auto !important;
}
.container_form .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--Separador) transparent;
}

@media (width >= 400px) {
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        width: 350px;
    }
}
/*#endregion select2 ----------*/
/*#region select con imagen -------------*/
.selectbox_img {
    width: 100%;
    margin: auto;
    position: relative;
}
.selectbox_img a {
    text-decoration: none;
}
.selectbox_img .contenido-opcion {
    display: flex;
    gap: 15px;
    padding: 0;
    transition: .2s ease all;
}
.selectbox_img .descripcion.nombre {
    width: 100%;
}
.selectbox_img .contenido-opcion svg {
    width: 50px;
    height: 50px;
}
.selectbox_img .contenido-opcion .textos{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.selectbox_img .contenido-opcion .conten_descripcion{
    display: flex;
    gap: 10px;
}
.select_img {
    width: 100%;
    display: flex;
    gap: 10px;
    background: #fff;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, .16);
    cursor: pointer;
    align-items: center;
    transition: .2s ease all;
    margin-bottom: 30px;
    padding: 5px;
    border-radius: var(--BorderRadio);
    position: relative;
    z-index: 200;
    border: 2px solid transparent;
}
.select_img.active,
.select_img:hover {
    box-shadow: 0px 5px 10px rgba(0, 0, 0, .16);
    border: 2px solid var(--Color2);
}
.select_img.active:before {
    content: "";
    display: block;
    height: 0;
    width: 0;
    border-top: 15px solid var(--Color2);
    border-right: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid transparent;
    position: absolute;
    bottom: -30px;
    left: calc(50% - 15px);
}
.select_img svg {
    font-size: 30px;
    color: var(--Color2);
}
.select_img .contenido-select {
    width: 100%;
}
.select_img .titulo {
    margin-bottom: 0;
    color: #000;
}
.select_img .descripcion {
    font-size: 12px;
    color: var(--SubTitulo);
    margin-bottom: 0;
}
.opciones {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 5px 10px rgba(0,0,0,.16);
    max-height: 400px;
    overflow: auto;
    z-index: 100;
    width: 100%;
    display: none;
}
.opciones.active {
    display: block;
    animation: fadeIn .3s forwards;
}
.opciones .contenido-opcion {
    padding: 5px;
}
.opciones .contenido-opcion:hover {
    background: var(--Color2);
}
.opciones .contenido-opcion .titulo {
    margin-bottom: 0;
    color: #000;
}
.opciones .contenido-opcion .textos {
    width: 70%;
}
.opciones .contenido-opcion .descripcion {
    font-size: 12px;
    color: var(--SubTitulo);
    margin-bottom: 5px;
}
.opciones .contenido-opcion:hover svg,
.opciones .contenido-opcion:hover .titulo,
.opciones .contenido-opcion:hover .descripcion {
    color: #fff;
}

@keyframes fadeIn {
    from {
        transform: translateY(-200px) scale(.5);
    }

    to {
        transform: translateY(0) scale(1);
    }
}

@media (width >= 768px) {
    .selectbox_img .descripcion,
    .selectbox_img .opciones .contenido-opcion .descripcion {
        font-size: 14px;
    }
}
/*#endregion select con imagen ----------*/
/*#region container medio pago -------------*/
.container_medio_pago {
    margin-top: 30px;
    margin-bottom: 20px;
}
.container_medio_pago .form-check {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
}
.container_medio_pago .form-check .form-check-input {
    margin-right: 10px;
}
.container_medio_pago .form-check .form-check-label {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 38.5px;
    border-left: 1px solid var(--BorderInput);
}
.container_medio_pago .medios_coop {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    padding: 0 10px;
    border: 1px solid var(--BorderInput);
    border-radius: var(--BorderRadio);
    margin-bottom: 10px;
}
.container_medio_pago .medios_coop img,
.container_medio_pago .otros_medios .form-check img{
    filter: grayscale(200%);
}
.container_medio_pago .medios_coop.activeOpcion {
    border: 1px solid var(--Color1);
}
.container_medio_pago .medios_coop.activeOpcion img {
    filter: none;
}
.container_medio_pago .otros_medios {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.container_medio_pago .otros_medios .form-check {
    align-items: center;
    display: flex;
    width: 29%;
    height: 50px;
    border: 1px solid var(--BorderInput);
    border-radius: var(--BorderRadio);
    padding-left: 30px;
    margin-bottom: 10px;
    margin-right: 10px;
}
.container_medio_pago .otros_medios .form-check.activeOpcion{
    border: 1px solid var(--Color1);
}
.container_medio_pago .otros_medios .form-check.activeOpcion img {
    filter: none;
}
.container_medio_pago .otros_medios .form-check.PSE.activeOpcion {
    border: 1px solid var(--Color1);
}

.container_medio_pago .otros_medios .form-check.PSE.activeOpcion img {
    filter: none;
}

.container_medio_pago .otros_medios .form-check.TC.activeOpcion {
    border: 1px solid var(--Color1);
}

.container_medio_pago .otros_medios .form-check.TC.activeOpcion img {
    filter: none;
}

.container_medio_pago .otros_medios .form-check.CB.activeOpcion {
    border: 1px solid var(--Color1);
}

.container_medio_pago .otros_medios .form-check.CB.activeOpcion img {
    filter: none;
}

.container_medio_pago .otros_medios .form-check.LP.activeOpcion {
    border: 1px solid var(--Color1);
}

.container_medio_pago .otros_medios .form-check.LP.activeOpcion img {
    filter: none;
}


.tooltip-primary ~ .tooltip > .tooltip-inner {
    background-color: var(--Fondo) !important;
}

.tooltip-primary ~ .tooltip > .tooltip-arrow {
    border-bottom-color: var(--Fondo) !important;
}
/*#endregion container medio pago ----------*/
/*#region container productos -------------*/
.container_btnAccion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.container_btnAccion .btn-primary.btnDisabled {
    background: var(--Disabled);
    border-color: var(--Disabled);
}
.container_btnBene {
    display: inline;
    flex-direction: column;
    gap: 10px;
}
.btnApp {
    margin-left: 5px !important;
    margin-top: 10px !important;
    font-size: 16px !important;
    font-weight: normal !important;
    height: 38px !important;
    width: 118px !important;
    border-radius: .25rem !important;
}
.container_mensaje_error p {
    margin-bottom: 0;
    font-size: 14px;
}
.container_resumen_trn {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    padding: 10px 10px 0 10px;
    border: none;
    border-radius: var(--BorderRadio);
    background: var(--Color3);
}
.container_resumen_trn p {
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    color: var(--SubTitulo);
}
.container_resumen_trn p.paquete,
.container_resumen_trn p.pines {
    flex-direction: column;
}
.container_resumen_trn p > span {
    color: var(--Color1);
}
.container_productos {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.container_productos .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 60px;
    border: 1px solid var(--BorderInput);
    border-radius: var(--BorderRadio);
}
.container_productos .form-check.activeOpcion {
    border: 1px solid var(--Color1);
}
.container_productos .form-check-input {
    width: 18px;
    height: 18px;
    margin: 0 0 0 -10px;
}
.container_productos .form-check-input:focus{
     box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--Color1);
}
.container_productos .form-check-input:checked {
    background-color: var(--Separador);
    border-color: var(--Separador);
}
.container_productos .form-check-label {
    display: flex;
    align-items: center;
    border-left: 1px solid var(--BorderInput);
    height: 100%;
    width: 100%;
    padding-left: 6px;
}
.container_productos .form-check-label section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 100%;
}
.container_productos .activeOpcion .form-check-label {
    border-left: 1px solid var(--Color1);
}
.container_productos .form-check-label p {
   margin: 0;
}
.container_productos .activeOpcion .form-check-label p {
   color: var(--Color1);
}
.container_productos .saldo_producto {
    padding-right: 5px;
    text-align: right;
    font-size: 17px;
    font-weight: 400;
}
.container_productos .form-check-label .numero_producto,
.container_productos .form-check-label .lbl_saldo_producto {
    font-size: 12px;
    font-weight: 400;
}
/*#endregion container productos ----------*/
/*#region container pago frecuente -------------*/
.container_pago_frecuente {
    margin-bottom: 20px;
}
.container_pago_frecuente .form-check-input:checked {
    background-color: #fff;
    border-color: var(--Color1);
    background-image: url(../img/Switch_checked.svg);
}
.container_pago_frecuente label {
    color: var(--TextoInput);
    user-select: none;
}
.container_pago_frecuente.activeOpcion label {
    color: var(--Color1);
}
.container_mensajes {
    margin-bottom: 10px;
    height: 40px;
}
#frmCodigoOtp #CodigoOtp {
    text-align: center;
}
#frmCodigoOtp .enlace {
    display: flex;
    justify-content: center;
}
#frmCodigoOtp .enlace a {
    color: var(--Color1);
    font-size: 16px;
}
.pago_frecuente {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.pago_frecuente p {
    margin-bottom: 0;
}
.pago_frecuente .lbl_info {
    width: 90px;
}
.agregar_pago_frecuente .divRecuerda p {
    font-size: 14px;
}
.agregar_pago_frecuente .divRecuerda span {
    font-weight: 700;
}

@media (width >= 400px) {
    .pago_frecuente .lbl_info {
        width: 120px;
    }
}
@media (width >= 768px) {
    .container_frecuente {
        max-height: 500px;
    }
}
/*#endregion container pago frecuente ----------*/
/*#region container terminos -------------*/
.container_check_terminos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.container_check_terminos .form-check-input {
    width: 20px;
    height: 20px;
}
.container_check_terminos .link_terminos,
.container_check_terminos .link_terminos a {
    color: var(--Color1);
    font-size: 16px;
    cursor: pointer;
    padding-left: 10px;
}
.div_terminos {
    max-height: 460px;
    overflow-y: auto;
    padding: 0 9px;
    scrollbar-color: var(--Color1) var(--BorderInput);
}
.div_terminos::-webkit-scrollbar-thumb {
    background-color: #333333; /* Color del thumb */
    border-radius: 10px; /* Radio de borde del thumb */
}
.div_terminos .ContenedorEncabezado {
    text-align: justify;
}
.div_terminos .SubTituloParrafo {
    color: black;
    font-weight: bold;
}
/*#endregion container terminos ----------*/
/*#region container pago pse -------------*/
.container_subopcion.pago_pse img {
    width: 84px;
    height: 84px;
}
.container_tipo_persona_pse {
    display: flex;
    gap: 30px;
    flex-wrap: nowrap;
}
.container_subopcion.respuesta_pse {
    flex-direction: column;
    margin-bottom: 40px;
}
.container_subopcion.respuesta_pse img,
.container_subopcion.vinculate img{
    width: 90px;
    height: 90px;
}
.container_subopcion.respuesta_pse h1,
.container_subopcion.vinculate h1 {
    margin-top: 15px;
    border: none;
}
.container_form #frmRespuesta_pse p {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-bottom: 0.3rem !important;
}
.container_form #frmRespuesta_pse p span {
    color: var(--Color3);
}
.container_subopcion.vinculate {
    flex-direction: column;
    margin-top: 40px;
    margin-bottom: 40px;
}
.container_form #frmVinculate,
.container_form #frmPaginaError {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 60vh;
}
.container_form #frmVinculate p,
.container_form #frmPaginaError p {
    text-align: center;
}
.container_frecuente {
    max-height: 460px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--Color1) var(--BorderInput);
}
.msjExitoso {
    color: var(--Color1) !important;
}
.msjRechazada {
    color: #FF0000 !important;
}
.msjFallida {
    color: #FF0000 !important;
}
.msjPendiente {
    color: #FFC000 !important;
}
/*#endregion container pago pse ----------*/
/*#region pagina error -------------*/
.pagina_error {
    flex-direction: column;
    margin-top: 40px;
    margin-bottom: 40px;
}
.pagina_error img {
    width: 90px;
    height: 90px;
}
.pagina_error h1 {
    margin-top: 15px;
    border: none;
}

.exception_error .pagina_error {
    margin: 0;
}
.exception_error .pagina_error img {
    width: 50px;
    height: 50px;
}
.exception_error .pagina_error h1 {
    margin-top: 15px;
    border: none;
}
.exception_error .item_error {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-top: 10px;
    overflow-wrap: anywhere;
}
.exception_error .item_error h5 {
    margin-bottom: 5px;
    color: var(--Color1);
}
.exception_error .item_error p {
    font-size: 14px;
    margin-bottom: 5px;
}

@media (width >= 768px) {
    .second_container.exception_error {
        width: 600px;
        height: 100vh;
        justify-content: center;
    }
    .exception_error .pagina_error {
        margin-bottom: 20px;
    }
    .exception_error .container_form {
        align-items: center;
    }
    .exception_error .item_error {
        flex-direction: row;
        align-items: center;
        gap: 5px;
    }
    .exception_error .item_error h5 {
        font-size: 18px; 
        width: 27%;
    }
    .exception_error .item_error p {
        font-size: 15px;
        width: 73%;
    }
    .exception_error .container_btnAccion {
        align-items: center;
        margin-top: 30px !important;
    }
    .exception_error .container_btnAccion a {
        width: 300px;
    }
}
/*#endregion pagina error ----------*/
/*#region container pago link -------------*/
.container_subopcion.pago_link img {
    width: 140px;
    height: 62px;
}
.container_tipo_link {
    display: flex;
    gap: 30px;
    flex-wrap: nowrap;
}

/*#endregion container pago link ----------*/
/*#region tarjeta credito -------------*/
.container_pago_tc svg.delete_tarjeta {
    color: var(--TextoError);
    width: 40px;
    height: 40px;
}
.container_pago_tc svg.delete_tarjeta:hover {
    color: var(--TextoError) !important;
    width: 45px;
    height: 45px;
}
/*#endregion tarjeta credito ----------*/
/*#region Central Pagos -------------*/
.central_pagos {
    position: relative;
    grid-template-areas: 'header'
        'productos'
        'servicios';
    gap: 10px;
    padding: 0px;
}
.central_pagos > section {
    text-align: center;
    padding: 20px 0;
    font-size: 30px;
    position: relative;
    z-index: 2;
}
.central_pagos .img_fondo{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    opacity: 0.6;
}
.central_pagos .header {
    grid-area: header;
}
.central_pagos .productos {
    grid-area: productos;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.central_pagos .productos h1,
.central_pagos .servicios h1 {
    width: 322px;
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: 700;
    color: var(--Color1);
}
.central_pagos .productos .btn_producto {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}
.central_pagos .productos .btn_producto a {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 95px;
    height: 155px;
    text-decoration: none;
    color: var(--Color1);
    border: 1px solid var(--Color1);
    border-radius: 10px;
    transition: transform 0.3s ease;
    font-size: 12px;
}
.central_pagos .productos .btn_producto a:hover {
    transform: translateY(-10px);
}
.central_pagos .productos .btn_producto img {
    width: 70px;
    padding-top: 14px;
}
.central_pagos .productos .btn_producto span {
    line-height: 22px;
    margin-top: 10px;
    width: 95%;
    border-top: 1px solid var(--Separador);
    padding-top: 5px;
    padding-bottom: 5px;
}
.central_pagos .servicios {
    grid-area: servicios;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.central_pagos .servicios .btn_servicios {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}
 .central_pagos .servicios .btn_servicios a {
    display: flex;
    align-items: center;
    width: 208px;
    height: 85px;
    text-decoration: none;
    color: var(--Color1);
    border: 1px solid var(--Color1);
    border-radius: 10px;
    transition: transform 0.3s ease;
}
.central_pagos .servicios .btn_servicios a:hover {
    transform: translateY(-10px);
}
.central_pagos .servicios .btn_servicios img {
    width: 50px;
    height: 50px;
    padding: 6px;
}
.central_pagos .servicios .btn_servicios .texto_servicio {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-left: 1px solid var(--Separador);
    height: 90%;
    margin-left: 5px;
    padding-left: 10px;
    text-align: left;
}
.central_pagos .servicios .btn_servicios span {
    font-size: 14px;
    line-height: 20px;
}
.central_pagos .servicios .btn_servicios span.texto1 {
    font-weight: 700;
}
.central_pagos .servicios .btn_servicios span.texto2 {
    color: var(--TextoInput);
    font-size: 12px;
}

@media (width >= 768px) {
    .page_central_pagos {
        /*background-image: url("../img/ImgFondo.png");*/
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }
    .gridLayout.central_pagos {
        justify-content: normal;
    }
    .central_pagos > section {
        padding: 20px 0;
    }
    .central_pago .header {
        display: flex;
    }
    .central_pago .productos {
        gap: 10px;
    }
    .central_pagos .productos .btn_producto {
        flex-wrap: nowrap;
        gap: 20px;
    }
    .central_pagos .productos .btn_producto a {
        width: 135px;
        font-size: medium;
    }
    .central_pagos .productos .btn_producto div {
        width: 165px;
        height: 165px;
    }
    .central_pagos .productos .btn_producto img {
        width: 80px;
    }
    .central_pagos .servicios .btn_servicios {
        padding: 0 20px;
        justify-content: space-between;
        gap: 20px;
    }
}
/*#endregion Central Pagos ----------*/
/*#region Recaudo empresarial -------------*/
.recaudo_empresarial {
    position: relative;
    grid-template-areas: 'header'
        'work_area';
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
}
.recaudo_empresarial .img_fondo {
    display: none;
}
.recaudo_empresarial > header,
.recaudo_empresarial > section { 
    text-align: center;
    padding: 0px 0;
    font-size: 30px;
    position: relative;
    z-index: 2;
}
.recaudo_empresarial header {
    grid-area: header;
    display: flex;
    justify-content: center;
}
.recaudo_empresarial .work_area {
    grid-area: work_area;
}
.recaudo_empresarial .work_area #frmRecaudoEmpresarial {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
}
#frmRecaudoEmpresarial h1 {
    display: none;
}
#frmRecaudoEmpresarial .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-right: 0;
    width: 250px;
}
#frmRecaudoEmpresarial .select2-container--default .select2-selection--single .select2-selection__clear {
    font-size: 24px;
    margin-top: -7px;
    color: #ff4a4a;
    margin-right: 26px;
}
#frmRecaudoEmpresarial .container_btnAccion {
    margin-top: 20px;
    flex-direction: row;
    justify-content: center;
}
#frmRecaudoEmpresarial .tab-pane .RecaudoPaso1,
#frmRecaudoEmpresarial .tab-pane .RecaudoPaso2 {
    text-align: left;
}
#frmRecaudoEmpresarial .container_medio_pago {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0px;
    gap: 5px;
}
#frmRecaudoEmpresarial .container_medio_pago .otros_medios {
    width: 100%;
}
#frmRecaudoEmpresarial .container_medio_pago .otros_medios .form-check {
    width: 100%
}

@media (width >= 768px) {
    .page_recaudo_empresarial {
        /*background-image: url("../img/ImgFondo.png");*/
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }
    .page_recaudo_empresarial .select2-container {
        width: 550px !important;
    }
    .recaudo_empresarial.gridLayout {
        justify-content: start;
    }
    .recaudo_empresarial .img_fondo {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
        opacity: 0.6;
    }
    .recaudo_empresarial header {
        justify-content: start;
    }
    #frmRecaudoEmpresarial h1 {
        display: block;
        font-size: 22px;
        color: var(--Color1);
        width: 70%;
        margin-bottom: 25px;
        padding-bottom: 20px;
        border-bottom: 2px solid var(--Separador);
    }
    #frmRecaudoEmpresarial h2 {
        font-size: 21px;
    }
    #frmRecaudoEmpresarial #lblIdTrnRecaudo {
        width: 550px;
    }
    #frmRecaudoEmpresarial .select2-container--default .select2-selection--single .select2-selection__rendered {
        width: 500px;
        padding-right: 20px;
    }
    #frmRecaudoEmpresarial .tab-pane .RecaudoPaso1,
    #frmRecaudoEmpresarial .tab-pane .RecaudoPaso2 {
        text-align: left;
        width: 580px;
    }
    #frmRecaudoEmpresarial h1 {
        width: 59%;
    }
    #frmRecaudoEmpresarial .container_medio_pago .otros_medios,
    #frmRecaudoEmpresarial .container_medio_pago .medios_coop {
        width: 49%;
    }
}
@media (width >= 1024px) {
    .recaudo_empresarial .work_area {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .recaudo_empresarial .work_area .container_form {
        width: 90%;
    }
}
@media (width >= 1440px) {
    #frmRecaudoEmpresarial h1 {
        width: 40%;
    }
}
/*#endregion Recaudo empresarial ----------*/
/*#region Actividad Social-------------*/
.cssDivCheck {
    display: inline-flex;
}
.cssCheck {
    width: 2.5em !important;
    height: 1.5em !important;
}
.cssCheckTercero {
    width: 1.5em !important;
    height: 1.5em !important;
}
.csstextCheck {
    margin-left: 10px;
    font-weight: 400 !important;
    text-align: justify;
}
.csstextDatos {
    font-size: 12px !important;
    text-align: justify;
}
/*#endregion Actividad Social-------------*/
/*#region Wizard-------------*/
#wizardRecaudo .navbar {
    width: 300px;
}
#wizardRecaudo .navbar-inner {
    width: 100%;
}
#wizardRecaudo .nav {
    justify-content: space-between;
}
#wizardRecaudo .nav li a {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--Color1);
    font-weight: 700;
    padding: 10px;
}
#wizardRecaudo .svg-icon {
    color: var(--Color1);
}
#wizardRecaudo .svg-icon svg {
    width: 30px;
    height: 30px;
}
#wizardRecaudo .nav li a span {
    font-weight: normal;
    color: var(--SubTitulo);
    width: 100px;
    font-size: 14px;
    line-height: 14px;
    margin-bottom: 4px;
}
#wizardRecaudo .nav li.disabled {
    user-select: none;
    background: var(--Wizard_Paso_Disabled);
    opacity: 0.7;
    border-radius: 10px;
}
#wizardRecaudo .nav li.disabled .svg-icon,
#wizardRecaudo .nav li.disabled a,
#wizardRecaudo .nav li.disabled a span {
    color: var(--Wizard_Paso_Disabled_Texto);
}
.progress {
    margin-bottom: 15px;
}
.progress-bar {
    background-color: var(--Wizard_Progress_Bar);
}
@media (width >= 768px) {
    #wizardRecaudo .navbar {
        width: 550px;
    }
}
/*#endregion Wizard ----------*/
/*#region Tabla responcive-------------*/
@media (width <= 768px) {
    .tbl_resposive thead {
        display: none;
    }
    .tbl_resposive tbody, tr {
        display: block;
        width: 100%;
    }
    .tbl_resposive tr {
        margin-bottom: 1rem;
        border-bottom: 2px solid #ddd;
    }
    .tbl_resposive td {
        display: block;
        text-align: right;
        padding-left: 30%;
        position: relative;
    }
    .tbl_resposive td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 30%;
        padding-left: 10px;
        font-weight: bold;
        text-align: left;
    }
}

/*#endregion Tabla responcive ----------*/
/*#region Tabla solo movil-------------*/
div.table {
    width: 100%;
}
div.item {
    margin-bottom: 10px;
    padding: 0 10px;
}
div.table div.row {
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: row;
    font-size: 12px;
}
div.tbody, div.thead {
    border: 1px solid #ccc;
    padding: 5px;
    text-align: left;
    width: 50%;
}
div.thead {
    width: 25%;
}
div.tbody {
    width: 75%;
}
div.thead {
    background-color: #eee;
}
.container_accion_table div {
    height: 46px;
}
.container_accion_table div.tbody {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}
.tbody .texto_cortado {
    display: block;
    width: 210px;
}
.container_accion_table div .btn {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    font-size: 14px;
}
.container_accion_table div .btn svg {
    width: 14px;
    height: 14px;
}
@media (width >= 400px) {
    div.table div.row {
        font-size: 14px;
    }
    .tbody .texto_cortado {
        width: 272px;
    }
    .container_accion_table div .btn svg {
        width: 24px;
        height: 24px;
    }
}
/*#endregion Tabla solo movil ----------*/
/*#region Cupo compra-------------*/
.detalle_cupo h6 {
    display: flex;
    justify-content: space-between;
}
.detalle_cupo h6 span {
    color: var(--Color1);
}
.pregunta_cupo {
    background-color: var(--Color3);
    border-radius: var(--BorderRadio);
    padding: 20px;
}
.pregunta_cupo h5 {
    font-size: 16px;
    color: var(--SubTitulo);
}
.pregunta_cupo p {
    font-weight: normal;
}
.check_politica_cupo {
    padding-top: 10px;
    padding-bottom: 10px;
    user-select: none;
}
.check_politica_cupo .form-check-input {
    width: 20px;
    height: 20px;
}
.check_politica_cupo .form-check-label {
    padding-left: 10px;
    line-height: 18px;
}
.check_politica_cupo a {
    color: var(--Color1);
}
.check_politica_cupo a:hover {
    color: #055eff;
}
.pregunta_cupo a.btn {
    font-size: 15px;
    height: 30px;
    line-height: 16px;
    color: var(--Color1);
    border-color: var(--Color1);
}
.pregunta_cupo a.btn:hover {
    color: #FFF;
    border: none;
}
@media (width >= 400px) {
    .check_politica_cupo .form-check-label {
        line-height: 30px;
    }
}
/*#endregion Cupo compra ----------*/
/*#region Tabla Producto-------------*/
.divOperaCss {
    width: 100%;
}
.h4Css {
    font-weight: bold; 
    color: black;
}
.h4_2Css {
    font-weight: bold;
    color: black;
    padding-top: 20px;
}
.trCss {
    height: 32px;
}
.trScopeCss {
    display: none;
}
.tarjetaAddCss {
    padding-top: 10px;
    font-size: 14px;
}
.tarjetaAdd_1Css {
    height: 0;
}
.progressWRCss {
    width: 0%;
}
.pagoProd_1 {
    font-size: 13px;
}
.pagoProd_2 {
    font-size: 14px;
    text-align: left;
}
.pagoProd_3 {
    font-size: 14px;
    text-align: right;
}
.pagoProd_4 {
    font-size: 12px;
    text-align: left;
}
.pagoProd_5 {
    font-size: 12px;
    text-align: right;
}
.pagoProd_6 {
    font-size: 14px;
    text-align: left;
    font-weight: bold;
    color: red;
}
.pagoProd_7 {
    font-size: 14px;
    text-align: right;
    font-weight: bold;
    color: red;
}
.svg-hidden {
    display: none !important;
}
/*#endregion Tabla Producto ----------*/

.mb-3 {
    margin-bottom: 0.5rem !important;
}

.mb-2 {
    margin-bottom: .3rem !important;
}