html,
body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}

#app-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#header {
  flex-shrink: 0; /* Prevent header from shrinking */
  height: 19vh;
  overflow: hidden; /* Hide overflow content */
}

#imgofheader {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure the image covers the header area */
}

#mapviewDiv {
    flex-grow: 1; /* Allow map to take remaining space */
    position: relative;
}

#logoDiv {
  padding: 5px;
  background-color: white;
  text-align: center;
  width: auto; /* Adjust width automatically */
  max-width: 69px; /* Set a max-width */
  height: auto;
  padding-bottom: 1px;
}

#logoimg {
  max-width: 100%;
  height: auto;
}

#resultDivPanel {
width: auto;
max-width: 445px;
background-color: #fff;
overflow-y: auto;
padding: 1rem;
position: relative;
right: 0px;
height: auto;
max-height: 71vh;
top: -115px;
display: flex;
flex-direction: column;
}

/* Custom styles for the actions panel in the LayerList to ensure clean layout */
.esri-layer-list__panel-content .calcite-label {
  padding: 8px;
}
.esri-layer-list__item-actions {
  padding: 10px 10px 10px 10px;
}


.result-title {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 0.5rem;
}

.result-description {
margin-bottom: 1rem;
font-size: 0.9rem;
color: #666;
}

.radio-group {
display: flex;
justify-content: center;
margin-bottom: 1rem;
gap: 1rem;
}

.radio-group input[type="radio"] {
display: none;
}

.radio-group label {
padding: 0.5rem 1rem;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}

.radio-group input[type="radio"]:checked + label {
background-color: #0079c1;
color: white;
border-color: #0079c1;
}

#tableContainer table {
width: 100%;
border-collapse: collapse;
}

#tableContainer th,
#tableContainer td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}

#tableContainer th {
background-color: #f2f2f2;
}

.pagination {
display: flex;
justify-content: center;
margin-top: 1rem;
}

.pagination button {
padding: 0.5rem 1rem;
margin: 0 0.2rem;
border: 1px solid #ccc;
background-color: #fff;
cursor: pointer;
border-radius: 4px;
}

.pagination button:disabled {
opacity: 0.5;
cursor: not-allowed;
}

.esri-icon-zoom-in-magnifying-glass:before {
content: "\e605";
}


/* Media Queries for responsiveness */
@media (max-width: 768px) {
  #header {
    height: 15vh; /* Reduce header height on smaller screens */
  }

  .esri-ui-top-right {
    flex-direction: column; /* Stack widgets vertically */
  }

  .esri-ui-bottom-left .esri-widget {
    margin-bottom: 10px; /* Add space between widgets */
  }
  .esri-ui-bottom-right .esri-widget {
    margin-bottom: 10px; /* Add space between widgets */
  }
}

@media (max-width: 480px) {
  #header {
    height: 12vh; /* Further reduce header height */
  }

  #logoDiv {
    max-width: 50px; /* Adjust logo size */
  }

  .esri-ui .esri-widget {
    font-size: 0.9em; /* Adjust widget font size */
  }

  #resultDivPanel {
    padding: 10px;
  }
}