<style>
    .whitebox2 {
        height: 200px;
        border: 1px solid #ced4da;
    }
    
</style>

<div class="tab-pane fade" id="v-medi" role="tabpanel" aria-labelledby="v-medi-tab">
    <div class="row p-3">
        <p class="h6">Medication</p>
        <div class="col-2 align-self-center">
            <span>Component Name :</span>
        </div>
        <div class="col-10">
            <input type="text" class="form-control">
        </div>
        <div class="col-2 align-self-center">
            <span>Medication List :</span>
        </div>
        <div class="col-3 mt-2">
            <input type="text" class="form-control" placeholder="Edit medication" style="background:#F3F6F9">
        </div>
        <div class="col-1 mt-2">
            <button class="btn btn-soft-primary w-100" style="color: #9599AD">Unit</button>
        </div>
        <div class="col-1 mt-2">
            <button class="btn btn-soft-warning w-100">Edit</button>
        </div>
        <div class="col-3 mt-2">
            <input type="text" class="form-control" placeholder="Add medication" style="background:#F3F6F9">
        </div>
        <div class="col-1 mt-2">
            <button class="btn btn-soft-primary text-nowrap w-100" style="color: #9599AD">Unit</button>
        </div>
        <div class="col-1 mt-2">
            <button class="btn btn-soft-secondary text-nowrap w-100">+ Add</button>
        </div>

        <div class="row mt-2">
            <div class="col-6 text-center"><span>All Data</span></div>
            <div class="col-6 text-center"><span>Show Data</span></div>
        </div>
        <div class="row mt-2">
            <div class="col-6 whitebox2 ps-4 p-3">
                <div class="col-12 ps-5">
                    <input class="form-control" type="text" placeholder="Search"
                        style="width: 85%; background:#F3F6F9; color:#9599AD;">
                </div>
                <div class="height-componant">
                    <div class="col-11 mt-2 text-delete">
                        <div class="row">

                            <div class="col-4">
                                <i class="ri-delete-bin-fill text-danger ri-lg"></i>
                                &ensp; 10% Xylocain spray
                            </div>
                            <div class="col-4">
                                mg.
                            </div>
                        </div>
                    </div>
                    <div class="col-11 mt-2 text-delete">
                        <div class="row">
                            <div class="col-4">
                                <i class="ri-delete-bin-fill text-danger ri-lg"></i>
                                &ensp; Proppoful
                            </div>
                            <div class="col-4">
                                mg.
                            </div>
                        </div>
                    </div>
                    <div class="col-11 mt-2 text-delete">
                        <div class="row">
                            <div class="col-4">
                                <i class="ri-delete-bin-fill text-danger ri-lg"></i>
                                &ensp; Fentanyl
                            </div>
                            <div class="col-4">
                                mcg.
                            </div>
                        </div>
                    </div>
                    <div class="col-11 mt-2 ">
                        <div class="row">
                            <div class="col-4">
                                <i class="ri-delete-bin-fill text-danger ri-lg"></i>
                                &ensp; Dormicum
                            </div>
                            <div class="col-4">
                                mg.
                            </div>
                        </div>
                    </div>
                    <div class="col-11 mt-2 ">
                        <div class="row">
                            <div class="col-4">
                                <i class="ri-delete-bin-fill text-danger ri-lg"></i>
                                &ensp; Buscopan
                            </div>
                            <div class="col-4">
                                mg.
                            </div>
                        </div>
                    </div>


                </div>


            </div>
            <div class="col-6 whitebox2 ps-4 p-3">
                <div class="col-12 ps-5">
                    <input class="form-control" type="text" placeholder="Search"
                        style="width: 85%; background:#F3F6F9; color:#9599AD;">
                </div>

                <div class="col-12 mt-2 ">
                    <div class="row">
                        <div class="col-4 fs-12">
                            &ensp; <span>10% Xylocain spray</span>
                        </div>
                        <div class="col-4" style="color: #495057">
                            mg.
                        </div>
                    </div>
                </div>
                <div class="col-12 mt-2 ">
                    <div class="row">
                        <div class="col-4 fs-12">
                            &ensp; <span>Propofol</span>
                        </div>
                        <div class="col-4" style="color: #495057">
                            mg.
                        </div>
                    </div>
                </div>
                <div class="col-12 mt-2 ">
                    <div class="row">
                        <div class="col-4 fs-12">
                            &ensp; <span>Fentanyl</span>
                        </div>
                        <div class="col-4" style="color: #495057">
                            mcg.
                        </div>
                    </div>
                </div>

            </div>

        </div>

        <div class="col-2 align-self-center mt-2">
            <span>Data Memorize :</span>
        </div>
        <div class="col-4 mt-4">
            <input type="text" class="form-control" placeholder="Edit data" style="background:#F3F6F9">
        </div>

        <div class="col-1 mt-4">
            <button class="btn btn-soft-warning w-100">Edit</button>
        </div>
        <div class="col-4 mt-4">
            <input type="text" class="form-control" placeholder="Add new data" style="background:#F3F6F9">
        </div>

        <div class="col-1 mt-4">
            <button class="btn btn-soft-secondary text-nowrap w-100">+ Add</button>
        </div>

        <div class="row mt-2">
            <div class="col-6 text-center"><span>All Data</span></div>
            <div class="col-6 text-center"><span>Show Data</span></div>
        </div>

        <div class="row pt-2">
            <div class="col-6 whitebox1">
                <div class="col-12 d-flex justify-content-center pt-3">
                    <input class="form-control" type="text" placeholder="Search"
                        style="width: 85%; background:#F3F6F9; color:#9599AD;">
                </div>
                <div class="row">
                    <div class="col-1 fs-17 ps-4  align-self-center" style="color: #F06548">
                        <i class="ri-delete-bin-fill"></i>
                    </div>
                    <div class="col-4 fs-12  align-self-center" style="color:#D3D3D4">
                        <div class="class">
                            Brief History
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-1 fs-17 ps-4 align-self-center" style="color:#F06548">
                        <i class="ri-delete-bin-fill"></i>
                    </div>
                    <div class="col-4 fs-12 align-self-center" style="color:#D3D3D4">
                        <div class="class">
                            Pre-Diagnosis
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-1 fs-17 ps-4  align-self-center" style="color:#F06548">
                        <i class="ri-delete-bin-fill"></i>
                    </div>
                    <div class="col-4 fs-12 align-self-center" style="color:#D3D3D4">
                        <div class="class">
                            Anesthesia
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-1 fs-17 ps-4  align-self-center" style="color:#F06548">
                        <i class="ri-delete-bin-fill"></i>
                    </div>
                    <div class="col-4 fs-12 align-self-center">
                        <div class="class">
                            Medication
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-1 fs-17 ps-4  align-self-center" style="color:#F06548">
                        <i class="ri-delete-bin-fill"></i>
                    </div>
                    <div class="col-4 fs-12 align-self-center">
                        <div class="class">
                            Finding
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-1 fs-17 ps-4  align-self-center" style="color:#F06548">
                        <i class="ri-delete-bin-fill"></i>
                    </div>
                    <div class="col-4 fs-12 align-self-center">
                        <div class="class">
                            Photo
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-1 fs-17 ps-4  align-self-center" style="color:#F06548">
                        <i class="ri-delete-bin-fill"></i>
                    </div>
                    <div class="col-4 fs-12 align-self-center">
                        <div class="class">
                            Post-Diagnosis
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-1 fs-17 ps-4  align-self-center" style="color:#F06548">
                        <i class="ri-delete-bin-fill"></i>
                    </div>
                    <div class="col-4 fs-12 align-self-center">
                        <div class="class">
                            Procedure
                        </div>
                    </div>
                </div>

            </div>
            <div class="col-6 whitebox1">
                <div class="col-12 d-flex justify-content-center pt-3">
                    <input class="form-control" type="text" placeholder="Search"
                        style="width: 85%; background:#F3F6F9; color:#9599AD;">
                </div>
                <div class="row">
                    <div class="col-4 fs-12 pt-1 align-self-center start">
                        <div class="class">
                            Brief History
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-4 fs-12 pt-2 align-self-center start">
                        <div class="class">
                            Pre-Diagnosis
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-4 fs-12 pt-2 align-self-center start">
                        <div class="class">
                            Anesthesia
                        </div>
                    </div>
                </div>
            </div>







            <div class="col-12 text-end mt-3">
                <button type="button" class="btn btn-primary btn-label waves-effect right waves-light"><i
                        class="ri-check-double-line label-icon align-middle fs-16 ms-2"></i> Confirm</button>

            </div>

        </div>
    </div>
</div>
