@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');

/* PALETA DE COLORES */
:root {
    --Dark-Blue: #263057;
    --Gray-Dark: #737373;
    --Gray-Light: #ECECEC;
    --Gray-Medium: #B3B3B3;
    --Rojo-Alerta: #AD0707;
    --Verde-Alerta: #1A6709;
    --Aqua: #00A88F;
    /* Texto */
    --ADarkBlue: #263057;
    --ADarkGray: #737373;
    /* Principales */
    --AAqua: #00a88f;
    --ABordo: #822d5e;
    --AAzul: #24378f;
    /* Secundarios */
    --ACoral: #ef6c64;
    --AAmarillo: #ffc678;
    --AGrayMedium: #b3b3b3;
}


/*DESKTOP FIRST*/

body {
    font-size: 1.4rem;
}

.close {
    font-size: 30px !important;
    color: #263057 !important;
    opacity: 1 !important;
}

.vnone {
    visibility: hidden;
}
#ownStyle { 
    padding-top: 45px;
    box-sizing: border-box;
}

#ownStyle > div.body-content > div.contrib-filters-options.border-bottom.row > div > div > div.select-oblig.\/.h-100.w-100.align-items-center.col-3.col-lg-3.col-sm-8 > span {
    background-color: #fff;
    border: 1px solid var(--AAzul);
    border-right: none;
    font-weight: bolder;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    color: var(--ADarkBlue);
}

#ownStyle > div.body-content > div.contrib-filters-options.border-bottom.row > div > div > div.form-group.col-6 > div > span {
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
    background-color: white;
    border-color: #263057 !important;
    border: 1px solid;
    font-weight: bolder;
    min-width: 165px !important;
    margin-left: 40px !important;
}

#selectPaginado{
    min-width: 22%;
}

#selectPaginado, #searchCliente, #selectColaborador {
    margin: 5px 5px 5px 5px;
    display: flex;
}

#colaboradoresPorSuscriptor {
    width: 170px;
    margin-left: 0px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: inherit;
}

#SelectEntradas_Component .ASelect > div > p {
    font-weight: bolder;
}

.rh-name.col > div {
    margin: auto;
}

    .rh-name.col > div > p {
        margin-bottom: 0;
    }

.btn-errepar-venc {
    background: #00a88f;
    border: 0;
    color: #fff;
    border-radius: 23px !important;
    width: 299px;
    height: 44px;
    font-size: 18px;
    font-weight: 700;
    line-height: 21.13px;
    letter-spacing: 0.05em;
    justify-content: center;
}

    .btn-errepar-venc:enabled:hover {
        color: #fff;
        text-decoration: none;
        background: var(--AAqua) !important;
        box-shadow: 0px 0px 4px 0px #24378F66;
    }

    .btn-errepar-venc.disabled, .btn-errepar-venc:disabled {
        color: #fff;
        text-decoration: none;
        background-color: var(--Gray-Dark);
    }

.btn-errepar-outlined-venc {
    background: #fff;
    border: 0;
    color: #00a88f;
    border-radius: 23px !important;
    width: 299px;
    height: 44px;
    font-size: 18px;
    font-weight: 700;
    line-height: 21.13px;
    letter-spacing: 0.05em;
    justify-content: center;
}

    .btn-errepar-outlined-venc:enabled:hover {
        color: #00a88f;
        text-decoration: none;
        background: #fff;
        box-shadow: 0px 0px 8px 0px #24378F99;
    }

    .btn-errepar-outlined-venc.disabled, .btn-errepar-outlined-venc:disabled {
        background-color: #fff;
        text-decoration: none;
        color: var(--Gray-Dark);
    }

.rb-actions-edit-mail {
    color: var(--Dark-Blue);
}

    .rb-actions-edit-mail:hover {
        color: #24378F;
        filter: none !important;
    }

#enviarDesktop {
    margin: auto;
    padding: 20px 0px 20px 0px;
    align-items: center;
}

#enviarMobile {
    display: none;
}

#ownStyle > div.body-content > div.container.contrib-main-buttons.\/.row > span {
    font-family: "Roboto";
    font-size: 16px;
    font-weight: 700;
    line-height: 18.75px;
    text-align: left;
}

