<div id="login-form" class="log">
                <h3 class="log-title">Access Verification</h3>
                <input type="tel" id="password" placeholder="Enter the PIN..." class="log-input">
                <button id="login-btn" class="log-button">Log In</button>
                <p id="error-message" class="log-wrong">NOUP! Wrong PIN, please try again! </p>
            </div>

            <div id="app-content" style="display: none;">
            <div class="wrapper">
                <span class="version">Version 7.0</span>
                <div class="sheet__wrapper" id="sheet__wrapper">

                    <div class="first__section"> <!-- Sheet MAIN TITLE -->

                        <div class="first__section-img">
                            
                        </div>
            
                        <div class="first__section-title">
                            <h1>BILL OF LADING</h1>
                            <p>NON NEGOTIABLE</p>
                        </div>
            
                        <div class="first__section-date">
                            <label for="date-of-creation">Date:</label>
                            <input type="date" id="date-of-creation" name="BOL_Date_of_creation">
                        </div>

                    </div>

<!-- ------------------------------------------------- -->

                    <form action="" id="myForm" class="form__wrapper">

                        <div class="second__section"> <!-- SHIPPER Section -->

                            <div class="shipper__wrapper">

                                <div class="shipper__title">
                                    <h2>SHIPPER</h2>
                                </div>
                                

                                <div class="shipper__container">

                                    <label for="shipper-contact">Contact:</label>
                                    <input type="text" id="shipper-contact" name="Shipper_Contact" class="uppercase" required>
                                    
                                    <label for="shipper-company">Company:</label>
                                    <input type="text" id="shipper-company" name="Shipper_Company" class="uppercase" required>
                                    
                                    <div class="input__75-25">

                                        <div class="input75">
                                            <label for="shipper-address">Street Address:</label>
                                            <input type="text" id="shipper-address" name="Shipper_Address" required>
                                        </div>

                                        <div class="input25">
                                            <label for="shipper-country">Country:</label>
                                            <input type="text" id="shipper-country" name="Shipper_Country" class="uppercase" required>
                                        </div>

                                    </div>
                                    
                                    <label for="shipper-email">Email:</label>
                                    <input type="email" id="shipper-email" name="Shipper_Email" required>
                                    
                                    <label for="shipper-phone">Phone:</label>
                                    <input type="tel" id="shipper-phone" name="Shipper_Phone" required>

                                </div>

                            </div>

                            <div class="carrier__wrapper">

                                <div class="carrier__title">
                                    <h2>CARRIER</h2>
                                </div>
                                

                                <div class="carrier__container">

                                    <div class="input__75-25">

                                        <div class="input75">
                                            <label for="carrier-name">Carrier Name:</label>
                                            <input type="text" id="carrier-name" name="Carrier_Name" class="uppercase" required>
                                        </div>
            
                                        <div class="input25">
                                            <label for="carrier-mc">MC #:</label>
                                            <input type="number" id="carrier-mc" name="Carrier_MC" required>
                                        </div>

                                    </div>
            
                                    <label for="ship-ref-num">Order #:</label>
                                    <input type="number" id="ship-ref-num" name="Ship_Ref_Num" required>
            
                                    <div class="input__50-50">

                                        <div class="input50">
                                            <label for="shipment-date">Shipment Date:</label>
                                            <input type="date" id="shipment-date" name="Shipment_Date" required>
                                        </div>

                                        <div class="input50">
                                            <label for="est-trans-days">Est. Transit Days #:</label>
                                            <input type="number" id="est-trans-days" name="Est_Transit_Days" required>
                                        </div>

                                    </div>
                                    
                                    <label for="carrier-contact">Contact:</label>
                                    <input type="text" id="carrier-contact" name="Carrier_Contact" class="uppercase" required>
            
                                    <label for="carrier-phone">Phone:</label>
                                    <input type="tel" id="carrier-phone" name="Carrier_Phone" required>
                                </div>

                            </div>
                            
                        </div>

<!-- ------------------------------------------------- -->

                        <div class="third__section"> <!-- CONSIGNEE Section -->

                            <div class="consignee__wrapper">

                                <div class="consignee__title">
                                    <h2>CONSIGNEE</h2>
                                </div>
                                

                                <div class="consignee__container">
                                    
                                    <label for="consignee-contact">Contact:</label>
                                    <input type="text" id="consignee-contact" name="Consignee_Contact" class="uppercase" required>
                                    
                                    <label for="consignee-company">Company:</label>
                                    <input type="text" id="consignee-company" name="Consignee_Company" class="uppercase" required>
                                    
                                    <label for="consignee-address">Street Address:</label>
                                    <input type="text" id="consignee-address" name="Consignee_Address" required>
                                    
                                    <div class="input__75-25">
                                        <div class="input75">
                                            <label for="consignee-email">Email:</label>
                                            <input type="email" id="consignee-email" name="Consignee_Email">
                                        </div>
                                        
                                        <div class="input25">
                                            <label for="consignee-phone">Phone:</label>
                                            <input type="tel" id="consignee-phone" name="Consignee_Phone" required>
                                        </div>
                                    </div>

                                </div>

                            </div>

                        </div>

