    <div class="col-6" id="SHIFT_START_MODAL" style="display: none;">
        <div class="modal-header">
            <h6 class="modal-title text-dark">STARTING BALANCE / CHANGE FUND</h6>
        </div>
        <div class="modal-body">
            <form id="form-shift-start">
                <div class="form-group row">
                    <label class="col-4 col-form-label">Amount:</label>
                    <div class="col-8">
                        <input type="number" class="form-control text-right" id="SHIFT_START_AMOUNT" name="SHIFT_START_AMOUNT" value="" autocomplete="off" autofocus onclick="this.select();">
                        <div class="invalid-feedback">Please enter amount.</div>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-secondary" onclick="PRELOAD_LOCK_POS_SCREEN();">Close</button>
            <button type="button" class="btn btn-success" id="SHIFT_START_BBI">SUBMIT</button>
        </div>
    </div>

    <div class="col-8" id="PROGRESSBAR_MODAL" style="display: none;">
        <div class="modal-body">
            <h6>Generating Z Reading Report, please wait...</h6>
            <div class="progress">
                <div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%;"></div>
            </div>
        </div>
    </div>
    
    
    
    <div class="col-6" id="SHIFT_END_MODAL" style="display: none;">
        <div class="modal-header">
            <h6 class="modal-title text-dark">CASH BREAKDOWN</h6>
        </div>
        <div class="modal-body">
            <form id="form-shift-end">
                <div class="form-group row">
                    <div class="col-3">
                        <h5 class="mb-0 text-blue text-right">1,000</h5>
                    </div>
                    <div class="col-1">
                        <h5 class="mb-0 text-blue text-center">X</h5>
                    </div>
                    <div class="col-3">
                        <input type="number" class="form-control form-control-sm text-right" id="CASHBREAKDOWN_1000" name="CASHBREAKDOWN_1000" value="" autocomplete="off">
                        <div class="invalid-feedback"></div>
                    </div>
                    <div class="col-1">
                        <h5 class="mb-0 text-blue text-center">=</h5>
                    </div>
                    <div class="col-4">
                        <input type="hidden" id="CASHBREAKDOWN_1000_TOTAL" name="CASHBREAKDOWN_1000_TOTAL" value="" autocomplete="off">    
                        <h5 class="mb-0 text-blue text-right">0.00</h5>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-3">
                        <h5 class="mb-0 text-blue text-right">500</h5>
                    </div>
                    <div class="col-1">
                        <h5 class="mb-0 text-blue text-center">X</h5>
                    </div>
                    <div class="col-3">
                        <input type="number" class="form-control form-control-sm text-right" id="CASHBREAKDOWN_500" name="CASHBREAKDOWN_500" value="" autocomplete="off">
                        <div class="invalid-feedback"></div>
                    </div>
                    <div class="col-1">
                        <h5 class="mb-0 text-blue text-center">=</h5>
                    </div>
                    <div class="col-4">
                        <input type="hidden" id="CASHBREAKDOWN_500_TOTAL" name="CASHBREAKDOWN_500_TOTAL" value="" autocomplete="off">
                        <h5 class="mb-0 text-blue text-right">0.00</h5>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-3">
                        <h5 class="mb-0 text-blue text-right">200</h5>
                    </div>
                    <div class="col-1">
                        <h5 class="mb-0 text-blue text-center">X</h5>
                    </div>
                    <div class="col-3">
                        <input type="number" class="form-control form-control-sm text-right" id="CASHBREAKDOWN_200" name="CASHBREAKDOWN_200" value="" autocomplete="off">
                        <div class="invalid-feedback"></div>
                    </div>
                    <div class="col-1">
                        <h5 class="mb-0 text-blue text-center">=</h5>
                    </div>
                    <div class="col-4">
                        <input type="hidden" id="CASHBREAKDOWN_200_TOTAL" name="CASHBREAKDOWN_200_TOTAL" value="" autocomplete="off">
                        <h5 class="mb-0 text-blue text-right">0.00</h5>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-3">
                        <h5 class="mb-0 text-blue text-right">100</h5>
                    </div>
                    <div class="col-1">
                        <h5 class="mb-0 text-blue text-center">X</h5>
                    </div>
                    <div class="col-3">
                        <input type="number" class="form-control form-control-sm text-right" id="CASHBREAKDOWN_100" name="CASHBREAKDOWN_100" value="" autocomplete="off">
                        <div class="invalid-feedback"></div>
                    </div>
                    <div class="col-1">
                        <h5 class="mb-0 text-blue text-center">=</h5>
                    </div>
                    <div class="col-4">
                        <input type="hidden" id="CASHBREAKDOWN_100_TOTAL" name="CASHBREAKDOWN_100_TOTAL" value="" autocomplete="off">
                        <h5 class="mb-0 text-blue text-right">0.00</h5>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-3">
                        <h5 class="mb-0 text-blue text-right">50</h5>
                    </div>
                    <div class="col-1">
                        <h5 class="mb-0 text-blue text-center">X</h5>
                    </div>
                    <div class="col-3">
                        <input type="number" class="form-control form-control-sm text-right" id="CASHBREAKDOWN_50" name="CASHBREAKDOWN_50" value="" autocomplete="off">
                        <div class="invalid-feedback"></div>
                    </div>
                    <div class="col-1">
                        <h5 class="mb-0 text-blue text-center">=</h5>
                    </div>
                    <div class="col-4">
                        <input type="hidden" id="CASHBREAKDOWN_50_TOTAL" name="CASHBREAKDOWN_50_TOTAL" value="" autocomplete="off">
                        <h5 class="mb-0 text-blue text-right">0.00</h5>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-3">
                        <h5 class="mb-0 text-blue text-right">20</h5>
                    </div>
                    <div class="col-1">
                        <h5 class="mb-0 text-blue text-center">X</h5>
                    </div>
                    <div class="col-3">
                        <input type="number" class="form-control form-control-sm text-right" id="CASHBREAKDOWN_20" name="CASHBREAKDOWN_20" value="" autocomplete="off">
                        <div class="invalid-feedback"></div>
                    </div>
                    <div class="col-1">
                        <h5 class="mb-0 text-blue text-center">=</h5>
                    </div>
                    <div class="col-4">
                        <input type="hidden" id="CASHBREAKDOWN_20_TOTAL" name="CASHBREAKDOWN_20_TOTAL" value="" autocomplete="off">
                        <h5 class="mb-0 text-blue text-right">0.00</h5>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-3">
                        <h5 class="mb-0 text-blue text-right">10</h5>
                    </div>
                    <div class="col-1">
                        <h5 class="mb-0 text-blue text-center">X</h5>
                    </div>
                    <div class="col-3">
                        <input type="number" class="form-control form-control-sm text-right" id="CASHBREAKDOWN_10" name="CASHBREAKDOWN_10" value="" autocomplete="off">
                        <div class="invalid-feedback"></div>
                    </div>
                    <div class="col-1">
                        <h5 class="mb-0 text-blue text-center">=</h5>
                    </div>
                    <div class="col-4">
                        <input type="hidden" id="CASHBREAKDOWN_10_TOTAL" name="CASHBREAKDOWN_10_TOTAL" value="" autocomplete="off">
                        <h5 class="mb-0 text-blue text-right">0.00</h5>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-3">
                        <h5 class="mb-0 text-blue text-right">5</h5>
                    </div>
                    <div class="col-1">
                        <h5 class="mb-0 text-blue text-center">X</h5>
                    </div>
                    <div class="col-3">
                        <input type="number" class="form-control form-control-sm text-right" id="CASHBREAKDOWN_5" name="CASHBREAKDOWN_5" value="" autocomplete="off">
                        <div class="invalid-feedback"></div>
                    </div>
                    <div class="col-1">
                        <h5 class="mb-0 text-blue text-center">=</h5>
                    </div>
                    <div class="col-4">
                        <input type="hidden" id="CASHBREAKDOWN_5_TOTAL" name="CASHBREAKDOWN_5_TOTAL" value="" autocomplete="off">
                        <h5 class="mb-0 text-blue text-right">0.00</h5>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-3">
                        <h5 class="mb-0 text-blue text-right">1</h5>
                    </div>
                    <div class="col-1">
                        <h5 class="mb-0 text-blue text-center">X</h5>
                    </div>
                    <div class="col-3">
                        <input type="number" class="form-control form-control-sm text-right" id="CASHBREAKDOWN_1" name="CASHBREAKDOWN_1" value="" autocomplete="off">
                        <div class="invalid-feedback"></div>
                    </div>
                    <div class="col-1">
                        <h5 class="mb-0 text-blue text-center">=</h5>
                    </div>
                    <div class="col-4">
                        <input type="hidden" id="CASHBREAKDOWN_1_TOTAL" name="CASHBREAKDOWN_1_TOTAL" value="" autocomplete="off">
                        <h5 class="mb-0 text-blue text-right">0.00</h5>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-3">
                        <h5 class="mb-0 text-blue text-right">Cents</h5>
                    </div>
                    <div class="col-1"></div>
                    <div class="col-3">
                        <input type="number" class="form-control form-control-sm text-right" id="CASHBREAKDOWN_CENTS" name="CASHBREAKDOWN_CENTS" value="" autocomplete="off">
                        <div class="invalid-feedback"></div>
                    </div>
                    <div class="col-1">
                        <h5 class="mb-0 text-blue text-center">=</h5>
                    </div>
                    <div class="col-4">
                        <input type="hidden" id="CASHBREAKDOWN_CENTS_TOTAL" name="CASHBREAKDOWN_CENTS_TOTAL" value="" autocomplete="off">
                        <h5 class="mb-0 text-blue text-right">0.00</h5>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-3">
                        <h5 class="mb-0 text-blue text-right">Checks</h5>
                    </div>
                    <div class="col-2">
                        <input type="number" class="form-control form-control-sm text-right" id="CASHBREAKDOWN_CHECKS_QTY" name="CASHBREAKDOWN_CHECKS_QTY" value="" autocomplete="off">
                        <div class="invalid-feedback"></div>
                    </div>
                    <div class="col-3">
                        <input type="number" class="form-control form-control-sm text-right" id="CASHBREAKDOWN_CHECKS" name="CASHBREAKDOWN_CHECKS" value="" autocomplete="off">
                        <div class="invalid-feedback"></div>
                    </div>
                    <div class="col-1">
                        <h5 class="mb-0 text-blue text-center">=</h5>
                    </div>
                    <div class="col-3">
                        <input type="hidden" id="CASHBREAKDOWN_CHECKS_TOTAL" name="CASHBREAKDOWN_CHECKS_TOTAL" value="" autocomplete="off">
                        <h5 class="mb-0 text-blue text-right">0.00</h5>
                    </div>
                </div>
                <div class="form-group row border-top border-bottom border-blue">
                    <label class="col-4 col-form-label">TOTAL:</label>
                    <div class="col-8">
                        <h3 class="mb-0 text-blue text-right" id="CASHBREAKDOWN_TOTAL">0.00</h3>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-secondary" id="SHIFT_END_MODAL_MODAL_CLOSE_CMD">Close</button>
            <button type="button" class="btn btn-success" id="SHIFT_END_BBI">PRINT &amp; END SHIFT</button>
        </div>
    </div>

    <div class="col-6" id="SHIFT_END_MODAL_2" style="display: none;">
        <div class="modal-header">
            <h6 class="modal-title text-dark">END SHIFT</h6>
        </div>
        <div class="modal-body">
            <form id="form-shift-end-2">
                <div class="form-group row">
                    <label class="col-4 col-form-label">Cashier</label>
                    <div class="col-8">
                        <input type="text" class="form-control" id="SHIFT_END_NAME" name="SHIFT_END_NAME" readonly>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-4 col-form-label">START TIME:</label>
                    <div class="col-8">
                        <input type="text" class="form-control" id="SHIFT_END_START_TIME" name="SHIFT_END_START_TIME" readonly>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-4 col-form-label">END TIME:</label>
                    <div class="col-8">
                        <input type="text" class="form-control" id="SHIFT_END_END_TIME" name="SHIFT_END_END_TIME" readonly>
                    </div>
                </div>
                <p><strong>NOTE</strong>: X Reading will also be printed when you end your shift.</p>
            </form>
        </div>
        <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-secondary" id="SHIFT_END_MODAL_2_MODAL_CLOSE_CMD">Cancel</button>
            <div>
                <button type="button" class="btn btn-success" id="SHIFT_END_BBI_2">END SHIFT</button>
            </div>
        </div>
    </div>