@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body,
html {
    height: 100%;
}

body.extended .content {
    min-height: 100% !important;
}

body.extended .content .content-wrapper {
    padding: 0px;
    margin: 0px;
    min-height: 100% !important;
}

canvas {
    display: block;
    vertical-align: bottom;
}

.statics canvas {
    display: inherit;
    vertical-align: inherit;
}

.moduloActivo {
    background: #1e9ff2 !important;
    color: white;
}

.staticsCount input {
    width: 53px;
    height: 32px;
    position: absolute;
    margin-top: -180px;
    margin-left: 23px;
    display: none;
}

.statistics canvas {
    width: 100% !important;
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #4d8dfa;
    background: -moz-linear-gradient(-45deg, #4d8dfa 32%, #000000 99%);
    background: -webkit-linear-gradient(-45deg, #4d8dfa 32%, #000000 99%);
    background: linear-gradient(135deg, #4d8dfa 32%, #000000 99%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d8dfa', endColorstr='#000000', GradientType=1);
}

.cs-loader {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    padding: 0px;
    margin: 0px;
    text-align: center;
    vertical-align: middle;
    background: rgba(77, 141, 250, 0.6);
    background: -moz-linear-gradient(-45deg, rgba(77, 141, 250, 0.6) 32%, rgba(0, 0, 0, 0.6) 99%);
    background: -webkit-linear-gradient(-45deg, rgba(77, 141, 250, 0.6) 32%, rgba(0, 0, 0, 0.6) 99%);
    background: linear-gradient(135deg, rgba(77, 141, 250, 0.6) 32%, rgba(0, 0, 0, 0.6) 99%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d8dfa', endColorstr='#000000', GradientType=1);
    z-index: 2000 !important;
}

.cs-loader-inner {
    transform: translateY(-50%);
    top: 40%;
    position: absolute;
    width: 100%;
    color: #FFF;
    padding: 0 100px;
    text-align: center;
}

.cs-loader-inner label {
    font-size: 20px;
    opacity: 0;
    display: inline-block;
}

li a.sinmenu:after {
    content: none !important;
}

@keyframes lol {
    0% {
        opacity: 0;
        transform: translateX(-300px);
    }

    33% {
        opacity: 1;
        transform: translateX(0px);
    }

    66% {
        opacity: 1;
        transform: translateX(0px);
    }

    100% {
        opacity: 0;
        transform: translateX(300px);
    }
}

@-webkit-keyframes lol {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-300px);
    }

    33% {
        opacity: 1;
        -webkit-transform: translateX(0px);
    }

    66% {
        opacity: 1;
        -webkit-transform: translateX(0px);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(300px);
    }
}

.cs-loader-inner label:nth-child(6) {
    -webkit-animation: lol 3s infinite ease-in-out;
    animation: lol 3s infinite ease-in-out;
}

.cs-loader-inner label:nth-child(5) {
    -webkit-animation: lol 3s 100ms infinite ease-in-out;
    animation: lol 3s 100ms infinite ease-in-out;
}

.cs-loader-inner label:nth-child(4) {
    -webkit-animation: lol 3s 200ms infinite ease-in-out;
    animation: lol 3s 200ms infinite ease-in-out;
}

.cs-loader-inner label:nth-child(3) {
    -webkit-animation: lol 3s 300ms infinite ease-in-out;
    animation: lol 3s 300ms infinite ease-in-out;
}

.cs-loader-inner label:nth-child(2) {
    -webkit-animation: lol 3s 400ms infinite ease-in-out;
    animation: lol 3s 400ms infinite ease-in-out;
}

.cs-loader-inner label:nth-child(1) {
    -webkit-animation: lol 3s 500ms infinite ease-in-out;
    animation: lol 3s 500ms infinite ease-in-out;
}

#percent {
    font-weight: bold;
    color: #fff;
}

.content-login {
    -webkit-box-shadow: 10px 10px 146px 32px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 10px 10px 146px 32px rgba(0, 0, 0, 0.4);
    box-shadow: 10px 10px 146px 32px rgba(0, 0, 0, 0.4);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.9);
}


.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000; 
    background-color: white; 
}

.fullscreen-btn {
    position: absolute;
    margin: 12px;
    padding: 11px;
    border: none;
    border-color: rgb(255, 255, 255);
    background-color: rgb(255, 255, 255);
    right: 10px;
    border-radius: 7px;
    z-index: 1000;
}

.mapa-container {
    height: 89vh;
    transition: width 0.3s ease;
}

.mapa-oculto {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
    overflow-y: hidden !important;
}


 .btnMapaDash{
    padding: 50px;
    background-color: #28d094;
}  



.slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.row.dashboardSlider {
    display: grid;
    grid-auto-flow: column;
    overflow-y: hidden; 
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-right: -1em;
    position: relative;
}

.content-dasboard {
    min-width: 260px;
    margin:1.4em ;
    box-sizing: border-box;
}

.card-dasboard {
    min-width: 18em;
} 

.d-inline-block {
    display: inline-block;
}

.slider-button {
    position: absolute; 
    
    bottom: 1px; 
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 1em; 
    z-index: 1000;
}

.slider-button a {
    pointer-events: all;
    text-decoration: none;
}

#prevButton, #nextButton {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#prevButton:hover, #nextButton:hover {
    background-color: rgba(255, 255, 255, 1);
}

.content-login .card,
.content-login .card-header {
    background: transparent !important;
}

.logo-empresa {
    height: 30px;
    margin-top: 20px;
}

.grupo-menu {
    border-radius: 5px;
    border-bottom: 1px dotted #cccccc;
}

.main-menu.menu-light .navigation .navigation-header,
.main-menu.menu-dark .navigation .navigation-header {
    padding: 20px 20px 18px 20px !important;
    margin-top: 5px;
}

/* Datatables */
.table {
    width: 100% !important;
}

.dt-bootstrap4>.dt-buttons,
.dt-bootstrap4>.dataTables_filter {
    display: inline-block;
}

.dt-bootstrap4>.dataTables_filter {
    float: right;
}

.dataTables_filter input[type="search"] {
    font-size: 1rem;
    line-height: 1.45;
    height: 1.525rem;
    padding: .1rem .525rem;
    border-radius: .12rem;
}


/* Input type file */
input[type="file"] {
    display: none;
}

/* Form ui-select BS4 */
.form-control.ui-special-group,
.ui-special-group>input[type="search"],
.ui-select-bootstrap4 .ui-select-match,
.form-control.ui-special-group div.ui-select-match a.btn-link {
    padding: 0em !important;
}

.form-control.ui-special-group span.btn-secondary,
.form-control.ui-special-group span.btn-secondary:hover {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border-color: #D9D9D9;
    border-radius: 10px;
}

/* Estilo para el indicador de requerido */
span.required {
    color: red;
}

/* Diseno menu empresas */
.empresas p {
    display: none;
}

.empresas .card-body:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.empresas .card-body:hover p {
    background-color: rgba(0, 0, 0, 0.5);
    top: 10%;
    color: white;
    font-size: 0.75em;
    left: 0;
    padding: 0.25em 0.75em;
    position: absolute;
    display: block;
}

/* Diseno menu empresas */

.content-body {
    margin: 0px !important;
    padding: 0px !important;
}

/* Mapas de Registrar Red */
#mapa-ruido-red-cabecera,
#mapa-ruido-red-dispersion {
    height: 350px;
    width: 100%;
}

/* Mapa de las estaciones en reporte */
#mapa-reporte {
    height: 300px;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

/* Mapa del modulo inventario en el item cronograma */
#mapaCronograma {
    height: 400px;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

/* Estilos usados en las modales */
.uppercase {
    text-transform: uppercase;
    font-weight: bold
}

.modal-content {
    width: 98% !important;
    margin: 10px auto;
}

.modal-lg-custom {
    width: 1000px !important;
    margin: 10px auto;
}
.modal-lxx {
    max-width: 1000px !important;
}

.modal-trans {
    background-color: rgba(0, 0, 0, 0.1)
}

/*filter:alpha(opacity=50); opacity:0.5 }*/

/*Mapas*/

#inner_fixed {
    height: 70px;
    margin: 0px !important;
    padding: 0px !important;
}

#inner_remaining {
    position: absolute;
    top: 70px;
    bottom: 0;
    width: 100%;
    margin: 0px !important;
    padding: 0px !important;
}

.mapa_google_maps {
    padding: 0px;
    margin: 0px;
}

.mapa_sup {
    width: 100%;
    background: rgb(59, 61, 60) !important;
    color: #fff !important;
}

.mapa_google_maps table#tabla-estaciones td,
.mapa_google_maps table#tabla-estaciones th {
    font-size: 10px;
    vertical-align: top;
}

.mapa_google_maps table#tabla-estaciones td a {
    color: white;
}

#mapa_iz {
    padding: 8px 8px 8px 8px;
    background: rgb(59, 61, 60);
    color: #fff;
    font-size: 12px;
    height: 100%;
}

#mapa_iz .card,
#over_map_de_ruido .card,
#over_map_de .card {
    background: #555555;
    color: #fff;
    padding: 5px;
}

#over_map_de_ruido .card h6 {
    color: #fff !important;
}

#mapa_iz card,
#over_map_de_ruido card {
    font-size: 14px;
}

#mapa_iz .mt-checkbox,
#mapa_iz .mt-radio {
    font-size: 12px !important;
}

#mapa_iz .mt-checkbox b,
#mapa_iz .mt-radio b {
    margin-top: 2px;
}

#mapa_iz .tabbable-line>.nav-tabs>li.active>a {
    color: #fff !important;
}

#mapa_iz .tabbable-line>.nav-tabs>li:hover {
    color: #fff !important;
}

#mapa_iz .tabbable-line>.nav-tabs>li:hover>a {
    color: #fff !important;
}

#mapa_iz .tabbable-line>.nav-tabs>li:hover>a>i {
    color: #fff !important;
}

#mapa_iz .card-title,
#over_map_de_ruido .card-title {
    padding: 0px !important;
    margin-bottom: 0px !important;
}

#mapa_contenedor {
    background: rgb(59, 61, 60);
    height: 100%;
}

#over_map_iz .light,
#over_map_de .light,
#over_map_de_tr .light {
    background: rgba(255, 255, 255, 0.1) !important;
}

#over_map_iz .card-title {
    cursor: pointer;
    background: rgb(59, 61, 60);
    padding: 0px !important;
}

#over_map_de,
#over_map_de_tr {
    background: rgb(59, 61, 60);
    color: #fff;
    height: 100%;
    overflow: auto;
}

.mapa_google_maps table#tabla-estaciones td,
.mapa_google_maps table#tabla-estaciones th {
    font-size: 10px;
    vertical-align: top;
}

.mapa_google_maps table#tabla-estaciones td a {
    color: white;
}

.mt-element-list .list-default.mt-list-container ul>.mt-list-item>.list-icon-container {
    padding: 0;
}

#overmapa_google_maps table#tabla-estaciones td,
.mapa_google_maps table#tabla-estaciones th {
    font-size: 10px;
    vertical-align: top;
}

.mapa_google_maps table#tabla-estaciones td a {
    color: white;
}

_map_iz .light,
#over_map_de .light,
#over_map_de_tr .light {
    background: rgba(255, 255, 255, 0.1) !important;
}

#over_map_de_ruido {
    position: absolute;
    top: 82px;
    right: 15%;
    width: 310px;
    max-height: 660px;
    background: #555555;
    color: #fff;
    font-size: 14px;
    overflow: hidden;
    z-index: 1000;
    padding-right: 15px;
    padding-left: 15px;
}

#over_map_de_ruido .remove {
    background-image: url(../library/metronic/img/portlet-remove-icon-white.png);
}

#over_map_de_ruido a.remove {
    background-repeat: no-repeat;
    width: 11px;
    height: 16px;
    margin-left: 5px;
    opacity: 1;
    color: white;
    float: right;
}

#over_map_de_ruido .card>.card-title>.caption {
    float: none !important;
    display: block !important;
}

.darkmode .ui-select-container input[type="search"],
.darkmode .ui-select-container .ui-select-choices,
.darkmode .ui-select-container .ui-select-toggle,
.darkmode input[type="text"],
#over_map_de_ruido input,
#over_map_de_ruido textarea {
    background: rgb(0, 0, 0, 0.5) !important;
    color: #FFF !important;
}

#over_map_de_ruido .ui-select-container input[type="search"],
#over_map_de_ruido .ui-select-container .ui-select-choices,
#over_map_de_ruido .ui-select-container .ui-select-toggle,
#over_map_de_ruido input,
#over_map_de_ruido textarea {
    background: rgb(59, 61, 60) !important;
    color: #FFF !important;
}

.darkmode .ui-select-container .ui-select-bootstrap .ui-select-choices-row>span,
.darkmode .ui-select-container .ui-select-choices-row-inner {
    color: #FFF !important;
}

#over_map_de_ruido .ui-select-container .ui-select-bootstrap .ui-select-choices>span,
#over_map_de_ruido .ui-select-container .ui-select-choices-row-inner {
    color: #FFF !important;
}

.darkmode .ui-select-container .ui-select-choices-row-inner:hover,
#over_map_de_ruido .ui-select-container .ui-select-choices-row-inner:hover {
    color: rgb(59, 61, 60) !important;
}

.darkmode .ui-select-container .active .ui-select-choices-row-inner:hover,
#over_map_de_ruido .ui-select-container .active .ui-select-choices-row-inner:hover {
    color: white !important;
}

.darkmode .form-control.ui-special-group span.btn-secondary,
.darkmode .form-control.ui-special-group span.btn-secondary:hover {
    background: rgb(59, 61, 60) !important;
    color: #FFF !important;
}

#mapa_iz .card .general-item-list {
    padding: 5px !important;
}

#mapa_iz .card {
    border-radius: 5px !important;
}

.darkmode .form-control {
    border: 1px solid rgb(59, 61, 60) !important;
}

.mapa_con_barra_derecha {
    height: 100%;
    padding: 0px;
    margin: 0px;
}

.mapa_sin_barra_derecha {
    height: 100%;
    padding: 0px;
    margin: 0px;
}

#mapaVerModal {
    height: 262px;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

ul.navx {
    margin-bottom: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.navx li {
    display: inline;
    border-width: 1px 1px 0 1px;
    margin: 20px 20px 20px 0;
    padding-bottom: 20px;
}

#over_map_iz .mt-checkbox {
    margin-bottom: 0px;
}

.pointer {
    cursor: pointer;
}

.text-danger,
.text-success {
    margin: 0px;
}

.label-md-checkbox {
    padding-left: 0px !important;
}

.darkdatepicker-dropdown {
    background-color: rgb(93, 93, 93) !important;
}

.darkdatepicker table tr td,
.darkdatepicker table tr th {
    color: #FFFFFF !important;
}

.darkdatepicker table tr td.old,
.darkdatepicker table tr td.new,
.darkdatepicker table tr td.disabled {
    color: #d1d1d1 !important;
}

.popover {
    color: black;
    background-color: white;
    /*max-width: 500px;*/
}

.dark-unica .highcharts-menu {
    border: 1px solid #666 !important;
    background: #2a2a2b !important;
    padding: 5px 0 !important;
    box-shadow: 3px 3px 10px #888 !important;
}

.dark-unica .highcharts-menu-item {
    padding: 0.5em 1em !important;
    background: none !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
    transition: background 250ms, color 250ms !important;
}

.dark-unica .highcharts-menu-item:hover {
    background: #b03e00 !important;
    color: #000000 !important;
}

.item .item-head .item-name {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 5px;
}

.item {
    margin-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(59, 61, 60);
}

/* Checkbox y Radios para DataTables y Exteriores */
.container-check {
    display: block;
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.container-check input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

input[type=checkbox]+.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border: 1px solid #d4ccc6;
    border-radius: 5px;
}

input[type=radio]+.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border: 1px solid #d4ccc6;
    border-radius: 50%
}

input[type=checkbox]+.checkmark:hover,
input[type=radio]+.checkmark:hover {
    border: 2px solid #1078FF
}

.container-check input:checked~.checkmark {
    background-color: #1078FF;
}

.dark .container-check input:checked~.checkmark {
    background-color: transparent;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.container-check input:checked~.checkmark:after {
    display: block;
}

.text-chk {
    margin-left: 5px;
    vertical-align: top !important;
    font-size: 14px
}

.container-check .checkmark:after {
    left: 6px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Form Group */
.mover-btn {
    margin-left: 10px
}

.separar-btn {
    margin-left: 10px !important;
    padding: 6px 20px
}

/* Menu lateral */
.main-menu.menu-light .navigation>li a:hover {
    background-color: #e7e6e3;
    color: #333;
}

.main-menu.menu-light .navigation>li .active>a {
    background-color: #1c9bf3;
    color: #fff !important;
}

.main-menu.menu-light .navigation>li a.active {
    background-color: #1c9bf3;
    color: #fff !important;
}

/* Texto al medio de DataTable */
table.dataTable.compact tbody td {
    /* vertical-align: middle; */
    padding: 8px;
}

table tbody a:hover i {
    font-weight: bold;
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
    color: #666ee8;
}

form.ng-submitted input.ng-invalid,
form.ng-submitted select.ng-invalid,
form.ng-submitted textarea.ng-invalid,
form.ng-submitted .ui-select-bootstrap4.ng-invalid {
    border-color: #FA787E !important;
    border: 1px solid #FA787E !important;
    border-radius: 10px;
}

form input.ng-invalid.ng-touched,
select.ng-invalid.ng-touched {
    border-color: #FA787E !important;
    border: 1px solid #FA787E !important;
    border-radius: 10px;
}

.basic-modal table td,
.basic-modal table th {
    padding: .75rem !important;
}

.basic-modal table th {
    white-space: normal !important;
}

.basic-modal table tbody {
    border: 1px solid #e3ebf3 !important;
}

.basic-modal .badge {
    color: #6b6f82 !important;
}

/* datepicker */
.datepicker-dropdown {
    z-index: 1100;
}

.note {
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    background-color: #f0f7fb;
    background-position: 9px 0px;
    background-repeat: no-repeat;
    border: solid 1px #3498db;
    border-radius: 6px;
    line-height: 18px;
    overflow: hidden;
    padding: 15px 60px;
    font-size: 1.3rem !important;
    text-align: center;
    width: 100%;
}

.note span {
    font-family: 'Quicksand', Georgia, 'Times New Roman', Times, serif;
}

/* TOOLTIPS header*/
.tooltipv2 .tooltiptext {
    visibility: hidden;
    position: absolute;
    /* min-width: 120px; */
    background-color: #555;
    color: #fff;
    text-align: center;
    /* padding: 5px 0; */
    padding: 0.5em;
    border-radius: 6px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltipv2:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltip-right {
    top: -5px;
    left: 125%;
}

.tooltip-right::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #555 transparent transparent;
}

.tooltip-bottom {
    top: 110%;
    left: 50%;
    margin-left: -60px;
}

.tooltip-bottom::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #555 transparent;
}

.tooltip-top {
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
}

.tooltip-top::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip-left {
    top: -5px;
    bottom: auto;
    right: 128%;
}

.tooltip-left::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #555;
}

/*Tooltips menu item*/
.menu-content .itemmenu i {
    display: none;
}

.menu-content .itemmenu:hover i {
    background-color: rgba(0, 0, 0, 0.5);
    top: 10%;
    color: white;
    font-size: 0.7em;
    right: 0;
    padding: 0.25em 0.75em;
    position: absolute;
    display: block;
    z-index: 1000;
}

.info-modal {
    margin-bottom: 0px;
    border: 1px solid #e3ebf3;
    background-color: #e3ebf3;
    color: #1e9ff2 !important;
    padding: .75rem 0.8rem;
    font-weight: bold;
    font-size: 1rem;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.table tbody+tbody {
    border-top: 2px solid #e3ebf3;
}

/* CSS Menu Drag and Drop */
.objectDrag a {
    display: inline-block;
    padding-top: 0.9rem;
    text-align: center;
    line-height: 2.5;
    font-weight: 700;
    word-wrap: break-word;
    white-space: nowrap;
    word-break: break-all;
}

ul.objectDrag {
    width: 50%;
}

ul.objectDrag>li.subObjectDrag:first-child {
    padding: 0 0px;
    margin: 0 0px;
}

ul.objectDrag>li.subObjectDrag {
    display: inline-block;
    overflow: hidden;
    height: 60px;
    width: 18% !important;
    padding: 0 5px !important;
    margin: 0 5px !important;
    background-color: inherit;
}

ul.objectDrag>li.subObjectDrag>a>.la {
    font-size: 1.05rem !important;
    padding: 0.5rem 1rem;
}

.fs {
    font-size: 1.05rem !important;
    padding: 1rem 0.6rem !important;
}

.fs2:hover {
    color: #FFF !important
}

.over {
    border: 1px dashed #FA787E !important;
}

/* ul.objectDrag > li.subObjectDrag > a.nav-link { font-size: 13px!important; padding: 12px 10px!important; } */

/* Corregir desfase de ui-select */
.ui-select-bootstrap4 .ui-select-match-text {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 40px;
}

.ui-select-bootstrap4 .ui-select-toggle .btn.btn-link {
    margin-right: 10px;
    top: 6px;
    position: absolute;
    right: 10px;
}

.table td,
.table th {
    padding: .75rem;
}

.table-responsive {
    /*overflow-y: visible;*/
    /*overflow-x: visible;*/
}

/*Corrige espacios de un input dentro de una tabla*/
.input-table {
    margin-bottom: 0 !important;
}

/*.nav.nav-tabs.nav-linetriangle .nav-item a.nav-link {
    color: #fff;
}

.nav.nav-tabs.nav-linetriangle .nav-item a.nav-link.active {
    background-color: #ff9149;
    color: #fff;
}

.nav.nav-tabs.nav-linetriangle .nav-item {
    background-color: #bababa;
}*/
ul.navbar-nav.mr-auto>li.nav-item,
ul.navbar-nav.ml-auto>li.nav-item {
    max-height: 5rem;
}

.padding-especial-1 {
    padding-left: 0.25em;
    padding-right: 0.25em;
}

.input-group-padding-1 {
    padding: 0.3rem 0.5rem;
}

.donut-chart {
    position: relative;
    border-radius: 50%;
    overflow: hidden;
}

.donut-chart .slice {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.donut-chart .chart-center {
    position: absolute;
    border-radius: 50%;
}

.donut-chart .chart-center span {
    display: block;
    text-align: center;
}

.donut-chart.chart1 {
    width: 200px;
    height: 200px;
    background: #e1e1e1;
}

.donut-chart.chart1 .slice.one {
    clip: rect(0 200px 100px 0);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    background: #50c690;
}

.donut-chart.chart1 .slice.two {
    clip: rect(0 100px 200px 0);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    background: #50c690;
}

.donut-chart.chart1 .chart-center {
    top: 10px;
    left: 10px;
    width: 180px;
    height: 180px;
    background: #fff;
}

.donut-chart.chart1 .chart-center span {
    font-size: 20px;
    line-height: 20px;
    color: #464855;
    padding-top: 70px;
}

.radio-inline {
    display: inline-block !important;
}

.radio-inline:nth-child(3) {
    margin-left: 30px
}

.Aleja {
    padding-bottom: 20px;
}

.btn-whitex {
    text-decoration: none;
    background-color: #FFF;
    border: none;
    font-weight: 600;
    font-size: 16px;
    color: #6b6f82;
    ;
}

.btn-whitex span:hover {
    font-weight: bold;
    -webkit-transform: scale(1.9);
    -moz-transform: scale(1.9);
    -ms-transform: scale(1.9);
    -o-transform: scale(1.9);
    transform: scale(1.9);
    color: #666ee8;
}

/* 
 * Diseno scrollbar
 */
.overflow-bar::-webkit-scrollbar {
    width: 10px;
    background-color: rgba(252, 250, 250, 0.5);
}

.overflow-bar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.5);
}

.overflow-bar::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background-color: rgba(150, 150, 150, 0.3);
}

.img-empresa {
    /*width: 26%;*/
    max-width: 8rem;
    height: auto;
}

@media (max-width: 1200px) {
    .img-empresa {
        display: none;
    }
}

#navbarItem {
    padding-left: auto;
    padding-right: auto;
}

@media(max-width: 1200px) {
    #navbarItem {
        padding-right: 5px;
    }
}

.styleMadrix {
    color: #FFFFFF;
    font-weight: bold;
}

@media(max-width: 767px) {
    .styleMadrix {
        color: black;
        font-weight: bold;
    }
}

/*.table-striped tbody tr:nth-child(odd) td {
    background-color: green;
}*/

/* .table-striped tbody tr.highlight td { 
    border: 1px solid #e3ebf3;
    background-color: #e3ebf3;
}  */

/* Corregir los tamanos del menu drag and drop en diferentes resoluciones */
@media (min-width: 1490px) {
    ul.objectDrag>li.subObjectDrag {
        display: flexbox
    }
}

@media (min-width: 1025px) and (max-width: 1490px) {
    ul.objectDrag>li.subObjectDrag {
        display: none;
    }

    ul.objectDrag {
        width: 10%
    }

    .oc {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    ul.objectDrag>li.subObjectDrag {
        display: none;
    }

    ul.objectDrag {
        width: 10%
    }

    .oc {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    ul.objectDrag>li.subObjectDrag {
        display: none;
    }

    ul.objectDrag {
        width: 10%
    }

    .oc {
        display: none;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    ul.objectDrag>li.subObjectDrag {
        display: none;
    }

    ul.objectDrag {
        width: 10%
    }

    .oc {
        display: none;
    }

    #mapa_iz {
        height: 50%;
    }
}

@media (min-width: 320px) and (max-width: 480px) {
    ul.objectDrag>li.subObjectDrag {
        display: none;
    }

    ul.objectDrag {
        width: 10%
    }

    .oc {
        display: none;
    }

    #mapa_iz {
        height: 50%;
    }
}

.ui-select-choices-row:hover {
    background-color: #e3ebf3 !important;
}

.ui-select-bootstrap4 .ui-select-choices-row>span:hover,
.ui-select-bootstrap4 .ui-select-choices-row>span:focus {
    background-color: #e3ebf3 !important;
}

.ui-select-bootstrap4 .ui-select-choices-row.active>span {
    background-color: #428bca !important;
}

/* Estilo de boton subir o scroll top */
#return-to-top {
    /* position: fixed; */
    /* bottom: 20px;
    right: 20px; */
    /* background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7); */
    width: 50px;
    height: 50px;
    /* display: block; */
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#return-to-top i {
    /* color: #000000; */
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#return-to-top:hover {
    /*background: rgba(0, 0, 0, 0.9);*/
}

