<div class="col-md-9 col-12 p-0">
    <!-- Adjust column size based on screen width -->
    <!--=========== Source VMs Page=================== -->
    <div class="main-form active" id="recoverySettings" style="height: 60vh;overflow-y: auto;">
        <div class="font-weight-bold p-2 border-bottom">
            Select configuration for the recovered VMs
        </div>
        <div class="m-3">
            <div class="mb-3 p-2 bg-primary text-light font-weight-bold">
                Instances handling after recovery
            </div>
            <div class="mb-3">
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="snapshotOptions" id="do-nothing" value="DO_NOTHING" checked>
                    <label class="form-check-label" for="do-nothing">
                        Default
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="snapshotOptions" id="consolidate" value="CONSOLIDATE" checked>
                    <label class="form-check-label" for="consolidate">
                        Consolidate
                    </label>
                </div>
            </div>
            <div class="alert alert-info m-2 row" role="alert">
                <div class="col-1">
                    <i class="fas fa-info-circle py-3" style="color: #5aa6c9;font-size: 20px;"></i>
                </div>
                <div class="col">
                    Selecting the Default option provides the lowest Recovery Time Objective (RTO).
                    To optimize performance, perform instances consolidation after the recover task
                    completes.
                </div>
            </div>
            <div class="alert alert-info m-2 row" role="alert">
                <div class="col-1">
                    <i class="fas fa-info-circle py-3" style="color: #5aa6c9;font-size: 20px;"></i>
                </div>
                <div class="col">
                    Selecting the Consolidate option consolidates all instances into the recovered disk.
                    This can improve the runtime performance of the recovered VM, but may greatly increase
                    Recovery Time Objective (RTO).
                </div>
            </div>
            <div class="mb-3 p-2 bg-primary text-light font-weight-bold">
                Power settings
            </div>
            <div class="mb-3">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="powerOnBox" checked>
                    <label class="form-check-label" for="powerOnBox">
                        Power on recovered VMs
                    </label>
                </div>
            </div>
            <div class="mb-3 p-2 bg-primary text-light font-weight-bold">
                Network settings
            </div>
            <div class="mb-3">
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="preconfiguredNetwork" id="configured-source" checked>
                    <label class="form-check-label" for="configured-source">
                        Apply preconfigured network settings on failover
                    </label>
                </div>
                <div class="form-check d-inline">
                    <input class="form-check-input" type="radio" name="preconfiguredNetwork" id="selectNetwork" checked>
                    <label class="form-check-label pr-2" for="selectNetwork">
                        Connect all VMs to network
                    </label>
                    <select class="line-select" style="width: 150px;">
                        <option value="">SELECT NETWORK</option>
                    </select>
                </div>
            </div>
            <div class="mb-3 p-2 bg-primary text-light font-weight-bold">
                VDC compute and sizing policies
            </div>
            <div class="mb-3">
                <b>Select a VM placement and sizing policy to be applied to the recovered virtual machine.</b>
                <div class="p-3">
                    <div class="row mb-3">
                        <label for="" class="col-4">
                            VDC VM placement policy
                        </label>
                        <select class="col-2 browser-default custom-select mr-3" style="width: 50px;">
                            <option selected>None</option>
                        </select>
                    </div>
                    <div class="row">
                        <label for="" class="col-4">
                            VDC VM sizing policy
                        </label>
                        <select class="col-2 browser-default custom-select mr-3" style="width: 50px;">
                            <option selected>None</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="alert alert-info m-2 row" role="alert">
                <div class="col-1">
                    <i class="fas fa-info-circle py-3" style="color: #5aa6c9;font-size: 20px;"></i>
                </div>
                <div class="col">
                    The selected settings will be used during the recovery operation without changing
                    the current policy settings of the replication
                </div>
            </div>
        </div>
    </div>
    <!--============ Destination VDC and Storage policy Page =================-->
    <div class="main-form" id="recoveryInstance" style="height: 60vh;overflow-y: auto;">
        <div class="font-weight-bold p-2 border-bottom">
            Select recovery point in time.
        </div>
        <div class="m-3">
            <div class="data-chart-title d-flex">
                <div class="datePicker">
                    between<input type="date" class="picker" id="startTimeAfter">and<input type="date" class="picker" id="startTimeBefore">
                </div>
                <select id="timeRecoveryPoint" class="box-select mx-3" style="width: 110px;">
                    <option value="">CUSTOM</option>
                    <option value="">1 HOUR</option>
                    <option value="">1 DAY</option>
                    <option value="">7 DAY</option>
                    <option value="">1 MONTH</option>
                    <option value="">ALL</option>
                </select>
                <a href="" class="">&nbsp;<i class="fas fa-sync fa-rotate-90" style="color: #57ba4b;"></i>&nbsp;Refresh</a>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="chart-container" style="position: relative; height:40vh; width:40vw">
                        <canvas id="dotChart3"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--============ Destination VDC and Storage policy Page =================-->
    <div class="main-form" id="recoveryComplete" style="height: 60vh;overflow-y: auto;">
        <div class="font-weight-bold p-2 border-bottom">
            Verify the selected settings before proceeding:
        </div>
        <div class="m-3">
            <table class="tg" style="table-layout: fixed; width: 539px">
                <colgroup>
                    <col style="width: 270px">
                    <col style="width: 269px">
                </colgroup>
                <tbody>
                    <tr>
                        <td class="tg-1wig"><span style="color:#000;background-color:#FFF">Recovered VMs</span></td>
                        <td class="tg-0lax"><span style="color:#000;background-color:#FFF">test-policy</span></td>
                    </tr>
                    <tr>
                        <td class="tg-1wig"><span style="color:#000;background-color:#FFF">Recovery site</span></td>
                        <td class="tg-0lax"><span style="color:#000;background-color:#FFF">avmzone1vcf</span></td>
                    </tr>
                    <tr>
                        <td class="tg-1wig"><span style="color:#000;background-color:#FFF">Recovery network</span></td>
                        <td class="tg-0lax"><span style="color:#000;background-color:#FFF">Preconfigured network settings</span></td>
                    </tr>
                    <tr>
                        <td class="tg-1wig"><span style="color:#000;background-color:#FFF">Power on recovered VMs</span></td>
                        <td class="tg-0lax">Activated</td>
                    </tr>
                    <tr>
                        <td class="tg-1wig"><span style="color:#000;background-color:#FFF">Instances handling after recovery</span></td>
                        <td class="tg-0lax"><span style="color:#000;background-color:#FFF">Default</span></td>
                    </tr>
                    <tr>
                        <td class="tg-1wig"><span style="color:#000;background-color:#FFF">VDC VM placement policy</span></td>
                        <td class="tg-0lax">None</td>
                    </tr>
                    <tr>
                        <td class="tg-1wig"><span style="color:#000;background-color:#FFF">VDC VM sizing policy</span></td>
                        <td class="tg-0lax">None</td>
                    </tr>
                    <tr>
                        <td class="tg-1wig"><span style="color:#000;background-color:#FFF">Synchronize VM changes</span></td>
                        <td class="tg-0lax">Latest</td>
                    </tr>
                </tbody>
            </table>

        </div>
    </div>




</div>