.navbardp {overflow: hidden;background-color: black;height:5%}
.navbardp a {float: left;font-size: 16px;color: white;text-align: center;padding: 2px 2px;text-decoration: none;}

.dropdowndp {float: right;overflow: hidden;z-index: 3;}
.dropdowndp .dropbtndp {text-align: right;width:150px;font-size: 16px;  border: none;outline: none;color: white;padding: 2px 2px;background-color: inherit;font-family: inherit;margin: 0;}
.dropdown-contentdp {display: none;position: absolute;background-color: #3bb700;min-width: 150px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 3;}
.dropdown-contentdp a {float: none;color: black;padding: 12px 16px;text-decoration: none;display: block;text-align: right;}
.dropdown-contentdp a:hover {background-color: #ddd;}
.dropdowndp:hover .dropdown-contentdp {display: block;}

.divtop{margin:0;padding:0;background-color:white;text-align:center;overflow:hidden;position: relative;}
.divbottom{margin:0;padding:0;background-color:white;text-align:center;overflow:hidden;position: relative;}

.column1 {
    float: left;
    width: 80%;
  }

.column2 {
    float: left;
    width: 20%;
  }

.table-scroll {
    max-height: 100vh;       /* Set the maximum height for vertical scrolling */
    overflow-y: auto;        /* Enable vertical scroll if content overflows */
    position: relative;      /* Needed for position: sticky on inner elements */
  }
  
  /* Apply sticky positioning on table header cells */
.table-scroll thead th {
    position: sticky;
    top: 0;                  /* Sticks to the top of the scroll container */
    z-index: 2;              /* Ensures headers appear above table body cells */
    background-color: #fff;  /* Give it a background color to mask content behind */
  }
  
  /* Optionally, add sticky positioning for first column if horizontal scrolling is also involved */
.table-scroll tbody th,
.table-scroll tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #fff;
  }

#container {
    position: relative;
    width: 100%;
    height: 100%; /*100vh;*/
    display: flex;
    flex-direction: column;
}

#mapDiv {
    flex: 1;
    background: #eee;
    height: 70%; 
    width: 100%;
}

#splitterDiv {
    height: 5px;
    background: #aaa;
    cursor: row-resize;
}

#gridDiv {
    height: 30%;
    background: #f9f9f9;
    border-top: 1px solid #ccc;
    position: relative;
    overflow-y: auto; border-top: 1px solid #ccc; display: flex; flex-wrap: wrap;
}

.highlight {
    background-color: yellow !important;
}

td, th {
    font-size: 15px;
}

.px10 {
    font-size: 10px;
}

mylabel {display: inline-block;margin-bottom: 0;}