@font-face {
    font-family: 'araboto normal 400';
    src: url('../font/araboto normal 400.ttf') format('truetype');
}
@font-face {
    font-family: 'araboto bold 400';
    src: url('../font/araboto bold 400.ttf') format('truetype');
}
@font-face {
    font-family: 'roboto-bold_0';
    src: url('../font/roboto-bold_0.ttf') format('truetype');
}
html, body {
    font-family: 'Quicksand', sans-serif;
    
}

.TituloCardBtn {
    background-color: #6F6C6E;
    color: #DAAE4E;
    border-radius: 2rem;
    width: 100%;
    font-family: 'roboto-bold_0';
    font-size: 1.2rem;
}
.flex-col {
    flex-direction: column; 
}
.displaynone
{
    display:none !important;
}
#Indef {
    color: #299cdb;
    font-weight: 600;
}
#Female {
    color: #405189;
    font-weight: 600;
}
#Male {
    color: #DAAE4E;
    font-weight: 600;
}
.borde-superior {
    width: 95%;
    border-top: 1px solid white;
    margin: 0 auto;
}

body {
    margin-bottom: 0px;
    margin-top: 0px;
    margin-left: 0px;
    padding-right: 0px;
    width: 100vw;
    background-color: #e0e0e0;
    overflow-x: hidden;
    color: #6f6c6e;
}

.btnconsulta {
    background-color: #DAAE4E !important;
    color: white !important;
    border-radius: 2rem;
}
    .btnconsulta:hover {
        background-color: #c78c0d !important;
        color: white !important;
    }
.btnconsultaInegi {
    background-color: white !important;
    color: white !important;
    border-radius: 2rem;
    border-color: black;
}

    .btnconsultaInegi:hover {
        background-color: #d9d8d8 !important;
        color: white !important;
    }

.TextMapa
{
    font-size:1.2rem !important;
    font-weight: 500 !important;
}
main {
}

.btnIndicadores {
    background: #DAAE4E !important;
    color: white !important;
    border-color: transparent !important;
    border-radius: 1rem !important;
}

.dx-fa-button-icon, .dx-fa-button-icon-close {
    text-align: center;
}
#TextoIconoFaltas
{
    display:none;
}
#contenidoFaltas {
    position: absolute !important;
    background-color: #8f8f8fba !important;
    color: white !important;
    width: 320px !important;
    overflow-y: auto;
    text-align: center !important;
    max-height: calc(100vh - 74%);
    border-radius: 2rem !important;
    top: 26% !important;
    left: calc(100vw - 358px) !important;
}

    #contenidoFaltas h5 {
        margin-bottom: 0 !important;
        margin-top: 5px !important;
    }

    #contenidoFaltas p {
        font-size: 30px !important;
    }
/*.navbarcustom {
    display: flex;
    align-items: center;
    height:100%;*/
    /*position: relative;*/
    /*justify-content: space-between;*/
    /*padding: 20px;*/
    /*top: 0;
    right:0;
    background-color: transparent;*/
/*    height: 120px;*/
    /*margin-bottom:28px;*/
    /*padding: 0;*/
    /*margin: 0;*/
    /*width: 100vw;*/
/*}


.navbarcustom-container {
    display: flex;
    width: 100%;
    height: 100%;
    padding:0px;
}

.navbarcustom-title {
    align-self: end;
    height:100px;
    padding:0;
    margin:0;
}*/

#btnDefinicionIndicadoresColonia {
    background-color: transparent;
    border-color: transparent;
}

#MFichaSocioeconomicaColonia .modal-header {
    background: #6f6c6e;
    COLOR: WHITE;
    text-align: center;
    font-weight: 500;
}
}
.navcustom-logos {
    display: flex;
    margin: 0px;
    padding: 0px;
    /* width:100vw;*/
    /*height:100vh;*/
    justify-content: center;
    /*    width: 100%;
    height: 100%;*/
}


    .navbarcustom-title h2 {
        font-size: 45px;
        text-align: unset;
    }



.navbarcustom-navegacion {
    display: grid;
    grid-template-columns: 320px 320px 320px 320px 170px 190px;
    /*grid-auto-columns:290px;*/
    grid-auto-flow: column;
    column-gap: 0px;
    align-content: center;
}

.navbarcustom-item{
    text-align:center;
}

.container-search {
    position:relative;
    align-self: center;
    padding-left: 15px;
    padding-right: 0px;
}

.searchbar {
    width: 100%;
    height: 40px;
    border-color: black;
    border-style: solid;
    background-color: #25385a;
    margin: auto;
    color: white;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    padding: 2px 25px 2px 35px;
}

.search-icon {
    position: absolute;
    top: 10px;
    left: 22px;
    width: 14px;
    width: 30px;
    height: 30px;
    color: #757474;
}

.searchbar:hover, .searchbar:focus {
    border: 1.5px solid #009688;
    background-color: #1c3055;
}

.container-navegacion-iconos{
    padding:0px;
}

.navegacion-iconos {
    display: flex;
    width: inherit;
    height: inherit;
    /*align-self:center;*/
}

.item-icon-navegacion {
    margin: 3px auto 1px auto;
    border: 1px solid #3b6292;
    border-radius: 5px;
    padding: 2px;
    background-color: #3b6292;
    color: white;
    cursor: pointer;
    width: 45px;
}
.BotonFlecha {
    cursor: pointer; 
}
.card h5
{
    margin-top:15px;
}
.mapa {
    width: 100%;
    height: 807px !important;
    padding: 0;
    justify-self: end;
    margin-right: 30px !important;
    border: 2px solid #c0c0c0;
}
.DivFiltrosContent {
    margin-left: 10px;
    margin-right: 10px;
    
}
.iconoVialidad1
{
    width: 50px;
}

