@{
    ViewBag.Title = "Index";
}
<div class="row">


<div class="col-sm-6 col-lg-6 col-xl-3 g-mb-30">
    <!-- Panel -->
    <div class="card h-100 g-brd-gray-light-v7 g-rounded-3">
        <div class="card-block g-font-weight-300 g-pa-20">
            <div class="media">
                <div class="d-flex g-mr-15">
                    <div class="u-header-dropdown-icon-v1 g-pos-rel g-width-60 g-height-60 g-bg-lightblue-v4 g-font-size-18 g-font-size-24--md g-color-white rounded-circle">
                        <i class="hs-admin-briefcase g-absolute-centered"></i>
                    </div>
                </div>
                <div class="media-body align-self-center">
                    <div class="d-flex align-items-center g-mb-5">
                        <span class="g-font-size-24 g-line-height-1 g-color-black">99.9%</span>
                        <span class="d-flex align-self-center g-font-size-0 g-ml-5 g-ml-10--md">
                            <i class="g-fill-gray-dark-v9">
                                <svg width="12px" height="20px" viewbox="0 0 12 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                    <g transform="translate(-21.000000, -751.000000)">
                                        <g transform="translate(0.000000, 64.000000)">
                                            <g transform="translate(20.000000, 619.000000)">
                                                <g transform="translate(1.000000, 68.000000)">
                                                    <polygon points="6 20 0 13.9709049 0.576828937 13.3911999 5.59205874 18.430615 5.59205874 0 6.40794126 0 6.40794126 18.430615 11.4223552 13.3911999 12 13.9709049"></polygon>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                            </i>
                            <i class="g-fill-lightblue-v3">
                                <svg width="12px" height="20px" viewbox="0 0 12 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                    <g transform="translate(-33.000000, -751.000000)">
                                        <g transform="translate(0.000000, 64.000000)">
                                            <g transform="translate(20.000000, 619.000000)">
                                                <g transform="translate(1.000000, 68.000000)">
                                                    <polygon transform="translate(18.000000, 10.000000) scale(1, -1) translate(-18.000000, -10.000000)"
                                                             points="18 20 12 13.9709049 12.5768289 13.3911999 17.5920587 18.430615 17.5920587 0 18.4079413 0 18.4079413 18.430615 23.4223552 13.3911999 24 13.9709049"></polygon>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                            </i>
                        </span>
                    </div>
                    <h6 class="g-font-size-16 g-font-weight-300 g-color-gray-dark-v6 mb-0">Projects Done</h6>
                </div>
            </div>
        </div>
    </div>
    <!-- End Panel -->
</div>
<div class="col-sm-6 col-lg-6 col-xl-3 g-mb-30">
    <!-- Panel -->
    <div class="card h-100 g-brd-gray-light-v7 g-rounded-3">
        <div class="card-block g-font-weight-300 g-pa-20">
            <div class="media">
                <div class="d-flex g-mr-15">
                    <div class="u-header-dropdown-icon-v1 g-pos-rel g-width-60 g-height-60 g-bg-teal-v2 g-font-size-18 g-font-size-24--md g-color-white rounded-circle">
                        <i class="hs-admin-check-box g-absolute-centered"></i>
                    </div>
                </div>
                <div class="media-body align-self-center">
                    <div class="d-flex align-items-center g-mb-5">
                        <span class="g-font-size-24 g-line-height-1 g-color-black">324</span>
                        <span class="d-flex align-self-center g-font-size-0 g-ml-5 g-ml-10--md">
                            <i class="g-fill-gray-dark-v9">
                                <svg width="12px" height="20px" viewbox="0 0 12 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                    <g transform="translate(-21.000000, -751.000000)">
                                        <g transform="translate(0.000000, 64.000000)">
                                            <g transform="translate(20.000000, 619.000000)">
                                                <g transform="translate(1.000000, 68.000000)">
                                                    <polygon points="6 20 0 13.9709049 0.576828937 13.3911999 5.59205874 18.430615 5.59205874 0 6.40794126 0 6.40794126 18.430615 11.4223552 13.3911999 12 13.9709049"></polygon>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                            </i>
                            <i class="g-fill-lightblue-v3">
                                <svg width="12px" height="20px" viewbox="0 0 12 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                    <g transform="translate(-33.000000, -751.000000)">
                                        <g transform="translate(0.000000, 64.000000)">
                                            <g transform="translate(20.000000, 619.000000)">
                                                <g transform="translate(1.000000, 68.000000)">
                                                    <polygon transform="translate(18.000000, 10.000000) scale(1, -1) translate(-18.000000, -10.000000)"
                                                             points="18 20 12 13.9709049 12.5768289 13.3911999 17.5920587 18.430615 17.5920587 0 18.4079413 0 18.4079413 18.430615 23.4223552 13.3911999 24 13.9709049"></polygon>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                            </i>
                        </span>
                    </div>
                    <h6 class="g-font-size-16 g-font-weight-300 g-color-gray-dark-v6 mb-0">Total Tasks</h6>
                </div>
            </div>
        </div>
    </div>
    <!-- End Panel -->
