body{
  /*  zoom: 0.8; Aplica un zoom out del 90% */
}
/* Estilos para el contenedor del mapa */
#map {
  height: 100vh;
  text-align: center;
  padding-top: 20%;
}
/**/
.toolbox{
  /*height: 100px;*/
  width: 300px;
  text-align: center;
}
/*Estilo para la barra de herramientas*/
#toolbar {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  z-index: 1;
}
/* linea de interconexion */
.leader-line {
  z-index: 9999;
}

/*Estilo para los botones dentro de la barra de herramientas*/
#toolbar button {
  margin-right: 10px;
  padding: 5px 10px;
  cursor: pointer;
  background-color: white;
  border-color: #cfcfcf;
  border-radius: 5px;
}
.btn-group-sm>.btn, .btn-sm {
  padding: 1px 5px; !important;
}
.toolbox div{
  text-align: left;
  display: inline-block;
  width: 100%;
  /*height: 50px;*/
  background-color: white;
  /*border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 5px;
  */
  padding: 5px;
  cursor: pointer;
}
.gm-style-iw-d{
  text-align: right;
}
.gm-style-iw-d button{
  margin-top: 10px;
  margin-right: 10px;
}
.gm-style-iw-chr{
  height: 24px;
}
.gm-ui-hover-effect{
    right: -12px;
    top: -12px;
}
/* Estilos para los botones flotantes */
.floating-buttons {
  position: absolute;
  top: 70px;
  right: 90px;
  text-align: center;

  text-align: right;
}
.floating-buttons button {
  padding: 5px 5px;

}

.floating-ver {
  position: absolute;
  top: 70px;
  right: 10px;
  text-align: left;
  padding: 10px;
  padding-bottom: 20px;
  background-color: white;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, .15);
}
.floating-ver .a_ver{
  display: block;
  height: 15px;
}
.alertas_flotantes{
  position: absolute;
  bottom: 20px;
  left: 60px;
  
}
.alertas_flotantes2{
  background-color: #f34444;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, .15);
  color: #ffffff;
  margin-bottom: 10px;
}
.floating_tabla_dispositivos{
  display: none;
  position: absolute;
  top: 70px;
  right: 150px;
  text-align: left;
  padding-top: 10px;
  background-color: white;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, .15);
  overflow-y: auto;
  width: 950px;
  min-height: 400px;
  min-width: 950px;
}

.floating-ver a {
  color: gray;
}
#tabla_dispositivos td {
  padding: 0px;
}
#caracteristicas {
  position: absolute;
  top: 68px;
  display: none;
  width: 30%;
  min-width: 380px;
  height: 90%;
  background-color: white;
  /*border: 6px solid rgba(0, 0, 0, .35);*/
  z-index: 1000;
  overflow-y: auto;
  border-radius: 7px;
}

.ver_caracteristicas {
  position: absolute;
  top: 70px;
  left: 0px;
  padding: 10px 20px 10px 20px;
  /*
  border-radius: 0px 10px 10px 0px;
  border: 1px solid rgba(0, 0, 0, .15);
  */
  background-color: white;
  z-index: 1000;
}

.estatus_agregar {
  position: absolute;
  top: 10px;
  right: 60px;
  border: 2px;
  /*border: 1px solid gray;*/
  background-color: white;
  height: 40px;
  width: 40px;
  text-align: center;
}

.logo_mapa {
  position: absolute;
  width: 100;
  bottom: 20px;
  right: 60px;
  background-color: white;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, .15);
}

.agregar_btn {
  padding: 10px !important;
}


#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*cursor: url(ruta/a/tu/imagen.png), auto; Cambia 'ruta/a/tu/imagen.png' por la ruta de tu imagen PNG */
}

.dropdown>button {
  width: 50px;
}

.dropdown>ul {
  position: relative;
  right: 100px;
}
.modal-backdrop{
  display: none;
}


/* Estilos para el scrollbar */
/* Para navegadores webkit */
::-webkit-scrollbar {
  width: 10px; /* Ancho del scrollbar */
}

/* Estilo del indicador del scrollbar */
::-webkit-scrollbar-thumb {
  background-color: #aaa; /* Color del indicador */
  border-radius: 10px; /* Borde redondeado */
}

/* Hover sobre el indicador del scrollbar */
::-webkit-scrollbar-thumb:hover {
  background-color: #888; /* Color del indicador al pasar el mouse */
}
.modal-lg{
  width: 90% !important;
}

/* funciones de diagrama */
#cy {
            width: 98%;
            height: 98vh;
            display: block;
            /*border: 1px solid #ccc;*/
        }

        .buffer_1 {
            background-color: red;
            width: 10px;
            height: 10px;
        }

        .popper-div {
            /* just an example */
            background: #fff;
            z-index: 1;
            /*padding: 0.25em;*/
            pointer-events: none;
            width: max-content;
            position: absolute;
            top: 0;
            left: 0;
            color: gray;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 10px;
        }
        .popper-div span{
            display: inline-block;
            width: 10px ;
            padding: 2px;
            border-radius: 2px;
            text-align: center;
        }
        /* una clase por cada color "blue", "orange", "green", "brown", "gray", "white", "red", "black", "yellow", "purple", "pink", "turquoise" */
        .color_1{ background-color: blue; color:#fff;}
        .color_2{ background-color: orange; color:#fff;}
        .color_3{ background-color: green; color:#fff;}
        .color_4{ background-color: brown; color:#fff;}
        .color_5{ background-color: gray; color:#fff;}
        .color_6{ background-color: white; color:#000;}
        .color_7{ background-color: red; color:#fff;}
        .color_8{ background-color: black; color:#fff;}
        .color_9{ background-color: yellow; color:#000;}
        .color_10{ background-color: purple; color:#fff;}
        .color_11{ background-color: pink; color:#fff;}
        .color_12{ background-color: turquoise; color:#fff;}

        /* Respetar colores background al imprimir*/
        @media print {
    span {
        -webkit-print-color-adjust: exact; /* Navegadores basados en WebKit */
        print-color-adjust: exact; /* Otros navegadores */
    }
}