.expandido {
    transform: scale(1.2);
    position:relative;
    z-index: 100;
}
.expandidoLeft {
    transform: scale(1.2);
    position: relative;
    z-index: 100;
    left: 77px;
}
.expandidoDouble {
    transform: scale(1.2);
    position: relative;
    z-index: 100;
    right: 127px;
}
.expandidoRight{
    transform: scale(1.2);
    position: relative;
    z-index: 100;
    right: 100px;
}



.expandido2 {
    transform: scale(1.2);
    position: relative;
    z-index: 100;
    right:75px;
}
.expandidoLeft4 {
    transform: scale(1.2);
    position: relative;
    z-index: 100;
}
.expandidoLeft2 {
    transform: scale(1.2);
    position: relative;
    z-index: 100;
    left: 155px;
}
.expandidoLeft3 {
    transform: scale(1.2);
    position: relative;
    z-index: 100;
    left: -67px;
}
.expandidoDouble2 {
    transform: scale(1.2);
    position: relative;
    z-index: 100; 
}

.expandidoRight2 {
    transform: scale(1.2);
    position: relative;
    z-index: 100; 
}

.Filtros {
    /*background-color: #DAAE4E;*/
    margin-bottom: 15px;
}
    .Filtros input[type='checkbox'] {
        display: block;
        width: 17px;
        height: 20px;
    }
    .Filtros h3 {
        font-weight: 600;
        color: #6f6c6e;
    }
    .Filtros p {
        font-weight: 500;
        color: #6f6c6e;
        font-family: 'araboto normal 400';
    }
    .Filtros label {
        font-family: 'araboto normal 400';
        font-weight: 400;
        color: #6f6c6e;
    }
.btnOpcionesFiltros {
    background: #DAAE4E;
    color: white;
    border-color: transparent;
    border-radius: 1rem; 
    width: 70%;
    margin-bottom:20px;
}

.btnConsulta {
    background-color: #6F6C6E;
    color: #DAAE4E;
    border-color: transparent;
    border-radius: 1rem;
    margin-bottom: 10px;
    float: inline-end;
}
    .btnConsulta:hover
    {
        color:white;
    }
     
    .btnDescargarFiltro {
        background: white;
        color: #6f6c6e;
        border-color: transparent;
        border-radius: 1rem;
        width: 70%;
        font-weight: 700;
    }
.DivIconos {
    font-size: .9rem !important;
    font-weight: 600 !important;
}
.iconoVialidad1 {
    width: 80px;
}
.cantidadText
{
    font-size: 2rem;
}
.BotonesFiltros {
    background-color: #6F6C6E;
    padding: 10px;
    border-radius: 2rem 0rem 0rem 0rem;
    padding-top: 25px;
    justify-content: center;
    margin-top: 20px;
    padding-bottom: 30px;
}

.textInput
{
    font-size: 1.3rem;
}
.InputFecha {
    width: 40%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #6f6c6e;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15sease-in-out, box-shadow 0.15sease-in-out;
}

.card {
    width: 95%;
    text-align: center;
    margin-left: 10px; 
}

#float {
    display: none !important;
    background-color: transparent;
    position: fixed;
    /*top: 150px;*/
    right: 0;
    z-index: 1;
    width: 450px;
    margin-right: 5px;
    height: 500px;
    transition: 0.4s;
}

#floatIzquierdo {
    background-color: #5E3062;
    position: fixed;
    top: 115px;
    left: calc(100vw - 320px);
    z-index: 1;
    width: 300px;
    margin-right: 5px;
    margin-top: 40px;
    height: 500px;
    transition: 0.4s;
    border-radius: 2%;
    color: white;
    padding: 10px;
    border: 2px solid #457199;
    display:none !important;
}

.float-panel {
    /*background-color: #395f90;*/
    background: -webkit-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -moz-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -ms-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -o-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    /*background: linear-gradient(to #457199, #2e4e88);*/
    color: white;
    margin: 10px;
    padding: 10px;
    border: 2px solid #457199;
    border-radius: 2%
}

.panel-semaforo {
    display:flex;
    width: 200px;
    height: 100px;
    background-color: transparent;
    margin-left:10px;
}

/*#region Semaforo Verde*/


.panel-indicador-semaverde {
    width: 20px;
    height: 80px;
    border-color: #006837;
    border-style: solid;
    border-radius: 10%;
    background-color: #006837;
    margin: auto, auto, auto, 15px;
    clip-path: polygon(0% 0%, 7% 0, 70% 50%, 13% 100%, 0% 100%);
}

.panel-contenedor-semaverde {
    width: 100px;
    height: 60px;
    border-color: #006837;
    border-style: solid;
    border-radius: 10%;
    background-color: #006837;
    margin-left:15px;
    margin-right:5px;
    margin-top:10px;
}
    .panel-contenedor-semaverde:before {
        content: "";
        position: absolute;
        right: 72%;
        top: 25px;
        width: 0px;
        height: 0px;
        border-top: 15px solid transparent;
        border-right: 15px solid #006837;
        border-bottom: 15px solid transparent;
    }

/*#endregion Semaforo Verde*/

/*#region Semaforo Verde Medio*/