</div>
<div class="col-sm-6 col-lg-6 col-xl-3 g-mb-30">
    <!-- Panel -->
    <div class="card h-100 g-brd-gray-light-v7 g-rounded-3">
        <div class="card-block g-font-weight-300 g-pa-20">
            <div class="media">
                <div class="d-flex g-mr-15">
                    <div class="u-header-dropdown-icon-v1 g-pos-rel g-width-60 g-height-60 g-bg-darkblue-v2 g-font-size-18 g-font-size-24--md g-color-white rounded-circle">
                        <i class="hs-admin-wallet g-absolute-centered"></i>
                    </div>
                </div>
                <div class="media-body align-self-center">
                    <div class="d-flex align-items-center g-mb-5">
                        <span class="g-font-size-24 g-line-height-1 g-color-black">$124.2</span>
                        <span class="d-flex align-self-center g-font-size-0 g-ml-5 g-ml-10--md">
                            <i class="g-fill-red">
                                <svg width="12px" height="20px" viewbox="0 0 12 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                    <g transform="translate(-21.000000, -751.000000)">
                                        <g transform="translate(0.000000, 64.000000)">
                                            <g transform="translate(20.000000, 619.000000)">
                                                <g transform="translate(1.000000, 68.000000)">
                                                    <polygon points="6 20 0 13.9709049 0.576828937 13.3911999 5.59205874 18.430615 5.59205874 0 6.40794126 0 6.40794126 18.430615 11.4223552 13.3911999 12 13.9709049"></polygon>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                            </i>
                            <i class="g-fill-gray-dark-v9">
                                <svg width="12px" height="20px" viewbox="0 0 12 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                    <g transform="translate(-33.000000, -751.000000)">
                                        <g transform="translate(0.000000, 64.000000)">
                                            <g transform="translate(20.000000, 619.000000)">
                                                <g transform="translate(1.000000, 68.000000)">
                                                    <polygon transform="translate(18.000000, 10.000000) scale(1, -1) translate(-18.000000, -10.000000)"
                                                             points="18 20 12 13.9709049 12.5768289 13.3911999 17.5920587 18.430615 17.5920587 0 18.4079413 0 18.4079413 18.430615 23.4223552 13.3911999 24 13.9709049"></polygon>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                            </i>
                        </span>
                    </div>
                    <h6 class="g-font-size-16 g-font-weight-300 g-color-gray-dark-v6 mb-0">Projects Done</h6>
                </div>
            </div>
        </div>
    </div>
    <!-- End Panel -->
</div>
<div class="col-sm-6 col-lg-6 col-xl-3 g-mb-30">
    <!-- Panel -->
    <div class="card h-100 g-brd-gray-light-v7 g-rounded-3">
        <div class="card-block g-font-weight-300 g-pa-20">
            <div class="media">
                <div class="d-flex g-mr-15">
                    <div class="u-header-dropdown-icon-v1 g-pos-rel g-width-60 g-height-60 g-bg-lightred-v2 g-font-size-18 g-font-size-24--md g-color-white rounded-circle">
                        <i class="hs-admin-user g-absolute-centered"></i>
                    </div>
                </div>
                <div class="media-body align-self-center">
                    <div class="d-flex align-items-center g-mb-5">
                        <span class="g-font-size-24 g-line-height-1 g-color-black">148</span>
                        <span class="d-flex align-self-center g-font-size-0 g-ml-5 g-ml-10--md">
                            <i class="g-fill-gray-dark-v9">
                                <svg width="12px" height="20px" viewbox="0 0 12 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                    <g transform="translate(-21.000000, -751.000000)">
                                        <g transform="translate(0.000000, 64.000000)">
                                            <g transform="translate(20.000000, 619.000000)">
                                                <g transform="translate(1.000000, 68.000000)">
                                                    <polygon points="6 20 0 13.9709049 0.576828937 13.3911999 5.59205874 18.430615 5.59205874 0 6.40794126 0 6.40794126 18.430615 11.4223552 13.3911999 12 13.9709049"></polygon>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                            </i>
                            <i class="g-fill-gray-dark-v9">
                                <svg width="12px" height="20px" viewbox="0 0 12 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                    <g transform="translate(-33.000000, -751.000000)">
                                        <g transform="translate(0.000000, 64.000000)">
                                            <g transform="translate(20.000000, 619.000000)">
                                                <g transform="translate(1.000000, 68.000000)">
                                                    <polygon transform="translate(18.000000, 10.000000) scale(1, -1) translate(-18.000000, -10.000000)"
                                                             points="18 20 12 13.9709049 12.5768289 13.3911999 17.5920587 18.430615 17.5920587 0 18.4079413 0 18.4079413 18.430615 23.4223552 13.3911999 24 13.9709049"></polygon>
                                                </g>
                                            </g>
                                        </g>
                                    </g>
                                </svg>
                            </i>
                        </span>
                    </div>
                    <h6 class="g-font-size-16 g-font-weight-300 g-color-gray-dark-v6 mb-0">New Clients</h6>
                </div>
            </div>
        </div>
    </div>
    <!-- End Panel -->
