/* Set the height of the map */



body, html {
    height: 100%; /* Full height */
    margin: 2%; /* Remove default margin */
    background: lightblue;
    font-family: Arial, Helvetica, sans-serif;
}

#map {
    height: 30%; /* Set a fixed height for the map */
    width: 100%; /* Full width */
    margin-bottom: 20px; /* Space between the map and other content */
    float: left; 
    border: 2px solid black; 
}


h1,
h2 {
    margin: 10px 0;
}


table {
    width: 100%;
    /* Full width of the container */
    border-collapse: collapse;
    /* Collapse borders */
    border: 0px solid;
}

.table-container {
    overflow-x: scroll;
    /* Enable horizontal scrolling */
    margin: 20px 0;
    /* Space above and below the table */
    border: 2px solid black; 
}

table th,
table td {
    padding: 10px;
    /* Space around text */
    border: 1px solid darkgray;
    /* Border for table cells */
    text-align: center;
    /* Center align text */
    word-wrap: break-word;
    /* Break long words to fit */
}

/* Set the first column as sticky */
table tr th:first-child,
table td:first-child {
    position: sticky;
    left: 0;
    /* Stick to the left */
    z-index: 10;
    /* Lower than header, but above other cells */
    background: lightgray;
    /* White background for the first column */
}

table tr th:first-child {
    z-index: 11;
}

table tr th {
    position: sticky;
    top: 0;
    z-index: 9;
    background: lightgray;
}