
    <?= form_open("Production/new") ?>        
    <p class="s1" style="padding-top: 11pt;padding-left: 10pt;text-indent: 0pt;text-align: left;">COFFEE QUALITY CONTROL CHECKLIST</p>

    <div style="padding:0; display:grid; gap:0; grid-template-columns:repeat(3,1fr);">
        <div style="grid-column:1 /SPAN 2;">
            <p style="padding-top: 3pt;text-indent: 0pt;text-align: left;"><br /></p>
            <div class="textbox" style="background:#F0EFEF;display:block;min-height:19.9pt;width:328.7pt;">
                <p class="s2" style="padding-top: 2pt;padding-left: 5pt;text-indent: 0pt;text-align: left;">Coffee Name: <input type="text" name="coffee-name" id="coffee-name"> </p>
            </div>
            <p style="padding-left: 5pt;text-indent: 0pt;text-align: left;" />
            <p style="text-indent: 0pt;text-align: left;"><br /></p>
            <div class="textbox" style="background:#F0EFEF;display:block;min-height:19.9pt;width:328.7pt;">
                <p class="s2" style="padding-top: 2pt;padding-left: 5pt;text-indent: 0pt;text-align: left;">Batch Number: <input type="text" name="batch-number" id="batch-number"></p>
            </div>
            <p style="text-indent: 0pt;text-align: left;" />
            <div style="padding:0; display:grid; gap:0; grid-template-columns:repeat(6,1fr);">
                <div style="grid-column: 1 / SPAN 2; grid-row: 2;">
                    <p class="s4" style="padding-top: 3pt;padding-left: 11pt;text-indent: 0pt;text-align: left;">Certification:</p>
                </div>
                <div style="grid-column:3; grid-row:2;">
                    <p class="s3">N/A</p>
                    <input type="checkbox" name="certification-na" id="certification-na">
                </div>
                <div style="grid-column:4; grid-row:2;">
                    <p class="s3">Fairtrade</p>
                    <input type="checkbox" name="certification-fairtrade" id="certification-fairtrade">
                </div>
                <div style="grid-column:5; grid-row:2;">
                    <p class="s3">RFA</p>
                    <input type="checkbox" name="certification-rfa" id="certification-rfa">
                </div>
                <div style="grid-column:6; grid-row:2;">
                    <p class="s3">Organic</p>
                    <input type="checkbox" name="certification-organic" id="certification-organic">
                </div>
            </div>
        </div>
        <div style="grid-column:3;">
            <p style="padding-left: 5pt;text-indent: 0pt;text-align: left;" />
            <p style="padding-top: 1pt;text-indent: 0pt;text-align: left;"><br /></p>
            <p style="text-indent: 0pt;text-align: left;" />
            <p style="text-indent: 0pt;text-align: left;" />
            <p style="text-indent: 0pt;text-align: left;" />
            <p style="text-indent: 0pt;text-align: left;" />


            <table style="border-collapse:collapse;margin-left:3pt" cellspacing="0">
                <tr style="height:20pt">
                    <td style="width:207pt" bgcolor="#F0EFEF">
                        <p class="s2" style="padding-top: 2pt;padding-left: 8pt;text-indent: 0pt;text-align: left;">Date: <input type="date" name="check-date" id="check-date"></p>
                    </td>
                </tr>
                <tr style="height:19pt">
                    <td style="width:207pt" bgcolor="#F0EFEF">
                        <p class="s2" style="padding-top: 2pt;padding-left: 7pt;text-indent: 0pt;text-align: left;">Checked by: <input type="text" name="checked-by" id="checked-by"></select></p>
                    </td>
                </tr>
                <tr style="height:19pt">
                    <td style="width:207pt" bgcolor="#F0EFEF">
                        <p class="s2" style="padding-top: 2pt;padding-left: 8pt;text-indent: 0pt;text-align: left;">Qty Requested: <input type="number" name="qty-requested" id="qty-requested"></p>
                    </td>
                </tr>
                <tr style="height:20pt">
                    <td style="width:207pt" bgcolor="#F0EFEF">
                        <p class="s2" style="padding-top: 1pt;padding-left: 8pt;text-indent: 0pt;text-align: left;">Qty Produced: <input type="number" name="qty-produced" id="qty-produced"></p>
                    </td>
                </tr>
            </table>
        </div>
    </div>

    <p style="text-indent: 0pt;text-align: left;"><br /></p>
    <p style="text-indent: 0pt;text-align: left;" />
    <ol id="l1">
            <p class="s4" style="padding-top: 4pt;padding-left: 29pt;text-indent: -17pt;text-align: left;">Green Coffee Inspection (Before Roasting)</p>
            <p style="text-indent: 0pt;text-align: left;"><br /></p>
            <div style="padding:0; display:grid; gap:0; grid-template-columns:repeat(6,1fr);border-style:solid; border-width: 2px; border-left:hidden; border-right:hidden; border-bottom:hidden; ">
                <div style="grid-column:1; grid-row:1;">
                    <p class="s3" style="padding-top: 4pt;padding-left: 11pt;text-indent: 0pt;text-align: left;">Green Coffee</p>
                </div>
                <div style="grid-column:2; grid-row:1;">
                    <p class="s3" style="padding-top: 5pt;padding-left: 11pt;text-indent: 0pt;text-align: left;">Qty Used</p>
                </div>
                <div style="grid-column:3; grid-row:1;">
                    <p class="s3" style="padding-left: 11pt;text-indent: 0pt;text-align: left;">Moisture Level</p>
                    <p style="padding-left: 11pt;text-indent: 0pt;text-align: left;">(Target: 10-12%)</p>
                </div>
                <div style="grid-column:4; grid-row:1;">
                    <p style="padding-top: 1pt;padding-left: 1pt;text-indent: 0pt;text-align: left;">RFA</p>
                    <p style="padding-top: 6pt;padding-left: 1pt;text-indent: 0pt;text-align: left;">Organic</p>
                    <p style="padding-left: 1pt;text-indent: 0pt;line-height: 13pt;text-align: left;">Fairtrade N/A</p>

                </div>
                <div style="grid-column:5; grid-row:1;">
                    <p class="s3" style="padding-left: 124pt;text-indent: 0pt;line-height: 11pt;text-align: center;">Visual Check</p>
                    <p style="padding-left: 125pt;text-indent: 0pt;line-height: 6pt;text-align: center;">(Defects, Inconsistencies,</p>
                    <p style="padding-left: 125pt;text-indent: 0pt;line-height: 192%;text-align: left;">Foreign Matter)</p>
                    <p style="padding-left: 125pt;text-indent: 0pt;line-height: 192%;text-align: left;">Pass Fail</p>
                </div>
                <div style="grid-column:6; grid-row:1;">
                    <p class="s3" style="padding-left: 6pt;text-indent: 0pt;line-height: 9pt;text-align: left;">Smell Check</p>
                    <p style="padding-top: 1pt;padding-left: 25pt;text-indent: -13pt;line-height: 183%;text-align: left;">(Fresh, No Off-Odors) Pass Fail</p>
                </div>

                <div style="grid-column:1; grid-row:2;">
                    <select name="green-coffee1" id="green-coffee1"></select>
                </div>
                <div style="grid-column:1; grid-row:3;">
                    <select name="green-coffee2" id="green-coffee2"></select>
                </div>
                <div style="grid-column:1; grid-row:4;">
                    <select name="green-coffee3" id="green-coffee3"></select>
                </div>
                <div style="grid-column:1; grid-row:5;">
                    <select name="green-coffee4" id="green-coffee4"></select>
                </div>
                <div style="grid-column:1; grid-row:6;">
                    <select name="green-coffee5" id="green-coffee5"></select>
                </div>

                <div style="grid-column:2; grid-row:2;">
                    <input type="number" name="qty-used1" id="qty-used1">
                </div>
                <div style="grid-column:2; grid-row:3;">
                    <input type="number" name="qty-used2" id="qty-used2">
                </div>
                <div style="grid-column:2; grid-row:4;">
                    <input type="number" name="qty-used3" id="qty-used3">
                </div>
                <div style="grid-column:2; grid-row:5;">
                    <input type="number" name="qty-used4" id="qty-used4">
                </div>
                <div style="grid-column:2; grid-row:6;">
                    <input type="number" name="qty-used5" id="qty-used5">
                </div>

                <div style="grid-column:3; grid-row:2;">
                    <input type="number" name="moisture-level1" id="moisture-level1">
                </div>
                <div style="grid-column:3; grid-row:3;">
                    <input type="number" name="moisture-level2" id="moisture-level2">
                </div>
                <div style="grid-column:3; grid-row:4;">
                    <input type="number" name="moisture-level3" id="moisture-level3">
                </div>
                <div style="grid-column:3; grid-row:5;">
                    <input type="number" name="moisture-level4" id="moisture-level4">
                </div>
                <div style="grid-column:3; grid-row:6;">
                    <input type="number" name="moisture-level5" id="moisture-level5">
                </div>

                <div style="grid-column:4; grid-row:2;">
                    <div style="padding:0; display:grid; gap:0; grid-template-columns:repeat(4,1fr);">
                        <div style="grid-column:1;grid-row:1;"><input type="checkbox" name="rfa1" id="rfa1"></div>
                        <div style="grid-column:2;grid-row:1;"><input type="checkbox" name="organic1" id="organic1"></div>
                        <div style="grid-column:3;grid-row:1;"><input type="checkbox" name="fairtrade1" id="fairtrade1"></div>
                        <div style="grid-column:4;grid-row:1;"><input type="checkbox" name="na1" id="na1"></div>
                    </div>
                </div>

                <div style="grid-column:4; grid-row:3;">
                    <div style="padding:0; display:grid; gap:0; grid-template-columns:repeat(4,1fr);">
                        <div style="grid-column:1;grid-row:1;"><input type="checkbox" name="rfa2" id="rfa2"></div>
                        <div style="grid-column:2;grid-row:1;"><input type="checkbox" name="organic2" id="organic2"></div>
                        <div style="grid-column:3;grid-row:1;"><input type="checkbox" name="fairtrade2" id="fairtrade2"></div>
                        <div style="grid-column:4;grid-row:1;"><input type="checkbox" name="na2" id="na2"></div>
                    </div>
                </div>

                <div style="grid-column:4; grid-row:4;">
                    <div style="padding:0; display:grid; gap:0; grid-template-columns:repeat(4,1fr);">
                        <div style="grid-column:1;grid-row:1;"><input type="checkbox" name="rfa3" id="rfa3"></div>
                        <div style="grid-column:2;grid-row:1;"><input type="checkbox" name="organic3" id="organic3"></div>
                        <div style="grid-column:3;grid-row:1;"><input type="checkbox" name="fairtrade3" id="fairtrade3"></div>
                        <div style="grid-column:4;grid-row:1;"><input type="checkbox" name="na3" id="na3"></div>
                    </div>
                </div>

                <div style="grid-column:4; grid-row:5;">
                    <div style="padding:0; display:grid; gap:0; grid-template-columns:repeat(4,1fr);">
                        <div style="grid-column:1;grid-row:1;"><input type="checkbox" name="rfa4" id="rfa4"></div>
                        <div style="grid-column:2;grid-row:1;"><input type="checkbox" name="organic4" id="organic4"></div>
                        <div style="grid-column:3;grid-row:1;"><input type="checkbox" name="fairtrade4" id="fairtrade4"></div>
                        <div style="grid-column:4;grid-row:1;"><input type="checkbox" name="na4" id="na4"></div>
                    </div>
                </div>

                <div style="grid-column:4; grid-row:6;">
                    <div style="padding:0; display:grid; gap:0; grid-template-columns:repeat(4,1fr);">
                        <div style="grid-column:1;grid-row:1;"><input type="checkbox" name="rfa5" id="rfa5"></div>
                        <div style="grid-column:2;grid-row:1;"><input type="checkbox" name="organic5" id="organic5"></div>
                        <div style="grid-column:3;grid-row:1;"><input type="checkbox" name="fairtrade5" id="fairtrade5"></div>
                        <div style="grid-column:4;grid-row:1;"><input type="checkbox" name="na5" id="na5"></div>
                    </div>
                </div>

                <div style="grid-column:5; grid-row:2;">
                    <div style="padding:0; display:grid; gap:0; grid-template-columns:repeat(2,1fr);">
                        <input type="radio" name="visual-check1" id="visual-check-pass1" value="pass">
                        <input type="radio" name="visual-check1" id="visual-check-fail1" value="fail">
                    </div>
                </div>
                <div style="grid-column:5; grid-row:3;">
                    <div style="padding:0; display:grid; gap:0; grid-template-columns:repeat(2,1fr);">
                        <input type="radio" name="visual-check2" id="visual-check-pass2" value="pass">
                        <input type="radio" name="visual-check2" id="visual-check-fail2" value="fail">
                    </div>
                </div>
                <div style="grid-column:5; grid-row:4;">
                    <div style="padding:0; display:grid; gap:0; grid-template-columns:repeat(2,1fr);">
                        <input type="radio" name="visual-check3" id="visual-check-pass3" value="pass">
                        <input type="radio" name="visual-check3" id="visual-check-fail3" value="fail">
                    </div>
                </div>
                <div style="grid-column:5; grid-row:5;">
                    <div style="padding:0; display:grid; gap:0; grid-template-columns:repeat(2,1fr);">
                        <input type="radio" name="visual-check4" id="visual-check-pass4" value="pass">
                        <input type="radio" name="visual-check4" id="visual-check-fail4" value="fail">
                    </div>
                </div>
                <div style="grid-column:5; grid-row:6;">
                    <div style="padding:0; display:grid; gap:0; grid-template-columns:repeat(2,1fr);">
                        <input type="radio" name="visual-check5" id="visual-check-pass5" value="pass">
                        <input type="radio" name="visual-check5" id="visual-check-fail5" value="fail">
                    </div>
                </div>

                <div style="grid-column:6; grid-row:2;">
                    <div style="padding:0; display:grid; gap:0; grid-template-columns:repeat(2,1fr);">
                        <input type="radio" name="smell-check1" id="smell-check-pass1" value="pass">
                        <input type="radio" name="smell-check1" id="smell-check-fail1" value="fail">
                    </div>
                </div>
                <div style="grid-column:6; grid-row:3;">
                    <div style="padding:0; display:grid; gap:0; grid-template-columns:repeat(2,1fr);">
                        <input type="radio" name="smell-check2" id="smell-check-pass2" value="pass">
                        <input type="radio" name="smell-check2" id="smell-check-fail2" value="fail">
                    </div>
                </div>
                <div style="grid-column:6; grid-row:4;">
                    <div style="padding:0; display:grid; gap:0; grid-template-columns:repeat(2,1fr);">
                        <input type="radio" name="smell-check3" id="smell-check-pass3" value="pass">
                        <input type="radio" name="smell-check3" id="smell-check-fail3" value="fail">
                    </div>
                </div>
                <div style="grid-column:6; grid-row:5;">
                    <div style="padding:0; display:grid; gap:0; grid-template-columns:repeat(2,1fr);">
                        <input type="radio" name="smell-check4" id="smell-check-pass4" value="pass">
                        <input type="radio" name="smell-check4" id="smell-check-fail4" value="fail">
                    </div>
                </div>
                <div style="grid-column:6; grid-row:6;">
                    <div style="padding:0; display:grid; gap:0; grid-template-columns:repeat(2,1fr);">
                        <input type="radio" name="smell-check5" id="smell-check-pass5" value="pass">
                        <input type="radio" name="smell-check5" id="smell-check-fail5" value="fail">
                    </div>
                </div>

                <div class="s3" style="grid-column:1;grid-row:7;">Comments:</div>
                <div style="grid-column: 2 / SPAN 6; grid-row:7;"><input style="width:-webkit-fill-available;" type="text" name="green-coffee-comments" id="green-coffee-comments"></div>

            </div>
        
            <div style="padding:0; display:grid; gap:0; grid-template-columns:repeat(2,1fr);">
                <div style="grid-column:1;">
                        <p class="s4" style="padding-top: 4pt;padding-left: 33pt;text-indent: -22pt;text-align: left;">Roasting Process Checks</p>
                        <div style="padding:0; display:grid; gap:0; grid-template-columns:repeat(3,1fr);border-style:solid; border-width: 2px; border-left:hidden; border-bottom:hidden; ">
                            <div class="s3" style="grid-column:1; grid-row:1;">
                                Diedrich CR35 <input type="checkbox" name="diedrich-cr35" id="diedrich-cr35">
                            </div>    
                            <div class="s3" style="grid-column:2; grid-row:1;">
                                Joper 120 <input type="checkbox" name="joper-120" id="joper-120">
                            </div>    
                            <div class="s3" style="grid-column:3; grid-row:1;">
                                Profile Used <br/> <input type="text" name="profile-used" id="profile-used">
                            </div>    
                            <div class="s3" style="grid-column:1; grid-row:2;">
                                End Temp Target: <br/><input type="text" name="end-temp-target" id="end-temp-target">
                            </div>    
                            <div class="s3" style="grid-column:2; grid-row:2;">
                                Actual: <br/><input type="text" name="actual-temp" id="actual-temp">
                            </div>    
                            <div class="s3" style="grid-column:3; grid-row:2;">
                                First Crack Timing<br/><p style="text-indent: 0pt;line-height: 7pt;text-align: left;">(mm:ss):</p><input type="text" name="first-crack-timing" id="first-crack-timing">
                            </div>    
                            <div class="s3" style="grid-column:1 / SPAN 3; grid-row:3;">
                                Colour Analysis (Agtron Number): <input type="text" name="colour-analysis" id="colour-analysis">
                            </div>    
                        </div>
                </div>
                <div style="grid-column:2;">
                    <p class="s4" style="padding-top: 4pt;padding-left: 40pt;text-indent: -22pt;text-align: left;">Post-Roast Quality Checks</p>
                    <div style="padding:0; display:grid; gap:0; grid-template-columns:repeat(1,1fr);border-style:solid; border-width: 2px; border-left:hidden; border-right: hidden; border-bottom:hidden; ">
                        <div class="s3" style="grid-column:1; grid-row:1;">
                            Bean Appearance <span class="s8">(Even Roast, No Scorching, No Tipping)</span>
                            <input type="radio" name="bean-apperance" id="bean-apperance-pass" value="pass">
                            <input type="radio" name="bean-apperance" id="bean-apperance-fail" value="fail">
                        </div>    
                        <div class="s3" style="grid-column:1; grid-row:2;">
                            Moisture Level After Roasting (%): <input type="number" name="moisture-level-after-roasting" id="moisture-level-after-roasting">
                        </div>
                        <div class="s3" style="grid-column:1; grid-row:3;">
                            Comments: <textarea name="post-roast-comments" id="post-roast-comments" rows="3"></textarea>
                        </div>
                    </div>
                </div>
            </div> 


            <p class="s4" style="padding-left: 34pt;text-indent: -23pt;text-align: left;">Cupping &amp; Sensory Analysis</p>
            <div style="padding:10px; display:grid; column-gap:20px; row-gap:10px; grid-template-columns:repeat(7,1fr);border-style:solid; border-width: 2px; border-left:hidden; border-right: hidden; border-bottom:hidden; ">
                <div class="s3" style="grid-column: 1;; grid-row:1;">
                    Cupping Conducted? 
                </div>
                <div class="s3" style="grid-column: 2 / SPAN 3; grid-row:1;">
                    <input type="radio" name="cupping-conducted" id="cupping-conducted-yes" value="yes">
                    <input type="radio" name="cupping-conducted" id="cupping-conducted-no" value="no">
                </div>
                <div class="s3" style="grid-column: 4 / SPAN 7; grid-row:1;">
                    Cupped by: <input type="text" name="cupped-by" id="cupped-by">
                </div>
                <div style="grid-column:1; grid-row:2;">
                    <p class="s3" style="padding-top: 4pt;padding-left: 11pt;text-indent: 0pt;text-align: left;">Fragrance / Aroma</p>
                    <input style = "width:-webkit-fill-available;" type="range" min="6" max="10" name="fragrance" id="fragrance" list="range-6-10" step="0.25">
                    <datalist id="range-6-10" class="range-6-10">
                        <option value="6">6</option>
                        <option value="6.25"></option>
                        <option value="6.5"></option>
                        <option value="6.75"></option>
                        <option value="7">7</option>
                        <option value="7.25"></option>
                        <option value="7.5"></option>
                        <option value="7.75"></option>
                        <option value="8">8</option>
                        <option value="8.25"></option>
                        <option value="8.5"></option>
                        <option value="8.75"></option>
                        <option value="9">9</option>
                        <option value="9.25"></option>
                        <option value="9.5"></option>
                        <option value="9.75"></option>
                        <option value="10">10</option>
                    </datalist>
                </div>
                <div style="grid-column:2; grid-row:2;">
                    <p class="s3" style="padding-top: 4pt;padding-left: 11pt;text-indent: 0pt;text-align: left;">Flavour</p>
                    <input style = "width:-webkit-fill-available;" type="range" min="6" max="10" name="flavour" id="flavour" list="range-6-10" step="0.25">
                    <datalist id="range-6-10" class="range-6-10">
                        <option value="6">6</option>
                        <option value="6.25"></option>
                        <option value="6.5"></option>
                        <option value="6.75"></option>
                        <option value="7">7</option>
                        <option value="7.25"></option>
                        <option value="7.5"></option>
                        <option value="7.75"></option>
                        <option value="8">8</option>
                        <option value="8.25"></option>
                        <option value="8.5"></option>
                        <option value="8.75"></option>
                        <option value="9">9</option>
                        <option value="9.25"></option>
                        <option value="9.5"></option>
                        <option value="9.75"></option>
                        <option value="10">10</option>
                    </datalist>
                </div>
                <div style="grid-column:3; grid-row:2;">
                    <p class="s3" style="padding-top: 4pt;padding-left: 11pt;text-indent: 0pt;text-align: left;">Aftertaste</p>
                    <input style = "width:-webkit-fill-available;" type="range" min="6" max="10" name="aftertaste" id="aftertaste" list="range-6-10" step="0.25" >
                    <datalist id="range-6-10" class="range-6-10">
                        <option value="6">6</option>
                        <option value="6.25"></option>
                        <option value="6.5"></option>
                        <option value="6.75"></option>
                        <option value="7">7</option>
                        <option value="7.25"></option>
                        <option value="7.5"></option>
                        <option value="7.75"></option>
                        <option value="8">8</option>
                        <option value="8.25"></option>
                        <option value="8.5"></option>
                        <option value="8.75"></option>
                        <option value="9">9</option>
                        <option value="9.25"></option>
                        <option value="9.5"></option>
                        <option value="9.75"></option>
                        <option value="10">10</option>
                    </datalist>
                </div>
                <div style="grid-column:4; grid-row:2;">
                    <p class="s3" style="padding-top: 4pt;padding-left: 11pt;text-indent: 0pt;text-align: left;">Acidity</p>
                    <p style="text-indent: 0pt;line-height: 7pt;text-align: center;">Level</p>
                    <input style = "width:-webkit-fill-available;" type="range" min="0" max="4" name="acidity" id="acidity" list="acidity-list" step="1" >
                    <datalist id="acidity-list" class="acidity-list">
                        <option value="0">High</option>
                        <option value="1"></option>
                        <option value="2">|</option>
                        <option value="3"></option>
                        <option value="4">Low</option>
                    </datalist>
                </div>
                <div style="grid-column:5; grid-row:2;">
                    <p class="s3" style="padding-top: 4pt;padding-left: 11pt;text-indent: 0pt;text-align: left;">Body</p>
                    <p style="text-indent: 0pt;line-height: 7pt;text-align: center;">Level</p>
                    <input style = "width:-webkit-fill-available;" type="range" min="0" max="4" name="body" id="body" list="body-list" step="1" >
                    <datalist id="body-list" class="acidity-list">
                        <option value="0">Heavy</option>
                        <option value="1"></option>
                        <option value="2">|</option>
                        <option value="3"></option>
                        <option value="4">Thin</option>
                    </datalist>
                </div>
                <div style="grid-column:6; grid-row:2;">
                    <p class="s3" style="padding-top: 4pt;padding-left: 11pt;text-indent: 0pt;text-align: left;">Clean Cup</p>
                    <p style="text-indent: 0pt;line-height: 7pt;text-align: center;">Level</p>
                    <input style = "width:-webkit-fill-available;" type="range" min="0" max="4" name="clean-cup" id="clean-up" list="clean-up-list" step="1" >
                    <datalist id="clean-up-list" class="acidity-list">
                        <option value="0">Tainted</option>
                        <option value="1"></option>
                        <option value="2">|</option>
                        <option value="3"></option>
                        <option value="4">Clean</option>
                    </datalist>
                </div>
                <div style="grid-column:7; grid-row:2;">
                    <p class="s3" style="padding-top: 4pt;padding-left: 11pt;text-indent: 0pt;text-align: left;">Sweetness</p>
                    <p style="text-indent: 0pt;line-height: 7pt;text-align: center;">Level</p>
                    <input style = "width:-webkit-fill-available;" type="range" min="0" max="4" name="sweetness" id="sweetness" list="sweetness-list" step="1" >
                    <datalist id="sweetness-list" class="acidity-list">
                        <option value="0">Sour</option>
                        <option value="1"></option>
                        <option value="2">|</option>
                        <option value="3"></option>
                        <option value="4">Sweet</option>
                    </datalist>
                </div>
            </div>

            <p class="s4" style="padding-left: 34pt;text-indent: -23pt;text-align: left;">Packaging &amp; Grinding QC</p>
            <div style="padding:10px; display:grid; column-gap:20px; row-gap:10px; grid-template-columns:2fr repeat(4,1fr);border-style:solid; border-width: 2px; border-left:hidden; border-right: hidden; border-bottom:hidden; ">
                <div style="grid-column: 1; grid-row:1;">
                    <p style="padding-top: 7pt;padding-left: 14pt;text-indent: 0pt;text-align: left;">(Random check on 1 in every 100 bags)</p>
                </div>
                <div style="grid-column: 1; grid-row:2;">
                    <p class="s3" style="padding-top: 4pt;padding-left: 13pt;text-indent: 0pt;text-align: left;">Packaging Integrity Check (Seals, Labels, Expiry Date)</p>
                </div>        
                <div style="grid-column: 2; grid-row:2;">
                    <label for="qc1pass" class="s9" >Pass</label>
                    <input type="radio" name="quality-check-1" id="qc1pass" style="vertical-align: middle;">
                    <label for="qc1fail" class="s9">Fail</label>
                    <input type="radio" name="quality-check-1" id="qc1fail" style="vertical-align: middle;">
                </div>

                <div style="grid-column: 3; grid-row:2;">
                    <label for="qc2pass" class="s9" >Pass</label>
                    <input type="radio" name="quality-check-2" id="qc2pass" style="vertical-align: middle;">
                    <label for="qc2fail" class="s9">Fail</label>
                    <input type="radio" name="quality-check-2" id="qc2fail" style="vertical-align: middle;">
                </div>

                <div style="grid-column: 4; grid-row:2;">
                    <label for="qc3pass" class="s9" >Pass</label>
                    <input type="radio" name="quality-check-3" id="qc3pass" style="vertical-align: middle;">
                    <label for="qc3fail" class="s9">Fail</label>
                    <input type="radio" name="quality-check-3" id="qc3fail" style="vertical-align: middle;">
                </div>

                <div style="grid-column: 5; grid-row:2;">
                    <label for="qc4pass" class="s9" >Pass</label>
                    <input type="radio" name="quality-check-4" id="qc4pass" style="vertical-align: middle;">
                    <label for="qc4fail" class="s9">Fail</label>
                    <input type="radio" name="quality-check-4" id="qc4fail" style="vertical-align: middle;">
                </div>

                <div style="grid-column:1; grid-row:3;">
                    <p class="s3" style="padding-left: 14pt;text-indent: 0pt;text-align: left;">Weight Accuracy (Bag weight +/- 0.03% / kg)</p>
                </div>
                <div style="grid-column:2; grid-row:3;">
                    <input style="width:-webkit-fill-available;" type="number" name="weight-accuracy-1" id="weight-accuracy-1">
                </div>
                <div style="grid-column:3; grid-row:3;">
                    <input style="width:-webkit-fill-available;" type="number" name="weight-accuracy-2" id="weight-accuracy-2">
                </div>
                <div style="grid-column:4; grid-row:3;">
                    <input style="width:-webkit-fill-available;" type="number" name="weight-accuracy-3" id="weight-accuracy-3">
                </div>
                <div style="grid-column:5; grid-row:3;">
                    <input style="width:-webkit-fill-available;" type="number" name="weight-accuracy-4" id="weight-accuracy-4">
                </div>

                <div style="grid-column: 1; grid-row:4;">
                    <p class="s3" style="padding-left: 14pt;text-indent: 0pt;text-align: left;">Grind Size Consistency (If applicable)</p>                    
                </div>
                <div style="grid-column: 2; grid-row:4;">
                    <label class="s3" for="grind-size-espresso">Espresso</label>
                    <input type="radio" name="grind-size" id="grind-size-espresso" class="s9" style="vertical-align: middle;">
                    <label class="s3" for="grind-size-filter">Filter</label>
                    <input type="radio" name="grind-size" id="grind-size-filter" class="s9" style="vertical-align: middle;">
                </div>

                <div style="grid-column:3 / SPAN 5; grid-row:4;">
                    <p class="s3" style="width:-webkit-fill-available;" for="packaging-qc-by">Packaging QC By:
                    <input type="text" name="packaging-qc-by" id="packaging-qc-by" style="width: 39vw;"></p>
                </div>

            </div>

            <p class="s4" style="padding-top: 9pt;padding-bottom: 2pt;padding-left: 36pt;text-indent: -22pt;text-align: left;">Final Approval &amp; Actions Taken</p>
            <div style="padding:10px; display:grid; column-gap:20px; row-gap:10px; grid-template-columns:repeat(5,1fr);border-style:solid; border-width: 2px; border-left:hidden; border-right: hidden; border-bottom:hidden; ">
                <div style="grid-column:1; grid-row:1;">
                    <p class="s3" style="/*padding-left: 37pt;text-indent: 0pt;text-align: left;*/">Batch Approved for Packaging? <span>            
                </div>
                <div style="grid-column: 2; grid-row:1;">
                    <label class="s3" for="batch-approved-yes">Yes</label>
                    <input type="radio" name="batch-approved" id="batch-approved-yes" class="s9" style="vertical-align: middle;">
                    <label class="s3" for="batch-approved-no">No</label>
                    <input type="radio" name="batch-approved" id="batch-approved-no" class="s9" style="vertical-align: middle;">
                </div>
                <div style="grid-column: 4; grid-row: 1;">
                    <p class="s15">Final QC Approval by:</p>            
                </div>
                <div style="grid-column: 5; grid-row: 1;">
                    <input type="text" name="final-qc-approval" id="final-qc-approval" style="width:-webkit-fill-available;">
                </div>

                <div style="grid-column: 1 / SPAN 4; grid-row: 2;">
                    <p class="s3">If No, Action Taken:</p>
                </div>
                <div style="grid-column:1; grid-row:3;">
                    <label class="s3" for="action-taken-adjust">Adjust Profile &amp; Re-roast</label>
                    <input type="checkbox" name="action-taken-adjust" id="action-taken-adjust">
                </div>
                <div style="grid-column:2; grid-row:3;">
                    <label class="s3" for="action-taken-blend">Blend with Another Batch</label>
                    <input type="checkbox" name="action-taken-blend" id="action-taken-blend">
                </div>
                <div style="grid-column:3; grid-row:3;">
                    <label class="s3" for="action-taken-reject">Reject &amp; Report</label>
                    <input type="checkbox" name="action-taken-reject" id="action-taken-reject">
                </div>

                <div style="grid-column:4; grid-row:3;">
                    <p class="s15">Time Completed:</p>            
                </div>
                <div style="grid-column:5; grid-row:3;">
                    <input type="time" name="time-completed" id="time-completed">
                </div>

            </div>
                    </form>
