/* Page layout */
    body {
        display: flex;
        margin: 0;
        height: 100vh;
        font-size: 14px; /* Reduce font size slightly */
      }
  
      h2 {
        font-size: 16px; /* Adjust header font size */
        margin-bottom: 0.5rem; /* Add spacing below headers */
      }
  
      #sidebar {
        width: 25%;
        padding: 1rem;
        background-color: #f4f4f4;
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
      }
  
      #sidebar p {
        margin: 0.2rem 0; /* Reduce space above and below paragraphs */
      }
  
      #viewDiv {
        flex: 1;
        position: relative;
      }
  
      /* Info box styling */
      #infoBox {
        padding: 0.5rem;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: #fff;
        margin-top: 0.5rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .infoBox {
        padding: 0.5rem;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: #fff;
        margin-top: 0.5rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
  
      #enerblockInput,
      #loadInput {
        width: 100%; /* Makes the input box responsive */
        max-width: 100%; /* Limits the width to match the infoBox above */
        box-sizing: border-box; 
        padding: 10px; /* Adds inner spacing */
        font-size: 16px; /* Increases font size */
        border: 1px solid #ccc; /* Light border */
        border-radius: 8px; /* Rounded corners */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.122); /* Subtle shadow */
        outline: none; /* Removes outline */
        transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth animations */
        margin: 0 auto; /* Centers the input */
        display: block; /* Ensures centering works */
      }
  
      #enerblockInput:focus,
      #loadInput:focus {
        border-color: #ffc800; /* Blue border on focus */
        box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2); /* Stronger shadow on focus */
      }
  
      #enerblockInput:hover,
      #loadInput:hover {
        border-color: #ffc800; /* Darker blue on hover */
        box-shadow: 0 2px 6px rgba(0, 86, 179, 0.2); /* Slight shadow on hover */
      }
  
      #enerblockInput::placeholder,
      #loadInput::placeholder {
        color: #aaa; /* Light gray placeholder text */
        font-style: italic; /* Italic placeholder */
      }
  
      /* The Modal (background) */
      .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1000; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgba(0, 0, 0, 0.8); /* Black background with opacity */
      }
  
      /* Modal Content */
      .modal-content {
        position: relative;
        margin: auto;
        padding: 20px;
        background: white;
        border-radius: 10px;
        max-width: 80%;
        text-align: center;
      }
  
      /* Close Button */
      .close-button {
        color: black;
        float: right;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
      }
  
      .close-button:hover {
        color: red;
      }
  
      #tooltip {
        position: absolute; /* Position relative to viewDiv */
        z-index: 1000;   /* Ensure it is above other elements */
        max-width: 200px; /* Optional: Limit the tooltip width */
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 5px;
        border-radius: 4px;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
        pointer-events: none; /* Ensures it doesn’t interfere with clicks */
        display: none; /* Start hidden */
      }



      #mapDiv {
        height: 100vh;
        width: 100%;
      }
      
      #logoContainer {
        display: flex;
        align-items: right; /* Align the logo with the zoom controls */
        gap: 8px; /* Space between the logo and zoom controls */
      }
      
      #logo {
        height: auto; /* Adjust size as needed */
        width: auto;
        max-width: 180px; /* Ensure responsiveness */
        cursor: pointer;
      }

      /* Default width for large screens 
      .esri-search,
      .esri-layer-list 
      {
        width: 300px;
      } */

      .esri-layer-list,
      .esri-search {
        width: 335px !important;
      }

      .esri-legend {
        width: 194px !important
      }