#avisoEnvios {
    display: flex;
    height: 76px;
    top: 140px;
    left: 120px;
    padding: 16px 16px 16px 24px;
    gap: 0px;
    border-radius: 8px;
    border: solid var(--Rojo-Alerta);
    border-width: 1px 1px 1px 8px;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
}

    #avisoEnvios > div {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

        #avisoEnvios > div > span {
            color: var(--Rojo-Alerta);
            font-size: 16px;
            font-weight: 700;
            text-align: left;
            margin: 5px;
        }

            #avisoEnvios > div > span.material-symbols-outlined {
                font-size: 20px;
            }

#navMobile, #mobileFilters {
    display: none;
}

.form-control {
    color: #263057 !important;
    border-color: #263057 !important;
    border-radius: 8px;
}

#txtEmail {
    height: 40px;
}

.ultimo-envio-texto{
    display: contents;
}

.spinner-border-lg {
    color: var(--AAqua) !important;
    width: 4rem;
    height: 4rem;
    margin: auto;
}

.envioError {
    color: #EC221F !important;
}

.envioOk {
    color: var(--Verde-Alerta) !important;
}

/* Results */
.rh-checkbox, .rh-recibe, .rh-name, .rh-ultimoEnvio {
    position: relative;
}

.contrib-main-buttons button.contring-btn-action {
    display: flex;
    align-content: center;
    padding: 7px !important;
    border-radius: 100px;
    background-color: #00A88F;
    border: none;
    color: #fff;
}

    .contrib-main-buttons button.contring-btn-action:hover {
        box-shadow: 0px 0px 8px rgba(36, 55, 143, 0.6);
    }

.contribTable > *, .modal-body {
    color: var(--ADarkBlue) !important;
}

.contribTable .border-bottom {
    border-color: var(--AGrayMedium) !important;
}

.container span.sortBy {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    padding: 6px;
    float: right;
    cursor: pointer;
    position: absolute;
    z-index: 999;
    right: 8px;
}

.container span.sortByToggle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23010101' d='M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z'/%3E%3C/svg%3E");
}

.container .results-header,
.container .results-body {
    height: 42px;
    border-radius: 2px;
}

.container .results-header {
    width: 1500px;
    height: 44px;
    border-bottom: none !important;
    font: 500 14px 'Roboto';
    font-weight: bold;
    letter-spacing: .3px;
    border: 1px solid var(--Gray-Light) !important;
    padding: 0px 16px 0px 16px;
    gap: 0px;
    border-radius: 8px 8px 8px 8px;
    justify-content: space-between;
    margin: 4px 0px 0px 0px;
    display: inline-flex;
}

.container .results-body {
    font: 400 13px 'Roboto';
    border: 1px solid var(--AGrayMedium) !important;
    width: 1500px;
    height: 66px;
    padding: 0px 16px 0px 16px;
    gap: 0px;
    border-radius: 8px 8px 8px 8px;
    justify-content: space-between;
    margin: 4px 0px 4px 0px;
}

    .container .results-body:hover {
        background-color: rgba(241, 114, 114, 0.008);
    }

    .container .results-header .rh-checkbox,
    .container .results-body .rb-checkbox {
        box-sizing: border-box;
        width: auto;
        padding: 0 16px;
        display: flex;
        align-items: center;
    }

        .container .results-header .rh-checkbox input[type='checkbox'],
        .container .results-body .rb-checkbox input[type='checkbox'] {
            -webkit-appearance: none;
            -moz-appearance: none;
            height: 18px;
            width: 18px;
            border: #5F6368 2px solid;
            border-radius: 3px;
            outline: none;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(.25,.8,.25,1);
        }

            .container .results-header .rh-checkbox input[type='checkbox']:checked,
            .container .results-body .rb-checkbox input[type='checkbox']:checked {
                border-color: var(--Dark-Blue);
                background-color: var(--Dark-Blue);
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z' fill='white' /%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-size: 100%;
                background-position: center;
            }

            .container .results-header .rh-checkbox input[type='checkbox']:active,
            .container .results-body .rb-checkbox input[type='checkbox']:active {
                background-color: var(--Dark-Blue);
                box-shadow: 0 0 0 1px rgba(0, 102, 67, .35);
            }

            .container .results-body .rb-checkbox input[type='checkbox']:disabled {
                border: #B3B3B3 2px solid;
                cursor: default;
                pointer-events: none;
            }

