:root {
    --main-bg-color: #646464;
    --xs: 0;
    --sm: 576px;
    --md: 768px;
    --lg: 992px;
    --xl: 1200px;
    --xxl: 1400px;
    --color: #e5e5e5;
    --bg-gradient: linear-gradient(to right, #2b7de1, #7e57c6 68%);
}

@font-face {
    font-family: 'Polly Rounded';
    src: url('/public/fonts/PollyRounded-Regular.otf');
    font-style: normal;
}

#fch_bloque {
    padding-bottom: 2rem;
    padding-top: 2rem;
}

#fch_ini {
    display: flex;
    justify-content: space-around;
}

#contenedora {
    border-radius: 1.2rem;
    background-color: var(--main-bg-color);
}

.tblReport {
    border-radius: 1.2rem;
    /*background-color: var(--main-bg-color);*/
    margin-top: 2rem;
    /*width: 100vw;*/
}

#img_Sidebar {
    width: 10rem;
}

.tblReport {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.tbl_entries_navierasSelected {
    display: flex;
    flex-direction: row;
}

/* =============== ESTILOS NUEVOS ================*/
.cont-btn-generar {
    display: flex;
    align-items: end;
    justify-content: end;
    margin-top: 25px;
}

.btn-primary {
    background: #7e57c6;
    color: #fff;
    border: 0;
    transition: 0.2s;
    font-size: 16px;
    letter-spacing: -0.5px;
    transition: 0.4s;
}

.btn-primary:hover {
    background: #6961cd !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background: #7a7a7a;
    margin-bottom: 1px !important;
    position: relative;
    border: 0;
}

.container-range {
    /*display: grid;*/
    /*grid-template-columns: 0.48fr 1fr;*/
    gap: 25px;
}

.cont-input-range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-top: 44px;
}

.nav-link {
    color: #333 !important;
    font-weight: 500;
    font-size: 16px;
}

/*.nav-sublink {
    color: #333 !important;
    font-weight: 500;
    font-size: 16px;
    list-style: none;
}*/

.nav-group {
    transition: 0.3ms !important;
}

/* ============= ESTILOS NUEVOS GUSTAVO ===============*/
.pager-nav {
    margin: 16px 0;
}

.pager-nav span {
    display: inline-block;
    padding: 4px 8px;
    margin: 1px;
    cursor: pointer;
    font-size: 14px;
    background-color: #FFFFFF;
    border: 1px solid #e1e1e1;
    border-radius: 3px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.pager-nav span:hover,
.pager-nav .pg-selected {
    background-color: #f9f9f9;
    border: 1px solid #CCCCCC;
}

table th {
    background-color: var(--color) !important;
    color: #333 !important;
}

table>tbody>tr>td {
    vertical-align: middle !important;
}

.btn-group,
.btn-group-vertical {
    position: absolute !important;
}

.dataTables_length {
    margin-right: 2rem;
}

/* =============================================== */

.header-divider {
    display: none;
}

.header .container-fluid:nth-child(n+2) {
    display: none;
}

ul.header-nav.ms-auto {
    display: none;
}

a.header-brand.d-md-none {
    margin-right: 0;
}

#blq_parent {
    /*background-color: var(--main-bg-color);*/
    /*height: 100vh;*/
}

#blq_form {
    background-color: red;
    width: 90vw;
    border-radius: 0.8rem;
    padding-left: 0;
    padding-right: 0;
}

#blq_form>#title_div {
    /*background-color: var(--bg-gradient);*/
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    margin: 0 auto;
}

#blq_form>#title_div>h3 {
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    padding-top: 0.2rem;
}

#blq_selected {
    padding: 20px;
    background-color: white;
    display: grid;
    /*flex-direction: column;*/
    padding-bottom: 1.3rem;
    grid-template-columns: 1fr 2fr;
    border-bottom-left-radius: 0.4rem;
    border-bottom-right-radius: 0.4rem;
    padding-left: 0;
    padding-right: 0;
}

#blq_selects {
    display: flex;
    flex-direction: column;
    align-items: center;

}

#blq_selected>#blq_selects>div.select>label {
    padding-bottom: 0.5rem;
}

.select2-container {
    max-width: 100% !important;
    padding-bottom: 1rem;
}