.panel-indicador-semaverdem {
    width: 20px;
    height: 80px;
    border-color: #049243;
    border-style: solid;
    border-radius: 10%;
    background-color: #049243;
    margin: auto, auto, auto, 15px;
    clip-path: polygon(0% 0%, 7% 0, 70% 50%, 13% 100%, 0% 100%);
}

.panel-contenedor-semaverdem {
    width: 100px;
    height: 60px;
    border-color: #049243;
    border-style: solid;
    border-radius: 10%;
    background-color: #049243;
    margin-left: 15px;
    margin-right: 5px;
    margin-top: 10px;
}

    .panel-contenedor-semaverdem:before {
        content: "";
        position: absolute;
        right: 72%;
        top: 125px;
        width: 0px;
        height: 0px;
        border-top: 15px solid transparent;
        border-right: 15px solid #049243;
        border-bottom: 15px solid transparent;
    }

/*#endregion Semaforo Verde Medio*/

/*#region Semaforo Verde Bajo*/

.panel-indicador-semaverdeb {
    width: 20px;
    height: 80px;
    border-color: #37b448;
    border-style: solid;
    border-radius: 10%;
    background-color: #37b448;
    margin: auto, auto, auto, 15px;
    clip-path: polygon(0% 0%, 7% 0, 70% 50%, 13% 100%, 0% 100%);
}

.panel-contenedor-semaverdeb {
    width: 100px;
    height: 60px;
    border-color: #37b448;
    border-style: solid;
    border-radius: 10%;
    background-color: #37b448;
    margin-left: 15px;
    margin-right: 5px;
    margin-top: 10px;
}

    .panel-contenedor-semaverdeb:before {
        content: "";
        position: absolute;
        right: 72%;
        top: 225px;
        width: 0px;
        height: 0px;
        border-top: 15px solid transparent;
        border-right: 15px solid #37b448;
        border-bottom: 15px solid transparent;
    }

/*#endregion Semaforo Verde Bajo*/


/*#region Semaforo Amarillo*/

.panel-indicador-semaamarillo {
    width: 20px;
    height: 80px;
    border-color: #fcaf38;
    border-style: solid;
    border-radius: 10%;
    background-color: #fcaf38;
    margin: auto, auto, auto, 15px;
    clip-path: polygon(0% 0%, 7% 0, 70% 50%, 13% 100%, 0% 100%);
}

.panel-contenedor-semaamarillo {
    width: 100px;
    height: 60px;
    border-color: #fcaf38;
    border-style: solid;
    border-radius: 10%;
    background-color: #fcaf38;
    margin-left: 15px;
    margin-right: 5px;
    margin-top: 10px;
}

    .panel-contenedor-semaamarillo:before {
        content: "";
        position: absolute;
        right: 72%;
        top: 325px;
        width: 0px;
        height: 0px;
        border-top: 15px solid transparent;
        border-right: 15px solid #fcaf38;
        border-bottom: 15px solid transparent;
    }

/*#endregion Semaforo Amarillo*/

/*#region Semaforo Rojo*/

.panel-indicador-semarojo {
    width: 20px;
    height: 80px;
    border-color: #ed1720;
    border-style: solid;
    border-radius: 10%;
    background-color: #ed1720;
    margin: auto, auto, auto, 15px;
    clip-path: polygon(0% 0%, 7% 0, 70% 50%, 13% 100%, 0% 100%);
}

.panel-contenedor-semarojo {
    width: 100px;
    height: 60px;
    border-color: #ed1720;
    border-style: solid;
    border-radius: 10%;
    background-color: #ed1720;
    margin-left: 15px;
    margin-right: 5px;
    margin-top: 10px;

}

    .panel-contenedor-semarojo:before {
        content: "";
        position: absolute;
        right: 72%;
        top: 425px;
        width: 0px;
        height: 0px;
        border-top: 15px solid transparent;
        border-right: 15px solid #ed1720;
        border-bottom: 15px solid transparent;
    }

/*#endregion Semaforo Rojo*/

.panel-2 {
    height: 150px;
}
.panel-3 {
    height: 300px;
}

#ModalFaltas input[type='checkbox'] {
    display: block;
}
input[type='checkbox'] {
    display: none;
}

.wrap-collabsible {
    margin: 8px 0;
   
}

/*#region Panel 1*/

.lbl-toggle {
    display: block;
    /*font-weight: bold;*/
    font-family: monospace;
    font-size: 1.2rem;
    text-transform: uppercase;
    text-align: start;
    padding: 1rem;
    margin-bottom: 0px;
    /*color: #A77B0E;*/
    color: #417272;
    /*background: #FAE042;*/
   /* background: -webkit-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -moz-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -ms-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -o-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: linear-gradient(90deg, #457199 60%, #2e4e88 90%);*/
   background-color:white;
    cursor: pointer;
    border-radius: 7px;
    transition: all 0.25s ease-out;
}

    .lbl-toggle:hover {
        /*color: #7C5A0B;*/
        color: #255a5a;
    }

    .lbl-toggle::before {
        content: ' ';
        display: inline-block;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 5px solid currentColor;
        vertical-align: middle;
        margin-right: .7rem;
        transform: translateY(-2px);
        transition: transform .2s ease-out;
    }

.collapsible-content .content-inner {
    /*background: rgba(250, 224, 66, .2);*/
    /*background: -webkit-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -moz-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -ms-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -o-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: linear-gradient(90deg, #457199 60%, #2e4e88 90%);*/
    background-color:white;
    border-bottom: 1px solid rgba(250, 224, 66, .45);
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    padding: .5rem 1rem;
    color: white;
}