#return-to-top:hover i {
    /* color: #fff; */
    top: 5px;
}

.observaciones:last-child {
    margin-left: 60px;
}

/* .small-white a {
    color : #FFF;
} */
.right-timeline {
    text-align: right;
    padding-right: 50px;
}

/* Estilo para el cambio de colores */
th.navbar-semi-light,
.card>div:not(.navbar-light)>.card-title.card-change,
.card>div:not(.navbar-light)>.heading-elements.card-change,
.card>div:not(.navbar-light)>.heading-elements.card-change a,
a#return-to-top:not(.navbar-light)>i.ft-chevron-up,
.card>div:not(.navbar-light)>.heading-elements.card-change .small-white>a {
    color: #FFF;
}

.navbar-semi-light small>a {
    color: #FFF !important;
}

.bg-dark .nav-link,
.mapa_sup .nav-link {
    color: #FFF !important;
}

.overlay {
    background-color: rgba(0, 0, 0, 0.8);
    text-align: justify;
    border-radius: 2%;
    width: fit-content;
    height: auto;
    color: #FFF;
    padding: 10px;
}

a.boxclose {
    float: right;
    margin-top: -16px;
    margin-right: -16px;
    cursor: pointer;
    color: #fff;
    border: 1px solid #AEAEAE;
    border-radius: 30px;
    background: #605F61;
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
    line-height: 0px;
    padding: 9px 3px;
}

.boxclose:before {
    content: "x";
}

/* Sombre la fila cuando se selecciona un reporte preconfigurado*/
.reporte-selected {
    background-color: #e6e7ed !important;
    font-weight: bold !important;
}

.ms-options-wrap>.ms-options {
    left: auto;
    width: 50%;
}

#orangeBox {
    background: #FA787E;
    color: #fff;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-size: 0.6em;
    font-weight: bold;
    text-align: center;
    width: 10px;
    height: 10px;
    border-radius: 1px;
    z-index: 1000;
    position: absolute;
    left: 6px;
    top: 8px;
}

.lista-bordes {
    border-bottom: 1px solid #E0E0E0;
}

.ocultarXMultiple {
    display: none !important;
    color: #FA787E !important;
}

/* Alterar el color de las filas seleccionadas en Datatable */
table.dataTable tbody tr.selected {
    color: #6b6f82 !important;
    border: 1px solid #e3ebf3 !important;
    background-color: #e3ebf3 !important;
}

table.dataTable tbody tr.selected a {
    color: #666ee8;
}

#mapa_iz .nav.nav-tabs.nav-underline {
    background: #555555;
    color: #FFF;
}

.mapa_contenedor_ruido_playback {
    background: rgb(59, 61, 60);
    height: 95%;
    width: 100%;
    padding: 0px;
    margin: 0px;
}

#pie_mapa_ruido {
    height: 5%;
    width: 100%;
    background-color: #0000ff;
    background: #0e0e0e;
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, #0e0e0e 0%, #7d7e7d 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #0e0e0e 0%, #7d7e7d 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #0e0e0e 0%, #7d7e7d 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0e0e0e', endColorstr='#7d7e7d', GradientType=1);
}

#pie_mapa_ruido .popover-content {
    background-color: #000;
}

#over_map_de_ruido .noUi-horizontal .noUi-handle {
    height: 14px !important;
    width: 17px !important;
    top: -2px !important;
}

#over_map_de_ruido .noUi-handle:after,
.noUi-handle:before {
    display: none !important;
}

#over_map_de_ruido .noUi-connect {
    background: #d4ccc6;
}

.registrar-pqr-mapa input,
.registrar-pqr-mapa select,
.registrar-pqr-mapa textarea {
    background: rgb(59, 61, 60) !important;
    color: white;
    width: 100%;
    border: 1px solid gray;
}

/* Card */
.card-body-ps {
    padding: 0em 1em 0em 1em;
}

.card-header-ps {
    padding: 0.8em 0.5em 0.8em 0.5em;
}

.card-body-ps input[type="color"] {
    padding: 0em;
}

/* Configuracion dinamica del dashboard */
.cont-conf-dashboard {
    height: 100%;
    width: 40%;
    position: fixed;
    z-index: 1050;
    top: 0;
    left: -40%;
    background-color: #FFFFFF;
    transition: 0.5s;
}

.cont-conf-dashboard .closebtn {
    position: absolute;
    z-index: 10;
    top: 20px;
    right: 16px;
    width: auto;
    cursor: pointer;
}

.cont-conf-dashboard .btn-toggle-dash {
    display: block;
    border-radius: 0em 0.5em 0.5em 0em;
    padding: 0.9em;
    position: absolute;
    top: 45%;
    right: -43px;
    cursor: pointer;
}

.mostrarConfDash {
    left: 0;
}

.left-0 {
    left: 0;
}

.card.card-especial>.card-header {
    padding: 1rem 1rem 0.5rem 1rem;
}

.card.card-especial>.card-header>div.heading-elements {
    top: 0.5rem;
}

.animacion.der-izq {
    animation-iteration-count: infinite;
    animation-name: translateWind;
    animation-duration: 4s;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
}

nav.ocultarNavMenu {
    top: -70px;
}

div.btnOcultarMenu {
    width: 35px;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    top: 0px;
    right: 50%;
    position: absolute;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.5);
}

div.btnOcultarMenu>img {
    height: 100%;
    width: 100%;
}

.texto-tipo-tiempo {
    font-family: 'Press Start 2P', cursive;
}

/* Configuracion dinamica del dashboard */

/* Mapa 2*/

.contenedor-mapa-opciones1 {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    position: absolute;
}

.contenedor-mapa-opciones2 {
    float: right;
    width: calc(100% - 350px);
    height: 100vh;
    display: flex;
    justify-content: center;
    position: relative;
}

.contenedor-menu {
    background: white;
    overflow-y: auto;

}

.bg-menu-dark {
    background: #3B3D3C;
    color: white !important;
}

.bg-menu-light {
    background: white;
    color: #3B3D3C !important;
}

.card-equipos {
    padding: 16px 24px 16px;
    margin-top: 10px;
    width: 100%;
    border-color: transparent;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 10px 4px 10px rgb(0 0 0 / 20%);
    position: relative;
    top: -20px;
}

.card-equipos h3 {
    background-color: transparent;
    font-size: 16px;
}

.card-equipos table {
    margin-top: 1.5em;
}

.card-variables {
    padding: 16px 24px 16px;
    margin-top: 10px;
    width: 100%;
    border-color: transparent;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 10px 4px 10px rgb(0 0 0 / 20%);
    position: relative;
    top: -15px;
}

.card-variables h3 {
    background-color: transparent;
    font-size: 16px;
}

.elemento-boton {
    position: relative;
    width: 26px;
    height: 28.5px;
}

.cont-vertical .elemento-boton {
    display: block;
}

.cont-horizontal .elemento-boton {
    margin: 1px 5px;
    height: 100%;
}

.cont-vertical .elemento-boton {
    margin: 5px 1px;
    width: 25px;
}

.cont-horizontal {
    display: flex;
    height: 25px;
    padding: 0 5px;
}

.cont-vertical {
    width: 25px;
    padding: 5px 0;
}

.cont-horizontal .boton-mapa {
    position: absolute;
}

.boton2-mapa {
    font-size: 19px !important;
    margin-left: 2px;
}

.darkmode .botones-mapa .boton2-mapa {
    color: white;
}

.lightmode .botones-mapa .boton2-mapa {
    color: #292929;
}

.boton-mapa {
    font-size: 23px !important;
}

.cont-vertical .boton-mapa {
    position: relative;
}

.botones-mapa {
    border-radius: 25px;
}

.darkmode .botones-mapa .boton-mapa {
    color: white;
}

.darkmode .botones-mapa {
    background-color: rgba(0, 0, 0, 0.5);
}

.lightmode .botones-mapa {
    background-color: rgba(255, 255, 255, 0.7);
}

.lightmode .botones-mapa .boton-mapa {
    color: #292929;
}

/* Menus */
.mapas-div {
    width: 90%;
    overflow: hidden;
    border-radius: 10px;
    padding: 0px;
    height: 100px;
    position: relative;
}

.mostrador-mapa {
    width: 32%;
    float: left;
    overflow: hidden;
    height: 72%;
    position: relative;
    border-radius: 10px;
    margin-right: 3px;
    box-shadow: inset 0 4px 8px rgb(0 0 0 / 0%), inset 0 -14px 27px rgb(0 0 0 / 60%);
    border: 1px solid #56594e; 
    text-align: center;
    align-content: end;
}

.titulo-menu {
    margin: 10px 0 15px 10px;
}

.contenedor-menu .darkmode .titulo-menu {
    color: white;
}

.contenedor-menu .lightmode .titulo-menu {
    color: gray;
}

/* .contenedor-menu .lightmode .form-control.ui-special-group span.btn-secondary, .form-control.ui-special-group span.btn-secondary:hover {
	background-color:  white !important;
}

.contenedor-menu .darkmode .form-control.ui-special-group span.btn-secondary, .form-control.ui-special-group span.btn-secondary:hover {
	background-color:  gray !important;
} */

.contenedor-menu .darkmode .form-group {
    color: white;
}

.contenedor-menu .lightmode .form-group {
    color: gray;
}

.contenedor-menu .darkmode .container-check input:checked~.checkmark {
    background-color: #1078FF;
    border-color: gray;
}

.contenedor-menu .lightmode .container-check input:checked~.checkmark {
    background-color: #1078FF;
    border-color: #1078FF;
}

.contenedor-menu .darkmode .ui-select-toggle {
    color: white !important;
}

.contenedor-menu .lightmode .ui-select-toggle {
    color: gray !important;
}

.lugar span {
    font-size: 15.4px;
    position: absolute;
    top: -1px;
    margin-left: 5px;
}

.contenedor-menu .darkmode .lugar span {

    color: white;
}

.contenedor-menu .lightmode .lugar span {
    color: gray;
}

.azul-mapa {
    color: #1078FF !important;
}

.mostrador-mapa .label {
    display: flex;
    position: absolute;
    width: 100%;
    bottom: 0px;
    color: white;
    background-color: rgba(0, 0, 0, 0.6);
}

.mostrador-mapa label {
    margin: 0;
}

.divisor-menu {
    border-top: 1px solid grey;
    width: 95%;
    margin-top: 10px;
}

.lugar {
    position: relative;
}

.lugar i {
    cursor: pointer;
    font-size: 22px !important;
    margin-left: 20px;
}

.select-reporte {
    width: 100%;
}

.contenedor-menu .ui-select-container {
    width: 80%;
    left: 35px;
}

/* .contenedor-menu .text-muted {
    color: white !important;
} */

.contenedor-menu .form-group {
    padding-left: 20px;
}

/* Animacion desplegar y replegar menu*/
#menu-izquierda {
    width: 351px;
    height: 100vh;
    z-index: 1000;
    left: -350px;
    transition: transform 0.5s cubic-bezier(.46, .03, .52, .96);
    overflow-x: hidden;
}

#menu-derecha {
    top: 0px;
    position: fixed;
    width: 351px;
    height: 100vh;
    z-index: 1000;
    right: -350px;
    transition: transform 0.5s cubic-bezier(.46, .03, .52, .96);
    overflow-x: hidden;
    overflow-y: auto;
}

.darkmode {
    background: rgb(59, 61, 60);
}

.lightmode {
    background: white;
}

.centrar {
    display: flex;
    justify-content: center;
}

.boton-mapa:hover {
    color: #2a97ea !important;
    font-size: 110%;
}

.boton-mapa-seleccionado {
    color: #2a97ea !important;
    font-size: 24px !important;
}

.boton2-mapa-seleccionado {
    color: #2a97ea !important;
    font-size: 21px !important;
}

.cont-vertical .flag-icon {
    margin-right: 0px !important;
    width: 23px !important;
}

#contenedor-mapa {
    background: rgb(59, 61, 60);
    height: 100%;
    width: 100%;
    padding: 0;
    position: fixed;
    transition: width 0.5s cubic-bezier(.46, .03, .52, .96);
    transition: height 0.5s cubic-bezier(.46, .03, .52, .96);
}

#contenedor-mapa-slider {
    background: rgb(59, 61, 60);
    height: 100%;
    width: 100%;
    padding: 0;
    transition: width 0.5s cubic-bezier(.46, .03, .52, .96);
    position: absolute;
}

#mapa-sedes,
.mapa-md {
    background: rgb(59, 61, 60);
    height: 500px;
    width: 100%;
    padding: 0;
    transition: width 0.5s cubic-bezier(.46, .03, .52, .96);
}

#mapa-infoSede {
    background: rgb(59, 61, 60);
    height: 300px;
    width: 100%;
    padding: 0;
    transition: width 0.5s cubic-bezier(.46, .03, .52, .96);
}

#opciones-mapa {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100vw;
    height: 100vh;
    padding: 0px !important;
    margin: 0px !important;
}

.derecha {
    right: 20px;
}

.arriba {
    top: 25px;
}


.derecha .cont-vertical {
    margin-left: auto;
}

.seccion-mapa {
    position: absolute;
    z-index: 1000;
}

.elemento-mapa {
    display: block;
    position: relative;
}

.ocultar-graficas {
    position: sticky;
    top: 0px;
    z-index: 2000;
    background: white;
    font-size: 20px;
}

.ocultar-graficas-izquierda {
    text-align: right;
    margin-right: 10px;
}

.ocultar-graficas-derecha {
    text-align: left;
    margin-left: 10px;
}

.graficas {
    margin-top: 15px;
}

.grafica {
    width: 90%;
    margin: 10px;
}

.componentes {
    display: inline;
    margin-left: 5px;
}

.subtitulo {
    font-weight: bold;
    font-size: 120%;
    margin-bottom: 5px;
}

.botones-mapa .dropdown-toggle::after {
    display: none;
}

.lightmode .botones-mapa .dropdown .dropdown-menu {
    transform: translate3d(0px, 26px, 0px) !important;
    background-color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.7);
}

.lightmode .botones-mapa .dropdown .dropdown-menu .dropdown-item {

    color: #292929 !important;
    font-weight: bold !important;
}

.marcador {
    position: relative;
    height: 75px;
}

.texto-marcador {
    position: absolute;
    display: flex;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    z-index: 201;
    top: 4px;
    color: #000;
    width: 70px;
    font-weight: 600;
}

.map_legeng {
    width: 100px;
    height: 100px;
    background-color: black;
}

.ventana-info {
    width: auto !important;
    height: auto !important;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 20px;
    padding: 5px;
    min-width: 200px;
    color: white;
    z-index: 900 !important;
    cursor: default;
}

.ventana-info-ind {
    width: auto !important;
    min-height: 400px !important;
    background-color: #222831;
    border-radius: 20px;
    padding: 5px;
    min-width: 250px;
    color: white;
    z-index: 90000 !important;
    padding: 15px;
}

.checkbox1 {
    margin-left: 0px !important;
    margin-bottom: 10px;
}

.checkbox1 fieldset {
    padding: 0px;
}

.checkbox1 input[type="checkbox"]:checked::after {
    content: '\2714';
    font-size: 19px;
    position: absolute;
    bottom: -8px;
    left: 0px;
    color: white;
}

.checkbox1 input[type="checkbox"]:checked {
    background-color: rgb(52, 152, 219);
    border: 1px solid rgb(52, 152, 219);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
    color: white;
}

.checkbox input[type="checkbox"]:checked {
    color: white;
}

.izquierda {
    left: 20px;
}

.abajo-medio {
    bottom: 95px;
}

.abajo {
    bottom: 20px;
}

/*Vista para celulares*/

@media (min-width: 913px) {

    #logo-mapa {
        position: absolute;
        margin-top: 15px;
        height: 8%;
        width: 220px;
        z-index: 1000;
    }

    .cont-info {
        background-color: rgba(0, 0, 0, 0.8);
        width: 430px;
        color: white;
        padding: 2%;
        border-radius: 25px;
        margin-right: 0%;
    }

    .checkbox1 input[type="checkbox"] {
        -webkit-appearance: none;
        background-color: #fafafa;
        border: 1px solid #cacece;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
        padding: 6px;
        border-radius: 3px;
        display: inline-block;
        position: relative;
        top: 2px;
    }

    .cont-info label {
        margin-right: 17px;
    }

    #tamano-mapa2 {
        display: none;
    }


}

@media (min-width: 481px) and (max-width: 912px) {
    #logo-mapa {
        position: relative;
        top: 10%;
        height: 4%;
        width: 160px;
        z-index: 1000;
    }
}

@media (min-width: 320px) and (max-width: 480px) {
    #logo-mapa {
        position: relative;
        top: 10%;
        height: 4%;
        width: 100px;
        z-index: 1000;
    }



    .cont-info {
        background-color: rgba(0, 0, 0, 0.8);
        width: 340px;
        color: white;
        padding: 2%;
        border-radius: 25px;
        margin-right: 0%;
    }

    .checkbox1 input[type="checkbox"] {
        -webkit-appearance: none;
        background-color: #fafafa;
        border: 1px solid #cacece;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
        padding: 5px;
        border-radius: 3px;
        display: inline-block;
        position: relative;
        top: 2px;
    }

    .cont-info label {
        margin-right: 17px;
        font-size: 90%;
    }



    #tamano-mapa1 {
        display: none;
    }

    #tamano-mapa2 {
        display: block;
    }
}

.empresa-select {
    width: 200px;
    height: 25px;
    position: relative;
}

.select-mapa .form-control.ui-select-container {
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0);
    border-radius: 25px;
    border: none;
}

.select-mapa div.ui-select-match {
    height: 100%;
    width: 100%;
    border-radius: 25px;
}

.select-mapa .form-control.ui-special-group span.btn-secondary,
.select-mapa .form-control.ui-special-group span.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 25px !important;
    border: none;
    height: 25px;
}


.select-mapa .ui-select-match-text {
    font-size: 15px;
    font-weight: bold;
    position: absolute;
    top: 3px;
}

.select-mapa .dropdown-toggle::after,
.form-menu-mapa .dropdown-toggle::after {
    font-weight: bold;
    position: absolute;
    top: 5px;
    right: 14px;
}

.select-mapa .ui-select-placeholder.text-muted {
    position: absolute;
    top: 5px;
    left: 10px;
    color: #aeb5da !important;
}

.select-mapa .form-control.ui-select-search {
    background-color: rgba(255, 255, 255, 0.7);
    color: #292929;
    height: 100%;
    border-radius: 25px;
    border: none;
    text-indent: 10px;
}

.select-mapa .form-control.ui-select-search::placeholder {
    color: #292929;
}

.select-mapa .ui-select-bootstrap4 .ui-select-choices-row.active>span {
    color: #292929;
    font-weight: 600;
}

.select-mapa .ui-select-bootstrap4 .ui-select-choices-row>span {
    background-color: #2a97ea !important;
}

.select-mapa .dropdown-menu.ui-select-choices {
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    transform: translateY(2px);
}

#opciones-mapa.darkmode .form-control {
    border: none !important;
}

.titulo-agregar {
    position: relative;
    display: flex;
}

.contenedor-agregar {
    margin: 13px 0px 0px 5px;
    width: 18px;
    height: 18px;
}

.borde-agregar {
    position: relative;
    border: 1px solid black;
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

.elemento-agregar {
    font-size: 20px;
    font-weight: bold;
    position: relative;
    top: -7px;
    left: 2px;
}

.form-menu-mapa input {
    width: 80%;
    height: 33px;
    margin-top: 3px;
    margin-bottom: 3px;
}

.info-paneles div {
    display: block;
}

.info-paneles {
    width: 90%;
    background-color: #f2f2f2;
    border-radius: 8px;
    padding: 5px;
    font-size: 12px;
    margin-bottom: 5px;
    position: relative;
}

.form-menu-mapa .ui-select-match-item {
    font-size: 12px;
}

.form-menu-mapa .multiple {
    height: auto !important;
}

.form-menu-mapa .form-control.ui-select-container {
    height: 33px;
    margin: 3px 0px 3px 0px;
}

.form-menu-mapa div.ui-select-match {
    height: 100%;
}

.form-menu-mapa .form-control.ui-special-group span.btn-secondary,
.form-menu-mapa .form-control.ui-special-group span.btn-secondary:hover {
    height: 100%;
}


.form-menu-mapa .ui-select-match-text {
    padding-top: 0px;
    position: absolute;
    top: 6px;
}

.form-menu-mapa .form-control.ui-select-search {
    height: 100%;
    width: 100%;
    margin-top: 0px;
}

.form-menu-mapa .ui-select-placeholder.text-muted {
    position: absolute;
    top: 5px;
    left: 10px;
    color: #aeb5da !important;
}

.form-menu-mapa .btn.btn-outline-primary {
    padding: 6px 0px;
    min-width: 100px;
    margin-top: 7px;
}

.form-menu-mapa .btn-outline-primary {
    color: #2a97ea;
    border-color: #2a97ea;
}

.form-menu-mapa .btn-outline-primary:hover {
    color: white !important;
    border-color: #2a97ea;
    background-color: #2a97ea;
}

.darkmode .botones-mapa .tooltiptext {
    background-color: rgba(0, 0, 0, 0.5);
    color: #FFF;
    border-radius: 8px;
    font-weight: bold;
}

.botones-mapa .tooltiptext {
    background-color: rgba(255, 255, 255, 0.7);
    color: #292929;
    border-radius: 8px;
    font-weight: bold;
}

.darkmode .botones-mapa.tooltiptext {
    background-color: rgba(0, 0, 0, 0.5);
    color: #FFF;
    border-radius: 8px;
    font-weight: bold;
}

.botones-mapa.tooltiptext {
    background-color: rgba(255, 255, 255, 0.7);
    color: #292929;
    border-radius: 8px;
    font-weight: bold;
}

.botones-mapa .tooltip-left::after {
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.7);
    height: 12px;
    width: 12px;
    margin-top: -6px;
}

.botones-mapa .tooltip-bottom::after {
    border-color: transparent transparent rgba(255, 255, 255, 0.7) transparent;
    height: 12px;
    width: 12px;
    margin-top: -6px;
}

.botones-mapa .tooltip-right::after {
    border-color: transparent rgba(255, 255, 255, 0.7) transparent transparent;
    height: 12px;
    width: 12px;
    margin-top: -6px;
}

.caso-1 {
    width: calc(100% - 350px) !important;
    right: 0px;
}

.caso-1-indicadores {
    width: calc(100% - 400px) !important;
    right: 0px;
}

.caso-2 {
    width: calc(100% - 700px) !important;
    right: 350px;
}

.caso-3 {
    width: calc(100% - 350px) !important;
    left: 0px;
}

.caso-4 {
    width: calc(100% - 700px) !important;
    left: 350px;
}

.caso-5 {
    right: 0px;
}

.caso-6 {
    width: calc(100% - 350px) !important;
    right: 350px;
}

.caso-7 {
    left: 0px;
}

.caso-8 {
    width: calc(100% - 350px) !important;
    left: 350px;
}



.mapa-menu-1 {
    width: calc(100% - 350px) !important;
}

.mapa-menu-2 {
    width: calc(100% - 700px) !important;
}

.menu-izquierda {
    right: 0px !important;
}

.menu-izquierda-indicadores {
    right: 0px !important;
}

.menu-derecha {
    left: 0px !important;
}

.menu-ambos {
    left: 350px;
    right: 350px;
}

.replegar-menu-izquierda {
    transform: translateX(0px);
}

.replegar-menu-izquierda-indicadores {
    transform: translateX(0px);
}

.desplegar-menu-izquierda {
    transform: translateX(350px);
}

.desplegar-menu-izquierda-indicadores {
    transform: translateX(400px);
}

.replegar-menu-derecha {
    transform: translateX(0px);
}

.desplegar-menu-derecha {
    transform: translateX(-350px);
}

.eliminar-resolucion {
    position: absolute;
    right: 9px;
    top: 1px;
    font-size: 13px;
    font-weight: bold;
}

.boton-circulo {
    font-size: 22px;
}

/* Manual de usuarios */


.manual-usuario {
    position: fixed;
    z-index: 1050;
    top: 0;
    right: -40%;
    bottom: 0;
    width: 40%;
    height: 100vh;
    padding: 0;
    -webkit-transition: right .4s cubic-bezier(.05, .74, .2, .99);
    -moz-transition: right .4s cubic-bezier(.05, .74, .2, .99);
    -o-transition: right .4s cubic-bezier(.05, .74, .2, .99);
    transition: right .4s cubic-bezier(.05, .74, .2, .99);
    border-left: 1px solid rgba(0, 0, 0, .05);
    background-color: #fff;
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .3);
    box-shadow: 0 0 8px rgba(0, 0, 0, .3);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

.manual-usuario-close {
    color: #000;
}

.manual-usuario .manual-usuario-close {
    position: absolute;
    z-index: 10;
    top: 10px;
    right: 10px;
    width: auto;
    padding: 7px;

}

.manual-usuario a.manual-usuario-toggle {
    display: block;
    border-radius: 15px 0 0 15px;
}

.manual-usuario .manual-usuario-toggle {
    line-height: 56px;
    position: absolute;
    top: 45%;
    left: -54px;
    width: 54px;
    height: 50px;
    cursor: pointer;
    text-align: center;
}

.manual-usuario .manual-usuario-content {
    position: relative;
    height: 100%;
}

.manual-usuario-content {
    overflow: auto !important;
}


.manual-usuario-abrir {
    right: 0px;
}

.manual-opciones {
    padding: 0.5rem;
}

.manual-titulo {
    color: #2a97ea;
    font-weight: bold;
}

.manual-contenido {
    padding: 0 0 0 0.3rem;
}

.manual-boton {
    font-size: 25px !important;
    margin-right: 10px;
}

.manual-subtitulo {
    margin: 1.8rem 0 0.8rem 0.1rem;
}

.manual-actividades {
    padding-left: 1.5rem;
}

.manual-actividades li {
    font-weight: 600;
}