.select2.select2-container.select2-container--default {}

.select,
.select-filtro {
    /*display: flex;*/
    /*flex-direction: column;*/
    align-items: start;
    border-radius: 0.5rem;
    padding-top: 0.5rem;
    margin-top: 1.2rem;
    background: var(--bg-gradient);
    font-family: 'Roboto', sans-serif;
    padding: 25 15px;
}

.select label {
    font-size: 18px;
    letter-spacing: -1.5px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    margin-bottom: 5px;
}

.multiselect-dropdown-list div label {
    color: var(--main-bg-color);
}

.select-filtro {
    background: #e5e5e5 !important;
}

.select select option {
    font-family: 'Roboto', sans-serif;
}

#blq_dates {
    /*display: flex !important;*/
    /*flex-direction: column;*/
    justify-content: center;
    font-family: 'Roboto', sans-serif;
}

.container-range {
    align-items: center;
    justify-content: center;
    background-color: white;
}

.container-range-dateSelecter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /*background-color: red;*/
    /*background: var(--bg-gradient);*/
    width: 70vw;
    margin: 0 auto;
    border-radius: 0.5rem;
    gap: 25px;
}

.container-range-dateSelecterFormTaquillas{
    display: grid;
    grid-template-columns: 1fr ;
    /*background-color: red;*/
    /*background: var(--bg-gradient);*/
    width: 70vw;
    margin: 0 auto;
    border-radius: 0.5rem;
    gap: 25px;
}

.container-range-dateSelecter label {
    margin: 0 auto;
    /*background-color: yellow;*/
    /*padding-bottom: 0.5rem;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.container-range-dateSelecterFormTaquillas label{
    margin: 0 auto;
    /*background-color: yellow;*/
    /*padding-bottom: 0.5rem;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.container-range-dateSelecter select {
    margin: 0 auto;
    display: flex;
    /*background-color: green;*/
    flex-direction: column;
    justify-content: center;
    /*margin-bottom: 1rem;*/
}

.container-range-dateSelecterFormTaquillas select {
    margin: 0 auto;
    display: flex;
    /*background-color: green;*/
    flex-direction: column;
    justify-content: center;
    /*margin-bottom: 1rem;*/
}

.form-select {
    max-width: 100% !important;
}

.date_range1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.date_range2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cont-btn-generar {
    margin-top: 25px;
}

#main_content,
#main_resume {
    font-family: 'Roboto', sans-serif !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    border-radius: 13px;
    margin: 0 auto !important;
    margin-top: 1rem !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    box-sizing: border-box;
    display: inline-block;
    min-width: 0.5em;
    padding: 1px 5px;
    margin-left: 2px;
}

.pd-15 {
    padding: 0 15px;
}

/*#idTour + span > span {
        padding: .375rem 2.25rem .375rem .75rem;
        width: 90vw !important;
    }*/

/*#main_resume{*/
/*    display: none;*/
/*}*/

/*#pager_length{*/
/*    display: none;*/
/*}*/

/*#pager_filter{*/
/*    display: none;*/
/*}*/

/*#pager{*/
/*    display: none;*/
/*}*/

/*#pager_info{*/
/*    display: none;*/
/*}*/

/*#pager_paginate{*/
/*    display: none;*/
/*}*/

/*#pager_wrapper{*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*}*/

/*.dt-buttons{*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*}*/

.footer {
    display: flex;
    flex-direction: column;
    justify-content: end;
    /*height: 100vh;*/
    padding-left: var(--cui-sidebar-occupy-start, 0);
}

.table th {
    vertical-align: middle;
    font-size: 15px;
}

.table>tbody {
    font-size: 14px;
}

.table-responsive .table {
    margin-top: 15px;
}

.table> :not(caption)>*>* {
    border-bottom-width: 0px !important;
}

/*Small devices (landscape phones, 576px and up)*/

/*Medium devices (tablets, 768px and up)*/
.titulo-reporte {
    margin-bottom: 0.3rem;
    text-align: center;
    background: var(--bg-gradient);
    border-top-left-radius: 0.40rem;
    border-top-right-radius: 0.40rem;
    font-family: 'Roboto', sans-serif;
}