.rh-recibe, .rh-name, .rh-ultimoEnvio {
    cursor: pointer;
}

.rh-recibe {
    display: inline-block !important;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.rb-recibe {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    justify-content: center;
}

    .rb-recibe.col > span {
        font-size: 12px;
        font-weight: 400;
        text-align: left;
    }

    .rb-recibe.col > div > span {
        font-size: 16px;
    }

.rh-name {
    display: inline-flex;
    align-items: center;
}

.rh-name,
.rb-name {
    box-sizing: border-box;
    padding: 0 16px 0 12px;
}

.rb-name {
    display: inline-flex;
    white-space: nowrap;
    align-items: center;
}

    .rb-name.col-md-4.col-sm-6 > div {
        display: grid;
    }

        .rb-name.col-md-4.col-sm-6 > div > span {
            max-width: 300px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

.rh-recibe,
.rb-recibe {
    box-sizing: border-box;
    padding: 0 16px 0 12px;
}

div.table-body > div > div > div {
    /*display: inline-block;*/
}

.rh-mail,
.rb-mail {
    width: 226px;
    box-sizing: border-box;
    padding: 0 16px 0 12px;
}

.rb-mail {
    font-size: 14px;
}

.rb-oblig .badge {
    padding: 3px 6px;
    font: 500 10px 'Roboto';
    text-transform: uppercase;
}

.rb-oblig .badge-IVA {
    background-color: rgba(128, 0, 128, .15);
    color: purple;
}

.rb-oblig .badge-example {
    background-color: rgb(255, 0, 0, .15);
    color: red;
}

.rb-oblig .badge-primary {
    background-color: rgba(0, 0, 255, .15);
    color: rgb(0, 0, 255);
}

.rb-recibe.col > div {
    align-items: baseline;
}

.rh-ultimoEnvio,
.rb-ultimoEnvio {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
}

.rb-ultimoEnvioHace {
    display: none;
}

/* Modals */
.modal {
    padding: 14px 24px;
    font: 400 14px 'Roboto';
    border-radius: 8px;
}

.modal-dialog {
    height: 360px;
    max-width: 565px;
}

.modal-content {
    min-height: 100%;
}

.modal-header {
    border-bottom-color: #fff;
    margin: 14px 18px 0px 18px;
    display: grid;
    justify-content: normal;
}

    .modal-header button {
        outline: none;
    }

.modal-title {
    font-family: "Raleway";
    font-size: 24px;
    font-weight: 700;
    line-height: 28.18px;
    text-align: left;
    color: var(--Dark-Blue);
    margin: 16px;
}

.modal-body {
    padding: 0px 24px;
    margin: 0px 24px 0px 24px;
}

    .modal-body form label {
        font: 500 11px 'Roboto';
        color: rgba(0, 0, 0, 0.53);
        text-transform: uppercase;
        letter-spacing: .3px;
    }

.modal-footer {
    border-top-color: #fff;
    padding: 8px 24px;
    margin: 24px;
}

/*MODAL ERROR*/
#modalError > div > div > div.modal-body > span {
    margin: 5px;
    font-size: 80px;
    display: none;
}

#modalError > div > div > div.modal-body > div {
    display: flex;
    flex-direction: row;
}

    #modalError > div > div > div.modal-body > div > span.material-symbols-outlined {
        color: var(--Rojo-Alerta);
        /*font-size: 16px;*/
        font-weight: 700;
        text-align: left;
        margin: 5px;
        font-size: 20px;
    }

    #modalError > div > div > div.modal-body > div > span:nth-child(2) {
        font-size: 16px;
        margin: 5px;
        font-weight: 400;
    }

/*MODAL ENVIAR VENCIMIENTOS*/
#enviarVencimientosModal > div > div > div.modal-body > div {
    flex-direction: row;
    justify-content: space-between;
}