.manual-descripciones {
    padding-left: 1.0rem;
}

.manual-descripciones li {
    margin: 0 0 0.5rem 0;
    font-weight: 100 !important;
}

.manual-enlace {
    position: relative;
}

.imagen-pequena {
    height: 30px;
    width: 30px;
    display: inline-block;
}

.manual-flecha-actividad {
    position: relative;
}

.manual-flecha-actividad i {
    bottom: 0.5px;
    position: absolute;
    left: 5px;
    font-size: 16px;
}

.flecha-acordeon i {
    display: inline-block;
    font-weight: 600;
    transition: transform 0.4s ease;
}

.flecha-acordeon-abrir {
    transform: rotate(90deg);
    color: #2a97ea;
}

.acordeon-contenido {
    max-height: 0;
    transition: all 0.4s ease;
    opacity: 0;
}

.acordeon-abierto {
    max-height: 10000px;
    opacity: 1;
}

.manual-tooltip-general {
    width: 265px !important;
    top: -30px;
}

.manual-contenido .ui-select-match-item {
    font-size: 12px;
}

.manual-contenido .multiple {
    height: auto !important;
}

.manual-contenido .form-control.ui-select-container {
    width: 230px;
    height: 33px;
    display: inline-block;
    top: 5px;
}

.manual-contenido div.ui-select-match {
    height: 100%;
}

.manual-contenido .form-control.ui-special-group span.btn-secondary,
.manual-contenido .form-control.ui-special-group span.btn-secondary:hover {
    height: 100%;
}


.manual-contenido .ui-select-match-text {
    padding-top: 0px;
    position: absolute;
    top: 6px;
}

.manual-contenido .form-control.ui-select-search {
    height: 100%;
    width: 100%;
    margin-top: 0px;
}

.manual-contenido .ui-select-placeholder.text-muted {
    position: absolute;
    top: 5px;
    left: 10px;
    color: #aeb5da !important;
}

.manual-contenido .btn.btn-outline-primary {
    padding: 6px 0px;
    min-width: 100px;
    margin-top: 7px;
}

.manual-contenido .btn-outline-primary {
    color: #2a97ea;
    border-color: #2a97ea;
}

.manual-contenido .btn-outline-primary:hover {
    color: white !important;
    border-color: #2a97ea;
    background-color: #2a97ea;
}

.manual-contenido .dropdown-toggle::after {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .255em;
    position: absolute;
    top: 5px;
    right: 12px;
}

.manual-adelante {
    z-index: 1052;
}

.imagen-texto {
    height: 50px;
    width: 50px;
}

.imagen-completa {
    width: 100%;
}

.precondiciones {
    font-weight: 100;
    margin-left: 1rem;
}

/*Reportes mng*/

.tarjeta-reportes {
    height: 95px;
    padding: 1rem 1.5rem;
}

.menu-acordeon {
    margin: 1rem 0;
}

.menu-acordeon-elemento {
    font-weight: bold;
    border: 1px solid #cdcdcd;
    border-radius: 5px;
    padding: 1rem;
    background-color: #f4f4f4;
    -webkit-box-shadow: inset 0px 0px 16px -12px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: inset 0px 0px 16px -12px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0px 0px 16px -12px rgba(0, 0, 0, 0.5);
}

.borde-sombreado {
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    -webkit-box-shadow: -5px 5px 5px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: -5px 5px 5px 0px rgba(0, 0, 0, 0.3);
    box-shadow: -5px 5px 5px 0px rgba(0, 0, 0, 0.3);
}

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

.locked-tag .select2-selection__choice__remove {
    display: none !important;
}

.dot-423 {
    height: 15px;
    width: 15px !important;
    background-color: green;
    border-radius: 50%;
    display: inline-block;
}

.dot-422 {
    height: 15px;
    width: 15px !important;
    background-color: #fefe22;
    border-radius: 50%;
    display: inline-block;
}

.dot-421 {
    height: 15px;
    width: 15px !important;
    background-color: red;
    border-radius: 50%;
    display: inline-block;
}

.tag-actual {
    background-color: #46d49e;
    border-radius: 5%;
}

#mapa-epidemiologia {
    background: rgb(59, 61, 60);
    height: 100%;
    width: 100%;
    padding: 0;
    transition: width 0.5s cubic-bezier(.46, .03, .52, .96);
}

.lightmode .texto-mapa {
    color: #FFF;
    font-weight: bolder;
}


.darkmode .texto-mapa {
    color: #111;
    font-weight: bolder;
}

#acordeonSedes {
    width: 90%;
    padding-left: 5%;
}

.cluster {
    background: #2d84c8;
    border-radius: 50%;
    text-align: center;
    color: white;
    font-weight: 700;
    border: 1px solid #2d84c8;
    font-family: monospace;
}

.cluster:before {
    content: ' ';
    position: absolute;
    border-radius: 50%;
    z-index: -1;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    border: 1px solid white;
}

.cluster-lugares-estacion {
    background: #de9361;
    border-radius: 50%;
    text-align: center;
    color: white;
    font-weight: 700;
    border: 1px solid #de9361;
    font-family: monospace;
}

.cluster-lugares-estacion:before {
    content: ' ';
    position: absolute;
    border-radius: 50%;
    z-index: -1;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    border: 1px solid white;
}

.cluster-lugares {
    background: #d5776a;
    border-radius: 50%;
    text-align: center;
    color: white;
    font-weight: 700;
    border: 1px solid #d5776a;
    font-family: monospace;
}

.cluster-lugares:before {
    content: ' ';
    position: absolute;
    border-radius: 50%;
    z-index: -1;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    border: 1px solid white;
}

.cluster-observatorio {
    background: #8a7196;
    border-radius: 50%;
    text-align: center;
    color: white;
    font-weight: 700;
    border: 1px solid #8a7196;
    font-family: monospace;
}

.cluster-observatorio:before {
    content: ' ';
    position: absolute;
    border-radius: 50%;
    z-index: -1;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    border: 1px solid white;
}

.digits-1 {
    font-size: 14px;
    height: 28px;
    width: 28px;
    line-height: 28px;
    margin-top: -14px;
    margin-left: -14px;
}

.digits-2 {
    font-size: 16px;
    height: 34px;
    width: 34px;
    line-height: 35px;
    margin-top: -17px;
    margin-left: -17px;
}

.digits-2:before {
    border-width: 2px;
}

.digits-3 {
    font-size: 18px;
    height: 48px;
    width: 47px;
    line-height: 47px;
    border-width: 3px;
    margin-top: -24px;
    margin-left: -24px;
}

.digits-3:before {
    border-width: 3px;
}

.digits-4 {
    font-size: 18px;
    height: 58px;
    width: 58px;
    line-height: 57px;
    border-width: 4px;
    margin-top: -29px;
    margin-left: -29px;
}

.digits-4:before {
    border-width: 4px;
}

.cluster-empleados {
    background: #fccc33;
    border-radius: 50%;
    text-align: center;
    color: white;
    font-weight: 700;
    border: 1px solid #fccc33;
    font-family: monospace;
}

.cluster-empleados:before {
    content: ' ';
    position: absolute;
    border-radius: 50%;
    z-index: -1;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    border: 1px solid white;
}

.multiSelect {
    display: block;
    cursor: text;
}

.cluster-ejemplo {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #2d84c8;
    border: 1px solid #fff;
    box-shadow: 0 0 0 1px #2d84c8;
}

.cluster-ejemplo-empleados {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fccc33;
    border: 1px solid #fff;
    box-shadow: 0 0 0 1px #fccc33;
}

.convenciones-center {
    justify-content: center;
    align-items: center;
    display: flex;
}

.temperaturaValida {
    color: green !important;
}

.temperaturaInvalida {
    color: red !important;
}

.borde-tabla {
    border: 1px solid #e3ebf3 !important;
}

#opciones-mapa .form-control.ui-special-group {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 22px;
    height: 37px;
}

#opciones-mapa.darkmode .form-control.ui-special-group {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 22px;
    height: 37px;
}

#opciones-mapa .dropdown-menu {
    background-color: rgba(255, 255, 255, 0.7);
}

#opciones-mapa .ui-select-bootstrap4 .ui-select-choices-row>span {
    color: black;
}

#opciones-mapa .btn-default-focus {
    height: 37px;
    border-radius: 22px;
}

#opciones-mapa .form-control.ui-special-group.ui-select-container {
    width: 12rem;
}

#opciones-mapa .form-control.ui-special-group span.btn-secondary {
    color: black !important;
    border: none;
}

#opciones-mapa .form-control.ui-special-group span.btn-secondary,
.dark-mode .form-control.ui-special-group span.btn-secondary:hover {
    background-color: rgba(0, 0, 0, 0) !important;
    color: black !important;
}

#opciones-mapa .form-control.ui-special-group span.btn-secondary::after {
    background-color: rgba(0, 0, 0, 0) !important;
    color: black !important;
}

#opciones-mapa .dropdown-toggle::after {
    font-size: 1.1rem;
}

#opciones-mapa input[type="search"] {
    background-color: transparent;
    border-radius: 5px;
    border: none;
}

#opciones-mapa.darkmode .text-muted {
    color: white !important;
}

#opciones-mapa.lightmode .text-muted {
    color: black !important;
}

#opciones-mapa.darkmode input[type="search"] {
    background-color: transparent !important;
    ;
    border-radius: 5px;
    border: none !important;
    ;
}

#opciones-mapa ::placeholder {
    color: #69696D;
}

#opciones-mapa.darkmode ::placeholder {
    color: white;
}


#opciones-mapa .ui-select-bootstrap4 .ui-select-choices-row.active>span {
    background-color: #2EC096 !important;
}

#opciones-mapa .btn-default-focus {
    background-color: rgba(0, 0, 0, 0);
}

#opciones-mapa.darkmode .titulo-capas-mapa {
    color: white;
}

#opciones-mapa.darkmode .form-control.ui-special-group span.btn-secondary::after {
    color: white !important;
}

.fondo-formulario {
    background: linear-gradient(to bottom, #a9c9ff 32%, #0a2d6a 99%);
    min-height: 100vh !important;
}

input[type="number"].ocultar-spinner {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance: textfield;
}

.annotation-price-two .highcharts-annotation-label-box {
    fill: #ec2b00;
}

#form-configuracion-remota table th {
    min-width: 120px;
}

/**
* Estilos mapa SmartCity
*/
.bgColor {
    background-color: #1E9FF2 !important;
    color: white !important;
}

.bgColor-light {
    background-color: white !important;
    color: #3B3D3C !important;
}

.bgColor-dark {
    background-color: #3B3D3C !important;
    color: white !important;
}

.card-light {
    background: linear-gradient(90deg, #FFFFFF 0%, #E5E5E5 100%);
    border: 1px solid #E5E5E5;
}

.card-dark {
    background: linear-gradient(90deg, #3B3D3C 0%, #939393 100%);
    border: 1px solid #454746;
}

.ocultarIndicadorDropdow .dropdown-toggle::after {
    display: none;
}

.rounded-pill {
    border-radius: 50rem !important;
}

.text-oneLine {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
}

.text-twoLines {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* number of lines to show */
    -webkit-box-orient: vertical;
}

.estandarTamano {
    width: 2.2em;
    height: 2.2em;
}

.estandarAzul {
    border-color: #0C84D1 !important;
    background-color: #1E9FF2 !important;
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.5));
}

.estandarClaro {
    border-color: #343536 !important;
    background-color: #ffffff !important;
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.5));
}

.tituloMarcador {
    position: absolute;
    display: flex;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;
    z-index: 201;
    top: 5px;
    font-weight: 600;
    width: 75px;
}



/**
* ./ Estilos mapa SmartCity
*/

.margin-left {
    left: 0px;
}

.margin-top {
    top: 75px;
}

#menu-left {
    width: 256px;
    height: 100vh;
    z-index: 1000;
    left: -255px;
    transition: transform 0.5s cubic-bezier(.46, .03, .52, .96);
    overflow-x: hidden;
    overflow-y: auto;
}

.menu-left {
    right: 0px !important;
}

.replegar-menu-left {
    transform: translateX(0px);
}

.desplegar-menu-left {
    transform: translateX(255px);
}

.case-1 {
    width: calc(100% - 255px) !important;
    right: 0px;
}

.case-2 {
    width: calc(100% - 606px) !important;
    right: 350px;
}

.case-3 {
    width: calc(100% - 350px) !important;
    left: 0px;
}

.case-4 {
    width: calc(100% - 606px) !important;
    left: 255px;
}

.case-5 {
    right: 0px;
}

.case-6 {
    width: calc(100% - 350px) !important;
}

.case-7 {
    left: 0px;
}

.case-8 {
    width: calc(100% - 255px) !important;
    left: 255px;
}

#menu-footer {
    bottom: -20em;
    height: 20em;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: row;
    position: absolute;
    width: 100%;
    transition: transform 0.5s cubic-bezier(.46, .03, .52, .96);
    overflow-x: scroll;
}

#menu-footer>div {
    flex: 1;
    -webkit-flex: 1;
    /* min-width: 30em; */
}

.replegar-footer {
    transform: translateY(20em);
}

.desplegar-footer {
    transform: translateY(-20em);
}

.case-footer-1 {
    height: 100%;
}

.case-footer-2 {
    height: calc(100% - 23.3em) !important;
}

.rounded-right {
    border-top-right-radius: 0.5rem !important;
    border-bottom-right-radius: 0.5rem !important;
}

#header-barraLateralIz {
    position: absolute;
    left: 6%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    background: #4D8DFA;
    height: 22px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

#header-barraLateralIz i {
    margin-left: 10px;
    color: white;
}

#header-barraLateralIz a {
    margin-right: 10px;
}

#header-barraLateralDer {
    position: absolute;
    left: 4%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    background: #4D8DFA;
    height: 22px;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

#header-barraLateralDer i {
    margin-left: 10px;
    color: white;
}

#header-barraLateralDer a {
    margin-right: 10px;
}

#header-estaciones {
    position: absolute;
    left: 6%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    background: #4D8DFA;
    height: 22px;
    width: 256px;
    justify-content: center;
    align-items: center;
}

#header-estaciones i {
    font-size: 16px;
    color: white;
}

.text-header {
    padding-left: .8rem;
    font-style: normal;
    font-weight: bold;
    font-size: 12px;
    line-height: 23px;
    color: #FFFFFF;
}

#contenedor-grafica {
    position: absolute;
    left: 6%;
    right: 0%;
    top: 22px;
    bottom: 0%;
    background: rgba(255, 255, 255, 0.05);
    height: 176px;
    width: 256px;
    justify-content: center;
    align-items: flex-start;
}

#row-total {
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    height: 30px;
    width: 128px;
    justify-content: center;
    align-items: center;
}

#row-total i {
    font-size: 14px;
    padding-bottom: .2rem;
    color: #4D8DFA;
}

#row-inactivas {
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    height: 30px;
    width: 128px;
    justify-content: center;
    align-items: center;
}

#row-inactivas i {
    font-size: 14px;
    padding-bottom: .2rem;
    color: #FA4D4D;
}

#estadisticas-estaciones {
    position: absolute;
    top: 125px;
    left: 6%;
    right: 0%;
    bottom: 0%;
    height: 36px;
    width: 256px;
    justify-content: space-around;
    align-items: center;
}

#panel-total {
    height: 36px;
    width: 128px;
    justify-content: center;
    align-items: stretch;
    border-right: 0.1 rem solid;
    border-color: #939393;
}

#panel-inactivas {
    height: 36px;
    width: 128px;
    justify-content: center;
    align-items: stretch;
    border-left: 0.1rem solid;
    border-color: #939393;
}


.label-total {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    color: #4D8DFA;
}

.label-inactivas {
    font-style: normal;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    color: #FA4D4D;
}

.contador-total {
    padding-right: .4rem;
    padding-bottom: .2rem;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 16px;
    color: #4D8DFA;
}

.contador-inactivas {
    padding-right: .4rem;
    padding-bottom: .2rem;
    font-style: normal;
    font-weight: bold;
    font-size: 16px;
    line-height: 16px;
    color: #FA4D4D;
}

#tabBar {
    position: absolute;
    left: 6%;
    right: 0%;
    top: 218px;
    bottom: 0%;
    width: 256px;
    height: 24px;
    justify-content: space-around;
    align-items: center;
    border-bottom: solid;
    border-color: #4D8DFA;
    box-shadow: 10px -4px 15px rgba(0, 0, 0, 0.1);
}

.tabBar .tabBar-item {
    padding: 3px 30px;
    float: left;
    width: auto;
    border: none;
    display: block;
    outline: 0;
}

.bar-color {
    color: #4D8DFA !important;
    font-size: 10px;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.tab-button {
    border: none;
    display: inline-block;
    padding: 3px 30px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: transparent;
    text-align: center;
    cursor: pointer;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    white-space: nowrap;
}

.button-tab {
    color: rgb(255, 255, 255) !important;
    font-size: 10px;
    font-weight: bold;
    background-color: #4D8DFA;
}

#toast-container>div {
    opacity: 1;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    filter: alpha(opacity=100);
}

.tabView {
    position: absolute;
    left: 0%;
    right: 0%;
    top: 242px;
    padding-top: 11px;
    bottom: 0%;
    width: 256px;
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
    background-color: rgba(255, 255, 255, 0.05);
    overflow-y: auto;
    overflow-x: hidden;
}

.card-info-estacion {
    left: 31.23%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    background: linear-gradient(90deg, #3B3D3C 0%, #939393 100%);
    border: 1px solid #454746;
    box-sizing: border-box;
    border-radius: 10px;
}

/**
* ./ Grafica Estaciones Activas
*/
.contenedor-activas {
    width: 98px;
    height: 108px;
    margin: 10px;
}

/**
* ./ Fin Grafica Estaciones Activas
*/

#textcard-direccion {
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    height: 19px;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

.direction-card {
    width: 14.16em;
}

#textcard-direccion i {
    font-size: 14px;
    padding-left: 12px;
    padding-right: 15.4px;
    margin-left: 12px;
}

#textcard-direccion p span {
    font-size: 10px;
    width: 14.16em;
    margin-top: 2px;
}

.componentView {
    display: flex;
    height: 100px;
    background-color: transparent;
    overflow-y: auto;
    overflow-x: auto;
    margin-top: 0.1em;
    margin-left: -0.5em;
}

.componentView .text-center {
    padding: 5px;
    filter: none;
}

.componentView .text-center i {
    font-size: 15px;
    width: 17px;
    height: 17px;
    background-size: 15px 15px;
}

.componentView .cardView {
    margin-top: 0.5em;
}

.componentView .cardView .centrar .text-center {
    padding: 5px 6.5px;
    width: 30px;
    filter: none;
}

.componentView .cardView .centrar p {
    font-size: .75rem;
    font-weight: 400;
    letter-spacing: .025em;
    padding-top: 8px;
    line-height: 1rem;
}

.componentView .cardView .centrar .text-center i {
    font-size: 20px;
    background-size: 18px 18px;
}

.cardView {
    height: 80px;
    width: 80px;
    margin-right: 20px;
    background-color: transparent;
}

.oculto {
    background-color: transparent;
    box-shadow: none;
}

.oculto .card-content {
    margin-bottom: -12px;
}

.foto-cardLugares {
    -webkit-user-select: none;
    margin-right: 10px;
    transition: background-color 300ms;
    top: 13px;
    left: 13px;
    z-index: 1;
    position: absolute;
    width: 100px;
    height: 100px;
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.25));
    border-radius: 10px;


}

.bg-pleace-light {
    background: radial-gradient(84% 575.88% at 39.64% -475.88%, var(--color) 99.99%, #FFFFFF 100%);
    height: 126px;
    margin-bottom: 150px;
}

.bg-pleace-dark {
    background: radial-gradient(84% 575.88% at 39.64% -475.88%, var(--color) 99.99%, #3b3d3c 100%);
    height: 126px;
    margin-bottom: 150px;
}

.cardEstaciones {
    padding-left: 1em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    margin-left: 0.5em;
    margin-right: 0.5em;
    left: 31.23%;
    top: 0%;
    bottom: 0%;
    box-sizing: border-box;
    border-radius: 10px;
}

.cardEstaciones .componentView {
    width: 100%;
    height: 40px;
}

.roboto {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.cardEstaciones .nombreEstacion {
    font-size: 14px;
    padding-bottom: 6px;
    width: 210px;
    line-height: 21.6px;
}

.cardIndicadores {
    padding: 0.5em 1em 0.5em 1em;
    overflow: hidden;
}

.cardIndicadores .nombreVariable {
    font-size: 14px;
    padding-bottom: 6px;
    width: 100%;
    line-height: 21.6px;

}

.cardIndicadores .mb-0 span {
    font-size: 12px;
    margin-top: 2px;
    text-align: justify;
}

.cardIndicadores .mb-0 .nombreVariable {
    font-size: 16px;
}

.cardIndicadores .cardRango {
    height: 22px;
    width: 108px;
    border-radius: 10px;
    margin-top: -30px;
    margin-left: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cardIndicadores .cardRango .textRango {
    color: white;
    font-size: 12px;
}

.cardIndicadores .panel-medicion {
    width: 100px;
    margin-left: 1em;
}

.cardIndicadores .panel-medicion-dark {
    border-left: 3px solid #81CEFF;
}

.cardIndicadores .panel-medicion-light {
    border-left: 3px solid #364B66;
}


.cardIndicadores .panel-medicion div .mb-0 .text-medicion {
    width: 90px;
}

.cardIndicadores .panel-grafica {
    width: 190px;
    height: 95px;
    padding-left: 0px;
}

.cardIndicadores .separador-grafica {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.cardIndicadores .separador-grafica-dark {
    border-top: 1px solid #81CEFF;
}

.cardIndicadores .separador-grafica-light {
    border-top: 1px solid #364B66;
}

.cardNotificaciones .infoNotificacion-dark {
    font-size: 12px;
    text-align: justify;
    padding-left: 10px;
    border-left: 3px solid #81CEFF;
}

.cardNotificaciones .infoNotificacion-light {
    font-size: 12px;
    text-align: justify;
    padding-left: 10px;
    border-left: 3px solid #364B66;
}

.cardNotificaciones .nombre {
    font-size: 14px;
}

.cardNotificaciones .botonEstado-dark {
    border-top: 1px solid #81CEFF;
    padding-top: 10px;
}

.cardNotificaciones .botonEstado-light {
    border-top: 1px solid #364B66;
    padding-top: 10px;
}

.margin-bar {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.alinear-centro {
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    row-gap: 15px;
}

.emptyTextEstaciones {
    width: 250px;
    display: flex;
    background-color: transparent;
    box-shadow: none;
}

.emptyTextEstaciones span {
    font-size: 12px;
    text-align: center;
}

.emptyTextEstaciones a {
    color: darkgray;
    text-align: center;
    font-size: 12px;
}

.emptyActivas span {
    padding: 250px 0px 0px 0px;
    font-size: 24px;
    text-align: center;
}

.emptyActivas a {
    color: darkgray;
    text-align: center;
}

.fotoEstacion {
    background-size: cover;
    margin-top: -7px;
    width: 339px;
    height: 232px;
    -webkit-user-select: none;
}

.containerTipoEstacion {
    background-color: white;
    width: fit-content;
    padding: 5px 10px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    top: -220px;
    position: relative;
    color: #3B3D3C;
}

.card-infoEstacion {
    padding: 16px 24px 16px;
    height: 168px;
    width: 100%;
    border-color: transparent;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 10px 4px 10px rgb(0 0 0 / 20%);
    position: relative;
    top: -30px;
}

.card-infoEstacion h3 {
    background-color: transparent;
    font-size: 18px;
    width: 310px;
}

.card-infoEstacion #textcard-direccion i {
    background-color: transparent;
    position: relative;
    font-size: 14px;
    width: 99%;
    top: 0.5em;
    padding: 0em 1.5em;
    left: 0em;
}

.card-infoEstacion #textcard-direccion span {
    font-size: 14px;
    padding: 0em 0em 0em 0.3em;
    font-weight: 400;
}

#textcard-LatLong {
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    height: 19px;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

#textcard-latlong i {
    background-color: transparent;
    position: relative;
    font-size: 14px;
    width: 95%;
    top: 0.5em;
    padding: 0.5em 1em;
    left: 0em;
}

#textcard-latlong i span {
    font-size: 14px;
    padding: 0em 0em 0em 0.3em;
    font-weight: 400;
}

#textcard-altitude {
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    height: 19px;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

#textcard-altitude i {
    background-color: transparent;
    position: relative;
    font-size: 14px;
    width: 95%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    top: 0.25em;
    padding: 0.5em 1em;
    display: inline-block;
    left: 0em;
}

#textcard-altitude i span {
    font-size: 14px;
    padding: 0em 0em 0em 0.8em;
    font-weight: 400;
}

#textcard-heightFloor {
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    height: 19px;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

#textcard-heightFloor i {
    background-color: transparent;
    position: relative;
    font-size: 14px;
    width: 95%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    top: 0.75em;
    padding: 0.5em 1em;
    display: inline-block;
    left: 0em;
}

#textcard-heightFloor i span {
    font-size: 14px;
    padding: 0em 0em 0em 0.8em;
    font-weight: 400;
}

.card-componentesEstacion {
    padding: 16px 24px 16px;
    margin-top: 10px;
    height: 120px;
    width: 100%;
    border-color: transparent;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 10px 4px 10px rgb(0 0 0 / 20%);
    position: relative;
    top: -25px;
}

.card-componentesEstacion h3 {
    background-color: transparent;
    font-size: 16px;
}

.rounded10 {
    border-radius: 10px;
}

.left10 {
    margin-left: 10px;
}

.emptyTextNotificaciones {
    width: 350px;
    display: flex;
    background-color: transparent;
    flex-direction: column;
}

.emptyTextNotificaciones span {
    font-size: 18px;
    text-align: center;
}

.emptyTextObservatorio {
    width: 350px;
    display: flex;
    background-color: transparent;
    flex-direction: column;
}

.emptyTextObservatorio span {
    font-size: 18px;
    text-align: center;
}

.emptyTextGraficas {
    width: 350px;
    display: flex;
    background-color: transparent;
    flex-direction: column;
}

.emptyTextGraficas span {
    font-size: 18px;
    text-align: center;
}