.dt-buttons>button:first-child,
.dt-buttons>button:nth-child(5) {
    margin-right: 0.5rem;
}

.top {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
}



#tbl_reporte_naviera {
    background-color: white;
    border-radius: 0.5rem;
    padding-bottom: 1rem;
    border: 0.1rem solid var(--color);
    /*padding-left: 1rem;
        padding-right: 1rem;*/
}

#main_content,
#main_resume,
#tbl_reporte_resume {
    /*padding-top: 0.2rem !important;*/
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
    font-family: 'Roboto', sans-serif;
    /*font-family: 'system-ui' !important;*/
}

.table tr:nth-child(even) {
    background-color: #f2f2f2;
}

table.dataTable thead th,
table.dataTable tfoot th {
    font-weight: 500;
    font-size: 14px;
    vertical-align: middle;
}

/*#pager_length{*/
/*    display: flex;*/
/*}*/

/*#pager_filter{*/
/*    display: flex;*/
/*    margin-top:-1.7rem;*/
/*}*/

#pager {
    display: inline-block;
}

#pager_info {
    display: flex;
}

#pager_paginate {
    display: flex;
}

#pager_wrapper {
    display: block;
}

#pager_wrapper>.dt-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 5vw;
}

#blq_selects>div {
    width: 30vw;
}

.container-range-dateSelecter {
    width: 100%;
}
.container-range-dateSelecterFormTaquillas{
    width: 100%;
}

.container-range-dateSelecter label {
    margin: 0 auto;
    text-align: left;
    width: 100%;
}
.container-range-dateSelecterFormTaquillas label {
    margin: 0 auto;
    text-align: left;
    width: 100%;
}

#blq_selected {
    background-color: white;
    /*display: flex;*/
    /*flex-direction: row;*/
}

#blq_dates {
    /*display: flex !important;*/
    /*flex-direction: column;*/
    justify-content: start;
    font-family: 'Roboto', sans-serif;
}

#blq_dates .container-range {
    background-color: #ECECEC;
    border-radius: 0.7rem;
    /*display: flex;*/
    /*flex-direction: column;*/
    justify-content: center;
    margin-top: 0.3rem;
    padding-bottom: 0.6rem;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}

#blq_dates .container-range .container-range-dateSelecter {
    margin-top: 0.9rem;
}
#blq_dates .container-range .container-range-dateSelecterFormTaquillas {
    margin-top: 0.9rem;
}

/*#main_resume {*/
/*    display: inline-block;*/
/*    !*width: 90vw;*!*/
/*    margin: 0 auto !important;*/
/*    padding-left: 0;*/
/*    padding-right: 0;*/
/*    padding-top: 0.5rem;*/

/*}*/

#tbl_reporte_resume {
    width: 100%;
    background-color: white;
    border: 0.1rem solid var(--color);
    border-radius: 13px;
    font-family: 'Roboto', sans-serif;
}

#tbl_reporte_resume>.row {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 0.2rem;
    padding-bottom: 1rem;
}

#pagerResume {
    padding-top: 0.5rem;
}

#main_content>#tbl_reporte_naviera>.row {
    padding-left: 2rem;
    padding-right: 2rem;
}


/*#pager_wrapper > #pager_length{
        display: flex ;
        flex-direction: row;
        justify-content: start;
        width: 30vw;
        margin-right: 0 !important;
    }

    #pager_wrapper > .dt-buttons{
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 20vw;
    }*/
/* Large devices (desktops, 992px and up)*/

#blq_parent {
    /*background-color: green;*/
    /*width: 10%;*/
}

#blq_form {
    display: inline-block;
    background: none;
    width: 90%;
    /*height: 100vh;*/
    margin: 0 auto;
    font-family: 'Roboto', sans-serif;

}

#blq_form>#title_div,
.titulo-reporte {
    background: var(--bg-gradient);
    border-top-right-radius: 0.7rem;
    border-top-left-radius: 0.7rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    color: #fff;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
    letter-spacing: -1.5px;
    /*border: 0.1rem solid var(--color);*/
}

#blq_form>#title_div>h3 {
    font-size: 25px;
}


#blq_selected {
    width: 100%;

    margin: 0 auto;
    border: 0.1rem solid var(--color);
}