</div>
<!-- Statistic Card -->
<div class="col-xl-12">
    <!-- Statistic Card -->
    <div class="card g-brd-gray-light-v7 g-pa-15 g-pa-25-30--md g-mb-30">
        <header class="media g-mb-30">
            <h3 class="d-flex align-self-center text-uppercase g-font-size-12 g-font-size-default--md g-color-black mb-0">Project statistics</h3>
            <div class="media-body d-flex justify-content-end">
                <div id="rangePickerWrapper2" class="d-flex align-items-center u-datepicker-right u-datepicker--v3 g-pr-10">
                    <input id="rangeDatepicker2" class="g-font-size-12 g-font-size-default--md" type="text" data-rp-wrapper="#rangePickerWrapper2" data-rp-type="range" data-rp-date-format="d M Y" data-rp-default-date='["01 Jan 2016", "31 Dec 2017"]'>
                    <i class="hs-admin-angle-down g-absolute-centered--y g-right-0 g-color-gray-light-v3"></i>
                </div>
                <a class="d-flex align-items-center hs-admin-panel u-link-v5 g-font-size-20 g-color-gray-light-v3 g-color-lightblue-v3--hover g-ml-5 g-ml-30--md" href="#!"></a>
            </div>
        </header>
        <section>
            <ul class="list-unstyled d-flex g-mb-45">
                <li class="media">
                    <div class="d-flex align-self-center g-mr-8">
                        <span class="u-badge-v2--md g-pos-stc g-transform-origin--top-left g-bg-lightblue-v4"></span>
                    </div>
                    <div class="media-body align-self-center g-font-size-12 g-font-size-default--md">Total hits</div>
                </li>
                <li class="media g-ml-5 g-ml-35--md">
                    <div class="d-flex align-self-center g-mr-8">
                        <span class="u-badge-v2--md g-pos-stc g-transform-origin--top-left g-bg-darkblue-v2"></span>
                    </div>
                    <div class="media-body align-self-center g-font-size-12 g-font-size-default--md">Unique visits</div>
                </li>
                <li class="media g-ml-5 g-ml-35--md">
                    <div class="d-flex align-self-center g-mr-8">
                        <span class="u-badge-v2--md g-pos-stc g-transform-origin--top-left g-bg-lightred-v2"></span>
                    </div>
                    <div class="media-body align-self-center g-font-size-12 g-font-size-default--md">New orders</div>
                </li>
            </ul>
            <div class="js-area-chart u-area-chart--v1 g-pos-rel g-line-height-0" data-height="300px" data-mobile-height="180px" data-high="5000000" data-low="0" data-offset-x="30" data-offset-y="50" data-postfix=" m" data-is-show-area="true" data-is-show-line="false"
                 data-is-show-point="true" data-is-full-width="true" data-is-stack-bars="true" data-is-show-axis-x="true" data-is-show-axis-y="true" data-is-show-tooltips="true" data-tooltip-description-position="right" data-tooltip-custom-class="u-tooltip--v2 g-font-weight-300 g-font-size-default g-color-gray-dark-v6"
                 data-align-text-axis-x="center" data-fill-opacity=".7" data-fill-colors='["#e62154","#3dd1e8","#1d75e5"]' data-stroke-color="#e1eaea" data-stroke-dash-array="0" data-text-size-x="14px" data-text-color-x="#000000" data-text-offset-top-x="10"
                 data-text-size-y="14px" data-text-color-y="#53585e" data-points-colors='["#e62154","#3dd1e8","#1d75e5"]' data-series='[
              [
                {"meta": "Orders", "value": 300000},
                {"meta": "Orders", "value": 500000},
                {"meta": "Orders", "value": 700000},
                {"meta": "Orders", "value": 1100000},
                {"meta": "Orders", "value": 800000},
                {"meta": "Orders", "value": 800000},
                {"meta": "Orders", "value": 1000000},
                {"meta": "Orders", "value": 2300000},
                {"meta": "Orders", "value": 700000},
                {"meta": "Orders", "value": 300000},
                {"meta": "Orders", "value": 600000},
                {"meta": "Orders", "value": 300000}
              ],
              [
                {"meta": "Hits", "value": 300000},
                {"meta": "Hits", "value": 300000},
                {"meta": "Hits", "value": 300000},
                {"meta": "Hits", "value": 300000},
                {"meta": "Hits", "value": 300000},
                {"meta": "Hits", "value": 3300000},
                {"meta": "Hits", "value": 500000},
                {"meta": "Hits", "value": 500000},
                {"meta": "Hits", "value": 800000},
                {"meta": "Hits", "value": 1100000},
                {"meta": "Hits", "value": 1500000},
                {"meta": "Hits", "value": 300000}
              ],
              [
                {"meta": "Visits", "value": 300000},
                {"meta": "Visits", "value": 300000},
                {"meta": "Visits", "value": 300000},
                {"meta": "Visits", "value": 300000},
                {"meta": "Visits", "value": 2300000},
                {"meta": "Visits", "value": 1000000},
                {"meta": "Visits", "value": 500000},
                {"meta": "Visits", "value": 500000},
                {"meta": "Visits", "value": 500000},
                {"meta": "Visits", "value": 1000000},
                {"meta": "Visits", "value": 300000},
                {"meta": "Visits", "value": 300000}
              ]
            ]' data-labels='["Jan", "Feb", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]'></div>
        </section>
    </div>
    <!-- End Statistic Card -->