.horario {
    padding: 20px 0px 16px 13px;
    z-index: 1;
    position: relative;
    top: -225px;
    border-radius: 0.2em;
    box-shadow: 10px 4px 4px var(--color);
}

.horario i {
    position: relative;
    top: 0em;
    left: 0em;
    border-radius: 0em;
    padding: 0em 0em;
}

.horario i span {
    background-color: transparent;
    font-size: 16px;
    padding: 0em 0em 0em 0.3em;
}

.horario .row {
    margin-top: 0.5em;
    font-size: 13px;
}

.card-item {
    display: inline-block;
    width: 100%;
    border-radius: 3px;
    background: #fff;
    border: 0;
    margin-bottom: 30px;
}

.card-item .panel-heading {
    font-size: 20px;
    color: #000;
    overflow: inherit;
    line-height: normal;
}

.card-blocks {
    columns: 1;
    column-gap: 30px;
}

.card-blocks:after {
    content: '';
    display: block;
    height: 50px;
}

.card-pleace {
    transition: transform .35s ease-out;
    transform: translate(0, var(--y)) scale(1) rotate(0);
    will-change: transform;
    background: transparent;
}

.card-pleace i {
    position: absolute;
    top: 0em;
    padding: 0.2em 0.5em;
}

.card-pleace p small i {
    position: relative;
}

.card-pleace p small span {
    font-size: 1.3em;
    font-weight: 600;
}

.card-pleace .categoria {
    position: relative;
    display: flex;
    flex-direction: column;
    width: fit-content;
    align-items: center;
    justify-content: center;
    top: -195px;
    left: 257px;
    height: 70px;
    font-size: 1em;
    font-weight: 600;
}


.card-pleace p button {
    position: absolute;
    top: 2em;
    left: 7em;
    border-radius: 1.5em;
    padding: 0.3em 0.5em;
    background-color: rgba(255, 255, 255, 50%);
}

.card-pleace p .boton-localizar {
    left: 6em;
    top: 5em;
    background-color: rgba(255, 255, 255, 70%);
}

.card-pleace p .boton-localizar i {
    font-size: 1.25rem;
    padding: 0em 0em 0em 1.5em;
}


.card-pleace p button i {
    position: relative;
    top: 0em;
    left: 0em;
    border-radius: 0em;
    font-weight: 600;
    padding: 0em 1em 0em 0.5em;
}

.card-pleace p button i span {
    font-size: 0.8em;
    padding: 0em 0em 0em 0.3em;
}

.card-pleace span {
    position: relative;
    bottom: 0.1em;
    right: 0em;
}

.card-pleace:after {
    display: block;
    content: "";
    font-weight: 500;
    color: #555;
    font-size: 3vmin;
    opacity: .75;
    text-align: center;
}

.card-infoLugar {
    position: relative;
    background-color: rgba(255, 255, 255, 0.05);
    top: -255px;
    padding-bottom: 0.5em;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
}

.card-infoLugar .nombre {
    color: #454746;
    height: 36px;
    width: 100%;
    background-color: #A3A3A3;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
    text-align: center;
    line-height: 36px;
}

.card-infoLugar .datos {
    padding: 0px 24px;
}

.card-infoLugar .icon-direccion {
    background-color: transparent;
    position: relative;
    font-size: 14px;
    width: 100%;
    padding: 0em 1.5em;
    left: 0em;
}

.card-infoLugar .icon-direccion span {
    font-size: 14px;
    padding: 0em 0em 0em 0.3em;
    font-weight: 400;
}

.card-infoLugar .icon-marker {
    background-color: transparent;
    position: relative;
    font-size: 14px;
    width: 95%;
    padding: 0.5em 0.15em;
    left: 0em;
}

.card-infoLugar .icon-marker span {
    font-size: 14px;
    padding: 0em 0em 0em 0.7em;
    font-weight: 400;
}

.card-infoLugar .icon-phone {
    background-color: transparent;
    position: relative;
    font-size: 14px;
    width: 95%;
    padding: 0.5em 0.15em;
    left: 0em;
}

.card-infoLugar .icon-phone span {
    font-size: 14px;
    padding: 0em 0em 0em 0.3em;
    font-weight: 400;
}

.emptyTextLugares {
    width: 350px;
    display: flex;
    background-color: transparent;
}

.emptyTextLugares span {
    font-size: 18px;
    text-align: center;
}

.emptyTextLugares a {
    color: darkgray;
    width: 100%;
    font-size: 12px;
    text-align: center;
}

.padding-options {
    padding: 0.1em 0.8em;
}

.boton-inicio {
    overflow: hidden;
    padding-top: 7.2px;
    background-color: transparent;
    border-top-left-radius: 50px;
}

.padding-options a i {
    font-size: 21px;
}

.icono-idioma {
    font-size: 25px !important;
}

.boton-convenciones {
    vertical-align: bottom;
}

.botones-zoomMapa {
    width: 28px;
    padding: 0.2em;
    overflow: hidden;
}

.botones-componentes {
    padding: 0.5em 0.2em;
    width: 28px;
}

.botones-componentes .componente {
    margin-bottom: 0.5em;
    padding: 3px 0px 0px 3px;
}

.botones-componentes .observatorio {
    margin-bottom: 0.5em;
    padding: 2px;
}

.botones-componentes .lugares {
    margin-bottom: 0.5em;
    padding: 2px;
}

.boton-estacion {
    padding: 1em 0.1em;
    width: 28px;
}

.boton-estacion a {
    vertical-align: bottom;
}

.boton-estacion a i {
    font-size: 21px;
}

.boton-limpiar {
    padding: 1em 0.1em 0.5em 0.1em;
    margin-top: 15px;
}

.boton-limpiar a {
    vertical-align: bottom;
}

.boton-limpiar a i {
    font-size: 18px;
}

.botones-capasMapa {
    height: 69px;
    padding: 0.3em;
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.5));
}

.botones-capasMapa .elemento-menu .text-center {
    width: 150px;
}

.botones-capasMapa .elemento-menu .text-center .mapas-div {
    width: 90%;
    overflow: hidden;
    border-radius: 10px;
    padding: 0px;
    height: 59px;
    position: relative;
}

#tabBarNotificaciones {
    justify-content: space-around;
    align-items: center;
    border-bottom: solid;
    border-bottom-color: currentcolor;
    border-color: #4D8DFA;
    box-shadow: 10px -4px 15px rgba(0, 0, 0, 0.1);
    margin-right: 0px;
}

/*Grafica gauge indicadores*/
.grafica-indicadores {
    height: 100px;
    width: 200px;
}

.zc-ref {
    display: none;
}

zingchart div div div {
    display: none
}

.grafica-indicadores .zc-svg {
    height: 100px;
}

.grafica-indicadores zingchart div {
    height: 100px;
}

/*Fin grafica indicadores*/

.bootstrap-tagsinput .label-info {
    background-color: #5bc0de;
}

.selected-tagsDasboard{
    list-style: none;
    padding: 0;
    margin-top: 5px;
}

.selected-tagsDasboard li{
    display: inline-block;
   
    padding: 5px 10px;
    margin-right: 5px;
    box-shadow: 1px #50505030;
    margin-bottom: 5px;
    border-radius: 9px;
   
    color: #727272;
    font-weight: 600;
}


.bootstrap-tagsinput .label {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

.tags {
    margin-left: -8px;
    margin-top: 20px;
    padding: 0;
    list-style-type: none;
    gap: 1rem;
}

.tag {
    --color: var(--light-color);
    font-size: 1rem;
    border-radius: 100rem;
    box-shadow: 0 0 0 2px var(--light-color);
    background-color: transparent;
    color: var(--dark-color);
    font-weight: bold;
    transition: background-color 250ms ease, box-shadow 250ms ease;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.tag>a {
    display: inline-block;
    position: relative;
    color: var(--dark-color);
    text-decoration: none;
    padding: .5rem 1rem .5rem 2rem;
    width: 145px;
    cursor: default;
}

.tag>a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 1rem;
    width: .5rem;
    height: .5rem;
    line-height: .5rem;
    border-radius: 100%;
    background-color: #61dafb;
    transform: translateY(-50%);
}

.cuadricula {
    display: grid;
    grid-template-columns: repeat(2, 145px);
    grid-auto-rows: minmax(min-content, max-content);
}

.slider-pleaces {
    height: 20px;
    border-radius: 1000px;
    padding: 0 6px;
}

.slider-value {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider-value span {
    position: absolute;
    height: 35px;
    width: 35px;
    color: white;
    font-size: 12px;
    font-weight: 300;
    top: -35px;
    transform: translateX(-50%) scale(0);
    transform-origin: bottom;
    transition: transform 0.3s ease-in-out;
    line-height: 35px;
    z-index: 2;
    text-align: center;
}

.slider-value span.show {
    transform: translateX(-50%) scale(1);
}

.slider-value span::after {
    position: absolute;
    content: "";
    height: 35px;
    width: 35px;
    left: 50%;
    background: #3a6bab;
    transform: translateX(-50%) rotateZ(45deg);
    line-height: 35px;
    z-index: -1;
    border-radius: 100px 100px 0 100px;
}

.field-pleaces {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.field-pleaces input {
    height: 4px;
    width: 40px;
}

.field-pleaces input::-webkit-slider-thumb,
.field input::-moz-range-thumb {
    border: none;
    height: 20px;
    width: 20px;
    border: 3px solid white;
    background: #3a6bab;
    border-radius: 50%;
}

.field-pleaces input::-moz-range-progress,
.field input::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 1000px;
    background: #3a6bab;
}

#contenedor-mapa-slider .seccion-mapa .contenedor-slider {
    width: fit-content;
    display: flex;
    justify-content: center;
    padding-right: 6px;
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.5));
}

.margen-slider {
    bottom: 95px;
    z-index: 999;
}

.popupObservatorio {
    background: rgb(0 0 0 / 0.8);
    color: white !important;
    border-radius: 20px;
    width: 282px !important;
    height: auto !important;
    min-width: 200px;
}

.popupObservatorio div {
    margin-left: 10px;
    margin-right: 10px;
}

.popupObservatorio .leaflet-popup-close-button {
    margin-right: 10px;
}

.popupLugar .leaflet-popup-close-button {
    margin-right: 10px;
}

.popupLugar {
    background: rgb(0 0 0 / 0.8);
    color: white !important;
    border-radius: 20px;
    width: 334px !important;
    height: auto !important;
    padding: 5px;
    min-width: 200px;
}

.popupLugarEstacion .leaflet-popup-close-button {
    margin-right: 10px;
}

.popupLugarEstacion {
    background: rgb(0 0 0 / 0.8);
    color: white !important;
    border-radius: 20px;
    width: 334px !important;
    height: auto !important;
    padding: 5px;
    min-width: 200px;
}

.card-ventanaLugar .nombre {
    height: 36px;
    width: 100%;
    text-align: center;
    line-height: 36px;
    font-size: 14px;
    border-bottom: 2px solid var(--color);
}

.card-ventanaLugar .datos {
    padding: 0px 24px;
}

.card-ventanaLugar .icon-direccion {
    background-color: transparent;
    position: relative;
    font-size: 14px;
    width: 100%;
    padding: 0em 1.5em;
    left: 0em;
}

.card-ventanaLugar .icon-direccion span {
    font-size: 14px;
    padding: 0em 0em 0em 0.3em;
    font-weight: 400;
}

.card-ventanaLugar .icon-marker {
    background-color: transparent;
    position: relative;
    font-size: 14px;
    width: 95%;
    padding: 0.5em 0.15em;
    left: 0em;
}

.card-ventanaLugar .icon-marker span {
    font-size: 14px;
    padding: 0em 0em 0em 0.7em;
    font-weight: 400;
}

.card-ventanaLugar .icon-phone {
    background-color: transparent;
    position: relative;
    font-size: 14px;
    width: 95%;
    padding: 0.5em 0.15em;
    left: 0em;
}

.card-ventanaLugar .icon-phone span {
    font-size: 14px;
    padding: 0em 0em 0em 0.3em;
    font-weight: 400;
}

.ventana-info .leaflet-popup-close-button {
    margin-right: 10px;
}

.ventana-info-ind .leaflet-popup-close-button {
    margin-right: 10px;
}

.tag.filter>a.filter {
    width: fit-content;
    font-size: 12px;
    font-weight: normal;
    padding: .1rem 1rem .2rem 1.8rem;
}

.tag.filter>a.filter::before {
    background-color: var(--color);
}

.tag.filter>a.filter:hover:before {
    background-color: white;
}

.tag.filter:hover {
    background-color: var(--color);
    box-shadow: 0 0 0 2px var(--dark-color);
    color: white;
}

.headerFiltros {
    margin-left: 10px;
    margin-bottom: 0px;
}

.containerFiltros {
    width: 100%;
    margin-left: 0px;
    height: fit-content;
    padding: 0.4rem 0 0.8rem 0;
    justify-content: space-evenly;
}

.text-filtro {
    font-size: 12px;
}

.filtroSeleccionado {
    color: white;
    background-color: var(--color);
    box-shadow: 0 0 0 2px var(--dark-color);
}

.filtroSeleccionado.filter>a.filter::before {
    background-color: white;
}

.tabViewObservatorio {
    position: absolute;
    top: 85px;
    bottom: 0%;
    width: 100%;
    flex-direction: column;
    justify-content: start;
    align-items: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
}

.card-observatorio .descripcion {
    text-align: justify;
    font-size: 12px;
}

.card-observatorio .separador-light {
    border: 1px solid #364B66;
}

.card-observatorio .separador-dark {
    border: 1px solid #81CEFF;
}

.card-observatorio .icon-direccion {
    background-color: transparent;
    position: relative;
    font-size: 14px;
    width: 100%;
    padding: 0em 1.5em;
    left: 0em;
}

.card-observatorio .icon-direccion span {
    padding: 0 0.1em;
}

.card-observatorio .icon-marker {
    background-color: transparent;
    position: relative;
    font-size: 14px;
    width: 95%;
    padding: 0.5em 0.15em;
    left: 0em;
}

.card-observatorio .icon-marker span {
    padding: 0 0.5em;
}

.card-observatorio .botones {
    justify-content: center;
    display: flex;
}

.txt-convencion {
    font-size: 12px;
}

.icono-convencion {
    color: #fff;
    margin-left: -23.5px;
    margin-bottom: 7px;
}

.pie_map {
    position: absolute;
    /*width:100%;*/
    height: 30px;
    background: rgba(0, 0, 0, 0.5);
    bottom: 0px;
    right: 15%;
    left: 15%;
    /*margin-left:-150px;*/
}

.pie_map_der {
    position: absolute;
    /*width:100%;*/
    height: 30px;
    background: rgba(0, 0, 0, 0.5);
    bottom: 0px;
    right: 0px;
    left: 15%;
}

.der_pred_map {
    position: absolute;
    height: 350px;
    width: 200px;
    background: rgba(0, 0, 0, 0.5);
    top: 200px;
    right: 20px;
    padding-top: 10px;
    color: #FFFFFF;
}

.izq_pred_map {
    position: absolute;
    height: 400px;
    width: 200px;
    background: rgba(0, 0, 0, 0.5);
    top: 200px;
    left: 20px;
    padding-top: 10px;
    color: #FFFFFF;
}

/*Estilos ventana upload*/


.files-list {
    list-style: none;
}

/* .hidden {
  display: none !important;
} */
/** base widget **/
.widget {
    display: none;
    flex-direction: column;
    width: 362px;
    height: 325px;
    background-color: #fff;
    position: fixed;
    bottom: -10px;
    right: 10px;
    border-radius: 10px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/** widget header **/
.widget__header {
    display: flex;
    background-color: #333;
    border-radius: 8px;
}

.widget__header h6 {
    color: white;
    margin-left: 10px;
}

#browse {
    position: fixed;
    top: 200vh;
}

#upload {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: 1px dashed #484848;
    margin-left: 3rem;
    font-size: 0;
    background-color: transparent;
    cursor: pointer;
}

/** upload destination dropdown **/
.ce-select-container {
    width: 100%;
}

.ce-select-widget {
    padding: 0 2rem;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
}

.ce-select-value {
    font-weight: bold;
    line-height: 6rem;
}

.ce-select-toggle {
    border-color: #646464;
    border-width: 2px;
}

.ce-select-dropdown {
    top: 6rem;
}

.ce-select-option {
    padding: 1rem 2rem;
}

/** files list **/
.files-list {
    padding: 10px;
    overflow: auto;
    height: 280px;
}

/** file widget **/
.file {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 10px;
}

.file__thumbnail {
    width: 45px;
    height: 35px;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
}

.file__details {
    margin-left: 10px;
}

.file__name {
    font-size: 14px;
    word-wrap: break-word;
    color: #333;
}

progress {
    flex-shrink: 0;
    width: 100%;
}

/** upload info **/
.upload-info {
    margin-top: 5px;
    font-size: 12px;
}

.upload-status {
    color: #666;
}

.upload-speed {
    margin-left: 0.5rem;
    color: #999;
}

.upload-speed::before {
    content: "( ";
}

.upload-speed::after {
    content: " )";
}

.upload-progress {
    -webkit-appearance: none;
    height: 3px;
}

.upload-progress::-webkit-progress-bar {
    background-color: #e5e5e5;
}

.upload-progress::-webkit-progress-value {
    background-color: #a3d39c;
}

/*Fin estilos ventana upload*/

/*Estilos Estudio Diapostivas*/

.contenedor-diapositiva {
    position: relative;
    background: #FFFFFF;
    box-shadow: 0px 8px 14px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    width: 370.45px;
    height: 208.363px;
}

.contenedor-diapositiva deckgo-deck {
    z-index: 1000;
}



.contenedor-diapositiva h5 {
    font-size: 18px;
    text-align: center;
}

.diapositiva-vertical {
    position: relative;
    background: #FFFFFF;
    box-shadow: 0px 8px 14px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    height: 370.45px;
    width: 208.363px
}

.diapositiva-vertical deckgo-deck {
    z-index: 1000;
}



.diapositiva-vertical h5 {
    font-size: 12px;
    text-align: center;
}

.contenedor-control {
    position: relative;
    height: 70px;
    width: 131.25px;
    box-shadow: 0px 8px 14px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    left: 15px;
    margin-top: -70px;
    z-index: 1000;
}



.contenedor-miniatura {
    position: relative;
    height: 70px;
    width: 44.375px;
    background: #FFFFFF;
    box-shadow: 0px 8px 14px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    left: 40%;
    margin-top: 20px;
}

.contenedor-miniatura deckgo-deck {
    z-index: 1000;
}

.contenedor-miniatura deckgo-slide-title {
    height: 70px;
    width: 44.375px;
}

.contenedor-miniatura deckgo-slide-content {
    height: 70px;
    width: 130px;
}


.btn-newSlide {
    width: 80%;
    height: 62.27px;
    border: 2px solid #1E9FF2;
    color: #1E9FF2;
    font-size: 10px;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 75px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 10%;
}

.emptyAdd {
    width: 134px;
    height: 100px;
}

.panelSlides {
    padding: 0;
    overflow-y: auto;
    top: 70px;
    right: 0px;
    z-index: 1000;
    list-style-type: none;
    background: white;
    box-shadow: 0px 8px 14px rgba(0, 0, 0, 0.15);
}

.controlador-slide {
    width: 100%;
    display: flex;
}

.header-estudio {
    width: 100%;
    padding: 5%;
    background-color: #1e9ff2;
    top: 0;
    z-index: 1030;
    right: 0;
}

.header-estudio img {
    height: 100%;
    object-fit: cover;
    width: 200px;
}

#input-name {
    background: #ffffffad;
    border: 0px;
    text-align: center;
    border-radius: 8px;
    width: 60%;
}

.boton-inicio-estudio {
    overflow: hidden;
    padding: 5px;
    border-radius: 20px;
}

#container-rotate {
    width: 70%;
    display: flex;
    flex-direction: column;
}

.mobile-frame {
    position: relative;
    transition: all .2s ease-in-out;
    margin-left: 40%;
    height: 101px;

}

.mobile-frame>img {
    position: relative;
    width: 52px;
}

#rotate-btn {
    position: relative;
    bottom: 100px;
    left: 0px;
    margin: 42px 0px;
    text-align: center;
    width: 45px;
    transition: all .2s ease-in-out;
}

#rotate-btn:hover {
    border: 1px solid #ccc;
    color: #ccc;
    cursor: pointer;
}

.rotate {
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    margin: auto;
    left: 5px;
}

.btn-rotate {
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.rotate-frame {
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    position: absolute;
}




.title-options {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.title-options h5 {
    font-size: 16px;
    text-align: center;
    line-height: 94px;
}

.title-orientacion {
    width: 30%;
    display: flex;
    flex-direction: column;
}

.title-orientacion h5 {
    font-size: 16px;
    text-align: center;
    line-height: 94px;
}

.select-options {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.select-options h5 {
    font-size: 16px;
    text-align: center;
}

.protector {
    width: 100%;
    height: 70px;
    background-color: transparent;
    margin-top: -70px;
    z-index: 1000;
    position: relative;
}

.boton-delete {
    width: 34px;
    height: 34px;
    background: rgba(28, 155, 243, 1);
    border: 1px solid #1C9BF3;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    position: relative;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    top: 15px;
}

.boton-delete i {
    font-size: 20px;
    color: white;
    font-weight: 600;
}

.pleaceholder-sort {
    border: 1px solid #1C9BF3;
    font-weight: bold;
    font-size: 45px;
    background-color: rgba(28, 155, 243, 0.50);
    height: 258px;
}

.ui-sortable-helper {
    background-color: rgba(204, 204, 204, 0.479) !important;
}

.ui-sortable-helper td {
    padding: 0px 5px;
}

.contenedor-pantalla {
    width: 300px;
    height: 161px;
    flex-shrink: 1;
    flex-basis: 315px;
    margin-top: 22px;
}

.contenedor-pantalla iframe {
    background-color: black;
    pointer-events: none;
}

.contenedor-pantalla video {
    background-color: black;
    object-fit: fill;
}

.contenedor-pantalla .header-img {
    display: flex;
    width: 248px;
    height: 22px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 99.99%, rgba(28, 155, 243, 0.5) 100%);
    border-radius: 0px 0px 15px 0px;
    margin-top: -161px;
    position: relative;
}

.contenedor-pantalla .header-img .nombre {
    width: 170px;
    height: 100%;
    color: white;
    margin-left: 6px;
    font-weight: 600;
}


.contenedor-pantalla .header {
    display: flex;
    width: 248px;
    height: 22px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 99.99%, rgba(28, 155, 243, 0.5) 100%);
    border-radius: 0px 0px 15px 0px;
    margin-top: -166px;
    position: relative;
}

.contenedor-pantalla .header .nombre {
    width: 170px;
    height: 100%;
    color: white;
    margin-left: 6px;
    font-weight: 600;
}

.contenedor-pantalla .acciones {
    display: flex;
    flex-direction: column;
    height: 161px;
    width: 40.25px;
    position: relative;
    margin-top: -22px;
    margin-left: 256px;
}

.contenedor-pantalla .acciones .boton {
    width: 100%;
    height: 40.25px;
    background: rgba(28, 155, 243, 0.75);
    border: 1px solid #1C9BF3;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contenedor-pantalla .acciones .boton-info {
    width: 100%;
    height: 40.25px;
    background: rgba(28, 155, 243, 0.50);
    border: 1px solid #1C9BF3;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contenedor-pantalla .acciones .boton-info i {
    font-size: 28px;
    color: white;
    font-weight: 600;
    cursor: pointer;
}

.contenedor-pantalla .acciones .boton i {
    font-size: 25px;
    color: white;
    font-weight: 600;
    cursor: pointer;
}

.contenedor-pantalla .nombreUrl {
    display: flex;
    flex-direction: column;
    width: 238px;
    position: relative;
    margin-top: -138px;
    border-radius: 0px 0px 15px 0px;
    background: #1C9BF3;
}

.contenedor-pantalla .text-url {
    width: 100%;
    height: 100%;
    color: white;
    margin-left: 6px;
}

/*Fin estilos Estudio Diapostivas*/

.derecha_map .text-chk {
    font-size: 10px !important;
}

.derecha_map label {
    margin-bottom: 0px !important;
}

.tableDashboard.dataTable thead th {
    white-space: break-spaces;
}

.btn-programa {
    padding: 10px;
    margin-top: 5px;
    border-radius: 5px;
    background-color: #1e9ff2;
    color: white;
    font-weight: 600;
}

.btn-programa i {
    font-size: 1.3rem;
}

.text-link {
    color: #2a97ea !important;
}

/* Animacion desplegar y replegar menu*/
#menu-izquierda-indicadores {
    width: 400px;
    height: 100vh;
    z-index: 1000;
    left: -400px;
    transition: transform 0.5s cubic-bezier(.46, .03, .52, .96);
    overflow-x: hidden;
}

/* Image Checkbox selected*/
input[type='radio']:checked+i.img-thumbnail {
    border-color: #673AB7;
    border-width: 4px;
    /* font-size: 30px !important; */
}

i.img-thumbnail {
    font-size: 30px !important;
    border-radius: 50%;
    /* margin: 0.25rem !important; */
}

.boton-ocultar-capas {
    padding: 0.2em 0.2em;
    width: 30px;
    height: 30px;
}

.boton-ocultar-capas a {
    vertical-align: bottom;
}

.boton-ocultar-capas i {
    font-size: 21px;
}

.title-dashboard {
    font-size: 3rem;
}

.btn-actualizar-tabla {
    cursor: pointer;
    color: darkgreen;
}

.badge-btn {
    margin: 0.1em;
    display: block;
    cursor: pointer;
    white-space: break-spaces;
}

.back-warning {
    background-color: #ff9149 !important;
    color: #fff !important;
}

.icono-mapa-indicadores {
    color: #1E9FF2 !important;
    margin-right: 5px;
}

.icono-etiquetas-indicadores {
    margin-right: 5px;
}

.btn-mapa-indicadores {
    background-color: #1E9FF2 !important;
    color: white !important;
    border-radius: 50px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-right: 5px;
    height: 35px;
}

.div-tabla-mapa {
    max-height: 165px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #393e46 #ffffff;
}

.div-tabla-mapa::-webkit-scrollbar {
    width: 10px;
}