#buttonListaCompleta {
    cursor: pointer;
    margin-left: 1rem;
}

/*MODAL NUEVO EMAIL*/
#nuevoEmailModal > div > div > div.modal-body > div {
    display: flex;
    flex-direction: row;
    align-items: center;
}

#nuevoEmailForm > label {
    font-family: "Roboto";
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    text-align: left;
    color: var(--Dark-Blue);
    text-transform: none;
}

#nuevoEmailModal > div > div > div.modal-body > div > span.material-symbols-outlined {
    color: var(--Dark-Blue);
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    text-align: left;
    margin: 5px;
}

#nuevoEmailModal > div > div > div.modal-body > div > span:nth-child(2) {
    font-size: 16px;
    margin: 5px;
    font-weight: 400;
}

#btnNota {
    border-radius: 5px !important;
}

.btn_salir {
    color: #00A88F !important;
    font-size: 18px !important;
    border: none !important;
    background-color: transparent;
}

.btn_guardar {
    background-color: #00A88F !important;
    font-size: 18px !important;
    border: 1px solid #00A88F;
    color: white;
}

.modal-footer button {
    width: 35%;
    height: 32px;
}

    .modal-footer button svg {
        margin-right: 8px;
    }

    .modal-footer button.btn-light {
        margin-right: auto;
    }

        .modal-footer button.btn-light svg {
            fill: rgba(0, 0, 0, .53);
        }


    .modal-footer button.btn-primary svg {
        fill: rgba(255, 255, 255, 1);
    }
.mensaje-error {
    color: red;
}

.borde-rojo {
    border-color: red !important;
}
    /*  Tooltip  */
    .tooltip {
    font-family: 'Roboto' !important;
}

.main-header {
    width: 100%;
    height: 60px;
    background-color: white;
}

    .main-header nav .nav-link {
        color: rgba(0, 0, 0, .54);
        padding: 18px 12px;
    }

        .main-header nav .nav-link.active {
            color: rgba(0, 0, 0, 1);
            border-bottom: 1px solid #00653c;
        }

/* Sub header */
.sub-header {
    width: 100%;
    height: 60px;
}

    .sub-header h5 {
        color: #979797;
    }

        .sub-header h5 span {
            color: #00653C;
        }

.dropdown-toggle {
    color: rgba(0, 0, 0, .54);
}

    .dropdown-toggle::after {
        vertical-align: 3px;
        margin-left: 8px;
    }


.contrib-main-buttons .btn-errepar-outlined {
    height: 32px;
    padding: 0 16px;
    color: black;
    background-color: transparent;
    border: 1px solid #000000;
    border-radius: 100px;
    font-size: 14px;
    outline: none;
}

    .contrib-main-buttons .btn-errepar-outlined:hover {
        background-color: #000000;
        color: white;
        border-color: #000000;
    }

    .contrib-main-buttons .btn-errepar-outlined:active {
        background-color: #222;
    }

.contrib-filters-options {
    min-height: 60px;
    align-items: center;
    background: var(--Gray-Light);
}

#search-icon {
    display: none;
}

.contrib-filters-options .searchbox input[type="text"] {
    width: 470px;
    height: 32px;
    padding: 0 12px;
    outline: none;
    margin-left: 10px;
    border: 1px solid #B3B3B3;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-right: none;
}

.contrib-filters-options .searchbox button {
    height: 32px;
    width: 32px;
    border: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-left: none;
    background: #263057;
    color: #263057;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.2239 10.6912H11.8164L15.5589 14.4412L14.4414 15.5587L10.6914 11.8162V11.2237L10.4889 11.0137C9.63391 11.7487 8.52391 12.1912 7.31641 12.1912C4.62391 12.1912 2.44141 10.0087 2.44141 7.31616C2.44141 4.62366 4.62391 2.44116 7.31641 2.44116C10.0089 2.44116 12.1914 4.62366 12.1914 7.31616C12.1914 8.52366 11.7489 9.63366 11.0139 10.4887L11.2239 10.6912ZM3.94141 7.31616C3.94141 9.18366 5.44891 10.6912 7.31641 10.6912C9.18391 10.6912 10.6914 9.18366 10.6914 7.31616C10.6914 5.44866 9.18391 3.94116 7.31641 3.94116C5.44891 3.94116 3.94141 5.44866 3.94141 7.31616Z' fill='white'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
    outline: none;
}