<!-- ------------------------------------------------- -->

                        <div class="fourth__section"> <!-- LOADS Section-->

                            <div class="loads__wrapper lw-1">

                                <div class="loads__tittle">
                                    <h2># of Package:</h2>
                                </div>

                                <div class="loads__container">
                                    <input type="number" id="num-pack" name="Num_of_Package" required>
                                    
                                    <input type="number" id="num-pack" name="Num_of_Package">
                                    
                                    <input type="number" id="num-pack" name="Num_of_Package">
                                                        
                                    <input type="number" id="num-pack" name="Num_of_Package">

                                </div>

                            </div>

                            <div class="loads__wrapper lw-2">

                                <div class="loads__tittle">
                                    <h2>Articles Description, Special Marks and Exceptions:</h2>
                                </div>

                                <div class="loads__container">
                                    <input type="text" id="info-pack" name="Info_of_Package" required>
                                    
                                    <input type="text" id="info-pack" name="Info_of_Package">
                                    
                                    <input type="text" id="info-pack" name="Info_of_Package">
                                                        
                                    <input type="text" id="info-pack" name="Info_of_Package">

                                    <div class="blanc">
                                        <input style="width: 100%; margin-bottom: 0; border: none; outline: none; visibility: hidden;" readonly> 
                                    </div>
                                </div>

                            </div>

                            <div class="loads__wrapper lw-3">

                                <div class="loads__tittle">
                                    <h2>Serial #:</h2>
                                </div>

                                <div class="loads__container">
                                    <input type="text" id="serial-pack" name="Serial_Num_of_Package" required>
                                    
                                    <input type="text" id="serial-pack" name="Serial_Num_of_Package">
                                    
                                    <input type="text" id="serial-pack" name="Serial_Num_of_Package">
                                                        
                                    <input type="text" id="serial-pack" name="Serial_Num_of_Package">
                                    
                                    <div class="blanc" style="background: var(--total-weight);">
                                        <p>Total Weight:</p>
                                    </div>
                                </div>

                            </div>

                            <div class="loads__wrapper lw-4">

                                <div class="loads__tittle">
                                    <h2>Weight Lb:</h2>
                                </div>
                                
                                <div class="loads__container">
                                    <input type="number" id="weight-num1" name="Weight_of_Package_LB" value="0" required>
                                    
                                    <input type="number" id="weight-num2" name="Weight_of_Package_LB" value="0">
                                    
                                    <input type="number" id="weight-num3" name="Weight_of_Package_LB" value="0">
                                                        
                                    <input type="number" id="weight-num4" name="Weight_of_Package_LB" value="0">
                                    <!-- IF ANOTHER FIELD IS ADDED, THE JS MUST BE MODIFIED BECAUSE THE FIELD MUST BE ADDED TO THE SUM OF THE INPUTS -->
                                    <div class="blanc">
                                        <input type="text" id="total-weight" name="Total_Weight_of_Packages_LB" value="0" style="width: 100%; margin-bottom: 0; background: var(--total-weight); border-bottom: none;" readonly>
                                        
                                    </div>
                                </div>

                            </div>

                            <div class="loads__wrapper lw-5">

                                <div class="loads__tittle">
                                    <h2>(Ft) Length:</h2>
                                </div>

                                <div class="loads__container">
                                    <input type="number" id="length-pack" name="Lenght_of_Package_Ft" required>
                                    
                                    <input type="number" id="length-pack" name="Lenght_of_Package_Ft">
                                    
                                    <input type="number" id="length-pack" name="Lenght_of_Package_Ft">
                                                        
                                    <input type="number" id="length-pack" name="Lenght_of_Package_Ft">
                                </div>

                            </div>

                            <div class="loads__wrapper lw-6">

                                <div class="loads__tittle">
                                    <h2>(Ft) Width:</h2>
                                </div>

                                <div class="loads__container">
                                    <input type="number" id="width-pack" name="Width_of_Package_Ft" required>
                                    
                                    <input type="number" id="width-pack" name="Width_of_Package_Ft">
                                    
                                    <input type="number" id="width-pack" name="Width_of_Package_Ft">
                                                        
                                    <input type="number" id="width-pack" name="Width_of_Package_Ft">    
                                </div>

                            </div>

                            <div class="loads__wrapper lw-7">

                                <div class="loads__tittle">
                                    <h2>(Ft) Height:</h2>
                                </div>

                                <div class="loads__container">
                                    <input type="number" id="height-pack" name="Height_of_Package_Ft" required>
                                    
                                    <input type="number" id="height-pack" name="Height_of_Package_Ft">
                                    
                                    <input type="number" id="height-pack" name="Height_of_Package_Ft">
                                                        
                                    <input type="number" id="height-pack" name="Height_of_Package_Ft">
                                </div>

                            </div>
                            
                        </div>

<!-- ------------------------------------------------- -->

                        <div class="fifth__section"> <!-- UNDER LOADS Section -->
                
                            <div class="comments__wrapper">

                                <div class="comments__title">
                                    <h2>COMMENTS</h2>
                                </div>

                                <div class="comments__container">
                                    <textarea id="comments" name="Comments" rows="6" class="comments__area" maxlength="600"></textarea>

                                    <div id="char-count">Remaining Characters: 600</div>
                                </div>

                            </div>
                
                        </div>

<!-- ------------------------------------------------- -->

                        <div class="sixth__section"> <!-- COMMENTS OR SIGNATURE Section -->

                            <div class="signature__wrapper">

                                <div class="signature__title">
                                    <h2>SIGNATURE</h2>
                                </div>

                                <div class="signature__container">
                                    <label for="signature-nameOne">Name:</label>
                                    <input type="text" id="signature-nameOne" name="Signature_Name_First" class="uppercase" required>
                                </div>
                
                            </div>

                            <div class="signature__wrapper">

                                <div class="signature__title">
                                    <h2>SIGNATURE</h2>
                                </div>

                                <div class="signature__container">
                                    <label for="signature-nameTwo">Name:</label>
                                    <input type="text" id="signature-nameTwo" name="Signature_Name_Second" class="uppercase" required>
                                </div>
                
                            </div>
                            
                        </div>

                    </form>

                </div>

<!-- ------------------------------------------------- -->

                <div class="trigger">
                    <button type="button" id="createPdfButton">CREATE A PDF</button>
                </div>

            </div>

            </div><!-- END OF app-content -->