.collapsible-content {
    max-height: 0px;
    overflow: hidden;
    transition: max-height .25s ease-in-out;
}

.toggle:checked + .lbl-toggle + .collapsible-content {
    max-height: 100vh;
}

.toggle:checked + .lbl-toggle::before {
    transform: rotate(90deg) translateX(-3px);
}

.toggle:checked + .lbl-toggle {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

/*#endregion RegionName*/

/*#region Panel 2*/
.lbl-toggle2 {
    display: block;
    /*font-weight: bold;*/
    font-family: monospace;
    font-size: 1.2rem;
    text-transform: uppercase;
    text-align: start;
    padding: 1rem;
    margin-bottom: 0px;
    /*color: #A77B0E;*/
    color: #417272;
    /*background: #FAE042;*/
    /*    background: -webkit-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -moz-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -ms-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -o-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: linear-gradient(90deg, #457199 60%, #2e4e88 90%);*/
    cursor: pointer;
    border-radius: 7px;
    transition: all 0.25s ease-out;
}

    .lbl-toggle2:hover {
        /*color: #7C5A0B;*/
        color: #255a5a;
    }

    .lbl-toggle2::before {
        content: ' ';
        display: inline-block;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 5px solid currentColor;
        vertical-align: middle;
        margin-right: .7rem;
        transform: translateY(-2px);
        transition: transform .2s ease-out;
    }

.collapsible-content2 .content-inner2 {
    /*background: rgba(250, 224, 66, .2);*/
    /*    background: -webkit-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -moz-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -ms-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -o-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: linear-gradient(90deg, #457199 60%, #2e4e88 90%);*/
    background-color: white;
    border-bottom: 1px solid rgba(250, 224, 66, .45);
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    padding: .5rem 1rem;
    color: #417272;
}

.collapsible-content2 {
    max-height: 0px;
    overflow: hidden;
    transition: max-height .25s ease-in-out;
}

.toggle2:checked + .lbl-toggle2 + .collapsible-content2 {
    max-height: 100vh;
}

.toggle2:checked + .lbl-toggle2::before {
    transform: rotate(90deg) translateX(-3px);
}

.toggle2:checked + .lbl-toggle2 {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
/*#endregion Panel 2*/

/*#region Panel 3*/
.lbl-toggle3 {
    display: block;
    /*font-weight: bold;*/
    font-family: monospace;
    font-size: 1.2rem;
    text-transform: uppercase;
    text-align: start;
    padding: 1rem;
    margin-bottom: 0px;
    /*color: #A77B0E;*/
    color: white;
    /*background: #FAE042;*/
    background: -webkit-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -moz-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -ms-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -o-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    cursor: pointer;
    border-radius: 7px;
    transition: all 0.25s ease-out;
}

    .lbl-toggle3:hover {
        /*color: #7C5A0B;*/
        color: white;
    }

    .lbl-toggle3::before {
        content: ' ';
        display: inline-block;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 5px solid currentColor;
        vertical-align: middle;
        margin-right: .7rem;
        transform: translateY(-2px);
        transition: transform .2s ease-out;
    }

.collapsible-content3 .content-inner3 {
    /*background: rgba(250, 224, 66, .2);*/
    background: -webkit-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -moz-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -ms-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -o-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    border-bottom: 1px solid rgba(250, 224, 66, .45);
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    padding: .5rem 1rem;
    color: white;
}

.collapsible-content3 {
    max-height: 0px;
    overflow: hidden;
    transition: max-height .25s ease-in-out;
}

.toggle3:checked + .lbl-toggle3 + .collapsible-content3 {
    max-height: 100vh;
}

.toggle3:checked + .lbl-toggle3::before {
    transform: rotate(90deg) translateX(-3px);
}

.toggle3:checked + .lbl-toggle3 {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
/*#endregion Panel 3*/

/*#region Panel 4*/
.lbl-toggle4 {
    display: block;
    /*font-weight: bold;*/
    font-family: monospace;
    font-size: 1.2rem;
    text-transform: uppercase;
    text-align: start;
    padding: 1rem;
    margin-bottom: 0px;
    /*color: #A77B0E;*/
    color: white;
    /*background: #FAE042;*/
    background: -webkit-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -moz-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -ms-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -o-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    cursor: pointer;
    border-radius: 7px;
    transition: all 0.25s ease-out;
}

    .lbl-toggle4:hover {
        /*color: #7C5A0B;*/
        color: white;
    }

    .lbl-toggle4::before {
        content: ' ';
        display: inline-block;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 5px solid currentColor;
        vertical-align: middle;
        margin-right: .7rem;
        transform: translateY(-2px);
        transition: transform .2s ease-out;
    }

.collapsible-content4 .content-inner4 {
    /*background: rgba(250, 224, 66, .2);*/
    background: -webkit-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -moz-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -ms-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -o-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    border-bottom: 1px solid rgba(250, 224, 66, .45);
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    padding: .5rem 1rem;
    color: white;
}

.collapsible-content4 {
    max-height: 0px;
    overflow: hidden;
    transition: max-height .25s ease-in-out;
}

.toggle4:checked + .lbl-toggle4 + .collapsible-content4 {
    max-height: 100vh;
}

.toggle4:checked + .lbl-toggle4::before {
    transform: rotate(90deg) translateX(-3px);
}

.toggle4:checked + .lbl-toggle4 {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
/*#endregion Panel 4*/

/*#region Panel 5*/
.lbl-toggle5 {
    display: block;
    /*font-weight: bold;*/
    font-family: monospace;
    font-size: 1.2rem;
    text-transform: uppercase;
    text-align: start;
    padding: 1rem;
    margin-bottom: 0px;
    /*color: #A77B0E;*/
    color: #417272;
    /*background: #FAE042;*/
    /*    background: -webkit-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -moz-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -ms-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -o-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: linear-gradient(90deg, #457199 60%, #2e4e88 90%);*/
    background-color:white;
    cursor: pointer;
    border-radius: 7px;
    transition: all 0.25s ease-out;
}

    .lbl-toggle5:hover {
        /*color: #7C5A0B;*/
        color: #255a5a;
    }

    .lbl-toggle5::before {
        content: ' ';
        display: inline-block;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 5px solid currentColor;
        vertical-align: middle;
        margin-right: .7rem;
        transform: translateY(-2px);
        transition: transform .2s ease-out;
    }

.collapsible-content5 .content-inner5 {
    /*background: rgba(250, 224, 66, .2);*/
    /*    background: -webkit-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -moz-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -ms-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -o-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: linear-gradient(90deg, #457199 60%, #2e4e88 90%);*/
    border-bottom: 1px solid rgba(250, 224, 66, .45);
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    padding: .5rem 1rem;
    color: #417272;
}
#tablaleyendas {
    color: #417272 !important;
}
.collapsible-content5 {
    max-height: 0px;
    overflow: hidden;
    transition: max-height .25s ease-in-out;
}

.toggle5:checked + .lbl-toggle5 + .collapsible-content5 {
    max-height: 100vh;
}

.toggle5:checked + .lbl-toggle5::before {
    transform: rotate(90deg) translateX(-3px);
}

.toggle5:checked + .lbl-toggle5 {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
/*#endregion Panel 5*/

/*#region Panel 6*/
.lbl-toggle6 {
    display: block;
    /*font-weight: bold;*/
    font-family: monospace;
    font-size: 1.2rem;
    text-transform: uppercase;
    text-align: start;
    padding: 1rem;
    margin-bottom: 0px;
    /*color: #A77B0E;*/
    color: #417272;
    /*background: #FAE042;*/
/*    background: -webkit-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -moz-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -ms-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -o-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: linear-gradient(90deg, #457199 60%, #2e4e88 90%);*/
    background-color: white;
    cursor: pointer;
    border-radius: 7px;
    transition: all 0.25s ease-out;
}

    .lbl-toggle6:hover {
        /*color: #7C5A0B;*/
        color: #255a5a;
    }

    .lbl-toggle6::before {
        content: ' ';
        display: inline-block;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 5px solid currentColor;
        vertical-align: middle;
        margin-right: .7rem;
        transform: translateY(-2px);
        transition: transform .2s ease-out;
    }

.collapsible-content6 .content-inner6 {
    /*background: rgba(250, 224, 66, .2);*/
    /*    background: -webkit-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -moz-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -ms-linear-gradient(90deg, #457199 60%, #2e4e88 90%);
    background: -o-linear-gradient(90deg, #457199 60%, #2e4e88 90%);*/
    /*background: linear-gradient(90deg, #457199 60%, #2e4e88 90%);*/
    border-bottom: 1px solid rgba(250, 224, 66, .45);
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    padding: .5rem 1rem;
    color: #417272;
} 
.dx-item-content {
    color: #417272 !important;
}

.collapsible-content6 {
    max-height: 0px;
    overflow: hidden;
    transition: max-height .25s ease-in-out;
}

.toggle6:checked + .lbl-toggle6 + .collapsible-content6 {
    max-height: 100vh;
}

.toggle6:checked + .lbl-toggle6::before {
    transform: rotate(90deg) translateX(-3px);
}

.toggle6:checked + .lbl-toggle6 {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
/*#endregion Panel 6*/

.parameters{
    margin-bottom:5px;
}
.MapaCalor {
    position: absolute;
    z-index: 200;
    top: 21px;
}
.mapa-opcion {
    display: inline-block;
    text-align: center;
    height: 100%;
    width: 100%;
    background-color: #DAAE4E;
    padding: 6px;
    border-radius: 1rem;
    font-size: 1.2rem;
}

    .mapa-opcion:hover {
        background-color: #35b2b2;
        cursor: pointer;
        border-radius: 5%;
    }

.seleccion {
    background-color: #35b2b2;
    border-radius: 5%;
}

.box-select {
    background-color: #2b456e;
    width: 100%;
    height: 100%;
    color: white;
    border-color: transparent;
    text-indent: 10px;
}

.box-select-periodo {
    background-color: whitesmoke;
    width: 100%;
    height: 100%;
    color: black;
    border-color: transparent;
    text-indent: 10px;
}

.btn-select {
    background-color: #2b456e;
    width: 100%;
    height: 100%;
    color: white;
    border-color: transparent;
    text-indent: 10px;
}

.rectagulo{
    width:30px;
    height:60px;
    border-color:black;
    border-style:solid;
    background-color:white;
    margin:auto;
}

.rectagulo-ciudad {
    width: 30px;
    height: 60px;
    border-color: black;
    border-style: solid;
    /*   background-color: white;*/
    margin: auto;
    background-image: url(../img/mapa1.png);
    background-repeat: no-repeat, repeat;
    background-position: center;
    background-size: 200%;
}

.rectagulo-calor {
    width: 30px;
    height: 60px;
    border-color: black;
    border-style: solid;
    /*background-color: white;*/
    margin: auto;
    background-image: url(../img/mapa2.png);
    background-repeat: no-repeat, repeat;
    background-position: center;
    background-size:200%;
}

.cantidadTextDanos {
    font-size: 1rem;
}

.rectagulo-crimen {
    width: 30px;
    height: 60px;
    border-color: black;
    border-style: solid;
    /*background-color: white;*/
    margin: auto;
    background-image: url(../img/mapa3.png);
    background-repeat: no-repeat, repeat;
    background-position: center;
    background-size: 200%;
}

.rectagulo-ColoniasC{
    width: 33px;
    height: 60px;
    border-color: black;
    border-style: solid;
    /*   background-color: white;*/
    margin: auto;
    background-image: url('../img/Mapa Colonias.png');
    background-repeat: no-repeat, repeat;
    background-position: center;
    background-size: 200%;
}

.rectagulo-IPH {
    width: 33px;
    height: 60px;
    border-color: black;
    border-style: solid;
    /*   background-color: white;*/
    margin: auto;
    background-image: url('../img/IPH.png');
    background-repeat: no-repeat, repeat;
    background-position: center;
    background-size: 200%;
}

.rectagulo-IPHFaltas {
    width: 33px;
    height: 60px;
    border-color: black;
    border-style: solid;
    /*   background-color: white;*/
    margin: auto;
    background-image: url('../img/falta administrativa.png'); 
    background-repeat: no-repeat, repeat;
    background-position: center;
    background-size: 200%;
}


.cuadrado-leyenda {
    width: 20px; /* ancho del cuadro */
    height: 20px; /* alto del cuadro */
    /*background: #428bca;*/ /* color de fondo del cuadro */
    border: .1px solid black; /* borde del cuadro */
    border-radius: 2px; /* radio de borde para hacer las esquinas redondeadas */
}
#tablaleyendas th {
    padding: 0.1rem;
}
#tablaleyendas td {
    padding: 0.1rem;
}
#rad {
    background-color: transparent;
}

.dx-radiobutton {
    padding: 5px;
    color: white;
}
 


 

.my-float {
    margin-top: 0px;
}

.my-floatPrint {
    margin-top: 0px;
}

.search-box {
    position: fixed;
    top: 111px;
    left: 55px;
    z-index: 1;
    width: 350px;
    height: 40px;
    /*background-color: whitesmoke;
    color: black;
    padding: 15px;
    margin: 0px;
    border: none*/
}

.search-panel {
    position: fixed;
    top: 84px;
    left: calc(100vw - 320px);
    z-index: 1;
    width: 250px;
    /*  height: 40px;*/
    margin: 0px;
/*    background-color: #DAAE4E;
    color:white*/
    /*color: black;
    padding: 15px;

    border: none*/
}
/*bUSCADOR DE COLONIAS*/
.dx-lookup-empty .dx-lookup-field {
    color: #999999;
    BACKGROUND: #DAAE4E;
    color: white;
    BORDER-RADIUS: .5REM;
}

.dx-popup-wrapper > .dx-overlay-content {
    border: 1px solid #DAAE4E;
    background: #DAAE4E;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    border-radius: 6px;
}
/*fin BUSCADOR DE COLONIAS*/
.dx-theme-generic .dx-fieldset,
.dx-theme-material .dx-fieldset {
    width: 40%;
    float: left;
}

.dx-field > .dx-lookup {
    flex: 1;
}



@media (min-width:1950px ) {
    .navbarcustom-navegacion {
        grid-template-columns: 420px 420px 420px 420px 370px 190px;
        column-gap: 0px;
    }
    .navbarcustom-title h2 {
        font-size: 55px;
    }
    .mapa {
        
        height: 92vh;
        
    } 

}

@media (max-width: 768px ) {

    .navbarcustom {
        visibility: hidden;
        height:0px;
        margin:0px;
    }

    .navbarcustom-navegacion {
        grid-auto-rows: 20px;
        grid-auto-flow:row;
    }

    .navbarcustom-title h2 {
        font-size: 20px;
    }
 

    #float {
        top: 0px;
        left:12px;
    }

    #floatIzquierdo {
        visibility: hidden;
        width:0;
        height:0;
        display:none !important;
    }

    .main {

    }




}


