<template>
    <div class="disp-center popup-vue-xlg" style="width: 95%; height: 670px"><!--NEED CLASSES FOR MODAL -->
        <!--NEED H4 FOR CLOSE BUTTON -->
        <h4 class="btnx"
            style="font-family: arial !important;"
            @click="_closePopup()">
            X
        </h4>
        <div>
            <h2 id="title" class="text-center">Building Permit</h2>
            <hr style="margin: 10px 0"> 
            <div class="popup-vue-body-xlg sc5 disp-style-col">
                <div class="disp-style-row git-div-border" style="margin-bottom: 8px; width: 100%; min-height: 100px">
                    <table class="tbl-prog" cellspacing="0" cellpadding="0">
                        <th style="width: 8.33%"><div class="div-prog-bar div-prog-bar-left" :style="'background-color: ' + formatColor(0)"></div></th>
                        <th style="width: 8.33%"><div class="div-prog-bar" :style="'background-color: ' + formatColor(0)"></div></th>
                        <th style="width: 0%;"><div class="div-prog-circle" :style="'background-color: ' + formatColor(1)"><h3 style="text-align: center">1</h3></div></th>
                        <th style="width: 8.33%"><div class="div-prog-bar" :style="'background-color: ' + formatColor(1)"></div></th>
                        <th style="width: 8.33%"><div class="div-prog-bar" :style="'background-color: ' + formatColor(1)"></div></th>
                        <th style="width: 0%;"><div class="div-prog-circle" :style="'background-color: ' + formatColor(2)"><h3 style="text-align: center">2</h3></div></th>
                        <th style="width: 8.33%"><div class="div-prog-bar" :style="'background-color: ' + formatColor(2)"></div></th>
                        <th style="width: 8.33%"><div class="div-prog-bar" :style="'background-color: ' + formatColor(2)"></div></th>
                        <th style="width: 0%;"><div class="div-prog-circle" :style="'background-color: ' + formatColor(3)"><h3 style="text-align: center">3</h3></div></th>
                        <th style="width: 8.33%"><div class="div-prog-bar" :style="'background-color: ' + formatColor(3)"></div></th>
                        <th style="width: 8.33%"><div class="div-prog-bar" :style="'background-color: ' + formatColor(3)"></div></th>
                        <th style="width: 0%;"><div class="div-prog-circle" :style="'background-color: ' + formatColor(4)"><h3 style="text-align: center">4</h3></div></th>
                        <th style="width: 8.33%"><div class="div-prog-bar" :style="'background-color: ' + formatColor(4)"></div></th>
                        <th style="width: 8.33%"><div class="div-prog-bar" :style="'background-color: ' + formatColor(4)"></div></th>
                        <th style="width: 0%;"><div class="div-prog-circle" :style="'background-color: ' + formatColor(5)"><h3 style="text-align: center">5</h3></div></th>
                        <th style="width: 8.33%"><div class="div-prog-bar" :style="'background-color: ' + formatColor(5)"></div></th>
                        <th style="width: 8.33%"><div class="div-prog-bar div-prog-bar-right" :style="'background-color: ' + formatColor(5)"></div></th>
                        <tr>
                            <td></td>
                            <td colspan="3" style="text-align: center" :style="'color: ' + formatColor(1)"><h5>Assessment of Requirements</h5></td>
                            <td colspan="3" style="text-align: center" :style="'color: ' + formatColor(2)"><h5>Approval</h5></td>
                            <td colspan="3" style="text-align: center" :style="'color: ' + formatColor(3)"><h5>Assessment of Fees</h5></td>
                            <td colspan="3" style="text-align: center" :style="'color: ' + formatColor(4)"><h5>Payment</h5></td>
                            <td colspan="3" style="text-align: center" :style="'color: ' + formatColor(5)"><h5>Complete</h5></td>
                            <td></td>
                        </tr>
                    </table>
                </div>
                <div class="disp-style-row" style="width: 100%">
                    <div class="disp-style-col" style="max-width: 520px; width: 520px; min-width: 520px">
                        <div class="disp-style-col git-div-border" style="width: 100%; max-height: 134px;">
                            <div class="disp-style-row">
                                <h4>Building Permit Application Details</h4>
                                <span @click="expandDetails()"  style="margin-left: auto; font-size: 38px; cursor: pointer">
                                    <i id="btn_appl_detail" class="fa-solid fa-angle-up" aria-hidden="true"></i>
                                </span>
                            </div>
                            <div class="div-details-collapse">
                                <table class="tbl-bldg-details">
                                    <tr>
                                        <td><i>Status</i></td>
                                        <td><a :class="'git-lbl git-lbl-' + ( app_lvl === 9 ? 'success' : 'info')">{{ status }}</a></td>
                                    </tr>
                                    <tr>
                                        <td><i>Date Created</i></td>
                                        <td>{{ bldg_app.created_at }}</td>
                                    </tr>
                                    <!-- <tr v-for="data in bldg_app" :key="data.grpID">
                                        <td><i>{{ data.type }}</i></td>
                                        <td>{{ data.annualins_no }}</td>
                                    </tr> -->
                                </table>
                            </div>
                        </div>
                        <div class="disp-style-row git-div-border" style="margin-top: 8px; width: 100%">
                            <div class="disp-style-col div-nav-oth">
                                <div class="git-tooltip disp-style-row">
                                    <span  @click="clickDetail(0)">
                                        <i class="fa-solid fa-user nav-circle" aria-hidden="true"></i>
                                    </span>
                                    <span class="git-tooltiptext">Locator/Applicants Details</span>
                                </div>
                                <div class="git-tooltip disp-style-row">
                                    <span  @click="clickDetail(1)">
                                        <i class="fa-solid fa-building nav-circle"></i>
                                    </span>
                                    <span class="git-tooltiptext">Building Details</span>
                                </div>
                                <div class="git-tooltip disp-style-row">
                                    <span  @click="clickDetail(2)">
                                        <i class="fa-solid fa-wrench nav-circle" aria-hidden="true"></i>
                                    </span>
                                    <span class="git-tooltiptext">Engineer/Architect Details</span>
                                </div>
                                <div class="git-tooltip disp-style-row">
                                    <span  @click="clickDetail(3)">
                                        <i class="fa-solid fa-check nav-circle" aria-hidden="true"></i>
                                    </span>
                                    <span class="git-tooltiptext">Approval History</span>
                                </div>
                                <div class="git-tooltip disp-style-row">
                                    <span  @click="clickDetail(4)">
                                        <i class="fa-solid fa-money-bill nav-circle" aria-hidden="true"></i>
                                    </span>
                                    <span class="git-tooltiptext">Invoice Details</span>
                                </div>
                            </div>
                            <div class="div-detail-contents">
                                <div class="disp-style-col" style="width: 100%; oveflow: hidden">
                                    <div class="disp-style-row">
                                        <h4 id="h4_detail_title">Locator Details</h4>
                                    </div>
                                    <div class="sc5" style="max-height: 450px; overflow: auto">
                                        <table class="table table-sm table-striped">
                                            <thead id="thead_details">
                                            </thead>
                                            <tbody id="tbody_details">
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="disp-style-col git-div-border sc5" style="margin-left: 8px; width: 100%; overflow: auto !important; height: 590px">
                        <div class="div-tbl-docs">
                            <table class="table table-sm table-striped tbl-req">
                                <thead>
                                    <tr>
                                        <th>REQUIREMENT</th>
                                        <th>FILE UPLOADED</th>
                                        <th>STATUS</th>
                                        <th>REMARKS HISTORY</th>
                                        <th>PERMIT NO.</th>
                                        <th>DATE CHECKED</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="data in bldg_app_req" :key="data.id">
                                        <td><b :style="data.isRequired === '1' ? 'color: #B71C1C' : ''">{{ data.requirement }}</b></td>
                                        <td>
                                            <img v-show="_getFileExt(data.file_uploaded) !== 'PDF'" @click="_showImage(data.reqID)" :src="_fileURL(data.file_uploaded)" style="width: 100px; cursor: pointer">
                                            <i v-show="_getFileExt(data.file_uploaded) === 'PDF'" class="fa-solid fa-file-pdf"></i>
                                        </td>
                                        <td>
                                            <div v-show="_getFileExt(data.file_uploaded) !== '' && data.isValid === '1'" class="disp-style-row">
                                                <i class="fa-solid fa-check" style="font-size: 16px; color: #2E7D32"></i><h6 style="color: #2E7D32">&nbsp;<b>VALID</b></h6>
                                            </div>
                                            <div v-show="_getFileExt(data.file_uploaded) !== '' && data.isValid !== '1'" class="disp-style-row">
                                                <i class="fa-solid fa-circle-xmark" style="font-size: 16px; color: #2E7D32"></i><h6 style="color: #C62828">&nbsp;<b>NOT VALID</b></h6>
                                            </div>
                                            <div v-show="_getFileExt(data.file_uploaded) === ''" class="disp-style-row" style="color: #0D47A1; text-align: center;">
                                                <h6><b>NO FILE SUBMITTED</b></h6>
                                            </div>
                                        </td>
                                        <td><p v-show="data.hist_remarks !== null" style="margin: 0px">Remarks ({{ data.rem_created }}): <b>{{ data.hist_remarks }}</b></p></td>
                                        <td>{{  }}</td>
                                        <td>{{  }}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import moment from 'moment';
    export default{
        data() {
            return {
                //DATA HERE
                date_created: "",
                application_no: "",
                status: "",
                status_id: "",
                bldg_app: [],
                loc_details: [],
                pay_details: [],
                bldg_app_hist: [],
                bldg_app_req: [],
                bldg_invoice: [],
                app_hist: [],
                ins_req: [],
                col_blue: '#42A5F5',
                col_green: '#7CB342',
                col_grey: '#BDBDBD',
                app_lvl: 0
            }
        },
        mounted() {
            this.loadData();
        },
        methods: {
            loadData() {
                this.$loading(true);
                $("body").css({ 'cursor': 'wait' });
                this._clearImage(); //CLEAR MO DYAY IMAGES TAPNU FRESH MANEN NGA LUKAT AHH...
                
                this._vueGETfromParam(
                    'locator',
                    'fetch_bldg_app',
                    { id: parseInt(this.$cookies.get('uid')) },
                    res1 => {
                        this.bldg_app = res1;
                        this.app_lvl = parseInt(res1.bldg_status_id);

                        this._vueGETfromParam(
                            'locator',
                            'fetch_status_desc',
                            { },
                            res2 => {
                                this.status = res2.find(x => parseInt(x.id) === this.app_lvl).status_description;
                                this._vueGETfromParam(
                                    'locator',
                                    'fetch_locator_details',
                                    { id: parseInt(this.$cookies.get('uid')) },
                                    res3 => {
                                        this.loc_details = res3;
                                        this._vueGETfromParam(
                                            'obo_building',
                                            'fetch_bldg_approval_detail',
                                            { id: this.$popup_params[0].id },
                                            res4 => {
                                                this.bldg_app_hist = res4;
                                                this._vueGETfromParam(
                                                    'obo_building',
                                                    'fetch_invoice_details',
                                                    { id: this.$popup_params[0].id },
                                                    res5 => {
                                                        this.bldg_invoice = res5;
                                                        this._vueGETfromParam(
                                                            'locator',
                                                            'fetch_bldg_req',
                                                            { id: this.$popup_params[0].id },
                                                            res6 => {
                                                                this.bldg_app_req = res6;

                                                                for (var i = 0; i < res6.length; i++)
                                                                    if (res6[i].file_uploaded !== null)
                                                                        this._addImage(res6[i].file_uploaded, res6[i].reqID);
                                                                    
                                                                this.$loading(false);
                                                                $("body").css({ 'cursor': 'default' });
                                                                this.clickDetail(0);
                                                            }
                                                        );
                                                    }
                                                );
                                            }
                                        );
                                    }
                                );
                            }
                        );
                    }
                );
            },
            formatColor(id) {
                var color = "";
                if (id === 0) {
                    if (this.app_lvl === 9)
                        color = this.col_green;
                    else
                        color = this.col_blue;
                }
                else if (id === 1) {
                    if (this.app_lvl === 1 || this.app_lvl === 2 || this.app_lvl === 9)
                        color = this.col_green;
                    else {
                        if ((this.app_lvl > 2 && this.app_lvl !== 8) || (this.app_lvl === 10 || this.app_lvl === 11))
                            color = this.col_blue;
                        else
                            color = this.col_grey;
                    }
                }
                else if (id === 2) {
                    if (this.app_lvl === 3 || this.app_lvl === 4 || this.app_lvl === 7 || this.app_lvl === 9 || this.app_lvl === 10 || this.app_lvl === 11)
                        color = this.col_green;
                    else {
                        if (this.app_lvl > 4 && this.app_lvl !== 8)
                            color = this.col_blue;
                        else
                            color = this.col_grey;
                    }
                }
                else if (id === 3) {
                    if (this.app_lvl === 5 || this.app_lvl === 9)
                        color = this.col_green;
                    else {
                        if (this.app_lvl > 5 && this.app_lvl !== 7 && this.app_lvl !== 8 && this.app_lvl !== 10 && this.app_lvl !== 11)
                            color = this.col_blue;
                        else
                            color = this.col_grey;
                    }
                }
                else if (id === 4) {
                    if (this.app_lvl === 6 || this.app_lvl === 9)
                        color = this.col_green;
                    else {
                        if (this.app_lvl > 6 && this.app_lvl !== 7 && this.app_lvl !== 8 && this.app_lvl !== 10 && this.app_lvl !== 11)
                            color = this.col_blue;
                        else
                            color = this.col_grey;
                    }
                }
                else if (id === 5) {
                    if (this.app_lvl === 9)
                        color = this.col_green;
                    else 
                        color = this.col_grey;
                }
                return color;
            },
            expandDetails() {
                if ($('.div-details-collapse').height() < 60) {
                    $('#btn_appl_detail')
                        .removeClass('fa-angle-down').addClass('fa-angle-up');
                    $(".div-details-collapse").animate({
                        height: '+=80px'
                    }, 400);
                }
                else {
                    $('#btn_appl_detail')
                        .removeClass('fa-angle-down').addClass('fa-angle-down');
                    $(".div-details-collapse").animate({
                        height: '-=80px'
                    }, 400);
                }
            },
            clickDetail (index) {
                $('.div-nav-oth svg').removeClass('div-nav-oth-active');
                $('.div-nav-oth div:nth-child(' + (index + 1) + ') svg').addClass('div-nav-oth-active');

                if (index === 0) {
                    var mobileNos = '';
                    try {
                        var tmp = JSON.parse(this.eng_details.landline_no);

                        for (var i = 0; i < tmp.length; i++)
                            if (tmp[i].trim() !== '')
                                    mobileNos += tmp[i] + ", ";

                        tmp = JSON.parse(this.eng_details.mobile_no);

                        for (var i = 0; i < tmp.length; i++)
                            if (tmp[i].trim() !== '')
                                    mobileNos += tmp[i] + ", ";
                                
                        mobileNos = mobileNos.substring(0, mobileNos.length - 2);
                    } catch { }

                    var tmp = JSON.parse(this.loc_details.mobile_no);

                    $('#h4_detail_title').html('Locator Details');
                    $('#thead_details').html('');
                    $('#tbody_details').html(`
                        <tr>
                            <td>Locator Name</td>
                            <td>` + this.loc_details.name + `</td>
                        </tr>
                        <tr>
                            <td>Address</td>
                            <td>` + this.loc_details.address + `</td>
                        </tr>
                        <tr>
                            <td>Mobile Number</td>
                            <td>` + this._arrToList(this.loc_details.mobile_no) + `</td>
                        </tr>
                        <tr>
                            <td>Landline Number</td>
                            <td>` + this._arrToList(this.loc_details.landline_no) + `</td>
                        </tr>
                        <tr>
                            <td>Email Address</td>
                            <td>` + this.loc_details.email + `</td>
                        </tr>
                    `);
                }
                else if (index === 1) {
                    var bldg_detail = JSON.parse(this.bldg_app.bldg_det);

                    $('#h4_detail_title').html('Building Details');
                    $('#thead_details').html('');
                    $('#tbody_details').html(`
                        <tr>
                            <td>Form of Ownership</td>
                            <td>` + this.bldg_app.ownership_form + `</td>
                        </tr>
                        <tr>
                            <td>Main Economic Activity/Kind Of Business</td>
                            <td>` + this.bldg_app.business_type + `</td>
                        </tr>
                        <tr>
                            <td>Description</td>
                            <td>` + this.bldg_app.bldg_desc + `</td>
                        </tr>
                        <tr>
                            <td>Location of Construction</td>
                            <td>` + this.bldg_app.location_constr + `</td>
                        </tr>
                        <tr>
                            <td>Total Floor Area</td>
                            <td>` + this._strIFStrExists(bldg_detail[0]) + `</td>
                        </tr>
                        <tr>
                            <td>Estimate Project Cost (PHP)</td>
                            <td>` + this._formatToPeso(this.bldg_app.est_cost) + `</td>
                        </tr>
                        <tr>
                            <td>Date of Start of Construction</td>
                            <td>` + this.bldg_app.date_start + `</td>
                        </tr>
                        <tr>
                            <td>Date of Completion</td>
                            <td>` + this.bldg_app.date_completed + `</td>
                        </tr>
                        <tr>
                            <td>No. of Storeys</td>
                            <td>` + this._strIFStrExists(bldg_detail[1]) + `</td>
                        </tr>
                        <tr>
                            <td>No. of Units</td>
                            <td>` + this._strIFStrExists(bldg_detail[2]) + `</td>
                        </tr>
                    `);
                }
                else if (index === 2) {
                    var headengr = JSON.parse(this.bldg_app.headengr_det);

                    var archneng = '';
                    var numbr = '';
                    var prcno = '';
                    var addr = '';
                    var ptrno = '';
                    var prof = '';

                    if (headengr !== null) {
                        archneng = this._strIFStrExists(headengr[0]);
                        numbr = this._strIFStrExists(headengr[1]);
                        prcno = this._strIFStrExists(headengr[2]);
                        addr = this._strIFStrExists(headengr[3]);
                        ptrno = this._strIFStrExists(headengr[4]);
                        prof = this._strIFStrExists(headengr[5]);
                    }

                    $('#h4_detail_title').html('Architect / Civil Engineer Signed And Sealed Plans & Specifications');
                    $('#thead_details').html('');
                    $('#tbody_details').html(`
                        <tr>
                            <td>Name of Architect/Engineer</td>
                            <td>` + archneng + `</td>
                        </tr>
                        <tr>
                            <td>Phone Number</td>
                            <td>` + numbr + `</td>
                        </tr>
                        <tr>
                            <td>PRC Reg No.</td>
                            <td>` + prcno + `</td>
                        </tr>
                        <tr>
                            <td>Address</td>
                            <td>` + addr + `</td>
                        </tr>
                        <tr>
                            <td>PTR No.</td>
                            <td>` + ptrno + `</td>
                        </tr>
                        <tr>
                            <td>Profession</td>
                            <td>` + prof + `</td>
                        </tr>
                    `);
                }
                else if (index === 3) {
                    $('#h4_detail_title').html('Approval History');
                    if (this.bldg_app_hist.length !== 0) {
                        var arch_dapproved = this._strIFKeyExists(this.bldg_app_hist[0], 'date_approve');
                        var bo_dapproved = this._strIFKeyExists(this.bldg_app_hist[1], 'date_approve');
                        var cse_dapproved = this._strIFKeyExists(this.bldg_app_hist[2], 'date_approve');
                        var pce_dapproved = this._strIFKeyExists(this.bldg_app_hist[3], 'date_approve');

                        var arch_approved = this._strIFKeyExists(this.bldg_app_hist[0], 'isApproved');
                        var bo_approved = this._strIFKeyExists(this.bldg_app_hist[1], 'isApproved');
                        var cse_approved = this._strIFKeyExists(this.bldg_app_hist[2], 'isApproved');
                        var pce_approved = this._strIFKeyExists(this.bldg_app_hist[3], 'isApproved');

                        $('#thead_details').html(`
                            <tr>
                                <th>Approval</th>
                                <th>Status</th>
                                <th style="width: 120px">Date Start</th>
                                <th style="width: 120px">Date Approved</th>
                            </tr>
                        `);
                        $('#tbody_details').html(
                            `
                            <tr>
                                <td>OBO Secretary</td>
                                <td>Added Approval</td>
                                <td>` + moment(this._strIFStrExists(this.bldg_permit.cse_dstart)).format('MMMM DD, YYYY h:mm A') + `</td>
                                <td></td>
                            </tr>
                            ` +
                            this.addAppHist('Architect', arch_dapproved != '' && arch_approved !== null, this.bldg_permit.cse_dstart, arch_dapproved, arch_approved) + 
                            this.addAppHist('Civil/Structural Engineer', cse_dapproved != '' && cse_approved !== null, this.bldg_permit.cse_dstart, cse_dapproved, cse_approved) + 
                            this.addAppHist('President and CEO', pce_dapproved != '' && pce_approved !== null, this.bldg_permit.cse_dstart, pce_dapproved, pce_approved) + 
                            this.addAppHist('Building Official', bo_dapproved != '' && bo_approved !== null, this.bldg_permit.cse_dstart, bo_dapproved, bo_approved) + 
                            `
                            <tr>
                                <td>Application from Issuance to Payment</td>
                                <td></td>
                                <td>` + moment(this._strIFStrExists(this.bldg_issue_pay.date_payment)).format('MMMM DD, YYYY h:mm A') + `</td>
                                <td></td>
                            </tr>
                        `);
                    }
                    else {
                        $('#thead_details').html('');
                        $('#tbody_details').html(`<tr><td><h3>No Approval Available.</h3></td></tr>`);
                    }
                }
                else if (index === 4) {
                    var bdownAssesment = '';
                    var total = 0;

                    for (var i = 0; i < this.bldg_invoice.length; i++) {
                        bdownAssesment += 
                        `
                            <tr>
                                <td>` + this.bldg_invoice[i].fee_type + `</td>
                                <td>` + Number(this._strIFStrExists(this.bldg_invoice[i].amount)).toLocaleString(undefined, {minimumFractionDigits: 2}) + `</td>
                            </tr>
                        `;
                        total += parseFloat(this.bldg_invoice[i].amount);
                    }

                    $('#h4_detail_title').html('Invoice Details');
                    $('#thead_details').html('');
                    if (this.bldg_invoice.length !== 0) {
                        $('#tbody_details').html(`
                            <tr>
                                <td>Official Receipt No.</td>
                                <td>` + this._strIFKeyExists(this.bldg_invoice[0], 'or_no') + `</td>
                            </tr>
                            <tr>
                                <td>Date Paid</td>
                                <td>` + moment(this._strIFKeyExists(this.bldg_invoice[0], 'date_payment')).format('MMMM DD, YYYY') + `</td>
                            </tr>
                            <tr>
                                <td>Date of Assessment</td>
                                <td>` + moment(String(this.bldg_invoice[0].jlt_created)).format('MMMM DD, YYYY') + `</td>
                            </tr>
                            <tr>
                                <td colspan="1"><h5>Assessment Details</h5></td>
                                <td></td>
                            </tr>`
                            + bdownAssesment +
                            `<tr>
                                <td colspan="1"><h5>Total</h5></td>
                                <td>` + Number(this._strIFStrExists(total)).toLocaleString(undefined, {minimumFractionDigits: 2}) + `</td>
                            </tr>
                        `);
                    }
                    else {
                        $('#thead_details').html('');
                        $('#tbody_details').html(`<tr><td><h3>No Invoice Available.</h3></td></tr>`);
                    }
                }
            },
            req_remarks(updated_at, remarks, mode = 0) {
                var output = '';
                if (remarks !== null && remarks !== '')
                    output = mode === 0 ? 'Remarks (' + moment(this._strIFStrExists(updated_at)).format('MMMM DD, YYYY h:mm A') + '): ' : remarks;

                return output;
            },
            faFile(fileNmae) {
                var output = "";
                try {
                    var tmp = fileNmae.split('.');
                    if (tmp[tmp.length - 1] !== "pdf")
                        output = 'fa-solid fa-file-image';
                    else
                        output = 'fa-solid fa-file-pdf';
                } catch { }

                return output;
            }
        },
        created() {
        },
    }