.div-tabla-mapa::-webkit-scrollbar-track {
    background: #ffffff;
    border-radius: 15px;
}

.div-tabla-mapa::-webkit-scrollbar-thumb {
    background-color: #393e46;
    border-radius: 11px;
    border: 2px solid #ffffff;
}

.div-mapa-color {
    height: 10px;
    width: 10px;
    display: inline-block;
}

#pie-graficas-mapa {
    background-color: #0e0e0e;
    background: #0e0e0e;
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, #0e0e0e 0%, #7d7e7d 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #0e0e0e 0%, #7d7e7d 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #0e0e0e 0%, #7d7e7d 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0e0e0e', endColorstr='#7d7e7d', GradientType=1);
}

.sombra-card {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    /* 0 2px 15px 1px rgb(62 57 107 / 48%) !important */
}

/* Mapa monitoreo */
.pin {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    background-color: #bababa;
    position: absolute;
    transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -20px;
}

.pin:after {
    content: "";
    width: 14px;
    height: 14px;
    margin: 8px 0 0 8px;
    background: #e6e6e6;
    position: absolute;
    border-radius: 50%;
}

.pin-data-mapa {
    max-width: 30em;
    height: 24px;
    position: absolute;
    background-color: white;
    border-radius: 1em;
}

.pin-data-mapa .cont-data {
    min-width: 1em;
}

.triangulo-equilatero-bottom {
    width: 0;
    height: 0;
    border-right: 0.5em solid transparent;
    border-top: 0.5em solid transparent;
    border-left: 0.5em solid transparent;
    border-bottom: 1em solid #bababa;
    transform: rotate(180deg);
    position: fixed;
    top: 1.8em;
    left: 0.1em;
}

.pin-data {
    position: absolute;
    background-color: #bababa;
    max-width: 30em;
    height: 24px;
    border-radius: 4px;
    padding: 0.3em;
}

.pin-data>span {
    color: #3B3D3C;
}

.pin-arrow {
    position: relative;
    width: 12px;
    height: 12px;
    background-color: #bababa;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    bottom: -1.4em;
    left: 3px;
    z-index: -1;
}

.scrollbarNew::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

/* Track */
.scrollbarNew::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
.scrollbarNew::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
.scrollbarNew::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.ventana-info-rosa {
    width: auto !important;
    height: auto !important;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 1em;
    padding: 5px;
    min-width: 25em;
    min-height: 10em;
    /* color: white; */
    z-index: 900 !important;
    cursor: default;
}

.cont-conf-mapaMonitoreo {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1001;
    top: 0;
    left: -100%;
    transition: 0.5s;
}

.cont-sm {
    height: 100%;
    width: 40%;
    position: fixed;
    z-index: 1001;
    top: 0;
    transition: 1s;
    overflow: hidden;
}

.cont-sm-hide {
    left: -100%;
}

.cont-sm-show {
    left: 0;
}

.itemEsp {
    flex: initial;
    margin: 0.5em;
}

.four {
    flex: 4;
}

.four {
    flex: 1;
}

.flex-container {
    resize: horizontal;
    overflow: hidden;
    display: flex;
}

.blur-effect.bg-blur-grey {
    background-color: rgba(35, 39, 41, 0.5) !important;
}

.cont-md {
    height: 100%;
    width: 50%;
    position: fixed;
    z-index: 1001;
    top: 0;
    transition: 1s;
    overflow: hidden;
}

.cont-md-hide {
    left: -50%;
}

.cont-md-show {
    left: 0;
}

.cont-lateral-izquierdo {
    height: 95%;
    width: 30%;
    position: fixed;
    z-index: 1001;
    top: 1em;
    left: -31%;
    transition: 0.5s;
    border-radius: 1em;
    background-color: rgba(255, 255, 255, 0.4);
}

.cont-lateral-izquierdo-filtro-aereo {
    height: 97%;
    max-height: 550px;
    min-width: 200px;
    width: 18%;
    position: fixed;
    z-index: 1001;
    top: 1em;
    left: -31%;
    transition: 0.5s;
    border-radius: 1em;
    background-color: rgba(0, 0, 0, 0.7);
}

.cursorGrab {
    cursor: grab;
}

.cursorCrosshair {
    cursor: crosshair;
    color: blue;
}

.mostrar-conf-left {
    left: 1% !important;
}

.blur-effect {
    backdrop-filter: blur(30px);
    /* Aplica el efecto blur con un radio de 5px */
    background-color: rgba(255, 255, 255, 0.5);
    /* Agrega un fondo semi-transparente para mejorar el efecto */
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}

.special-blur-effect {
    backdrop-filter: blur(30px);
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}

.special-blur-effect.bg-blur-grey {
    background-color: rgba(255, 255, 255, 0.3);
}

.border-bg-danger {
    border-color: #FF5A5A !important;
}

.border-bg-warning {
    border-color: #EFA514 !important;
}

.border-bg-success {
    border-color: #28D094 !important;
}

.card-estado {
    width: 14em;
    height: 6em;
    padding: 0.5em;
    border-radius: 1em;
    border: 0.25em solid;
}

.card-estado .titulo {
    font-size: 0.9em;
    margin-bottom: 0.5em;
}

.card-estado .valor {
    font-size: 1.8em;
}

.opciones-tab {
    height: 100%;
    width: 25%;
    vertical-align: top;
    background-color: rgba(4, 13, 28, 0.6);
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
}

.opciones-contenido {
    height: 100%;
    width: 74%;
    vertical-align: top;
}

.btn-close {
    position: fixed;
    z-index: 1;
    background-color: rgba(243, 243, 243, 1);
    margin: 0.5em;
    padding: 0.2em;
    border-radius: 0.3em;
    cursor: pointer;
}

.cont-conf-mapaMonitoreo .btn-toggle-confMapaMonitoreo {
    display: block;
    border-radius: 0em 0.5em 0.5em 0em;
    padding: 0.9em;
    position: absolute;
    top: 45%;
    right: -43px;
    cursor: pointer;
    z-index: 1001;
}

.mostrarConfMapaMonitoreo {
    left: 0;
}

.absoluto {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1001;
}

.rotar-horz {
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    /* IE 9 */
    -webkit-transform: rotate(90deg);
    /* Opera, Chrome, and Safari */
    transition: 0.5s;
}

.rotar-vert {
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    /* IE 9 */
    -webkit-transform: rotate(0deg);
    /* Opera, Chrome, and Safari */
    transition: 0.5s;
}

audio {
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    width: 80%;
    height: 25px;
}

.contGraficaMapaMonitoreo,
.contGraficaVariablePorDefecto {
    max-width: 90em;
    min-width: 90em;
    height: 100% !important;
}

@media screen and (min-width: 1490px) {

    .contGraficaMapaMonitoreo,
    .contGraficaVariablePorDefecto {
        max-width: 100em;
        min-width: 100em;
        height: 100% !important;
    }
}

.contenedor-footer {
    background-color: rgba(3, 21, 52, 0.9);
    /* height: 40%; */
    width: 98%;
    position: fixed;
    z-index: 1001;
    left: 1%;
    bottom: -40%;
    border-radius: 1em;
    /* transition: transform 0.5s cubic-bezier(.46,.03,.52,.96); */
    transition: bottom 0.5s ease-in-out;
}

.agrupador-footer {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-flow: row;
}

.agrupador-footer>div {
    flex: 1;
    -webkit-flex: 1;
}

.mostrar-footer {
    display: flex !important;
    bottom: 1em;
}

/* Mapa monitoreo */

.intl-tel-input {
    display: table-cell;
}

.intl-tel-input .selected-flag {
    z-index: 4;
}

.intl-tel-input .country-list {
    z-index: 5;
}

.input-group .intl-tel-input .form-control {
    border-top-left-radius: 4px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 0;
}

td.tableBoxes {
    text-align: center !important;
}
td.tableBoxes input[type=checkbox]+.checkmark {
    right: 0;
    margin: 0 auto;
}

/* th.tableBoxesTh {
    text-align: center !important;
    padding-right: 9px !important;
} */

.table-hoja-vida {
    table-layout: fixed;
    vertical-align: middle !important;
    border: 2px #dadada solid !important;
}

.table-hoja-vida td {
    vertical-align: middle !important;
    text-align: center !important;
    border: 2px #dadada solid !important;
}

.table-hoja-vida th {
    vertical-align: middle !important;
    white-space: break-spaces;
    border: 2px #dadada solid !important;
}

.table-hoja-vida thead {
    border: 2px #dadada solid !important;
}

.table-hoja-vida tr {
    border: 2px #dadada solid !important;
}

.badge-indicadores {
    width: 100px !important;
    font-size: medium !important;
    font-weight: bold;
    color: #fff;
}

/* Estilos hoja de vida indicador */
.fondo-morado {
    background-color: #5285D8;
}

.fondo-gris {
    background-color: #D9D9D9;
}

.texto-morado {
    color: #5285D8;
}

.texto-azul {
    color: #40adf4;
}

.fondo-azul {
    background-color: #40adf4 !important;
}

.contenedor-titulo {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.contenedor-titulo h2 {
    font-family: 'Quicksand', Georgia, 'Times New Roman', Times, serif;
    font-weight: bold;
}

.contenedor-titulo h5 {}

.icono-titulo {
    font-size: 20px;
}

.contenedor-icono-linea {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
}

.contenedor-icono {
    border-radius: 50%;
    padding: 5px 5px;
    line-height: 0px;
    position: relative;
    z-index: 2;
}

.subtitulos-hoja-vida {
    font-family: 'Quicksand', Georgia, 'Times New Roman', Times, serif;
    font-weight: bold;
}

.icono-descripcion {
    font-size: 18px;
}

.linea-vertical {
    width: 3px;
    height: 100%;
    position: absolute;
    top: 0px;
    transform: translate(-50%, 0);
    left: 50%;
    z-index: 1;
}

.linea-horizontal {
    width: 100%;
    height: 3px;
    margin: 5px 0px 20px 0px;
}

.titulos-contenido {
    font-family: 'Segoe UI';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    color: #585858;
}

.parrafos-contenido {
    font-family: 'Segoe UI';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: #585858;
}

.contenedor-metas {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.contenedor-fecha {
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
    border: 1px solid #585858;
}

.contenedor-meta {
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    border: 1px solid #585858;
}

.highcharts-container {
    width: 100% !important;
}

@media (max-width: 575.98px) {
    .contenedor-grafico-hoja-vida {
        contain: inline-size;
    }

    .contenedor-resultados-incertidumbre {
        flex-wrap: wrap;
    }
}

/* Estilos hoja de vida indicador */

/* REPORTE */
.ui-select-multiple.ui-select-bootstrap4 .ui-select-match-item {
    white-space: break-spaces;
    text-align: left;
}

.multipleAnuncios .ui-select-multiple.ui-select-bootstrap4 .ui-select-match-item {
    white-space: initial;
    text-align: left;
}

.table-huella-consolidado {
    vertical-align: middle !important;
    border: 2px #dadada solid !important;
}

.table-huella-consolidado td {
    vertical-align: middle !important;
    border: 2px #dadada solid !important;
}

.table-huella-consolidado th {
    vertical-align: middle !important;
    border: 2px #dadada solid !important;
}

.table-huella-consolidado thead {
    border: 2px #dadada solid !important;
}

.table-huella-consolidado tr {
    border: 2px #dadada solid !important;
}

.tooltip-reporte a {
    color: white !important;
    vertical-align: top;
}

.btn-white-space {
    white-space: inherit !important;
    text-align: left !important;
}


/* Configurar sede indicadores */

#tabla-actividad-fuentes th {
    white-space: break-spaces;
    min-width: 90px;
}

.contenedor-tabla-factorEmision .th-factores {}

.input-group-text {
    padding: 0.68rem 1rem !important;
}

.contenedor-tabla-factorEmision .btn-minus .ft-minus:before {
    border: 1px solid grey;
    border-radius: 5px;
    padding: 1px 0px;
    position: relative;
    top: 9px;
}

.contenedor-tabla-factorEmision .ft-plus:before {
    border: 1px solid grey;
    border-radius: 5px;
    padding: 1px 0px;
    position: relative;
}

.contenedor-tabla-factorEmision .ui-select-bootstrap4>.ui-select-choices,
.ui-select-bootstrap4>.ui-select-no-choice {
    position: initial !important;
    max-height: 195px;
}

/* .form_factores_emision .contenedor-tabla-factorEmision{
    overflow-x: auto;
} */
.contenedor-tabla-factorEmision table::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* Track */
.contenedor-tabla-factorEmision table::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
.contenedor-tabla-factorEmision table::-webkit-scrollbar-thumb {
    background: #1e9ff2;
}

/* Handle on hover */
.contenedor-tabla-factorEmision table::-webkit-scrollbar-thumb:hover {
    background: #888;
}

.contenedor-tabla-factorEmision .ui-select-choices::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* Track */
.contenedor-tabla-factorEmision .ui-select-choices::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
.contenedor-tabla-factorEmision .ui-select-choices::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
.contenedor-tabla-factorEmision .ui-select-choices::-webkit-scrollbar-thumb:hover {
    background: #555;
}

#check-actualizar {
    color: #28d094;
    cursor: pointer;
    font-weight: bold;
    border: 1px solid #28d094;
    border-radius: 50%;
}

/* Fin configurar sede indicadores */

/* Planes de accion */

#tabla-plan-acciones th {
    white-space: break-spaces;
    min-width: 115px;
}

.tooltip-text {
    vertical-align: super;
}

#tabla-serguimientos th {
    white-space: break-spaces;
    min-width: 50px;
}

#tabla-serguimientos th:nth-child(4) {
    min-width: 250px !important;
}

/* Fin planes de accion */

/* Configuracion incertidumbre sostenibilidad */

#tabla-conf-incertidumbre th {
    /* white-space: break-spaces; */
    /* min-width: 175px !important; */
}


#tabla-conf-incertidumbre th:nth-child(5),
#tabla-conf-incertidumbre th:nth-child(6),
#tabla-conf-incertidumbre th:nth-child(8) {
    white-space: break-spaces;
    width: 130px !important;
    min-width: 130px !important;
}

#tabla-conf-incertidumbre th:nth-child(9) {
    width: 250px !important;
    min-width: 250px !important;
}

/* Fin configuracion incertidumbre sostenibilidad */

/* Compensacion huella carbono */

#tabla-compensaciones th {
    white-space: break-spaces;
    width: 80px !important;
    min-width: 80px !important;
}

#tabla-compensaciones th:nth-child(6),
#tabla-compensaciones th:nth-child(7) {
    width: 250px !important;
    min-width: 250px !important;
}

#tabla-inversiones th {
    white-space: break-spaces;
    min-width: 140px;
}

#tabla-inversiones th:nth-child(6) {
    min-width: 300px !important;
}

#linea-tiempo {
    background-color: transparent;
    height: 30px;
    padding: 7px 20px 0px 20px;
    position: fixed;
    bottom: 75px;
    width: 100%;
    display: flex;
    margin: auto;
    justify-content: center;
    text-align: center;
}

#fechaVuelosArea {
    background-color: transparent;
    height: 30px;
    padding: 7px 20px 0px 20px;
    position: fixed;
    bottom: 75px;
    width: 100%;
    display: flex;
    margin: auto;
    justify-content: center;
    text-align: center;
}

#opcionesSeleccionDeArea {
    background-color: transparent;
    height: 1px;
    padding: 0px 0px 0px 0px;
    position: fixed;
    top: 100px;
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
}

.tarjeta-info-compensacion {
    background: #d7dadb7a;
    border-radius: 20px;
}

.modal-ver-inversiones {
    max-width: 1200px;
}

/* Fin Compensacion huella carbono */
/* Fin Compensacion huella carbono */
/* Configuracion Consumos Hidricos */

.border-top-efluentes {
    border-top: 1px solid #d1d5ea;
}

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

.fw-normal {
    font-weight: normal !important;
}

.item_tipo_impacto {
    white-space: break-spaces;
}

#idTipoImpactoSignificativo .ui-select-match .ui-select-toggle {
    height: auto;
}

#idTipoImpactoSignificativo .ui-select-match .ui-select-match-text {
    white-space: normal;
}

#idTipoImpactoSignificativo {
    height: auto;
}

/* Fin Configuracion Consumos Hidricos */

.grecaptcha-badge {
    visibility: hidden;
}

.btn-table-input {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
}

.w-20 {
    width: 20% !important;
}

th .container-check {
    display: unset !important;
}

/* Catalogo consumos Hidricos */

#tabla-verInfoConfConsumos tr th {
    width: 280px;
    white-space: break-spaces;
}

/* Fin Catalogo consumos Hidricos */

/* LOGIN NUEVO */

#nuevo-login {
    /*background: radial-gradient(58.11% 67.01% at 50% 32.99%, rgba(34, 40, 49, 0.5) 0%, #222831 100%), url(../image/fondo-ambiensq.jpg) no-repeat center;*/
    height: 100%;
    background-size: cover;
    overflow-x: hidden;
}

.contenedor_formulariologin {}

#formulariologin {
    width: 360px;
    margin: 0 auto;
}

.text_label_inputs {}

.input_style {
    font-size: 16px;
    height: 48px;
    color: white !important;
    border: 1px solid #C4C4C4 !important;
}

.input_password {
    font-size: 16px !important;
}

.input_style::-webkit-input-placeholder {
    font-size: 16px !important;
    color: #C4C4C4 !important;
}

.input_style:-ms-input-placeholderr {
    font-size: 16px !important;
    color: #C4C4C4 !important;
}

.input_style::placeholder {
    font-size: 16px !important;
    color: #C4C4C4 !important;
}

.input_style:focus {
    border-color: white !important;
}

.input-group.with-icon>input::-ms-clear {
    display: none;
}

.input-group.with-icon>img {
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    pointer-events: none;
    position: absolute;
    z-index: 3;
    top: 50%;
    object-fit: scale-down;
}

.input-group.with-icon>img,
.input-group.with-icon.icon-right>img {
    right: 0.7rem;
}

.input-group.with-icon>input,
.input-group.with-icon.icon-right>input {
    padding-right: 2.7rem;
}

/* .input-group.with-icon.icon-left > img {
    left: 0.7rem;
}

.input-group.with-icon.icon-left > input {
    padding-left: 2.7rem;
} */

.input-group.with-icon.icon-shy>img {
    z-index: 1;
}

.imagen_ver_contrasenia {
    cursor: pointer;
    pointer-events: visible !important;
}

.btn_login {
    height: 48px;
    background-color: #4D8DFA;
}

.icon_empresa {
    position: absolute;
    bottom: 20px;
    left: 30px;
    object-fit: scale-down;
    width: 160px;
}

#contrasena {
    height: 100px;
    visibility: visible;
    transition: height 350ms, visibility 0s;
}


.ocultoPass {
    visibility: hidden !important;
    height: 0 !important;
    margin: 0px !important;
    transition: height 350s, visibility 0s;
}

#nuevo-login {
    z-index: 0;
    height: 100vh;
}


#nuevo-login .clouds {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}


#nuevo-login .clouds-arriba {
    top: 0px !important;
    transform: rotate(180deg) !important;
}

#nuevo-login .clouds img {
    position: absolute;
    bottom: 0px;
    max-width: 100%;
    animation: animate calc(10s * var(--i)) linear infinite;
    height: 175px;
    width: 100%;
    object-fit: scale-down;
    opacity: 0.2;

}


@keyframes animate {
    0% {
        transform: translateX(-97.5%);
    }

    100% {
        transform: translateX(100%);
    }
}

#link_olvide_contrasenia {
    display: flex;
}

.icon_flecha_atras {
    transition: all 300ms ease;
    cursor: pointer;
    object-fit: scale-down;
    position: absolute;
    left: 100px;
    opacity: 0.1;
    visibility: hidden;
}

.icon_logo {}

.move {
    opacity: 1 !important;
    visibility: visible !important;
    left: -18px;
    transform: translate(100%, 0);
}

/* FIN LOGIN NUEVO */

@media (max-width: 767.98px) {
    #nuevo-login .clouds img {
        height: auto;
    }


    #btn_accion {
        margin-top: 20px !important;
    }

    #contrasena {
        margin-bottom: 0px !important;
    }

    .move {
        left: -28px;
    }

    .icon_logo {
        height: 45px;
        object-fit: scale-down;
    }

    #contenedor_form_inputs {
        width: 65%;
    }
}


@media (max-width: 575.98px) {
    #formulariologin {
        width: 100%;
    }

    .icon_empresa {
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .icon_logo {
        height: 35px;
    }

    .move {
        left: -19px;
    }
}

@media (max-width: 400px) {
    #contenedor_form_inputs {
        width: 80%;
    }
}

/* REPORTE HUELLA HIDRICA */

.contenedor-titulo-huella-hidrica {
    background-color: #40adf4 !important;
}

.nivel-0-fila {
    font-weight: bold;
    text-align: left;
}

.nivel-1-fila {
    font-weight: bold;
    text-align: left;
}

.nivel-2-fila {
    font-weight: bold;
    text-align: right;
}

.nivel-3-fila {
    font-weight: normal;
    text-align: right;
}

.nivel-2-fila-vertido {
    text-align: right;
}

.contenedor-chk-huella-hidrica .switchery-small {
    width: 45px !important;
}

/* #tabla-extraccion td:nth-child(1){} */
/* #tabla-extraccion tbody tr td:first-child{

}


#tabla-extraccion tr:nth-child(2) td:first-child {
   
} */
/* FIN REPORTE HUELLA HIDRICA */

.contenedor_card {
    border-radius: 15px;
    width: 100%;
}

.table_fuentes_componentes {
    width: 100%;
    text-align: center;
}

.table_fuentes_componentes tr {
    background-color: transparent !important;
}

.table_fuentes_componentes th {
    border-top: none !important;
    border-bottom: none !important;
    border-left: none;
}

.contenedor_valores_datos {
    min-width: 220px;
}

.contenedor_valores_datos_total {
    min-width: 120px;
}

#tabla-estres-hidrico tbody {
    text-align: center;
}

/* Datatables */
.tabla-sin-buscar .dataTables_filter {
    display: none !important;
}

/* Dashboard */
.contenedor_tarjetas_general {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.item_tarjeta {
    border-radius: 16px;
    border: 1px solid rgba(220, 220, 220, 1)
}

.contenedor_arriba_item {
    height: 135px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon_ubicacion {
    color: #6971E8;
}

.texto-morado {
    color: #6971E8;
}

.texto_lugar {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
}

.tarjetas_abajo_1 {
    display: grid;
    grid-template-columns: 1fr;
}

.fondo-azul-opaco {
    background-color: rgba(77, 141, 250, 0.1);
}

.texto-azul {
    color: #4D8DFA;
}

.tamanio-icons {
    font-size: 20px;
}

.border-item-left {
    border-bottom-left-radius: 16px;
}

.border-item-right {
    border-bottom-right-radius: 16px;
}

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

.texto_info_tarjeta {
    color: #979797;
}

.texto_valor {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    color: #4D4D4D;
}

.texto_unidad {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    color: #4D4D4D;
    word-break: break-word;
    text-align: center;
}

.contenedor_ubicacion {
    position: absolute;
    top: 15px;
    left: 15px;
}

.tarjetas_abajo_2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.fondo-verde-claro {
    background: rgba(215, 255, 248, 1);
}

.texto-verde {
    color: rgba(0, 159, 131, 1);
}

.contenedor_tarjeta {
    height: 90px;
}

.fondo-rojo {
    background: rgba(252, 97, 93, 0.1);
}

.texto-rojo {
    color: #FC615D;
}

.tarjetas_abajo_3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.fondo-gris {
    background: rgba(77, 77, 77, 0.1);
}

.texto-negro-items {
    color: #4D4D4D;
}

.texto_detalle_items {
    font-family: 'Quicksand';
    font-size: 12px;
    padding: 0px 11px;
}

@media (max-width: 1366px) {
    .contenedor_tarjetas_general {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media (max-width: 575.98px) {
    .contenedor_tarjetas_general {
        grid-template-columns: auto;
    }
}

.fs-quicksand {
    font-family: 'Quicksand';
}

.fondo-morado-o {
    background: rgba(105, 113, 232, 0.1);
}

.texto-morado {
    color: #6971E8;
}

.fondo-amarillo-o {
    background: rgba(255, 246, 200, 1);
}

.texto-amarillo {
    color: #A39200;
}

.fondo-verde-o {
    background: rgba(215, 255, 248, 1);
}

.texto-verde-icons {
    color: #009F83;
}

.contenedor_cards_2_general {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 1fr 1fr;
}

.item_card {
    border-radius: 16px;
    padding-left: 40px;
}

.icon-liston {
    position: absolute;
    width: 32px;
    height: 72px;
    top: 0px;
    right: 43px;
}

.titulos_cards_2 {
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    color: #4D4D4D;
}

.contenedor_icon {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.iconos_items_cards_2 {
    font-size: 17px;
    line-height: 0;
}

.icon_bar_reportes {
    width: 24px;
    height: 24px;
    object-fit: scale-down;
}

.texto_reportes {
    font-style: normal;
    font-size: 16px;
    color: #C4C4C4;
}

.btn_ver {
    width: 92px;
    height: 40px;
    background: #4D8DFA;
    border-radius: 8px;
}

.texto_btn_ver {
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
}

.tooltip-cards-general {
    top: 100% !important;
    left: initial !important;
    width: max-content;
    margin-left: initial !important;
}

@media (max-width: 1199.98px) {
    .contenedor_cards_2_general {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 991.98px) {}

@media (max-width: 767.98px) {
    .contenedor_cards_2_general {
        grid-template-columns: auto;
    }
}

/* Fin dashboard */
#tabla-estres-hidrico th:nth-child(2),
#tabla-estres-hidrico th:nth-child(3),
#tabla-estres-hidrico th:nth-child(4) {
    text-align: center;
}

#tabla-calidad-vertimiento tbody {
    text-align: center;
}

#tabla-calidad-vertimiento th {
    text-align: center;
}

#tabla-calidad-vertimiento th:nth-child(6),
#tabla-calidad-vertimiento th:nth-child(8),
#tabla-calidad-vertimiento th:nth-child(9) {
    min-width: 400px;
    white-space: normal;
}

#tabla-impactos-vertimiento tbody {
    text-align: center;
}

#tabla-impactos-vertimiento th {
    text-align: center;
}