@media print {
    body {
        margin: 0;
        padding: 0;
    }

   /* main{
        height:50%;
    }*/
      
    .navcustom-logos {
        visibility: visible;
    }

    .btnfloatprint{
        visibility:hidden;
    }

    .collapsible-content .content-inner {
        background-color: blue;
        padding: .5rem 1rem;
        color: black;
        border-color: black;
    }
    .collapsible-content2 .content-inner2 {
        background-color: blue;
        padding: .5rem 1rem;
        color: black;
        border-color: black;
    }
    .collapsible-content3 .content-inner3 {
        background-color: blue;
        padding: .5rem 1rem;
        color: black;
        border-color: black;
    }
    .collapsible-content4 .content-inner4 {
        background-color: blue;
        padding: .5rem 1rem;
        color: black;
        border-color: black;
    }
    .collapsible-content5 .content-inner5 {
        background-color: blue;
        padding: .5rem 1rem;
        color: black;
        border-color: black;
    }
    .collapsible-content6 .content-inner6 {
        background-color: blue;
        padding: .5rem 1rem;
        color: black;
        border-color: black;
    }
    .dx-item-content {
        
        color: black;
    }

    .mapa {
        visibility: visible;
        height: 900px;
    }
    
    @page {
        size: landscape;
    }

    ion-icon {
        pointer-events: none;
    }
}