</script>
<style lang="css" scoped>
    .tbl-prog {
        border: none;
        border-collapse: collapse;
        width: 100%;
        height: 100%;
    }
    .tbl-prog th {
        vertical-align: middle;
    }
    .div-prog-circle {
        color: white;
        padding-top: 4px;
        position: relative;
        z-index: 10;
        border-radius: 40px;
        width: 50px;
        height: 50px;
        -webkit-box-shadow: inset 0px 0px 0px 2px rgba(250,250,250,1);
        -moz-box-shadow: inset 0px 0px 0px 2px rgba(250,250,250,1);
        box-shadow: inset 0px 0px 0px 2px rgba(250,250,250,1);
    }
    .div-prog-bar {
        z-index: 9;
        width: 100%;
        height: 18px;
        place-self: center;
        background-color: rgb(100, 181, 246);
    }
    .div-prog-bar-left {
        border-radius: 20px 0 0 20px;
    }
    .div-prog-bar-right {
        border-radius: 0 20px 20px 0;
    }
    #btn_appl_detail {
        float: right;
    }
    .nav-circle {
        border-radius: 20px;
        background-color: #263238;
    }
    .tbl-bldg-details {
        font-size: 16px !important;
        border-collapse: collapse;
        width: 100%;
    }
    .tbl-bldg-details tr { 
        border-top: 1px solid #BDBDBD;
        height: 40px;
    }
    .tbl-bldg-details td:nth-child(2) {
        text-align: center !important;
    }
    .div-details-collapse {
        height: 134px;
        max-height: 240px;
        overflow: hidden;
    }
    .div-nav-oth {
        width: 60px;
        background-color: #78909C;
    }
    .div-nav-oth svg {
        width: 50px;
        padding: 8px 0;
        margin: 18px 5px;
        text-align: center;
        color: #FAFAFA;
        border-radius: 100px;
        height: 34px;
        cursor: pointer;
    }
    .div-nav-oth-active {
        background-color: #1976D2 !important;
    }
    .div-detail-contents {
        width: 100%;
        height: 100%;
        background-color: #EEEEEE;
        padding: 4px;
    }
    .div-tbl-docs {
        margin: 0 8px;
        max-height: 560px;
    }
    .tbl-req td {
        vertical-align: middle;
        border: 1px solid #607D8B;
    }
    .tbl-req td:nth-child(1) {
        max-width: 200px;
    }
    .tbl-req td:not(:nth-child(1)) {
        font-size: 12px;
    }
    .tbl-req td:nth-child(3) {
        max-width: 100px;
    }
    .tbl-req td:nth-child(6) {
        max-width: 80px;
    }
    .tbl-req td:nth-child(2) svg {
        cursor: pointer;
        place-content: center;
    }
    .tbl-req td:nth-child(3) svg {
        place-self: start;
    }
    .tbl-req td:nth-child(2) {
        text-align: center !important;
    }
    .tbl-req td:nth-child(3) div {
        place-content: center;
    }
    .tbl-req td:nth-child(2) svg {
        color: #C62828;
    }
    .tbl-req th {
        text-align: center;
    }
    .tbl-tr-valid td:nth-child(1), .tbl-tr-valid td:nth-child(4){
        color: #33691E;
    }
    .tbl-tr-valid td:nth-child(2) svg {
        vertical-align: middle;
    }
    .tbl-tr-na td:nth-child(1), .tbl-tr-na td:nth-child(3) {
        color: #616161;
    }
</style>    