<div style="padding: 16px 0px 0px; margin: 0px; left: 0px; top: 4px;">
    <div class="card border-top-black main-details-widget">
        <div class="row my-2 mx-3">
            <div class="col-5">
                Monitor
                <div class="btn-group px-2" role="group" aria-label="line-chart-button">
                    <button type="button" class="btn btn-graf-status-out active px-3 py-1" id="liveButton2">LIVE</button>
                    <button type="button" class="btn btn-graf-status-out px-3 py-1" id="recordedButton2">RECORDED</button>
                </div>
                disk usage
            </div>
        </div>

        <div id="liveChartContainer2">
            <!-- Content from First Page -->
            <canvas id="liveChart2" style="max-height: 300px;"></canvas>
        </div>

        <div id="recordedChartContainer2" class="row hidden">
            <div class="col-12">
                <canvas id="lineChart5" class="mx-3 mb-2" style="max-height: 300px;"></canvas>
            </div>
        </div>


    </div>
</div>