</div>
<!-- End Statistic Card -->
<!-- Income Card -->
<div class="col-xl-8">
    <!-- Income Cards -->
    <div class="card g-brd-gray-light-v7 g-mb-30">
        <header class="media g-pa-15 g-pa-25-30-0--md g-mb-20">
            <div class="media-body align-self-center">
                <h3 class="text-uppercase g-font-size-default g-color-black g-mb-8">Total Income</h3>
                <div id="rangePickerWrapper3" class="u-datepicker-left u-datepicker--v3 g-pr-10">
                    <input id="rangeDatepicker3" class="g-font-size-12 g-font-size-default--md" type="text" data-rp-wrapper="#rangePickerWrapper3" data-rp-type="range" data-rp-date-format="d M Y" data-rp-default-date='["01 Jan 2016", "31 Dec 2017"]'>
                    <i class="hs-admin-angle-down g-absolute-centered--y g-right-0 g-color-gray-light-v3"></i>
                </div>
            </div>
            <div class="d-flex align-self-end align-items-center">
                <span class="g-line-height-1 g-font-weight-300 g-font-size-28 g-color-lightblue-v4">$48,200</span>
                <span class="d-flex align-self-center g-font-size-0 g-ml-10">
                    <i class="g-fill-gray-dark-v9">
                        <svg width="12px" height="20px" viewBox="0 0 12 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                            <g transform="translate(-21.000000, -751.000000)">
                                <g transform="translate(0.000000, 64.000000)">
                                    <g transform="translate(20.000000, 619.000000)">
                                        <g transform="translate(1.000000, 68.000000)">
                                            <polygon points="6 20 0 13.9709049 0.576828937 13.3911999 5.59205874 18.430615 5.59205874 0 6.40794126 0 6.40794126 18.430615 11.4223552 13.3911999 12 13.9709049"></polygon>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </svg>
                    </i>
                    <i class="g-fill-lightblue-v3">
                        <svg width="12px" height="20px" viewBox="0 0 12 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                            <g transform="translate(-33.000000, -751.000000)">
                                <g transform="translate(0.000000, 64.000000)">
                                    <g transform="translate(20.000000, 619.000000)">
                                        <g transform="translate(1.000000, 68.000000)">
                                            <polygon transform="translate(18.000000, 10.000000) scale(1, -1) translate(-18.000000, -10.000000)" points="18 20 12 13.9709049 12.5768289 13.3911999 17.5920587 18.430615 17.5920587 0 18.4079413 0 18.4079413 18.430615 23.4223552 13.3911999 24 13.9709049"></polygon>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </svg>
                    </i>
                </span>
            </div>
        </header>
        <div class="js-custom-scroll g-height-500 g-pa-15 g-pa-0-30-25--md">
            <table class="table table-responsive-sm w-100">
                <thead>
                <tr>
                    <th class="g-font-weight-300 g-color-gray-dark-v6 g-brd-top-none g-pl-20">#</th>
                    <th class="g-font-weight-300 g-color-gray-dark-v6 g-brd-top-none">Name</th>
                    <th class="g-font-weight-300 g-color-gray-dark-v6 g-brd-top-none">Status</th>
                    <th class="g-font-weight-300 g-color-gray-dark-v6 g-brd-top-none">Date</th>
                    <th class="text-right g-font-weight-300 g-color-gray-dark-v6 g-brd-top-none">Price</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10 g-pl-20">1</td>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">Business Cards</td>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">
                        <span class="u-tags-v1 text-center g-width-100 g-brd-around g-brd-lightblue-v3 g-bg-lightblue-v3 g-font-size-default g-color-white g-rounded-50 g-py-4 g-px-15">approved</span>
                    </td>
                    <td class="g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">Aug 12, 2016</td>
                    <td class="text-right g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">$2045</td>
                </tr>
                <tr>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10 g-pl-20">2</td>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">Advertising Outdoors</td>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">
                        <span class="u-tags-v1 text-center g-width-100 g-brd-around g-brd-lightred-v2 g-bg-lightred-v2 g-font-size-default g-color-white g-rounded-50 g-py-4 g-px-15">pending</span>
                    </td>
                    <td class="g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">Jun 6, 2016</td>
                    <td class="text-right g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">$995</td>
                </tr>
                <tr>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10 g-pl-20">3</td>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">Freelance Design</td>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">
                        <span class="u-tags-v1 text-center g-width-100 g-brd-around g-brd-teal-v2 g-bg-teal-v2 g-font-size-default g-color-white g-rounded-50 g-py-4 g-px-15">done</span>
                    </td>
                    <td class="g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">Sep 8, 2016</td>
                    <td class="text-right g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">$1025</td>
                </tr>
                <tr>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10 g-pl-20">4</td>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">Music Improvement</td>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">
                        <span class="u-tags-v1 text-center g-width-100 g-brd-around g-brd-lightblue-v3 g-bg-lightblue-v3 g-font-size-default g-color-white g-rounded-50 g-py-4 g-px-15">approved</span>
                    </td>
                    <td class="g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">Dec 20, 2016</td>
                    <td class="text-right g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">$9562</td>
                </tr>
                <tr>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom--md g-brd-2 g-brd-gray-light-v4 g-py-10 g-pl-20">5</td>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom--md g-brd-2 g-brd-gray-light-v4 g-py-10">Truck Advertising</td>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom--md g-brd-2 g-brd-gray-light-v4 g-py-10">
                        <span class="u-tags-v1 text-center g-width-100 g-brd-around g-brd-teal-v2 g-bg-teal-v2 g-font-size-default g-color-white g-rounded-50 g-py-4 g-px-15">done</span>
                    </td>
                    <td class="g-valign-middle g-brd-top-none g-brd-bottom--md g-brd-2 g-brd-gray-light-v4 g-py-10">Dec 24, 2016</td>
                    <td class="text-right g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom--md g-brd-2 g-brd-gray-light-v4 g-py-10">$5470</td>
                </tr>
                <tr>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10 g-pl-20">6</td>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">Business Cards</td>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">
                        <span class="u-tags-v1 text-center g-width-100 g-brd-around g-brd-lightblue-v3 g-bg-lightblue-v3 g-font-size-default g-color-white g-rounded-50 g-py-4 g-px-15">approved</span>
                    </td>
                    <td class="g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">Aug 12, 2016</td>
                    <td class="text-right g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">$2045</td>
                </tr>
                <tr>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10 g-pl-20">7</td>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">Advertising Outdoors</td>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">
                        <span class="u-tags-v1 text-center g-width-100 g-brd-around g-brd-lightred-v2 g-bg-lightred-v2 g-font-size-default g-color-white g-rounded-50 g-py-4 g-px-15">pending</span>
                    </td>
                    <td class="g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">Jun 6, 2016</td>
                    <td class="text-right g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">$995</td>
                </tr>
                <tr>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10 g-pl-20">8</td>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">Freelance Design</td>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">
                        <span class="u-tags-v1 text-center g-width-100 g-brd-around g-brd-teal-v2 g-bg-teal-v2 g-font-size-default g-color-white g-rounded-50 g-py-4 g-px-15">done</span>
                    </td>
                    <td class="g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">Sep 8, 2016</td>
                    <td class="text-right g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">$1025</td>
                </tr>
                <tr>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10 g-pl-20">9</td>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">Music Improvement</td>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">
                        <span class="u-tags-v1 text-center g-width-100 g-brd-around g-brd-lightblue-v3 g-bg-lightblue-v3 g-font-size-default g-color-white g-rounded-50 g-py-4 g-px-15">approved</span>
                    </td>
                    <td class="g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">Dec 20, 2016</td>
                    <td class="text-right g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom g-brd-2 g-brd-gray-light-v4 g-py-10">$9562</td>
                </tr>
                <tr>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom--md g-brd-2 g-brd-gray-light-v4 g-py-10 g-pl-20">10</td>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom--md g-brd-2 g-brd-gray-light-v4 g-py-10">Truck Advertising</td>
                    <td class="g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom--md g-brd-2 g-brd-gray-light-v4 g-py-10">
                        <span class="u-tags-v1 text-center g-width-100 g-brd-around g-brd-teal-v2 g-bg-teal-v2 g-font-size-default g-color-white g-rounded-50 g-py-4 g-px-15">done</span>
                    </td>
                    <td class="g-valign-middle g-brd-top-none g-brd-bottom--md g-brd-2 g-brd-gray-light-v4 g-py-10">Dec 24, 2016</td>
                    <td class="text-right g-font-size-default g-color-black g-valign-middle g-brd-top-none g-brd-bottom--md g-brd-2 g-brd-gray-light-v4 g-py-10">$5470</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="js-area-chart u-area-chart--v1 g-pos-rel g-line-height-0" data-height="65px" data-high="2420" data-low="0" data-offset-x="0" data-offset-y="0" data-postfix=" m" data-is-show-area="true" data-is-show-line="false" data-is-show-point="true" data-is-full-width="true"
             data-is-stack-bars="true" data-is-show-axis-x="false" data-is-show-axis-y="false" data-is-show-tooltips="true" data-tooltip-description-position="left" data-tooltip-custom-class="u-tooltip--v2 g-font-weight-300 g-font-size-default g-color-gray-dark-v6"
             data-align-text-axis-x="center" data-fill-opacity="1" data-fill-colors='["#67c8d8"]' data-stroke-color="#e1eaea" data-stroke-dash-array="0" data-text-size-x="14px" data-text-color-x="#000000" data-text-offset-top-x="0" data-text-size-y="14px"
             data-text-color-y="#53585e" data-points-colors='["#1cc9e4"]' data-series='[
            [
              {"meta": "$", "value": 100},
              {"meta": "$", "value": 2100},
              {"meta": "$", "value": 350},
              {"meta": "$", "value": 2920},
              {"meta": "$", "value": 840},
              {"meta": "$", "value": 2770}
            ]
          ]' data-labels='["2013", "2014", "2015", "2016", "2017"]'></div>
    </div>
    <!-- End Income Cards -->
