#data-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* This ensures even spacing around each item. Adjust as necessary. */
    gap: 10px; /* This adds some space between the items. Adjust the gap size as needed. */
}

.table-container {
    display: inline-block; 
    margin: 1px; 
    vertical-align: top; 
    color: var(--e-global-color-primary);
    font-size: 0.875rem;
}

.table-container table {
    border-collapse: collapse; 
    width: 100%; /* Table takes full width of its container */
    margin: 0 auto;
}

.table-container table, .table-container th, .table-container td {
    border: 1px solid #0d223f33;
}

.table-container th, .table-container td {
    padding: 1px; 
    text-align: left;
    background-color: #FFFFFF;
}

.table-container th {
    background-color: #FFFFFF;
    color: white;
}

.table-container tr:nth-child(even) {
    background-color: #F3F7FC;
}

.table-container > table > tbody > tr > th {
    background-color: #FFFFFF;
    color: #0D223F;
}

.table-container tr:hover {
    background-color: #e2e8ef; 
    cursor: pointer; 
}

.status-dot {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.status-dot-and-value .installation-id {
    display: inline-block; 
    color: #FFF; 
    font-size: 1rem;
    font-weight: bold;
	margin-left: 5px; 
}

/* Styles for the house image and data overlay */
.house-image {
    width: 300px;
    cursor: pointer;
    position: relative;
    display: inline-block;
}

.house-image img {
    filter: brightness(170%);
    width: 100%;
    height: auto;
    object-fit: cover;
}

.house-image img:hover {
    filter: brightness(210%);
}

.status-dot-and-value {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #FFF;
    font-size: 0.875rem;
}

.sensor-value {
    margin-left: 5px; 
}

.power-icon {
    color: #FFF;
    font-size: 0.875rem; 
    vertical-align: middle; 
}

/* Style for the full data table */
.full-data-table {
    width: 300px; /* Match the width of the house image */
/*    margin: 10px 0; */
    display: none; /* Initially hidden */
}

/* Responsive design for smaller screens */
@media screen and (max-width: 600px) {
    .house-image, .full-data-table {
        width: 100%;
    }

    .table-container table, .table-container thead, .table-container tr, 
    .table-container th, .table-container td {
        display: block;
        width: 100%;
    }

    .table-container tr {
        margin-bottom: 10px;
    }

    .table-container th, .table-container td {
        text-align: center; 
    }
}