.navbarcustom {
    background-color: #e0e0e0;
    height: auto;
}

#NewNavCustom{
    display:none;
}
.MenuInfo {
    display: none;
}
#ModalFuenteDeInformacion .modal-header {
    background: #6f6c6e;
    COLOR: WHITE;
    text-align: center;
    font-weight:500;
}
.TextoModal
{
    font-weight:600;
}


.Btn-Imprimir {
    background: #DAAE4E;
    color: white;
    border-color: transparent;
    border-radius: 1rem;
    height: 36px;
}
#MCuadranteDelito .modal-header {
    background: #6f6c6e;
    COLOR: WHITE;
    text-align: center;
    font-weight: 500;
}
#MFichaSocioeconomica .modal-header {
    background: #6f6c6e;
    COLOR: WHITE;
    text-align: center;
    font-weight: 500;
    text-align: center !important; 
}
#MFichaSocioeconomica #titleModalFicha { 
    text-align: center !important;
    font-size: 1.5rem;
}

.logo1 img {
    margin-top: .5rem;
    margin-left: 10%;
    /*width: 80%;*/
}
.logo1 {
    text-align:center;
}

.logo2 img {
    margin-top: .2rem;
    /*width: 85%;*/
}

.TextTitulo {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 2%;
    color: white;
    line-height: 24.5px;
}
.TextTitulo span{
    font-size: 1.5rem;
    font-weight: 100;
    margin-top: 2%;
    color: #7d7d7d;
    line-height: 24.5px;
}