.select-oblig span {
    height: 32px;
    display: flex;
    align-items: center;
    padding: 0 11px;
    border: 1px solid #D7D6DB;
}

.AlphaSelectComponent {
    background-color: white;
    width: 100%;
    height: 32px;
    box-sizing: border-box;
    padding: 0 12px;
    outline: 0px;
    margin: 0px 5px 0px 5px;
    border-radius: 8px;
    color: #263057 !important;
    font-weight: bolder;
    border-color: #263057 !important;
}

.contrib-table-head {
    font-weight: 500;
}

.contrib-table-body {
    color: rgba(0,0,0, .75);
}

.contrib-table-head,
.contrib-table-body {
    height: 42px;
    border-bottom: 1px solid #D7D6DB;
    letter-spacing: .25px;
}

.contrib-table-head__checkbox input[type="checkbox"],
.contrib-table-body__checkbox input[type="checkbox"] {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    padding: 2px;
    border: 2px solid #D7D6DB;
    border-radius: 10px;
    outline: none;
    margin-top: 4px;
    cursor: pointer;
}

    .contrib-table-head__checkbox input[type="checkbox"]:checked,
    .contrib-table-body__checkbox input[type="checkbox"]:checked {
        border: 5px solid #006643;
    }

.contrib-table-head__cuit,
.contrib-table-body__cuit {
    width: 127px;
}

.contrib-table-head__name,
.contrib-table-body__name {
    width: 357px;
}

.contrib-table-head__email,
.contrib-table-body__email {
    width: 215px;
}

.contrib-table-head__obligaciones,
.contrib-table-body__obligaciones {
    width: 180px;
}

.contrib-table-body__actions button {
    padding: 4px;
    border: none;
    font-size: 18px;
    color: white;
    border-radius: 50px;
    outline: none;
}

.contrib-table-footer {
    font-size: 12px;
    height: 48px;
}

    .contrib-table-footer .pages ul li a {
        color: rgba(0,0,0, .75);
    }

        .contrib-table-footer .pages ul li a:hover {
            color: #006643;
        }

        .contrib-table-footer .pages ul li a.active {
            font-weight: bold;
            color: #006643;
        }

#SelectEntradas {
    width: auto;
    background-color: white;
    margin: 0px 5px 0px 5px;
    border-radius: 8px;
    color: #263057 !important;
    font-weight: bolder;
    border-color: #263057 !important;
}

#ownStyle > div > div.contrib-filters-options.border-bottom.row > div > div.select-oblig.\/.h-100.w-50.d-flex.align-items-center.col-lg-2.col-xs-12 {
    margin-left: 85px;
    margin-right: 5px;
}

    #ownStyle > div > div.contrib-filters-options.border-bottom.row > div >
    div.select-oblig.\/.h-100.w-50.d-flex.align-items-center.col-lg-2.col-xs-12 > label:nth-child(1) {
        margin-bottom: 0px;
    }

#tblObligaciones tr td span {
    cursor: pointer;
}

.avatar, .avatar > img {
    border-radius: 50%;
    width: 3.5rem;
    height: 3.5rem;
}

.avatar {
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    color: #263057;
    font-size: 14px;
    font-weight: 700;
}

    .avatar > img {
        object-fit: cover;
    }

/*DETALLES del CLIENTE*/

#detallesNombre, .rb-name.col-md-4.col-sm-6 > div:nth-child(2) > span:nth-child(1) {
    font-weight: 700;
}

#detallesAvatar > div {
    align-content: center;
    text-align: center;
}

/**
 * Toogle Custom styles formatting
 */
.toggle-handle {
    background-color: white;
}

.toggle {
    width: 80% !important;
}

label.btn.btn-default.toggle-on {
    background-color: black;
    color: white;
    cursor: pointer;
}

label.btn.btn-default.toggle-off {
    background-color: silver;
    color: black;
    cursor: pointer;
}