#tabla-impactos-vertimiento th:nth-child(6) {
    /* min-width: 200px;
    max-width: 200px;
    white-space: normal; */
}


#tabla-impactos-vertimiento th:nth-child(7) {
    max-width: 250px;
    min-width: 300px;
    white-space: normal;
}

#tabla-impactos-vertimiento th:nth-child(6) {
    max-width: 250px;
    min-width: 250px;
    white-space: normal;
}

.separador_filtros {
    width: 100%;
    height: 1px;
    background: #1e9ff2;
    /* margin-bottom: 10px; */
    /* margin-top: 15px; */
}

.fondo-azul-filtros {
    background: #1e9ff214;
    border-left: 1px solid #1e9ff2;
    border-right: 1px solid #1e9ff2;
}

.items_categorias_confEmisiones {
    white-space: break-spaces;
}

#idIndicador {
    height: auto;
}

.tabla_confEmisiones td:nth-child(1) {
    max-width: 250px;
    min-width: 250px;
}

.tabla_confEmisiones td:nth-child(2) {
    max-width: 300px;
    min-width: 300px;
}

#categorias {
    height: auto;
}

.tabla_confEmisiones .ui-select-match .ui-select-toggle {
    height: auto;
}

.tabla_confEmisiones .ui-select-match .ui-select-match-text {
    white-space: normal;
}

.text-alert-grey {
    color: #9e9e9e !important;
}

#tabla-total tbody td:nth-child(1) {
    width: 200px;
    min-width: 200px;
}

#idIndicadorConfEmisiones .ui-select-match-item {
    white-space: initial !important;
}

.btn-edit-multiple {
    position: relative;
    bottom: 2px;
    left: 4px;
}

.icon-multiple {
    font-size: 1.2rem !important;
}

.btn-select-unico {
    right: 50px !important;
}

#categorias_cargar_huella .ui-select-toggle {
    background: #eceff1 !important;
}

#alcance_indicador .ui-select-toggle {
    background: #eceff1 !important;
}

#tabla-total-reporte th:nth-child(6) {
    max-width: 450px;
    min-width: 450px;
    white-space: normal;
}

#tabla-total-reporte tr:last-child {
    font-weight: bold;
}

#categorias_cargar_huella .dropdown-toggle::after {
    display: none;
}

#alcance_indicador .dropdown-toggle::after {
    display: none;
}

#tipo_comparacion .ui-select-toggle {
    background: #eceff1 !important;
}

.card_huella_carbono {
    height: 230px;
}

.texto_cards_reporte {
    font-family: 'Quicksand', Georgia, 'Times New Roman', Times, serif;
    font-size: 20px;
}


@media (max-width: 1199.98px) {
    .texto_cards_reporte {
        font-size: 1.5rem;
    }
}

@media (max-width: 991.98px) {
    .card_huella_carbono {
        height: auto;
        padding: 15px 0px;
    }
}

/* Fix menu */

.header-navbar .navbar-header .navbar-brand .brand-logo {
    height: 40px;
    object-fit: scale-down;
}

body.vertical-layout.vertical-menu.menu-expanded .navbar .navbar-header {
    display: flex;
    align-items: center;
}

@media (max-width: 767.98px) {
    .header-navbar .navbar-header .navbar-brand {
        top: 11px;
    }
}

/* Fix menu */

#tabla-ordenes-trabajo th:nth-child(2) {
    max-width: 450px;
    min-width: 450px;
    white-space: normal;
}

/* Cards huella carbono */
.contenedor_card_info_compensacion {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 15px;
}

.compensacion_sin_neutro {
    grid-template-columns: 4fr !important;
}

.contenedor_card_1 {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1.5fr;
    border-radius: 16px;
    background: #F6F6F6;
    border: 1px solid #DCDCDC;
}

.contenedor_card_1_sin_neutro {
    grid-template-columns: repeat(4, 1.5fr) !important;
}

.contenedor_card_1_sin_compensacion {
    grid-template-columns: 1fr 1fr !important;
}

.circulo_icon {
    width: 64px;
    height: 64px;
    background: rgba(107, 111, 130, 0.10);
    border-radius: 9999px
}

.contenedor_card_info_compensacion h3 {
    color: #6B6F82;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.contenedor_card_info_compensacion h4 {
    color: #6B6F82;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.contenedor_card_info_compensacion h5 {
    color: #979797;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.barra_gris_lateral {
    width: 2px;
    height: 120px;
    background: rgba(196, 196, 196, 0.40);
    position: absolute;
    bottom: 0px;
    right: 0px;
}

.contenedor_card_info_compensacion label {
    color: #2ED197;
    text-align: center;
    font-family: Quicksand;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.contenedor_card_info_compensacion p {
    color: #6B6F82;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.contenedor_card_info_compensacion h6 {
    color: #6B6F82;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.contenedor_emisiones_por_compensar {
    display: grid;
    grid-template-columns: 1fr;
}

.pt-primer-item {
    padding-top: 30px;
}

.card_carbono_neutro {
    border-radius: 16px;
}

.imagen_carbono_neutro {
    height: 257px;
    object-fit: cover;
}

.item_dato_curioso {
    color: #979797;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.btn-ver-menos-datos {
    display: none;
}

.btn-ver-menos-datos_cons {
    display: none;
}

.btn-datos {
    cursor: pointer;
}

.contenedor_tarjetas_carbono_pc {
    display: none;
}

.contenedor_tarjetas_carbono_mobile {
    display: block;
}

.tablas_pm_responsive .table-responsive {
    display: inline-table !important;
}

body.vertical-layout.vertical-menu.menu-open .main-menu {
    width: 260px !important;
}

body.vertical-layout.vertical-menu.menu-hide .main-menu {
    width: 60px !important;
}



/* Reporte planes de accion */
#tabla-serguimientos-plan tr:last-child,
#tabla-serguimientos-plan tr:nth-last-child(2) {
    font-weight: bold;
}

#actividad_select_planes .ui-select-toggle {
    background: #eceff1 !important;
}

#responsable_select_planes .ui-select-toggle {
    background: #eceff1 !important;
}

#actividad_select_planes .dropdown-toggle::after {
    display: none;
}

#responsable_select_planes .dropdown-toggle::after {
    display: none;
}

/* Fin Reporte planes de accion */

.menu-title {
    display: inline !important;
}

#tabla-factores th:nth-child(5) {
    max-width: 200px;
    min-width: 200px;
    white-space: normal;
}

table.table-mode-dark {
    width: 100% !important;
}

table.table-mode-dark>tbody>tr.odd {
    background-color: rgba(57, 62, 70, 0.5) !important;
}

table.table-mode-dark tbody tr {
    border-top: none !important;
    border-bottom: none !important;
}

/* ACTIVIDADES CUMPLIMIENTO */
#tabla-estado-titulo-actividad tr td:nth-child(1),
#tabla-estado-titulo-actividad tr td:nth-child(2),
#tabla-estado-titulo-actividad tr td:nth-child(4) {
    max-width: 300px;
    min-width: 300px;
    width: 300px;
    white-space: normal;
}

#tabla-estado-titulo-actividad tr td:nth-child(5) {
    max-width: 438px;
    min-width: 438px;
    width: 438px;
    white-space: normal;
}

#tabla-estado-titulo-actividad .ui-select-bootstrap4>.ui-select-choices,
.ui-select-bootstrap4>.ui-select-no-choice {
    position: initial !important;
    max-height: 195px;
}

.btn-nuevo-agregar {
    padding: 6px;
    margin-bottom: 3px;
    border-color: #1176fc !important;
    background-color: #1176fc !important;
    color: white;
    border-radius: 8px;
}

.selected-tags {
    list-style: none;
    padding: 0;
    margin-top: 5px;
}

.fondo-gris-claro {
    background-color: #f4f5fa;
}

.contenedor-border-tabla {
    border-radius: 20px !important;
    border-color: #e4e5ea !important;
}

.contenedor-boton-crear-punto {
    background-color: #1176fc !important;
    color: white;
    font-weight: 600;
    border-radius: 7px;
    top: 0px !important;
    right: 0px !important;
    cursor: pointer;
}

.btn-duplicar-punto {
    border: 1px solid #3cacf3;
    border-radius: 10px;
    padding: 3px;
    color: #36a9f2;
    font-weight: 600;
}

.btn-eliminar-punto {
    border: 1px solid #f85d59;
    border-radius: 10px;
    padding: 3px;
    color: #f85d59;
    font-weight: 600;
}

.icon-puntos {
    font-size: 16px !important;
}

#tablaVariablePuntos tbody tr td:nth-child(1) {
    text-align: center;
    vertical-align: middle;
}

.th-foot-variablePunto th {
    color: #1e9ff2a3;
}

#tablaVariablePuntos .ui-select-bootstrap4>.ui-select-choices,
.ui-select-bootstrap4>.ui-select-no-choice {
    position: initial !important;
    max-height: 195px;
}

#tabla-actividades tbody tr td:nth-child(6) {
    text-align: center;
}

.btn-subir-archivo-nuevo {
    width: 230px !important;
    border-radius: 10px;
    padding: 12px 0px !important;
    font-size: 18px;
    font-weight: 600;
    box-shadow: rgb(33 35 38) 0px 10px 10px -10px;
}

.item-archivo {
    border: 0px;
    width: 230px !important;
    text-align: left;
    font-weight: 600;
    font-size: 16px;
}

.item-nombre-archivo {
    width: 400px;
}

.item-nombre-archivo input {
    height: 45px;
    font-size: 17px;
}

.btn-eliminar-archivo {
    border-radius: 50%;
    padding: 1px 6px;
    color: black;
    background: transparent !important;
    border-color: transparent !important;
    font-weight: bold;
}

.separador-informacion {
    margin: 33px 0px;
    border-bottom: 2px solid #6b6f8238;
    font-size: 20px;
    padding-bottom: 8px;
    font-weight: bold;
    color: #1e9ff2;
}

.disable-input-style .form-control.ui-special-group span.btn-secondary {
    background: #eceff1 !important;
}

.disable-input-style .form-control.ui-special-group span.btn-secondary:hover {
    background: #eceff1 !important;
}

.disable-input-style .ui-select-multiple.ui-select-bootstrap4 {
    background: #eceff1 !important;
}

.disable-input-style .dropdown-toggle::after {
    display: none;
}

#tablaPuntosVariables thead {
    background: #1e9ff22b;
}

#tablaPuntosVariables tbody tr td:nth-child(1) {
    font-weight: bold;
    box-shadow: inset 0 0 0 9999px rgb(242 242 242) !important;
}

#tablaPuntosVariables th:nth-child(4) {
    min-width: 135px;
    white-space: break-spaces;
    word-break: break-word;
}

#tablaPuntosVariables th:nth-child(5) {
    min-width: 250px;
    width: 250px;
}

.scroll-tabla-puntos::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* Track */
.scroll-tabla-puntos::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
.scroll-tabla-puntos::-webkit-scrollbar-thumb {
    background: #1e9ff22b;
}

/* Handle on hover */
.scroll-tabla-puntos::-webkit-scrollbar-thumb:hover {
    background: #888;
}

#tabla-seguimientos-actividades th:nth-child(2) {
    min-width: 350px;
    width: 350px;
}

#tabla-seguimientos-actividades td:nth-child(2) {
    display: block;
    overflow-y: auto;
    max-height: 200px;
    min-height: 41px;
}

#tabla-seguimientos-actividades th:nth-child(4) {
    min-width: 150px;
    width: 150px;
    white-space: break-spaces;
}

#tabla-seguimientos-actividades td:nth-child(2)::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* Track */
#tabla-seguimientos-actividades td:nth-child(2)::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
#tabla-seguimientos-actividades td:nth-child(2)::-webkit-scrollbar-thumb {
    background: #1e9ff22b;
}

/* Handle on hover */
#tabla-seguimientos-actividades td:nth-child(2)::-webkit-scrollbar-thumb:hover {
    background: #888;
}

#tabla-seguimientos-actividades-anulados th:nth-child(2) {
    min-width: 350px;
    width: 350px;
}

#tabla-seguimientos-actividades-anulados td:nth-child(2) {
    display: block;
    overflow-y: auto;
    max-height: 200px;
    min-height: 41px;
}

#tabla-seguimientos-actividades-anulados th:nth-child(4) {
    min-width: 150px;
    width: 150px;
    white-space: break-spaces;
}

#tabla-seguimientos-actividades-anulados td:nth-child(2)::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* Track */
#tabla-seguimientos-actividades-anulados td:nth-child(2)::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
#tabla-seguimientos-actividades-anulados td:nth-child(2)::-webkit-scrollbar-thumb {
    background: #1e9ff22b;
}

/* Handle on hover */
#tabla-seguimientos-actividades-anulados td:nth-child(2)::-webkit-scrollbar-thumb:hover {
    background: #888;
}

.hover-documentos:hover {
    font-weight: bold;
    color: #1e9ff2 !important;
}

/* FIN ACTIVIDADES CUMPLIMIENTO */

@media screen and (min-width: 980px) and (max-width: 1130px) {
    .row-buttons {
        display: flex;
        gap: 2rem;
    }
}

@media screen and (min-width: 800px) and (max-width: 979px) {
    .row-buttons {
        gap: 4rem;
    }
}

@media screen and (min-width: 767px) and (max-width: 799px) {
    .row-buttons {
        gap: 4.5rem;
    }
}

@media screen and (min-width: 767px) and (max-width: 860px) {
    .row-buttons {
        gap: 4.5rem;
    }
}


/* #tablaPuntosVariables > tbody > tr:nth-child(3) > td.sorting_1 */


@media (max-width: 1699.98px) {
    .contenedor_card_info_compensacion {
        grid-template-columns: 3fr;
    }
}

@media (max-width: 1399.98px) {

    .contenedor_card_1 {
        grid-template-columns: 1fr 1fr !important;
        gap: 15px;
        border: initial;
        border-radius: 0px;
        background: transparent;
    }

    .items_cards_1 {
        border-radius: 16px;
        background: #F6F6F6;
        border: 1px solid #DCDCDC;
        padding: 20px 0px;
    }

    .contenedor_card_1_sin_compensacion {
        grid-template-columns: 1fr 1fr !important;
        gap: 15px;
    }

    .barra_gris_lateral {
        display: none;
    }

    .contenedor_card_info_compensacion {
        grid-template-columns: auto !important;
    }

    .imagen_carbono_neutro {
        height: 225px;
        width: 100%;
        border-radius: 15px;
    }

    .pt-primer-item {
        padding-top: 15px;
    }

    .contenedor_card_info_compensacion h4 {
        font-size: 26px;
    }

    .contenedor_tarjetas_carbono_pc {
        display: block;
    }

    .contenedor_tarjetas_carbono_mobile {
        display: none;
    }
}

@media (max-width: 1199.98px) {
    .pt-primer-item {
        padding-top: 0px;
    }

    .item-nombre-archivo {
        width: 100%;
    }
}

@media (max-width: 991.98px) {
    .contenedor_tarjetas_carbono_pc {
        display: none;
    }

    .contenedor_tarjetas_carbono_mobile {
        display: block;
    }

    .contenedor_card_1 {
        grid-template-columns: auto !important;
        gap: 15px;
        border: initial;
        border-radius: 0px;
        background: transparent;
    }

    .items_cards_1 {
        border-radius: 16px;
        background: #F6F6F6;
        border: 1px solid #DCDCDC;
        padding: 20px 0px;
    }

    .contenedor_card_1_sin_compensacion {
        grid-template-columns: auto !important;
        gap: 15px;
    }

    .barra_gris_lateral {
        display: none;
    }

    .contenedor_card_info_compensacion {
        grid-template-columns: auto;
    }

    .imagen_carbono_neutro {
        height: auto;
        width: 100%;
    }

    .contenedor_card_info_compensacion h4 {
        font-size: 26px;
    }
}

@media (max-width: 767.98px) {
    .item-nombre-archivo {
        width: 70%;
    }
}

@media (max-width: 575.98px) {
    .contenedor_compensadas_mwh {
        flex-wrap: wrap;
    }

    #tabla-programas-pma .pagination {
        flex-wrap: wrap;
        margin: 10px 0;
    }

    #tablaMetasAccionesPma_paginate .pagination {
        flex-wrap: wrap;
        margin: 10px 0;
    }

    .modal-m {
        max-width: 100%;
    }

    .tablas_pm_responsive .table-responsive {
        display: block !important;
    }

    .item-nombre-archivo {
        width: 100%;
    }
}

/* Fin Cards huella carbono */
/* Reporte planes de accion */
#tabla-serguimientos-plan tr:last-child,
#tabla-serguimientos-plan tr:nth-last-child(2) {
    font-weight: bold;
}

#actividad_select_planes .ui-select-toggle {
    background: #eceff1 !important;
}

#responsable_select_planes .ui-select-toggle {
    background: #eceff1 !important;
}

#actividad_select_planes .dropdown-toggle::after {
    display: none;
}

#responsable_select_planes .dropdown-toggle::after {
    display: none;
}

/* Fin Reporte planes de accion */

.menu-title {
    display: inline !important;
}

#tabla-factores th:nth-child(5) {
    max-width: 200px;
    min-width: 200px;
    white-space: normal;
}

table.table-mode-dark {
    width: 100% !important;
}

table.table-mode-dark>tbody>tr.odd {
    background-color: rgba(57, 62, 70, 0.5) !important;
}

table.table-mode-dark tbody tr {
    border-top: none !important;
    border-bottom: none !important;
}

@media screen and (min-width: 960px) and (max-width: 1130px) {
    .row-buttons {
        display: flex;
        gap: 1.8rem;
    }
}

@media screen and (min-width: 927px) and (max-width: 959px) {
    .row-buttons {
        gap: 2.2rem;
    }
}

@media screen and (min-width: 819px) and (max-width: 926px) {
    .row-buttons {
        gap: 3rem;
    }
}

@media screen and (min-width: 726px) and (max-width: 818px) {
    .row-buttons {
        gap: 4rem;
    }
}

@media (min-width: 768px) and (max-width: 1025px) {
    .row-fields {
        display: block;
    }
}

.selected-tags {
    list-style: none;
    padding: 0;
    margin-top: 5px;
}

.selected-tags li {
    display: inline-block;
    background-color: #1e9ff21c;
    padding: 5px 10px;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 9px;
    border: 1px solid #1e9ff2;
    color: #1e9ff2;
    font-weight: 600;
}

.checkbox-tags {
    list-style: none;
    padding: 0;
    margin-top: 5px;
}

.checkbox-tags li {
    display: inline-block;
    background-color: white;
    padding: 2px 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 9px;
    border: 1px solid #CACFE7;
    color: #1e9ff2;
    font-weight: 600;
}

.ui-select-wrapper {
    position: relative;
}

/* Ajusta el contenedor del select para que tenga suficiente padding y no cubra el placeholder */
.ui-select-wrapper .ui-select-container.ui-select-multiple .ui-select-toggle {
    padding-top: 20px; /* Ajusta segun el tamano de tu placeholder */
}

/* Asegura que el contenedor del match tenga una posicion relativa */
.ui-select-wrapper .ui-select-container.ui-select-multiple .ui-select-match {
    position: relative;
}

.ui-select-wrapper:focus-within .ui-select-placeholder {
    opacity: 0;
}

/* Estilo y posicion del placeholder */
.ui-select-wrapper .ui-select-placeholder {
    position: absolute;
    top: 50%;
    left: 10px; /* Ajusta segun el padding/margin de tu input */
    transform: translateY(-50%);
    color: #999; /* Ajusta el color del placeholder segun tus necesidades */
    pointer-events: none; /* Evita que el placeholder interfiera con el input */
    z-index: 1; /* Asegura que el placeholder esta encima del ui-select */
}

.select-puntos .ui-select-match {
    display: none;
}

.select-puntos {
    border-radius: 12px;
}

.squareButton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 130px;
    min-width: 120px;
    background-color: rgb(255, 255, 255);
    color: #1e9ff2;
    border: 2px solid transparent;
    border-radius: 0.55rem;
    border-color: #f3f3f3;
    cursor: pointer;

}

.squareButton:hover {
    border-color: #bbdef1;
    /* Azul claro */
}


.squareButton i {
    font-size: 24px;
    color: #1e9ff2;
}

.squareButton span {
    font-size: 12px;
    color: #000;
}

.radioButtonReporteUnificado {
    display: inline-block;
    padding: 8px;
    border: 2px solid transparent;
    border-color: #f3f3f3;
    border-radius: 0.55rem
}

.radioButtonReporteUnificado:hover {
    border-color: #bbdef1;
    /* Azul claro */
}

@media (max-width: 1300px) {
    .table-wrapper-listar-act {
        overflow-x: auto;
    }

    .table-wrapper-listar-act .codigo {
        min-width: 10px !important;
    }

    .table-wrapper-listar-act .descripcion {
        min-width: 360px;
    }
}

input.check-mapa { 
    position: static;  
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.contenedor-ventana {
    position: fixed;
    z-index: 1049;
    top: 0px;
    right: -100%;
    bottom: 0;
    width: calc(100% - 260px);
    height: calc(100vh);
    padding: 0;
    transition: 300ms ease all;
    border-left: 1px solid rgba(0, 0, 0, .05);
    background-color: #fff;
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .1);
    box-shadow: 0 0 8px rgba(0, 0, 0, .1);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow-y: auto;
    overflow-x: hidden;
}

.cont-lg {
    width: 60%;
    position: fixed;
    z-index: 1001;
    top: 8%;
    transition: 1s;
    overflow: hidden;
}

.c-height-90 {
    height: 90% !important;
}

.cont-lg.c-right-show {
    right: 0;
}

.cont-lg.c-right-hide {
    right: -60%;
}

.blur-effect-default {
    backdrop-filter: blur(10px);
    /* Agrega un fondo semi-transparente para mejorar el efecto */
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}

body.vertical-layout.vertical-menu.menu-expanded .contenedor-ventana {
    width: calc(100% - 260px);
}

body.vertical-layout.vertical-menu.menu-collapsed .contenedor-ventana {
    width: calc(100% - 60px);
}

.contenedor-ventana.open {
    right: 0;
}

.blur-effect-default.bg-blur-white {
    background-color: rgba(255, 255, 255, 0);
}

/* boton general de ayuda o paseo */
div.contenedor-botones-ayuda {
    display: grid;
    justify-content: end;
    position: fixed;
    right: 10px;
    bottom: 1em;
}

#btn-ayuda {
    position: fixed;
    right: 10px;
    bottom: 1em;
}

.driver-popover.driverjs-theme {
    background-color: #1e9ff2;
    /* #fde047 */
    color: #fff;
}


.input-border-nuevo {
    border-radius: 12px;
}

.input-group .input-border-nuevo.ui-special-group {
    border: 0px !important;
}

.input-border-nuevo .dropdown-toggle {
    border-radius: 12px;
}
.input-group .input-border-nuevo .dropdown-toggle {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.input-border-nuevo .ui-select-search {
    padding-left: 10px;
    padding-top: 5px;
}

.badge-tablas{
    margin-right: 12px; 
    display: inline-block; 
    padding: 8px 12px;
    font-weight: 500 !important;
}

.nav-border-primary{
    border-bottom: 1px solid #666ee8 !important;
}
.nav.nav-tabs.nav-underline .nav-primary.nav-item a.nav-link:before
{
    background: #666ee8 !important;
}

.btn-nuevo-outline{
    display: flex;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 16px;
    border-radius: 8px;
    align-items: center;
}

.btn-nuevo-outline i{
    font-weight: 600;
    font-size: 23px;
    margin-right: 8px;
}

.btn-nuevo-close{
    padding: 6px;
    border-radius: 8px;
    width: 36px;
    height: 36px;
}

.btn-nuevo-close i{
    font-size: 23px !important;
}

.bg-calendar-nuevo{
    background-color: #1078FF1A;
    border-color: #1078FF;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    color: #1078FF;
    border: 2px solid;
    margin-left: -2px;
    z-index: 10;
}

.input-border-nuevo .btn-default-focus {
    border-radius: 12px !important;
    background-color: white !important;
}
.input-group .input-border-nuevo .btn-default-focus {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.driver-popover.driverjs-theme .driver-popover-title {
    font-size: 20px;
    font-family: 'Quicksand', Georgia, 'Times New Roman', Times, serif;
}

.driver-popover.driverjs-theme .driver-popover-title,
.driver-popover.driverjs-theme .driver-popover-description,
.driver-popover.driverjs-theme .driver-popover-progress-text {
    color: #FFFFFF;
    font-family: 'Quicksand', Georgia, 'Times New Roman', Times, serif;
}

.driver-popover-progress-text {
    margin-right: 0.5em;
}

.driver-popover.driverjs-theme button {
    flex: 1;
    text-align: center;
    background-color: #000;
    color: #ffffff;
    border: 2px solid #000;
    text-shadow: none;
    font-size: 14px;
    /* padding: 5px 8px; */
    border-radius: 6px;
    font-family: 'Quicksand', Georgia, 'Times New Roman', Times, serif;
}

.driver-popover.driverjs-theme button:hover {
    /* background-color: #000; */
    /* color: #ffffff; */
}

.driver-popover.driverjs-theme .driver-popover-navigation-btns {
    justify-content: space-between;
    gap: 3px;
}

.driver-popover.driverjs-theme .driver-popover-close-btn {
    color: #FFFFFF;
    background-color: transparent;
    border: none;
    font-size: 22px;
    transition: 0.2s linear;
}

.driver-popover.driverjs-theme .driver-popover-close-btn:hover {
    font-size: 26px;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow {
    border-left-color: #1e9ff2;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow {
    border-right-color: #1e9ff2;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow {
    border-top-color: #1e9ff2;
}

.driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
    border-bottom-color: #1e9ff2;
}
/* boton general de ayuda o paseo */

.checkbox-center{
    text-align: center !important;
    padding: 0px 8px 8px 12px  !important;
}

.container-check input:disabled~.checkmark {
    background-color: #b0bec5;
}

.polygon-label {
    color: black;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
}

#tabla-reglas-validacion th:nth-child(1){
    width: 47px;
    white-space: normal;
}

#tabla-reglas-validacion th:nth-child(2), 
#tabla-reglas-validacion th:nth-child(3), 
#tabla-reglas-validacion th:nth-child(4), 
#tabla-reglas-validacion th:nth-child(5),
#tabla-reglas-validacion th:nth-child(6){
    width: 185px;
    min-width: 185px;
    max-width: 185px;
    white-space: normal;
}