</div>
<!-- End Income Card -->
<!-- Calendar Card -->
<div class="col-xl-4">
    <!-- Calendar Card -->
    <div class="g-mb-30">
        <header class="u-bg-overlay g-bg-img-hero g-bg-black-opacity-0_5--after g-rounded-4 g-rounded-0--bottom-left g-rounded-0--bottom-right g-overflow-hidden" style="background-image: url(../../assets/img-temp/400x270/img3.jpg);">
            <div class="u-bg-overlay__inner g-color-white g-pa-30">
                <h3 class="g-font-weight-300 g-font-size-28 g-color-white g-mb-35">
                    Friday 3rd
                    <span class="d-block g-font-size-16">January 2017</span>
                </h3>
                <a class="btn btn-md text-uppercase u-btn-outline-white" href="#">Add event</a>
            </div>
        </header>
        <section class="g-brd-around g-brd-top-none g-brd-gray-light-v7 g-rounded-4 g-rounded-0--top-left g-rounded-0--top-right">
            <div class="g-pa-10 g-pa-20--md">
                <div id="datepicker" class="u-datepicker--v2"></div>
            </div>
            <ul class="list-unstyled">
                <li class="media g-bg-gray-light-v8 g-brd-left g-brd-2 g-brd-darkblue-v2 g-px-30 g-py-15 g-mb-2 g-ml-minus-1">
                    <strong class="d-flex align-self-center g-width-80 g-color-black">8:00am</strong>
                    <div class="media-body g-font-weight-300 g-color-black">Build My Own Website</div>
                </li>
                <li class="media g-bg-gray-light-v8 g-brd-left g-brd-2 g-brd-lightblue-v4 g-px-30 g-py-15 g-mb-2 g-ml-minus-1">
                    <strong class="d-flex align-self-center g-width-80 g-color-black">9:00am</strong>
                    <div class="media-body g-font-weight-300 g-color-black">Create New Content</div>
                </li>
                <li class="media g-bg-gray-light-v8 g-brd-left g-brd-2 g-brd-darkblue-v2 g-px-30 g-py-15 g-mb-2 g-ml-minus-1">
                    <strong class="d-flex align-self-center g-width-80 g-color-black">10:00am</strong>
                    <div class="media-body g-font-weight-300 g-color-black">Check Unify Profile Updates</div>
                </li>
            </ul>
        </section>
    </div>
    <!-- End Calendar Card -->
