<div id="ddr-b9b48cd87e" class="ddr-page-section-wrapper ddr-page-section-wrapper-1">
                <div class="ddr-page-section-pre-content ddr-page-section-pre-content-1 ">
                    <div class="ddr-page-section ddr-page-section-1" style="display: flow-root; padding-left:0px;">
                        <div class="ddr-page-row ddr-page-row-0 ddr-page-row__wrap--320 ddr-page-row__wrap--480 ddr-page-row__wrap--768" id="ddr-5472aef710">
                            <div class="ddr-page-column ddr-page-column-0 ddr-page-column__wrap--320 ddr-page-column__wrap--480 ddr-page-column__wrap--768 " id="ddr-46bc4b19aa" style="border-style: solid; border-width: 0px; border-radius: 0px; border: 0px solid rgb(100, 100, 100); background-color: rgb(50, 50, 50); align-content: flex-start; width: 12.5%; height:15%; margin-left: 0%; margin-top:0%; margin-right: 0%">
                                
                                    <fieldset style="padding:0px;margin-top: 0%; border: 1px solid rgb(100, 100, 100); background-color: rgb(50, 50, 50);">
                                    <div style="background-color: rgb(255, 255, 255, 0.0); text-align: center; padding: 0px; margin: 0px"><img src="../img/dat-logo.png" width="200" height="64" alt="DAT System" style="margin-top: 2px; margin-left:0px; background-color: rgb(255, 255, 255);"></div>
                                    <h5 style="background-color: rgb(50, 50, 50);padding-left: 2%; padding-right:2.5%; margin-top:0px; margin-bottom:5px; font-family: Arial, sans-serif;font-size:15px; color:rgb(255, 255, 255)">Ground Calibration & Control Station (GC2S)</h5>
                                    </fieldset>
                                    
                                    <!-- Configuration -->
                                    <fieldset style="padding:0px; background-color: rgb(50, 50, 50); color:rgb(255, 255, 255)" class="myfieldset" >
                                        <legend style="margin-left: 0.2rem; font-size: 16px;font-weight: bold; font-family: Arial, sans-serif; color:rgb(255, 255, 255)">Configuration</legend>
                                          <div class="buttons"  style="background-color: rgb(50, 50, 50);">
                                            <button id="socket-btn" class="socket-btn"><i class="fa-solid fa-arrows-rotate fa-lg" style="margin-left: 0px"></i><span style="margin-left: 15px;">Refresh Server</span></button>
                                            <button id="tar-btn" class="btn-success"><i class="fa-sharp fa-solid fa-radar fa-lg"></i><span style="margin-left: 15px;">Start Localize</span></button>
                                            <button id="track-btn" class="btn-success"><i class="fa-solid fa-route fa-lg"></i><span style="margin-left: 15px;">Display Track</span></button>
                                          </div>
                                        </fieldset>
                                
                                    <!-- Geographic Info -->
                                    <fieldset style="padding:0px; background-color: rgb(50, 50, 50); color:rgb(255, 255, 255);" class="myfieldset">
                                    <legend style="margin-left: 0.2rem; color:rgb(255, 255, 255); font-size: 16px; font-weight: bold; padding: 0px; font-family: Arial, sans-serif;">Geographic Information</legend>
                                        <div class="text_fields" style="margin-bottom: 3%;  background-color: rgb(50, 50, 50);">
                                        
                                        <div style="margin-top:3%">
                                            <label class="label" for="lat" style="margin-top: 0%; margin-left:2%; font-family: Arial, sans-serif;">Curr. Latitude (dd):</label>
                                            <input type="textbox" id="latitude" name="lat" maxlength = "10" style="margin-bottom: 1%; font-family: Arial, sans-serif;" readonly>
                                        </div>
                                        
                                        <div style="margin-top:3%">
                                            <label class="label" for="lng" style="margin-top: 0%; margin-left:2%; font-family: Arial, sans-serif;">Curr. Longitude (dd):</label>
                                            <input type="textbox" id="longitude" name="lng" style="margin-bottom: 1%; font-family: Arial, sans-serif;" maxlength = "10" readonly>
                                        </div>
                                        
                                        <div style="margin-top:3%">
                                            <label class="label" for="MSL-alt" style="margin-top: 0%; margin-left:2%; font-family: Arial, sans-serif;">MSL Altitude (m):</label>
                                            <input type="textbox" id="MSL-alt" name="MSL-alt" style="margin-bottom: 1%; font-family: Arial, sans-serif;" maxlength = "10" readonly>
                                        </div>
                                        
                                        <div style="margin-top:3%">
                                            <label class="label" for="speed" style="margin-top: 0%; margin-left:2%; font-family: Arial, sans-serif;">Speed (knot):</label>
                                            <input type="textbox" id="speed" name="speed" style="margin-bottom: 1%; font-family: Arial, sans-serif;" maxlength = "10" readonly>
                                        </div>
                                        
                                        <!-- <div style="margin-top:3%">
                                            <label class="label" for="geo_sep" style="margin-top: 0%; margin-left:2%; font-family: Arial, sans-serif;">Geoid Separation (m):</label>
                                            <input type="textbox" id="geo_sep" name="geo_sep" style="margin-bottom: 1%; font-family: Arial, sans-serif;" maxlength = "10" readonly>
                                        </div>
                                        
                                        <div style="margin-top:3%">
                                            <label class="label" for="ellip_alt" style="margin-top: 0%; margin-left:2%; font-family: Arial, sans-serif;">Ellipsoid Altitude (m):</label>
                                            <input type="textbox" id="ellip_alt" name="ellip_alt" style="margin-bottom: 1%; font-family: Arial, sans-serif;" maxlength = "10" readonly>
                                        </div>

                                        <div style="margin-top:3%">
                                            <label class="label" for="HDOP" style="margin-top: 0%; margin-left:2%; font-family: Arial, sans-serif;">Horizontal Dilution:</label>
                                            <input type="textbox" id="HDOP" name="HDOP" style="margin-bottom: 1%; font-family: Arial, sans-serif;" maxlength = "10" readonly>
                                        </div> -->
                                        
                                        </div>
                                    </fieldset>
                                    
                                    <!-- Target Mapping -->
                                    <fieldset style="padding:0px; background-color: rgb(50, 50, 50); color:rgb(255, 255, 255);" class="myfieldset">
                                    <legend style="margin-left: 0.2rem; color:rgb(255, 255, 255); font-size: 16px; font-weight: bold; font-family: Arial, sans-serif;">Target Mapping</legend>
                                    <div class="text_fields" style="padding-top: 0px; background-color: rgb(50, 50, 50);">
                                        <div class="form__group">
                                        <input class="checkbox" type="checkbox" id="heatmap" value="heatmap" name="heatmap">
                                        <label for="heatmap">Heatmap</label>
                                        </div>
                                        <div class="form__group">
                                        <input class="checkbox" type="checkbox" id="cep" value="cep" name="cep">
                                        <label for="cep">CEP</label>
                                        </div>
                                        <div class="form__group">
                                        <input class="checkbox" type="checkbox" id="eep" value="eep" name="eep">
                                        <label for="eep">EEP</label>
                                        </div>
                                        <div class="form__group">
                                        <input class="checkbox" type="checkbox" id="lob" value="lob" name="lob">
                                        <label for="lob">LOBs</label>
                                        </div>
                                        <!-- <div class="form__group">
                                        <input class="checkbox" type="checkbox" id="points" value="points" name="points">
                                        <label for="points">Intersections</label>
                                        </div> -->
                                        <!-- <div class="form__group" style="margin-bottom: 0.75%;">
                                        <input class="checkbox" type="checkbox" id="srtm" value="srtm" name="srtm">
                                        <label for="srtm">SRTM</label>
                                        </div> -->
                                    </div>
                                    </fieldset>

                            </div>
                            <div class="ddr-page-column ddr-page-column-1 ddr-page-column__wrap--320 ddr-page-column__wrap--480 ddr-page-column__wrap--768 " id="ddr-65b922e40e" style="border: 0px solid rgb(100, 100, 100); width: 100%; margin-left: 0%; margin-right: 0%;margin-top:0%">
                                <div id="ddr-bfe3f41f90" class=" ddr-widget widget-group wrap--320 wrap--480 wrap--768" style="width: 100%;">
                                    <div style="display: flex; padding-left: 0px; flex-direction: row; list-style-position: inside; height: max-content;">
                                        <div style="height: 0px;"></div>
                                        <div class="empty-section" style="min-height: 0px;width: 90%;">
                                          <div id ="map" style="height: 696px;">
                                            <div class="leaflet-control search">
                                              <input id="search" name="search" type="text" placeholder="Latitude, Longitude">
                                              <div id="suggestions"></div>
                                              <button id="search-btn">Search</button>
                                            </div>
                                          </div>
                                          
                                          <!-- <div class="leaflet-control search">
                                            <input id="search" name="search" type="text" placeholder="Latitude, Longitude">
                                            <div id="suggestions"></div>
                                            <button id="search-btn">Search</button>
                                          </div> -->
                                        </div>
                                        <div class="ddr-page-column ddr-page-column-1 ddr-page-column__wrap--320 ddr-page-column__wrap--480 ddr-page-column__wrap--768 " id="ddr-65b922e40e" style="border: 0px solid rgb(100, 100, 100); width: 10.5%; margin-left: 0%; margin-right: 0%;margin-top:0%">
                                          <div id="ddr-bfe3f41f90" class=" ddr-widget widget-group wrap--320 wrap--480 wrap--768" style="width: 100%;">
                                              <div style="display: flex; padding-left: 0px; flex-direction: row; list-style-position: inside; height: max-content;">
                                                    <div class="parent">
                                                      <!-- <div class="div1"> <span id="attitude0"></span> </div>
                                                      <div class="div2"> <span id="attitude1"></span> </div>
                                                      <div class="div3"> <span id="attitude2"></span> </div>
                                                      <div class="div4"> <span id="attitude3"></span> </div> -->
                                                      <div class="div1" id="attitude0" style="margin:0px; padding:0px; height:172.5px"> </div>
                                                      <div class="div2" id="attitude1" style="margin:0px; padding:0px; height:172.5px"> </div>
                                                      <div class="div3" id="attitude2" style="margin:0px; padding:0px; height:172.5px"> </div>
                                                      <div class="div4" id="attitude3" style="margin:0px; padding:0px; height:172.5px"> </div> 
                                                    </div>
                                                  </div>
                                              </div>
                                          </div>
                                    </div>
                                </div>
                            </div>
                          </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>