html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%; /* Asegura que el body ocupe el 100% de la pantalla */
    display: flex;
    flex-direction: column; /* Configura la dirección de los elementos hijos */
}

.main-container {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding: 16px;
    box-sizing: border-box;
}

#container {
    flex: 1; /* Ocupa todo el espacio disponible */
    display: flex;
    flex-direction: column; /* Asegura que el contenido crezca verticalmente */
}

.content {
    flex: 1; /* Permite que el contenido ocupe todo el espacio disponible */
    display: flex;
    flex-direction: column;
}

#map-container {
    flex: 1; /* Ocupa el espacio restante */
    display: flex;
}

#map {
    flex: 1; /* Asegura que el mapa ocupe todo el espacio disponible */
}

footer {
    background-color: #ECEFF1;
    text-align: center;
    padding: 10px 0; /* Espaciado interno para el texto del footer */
    color: #000;
    position: relative;
    width: 100%; /* Ocupa todo el ancho de la pantalla */
}

.custom-tooltip {
    --bs-tooltip-bg: var(--bs-primary);
}

/* Tablas de Layouts */
.col-site {
    width: 15%;
    text-align: center; /* Centra el texto horizontalmente */
    vertical-align: middle; /* Centra el texto verticalmente */
}
.col-floorplan {
    width: 10%;
    text-align: center; /* Centra el texto horizontalmente */
    vertical-align: middle; /* Centra el texto verticalmente */
}
.col-address {
    width: 20%;
    text-align: center; /* Centra el texto horizontalmente */
    vertical-align: middle; /* Centra el texto verticalmente */
}
.col-qty {
    width: 10%;
    text-align: center; /* Centra el texto horizontalmente */
    vertical-align: middle; /* Centra el texto verticalmente */
}
.col-assetstype {
    width: 15%;
    text-align: center; /* Centra el texto horizontalmente */
    vertical-align: middle; /* Centra el texto verticalmente */
}
.col-actions {
    width: 25%;
    text-align: center; /* Centra el texto horizontalmente */
    vertical-align: middle; /* Centra el texto verticalmente */
}
.col-inmap {
    width: 8%;
    text-align: center; /* Centra el texto horizontalmente */
    vertical-align: middle; /* Centra el texto verticalmente */
}

.col-inmap .data {
    font-size: 0.6rem; /* Texto pequeño para los datos */
    margin: 0;
    padding: 0;
    text-align: left; /* Centra el texto horizontalmente */
}

.col-inmap .title {
    font-weight: bold; /* Asegura que el título sea destacado */
    font-size: 1rem; /* Tamaño normal para el título */
}

.col-name {
    width:10%;
    text-align: center; /* Centra el texto horizontalmente */
    vertical-align: middle; /* Centra el texto verticalmente */
}
.col-name .name{
    font-weight: bold; /* Asegura que el título sea destacado */
    font-size: 0.7rem; /* Texto pequeño para los datos */
    margin: 0;
    padding: 0;
    text-align: left; /* Centra el texto horizontalmente */
}
.col-name .data {
    font-size: 0.7rem; /* Texto pequeño para los datos */
    margin: 0;
    padding: 0;
    text-align: left; /* Centra el texto horizontalmente */
}
.col-name .title {
    font-weight: bold; /* Asegura que el título sea destacado */
    font-size: 1rem; /* Tamaño normal para el título */
}

/*  */

/* Buttons */
.network-node-conn-to-button {
    margin-top: 0px;
    float: right; /* Mueve el botón al extremo derecho */
    padding: 1px 1px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    width: 10ex;
    height: 2ex;
    display: flex; /* Activa Flexbox */
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
    text-align: center; /* Asegura el texto centrado */
}

.network-node-conn-to-button:hover {
    background-color: #0056b3; /* Color de fondo del botón en hover */
}