#blq_form>#blq_selected>#blq_selects {
    /*width: 40%;*/
    /*height: 40vh;*/
    /*height: max-content;*/
    background-color: white !important;
}

#blq_form>#blq_selected>#blq_dates {
    background-color: white;
    /*width: 60%;*/
}

#blq_form>#blq_selected>#blq_selects>div {
    /*background-color: var(--color);*/
    /*font-size: 1.8rem;*/
    width: 100%;
    /*height: 25%;*/
}

#blq_dates .container-range {
    margin-top: 1.2rem;
    /*font-size: 1.8rem;*/
}

#blq_dates .container-range .container-range-dateSelecter #idDatePicker {
    /*font-size: 1.8rem;*/
}

#contInputs>#inputRangeDay>.date_range1>input {
    font-size: 16px;
}

#contInputs>#inputRangeDay>.date_range2>input {
    font-size: 16px;
}

#tbl_reporte_naviera {}

.select2-results {
    /*font-size: 24px;*/
}

.datepicker-picker {
    font-size: 16px;
}

.datepicker-picker .datepicker-header {
    font-size: 1.8rem;

}

.cont-btn-generar {
    font-size: 1.8rem;
}

/*For graphs*/
.chartBox {
    /*width: 700px;*/
}

/*#charts {
    display: flex;
    flex-direction: row;
    justify-content: center;

}*/

#charts,
#chartsNavieras {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 2rem;
}

#tableGraph {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#tableGraph>.tableTipoCanal>table tbody th {
    background-color: white !important;
    color: #333 !important;

}

#graphs {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-bottom: 3rem;
    padding-top: 3rem;
}

#graphsNavieras {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 3rem;
    padding-top: 3rem;
}

#graphsNavieras>#chartsNavieras>.chartBox:first-child {
    padding-bottom: 3rem;
}

/*MAIN CONTENT FROM HOME*/
#mainGraphs {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

#graphsMainAgencia,
#graphsMainGrupos,
#graphsMainTaxiplan,
#graphsMainDigital,
#graphsMainNaviera {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 3rem;
    padding-top: 3rem;
    padding-right: 2rem;
}


#graphsMainAgencia,
#graphsMainGrupos,
#graphsMainTaxiplan,
#graphsMainDigital,
#graphsMainNaviera>h2 {
    text-align: center;
}

.containerGraph {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding-top: 1.2rem;
}

.containerGraphNaviera {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding-top: 1.2rem;
}

#chartsAgencia,
#chartsGrupos,
#chartsTaxiplan,
#chartsDigitalbrand,
#chartsNaviera {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/*
#chartsNaviera{
    display: flex;
    flex-direction: column;
    justify-content: center;
}*/

#tableGraphAgencia,
#tableGraphGrupos,
#tableGraphTaxiplan,
#tableGraphDigitalbrand,
#tableGraphNaviera {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#tableGraphAgencia,
#tableGraphGrupos,
#tableGraphTaxiplan,
#tableGraphDigitalbrand,
#tableGraphNaviera>.tableTipoCanal>table tbody th {
    /*background-color: white !important;*/
    color: #333 !important;
}

/*#tableGraphNaviera{
    padding-top: 2rem;
}*/

#tituloAgencia,
#tituloGrupos,
#tituloTaxiplan,
#tituloDigital,
#tituloNaviera {
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    color: #000;
}

#tituloAgencia>h2,
#tituloGrupos>h2,
#tituloTaxiplan>h2,
#tituloDigital>h2,
#tituloNaviera>h2 {
    font-size: 24px;
    font-weight: bold;
}

.tituloHome {
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    color: #000;
}

.tituloHome>h1 {
    font-size: 25px;
    font-weight: bold;
}


/*MAIN CONTENT FROM HOME END*/


.colLarge {
    /*max-width: 700px;*/
    /*overflow-x: scroll;*/
}

.box {
    width: 70vw;
    height: 50vh;
}

/*LET'S HIDE DEFAULT BUTTONS*/
div.dt-buttons>button:nth-child(1),
div.dt-buttons>button:nth-child(2),
div.dt-buttons>button:nth-child(3),
div.dt-buttons>button:nth-child(4) {
    display: none !important;
}