</div>
<!-- End Calendar Card -->
<!-- Activity Card -->
<div class="col-xl-4">
    <!-- Activity Card -->
    <div class="card g-brd-gray-light-v7 g-mb-30">
        <header class="media g-pa-15 g-pa-25-30-0--md g-mb-16">
            <h3 class="d-flex align-self-center text-uppercase g-font-size-12 g-font-size-default--md g-color-black g-mr-20 mb-0">Activity</h3>
            <div class="media-body d-flex justify-content-end">
                <div id="rangePickerWrapper" class="u-datepicker-right u-datepicker--v3 g-pr-10">
                    <input id="rangeDatepicker" class="g-font-size-12 g-font-size-default--md" type="text" data-rp-wrapper="#rangePickerWrapper" data-rp-type="range" data-rp-date-format="d M Y" data-rp-default-date='["01 Jan 2016", "31 Dec 2017"]'>
                    <i class="hs-admin-angle-down g-absolute-centered--y g-right-0 g-color-gray-light-v3"></i>
                </div>
            </div>
        </header>
        <div class="js-custom-scroll g-height-400 g-pa-15 g-pl-5--md g-pr-30--md g-py-25--md">
            <section class="u-timeline-v2-wrap g-pos-rel g-left-25--before g-mb-20">
                <div class="g-orientation-left g-pos-rel g-ml-25--md g-pl-20">
                    <div class="g-hidden-sm-down u-timeline-v2__icon g-top-35">
                        <i class="d-block g-width-16 g-height-16 g-bg-white g-brd-around g-brd-2 g-brd-lightblue-v3 rounded-circle"></i>
                    </div>
                    <div class="media g-mb-16">
                        <div class="d-flex align-self-center g-mr-15">
                            <img class="g-width-55 g-height-55 rounded-circle" src="../../assets/img-temp/100x100/img1.jpg" alt="Image Description">
                        </div>
                        <div class="media-body align-self-center">
                            <h3 class="g-font-weight-300 g-font-size-16 g-mb-3">Htmlstream</h3>
                            <em class="g-font-style-normal g-color-lightblue-v3">Commented on Project</em>
                        </div>
                    </div>
                    <p class="g-font-weight-300 g-font-size-default g-mb-16">When you browse through videos at YouTube, which do you usually click first: one with around 10 views or one with around 75,000 views</p>
                    <em class="d-flex align-self-center align-items-center g-font-style-normal g-color-gray-dark-v6">
                        <i class="hs-admin-time g-font-size-default g-font-size-18--md g-color-gray-light-v3"></i>
                        <span class="g-font-weight-300 g-font-size-12 g-font-size-default--md g-ml-4 g-ml-8--md">45 Min <span class="g-hidden-md-down">ago</span></span>
                    </em>
                </div>
                <hr class="d-flex g-brd-gray-light-v4 g-ml-35--md g-my-20 g-my-30--md">
                <div class="g-orientation-left g-pos-rel g-ml-25--md g-pl-20">
                    <div class="g-hidden-sm-down u-timeline-v2__icon g-top-35">
                        <i class="d-block g-width-16 g-height-16 g-bg-white g-brd-around g-brd-2 g-brd-lightblue-v3 rounded-circle"></i>
                    </div>
                    <div class="media g-mb-25">
                        <div class="d-flex align-self-center g-mr-15">
                            <img class="g-width-55 g-height-55 rounded-circle" src="../../assets/img-temp/100x100/img4.jpg" alt="Image Description">
                        </div>
                        <div class="media-body align-self-center">
                            <h3 class="g-font-weight-300 g-font-size-16 g-mb-3">E<span class="g-hidden-md-down">mma&nbsp;</span><span class="g-hidden-md-up">.</span>Watson</h3>
                            <em class="g-font-style-normal g-color-lightblue-v3">Added New Files</em>
                        </div>
                    </div>
                    <em class="d-flex align-self-center align-items-center g-font-style-normal g-mb-30">
                        <i class="hs-admin-zip g-font-size-24 g-color-lightblue-v3"></i>
                        <span class="g-font-weight-300 g-font-size-default g-color-gray-dark-v6 g-ml-12">Project Updates.zip</span>
                    </em>
                    <em class="d-flex align-self-center align-items-center g-font-style-normal g-color-gray-dark-v6">
                        <i class="hs-admin-time g-font-size-default g-font-size-18--md g-color-gray-light-v3"></i>
                        <span class="g-font-weight-300 g-font-size-12 g-font-size-default--md g-ml-4 g-ml-8--md">10 Min <span class="g-hidden-md-down">ago</span></span>
                    </em>
                </div>
                <hr class="d-flex g-brd-gray-light-v4 g-ml-35--md g-my-20 g-my-30--md">
                <div class="g-orientation-left g-pos-rel g-ml-25--md g-pl-20">
                    <div class="g-hidden-sm-down u-timeline-v2__icon g-top-35">
                        <i class="d-block g-width-16 g-height-16 g-bg-white g-brd-around g-brd-2 g-brd-lightblue-v3 rounded-circle"></i>
                    </div>
                    <div class="media g-mb-16">
                        <div class="d-flex align-self-center g-mr-15">
                            <img class="g-width-55 g-height-55 rounded-circle" src="../../assets/img-temp/100x100/img5.jpg" alt="Image Description">
                        </div>
                        <div class="media-body align-self-center">
                            <h3 class="g-font-weight-300 g-font-size-16 g-mb-3">V<span class="g-hidden-md-down">erna&nbsp;</span><span class="g-hidden-md-up">.</span>Swanson</h3>
                            <em class="g-font-style-normal g-color-lightblue-v3">Commented on Project</em>
                        </div>
                    </div>
                    <p class="g-font-weight-300 g-font-size-default g-mb-16">The collapse of the online-advertising market in 2001 made marketing on the Internet seem even less compelling. Website usability, press releases, online media buys, podcasts, mobile marketing and more – there’s an entire world</p>
                    <em class="d-flex align-self-center align-items-center g-font-style-normal g-color-gray-dark-v6">
                        <i class="hs-admin-time g-font-size-default g-font-size-18--md g-color-gray-light-v3"></i>
                        <span class="g-font-weight-300 g-font-size-12 g-font-size-default--md g-ml-4 g-ml-8--md">10 Min <span class="g-hidden-md-down">ago</span></span>
                    </em>
                </div>
                <hr class="d-flex g-brd-gray-light-v4 g-ml-35--md g-my-20 g-my-30--md">
                <div class="g-orientation-left g-pos-rel g-ml-25--md g-pl-20">
                    <div class="g-hidden-sm-down u-timeline-v2__icon g-top-35">
                        <i class="d-block g-width-16 g-height-16 g-bg-white g-brd-around g-brd-2 g-brd-lightblue-v3 rounded-circle"></i>
                    </div>
                    <div class="media g-mb-16">
                        <div class="d-flex align-self-center g-mr-15">
                            <img class="g-width-55 g-height-55 rounded-circle" src="../../assets/img-temp/100x100/img7.jpg" alt="Image Description">
                        </div>
                        <div class="media-body align-self-center">
                            <h3 class="g-font-weight-300 g-font-size-16 g-mb-3">J<span class="g-hidden-md-down">ohn&nbsp;</span><span class="g-hidden-md-up">.</span>Doe</h3>
                            <em class="g-font-style-normal g-color-lightblue-v3">Shared Project with Users</em>
                        </div>
                    </div>
                    <ul class="list-inline d-flex g-mb-20">
                        <li class="list-inline-item g-mb-10 g-mb-0--sm mr-0">
                            <img class="g-width-30 g-width-40--md g-height-30 g-height-40--md rounded-circle" src="../../assets/img-temp/100x100/img4.jpg" alt="Image Description">
                        </li>
                        <li class="list-inline-item g-mb-10 g-mb-0--sm g-ml-7 mr-0">
                            <img class="g-width-30 g-width-40--md g-height-30 g-height-40--md rounded-circle" src="../../assets/img-temp/100x100/img7.jpg" alt="Image Description">
                        </li>
                        <li class="list-inline-item g-mb-10 g-mb-0--sm g-ml-7 mr-0">
                            <img class="g-width-30 g-width-40--md g-height-30 g-height-40--md rounded-circle" src="../../assets/img-temp/100x100/img14.jpg" alt="Image Description">
                        </li>
                        <li class="list-inline-item g-mb-10 g-mb-0--sm g-ml-7 mr-0">
                            <img class="g-width-30 g-width-40--md g-height-30 g-height-40--md rounded-circle" src="../../assets/img-temp/100x100/img15.jpg" alt="Image Description">
                        </li>
                        <li class="list-inline-item g-mb-10 g-mb-0--sm g-ml-7 mr-0">
                            <div class="d-flex align-items-center justify-content-center g-width-30 g-width-40--md g-height-30 g-height-40--md g-bg-gray-light-v8 g-font-size-14 g-font-size-16--md g-color-lightblue-v3 rounded-circle">+5</div>
                        </li>
                    </ul>
                    <em class="d-flex align-self-center align-items-center g-font-style-normal g-color-gray-dark-v6">
                        <i class="hs-admin-time g-font-size-default g-font-size-18--md g-color-gray-light-v3"></i>
                        <span class="g-font-weight-300 g-font-size-12 g-font-size-default--md g-ml-4 g-ml-8--md">10 Min <span class="g-hidden-md-down">ago</span></span>
                    </em>
                </div>
                <hr class="d-flex g-brd-gray-light-v4 g-ml-35--md g-my-20 g-my-30--md">
            </section>
            <a class="d-flex align-items-center text-uppercase u-link-v5 g-font-style-normal g-color-lightblue-v3 g-ml-25--md" href="#!">
                <i class="hs-admin-reload g-font-size-20"></i>
                <span class="g-font-size-12 g-font-size-default--md g-ml-10 g-ml-25--md">Load more</span>
            </a>
        </div>
    </div>
    <!-- End Activity Card -->