.btnfloat {
    width: 40px;
    height: 40px;
    background: #DAAE4E;
    color: white;
    border-color: transparent;
    border-radius: 1rem;
    padding-right: 39px;
}
.btnfloatModalFaltas { 
    background: #DAAE4E;
    color: white;
    border-color: transparent;
    border-radius: 1rem; 
}

.btnfloatFaltas {
    width: 40px;
    height: 40px;
    background: #DAAE4E;
    color: white;
    border-color: transparent;
    border-radius: 1rem;
    padding-right: 39px;
}

.btnfloatprint {
    width: 40px;
    height: 40px;
    background: #DAAE4E;
    color: white;
    border-color: transparent;
    border-radius: 1rem;
    padding-right: 39px;
}

.btnfloatIzq {
    width: 52px;
    height: auto;
    background: transparent;
    border-color: transparent;
}
.btnfloatIzq  img{
    width: 129%;
    margin-bottom: 13px;
}
    .btnfloatIzq button:active {
        background: transparent;
        border-color: transparent;
    }
.mapa {
    height: calc(100vh - 25px - 72px);
    padding: 0;
    margin: 0;
}

#MDefinicionAvanzada .modal-header {
    background-color: #6F6C6E;
    color: white;
}
#MDefinicionAvanzada span { 
    color: white;
}

#MFuentesInformacion .modal-header {
    background-color: #6F6C6E;
    color: white;
    overflow-y: auto;
}

#MFuentesInformacion span {
    color: white;
}
#btnDefinicionAvanzadas {
    background-color: transparent;
    border-color: transparent;
    overflow-y: auto;
}