/** switches style **/
.custom-switch {
    cursor: pointer;
}

    .custom-switch .custom-control-label::after {
        background-color: #B3B3B3 !important;
        cursor: pointer;
    }

    .custom-switch .custom-control-label::before {
        cursor: pointer;
    }

    .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
        background-color: #24378F !important;
    }

.custom-control-label::before {
    border: none !important;
    background-color: #ECECEC !important;
}

/*legend {
    color: #787878;
    padding: 5px 10px;
    font-size: inherit !important;
    width: auto;
}*/

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

.breadcrumb {
    font-family: "Roboto", sans-serif;
    background-color: transparent !important;
}

.breadcrumb-item a, .breadcrumb-item.active b, .breadcrumb-item::before, #navMobile > a {
    color: #24378F !important;
}

/* TOASTR */
.toast-error, .toast-success, .toast-info {
    height: 51px;
    font-family: "Roboto";
    font-size: 1.4rem;
    font-weight: 700;
}

#toast-container > div {
    opacity: 1;
}

#toast-container.toast-bottom-full-width > div, #toast-container.toast-top-full-width > div {
    height: auto;
}

.toast-error {
    background-color: var(--Rojo-Alerta) !important;
}

.toast-success {
    background-color: var(--Verde-Alerta) !important;
}

.toast-info {
    background-color: var( --Dark-Blue) !important;
}

/* Side navigation menu */
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #fff;
    overflow-x: hidden;
    padding-top: 60px;
    transition: 0.5s;
}

    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }

#mySidenav > div > div.row > div.d-flex {
    margin: 25px;
    flex-direction: row;
    align-items: end;
}

    #mySidenav > div > div.row > div.d-flex > span:nth-child(2) {
        font-family: Raleway;
        font-size: 16px;
        font-weight: 700;
        line-height: 18.78px;
        margin-left: 15px;
        color: var(--Dark-Blue) !important;
    }

#mySidenav > div > div.d-flex > button {
    width: 40%;
    margin: auto;
}

