body {
        margin: 0;
        padding: 0;
    }

    .container {
        display: flex;
    }

    .left-section {
        width: 30%;
        background-color: rgb(202, 202, 202);
    }

    .middle-section {
        flex-grow: 1;
        padding: 20px;
    }

    .right-section {
        width: 30%;
    }

    .box {
        padding: 20px;
        border: 1px solid transparent;
        border-radius: 5px;
        background-color: rgb(202, 202, 202);
    }

    .adew h2 {
        text-align: center;
        flex: 0 0 auto;
        margin-right: 20px;
    }

    .gwee table {
        width: 100%;
        border-collapse: collapse;
    }

    .gwee table tr,
    td {
        padding: 10px;
        text-align: center;
    }

    .left-section h2 {
        text-align: center;
        border-bottom: 1px solid black;
        padding-bottom: 5px;
        width: auto;
    }

    .right-section h3,
    h4 {
        text-align: center;
    }

    h4 {
        border-bottom: 1px solid black;
        padding-bottom: 5px;
        width: auto;
    }

    .record-table {
        width: 100%;
        margin-bottom: 20px;
        overflow-y: auto;
        max-height: 400px;
        border-collapse: collapse;
    }

    .record-table th,
    .record-table td {
        border: 1px solid #ddd;
        text-align: center;
        padding: 8px;
    }

    th input[type="checkbox"] {
        margin-right: 5px;
    }

    .record-table th {
        background-color: #f2f2f2;
    }

    .button-container {
        display: inline-block;
        padding: 10px;
        background-color: rgb(202, 202, 202);
    }

    .button-container button {
        border: none;
        background-color: transparent;
        padding: 0;
        cursor: pointer;
        font-size: inherit;
        color: inherit;
        width: auto;
    }

    .button-container button:hover {
        text-decoration: underline;
    }

    .block {
        width: 400px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
    }

    .search-bar {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #search-btn,
    #cancel-btn {
        margin-left: 10px;

    }

    label {
        width: 100px;
        display: inline-block;
        text-align: right;
    }

    input,
    label {
        vertical-align: top;
    }

    input.checkbox {
        width: 100px;
        display: inline-block;
        text-align: left, right;
    }

    form {
        font: 100% verdana, arial, sans-serif;
        margin-bottom: 10px;
        position: relative;
        justify-content: center;
    }
</style>

<script>
    $(document).ready(function () {
        $('#search-btn').click(function () {
            $('#search-btn').hide();
            $('#cancel-btn').show();
        });

        $('#cancel-btn').click(function () {
            $('#cancel-btn').hide();
            $('#search-btn').show();
        });
    });
</script>

        <ul>
            <li>
                <div class="button-container"><button>訪客車輛資訊</button></div>
            </li>
            <li>
                <div class="button-container"><button>-區域詳細資訊</button></div>
            </li>
            <li>
                <div class="button-container"><button>訪客預約登記</button></div>
            </li>
            <li>
                <div class="button-container"><button>訪客預約紀錄</button></div>
            </li>
            <li>
                <div class="button-container"><button>-已預約未進場車輛</button></div>
            </li>
            <li>
                <div class="button-container"><button>-未來時段預約紀錄</button></div>
            </li>
            <li>
                <div class="button-container"><button>-訪客預約類別</button></div>
            </li>
            <li>
                <div class="button-container"><button>車輛進出紀錄</button></div>
            </li>
            <li>
                <div class="button-container"><button>閘道控制選單</button></div>
            </li>
            <li>
                <div class="button-container"><button>承租公司設定</button></div>
            </li>
            <li>
                <div class="button-container"><button>貨運公司設定</button></div>
            </li>
            <li>
                <div class="button-container"><button>車輛設定</button></div>
            </li>
            <li>
                <div class="button-container"><button>使用者設定</button></div>
            </li>
            <li>
                <div class="button-container"><button>使用者群組</button></div>
            </li>
            <li>
                <div class="button-container"><button>使用者權限</button></div>
            </li>
            <li>
                <div class="button-container"><button>使用紀錄</button></div>
            </li>
        </ul>

    </div>

    <div class="middle-section">
        <div class="adew">
            <h2>車輛進出記錄 Vehicle Enter/Exit Records</h2>
        </div>

        <div class="box">

            <div class="gwee">
                <table>
                    <tr>
                        <td>車牌號碼
                            <select>
                                <option value="車牌號碼">Ac-2345</option>
                            </select>
                        </td>
                        <td>預約樓層
                            <select>
                                <option value="預約樓層">3F</option>
                            </select>
                        </td>
                        <td>拜訪公司
                            <select>
                                <option value="拜訪公司">B公司</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>車輛類別
                            <select>
                                <option value="車輛類別">契約車</option>
                            </select>
                        </td>
                        <td>車輛類型
                            <select>
                                <option value="車輛類型">貨車</option>
                            </select>
                        </td>
                        <td>駕駛人公司
                            <select>
                                <option value="駕駛人公司">C物流公司</option>
                            </select>
                        </td>
                    </tr>
                </table>

            </div>

            <form>
                <div class="block">
                    <input type="checkbox">
                    <label for="appointment_datetime">進場起始時間</label>
                    <input type="datetime-local" id="appointment_datetime" name="vappointment_datetime"
                        value="2023-07-22" min="2023-01-01" max="2026-12-31" />
                </div>

                <div class="block">
                    <label for="appointment_datetime">進場結束時間</label>
                    <input type="datetime-local" id="appointment_datetime" name="appointment_datetime"
                        value="2023-07-22" min="2023-01-01" max="2026-12-31" />
                </div>

                <div class="block">
                    <input type="checkbox">
                    <label for="appointment_datetime">離場起始時間</label>
                    <input type="datetime-local" id="appointment_datetime" name="appointment_datetime"
                        value="2023-07-22" min="2023-01-01" max="2026-12-31" />
                </div>

                <div class="block">
                    <label for="appointment_datetime">離場結束時間</label>
                    <input type="datetime-local" id="appointment_datetime" name="appointment_datetime"
                        value="2023-07-22" min="2023-01-01" max="2026-12-31" />
                </div>

                <div class="search-bar">
                    <button id="search-btn">搜尋</button>
                    <button id="cancel-btn">取消</button>
                </div>


            </form>
            <table class="record-table">
                <hr class="my-6">
                <div class="row">
                    <thead>
                        <tr>
                            <th><input type="checkbox" id="checkAll"></th>
                            <th>序</th>
 
                            <th>車牌號碼</th>
                            <th>車輛類別</th>
                            <th>車輛類型</th>
                            <th>駕駛人</th>
                            <th>駕駛人公司</th>
                            <th>預約樓層</th>
                            <th>拜訪公司</th>
                            <th>進場時間</th>
                            <th>離場時間</th>
                            <th>預約時間</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
            </table>
        </div>
    </div>

    <div class="right-section">
        <div class="cate">
            <h3>楊梅物流中心
            </h3>
        </div>
        <h4>車輛進出紀錄</h4>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
        crossorigin="anonymous"></script>

    <script src="https://code.jquery.com/jquery-3.7.0.min.js"
        integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>