#tabla-reglas-validacion th:nth-child(7){
    width: 400px;
    min-width: 400px;
    max-width: 400px;
    white-space: normal;
}

#disabled-edit .ui-select-toggle {
    background: #eceff1 !important;
}

#disabled-edit .dropdown-toggle::after {
    display: none;
}

#tabla-outliers th:nth-child(4){
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    white-space: normal;
}

#tabla-info-registro td{
    width: 50%;
}

.contenedorDeGraficas {
    width: 100%;
    height: auto; 
    margin: 0 auto; 
    padding: 15px; 
}

.contenedorDeGraficas > * {
    width: 100%;
    height: auto;
    max-width: 100%;
}

@media (max-width: 768px) {
    .contenedorDeGraficas {
        padding: 10px; 
    }
}


@media (max-width: 480px) {
    .contenedorDeGraficas {
        padding: 5px; 
    }
}
#filtrosContainer {
border: 2px;
position: relative;
align-items: center;

}

.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-fullscreen,
.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-zoom-in,
.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-zoom-out {
    background-color: #ffffff; 
    color: #393E46; 
    border-radius: 50%; 
    width: 30px;
    height: 30px;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
}

.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-chatbot,
.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-tutorial {
    background-color: #1078FF !important;
    color: #ffff;
    width: 30px;
    height: 30px;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    border-color: #1078FF;
}

.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-zoom-in::before {
    font-size: x-large;
    content: "+";
}
.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-fullscreen::before{
    fill: none;
}
.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-zoom-out::before {
    font-size: x-large;
    content: "-"; 
}
.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-tutorial::before{
    fill: none;
}

.btn-tutorial-mapa {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 2px solid #008CFF;
    border-radius: 6px;
    color: #008CFF;
    font-size: 14px;
    font-weight: bold;
    background: white;
    cursor: pointer;
    transition: 0.3s;
}

.btn-tutorial-mapa:hover,
.btn-tutorial-mapa:hover i {
    background: #008CFF;
    color: white;
}

.modal-tutorial {
    background: white;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 500px;
    position: relative;
    font-family: 'Quicksand', Georgia, 'Times New Roman', Times, serif;
    z-index: 2001;
}


.modal-dialog::backdrop {
    z-index: 2000;
    background: rgba(0, 0, 0, .05);
}
/*  estilos mapa mapbox nuevos */

.cont-lateral-izquierdo-filtro-aereo-blanco {
    min-height: 130px;
    max-height: 500px;
    min-width: 350px;
    width: 18%;
    position: fixed;
    z-index: 1001;
    top: 1em;
    left: -95%;
    transition: 0.5s;
    border-radius: 1em;
    background-color: rgba(0, 0, 0, 0.7);
    background-color: white;
}

.cont-lateral-derecho-filtro-blanco {
    min-height: 95px;
    max-height: 450px;
    min-width: 180px;
    width: 10%;
    position: fixed;
    z-index: 1001;
    top: 1em;
    right: -91%;
    transition: 0.5s;
    border-radius: 1em;
    background-color: rgba(0, 0, 0, 0.7);
    background-color: white;
}
.cont-lateral-izquierdo-filtro-blanco {    
    min-height: 120px;
    max-height: 600px;
    min-width: 250px;
    width: 18%;
    position: fixed;
    z-index: 1001;
    bottom: 1em;
    left: -90%;
    transition: 0.5s;
    border-radius: 1em;
    background-color: white;
}

.custom-map-container {
    position: relative;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 4px 8px rgb(0 0 0 / 0%), inset 0 -14px 27px rgb(0 0 0 / 60%);
    border: 1px solid #56594e; 
    border-radius: 8px; 
    background-color: white; 
}

.custom-map-container::before {    
    cursor: pointer; 
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.1); 
}

.custom-map-container span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 0;
    position: absolute;
    bottom: 0;
    position: relative; 
    top: 41px;
}

.custom-map-container i {
    color: white;
}

.select-icon-containerBucadorMapa {
    display: flex;
    align-items: center;
    width: 300px; 
    background-color: white;
    border-radius: 5px;
    height: 35px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

.select-icon-containerBucadorMapa .ui-select-match-text{
    width: 14rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 40px;
  }

  .select-iconBucadorMapa {
    padding: 0 10px;
    color: #abaec1;
    background-color: #FFFFFF;
    z-index: 800;
  }

  .select-iconBucadorMapa:hover {
    padding: 0 10px;
    color: #abaec1 !important;
    background-color: #FFFFFF;
    z-index: 800;
  }

  .ui-select-containerBucadorMapa {
    height: 35px;
    border: none !important;
    flex-grow: 2;
  }

  .ui-select-containerBucadorMapa .ui-select-match {
    border: none;
    box-shadow: none;
  }

  .ui-select-containerBucadorMapa .ui-select-match,
  .ui-select-containerBucadorMapa .ui-select-toggle,
  .ui-select-containerBucadorMapa .form-control {
    width: 102% !important;
    padding: 0em !important;
    border: none !important;
    box-shadow: none !important;
    background-color: white !important;
    color: #000;
    height: auto;
    outline: none;
    top: -2px;
} 
.ui-select-containerBucadorMapa .ui-select-choices{
    width: 126%;
    height: auto;
    max-height: 300px;
    overflow-x: hidden;
    margin-top: -1px;
    margin-left: -30px;
    border: none;
}

.btn-close-filtro {
    position: fixed;
    left: 325px;
    top: 15px;
    z-index: 100;
    background-color: #1078FF;
    margin: 0.3em;
    padding: 0.4em;
    border-radius: 0.3em;
    cursor: pointer;
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); 
    transition: box-shadow 0.3s ease; 
    transform: translateX(-500px);
    animation: slideIn 0.5s forwards;
}

.span-filtro{    
    bottom: 3px;
    position: relative;
    padding-left: 10px;       
}

@keyframes slideIn {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

.iconFiltro {
    padding: 0 10px;
    color: #222831;
    background-color: #FFFFFF;
    z-index: 10;
  }  
   
.popupCloseButton{
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    text-align: center;
    width: 24px;
    height: 24px;
    font: 16px / 24px Tahoma, Verdana, sans-serif;
    color: #757575;
    text-decoration: none;
    background: transparent;
    margin-right: 10px;
}


.pinMonitoreo {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #bababa;
    position: absolute;
    transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -20px;
    opacity: 0.8; 
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.pinMonitoreo:after {
    content: "";
    width: 15px;
    height: 15px;
    margin: 4.5px 0 0 4.5px;
    background: #e6e6e6;
    position: absolute;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: border 0.3s ease; 
    cursor: pointer;   
    opacity: 1;
}

.pinMonitoreo:hover:after {
    border: 2px solid #00aaff; 
}

.mostrar-conf-right {
    right: 0.5% !important;
}

.btn-close-derecho {
    position: absolute;
    z-index: 1;
    right: 13px;
    color: white;
    background-color: #1078FF;
    margin-top: 10px; 
    padding: 0.5em;
    border-radius: 0.5em;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); 
    transition: box-shadow 0.3s ease; 
}

#cont-footerN,
#cont-footerEmisiones {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 100%;
}

.btn-close-footer {
    z-index: 1;
    background-color: #1078FF;
    color: white;
    margin-bottom: auto; 
    padding: 0.5em;
    border-radius: 0.5em;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); 
    transition: box-shadow 0.3s ease; 

}

.contGraficaMapaMonitoreo, .contGraficaVariablePorDefecto {
    width: auto;
    max-width: 100%;
    height: auto;
}

.botonX{
    vertical-align: middle; 
    font-size: 1.5em;
}

.pin-data-mapa2 {
    position: relative;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pin-container {
    background-color: white;
    border-radius: 0.5em;
    padding: 0.1em 0.2em;
    display: flex;
    align-items: center;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
}

.color-box {
    width: 1.5em;  
    height: 1.5em;
    border-radius: 0.3em;
    margin-right: 0.5em;
}

.text-box {
    font-size: 1em;
    margin-right: 0.5em;
    font-weight: bold;
}

.pin-point {
    width: 0;
    height: 0;
    border-left: 0.8em solid transparent;
    border-right: 0.8em solid transparent;
    border-top: 1.2em solid white;
    position: absolute;
    bottom: -1.1em;
    left: 50%;
    transform: translateX(-50%);
}


.vertical-scroll {
    overflow-x: hidden;
    overflow-y: auto;
}

.vertical-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}


.btn-close-buscador{
    height: 30px; 
    position: absolute;
    top: -8px !important; 
    margin-right: -2.5rem !important;
    background: white !important;
    z-index: 10;
}

.capasCheck{
    min-width: 10em;
    min-height: 100px;
    max-height: 400px;
    overflow-x: auto;
}

.cont-conf-contenido{
    height: 80%;  
    min-width: 50%;  
    max-width: 80%; 
    border-radius: 1em; 
    background-color: white;
}

.border-left-select {
    border-left: 1px solid #4D8DFA;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
    margin-right: 10px;
}

body.vertical-layout.vertical-menu.menu-expanded .contenedor-form-cargues-masivos {
    width: calc(100% - 65vw);
    top: 0vh;
    min-height: 100%;
}

body.vertical-layout.vertical-menu.menu-collapsed .contenedor-form-cargues-masivos {
    width: calc(100% - 65vw);
    top: 0vh;
    min-height: 100%;
}

body.vertical-layout.vertical-menu.menu-expanded .cargues-masivos-asociacion {
    width: calc(100% - 50vw) !important;
}

body.vertical-layout.vertical-menu.menu-collapsed .cargues-masivos-asociacion {
    width: calc(100% - 50vw) !important;
}

.margin-top-modal-emisiones-fuentes {
    margin-top: 23rem; 
}

.margin-top-modal-emisiones-receptores {
    margin-top: 29rem; 
}

@media (max-width: 1521px) {
    .margin-top-modal-emisiones {
        margin-top: 2rem; 
    }

    body.vertical-layout.vertical-menu.menu-expanded .contenedor-form-cargues-masivos {
        width: calc(100% - 60vw);
    }

    body.vertical-layout.vertical-menu.menu-collapsed .contenedor-form-cargues-masivos {
        width: calc(100% - 60vw);
        top: 0vh;
        min-height: 100%;
    }
}

.fondo_opacidad {
    background: #00000075;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 1048;
    display: block;
}

.contaminante {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.contaminanteFuentes {
    width: 150px;
}

.fuentes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fuente {
    width: 125px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tituloContaminantesFuentes {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.tituloContaminantesFuentes h6:first-of-type {
    width: 150px;
  }
  
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
  }
  
.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 1px;
    bottom: 1px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
  }
  
  input:checked + .slider {
    background-color: #4D8DFA;
  }
  
  input:checked + .slider:before {
    transform: translateX(24px);
  }
  
.slider.round {
    border-radius: 34px;
  }
  
.slider.round:before {
    border-radius: 50%;
  }


.chk-variablesActivas2 {
    position: relative;
    width: 20px;
    height: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid #ccc;
    background-color: white;
    cursor: pointer;
    outline: none;
    border-radius: 3px;
}

.textoBotonesDerecha{
    font-size: 10px; 
    line-height: normal; 
    white-space: pre-line;
    overflow: hidden; 
    text-overflow: ellipsis;
    font-weight: bold;
    align-self: center;
}

.iconoDerecho{
    position: absolute; 
    z-index: 900;
    right: 1.5em;
    top:1.5em;
    margin-bottom: 1em;

}

.iconos-desplegados{
    margin: 5px 10px 5px 10px;  
    border: 1px solid #1078FF !important;
    filter: drop-shadow(4px 4px 8px rgba(16, 120, 255, 0.25)) !important;
    border-radius: 25%;
}

.azulado{
  color:  #1078FF;
}

.tituloContDerecha{
    margin:10px 50px 10px 10px;
    font-weight: bold;
}

.divIconoDerecho{
    align-items: center; 
    margin-top: 15px;
}

.btn-color{
    background-color: #4D8DFA;
    color: white;
    margin: 10px;
    border-radius: 25% !important;
}

.contenedor-imagen {
    width: 400px; 
    height: 400px;
    overflow: hidden; 
    position: relative; 
}

.imagen-cover {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center; 
    display: block; 
    border-top-left-radius: 0.5em; 
    border-top-right-radius: 0.5em;
}

.titulo-ventanaInfo{
    text-align: center;
    margin: 3px; 
    width:100%; 
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}



/* cambios estilos a clases ya creadas */

.popupCloseButtonN{
    border: none;    
    height: 24px;
    font: 16px / 24px Tahoma, Verdana, sans-serif;
    color: #757575;
    text-decoration: none;
    background: transparent;
    margin-right: 2%;
}
.estandarTamanoN {
    width: 2.188em;
    height: 2.188em;
    padding: 17.5px;
}

.estandarAzulN {
    border-color: #4D8DFA !important;
    background-color: #4D8DFA !important;
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.25));
}

.estandarClaroN {
    border-color: #1078FF  !important;
    background-color: #ffffff !important;
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.25));
}

.ventana-info-rosaN {
    position: absolute;
    width: auto !important;
    height: auto !important;
    background-color: transparent !important;
    border-radius: 1em;
    padding: 5px;
    min-width: 18em;
    min-height: 18em;
    z-index: 900 !important;
    cursor: default;
    
}

.opciones-tabN {
    height: 100%;
    width: 25%;
    vertical-align: top;    
    background-color: #222831;
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
}

.contenedor-footerN {
    display: none;
    justify-content: center;
    align-items: center;
    padding: 1em; 
    background-color: white; 
    border-radius: 1em;
    bottom: -40%;
    z-index: 1001;
}

#pie-graficas-mapaMapbox {
    background-color: white;
    background: white;
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, #0e0e0e 0%, #7d7e7d 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, #0e0e0e 0%, #7d7e7d 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, #0e0e0e 0%, #7d7e7d 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='white', endColorstr='#7d7e7d', GradientType=1);
}

.cont-lateral-izquierdoN {
    min-height: 34%;
    max-height: 95%;
    width: 400px;
    position: fixed;
    z-index: 1001;
    top: 1em;
    left: -110%;
    transition: 0.5s;
    border-radius: 1em;
    background-color: white;
    overflow-x: auto;
    scrollbar-width: none; 
    -ms-overflow-style: none;
}

.contenido-izquierdo{
    padding-top: 10px;
    margin-left: 5%;
    margin-right: 5%;
    color: black; 
    overflow-y: auto;
    min-height: 30px; 
    max-height: 445px;
    scrollbar-width: none;
    padding-bottom: 8px;
}

.contenido-centro-arriba{
    width: 80%;
    position: fixed; 
    left: 50%;  
    transform: translateX(-50%); 
    z-index: 910;
}

.mapboxgl-popupVuelos {
    height: 20px;
    background: #ffffff8f !important;
    padding: 0px 10px 0px 10px !important;
}

.mapboxgl-ocultarpopup {
    display: none;
}

.mapboxgl-ocultar_ver_grafica {
    display: none;
}
.contenedor-cuadro-lateral {
    position: absolute;
    top: 50px !important;
    left: calc(25% + 5px) !important;
}

.ui-select-wrapper-cumpl {
    margin-top: 0.5rem;
}

.ui-choise-cumpl {
    margin-left: 1em;
}

.ui-select-containerBucadorMapa-cumpl {
    height: 38px;
    border: none !important;
    flex-grow: 2;
    border-radius: 10px;
}

.nombre-zona-cumpl {
    display: flex;
    justify-content: center;
    background-color: white;
    border-radius: 10px;
    font-size: 15px;
    height: 2em;
    align-items: center;
}

.ui-select-containerBucadorMapa-cumpl .ui-select-match {
border: none;
box-shadow: none;
}

.ui-select-containerBucadorMapa-cumpl .ui-select-match,
.ui-select-containerBucadorMapa-cumpl .ui-select-toggle,
.ui-select-containerBucadorMapa-cumpl .form-control {
    width: 97% !important;
    padding: 0em !important;
    border: none !important;
    box-shadow: none !important;
    background-color: white !important;
    color: #000;
    height: auto;
    outline: none;
    top: -2px;
} 
.ui-select-containerBucadorMapa-cumpl .ui-select-choices{
    width: 126%;
    height: auto;
    max-height: 300px;
    overflow-x: hidden;
    margin-top: -1px;
    margin-left: -30px;
    border: none;
}

/* modal informacion mapa */
.contenedor-modal-lateral {
    display: flex;
    position: absolute;
    z-index: 2000 !important;
    right: 15px;
    top: 0;
    bottom: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;
    transition: transform 0.3s ease-in-out;
    transform: translateX(110%);
}

.show-modal {
    transform: translateX(0);
}

.hide-modal {
    transform: translateX(110%);
}

.modal-info-lateral {
    height: calc(100vh - 3rem);
    width: 40rem;
    background-color: #f8f9fa;
    display: flex;
    position: relative;
    border-radius: 15px;
    padding: 25px;
    flex-direction: column;
}

.modal-info-header {
    width: 100%;
}

.btn-modal-lateral {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.modal-info-content {
    flex: 1;
    overflow-y: auto;
}

.modal-info-content::-webkit-scrollbar {
    width: 8px;
}

.modal-info-content::-webkit-scrollbar-track {
    background: transparent;
}

.modal-info-content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}
/* ./modal informacion mapa */

.filtro-proyecto-cumpl {
    border-color: #343536 !important;
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.25));
}

.pin-cumpl-punto{
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-color: #1078FF;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -20px;
    border-style: solid;
    border-color: aliceblue;
    box-shadow: #23639ac7 0px 0px 2px 12px;
}

.popup-cumplimiento .mapboxgl-popup-content {
    background-color: #222831 !important;
    color: white;
    border-radius: 20px !important;
    padding: 15px !important;
    box-shadow: none !important;
    border: none !important;
    width: 31rem;
}

.popup-cumplimiento .mapboxgl-popup-tip {
    border-top-color: #222831 !important;
    border-bottom-color: #222831 !important;
}

.popup-cumplimiento .mapboxgl-popup-close-button{
    color: aliceblue;
    font-size: 2rem;
    padding: 1rem;
}

.pin-cumplimiento {
    width: 40px;
    height: 40px;
    border-radius: 50% 50% 50% 0;
    background-color: #bababa;
    position: absolute;
    transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -20px;
}

.pin-cumplimiento:after {
    content: "";
    width: 24px;
    height: 24px;
    margin: 8px 0 0 8px;
    background: #e6e6e6;
    position: absolute;
    border-radius: 50%;
}

.contenedor-cuadro-lateral {
    position: absolute;
    top: 50px !important; 
    left: calc(25% + 20px) !important; 
    z-index: 900 !important;
}
/* estilos mapas mapbox nuevo fin */

.scroll-tabla-puntos .ui-select-bootstrap4>.ui-select-choices,
.ui-select-bootstrap4>.ui-select-no-choice {
    position: initial !important;
    max-height: 195px;
}

.scroll-tabla-puntos .ui-select-choices::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Track */
.scroll-tabla-puntos .ui-select-choices::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
.scroll-tabla-puntos .ui-select-choices::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
.scroll-tabla-puntos .ui-select-choices::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* estilos cambio contrasenia */

.mensaje-ayuda {
    position: inherit;
    padding-left: 1rem;
    background-color: #fff;
    width: 100%;
    height: 8rem;
    border-radius: .5rem;
    margin-top: -1rem;
    margin-bottom: 1rem;
    margin-left: 1px;
}

.mensaje-ayuda-grande {
    position: relative;
    background-color: #fff;
    margin-bottom: 3.8rem; 
    margin-left: 1rem;
    gap: 1px;
}

.mensaje-ayuda-grande::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #fff;
    transition: all 0.3s ease;
}

.iconos-recordar-password {
    color: #fff;
    border-radius: 1rem;
    padding: 2px;
}

.icono-cumple {
    background: #77d789;
}

.icono-noCumple {
    background: #ff6060;
}

input[type="password"]::-ms-reveal {
    display: none;
}

input[type="password"]::-webkit-credentials-auto-fill-button {
    display: none;
}

input[type="password"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* fin estilos cambio contrasenia */

.popupMapaEmisiones {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}

.popupMapaEmisiones p {
    margin: 0px;
}

.mostrar-conf-right-emisiones {
    right: 0.5% !important;
}

.cont-lateral-derecho-filtro-blanco-info-proyecto {
    min-height: 140px;
    max-height: 450px;
    min-width: 300px;
    width: 10%;
    position: fixed;
    z-index: 1001;
    top: 1em;
    right: -91%;
    transition: 0.5s;
    border-radius: 1em;
    background-color: rgba(0, 0, 0, 0.7);
    background-color: white;
}

.mostrar-conf-right-emisiones-info-proyecto {
    right: 0.5% !important;
}

.contenido-info-proyecto{
    margin:20px 50px 20px 20px;
    font-weight: bold;
}

.tituloContDerechaEmisiones-contaminantes{
    margin:10px 10px 10px 10px;
    font-weight: bold;
}

.contenido-info-proyecto-contaminantes{
    margin:10px 50px 10px 10px;
    font-weight: bold;
}

.etiqueta-info-proyecto-contaminantes{
    background-color: #1078FF20;
    border: 1px solid #1078FF;
    color: #1078FF;
}

.badge-tablas-emisiones { 
    display: inline-block; 
    padding: 8px 12px;
    font-weight: 500 !important;
}

.badge-tablas-emisiones-ventana-info-fuente { 
    display: inline-block; 
    padding: 8px 12px;
    font-weight: 500 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100px;
    white-space: normal;
}

.ventana-info-fuente {
    width: auto !important;
    height: auto !important;
    background-color: #222831;
    border-radius: 20px;
    padding: 5px;
    min-width: 200px;
    color: white;
    z-index: 900 !important;
    cursor: default;
}

body.vertical-layout.vertical-menu.menu-expanded .contenedor-form-concentracion-fondo,
body.vertical-layout.vertical-menu.menu-collapsed .contenedor-form-concentracion-fondo {
    width: calc(100% - 50vw) !important;
    top: 0vh;
    min-height: 100%;
}

@media (max-width: 768px) {
    body.vertical-layout.vertical-menu.menu-expanded .contenedor-form-concentracion-fondo,
    body.vertical-layout.vertical-menu.menu-collapsed .contenedor-form-concentracion-fondo {
        width: 100% !important;
    }
}

.ventana-informacion {
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    padding: 1.5em;
    max-width: 450px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
}

.header-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1em;
}

.icon-title {
    display: flex;
    align-items: center;
    font-size: 1.2em;
    font-weight: bold;
    padding: 10px 0px 10px 0px;
}

.icon-title .info-icon {
    margin-right: 0.5em;
    font-size: 1.5em;
    color: #3A84DF;
}

.section {
    margin-bottom: 1em;
}

.section-title {
    display: flex;
    align-items: center;
    font-size: 1.1em;
    font-weight: bold;
    color: #3A84DF;
    margin-bottom: 0.5em;
}

.section-title .section-icon {
    margin-right: 0.5em;
    font-size: 1.3em;
    color: #3A84DF;
}

.info-block p {
    margin: 0.3em 0;
    font-size: 0.95em;
}

.info-block p strong {
    color: #333;
    font-weight: bold;
}

a {
    color: #3A84DF;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}
/* Contenedor de la rosa de viento */
.rosa-de-viento-container {
    position: relative; 
}

.btn-close-rosa {
    border-radius: 0.3em;   
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); 
    display: none; 
    position: absolute; 
    top: -10px; 
    right: -10px; 
    font-size: 16px;
    color: white;
    background-color: #1078FF;
    border: none;
    cursor: pointer;
}

.btn-calendar-rosa {
    border-radius: 0.3em;   
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); 
    display: none; 
    position: absolute; 
    top: -10px; 
    right: 20px; 
    font-size: 12px;
    padding: 1px 3px 3px 3px;
    color: white;
    background-color: #1078FF;
    border: none;
    cursor: pointer;
}

.rosa-de-viento-container:hover .btn-close-rosa {
    display: block; 
}
.rosa-de-viento-container:hover .btn-calendar-rosa {
    display: block; 
}

.contenedor-top {
    display: none;
    justify-content: center;
    align-items: center;
    padding: 1em;
    background-color: white;
    border-radius: 1em;
    top: -40%;
    z-index: 1001; 
}

#cont-top {
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 100%;
    height: 35%;
}

.modal-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
    /* z-index: 949;  */
    display: none; 
}

.bloquear-fondo{
    display: block !important;
}


/* Separacion entre los contenedores de empresa y licencias MonitoreoUsuarios */
.usuario-licencias-container {
    margin-left: 10px; /* Espacio a la izquierda para separarlo del campo de empresa MonitoreoUsuarios*/
    margin-top: 10px; /* Agrega un margen superior si es necesario MonitoreoUsuarios*/
}


/* Estilo para el contenedor del icono */
.icon-container-monitoreoUsuario {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    font-size: 4.5rem; /* Ajusta el tamanio del icono */
}

.icon-container-monitoreoUsuario-licencia {
    background-color: rgba(244, 67, 54, 0.8); /* Color de fondo para el icono de vencimiento */
}

/* Estilo para los titulos */
.contenedor-titulo-monitoreoUsuario {
    font-size: 1rem;
    font-weight: bold;
    margin-top: 10px;
}

#tabla-registros tr td:nth-child(4) {
    /* max-width: 438px;
    min-width: 438px;
    width: 438px;
    white-space: normal; */
}

.driver-popover-footer .driver-popover-btn-disabled {
    opacity: 1 !important;
    border: 1.5px solid white !important;
    background-color: transparent !important;
}
.driver-popover-footer{
    flex-direction: column;
    align-items: start !important;
}
.driver-popover-progress-text{
    order: 2;
    margin-top: 10px;
}

.driver-popover-footer .driver-popover-btn-disabled:hover{
    background-color: white;
    color: #1e9ff2 !important;
}

.driver-popover-navigation-btns button+button {
    margin-left: 4px;
    background-color: white !important;
    border: 1.5px solid white !important;
    color: #1e9ff2 !important;
    font-weight: bold;
}