#btnDefinicionIndicadores {
    background-color: transparent;
    border-color: transparent;
}
.dx-searchbox .dx-texteditor-input, .dx-searchbox .dx-placeholder:before {
    padding-left: 34px;
    background-color: antiquewhite;
}
.modal-content {
border-radius: 1rem !important;    
}
div:where(.swal2-icon).swal2-question {
    border-color: #5c9797 !important;
    color: #5c9797 !important;
    width: 140px !important;
    height: 140px !important;
}
.swal2-icon-content {
    font-size: 8rem !important
}
#titleModalCuadrante {
    width:105%;
    font-size:1.5rem;
}
.BotnoModalFaltas {
    z-index: 1;
    position: fixed;
    left: calc(100vw - 63PX);
    top: calc(100vh - 290px);
}
@media (min-width: 1000px) {
    .LeyendasDIV {
            position: fixed;
            left: calc(100vw - 463PX);
            top: calc(100vh - 311px);
            width: 385px;
        }



        .content-inner5 {
            overflow-y: auto;
            height: 214px;
        }

        #float {
            right: calc(100vw - 465px);
            height: calc(100vh - 72px);
            overflow-y: auto;
        }

        .MenuInfo {
            display: none;
            width: 350px;
            position: absolute;
            z-index: 5;
            background: #5E3062;
            top: 28px;
            height: calc(100vh - 28.42px);
            overflow-y: auto;
        }

        .wrap-collabsible {
            background-color: white !important;
            border-radius: 0.5rem;
        }

            .wrap-collabsible select {
                background: #DAAE4E;
                border-radius: 1rem;
                height: 31px;
            }

            .wrap-collabsible label {
                color: #417272;
            }

        .dx-lookup-field {
            background-color: #DAAE4E;
            border-radius: .5rem;
            color: #417272;
        }
    }

    @media (max-width: 1000px) {
        .margleft
        {
            margin-left:15px;
        }

        #contenidoFaltas {
            display: none;
        }
        #TextoIconoFaltas {
            display: block !important; 
        }
        .btnfloatFaltas {
            width: 243px;
            display: flex;
            height: 45px;
            max-height: 100px;
            overflow-y: auto;
            background: #DAAE4E;
            color: white;
            border-color: transparent;
            border-radius: 1rem;
            padding-right: 39px;
        }
            .btnfloatFaltas span {
                margin-left: 5px;
                margin-top: 4px;
            }
            .btnfloatFaltas svg {
                margin-top: 4px;
                width: 65px !important;
                height: 30px !important;
            }
        .modal-dialog {
            max-width: 89VW !important;
            margin: 1.75rem auto;
        }

        .wrap-collabsible select {
            border-radius: 1rem;
        }

        .BotnoModalFaltas {
            z-index: 1;
            position: fixed;
            left: calc(100vw - 264PX);
            top: calc(100vh - 292px);
        }

        .TituloPr {
            color: white;
            text-align: end;
            font-weight: 600;
            font-size: 1.5rem;
        }

        /*Fin General*/
        #floatIzquierdo {
            display: none;
        }

        #float {
            width: 50px;
            right: 0px;
            left: 0.5%;
            top: calc(100vh - 301px);
            height: calc(100vh - 29.42px);
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }

        .mapa {
            height: calc(100vh - 29.42px);
            padding: 0;
            margin: 0;
        }

        .navbarcustom-title {
            display: none;
        }

        .navbarcustom {
            display: none;
        }

        #NewNavCustom {
            text-align: center;
            display: block;
            background-color: #e0e0e0;
            width: 100%;
        }

        .FiscoNew {
            width: 100px !important;
        }

        .navcustom-logos {
            display: none;
        }

        footer {
            display: none;
        }


        .gm-fullscreen-control {
            display: none;
        }

        .btnfloat {
            display: none;
        }

        .btnfloatIzq {
            display: none;
        }

        .btnfloatprint {
            display: none;
        }

        .gm-bundled-control-on-bottom {
            display: none;
        }

        .gmnoprint {
            display: none;
        }
        /*Fin General*/

        /*DatosMostrar*/
        #DatosMostrar {
            background-image: url('../img/IconsMovil/datos.png');
            color: transparent;
            width: 50px;
            height: 50px;
            font-size: 0px;
            background-size: cover;
        }

        .collapsible-content {
            display: none;
        }

        .TextDatosM {
            color: white;
            font-weight: 500;
        }

        .seleccion {
            background-color: #5E3062;
            border-radius: 5%;
        }

        .MenuInfo {
            display: none;
            width: 350px;
            position: absolute;
            z-index: 5;
            background: #5E3062;
            top: 28px;
            height: calc(100vh - 28.42px);
            overflow-y: auto;
        }

            .MenuInfo select {
                background: #DAAE4E;
                border-radius: 1rem;
                height: 31px;
            }

            .MenuInfo label {
                color: white;
            }
        /*Fin DatosMostrar*/
        /*TipoMapa*/
        #TipoMapa {
            background-image: url('../img/IconsMovil/Tipodemapa.png');
            color: transparent;
            width: 50px;
            height: 50px;
            background-size: cover;
            font-size: 0px;
        }

        .collapsible-content2 {
            display: none;
        }

        /*Fin TipoMapa*/

        /*Leyenda*/
        #Leyenda {
            background-image: url('../img/IconsMovil/Leyenda.png');
            color: transparent;
            width: 50px;
            height: 50px;
            background-size: cover;
            font-size: 0px;
        }

        .collapsible-content5 {
            display: none;
        }

        /*Fin Leyenda*/

        /*OpcionesAvanzadas*/
        #OpcionesAvanzadas {
            background-image: url('../img/IconsMovil/Opciones.png');
            color: transparent;
            width: 50px;
            height: 50px;
            background-size: cover;
            font-size: 0px;
        }

        .collapsible-content6 {
            display: none;
        }
        /*Fin OpcionesAvanzadas 72px*/
        .dx-item-content {
            color: white !important;
        }

        #rotateScreen {
            position: absolute;
            top: 14%;
            left: 6%;
            font-size: 2rem;
            font-weight: 600;
        }

        .search-panel {
            position: fixed;
            top: 38px;
            left: calc(100vw - 268px);
            z-index: 1;
            width: 250px;
            /* height: 40px; */
            margin: 0px;
        }

        dx-toolbar {
            display: none;
        }

        #tablaleyendas th{
            padding: 0.5rem;
        }
        #tablaleyendas  td {
            padding: 0.5rem;
        }

        #tablaleyendas {
            background-color: #7e307e;
            border-color: transparent;
            color: #e2e9e9 !important;
            width: 88% !important;
            margin-left: 6% !important;
        }
    }

.tab-pane
{
    padding-top: 15px
}

.floatIzquierdo
{
    display: none !important;
}

:root {
    --vz-info: #299cdb;
    --vz-Morado: #572364;
    --vz-primary-rgb: 64, 81, 137;
    --vz-success: #0ab39c;
    --vz-success-rgb: #0ab39c;
    --vz-white: #fff;
    --vz-gray: #878a99;
    --vz-gray-dark: #343a40;
    --vz-gray-100: #f3f6f9;
    --vz-gray-200: #eff2f7;
    --vz-gray-300: #e9ebec;
    --vz-gray-400: #ced4da;
    --vz-gray-500: #adb5bd;
    --vz-gray-600: #878a99;
    --vz-gray-700: #495057;
    --vz-gray-800: #343a40;
    --vz-gray-900: #212529;
    --vz-primary: #405189;
    --vz-secondary: #3577f1;
    --vz-success: #0ab39c;
    --vz-info: #299cdb;
    --vz-warning: #f7b84b;
    --vz-danger: #f06548;
    --vz-light: #f3f6f9;
    --vz-dark: #212529;
    --vz-dorado: #DAAE4E;
    --vz-azulclaro: #299cdb;
    --vz-azuloscuro: #405189;
    --vz-verde: #447474;
}