</div>
<!-- End Activity Card -->
<!-- Tickets Card -->
<div class="col-xl-4">
    <!-- Tickets Cards -->
    <div class="card g-brd-gray-light-v7 g-mb-30">
        <header class="media g-pa-15 g-pa-25-30-0--md g-mb-20">
            <h3 class="text-uppercase g-font-size-12 g-font-size-default--md g-color-black mb-0">Tickets</h3>
        </header>
        <div class="js-custom-scroll g-height-400 g-pa-15 g-pa-0-30-25--md">
            <section>
                <div class="media">
                    <div class="media-body g-mb-15">
                        <h3 class="g-font-weight-300 g-font-size-16 g-color-black g-mb-5">Freelance Design</h3>
                        <p class="g-font-weight-300 g-color-gray-dark-v6 mb-0">15 Tips To Increase Your Adwords</p>
                    </div>
                    <div class="d-flex">
                        <a class="u-link-v5 g-font-size-16 g-color-lightblue-v3" href="#!">#001-3456</a>
                    </div>
                </div>
                <div class="media">
                    <div class="media-body align-self-center" href="#!">
                        <span class="u-tags-v1 text-center g-width-140 g-bg-lightblue-v3 g-color-white g-brd-around g-brd-lightblue-v3 g-rounded-50 g-py-4 g-px-15">In Progress</span>
                    </div>
                    <em class="d-flex align-self-center align-items-center g-font-style-normal">
                        <i class="hs-admin-time g-font-size-default g-font-size-18--md g-color-gray-light-v3"></i>
                        <span class="g-font-weight-300 g-font-size-12 g-font-size-default--md g-color-gray-dark-v6 g-ml-4 g-ml-8--md">45 Min <span class="g-hidden-md-down">ago</span></span>
                    </em>
                </div>
            </section>
            <hr class="d-flex g-brd-gray-light-v4 g-my-25">
            <section>
                <div class="media">
                    <div class="media-body g-mb-15">
                        <h3 class="g-font-weight-300 g-font-size-16 g-color-black g-mb-5">The Flash Tutorial</h3>
                        <p class="g-font-weight-300 g-color-gray-dark-v6 mb-0">Las Vegas How To Have Non Gambling</p>
                    </div>
                    <div class="d-flex">
                        <a class="u-link-v5 g-font-size-16 g-color-lightblue-v3" href="#!">#001-3458</a>
                    </div>
                </div>
                <div class="media">
                    <div class="media-body align-self-center" href="#!">
                        <span class="u-tags-v1 text-center g-width-140 g-bg-teal-v2 g-color-white g-brd-around g-brd-teal-v2 g-rounded-50 g-py-4 g-px-15">Done</span>
                    </div>
                    <em class="d-flex align-self-center align-items-center g-font-style-normal">
                        <i class="hs-admin-time g-font-size-default g-font-size-18--md g-color-gray-light-v3"></i>
                        <span class="g-font-weight-300 g-font-size-12 g-font-size-default--md g-color-gray-dark-v6 g-ml-4 g-ml-8--md">15 Min <span class="g-hidden-md-down">ago</span></span>
                    </em>
                </div>
            </section>
            <hr class="d-flex g-brd-gray-light-v4 g-my-25">
            <section>
                <div class="media">
                    <div class="media-body g-mb-15">
                        <h3 class="g-font-weight-300 g-font-size-16 g-color-black g-mb-5">Free Advertising</h3>
                        <p class="g-font-weight-300 g-color-gray-dark-v6 mb-0">How Does An Lcd Screen Work</p>
                    </div>
                    <div class="d-flex">
                        <a class="u-link-v5 g-font-size-16 g-color-lightblue-v3" href="#!">#001-3454</a>
                    </div>
                </div>
                <div class="media">
                    <div class="media-body align-self-center" href="#!">
                        <span class="u-tags-v1 text-center g-width-140 g-bg-lightred-v2 g-color-white g-brd-around g-brd-lightred-v2 g-rounded-50 g-py-4 g-px-15">To Do</span>
                    </div>
                    <em class="d-flex align-self-center align-items-center g-font-style-normal">
                        <i class="hs-admin-time g-font-size-default g-font-size-18--md g-color-gray-light-v3"></i>
                        <span class="g-font-weight-300 g-font-size-12 g-font-size-default--md g-color-gray-dark-v6 g-ml-4 g-ml-8--md">10 Min <span class="g-hidden-md-down">ago</span></span>
                    </em>
                </div>
            </section>
        </div>
    </div>
    <!-- End Tickets Cards -->