.driver-popover-prev-btn{
    opacity: 1 !important;
    border: 1.5px solid white !important;
    background-color: transparent !important;
}
.driver-popover-prev-btn:hover{
    background-color: white !important;
    color: #1e9ff2 !important;
    font-weight: bold;
}
.driver-popover-close-btn:hover, .driver-popover-close-btn:focus {
    color: #2d2d2d;
    outline: none !important;
}

.btn-cyan{
    border-color: #1e9ff2 !important;
    background-color: #1e9ff2 !important;
}

.btn-cyan:hover {
    border-color: #1e9ff2 !important;
    background-color: #1e9ff2 !important;
}

.contenedor-subitems-presupuesto {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.caja-presupuesto-subitems1 {
    display: inline-block;
    width: 46%;
}

.caja-presupuesto-subitems2 {
    display: inline-block;
    width: 46%;
}

.caja-presupuesto-subitems3 {
    display: inline-block;
    width: 6%;
    text-align: center;
}

.primera-letra-mayuscula::first-letter {
    text-transform: uppercase !important;
}

.square-button-inicio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 136px;
    min-width: 112px;
    background-color: rgb(255, 255, 255);
    color: #FFFFFF;
    border: 1px solid #EBF4FF;
    border-radius: 12px;
    border-color: #EBF4FF;
    cursor: pointer;
    box-shadow: 0px 2px 8px 0px #EBF4FF;
}

.square-button-inicio:hover {
    border-color: #EBF4FF;
}


.square-button-inicio i {
    font-size: 24px;
    color: #1078FF;
}

.square-button-inicio span {
    font-size: 14px;
    line-height: 21px;
    text-align: center;
    color: #6D7183;
}

.contenedor_inicio {
    margin-top: 32px !important;
}

.contenedor_inicio_div {
    margin-bottom: 24px;
}

.icon_inicio {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    margin-right: 20px;
    border: 1px solid;
    text-align: center;
    padding: 16px 16px 16px 16px;
}

.text_titulo_inicio {
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    text-align: left;
    padding-bottom: 8px;
    color: #6D7183;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

.text_subtitulo_inicio {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
    margin-bottom: 8px;
    color: #C4C4C4;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}

.customizer-close-general{
    width: 36px !important;
    height: 36px !important;
    background: #1078FF;
    padding: 8px !important;
    color: white !important;
    border-radius: 8px;
    box-shadow: 0px 0px 10px 0px #00000040;
    top: 21px;
    right: 22px;
    border-color: #1078FF;
    cursor: pointer;
}

.title-header-general{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mediaDashboard {
    border-bottom: 1px solid #D9D9D9;
    padding-bottom: 16px;
    padding-top: 16px;
}

.buttonAceptar {
    width: 150px;
    height: 56px;
    background: white;
    border: 1px solid #1078FF;
    color: #1078FF;
    box-shadow: 0px 4px 10px 0px #00000026;
}

.search-icon-div{
    position: absolute;
    right: 1px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 12px 12px 12px 0px;
    background: #D9D9D933;
    border: 2px solid #D9D9D9;
}

.search-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.customizer .customizer-content-dash
{
    position: relative;
    height: 73% !important;
    z-index: 999;
}

.customizer .customizer-content-alerta
{
    position: relative;
    height: 84% !important;
    z-index: 999;
}

.icon_alerta {
    width: 48px;
    height: 48px;
    text-align: center;
    padding: 16px 16px 16px 16px;
    border-radius: 12px;
    background: #FF48431A;
    margin-right: 16px;
}

.text_titulo_alerta {
    font-size: 16px;
    font-weight: 700;
    line-height: 26px;
    padding-bottom: 8px;
    color: #6D7183;
}

.text_subtitulo_alerta {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: #6D7183;
}

.reciente_icon1 {
    background: #6871E81A;
    border: 1px solid #6871E8;
}
.reciente_icon2 {
    background: #6D71831A;
    border: 1px solid #6D7183;
}
.reciente_icon3 {
    background: #39DBDB1A;
    border: 1px solid #39DBDB;
}
.reciente_icon4 {
    background: #28D0941A;
    border: 1px solid #28D094;
}
.reciente_icon5 {
    background: #C41FC71A;
    border: 1px solid #C41FC7;
}
.reciente_icon6 {
    background: #FF69001A;
    border: 1px solid #FF6900;
}

.border_recent_icon1{
    color: #6871E8;
}
.border_recent_icon2{
    color: #6D7183;
}
.border_recent_icon3{
    color: #39DBDB;
}
.border_recent_icon4{
    color: #28D094;
}
.border_recent_icon5{
    color: #C41FC7;
}
.border_recent_icon6{
    color: #FF6900;
}

.border_recent_icon1:hover {
    color: #6871E8;
}
.border_recent_icon2:hover {
    color: #6D7183;
}
.border_recent_icon3:hover {
    color: #39DBDB;
}
.border_recent_icon4:hover {
    color: #28D094;
}
.border_recent_icon5:hover {
    color: #C41FC7;
}
.border_recent_icon6:hover {
    color: #FF6900;
}

.favorite-icon {
    position: absolute !important;
    right: 10px !important;
    font-size: 16px !important;
    color: #1078FF;
    opacity: 0 !important;
    cursor: pointer !important;
    transition: color 0.3s !important;
    top: 11px;
}

.favorite-icon:hover {
    color: #1078FF;
}

.favorito-activo {
    color: white !important;
}

.menu-item-p {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.menu-text {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: max-width 0.3s ease;
    max-width: 80%;
}

.menu-item-p:hover .menu-text {
    max-width: 70%;
}

.menu-item-p:hover .favorite-icon {
    opacity: 1 !important;
}

.overlayAcceso {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1045;
}

.cont-lateral-nueva-simulacion {
    min-height: 140px;
    max-height: 100% !important;
    min-width: 300px;
    width: 40%;
    position: fixed;
    z-index: 1001;
    top: 1em;
    right: -91%;
    transition: 0.5s;
    border-radius: 1em;
    background-color: rgba(0, 0, 0, 0.7);
    background-color: white;
    padding: 1rem;
    overflow-y: scroll;
}

.btn-iniciar-simulacion {
    color: #1078FF;
    border: 1px solid #1078FF;
}

.cont-lateral-catalogo-simulaciones {
    position: fixed;
    z-index: 1001;
    top: 1em;
    right: -100%;
    transition: 0.5s;
    border-radius: 1em;
    background-color: rgba(0, 0, 0, 0.7);
    background-color: white;
    padding: 1rem;
}

.custom-licencias {
    border-left: solid 3px #6971E8;
    border-radius: 5px;
}

.custom-vencimiento {
    border-left: solid 3px #FF5A5A;
    border-radius: 5px;
}

.custom-licencias-texto {
    font-size: 1.5rem; 
    font-weight: bold;
    color: #6D7183; 
}

.custom-licencias-icono {
    width: 3rem; 
    height: 3rem; 
    background-color: #6971E81A; 
    border-radius: 0.5rem; 
    font-size: 1rem;
    color: #6971E8;
}


.custom-vencimiento-texto {
    font-size: 1.5rem; 
    font-weight: bold;
    color: #6D7183; 
}

.custom-vencimiento-icono {
    width: 3rem; 
    height: 3rem; 
    background-color: rgba(220, 53, 69, 0.1);
    border-radius: 0.5rem; 
    font-size: 1rem; 
    color: #FF5A5A; 
}

.bg-light-green {
    background-color: #E6FAF3;
}

.text-green {
    color: #28D094;
}

.bg-light-red {
    background-color: #FFECEC;
}

.text-red {
    color: #FF5A5A;
}

.monitoreoConteo-icon-inactivos-container {
    width: 40px !important;
    height: 40px !important;
    border-radius: 20% !important;
    opacity: 0.8 !important; 
    background-color: #FF5A5A1A !important;
}

.monitoreoConteo-icon-inactivos {
    font-size: 18px !important; 
    color: #FF5A5A !important;
}

.monitoreoConteo-icon-activos-container {
    width: 40px !important;
    height: 40px !important;
    border-radius: 20% !important;
    opacity: 0.8 !important; 
    background-color: #28D0941A !important;
}

.monitoreoConteo-icon-activos {
    font-size: 18px !important; 
    color: #28D094 !important;
}

.d-flex.text-custom-cantidad {
    color: #6D7183 !important;
}

.custom-container-calendario {
    background-color: #F5F5F5 !important;
    border-radius: 5px !important;
    padding: 0 10px !important;
    height: 40px !important;
    width: 100% !important;
}

.custom-icon-calendario {
    color: #007BFF !important;
    font-size: 1.2em !important;
    margin-right: 10px !important;
}

.custom-select-calendario {
    background-color: transparent !important;
    box-shadow: none !important;
    font-size: 1em !important;
    color: #495057 !important;
    flex-grow: 1 !important;
    border: none !important;
    border-radius: 0 !important;
    height: 100% !important;
}

.active-users-container-custom {
    font-size: 1.2em !important;
    font-weight: bold !important;
    background-color: #1078FF1A !important;
    color: #1078FF !important;
    padding: 5px 15px !important;
    border-radius: 10px !important;
}

.btn-close-modal-arriba {
    position: absolute;
    z-index: 1;
    top: 6px;
    right: 11px;
    color: white;
    background-color: #1078FF;
    margin-top: 0px;
    padding: 0.5em;
    border-radius: 0.5em;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.3s ease;
}

.ui-select-containerBucadorMapa-vol {
    height: 38px;
    border: 1px solid #ccc; 
    flex-grow: 2;
    border-radius: 10px; /* Bordes redondeados */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Transicion suave para el borde y la sombra */
}

.ui-select-containerBucadorMapa-vol .ui-select-match {
    border: none;
    box-shadow: none;
    border-radius: 10px; /* Bordes redondeados en el contenedor de la seleccion */
}

.ui-select-containerBucadorMapa-vol .ui-select-match,
.ui-select-containerBucadorMapa-vol .ui-select-toggle,
.ui-select-containerBucadorMapa-vol .form-control {
    width: 97% !important;
    padding: 0em !important;
    border: none !important;
    box-shadow: none !important;
    background-color: white !important;
    color: #000;
    height: auto;
    outline: none;
    top: -2px;
    border-radius: 10px; 
}

.ui-select-containerBucadorMapa-vol .ui-select-choices {
    width: 100%;
    height: auto;
    max-height: 300px;
    overflow-x: hidden;
    margin-top: -1px;    
    border: none;
    border-radius: 10px; 
}

.ui-select-containerBucadorMapa-vol:hover {
    border-color: #007bff; 
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.6); 
}

.badge-custom {
    background-color: rgba(189, 189, 189, 0.2) !important; 
    color: #6d7183 !important; 
    border: 1px solid #6d7183; 
    padding: 0.375rem 0.75rem; 
    border-radius: 0.25rem; 
    font-weight: 500; 
}

.separar-iconos {
    gap: 20px !important; /* Aumenta la separacion entre los iconos */
}

#tabla-area-gestion tbody td{
    padding: 8px !important;
    vertical-align: middle !important;
}

#tabla-normas-desempeno tbody td{
    padding: 8px !important;
    vertical-align: middle !important;
}

.conf-sede-sostenibilidad .ui-select-choices{
    max-height: 175px;
}

.main-menu.menu-dark .navigation > li ul li > a{
    white-space: normal;
}

.badge-configurado {
    background-color: #e2fbe2;
    color: #01930c;
    border-color: #01930c;
    border-width: 1px;
    padding: 0.4rem;
    border-style: solid;
    width: 90px;
}

.badge-pendiente {
    background-color: #fff0e1;
    color: #dc5b07;
    border-color: #dc5b07;
    border-width: 1px;
    padding: 0.4rem;
    border-style: solid;
    width: 90px;
}

body.vertical-layout.vertical-menu.menu-expanded .contenedor-form-indicadores-biblioteca {
    width: calc(100% - 25vw);
    top: 0vh;
    min-height: 100%;
}
 
body.vertical-layout.vertical-menu.menu-collapsed .contenedor-form-indicadores-biblioteca {
    width: calc(100% - 25vw);
    top: 0vh;
    min-height: 100%;
}

/* body.vertical-layout.vertical-menu.menu-expanded .contenedor-form-indicadores-biblioteca-detalle {
    width: calc(100% - 60vw);
    top: 0vh;
    min-height: 100%;
} */
 
body.vertical-layout.vertical-menu.menu-collapsed .contenedor-form-indicadores-biblioteca-detalle {
    width: calc(100% - 60vw);
    top: 0vh;
    min-height: 100%;
}

.badge-configurado {
    background-color: #e2fbe2;
    color: #01930c;
    border-color: #01930c;
    border-width: 1px;
    padding: 0.4rem;
    border-style: solid;
    border-radius: 7px;
}

.badge-pendiente {
    background-color: #fff0e1;
    color: #dc5b07;
    border-color: #dc5b07;
    border-width: 1px;
    padding: 0.4rem;
    border-style: solid;
    border-radius: 7px;
}

#tabla-atributos-indicador tbody tr td:nth-child(1){
    text-align: center;
    vertical-align: middle;
}

.th-foot-tabla-acciones th {
    color: #1e9ff2a3;
}

#tabla-atributos-indicador .ui-select-bootstrap4>.ui-select-choices,
.ui-select-bootstrap4>.ui-select-no-choice {
    position: initial !important;
    max-height: 195px;
}

#tabla-atributos-indicador tbody tr td:not(:first-child){
    min-width: 200px;
    max-width: 200px;
}


.tour {
    z-index: 1049;
}

.paddingCustomizer{
    padding-left: 40px; padding-right: 40px;
}

.text-aviso-seccion{
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0%;
    color: #6D7183;
}

.text-titulo-seccion{
    font-size: 24px; 
    font-weight: 600;
    line-height: 36px;
}
.badge-porcentaje-lto {
    display: inline-flex !important; 
    align-items: center !important;
    padding: 6px 12px !important; 
    border-radius: 8px !important; 
    background-color: #6971E81A !important;
    color: #6971E8 !important; 
    white-space: nowrap !important;
    width: fit-content !important; 
    font-weight: normal !important; 
}

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

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

.custom-datepicker {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;  
    border: 1px solid #ced4da; 
    padding: 8px;
}

.input-date {
    border-radius: 0.8rem !important;
    padding-right: 6rem
}
 
.label-date {
    position: absolute;
    right: 0;
    z-index: 100;
    height: 100%;
}

body.vertical-layout.vertical-menu.menu-expanded .contenedor-form-cargues-masivos-operatividad,
body.vertical-layout.vertical-menu.menu-collapsed .contenedor-form-cargues-masivos-operatividad {
    width: calc(100% - 30vw);
    max-width: 70vw;
    top: 0;
    min-height: 100vh;
}

@media (max-width: 768px) {
    body.vertical-layout.vertical-menu.menu-expanded .contenedor-form-cargues-masivos-operatividad,
    body.vertical-layout.vertical-menu.menu-collapsed .contenedor-form-cargues-masivos-operatividad {
        width: 100% !important;
        max-width: 100vw !important;
    }
}

.btn-acciones {
    border: 0.1em solid #ccc;
}

.icon_estados {
    width: 15px;
    height: 15px;
    border-radius: 12px;
    margin-right: 20px;
    border: 1px solid;
    text-align: center;
    padding: 16px 16px 16px 16px;
}

.dashboardNoWrap {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto; 
}

.info-adicional-container {
    display: flex;
    flex-wrap: nowrap; 
    justify-content: center; 
    align-items: center;
    gap: 10px; 
  }
    
  .info-adicional-container .col-md-4 {
    width: auto !important;
    flex: 0 0 auto;
    max-width: none;
  }
  
  
@media (max-width: 1590px) {
    .dashboardExclusivo .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }

    .dashboardExclusivo .item_card span,
    .dashboardExclusivo .fw-bold,
    .dashboardExclusivo .text-muted,
    .dashboardExclusivo .card-body,
    .dashboardExclusivo .custom-select-calendario,
    .dashboardExclusivo .form-control {
        font-size: 0.9rem;
    }

    .dashboardExclusivo #grafico1,
    .dashboardExclusivo #grafico2 {
        height: auto !important;
    }

    .dashboardExclusivo .card,
    .dashboardExclusivo .item_card {
        padding: 10px;
}
}

#tabla-atributos-indicador tr th:nth-child(n):not(:nth-child(1)){
    max-width: 350px;
    min-width: 350px;
    width: 350px;
    white-space: normal;
}

#tabla-atributos-indicador tr th:nth-child(1){
    max-width: 40px;
    min-width: 40px;
    width: 40px;
    white-space: normal;
}

.ui-select-multiple.ui-select-bootstrap4 input.ui-select-search{
    margin-bottom: 0px;
    padding: 0px 10px;
}

input::placeholder {
    color: #D9D9D9;
}

.ui-select-bootstrap4 .ui-select-placeholder{
    color: #D9D9D9 !important;
}


#formulairoReporteSostenibilidad .form-control{
    border: 1px solid #D9D9D9;
}

.page-item{
    padding: 0px 3px;
}

.previous a, .next  a{
    background-color: #F5F5F5 !important;
    border: none !important;
    padding: 8px 16px;
}

.paginate_button a{
    border-radius: 5px;
}

.page-item.active .page-link{
    border-color: #1078FF;
    background-color: #1078FF !important;
}

.pagination .page-link {
    color: #6D7183;
    border: none;
    background-color: #F5F5F5 !important;
}

/* Tabla sin bordes */

.table {
    border: none !important;
}

.table thead, .table tr, .table th, .table td{
    border: none !important;
    border-color: transparent !important;
    border-collapse: initial !important;
    border-spacing: initial !important;
}

/* table.dataTable.table-striped>tbody>tr:nth-of-type(2n+1) {
    background-color: #F8F8F8 !important;
    border-radius: 10px !important;
} */

table.dataTable.table-striped>tbody>tr.odd>*{
    box-shadow: none;
}

table.dataTable.compact tbody td{
    padding: 20px;
}

table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) {
    background-color: #F8F8F8; /* Color para filas impares */
}

/* Aplicar border-radius a las primeras y ultimas celdas de las filas impares */
table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) td:first-child {
    border-top-left-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
}

table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) td:last-child {
    border-top-right-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}

form .form-control.datepicker {
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

.table .form-control, form .form-control {
    border: 1px solid #E9E9E9 !important;
    border-radius: 8px !important;
    /* padding: 19px 10px !important; */
}

.input-sm{
    padding: 19px 10px !important;
}

div.dataTables_wrapper div.dataTables_filter input{
    padding: 9px 10px !important;
    border-radius: 8px;
}

.ui-select-match-item {
    color: #fff;
    border-color: #D9D9D9 !important;
    background-color: #1078ff26 !important;
    color: black;
    border-radius: 10px;
}

.ui-select-bootstrap4{
    border: none !important;
    background-color: transparent !important;
}

.ui-select-multiple{
    border: 1px solid #E9E9E9 !important;
    border-radius: 8px !important;
    background-color: white !important;
}

/* Tabla con borde */

.table-border {
    border: 1px solid #D9D9D9 !important;
    /* border-radius: 12px; */
}

.table-border thead, .table-border tr, .table-border th, .table-border td{
    border: 1px solid #d9d9d969  !important;
    border-color: #d9d9d969  !important;
    border-collapse: initial !important;
    border-spacing: initial !important;
    border-bottom-width: 0 !important;
    border-left-width: 0 !important;
}

.table-border.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) td:first-child {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}
.table-border.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) td:last-child {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

#tabla-conf-graficas tbody tr td:nth-child(2){
    width: 400px;
    max-width: 400px;
}

.tooltip-pqr a {
    color: blue !important;
    vertical-align: top;
}

.select-redondo *:not(.ui-select-choices-row.active > span) {
    border-radius: 12px !important;
}
   
.select-redondo .btn-secondary {
    background-color: transparent !important;
    color: #000 !important; 
    box-shadow: none !important;
}
 
.general-option-checkbox > input {
    margin-top: 3px !important; 
    width: 20px !important; 
    height: 20px !important;
}

.checkbox-custom {
    margin-top: 3px;
    width: 20px;
    height: 20px;
}

.checkbox-label {
    margin-top: 3px;
    margin-left: 0.5vw;
    margin-top: 0.2vw;
}

.config-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 10px;
}
.config-table td, .config-table th {
    padding: 10px;
}

#selectDasgboardIntegraciones .btn.dropdown-toggle.ui-select-toggle {
    background-color: #F5F5F5 !important;
}

#selectDasgboardIntegraciones .ui-select-placeholder {
    background-color: #F5F5F5 !important;
}

#selectDasgboardIntegraciones .ui-select-match-text {
    background-color: #F5F5F5 !important;
}

body.vertical-layout.vertical-menu.menu-expanded .contenedor-form-filtros {
    width: calc(100% - 65vw);
    top: 0vh;
    min-height: 100%;
}

.contenedor-form-filtros .form-group .ui-select-container {
    margin-bottom: 24px;
}

.margin-top-modal-filtros {
    margin-top: 18rem; 
}

.card-shadow-bottom {
    border: 1px solid #ededed;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.card-contenider-ods {
    border-radius: 1rem;
    box-shadow: 0px 2px 10px rgba(218, 235, 255, 0.8);
}

.card-picture-img {
    object-fit: cover;
    border-radius: 1rem;
}

#tabla-configurar-indicadores tr th:nth-child(8){
    max-width: 300px;
    min-width: 300px;
    width: 300px;
    white-space: normal;
}


.input-disabled {
    background-color: #d6d6d6 !important;
    color: #212529;
}

.form-control.ui-special-group.ui-select-disabled span.btn-secondary,
.form-control.ui-special-group.ui-select-disabled span.btn-secondary:hover {
    background-color: #e9ecef !important;
    color: #6c757d !important;
}

.borde-seguimiento {
    border: none;
}

.borde-seguimiento .celda-seguimiento {
    border-right: 1px solid #ced4da;
}

.text-break {
    overflow-wrap: break-word;
    word-break: break-word;
}

.reporte-autoevaluacion {
    border-top: 1px solid #e3ebf3 !important;
    border-bottom: 2px solid #e3ebf3 !important;
    background-color: #1e9ff2;
}

.form-control.ui-special-group.ui-select-disabled span.btn-secondary::after {
    content: none !important;
}

.ui-select-bootstrap4 .select-autoevaluacion .ui-select-match-text {
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    text-overflow: clip !important;
    padding-right: 0 !important;
    text-align: center !important;
    display: block !important;
}

#contenedor-mapa1 {
    background: rgb(59, 61, 60);
    height: 100%;
    width: 100%;
    padding: 0;
    position: fixed;
    transition: width 0.5s cubic-bezier(.46, .03, .52, .96);
    transition: height 0.5s cubic-bezier(.46, .03, .52, .96);
}

#contenedor-mapa2 {
    background: rgb(59, 61, 60);
    height: 100%;
    width: 100%;
    padding: 0;
    position: fixed;
    transition: width 0.5s cubic-bezier(.46, .03, .52, .96);
    transition: height 0.5s cubic-bezier(.46, .03, .52, .96);
}

.selects-dashboard-integraciones {
    min-width: 350px;
}

#contenedor-mapa3 {
    background: rgb(59, 61, 60);
    height: 100%;
    width: 100%;
    padding: 0;
    position: fixed;
    transition: width 0.5s cubic-bezier(.46, .03, .52, .96);
    transition: height 0.5s cubic-bezier(.46, .03, .52, .96);
}
.centrar-contenido div {
    display: flex;
    align-items: center;
    gap: 10px;
}
.select-table {
    max-width: 95%;
}

.legend_map {
    display: inline-flex;
    align-items: center;
    background: white;
    padding: 4px 8px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    font-size: 14px;
    font-family: Arial, sans-serif;
    position: relative; 
}

.legend_map_box {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    margin-right: 6px;
}

.legend_map::after {
    content: "";
    position: absolute;
    bottom: -8px;  
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid white; 
}

/* Estilos responsivos mejorados para reportes guardados */
@media screen and (max-width: 1199px) {
    /* Para moviles - diseño completamente adaptado */
    .nav-vertical .nav-tabs.nav-left {
        flex-direction: column !important;
        margin-bottom: 1rem;
        background: #f8f9fa;
        border-radius: 0.5rem;
        padding: 0.5rem;
    }
    
    .nav-vertical .nav-tabs.nav-left .nav-item {
        margin-bottom: 0.25rem;
        width: 100%;
    }
    
    .nav-vertical .nav-tabs.nav-left .nav-link {
        width: 100%;
        text-align: center;
        padding: 0.75rem;
        border-radius: 0.375rem;
        font-weight: 600;
        transition: all 0.2s ease;
    }
    
    .nav-vertical .nav-tabs.nav-left .nav-link.active {
        background-color: #007bff;
        color: white !important;
        transform: scale(1.02);
    }
    
    /* Cards optimizadas para movil */
    
    .card {
        margin-bottom: 1rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .card-body .media {
        flex-direction: column;
        align-items: center !important;
        text-align: center;
    }
    
    .card-body .media-body {
        margin-left: 0 !important;
        margin-top: 1rem;
        width: 100%;
    }
    
    .card-body h4 {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }
    
    .card-body h6 {
        font-size: 0.85rem;
        margin-bottom: 0.25rem;
    }
    
    .bg-primary.bg-accent-2 {
        margin-bottom: 1rem;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .card-footer {
        padding: 1rem;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .card-footer a {
        margin: 0 !important;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        text-decoration: none;
        display: block;
        text-align: center;
        transition: all 0.2s ease;
    }
    
    .card-footer a:hover {
        background-color: #e9ecef;
        transform: translateY(-1px);
    }
    
    .ml-5 {
        margin-left: 0 !important;
    }
    
    /* Mejorar campo de busqueda en movil */
    
    .input-group {
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        border-radius: 0.5rem;
        overflow: hidden;
    }
    
    .form-control {
        font-size: 16px;
    }
    
    .input-group-text {
        background-color: #007bff;
        color: white;
        border: none;
    }

    .separador-dash-ventana {
        height: 12%;
    }

    @media (max-width: 1024px) and (min-width: 768px) {
        .customizer {
            width: 60%;
            right: -60%;
        }

        .separador-dash-ventana {
            height: 12%;
        }
    }

    @media (max-width: 767.98px) {
        .customizer {
            width: 100%;
            right: -100%;
            border-left: none;
        }
    }
}