/*END OF HIDING BUTTONS*/

/*This media is for graphs*/
@media (max-width: 1131px) {
    #graphs {
        display: flex;
        flex-direction: column;
        padding-bottom: 0;
    }

    #graphsMainAgencia,
    #graphsMainGrupos,
    #graphsMainTaxiplan,
    #graphsMainDigital,
    #graphsMainNaviera {
        display: flex;
        flex-direction: column;
        padding-bottom: 0;
    }

    #tableGraph {
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding-top: 3.2rem;
    }

    #tableGraphAgencia,
    #tableGraphGrupos,
    #tableGraphTaxiplan,
    #tableGraphDigitalbrand,
    #tableGraphNaviera {
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding-top: 3.2rem;
    }

    .containerGraph {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

@media (max-width: 992px) {
    #blq_form {
        width: 100%;
        padding: 0 15px;
    }

    .col-6 {
        width: 100%;
    }

    /*#blq_form,#main_content,#main_resume{width: 90%;}*/
    .header.header-sticky {
        padding: 0 25px;
    }

    .dataTables_length {
        margin-right: 5px;
    }

    .top #pager_filter {
        margin-top: 0
    }
}

@media (max-width: 600px) {
    .dt-buttons {
        display: flex;
        margin-right: 5px;
    }

    .top div:nth-of-type(1) {
        order: 2;
    }

    .top div:nth-of-type(2) {
        order: 1;
    }

    .top div:nth-of-type(3) {
        order: 3;
    }

    .top div:nth-of-type(1),
    .top div:nth-of-type(2),
    .top div:nth-of-type(3) {
        float: left;
        margin: 6px 0 !important;
        display: inline-flex;
    }

    .top {
        grid-template-columns: 1fr
    }

    /*Changes for graphs*/
    #charts {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }

    #chartsAgencia,
    #chartsGrupos,
    #chartsTaxiplan,
    #chartsDigitalbrand,
    #chartsNaviera {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #graphs>#charts>div:first-child {
        padding-bottom: 3rem;
    }

    #graphsMainAgencia,
    #graphsMainGrupos,
    #graphsMainTaxiplan,
    #graphsMainDigital,
    #graphsMainNaviera {
        padding-right: 0;
    }

}

@media (max-width: 520px) {

    .container-range-dateSelecter {
        grid-template-columns: 1fr;
    }
    .container-range-dateSelecterFormTaquillas {
        grid-template-columns: 1fr;
    }

    #blq_form>#title_div>h3 {
        font-size: 18px;
    }

    #blq_selected,
    .cont-input-range {
        grid-template-columns: 1fr;
    }

    #blq_form {
        width: 100%;
        padding: 0 15px;
    }

    #blq_selected {
        padding: 0;
    }

    /*Esto lo agregó Gustavo*/
    /*Se quita el cuadro de resumen en móviles*/
    #main_resume {
        display: none !important;
    }

    /*Se quita, de la tabla principal, en la parte TOP, todo excepto los botones de descarga*/
    #main_content>#tbl_reporte_naviera>.pd-15>.col-lg-12>.table-responsive>#pager_wrapper>.top>#pager_length,
    #pager_filter {
        display: none !important;
    }

    /*Se quita, de la tabla principal, en la parte BOTTOM, todo la tabla datatable*/
    #main_content>#tbl_reporte_naviera>.pd-15>.col-lg-12>.table-responsive>#pager_wrapper>.bottom {
        display: none !important;
    }

    #main_content>#tbl_reporte_naviera>.pd-15>.col-lg-12>.table-responsive>#pager_wrapper>.top>.dt-buttons {
        justify-content: center;
    }

    .tituloHome>h1 {
        font-size: 25px;
        font-weight: bold;
    }

    #tituloAgencia>h2,
    #tituloGrupos>h2,
    #tituloTaxiplan>h2,
    #tituloDigital>h2,
    #tituloNaviera>h2 {
        font-size: 24px;
        font-weight: bold;
    }

    #graphsMainNaviera>.containerGraphNaviera>#tableGraphNaviera>#tableTipoCanal {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /*Termino de estilos agregados por Gustavo*/
}