</div>
<!-- End Tickets Card -->
<!-- Comments Card -->
<div class="col-xl-4">
    <!-- Comments Card-->
    <div class="card g-brd-gray-light-v7 g-mb-30">
        <header class="media g-pa-15 g-pa-25-30-0--md g-mb-20">
            <h3 class="text-uppercase g-font-size-12 g-font-size-default--md g-color-black mb-0">Recent comments</h3>
        </header>
        <div class="js-custom-scroll g-height-400 g-pa-15 g-pa-0-30-25--md">
            <section class="media">
                <div class="d-flex g-mr-12">
                    <img class="g-width-40 g-width-48--md g-height-40 g-height-48--md rounded-circle" src="../../assets/img-temp/100x100/img5.jpg" alt="Image Description">
                </div>
                <div class="media-body">
                    <h3 class="g-font-weight-300 g-font-size-16 g-color-black g-mb-5">V<span class="g-hidden-md-down">erna&nbsp;</span><span class="g-hidden-md-up">.</span>Swanson</h3>
                    <p class="g-font-weight-300 g-color-gray-dark-v6 g-mb-15">15 Tips To Increase Your Adwords</p>
                    <div class="media">
                        <div class="media-body align-self-center" href="#!">
                            <span class="u-tags-v1 text-center g-width-140--md g-bg-gray-light-v8 g-font-size-12 g-font-size-default--md g-color-darkblue-v2 g-brd-around g-brd-gray-light-v8 g-rounded-50 g-py-4 g-px-15">
                                Dropbox
                                <span class="g-hidden-sm-down">Project</span>
                            </span>
                        </div>
                        <em class="d-flex align-self-center align-items-center g-font-style-normal">
                            <i class="hs-admin-time g-font-size-default g-font-size-18--md g-color-gray-light-v3"></i>
                            <span class="g-font-weight-300 g-font-size-12 g-font-size-default--md g-color-gray-dark-v6 g-ml-4 g-ml-8--md">45 Min <span class="g-hidden-md-down">ago</span></span>
                        </em>
                    </div>
                </div>
            </section>
            <hr class="d-flex g-brd-gray-light-v4 g-my-25">
            <section class="media">
                <div class="d-flex g-mr-12">
                    <img class="g-width-40 g-width-48--md g-height-40 g-height-48--md rounded-circle" src="../../assets/img-temp/100x100/img14.jpg" alt="Image Description">
                </div>
                <div class="media-body">
                    <h3 class="g-font-weight-300 g-font-size-16 g-color-black g-mb-5">E<span class="g-hidden-md-down">ddie&nbsp;</span><span class="g-hidden-md-up">.</span>Hayes</h3>
                    <p class="g-font-weight-300 g-color-gray-dark-v6 g-mb-15">Las Vegas How To Have Non Gambling</p>
                    <div class="media">
                        <div class="media-body align-self-center" href="#!">
                            <span class="u-tags-v1 text-center g-width-140--md g-bg-gray-light-v8 g-font-size-12 g-font-size-default--md g-color-darkblue-v2 g-brd-around g-brd-gray-light-v8 g-rounded-50 g-py-4 g-px-15">
                                Sketch
                                <span class="g-hidden-sm-down">Project</span>
                            </span>
                        </div>
                        <em class="d-flex align-self-center align-items-center g-font-style-normal">
                            <i class="hs-admin-time g-font-size-default g-font-size-18--md g-color-gray-light-v3"></i>
                            <span class="g-font-weight-300 g-font-size-12 g-font-size-default--md g-color-gray-dark-v6 g-ml-4 g-ml-8--md">15 Min <span class="g-hidden-md-down">ago</span></span>
                        </em>
                    </div>
                </div>
            </section>
            <hr class="d-flex g-brd-gray-light-v4 g-my-25">
            <section class="media">
                <div class="d-flex g-mr-12">
                    <img class="g-width-40 g-width-48--md g-height-40 g-height-48--md rounded-circle" src="../../assets/img-temp/100x100/img7.jpg" alt="Image Description">
                </div>
                <div class="media-body">
                    <h3 class="g-font-weight-300 g-font-size-16 g-color-black g-mb-5">H<span class="g-hidden-md-down">erbert&nbsp;</span><span class="g-hidden-md-up">.</span>Castro</h3>
                    <p class="g-font-weight-300 g-color-gray-dark-v6 g-mb-15">But today, the use and influence of is growing right along illustration</p>
                    <div class="media">
                        <div class="media-body align-self-center" href="#!">
                            <span class="u-tags-v1 text-center g-width-140--md g-bg-gray-light-v8 g-font-size-12 g-font-size-default--md g-color-darkblue-v2 g-brd-around g-brd-gray-light-v8 g-rounded-50 g-py-4 g-px-15">
                                Unify
                                <span class="g-hidden-sm-down">Project</span>
                            </span>
                        </div>
                        <em class="d-flex align-self-center align-items-center g-font-style-normal">
                            <i class="hs-admin-time g-font-size-default g-font-size-18--md g-color-gray-light-v3"></i>
                            <span class="g-font-weight-300 g-font-size-12 g-font-size-default--md g-color-gray-dark-v6 g-ml-4 g-ml-8--md">10 Min <span class="g-hidden-md-down">ago</span></span>
                        </em>
                    </div>
                </div>
            </section>
            <hr class="d-flex g-brd-gray-light-v4 g-my-25">
            <section class="media">
                <div class="d-flex g-mr-12">
                    <img class="g-width-40 g-width-48--md g-height-40 g-height-48--md rounded-circle" src="../../assets/img-temp/100x100/img7.jpg" alt="Image Description">
                </div>
                <div class="media-body">
                    <h3 class="g-font-weight-300 g-font-size-16 g-color-black g-mb-5">H<span class="g-hidden-md-down">erbert&nbsp;</span><span class="g-hidden-md-up">.</span>Castro</h3>
                    <p class="g-font-weight-300 g-color-gray-dark-v6 g-mb-15">How Does An Lcd Screen Work</p>
                    <div class="media">
                        <div class="media-body align-self-center" href="#!">
                            <span class="u-tags-v1 text-center g-width-140--md g-bg-gray-light-v8 g-font-size-12 g-font-size-default--md g-color-darkblue-v2 g-brd-around g-brd-gray-light-v8 g-rounded-50 g-py-4 g-px-15">
                                Unify
                                <span class="g-hidden-sm-down">Project</span>
                            </span>
                        </div>
                        <em class="d-flex align-self-center align-items-center g-font-style-normal">
                            <i class="hs-admin-time g-font-size-default g-font-size-18--md g-color-gray-light-v3"></i>
                            <span class="g-font-weight-300 g-font-size-12 g-font-size-default--md g-color-gray-dark-v6 g-ml-4 g-ml-8--md">12 Min <span class="g-hidden-md-down">ago</span></span>
                        </em>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <!-- Comments Card-->
</div>
<!-- End Comments Card -->
</div>