:root {
    --ancho-sidebar-left: 250px;
    --pos-sidebar-left: -250px;
    --alto-sidebar-bottom: 180px;
    --pos-sidebar-bottom: -180px;
}

.left-buttom-toggle {
    font-size: 10px;
    position: fixed;
    top: 30px;
    left: var(--ancho-sidebar-left);
    z-index: 10003;
    transition: all .3s ease-in-out;
}

.bottom-buttom-toggle {
    font-size: 10px;
    position: fixed;
    bottom: 0; /* Para posicionarlo en la parte inferior */
    /*left: 50%; *//* Para centrarlo horizontalmente */
    right: 30px;
    transform: translateX(-50%); /* Para ajustar el centro correctamente */
    z-index: 10002; /* Un z-index mayor que el de .offcanvas-bottom */
    transition: all .3s ease-in-out;
}

#toggle-left {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: .584rem;
    border-bottom-right-radius: .584rem;
    padding-top: 12px;
    padding-bottom: 12px;
}

#toggle-bottom {
    border-top-left-radius: .584rem;
    border-top-right-radius: .584rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-left: 12px;
    padding-right: 12px;
}

.offcanvas-left {
    position: fixed;
    top: 5px;
    bottom: 5px;
    left: var(--pos-sidebar-left);
    width: var(--ancho-sidebar-left);
    padding: 20px;
    /*background-color: #f8f9fa;*/
    /*background-color: rgba(255, 255, 255, 0.8);*/
    background-color: rgba(0, 0, 0, .6);
    transition: left .3s ease-in-out;
    z-index: 10000;
    overflow-y: auto;
    max-height: calc(100% - 10px);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.offcanvas-bottom {
    position: fixed;
    left: 255px;
    right: 5px;
    bottom: var(--pos-sidebar-bottom);
    height: var(--alto-sidebar-bottom);
    /*padding: 20px;*/
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 7px;
    padding-bottom: 10px;
    /*background-color: #f8f9fa;*/
    background-color: rgba(0, 0, 0, .6);
    transition: bottom .3s ease-in-out;
    z-index: 10001;
    /*overflow-y: auto;*/
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
}

.show-offcanvas-left {
    left: 0;
}

.show-offcanvas-bottom {
    bottom: 0;
}

/*.contentTable {
    height: 140px;
}*/

.left-buttom-toggle.shifted {
    left: 0;
}

.bottom-buttom-toggle.shifted {
    bottom: var(--alto-sidebar-bottom);
}

.custom-card {
    font-size: 0.9em;
    background-color: rgba(0, 0, 0, 0) !important; /* Define el fondo con transparencia */
}

.custom-card .btn-link {
    font-size: 0.7em;
    color: #7aedff !important;
}

.custom-card .btn-shape {
    font-size: 0.9em;
}

.custom-card .table {
    font-size: 0.8em;
}

.custom-card {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.menuItems .card, .card-header {
    border: none;
}

.menuItemsAll {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.custom-list .form-check {
    line-height: 2;
}

.custom-list .list-group-item {
    font-size: 0.85em;
    background-color: rgba(0, 0, 0, 0) !important; /* Define el fondo con transparencia para los elementos de la lista */
}

.card-header .fa {
    transition: .3s transform ease-in-out;
}

.card-header .collapsed .fa {
    transform: rotate(-90deg);
}

i.icon-red {
    color: #ff0000;
}

i.icon-orange {
    color: #fb743c;
}

i.icon-yellow {
    color: #fbfb05;
}

i.fa-caret-down.icon-yellow, i.fa-caret-up.icon-yellow {
    font-size: 23px;
}

i.fa-caret-down.icon-orange, i.fa-caret-up.icon-orange {
    font-size: 23px;
}

i.fa-caret-down.icon-red, i.fa-caret-up.icon-red {
    font-size: 23px;
}

.m-bg-red {
    background-color: #ff0000;
}

.m-bg-orange {
    background-color: #fb743c;
}

.m-bg-yellow {
    background-color: #fbfb05;
}

/*MAXIMA*/

i.icon-top-max-01 {
    color: #8b0000;
}

i.icon-top-max-02 {
    color: #ff0000;
}

i.icon-top-max-03 {
    color: #ffa500;
}

i.icon-top-max-04 {
    color: #f9ddb1;
}

i.icon-top-max-05 {
    color: #ffffff;
}

/*MINIMA*/

i.icon-top-min-01 {
    color: #00147e;
}

i.icon-top-min-02 {
    color: #0029fe;
}

i.icon-top-min-03 {
    color: #426be5;
}

i.icon-top-min-04 {
    color: #adc1e3;
}

i.icon-top-min-05 {
    color: #ffffff;
}

/*PRECIPITACION*/
i.icon-top-pre-01 {
    color: #910085;
}

i.icon-top-pre-02 {
    color: #a40497;
}

i.icon-top-pre-03 {
    color: #c76eb9;
}

i.icon-top-pre-04 {
    color: #e5b7dc;
}

i.icon-top-pre-05 {
    color: #ffffff;
}

/**************************************/
/*REGIONES*/
.m-bg-costanorte {
    background-color: #a7933f;
}

.m-bg-costacentro {
    background-color: #d7bf37;
}

.m-bg-costasur {
    background-color: #f7e36b;
}

.m-bg-sierranorte {
    background-color: #7b5743;
}

.m-bg-sierracentro {
    background-color: #ab7b47;
}

.m-bg-sierrasur {
    background-color: #e3a764;
}

.m-bg-selvanorte {
    background-color: #447f3c;
}

.m-bg-selvacentro {
    background-color: #4fbb4b;
}

.m-bg-selvasur {
    background-color: #4fe747;
}

/**************************************/
/* SCROLLBAR */

::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #696969;
    border-radius: 10px;
}

/**************************************/
/* TABLA INFORMACION */
.tblDataInfo {
    font-size: 0.7em;
    background-color: rgba(0, 0, 0, .2);
}

/*.caption-container {
    margin: 5px 0; !* Ajusta el margen superior e inferior *!
    padding: 5px; !* Ajusta el padding *!
    background-color: #f5f5f5; !* Cambia el color de fondo si lo deseas *!
}*/

/*.buttoms-container {
    text-align: right; !* Alinea los botones a la derecha *!
    margin: 5px 0; !* Ajusta el margen superior e inferior *!
}*/

.dt-button.buttons-excel.buttons-html5.btn.btn-primary {
    background-color: #007bff; /* Cambia esto al color de fondo que desees */
    border-color: #007bff; /* Cambia esto al color de borde que desees */
    color: #fff; /* Cambia esto al color de texto que desees */
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 1px;
    padding-bottom: 1px;
    margin-right: 10px;
    margin-bottom: 0px;
}

#excelButton div.dt-buttons {
    float: right;
}

#excelButtonTops div.dt-buttons {
    float: right;
}

/* TEXTOS DE LEYENDA EN TABLA */
.lblLeyenda {
    font-size: 0.70em;
    white-space: nowrap;
}

.btn-download .dropdown-menu a {
    font-size: 0.75em;
}

.btn-download-items {
    background-color: rgba(0, 0, 0, 0.8);
}

.btn-download-items a:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.lblTitle {
    font-size: 0.85em;
    color: #7aedff;
    white-space: nowrap;
}

/* MANEJO DE PANTALLAS */

@media (max-width: 768px) {
    .offcanvas-bottom {
        left: 0;
        right: 0;
    }

    .lblLeyenda {
        font-size: 0.65em;
    }
}

.iconCaret {
    display: flex;
    align-items: center; /* Alineación por defecto */
}

.form-check-label i.fa-caret-up,
.form-check-label i.fa-caret-down {
    align-self: flex-start; /* Alineación específica para los iconos fa-caret-up y fa-caret-down */
}