
<style>
    .boxwhite {
        width: 500px;
        height: 650px;
        background: white;
    }

    .space {
        padding-left: 25px;
    }

    .whitebox1,
    .whitebox2 {
        height: 290px;
        border: 1px solid #ced4da;
    }

    .top {
        padding-top: 2%;
    }

    .start {
        padding-left: 9%
    }

    /* .nav-pills .nav-link {

        border: 1px solid #E9EBEC !important;

    } */
</style>


<div class="tab-pane fade" id="v-anes" role="tabpanel" aria-labelledby="v-anes-tab">
    <div class="fs-12 p-3 space">
        <h6>Anesthesia</h6>
        <div class="row">
            <div class="col-2 align-self-center">
                <span>Component Name :</span>
            </div>
            <div class="col-10 ">
                <input class="form-control" type="text" placeholder="free text">
            </div>
        </div>
        <div class="mt-3">
            <h6>Check box :</h6>
        </div>


        <div class="row mt-2">
            <div class="col-3">
                <div>
                    <input class="form-control" type="text" placeholder="Add new data">
                </div>
            </div>
            <div class="col-3 fs-18 align-self-center" style="color: #F06548">
                <i class="ri-delete-bin-fill"></i>
            </div>
        </div>

        <div class="row mt-2">
            <div class="col-3">
                <div>
                    <input class="form-control" type="text" placeholder="Add new data">
                </div>
            </div>
            <div class="col-3 fs-18 align-self-center" style="color: #F06548">
                <i class="ri-delete-bin-fill"></i>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-3">
                <div>
                    <input class="form-control" type="text" placeholder="Add new data">
                </div>
            </div>
            <div class="col-3 fs-18 align-self-center" style="color: #F06548">
                <i class="ri-delete-bin-fill"></i>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-3">
                <div>
                    <input class="form-control" type="text" placeholder="Add new data">
                </div>
            </div>
            <div class="col-3 fs-18 align-self-center" style="color: #F06548">
                <i class="ri-delete-bin-fill"></i>
            </div>
        </div>
        <div class="row mt-2">

            <div class="col-3">
                <div>
                    <input class="form-control" type="text" placeholder="Add new data">
                </div>
            </div>
            <div class="col-3 fs-18 align-self-center">
                <button type="button" class="btn btn-success waves-effect waves-light">Confirm</button>
            </div>
        </div>

        <div class="row align-self-center">
            <div class="col-2 pt-4">Data Memorize :</div>
            <div class="col-3 pt-3">
                <input class="form-control" type="text" placeholder="Edit data">
            </div>
            <div class="col-2 pt-3">
                <button type="button" class="btn btn-soft-warning waves-effect waves-light"
                    style="width: 70px">Edit</button>
            </div>
            <div class="col-3 pt-3">
                <input class="form-control" type="text" placeholder="Add new data">
            </div>
            <div class="col-2 pt-3">
                <button type="button" class="btn btn-soft-info waves-effect waves-light">+ Add</button>
            </div>
        </div>

        <div class="row mt-2">
            <div class="col-6 text-center">All Data</div>
            <div class="col-6 text-center">Show Data</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="pt-2 d-flex justify-content-end pe-4">
                <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>
                    Comfirm</button>
            </div>
        </div>

    </div>
</div>
