.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;
    width: 100%;
}

#splitterDiv {
  height: 5px;
  background: #ccc;
  cursor: row-resize;
  touch-action: none; /* this disables native scroll on touch */
  z-index: 1000;
}

#splitterDiv {
  height: 8px;
  background: #ccc;
  cursor: row-resize;
  touch-action: none;
  box-shadow: none;
  transition: background 0.2s, box-shadow 0.2s;
}

#splitterDiv.dragging {
  background: #666;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}

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

#gridDiv {
    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;
}

th, td {
    border: 1px solid #333;  /* darker borders */
    padding: 8px 12px;       /* horizontal + vertical padding */
    text-align: left;        /* keep text aligned left */
}

th {
    background-color: #f4f4f4; /* subtle header background */
}

tr.invalid { background-color: red; }   /* red row */
td.invalid-cell { background-color: red; } /* highlight specific cell */

.failed-row td {
    background-color: #f8d7da !important;
}

.success-row td {
    background-color: lightgreen !important;
}

.px10 {
    font-size: 10px;
}

/*.esri-popup {
  resize: both !important;
  overflow: auto !important;
}*/

.esri-popup {
  position: absolute !important; /* overrides ArcGIS default */
  touch-action: none; /* important for mobile drag */
  user-select: none; /* avoid text selection */
  resize: both;
  overflow: auto;
}

.esri-popup__header {
  touch-action: none; /* block scroll only here */
  cursor: move;
  user-select: none;
}

.esri-popup__header-container {
  touch-action: none; /* block scroll only here */
  cursor: move;
  user-select: none;
}

/* Inner content area scrolls */
.esri-popup__main-container {
  overflow-y: auto !important;
  max-height: 400px; /* adjust as needed */
}

.esri-locate .esri-widget--button {
  background-color: white;        /* optional styling */
  border-radius: 50%;             /* make it round */
}

.esri-locate .esri-widget--button .esri-icon-locate {
  /* Hide default */
  display: none;
}

.esri-locate .esri-icon-locate::before {
  content: "📌" !important;   /* your new icon */
  font-size: 20px !important;
  line-height: 1 !important;
}

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

.duration-cell button {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #ccc;
  background: white;
  transition: all 0.2s ease;
}

.duration-cell button:hover {
  background: #f0f0f0;
  transform: scale(1.1);
}