/*TABLET*/
@media (max-width: 768px) {

    /* --- Ajustes para el Header Principal del Calendario --- */
    .calendar .container-fluid header {
        display: flex; /* Asegura que siga siendo un flex container */
        flex-direction: column; /* ¡CLAVE! Apila los elementos hijos (.bs-header-left, .bs-header-right) verticalmente */
        justify-content: center; /* Centra el contenido horizontalmente cuando están apilados */
        align-items: center; /* Centra los items verticalmente (si es relevante, menos en column) */
        padding: 10px 5px; /* Ajusta el padding general para móvil */
        gap: 10px; /* Añade espacio entre los bloques apilados */
        flex-wrap: nowrap; /* Desactiva el wrapping para evitar comportamientos inesperados con column */
    }

    /* --- Control de Orden de los Bloques --- */
    /* Haz que la sección de la derecha (VG y calendario) aparezca primero */
    .calendar .bs-header-right {
        order: 1; /* Esto hará que aparezca primero en el flujo de la columna */
        width: 100%; /* Ocupa todo el ancho disponible para centrar */
        justify-content: center; /* Centra los botones dentro de este contenedor */
        margin-left: 0 !important; /* Elimina cualquier margin-left: auto que pueda tener */
        display: flex; /* Asegura que sus propios hijos (VG, icono) se comporten como flex */
        gap: 5px; /* Espacio entre el botón VG y el icono */
    }

    /* Haz que la sección de la izquierda (Flechas y Mes) aparezca segunda */
    .calendar .bs-header-left {
        order: 2; /* Esto hará que aparezca segundo, debajo del .bs-header-right */
        width: 100%; /* Ocupa todo el ancho disponible para centrar */
        justify-content: center; /* Centra el mes y las flechas */
        display: flex; /* Asegura que sus propios hijos (flechas, mes) se comporten como flex */
        gap: 5px; /* Espacio entre las flechas y el mes */
    }

    /* --- Ajustes para los Botones Individuales --- */
    .calendar .bs-header-right button {
        padding: 5px 10px !important; /* Reduce drásticamente el padding de los botones */
        min-width: unset; /* Elimina cualquier ancho mínimo restrictivo */
        height: auto; /* Permite que la altura se ajuste */
        font-size: 14px; /* Ajusta el tamaño de la fuente si es necesario */
    }

        /* Si los íconos dentro de los botones son SVGs o imágenes */
        .calendar .bs-header-right button svg,
        .calendar .bs-header-right button img {
            max-width: 20px; /* Asegura que la imagen/SVG del icono se ajuste */
            max-height: 20px;
        }

    /* Si el botón "VENCIMIENTOS GENERALES" grande de escritorio existe y quieres ocultarlo,
       o si quieres cambiar el texto del botón "VG" en móvil a "VENCIMIENTOS GENERALES" */
    /* Esto depende de cómo implementaste los botones "VG" y "VENCIMIENTOS GENERALES" en tu HTML.
       Si "VG" es simplemente un botón con un texto corto que quieres que sea más largo en móvil,
       tendrías que cambiar el texto con JavaScript o tener dos botones y mostrar/ocultar con CSS. */

    /* Tus estilos existentes para 768px que son correctos: */
    /* ... (mantén otros estilos existentes aquí, como los del .breadcrumbsButton, etc.) ... */
    .breadcrumbsButton {
        display: block;
    }

    #selectPaginado, #selectColaborador, #btnNombreRazonSocial {
        display: none;
    }

    #mobileFilters {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    #navMobile {
        display: none; /* Esto oculta navMobile, que dijiste que querías oculto en mobile */
    }

    .container .results-header {
        display: none; /* Oculta el encabezado de resultados en móvil */
    }

    #Calendario_Paginado_Info {
        display: none; /* Oculta la información de paginación del calendario */
    }
    .breadcrumbsButton {
        display: block;
    }

    #ownStyle > div.body-content > div.contrib-filters-options.border-bottom.row {
        background: #fff;
    }

    .contrib-main-buttons {
        margin-bottom: 200px;
    }

    .border-bottom {
        border-bottom: 0px !important;
    }

    #selectPaginado, #selectColaborador, #btnNombreRazonSocial {
        display: none;
    }

    #search-icon {
        display: inline;
        position: absolute;
        width: 24px;
        height: 24px;
        vertical-align: middle;
        cursor: pointer;
        margin-left: 14px;
    }

    .contrib-filters-options .searchbox input[type="text"] {
        padding: 6px 50px;
    }

    #colaboradoresPorSuscriptor {
        border-top-left-radius: 8px !important;
        border-bottom-left-radius: 8px !important;
    }

    #mobileFilters {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

        #mobileFilters > button > span {
            width: 18px;
            height: 18px;
            top: 13px;
            left: 13px;
            gap: 0px;
            color: #263057;
        }

    #navMobile {
        display: none;
        flex-direction: row;
        align-items: center;
        margin: 15px;
    }

        #navMobile > h1 {
            font-family: "Raleway";
            font-size: 16px;
            font-weight: 700;
            line-height: 18.78px;
            text-align: left;
            color: var(--Dark-Blue) !important;
            margin-bottom: 0px;
            margin-left: 5%;
        }

    #ownStyle > div.body-content > div:nth-child(1) {
        height: 44px !important;
    }

        #ownStyle > div.body-content > div:nth-child(1) > div {
            margin-left: 0;
        }

            #ownStyle > div.body-content > div:nth-child(1) > div > nav > ol {
                margin-top: 15px;
                margin-bottom: 0;
            }

    .breadcrumb-item::before {
        content: "...";
        padding-right: 2px;
    }

    ol > li.breadcrumb-item.active > b {
        font-size: 0;
    }

        ol > li.breadcrumb-item.active > b::after {
            content: "Compartir vencimientos";
            font-size: 14px;
        }

    .contribTable {
        margin-top: 17px;
        padding: 0;
    }

    .select-oblig span, select.custom-select, #ownStyle > div >
    div.contrib-filters-options.border-bottom.row > div >
    div.searchbox.\/.h-100.d-flex.align-items-center.offset-lg-1.col-lg-3.col-xs-12 {
        width: 430px;
    }

    .select-oblig select {
        height: 44px;
    }

    .ml-3, .mx-3 {
        margin-left: 0px !important;
    }

    .table-body {
        /*overflow-x: scroll;*/
    }

    #avisoEnvios {
        max-width: 750px;
    }

    .container .results-header {
        display: none;
    }

    .container .results-body {
        height: 108px;
        cursor: pointer;
    }

    #ownStyle > div.body-content > div.contrib-filters-options.border-bottom.row > div > div {
        margin: 0 !important;
        width: 100%;
    }

    #ownStyle > div > div.contrib-filters-options.border-bottom.row > div > div.select-oblig.\/.h-100.w-50.d-flex.align-items-center.col-lg-2.col-xs-12 {
        margin-left: 15px;
    }

    .searchbox {
        margin-left: inherit !important;
        margin-right: 0;
        padding: 0;
    }

    #txtSearch {
        margin-left: 0px;
        background-color: var(--Gray-Light);
        height: 44px;
        border: none;
        border-radius: 8px;
    }

    .contribTable.px-sm-0.mb8 > div.table-body > div > div {
        display: inline-table !important;
    }

    .rh-recibe, .rb-recibe, .rb-actions-edit-mail, .rb-ultimoEnvioNombre {
        display: none;
    }

    .rb-ultimoEnvio {
        display: inline-flex;
        justify-content: start;
    }

    .rb-ultimoEnvioHace {
        display: block;
    }

    .container .results-body .rb-checkbox {
        display: table-cell;
        padding-top: 8px;
        width: 0;
    }

    .rb-name.col-md-4.col-sm-6 {
        margin-bottom: 10px;
        padding-left: 5px
    }

    /*    #enviarDesktop {
        display: none;
    }

    #enviarMobile {
        background-color: #fff;
        margin: auto;
        padding: 20px 15px 20px 15px;
        align-items: center;
        display: inline-flex;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 1;
        box-shadow: 0px -4px 2px -2px #24378F66;
        width: 100%;
    }

        #enviarMobile > button {
            width: 65%;
        }*/

    #enviarDesktop > button {
        margin-top: 16px;
    }

    #Calendario_Paginado_Info {
        display: none;
    }

    #Calendario_paginate > ul {
        justify-content: flex-start;
    }

    /*MODALES*/
    .modal {
        padding: 0px !important;
    }

    .modal-dialog {
        height: 100%;
        max-width: none;
    }

    .modal-footer {
        box-shadow: 0px -2px 4px 0px #24378F66;
        margin: 0px;
        height: 12%;
        justify-content: center;
    }

        .modal-footer button {
            width: 45%;
            height: 44px;
        }

    #modalError > div > div > div.modal-footer {
        justify-content: right;
    }

    #detallesClienteModal > div > div > div.modal-body {
        border: 1px solid var(--AGrayMedium) !important;
        border-radius: 8px 8px 8px 8px;
        height: 220px;
        flex: none;
        margin-top: 24px;
        padding-top: 24px;
        padding-bottom: 24px;
    }

    #btnEdit {
        display: block;
    }

    #detallesClienteModal > div > div > div.modal-footer {
        box-shadow: none;
    }

    /*MODAL ERROR*/
    #modalError > div > div > div.modal-body > div {
        margin-top: 5%;
    }

    #modalError > div > div > div.modal-body > span {
        display: block;
    }

    #modalError > div > div > div.modal-body > div > span.material-symbols-outlined {
        display: none;
    }
    .spinner-border-sm {
        width: 4rem !important;
        height: 2.8rem !important;
        border-radius: 50%;
        border-color: green;
        border-top-color: transparent;
    }
}

/*MOBILE*/
@media (max-width: 500px) {
    #enviarDesktop {
        display: none;
    }

    #enviarMobile {
        background-color: #fff;
        margin: auto;
        padding: 20px 15px 20px 15px;
        align-items: center;
        display: inline-flex;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 1;
        box-shadow: 0px -4px 2px -2px #24378F66;
        width: 100%;
    }

        #enviarMobile > button {
            width: 65%;
        }

    .contribTable {
        margin-bottom: 100px;
    }
}